/* ==============================
   BODY
================================*/

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background: #f8f9fc;
}

/* ==============================
   SECTION (White Background)
================================*/

.popular-section {
    padding: 20px 0 40px 0;
    background: #ffffff;   /* White background */
    overflow: hidden;
}

.container {
    width: 88%;
    margin: auto;
}

/* ==============================
   TITLE
================================*/

.section-title {
    text-align: center;
    margin-bottom: 50px;
    
}

.section-title h2 {
    font-size: 34px;
    font-weight: 700;
    color: #411E59;
    font-family: 'Playfair Display', serif;
}

.section-title p {
    font-size: 15px;
    color: #5B297C;
}

/* ==============================
   GRID
================================*/

.popular-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

/* ==============================
   CARD DESIGN (Keep Same UI Size)
================================*/

.popular-card {
    padding: 35px 20px;  /* same height feel */
    border-radius: 14px;
    text-align: center;

    /* Gradient from your second code */
    background: linear-gradient(135deg,
        #bfd5f0,
        #f4d0d0,
        rgba(124, 58, 237, 0.12),
        #cd91f3
    );

    color: #411E59;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10);
    transition: 0.4s ease;
}

/* Hover effect */

.popular-card:hover {
    transform: translateY(-8px) scale(1.04);
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
}

/* ICON */

.popular-card .icon {
    font-size: 42px;
    margin-bottom: 15px;
}

/* TEXT */

.popular-card h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0;
}

/* ==============================
   ROW ANIMATION
================================*/

/* First half move left */

.popular-card:nth-child(n+1):nth-child(-n+4) {
    animation: moveLTR 6s ease-in-out infinite alternate;
}

/* 2nd row (5–8) - Right to Left */
.popular-card:nth-child(n+5):nth-child(-n+8) {
    animation: moveRTL 6s ease-in-out infinite alternate;
}

/* 3rd row (9–12) - Left to Right */
.popular-card:nth-child(n+9):nth-child(-n+12) {
    animation: moveLTR 6s ease-in-out infinite alternate;
}

/* 4th row (13–16) - Right to Left */
.popular-card:nth-child(n+13):nth-child(-n+16) {
    animation: moveRTL 6s ease-in-out infinite alternate;
}


@keyframes moveLTR {
    0%   { transform: translateX(-15px); }
    100% { transform: translateX(15px); }
}

@keyframes moveRTL {
    0%   { transform: translateX(15px); }
    100% { transform: translateX(-15px); }
}
/* ==============================
   MOBILE ALTERNATE ANIMATION
================================*/

@media (max-width: 992px) {

    .popular-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Mobile alternate left-right */

    .popular-card:nth-child(odd) {
        animation: moveMobileLTR 4s ease-in-out infinite alternate;
    }

    .popular-card:nth-child(even) {
        animation: moveMobileRTL 4s ease-in-out infinite alternate;
    }
}

/* Extra small screens (1 column) */

@media (max-width: 576px) {

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

    .popular-card:nth-child(odd) {
        animation: moveMobileLTR 4s ease-in-out infinite alternate;
    }

    .popular-card:nth-child(even) {
        animation: moveMobileRTL 4s ease-in-out infinite alternate;
    }
}

/* Mobile keyframes */

@keyframes moveMobileLTR {
    0%   { transform: translateX(-10px); }
    100% { transform: translateX(10px); }
}

@keyframes moveMobileRTL {
    0%   { transform: translateX(10px); }
    100% { transform: translateX(-10px); }
}