:root{
    --paper:#FBFCFE;
    --panel:#EEF3FA;
    --card:#FFFFFF;
    --navy:#0B2545;
    --blue:#1D6FB8;
    --sky:#4FA8E0;
    --gold:#da1a13;
    --gold-soft:#F4E4C8;
    --red:#C8433D;
    --ink:#10233F;
    --muted:#5A6E88;
    --line:#DEE7F2;
    --radius:14px;
    --shadow: 0 24px 50px -24px rgba(11,37,69,0.18);
    --shadow-soft: 0 12px 28px -16px rgba(11,37,69,0.14);
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family: 'Poppins', sans-serif;
    background:var(--paper);
    color:var(--ink);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  ul{list-style:none;}
  .mono{font-family: 'Poppins', sans-serif;}
  .display{font-family: 'Poppins', sans-serif;}
  .wrap{max-width:1180px; margin:0 auto; padding:0 28px;}
  .eyebrow{
    font-family: 'Poppins', sans-serif;
    font-size:12.5px;
    letter-spacing:.16em;
    font-weight:600;
    color:var(--gold);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:26px; height:1.5px; background:var(--gold);
    display:inline-block;
  }
  section{position:relative;}
  .reveal{opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:translateY(0);}

  /* ---------- HEADER ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    background:rgba(251,252,254,0.0);
    transition: background .35s ease, box-shadow .35s ease, padding .35s ease, border-color .35s ease;
    padding:24px 0;
    border-bottom:1px solid transparent;
  }
  header.scrolled{
    background:rgba(251,252,254,0.92);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px -18px rgba(11,37,69,0.25);
    padding:14px 0;
    border-bottom:1px solid var(--line);
  }
  .nav-row{display:flex; align-items:center; justify-content:space-between; gap:20px;}
  .logo{
    display:flex;
    align-items:center;
    text-decoration:none;
}

.logo img{
    width:235px;      /* Desktop */
    height:auto;
    display:block;
}

/* Tablet */
@media (max-width:768px){
    .logo img{
        width:230px;
    }
}

/* Mobile */
@media (max-width:480px){
    .logo img{
        width:200px;
    }
}

  nav.primary-nav{display:flex; align-items:center; gap:36px;}
  nav.primary-nav a{
    font-size:14.5px; font-weight:500; color:var(--navy); position:relative; padding:4px 0;
  }
  nav.primary-nav a::after{
    content:""; position:absolute; left:0; bottom:-2px; width:0; height:2px; background:var(--gold);
    transition:width .25s ease;
  }
  nav.primary-nav a:hover::after{width:100%;}

  .call-btn{
    display:inline-flex; align-items:center; gap:9px;
    background:var(--navy); color:#fff; font-weight:600; font-size:14px;
    padding:11px 20px; border-radius:100px; white-space:nowrap;
    box-shadow:0 10px 24px -12px rgba(11,37,69,0.5);
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
  }
  .call-btn:hover{transform:translateY(-2px); background:var(--blue);}
  .call-btn.red{background:var(--navy); box-shadow:0 10px 24px -10px rgba(200,67,61,0.55);}
  .call-btn.red:hover{background:#b23833;}
  .call-btn svg{width:16px; height:16px; flex:none;}

  .hamburger{
    display:none; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; border-radius:9px; background:var(--panel);
    border:1px solid var(--line); cursor:pointer; flex:none;
  }
  .hamburger span{width:18px; height:2px; background:var(--navy); margin:0 auto; border-radius:2px; transition:all .3s ease;}
  .hamburger.active span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .hamburger.active span:nth-child(2){opacity:0;}
  .hamburger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

  .drawer-backdrop{
    position:fixed; inset:0; background:rgba(11,37,69,0.35); z-index:1100;
    opacity:0; pointer-events:none; transition:opacity .35s ease;
  }
  .drawer-backdrop.open{opacity:1; pointer-events:auto;}

  .drawer{
    position:fixed; top:0; right:0; height:100%; width:78%; max-width:340px; z-index:1200;
    background:var(--card); box-shadow:-25px 0 60px -20px rgba(11,37,69,0.35);
    transform:translateX(100%); transition:transform .4s cubic-bezier(.77,0,.18,1);
    padding:30px 26px; display:flex; flex-direction:column; border-left:1px solid var(--line);
  }
  .drawer.open{transform:translateX(0);}
  .drawer-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:30px;}
  .drawer-top .logo{
    display:flex;
    align-items:center;
}

