.navbar-custom {
    opacity: 0.8 !important;
    /* Adjust opacity here */
    /* color: #b65c5c !important; */
    background-color: #ffffff !important;
}

.bg-outline-dark {
    outline: 1px solid #9b9b9b !important;
    /* Adjust thickness and color as needed */
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: #1e2125 !important;
    background-color: #e7bc91 !important;
}

.btn-outline-primary:hover {
    color: #FFFFFF !important;
    background: #a47148 !important;
    border-color: #a47148 !important;
}

.btn-primary:hover {
    color: #FFFFFF;
    background: #a47148 !important;
    border-color: #a47148 !important;
}

.owl-carousel-inner.owl-carousel-white {
    background: rgba(123, 123, 123, 0.5) !important;
}

/* Top Outline */
.bg-outline-dark {
    outline: 1px solid rgb(87, 86, 86)8 !important;
    /* Adjust thickness and color as needed */
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: #a47148 !important;
}

.section-title {
    color: #b78d65;
    font-weight: 800 !important;
    letter-spacing: 5px;
    text-transform: uppercase;
    /* font-size: 2.5rem !important; */
}

.custom-title {
    color: #463f3a !important;
    font-weight: 800 !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    /* font-size: 2.5rem !important; */
}

.custom-text {
    color: #463f3a !important;
    font-weight: 500 !important;
    letter-spacing: 2px !important;
    /* font-size: 2.5rem !important; */
}

.justify {
    text-align: justify !important;
}

.text-custom {
    color: #B78D65 !important;
    letter-spacing: 2px;
}

.text-primary {
    color: #B78D65 !important
}

.text-light-2 {
    color: #d5bdaf !important;
}

.text-dark-2 {
    color: #463f3a !important;
}

html {
    scroll-behavior: smooth;
}

.img-fluid {
    max-width: 100% !important;
    /* Ensures image scales properly */
    height: auto !important;
    /* Maintains aspect ratio */
}

.img-square {
    width: 100%;
    padding-bottom: 100%;
    /* This makes the height equal to the width */
    position: relative;
}

.img-square img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* This ensures the image covers the container without distortion */
}

.ratio-3x4 {
    --bs-aspect-ratio: calc(3 / 4 * 125%);
}

.highlight {
    background-color: yellow;
}

/* For Carousel Img
.c-item {
    height: 700px !important;
}

.carousel-img {
    height: 100%;
    object-fit: cover;
} */

/* Navbar XS View */
@media (max-width: 515px) {
    .navbar-brand h1 {
        font-size: 1.5rem;
    }

    .navbar-nav {
        margin: 0 auto;
        /* Center the nav items */
    }

    .navbar-toggler-icon {
        width: 1.5rem;
        /* Adjust width of the icon */
        height: 1.5rem;
        /* Adjust height of the icon */
    }
}

/* Navbar XSS View */
@media (max-width: 432px) {
    .navbar-brand h1 {
        font-size: 1.25rem;
    }

    .navbar-nav {
        margin: 0 auto;
        /* Center the nav items */
    }

    .navbar-toggler-icon {
        width: 1.5rem;
        /* Adjust width of the icon */
        height: 1.5rem;
        /* Adjust height of the icon */
    }
}

/* Navbar XSS View */
@media (max-width: 375px) {
    .navbar-brand h1 {
        font-size: 19px;
    }

    .navbar-nav {
        margin: 0 auto;
        /* Center the nav items */
    }

    .navbar-toggler-icon {
        width: 1.25rem;
        /* Adjust width of the icon */
        height: 1.25rem;
        /* Adjust height of the icon */
    }
}

div:where(.swal2-container) .swal2-html-container {
    margin-top: 10px !important;
    font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
    font-size: 1.2rem !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: #777 !important;
}

.navbar-img {
    position: relative;
    width: auto;
    height: 65px;
    margin-left: 5px;
    background-size: cover;
    background-repeat: no-repeat;
}

.c-item {
    height: 600px !important;
}

.c-img {
    height: 100% !important;
    object-fit: cover !important;
}

.custom-height-article {
    height: 210px !important;
}

/* Mobile Active Effect */
@media (max-width: 767px) {

    /* Adjust according to your needs */
    .service-item:active .service-text {
        background: #ffffff;
        color: #000000;
        /* Optional: uncomment if you want text color to change */
        border: #6f4518 1px solid;
        width: fit-content;

    }
}

.trademark {
    font-size: 25px !important;
    /* Adjust the size as needed */
    vertical-align: super !important;
    /* Position the symbol correctly */
}

.title-custom {
    letter-spacing: 1px !important;
}

a.quiz-link {
    position: relative;
    color: #B78D65;
    text-decoration: none;
    font-weight: bold;
    background-color: transparent;
    /* No background initially */
    transition: background-color 0.3s ease-in-out, color 0.3s ease-in-out;
}

