.cardCarousel {
    display: none;
}

.card-body {
    text-align: center;
}

.card {
    border-radius: 20px;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(34%) sepia(99%) saturate(2531%) hue-rotate(356deg) brightness(103%) contrast(101%);
}


/* container1 */

.container1 {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row-reverse;
    margin: 0 auto;
    /* height: 70dvh; */
}

.container1 .rightContainer1 {
    width: 50%;
    text-align: center;
    direction: rtl;
    padding: 2vh;
    box-sizing: border-box;
    justify-content: center;
    align-self: center;
}

.container1 .rightContainer1 .imgContainer {
    width: 100%;
}

.container1 .leftblank {
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
    padding: 1vh;
    box-sizing: border-box;
    align-items: center;
    width: 50%;
}

.container1 .leftblank .leftContainer1 {
    width: 80%;
    box-sizing: border-box;
    margin-top: 5%;
}

.container1 .leftblank .btncontainer1 {
    display: flex;
    width: 80%;
    justify-content: center;
    margin-top: 2%;
    direction: ltr;
}

.container1 .leftblank .btncontainer1 .btnRcontainer1 {
    padding: 2%;
    box-sizing: border-box;
    border-radius: 20px;
    flex-grow: 1;
    text-align: center;
    border: solid;
    border-color: rgb(255 181 52);
    /* font-weight:bolder; */
    box-sizing: border-box;
}

.container1 .leftblank .btncontainer1 .btnLcontainer1 {
    margin-left: 2%;
    background-color: rgb(255 181 52);
    padding: 2%;
    box-sizing: border-box;
    flex-grow: 1;
    border-radius: 20px;
    text-align: center;
    border: none;
    /* font-weight:bolder; */
    box-sizing: border-box;
}

.container1 .leftblank .leftContainer1 h3 {
    font-size: 43px;
}

.container1 .leftblank .leftContainer1 p {
    line-height: 1.5;
    text-align: justify;
}


/* cardConainer */

.cardContainer {
    margin-top: 15vh;
    margin-bottom: 10vh;
    direction: rtl;
}

.firstRow {
    display: flex;
    flex-direction: row;
    margin: 2vh auto;
    width: 90%;
}

.inerCard0 {
    padding: 1vh;
    box-sizing: border-box;
    margin: 0 auto;
}

.cardContainer .inerCard0 .inerCardImg {
    width: 90%;
    margin: 0 auto;
}

.cardContainer .inerCard0 .inerCardImg .imgRealInerCard {
    width: 100%;
}

.cardContainer .inerCard0 .inerTextCard {
    width: 90%;
    margin: 2vh auto;
}

.cardContainer .inerCard0 .inerTextCard h3 {
    font-size: 20px !important;
}

.cardContainer .inerCard0 .inerTextCard p {
    font-size: 14px !important;
}

.btnInerCard {
    width: 50%;
    margin: 0 auto;
    background-color: #99C67A;
    padding: 1.5vh;
    box-sizing: border-box;
    border-radius: 10px;
    direction: rtl;
    text-align: center;
    cursor: pointer;
    box-shadow: 1px 1px 12px rgba(37, 37, 37, 0.261);
    /* border: solid #64E58A; */
}

.btnInerCard:hover {
    background-color: #79c943;
}

.btnInerCard .btnRealInerCard {
    color: #FFF;
}


/* containerServices////////////////////////////////////////////////////// */

.containerServices .leftCS .leftCS1 h1 {
    font-size: 43px;
}

.containerServices {
    width: 80%;
    display: flex;
    flex-direction: row-reverse;
    margin: 2vh auto;
    direction: rtl;
}

.containerServices .rightCS {
    width: 50%;
    text-align: center;
    direction: rtl;
    padding: 2vh;
    box-sizing: border-box;
    justify-content: center;
    margin: 0 auto;
    align-self: center;
}

.containerServices .rightCS .imgContainer {
    width: 80%;
}

.containerServices .leftCS {
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
    padding: 1vh;
    box-sizing: border-box;
    align-items: center;
    width: 50%;
}

.containerServices .leftCS .leftCS1 {
    width: 80%;
    box-sizing: border-box;
    text-align: justify;
    margin-top: 5%;
}

.containerServices .leftCS .btnCS {
    display: flex;
    width: 80%;
    justify-content: center;
    margin-top: 2%;
}

.containerServices .leftCS .btnCS .btnLCS {
    margin-right: 2%;
    background-color: rgb(255 181 52);
    padding: 2%;
    box-sizing: border-box;
    flex-grow: 0.3;
    border-radius: 20px;
    text-align: center;
    border: none;
    font-weight: bolder;
    box-sizing: border-box;
}


