/* ==========================================
   AVYAKT VANI COLLECTION
========================================== */

.avyakt-section{

    padding:60px 20px;

    background:#f5f7fb;

}

.avyakt-section .container{

    max-width:1200px;

    margin:0 auto;

}

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

.avyakt-section h1{

    text-align:center;

    font-size:42px;

    color:#7a2f2f;

    margin-bottom:25px;

}

.avyakt-section > .container > p{

    max-width:900px;

    margin:0 auto 50px;

    text-align:center;

    font-size:20px;

    line-height:1.8;

    color:#555;

}

/* ==========================================
   LANGUAGE CARD
========================================== */

.language-card{

    background:#ffffff;

    padding:35px;

    margin-bottom:40px;

    border-radius:18px;

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

    border-top:6px solid #ff9800;

}

.language-card h2{

    font-size:30px;

    color:#333;

    margin-bottom:25px;

}

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

.year-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit, minmax(110px, 1fr));

    gap:15px;

}

/* ==========================================
   YEAR LINK
========================================== */

.year-link{

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    background:linear-gradient(
        135deg,
        #ff9800,
        #ff6f00
    );

    color:#ffffff;

    font-size:22px;

    font-weight:600;

    padding:18px 10px;

    border-radius:12px;

    transition:all .3s ease;

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

}

.year-link:hover{

    transform:translateY(-5px);

    background:linear-gradient(
        135deg,
        #ffb74d,
        #f57c00
    );

    box-shadow:0 10px 20px rgba(0,0,0,.20);

}

/* ==========================================
   TABLET
========================================== */

@media (max-width:768px){

    .avyakt-section{

        padding:40px 15px;

    }

    .avyakt-section h1{

        font-size:32px;

        line-height:1.3;

    }

    .avyakt-section > .container > p{

        font-size:18px;

    }

    .language-card{

        padding:25px;

    }

    .language-card h2{

        font-size:24px;

    }

    .year-grid{

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

        gap:12px;

    }

    .year-link{

        font-size:18px;

        padding:16px 8px;

    }

}

/* ==========================================
   MOBILE
========================================== */

@media (max-width:480px){

    .avyakt-section h1{

        font-size:28px;

    }

    .language-card{

        padding:20px;

        border-radius:14px;

    }

    .language-card h2{

        font-size:22px;

        line-height:1.4;

    }

    .year-grid{

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

    }

    .year-link{

        font-size:17px;

        padding:14px 6px;

    }

}