/*==============================================================
#
# EcoClimPro V2
# Responsive CSS
# Version : 2.0
#
==============================================================*/


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

@media (max-width:1400px){

:root{

    --container-width:1200px;

}

.hero__title{

    font-size:4.8rem;

}

}


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

@media (max-width:1200px){

:root{

    --container-width:1140px;

}

.section{

    padding:90px 0;

}

.container{

    padding-inline:32px;

}

.hero{

    min-height:860px;

}

.hero__content{

    max-width:640px;

}

.section__title{

    font-size:2.5rem;

}

}


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

@media (max-width:992px){

:root{

    --header-height:82px;

}

.container{

    padding-inline:28px;

}

.grid-2,
.grid-3,
.grid-4,
.cards-grid,
.gallery-grid,
.why-grid,
.reviews-grid,
.engagements-grid,
.presentation__stats,
.contact-layout,
.site-footer__grid{

    grid-template-columns:1fr;

}

.has-sidebar{

    grid-template-columns:1fr;

}

.sidebar{

    position:relative;

    top:auto;

}

.hero{

    min-height:760px;

}

.hero__content{

    max-width:100%;

}

.hero__actions{

    flex-wrap:wrap;

}

.hero__badge{

    display:none;

}

.timeline{

    padding-left:50px;

}

.timeline::before{

    left:18px;

}

.timeline-dot{

    left:-38px;

}

.footer-cta__inner{

    flex-direction:column;

    text-align:center;

}

.footer-cta__actions{

    justify-content:center;

}

}


/*==============================================================
# 768px
==============================================================*/

@media (max-width:768px){

:root{

    --container-padding:20px;

    --space-100:70px;

    --space-120:90px;

}

body{

    font-size:.97rem;

}

.container{

    padding-inline:20px;

}

.section{

    padding:70px 0;

}

.section__head{

    margin-bottom:45px;

}

.section__title{

    font-size:2rem;

}

.section__lead{

    font-size:1rem;

}

.hero{

    min-height:700px;

    text-align:center;

}

.hero__eyebrow{

    justify-content:center;

}

.hero__subtitle{

    font-size:1.05rem;

}

.hero__actions{

    flex-direction:column;

}

.hero__actions .btn{

    width:100%;

}

.hero__trust{

    justify-content:center;

    gap:14px;

}

.hero__trust li{

    width:100%;

    justify-content:center;

}

.btn{

    width:100%;

}

.btn-group{

    flex-direction:column;

}

.page-content{

    padding:55px 0;

}

.card{

    border-radius:20px;

}

.card__body{

    padding:26px;

}

.contact-card{

    padding:28px;

}

.form__grid{

    grid-template-columns:1fr;

}

.cta-section{

    padding:40px 28px;

}

.area-map{

    min-height:320px;

}

.site-footer__grid{

    gap:40px;

}

.site-footer__bottom-inner{

    flex-direction:column;

    text-align:center;

}

.legal-list{

    flex-direction:column;

    gap:15px;

}

}


/*==============================================================
# 576px
==============================================================*/

@media (max-width:576px){

html{

    font-size:15px;

}

.logo-text{

    font-size:1.45rem;

}

.hero__title{

    font-size:2.5rem;

}

.hero__subtitle{

    font-size:1rem;

}

.section__title{

    font-size:1.8rem;

}

.card__title{

    font-size:1.25rem;

}

.timeline{

    padding-left:35px;

}

.timeline::before{

    left:10px;

}

.timeline-dot{

    width:20px;

    height:20px;

    left:-28px;

}

.timeline-content{

    padding:22px;

}

.stat{

    padding:28px;

}

.review{

    padding:28px;

}

.footer-cta{

    padding:45px 0;

}

.footer-cta__title{

    font-size:1.8rem;

}

.back-to-top{

    right:16px;

    bottom:90px;

}

.btn-phone{

    right:16px;

    bottom:16px;

}

}


/*==============================================================
# Très petits écrans
==============================================================*/

@media (max-width:360px){

.hero__title{

    font-size:2.1rem;

}

.section__title{

    font-size:1.6rem;

}

.container{

    padding-inline:16px;

}

.btn{

    padding-inline:18px;

}

}