/* ==========================================================================
   Maglev Design Frontend Custom Overrides
   ========================================================================== */

/* Spacing and Dimensions */
.py-40 {
    padding-top: 40px;
    padding-bottom: 40px;
}
.py-60 {
    padding-top: 60px;
    padding-bottom: 60px;
}
.py-80 {
    padding-top: 80px;
    padding-bottom: 80px;
}
.mt-20 {
    margin-top: 20px;
}
.mt-40 {
    margin-top: 40px;
}
.mt-60 {
    margin-top: 60px;
}
.mb-20 {
    margin-bottom: 20px;
}
.mb-30 {
    margin-bottom: 30px;
}
.mb-40 {
    margin-bottom: 40px;
}
.img-w-100 {
    width: 100%;
}

/* Typography & Colors */
.text-white {
    color: #fff !important;
}
.text-light-gray {
    color: #ddd !important;
}
.cta-title {
    color: #fff !important;
    margin-bottom: 10px !important;
}
.cta-desc {
    color: #f0e8d8 !important;
    margin-bottom: 20px !important;
}

/* Custom Components & Containers */
.contact-box-inner {
    padding: 40px 24px;
}

.project-filter-list-flex {
    list-style: none;
    padding: 0;
    display: inline-flex;
    gap: 10px;
    flex-wrap: wrap;
}

.project-info-card {
    background: #f8f5f0;
    padding: 30px;
    border-radius: 4px;
    margin-bottom: 30px;
}

.list-unstyled {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-info-item {
    padding: 10px 0;
    border-bottom: 1px solid #e0d8cc;
}

.project-info-item-last {
    padding: 10px 0;
}

.sidebar-cta-box {
    background: #c8a96e;
    padding: 30px;
    border-radius: 4px;
    text-align: center;
}

.appointment-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e0e0e0;
}

.faq-card {
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.faq-trigger-btn {
    text-decoration: none;
    color: #333;
    font-weight: 600;
}

.faq-body {
    padding: 20px;
}

.faq-cta-box {
    background: #f8f5f0;
    padding: 40px;
    border-radius: 4px;
}

.alert-custom-success {
    background: #dff0d8;
    border: 1px solid #d6e9c6;
    color: #3c763d;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-custom-danger {
    background: #f2dede;
    border: 1px solid #ebccd1;
    color: #a94442;
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.list-bullet {
    margin: 0;
    padding-left: 18px;
}

.pagination-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.post-meta-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    color: #888;
    font-size: 14px;
}

.blog-post-content {
    line-height: 1.8;
}

.post-nav-wrapper {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e0d8cc;
}

/* ==========================================================================
   Crystalo Premium UI/UX & Dynamic Animations Override
   ========================================================================== */

:root {
    --crystalo-gold: #c8a96e;
    --crystalo-gold-hover: #b49359;
    --crystalo-red: #e9212e;
    --crystalo-dark: #27282c;
    --crystalo-gray-light: #f9f6f0;
    --crystalo-shadow-premium: 0 15px 35px rgba(0, 0, 0, 0.04), 0 5px 15px rgba(0, 0, 0, 0.02);
    --crystalo-shadow-hover: 0 25px 50px rgba(200, 169, 110, 0.15);
    --crystalo-transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Animation Keyframes */
@keyframes crystaloFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes crystaloFadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes crystaloPulseGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(233, 33, 46, 0.4);
    }
    70% {
        box-shadow: 0 0 0 12px rgba(233, 33, 46, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(233, 33, 46, 0);
    }
}

@keyframes crystaloFloat {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
    100% {
        transform: translateY(0px);
    }
}

/* Entrance Trigger Classes */
.crystalo-animate-up {
    opacity: 0;
    animation: crystaloFadeInUp 0.8s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.crystalo-animate-right {
    opacity: 0;
    animation: crystaloFadeInRight 0.9s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.anim-delay-1 { animation-delay: 0.1s; }
.anim-delay-2 { animation-delay: 0.25s; }
.anim-delay-3 { animation-delay: 0.4s; }
.anim-delay-4 { animation-delay: 0.55s; }

/* ==========================================================================
   Luxury Minimalist Contact Page Design
   ========================================================================== */

/* Elegant Geometric Contact Cards */
.crystalo-contact-card {
    background: #ffffff;
    border: 1px solid #ededed;
    border-radius: 0px; /* Sharp corners represent clean architectural geometry */
    padding: 25px 25px;
    margin-bottom: 25px;
    transition: var(--crystalo-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.crystalo-contact-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--crystalo-gold);
    transition: var(--crystalo-transition);
}

.crystalo-contact-card:hover {
    transform: translateX(5px); /* Minimal, elegant shift rather than heavy tech float */
    border-color: var(--crystalo-gold);
}

.crystalo-contact-card:hover::before {
    height: 100%;
}

.crystalo-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 0px; /* Sharp geometric corners */
    background: #fcfbfa;
    border: 1px solid #ededed;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    transition: var(--crystalo-transition);
}

.crystalo-contact-card:hover .crystalo-card-icon {
    background: var(--crystalo-gold);
    border-color: var(--crystalo-gold);
}

.crystalo-card-icon i {
    font-size: 20px;
    color: var(--crystalo-gold);
    transition: var(--crystalo-transition);
}

.crystalo-contact-card:hover .crystalo-card-icon i {
    color: #ffffff;
}

.crystalo-card-details h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--crystalo-dark);
    margin-bottom: 4px;
    font-family: 'Poppins', sans-serif;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.crystalo-card-details p {
    font-size: 14px;
    line-height: 1.5;
    color: #666;
    margin: 0;
    font-family: 'Rubik', sans-serif;
}

/* Premium Minimalist Input focus overlays */
.contact-form form .input-box input[type="text"]:focus,
.contact-form form .input-box input[type="email"]:focus,
.contact-form form .input-box textarea:focus {
    border-color: var(--crystalo-gold) !important;
    background: #ffffff !important;
    box-shadow: none !important;
    color: var(--crystalo-dark) !important;
}

/* JQuery UI select dropdown match focus */
.contact-form form .input-box .ui-selectmenu-button {
    transition: var(--crystalo-transition);
}

.contact-form form .input-box .ui-selectmenu-button:hover,
.contact-form form .input-box .ui-selectmenu-button:focus,
.contact-form form .input-box .ui-selectmenu-button.ui-state-active {
    border-color: var(--crystalo-gold) !important;
    background: #ffffff !important;
    color: var(--crystalo-dark) !important;
}

.contact-form form .input-box .ui-selectmenu-button.ui-state-active span.ui-icon::before {
    color: var(--crystalo-gold) !important;
}

/* Elegant Icon Micro-interaction on field focus and selectmenu active state */
.contact-form form .input-box:focus-within .icon i,
.contact-form form .input-box .ui-selectmenu-button:focus ~ .icon i,
.contact-form form .input-box .ui-selectmenu-button.ui-state-active ~ .icon i {
    color: var(--crystalo-gold) !important;
    transition: var(--crystalo-transition);
}

/* Logo Styling for Header to prevent overflow & sizing issues */
.logo-box-style1 img {
    max-height: 110px;
    width: auto;
    object-fit: contain;
    transition: var(--crystalo-transition);
}

.logo-box-style1 {
    margin: 2px 0 !important; /* Extremely small margin to maximize logo space */
}

/* Reduced size in sticky header for cleaner alignment */
.header-upper-style1.fixed-header .logo-box-style1 img {
    max-height: 55px;
}

.header-upper-style1.fixed-header .logo-box-style1 {
    margin: 5px 0 !important;
}

/* Perfectly center the navigation menu items vertically to match the 110px logo */
.header-style1 .main-menu .navigation > li > a {
    padding: 50px 0px !important; /* Perfect mathematical centering for normal header */
}
.header-style1 .outer-search-box {
    padding: 32px 0 !important;
}
.header-style1 .cart-box {
    margin: 32px 0 !important;
    padding: 0 !important;
}

/* Centering overrides in sticky header mode */
.header-upper-style1.fixed-header .main-menu .navigation > li > a {
    padding: 22px 0px !important; /* Perfect mathematical centering for sticky header */
}
.header-upper-style1.fixed-header .outer-search-box {
    padding: 5px 0 !important;
}
.header-upper-style1.fixed-header .cart-box {
    margin: 5px 0 !important;
    padding: 0 !important;
}

/* Shifted Header Contact Info inside Gold Top Bar */
.top-bar-style1 {
    background: #c8a96e !important; /* Premium brand gold color matching logo and theme */
    padding: 12px 0 55px !important;
}
.top-bar-style1 .header-contact-info {
    border-left: none;
    padding-left: 0;
}
.top-bar-style1 .header-contact-info li {
    border-right: 1px solid #dcbfa2 !important; /* Softer border dividing contact items */
    padding-right: 20px;
    margin-right: 20px;
}
.top-bar-style1 .header-contact-info li:last-child {
    border-right: none !important;
}
.top-bar-style1 .header-contact-info li .single-item .icon span:before {
    color: #1b1b1b !important; /* Elegant dark contrast for icons */
    font-size: 36px;
    line-height: 36px;
}
.top-bar-style1 .header-contact-info li .single-item .text {
    padding-left: 10px;
}
.top-bar-style1 .header-contact-info li .single-item .text h3 {
    color: #1b1b1b !important; /* Dark bold titles */
    font-size: 13px;
    font-weight: 600;
}
.top-bar-style1 .header-contact-info li .single-item .text p {
    color: #ffffff !important; /* Pure white description text */
    font-size: 12px;
    margin-top: 2px;
}
.top-bar-style1 .header-social-links-style1 {
    margin: -3px 0 0;
}
.top-bar-style1 .header-social-links-style1 li a i {
    width: 36px;
    height: 36px;
    line-height: 36px;
    font-size: 12px;
    background: #1b1b1b !important; /* Dark background for social icons */
    color: #ffffff !important; /* White icons */
}
.top-bar-style1 .header-social-links-style1 li a:hover i {
    background: #ffffff !important; /* White background on hover */
    color: #1b1b1b !important; /* Dark icon on hover */
}

/* Close the gap between the header/top-bar and the main slider */
.header-upper-style1 {
    background: transparent !important;
    margin-bottom: -67px !important; /* Pulled up by an extra 22px to perfectly eliminate any 2px gap */
}
.main-slider {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ==========================================================================
   Luxury Single Service Page UI/UX Redesign
   ========================================================================== */

.services-single-area {
    padding: 80px 0;
    background: #faf8f5; /* Serene warm background */
}

/* Sidebar Categories styling */
.sidebar-categories {
    background: #ffffff;
    border: 1px solid #ededed;
    padding: 30px;
    margin-bottom: 30px;
}

.sidebar-categories .title h3 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--crystalo-dark);
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.sidebar-categories .title h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--crystalo-gold);
}

