/* ==========================================
   THEME OVERRIDES FOR CONSTRUCTION / HIGH-RISE BUILDINGS (index2.php)
   Theme Colors (Based on the Mockup image):
   - Backgrounds: Very Light Beige / Off-White (#fcfbfa / #f6f3eb / #ffffff)
   - Accent/Dark Green: #0d7a57 / #0c2d19 (For Brand header, primary buttons, major text headers)
   - Secondary Green: #12ab7a / #2a834b
   - Text Colors: Dark Charcoal (#222222), Soft Muted Green/Gray (#606c62)
   - UI Accents: Borders (#e2ded5), Subtle Backgrounds (#f4f0e6)
   ========================================== */

/* Root & Palette definitions specifically for index2.php styles */
:root {
    --const-dark-bg: #fcfbfa;         /* Very Light Beige Background */
    --const-panel-bg: #f6f3eb;        /* Light Beige Panel */
    --const-card-bg: #ffffff;         /* White Card */
    /* --const-primary: #487564;         Dusty Forest Green */
    --const-primary: #143f24;         /* Deep Forest Green */
    --const-primary-light: #81A684;   /* Muted Sage Green */
    --const-primary-medium: #4a7254;  /* Medium Forest Green */
    --const-text-light: #222222;      /* High contrast dark text for white background */
    --const-text-muted: #606c62;      /* Muted greenish-gray text */
    --const-border: #e2ded5;          /* Warm light border */
    --const-white: #ffffff;
    --const-gray-light: #f4f0e6;      /* Sub-header Highlight feature row bg */
    
    /* Global overrides to align entire site with the construction theme */
    /* --komodo-green: #487564 !important; */
    --komodo-green: #143f24 !important;
    --komodo-dark: #222222 !important;
    --komodo-light: #fbf9f4 !important;
    
    --pkr-primary: #3A482E !important;
    /* --pkr-secondary: #487564 !important; */
    --pkr-secondary: #143f24 !important;
    --pkr-accent: #f1c40f !important;
 
    /* Hex transparency variables */
    --const-white-trans-85: #ffffffd9;
    --const-white-trans-40: #ffffff66;
    --const-white-trans-20: #ffffff33;
    --const-white-trans-10: #ffffff1a;
    
    /* --const-primary-trans-95: #487564f2; */
    /* --const-primary-trans-40: #48756466; */
    /* --const-primary-trans-30: #4875644d; */
    /* --const-primary-trans-25: #48756440; */
    /* --const-primary-trans-20: #48756433; */
    /* --const-primary-trans-15: #48756426; */
    /* --const-primary-trans-10: #4875641a; */
    /* --const-primary-trans-08: #48756414; */
    /* --const-primary-trans-05: #4875640d; */
    /* --const-primary-trans-02: #48756405; */
    --const-primary-trans-95: #143f24f2;
    --const-primary-trans-40: #143f2466;
    --const-primary-trans-30: #143f244d;
    --const-primary-trans-25: #143f2440;
    --const-primary-trans-20: #143f2433;
    --const-primary-trans-15: #143f2426;
    --const-primary-trans-10: #143f241a;
    --const-primary-trans-08: #143f2414;
    --const-primary-trans-05: #143f240d;
    --const-primary-trans-02: #143f2405;
    
    --const-primary-light-trans-80: #81A684cc;
    
    --const-black-trans-75: #000000bf;
    --const-black-trans-60: #00000099;
    --const-black-trans-40: #00000066;
    --const-black-trans-20: #00000033;
    --const-black-trans-15: #00000026;
    --const-black-trans-08: #00000014;
    --const-black-trans-06: #0000000f;
    --const-black-trans-05: #0000000d;
    --const-black-trans-04: #0000000a;
    --const-black-trans-03: #00000005;
    
    --const-border-dark: #c5bfb1;
    --const-warning-gold: #f1c40f;
    --const-bg-light-alt: #fbf9f4;
    --const-line-green: #06c755;
    --const-line-green-hover: #05b04b;
}

