/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%;overflow-x: hidden;}
body{
  margin:0;
  font-family:"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color:#2F2F2F;
  -webkit-font-smoothing:antialiased;
  background:white;
  line-height:1.5;
}

/* Containers */
.container{
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}

/* ---------- Top nav ---------- */
.topnav {
  background: #4F46E5; /* changed background */
  /* position: sticky; */
  top: 0;
  z-index: 30;
}
.topnav .nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}

/* brand */
.brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.brand img {
  height: 36px;
  width: auto;
  display: block;
}

/* nav links (desktop) */
.nav-links {
  display: flex;
  gap: 22px;
  align-items: center;
}
.nav-links a {
  text-decoration: none;
  color: white; /* changed to white */
  font-weight: 500;
  font-size: 14px;
}
.nav-links a:hover {
  color: #e0e0ff; /* lighter white on hover */
}


/* hamburger (mobile) */
.hamburger{
  display:none;
  border:0;background:transparent;padding:6px;cursor:pointer;
}
.hamburger span{display:block;width:22px;height:2px;background:#111;margin:4px 0;border-radius:2px}

/* ---------- Overlay menu ---------- */
.overlay-menu{
  position:fixed;inset:0;
  background:white;
  display:none;
  z-index:60;
  padding:36px;
}
.overlay-close{
  position:absolute;top:22px;border:0;background:transparent;font-size:28px;cursor:pointer;
}
.overlay-links{
  margin-top:48px;display:flex;flex-direction:column;gap:28px;padding-left:18px;
}
.overlay-link{
  font-size:18px;text-decoration:none;color:#222;font-weight:700;
}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  min-height:480px;
  overflow:hidden;
  display:flex;align-items:flex-end;
}
.hero-bg{
  width:100%;height:100%;object-fit:cover;position:absolute;inset:0;
}
.hero-cta{
  position:relative;
  z-index:2;
  margin:30px;
  background:linear-gradient(90deg,#4DCA79,#1CBDDD);
  color:white;
  padding:20px 20px;
  width: 630px;
  height: 250px;
  transform:translateY(0);
}
.hero-cta p{
  margin:0 0 10px 0;
  font-size:34px;
  line-height:1.05;
  font-weight:700;
}
.btn{
  display:inline-block;padding:10px 14px;border-radius:6px;text-decoration:none;font-weight:700;font-size:14px;
}
.btn.orange{background:#F28D35;color:white}

/* ---------- Sections layout ---------- */
.section{padding:1px 0}
.section-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:48px;
  align-items:center;
}

/* images */
.services-image img,
.strategy-image img{width:100%;height:auto;border-radius:12px;display:block;}

/* textual content */
.services-content h2,
.strategy-content h2{
  font-size:27px;
  color:#4F46E5;
  margin:0 0 12px 0;
  font-weight:600;
}
.services-content p,
.strategy-content p{color:black;margin:0 0 18px 0;line-height:1.6;font-weight: 400;font-size: 16px;}

/* reverse class places image on right */
.section-grid.reverse{grid-template-columns:1fr 1fr}
.section-grid.reverse .strategy-content{order:1}
.section-grid.reverse .strategy-image{order:2}

/* FAQ */
.faq .centered-title{text-align:center;color:#4F46E5;font-size:27px;margin-bottom:28px;font-weight:600}
.accordion{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.acc-item{background:#FAF8FF;border-radius:10px;border:1px solid rgba(82,55,140,0.06);overflow:hidden}
.acc-btn{
  display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:18px;border:0;background:transparent;cursor:pointer;font-weight:700;
}
.acc-title{color:black;text-align:left;font-weight: 500;font-size: 19px;}
.acc-icon{font-size:20px;color:#545A75}
.acc-panel{max-height:0;overflow:hidden;padding:0 18px;color:#545A75;transition:max-height .45s ease,padding .3s ease}
.acc-panel p{margin:12px 0 20px 0;font-weight: 400;font-size: 17px;}

/* footer */
.site-footer{
  background:#4F46E5;
  color:white;
  padding:36px 0 18px;
  margin-top: 40px;
}
.footer-grid{display:grid;grid-template-columns:1fr 220px 220px;gap:28px;align-items:start}
.foot-brand img{
  width:auto;height:36px;margin-right:8px
}
.foot-brand p.muted{color:#ffffff;max-width:360px;font-size: 16px;font-weight: 400;}
.foot-links h3{margin:0 0 10px 0;font-weight:600}
.foot-links ul{list-style:none;padding:0;margin:0}
.foot-links li{margin-bottom:10px;color:#ffffff;font-size: 14px;font-weight: 500;}
.footer-box{width: 630px;
  height: 0;
  border-top: 1px solid white;
  margin: 0 auto; /* centers the line horizontally */
  opacity: 1;}
  .separator {
  margin: 0 8px;}
.footer-bottom{padding:10px;text-align:center;margin-top:8px;}

/* ---------- Responsive rules ---------- */

/* Desktop specific sizes and fine tuning */
@media (min-width:1200px){
  .hero{min-height:520px}
  .hero-cta{margin-left:80px;margin-bottom:60px;}
  .hero-cta p{font-size:44px}
  .section{padding:1px 0}
  .section-grid{gap:72px}
}

/* large laptop slightly narrower */
@media (max-width:1199px){
  .container{padding:0 20px}
  .hero-cta{margin-left:30px;margin-bottom:30px; width: 530px;height: 206px;}
  .hero-cta p{font: size 25px;}
}

/* tablet */
@media (max-width:768px){
  .nav-links{display:none}
  .hamburger{display:block}
  .hero {
    position: static;        /* remove relative positioning for layout flow */
    display: block;          /* remove flex */
    min-height: auto;        
        
  }
  .hero-bg {
    position: static;        /* make img position normal */
    width: 100%;
    height: auto;
    object-fit: cover;       /* keep cover if you want */
  }
  .hero-cta {
    position: static;  
    width: 100%;      /* normal flow */
    margin: 0px 0px; 
    height: auto;            /* auto height */
    padding: 20px 30px;      /* adjust padding if needed */
    transform: none;         /* remove translate */
  }
  .hero-cta p{font-size:22px}
  .section-grid{grid-template-columns:1fr 1fr;}
  .section{padding:25px 0}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* small mobile */
@media (max-width:376px){
  .hero {
    position: static;       
    display: block;          
    min-height: auto;        
        
  }
  .hero-bg {
    position: static;      
    width: 100%;
    height: auto;
    object-fit: cover;   
  }
  .hero-cta {
    position: static;  
    width: 100%;     
    margin: 0px 0px; 
    height: auto;            
    padding: 20px 30px;     
    /* transform: none;  */
  }
  .hero-cta p{font-size:22px}
  .overlay-menu{display:flex}
  .overlay-menu[aria-hidden="true"]{display:none}
  .overlay-menu[aria-hidden="false"]{display:flex}
  .overlay-links{padding-left:6vw}
  .logo-text{font-size:15px}
  .footer-grid{grid-template-columns:1fr}

  .section-grid {
    display: flex;
    flex-direction: column;
    text-align:center;
  }

  /* Ensure reverse layout (strategy) also has image first */
  .section-grid.reverse {
    flex-direction: column;
  }

  /* Optional: adjust spacing between image & text */
  .services-image,
  .strategy-image {
    margin-bottom: 5px;
  }
}