@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --base-color-font: rgba(14, 34, 66, 1);
    --brend-color-brown: rgba(83, 51, 41, 1);
    --color-white: rgba(255, 255, 255, 1);
    --color-gray-100: rgba(248, 249, 252, 1);
    --color-gray-200: rgba(241, 243, 249, 1);
    --color-gray-300: rgba(222, 227, 237, 1);
    --color-gray-400: rgba(194, 201, 214, 1);
    --color-gray-500: rgba(143, 150, 163, 1);
    --color-gray-600: rgba(94, 99, 110, 1);
    --color-gray-700: rgba(47, 50, 55, 1);
    --color-gray-800: rgba(29, 30, 32, 1);
    --color-gray-900: rgba(17, 18, 19, 1);
    --color-black-95: rgba(0, 0, 0, 0.95);
    --color-black: rgba(0, 0, 0, 1);
    --color-blue: rgba(39, 157, 215, 1);
    --color-yellow: rgba(255, 193, 7, 1);
    --color-green: rgba(40, 167, 69, 1);
    --color-success: rgba(40, 167, 69, 1);
    --color-success-hover: rgba(33, 136, 56, 1);
    --color-success-hover-border: rgba(30, 126, 52, 1);
    --color-danger: rgba(220, 53, 69, 1);
    --color-danger-hover: rgba(200, 35, 51, 1);
    --color-danger-hover-border: rgba(189, 33, 48, 1);
    --color-warning: rgba(255, 193, 7, 1);
    --color-warning-hover: rgba(224, 168, 0, 1);
    --color-warning-hover-border: rgba(211, 158, 0, 1);
    --color-info: rgba(23, 162, 184, 1);
    --color-info-hover: rgba(19, 132, 150, 1);
    --color-info-hover-border: rgba(17, 122, 139, 1);
    --color-luxury-gold: rgba(197, 160, 89, 1);
    --indigo: rgba(102, 16, 242, 1);
    --purple: rgba(111, 66, 193, 1);
    --pink: rgba(232, 62, 140, 1);
    --red: rgba(220, 53, 69, 1);
    --orange: rgba(253, 126, 20, 1);
    --teal: rgba(32, 201, 151, 1);
    --cyan: rgba(23, 162, 184, 1);
    --gray: rgba(108, 117, 125, 1);
    --text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
    --overlay-muted: rgba(34, 34, 34, .6);
}

html, h4, h5 {
    font-family: "Exo 2", serif;
    color: var(--base-color-font);
}

.uk-btn-success {
    background-color: var(--color-success);
    border-color: var(--color-success);
}

.uk-btn-success:hover {
    background-color: var(--color-success-hover);
    border-color: var(--color-success-hover-border);
}

.uk-btn-danger {
    background-color: var(--color-danger);
    border-color: var(--color-danger);
}

.uk-btn-danger:hover {
    background-color: var(--color-danger-hover);
    border-color: var(--color-danger-hover-border);
}

.uk-btn-warning {
    background-color: var(--color-warning);
    border-color: var(--color-warning);
}

.uk-btn-warning:hover {
    background-color: var(--color-warning-hover);
    border-color: var(--color-warning-hover-border);
}

.uk-btn-info {
    background-color: var(--color-info);
    border-color: var(--color-info);
}

.uk-btn-info:hover {
    background-color: var(--color-info-hover);
    border-color: var(--color-info-hover-border);
}

.uk-btn-light {
    background-color: var(--color-gray-300);
    border-color: var(--color-gray-300);
}

.uk-btn-light:hover {
    background-color: var(--color-gray-500);
    border-color: var(--color-gray-600);
}

.uk-btn-light,
.uk-btn-light:hover {
    color: var(--base-color-font);
}

.uk-text-meta {
    letter-spacing: 1px;
}

.uk-margin-slarge-top {
    margin-top: 30px !important;
}

.uk-margin-sxlarge-top {
    margin-top: 10px !important;
}

.uk-margin-slarge-bottom {
    margin-bottom: 30px !important;
}

.info,
.uk-btn-success,
.uk-btn-success:hover,
.uk-btn-danger,
.uk-btn-danger:hover,
.uk-btn-info,
.uk-btn-info:hover,
.uk-light-100,
.uk-background-warning-45 h2,
.uk-background-warning-45 h3,
.uk-background-warning-45 p {
    color: var(--color-white);
}

