/* Service */
.service {
    margin-top: 100px;
}

.service__section {
    margin-top: 3rem;
}

.service__inner {
    border-bottom: 1px solid var(--main-color);
    padding-bottom: 2rem;
}

.service__content {
    width: 50%;
    padding: 2rem;
    border: 2px solid var(--main-color);
    border-radius: 1rem;
}

.service__body {
    margin-bottom: 2rem;
}

.service__img {
    max-width: 600px;
}



/* Modal */
.form__textarea {
    height: 75%;
}

.request-modal__btn:hover {
    background-color: var(--main-hover-color) !important;
}


@media (max-width: 1410px) {
    .service__img {
        max-width: 500px;
    }
}

@media (max-width: 1199.98px) {
    .service__img{
        order: 1;
    }
    .service__body {
        flex-direction: column;
        justify-content: center;
        gap: 4rem;
        margin: 0 auto;
    }
    
    .service__content{
        width: 75%;
        margin: 0 auto;
        text-align: center;
    }

    .service__content ul {
        text-align: left;
    }

    .service__footer {
        text-align: center;
    }

    .service__footer .row{
        flex-direction: column;
    }

    .service__footer ul {
        list-style: none;
        padding-left: 0;
    }
}

@media (max-width: 991.98px) {
    .service__content {
        width: 100%;
    }
}

@media (max-width: 767.98px) {
    .service {
        margin-top: 4rem;
    }
    
    .service__content {
        padding: 1.5rem;
    }
}

@media (max-width: 575.98px) { 
    .container {
        padding: 0 15px !important  ;
    }

    .service {
        margin: 50px;
    }

    .service__content {
        padding: 1.2rem;
    }

    .service__img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 500px) { 
    .service__mainTitle {
        font-size: 1.3rem !important;   
    }
}

@media (max-width: 450px) {
    .intro__title{
        font-size: 2.0rem;
    }

    .intro__subtitle {
        font-size: 1rem;
    }

    .intro__img-hero {
        width: 300px;
    }

    .intro__img-overlay {
        width: 15px;
        height: 15px;
    }

    @keyframes circle-out {
        0% {
          transform: translate(-50%, -50%) rotate(0deg) translateX(118px) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(360deg) translateX(118px) rotate(-360deg);
        }
    }

    @keyframes circle-in {
        0% {
          transform: translate(-50%, -50%) rotate(0deg) translateX(150px) rotate(0deg);
        }
        100% {
          transform: translate(-50%, -50%) rotate(360deg) translateX(150px) rotate(-360deg);
        }
     }

}

@media (max-width: 420px) {
    .service__title {
        font-weight: 900;
    }

    .service__content {
        padding: 10px;
    }
}

@media (max-width: 400px) {
    .service__title {
        font-size: 1.2rem !important;
    }

    .service__text {
        font-size: 1rem !important;
    }

    .service ul li {
        font-size: .8rem !important;
    }
}