@import url('https://fonts.googleapis.com/css2?family=Anton&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Chivo:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Chivo:ital,wght@0,100..900;1,100..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');
:root {
    --primary-color: #2a337e;
    --primary-colorHover: #3c46a7;
    --secondaryColor: #8f8e8e;
    --tertiaryColor: #f1f6f1;
    --offsetColor: #d00200;
    --lightBg: #e9e8e9;
    --font1: "Lexend", sans-serif;
    --font2: "Archivo Black", sans-serif;
    --font3: "Raleway", sans-serif;
    --font4: "Alfa Slab One", serif;
}
html, body {
    height: 100%;
    color: #6c76cf;
}
body {
    display: flex;
    flex-direction: column;
    padding-top: 80px; /* Adjust based on navbar height */
    background: url(../assets/img/bg/colored_bg.webp) !important;
    color: #000;
    min-height: 100vh; /* Ensure the body is at least as tall as the viewport */
}
main {
    flex: 1; /* This allows the main content to grow and fill available space */
}

.footer {
    margin-top: auto; /* Pushes footer to the bottom */
}


/* Custom Element colors */
h1, h2, h3, h4, h5 {
    color: var(--primary-color) !important;
}
.text-justify {
    text-align: justify !important;
}
.custom-htag {
    font-family: var(--font1);
}

.custom-ptag {
    color: var(--primary-color);
}
.hero-font {
    font-family: var(--font2);
    text-shadow: #474747 3px 5px 2px;
}
.hero-font1 {
    font-family: var(--font2);
}
.hero-font2 {
    font-family: var(--font3);
}
.hero-font3 {
    font-family: var(--font4);
}
.footer-font {
    font-family: var(--font2);
}

/* .hero-text {
    text-shadow: -1px -1px 1px rgba(255,255,255,.1), 1px 1px 1px rgba(0,0,0,.5) !important;
} */

/* .custom-text-shadow {
    text-shadow: 3px 3px 5px rgba(255, 255, 255, 1);
} */
.custom-color {
    color: var(--primary-color);
}
.custom-color2 {
    color: var(--primary-colorHover);
}
.custom-color3 {
    color: var(--offsetColor) !important;
}
.custom-border {
    border: 50px solid var(--secondaryColor) !important;
}
.custom-shadow {
    box-shadow: 0px 1px 2px 0px rgba(60, 64, 67, 0.3),
    0px 1px 3px 1px rgba(60, 64, 67, 0.15);
}

.bg-custom {
    background-color: var(--lightBg) !important;
}
.bg-custom2 {
    background-color: var(--primary-color) !important;
}
.bg-custom3 {
    background-color: var(--tertiaryColor);
    overflow-x: hidden; /* Prevent horizontal overflow */
}

.border-custom {
    border-left: 10px solid var(--primary-color) !important;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.colored-bg {
    background: url(../assets/img/bg/colored_bg.webp) !important;
}

.btn-custom {
    background-color: var(--primary-color) !important;
    color: #fff !important;
    transition: 0.3s ease-out;
}
.btn-custom2 {
    background-color: #fff !important;
    color: #000 !important;
    transition: 0.3s ease-out;
}
.btn-custom3 {
    border: 1px solid var(--primary-color) !important;
    color: var(--primary-color) !important;
    transition: 0.3s ease-out;
}
.btn-custom:hover {
    background-color: var(--primary-colorHover) !important;
}
.btn-custom2:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}
.btn-custom3:hover {
    color: #fff !important;
    background-color: var(--primary-color) !important;
}
.text-big {
    font-size: 50px !important;
}
@media(max-width: 991px) {
    .text-big {
        font-size: 35px !important;
    }
}
.text-small {
    font-size: smaller;
}
.text-smaller {
    font-size: x-small;
}