.bold {
    font-weight: bold !important;
}

/* Initial underline effect with background color */
a.quiz-link::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background-color: #B78D65;
    /* Underline color */
    transition: transform 0.3s ease-in-out;
}

/* Hover effect: Highlight the entire text background */
a.quiz-link:hover {
    background-color: #B78D65;
    /* Background color on hover */
    color: white;
    /* Ensure the text color is still readable */
}

/* Retract the underline on hover */
a.quiz-link:hover::before {
    transform: scaleX(0);
    /* Retracts the underline */
    transform-origin: right;
}

.italic {
    font-style: italic;
}

.swal2-popup {
    font-family: 'Open Sans', sans-serif !important;
    /* Customize font */
}

.custom-spacing {
    letter-spacing: 1px !important;
    line-height: 1.5 !important;
}



/* For Extra Small Devices (Phones, less than 576px) */
@media (min-width: 363px) and (max-width: 575px) {
    .title-custom {
        padding-top: 4.5rem !important;
        font-size: 1.2rem;
        /* Smaller font size for mobile */
    }

    .bg-light {
        padding: 1rem;
        /* Reduce padding on smaller screens */
    }

    .custom-height {
        height: 235px !important;
    }
}

/* For Small Devices (Tablets, 576px to 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .title-custom {
        font-size: 1.5rem;
        padding-top: 6rem !important;
    }

    .bg-light {
        padding: 1.5rem;
    }

    .custom-height {
        height: 230px !important;
    }
}

/* For Medium Devices (768px to 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .title-custom {
        font-size: 1.8rem;
        padding-top: 4rem !important;
    }

    .bg-light {
        padding: 2rem;
    }

    .custom-height {
        height: 220px !important;
    }
}

/* For Large Devices (992px and above) */
@media (min-width: 992px) and (max-width: 1199px) {
    .title-custom {
        font-size: 3rem;
        /* Larger font size for large screens */
        padding-top: 2rem !important;
    }

    .bg-light {
        padding: 2.5rem;
        /* Increase padding on larger screens */
    }

    .custom-height {
        height: 300px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .title-custom {
        font-size: 3rem;
        /* Larger font size for large screens */
        padding-top: 2rem !important;
    }

    .bg-light {
        padding: 2.5rem;
        /* Increase padding on larger screens */
    }

    .custom-height {
        height: 285px !important;
    }
}

@media (min-width: 1400px) {
    .title-custom {
        font-size: 3rem;
        /* Larger font size for large screens */
        padding-top: 4rem !important;
    }

    .bg-light {
        padding: 3rem;
        /* Increase padding on larger screens */
    }

    .custom-height {
        height: 265px !important;
    }
}

/* For large screens (992px and above), add side margins to the columns */
@media (min-width: 992px) and (max-width: 1199px) {
    .custom-col {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/* Optionally, adjust margin for medium screens if needed */
@media (min-width: 768px) and (max-width: 991px) {
    .custom-col {
        margin-left: 10px;
        margin-right: 10px;
    }
}

.fact-item:hover {
    border-color: #d4a373 !important;
    /* Change border color on hover */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2) !important;
}

.fact-item {
    background: white !important;
    border: #252525 solid 1px !important;
}

/* .nav-img {
    position: relative !important;
    width: max-content !important;
    min-width: 220px !important;
    height: 100px !important;
    margin-left: 5px !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand img {
        max-height: 90px !important;
    }
}
@media (max-width: 348px) {
    .navbar .navbar-brand img {
        position: relative !important;
        width: max-content !important;
        min-width: 150px !important;
        height: 50px !important;
    }
} */

.nav-img {
    position: relative !important;
    width: 100% !important; /* Ensure the image doesn't overflow */
    max-width: 220px !important; /* Add a maximum width */
    height: 100px !important;
    margin-left: 5px !important;
    object-fit: contain !important; /* Make sure the image fits within its container */
    background-repeat: no-repeat !important;
}

@media (max-width: 991.98px) {
    .navbar .navbar-brand img {
        width: 100% !important; /* Ensure image scales responsively */
        max-width: 150px !important; /* Reduce size for smaller screens */
        max-height: 90px !important;
        object-fit: contain !important; /* Prevents overflow */
    }
}

@media (max-width: 360px) {
    .navbar .navbar-brand img {
        position: relative !important;
        width: 100% !important; /* Ensure it scales */
        max-width: 150px !important; /* Keep size smaller for narrow screens */
        height: 50px !important;
        object-fit: contain !important;
    }
}

/* Optional: Adjust padding or overflow for the navbar container */
.navbar-collapse {
    min-height: 50px;
    overflow: hidden; /* Prevent overflow issues in Safari */
}

/* Ensure that the image container itself does not overflow */
.navbar-brand {
    overflow: hidden;
    max-width: 100%; /* Keep the container from being too wide */
}