@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

:root{
    --pink:#e22288;
    --pink-deep:#B60F63;
    --blue:#1466C9;
    --blue-light:#3C9DFF;
    --navy:#081B33;
    --navy-deep:#050F1F;
    --ink:#0E1B2B;
    --muted:#2a2b2b;
    --bg-soft:#F4F7FB;
    --line:#E7ECF3;
    --grad: linear-gradient(120deg, var(--pink) 0%, var(--blue) 100%);
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Poppins', sans-serif;
    color:var(--ink);
    background:#fff;
    overflow-x:hidden;
  }
  html, body{
  max-width:100%;
  overflow-x:hidden;
}
a{ text-decoration: none;}
  h1,h2,h3,h4,.display-font{
    font-family:'Poppins', sans-serif;
  }
  .text-grad{
    background:var(--grad);
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }
  .sec_head{
    font-family: 'Montserrat', sans-serif;
        font-weight: 800 !important;
  }
  .btn-grad{
    background:var(--grad);
    border:none;
    color:#fff;
    font-weight:600;
    padding:.85rem 1.9rem;
    border-radius:50px;
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, box-shadow .25s ease;
    box-shadow:0 8px 20px rgba(230,18,122,.25);
  }
  .btn-grad:hover{
    transform:translateY(-3px);
    box-shadow:0 14px 28px rgba(20,102,201,.32);
    color:#fff;
  }
  .btn-outline-light-custom{
    border:1.5px solid rgba(255,255,255,.35);
    color:#fff;
    padding:.85rem 1.9rem;
    border-radius:50px;
    font-weight:600;
    background:transparent;
    transition:.25s ease;
  }
  .btn-outline-light-custom:hover{
    background:rgba(255,255,255,.12);
    border-color:#fff;
    color:#fff;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    font-size:.78rem;
    font-weight:700;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:.4rem 1rem;
    border-radius:50px;
  }

  /* ============ HEADER (TOP BAR + NAVBAR) ============ */
  #siteHeader{
    position:fixed; top:0; left:0; right:0; z-index:1000;
  }

 /* ============ REFINED HEADER CSS (AS PER REF IMAGE) ============ */

/* Topbar Background & Text Color */
/* ============ REFINED TOP HEADER & SOCIAL BUTTONS ============ */

/* Topbar Clean Style */
.topbar {
  background: #f8f9fa !important;
  color: #495057 !important;
  font-size: 0.8rem;
  font-weight: 500;
  border-bottom: 1px solid #e9ecef;
  padding: 6px 0 !important; /* Vertical Padding कमी केली आहे */
}

/* Align Items & Gap Adjustment */
.topbar .row-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.topbar-info {
  display: flex !important;
  align-items: center !important;
  gap: 1.2rem;
}

.nav-right {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important; /* Space कमी केला आहे */
}

/* Small & Attractive Social Icon Buttons */
.social-icon-btn {
 width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 1rem !important;
 /* Pure White BG */
  border: 1px solid #e2e8f0 !important; /* हलकी बॉर्डर */
  box-shadow: 0 2px 4px rgba(0,0,0,0.06) !important;
  transition: all 0.3s ease !important;
}

