:root {
--bg: #1c1c1f;
--panel: #f6f7f8;
--accent: #5DADE2;
--navy: #3A7CA5;
--muted: #9aa0a6;
--card: #ffffff;
--rounded: 16px;
--maxw: 1100px;
--transition: 400ms cubic-bezier(.2,.9,.3,1);
}

html, body {
height: 100%;
}

body {
margin: 0;
font-family: "Lato", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
color: #111;
background-image:
url("Images/pagecover.jpg"),
radial-gradient(circle at 10% 10%, rgba(255,255,255,0.015), transparent 100px),
radial-gradient(circle at 90% 90%, rgba(255,255,255,0.01), transparent 120px);
background-size: cover, auto, auto;
background-position: center, center, center;
background-attachment: fixed;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: scroll;
}

/* Layout container */
.container {
max-width: var(--maxw);
margin: 36px auto;
padding: 24px;
}

/* Header / Hero */
header {
color: var(--panel);
text-align: center;
padding: 28px 20px;
border-radius: 12px;
margin-bottom: 22px;
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #1f2833, #0b0c10);
}

/* Header background image overlay */
header::before {
content: "";
position: absolute;
inset: 0;
background-image: url("images/pagecover2.jpg");
background-size: cover;
background-position: center;
opacity: 0.35;
z-index: 0;
}

header::after {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.05), transparent 60%),
radial-gradient(circle at 70% 70%, rgba(255,255,255,0.03), transparent 60%);
mix-blend-mode: overlay;
pointer-events: none;
transform: translateY(-6px) scale(1.2);
z-index: 1;
}

.brand-title, .subtitle {
position: relative;
z-index: 2;
}

.brand-title {
font-family: "Playfair Display", serif;
font-size: 48px;
letter-spacing: 2px;
margin: 4px 0;
opacity: 0;
transform: translateY(18px);
animation: enter 700ms ease forwards 100ms;
color: #ffc0cb;
text-shadow: 0 2px 8px rgba(255,255,255,0.5);
}

.subtitle {
color: #ffc0cb;
margin-top: 6px;
font-size: 18px;
font-weight: 400;
opacity: 0;
transform: translateY(18px);
animation: enter 700ms ease forwards 300ms;
}

@keyframes enter {
to { opacity: 1; transform: translateY(0); }
}

/* Section title */
h2.section-title {
font-family: "Playfair Display", serif;
font-size: 36px;
color: var(--navy);
text-align: center;
margin: 26px 0 12px;
}

/* The carousel area */
.carousel-wrap {
display: flex;
align-items: flex-start;
gap: 20px;
justify-content: center;
padding: 18px;
flex-wrap: wrap;
}

/* Cards container */
.carousel {
width: 100%;
max-width: 980px;
position: relative;
display: flex;
gap: 16px;
align-items: center;
justify-content: center;
}

.slides {
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
width: 100%;
position: relative;
height: 420px;
}

/* Slides with background image */
.slide {
background-image: url("Images/frame1.jpg")
background-size: cover;
background-position: center;
border-radius: 14px;
box-shadow: 0 6px 20px 
rgba(255, 255, 255, 0.18);
width: 320px;
flex: 0 0 320px;
transform-origin: center center;
display: flex;
flex-direction: column;
align-items: center;
transition: transform var(--transition), opacity var(--transition), filter var(--transition);
opacity: 0;
pointer-events: none;
position: absolute;
left: 50%;
top: 0;
translate: -50% 0;
padding: 18px;
}

/* visible states */
.slide.active {
opacity: 1;
pointer-events: auto;
position: relative;
transform: translateY(-6px) scale(1.02);
z-index: 30;
width: 420px;
flex: 0 0 420px;
}

.slide.prev, .slide.next {
opacity: 0.9;
pointer-events: auto;
transform: translateY(6px) scale(.92);
z-index: 20;
filter: grayscale(.05) contrast(.96) brightness(.98);
width: 300px;
flex: 0 0 300px;
}

/* image box */
.imgbox {
width: 100%;
height: 260px;
border-radius: 10px;
overflow: hidden;
display: block;
box-shadow: inset 0 -6px 18px rgba(0,0,0,0.06);
position: relative;
}
.imgbox img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1.02);
transition: transform 600ms cubic-bezier(.2,.9,.3,1);
}
.slide.active .imgbox img { transform: scale(1); }

