:root {
        --Medici-Colors-1: #FFFFFF;
        --Medici-Colors-2: #E0E0E0;
        --Medici-Colors-3: #D3D3D3;
        --Medici-Colors-4: #708089;
        --Medici-Colors-5: #0B1634;
        --Medici-Colors-6: #1255F4;
}

/* Home Style */
.home .banner {
        background-image: linear-gradient(90deg, #0B1634 0.04%, rgba(18, 85, 244, 0.71)), url('../assets/imgs/im-glad-we-had-a-chance-to-meet.png');
        height: 51.5vw;
        min-height: 780px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 72%;
        display: flex;
        justify-content: center;
        align-items: center;
}

.home .banner .content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: 1150px;
        margin: 56px;
}

.home .banner .content .title {
        font-size: 40px;
        font-style: normal;
        font-weight: 400;
        line-height: 48px;
        color: var(--Medici-Colors-1);
        max-width: 676px;
}

.home .banner .content .title .bold {
        font-weight: 800;
}

.home .banner .content button {
        width: fit-content;
        padding: 8px 32px;
        border-radius: 9px;
        background-color: var(--Medici-Colors-6);
        border: none;
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        color: var(--Medici-Colors-1);
}

.home .banner .content button:hover {
        background-color: #0643D5;
}

.home .banner .content button:focus {
        background-color: #0033AC;
}

.home .solutions {
        display: flex;
        justify-content: center;
        align-items: center;
        background-image: linear-gradient(rgba(11, 22, 52, 0.7), rgba(11, 22, 52, 0.7)), url('../assets/imgs/portrait-of-attractive-positive-european-business.png');
        background-repeat: no-repeat;
        background-size: cover;
        background-position-y: center;
        background-position-x: 60%;
        height: 57vw;
        min-height: 828px;
}

.home .solutions .content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        max-width: 1120px;
        color: var(--Medici-Colors-1);
        margin: 80px 56px;
}

.home .solutions .content .description {
        display: flex;
        flex-direction: column;
        gap: 24px;
        max-width: 556px;
}

.home .solutions .content .description .title {
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
}

.home .solutions .content .description .text {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: justify;
}

.home .solutions .content .description .text .bold {
        font-weight: 800;
}

.home .solutions .content .cards {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 32px;
}

.home .solutions .content .cards .card {
        display: flex;
        flex-direction: column;
        gap: 16px;
        background-color: rgba(18, 85, 244, 0.70);
        padding: 32px;
        border-radius: 14px;
}

.home .solutions .content .cards .card img {
        width: 40px;
}

.home .solutions .content .cards .card .title {
        font-size: 24px;
        font-weight: 800;
        line-height: 30px;
}

.home .solutions .content .cards .card .description {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px; 
}

.home .solutions .content .cards .card button {
        width: fit-content;
        background-color: var(--Medici-Colors-1);
        border: none;
        padding: 8px 32px;
        border-radius: 9px;
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        color: var(--Medici-Colors-6);
        margin-top: auto;
}

.home .solutions .content .cards .card button:hover {
        background-color: #F2F2F2;
}

.home .solutions .content .cards .card button:focus {
        background-color: #E7E8EB;
}

.home .solutions .content .cards.mobile {
        display: none;
        gap: 0px;
}

.home .solutions .content .cards.mobile .glide__arrows {
        display: flex;
        gap: 8px;
        justify-content: center;
        margin-top: 24px;
}

.home .solutions .content .cards.mobile .glide__arrows button {
        background-color: var(--Medici-Colors-6);
        color: var(--Medici-Colors-1);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 32px;
}

.home .solutions .content .cards.mobile .glide__arrows button:hover {
        background-color: var(--Medici-Colors-6);
}

.home .numbers { 
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 8px;
        color: var(--Medici-Colors-1);
        background-color: var(--Medici-Colors-6);
        background-image: url('../assets/imgs/background-numbers-section.png');
        background-blend-mode: lighten;
        background-repeat: no-repeat;
        background-position: right bottom;
        background-size: contain;
        padding: 78px 56px;
}

.home .numbers .top-text { 
        text-align: center;
        font-size: 24px;
        font-weight: 800;
        line-height: 30px;
}

.home .numbers .text { 
        text-align: center;
        font-size: 80px;
        font-weight: 800;
        line-height: 88px; 
}

.home .numbers .bottom-text { 
        text-align: center;
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
}

.home .future {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--Medici-Colors-2);
        background-image: url('../assets/imgs/background-future-woman.png');
        background-position: left bottom;
        background-repeat: no-repeat;
        background-size: contain;
        min-height: 658px;
        height: 45vw;
        margin-top: -1px;
        padding-inline: 56px;
        color: var(--Medici-Colors-5);
}

.home .future .container {
        width: 100%;
        max-width: 1240px;
        display: flex;
        justify-content: flex-end;
}