/* LINE Button Styling */
.construction-theme .btn-line-green {
	background-color: var(--const-line-green) !important;
	color: var(--const-white) !important;
	border: 1px solid var(--const-line-green) !important;
	transition: all 0.3s ease !important;
}

.construction-theme .btn-line-green:hover {
	background-color: var(--const-line-green-hover) !important;
	border-color: var(--const-line-green-hover) !important;
	color: var(--const-white) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3) !important;
}

/* Header & Navigation styling to match the dark green mockup style */
body .navbar.bg-komodo,
html body .navbar {
    background-color: var(--const-primary) !important;
    background-image: url('../img/navbar_bg_pattern.png') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

body .navbar-dark .navbar-nav .nav-link {
    color: var(--const-white-trans-85) !important;
    font-size: 0.95rem;
    font-weight: 500;
}

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

body .navbar .btn-warning {
    background-color: var(--const-white) !important;
    color: var(--const-primary) !important;
    border: none !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    padding: 8px 20px !important;
}

body .navbar .btn-warning:hover {
    background-color: var(--const-panel-bg) !important;
}

/* Ongoing operational button */
body .navbar-nav .nav-item.bg-danger {
    background-color: var(--const-white-trans-10) !important;
    border-radius: 8px !important;
    border: 1px solid var(--const-white-trans-20) !important;
}

body .navbar-nav .nav-item.bg-danger .nav-link {
    color: var(--const-white) !important;
}

/* Base styling overrides inside the container */
.construction-theme.desktop-main-wrapper {
    background-color: var(--const-dark-bg) !important;
    color: var(--const-text-light) !important;
    font-family: 'Prompt', 'Kanit', sans-serif;
    overflow-x: hidden;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Ensure the wrapper content doesn't have any native margins forcing spacing at the top */
.construction-theme .content-area {
    padding-top: 0 !important;
}

body {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Force sticky-top navbar margin to 0 */
body .navbar.sticky-top {
    margin-bottom: 0 !important;
}

/* Headings */
.construction-theme h1, 
.construction-theme h2, 
.construction-theme h3, 
.construction-theme h4, 
.construction-theme h5, 
.construction-theme h6,
.construction-theme .h1,
.construction-theme .h2,
.construction-theme .h3,
.construction-theme .h4,
.construction-theme .h5,
.construction-theme .h6 {
    color: var(--const-primary) !important;
    font-family: 'Kanit', sans-serif;
    font-weight: 700;
}

.construction-theme .text-muted,
.construction-theme p.text-muted,
.construction-theme span.text-muted {
    color: var(--const-text-muted) !important;
}

/* Badge styling - Lined style with dynamic currentColor lines */
.construction-theme .section-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: transparent !important;
    color: var(--const-primary-medium);
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 1.05rem !important;
    font-family: 'Barlow Condensed', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    margin-bottom: 1.2rem !important;
}

.construction-theme .section-badge::before,
.construction-theme .section-badge::after {
    content: "" !important;
    display: inline-block !important;
    width: 30px !important;
    height: 1px !important;
    background-color: currentColor !important;
    vertical-align: middle !important;
}

/* Custom size overrides for Section Titles to make them smaller across all devices */
.construction-theme h2.display-4,
.construction-theme .display-4 {
    font-size: calc(1.4rem + 0.6vw) !important;
}
.construction-theme h2.display-5,
.construction-theme .display-5 {
    font-size: calc(1.3rem + 0.5vw) !important;
}

/* Buttons */
.construction-theme .btn-komodo {
    background: var(--const-primary) !important;
    color: var(--const-white) !important;
    border: none !important;
    box-shadow: 0 4px 10px var(--const-primary-trans-20) !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.construction-theme .btn-komodo:hover {
    transform: translateY(-2px) !important;
    background-color: var(--const-primary-light) !important;
    box-shadow: 0 6px 15px var(--const-primary-trans-30) !important;
}

.construction-theme .btn-outline-dark {
    border-color: var(--const-border) !important;
    color: var(--const-text-light) !important;
    background: var(--const-white) !important;
    transition: all 0.3s ease !important;
    border-radius: 8px !important;
}

.construction-theme .btn-outline-dark:hover {
    background: var(--const-panel-bg) !important;
    border-color: var(--const-border-dark) !important;
    transform: translateY(-2px);
}

.construction-theme .btn-outline-komodo {
    border-color: var(--const-primary) !important;
    color: var(--const-primary) !important;
    background: transparent !important;
}

.construction-theme .btn-outline-komodo:hover,
.construction-theme .btn-check:checked + .btn-outline-komodo {
    background: var(--const-primary) !important;
    color: var(--const-white) !important;
    border-color: var(--const-primary) !important;
}


/* Sections divider */
.construction-theme .desktop-section-divider {
    border-top: 1px solid var(--const-border) !important;
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

/* 1. Hero Section */
.construction-theme #home-section {
    position: relative;
    background: radial-gradient(circle at 80% 20%, var(--const-primary-trans-05) 0%, transparent 60%), 
                var(--const-dark-bg) !important;
    overflow: hidden;
    /* padding-top: 5rem !important; */
    /* padding-bottom: 5rem !important; */
}

/* Hero Section image blend / masking styles */
.construction-theme #home-section img[alt="PKR Construction"] {
    border: none !important;
    box-shadow: none !important;
    mix-blend-mode: multiply; /* Blends light bg colors of the image with the section bg */
    filter: contrast(1.02) brightness(1.02);
}

.construction-theme #home-section .col-lg-6.mt-5 {
    position: relative;
}

.construction-theme #home-section h1 {
    font-size: 3.2rem !important;
    line-height: 1.15;
}

