.navbar .mega .dropdown-toggle::after { display:none; }

.navbar .mega .dropdown-menu.mega-menu{
  width: 380px;
  background: #1a1a1a;
  border: 0;
  border-radius: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  margin-top: 0px;
  right:0;
}


.mega-topbar{
  height: 4px;
  background: #c21f54;
}

.mega-grid{
  position: relative;
  display: block;
  grid-template-columns: 1fr 1fr;
}

/* center divider */
.mega-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:0; bottom:0;
  width:0px;
  background:#787878;
  opacity:.75;
}

/* columns */
.mega-col{ padding: 18px 22px 14px; }

.mega-title{
  color:#fff;
  font-weight: 700;
  font-size: 16px;
  margin: 0 0 12px;
}

/* list styles */
.mega-list{ list-style:none; margin:0; padding:0; }
.mega-list li{
  border-bottom: 1px solid #3b3b3b;
}
.mega-list li:last-child{ border-bottom:0; }

.mega-list a {
  display: block;
  padding: 11px 0 11px 18px;
  color: #d2d2d2;
  text-decoration: none;
  font-size: 34px;
  letter-spacing: .2px;
  position: relative;
  transition: color .2s ease;
}

@media (min-width: 992px) { /* desktop aur us se badi screens */
  .mega-list a {
    font-size: 16px;
  }
}

/* SVG as bullet icon */
.mega-list a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 6px;
  height: 7px;
  transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='7' viewBox='0 0 6 7' fill='none'><path d='M5.41992 3.65464L0.0573403 6.75073L0.0573406 0.558556L5.41992 3.65464Z' fill='white' fill-opacity='0.5'/></svg>") no-repeat center;
  background-size: contain;
}

/* hover state */
.mega-list a:hover{
  color:#ffffff;
}

/* open on hover for desktops */
@media (min-width: 992px){
  .navbar .mega:hover > .dropdown-menu{ display:block; }
}

/* mobile: full-width, no divider bar, native collapse */
@media (max-width: 991.98px){
  .navbar .mega .dropdown-menu.mega-menu{
    position: static;
    width: 100%;
    box-shadow: none;
    margin-top: 0;
    margin:0px;
  }
  .mega-grid{ grid-template-columns: 1fr; }
  .mega-grid::before{ display:none; }
  .mega-col{ padding: 14px 16px; }
  .mega-topbar{ display:none; }
  .mega-list a::before{ left:0; }  /* better alignment on mobile */
}

/* ── Base: desktop (≥1200px) */
.offcanvas-half{
  width: 1000px !important;   /* fixed desktop width */
  max-width: 1100px;
  border-left: 1px solid #2b2b2b;
}

/* Better scrolling inside */
#leadForm .offcanvas-body{
  max-height: calc(100vh - 60px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Smooth slide & shadow */
.offcanvas.offcanvas-end{
  transition: transform .35s ease, box-shadow .35s ease;
  box-shadow: -20px 0 40px rgba(0,0,0,.35);
}

/* ── Laptop / Tablet landscape (≤1199px) */
@media (max-width:1199.98px){
  .offcanvas-half{ width: 80vw !important; max-width: 920px; }
}

/* ── Tablet portrait (≤991px) */
@media (max-width:991.98px){
  .offcanvas-half{ width: 90vw !important; max-width: 720px; }
  #leadForm .row.g-3 > [class^="col-"]{ flex: 0 0 100%; max-width: 100%; } /* 1 column form */
}

/* ── Large phones (≤767px) */
@media (max-width:767.98px){
  .offcanvas-half{ width: 100vw !important; max-width: 100vw; }
  #leadForm .offcanvas-header{ padding: .9rem 1rem; }
  #leadForm .offcanvas-body{ padding: 1rem; }
  #leadForm .form-control, #leadForm .form-select{ font-size: .95rem; }
}

/* ── Small phones (≤575px) */
@media (max-width:575.98px){
  /* phone input group tighter */
  #leadForm .input-group-text{ padding: .375rem .6rem; }
  #leadForm .btn-danger{ padding: .6rem .75rem; }
}

/* Typography & inputs on dark */
#leadForm .offcanvas-title{ letter-spacing:.02em; }
#leadForm .offcanvas-body p{ color:#cfcfcf; font-size:.95rem; }
#leadForm .form-control, #leadForm .form-select{
  background:#1c1c1c; border-color:#3a3a3a; color:#e9e9e9;
}
#leadForm .form-control::placeholder{ color:#9a9a9a; }
#leadForm .form-control:focus, #leadForm .form-select:focus{
  border-color:#b8a567; box-shadow:0 0 0 .2rem rgba(184,165,103,.25);
}
#leadForm .form-check-label{ color:#ddd; }

/* Buttons */
#leadForm .btn-danger{ background:#cc4040; border:none; }
#leadForm .btn-danger:hover{ background:#b63838; }

/* Dimmer backdrop */
.offcanvas-backdrop.show{ background-color:rgba(0,0,0,.6); }

/* ── Large phones (≤767px) */
@media (max-width:767.98px){
  .offcanvas-half{ width: 100vw !important; max-width: 100vw; }
  #leadForm .offcanvas-header{ padding: 1rem 1.25rem; }
  #leadForm .offcanvas-body{ padding: 1.25rem; }

  /* Bigger inputs */
  #leadForm .form-control,
  #leadForm .form-select{
    font-size: 1.05rem;      /* larger text */
    padding: .75rem 1rem;    /* taller touch area */
  }

}

/* ── Small phones (≤575px) */
@media (max-width:575.98px){
    
    input[type="text"], input[type="email"], input[type="tel"] {
    
    height: 80px !important;
   } 
  #leadForm .input-group-text{ padding: .45rem .7rem; font-size: 1rem; }
  #leadForm .btn-danger{ padding: .8rem 1rem; font-size: 1.05rem; }

  /* Extra large fields for small phones */

}

