/* Cards */

.card-box .wrapper{
    border: 8px solid var(--yellow);
    border-radius: 20px;
    padding: 30px 30px 60px;
    position: relative;
}
.card-box.yellow .wrapper{
    border: 8px solid var(--light_blue);
}
.card-box a, .card-box a:hover{
    text-decoration: none;
    color: #000;
}
.card-box .wrapper:hover{
    background: var(--light_blue);
}
.card-box .button{
    position: absolute;
    bottom: 20px;
    left: 30px;
}
.card-box .button.txt{
    text-align: left;
    justify-content: flex-start;
}
.card-box.black a, .card-box.black a:hover{
    color: #fff;
}
.card-box .white .button.txt:hover{
    background: transparent!important;
}
.cards .shape.open-quote{
    position: absolute;
    left: 90px;
    top: 100px;
}
.cards .shape.close-quote{
    position: absolute;
    right: 90px;
    bottom: 40px;
}
.cards .shape.two-circles{
    width: 229px;
    position: absolute;
    left: 20px;
    bottom: 130px;
}
.cards .shape.two-curves{
    width: 185px;
    right: 60px;
    position: absolute;
    bottom: 100px;
}
.cards.dark_blue .card-box .wrapper:not(.dark_blue, .black) .content *,
.cards.black .card-box .wrapper:not(.dark_blue, .black) .content *{
    color: var(--black);
}

@media screen and (max-width: 1480px){
    .cards .shape.two-circles{
        width: 180px;
    }
    .cards .shape.two-curves{
        width: 150px;
        right: 40px;
    }
}

@media screen and (max-width: 1199px){
    .cards .shape.open-quote{
        left: 10px;
        width: 70px;
    }
    .cards .shape.close-quote{
        width: 90px;
        right: 0px;
        bottom: 0;
    }
    .cards .shape.two-circles{
        width: 120px;
        bottom: auto;
        top: 50px;
    }
    .cards .shape.two-curves{
        width: 100px;
        right: 10px;
        bottom: 0;
    }
}

@media screen and (max-width: 991px){
    .module.cards .intro{
        margin-bottom: 20px;
    }
    .cards .shape.open-quote{
        top: 30px;
        width: 50px;
    }
    .cards .shape.close-quote{
        width: 50px;
        bottom: -20px;
    }
    .cards .shape.two-circles{
        width: 70px;
        top: 30px;
    }
    .cards .shape.two-curves{
        width: 40px;
        right: 10px;
        bottom: 5px;
    }
}

@media screen and (max-width: 767px){
    .card-box{
        margin-bottom: 20px;
    }
    .cards .shape.close-quote{
        bottom: 0;
    }
    .card-box .wrapper{
        padding: 30px 20px;
    }
    .card-box .button.txt{
        left: 20px;
        bottom: 10px;
        width: calc(100% - 40px);
    }
    .cards .shape.two-circles{
        width: 60px;
        top: 20px;
        left: 10px;
    }
    .cards .shape{
        display: none!important;
        visibility: hidden!important;
    }
}

@media screen and (max-width: 414px){
    .cards .shape.open-quote{
        width: 40px;
        top: 45px;
        left: 5px;
    }

}