/* =========================================================================
   Mabrur Properties — Brand polish
   Accent = logo blue #0072bc.  Dark areas = refined graphite charcoal
   (replaces the old navy-blue blocks). Loaded after theme CSS so these win.
   ========================================================================= */

:root {
    --mp-blue:        #0072bc;   /* logo blue — primary accent */
    --mp-blue-dark:   #015c9c;   /* hover / pressed */
    --mp-blue-bright: #2e9be0;   /* light accent on dark */
    --mp-blue-soft:   #eaf3fb;   /* light tint */
    --mp-dark:        #262b31;   /* dark sections, footer, top bar */
    --mp-dark-2:      #323842;   /* lighter graphite (gradient) */
    --mp-dark-3:      #1c2025;   /* deeper graphite (gradient) */
    --mp-ink:         #222730;   /* headings */
}

/* ---------- Headings: crisp graphite ----------------------------------- */
h1, h2, h3, h4, h5, h6,
.ttm-textcolor-darkgrey { color: var(--mp-ink); }

/* ---------- Links ------------------------------------------------------ */
a { transition: color .25s ease; }
a:hover, a:focus { color: var(--mp-blue-dark); }

/* =======================================================================
   BUTTONS — blue with a subtle gradient + depth (white text is readable)
   ======================================================================= */
.ttm-btn { transition: all .3s ease; }

.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor,
.button.ttm-btn.cart-btn {
    background: linear-gradient(135deg, var(--mp-blue) 0%, var(--mp-blue-dark) 100%) !important;
    border-color: var(--mp-blue) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(0,114,188,.22);
}
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-skincolor:hover,
.button.ttm-btn.cart-btn:hover {
    background: linear-gradient(135deg, var(--mp-blue-dark) 0%, #014a80 100%) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px rgba(0,114,188,.32);
    transform: translateY(-2px);
}

.ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor {
    color: var(--mp-blue) !important;
    border-color: var(--mp-blue) !important;
}
.ttm-btn.ttm-btn-style-border.ttm-btn-color-skincolor:hover {
    background: var(--mp-blue) !important;
    border-color: var(--mp-blue) !important;
    color: #fff !important;
}

.ttm-btn.ttm-btn-style-fill.ttm-btn-color-darkgrey:hover,
.ttm-btn.ttm-btn-style-fill.ttm-btn-color-dark:hover,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-darkgrey:hover,
.ttm-btn.ttm-btn-style-border.ttm-btn-color-dark:hover {
    background: var(--mp-blue) !important;
    border-color: var(--mp-blue) !important;
    color: #fff !important;
}

/* =======================================================================
   HERO SLIDER — make the call-to-action button solid & readable
   ======================================================================= */
.ttm-rev_slider-wide a.rs-layer.ttm-btn {
    background-color: var(--mp-blue) !important;
    color: #fff !important;
    border-color: var(--mp-blue) !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
}
.ttm-rev_slider-wide a.rs-layer.ttm-btn:hover {
    background-color: var(--mp-blue-dark) !important;
    border-color: var(--mp-blue-dark) !important;
    color: #fff !important;
}

/* =======================================================================
   DARK SECTIONS — refined graphite gradient (top bar, footer)
   ======================================================================= */
.top_bar.ttm-bgcolor-darkgrey {
    background: linear-gradient(90deg, var(--mp-dark) 0%, var(--mp-dark-2) 100%) !important;
    border-bottom: 2px solid var(--mp-blue);
}
.footer.ttm-bgcolor-darkgrey {
    background: linear-gradient(180deg, var(--mp-dark-2) 0%, var(--mp-dark-3) 100%) !important;
}
.footer.ttm-bgcolor-darkgrey::before,
.top_bar.ttm-bgcolor-darkgrey::before { display: none; }

/* big feature columns get a subtle graphite gradient for depth */
.ttm-col-bgcolor-yes.ttm-bgcolor-darkgrey .ttm-col-wrapper-bg-layer,
.ttm-col-bgcolor-yes.ttm-bgcolor-darkgrey {
    background: linear-gradient(150deg, var(--mp-dark) 0%, var(--mp-dark-3) 100%) !important;
}

/* social icons hover → blue */
.social-icons li a:hover,
.top_bar_social a:hover { color: var(--mp-blue-bright) !important; }

/* =======================================================================
   FORMS — blue focus ring
   ======================================================================= */
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--mp-blue) !important;
    box-shadow: 0 0 0 3px rgba(0,114,188,.15) !important;
    outline: none;
}

/* =======================================================================
   LOGO — crisp SVG, properly sized & aligned
   ======================================================================= */
.site-branding { display: flex; align-items: center; }
#logo-img { height: 62px; width: auto; max-width: 300px; display: block; }
#footer-logo-img { height: 64px; width: auto; display: block; }
@media (max-width: 991px) { #logo-img { height: 54px; } }
@media (max-width: 575px) { #logo-img { height: 46px; } }

/* =======================================================================
   ACCENTS
   ======================================================================= */
.section-title .title-header h5, .ttm-textcolor-skincolor h5 { letter-spacing: 1.5px; }

::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--mp-blue-soft); }
::-webkit-scrollbar-thumb { background: var(--mp-blue); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-blue-dark); }

