@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Roboto+Serif:wght@400;700&display=swap');

:root {
  --c_black: #111;
  --c_blue: #0a66b2;         
  --c_blue-light: #4a90e2;
  --c_general: #3f3f3f;
  --c_white: #ffffff;
  --c_gray-light: #f5f5f5;
  --c_overlay: rgba(17,17,17,.85);

  --f_general: 'Open Sans', sans-serif;
  --f_serif: 'Roboto Serif', serif;

  --fs_base: 1rem;
  --fs_nav: 0.95rem;
  --fs_btn: 1rem;
  --fs_h1: 1.75rem;
  --fs_h2: 1.25rem;
  --fs_h3: 1rem;
  --fs_small: 0.875rem;

  --fw_normal: 400;
  --fw_medium: 600;
  --fw_semibold: 600;
  --fw_bold: 700;

  --space_xs: 0.5rem;
  --space_sm: 1rem;
  --space_md: 1.5rem;
  --space_lg: 2rem;
  --space_xl: 3rem;
  --space_xxl: 4rem;

  --container_width: 90%;
  --container_max: 75rem;
  --nav_height: 4rem;
  --hero_logo_width: 20rem;

  --radius_sm: 4px;
  --radius_md: 8px;
  --gap: 1.25rem;
}


.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background: #004b93; 
  color: #fff;
}

.logo a {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}


.menu-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
}

.menu-toggle .bar {
  height: 3px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
}


.nav {
  display: none;
}

.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav li {
  margin: 1rem 0;
}

.nav a {
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
}


.nav.active {
  display: block;
  position: absolute;
  top: 60px;
  left: 0;
  right: 0;
  background: #004b93;
  padding: 1rem;
}


@media (min-width: 768px) {
  .menu-toggle {
    display: none; 
  }

  .nav {
    display: block;
    position: static;
  }

  .nav ul {
    display: flex;
    gap: 2rem;
  }

  .nav li {
    margin: 0;
  }
}


* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; }
body {
  font-family: var(--f_general);
  font-size: var(--fs_base);
  line-height: 1.6;
  color: var(--c_general);
  margin: 0;
  background: #fff;
}

h1,h2,h3,h4,h5 { font-family: var(--f_serif); color: var(--c_blue); margin:0 0 var(--space_md) 0; line-height:1.25;}
h1 { font-size: var(--fs_h1); }
h2 { font-size: var(--fs_h2); }
h3 { font-size: var(--fs_h3); }

.container { width: var(--container_width); max-width: var(--container_max); margin: 0 auto; padding: 0 var(--space_sm); }

/* layout helpers */
.layout_flex { display:flex; }
.layout_flex-center { display:flex; align-items:center; justify-content:center; }
.layout_flex-spc-btwn { display:flex; justify-content:space-between; align-items:center; }

.text-center { text-align:center; }
.mb-0 { margin-bottom: 0; }


a, a:visited { color: var(--c_blue); text-decoration:none; }
.btn {
  display:inline-block; font-family:var(--f_general); font-size:var(--fs_btn); font-weight:var(--fw_medium);
  color:var(--c_white); background: var(--c_blue); border:2px solid var(--c_blue); padding: 0.6rem 1.2rem; border-radius:var(--radius_sm);
  transition: all .25s ease;
}
.btn:hover { background:transparent; color:var(--c_blue); }
.btn-outline { background:transparent; color:var(--c_blue); border-color:var(--c_blue); }
.btn-outline:hover { background:var(--c_blue); color:var(--c_white); }


#hero {
  background: linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)), url("https://assets.codepen.io/1064831/bgHome_1.jpg");
  background-size: cover; background-position:center;
  padding: var(--space_lg) 0 var(--space_sm);
  text-align:center;
}


.hero-logo-panel {
  background: #e7f0fb;
  border: 6px solid #d7e9fb;
  padding: 0.6rem;
  display:inline-block;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  max-width: var(--hero_logo_width);
}
.hero_logo-img { display:block; width:100%; height:auto; }


