/* --- Reset --- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:Inter,system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial;background:#08121a;color:#fff}

/* --- NAV --- */
.nav{
  position:fixed;
  left:0;right:0;top:0;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 28px;
  background:rgba(8,12,20,0.45);
  backdrop-filter:blur(6px);
  z-index:50;
}
.brand{display:flex;align-items:center;gap:12px}
.brand img{width:44px;height:44px;object-fit:cover;border-radius:6px}
.brand h1{font-size:18px;color:#fff;letter-spacing:0.3px}

/* nav links */
.nav-links{display:flex;gap:18px}
.nav-links a{color:rgba(255,255,255,0.92);text-decoration:none;font-weight:600;transition:opacity .18s}
.nav-links a:hover{opacity:.8}

/* mobile toggle */
.nav-toggle{display:none;padding:8px 10px;border-radius:8px;background:transparent;border:1px solid rgba(255,255,255,0.06);color:#fff}

/* --- HERO / HOME --- */
.home{position:relative;min-height:100vh;display:grid;place-items:center;overflow:hidden}
.bg-stage{position:absolute;inset:0;z-index:1}
/* each slide will be inserted as a child .bg-slide by JS */
.bg-slide{
  position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 900ms ease, transform 900ms ease;transform:scale(1.03);
}
.bg-slide.visible{opacity:1;transform:scale(1)}
.overlay{position:absolute;inset:0;background:rgba(0,0,0,0.55);
    ;z-index:3;pointer-events:none}

/* hero content sits above bg */
.hero{position:relative;z-index:10;max-width:1100px;padding:40px;text-align:left}
.hero .eyebrow{font-size:14px;color:#cfe3ff;font-weight:600;margin-bottom:12px}
.hero h2{font-size:64px;line-height:0.95;margin-bottom:12px;letter-spacing:-1px}
.hero p{font-size:18px;max-width:720px;margin-bottom:18px;color:rgba(255,255,255,0.92)}
.cta{display:inline-block;padding:12px 18px;border-radius:10px;background:rgba(255,255,255,0.12);border:1px solid rgba(255,255,255,0.14);text-decoration:none;color:#fff;font-weight:700}

/* dots */
.dots{position:relative;z-index:12;margin-top:22px;display:flex;gap:8px}
.dot{width:10px;height:10px;border-radius:999px;background:rgba(255,255,255,0.35);cursor:pointer}
.dot.active{background:#fff}

/* placeholder sections */
.placeholder{min-height:60vh;padding:60px 28px;background:#07101a88;color:rgba(255,255,255,0.9);border-top:1px solid rgba(255,255,255,0.03)}

/* responsive */
@media (max-width:900px){
  .hero h2{font-size:38px}
  .nav-links{display:none}
  .nav-toggle{display:block}
  .brand h1{font-size:16px}
}

:root {
    /* set this to your header/nav height (px) + optional extra padding */
    --nav-height: 72px;
  }
  
  #our-services,
  #projects,
  #about,
  #contact,
  #testimonials {
      scroll-margin-top: 90px;  /* 90 + 20 small buffer */
  }
  
  

/* base */
:root{
    --accent:#7fb6ff;
    --white:#ffffff;
    --dark-bg:#0b1114;
    --shadow: 0 10px 30px rgba(2,6,12,0.35);
  }
  
  /* fonts */
  body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial; margin:0;background:var(--dark-bg);color:#fff;}
  
/* === ABOUT LAYOUT — FIXED === */
.about-section{
    display:flex;
    gap:0;
    min-height:720px;
    align-items:stretch;    /* ensure both columns stretch same height */
    width:100%;
    flex-wrap:nowrap;       /* prevent wrap that can break layout */
  }
  
  /* force exact 50/50 columns so none collapse */
  .about-left{
    flex:0 0 50%;
    max-width:50%;
    min-width:320px;
    box-sizing:border-box;
  }
  .about-right{
    flex:0 0 50%;
    max-width:50%;
    min-width:320px;
    box-sizing:border-box;
    background:#fefefe;
    color:#0b1114;
    padding:64px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    overflow:hidden;
  }
  
  /* MEDIA (left) - make it fill the full column height */
  .media{
    position:relative;
    height:100%;
    min-height:720px;
    width:100%;
    background-size:cover;       /* COVER ensures single full image */
    background-position:center;
    background-repeat:no-repeat; /* prevent tiling */
    display:flex;
    align-items:center;
    justify-content:flex-start;
    overflow:hidden;
  }
  
  /* overlay + text stay on top */
  .media-overlay{ position:absolute; inset:0; background:rgba(0,0,0,0.6); z-index:1; }
  .media-text{ position:relative; z-index:2; padding:64px 56px; color:#fff; max-width:520px; }
  
  /* headline — keep large but responsive */
  .headline{
    font-family:Poppins, Inter, sans-serif;
    font-weight:900;
    font-size:88px;
    line-height:0.95;
    margin:0 0 12px 0;
    letter-spacing:-1px;
  }
  
  /* RIGHT column content (paragraphs + stats) */
  .about-text-wrap{ max-width:760px; margin-bottom:22px; }
  .about-paragraph{ font-size:20px; line-height:1.7; color:#0b1114; margin:0 0 18px 0; opacity:0; transform:translateY(8px); }
  
  /* stats */
  .stats-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:8px; }
  .stat-box{ background:#ffffff; border-radius:10px; padding:50px 10px; display:flex; gap:12px; align-items:center; box-shadow:0 20px 20px rgba(9,14,20,0.04); opacity:0; transform:translateY(12px) }
  
  /* responsive: stacked */
  @media (max-width:900px){
    .about-section{ flex-direction:column; }
    .about-left, .about-right{ flex:0 0 100%; max-width:100%; }
    .media{ min-height:420px; height:44vh; background-position:center top; }
    .media-text{ padding:28px; }
    .headline{ font-size:44px; padding-left:20px; }
    .about-right{ padding:28px; }
    .about-paragraph{ font-size:16px; }
    .stats-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  }
  

  /* --- Ensure about paragraphs reveal when .about-right.enter is present --- */
.about-right.enter .about-paragraph{
    /* apply animation (stagger via inline delay from JS) */
    animation: paraFade 700ms ease var(--delay,120ms) both;
    /* fallback: if animation fails, force visible */
    opacity: 1;
    transform: none;
  }
  
  /* keep keyframes if not already present */
  @keyframes paraFade{
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }

  
  /* ensure stat boxes are visible when about-right.enter added */
.about-right.enter .stat-box{
    animation: statPop 620ms cubic-bezier(.16,.9,.35,1) var(--stat-delay,260ms) both;
    opacity:1;
    transform:none;
    font-size: 20px;
    font-weight:600;
  }
  
  /* keyframes (if not present) */
  @keyframes statPop{
    from{opacity:0; transform:translateY(16px) scale(.98)}
    to{opacity:1; transform:translateY(0) scale(1)}
  }

  

/* ============= CLEAN SERVICES MOCKUP ============= */
/* -------------------------
   Services: cleaned & consolidated
   Paste to replace existing services CSS
   ------------------------- */

   @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&family=Poppins:wght@600;800&display=swap');

   :root{
     --sm-bg: #ffffff;
     --sm-left-bg: #f7f9fc;
     --sm-border: #e6e9ef;
     --sm-text: #0b1114;
     --sm-muted: #5b6770;
     --sm-accent: #0b6cff;
     --sm-gap: 24px;
   }
   
   /* Container */
   .services-mockup{
     display:flex;
     width:100%;
     min-height:520px;
     background: var(--sm-bg);
     border: 1px solid var(--sm-border);
     box-sizing:border-box;
     font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
   }
   
   /* LEFT panel */
   .sm-left{
     width:38%;
     background: #ffffff;
     border-right: 1px solid var(--sm-border);
     padding:40px 28px;
     box-sizing:border-box;
     display:flex;
     gap: var(--sm-gap);
     align-items:stretch;
   }
   
   /* Vertical section title */
   .sm-vertical-title{
     writing-mode: vertical-rl;
     transform: rotate(180deg);
     font-family: Poppins, Inter, sans-serif;
     font-weight:800;
     font-size:100px; /* large display */
     letter-spacing:2px;
     color: var(--sm-text);
     display:flex;
     align-items:center;
     white-space:nowrap;
   }
   
   /* Service list container */
   .sm-list{
    font-weight: 500;
     flex:1;
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     gap:12px;
   }
   
   /* Individual row (button) */
   .sm-item{
     display:flex;
     align-items:center;
     gap:12px;
     background:transparent;
     border:0;
     text-align:left;
     padding:14px 8px;
     font-size:30px;     /* increased per your earlier request */
     font-weight:500;
     color:var(--sm-text);
     cursor:pointer;
     transition: color .16s, transform .12s, background .12s;
     outline:none;
   }
   .sm-item .sm-icon { width:22px; height:22px; color:#9ca3af; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
   .sm-item .sm-icon svg{ width:100%; height:100%; }
   
   .sm-item:hover{
     transform:translateX(6px);
     color:var(--sm-accent);
     background: rgba(11,108,255,0.04);
   }
   .sm-item[aria-selected="true"]{
     color:var(--sm-accent);
     font-weight:700;
     transform:translateX(8px);
   }
   .sm-item[aria-selected="true"] .sm-icon{ color:var(--sm-accent); }
   
   /* thin divider */
   .sm-divider{
     height:1px;
     background:var(--sm-border);
     margin:8px 0;
   }
   
   /* RIGHT panel */
   .sm-right{
     width:62%;
     padding:48px;
     box-sizing:border-box;
     display:flex;
     align-items:center;
     justify-content:center;
     position:relative; /* needed for .sm-bg and overlay positioning */
     overflow:hidden;
     border-radius:0; /* keep same as before */
     background-color: #f3f5f7;
   }
   
   /* background layer — set by JS (cover) */
   .sm-right .sm-bg {
     position:absolute;
     inset:0;
     background-size:cover;
     background-position:center;
     background-repeat:no-repeat;
     filter: saturate(.95) contrast(.95) brightness(.78);
     transform-origin:center;
     transition: transform 700ms cubic-bezier(.16,.9,.35,1), opacity 420ms ease;
     z-index:1;
   }
   
   /* overlay card on top of bg */
   .sm-content-frame{
     position:relative; /* if you want card on top of bg use absolute; currently relative inside right column */
     z-index:3;
     width: min(86%, 820px);
     max-width:820px;
     padding:28px 36px;
     margin:28px;
     border-radius:12px;
     background: rgba(255,255,255,0.86);
     border:1px dashed rgba(157,170,183,0.18);
     box-shadow: 0 18px 48px rgba(11,16,23,0.06);
     backdrop-filter: blur(6px);
     color: #233044;
     overflow-y:auto;
     max-height: min(68vh, 720px);
     transition: transform 360ms ease, opacity 260ms ease;
   }
   
   /* Title + body styles */
   #sm-content-title{
     margin:0 0 12px 0;
     font-family:Poppins, Inter, sans-serif;
     font-size:22px;
     color:var(--sm-text);
   }
   
   #sm-content-body{
     margin:0;
     color:var(--sm-muted);
     line-height:1.6;
     font-size:20px; /* main content size (you set earlier) */
   }
   
   /* Rich content subheads and list */
   .sm-content-frame h4.sm-subhead{
     margin:14px 0 8px 0;
     font-size:20px;
     font-weight:700;
     color: #0b1114;
   }
   
   .sm-content-frame p{
     margin:0 0 10px 0;
     color: #374151;
     font-size:16px; /* paragraph size slightly smaller than main content */
     line-height:1.6;
   }
   
   .sm-features{
     margin:8px 0 14px 18px;
     padding:0;
     list-style-type: disc;
     color:#374151;
   }
   .sm-features li{
     margin:6px 0;
     font-size:15px;
   }
   
   /* Dark overlay variant (if image bright) */
   .sm-content-frame.dark{
     background: rgba(8,12,20,0.62);
     color:#e6f2ff;
   }
   .sm-content-frame.dark p,
   .sm-content-frame.dark .sm-features li{ color:#e6f2ff; }
   
   /* Responsive: stack layout for narrow screens */
   @media (max-width:980px){
     .services-mockup{ flex-direction:column; }
     .sm-left{ width:100%; padding:22px; order:1; }
     .sm-right{ width:100%; padding:20px 18px; order:2; min-height:300px; }
     .sm-vertical-title{ font-size:24px; writing-mode: horizontal-tb; transform:none; }
     .sm-list{ gap:10px; }
     .sm-item{ padding:12px 6px; font-size:17px; }
     .sm-content-frame{ padding:20px; margin:18px; max-height:48vh; width: calc(100% - 36px); }
     .sm-right .sm-bg{ background-position:center top; }
   }
   
   /* Optional: narrow/compact content variant (use .compact on .sm-content-frame) */
   .sm-content-frame.compact{
     width: min(42%, 560px);
     padding:22px 26px;
   }
   
   /* Scrollbar styling for overlay */
   .sm-content-frame::-webkit-scrollbar{ width:10px; }
   .sm-content-frame::-webkit-scrollbar-track{ background: transparent; }
   .sm-content-frame::-webkit-scrollbar-thumb{
     background: linear-gradient(180deg, rgba(11,108,255,0.14), rgba(11,108,255,0.08));
     border-radius:8px;
     border:2px solid rgba(255,255,255,0.85);
   }
   

/* =========================
   Projects section (cleaned)
   Masonry via CSS columns + filters
   ========================= */

/* container / section */
.projects-section {
    background: #ffffff;
    color: #071027;
    padding: 72px 20px;
    box-sizing: border-box;
  }
  .projects-inner {
    max-width: 1200px;
    margin: 0 auto;
  }
  
  /* header */
  .projects-header { text-align: center; margin-bottom: 26px; }
  .projects-title{
    font-size: 60px;
    margin: 0 0 8px;
    color: #071027;
    font-weight: 800;
  }
  .projects-sub{
    margin: 0 0 22px;
    color: #6b7280;
    font-size: 20px;
  }
  
  /* filter pills */
  .projects-filters{
    display:flex;
    gap:14px;
    justify-content:center;
    flex-wrap:wrap;
    margin: 20px 0 10px;
  }
  .pf-btn{
    border:1px solid rgba(11,16,23,0.06);
    background:#f3f6f9;
    padding:20px 20px;
    border-radius:999px;
    cursor:pointer;
    font-size: 15px;
    font-weight:700;
    color:#0b1114;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
    box-shadow: 0 6px 18px rgba(2,6,12,0.04);
  }
  .pf-btn:hover{ transform: translateY(-4px); }
  .pf-btn.active{
    background: linear-gradient(90deg,#08a0a5,#0b6cff);
    color:#fff;
    box-shadow: 0 12px 30px rgba(11,108,255,0.16);
    border-color: transparent;
  }
  
  /* =========================
     Masonry gallery (CSS columns)
     Each .masonry-item is an inline-block so columns flow naturally.
     ========================= */
  .masonry {
    column-count: 3;
    column-gap: 16px;
    width: 100%;
    padding: 10px 6px;
    box-sizing: border-box;
  }
  
  /* tile */
  .masonry-item{
    display: inline-block;     /* required for column masonry */
    width: 100%;
    margin: 0 0 16px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    transition: transform .26s ease, opacity .24s ease;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
  }
  
  /* image */
  .masonry-item img{
    width: 100%;
    height: auto;            /* preserve natural aspect ratio for masonry */
    display: block;
    object-fit: cover;
    border-radius: 8px;
    transform-origin: center;
    transition: transform .42s ease;
  }
  .masonry-item:hover img{ transform: scale(1.04); }
  
  /* caption pill (bottom-left) */
  .tile-caption{
    position: absolute;
    left: 12px;
    bottom: 12px;
    background: rgba(255,255,255,0.96);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
    color: #0b1114;
    box-shadow: 0 10px 26px rgba(2,6,12,0.06);
    transform: translateY(8px);
    opacity: 0;
    pointer-events: none;            /* avoid interfering when hidden */
    transition: opacity 280ms ease, transform 280ms cubic-bezier(.16,.9,.35,1);
    will-change: opacity, transform;
  }
  .tile-caption strong{ display:block; font-weight:700; margin-bottom:2px; }
  /* visible state on hover OR when the tile is focused (keyboard) */
.masonry-item:hover .tile-caption,
.masonry-item:focus-within .tile-caption,
.masonry-item:active .tile-caption {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}
  /* filtering: hide items fully from layout */
  .masonry-item.hidden {
    display: none !important;
    /* keep transitions from JS if you use opacity toggles instead
       but using display:none prevents awkward zero-height placeholders */
  }
  
  /* small screens: responsive column counts */
  @media (max-width:1100px){
    .masonry{ column-count: 2; }
  }
  @media (max-width:700px){
    .masonry{ column-count: 1; }
    .projects-title{ font-size: 32px; }
    .pf-btn{ padding: 10px 14px; }
    .masonry-item { margin-bottom: 18px; }
  }
  
  /* Optional: smoother scrollbar for the content area (cosmetic) */
  .masonry::-webkit-scrollbar{ height:8px; }
  .masonry::-webkit-scrollbar-thumb{ background: rgba(11,16,23,0.06); border-radius:8px; }
  


  .partners-section {
    padding: 80px 20px;
    background: #ffffff;
    text-align: center;
}

.partners-block {
    margin-bottom: 80px;
}

.sub-heading {
    font-size: 14px;
    letter-spacing: 1.6px;
    color: #0b6cff;
    font-weight: 600;
    margin-bottom: 8px;
}

.main-heading {
    font-size: 36px;
    font-weight: 800;
    color: #071027;
    margin-bottom: 12px;
    font-family: Poppins, sans-serif;
}

.para-center {
    max-width: 700px;
    margin: 0 auto 18px;
    color: #6b7280;
    font-size: 15px;
}

.decor-line {
    width: 45px;
    height: 3px;
    background: linear-gradient(90deg,#08a0a5,#0b6cff);
    margin: 10px auto 30px;
    border-radius: 8px;
}

/* Slider container */
.logo-slider {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
}

/* Track that scrolls */
.logo-track {
    display: flex;
    width: max-content;
    animation: scrollLeft 22s linear infinite;
    gap: 60px;
}

/* Logos */
.logo-track img {
    height: 70px;
    width: auto;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.9;
    transition: transform 0.3s ease;
}

.logo-track img:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
    opacity: 1;
}

/* Pause on hover */
.logo-slider:hover .logo-track {
    animation-play-state: paused;
}

/* Smooth infinite scroll */
@keyframes scrollLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* Responsive */
@media(max-width: 768px){
    .logo-track img {
        height: 55px;
    }
    .main-heading {
        font-size: 28px;
    }
}


/* ===== Contact section (cleaned) ===== */
.contact-section{
    position: relative;
    color: #fff;
    overflow: hidden;
    padding: 100px 20px 80px; /* space for header + content */
    box-sizing: border-box;
    min-height: 960px;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  
  /* background image + overlay */
  .contact-bg{
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
    filter: contrast(.85) saturate(.9) brightness(.72);
    transition: transform 700ms ease;
  }
  .contact-section:hover .contact-bg{ transform: scale(1.03); }
  
  .contact-overlay{
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(2,6,10,0.6), rgba(2,6,10,0.6));
  }
  
  /* full-width header above the columns */
  .contact-header{
    
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto 18px;
    padding: 0 18px;
    text-align: center;
  }
  .contact-title{
    font-family: Poppins, Inter, sans-serif;
    font-size: 81px;
    margin: 6px 0 8px;
    color: #000000;
    font-weight: 800;
    line-height: 1;
  }
  .contact-sub{
    color: rgba(0, 0, 0, 0.85);
    max-width: 900px;
    margin: 0 auto;
    font-size: 24px;
  }
  
  /* inner two-column layout */
  .contact-inner{
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 18px auto 0;
    display: flex;
    gap: 28px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 18px;
    box-sizing: border-box;
  }
  
  /* left info column */
  .contact-left{
    flex: 0 0 50%;
    max-width: 46%;
    padding: 12px 18px;
    text-align: left;
  }
  
  .contact-cards{
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* contact card */
  .card{
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.04);
    padding: 26px;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  }
  .card .icon{
    width: 58px;
    height: 58px;
    font-size: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg,#0bb3a7,#0b6cff);
    color: #fff;
    flex-shrink: 0;
  }
  .card-title{ font-weight: 700; color: #e6f2ff; margin-bottom: 6px; font-size: 20px;}
  .card-text{ color: rgba(230,242,255,0.9); font-size: 14px; line-height: 1.55;font-size: 15px; }
  
  /* right form column */
  .contact-right{
    flex: 0 0 50%;
    max-width: 50%;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .contact-form{
    width: 100%;
    max-width: 700px;
    background: rgba(3,7,12,0.64);
    border: 1px solid rgba(255,255,255,0.06);
    padding: 30px;
    border-radius: 14px;
    box-shadow: 0 18px 60px rgba(2,6,10,0.6);
    color: #fff;
  }
  .contact-form h3{ margin: 0 0 14px; font-size: 20px; font-weight: 700; }
  
  /* form fields */
  .row{ display: flex; gap: 12px; margin-bottom: 12px; }
  .row label{ flex: 1; display: block; }
  .contact-form input[type="text"],
  .contact-form input[type="email"],
  .contact-form input[type="tel"],
  .contact-form select,
  .contact-form textarea{
    width: 100%;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    color: #fff;
    padding: 16px;
    border-radius: 8px;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
  }
  .contact-form textarea{ resize: vertical; min-height: 120px; }
  
  /* form actions */
  .form-actions{ display:flex; align-items:center; gap:14px; margin-top:12px; }
  .btn-primary{
    display:inline-flex; align-items:center; gap:10px;
    background: linear-gradient(90deg,#09b7a9,#0b6cff);
    color:#fff; border:0; padding:12px 18px; border-radius:10px; cursor:pointer;
    font-weight:700; box-shadow: 0 12px 32px rgba(11,108,255,0.14);
  }
  .btn-primary{
    padding: 14px 22px;
    font-size: 15px;
}

  /* toast */
  .contact-toast{
    padding:8px 12px;
    background: rgba(0,0,0,0.5);
    color: #e6f2ff;
    border-radius: 8px;
    font-size: 14px;
    display: inline-block;
  }
  
  /* accessibility helper */
  .sr{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* footer (kept) */
  .site-footer{
    background:#000000;
    color:#e9f2fb;
    padding:48px 20px 24px;
    font-family: Inter, system-ui, Arial;
  }
  .site-footer-inner{
    max-width:1200px;
    margin:0 auto;
    display:flex;
    gap:32px;
    align-items:flex-start;
    flex-wrap:wrap;
  }
  .site-footer .col{ flex:1 1 220px; min-width:180px; }
  .footer-brand .brand{ display:flex; gap:12px; align-items:center; }
  .footer-desc{ max-width:360px; color: rgba(255,255,255,0.85); margin-top:12px; }
  .site-footer h4{ color:#ffb24a; margin-bottom:12px; }
  .site-footer a{ color: rgba(255,255,255,0.9); text-decoration:none; }
  .site-footer .site-footer-bottom{ border-top:1px solid rgba(255,255,255,0.06); padding:18px 0; margin-top:22px; text-align:center; color:rgba(255,255,255,0.7); }
  
  /* responsive */
  @media (max-width:980px){
    .contact-header{ padding: 0 14px; margin-bottom:12px; }
    .contact-title{ font-size:34px; }
    .contact-inner{ flex-direction:column; gap:18px; padding: 0 14px; }
    .contact-left, .contact-right{ max-width:100%; flex-basis:100%; padding:0; }
    .contact-right{ justify-content:flex-start; }
    .row{ flex-direction: column; }
    .contact-bg{ background-position: center top; }
    .contact-form{ padding:18px; max-width:100%; }
  }
  
/* ---- CONTACT: fix dropdown visibility on Windows ---- */

/* Closed dropdown + options list both readable */
.contact-form select {
  background-color: #ffffff !important;   /* white dropdown box */
  color: #0b1114 !important;              /* dark text */
}

/* Options list text must also be dark */
.contact-form select option {
  background-color: #ffffff !important;
  color: #0b1114 !important;
}