body {
    font-family: 'Montserrat', sans-serif;
}

/* Slide left-to-right and fade in */
@keyframes slideAndFadeRight {
    0% {
        transform: translateX(-100px); /* Starts 100px to the left */
        opacity: 0;                    /* Completely hidden */
    }
    100% {
        transform: translateX(0);     /* Moves to original position */
        opacity: 1;                   /* Fully visible */
    }
}

@keyframes slideAndFadeLeft {
    0% {
        transform: translateX(100px); /* Starts 100px to the right */
        opacity: 0;                    /* Completely hidden */
    }
    100% {
        transform: translateX(0);     /* Moves to original position */
        opacity: 1;                   /* Fully visible */
    }
}

/* Animation class */
.slide-fade-right {
    animation: slideAndFadeRight 1s ease-out forwards;
}

.slide-fade-left {
    animation: slideAndFadeLeft 1s ease-out backwards;
}

/* CSS patch for 3-level menu support in Bootstrap 5 */

@media (min-width: 992px) {
    .dropdown-submenu {
        position: relative;
    }
    /* Positioning the 3rd menu level right next to the 2nd level on the right */
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -5px;
        display: none;
    }
    /* Displaying the third-level drop-down menu on mouse hover */
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* Reduces font size across all menu levels */
.navbar .nav-link,
.navbar .dropdown-item {
    font-size: 0.875rem !important; /* This is roughly 14px (Bootstrap default is 1rem / 16px) */
}

/* Make sub-menu items even slightly smaller if needed */
.navbar .dropdown-menu .dropdown-item {
    font-size: 0.825rem !important; /* Roughly 13px */
}

/* ==========================================================================
   REGISTRATION BUTTON COMPONENT
   ========================================================================== */

/* Default state */
.btn-wpa-register {
    background-color: #312b29 !important;
    color: #e4c9b0 !important;
    border: 1px solid #e4c9b0 !important;
    font-size: 0.85rem;
    transition: all 0.2s ease-in-out;
}

/* Hover Action */
.btn-wpa-register:hover {
    background-color: #e4c9b0 !important;
    color: #312b29 !important;
    border-color: #e4c9b0 !important;
    /*transform: translateY(-1px);*/
}

/* Base Pressed Down click state */
.btn-wpa-register:active {
    transform: translateY(0);
}

/* ==========================================================================
   GLOBAL DESIGN SYSTEM THEME VARIABLES
   ========================================================================== */

/* ☀️ THEME DEFINITIONS (Warm Coffee / Dark Chocolate Palette) */
:root {
    --wpa-bg: #312b29;
    --wpa-accent: #473f3d;
    --wpa-text: #e4c9b0;
    --wpa-border: #473f3d;
    --wpa-link: #312b29;
    --wpa-link-hover: #473f3d;

    /* Semantic Component Mapping */
    --wpa-btn-bg: var(--wpa-text);          /* Cream solid button fill */
    --wpa-btn-text: var(--wpa-bg);          /* Dark brown text contrast */
    --wpa-btn-hover-bg: #ffe4b8;            /* Slightly lighter cream for hover */
    --wpa-btn-hover-text: var(--wpa-bg);
    --wpa-btn-border: var(--wpa-text);

    --wpa-menu-active-bg: var(--wpa-accent);
    --wpa-menu-active-text: var(--wpa-text);
}

/* ==========================================================================
   CORE LAYOUT ENGINE INTEGRATION
   ========================================================================== */

/* Apply global theme colors over standard layouts */
.navbar, .dropdown-menu {
    background-color: var(--wpa-bg) !important;
    color: var(--wpa-text) !important;
    border-color: var(--wpa-border) !important;
}

/* Base font layout controls across navigation panels */
.navbar .nav-link,
.navbar .dropdown-item {
    color: var(--wpa-text) !important;
    font-size: 0.875rem !important; /* Roughly 14px size */
}

/* Links Hover Interaction States */
.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
    background-color: var(--wpa-accent) !important;
    color: var(--wpa-text) !important;
}

/* Active Dropdown Links Overrides */
.navbar .dropdown-menu .dropdown-item.active {
    background-color: var(--wpa-menu-active-bg) !important;
    color: var(--wpa-menu-active-text) !important;
    font-weight: 700 !important;
}

/* Active Level 1 Page Text Highlight */
.navbar .nav-link.active {
    font-weight: 700 !important;
    /* border-bottom: 2px solid var(--wpa-btn-border); */
}

/* Smooth micro-fade transitions on clicks/switches */
body, .navbar, .dropdown-menu, a, .btn {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* ==========================================================================
   DESKTOP VS MOBILE OVERRIDES (Responsive Rules)
   ========================================================================== */
@media (min-width: 992px) {
    .dropdown-submenu { position: relative; }
    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -5px;
        display: none !important;
    }
    .dropdown-submenu:hover > .dropdown-menu { display: block !important; }
}