/* containerAnswers////////////////////////////////////////////////////// */

.containerAnswers .leftCS .leftCS1 h1 {
    font-size: 43px;
}

.containerAnswers {
    width: 80%;
    display: flex;
    flex-direction: row-reverse;
    margin: 2vh auto;
    margin-bottom: 20vh;
}

.containerAnswers .rightCS {
    width: 50%;
    text-align: center;
    direction: rtl;
    padding: 2vh;
    box-sizing: border-box;
    margin: 0 auto;
    /* background-color: antiquewhite; */
    justify-self: center;
    align-self: center;
}

.containerAnswers .rightCS .imgContainer {
    width: 80%;
}

.containerAnswers .leftCS {
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
    padding: 1vh;
    box-sizing: border-box;
    align-items: center;
    width: 50%;
}

.containerAnswers .leftCS .leftCS1 {
    width: 80%;
    box-sizing: border-box;
    text-align: justify;
    margin-top: 5%;
}

.containerAnswers .leftCS .btnCS {
    display: flex;
    width: 80%;
    justify-content: center;
    margin-top: 2%;
}

.containerAnswers .leftCS .btnCS .btnLCS {
    margin-right: 2%;
    background-color: rgb(255 181 52);
    padding: 2%;
    box-sizing: border-box;
    flex-grow: 0.3;
    border-radius: 20px;
    text-align: center;
    border: none;
    font-weight: bolder;
    box-sizing: border-box;
}

.btncontainer1 .btnRcontainer1:hover,
.btnPhone .btnRPhone:hover {
    background-color: rgb(251, 205, 127);
    border: solid rgb(255 181 52);
}

.btncontainer1 .btnLcontainer1:hover,
.btnPhone .btnLPhone:hover,
.btnLCS:hover {
    background-color: rgb(251, 205, 127) !important;
    border: solid rgb(255 181 52);
}


/* containerAnswers////////////////////////////////////////////////////// */

.rightBotton,
.leftBottom {
    width: 10%;
    padding: 5px;
    box-sizing: border-box;
    margin: auto;
    align-items: center;
    text-align: center;
}

.btnPhone {
    display: none;
}

.cardPhone {
    display: none;
}


/* test */


/* @media (max-width: 600px) {
    .card {
        max-width: 60% !important; 
    }
}

@media (min-width: 768px) {
    .card {
        max-width: 300px; 
    }
} */


/* end of test */

@media screen and (max-width: 1208px) {
    .leftContainer1 h3 {
        font-size: 32px !important;
    }
}

@media screen and (max-width: 1051px) {
    .containerServices .leftCS .leftCS1 h3,
    .containerAnswers .leftCS .leftCS1 h3 {
        font-size: 30px;
    }
}

@media screen and (max-width: 914px) {
    .leftContainer1 h3 {
        font-size: 25px !important;
    }
}

