/* CSS Variables */
    :root {
      --primary-color: #0a0c0e;
      --button-color: #FFC107;
      --dark-color: #121416;
      --darker-black: #0a0c0e;
      --light-bg: #F8F9FA;
      --text-color: #212529;
      --text-light: #D1D3D4;
      --white: #FFFFFF;
      --transition: all 0.3s ease;
    }

    /* General Styles */
    body {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      margin: 0;
      overflow-x: hidden;
    }

    /* Splash Screen */
    .splash-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(135deg, #F8F9FA 0%, #FFF3CD 100%);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
      transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
      visibility: visible;
      overflow: hidden;
    }

    .splash-screen.hidden {
      opacity: 0;
      visibility: hidden;
    }

    .splash-content {
      text-align: center;
      position: relative;
      z-index: 2;
      transform: translateY(0);
      transition: transform 1s ease-out;
    }

    .splash-animation {
      animation: fadeInUp 0.8s ease-out forwards;
    }

    .splash-logo {
      width: clamp(100px, 15vw, 140px); /* Reduced from original clamp(150px, 30vw, 200px) */
      height: auto;  animation: logoAnimation 2s ease-in-out forwards;
      margin-bottom: clamp(1rem, 3vw, 1.5rem);
      filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
    }

    .splash-tagline {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(16px, 4vw, 20px);
      color: #000000;
      opacity: 0;
      animation: taglineFade 1.5s ease-in-out forwards;
      margin-bottom: clamp(1.5rem, 4vw, 2rem);
      min-height: 24px;
      text-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
    }

    .splash-spinner {
      width: clamp(36px, 9vw, 48px);
      height: clamp(36px, 9vw, 48px);
      border: 6px solid #F8F9FA;
      border-top: 6px solid var(--button-color);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 0 auto;
    }

    /* updating new splash code*/
    .splash-particles {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .splash-skip {
      position: absolute;
      bottom: clamp(10px, 3vw, 20px);
      right: clamp(10px, 3vw, 20px);
      background: var(--button-color);
      color: #000000;
      border: none;
      padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
      border-radius: 5px;
      font-size: clamp(12px, 3vw, 14px);
      font-family: 'Open Sans', sans-serif;
      cursor: pointer;
      transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    }

    .splash-skip:hover {
      background: #F8F9FA;
      color: #000000;
      transform: translateY(-2px);
    }

    .splash-skip:focus {
      outline: 2px solid #000000;
      outline-offset: 2px;
    }

    @keyframes logoAnimation {
      0% { transform: scale(0.5); opacity: 0; }
      50% { transform: scale(1.1); opacity: 1; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes taglineFade {
      0% { opacity: 0; transform: translateY(10px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes particleFloat {
      0% { opacity: 0; transform: translateY(0); }
      20% { opacity: 0.6; }
      80% { opacity: 0.6; }
      100% { opacity: 0; transform: translateY(-100vh); }
    }

    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes scaleIn {
      0% { transform: scale(0.8); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
    }

    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }

    @keyframes pulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    /* Responsive Adjustments for Splash Screen */
    @media (max-width: 768px) {
      .splash-logo {
        width: clamp(100px, 20vw, 140px); /* Reduced from original clamp(120px, 25vw, 160px) */
      }
    }
      .splash-tagline {
        font-size: clamp(14px, 3.5vw, 18px);
      }
      .splash-spinner {
        width: clamp(32px, 8vw, 40px);
        height: clamp(32px, 8vw, 40px);
      }
      .splash-skip {
        padding: clamp(6px, 1.8vw, 8px) clamp(10px, 2.5vw, 14px);
        font-size: clamp(11px, 2.8vw, 13px);
      }


    @media (max-width: 360px) {
      .splash-logo {
        width: clamp(80px, 18vw, 120px); /* Reduced from original clamp(100px, 20vw, 140px) */
      }
    }
      .splash-tagline {
        font-size: clamp(12px, 3.2vw, 16px);
      }
      .splash-spinner {
        width: clamp(28px, 7vw, 36px);
        height: clamp(28px, 7vw, 36px);
      }

    @media (prefers-reduced-motion: reduce) {
      .splash-logo, .splash-tagline, .splash-spinner, .particle {
        animation: none;
      }
      .splash-skip {
        transition: none;
      }
    }

  /* Navbar */
  /* Navbar Styles */
  .navbar {
    background-color: var(--white);
    border: 1px solid var(--light-bg);
    padding: clamp(0.75rem, 2vw, 1rem);
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: clamp(320px, 90%, 1140px); /* Adjusted max-width for narrower navbar */
    z-index: 1000;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease, top 0.3s ease;
    border-radius: 50px; /* Pill shape */
    box-sizing: border-box;
  }

  .navbar.hidden {
    transform: translateX(-50%) translateY(-100%);
    opacity: 0;
    visibility: hidden;
  }

  .navbar.scrolled {
    background-color: #000000 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    border-radius: 50px; /* Maintain pill shape */
    top: 10px; /* Closer to top when scrolled */
  }

  /* These is new code for the icon color mobile size toggle menu button */

/* Optional: make the button itself slightly yellow on focus/hover */
.navbar-toggler:focus,
.navbar-toggler:hover {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.3);
  border-color: #FFC107;
}

  @media (max-width: 991px) {
    .navbar {
      width: 100%;
      left: 0;
      transform: none;
      border-radius: 0; /* No pill shape on mobile */
      top: 0; /* Sticky at top */
      padding: clamp(0.5rem, 1.5vw, 0.75rem);
    }
    .navbar.hidden {
      transform: none !important;
      opacity: 1 !important;
      visibility: visible !important;
    }
    .navbar.scrolled {
      border-radius: 0;
      top: 0;
    }
  }

  @media (max-width: 360px) {
    .navbar {
      padding: clamp(0.4rem, 1.2vw, 0.6rem);
    }
    .nav-link {
      font-size: clamp(12px, 3vw, 13px);
    }
    .nav-link-contact {
      padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(1rem, 2.5vw, 1.5rem);
    }
  }

  .navbar-brand img {
    width: clamp(120px, 15vw, 150px); /* Smaller logo like Superpower */
    max-height: 36px;
    object-fit: contain;
    transition: max-height 0.3s ease;
  }

  .navbar.scrolled .navbar-brand img {
    max-height: 80px; /* Slightly smaller on scroll */
  }

  .logo-desktop {
    display: block;
  }

  .logo-mobile, .logo-scrolled {
    display: none;
  }

  .navbar.scrolled .logo-desktop, .navbar.scrolled .logo-mobile {
    display: none;
  }

  .navbar.scrolled .logo-scrolled {
    display: block;
  }

  .nav-link {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    color: var(--text-color) !important;
    padding: clamp(0.5rem, 1.5vw, 0.75rem);
    font-size: clamp(13px, 3vw, 14px);
    transition: color 0.2s ease, transform 0.2s ease;
  }

  .navbar.scrolled .nav-link {
    color: var(--white) !important;
  }

  .nav-link:hover {
    color: var(--button-color) !important;
    transform: translateY(-2px); /* Subtle lift like Superpower */
  }

  .nav-link-contact {
    background-color: #FFC107;
    color: #000000 !important;
    border-radius: 25px; /* Slightly rounder for modern look */
    padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(1.2rem, 2.5vw, 1.8rem);
    margin-left: 1rem;
    text-decoration: none;
    font-size: clamp(13px, 3vw, 14px);
    transition: background-color 0.3s ease, transform 0.2s ease;
  }

  .nav-link-contact:hover {
    background-color: #e0a800; /* Slightly darker yellow */
    color: #000000 !important;
    transform: translateY(-2px); /* Lift effect */
  }

  /* Dropdown Styles (Unchanged) */
  .dropdown-menu.custom-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%); /* Center dropdown */
    background-color: var(--white);
    border: 1px solid var(--light-bg);
    border-radius: 25px; /* Curved shape on all 4 sides */
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); /* Deeper shadow for floating effect */
    width: clamp(400px, 97%, 1300px); /* Minimal increase in size */
    padding: 1rem;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    margin-top: 12px; /* Space for floating effect */
    transition: opacity 0.2s ease, visibility 0s linear 0.2s, transform 0.3s ease;
  }

  .dropdown-menu.custom-dropdown:hover {
    transform: translateX(-50%) translateY(-2px); /* Subtle lift on hover */
  }

  @media (max-width: 991px) {
    .dropdown-menu.custom-dropdown {
      width: 100%; /* Full width on mobile to match navbar behavior */
      left: 0;
      transform: none; /* Remove centering on mobile */
      padding: 0.75rem;
      border-radius: 20px; /* Slightly smaller curve */
      margin-top: 8px; /* Reduced space */
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Lighter shadow */
    }
  }

  @media (max-width: 360px) {
    .dropdown-menu.custom-dropdown {
      padding: 0.5rem;
      border-radius: 15px; /* Even smaller curve */
      margin-top: 6px; /* Minimal space */
    }
  }

  .dropdown-menu.custom-dropdown.active {
    display: block;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.2s ease, transform 0.3s ease;
  }



  .dropdown-menu.custom-dropdown .dropdown-grid {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    border-radius: inherit; /* Inherit curve */
  }

  @media (max-width: 991px) {
    .dropdown-menu.custom-dropdown .dropdown-grid {
      flex-direction: column;
    }
  }

  .dropdown-menu.custom-dropdown .dropdown-column {
    flex: 1;
    padding-right: 0.5rem;
    border-radius: inherit; /* Inherit curve */
  }

  .dropdown-menu.custom-dropdown .dropdown-image {
    flex: 1;
    padding-left: 0.5rem;
    border-radius: inherit; /* Inherit curve */
  }

  @media (max-width: 991px) {
    .dropdown-menu.custom-dropdown .dropdown-image {
      display: none;
    }
  }

  .dropdown-menu.custom-dropdown .dropdown-image img {
    max-width: 100%;
    width: 100%;
    height: auto;
    border-radius: 15px; /* Curve inner image */
  }

  .dropdown-menu.custom-dropdown .dropdown-category h6 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    color: #0a0a0a;
    font-size: clamp(16px, 3.5vw, 18px);
    margin-bottom: 0.75rem;
    padding-bottom: 0.375rem;
    border-bottom: 2px solid #FFC107;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 4px; /* Subtle curve on category headers */
  }

  .dropdown-menu.custom-dropdown .dropdown-item {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    color: #666666;
    font-size: clamp(14px, 3.2vw, 16px);
    padding: 0.75rem 0;
    transition: color 0.3s ease, transform 0.3s ease;
    border-radius: 10px; /* Curve on individual items */
    margin-bottom: 0.25rem; /* Space between items */
  }

  @media (max-width: 360px) {
    .dropdown-menu.custom-dropdown .dropdown-item {
      font-size: clamp(12px, 3vw, 13px);
      padding: 0.5rem 0;
      border-radius: 8px; /* Smaller curve on mobile */
    }
  }

  .dropdown-menu.custom-dropdown .dropdown-item:hover {
    color: #FFC107;
    background-color: rgba(255, 193, 7, 0.1); /* Subtle yellow bg on hover */
    transform: translateX(10px);
  }

  .nav-item.dropdown {
    position: relative;
  }

  .nav-item.dropdown:hover > .custom-dropdown {
    display: block;
    opacity: 1;
    visibility: visible;
  }

  .custom-dropdown {
    top: 100%;
    margin-top: 12px; /* Consistent space */
    border-radius: 25px; /* Ensure curve */
  }

  .custom-dropdown::after {
    content: '';
    position: absolute;
    top: -22px; /* Match margin-top for hover area */
    left: 0;
    right: 0;
    height: 22px;
    background: transparent;
  }

  .custom-dropdown:hover {
    display: block;
    opacity: 1;
    visibility: visible;
  }


  /* Mobile Menu small screen size*/
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent backdrop */
    backdrop-filter: blur(8px); /* Modern blur effect for depth */
    -webkit-backdrop-filter: blur(8px); /* Safari support */
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transform: translateX(100%); /* Start off-screen to the right */
    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), visibility 0.4s, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Smooth, easing animation like top sites */
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Slide in from right */
  }

  /* Panel - Slide-In Content */
  .mobile-menu-panel {
    position: absolute;
    top: 0;
    right: 0;
    width: 80%; /* Responsive width: full on mobile, narrower on larger */
    max-width: 350px;
    height: 100vh;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95)); /* Frosted glass-like gradient */
    backdrop-filter: blur(10px); /* Enhanced blur for modern feel */
    -webkit-backdrop-filter: blur(10px);
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Scrollable if needed */
    padding: 0;
    transform: translateX(100%); /* Sync with overlay */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .mobile-menu-overlay.active .mobile-menu-panel {
    transform: translateX(0);
  }

  /* Header */
  .mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
  }

  .menu-close-btn {
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-color, #333);
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .menu-close-btn:hover {
    background: rgba(255, 193, 7, 0.1); /* Subtle yellow tint on hover */
    transform: rotate(90deg); /* Modern rotate animation */
  }
.toast {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}

  .menu-logo img {
    height: 40px;
    width: auto;
  }

  /* Navigation Links - Modern Stacked List */
  .mobile-menu-nav {
    flex: 1;
    padding: 20px 0;
    list-style: none;
    margin: 0;
  }

  .nav-link-mobile {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    color: var(--text-color, #333);
    text-decoration: none;
    font-family: 'Open Sans', sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease; /* Smooth hover transitions */
    position: relative;
    overflow: hidden;
  }

  .nav-link-mobile:hover,
  .nav-link-mobile.active {
    color: var(--button-color, #FFC107);
    background: rgba(255, 193, 7, 0.1); /* Subtle background glow */
    transform: translateX(10px); /* Slide right on hover for dynamism */
  }

  .nav-link-mobile i {
    margin-right: 15px;
    font-size: 18px;
    width: 20px;
    text-align: center;
    transition: transform 0.3s ease;
  }

  .nav-link-mobile:hover i {
    transform: scale(1.1); /* Icon subtle scale on hover */
  }

  /* Active Link Indicator */
  .nav-link-mobile.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--button-color, #FFC107);
  }

  /* Footer - Social and Tagline */
  .mobile-menu-footer {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background: rgba(255, 255, 255, 0.8);
    text-align: center;
  }

  .mobile-menu-footer p {
    margin: 0 0 15px 0;
    font-size: 14px;
    color: #666;
    font-style: italic;
  }

  .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
  }

  .social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 193, 7, 0.1);
    border-radius: 50%;
    color: var(--button-color, #FFC107);
    font-size: 18px;
    transition: all 0.3s ease;
  }

  .social-links a:hover {
    background: var(--button-color, #FFC107);
    color: white;
    transform: scale(1.1) rotate(360deg); /* Fun spin on hover */
  }

  /* Responsive Tweaks */
  @media (max-width: 768px) {
    .mobile-menu-panel {
      width: 100%; /* Full width on small screens */
      max-width: none;
    }
    
    .nav-link-mobile {
      font-size: 15px;
      padding: 16px 20px;
    }
    
    .menu-close-btn {
      font-size: 22px;
    }
  }

  @media (max-width: 360px) {
    .nav-link-mobile {
      font-size: 14px;
      padding: 14px 16px;
    }
    
    .social-links a {
      width: 35px;
      height: 35px;
      font-size: 16px;
    }
  }

  /* Accessibility and Reduced Motion */
  @media (prefers-reduced-motion: reduce) {
    .mobile-menu-overlay,
    .mobile-menu-panel,
    .nav-link-mobile,
    .social-links a,
    .menu-close-btn {
      transition: none;
    }
    
    .nav-link-mobile:hover,
    .nav-link-mobile.active {
      transform: none;
    }
    
    .social-links a:hover {
      transform: none;
    }
  }

  /* Hide on Desktop */
  @media (min-width: 992px) {
    .mobile-menu-overlay {
      display: none !important;
    }
  }

  /*This is Mobile Menu Toogle End Code code which belongs to upwards ^^*/ 


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

.highnote-perfect {
  width: 100%;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 18% 85%, #FFECB3 0%, transparent 50%),
    radial-gradient(circle at 72% 88%, #FFE8A3 0%, transparent 55%),
    radial-gradient(circle at 88% 12%, #FFF4E0 0%, transparent 48%),
    radial-gradient(circle at 42% 8%, #FFF9ED 0%, transparent 42%),
    #FFFAF0;
  overflow: hidden;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: clamp(3rem, 6vw, 5rem);
  gap: clamp(3rem, 6vw, 8rem);
  box-sizing: border-box;
}

.hero-images {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Base image styles */
.fade-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: clamp(280px, 44vw, 440px);
  height: auto;
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,0.18));
  opacity: 0;
  transition: opacity 1.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.fade-img.active { opacity: 1; }

/* ====================================================== */
/* TILT ONLY FOR CALF LATEST IMAGE — ALL BREAKPOINTS */
/* ====================================================== */

/* 1. LARGE DESKTOPS (≥1400px) */
@media (min-width: 1400px) {
  img[src="calf latest newone.png"],
  img[src="calf latest newone.png"].active {
    transform: translate(-50%, -50%) rotate(-30deg) !important;
    filter: drop-shadow(0 45px 90px rgba(0,0,0,0.26)) !important;
  }
}

/* 2. DESKTOPS (1200px – 1399px) */
@media (max-width: 1399px) {
  img[src="calf latest newone.png"],
  img[src="calf latest newone.png"].active {
    transform: translate(-50%, -50%) rotate(-30deg) !important;
  }
}

/* 3. LAPTOPS / LARGE TABLETS (1024px – 1199px) */
@media (max-width: 1199px) {
  img[src="calf latest newone.png"],
  img[src="calf latest newone.png"].active {
    transform: translate(-50%, -50%) rotate(-30deg) !important;
  }
}

/* 4. TABLETS & MOBILE — FINAL PERFECT VERSION (NO BOX, NO OVERLAP, CLEAN) */
@media (max-width: 1023px) {
  .highnote-perfect {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
    place-items: center;
    padding: clamp(2rem, 6vw, 4rem) 1rem 4rem;
    gap: 0;
    min-height: 100dvh;
    text-align: center;
  }

  .hero-images {
    grid-row: 1;
    width: 100%;
    min-height: 55vh;
    max-height: 65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }

  /* TEXT CONTAINER — NO WHITE BOX, CLEAN & BEAUTIFUL */
  .hero-content-sticky {
    grid-row: 2;
    width: 100%;
    max-width: 620px; /*90% to 620px*/
    padding: 0 1rem;
    margin-top: -1rem;           /* Slight lift for tight, premium look */
    z-index: 10;  /* z-index 2 to 10*/
    background: transparent !important;   /* ← REMOVED THE WHITE BOX */
    margin-left: auto;
    margin-right: auto;
  }

  .fade-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: clamp(260px, 78vw, 400px);
    max-height: 58vh;
  }

  img[src="calf latest newone.png"],
  img[src="calf latest newone.png"].active {
    transform: translate(-50%, -50%) rotate(-30deg) !important;
    filter: drop-shadow(0 28px 60px rgba(0,0,0,0.22)) !important;
  }
}

@media (max-width: 767px) {
  .hero-images { min-height: 52vh; }
  .fade-img { max-width: clamp(240px, 82vw, 380px); }
}

@media (max-width: 599px) {
  .hero-images { min-height: 50vh; }
  .hero-content-sticky { margin-top: -0.5rem; }
}

@media (max-width: 479px) {
  .hero-images { min-height: 48vh; }
  .fade-img { max-height: 55vh; }
}

/* Text styles — unchanged */
.hero-content-sticky { max-width: 570px; z-index: 10; }
.hero-title {
  font-family: "Montserrat", sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  font-size: clamp(2.6rem, 7vw, 5.4rem) !important; /* from 3.2rem, 8vw, 6.5rem to  clamp(2.6rem, 7vw, 5.4rem) */
  line-height: 0.96; /* from 0.94 to 0.96 */
  letter-spacing: -0.05em; /* letter-spacing: -0.06em; to letter-spacing: -0.05em; */
  color: #512900 !important;
  margin: 0 0 1.2rem 0; /* from 0 0 1rem 0 to 0 0 1.2rem 0;*/
}
.hero-subtitle {
  font-size: clamp(1.1rem, 2.8vw, 1.6rem);
  line-height: 1.55;
  margin-bottom: 2.4rem;
  font-weight: 600;
  color: #3d2b1f !important;
}
.hero-cta {
  display: inline-block;
  background: #000;
  color: #fff;
  padding: clamp(1.1rem, 2.8vw, 1.4rem) clamp(2.6rem, 6vw, 4rem);
  font-family: "Montserrat", sans-serif;
  font-weight: 900;
  font-size: clamp(1.05rem, 2.4vw, 1.5rem);
  border-radius: 60px;
  text-decoration: none;
  box-shadow: 0 18px 40px rgba(0,0,0,0.28);
  transition: all 0.4s ease;
}
.hero-cta:hover {
  transform: translateY(-6px);
  box-shadow: 0 28px 60px rgba(0,0,0,0.36);
}



    /* About Us Section */
    /* Our Values, Mission, and Vision Section */
    
        .values-mission-vision {
          padding: clamp(60px, 10vw, 100px) 0 clamp(100px, 15vw, 180px) 0 !important;
          background: #F8F9FA;
          text-align: center;
          animation: fadeInUp 1s ease-out forwards;
        }

        .section-title {
          font-family: 'Open Sans', sans-serif;
          font-weight: 600;
          font-size: clamp(18px, 5vw, 28px);
          color: var(--text-color);
          margin-bottom: clamp(2rem, 4vw, 3rem);
        }

        .vmv-container {
          display: flex;
          justify-content: center;
          gap: clamp(20px, 4vw, 30px);
          padding: 0 clamp(10px, 2vw, 20px);
          flex-wrap: wrap;
        }

        .vmv-card {
          background: #FFFFFF;
          border-radius: 8px;
          padding: clamp(20px, 4vw, 30px);
          width: clamp(250px, 30vw, 350px);
          box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          transition: transform 0.4s ease, box-shadow 0.4s ease;
          transform: scale(1);
          position: relative;
        }

        .vmv-card:hover {
          transform: scale(1.08);
          box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 0 12px rgba(255, 193, 7, 0.6);
        }

        .vmv-card:hover .vmv-title,
        .vmv-card:hover .vmv-text {
          color: var(--button-color);
          transition: color 0.4s ease;
        }

        .vmv-icon {
          display: block;
          margin: 0 auto clamp(10px, 2vw, 20px) auto;
          font-size: 48px;
          color: goldenrod;
          transition: transform 0.4s ease, color 0.4s ease;
        }

        .vmv-card:hover .vmv-icon {
          transform: scale(1.1);
          color: #d4a017; /* Slightly darker goldenrod on hover for contrast */
        }

        .vmv-title {
          font-family: 'Open Sans', sans-serif;
          font-weight: 600;
          font-size: clamp(20px, 4vw, 24px);
          color: #000000;
          margin-bottom: clamp(1rem, 2vw, 1.5rem);
          text-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
        }

        .vmv-text {
          font-family: 'Roboto', sans-serif;
          font-size: clamp(14px, 2.5vw, 16px);
          color: #000000;
          line-height: 1.6;
        }

        /* Animations */
        @keyframes fadeInUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }

        /* Responsive Adjustments */
        @media (max-width: 768px) {
          .vmv-container {
            flex-direction: column;
            align-items: center;
          }
          .vmv-card {
            width: 100%;
            max-width: 350px;
          }
          .vmv-title { font-size: clamp(18px, 3.5vw, 22px); }
          .vmv-text { font-size: clamp(13px, 2.2vw, 15px); }
          .vmv-icon { font-size: 42px; } /* Slightly smaller icon on medium screens */
        }

        @media (max-width: 360px) {
          .vmv-title { font-size: clamp(16px, 3vw, 20px); }
          .vmv-text { font-size: clamp(12px, 2vw, 14px); }
          .vmv-icon { font-size: 36px; } /* Even smaller icon on very small screens */
        }

        @media (prefers-reduced-motion: reduce) {
          .vmv-card {
            transition: none;
          }
          .vmv-card:hover {
            transform: none;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
          }
          .vmv-card:hover .vmv-title,
          .vmv-card:hover .vmv-text {
            transition: none;
            color: #000000;
          }
          .vmv-card:hover .vmv-icon {
            transform: none;
            color: goldenrod;
          }
        }

    /* Life at Outcare Section */
.life-at-outcare-section {
  padding: clamp(4rem, 10vw, 7rem) 0;
  background: linear-gradient(135deg, #f0f7ff 0%, #e1efff 100%);
  position: relative;
  overflow: hidden;
}

.life-at-outcare-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 50% 50%, rgba(30, 100, 200, 0.08) 0%, transparent 70%);
  z-index: 0;
}

