/* ===========================
TABLET
===========================*/

@media(max-width:1100px){

.hero{

flex-direction:column-reverse;

text-align:center;

}

.hero-left p{

margin:auto;

}

.hero-buttons{

margin-top:25px;

}

.stats{

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

}

.service-grid{

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

}

}

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

@media(max-width:768px){

.menu-toggle{

display:block;

font-size:28px;

cursor:pointer;

color:var(--white);

z-index:1001;

}

.nav-links{

position:fixed;

top:80px;

right:-100%;

width:260px;

height:calc(100vh - 80px);

background:var(--bg);

display:flex;

flex-direction:column;

justify-content:flex-start;

align-items:center;

padding-top:40px;

gap:25px;

transition:.4s;
z-index:1000;
overflow-y:auto;

}

.nav-links.active{

right:0;

}

.nav-links li{

list-style:none;

}

.nav-links li a{

font-size:18px;

color:var(--nav-link);

text-decoration:none;

}

}