/*******************************************************************************************************************/
/************************************************   about   ********************************************************/
/*******************************************************************************************************************/

.about {
    padding-block: 40px;
    background-image: url("../images/about_bg.png");
    background-size: cover;
    background-position: bottom center;
    min-height: 600px;
}

.about .right .subtitle {
    font-weight: 400;
    font-size: 18px;
    color: var(--blue-color);
}

.about .right .title {
    font-weight: 700;
    font-size: 30px;
    color: #050505;
}

.about .right .description {
    font-weight: 400;
    font-size: 20px;
    color: #7B7B7B;
    line-height: 2;
}

.about .left img {
    max-width: 400px;
}

/*******************************************************************************************************************/
/*********************************************   services   ********************************************************/
/*******************************************************************************************************************/
.services {
    padding-block: 40px;
    background-image: url("../images/service_bg.png");
    background-size: cover;
    background-position: bottom center;
}

.services .subtitle {
    font-weight: 400;
    font-size: 18px;
    color: var(--blue-color);
    text-align: center;
}

.services .title {
    font-weight: 700;
    font-size: 30px;
    color: #050505;
    text-align: center;
    margin-bottom: 35px;
}

.services .service {
    background-color: #ffffff;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    min-height: 400px;
    box-shadow: -4px 4px 55.8px -5px #000E7D75;
}

.services .service img {
    border-radius: 24px;
    /*max-height: 200px;*/
    /*max-width: 250px;*/
}

.services .service .service-image {
    display: none;
}

.services .service .bottom-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 20px;
    background: linear-gradient(to top, #000000ad, #ffffff00);
    height: 200px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.services .modal .modal-content {
    border-radius: 20px;
}

.services .modal .modal-body {
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.services .modal .modal-body .right {
    width: 35%;
    text-align: center;
}

.services .modal .modal-body .right img {
    max-height: 250px;
}

.services .modal .modal-body .left {
    width: 65%;
}

.services .modal .modal-body .left .service-title {
    font-weight: 700;
    font-size: 26px;
    color: var(--blue-color);
}

.services .modal .modal-body .left .service-description {
    font-weight: 400;
    font-size: 16px;
    color: #7B7B7B;
    line-height: 2;
}

/*******************************************************************************************************************/
/*********************************************   services   ********************************************************/
/*******************************************************************************************************************/
.contact {
    padding-block: 40px;
    background-image: url("../images/contact_bg.png");
    background-size: cover;
    background-position: bottom center;
    position: relative;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    min-height: 550px;
}

.contact .right .title {
    font-weight: 700;
    font-size: 30px;
    color: #050505;
    margin-bottom: 10px;
}

.contact .right .description {
    font-weight: 400;
    font-size: 16px;
    color: #7B7B7B;
    line-height: 2;
}


.contact .right .actions {
    display: flex;
    align-items: center;
    gap: 20px;
}


.contact .right .phone-button span {
    direction: ltr;
    display: inline-block;
}

.contact .left {
    position: absolute;
    top: 50%;
    left: 0;
    padding: 0;
    display: block;
    width: 550px;
    transform: translateY(-50%);
}


/*******************************************************************************************************************/
/********************************************   media query  *******************************************************/
/*******************************************************************************************************************/
@media (max-width: 1199.98px) {
    .contact .left {
        width: 450px;
    }
}

@media (max-width: 991.98px) {
    .about .right {
        text-align: center;
    }

    .about .right {
        text-align: center;
    }

    .services .service img {
        border-radius: 24px;
    }

    .services .modal .modal-body {
        flex-direction: column;
        text-align: center;
    }

    .services .modal .modal-body .right {
        width: 100%;
        margin-bottom: 30px;
    }

    .services .modal .modal-body .right img {
        max-width: 250px;
    }

    .services .modal .modal-body .left {
        width: 100%;
    }

    .contact .right {
        text-align: center;
    }

    .contact .left {
        width: 100%;
        position: unset;
        left: unset;
        top: unset;
        transform: unset;
        padding-inline: 12px;
    }

}

@media (max-width: 575.98px) {
    .about .left img {
        max-width: 100%;
    }

    .contact .right .actions {
        flex-wrap: wrap;
        justify-content: center;
    }
}