.drawer-top .logo img{
    height:48px;      /* Adjust as needed */
    width:auto;
    display:block;
}
  .drawer-close{
    width:38px; height:38px; border-radius:9px; background:var(--panel);
    border:1px solid var(--line); color:var(--navy); font-size:20px;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .drawer nav{display:flex; flex-direction:column; gap:6px;}
  .drawer nav a{
    color:var(--navy); font-size:17px; font-weight:600; padding:14px 6px;
    border-bottom:1px solid var(--line);
  }
  .drawer .call-btn{margin-top:26px; justify-content:center;}
  .drawer-foot{margin-top:auto; padding-top:24px; font-size:12.5px; color:var(--muted);}

  /* ---------- HERO ---------- */
  .hero{
    padding:130px 0 70px;
    overflow:hidden;
    position:relative;
    background:
      repeating-linear-gradient(180deg, rgba(29,111,184,0.05) 0px, rgba(29,111,184,0.05) 1px, transparent 1px, transparent 40px),
      var(--paper);
  }
  .hero::before{
    content:"";
    position:absolute; top:-140px; left:60%; width:520px; height:520px;
    background:radial-gradient(circle, rgba(79,168,224,0.16), transparent 65%);
  }
  .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center;
    position:relative; z-index:2;
  }
  .hero h1{
    font-family: 'Poppins', sans-serif; font-weight:700; font-size:52px; line-height:1.08;
    color:var(--navy); margin:22px 0 22px; letter-spacing:-.01em;
  }
  .hero h1 em{font-style:italic; font-weight:500; color:var(--gold);}
  .hero p.lead{
    font-size:17px; color:var(--muted); max-width:480px; margin-bottom:34px;
  }
  .hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px;}
  .btn-ghost{
    display:inline-flex; align-items:center; gap:9px;
    border:1.5px solid var(--line); background:#25D366; color:#fff; font-weight:600; font-size:14px;
    padding:11px 22px; border-radius:100px; transition:all .2s ease;
  }
  .btn-ghost:hover{border-color:#25D366; color:#25D366;background:#fff;}
  .btn-ghost svg{width:16px; height:16px;}

  .trust-row{display:flex; gap:0; border-top:1px solid var(--line); padding-top:26px; flex-wrap:wrap;}
  .trust-item{padding:0 26px 0 0; margin-right:26px; border-right:1px solid var(--line);}
  .trust-item:last-child{border-right:none;}
  .trust-item b{font-family: 'Poppins', sans-serif; font-size:24px; color:var(--navy); display:block;}
  .trust-item span{font-size:12px; color:var(--muted); letter-spacing:.03em;}

  /* ---------- HERO VISUAL: PASSBOOK ---------- */
  .hero-image{
    display:flex;
    justify-content:center;
    align-items:center;
}

.hero-image img{
    width:100%;
    max-width:620px;
    animation: float 5s ease-in-out infinite;
    filter: drop-shadow(0 25px 45px rgba(0,0,0,.15));
}

@keyframes float{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-15px);
    }
}
  .floating-chip{
    position:absolute; bottom:-2px; left:-6px; background:var(--card); border-radius:12px;
    padding:14px 18px; box-shadow:var(--shadow-soft); display:flex; align-items:center; gap:12px; z-index:4;
    width:230px; border:1px solid var(--line);
  }
  .floating-chip .ic{width:38px; height:38px; border-radius:9px; background:rgba(29,111,184,0.1); color:var(--blue);
    display:flex; align-items:center; justify-content:center; flex:none;}
  .floating-chip b{display:block; font-size:13px; color:var(--navy);}
  .floating-chip span{font-size:11px; color:var(--muted);}

  /* ---------- SECTION HEADS ---------- */
  .section-pad{padding:70px 0;}
  .head-block{margin-bottom:56px;}
  .head-block h2{
    font-family: 'Poppins', sans-serif; font-weight:700; font-size:37px; color:var(--navy);
    margin-top:14px; line-height:1.18; letter-spacing:-.01em;
  }
  .head-block p{color:var(--muted); font-size:15.5px; margin-top:16px;}

  /* ---------- ABOUT ---------- */
  .about{background:var(--paper);}
  .about-grid{display:grid; grid-template-columns:2fr 1fr; gap:15px; align-items:start;}
  .about-copy p{color:var(--muted); font-size:15.5px; margin-bottom:16px;}
  .about-copy .tag-strip{display:flex; gap:10px; flex-wrap:wrap; margin-top:26px;}
  .tag-strip span{
    font-size:12.5px; font-weight:600; color:var(--blue); background:rgba(29,111,184,0.08);
    padding:8px 14px; border-radius:100px; border:1px solid rgba(29,111,184,0.18);
  }
  .ledger{border-top:1px solid var(--line); background:var(--panel); border-radius:var(--radius); padding:6px 15px;}
  .ledger-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 4px; border-bottom:1px dashed var(--line);
  }
  .ledger-row:last-child{border-bottom:none;}
  .ledger-row b{font-family: 'Poppins', sans-serif; font-size:25px; color:var(--navy); font-weight:700;}
  .ledger-row span{font-size:13px; color:var(--muted); max-width:230px; text-align:right;}

  /* ---------- BANK CAROUSEL (logo marquee) ---------- */
  .partners{background:var(--panel); padding:70px 0 70px; overflow:hidden; position:relative; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .marquee-track{width:100%; overflow:hidden; margin:8px 0; -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
  .marquee-inner{display:flex; gap:16px; width:max-content; animation:scrollLeft 55s linear infinite;}
  .marquee-inner.reverse{animation:scrollRight 60s linear infinite;}
  @keyframes scrollLeft{from{transform:translateX(0);} to{transform:translateX(-50%);}}
  @keyframes scrollRight{from{transform:translateX(-50%);} to{transform:translateX(0);}}
  .marquee-track:hover .marquee-inner{animation-play-state:paused;}

  .badge{
    flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:10px; min-width:170px; max-width:170px;
    background:var(--card); border:1px solid var(--line);
    border-left:3px solid var(--gold);
    border-radius:10px; padding:18px 14px; position:relative; box-shadow:var(--shadow-soft);
  }
  .bank-logo-img{
    width:auto;
    object-fit:contain;
    opacity:.8;
    transition:filter .25s ease, opacity .25s ease;
  }
  .badge:hover .bank-logo-img{
    filter:grayscale(0%);
    opacity:1;
  }
  .bank-logo-fallback{
    font-size:13px; font-weight:600; color:var(--navy); text-align:center;
  }
  .badge .code{font-family: 'Poppins', sans-serif; font-size:10.5px; color:var(--muted); letter-spacing:.02em;}

  /* ---------- SERVICES ---------- */
  .services{background:var(--paper);}
  .service-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
  .service-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:32px 26px; transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    position:relative; overflow:hidden;
  }
  .service-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-soft); border-color:transparent;}
  .service-card .num{
    font-family: 'Poppins', sans-serif; font-size:11.5px; color:var(--muted); letter-spacing:.05em;
  }
  .service-card .ic{
    width:48px; height:48px; border-radius:11px; margin:16px 0 18px;
    background:rgba(29,111,184,0.09);
    color:var(--blue); display:flex; align-items:center; justify-content:center;
  }
  .service-card h3{font-family: 'Poppins', sans-serif; font-size:19px; color:var(--navy); font-weight:700; margin-bottom:8px;}
  .service-card p{font-size:13.8px; color:var(--muted);}
  .service-card.accent{background:var(--navy); border-color:var(--navy);}
  .service-card.accent h3, .service-card.accent p, .service-card.accent .num{color:#fff;}
  .service-card.accent p{color:#c3d1e6;}
  .service-card.accent .ic{background:rgba(233,196,120,0.18); color:var(--gold-soft);}

  /* ---------- CONTACT ---------- */
  .contact{background:var(--panel);}
  .contact-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:0; border-radius:20px; overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line);}
  .contact-info{
    background:var(--card);
    padding:52px 44px; color:var(--navy); position:relative;
  }
  .contact-info h3{font-family: 'Poppins', sans-serif; font-size:26px; margin:14px 0 8px; color:var(--navy);}
  .contact-info > p{color:var(--muted); font-size:14px; margin-bottom:32px;}
  .c-item{display:flex; gap:14px; margin-bottom:22px; position:relative; z-index:2;}
  .c-item .ic{width:40px; height:40px; border-radius:10px; background:var(--panel); flex:none;
    display:flex; align-items:center; justify-content:center; color:var(--gold);}
  .c-item b{display:block; font-size:14.5px; margin-bottom:2px; color:var(--navy);}
  .c-item a, .c-item span{font-size:13.5px; color:var(--muted); line-height:1.5;}
  .c-item a:hover{color:var(--blue);}
  .contact-info .call-btn{margin-top:10px;}
  .map-wrap{position:relative; min-height:420px; border-left:1px solid var(--line);}
  .map-wrap iframe{width:100%; height:100%; min-height:420px; border:0;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--navy); padding:15px 0;}
  .foot-row{display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;}
  .foot-row p{font-size:12.5px; color:#9fb2cc;}
  .foot-row .logo-text b{font-size:15px; color:#fff;}

  /* ---------- RESPONSIVE ---------- */
  @media (max-width:980px){
    .hero h1{font-size:40px;}
    .hero-grid{grid-template-columns:1fr; gap:60px;}
    .hero-visual{height:340px; max-width:420px; margin:0 auto;}
    .about-grid{grid-template-columns:1fr; gap:40px;}
    .service-grid{grid-template-columns:repeat(2, 1fr);}
    .contact-grid{grid-template-columns:1fr;}
    .map-wrap{min-height:320px; border-left:none; border-top:1px solid var(--line);}
  }
  @media (max-width:768px){
    nav.primary-nav, header .call-btn{display:none;}
    .hamburger{display:flex;}
    .header-actions{display:flex; align-items:center; gap:10px;}
  }
  @media (max-width:600px){
    .wrap{padding:0 20px;}
    .hero{padding:140px 0 90px;}
    .hero h1{font-size:32px;}
    .hero p.lead{font-size:15.5px;}
    .trust-row{gap:10px 0;}
    .trust-item{margin-right:16px; padding-right:16px;}
    .trust-item b{font-size:19px;}
    .section-pad{padding:74px 0;}
    .head-block h2{font-size:28px;}
    .service-grid{grid-template-columns:1fr;}
    .ledger-row span{text-align:left; max-width:100%; margin-top:4px;}
    .ledger-row{flex-direction:column; align-items:flex-start; gap:4px;}
    .passbook{width:88%; margin:0 auto;}
    .passbook-back{display:none;}
    .hero-visual{height:auto; padding:20px 0 60px;}
    .floating-chip{position:static; margin-top:14px; width:100%;}
    .contact-info{padding:40px 26px;}
  }

  /* ============================================
     BANK/NBFC PARTNERS SECTION — self-contained
     Drop this whole <section> + <style> into any page.
     ============================================ */

  .banks-section {
    background: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);
    padding: 60px 20px 70px;
  }

  .banks-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .banks-heading-wrap {
    text-align: center;
    margin-bottom: 46px;
  }

  .banks-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #0d4f9e;
    margin-bottom: 12px;
  }

  .banks-title {
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 800;
    color: #16233d;
    margin: 0 0 10px;
    line-height: 1.3;
  }

  .banks-title span {
    color: #0d4f9e;
  }

  .banks-subtitle {
    font-size: 15px;
    color: #5b6b82;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
  }

  /* Divider accent under heading */
  .banks-divider {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, #0d4f9e, #4f9bff);
    border-radius: 4px;
    margin: 18px auto 0;
  }

  /* Logo grid */
  .banks-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
  }

  .bank-card {
    background: #ffffff;
    border: 1px solid #e7ecf3;
    border-radius: 14px;
    padding: 26px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 110px;
    box-shadow: 0 2px 10px rgba(16, 38, 73, 0.04);
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }

  .bank-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 30px rgba(13, 79, 158, 0.14);
    border-color: #cfe0f7;
  }

  .bank-card img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    transition: filter 0.28s ease;
  }

  .bank-card:hover img {
    filter: grayscale(0%) opacity(1);
  }

  /* Trust strip below grid (optional, adds professionalism) */
  .banks-trust-strip {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 34px;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f2;
  }

  .trust-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #16233d;
  }

  .trust-item .trust-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #eaf1fc;
    color: #0d4f9e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .banks-grid {
      grid-template-columns: repeat(4, 1fr);
    }
  }

  @media (max-width: 700px) {
    .banks-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
    }
    .bank-card {
      min-height: 88px;
      padding: 18px 12px;
      border-radius: 12px;
    }
    .bank-card img { max-height: 34px; }
    .banks-trust-strip { gap: 18px; }
  }

  @media (max-width: 420px) {
    .banks-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  /* ============================================
     TESTIMONIALS SECTION — self-contained
     Drop this whole <section> + <style> into any page.
     ============================================ */

  .testi-section {
    background: #ffffff;
    padding: 65px 20px 75px;
  }

  .testi-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .testi-heading-wrap {
    text-align: center;
    margin-bottom: 46px;
  }

  .testi-kicker {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #0d4f9e;
    margin-bottom: 12px;
  }

  .testi-title {
    font-size: clamp(22px, 3.4vw, 34px);
    font-weight: 800;
    color: #16233d;
    margin: 0 0 10px;
    line-height: 1.3;
  }

  .testi-title span {
    color: #0d4f9e;
  }

  .testi-subtitle {
    font-size: 15px;
    color: #5b6b82;
    max-width: 520px;
    margin: 0 auto;
    line-height: 1.6;
  }

  .testi-divider {
    width: 64px;
    height: 4px;
    background: linear-gradient(90deg, #0d4f9e, #4f9bff);
    border-radius: 4px;
    margin: 18px auto 0;
  }

  /* Grid of cards */
  .testi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }

  .testi-card {
    position: relative;
    background: #f7f9fc;
    border: 1px solid #e7ecf3;
    border-radius: 16px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
  }

  .testi-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(13, 79, 158, 0.12);
    border-color: #cfe0f7;
    background: #ffffff;
  }

  .testi-quote-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #eaf1fc;
    color: #0d4f9e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 18px;
    flex-shrink: 0;
  }

  .testi-stars {
    color: #f5a623;
    font-size: 15px;
    letter-spacing: 2px;
    margin-bottom: 14px;
  }

  .testi-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: #3c4a5e;
    margin: 0 0 24px;
    flex-grow: 1;
  }

  .testi-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 18px;
    border-top: 1px solid #e2e8f2;
  }

  .testi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    background: #dbe6f6;
  }

  .testi-person-info {
    display: flex;
    flex-direction: column;
  }

  .testi-name {
    font-size: 14.5px;
    font-weight: 700;
    color: #16233d;
  }

  .testi-role {
    font-size: 12.5px;
    color: #7688a0;
    margin-top: 2px;
  }

  /* Responsive */
  @media (max-width: 992px) {
    .testi-grid {
      grid-template-columns: repeat(2, 1fr);
    }
  }

  @media (max-width: 640px) {
    .testi-grid {
      grid-template-columns: 1fr;
      gap: 18px;
    }
    .testi-card {
      padding: 26px 22px 22px;
    }
  }

  /* Common Button */

