:root {
            --primary: #0A71C8;
            --secondary: #111111;
            --yellow: #FACD49;
            --greenclr: #0fd46c;
            --darkblue: #132f58;
            --lightBlue: #f1f7ff;
        }

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            color: var(--secondary);
        }

        .top-bar {
  /* background: linear-gradient(to right,  #091a30,#f6cf06); */
  background:black;
            color: white;
            font-size: 0.875rem;
        }

        .top-bar a {
            color: white;
            text-decoration: none;
            font-weight: 600;
        }

        .top-bar a:hover {
            color: #e2e8f0;
        }

        /* .navbar {
            background-color: white;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.75rem 0;
        }

        .navbar-nav .nav-link {
            color: var(--secondary);
            font-weight: 600;
            margin: 0 0.5rem;
        }

        .navbar-nav .nav-link:hover {
            color: var(--primary);
        } */

         /* Navbar Styling */
         :root{ --page-max:1200px; --page-gutter:16px; }

/* same max-width + gutters as sections */
.top-bar > .container,
.navbar > .container{
  width: min(var(--page-max), 100% - var(--page-gutter)*2) !important;
  max-width: none;
  padding-left: 0; padding-right: 0;
  margin-inline: auto;
}

/* desktop pe collapse ko static rakho (mobile absolute hi rahe) */
@media (min-width: 992px){
  .navbar .navbar-collapse{ position:static; box-shadow:none; background:transparent; }
  .navbar .navbar-nav{ margin-left:auto; }
}

