/********** KT Merry Pure Black & White Luxury Editorial Design System (Zero Yellow) **********/
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Montserrat:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

:root {
    --dark-bg: #111111;        /* Pure Matte Deep Black */
    --dark-card: #1A1A1A;      /* Dark Charcoal Card */
    --light-bg: #FAF8F5;       /* Warm Off-White / Ivory Background */
    --light-card: #FFFFFF;     /* Pure White Card */
    --primary: #111111;        /* High-contrast Pure Black */
    --primary-hover: #333333;
    --secondary: #666666;      /* Neutral Gray */
    --text-dark: #111111;      /* Pure Black Text */
    --text-muted: #666666;     /* Subdued Body Gray */
    --text-light: #FFFFFF;     /* Crisp White Text */
    --border-light: #E2DDD5;   /* Fine Ivory Line Border */
    --border-dark: #2B2A29;    /* Fine Dark Line Border */
    --font-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
    --font-sans: 'Montserrat', sans-serif;
}

body {
    font-family: var(--font-sans);
    background-color: var(--light-bg);
    color: #222222;
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-serif);
    font-weight: 400;
    color: var(--text-dark);
    letter-spacing: 0.04em;
    line-height: 1.2;
}

/* Force override any text-primary or text-warning to pure dark black */
.text-primary,
.text-warning,
.btn-primary-icon {
    color: var(--text-dark) !important;
}

.kt-section-dark .text-primary,
.kt-section-dark .text-warning {
    color: #FFFFFF !important;
}

/* Subheadings / Taglines */
.editorial-tagline,
.text-primary.text-uppercase {
    font-family: var(--font-sans) !important;
    font-size: 11px !important;
    letter-spacing: 0.35em !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: block;
}

.kt-section-dark .editorial-tagline,
.kt-section-dark .text-primary.text-uppercase {
    color: #CCCCCC !important;
}

.display-1 { font-size: 4.5rem; font-weight: 300; }
.display-2 { font-size: 3.75rem; font-weight: 300; }
.display-3 { font-size: 3.25rem; font-weight: 400; }
.display-4 { font-size: 2.75rem; font-weight: 400; }
.display-5 { font-size: 2.25rem; font-weight: 400; }
.display-6 { font-size: 1.85rem; font-weight: 400; }

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 60px;
    z-index: 99;
    background-color: var(--dark-bg) !important;
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    transition: all 0.3s ease;
}

.back-to-top:hover {
    background-color: #FFFFFF !important;
    color: var(--dark-bg) !important;
}

/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/*** Editorial Buttons (Strict Black & White) ***/
.btn {
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 12px 26px;
    border-radius: 0px;
    white-space: nowrap;
    transition: all 0.4s ease;
}

.btn.btn-primary {
    background-color: var(--dark-bg) !important;
    border: 1px solid var(--dark-bg) !important;
    color: #FFFFFF !important;
}

.btn.btn-primary:hover {
    background-color: #FFFFFF !important;
    border-color: var(--dark-bg) !important;
    color: var(--dark-bg) !important;
}

.btn.btn-outline-primary {
    border: 1px solid var(--dark-bg) !important;
    color: var(--dark-bg) !important;
    background: transparent !important;
}

.btn.btn-outline-primary:hover {
    background-color: var(--dark-bg) !important;
    color: #FFFFFF !important;
}

.btn-editorial-dark {
    background-color: var(--dark-bg) !important;
    border: 1px solid var(--dark-bg) !important;
    color: #FFFFFF !important;
}

.btn-editorial-dark:hover {
    background-color: #FFFFFF !important;
    color: var(--dark-bg) !important;
    border-color: var(--dark-bg) !important;
}

.btn-editorial-white {
    background-color: #FFFFFF !important;
    border: 1px solid #FFFFFF !important;
    color: var(--dark-bg) !important;
}

.btn-editorial-white:hover {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

.btn-editorial-outline-white {
    border: 1px solid #FFFFFF !important;
    color: #FFFFFF !important;
    background: transparent !important;
}

.btn-editorial-outline-white:hover {
    background-color: #FFFFFF !important;
    color: var(--dark-bg) !important;
}

/*** Navbar (Fixed Alignment & Responsive Spacing) ***/
.navbar {
    background-color: var(--light-bg) !important;
    border-bottom: 1px solid var(--border-light);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    transition: all 0.4s ease;
}

.navbar .navbar-brand h1 {
    font-family: var(--font-serif);
    font-weight: 400;
    letter-spacing: 0.12em;
    font-size: 1.9rem;
    color: var(--text-dark) !important;
}

.navbar .navbar-nav .nav-link {
    padding: 10px 12px;
    color: var(--text-dark);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    outline: none;
    transition: color 0.3s ease;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--text-dark) !important;
    border-bottom: 2px solid var(--text-dark);
}

