/* --- DROPDOWN ANIMATION --- */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

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

/* HEADER */
/* HEADER */
@media (max-width: 991px) {
    .main-header .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Reset Cart Icon for Flex Layout */
    .cart-icon {
        position: static;
        /* Was absolute */
        font-size: 0.9rem;
        transform: none;
        /* Remove vertical centering transform */
        padding-bottom: 0;
        /* remove any padding from desktop styles */
        color: white !important;
    }

    /* Adjust Toggler to remove default margins */
    .navbar-toggler {
        margin-right: 0;
        border: none;
        padding-left: 0;
    }

    .navbar-toggler:focus {
        box-shadow: none;
    }

    /* Cart Count Badge */
    .headerCartCount {
        font-size: 0.8rem;
    }

    .fa-bag-shopping {
        font-size: 1.4rem !important;
    }

    /* Mobile Logo Dynamic Color */
    .mobile-logo-link {
        color: #ffffff;
        transition: color 0.3s ease;
    }
}

@media (min-width: 992px) {
    .position-lg-absolute {
        position: absolute !important;
    }
}

.main-header.scrolled {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #FFEAEA;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding-bottom: 0;
    animation: slideDown 0.3s ease forwards;
    z-index: 1000;
}

.main-header.scrolled .top-bar {
    display: none;
}


.main-header.scrolled .brand-logo-text a {
    color: #31262A !important;
    font-size: 2.5rem;
    transition: all 0.3s ease;
}

.main-header.scrolled .nav-link {
    color: #31262A !important;
    /* Dark navigation text */
}

.main-header.scrolled .cart-icon {
    color: #31262A !important;
    /* Dark cart icon */
    padding-bottom: 0;
}

.main-header.scrolled .mobile-logo-link {
    color: #31262A !important;
}

.main-header.scrolled .nav-link:hover {
    color: #E68A8A !important;
}

/* 5. Adjust Mobile Toggle Color */
.main-header.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(49, 38, 42, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* 6. Smooth Slide Down Animation */
@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

/* WHITE HEADER */

body.shop-page .main-header {
    background-color: #ffffff;
    /* White background */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    position: sticky;
    /* Stays at top, pushes content down */
    top: 0;
    padding-bottom: 0;
    z-index: 1000;
}

body.shop-page .main-header.scrolled {
    position: sticky !important;
    animation: none !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
    top: 0 !important;
}


body.shop-page .main-header.scrolled .top-bar {
    display: flex !important;
}


body.shop-page .brand-logo-text {
    color: #31262A !important;
    font-size: 2rem;
    /* Matches the smaller scrolled size */
    padding-top: 10px;
    padding-bottom: 5px;
}

body.shop-page .nav-link {
    color: #31262A !important;
}

body.shop-page .cart-icon {
    color: #31262A !important;
}


body.shop-page .nav-link:hover {
    color: #E68A8A !important;
    /* Pink on hover */
}


body.shop-page .navbar {
    padding-top: 5px;
    padding-bottom: 10px;
}


body.shop-page .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(49, 38, 42, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* --- LOGIN / SIGN UP / PROFILE MODAL SHARED STYLES --- */

/* 1. Shared Container Layout */
#authModal .modal-dialog,
#profileModal .modal-dialog {
    max-width: 850px;
    /* Consistent width for both */
}

#authModal .modal-content,
#profileModal .modal-content {
    background-color: #fff;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    height: 550px;
    /* FIXED HEIGHT: Prevents resizing when switching tabs */
    border-radius: 20px;
    overflow: hidden;
    /* Ensures image doesn't bleed out */
}

#authModal .modal-row,
#profileModal .modal-row {
    height: 100%;
    /* Fill the fixed height */
}

/* 2. Left Side Images & Backgrounds */

/* Auth Modal: Image Background */
#authModal .modal-image-side {
    background-image: url('../images/hero-image.jpg');
    background-size: cover;
    background-position: center;
    height: 100%;
    position: relative;
}

#authModal .modal-image-side::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(49, 38, 42, 0.2);
    /* Dark overlay */
}

/* Profile Modal: Sidebar Background */
#profileModal .profile-sidebar-side {
    height: 100%;
    background-color: #31262A;
    /* Match brand dark color */
    color: white;
}