.construction-theme .ps-hero-img-bg {
    min-height: 280px;
    height: 280px;
}

@media (max-width: 991.98px) {
    .construction-theme #home-section h1 {
        font-size: 2.5rem !important;
    }
    
    /* Make left column background transparent so the hero image underneath is visible */
    .construction-theme #home-section .col-lg-6.d-flex {
        background-color: transparent !important;
        position: relative;
        z-index: 2;
    }
    
    /* Absolute position the image column behind the text on mobile/tablets */
    .construction-theme #home-section .col-lg-6.position-relative {
        position: absolute !important;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        opacity: 0.15; /* Faded background image */
        pointer-events: none;
    }
    
    .construction-theme .ps-hero-img-bg {
        height: 100% !important;
        min-height: 100% !important;
    }
}

@media (max-width: 576px) {
    .construction-theme #home-section h1 {
        font-size: 2.0rem !important;
    }
}

@media (min-width: 992px) {
    .construction-theme .ps-hero-img-bg {
        min-height: 460px;
        max-height: 520px;
        height: 100% !important;
    }
}

/* 2. Hero Carousel (Auto-sliding Service Carousel) */
.construction-theme #serviceCarousel {
    border-radius: 20px !important;
    border: 1px solid var(--const-border);
    box-shadow: 0 15px 35px var(--const-black-trans-06) !important;
    overflow: hidden;
}

.construction-theme .ps-carousel-item {
    min-height: 480px !important;
}

.construction-theme .ps-carousel-content {
    padding-left: 4.5rem;
    padding-right: 4.5rem;
}

@media (max-width: 768px) {
    .construction-theme .ps-carousel-content {
        padding-left: 3rem;
        padding-right: 3rem;
    }
}

.construction-theme .ps-carousel-overlay {
    /* background: linear-gradient(90deg, var(--const-primary-trans-95) 0%, var(--const-primary-light-trans-80) 50%, var(--const-primary-trans-30) 100%) !important; */
		/* background:var(--const-black-trans-75) !important; */
		background: transparent !important;
}

