/* Add dark blue background to navbar */
.navbar.wide,
.navbar.wide.navbar-expand-lg,
.navbar.wide.wrapper,
.navbar.wide.wrapper.absolute,
.navbar.wide.wrapper.absolute.text-uppercase,
.navbar,
.navbar.fixed {
    background-color: #001a4f !important;
    transition: none !important;
    transform: none !important;
}

/* Set background color for all pages */
body,
.white-wrapper,
.light-wrapper,
.wrapper {
    background-color: #F5F0E9 !important;
}

/* Set footer background color */
footer.dark-wrapper,
.dark-wrapper,
footer.dark-wrapper.inverse-text {
    background-color: #011a2e !important;
}

/* Style all buttons with teal background */
.btn,
.btn.btn-white,
.btn.btn-white-opacity,
.btn.btn-red,
.btn.btn-orange,
.btn.btn-yellow,
.btn.btn-green,
.btn.btn-leaf,
.btn.btn-teal,
.btn.btn-aqua,
.btn.btn-meander,
.btn.btn-blue,
.btn.btn-lavender,
.btn.btn-purple,
.btn.btn-violet,
.btn.btn-pink,
.btn.btn-rose,
.btn.btn-hibiscus,
.btn.btn-brown,
.btn.btn-pastel-red,
.btn.btn-pastel-orange,
.btn.btn-pastel-yellow,
.btn.btn-pastel-green,
.btn.btn-pastel-leaf,
.btn.btn-pastel-teal,
.btn.btn-pastel-aqua,
.btn.btn-pastel-meander,
.btn.btn-pastel-blue,
.btn.btn-pastel-default,
.btn.btn-pastel-lavender,
.btn.btn-pastel-purple,
.btn.btn-pastel-violet,
.btn.btn-pastel-pink,
.btn.btn-pastel-rose,
.btn.btn-pastel-hibiscus,
.btn.btn-pastel-brown {
    background-color: #007172 !important;
    border-color: #007172 !important;
    color: #ffffff !important;
}

/* Button hover state */
.btn:hover,
.btn:focus,
.btn:active,
.btn.active {
    background-color: #005c5d !important;
    border-color: #005c5d !important;
    color: #ffffff !important;
}

/* Desktop navbar height and logo size */
@media (min-width: 992px) {
    .navbar.wide .navbar-nav .nav-link {
        padding: 25px 25px !important; /* Increase padding to make nav bar taller */
    }

    /* Logo styles for both normal and fixed states */
    .navbar-brand img,
    .navbar.fixed .navbar-brand img {
        height: 60px !important; /* Make logo bigger */
        width: auto !important;
        margin-top: 0 !important;
        transition: none !important;
        transform: none !important;
        -webkit-transition: none !important;
        -o-transition: none !important;
        -webkit-transform: none !important;
    }

    .navbar .container-fluid {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    .navbar {
        padding: 20px !important;
    }

    .navbar-brand {
        margin-right: 2rem !important;
    }

    .navbar-nav {
        margin: 0 auto !important;
    }

    .nav-link {
        padding: 0.5rem 1rem !important;
        color: #ffffff !important;
    }
}

/* Mobile specific overrides */
@media (max-width: 991.98px) {
    .navbar,
    .navbar.wide,
    .navbar.wide.wrapper,
    .navbar.wide.wrapper.absolute,
    .navbar.navbar-sticky,
    .navbar.fixed {
        background-color: #011a2e !important;
        padding: 10px 15px !important;
        position: relative !important;
    }

    .container-fluid {
        padding: 0 !important;
    }

    /* Keep mobile logo size smaller */
    .navbar-brand {
        margin-right: 0 !important;
    }

    .navbar-brand img {
        height: 55px !important;
        max-height: 55px !important;
        margin-top: -5px !important;
    }

    /* Style the hamburger menu */
    .navbar-toggler {
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        outline: none !important;
    }

    .navbar-toggler:focus {
        outline: none !important;
        box-shadow: none !important;
    }

    /* Custom hamburger icon */
    .navbar-toggler-icon {
        background-image: none !important;
        position: relative !important;
        width: 24px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        transition: background-color 0.3s !important;
    }

    .navbar-toggler-icon::before,
    .navbar-toggler-icon::after {
        content: '' !important;
        position: absolute !important;
        width: 24px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        transition: transform 0.3s !important;
    }

    .navbar-toggler-icon::before {
        top: -6px !important;
    }

    .navbar-toggler-icon::after {
        bottom: -6px !important;
    }

    /* Mobile menu styles */
    .navbar-collapse {
        background-color: #011a2e !important;
        margin: 0 -15px !important;
        padding: 0 15px !important;
    }

    .navbar-nav {
        padding: 10px 0 !important;
        margin: 0 !important;
    }

    .nav-item {
        padding: 5px 0 !important;
    }

    .nav-link {
        color: #ffffff !important;
        padding: 8px 0 !important;
        font-size: 16px !important;
        display: block !important;
    }

    /* Hide social icons on mobile */
    .social-wrapper {
        display: none !important;
    }
}

/* Make nav links white for visibility against dark background */
.navbar.text-uppercase .navbar-nav .nav-link,
.navbar.wide .navbar-nav .nav-link,
.navbar-nav .nav-link {
    font-size: 20px !important;
    font-weight: 900 !important;
    color: white !important;
}

/* Make social icons white */
.navbar .social-mute a {
    color: white !important;
}

/* Adjust dropdown styles to match */
.navbar.text-uppercase .dropdown-item,
.navbar.wide .dropdown-item,
.dropdown-item {
    font-size: 15px !important;
    font-weight: 900 !important;
    padding: 11px 25px !important;
}

/* Style How It Works numbers */
.how-it-works-number {
    font-family: 'Luckiest Guy', cursive !important;
    font-size: 80px !important;
    line-height: 1 !important;
    display: block !important;
    margin-top: 0 !important;
}

/* Individual number colors */
.how-it-works-number[data-number="1"] {
    color: #f5813b !important; /* Orange */
}

.how-it-works-number[data-number="2"] {
    color: #036f84 !important; /* Teal */
}

.how-it-works-number[data-number="3"] {
    color: #e23c2c !important; /* Red */
}

.how-it-works-number[data-number="4"] {
    color: #052c75 !important; /* Dark Blue */
}

/* Adjust the icon container for the numbers */
.icon.fs-30.icon-bg-s {
    width: auto !important;
    height: auto !important;
    min-width: 80px !important;
    margin-top: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Change quote mark colors to match How It Works numbers */
.cube-slider .cbp-item:nth-child(4n+1) blockquote.icon:before {
    color: #f5813b !important; /* Orange */
}

.cube-slider .cbp-item:nth-child(4n+2) blockquote.icon:before {
    color: #036f84 !important; /* Teal */
}

.cube-slider .cbp-item:nth-child(4n+3) blockquote.icon:before {
    color: #e23c2c !important; /* Red */
}

.cube-slider .cbp-item:nth-child(4n+4) blockquote.icon:before {
    color: #052c75 !important; /* Dark Blue */
}

/* Hide pagination dots in Customer Stories section */
.cube-slider .cbp-nav-pagination {
    display: none !important;
}