html {
    scroll-behavior: smooth;
}

.scroll-to-top-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: none; /* Initially hide the button */
    background-color: white; /* Set the background color to white */
    color: #333; /* Set the text color */
    border: none; /* Remove the border */
    border-radius: 50%; /* Make it circular */
    width: 50px; /* Adjust the width to your preference */
    height: 50px; /* Adjust the height to your preference */
    font-size: 24px; /* Adjust the font size */
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-to-top-button:hover {
    background-color: #333; /* Change background color on hover */
    color: white; /* Change text color on hover */
}


        /* Add custom styles for sections */
        .section {
            min-height: 100vh;
            background-size: cover;
            background-attachment: fixed; /* Enable parallax effect */
            background-position: center;
            color: #fff;
            position: relative;
            display: flex;
            justify-content: center; /* Center horizontally */
            align-items: center; /* Center vertically */
            text-align: center; /* Center text within the section */
        }
        .section::before {
            content: "";
            background: rgba(0, 0, 0, 0.6); /* Dimming effect */
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        .section h2 {
            font-size: 2.5rem;
            opacity: 0; /* Initial text opacity */
            transform: translateY(20px); /* Initial text position */
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        .section p {
            font-size: 1.25rem;
            opacity: 0; /* Initial text opacity */
            transform: translateY(20px); /* Initial text position */
            transition: opacity 0.5s ease, transform 0.5s ease;
        }
        /* Add custom class for elements without fade-in effect */
        .no-fade-in {
            opacity: 1 !important; /* Override the opacity to make them always visible */
            transform: translateY(0) !important; /* Override the transform to keep them in their position */
        }