.uk-btn-warning,
.uk-btn-warning:hover {
    color: var(--color-black);
}

p {
    font-size: 1.25rem;
    line-height: 1.4;
}

.uk-content-slide h1 {
    font-size: clamp(1.5rem, 2.5vw, 2.23125rem);
}

.uk-navbar-toggle {
    min-height: 0;
}

.uk-transparent-str {
    background-color: transparent;
    transition: background-color 0.9s ease;
}

.uk-sticky-below {
    transition: background-color 0.9s ease;
    background-color: var(--color-black);
    padding-bottom: 7px;
}

.uk-width-250 > a > img {
    width: 250px;
}

.uk-width-220 > a > img {
    width: 220px;
}

.uk-width-150 > a > img {
    width: 150px;
}

.uk-transparent-str .uk-logo img {
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.9s ease-in-out;
    transform: scale(1); /* уменьшаем до 70% */
}

.uk-sticky-below .uk-logo img {
    display: inline-block;
    transform-origin: center center;
    transition: transform 0.9s ease-in-out;
    transform: scale(0.7); /* уменьшаем до 70% */
}

.uk-logo img {
    transition: opacity 0.9s ease;
}

.uk-navbar-nav > li > a {
    color: var(--color-white) !important;
    font-size: 1.17rem;
}

.uk-bg-video-overlay {
    background: url(../images/overlay.png);
    /*z-index: -9998;*/
}

.uk-blue-color,
.uk-card-hover-text:hover a div h5,
.uk-card-hover-text:hover a div span,
.uk-article-link a:hover {
    color: var(--color-blue);
}

.uk-grayscale-hover:hover > a > div > div > span.uk-btn-read-more {
    color: var(--color-blue) !important;
    font-weight: bold;
}

/* Header styling with diagonal gradient for large screens */
.header, .uk-modal-top-bg {
    background: var(--color-black);
    border-bottom: 2px solid var(--color-gray-500);
}

.header {
    padding: 0.4rem 1rem; /* Minimal padding for compact header */
}

.header .uk-container {
    padding: 0;
}

.header > .info > .contact-info {
    align-items: flex-end;
}

/* Flex container for aligning social, language, and info modules */
.header-top {
    /*display: flex;*/
    /*justify-content: space-between; !* Align items to the right *!*/
    /*align-items: center; !* Center items vertically *!*/
}

/* Styling for social icons, with spacing between them */
.header-top .social-icons {
    display: flex;
    gap: 1rem; /* Space between social icons */
}

.contact-info {
    font-size: 1.3rem;
}

.contact-info > div {
    cursor: pointer;
}

/* Styling for vertical divider */
.uk-divider-vertical {
    border-left: 1px solid; /* Thin white vertical line */
    border-left-color: var(--color-white) !important;
    height: 24px; /* Adjust height as needed */
    margin: 0 10px; /* Space around the divider */
}

.uk-modal-bottom-bg {
    background-color: var(--color-black);
}

.language .social {
    margin-left: auto; /* Pushes the language module to the right */
}

div.mod-languages li {
    margin: 0;
}

div.mod-languages img {
    vertical-align: baseline;
}

div.mod-languages ul li.lang-active {
    background-color: transparent;
}

.uk-logo {
    max-width: 250px;
}

.uk-navbar-left {
    z-index: 10; /* Устанавливаем значение z-index выше, чем у слайд-шоу */
    position: relative; /* Добавляем относительное позиционирование для применения z-index */
}

.uk-navbar-nav > li > a,
.uk-slideshow-items > li > div > h1,
.uk-background-warning-45,
.uk-text-shadow,
.uk-meta{
    text-shadow: var(--text-shadow);
}

.uk-background-warning-45 a {
    text-shadow: none;
}

.uk-thumbnav > li > a,
div.mod-languages img {
    border: 1px solid var(--color-white);
}

.country-field {
    display: inline-block;
    width: 48%;
    margin-right: 4%;
}

.country-field:nth-child(2n) {
    margin-right: 0;
}

.uk-mb-text-slider {
    font-size: 3rem;
}

