/*==================================================
RESPONSIVE DESIGN
African Child Sports Academy
==================================================*/

/* ==========================
Large Tablets & Small Laptops
========================== */

@media (max-width:1200px){

    .container{
        width:92%;
    }

    .hero-content h1{
        font-size:60px;
    }

    .welcome-grid,
    .programmes-grid,
    .success-grid{

        grid-template-columns:1fr;
        gap:50px;

    }

    .mission-grid,
    .features-grid{

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

    }

    .leadership-grid{

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

    }

    .gallery-grid{

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

    }

    .gallery-large{

        grid-column:span 2;

    }

}

/* ==========================
Tablets
========================== */

@media (max-width:992px){

    .nav-links{

        position:fixed;

        top:90px;

        right:-100%;

        width:280px;

        height:calc(100vh - 90px);

        background:#0B4EA2;

        flex-direction:column;

        padding:40px;

        gap:30px;

        transition:.4s;

    }

    .nav-links.show{

        right:0;

    }

    .menu-toggle{

        display:block;

    }

    .hero-content{

        text-align:center;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .mission-grid,
    .features-grid,
    .stats,
    .contact-grid,
    .partners-grid{

        grid-template-columns:1fr 1fr;

    }

}

/* ==========================
Mobile Phones
========================== */

@media (max-width:768px){

    .section{

        padding:80px 0;

    }

    .hero{

        height:90vh;

    }

    .hero-content h1{

        font-size:42px;

    }

    .hero-content p{

        font-size:17px;

    }

    .hero-buttons{

        flex-direction:column;

        align-items:center;

    }

    .btn{

        width:100%;
        max-width:280px;

    }

    .mission-grid,
    .features-grid,
    .leadership-grid,
    .gallery-grid,
    .stats,
    .contact-grid,
    .partners-grid{

        grid-template-columns:1fr;

    }

    .gallery-large{

        grid-column:span 1;

    }

    .footer-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .welcome-content h2,
    .programmes-content h2,
    .success-content h2,
    .section-title h2{

        font-size:34px;

    }

    .slider-controls{

        display:none;

    }

}

/* ==========================
Small Phones
========================== */

@media (max-width:480px){

    .logo img{

        width:50px;
        height:50px;

    }

    .logo-text h2{

        font-size:18px;

    }

    .logo-text span{

        font-size:12px;

    }

    .hero-content h1{

        font-size:34px;

    }

    .hero-content h4{

        font-size:14px;

        letter-spacing:2px;

    }

    .hero-content p{

        font-size:16px;

    }

    .section-title h2{

        font-size:28px;

    }

    .partner h2{

        font-size:34px;

    }

}

/*=====================================
ABOUT RESPONSIVE
=====================================*/

@media(max-width:991px){

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

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

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

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

.hero-content h1{
    font-size:2.8rem;
}

}

@media(max-width:768px){

.focus-grid,
.management-grid{
    grid-template-columns:1fr;
}

.hero-content h1{
    font-size:2.2rem;
}

.hero-content p{
    font-size:1rem;
}

.about-text h3{
    font-size:1.6rem;
}

}

/*====================================
    CONTACT PAGE RESPONSIVE DESIGN
====================================*/

/*==============================
    Large Tablets
==============================*/

@media (max-width: 992px){

    .contact-hero{
        padding:100px 0;
    }

    .contact-hero h1{
        font-size:2.6rem;
    }

    .contact-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .contact-info{
        padding:35px;
    }

    .map-section{
        padding:0;
        background:transparent;
    }

    .map-container iframe{
        width:100%;
        height:500px;
    }

}


/*==============================
    Tablets
==============================*/

@media (max-width:768px){

    .contact-hero{
        padding:90px 20px;
    }

    .contact-hero h1{
        font-size:2.2rem;
    }

    .contact-hero p{
        font-size:1rem;
    }

    .contact-section{
        padding:60px 0;
    }

    .contact-info{
        padding:30px;
    }

    .info-box{
        gap:15px;
    }

    .info-box i{
        width:55px;
        height:55px;
        font-size:20px;
    }

    .social-section{
        padding:60px 0;
    }

    .social-icons{
        gap:18px;
    }

    .social-icons a{
        width:55px;
        height:55px;
        font-size:20px;
    }

    .map-container iframe{
        height:400px;
    }

}


/*==============================
    Mobile Phones
==============================*/

@media (max-width:576px){

    .contact-hero{
        padding:70px 15px;
    }

    .contact-hero h1{
        font-size:2rem;
    }

    .contact-hero p{
        font-size:.95rem;
        line-height:1.7;
    }

    .contact-info{
        padding:25px;
    }

    .contact-info h2{
        font-size:1.8rem;
    }

    .contact-info > p{
        margin-bottom:25px;
    }

    .info-box{
        gap:15px;
        margin-bottom:25px;
    }

    .info-box i{
        width:50px;
        height:50px;
        font-size:18px;
    }

    .info-box h4{
        font-size:1rem;
    }

    .info-box p{
        font-size:.95rem;
    }

    .social-icons{
        gap:15px;
    }

    .social-icons a{
        width:50px;
        height:50px;
        font-size:18px;
    }

    .map-container iframe{
        height:320px;
    }

}


/*==============================
    Small Phones
==============================*/

@media (max-width:400px){

    .contact-hero h1{
        font-size:1.8rem;
    }

    .contact-hero p{
        font-size:.9rem;
    }

    .contact-info{
        padding:20px;
    }

    .info-box{
        flex-direction:column;
        align-items:flex-start;
        gap:12px;
    }

    .info-box i{
        width:45px;
        height:45px;
        font-size:16px;
    }

    .social-icons{
        flex-wrap:wrap;
    }

    .social-icons a{
        width:45px;
        height:45px;
        font-size:16px;
    }

    .map-container iframe{
        height:260px;
    }

}