:root {
    --header-gradient: linear-gradient(to right, #eee2c2b6, #a45a1abe, #5a2a00);
    --navbar-gradient: linear-gradient(135deg, #2e0b03, #6b1414, #d97706);
    --footer-gradient: linear-gradient(135deg, #1a0702, #3b1a05, #8b5a20);
    --bg-gradient: linear-gradient(to bottom, #f2d6a0, #d4aa6a, #b07c3a);
    --card-bg: linear-gradient(145deg, #f3e0c3, #d4b07a);

    --text-dark: #1a0b05;
    --text-light: #fdf3e7;
    --saffron: #d97706;
    --gold: #b8860b;
}

/* MAIN FLEX SECTION — FIXED VERTICAL ALIGN */
.main-section {
    display: flex;
    padding: 30px;
    align-items: center;
    gap: 30px;
    background: var(--bg-gradient);  /* 🌟 Theme background applied */
}

/* LEFT SECTION */
.left-img {
    width: 30%;
    display: flex;
    justify-content: center;
}

.left-slider {
    width: 100%;
    max-width: 350px;
    text-align: center;
}

.left-slider h2 {
    margin: 0;
    color: var(--text-dark);
}

.gallery-card {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 350px;
    background: var(--card-bg);  /* 🌟 Card background from theme */
}

.gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-overlay {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 8px;
    background: rgba(0,0,0,0.6);
    color: var(--text-light);
    text-align: center;
    font-size: 14px;
}

/* RIGHT SECTION */
.right-slider {
    width: 70%;
    display: flex;
    align-items: center;
}

.swiper {
    width: 100%;
    margin: 0;
    margin-top: 15px;
    height: 335px;
}

/* PROFILE CARD */
.card {
    background: var(--card-bg);   /* 🌟 Theme card gradient */
    border-radius: 12px;
    padding: 12px;
    height: 350px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 15px rgba(0,0,0,0.15);
    transition: 0.3s;
    color: var(--text-dark);
}

.card:hover {
    transform: translateY(-6px);
}

.card img {
    height: 70%;
    height: 220px;
    object-fit: contain;
    width: 100%;
    border-radius: 8px;
}

.card h3,
.card p {
    text-align: center;
    margin: 8px 0;
}

/* NAV BUTTONS */
.swiper-button-next,
.swiper-button-prev {
    width: 28px;
    height: 28px;
    background: var(--gold);   /* 🌟 Golden button */
    border-radius: 4px;
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 12px;
    color: var(--text-light);
}

/* RESPONSIVE */
@media(max-width: 768px) {
    .main-section {
        flex-direction: column;
        align-items: center;
    }

    .left-img,
    .right-slider {
        width: 100%;
    }

    .card {
        height: 320px;
    }

    .card img {
        height: 180px;
        object-fit: contain;
    }
}