.construction-theme .ps-carousel-content h4.text-warning {
    color: var(--const-warning-gold) !important; /* Warning gold color */
    font-size: 0.9rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.construction-theme .ps-carousel-content h2 {
    color: var(--const-white) !important; /* High contrast white text */
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.construction-theme .ps-carousel-content .btn-warning {
    background: var(--const-primary) !important;
    border-color: var(--const-primary) !important;
    color: var(--const-white) !important;
    transition: all 0.3s ease;
    border-radius: 8px !important;
}

.construction-theme .ps-carousel-content .btn-warning:hover {
    background: var(--const-primary-light) !important;
    border-color: var(--const-primary-light) !important;
    transform: translateY(-3px);
}

.construction-theme .carousel-indicators button {
    background-color: var(--const-white-trans-40) !important; /* brighter white button */
    height: 6px !important;
    width: 28px !important;
    border-radius: 3px;
    opacity: 0.7;
}

.construction-theme .carousel-indicators button.active {
    background-color: var(--const-warning-gold) !important; /* Gold active color matching warning style */
    opacity: 1 !important;
}

/* Style prev/next buttons with direct pure yellow inline SVG to guarantee exact var(--const-warning-gold) color */
.construction-theme .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1c40f'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e") !important;
    filter: none !important;
    width: 2.5rem;
    height: 2.5rem;
}

.construction-theme .carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23f1c40f'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    filter: none !important;
    width: 2.5rem;
    height: 2.5rem;
}

.construction-theme .carousel-control-prev,
.construction-theme .carousel-control-next {
    width: 5%;
    opacity: 0.6;
}

.construction-theme .carousel-control-prev {
    left: 10px;
}

.construction-theme .carousel-control-next {
    right: 10px;
}

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

/* Fallback card if no categories */
.construction-theme .bg-komodo.text-white.shadow-lg {
    background: var(--const-card-bg) !important;
    border: 1px solid var(--const-border);
    color: var(--const-text-light) !important;
}

/* 3. Services Grid/Horizontal Scroll */
.construction-theme #services-section {
    background-color: var(--const-bg-light-alt) !important;
}

.construction-theme .ps-service-card {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    border-radius: 16px !important;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
    box-shadow: 0 4px 15px var(--const-black-trans-03) !important;
}

.construction-theme .ps-service-card:hover {
    transform: translateY(-8px) !important;
    border-color: var(--const-primary) !important;
    box-shadow: 0 15px 30px var(--const-primary-trans-08) !important;
}

.construction-theme .ps-service-card img {
    transition: transform 0.5s ease;
}

.construction-theme .ps-service-card:hover img {
    transform: scale(1.05);
}

.construction-theme .ps-service-card h3 {
    color: var(--const-primary) !important;
    font-size: 1.25rem;
}

.construction-theme .ps-service-title {
    font-size: 1.0rem !important;
	font-family: 'Kanit', sans-serif;
	font-weight: 100;
}

@media (max-width: 576px) {
    .construction-theme .ps-service-title {
        font-size: 0.82rem !important;
    }
    .construction-theme .ps-service-badge {
        max-width: 90% !important;
        border-radius: 8px !important;
    }
}

/* Horizontal Scroll Container styling */
.construction-theme .services-horizontal-scroll {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden !important;
    gap: 20px;
    padding-bottom: 25px;
    -webkit-overflow-scrolling: touch;
}

.construction-theme .service-column {
    flex: 0 0 320px;
}

.construction-theme .services-horizontal-scroll::-webkit-scrollbar {
    height: 6px;
}
.construction-theme .services-horizontal-scroll::-webkit-scrollbar-track {
    background: var(--const-primary-trans-05);
    border-radius: 10px;
}
.construction-theme .services-horizontal-scroll::-webkit-scrollbar-thumb {
    background: var(--const-primary-light);
    border-radius: 10px;
}

/* 4. Promotion & News Section */
.construction-theme #promotion-section {
    background-color: var(--const-panel-bg) !important;
}

.construction-theme #promotion-section .card.border-0 {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    box-shadow: 0 10px 25px var(--const-black-trans-04) !important;
}