.life-at-outcare-section .container {
  position: relative;
  z-index: 1;
  max-width: 1300px;
}

/* Bigger & Bolder Heading */
.life-at-outcare-section h2 {
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  font-weight: 800;
  color: #1e293b;
  margin-bottom: 1rem;
  line-height: 1.2;
}

/* Larger intro text */
.lead-text {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #475569;
  max-width: 900px;
  margin: 0 auto;
  line-height: 1.7;
  font-weight: 400;
}

/* Big readable paragraph */
.big-paragraph {
  font-size: clamp(1.15rem, 2.8vw, 1.35rem);
  line-height: 1.85;
  color: #334155;
  margin-bottom: 1.5rem;
}

/* Super Large Image – Takes full space and looks premium */
.big-office-img {
  max-height: 500px;
  width: 100%;
  object-fit: cover;
  border-radius: 100px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.big-office-img:hover {
  transform: scale(1.03);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2);
}

/* Bigger & Bolder Button */
.btn-warning.btn-lg {
  font-size: 1.25rem;
  padding: 16px 36px;
  border-radius: 50px;
  font-weight: 700;
  background: #f59e0b;
  border: none;
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
  transition: all 0.3s ease;
}

.btn-warning.btn-lg:hover {
  background: #e68a00;
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(230, 138, 0, 0.4);
}

/* Perfect alignment on large screens */
@media (min-width: 992px) {
  .text-content {
    padding-left: 3rem;
  }
  .big-office-img {
    margin-left: -2rem; /* Slight overlap for premium feel */
  }
}