/* 3. Right Side (Form/Content Container) */
#authModal .modal-form-side,
#profileModal .modal-form-side {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Vertically center content */
    padding: 40px;
    position: relative;
}

/* 4. Typography */
.brand-serif,
#profileModal .brand-serif {
    font-family: "Times New Roman", Times, serif;
    letter-spacing: 1px;
    color: #31262A;
}

/* 5. Navigation Tabs */

/* Auth Tabs (Pills) */
#authModal .custom-auth-tabs .nav-link {
    color: #31262A !important;
    background-color: rgba(255, 234, 234, 0.3);
    border-radius: 50px;
    padding: 10px 20px;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s;
}

#authModal .custom-auth-tabs .nav-link:hover {
    color: #000 !important;
}

#authModal .custom-auth-tabs .nav-link.active {
    background-color: #FFEAEA;
    color: #31262A !important;
    opacity: 1;
    font-weight: 700;
}

/* Profile Sidebar Tabs (Vertical List) */
#profileModal .custom-profile-tabs .nav-link {
    color: rgba(255, 255, 255, 0.7);
    padding: 12px 20px;
    font-weight: 500;
    font-size: 0.95rem;
    border-radius: 10px;
    transition: all 0.3s;
    margin-bottom: 8px;
}

#profileModal .custom-profile-tabs .nav-link:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

#profileModal .custom-profile-tabs .nav-link.active {
    background-color: #FFEAEA;
    color: #31262A;
    font-weight: 600;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* 6. Form Inputs (Shared) */
#authModal .form-floating>.form-control,
#profileModal .form-floating>.form-control,
#profileModal .form-floating>textarea {
    border: 1px solid #eee;
    background-color: #f9f9f9;
    border-radius: 8px;
    font-size: 0.95rem;
    height: calc(3.5rem + 2px);
}

/* Adjust textarea height specifically */
#profileModal .form-floating>textarea {
    height: 100px;
}

#authModal .form-floating>.form-control:focus,
#profileModal .form-floating>.form-control:focus,
#profileModal .form-floating>textarea:focus {
    background-color: #fff;
    border-color: #ffcccc;
    box-shadow: 0 0 0 4px rgba(255, 204, 204, 0.2);
}

#authModal .form-floating>label,
#profileModal .form-floating>label {
    color: #aaa;
    font-size: 0.9rem;
}

/* 7. Buttons (Shared) */
#authModal .btn-auth-dark,
#profileModal .btn-auth-dark {
    background-color: #31262A;
    color: white;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: 0.9rem;
    border: none;
    width: 100%;
    transition: all 0.3s;
}

#authModal .btn-auth-dark:hover,
#profileModal .btn-auth-dark:hover {
    background-color: #E68A8A;
    transform: translateY(-2px);
}

#authModal .form-check-input:checked {
    background-color: #31262A;
    border-color: #31262A;
}

/* 8. Mobile Adjustments */
@media (max-width: 576px) {

    #authModal .custom-auth-tabs .nav-link,
    #profileModal .custom-profile-tabs .nav-link {
        font-size: 0.8rem;
        padding: 8px 10px;
    }

    /* On mobile, stack the profile sidebar */
    #profileModal .profile-sidebar-side {
        height: auto;
        padding: 20px !important;
    }
}

/* --- GENERAL BODY STYLES --- */
body {
    font-family: "Montserrat", sans-serif;
    margin: 0;
    padding: 0;
    background-color: #FFEAEA;
    overflow-x: hidden;
}

/* --- HEADER STYLES --- */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1001;
    background: transparent;
}

.top-bar {
    font-size: 12px;
    position: relative;
    z-index: 20;
}

.brand-logo {
    text-align: center;
    padding-top: 20px;
    margin-bottom: 0;
    color: white;
}

.brand-logo-text {
    font-weight: 100;
    font-size: 4rem;
    line-height: 0.9;
    padding-top: 10px;
    margin-bottom: 0;
}

.brand-logo-sub {
    font-size: 0.5em;
    font-weight: 300;
}

.navbar {
    background-color: transparent !important;
    padding-top: 10px;
}

.nav-link {
    color: white !important;
    font-weight: 500;
    text-transform: uppercase;
    font-size: 0.9rem;
    margin: 0 15px;
    letter-spacing: 1px;
}

