*{
    font-family: "DM Sans", sans-serif;
}
.first_section{
    background: 
    linear-gradient(  rgba(0, 15, 34, 0.8), rgba(0, 15, 34, 0.8)), 
    url("../images/background-image1-our_services.png");
}

.first_subsection{
    margin-top: 200px;
    position:absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}
.third_section{
    background: 
    linear-gradient(  rgba(0, 15, 34, 0.8), rgba(0, 15, 34, 0.8)), 
    url("../images/background-image2-our_services.png");
}
.fifth_section{
    background: 
    linear-gradient(  rgba(0, 15, 34, 0.8), rgba(0, 15, 34, 0.8)), 
    url("../images/background-image3-our_services.png");
}
.sixth_section{
    background: 
    linear-gradient(  rgba(0, 15, 34, 0.8), rgba(0, 15, 34, 0.8)), 
    url("../images/background-image4-our_services.png");
}
.first_section,.third_section,.fifth_section,.sixth_section{
    margin: 0 auto;
    height: 400px;
    width:auto;
    background-size: cover;
    background-repeat: no-repeat;
}

.container h2 {
    padding-top: 150px;
    font-weight: 500;
    font-size: 42px;
    margin: 0px;
    color: #FFFFFF;
}
.services{
    margin: 70px auto;
    display: flex;
    gap: 15px; /* Space between service items */
    justify-content: center; /* Center all service items horizontally */

}
.service{

    display: inline-block;
    width: 400px;
    height: 358px;
    text-align: left;
    background-color:#2E436A;
    border-radius: 15px;
    margin-left: 15px;
    transition: transform 0.3s ease, background-color 0.3s ease; /* Smooth transition for movement and color change */
    box-sizing: border-box; /* Ensure padding and borders are included in the element's total width and height */
}

.service:hover {
    transform: translateY(-20px); /* Move the service 20px up on hover */
    background-color: #FF5722; /* Change the color to orange */
    cursor: pointer; /* Show a pointer to indicate it's clickable */
}

.service img{
    /*padding: 60px 0 0 22px;*/
    display: block;
    margin: 0 auto; /* Center image within service */
    padding-top: 20px; /* Space between top of the service box and image */
}

.service:first-child {
    /* No special opacity or background color change needed here */
}
/*
.service:first-child{
    background-color:#FF5722;
    opacity: 80%;
}
*/

.service h4{
    padding: 22px 0 0 22px;
    font-size: 20px;
    font-weight: 500;
}

.service p{
    font-size: 16px;
    padding: 22px;
    font-weight: 400;
}
.service_info_section ul{
    display: inline-block;
}
.service_info_section li{
    list-style-type: disc;
    cursor: auto;
}
.service_info_section{
    margin: 70px auto;
}
.service_info{
    display: flex;
    margin: 0 auto;
    width: 1240px;
    text-align: left;
    justify-content: space-around;
    background-color:#2E436A;

}
.service_info img{
    width: 620px;
}
.service_info{
    align-items: center;
}
.service_info p{
    margin-top: 20px;
    padding: 0 30px;
}
h5{
    font-weight: 500;
    font-size: 32px;
    color:#FF5722;
}

h3{
    font-size: 44px;
}

.last_section button{
    margin-top: 10px;
    width: 295px;
}

.alert {
    padding: 10px;
    margin: 15px 0;
    border: 1px solid green;
    background-color: #f2fff2;
    color: green;
}

#test_button_id{
    background-color: #ffffff;
    color: #FF5722;
    border: 1px solid #FF5722;
    font-weight: 550; /* Medium bold */
}

.container-wrapper {
    display: flex; /* Enable flexbox layout */
    justify-content: space-between; /* Add space between the containers */
    align-items: flex-start; /* Align containers at the top */
    gap: 20px; /* Space between the containers */
    margin: 0 auto; /* Center the wrapper horizontally */
    width: 100%; /* Ensure it spans the available width */
    max-width: 1200px; /* Optional: Restrict maximum width for layout */
    padding: 20px; /* Optional: Add some padding */
    box-sizing: border-box; /* Include padding in width calculations */
}

#api-key {

    width: 64ch;
}