.uk-background-warning {
    background-color: var(--color-yellow);
}

.uk-h4-line-bottom{
    border-bottom: 1px dotted var(--base-color-font);
}

/* Чёрно-белый эффект при загрузке */
.uk-grayscale-on-trigger {
    filter: grayscale(100%);
    transition: all 0.5s ease;
}

/* Цвет + стиль карточки при наведении на секцию */
.uk-hover-trigger:hover #uk-primary-card {
    filter: grayscale(0%);
    background-color: var(--color-blue);
}

.uk-grayscale-hover img {
    filter: grayscale(100%);
    transition: filter 0.4s ease;
}

.uk-grayscale-hover:hover img {
    filter: grayscale(0%);
}

.uk-about-bg {
    background-image: url(../../../templates/masterbuild/images/bg-01.jpg);
}

.uk-call-us-bg {
    background-image: url(../images/call-us.jpg);
    background-size: cover;
    background-position: top center;
    z-index: -2;
    background-attachment: fixed;
}

.uk-overlay-muted {
    background: var(--overlay-muted);
}

.uk-opacity-medium {
    opacity: 0.3;
}

.uk-article-content li {
    font-size: 1.25rem;
    line-height: 1.4;
}

.uk-text-firstlower::first-letter {
    text-transform: lowercase;
}

.uk-list-success > ::marker {
    color: var(--color-green) !important;
}

.uk-heading-bullet::before {
    border-left-color: var(--color-warning) !important;
}

.uk-text-warning {
    color: var(--color-warning);
}

.uk-language > div > ul > li > a > img {
    width: 36px;
}

#ToTop,
#ToBottom {
    padding: 0 10px !important;
}

.uk-meta{
    font-size: large;
    border-top: 1px dotted var(--color-white);
    padding-top: 15px;
}

/* --- Luxury Ghost Button --- */
/* Базовий стан: прозора кнопка з білою рамкою та білим текстом */
.uk-button-luxury,
button.uk-button-luxury.uk-button-default {
    border-radius: 0 !important;
    letter-spacing: 2px !important;
    border: 1px solid var(--color-white) !important;
    transition: all 0.3s ease-in-out !important;
    font-weight: 500 !important;
    background-color: transparent !important;
    color: var(--color-white) !important;
    text-transform: uppercase !important;
    padding: 0 30px !important;
}

/* Стан при наведенні: повна інверсія (білий фон, чорний текст) */
.uk-button-luxury:hover,
button.uk-button-luxury.uk-button-default:hover {
    background-color: var(--color-white) !important;
    color: var(--color-black) !important;
    border-color: var(--color-white) !important;
    text-decoration: none !important;
}

/* --- About Us Section --- */
.mb-about-section-title {
    letter-spacing: 5px;
    font-size: 0.8rem;
}

.mb-about-section-title-hi {
    margin-bottom: 0;
}

.mb-about-section-title-p,
.uk-meta{
    letter-spacing: 6px;
    color: var(--brend-color-brown);
}

.mb-about-section-header-line {
    height: 1px;
    background: var(--brend-color-brown);
    margin: 15px auto;
}

.mb-about-section-title-license {
    color: var(--brend-color-brown);
    letter-spacing: 2px;
    font-size: 0.85rem;
}

.mb-about-us-section-mission-divider-vert {
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    padding-left: 40px;
}

.mb-about-us-section-mission-compact-01 {
    font-family: 'H1CustomFont', serif !important;
    letter-spacing: 4px;
    line-height: 1.2;
}

.mb-about-us-section-mission-compact-02 {
    line-height: 1.6;
    font-weight: 300;
    font-style: italic;
}

/* --- About Us & Projects Shared Logic --- */
.mb-about-us-section-card,
.mb-project-item {
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.mb-about-us-section-card:hover,
.mb-project-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
}

.mb-about-us-section-card {
    border-top: 4px solid #533329FF !important;
}