.nav-link:hover {
    color: #ffcccc !important;
}

/* --- MEGA MENU STYLES --- */
.custom-dropdown-menu {
    left: 0;
    right: 0;
    border-radius: 0;
    border: none;
    margin-top: 0;
    padding-top: 2rem;
    padding-bottom: 2rem;
    width: 100%;
    z-index: 9999 !important;
    background-color: #ffffff;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    display: none;
    /* Default hidden, toggled by bootstrap */
    position: absolute;
    /* Bootstrap standard */
}

@keyframes dropdownAnimate {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure it displays on hover or click appropriately if using bootstrap js, 
   but for now just styling. Bootstrap handles display:block */
.nav-item.show .custom-dropdown-menu,
.dropdown-menu.show {
    display: block;
    animation: dropdownAnimate 0.3s ease forwards;
}

.mega-menu-logo {
    width: 150px;
    height: 150px;
    background-color: #ffcccc;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    margin: 0 auto;
}

.dropdown-menu a:hover {
    color: #ff88a0 !important;
    background: transparent;
}

@media (max-width: 991px) {
    .mega-menu-logo {
        display: none;
    }

    .dropdown-menu.w-100 {
        width: auto !important;
    }

    /* FIX: Full Screen Mobile Menu Overlay */
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        z-index: 9999;
        padding: 30px;
        overflow-y: auto;
        display: block;
        /* ensure it takes space when shown */

        /* Animation setup (Bootstrap adds 'show' class) */
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        /* Note: Bootstrap 'collapse' might conflict with transform if handled via height. 
           We rely on Bootstrap adding 'show' which we can target if needed, 
           but 'collapse.show' is standard. We force it to be an overlay. */
    }

    .navbar-collapse.show {
        transform: translateX(0);
    }

    /* When not collapsing (bootstrap transition), ensure it stays hidden nicely */
    .navbar-collapse.collapsing {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #ffffff;
        z-index: 9999;
        padding: 30px;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        height: 100vh !important;
        /* Override bootstrap height transition */
    }

    /* Menu Items Styling */
    .navbar-nav {
        text-align: left !important;
        /* Force left align */
        padding-top: 20px;
    }

    .nav-item {
        margin-bottom: 20px;
    }

    .nav-link {
        color: #E68A8A !important;
        /* Pink/Salmon Color from reference */
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 1.1rem;
        text-transform: uppercase;
        padding: 0;
        margin: 0;
    }

    .nav-link:hover {
        color: #d46e6e !important;
    }

    /* Dropdown Toggle Arrow */
    .dropdown-toggle::after {
        float: right;
        margin-top: 8px;
        color: #E68A8A;
    }

    /* Clean Dropdown inside the list */
    .custom-dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        box-shadow: none;
        background-color: transparent;
        padding: 0 0 0 15px;
        /* Indent sub-items */
        margin-top: 10px;
    }

    .custom-dropdown-menu .col-lg {
        margin-bottom: 10px;
    }

    .custom-dropdown-menu h6 {
        display: none;
        /* Hide category headers in simple mobile view if preferred, or keep small */
    }

    /* Make sub-links smaller but matches style */
    .custom-dropdown-menu a {
        color: #E68A8A !important;
        opacity: 0.8;
        font-size: 0.9rem;
        padding: 5px 0;
        display: block;
    }
}

/* Specific Mobile Logo Sizing adjustments to be readable */
@media (max-width: 991px) {
    .brand-logo-text {
        font-size: 1.4rem !important;
        line-height: 1;
        font-weight: 500;
        /* Slightly bolder for readability */
    }

    .brand-logo-sub {
        font-size: 0.5em !important;
        font-weight: 400;
    }
}

.cart-icon {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    color: white;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    /* Moved from inline style */
    padding-bottom: 150px;
}

/* --- HERO SECTION --- */
.hero-section {
    position: relative;

}

.carousel-item {
    height: 100vh;
    position: relative;
}


.hero-carousel-img {
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}


.carousel-caption {
    z-index: 2;
    padding-top: 150px;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
}


.hero-content {
    padding: 0 5%;
    width: 100%;
}