#nav { position: sticky; top: 0; z-index: 200; }
.nav-utility { background: #000; color:#fff; font-size: .85rem; padding: .35rem 0; text-align:center; }
.nav-utility a { color: #ddd; }

.layout_head-resp { display:block; }
.layout_head-desk { display:none; }

/* Mobile nav */
.mobile-menu-checkbox { display:none; }
.nav-mobile { padding: .75rem 0; align-items:center; }
.mobile-nav-toggle { display:block; background:none; border:none; cursor:pointer; padding: .25rem; }
.mobile-nav-toggle img { width:28px; height:28px; filter: none; }


.mobile-nav-menu {
  display:none;
  position: fixed;
  top: calc(var(--nav_height) + 0px);
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--nav_height));
  background: linear-gradient(180deg, rgba(10,20,40,.95), rgba(10,20,40,.95));
  z-index: 9999;
  padding: 3rem 1rem;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.mobile-nav-menu ul { list-style:none; padding:0; margin:0; text-align:center; }
.mobile-nav-menu li { margin-bottom:1.25rem; }
.mobile-nav-menu a { color:var(--c_white); font-size:1.4rem; font-weight:600; text-transform:uppercase; letter-spacing:1px; }


.mobile-menu-checkbox:checked ~ .nav-mobile + .mobile-nav-menu,
.mobile-menu-checkbox:checked + .nav-mobile + .mobile-nav-menu {
  display:flex;
}


#how {
  background: linear-gradient(rgba(17,17,17,.6), rgba(17,17,17,.6)), url("https://assets.codepen.io/1064831/bg_about_2.jpg");
  background-size: cover; background-position:center;
  padding: var(--space_xl) 0;
  color:var(--c_white);
}

.how-panel {
  max-width: 340px;
  margin: 0 auto;
  background: rgba(6,6,6,0.7);
  padding: 1.25rem;
  border-radius: 6px;
  text-align:left;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.how-title { font-size: 1.05rem; margin: 0 0 .5rem; color: #fff; }
.how-title .highlight { color: var(--c_blue-light); }
.how-sub { color: var(--c_blue-light); margin: .5rem 0 1rem; }


#welcome { padding: var(--space_xl) 0; background: var(--c_gray-light); }
.welcome_img { width:100%; height:auto; border-radius:var(--radius_md); margin-bottom: var(--space_md); }


.what-we-do {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 2rem 1rem;
  background: #f8f9fa;
}

.what-we-do .card {
  background: #fff;
  border-radius: 8px;
  padding: 2rem;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.what-we-do .card img {
  width: 60px;
  height: 60px;
  margin-bottom: 1rem;
}

.what-we-do .card h3 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #004b93;
}

.what-we-do .card p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Timeline base */
.timeline {
  padding: 3rem 1rem;
  background: #f8f9fa;
}

.timeline h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 2rem;
  color: #004b93;
}

.timeline-container {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  position: relative;
}

.timeline-marker {
  width: 16px;
  height: 16px;
  background: #004b93;
  border-radius: 50%;
  flex-shrink: 0;
  margin-right: 1rem;
  margin-top: 0.3rem;
}

.timeline-content h3 {
  font-size: 1.2rem;
  color: #222;
  margin-bottom: 0.25rem;
}

.timeline-content p {
  font-size: 1rem;
  line-height: 1.6;
  color: #555;
}


.timeline-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 7px;
  width: 2px;
  height: 100%;
  background: #ddd;
}


@media (min-width: 768px) {
  .timeline-container {
    flex-direction: row;
    justify-content: space-between;
    gap: 0;
  }

  .timeline-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 220px;
  }

  .timeline-marker {
    margin: 0 0 1rem 0;
  }

  .timeline-container::before {
    left: 0;
    right: 0;
    top: 40px;
    height: 2px;
    width: 100%;
    margin: 0 auto;
  }
}



