/* Enhanced FOUC prevention with smooth content reveal */
      html {
        overflow-x: hidden;
      }
      
      body {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
                    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
      }
      
      body.loaded {
        opacity: 1;
        transform: translateY(0);
      }

      /* FIXED HERO STYLES WITH RESPONSIVE TEXT SIZING */
      #hero {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: stretch;
        overflow: hidden;
        position: relative;
        margin: 0;
        padding: 0;
      }

      .hero-container {
        width: 100%;
        height: 100%;
        display: flex;
        position: relative;
        z-index: 2;
      }

      .hero-row {
        display: flex;
        width: 100%;
        height: 100%;
      }

      /* Left content section with proper sizing */
      .hero-left {
        flex: 0 0 30%;
        padding: 60px;
        padding-top: 120px; /* Increased to avoid header overlap */
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: linear-gradient(135deg, rgba(220, 112, 28, 0.95), rgba(202, 95, 12, 0.9)), 
                    linear-gradient(45deg, #1c1c1c, #2f2f2f);
        color: white;
        position: relative;
        overflow: hidden;
        animation: fadeInLeft 1s ease-out;
      }

      .hero-left::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
          radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(220, 112, 28, 0.2) 0%, transparent 50%);
        pointer-events: none;
      }

      /* RESPONSIVE TEXT SIZING - Fixed the main issue */
      .hero-left h1 {
        margin: 0 0 25px 0;
        font-size: clamp(24px, 3.5vw, 48px) !important; /* More conservative scaling */
        font-weight: 900;
        line-height: 1.1;
        color: #fff !important;
        font-family: "Raleway", sans-serif;
        letter-spacing: -0.5px;
        position: relative;
        z-index: 1;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
      }

      .hero-left h1::after {
        content: '';
        position: absolute;
        bottom: -8px;
        left: 0;
        width: 60px;
        height: 3px;
        background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0.8));
        border-radius: 2px;
      }

      .hero-left p {
        color: #fff !important;
        background: rgba(255, 255, 255, 0.1);
        padding: 20px;
        border-radius: 12px;
        backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        margin-bottom: 30px;
        font-size: clamp(14px, 1.5vw, 18px) !important; /* Better responsive scaling */
        line-height: 1.5;
        font-weight: 400;
        position: relative;
        z-index: 1;
      }

      .hero-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 30px;
        position: relative;
        z-index: 1;
      }

      .hero-buttons .btn {
        font-family: "Raleway", sans-serif;
        font-weight: 700;
        font-size: clamp(13px, 1.2vw, 16px) !important; /* Responsive button text */
        letter-spacing: 1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 12px 28px;
        border-radius: 50px;
        transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-decoration: none;
        text-transform: uppercase;
        position: relative;
        overflow: hidden;
        border: none;
        cursor: pointer;
        width: 100%;
        max-width: 260px;
      }

      .hero-right {
        flex: 0 0 70%;
        height: 100%;
        position: relative;
        overflow: hidden;
      }

      .video-wrapper {
        position: relative;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        background: #000;
        animation: fadeInRight 1s ease-out 0.3s both;
      }

      #heroVideo {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: translate(-50%, -50%);
        min-width: 100%;
        min-height: 100%;
      }

      /* RESPONSIVE BREAKPOINTS */
      @media (max-width: 1399.98px) {
        .hero-left {
          padding: 50px 40px;
          padding-top: 100px;
        }
        
        .hero-left h1 {
          font-size: clamp(22px, 3.2vw, 42px) !important;
        }
        
        .hero-left p {
          font-size: clamp(13px, 1.4vw, 17px) !important;
          padding: 18px;
        }
      }

      @media (max-width: 1199.98px) {
        .hero-left {
          flex: 0 0 35%;
          padding: 45px 35px;
          padding-top: 90px;
        }
        
        .hero-right {
          flex: 0 0 65%;
        }
        
        .hero-left h1 {
          font-size: clamp(20px, 3vw, 36px) !important;
          margin-bottom: 20px;
        }
        
        .hero-left p {
          font-size: clamp(12px, 1.3vw, 16px) !important;
          padding: 16px;
          margin-bottom: 25px;
        }
        
        .hero-buttons .btn {
          padding: 10px 24px;
          font-size: clamp(12px, 1.1vw, 15px) !important;
        }
      }

      /* Mobile Styles - Video as Background */
      @media (max-width: 768px) {
        #hero {
          position: relative;
          overflow: hidden;
          flex-direction: column;
          height: auto;
          min-height: 100vh;
        }

        .hero-row {
          flex-direction: column;
          position: relative;
          z-index: 2;
        }

        .hero-left,
        .hero-right {
          flex: 1 1 100%;
        }

        .hero-left {
          padding: 50px 40px;
          padding-top: 60px;
          text-align: center;
          order: 2;
          position: relative;
          z-index: 3;
          background: rgba(0, 0, 0, 0.4); /* Semi-transparent overlay */
          backdrop-filter: blur(2px);
          border-radius: 15px;
          margin: 2rem 1rem;
          min-height: 80vh;
          display: flex;
          flex-direction: column;
          justify-content: center;
        }

        .hero-right {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          order: 1;
        }

        .video-wrapper {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

        #heroVideo {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover;
          opacity: 0.7; /* Make background video slightly transparent */
        }

        .hero-left h1 {
          font-size: clamp(24px, 5vw, 42px) !important;
          margin-bottom: 25px;
          color: white !important;
          text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
        }

        .hero-left h1::after {
          left: 50%;
          transform: translateX(-50%);
        }

        .hero-left p {
          font-size: clamp(15px, 2vw, 18px) !important;
          margin-bottom: 35px;
          color: rgba(255, 255, 255, 0.9) !important;
          text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
        }

        .hero-buttons {
          flex-direction: row;
          justify-content: center;
          gap: 15px;
          flex-wrap: wrap;
          margin-bottom: 35px;
        }

        .hero-buttons .btn {
          width: auto;
          min-width: 160px;
          flex: 0 0 auto;
          font-size: 14px !important;
          padding: 12px 25px;
          margin: 0.5rem;
          box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
          border: 2px solid rgba(255, 255, 255, 0.2);
        }

        .hero-buttons .btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }
      }

      @media (max-width: 480px) {
        .hero-left {
          padding: 30px 15px;
          padding-top: 40px;
        }
        
        .hero-left h1 {
          font-size: clamp(20px, 6vw, 28px) !important;
        }
        
        .hero-left p {
          font-size: clamp(13px, 3vw, 15px) !important;
          padding: 15px;
        }
        
        .hero-buttons .btn {
          padding: 10px 20px;
          font-size: 13px !important;
        }

        .hero-buttons {
          flex-direction: column;
          align-items: center;
          gap: 12px;
          margin-bottom: 30px;
        }

        .hero-buttons .btn {
          width: 100%;
          max-width: 280px;
        }
      }

      /* Animations */
      @keyframes fadeInLeft {
        from {
          opacity: 0;
          transform: translateX(-50px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      @keyframes fadeInRight {
        from {
          opacity: 0;
          transform: translateX(50px);
        }
        to {
          opacity: 1;
          transform: translateX(0);
        }
      }

      /* Smooth transitions for all interactive elements */
      .btn,
      .back-to-top,
      .member .pic,
      .icon-box,
      .play-btn {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        will-change: transform, box-shadow, filter;
      }

      /* Enhanced hover effects with smooth animation */
      .btn:hover,
      .back-to-top:hover,
      .member .pic:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
      }
      
      /* Smoother, more responsive button press animations */
      .btn:active,
      .back-to-top:active {
        transform: translateY(-1px) scale(0.96);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        filter: brightness(0.92);
        transition: all 0.15s cubic-bezier(0.4, 0, 0.6, 1);
      }
      
      /* Add subtle pulse effect on focus for accessibility */
      .btn:focus,
      .back-to-top:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(230, 122, 33, 0.3);
        animation: pulse 1.5s infinite;
      }
      
      @keyframes pulse {
        0% { box-shadow: 0 0 0 3px rgba(230, 122, 33, 0.3); }
        50% { box-shadow: 0 0 0 6px rgba(230, 122, 33, 0.1); }
        100% { box-shadow: 0 0 0 3px rgba(230, 122, 33, 0.3); }
      }
      
      @keyframes loading {
        0% { background-position: 200% 0; }
        100% { background-position: -200% 0; }
      }

      /* Button styling */
      .btn-get-started {
        background: linear-gradient(135deg, #ffbd60, #ffbd60);
        color: #8b4513;
        box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
        transform: translateY(0);
      }

      .btn-get-started:hover {
        background: linear-gradient(135deg, #fce250, #f9ca48);
        color: #654321;
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(255, 215, 0, 0.5);
      }

      .btn-our-products {
        background: linear-gradient(135deg, #eb9047, #eeaa72);
        color: #fff;
        border: 2px solid transparent;
        box-shadow: 0 6px 20px rgba(74, 144, 226, 0.3);
      }

      .btn-our-products:hover {
        background: linear-gradient(135deg, #ffd1ab, #f3c6a1);
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 10px 30px rgba(74, 144, 226, 0.4);
      }