/* Mobile: Image first, then text */
@media (max-width: 991px) {
  .big-office-img {
    max-height: 400px;
    margin-bottom: 2rem;
  }
  .text-content {
    text-align: center;
  }
}

    /* Our Main Products section */
    .main-products-section {
      background-color: #f8f9fa;
    }

    .main-product-grid .card {
      border: none;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .main-product-grid .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    }

    .main-product-grid .card-img-top {
      height: 200px;
      object-fit: cover;
      border-top-left-radius: 10px;
      border-top-right-radius: 10px;
    }

    .main-product-grid .card-body {
      padding: 1.5rem;
      text-align: center;
    }

    .main-product-grid .card-title {
      font-size: 1.25rem;
      font-weight: 600;
      margin-bottom: 0.5rem;
    }

    .main-product-grid .card-text {
      color: #666;
      font-size: 0.9rem;
      min-height: 60px; /* Ensure consistent height for alignment */
    }

    .main-product-grid .btn-warning {
      background-color: #ffc107;
      border-color: #ffc107;
    }

    .main-product-grid .btn-warning:hover {
      background-color: #e0a800;
      border-color: #e0a800;
    }

    /*Newly added about our main products section */
    /* Mobile Menu Styling */
    .mobile-menu {
      display: none; /* Hidden by default, shown via JS or CSS media queries */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--background-color, #fff);
      z-index: 1000;
      flex-direction: column;
    }

    .mobile-menu.show {
      display: flex; /* Ensure menu is visible when toggled */
    }

    .mobile-menu-header {
      display: flex;
      justify-content: flex-end;
      padding: clamp(10px, 3vw, 15px);
      background: var(--background-color, #fff);
    }

    .mobile-menu-header .close-btn {
      font-size: clamp(20px, 5vw, 24px);
      cursor: pointer;
      color: var(--text-color, #000);
    }

    .mobile-menu-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: clamp(20px, 5vw, 30px);
      overflow-y: auto; /* Ensure scroll if content overflows */
      width: 100%;
    }

    .mobile-menu-nav a {
      font-family: var(--font-body, 'Roboto', sans-serif);
      font-size: clamp(16px, 4vw, 18px);
      color: var(--text-color, #000);
      text-decoration: none;
      padding: clamp(10px, 2.5vw, 12px) 0;
      width: 100%;
      text-align: center;
      transition: var(--transition, all 0.3s ease);
    }

    .mobile-menu-nav a:hover,
    .mobile-menu-nav a.active {
      color: var(--button-color, #ffc107);
    }

    .mobile-menu-nav a:first-child {
      margin-top: 0; /* Ensure Home link is not pushed out of view */
    }

    /* Our Main Products section */
    .main-products-section {
      background: linear-gradient(135deg, #e6f0fa 0%, #f8f9fa 100%);
      padding: 3rem 0;
      position: relative;
      overflow: hidden;
    }

    .main-products-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: url('https://www.transparenttextures.com/patterns/clean-textile.png');
      opacity: 0.1;
      z-index: 0;
    }

    .main-products-section h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      color: #1a3c6e;
      font-size: 2.5rem;
      margin-bottom: 1.5rem;
      position: relative;
      z-index: 1;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .main-products-section p {
      font-family: 'Open Sans', sans-serif;
      color: #34495e;
      font-size: 1.1rem;
      max-width: 800px;
      margin: 0 auto 2.5rem;
      position: relative;
      z-index: 1;
    }

    .main-product-grid .card {
      border: none;
      border-radius: 15px;
      background: #ffffff;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
      transition: transform 0.4s ease, box-shadow 0.4s ease;
      overflow: hidden;
      position: relative;
      z-index: 1;
    }

    .main-product-grid .card:hover {
      transform: translateY(-10px) scale(1.03);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
    }

    .main-product-grid .card-img-wrapper {
      position: relative;
      height: 220px;
      overflow: hidden;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }

    .main-product-grid .card-img-top {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      transition: transform 0.3s ease;
    }

    .main-product-grid .card:hover .card-img-top {
      transform: scale(1.05);
    }

    /* Specific styling for ABSORBENT COTTON WOOL I.P and LATEX EXAMINATION GLOVE */
    .main-product-grid .cotton-image,
    .main-product-grid .glove-image {
      background: #f8f9fa;
      position: relative;
      height: 200px;
    }

    .main-product-grid .cotton-image::after,
    .main-product-grid .glove-image::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(0, 0, 0, 0.05));
      pointer-events: none;
      border-top-left-radius: 15px;
      border-top-right-radius: 15px;
    }

    .main-product-grid .cotton-image img,
    .main-product-grid .glove-image img {
      filter: brightness(1.1) contrast(1.1);
      border: 1px solid #e0e0e0;
      border-radius: 15px;
      max-height: 200px;
      width: auto;
      margin: 0 auto;
      display: block;
    }

    .main-product-grid .card-body {
      padding: 2rem;
      text-align: center;
      background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%);
    }

    .main-product-grid .card-title {
      font-family: 'Roboto', sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: #1a3c6e;
      margin-bottom: 1rem;
      position: relative;
    }

    .main-product-grid .card-title::after {
      content: '';
      display: block;
      width: 50px;
      height: 3px;
      background: #ffc107;
      margin: 0.5rem auto;
      border-radius: 2px;
    }

    .main-product-grid .card-text {
      font-family: 'Open Sans', sans-serif;
      color: #4a5568;
      font-size: 1rem;
      line-height: 1.6;
      min-height: 80px;
      font-style: normal;
      margin-bottom: 1.5rem;
    }

    .main-product-grid .btn-warning {
      background: linear-gradient(45deg, #ffb300, #ffca28);
      border: none;
      border-radius: 25px;
      padding: 0.75rem 1.5rem;
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      text-transform: uppercase;
      letter-spacing: 1px;
      transition: background 0.3s ease, transform 0.3s ease;
      width: 100%;
    }

    .main-product-grid .btn-warning:hover {
      background: linear-gradient(45deg, #e0a800, #ffca28);
      transform: translateY(-2px);
    }

    .main-product-grid .product-card {
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .main-product-grid .product-card:hover {
      transform: scale(1.05);
      box-shadow: 0 10px 20px rgba(255, 193, 7, 0.3);
    }

    /* Modal Styling */
.modal-content {
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border: none;
}

.modal-header {
  background: linear-gradient(45deg, #1a3c6e, #2b5ea6);
  color: #ffffff;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 1.5rem;
}

.modal-header .modal-title {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: 1.75rem;
}

/* ONLY THESE TWO TITLES → WHITE */
#blogModal1 .modal-title,
#blogModal3 .modal-title {
  color: #ffffff !important;
}

.modal-header .btn-close {
  filter: invert(1);
}

.modal-body {
  padding: 2rem;
  font-family: 'Open Sans', sans-serif;
  color: #34495e;
}

.modal-section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.modal-section:hover {
  transform: translateY(-5px);
}

.modal-section h6 {
  font-family: 'Roboto', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
  color: #1a3c6e;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
}

.modal-section h6 i {
  color: #ffb300;
  margin-right: 0.75rem;
  font-size: 1.5rem;
}

.modal-section p {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a5568;
  margin: 0;
}

.modal-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.modal-section ul li {
  font-size: 1rem;
  line-height: 1.7;
  color: #4a5568;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.modal-section ul li::before {
  content: '\f058';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  color: #ffb300;
  position: absolute;
  left: 0;
  top: 2px;
}

.modal-footer {
  border-top: none;
  padding: 1.5rem;
  background: #f8f9fa;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

.modal-footer .btn-secondary {
  background: linear-gradient(45deg, #6b7280, #9ca3af);
  border: none;
  border-radius: 25px;
  padding: 0.75rem 1.5rem;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.modal-footer .btn-secondary:hover {
  background: linear-gradient(45deg, #4b5563, #6b7280);
  transform: translateY(-2px);
}


    /* Banner Section Styling */
    /*banner section */
  .banner {
    position: relative;
    overflow: hidden;
  }

  .banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(228, 251, 247, 0.586); /* Dark overlay for immersive look like Superpower */
    z-index: 1;
  }

  .banner .carousel-item img {
    width: 100vw; /* Full viewport width for horizontal expansion */
    height: clamp(600px, 95vh, 1100px); /* Increased height for vertical expansion */
    object-fit: cover; /* Maintain aspect ratio, fill container */
    object-position: center; /* Center image to avoid cropping edges */
    filter: brightness(0.75); /* Darker tone for polished look */
    border-radius: 32px; /* More curved corners on all four sides */
    transition: filter 0.6s ease-in-out;
    animation: zoomPulse 6s ease-in-out infinite; /* Zoom effect */
    position: relative;
    z-index: 2; /* Above overlay */
  }

  .carousel-caption {
    background: rgba(0, 0, 0, 0.6); /* Simple, clean semi-transparent background */
    padding: clamp(12px, 3vw, 18px);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    max-width: 85%;
    position: absolute; /* Override Bootstrap default */
    top: 50%; /* Center vertically */
    left: 50%; /* Center horizontally */
    transform: translate(-50%, -50%); /* Exact center alignment */
    bottom: auto; /* Remove default bottom positioning */
    z-index: 3; /* Above image and overlay */
  }

  .carousel-caption h1 {
    font-weight: 700;
    font-size: clamp(22px, 5vw, 32px); /* Simple, bold, and readable */
    color: var(--white, #ffffff);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
  }

  .carousel-caption p {
    font-family: 'Open Sans', sans-serif;
    font-size: clamp(14px, 3vw, 16px);
    color: var(--white, #ffffff);
    line-height: 1.5;
  }

  .carousel-caption .btn-cta {
    display: inline-block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(12px, 3vw, 14px);
    padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
    border-radius: 50px;
    background-color: var(--button-color, #ffc107);
    color: var(--white, #ffffff);
    text-decoration: none;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  .carousel-caption .btn-cta:hover {
    background-color: #e0a800; /* Darker yellow on hover */
    transform: translateY(-3px);
  }

  .carousel-control-prev,
  .carousel-control-next {
    width: 6%; /* Slimmer for a neat look */
    background: none;
    z-index: 3; /* Above image and overlay */
  }

  .carousel-control-prev span,
  .carousel-control-next span {
    font-family: 'Roboto', sans-serif;
    font-size: clamp(18px, 4vw, 24px);
    color: var(--white, #ffffff);
    background: var(--primary-color, #2b5ea6); /* Simple, solid color */
    border-radius: 50%;
    width: clamp(35px, 8vw, 40px); /* Small, neat circular buttons */
    height: clamp(35px, 8vw, 40px);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.3s ease;
  }

  .carousel-control-prev:hover span,
  .carousel-control-next:hover span {
    background: var(--button-color, #ffc107); /* Subtle color change on hover */
    transform: scale(1.1); /* Gentle scale for interactivity */
  }

  .carousel-control-prev:focus span,
  .carousel-control-next:focus span {
    outline: 2px solid var(--white, #ffffff);
    outline-offset: 2px;
  }

  .carousel-indicators [data-bs-target] {
    background-color: var(--primary-color, #2b5ea6);
  }

  @keyframes zoomPulse {
    0%, 100% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.05); /* Zoom-in effect */
    }
  }


    /* Reviews Section Styling */
    .reviews-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
      background: rgba(0, 0, 0, 0.6); /* Match banner caption background */
      border-radius: 8px;
    }

    .reviews-section h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: clamp(22px, 5vw, 32px); /* Match banner h1 */
      color: var(--white, #ffffff);
      text-transform: uppercase;
      letter-spacing: 1px;
      text-align: center;
      margin-bottom: 0.5rem;
    }

    .reviews-section .review-count {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(14px, 3vw, 16px); /* Match banner p */
      color: var(--white, #ffffff);
      line-height: 1.5;
      text-align: center;
      margin-bottom: 1rem;
    }

    .reviews-section .row {
      transition: var(--transition, all 0.3s ease);
    }

    .reviews-section .row:hover {
      transform: translateY(-10px);
      box-shadow: 0 5px 15px rgba(10, 12, 14, 0.3), 0 0 10px rgba(10, 12, 14, 0.2);
    }

    .review-card {
      background-color: rgba(0, 0, 0, 0.6); /* Match banner caption background */
      border: 1px solid #E9ECEF;
      border-radius: 8px;
      padding: clamp(1rem, 3vw, 1.5rem);
      text-align: center;
      transition: var(--transition, all 0.3s ease);
    }

    .review-card:hover {
      transform: translateY(-5px);
    }

    .review-img {
      width: clamp(40px, 12vw, 60px);
      height: clamp(40px, 12vw, 60px);
      border-radius: 50%;
      margin-bottom: 10px;
    }

    .review-card .stars {
      font-size: clamp(12px, 3vw, 14px);
      margin-bottom: 10px;
    }

    .review-card p {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(14px, 3vw, 16px); /* Match banner p */
      color: var(--white, #ffffff);
      line-height: 1.5;
      margin-bottom: 10px;
    }

    .review-card span {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(12px, 2.5vw, 14px); /* Slightly larger than original for consistency */
      color: var(--white, #ffffff);
      line-height: 1.5;
      font-style: italic;
    }

    #healthcareInsightsCarousel .carousel-control-prev,
    #healthcareInsightsCarousel .carousel-control-next,
    #customerReviewCarousel .carousel-control-prev,
    #customerReviewCarousel .carousel-control-next {
      width: 6%; /* Match banner */
      background: none;
      z-index: 2;
    }

    #healthcareInsightsCarousel .carousel-control-prev span,
    #healthcareInsightsCarousel .carousel-control-next span,
    #customerReviewCarousel .carousel-control-prev span,
    #customerReviewCarousel .carousel-control-next span {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(18px, 4vw, 24px); /* Match banner */
      color: var(--white, #ffffff);
      background: var(--primary-color, #2b5ea6); /* Match banner */
      border-radius: 50%;
      width: clamp(35px, 8vw, 40px); /* Match banner */
      height: clamp(35px, 8vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    #healthcareInsightsCarousel .carousel-control-prev:hover span,
    #healthcareInsightsCarousel .carousel-control-next:hover span,
    #customerReviewCarousel .carousel-control-prev:hover span,
    #customerReviewCarousel .carousel-control-next:hover span {
      background: var(--button-color, #ffc107); /* Match banner */
      transform: scale(1.1);
    }

    #healthcareInsightsCarousel .carousel-control-prev:focus span,
    #healthcareInsightsCarousel .carousel-control-next:focus span,
    #customerReviewCarousel .carousel-control-prev:focus span,
    #customerReviewCarousel .carousel-control-next:focus span {
      outline: 2px solid var(--white, #ffffff);
      outline-offset: 2px;
    }

    /* Global Map Section Styling */
    .map-section {
      background-color: #f8f9fa;
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .map-sticky-wrapper {
      position: relative;
      min-height: 400px; /* Ensure enough height for sticky effect */
    }

    .global-map-container {
      background-color: #f8f9fa; /* Matches section background for seamless blend */
      border-radius: 0; /* Removed border-radius to eliminate visible edges */
      text-align: center;
      position: sticky;
      top: 0;
      z-index: 1;
      overflow: hidden; /* Ensures image fits without overflow */
    }

      .global-map-container img {
      width: 100%;
      height: auto; /* Maintains aspect ratio */
      object-fit: cover; /* Ensures image fills container naturally */
      max-height: 600px; /* Adjustable max height for larger screens */
      display: block; /* Removes any default spacing issues */
      margin: 0; /* Removes any default margins */
      padding: 0; /* Removes any default padding */
      border: none; /* Explicitly removes any borders */

    }

    .section-title {
      font-size: clamp(1.8rem, 4vw, 2.5rem);
      font-weight: 700;
      color: #333;
      margin-bottom: 1rem;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .mobile-menu {
        display: none;
      }

      .mobile-menu.show {
        display: flex;
      }

      .main-products-section h2 {
        font-size: 2rem;
      }

      .main-product-grid .card-img-wrapper {
        height: 180px;
      }

      .main-product-grid .cotton-image,
      .main-product-grid .glove-image {
        height: 160px;
      }

      .main-product-grid .cotton-image img,
      .main-product-grid .glove-image img {
        max-height: 160px;
      }

      .main-product-grid .card-body {
        padding: 1.5rem;
      }

      .main-product-grid .card-title {
        font-size: 1.3rem;
      }

      .main-product-grid .card-text {
        font-size: 0.95rem;
        min-height: 70px;
      }

      .modal-header .modal-title {
        font-size: 1.5rem;
      }

      .modal-section {
        padding: 1rem;
      }

      .modal-section h6 {
        font-size: 1.1rem;
      }

      .modal-section p,
      .modal-section ul li {
        font-size: 0.95rem;
      }

      .carousel-caption {
        padding: clamp(10px, 2.5vw, 14px);
        max-width: 90%;
      }

      .carousel-caption h1 {
        font-size: clamp(18px, 4.5vw, 26px);
      }

      .carousel-caption p {
        font-size: clamp(12px, 2.5vw, 14px);
      }

      .carousel-control-prev span,
      .carousel-control-next span {
        width: clamp(30px, 7vw, 35px);
        height: clamp(30px, 7vw, 35px);
        font-size: clamp(16px, 3.5vw, 20px);
      }

      .reviews-section h2 {
        font-size: clamp(18px, 4.5vw, 26px);
      }

      .reviews-section .review-count {
        font-size: clamp(12px, 2.5vw, 14px);
      }

      .review-card p {
        font-size: clamp(12px, 2.5vw, 14px);
      }

      .review-card span {
        font-size: clamp(11px, 2vw, 13px);
      }

      #healthcareInsightsCarousel .carousel-control-prev span,
      #healthcareInsightsCarousel .carousel-control-next span,
      #customerReviewCarousel .carousel-control-prev span,
      #customerReviewCarousel .carousel-control-next span {
        width: clamp(30px, 7vw, 35px);
        height: clamp(30px, 7vw, 35px);
        font-size: clamp(16px, 3.5vw, 20px);
      }

      .global-map-container img {
        max-height: 350px; /* Smaller height for tablets */
      }

      .map-sticky-wrapper {
        min-height: 350px;
      }
    }

    @media (max-width: 360px) {
      .mobile-menu-nav a {
        font-size: clamp(14px, 3.5vw, 16px);
        padding: clamp(8px, 2vw, 10px) 0;
      }

      .carousel-caption h1 {
        font-size: clamp(16px, 4vw, 22px);
      }

      .carousel-caption p {
        font-size: clamp(10px, 2.5vw, 12px);
      }

      .carousel-control-prev span,
      .carousel-control-next span {
        width: clamp(28px, 6vw, 32px);
        height: clamp(28px, 6vw, 32px);
        font-size: clamp(14px, 3vw, 18px);
      }

      .reviews-section h2 {
        font-size: clamp(16px, 4vw, 22px);
      }

      .reviews-section .review-count {
        font-size: clamp(10px, 2.5vw, 12px);
      }

      .review-card p {
        font-size: clamp(10px, 2.5vw, 12px);
      }

      .review-card span {
        font-size: clamp(10px, 2vw, 12px);
      }

      #healthcareInsightsCarousel .carousel-control-prev span,
      #healthcareInsightsCarousel .carousel-control-next span,
      #customerReviewCarousel .carousel-control-prev span,
      #customerReviewCarousel .carousel-control-next span {
        width: clamp(28px, 6vw, 32px);
        height: clamp(28px, 6vw, 32px);
        font-size: clamp(14px, 3vw, 18px);
      }

      .global-map-container img {
        max-height: 280px; /* Smaller height for small screens */
      }

      .map-sticky-wrapper {
        min-height: 280px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .main-product-grid .card,
      .main-product-grid .card-img-top,
      .main-product-grid .btn-warning,
      .modal-section,
      .modal-footer .btn-secondary,
      .mobile-menu-nav a,
      .carousel-control-prev span,
      .carousel-control-next span,
      #healthcareInsightsCarousel .carousel-control-prev span,
      #healthcareInsightsCarousel .carousel-control-next span,
      #customerReviewCarousel .carousel-control-prev span,
      #customerReviewCarousel .carousel-control-next span,
      .reviews-section .row,
      .review-card {
        transition: none;
      }
    }

    /* Fade-in Animation (consistent with existing JS) */
    .fade-in {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity 0.5s ease, transform 0.5s ease;
    }

    .fade-in.visible {
      opacity: 1;
      transform: translateY(0);
    }

    /* Featured Products Section */
    .featured-products-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .featured-products-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color);
      font-size: clamp(18px, 5vw, 28px);
    }

    .featured-products-section p {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
    }

    .featured-products-section .card {
      border: 1px solid var(--light-bg);
      border-radius: 12px;
      overflow: hidden;
      transition: var(--transition);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .featured-products-section .col-md-4 {
      padding: clamp(20px, 5vw, 25px);
      transition: var(--transition);
      position: relative;
    }

    .featured-products-section .col-md-4:hover {
      transform: scale(1.05);
      box-shadow: 0 8px 16px rgba(10, 12, 14, 0.2), 0 0 20px rgba(10, 12, 14, 0.1);
      background-color: rgba(255, 193, 7, 0.05);
    }

    /* Products Section Styles */
    .products-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
      background: var(--light-bg);
    }

    .products-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color);
      font-size: clamp(18px, 5vw, 28px);
      text-align: center;
    }

    .products-section p {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      text-align: center;
      margin-bottom: clamp(1.5rem, 3vw, 2rem);
    }

    .products-section .filter-container {
      margin-bottom: clamp(1.5rem, 3vw, 2rem);
      display: flex;
      justify-content: center;
      gap: clamp(0.5rem, 2vw, 1rem);
      flex-wrap: wrap;
    }

    .products-section .filter-btn {
      background-color: var(--white);
      border: 1px solid var(--light-bg);
      border-radius: 20px;
      padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
      font-size: clamp(12px, 3vw, 14px);
      font-family: 'Roboto', sans-serif;
      font-weight: 500;
      color: var(--text-color);
      cursor: pointer;
      transition: var(--transition);
    }

    .products-section .filter-btn.active,
    .products-section .filter-btn:hover {
      background-color: var(--button-color);
      border-color: var(--button-color);
      color: var(--white);
    }

    .product-grid .card {
      border: none;
      border-radius: 12px;
      overflow: hidden;
      transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      background-color: var(--white);
    }

    .product-grid .card:hover {
      transition: var(--transition);
      transform: scale(1.05);
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transform: translateY(-8px) scale(1.03);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 4px 10px rgba(255, 193, 7, 0.2);
      border: 1px solid rgba(255, 193, 7, 0.5);
    }

    .product-grid .card-img-container {
      background-color: var(--white);
      padding: clamp(10px, 2vw, 15px);
    }

    .product-grid .card-img-top {
      height: clamp(150px, 40vw, 200px);
      width: 100%;
      object-fit: contain;
      border-radius: 8px;
    }

    .product-grid .card-body {
      padding: clamp(1rem, 3vw, 1.5rem);
      text-align: center;
    }

    .product-grid .card-title {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(16px, 4vw, 18px);
      color: var(--text-color);
    }

    .product-grid .card-text {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-color);
      margin-bottom: 10px;
    }

    .product-grid .price {
      font-size: clamp(14px, 3.5vw, 16px);
      font-weight: 700;
      color: #28a745;
      margin-bottom: 10px;
    }

    .product-grid .stars {
      color: var(--button-color);
      margin-bottom: 10px;
      font-size: clamp(12px, 3vw, 14px);
    }

    .product-grid .btn-warning {
      background-color: var(--button-color);
      border: none;
      padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
      font-weight: 600;
      font-size: clamp(12px, 3vw, 14px);
      min-height: 44px;
      border-radius: 8px;
      transition: var(--transition), background-color 0.4s ease, transform 0.4s ease;
    }

    .product-grid .btn-warning:hover {
      background-color: #e0a800;
      transform: translateY(-3px);
    }

    /* Product Details Section */
    /*Products Section Css */
  .product-details-section {
    margin-top: 80px;
    padding: clamp(2rem, 5vw, 3rem) 0;
    background: #ffffff; /* Plain white background, no gradients */
  }

    .product-details-section {
    margin-top: 80px;
  }

  @media (max-width: 768px) {
    .product-details-section {
      margin-top: 60px;
    }
  }

  .product-details-section .product-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: var(--transition);
  }

  .product-details-section .product-image-container:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  .product-details-section .product-image-container:hover .product-detail-img {
    transform: scale(1.1);
  }

  .product-detail-img {
    width: 100%;
    height: clamp(200px, 50vw, 400px);
    object-fit: contain;
    background: #ffffff;
    padding: clamp(10px, 2vw, 15px);
    transition: transform 0.4s ease;
  }

  .product-title {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: clamp(20px, 5vw, 28px);
    color: var(--text-color);
  }

  .product-rating .stars {
    font-size: clamp(14px, 3.5vw, 16px);
  }

  .product-rating .review-count {
    font-size: clamp(12px, 3vw, 14px);
    color: #6C757D;
  }

  .product-price {
    font-size: clamp(18px, 4.5vw, 24px);
    font-weight: 700;
    color: #28a745;
  }

  .product-description {
    font-size: clamp(14px, 3.5vw, 16px);
    color: var(--text-color);
    line-height: 1.6;
  }

  .product-meta p {
    font-size: clamp(12px, 3vw, 14px);
    color: var(--text-color);
    margin-bottom: 0.5rem;
  }

  .product-meta strong {
    font-weight: 600;
  }

    .quantity-selector .input-group {
      max-width: 150px;
    }

    .quantity-selector .form-control {
      font-size: clamp(12px, 3vw, 14px);
      width: 60px;
    }

    .quantity-selector .btn-outline-secondary {
      font-size: clamp(12px, 3vw, 14px);
      padding: clamp(8px, 2vw, 10px);
    }

    .product-actions .btn-buy-now {
      background-color: var(--button-color);
      border: none;
      padding: clamp(10px, 2.5vw, 12px) clamp(20px, 5vw, 24px);
      font-size: clamp(14px, 3.5vw, 16px);
      border-radius: 8px;
      transition: var(--transition), background-color 0.4s ease, transform 0.4s ease;
    }

    .product-actions .btn-buy-now:hover {
      background-color: #e0a800;
      transform: translateY(-3px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .product-actions .btn-add-to-cart {
      border: 1px solid var(--text-color);
      color: var(--text-color);
      padding: clamp(10px, 2.5vw, 12px) clamp(20px, 5vw, 24px);
      font-size: clamp(14px, 3.5vw, 16px);
      border-radius: 8px;
      transition: var(--transition), background-color 0.4s ease, transform 0.4s ease;
    }


  .product-actions .btn-add-to-cart:hover {
    background-color: var(--text-color);
    color: #ffffff;
    transform: translateY(-3px);
  }

  .product-tabs .nav-tabs {
    border-bottom: 2px solid #e9ecef;
  }

    .product-tabs .nav-link {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
      border: none;
      border-bottom: 2px solid transparent;
    }

    .product-tabs .nav-link.active {
      color: var(--button-color);
      border-bottom: 2px solid var(--button-color);
    }

    .product-tabs .nav-link:hover {
      color: var(--button-color);
      background: none;
    }

  .product-tabs .tab-content {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }

    .product-tabs .tab-pane h4 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(16px, 4vw, 18px);
      color: var(--text-color);
      margin-bottom: 1rem;
    }

    .product-tabs .tab-pane p {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      line-height: 1.6;
    }

    /* Hero Background Section */
    .hero-bg-section {
      position: relative;
      width: 100%;
      height: clamp(200px, 30vw, 300px);
      background: url('choclatecotton.jpg') no-repeat center center/cover;
      margin-bottom: clamp(1rem, 3vw, 2rem);
    }

    .hero-bg-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: linear-gradient(rgba(10, 12, 14, 0.5), rgba(10, 12, 14, 0.5));
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .hero-title {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: var(--white);
      font-size: clamp(24px, 5vw, 36px);
      margin-bottom: clamp(0.5rem, 1vw, 1rem);
    }

    .hero-subtitle {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(14px, 3.5vw, 18px);
      color: #f5eaea; /* Text color of 3 subtitles */
      max-width: 600px;
    }

    /* Certifications Section */
    .certifications-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .certifications-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color, #333); /* Fallback color */
      font-size: clamp(18px, 5vw, 28px);
    }

    .certifications-section p {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color, #333); /* Fallback color */
    }

    .certifications-section .certification-img {
      max-height: clamp(220px, 40vw, 260px); /* Base image size */
      margin-bottom: 10px;
      cursor: pointer; /* Indicates the image is clickable */
      transition: transform 0.3s ease; /* For hover compatibility */
    }

    .certifications-section .col-md-4 {
      padding: clamp(10px, 3vw, 15px);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .certifications-section .col-md-4:hover {
      transform: scale(1.05); /* Original hover effect */
      box-shadow: 0 8px 16px rgba(10, 12, 14, 0.3), 0 0 20px rgba(10, 12, 14, 0.2);
      z-index: 10;
    }

    /* Popup Overlay */
    .popup-overlay {
      display: none; /* Hidden by default */
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.8); /* Darker semi-transparent background */
      z-index: 1000;
      justify-content: center;
      align-items: center;
      opacity: 0; /* Start invisible for animation */
      transition: opacity 0.3s ease-in-out; /* Smooth fade-in */
    }

    .popup-overlay.active {
      display: flex; /* Show when active */
      opacity: 1; /* Fully visible */
    }

    .popup-img {
      max-height: clamp(400px, 70vw, 500px); /* Significantly larger size for popup */
      max-width: 90%; /* Prevent overflow */
      object-fit: contain; /* Maintain aspect ratio */
      border: 5px solid #fff; /* White border for emphasis */
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
      transform: scale(0.5); /* Start smaller for animation */
      transition: transform 0.3s ease-in-out, max-height 0.3s ease-in-out; /* Smooth size and scale animation */
    }

    .popup-overlay.active .popup-img {
      transform: scale(1); /* Grow to full size when active */
    }

    /* Customer Reviews Section */
    .reviews-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .reviews-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color);
      font-size: clamp(18px, 5vw, 28px);
    }

    .review-count {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
    }

    .reviews-section .row {
      transition: var(--transition);
    }

    .reviews-section .row:hover {
      transform: translateY(-10px);
      box-shadow: 0 5px 15px rgba(10, 12, 14, 0.3), 0 0 10px rgba(10, 12, 14, 0.2);
    }

    .review-card {
      background-color: var(--light-bg);
      border: 1px solid #E9ECEF;
      border-radius: 8px;
      padding: clamp(1rem, 3vw, 1.5rem);
      text-align: center;
      transition: var(--transition);
    }

    .review-card:hover {
      transform: translateY(-5px);
    }

    .review-img {
      width: clamp(40px, 12vw, 60px);
      height: clamp(40px, 12vw, 60px);
      border-radius: 50%;
      margin-bottom: 10px;
    }

    .review-card .stars {
      font-size: clamp(12px, 3vw, 14px);
      margin-bottom: 10px;
    }

    .review-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-color);
      margin-bottom: 10px;
    }

    .review-card span {
      font-size: clamp(11px, 2.5vw, 12px);
      color: #6C757D;
      font-style: italic;
    }

    /* new autoscroll comapny images */
    /* Available Products Section */
    .available-products-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .available-products-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color);
      font-size: clamp(18px, 5vw, 28px);
    }

    .available-products-section p {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
    }

    .available-products-slider {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin: 2rem auto;
    }

    .slider-track {
      display: flex;
      width: calc(250px * 12); /* 6 items * 2 loops, adjust based on item count */
      animation: scroll 20s linear infinite;
    }

    .slider-item {
      min-width: clamp(150px, 20vw, 200px); /* Neutral size, responsive */
      height: clamp(150px, 20vw, 200px);
      margin-right: 20px;
      overflow: hidden;
    }

    .slider-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease;
    }

    .slider-item:hover img {
      transform: scale(1.05);
    }

    /* Animation for Auto-Scroll */
    @keyframes scroll {
      0% { transform: translateX(0); }
      100% { transform: translateX(calc(-250px * 6)); } /* Move full length of 6 items */
    }

/* Healthcare Professionals' Insights  Doctors Section */

/* ============================================================= */
/* FINAL: ULTRA-SMOOTH INFINITE MARQUEE – NO ARROWS VERSION     */
/* Exactly 2 seconds per card | Seamless | Pause on hover       */
/* ============================================================= */

.reviews-section {
  background-color: #f8f9fa;
  padding: clamp(4rem, 8vw, 6rem) 0;
  overflow: hidden;
}

.testimonial-carousel {
  position: relative;
  padding: 70px 0;
  overflow: hidden;
}

/* GOLDEN ARROWS COMPLETELY REMOVED – CLEAN LOOK */

/* PERFECT INFINITE LOOP – NO JUMP EVER */
.testimonial-track {
  display: flex;
  gap: 40px;
  width: max-content;
  animation: scroll-loop var(--duration, 10s) linear infinite;
}

.testimonial-track:hover {
  animation-play-state: paused;
}

@keyframes scroll-loop {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-50% - 20px)); } /* gap/2 = 20px */
}

/* YOUR PREMIUM REVIEW CARDS – 100% UNTOUCHED */
.review-card {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  padding: clamp(1.8rem, 5vw, 2.4rem);
  transition: all 0.4s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
  flex: 0 0 380px;
  min-width: 380px;
}

.review-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #FFC107, #FFB300);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.review-card:hover::before { opacity: 1; }
.review-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 40px rgba(0,0,0,0.14);
  border-color: #FFC107;
}

.review-card img {
  width: 96px !important;
  height: 96px !important;
  object-fit: cover;
  object-position: center top;
  border-radius: 50% !important;
  border: 4px solid #ffffff;
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
  margin: 0 auto 1.4rem auto;
  flex-shrink: 0;
  background: #f8f9fa;
  transition: all 0.4s ease;
}
.review-card:hover img {
  transform: scale(1.08);
  box-shadow: 0 12px 30px rgba(255,193,7,0.25);
  border-color: #FFC107;
}

.review-card p {
  font-size: clamp(0.95rem, 2.9vw, 1.02rem);
  color: #333;
  line-height: 1.78;
  margin-bottom: 1.3rem;
  flex-grow: 1;
  font-style: italic;
  padding: 0 0.3rem;
  position: relative;
}
.review-card p::before {
  content: '“';
  font-size: 3.2rem;
  color: #FFC107;
  opacity: 0.15;
  position: absolute;
  top: -12px;
  left: 4px;
  font-family: Georgia, serif;
}

.review-card span {
  font-size: clamp(0.88rem, 2.6vw, 0.96rem);
  color: #1a1a1a;
  font-weight: 700;
  display: block;
  margin-top: auto;
}
.review-card span::before { content: "— "; color: #FFC107; font-weight: bold; }

.review-card .stars {
  color: #FFC107;
  font-size: 1.4rem;
  margin: 0.8rem 0;
  letter-spacing: 4px;
}

/* RESPONSIVE – PERFECT ON EVERY DEVICE */
@media (max-width: 1400px) { .review-card { flex: 0 0 360px; min-width: 360px; } }
@media (max-width: 1200px) { .review-card { flex: 0 0 340px; min-width: 340px; } .testimonial-track { gap: 32px; } }
@media (max-width: 992px)  { .review-card { flex: 0 0 310px; min-width: 310px; } }
@media (max-width: 768px)  { .review-card { flex: 0 0 290px; min-width: 290px; padding: 1.9rem 1.4rem; } }
@media (max-width: 576px)  { .review-card { flex: 0 0 88%; min-width: 280px; max-width: 340px; } }
@media (max-width: 480px)  { .review-card { flex: 0 0 92%; } }


/* Customer Testimonials Section */
    .testimonials-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
    }

    .testimonials-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      color: var(--text-color);
      font-size: clamp(18px, 5vw, 28px);
    }

    .testimonials-subtext {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
    }

    .testimonials-section .testimonial-grid {
      transition: var(--transition);
    }

    /* .testimonials-section .testimonial-grid:hover {
      animation:alternate;
      box-shadow: 0 0 20px rgba(0, 123, 255, 0.3);
    } */

    .testimonial-video {
      width: 100%;
      max-width: clamp(200px, 60vw, 300px);
      margin: 0 auto;
    }


    /* Brochure Section */
    .brochure-section {
      padding: clamp(3rem, 6vw, 4rem) 0;
      background: linear-gradient(135deg, var(--light-bg) 0%, #e9f5ff 100%);
      position: relative;
      overflow: hidden;
    }

    .brochure-section::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: radial-gradient(circle at center, rgba(10, 12, 14, 0.1) 0%, transparent 70%);
      z-index: 0;
    }

    .brochure-section .container {
      position: relative;
      z-index: 1;
    }

    .brochure-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: var(--text-color);
      font-size: clamp(24px, 6vw, 36px);
      text-align: center;
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .brochure-subtext {
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      text-align: center;
      margin-bottom: clamp(1.5rem, 3vw, 2rem);
      opacity: 0.8;
    }

    .download-btn {
      background-color: var(--button-color);
      border: 2px solid var(--button-color);
      color: var(--text-color);
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(14px, 3.5vw, 16px);
      padding: clamp(10px, 2.5vw, 12px) clamp(24px, 6vw, 32px);
      border-radius: 50px;
      transition: var(--transition);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 48px;
      margin: 0 auto clamp(2rem, 4vw, 3rem);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .download-btn:hover {
      background-color: transparent;
      color: var(--button-color);
      transform: translateY(-3px);
      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .download-btn:focus {
      outline: none;
      box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.3);
    }

    .brochure-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 320px), 1fr));
      gap: clamp(1.5rem, 4vw, 2rem);
      margin-top: clamp(2rem, 4vw, 3rem);
    }

    .brochure-card {
      background-color: var(--white);
      border: none;
      border-radius: 12px;
      overflow: hidden;
      transition: var(--transition);
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.05);
      position: relative;
      opacity: 0;
    }

    .brochure-card.visible {
      opacity: 1;
    }

    .brochure-card:nth-child(1) { transition-delay: 0.1s; }
    .brochure-card:nth-child(2) { transition-delay: 0.2s; }
    .brochure-card:nth-child(3) { transition-delay: 0.3s; }

    .brochure-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(255, 193, 7, 0.2), 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .brochure-card img {
      width: 100%;
      height: clamp(140px, 40vw, 200px);
      object-fit: cover;
      border-radius: 8px 8px 0 0;
      transition: transform 0.4s ease;
    }

    .brochure-card:hover img {
      transform: scale(1.1);
    }

    .brochure-card .card-body {
      padding: clamp(1rem, 3vw, 1.5rem);
      text-align: center;
    }

    .brochure-card .card-title {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      font-size: clamp(16px, 4vw, 18px);
      color: var(--text-color);
      margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
    }

    .brochure-card .card-text {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-color);
      margin-bottom: clamp(1rem, 2vw, 1.5rem);
      opacity: 0.85;
    }

    .brochure-card .btn {
      font-family: 'Open Sans', sans-serif;
      font-weight: 600;
      font-size: clamp(12px, 3vw, 14px);
      padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
      border-radius: 50px;
      transition: var(--transition);
    }

    .brochure-card .btn-warning {
      background-color: var(--button-color);
      border: none;
    }

    .brochure-card .btn-warning:hover {
      background-color: #e0a800;
      transform: translateY(-2px);
    }

    /* Footer */