.mb-project-item {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mb-about-us-section-card-number {
    font-size: 2.5rem !important;
    color: rgba(83, 51, 41, 0.2) !important;
    line-height: 1 !important;
}

.mb-about-us-section-content-text {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #333;
}

/* --- Project Specific Styles --- */
.mb-project-item,
.mb-bullfrog-card {
    isolation: isolate;
}

/*.mb-project-item,*/
/*.mb-bullfrog-card,*/
/*.uk-card-badge {*/
/*    z-index: auto !important;*/
/*}*/

.mb-project-img-wrap {
    position: relative;
    padding: 15px;
}

.mb-project-img-wrap::before,
.mb-project-img-wrap::after {
    content: '';
    position: absolute;
    width: 35%;
    height: 35%;
    border-color: var(--color-luxury-gold);
    border-style: solid;
    z-index: 0;
}

.mb-project-img-wrap::before {
    top: 0;
    right: 0;
    border-width: 2px 2px 0 0;
}

.mb-project-img-wrap::after {
    bottom: 0;
    left: 0;
    border-width: 0 0 2px 2px;
}

.mb-project-location,
.mb-project-area {
    color: var(--color-luxury-gold) !important;
    display: flex;
    align-items: center;
}

.mb-project-location,
.mb-project-area {
    letter-spacing: 2px;
}

.mb-icon-button-blue {
    width: 100px;
    height: 100px;
    border: 1px solid #1e87f0 !important;
    color: #1e87f0 !important;
    background: transparent !important;
}

.uk-card-badge {
    z-index: 0 !important;
}

/* Контейнер для кнопок перехода */
.mb-cta-wrap {
    padding: 40px 0;
    text-align: center;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.mb-project-location {
    font-size: 0.85rem;
    color: var(--color-luxury-gold);
    letter-spacing: 2px;
    margin-bottom: 5px;
    display: flex;
}

@media (max-width: 960px) {
    .mb-about-us-section-mission-divider-vert {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        padding-left: 0;
        padding-top: 20px;
        margin-top: 20px;
    }
}


/* --- Bullfrog Effect Implementation --- */
.mb-bullfrog-grid {
    transition: all 400ms ease;
}

/* Base card transition */
.mb-bullfrog-card {
    transition: transform 400ms ease, filter 400ms ease !important;
}

/* 1. Scale up the hovered card */
.mb-bullfrog-card:hover {
    transform: translateY(-8px);
    /*z-index: 0; !* Set to 0 to prevent overlapping with the menu *!*/
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2) !important;
}

/* Ensure the sticky header and logo containers are always on top */
/* Targeting the specific UIkit classes used in logo-menu-slideshow.php */
/*.uk-position-z-index,*/
/*.uk-sticky,*/
/*.uk-sticky-fixed,*/
/*.header {*/
/*    z-index: 2 !important; !* Max priority for navigation and logo *!*/
/*}*/

.header,
.uk-sticky-fixed {
    z-index: 4000 !important;
}

.uk-sticky {
    z-index: 3000 !important;
}

/* Ensure the parent absolute container of the header also has high priority but below contacts */
.uk-position-top.uk-position-z-index {
    z-index: 2500 !important;
}

/* Force Leaflet elements to be below any site UI */
.leaflet-control,
.leaflet-top,
.leaflet-bottom {
    z-index: 10 !important;
}

/* 2. When a card INSIDE the grid is hovered, target all OTHER cards */
.mb-bullfrog-grid:has(.mb-bullfrog-card:hover) .mb-bullfrog-card:not(:hover) {
    -webkit-filter: blur(5px);
    filter: blur(5px);
    -webkit-transform: scale(0.95) !important;
    transform: scale(0.95) !important;
    opacity: 0.6;
}

/* Ensure images inside slideshow also respect the effect */
.mb-bullfrog-card img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: -webkit-filter 400ms ease, filter 400ms ease, transform 400ms ease;
    transition: filter 400ms ease, -webkit-filter 400ms ease, transform 400ms ease;
}

.mb-bullfrog-card:hover img {
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

/* Optional: Fix padding to reduce the "dead zone" */
.mb-bullfrog-grid > div {
    padding-left: 20px;
    padding-bottom: 20px;
}

/* =========================================================
   SERVICE AREAS SECTION
========================================================= */

.leaflet-container {
    background: #f1f1f1;
}

#service-areas-section {
    position: relative;
    overflow: hidden;
}