/* Page positioning */
/* Navbar Styles */
.navbar {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    z-index: 1000 !important; /* Ensure whole navbar stays on top */
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;

}
.nav-container {
    margin-left: 200px !important;
    margin-right: 200px !important;
}
@media (max-width: 1395px) { /* For md and sm */
    .nav-container {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}
nav .nav-item a {
    transition: 0.3s ease-out;
    margin-left: 10px !important;
}
nav .nav-item .current-active {
    color: var(--primary-color) !important;
    font-weight: bold;
    text-decoration: underline;
}
nav .nav-item a:hover {
    color: var(--primary-color) !important;
}

.dropdown-menu {
    max-width: 200px;
}
.dropdown-menu li a {
    margin-left: 0 !important;
}


/* Footer styles */
.footer {
    background-color: var(--tertiaryColor) !important;
    padding: 48px;
    z-index: 4;
}
.footer .col-lg-3 {
    margin-bottom: 20px;
}
.footer p {
    margin: 0 !important;
}
.footer li {
    padding: 5px 10px;
    border-radius: 50%;
    transition: 0.3s ease-out;
}
.footer li a {
    transition: 0.3s ease-out;
}
.footer li:hover {
    border-color: var(--primary-color) !important;
}
.footer li:hover a {
    color: var(--primary-color) !important;
}

/* Partner comments section */
.gallery-cell {
    width: 66%;
    max-height: 1000px;
    margin-right: 10px;
    counter-increment: gallery-cell;
}

.gallery-cell .card {
    height: 400px;
    max-height: 1000px;
}

/* Custom Column width */
.custom-col2 {
    width: 13% !important;
}

/* Preloader styles */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; /* Initially on top */
}

.spinner {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid var(--primary-color); /* Blue */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

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

.content {
    visibility: visible; /* Keep content visible */
    opacity: 1; /* Start with opacity 1 */
    transition: opacity 0.5s ease; /* Fade in effect */
}

/* -------------------------------- */
/* ------------Static CSS---------- */
/* -------------------------------- */

/* Inquire page */
.icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px; /* Set a fixed width */
    height: 30px; /* Set a fixed height */
    border-radius: 50%; /* Make it circular */
    background-color: var(--primary-color); /* Use your custom background color */
    margin: 0 auto; /* Center the icon circle */
}

/* index page */
.nav-card {
    transition: 0.3s ease-out;
    cursor: pointer;
}

.nav-card:hover {
    background-color: var(--primary-color) !important;
    color: #fff;
    transform: translateY(-10px);
}

.nav-card:hover p text {
    color: #fff !important;
}

/* Loader Icon */
.loading-gif {
    height: 50px !important;
    width: auto !important;
}

/* Show Modal button */
.bi-question-diamond {
    cursor: pointer;
}
/* Products Side bar */
.sidebar {
    position: fixed;
    top: 100px;
    width: 250px;
    height: 100%;
    padding-top: 30px;
    background: #ececec;
    transition: left 0.3s ease;
    z-index: 3;
}
.sidebar li, .sidebar a {
    cursor: pointer;
    transition: 0.3s ease-out;
}
.toggle-btn {
    position: absolute;
    top: 20px;
    right: -40px; /* Offset the button */
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 10px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease;
}
.toggle-btn:hover {
    background: var(--primary-colorHover);
}
.sidebar .active-page {
    color: var(--primary-color) !important;
    font-weight: 400 !important;
}

@media (max-width: 1621px) {
    .toggle-btn {
        display: block;
    }
    .sidebar {
        left: -250px; /* Ensure it's hidden off-screen */
        z-index: 5;
    }
    .sidebar.active {
        left: 0; /* Show sidebar */
    }
}
@media (min-width: 1622px) {
    .sidebar {
        left: 0; /* Show sidebar */
    }
    .toggle-btn {
        display: none; /* Hide toggle button on larger screens */
    }
}

/* HR admin page */
.nav-tab .active {
    background-color: var(--primary-color);
    color: #fff;
}

.nav-tab a:hover {
    background-color: var(--primary-colorHover);
    color: #fff;
}



/* Page indicator styles*/
.indicator {
    position: fixed;
    bottom: 10px; /* Distance from the bottom */
    left: 10px; /* Distance from the left */
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
    color: white;
    border-radius: 5px; /* Rounded corners */
    font-size: 20px; /* Adjust text size */
    z-index: 9999; /* Ensure it's above other content */
}