/* डार्क आणि स्पष्ट आयकॉन कलर्स */
.social-icon-btn.facebook { background-color: #1877f2; color: #fff; }
.social-icon-btn.instagram {background-color: #e1306c ; color: #fff ;   }
.social-icon-btn.youtube { background-color: #ff0000 ; color: #fff ; }
.social-icon-btn.linkedin {  background-color: #0a66c2 ; color: #fff ; }

/* Hover केल्यावर पूर्ण रंग भरणे */
.social-icon-btn.facebook:hover { background-color: #fff !important; color: #1877f2 !important; }
.social-icon-btn.instagram:hover { background-color: #fff !important; color: #e1306c !important; }
.social-icon-btn.youtube:hover { background: white;    color: #ff0000 !important;  }
.social-icon-btn.linkedin:hover {  background: white;     color: #0a66c2 !important; }

.social-icon-btn:hover {
  transform: translateY(-2px) !important;
}

.social-icon-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Small & Compact Enquiry CTA Button */
.nav-cta-btn {
  background-color: var(--blue) !important;
  color: #ffffff !important;
  padding: 0.35rem 0.9rem !important; /* Padding खूप कमी केली आहे */
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.78rem !important; /* Font Size Small केली */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  transition: all 0.25s ease;
}

.nav-cta-btn:hover {
  background-color: #0052e0 !important;
  color: #ffffff !important;
}

/* Navbar Style Clean Clean Modern Look */
.navbar-custom {
  background: #ffffff !important;
  padding: 0px 0 !important;
  border-bottom: 1px solid #f0f0f0;
       box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}

#siteHeader::after {
  display: none;
}

/* Nav Link Underline Design (Active Pink Line) */
.nav-pill-wrap {
  gap: 1.2rem;
}

.navbar-custom .nav-link {
  color: #212529 !important;
  font-weight: 600;
  font-size: 15px;
  padding: 0.5rem 0.2rem !important;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  position: relative;
}

.navbar-custom .nav-link i {
  font-size: 1.05rem;
  color: #495057;
}

.navbar-custom .nav-link.active,
.navbar-custom .nav-link:hover {
  color: #e6127a !important;
}

.navbar-custom .nav-link.active i,
.navbar-custom .nav-link:hover i {
  color: #e6127a !important;
}

/* Nav Link Underline Design (Active & Hover Pink Line) */
.navbar-custom .nav-link::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: #e6127a;
    border-radius: 10px;
    transform: translateX(-50%);
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.navbar-custom .nav-link:hover::after,
.navbar-custom .nav-link.active::after {
    width: 70%;
}

.navbar-custom .nav-link::before {
  display: none;
}







/* Apply Now Solid Blue Button */


  .navbar-custom .container{
    display:flex; align-items:center; justify-content:space-between;
       padding: 10px 0px;
    position:relative;
  }
  @media(max-width:992px){
     .navbar-custom .container{
       padding: 10px 10px;
     }
  }

  /* ============ TOPBAR FLEXBOX FIX ============ */
.topbar .row-inner {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
      padding: 0!important;
}

.topbar-info {
  display: flex !important;
  align-items: center !important;
  gap: 1.5rem;
}
.topbar-info a{
      color: var(--muted)  !important;
    font-size: 0.8rem;
    font-weight: 500;
}
.topbar-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}

/* ============ SLEEK & UNIQUE TEXT HOVER EFFECT ============ */

.topbar-auth-link {
  color: #495057 !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  position: relative;
  padding: 0.2rem 0;
  transition: color 0.3s ease;
}

/* आयकॉन स्टाइल */
.topbar-auth-link i {
     font-size: 1.05rem;
  color: #6c757d;
  transition: all 0.3s ease;
}

/* खालची युनिक अॅनिमेटेड लाईन */
.topbar-auth-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0%;
  height: 2px;
  background: linear-gradient(90deg, #e6127a, #1466c9);
  border-radius: 4px;
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hover Effects */
.topbar-auth-link:hover {
  color: #e6127a !important; /* गुलाबी शेड */
}

.topbar-auth-link:hover i {
  color: #e6127a !important;
  transform: translateY(-2px) scale(1.15); /* आयकॉन वर सरकेल */
}

.topbar-auth-link:hover::after {
  width: 100%; /* लाईन डावीकडून उजवीकडे स्मूथली वाढेल */
}
  /* floating logo badge - the signature element */
  .logo-badge{
      display: flex;
    align-items: center;
    padding: 0 0rem;
    transition: .3s ease;
  }
  .logo-badge:hover{ box-shadow:0 14px 30px rgba(230,18,122,.14); transform:translateY(-2px); }
  .navbar-custom img.logo{
    height:47px;
    transition:.3s ease;
  }
  #siteHeader.scrolled .navbar-custom img.logo{ height:43px; }
  #siteHeader.scrolled .logo-badge{ padding:.4rem .85rem; }


  @media (min-width: 344px) and (max-width: 377px) {
  #siteHeader.scrolled .navbar-custom img.logo{ height:38px; }
  .navbar-custom img.logo{
     height:38px;
  }
  
}

@media (min-width: 311px) and (max-width: 344px) {
  #siteHeader.scrolled .navbar-custom img.logo{ height:33px; }
  .navbar-custom img.logo{
     height:33px;
  }
  
}
@media (min-width: 277px) and (max-width: 311px) {
  #siteHeader.scrolled .navbar-custom img.logo{ height:28px; }
  .navbar-custom img.logo{
     height:28px;
  }
  
}

@media (min-width: 258px) and (max-width: 277px) {
  #siteHeader.scrolled .navbar-custom img.logo{ height:25px; }
  .navbar-custom img.logo{
     height:25px;
  }
  
}
@media (min-width: 220px) and (max-width: 258px) {
  #siteHeader.scrolled .navbar-custom img.logo{ height:19px; }
  .navbar-custom img.logo{
     height:19px;
  }
  
}
  /* center pill nav */
  .nav-pill-wrap{
    display:flex; align-items:center; gap:.2rem;
    border-radius:50px;
    padding:.35rem;
  }
  .navbar-custom .nav-link{
    color:var(--ink);
    font-weight:600;
    font-size:16px;
       padding: .55rem 0.6rem !important;
    position:relative;
    transition:color .25s ease;
  }
  .navbar-custom .nav-link::before{
    content:'';
    position:absolute; inset:0;
    border-radius:50px;
    background:var(--grad);
    opacity:0;
    transition:opacity .25s ease;
    z-index:-1;
  }
  .navbar-custom .nav-link:hover{ color:var(--pink); }
  .navbar-custom .nav-link:hover::before{ opacity:1; }
  .navbar-custom .nav-link.active{ color:var(--pink); }
  .navbar-custom .nav-link.active::before{ opacity:1; }

  /* right cluster: phone + CTA */
  .nav-right{ display:flex; align-items:center; gap:1.1rem; }
  .nav-phone{
    display:flex; align-items:center; gap:.7rem;
    text-decoration:none;
    padding-right:1.1rem;
    border-right:1px solid var(--line);
  }
  .nav-phone .ic-circle{
    width:38px; height:38px; border-radius:50%;
    background:linear-gradient(135deg, rgba(230,18,122,.1), rgba(20,102,201,.1));
    color:var(--pink-deep);
    display:flex; align-items:center; justify-content:center;
    font-size:1rem; flex:0 0 38px;
  }
  .nav-phone small{ display:block; color:var(--muted); font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
  .nav-phone strong{ display:block; color:var(--ink); font-size:.88rem; font-weight:700; }

  .nav-cta{
    background:var(--grad);
    color:#fff !important;
    border-radius:50px;
    padding:.75rem 1.6rem !important;
    font-weight:700;
    font-size:.9rem;
    box-shadow:0 8px 20px rgba(230,18,122,.28);
    display:inline-flex; align-items:center; gap:.5rem;
    transition:transform .25s ease, box-shadow .25s ease;
    white-space:nowrap;
    text-decoration: none;
  }
  .nav-cta:hover{ color:#fff !important; transform:translateY(-2px); box-shadow:0 14px 28px rgba(20,102,201,.32); }
/* ============ TOPBAR LOCATION DROPDOWN ============ */
.topbar-location-dropdown .location-btn {
  color: var(--muted) !important;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  cursor: pointer;
  transition: color 0.2s ease;
}

.topbar-location-dropdown .location-btn:hover {
  color: #e6127a !important;
}

.topbar-dropdown-menu {
  font-size: 0.82rem;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 0.4rem 0;
  min-width: 180px;
}

.topbar-dropdown-menu .dropdown-item {
  padding: 0.4rem 1rem;
  color: #495057;
  font-weight: 500;
}

.topbar-dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #e6127a;
}

.topbar-dropdown-menu .dropdown-item.active {
  background-color: #fde8f0;
  color: #e6127a;
  font-weight: 600;
}
.nav-item{
  list-style-type: none;
}
/* ============ COURSES DROPDOWN ON HOVER ============ */
@media (min-width: 992px) {
  .navbar-custom .nav-item.dropdown:hover .dropdown-menu {
    display: block !important;
    margin-top: 0;
    opacity: 1;
    visibility: visible;
    animation: fadeInDropdown 0.25s ease-in-out;
  }

  .navbar-custom .nav-item.dropdown .dropdown-menu {
    margin-top: 0;
    transition: all 0.2s ease-in-out;
  }
}

@keyframes fadeInDropdown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.custom-dropdown-menu {
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 0.4rem 0 !important;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important;
  min-width: 180px !important;
  background-color: #ffffff;
}

.custom-dropdown-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  color: #495057;
  transition: all 0.2s ease;
  background-color: transparent;
}

.custom-dropdown-menu .dropdown-item i,
.custom-dropdown-menu .dropdown-item .icon {
  font-size: 0.95rem;
  color: #6c757d;
  transition: color 0.2s ease;
}

.custom-dropdown-menu .dropdown-item:hover {
  background-color: #f8f9fa;
  color: #e6127a !important;
}

.custom-dropdown-menu .dropdown-item:hover i,
.custom-dropdown-menu .dropdown-item:hover .icon {
  color: #e6127a !important;
}

.custom-dropdown-menu .dropdown-item.active {
  background-color: #fde8f0 !important;
  color: #e6127a !important;
  font-weight: 600;
}

.custom-dropdown-menu .dropdown-item.active i,
.custom-dropdown-menu .dropdown-item.active .icon {
  color: #e6127a !important;
}

.navbar-custom .nav-item.dropdown .nav-link::after {
  display: none !important;
}
  /* ============ MOBILE TOGGLER ============ */
  .hamburger-btn{
    width:46px; height:46px;
    border-radius:12px;
    border:1.5px solid var(--line);
    background:#fff;
    display:flex; align-items:center; justify-content:center;
    gap:5px; flex-direction:column;
    transition:.25s ease;
  }
  .hamburger-btn:hover{ border-color:var(--pink); }
  .hamburger-btn span{
    display:block; width:20px; height:2px; border-radius:2px;
    background:var(--ink); transition:.3s ease;
  }

  /* ============ MOBILE SIDEBAR (OFFCANVAS) ============ */
  /* ============ MOBILE SIDEBAR (OFFCANVAS) — WHITE THEME ============ */
.side-nav{
  width:300px!important;
  background:#ffffff;
  color:var(--ink);
  border:none;
  box-shadow:-8px 0 30px rgba(20,40,80,.12);
  transition:transform .35s cubic-bezier(.4,0,.2,1) !important;
}
.side-nav .offcanvas-header{
  padding:1.4rem 1.4rem 0;
  border-bottom:1px solid var(--line);
  padding-bottom:1rem;
      justify-content: space-between;
}
.side-nav .side-logo{
  height:30px;
  filter:none; /* white bg par original logo colors dikhenge */
}
.side-nav .btn-close-custom{
     width: 30px;
    height: 30px;
    border-radius: 7px;
    border: 1px solid var(--line);
    background: var(--bg-soft);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    transition: .25s ease;
    margin-top: -30px;
    margin-left: 41px;
}
.side-nav .btn-close-custom:hover{
  background:var(--grad); border-color:transparent; color:#fff; transform:rotate(90deg);
}
.side-nav .offcanvas-body{
  padding:1.6rem 1.4rem 1.8rem;
  display:flex; flex-direction:column;
}
.side-nav .side-eyebrow{
  font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.1rem;
}
.side-nav .side-link{
  display:flex; align-items:center; gap:.85rem;
  color:var(--ink); text-decoration:none;
  font-weight:600; font-size:1.02rem;
  padding:.2rem .8rem;
  border-radius:12px;
  margin-bottom:.3rem;
  opacity:0; transform:translateX(-16px);
  transition:opacity .4s ease, transform .4s ease, background-color .25s ease, color .25s ease;
}
.side-nav.show .side-link{
  opacity:1; transform:translateX(0);
}
.side-nav .side-link i{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:10px;
  background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; color:var(--pink-deep);
  transition:.25s ease;
}
.side-nav .side-link:hover, .side-nav .side-link.active{
  background:var(--bg-soft);
  color:var(--pink-deep);
}
.side-nav .side-link:hover i, .side-nav .side-link.active i{
  background:var(--grad); color:#fff;
}
.side-nav .side-link.active{
  box-shadow:inset 3px 0 0 var(--pink);
}
.side-nav .side-link:nth-child(2){ transition-delay:.05s; }
.side-nav .side-link:nth-child(3){ transition-delay:.1s; }
.side-nav .side-link:nth-child(4){ transition-delay:.15s; }
.side-nav .side-link:nth-child(5){ transition-delay:.2s; }
.side-nav .side-link:nth-child(6){ transition-delay:.25s; }
.side-nav .side-link:nth-child(7){ transition-delay:.3s; }
.side-nav .side-cta{
  margin-top:auto;
  padding-top:1.4rem;
  border-top:1px solid var(--line);
}
.side-nav .side-cta .btn-grad{
  width:100%; text-align:center; display:block;
}
.side-nav .side-social{
  display:flex; gap:.6rem; margin-top:1.1rem;
}
.side-nav .side-social a{
  width:36px; height:36px; border-radius:50%;
  background:var(--bg-soft);
  border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink); transition:.25s ease;
}
.side-nav .side-social a:hover{ background:var(--grad); border-color:transparent; color:#fff; transform:translateY(-2px); }
.offcanvas-backdrop.show{ opacity:.4; }


/* Mobile Submenu Formatting & Styling */
.mobile-submenu {
  padding-left: 1rem;
  background: var(--bg-soft);
  border-radius: 10px;
  margin-top: 0.3rem;
  margin-bottom: 0.5rem;
}

.mobile-submenu a {
  display: block;
  padding: 0.5rem 0.8rem;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-submenu a:last-child {
  border-bottom: none;
}

.mobile-submenu a:hover {
  color: var(--pink-deep);
  padding-left: 1.1rem;
}

/* Toggle Arrow Rotation Effect */
.mobile-dropdown-toggle[aria-expanded="true"] .arrow-icon {
  transform: rotate(180deg);
  transition: transform 0.3s ease;
}

.mobile-dropdown-toggle .arrow-icon {
  transition: transform 0.3s ease;
}
  /* ============ HERO ============ */
  .hero{
    background:
      linear-gradient(135deg, rgba(230,18,122,.20) 0%, rgba(20,102,201,.20) 100%),
      linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
    padding:10.5rem 0 6rem;
    position:relative;
    overflow:hidden;
    color:#fff;
  }
  .hero::before{
    content:'';
    position:absolute;
    inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size:44px 44px;
    mask-image:linear-gradient(180deg, rgba(0,0,0,.7), transparent 75%);
  }
  .hero .eyebrow{
    background:rgba(255,255,255,.08);
    color:#9FD0FF;
    border:1px solid rgba(255,255,255,.14);
  }
  .hero h1{
    font-size:3rem;
    font-weight:800;
    line-height:1.14;
    letter-spacing:-.01em;
  }
  .hero p.lead{
    color:#B6C4D8;
    font-size:1.08rem;
    max-width:540px;
  }
  @media (min-width:992px){ .hero h1{font-size:3.4rem;} }

  /* animated code panel */
  .code-card{
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.12);
    border-radius:20px;
    padding:1.4rem;
    backdrop-filter:blur(6px);
    box-shadow:0 30px 60px rgba(0,0,0,.35);
    animation:float 5s ease-in-out infinite;
  }
  @keyframes float{
    0%,100%{transform:translateY(0px);}
    50%{transform:translateY(-14px);}
  }
  .code-card .dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;}
  .code-line{
    height:9px;border-radius:5px;background:rgba(255,255,255,.12);margin:10px 0;
  }
  .code-line.grad{background:var(--grad); opacity:.85;}
  .metric-chip{
    position:absolute;
    background:#fff;
    color:var(--ink);
    border-radius:16px;
    padding:.85rem 1.1rem;
    box-shadow:0 20px 40px rgba(0,0,0,.28);
    font-weight:700;
    animation:float 4.5s ease-in-out infinite;
  }
  .metric-chip small{display:block;font-weight:600;color:var(--muted);font-size:.72rem;}
  .metric-chip.one{ top:-18px; left:-24px; animation-delay:.4s;}
  .metric-chip.two{ bottom:-22px; right:-18px; animation-delay:1s;}

  .hero-stats{
    border-top:1px solid rgba(255,255,255,.12);
    margin-top:3.5rem;
    padding-top:2.2rem;
  }
  .hero-stats .num{
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:2.1rem;
    background:var(--grad);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-stats .lbl{color:#9FB0C6;font-size:.85rem;font-weight:500;}


  /* ============ HERO MOBILE RESPONSIVE FIX ============ */
@media (max-width: 991px){
  .hero-slider-section{
    padding:100px 0 40px;
    overflow-x:hidden;
  }
  .wave-bg-pattern,
  .glow-orb{
    display:none; /* overflow/scroll cause karne wale decorative elements hide */
  }
  .hero-heading{
    font-size:2rem;
  }
  .hero-desc{
    font-size:1rem;
  }
  /* Laptop mockup + floating cards wala pura visual section hide */
  .hero-visual-wrap{
    display:none !important;
  }
  .hero-content{
    text-align:left;
  }
}


@media (max-width: 575px){
  .hero-heading{
    font-size:2rem!important;
    line-height:1.3;
  }
  .hero-desc{
    font-size:.95rem;
  }
  .hero-btns .btn-pink-custom,
  .hero-btns .btn-white-custom{
    padding:11px 22px;
    font-size:.9rem;
  }
  .section-title{
     font-size: 1.3rem!important;
  }
}
  /* ============ SECTION HEADERS ============ */
  .section-pad{padding:2rem 0;}
  .eyebrow-light{
    background:rgba(230,18,122,.08);
    color:var(--pink-deep);
    border:1px solid rgba(230,18,122,.18);
  }
  .section-title{
       font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -.01em;
    text-transform: uppercase;
    font-family: 'Montserrat', sans-serif;
  }
  .section-sub{color:var(--muted); font-size:1.02rem; max-width:600px;}

  /* ============ SERVICES ============ */
  .bg-soft{background:var(--bg-soft);}
 /* =============================================================
   UNIQUE & MODERN SERVICE CARD DESIGN WITH IMAGE
   ============================================================= */

.service-img-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid var(--line);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  box-shadow: 0 6px 20px rgba(8, 27, 51, 0.04);
}
/* Card ला overflow visible ठेवा जेणेकरून circle बाहेर दिसेल */
.service-img-card {
  position: relative;
  overflow: visible;
}

/* Image wrap ओव्हल राहील (zoom effect साठी) */
.service-img-card .card-img-wrap {
  overflow: hidden;
}

/* Center circle icon — image आणि content च्या मध्ये */
.service-img-card .card-icon-circle {
  position: absolute;
    top: 280px;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #f5ecf4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--pink);
    box-shadow: 0 4px 8px rgba(230, 18, 122, 0.25);
    border: 1px solid var(--line);
    z-index: 3;
    transition: all 0.3s ease;
}

.service-img-card:hover .card-icon-circle {
  background: var(--pink);
  color: #fff;
  transform: translate(-50%, -50%) scale(1.08);
}

/* Content center-aligned + circle साठी वरती जागा */
.service-img-card .card-content {
  padding-top: 2.4rem;
  text-align: center;
}

/* View Details button — pill, centered, image1 style */
.service-img-card .btn-view-details {
  justify-content: center;
  max-width: 165px;
  margin: 0 auto;
  gap: 0.5rem;
}

/* Card Hover Effect */
.service-img-card:hover {
  transform: translateY(-8px);
  border-color: rgba(230, 18, 122, 0.3);
  box-shadow: 0 18px 36px rgba(230, 18, 122, 0.12), 0 8px 16px rgba(20, 102, 201, 0.08);
  cursor: pointer;
}

/* Image Container & Hover Zoom */
/* 1. Container ची height फिक्स न ठेवता ठराविक रेशो किंवा auto ठेवा */
.service-img-card .card-img-wrap {
  position: relative;
  width: 100%;
  height: 280px; /* फिक्स हायड्रोलिक साईझ */
  overflow: hidden;
  background: #f4f7fb;
}

/* 2. Image चा स्ट्रेचिंग प्रॉब्लेम घालवण्यासाठी object-fit वापरा */
.service-img-card .card-img-wrap img {
  width: 100%;
  height: 100%;
  /* object-fit: contain; */
  object-position: center; /* इमेज सेंटरला अलाईन राहील */
  transition: transform 0.5s ease;
      border-radius: 20px 20px 0 0;
}

.service-img-card:hover .card-img-wrap img {
  transform: scale(1.08);
}

/* Badge Style (Optional) */
.service-img-card .card-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--grad);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 50px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(230, 18, 122, 0.3);
}

/* Content Area */
.service-img-card .card-content {
  padding: 2.4rem 0.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.service-img-card .card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.6rem;
  line-height: 1.35;
  transition: color 0.3s ease;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 1.3em;
  margin-bottom: 10px;
}

.service-img-card:hover .card-title {
  color: var(--pink);
}

/* Strict 2-Line Paragraph Clamp */
.service-img-card .card-desc {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.55;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 2.8em;
  margin-bottom: 15px;
}

/* View Details Modern Pill Button */
.btn-view-details {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.65rem 1.2rem;
  border-radius: 50px;
  background: var(--bg-soft);
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--line);
  transition: all 0.3s ease;
}

.btn-view-details i {
  font-size: 0.95rem;
  transition: transform 0.3s ease;
  color: var(--pink);
}

/* Button Hover State */
.service-img-card:hover .btn-view-details,
.btn-view-details:hover {
  background: var(--pink);
  color: #ffffff;
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(230, 18, 122, 0.25);
}

.service-img-card:hover .btn-view-details i,
.btn-view-details:hover i {
  color: #ffffff;
  transform: translateX(4px);
}
/* ============ SERVICES SLICK SLIDER CUSTOM STYLES ============ */
.services-slider {
  position: relative;
}

/* Arrows Styling */
.services-slider .slick-prev,
.services-slider .slick-next {
  width: 42px;
  height: 42px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 50%;
  z-index: 10;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.services-slider .slick-prev {
  left: -20px;
}

.services-slider .slick-next {
  right: -20px;
}

.services-slider .slick-prev:before,
.services-slider .slick-next:before {
  display: none;
}

.services-slider .slick-prev i,
.services-slider .slick-next i {
  color: var(--ink);
  font-size: 1.2rem;
  transition: color 0.3s ease;
}

.services-slider .slick-prev:hover,
.services-slider .slick-next:hover {
  background: var(--pink);
  border-color: var(--pink);
}

.services-slider .slick-prev:hover i,
.services-slider .slick-next:hover i {
  color: #ffffff;
}

/* Adjust Dots Spacing */
.services-slider .slick-dots {
  margin-top: 25px;
}
.services-slider .slick-track {
  display: flex !important;
}

.services-slider .slick-slide {
  height: auto !important;
}

.services-slider .slick-slide > div {
  height: 100%;
}
  /* ============ INDUSTRIES ============ */
  .industry-pill{
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.6rem 1rem;
    text-align:center;
    transition:.3s ease;
    height:100%;
  }
  .industry-pill:hover{
    border-color:transparent;
    box-shadow:0 18px 34px rgba(20,40,80,.1);
    transform:translateY(-6px);
  }
  .industry-pill .ic{
    width:52px;height:52px;margin:0 auto 1rem;
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg, var(--pink), var(--blue));
    color:#fff;font-size:1.35rem;
  }
  .industry-pill span{font-weight:700; font-size:.92rem;}

  /* ============ PROJECTS ============ */
 /* ============ NEW LATEST PROJECTS DESIGN ============ */
.proj-filter-btn{
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--ink);
  font-weight:600;
  font-size:.85rem;
  padding:.6rem 1.3rem;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  transition:.25s ease;
  cursor:pointer;
}
.proj-filter-btn i{ font-size:.95rem; }
.proj-filter-btn:hover{
  border-color:var(--pink);
  color:var(--pink);
}
.proj-filter-btn.active{
  background:var(--pink);
  border-color:transparent;
  color:#fff;
  box-shadow:0 8px 18px rgba(230,18,122,.25);
}

.new-proj-card{
  background:#fff;
  border-radius:18px;
  border:1px solid var(--line);
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:.3s ease;
  box-shadow:0 6px 18px rgba(15,23,42,.05);
}
.new-proj-card:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 20px 34px rgba(230,18,122,.12);
}
.new-proj-card .card-img-holder{
  position:relative;
  height:150px;
  background:#f4f7fb;
}
.new-proj-card .card-img-holder img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .5s ease;
}
.new-proj-card:hover .card-img-holder img{ transform:scale(1.06); }

.proj-icon-badge{
  position:absolute;
  left:14px; bottom:-18px;
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:1.15rem;
  box-shadow:0 8px 16px rgba(0,0,0,.18);
  z-index:2;
}
.badge-pink{ background:linear-gradient(135deg,#ff5c9d,#e6127a); }
.badge-blue{ background:linear-gradient(135deg,#3C9DFF,#1466C9); }
.badge-green{ background:linear-gradient(135deg,#34d399,#059669); }
.badge-yellow{ background:linear-gradient(135deg,#fbbf24,#d97706); }
.badge-orange{ background:linear-gradient(135deg,#fb923c,#ea580c); }
.badge-purple{ background:linear-gradient(135deg,#a78bfa,#7c3aed); }

.new-proj-card .card-body-holder{
  padding:1.7rem 1.2rem 1.3rem;
  display:flex;
  flex-direction:column;
  flex-grow:1;
}
.new-proj-card .proj-title{
  font-family:'Montserrat', sans-serif;
  font-size:1.02rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:.5rem;
}
.new-proj-card .proj-desc{
  font-size:.85rem;
  color:var(--muted);
  line-height:1.55;
  margin-bottom:1rem;
  flex-grow:1;
}
.proj-tags{
  display:flex; flex-wrap:wrap; gap:.4rem;
  margin-bottom:1rem;
}
.proj-tag{
  font-size:.72rem;
  font-weight:600;
  padding:.28rem .7rem;
  border-radius:50px;
}
.tag-pink{ background:#fde8f0; color:#e6127a; }
.tag-blue{ background:#e8f0fe; color:#1466C9; }
.tag-green{ background:#dcfce7; color:#059669; }
.tag-yellow{ background:#fef3c7; color:#b45309; }
.tag-orange{ background:#ffedd5; color:#c2410c; }
.tag-purple{ background:#ede9fe; color:#6d28d9; }

.proj-view-link{
  font-size:.85rem;
  font-weight:700;
  color:var(--pink-deep);
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  text-decoration:none;
  transition:.25s ease;
}
.proj-view-link i{ transition:transform .25s ease; }
.proj-view-link:hover{ color:var(--pink); }
.proj-view-link:hover i{ transform:translateX(4px); }

@media(max-width:575px){
  .proj-filter-btn{ font-size:.78rem; padding:.5rem 1rem; }
}
  /* ============ CTA BANNER ============ */
  .cta-banner{
    background:linear-gradient(120deg, var(--pink-deep), var(--blue));
    border-radius:26px;
    padding:3.5rem 3rem;
    position:relative;
    overflow:hidden;
    color:#fff;
  }
  .cta-banner::after{
    content:'';
    position:absolute; right:-60px; top:-60px;
    width:260px;height:260px;
    border-radius:50%;
    background:rgba(255,255,255,.08);
  }
  .cta-banner::before{
    content:'';
    position:absolute; left:10%; bottom:-90px;
    width:200px;height:200px;
    border-radius:50%;
    background:rgba(255,255,255,.07);
  }
  .btn-white-cta{
    background:#fff;
    color:var(--pink-deep);
    font-weight:700;
    padding:.85rem 2rem;
    border-radius:50px;
    border:none;
    transition:.25s ease;
  }
  .btn-white-cta:hover{ transform:translateY(-3px); box-shadow:0 14px 28px rgba(0,0,0,.2); color:var(--pink-deep); }

  /* ============ TESTIMONIALS ============ */
  .testi-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:2rem;
    height:100%;
  }
  .testi-card .stars{color:#FFB020; font-size:.9rem; margin-bottom:.9rem;}
  .testi-card p{color:var(--ink); font-size:.95rem;}
  .testi-card .who{
    display:flex; align-items:center; gap:.8rem; margin-top:1.2rem;
  }
  .avatar-init{
    /* width:44px;height:44px;
    background:var(--pink);
    color:#fff; font-weight:700;
    display:flex;align-items:center;justify-content:center; */
       border: 1px solid #a8a6a7;
    border-radius:50%;
  }
  .avatar-init img{
    width:44px;height:44px;border-radius:50%;
  
    color:#fff; font-weight:700;
    display:flex;align-items:center;justify-content:center;
  }
  .who h6{margin:0; font-weight:700; font-size:.9rem;}
  .who small{color:var(--muted);}

  /* ============ FOOTER ============ */
  footer{
    position:relative;
    background:
      linear-gradient(135deg, rgba(230,18,122,.18) 0%, rgba(20,102,201,.18) 100%),
      linear-gradient(165deg, #0A1F3B 0%, #050F1F 60%, #04070F 100%);
    color:#B6C4D8;
    padding-top:6rem;
    overflow:hidden;
    isolation:isolate;
  }
  footer::before{
    content:'';
    position:absolute; inset:0;
    z-index:0;
    opacity:.5;
    background-image:
      radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size:26px 26px;
    mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 40%, transparent 90%);
  }
  .footer-wave{
    position:absolute;
    top:-1px; left:0; right:0;
    line-height:0;
    z-index:1;
  }
  .footer-wave svg{ width:100%; height:70px; display:block; }

  .footer-watermark{
    position:absolute;
    right:-2%; bottom:-6%;
    font-family:'Poppins',sans-serif;
    font-weight:800;
    font-size:clamp(4rem, 14vw, 11rem);
    letter-spacing:-.03em;
    color:transparent;
    -webkit-text-stroke:1px rgba(255,255,255,.06);
    z-index:0;
    pointer-events:none;
    user-select:none;
    white-space:nowrap;
  }

  footer .footer-inner{ position:relative; z-index:2; }

  .footer-cta-row{
    border:1px solid rgba(255,255,255,.1);
    background:rgba(255,255,255,.04);
    backdrop-filter:blur(8px);
    border-radius:20px;
    padding:2rem 2.2rem;
    margin-bottom:4rem;
  }
  .footer-cta-row h4{
    color:#fff; font-weight:800; font-family:'Poppins',sans-serif; margin-bottom:.3rem;
  }
  .footer-cta-row p{ margin:0; color:#9FB0C6; font-size:.92rem; }

  footer h6{
    color:#fff; font-weight:700; margin-bottom:1.2rem;
    letter-spacing:.02em; font-size:.95rem;
    position:relative; padding-bottom:.7rem;
  }
  footer h6::after{
    content:'';
    position:absolute; left:0; bottom:0;
    width:28px; height:3px; border-radius:3px;
    background:var(--grad);
  }
  footer a{color:#9FB0C6; text-decoration:none; font-size:.92rem; line-height:2.1; transition:.2s ease; display:inline-block;}
  footer a:hover{color:#fff; transform:translateX(3px);}
  footer .logo-footer{height:34px; margin-bottom:1rem;}
  footer .contact-item{
    display:flex; gap:.7rem; align-items:flex-start; margin-bottom:.9rem; font-size:.92rem;
  }
  footer .contact-item i{
    width:34px; height:34px; flex:0 0 34px;
    border-radius:9px;
    background:rgba(255,255,255,.07);
    display:flex; align-items:center; justify-content:center;
    color:var(--blue-light); font-size:.95rem;
  }
  .footer-bottom{
    position:relative; z-index:2;
    border-top:1px solid rgba(255,255,255,.08);
    margin-top:0rem;
    padding:1.4rem 0;
    font-size:.85rem;
  }
  .social-ic{
    width:38px;height:38px;border-radius:50%;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.1);
    display:flex;align-items:center;justify-content:center;
    color:#fff; transition:.25s ease;
  }
  .social-ic:hover{ background:var(--grad); border-color:transparent; transform:translateY(-3px); }

  /* ============ REVEAL ANIMATION ============ */
  .reveal{
    opacity:0;
    transform:translateY(28px);
    transition:opacity .7s ease, transform .7s ease;
  }
  .reveal.in{
    opacity:1;
    transform:translateY(0);
  }
  .reveal.d1{transition-delay:.08s;}
  .reveal.d2{transition-delay:.16s;}
  .reveal.d3{transition-delay:.24s;}
  .reveal.d4{transition-delay:.32s;}

  @media (prefers-reduced-motion: reduce){
    .reveal, .code-card, .metric-chip{ transition:none !important; animation:none !important; opacity:1 !important; transform:none !important;}
  }

  a:focus-visible, button:focus-visible{
    outline:3px solid var(--blue-light);
    outline-offset:2px;
  }

  @media (max-width:991px){
    .hero{padding:9.5rem 0 3.5rem;}
    .code-card{margin-top:3rem;}
  }


  /* ********************* new design******************** */
    /* ============ HERO SLIDER STYLES ============ */
.hero-slider-section {
  background: #f3faff;
  padding: 120px 0 0px;
  position: relative;
  overflow: hidden;
}

.wave-bg-pattern {
  position: absolute;
  top: 0;
  right: -5%;
  width: 55%;
  height: 100%;
  background: radial-gradient(ellipse at center, rgba(233, 30, 99, 0.06) 0%, rgba(26, 115, 232, 0.04) 50%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
  z-index: 1;
}

.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  z-index: 1;
}
.orb-pink {
  width: 350px;
  height: 350px;
  background: rgba(233, 30, 99, 0.12);
  top: 10%;
  right: 15%;
}
.orb-blue {
  width: 300px;
  height: 300px;
  background: rgba(26, 115, 232, 0.1);
  bottom: 5%;
  right: 5%;
}

.hero-content {
  position: relative;
  z-index: 5;
      margin-bottom: 18px;
}

.sub-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  letter-spacing: 1px;
  margin-bottom: 16px;
  display: inline-block;
  text-transform: uppercase;
}

.hero-heading {
  font-size: 2.5rem;
      font-weight: 700;
  color: #1e293b;
  line-height: 1.25;
  margin-bottom: 22px;
  font-family: 'Montserrat', sans-serif;
}

.hero-heading .text-pink {
  color: #e91e63;
}

.hero-heading .text-blue {
  color: #1a73e8;
}

.hero-desc {
  font-size: 1.1rem;
  color: #0f1113;
  line-height: 1.6;
  margin-bottom: 32px;
}

.btn-pink-custom {
     background: linear-gradient(135deg, #e11682, #df0a7b);
  color: #fff;
  padding: 10px 30px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(233, 30, 99, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-pink-custom:hover {
  color: #fff;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(233, 30, 99, 0.45);
}

.btn-white-custom {
  background: #ffffff;
  color: #1e293b;
  border: 1px solid #e2e8f0;
  padding: 10px 30px;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  transition: all 0.3s ease;
}

.btn-white-custom:hover {
  background: #f8fafc;
  color: #0f172a;
  transform: translateY(-3px);
  border-color: #cbd5e1;
}

.rating-text {
  font-size: 0.92rem;
  color: #475569;
}

.rating-badge {
  background: #f1f5f9;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 0.9rem;
  color: #334155;
  display: inline-block;
  border: 1px solid #e2e8f0;
}

.hero-visual-wrap {
  position: relative;
  z-index: 5;
  perspective: 1000px;
}

.laptop-3d-scene {
  position: relative;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  transform: rotateY(-12deg) rotateX(8deg);
  transform-style: preserve-3d;
  border-radius: 20px !important; /* स्मूथ राऊंड कॉर्नर्स */
  border: 7px solid rgba(226, 232, 240, 0.8) !important; /* हलकी ट्रान्सपरंट बॉर्डर */
  box-shadow: 0 20px 40px -15px rgba(15, 23, 42, 0.12), 
              0 10px 20px -10px rgba(0, 0, 0, 0.04) !important; /* प्रीमियम शॅडो */
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.laptop-mockup-img {
  display: block;
  width: 100%;
    height: 350px;
  filter: drop-shadow(0 25px 40px rgba(15, 23, 42, 0.28));
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 20px !important; /* स्मूथ राऊंड कॉर्नर्स */
  
}

.float-card {
  position: absolute;
  background: #ffffff;
  padding: 10px 18px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1e293b;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  z-index: 10;
  animation: floatCard 4s ease-in-out infinite alternate;
}

.card-left { top: 40%; left: -30px; }
.card-right { top: 45px; right: -30px; animation-delay: 2s; }

@keyframes floatCard {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.visual-decor-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.decor-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(233, 30, 99, 0.18);
  animation: ringSpin 32s linear infinite;
}
.decor-ring.ring-1 { width: 420px; height: 420px; }
.decor-ring.ring-2 {
  width: 580px;
  height: 580px;
  border-color: rgba(26, 115, 232, 0.15);
  animation-duration: 48s;
  animation-direction: reverse;
}
@keyframes ringSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.decor-particles { position: absolute; inset: 0; }
.decor-particles span {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e91e63, #1a73e8);
  opacity: 0.55;
  animation: particleFloat 6s ease-in-out infinite;
}
.decor-particles span:nth-child(1) { top: 8%;  left: 10%; animation-delay: 0s; }
.decor-particles span:nth-child(2) { top: 18%; left: 84%; animation-delay: .8s; }
.decor-particles span:nth-child(3) { top: 72%; left: 6%;  animation-delay: 1.6s; }
.decor-particles span:nth-child(4) { top: 86%; left: 76%; animation-delay: 2.4s; }
.decor-particles span:nth-child(5) { top: 45%; left: 96%; animation-delay: 3.2s; }
.decor-particles span:nth-child(6) { top: 4%;  left: 55%; animation-delay: 4s; }
.decor-particles span:nth-child(7) { top: 94%; left: 44%; animation-delay: 4.8s; }
.decor-particles span:nth-child(8) { top: 55%; left: 1%;  animation-delay: 5.4s; }

@keyframes particleFloat {
  0%, 100% { transform: translateY(0) scale(1);       opacity: .35; }
  50%      { transform: translateY(-18px) scale(1.4); opacity: .9; }
}

.decor-dot-line {
  position: absolute;
  width: 2px;
  background: repeating-linear-gradient(to bottom, rgba(26, 115, 232, 0.35) 0 6px, transparent 6px 12px);
  animation: dotLineMove 3s linear infinite;
}
.decor-dot-line.l1 { height: 120px; top: 4%;    left: 16%; }
.decor-dot-line.l2 { height: 160px; bottom: 6%; right: 12%; animation-direction: reverse; }
@keyframes dotLineMove {
  from { background-position-y: 0; }
  to   { background-position-y: 24px; }
}

.laptop-float-wrap {
  position: relative;
  z-index: 2;
  animation: laptopFloat 5s ease-in-out infinite;
}
@keyframes laptopFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-14px); }
}

.laptop-float-wrap::before {
  content: '';
  position: absolute;
  inset: 8% 6%;
  background:
    radial-gradient(circle at 30% 30%, rgba(233, 30, 99, 0.28), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(26, 115, 232, 0.24), transparent 60%);
  filter: blur(40px);
  z-index: -1;
  animation: glowPulse 6s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: .6; transform: scale(1); }
  50%      { opacity: 1;  transform: scale(1.08); }
}

.hero-visual-wrap.theme-erp .laptop-float-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 189, 46, 0.32), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(233, 30, 99, 0.20), transparent 60%);
}
.hero-visual-wrap.theme-app .laptop-float-wrap::before {
  background:
    radial-gradient(circle at 30% 30%, rgba(39, 201, 63, 0.28), transparent 60%),
    radial-gradient(circle at 75% 70%, rgba(26, 115, 232, 0.22), transparent 60%);
}

.mini-chart-badge {
  position: absolute;
  bottom: 12%;
  right: -8%;
  width: 150px;
  background: #ffffff;
  border-radius: 14px;
  padding: 10px 12px 8px;
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.15);
  z-index: 10;
  animation: floatCard 4.5s ease-in-out infinite alternate;
  animation-delay: 1s;
}
.mini-chart-badge svg { width: 100%; height: 40px; display: block; }
.mini-chart-badge .chart-line {
  fill: none;
  stroke: #e91e63;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
  animation: drawLine 2.6s ease forwards infinite alternate;
}
.mini-chart-badge .chart-line-erp { stroke: #ffbd2e; }
.mini-chart-badge .chart-line-app { stroke: #27c93f; }
@keyframes drawLine {
  to { stroke-dashoffset: 0; }
}
.mini-chart-badge .chart-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: #1e293b;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .decor-ring, .decor-particles span, .decor-dot-line,
  .laptop-float-wrap, .laptop-float-wrap::before,
  .float-card, .mini-chart-badge, .mini-chart-badge .chart-line {
    animation: none !important;
  }
}

@media (max-width: 991px) {
  .decor-ring, .decor-particles, .decor-dot-line, .mini-chart-badge {
    display: none;
  }
}

/* =============================================================
   SLICK CAROUSEL HERO INDICATORS OVERRIDE
   Matches Bootstrap Hero Carousel indicators design (.custom-indicators)
   ============================================================= */

/* 1. Slick Dots Container Layout */
/* Slick dots base styles */
.slick-dots {
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 0;
    list-style: none;
}

.slick-dots li {
    margin: 0 !important;
    width: auto !important;
    height: auto !important;
}

/* Inactive dots (बाकीचे न दिसणारे dots) */
/* Inactive dots (active नसलेल्या dots ची height/width लहान केली आहे) */
.slick-dots li button {
    width: 8px !important;
    height: 8px !important;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: #cbd5e1 !important;
    opacity: 0.7;
    font-size: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.slick-dots li button:hover {
    background: #94a3b8 !important;
    opacity: 1;
    transform: scale(1.2);
}

/* Active dot (सध्याचा मोठा pill dot) */
.slick-dots li.slick-active button {
    width: 32px !important;
    height: 8px !important;
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #2196f3 100%) !important;
    border-radius: 9999px;
    opacity: 1;
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.45);
}

/* Hide default text/numbers inside slick buttons */
.slick-dots li button:before {
    display: none !important;
}


.custom-indicators {
  bottom: -40px;
}
.custom-indicators button {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #cbd5e1 !important;
  border: none !important;
  margin: 0 5px !important;
  transition: all 0.3s ease;
}
.custom-indicators button.active {
  background-color: #e91e63 !important;
  transform: scale(1.3);
}

.carousel-item .anim-item {
  opacity: 0;
  transform: translateY(35px);
  transition: all 0.7s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-item .anim-laptop {
  opacity: 0;
  transform: rotateY(-12deg) rotateX(8deg) scale(0.9) translateY(40px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-item.active .anim-item {
  opacity: 1;
  transform: translateY(0);
}

.carousel-item.active .anim-laptop {
  opacity: 1;
  transform: rotateY(-12deg) rotateX(8deg) scale(1) translateY(0);
}

.carousel-item.active .d-1 { transition-delay: 0.15s; }
.carousel-item.active .d-2 { transition-delay: 0.3s; }
.carousel-item.active .d-3 { transition-delay: 0.45s; }
.carousel-item.active .d-4 { transition-delay: 0.6s; }
.carousel-item.active .d-5 { transition-delay: 0.75s; }
.carousel-item.active .anim-laptop { transition-delay: 0.3s; }
.carousel-inner {
      padding-top: 20px;
}


/* ********************** hero section end***************** */

/* ******************* trust by 100 % business start *************/
.trusted-section .logo-item {
  padding: 0px;
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.trusted-section .logo-item img {
  max-height: 103px;
  max-width: 130px;
  filter: grayscale(20%);
  transition: filter 0.3s ease;
}
.trusted-section .logo-item img:hover {
  filter: grayscale(0%);
}
/* ===== Fix vertical alignment of placed-company logos ===== */
.trusted-slider .logo-item {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 90px;
  padding: 10px 20px;
}



@media (max-width: 575px) {
  .trusted-slider .logo-item {
    height: 70px;
    padding: 8px 12px;
  }
  .trusted-slider .logo-item img {
    max-height: 45px;
  }
}
.why-list li {
  font-size: 1.05rem;
  margin-bottom: 0.8rem;
  color: var(--ink);
}
.text-pink {
  color: var(--pink)!important;
}
.text-blue {
  color: var(--blue) !important;
}

/* ============ NEW WHY COMTRANSE DESIGN ============ */
.why-comtranse-wrapper {
  padding-right: 0.5rem;
}

.why-card {
  background: #ffffff;
  border: 1px solid #e7ecf3;
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  height: 100%;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 12px rgba(8, 27, 51, 0.03);
}

.why-card:hover {
  transform: translateY(-4px);
  border-color: rgba(230, 18, 122, 0.3);
  box-shadow: 0 10px 22px rgba(230, 18, 122, 0.08);
}

.why-icon-box {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}

.why-card-content h6 {
  font-size: 0.9rem;
  font-weight: 700;
  color: #0e1b2b;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.why-card-content p {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0;
  line-height: 1.4;
}

/* Icon Box Themes */
.bg-pink-light { background-color: #fde8f0; }
.text-pink { color: #e6127a !important; }

.bg-blue-light { background-color: #e8f2fc; }
.text-blue { color: #1466c9 !important; }

.bg-purple-light { background-color: #f3e8fc; }
.text-purple { color: #8e24aa !important; }

.bg-green-light { background-color: #e8f8f0; }
.text-green { color: #2e7d32 !important; }

.bg-orange-light { background-color: #fff3e0; }
.text-orange { color: #ef6c00 !important; }

.bg-teal-light { background-color: #e0f2f1; }
.text-teal { color: #00695c !important; }




.industry-pill {
  background: #f8fafc;
  border: 1px solid var(--line);
  border-radius: 12px;
  transition: all 0.3s ease;
}
.industry-pill .ic {
  width: 44px;
  height: 44px;
  margin: 0 auto;
  border-radius: 10px;
  background: rgba(20, 102, 201, 0.08);
  color: var(--blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.industry-pill:hover {
  background: #fff;
  border-color: var(--pink);
  transform: translateY(-4px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.06);
}
.industry-pill:hover .ic {
  background: var(--pink);
  color: #fff;
}

/* ******************* trust by 100 % business end *************/

/* ==================================================================
   NEW SECTIONS — Featured Products / Latest Projects / Dev Process /
   Case Studies / Testimonials / Locations (matches reference layout)
   ================================================================== */

.btn-outline-pill{
  border:1.5px solid var(--line);
  color:var(--ink);
  font-weight:600;
  font-size:.85rem;
  padding:.55rem 1.3rem;
  border-radius:50px;
  text-decoration:none;
  background:#fff;
  transition:.25s ease;
  white-space:nowrap;
}
.btn-outline-pill:hover{
  border-color:var(--blue);
  color:var(--blue);
  transform:translateY(-2px);
}

/* ---- Latest Projects ---- */
.proj-mini-card { 
  text-align: center; 
}

.proj-thumb {
  height: 160px;
  border-radius: 14px;
  overflow: hidden;
  display: flex; 
  align-items: center; 
  justify-content: center;
  margin-bottom: 0.9rem;
  box-shadow: 0 8px 20px rgba(20, 40, 80, 0.08);
  border: 1px solid var(--line);
  background: #f8fafc;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.proj-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.proj-mini-card:hover .proj-thumb img {
  transform: scale(1.06);
}

.proj-mini-card:hover .proj-thumb {
  box-shadow: 0 12px 28px rgba(20, 40, 80, 0.15);
}

.proj-mini-card h6 { 
  font-weight: 700; 
  font-size: 0.95rem; 
  color: var(--ink); 
  margin: 0;
  text-align: center; 
  font-family: 'Montserrat', sans-serif;
}

/* ---- Dev Process (tech icons) ---- */
.tech-pill{
  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding:1rem .5rem;
  text-align:center;
  transition:.25s ease;
}
.tech-pill:hover{
  border-color:transparent;
  box-shadow:0 14px 28px rgba(20,40,80,.1);
  transform:translateY(-4px);
}
.tech-pill img{
  width:34px; height:34px; object-fit:contain; margin-bottom:.5rem;
}
.tech-pill span{
  display:block; font-size:.74rem; font-weight:600; color:var(--ink);
}

/* ---- Case Study card ---- */
.case-study-card {
  background: var(--bg-soft);
  border-radius: 18px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  height: 100%;
  box-sizing: border-box;
}
.case-study-text h5{
  font-family: 'Montserrat', sans-serif;
      font-size: 1.4rem;
      font-weight: 700;
}
.case-study-text a{
  
      color: var(--bs-code-color);
    font-weight: 700;
}
.case-study-text p{
     color: var(--muted);
         font-size: 1rem;
}

.case-study-img {
  width: 100%;
  height: auto; /* फिक्स 205px ऐवजी auto करा */
  max-height: 280px; /* जास्त मोठी होऊ नये म्हणून */
  border-radius: 15px !important;
  overflow: hidden;
  margin: 0 auto;
}

.case-study-img img {
  width: 100%;
  height: 200px;
  display: block;
}
.slick-prev:before, .slick-next:before {
    font-family: 'slick';
    font-size: 20px;
    line-height: 1;
    opacity: .75;
    color: #df0a7b!important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.case-study-slider .slick-slide {
  padding: 0 12px;
}
.case-study-slider {
  margin: 0 -12px;
}
.case-study-slider .case-study-card {
  display: flex !important;
  flex-direction: column;
  gap: 1.2rem;
  box-sizing: border-box;
}
.case-study-slider {
  position: relative;
}

.case-study-slider .slick-prev,
.case-study-slider .slick-next {
  position: absolute;
  top: -45px;
  z-index: 10;
  background: #fff;
  border: 1px solid var(--line);
  width: 35px;
  height: 35px;
  border-radius: 50%;
  color: var(--pink);
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.case-study-slider .slick-prev {
  right: 45px;
  left: auto;
}

.case-study-slider .slick-next {
  right: 0;
}

.case-study-slider .slick-prev:hover,
.case-study-slider .slick-next:hover {
  background: var(--pink);
  color: #fff;
}
/* ---- Testimonials mini ---- */
.testi-mini-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:0.3rem 1.3rem;
  height:100%;
}
.testi-mini-card .quote-ic{
      font-size: 2.5rem;
    color: var(--pink);
    margin-bottom: .0rem;
    display: block;
}
.testi-mini-card p{
  /* font-size:.88rem;
  color:var(--ink);
  min-height:70px; */
      color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 2.8em;
    margin-bottom: 15px;
}
.testi-mini-card .who{
  display:flex; align-items:center; gap:.7rem; margin-top:1rem;
}
.testi-mini-card .who h6{ margin:0; font-weight:700; font-size:.85rem; }
.testi-mini-card .who small{ color:var(--muted); font-size:.74rem; }
.testimonial-slider .slick-slide {
  padding: 0 10px;
}
.testimonial-slider {
  margin: 0 -10px;
}
.testimonial-slider .slick-dots {
    position: relative;
    bottom: 0;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    margin-top: 1.2rem;
    padding: 0;
    list-style: none;
}

.testimonial-slider .slick-dots li {
    margin: 0;
    padding: 0;
    width: auto;
    height: auto;
}

.testimonial-slider .slick-dots li button {
    font-size: 0;
    line-height: 0;
    display: block;
    width: 14px;
    height: 14px;
    padding: 0;
    cursor: pointer;
    background: #cbd5e1 !important;
    border: 0;
    border-radius: 9999px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1 !important;
}

.testimonial-slider .slick-dots li button:before {
    display: none !important;
}

.testimonial-slider .slick-dots li button:hover {
    background: #94a3b8 !important;
    transform: scale(1.15);
}

.testimonial-slider .slick-dots li.slick-active button {
    width: 38px;
    height: 14px;
    background: linear-gradient(135deg, #e91e63 0%, #9c27b0 50%, #2196f3 100%) !important;
    border-radius: 9999px;
    box-shadow: 0 4px 14px rgba(233, 30, 99, 0.45);
    transform: scale(1);
}
.testi-mini-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
/* ---- Locations ---- */
.locations-card{
  background:var(--bg-soft);
  border-radius:18px;
  padding:1.6rem;
  height:100%;
}
.loc-list li{
  display:flex; align-items:flex-start; gap:.9rem;
  padding:.9rem 0;
  border-bottom:1px dashed var(--line);
}
.loc-list li:last-child{ border-bottom:none; }
.loc-pin{
  width:40px; height:40px; flex:0 0 40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.05rem;
}
.loc-pink{ background:linear-gradient(135deg,#ff5c9d,#e6127a); }
.loc-blue{ background:linear-gradient(135deg,#1a73e8,#1466C9); }
.loc-list h6{ margin:0; font-weight:700; font-size:.92rem; }
.loc-list small{ color:var(--muted); }

/* ============ LOCATIONS (MAP + LIST) ============ */
.loc-section-wrap{
  display:flex;
  align-items:center;
  gap:1.5rem;
}

.india-map-wrap{
  position:relative;
  flex:0 0 42%;
  max-width:220px;
}

.india-map-svg{
  width:100%;
  height:auto;
  display:block;
  filter: brightness(0) saturate(100%) invert(79%) sepia(10%) saturate(500%) hue-rotate(180deg);
  opacity:1;
}
.map-pin{
  position:absolute;
  transform:translate(-50%,-100%);
  color:var(--pink);
  font-size:1.1rem;
  display:flex;
  align-items:center;
  justify-content:center;
}
.map-pin.pin-blue{ color:var(--blue); }
.map-pin i{
  position:relative;
  z-index:2;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25));
}
.pin-ping{
  position:absolute;
  bottom:1px;
  left:50%;
  transform:translateX(-50%);
  width:10px; height:10px;
  border-radius:50%;
  background:var(--pink);
  opacity:.35;
  animation:pinPulse 1.8s ease-out infinite;
}
.map-pin.pin-blue .pin-ping{ background:var(--blue); }
@keyframes pinPulse{
  0%{ transform:translateX(-50%) scale(.6); opacity:.5; }
  100%{ transform:translateX(-50%) scale(2.6); opacity:0; }
}

.loc-plain-list{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:1.6rem;
}
.loc-plain-list li{
  display:flex;
  align-items:center;
  gap:.9rem;
}
.loc-dot{
  width:38px; height:38px; flex:0 0 38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1rem;
}
.loc-dot-pink{ background:linear-gradient(135deg,#ff5c9d,#e6127a); }
.loc-dot-blue{ background:linear-gradient(135deg,#1a73e8,#1466C9); }
.loc-plain-list h6{ margin:0; font-weight:700; font-size:.95rem; color:var(--ink); }
.loc-plain-list small{ color:var(--muted); font-size:.85rem; }

@media(max-width:767px){
  .loc-section-wrap{ flex-direction:column; align-items:flex-start; }
  .india-map-wrap{ max-width:180px; margin:0 auto 1rem; }
}


/* ******************* asked question********* */
/* ============ FAQ SECTION ============ */
.faq-accordion{
  display:flex;
  flex-direction:column;
  gap:.9rem;
}
.faq-item{
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq-item.active{
  border-color:transparent;
  box-shadow:0 14px 30px rgba(20,40,80,.08);
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  text-align:left;
  padding:0.6rem 1.3rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
  cursor:pointer;
}
.faq-icon{
  flex:0 0 30px;
  height:30px;
  width:30px;
  border-radius:50%;
  background:rgba(20,102,201,.08);
  color:var(--blue);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  transition:transform .3s ease, background .3s ease, color .3s ease;
}
.faq-item.active .faq-icon{
  background:var(--grad);
  color:#fff;
  transform:rotate(135deg);
}
.faq-answer{
  max-height:0;
  overflow:hidden;
  transition:max-height .35s ease, padding .35s ease;
  padding:0 1.3rem;
}
.faq-item.active .faq-answer{
  max-height:200px;
  padding:0 1.3rem 1.2rem;
}
.faq-answer p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

/* ============ FAQ CTA BANNER ============ */
.faq-cta-banner{
  background:var(--grad);
  border-radius:22px;
 padding: 1.6rem 2.2rem;
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:1.8rem;
  text-align:center;
  position:relative;
  overflow:hidden;
      width: 100%;
}
.faq-cta-banner::before{
  content:'';
  position:absolute; right:-60px; top:-60px;
  width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.08);
}
.faq-cta-banner::after{
  content:'';
  position:absolute; left:-40px; bottom:-70px;
  width:180px; height:180px; border-radius:50%;
  background:rgba(255,255,255,.07);
}
.faq-cta-banner h3{
  font-weight:800;
  font-size:1.6rem;
  margin-bottom:.5rem;
  position:relative; z-index:1;
}
.faq-cta-banner p{
  color:rgba(255,255,255,.9);
  margin:0;
  position:relative; z-index:1;
}
.faq-cta-btns{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  justify-content:center;
  position:relative; z-index:1;
}
.faq-cta-phone{
  background:#fff;
  color:var(--blue-deep, #1466C9);
  font-weight:700;
  padding:.85rem 1.6rem;
  border-radius:50px;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  transition:.25s ease;
}
.faq-cta-phone:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 22px rgba(0,0,0,.15);
  color:var(--blue);
}
.faq-cta-quote{
  border:1.5px solid rgba(255,255,255,.6);
  color:#fff;
  font-weight:700;
  padding:.85rem 1.6rem;
  border-radius:50px;
  text-decoration:none;
  transition:.25s ease;
}
.faq-cta-quote:hover{
  background:rgba(255,255,255,.15);
  border-color:#fff;
  color:#fff;
  transform:translateY(-3px);
}

@media(max-width:991px){
  .faq-cta-banner{ margin-top:1rem; }
}

/* *****************whatsapp*-********* */
/* ============ FLOATING SUPPORT BUTTONS (SEPARATE CALL + WHATSAPP) ============ */
/* Floating Main Container */
/* ============ FLOATING SUPPORT BUTTONS & WHATSAPP ============ */
.float-support-wrap {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  /* Smooth gentle vertical floating movement */
  animation: floatContinuous 4s ease-in-out infinite;
}

@keyframes floatContinuous {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

/* 1. Mobile Number Card (By Default Visible) */
/* 2. Soft Continuous Glow & Pulse for Support Phone Card */
.call-popup-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 5px 14px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
  border: 1px solid #fde8f0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  margin-bottom: 5px;
  /* Gentle pulsing shadow to look interactive & professional */
  animation: cardPulse 3s ease-in-out infinite;
}

@keyframes cardPulse {
  0%, 100% {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
  }
  50% {
    box-shadow: 0 14px 30px rgba(230, 18, 122, 0.22);
  }
}
/* Phone icon inside card gentle wiggle */
.call-popup-icon i {
  display: inline-block;
  animation: phoneWiggle 5s ease-in-out infinite;
}

@keyframes phoneWiggle {
  0%, 90%, 100% { transform: rotate(0deg); }
  92% { transform: rotate(15deg); }
  94% { transform: rotate(-15deg); }
  96% { transform: rotate(10deg); }
  98% { transform: rotate(-10deg); }
}

.call-popup-icon {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff5c9d, #e6127a);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(230, 18, 122, 0.3);
}

.call-popup-info {
  display: flex;
  flex-direction: column;
}

.call-popup-info small {
  font-size: 0.72rem;
  font-weight: 700;
  color: #b60f63;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.call-popup-number {
  font-size: 0.9rem;
  font-weight: 800;
  color: #0e1b2b;
  text-decoration: none;
  line-height: 1.2;
  margin: 2px 0;
}

.call-popup-number:hover {
  color: #e6127a;
}

.call-popup-time {
  font-size: 0.72rem;
  color: #5c6b7c;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

/* 2. WhatsApp Floating Button with Animation */
/* WhatsApp Container Adjustment */
.wa-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.float-wa-btn {
  position: relative;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #25d366;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  text-decoration: none;
  border: 3px solid #ffffff;
  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.35);
  transition: transform 0.3s ease;
  z-index: 2;
}

.float-wa-btn:hover {
  transform: scale(1.08);
}

/* Soft Radial Glow Ring Animation (रेफरन्स इमेजप्रमाणे) */
.wa-container::before,
.wa-container::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: rgba(37, 211, 102, 0.5);
  z-index: 1;
}

.wa-container::before {
  animation: waPulseContinuous 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.wa-container::after {
  animation: waPulseContinuous 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.2s;
}

@keyframes waPulseContinuous {
  0% {
    transform: translateX(-50%) scale(1);
    opacity: 0.7;
  }
  100% {
    transform: translateX(-50%) scale(1.65);
    opacity: 0;
  }
}

/* Bottom Text Styling */
.wa-text {
  font-size: 0.82rem;
  font-weight: 700;
  color: #0e1b2b;
  letter-spacing: -0.2px;
}
/* Mobile Responsive */
@media (max-width: 767px) {
  .float-support-wrap {
    right: 14px;
    bottom: 14px;
    gap: 10px;
  }

  .call-popup-card {
    min-width: unset;
    width: 46px;
    height: 46px;
    padding: 0;
    border-radius: 50%;
    justify-content: center;
    position: relative;
    /* overflow: hidden;  <-- हे काढून टाका */
  }

  .call-popup-info {
    display: none;
  }

  .call-popup-icon {
    width: 46px;
    height: 46px;
    font-size: 1.15rem;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;   /* icon गोल आणि clean राहण्यासाठी हे इथे द्या */
  }

  .float-wa-btn {
    width: 46px;
    height: 46px;
    font-size: 1.3rem;
    border-width: 2px;
  }

  .wa-container::before,
  .wa-container::after {
    width: 46px;
    height: 46px;
  }

  .wa-text {
    display: none;
  }

  /* ---- PINK CALL BUTTON PULSE ANIMATION (mobile only) ---- */
  .call-popup-card::before,
  .call-popup-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(230, 18, 122, 0.5);
    z-index: -1;
  }

  .call-popup-card::before {
    animation: callPulseMobile 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  }

  .call-popup-card::after {
    animation: callPulseMobile 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite 1.2s;
  }

  @keyframes callPulseMobile {
    0% {
      transform: translateX(-50%) scale(1);
      opacity: 0.7;
    }
    100% {
      transform: translateX(-50%) scale(1.65);
      opacity: 0;
    }
  }
}

/* =================================================================
   TOPBAR FIX — social icons, YouTube icon, Enquiry Now CTA
   ================================================================= */

/* The topbar row now has 3 clear groups: info | icons+CTA | login/support */
.topbar .row-inner{
  gap: 1.5rem;
}
.topbar-info{
  flex: 0 1 auto;
}
.topbar-info i{
      font-size: 0.9rem;
}
.nav-right{
  flex: 0 0 auto;
  margin-left: auto;
}
.topbar-social {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
}



.nav-cta-btn{
  margin-left: .35rem;
  box-shadow: 0 4px 12px rgba(26,109,255,.25);
}
.nav-cta-btn i{
  font-size: .8rem;
  transition: transform .25s ease;
}
.nav-cta-btn:hover i{ transform: translateX(3px); }

@media(max-width: 1200px){
  .topbar-info span:nth-child(2){ display:none; } /* hide email on tighter widths so the CTA always has room */
}

/* =================================================================
   HERO SLIDER — vertical dots on the right + reveal / typewriter
   ================================================================= */

/* Slick needs fade-mode slides absolutely stacked; keep container height stable */
.hero-slick-slider .slick-list,
.hero-slick-slider .slick-track{
  overflow: visible;
}
.hero-slick-slider.slick-initialized .slick-slide{
  opacity: 0;
  transition: opacity .5s ease;
}
.hero-slick-slider.slick-initialized .slick-slide.slick-active{
  opacity: 1;
  position: relative;
  z-index: 2;
}

/* Move dots to the bottom-left for all screen sizes */
.hero-slider-section .slick-dots,
.hero-slick-slider .slick-dots {
  position: absolute !important;
  bottom: 10px !important;
  left: 8% !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  flex-direction: row !important;
  justify-content: flex-start !important;
  gap: 14px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;

  z-index: 20 !important;
}

/* Dots Button Styling */
.hero-slider-section .slick-dots li {
  position: relative !important;
  display: inline-block !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.hero-slider-section .slick-dots li button {
  font-size: 0 !important;
  line-height: 0 !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 50% !important;
  border: none !important;
  background-color: rgba(230, 18, 122, 0.3) !important;
  outline: none !important;
  transition: all 0.3s ease-in-out !important;
}

.hero-slider-section .slick-dots li button:before {
  display: none !important;
  content: "" !important;
}

.hero-slider-section .slick-dots li.slick-active {
  width: 32px !important;
   height: 10px !important;
}

.hero-slider-section .slick-dots li.slick-active button {
  width: 32px !important;
  border-radius: 20px !important;
  background-color: #e6127a !important;
  box-shadow: 0 4px 10px rgba(230, 18, 122, 0.4) !important;
}

.hero-slider-section .slick-dots li:hover button {
  background-color: #e6127a !important;
}

/* Responsive Alignment */
@media (max-width: 991px) {
  .hero-slider-section .slick-dots {
    bottom: 15px !important;
    left: 15px !important;
    padding-left: 0 !important;
  }
}

@media (max-width: 576px) {
  .hero-slider-section .slick-dots {
    left: 15px !important;
    transform: none !important;
    padding-left: 0 !important;
    justify-content: flex-start !important;
  }
}

/* Reserve a fixed block of space for the heading so the typewriter never shifts the layout below it */
.hero-heading.hero-typewriter{
  min-height: 2.6em; /* ~3 lines at the desktop line-height, largest heading among the slides */
  display: block;
}
@media(max-width: 991px){
  .hero-heading.hero-typewriter{ min-height: 3.3em; }
}
@media(max-width: 575px){
  .hero-heading.hero-typewriter{ min-height: 3.9em; }
}

/* Blinking caret while typing */
.hero-heading.hero-typewriter.is-typing::after{
  content: '';
  display: inline-block;
  width: 3px;
  height: .85em;
  margin-left: 4px;
  background: var(--pink, #e91e63);
  vertical-align: -0.1em;
  animation: caretBlink .8s steps(1) infinite;
}
@keyframes caretBlink{
  0%, 49%{ opacity: 1; }
  50%, 100%{ opacity: 0; }
}

/* Sub-title / description / buttons / rating fade-up in after the heading types out, without affecting layout height */
.hero-anim{
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .55s ease, transform .55s ease;
}
.hero-anim.is-visible{
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce){
  .hero-heading.hero-typewriter.is-typing::after{ animation: none; }
  .hero-anim{ opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-slick-slider.slick-initialized .slick-slide{ transition: none !important; }
}
/* Typewriter चालू असताना clip-text नीट वर्क होण्यासाठी inline-block द्या */
.hero-heading .text-pink,
.hero-heading .text-blue {
    display: inline-block;
    vertical-align: top;
}

/* Specific text color जर simple solid pink पाहिजे असेल */
.hero-heading .text-pink {
    color: #e91e63 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}

.hero-heading .text-blue {
    color: #1a73e8 !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    background-clip: unset !important;
}
/* Filtered cards animation */
[data-category] {
  transition: all 0.4s ease-in-out;
}
.hide-card {
  display: none !important;
}
.show-card {
  display: block !important;
  animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

  /* ============ REVEAL (uses your existing .reveal / IntersectionObserver in footer script) ============ */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal.d1{ transition-delay:.08s; }
  .reveal.d2{ transition-delay:.16s; }
  .reveal.d3{ transition-delay:.24s; }
  .reveal.d4{ transition-delay:.32s; }
  .reveal.d5{ transition-delay:.4s; }
  .reveal.d6{ transition-delay:.48s; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ transition:none !important; opacity:1 !important; transform:none !important; }
  }
  
  /* ********************* blog design ******************* */
  /* ================= BLOG SECTION STYLES ================= */
.bg-blog-custom {
  background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important;
  
}
.blog-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  border: 1px solid rgba(233, 30, 99, 0.08);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(233, 30, 99, 0.12);
  border-color: rgba(233, 30, 99, 0.3);
}

.blog-img-wrap {
  position: relative;
  overflow: hidden;
  height: 220px;
}

.blog-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.blog-card:hover .blog-img-wrap img {
  transform: scale(1.08);
}

.blog-category {
  position: absolute;
  top: 15px;
  right: 15px;
     background: linear-gradient(135deg, #e11682, #df0a7b);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3);
}

.blog-content {
     padding: 8px 24px 10px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 9px;
}

.blog-meta i {
  color: #e91e63;
  margin-right: 4px;
}

.blog-title {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
  
  /* Fixed Height & Line Limit */
  height: 2.8em; /* 2 ओळींसाठी फिक्स जागा */
  display: -webkit-box;
  -webkit-line-clamp: 2; /* जास्तीत जास्त 2 ओळी */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-title a {
  color: #1e293b;
  text-decoration: none;
  transition: color 0.3s ease;
}

.blog-title a:hover {
  color: #e91e63;
}

/* Description साठी: जास्तीत जास्त 3 lines आणि फिक्स height */
.blog-desc {
  font-size: 0.9rem;
  color: #373839;
  line-height: 1.6;
  margin-bottom: 5px;
  
  /* Fixed Height & Line Limit */
  height: 4.8em; /* 3 ओळींसाठी फिक्स जागा */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* जास्तीत जास्त 3 ओळी */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-footer {
  border-top: 1px solid #f1f5f9;
  padding-top: 7px;
}

.btn-read-more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e91e63;
  font-weight: 600;
  font-size: 0.9rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-read-more i {
  transition: transform 0.3s ease;
}

.btn-read-more:hover {
  color: #0d6efd;
}

.btn-read-more:hover i {
  transform: translateX(5px);
}

.blog-card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}
.blog-card-link:hover {
  text-decoration: none;
  color: inherit;
}
/* FAQ Video Card Styling */
.faq-video-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  background: linear-gradient(135deg, #1e293b, #0f172a); /* इमेज लोड न झाल्यास असा दिसेल */
}

.video-thumbnail-wrapper {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 16px;
  height: 250px; /* व्हिडिओ ची साईझ/हाइट कमी केली आहे */
}

.video-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* इमेज स्क्रीनला व्यवस्थित फिट होईल */
  transition: transform 0.4s ease;
}

.video-thumbnail-wrapper:hover .video-thumb {
  transform: scale(1.05);
}

/* Overlay & Play Button Styling */
.play-btn-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.video-thumbnail-wrapper:hover .play-btn-overlay {
  background: rgba(0, 0, 0, 0.15);
}

.play-btn {
  width: 55px;
  height: 55px;
  background: #e91e63; /* Accent Pink Color */
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  padding-left: 3px;
  box-shadow: 0 0 15px rgba(233, 30, 99, 0.6);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.video-thumbnail-wrapper:hover .play-btn {
  transform: scale(1.15);
  background: #d81b60;
}
  .custom-swal-popup {
    border-radius: 14px !important;
    padding: 1.8em 4px !important;
        border-bottom: 4px solid var(--blue)!important;
        width: 400px!important;
}
.custom-swal-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #0d3b66 !important;
}
.custom-swal-btn {
    background-color: var(--blue) !important;
    color: #fff !important;
      padding: 4px 22px !important;
    border-radius: 6px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border: none !important;
    transition: 0.3s ease;
}
.custom-swal-btn:hover {
    background-color: var(--pink) !important;
}
div:where(.swal2-icon){
  margin: 0em auto .6em!important;
}
body{
  overflow-x: hidden;
}
.swal2-html-container {
    font-size: 16px !important;
    line-height: 1.6 !important;
}
.swal2-timer-progress-bar {
    background: green !important;
}