.categories-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.categories-list li {
    margin-bottom: 12px;
}

.categories-list li:last-child {
    margin-bottom: 0;
}

.categories-list li a {
    display: block;
    padding: 12px 18px;
    background: #fcfbfa;
    border: 1px solid #ededed;
    color: #555;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: var(--crystalo-transition);
    position: relative;
}

.categories-list li a::before {
    content: '\f105'; /* FontAwesome angle right */
    font-family: 'FontAwesome';
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    opacity: 0;
    transition: var(--crystalo-transition);
}

.categories-list li a:hover {
    background: var(--crystalo-gold);
    border-color: var(--crystalo-gold);
    color: #ffffff !important;
    padding-left: 24px;
}

.categories-list li a:hover::before {
    opacity: 1;
    right: 14px;
}

/* Sidebar Contact box styling */
.sidebar-contact {
    position: relative;
    background-size: cover;
    background-position: center;
    padding: 50px 30px;
    z-index: 1;
    overflow: hidden;
}

.sidebar-contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(39, 40, 44, 0.9); /* Dark overlay */
    z-index: -1;
}

.sidebar-contact h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
}

.sidebar-contact p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* Main Content styling */
.services-single-content {
    background: #ffffff;
    border: 1px solid #ededed;
    padding: 40px;
}

.services-single-content .img-holder {
    position: relative;
    overflow: hidden;
    margin-bottom: 35px;
}

.services-single-content .img-holder img {
    width: 100%;
    height: auto;
    transition: var(--crystalo-transition);
}

.services-single-content .img-holder:hover img {
    transform: scale(1.03);
}

.services-single-content .text-holder h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--crystalo-dark);
    margin-bottom: 20px;
    font-family: 'Poppins', sans-serif;
}

.services-single-content .text-holder strong {
    display: block;
    border-left: 3px solid var(--crystalo-gold);
    padding-left: 15px;
    font-style: italic;
    font-size: 16px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.6;
    font-family: 'Rubik', sans-serif;
}

.services-single-content .text-holder p {
    font-size: 15px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
    font-family: 'Rubik', sans-serif;
}

/* ==========================================================================
   Luxury Projects Portfolio UI/UX Redesign
   ========================================================================== */

.projects-page-area {
    padding: 80px 0;
    background: #faf8f5; /* Warm luxury background matching single services */
}

/* Sleek Category Filter Tabs */
.project-filter-list-flex {
    display: inline-flex;
    gap: 30px;
    border-bottom: 2px solid #ededed;
    padding-bottom: 12px;
    width: 100%;
    justify-content: center;
    margin-bottom: 50px;
    list-style: none;
}

.project-filter-list-flex li {
    display: inline-block;
}

.project-filter-list-flex li a {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #888;
    padding: 8px 0;
    position: relative;
    transition: var(--crystalo-transition);
    text-decoration: none;
}

.project-filter-list-flex li a:hover,
.project-filter-list-flex li a.active-filter {
    color: var(--crystalo-gold) !important;
}

.project-filter-list-flex li a::after {
    content: '';
    position: absolute;
    bottom: -14px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--crystalo-gold);
    transition: var(--crystalo-transition);
}

.project-filter-list-flex li a:hover::after,
.project-filter-list-flex li a.active-filter::after {
    width: 100%;
}

/* Gold Theme hover triggers for Project Cards */
.projects-page-area .single-project-style1 .overlay-content .inner-content .link-box a:hover {
    background: var(--crystalo-gold) !important;
    border-color: var(--crystalo-gold) !important;
    color: #ffffff !important;
}

.projects-page-area .single-project-style1 {
    box-shadow: 0 5px 15px rgba(0,0,0,0.02);
    transition: var(--crystalo-transition);
}

.projects-page-area .single-project-style1:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px rgba(200, 169, 110, 0.08);
}

