/* Hamburger visibility: desktop hidden, mobile visible */
.nav-toggle {display: none !important;}
@media (max-width: 768px) {
  .nav-toggle {display: flex !important;}
  
  .nav-links.open {display: flex;}
}
/* ─── Hamburger Visibility ───────────────────────── */

@media (max-width: 768px) {
  
  
  .nav-links.open {
    display: flex;
  }
}
/* ─────────────────────────────────────────────────── */

/* ─── Variables & Native Smooth Scroll ─────────────── */
:root {
  --nav-h: 60px;    /* height of your fixed navbar */
  --gap:   150px;   /* extra space below navbar you want under each section */
}
html {
  scroll-behavior: smooth;  
  /* 
    scroll-padding-top tells the browser: 
    whenever you scroll an element into view, 
    stop this much below the top of the viewport.
    We want nav‑height + extra gap.
  */
  scroll-padding-top: calc(var(--nav-h) + var(--gap));
}
/* ─────────────────────────────────────────────────── */

* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Roboto',sans-serif; color:#fff; background:#0d0d0d; line-height:1.6; }
.container { width:90%; max-width:1200px; margin:0 auto; }
.section { padding:60px 0; text-align:center; }

nav{position:fixed;top:0;width:100%;background:rgba(0,0,0,0.8);z-index:1000;padding:15px 0;}








/* Push the toggle button to the far right */




.logo img{max-height:80px;}

.nav-links li{margin:0 15px;}
.nav-links a{color:#fff;text-decoration:none;font-size:1rem;transition:color .3s;}
.nav-links a:hover{color:#00baff;}

header{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden;padding-top:80px;}
.hero-bg{position:absolute;top:0;left:0;width:100%;height:100%;background:url('https://images.unsplash.com/photo-1564767609342-620cb19b2357?auto=format&fit=crop&w=1950&q=80')no-repeat center center;background-size:cover;opacity:0.3;z-index:-1;}
.hero-content{position:relative;padding:40px;border-radius:8px;background:rgba(0,0,0,0.6);}
.hero-content::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url('../images/chipxcel_logo.png') no-repeat center center, url('https://www.transparenttextures.com/patterns/cubes.png') no-repeat center center;background-size:50% auto,cover;opacity:0.2;z-index:-1;border-radius:8px;}
.hero-content h1{font-size:3rem;margin-bottom:20px;}
.hero-content p{font-size:1.2rem;margin-bottom:30px;}
.btn{display:inline-block;padding:12px 30px;margin:5px;text-decoration:none;font-size:1rem;border-radius:5px;transition:background .3s;}
.primary{background:#00baff;color:#000;}
.primary:hover{background:#008ccf;}
.secondary{background:#333;color:#fff;}
.secondary:hover{background:#555;}

#home,#about-us,#services,#industries,#capabilities,#why-invest,#expansion,#testimonials{}

.grid{display:grid;gap:30px;}
.services-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.industry-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));}
.card-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
.card{background:rgba(255,255,255,0.05);padding:25px;border-radius:8px;}
.card i{margin-bottom:15px;color:#00baff;}
.card h3{margin-bottom:10px;font-size:1.25rem;}
.card p{font-size:1rem;}

#why-invest ul{list-style:none;display:inline-block;text-align:left;margin-top:20px;}
.invest-list li{margin:10px 0;font-size:1.1rem;}
.invest-list strong{color:#00baff;}

.timeline{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;}
.milestone{background:rgba(255,255,255,0.05);padding:20px;border-radius:8px;}
.milestone span{display:block;font-weight:700;margin-bottom:10px;color:#00baff;}

.testimonial-carousel{width:80%;margin:0 auto;}
.testimonial{background:rgba(255,255,255,0.05);padding:30px;border-radius:8px;}
.testimonial p{font-style:italic;margin-bottom:15px;}
.testimonial span{display:block;font-weight:700;color:#00baff;}
.slick-dots{display:none!important;}

.modal{display:none;position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;overflow:auto;background:rgba(0,0,0,0.7);}
.modal-content{background:#1a1a1a;margin:10% auto;padding:20px;border-radius:8px;width:90%;max-width:500px;position:relative;}
.modal-close{position:absolute;top:10px;right:15px;color:#fff;font-size:24px;cursor:pointer;}
.modal-content input,.modal-content textarea{width:100%;padding:10px;margin-bottom:15px;border:1px solid #444;border-radius:4px;background:#0d0d0d;color:#fff;}
.modal-content button{width:100%;padding:12px;border:none;border-radius:4px;background:#00baff;color:#000;font-size:1rem;cursor:pointer;}

footer{background:#000;padding:30px 0;}
.footer-container{display:flex;flex-direction:column;align-items:center;}
.footer-links{list-style:none;display:flex;margin-bottom:15px;}
.footer-links li{margin:0 15px;}
.footer-links a{color:#fff;text-decoration:none;}
.footer-links a:hover{color:#00baff;}
.social a{margin:0 10px;color:#fff;font-size:1.2rem;}
.social a:hover{color:#00baff;}
footer p{margin-top:15px;font-size:0.9rem;}

@media(max-width:768px){.hero-content h1{font-size:2.5rem;}}


/* ─── Variables & Reset ───────────────────────────── */
:root {
  --nav-h: 60px;
  --gap: 150px;
}
html {
  scroll-behavior: smooth;
}
/* ─────────────────────────────────────────────────── */

/* ─── Hamburger menu ───────────────────────────────── */

.hamburger-bar {
  width: 100%; height: 3px;
  background: #fff;
  border-radius: 2px;
}
@media (max-width:768px) {
  
  
  .nav-links.open { display: flex; }
  .nav-links li { margin: 1rem 0; text-align: center; }
}

/* ─── Section fading ───────────────────────────────── */
.section {
  transition: opacity 0.4s ease;
}
.section.faded {
  opacity: 0.2;
}
.section.active {
  opacity: 1;
}
/* ─────────────────────────────────────────────────── */

/* Navbar flex ordering */
.nav-container {
  display: flex;
  align-items: center;
}
.logo {
  order: 0;
}
.nav-links {
 list-style: none;      /* ← remove the • bullets */
  display: flex;
  order: 1;
  margin-left: 20px;
  padding: 0;            /* ← also remove any default padding */
}
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  order: 2;
  margin-left: auto;
}
/* ensure hamburger toggles on mobile */
@media (max-width: 768px) {
  .nav-toggle {display: flex;}
}


/* ─── Hamburger visibility & positioning ───────────────── */
.nav-toggle {
  display: none;     /* hide on desktop */
  order: 2;
  margin-left: auto; /* push to far right */
  /* plus your other size & styling lines */
}

@media (max-width: 768px) {
  /* hide links until hamburger tapped */
  .nav-links {
    display: none;          /* hide by default on mobile */
    flex-direction: column; /* stack vertically when shown */
    position: absolute;
    top: var(--nav-h);      /* drop below navbar */
    left: 0; right: 0;
    background: rgba(0,0,0,0.9);
    z-index: 999;
  }
  /* show links when “open” class is added by JS */
  .nav-links.open {
    display: flex;
  }
.nav-toggle {
  display: flex !important;  /* show hamburger on mobile */
}

}

}
/* ───────────────────────────────────────────────────── */