/* ========================================
   FOOTER – PURE BLACK + NO HOVER ON ICONS
   ======================================== */
footer {
  background: #000;
  color: #d1d3d4;
  padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(1.5rem, 4vw, 2.5rem);
  font-family: 'Roboto', sans-serif;
  font-size: clamp(13px, 3vw, 14px);
}

footer h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  color: #ffffff;
  font-size: clamp(17px, 4vw, 20px);
  margin-bottom: 1rem;
  position: relative;
  padding-bottom: 0.5rem;
}
footer h5::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 3px;
  background: #FFC107;
  border-radius: 2px;
}

/* LOGO */
.footer-logo {
  width: clamp(180px, 28vw, 190px);
  height: auto;
  display: block;
}

/* SOCIAL ICONS – NO HOVER, JUST CLEAN & CLICKABLE */
.social-icons {
  display: flex;
  gap: 0;
  margin-top: 1.2rem;
  justify-content: flex-start;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  margin-right: -8px;
}

.social-link:last-child {
  margin-right: 0;
}

.social-link i {
  font-size: 32px;
  color: #ffffff;
}

@media (max-width: 992px) {
  .social-icons { justify-content: center; }
  .social-link { margin-right: -10px; }
  .social-link:last-child { margin-right: 0; }
}

/* QUICK LINKS */
footer .list-unstyled a {
  color: #d1d3d4;
  text-decoration: none;
  display: block;
  margin-bottom: 0.6rem;
  transition: color 0.3s ease;
}
footer .list-unstyled a:hover {
  color: #FFC107;
}

