/* ==========================================================================
   Preloader
   ========================================================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white); /* Or your desired background */
    z-index: 9999; /* Make sure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctn-preloader {
    /* Add your preloader animation styles here */
    /* Example: a simple spinner */
    width: 50px;
    height: 50px;
    border: 5px solid var(--light-blue);
    border-top: 5px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* ==========================================================================
   Header
   ========================================================================== */
.main-header {
  min-height: 100px; /* or 120px, to match your bigger logo */
}

.main-header {
    position: fixed; /* Initially fixed */
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
    z-index: 1000; /* Ensure it's above other content */
    transition: var(--transition-base);
}

/* Sticky header styles */
#header-sticky.sticky {
    background: var(--gradient-primary);
    box-shadow: var(--box-shadow-md);
}
 #header-sticky.sticky .main-menu nav > ul > li > a, #header-sticky.sticky .mobile-menu {
    color: var(--white);
}

.header-container-p {
    padding-left: 1rem;
    padding-right: 1rem;
}



/* Ensure the logo container remains fixed */
.logo {
  position: relative;
  height: 50px;        /* Keep the container's height unchanged */
  overflow: visible;    /* Allow the larger image to overflow */
}

/* Position the image absolutely so its size doesn't affect container height */
.logo img {
  position: relative;
  top: 50%;
  left: 50%;
  height: 300px !important; /* Increase image size as desired */
  width: auto;
  transform: translate(-50%, -50%); /* Center within container */
}





.menu-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.main-menu {
    /* No styles needed here initially, styles are in the nav */
}
.main-menu nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /*  Horizontal layout */
    align-items: center;
}
.main-menu nav > ul > li {
     position: relative; /*  For dropdown positioning */
    display: inline-block; /*  Horizontal layout */

}
.main-menu nav > ul > li > a {
    display: block;
    padding: 1.5rem 1rem; /*  Top/bottom, left/right */
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-base);
}

.main-menu nav > ul > li > a:hover,
.main-menu nav > ul > li > a:focus,
.main-menu nav > ul > li.active > a
 {
    color: var(--accent-blue);
    text-decoration: none; /* Remove underline on hover/focus */
}

/* Submenu (Dropdown) Styles */
.submenu {
    position: absolute;
    top: 100%; /* Position below the parent link */
    left: 0;
    background-color: var(--white);
    box-shadow: var(--box-shadow-md);
    min-width: 200px; /* Adjust as needed */
    z-index: 1010; /* Ensure it's above other content */
    display: none; /* Hide by default */
    padding: 0.5rem 0;
    transition: all 0.4s ease;
}

.main-menu nav > ul > li:hover > .submenu, .main-menu nav > ul > li:focus-within > .submenu {
    display: block; /* Show on hover or focus of parent li */
}
.submenu li {
    display: block; /* Stack dropdown items */
}
.submenu li a {
   display: block;
    padding: 0.75rem 1.5rem;
    color: var(--deep-blue);
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap;
}
.submenu li a:hover, .submenu li a:focus {
    background-color: var(--light-blue);
    color: var(--primary-blue);
}
/* Mobile Menu (Hamburger) */
.mobile-menu {
    display: none; /* Hide by default, show on small screens */
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--deep-blue);
    position: absolute; /*  Position relative to the header */
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    z-index: 1020;
}

/*  Bars icon (using Font Awesome)  */
.mobile-menu::before {
    content: "\f0c9"; /*  Font Awesome bars icon */
    font-family: "Font Awesome 5 Free"; /*  Specify Font Awesome */
    font-weight: 900; /*  Use the "solid" style */
}

/* Close icon (using Font Awesome - you'll need JS to toggle this) */
.mobile-menu.active::before {
    content: "\f00d"; /* Font Awesome times (close) icon */
}


/* Responsive Styles (Mobile First) */