/* Smooth Hardware-Accelerated Filtering Transitions */
.project-card-item {
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    will-change: opacity, transform;
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* ==========================================================================
   Single Project Details Page Design (UX/UI Enhancements)
   ========================================================================== */

.project-single-area {
    padding-top: 120px; /* Luxurious breathing gap to prevent header overlapping */
    padding-bottom: 80px;
    background: #faf8f5; /* Serene warm background */
}

/* Image Showcase & Cinematic Hover */
.project-showcase-wrapper {
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(200, 169, 110, 0.15);
    background: #ffffff;
}

.project-showcase-wrapper img {
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
    width: 100%;
}

.project-showcase-wrapper:hover img {
    transform: scale(1.035);
}

/* Typography & Titles */
.project-details-title {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}

/* Premium Highlighted Blockquote */
.project-intro-quote {
    background: #ffffff;
    border-left: 4px solid var(--crystalo-gold, #c8a96e);
    padding: 25px 30px;
    border-radius: 0 8px 8px 0;
    margin: 35px 0;
    box-shadow: 0 4px 20px rgba(200, 169, 110, 0.03);
    border-top: 1px solid rgba(200, 169, 110, 0.05);
    border-right: 1px solid rgba(200, 169, 110, 0.05);
    border-bottom: 1px solid rgba(200, 169, 110, 0.05);
}

.project-intro-quote p {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-style: italic;
    color: #555555;
    line-height: 1.8;
    margin: 0;
    font-weight: 500;
}

/* Description body */
.project-main-description {
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    color: #666666;
    line-height: 1.85;
}

.project-main-description p {
    margin-bottom: 20px;
}

/* Luxury Specifications Panel */
.project-specs-card {
    background: #ffffff;
    border: 1px solid rgba(200, 169, 110, 0.15);
    border-radius: 8px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02);
}

.specs-card-header h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #1a1a1a;
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid #ededed;
}

.specs-card-header h3::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--crystalo-gold, #c8a96e);
}

.spec-row, .spec-row-last {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed #e8e3d8;
}

.spec-row-last {
    border-bottom: none;
    padding-bottom: 0;
}

.spec-label {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888888;
}