/* CONTACT */
footer p { margin: 0.5rem 0; display: flex; align-items: center; color: #d1d3d4 !important; }
footer p i { color: #FFC107; font-size: 1.1rem; width: 20px; }
footer p a { color: #d1d3d4 !important; text-decoration: none; }
footer p a:hover { color: #FFC107 !important; }

/* SUBSCRIBE */
.subscribe-form .form-control { background: #1e2124; border: 1px solid #444; color: #fff; border-radius: 6px 0 0 6px; min-height: 44px; }
.subscribe-form .btn-warning { background: #FFC107; color: #000; border-radius: 0 6px 6px 0; min-height: 44px; }
.subscribe-form .btn-warning:hover { background: #ffb300; }

/* BOTTOM */
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 1.5rem; margin-top: 2rem; font-size: 13px; color: #888; }
.footer-links a { color: #888; margin: 0 0.5rem; text-decoration: underline; }
.footer-links a:hover { color: #FFC107; }

@media (max-width: 992px) {
  .social-icons { justify-content: center; }
  .footer-brand, [data-responsive] { text-align: center; align-items: center !important; }
  footer p { justify-content: center; }
}




    /* Events Banner */
    .events-banner {
      background: url('new\ background\ banner\ img\ 3.jpg') no-repeat center center/cover;
      color: var(--white);
      text-align: center;
      padding: clamp(100px, 15vw, 150px) 0 clamp(80px, 10vw, 100px);
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }

    .events-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
      transition: var(--transition);
    }

    .events-banner:hover::before {
      background: rgba(0, 0, 0, 0.4);
    }

    .events-banner .banner-content {
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(20px);
      animation: slideUp 0.8s ease-out forwards;
    }

    .events-banner h1 {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .events-banner p {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      max-width: 600px;
      margin: 0 auto;
      opacity: 0;
      animation: fadeIn 1s ease-out 0.2s forwards;
    }

    /* Events Section */
.events-section {
  padding: clamp(2rem, 5vw, 3rem) 0;
  background: var(--light-bg);
}

.events-section h2 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  color: var(--text-color);
  font-size: clamp(24px, 6vw, 36px);
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  opacity: 0;
  animation: slideUp 0.6s ease-out forwards;
}

.events-section p {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(14px, 3.5vw, 16px);
  color: var(--text-color);
  opacity: 0;
  animation: fadeIn 0.8s ease-out 0.1s forwards;
}

.events-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30vw, 320px), 1fr));
  gap: clamp(1.5rem, 4vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

/* Base Card */
.event-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(255, 193, 7, 0.1);
}

.event-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Golden Gradient Border (Background Hover) */
.event-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFC107, #FFB300, #FFA000);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: -1;
  pointer-events: none;
  filter: blur(1px);
}

.event-card:hover::before {
  opacity: 0.15;
}

/* Card Lift + Shadow Glow on Hover */
.event-card:hover {
  transform: translateY(-14px);
  box-shadow: 
    0 24px 48px rgba(0, 0, 0, 0.14),
    0 12px 28px rgba(255, 193, 7, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
  z-index: 10;
}

/* Image Container - No Hover Effects */
.event-image-container {
  position: relative;
  overflow: hidden;
  background: #fff;
  padding: clamp(10px, 2vw, 15px);
  border-radius: 12px;
  margin: 4px;
}

.event-img {
  width: 100%;
  height: clamp(150px, 40vw, 200px);
  object-fit: cover;
  border-radius: 8px;
  display: block;
  /* No transition → no zoom */
}

/* Body */
.event-body {
  padding: clamp(1rem, 3vw, 1.5rem);
  text-align: center;
  position: relative;
  z-index: 1;
}

.event-body h5 {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 4vw, 18px);
  color: var(--text-color);
  margin-bottom: clamp(0.5rem, 1.5vw, 0.75rem);
  transition: color 0.3s ease;
}

.event-card:hover .event-body h5 {
  color: #1a1a1a;
}

/* Button Base */
.event-body .btn {
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(12px, 3vw, 14px);
  padding: clamp(10px, 2.2vw, 12px) clamp(18px, 4.5vw, 24px);
  border-radius: 50px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Solid Button */
.event-body .btn-warning {
  background: var(--button-color);
  color: #000;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
}

.event-body .btn-warning::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(135deg, #FFB300, #FFC107);
  border-radius: 50px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.event-body .btn-warning:hover {
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(255, 193, 7, 0.4);
  color: #000;
}

.event-body .btn-warning:hover::before {
  opacity: 1;
}

.event-body .btn-warning:active {
  transform: translateY(-1px) scale(1.02);
}

/* Outline Button */
.event-body .btn-outline-warning {
  border: 2px solid var(--button-color);
  color: var(--button-color);
  background: transparent;
}

.event-body .btn-outline-warning:hover {
  background: var(--button-color);
  color: #000;
  transform: translateY(-3px) scale(1.05);
  box-shadow: 0 10px 24px rgba(255, 193, 7, 0.3);
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .event-card,
  .event-card:hover,
  .btn {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
  .event-card::before {
    display: none;
  }
}

    /* CTA Section */
    .cta-section {
      padding: clamp(2rem, 5vw, 3rem) 0;
      background: linear-gradient(135deg, var(--light-bg) 0%, #e9f5ff 100%);
      position: relative;
    }

    .cta-section h2 {
      font-family: 'Open Sans', sans-serif;
      font-weight: 700;
      color: var(--text-color);
      font-size: clamp(24px, 6vw, 36px);
      margin-bottom: clamp(0.5rem, 1vw, 1rem);
      opacity: 0;
      animation: slideUp 0.6s ease-out forwards;
    }

    .cta-section p {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-color);
      opacity: 0;
      animation: fadeIn 0.8s ease-out 0.1s forwards;
    }

    .cta-section .subscribe-form {
      max-width: clamp(300px, 50vw, 400px);
      margin: 0 auto;
    }

    /* Banner Section */
    .banner.contact-banner {
      background: url('new\ background\ banner\ img.jpg') no-repeat center center/cover;
      color: var(--white);
      text-align: center;
      padding: 150px 0 100px;
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }

    .banner.contact-banner:hover {
      filter: brightness(1.1);
    }

    .banner.contact-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
      transition: var(--transition);
    }

    .banner.contact-banner:hover::before {
      background: rgba(0, 0, 0, 0.4);
    }

    .banner-content {
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(20px);
      animation: slideUp 0.8s ease-out forwards;
    }

    .banner-content h1 {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      margin-bottom: 1rem;
    }
    /* changed the color to white in line no 1883 newly  */
    .banner-content p {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      max-width: 600px;
      margin: 0 auto;
      opacity: 0;
      color: #fff;
      animation: fadeIn 1s ease-out 0.2s forwards;
    }

    /* Contact page  Section */

    /* Contact Section */
    .contact-section {
      padding: clamp(40px, 5vw, 60px) 20px;
      background-color: #f8f9fa;
    }

    .contact-container {
      max-width: 1200px;
      margin: 0 auto;
      display: flex;
      gap: clamp(20px, 5vw, 40px);
      flex-wrap: wrap;
    }

    .contact-info {
      flex: 1;
      min-width: 300px;
    }

    .contact-info h2 {
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 15px;
    }

    .contact-info p {
      font-size: clamp(14px, 2vw, 16px);
      margin-bottom: 20px;
      color: #666;
    }

    .contact-info ul {
      list-style: none;
      padding: 0;
      margin: 0 0 20px 0;
    }

    .contact-info ul li {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      font-size: clamp(14px, 2vw, 16px);
    }

    .contact-info ul li:nth-child(1) { animation-delay: 0.3s; }
    .contact-info ul li:nth-child(2) { animation-delay: 0.4s; }
    .contact-info ul li:nth-child(3) { animation-delay: 0.5s; }

    .contact-info ul li i {
      margin-right: 10px;
      color: var(--primary-color, #2b5ea6);
    }

    .contact-info ul li a {
      color: #000;
      text-decoration: none;
      position: relative;
    }

    .contact-info ul li a::after {
      content: '';
      position: absolute;
      bottom: -2px;
      left: 0;
      width: 0;
      height: 2px;
      background: var(--button-color, #ffc107);
      transition: width 0.3s ease;
    }

    .contact-info ul li a:hover {
      color: var(--button-color, #ffc107);
      transform: translateX(5px);
    }

    .contact-info ul li a:hover::after {
      width: 100%;
    }

    .social-icons {
      margin-top: 20px; /* Spacing below <ul> */
      text-align: left; /* Align with contact info text */
    }

    .social-icons a {
      display: inline-block; /* Ensure proper sizing for image */
      text-decoration: none;
      margin-right: 15px; /* YouTube code: Added spacing between icons */
    }

    /* YouTube code: Styling for LinkedIn and YouTube logos */
    .social-icons img.linkedin-logo,
    .social-icons img.youtube-logo {
      width: clamp(40px, 6vw, 50px); /* Consistent size with LinkedIn */
      height: auto;
      transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
    }

    /* YouTube code: Hover effects for both logos */
    .social-icons a:hover img.linkedin-logo,
    .social-icons a:hover img.youtube-logo {
      transform: scale(1.1); /* Subtle scale, matching site aesthetic */
      box-shadow: 0 4px 8px rgba(255, 193, 7, 0.3); /* Subtle glow with --button-color */
    }

    .contact-form {
      flex: 1;
      min-width: 300px;
    }

    .contact-form h2 {
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 15px;
    }

    .form-group {
      margin-bottom: 20px;
    }

    .contact-form .form-group {
      margin-bottom: 1.5rem;
      opacity: 0;
      animation: fadeIn 0.8s ease-out forwards;
    }

    .contact-form .form-group:nth-child(1) { animation-delay: 0.2s; }
    .contact-form .form-group:nth-child(2) { animation-delay: 0.3s; }
    .contact-form .form-group:nth-child(3) { animation-delay: 0.4s; }

    .contact-form label {
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      color: var(--text-color, #000);
      display: block;
      margin-bottom: 0.5rem;
    }

    .contact-form input,
    .contact-form textarea {
      width: 100%;
      padding: 0.75rem;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      color: var(--text-color, #000);
      transition: var(--transition, all 0.3s ease), box-shadow 0.3s ease, transform 0.3s ease;
    }

    .contact-form input:hover,
    .contact-form textarea:hover,
    .contact-form input:focus,
    .contact-form textarea:focus {
      border-color: var(--button-color, #ffc107);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
      transform: translateY(-2px);
      outline: none;
    }

    .contact-form textarea {
      resize: vertical;
      min-height: 120px;
    }

    .contact-form button {
      font-family: 'Roboto', sans-serif;
      font-size: 1rem;
      font-weight: 600;
      padding: 0.75rem 2rem;
      border: 2px solid var(--button-color, #ffc107);
      border-radius: 5px;
      background: var(--button-color, #ffc107);
      color: var(--white, #ffffff);
      cursor: pointer;
      transition: var(--transition, all 0.3s ease), background 0.4s ease, transform 0.3s ease;
      position: relative;
      overflow: hidden;
      opacity: 0;
      animation: slideUp 0.6s ease-out 0.5s forwards;
    }

    .contact-form button::after {
      content: '';
      position: absolute;
      top: 50%;
      left: 50%;
      width: 0;
      height: 0;
      background: rgba(255, 255, 255, 0.2);
      border-radius: 50%;
      transform: translate(-50%, -50%);
      transition: width 0.4s ease, height 0.4s ease;
    }

    .contact-form button:hover {
      background: #e0a800;
      transform: translateY(-3px) scale(1.05);
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.5);
    }

    .contact-form button:hover::after {
      width: 300px;
      height: 300px;
    }

    /* Map Section */
    .map-section {
     background-color: #f8f9fa;
    padding: clamp(2rem, 5vw, 3rem) 0;
    
    }

    .map-section h2 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      margin-bottom: 20px;
    }

    .maps-container {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: center;
    }

    .map-card {
      flex: 1 1 100%;
      max-width: 500px;
    }

    @media (min-width: 992px) {
      .map-card {
        flex: 1 1 45%;
      }
    }

    .map-card h3 {
      font-family: 'Roboto', sans-serif;
      font-weight: 600;
      margin-bottom: 15px;
    }

    /* Toast Notification */
    .toast {
      position: fixed;
      bottom: clamp(10px, 3vw, 20px);
      right: clamp(10px, 3vw, 20px);
      min-width: 250px;
      z-index: 1050;
    }

    .toast-body {
      font-family: 'Open Sans', sans-serif;
    }

    .bg-success {
      background-color: #28a745 !important;
      color: #fff;
    }

    .bg-danger {
      background-color: #dc3545 !important;
      color: #fff;
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .contact-container {
        flex-direction: column;
        padding: 0 15px;
      }

      .contact-info,
      .contact-form {
        width: 100%;
      }

      .social-icons {
        margin-top: 15px; /* Reduced spacing for mobile */
      }

      /* YouTube code: Responsive sizing for both logos on tablets */
      .social-icons img.linkedin-logo,
      .social-icons img.youtube-logo {
        width: clamp(35px, 5vw, 45px); /* Consistent with LinkedIn */
      }
    }

    @media (max-width: 360px) {
      .contact-section {
        padding: clamp(30px, 5vw, 40px) 10px;
      }

      .social-icons {
        margin-top: 10px; /* Further reduced spacing for small screens */
      }

      /* YouTube code: Responsive sizing for both logos on small screens */
      .social-icons img.linkedin-logo,
      .social-icons img.youtube-logo {
        width: clamp(30px, 4.5vw, 40px); /* Consistent with LinkedIn */
      }
    }

    /* Accessibility: reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .social-icons img.linkedin-logo,
      .social-icons img.youtube-logo,
      .contact-form input,
      .contact-form textarea,
      .contact-form button {
        transition: none;
      }
    }


    /* Map Section */
    .map-section {
      padding: 60px 0;
      text-align: center;
      background: var(--white);
    }

    .map-section h2 {
      font-family: 'Roboto', sans-serif;
      font-size: 2rem;
      font-weight: 700;
      color: var(--text-color);
      margin-bottom: 1rem;
      opacity: 0;
      animation: slideUp 0.6s ease-out forwards;
    }

    .map-section p {
      font-family: 'Open Sans', sans-serif;
      font-size: 1rem;
      color: #666;
      margin-bottom: 2rem;
      opacity: 0;
      animation: fadeIn 0.8s ease-out 0.1s forwards;
    }

    .maps-container {
      display: flex;
      flex-wrap: wrap;
      gap: 2rem;
      max-width: 1200px;
      margin: 0 auto;
      padding: 0 15px;
    }

    .map-card {
      flex: 1;
      min-width: 300px;
      background: var(--light-bg);
      padding: 1.5rem;
      border-radius: 10px;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      transition: var(--transition), transform 0.3s ease, box-shadow 0.3s ease, border 0.3s ease;
      position: relative;
      opacity: 0;
    }

    .map-card:nth-child(1) { animation: slideUp 0.6s ease-out 0.2s forwards; }
    .map-card:nth-child(2) { animation: slideUp 0.6s ease-out 0.3s forwards; }

    .map-card:hover {
      transform: translateY(-5px) scale(1.02);
      box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15), 0 0 10px rgba(255, 193, 7, 0.3);
      border: 1px solid var(--button-color);
    }

    .map-card h3 {
      font-family: 'Roboto', sans-serif;
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--text-color);
      margin-bottom: 1rem;
    }

    .map-card iframe {
      border-radius: 5px;
      width: 100%;
      transition: var(--transition), opacity 0.3s ease;
    }

    .map-card:hover iframe {
      opacity: 0.9;
    }

    /* Toast Notification */
    #toastNotification {
      position: fixed;
      bottom: clamp(10px, 3vw, 20px);
      right: clamp(10px, 3vw, 20px);
      min-width: clamp(200px, 50vw, 300px);
      z-index: 1050;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    #toastNotification.show {
      opacity: 1;
      visibility: visible;
    }

    .toast-body {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(12px, 3vw, 14px);
      padding: clamp(10px, 2.5vw, 12px);
      border-radius: 4px;
    }

    /* Responsive Adjustments */
    @media (max-width: 1024px) {
      .brochure-section .container {
        max-width: 600px;
      }
      .brochure-grid {
        grid-template-columns: 1fr;
      }
      .about-us-section .row {
        flex-direction: column;
        text-align: center;
      }
      .about-us-section img {
        margin-bottom: 1rem;
      }
      .featured-products-section .card {
        max-width: 300px;
        margin: 0 auto;
      }
      .certifications-section .col-md-4 {
        max-width: 300px;
        margin: 0 auto;
      }
      .testimonials-section .testimonial-video {
        max-width: clamp(200px, 80vw, 280px);
      }
    }

    @media (max-width: 768px) {
      .products-section .filter-container {
        flex-direction: column;
        align-items: center;
      }
      .products-section .filter-btn {
        width: 100%;
        max-width: clamp(150px, 50vw, 200px);
      }
      .product-grid .card-img-top {
        height: clamp(120px, 35vw, 160px);
      }
      .product-grid .card-body {
        padding: clamp(0.75rem, 2vw, 1rem);
      }
      .product-grid .card-title {
        font-size: clamp(14px, 3.5vw, 16px);
      }
      .product-grid .card-text {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-grid .price {
        font-size: clamp(13px, 3.2vw, 14px);
      }
      .product-grid .stars {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-grid .btn-warning {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(6px, 1.5vw, 8px) clamp(10px, 2.5vw, 12px);
        min-height: 36px;
      }
      .product-details-section {
        padding: clamp(1.5rem, 4vw, 2rem) 0;
      }
      .product-detail-img {
        height: clamp(150px, 40vw, 300px);
      }
      .product-title {
        font-size: clamp(18px, 4.5vw, 24px);
      }
      .product-rating .stars {
        font-size: clamp(12px, 3vw, 14px);
      }
      .product-rating .review-count {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-price {
        font-size: clamp(16px, 4vw, 20px);
      }
      .product-description {
        font-size: clamp(12px, 3.2vw, 14px);
      }
      .product-meta p {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .quantity-selector .form-control {
        width: 50px;
      }
      .product-actions .btn-buy-now,
      .product-actions .btn-add-to-cart {
        font-size: clamp(12px, 3.2vw, 14px);
        padding: clamp(8px, 2vw, 10px) clamp(16px, 4vw, 20px);
      }
      .product-tabs .nav-link {
        font-size: clamp(12px, 3.2vw, 14px);
        padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
      }
      .product-tabs .tab-pane h4 {
        font-size: clamp(14px, 3.5vw, 16px);
      }
      .product-tabs .tab-pane p {
        font-size: clamp(12px, 3.2vw, 14px);
      }
      .hero-bg-section {
        height: clamp(150px, 25vw, 200px);
      }
      .hero-title {
        font-size: clamp(20px, 4.5vw, 28px);
      }
      .hero-subtitle {
        font-size: clamp(12px, 3vw, 16px);
      }
      .events-banner {
        padding: clamp(80px, 12vw, 100px) 0 clamp(60px, 8vw, 80px);
      }
      .events-banner h1 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
      }
      .events-banner p {
        font-size: clamp(0.875rem, 2vw, 1rem);
      }
      .events-section {
        padding: clamp(1.5rem, 4vw, 2rem) 0;
      }
      .events-section h2 {
        font-size: clamp(20px, 5vw, 28px);
      }
      .events-section p {
        font-size: clamp(12px, 3vw, 14px);
      }
      .event-img {
        height: clamp(120px, 35vw, 160px);
      }
      .event-body h5 {
        font-size: clamp(14px, 3.5vw, 16px);
      }
      .event-date {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .event-body p {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .event-body .btn {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
      }
      .cta-section h2 {
        font-size: clamp(20px, 5vw, 28px);
      }
      .cta-section p {
        font-size: clamp(12px, 3vw, 14px);
      }
      .banner.contact-banner {
        padding: 100px 0 80px;
      }
      .banner-content h1 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
      }
      .contact-section {
        padding: 40px 0;
      }
      .contact-container {
        flex-direction: column;
        gap: 1.5rem;
      }
      .map-section {
        padding: 40px 0;
      }
      .map-card iframe {
        height: 300px;
      }
      .brochure-section {
        padding: clamp(1.5rem, 4vw, 2rem) 0;
      }
      .brochure-section h2 {
        font-size: clamp(20px, 5vw, 28px);
      }
      .brochure-subtext {
        font-size: clamp(12px, 3vw, 14px);
      }
      .brochure-card img {
        height: clamp(120px, 35vw, 160px);
      }
      .brochure-card .card-title {
        font-size: clamp(14px, 3.5vw, 16px);
      }
      .brochure-card .card-text {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .brochure-card .btn {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
      }
    }

    @media (max-width: 360px) {
      .products-section h2 {
        font-size: clamp(16px, 4.5vw, 24px);
      }
      .products-section p {
        font-size: clamp(12px, 3vw, 14px);
      }
      .products-section .filter-btn {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-grid .card-img-top {
        height: clamp(100px, 30vw, 140px);
      }
      .product-details-section {
        padding: clamp(1rem, 3vw, 1.5rem) 0;
      }
      .product-detail-img {
        height: clamp(120px, 35vw, 200px);
      }
      .product-title {
        font-size: clamp(16px, 4vw, 20px);
      }
      .product-rating .stars {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-rating .review-count {
        font-size: clamp(10px, 2.5vw, 12px);
      }
      .product-price {
        font-size: clamp(14px, 3.5vw, 18px);
      }
      .product-description {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .product-meta p {
        font-size: clamp(10px, 2.5vw, 12px);
      }
      .quantity-selector .form-control {
        width: 40px;
      }
      .product-actions .btn-buy-now,
      .product-actions .btn-add-to-cart {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(6px, 1.5vw, 8px) clamp(12px, 3vw, 16px);
      }
      .product-tabs .nav-link {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(5px, 1.2vw, 6px) clamp(10px, 2.5vw, 12px);
      }
      .product-tabs .tab-pane h4 {
        font-size: clamp(13px, 3.2vw, 15px);
      }
      .product-tabs .tab-pane p {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .hero-bg-section {
        height: clamp(120px, 20vw, 160px);
      }
      .hero-title {
        font-size: clamp(18px, 4vw, 24px);
      }
      .hero-subtitle {
        font-size: clamp(11px, 2.8vw, 14px);
      }
      .events-banner {
        padding: clamp(60px, 10vw, 80px) 0 clamp(50px, 7vw, 60px);
      }
      .events-banner h1 {
        font-size: clamp(1.25rem, 3.5vw, 2rem);
      }
      .events-banner p {
        font-size: clamp(0.75rem, 1.8vw, 0.875rem);
      }
      .events-section h2 {
        font-size: clamp(18px, 4.5vw, 24px);
      }
      .events-section p {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .event-img {
        height: clamp(100px, 30vw, 140px);
      }
      .event-body h5 {
        font-size: clamp(13px, 3.2vw, 15px);
      }
      .event-date {
        font-size: clamp(10px, 2.5vw, 12px);
      }
      .event-body p {
        font-size: clamp(10px, 2.5vw, 12px);
      }
      .event-body .btn {
        font-size: clamp(10px, 2.5vw, 12px);
        padding: clamp(5px, 1.2vw, 6px) clamp(10px, 2.5vw, 12px);
      }
      .cta-section h2 {
        font-size: clamp(18px, 4.5vw, 24px);
      }
      .cta-section p {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .banner-content h1 {
        font-size: clamp(1.25rem, 3.5vw, 2rem);
      }
      .contact-info h2,
      .contact-form h2,
      .map-section h2 {
        font-size: 1.5rem;
      }
      .map-card {
        padding: 1rem;
      }
      .brochure-section h2 {
        font-size: clamp(18px, 4.5vw, 24px);
      }
      .brochure-subtext {
        font-size: clamp(11px, 2.8vw, 13px);
      }
      .brochure-card img {
        height: clamp(100px, 30vw, 140px);
      }
      .brochure-card .card-title {
        font-size: clamp(13px, 3.2vw, 15px);
      }
      .brochure-card .card-text {
        font-size: clamp(10px, 2.5vw, 12px);
      }
      .brochure-card .btn {
        font-size: clamp(10px, 2.5vw, 12px);
        padding: clamp(5px, 1.2vw, 6px) clamp(10px, 2.5vw, 12px);
      }
      #toastNotification {
        bottom: 6px;
        right: 6px;
        min-width: clamp(180px, 48vw, 250px);
      }
      .toast-body {
        font-size: clamp(11px, 2.8vw, 13px);
        padding: clamp(8px, 2vw, 10px);
      }
    }

    /* Touch Device Fallback */
    @media (hover: none) {
      .about-us-section .row:hover,
      .featured-products-section .col-md-4:hover,
      .certifications-section .col-md-4:hover,
      .reviews-section .row:hover,
      .testimonials-section .testimonial-grid:hover,
      .footer a:hover,
      .payment-icons i:hover,
      .brochure-card:hover,
      .download-btn:hover,
      .brochure-card .btn:hover,
      .product-grid .card:hover,
      .product-grid .btn-warning:hover,
      .product-details-section .product-image-container:hover,
      .product-details-section .product-image-container:hover .product-detail-img,
      .product-actions .btn-buy-now:hover,
      .product-actions .btn-add-to-cart:hover,
      .events-banner:hover::before,
      .event-card:hover,
      .event-card:hover .event-img,
      .event-body .btn:hover,
      .contact-info:hover,
      .contact-info ul li a:hover,
      .contact-info ul li a:hover::after,
      .social-icons a:hover,
    .contact-form button:hover,
    .contact-form button:hover::after,
    .map-card:hover,
    .map-card:hover iframe {
    transform: none;
    box-shadow: none;
    border: none;
    background: none;
    }
    }
    /* Animations */
    @keyframes slideUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }
    @keyframes slideInLeft {
      0% { opacity: 0; transform: translateX(-20px); }
      100% { opacity: 1; transform: translateX(0); }
    }
    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }
    /*New Resource Page code */
    /* Resources Banner */
    .banner.resources-banner {
      background: url('new\ background\ banner\ img.jpg') no-repeat center center/cover;
      color: var(--white);
      text-align: center;
      padding: clamp(100px, 15vw, 150px) 0 clamp(80px, 10vw, 100px);
      position: relative;
      overflow: hidden;
      transition: var(--transition);
    }

    .banner.resources-banner::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      z-index: 1;
      transition: var(--transition);
    }

    .banner.resources-banner:hover::before {
      background: rgba(0, 0, 0, 0.4);
    }

    .banner.resources-banner .banner-content {
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(20px);
      animation: slideUp 0.8s ease-out forwards;
    }

    .banner.resources-banner h1 {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(2rem, 5vw, 3.5rem);
      font-weight: 700;
      margin-bottom: 1rem;
    }

    .banner.resources-banner p {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(1rem, 2.5vw, 1.25rem);
      max-width: 600px;
      margin: 0 auto;
      opacity: 0;
      animation: fadeIn 1s ease-out 0.2s forwards;
    }

    /* Blog Section */
    .blog-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .blog-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .blog-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .blog-card img {
      width: 100%;
      height: clamp(150px, 30vw, 200px);
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: clamp(0.5rem, 2vw, 1rem);
    }

    .blog-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .blog-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light);
    }

    /* FAQs Section */
    .faqs-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .accordion-item {
      border: none;
      border-radius: 8px;
      margin-bottom: clamp(0.5rem, 2vw, 1rem);
      background: var(--white);
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .accordion-button {
      font-size: clamp(14px, 3.5vw, 16px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
      background: var(--white);
      transition: background var(--transition);
    }

    .accordion-button:not(.collapsed) {
      background: var(--button-color);
      color: var(--white);
    }

    .accordion-button:focus {
      box-shadow: 0 0 5px rgba(255, 193, 7, 0.5);
    }

    .accordion-body {
      font-size: clamp(12px, 3vw, 14px);
      color: black; /* Changed to black */
    }

    /* How-To Guides Section */
    .guides-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .guide-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .guide-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .guide-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .guide-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light);
    }

    /* Downloads Section */
    .downloads-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .download-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .download-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .download-card img {
      width: 100%;
      height: clamp(150px, 30vw, 200px);
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: clamp(0.5rem, 2vw, 1rem);
    }

    .download-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .download-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light);
    }

    /* Tutorial Videos Section */
    .videos-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .video-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .video-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .video-card iframe {
      width: 100%;
      height: clamp(150px, 30vw, 200px);
      border-radius: 8px;
    }

    .video-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
      margin-top: clamp(0.5rem, 2vw, 1rem);
    }

    /* Case Studies Section */
    .case-studies-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .case-study-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .case-study-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .case-study-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .case-study-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light);
    }

    /* Webinars Section */
    .webinars-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .webinar-card {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .webinar-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .webinar-card img {
      width: 100%;
      height: clamp(150px, 30vw, 200px);
      object-fit: cover;
      border-radius: 8px;
      margin-bottom: clamp(0.5rem, 2vw, 1rem);
    }

    .webinar-card h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .webinar-card p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light);
    }

    /* Glossary Section */
    .glossary-section {
      padding: clamp(2rem, 5vw, 3rem);
    }

    .glossary-item {
      background: var(--white);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      padding: clamp(1rem, 3vw, 1.5rem);
      transition: transform var(--transition), box-shadow var(--transition);
    }

    .glossary-item:hover {
      transform: translateY(-8px);
      box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    }

    .glossary-item h5 {
      font-size: clamp(16px, 4vw, 18px);
      font-family: 'Roboto', sans-serif;
      color: var(--text-color);
    }

    .glossary-item p {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--text-light) ;
    }

    /* Animations */
    @keyframes slideUp {
      0% { opacity: 0; transform: translateY(20px); }
      100% { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
      0% { opacity: 0; }
      100% { opacity: 1; }
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .banner.resources-banner {
        padding: clamp(80px, 12vw, 100px) 0 clamp(60px, 8vw, 80px);
      }
      .banner.resources-banner h1 {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
      }
      .banner.resources-banner p {
        font-size: clamp(0.875rem, 2vw, 1rem);
      }
      .blog-card img, .download-card img, .webinar-card img, .video-card iframe {
        height: clamp(120px, 25vw, 160px);
      }
    }

    @media (max-width: 360px) {
      .banner.resources-banner {
        padding: clamp(60px, 10vw, 80px) 0 clamp(50px, 7vw, 60px);
      }
      .banner.resources-banner h1 {
        font-size: clamp(1.25rem, 3.5vw, 2rem);
      }
      .banner.resources-banner p {
        font-size: clamp(0.75rem, 1.8vw, 0.875rem);
      }
      .blog-card h5, .guide-card h5, .download-card h5, .webinar-card h5, .video-card h5, .glossary-item h5 {
        font-size: clamp(14px, 3.5vw, 16px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .banner.resources-banner .banner-content,
      .banner.resources-banner h1,
      .banner.resources-banner p,
      .blog-card,
      .guide-card,
      .download-card,
      .webinar-card,
      .video-card,
      .case-study-card,
      .glossary-item {
        animation: none;
        transition: none;
      }
    }

    /* About Us Page Section */

/* ABOUT US BANNER – Now exactly like Resources page banner */
.banner.aboutus-banner {
  background: url('new\ background\ banner\ img\ 3.jpg') no-repeat center center/cover; /* Change image as needed */
  color: var(--white);
  text-align: center;
  padding: clamp(100px, 15vw, 150px) 0 clamp(80px, 10vw, 100px);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
}

.banner.aboutus-banner::before {
  content: '';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  transition: var(--transition);
}

.banner.aboutus-banner:hover::before {
  background: rgba(0, 0, 0, 0.4);
}

.banner.aboutus-banner .banner-content {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(20px);
  animation: slideUp 0.8s ease-out forwards;
}

.banner.aboutus-banner h1 {
  font-family: 'Roboto', sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin-bottom: 1rem;
}

.banner.aboutus-banner p {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  max-width: 600px;
  margin: 0 auto;
  opacity: 0;
  animation: fadeIn 1s ease-out 0.2s forwards;
}

/* Company Story - Simple & Mobile Friendly */

.company-story {
  padding: clamp(3rem, 8vw, 5rem) 0;
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
}

/* COMPANY STORY – FIXED 280×280 CIRCLE ON ALL DEVICES (INCLUDING MOBILE) */
.company-story-img-wrapper {
  width: 280px !important;
  height: 280px !important;
  margin: 0 auto 1.5rem auto;
  display: block;
  flex-shrink: 0;
}

/* COMPANY STORY – FIXED 280×280 CIRCLE ON EVERY DEVICE (NO SHRINKING) */
.company-story-img-wrapper {
  width: 280px !important;
  height: 280px !important;
  margin: 0 auto 1.5rem auto;
  display: block;
  flex-shrink: 0;            /* Prevents shrinking in flex containers */
}

/* COMPANY STORY – PERFECT CIRCLE EVERYWHERE (Desktop + Mobile) */
.company-story-img-wrapper {
  width: 320px !important;
  height: 320px !important;
  margin: 0 auto 1.5rem auto !important;
  border-radius: 50% !important;
  overflow: hidden !important;        /* This is the key to stop oval distortion */
  /* border: 8px solid #ffffff !important; */
  flex-shrink: 0;
  display: block;
}

.company-story-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;   /* Adjust if face is cut off */
  border-radius: 50% !important;
  display: block;
}

/* Extra safety – forces circle even if something else tries to break it */
@media (max-width: 768px),
       (max-width: 576px),
       (max-width: 480px) {
  .company-story-img-wrapper,
  .company-story-img {
    width: 280px !important;
    height: 280px !important;
    border-radius: 50% !important;
  }
}

.founder-name {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;           /* Ultra bold */
  font-size: clamp(0.5rem, 5vw, 2.8rem) !important;   /* Huge & responsive */
  margin: 0 !important;
  color: #000000;
  letter-spacing: 0.5px;
  line-height: 1.1;
  text-align: center;
}

.section-title {
  font-size: clamp(2rem, 5vw, 3rem);
  color: #1a1a1a;
  font-weight: 800;
  margin: 0 0 1.5rem 0;
  line-height: 1.2;
  font-family: 'Open Sans', sans-serif;
}

.company-story-text {
  font-size: clamp(1rem, 3vw, 1.15rem);
  line-height: 1.8;
  color: #444;
  margin-bottom: 1.3rem;
}

/* DESKTOP & TABLET: Perfect top alignment */
@media (min-width: 768px) {
  .company-story .row {
    align-items: flex-start !important;
  }
 
  .company-story .col-md-6:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
  }
 
  .company-story .col-md-6:last-child {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
 
  .company-story h2.section-title,
  .company-story p {
    margin-top: 0;
  }
}

/* MOBILE: Keep beautiful stacking */
@media (max-width: 767px) {
  .company-story-img {
    max-width: 75%;
    margin: 0 auto 1rem;
    display: block;
  }
 
  .founder-name {
    margin-bottom: 1.8rem;
  }
 
  .section-title {
    margin-top: 1.5rem !important;
    text-align: center;
  }
 
  .company-story-text {
    text-align: center;
  }
}


    /* Mission & Vision */
    .values-mission-vision {
      padding: clamp(40px, 5vw, 60px) 20px;
      background-color: #f8f9fa;
    }

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

    .section-title {
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 30px;
      color: #333;
    }

    .vmv-container {
      display: flex;
      gap: clamp(20px, 5vw, 40px);
      flex-wrap: wrap;
      justify-content: center;
    }

    .vmv-card {
      flex: 1;
      min-width: 250px;
      background: #fff;
      padding: 20px;
      border-radius: 8px;
      text-align: center;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .vmv-icon {
      font-size: clamp(30px, 5vw, 40px);
      color: var(--primary-color);
      margin-bottom: 15px;
    }

    .vmv-title {
      font-size: clamp(18px, 2.5vw, 22px);
      margin-bottom: 10px;
      color: #222;
    }

    .vmv-text {
      font-size: clamp(14px, 2vw, 16px);
      color: #666;
      line-height: 1.6;
    }

    .vmv-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    }

    /* Responsive adjustments */
    @media (max-width: 768px) {
      .vmv-container {
        flex-direction: column;
        align-items: center;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .vmv-card {
        transition: none;
      }
    }


/* Leadership Team */

.leadership-section {
  background: #ffffff;
  padding: 6rem 0;
  font-family: 'Poppins', sans-serif;
}

/* BROAD & PERFECTLY SQUARE CARD */
.team-card {
  background: #fff;
  border-radius: 32px;
  padding: 40px 28px 35px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,0.07);
  transition: all 0.4s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 340px;
  margin: 0 auto;
}

.team-card:hover {
  transform: translateY(-15px);
  box-shadow: 0 25px 60px rgba(255,193,7,0.18);
}

/* GOLDEN CIRCLE BORDER */
.img-circle {
  width: 152px;
  height: 152px;
  border: 4px solid #FFC107;
  border-radius: 50%;
  padding: 10px;
  margin-bottom: 24px;
  background: white;
}

.team-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
}

/* NAME */
.name {
  font-weight: 800;
  font-size: 1.45rem;
  color: #1a1a1a;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

/* TITLE - GOLD & UPPERCASE */
.title {
  font-weight: 700;
  font-size: 1.08rem;
  color: #FFC107;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  margin: 0 0 18px 0;
}

/* BIO TEXT */
.bio {
  font-size: 0.96rem;
  color: #444;
  line-height: 1.75;
  margin: 0;
  flex-grow: 1;
}

/* RESPONSIVE - Perfect on all screens */
@media (max-width: 1200px) {
  .img-circle { width: 140px; height: 140px; }
  .team-card { padding: 35px 24px; }
}

@media (max-width: 992px) {
  .img-circle { width: 135px; height: 135px; }
}

@media (max-width: 768px) {
  .team-card { max-width: 100%; padding: 32px 20px; }
}

@media (max-width: 576px) {
  .img-circle { width: 125px; height: 125px; }
}



/* FULLY RESPONSIVE – STUNNING ON ALL DEVICES */
@media (max-width: 992px) {
  .ceo-card { max-width: 380px; padding: 2.8rem 2rem !important; }
  .ceo-photo { width: 180px !important; height: 180px !important; border-width: 10px !important; }
  .team-card { max-width: 340px; }
  .team-photo { width: 150px !important; height: 150px !important; border-width: 9px !important; }
}

@media (max-width: 768px) {
  .ceo-card { 
    max-width: 340px !important; 
    padding: 2.6rem 1.8rem !important; 
    border-width: 5.5px !important;
  }
  .ceo-photo { width: 160px !important; height: 160px !important; border-width: 9px !important; }
  .team-card { padding: 2.4rem 1.6rem !important; border-width: 5px !important; }
}

@media (max-width: 480px) {
  .ceo-card { 
    max-width: 300px !important; 
    padding: 2.3rem 1.5rem !important; 
    border-width: 5px !important; 
  }
  .ceo-photo { width: 140px !important; height: 140px !important; border-width: 8px !important; }
  .team-card { max-width: 300px !important; padding: 2.2rem 1.4rem !important; border-width: 4.5px !important; }
  .team-photo { width: 130px !important; height: 130px !important; border-width: 7px !important; }
}

@media (max-width: 360px) {
  .ceo-card { max-width: 280px !important; padding: 2rem 1.2rem !important; border-width: 4.5px !important; }
  .ceo-photo { width: 130px !important; height: 130px !important; border-width: 7px !important; }
}


    /* Timeline/History Section */

.timeline-container {
  position: relative;
  padding: 3rem 0;
}

.timeline-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 100%;
  background: linear-gradient(to bottom, #FFD700, #FFC107, #FFB300); /* Soft golden line */
  border-radius: 10px;
  transform: translateX(-50%);
  box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  width: 50%;
}

.timeline-item:nth-child(odd) {
  left: 0;
  text-align: right;
  padding-right: 3rem;
}

.timeline-item:nth-child(even) {
  left: 50%;
  padding-left: 3rem;
}

.timeline-item::before {
  content: '';
  position: absolute;
  width: 24px;
  height: 24px;
  background: white;
  border: 6px solid #FFC107;
  border-radius: 50%;
  top: 10px;
  box-shadow: 0 0 20px rgba(255, 193, 7, 0.5);
  z-index: 1;
}

.timeline-item:nth-child(odd)::before { right: -12px; }
.timeline-item:nth-child(even)::before { left: -12px; }

.timeline-content {
  background: white;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.timeline-content::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #FFC107, #FFB300);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.timeline-content:hover::before {
  opacity: 1;
}

.timeline-content:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(255, 193, 7, 0.2);
  border-color: #FFC107;
}

.timeline-content h5 {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #1a1a1a;
  font-weight: 700;
  margin-bottom: 0.5rem;
  font-family: 'Open Sans', sans-serif;
}

.timeline-content p {
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  color: #555;
  line-height: 1.7;
  margin: 0;
}

/* Mobile – Clean & Elegant */
@media (max-width: 768px) {
  .timeline-container::before {
    left: 20px;
    background: linear-gradient(to bottom, #FFD700, #FFC107);
  }

  .timeline-item {
    width: 100%;
    left: 0 !important;
    padding-left: 50px !important;
    padding-right: 20px;
    text-align: left !important;
  }

  .timeline-item::before {
    left: 8px !important;
    width: 20px;
    height: 20px;
  }

  .timeline-content:hover {
    transform: translateY(-5px);
  }
}

/* Super small screens */
@media (max-width: 480px) {
  .timeline-content {
    padding: 1.2rem;
  }
  .timeline-content h5 { font-size: 1.15rem; }
  .timeline-content p { font-size: 0.95rem; }
}


    /* Client Testimonials */
    /* Client Testimonials */
    .review-card {
      background: var(--light-bg, #f8f9fa);
      padding: clamp(15px, 2vw, 20px);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      text-align: center;
      transition: var(--transition, all 0.3s ease);
    }

    .review-card:hover {
      transform: translateY(-5px);
    }

    .review-card p {
      font-size: clamp(0.9rem, 2vw, 1rem);
      font-style: italic;
    }

    .review-card span {
      display: block;
      font-size: clamp(0.85rem, 2vw, 0.95rem);
      color: var(--primary-color, #2b5ea6);
      margin-top: 1rem;
    }

    #testimonialCarousel .carousel-control-prev,
    #testimonialCarousel .carousel-control-next {
      width: 6%; /* Match banner and review sections */
      background: none;
      z-index: 2;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    #testimonialCarousel .carousel-control-prev span,
    #testimonialCarousel .carousel-control-next span {
      font-family: 'Roboto', sans-serif;
      font-size: clamp(18px, 4vw, 24px); /* Match banner and review sections */
      color: var(--white, #ffffff);
      background: var(--primary-color, #2b5ea6); /* Solid color background */
      border-radius: 50%;
      width: clamp(35px, 8vw, 40px); /* Small, circular buttons */
      height: clamp(35px, 8vw, 40px);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.3s ease, transform 0.3s ease;
    }

    #testimonialCarousel .carousel-control-prev:hover span,
    #testimonialCarousel .carousel-control-next:hover span {
      background: var(--button-color, #ffc107); /* Hover color matches banner */
      transform: scale(1.1); /* Subtle scale effect */
    }

    #testimonialCarousel .carousel-control-prev:focus span,
    #testimonialCarousel .carousel-control-next:focus span {
      outline: 2px solid var(--white, #ffffff);
      outline-offset: 2px;
    }

    @media (max-width: 768px) {
      #testimonialCarousel .carousel-control-prev span,
      #testimonialCarousel .carousel-control-next span {
        width: clamp(30px, 7vw, 35px);
        height: clamp(30px, 7vw, 35px);
        font-size: clamp(16px, 3.5vw, 20px);
      }
    }

    @media (max-width: 360px) {
      #testimonialCarousel .carousel-control-prev span,
      #testimonialCarousel .carousel-control-next span {
        width: clamp(28px, 6vw, 32px);
        height: clamp(28px, 6vw, 32px);
        font-size: clamp(14px, 3vw, 18px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .review-card,
      #testimonialCarousel .carousel-control-prev span,
      #testimonialCarousel .carousel-control-next span {
        transition: none;
      }
    }

    /* Ensure controls are visible on smaller screens */
    @media (max-width: 768px) {
      .carousel-control-prev,
      .carousel-control-next {
        width: 40px;
        height: 40px;
      }
      .carousel-control-prev i,
      .carousel-control-next i {
        font-size: 1.2rem;
        padding: 8px;
      }
    }

    .carousel-control-prev-icon, .carousel-control-next-icon {
      filter: invert(1);
    }

    /* Achievements */
    .achievements {
      padding: clamp(40px, 5vw, 60px) 20px;
      background-color: #f8f9fa;
    }

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

    .section-title {
      font-size: clamp(24px, 3vw, 32px);
      margin-bottom: 20px;
      color: #333;
    }

    .achievements .text-center.mb-4 {
      font-size: clamp(14px, 2vw, 16px);
      color: #666;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }

    .col-md-4 {
      flex: 0 0 33.33%;
      max-width: 33.33%;
      padding: 0 15px;
      box-sizing: border-box;
    }

    .achievement-image {
      width: 100px;
      height: auto;
      display: block;
      margin: 0 auto 15px;
    }

    h5 {
      font-size: clamp(18px, 2.5vw, 20px);
      margin-bottom: 10px;
      color: #222;
    }

    p {
      font-size: clamp(14px, 2vw, 16px);
      color: #666;
      line-height: 1.6;
    }

    @media (max-width: 768px) {
      .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
      }
    }

    @media (max-width: 576px) {
      .col-md-4 {
        flex: 0 0 100%;
        max-width: 100%;
      }
    }

    /* CSR/Impact */
    .csr-impact img {
      max-width: 100%;
      height: auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    .csr-impact p {
      font-size: clamp(0.9rem, 2vw, 1rem);
    }

    /* New Career Section */

    /* Career Section */
    .career-section {
      background: var(--background-color);
      padding: clamp(20px, 5vw, 40px) 0;
    }
    

    .career-section h2 {
      font-family: var(--font-heading);
      font-size: clamp(24px, 5vw, 36px);
      font-weight: 700;
      color: var(--text-secondary);
      text-transform: uppercase;
      margin-bottom: clamp(10px, 2vw, 20px);
    }

    .career-section p {
      font-family: var(--font-body);
      font-size: clamp(14px, 3.5vw, 16px);
      color: var(--text-secondary);
      margin-bottom: clamp(20px, 4vw, 30px);
    }

    .career-section .form-group label {
      font-family: var(--font-body);
      font-size: clamp(14px, 3.5vw, 16px);
      font-weight: 500;
      color: var(--text-color);
      margin-bottom: 8px;
    }

.career-section .form-control {
  border: 0.8px solid #ccc; /* light thin border */
  border-radius: var(--border-radius);
  padding: clamp(8px, 2vw, 10px);
  font-size: clamp(14px, 3.5vw, 16px);
  font-family: var(--font-body);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  box-shadow: none;
  background-color: #fff;
}

/* Hover effect (yellow highlight) */
.career-section .form-control:hover {
  border-color: var(--button-color); /* yellow border */
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.25); /* soft yellow glow */
}

/* Focus effect (stronger yellow) */
.career-section .form-control:focus {
  border-color: var(--button-color);
  box-shadow: 0 0 8px rgba(255, 193, 7, 0.35); /* brighter yellow glow */
  outline: none;
}


    .career-section .form-control:focus {
      border-color: var(--button-color);
      box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
      outline: none;
    }

    .career-section .form-control::placeholder {
      color: var(--text-muted);
      opacity: 0.7;
    }

    .career-section .btn-ripple {
      position: relative;
      overflow: hidden;
      font-family: var(--font-heading);
      font-size: clamp(14px, 3.5vw, 16px);
      font-weight: 500;
      padding: clamp(10px, 2.5vw, 12px) clamp(20px, 4vw, 24px);
      border-radius: var(--border-radius);
      background: var(--button-color);
      color: var(--text-dark);
      transition: var(--transition);
    }

    .career-section .btn-ripple:hover {
      background: var(--button-hover);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(255, 193, 7, 0.3);
    }

    .career-section .btn-ripple::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1) translate(-50%, -50%);
      transform-origin: 50% 50%;
    }

    .career-section .btn-ripple:active::after {
      opacity: 1;
      transform: scale(0) translate(-50%, -50%);
      transition: transform 0.3s ease, opacity 0.3s ease;
    }

    .career-section .invalid-feedback {
      font-size: clamp(12px, 3vw, 14px);
      color: var(--danger-color);
      margin-top: 5px;
    }

    .career-section .form-control.is-invalid {
      border-color: var(--danger-color);
      box-shadow: 0 0 8px rgba(220, 53, 69, 0.3);
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .career-section {
        padding: clamp(15px, 4vw, 30px) 0;
      }

      .career-section h2 {
        font-size: clamp(20px, 4.5vw, 28px);
      }

      .career-section .form-control,
      .career-section .btn-ripple {
        font-size: clamp(12px, 3vw, 14px);
      }
    }

    @media (max-width: 360px) {
      .career-section {
        padding: clamp(10px, 3vw, 20px) 0;
      }

      .career-section h2 {
        font-size: clamp(18px, 4vw, 24px);
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .career-section .form-control,
      .career-section .btn-ripple {
        transition: none;
      }

      .career-section .btn-ripple::after {
        transition: none;
      }
    }

    /* Banner Specific to Career Page */
    .career-banner {
      background: linear-gradient(rgba(36, 37, 38, 0.7), rgba(254, 254, 255, 0.7)), url('new\ background\ banner\ img\ 2.jpg') center/cover no-repeat;
      height: clamp(300px, 40vw, 400px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--text-white);
      text-align: center;
    }

    .career-banner .banner-content h1 {
      font-family: var(--font-heading);
      font-size: clamp(28px, 6vw, 48px);
      font-weight: 700;
      color: #fff; /* Changed from black to white */
      text-transform: uppercase;
      margin-bottom: clamp(10px, 2vw, 20px);
    }

    .career-banner .banner-content p {
      font-family: var(--font-body);
      font-size: clamp(16px, 3.5vw, 18px);
      max-width: 600px;
      margin: 0 auto;
    }
  /* new product code for Features of the Product and Intended Use */

  .tab-info-card {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
    padding: 1rem;
    align-items: flex-start;
  }

  .tab-info-image {
    flex: 0 0 auto;
    width: 250px;
  }

  .tab-info-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    object-fit: cover;
  }

  .tab-info-details {
    flex: 1;
    min-width: 0;
  }

  .tab-info-details h4 {
    font-size: 1.4rem;
    color: #2c3e50;
    font-weight: 600;
    margin-bottom: 0.8rem;
    border-bottom: 2px solid #3498db;
    padding-bottom: 0.3rem;
    display: inline-block;
  }

  .tab-info-details ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
  }

  .tab-info-details li {
    margin-bottom: 0.5rem;
  }

  .tab-info-details p {
    color: #34495e;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
  }

  @media (max-width: 768px) {
    .tab-info-card {
      flex-direction: column;
      padding: 0.5rem;
    }

    .tab-info-image {
      width: 100%;
      max-width: 300px;
      margin: 0 auto 1rem auto;
    }

    .tab-info-details {
      min-width: 100%;
    }

    .tab-info-details h4 {
      font-size: 1.2rem;
    }

    .tab-info-details ul, .tab-info-details p {
      font-size: 0.95rem;
    }
  }

  /* video minimize products section of warpping content */ 
  .wrapping-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1.5rem;
    max-width: 1000px;
    margin: 0 auto;
  }

  .video-wrapper {
    grid-column: 1;
    width: 100%;
    max-width: 300px;
  }

  .video-wrapper .ratio-4x3 {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  .image-grid {
    grid-column: 2;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .image-grid .grid-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    transition: transform 0.3s ease;
  }

  .image-grid .grid-image:hover {
    transform: scale(1.05);
  }

  @media (max-width: 768px) {
    .wrapping-grid {
      grid-template-columns: 1fr;
      gap: 1rem;
    }

    .video-wrapper {
      grid-column: 1;
      max-width: 100%;
    }

    .image-grid {
      grid-column: 1;
      grid-template-columns: 1fr;
    }

    .image-grid .grid-image {
      max-width: 100%;
    }
  }

  /* These is code for products page price changing hover when i move curser on rate */
  /* Updated Price Section Styling (3:2 Grid, Amazon/Flipkart-inspired) */
  .price-section {
    margin-top: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: clamp(16px, 2vw, 20px);
    font-family: 'Roboto', sans-serif;
  }

  .price-section h4 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: clamp(16px, 4vw, 18px);
    color: var(--text-color);
    margin: 0;
    padding-top: clamp(8px, 2vw, 10px); /* Align with price options */
    white-space: nowrap;
  }

  .price-section h4::after {
    content: ":"; /* Add colon to "Price" */
  }

  .price-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns for first row */
    gap: clamp(12px, 2vw, 16px);
    max-width: 500px; /* Constrain width for better alignment */
  }

  /* For items beyond 3, place in a 2-column row */
  .price-container:has(.price-option:nth-child(n+4)) {
    grid-template-areas:
      "item1 item2 item3"
      "item4 item5 ."; /* 2 items in second row, empty cell for alignment */
  }

  .price-container .price-option:nth-child(1) { grid-area: item1; }
  .price-container .price-option:nth-child(2) { grid-area: item2; }
  .price-container .price-option:nth-child(3) { grid-area: item3; }
  .price-container .price-option:nth-child(4) { grid-area: item4; }
  .price-container .price-option:nth-child(5) { grid-area: item5; }

  .price-option {
    background-color: #ffffff;
    border: 1px solid #d1d5db; /* Light gray border */
    border-radius: 8px;
    padding: clamp(10px, 2vw, 12px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
  }

  .price-option:hover {
    background-color: #e6f0fa; /* Soft blue hover background for pleasant look */
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
  }

  .price-option:hover .price {
    color: #2b6cb0; /* Vibrant blue for price on hover */
  }

  .price-option .variant {
    color: #374151; /* Dark gray for variant text */
    font-weight: 500;
    font-size: clamp(13px, 3vw, 14px);
    margin-bottom: 4px;
  }

  .price-option .price {
    color: #000000; /* Very dark black for price */
    font-weight: 800; /* Bolder for emphasis */
    font-size: clamp(15px, 3.5vw, 16px);
    transition: color 0.2s ease; /* Smooth color transition on hover */
  }

  @media (max-width: 768px) {
    .price-section {
      flex-direction: column; /* Stack heading and container vertically */
      align-items: stretch;
    }

    .price-section h4 {
      padding-top: 0;
      margin-bottom: clamp(8px, 2vw, 10px);
    }

    .price-container {
      grid-template-columns: 1fr; /* Stack vertically on mobile */
      grid-template-areas: none; /* Reset grid areas */
      max-width: 100%;
    }

    .price-option {
      width: 100%;
      max-width: 300px;
      font-size: clamp(12px, 3vw, 13px);
      padding: clamp(8px, 2vw, 10px);
    }
  }

  @media (max-width: 576px) {
    .price-container {
      gap: 10px;
    }

    .price-option {
      max-width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .price-option {
      transition: none;
    }

    .price-option:hover .price {
      transition: none;
    }

    .product-details-section .product-image-container,
    .product-details-section .product-image-container:hover,
    .product-detail-img {
      transition: none;
      transform: none;
    }
  }

  /* Popup notifications */
/* ADVANCED POPUP: 2025 Neumorphic + Morphing + Ripple + Smart States */
.advanced-popup {
  position: fixed;
  bottom: clamp(15px, 4vw, 25px);
  right: clamp(15px, 4vw, 25px);
  z-index: 1050;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px) scale(0.9);
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); /* Bounce ease */
  font-family: 'Open Sans', sans-serif;
}

.advanced-popup.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  animation: popupEnter 0.7s ease-out;
}

@keyframes popupEnter {
  0% { transform: translateY(30px) scale(0.85); opacity: 0; }
  60% { transform: translateY(-8px) scale(1.03); }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}

.popup-morph {
  position: relative;
  width: clamp(300px, 35vw, 380px);
  background: linear-gradient(145deg, #f8f9fa, #e9ecef);
  border-radius: 20px;
  box-shadow: 
    12px 12px 24px rgba(0,0,0,0.1),
    -8px -8px 20px rgba(255,255,255,0.8),
    inset 2px 2px 5px rgba(255,255,255,0.6);
  overflow: hidden;
  transition: all 1.2s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.advanced-popup.shrunk .popup-morph {
  width: clamp(160px, 20vw, 180px);
  height: 80px;
  border-radius: 16px;
  box-shadow: 
    6px 6px 12px rgba(0,0,0,0.08),
    -6px -6px 12px rgba(255,255,255,0.6);
}

.advanced-popup.minimized .popup-morph {
  width: clamp(60px, 12vw, 70px);
  height: clamp(60px, 12vw, 70px);
  border-radius: 50%;
  background: transparent;
  box-shadow: 
    4px 4px 10px rgba(0,0,0,0.15),
    -4px -4px 10px rgba(255,255,255,0.7);
  transform: scale(1.1);
  transition: all 1.8s ease;
}

.popup-content { 
  padding: clamp(1rem, 2.5vw, 1.5rem);
  opacity: 1;
  transition: opacity 0.5s ease;
}

.advanced-popup.minimized .popup-content { opacity: 0; pointer-events: none; }

.popup-logo {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: no-repeat center/cover;
  opacity: 0;
  transform: scale(0.8);
  transition: all 1.8s ease;
  border-radius: 50%;
}

.advanced-popup.minimized .popup-logo {
  opacity: 1;
  transform: scale(1);
}

.popup-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 0.5rem;
}

.popup-title {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  color: #1a202c;
  margin: 0;
}

.popup-close, .popup-minimize {
  background: none; border: none; font-size: 1.4rem; cursor: pointer;
  color: #999; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.popup-close:hover, .popup-minimize:hover {
  background: rgba(255,193,7,0.2);
  color: #FFC107;
  transform: scale(1.1);
}

.popup-body {
  font-size: clamp(0.9rem, 2vw, 1rem);
  color: #2d3748;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.popup-footer {
  display: flex; justify-content: space-between; align-items: center;
}

.popup-btn {
  background: linear-gradient(135deg, #FFC107, #FFB300);
  color: #1a202c; border: none; border-radius: 12px;
  padding: 0.5rem 1rem; font-weight: 600;
  font-size: clamp(0.85rem, 1.8vw, 0.95rem);
  cursor: pointer; position: relative; overflow: hidden;
  box-shadow: 0 4px 8px rgba(255,193,7,0.3);
  transition: all 0.3s ease;
}

.popup-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 8px 16px rgba(255,193,7,0.4);
}

.popup-btn:active { transform: scale(0.98); }

/* Ripple Effect */
.popup-btn::before {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 0; height: 0; background: rgba(255,255,255,0.4);
  border-radius: 50%; transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.popup-btn:active::before {
  width: 300px; height: 300px;
}

/* Backdrop */
.popup-backdrop {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(26,32,44,0.5); backdrop-filter: blur(4px);
  z-index: 1040; opacity: 0; visibility: hidden;
  transition: all 0.6s ease;
}

.popup-backdrop.show { opacity: 1; visibility: visible; }

/* Focus & Accessibility */
.popup-close:focus, .popup-btn:focus, .popup-minimize:focus {
  outline: 3px solid #68D391; outline-offset: 2px;
}

/* Mobile */
@media (max-width: 576px) {
  .advanced-popup { bottom: 10px; right: 10px; }
  .popup-morph { width: 90vw; max-width: 340px; }
  .advanced-popup.shrunk .popup-morph { width: 140px; height: 70px; }
}


/*new code in wrapping instruction added size chart image in products*/
.wrapping-grid {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  margin-bottom: 20px;
}

.video-wrapper {
  flex: 0 0 auto;
  width: 300px;
}

.image-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  flex: 1;
}

.grid-image {
  max-width: 100%;
  height: auto;
  border: 1px solid #ddd;
  border-radius: 5px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .wrapping-grid {
    flex-direction: column;
    align-items: center;
  }

  .image-grid {
    grid-template-columns: 1fr;
  }

  .video-wrapper {
    width: 100%;
  }

  .grid-image {
    max-width: 100%;
    height: auto;
  }
}

/* Code of our products buttons of the products style on October 27th */



/* ============================================= */
/* PRODUCTS SECTION – FULLY ENHANCED (2025)     */
/* ============================================= */

/* Products Section Heading */
.products-section h2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  color: #1A202C;
  text-align: center;
  margin-bottom: 1.25rem;
  position: relative;
  padding-bottom: 0.5rem;
}

.products-section h2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #FFC107, #FF8C00);
  border-radius: 2px;
}

/* Products Section Description */
.products-section p.text-center {
  font-family: 'Open Sans', sans-serif;
  font-size: clamp(0.875rem, 2.5vw, 1.125rem);
  color: #4A5568;
  max-width: 90%;
  margin: 0 auto 1.5rem;
}

/* Navigation Tabs (Neumorphic Buttons) */
.nav-tabs {
  border-bottom: none;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.5rem 0;
}

.nav-tabs .nav-item { margin: 0; }

.nav-tabs .nav-link {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  font-size: clamp(0.85rem, 2vw, 1rem);
  color: #1A202C;
  background: #f0f4f8;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.2rem;
  transition: all 0.3s ease;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.1), -4px -4px 8px rgba(255, 255, 255, 0.7);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.nav-tabs .nav-link:hover {
  background: #e2e8f0;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.15), -2px -2px 6px rgba(255, 255, 255, 0.8);
  transform: translateY(-2px);
  color: #FFC107;
}

.nav-tabs .nav-link.active {
  background: linear-gradient(145deg, #FFC107, #FF8C00);
  color: #ffffff;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2), inset -2px -2px 4px rgba(255, 255, 255, 0.3);
  transform: translateY(0);
}

.nav-tabs .nav-link:focus-visible {
  outline: 2px solid #FFC107;
  outline-offset: 2px;
}

/* ========================================= */
/* MOBILE: BIGGER, BOLDER, PREMIUM IMAGES    */
/* ========================================= */
@media (max-width: 767.98px) {
  /* 1 column layout on mobile – maximum visual impact */
  .products-section .product-grid .col-sm-6,
  .products-section .product-grid .col-md-4 {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Premium image container */
  .products-section .card-img-container {
    padding: 24px 32px 12px;
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-radius: 20px 20px 0 0;
    margin: -1px -1px 0 -1px;
    text-align: center;
  }

  /* Large, beautiful product images */
  .products-section .card-img-top {
    width: 100% !important;
    height: auto !important;
    max-height: 340px !important;
    object-fit: contain !important;
    border-radius: 16px;
    background: transparent;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
  }

  /* Tap/Hover Zoom – feels luxury */
  .products-section .card-img-top:hover,
  .products-section .card-img-top:active {
    transform: scale(1.05);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.2);
  }

  /* Elevated cards */
  .products-section .card {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
    border: none;
  }

  .products-section .card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18);
  }

  /* Spacious card body */
  .products-section .card-body {
    padding: 1.75rem 1.4rem;
  }

  .products-section .card-title {
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
  }

  .products-section .btn-warning {
    padding: 0.8rem 1.8rem;
    font-weight: 600;
    border-radius: 14px;
    font-size: 1.05rem;
  }

  /* Extra small phones */
  @media (max-width: 400px) {
    .products-section .card-img-top { max-height: 300px !important; }
    .products-section .card-img-container { padding: 18px 24px 10px; }
    .products-section .card-body { padding: 1.5rem 1.2rem; }
  }
}

/* Tablet Adjustments (576px – 768px) */
@media (min-width: 576px) and (max-width: 768px) {
  .nav-tabs { gap: 0.6rem; padding: 0.4rem; }
  .nav-tabs .nav-link {
    font-size: clamp(0.8rem, 2vw, 0.95rem);
    padding: 0.55rem 1rem;
    border-radius: 9px;
  }
  .products-section h2 { font-size: clamp(1.6rem, 4.5vw, 2rem); }
  .products-section h2::after { width: 50px; height: 3.5px; }
  .products-section p.text-center { max-width: 80%; }
}

/* Mobile Tabs (<576px) */
@media (max-width: 576px) {
  .nav-tabs {
    gap: 0.75rem;
    padding: 0.5rem;
  }
  .nav-tabs .nav-link {
    font-size: clamp(0.75rem, 3vw, 0.85rem);
    padding: 0.45rem 0.75rem;
    border-radius: 8px;
  }
  .products-section h2 {
    font-size: clamp(1.5rem, 4vw, 1.75rem);
    margin-bottom: 1rem;
  }
  .products-section h2::after { width: 40px; height: 3px; }
  .products-section p.text-center {
    font-size: clamp(0.8rem, 2.5vw, 0.95rem);
    max-width: 95%;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  .nav-tabs .nav-link,
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link.active,
  .products-section .card,
  .products-section .card-img-top {
    transition: none !important;
    transform: none !important;
  }
}


/* New Code for Products Page Code on 27th october */
New Price Section Styles
    .price-section {
      margin-top: 1.5rem;
    }
    .price-section h4 {
      font-family: 'Roboto', sans-serif;
      font-weight: 700;
      font-size: clamp(1.125rem, 3vw, 1.25rem);
      color: var(--text-color);
      margin-bottom: 1rem;
    }
    .price-container {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .price-option {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem 1rem;
      background: #f0f4f8;
      border-radius: 8px;
      box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1), -3px -3px 6px rgba(255, 255, 255, 0.7);
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .price-option:hover {
      background: #e2e8f0;
      box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15), -2px -2px 4px rgba(255, 255, 255, 0.8);
      transform: translateY(-2px);
      color: var(--button-color);
    }
    .price-option .variant {
      font-family: 'Open Sans', sans-serif;
      font-size: clamp(0.85rem, 2vw, 0.95rem);
      color: var(--text-color);
    }
    .price-option .price {
      font-family: 'Roboto', sans-serif;
      font-weight: 600;
      font-size: clamp(0.9rem, 2.2vw, 1rem);
      color: var(--text-color);
    }
    .price-option:hover .price {
      color: var(--button-color);
    }
    /* Mobile Adjustments */
    @media (max-width: 576px) {
      .price-option {
        padding: 0.5rem 0.75rem;
        border-radius: 6px;
      }
      .price-option .variant,
      .price-option .price {
        font-size: clamp(0.75rem, 2.5vw, 0.85rem);
      }
    }
    /* Accessibility */
    @media (prefers-reduced-motion: reduce) {
      .price-option,
      .price-option:hover {
        transition: none;
        transform: none;
      }
    }

    /* New popup message like Toast news Date 29th october */
    


/* News Toast - Bottom-Left Corner, Small, Slides Up, Vanishes 5s */
.news-toast {
  position: fixed;
  bottom: clamp(15px, 3vw, 20px);
  left: clamp(15px, 3vw, 20px);
  z-index: 9998; /* Below navbar 1000 */
  max-width: clamp(280px, 30vw, 320px); /* Smaller size */
  background: linear-gradient(135deg, #FFC107 0%, #FFCA28 100%); /* Subtle yellow gradient */
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0,0,0,0.15); /* Softer glow */
  opacity: 0;
  transform: translateY(50%) scale(0.9); /* Slide-up + slight shrink */
  visibility: hidden;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55); /* Bouncy ease */
  border: 1px solid rgba(255,255,255,0.4);
}

.news-toast.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  animation: newsPulse 2.5s infinite; /* Subtle pulse */
}

.news-toast.hide {
  opacity: 0;
  transform: translateY(50%) scale(0.9);
  visibility: hidden;
}

/* Content Layout */
.news-toast-content {
  display: flex;
  align-items: center;
  padding: clamp(8px, 2vw, 10px) clamp(12px, 3vw, 16px);
  gap: 8px;
  font-family: 'Open Sans', sans-serif;
}

.news-message {
  flex: 1;
  font-size: clamp(12px, 2.8vw, 14px); /* Smaller text */
  font-weight: 600;
  color: #000;
  line-height: 1.3;
}

/* Contact Button - Compact Ripple */
.news-btn {
  background: #fff;
  border: none;
  padding: clamp(6px, 1.5vw, 8px) clamp(12px, 2.5vw, 16px);
  border-radius: 20px;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: clamp(11px, 2.5vw, 13px);
  color: #000;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 3px 8px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
}

.news-btn:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.news-btn:active {
  transform: scale(0.95);
}

/* Ripple Effect */
.news-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255,255,255,0.5);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width 0.4s, height 0.4s;
}

.news-btn:active::before {
  width: 200px;
  height: 200px;
}

/* Close Button - Tiny */
.news-close {
  background: rgba(255,255,255,0.8);
  border: none;
  width: clamp(24px, 5vw, 28px);
  height: clamp(24px, 5vw, 28px);
  border-radius: 50%;
  font-size: clamp(12px, 2.5vw, 14px);
  color: #555;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.news-close:hover {
  background: #fff;
  color: #000;
  transform: rotate(90deg); /* Subtle spin */
}

/* Pulse Animation */
@keyframes newsPulse {
  0%, 100% { box-shadow: 0 8px 24px rgba(255, 193, 7, 0.3), 0 3px 12px rgba(0,0,0,0.15); }
  50% { box-shadow: 0 10px 28px rgba(255, 193, 7, 0.5), 0 4px 14px rgba(0,0,0,0.2); }
}

/* Mobile: Near full-width bottom */
@media (max-width: 768px) {
  .news-toast {
    bottom: 10px !important;
    left: 10px !important;
    right: 10px !important;
    max-width: none;
    border-radius: 10px;
    transform: translateY(50%) scale(0.9);
  }
  .news-toast.show {
    transform: translateY(0) scale(1);
  }
  .news-toast.hide {
    transform: translateY(50%) scale(0.9);
  }
  .news-toast-content {
    gap: 6px;
  }
  .news-message {
    font-size: clamp(11px, 3vw, 13px);
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .news-toast, .news-btn, .news-close {
    transition: none;
    animation: none;
  }
  .news-btn::before {
    transition: none;
  }
}

/* Total New CSS Code For the Products Page */
/* ==========================================================================
   E-COMMERCE PRODUCT PAGE – WORLD CLASS (Amazon/Flipkart Inspired)
   Scoped to .product-details-page
   ========================================================================== */


 /* New Patent Badge code updated newly */
 /* PATENTED BADGE – RESPONSIVE & BEAUTIFUL ON ALL SCREENS */
.product-details-section[data-product-name="Hi Grip VC"] .product-title {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
  width: 100%;
  margin-bottom: 0.5rem;
}

.product-details-section[data-product-name="Hi Grip VC"] .patented-badge {
  flex-shrink: 0;
  height: clamp(38px, 6vw, 58px);
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
  transition: transform 0.3s ease;
}

.product-details-section[data-product-name="Hi Grip VC"]:hover .patented-badge {
  transform: translateY(-4px);
}

/* Mobile Fine-tuning */
@media (max-width: 480px) {
  .product-details-section[data-product-name="Hi Grip VC"] .patented-badge {
    height: clamp(34px, 7.5vw, 46px);
  }
  .product-details-section[data-product-name="Hi Grip VC"] .product-title {
    gap: 0.5rem;
  }
}

/* Large Screens – Extra Polish */
@media (min-width: 1400px) {
  .product-details-section[data-product-name="Hi Grip VC"] .patented-badge {
    height: clamp(52px, 5vw, 64px);
  }
}


.product-details-page {
  font-family: 'Roboto', sans-serif;
  line-height: 1.6;
  color: #212529;
  padding: 2%;
}

/* Breadcrumbs */
.product-details-page .breadcrumb {
  background: transparent;
  padding: 0.5rem 0;
  font-size: 0.95rem;
}
.product-details-page .breadcrumb-item a {
  color: var(--button-color);
  text-decoration: none;
  font-weight: 500;
}
.product-details-page .breadcrumb-item a:hover {
  text-decoration: underline;
}
.product-details-page .breadcrumb-item.active {
  color: #6c757d;
  font-weight: 600;
}

/* Product Hero Image */
.product-details-page .product-detail-img {
  border-radius: 16px;
  object-fit: contain;
  background: #f8f9fa;
  padding: 1rem;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  min-height: clamp(260px, 35vw, 400px);
  transition: transform 0.4s ease;
}
.product-details-page .product-detail-img:hover {
  transform: scale(1.02);
}

/* Product Title & Rating */
.product-details-page .product-title {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: #1a1a1a;
}
.product-details-page .product-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
}
.product-details-page .stars {
  color: #FFC107;
  font-weight: bold;
}
.product-details-page .review-count {
  color: #666;
  font-size: 0.9rem;
}

/* Price & Variants */
.product-details-page .price-section {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.06);
  border: 1px solid #eee;
}
.product-details-page .price-section h4,
.product-details-page .price-section h5 {
  margin: 0 0 1rem;
  font-weight: 600;
  color: #222;
}
.product-details-page .price-container {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.product-details-page .price-container li {
  flex: 1 1 auto;
  min-width: 120px;
}
.product-details-page .variant,
.product-details-page .price {
  font-weight: 600;
  color: #000;
}
.product-details-page .old-price {
  text-decoration: line-through;
  color: #999;
  font-size: 0.9em;
  margin-right: 0.5rem;
}
.product-details-page .discount-badge {
  background: #d4edda;
  color: #155724;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: bold;
}

/* AMAZON-STYLE HORIZONTAL SIZE SELECTOR - OUTCARE EDITION */
.size-selector-section .size-label {
  font-weight: 600;
  color: #212529;
  font-size: 1.1rem;
  margin-bottom: 0.5rem !important;
}

.size-chips-horizontal {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: -6px 0;
  padding: 8px 0;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge */
}

.size-chips-horizontal::-webkit-scrollbar {
  display: none;
}

.size-chip-hz {
  min-width: 72px;
  padding: 12px 20px;
  border: 2px solid #d5d9d9;
  border-radius: 50px;
  background: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  color: #0f1111;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  white-space: nowrap;
  flex: 0 0 auto;
}

/* Hover effect - applies equally to ALL chips (active or not), changes background to yellow */
.size-chip-hz:hover {
  background: #FFC107 !important;
  color: #000 !important;
  border-color: #FFC107 !important;
  box-shadow: 0 0 0 6px rgba(255, 193, 7, 0.2);
  transform: translateY(-2px);
}

/* Active (selected) state - NO background color, but use border, shadow, and font to indicate selection */
.size-chip-hz.active {
  border-color: #FFC107 !important;
  box-shadow: 0 4px 12px rgba(255, 193, 7, 0.4);
  font-weight: 700;
  transform: translateY(-1px);
  /* Note: Intentionally no background/color change here so hover applies equally to all */
}

.size-chip-hz small {
  display: block;
  font-weight: 400;
  font-size: 0.75rem;
  margin-top: 4px;
  opacity: 0.8;
}

/* Mobile Optimization */
@media (max-width: 576px) {
  .size-chip-hz {
    padding: 10px 16px;
    font-size: 0.9rem;
    min-width: 64px;
  }
}
/* only Size chart end code */

/* Action Buttons */
.product-details-page .btn-ecommerce {
  position: relative;
  overflow: hidden;
  min-height: 56px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0.5px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
.product-details-page .btn-ecommerce:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.18);
}
.product-details-page .btn-ecommerce:active {
  transform: scale(0.97);
}
.product-details-page .btn-ecommerce::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.4);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}
.product-details-page .btn-ecommerce:active::after {
  width: 300px; height: 300px;
}