.navbar .dropdown-menu {
    background-color: var(--light-bg);
    border: 1px solid var(--border-light);
    border-radius: 0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.navbar .dropdown-item {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 10px 20px;
    color: var(--text-dark);
}

.navbar .dropdown-item:hover,
.navbar .dropdown-item.active {
    background-color: #111111;
    color: #FFFFFF;
}

/*** Hero Auto Slider ***/
.hero-slider-item {
    min-height: 85vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    position: relative;
}

.hero-slider-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(17, 17, 17, 0.5), rgba(17, 17, 17, 0.7));
    z-index: 1;
}

.hero-slider-content {
    position: relative;
    z-index: 2;
}

.carousel-fade .carousel-item {
    opacity: 0;
    transition-duration: .8s;
    transition-property: opacity;
}

.carousel-fade .carousel-item.active {
    opacity: 1;
}

/*** Black & White Section Themes ***/
.kt-section-dark {
    background-color: var(--dark-bg) !important;
    color: #FFFFFF !important;
}

.kt-section-dark h1,
.kt-section-dark h2,
.kt-section-dark h3,
.kt-section-dark h4,
.kt-section-dark h5,
.kt-section-dark h6 {
    color: #FFFFFF !important;
}

.kt-section-dark p {
    color: #CCCCCC !important;
}

.kt-section-light {
    background-color: var(--light-bg) !important;
    color: var(--text-dark) !important;
}

.kt-section-light h1,
.kt-section-light h2,
.kt-section-light h3,
.kt-section-light h4,
.kt-section-light h5,
.kt-section-light h6 {
    color: var(--text-dark) !important;
}

/* Portfolio Navigator Block */
.kt-portfolio-nav {
    background-color: #0A0A0A;
    border-top: 1px solid var(--border-dark);
    border-bottom: 1px solid var(--border-dark);
}

.kt-portfolio-link {
    font-family: var(--font-serif);
    font-size: 2.8rem;
    color: #FFFFFF;
    text-decoration: none;
    letter-spacing: 0.1em;
    transition: all 0.4s ease;
    display: inline-block;
    padding-bottom: 5px;
    border-bottom: 2px solid transparent;
}

.kt-portfolio-link:hover {
    color: #FFFFFF;
    border-bottom-color: #FFFFFF;
    transform: scale(1.05);
}

/*** Cards & Grids ***/
.fact-item {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light);
    transition: all 0.4s ease;
}

.fact-item:hover {
    transform: translateY(-8px);
    border-color: var(--dark-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.fact-item h1 {
    color: var(--dark-bg) !important;
}

.service-item {
    background: #FFFFFF !important;
    border: 1px solid var(--border-light);
    transition: all 0.4s ease;
}

.service-item:hover {
    transform: translateY(-8px);
    border-color: var(--dark-bg);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}

.project-item {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--border-light);
}

.project-item img {
    transition: transform 0.6s ease;
}

.project-item:hover img {
    transform: scale(1.05);
}

.project-item .project-title {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    left: 1rem;
    padding: 1rem;
    text-align: center;
    background: rgba(17, 17, 17, 0.95);
    border: 1px solid var(--border-dark);
    font-family: var(--font-serif);
    font-weight: 400;
    color: #FFFFFF;
    transition: all 0.4s ease;
}

.project-item:hover .project-title {
    color: var(--dark-bg);
    background: #FFFFFF;
    border-color: #FFFFFF;
}

/*** Video Overlay Badge ***/
.project-video-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(17, 17, 17, 0.85);
    color: #FFFFFF;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    border: 1px solid rgba(255,255,255,0.3);
}

/*** Package Pricing Cards (Strict Black & White) ***/
.package-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    transition: all 0.4s ease;
}

.package-card:hover {
    transform: translateY(-8px);
    border-color: var(--dark-bg) !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.package-header {
    background-color: var(--dark-bg) !important;
    color: #FFFFFF !important;
    padding: 1.5rem;
    border-bottom: 1px solid var(--border-dark);
}

.package-header h3 {
    color: #FFFFFF !important;
}

.package-price {
    font-family: var(--font-serif);
    font-size: 2.75rem;
    font-weight: 400;
    color: var(--dark-bg) !important;
}

/*** Testimonials Carousel Navigation Fixed Alignment ***/
.testimonial-item {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light);
    padding: 2.5rem !important;
    position: relative;
}