@media (max-width: 991px) {
    .navbar-collapse {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .navbar-collapse .navbar-nav {
        width: 100% !important;
        align-items: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .navbar-collapse .navbar-nav.ms-auto {
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid var(--wpa-border) !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-start !important;
        gap: 15px !important;
    }
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        float: none;
        display: none;
        box-shadow: none !important;
        padding-left: 1.5rem !important;
        background-color: transparent !important;
        border: none !important;
    }
    .dropdown-submenu .dropdown-menu.show { display: block !important; }
}


/* ==========================================================================
   MOBILE NAVBAR VERTICAL RE-ALIGNMENT PATCH (Below 992px)
   ========================================================================== */
@media (max-width: 991px) {
    /* 1. Force the parent collapsible box to stack all children to the left */
    .navbar-collapse {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* 2. Remove the flex-centering rules from the menu container lists */
    .navbar-collapse .navbar-nav {
        width: 100% !important;
        align-items: flex-start !important; /* Forces items like buttons to align left */
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Give the right utility list its own neat left alignment framework */
    .navbar-collapse .navbar-nav.ms-auto {
        margin-top: 1rem;
        padding-top: 1rem;
       /* border-top: 1px solid var(--bs-border-color);*/

        /* Arrange the register button, theme switcher, and lang picker horizontally */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: flex-start !important; /* Anchors them to the left edge */
        gap: 15px !important;
    }
}

@media (max-width: 991px) {
    /* Set the Level 3 flyout list to sit naturally nested inside your menu spacing column */
    .dropdown-submenu .dropdown-menu {
        position: static !important;
        float: none;
        display: none; /* Hidden by default until JavaScript applies .show */
        box-shadow: none !important;
        padding-left: 1.5rem !important; /* Visual indentation step for nested sub-sub-links */
        background-color: transparent !important;
        border: none !important;
    }

    /* Force the list block open when the active .show class is injected via JavaScript clicks */
    .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }
}

/* ==========================================================================
   BULLETPROOF MOBILE TOGGLER (HAMBURGER) STENCIL ENGINE
   ========================================================================== */

/* 1. Style the outer box wrapper container */
.navbar-toggler {
    border: 1px solid var(--wpa-border) !important;
    padding: 0.25rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Remove default focus glow rings */
.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

/* 2. Paint the inner lines instantly using your CSS Variables */
.navbar-toggler-icon {
    /* Clear out Bootstrap's original gray background file entirely */
    background-image: none !important;

    /* Use your exact theme text color variables to paint the lines */
    background-color: var(--wpa-text) !important;

    /* Use Bootstrap's native inline shape path code strictly as a cutout mask */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");

    /* Ensure the stencil stretches cleanly across the full icon square box */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

@media (max-width: 991px) {
    /* 1. Structural base layout configuration for nested mobile columns */
    .dropdown-submenu .wpa-mobile-submenu {
        position: static !important;
        float: none !important;
        display: none !important; /* Forces hidden state on mobile by default */
        box-shadow: none !important;
        padding-left: 1.5rem !important; /* Neatly indents Level 3 links */
        background-color: transparent !important;
        border: none !important;
    }

    /* 2. Display the element smoothly when our script injects the .wpa-open class */
    .dropdown-submenu .wpa-mobile-submenu.wpa-open {
        display: block !important;
    }

    /* Optional: Optional arrow rotation indicator style when opened */
    .wpa-mobile-submenu-trigger.wpa-open-active::after {
        transform: rotate(180deg);
    }
}

.wpa-theme-bg {
    background-image: url('../images/tashkent_buildings_bg.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
    -webkit-backface-visibility: hidden;
}

.title-text-gradient {
    background: linear-gradient(45deg, #312b29, #5e5350);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
    display: inline-block;
}

.text-gradient {
    background: linear-gradient(45deg, #312b29, #5e5350);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    background-clip: text;
    display: inline-block;
}

.dark-charcoal-primary-color, .dark-charcoal-primary-color a {
    color: #312b29 !important;
}

.dark-charcoal-secondary-color {
    color: #473f3d !important;
}

.dark-charcoal-primary-color a:hover, .dark-charcoal-secondary-color a:hover {
    color: #5e5350 !important;
}

.light-shade-gradient {
    background: #f0f0f0; background: linear-gradient(180deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.light-shade-gradient-reversed {
    background: #f0f0f0; background: linear-gradient(0deg, rgba(240, 240, 240, 1) 0%, rgba(255, 255, 255, 1) 100%) !important;
}

.zoom {
    transition: transform .2s; /* Animation */
}

.zoom:hover {
    transform: scale(1.1); /* (110% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ==========================================================================
   CSS-ONLY THREE-COLUMN AUTOMATED SITEMAP
   ========================================================================== */

/* 1. Direct the browser engine to split the layout container into 3 columns */
.wpa-three-col-sitemap {
    column-count: 3;           /* Enforces exactly 3 columns on desktops */
    column-gap: 3rem;          /* Generates wide padding spaces between columns */
}

/* 2. CRUCIAL: Prevent parent headings from breaking in half across columns */
.wpa-sitemap-branch {
    display: inline-block;     /* Legacy fallback */
    break-inside: avoid;       /* Modern rule: Stops a branch from splitting over columns */
    width: 100%;               /* Ensures full column width alignment */
}

/* Interactive Hover state animation effects */
.wpa-three-col-sitemap a:hover {
    transform: translateX(4px);
    opacity: 1 !important;
}

/* 4. Tabulation weights and decorations */
.wpa-level-1-link {
    color: var(--wpa-link) !important;
    font-size: 0.85rem !important;
    letter-spacing: 0.5px;
}

.wpa-level-1-link:hover {
    color: var(--wpa-link-hover) !important;
}

.wpa-level-2-item {
    color: var(--wpa-link) !important;
    padding-left: 0.75rem;
}

.wpa-level-3-link {
    font-size: 0.88rem !important;
    opacity: 0.7; /* Slightly dim level 3 links for strong dynamic hierarchy */
}

/* 📱 RESPONSIVE CONTROL: Collapse smoothly on handheld screens */
@media (max-width: 991px) {
    .wpa-three-col-sitemap {
        column-count: 2;       /* Drops down to 2 columns on tablets */
        column-gap: 2rem;
    }
}

@media (max-width: 575px) {
    .wpa-three-col-sitemap {
        column-count: 1;       /* Stacks into 1 vertical column on mobile phones */
    }
}


/* ==========================================================================
   DYNAMIC REAL-TIME BREADCRUMBS DESIGN THEME ENGINE
   ========================================================================== */

/* Outer capsule frame adopts your exact accent background and layout border tokens */
.wpa-breadcrumb-wrapper .breadcrumb {
    background: #FFE4B8;
    background: linear-gradient(90deg, #eae3d9 0.000%, #ede3d9 16.667%, #e9dcd1 33.333%, #dfcfc4 50.000%, #d0bfb4 66.667%, #c0aea3 83.333%, #b1a095 100.000%);
}

.wpa-breadcrumb-wrapper .breadcrumb-item {
    color: var(--wpa-bg) !important;
    font-size: 0.875rem !important; /* Roughly 14px size */
}

/* History hyperlink segments default states styling */
.wpa-breadcrumb-wrapper .breadcrumb-item a {
    color: var(--wpa-bg) !important;
    font-size: 0.875rem !important; /* Roughly 14px size */
    text-decoration: none !important;
    opacity: 0.75; /* Slightly muted for clear layout hierarchy distinction */
    transition: opacity 0.2s ease-in-out;
}

/* Mouse-over Hover: Glow fully into emphasis focus weights */
.wpa-breadcrumb-wrapper .breadcrumb-item a:hover {
    opacity: 1;
    text-decoration: underline !important;
}

/* ==========================================================================
   CUSTOM BTN-OUTLINE-PRIMARY
   ========================================================================== */

/* Active current endpoint page segment label highlight rules */
.wpa-breadcrumb-wrapper .breadcrumb-item.active {
    color: var(--wpa-bg) !important;
    font-size: 0.875rem !important; /* Roughly 14px size */
    opacity: 1;
}

/* Custom separator glyph styling ruleset (Overrides Bootstrap default slash) */
.wpa-breadcrumb-wrapper .breadcrumb-item + .breadcrumb-item::before {
    color: var(--wpa-bg) !important;
    opacity: 0.5;
}

/* Custom styling for outline-primary button */
.btn-outline-primary {
    color: #312b29;
    border-color: #312b29;
}

/* Hover and active states */
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
    color: #e4c9b0 !important;
    background-color: #312b29 !important;
    border-color: #312b29 !important;
}

/* Focus box-shadow ring (Optional but recommended for accessibility) */
.btn-outline-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(49, 43, 41, 0.25);
}

/* ==========================================================================
   FOOTER MENU
   ========================================================================== */

footer .nav-item a {
    color: var(--wpa-text) !important;
    text-decoration: none !important;
}

footer .nav-item a:hover, footer .nav-item a:active, footer .nav-item a:focus {
    color: var(--wpa-text) !important;
    background-color: var(--wpa-accent) !important;
}

footer #footer-menu-miscellaneous .nav-item a {
    font-size: 0.875rem !important;
}

footer #footer-menu-social .nav-item a {
    font-size: 2rem !important;
}

/* ==========================================================================
   Legally hide the reCAPTCHA badge
   ========================================================================== */

.grecaptcha-badge {
    visibility: hidden !important;
}

/* ==========================================================================
   Basic animation for background transition
   ========================================================================== */

/* Cross-fade transition rule for the background layers */
.bg-layer {
    transition: opacity 1.5s ease-in-out;
}

.bg-repeat-x {
    background-repeat: repeat-x;
}



/* 1. Base / Fallback style for all browsers */
.title-counter {
    float: left;
    font-size: 6rem;
    line-height: 0.8;
    color: var(--wpa-text);
}