/* Tablets & large phones */
@media (max-width: 991.98px) {
  #leadForm .form-control,
  #leadForm .form-select {
    min-height: 90px;
    font-size: 1.05rem;
  }
}

/* Small phones */
@media (max-width: 575.98px) {
  #leadForm .form-control,
  #leadForm .form-select {
    min-height: 90px;
    font-size: 1.1rem;
    padding: .85rem 1.1rem;
  }
}

.container-hero-inner{
    position:relative; 
    z-index:1;
    padding:0;
}
/*Default: show desktop video, hide mobile */
.hero-video-desktop {
  display: block;
}
.hero-video-mobile {
  display: none;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .hero-video-desktop {
    display: none !important;
  }
  .hero-video-mobile {
    display: block !important;
  }
  .hero-deco-clip{
      background-color: #191919;
  }
  .hero-deco--tl,.hero-deco--br{
      display:none;
  }
  
.challenge-accordion{
       padding-left:40px;
       padding-right:40px;
   }
  
}

.about-hero{ background:#fff; 
    padding-top: 180px !important;
    padding-bottom: 100px !important;
}
.about-hero h1 {
    font-weight:700;
}
.about-hero p {
 font-size:18.68px;
 line-height:29.5px;
}
.about-us-small {
    font-size:19.07px;
}
.about-us-small {
    position: relative;
    left: 20px;
}
.about-hero{ background:#fff; }
.tracking-wider{ letter-spacing:.12em; }
.happay-customer .h3 {
    font-size: 42.05px;
}
.happay-customer .text-secondary {
    font-size: 14px;
}
/* Play button */
.btn-about {
    xwidth: 212.57554626464844px;
    height: 52.572444915771484px;
    line-height: 32px;
    font-size: 19.05px;
    font-weight: 700;
}
.btn-how-itworks {
    line-height: 32px;
    font-size: 19.05px;
    font-weight: 700;  
}
.btn-play .play-ring{
  width:44px; height:44px; border-radius:50%;
  display:inline-block; position:relative; flex:0 0 44px;
  background:
    radial-gradient(circle at 50% 50%, #ff4ea2 0 34%, #fff0 35%),
    radial-gradient(circle at 50% 50%, #fff0 0 56%, #8b2cf5 57% 100%);
  outline:6px solid #ff4ea23d;
}
.btn-play{ color:#111; }
.btn-play:hover{ opacity:.9; }

/* Right column dashed grid container */
.media-grid{
  max-width: 640px;         /* keep it tidy in the column */
  padding: 0;
  border-radius: 0;
  border:1px dashed rgba(0,0,0,.15);
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 1px, transparent 1px 32px);
}

/* Stage height scales with viewport */
.media-stage{
  position: relative;
  min-height: clamp(360px, 52vw, 640px);
}
.media-stage img{ object-fit: cover; }

/* Decorative images inside .bubble/.deco-ring fill their wrappers */
.adjust-size{
  position: static;      /* was absolute – makes it fluid */
  width: 100%;
  height: auto;
  display: block;
}

/* Overlapped images (desktop defaults) */
.back-img{
  width: 50%;
  position:absolute; top: 6%; left: 8%;
  aspect-ratio: 3/4;
}
.front-img{
  width: 50%;
  position:absolute; top: 22%; right: 8%;
  aspect-ratio: 3/4;
}

/* Decorative bubbles */
.bubble{
  position:absolute; border-radius:50%;
  background: transparent;  /* image used instead */
}
.bubble-lg{
 width: 160px;
 bottom: -5%;
 left: -6%;
}
.bubble-sm{ width:18px; height:18px; bottom:12%; left:30%; background:#ff4ea2; }
.bubble-mini{ width:10px; height:10px; bottom:20%; left:36%; background:#ff4ea2; }

/* Top-right ring decoration */
.deco-ring{
  position:absolute; top:-28px; right:-6px;
  width:140px; height:140px;
  display:grid; place-items:center;
  border-radius:50%;
}

/* ======= Breakpoints ======= */

/* Large (≥992px) – fine-tune spacing */
@media (max-width: 1199.98px){
  .media-grid{ max-width: 580px; }
  .back-img, .front-img{ width: 56%; }
  .back-img{ left:6%; top:7%; }
  .front-img{ right:6%; top:26%; }
  .bubble-lg{ width: 140px;  bottom: -5%; left: -6%; }
  .deco-ring{ width:130px; height:130px; top:-24px; }
}

/* Medium (≥768px and <992px) – keep overlap but larger images */
@media (max-width: 991.98px){
  .media-grid{ max-width: 560px; }
  .media-stage{ min-height: clamp(380px, 60vw, 520px); }
  .back-img, .front-img{ width: 50%; }
  .back-img{ left:5%; top:5%; }
  .front-img{ right:5%; top:25%; }
}

/* Small (<768px) – show single centered card, simplify decorations */
@media (max-width: 767.98px){
  .media-grid{
    border:none;            /* clean mobile look */
    background:none;
    max-width: 100%;
    padding: 18px 0;
  }
  .media-stage{ min-height: auto; }
  .back-img{ display:none; }             /* hide back image on mobile */
  .front-img{
    position: relative; top: 0; right: auto;
    width: 100%; aspect-ratio: auto;     /* full width card */
  }
  .bubble-lg, .deco-ring{ display:none !important; } /* already d-none d-md-block, just in case */
}

/* Extra-small (<576px) – small refinements */
@media (max-width: 575.98px){
  .media-grid{ padding: 0; }
}