.elementor-1041 .elementor-element.elementor-element-7aefb93{--display:flex;--min-height:0px;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;}.elementor-1041 .elementor-element.elementor-element-70ac4d2{margin:-19px 77px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-1041 .elementor-element.elementor-element-70ac4d2 img{width:157px;}.elementor-1041 .elementor-element.elementor-element-f30c88b{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;border-style:solid;--border-style:solid;border-width:1px 0px 0px 0px;--border-top-width:1px;--border-right-width:0px;--border-bottom-width:0px;--border-left-width:0px;border-color:#D0D0D0;--border-color:#D0D0D0;--margin-top:-26px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:05px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-1041 .elementor-element.elementor-element-f30c88b:not(.elementor-motion-effects-element-type-background), .elementor-1041 .elementor-element.elementor-element-f30c88b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-1041 .elementor-element.elementor-element-a9c0df1 > .elementor-widget-container{margin:0px 52px 0px 0px;padding:0px 25px 0px 109px;}.elementor-1041 .elementor-element.elementor-element-a9c0df1 .elementor-menu-toggle{margin:0 auto;}.elementor-1041 .elementor-element.elementor-element-a9c0df1 .elementor-nav-menu .elementor-item{font-family:"salma", Sans-serif;font-size:19px;font-weight:200;}.elementor-1041 .elementor-element.elementor-element-a9c0df1 .elementor-nav-menu--main .elementor-item{color:#253C49;fill:#253C49;}.elementor-1041 .elementor-element.elementor-element-a9c0df1{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );}.elementor-1041 .elementor-element.elementor-element-a9c0df1 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:10px;}.elementor-1041 .elementor-element.elementor-element-5ca46d0 .elementor-button{background-color:#003D5200;font-family:"sakkal", Sans-serif;font-size:21px;font-weight:300;fill:#FFFFFF;color:#FFFFFF;border-style:none;border-radius:0px 0px 0px 0px;padding:15px 21px 15px 21px;}.elementor-1041 .elementor-element.elementor-element-5ca46d0{padding:0px 0px 0px 0px;}.elementor-1041 .elementor-element.elementor-element-72463bd .cpel-switcher__lang a{font-family:"sakkal", Sans-serif;font-size:17px;font-weight:600;color:#003D52;}.elementor-1041 .elementor-element.elementor-element-72463bd .cpel-switcher__icon{color:#003D52;}.elementor-1041 .elementor-element.elementor-element-72463bd .cpel-switcher__nav{--cpel-switcher-space:15px;}.elementor-1041 .elementor-element.elementor-element-72463bd .cpel-switcher__name{padding-right:10px;}.elementor-1041 .elementor-element.elementor-element-72463bd .cpel-switcher__code{padding-right:10px;}.elementor-1041 .elementor-element.elementor-element-23659f1{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-1041 .elementor-element.elementor-element-cb63d67{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-start;--align-items:flex-start;}.elementor-1041 .elementor-element.elementor-element-aeb8ba8{padding:0px 0px 15px 089px;text-align:left;}.elementor-1041 .elementor-element.elementor-element-aeb8ba8 img{width:107px;opacity:1;filter:brightness( 100% ) contrast( 139% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-1041 .elementor-element.elementor-element-b24d23a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-end;}.elementor-1041 .elementor-element.elementor-element-3f1b944{width:auto;max-width:auto;--e-nav-menu-divider-content:"";--e-nav-menu-divider-style:solid;--e-nav-menu-divider-width:1px;--e-nav-menu-divider-color:#BBBBBB;--e-nav-menu-horizontal-menu-item-margin:calc( 71px / 2 );}.elementor-1041 .elementor-element.elementor-element-3f1b944 > .elementor-widget-container{padding:0px 145px 0px 0px;}.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu .elementor-item{font-family:"Sohnee", Sans-serif;font-size:15px;font-weight:300;text-decoration:none;}.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main .elementor-item{color:#003D52;fill:#003D52;}.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#02010100;}.elementor-1041 .elementor-element.elementor-element-3f1b944 .e--pointer-framed .elementor-item:before,
					.elementor-1041 .elementor-element.elementor-element-3f1b944 .e--pointer-framed .elementor-item:after{border-color:#02010100;}.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:71px;}.elementor-1041 .elementor-element.elementor-element-a3652a2{--display:flex;}@media(max-width:767px){.elementor-1041 .elementor-element.elementor-element-aeb8ba8 img{width:180px;}.elementor-1041 .elementor-element.elementor-element-c056c1d{width:100%;max-width:100%;}}@media(min-width:768px){.elementor-1041 .elementor-element.elementor-element-cb63d67{--width:50%;}.elementor-1041 .elementor-element.elementor-element-b24d23a{--width:50%;}}/* Start custom CSS for nav-menu, class: .elementor-element-a9c0df1 *//*
This code provides an underline animation that stretches
to the width of the text and maintains proper menu item spacing.
Apply the 'bottom-menu-animation' class to your Elementor Nav Menu widget.
*/

/* --- Underline Animation on the 'a' element --- */
.elementor-1041 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu a {
    /* Critical: Set horizontal padding to 0 so the underline matches the text width */
    padding-left: 0 !important;
    padding-right: 0 !important;

    /* Add space below the text for the underline */
    padding-bottom: 5px !important;

    /* Basic text styling */
    text-decoration: none !important; /* Remove default underline */

    /* Underline animation properties */
    background: linear-gradient(to right, #253c49, #253c49); /* Underline color */
    background-repeat: no-repeat;
    background-position: 0 100%; /* Position the line at the bottom of the text */
    background-size: 0% 1px; /* Start with 0 width, 1px height */
    transition: background-size 0.5s ease-out; /* Smooth animation */
}

/* --- Expand underline on hover --- */
.elementor-1041 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu a:hover {
    background-size: 100% 1px; /* Expand to 100% width of the 'a' element (which is now text-width) */
}

/* --- Adjust spacing between menu items using margin on the list item (li) --- */
/*
   IMPORTANT: You will need to adjust the 'margin-right' value below
   to get your desired spacing between menu items.
   Elementor often uses padding on the 'a' tags for spacing by default.
   Since we removed that padding above, we need to add spacing here.
*/
.elementor-1041 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu li {
    margin-right: 25px; /* Adjust this value as needed for horizontal spacing */
    /* If your menu is vertical, you might use margin-bottom instead: */
    /* margin-bottom: 10px; */
    /* Ensure no default bullet points */
    list-style: none;
}

/* Optional: Remove margin from the last item to prevent extra space at the end */
.elementor-1041 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu li:last-child {
    margin-right: 0;
}

/* Optional: If the entire UL itself has default padding from Elementor, remove it */
.elementor-1041 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu {
    padding-left: 0;
}
.lang-item-en {     margin-left: 90px;   /* space to the left */     margin-right: 90px;  /* space to the right */ }/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5ca46d0 *//* --- BUTTON ANIMATION SETUP (REVERSED DIRECTION) --- */
/* Target the button link itself */
.elementor-1041 .elementor-element.elementor-element-5ca46d0 .elementor-button {
    /* 1. THE REVERSED GRADIENT */
    /* Create a background where the TOP is dark blue and the BOTTOM is transparent */
    background-image: linear-gradient(to bottom, #253c49 50%, transparent 50%);
    background-size: 100% 200%;
    
    /* Initially, show the TOP half (the dark blue part) */
    background-position: left top;

    /* 2. THE TEXT AND BORDER (MATCHES ORIGINAL) */
    /* Set the initial text color to white */
    color: #ffffff !important;
    border: 1px solid #253c49; /* Add the border */

    /* 3. THE ANIMATION TIMING (MATCHES ORIGINAL) */
    transition: background-position 0.4s ease-out, color 0.4s ease-out;
}


/* --- HOVER STATE (REVERSED DIRECTION) --- */
.elementor-1041 .elementor-element.elementor-element-5ca46d0 .elementor-button:hover {
    /* 1. On hover, slide the background UP to reveal the BOTTOM half (the transparent part) */
    background-position: left bottom;

    /* 2. Change the text color to dark blue */
    color: #253c49 !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-f30c88b *//* Final Sticky Header CSS */
.elementor-1041 .elementor-element.elementor-element-f30c88b.elementor-sticky--effects {
    /* This is the new line that fixes the gap */
    top: 0 !important;
    
    /* These were your original rules */
    background-color: #FFFFFF !important;
    min-height: 4.375rem !important;

    /* Recommended additions for robustness */
    width: 100%; /* Ensures it doesn't shrink horizontally */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Optional: Adds a subtle shadow */
    z-index: 999 !important; /* Ensures it's above all page content */
    
    /* Your original transition */
    transition: min-height 0.2s ease-in-out !important;
}/* End custom CSS */
/* Start custom CSS for nav-menu, class: .elementor-element-3f1b944 *//* --- 1. THE UNDERLINE ANIMATION (No changes) --- */
.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu a {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 5px !important;
    text-decoration: none !important;
    background: linear-gradient(to right, #253c49, #253c49);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 0% 1px;
    transition: background-size 0.5s ease-out;
}
.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu a:hover {
    background-size: 100% 1px;
}
/* --- 2. THE ISOLATED SEARCH ICON --- */
/* Make ONLY the Search link a positioning container */
.elementor-1041 .elementor-element.elementor-element-3f1b944 .menu-item-search > a {
    position: relative;
    padding-right: 25px !important;
}

/* Create the icon and position it OUTSIDE the link's flow */
.elementor-1041 .elementor-element.elementor-element-3f1b944 .menu-item-search > a::after {
    content: '';
    position: absolute;

    /* POSITIONING LOGIC: */
    left: 70%;            /* Start at the right edge of the text */
    margin-left: 0.5em;    /* Add a small gap */
    top: 60%;              /* Vertically center it perfectly */
    transform: translateY(-50%);

    /* ICON STYLES: */
    width: 15px;
    height: 15px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23253c49'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z' /%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1 !important;
}
/*
This code targets the built-in Elementor menu divider
that you have already enabled.
*/
.elementor-1041 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu > li:not(:last-child)::after {
    /* 1. Remove the original vertical line */
    border: none !important;
    
    /* 2. Add the horizontal dash as text content */
    content: "—";
    color: #d0d0d0; /* Light grey color */

    /* 3. Reset Elementor's sizing to align the dash correctly */
    height: auto;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c056c1d *//* --- 1. Font Declarations (Salma) --- */
@font-face { 
    font-family: 'SalmaMenu'; 
    src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى.woff2') format('woff2'); 
    font-weight: normal;
}

/* --- 2. Header Container --- */
.ar-header-mobile {
    display: flex;
    justify-content: space-between; /* Pushes Lang to Right, Menu to Left */
    align-items: center;
    padding: 10px 25px; /* Adjusted padding */
    background: #fff;
    direction: rtl;
    position: relative;
    z-index: 10001;
    border-bottom: 1px solid #f2f2f2;
    height: 70px; /* Fixed height for better centering */
}

/* Absolute Center Logo */
.ar-header-mobile__logo {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

.ar-logo-img { 
    width: 130px; /* Slightly smaller for better proportion */
    height: auto; 
    display: block; 
}

/* --- 3. New Language Toggle (Right Side) --- */
.ar-header-lang {
    font-family: 'nfhsohne', sans-serif; /* Or use system font for EN */
    font-size: 13px;
    font-weight: 300;
    color: #253c49;
    text-decoration: none;
    border: 1px solid #e0e0e0;
    padding: 4px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
    line-height: 1;
}
.ar-header-lang:hover {
    background-color: #253c49;
    color: #fff;
    border-color: #253c49;
}

/* --- 4. Toggle Button (Sleeker) --- */
.ar-header-mobile__toggle {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
}

/* Made box smaller (was 25x20) */
.ar-hamburger-box { width: 22px; height: 16px; position: relative; }

/* Made lines thinner (1.5px) and spacing tighter */
.ar-hamburger-inner, .ar-hamburger-inner::before, .ar-hamburger-inner::after {
    width: 22px; height: 2px;
    background-color: #253c49;
    position: absolute;
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
}
.ar-hamburger-inner { top: 50%; transform: translateY(-50%); }
.ar-hamburger-inner::before { content: ""; top: -6px; left: 0; } /* Closer spacing */
.ar-hamburger-inner::after { content: ""; bottom: -6px; left: 0; } /* Closer spacing */

/* --- 5. Toggle "X" Animation --- */
.ar-header-mobile__toggle.is-active .ar-hamburger-inner { background-color: transparent; }
.ar-header-mobile__toggle.is-active .ar-hamburger-inner::before { transform: rotate(45deg); top: 0; }
.ar-header-mobile__toggle.is-active .ar-hamburger-inner::after { transform: rotate(-45deg); bottom: 0; }

/* --- 6. Navigation Panel --- */
.ar-nav-panel {
    position: fixed;
    top: 0;
    left: -100%; 
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 10000;
    transition: left 0.4s cubic-bezier(0.77, 0, 0.175, 1);
    padding: 100px 40px;
    display: flex;
    flex-direction: column;
    direction: rtl;
    text-align: right;
}

.ar-nav-panel.is-active { left: 0; }

/* --- 7. Typography (SALMA Font) --- */
.ar-nav-panel__list { list-style: none; padding: 0; margin: 0; }
.ar-nav-panel__list li { margin-bottom: 22px; }
.ar-nav-panel__list a {
    font-family: 'SalmaMenu', serif !important; 
    font-size: 24px;
    color: #253c49;
    text-decoration: none;
    display: block;
}

.ar-nav-divider { border: 0; border-top: 1px solid #eee; margin: 25px 0; }

.ar-lang-link { font-size: 20px !important; color: #105577 !important; }

/* --- 8. Contact Button --- */
.ar-contact-us-btn {
    display: inline-block;
    background: #253c49;
    color: #fff !important;
    padding: 14px 35px;
    text-decoration: none;
    font-family: 'SalmaMenu', serif !important;
    font-size: 18px;
    margin-top: 20px;
    text-align: center;
}

/* Fix Body Scroll when menu is open */
body.ar-nav-is-active { overflow: hidden; }

/* Hide for Desktop */
@media (min-width: 1025px) {
    .ar-header-mobile, .ar-nav-panel { display: none; }
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى.woff2') format('woff2');
}
@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: 100;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى-لايت-مدفوع.woff2') format('woff2');
}
@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى-عربي-لايت.woff2') format('woff2');
}
@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى-بولد-مدفوع.woff2') format('woff2');
}
@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى-بلاك-مدفوع.woff2') format('woff2');
}
@font-face {
	font-family: 'salma';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/خط-سلمى-1.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'sakkal';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/fonnts.com-majallab.woff2') format('woff2');
}
@font-face {
	font-family: 'sakkal';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/12/fonnts.com-majalla.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Sohnee';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/08/TestSohne-Buch.woff2') format('woff2');
}
@font-face {
	font-family: 'Sohnee';
	font-style: normal;
	font-weight: 400;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/08/TestSohne-Kraftig.woff2') format('woff2');
}
@font-face {
	font-family: 'Sohnee';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://nfh.ae/wp-content/uploads/2025/08/TestSohne-Leicht.woff2') format('woff2');
}
/* End Custom Fonts CSS */