/* Basic Reset and Variables */
:root {
    --pw-blue: #5b3eaf;
    --pw-dark-bg: #1e293b;
    --pw-link-color: #333;
    --pw-link-hover: #5b3eaf;
    --pw-white: #ffffff;
  /* Vibrant Hexagon Colors */
    --hex-blue: #007bff;
    --hex-orange-v2: #ff9800;
    --hex-green-v2: #4caf50;
    --hex-purple-v2: #9c27b0;
    --hex-red-v2: #f44336;
    
    --card-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    

    /* Icon Box Backgrounds */
    --icon-bg-green: #e9f8f2; /* Light green from image */
    --icon-color-green: #28a745;

    --icon-bg-blue: #e0f2f7; /* Light blue from image */
    --icon-color-blue: #17a2b8;

    --icon-bg-pink: #ffe6f0; /* Light pink from image */
    --icon-color-pink: #e83e8c;

    --icon-bg-light-green: #e6ffe6; /* Another light green */
    --icon-color-light-green: #28a745; /* Same green color */
     --bg-light: #f7f9fb;
    --card-bg: #ffffff;
 
}



body {
   font-family: 'Poppins', sans-serif;
    background-color: var(--bg-light);
    color: var(--primary-blue);
    padding: 20px 0;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

/* --- Header Styling --- */
.pw-header {
    background-color: var(--pw-white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.pw-container {
  
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 78px; /* Fixed header height */
}

/* Logo Styling */
.logo img {
    height:70px; /* Adjust as needed */
    vertical-align: middle;
}

/* Login Button */
.login-btn {
    background-color: var(--pw-blue);
    color: var(--pw-white);
    border: none;
    padding: 8px 18px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-btn:hover {
    background-color: #4a308c;
}

/* --- Desktop Navigation --- */
.desktop-nav {
    display: none; /* Hidden by default, shown on desktop */
}

.desktop-nav ul {
    display: flex;
    gap: 20px;
}

.desktop-nav a {
    color: var(--pw-dark-bg);
    font-size:16px;
    font-weight: 500;
    padding: 10px 0;
    position: relative;
    transition: color 0.3s;
}

.desktop-nav a:hover, .desktop-nav a.active {
    color: var(--pw-link-hover);
}

/* --- Mobile Menu Icon (Hamburger) --- */
.hamburger {
    display: flex; /* Shown by default on mobile */
    flex-direction: column;
    justify-content: space-around;
    width: 25px;
    height: 20px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 15px;
}

.hamburger span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--pw-dark-bg);
    border-radius: 10px;
    transition: all 0.3s linear;
}

/* Hide Hamburger on Desktop */
@media (min-width: 900px) {
    .hamburger {
        display: none; 
    }
}

/* --- Mobile Navigation (Off-Canvas Menu) --- */
.mobile-nav {
    position: fixed;
    top: 0;
    left: -300px; /* Hidden off-screen */
    width: 300px; /* Menu width */
    height: 100%;
    background: var(--pw-white);
    z-index: 2000;
    box-shadow: 2px 0 5px rgba(0,0,0,0.2);
    transition: left 0.3s ease-in-out;
    overflow-y: auto;
}

.mobile-nav.open {
    left: 0; /* Slide in */
}

.mobile-nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
}

.close-btn {
    font-size: 30px;
    line-height: 1;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
}

.mobile-menu-list li {
    border-bottom: 1px solid #f0f0f0;
}

.mobile-menu-list a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 15px;
    color: var(--pw-dark-bg);
    font-weight: 500;
}

.arrow-icon {
    font-size: 1.2em;
    color: #999;
}

/* --- Overlay --- */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.overlay.visible {
    opacity: 1;
    visibility: visible;
}


/* --- Media Query for Desktop View (Header and Nav) --- */
@media (min-width: 900px) {
    .pw-header .pw-container {
        /* Align items differently on desktop */
        justify-content: flex-start; 
        gap: 30px;
    }

    /* Show desktop nav and move login button */
    .desktop-nav {
        display: block;
        flex-grow: 1; /* Pushes the login button to the right */
    }
    
    .login-btn {
        margin-left: auto; /* Ensure button is on the far right */
    }

    /* Hide Mobile components */
    .hamburger {
        display: none;
    }

    .mobile-nav {
        display: none;
    }
}


/* ------------------------------------------------------------------ */
/* --- BEST RESPONSIVE Carousel Styling --- */
/* ------------------------------------------------------------------ */
/* ------------------------------------------------------------------ *//* ------------------------------------------------------------------ */
/* --- MODERN & FULLY RESPONSIVE Carousel Styling (Optimized Heights) --- */
/* ------------------------------------------------------------------ */
  .carousel-container {
            width: 100%;
           
            height: 290px;
            position: relative;
           margin-top: 50px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }

        .carousel-track {
            display: flex;
            height: 100%;
            transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        .carousel-slide {
            flex: 0 0 100%;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .slide-content {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .slide-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
            filter: brightness(0.8);
        }

        .slide-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, rgba(91, 62, 175, 0.7), rgba(255, 193, 7, 0.6));
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 2.5rem;
            font-weight: 700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Navigation controls */
        .carousel-nav {
            position: absolute;
            bottom: 20px;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 15px;
            z-index: 10;
        }

        .carousel-dots {
            display: flex;
            gap: 10px;
        }

        .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .dot.active {
            background-color: white;
            transform: scale(1.2);
        }

        .carousel-arrows {
            position: absolute;
            top: 50%;
            left: 0;
            width: 100%;
            display: flex;
            justify-content: space-between;
            padding: 0 20px;
            transform: translateY(-50%);
            z-index: 10;
        }

        .arrow {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.8);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
            transition: all 0.3s ease;
            font-size: 1.2rem;
            color: #5b3eaf;
        }

        .arrow:hover {
            background-color: white;
            transform: scale(1.1);
        }

        /* Progress bar */
        .progress-bar {
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            background-color: white;
            width: 0%;
            transition: width 0.1s linear;
            z-index: 10;
        }

        /* Responsive adjustments */
        @media (max-width: 768px) {
            .carousel-container {
                height: 180px;
            }
            
            .slide-overlay {
                font-size: 2rem;
            }
            
            .arrow {
                width: 40px;
                height: 40px;
            }
        }

        @media (max-width: 480px) {
            .carousel-container {
                height: 150px;
            }
            
            .slide-overlay {
                font-size: 1.5rem;
            }
            
            .arrow {
                width: 35px;
                height: 35px;
                font-size: 1rem;
            }
            
            .carousel-nav {
                bottom: 10px;
            }
        }