/* Contact CTA */
.product-details-page .contact-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  font-weight: 600;
  padding: 1rem 1.5rem;
  border-radius: 16px;
  text-decoration: none;
  margin: 1.5rem 0;
  box-shadow: 0 6px 18px rgba(40,167,69,0.3);
  transition: all 0.3s ease;
}
.product-details-page .contact-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(40,167,69,0.4);
  color: white;
}
.product-details-page .contact-cta i {
  font-size: 1.3rem;
}

/* Tabs */
.product-details-page .nav-tabs {
  border-bottom: 2px solid #eee;
  margin-bottom: 1.5rem;
}
.product-details-page .nav-tabs .nav-link {
  border: none;
  color: #666;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 12px 12px 0 0;
  transition: all 0.3s ease;
}
.product-details-page .nav-tabs .nav-link.active {
  background: var(--button-color);
  color: #000;
  font-weight: 700;
}
.product-details-page .tab-content {
  background: #fff;
  padding: 2rem;
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* Video + Image Grid */
.product-details-page .wrapping-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
@media (min-width: 768px) {
  .product-details-page .wrapping-grid {
    grid-template-columns: 1fr 1fr;
  }
}
.product-details-page .wrapping-video,
.product-details-page .donning-img {
  width: 100%;
  min-height: clamp(300px, 50vw, 500px);
  border-radius: 16px;
  object-fit: cover;
  box-shadow: 0 8px 25px rgba(0,0,0,0.12);
  transition: transform 0.4s ease;
}
.product-details-page .wrapping-video:hover,
.product-details-page .donning-img:hover {
  transform: translateY(-8px);
}
.product-details-page .wrapping-video::before {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  content: '\f04b';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2.5rem, 7vw, 4rem);
  color: white;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.product-details-page .wrapping-video:hover::before {
  opacity: 1;
}

/* Sticky Buy Bar (Mobile) */
.product-details-page .sticky-buy-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 1rem;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.1);
  display: flex;
  gap: 1rem;
  z-index: 1000;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.product-details-page .sticky-buy-bar.show {
  transform: translateY(0);
}
@media (min-width: 992px) {
  .product-details-page .sticky-buy-bar { display: none; }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .product-details-page * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .product-details-page .wrapping-video::before { display: none; }
}
/* Same Products page code but auto scroll carousel code Date 4th Nov */
 /* === UNIVERSAL FIXED IMAGE SIZE: 380×380px FOR ALL 10 PRODUCTS === */