/* Base */
.navbar{background:#121d36;padding:.6rem 0;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.navbar .navbar-brand img{height:50px}
.navbar.sticky-top{top:0;z-index:1000}

/* -------- Mobile (<=991px) -------- */
@media (max-width: 991.98px){
  .navbar{padding:.4rem .25rem;background:#0e1a35}
  .navbar .navbar-brand img{height:38px}
  .navbar .navbar-brand{margin-left:.25rem}  /* logo tight to left */

  /* Custom hamburger */
  .navbar-toggler{border:0;box-shadow:none!important;padding:.35rem .4rem;margin-left:.5rem}
  .navbar-toggler .hb{
    display:block;width:26px;height:2px;background:#f7c333;border-radius:2px;
    transition:transform .25s ease, opacity .2s ease, top .25s ease, background .25s ease;
    position:relative;
  }
  .navbar-toggler .hb + .hb{margin-top:6px}

  /* morph to X when open */
  .navbar-toggler[aria-expanded="true"] .hb:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .navbar-toggler[aria-expanded="true"] .hb:nth-child(2){opacity:0}
  .navbar-toggler[aria-expanded="true"] .hb:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

  /* The dropdown panel */
  .navbar-collapse{
    position:absolute; left:0; right:0; top:100%;
    background:#0e1a35; border-top:1px solid rgba(255,255,255,.08);
    box-shadow:0 18px 30px rgba(0,0,0,.35);
  }

  /* Animate in */
  .navbar-collapse.collapse{opacity:0; transform:translateY(-6px); transition:opacity .2s ease, transform .2s ease}
  .navbar-collapse.show{opacity:1; transform:translateY(0)}

  /* Menu items under logo with tighter spacing */
  .navbar-nav{padding:.35rem 0}
  .navbar-nav .nav-link{
    display:block; padding:.7rem 1rem; font-size:1.05rem; font-weight:600; color:#fff!important;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .navbar-nav .nav-item:last-child .nav-link{border-bottom:0}
  .navbar-nav .nav-link:hover{color:#f7c333!important; transform:none; text-shadow:none}
  .navbar-nav .nav-link::before{display:none} /* remove desktop underline on mobile */
}

/* Desktop hover (keep your existing desktop effects) */
.navbar-nav .nav-link{
  color:#fff!important; font-weight:600; margin:0 1rem; position:relative; transition:color .3s ease, transform .3s ease;
}
.navbar-nav .nav-link:hover{color:#f7c333!important; transform:scale(1.08)}
.navbar-nav .nav-link::before{
  content:""; position:absolute; left:0; right:100%; bottom:-6px; height:2px;
  background:#f7c333; transition:right .2s ease;
}
.navbar-nav .nav-link:hover::before{right:0}

/* smooth anchor offset for sticky header (optional but useful) */

        /* WEB DESIGN */
        /* .hero-section {
            background-color: black;
            color: white;
            border-radius: 1.5rem;
            padding: 3rem 2rem;
            margin: 2rem auto;
        } */

        .hero-title {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 1.5rem;
        }

        /* .hero-subtitle {
            font-size: 1.125rem;
            margin-bottom: 2rem;
            max-width: 42rem;
        }

         */
         .hero-subtitle {
    font-size: 1.125rem; /* Font size for the subtitle */
    margin-bottom: 2rem; /* Bottom margin for spacing */
    max-width: 42rem; /* Maximum width of the content */
    text-align: justify; /* Justify the text to ensure it's properly aligned */
    padding-right: 2rem; /* Ensure the right side has proper space */
    line-height: 1.6; /* Set line-height for better readability */
}
.hero-subtitle p {
    margin: 0;
}

/* For responsiveness */
@media (max-width: 768px) {
    .hero-subtitle {
        font-size: 1rem; /* Adjust font size for smaller screens */
        text-align:center;
        padding-right:0px;

    }
    /* .mybtn{
        margin-bottom:20px;
    } */
    .form-box-advanced {
        margin-top:20px;
    }
}

@media (max-width: 768px) {
    .hero-subtitles {
        font-size: 1rem; /* Adjust font size for smaller screens */
        text-align:justify;
        padding-right:0px;

    }


}

/* hero sections */
:root{
background-color:black;}

.hero-section{
  background-color:black;
  color:#fff;
  border-radius:1.5rem;
  padding:3rem 2rem;
width: min(1200px, calc(100% - 32px)); /* 16px gutter per side */
  margin:24px auto;
/* margin:2rem auto; */
  position:relative;
  overflow:hidden;
  min-height: 520px;
}

/* particles canvas fills only the hero section */
#particles-js-hero{
  position:absolute;
  inset:0;                /* top/right/bottom/left:0 */
  z-index:1;
}

/* keep your content above the canvas */
.hero-section .container{
  position:relative;
  z-index:2;
}


        .btn-primary-custom {
            background-color: var(--yellow);
            color: var(--darkblue);
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 0.5rem;
            font-weight: 600;
            transition: all 0.3s;
        }

        .btn-primary-custom:hover {
            background-color: white;
            transform: scale(1.05);
        }
        /* FORM */
        /* .contact-form {
            background-color: white;
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .form-control {
            border: 1px solid #d1d5db;
            border-radius: 0.5rem;
            padding: 0.75rem;
        }

        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(10, 113, 200, 0.2);
        }

        .btn-submit {
            background-color: var(--primary);
            color: white;
            border: none;
            padding: 0.75rem;
            border-radius: 0.5rem;
            font-weight: 600;
            width: 100%;
        }

        .btn-submit:hover {
            background-color: #0a63b0;
        }

        .rating-stars {
            color: var(--yellow);
        }

        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }

            .hero-section {
                padding: 2rem 1rem;
            }
        } */
/* FORM */
.form-box-advanced {
  background: rgba(18, 29, 54, 0.92);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding:10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
  transition: transform 0.3s ease;
}
.form-box-advanced:hover {
  transform: translateY(-4px);
}

/* Input Groups */
.input-group-custom {
  display: flex;
  align-items: center;
  background: #1a2747;
  border: 1px solid #2e3c5a;
  border-radius: 10px;
  padding: .6rem .8rem;
  transition: all 0.3s ease;
}
.input-group-custom i {
  color: #f6cf06;
  margin-right: 10px;
}
.input-group-custom:focus-within {
  border-color: #f6cf06;
  box-shadow: 0 0 8px rgba(246, 207, 6, 0.6);
}

/* Custom Inputs */
.form-control-custom {
  flex: 1;
  border: none;
  background: transparent;
  color: #fff;
  font-size: .95rem;
  outline: none;
}
.form-control-custom::placeholder {
  color: #c7c7c7;
}

/* Services Multiple Select */
select.form-control-custom {
  background: #1a2747;
  color: #fff;
  border: 1px solid #2e3c5a;
  border-radius: 10px;
  padding: .6rem .8rem;
}
select.form-control-custom option {
  background: #121d36;
  color: #fff;
}

/* Submit Button */
.btn-submit-advanced {
  background: linear-gradient(135deg, #f6cf06, #ffb800);
  color: #121d36;
  font-weight: 700;
  border: none;
  padding: .9rem;
  border-radius: 12px;
  font-size: 1rem;
  box-shadow: 0 8px 20px rgba(246, 207, 6, 0.4);
  transition: all 0.3s ease;
}
.btn-submit-advanced:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 25px rgba(246, 207, 6, 0.6);
}

/* Textarea */
textarea.form-control-custom {
  resize: vertical;
  min-height: 120px;
}
/* phone code */
/* Container for country code + phone number */
.input-group {
  display: flex; /* Make them align horizontally */
  align-items: center;
  gap: 10px;
}

.cc-select {
  flex: 0 0 40px; /* Country code select takes fixed space */
  border-right: none; /* Remove right border to merge with phone input */
  border-radius: 8px 0 0 8px; /* Make it merge seamlessly */
}

.form-control {
  flex: 1; /* Allow phone input to take remaining space */
  border-left: none; /* Merge with country code select */
  border-radius: 0 8px 8px 0; /* Round the right corner */
}
/* sucess */
/* Success Screen */
.success-screen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Success Card */
.success-card {
  background: #121d36;
  padding: 3rem;
  border-radius: 20px;
  text-align: center;
  max-width: 450px;
  width: 90%;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
  position: relative;
  overflow: hidden;
  transform: translateY(20px);
  animation: slideUp 0.5s forwards;
}

/* Slide-up Animation */
@keyframes slideUp {
  from {
    transform: translateY(20px);
  }
  to {
    transform: translateY(0);
  }
}

/* Success Icon */
.icon-wrap {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #f7c333, #f0a60f);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  margin: 0 auto 1.5rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

/* Title Text */
.title {
  font-size: 1.75rem;
  font-weight: 700;
  color: #f7c333;
  margin-bottom: 1rem;
  text-transform: uppercase;
}

/* Subtitle Text */
.sub {
  font-size: 1.1rem;
  color: #e7ecff;
  margin-bottom: 2rem;
  font-weight: 500;
}

/* Close Button */
#successClose {
  background: linear-gradient(135deg, #f7c333, #ffb800);
  color: #121d36;
  font-weight: 700;
  border: none;
  padding: 1rem 2.5rem;
  border-radius: 12px;
  font-size: 1.2rem;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

#successClose:hover {
  transform: scale(1.05);
  box-shadow: 0 15px 25px rgba(246, 207, 6, 0.5);
}

/* Mobile Responsiveness */
@media (max-width: 576px) {
  .success-card {
    padding: 2rem;
  }

  .title {
    font-size: 1.5rem;
  }

  .sub {
    font-size: 1rem;
  }

  #successClose {
    font-size: 1rem;
    padding: 0.75rem 2rem;
  }
}

/* services */
:root{
  --bg:#121d36; --panel:#182548; --panel2:#1a2747; --line:#2e3c5a;
  --accent:#f6cf06; --text:#e7ecff; --muted:#aab4d6;
}

/* wrapper */
.sp{ position:relative; }
.sp-label{ display:block; color:#e7ecff; font-weight:700; margin-bottom:.35rem; }

/* toggle field */
.sp-toggle{
  width:100%; text-align:left; background:var(--panel2); color:var(--text);
  border:1px solid var(--line); border-radius:12px; padding:.8rem 2.6rem .8rem .9rem;
  display:flex; align-items:center; gap:.5rem;
  position:relative; transition:.2s;

}
.sp-toggle:focus{ outline:0; border-color:var(--accent); box-shadow:0 0 0 6px rgba(246,207,6,.18); }
.sp-toggle .sp-placeholder{ opacity:.9; }
.sp-toggle .sp-count{ margin-left:auto; font-weight:700; color:#121d36; background:var(--accent);
  border-radius:999px; padding:.15rem .55rem; }
.sp-toggle .sp-caret{ position:absolute; right:.85rem; color:#ffd84a; transition:.2s; }
.sp-toggle[aria-expanded="true"] .sp-caret{ transform:rotate(180deg); }

/* dropdown */
.sp-menu{
  position:absolute; top:100%; left:0; right:0; z-index:20;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  margin-top:.45rem; padding:.4rem; box-shadow:0 18px 40px rgba(0,0,0,.45);
  display:none; max-height:260px; overflow:auto;
}
.sp.open .sp-menu{ display:block; }

/* select servoces */

/* option */
.sp-option{
  display:flex; align-items:center; gap:.6rem; color:var(--text);
  border-radius:10px; padding:.55rem .6rem; cursor:pointer; user-select:none;
}
.sp-option:hover{ background:#20335c; }
.sp-option input{ accent-color:var(--accent); transform:scale(1.05); }

/* selected (textarea-like) */
.sp-selected{
  min-height:54px; margin-top:.6rem; background:var(--panel2);
  border:1px dashed var(--line); border-radius:12px; padding:.55rem .6rem;
  /* display none */
  display:none;
   flex-wrap:wrap; gap:.4rem;
}
/* selection show */
.sp.has-selected .sp-selected{
  display:flex;          /* your original flex layout */
}
/* pill */
.sp-pill{
  background:#20335c; color:#fff; border:1px solid var(--line);
  border-radius:999px; padding:.28rem .65rem; display:inline-flex; align-items:center; gap:.45rem;
  font-size:.9rem;
}
.sp-pill i{ cursor:pointer; color:#ffd84a; }
.sp-pill i:hover{ filter:brightness(1.2); }

/* menu scrollbar (nice) */
.sp-menu::-webkit-scrollbar{ width:10px; }
.sp-menu::-webkit-scrollbar-thumb{ background:#20335c; border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

/* form styling end */

/* -------- THEME -------- */
:root{
  --brand:#f5a300;          /* orange (logo vibe)   */
  --brand-ink:#0f172a;      /* dark ink             */
  --stroke:#e6edf6;         /* light border         */
  --muted:#6b7280;          /* icon / placeholder   */
  --ring: rgba(245,163,0,.22);
}

/* -------- CARD -------- */
.form-box{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.98));
  border-radius:18px;
  padding:28px;
  max-width: 520px;
  margin-inline:auto;
  box-shadow: 0 24px 64px rgba(2,6,23,.18);
  border:1px solid var(--stroke);
  overflow:hidden;
  isolation:isolate;
}
.form-box::before{
  content:"";
  position:absolute; inset:-2px; z-index:-1;
  background:
    radial-gradient(800px 400px at -10% -10%, rgba(245,163,0,.12), transparent 60%),
    radial-gradient(600px 400px at 110% 120%, rgba(13,102,237,.10), transparent 55%);
  filter:saturate(120%);
}

/* -------- INPUTS -------- */
.input-group-text{
  background:#fff;
  border-right:0;
  color:var(--muted);
}
.input-group .form-control,
.input-group .form-select,
select.form-control,
textarea.form-control{
  border-left:0;
  border-color:var(--stroke);
  height:48px;
  padding-top:10px; padding-bottom:10px;
  transition:border .2s, box-shadow .2s, background .2s, transform .06s;
  border-radius:12px;
}
.form-control::placeholder{ color:#9aa6b2; }

/* focus ring */
.input-group .form-control:focus,
.input-group .form-select:focus,
select.form-control:focus,
textarea.form-control:focus{
  box-shadow: 0 0 0 5px var(--ring);
  border-color:var(--brand);
  outline:0;
}

/* subtle hover */
.input-group:hover .form-control,
.input-group:hover .form-select{ background:#fcfcfe; }

/* country + phone join neatly */
select[name="country_code"]{
  max-width: 140px;
  border-top-right-radius:0!important;
  border-bottom-right-radius:0!important;
}
input[name="phone"]{
  border-top-left-radius:0!important;
  border-bottom-left-radius:0!important;
}

/* -------- MULTI SELECT (services) -------- */
.select-services{
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:8px 10px;
  height:auto;
}
.select-services option{ padding:8px 6px; }
.select-services[size]{ height:auto; }       /* size controls height */
.select-services:focus{ box-shadow:0 0 0 5px var(--ring); border-color:var(--brand); }

/* show exactly 5 items -> no scrollbar */
.select-services[size="5"]{
  /* line-height * 5 + padding approx */
  min-height: calc(5 * 36px + 12px);
}

/* -------- TEXTAREA -------- */
textarea.form-control{
  min-height:120px;
  resize:vertical;
  line-height:1.45;
}

/* -------- SUBMIT BUTTON -------- */
.btn-submit{
  background:var(--brand);
  color:var(--brand-ink);
  font-weight:800;
  border:none;
  height:50px;
  border-radius:12px;
  box-shadow: 0 14px 28px rgba(245,163,0,.28);
  letter-spacing:.2px;
}
.btn-submit:hover{ filter:brightness(.97); transform:translateY(-1px); }
.btn-submit:active{ transform:translateY(0); }

/* -------- RATING -------- */
.rating-stars i{ color:#f1c40f; }
.half-star{
  background: linear-gradient(90deg, #f1c40f 50%, #d1d5db 50%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* -------- CORNER SVG DECOR -------- */
.corner{
  position:absolute; width:120px; height:120px; opacity:.22; pointer-events:none;
  z-index:0;
}
.corner svg{ width:100%; height:100%; }
.corner.tl{ top:-6px; left:-6px; transform:rotate(0deg); }
.corner.tr{ top:-6px; right:-6px; transform:rotate(90deg); }
.corner.bl{ bottom:-6px; left:-6px; transform:rotate(270deg); }
.corner.br{ bottom:-6px; right:-6px; transform:rotate(180deg); }
.corner path{ stroke: var(--brand); }

/* -------- HEADING -------- */
.form-box h5{
  color:var(--brand-ink);
  font-weight:900;
  letter-spacing:.2px;
}

/* mobile */
@media (max-width:480px){
  .form-box{ padding:22px; }
  .input-group .form-control,.input-group .form-select{ height:46px; }
}


     /*testi  */
     :root {
            --primary: #0A71C8;
            --secondary: #111111;
            --yellow: #FACD49;
            --greenclr: #0fd46c;
            --darkblue: #132f58;
            --lightBlue: #f1f7ff;
        }

        .testimonials-section {
            padding: 4rem 0;
            background-color:black;
        }

        .section-title {
            font-size: 2.5rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: 2rem;
        }

        .stats-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 1.5rem;
            padding: 2rem 0;
        }

        @media (min-width: 768px) {
            .stats-container {
                align-items: flex-start;
            }
        }

        .stats-content {
            display: flex;
            gap: 2rem;
            align-items: center;
        }

        .google-logo {
            width: 48px;
            height: 48px;
        }

        .stats-numbers {
            display: flex;
            gap: 2rem;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 2rem;
            font-weight: 700;
            color:white;
        }

        .stat-label {
            font-size: 0.875rem;
            color: white;
        }

        .testimonials-container {
            height: 400px; /* Reduced height for better appearance */
            overflow: hidden;
            position: relative;
        }

        @media (min-width: 768px) {
            .testimonials-container {
                height: 500px; /* Slightly taller on desktop */
            }
        }

        .testimonials-column {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }

        .testimonial-card {
            background-color: white;
            border: 1px solid #e5e7eb;
            border-radius: 0.75rem;
            padding: 1.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s, box-shadow 0.3s;
            flex-shrink: 0; /* Prevent cards from shrinking */
        }

        .testimonial-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }

        .testimonial-header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }

        .testimonial-avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            object-fit: cover;
            margin-right: 1rem;
        }

        .testimonial-info h3 {
            font-size: 1rem;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }

        .stars {
            color: var(--yellow);
            display: flex;
            gap: 0.25rem;
        }

        .testimonial-text {
            font-size: 0.875rem;
            color: #6b7280;
            line-height: 1.5;
        }
        /* tesimonial */
    /* trusted by */
        /* ===== Trusted By ===== */


 /* ===== Tokens (adjust to your theme) ===== */
:root{
  --brand:#F1B418;         /* gold */
  --ink:#0b1220;           /* dark text on light bg */
}

/* ===== Unified section title (reuse across site) ===== */
.section-title{
  font-weight:800;
  font-size:clamp(24px, 2.2vw, 36px);
  line-height:1.2;
  letter-spacing:.2px;
  text-align:center;
  color:var(--ink);
  margin:0 0 24px;
  position:relative;
}
.section-title.-underline::after{
  content:"";
  width:72px; height:6px; border-radius:6px;
  background:var(--brand);
  display:block; margin:10px auto 0;
}

/* ===== Trusted By ===== */
.trusted-by{ padding:56px 0 56px; }     /* section spacing */

/* Desktop grid */
.trusted-grid{
  display:grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap:24px;
  align-items:center; justify-items:center;
  max-width:1250px; margin:26px auto 0;
  padding:0; list-style:none;
}

/* Uniform logo box so visual gaps match even if images have transparent padding */
.trusted-item{
  display:flex; align-items:center; justify-content:center;
  height:72px;                      /* SAME height for all slots */
  padding:12px 16px;                /* inner breathing space */
  box-sizing:border-box;
}

/* Logos */
.trusted-logo{
  display:block;                    /* removes inline baseline gap */
  max-height:100%;
  max-width:100%;
  object-fit:contain;
  filter:grayscale(100%) opacity(.85);
  transition:filter .25s ease, transform .2s ease, opacity .25s ease;
}
.trusted-logo:hover{ filter:none; opacity:1; transform:translateY(-2px); }

/* Mobile marquee */
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.trusted-marquee{ position:relative; overflow:hidden; margin-top:20px; }
.trusted-track{
  display:flex; gap:32px; align-items:center;
  width:max-content;
  will-change:transform;
  animation:marquee 28s linear infinite;
}
.trusted-track img{
  display:block;
  height:44px; width:auto; object-fit:contain;
  filter:grayscale(100%) opacity(.85);
}
.trusted-track:hover{ animation-play-state:paused; }

/* Edge fades for nicer loop */
.trusted-fade{
  position:absolute; top:0; bottom:0; width:40px; pointer-events:none;
  background:transparent;
}
.trusted-fade--left{ left:0;  background:linear-gradient(90deg, #fff, transparent); }
.trusted-fade--right{ right:0; background:linear-gradient(270deg, #fff, transparent); }

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce){
  .trusted-track{ animation:none; }
}

/* Responsive columns */
@media (max-width:1200px){
  .trusted-grid{ grid-template-columns: repeat(5, minmax(160px,1fr)); }
}
@media (max-width:992px){
  .trusted-grid{ grid-template-columns: repeat(4, minmax(160px,1fr)); }
}
/* @media (max-width:768px){
  .trusted-grid{ display:none; }
  .trusted-marquee{ display:block; }
} */
 /* Default (desktop-first): show grid, hide marquee */
.trusted-grid{ display:grid; }
.trusted-marquee{ display:none; }

/* Mobile: force hide grid, show marquee */
@media (max-width: 768px){
  .trusted-grid{ display:none !important; }
  .trusted-marquee{ display:block !important; }
}

/* Desktop back: just in case another rule toggles it */
@media (min-width: 769px){
  .trusted-grid{ display:grid !important; }
  .trusted-marquee{ display:none !important; }
}

@media (min-width:769px){
  .trusted-marquee{ display:none; } /* hide marquee on desktop */
}


/* trusted by logos color in mobile changes css*/
/* tap highlight off (optional) */
.trusted-track img,
.trusted-logo { -webkit-tap-highlight-color: transparent; cursor:pointer; }

/* desktop hover as-is */
.trusted-logo:hover,
.trusted-track img:hover { filter:none; opacity:1; transform:translateY(-2px); }

/* mobile tap state */
@media (hover:none) and (pointer:coarse){
  .trusted-logo:active,
  .trusted-track img:active{
    filter:none; opacity:1; transform:translateY(-2px);
    transition:filter .15s ease, transform .15s ease, opacity .15s ease;
  }
}

        /* @keyframes scroll {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .animate-scroll {
            animation: scroll 30s linear infinite;
        }

        .animate-scroll:hover {
            animation-play-state: paused;
        }

        .filter.grayscale {
            filter: grayscale(100%);
            transition: filter 0.3s ease;
        }

        .filter.grayscale:hover {
            filter: grayscale(0%);
        }



.brands-section {
    text-align: center;
    padding: 60px 0;
    background: #f8f9fa;
}
.brands-title {
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom:30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.slick-slider {
    display: flex;
    align-items: center;
    justify-content: center;
}
.brand {
    display: flex;
    justify-content: center;
    text-align: center;
    padding: 10px;
}
.slick-track {
    display: flex !important;
    justify-content: center;
}

.brand img {
    width: 170px;
    height:150px;
    filter: grayscale(100%);
    margin: 0 auto;

    transition: filter 0.3s ease, transform 0.3s ease;
}
.brand img:hover {
    filter: grayscale(0%);
    transform: scale(1.1);
} */
/* trustedby */

        /* webdesign dubai
       */
:root{ --accent:#fbbf24; }

  /* SECTION (renamed) */
  /* .landing-hero{
    position:relative; isolation:isolate; color:#fff;
    min-height:440px; padding:4rem 1rem;
  } */
   .landing-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
  min-height: 440px;
  padding: 4rem 1rem;

  /* flex apply kiya */
  display: flex;
  flex-direction: column;   /* upar se neeche */
  justify-content: center;  /* vertical center */
  align-items: center;      /* horizontal center */
}
.landing-hero::before{
  content:"";
  position:absolute; inset:0; z-index:-2;
  background-image: url('../images/webbg.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

  .landing-hero::after{
    content:""; position:absolute; inset:0; z-index:-1;
  }

  /* dashed grid overlay */
  .landing-hero .grid-overlay{
    position:absolute; inset:0; width:100%; height:100%;
    pointer-events:none; display:block; z-index:0;
  }

  .landing-hero .container{ max-width:1200px; margin:0 auto; position:relative; z-index:1; }
  .landing-hero .text-center{ text-align:center; }

  .landing-hero h1{ font-size:2.5rem; margin-bottom:1rem; font-weight:700; }
  .landing-hero .underline-bar{ width:90px; height:6px; background:var(--accent); border-radius:999px; margin:0 auto 1.25rem; }

  /* clamp + fade */
  .landing-hero .content-container{
    max-height:120px; overflow:hidden; position:relative; transition:max-height .45s ease;
    margin:0 auto;
  }
  .landing-hero .content-container::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:48px;
    background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(75,85,99,.88) 100%);
    pointer-events:none;
  }
  .landing-hero .content-container.expanded{ max-height:1200px; }
  .landing-hero .content-container.expanded::after{ display:none; }

  .landing-hero p{ margin:0 0 1rem; font-size:1.05rem; line-height:1.7; }
  .landing-hero .toggle-btn{
    background:none; border:none; color:var(--accent); text-decoration:underline;
    cursor:pointer; font-size:1rem; margin-top:.5rem; font-weight:500;
  }
  .hidden{ display:none; }

  @media (max-width:768px){
    .landing-hero h1{ font-size:2rem; }
    .landing-hero .content-container{ max-height:150px; }
  }

  /* tabs section */

        /* Text Colors */
        .text-primary {
            color: #0056b3;
        }

        .text-secondary {
            color: #333;
        }

        .text-white {
            color: #fff;
        }

        /* Background Colors */
        .bg-primary {
            background-color: #0056b3;
        }

        .bg-secondary {
            background-color: #333;
        }

        .bg-white {
            background-color: #fff;
        }

        .bg-yellow {
            background-color: #ffc107;
        }

        /* Typography */
        h2, h3 {
            font-weight: bold;
            margin-bottom: 1rem;
        }

        h2 {
            font-size: 2rem;
        }

        h3 {
            font-size: 1.75rem;
        }

        /* Button Styles */
        .btn {
            display: inline-block;
            padding: 0.5rem 1rem;
            border-radius: 0.5rem;
            text-decoration: none;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid transparent;
        }

        .btn-primary {
            background-color: #0056b3;
            color: white;
        }

        .btn-primary:hover {
            background-color: #004494;
        }

        .btn-outline {
            background-color: white;
            color: #333;
            border: 1px solid #333;
        }

        .btn-outline:hover {
            background-color: #333;
            color: white;
        }

        /* Form Styles */
        input[type="tel"] {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 0.5rem;
            margin-bottom: 1rem;
        }

        input[type="tel"]:focus {
            outline: none;
            border-color: #0056b3;
        }

        /* Layout */
        .text-center {
            text-align: center;
        }

        .flex {
            display: flex;
        }

        .flex-wrap {
            flex-wrap: wrap;
        }

        .flex-col {
            flex-direction: column;
        }

        .justify-center {
            justify-content: center;
        }

        .justify-between {
            justify-content: space-between;
        }

        .items-center {
            align-items: center;
        }

        .w-full {
            width: 100%;
        }

        .w-20 {
            width: 5rem;
        }

        .h-1 {
            height: 0.25rem;
        }

        .mx-auto {
            margin-left: auto;
            margin-right: auto;
        }

        .mt-2 {
            margin-top: 0.5rem;
        }

        .mt-4 {
            margin-top: 1rem;
        }

        .mt-10 {
            margin-top: 2.5rem;
        }

        .mb-4 {
            margin-bottom: 1rem;
        }

        .mb-6 {
            margin-bottom: 1.5rem;
        }

        .mr-4 {
            margin-right: 1rem;
        }

        .p-4 {
            padding: 1rem;
        }

        .py-2 {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
        }

        .py-3 {
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
        }

        .py-6 {
            padding-top: 1.5rem;
            padding-bottom: 1.5rem;
        }

        .py-10 {
            padding-top: 2.5rem;
            padding-bottom: 2.5rem;
        }

        .px-2 {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }

        .px-4 {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        .px-8 {
            padding-left: 2rem;
            padding-right: 2rem;
        }

        .rounded-xl {
            border-radius: 0.75rem;
        }

        .rounded-lg {
            border-radius: 0.5rem;
        }

        .gap-2 {
            gap: 0.5rem;
        }

        .gap-4 {
            gap: 1rem;
        }

        .cursor-pointer {
            cursor: pointer;
        }

        .relative {
            position: relative;
        }

        /* Responsive */
        @media (min-width: 768px) {
            .md\:flex {
                display: flex;
            }

            .md\:w-1\/2 {
                width: 50%;
            }

            .md\:w-64 {
                width: 16rem;
            }

            .md\:w-32 {
                width: 8rem;
            }

            .md\:text-3xl {
                font-size: 1.875rem;
            }

            .md\:text-4xl {
                font-size: 2.25rem;
            }

            .md\:flex-row {
                flex-direction: row;
            }

            .md\:items-center {
                align-items: center;
            }

            .md\:mb-0 {
                margin-bottom: 0;
            }

            .md\:mr-4 {
                margin-right: 1rem;
            }

            .md\:max-w-none {
                max-width: none;
            }
        }

        @media (min-width: 1024px) {
            .lg\:text-3xl {
                font-size: 1.875rem;
            }

            .lg\:text-base {
                font-size: 1rem;
            }

            .lg\:py-10 {
                padding-top: 2.5rem;
                padding-bottom: 2.5rem;
            }
        }

        /* Custom Styles */
        .section-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2.5rem 1rem;
        }

        .section-title {
            font-size: 2.25rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
        }

        .section-title span {
            color: #0056b3;
        }

        .title-underline {
            width: 5rem;
            height: 0.25rem;
            background-color: #ffc107;
            margin: 0.5rem auto;
        }

        .tag-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 1rem;
            max-width: 800px;
            margin: 0 auto;
            padding-top: 0.5rem;
        }

        .tag {
            padding: 0.5rem 1rem;
            border-radius: 0.75rem;
            cursor: pointer;
            font-size: 0.875rem;
            transition: all 0.3s ease;
        }

        .tag.active {
            background-color: #333;
            color: white;
        }

        .tag.inactive {
            background-color: white;
            color: #333;
            border: 1px solid #333;
        }

        .tag:hover {
            background-color: #333;
            color: white;
        }

        .content-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: center;
            margin-top: 2.5rem;
        }

        .text-content {
            width: 100%;
            padding: 1rem;
        }

        .image-content {
            width: 100%;
            padding: 1rem;
            display: flex;
            justify-content: center;
        }

        .image-content img {
            max-width: 100%;
            height: auto;
            border-radius: 0.75rem;
        }

        .call-form {
            margin-top: 1rem;
        }

        .call-form h2 {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 1rem;
            color: #333;
        }

        .form-container {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            width: 100%;
            max-width: 18rem;
        }

        .form-container input {
            width: 100%;
            padding: 0.75rem;
            border: 1px solid #ddd;
            border-radius: 0.5rem;
        }

        .form-container button {
            background-color: #0056b3;
            color: white;
            padding: 0.75rem 2rem;
            border: none;
            border-radius: 0.5rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        .form-container button:hover {
            background-color: #004494;
        }

        @media (min-width: 768px) {
            .text-content {
                width: 50%;
            }

            .image-content {
                width: 50%;
            }

            .form-container {
                flex-direction: row;
                max-width: none;
            }

            .form-container input {
                width: 16rem;
                margin-bottom: 0;
                margin-right: 1rem;
            }

            .form-container button {
                width: 8rem;
            }
        }


/* tabs animatedd */
 :root{
      --body-color:#0b1220;--text-color:#eaf1ff;--primary-color:#1C2D57;--secondary-color:#F1B418;
      --accent-color:#7fb7ff;--border-color:#1b2433;--card-bg:#0f172a;
    }


    /* Main Section */
    #wo-locations{padding:56px 18px;background:var(--body-color);color:var(--text-color);
        position:relative;overflow:hidden;width:100%}
    #wo-locations::before{
      content:"";position:absolute;inset:-30% -10% auto -10%;height:360px;filter:blur(60px);
      background:radial-gradient(600px 220px at 20% 50%,#1C2D57 0%,transparent 60%),
                 radial-gradient(600px 220px at 70% 30%,#F1B418 0%,transparent 55%);opacity:.25;z-index:0;
    }
    .wo-container{max-width:1160px;margin:0 auto;position:relative;z-index:1}

    /* Title */
    .wo-title-section{text-align:center;margin-bottom:26px}
    .wo-title-section h2{margin:0 0 8px;font-weight:800;letter-spacing:.3px;line-height:1.15;font-size:clamp(26px,3.5vw,36px)}
    .gradient-text{background:linear-gradient(90deg,#F1B418,#ffd977);-webkit-background-clip:text;background-clip:text;color:transparent}
    .wo-title-underline{width:120px;height:4px;margin:10px auto 0;background:linear-gradient(90deg,#1C2D57,#F1B418);border-radius:6px}
    .wo-title-section p{margin:10px auto 0;max-width:780px;color:#c9d6ea;font-size:15px;line-height:1.7}

    /* Tabs */
    .wo-tabs-nav{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:18px 0 24px}
    .wo-tab{cursor:pointer;border:none;padding:10px 16px;border-radius:999px;background:#0f1a2b;color:#b9c7de;font-weight:600;
      box-shadow:0 8px 24px rgba(0,0,0,.28), inset 0 0 0 1px rgba(255,255,255,.08);transition:all .3s ease}
    .wo-tab.active{background:linear-gradient(180deg,#243a73,#1C2D57);color:#fff;transform:translateY(-2px)}
    .wo-tab:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(0,0,0,.35)}

    /* Grid */
    .wo-content-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px;align-items:start}
    @media (max-width:900px){.wo-content-grid{grid-template-columns:1fr}}

    /* Cards */
    .wo-copy-card,.wo-right-card{background:#0f172a;border:1px solid #1b2433;border-radius:16px;padding:24px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
    .wo-copy-card h3{margin:0 0 15px;font-size:clamp(18px,2.6vw,22px);font-weight:800;letter-spacing:.2px;color:#fff}
    .wo-text-content{color:#cfe0ff;font-size:15px;line-height:1.8}
    .wo-text-content p{margin:0 0 15px}
    .wo-text-content ul{margin:0;padding:0 0 0 16px;columns:2;column-gap:28px}
    .wo-text-content li{margin:8px 0;position:relative}
    .wo-text-content li::before{content:"•";color:var(--secondary-color);font-weight:bold;display:inline-block;width:1em;margin-left:-1em}

    /* Orbit (as-is) */
    .orbit-container{--size:120px;--offset:22px;--duration:28s;position:relative;
        aspect-ratio:1/1;pointer-events:none;display:flex;border-radius:9999px;
        width:calc(var(--size)*2.5);border:4px solid var(--primary-color);
        transition:box-shadow .3s ease-in-out;animation:spin-out var(--duration) linear infinite;
        margin:0 auto;justify-content:center;align-items:center}
    .orbit-item{z-index:1;display:flex;width:var(--size);aspect-ratio:1/1;pointer-events:auto;
        border-radius:9999px;animation:spin-in var(--duration) linear infinite reverse;offset:circle(calc(var(--size)/(2 * sin(.5turn/7)) + var(--offset))) calc(100% * sibling-index()/7) 0deg;position:absolute}
    .orbit-item img{width:inherit;height:inherit;pointer-events:auto;border-radius:9999px;border:3px solid var(--primary-color);transition:.3s box-shadow ease-in-out, .3s border ease-in-out, .3s transform ease-in-out;object-fit:cover}
    .orbit-item:hover{z-index:2}
    .orbit-item:hover img{transform:scale(1.5);border-color:var(--secondary-color);box-shadow:0 0 1rem var(--secondary-color)}
    .orbit-item:hover ~ .orbit-item img{transform:scale(.6)}
    .orbit-item:has(~ .orbit-item:hover) img{transform:scale(.6)}
    .orbit-container::before{content:"";z-index:-1;border:inherit;position:absolute;width:var(--size);aspect-ratio:1/1;border-radius:.25rem;top:50%;left:50%;transform:translate(-50%,-50%);transition:.3s}
    .orbit-container::after{content:"";z-index:-1;inset:-4px;width:inherit;height:inherit;border:inherit;position:absolute;border-radius:inherit;animation:spin-in var(--duration) linear infinite reverse;transition:.3s}
    .orbit-container:hover{animation-play-state:paused;box-shadow:0 0 60px 12px var(--primary-color) inset,0 0 21px 15px var(--body-color)}
    .orbit-container:hover .orbit-item{animation-play-state:paused}
    .orbit-container:hover::before{--scale:4;--translate:calc(-50%/var(--scale));border-width:2px;border-radius:inherit;border-color:var(--secondary-color);transform:scale(var(--scale)) translate(var(--translate),var(--translate));box-shadow:0 0 15px var(--secondary-color),0 0 15px var(--primary-color) inset}
    .orbit-container:hover::after{transform:scale(.3);border-width:18px;border-radius:3rem;border-color:var(--secondary-color);box-shadow:0 0 var(--size) var(--secondary-color) inset}
    @keyframes spin-out{from{transform:rotate(0)}to{transform:rotate(360deg)}}
    @keyframes spin-in{from{transform:rotate(0)}to{transform:rotate(360deg)}}

    .wo-features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
    .wo-feature-tag{padding:10px;border:1px dashed #253149;border-radius:12px;text-align:center;font-size:13px;color:#cfe0ff}


    /* orbit */
    /* ---------- Orbit sizing: responsive ---------- */
.orbit-container{
  /* desktop default stays same */
  --size: 120px;
  --offset: 22px;
}

/* tablets */
@media (max-width: 991.98px){
  #wo-locations{ padding-bottom: 72px; }          /* WA button se clash na ho */
  .wo-content-grid{ gap:20px; }
  .orbit-container{
    --size: clamp(80px, 18vw, 100px);
    --offset: 18px;
    width: calc(var(--size) * 2.5);
    border-width: 3px;
    margin: 6px auto 18px;
  }
  .orbit-item img{ border-width: 2px; }
}

/* small phones */
@media (max-width: 575.98px){
  .wo-content-grid{ gap:16px; }
  .orbit-container{
    /* circle thumbnails smaller + whole ring fits screen width */
    --size: clamp(56px, 24vw, 84px);
    --offset: 12px;
    width: min(86vw, 320px);
    border-width: 3px;
    margin: 4px auto 16px;
  }
  .orbit-item{ /* thoda slow so hover/scale pleasant */
    animation-duration: 34s;
  }
  .orbit-item img{
    border-width: 2px;
  }
  /* optional: hover zoom kam on touch devices */
  .orbit-item:hover img{ transform: scale(1.25); }
}

    /* orbit tabs in  gallery */

        /* fast loading we designs */

        /* Custom Styles for Fast Loading Web Designs Section */
        /* .fast-loading-section {
            position: relative;
            padding: 2.5rem 0;
            background-color: #f8f9fa;
        }

        .section-title {
            font-size: 2.25rem;
            font-weight: bold;
            margin-bottom: 0.25rem;
            color: #333;
        }

        .section-title span {
            color: #0056b3;
        }

        .title-underline {
            width: 5rem;
            height: 0.25rem;
            background-color: #ffc107;
            margin-top: 0.5rem;
        }

        .section-description {
            font-size: 1rem;
            max-width: 64rem;
            padding-top: 0.75rem;
            padding-bottom: 0.75rem;
            margin: 0 auto;
        }

        .services-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1rem;
            margin: 2rem 2rem 0;
        }

        .service-card {
            background-color: white;
            text-align: center;
            padding: 1rem;
            border-radius: 0.25rem;
            display: flex;
            flex-direction: column;
            transition: transform 0.5s;
        }

        .service-card:hover {
            transform: scale(1.05);
        }

        .service-icon {
            display: flex;
            justify-content: center;
            padding: 0.5rem;
            border-radius: 0.5rem;
            font-size: 2rem;
            margin-bottom: 0.5rem;
        }

        .service-title {
            font-size: 1rem;
            font-weight: bold;
            margin-bottom: 1rem;
        }

        .service-description {
            font-size: 1rem;
        }
         */
        /* @media (min-width: 768px) {
            .md\:flex-nowrap {
                flex-wrap: nowrap;
            }

            .services-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 2rem;
                margin: 2rem 1rem 0;
            }

            .section-title {
                text-align: left;
            }

            .title-underline {
                margin-left: 0;
                margin-right: auto;
            }

            .section-description {
                text-align: left;
                margin-left: 0;
                margin-right: 0;
            }
        }

        @media (min-width: 1024px) {
            .services-grid {
                grid-template-columns: repeat(3, 1fr);
                margin: 2rem 0 0;
            }

            .lg\:text-left {
                text-align: left;
            }

            .service-card {
                text-align: left;
            }

            .service-icon {
                justify-content: flex-start;
            }
        }

        @media (max-width: 767px) {
            .px-6 {
                padding-left: 1rem;
                padding-right: 1rem;
            }

            .services-grid {
                margin: 2rem 1rem 0;
            }
        }
         */

/*
        .section-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            padding: 3rem 1rem;
        }

        @media (min-width: 1024px) {
            .section-container {
                box-shadow:0 10px 20px rgba(0,0,0,.2);
                padding: 4rem 1rem;
            }
        }
         */

/* fast design servicenew */

#weboctane-3d-services{
      --primary:#043a78;            /* Navy (given) */
      --accent:#f5c84b;             /* Gold/Yellow (template style) */
      --ink:#ffffff;
      --muted:rgba(255,255,255,.85);
      --panel:rgba(255,255,255,.04);
      --stroke:rgba(245,200,75,.25);
      --transition: all .35s cubic-bezier(.2,.8,.2,1);

      position: relative;
      background: radial-gradient(1200px 600px at 15% 10%, rgba(4,58,120,.15), transparent 60%),
                  #0b0b0b;          /* professional black bg */
      color: var(--ink);
      line-height: 1.6;
      overflow: clip;               /* keep particles inside */
      padding: 24px 0 40px;
    }

    /* subtle top divider to match template polish */
    #weboctane-3d-services::before{
      content:""; display:block; height:1px; width:100%;
      background: linear-gradient(90deg, transparent, rgba(245,200,75,.25), transparent);
    }

    /* header */
    #weboctane-3d-services .section-header{
      text-align:center; margin-bottom:64px; position:relative;
    }
    #weboctane-3d-services .section-header h1{
      font-weight:800; margin:0 0 14px;
      font-size: clamp(2rem, 3.2vw + 1rem, 3.2rem);
      letter-spacing:.2px;
      color:#fff;
    }
    #weboctane-3d-services .section-header .brand-accent{
      color:var(--accent);
    }
    #weboctane-3d-services .section-header p{
      font-size:1.06rem; max-width:760px; margin:0 auto;
      color: var(--muted);
    }

    /* card */
    #weboctane-3d-services .card-3d{
      background: var(--panel);
      border-radius:18px; padding:28px;
      border:1px solid var(--stroke);
      box-shadow: 0 10px 24px rgba(0,0,0,.35);
      transform-style: preserve-3d;
      transition: var(--transition);
      position:relative; overflow:hidden; min-height:420px;
      display:flex; flex-direction:column;
    }
    #weboctane-3d-services .card-3d::after{
      /* thin top bar in brand gradient */
      content:""; position:absolute; left:0; right:0; top:0; height:3px;
      background: linear-gradient(90deg, var(--accent), var(--primary));
      opacity:.9;
    }
    #weboctane-3d-services .card-3d:hover{
      transform: translateY(-10px) rotateX(3deg) rotateY(3deg);
      box-shadow: 0 20px 36px rgba(0,0,0,.45);
    }

    #weboctane-3d-services .card-icon-3d{
      width:74px; height:74px; border-radius:16px; margin-bottom:20px;
      display:flex; align-items:center; justify-content:center; font-size:2rem; color:#fff;
      background:#f7c333;
      border:1px solid rgba(4,58,120,.35);
      box-shadow: 0 8px 16px rgba(4,58,120,.35);
      transform: translateZ(26px);
      transition: var(--transition);
    }
    #weboctane-3d-services .card-3d:hover .card-icon-3d{
      /* background: linear-gradient(135deg, var(--primary), var(--accent)); */
      background:#121d36;
      box-shadow: 0 10px 22px rgba(245,200,75,.35);
      transform: translateZ(36px) scale(1.06);
    }

    #weboctane-3d-services .card-title-3d{
      font-size:1.45rem; font-weight:700; margin:0 0 10px;
      color:#fff; letter-spacing:.2px; transform: translateZ(18px);
    }
    #weboctane-3d-services .card-content-3d{
      color: var(--muted); margin:0 0 18px; line-height:1.7; transform: translateZ(14px);
      flex-grow:1;
    }

    #weboctane-3d-services .features-3d{ list-style:none; padding:0; margin:10px 0 0; transform: translateZ(10px);}
    #weboctane-3d-services .features-3d li{
      margin:0 0 10px; display:flex; align-items:center; font-size:.98rem;
      color:rgba(255,255,255,.9);
    }
    #weboctane-3d-services .features-3d li::before{
      content:""; width:7px; height:7px; border-radius:50%; margin-right:10px;
      background: var(--accent); box-shadow:0 0 0 3px rgba(245,200,75,.15);
      flex:0 0 7px;
    }

    #weboctane-3d-services .ai-badge{
      position:absolute; top:16px; right:16px;
      background: linear-gradient(90deg, var(--accent), #ffd973);
      color:#2b2b2b; padding:4px 12px; border-radius:999px; font-size:.78rem; font-weight:700;
      border:1px solid rgba(245,200,75,.45);
      text-transform:uppercase; letter-spacing:.5px;
      transform: translateZ(22px);
    }

    /* subtle floating shapes */
    #weboctane-3d-services .floating-elements{
      position:absolute; inset:0; pointer-events:none; border-radius:18px; z-index:-1; overflow:hidden;
    }
    #weboctane-3d-services .floating-element{
      position:absolute; width:70px; height:70px; border-radius:12px;
      background: rgba(245,200,75,.05); border:1px solid rgba(245,200,75,.12);
      animation: _wo-float 16s infinite linear;
    }
    #weboctane-3d-services .floating-element:nth-child(1){ top:-35px; left:-35px; animation-delay:0s;}
    #weboctane-3d-services .floating-element:nth-child(2){ bottom:-35px; right:-35px; animation-delay:5s;}
    #weboctane-3d-services .floating-element:nth-child(3){ top:48%; right:-35px; animation-delay:10s;}
    @keyframes _wo-float{
      0%{transform: translate(0,0) rotate(0deg)}
      25%{transform: translate(18px,18px) rotate(90deg)}
      50%{transform: translate(0,34px) rotate(180deg)}
      75%{transform: translate(-18px,18px) rotate(270deg)}
      100%{transform: translate(0,0) rotate(360deg)}
    }

    /* particles in section */
    #weboctane-3d-services .particles{ position:absolute; inset:0; z-index:0; pointer-events:none;}
    #weboctane-3d-services .particle{
      position:absolute; border-radius:50%;
      background: rgba(245,200,75,.12);
      box-shadow: 0 0 12px rgba(245,200,75,.2);
      animation: _wo-particle 18s infinite linear;
    }
    @keyframes _wo-particle{
      0%{ transform: translateY(0) translateX(0); opacity:.9}
      100%{ transform: translateY(-60vh) translateX(80px); opacity:.2}
    }

    /* touch devices */
    @media (max-width: 768px){
      #weboctane-3d-services .card-3d:hover{ transform: translateY(-6px); }
    }
/* services end */


/* procss */
   #wo-orbit-pro{
      --gold:#f5c84b; --cyan:#1ec5ff; --ink:#fff; --muted:rgba(255,255,255,.85);
      --t:cubic-bezier(.2,.8,.2,1);
      background:#0b0f14; color:var(--ink); overflow:hidden; font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    }
    .wo-head{text-align:center;margin-bottom:14px}
    .wo-title{margin:0 0 6px;font-weight:800;font-size:clamp(2rem,1.2rem+2.6vw,3rem)}
    .wo-title .accent{color:var(--gold)} .wo-sub{color:var(--muted);max-width:900px;margin:0 auto}

    /* stage */
    .stage{position:relative;width:min(90vh,1000px);aspect-ratio:1/1;max-width:100%;margin:26px auto 72px}

    /* EARTH core */
    @property --pulse{syntax:'<length>';inherits:false;initial-value:80px}
    @property --pulse2{syntax:'<length>';inherits:false;initial-value:56px}
    @property --r{syntax:'<angle>';inherits:false;initial-value:0deg}
    .earth{position:absolute;
        left:50%;top:50%;
        transform:translate(-50%,-50%);width:640px;max-width:64%;aspect-ratio:1/1;
        border-radius:50%;z-index:3;
      background:url('https://i.postimg.cc/9QCCCVsQ/earth.png') repeat-x center/cover;
      animation:earth 40s linear infinite, pulse 2s linear infinite alternate-reverse;
      box-shadow:0 -1px 1px 1px #fff,-1px 1px 1px 1px #64BEC8,0 0 var(--pulse) -20px #64BEC8,inset 0 0 76px -10px #64BEC8,inset 0 0 var(--pulse2) -10px #64BEC8;}
    .earth::before,.earth::after{content:"";position:absolute;left:70px;height:10px;border-radius:45%;filter:blur(12px);transform:rotate(var(--r));animation:rotation 10s linear infinite}
    .earth::before{width:14%;top:6rem;left:7rem;box-shadow:inset 0 0 70px 90px #A47478,0 0 140px 70px #A47478}
    .earth::after{width:7%;top:0rem;left:33rem;box-shadow:inset 0 0 70px -50px #fff,inset 0 0 70px 90px #E5BC77,0 0 130px 50px #E5BC77}
    @keyframes earth{0%{background-position:0 0}100%{background-position:-199% 0}}
    @keyframes pulse{0%{--pulse:8rem;--pulse2:5.6rem;--r:0deg}100%{--pulse:10rem;--pulse2:3.6rem;--r:180deg}}
    @keyframes rotation{from{--r:0deg}to{--r:180deg}}
.flag{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:min(32%,280px);
  aspect-ratio:4/3;                 /* same as old setup */
  border-radius:12px; overflow:hidden;
  box-shadow:0 10px 26px rgba(0,0,0,.45), 0 0 0 8px rgba(245,200,75,.08);
  pointer-events:none;               /* don't block hovers */
  z-index:6;                         /* under nodes, over earth/lines */
}
.flag svg{ width:100%; height:100%; display:block; }
    /* .flag{position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
        width:min(32%,280px);
        aspect-ratio:4/3;
        border-radius:12px;
        overflow:hidden;
      box-shadow:0 10px 26px rgba(0,0,0,.45),0 0 0 8px rgba(245,200,75,.08)}
    .flag svg{width:100%;height:100%;display:block} */

    /* cards - EXACTLY as per your marked positions */
    .node{
      position:absolute;
      width:300px;
      max-width:36ch;
      transform:translate(-50%,-50%);
      padding:18px 20px 18px 65px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.16);
      border-radius:18px;
      backdrop-filter:blur(12px);
      box-shadow:0 14px 32px rgba(0,0,0,.4);
      color:var(--muted);
      opacity:0;
      transition:all 0.5s var(--t);
      z-index:10;
    }
    .node.show{opacity:1; transform:translate(-50%,-50%) scale(1);}
    .node:hover{
      border-color:rgba(245,200,75,.35);
      box-shadow:0 20px 40px rgba(245,200,75,.25), 0 0 0 8px rgba(245,200,75,.08) inset;
      transform:translate(-50%,-50%) scale(1.05);
    }
    .node h6{
      margin:0 0 8px;
      font-weight:900;
      font-size:1.15rem;
      background:linear-gradient(135deg,#fff,var(--gold));
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }
    .node p{
      margin:0;
      font-size:0.95rem;
      line-height:1.5;
      color:var(--muted);
    }
    .node .ico{
      position:absolute;
      left:16px;
      top:50%;
      transform:translateY(-50%);
      width:42px;
      height:42px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:#F9C331;
      border:3px solid #e8f8ff;
      color:#fff;
      font-size:18px;
      box-shadow:0 8px 20px rgba(30,197,255,.4);
    }

    /* EXACT POSITIONS as marked in your image */
/* Node positions updated for more spacing */
.n1 { left: 50%; top: 6%; }        /* Top-center thoda upar */
.n2 { left: 100%; top: 40%; }       /* Top-right aur bahar */
.n3 { left: 100%; top: 70%; }       /* Mid-right door */
.n5 { left: 50%; top: 94%; }       /* Bottom-center */
.n6 { left: 0%; top: 70%; }       /* Bottom-left aur bahar */
.n7 { left: 0%; top: 40%; }        /* Mid-left door */




    /* Connector lines - improved */
    .connectors{
      position:absolute;
      inset:0;
      pointer-events:none;
      z-index:5;
    }
    .connectors path{
      fill:none;
      stroke:var(--gold);
      stroke-width:3;
      stroke-linecap:round;
      stroke-linejoin:round;
      stroke-dasharray:400;
      stroke-dashoffset:400;
      transition:stroke-dashoffset 1.2s ease;
      filter:drop-shadow(0 0 8px rgba(245,200,75,.5));
    }
    .connectors.on path{stroke-dashoffset:0;}

    /* Mobile responsive */
    @media (max-width: 992px){
      .stage{
        width:100%;
        height:auto;
        margin:20px auto 40px;
        aspect-ratio:unset;
      }
      .earth{max-width:85%}
      .flag{width:50%}
      .node{
        position:static;
        transform:none;
        opacity:1;
        margin:0 auto 20px;
        width:90%;
        max-width:400px;
      }
      .connectors{display:none}
    }

    /* Animation for title */
    @keyframes titleShine{
      0%{background-position:-200% center}
      100%{background-position:200% center}
    }




    /* ---------- Tablet tweaks (<=1200px) ---------- */
@media (max-width: 1200px){
  /* earth a bit smaller so more air */
  #wo-orbit-pro .earth{ max-width: 60%; }

  /* nudge positions so nothing kisses the globe */
  #wo-orbit-pro .n2{ left: 86%; top: 19%; }
  #wo-orbit-pro .n3{ left: 90%; top: 50%; }
  #wo-orbit-pro .n4{ left: 84%; top: 82%; }
  #wo-orbit-pro .n6{ left: 16%; top: 82%; }
  #wo-orbit-pro .n7{ left: 8%;  top: 50%; }
}

/* ---------- Mobile layout (<=992px) ---------- */
@media (max-width: 992px){
  /* Stage still centered, but larger earth for visual punch */
  #wo-orbit-pro .stage{ margin: 10px auto 28px; width: 100%; }
  #wo-orbit-pro .earth{ max-width: 86%; }
  #wo-orbit-pro .flag{ width: 56%; }

  /* Hide orbit cards on mobile; we’ll show the stacked list below */
  #wo-orbit-pro .stage .node{ display: none; }
  #wo-orbit-pro .connectors{ display: none; }

  /* Stacked cards grid (your .mobile-grid) */
  #wo-orbit-pro .mobile-grid{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 8px;
  }
  #wo-orbit-pro .mobile-grid .node{
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    transform: none;
    opacity: 1;
    padding: 16px 16px 16px 56px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }
  #wo-orbit-pro .mobile-grid .node .ico{
    width: 36px; height: 36px; font-size: 16px;
    left: 14px; top: 50%; transform: translateY(-50%);
  }
  #wo-orbit-pro .mobile-grid .node h6{
    font-size: 1.02rem;
  }
  #wo-orbit-pro .wo-title{ font-size: clamp(1.8rem, 1.2rem + 2vw, 2.4rem); }
}