.home .future .container .content {
        display: flex;
        flex-direction: column;
        gap: 64px;
}

.home .future .container .content .title {
        display: flex;
        flex-direction: column;
        gap: 12px;
        max-width: 475px;
}

.home .future .container .content .title h2 {
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
}

.home .future .container .content .title p {
        font-size: 24px;
        font-weight: 400;
        line-height: 30px;
}

.home .future .container .content .topics {
        display: flex;
        flex-direction: column;
        gap: 32px;
}

.home .future .container .content .topics .topic {
        display: flex;
        align-items: flex-start;
        gap: 16px;
}

.home .future .container .content .topics .topic img {
        width: 40px;
}

.home .future .container .content .topics .topic .topic-content {
        display: flex;
        flex-direction: column;
        gap: 8px;
        max-width: 517px;
}

.home .future .container .content .topics .topic .topic-content h2 {
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        text-align: justify;
}

.home .future .container .content .topics .topic .topic-content p {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: justify;
}

.home .future .container picture {
        display: none;
}

.home .medici-wealth {
        background: linear-gradient(rgba(11, 22, 52, 0.70), rgba(11, 22, 52, 0.70)), url('../assets/imgs/using-smartphone-businessman-is-standing-near-his.png');
        background-position-y: center;
        background-position-x: 60%;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 746px;
        height: 51vw;
        color: var(--Medici-Colors-1);
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 56px;
}

.home .medici-wealth .content {
        display: flex;
        flex-direction: column;
        gap: 40px;
        width: 100%;
        max-width: 1120px;
        margin-bottom: 76px;
}

.home .medici-wealth .content .title {
        display: flex;
        flex-direction: column;
        gap: 12px;
}

.home .medici-wealth .content .title h2 {
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
}

.home .medici-wealth .content .title p {
        font-size: 24px;
        font-weight: 400;
        line-height: 30px;
        text-align: left;
}

.home .medici-wealth .content p {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
        text-align: justify;
        max-width: 529px;
}

.home .medici-wealth .content p .bold {
        font-weight: 800;
}

.home .contact-us {
        width: 100%;
        display: flex;
        background-color: var(--Medici-Colors-2);
}

.home .contact-us .form-contain {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        width: 50%;
}

.home .contact-us .form-contain .content {
        display: flex;
        flex-direction: column;
        gap: 32px;
        max-width: 389px;
        margin: 0px 56px;
}

.home .contact-us .form-contain .content h2 {
        width: 100%;
        color: var(--Medici-Colors-6);
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
}

.home .contact-us .form-contain .content form {
        width: 100%;
}

.home .contact-us .form-contain .content form button {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 8px 32px;
        width: 100%;
        background-color: var(--Medici-Colors-6);
        color: var(--Medici-Colors-1);
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        border-radius: 9px;
        border: none;
}

.home .contact-us .form-contain .content form button:hover {
        background-color: #0643D5;
}

.home .contact-us .form-contain .content form button:focus {
        background-color: #0033AC;
}

.home .contact-us .banner {
        background-image: none;
        height: 54vw;
        min-height: 774px;
        width: 50%;
        overflow: hidden;
}

.home .contact-us .banner picture {
        height: 101%;
}

.home .contact-us .banner picture img {
        height: 100%;
}

.home .instagram {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 64px;
        padding: 56px;
        width: 100%;
        background-color: var(--Medici-Colors-5);
        color: var(--Medici-Colors-1);
}

.home .instagram h2 {
        font-size: 40px;
        font-weight: 800;
        line-height: 48px;
        text-align: center;
}

.home .instagram .posts {
        color: white;
        display: flex;
        flex-direction: column;
        gap: 32px;
        width: 100%;
        max-width: 1004px;
}

.home .instagram .posts .glide__arrows {
        display: none;
}

.home .instagram .instagram-btn {
        background-color: var(--Medici-Colors-6);
        color: var(--Medici-Colors-1);
        font-size: 16px;
        font-weight: 800;
        line-height: 24px;
        border: none;
        border-radius: 9px;
        padding: 8px 32px;
}

.home .instagram button:hover {
        background-color: #0643D5;
}

.home .instagram button:focus {
        background-color: #0033AC;
}

.home .infos {
        display: flex;
        justify-content: space-evenly;
        align-self: start;
        background-color: var(--Medici-Colors-6);
        color: var(--Medici-Colors-1);
        padding: 32px 56px;
        gap: 16px;
}

.home .infos .line {
        width: 2px;
        background-color: var(--Medici-Colors-1);
}

.home .infos .info {
        display: flex;
        flex-direction: column;
        gap: 8px;
}

.home .infos .info h2 {
        font-size: 24px;
        font-weight: 800;
        line-height: 30px;
}

.home .infos .info p {
        font-size: 14px;
        font-weight: 300;
        line-height: 20px;
}

