/* Custom color scheme for FlexPlus */

/* Import modern fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Open+Sans:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    background: #0a4d68;
    background: -webkit-linear-gradient(to right, #0a4d68, #06283d);
    background: -webkit-linear-gradient(left, #0a4d68, #06283d);
    background: linear-gradient(to right, #0a4d68, #06283d);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    line-height: 1.8;
}

.nav-brand {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.darker-blue {
    background: linear-gradient(180deg,#06283d 0,#041c32 25%,#064663 40%,#041c32 65%,#041c32);
}

/* Text colors */
.bl-text {
    color: #1E81B0 !important;
}

.w-text {
    color: #ffffff !important;
}

.g-text {
    color: #47B5FF !important;
}

.d-blue {
    color: #06283D !important;
}

/* Button styles */
.login-btn {
    background-color: #1a5d1a !important;
    border-color: #1a5d1a !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    padding: 10px 20px !important;
    line-height: 1.2 !important;
}

.login-btn:hover,
.login-btn:focus {
    background-color: #0f3d0f !important;
    border-color: #0f3d0f !important;
}

.dream-btn {
    background-image: -webkit-linear-gradient(left, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
    background-image: linear-gradient(to right, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.dream-btn.more-btn {
    background-image: -webkit-linear-gradient(left, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
    background-image: linear-gradient(to right, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
}

.dream-btn.green-btn {
    background-image: -webkit-linear-gradient(left, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
    background-image: linear-gradient(to right, #1a5d1a 0%, #2e8b57 51%, #1a5d1a 100%) !important;
}

/* Section headings */
.section-heading h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.welcome-content h1, .welcome-content h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Hero section - override with dark blue gradient */
.hero-section.main-page {
    background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
    background-size: cover;
}

/* Breadcrumb area - using exact same gradient as hero */
.breadcumb-area {
    background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
    padding: 70px 0;
    background-size: cover;
}

.breadcumb-content .title {
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.breadcrumb-item a {
    color: #47B5FF !important;
}

.breadcrumb-item.active {
    color: #ffffff !important;
}

/* Global Asset Allocation section */
.about-us-area.bg {
    background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
    background-size: cover;
}

/* Override text colors in this section to ensure readability */
.about-us-area.bg .g-text {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.about-us-area.bg p.g-text {
    color: #e6f7ff !important;
}

/* Mobile Navigation - using same gradient as hero section - FIXED FOR MOBILE ONLY */
@media (max-width: 991px) {
    .breakpoint-on .classy-navbar .classy-menu,
    .classy-navbar .classy-menu,
    .dark.breakpoint-on .classy-navbar .classy-menu,
    .breakpoint-on.dark .classy-navbar .classy-menu {
        background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
        background-color: transparent !important;
        max-width: 280px !important;
        right: 0 !important;
        left: auto !important;
        top: 70px !important; /* Start below header */
        height: auto !important;
        max-height: calc(100vh - 80px) !important; /* Limit height to screen height minus header */
        overflow-y: auto !important; /* Enable scrolling if needed */
        border-radius: 0 0 0 10px !important; /* Rounded bottom left corner */
        box-shadow: -5px 5px 15px rgba(0, 0, 0, 0.2) !important; /* Add shadow for depth */
        border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    }
}

/* Menu-on state specifically should display - MOBILE ONLY */
@media (max-width: 991px) {
    html body .classy-navbar .classy-menu.menu-on {
        background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
        background-color: transparent !important;
        max-width: 280px !important;
        right: 0 !important;
        left: auto !important;
        display: block !important; /* Force display when menu-on class is applied */
        top: 70px !important; /* Start below header */
        height: auto !important;
        max-height: calc(100vh - 70px) !important; /* Limit height to screen height minus header */
        overflow-y: auto !important; /* Enable scrolling if needed */
        position: absolute !important; /* Force absolute positioning */
    }
}

/* Ensure menu has enough z-index to show properly */
.classy-menu {
    z-index: 9999 !important;
}

/* Style the mobile navbar toggler button with same gradient */
.classy-navbar-toggler.demo {
    background: linear-gradient(135deg, #041c32 0%, #064663 50%, #0a4d68 100%) !important;
    border-radius: 5px;
    padding: 10px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.classy-navbar-toggler.demo:hover {
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
    transform: scale(1.05);
}

.classy-navbar-toggler.demo .navbarToggler span {
    background-color: #fff !important;
    height: 2px;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* Mobile nav item styling - alignment to left */
.breakpoint-on .classynav > ul > li > a {
    background-color: transparent !important;
    color: #ffffff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 10px 15px !important;
    font-size: 14px !important;
    text-align: left !important;
    display: block !important;
}

/* Dropdown items in mobile nav */
.breakpoint-on .classynav ul li ul.dropdown li a,
.dark .classynav ul li .dropdown li a {
    color: #e6f7ff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
}

/* Additional mobile nav styling */
.breakpoint-on .classynav ul {
    padding: 10px 0 !important;
}

.classycloseIcon {
    display: none !important; /* Hide the close icon completely */
}

/* Remove padding-top since we don't need space for the close button anymore */
.breakpoint-on .classynav {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
    text-align: left !important;
}

/* Mobile login button */
.breakpoint-on .classynav .login-btn {
    margin-top: 15px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 15px !important;
    font-size: 13px !important;
    padding: 8px 20px !important;
    text-align: center !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-width: 120px !important;
    max-width: 160px !important;
    line-height: 1.2 !important;
}

/* Footer */
.footer-bg {
    background: linear-gradient(to bottom, #041c32, #064663) !important;
}

/* Fix for footer image style */
.footer-bg .footer-bg {
    background-image: url(../img/core-img/pattern.png) !important;
}

/* Footer content area */
.footer-content-area.spec {
    background-color: transparent !important;
}

/* Override gradient sections */
.our-mission-content {
    background: rgba(10, 77, 104, 0.95) !important;
    background: -webkit-linear-gradient(to right, rgba(10, 77, 104, 0.95), rgba(6, 40, 61, 0.95)) !important;
    background: -webkit-linear-gradient(left, rgba(10, 77, 104, 0.95), rgba(6, 40, 61, 0.95)) !important;
    background: linear-gradient(to right, rgba(10, 77, 104, 0.95), rgba(6, 40, 61, 0.95)) !important;
}

/* Service icons */
.service_icon {
    background-color: #1a5d1a !important;
}

/* Contact section */
.call-us-sec {
    background-color: #1a5d1a !important;
}

/* Fix for menu visibility on mobile */
.breakpoint-on .classy-nav-container {
    background-color: transparent !important;
}

/* Ensure the classynav shows properly - REMOVED GLOBAL RULE */

/* Override any conflicting styles */
.breakpoint-on .classynav ul li.cn-dropdown-item ul, 
.breakpoint-on .classynav ul li.megamenu-item > ul {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: none !important;
    background-color: transparent !important;
    display: none !important;
}

.breakpoint-on .classynav ul li.cn-dropdown-item.active > ul, 
.breakpoint-on .classynav ul li.megamenu-item.active > ul {
    display: block !important;
}

/* Make sure it starts hidden initially on mobile */
@media (max-width: 991px) {
    .classy-menu {
        display: none !important;
    }
    
    .classy-menu.menu-on {
        display: block !important; 
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Force visibility when menu is toggled */
    .breakpoint-on .classy-navbar .classy-menu.menu-on {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
        left: auto !important;
        right: 0 !important;
        top: 70px !important;
    }
}

/* Override any third-party mobile navigation scripts */
body:not(.menu-on) .classy-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

/* Override the toggle button state */
.classy-navbar-toggler.active .navbarToggler span:nth-child(1),
.classy-navbar-toggler.active .navbarToggler span:nth-child(3) {
    background-color: #fff !important;
}

/* Left align the nav items */
.breakpoint-on .classynav > ul {
    text-align: left !important;
}

/* Left align the nav items text and container */
.breakpoint-on .classynav > ul > li {
    text-align: left !important;
}

/* Ensure desktop navigation displays properly */
@media (min-width: 992px) {
    /* Desktop nav styling */
    html body .breakpoint-off .classynav {
        display: flex !important;
        visibility: visible !important;
        position: relative !important;
    }
    
    html body .breakpoint-off .classynav ul li {
        display: inline-block !important;
    }
    
    html body .breakpoint-off .classynav ul li a {
        display: block !important;
    }
    
    /* Prevent any mobile menu styles from affecting desktop view */
    html body .breakpoint-off .classy-menu {
        display: flex !important;
        position: static !important;
        height: auto !important;
        background: transparent !important;
        max-width: none !important;
        max-height: none !important;
        overflow: visible !important;
        opacity: 1 !important;
        visibility: visible !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        box-shadow: none !important;
        border: none !important;
    }
    
    /* Fix header layout */
    html body .classy-navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Make sure classy-menu is positioned correctly within header */
    html body .classy-nav-container .classy-navbar .classy-menu {
        position: relative !important;
        flex: 1 !important;
        justify-content: flex-end !important;
    }
    
    /* Advanced desktop navigation positioning */
    .classy-nav-container {
        height: auto !important;
    }
    
    /* Navigation brand positioning */
    .nav-brand {
        margin-right: 2rem !important;
    }
    
    /* The navbar container */
    .classy-navbar {
        padding: 0 !important;
        height: auto !important;
        min-height: 70px !important;
    }
    
    /* Fix the menu alignment */
    .classy-menu {
        margin-left: auto !important;
    }
    
    /* Main navigation items */
    .classynav ul {
        display: flex !important;
        margin-right: 20px !important;
    }
    
    /* Individual navigation items */
    .classynav ul li {
        margin: 0 5px !important;
        display: inline-block !important;
    }
    
    /* Navigation links */
    .classynav ul li a {
        padding: 0 15px !important;
        line-height: 70px !important;
    }
}

/* Ensure the classynav shows properly - ONLY FOR MOBILE */
@media (max-width: 991px) {
    .classynav ul li {
        display: block !important;
    }
}

/* Override any third-party mobile navigation scripts */
@media (max-width: 991px) {
    body:not(.menu-on) .classy-menu {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
}