/* ---------- Small phones (<=576px) ---------- */
/* @media (max-width: 576px){
  #wo-orbit-pro{ padding-top: 28px; padding-bottom: 40px; }
  #wo-orbit-pro .earth{ max-width: 92%; }
  #wo-orbit-pro .flag{ width: 62%; }

  #wo-orbit-pro .mobile-grid{ gap: 12px; }
  #wo-orbit-pro .mobile-grid .node{
    padding: 14px 14px 14px 52px;
    border-radius: 14px;
  }
  #wo-orbit-pro .mobile-grid .node .ico{
    width: 34px; height: 34px; font-size: 15px;
  }
  #wo-orbit-pro .mobile-grid .node h6{ font-size: 1rem; }
  #wo-orbit-pro .mobile-grid .node p{ font-size: .95rem; line-height: 1.5; }
} */

/* ------- Tablet (<= 768px) fixes ------- */
@media (max-width: 768px){

     /* Heading always above globe */
  #wo-orbit-pro .wo-head{
    position: relative;
    z-index: 20;
    margin-bottom: 14px !important;   /* tighter gap under title */
    padding: 0 12px;
  }

  /* Title sizing & wrapping */
  #wo-orbit-pro .wo-head .section-title{
    font-size: clamp(22px, 5.6vw, 28px);
    line-height: 1.2;
    margin: 0;
    text-align: center;
    word-break: break-word;
  }


  /* Put "Our Process" on its own line, rest on next line */
  #wo-orbit-pro .wo-head .section-title .accent{
    display: block;                   /* first line */
    margin-bottom: 2px;
  }

  /* Globe smaller so text/cards don't hide behind it */
  #wo-orbit-pro .earth{ max-width: 78%; }      /* was 86% */
  #wo-orbit-pro .flag{  width: 48%; }          /* was 56%  */

  /* Give extra breathing room below the stage */
  #wo-orbit-pro .stage{
    margin: 12px auto 56px;                    /* was 10px auto 28px */
  }

  /* Make the stacked mobile cards consistent even with your Bootstrap row */
  #wo-orbit-pro .row.d-lg-none{
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 0;
  }
  #wo-orbit-pro .row.d-lg-none .node{
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    transform: none;
    opacity: 1;
    padding: 16px 16px 16px 56px;
    background: rgba(255,255,255,.09);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 22px rgba(0,0,0,.35);
  }
  #wo-orbit-pro .row.d-lg-none .node .ico{
    width: 36px; height: 36px; font-size: 16px;
    left: 14px; top: 50%; transform: translateY(-50%);
  }
}

