/* ===== Base Styles ===== */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      :root {
        /* Color Variables */
        --primary: #BF0202;
        --primary-light: #1a73e8;
        --primary-dark: #020202;
        --secondary: #ff6b00;
        --accent: #00c853;
        --success: #28a745;
        --warning: #ffc107;
        --error: #dc3545;
        --white: #ffffff;
        --black: #000000;
        --gray-50: #f8f9fa;
        --gray-100: #f1f3f5;
        --gray-200: #e9ecef;
        --gray-300: #dee2e6;
        --gray-400: #ced4da;
        --gray-500: #adb5bd;
        --gray-600: #6c757d;
        --gray-700: #495057;
        --gray-800: #343a40;
        --gray-900: #212529;

        /* Gradient Variables */
        --gradient-primary: linear-gradient(
          135deg,
          var(--primary) 0%,
          var(--primary-light) 100%
        );
        --gradient-secondary: linear-gradient(
          135deg,
          var(--secondary) 0%,
          #ff9500 100%
        );
        --gradient-hero: linear-gradient(
          135deg,
          var(--primary-dark) 0%,
          var(--primary) 50%,
          var(--primary-light) 100%
        );

        /* Shadow Variables */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
        --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.2);
        --shadow-xl: 0 15px 30px rgba(0, 0, 0, 0.25);
        --shadow-2xl: 0 20px 40px rgba(0, 0, 0, 0.3);

        /* Border Radius Variables */
        --border-radius: 8px;
        --border-radius-lg: 12px;
        --border-radius-xl: 16px;
        --border-radius-2xl: 24px;
      }

      body {
        font-family: "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
        line-height: 1.6;
        color: var(--gray-800);
        background: var(--white);
        overflow-x: hidden;
      }

      /* Prevent horizontal scroll */
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      /* ===== Layout Components ===== */
      .container {
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 20px;
        width: 100%;
      }

      /* ===== Header & Navigation ===== */
      header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(10px);
        box-shadow: var(--shadow-sm);
        z-index: 1000;
        transition: all 0.3s ease;
      }

      .header-scrolled {
        box-shadow: var(--shadow-lg);
      }

      nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 0;
        min-height: 70px;
      }

      .logo {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
      }

      .logo img {
        height: 54px;
        width: auto;
        opacity: 1;
        transition: opacity 0.3s ease;
      }

      .logo img.loaded {
        opacity: 1;
      }

      .nav-links {
        display: flex;
        list-style: none;
        gap: 2rem;
        margin: 0;
      }

      .nav-links li a {
        color: var(--gray-700);
        font-weight: 600;
        text-decoration: none;
        font-size: 0.95rem;
        transition: all 0.3s ease;
        position: relative;
      }

      .nav-links li a:hover {
        color: var(--primary);
      }

      .nav-links li a::after {
        content: "";
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 0;
        height: 2px;
        background: var(--primary);
        transition: width 0.3s ease;
      }

      .nav-links li a:hover::after {
        width: 100%;
      }

      .nav-cta {
        display: flex;
        gap: 1rem;
        align-items: center;
        flex-shrink: 0;
      }

      /* Mobile Navigation */
      .mobile-menu {
        display: none;
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        padding: 12px;
        border-radius: 4px;
        z-index: 1001;
        background: transparent;
        border: none;
      }

      .mobile-menu span {
        width: 28px;
        height: 3px;
        background: var(--gray-700);
        transition: all 0.3s ease;
        border-radius: 2px;
      }

      .mobile-menu.active span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px);
      }

      .mobile-menu.active span:nth-child(2) {
        opacity: 0;
      }

      .mobile-menu.active span:nth-child(3) {
        transform: rotate(-45deg) translate(8px, -8px);
      }

      .mobile-nav-links {
        display: none;
        flex-direction: column;
        list-style: none;
        background: var(--white);
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        padding: 1.5rem;
        border-top: 1px solid var(--gray-200);
        box-shadow: var(--shadow-lg);
        z-index: 999;
        animation: slideDown 0.3s ease;
      }

      .mobile-nav-links.active {
        display: flex;
      }

      .mobile-nav-links li {
        margin: 0px;
        text-align: center;
      }

      .mobile-nav-links li a {
        display: block;
        padding: 0.75rem;
        font-size: 1rem;
        color: var(--gray-700);
        text-decoration: none;
        transition: color 0.3s ease;
      }

      .mobile-nav-links li a:hover {
        color: var(--primary);
      }

      .mobile-nav-links .btn {
        width: 100%;
        max-width: 300px;
        margin: 0.5rem auto;
      }

      @keyframes slideDown {
        from {
          transform: translateY(-10px);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }

      /* ===== Buttons ===== */
      .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem 1.5rem;
        border-radius: var(--border-radius);
        font-weight: 600;
        text-decoration: none;
        transition: all 0.3s ease;
        cursor: pointer;
        border: none;
        font-size: 0.9rem;
        min-height: 48px;
        line-height: 1.5;
        white-space: nowrap;
        text-align: center;
      }

      .btn-primary {
        background: var(--gradient-primary);
        color: var(--white);
        box-shadow: var(--shadow);
      }

      .btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: var(--shadow-lg);
        background: var(--primary-dark);
      }

      .btn-outline {
        background: transparent;
        color: var(--primary);
        border: 2px solid var(--primary);
      }

      .btn-outline:hover {
        background: var(--primary);
        color: var(--white);
      }

      /* ===== Hero Section ===== */
      .hero {
        background: var(--gradient-hero);
        color: var(--white);
        padding: 140px 0 80px;
        position: relative;
        overflow: hidden;
        min-height: 100vh;
        display: flex;
        align-items: center;
      }

      .hero::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("portfolio_banner.webp") no-repeat center center;
        /* background: url("https://images.unsplash.com/photo-1531415074968-036ba1b575da?q=80&w=2070&auto=format&fit=crop")
          no-repeat center center; */
        background-size: cover;
        opacity: 0.15;
        z-index: 1;
      }

      .hero-content {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: 4rem;
        align-items: center;
        position: relative;
        z-index: 2;
        width: 100%;
      }

      .hero-text {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
      }

      .hero-text h1 {
        font-size: clamp(2.5rem, 1vw, 3.5rem);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 1.5rem;
        color: var(--white);
      }

      .hero-text .highlight {
        color: #ffcc00;
        position: relative;
        display: inline-block;
      }

      .hero-text .highlight::after {
        content: "";
        position: absolute;
        bottom: 5px;
        left: 0;
        width: 100%;
        height: 8px;
        background: rgba(255, 204, 0, 0.3);
        z-index: -1;
        border-radius: 4px;
      }

      .hero-text p {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 2rem;
        line-height: 1.7;
      }

      .hero-cta {
        display: flex;
        gap: 1rem;
        flex-wrap: wrap;
        width: 100%;
      }

      .hero-visual {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .hero-card {
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(20px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--border-radius-2xl);
        padding: 2rem;
        text-align: center;
        box-shadow: var(--shadow-2xl);
        width: 100%;
        max-width: 500px;
        position: relative;
        overflow: hidden;
      }

     .hero-card::before {
    content: "";
    position: absolute;
    top: -63%;
    left: 27%;
    width: 62%;
    height: 200%;
    background: radial-gradient(
          circle,
          rgba(255, 255, 255, 0.1) 0%,
          rgba(255, 255, 255, 0) 70%
        );
    animation: rotate 15s linear infinite;
    z-index: 1;
    }

      .hero-card-content {
        position: relative;
        z-index: 2;
      }
      .hero-card img {
        width: 257px;
        height: 79px;
        margin-bottom: 1rem;
        transition: opacity 0.3s ease;
        background: var(--white);
        padding: 5px;
        box-shadow: var(--shadow-md);
      }

      .hero-card img.loaded {
        opacity: 1;
      }

      .hero-card h3 {
        font-size: 1.25rem;
        margin-bottom: 0.5rem;
        color: var(--white);
      }

      .hero-card p {
        font-size: 1rem;
        color: rgba(255, 255, 255, 0.8);
      }

      .payment-methods {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
        flex-wrap: wrap;
        background-color: transparent;
      }

      .payment-method {
        height: 34px;
        width: 60px;
        background-color: transparent;
        border-radius: 4px;
      }

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

      /* ===== Trust Indicators ===== */
      .trust-section {
        background: var(--white);
        padding: 4rem 0;
        border-bottom: 1px solid var(--gray-200);
      }

      .trust-content {
        text-align: center;
      }

      .trust-content p {
        color: var(--gray-600);
        margin-bottom: 2rem;
        font-weight: 500;
        font-size: clamp(0.875rem, 2vw, 1rem);
        position: relative;
        display: inline-block;
      }

      .trust-content p::before,
      .trust-content p::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40px;
        height: 1px;
        background: var(--gray-300);
      }

      .trust-content p::before {
        left: -50px;
      }

      .trust-content p::after {
        right: -50px;
      }

      .trust-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
      }

      .trust-stat {
        text-align: center;
        padding: 1.5rem 1rem;
        background: var(--white);
        border-radius: var(--border-radius-lg);
        box-shadow: var(--shadow-sm);
        transition: all 0.3s ease;
        border: 1px solid var(--gray-200);
      }

      .trust-stat:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-md);
        border-color: var(--primary);
      }

      .trust-stat .number {
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        font-weight: 800;
        color: var(--primary);
        display: block;
        line-height: 1.2;
      }

      .trust-stat .label {
        color: var(--gray-600);
        font-weight: 500;
        font-size: clamp(0.75rem, 2vw, 0.875rem);
        margin-top: 0.5rem;
        display: block;
      }

      /* ===== Section Headers ===== */
      .section-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 4rem;
        padding: 0 1rem;
        position: relative;
      }

      .section-header h2 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 800;
        color: var(--gray-900);
        margin-bottom: 1rem;
        line-height: 1.2;
        position: relative;
        display: inline-block;
      }

      .section-header h2::after {
        content: "";
        position: absolute;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
        width: 80px;
        height: 4px;
        background: var(--gradient-primary);
        border-radius: 2px;
      }

      .section-header p {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        color: var(--gray-600);
        line-height: 1.7;
      }

      /* ===== Features Section ===== */
      .features {
        padding: 6rem 0;
        background: var(--white);
      }

      .features-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 2rem;
      }

      .feature-card {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius-xl);
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-sm);
      }

      .feature-card::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: var(--gradient-primary);
        transform: scaleX(0);
        transition: transform 0.3s ease;
      }

      .feature-card:hover::before {
        transform: scaleX(1);
      }

      .feature-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-xl);
        border-color: var(--primary);
      }

      .feature-icon {
        width: 64px;
        height: 64px;
        background: var(--gradient-primary);
        border-radius: var(--border-radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 1.5rem;
        font-size: 1.75rem;
        color: var(--white);
        flex-shrink: 0;
        box-shadow: var(--shadow);
      }

      .feature-card h3 {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 700;
        color: var(--gray-900);
        margin-bottom: 1rem;
        line-height: 1.3;
      }

      .feature-card p {
        color: var(--gray-600);
        line-height: 1.6;
        font-size: clamp(0.875rem, 2vw, 1rem);
        flex-grow: 1;
      }

      /* ===== Gaming Brands ===== */
      .portfolio {
        padding: 6rem 0;
        background: var(--gray-50);
      }

      .brands-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
      }

      .brand-card {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius-xl);
        padding: 2rem;
        text-align: center;
        transition: all 0.3s ease;
        position: relative;
        height: 100%;
        display: flex;
        flex-direction: column;
        box-shadow: var(--shadow-sm);
        align-items: center;
      }

      .brand-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary);
      }

      .brand-logo {
        height: 92px;
        /* background: var(--white); */
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 1.5rem;
        /* box-shadow: var(--shadow-sm); */
        overflow: hidden;
      }

      .brand-logo img {
        width: 70%;
        height: auto;
      }

      .brand-card h3 {
        font-size: clamp(1rem, 2.5vw, 1.25rem);
        font-weight: 700;
        color: var(--primary);
        margin-bottom: 1rem;
        line-height: 1.3;
      }

      .brand-card p {
        color: var(--gray-600);
        font-size: clamp(0.8rem, 2vw, 0.875rem);
        line-height: 1.6;
        flex-grow: 1;
      }

      /* ===== Winning Proof Section ===== */
      .winning-proof {
        padding: 6rem 0;
        background: var(--white);
      }

      .proof-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 1.5rem;
      }

      .proof-item {
        border-radius: var(--border-radius-lg);
        overflow: hidden;
        box-shadow: var(--shadow-md);
        transition: all 0.3s ease;
      }

      .proof-item:hover {
        transform: translateY(-5px);
        box-shadow: var(--shadow-lg);
      }

      .proof-item img {
        width: 100%;
        height: auto;
        display: block;
      }

      /* ===== Testimonials ===== */
      .testimonials {
        padding: 6rem 0;
        background: var(--gray-50);
      }

      .testimonials-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 2rem;
      }

      .testimonial-card {
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: var(--border-radius-xl);
        padding: 2rem;
        box-shadow: var(--shadow);
        height: 100%;
        display: flex;
        flex-direction: column;
        transition: all 0.3s ease;
      }

      .testimonial-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: var(--primary);
      }

      .testimonial-content {
        margin-bottom: 1.5rem;
        flex-grow: 1;
        position: relative;
      }

      .testimonial-content::before {
        content: '"';
        position: absolute;
        top: -20px;
        left: -10px;
        font-size: 5rem;
        color: var(--primary-light);
        opacity: 0.1;
        font-family: serif;
        line-height: 1;
        z-index: 0;
      }

      .testimonial-content p {
        color: var(--gray-700);
        font-style: italic;
        line-height: 1.7;
        font-size: clamp(0.875rem, 2vw, 1rem);
        position: relative;
        z-index: 1;
      }

      .testimonial-author {
        display: flex;
        align-items: center;
        gap: 1rem;
      }

      .author-avatar {
        width: 48px;
        height: 48px;
        background: var(--gradient-primary);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        font-weight: 700;
        flex-shrink: 0;
      }

      .author-info h4 {
        font-weight: 600;
        color: var(--gray-900);
        margin-bottom: 0.25rem;
        font-size: clamp(0.875rem, 2vw, 1rem);
        line-height: 1.3;
      }

      .author-info p {
        color: var(--gray-600);
        font-size: clamp(0.75rem, 2vw, 0.875rem);
        line-height: 1.3;
      }

      /* ===== CTA Section ===== */
      .cta-section {
        background: var(--gradient-hero);
        color: var(--white);
        padding: 6rem 0;
        text-align: center;
        position: relative;
        overflow: hidden;
      }

      .cta-section::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: url("cta-bg.jpg")
          no-repeat center center;
        background-size: cover;
        opacity: 0.1;
        z-index: 1;
      }

      .cta-content {
        position: relative;
        z-index: 2;
        max-width: 600px;
        margin: 0 auto;
        padding: 0 1rem;
      }

      .cta-content h2 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 800;
        margin-bottom: 1rem;
        line-height: 1.2;
      }

      .cta-content p {
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 2rem;
        line-height: 1.7;
      }

      .whatsapp-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
        color: var(--white);
        padding: 10px 2rem;
        border-radius: var(--border-radius-lg);
        text-decoration: none;
        font-weight: 600;
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        transition: all 0.3s ease;
        box-shadow: var(--shadow-lg);
        margin: 0 auto;
      }

      .whatsapp-btn:hover {
        transform: translateY(-3px);
        box-shadow: var(--shadow-xl);
      }

      .whatsapp-btn .icon {
        font-size: 1.5rem;
        flex-shrink: 0;
      }

      /* ===== Footer ===== */
      footer {
        background: var(--gray-900);
        color: var(--gray-300);
        padding: 4rem 0 2rem;
      }

      .footer-content {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 3rem;
        margin-bottom: 3rem;
      }

      .footer-section h3 {
        color: var(--white);
        font-weight: 700;
        margin-bottom: 1rem;
        font-size: clamp(1rem, 2.5vw, 1.125rem);
        position: relative;
        padding-bottom: 10px;
      }

      .footer-section h3::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 40px;
        height: 3px;
        background: var(--primary);
      }

      .footer-section p {
        line-height: 1.7;
        margin-bottom: 1rem;
        font-size: clamp(0.875rem, 2vw, 1rem);
      }

      .footer-section ul {
        list-style: none;
      }

      .footer-section ul li {
        margin-bottom: 0.75rem;
      }

      .footer-section ul li a {
        color: var(--gray-400);
        font-size: clamp(0.875rem, 2vw, 1rem);
        line-height: 1.5;
        text-decoration: none;
        transition: color 0.3s ease;
        display: flex;
        align-items: center;
        gap: 8px;
      }

      .footer-section ul li a:hover {
        color: var(--primary-light);
      }

      .footer-section ul li a i {
        font-size: 0.8rem;
      }

      .social-links {
        display: flex;
        gap: 1rem;
        margin-top: 1.5rem;
      }

      .social-link {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--gray-800);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--white);
        transition: all 0.3s ease;
      }

      .social-link:hover {
        background: var(--primary);
        transform: translateY(-3px);
      }

      .footer-bottom {
        border-top: 1px solid var(--gray-800);
        padding-top: 2rem;
        text-align: center;
        color: var(--gray-500);
        font-size: clamp(0.75rem, 2vw, 0.875rem);
        line-height: 1.5;
      }

      /* ===== Animations ===== */
      .fade-in {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.6s ease, transform 0.6s ease;
      }

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

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

      /* Add these styles to your existing CSS */

      /* Text truncation for cards on small screens */
      @media (max-width: 768px) {
        .feature-card p,
        .brand-card p,
        .testimonial-content p {
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          position: relative;
          max-height: 4.5em; /* 3 lines * 1.5 line-height */
        }

        /* Add "Learn more" link when content is truncated */
        .feature-card,
        .brand-card,
        .testimonial-card {
          position: relative;
          padding-bottom: 2.5rem; /* Make space for the Learn more link */
        }

        .learn-more {
          position: absolute;
          bottom: 1rem;
          left: 0;
          right: 0;
          text-align: center;
          color: var(--primary);
          font-weight: 600;
          font-size: 0.875rem;
          text-decoration: none;
          display: none; /* Hidden by default */
        }

        /* Show Learn more only when content is truncated */
        .feature-card:hover .learn-more,
        .brand-card:hover .learn-more,
        .testimonial-card:hover .learn-more {
          display: block;
        }

        /* Add hover effect to show full content */
        .feature-card:hover p,
        .brand-card:hover p,
        .testimonial-card:hover .testimonial-content p {
          -webkit-line-clamp: unset;
          max-height: none;
          overflow: visible;
        }
      }

      /* For testimonials specifically */
      @media (max-width: 768px) {
        .testimonial-content {
          max-height: 7.5em; /* 5 lines * 1.5 line-height */
          overflow: hidden;
          transition: max-height 0.3s ease;
        }

        .testimonial-card:hover .testimonial-content {
          max-height: 500px; /* Enough to show full content */
        }
      }
      @media (max-width: 768px) {
        .container {
          padding: 0 16px;
        }

        nav {
          padding: 0.75rem 0;
          min-height: 60px;
        }

        .logo img {
          height: 40px;
        }

        .nav-links {
          display: none;
        }

        .nav-cta {
          gap: 0.5rem;
          display: none;
        }

        .nav-cta .btn {
          padding: 0.5rem 1rem;
          font-size: 0.75rem;
          min-height: 40px;
        }

        .mobile-menu {
          display: flex;
        }

        .hero {
          padding: 100px 0 60px;
          min-height: auto;
        }

        .hero-content {
          display: flex;
          flex-direction: column;
          gap: 2rem;
        }

        .hero-text {
          text-align: center;
          align-items: center;
        }

        .hero-visual {
          margin-top: 1rem;
        }

        .hero-card {
          max-width: 500px;
          padding: 1.5rem;
          margin: 0 auto;
        }

        .hero-cta {
          justify-content: center;
          flex-direction: column;
          align-items: center;
          width: 100%;
          gap: 0.75rem;
        }

        .hero-cta .btn {
          width: 100%;
          max-width: 280px;
          justify-content: center;
        }

        /* Grid layout for all section cards */
        .trust-stats,
        .features-grid,
        .brands-grid,
        .proof-grid,
        .testimonials-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: 1.25rem;
          max-width: 400px;
          margin: 0 auto;
        }

        /* Adjust card styles for mobile grid */
        .trust-stat,
        .feature-card,
        .brand-card,
        .proof-item,
        .testimonial-card {
          width: 100%;
          max-width: 100%;
          margin: 0;
        }

        /* Ensure consistent padding and spacing */
        .feature-card,
        .brand-card,
        .testimonial-card {
          padding: 1.5rem;
        }

        /* Center align text in cards */
        .feature-card h3,
        .brand-card h3,
        .testimonial-content p {
          text-align: center;
        }

        /* Center buttons in cards */
        .brand-card .btn,
        .feature-card .btn {
          margin-top: 1rem;
          display: block;
          max-width: 200px;
        }

        .trust-section {
          padding: 2.5rem 0;
        }

        .features,
        .portfolio,
        .testimonials,
        .cta-section {
          padding: 4rem 0;
        }

        .section-header {
          margin-bottom: 3rem;
          padding: 0;
        }
        @media (max-width: 768px) {
          .trust-content {
            display: grid;
            grid-template-columns: 1fr;
            gap: 1.25rem;
          }
        }
      }

      @media (max-width: 480px) {
        /* Hero section specific changes */
        .hero {
          padding: 90px 0 50px;
          min-height: auto; /* Remove fixed min-height for mobile */
        }
        .hero-text h1 {
        font-size: clamp(1.5rem, 1vw, 3.5rem);}
        .hero-content {
          display: flex;
          flex-direction: column;
          gap: 2rem; /* Add some spacing between sections */
        }

        .hero-text {
          order: 1;
          text-align: center;
          align-items: center;
          width: 100%; /* Ensure full width */
        }

        .hero-visual {
          order: 2;
          margin-top: 1rem;
          width: 100%; /* Ensure full width */
          display: flex;
          justify-content: center; /* Center the card */
        }

        .hero-card {
          max-width: 500px;
          padding: 1.5rem;
          margin: 0; /* Remove any conflicting margins */
        }

        .hero-cta {
          justify-content: center;
          flex-direction: column;
          align-items: center;
          width: 100%;
          gap: 0.75rem;
        }

        .hero-cta .btn {
          width: 100%;
          max-width: 280px;
          justify-content: center;
        }
        /* Trust Indicators - 2 columns */
        .trust-stats {
          grid-template-columns: repeat(2, 1fr);
          gap: 1rem;
          max-width: 100%;
        }

        .trust-stat {
          padding: 1rem;
        }

        .trust-stat .number {
          font-size: 1.25rem;
        }

        /* Features - 2 columns */
        .features-grid {
          grid-template-columns: repeat(2, 1fr);
          gap: 10px;
          max-width: 100%;
        }

        .feature-card {
          padding: 1rem;
        }

        .feature-icon {
          width: 48px;
          height: 48px;
          font-size: 1.25rem;
        }

        .feature-card h3 {
          font-size: 0.9rem;
        }

        .feature-card p {
          font-size: 0.8rem;
        }

        /* Gaming Brands - 2 columns */
        .brands-grid {
          grid-template-columns: repeat(1, 1fr);
          gap: 10px;
          max-width: 100%;
        }

        .brand-card {
          padding: 1rem;
        }

        .brand-logo {
          height: 80px;
        }

        .brand-card h3 {
          font-size: 0.9rem;
        }

        .brand-card p {
          font-size: 0.8rem;
        }

        .brand-card .btn {
          margin-top: 1rem;
          padding: 0.5rem;
          font-size: 0.8rem;
          min-height: 36px;
        }

        /* Winning Proof - single column (best for images) */
        .proof-grid {
          grid-template-columns: 1fr;
          max-width: 100%;
        }

        .proof-item {
          border-radius: 8px;
          overflow: hidden;
        }

        /* Testimonials - single column */
        .testimonials-grid {
          grid-template-columns: 1fr;
          max-width: 100%;
        }

        .testimonial-card {
          padding: 1.25rem;
        }

        .testimonial-content p {
          font-size: 0.9rem;
        }

        /* Section headers */
        .section-header {
          margin-bottom: 2rem;
        }

        .section-header h2 {
          font-size: 1.5rem;
        }

        .section-header p {
          font-size: 0.9rem;
        }

        /* Consistent padding for all sections */
        .trust-section,
        .features,
        .portfolio,
        .testimonials,
        .winning-proof,
        .cta-section {
          padding: 2.5rem 0;
        }

        /* Footer adjustments */
        .footer-content {
          grid-template-columns: 1fr;
          gap: 2rem;
        }
        .footer-section h3::after {
          left: 7%;
          transform: translateX(-50%);
        }

        /* .social-links {
          justify-content: center;
        } */
      }

      @media (max-width: 360px) {
        .container {
          padding: 0 12px;
        }

        .nav-cta .btn {
          padding: 0.3rem 0.7rem;
          font-size: 0.65rem;
          min-height: 34px;
        }

        .mobile-nav-links {
          top: 55px;
        }

        .hero {
          padding: 85px 0 45px;
        }

        .hero-card {
          /* max-width: 240px; */
          padding: 1rem;
        }

        /* Further adjust grid for very small screens */
        .trust-stats,
        .features-grid,
        .brands-grid,
        .proof-grid,
        .testimonials-grid {
          max-width: 300px;
        }

        /* Reduce padding more */
        .feature-card,
        .brand-card,
        .testimonial-card {
          padding: 11px;
        }

        .whatsapp-btn {
          padding: 0.875rem;
          font-size: 0.9rem;
        }
      }

      /* Accessibility: Reduced motion */
      @media (prefers-reduced-motion: reduce) {
        .mobile-nav-links {
          animation: none;
        }

        .mobile-menu span,
        .feature-card::before,
        .btn:hover,
        .whatsapp-btn:hover,
        .feature-card:hover,
        .brand-card:hover,
        .testimonial-card:hover,
        .trust-stat:hover,
        .social-link:hover {
          transition: none;
          transform: none;
        }
      }