html{
    margin: 0;
    padding: 0;

    width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
    
}

body{
    background-color: rgba(204, 237, 255, 1);
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.service-bar{
    margin-top: 90px;
    margin-bottom: 50px;

    background-image: url('assets\\service-page\\service-bar-bg.png');
    background-size: cover;

    height: 13rem;
    width: 100vw;

    display: flex;
    justify-content: center;
    align-items: center;
}

.service-bar h1{
    font-family: 'Syne';
    font-size: 3rem;

    color: rgb(255, 255, 255);
}

.about-service-container{
    width: 100vw;
    display: flex;

    justify-content: center;
    align-items: center;
}

.about-service-section{
    box-sizing: border-box;

    height: fit-content;
    width: 95vw;
    padding: 2rem;

    background-image: url('assets\\service-page\\service-desc-bg.png');
    background-size: cover;
}

.about-service-section h1{
    font-family: 'Syne';
    font-size: 2.2rem;
    font-weight: 500;

    letter-spacing: 0.8rem;
    
    color: aliceblue;

}

#line-1{
    width: 30rem;

    margin-top: -1rem;
    margin-left: 0;
}

.about-service-section p{
    font-family: "Roboto";
    font-size: 1rem;

    width: 70%;

    color: white;
    font-weight: 500;

    letter-spacing: 2px;
    margin-bottom: 6rem;
}

#line-2{
    margin-left: 0;
    width: 75%;
}

#line-3{
    margin-top: 1rem;
    margin-left: 0;
    width: 50%;
}

@media only screen and (max-width: 768px) {
    
    html{
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .service-bar{
        margin-top: 15vw;
        margin-bottom: 10px;

        height: 7rem;
    }
    .service-bar h1{
        font-size: 3rem;
    }

    .about-service-section h1{
        font-size: 2rem;
        letter-spacing: 0.3rem;

    }

    .about-service-section p{
        font-size: 1rem;
        width: 100%;
        font-weight: 300;
        margin-bottom: 2rem;
    }
}

/* ============ OBJECTIVES ==================== */

.customer-assurance{
    box-sizing: border-box;
    position: relative;
    background-image: url("assets\\service-page\\objectives-bg.svg");
    background-size: cover;
    

    min-height: 300px;

    margin: 50px;
    padding: 30px;

    font-family: 'Roboto Condensed';
    font-style: italic;
    color: white;
}


#penta-icon{

    background-image: radial-gradient(white , 40%, transparent, transparent);
    height: 120px;
    padding: 10px;

    position: absolute;
    right: 2vw;
    bottom: 11%;
}


.customer-assurance h1{
    font-size: 2rem;
}

.customer-assurance li{
    font-size: 1.5rem;
}

@media only screen and (max-width: 768px) {
    .customer-assurance {
        height: calc(16rem + 200px);
    }

    .customer-assurance h1{
        font-size: 2rem;
    }

    .customer-assurance li{
        font-size: 1rem;
        font-weight: 400;
    }
    
}



/* ----------------  services section --------------------------- */

.services-section{
    margin-top: 200px;
    position: relative;
    background-color: rgba(231, 251, 255, 1);
    padding: 60px;
}

.header-container{
    position: absolute;
    top: -6rem;
    width: 100vw;

    display: flex;
    justify-content: center;
}

.services-section h1{
    height: 2rem;
    padding-left: 6rem;
    padding-bottom: 3rem;
    padding-right: 12rem;
    background-image: url("assets\\service-page\\service-bg-svg.svg");
    background-size: cover;

    font-family: "Syne";
    font-size: 2.5rem;;
}

#services-hr-1{


    border: 2px solid rgba(221, 221, 221, 1);
    background-color: rgba(221, 221, 221, 1);
    
    width: 80%;
    margin-right: 0%;
    color: rgba(221, 221, 221, 1);
    
}


#services-hr-2{

    border: 2px solid rgba(221, 221, 221, 1);
    background-color: rgba(221, 221, 221, 1);
    
    margin-top: 1rem;
    width: 70%;
    margin-right: 60%;
    color: rgba(221, 221, 221, 1);
}