/* ------- Small phones (<= 576px) tweaks ------- */
@media (max-width: 576px){
  #wo-orbit-pro .earth{ max-width: 82%; }     /* a touch bigger for tiny screens */
  #wo-orbit-pro .flag{  width: 54%; }
  #wo-orbit-pro .stage{ margin: 8px auto 64px; }

  #wo-orbit-pro .row.d-lg-none{ gap: 12px; }
  #wo-orbit-pro .row.d-lg-none .node{
    padding: 14px 14px 14px 52px;
    border-radius: 14px;
  }
  #wo-orbit-pro .row.d-lg-none .node h6{ font-size: 1rem; }
  #wo-orbit-pro .row.d-lg-none .node p{  font-size: .95rem; line-height: 1.5; }
}


/* subtle ripple ring behind icon */
#wo-orbit-pro .ico::after{
  content:"";
  position:absolute; inset:-6px;
  border-radius:50%;
  box-shadow:0 0 0 0 rgba(30,197,255,.35);
  animation:wo-ripple 2.4s ease-out infinite;
}
@keyframes wo-ripple{
  0%   { box-shadow:0 0 0 0 rgba(30,197,255,.35); }
  70%  { box-shadow:0 0 0 12px rgba(30,197,255,0); }
  100% { box-shadow:0 0 0 0 rgba(30,197,255,0); }
}