.construction-theme #promotion-section .bg-komodo {
    background: linear-gradient(135deg, var(--const-card-bg) 0%, var(--const-panel-bg) 100%) !important;
}

.construction-theme #promotion-section .bg-komodo.text-white {
    color: var(--const-text-light) !important;
}

.construction-theme #promotion-section .bg-komodo.text-white h3 {
    color: var(--const-primary) !important;
}

.construction-theme #promotion-section .bg-komodo.text-white p,
.construction-theme #promotion-section .bg-komodo.text-white div {
		color: var(--const-text-light) !important;
}

/* News Marquee & Cards */
.construction-theme .news-marquee-container {
    background: var(--const-primary-trans-02);
    border: 1px solid var(--const-border);
    border-radius: 16px;
    padding: 15px;
}

.construction-theme .card-news-hover {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    transition: all 0.3s ease !important;
}

.construction-theme .card-news-hover:hover {
    border-color: var(--const-primary) !important;
    transform: translateY(-3px);
}

.construction-theme .card-news-hover h6 {
    color: var(--const-primary) !important;
}

.construction-theme .card-news-hover .text-komodo {
    color: var(--const-primary) !important;
}

/* 5. Tips & FAQ Section */
.construction-theme #recommend-section {
    background-color: var(--const-dark-bg) !important;
}

.construction-theme #recommend-section .card {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    box-shadow: 0 8px 20px var(--const-black-trans-03) !important;
    transition: all 0.3s ease;
}

.construction-theme #recommend-section .card:hover {
    border-color: var(--const-primary) !important;
    transform: translateY(-5px);
}

.construction-theme #recommend-section .text-warning {
    color: var(--const-primary-light) !important;
}

.construction-theme #recommend-section .text-primary {
    color: var(--const-primary-light) !important;
}

.construction-theme #recommend-section .text-success {
    color: var(--const-primary) !important;
}

/* 6. Workflow & Membership */
.construction-theme #workflow-section {
    background-color: var(--const-panel-bg) !important;
}

.construction-theme #workflow-section .bg-white.p-4 {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
}

.construction-theme #workflow-section .btn-primary {
    background-color: var(--const-primary) !important;
    border-color: var(--const-primary) !important;
}

.construction-theme #workflow-section .btn-outline-success {
    border-color: var(--const-primary-light) !important;
    color: var(--const-primary-light) !important;
}

.construction-theme #workflow-section .btn-outline-success:hover {
    background-color: var(--const-primary-light) !important;
    color: var(--const-white) !important;
}

/* 7. Live Operations Section */
.construction-theme #showcase-section {
    background-color: var(--const-dark-bg) !important;
}

.construction-theme #showcase-section .card {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    box-shadow: 0 10px 25px var(--const-black-trans-04) !important;
}

.construction-theme #showcase-section .card h5 {
    color: var(--const-primary) !important;
}

.construction-theme #showcase-section .text-komodo {
    color: var(--const-primary-light) !important;
}

/* 8. Map & Address & Reference Grid */
.construction-theme #contact-section {
    background-color: var(--const-panel-bg) !important;
}

.construction-theme #contact-section .bg-white {
    background-color: var(--const-card-bg) !important;
    border: 1px solid var(--const-border) !important;
    box-shadow: 0 15px 35px var(--const-black-trans-05) !important;
}

.construction-theme #contact-section .bg-light {
    background-color: var(--const-panel-bg) !important;
    border: 1px solid var(--const-border) !important;
}

.construction-theme #contact-section .text-dark {
    color: var(--const-primary) !important;
}

.construction-theme .portfolio-item-clickable:hover {
    color: var(--const-primary) !important;
    background: var(--const-gray-light) !important;
}

/* Gallery Showcase Marquee */
.construction-theme .ps-marquee-container {
    background: var(--const-dark-bg) !important;
}

.construction-theme .ps-marquee-item img {
    border: 1px solid var(--const-border);
    border-radius: 8px;
}

