/* Banner Section */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.banner {
    /* Remove background image since <img> is used in HTML */
    background: none;
    position: relative;
    /* Needed for absolutely positioned img */
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    animation: fadeIn 1s ease-out;
    overflow: hidden;
    /* Prevents image overflow */
}

.banner img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    left: 0;
    top: 0;
    z-index: 0;
    pointer-events: none;
    object-position: bottom;
    /* This centers the image like background-position: center */
}

.banner h1 {
    position: relative;
    z-index: 1;
    font-size: 42px;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.start-section {
    margin-top: 6rem;
}

/* animation css */
.main-section {
    /* opacity: 0; */
    /* transform: translateY(0px) scale(0) !important; */
    /* animation: fadeInScaleUp 1s ease-out forwards, fadeInScaleUp 2s ease-in-out backwards; */
    background-image: url(../assets/images/logofade.avif);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    /* Prevents stretching */
}

/* Optional: Media Query for smaller devices */
@media (max-width: 768px) {
    .main-section {
        background-size: 100% !important;
        /* Smaller image on small screens */

        /* Adjust position for mobile */
    }


}




@keyframes fadeInScaleUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes fadeInBg {
    from {
        background-size: 40% 70%;
        /* Start smaller */
        opacity: 0;
    }

    to {
        background-size: 54% 86%;
        /* Final size */
        opacity: 1;
    }
}

/* border-bottom */
.head-title {
    position: relative;
    display: inline-block;
    /* Ensures the border is only as wide as the text */
    padding-bottom: 5px;
    /* Adds spacing */
    color: #000000 !important;
    margin-bottom: 13px;
}

.head-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 66%;
    height: 3px;
    background-color: var(--primary-color);

}

.description {
    color: black;
}