/* ==========================================================
   BabyChoice Nappies
   HERO SLIDER CSS
========================================================== */


/* ===============================
   HERO WRAPPER
================================ */


.hero-slider {

position:relative;

min-height:650px;

overflow:hidden;

}



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


.hero-slide {

position:absolute;

inset:0;

display:flex;

align-items:center;


opacity:0;

visibility:hidden;


transition:
opacity .8s ease,
visibility .8s ease;


padding:70px 0;

}



.hero-slide.active {

opacity:1;

visibility:visible;

}



/* ===============================
   HERO LAYOUT
================================ */


.hero-slide .container {


display:grid;

grid-template-columns:
1.05fr .95fr;


align-items:center;


gap:70px;


}



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


.hero-copy .eyebrow {


display:inline-flex;


background:white;


color:var(--pink-deep);


padding:8px 18px;


border-radius:999px;


font-size:13px;


font-weight:800;


margin-bottom:20px;


}



.hero-copy h1 {


font-size:56px;


line-height:1.08;


margin-bottom:22px;


}



.hero-copy h1 span {

color:var(--pink-deep);

}



.hero-copy p {

font-size:18px;

max-width:560px;

color:var(--ink-soft);

line-height:1.7;

margin-bottom:30px;

}



/* ===============================
   HERO FEATURES
================================ */


.hero-features {


display:grid;


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


gap:14px;


margin:30px 0;


}



.hero-features div {


font-weight:700;


}



/* ===============================
   HERO IMAGE
================================ */


.hero-visual {


position:relative;


display:flex;


align-items:center;


justify-content:center;


}



.hero-image {


position:relative;


z-index:2;


width:100%;


max-width:520px;


object-fit:contain;


filter:
drop-shadow(0 30px 45px rgba(0,0,0,.18));


animation:
heroFloat 6s ease-in-out infinite;


}



@keyframes heroFloat {


0%,
100% {

transform:translateY(0);

}


50% {

transform:translateY(-15px);

}


}



/* ===============================
   DECORATIVE CIRCLES
================================ */


.hero-bg-circle {


position:absolute;

border-radius:50%;


}



.hero-circle-1 {


width:430px;

height:430px;


background:#FFE7F0;


}



.hero-circle-2 {


width:260px;

height:260px;


background:#DDEEFF;


right:10px;

bottom:20px;


}



/* ===============================
   SLIDE BACKGROUNDS
================================ */


.slide-1 {

background:
linear-gradient(
120deg,
#FFD9E4,
#FFF5F8
);

}



.slide-2 {

background:
linear-gradient(
120deg,
#EAF6FF,
#FFFFFF
);

}



.slide-3 {

background:
linear-gradient(
120deg,
#FFF3C4,
#FFFBEA
);

}



.slide-4 {

background:
linear-gradient(
120deg,
#E9DDFF,
#F8F3FF
);

}



.slide-5 {

background:
linear-gradient(
120deg,
#D9FFE9,
#F2FFF7
);

}



.slide-6 {

background:
linear-gradient(
120deg,
#0E2E4A,
#234E70
);

}



.slide-6 .hero-copy h1,
.slide-6 .hero-copy p {

color:white;

}



.slide-6 .hero-copy h1 span {

color:#FFD9E4;

}



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


.hero-arrow {


position:absolute;


top:50%;


transform:translateY(-50%);


width:46px;


height:46px;


border:none;


border-radius:50%;


background:white;


font-size:24px;


box-shadow:
0 10px 25px rgba(0,0,0,.12);


z-index:10;


}



.hero-arrow:hover {


transform:
translateY(-50%)
scale(1.08);


}



.hero-arrow-prev {

left:25px;

}



.hero-arrow-next {

right:25px;

}



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


.hero-dots {


position:absolute;


bottom:25px;


left:50%;


transform:translateX(-50%);


display:flex;


gap:10px;


z-index:10;


}



.hero-dot {


width:10px;


height:10px;


border-radius:50%;


border:none;


background:white;


}



.hero-dot.active {


width:28px;


border-radius:20px;


background:var(--pink-deep);


}