::selection { background: var(--mp-blue); color: #fff; }
::-moz-selection { background: var(--mp-blue); color: #fff; }

/* =======================================================================
   PROJECT DETAILS PAGE — make key info readable & focused
   ======================================================================= */
/* Dark "Project Details" info box: values were dim grey on the dark panel */
.ttm-pf-single-detail-box .ttm-pf-data-details {
    color: #ffffff !important;
    font-weight: 600;
    font-size: 16px;
}
.ttm-pf-single-detail-box .ttm-pf-data-title {
    color: #9fc9ec !important;          /* light-blue label for hierarchy */
    font-weight: 500;
    opacity: 1;
}

/* Specification list: was light grey #777 — make crisp on white */
.ttm-list.style2 .ttm-list-li-content {
    color: #454d5b !important;          /* readable value */
}
.ttm-list.style2 .ttm-list-li-content strong {
    color: #1f2530 !important;          /* dark, prominent label */
    font-weight: 700;
}
/* the check icons a touch bolder */
.ttm-list.ttm-list-style-icon.ttm-list-icon-color-skincolor li i { color: var(--mp-blue) !important; }

/* =======================================================================
   FOOTER — make contact icons clearly visible + highlight the credit
   ======================================================================= */
/* Contact icons (phone / email / location) were dim blue on the dark footer.
   Give them a bright blue gradient circle with a white glyph. */
.footer .featured-icon-box.style1 .featured-icon { padding-right: 18px; }
.footer .featured-icon-box.style1 .featured-icon .ttm-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--mp-blue) 0%, var(--mp-blue-bright) 100%);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 14px rgba(0,114,188,.40);
}
.footer .featured-icon-box.style1 .featured-icon .ttm-icon i {
    color: #ffffff !important;
    font-size: 19px;
    line-height: 1;
    margin: 0;
}

/* "Developed By BDdevs Tech" — clean, focused link (no button background) */
.footer .footer-link {
    color: #3aa9f0 !important;
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(58,169,240,.5);
    padding-bottom: 1px;
    transition: all .25s ease;
}
.footer .footer-link:hover {
    color: #7ec8f5 !important;
    border-bottom-color: #7ec8f5;
}

/* =======================================================================
   PROJECT DETAILS — gallery, lightbox, map, CTA, status badge
   ======================================================================= */
/* Construction-status badge in the details box */
.mp-status-badge {
    display: inline-block;
    background: var(--mp-blue);
    color: #fff;
    font-size: 13px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
    padding: 5px 14px; border-radius: 20px; margin-bottom: 16px;
}