/* Small devices (less than 768px) */
@media (max-width: 767.98px) {

    .d-none.d-md-block {
        display: none !important; /* Hide desktop menu */
    }

    .mobile-menu {
        display: block; /* Show the hamburger icon */
    }

    .main-menu {
        position: fixed; /* Fixed position for the mobile menu */
        top: 0;         /* Start from the top */
        left: -80%;    /* Hide off-screen initially (negative left value)*/
        width: 80%;       /*  80% of the screen width */
        height: 100vh; /*  Full viewport height */
        background-color: var(--white);
        overflow-y: auto;   /*  Allow scrolling if content overflows */
        transition: left 0.3s ease; /*  Smooth slide-in/out */
        z-index: 1010;
        padding-top: 4rem;
    }

    .main-menu.active {
        left: 0; /* Slide in from the left */
    }

     .main-menu nav > ul {
        flex-direction: column; /* Stack menu items vertically */
    }
    .main-menu nav > ul > li > a {
        padding: 1rem 1.5rem; /*  Adjust padding for mobile */
    }

    /*  Submenu styles for mobile */
    .submenu {
        position: static; /*  Don't use absolute positioning */
        display: none;    /*  Hide initially */
        width: 100%;       /*  Full width */
        box-shadow: none;  /*  Remove shadow */
        min-width: auto;   /*  Reset min-width */
    }
   .main-menu nav > ul > li:hover > .submenu, .main-menu nav > ul > li:focus-within > .submenu {
        display: none; /*  Remove display on hover */
    }
    .main-menu nav > ul > li > .submenu.active {
        display: block; /* Show the submenu when active*/
    }
    .submenu li a {
        padding-left: 2.5rem; /*  Add some indentation */
    }

    /* Header Sticky fix */
    .main-header {
        position: relative;
    }
    body {
        padding-top: 0; /* Remove padding on body */
    }
}


/* ==========================================================================
   Header (Improved Centering and Styling)
   ========================================================================== */
/*  ... (Preloader styles - no changes here) ... */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
    z-index: 1000;
    transition: var(--transition-base);
}
/* Sticky header styles */
#header-sticky.sticky {
    background: var(--gradient-primary);
    box-shadow: var(--box-shadow-md);
}
 #header-sticky.sticky .main-menu nav > ul > li > a, #header-sticky.sticky .mobile-menu {
    color: var(--white);
}

.header-container-p {
    padding-left: 1rem;
    padding-right: 1rem;
}

.header-wrapper {
    display: flex;
    justify-content: space-between; /* Space out logo, menu, and hamburger */
    align-items: center; /* Vertically center items */
    padding-top: 1rem;       /* Add some padding */
    padding-bottom: 1rem;
}

.logo a {
    display: inline-block;
}

.logo img {
    height: 50px;  /* Or your preferred height */
}
.menu-area {
    display: flex;       /*  Use flexbox */
    align-items: center; /*  Center items vertically */
    flex-grow: 1;       /*  Allow menu area to grow */
    justify-content: center; /*  Center the menu horizontally */
}
.main-menu nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Center menu items vertically*/
}
.main-menu nav > ul > li {
    position: relative;
    display: inline-block;
}

.main-menu nav > ul > li > a {
    display: block;
    padding: 0.75rem 1.25rem; /* Reduced padding slightly */
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-base);
    position: relative; /* For the underline effect */
}
/* Underline Effect on Hover/Focus/Active */
.main-menu nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; /* Underline thickness */
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}

.main-menu nav > ul > li > a:hover::after,
.main-menu nav > ul > li > a:focus::after,
.main-menu nav > ul > li.active > a::after
{
    width: 100%; /* Expand underline to full width */
}
/* Submenu (Dropdown) Styles - No major changes */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: var(--box-shadow-md);
    min-width: 200px;
    z-index: 1010;
    display: none;
    padding: 0.5rem 0;
    transition: all 0.4s ease;
}
.main-menu nav > ul > li:hover > .submenu,
.main-menu nav > ul > li:focus-within > .submenu {
    display: block;
}