#wo-orbit-pro .node:hover .ico{
  transform:translateY(-50%) scale(1.08);
  box-shadow:0 10px 24px rgba(30,197,255,.55);
}
#wo-orbit-pro .node:hover .ico i{
  filter: drop-shadow(0 0 8px rgba(30,197,255,.6));
}

/* motion users ke liye respect */
@media (prefers-reduced-motion: reduce){
  #wo-orbit-pro .ico::after{ animation:none }
  #wo-orbit-pro .ico,
  #wo-orbit-pro .node{ transition:none }
  #wo-orbit-pro .ico i{
    animation: none !important;
  }
}

/* prcess */

/* bestwebsitedev */
:root{
  --navy:#043a78;
  --blue:#1e72e6;
  --accent:#f5c84b;
  --ink:#0f172a;
  --muted:#334155;
  --card:#e8f3ff;      /* matches your blue card */
}

/* Card */
.website-agency{
  background: var(--card);
  border-radius: 18px;
  padding: clamp(18px, 2.5vw, 32px);
  box-shadow: 0 10px 30px rgba(4,58,120,.08);
  color: var(--ink);
}

.website-agency h2{
  font-weight: 800;
  font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem);
  line-height: 1.2;
  margin: 0;
  letter-spacing: .2px;
}
.website-agency .blue{ color: var(--blue); }
.website-agency .underline{
  width: 90px; height: 6px; margin: 10px 0 18px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), #ffe38f);
}

