/* ==============================
SLIDER CONTAINER
============================== */

.slider{
position:relative;
width:100%;
height:550px;
overflow:hidden;
font-family:Arial, Helvetica, sans-serif;
}

/* ==============================
SLIDES
============================== */

.slide{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-size:cover;
background-position:center;
background-repeat:no-repeat;
opacity:0;
transition:opacity 1s ease-in-out;
display:flex;
align-items:center;
justify-content:center;
}

.slide.active{
opacity:1;
z-index:2;
}

/* ==============================
OVERLAY
============================== */

.slide-overlay{
background:rgba(0,0,0,0.55);
padding:40px;
max-width:800px;
border-radius:8px;
text-align:center;
color:#fff;
}

/* ==============================
TEXT
============================== */

.sh{
color:#fff;
margin-bottom:15px;
}

.slide-overlay h1{
font-size:44px;
font-weight:700;
}

.slide-overlay p{
font-size:18px;
line-height:1.6;
}

/* ==============================
BUTTON
============================== */

.slide-btn{
display:inline-block;
margin-top:15px;
padding:12px 30px;
background:#28a745;
color:#fff;
text-decoration:none;
font-weight:600;
border-radius:5px;
transition:0.3s;
}

.slide-btn:hover{
background:#1f7e34;
transform:scale(1.05);
}

/* ==============================
ARROWS
============================== */

.prev,
.next{
position:absolute;
top:50%;
transform:translateY(-50%);
background:rgba(0,0,0,0.6);
color:#fff;
border:none;
font-size:32px;
padding:10px 16px;
cursor:pointer;
border-radius:4px;
z-index:10;
}

.prev{ left:15px; }
.next{ right:15px; }

.prev:hover,
.next:hover{
background:#28a745;
}

/* ==============================
DOTS
============================== */

.dots{
position:absolute;
bottom:20px;
left:50%;
transform:translateX(-50%);
display:flex;
gap:10px;
}

.dot{
width:14px;
height:14px;
border-radius:50%;
background:#ccc;
cursor:pointer;
transition:0.3s;
}

.dot.active{
background:#28a745;
}

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

@media (max-width:992px){

.slider{
height:420px;
}

.slide-overlay{
max-width:650px;
padding:30px;
}

.slide-overlay h1{
font-size:32px;
}

.slide-overlay p{
font-size:16px;
}

}

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

@media (max-width:768px){

.slider{
height:340px;
}

.slide-overlay{
padding:20px;
max-width:90%;
}

.slide-overlay h1{
font-size:24px;
}

.slide-overlay p{
font-size:14px;
}

.slide-btn{
padding:10px 20px;
font-size:14px;
}

.prev,
.next{
font-size:24px;
padding:8px 12px;
}

}

/* ==============================
SMALL DEVICES
============================== */

@media (max-width:480px){

.slider{
height:260px;
}

.slide-overlay{
padding:15px;
}

.slide-overlay h1{
font-size:18px;
}

.slide-overlay p{
font-size:13px;
}

.slide-btn{
font-size:13px;
padding:8px 16px;
}

.prev,
.next{
display:none;
}

}