.home .infos .info a {
        display: flex;
        align-items: center;
        gap: 8px;
}

.home .location {
        width: 100%;
        height: 100vw;
        max-height: 537px;
        min-height: 452px;
}

/* Responsivo */

@media (max-width: 479px) {
        .home .banner {
                background-image: linear-gradient(90deg, #0B1634 0.04%, rgba(18, 85, 244, 0.71)), url('../assets/imgs/african-american-business-woman-posing-with-folded.png');
        }

        .home .solutions {
                background-image: linear-gradient(rgba(11, 22, 52, 0.7), rgba(11, 22, 52, 0.7)), url('../assets/imgs/night-view-of-the-city.png');
        }

        .home .numbers { 
                background-image: url('../assets/imgs/background-numbers-section-mobile.png');
                background-blend-mode: normal;
                background-size: cover;
        }

        .home .future .container .content {
                padding: 32px 16px 0px !important;
        }

        .home .medici-wealth {
                background: linear-gradient(rgba(11, 22, 52, 0.70), rgba(11, 22, 52, 0.0)), url(../assets/imgs/using-smartphone-businessman-is-standing-near-his-mobile.png);
                background-repeat: no-repeat;
                background-size: cover;
                background-position: bottom;
                height: 207vw;
                padding: 32px 16px;
                align-items: flex-start !important;
        }

        .home .contact-us .form-contain .content {
                margin: 32px 16px !important;
        }

        .home .contact-us .form-contain .content h2 {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
                text-align: center;
        }

        .home .instagram h2 {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
        }

        .home .instagram {
                padding: 32px 16px;
                gap: 32px;
        }

        .home .infos {
                padding: 32px 16px;
        }
}
    
@media (max-width: 767px) {
        .home .banner .content {
                align-items: center;
                margin: 16px;
                transform: translateY(46%);
        }

        .home .banner .content .title {
                font-size: 24px;
                line-height: 30px;
                text-align: center;
                max-width: 406px;
        }

        .home .solutions {
                background-position-x: 70%;
                min-height: fit-content;
        }

        .home .solutions .content {
                margin: 0px;
                padding: 32px 16px;
                width: 100%;
                gap: 24px;
        }

        .home .solutions .content .description .title {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
        }

        .home .solutions .content .description .text {
                font-size: 14px;
                font-weight: 300;
                line-height: 20px;
        }

        .home .solutions .content .cards {
                display: none;
        }

        .home .solutions .content .cards.mobile {
                display: block;
        }

        .home .solutions .content .cards.mobile .card {
                height: 100%;
        }

        .home .numbers { 
                padding: 67px 16px;
        }
        
        .home .numbers .text { 
                text-align: center;
                font-size: 40px;
                font-weight: 800;
                line-height: 48px;
        }

        .home .future .container .content {
                gap: 16px;
        }

        .home .future .container .content .topics {
                gap: 16px;
        }

        .home .future .container .content .title h2 {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
        }

        .home .future .container .content .title p {
                font-size: 14px;
                font-weight: 300;
                line-height: 20px;
        }

        .home .future .container picture {
                margin-top: -26px;
        }

        .home .medici-wealth .content .title h2 {
                font-size: 24px;
                font-weight: 800;
                line-height: 30px;
        }

        .home .medici-wealth .content {
                margin-bottom: 30px;
        }

        .home .medici-wealth .content .title p {
                font-size: 24px;
                font-weight: 400;
                line-height: 30px; 
        }

        .home .contact-us {
                flex-direction: column-reverse;
        }
        
        .home .contact-us .form-contain {
                width: 100%;
        }

        .home .contact-us .form-contain .content {
                margin: 56px;
        }

        .home .contact-us .banner {
                display: none;
        }

        .home .infos {
                flex-direction: column;
        }

        .home .infos .line {
                width: 100%;
                height: 2px;
        }
}
    
@media (max-width: 1024px) {
        .home .solutions .content .cards {
                gap: 16px;
        }

        .home .future {
                height: fit-content;
                background-image: none;
                padding-inline: 0px;
        }

        .home .future .container {
                flex-direction: column;
                padding: 0px 0px !important;
        }

        .home .future .container .content {
                padding: 56px;
        }

        .home .future .container .content .topics .topic .topic-content {
                max-width: fit-content;
        }

        .home .future .container picture {
                display: flex;
                width: 100% !important;
        }

        .home .future .container picture img {
                width: 100% !important;
        }

        .home .medici-wealth {
                align-items: flex-end;
        }

        .home .instagram .posts .glide__arrows {
                display: flex;
        }
}

@media (max-width: 1279px) {
        .home .solutions {
                height: 100%;
        }

        .home .solutions .content .cards {
                grid-template-columns: repeat(2, 1fr);
        }

        .home .future {
                min-height: fit-content;
                height: 52vw;
        }

        .home .future .container {
                padding: 56px 0px;
        }
        
}