/*====================================================

Solaris Animation V2
responsive.css

====================================================*/


/*=========================
Ordinateur Portable
=========================*/

@media (max-width:1400px){

.hero-content h1{

font-size:64px;

}

.container{

width:95%;

}

}


/*=========================
Tablette paysage
=========================*/

@media (max-width:1100px){

.header .container{

height:85px;

}

.logo img{

height:55px;

}

.navbar{

position:fixed;

top:85px;

right:-100%;

width:320px;

height:calc(100vh - 85px);

background:#090909;

display:flex;

flex-direction:column;

justify-content:flex-start;

padding:50px 35px;

gap:30px;

transition:.4s;

border-left:1px solid rgba(255,255,255,.08);

}

.navbar.active{

right:0;

}

.menu-btn{

display:block;

}

.btn-header{

display:none;

}

.hero-content h1{

font-size:54px;

}

.hero-content p{

font-size:19px;

}

.footer-grid{

grid-template-columns:1fr;

gap:45px;

}

.premium-box{

flex-direction:column;

text-align:center;

padding:50px;

}

.service-grid{

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

}

.gallery-grid{

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

}

.avis-grid{

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

}

}


/*=========================
Tablette Portrait
=========================*/

@media (max-width:900px){

.hero{

height:90vh;

}

.hero-content h1{

font-size:46px;

}

.page-hero{

height:60vh;

}

.section{

padding:90px 0;

}

.section-title h2{

font-size:38px;

}

.service-grid{

grid-template-columns:1fr;

}

.gallery-grid{

grid-template-columns:1fr 1fr;

}

.avis-grid{

grid-template-columns:1fr;

}

.numbers .container{

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

gap:20px;

}

.premium-box h2{

font-size:38px;

}

table{

display:block;

overflow-x:auto;

white-space:nowrap;

}

}

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

@media (max-width:768px){

.header .container{

height:75px;

}

.logo img{

height:48px;

}

.navbar{

top:75px;

width:100%;

height:calc(100vh - 75px);

padding:40px 30px;

}

.hero{

height:100vh;

}

.hero video{

object-position:center;

}

.hero-content{

width:92%;

}

.hero-content h1{

font-size:38px;

line-height:1.2;

}

.hero-content p{

font-size:17px;

margin-bottom:35px;

}

.hero-buttons{

flex-direction:column;

align-items:center;

}

.hero-buttons .btn-primary,

.hero-buttons .btn-secondary{

width:100%;

max-width:320px;

text-align:center;

}

.page-hero{

height:50vh;

}

.page-hero h1{

font-size:42px;

}

.section{

padding:70px 0;

}

.section-title h2{

font-size:32px;

}

.section-title p{

font-size:16px;

}

.gallery-grid{

grid-template-columns:1fr;

}

.numbers .container{

grid-template-columns:1fr;

}

.number h2{

font-size:48px;

}

.premium-box{

padding:35px;

}

.premium-box h2{

font-size:30px;

}

.service-card img{

height:220px;

}

.legal{

padding:35px;

}

.login-box{

width:95%;

padding:35px;

}

#backToTop{

right:20px;

bottom:20px;

width:50px;

height:50px;

}

}


/*=========================
PETIT SMARTPHONE
=========================*/

@media (max-width:480px){

.hero-content h1{

font-size:30px;

}

.hero-content p{

font-size:15px;

}

.page-hero h1{

font-size:32px;

}

.section-title span{

font-size:13px;

letter-spacing:2px;

}

.section-title h2{

font-size:28px;

}

.service-text{

padding:25px;

}

.service-text h3{

font-size:22px;

}

.btn-primary,

.btn-secondary,

.btn{

width:100%;

text-align:center;

padding:16px 20px;

}

.footer-grid{

padding:50px 0;

}

.footer-grid h3{

margin-top:20px;

}

.copyright{

font-size:13px;

padding:18px;

}

.scroll-indicator{

display:none;

}

}


/*=========================
GRANDS ÉCRANS 4K
=========================*/

@media (min-width:1800px){

.container{

max-width:1700px;

}

.hero-content h1{

font-size:90px;

}

.hero-content p{

font-size:26px;

}

.section-title h2{

font-size:60px;

}

.service-card img{

height:320px;

}

}


/*=========================
MODE PAYSAGE MOBILE
=========================*/

@media (max-height:500px) and (orientation:landscape){

.hero{

height:140vh;

}

.page-hero{

height:90vh;

}

.navbar{

overflow-y:auto;

}

}


/*=========================
FIN DU FICHIER
=========================*/