/* Lightbox Modal Light Styling Overrides (Matches clean mockup light theme) */
body .construction-theme-modal .modal-content,
body .construction-theme-modal .modal-body,
body .construction-theme-modal .col-lg-4.bg-white {
    background-color: var(--const-white) !important;
    color: var(--const-text-light) !important;
}

body .construction-theme-modal .modal-content {
    border: 1px solid var(--const-border) !important;
    border-radius: 16px !important; /* Modern rounded corners */
    overflow: hidden !important; /* Ensure children don't bleed past rounded corners */
}

.construction-theme-modal .modal-dialog {
    border-radius: 16px !important;
}

.construction-theme-modal .modal-header,
.construction-theme-modal .modal-footer {
    background-color: var(--const-panel-bg) !important;
    border-color: var(--const-border) !important;
}

/* Rounded corners for the image wrapper on the left side of the modal */
.construction-theme-modal .news-image-container,
.construction-theme-modal .carousel,
.construction-theme-modal .carousel-inner,
.construction-theme-modal .carousel-item img {
    border-top-left-radius: 16px !important;
    border-bottom-left-radius: 16px !important;
}

/* Mobile responsive rounded corners adjustment */
@media (max-width: 991.98px) {
    .construction-theme-modal .news-image-container,
    .construction-theme-modal .carousel,
    .construction-theme-modal .carousel-inner,
    .construction-theme-modal .carousel-item img {
        border-top-left-radius: 16px !important;
        border-top-right-radius: 16px !important;
        border-bottom-left-radius: 0 !important;
    }
}

.construction-theme-modal .modal-header h4,
.construction-theme-modal .modal-header h2,
.construction-theme-modal .modal-header h5 {
    color: var(--const-primary) !important;
}

.construction-theme-modal .portfolio-content-side {
    background-color: var(--const-card-bg) !important;
    border-left: 1px solid var(--const-border);
}

.construction-theme-modal .portfolio-desc {
    color: var(--const-text-muted) !important;
}

.construction-theme-modal .text-dark {
    color: var(--const-primary) !important;
}

.construction-theme-modal .bg-white {
    background-color: var(--const-card-bg) !important;
    color: var(--const-text-light) !important;
}

.construction-theme-modal .border-top {
    border-color: var(--const-border) !important;
}

.construction-theme-modal hr {
    border-color: var(--const-border) !important;
    opacity: 0.5;
}

.construction-theme-modal .btn-light {
    background-color: var(--const-panel-bg) !important;
    color: var(--const-primary) !important;
    border: 1px solid var(--const-border) !important;
}

.construction-theme-modal .btn-light:hover {
    background-color: var(--const-gray-light) !important;
}

/* Custom Scrollbar overrides - Dark Green & Extremely Thin */
::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
}

::-webkit-scrollbar-track {
    background: var(--const-panel-bg) !important; /* light warm beige track */
}

::-webkit-scrollbar-thumb {
    background: var(--const-primary) !important; /* Deep Forest Green matching navbar */
    border-radius: 10px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--const-primary-light) !important;
}

/* For Firefox */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--const-primary) var(--const-panel-bg) !important;
}

/* Premium overrides for modal popup details */
body .construction-theme-modal .btn-close {
    background-color: var(--const-black-trans-05) !important;
    padding: 10px !important;
    border-radius: 50% !important;
    transition: all 0.25s ease !important;
    opacity: 0.7 !important;
    background-size: 40% !important;
}

body .construction-theme-modal .btn-close:hover {
    background-color: var(--const-primary-trans-10) !important;
    transform: rotate(90deg) !important;
    opacity: 1 !important;
}

/* Custom design for modal sliders (Carousel navigation) */
body .construction-theme-modal .carousel-control-prev-icon,
body .construction-theme-modal .carousel-control-next-icon {
    width: 2.5rem !important;
    height: 2.5rem !important;
    background-color: var(--const-black-trans-40) !important;
    border-radius: 50% !important;
    backdrop-filter: blur(4px) !important;
    background-size: 45% auto !important;
    transition: all 0.3s ease !important;
}

