:root{
  --navy:#1c3b69;
  --blue:#3e6aab;
  --teal:#0898b3;
  --lightblue:#cde4ea;
  --gold:#fae23b;
  --white:#ffffff;
}

/* ================= BASE ================= */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',sans-serif;
  background:var(--lightblue);
  color:var(--navy);
}
h1,h2,h3{letter-spacing:-0.03em}
p{line-height:1.7;font-weight:400}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ================= LINK UNDERLINE ================= */
.nav a,
.nav-links a,
a.links{
  position:relative;
  font-weight:600;
}
.nav a::after,
.nav-links a::after,
a.links::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-6px;
  width:0;
  height:2px;
  background:var(--gold);
  transition:.3s;
}
.nav a:hover::after,
.nav-links a:hover::after,
a.links:hover::after{
  width:100%;
}

/* ================= NAV ================= */
.nav{
  position:fixed;
  inset:0 0 auto;
  background:rgba(255,255,255,.95);
  border-bottom:1px solid var(--lightblue);
  backdrop-filter:blur(12px);
  z-index:999;
}
.nav.scrolled{box-shadow:0 10px 30px rgba(0,0,0,.08)}
.nav-inner{
  max-width:1200px;
  margin:auto;
  padding:1rem;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.logo{
  display:flex;
  align-items:center;
  gap:.6rem;
  font-weight:800;
}
.logo img{height:42px}
.nav-links{
  display:flex;
  align-items:center;
  gap:1.5rem;
}

/* ================= DARK MODE TOGGLE ================= */
#darkToggle{
  background:none;
  border:none;
  box-shadow:none;
  padding:.3rem;
  cursor:pointer;
}
#darkToggle:hover,
#darkToggle:focus{
  background:none;
  outline:none;
}
#darkToggle i{
  color:var(--navy);
  transition:transform .3s ease,color .3s ease;
}
/* Dark mode toggle button color */
#darkToggle i {
  color: var(--navy); /* default light mode */
  transition: transform 0.3s ease, color 0.3s ease;
}

body.dark #darkToggle i {
  color: var(--gold); /* light-blue in dark mode */
  transform: rotate(180deg);
}


/* ================= HAMBURGER ================= */
.hamburger{
  display:none;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
  z-index:1100;
}
.hamburger span{
  width:28px;
  height:3px;
  background:var(--navy);
  transition:.4s;
}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(6px,6px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}
@media (max-width:900px){
  .hamburger{display:flex}
  .nav-links{
    position:absolute;
    top:100%;
    inset-inline:0;
    background:white;
    flex-direction:column;
    padding:1.5rem;
    display:none;
  }
  .nav-links.active{display:flex}
}

/* ================= HERO ================= */
.hero{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  text-align:center;
  padding:2rem;
}
.hero h1{font-size:3rem}
.hero p{max-width:720px;margin:1.5rem auto;font-size:1.2rem}

/* ================= BUTTON ================= */
.btn{
  background:var(--gold);
  color:var(--navy);
  padding:1rem 2.2rem;
  border-radius:999px;
  font-weight:700;
  display:inline-block;
  transition:.3s;
}
.btn:hover{transform:translateY(-3px)}

/* ================= SECTIONS ================= */
section{padding:5rem 1.5rem}
.container{max-width:1200px;margin:auto}
.section-title{text-align:center;margin-bottom:3rem}

/* ================= SERVICES ================= */
.services{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:2rem;
}
.service{
  background:var(--white);
  padding:2.5rem;
  border-radius:1.5rem;
  box-shadow:0 15px 40px rgba(0,0,0,.05);
  transition:.4s;
  position:relative;
}
.service:hover{transform:translateY(-8px)}
.service::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  border:2px solid transparent;
  transition:.4s;
}
.service:hover::before{border-color:var(--teal)}

/* ================= ABOUT ================= */
.about{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:3rem;
  align-items:center;
}
.tilt-wrap{perspective:1200px}
.tilt-image{
  border-radius:1.5rem;
  box-shadow:0 30px 60px rgba(0,0,0,.25);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.tilt-wrap:hover .tilt-image{
  transform: rotateY(5deg) rotateX(3deg) scale(1.03);
  box-shadow:0 45px 80px rgba(0,0,0,.35);
}
.about img{
  border-radius:1.5rem;
  box-shadow:0 20px 40px rgba(0,0,0,.15);
}
@media (min-width:900px){
  .about img{order:-1}
}
@media (max-width:900px){
  .tilt-wrap:hover .tilt-image{
    transform: none;
  }
}

/* ================= TEAM ================= */
.team-wrapper{position:relative}
.team-scroll{
  display:flex;
  gap:2rem;
  overflow-x:auto;
  padding:1rem 0 2rem;
}
.team-scroll::-webkit-scrollbar{display:none}
.member{
  min-width:280px;
  background:var(--white);
  border-radius:1.6rem;
  padding:2.2rem 1.8rem;
  text-align:center;
  box-shadow:0 12px 35px rgba(0,0,0,.08);
  transition:.35s;
}
.member:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(0,0,0,.12);
}
.member img{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:4px solid var(--gold);
  margin:0 auto 1rem;
}
.member .role{
  font-weight:600;
  font-size:.95rem;
  color:var(--teal);
}

