/* =========================================
   LARGE DESKTOP
   1400px+
========================================= */

@media (min-width: 1400px) {

    .header {
        padding-left: 7%;
        padding-right: 7%;
    }

    .video-grid {
        gap: 30px;
    }

}



/* =========================================
   DESKTOP / LAPTOP
   1101px - 1399px
========================================= */

@media (max-width: 1399px) {

    .hero,
    .container {
        width: 92%;
    }

}



/* =========================================
   SMALL LAPTOP / TABLET
   801px - 1100px
========================================= */

@media (max-width: 1100px) {

    .video-grid {

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

    }

    .section-title {
        font-size: 34px;
    }

}



/* =========================================
   TABLET
   551px - 800px
========================================= */

@media (max-width: 800px) {

    .header {

        min-height: 75px;

        padding:
            12px 25px;

    }


    .logo {

        width: 45px;
        height: 45px;

        border-radius: 13px;

        font-size: 18px;

    }


    .site-name {

        font-size: 23px;

    }


    .header-btn {

        padding:
            12px 20px;

        font-size: 14px;

    }


    .hero {

        margin-top: 35px;

    }


    .announcement {

        padding:
            14px 18px;

        font-size: 15px;

    }


    .hero-title {

        font-size: 25px;

    }


    .container {

        margin-top: 50px;

    }


    .section-title {

        font-size: 31px;

    }


    .video-grid {

        gap: 20px;

    }


    .image-box {

        aspect-ratio: 4 / 3;

    }


    .footer-container {

        gap: 30px;

    }

}



/* =========================================
   MOBILE
   551px এর নিচে
========================================= */

@media (max-width: 550px) {

    .header {

        padding:
            12px 16px;

    }


    .logo {

        width: 43px;
        height: 43px;

        font-size: 17px;

    }


    .site-name {

        font-size: 21px;

    }


    /* Mobile-এ header button hide */

    .header-btn {

        display: none;

    }


    .hero {

        width: calc(100% - 24px);

        margin-top: 28px;

    }


    .announcement {

        padding:
            13px 14px;

        border-radius: 20px;

        font-size: 13px;

    }


    .dot {

        width: 8px;
        height: 8px;

        margin-right: 8px;

    }


    .hero-title {

        margin-top: 25px;

        font-size: 21px;

    }


    .container {

        width: calc(100% - 24px);

        margin-top: 45px;

    }


    .small-title {

        font-size: 12px;

        letter-spacing: 4px;

    }


    .section-title {

        margin-bottom: 25px;

        font-size: 27px;

    }


    /* Mobile = 1 column */

    .video-grid {

        grid-template-columns: 1fr;

        gap: 20px;

    }


    .video-card {

        border-radius: 17px;

    }


    .image-box {

        aspect-ratio: 16 / 10;

        min-height: 230px;

    }


    .play-button {

        width: 58px;
        height: 58px;

        font-size: 22px;

    }


    .card-content {

        padding: 15px;

    }


    .card-title {

        font-size: 16px;

    }


    .watch-btn {

        min-height: 44px;

    }


    .more-section {

        margin-top: 35px;

    }


    .watch-more {

        width: 100%;

        max-width: 300px;

    }


    .footer {

        margin-top: 60px;

        padding:
            45px 16px 22px;

    }


    .footer-container {

        grid-template-columns: 1fr;

        gap: 30px;

    }


    .footer-text {

        max-width: 100%;

    }

}



/* =========================================
   SMALL MOBILE
   380px এর নিচে
========================================= */

@media (max-width: 380px) {

    .site-name {

        font-size: 19px;

    }


    .logo {

        width: 40px;
        height: 40px;

        font-size: 16px;

    }


    .hero-title {

        font-size: 19px;

    }


    .section-title {

        font-size: 24px;

    }


    .image-box {

        min-height: 210px;

    }


    .card-title {

        font-size: 15px;

    }


    .watch-btn {

        font-size: 14px;

    }

}



/* =========================================
   VERY SMALL MOBILE
   320px
========================================= */

@media (max-width: 320px) {

    .header {

        padding:
            10px;

    }


    .hero,
    .container {

        width: calc(100% - 18px);

    }


    .site-name {

        font-size: 18px;

    }


    .announcement {

        font-size: 12px;

    }


    .section-title {

        font-size: 22px;

    }


    .image-box {

        min-height: 195px;

    }

}