/*=====================================
RESPONSIVE DESIGN
SavannaEd
=====================================*/


/*==============================
LARGE LAPTOPS
==============================*/

@media(max-width:1200px){

.container{

    width:95%;

}

.hero h1{

    font-size:56px;

}

}


/*==============================
TABLETS
==============================*/

@media(max-width:992px){

section{

    padding:90px 0;

}

/* Navigation */

.nav-links{

    position:fixed;

    top:90px;

    right:-100%;

    width:280px;

    height:calc(100vh - 90px);

    background:#fff;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    padding:40px;

    gap:25px;

    transition:.4s;

    box-shadow:-10px 0 30px rgba(0,0,0,.08);

}

.nav-links.show{

    right:0;

}

.menu-toggle{

    display:block;

}

header .btn{

    display:none;

}

/* Hero */

.hero{

    height:auto;

    min-height:100vh;

    padding:170px 0 120px;

}

.hero h1{

    font-size:48px;

}

.hero p{

    font-size:18px;

}

/* Two-column layouts */

.about-grid,
.contact-grid,
.vision-grid,
.why-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.about-image{

    order:-1;

}

/* Timeline */

.timeline{

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

}

.footer-grid{

    grid-template-columns:1fr;

    text-align:center;

}

.social-links{

    justify-content:center;

}

}


/*==============================
MOBILE
==============================*/

@media(max-width:768px){

section{

    padding:70px 0;

}

/* Typography */

h1{

    font-size:38px;

}

h2{

    font-size:32px;

}

h3{

    font-size:22px;

}

p{

    font-size:16px;

}

/* Header */

.logo img{

    height:55px;

}

header{

    padding:15px 0;

}

/* Hero */

.hero-logo{

    width:160px;

}

.hero-buttons{

    flex-direction:column;

    align-items:center;

}

.hero-buttons .btn{

    width:100%;

    max-width:320px;

}

/* Cards */

.services-grid,
.partner-grid,
.values-grid,
.belief-grid{

    grid-template-columns:1fr;

}

.service-card{

    padding:30px;

}

.service-card img{

    height:220px;

}

/* Stats */

.stats{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

}

/* Timeline */

.timeline{

    grid-template-columns:1fr;

}

/* Contact */

.contact-form input,
.contact-form textarea{

    font-size:15px;

}

/* Footer */

.footer-grid{

    gap:40px;

}

.footer-logo{

    margin:auto;

    margin-bottom:20px;

}
.trusted-logos{

    display:grid;

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

    gap:20px;

}

.trusted-title{

    margin-bottom:20px;

}

}


/*==============================
SMALL PHONES
==============================*/

@media(max-width:576px){

.container{

    width:92%;

}

.hero{

    padding-top:140px;

}

.hero h1{

    font-size:30px;

    line-height:1.3;

}

.hero p{

    font-size:16px;

}

.hero-tag{

    font-size:11px;

    padding:8px 18px;

}

.btn{

    width:100%;

    padding:15px;

}

.section-title{

    margin-bottom:45px;

}

.service-card,
.partner-card,
.value-card,
.belief-card{

    padding:25px;

}

.stats{

    grid-template-columns:1fr;

}

.number{

    width:60px;

    height:60px;

    font-size:20px;

}

#backToTop{

    width:45px;

    height:45px;

    right:20px;

    bottom:20px;

}

}


/*==============================
LANDSCAPE PHONES
==============================*/

@media(max-height:500px){

.hero{

    height:auto;

    padding:150px 0 100px;

}

}