.submenu li {
    display: block;
}

.submenu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--deep-blue);
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap;
}

.submenu li a:hover,
.submenu li a:focus {
    background-color: var(--light-blue);
    color: var(--primary-blue);
}
/* Mobile Menu (Hamburger) - No major changes */
.mobile-menu {
    display: none; /* Hidden by default */
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--deep-blue);
    z-index: 1020;
}

.mobile-menu::before {
    content: "\f0c9"; /* Font Awesome bars icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.mobile-menu.active::before {
    content: "\f00d"; /* Font Awesome times (close) icon */
}

/* Responsive Styles (Mobile First) - No major changes here */
@media (max-width: 767.98px) {
  /* ... (rest of your mobile menu styles - keep these) ... */
      /* Hide desktop menu */
    .menu-area {
      display: none;
    }

    .mobile-menu {
        display: block; /* Show the hamburger icon */
    }
        .main-menu {
        position: fixed; /* Fixed position for the mobile menu */
        top: 0;         /* Start from the top */
        left: -80%;    /* Hide off-screen initially (negative left value)*/
        width: 80%;       /*  80% of the screen width */
        height: 100vh; /*  Full viewport height */
        background-color: var(--white);
        overflow-y: auto;   /*  Allow scrolling if content overflows */
        transition: left 0.3s ease; /*  Smooth slide-in/out */
        z-index: 1010;
        padding-top: 4rem;
    }

    .main-menu.active {
        left: 0; /* Slide in from the left */
    }

     .main-menu nav > ul {
        flex-direction: column; /* Stack menu items vertically */
    }
    .main-menu nav > ul > li > a {
        padding: 1rem 1.5rem; /*  Adjust padding for mobile */
    }
    /*  Submenu styles for mobile */
    .submenu {
        position: static; /*  Don't use absolute positioning */
        display: none;    /*  Hide initially */
        width: 100%;       /*  Full width */
        box-shadow: none;  /*  Remove shadow */
        min-width: auto;   /*  Reset min-width */
    }
   .main-menu nav > ul > li:hover > .submenu, .main-menu nav > ul > li:focus-within > .submenu {
        display: none; /*  Remove display on hover */
    }
    .main-menu nav > ul > li > .submenu.active {
        display: block; /* Show the submenu when active*/
    }
    .submenu li a {
        padding-left: 2.5rem; /*  Add some indentation */
    }
}




















/* ==========================================================================
   Preloader
   ========================================================================== */

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--white); /* Or your desired background */
    z-index: 9999; /* Make sure it's on top of everything */
    display: flex;
    justify-content: center;
    align-items: center;
}

.ctn-preloader {
    /* Add your preloader animation styles here */
    /* Example: a simple spinner */
    width: 50px;
    height: 50px;
    border: 5px solid var(--light-blue);
    border-top: 5px solid var(--primary-blue);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* ==========================================================================
   Header (Improved Centering and Styling)
   ========================================================================== */
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: var(--white);
    box-shadow: var(--box-shadow-sm);
    z-index: 1000;
    transition: var(--transition-base);
}
/* Sticky header styles */
#header-sticky.sticky {
    background: var(--gradient-primary);
    box-shadow: var(--box-shadow-md);
}
 #header-sticky.sticky .main-menu nav > ul > li > a, #header-sticky.sticky .mobile-menu {
    color: var(--white);
}

.header-container-p {
    padding-left: 1rem;
    padding-right: 1rem;
}

.header-wrapper {
    display: flex;
    justify-content: space-between; /* Space out logo, menu, and hamburger */
    align-items: center; /* Vertically center items */
    padding-top: 1rem;       /* Add some padding */
    padding-bottom: 1rem;
}

.logo a {
    display: inline-block;
}

