@font-face {
    font-family: 'madelight';
    /*a name to be used later*/
    src: url('../../assets/fonts/light.otf') format("opentype");
    /*URL to font*/
}

@font-face {
    font-family: 'maderegular';
    /*a name to be used later*/
    src: url('../../assets/fonts/regular.otf') format("opentype");
    /*URL to font*/
}

@font-face {
    font-family: 'mademedium';
    /*a name to be used later*/
    src: url('../../assets/fonts/medium.otf') format("opentype");
    /*URL to font*/
}

@media only screen and (max-width: 760px) {
    .hero-header {
        width: 100% !important;
    }

    .hero-text {
        width: 100% !important;
    }
}

@media only screen and (max-width: 1200px) {
    .nav-img {
        width: 25% !important;
    }
}

@media only screen and (max-width: 576px) {
    .nav-img {
        width: 45% !important;
    }

    #modal-img {
        width: 15% !important;
    }
}

body {
    background-color: #000202 !important;
    background-image: url("../img/smoke.webp");
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #18483C;
    /* Modal background color */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.5s ease-out;
    text-align: center;
}

#preloader img {
    width: 132px;
    /* Adjust the size of the loader */
    height: 75px;
}

/* styles.css */
.box {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    /* Add other styling for your elements */
}

.box.animate {
    opacity: 1;
}

@keyframes sizeAnimation {

    0%,
    100% {
        transform: scale(1);
        /* Original size */
    }

    50% {
        transform: scale(1.3);
        /* Grow 30% bigger */
    }
}


@keyframes sizeAnimation2 {
    0% {
        transform: scale(1) rotate(0deg);
        /* Start at original size and rotation */
    }

    25% {
        transform: scale(1.1) rotate(-10deg);
        /* Scale up by 10% and rotate left 10 degrees */
    }

    50% {
        transform: scale(1) rotate(0deg);
        /* Return to original size and rotation */
    }

    75% {
        transform: scale(1.1) rotate(10deg);
        /* Scale up by 10% and rotate right 10 degrees */
    }

    100% {
        transform: scale(1) rotate(0deg);
        /* Return to original size and rotation */
    }
}

#loading-text {
    font-family: "madeLight";
    color: white !important;
    margin-top: 20px;
}

.loading-img {
    width: 100px !important;
    height: 100px !important;
}


.navbar-mobile-img{
    display: none;
}

/* Full-screen navbar for mobile */
@media (max-width: 991.98px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #12362e;
        /* Adjust color and opacity as needed */
        z-index: 1000;
        /* Ensure it stays on top */
        transition: all 0.3s ease;
        display: flex;
        justify-content: center;
        /* Center items vertically */
        align-items: center;
        /* Center items horizontally */
        text-align: center;
        /* Center text within nav items */
        overflow-y: auto;
        /* Allow scrolling if the navbar items overflow */
    }

    .navbar-mobile-img{
        display: block;
    }

    .navbar-collapse.show {
        display: flex !important;
        /* Ensure it expands as a flex container */
    }

    .navbar-nav {
        display: flex;
        flex-direction: column;
        /* Stack items vertically */
        gap: 20px;
        /* Space between the nav items */
        justify-content: center;
        /* Center vertically */
        align-items: center;
        /* Center horizontally */
        width: 100%;
        /* Ensure full width for proper centering */
    }

    .nav-link {
        padding: 1rem;
        font-size: 1.5rem;
        /* Increase font size for better mobile visibility */
        color: white !important;
        display: block;
        /* Ensure full width clickable area */
        width: 100%;
        /* Ensures links take full width and are centered */
        text-align: center;
        /* Center text */
    }

    .navbar-toggler {
        position: absolute;
        top: 15px;
        right: 15px;
    }

    /* Close button styling, visible only on mobile */
    .navbar-close {
        position: absolute;
        top: 15px;
        right: 15px;
        font-size: 2rem;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
        display: block;
        /* Display on mobile */
    }
}

/* Hide the close button on larger screens */
@media (min-width: 992px) {
    .navbar-close {
        display: none;
        /* Hide close button on desktop */
    }
}

.navbar {
    position: sticky !important;
    top: 0;
    z-index: 999;
    /* Ensures navbar stays on top */
    width: 100%;
    background: linear-gradient(rgba(14, 22, 20, 0.8),
            /* Start color: 50% opacity black */
            rgba(0, 0, 0, 0)
            /* End color: fully transparent */
        );
}

/* Add margin to prevent overlap */
header {
    background-image: url(../img/herobg.webp);
    background-repeat: no-repeat;
    background-size: cover;
}

.nav-img {
    width: 15%;
}

.nav-link {
    font-family: "madelight";
    transition: 1s ease-in-out;
    color: white !important;
}

.nav-link:hover {
    color: #18483C !important;
}

.navbar-toggler {
    border: 0 !important;
}

.navtogicon {
    width: 30px;
    height: 30px;
}

.hero {
    padding-top: 5rem;
    padding-bottom: 7rem;
}



h1 {
    font-family: "mademedium";
    color: #fff !important;
}

.hero-header {
    width: 60%;
}