body .construction-theme-modal .carousel-control-prev-icon:hover,
body .construction-theme-modal .carousel-control-next-icon:hover {
    background-color: var(--const-primary) !important;
    transform: scale(1.1) !important;
}

/* Subtle border and shadow adjustments for premium feel */
body .construction-theme-modal .modal-content {
    box-shadow: 0 25px 60px var(--const-primary-trans-15) !important;
}

/* Make custom scrollbars inside modal description text areas match the premium aesthetic */
.construction-theme-modal .overflow-auto::-webkit-scrollbar {
    width: 3px !important;
}
.construction-theme-modal .overflow-auto::-webkit-scrollbar-track {
    background: transparent !important;
}
.construction-theme-modal .overflow-auto::-webkit-scrollbar-thumb {
    background: var(--const-primary-trans-20) !important;
    border-radius: 10px !important;
}
.construction-theme-modal .overflow-auto::-webkit-scrollbar-thumb:hover {
    background: var(--const-primary-trans-40) !important;
}

/* Force all green text, borders, and badges in the popup modal to match the dark green menu bar (var(--const-primary)) */
body .construction-theme-modal .text-komodo,
body .construction-theme-modal h2.text-komodo,
body .construction-theme-modal h5.text-komodo {
    color: var(--const-primary) !important;
}

body .construction-theme-modal .border-komodo {
    border-color: var(--const-primary) !important;
}

body .construction-theme-modal .bg-komodo {
    background-color: var(--const-primary) !important;
    color: var(--const-white) !important;
}

/* Force all green buttons to match the dark green menu bar color (var(--const-primary)) */
.construction-theme .btn-success,
.construction-theme .btn-komodo,
.construction-theme-modal .btn-komodo {
    background-color: var(--const-primary) !important;
    border-color: var(--const-primary) !important;
    color: var(--const-white) !important;
    box-shadow: 0 4px 12px var(--const-primary-trans-15) !important;
}

.construction-theme .btn-success:hover,
.construction-theme .btn-komodo:hover,
.construction-theme-modal .btn-komodo:hover {
    background-color: var(--const-primary-light) !important;
    border-color: var(--const-primary-light) !important;
    color: var(--const-white) !important;
    box-shadow: 0 6px 18px var(--const-primary-trans-25) !important;
}

/* Style outline green buttons like Member area button */
.construction-theme .btn-outline-success {
    border: 2px solid var(--const-primary) !important;
    color: var(--const-primary) !important;
    background-color: transparent !important;
    font-weight: 600 !important;
}

.construction-theme .btn-outline-success:hover {
    background-color: var(--const-primary) !important;
    border-color: var(--const-primary) !important;
    color: var(--const-white) !important;
}

/* Allow rounded-pill class to correctly render pill-shaped green buttons */
.construction-theme .btn-komodo.rounded-pill,
.construction-theme-modal .btn-komodo.rounded-pill,
.construction-theme .btn-success.rounded-pill,
.construction-theme .btn-outline-success.rounded-pill {
    border-radius: 50rem !important;
}

/* Footer overrides to prevent heading elements from inheriting body's dark green color */
.construction-theme footer h1,
.construction-theme footer h2,
.construction-theme footer h3,
.construction-theme footer h4,
.construction-theme footer h5,
.construction-theme footer h6,
.construction-theme footer .h1,
.construction-theme footer .h2,
.construction-theme footer .h3,
.construction-theme footer .h4,
.construction-theme footer .h5,
.construction-theme footer .h6 {
    color: var(--const-white) !important;
}

.construction-theme footer .text-warning {
    color: var(--const-warning-gold) !important;
}