/* Key facts strip (icon stat cards) */
.mp-keyfacts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(155px, 1fr));
    gap: 14px;
    margin: 24px 0 10px;
}
.mp-keyfact {
    display: flex; align-items: center; gap: 13px;
    background: #fff; border: 1px solid #eef1f6; border-radius: 14px;
    padding: 15px 17px; box-shadow: 0 4px 14px rgba(16,42,76,.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.mp-keyfact:hover { border-color: rgba(0,114,188,.35); box-shadow: 0 12px 26px rgba(0,114,188,.13); transform: translateY(-3px); }
.mp-kf-ic {
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 13px;
    background: linear-gradient(135deg, var(--mp-blue) 0%, var(--mp-blue-bright) 100%);
    color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 15px rgba(0,114,188,.30);
}
.mp-kf-ic svg { width: 23px; height: 23px; }
.mp-kf-meta { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.mp-kf-val { font-weight: 700; color: var(--mp-ink); font-size: 15.5px; }
.mp-kf-lbl { font-size: 12px; color: #8a94a6; letter-spacing: .2px; }

/* Gallery grid — professional tiles, controlled columns */
.mp-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
@media (min-width: 1200px) { .mp-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 767px)  { .mp-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } }
.mp-gallery-item {
    position: relative; display: block; overflow: hidden; border-radius: 14px;
    aspect-ratio: 4 / 3; box-shadow: 0 8px 22px rgba(16,42,76,.10); cursor: pointer;
    background: #eef1f6;
}
.mp-gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.mp-gallery-item:hover img { transform: scale(1.1); }
.mp-gallery-item::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(12,26,46,.55), rgba(12,26,46,0) 55%);
    opacity: 0; transition: opacity .35s ease;
}
.mp-gallery-item:hover::after { opacity: 1; }
.mp-gallery-ic {
    position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .35s ease;
}
.mp-gallery-ic svg {
    width: 26px; height: 26px; color: var(--mp-blue);
    background: #fff; border-radius: 50%; padding: 11px; box-sizing: content-box;
    box-shadow: 0 8px 20px rgba(0,0,0,.28); transform: scale(.7); transition: transform .35s ease;
}
.mp-gallery-item:hover .mp-gallery-ic { opacity: 1; }
.mp-gallery-item:hover .mp-gallery-ic svg { transform: scale(1); }

/* Lightbox */
.mp-lightbox {
    position: fixed; inset: 0; z-index: 99999; background: rgba(10,12,16,.95);
    display: none; align-items: center; justify-content: center;
}
.mp-lightbox.open { display: flex; animation: mpFade .25s ease; }
@keyframes mpFade { from { opacity: 0; } to { opacity: 1; } }
.mp-lb-img { max-width: 90vw; max-height: 86vh; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.mp-lb-btn {
    position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0;
    width: 50px; height: 50px; border-radius: 50%; font-size: 26px; cursor: pointer;
    display: flex; align-items: center; justify-content: center; line-height: 1; transition: background .2s ease;
}
.mp-lb-btn:hover { background: var(--mp-blue); }
.mp-lb-close { top: 24px; right: 24px; }
.mp-lb-prev { left: 24px; top: 50%; transform: translateY(-50%); }
.mp-lb-next { right: 24px; top: 50%; transform: translateY(-50%); }
.mp-lb-counter { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff; font-weight: 600; letter-spacing: 1px; }
@media (max-width: 575px) {
    .mp-lb-btn { width: 42px; height: 42px; font-size: 22px; }
    .mp-lb-close { top: 12px; right: 12px; }
    .mp-lb-prev { left: 8px; } .mp-lb-next { right: 8px; }
}

/* Location map */
.mp-map-wrap {
    position: relative; width: 100%; padding-bottom: 42%;
    border-radius: 12px; overflow: hidden; box-shadow: 0 6px 20px rgba(16,42,76,.10);
}
.mp-map-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .mp-map-wrap { padding-bottom: 70%; } }

/* CTA panel */
.mp-project-cta {
    position: relative; overflow: hidden;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px;
    background: linear-gradient(135deg, var(--mp-blue) 0%, var(--mp-blue-dark) 100%);
    border-radius: 16px; padding: 30px 36px; box-shadow: 0 14px 34px rgba(0,114,188,.28);
}
.mp-project-cta::after {
    content: ''; position: absolute; right: -60px; top: -60px; width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}
.mp-cta-left { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.mp-cta-ic {
    flex: 0 0 58px; width: 58px; height: 58px; border-radius: 15px;
    background: rgba(255,255,255,.16); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.mp-cta-ic svg { width: 30px; height: 30px; }
.mp-project-cta-text h3 { color: #fff; margin: 0 0 5px; font-weight: 700; }
.mp-project-cta-text p { color: rgba(255,255,255,.9); margin: 0; }
.mp-project-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; position: relative; z-index: 1; }
.mp-project-cta-actions .ttm-btn.ttm-btn-style-fill { background: #fff !important; color: var(--mp-blue) !important; border-color: #fff !important; box-shadow: 0 6px 16px rgba(0,0,0,.12); }
.mp-project-cta-actions .ttm-btn.ttm-btn-style-fill:hover { background: rgba(255,255,255,.9) !important; transform: translateY(-2px); }
.mp-project-cta-actions .ttm-btn.ttm-btn-style-border { color: #fff !important; border-color: rgba(255,255,255,.75) !important; }
.mp-project-cta-actions .ttm-btn.ttm-btn-style-border:hover { background: #fff !important; color: var(--mp-blue) !important; }
@media (max-width: 575px) { .mp-cta-ic { display: none; } .mp-project-cta { padding: 24px; } }

/* Map caption */
.mp-map-caption {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 14px;
}
.mp-map-place { display: inline-flex; align-items: center; gap: 8px; color: var(--mp-ink); font-weight: 600; }
.mp-map-place svg { width: 18px; height: 18px; color: var(--mp-blue); }
.mp-map-caption a { color: var(--mp-blue); font-weight: 600; }
.mp-map-caption a:hover { color: var(--mp-blue-dark); }

/* =======================================================================
   PROJECT DETAILS — overall polish
   ======================================================================= */
.project-single-section .ttm_single_image-wrapper img,
.project-single-section .ttm-pf-single-content-wrapper > .row img {
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16,42,76,.10);
}
.ttm-pf-single-detail-box {
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(12,26,46,.28);
}
.project-single-section .section-title .title-header h5 { color: var(--mp-blue) !important; letter-spacing: 1.5px; text-transform: uppercase; }
.project-single-section .ttm-pf-single-content-area > h2 { color: var(--mp-ink); font-weight: 700; font-size: 30px; }
.project-single-section .featured-icon-box.style6 .featured-icon .ttm-icon { border-radius: 12px; }
.ttm-pf-single-related-wrapper h2 { color: var(--mp-ink); font-weight: 700; }
.ttm-pf-single-related-wrapper .featured-thumbnail img { border-radius: 12px; }
/* keep the dark info box readable & stacked on small screens */
@media (max-width: 768px) {
    .ttm-pf-view-top-image .ttm-pf-single-detail-box {
        position: static !important; width: 100% !important; right: auto !important; bottom: auto !important;
        margin-top: 18px;
    }
}