/* ================= CTA ================= */
.cta-section {
  background: linear-gradient(120deg, var(--navy), var(--blue));
  text-align: center;
  padding: 4.5rem 1.5rem;
  margin-top: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* CTA h2: lightblue in light mode, white in dark mode */
.cta-section h2 {
  color: var(--lightblue) !important;
  font-size: 2.3rem;
  margin: 0 auto;
}

body.dark .cta-section h2 {
  color: var(--white) !important;
}

/* CTA paragraph and buttons centering */
.cta-section p,
.cta-section .btn {
  margin-left: auto;
  margin-right: auto;
  text-align:center;
}

/* Multiple CTA buttons container */
.cta-section .btn-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ================= H2 COLOR (LIGHT / DARK) ================= */
h2,
.section-title h2,
section h2 {
  color: var(--navy); /* global light mode */
}
body.dark h2,
body.dark .section-title h2,
body.dark section h2 {
  color: var(--white); /* global dark mode */
}

/* ================= SCROLL BUTTONS ================= */
.scroll-btn{
  position:absolute;
  top:40%;
  width:45px;
  height:45px;
  border-radius:50%;
  border:none;
  background:var(--blue);
  color:white;
  cursor:pointer;
  box-shadow:0 12px 25px rgba(0,0,0,.25);
  transition:.3s;
  display:flex;
  align-items:center;
  justify-content:center;
}
.scroll-btn i{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}
.scroll-btn:hover{
  background:var(--teal);
  transform:scale(1.08);
}
.scroll-left{left:-20px}
.scroll-right{right:-20px}
@media (max-width:768px){
  .scroll-btn{display:none}
}

/* ================= STATS ================= */
.stats{background:var(--white)}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:2rem;
  text-align:center;
}
.stat h3,
.counter{
  font-size:3rem;
  color:var(--lightblue);
  transition: color 0.3s ease;
}
body.dark .stat h3,
body.dark .counter{
  color:var(--gold);
}
.stat p{
  color:var(--navy);
  font-weight:600;
}

/* ================= BLOG ================= */
.blog-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2rem;
}
.blog-card{
  background:white;
  border-radius:1.5rem;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  transition:.3s;
}
.blog-card:hover{transform:translateY(-6px)}
.blog-card img{height:180px;object-fit:cover}
.blog-card div{padding:1.5rem}
.blog-card h3{color:var(--navy)}
.blog-card a{
  font-weight:700;
  color:var(--blue);
}
.blog-card a i,
.links i{
  margin-left:.4rem;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.blog-card a:hover i,
.links:hover i{
  transform:translateX(6px);
}

/* ================= FOOTER ================= */
footer{
  background:var(--navy);
  color:var(--lightblue);
  padding:3rem 1rem;
  text-align:center;
}
.socials{
  display:flex;
  justify-content:center;
  gap:1rem;
  margin-top:1.2rem;
  flex-wrap:wrap;
}
.socials a{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--lightblue);
  transition:.3s;
}
.socials a:hover{
  background:var(--gold);
  color:var(--navy);
  transform:translateY(-4px);
}

/* ================= FLOATING ================= */
.whatsapp-btn{
  position:fixed;
  bottom:25px;
  right:25px;
  width:60px;
  height:60px;
  border-radius:50%;
  background:#25D366;
  color:white;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  z-index:9999;
  transition:.3s;
}
.whatsapp-btn:hover{
  transform:translateY(-6px);
}

#topBtn{
  position:fixed;
  bottom:100px;
  right:28px;
  width:46px;
  height:46px;
  border-radius:50%;
  background:var(--blue);
  color:white;
  border:none;
  display:none;
  cursor:pointer;
  box-shadow:0 10px 25px rgba(0,0,0,.25);
  z-index:9998;
  transition:.3s;
  display:flex;
  align-items:center;
  justify-content:center;
}
#topBtn:hover{
  background:var(--gold);
  color:var(--navy);
  transform:translateY(-5px);
}

/* ================= DARK MODE ================= */
body.dark{
  background:#0b1f3a;
  color:#cde4ea;
}
body.dark section,
body.dark footer{
  background:#0b1f3a;
}
body.dark .nav{
  background:rgba(11,31,58,.95);
  border-bottom:1px solid rgba(205,228,234,.15);
}
body.dark .nav a,
body.dark .nav i{
  color:var(--lightblue);
}
body.dark .hamburger span{
  background:var(--lightblue);
}

/* ================= COOKIE CONSENT MODAL ================= */
.cookie-consent {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  padding: 1rem;
}

.cookie-box {
  max-width: 520px;
  width: 100%;
  background: var(--white);
  color: var(--navy);
  text-align: center;
  border-radius: 1rem;
  padding: 2rem 2.2rem;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

body.dark .cookie-box {
  background: #0b1f3a;
  color: var(--lightblue);
  box-shadow: 0 20px 40px rgba(0,0,0,.5);
}

.cookie-box h4 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.cookie-box p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
}

.cookie-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 1rem;
}

.cookie-options label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.95rem;
  cursor: pointer;
}

.cookie-options input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--gold);
  cursor: pointer;
}

body.dark .cookie-options input[type="checkbox"] {
  accent-color: var(--gold);
}

.cookie-links {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.cookie-links a {
  color: var(--blue);
  text-decoration: underline;
  margin: 0 0.2rem;
}

body.dark .cookie-links a {
  color: var(--gold);
}

.cookie-actions {
  margin-top: 1rem;
}

.cookie-actions .btn {
  width: 100%;
  padding: 0.8rem;
  font-size: 0.95rem;
  border-radius: 0.8rem;
  font-weight: 600;
  display: inline-block;
}

/* RESPONSIVE COOKIE MODAL */
@media (max-width:500px){
  .cookie-box {
    padding: 1.5rem 1.8rem;
  }
  .cookie-box h4 {
    font-size: 1.3rem;
  }
  .cookie-options label {
    font-size: 0.9rem;
  }
  .cookie-actions .btn {
    font-size: 0.9rem;
    padding: 0.7rem;
  }
}