.floating-btn{
    position:fixed;
    bottom:25px;
    width:60px;
    height:60px;
    border-radius:50px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;
    text-decoration:none;

    font-size:24px;
    overflow:hidden;

    box-shadow:0 15px 35px rgba(0,0,0,.18);

    transition:.4s ease;

    z-index:999;
}

/* Text */

.floating-btn span{
    white-space:nowrap;
    opacity:0;
    max-width:0;
    overflow:hidden;
    transition:.35s;
    font-size:15px;
    font-weight:600;
}

/* WhatsApp */

.whatsapp{
    left:20px;
    background:#25D366;
}

.whatsapp:hover{
    width:180px;
    justify-content:flex-start;
    padding:0 22px;
    gap:14px;
}

.whatsapp:hover span{
    opacity:1;
    max-width:120px;
}

/* Call */

.call{
    right:20px;
    background:#0B4D91;
}

.call:hover{
    width:170px;
    justify-content:flex-start;
    padding:0 22px;
    gap:14px;
}

.call:hover span{
    opacity:1;
    max-width:100px;
}

/* Floating Animation */

.floating-btn{
    animation:float 3s ease-in-out infinite;
}

.call{
    animation-delay:.5s;
}

@keyframes float{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-6px);
    }

}

/* Mobile */