.service-map-wrapper {
    position: relative;
    width: 100%;
    height: 650px;
    isolation: isolate;
    flex-direction: column
}

#service-map {
    width: 100%;
    height: 650px;
}

#service-map .leaflet-tile {
    filter: grayscale(0.7) brightness(0.9) contrast(1.1);
}

/* --- Текстовий блок --- */

.service-map-content {
    position: absolute;
    top: 50%;
    left: 5%;
    transform: translateY(-50%);
    z-index: 2;

    width: 100%;
    max-width: 490px;
}

.service-map-content .uk-card {
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(8px);
}

.leaflet-pane,
.leaflet-top,
.leaflet-bottom,
.leaflet-control {
    z-index: 1 !important;
}

/* --- Збільшення шрифту в тултипах на карті (Desktop та Mobile) --- */
.custom-tooltip {
    font-size: 1.1rem !important; /* Розмір заголовка місця */
    line-height: 1.4 !important;
    padding: 8px 12px !important;
    border: 1px dotted #ccc !important;
    background: white !important;
    color: #333 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important;
}

/* Якщо всередині тултипа є окремі класи для заголовка та тексту (як у вашому PHP) */
.custom-tooltip .tooltip-title {
    font-size: 1.2rem !important; /* Більший шрифт для назви міста/об'єкта */
    margin-bottom: 4px;
}

.custom-tooltip .tooltip-text {
    font-size: 1rem !important; /* Шрифт для опису */
    color: #575757 !important;
}

/* --- Zoom кнопки --- */

.service-map-zoom {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);

    z-index: 3;

    display: flex;
    flex-direction: column;
    gap: 10px;
}

.service-map-zoom button {
    width: 52px;
    height: 52px;

    padding: 0;

    font-size: 28px;
    font-weight: bold;

    background: rgba(255, 255, 255, 0.96);
    border: none;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);

    transition: all 0.25s ease;
}

.service-map-zoom button:hover {
    transform: scale(1.08);
    background: white;
}

/* --- Leaflet --- */

.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
    z-index: 1 !important;
}

/* =========================================================
   PROJECTS PAGE & LIGHTBOX
========================================================= */

/* Покращення видимості кнопки закриття Lightbox */
.uk-lightbox .uk-close-large {
    color: var(--color-white) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    border-radius: 50% !important;
    padding: 10px !important;
    box-shadow: 0 0 10px rgba(0,0,0,0.5) !important;
    transition: all 0.3s ease !important;
}

.uk-lightbox .uk-close-large:hover {
    background: rgba(0, 0, 0, 0.6) !important;
    transform: scale(1.1) !important;
}

.uk-lightbox.uk-open {
    z-index: 10000 !important;
}


/* Mobile optimizations for project cards - HIGHER SPECIFICITY */
@media (max-width: 640px) {

}

/* Responsive adjustments for small screens */
@media (max-width: 768px) {
    /* Solid background color for small screens */
    .header {
        border-bottom: 2px solid #2a2a2a;
    }

    /* Center language and info modules on small screens */
    .header-top {
        flex-direction: column;
        justify-content: center;
    }

    .header-top .social-icons {
        display: none; /* Hide social icons on small screens */
    }

    .uk-meta {
        font-size: 0.9rem;
    }

    /* Target the exact container structure to ensure override */
    .mb-bullfrog-grid .mb-bullfrog-card .uk-cover-container {
        height: 180px !important; /* Even smaller for mobile to be sure */
        min-height: 180px !important;
    }

    /* Completely hide the body container on mobile */
    .mb-bullfrog-grid .mb-bullfrog-card .uk-card-body {
        display: none !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    /* Ensure the grid doesn't force a match height that overrides our fix */
    .mb-bullfrog-grid {
        height: auto !important;
    }

    .mb-bullfrog-card h3 {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }

    /* Fix for About Us cards on mobile */
    .mb-about-us-section-card {
        border-top: 4px solid #533329FF !important;
        margin-bottom: 20px !important; /* Spacing between stacked cards */
        display: block !important;
        visibility: visible !important;
    }

    .mb-about-us-section-card-number {
        font-size: 2rem !important; /* Slightly smaller for mobile but still large */
        color: rgba(83, 51, 41, 0.2) !important;
        display: block !important;
    }
}