/* Works perfectly with Bootstrap, carousels, and responsive design */

.product-detail-img {
  width: 380px !important;
  height: 380px !important;
  object-fit: contain !important;
  object-position: center !important;
  display: block !important;
  margin: 0 auto !important;
  background: transparent !important;
  transition: transform 0.4s ease !important;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* Hover zoom – premium feel */
.product-detail-img:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

/* CAROUSEL IMAGE WRAPPER – Forces exact size, centers image */
[class*="Carousel"] .carousel-item {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 20px 0 !important;
  background: #f8f9fa;
}

/* CAROUSEL CONTAINER – Clean, centered, no overflow */
[class*="Carousel"] .carousel-inner {
  border-radius: 16px;
  overflow: hidden;
  background: #f8f9fa;
  box-shadow: 0 8px 25px rgba(0,0,0,0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 460px;
  margin: 0 auto;
  padding: 15px;
  min-height: 440px;
}

/* UNDERLINE INDICATORS – Clean & centered */
[class*="Carousel"] .carousel-indicators {
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
  padding: 0 10px !important;
  display: flex;
  justify-content: center;
}

[class*="Carousel"] .carousel-indicators button {
  width: 32px !important;
  height: 3px !important;
  background: rgba(255,255,255,0.6) !important;
  border-radius: 0 !important;
  opacity: 0.7;
  margin: 0 4px !important;
  border: none !important;
  transition: all 0.3s ease;
}

[class*="Carousel"] .carousel-indicators button.active {
  background: #007bff !important;
  opacity: 1;
  width: 44px !important;
}

/* RESPONSIVE – Smaller on mobile, same ratio */
@media (max-width: 768px) {
  .product-detail-img {
    width: 300px !important;
    height: 300px !important;
  }
  [class*="Carousel"] .carousel-inner {
    max-width: 360px;
    min-height: 360px;
    padding: 10px;
  }
  [class*="Carousel"] .carousel-indicators button {
    width: 24px !important;
  }
  [class*="Carousel"] .carousel-indicators button.active {
    width: 32px !important;
  }
}

/* Large screens – slight upscale */
@media (min-width: 1200px) {
  .product-detail-img {
    width: 400px !important;
    height: 400px !important;
  }
  [class*="Carousel"] .carousel-inner {
    max-width: 480px;
    min-height: 460px;
  }
}