/* SECTION BACKGROUND */
.food-sec {
    position: relative;
    /* background: #2C3073; */
    overflow: hidden;
    padding-top: 60px;
    /* z-index: 99999; */
}

/* Steam Layer */
.food-sec .steam-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*z-index: 1;*/
}

/* Steam Puff */
.steam-puff {
    position: absolute;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 75%);
    border-radius: 50%;
    filter: blur(16px);
    opacity: 0.6;
    animation: steamRiseUltra linear infinite;
}

/* MASSIVE Amount of Steam: 20 clouds */
.steam-puff:nth-child(1)  { left: 3%;  bottom: -200px; animation-duration: 4s; }
.steam-puff:nth-child(2)  { left: 10%; bottom: -220px; animation-duration: 3.5s; }
.steam-puff:nth-child(3)  { left: 17%; bottom: -240px; animation-duration: 4.2s; }
.steam-puff:nth-child(4)  { left: 24%; bottom: -180px; animation-duration: 3.8s; }
.steam-puff:nth-child(5)  { left: 31%; bottom: -210px; animation-duration: 4.1s; }
.steam-puff:nth-child(6)  { left: 38%; bottom: -190px; animation-duration: 3.6s; }
.steam-puff:nth-child(7)  { left: 45%; bottom: -230px; animation-duration: 4.3s; }
.steam-puff:nth-child(8)  { left: 52%; bottom: -200px; animation-duration: 3.7s; }
.steam-puff:nth-child(9)  { left: 59%; bottom: -220px; animation-duration: 4s; }
.steam-puff:nth-child(10) { left: 66%; bottom: -210px; animation-duration: 3.4s; }
.steam-puff:nth-child(11) { left: 73%; bottom: -250px; animation-duration: 4.2s; }
.steam-puff:nth-child(12) { left: 80%; bottom: -200px; animation-duration: 3.6s; }
.steam-puff:nth-child(13) { left: 87%; bottom: -180px; animation-duration: 4s; }
.steam-puff:nth-child(14) { left: 94%; bottom: -240px; animation-duration: 3.3s; }
.steam-puff:nth-child(15) { left: 22%; bottom: -260px; animation-duration: 3.9s; }
.steam-puff:nth-child(16) { left: 48%; bottom: -230px; animation-duration: 4.4s; }
.steam-puff:nth-child(17) { left: 68%; bottom: -260px; animation-duration: 3.5s; }
.steam-puff:nth-child(18) { left: 55%; bottom: -280px; animation-duration: 4.6s; }
.steam-puff:nth-child(19) { left: 33%; bottom: -300px; animation-duration: 3.7s; }
.steam-puff:nth-child(20) { left: 76%; bottom: -310px; animation-duration: 3.9s; }

/* High + Fast Steam */
@keyframes steamRiseUltra {
    0%   { transform: translateY(0) scale(1); opacity: 0.35; }
    30%  { opacity: 0.65; }
    100% { transform: translateY(-600px) scale(1.9); opacity: 0; }
}