/* caption area */
.caption {
width: 100%;
padding: 12px 10px 6px 10px;
text-align: center;
}
.caption h3 {
margin: 6px 0 4px;
font-family: "Playfair Display", serif;
font-size: 20px;
color: #18324a;
}
.meta {
color: var(--muted);
font-size: 14px;
margin-bottom: 8px;
}
.price {
font-size: 20px;
font-weight: 700;
color: #0e2b3a;
margin-bottom: 10px;
}

/* buttons */
.ctas {
display: flex;
gap: 10px;
justify-content: center;
align-items: center;
margin-top: 6px;
flex-wrap: wrap;
}
.btn {
background: var(--navy);
color: #fff;
padding: 10px 16px;
border-radius: 999px;
border: 0;
cursor: pointer;
font-weight: 700;
letter-spacing: 0.6px;
box-shadow: 0 4px 14px rgba(21,67,96,0.12);
transition: transform 220ms ease, box-shadow 220ms ease, background 220ms ease;
}
.btn.secondary {
background: transparent;
border: 2px solid rgba(21,67,96,0.08);
color: var(--navy);
font-weight: 600;
padding: 8px 14px;
box-shadow: none;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 26px rgba(21,67,96,0.14);
}
.btn.secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,0,0,0.06);
}

/* arrows */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.06);
color: var(--panel);
border: 1px solid rgba(255,255,255,0.03);
backdrop-filter: blur(4px);
cursor: pointer;
z-index: 80;
transition: transform 160ms ease, background 160ms ease;
}
.arrow:hover {
transform: translateY(-50%) scale(1.04);
background: rgba(255,255,255,0.09);
}
.arrow.left { left: -10px; }
.arrow.right { right: -10px; }

/* thumbnails */
.thumbs {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
margin-top: 18px;
flex-wrap: wrap;
}
.thumb {
width: 84px;
height: 64px;
background: #f1f4f6;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.06);
border: 3px solid transparent;
cursor: pointer;
transition: border-color 220ms ease, transform 220ms ease;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb.active { border-color: var(--navy); transform: translateY(-4px); }

/* description / benefits */
.details {
display: flex;
gap: 28px;
margin-top: 22px;
align-items: flex-start;
justify-content: center;
flex-wrap: wrap;
}
.desc, .benefits {
background-image: url("Images/frame1.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-blend-mode: lighten;
border-radius: 12px;
box-shadow: 0 8px 28px rgba(0,0,0,0.06);
padding: 16px;
}
.desc h4 {
font-family: "Playfair Display", serif;
margin: 6px 0 10px;
color: #ffffff;
}
.desc p {
color: var(--muted);
line-height: 1.55;
margin: 0 0 10px;
}
.benefits .row {
display: flex;
gap: 10px;
align-items: center;
width: 100%;
justify-content: flex-start;
}
.icon {
width: 36px;
height: 36px;
display: inline-grid;
place-items: center;
background: linear-gradient(180deg, #eef6fb, #e0f0fb);
border-radius: 8px;
color: var(--navy);
font-weight: 700;
border: 1px solid rgba(21,67,96,0.06);
}
.benefits h5 { margin: 8px 0 6px; font-size: 18px; color: #163344; }

/* footer */
footer {
margin-top: 36px;
padding: 20px;
text-align: center;
color: rgba(255,255,255,0.65);
font-size: 14px;
}

/* Responsive */
@media (max-width: 980px) {
.slides { height: 380px; }
.slide.active { width: 360px; flex: 0 0 360px; }
.slide.prev, .slide.next { display: none; }
.arrow.left { left: 4px; }
.arrow.right { right: 4px; }
}

@media (max-width: 560px) {
.brand-title { font-size: 34px; }
.slide.active { width: 100%; flex: 0 0 100%; padding: 12px; height: auto; }
.slides { height: auto; flex-wrap: nowrap; }
.imgbox { height: 260px; }
.thumb { width: 72px; height: 56px; }
.container { padding: 12px; margin: 10px auto; }
.desc { order: 2; }
.benefits { order: 1; width: 100%; }
}

/* --- JS Animation Effects --- */
.slide {
transition: opacity 0.7s ease, transform 0.7s ease;
opacity: 0;
}
.slide.active {
opacity: 1;
z-index: 2;
}
.slide-in-right { animation: slideInRight 0.7s forwards; }
.slide-in-left { animation: slideInLeft 0.7s forwards; }
.slide-out-right { animation: slideOutRight 0.7s forwards; }
.slide-out-left { animation: slideOutLeft 0.7s forwards; }

@keyframes slideInRight {
from { transform: translateX(80px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutLeft {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(-80px); opacity: 0; }
}
@keyframes slideInLeft {
from { transform: translateX(-80px); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(80px); opacity: 0; }
}