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

@media (max-width:992px){
.hero-container,
.about-wrapper{
    grid-template-columns:1fr;
    text-align:center;
}
}


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

@media (max-width:768px){

    .menu-toggle{
        display:block;
    }

    .navbar{
        display:none;
        position:absolute;
        top:100%;
        left:0;
        width:100%;
       background:var(--color-surface);
        border-top:1px solid #ddd;
        padding:20px 0;
    }

    .navbar.show{
        display:block;
    }

    .nav-list{
        flex-direction:column;
        gap:20px;
        align-items:center;
    }

}


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

@media (max-width:576px){
.hero-title{

    font-size:2.3rem;

}

.section-header h2{

    font-size:2rem;

}
}
/*==================================
    CERTIFICATIONS RESPONSIVE
===================================*/

@media(max-width:768px){

.certifications-grid{

    grid-template-columns:1fr;

}

.certificate-buttons{

    flex-direction:column;

}

.certificate-buttons .btn{

    width:100%;

}

}

/* ==========================================
   GALLERY RESPONSIVE
========================================== */

@media (max-width: 768px) {

    /* Gallery images */

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-card {
        width: 100%;
    }


    /* Video gallery */

    .video-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .video-card {
        width: 100%;
    }

    .video-card video {
        width: 100%;
        aspect-ratio: 16 / 9;
    }


    /* Gallery hero */

    .gallery-hero {
        padding: 70px 0 50px;
    }

    .gallery-hero h1 {
        font-size: 2.3rem;
    }

    .gallery-hero-text {
        padding: 0 15px;
        font-size: 0.95rem;
    }


    /* Gallery filters */

    .gallery-filter .container {
        gap: 10px;
        padding: 0 15px;
    }

    .gallery-btn {
        padding: 10px 16px;
        font-size: 0.9rem;
    }

}

/* ==========================================
   GALLERY SMALL MOBILE
========================================== */

@media (max-width: 576px) {

    .gallery-grid-section,
    .video-gallery,
    .gallery-certificates,
    .behind-scenes,
    .future-gallery {
        padding: 60px 0;
    }

    .gallery-card img {
        height: auto;
        min-height: 280px;
    }

    .video-content {
        padding: 16px;
    }

    .video-content h3 {
        font-size: 1rem;
    }

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

}