.container-solutions {
    padding: 128px 0;
    background: radial-gradient(
        50% 50% at 50% 50%,
        #fafafa 0%,
        rgba(212, 212, 216, 0.7) 100%
    );
}

.grid-solutions {
    display: grid;
    gap: 12px;
    justify-content: center;
}

.solutions-title {
    color: var(--secondary);
    width: 995px;
    line-height: 67px;
    text-align: center;
}

.solutions-subtitle {
    color: var(--medium-light);
    width: 584px;
    font-size: 20px;
    font-weight: 300;
    line-height: 28px;
    text-align: center;
    padding: 32px 0;
}

.cards-solutions {
    width: 379px;
    height: 389px;
    border-radius: 32px;
    border: 2px solid var(--border-light);
    margin-top: 32px;
    position: relative;
    transition: border 0.3s ease;
    padding: 32px;
}

.grid-3 {
    display: grid;
    gap: 32px;
}

.img-solutions {
    width: 315px;
    height: 210px;
    border-radius: 16px;
    border: 2px solid var(--border-light);
    margin-top: -48px;
    transition: border 0.3s ease;
}

/* Hover cards */
.cards-solutions:hover {
    border: 2px solid var(--secondary);
}

.cards-solutions:hover .img-solutions {
    border: 2px solid var(--secondary);
}

.card-title-solutions {
    color: var(--secondary);
    font-size: 18px;
    font-weight: 600;
    line-height: 25px;
    margin-top: 12px;
    margin-left: 6px;
}

.card-content-solutions {
    color: var(--medium-light);
    width: 285px;
    font-size: 14px;
    font-weight: 400;
    line-height: 19px;
    text-wrap: normal;
    margin: 0;
}

.solutions-icon,
.span-solutions {
    position: relative;
}

a {
    text-decoration: none;
}

a:hover,
a:focus,
a:active {
    color: inherit;
}

.span-solutions {
    color: var(--secondary);
    font-size: 14px;
    line-height: 19px;
    font-weight: 600;
    text-align: end;
}

.expand-icon {
    display: none;
}

/* Hover icon and botton */
.icon-border {
    position: absolute;
    bottom: 0;
    left: 14%;
    top: 66%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #e5b244;
}

.card:hover .icon-border {
    width: 32px;
}

.btn-solutions {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    overflow: hidden;
}

.btn-border {
    position: absolute;
    bottom: 0;
    top: 84%;
    left: 0%;
    transform: translateX(0%);
    width: 0;
    height: 1px;
    background-color: #e5b244;
}

.btn-border {
    width: 73px;
}

.card:not(:hover) .icon-border,
.card:not(:hover) .btn-border {
    transition: width 0.5s ease;
    width: 0;
}

@media screen and (min-width: 1400px) and (max-width: 1626px) {
    /*  Estilização específica dos cards do carousel */
    .cards-solutions {
        width: 339px;
        height: 349px;
        padding: 32px;
    }

    .card-content-solutions {
        width: 100% !important;
    }

    .img-solutions {
        width: 270px;
        height: 170px;
        margin-top: -48px !important;
    }

    .icon-border {
        left: 16%;
        top: 62%;
    }
}

@media screen and (min-width: 1279px) and (max-width: 1399px) {
    /*  Estilização específica dos cards do advantages e carousel */
    .cards-solutions {
        width: 303px;
        height: 340px;
        padding: 32px;
    }

    .card-title-solutions {
        padding-top: 4px !important;
        font-size: 16px !important;
    }

    .card-content-solutions {
        width: 100% !important;
    }

    .img-solutions {
        width: 240px;
        height: 140px;
        margin-top: -48px !important;
    }

    .solutions-icon {
        width: 47px;
        height: 50px;
        margin-left: 4px;
        margin-top: 8px;
    }

    .icon-border {
        left: 19%;
        top: 56%;
    }
}