.services-section .img-bg{
    z-index: 1;
}


.services-section ul{
    font-family: 'Roboto Condensed';
    font-size: 1rem;
    margin-left: 3rem;

    width: 80%;

    z-index: 3;
}

.services-section h2{
    font-family: 'Syne';
    color: rgba(0, 89, 191, 1);
    font-size: 2rem;

    z-index: 3;
}

#img-container-1{
    margin-top: 100px;
    margin: 1rem;

    position: relative;
    background: white; /* White background */
    padding: 40px; /* Creates spacing around the image */
    border-radius: 35%;
    
    rotate: 50deg;
    
    margin-right: 3%;
    float: right;

}

#s33-spindle{
    height: 200px;
    border-radius: 70px;

    rotate: -50deg;
}

#img-container-2{

    position: relative;
    background: white; /* White background */
    padding: 30px; /* Creates spacing around the image */
    border-radius: 35%;
    
    rotate: 50deg;
    
    margin-right: 10%;
    margin: 2rem;
    float: right;

}

#spindle-worker{
    height: 200PX;
    rotate: -50deg;
    border-radius: 70px;
}

#shaft-container{
    position: absolute;

    right: -3%;
    bottom: 3vw;

    rotate: 55deg;
    z-index: 1;
}

#spindle-shaft{
    height: 30vw;
}

#lol-bg{
    position: absolute;
    height: 13vw;
    width: 15vw;

    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;

    border-top-right-radius: 40%;
    border-bottom-right-radius: 30%;

    background-color: rgb(255, 255, 255);
    z-index: -1;

    bottom: 30%;
    right: 0%;
}

#custom-services-title{
    
    width: 100vw;
    text-align: center;

    font-size: 3rem;
    font-family: 'Syne';
}

.custom-services{
    background-color: rgba(231, 251, 255, 1);   
    font-family: 'Syne';
    font-weight: 600;

    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 2rem;
    color: rgba(0, 89, 191, 1);

    padding: 3rem;

    font-size: 1.2rem;
}


@media only screen and (max-width: 768px) {
    
    .services-section{
        margin-top: 100px;
        padding: 1rem;
        padding-top: 2rem;

        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .header-container{
        top: -15vw;
    }

    

    .header-container h1{
        height: 10vw;
        font-size: 10vw;
        padding: 0 2rem;
    }

    #img-container-2{
        padding: 2vw;
    }

    #spindle-worker{
        height: 40vw;
    }

    #img-container-1{
        margin-top: 3rem;
        padding: 2vw;
        max-width: 45vw;

        background-color: rgb(255, 255, 255);
        float: right;


    }   

    #services-hr-1{
        border: 1px solid rgba(221, 221, 221, 1);
    }

    
    #services-hr-2{
        margin-top: 5px;
        border: 1px solid rgba(221, 221, 221, 1);
    }



    #s33-spindle{
        height: 40vw;
    }

    #shaft-container{
        visibility: hidden;
    }

    .services-section h2{
        font-size: 2rem;
    }

    .services-section ul{
        font-size: 1rem;
    }

    #custom-services-title{
        font-size: 8vw;
    }

    .custom-services{
        font-size: 1rem;
        line-height: 2rem;
        font-weight: 400;
    }

    


}


/* --------- services button selection - --------- */

#services{
    padding: 1vw;
    background-color: rgb(243, 157, 28);
    color: white;

    border-radius: 2vw;
}

/* Footer Styles */
footer {
    background-color: #222; /* Dark background for contrast */
    padding: 20px 0; /* Adds space inside the footer */
    text-align: center; /* Centers text */
    color: #ddd; /* Light gray text color */
    font-family: "Roboto", sans-serif;
}

footer p {
    font-size: 16px; /* Adjusts font size */
    margin: 10px 0; /* Adds spacing above and below */
}

/* If the footer content needs to be fully centered */
.footer-container {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers horizontally */
    justify-content: center; /* Centers vertically */
}