/* =====================================================
   RESPONSIVE DESIGN
   Fondation Website
===================================================== */



/* =====================================================
   TABLETTES
   (max-width: 991px)
===================================================== */


@media (max-width: 991px) {



    /* Navbar */

    .custom-navbar {

        background: var(--primary-color);

        padding:15px 0;

    }



    .navbar-nav {


        padding-top:20px;


    }



    .navbar-nav .nav-link {


        margin-left:0;

        padding:12px 0;


    }




    /* Hero */


    .hero-section {


        text-align:center;


    }



    .hero-section h1 {


        font-size:48px;


    }



    .hero-section p {


        margin:auto;

        font-size:17px;


    }



    .hero-section .d-flex {


        justify-content:center;


    }





    /* About */


    .about-image-wrapper {


        margin-bottom:40px;


    }




    .about-experience {


        right:0;


    }





    /* Sections */


    .section-title {


        font-size: 25px;


    }



    /* CTA */


    .cta-box {


        padding:45px 35px;


        text-align:center;


    }



    .cta-box h2 {


        font-size:32px;


    }



}






/* =====================================================
   MOBILE
   (max-width: 767px)
===================================================== */


@media (max-width:767px) {



    /* Global */


    .section-title {


        font-size:25px;


    }




    .section-subtitle {


        font-size: 30px;


    }




    /* Hero */


    .hero-section {


        min-height:90vh;


    }



    .hero-section h1 {


        font-size:38px;


    }




    .hero-section p {


        font-size:15px;


    }




    .hero-section .btn {


        width:100%;


        margin-bottom:10px;


    }






    /* About */


    .about-image-wrapper img {


        min-height:350px;


    }




    .about-experience {


        width:120px;


        height:120px;


        bottom:20px;


    }




    .about-experience h3 {


        font-size:30px;


    }





    /* Statistiques */


    .about-stat {


        text-align:center;

        border-left:none;

        border-bottom:3px solid var(--secondary-color);


    }



    .about-stat h3 {


        font-size:28px;


    }






    /* Services */


    .service-card {


        padding:30px 25px;


    }






    /* Activities */


    .activity-image img {


        height:220px;


    }

    .activity-info-box {

        flex-direction:column;

    }





    /* CTA */


    .cta-box {


        padding:35px 20px;


    }



    .cta-box h2 {


        font-size:26px;


    }



    .cta-box .btn {


        width:100%;


    }





    /* Footer */


    .footer-section {


        text-align:center;


    }



    .footer-section h5::after {


        margin:10px auto;


    }



    .social-links {


        justify-content:center;


    }



    .footer-contact li {


        justify-content:center;


    }



}






/* =====================================================
   PETITS MOBILES
   (max-width: 480px)
===================================================== */


@media(max-width:480px){



    .hero-section h1 {


        font-size:32px;


    }



    .hero-section .highlight {


        display:block;


    }

    .activity-info-box {

        flex-direction:column;

    }



    .section-title {


        font-size:20px;


    }



    .cta-box p {


        font-size:15px;


    }



}