/* Keep content above steam */
.food-sec .container {
    position: relative;
}



 /* ------------------ Geometric animated background ------------------ */
    .footer-hero{position:relative;overflow:hidden;border-top:1px solid rgba(255,255,255,0.03);z-index: 99;}
    .geo-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }

    /* Using multiple floating shapes created with clip-path and gradients */
    .shape{
      position:absolute; opacity:0.22; filter:blur(8px); transform-origin:center;
      will-change:transform, opacity;
    }

    /* Triangle */
    .shape.tri{ width:28vmax; height:28vmax; left:-6vmax; top:-8vmax; background:linear-gradient(135deg,#e9c34155,#7ee7f855); clip-path:polygon(50% 0, 0% 100%, 100% 100%); }
    /* Diamond */
    .shape.dia{ width:20vmax; height:20vmax; right:-4vmax; top:6vmax; background:linear-gradient(135deg,#6dd3ff55,#a78bff55); clip-path:polygon(50% 0, 100% 50%, 50% 100%, 0% 50%); }
    /* Rounded blob */
    .shape.blob{ width:24vmax; height:16vmax; left:20%; bottom:-6vmax; background:linear-gradient(120deg,#ff9a9e55,#fad0c455); border-radius:40% 60% 55% 45% / 40% 40% 60% 60%; }

    /* Small floating squares */
    .shape.sq{ width:8vmax; height:8vmax; background:linear-gradient(45deg,#4be1a855,#ffd66b55); clip-path:polygon(0 0,100% 0,100% 100%,0 100%); }

    /* Animations */
    @keyframes floatSlow {
      0%{ transform: translateY(0) rotate(0deg) scale(1); }
      50%{ transform: translateY(-6%) rotate(12deg) scale(1.02); }
      100%{ transform: translateY(0) rotate(0deg) scale(1); }
    }
    @keyframes floatLong {
      0%{ transform: translateX(0) rotate(0deg) scale(1); }
      50%{ transform: translateX(-8%) rotate(-8deg) scale(.98); }
      100%{ transform: translateX(0) rotate(0deg) scale(1); }
    }
    @keyframes spinTiny { 0%{ transform:rotate(0deg);} 100%{ transform:rotate(360deg);} }

    .shape.tri{ animation: floatSlow 3s ease-in-out infinite; }
    .shape.dia{ animation: floatLong 4s ease-in-out infinite; }
    .shape.blob{ animation: floatSlow 5s ease-in-out infinite; }
    .shape.sq{ animation: spinTiny 6s linear infinite; opacity:0.08; filter:blur(4px); }

    /* ------------------ Footer content styles ------------------ */
    footer .container{ position:relative; z-index:2; }
    footer .mob-mar{ margin-bottom:1.25rem; }
    .mb-22{ margin-bottom:1.375rem; }
    .gap-3 a{ transition:all .2s ease; }
    .gap-3 a:hover{ transform:translateY(-4px); border-color:#e9c341; color:#fff; }

    /* tiny helpers */
    .flex-dir{ display:flex; gap:2rem; }
    .mt-52{ margin-top:3.25rem; }

    /* Responsive tweaks */
    @media (max-width: 768px){
      .flex-dir{ flex-direction:column; }
      .shape{ display:none; } /* hide heavy background on small screens for clarity & perf */
      .py-100{ padding-top:3rem; padding-bottom:3rem; }
    }

    /* Accessibility: respect reduce-motion preference */
    @media (prefers-reduced-motion: reduce){
      .shape{ animation:none !important; transition:none !important; }
    }

    /* Simple polyfill for missing ph icons used in your original markup */
    .ph-caret-right::before{ content: '›'; margin-right:.5rem; color:inherit; }

	.fog-section {
        position: relative;
        background: #2146C7; /* blue background */
        padding: 80px 0;
        overflow: hidden;
        color: white;
        text-align: center;
    }
    /* Fog layer */
    .fog {
        position: absolute;
        top: 0;
        left: -100%;
        width: 300%;
        height: 100%;
        background: url("90.jpg"); /* transparent fog image */
        opacity: 0.1;
        animation: fogMove 90s linear infinite;
    }

    /* Fog Animation */
    @keyframes fogMove {
        0% { transform: translateX(0); }
        100% { transform: translateX(30%); }
    }

    .icon-box i {
        font-size: 40px;
        color: white;
        margin-bottom: 10px;
    }
	

	
  .how-box {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  }
#bgVideo::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* black overlay 50% */
    z-index: 2;
    pointer-events: none;
}

  .video-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
  }

  .video-wrapper img,
  .video-wrapper video {
    width: 100%;
    border-radius: 15px;
    display: block;
  }

  /* Center Play Button */
  .play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: red;
    width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    transition: 0.3s;
    z-index: 5;
  }

  .play-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
  }

.play-btn i {
    font-size: 36px;
    color: #fff;
    margin-left: 0px;
    margin-top: -5px;
    transform: rotate(117deg);
}
  
  
  .play-btn {
    background: red !important; /* your original color */
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.play-btn:focus,
.play-btn:active {
    background: red !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.play-btn:focus,
.play-btn:active {
    background: red !important;
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

.play-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

  @media (max-width: 768px) {
    .how-box {
      padding: 20px;
    }
    .play-btn {
      width: 60px;
      height: 60px;
    }
  }
  
  
  
  
   /* Full-bleed hero */
    .hero25 {
      position: relative;
      width: 100%;
      min-height: 60vh; /* change as needed */
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      color: #fff;
    }

    /* Video sits behind content */
    .hero25 video {
      position: absolute;
      top: 50%;
      left: 50%;
      width: auto;
      height: 100%;
      min-width: 100%;
      transform: translate(-50%, -50%);
      object-fit: cover;
      z-index: 0;
    }

    /* Fallback background image for small screens / when video not available */
    .hero25::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url('bannervideo10.jpg');
      background-size: cover;
      background-position: center center;
      z-index: 0;
      filter: brightness(0.45);
    }

    /* Overlay card with text */
    .hero25 .overlay25 {
      position: relative; /* sits above video */
      z-index: 2;
      text-align: center;
      padding: 1rem 1.25rem;
      backdrop-filter: blur(4px);
         background: rgb(199 199 199 / 35%);
      border-radius: 8px;
      max-width: 900px;
      width: 90%;
    }

    .hero25 h1 {
      font-weight: 700;
      letter-spacing: 0.2px;
      margin-bottom: 0.5rem;
      font-size: clamp(1.4rem, 3.6vw, 2.2rem);
    }

    .typewriter {
    display: inline-block;
    font-weight: 500;
    font-size: 2.3rem;
    letter-spacing: 1px;
    min-height: 1.4em;
}

    /* Cursor */
    .typewriter .cursor {
      display: inline-block;
      width: 2px;
      height: 1.05em;
      margin-left: 6px;
      background: #fff;
      animation: blink 1s steps(2,start) infinite;
      vertical-align: bottom;
    }

    @keyframes blink {
      to { visibility: hidden; }
    }

    /* On small screens hide video (save bandwidth) and keep background image */
    @media (max-width: 768px) {
      .hero25::before { 
	  filter: brightness(0.35); 
	  }
	  .typewriter{
	  font-size:1.7rem;
	  }
    }

    /* Optional: center a small play/pause button over hero (unobtrusive) */
    .video-toggle {
      position: absolute;
      bottom: 18px;
      right: 18px;
      z-index: 3;
    }
.hero25 {
    position: relative;
}

.hero25::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3); /* 0.5 overlay */
    z-index: 1;
}

/* Make sure video stays behind overlay */
.hero25 video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

/* Make your content appear above overlay */
.hero25 .overlay25,
.hero25 .text-light,
.hero25 * {
    position: relative;
    z-index: 2;
}
.hero25 #btnToggle{
display:none;
}
.level-section .mall-image-box {
    position: relative;
    overflow: hidden;
    border-radius: 0px !important;
    border-bottom-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

/* Image default state */
.level-section .mall-image-box img {
    width: 100%;
    transition: transform 0.5s ease, opacity 0.5s ease;
    transform: scale(1);
}

/* Zoom effect on hover */
.level-section .mall-image-box:hover img {
    transform: scale(1.1); /* zoom slightly */
}

/* Overlay using ::after */
.level-section .mall-image-box::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        -45deg,
        rgba(6, 190, 244, 0.75) 0%,
        rgba(45, 112, 253, 0.6) 100%
    );
    opacity: 0;
    transition: opacity 0.5s ease;
	border: 5px solid #f5d57a;
    border-radius: 0px !important;
    border-bottom-left-radius: 30px !important;
    border-top-right-radius: 30px !important;
}

/* Show overlay on hover */
.level-section .mall-image-box:hover::after {
    opacity: 1;
}