/* ==========================================================
HOME HERO SLIDER
Quran Project
IMPORTANT: this file only contains the CUSTOM look & feel
(colors, spacing, fonts, hover states...). It does NOT
replace Swiper's own stylesheet. Make sure the layout
loads Swiper's CSS BEFORE this file, e.g. in your
layout :
Without Swiper's base CSS, slides won't be positioned
correctly and the fade effect won't work — you'll only
ever see the first slide.
========================================================== */
.hero-slider{
position:relative;
width:100%;
height:700px;
overflow:hidden;
background:#082D24;
}
.hero-slides{
position:relative;
width:100%;
height:100%;
}
.hero-slide{
position:absolute;
inset:0;
opacity:0;
visibility:hidden;
transition:opacity .8s ease;
}
.hero-slide.active{
opacity:1;
visibility:visible;
z-index:2;
}
/*==============================
Background Image
==============================*/
.hero-bg{
position:absolute;
inset:0;
z-index:1;
}
.hero-bg img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
/*==============================
Overlay
==============================*/
.hero-overlay{
position:absolute;
inset:0;
z-index:2;
background:
linear-gradient(
90deg,
rgba(8,45,36,.78) 0%,
rgba(8,45,36,.55) 35%,
rgba(8,45,36,.25) 60%,
rgba(8,45,36,.08) 100%
);
}
/*==============================
Container
==============================*/
.hero-wrapper{
position:relative;
z-index:3;
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
height:700px;
gap:70px;
}
/*==============================
Content
==============================*/
.hero-content{
flex:1;
max-width:650px;
}
.hero-badge{
display:inline-flex;
align-items:center;
padding:10px 24px;
border-radius:60px;
background:rgba(212,175,55,.18);
border:1px solid rgba(212,175,55,.45);
color:#E8C76A;
font-size:17px;
font-weight:700;
margin-bottom:28px;
backdrop-filter:blur(12px);
}
.hero-title{
color:#fff;
font-size:56px;
line-height:1.45;
font-weight:900;
margin:0 0 28px;
}
.hero-text{
color:rgba(255,255,255,.88);
font-size:20px;
line-height:2.1;
margin-bottom:40px;
}
.hero-actions{
display:flex;
gap:18px;
margin-bottom:55px;
}
.hero-btn{
display:inline-flex;
align-items:center;
justify-content:center;
padding:15px 38px;
border-radius:60px;
text-decoration:none;
font-weight:800;
transition:.35s;
}
.hero-btn.primary{
background:#D4AF37;
color:#fff;
}
.hero-btn.primary:hover{
background:#E8C76A;
transform:translateY(-3px);
}
.hero-btn.secondary{
color:#fff;
background:rgba(255,255,255,.12);
border:1px solid rgba(255,255,255,.35);
backdrop-filter:blur(12px);
}
.hero-btn.secondary:hover{
background:rgba(255,255,255,.22);
}
/*==============================
Hero Image
==============================*/
.hero-image{
flex:1;
display:flex;
align-items:center;
justify-content:center;
}
.hero-image img{
width:100%;
max-width:700px;
max-height:580px;
object-fit:contain;
filter:drop-shadow(0 30px 80px rgba(0,0,0,.45));
animation:heroFloat 6s ease-in-out infinite;
}
@keyframes heroFloat{
0%{
transform:translateY(0);
}
50%{
transform:translateY(-14px);
}
100%{
transform:translateY(0);
}
}
/*==============================
Navigation
==============================*/
.hero-prev,
.hero-next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:58px;
height:58px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.18);
backdrop-filter:blur(10px);
color:#fff;
font-size:28px;
cursor:pointer;
transition:.3s;
z-index:20;
}
.hero-prev{
left:35px;
}
.hero-next{
right:35px;
}
.hero-prev:hover,
.hero-next:hover{
background:#D4AF37;
}
/*==============================
Pagination
==============================*/
.hero-slider-dots{
position:absolute;
left:50%;
bottom:35px;
transform:translateX(-50%);
display:flex;
gap:12px;
z-index:20;
}
.hero-slider-dots button{
width:12px;
height:12px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.45);
cursor:pointer;
transition:.3s;
}
.hero-slider-dots button.active{
width:38px;
border-radius:30px;
background:#D4AF37;
}
/*==========================================================
Responsive
==========================================================*/
@media (max-width:1200px){
.hero-wrapper{
gap:40px;
}
.hero-title{
font-size:48px;
}
.hero-image img{
max-width:560px;
max-height:500px;
}
}
@media (max-width:992px){
.hero-slider{
height:620px;
}
.hero-wrapper{
height:620px;
justify-content:center;
}
.hero-image{
display:none;
}
.hero-content{
max-width:100%;
text-align:center;
}
.hero-actions{
justify-content:center;
}
}
@media (max-width:768px){
.hero-slider{
height:560px;
}
.hero-wrapper{
height:560px;
padding:40px 0;
}
.hero-title{
font-size:34px;
line-height:1.6;
}
.hero-text{
font-size:17px;
}
.hero-actions{
flex-direction:column;
align-items:center;
}
.hero-btn{
width:100%;
max-width:280px;
}
.hero-prev,
.hero-next{
width:46px;
height:46px;
font-size:22px;
}
}
@media (max-width:576px){
.hero-slider{
height:520px;
}
.hero-wrapper{
height:520px;
}
.hero-title{
font-size:28px;
}
.hero-badge{
font-size:15px;
padding:8px 18px;
}
.hero-text{
font-size:16px;
line-height:1.9;
}
.hero-slider-dots{
bottom:20px;
}
}