/* =========================================================
   HAKIM PARSEH
   SINGLE-LAYER HEADER + FOOTER
   Replace the previous code with this complete version
========================================================= */

:root {
    --hp-navy: #08213F;
}


/* =========================================================
   1. NAVBAR / HEADER — SINGLE LAYER
========================================================= */

/* Apply the background color only to the main header layer */
#masthead,
.site-header,
.header-main,
.main-header,
.studiare-header,
.elementor-location-header {
    background: var(--hp-navy) !important;
    background-color: var(--hp-navy) !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Make all inner header layers transparent */
#masthead > div,
#masthead .container,

.site-header > div,
.site-header .container,
.site-header-inner,

.header-main > div,
.header-main .container,

.main-header > div,

.studiare-header > div,
.studiare-header .container,

.elementor-location-header > .elementor-element,
.elementor-location-header .elementor-section,
.elementor-location-header .elementor-container,
.elementor-location-header .elementor-widget-wrap,
.elementor-location-header .e-con,
.elementor-location-header .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Remove decorative header layers and pseudo-elements */
#masthead::before,
#masthead::after,

.site-header::before,
.site-header::after,

.header-main::before,
.header-main::after,

.main-header::before,
.main-header::after,

.studiare-header::before,
.studiare-header::after,

.elementor-location-header::before,
.elementor-location-header::after {
    content: none !important;
    display: none !important;
}



/* =========================================================
   FINAL COMPACT RIGHT-ALIGNED NAVBAR
========================================================= */

:root {
    --hp-header-height: 68px;
}

/* Desktop only */
@media (min-width: 1025px) {

    /* Keep every header layer at one compact height */
    body #masthead,
    body .site-header,
    body .header-main,
    body .main-header,
    body .studiare-header,
    body .header-wrapper,
    body .site-header-wrapper,
    body .header-area,
    body .elementor-location-header {
        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;
        max-height: var(--hp-header-height) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
        box-sizing: border-box !important;
    }

    /* Compact all structural wrappers inside the header */
    body #masthead > .container,
    body #masthead .site-header-inner,
    body #masthead .site-header-inner > .container,
    body .site-header > .container,
    body .site-header .site-header-inner,
    body .site-header .site-header-inner > .container,
    body .header-main > .container,
    body .main-header > .container,
    body .studiare-header > .container,
    body .header-wrapper > .container,
    body .site-header-wrapper > .container,
    body .header-area > .container {
        width: 100% !important;
        max-width: 1540px !important;

        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;
        max-height: var(--hp-header-height) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        direction: rtl !important;

        margin: 0 auto !important;
        padding: 0 30px !important;
        column-gap: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
    }

    /* Logo stays at the far right */
    body #masthead .site-logo,
    body #masthead .custom-logo-link,
    body #masthead .logo,
    body #masthead .site-branding,
    body .site-header .site-logo,
    body .site-header .custom-logo-link,
    body .site-header .logo,
    body .site-header .site-branding {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    body #masthead .site-logo img,
    body #masthead .custom-logo-link img,
    body #masthead .logo img,
    body #masthead .site-branding img,
    body .site-header .site-logo img,
    body .site-header .custom-logo-link img,
    body .site-header .logo img,
    body .site-header .site-branding img {
        width: auto !important;
        height: auto !important;
        max-height: 48px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    /* Navigation sits next to the logo, not in the center */
    body .studiare-navigation,
    body .main-navigation,
    body #masthead nav,
    body .site-header nav {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        direction: rtl !important;

        margin-right: 26px !important;
        margin-left: auto !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    /* Menu items from Home through About stay grouped on the right */
    body .studiare-navigation > ul.menu,
    body .studiare-navigation > div > ul.menu,
    body .studiare-navigation .menu > ul,
    body .studiare-navigation .menu-primary-menu-container > ul,
    body .main-navigation > ul,
    body .main-navigation > div > ul,
    body .main-navigation .menu-primary-menu-container > ul,
    body #masthead nav > ul,
    body #masthead nav > div > ul,
    body .site-header nav > ul,
    body .site-header nav > div > ul {
        width: max-content !important;
        min-width: 0 !important;
        max-width: none !important;

        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;

        direction: rtl !important;

        gap: clamp(22px, 1.65vw, 32px) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    body .studiare-navigation ul.menu > li,
    body .studiare-navigation .menu > ul > li,
    body .studiare-navigation .menu-primary-menu-container > ul > li,
    body .main-navigation > ul > li,
    body .main-navigation > div > ul > li,
    body #masthead nav > ul > li,
    body #masthead nav > div > ul > li,
    body .site-header nav > ul > li,
    body .site-header nav > div > ul > li {
        position: relative !important;

        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;

        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;

        margin: 0 !important;
        padding: 0 !important;

        overflow: visible !important;
    }

    body .studiare-navigation ul.menu > li > a,
    body .studiare-navigation .menu > ul > li > a,
    body .studiare-navigation .menu-primary-menu-container > ul > li > a,
    body .main-navigation > ul > li > a,
    body .main-navigation > div > ul > li > a,
    body #masthead nav > ul > li > a,
    body #masthead nav > div > ul > li > a,
    body .site-header nav > ul > li > a,
    body .site-header nav > div > ul > li > a {
        width: auto !important;

        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;

        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 2px !important;

        font-size: 14px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    /* Left-side controls keep their current design and position */
    body .search-form-opener,
    body .login-user,
    body .site-header-inner span.digits-login-modal,
    body .site-header .button,
    body .site-header .elementor-button,
    body .header-main .button,
    body .header-main .elementor-button,
    body .mini-cart-opener,
    body .header-cart {
        flex: 0 0 auto !important;
        width: auto !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* Dropdowns open directly below the compact navbar */
    body .studiare-navigation ul.menu > li > ul,
    body .studiare-navigation .menu > ul > li > ul,
    body .main-navigation ul ul {
        top: 100% !important;
    }

    /* Match every sticky spacer to the real navbar height */
    body .header-placeholder,
    body .site-header-placeholder,
    body .studiare-header-placeholder,
    body .sticky-header-placeholder,
    body .sticky-header-spacer,
    body .header-spacer {
        height: var(--hp-header-height) !important;
        min-height: var(--hp-header-height) !important;
        max-height: var(--hp-header-height) !important;

        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Compact spacing on smaller desktop screens */
@media (min-width: 1025px) and (max-width: 1350px) {

    body #masthead > .container,
    body #masthead .site-header-inner,
    body #masthead .site-header-inner > .container,
    body .site-header > .container,
    body .site-header .site-header-inner,
    body .site-header .site-header-inner > .container,
    body .header-main > .container,
    body .main-header > .container,
    body .studiare-header > .container {
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    body .studiare-navigation,
    body .main-navigation,
    body #masthead nav,
    body .site-header nav {
        margin-right: 18px !important;
    }

    body .studiare-navigation > ul.menu,
    body .studiare-navigation > div > ul.menu,
    body .studiare-navigation .menu > ul,
    body .studiare-navigation .menu-primary-menu-container > ul,
    body .main-navigation > ul,
    body .main-navigation > div > ul,
    body #masthead nav > ul,
    body #masthead nav > div > ul,
    body .site-header nav > ul,
    body .site-header nav > div > ul {
        gap: 15px !important;
    }

    body .studiare-navigation ul.menu > li > a,
    body .studiare-navigation .menu > ul > li > a,
    body .main-navigation > ul > li > a,
    body #masthead nav > ul > li > a,
    body .site-header nav > ul > li > a {
        font-size: 13px !important;
    }
}

/* Remove only the homepage gap below the navbar */
body.home #content,
body.home .site-content,
body.home .content-area,
body.home main.site-main,
body.home .entry-content {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home #masthead + *,
body.home .site-header + *,
body.home .header-main + *,
body.home .studiare-header + *,
body.home .header-wrapper + *,
body.home .site-header-wrapper + * {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.home .rev_slider_wrapper,
body.home .rev_slider,
body.home .home-slider,
body.home .main-slider,
body.home .hero-slider,
body.home .elementor-widget-slides,
body.home .elementor-widget-image-carousel {
    margin-top: 0 !important;
    padding-top: 0 !important;
}


/* =========================================================
   3. FOOTER — UNIFIED SINGLE BACKGROUND
========================================================= */

/* Apply one background color to the complete footer area */
footer,
#colophon,
.site-footer,
.studiare-footer,
.site-footer-wrapper,
.footer-wrapper,
.footer-wrap,
.footer,
.footer-area,
.footer-top,
.footer-main,
.footer-widgets,
.footer-bottom,
.copyright-bar,
.site-info,
.footer-copyright,
.elementor-location-footer,
.ltx-overlay-black-waves {
    width: 100% !important;
    max-width: none !important;

    background: var(--hp-navy) !important;
    background-color: var(--hp-navy) !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* Make structural footer containers transparent */
footer > div,
footer > section,

#colophon > div,
#colophon > section,
#colophon .container,
#colophon .container-fluid,
#colophon .row,

.site-footer > div,
.site-footer > section,
.site-footer .container,
.site-footer .container-fluid,
.site-footer .row,

.studiare-footer > div,
.studiare-footer .container,
.studiare-footer .container-fluid,

.footer-wrapper > div,
.footer-wrap > div,

.footer > div,
.footer .container,
.footer .container-fluid,
.footer .row,

.footer-area > div,
.footer-top > div,
.footer-main > div,

.footer-widgets > div,
.footer-widgets > section,
.footer-widgets .container,
.footer-widgets .container-fluid,

.footer-bottom > div,
.footer-bottom .container,
.footer-bottom .container-fluid,

.copyright-bar > div,
.copyright-bar .container,
.copyright-bar .container-fluid,

.elementor-location-footer > .elementor-element,
.elementor-location-footer .elementor-section,
.elementor-location-footer .elementor-container,
.elementor-location-footer .elementor-widget-wrap,
.elementor-location-footer .elementor-widget,
.elementor-location-footer .e-con,
.elementor-location-footer .e-con-inner {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* Remove footer overlays, waves and decorative layers */
footer::before,
footer::after,

#colophon::before,
#colophon::after,

.site-footer::before,
.site-footer::after,

.studiare-footer::before,
.studiare-footer::after,

.footer::before,
.footer::after,

.footer-wrapper::before,
.footer-wrapper::after,

.footer-wrap::before,
.footer-wrap::after,

.footer-area::before,
.footer-area::after,

.footer-top::before,
.footer-top::after,

.footer-main::before,
.footer-main::after,

.footer-widgets::before,
.footer-widgets::after,

.footer-bottom::before,
.footer-bottom::after,

.copyright-bar::before,
.copyright-bar::after,

.elementor-location-footer::before,
.elementor-location-footer::after,

.ltx-overlay-black-waves::before,
.ltx-overlay-black-waves::after,

.elementor-shape-top,
.elementor-shape-bottom,
.ltx-overlay-main-waves {
    content: none !important;
    display: none !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   4. FOOTER CONTENT WIDTH
========================================================= */

#colophon > .container,
.site-footer > .container,
.studiare-footer > .container,
.footer-widgets > .container,
.footer-main > .container,
.footer-bottom > .container,
.copyright-bar > .container {
    width: 100% !important;
    max-width: 1200px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding-right: 40px !important;
    padding-left: 40px !important;
}


/* =========================================================
   5. FOOTER COLUMN JUSTIFICATION
========================================================= */

@media (min-width: 769px) {

    #colophon .footer-widgets .row,
    #colophon > .container > .row,

    .site-footer .footer-widgets .row,
    .site-footer > .container > .row,

    .studiare-footer .footer-widgets .row,
    .footer-main .row,
    .footer-widgets .row {
        width: 100% !important;

        display: flex !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        direction: rtl !important;
        gap: 48px !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /* Distribute footer columns evenly */
    #colophon .footer-widgets .row > *,
    #colophon > .container > .row > *,

    .site-footer .footer-widgets .row > *,
    .site-footer > .container > .row > *,

    .studiare-footer .footer-widgets .row > *,
    .footer-main .row > *,
    .footer-widgets .row > * {
        flex: 1 1 0 !important;

        width: auto !important;
        max-width: none !important;

        margin: 0 !important;
        padding-right: 15px !important;
        padding-left: 15px !important;

        background: transparent !important;
        background-image: none !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }


    /* Keep footer widgets transparent */
    #colophon .widget,
    .site-footer .widget,
    .studiare-footer .widget,
    .footer-widgets .widget {
        height: auto !important;

        background: transparent !important;
        background-color: transparent !important;
        background-image: none !important;

        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
    }
}


/* =========================================================
   6. COPYRIGHT AREA
========================================================= */

.footer-bottom,
.footer-bottom .container,
.footer-bottom .container-fluid,

.copyright-bar,
.copyright-bar .container,
.copyright-bar .container-fluid,

.site-info,
.footer-copyright {
    background: var(--hp-navy) !important;
    background-color: var(--hp-navy) !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   7. MOBILE FOOTER LAYOUT
========================================================= */

@media (max-width: 768px) {

    #colophon > .container,
    .site-footer > .container,
    .studiare-footer > .container,
    .footer-widgets > .container,
    .footer-main > .container,
    .footer-bottom > .container,
    .copyright-bar > .container {
        padding-right: 20px !important;
        padding-left: 20px !important;
    }


    #colophon .footer-widgets .row,
    .site-footer .footer-widgets .row,
    .studiare-footer .footer-widgets .row,
    .footer-main .row,
    .footer-widgets .row {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;

        gap: 30px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    #colophon .footer-widgets .row > *,
    .site-footer .footer-widgets .row > *,
    .studiare-footer .footer-widgets .row > *,
    .footer-main .row > *,
    .footer-widgets .row > * {
        width: 100% !important;
        flex: 0 0 auto !important;

        margin: 0 !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
    }
}
/* =========================================================
   FINAL FOOTER FIX
   Paste this block at the very end of the CSS file
========================================================= */

:root {
    --hp-footer-final-bg: #051430;
}


/* =========================================================
   1. USE ONE COLOR FOR THE COMPLETE FOOTER
========================================================= */

body #colophon,
body footer.site-footer,
body .site-footer,
body .studiare-footer,
body .footer,
body .footer-wrapper,
body .footer-area,
body .footer-main,
body .footer-widgets,
body .footer-bottom,
body .copyright-bar,
body .site-info,
body .footer-copyright,

body #colophon > .container,
body #colophon > .container-fluid,

body #colophon .footer-widgets > .container,
body #colophon .footer-widgets > .container-fluid,
body #colophon .footer-widgets .container,
body #colophon .footer-widgets .container-fluid,

body .site-footer > .container,
body .site-footer > .container-fluid,
body .site-footer .footer-widgets > .container,
body .site-footer .footer-widgets > .container-fluid,

body #colophon .footer-bottom > .container,
body #colophon .footer-bottom > .container-fluid,
body #colophon .copyright-bar > .container,
body #colophon .copyright-bar > .container-fluid {
    background: var(--hp-footer-final-bg) !important;
    background-color: var(--hp-footer-final-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   2. REMOVE THE LIGHT INNER RECTANGLE
========================================================= */

body #colophon .footer-widgets .row,
body #colophon .footer-widgets .row > div,
body #colophon .footer-widgets .widget,
body #colophon .footer-widgets .widget-area,

body .site-footer .footer-widgets .row,
body .site-footer .footer-widgets .row > div,
body .site-footer .footer-widgets .widget,
body .site-footer .footer-widgets .widget-area {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   3. REMOVE FOOTER OVERLAYS, LINES AND DECORATIONS
========================================================= */

body #colophon::before,
body #colophon::after,

body .site-footer::before,
body .site-footer::after,

body .footer-widgets::before,
body .footer-widgets::after,

body .footer-bottom::before,
body .footer-bottom::after,

body .copyright-bar::before,
body .copyright-bar::after,

body .ltx-overlay-black-waves,
body .ltx-overlay-black-waves::before,
body .ltx-overlay-black-waves::after,

body .ltx-overlay-main-waves,
body .elementor-shape-top,
body .elementor-shape-bottom {
    content: none !important;
    display: none !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   4. ALIGN FOOTER WITH THE MAIN PAGE CONTENT
========================================================= */

body #colophon .footer-widgets > .container,
body #colophon .footer-widgets > .container-fluid,
body .site-footer .footer-widgets > .container,
body .site-footer .footer-widgets > .container-fluid {
    width: 100% !important;
    max-width: 1200px !important;

    margin-right: auto !important;
    margin-left: auto !important;

    padding: 38px 30px 32px !important;
}


/* =========================================================
   5. EXACT THREE-COLUMN FOOTER JUSTIFICATION
========================================================= */

@media (min-width: 769px) {

    body #colophon .footer-widgets > .container > .row,
    body #colophon .footer-widgets > .container-fluid > .row,

    body .site-footer .footer-widgets > .container > .row,
    body .site-footer .footer-widgets > .container-fluid > .row {
        width: 100% !important;

        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        align-items: start !important;

        direction: rtl !important;
        column-gap: 70px !important;
        row-gap: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    body #colophon .footer-widgets > .container > .row > div,
    body #colophon .footer-widgets > .container-fluid > .row > div,

    body .site-footer .footer-widgets > .container > .row > div,
    body .site-footer .footer-widgets > .container-fluid > .row > div {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;

        flex: none !important;
        float: none !important;

        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }


    /* Right column */
    body #colophon .footer-widgets > .container > .row > div:first-child,
    body .site-footer .footer-widgets > .container > .row > div:first-child {
        text-align: right !important;
    }


    /* Center column */
    body #colophon .footer-widgets > .container > .row > div:nth-child(2),
    body .site-footer .footer-widgets > .container > .row > div:nth-child(2) {
        text-align: center !important;
    }


    /* Left column */
    body #colophon .footer-widgets > .container > .row > div:last-child,
    body .site-footer .footer-widgets > .container > .row > div:last-child {
        text-align: center !important;
    }
}


/* =========================================================
   6. COPYRIGHT AREA — SAME FOOTER COLOR
========================================================= */

body #colophon .footer-bottom,
body #colophon .footer-bottom .container,
body #colophon .footer-bottom .container-fluid,

body #colophon .copyright-bar,
body #colophon .copyright-bar .container,
body #colophon .copyright-bar .container-fluid,

body #colophon .site-info,
body #colophon .footer-copyright {
    width: 100% !important;

    background: var(--hp-footer-final-bg) !important;
    background-color: var(--hp-footer-final-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;

    outline: 0 !important;
    box-shadow: none !important;
}


/* =========================================================
   7. MOBILE FOOTER
========================================================= */

@media (max-width: 768px) {

    body #colophon .footer-widgets > .container,
    body #colophon .footer-widgets > .container-fluid,
    body .site-footer .footer-widgets > .container,
    body .site-footer .footer-widgets > .container-fluid {
        padding: 30px 20px !important;
    }


    body #colophon .footer-widgets > .container > .row,
    body #colophon .footer-widgets > .container-fluid > .row,

    body .site-footer .footer-widgets > .container > .row,
    body .site-footer .footer-widgets > .container-fluid > .row {
        display: grid !important;
        grid-template-columns: 1fr !important;

        gap: 30px !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    body #colophon .footer-widgets > .container > .row > div,
    body #colophon .footer-widgets > .container-fluid > .row > div,

    body .site-footer .footer-widgets > .container > .row > div,
    body .site-footer .footer-widgets > .container-fluid > .row > div {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        text-align: center !important;
    }
}

/* =========================================================
   HAKIM PARSEH
   GLOBAL SHINY GOLD BUTTON SYSTEM
   Paste this block at the end of the CSS file
========================================================= */

:root {
    --hp-gold-shine-light: #FFF4C8;
    --hp-gold-shine: #F2C85B;
    --hp-gold-main: #D7A63D;
    --hp-gold-deep: #9A641F;
    --hp-gold-text: #071A33;

    --hp-gold-gradient: linear-gradient(
        135deg,
        #FFF4C8 0%,
        #F2C85B 22%,
        #D7A63D 52%,
        #F4D878 72%,
        #9A641F 100%
    );

    --hp-gold-gradient-hover: linear-gradient(
        135deg,
        #FFFFFF 0%,
        #FFE99B 20%,
        #E8B94E 48%,
        #FFD978 72%,
        #B87922 100%
    );
}


/* =========================================================
   1. ALL PRIMARY BUTTONS
========================================================= */

body .login-user,
body .site-header-inner span.digits-login-modal,

body .site-header .button,
body .site-header .elementor-button,
body .header-main .button,
body .header-main .elementor-button,

body .elementor-widget-button:not(.hp-outline-gold) .elementor-button,
body a.elementor-button:not(.hp-outline-gold),
body .wp-block-button:not(.hp-outline-gold) .wp-block-button__link,

body a.button:not(.hp-outline-gold),
body button.button:not(.hp-outline-gold),
body input[type="submit"]:not(.hp-outline-gold) {
    color: var(--hp-gold-text) !important;

    background: var(--hp-gold-gradient) !important;
    background-color: var(--hp-gold-main) !important;
    background-image: var(--hp-gold-gradient) !important;

    border: 1px solid rgba(255, 237, 173, 0.88) !important;
    border-radius: 9px !important;

    font-family: var(--hp-font) !important;
    font-weight: 850 !important;

    text-decoration: none !important;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28) !important;

    box-shadow:
        0 7px 20px rgba(215, 166, 61, 0.34),
        0 0 14px rgba(242, 200, 91, 0.20),
        inset 0 1px 0 rgba(255, 255, 255, 0.80),
        inset 0 -1px 0 rgba(112, 70, 15, 0.20) !important;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease !important;
}


/* Gold shine layer */

body .login-user,
body .site-header-inner span.digits-login-modal,
body .elementor-button,
body .wp-block-button__link,
body a.button,
body button.button {
    position: relative !important;
    overflow: hidden !important;
}


/* =========================================================
   2. PRIMARY BUTTON HOVER
========================================================= */

body .login-user:hover,
body .site-header-inner span.digits-login-modal:hover,

body .site-header .button:hover,
body .site-header .elementor-button:hover,
body .header-main .button:hover,
body .header-main .elementor-button:hover,

body .elementor-widget-button:not(.hp-outline-gold) .elementor-button:hover,
body a.elementor-button:not(.hp-outline-gold):hover,
body .wp-block-button:not(.hp-outline-gold) .wp-block-button__link:hover,

body a.button:not(.hp-outline-gold):hover,
body button.button:not(.hp-outline-gold):hover,
body input[type="submit"]:not(.hp-outline-gold):hover {
    color: var(--hp-gold-text) !important;

    background: var(--hp-gold-gradient-hover) !important;
    background-image: var(--hp-gold-gradient-hover) !important;

    border-color: #FFF2B5 !important;

    transform: translateY(-2px) !important;

    filter: brightness(1.05) saturate(1.08) !important;

    box-shadow:
        0 10px 25px rgba(215, 166, 61, 0.42),
        0 0 20px rgba(242, 200, 91, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.90),
        inset 0 -1px 0 rgba(112, 70, 15, 0.15) !important;
}


/* =========================================================
   3. GOLD OUTLINE BUTTON
   Add the class hp-outline-gold to the consultation widget
========================================================= */

body .hp-outline-gold .elementor-button,
body .elementor-button.hp-outline-gold,
body a.hp-outline-gold {
    color: #F4D878 !important;

    background: rgba(7, 26, 51, 0.28) !important;
    background-color: rgba(7, 26, 51, 0.28) !important;
    background-image: none !important;

    border: 1.5px solid #E8B94E !important;
    border-radius: 9px !important;

    font-weight: 850 !important;

    text-shadow:
        0 0 8px rgba(242, 200, 91, 0.25) !important;

    box-shadow:
        0 0 12px rgba(215, 166, 61, 0.22),
        inset 0 0 10px rgba(242, 200, 91, 0.06) !important;
}


/* =========================================================
   4. GOLD OUTLINE BUTTON HOVER
========================================================= */

body .hp-outline-gold .elementor-button:hover,
body .elementor-button.hp-outline-gold:hover,
body a.hp-outline-gold:hover {
    color: var(--hp-gold-text) !important;

    background: var(--hp-gold-gradient-hover) !important;
    background-image: var(--hp-gold-gradient-hover) !important;

    border-color: #FFF2B5 !important;

    transform: translateY(-2px) !important;

    box-shadow:
        0 10px 25px rgba(215, 166, 61, 0.38),
        0 0 20px rgba(242, 200, 91, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}


/* =========================================================
   5. BUTTON ICON COLORS
========================================================= */

body .login-user i,
body .login-user svg,

body .elementor-button:not(.hp-outline-gold) i,
body .elementor-button:not(.hp-outline-gold) svg,

body .button:not(.hp-outline-gold) i,
body .button:not(.hp-outline-gold) svg {
    color: var(--hp-gold-text) !important;
    fill: var(--hp-gold-text) !important;
}


body .hp-outline-gold .elementor-button i,
body .hp-outline-gold .elementor-button svg,
body .elementor-button.hp-outline-gold i,
body .elementor-button.hp-outline-gold svg {
    color: #F4D878 !important;
    fill: #F4D878 !important;
}


/* =========================================================
   6. REMOVE ELEMENTOR BUTTON COLOR CONFLICTS
========================================================= */

body .elementor-button-success,
body .elementor-button-info,
body .elementor-button-warning,
body .elementor-button-danger {
    color: var(--hp-gold-text) !important;
    background: var(--hp-gold-gradient) !important;
    background-image: var(--hp-gold-gradient) !important;
    border-color: rgba(255, 237, 173, 0.88) !important;
}
/* =========================================================
   ABOUT PAGE HERO
========================================================= */

body .hp-about-hero {
  position: relative !important;
  width: 100vw !important;
  max-width: none !important;
  min-height: 460px !important;
  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;
  padding: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

body .hp-about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(3, 13, 36, 0) 0%,
    rgba(3, 13, 36, 0.08) 42%,
    rgba(3, 13, 36, 0.32) 62%,
    rgba(3, 13, 36, 0.74) 100%
  );
}

body .hp-about-hero-logo {
  position: absolute !important;
  top: 28px !important;
  right: clamp(30px, 5vw, 90px) !important;
  width: 205px !important;
  max-width: 205px !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 3 !important;
}

body .hp-about-hero-logo .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

body .hp-about-hero-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 0 !important;
}

body .hp-about-hero-content {
  position: relative !important;
  z-index: 2 !important;
  width: 48% !important;
  max-width: 760px !important;
  min-height: 460px !important;
  margin-right: 0 !important;
  margin-left: auto !important;
  padding: 125px clamp(42px, 5vw, 90px) 48px 34px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  text-align: right !important;
}

body .hp-about-hero-title,
body .hp-about-hero-subtitle,
body .hp-about-hero-text {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  text-align: right !important;
}

body .hp-about-hero-title .elementor-heading-title {
  margin: 0 !important;
  color: #e9b953 !important;
  font-size: clamp(38px, 4vw, 62px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  text-shadow: none !important;
}

body .hp-about-hero-title::after {
  content: "";
  display: block;
  width: 76px;
  height: 3px;
  margin: 18px 0 22px auto;
  border-radius: 20px;
  background: linear-gradient(
    90deg,
    #b47828 0%,
    #e9b953 55%,
    #f6d98b 100%
  );
}

body .hp-about-hero-subtitle .elementor-heading-title {
  margin: 0 0 18px !important;
  color: #e9b953 !important;
  font-size: clamp(18px, 1.6vw, 25px) !important;
  font-weight: 650 !important;
  line-height: 1.8 !important;
}

body .hp-about-hero-text,
body .hp-about-hero-text p {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(15px, 1.25vw, 19px) !important;
  font-weight: 400 !important;
  line-height: 2.05 !important;
  text-align: justify !important;
  text-align-last: right !important;
  text-shadow: none !important;
}

body .site-content:has(.hp-about-hero),
body #content:has(.hp-about-hero),
body .content-area:has(.hp-about-hero),
body .site-main:has(.hp-about-hero) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 1024px) {
  body .hp-about-hero {
    min-height: 430px !important;
    background-position: 55% center !important;
  }

  body .hp-about-hero-logo {
    top: 24px !important;
    right: 34px !important;
    width: 170px !important;
    max-width: 170px !important;
  }

  body .hp-about-hero-content {
    width: 58% !important;
    min-height: 430px !important;
    padding: 105px 36px 42px 28px !important;
  }
}

@media (max-width: 767px) {
  body .hp-about-hero {
    min-height: 520px !important;
    background-position: 68% center !important;
  }

  body .hp-about-hero::before {
    background: rgba(3, 13, 36, 0.80) !important;
  }

  body .hp-about-hero-logo {
    top: 22px !important;
    right: 22px !important;
    width: 145px !important;
    max-width: 145px !important;
  }

  body .hp-about-hero-content {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 520px !important;
    padding: 115px 22px 42px !important;
  }

  body .hp-about-hero-title .elementor-heading-title {
    font-size: 34px !important;
  }

  body .hp-about-hero-subtitle .elementor-heading-title {
    font-size: 18px !important;
  }

  body .hp-about-hero-text,
  body .hp-about-hero-text p {
    font-size: 15px !important;
    line-height: 2 !important;
    text-align: right !important;
  }
}
/* =========================================================
   HAKIM PARSEH — ABOUT PAGE HERO — FINAL VERSION
========================================================= */


/* ---------------------------------------------------------
   1. REMOVE THE BLUE SEARCH BAR ABOVE THE NAVBAR
   Applies only to pages containing the About Hero section
--------------------------------------------------------- */

body:has(.hp-about-hero) .top-bar,
body:has(.hp-about-hero) #top-bar,
body:has(.hp-about-hero) .top-header,
body:has(.hp-about-hero) .header-top,
body:has(.hp-about-hero) .site-header-top,
body:has(.hp-about-hero) .topbar,
body:has(.hp-about-hero) .header-search-bar,
body:has(.hp-about-hero) .search-bar,
body:has(.hp-about-hero) .header-search {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}


/* ---------------------------------------------------------
   2. REMOVE WHITE SPACE BETWEEN NAVBAR AND HERO
--------------------------------------------------------- */

body:has(.hp-about-hero) .site-content,
body:has(.hp-about-hero) #content,
body:has(.hp-about-hero) .content-area,
body:has(.hp-about-hero) .site-main,
body:has(.hp-about-hero) .page-content,
body:has(.hp-about-hero) .entry-content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ---------------------------------------------------------
   3. MAIN HERO SECTION
--------------------------------------------------------- */

.hp-about-hero {
  position: relative !important;

  width: 100vw !important;
  max-width: none !important;

  height: 300px !important;
  min-height: 300px !important;

  margin-top: 0 !important;
  margin-right: calc(50% - 50vw) !important;
  margin-bottom: 0 !important;
  margin-left: calc(50% - 50vw) !important;

  padding: 0 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}


/* Support both legacy Elementor sections and modern containers */

.hp-about-hero > .elementor-container,
.hp-about-hero > .e-con-inner {
  position: relative !important;

  width: 100% !important;
  max-width: none !important;

  height: 300px !important;
  min-height: 300px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* Remove spacing from Elementor columns and wrappers */

.hp-about-hero .elementor-column,
.hp-about-hero .elementor-column-wrap,
.hp-about-hero .elementor-widget-wrap {
  height: 100% !important;
  min-height: 300px !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   4. EDITABLE TEXT CONTAINER
   The heading and description must be placed inside it
--------------------------------------------------------- */

.hp-about-content {
  position: absolute !important;

  /* Lower right values move the content closer to the right edge */
  right: clamp(26px, 3.6vw, 58px) !important;
  top: 60% !important;

  width: 40% !important;
  max-width: 620px !important;

  transform: translateY(-50%) !important;

  z-index: 5 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: center !important;

  gap: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  direction: rtl !important;
  text-align: right !important;
}


/* ---------------------------------------------------------
   5. LOGO — TOP RIGHT
--------------------------------------------------------- */

.hp-about-logo {
  position: absolute !important;

  top: 16px !important;
  right: clamp(26px, 3.6vw, 58px) !important;

  width: 195px !important;
  max-width: 195px !important;

  margin: 0 !important;
  padding: 0 !important;

  z-index: 7 !important;
}

.hp-about-logo .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

.hp-about-logo img {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;

  margin: 0 !important;
  padding: 0 !important;
}


/* ---------------------------------------------------------
   6. TITLE
--------------------------------------------------------- */

.hp-about-title {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  left: auto !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  direction: rtl !important;
  text-align: right !important;
}

.hp-about-title .elementor-heading-title {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(30px, 2.5vw, 39px) !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow: none !important;
}


/* Compact gold divider below the title */

.hp-about-title::after {
  content: "";

  display: block;

  width: 76px;
  height: 2px;

  margin-top: 5px;
  margin-right: 0;
  margin-bottom: 8px;
  margin-left: auto;

  border-radius: 20px;

  background: linear-gradient(
    90deg,
    #b47828 0%,
    #d3a34f 55%,
    #e9b953 100%
  );
}


/* ---------------------------------------------------------
   7. DESCRIPTION TEXT
--------------------------------------------------------- */

.hp-about-text {
  position: relative !important;

  top: auto !important;
  right: auto !important;
  left: auto !important;

  width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  transform: none !important;

  direction: rtl !important;
  text-align: right !important;
}

.hp-about-text .elementor-widget-container,
.hp-about-text p {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-size: clamp(14px, 1.02vw, 16px) !important;
  font-weight: 400 !important;
  line-height: 1.95 !important;

  direction: rtl !important;
  text-align: right !important;

  text-shadow: none !important;
}


/* ---------------------------------------------------------
   8. TABLET
--------------------------------------------------------- */

@media (max-width: 1024px) {

  .hp-about-hero,
  .hp-about-hero > .elementor-container,
  .hp-about-hero > .e-con-inner,
  .hp-about-hero .elementor-column-wrap,
  .hp-about-hero .elementor-widget-wrap {
    height: 285px !important;
    min-height: 285px !important;
  }

  .hp-about-hero {
    background-position: 48% center !important;
  }

  .hp-about-content {
    right: 30px !important;
    top: 61% !important;

    width: 48% !important;
    max-width: 520px !important;
  }

  .hp-about-logo {
    top: 15px !important;
    right: 30px !important;

    width: 165px !important;
    max-width: 165px !important;
  }

  .hp-about-title .elementor-heading-title {
    font-size: 30px !important;
  }

  .hp-about-text,
  .hp-about-text p {
    font-size: 14px !important;
    line-height: 1.85 !important;
  }
}


/* ---------------------------------------------------------
   9. MOBILE
--------------------------------------------------------- */

@media (max-width: 767px) {

  .hp-about-hero,
  .hp-about-hero > .elementor-container,
  .hp-about-hero > .e-con-inner,
  .hp-about-hero .elementor-column-wrap,
  .hp-about-hero .elementor-widget-wrap {
    height: 390px !important;
    min-height: 390px !important;
  }

  .hp-about-hero {
    background-position: 32% center !important;
  }

  /* Navy overlay for improved mobile text readability */
  .hp-about-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    background: rgba(3, 13, 36, 0.76);

    pointer-events: none;
  }

  .hp-about-logo {
    top: 18px !important;
    right: 20px !important;

    width: 145px !important;
    max-width: 145px !important;
  }

  .hp-about-content {
    top: 60% !important;

    right: 20px !important;
    left: 20px !important;

    width: auto !important;
    max-width: none !important;
  }

  .hp-about-title .elementor-heading-title {
    font-size: 28px !important;
  }

  .hp-about-title::after {
    width: 60px;
    margin-top: 5px;
    margin-bottom: 8px;
  }

  .hp-about-text,
  .hp-about-text p {
    font-size: 14px !important;
    line-height: 1.9 !important;
  }
}
/* About hero height fix */

.hp-about-hero {
  height: 250px !important;
  min-height: 250px !important;
}

.hp-about-hero > .elementor-container,
.hp-about-hero > .e-con-inner,
.hp-about-hero .elementor-column,
.hp-about-hero .elementor-column-wrap,
.hp-about-hero .elementor-widget-wrap {
  height: 250px !important;
  min-height: 250px !important;
}

.hp-about-content {
  top: 52% !important;
  transform: translateY(-50%) !important;
}

@media (max-width: 1024px) {
  .hp-about-hero,
  .hp-about-hero > .elementor-container,
  .hp-about-hero > .e-con-inner,
  .hp-about-hero .elementor-column,
  .hp-about-hero .elementor-column-wrap,
  .hp-about-hero .elementor-widget-wrap {
    height: 220px !important;
    min-height: 220px !important;
  }

  .hp-about-content {
    top: 52% !important;
  }
}

@media (max-width: 767px) {
  .hp-about-hero,
  .hp-about-hero > .elementor-container,
  .hp-about-hero > .e-con-inner,
  .hp-about-hero .elementor-column,
  .hp-about-hero .elementor-column-wrap,
  .hp-about-hero .elementor-widget-wrap {
    height: 260px !important;
    min-height: 260px !important;
  }

  .hp-about-content {
    top: 55% !important;
  }
}