/* Description with fade overlay (collapsed) */
.website-agency .description{
  color: var(--muted);
  line-height: 1.85;
  font-size: clamp(.98rem, .9rem + .3vw, 1.05rem);
  margin: 0;
  max-height: 9.5rem;              /* collapsed height */
  overflow: hidden;
  position: relative;
  padding-bottom: .35rem;
}

/* Fade that matches the card color (no dark blur) */
.website-agency .description::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0;
  height: 3rem;
  background: linear-gradient(180deg, rgba(232,243,255,0), var(--card));
  pointer-events:none;
}

/* Expanded: remove clamp + overlay */
.website-agency .description.is-open{
  max-height: none;
}
.website-agency .description.is-open::after{
  content: none;
}

.website-agency .show-more{
  margin-top: 14px;
  background: transparent;
  border: 0;
  color: var(--navy);
  font-weight: 700;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.98rem;
}
.website-agency .show-more:hover{ text-decoration: underline; }

@media (max-width: 576px){
  .website-agency{ border-radius: 14px; }
  .website-agency .underline{ width: 72px; height: 5px; margin: 8px 0 14px; }
}

/* help */
/* duabai and abu dabia */
   /* -------- THEME -------- */
    #wo-why{
      --navy:#0b1220; --navy-2:#11223a; --blue:#7fb2ff; --accent:#f5c84b;
      --ink:#eaf1ff; --muted:#b6c2d9; --ring: rgba(245,200,75,.18);
      --panel: linear-gradient(135deg,#0f1f36,#0b1526);
    }
    #wo-why.website-agency{
      background: linear-gradient(180deg,#102033,#081626);
      border-radius: 18px; color: var(--ink);
      padding: clamp(22px, 2.8vw, 34px);
      box-shadow: 0 20px 60px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06) inset;
      position: relative; overflow: hidden; isolation:isolate;
    }
    #wo-why::before{
      content:""; position:absolute; inset:-40%;
      background: radial-gradient(600px 300px at 85% 15%, var(--ring), transparent 60%),
                  radial-gradient(600px 300px at 10% 85%, rgba(30,114,230,.14), transparent 60%);
      pointer-events:none; z-index:-1;
    }

    /* Layout */
    #wo-why .grid{ display:grid; gap:clamp(18px,2.4vw,32px);
      grid-template-columns:1.1fr 1fr; align-items:center; }
    @media (max-width: 992px){ #wo-why .grid{ grid-template-columns:1fr } }

    /* Left copy */
    #wo-why h2{ font-weight:900; font-size:clamp(1.6rem,1.2rem + 2.2vw,2.6rem); margin:0; line-height:1.18 }
    #wo-why .blue{ color:#f7c333 }
    #wo-why .underline{ width:98px;height:6px;margin:10px 0 18px;border-radius:999px;
      background:linear-gradient(90deg,var(--accent),#ffe38f); box-shadow:0 0 20px rgba(245,200,75,.35) }
    #wo-why .desc{ color:var(--muted); line-height:1.85; font-size:clamp(.98rem,.9rem + .3vw,1.06rem);
      margin:0; max-height:10rem; overflow:hidden; position:relative; padding-bottom:.35rem; }
    #wo-why .desc::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3rem;
      background:linear-gradient(180deg, rgba(16,32,51,0), rgba(16,32,51,.98)); }
    #wo-why .desc.is-open{ max-height:none } #wo-why .desc.is-open::after{ content:none }
    #wo-why .show-more{ margin-top:14px; background:transparent; border:0; color:#ffe38f; font-weight:800;
      display:inline-flex; gap:8px; align-items:center; cursor:pointer }
    #wo-why .show-more i{ transition:transform .25s ease }
    #wo-why .show-more[aria-expanded="true"] i{ transform:rotate(180deg) }
    #wo-why .tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px }
    #wo-why .tag{ font-size:.85rem; color:#0b1220; font-weight:800; background:linear-gradient(180deg,#f5c84b,#ffc94f);
      padding:8px 12px; border-radius:999px; box-shadow:0 10px 24px rgba(245,200,75,.2) }

    /* Right: VIDEO panel */
    #wo-why .shot-video{
      position:relative; aspect-ratio:16/10; border-radius:16px; overflow:hidden;
      background: var(--panel); border:1px solid rgba(255,255,255,.12);
      box-shadow: 0 18px 46px rgba(0,0,0,.55);
    }
    #wo-why .shot-video .bar{
      height:34px; display:flex; align-items:center; gap:8px; padding:0 12px;
      background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));
      border-bottom:1px solid rgba(255,255,255,.08); position:relative; z-index:2;
    }
    #wo-why .dot{ width:10px;height:10px;border-radius:50% }
    #wo-why .dot.r{ background:#ff5f57 } .dot.y{ background:#febc2e } .dot.g{ background:#28c840 }
    #wo-why .url{ margin-left:auto; font-size:.82rem; color:#cfe0ff; opacity:.9;
      background:rgba(255,255,255,.05); padding:4px 10px; border-radius:8px; border:1px solid rgba(255,255,255,.08) }

    #wo-why .vid-wrap{ position:absolute; inset:34px 0 0 0 } /* below the “browser” bar */
    #wo-why video{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.05) contrast(1.02) }
    /* subtle scan glow */
    #wo-why .scan{ position:absolute; inset:34px 0 0 0;
      background:linear-gradient(0deg, transparent, rgba(255,255,255,.06), transparent);
      transform:translateY(-100%); animation:scan 6s ease-in-out infinite; pointer-events:none }
    @keyframes scan{ 0%{transform:translateY(-100%)} 50%{transform:translateY(0%)} 100%{transform:translateY(100%)} }

    /* Controls (sound/pause) */
    #wo-why .v-ctrl{ position:absolute; right:10px; bottom:10px; display:flex; gap:8px; z-index:3 }
    #wo-why .v-btn{
      background: rgba(0,0,0,.45); color:#fff; border:1px solid rgba(255,255,255,.2);
      padding:6px 10px; font-size:.8rem; border-radius:10px; cursor:pointer;
      backdrop-filter: blur(6px); transition: background .2s, border-color .2s, transform .2s;
    }
    #wo-why .v-btn:hover{ background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.45); transform:translateY(-1px) }
