/* ==========================================================
   RESPONSIVE 2.CSS
   SkollGuard
========================================================== */


/* ==========================================================
   TABLETTES & PETITS ÉCRANS
========================================================== */

@media (max-width:1200px){

    /* ---------- HEADER ---------- */

    .container{

        width:94%;

    }


    /* ---------- HERO ---------- */

    .hero{

        min-height:520px;

        background-position:center right;

    }

    .hero-content{

        width:100%;

    }

    .hero-text{

        max-width:520px;

    }

    .hero h1{

        font-size:2.6rem;

        line-height:1.2;

    }

    .hero p{

        font-size:1.05rem;

    }
	
}
/* ==========================================================
   TABLETTES
========================================================== */

@media (max-width:992px){

    /* ---------- HEADER ---------- */

    .header-inner{

        min-height:78px;

    }

    .logo{

        width:52px;

    }

    .brand-tagline{

        display:none;

    }

    .nav{

        display:none;

    }

    .btn-header{

        display:none;

    }
	
	.menu-toggle{

        display:flex;

	}


    /* ---------- HERO ---------- */

    .hero{

        min-height:460px;

        background-position:65% center;

    }

    .hero-text{

        max-width:500px;

    }

    .hero h1{

        font-size:2.2rem;

    }

    .hero-description{

        font-size:1rem;

    }

    .hero-slogan{

        font-size:1.05rem;

    }



    /* ---------- GRILLES ---------- */

    .sg-grid-4{

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

    }

    .sg-grid-3{

        grid-template-columns:1fr;

    }



    /* ---------- CARTES ---------- */

    .sg-card{

        padding:30px;

    }



    /* ---------- TITRES ---------- */

    .sg-section-title{

        margin-bottom:55px;

    }

    .sg-section-title h2{

        font-size:2rem;

    }

}
/* ==========================================================
   SMARTPHONE
========================================================== */

@media (max-width:768px){

    /* ---------- HEADER ---------- */

    .header-inner{

        min-height:70px;

    }

    .logo{

        width:45px;

    }

    .brand-name{

        font-size:1rem;

    }

    .brand-tagline{

        display:none;

    }



    /* ---------- HERO ---------- */

    .hero{

        min-height:auto;

        padding:40px 0;

        background-position:72% center;

        background-size:cover;

    }

    .hero-text{

        max-width:100%;

        padding:30px 0;

    }

    .hero h1{

        font-size:1.9rem;

        line-height:1.2;

        margin-bottom:20px;

    }

    .hero-description{

        font-size:1rem;

        line-height:1.7;

    }

    .hero-slogan{

        font-size:1rem;

        margin:25px 0;

    }

    .hero-buttons{

        display:flex;

        flex-direction:column;

        align-items:flex-start;

        gap:15px;

    }

    .hero-buttons .btn{

        width:100%;

        max-width:320px;

    }



    /* ---------- TITRES ---------- */

    .sg-section-title{

        margin-bottom:45px;

    }

    .sg-section-title h2{

        font-size:1.8rem;

    }

    .sg-section-title p{

        font-size:1rem;

    }



    /* ---------- GRILLES ---------- */

    .sg-grid-4,

    .sg-grid-3,

    .sg-grid-2{

        grid-template-columns:1fr;

    }



    /* ---------- CARTES ---------- */

    .sg-card{

        padding:28px;

    }

    .sg-icon{

        width:60px;

        height:60px;

        font-size:1.6rem;

        margin-bottom:20px;

    }

}

/*==================================================
=                   FOOTER
==================================================*/

@media (max-width:992px){

    .footer .sg-grid{

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

    }

}

@media (max-width:768px){

    .footer{

        text-align:center;

    }

    .footer .sg-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

    .footer-brand img{

        margin:0 auto 15px;

    }

}
/* ==========================================================
   CONTACT
========================================================== */

@media (max-width:992px){

    .contact-grid{

        grid-template-columns:1fr;

        gap:35px;

    }

}

@media (max-width:768px){

    .contact-page{

        padding:50px 0;

    }

    .form-row{

        grid-template-columns:1fr;

        gap:18px;

    }

    .contact-form,
    .contact-info{

        padding:28px;

    }

    .contact-form h2,
    .contact-info h2{

        font-size:1.35rem;

    }

    .form-group textarea{

        min-height:150px;

    }

    .contact-form .btn{

        width:100%;

    }

    .contact-list{

        gap:15px;

    }

    .contact-points{

        gap:12px;

    }

}

@media (max-width:480px){

    .contact-page{

        padding:40px 0;

    }

    .contact-form,
    .contact-info{

        padding:22px;

    }

    .contact-form h2,
    .contact-info h2{

        font-size:1.2rem;

    }

    .form-group input,
    .form-group textarea{

        padding:12px 14px;

    }

}
/* ==========================================================
   CTA
========================================================== */

@media (max-width:768px){

    .cta-card{

        padding:30px;

    }

    .cta-card h2{

        font-size:1.8rem;

    }

    .cta-buttons{

        flex-direction:column;

        align-items:center;

    }

    .cta-buttons .btn{

        width:100%;

        max-width:320px;

    }

}
/*==================================================
=                     FAQ
==================================================*/

@media (max-width:768px){

    .faq-page{

        padding:50px 0;

    }

    .faq-question{

        padding:18px 20px;

        font-size:1rem;

    }

    .faq-answer{

        padding:0 20px 20px;

    }

}
/*==================================================
=                COOKIE BANNER
==================================================*/

@media(max-width:768px){

    .cookie-banner{

        left:15px;

        right:15px;

        bottom:15px;

        padding:20px;

    }

    .cookie-content{

        grid-template-columns:1fr;

        text-align:center;

    }

    .cookie-icon{

        display:none;

    }

    .cookie-buttons{

        justify-content:center;

    }

    .cookie-buttons .btn{

        width:100%;

    }

}