@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: radial-gradient(circle, rgba(255, 255, 255, 0.925), rgba(194, 194, 255, 0.7)), #ffffff;
    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;
}

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

/*#loading-screen {*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    height: 100vh;*/
/*    width: 100vw;*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    background: linear-gradient(-45deg, #4b7877, #ffffff, #5b747f, #c8d9ff);*/
/*    background-size: 400% 400%;*/
/*    animation: gradient-bg 5s ease infinite;*/
/*    opacity: 1;*/
/*    transition: opacity 1s ease-out;*/
/*    z-index: 9999;*/
/*}*/

/*#logo {*/
/*    width: 150px;*/
/*    animation: glow 1s ease-in-out infinite alternate, scale-to-fullscreen 5s ease-out forwards;*/
/*    position: relative;*/
/*    z-index: 2;*/
/*}*/

/*!* Gradient background animation *!*/
/*@keyframes gradient-bg {*/
/*    0% { background-position: 0% 50%; }*/
/*    50% { background-position: 100% 50%; }*/
/*    100% { background-position: 0% 50%; }*/
/*}*/

/*!* Glowing effect for logo *!*/
/*@keyframes glow {*/
/*    from {*/
/*        filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.537));*/
/*    }*/
/*    to {*/
/*        filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.909));*/
/*    }*/
/*}*/

/*!* Scale logo from small to fullscreen *!*/
/*@keyframes scale-to-fullscreen {*/
/*    0% {*/
/*        transform: scale(0.3);*/
/*    }*/
/*    100% {*/
/*        width: 100vw;*/
/*        height: 100vh;*/
/*        object-fit: contain;*/
/*    }*/
/*}*/

/*!* Ripple effect behind logo *!*/
/*#logo::before {*/
/*    content: '';*/
/*    position: absolute;*/
/*    width: 150px;*/
/*    height: 150px;*/
/*    background: radial-gradient(circle, rgba(255, 255, 255, 0.833) 0%, transparent 70%);*/
/*    border-radius: 50%;*/
/*    top: 50%;*/
/*    left: 50%;*/
/*    transform: translate(-50%, -50%);*/
/*    animation: ripple 3s ease-out infinite;*/
/*    z-index: 1;*/
/*}*/

/*@keyframes ripple {*/
/*    0% {*/
/*        transform: translate(-50%, -50%) scale(0);*/
/*        opacity: 0.6;*/
/*    }*/
/*    100% {*/
/*        transform: translate(-50%, -50%) scale(10);*/
/*        opacity: 0;*/
/*    }*/
/*}*/








.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 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;
}

.boldtext {
    font-family: 'Chonburi', serif!important;
    font-weight: 400;
    font-style: normal;
    font-size: 2rem;
}

.saira-condensed-thin {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.saira-condensed-extralight {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.saira-condensed-light {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.saira-condensed-regular {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.saira-condensed-medium {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.saira-condensed-semibold {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.saira-condensed-bold {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.saira-condensed-extrabold {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.saira-condensed-black {
    font-family: "Saira Condensed", sans-serif;
    font-weight: 900;
    font-style: normal;
}


.container {
    max-width: 960px;
    margin: 2rem auto;
    background: white;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.job {
    margin-bottom: 2rem;
}
.job h2 {
    color: #00796b;
}
ul {
    padding-left: 1.2rem;
}
button {
    background-color: #00796b;
    color: white;
    border: none;
    padding: 0.6rem 1.2rem;
    font-size: 1rem;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #004d40;
}
#formSection {
    display: none;
    margin-top: 2rem;
}
input, textarea {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    margin-bottom: 1rem;
    border-radius: 4px;
    border: 1px solid #ccc;
}