.spec-val {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 14px;
    color: var(--crystalo-gold, #c8a96e);
    text-align: right;
}

/* High-Contrast Luxury Dark CTA Panel */
.sidebar-luxury-cta {
    background: #1c1c1c;
    border-radius: 8px;
    padding: 40px 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.sidebar-luxury-cta .cta-accent-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--crystalo-gold, #c8a96e);
}

.cta-title-luxury {
    font-family: 'Poppins', sans-serif;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

.cta-desc-luxury {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #cccccc !important;
    line-height: 1.6;
    margin-bottom: 25px !important;
}

.btn-luxury-cta {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: transparent;
    border: 2px solid var(--crystalo-gold, #c8a96e);
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 12px 20px;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-luxury-cta:hover {
    background: var(--crystalo-gold, #c8a96e);
    color: #1c1c1c !important;
    border-color: var(--crystalo-gold, #c8a96e);
}

/* ==========================================================================
   Blog Page Redesign (UX/UI Overhaul)
   ========================================================================== */

.blog-page-area {
    padding-top: 120px; /* Spacious breathing gap to prevent header overlapping */
    padding-bottom: 80px;
    background: #faf8f5; /* Serene warm background */
}

/* Luxury Magazine Editorial Blog Cards */
.luxury-blog-card {
    background: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(200, 169, 110, 0.12);
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s ease;
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px); /* Equal height grid support */
}

.luxury-blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(200, 169, 110, 0.08);
}

.luxury-blog-card .img-holder {
    overflow: hidden;
    position: relative;
    aspect-ratio: 16 / 10;
}

.luxury-blog-card .img-holder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: block;
}

.luxury-blog-card:hover .img-holder img {
    transform: scale(1.04);
}

/* Floating Luxury Date Badge */
.luxury-blog-date-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: #1c1c1c;
    color: #ffffff;
    padding: 8px 14px;
    border-radius: 4px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    border-bottom: 2px solid var(--crystalo-gold, #c8a96e);
    z-index: 2;
}

.luxury-blog-date-badge h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    line-height: 1;
    color: #ffffff !important;
}

.luxury-blog-date-badge span {
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 2px;
    color: var(--crystalo-gold, #c8a96e) !important;
}

/* Text Container */
.luxury-blog-card .text-holder {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.luxury-blog-card .meta-box {
    margin-bottom: 12px;
}

.luxury-blog-card .meta-info {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #888888;
}

.luxury-blog-card .meta-info li {
    position: relative;
}

.luxury-blog-card .meta-info li a {
    color: var(--crystalo-gold, #c8a96e) !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.luxury-blog-card .meta-info li a:hover {
    color: #1a1a1a !important;
}

.luxury-blog-card .blog-title {
    font-family: 'Poppins', sans-serif;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 15px;
}

.luxury-blog-card .blog-title a {
    color: #1a1a1a !important;
    text-decoration: none;
    transition: color 0.3s ease;
}

.luxury-blog-card .blog-title a:hover {
    color: var(--crystalo-gold, #c8a96e) !important;
}

.luxury-blog-card .text {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.luxury-blog-card .text p {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    color: #666666;
    line-height: 1.7;
    margin-bottom: 20px;
}

.luxury-blog-card .btn-readmore {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--crystalo-gold, #c8a96e) !important;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 3px;
    align-self: flex-start;
}

.luxury-blog-card .btn-readmore::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 1.5px;
    background: var(--crystalo-gold, #c8a96e);
    transition: width 0.3s ease;
}

.luxury-blog-card .btn-readmore:hover::after {
    width: 100%;
}

.luxury-blog-card .btn-readmore span {
    font-size: 10px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.luxury-blog-card .btn-readmore:hover span {
    transform: translateX(3px);
}

/* Modern Geometric Pagination Slots */
.styled-pagination ul {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 20px 0 0 0 !important;
}

.styled-pagination li a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 40px !important;
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    padding: 0 10px !important;
}

.styled-pagination li.active a,
.styled-pagination li a:hover {
    background: var(--crystalo-gold, #c8a96e) !important;
    border-color: var(--crystalo-gold, #c8a96e) !important;
    color: #ffffff !important;
}

/* Sophisticated Sidebar Overhaul */
.sidebar-wrapper {
    padding-left: 15px;
}

.single-sidebar-wrapper {
    background: #ffffff !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 8px !important;
    padding: 30px !important;
    margin-bottom: 30px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02) !important;
}

.single-sidebar-wrapper .title h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #1a1a1a !important;
    margin: 0 0 20px 0 !important;
    padding-bottom: 12px !important;
    position: relative !important;
    border-bottom: 1px solid #ededed !important;
}

.single-sidebar-wrapper .title h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--crystalo-gold, #c8a96e) !important;
}

/* Modern search widget */
.search-box-widget form .form-group {
    position: relative !important;
    margin: 0 !important;
}

.search-box-widget input[type="search"] {
    width: 100% !important;
    height: 48px !important;
    padding: 10px 50px 10px 20px !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 4px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: #faf8f5 !important;
    color: #333 !important;
}

.search-box-widget input[type="search"]:focus {
    border-color: var(--crystalo-gold, #c8a96e) !important;
    background: #ffffff !important;
    outline: none !important;
}

.search-box-widget button {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    width: 48px !important;
    height: 48px !important;
    background: transparent !important;
    border: none !important;
    color: var(--crystalo-gold, #c8a96e) !important;
    font-size: 16px !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
}

.search-box-widget button:hover {
    color: #1a1a1a !important;
}

/* Categories & Services Lists */
.categories-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.categories-list li {
    border-bottom: 1px dashed #e8e3d8 !important;
}

.categories-list li:last-child {
    border-bottom: none !important;
}

.categories-list li a {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #555555 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.categories-list li a:hover {
    color: var(--crystalo-gold, #c8a96e) !important;
    padding-left: 5px !important;
}

.categories-list li a span {
    font-size: 12px !important;
    color: #888888 !important;
    font-weight: 500 !important;
}

/* Recent posts in sidebar */
.recent-post-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.recent-post-list li {
    display: flex !important;
    gap: 15px !important;
    align-items: center !important;
    padding: 15px 0 !important;
    border-bottom: 1px dashed #e8e3d8 !important;
}

.recent-post-list li:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.recent-post-list li:first-child {
    padding-top: 0 !important;
}

.recent-post-list .img-holder {
    width: 65px !important;
    height: 65px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(200, 169, 110, 0.1) !important;
}

.recent-post-list .img-holder img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.4s ease !important;
    display: block !important;
}

.recent-post-list li:hover .img-holder img {
    transform: scale(1.08) !important;
}

.recent-post-list .title-holder p {
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: #999999 !important;
    margin-bottom: 4px !important;
    font-weight: 600 !important;
}

.recent-post-list .title-holder h5 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
}

.recent-post-list .title-holder h5 a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
}

.recent-post-list .title-holder h5 a:hover {
    color: var(--crystalo-gold, #c8a96e) !important;
}

/* ==========================================================================
   Contact Page Redesign (UX/UI Overhaul)
   ========================================================================== */

.contact-info-area {
    padding-top: 120px; /* Spacious breathing gap to prevent header overlapping */
    padding-bottom: 80px;
    background: #faf8f5; /* Serene warm background */
}

.contact-form .inner-box {
    background: #ffffff !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 8px !important;
    padding: 40px !important;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.02) !important;
    margin-bottom: 30px !important;
}

.contact-form .inner-box .sec-title {
    padding-bottom: 25px !important;
}

.contact-form .inner-box .sec-title .title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin: 0 !important;
    padding-bottom: 12px !important;
    position: relative !important;
    text-transform: uppercase !important;
}

.contact-form .inner-box .sec-title .title::after {
        content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--crystalo-gold, #c8a96e) !important;
}

/* ==========================================================================
   Luxury Bespoke Footer Redesign
   ========================================================================== */

.footer-area {
    background: #171717 !important; /* Premium rich charcoal */
    padding: 80px 0 50px !important;
    position: relative;
    border-top: 3px solid var(--crystalo-gold, #c8a96e);
}

.crystalo-footer-widget {
    margin-bottom: 40px;
}

.crystalo-footer-widget .title h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 25px 0 !important;
    padding-bottom: 12px !important;
    position: relative !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.crystalo-footer-widget .title h3::after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    width: 40px !important;
    height: 2px !important;
    background: var(--crystalo-gold, #c8a96e) !important;
}

/* Contact info widget style overrides */
.crystalo-footer-widget .contact-info-box .footer-logo {
    margin-bottom: 25px !important;
}

.crystalo-footer-widget .contact-info-box .footer-logo img {
    max-height: 50px !important;
    width: auto !important;
}

.crystalo-footer-widget .contact-info-box ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.crystalo-footer-widget .contact-info-box ul li {
    margin-bottom: 20px !important;
    position: relative !important;
}

.crystalo-footer-widget .contact-info-box ul li h6 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--crystalo-gold, #c8a96e) !important;
    margin-bottom: 4px !important;
}

.crystalo-footer-widget .contact-info-box ul li p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #cccccc !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Services links widget style overrides */
.crystalo-footer-widget .services-links ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.crystalo-footer-widget .services-links ul li {
    margin-bottom: 12px !important;
    border: none !important;
}

.crystalo-footer-widget .services-links ul li a {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #bbbbbb !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    padding: 0 !important;
}

.crystalo-footer-widget .services-links ul li a:hover {
    color: var(--crystalo-gold, #c8a96e) !important;
    transform: translateX(4px) !important;
}

/* Brochure and carousels widget style overrides */
.crystalo-footer-widget .single-item {
    background: #1f1f1f !important;
    border: 1px solid rgba(200, 169, 110, 0.15) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.crystalo-footer-widget .single-item .img-holder {
    overflow: hidden !important;
    position: relative !important;
}

.crystalo-footer-widget .single-item .img-holder img {
    width: 100% !important;
    transition: transform 0.6s ease !important;
}

.crystalo-footer-widget .single-item:hover .img-holder img {
    transform: scale(1.04) !important;
}

.crystalo-footer-widget .single-item .title-holder {
    padding: 20px !important;
    text-align: center !important;
}

.crystalo-footer-widget .single-item .title-holder h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    line-height: 1.45 !important;
    margin-bottom: 12px !important;
}

.crystalo-footer-widget .single-item .title-holder .btn-two {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: var(--crystalo-gold, #c8a96e) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    transition: all 0.3s ease !important;
}

.crystalo-footer-widget .single-item .title-holder .btn-two:hover {
    color: #ffffff !important;
}

/* Footer Bottom styles */
.footer-bottom-area {
    background: #0f0f0f !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 20px 0 !important;
}

.footer-bottom-content {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
}

.copyright-text p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #888888 !important;
    margin: 0 !important;
}

.footer-social-links span {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #888888 !important;
    margin-right: 10px !important;
}

.sociallinks-style-one li a i {
    color: #888888 !important;
    transition: color 0.3s ease !important;
}

.sociallinks-style-one li a:hover i {
    color: var(--crystalo-gold, #c8a96e) !important;
}

/* ==========================================================================
   Interactive Cost Estimator & Modal Styles (Homepage)
   ========================================================================== */

.appointment-area {
    background: radial-gradient(circle at top right, #fffcfb 0%, #faf8f5 100%) !important;
    padding: 100px 0 !important;
    border-top: 1px solid rgba(200, 169, 110, 0.1) !important;
    border-bottom: 1px solid rgba(200, 169, 110, 0.1) !important;
}

.gold-subtitle {
    color: var(--crystalo-gold, #c8a96e) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
}

/* Estimator Cards Layout */
.estimator-card {
    background: #ffffff !important;
    border: 1px solid #f1eeeb !important;
    border-radius: 12px !important;
    padding: 40px 30px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.estimator-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 45px rgba(238, 94, 94, 0.06) !important;
    border-color: rgba(238, 94, 94, 0.25) !important;
}

.card-icon-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 30px !important;
}

.main-icon-wrapper {
    flex-grow: 1 !important;
    max-width: 120px !important;
}

.calc-icon-wrapper {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

.card-body-content {
    margin-bottom: 25px !important;
    flex-grow: 1 !important;
}

.card-body-content h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #1a1a1a !important;
    margin-bottom: 8px !important;
}

.card-body-content p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #777777 !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Coral-red pill calculate buttons */
.btn-calculate {
    display: inline-flex !important;
    width: 100% !important;
    height: 48px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ee5e5e !important;
    color: #ffffff !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    border: none !important;
    border-radius: 30px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(238, 94, 94, 0.15) !important;
    text-decoration: none !important;
}

.btn-calculate:hover {
    background: #d64a4a !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(238, 94, 94, 0.3) !important;
    color: #ffffff !important;
}

.btn-calculate span {
    font-size: 12px !important;
    transition: transform 0.3s ease !important;
}

.btn-calculate:hover span {
    transform: translateX(3px) !important;
}

/* Modern Cost Estimator Modal System */
.estimator-modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    display: none;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99999 !important;
}

.estimator-modal-dialog {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(238, 94, 94, 0.1) !important;
    width: 95% !important;
    max-width: 600px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12) !important;
    position: relative !important;
    animation: modalFadeIn 0.35s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.estimator-modal-close {
    position: absolute !important;
    top: 20px !important;
    right: 24px !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    color: #b5afb5 !important;
    cursor: pointer !important;
    transition: color 0.3s ease !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.estimator-modal-close:hover {
    color: #ee5e5e !important;
}

/* Modal Content Options Grids */
.modal-step-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #2b2529 !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    margin-top: 10px !important;
}

.modal-step-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #777777 !important;
    text-align: center !important;
    margin-bottom: 25px !important;
    line-height: 1.5 !important;
}

.option-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
}

.option-grid-vertical {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
}

/* BHK Selector Option Buttons */
.opt-btn {
    background: #faf8f5 !important;
    border: 1px solid #e8e3d8 !important;
    padding: 16px 10px !important;
    border-radius: 8px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #333333 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
}

.opt-btn:hover {
    border-color: #ee5e5e !important;
    color: #ee5e5e !important;
    background: #fffcfb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(238, 94, 94, 0.05) !important;
}

/* Package Selector Option Buttons */
.opt-btn-block {
    text-align: left !important;
    background: #faf8f5 !important;
    border: 1px solid #e8e3d8 !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.opt-btn-block strong {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1c1c1c !important;
    transition: color 0.3s ease !important;
}

.opt-btn-block span {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #777777 !important;
    margin-top: 4px !important;
    line-height: 1.4 !important;
}

.opt-btn-block:hover {
    border-color: #ee5e5e !important;
    background: #fffcfb !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(238, 94, 94, 0.05) !important;
}

.opt-btn-block:hover strong {
    color: #ee5e5e !important;
}

/* Lead Info Form Elements inside Modal */
.form-group-modal {
    margin-bottom: 16px !important;
}

.form-group-modal input {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    background: #faf8f5 !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
}

.form-group-modal input:focus {
    border-color: #ee5e5e !important;
    background: #ffffff !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(238, 94, 94, 0.05) !important;
}

.btn-submit-modal {
    width: 100% !important;
    background: #ee5e5e !important;
    color: #ffffff !important;
    border: none !important;
    height: 48px !important;
    border-radius: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-size: 13px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(238, 94, 94, 0.15) !important;
}

.btn-submit-modal:hover {
    background: #d64a4a !important;
    box-shadow: 0 6px 18px rgba(238, 94, 94, 0.25) !important;
}

/* Calculation Loader Spinner */
.spinner-estimator {
    width: 50px !important;
    height: 50px !important;
    border: 3px solid rgba(238, 94, 94, 0.1) !important;
    border-radius: 50% !important;
    border-top-color: #ee5e5e !important;
    animation: spinEstimator 0.8s linear infinite !important;
    display: inline-block !important;
}

@keyframes spinEstimator {
    to {
        transform: rotate(360deg);
    }
}

/* Dynamic Estimate Results Screen */
.result-badge-circle {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    background: #fff5f5 !important;
    border: 2px solid rgba(238, 94, 94, 0.15) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
}

.estimate-result-box {
    background: #fff8f8 !important;
    border: 1px dashed rgba(238, 94, 94, 0.3) !important;
    border-radius: 10px !important;
    padding: 22px !important;
    margin: 20px 0 !important;
    text-align: center !important;
}

.estimate-price {
    font-family: 'Poppins', sans-serif !important;
    font-size: 34px !important;
    font-weight: 800 !important;
    color: #ee5e5e !important;
    display: block !important;
    letter-spacing: -0.5px !important;
    line-height: 1.1 !important;
}

.estimate-tag {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    color: #888888 !important;
    margin-top: 6px !important;
    display: block !important;
    letter-spacing: 0.5px !important;
}

/* Pixel-Perfect Mockup Custom Stepper Styles */
.accent-red-link {
    color: #ee5e5e !important;
    text-decoration: underline !important;
    font-weight: 600 !important;
}
.accent-red-link:hover {
    color: #d64a4a !important;
}

.estimator-stepper {
    position: relative !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}

.stepper-line {
    position: absolute !important;
    top: 16px !important;
    left: 10% !important;
    right: 10% !important;
    height: 2px !important;
    background-color: #e0e0e0 !important;
    z-index: 1 !important;
}

.stepper-line-progress {
    height: 100% !important;
    width: 0% !important;
    background-color: #533753 !important;
    transition: width 0.3s ease !important;
}

.step-item {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    z-index: 2 !important;
    width: 25% !important;
}

.step-circle {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    background-color: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s ease !important;
}

.step-icon {
    display: inline-block !important;
    transition: all 0.3s ease !important;
}

.step-label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    color: #b0b0b0 !important;
    text-transform: uppercase !important;
    margin-top: 10px !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    transition: all 0.3s ease !important;
}

/* Step State Modifiers */
.step-item.active .step-circle {
    border-color: #533753 !important;
    background-color: #ffffff !important;
}

.step-item.active .step-icon {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #533753 !important;
}

.step-item.active .step-label {
    color: #533753 !important;
}

.step-item.completed .step-circle {
    border-color: #533753 !important;
    background-color: #533753 !important;
}

.step-item.completed .step-icon::before {
    content: "✓" !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 700 !important;
}

.step-item.completed .step-label {
    color: #533753 !important;
}

/* Options Containers styling */
.estimator-body-wrapper {
    padding: 10px 0 !important;
}

/* Custom BHK Option Rows */
.bhk-row-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #ffffff !important;
    border: 1px solid #f0edf0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.bhk-row-option:hover {
    border-color: #533753 !important;
    box-shadow: 0 4px 12px rgba(83, 55, 83, 0.08) !important;
}

.bhk-row-option.selected {
    border-color: #533753 !important;
    background: #FAF7FA !important;
}

.bhk-radio-circle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid #cccccc !important;
    margin-right: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.bhk-row-option.selected .bhk-radio-circle {
    border-color: #533753 !important;
}

.bhk-radio-inner {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

.bhk-row-option.selected .bhk-radio-inner {
    background-color: #533753 !important;
}

.bhk-label-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2b2529 !important;
}

.bhk-chevron {
    color: #b5afb5 !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
}

.bhk-row-option:hover .bhk-chevron {
    color: #533753 !important;
}

/* Custom Room Counters List Row */
.room-counter-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 20px !important;
    background: #ffffff !important;
    border: 1px solid #f0edf0 !important;
    border-radius: 12px !important;
    margin-bottom: 12px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
}

.room-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #2b2529 !important;
}

.counter-control-wrapper {
    display: flex !important;
    align-items: center !important;
}

.btn-counter-btn {
    width: 32px !important;
    height: 32px !important;
    border-radius: 50% !important;
    border: none !important;
    background-color: #ee5e5e !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.btn-counter-btn:hover {
    background-color: #d64a4a !important;
    transform: scale(1.08) !important;
}

.btn-counter-btn:active {
    transform: scale(0.95) !important;
}

.counter-value {
    width: 36px !important;
    text-align: center !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #2b2529 !important;
}

/* Footer persistent navigation */
.estimator-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 35px !important;
    padding-top: 15px !important;
    width: 100% !important;
}