@media(max-width:768px){

.floating-btn{
    width:56px;
    height:56px;
    bottom:18px;
}

.whatsapp{
    left:15px;
}

.call{
    right:15px;
}

.floating-btn:hover{
    width:56px;
    padding:0;
}

.floating-btn span{
    display:none;
}

}

/* Sticky Contact Buttons */
.sticky-contact-wrap {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 9999;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sticky-contact-item {
    min-width: 150px;
    padding: 12px 18px;

    display: flex;
    align-items: center;
    gap: 10px;

    color: #ffffff;
    text-decoration: none;

    border-radius: 30px;

    font-size: 16px;
    font-weight: 600;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.20);

    transition: all 0.3s ease;
}

.sticky-contact-item:hover {
    color: #ffffff;
    transform: translateX(-5px);
}

/* Icons */
.sticky-contact-item i {
    font-size: 21px;
}

/* WhatsApp */
.sticky-whatsapp {
    background-color: #25D366;
}

.sticky-whatsapp:hover {
    background-color: #1ebe5d;
}

/* Call */
.sticky-call {
    background: var(--navy);
}

.sticky-call:hover {
    background: var(--blue);
}


/* Mobile */
@media (max-width: 576px) {

    .sticky-contact-wrap {
        right: 12px;
        bottom: 12px;
        gap: 8px;
    }

    .sticky-contact-item {
        width: 52px;
        min-width: 52px;
        height: 52px;

        padding: 0;

        justify-content: center;

        border-radius: 50%;
    }

    .sticky-contact-item span {
        display: none;
    }

    .sticky-contact-item i {
        font-size: 22px;
    }
}