h4 {
    font-family: "madelight";
    color: #75B7A6 !important;
}

.hero-text {
    width: 45%;
}

.btn {
    font-family: "maderegular" !important;
}

@keyframes pulse {
    0% {
        box-shadow: 0px 4px 200px 10px #18483C, inset 0px 0px 8px 1px rgba(0, 0, 0, 0.25);
    }
    50% {
        box-shadow: 0px 4px 250px 15px #18483C, inset 0px 0px 12px 2px rgba(0, 0, 0, 0.35);
    }
    100% {
        box-shadow: 0px 4px 200px 10px #18483C, inset 0px 0px 8px 1px rgba(0, 0, 0, 0.25);
    }
}

.btn-primary {
    background: linear-gradient(90.17deg, rgba(43, 126, 106, 0.4) 3.21%, rgba(0, 69, 52, 0.4) 100%) !important;
    border-radius: 10px;
    border-color: transparent !important;
    transition: 1s ease-in-out !important;
}

.btn-shadow {
    box-shadow: 0px 4px 200px 10px #18483C, inset 0px 0px 8px 1px rgba(0, 0, 0, 0.25) !important;
}

.btn-primary:hover {
    opacity: 0.8;
}

.section-locations {
    padding-top: 7rem;
    padding-bottom: 7rem;
}

h2 {
    font-family: "maderegular";
    color: white !important;
}

.card {
    border: 0 !important;
    background-color: transparent !important;
}

.card-header {
    background: linear-gradient(90.17deg, rgba(43, 126, 106, 0.4) 3.21%, rgba(23, 60, 50, 0.4) 99.88%);
    border-radius: 20px 20px 0px 0px !important;
}

.card-body-alt-2 {
    background: linear-gradient(180deg, rgba(16, 61, 49, 0.4) 0%, rgba(0, 2, 2, 0.4) 100%) !important;
    border-radius: 0px !important;
}

.card-header-alt {
    background: linear-gradient(90.17deg, rgba(43, 126, 106, 0.4) 3.21%, rgba(43, 126, 106, 0.4) 3.21%);
    border-radius: 0px 0px 0px 0px !important;
}

.card-header-text {
    padding: 20px 20px 14px 20px;
}

.card-header-text-alt {
    padding: 12px 10px 6px 0px !important;
    font-family: "maderegular";
    color: white !important;
    opacity: 0.87;
}

.card-body {

    background: linear-gradient(180deg, rgba(16, 61, 49, 0.4) 0%, rgba(0, 2, 2, 0.4) 100%);
    border-radius: 0px 0px 20px 20px;
}

.card-body-alt {
    background: linear-gradient(100.9deg, #010202 -2.92%, #030B09 108.64%);
}

.card-list-ul {
    padding: 0 !important;
}

.card-list-li {
    list-style-type: none;

}

.card-list-item {
    font-family: "madelight";
    font-size: 20px;
    color: white;
}

.iconify {
    font-size: 30px;
    color: #2B7E6A;
}

.btn-secondary {
    color: white;
    font-family: "maderegular" !important;
    background-color: #12362e !important;
    border: 0 !important;

    margin-bottom: 1px;
    transition: 0.5s ease-in-out !important;
}

.btn-secondary:hover {
    opacity: 0.8;
}

.section-products {
    padding-bottom: 7rem;
}

.section-story {
    padding-bottom: 7rem;
}

.story-text {
    font-family: "madelight";
    color: white;
    padding-left: 30px !important;
    padding-right: 30px !important;
}

.story-header {
    font-size: 20px;
    font-family: "mademedium";
}

.footer-link {
    color: white;
    font-family: "maderegular";
    margin-right: 5px;
}

.section-footer {
    padding-bottom: 6rem;
}



body.modal-open {
    overflow: hidden;
    /* Hides the scrollbar */
    padding-right: 0;
    /* Removes any extra padding that might cause a scrollbar */
}

/* Ensure this is at the end of your CSS file or within a relevant <style> tag */

/* Fullscreen background for the modal */
.modal.fade.show {
    background-color: #18483C;
    /* Modal background color */
}

.modal-dialog {
    max-height: 100vh !important;
    display: flex;
    justify-content: center;
    align-items: center;
}

.modal-content {
    width: 100%;
    max-width: none;
    /* Ensure it spans the full width */
    max-height: 400px !important;
    /* Adjust based on content */
    background: #18483C !important;
    /* Optional: background color for modal content */
    border: none !important;
    /* Optional: remove border */
    font-family: "madeLight";
    text-align: center;
}

.modal-header,
.modal-body {
    color: #18483C !important;
    /* Optional: change text color for better readability */
    text-align: center;
}

.modal-title {
    color: #fff;
    /* Optional: title color */
}

.modal-desc {
    color: #fff;
    /* Optional: description color */
}

/* Adjust the backdrop to ensure the entire screen is covered */
.modal-backdrop.show {
    background-color: #18483C;
    /* Ensure backdrop has the same color */
}

/* CSS for fade-out effect */
.modal.fade {
    transition: none;
}

.modal.show {
    opacity: 1;
}

.modal.hide {
    opacity: 0;
}