.elementor-13 .elementor-element.elementor-element-d2ad210{--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-13 .elementor-element.elementor-element-317238c{--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-13 .elementor-element.elementor-element-e4dac63{padding:0px 0px 15px 089px;text-align:left;}.elementor-13 .elementor-element.elementor-element-e4dac63 img{width:107px;opacity:1;filter:brightness( 100% ) contrast( 139% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-13 .elementor-element.elementor-element-06fa41c{--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-13 .elementor-element.elementor-element-a4d6289{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-13 .elementor-element.elementor-element-a4d6289 > .elementor-widget-container{padding:0px 145px 0px 0px;}.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-menu-toggle{margin:0 auto;}.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu .elementor-item{font-family:"Sohnee", Sans-serif;font-size:15px;font-weight:300;text-decoration:none;}.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu--main .elementor-item{color:#003D52;fill:#003D52;}.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#02010100;}.elementor-13 .elementor-element.elementor-element-a4d6289 .e--pointer-framed .elementor-item:before,
					.elementor-13 .elementor-element.elementor-element-a4d6289 .e--pointer-framed .elementor-item:after{border-color:#02010100;}.elementor-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu--main:not(.elementor-nav-menu--layout-horizontal) .elementor-nav-menu > li:not(:last-child){margin-bottom:71px;}.elementor-13 .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;--padding-top:05px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-13 .elementor-element.elementor-element-f30c88b:not(.elementor-motion-effects-element-type-background), .elementor-13 .elementor-element.elementor-element-f30c88b > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-13 .elementor-element.elementor-element-a9c0df1 > .elementor-widget-container{padding:0px 25px 0px 109px;}.elementor-13 .elementor-element.elementor-element-a9c0df1 .elementor-menu-toggle{margin:0 auto;}.elementor-13 .elementor-element.elementor-element-a9c0df1 .elementor-nav-menu .elementor-item{font-family:"Sohnee", Sans-serif;font-size:17px;font-weight:300;}.elementor-13 .elementor-element.elementor-element-a9c0df1 .elementor-nav-menu--main .elementor-item{color:#253C49;fill:#253C49;}.elementor-13 .elementor-element.elementor-element-a9c0df1{--e-nav-menu-horizontal-menu-item-margin:calc( 10px / 2 );}.elementor-13 .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-13 .elementor-element.elementor-element-5ca46d0 .elementor-button{background-color:#003D5200;font-family:"Sohnee", Sans-serif;font-weight:300;fill:#FFFFFF;color:#FFFFFF;border-style:none;border-radius:0px 0px 0px 0px;padding:15px 21px 15px 21px;}.elementor-13 .elementor-element.elementor-element-5ca46d0{padding:0px 0px 0px 210px;}.elementor-13 .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-13 .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-13 .elementor-element.elementor-element-aeb8ba8{padding:0px 0px 15px 089px;text-align:left;}.elementor-13 .elementor-element.elementor-element-aeb8ba8 img{width:107px;opacity:1;filter:brightness( 100% ) contrast( 139% ) saturate( 100% ) blur( 0px ) hue-rotate( 0deg );}.elementor-13 .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-13 .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-13 .elementor-element.elementor-element-3f1b944 > .elementor-widget-container{padding:0px 145px 0px 0px;}.elementor-13 .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-13 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main .elementor-item{color:#003D52;fill:#003D52;}.elementor-13 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:before,
					.elementor-13 .elementor-element.elementor-element-3f1b944 .elementor-nav-menu--main:not(.e--pointer-framed) .elementor-item:after{background-color:#02010100;}.elementor-13 .elementor-element.elementor-element-3f1b944 .e--pointer-framed .elementor-item:before,
					.elementor-13 .elementor-element.elementor-element-3f1b944 .e--pointer-framed .elementor-item:after{border-color:#02010100;}.elementor-13 .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-13 .elementor-element.elementor-element-a3652a2{--display:flex;}@media(max-width:767px){.elementor-13 .elementor-element.elementor-element-e4dac63 img{width:180px;}.elementor-13 .elementor-element.elementor-element-aeb8ba8 img{width:180px;}}@media(min-width:768px){.elementor-13 .elementor-element.elementor-element-317238c{--width:50%;}.elementor-13 .elementor-element.elementor-element-06fa41c{--width:50%;}.elementor-13 .elementor-element.elementor-element-cb63d67{--width:50%;}.elementor-13 .elementor-element.elementor-element-b24d23a{--width:50%;}}/* Start custom CSS for nav-menu, class: .elementor-element-a4d6289 *//* --- 1. THE UNDERLINE ANIMATION (No changes) --- */
.elementor-13 .elementor-element.elementor-element-a4d6289 .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-13 .elementor-element.elementor-element-a4d6289 .elementor-nav-menu a:hover {
    background-size: 100% 1px;
}
/* --- 2. THE ISOLATED SEARCH ICON --- */
/* Make ONLY the Search link a positioning container */
.elementor-13 .elementor-element.elementor-element-a4d6289 .menu-item-search > a {
    position: relative;
    padding-right: 25px !important;
}

/* Create the icon and position it OUTSIDE the link's flow */
.elementor-13 .elementor-element.elementor-element-a4d6289 .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-13 .elementor-element.elementor-element-a4d6289 .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 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-13 .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-13 .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-13 .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-13 .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-13 .elementor-element.elementor-element-a9c0df1.bottom-menu-animation .elementor-nav-menu {
    padding-left: 0;
}/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-5ca46d0 *//* --- BUTTON ANIMATION SETUP (REVERSED DIRECTION) --- */
/* Target the button link itself */
.elementor-13 .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-13 .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-13 .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-13 .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-13 .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-13 .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-13 .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-13 .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 *//* ==========================================================================
   New NFH Mobile Header - Sticky, Full-Width
   ========================================================================== */

/* --- Import your font variable (if not already global) --- */
:root {
  --font-family: 'Sohnee', Arial, sans-serif;
  --primary-color: #253c49;
  --white-color: #ffffff;
  --border-color: #e8e8e8;
}

/* --- 1. The Main Header Bar --- */
.nfh-header-mobile {
  /* Positioning */
  position: sticky; /* Modern way to make it stick */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* High z-index to stay on top */

  /* Layout */
  display: flex;
  justify-content: space-between;
  align-items: center;

  /* Style */
  background-color: var(--white-color);
  padding: 1rem 1.5rem;
  box-sizing: border-box; /* Ensures padding is included in the width */
  border-bottom: 1px solid var(--border-color);
}

.nfh-header-mobile__logo .logo-svg {
  display: block;
  height: 2.9rem;
  width: auto;
}

/* --- 2. The Hamburger Toggle Button --- */
.nfh-header-mobile__toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  width: 40px;
  height: 40px;
  position: relative;
  z-index: 1001; /* Must be higher than the header itself */
  -webkit-tap-highlight-color: transparent;
}

.nfh-header-mobile__toggle .hamburger {
  display: block;
  position: relative;
  width: 24px;
  height: 2px;
  background-color: var(--primary-color);
  transition: transform 0.3s ease, background-color 0.3s ease;
}

.nfh-header-mobile__toggle .hamburger::before,
.nfh-header-mobile__toggle .hamburger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--primary-color);
  transition: transform 0.3s ease;
}

.nfh-header-mobile__toggle .hamburger::before { top: -8px; }
.nfh-header-mobile__toggle .hamburger::after { bottom: -8px; }


/* --- 3. The Full-Screen Navigation Panel --- */
.nfh-nav-panel {
  /* Positioning */
  position: fixed; /* Fixed, so it covers the whole screen */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 999; /* Just below the header bar */
  
  /* Style */
  background-color: var(--white-color);
  
  /* Layout */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center the content vertically */
  padding: 80px 1.5rem 2rem; /* Top padding to avoid being under the header */
  box-sizing: border-box;

  /* Initial State (Hidden) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-15px);
  transition: opacity 0.4s ease, visibility 0.4s ease, transform 0.4s ease;
}

.nfh-nav-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: center; /* Center links like the inspiration site */
}

.nfh-nav-panel__list a {
  display: block;
  padding: 1rem;
  font-family: var(--font-family);
  font-size: 22px; /* A bit larger for a full-screen menu */
  font-weight: 300;
  color: var(--primary-color);
  text-decoration: none;
  transition: background-color 0.2s ease;
}

.nfh-nav-panel__list a:hover {
  background-color: #f7f7f7;
}

.nfh-nav-panel__contact {
  margin-top: 2rem;
  padding: 0 1.5rem;
}

.nfh-nav-panel__contact .contact-us-btn {
  display: block;
  width: 100%;
  padding: 1rem;
  background-color: var(--primary-color);
  color: var(--white-color);
  border: 1px solid var(--primary-color);
  font-family: var(--font-family);
  font-size: 18px;
  text-align: center;
  text-decoration: none;
  transition: color 0.3s ease, background-color 0.3s ease;
}

.nfh-nav-panel__contact .contact-us-btn:hover {
  background-color: var(--white-color);
  color: var(--primary-color);
}


/* --- 4. The "Active" State --- */
/* We add ONE class to the body to control everything */

/* When active, lock the body scroll */
body.nfh-nav-is-active {
  overflow: hidden;
}

/* Show the navigation panel */
body.nfh-nav-is-active .nfh-nav-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Transform the hamburger into an 'X' */
body.nfh-nav-is-active .nfh-header-mobile__toggle .hamburger {
  background-color: transparent;
}

body.nfh-nav-is-active .nfh-header-mobile__toggle .hamburger::before {
  transform: translateY(8px) rotate(45deg);
}

body.nfh-nav-is-active .nfh-header-mobile__toggle .hamburger::after {
  transform: translateY(-8px) rotate(-45deg);
}
/* --- 5. Fix for Theme's Default Hover --- */
/* Overrides the theme's default red hover effect on the hamburger button */
.nfh-header-mobile__toggle:hover {
  background-color: transparent !important;
  outline: none !important;
}/* End custom CSS */