@media (max-width: 1199px) {
    .user-login {
        margin-top: 1rem;
    }
}
@media (min-width: 1200px) {
    .user-login {
        margin-top: 0;
    }
}

.fieldCategory {
    background-color: transparent; /* Default background */
    transition: background-color 0.3s ease; /* Smooth transition */
}

.fieldCategory:hover {
    background-color: greenyellow; /* Default background */
    opacity: 30%;
}

.owl-carousel {
    overflow: visible; /* Allow horizontal scrolling */
}

.owlimage {
    height: 350px; /* Fixed height */
    width: auto; /* Keep aspect ratio */
    max-width: none; /* Prevent automatic resizing */
    display: block;
}

.owl-stage-outer {
    overflow: visible !important; /* Allow content overflow */
}

.owl-item {
    width: auto !important; /* Prevent automatic scaling */
}

main {
    overflow-x: scroll;
}

/*.owl-carousel .owl-stage {*/
/*    display: flex;*/
/*    transition: transform linear 30s; !* Control scrolling speed *!*/
/*    will-change: transform;*/
/*}*/

/*.owl-carousel .owl-item {*/
/*    flex-shrink: 0; !* Prevent resizing *!*/
/*}*/

#loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    opacity: 1;
    transition: opacity 2s linear;
    z-index: 9999;
}

#logo {
    animation-name: logo-scale;
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-iteration-count: initial;
}

.carousel-image {
    animation-name: carousel-scale;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

.carousel-image-mobile {
    animation-name: carousel-scale-mobile;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes logo-scale {
    0% {
        transform: scale(0.7);
    }
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(0.7);
    }
}

@keyframes carousel-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes carousel-scale-mobile {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.4);
    }
    100% {
        transform: scale(1);
    }
}

.nav-link {
    font-size: large!important;
}

.nav-link:hover {
    background-color: greenyellow;
}


.navbar-toggler {
    box-shadow: 0 0 10px #bdbdbd!important;
}

.category-zone:hover {
    border: 0.5rem solid chartreuse !important;
}

@media screen and (min-width: 1400px) {
    .category-zone {
        width: 35rem!important;
    }
}

#category-1 #category-2 {
    display: block;
    width: 100%;
    height: 100%;
    transition: filter 0.5s ease;
}
#category-1:hover, #category-2:hover {
    filter: brightness(50%);
}

.category-name:hover {
    color: coral!important;
    background-color: antiquewhite;
    font-size: 1.1rem!important;
}

.image-container {
    position: relative;
    display: inline-block;
}

.image-container::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    pointer-events: none;
}

.text-overlay {
    position: absolute;
    z-index: 100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    pointer-events: none;
}

.category-title {
    animation-name: scale;
    animation-duration: 6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

@keyframes scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

.intro-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    opacity: 0.5;
    pointer-events: none; /* Allows the text to be selectable */
}

.intro-content {
    position: relative;
    z-index: 5;
}


.service-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1));
    opacity: 0.7;
    pointer-events: none; /* Allows the text to be selectable */
}

.service-content {
    position: relative;
    z-index: 5;
}

.paginationButton:hover {
    color: red;!important;
}