.hero-title {
    font-family: "Playfair Display", serif;
    font-size: 4rem;
    /* Larger to match reference */
    font-weight: 400;
    /* Regular weight looks closer to image than bold */
    text-transform: uppercase;
    /* Match All-Caps reference */
    line-height: 1.1;
    max-width: 900px;
    margin-bottom: 20px;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    letter-spacing: 2px;
    /* Slight spacing for caps */
}


.hero-desc {
    font-family: "Montserrat", sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.6;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    max-width: 700px;
    margin-bottom: 30px;
}

.btn-custom-pink {
    background-color: #ffcccc;
    color: white;
    border: 2px solid #ffcccc;
    border-radius: 50px;
    padding: 12px 40px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-right: 15px;
    transition: all 0.3s;
    text-decoration: none;
}

.btn-custom-pink:hover {
    background-color: white;
    color: #ffcccc;
    border-color: white;
}


@media (max-width: 991px) {
    .hero-title {
        font-size: 2.5rem;
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }

    .hero-desc {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
        font-size: 1rem;
    }

    .carousel-caption {
        align-items: center !important;
        text-align: center !important;
    }

    .hero-content {
        text-align: center;
    }

    .hero-buttons-wrapper {
        justify-content: center;
    }

    .carousel-item {
        min-height: 100vh;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 1.8rem;
        line-height: 1.2;
        margin-bottom: 15px;
    }

    .hero-desc {
        font-size: 0.9rem;
        line-height: 1.5;
        margin-bottom: 20px;
    }

    .hero-content {
        padding: 0 15px;
    }
}

/* --- SERVICE SECTION --- */
.service-section {
    background-color: #FFEAEA;
    padding: 80px 0;
}