/* ------------------------------------------------------------------ */
/* --- MODERN PREMIUM & FULLY RESPONSIVE Carousel Styling --- */
/* ------------------------------------------------------------------ */

/* --- WhatsApp CTA Button Styling --- */
.whatsapp-cta {
    /* Position and Stickiness */
    position: fixed;
    bottom: 25px; 
    right: 25px; 
    z-index: 10000; 
    
    /* Appearance */
    background-color: #25D366; /* WhatsApp Green */
    color: white;
    width: 60px; 
    height: 60px;
    border-radius: 50%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px; 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); 
    text-decoration: none; 
    
    /* Animation and Transition */
    transition: all 0.3s ease-in-out;
}

.whatsapp-cta:hover {
    background-color: #128C7E; 
    transform: scale(1.1) rotate(0deg); 
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* Optional: Pulse animation to draw attention */
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(37, 211, 102, 0); }
    100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.whatsapp-cta {
    animation: pulse 2s infinite;
}


/* ------------------------------------------------------------------ */
/* --- NEW CONCISE FOOTER STYLING --- */
/* ------------------------------------------------------------------ */



.pw-footer {
    padding: 40px 15px 20px;
    color: var(--pw-dark-bg, #1e293b);
    border-top: 1px solid #afaeae;
}

.footer-grid {
    display: grid;
    gap: 30px; 
    /* Mobile Layout: 1 column, centered */
    grid-template-columns: 1fr; 
    text-align: center;
    max-width: 1400px;
    margin: 0 auto;
}

/* Column Headers */
.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    color: var(--pw-dark-bg, #1e293b);
    text-transform: uppercase;
    text-align: center; 
}

/* Links */
.link-group li {
    margin-bottom: 8px;
}

.link-group a {
    color: var(--pw-text-light, #52525c);
    font-size: 14px;
    transition: color 0.3s;
}

.link-group a:hover {
    color: var(--pw-blue, #5b3eaf);
}

/* Column 1: About/Logo Styling */
.about-col {
    order: -1; 
    padding-bottom: 20px;
    border-bottom: 1px solid #e0e0e0;
}

.footer-logo {
    display: flex;
    align-items: center;
    justify-content: center; 
    margin-bottom: 15px;
}

.footer-logo img {
    height: 35px; 
    margin-right: 10px;
}

.footer-logo h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--pw-dark-bg, #1e293b);
    margin: 0;
}

.about-col p {
    font-size: 14px;
    color: var(--pw-text-light, #52525c);
    margin: 15px auto 20px;
    line-height: 1.6;
    max-width: 450px; /* Constrain text width */
}

/* App Links */
.app-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}
.app-links img {
    height: 40px; 
    border-radius: 4px;
    transition: transform 0.2s;
}

/* Social Links */
.social-links {
    margin-top: 20px;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background-color: var(--pw-white, #ffffff);
    color: var(--pw-dark-bg, #1e293b);
    font-size: 16px;
    margin: 0 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s, color 0.3s;
}

.social-links a:hover {
    background-color: var(--pw-blue, #5b3eaf);
    color: var(--pw-white, #ffffff);
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
    margin-top: 30px;
}

.footer-bottom p {
    font-size: 13px;
    color: var(--pw-text-light, #52525c);
    margin: 0;
}


/* --- Media Queries for Tablet/Desktop --- */

/* Tablet Layout (min-width: 650px) */
@media (min-width: 650px) {
    .footer-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns layout */
        text-align: left;
    }

    .about-col {
        grid-column: span 3; /* Spans across all 3 columns */
        text-align: center;
        border-bottom: none;
    }
    
    .footer-col h4 {
        text-align: left; 
    }

    /* Column 2 & 3 link alignment */
    .link-group ul {
        text-align: left;
    }
}

/* Desktop Layout (min-width: 1024px) */
@media (min-width: 1024px) {
    .footer-grid {
        /* Set custom column widths for a better desktop look */
        grid-template-columns: 2fr 1fr 1fr; 
        gap: 50px;
    }
    
    .about-col {
        grid-column: span 1; 
        text-align: left;
    }
    
    /* Reset Col 1 alignment for desktop */
    .footer-logo, .app-links {
        justify-content: flex-start;
    }
    .about-col p {
        margin-left: 0;
        margin-right: 0;
    }
}

.mt-4 { margin-top: 25px; }

/* --- Education Section Styling (Updated with Premium Image Look) --- */
.education-section {
   
    padding: 20px;
    display: flex;
    flex-wrap: wrap; /* Responsive layout */
    gap: 40px;
    align-items: center;
  
}


.image-section {
    flex: 1;
    min-width: 300px; /* Minimum size for image section */
    position: relative; /* For the overlay and shadow */
    overflow: hidden; /* To keep inner elements rounded */
   
    
}

/* Image Enhancements for Premium Look */
.image-section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
 
    display: block;
   
}

/* Hover Effect: Mouse-over पर इमेज थोड़ी ज़ूम (Scale) होगी */
.image-section:hover img {
    transform: scale(1.03);
    filter: brightness(1) contrast(1.1);
}

/* Optional: Add a subtle overlay gradient for depth (CSS Pseudo-element) */
.image-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
   
    pointer-events: none; /* Make sure the overlay doesn't block interaction */
    z-index: 1;
}

        .content-section {
            flex: 1;
            min-width: 300px;
            padding: 30px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            margin-top: -50px;
        }

        .title {
            font-size: 2.5rem;
            margin-bottom: 20px;
            background: linear-gradient(90deg, #ae1010);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            position: relative;
            animation: slideInFromLeft 1s ease-out;
        }

        .title::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 0;
            width: 100px;
            height: 4px;
            background: linear-gradient(90deg,  #000000c8, #5135f0c1);
            border-radius: 2px;
        } 

        .subtitle {
            font-size: 1.2rem;
            margin-bottom: 25px;
            line-height: 1.6;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.5s forwards;
        }

        .highlight {
            color: #2764ff;
            font-weight: bold;
        }

        .features {
            margin: 25px 0;
            opacity: 0;
            animation: fadeInUp 1s ease-out 0.8s forwards;
        }

        .feature {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            font-size: 1.1rem;
        }

        .feature i {
            margin-right: 10px;
            color: #4591ee;
            font-size: 1.2rem;
        }

        .cta-button {
            display: inline-block;
            padding: 15px 30px;
            background: linear-gradient(90deg, #15161a, #2764ff);
            color: white;
            text-decoration: none;
            border-radius: 50px;
            font-weight: bold;
            text-align: center;
            margin-top: 20px;
            transition: all 0.3s ease;
            box-shadow: 0 3px 10px  #2764ff;
            opacity: 0;
            animation: fadeInUp 1s ease-out 1.1s forwards;
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(12, 116, 214, 0.6);
        }

        .platforms {
            display: flex;
            gap: 20px;
            margin-top: 30px;
            opacity: 0;
            animation: fadeInUp 1s ease-out 1.4s forwards;
        }

        .platform {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            transition: all 0.3s ease;
            cursor: pointer;
        }

        .platform:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
        }

        .platform i {
            font-size: 1.5rem;
        }

        .platform.app i {
            color: #4CAF50;
        }

        .platform.youtube i {
            color: #FF0000;
        }

        .platform.whatsapp i {
            color: #25D366;
        }

        .platform span {
            font-weight: 500;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

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

        @keyframes fadeInUp {
            from {
                transform: translateY(30px);
                opacity: 0;
            }
            to {
                transform: translateY(0);
                opacity: 1;
            }
        }

        @media (max-width: 768px) {
            .education-section {
                flex-direction: column;
            }
            
            .image-section {
                min-height: 300px;
            }
            
            .content-section {
                padding: 30px 20px;
            }
            
            .title {
                font-size: 2rem;
            }
            
            .platforms {
                flex-direction: column;
            }
        }

        /* Floating animation for decorative elements */
        .floating {
            animation: floating 3s ease-in-out infinite;
        }

        @keyframes floating {
            0% {
                transform: translateY(0);
            }
            50% {
                transform: translateY(-10px);
            }
            100% {
                transform: translateY(0);
            }
        }
 
          .courses-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 50px;
        }

        .course-card {
            background: white;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            transition: all 0.3s ease;
            position: relative;
            border-top: 5px solid #1a237e;
        }

        .course-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
        }

        .course-badge {
            position: absolute;
            top: 15px;
            right: 15px;
            background: #ff6b6b;
            color: white;
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            z-index: 2;
        }

        .course-header {
            background: linear-gradient(135deg, #1a237e 0%, #303f9f 100%);
            color: white;
            padding: 25px;
            position: relative;
        }

        .course-header h3 {
            font-size: 22px;
            margin-bottom: 8px;
        }

        .course-header .subtitle {
            font-size: 16px;
            opacity: 0.9;
        }

        .course-body {
            padding: 25px;
        }

        .course-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
            flex-wrap: wrap;
            gap: 15px;
        }

        .info-item {
            display: flex;
            flex-direction: column;
            flex: 1;
            min-width: 120px;
        }

        .info-label {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
            font-weight: 500;
        }

        .info-value {
            font-weight: 600;
            color: #1a237e;
            font-size: 16px;
        }

        .course-features {
            margin: 20px 0;
        }

        .feature {
            display: flex;
            align-items: center;
            margin-bottom: 12px;
            font-size: 15px;
        }

        .feature-icon {
            margin-right: 10px;
            color: #1a237e;
            width: 20px;
            text-align: center;
        }

        .course-price {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 25px;
            padding-top: 20px;
            border-top: 1px solid #eee;
        }

        .price {
            font-size: 24px;
            font-weight: 700;
            color: #1a237e;
        }

        .price-discount {
            font-size: 16px;
            color: #666;
            text-decoration: line-through;
            margin-left: 10px;
        }

        .btn-enroll {
            background: linear-gradient(135deg, #1a237e, #303f9f);
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 6px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            box-shadow: 0 4px 15px rgba(26, 35, 126, 0.2);
        }

        .btn-enroll:hover {
            background: linear-gradient(135deg, #303f9f, #1a237e);
            transform: scale(1.05);
        }

        .btn-enroll i {
            margin-left: 8px;
        }

        .explore-section {
            text-align: center;
            padding: 40px 0;
        }

        .btn-explore {
            background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
            color: white;
            border: none;
            padding: 16px 45px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 8px 25px rgba(255, 107, 107, 0.3);
            display: inline-flex;
            align-items: center;
        }

        .btn-explore:hover {
            transform: translateY(-5px);
            box-shadow: 0 12px 30px rgba(255, 107, 107, 0.4);
        }

        .btn-explore i {
            margin-left: 10px;
            transition: transform 0.3s ease;
        }

        .btn-explore:hover i {
            transform: translateX(5px);
        }

        .stats {
            display: flex;
            justify-content: center;
            gap: 40px;
            margin-top: 30px;
            flex-wrap: wrap;
        }

        .stat-item {
            text-align: center;
        }

        .stat-number {
            font-size: 32px;
            font-weight: 700;
            color: #1a237e;
            display: block;
        }

        .stat-label {
            font-size: 16px;
            color: #666;
        }

        /* Responsive Design */
        @media (max-width: 992px) {
            .courses-grid {
                grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            }
        }

        @media (max-width: 768px) {
        
            
            .courses-grid {
                grid-template-columns: 1fr;
                gap: 25px;
            }
            
            .course-header h3 {
                font-size: 20px;
            }
            
            .btn-explore {
                padding: 14px 35px;
                font-size: 16px;
            }
            
            .stats {
                gap: 30px;
            }
            
            .stat-number {
                font-size: 28px;
            }
        }

        @media (max-width: 480px) {
            .header h1 {
                font-size: 24px;
            }
            
            .logo {
                flex-direction: column;
            }
            
            .logo-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
            
            .course-info {
                flex-direction: column;
            }
            
            .info-item {
                min-width: 100%;
            }
            
            .course-price {
                flex-direction: column;
                gap: 15px;
                align-items: flex-start;
            }
            
            .btn-enroll {
                width: 100%;
                justify-content: center;
            }
            
            .stats {
                gap: 20px;
            }
            
            .stat-number {
                font-size: 24px;
            }
        }
        



/* --- Main Container --- */

.popular-courses-container {
    margin: 0 auto;

    padding: 25px;

    border-radius: 12px;

 

}



/* --- Header Section (Title & Arrows) --- */

.courses-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 25px;

}



.section-title {

    font-size: 2em;

    font-weight: 700;

    color: #212529;

    position: relative;

    padding-bottom: 8px;

}



/* Yellow Underline Effect */

.section-title::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: 0;

    width: 35%; /* Adjust width to match image highlight */

    height: 7px;

    background: #ffc107; /* Bright yellow */

    opacity: 0.7;

    border-radius: 2px;

}



.navigation-arrows {

    display: flex;

    gap: 10px;

}



.arrow-btn {

    background: none;

    border: 1px solid #dee2e6;

    color: #6c757d;

    width: 45px;

    height: 45px;

    border-radius: 50%;

    cursor: pointer;

    font-size: 1.2em;

    font-weight: bold;

    transition: all 0.3s ease;

    display: flex;

    justify-content: center;

    align-items: center;

}



.arrow-btn:hover {

    background-color: #f8f9fa;

    border-color: #0720ff;

    color: #333;

}



/* --- Courses Wrapper (The Core Layout) --- */

.courses-wrapper {

    display: grid;

    /* Desktop: Show 4 columns */

    grid-template-columns: repeat(4, 1fr);

    gap: 20px;

    padding-bottom: 10px;

    

    /* --- Mobile/Tablet: Enable Horizontal Scroll --- */

    @media (max-width: 1200px) {

        /* On smaller screens, make the grid overflow horizontally */

        grid-template-columns: repeat(6, 300px); /* Fixed width cards for scrolling */

        overflow-x: auto;

        scroll-snap-type: x mandatory; /* Snap to each card */

        padding-bottom: 15px; /* Space for shadow/scrollbar */

        /* Hide scrollbar for cleaner look */

        scrollbar-width: none; /* Firefox */

        -ms-overflow-style: none;  /* IE and Edge */

    }

}



/* Hide scrollbar for Webkit browsers (Chrome, Safari) */

.courses-wrapper::-webkit-scrollbar {

    display: none;

}



/* --- Course Card Styles --- */

.course-card {

    /* For smaller screens, ensure card snaps */

    scroll-snap-align: start;

    

    background-color: #fff;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);

    overflow: hidden;

    transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.course-card:hover {

    transform: translateY(-5px);

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);

}



.course-card img {

    display: block;

    width: 100%;

    height: auto;

    object-fit: cover;

}



/* --- Footer Section (Dots and Button) --- */

.section-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 20px;

    padding-top: 10px;

}



.pagination-dots {

    display: flex;

    justify-content: flex-start;

    align-items: center;

}



.dot {

    height: 10px;

    background-color: #dee2e6;

    border-radius: 5px;

    margin: 0 4px;

    transition: all 0.3s;

}



.dot.active {

    width: 25px; /* Elongated active dot */

    background-color: #6c757d;

}



/* Default dots */

.dot:not(.active) {

    width: 10px;

}



/* Explore Button (Purple style from image) */

.explore-btn {

    background-color: #e0e0ff; /* Light purple */

    color: #5d3fd3; /* Darker purple text */

    padding: 12px 25px;

    border: none;

    border-radius: 25px;

    font-size: 16px;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.2s, transform 0.2s;

}



.explore-btn:hover {

    background-color: #c4b6ff;

    transform: translateY(-2px);

}



/* --- Final Responsive Adjustments --- */

@media (max-width: 768px) {

    .popular-courses-container {

        padding: 15px;

    }

    

    .section-title {

        font-size: 1.7em;

    }



    .courses-header {

        /* On small screens, hide arrows if scrolling is primary method */

        justify-content: space-between; 

    }



    .navigation-arrows {

        display: none; /* Hide arrows on mobile for better touch experience */

    }



    /* Force dots and button to stack or align cleanly on small screens */

    .section-footer {

        flex-direction: column;

        align-items: center;

        gap: 15px;

    }

    

    .explore-btn {

        width: 100%; /* Full width button on mobile */

    }

}



/* --- Global Variables (Purple/Yellow Theme) --- */
:root {
    /* रंग आपकी पहली इमेज से मिलते जुलते हैं */
    --primary-purple: #6a1b9a; /* गहरा बैंगनी आइकॉन */
    --light-purple: #e0e7ff; /* हल्का बैंगनी पृष्ठभूमि */
    --accent-yellow: #ffc107; /* पीला अंडरलाइन */
    --bg-light: #f8f9fa;
    --card-bg: #ffffff;
    --text-dark: #343a40;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    --hover-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
}

/* --- Section Header --- */

.category-section-best {

    

    margin: 50px auto;

    padding: 0 15px;

}



.section-header-best {

    text-align: center;

    margin-bottom: 40px;

}



.section-title-best {

    font-size: clamp(2rem, 5vw, 3rem); 

    font-weight: 700;

    margin: 0;

}



.title-underline-best {

    width: 160px;

    height: 4px;

    background-color: var(--accent-yellow);

    margin: 5px auto 0;

    border-radius: 2px;

}



/* --- CSS GRID Layout (Best Structure) --- */

.category-grid-best {

    display: grid;

    gap: 20px; 

    justify-content: center;

}



/* --- Category Card Styles --- */

.category-card-best {

    background-color: var(--card-bg);

    padding: 20px 10px;

    border-radius: 12px;

    box-shadow: var(--card-shadow); 

    text-align: center;

    text-decoration: none;

    color: var(--text-dark);

    cursor: pointer;

    

    /* उच्च प्रदर्शन ट्रांज़िशन */

    transition: transform 0.3s ease-out, box-shadow 0.3s;

    

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 140px; 

}



.category-card-best:hover {

    transform: translateY(-5px); /* हॉवर पर हल्का ऊपर उठाना */

    box-shadow: var(--hover-shadow); 

}



/* Icon Box (Quadratic - जैसा पहली इमेज में था) */

.icon-box-best {

    background-color: var(--light-purple); 

    border-radius: 8px;

    width: 80px;

    height: 80px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}



.icon-box-best i {

    font-size: 3rem;

    color: var(--primary-purple); 

}



.category-name-best {

    font-size: 1rem;

    font-weight: 600;

    margin: 0;

}



/* --- Media Queries for FULL RESPONSIVENESS (1 to 6 Columns) --- */



/* Mobile (<= 576px) */

@media (max-width: 576px) {

    .category-grid-best {

        /* 1 कॉलम */

        grid-template-columns: 1fr;

    }

}



/* Tablet (577px - 992px) */

@media (min-width: 577px) and (max-width: 992px) {

    .category-grid-best {

        /* 3 कॉलम */

        grid-template-columns: repeat(3, 1fr);

    }

}



/* Small Laptop (993px - 1200px) */

@media (min-width: 993px) and (max-width: 1200px) {

    .category-grid-best {

        /* 4 कॉलम */

        grid-template-columns: repeat(4, 1fr);

    }

}



/* Large Desktop (>= 1201px) */

@media (min-width: 1201px) {

    .category-grid-best {

        /* 6 कॉलम */

        grid-template-columns: repeat(6, 1fr);

    }

    

    /* UGC NET Card (13th Card) को सेंटर में करना */

    .ugc-net-card-best {

        /* 6 कॉलम ग्रिड में 3rd कॉलम से शुरू होकर 2 कॉलम स्पैन करें (इससे यह सेंटर में आएगा) */

        grid-column: 3 / span 2; 

    }

}



/* --- Section Header --- */

.study-materials-section {

    max-width: 1400px;

    margin: 50px auto;

    padding: 0 15px;

}



.section-header-study {

    text-align: left; /* इमेज 2 के अनुसार बाईं ओर शीर्षक */

    margin-bottom: 30px;

}



.section-title-study {

    font-size: clamp(2rem, 5vw, 3rem); 

    font-weight: 700;

    margin: 0;

}



.title-underline-study {

    width: 160px;

    height: 4px;

    background-color: var(--accent-yellow);

    margin-top: 5px;

    border-radius: 2px;

}



/* --- Grid Layout Container --- */

.materials-grid {

    display: grid;

    gap: 20px; 

    justify-content: center;

}



/* --- Material Card Styles --- */

.material-card {

    background-color: var(--card-bg);

    padding: 20px 10px;

    border-radius: 12px;

    box-shadow: var(--card-shadow); 

    text-align: center;

    text-decoration: none;

    color: var(--text-dark);

    cursor: pointer;

    

    transition: transform 0.3s ease-out, box-shadow 0.3s;

    

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    min-height: 140px; 

}



.material-card:hover {

    transform: translateY(-5px); 

    box-shadow: var(--hover-shadow); 

}



/* Icon Box (Background colors from Image 2) */

.icon-box-material {

    border-radius: 12px;

    width: 90px;

    height: 90px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

    border: 1px solid rgba(0, 0, 0, 0.05); /* हल्का बॉर्डर */

}



/* Dynamic Icon Colors (to mimic the image) */

.icon-box-material i {

    font-size: 3.2rem;

}

.material-name {

    font-size: 1rem;

    font-weight: 600;

    margin: 0;

}





/* Specific Background Colors for Icon Boxes (Mimicking Image 2) */

.bg-blue-light { background-color: #e6e6ff; color: #4a4ae6; }

.bg-red-light { background-color: #f7e6e3; color: #cc4f3e; }

.bg-brown-light { background-color: #f4eee2; color: #9c7b4f; }

.bg-green-light { background-color: #e4f7e6; color: #3e9c4c; }

.bg-pink-light { background-color: #ffe8ed; color: #cc3e60; }

.bg-green-light-2 { background-color: #e4f7e6; color: #3e9c4c; }

.bg-yellow-light { background-color: #fcf9e6; color: #9c933e; }

.bg-purple-light-2 { background-color: #f0e6ff; color: #7f3ecc; }

.bg-blue-light-2 { background-color: #e6f6ff; color: #4f8ccc; }

.bg-orange-light { background-color: #fff0e6; color: #cc7b4f; }



/* Apply color to icons based on box color */

.bg-blue-light i { color: #4a4ae6; }

.bg-red-light i { color: #cc4f3e; }

.bg-brown-light i { color: #9c7b4f; }

.bg-green-light i, .bg-green-light-2 i { color: #3e9c4c; }

.bg-pink-light i { color: #cc3e60; }

.bg-yellow-light i { color: #9c933e; }

.bg-purple-light-2 i { color: #7f3ecc; }

.bg-blue-light-2 i { color: #4f8ccc; }

.bg-orange-light i { color: #cc7b4f; }



/* --- Explore Button Styling --- */

.explore-button-container {

    text-align: right; /* बटन को दाईं ओर रखना */

    margin-top: 30px;

    

    /* डेस्कटॉप पर बटन को ग्रिड के बाहर रखने के लिए Flexbox का उपयोग */

    display: flex;

    justify-content: flex-end;

}



.explore-button {

    background-color: #f0e0ff; /* हल्का बैंगनी बटन BG */

    color: var(--primary-purple); 

    border: 1px solid var(--primary-purple);

    padding: 12px 25px;

    border-radius: 8px;

    font-size: 1rem;

    font-weight: 600;

    cursor: pointer;

    transition: background-color 0.3s, transform 0.2s;

}



.explore-button:hover {

    background-color: #e2caff; /* हॉवर पर गहरा */

    transform: translateY(-2px);

}





/* --- Media Queries for FULL RESPONSIVENESS (1 to 5/6 Columns) --- */



/* Mobile (<= 576px) */

@media (max-width: 576px) {

    .materials-grid {

        /* 1 कॉलम */

        grid-template-columns: 1fr;

    }

    .section-header-study {

        text-align: center;

    }

    .title-underline-study {

        margin-left: auto;

        margin-right: auto;

    }

    .explore-button-container {

        justify-content: center; /* मोबाइल पर बटन को सेंटर करें */

    }

}



/* Tablet (577px - 992px) */

@media (min-width: 577px) and (max-width: 992px) {

    .materials-grid {

        /* 3 कॉलम */

        grid-template-columns: repeat(3, 1fr);

    }

    .explore-button-container {

        justify-content: center;

    }

}



/* Desktop (>= 993px) */

@media (min-width: 993px) {

    .materials-grid {

        /* 5 कॉलम प्रति पंक्ति (जैसा इमेज में है) */

        grid-template-columns: repeat(5, 1fr);

    }



    /* स्टडी मटेरियल इमेज में 10 कार्ड्स हैं (5x2) */

    /* यदि आप 11 कार्ड (5x2 + 1) दिखाना चाहते हैं: */

    

    /* यदि 11 कार्ड हों, तो 11वां कार्ड नई रो में 1st कॉलम में आएगा। */

    /* 10 कार्ड के बाद 11वां कार्ड: */

    .material-card:nth-child(11) {

        /* 5 कॉलम ग्रिड में, इसे सेंटर करने के लिए 3rd कॉलम से शुरू करें */

        grid-column: 3; 

        /* 12वां कार्ड (यदि होता तो) 4th कॉलम में आता */

    }

    

    /* क्योंकि आपके इमेज में 10 कार्ड हैं, हम 5 कॉलम ग्रिड को ही रखेंगे।

       (आपके कोड में 11 कार्ड हैं, इसलिए ऊपर वाला CSS 11वें कार्ड को सेंटर करेगा।) */



    .explore-button-container {

        /* ग्रिड के अंत में बटन को लगाने के लिए */

        grid-column: 1 / span 5; 

        margin-top: 30px;

    }

}

/* --- Section Header and Title --- */
.free-videos-section {
   
    margin: 50px auto;
    padding: 0 15px;
}

.section-header-videos {
    text-align: left;
    margin-bottom: 30px;
}

.section-title-videos {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    margin: 0;
}

.title-underline-videos {
    width: 160px;
    height: 4px;
    background-color: var(--accent-yellow);
    margin-top: 5px;
    border-radius: 2px;
}

/* --- Videos Grid Layout (Responsive) --- */
.videos-grid {
    display: grid;
    /* सभी स्क्रीन साइज़ पर प्रतिक्रियाशील कॉलम */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 25px;
}

/* --- Video Card Styles (Best UI/UX) --- */
.video-card {
    background-color: var(--card-bg);
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    text-decoration: none;
    color: var(--text-dark);
    cursor: pointer;
    overflow: hidden;
    
    transition: transform 0.3s ease-out, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
}

.video-card:hover {
    transform: translateY(-8px); /* आकर्षक हॉवर इफ़ेक्ट */
    box-shadow: var(--hover-shadow);
}

.video-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 आस्पेक्ट रेश्यो */
    background-color: #f0f0f0;
    overflow: hidden;
}

.video-thumbnail-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3rem;
    color: #ffffff;
    background-color: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.video-info {
    padding: 15px;
    flex-grow: 1; 
}

.video-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 8px;
    line-height: 1.4;
    max-height: 4.2em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.video-meta {
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    max-height: 2.8em; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* --- Explore Button --- */
.explore-videos-button-container {
    text-align: center; 
    margin-top: 40px;
}

.explore-videos-button {
    background-color: var(--primary-purple);
    color: #ffffff;
    border: none;
    padding: 12px 30px;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.explore-videos-button:hover {
    background-color: #55167c;
    transform: translateY(-2px);
}

/* --- Media Queries --- */
@media (max-width: 480px) {
    .section-title-videos {
        font-size: 2rem;
    }
}


/* --- Section Header --- */

.our-impact-section-v2 {

   

    margin: 60px auto;

    padding: 0 15px;

}



.section-header-impact-v2 {

    text-align: left;

    margin-bottom: 40px;

}



.section-title-impact-v2 {

    font-size: clamp(2rem, 5vw, 3rem);

    font-weight: 700;

    margin: 0;

}



.title-underline-impact-v2 {

    width: 140px;

    height: 4px;

    background-color: var(--accent-yellow);

    margin-top: 5px;

    border-radius: 2px;

}



/* --- Mobile Scroll Container --- */

.impact-grid-container-scroll {

    overflow-x: auto; /* क्षैतिज स्क्रॉलिंग सक्षम करें */

    padding-bottom: 20px; /* स्क्रॉलबार के लिए जगह */

}



.impact-grid-v2 {

    display: flex; /* Flexbox का उपयोग स्क्रॉलिंग के लिए */

    gap: 30px;

    padding: 0 10px;

}



/* --- Hexagon Base Style --- */

.hexagon {

    position: relative;

    width: 180px; 

    height: 104px; 

    background: var(--hex-blue); 

    margin: 52px 0; /* ऊर्ध्वाधर अलाइनमेंट के लिए */

    box-shadow: var(--card-shadow);

    /* एनीमेशन के लिए ट्रांज़िशन */

    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s;

    flex-shrink: 0; /* Flex item को छोटा होने से रोकें */

}



.hexagon:before,

.hexagon:after {

    content: "";

    position: absolute;

    width: 0;

    border-left: 90px solid transparent; 

    border-right: 90px solid transparent; 

}



/* Hexagon Shape Creation (Color will be inherited from parent) */

.hexagon:before {

    bottom: 100%;

    border-bottom: 52px solid var(--hex-blue); 

}



.hexagon:after {

    top: 100%;

    border-top: 52px solid var(--hex-blue); 

}



/* --- Content & Hover Animation --- */

.hexagon-content {

    /* कंटेंट स्टाइलिंग वही रहेगी */

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    display: flex; flex-direction: column;

    justify-content: center; align-items: center;

    text-align: center;

    color: #ffffff;

    padding: 5px;

}



.impact-value {

    font-size: 2.2rem; font-weight: 700; margin: 0; line-height: 1.2;

}



.impact-label {

    font-size: 0.95rem; margin: 0; opacity: 0.9; line-height: 1.3;

}



/* --- Hover Animation (3D Tilt) --- */

.impact-card-v2:hover .hexagon {

    transform: translateY(-10px) rotateY(5deg) scale(1.05); /* 3D tilt और बड़ा करें */

    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);

}



/* --- Specific Colors (Dynamic Updates for Before/After) --- */

.hex-blue { background: var(--hex-blue); }

.hex-blue:before { border-bottom-color: var(--hex-blue); }

.hex-blue:after { border-top-color: var(--hex-blue); }



.hex-orange-v2 { background: var(--hex-orange-v2); }

.hex-orange-v2:before { border-bottom-color: var(--hex-orange-v2); }

.hex-orange-v2:after { border-top-color: var(--hex-orange-v2); }



.hex-green-v2 { background: var(--hex-green-v2); }

.hex-green-v2:before { border-bottom-color: var(--hex-green-v2); }

.hex-green-v2:after { border-top-color: var(--hex-green-v2); }



.hex-purple-v2 { background: var(--hex-purple-v2); }

.hex-purple-v2:before { border-bottom-color: var(--hex-purple-v2); }

.hex-purple-v2:after { border-top-color: var(--hex-purple-v2); }



.hex-red-v2 { background: var(--hex-red-v2); }

.hex-red-v2:before { border-bottom-color: var(--hex-red-v2); }

.hex-red-v2:after { border-top-color: var(--hex-red-v2); }





/* --- Media Queries for Responsiveness --- */



/* Desktop/Large Screens: Flexbox becomes Grid */

@media (min-width: 769px) {

    .impact-grid-container-scroll {

        overflow-x: hidden; /* डेस्कटॉप पर स्क्रॉलिंग छिपाएँ */

        padding-bottom: 0;

    }

 
    .impact-grid-v2 {

        display: grid; /* डेस्कटॉप पर ग्रिड लेआउट */

        grid-template-columns: repeat(5, 1fr); /* 5 कॉलम */

        gap: 20px;

        padding: 0;

        margin-top: 50px; /* हेक्सागन को सही से अलाइन करने के लिए */

        justify-items: center; /* सेंटर करने के लिए */

    }

    

    .impact-card-v2 {

        /* ग्रिड में कार्ड को सेंटर करने के लिए */

        display: flex;

        justify-content: center;

        align-items: center;

    }

    

    .hexagon {

        margin: 0; /* ग्रिड में मार्जिन हटाएँ */

    }

}



/* Tablet (Small) and Mobile (Flexbox Scroll) */

@media (max-width: 768px) {

    .impact-grid-v2 {

        /* सुनिश्चित करें कि सभी कार्ड एक ही पंक्ति में रहें और स्क्रॉल हों */

        width: max-content; 

        padding-bottom: 10px;

    }

    .impact-card-v2 {

        /* हेक्सागन को एक साथ लाने के लिए */

        margin-right: -40px; 

    }

    .section-header-impact-v2 {

        text-align: center;

    }

    .title-underline-impact-v2 {

        margin-left: auto;

        margin-right: auto;

    }

}


/* --- Section Header --- */

.why-choose-section {

 

    margin: 60px auto;

    padding: 0 15px;

}



.section-header-choose {

    text-align: left;

    margin-bottom: 40px;

}



.section-title-choose {

    font-size: clamp(2rem, 5vw, 3rem);

    font-weight: 700;

    margin: 0;

}



.title-underline-choose {

    width: 160px;

    height: 4px;

    background-color: var(--accent-yellow);

    margin-top: 5px;

    border-radius: 2px;

}



/* --- Choose Grid (CSS Grid for responsiveness) --- */

.choose-grid {

    display: grid;

    gap: 30px; /* कार्ड के बीच की दूरी */

    justify-content: center;

}



/* --- Choose Card Styles --- */

.choose-card {

    background-color: var(--card-bg);

    padding: 25px;

    border-radius: 16px;

    box-shadow: var(--card-shadow);

    text-align: left;

    transition: transform 0.3s ease-out, box-shadow 0.3s;

    

    display: flex;

    flex-direction: column;

    align-items: flex-start; /* इमेज के अनुसार टेक्स्ट को बाईं ओर अलाइन करें */

}



.choose-card:hover {

    transform: translateY(-8px);

    box-shadow: var(--hover-shadow);

}



/* Icon Box */

.icon-box-choose {

    border-radius: 12px;

    width: 70px;

    height: 70px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



.icon-box-choose i {

    font-size: 2.5rem;

}



/* Icon Box Specific Colors (matching the image) */

.bg-green-light { background-color: var(--icon-bg-green); }

.bg-green-light i { color: var(--icon-color-green); }



.bg-blue-light { background-color: var(--icon-bg-blue); }

.bg-blue-light i { color: var(--icon-color-blue); }



.bg-pink-light { background-color: var(--icon-bg-pink); }

.bg-pink-light i { color: var(--icon-color-pink); }



.bg-light-green-light { background-color: var(--icon-bg-light-green); }

.bg-light-green-light i { color: var(--icon-color-light-green); }





.choose-card-title {

    font-size: 1.25rem;

    font-weight: 600;

    margin-top: 0;

    margin-bottom: 10px;

    line-height: 1.4;

}



.choose-card-description {

    font-size: 0.95rem;

    color: var(--text-muted);

    margin: 0;

}



/* --- Media Queries for Full Responsiveness --- */



/* Mobile (<= 576px) */

@media (max-width: 576px) {

    .choose-grid {

        grid-template-columns: 1fr; /* 1 कॉलम */

    }

    .section-header-choose {

        text-align: center;

    }

    .title-underline-choose {

        margin-left: auto;

        margin-right: auto;

    }

    .choose-card {

        align-items: center; /* मोबाइल पर कार्ड को सेंटर करें */

        text-align: center;

    }

}



/* Tablet (577px - 992px) */

@media (min-width: 577px) and (max-width: 992px) {

    .choose-grid {

        grid-template-columns: repeat(2, 1fr); /* 2 कॉलम */

    }

}



/* Desktop (>= 993px) */

@media (min-width: 993px) {

    .choose-grid {

        grid-template-columns: repeat(4, 1fr); /* 4 कॉलम (जैसा इमेज में है) */

    }

}


/* --- MODERN 4 CHANNEL SECTION STYLES --- */

/* Section Background and Padding */
.multi-channel-section {
    padding: 80px 20px;
    background-color: #f8f9fa; /* हल्का ग्रे बैकग्राउंड */
    text-align: center;
}

.multi-channel-section .container {
   
    margin: 0 auto;
}

/* Reusing and Defining Headers (if not already done) */
.multi-channel-section .section-title {
    font-size: 2.5em;
    font-weight: 700;
    color: var(--pw-dark-bg);
    margin-bottom: 10px;
}

.multi-channel-section .section-title strong {
    color: var(--pw-blue); /* Primary color highlight */
}

.multi-channel-section .section-subtitle {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 50px;
}

/* CSS GRID Layout for 4 Channels */
.channel-grid {
    display: grid;
    /* Desktop: 4 columns */
    grid-template-columns: repeat(4, 1fr);
    gap: 30px; /* Cards के बीच की दूरी */
    margin: 0 auto;
}

/* Individual Channel Card Styles */
.channel-card-item {
    background-color: var(--pw-white);
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    display: flex; /* Ensures card item fills the grid cell */
}

/* Card Hover Effect: Lifts the card */
.channel-card-item:hover {
    transform: translateY(-7px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
}

.channel-link-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

/* Logo Container (The Main Focus) */
.channel-logo-container {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--pw-white);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
    border: 4px solid; /* Border will be colored by specific classes */
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

/* Specific Border Colors for Visual Distinction */
.border-red { border-color: var(--hex-red-v2); }
.border-blue { border-color: var(--hex-blue); }
.border-green { border-color: var(--hex-green-v2); }
.border-purple { border-color: var(--hex-purple-v2); }


.channel-logo {
    width: 90%;
    height: 90%;
    object-fit: contain;
    border-radius: 50%; /* If logo is not circular */
}

/* Channel Details */
.channel-name {
    font-size: 1.3em;
    font-weight: 600;
    color: var(--pw-dark-bg);
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
}

.channel-stats {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 20px;
}

/* Call to Action Button */
.cta-button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: var(--pw-blue); /* Primary background color */
    color: var(--pw-white);
    border-radius: 6px;
    font-size: 1em;
    font-weight: 500;
    transition: background-color 0.3s ease;
    text-align: center;
}

.channel-card-item:hover .cta-button {
    background-color: #4a2d8e; /* Darker primary color on hover */
}


/* --- FULL RESPONSIVENESS (Media Queries) --- */

/* Tablet (1024px और उससे कम) - 2 Columns */
@media (max-width: 1024px) {
    .channel-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 25px;
    }
}

/* Mobile (576px और उससे कम) - 1 Column */
@media (max-width: 576px) {
    .multi-channel-section {
        padding: 50px 15px;
    }
    
    .multi-channel-section .section-title {
        font-size: 2em;
    }

    .multi-channel-section .section-subtitle {
        font-size: 1em;
        margin-bottom: 30px;
    }

    .channel-grid {
        grid-template-columns: 1fr; /* एक कॉलम */
        gap: 20px;
    }
    
    .channel-link-box {
        padding: 25px 20px;
    }
}

/* --- Section Container and Layout --- */

.app-section {

    background-color: var(--light-bg-color);

    padding: 80px 15px; /* ऊर्ध्वाधर पैडिंग */

    overflow: hidden; /* 3D इफ़ेक्ट को कंटेन करने के लिए */

}



.app-content-wrapper {
     max-width: 1400px;
  

    margin: 0 auto;

    

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px; /* कॉलम के बीच की दूरी */

}



/* --- Left Side: Text Content --- */

.app-text-content {

    flex: 1;

    min-width: 400px; /* डेस्कटॉप पर टेक्स्ट के लिए न्यूनतम चौड़ाई */

    max-width: 600px;

}



.app-main-title {

    font-size: clamp(2rem, 5vw, 3rem);

    font-weight: 700;

    margin-top: 0;

    margin-bottom: 20px;

    color: var(--primary-text);

}



.app-description {

    font-size: 1.1rem;

    color: var(--link-color);

    margin-bottom: 30px;

}



/* --- Download Buttons --- */

.app-download-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}



.download-btn {

    display: flex;

    align-items: center;

    background-color: var(--text-dark); /* काला/ग्रे बैकग्राउंड जैसा इमेज में है */

    color: #ffffff;

    padding: 10px 20px;

    border-radius: 8px;

    text-decoration: none;

    transition: background-color 0.3s, transform 0.2s;

    min-width: 170px;

}



.download-btn:hover {

    background-color: #000000;

    transform: translateY(-2px);

}



.download-btn i {

    font-size: 1.8rem;

    margin-right: 10px;

}



.download-btn div {

    display: flex;

    flex-direction: column;

    text-align: left;

}



.download-btn span {

    font-size: 0.75rem;

    line-height: 1;

    opacity: 0.8;

}



.download-btn strong {

    font-size: 1.1rem;

    font-weight: 600;

    line-height: 1;

}



/* --- Right Side: Image Mockup --- */

.app-image-mockup {

    flex: 1;

    display: flex;

    justify-content: flex-end; /* इमेज को दाईं ओर अलाइन करें */

    min-height: 500px; /* डेस्कटॉप पर पर्याप्त ऊंचाई सुनिश्चित करने के लिए */

    

    /* यहाँ 3D इफ़ेक्ट के लिए CSS जोड़ा जा सकता है */

    /* चूंकि इमेज पहले से ही 3D है, हम इसे बस डिस्प्ले करेंगे */

    /* नोट: यह केवल एक प्लेसहोल्डर है। आपको यहाँ अपनी 3D Mockup इमेज डालनी होगी। */

    background-size: contain;

    background-repeat: no-repeat;

    background-position: center right;

}



/* यदि आप HTML में <img> टैग का उपयोग करते हैं तो: */

.app-image-mockup img {

    max-width: 100%;

    height: auto;

}





/* --- Media Queries for Full Responsiveness --- */



/* Tablet and Mobile (<= 992px) */

@media (max-width: 992px) {

    .app-section {

        padding: 50px 15px;

    }

    

    .app-content-wrapper {

        flex-direction: column; /* कॉलम को एक के ऊपर एक ढेर करें */

        align-items: center;

        gap: 30px;

    }



    .app-text-content {

        min-width: unset;

        max-width: 100%;

        text-align: center;

    }

    

    .app-main-title, .app-description {

        text-align: center;

    }



    .app-download-buttons {

        justify-content: center; /* बटन को सेंटर करें */

    }



    .app-image-mockup {

        width: 100%;

        min-height: 350px; /* मोबाइल पर ऊंचाई कम करें */

        background-position: center center; /* मोबाइल पर इमेज को सेंटर करें */

    }

}



/* Small Mobile (<= 480px) */

@media (max-width: 480px) {

    .download-btn {

        width: 100%;

        justify-content: center;

    }

}