.testimonial-carousel .owl-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 35px !important;
    width: 100% !important;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: static !important;
    float: none !important;
    margin: 0 !important;
    width: 48px !important;
    height: 48px !important;
    border-radius: 50% !important;
    border: 1px solid #111111 !important;
    background: #FFFFFF !important;
    color: #111111 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    background: #111111 !important;
    color: #FFFFFF !important;
}

/*** Footer (Strict Black & White) ***/
.footer {
    background-color: #0A0A0A !important;
    border-top: 1px solid var(--border-dark);
    color: #AAAAAA !important;
}

.footer h1, .footer h4 {
    font-family: var(--font-serif);
    color: #FFFFFF !important;
}

.footer .btn.btn-link {
    color: #888888;
    font-family: var(--font-sans);
    font-size: 11px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.footer .btn.btn-link:hover {
    color: #FFFFFF !important;
    padding-left: 8px;
}

.footer .btn-outline-primary {
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.footer .btn-outline-primary:hover {
    background-color: #FFFFFF !important;
    color: #111111 !important;
}

.partner-logo-hover:hover {
    filter: grayscale(0%) !important;
    opacity: 1 !important;
    transform: scale(1.08);
}

/********** Auth & Dashboard Luxury Design System **********/
.auth-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 0px !important;
}

.auth-header {
    background-color: var(--dark-bg) !important;
    color: #FFFFFF !important;
    padding: 2rem 1.5rem !important;
    border-radius: 0px !important;
}

.auth-header h3 {
    color: #FFFFFF !important;
    font-family: var(--font-serif) !important;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.dashboard-card {
    background-color: #FFFFFF !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 0px !important;
    transition: all 0.4s ease;
}

.dashboard-card-header {
    background-color: var(--dark-bg) !important;
    border-bottom: 1px solid var(--border-dark) !important;
    border-radius: 0px !important;
    padding: 1.25rem 1.5rem !important;
}

.dashboard-card-header .card-title {
    color: #FFFFFF !important;
    font-family: var(--font-serif) !important;
    font-size: 1.25rem;
    font-weight: 400;
    margin-bottom: 0 !important;
    letter-spacing: 0.04em;
}

/* Luxury Input Field Styles */
.form-control, .form-select {
    border-radius: 0px !important;
    border: 1px solid var(--border-light) !important;
    font-family: var(--font-sans);
    font-size: 13px;
    letter-spacing: 0.05em;
    padding: 12px 18px;
    background-color: #FFFFFF;
    color: var(--text-dark);
    transition: all 0.3s ease;
}

.form-control:focus, .form-select:focus {
    border-color: var(--dark-bg) !important;
    box-shadow: none !important;
    background-color: #FFFFFF;
}

/* Custom table adjustments for luxury B&W */
.table {
    font-family: var(--font-sans);
    font-size: 13px;
}

.table thead th {
    font-family: var(--font-sans);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.15em;
    border-bottom: 1px solid var(--border-light) !important;
    background-color: #FAF8F5 !important;
    color: var(--text-dark) !important;
    padding: 12px 15px !important;
}

.table tbody td {
    padding: 15px 15px !important;
    border-bottom: 1px solid var(--border-light) !important;
}

/* B&W Monochromatic Badges */
.badge-luxury-pending {
    background-color: #FAF8F5 !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-light) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    border-radius: 0px !important;
    font-size: 10px !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
    display: inline-block;
}

.badge-luxury-approved {
    background-color: var(--dark-bg) !important;
    color: #FFFFFF !important;
    border: 1px solid var(--dark-bg) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    border-radius: 0px !important;
    font-size: 10px !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
    display: inline-block;
}

.badge-luxury-rejected {
    background-color: transparent !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--text-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0.05em;
    border-radius: 0px !important;
    font-size: 10px !important;
    text-transform: uppercase;
    padding: 6px 12px !important;
    display: inline-block;
}

.badge-luxury-count {
    background-color: #FAF8F5 !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--border-light) !important;
    font-weight: 600 !important;
    border-radius: 0px !important;
    font-size: 10px !important;
    padding: 5px 10px !important;
}

/********** MONOCHROME EDITORIAL RESPONSIVE FIXES (PURE CSS Overrides) **********/

/* General Helper Settings */
.kt-hero-section {
    height: calc(100vh - 75px) !important;
    margin-top: 75px !important;
}

.kt-hero-social-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 15px !important;
}

.kt-photo-banner {
    min-height: 550px;
}

.kt-philosophy-image {
    max-height: 520px;
    object-fit: cover;
}

/* Responsive typography and layouts */
@media (max-width: 991.98px) {
    /* Navbar Drawer styling */
    .navbar-collapse {
        background-color: var(--light-bg) !important;
        padding: 1.5rem !important;
        border-top: 1px solid var(--border-light) !important;
        margin-top: 10px !important;
    }
    
    .navbar .navbar-nav .nav-link {
        padding: 12px 0 !important;
        width: 100% !important;
        text-align: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    }
    
    .navbar .navbar-nav .nav-link:hover,
    .navbar .navbar-nav .nav-link.active {
        border-bottom: 2px solid var(--text-dark) !important;
    }
    
    .navbar .dropdown-menu {
        text-align: center !important;
        background-color: rgba(0, 0, 0, 0.02) !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .navbar .dropdown-item {
        padding: 10px 0 !important;
    }
    
    .navbar-collapse .d-flex.align-items-center {
        flex-direction: column !important;
        gap: 12px !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    
    .navbar-collapse .d-flex.align-items-center .btn {
        width: 100% !important;
        max-width: 280px !important;
        text-align: center !important;
    }

    /* Heading Adjustments */
    .display-1 { font-size: 3.5rem !important; }
    .display-2 { font-size: 2.75rem !important; }
    .display-3 { font-size: 2.5rem !important; }
    .display-4 { font-size: 2.2rem !important; }
    .display-5 { font-size: 1.85rem !important; }
    .display-6 { font-size: 1.5rem !important; }
    
    .kt-portfolio-link {
        font-size: 2.2rem !important;
    }
    
    .kt-hero-section {
        height: calc(100vh - 70px) !important;
        margin-top: 70px !important;
    }
}

@media (max-width: 767.98px) {
    /* Responsive Headings */
    .display-1 { font-size: 2.3rem !important; letter-spacing: 0.08em !important; }
    .display-2 { font-size: 1.65rem !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
    .display-3 { font-size: 1.55rem !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; }
    .display-4 { font-size: 1.45rem !important; line-height: 1.35 !important; }
    .display-5 { font-size: 1.45rem !important; }
    .display-6 { font-size: 1.35rem !important; }

    /* Portfolio Category Navigator */
    .kt-portfolio-link {
        font-size: 1.65rem !important;
        margin: 0 8px !important;
    }
    
    /* Image and Banner heights adjustments */
    #featureSliderCarousel img {
        height: 320px !important;
    }
    
    .kt-section-dark .my-4.mx-auto img {
        max-height: 320px !important;
    }
    
    .kt-photo-banner {
        min-height: 380px !important;
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .kt-philosophy-image {
        max-height: 320px !important;
    }
    
    .testimonial-item {
        padding: 1.5rem !important;
    }
    
    .partner-carousel img,
    .partner-item img {
        max-height: 48px !important;
        max-width: 140px !important;
    }
    
    /* Scroll down to top size adjustment */
    .back-to-top {
        right: 15px !important;
        bottom: 15px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 575.98px) {
    /* Extreme small screen heading optimizations */
    .display-1 { font-size: 1.95rem !important; letter-spacing: 0.05em !important; }
    .display-2 { font-size: 1.4rem !important; letter-spacing: 0.03em !important; }
    .display-3 { font-size: 1.5rem !important; letter-spacing: 0.04em !important; }
    .display-4 { font-size: 1.35rem !important; }
    .display-5 { font-size: 1.25rem !important; }
    .display-6 { font-size: 1.15rem !important; }

    /* Subtaglines formatting to prevent wrap overflows */
    .editorial-tagline,
    .text-primary.text-uppercase {
        letter-spacing: 0.18em !important;
        font-size: 10px !important;
    }
    
    .kt-portfolio-link {
        font-size: 1.35rem !important;
        margin: 0 4px !important;
    }
    
    /* Stacking Buttons on Hero to prevent clipping */
    .kt-hero-btn-group {
        flex-direction: column !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
        display: flex !important;
    }
    
    .kt-hero-btn-group .btn {
        width: 100% !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    /* Image scaling heights */
    #featureSliderCarousel img {
        height: 240px !important;
    }
    
    .kt-section-dark .my-4.mx-auto img {
        max-height: 240px !important;
    }
    
    .hero-header img {
        height: 180px !important;
    }
}