@media (min-width: 768px) {
  .what-we-do {
    flex-direction: row;
    justify-content: center;
    padding: 4rem 2rem;
  }

  .what-we-do .card {
    flex: 1;
    max-width: 400px;
  }

  .history-content p {
    font-size: 1.25rem;
  }
}



.guarantee-text { font-style:italic; color:var(--c_blue); margin-top: var(--space_md); }


#history { background:var(--c_gray-light); padding:var(--space_xl) 0; text-align:center; }


#cta { background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,.55)), url("https://assets.codepen.io/1064831/bg_client_1.jpg"); background-size:cover; background-position:center; color:var(--c_white); padding:var(--space_xl) 0; text-align:center; }
.cta-subtitle { color:var(--c_blue-light); }

#clients { padding: var(--space_xl) 0; text-align:center; background:#fff; }
.client-categories { display:flex; justify-content:center; gap:var(--space_sm); flex-wrap:wrap; margin-bottom: var(--space_lg); }
.category-tag { border:2px solid var(--c_blue); background:transparent; color:var(--c_blue); padding:.5rem 1rem; border-radius:var(--radius_sm); min-width:140px; font-weight:600; }
.client-logos { display:grid; gap:var(--space_md); grid-template-columns: repeat(2, 1fr); align-items:center; margin-bottom: var(--space_lg); }
.client-logo { background:var(--c_white); padding:var(--space_md); border-radius:var(--radius_md); box-shadow: 0 4px 16px rgba(0,0,0,0.06); display:flex; align-items:center; justify-content:center; min-height:80px; }
.client-logo img { max-width:140px; height:auto; }


footer { background:var(--c_black); color:var(--c_white); padding: var(--space_md) 0; text-align:center; }

@media (min-width: 576px) {
  :root { --fs_h1: 2rem; --fs_h2: 1.5rem; --container_width: 85%; }
  .client-logos { grid-template-columns: repeat(3,1fr); }
  .what-services { grid-template-columns: repeat(2,1fr); }
  .how-panel { max-width: 420px; margin-left: auto; margin-right: auto; }
}

@media (min-width: 768px) {
  :root { --hero_logo_width: 25rem; --fs_h1: 2.25rem; --fs_h2: 1.75rem; }
  .container { padding: 0 1.25rem; }
  .what-services { grid-template-columns: repeat(3,1fr); }
  .client-logos { grid-template-columns: repeat(4,1fr); }
}

@media (min-width: 1024px) {

  .layout_head-resp { display: none; }
  .layout_head-desk { display: block; }

  :root { --fs_h1: 2.5rem; --fs_h2: 2rem; --hero_logo_width: 30rem; --container_width: 85%; --nav_height: 3.4rem; }

  
  .nav-desk ul { list-style:none; margin:0; padding:0; display:flex; gap: 2rem; align-items:center; }
  .nav-desk a { font-weight:600; padding: .5rem .25rem; color: var(--c_general); }
  .nav-desk a:hover { color: var(--c_blue); }

  .nav-desk_logo { width: 10rem; }
  .nav-desk_logo-img { width:100%; height:auto; }

 
  #welcome .layout_flex { align-items:center; gap:var(--space_lg); }
  .welcome_box.col-5 { flex: 0 0 40%; }
  .welcome_box.col-7 { flex: 0 0 55%; }

  
  #how { padding: 6rem 0; }
  .how-panel {
    max-width: 420px;
    margin: 0;
    position: relative;
    left: 0;
    transform: translateX(40%); 
  }

  .client-logos { grid-template-columns: repeat(4, 1fr); }
  .client-logo img { max-width: 160px; }
}

@media (min-width: 1280px) {
  :root { --container_width: 80%; --hero_logo_width: 35rem; }
  .how-panel { transform: translateX(55%); }
  .what-services { grid-template-columns: repeat(4, 1fr); }
}