.btn-estimator-back {
    background: transparent !important;
    border: none !important;
    color: #ee5e5e !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 8px 16px !important;
}

.btn-estimator-back:hover {
    color: #d64a4a !important;
}

.btn-estimator-back:disabled {
    color: #d1c8d1 !important;
    cursor: not-allowed !important;
}

.btn-estimator-next {
    background: #ee5e5e !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 24px !important;
    padding: 12px 42px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.btn-estimator-next:hover {
    background: #d64a4a !important;
    box-shadow: 0 4px 12px rgba(238, 94, 94, 0.2) !important;
}

.btn-estimator-next:disabled {
    background: #fbcbc8 !important;
    color: #ffffff !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

/* Package Selection Layout styles matching image 3.jpg */
.package-cards-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin-top: 10px !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    padding-right: 5px !important;
}

/* Scrollbar styling for modal */
.package-cards-container::-webkit-scrollbar {
    width: 6px !important;
}
.package-cards-container::-webkit-scrollbar-track {
    background: #f7f7f7 !important;
    border-radius: 3px !important;
}
.package-cards-container::-webkit-scrollbar-thumb {
    background: #ccc !important;
    border-radius: 3px !important;
}

.package-option-card {
    background: #ffffff !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 12px !important;
    padding: 18px 22px !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    position: relative !important;
}

.package-option-card:hover {
    border-color: #ee5e5e !important;
    box-shadow: 0 4px 15px rgba(238, 94, 94, 0.05) !important;
}

.package-option-card.selected {
    border: 2px solid #ee5e5e !important;
    background: #fffdfd !important;
}

.package-card-header {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.package-radio-circle {
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    border: 1px solid #cccccc !important;
    margin-right: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.package-option-card.selected .package-radio-circle {
    border-color: #ee5e5e !important;
}

.package-radio-inner {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: transparent !important;
    transition: all 0.2s ease !important;
}

.package-option-card.selected .package-radio-inner {
    background-color: #ee5e5e !important;
}

.package-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #2b2529 !important;
}

.package-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #777777 !important;
    line-height: 1.4 !important;
    margin-left: 32px !important;
    margin-bottom: 12px !important;
}

.package-image-preview {
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 5px 0 15px 32px !important;
    width: calc(100% - 32px) !important;
    border: 1px solid #f0eef0 !important;
}

.package-features-list {
    list-style: none !important;
    padding-left: 32px !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

.package-feature-item {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    color: #555555 !important;
    display: flex !important;
    align-items: center !important;
}

.package-feature-checkmark {
    color: #3cb371 !important;
    font-weight: 700 !important;
    margin-right: 8px !important;
    font-size: 13px !important;
}

/* Get Quote Lead Form Styles matching image 4.jpg */
.lead-form-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
    margin-top: 10px !important;
}

.form-input-field {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 6px !important;
    padding: 10px 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    background: #ffffff !important;
    color: #333333 !important;
    transition: all 0.3s ease !important;
}

.form-input-field:focus {
    border-color: #ee5e5e !important;
    outline: none !important;
    box-shadow: 0 4px 10px rgba(238, 94, 94, 0.04) !important;
}

.phone-input-wrapper {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.phone-input-wrapper:focus-within {
    border-color: #ee5e5e !important;
    box-shadow: 0 4px 10px rgba(238, 94, 94, 0.04) !important;
}

.phone-flag-prefix {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    border-right: 1px solid #e8e3d8 !important;
    background: #faf8f5 !important;
    font-size: 16px !important;
    height: 100% !important;
    user-select: none !important;
}

.phone-flag-prefix span {
    margin-right: 4px !important;
}

.phone-flag-prefix i {
    font-size: 8px !important;
    color: #888888 !important;
}

.phone-input-el {
    flex: 1 !important;
    border: none !important;
    background: transparent !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #333333 !important;
    outline: none !important;
}

.whatsapp-checkbox-row {
    display: flex !important;
    align-items: center !important;
    margin: 5px 0 !important;
    padding-left: 2px !important;
}

.whatsapp-checkbox-row input {
    accent-color: #25d366 !important;
    width: 16px !important;
    height: 16px !important;
    margin-right: 10px !important;
    cursor: pointer !important;
}

.whatsapp-checkbox-row label {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    color: #555555 !important;
    cursor: pointer !important;
    margin: 0 !important;
    user-select: none !important;
}

.select-city-dropdown {
    width: 100% !important;
    height: 48px !important;
    border: 1px solid #e8e3d8 !important;
    border-radius: 6px !important;
    padding: 0 18px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: #666666 !important;
    background: #ffffff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%23888' d='M5 7L1 3h8z'/%3E%3C/svg%3E") no-repeat right 16px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    transition: all 0.3s ease !important;
}

.select-city-dropdown:focus {
    border-color: #ee5e5e !important;
    color: #333333 !important;
}

.legal-disclaimer-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    color: #888888 !important;
    text-align: center !important;
    line-height: 1.6 !important;
    margin-top: 15px !important;
    margin-bottom: 5px !important;
    padding: 0 10px !important;
}

/* ==========================================================================
   Luxury Premium Dropdown Overrides (Header Style 1, 2, and 3)
   ========================================================================== */

.main-menu .navigation > li > ul,
.main-menu.style2 .navigation > li > ul,
.main-menu.style3 .navigation > li > ul {
    background: #ffffff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
    border-top: 3px solid var(--crystalo-gold, #c8a96e) !important; /* Premium gold accent bar */
    border-radius: 0 0 6px 6px !important;
    padding: 8px 0 !important;
}

/* Specific positioning overrides for Style 2 and Style 3 to prevent transparent hover gaps */
.main-menu.style2 .navigation > li > ul,
.main-menu.style3 .navigation > li > ul {
    top: 110% !important;
    transition: all 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.main-menu.style2 .navigation > li:hover > ul,
.main-menu.style3 .navigation > li:hover > ul {
    top: 100% !important;
}

.main-menu .navigation > li > ul::before,
.main-menu.style2 .navigation > li > ul::before,
.main-menu.style3 .navigation > li > ul::before {
    display: none !important; /* Remove template's weird offset background element */
}

.main-menu .navigation > li > ul > li,
.main-menu.style2 .navigation > li > ul > li,
.main-menu.style3 .navigation > li > ul > li {
    margin: 0 !important;
    width: 100% !important;
    display: block !important;
}

.main-menu .navigation > li > ul > li > a,
.main-menu.style2 .navigation > li > ul > li > a,
.main-menu.style3 .navigation > li > ul > li > a {
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    font-family: 'Poppins', sans-serif !important;
    letter-spacing: 0.5px !important;
    border-bottom: 1px solid #f5f5f5 !important;
    transition: all 0.3s ease !important;
    background: transparent !important;
    position: relative !important;
    display: block !important;
    line-height: 24px !important;
}

.main-menu .navigation > li > ul > li:last-child > a,
.main-menu.style2 .navigation > li > ul > li:last-child > a,
.main-menu.style3 .navigation > li > ul > li:last-child > a {
    border-bottom: none !important;
}

.main-menu .navigation > li > ul > li:hover > a,
.main-menu.style2 .navigation > li > ul > li:hover > a,
.main-menu.style3 .navigation > li > ul > li:hover > a {
    color: var(--crystalo-gold, #c8a96e) !important; /* Premium gold accent on hover */
    background: rgba(200, 169, 110, 0.04) !important; /* Ultra-premium soft gold background on hover */
    padding-left: 32px !important; /* Sleek slide-in indentation */
}

.main-menu .navigation > li > ul > li:hover > a::before,
.main-menu.style2 .navigation > li > ul > li:hover > a::before,
.main-menu.style3 .navigation > li > ul > li:hover > a::before {
    content: '' !important;
    position: absolute !important;
    left: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 4px !important;
    border-radius: 50% !important;
    background: var(--crystalo-gold, #c8a96e) !important;
}

/* Header Style 2 Logo & Sticky Positioning Overrides */
.logo-box-style2 {
    margin: 10px 0 !important; /* Reduce margin to make room for larger logo */
    transition: var(--crystalo-transition);
}

.logo-box-style2 img {
    max-height: 90px !important; /* Increase logo size from 70px to 90px */
    width: auto;
    object-fit: contain;
    transition: var(--crystalo-transition);
}

/* Reduced size in sticky header for Header Style 2 */
.header-style2.stricky-fixed .logo-box-style2 {
    margin: 5px 0 !important;
}

.header-style2.stricky-fixed .logo-box-style2 img {
    max-height: 60px !important;
}

/* Sticky menu items padding for Header Style 2 */
.header-style2.stricky-fixed .main-menu.style2 .navigation > li > a {
    padding: 20px 0px !important; /* Elegant compact padding in sticky mode */
}

/* Perfect Vertical Center Alignment for Dropdown Arrows (Style 2 and 3) */
.main-menu.style2 .navigation > li.dropdown > a:after {
    top: 52% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
}

/* Header Style 3 Top Bar, Logo Box & Spacing Overrides */
.topbar-style3-right ul {
    border-right: none !important;
    padding-right: 0 !important;
    float: right !important; /* Float right for visual alignment since language switcher is not used */
}

.logo-box-style3 {
    margin: 20px 0 !important; /* Reduce margin to make header look elegant */
    transition: var(--crystalo-transition);
}

.logo-box-style3 img {
    max-height: 90px !important; /* Increase logo size to 90px for high readability */
    width: auto;
    object-fit: contain;
    transition: var(--crystalo-transition);
}

.header-contact-info.style2 {
    margin: 22px 0 22px 90px !important; /* Visual centering relative to 90px logo */
}

/* Header Style 3 Dropdown Arrow Implementation */
.main-menu.style3 .navigation > li.dropdown > a {
    position: relative;
    padding-right: 48px !important; /* Space for the arrow */
}

.main-menu.style3 .navigation > li.dropdown > a:after {
    font-family: FontAwesome;
    position: absolute;
    right: 25px; /* Visual center in the spacing */
    top: 52% !important;
    transform: translateY(-50%) !important;
    display: block;
    font-size: 14px;
    line-height: 1 !important;
    color: #ffffff; /* White arrow for high contrast on dark gray menu background */
    font-weight: 400;
    content: "\f107";
    z-index: 5;
    transition: all 300ms ease;
}

.main-menu.style3 .navigation > li.dropdown:hover > a:after {
    color: #e9212e !important; /* Brand red accent on hover */
}

.main-menu.style2 .navigation > li.dropdown:hover > a:after {
    color: #e9212e !important; /* Brand red accent on hover to match text */
}

/* ==========================================================================
   Responsive Dropdown Toggle Fixes & Overlap Prevention
   ========================================================================== */

/* 1. Hide mobile-only dropdown toggle buttons (+) on desktop screens to prevent duplicate overlap */
@media (min-width: 992px) {
    .main-menu .navigation li.dropdown .dropdown-btn,
    .main-menu.style2 .navigation li.dropdown .dropdown-btn,
    .main-menu.style3 .navigation li.dropdown .dropdown-btn {
        display: none !important;
    }
}

/* 2. On mobile/tablet views, add extra right padding to parent link items so text never overlaps with the toggle (+) button */
@media only screen and (max-width: 991px) {
    .main-menu .navbar-collapse .navigation li.dropdown > a,
    .main-menu.style2 .navbar-collapse .navigation li.dropdown > a,
    .main-menu.style3 .navbar-collapse .navigation li.dropdown > a {
        padding-right: 55px !important; /* Generous space so text never touches the right-side toggle button */
    }
}

/* 3. Remove template's default red arrow hover background images in submenus to prevent double-icon overlapping */
.main-menu .navigation > li > ul > li > a:after,
.main-menu.style2 .navigation > li > ul > li > a:after,
.main-menu.style3 .navigation > li > ul > li > a:after {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   Mobile & Tablet Responsiveness Overhaul (Screens under 991px)
   ========================================================================== */

@media only screen and (max-width: 991px) {
    /* 0. Disable parent stacking contexts so fixed drawer spans full viewport height from top: 0 */
    .main-menu-box,
    .main-menu {
        position: static !important;
    }

    /* 1. Header Logo Optimization & Collision Prevention */
    .logo-box-style1 img,
    .logo-box-style2 a img,
    .logo-box-style3 img {
        max-height: 55px !important;
        width: auto !important;
        max-width: 160px !important;
    }
    
    .logo-box-style1,
    .logo-box-style2,
    .logo-box-style3 {
        margin: 15px 0 !important;
        top: 0 !important;
        left: 15px !important;
    }
    
    /* 2. Mobile Menu Toggle Button (Hamburger) Perfect Centering */
    .main-menu .navbar-header .navbar-toggle {
        padding: 14px 9px 15px !important; /* Perfect vertical centering of the 3 icon bars (18px total height) inside 47px height button */
        background: #000100 !important;
        border: 1px solid #000100 !important;
        border-radius: 4px !important;
        margin-top: 19px !important; /* Vertically center aligned with the 55px high logo */
        right: 15px !important;
    }
    
    .main-menu .navbar-header .navbar-toggle:hover {
        background: #e9212e !important;
        border-color: #e9212e !important;
    }
    
    /* 3. Search and Cart Box Vertical Alignment */
    .mainmenu-right.style2,
    .mainmenu-right {
        right: 80px !important;
        top: 19px !important;
    }
    
    /* 4. Navbar Menu Stacking Order & Z-Index Layering */
    .main-menu {
        z-index: 99999 !important;
    }
    
    .main-menu .navbar-collapse {
        z-index: 999999 !important;
        position: relative !important;
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    }

    /* 5. Breadcrumb Area Scale & Spacing Optimization */
    .breadcrumb-area .inner-content {
        padding: 140px 0 30px !important; /* Drastically reduced from 360px to look elegant on mobile screens */
        text-align: center !important;
    }
    
    .breadcrumb-area .title {
        padding-top: 10px !important;
        padding-bottom: 20px !important;
        display: inline-block !important;
    }
    
    .breadcrumb-area .title:before {
        left: 50% !important;
        transform: translateX(-50%) !important; /* Center the white underline */
    }
    
    .breadcrumb-area .title h1 {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    
    .breadcrumb-area .breadcrumb-menu {
        float: none !important; /* Remove desktop right float */
        display: block !important;
        text-align: center !important;
        margin-top: 10px !important;
    }
    
    .breadcrumb-area .breadcrumb-menu ul {
        padding-bottom: 10px !important;
    }

    /* 6. Dropdown Menu Sub-menu Links Text Visibility & Hover Fixes */
    .main-menu .navigation > li > ul > li > a,
    .main-menu.style2 .navigation > li > ul > li > a,
    .main-menu.style3 .navigation > li > ul > li > a {
        color: #f1f1f1 !important; /* Highly visible light text against dark mobile menu background */
        background: transparent !important;
        border-bottom: 1px solid #33353b !important; /* Premium clean dark separator line */
    }

    .main-menu .navigation > li > ul > li:hover > a,
    .main-menu.style2 .navigation > li > ul > li:hover > a,
    .main-menu.style3 .navigation > li > ul > li:hover > a {
        color: var(--crystalo-gold, #c8a96e) !important; /* Elegant gold accent on hover */
        background: rgba(255, 255, 255, 0.05) !important; /* Soft white translucency for modern dark hover look */
    }

    /* 7. Slide-In Left Drawer Styling */
    .main-menu .navbar-collapse {
        position: fixed !important;
        top: 0 !important;
        left: -300px !important; /* Completely off-screen left */
        width: 290px !important;
        height: 100vh !important;
        background: rgba(18, 19, 21, 0.96) !important; /* Luxurious deep dark */
        backdrop-filter: blur(25px) !important; /* Premium Glassmorphism */
        -webkit-backdrop-filter: blur(25px) !important;
        box-shadow: 10px 0 40px rgba(0, 0, 0, 0.35) !important;
        transition: left 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; /* Sleek slide ease */
        padding: 75px 24px 40px !important;
        overflow-y: auto !important;
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        z-index: 999999 !important;
    }
    
    .main-menu .navbar-collapse.show {
        left: 0 !important; /* Smooth slide-in */
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .main-menu .navbar-collapse.collapsing {
        left: -300px !important;
        transition: left 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }
    
    /* 8. Luxury Sidebar Title Header inside the Drawer */
    .main-menu .navbar-collapse::before {
        content: 'NAVIGATION' !important;
        display: block !important;
        font-family: 'Poppins', sans-serif !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        color: rgba(200, 169, 110, 0.4) !important; /* Subdued Gold Accent */
        margin-bottom: 24px !important;
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
        padding-bottom: 8px !important;
    }
    
    /* 9. Drawer List Items Spacing & Typography */
    .main-menu .navbar-collapse .navigation {
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .main-menu .navbar-collapse .navigation > li {
        margin-bottom: 8px !important;
        border: none !important;
        background: transparent !important;
        float: none !important;
        width: 100% !important;
    }
    
    .main-menu .navbar-collapse .navigation > li > a {
        font-family: 'Poppins', sans-serif !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #e2e8f0 !important; /* Elegant off-white */
        padding: 12px 16px !important;
        border-radius: 8px !important;
        background: rgba(255, 255, 255, 0.02) !important;
        border: 1px solid rgba(255, 255, 255, 0.03) !important;
        transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    }
    
    /* 10. Hover Slide-Right and Gold Indicator Effects */
    .main-menu .navbar-collapse .navigation > li > a:hover,
    .main-menu .navbar-collapse .navigation > li.current > a {
        color: #ffffff !important;
        background: rgba(200, 169, 110, 0.1) !important; /* Translucent gold glow */
        border-color: rgba(200, 169, 110, 0.25) !important;
        padding-left: 24px !important; /* Sleek slide shift */
    }
    
    .main-menu .navbar-collapse .navigation > li.current > a {
        border-left: 4px solid var(--crystalo-gold, #c8a96e) !important;
    }
    
    /* 11. Mobile Sub-menu Indentation & Styles */
    .main-menu .navbar-collapse .navigation li.dropdown .dropdown-btn {
        right: 14px !important;
        top: 8px !important;
        width: 32px !important;
        height: 32px !important;
        background: rgba(255,255,255,0.03) center center no-repeat !important;
        background-size: 18px !important;
        border: 1px solid rgba(255,255,255,0.05) !important;
        border-radius: 6px !important;
        transition: all 0.3s ease !important;
    }
    
    .main-menu .navbar-collapse .navigation li.dropdown .dropdown-btn:hover {
        background-color: rgba(200, 169, 110, 0.15) !important;
        border-color: rgba(200, 169, 110, 0.3) !important;
    }
    
    .main-menu .navbar-collapse .navigation li ul {
        background: rgba(10, 11, 13, 0.4) !important;
        border-radius: 8px !important;
        margin: 6px 0 !important;
        padding: 6px 12px !important;
        border-left: 2px solid rgba(200, 169, 110, 0.15) !important;
    }
    
    .main-menu .navbar-collapse .navigation li ul li {
        border: none !important;
        background: transparent !important;
    }
    
    .main-menu .navbar-collapse .navigation li ul li a {
        font-family: 'Poppins', sans-serif !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        color: #a0aec0 !important; /* Soft gray for hierarchy */
        padding: 8px 12px !important;
        border-bottom: none !important;
    }
    
    .main-menu .navbar-collapse .navigation li ul li:hover > a {
        color: var(--crystalo-gold, #c8a96e) !important;
        background: transparent !important;
        padding-left: 18px !important;
    }
}

/* ==========================================================================
   Mobile-Only Spacing & Cost Estimator Modal Customizations (Screens under 767px)
   ========================================================================== */

@media only screen and (max-width: 767px) {
    /* 1. Cost Estimator Modal Box Sizing & Fluid Spacing */
    .estimator-modal-dialog {
        padding: 25px 20px !important; /* Fluid, spacious but compact padding */
        border-radius: 16px !important;
        width: 94% !important;
        margin: 15px auto !important;
    }
    
    .modal-step-title {
        font-size: 20px !important;
        line-height: 26px !important;
    }
    
    .modal-step-desc {
        font-size: 13px !important;
        margin-bottom: 20px !important;
    }
    
    /* 2. Interactive Selection Option Grids & Columns */
    .option-grid {
        grid-template-columns: 1fr !important; /* Convert 2-column grid to full width stack for easy mobile touching */
        gap: 12px !important;
    }
    
    .opt-btn {
        padding: 12px 10px !important;
        font-size: 13px !important;
    }
    
    .opt-btn-block {
        padding: 12px 16px !important;
    }
    
    .opt-btn-block strong {
        font-size: 14px !important;
    }
    
    .opt-btn-block span {
        font-size: 11px !important;
    }
    
    /* 3. Stepper Labels Visibility on Tiny Screen Widths */
    .estimator-stepper .step-label {
        font-size: 9px !important;
        letter-spacing: 0 !important;
    }
    
    /* 4. Form inputs inside modal */
    .form-group-modal input {
        height: 44px !important;
        padding: 8px 14px !important;
        font-size: 13px !important;
    }
    
    /* 5. Fluid Dialog Footer Action Buttons */
    .estimator-footer {
        padding-top: 15px !important;
        gap: 10px !important;
    }
}