@media (max-width: 1279px) {
    .container-solutions {
        padding: 64px 0;
    }

    .grid-solutions {
        gap: 8px;
    }

    .solutions-title {
        font-size: 26px;
        width: 570px;
        line-height: 36px;
    }

    .solutions-subtitle {
        width: 580px;
        font-size: 14px;
        line-height: 19px;
        padding: 16px 0;
    }

    .cards-solutions {
        width: 220px;
        height: 295px;
        border-radius: 16px;
        margin-top: 32px;
        justify-content: center !important;
        padding: 16px 8px !important;
    }

    .grid-3 {
        gap: 30px;
    }

    .img-solutions {
        width: 195px;
        height: 142px;
        border-radius: 8px !important;
        margin-top: -24px;
    }

    .card-title-solutions {
        font-size: 14px !important;
        line-height: 22px !important;
        margin-top: 10px;
        margin-left: 3px;
    }

    .card-content-solutions {
        width: 193px;
        font-size: 12px;
        line-height: 16px;
        margin-left: 8px;
    }

    .solutions-icon {
        width: 22px;
        height: 22px;
        margin-left: 4px;
        margin-top: 12px;
    }

    .span-solutions {
        font-size: 12px;
    }
}

@media screen and (min-width: 1021px) and (max-width: 1278px) {
    /* Estilização específica de alguns componentes */
    .container-cards-solutions {
        gap: 16px !important;
    }

    /*Hover icon and botton  */
    .card:hover .icon-border {
        width: 16px;
    }

    .card:hover .btn-border {
        width: 64px;
    }

    .cards-solutions {
        width: 245px;
        height: 295px;
    }

    .card-content-solutions {
        width: 100% !important;
    }

    .img-solutions {
        width: 213px;
        height: 142px;
        margin-top: -32px !important;
    }

    .icon-border {
        left: 9.8%;
        top: 58%;
        height: 2px;
    }

    .btn-border {
        top: 85%;
    }
}

@media screen and (min-width: 300px) and (max-width: 1024px) {
    /* Remoção do hover e icons */
    /* Hover values */
    .content-container.hovered,
    .titles.active-button.hovered {
        border: 1.5px solid var(--border-light);
    }

    /* Hover icon and botton */
    .cards-solutions:hover {
        border: 2px solid var(--border-light);
    }

    .cards-solutions:hover .img-solutions {
        border: 2px solid var(--border-light);
    }

    .icon-border {
        display: none;
    }

    .btn-border {
        display: none;
    }
}

@media (max-width: 767px) {
    .container-solutions-mobile {
        padding: 48px 0px !important;
        background: radial-gradient(
            50% 50% at 50% 50%,
            #fafafa 0%,
            rgba(212, 212, 216, 0.7) 100%
        );
    }

    .solutions-title.h1 {
        width: 358px;
        font-size: 26px;
        line-height: 36px;
    }

    .solutions-subtitle {
        width: 375px !important;
        font-size: 14px;
        line-height: 19px;
        padding: 0;
    }

    .cards-solutions {
        width: 245px;
        height: 295px;
        border-radius: 16px;
        padding: 16px 8px !important;
    }

    .img-solutions {
        width: 213px;
        height: 142px !important;
        border-radius: 8px;
        margin-top: -24px !important;
    }

    .card-title-solutions {
        font-size: 16px;
        line-height: 22px;
        margin-left: 4px;
        margin-top: 10px;
    }

    .card-content-solutions {
        width: 200px;
        font-size: 12px;
        line-height: 16px;
        margin-top: -5px;
        margin-left: 8px;
    }

    .solutions-icon {
        width: 30px;
        height: 30px;
        margin-left: 4px;
        margin-top: 8px;
    }

    #carouselExampleControls2 {
        scroll-behavior: smooth;
    }

    .carousel-inner2 {
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-left: 16px;
        padding-right: 16px;
    }

    .carousel-item2 {
        margin-right: 0;
        flex: 0 0 calc(100% / 2);
    }
}

@media screen and (min-width: 545px) and (max-width: 767px) {
    /*  Estilização específica dos cards do carousel */
    .cards-solutions {
        width: 23rem !important;
        height: 312px !important;
    }

    .img-solutions {
        width: 250px !important;
        height: 156px !important;
        margin-left: 4px !important;
    }
}