.logo img {
    height: 50px;  /* Or your preferred height */
}
.menu-area {
    display: flex;       /*  Use flexbox */
    align-items: center; /*  Center items vertically */
    flex-grow: 1;       /*  Allow menu area to grow */
    justify-content: center; /*  Center the menu horizontally */
}
.main-menu nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center; /* Center menu items vertically*/
}
.main-menu nav > ul > li {
    position: relative;
    display: inline-block;
}

.main-menu nav > ul > li > a {
    display: block;
    padding: 0.75rem 1.25rem; /* Reduced padding slightly */
    color: var(--deep-blue);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-base);
    position: relative; /* For the underline effect */
}
/* Underline Effect on Hover/Focus/Active */
.main-menu nav > ul > li > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px; /* Underline thickness */
    background-color: var(--accent-blue);
    transition: width 0.3s ease;
}

.main-menu nav > ul > li > a:hover::after,
.main-menu nav > ul > li > a:focus::after,
.main-menu nav > ul > li.active > a::after
{
    width: 100%; /* Expand underline to full width */
}
/* Submenu (Dropdown) Styles - No major changes */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: var(--white);
    box-shadow: var(--box-shadow-md);
    min-width: 200px;
    z-index: 1010;
    display: none;
    padding: 0.5rem 0;
    transition: all 0.4s ease;
}
.main-menu nav > ul > li:hover > .submenu,
.main-menu nav > ul > li:focus-within > .submenu {
    display: block;
}

.submenu li {
    display: block;
}

.submenu li a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: var(--deep-blue);
    text-decoration: none;
    transition: var(--transition-base);
    white-space: nowrap;
}

.submenu li a:hover,
.submenu li a:focus {
    background-color: var(--light-blue);
    color: var(--primary-blue);
}
/* Mobile Menu (Hamburger) - No major changes */
.mobile-menu {
    display: none; /* Hidden by default */
    cursor: pointer;
    font-size: 1.5rem;
    color: var(--deep-blue);
    z-index: 1020;
}

.mobile-menu::before {
    content: "\f0c9"; /* Font Awesome bars icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.mobile-menu.active::before {
    content: "\f00d"; /* Font Awesome times (close) icon */
}

/* Responsive Styles (Mobile First) - No major changes here */
@media (max-width: 767.98px) {
  /* ... (rest of your mobile menu styles - keep these) ... */
      /* Hide desktop menu */
    .menu-area {
      display: none;
    }

    .mobile-menu {
        display: block; /* Show the hamburger icon */
    }
        .main-menu {
        position: fixed; /* Fixed position for the mobile menu */
        top: 0;         /* Start from the top */
        left: -80%;    /* Hide off-screen initially (negative left value)*/
        width: 80%;       /*  80% of the screen width */
        height: 100vh; /*  Full viewport height */
        background-color: var(--white);
        overflow-y: auto;   /*  Allow scrolling if content overflows */
        transition: left 0.3s ease; /*  Smooth slide-in/out */
        z-index: 1010;
        padding-top: 4rem;
    }

    .main-menu.active {
        left: 0; /* Slide in from the left */
    }

     .main-menu nav > ul {
        flex-direction: column; /* Stack menu items vertically */
    }
    .main-menu nav > ul > li > a {
        padding: 1rem 1.5rem; /*  Adjust padding for mobile */
    }
    /*  Submenu styles for mobile */
    .submenu {
        position: static; /*  Don't use absolute positioning */
        display: none;    /*  Hide initially */
        width: 100%;       /*  Full width */
        box-shadow: none;  /*  Remove shadow */
        min-width: auto;   /*  Reset min-width */
    }
   .main-menu nav > ul > li:hover > .submenu, .main-menu nav > ul > li:focus-within > .submenu {
        display: none; /*  Remove display on hover */
    }
    .main-menu nav > ul > li > .submenu.active {
        display: block; /* Show the submenu when active*/
    }
    .submenu li a {
        padding-left: 2.5rem; /*  Add some indentation */
    }
     /* Header Sticky fix */
    .main-header {
        position: relative;
    }
    body {
        padding-top: 0; /* Remove padding on body */
    }
}