/* ===============================
LARGE SCREENS (1400px and below)
=============================== */

@media (max-width:1400px){

.hero h1{
font-size:3rem;
}

.hero p{
max-width:500px;
}

}


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

@media (max-width:1200px){

.hero h1{
font-size:2.6rem;
}

.hero .subtitle{
font-size:1.1rem;
}

.hero p{
font-size:.95rem;
}

}

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

@media (max-width:992px){

.hero{
height:85vh;
}

.hero-content{
text-align:center;
}

.hero-buttons{
justify-content:center;
flex-wrap:wrap;
}

.hero h1{
font-size:2.3rem;
}

.hero p{
max-width:100%;
}

.slider-dots{
bottom:30px;
}

.scroll-indicator{
display:none;
}

}

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

@media (max-width:768px){

.hero{
height:80vh;
}

.hero h1{
font-size:1.9rem;
line-height:1.3;
}

.hero .subtitle{
font-size:1rem;
}

.hero p{
font-size:.9rem;
}

.hero-buttons{
flex-direction:column;
align-items:center;
gap:10px;
}

.btn-primary-custom,
.btn-outline-custom{
width:200px;
text-align:center;
padding:10px 20px;
}

.slider-dots{
bottom:20px;
}

}


/* ===============================
SMALL MOBILES
=============================== */

@media (max-width:480px){

.hero{
height:75vh;
}

.hero h1{
font-size:1.6rem;
}

.hero .subtitle{
font-size:.9rem;
}

.hero p{
font-size:.85rem;
}

.hero-buttons{
margin-top:20px;
}

.btn-primary-custom,
.btn-outline-custom{
width:180px;
padding:10px 18px;
}

.slider-dots{
gap:8px;
}

.dot{
width:8px;
height:8px;
}

.dot.active{
width:18px;
}

}