:root {
            --dl-dark: #07111a;
            --dl-dark-2: #0a1822;
            --dl-card: rgba(9, 21, 31, .82);
            --dl-border: rgba(205, 161, 75, .22);
            --dl-gold: #cda14b;
            --dl-gold-2: #e0bd68;
            --dl-text: #f8fafc;
            --dl-muted: #b6c1cc;
        }

        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            font-family: "El Messiri", sans-serif;
            background: radial-gradient(circle at top right, rgba(205, 161, 75, .12), transparent 32%), var(--dl-dark);
            color: var(--dl-muted);
            text-align: right;
            overflow-x: hidden;
        }
        body.modal-open { padding-left: 0 !important; }
        a { color: var(--dl-gold); text-decoration: none; transition: .25s ease; }
        a:hover { color: var(--dl-gold-2); text-decoration: none; }
        h1, h2, h3, h4, h5, h6 { color: var(--dl-text); font-weight: 800; }
        p { line-height: 1.95; }
        .text-primary { color: var(--dl-gold) !important; }
        .bg-primary { background-color: var(--dl-gold) !important; }
        .bg-secondary { background-color: #111f2b !important; }
        .bg-light { background: #08131b !important; }
        .text-muted { color: var(--dl-muted) !important; }
        .btn { border-radius: 14px; padding: .78rem 1.15rem; font-weight: 800; border-width: 1px; }
        .btn-primary {
            background: linear-gradient(135deg, var(--dl-gold), var(--dl-gold-2)) !important;
            border-color: transparent !important;
            color: #08131b !important;
            box-shadow: 0 14px 35px rgba(205, 161, 75, .24);
        }
        .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(205, 161, 75, .34); }
        .btn-outline-light, .btn-outline-primary {
            border-color: rgba(255,255,255,.24) !important;
            color: #fff !important;
            background: rgba(255,255,255,.035);
        }
        .btn-outline-light:hover, .btn-outline-primary:hover { border-color: var(--dl-gold) !important; color: var(--dl-gold) !important; background: rgba(205,161,75,.1); }
        .container { max-width: 1180px; }

        .dl-topbar {
            border-bottom: 1px solid rgba(255,255,255,.08);
            background: rgba(7, 17, 26, .74);
            backdrop-filter: blur(15px);
            font-size: 14px;
        }
        .dl-header {
            position: sticky;
            top: 0;
            z-index: 1020;
            background: rgba(7, 17, 26, .88);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .dl-navbar { min-height: 74px; }
        .dl-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--dl-gold); }
        .dl-brand-mark {
            width: 50px; height: 50px; border: 1px solid rgba(205,161,75,.45); border-radius: 16px;
            display: inline-flex; align-items: center; justify-content: center;
            color: var(--dl-gold); background: rgba(205,161,75,.08); font-size: 22px;
        }
        .dl-brand-title { line-height: 1.15; }
        .dl-brand-title strong { display: block; font-size: 27px; letter-spacing: .5px; color: var(--dl-gold); }
        .dl-brand-title span { display: block; font-size: 18px; letter-spacing: 1px; color: var(--dl-gold-2); text-transform: uppercase; }
        .navbar-toggler { border: 1px solid rgba(205,161,75,.35); color: var(--dl-gold); padding: .55rem .8rem; border-radius: 12px; }
        .navbar-toggler:focus { outline: 0; box-shadow: 0 0 0 .2rem rgba(205,161,75,.15); }
        .dl-nav .nav-link {
            color: #fff !important;
            padding: 1rem .85rem !important;
            font-weight: 700;
            position: relative;
            opacity: .9;
        }
        .dl-nav .nav-link:after {
            content: ""; position: absolute; left: 18%; right: 18%; bottom: 8px; height: 2px;
            background: var(--dl-gold); transform: scaleX(0); transition: .25s ease; border-radius: 20px;
        }
        .dl-nav .nav-link.active, .dl-nav .nav-link:hover { color: var(--dl-gold) !important; opacity: 1; }
        .dl-nav .nav-link.active:after, .dl-nav .nav-link:hover:after { transform: scaleX(1); }
        .dl-social a { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(205,161,75,.35); display: inline-flex; align-items: center; justify-content: center; margin-left: 8px; color: var(--dl-gold); background: rgba(205,161,75,.08); }

        .dl-section { padding: 88px 0; position: relative; }
        .dl-section-soft { background: linear-gradient(180deg, #0a1822 0%, #08131b 100%); border-top: 1px solid rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.05); }
        .dl-kicker { color: var(--dl-gold); font-weight: 800; letter-spacing: .3px; display: inline-flex; gap: 12px; align-items: center; }
        .dl-kicker:before, .dl-kicker:after { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, var(--dl-gold)); opacity: .7; }
        .dl-kicker:before { background: linear-gradient(90deg, var(--dl-gold), transparent); }
        .dl-card {
            background: linear-gradient(145deg, rgba(13, 29, 42, .92), rgba(8, 19, 27, .9));
            border: 1px solid var(--dl-border);
            border-radius: 26px;
            box-shadow: 0 24px 70px rgba(0, 0, 0, .34);
        }
        .border-rounded_float, .feature-text, .testimonial-item, .service-carousel .d-flex, .blog-item, .contact-form, .card {
            background: linear-gradient(145deg, rgba(13, 29, 42, .88), rgba(8, 19, 27, .88)) !important;
            border: 1px solid var(--dl-border) !important;
            border-radius: 24px !important;
            box-shadow: 0 20px 55px rgba(0,0,0,.28);
            color: var(--dl-muted);
        }
        .card { overflow: hidden; }
        .card-body { color: var(--dl-muted); }
        .card-title, .blog-item h4, .feature-text h5 { color: var(--dl-text); }
        .img-fluid.rounded, img.rounded { border-radius: 24px !important; }
        .form-control, .custom-select, select.form-control {
            min-height: 52px;
            border-radius: 14px;
            border: 1px solid rgba(255,255,255,.14);
            background: rgba(255,255,255,.06);
            color: #fff;
            text-align: right;
        }
        .form-control:focus, .custom-select:focus {
            background: rgba(255,255,255,.09);
            border-color: var(--dl-gold);
            color: #fff;
            box-shadow: 0 0 0 .2rem rgba(205,161,75,.16);
        }
        .form-control::placeholder { color: rgba(255,255,255,.55); }
        select.form-control option { color: #111; }
        textarea.form-control { min-height: 120px; }

        .footer {
            background: #061018 !important;
            border-top: 1px solid rgba(205,161,75,.18);
            color: var(--dl-muted);
        }
        .footer h4, .footer h5 { color: var(--dl-gold); }
        .footer a { color: #fff; display: inline-block; margin-bottom: .55rem; }
        .footer a:hover { color: var(--dl-gold); }
        .back-to-top, .go-to-whatsapp {
            position: fixed; z-index: 990; width: 48px; height: 48px; border-radius: 50%;
            align-items: center; justify-content: center; display: none;
        }
        .back-to-top { right: 22px; bottom: 24px; padding: 0; }
        .go-to-whatsapp { left: 22px; bottom: 24px; display: flex; background: #111f2b; border: 1px solid rgba(37,211,102,.35); }
        .go-to-whatsapp img { width: 38px; height: 38px; }

        .modal-content { background: #091722; color: var(--dl-muted); border: 1px solid var(--dl-border); border-radius: 26px; }
        .modal-header, .modal-footer { border-color: rgba(255,255,255,.08); }
        .close { color: #fff; opacity: .9; text-shadow: none; }


        .bg-page-header {
            min-height: 220px;
            display: flex;
            align-items: center;
            position: relative;
            overflow: hidden;
            background:
                radial-gradient(circle at top right, rgba(205,161,75,.14), transparent 26%),
                linear-gradient(135deg, #07111f 0%, #0b1f35 55%, #111827 100%);
            border-bottom: 1px solid rgba(205,161,75,.18);
        }
        .bg-page-header:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(7,17,31,.10), rgba(255,255,255,0));
            pointer-events: none;
        }
        .bg-page-header.page-header-compact {
            min-height: 150px;
            padding: 40px 0;
        }
        .page-header-inner {
            position: relative;
            z-index: 1;
            text-align: center;
        }
        .page-header-inner > *:last-child { margin-bottom: 0; }
        .page-header-title {
            font-size: clamp(2rem, 4vw, 2.7rem);
            line-height: 1.22;
            margin-bottom: 10px;
            color: #fff;
            font-weight: 800;
        }
        .page-header-subtitle {
            max-width: 760px;
            margin: 0 auto 10px;
            font-size: 1rem;
            line-height: 1.8;
            color: rgba(255,255,255,.74);
        }
        .page-header-breadcrumb {
            display: inline-flex;
            align-items: center;
            flex-wrap: wrap;
            justify-content: center;
            gap: 8px;
            font-size: .85rem;
            color: rgba(255,255,255,.55);
        }
        .page-header-breadcrumb a {
            color: rgba(255,255,255,.78);
        }
        .page-header-breadcrumb a:hover {
            color: var(--dl-gold);
        }
        .page-content-tight {
            padding-top: 42px;
        }
        .dark_blue_bg, .link_pro { background: linear-gradient(180deg, #0a1822, #07111a) !important; }
        .font-weight-semi-bold { font-weight: 700 !important; }
        .testimonial-text { background: rgba(9,21,31,.92) !important; color: #d8e2eb !important; border: 1px solid rgba(205,161,75,.20); border-radius: 22px !important; }
        .owl-carousel .owl-nav button.owl-next, .owl-carousel .owl-nav button.owl-prev { width: 42px; height: 42px; border-radius: 50%; background: #cda14b !important; color: #07111a !important; margin: 8px; }
        .owl-dots .owl-dot span { background: rgba(255,255,255,.24) !important; }
        .owl-dots .owl-dot.active span { background: #cda14b !important; }
        .btn-light { background: rgba(255,255,255,.92) !important; color: #07111a !important; border-color: transparent !important; }
        .display-3, .display-4 { font-weight: 800; }
        .breadcrumb, .page-header { background: transparent; }

        .page-hero {
            min-height: 380px; display: flex; align-items: center;
            background: linear-gradient(90deg, rgba(7,17,26,.94), rgba(7,17,26,.74), rgba(7,17,26,.98)), url('../frontend/img/daman-reference-full.jpg') center/cover no-repeat;
            border-bottom: 1px solid rgba(205,161,75,.18);
        }

        @media (max-width: 991.98px) {
            .dl-brand-title strong { font-size: 22px; }
            .dl-brand-title span { font-size: 13px; }
            .navbar-collapse { padding: 14px 0 18px; }
            .dl-nav .nav-link { padding: .78rem 0 !important; }
            .dl-nav .nav-link:after { left: auto; right: 0; width: 36px; transform-origin: right; }
            .dl-section { padding: 56px 0; }
            .bg-page-header.page-header-compact {
                min-height: 130px;
                padding: 34px 0;
            }
            .page-content-tight {
                padding-top: 34px;
            }
        }
        @media (max-width: 575.98px) {
            .container { padding-left: 18px; padding-right: 18px; }
            .dl-topbar { display: none; }
            .dl-brand-mark { width: 44px; height: 44px; border-radius: 14px; }
            .dl-brand-title strong { font-size: 20px; }
            .btn { width: 100%; margin-bottom: .55rem; }
            .bg-page-header.page-header-compact {
                min-height: 104px;
                padding: 22px 0;
            }
            .page-header-title {
                font-size: 1.85rem;
                margin-bottom: 6px;
            }
            .page-header-subtitle {
                font-size: .84rem;
                line-height: 1.7;
                margin-bottom: 6px;
            }
            .page-header-breadcrumb {
                font-size: .76rem;
                gap: 6px;
            }
            .page-content-tight {
                padding-top: 26px;
            }
        }
    

    .contact-modal .modal-dialog { max-width: 940px; }
    .contact-modal .modal-content { border: 1px solid rgba(205,161,75,.28); border-radius: 30px; overflow: hidden; background: #07131d; box-shadow: 0 35px 110px rgba(0,0,0,.6); }
    .contact-modal .modal-body { padding: 0; }
    .contact-modal .close { position: absolute; top: 18px; left: 20px; z-index: 5; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; opacity: 1; text-shadow: none; font-size: 30px; line-height: 40px; padding: 0; border: 1px solid rgba(255,255,255,.12); }
    .consultation-card { direction: rtl; padding: 38px; font-family: "El Messiri", sans-serif; background: radial-gradient(circle at top right, rgba(205,161,75,.14), transparent 33%), linear-gradient(145deg, rgba(11,27,40,.96), rgba(6,16,24,.98)); }
    .consultation-heading { text-align: center; margin-bottom: 26px; }
    .consultation-heading h2 { font-size: 33px; line-height: 1.45; font-weight: 800; color: #fff; margin: 0; }
    .consultation-heading .gold-word { color: #e0bd68; position: relative; display: inline-block; }
    .consultation-heading .gold-word:after { content: ""; position: absolute; right: 0; left: 0; bottom: -6px; height: 3px; border-radius: 999px; background: #cda14b; }
    .service-selected-box { display: none; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 18px; padding: 12px 16px; border-radius: 16px; background: rgba(255,255,255,.06); border: 1px solid rgba(205,161,75,.22); color: #fff; font-weight: 700; text-align: center; }
    .service-selected-box .service-title { color: #e0bd68; font-weight: 800; }
    #ServiceModalInFooter .service-selected-box, #ServiceModalInHomePage .service-selected-box, .service-consultation-modal .service-selected-box { display: flex; }
    .consultation-form .form-group { margin-bottom: 14px; }
    .modal-field { position: relative; }
    .modal-field > i { position: absolute; top: 18px; right: 18px; color: #cda14b; z-index: 2; font-size: 15px; pointer-events: none; }
    .textarea-field > i { display: none; }
    .consultation-form .form-control { min-height: 52px; border-radius: 15px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; padding: 12px 45px 12px 15px; text-align: right; font-size: 15px; transition: all .2s ease; }
    .consultation-form textarea.form-control { min-height: 112px; padding: 14px 16px; resize: vertical; }
    .consultation-form .form-control::placeholder { color: rgba(255,255,255,.55); opacity: 1; }
    .consultation-form .form-control:focus { border-color: #cda14b; background: rgba(255,255,255,.09); box-shadow: 0 0 0 .18rem rgba(205,161,75,.16); outline: 0; }
    .consultation-form .form-control.is-invalid { border-color: #ff6b6b; background: rgba(255,107,107,.06); }
    .field-error { display: block; margin-top: 5px; color: #ff9b9b; font-size: 13px; line-height: 1.6; min-height: 0; }
    .ajax-alert { border-radius: 15px; font-size: 14px; line-height: 1.7; margin-bottom: 14px; }
    .consultation-form .contact-submit-btn { min-height: 56px; border-radius: 15px; font-weight: 800; font-size: 17px; }
    .form-safe-note { text-align: center; color: rgba(255,255,255,.58); font-size: 12px; line-height: 1.8; margin-top: 12px; }
    .form-safe-note i { color: #cda14b; margin-left: 5px; }
    @media (max-width: 991.98px) { .contact-modal .modal-dialog { max-width: calc(100% - 24px); margin: 12px auto; } .consultation-card { padding: 30px 18px 24px; } .consultation-heading h2 { font-size: 25px; } }
    @media (max-width: 575.98px) { .contact-modal .close { top: 10px; left: 10px; width: 38px; height: 38px; line-height: 36px; } .consultation-heading { padding-top: 18px; } .consultation-heading h2 { font-size: 22px; } }


.blog-card { overflow: hidden; height: 100%; }
.blog-card .blog-img { display:block; height: 230px; overflow:hidden; border-radius: 24px 24px 0 0; background:#0b1b28; }
.blog-card img { width:100%; height:100%; object-fit:cover; transition:.35s ease; }
.blog-card:hover img { transform: scale(1.05); }
.contact-page-consultation .contact-page-form-layout { display:block; max-width:860px; margin:0 auto; }
.contact-page-consultation .contact-page-form-full { width:100%; }
@media (max-width:575.98px) { .contact-page-consultation .contact-page-form-layout { max-width:100%; } }


/* Mobile floating button fix - 20260525 */
.back-to-top.btn,
.go-to-whatsapp {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
}
.back-to-top.btn {
    display: none;
    right: 22px;
    bottom: 24px;
    line-height: 48px;
    text-align: center;
}
.back-to-top.btn i {
    line-height: 48px;
    font-size: 18px;
}
.go-to-whatsapp {
    left: 22px;
    bottom: 24px;
    display: flex;
}
@media (max-width: 575.98px) {
    .back-to-top.btn,
    .go-to-whatsapp {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        max-width: 42px !important;
    }
    .back-to-top.btn {
        right: 14px;
        bottom: 16px;
        line-height: 42px;
    }
    .back-to-top.btn i {
        line-height: 42px;
        font-size: 17px;
    }
    .go-to-whatsapp {
        left: 14px;
        bottom: 16px;
    }
    .go-to-whatsapp img {
        width: 34px;
        height: 34px;
    }
}