/*==================================================
        RESPONSIVE PREMIUM
        IFE V2
==================================================*/

/*==============================
      1400px
==============================*/

@media (max-width:1400px){

.container{

    width:min(1200px,94%);

}

.hero-logo{

    width:500px;

}

}

/*==============================
      1200px
==============================*/

@media (max-width:1200px){

.hero-grid{

    gap:50px;

}

.hero h1{

    font-size:4rem;

}

.hero-logo{

    width:440px;

}

.services-grid{

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

}

.contracts-grid{

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

}

.why-grid{

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

}

.footer-grid{

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

}

.hero-stats{

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

}

.contact-grid{

    grid-template-columns:1fr;

}

.contact-info{

    order:2;

}

.contact-form{

    order:1;

}

}

/*==============================
      992px
==============================*/

@media (max-width:992px){

.nav-menu{

    display:none;

}

.menu-toggle{

    display:flex;

    flex-direction:column;

    gap:6px;

    cursor:pointer;

}

.menu-toggle span{

    width:28px;

    height:3px;

    background:#fff;

    border-radius:30px;

}

header.scrolled .menu-toggle span{

    background:var(--dark);

}

.btn-header{

    display:none;

}

.hero{

    padding-top:140px;

}

.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.hero-left{

    order:2;

}

.hero-right{

    order:1;

}

.hero-buttons{

    justify-content:center;

}

.hero-logo{

    width:380px;

}

.hero-circle{

    width:480px;

    height:480px;

}

.hero p{

    margin:auto;

    margin-bottom:40px;

}

.hero-badge{

    justify-content:center;

}

.section{

    padding:90px 0;

}

}
/*==================================================
            TABLETTES & MOBILES
==================================================*/

@media (max-width:768px){

section{

    padding:80px 0;

}

.container{

    width:92%;

}

.hero{

    min-height:auto;

    padding:150px 0 80px;

}

.hero-grid{

    gap:40px;

}

.hero h1{

    font-size:3rem;

}

.hero p{

    font-size:1rem;

}

.hero-logo{

    width:320px;

}

.hero-circle{

    width:380px;

    height:380px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.btn-primary,
.btn-outline,
.btn-whatsapp{

    width:100%;

    max-width:320px;

}

.hero-stats{

    grid-template-columns:1fr;

}

.services-grid{

    grid-template-columns:1fr;

}

.contracts-grid{

    grid-template-columns:1fr;

}

.why-grid{

    grid-template-columns:1fr;

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.footer-logo{

    margin:0 auto 25px;

}

.footer-social{

    justify-content:center;

}

.form-row{

    grid-template-columns:1fr;

}

.contact-form{

    padding:30px;

}

.contact-grid{

    gap:40px;

}

}

/*==================================================
                SMARTPHONES
==================================================*/

@media (max-width:576px){

header{

    padding:15px 0;

}

.logo img{

    height:58px;

}

.hero{

    padding-top:130px;

}

.hero h1{

    font-size:2.4rem;

    line-height:1.15;

}

.hero-badge{

    font-size:.85rem;

    padding:10px 18px;

}

.hero-logo{

    width:260px;

}

.hero-circle{

    width:300px;

    height:300px;

}

.section-header h2{

    font-size:2rem;

}

.section-header p{

    font-size:.95rem;

}

.service-card,
.contract-card,
.why-card{

    padding:28px;

}

.cta-box{

    padding:50px 25px;

}

.cta-box h2{

    font-size:2rem;

}

.contact-form{

    padding:25px;

}

.info-card{

    padding:22px;

}

.whatsapp-float{

    width:60px;

    height:60px;

    font-size:28px;

}

#backToTop{

    width:50px;

    height:50px;

}

}

/*==================================================
            PETITS SMARTPHONES
==================================================*/

@media (max-width:420px){

.hero h1{

    font-size:2rem;

}

.hero-logo{

    width:220px;

}

.hero-circle{

    width:250px;

    height:250px;

}

.btn-primary,
.btn-outline,
.btn-whatsapp{

    padding:15px 20px;

    font-size:.95rem;

}

.service-icon{

    width:65px;

    height:65px;

    font-size:26px;

}

.stat-card{

    padding:22px;

}

.stat-number{

    font-size:2rem;

}

.footer-bottom{

    font-size:.9rem;

}

}

/*==================================================
            TRÈS PETITS ÉCRANS
==================================================*/

@media (max-width:360px){

.hero h1{

    font-size:1.8rem;

}

.hero-logo{

    width:190px;

}

.logo img{

    height:50px;

}

.section-header h2{

    font-size:1.7rem;

}

.service-card,
.contract-card,
.why-card,
.contact-form{

    padding:20px;

}

.info-card{

    flex-direction:column;

    text-align:center;

    align-items:center;

}

.info-card i{

    margin-bottom:10px;

}

}

/*==================================================
            ÉCRANS XXL
==================================================*/

@media (min-width:1600px){

.container{

    max-width:1400px;

}

.hero h1{

    font-size:6rem;

}

.hero-logo{

    width:650px;

}

.hero-circle{

    width:760px;

    height:760px;

}

}