:root {
      --teal: #00b5b5;
      --teal-dark: #008f8f;
      --teal-light: #e0f7f7;
      --navy: #0d1f3c;
      --orange: #ff6b00;
      --gray-light: #f4f7fa;
      --gray-text: #6b7a8d;
      --white: #ffffff;
    }

    * { box-sizing: border-box; }
    body {
    font-family: 'Roboto', sans-serif;;
      color: var(--navy);
      overflow-x: hidden;
    }
    .feature-icon img {
    width:75px;
}
.feature-icon {
    width: 70px !important;
    height: 70px ! important;
    line-height: 65px !important;
    background: var(--theme-color) !important;
    text-align: center !important;
    font-size: 40px !important;
    color: var(--color-white) !important;
    border-radius: 50px 50px 50px 0 !important;
    background: #f3f3f3 !important;
    box-shadow: 5px 4px 8px -7px #131212;
}
.feature-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    position: relative;
    border-radius: 30px;
    transition: var(--transition);
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}

    /* ── TOPBAR ── */
    .topbar {
      background: var(--navy);
      color: #aac0d8;
      font-size: 0.78rem;
      padding: 6px 0;
    }
    .topbar a { color: #aac0d8; text-decoration: none; }
    .topbar a:hover { color: var(--teal); }

    /* ── HEADER ── */
    .site-header {
      background: #fff;
      border-bottom: 1px solid #e8eef5;
      position: sticky;
      top: 0;
      z-index: 1000;
      box-shadow: 0 2px 12px rgba(0,0,0,.06);
    }
    .logo-wrap { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
    .logo-box {
     font-family: 'Poppins', sans-serif;
      font-size: 2.2rem;
      font-weight: 900;
      color: var(--navy);
      letter-spacing: -2px;
      padding: 0 8px;
      line-height: 1;
    }
    .site-title-tagline {
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-white);
    position: relative;
    background: var(--theme-color);
    border-radius: 50px;
    padding: 5px 10px 5px 2px;
}
.site-title {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 40px;
    color: var(--color-dark);
    margin-top: 8px;
    margin-bottom: 0;
}
.site-title-tagline i {
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: var(--color-white);
    color: var(--theme-color);
    text-align: center;
    border-radius: 50px;
}
.feature-item {
    display: flex;
    gap: 15px;
    padding: 20px;
    position: relative;
    border-radius: 30px;
    transition: var(--transition);
    box-shadow: 0 0 40px 5px rgb(0 0 0 / 5%);
}
.feature-icon {
    width: 70px;
    height: 70px;
    line-height: 65px;
    background: var(--theme-color);
    text-align: center;
    font-size: 40px;
    color: var(--color-white);
    border-radius: 50px 50px 50px 0;
}
.feature-img img {
    border-radius: 100px;
}
.site-title {
    font-weight: 700;
    text-transform: capitalize;
    font-size: 40px;
    color: var(--color-dark);
    margin-top: 8px;
    margin-bottom: 0;
}
.site-title span {
    color: var(--theme-color);
}
.site-title-tagline i {
    font-size: 16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: var(--color-white);
    color: var(--theme-color);
    text-align: center;
    border-radius: 50px;
}
.theme-btn {
    font-size: 16px;
    color: #fff;
    padding: 13px 20px;
    transition: all 0.5s;
    text-transform: capitalize;
    position: relative;
    border-radius: 18px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    border: none;
    background: #24BDC7;
    box-shadow: 0 3px 24px rgb(0 0 0 / 12%);
    z-index: 1;
    text-decoration: unset;
}
    .logo-text {
      font-size: 1.19rem;
      font-weight: 700;
      color: var(--navy);
      text-transform: uppercase;
      letter-spacing: 1px;
      line-height: 1.2;
      font-weight: bold;
    }
    .call-btn {
      background: var(--orange);
      color: #fff;
      font-weight: 700;
      font-size: 1rem;
      border: none;
      border-radius: 6px;
      padding: 10px 22px;
      letter-spacing: .5px;
      text-decoration: none;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: background .2s;
    }
    .call-btn:hover { background: #e05a00; color: #fff; }

    /* ── NAV ── */
    .main-nav { background: #fff; border-top: 1px solid #edf2f7; }
    .main-nav .navbar-nav .nav-link {
      color: var(--navy);
      font-weight: 500;
      font-size: .9rem;
      padding: 12px 10px;
      transition: color .2s;
    }
    .img-fluid {
    max-width: 96%;
    height: auto;
}
    i.fa.fa-phone.me-2, i.fa.fa-envelope.me-2 {
    float: left;
}
    .main-nav .navbar-nav .nav-link:hover,
    .main-nav .navbar-nav .nav-link.active { color: var(--teal); }
    .main-nav .dropdown-menu { border: none; box-shadow: 0 8px 30px rgba(0,0,0,.1); border-radius: 8px; }
    .main-nav .dropdown-item { font-size: .88rem; padding: 8px 18px; }
    .main-nav .dropdown-item:hover { background: var(--teal-light); color: var(--teal); }

    /* ── HERO ── */
    .hero {
      background: linear-gradient(135deg, #0d1f3c 0%, #1a3a5c 60%, #00b5b5 100%);
      color: #fff;
      padding: 80px 0 60px;
      position: relative;
      overflow: hidden;
    }
    .hero::before {
      content: '';
      position: absolute; inset: 0;
      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2300b5b5' fill-opacity='0.07'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }
    .hero-badge {
      background: var(--teal);
      color: #fff;
      font-size: .75rem;
      font-weight: 700;
      letter-spacing: 2px;
      text-transform: uppercase;
      padding: 5px 14px;
      border-radius: 30px;
      display: inline-block;
      margin-bottom: 16px;
    }
    .hero h1 {
       font-family: 'Poppins', sans-serif;
      font-size: 3.4rem;
      font-weight: 900;
      line-height: 1.1;
      margin-bottom: 20px;
    }
    .hero h1 span { color: var(--teal); }
    .hero p { color: #b0c8e0; font-size: 1.05rem; max-width: 500px; margin-bottom: 30px; }
    .hero-img-wrap {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 30px 80px rgba(0,0,0,.4);
      aspect-ratio: 4/3;
      background: #1a3a5c;
    }
    .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; }
    .hero-img-placeholder {
      width: 100%; height: 100%;
      background: linear-gradient(135deg, #1a3a5c, #00b5b5);
      display: flex; align-items: center; justify-content: center;
      font-size: 5rem; color: rgba(255,255,255,.3);
    }

    /* ── FEATURE CARDS (right column) ── */
    .feature-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 14px;
      padding: 18px 20px;
      display: flex;
      align-items: flex-start;
      gap: 16px;
      transition: background .2s;
      margin-bottom: 14px;
    }
    .feature-card:hover { background: rgba(255,255,255,.13); }
    .feature-icon {
      width: 52px; height: 52px; flex-shrink: 0;
      background: var(--teal);
      border-radius: 12px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.3rem; color: #fff;
    }
    .feature-card h6 { font-weight: 700; color: #fff; margin-bottom: 4px; font-size: .95rem; }
    .feature-card p { color: #90b0cc; font-size: .82rem; margin: 0; }

    /* ── STATS BAR ── */
    .stats-bar {
      background: var(--teal);
      color: #fff;
      padding: 28px 0;
    }
    .stat-item { text-align: center; }
    .stat-item .number {
  font-family: 'Poppins', sans-serif;
      font-size: 2.5rem;
      font-weight: 900;
      line-height: 1;
    }
    .stat-item .label { font-size: .82rem; opacity: .85; margin-top: 4px; }
    .stat-divider { border-left: 1px solid rgba(255,255,255,.3); }

    /* ── FEATURES SECTION ── */
    .section-badge {
      display: inline-flex; align-items: center; gap: 8px;
      background: var(--teal-light);
      color: var(--teal);
      font-weight: 700;
      font-size: .78rem;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      padding: 6px 14px;
      border-radius: 30px;
      margin-bottom: 14px;
    }
    .section-title {
      font-family: 'Poppins', sans-serif;
      font-size: 2.4rem;
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 16px;
    }
    .section-title span { color: var(--teal); }

    .service-card {
      border: none;
      border-radius: 16px;
      padding: 30px;
      background: var(--white);
      box-shadow: 0 4px 24px rgba(0,0,0,.06);
      transition: transform .25s, box-shadow .25s;
      height: 100%;
    }
    .service-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,.1); }
    .service-icon {
      width: 60px; height: 60px;
      background: var(--teal-light);
      border-radius: 14px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.5rem;
      color: var(--teal);
      margin-bottom: 18px;
    }
    .service-card h5 { font-weight: 700; font-size: 1.05rem; margin-bottom: 10px; }
    .service-card p { color: #000000; font-size: .88rem; line-height: 1.6; }
    .logo-box img {
    width: 113px;
}

    /* ── WHY CHOOSE US ── */
    .why-section { background: var(--gray-light); }
    .why-item { display: flex; gap: 16px; margin-bottom: 28px; }
    .why-num {
      width: 42px; height: 42px; flex-shrink: 0;
      background: var(--teal);
      color: #fff;
      font-weight: 900;
      font-size: 1rem;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
    }
    .why-item h6 { font-weight: 700; margin-bottom: 4px; }
    .why-item p { color: var(--gray-text); font-size: .85rem; margin: 0; }

    .big-image-wrap {
      border-radius: 20px;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,.12);
    }
    .big-image-placeholder {
      aspect-ratio: 4/3;
      background: linear-gradient(135deg, #d0f0f0, #00b5b5);
      display: flex; align-items: center; justify-content: center;
      font-size: 6rem; color: rgba(255,255,255,.5);
    }

    /* ── PROCESS ── */
    .process-step {
      text-align: center;
      padding: 20px;
      position: relative;
    }
    .process-step::after {
      content: '→';
      position: absolute;
      right: -12px; top: 28px;
      font-size: 1.4rem;
      color: var(--teal);
    }
    .process-step:last-child::after { display: none; }
    .step-circle {
      width: 64px; height: 64px;
      background: var(--teal);
      color: #fff;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem;
      margin: 0 auto 16px;
    }
    .process-step h6 { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
    .process-step p { color: var(--gray-text); font-size: .82rem; }

    /* ── TESTIMONIALS ── */
    .testimonials { background: var(--navy); }
    .testimonial-card {
      background: rgba(255,255,255,.07);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 16px;
      padding: 28px;
    }
    .testimonial-card .stars { color: #ffc107; font-size: .9rem; margin-bottom: 12px; }
    .testimonial-card p { color: #b0c8e0; font-size: .9rem; line-height: 1.7; }
    .testimonial-card .author { color: #fff; font-weight: 700; margin-top: 14px; font-size: .9rem; }
    .testimonial-card .role { color: var(--teal); font-size: .8rem; }

    /* ── CTA ── */
    .cta-section {
      background: linear-gradient(135deg, var(--teal-dark), var(--teal));
      color: #fff;
      padding: 80px 0;
      text-align: center;
    }
    .cta-section h2 {
      font-family: 'Poppins', sans-serif;
      font-size: 2.5rem;
      font-weight: 900;
      margin-bottom: 16px;
    }
    .cta-section p { opacity: .85; font-size: 1.05rem; margin-bottom: 32px; }
    .btn-white {
      background: #fff;
      color: var(--teal-dark);
      font-weight: 700;
      padding: 14px 36px;
      border-radius: 8px;
      font-size: 1rem;
      text-decoration: none;
      transition: all .2s;
    }
    .btn-white:hover { background: var(--navy); color: #fff; }
    .btn-outline-white {
      border: 2px solid rgba(255,255,255,.6);
      color: #fff;
      font-weight: 700;
      padding: 14px 36px;
      border-radius: 8px;
      font-size: 1rem;
      text-decoration: none;
      transition: all .2s;
    }
    .btn-outline-white:hover { background: rgba(255,255,255,.15); color: #fff; }

    /* ── FOOTER ── */
footer {
    background: #f8f8f8;
    color: #000000;
    padding: 60px 0 30px;
}
   footer h6 {
    color: #000000;
    font-weight: 700;
    margin-bottom: 18px;
    font-size: .95rem;
    letter-spacing: .5px;
}
    footer a { color: #000; text-decoration: none; font-size: .88rem; display: block; margin-bottom: 8px; }
    footer a:hover { color: var(--teal); }
    .footer-logo {  font-family: 'Poppins', sans-serif; font-size: 1.6rem; font-weight: 900; color: #fff; margin-bottom: 14px; }
    .footer-divider { border-color: rgba(255,255,255,.08); margin: 40px 0 20px; }
    .footer-bottom { font-size: .82rem; }
    .social-btn {
      width: 36px; height: 36px;
      background: rgba(255,255,255,.07);
      border-radius: 8px;
      display: inline-flex; align-items: center; justify-content: center;
      color: #7a96b2;
      text-decoration: none;
      font-size: .9rem;
      transition: all .2s;
      margin-right: 6px;
    }
    .social-btn:hover { background: var(--teal); color: #fff; }

    /* ── SCROLL-TO-TOP ── */
    #scrollTop {
      position: fixed; bottom: 28px; right: 28px;
      width: 44px; height: 44px;
      background: var(--teal);
      color: #fff;
      border: none;
      border-radius: 50%;
      font-size: 1rem;
      cursor: pointer;
      opacity: 0;
      transform: translateY(20px);
      transition: all .3s;
      z-index: 999;
    }
    #scrollTop.show { opacity: 1; transform: translateY(0); }

    /* ── BTN TEAL ── */
    .btn-teal {
      background: var(--teal);
      color: #fff;
      font-weight: 600;
      padding: 12px 28px;
      border-radius: 8px;
      border: none;
      font-size: .95rem;
      text-decoration: none;
      display: inline-flex; align-items: center; gap: 8px;
      transition: background .2s;
    }
    .btn-teal:hover { background: var(--teal-dark); color: #fff; }

    /* ── KEYWORDS STRIP ── */
    .keywords-strip { border-top: 1px solid #e8eef5; border-bottom: 1px solid #e8eef5; padding: 16px 0; }
    .kw-item { display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
    .kw-label { color: var(--orange); font-weight: 700; font-size: .82rem; white-space: nowrap; }
    .kw-text { font-weight: 700; font-size: .85rem; color: var(--navy); }

    /* Animations */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    .anim { animation: fadeUp .6s ease both; }
    .anim-1 { animation-delay: .1s; }
    .anim-2 { animation-delay: .22s; }
    .anim-3 { animation-delay: .34s; }
    .anim-4 { animation-delay: .46s; }