@media screen and (max-width: 768px) {
    .cardCarousel {
        display: block;
        width: 50%;
        margin: 10dvh auto;
    }
    .container1 {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 3vh auto;
    }
    .container1 .leftblank {
        margin: auto;
        width: 100%;
    }
    .container1 .rightContainer1 {
        width: 50%;
        direction: rtl;
        box-sizing: border-box;
        padding: 0;
    }
    .container1 .rightContainer1 .imgContainer {
        width: 100%;
    }
    .container1 .leftblank .leftContainer1 h1 {
        font-size: 14px;
    }
    .container1 .leftblank .leftContainer1 p {
        font-size: 12px;
    }
    .btnLcontainer1,
    .btncontainer1,
    .btnRcontainer1 {
        display: none;
    }
    .btnPhone {
        display: flex;
        flex-direction: row;
        width: 60%;
        justify-content: space-around;
        margin: 0 auto;
    }
    .btnPhone .btnRPhone {
        padding: 2%;
        box-sizing: border-box;
        border-radius: 20px;
        flex-grow: 1;
        text-align: center;
        border: solid;
        border-color: rgb(255 181 52);
        font-weight: 200;
        box-sizing: border-box;
        flex-direction: column;
        margin-right: 25px;
    }
    .btnPhone .btnLPhone {
        padding: 2%;
        box-sizing: border-box;
        border-radius: 20px;
        flex-grow: 1;
        font-weight: 200;
        text-align: center;
        border: solid;
        border-color: rgb(255 181 52);
        box-sizing: border-box;
        flex-direction: column;
        background-color: rgb(255 181 52);
    }
    /* /////////////////////////////////////////////// */
    .cardContainer {
        display: none;
    }
    .cardPhone {
        display: flex;
        flex-direction: row;
        margin: 2vh auto;
        width: 80%;
        direction: rtl;
        justify-content: center;
    }
    .rightBotton,
    .leftBottom {
        width: 10%;
        padding: 5px;
        box-sizing: border-box;
        margin: auto;
        align-items: center;
        text-align: center;
    }
    .cardPhone h3 {
        font-size: 14px;
    }
    .cardPhone p {
        font-size: 11px;
    }
    .cardPhone .middleBox {
        padding: 1vh;
        box-sizing: border-box;
        margin: 0 auto;
        background-color: #99C67A;
    }
    .cardPhone .middleBox .inerCardImg {
        width: 70%;
        margin: 0 auto;
    }
    .cardPhone .middleBox .inerCardImg .imgRealInerCard {
        width: 100%;
    }
    .cardPhone .middleBox .inerTextCard {
        width: 70%;
        margin: 0 auto;
    }
    /* /////////////////////////////////////////////// */
    .containerServices .leftCS .leftCS1 h1 {
        font-size: 14px;
    }
    .containerServices .leftCS .leftCS1 p {
        font-size: 14px;
    }
    .containerServices .rightCS {
        width: 70%;
        text-align: center;
        direction: rtl;
        padding: 0%;
        box-sizing: border-box;
        justify-content: center;
        margin: 2dvh auto;
    }
    .containerServices .leftCS {
        width: 100%;
        margin: auto;
    }
    .containerServices .rightCS .imgContainer {
        width: 100%;
    }
    .containerServices .leftCS .btnCS {
        display: flex;
        width: 80%;
        justify-content: center;
        margin-top: 2%;
        font-size: 10px;
    }
    /* /////////////////////////////////////////////// */
    .containerAnswers .leftCS .leftCS1 h1 {
        font-size: 13px;
    }
    .containerAnswers .leftCS .leftCS1 p {
        font-size: 14px;
    }
    .containerAnswers .rightCS {
        width: 70%;
        text-align: center;
        direction: rtl;
        padding: 0%;
        box-sizing: border-box;
        justify-content: center;
        margin: 2dvh auto;
    }
    .containerAnswers .rightCS .imgContainer {
        width: 100%;
        margin: auto;
    }
    .containerAnswers .leftCS {
        width: 100%;
        margin: auto;
    }
    .containerAnswers .leftCS .btnCS {
        display: flex;
        width: 80%;
        justify-content: center;
        margin-top: 2%;
        font-size: 10px;
    }
}

@media screen and (max-width: 755px) {
    .containerServices,
    .containerAnswers {
        width: 100%;
        flex-direction: column;
        margin-bottom: 10dvh;
    }
    .imgContainer {
        width: 80% !important;
    }
    .plate {
        width: 100% !important;
    }
}

@media screen and (max-width: 643px) {
    .containerServices .leftCS .leftCS1 h3,
    .containerAnswers .leftCS .leftCS1 h3 {
        font-size: 24px;
    }
}

@media screen and (max-width: 580px) {
    .cardCarousel {
        display: block;
        width: 70%;
        margin: 10dvh auto;
    }
}

@media screen and (max-width: 542px) {
    .container1 .leftblank .leftContainer1 h3 {
        font-size: 18px !important;
    }
}

@media screen and (max-width: 524px) {
    .containerServices .leftCS .leftCS1 h3,
    .containerAnswers .leftCS .leftCS1 h3 {
        font-size: 18px;
    }
}

@media screen and (max-width: 395px) {
    .container1 .leftblank .leftContainer1 h3 {
        font-size: 15px !important;
    }
    .containerServices .leftCS .leftCS1 h3,
    .containerAnswers .leftCS .leftCS1 h3 {
        font-size: 15px;
    }
    .containerAnswers .leftCS .leftCS1 p,
    .containerServices .leftCS .leftCS1 p {
        font-size: 13px;
    }
}


/* @media screen and (max-width: 300px) {
    body{
        display: none;
    }
} */


/* === Page Animations === */

@keyframes enter-right-spin {
    0% {
        opacity: 0;
        transform: translateX(80px) rotate(22deg) scale(0.98);
        filter: blur(2px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotate(0) scale(1);
        filter: blur(0);
    }
}

@keyframes fade-in-left {
    0% {
        opacity: 0;
        transform: translateX(-40px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.animate-enter-right-spin {
    animation: enter-right-spin 1200ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-fade-in-left {
    animation: fade-in-left 1000ms ease-out both;
    animation-delay: 120ms;
}

.reveal-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms ease-out, transform 600ms ease-out;
}

.reveal-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}