/* General Parallax Styling */
.bgimg-1,
.bgimg-2,
.bgimg-3 {
    position: relative;
    opacity: 0.85;
    /* Adjust transparency for better readability */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Parallax Effect for Desktop */
@media (min-width: 100px) {

    .bgimg-1,
    .bgimg-2,
    .bgimg-3 {
        background-attachment: fixed;
    }
}



/* Specific Background Images */
.bgimg-1 {
    background-image: url('/static/landing/images/cover.webp');
    min-height: 100vh;
    /* Full viewport height */
    transition: background-image 1s ease-in-out;

    margin-top: -75px;

}

/* Dark mode background */
.dark-mode .bgimg-1 {
    background-image: url('/static/landing/images/cover-dark.webp');
}


.bgimg-2 {
    background-image: url('/static/landing/images/under-cover.avif');
    min-height: 600px;
}

.bgimg-3 {
    background-image: url('/static/landing/images/bg-3.avif');
    min-height: 600px;
}

/* General Styling */
body,
html {
    height: 100%;
    margin: 0;
    font: 400 15px / 1.8 "Lato", sans-serif;
    color: #777;
}

.content-1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: start;
    color: white;
}

.content-1 h1 {
    font-size: 3em;
    font-weight: 1000;
    margin-top: 0;
    margin-bottom: 0.5em;
    color: rgb(251, 255, 0);

}

.content-1 p {
    font-size: 1.5em;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 0;
    color: rgb(251, 255, 0);
}

.carousel-item {
    position: relative;
}

.carousel-item:hover .carousel-caption-title {
    opacity: 1 !important;
    animation: fadeDown 2s ease-in-out;
}

.carousel-caption-title {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

@keyframes fadeDown {
    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.carousel-item:hover .carousel-caption-description {
    opacity: 1 !important;
    animation: fadeUp 2s ease-in-out;
}

.carousel-caption-description {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

@keyframes fadeUp {
    0% {
        transform: translateY(20px);
        opacity: 0;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

body {
    overflow-x: hidden;
}

.carousel-item {
    position: relative;
}

.carousel-item:hover .carousel-caption-container {
    opacity: 1 !important;
}

.carousel-caption-container {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

@media (max-width: 768px) {
    .content-1 {
        padding: 8vh 5%;
    }

    .content-1 h1 {
        font-size: 2.2rem;
        /* Adjust title size */
    }

    .content-1 p {
        font-size: 1.2rem;
        /* Adjust subtitle size */
    }
}

@media (max-width: 480px) {
    .content-1 h1 {
        font-size: 1.8rem;
    }

    .content-1 p {
        font-size: 1rem;
    }
}

#draggable-image {
    width: 200px;
    position: fixed;
    /* Keeps it above other elements */
    top: 50px;
    left: 50px;
    cursor: grab;
    z-index: 9999;
    /* Ensures it's always on top */
    user-select: none;
    /* Prevents accidental text selection */
}