.service-card-wrapper {
    position: relative;
    margin-bottom: 60px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.service-border-overlay {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border: 3px solid white;
    z-index: 10;
    pointer-events: none;
}

.service-text-col {
    background-color: #FFC4C4;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
    height: 100%;
}

.service-img-col {
    position: relative;
    min-height: 450px;
    max-height: 450px;
    height: 450px;
    overflow: hidden;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.service-title {
    font-family: "Montserrat", sans-serif;
    font-size: 3rem;
    font-weight: 400;
    /* Moved from inline */
    color: #31262A !important;
    margin-bottom: 20px;
}

.service-desc {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 30px;
    max-width: 90%;
}

.btn-service {
    background-color: rgba(255, 255, 255, 0.4);
    color: white;
    border-radius: 50px;
    padding: 10px 30px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.9rem;
    border: none;
    width: fit-content;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-service:hover {
    background-color: white;
    color: #FFC4C4;
}

@media (max-width: 991px) {
    .service-border-overlay {
        display: none;
    }

    .service-title {
        font-size: 2rem;
    }
}

/* --- FEATURED SECTION --- */
.featured-section {
    padding: 60px 0 100px 0;
    background-color: #FFEAEA;
}

.featured-title {
    font-family: "Times New Roman", Times, serif;
    text-align: center;
    font-size: 3.5rem;
    color: #31262A;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.collection-card {
    position: relative;
    overflow: hidden;
    height: 500px;
    width: 100%;
    background-color: white;
}

.collection-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.8s ease;
}

.collection-card:hover .collection-img {
    transform: scale(1.05);
}

.collection-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 40px 30px;
    z-index: 2;
    background: linear-gradient(to top, rgba(255, 255, 255, 0.9) 20%, rgba(255, 255, 255, 0.4) 70%, transparent 100%);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
}

.collection-name {
    font-family: "Times New Roman", Times, serif;
    font-weight: 700;
    font-size: 1.3rem;
    color: #000;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
}

.collection-desc {
    font-family: "Times New Roman", Times, serif;
    font-style: italic;
    font-size: 0.95rem;
    color: #222;
    margin-bottom: 15px;
    line-height: 1.3;
    max-width: 90%;
}

.btn-collection {
    background-color: #ffcccc;
    color: white;
    font-weight: 500;
    text-transform: uppercase;
    border-radius: 0;
    padding: 8px 25px;
    font-size: 0.8rem;
    border: none;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: "Montserrat", sans-serif;
}

.btn-collection:hover {
    background-color: #ff9999;
    color: white;
}

@media (max-width: 991px) {
    .collection-card {
        height: 400px;
    }

    .featured-title {
        font-size: 2.5rem;
    }
}

/* --- BEHIND TOL SECTION --- */
.behind-tol {
    position: relative;
    background: url('../images/hero-image1.jpg') no-repeat center center;
    background-size: cover;
    padding: 60px 20px;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.behind-card {
    position: relative;
    z-index: 2;
    background-color: #EBCFB2;
    width: 100%;
    max-width: 750px;
    padding: 50px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.behind-border-frame {
    border: 1px solid #5C332D;
    padding: 50px 40px;
    text-align: center;
}

.behind-subtitle {
    font-family: 'Times New Roman', serif;
    font-size: 0.9rem;
    letter-spacing: 3px;
    color: #5C332D;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 600;
}

.behind-title {
    font-family: 'Times New Roman', serif;
    font-size: 3rem;
    color: #5C332D;
    margin-bottom: 35px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.1;
}

.behind-desc {
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    line-height: 1.8;
    color: #5C332D;
    font-weight: 500;
}

@media (max-width: 768px) {
    .behind-tol {
        padding: 60px 15px;
        min-height: auto;
    }

    .behind-card {
        padding: 20px;
    }

    .behind-border-frame {
        padding: 30px 15px;
    }

    .behind-title {
        font-size: 2rem;
    }
}

/* --- CELEBS SECTION --- */
.celebs-section {
    padding: 80px 0;
    background-color: #FFEAEA;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.celebs-title {
    font-family: 'Times New Roman', serif;
    font-size: 3.5rem;
    color: #31262A;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 2px;
}


.celebs-carousel-window {
    overflow: hidden;
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1240px;
    /* Exactly 3 items: 400px * 3 + 20px * 2 gaps */
    padding: 0 5%;
    /* Align with arrow positions */
}

.celebs-track {
    display: flex;
    overflow-x: auto;
    /* scroll-behavior: smooth; REMOVED to prevent JS conflict */
    gap: 20px;
    padding: 10px 5px;
    align-items: center;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.celebs-track::-webkit-scrollbar {
    display: none;
}

.celeb-item {
    flex: 0 0 auto;
    width: 400px;
    height: 550px;
    position: relative;
    background: white;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.celeb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.celeb-item:hover {
    transform: translateY(-5px);
}

.celeb-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    background-color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    z-index: 20;
    cursor: pointer;
    color: #31262A;
    font-size: 1.2rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.celeb-btn:hover {
    background-color: #ffcccc;
    color: white;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
}

.prev-btn {
    left: 5%;
}

.next-btn {
    right: 5%;
}

@media (max-width: 991px) {
    .celebs-title {
        font-size: 2rem;
    }

    .celeb-item {
        width: 260px;
        height: 350px;
    }

    .celeb-btn {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .prev-btn {
        left: 10px;
    }

    .next-btn {
        right: 10px;
    }

    .celebs-carousel-window {
        max-width: 820px;
        /* 3 * 260 + 2 * 20 */
    }
}

/* --- REVIEWS SECTION --- */
.reviews-section {
    position: relative;
    background-color: #31262A;
    /* Fallback color */
}

/* Make this section shorter than the Hero section */
.reviews-section .carousel-item {
    height: 500px;
    /* Fixed height for reviews */
    min-height: auto;
}

.review-bg-img {
    height: 100%;
    object-fit: cover;
    filter: blur(2px);
    /* Slight blur to make text pop */
}

/* Darker overlay for better text readability */
.review-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1;
}

.review-caption {
    z-index: 2;
    padding-bottom: 50px;
    /* Space for the dots */
}

.review-content {
    max-width: 700px;
    padding: 0 20px;
}

.review-title {
    font-family: 'Times New Roman', serif;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.review-text {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 30px;
    font-weight: 300;
}

.review-author {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffcccc;
    /* Pink accent color */
}

@media (max-width: 768px) {
    .reviews-section .carousel-item {
        height: 600px;
        /* Taller on mobile to fit text */
    }

    .review-title {
        font-size: 1.8rem;
    }

    .review-text {
        font-size: 0.95rem;
    }
}

/* --- CAROUSEL CONTROLS --- */

.carousel-indicators,
.carousel-control-prev,
.carousel-control-next {
    z-index: 100 !important;
    /* Forces them on top of the text layer */
    cursor: pointer;
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;
    opacity: 0.7;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

.carousel-indicators [data-bs-target] {
    height: 5px;
    width: 40px;
    border-top: 0;
    border-radius: 30px;
    border-bottom: 0;
    margin: 0 5px;
    background-color: white;
    opacity: 0.5;
    transition: all 0.3s;
}

.carousel-indicators .active {
    opacity: 1;
    background-color: #ffcccc;
    transform: scale(1.2);
}

/* --- CUSTOMER REVIEWS SECTION --- */
.customer-reviews-section {
    padding: 80px 0;
    color: #333;
}

.section-title {
    font-family: "Times New Roman", Times, serif;
    color: #222;
    margin-bottom: 10px;
    font-size: 3.5rem;
}

.customer-reviews-section .carousel-item {
    height: 25vh;
    min-height: auto;
}

.text-custom-pink {
    color: #E68A8A;
}

.review-item {
    padding: 20px;
}

.review-highlight {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: #333;
}

.review-body {
    font-family: "Montserrat", sans-serif;
    font-size: 0.95rem;
    color: #444;
    line-height: 1.5;
    margin-bottom: 15px;
}

.review-author {
    color: #999;
    font-size: 0.85rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.review-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    /* Rounded square */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* --- Navigation Arrows (< >) --- */
.review-nav-controls {
    display: flex;
    justify-content: center;
    gap: 30px;
    /* Space between arrows */
    margin-top: 20px;
}

.nav-arrow {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #d1d1d1;
    /* Light grey default */
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 5px 15px;
}

.nav-arrow:hover {
    color: #E68A8A;
    /* Turns pink on hover */
    transform: scale(1.2);
}

/* --- MAIN FOOTER STYLES --- */
.main-footer {
    background-color: #ffffff;
    color: #31262A;
    font-family: "Montserrat", sans-serif;
    border-top: 1px solid #f0f0f0;
}

.footer-heading {
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    color: #31262A;
}

/* Links */
.footer-links li {
    margin-bottom: 10px;
}

.footer-links a {
    color: #555;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #E68A8A;
    /* Your brand pink */
}

/* Contact Info */
.contact-info li {
    margin-bottom: 10px;
    color: #555;
    font-size: 0.95rem;
}

/* Social Icons */
.social-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    color: white;
    font-size: 1.2rem;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.social-circle:hover {
    transform: translateY(-3px);
    color: white;
}


.tiktok {
    background-color: #000;
}

.instagram {
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

.facebook {
    background-color: #1877F2;
}


.newsletter-form .input-group {
    background: #f8f8f8;
    border-radius: 5px;
    padding: 5px;
    border: 1px solid #eee;
}

.newsletter-form .form-control {
    border: none;
    background: transparent;
    font-size: 0.9rem;
    box-shadow: none;
    /* Removes blue outline on focus */
}

.btn-subscribe {
    background-color: #FFEAEA;
    /* Light Pink */
    color: #31262A;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 4px;
    padding: 8px 15px;
    border: 1px solid #FFEAEA;
    transition: all 0.3s;
}

.btn-subscribe:hover {
    background-color: #ffcccc;
    color: #000;
}

/* Bottom Bar */
.footer-bottom {
    background-color: #31262A;
    /* Dark contrast bar like image */
    color: white;
}

/* Payment Badges */
.payment-badge {
    font-size: 1.5rem;
    color: white;
    display: flex;
    align-items: center;
}

/* Text badge fallback for Maya/Gcash */
.payment-badge:not(:has(i)) {
    font-size: 0.9rem;
    font-weight: bold;
    background: white;
    color: #31262A;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Chat Button (Floating Action Button) */
.btn-chat {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #FFEAEA;
    color: #31262A;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    border: 2px solid transparent;
    /* Optional border if needed, or remove */
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 9999;
}

.btn-chat:hover {
    background-color: #ffcccc;
    color: #000;
    border-color: #ffcccc;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}

/* Responsive Vertical Divider Line */
@media (max-width: 991px) {
    .border-end {
        border-right: none !important;
    }
}