/* Existing styles */

body,
html {
    height: 100%;
    margin: 0;
    overflow-x: hidden;
}

.parallax {
    background-image: url('../img/IMG20240317131844.jpg');
    height: 100%;
    background-attachment: fixed;
    background-position: center top;
    /* Adjust to move only up and down */
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax2 {
    background-image: url('../img/aswiftfix.png');
    height: 100%;
    background-attachment: fixed;
    background-position: center top;
    /* Adjust to move only up and down */
    background-repeat: no-repeat;
    background-size: cover;
}

.parallax3 {
    background-image: url('../img/1.jpg');
    height: 100%;
    background-attachment: fixed;
    background-position: center top;
    /* Adjust to move only up and down */
    background-repeat: no-repeat;
    background-size: cover;
}

.content {
    height: 75px;
    background-color: #f4f10e;
    padding: 20px;
    text-align: center;
}

.newsome {
    height: 150px;
    background-color: #f4f10e;
    text-align: center;
}

#floatingImage {
    pointer-events: none;
    /* Makes the element non-interactive */
}

/* New styles */

.welcome-banner {
    position: -webkit-sticky;
    /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Ensures it stays above other content */
    background-color: #f4f10e;
    /* Branding color */
    padding: 10px;
    /* Adjust as needed */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Optional: adds a slight shadow */
    color: #000;
    /* Ensure text is readable */
    text-align: center;
    /* Center the text */
    font-weight: bold;
    /* Bold text */
    font-size: 1.2em;
    /* Slightly larger text */
}

#introduction,
#services,
#process,
#benefits,
#testimonials,
#cta {
    padding: 20px;
    text-align: center;
    margin: 20px 0;
    background-color: #f4f10e;
    /* Branding color */
}

#services ul,
#benefits ul,
#process ol {
    list-style: none;
    padding: 0;
}

#services li,
#benefits li,
#process li {
    margin: 10px 0;
}

#cta button {
    margin: 10px;
    padding: 10px 20px;
    background-color: #d9dadb;
    /* Branding color */
    border: none;
    cursor: pointer;
    color: #000; /* Ensure text is readable */
    border-radius: 5px; /* Rounded corners */   
}

/* Responsive design */

@media only screen and (max-width: 600px) {
    .welcome-banner {
        font-size: 14px;
        padding: 5px;
    }

    #introduction,
    #services,
    #process,
    #benefits,
    #testimonials,
    #cta {
        padding: 10px;
        margin: 10px 0;
    }

    #cta button {
        width: 100%;
        margin: 5px 0;
        padding: 10px;
    }

    .parallax,
    .parallax2,
    .parallax3 {
        background-attachment: scroll;
        /* Disable parallax effect on mobile for better performance */
    }
}