/* help */

/* GET STARED WITH OCTANE */
  /* ===== Theme ===== */
:root{
  --navy:#0b1220; --ink:#eaf1ff; --muted:#b6c2d9;
  --blue:#1e72e6; --blue-2:#0a4a9a; --gold:#ffc107;
}

/* ===== Hero base ===== */
.wo-hero{
  position:relative; min-height: 78vh;
  display:grid; place-items:center;
  overflow:hidden; background:var(--navy); color:var(--ink);
}

/* Background video fully covers */
.wo-hero__bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter: saturate(1.05) contrast(1.05);
}

/* Readability scrim (angled / vignette blend) */
.wo-hero__scrim{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 600px at 80% 20%, rgba(255,193,7,.12), transparent 60%),
    linear-gradient(180deg, #071020cc 0%, #081429cc 60%, #081429e6 100%),
    linear-gradient(135deg, #0a4a9a55 0%, transparent 55%);
  mix-blend-mode:multiply;
}

/* Center stack */
.wo-hero__inner{
  position:relative; z-index:2;
  width:min(1100px, 92%);
  text-align:center;
  padding: clamp(28px,4vw,48px) 0;
  animation: rise .6s ease both;
}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}

.wo-hero__title{
  margin:0 0 12px; line-height:1.08;
  font-size: clamp(28px, 2.8vw, 54px); font-weight:900; letter-spacing:.2px;
}
.wo-hero__title .accent{
  display:inline-block; padding:.06em .3em; border-radius:10px;
  background:linear-gradient(180deg,#121d36,#0a4a9a); box-shadow:0 10px 24px #0a4a9a55;
  color:#fff;
}

.wo-hero__lede{
  margin:8px auto 18px; max-width: 70ch;
  color:var(--muted); line-height:1.85; font-size: clamp(15px,1.05vw,18px);
  text-wrap:balance;
}

/* Badges */
.wo-hero__badges{display:flex; justify-content:center; flex-wrap:wrap; gap:10px 12px; margin-bottom:14px;}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 12px; border-radius:999px; font-weight:700; font-size:.93rem;
  background:#0e1b2f; border:1px solid #284066; color:#cfe4ff;
  box-shadow:0 8px 18px rgba(10,74,154,.18);
}
.badge i{ color:#7cc3ff; }

/* CTAs */
.wo-hero__ctas{display:flex; justify-content:center; flex-wrap:wrap; gap:12px;}
.cta{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border-radius:12px; font-weight:800; text-decoration:none; color:#fff;
  background:linear-gradient(180deg,#121d36,#0a4a9a);
  border:1px solid #2b5fb0; box-shadow:0 12px 26px rgba(30,114,230,.28);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cta:hover{ transform:translateY(-2px); filter:saturate(1.08); box-shadow:0 16px 34px rgba(30,114,230,.36); }
.cta i{ font-size:1rem; }

.cta.ghost{ background:#13233b; border-color:#26466f; color:#d8e8ff; }
.cta.gold{
  background:linear-gradient(180deg,#ffd44a,#ffb300); border-color:#e8a800; color:#1a1200;
  box-shadow:0 12px 26px rgba(255,193,7,.3);
}

/* Mobile tweaks */
@media (max-width: 640px){
  .wo-hero{ min-height: 86vh; }
  .wo-hero__lede{ max-width: 90ch; }
}

/* GET STARTED */
/* heelp new se */

/* faq */
/* ========= Theme ========= */
#wo-faq{
  --bg:#0b1220;
  --panel:#0e1e33;
  --panel-2:#0a1930;
  --ink:#eaf1ff;
  --muted:#b6c2d9;
  --gold:#ffc107;
  --blue:#1e72e6;
  --stroke:rgba(255,255,255,.08);
  background:
    radial-gradient(900px 420px at 75% 10%, rgba(255,193,7,.10), transparent 60%),
    radial-gradient(800px 420px at 10% 90%, rgba(30,114,230,.10), transparent 60%),
    var(--bg);
  color:var(--ink);
  padding: clamp(48px,5vw,80px) 0;
}

/* Header */
#wo-faq .faq-head{
  width:min(1200px,92%);
  margin-inline:auto;
  margin-bottom:clamp(18px,2.2vw,28px);
}
#wo-faq h2{
  margin:0 0 6px; line-height:1.1; font-weight:900;
  font-size:clamp(28px,2.8vw,46px);
}
#wo-faq h2 .accent{
  padding:.08em .3em; border-radius:8px;
  background:linear-gradient(180deg,#ffd54f,#ffb300);
  color:#1a1200;
}
#wo-faq .faq-head p{ color:var(--muted); margin:0 }

/* List */
#wo-faq .faq-list{
  width:min(1200px,92%);
  margin-inline:auto;
  display:grid; gap:12px;
}

/* Item card */
#wo-faq .faq-item{
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border:1px solid var(--stroke);
  border-radius:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.35);
  overflow:hidden;
}

/* Question button */
#wo-faq .faq-q{
  width:100%; display:flex; align-items:center; gap:14px;
  padding:18px 18px; cursor:pointer; background:transparent; color:inherit; border:0;
  text-align:left; font-weight:800; letter-spacing:.2px;
}

/* Left icon (perfectly centered) */
#wo-faq .faq-q .ico{
  width:34px; height:34px; flex:0 0 34px;
  display:flex; align-items:center; justify-content:center;
  border-radius:10px;
  background:linear-gradient(180deg,#122a4d,#0d1f39);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
  color:#9fd0ff;
}

/* Label grows, chevron sticks to right */
#wo-faq .faq-q .label{ flex:1; line-height:1.5 }
#wo-faq .faq-q .chev{ color:#ffb300; opacity:.9; transition: transform .25s ease }

/* Hover / focus */
#wo-faq .faq-q:hover{
  background:linear-gradient(180deg,#12223a88,#0e1c33aa);
}
#wo-faq .faq-q:focus-visible{
  outline:2px solid #ffb300; outline-offset:2px; border-radius:14px;
}

/* Expanded state */
#wo-faq .faq-q[aria-expanded="true"] .chev{ transform: rotate(180deg) }

/* Answer */
#wo-faq .faq-a{
  color:var(--muted);
  padding:14px 18px 18px 66px;   /* was 0 18px 18px 66px */
  line-height:1.8; font-size:1rem;
  border-top:1px solid var(--stroke);
  background:linear-gradient(180deg,#0f213a,#0d1c31);

}

/* Small screens */
@media (max-width: 576px){
  #wo-faq .faq-q{ padding:16px 14px }
  #wo-faq .faq-a{ padding:0 14px 14px 60px }
}

/* mobile view */
/* FAQ — mobile tweaks */
@media (max-width: 768px){
  /* container & alignment */
  #wo-faq .faq-head,
  #wo-faq .faq-list{ width:92%; margin-inline:auto; }

  #wo-faq .faq-head{ text-align:left; }

  #wo-faq .faq-head h2{
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.28;              /* tighter than desktop se thoda zyada space */
    letter-spacing: .2px;
    margin: 0 0 .35rem;
  }

  /* yellow badge (Frequently) ko neat left line par lao */
  #wo-faq .faq-head .accent{
    display:inline-block;            /* wrap nahi toota ga */
    margin-right: 6px;
    padding: .12em .5em;
    border-radius: 10px;
  }

  #wo-faq .faq-head p{
    margin-top: .5rem;
    line-height: 1.6;                /* subhead spacing */
  }

  /* Q/A spacing so “chipakna” na lage */
  #wo-faq .faq-q{ padding: 14px 14px; }
  #wo-faq .faq-a{
    padding: 12px 14px 16px 58px;    /* top space added */
    line-height: 1.75;
  }
  #wo-faq .faq-a p{ margin: 6px 0 0; } /* first line ke upar halka gap */
}

/* faq */
    /* SCHEDULE  */
       .schedule-section {
            background-color:black;
            color: #2d3748;
            padding: 2rem 0;
        }

        .text-primary {
            color: #3b82f6 !important;
        }

        .custom-input {
            border: 1px solid #ced4da;
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
            width: 100%;
            max-width: 16rem;
        }

        .custom-input:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
            outline: none;
        }

        .custom-btn {
            background-color: #f7c743;
            color: black;
            border: none;
            border-radius: 0.5rem;
            padding: 0.75rem 2rem;
            width: 100%;
            max-width: 8rem;
            transition: background-color 0.3s;
        }

        .custom-btn:hover {
            background-color: #f7c743;
        }

        @media (max-width: 767.98px) {
            .custom-input, .custom-btn {
                max-width: 100%;
            }
        }
/* help */

/* faq */