/* Adjust left and right margins/paddings on mobile devices for all pages */
@media (max-width: 576px) {
    body.construction-theme > section,
    body.construction-theme > .desktop-main-wrapper {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* About Us Hero and other dark background containers text/heading visibility overrides */
.construction-theme .about-hero {
    padding: 70px 0 50px !important;
    border-radius: 0 0 30px 30px !important;
}

@media (max-width: 576px) {
    .construction-theme .about-hero {
        padding: 50px 0 40px !important;
    }
}

.construction-theme .about-hero h1,
.construction-theme .about-hero h2,
.construction-theme .about-hero h3,
.construction-theme .about-hero h4,
.construction-theme .about-hero h5,
.construction-theme .about-hero h6,
.construction-theme .about-hero .h1,
.construction-theme .about-hero .h2,
.construction-theme .about-hero .h3,
.construction-theme .about-hero .h4,
.construction-theme .about-hero .h5,
.construction-theme .about-hero .h6,
.construction-theme .bg-komodo h1,
.construction-theme .bg-komodo h2,
.construction-theme .bg-komodo h3,
.construction-theme .bg-komodo h4,
.construction-theme .bg-komodo h5,
.construction-theme .bg-komodo h6,
.construction-theme .bg-komodo .h1,
.construction-theme .bg-komodo .h2,
.construction-theme .bg-komodo .h3,
.construction-theme .bg-komodo .h4,
.construction-theme .bg-komodo .h5,
.construction-theme .bg-komodo .h6,
.construction-theme .bg-dark h1,
.construction-theme .bg-dark h2,
.construction-theme .bg-dark h3,
.construction-theme .bg-dark h4,
.construction-theme .bg-dark h5,
.construction-theme .bg-dark h6,
.construction-theme .bg-dark .h1,
.construction-theme .bg-dark .h2,
.construction-theme .bg-dark .h3,
.construction-theme .bg-dark .h4,
.construction-theme .bg-dark .h5,
.construction-theme .bg-dark .h6 {
    color: var(--const-white) !important;
}

/* Preserve warning colors on dark sections */
.construction-theme .about-hero .text-warning,
.construction-theme .bg-komodo .text-warning,
.construction-theme .bg-dark .text-warning,
.construction-theme .about-hero h1.text-warning,
.construction-theme .about-hero h2.text-warning,
.construction-theme .about-hero h3.text-warning,
.construction-theme .about-hero h4.text-warning,
.construction-theme .about-hero h5.text-warning,
.construction-theme .about-hero h6.text-warning,
.construction-theme .bg-komodo h1.text-warning,
.construction-theme .bg-komodo h2.text-warning,
.construction-theme .bg-komodo h3.text-warning,
.construction-theme .bg-komodo h4.text-warning,
.construction-theme .bg-komodo h5.text-warning,
.construction-theme .bg-komodo h6.text-warning,
.construction-theme .bg-dark h1.text-warning,
.construction-theme .bg-dark h2.text-warning,
.construction-theme .bg-dark h3.text-warning,
.construction-theme .bg-dark h4.text-warning,
.construction-theme .bg-dark h5.text-warning,
.construction-theme .bg-dark h6.text-warning {
    color: var(--const-warning-gold) !important;
}

/* Mobile Navbar Compact & Logo/Text Emphasis (matches requested layout) */
@media (max-width: 767.98px) {
    /* Make navbar height smaller / padding tighter */
    body .navbar {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
        min-height: 52px !important;
    }
    
    /* Make the logo circle larger */
    body .navbar .circle-logo,
    body .navbar .transparent-glow-logo-wrapper {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
        max-width: 52px !important;
        max-height: 52px !important;
        flex: 0 0 52px !important;
        margin-top: -2px !important;
        margin-bottom: -2px !important;
    }
    
    body .navbar .circle-logo img,
    body .navbar .transparent-glow-logo img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        transform: scale(1.15) !important;
    }
    
    /* Make the brand text larger and aligned */
    body .navbar .brand-text {
        font-size: 1.65rem !important;
        font-weight: 700 !important;
        display: flex !important;
        align-items: center !important;
    }
    
    /* Make the burger menu button align nicely */
    body .navbar .navbar-toggler {
        padding: 4px !important;
    }
}