:root{
    --navy:#0b1220;
    --navy-2:#132137;
    --ink:#eaf1ff;
    --muted:#a7b7d6;
    --gold:#ffc107;
    --gold-soft:#ffe079;
    --card: rgba(255,255,255,.04);
    --stroke: rgba(255,255,255,.10);
  }

  .faq3d{position:relative;background:radial-gradient(900px 500px at 80% 10%, rgba(255,193,7,.18), transparent 60%), var(--navy); color:var(--ink); padding: clamp(40px,5vw,80px) 0; overflow: clip;}
  .faq3d-wrap{width:min(1200px,92%);margin-inline:auto;display:grid;grid-template-columns: 1.1fr 1fr;gap:clamp(20px,4vw,56px);align-items:center}
  .faq3d-hero{position:relative;aspect-ratio: 16/10;min-height:320px;border-radius:22px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid var(--stroke);box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 20px 60px rgba(0,0,0,.45)}
  #faq3dCanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
  .faq3d-title{position:relative;z-index:2;display:grid;place-items:center;height:100%;text-align:center;padding:18px}
  .faq3d-title h2{font-weight:900;font-size:clamp(24px,2.2vw,40px);letter-spacing:.3px;margin:0 0 8px}
  .faq3d-title .accent{color:var(--gold)}
  .faq3d-title p{margin:0;color:var(--muted)}

  /* List / cards */
  .faq3d-list{display:grid;gap:14px}
  .faq3d-item{background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid var(--stroke);border-radius:16px;overflow:hidden;box-shadow:0 14px 32px rgba(0,0,0,.35);transform-style:preserve-3d;transition:transform .25s ease, box-shadow .25s ease}
  .faq3d-item:hover{transform:translateY(-3px) rotateX(2deg);box-shadow:0 18px 46px rgba(255,193,7,.18)}
  .faq3d-q{all:unset;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;width:100%;padding:16px 18px;cursor:pointer}
  .q-icon{width:34px;height:34px;border-radius:999px;background:radial-gradient(120px 60px at 30% 20%, var(--gold), var(--gold-soft));display:grid;place-items:center;color:#1a1300;font-weight:900;box-shadow:0 8px 22px rgba(255,193,7,.35)}
  .q-text{font-weight:700}
  .q-caret{width:18px;height:18px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg);transition:transform .25s ease, opacity .25s}
  .faq3d-a{padding:0 18px 16px; color:var(--muted); line-height:1.75}
  .faq3d-a p{margin:0}
  .faq3d-item[open] .q-caret, .faq3d-q[aria-expanded="true"] .q-caret{transform:rotate(135deg)}
  /* answer reveal animation (height auto trick) */
  .faq3d-a[data-animating]{overflow:hidden}
  @media (max-width: 980px){ .faq3d-wrap{grid-template-columns:1fr} .faq3d-hero{order:-1} }
/* faq */

        /* FOOTER */
/* ===== FOOTER (3D enhanced) ===== */
.footer{
  background: radial-gradient(1200px 600px at 10% -20%, rgba(241,180,24,.22), transparent 60%),
              linear-gradient(145deg,#0d1832,#112046 40%, #0d1832 60%);
  color:#fff; font-size:.95rem; width:100%; margin-top:auto; position:relative; z-index:2;
  box-shadow:0 -10px 30px rgba(0,0,0,.35);
  perspective: 1000px; /* for 3D tilt children */
}
.footer::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 30%);
}

.footer-container{max-width:1200px;margin:0 auto;padding:2.25rem 1rem;}
.footer-grid{
  display:grid; gap:1.5rem;
  grid-template-columns:1fr; align-items:start;
}
@media (min-width:1024px){
  /* brand + 3 columns (Services, Quick Links, Locations) */
  .footer-grid{grid-template-columns:2fr 1fr 1fr 1fr;}
}

.footer-logo{display:flex;gap:1rem;align-items:center;margin-bottom:1rem;}
.logo-box{
  background:#000; border:1px solid rgba(255,255,255,.14);
  padding:.55rem .9rem; border-radius:.8rem; display:inline-flex; align-items:center;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.35), 0 14px 28px rgba(0,0,0,.35);
  transform-style: preserve-3d;
}
.logo-box img{height:42px; width:auto; transform: translateZ(12px);}

.footer-description{line-height:1.75;opacity:.95;max-width:50ch}

/* ---- Google Review card (glass + 3D lift) ---- */
.google-review{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.14);
  border-radius:.9rem; padding:1rem; max-width:520px; margin-top:1rem;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.35);
  backdrop-filter:blur(6px);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  transform-style: preserve-3d;
}
.google-review:hover{ transform:translateY(-6px) translateZ(10px) rotateX(1deg);
  box-shadow:0 16px 36px rgba(0,0,0,.45);
  border-color:rgba(255,215,106,.35);
}
.review-content{display:flex;align-items:center;gap:1rem}
.g-badge{
  width:48px;height:48px;border-radius:50%;
  display:grid;place-items:center;flex-shrink:0;
  background: radial-gradient(circle at 30% 30%, #fff 0 35%, #e7e7e7 70%, #d3d3d3 100%);
  color:#DB4437; box-shadow:0 6px 14px rgba(0,0,0,.25), inset 0 2px 6px rgba(0,0,0,.25);
  transform: translateZ(14px);
}
.g-badge i{font-size:1.25rem;}
.review-stars{display:flex;gap:.15rem;margin:-.25rem 0 .25rem}
.review-stars i{color:#F1B418;}

/* ---- Columns ---- */
.footer-column{padding:0 .5rem}
/* .footer-column h3{
  color:#ffd76a; text-transform:uppercase; letter-spacing:.06em; font-size:1rem; margin-bottom:.9rem;
  position:relative; padding-left:1rem; text-shadow:0 2px 6px rgba(0,0,0,.35);
}
.footer-column h3:before{
  content:""; position:absolute; left:0; top:.15rem; bottom:.15rem; width:3px; border-radius:2px;
  background:linear-gradient(#ffd76a,#8b6a11);
}
.footer-column ul{list-style:none;margin:0;padding:0}
.footer-column li{margin:.55rem 0} */
/* unify heading box + center the golden bar perfectly */
.footer-column h3{
  margin:0 0 .9rem;                 /* remove inconsistent top margins */
  line-height:1.2;
  padding-left:14px;                 /* space for the bar */
  color:#ffd76a;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:1rem;
  position:relative;
}

.footer-column h3::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  height:1.2em;                      /* fixed height, matches line-height */
  width:3px;
  transform:translateY(-50%);        /* centers the bar vertically */
  border-radius:2px;
  background:linear-gradient(#ffd76a,#8b6a11);
}

/* keep all lists aligned from the same left edge */
.footer-column{ padding:4px .5rem 0; } /* tiny top nudge so rows line up */
.footer-column ul{ margin:0; padding:0; list-style:none; }
.footer-column li{ margin:.55rem 0; }

.footer-column a{
  color:#ffffffd4; text-decoration:none; transition:.22s ease; display:inline-block; position:relative;
}
.footer-column a:after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:#ffd76a; transition:right .22s ease;
}
.footer-column a:hover{ color:#ffd76a; transform:translateX(3px) translateZ(8px); }
.footer-column a:hover:after{ right:0; }

/* ---- Bottom Row ---- */
.footer-bottom{
  margin-top:2rem; display:grid; gap:1rem; align-items:center;
  grid-template-columns:1fr; border-top:1px solid rgba(255,255,255,.08); padding-top:1.25rem;
}
@media (min-width:768px){
  .footer-bottom{grid-template-columns:1fr auto auto;}
}

.social-icons{display:flex;gap:.6rem; flex-wrap:wrap}
.social-icons a{
  width:42px;height:42px;border-radius:999px; display:grid;place-items:center;
  background:rgba(255, 255, 255, 0.06); border:1px solid rgba(255,255,255,.12);
  color:#ffffffd4; transition:.2s ease; box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.social-icons a:hover{
  color:#0e1a35; background:#f7c333 ; transform:translateY(-3px) translateZ(10px);
  box-shadow:0 10px 18px rgba(0,0,0,.35);
}

.cta-buttons{display:flex;gap:.6rem;flex-wrap:wrap}
.cta-btn{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem; border-radius:.7rem;
  background:linear-gradient(145deg,#15254a,#27468c); color:#fff; text-decoration:none;
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 6px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08);
  transition:.2s ease;
}
.cta-btn:hover{ transform:translateY(-3px); background:#ffd76a; color:#0e1a35; }
.cta-btn i{font-size:1rem}

.divider{border-top:1px solid rgba(255,255,255,.12); margin:1rem 0}
.copyright{font-size:.85rem;
     color:#ffffffc4;
    text-align:center;
}

/* responsive fine-tune */
@media (max-width:480px){
  .g-badge{width:42px;height:42px}
  .footer-container{padding:1.75rem 1rem}
}

/* footer */


        /* tabs */

        /* schedule/

/* sucess */
.success-screen{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:rgba(15,23,42,.6); /* dark backdrop */
  backdrop-filter: blur(2px);
}
.success-screen.d-none{ display:none; }

.success-card{
  background:#fff; color:#111827;
  width:min(92vw,520px);
  border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.25);
  padding:28px 24px;
  text-align:center;
}
.icon-wrap{
  width:68px; height:68px; margin:0 auto 12px;
  border-radius:50%;
  display:grid; place-items:center;
  font-size:34px; font-weight:700;
  background:#d1fae5; color:#065f46; /* green tick vibe */
}
.title{ margin:6px 0 6px; font-weight:700 }
.sub{ margin:0; color:#374151 }


/* whatsapp  */
/* WhatsApp Widget */
:root {
  --wa-green: #25D366;
  --wa-green-dark: #1eb154;
  --wa-white: #fff;
  --wa-z: 10050;
  --wa-size: 64px;
  --wa-icon-size: 30px;
  --wa-shadow: 0 12px 28px rgba(0, 0, 0, .16), 0 2px 8px rgba(0, 0, 0, .1);
}

.wa-widget {
  position: fixed;
  right: calc(18px + env(safe-area-inset-right, 0));
  bottom: calc(18px + env(safe-area-inset-bottom, 0));
  display: flex;
  align-items: flex-end;
  z-index: var(--wa-z);
}

/* Round icon-only button */
.whatsapp-fab {
  width: var(--wa-size);
  height: var(--wa-size);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--wa-green);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--wa-shadow);
  transition: transform .15s ease, background .15s ease;
  position: relative;
}

.whatsapp-fab i {
  font-size: var(--wa-icon-size);
  line-height: 1;
}

.whatsapp-fab::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, .35);
  opacity: .35;
}

.whatsapp-fab:hover, .whatsapp-fab:focus-visible {
  background: var(--wa-green-dark);
  transform: translateY(-1px);
  outline: none;
}

/* Hover card */
.wa-card {
  position: absolute;
  right: 0;
  bottom: calc(var(--wa-size) + 16px);
  width: 320px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--wa-shadow);
  opacity: 0;
  transform: translateY(8px) scale(.98);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

.wa-card::after {
  content: "";
  position: absolute;
  bottom: -10px;
  right: 24px;
  width: 20px;
  height: 20px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: 2px 2px 12px rgba(0, 0, 0, .08);
}

.wa-card-header {
  background: var(--wa-green);
  color: #fff;
  font-weight: 700;
  padding: 14px 18px;
}

.wa-card-body {
  padding: 16px 18px 20px;
  color: #2b2b2b;
}

.wa-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--wa-green);
  color: #fff;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}

.wa-cta::before {
  content: "\f232";
  font-family: "FontAwesome";
  font-size: 16px;
}

.wa-cta:hover, .wa-cta:focus-visible {
  background: var(--wa-green-dark);
  transform: translateY(-1px);
  outline: none;
}

/* Reveal card only while hovered/focused (desktop) */
@media (hover: hover) {
  .wa-widget.open .wa-card {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
}

/* Touch: no card, direct chat */
@media (hover: none) {
  .wa-card {
    display: none;
  }
}

/* Lock WhatsApp icon/text to WHITE */
.whatsapp-fab,
.whatsapp-fab:link,
.whatsapp-fab:visited,
.whatsapp-fab:hover,
.whatsapp-fab:focus,
.whatsapp-fab:focus-visible,
.whatsapp-fab:active {
  color: #fff !important;
  -webkit-tap-highlight-color: transparent;
}

.whatsapp-fab i {
  color: inherit !important;
}

.wa-cta,
.wa-cta:hover,
.wa-cta:focus,
.wa-cta:active {
  color: #fff !important;
}


/* last thing inshahAllah */