/* ---------------------------------------------------------
|                      SOLUTIONS GRID                      | 
--------------------------------------------------------- */

.products-section {
    text-align: center;
    padding: 60px 20px;
    transition: all 0.3s ease;
    background-color: #fff;
    padding-bottom: 120px;
}
  
.products-section h2 {
    font-size: 40px;
    font-weight: 500;
    margin-top: 50px;
    margin-bottom: 75px;
}
  
.products-grid {
    display: flex;
    flex-wrap: wrap;
    justify-items: center;
    align-items: flex-start;
    max-width: 1344px;
    margin: 0 auto;
    height: 480px;
}
  
.product-box, .product-text {
    background: #CED4DA;
    border-radius: 24px;
    padding: 10px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: calc(33.3% - 20px);
    margin: 10px;
    position: relative;
    overflow: hidden;
    transition: width .55s ease, height .55s ease;

    contain: layout paint;
    will-change: transform;
    transform: translateZ(0);
}

.product-box {
    cursor: pointer;
}
  
.product-box img, .product-box svg {
    position: absolute;
}

.product-box p {
    margin: 20px 15px;
    font-weight: 400;
    font-size: 24px;
    z-index: 2;
}
  
.product-text {
    background-color: #fff;
    justify-content: center;
}

.product-text p {
    font-size: 16px;
    font-weight: 400;
}


/* SECOND BOX */

.product-box2 p {
    width: 216px;
}

#lighting-solutions-grid-1-1 {
    width: 125px;
    transform: rotate(35deg);
    right: 10px;
    top: -10px;
    transition: .3s;
    z-index: 2;
}

.product-box2:hover #lighting-solutions-grid-1-1 {
    width: 108px;
    top: 10px;
    right: 35px;
}

#eiro-solutions-grid-1-2 {
    width: 59px;
    transform: rotate(-24deg);
    bottom: -15px;
    right: 15px;
    transition: .3s;
    z-index: 3;
}

.product-box2:hover #eiro-solutions-grid-1-2 {
    transform: rotate(0deg);
    width: 84px;
    right: 0;
    bottom: 0;
}

#dollar-solutions-grid-1-3 {
    width: 49px;
    transform: rotate(-19deg) translateY(calc(-100% - 5px));
    top: 0;
    right: 140px;
    z-index: 1;
    transition: .3s;
}

.product-box2:hover #dollar-solutions-grid-1-3 {
    width: 59px;
    transform: rotate(-19deg) translateY(calc(-50% - 10px));
    top: 50%;
    right: 100px;
}

/* THIRD BOX */

#rocket-solutions-grid-2-1 {
    width: 250px;
    left: 20px;
    bottom: -45px;
    transition: .3s;
}

.product-box3:hover #rocket-solutions-grid-2-1 {
    transform: rotate(-20deg);
}

#code-solutions-grid-2-2 {
    width: 115px;
    transform: rotate(40deg);
    bottom: -30px;
    left: 50%;
    transition: .3s;
}

.product-box3:hover #code-solutions-grid-2-2 {
    transform: translateX(10px) rotate(21deg);
    width: 177px;
}


/* FOURTH BOX */

#globe-solutions-grid-3-1 {
    width: 250px;
    transform: rotate(-25deg);
    left: 20px;
    bottom: -50px;
    transition: .3s;
}

.product-box4:hover #globe-solutions-grid-3-1 {
    transform: rotate(-10deg);

}

#basket-solutions-grid-3-2 {
    width: 160px;
    transform: scaleX(-1) rotate(-28deg);
    left: 200px;
    bottom: -145px;
    transition: .3s;
}

.product-box4:hover #basket-solutions-grid-3-2 {
    bottom: -10px;
}


/* FIFTH BOX */

.slide-left-products-custom {
    opacity: 0;
    transform: translateX(100px) translateY(-166px);
    transition: all 0.3s ease-out;
}

.slide-right-products-custom {
    opacity: 0;
    transform: translateX(-100px) translateY(-166px);
    transition: all 0.3s ease-out;
}

.slide-left-products-custom.show, .slide-right-products-custom.show {
    opacity: 1;
    transition-delay: .3s;
    transform: translateX(0) translateY(-166px);
}

#balance-solutions-grid-4-1 {
    width: 265px;
    transform: rotate(-20deg);
    left: 25px;
    bottom: -20px;
    transition: .3s;
}

.product-box5:hover #balance-solutions-grid-4-1 {
    transform: rotate(-14deg);
    left: 10px;
    bottom: -35px;
}

#shield-solutions-grid-4-2 {
    width: 90px;
    transform: scaleX(-1) rotate(-28deg);
    bottom: -30px;
    left: 230px;
    transition: .3s;
}

.product-box5:hover #shield-solutions-grid-4-2 {
    transform: scaleX(-1) rotate(-15deg);
    width: 150px;
    left: 200px;
}

/* SIXTH BOX */

.product-box6 p {
    font-weight: 500;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0%;
}


/* SOLUTION GRID MEDIA */

@media only screen and (max-width: 1140px) {
    .products-grid {
        height: 830px;
    }

    .product-box, .product-text {
        width: calc(50% - 20px);
        transform: translateY(0) !important;
    }

    .product-box1 {
        order: 1;
    }

    .product-box2 {
        order: 2;
    }

    .product-box3 {
        order: 3;
    }

    .product-box4 {
        order: 4;
    }

    .product-box5 {
        order: 5;
    }

    .product-box6 {
        order: 6;
    }
}

@media only screen and (max-width: 790px) {
    .products-section {
        padding-top: 0px;
        padding-bottom: 10px;
    }

    .products-grid {
        height: auto;
    }

    .product-box, .product-text {
        width: calc(100% - 20px);
    }

    .product-box p {
        text-align: center;
        width: 100%;
        margin: 10px 0 !important;
    }

    /* FIRST BOX */

    @media only screen and (max-width: 387px) {
        .product-box1 {
            margin: 35px 0;
        }
    }

    @media only screen and (max-width: 313px) {
        .product-box1 {
            padding: 55px 0;
        }
    }

    /* SECOND BOX */

    .product-box2 {
        margin-top: 0;
        order: 2;
        height: 250px !important;
    }

    #lighting-solutions-grid-1-1, .product-box2:hover #lighting-solutions-grid-1-1 {
        left: 50%;
        transform: rotate(35deg) translateX(-50%) translateY(0);
        top: auto;
        bottom: -80px;
        width: 125px;
        right: auto;
        z-index: 2;
    }

    #eiro-solutions-grid-1-2, .product-box2:hover #eiro-solutions-grid-1-2 {
        width: 100px;
        transform: rotate(14deg) translateX(50px);
        bottom: -15px;
        left: 50%;
        z-index: 3;
    }

    #dollar-solutions-grid-1-3, .product-box2:hover #dollar-solutions-grid-1-3 {
        width: 60px;
        transform: rotate(-19deg) translateY(calc(-100% - 5px)) translateX(-70px);
        top: auto;
        bottom: -50px;
        left: 50%;
        z-index: 1;
    }

    /* THIRD BOX */


    #rocket-solutions-grid-2-1, .product-box3:hover #rocket-solutions-grid-2-1 {
        width: 250px;
        left: 50%;
        bottom: 0px;
        transform: rotate(-20deg) translateX(calc(-50% - 50px));
    }
    
    #code-solutions-grid-2-2, .product-box3:hover #code-solutions-grid-2-2 {
        width: 177px;
        transform: translateX(10px) rotate(21deg);
        bottom: -30px;
        left: 50%;
        transition: .3s;
    }

    /* FOURTH BOX */

    .product-box4 {
        order: 4;
        height: 300px !important;
    }

    #globe-solutions-grid-3-1, .product-box4:hover #globe-solutions-grid-3-1 {
        width: 250px;
        transform: rotate(-25deg) translateX(calc(-50% - 50px));
        left: 50%;
        bottom: 0px;
        transition: .3s;
    }

    #basket-solutions-grid-3-2, .product-box4:hover #basket-solutions-grid-3-2 {
        width: 160px;
        transform: scaleX(-1) rotate(-28deg);
        left: calc(50% + 20px);
        bottom: -30px;
        transition: .3s;
    }

    /* FIFTH BOX */

    .product-box5 {
        order: 5;
        height: 300px !important;
    }

    #balance-solutions-grid-4-1, .product-box5:hover #balance-solutions-grid-4-1 {
        width: 265px;
        transform: rotate(-20deg) translateX(calc(-50% - 50px));
        left: 50%;
        bottom: 20px;
        transition: .3s;
    }

    #shield-solutions-grid-4-2, .product-box5:hover #shield-solutions-grid-4-2 {
        width: 150px;
        transform: scaleX(-1) rotate(-28deg);
        bottom: -30px;
        left: calc(50% + 20px);
        transition: .3s;
    }


    /* SIXTH BOX */

    .product-box6 {
        order: 6;
        cursor: default;
        height: 120px !important;
        padding: 0;
        width: 100% !important;

    }

    .product-box6 p {
        text-align: center;
    }

    @media only screen and (max-width: 335px) {
        .product-box6 {
            height: 160px !important;
        }
    }

    @media only screen and (max-width: 240px) {
        .product-box6 {
            height: 200px !important;
        }
    }
}


/* ---------------------------------------------------------
|                      ONLINE MERCHANTS                    | 
--------------------------------------------------------- */

.merchants-section {
    width: 100%;
    height: auto;
    transition: 0.3s;
    position: relative;
    padding: 50px 0;
}

.merchants-section .merchants-content {
    width: 100%; 
    max-width: 1344px;
    margin: auto;
    display: flex;
    padding: 100px 20px;
    position: relative;
}

.merchants-section .merchants-left, .merchants-section .merchants-right {
    width: 50%;
    padding: 0 20px;
    position: relative;
}

.merchants-section h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
}

.merchants-section h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: #1E8687;
    margin-top: 40px;
    margin-bottom: 40px;
}

.merchants-section p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    max-width: 432px;
    margin-bottom: 60px;
}

.merchants-section img {
    position: absolute;
}

#silver-globe-merchants {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(-25deg);
    width: 380px;
}

#golden-basket-merchants {
    width: 220px;
    transform: scaleX(-1) rotate(-10deg);
    bottom: 0;
    left: 30px;
}

#white-circle-merchants {
    width: 120px;
    left: 120px;
    top: 65px;
}   

#circle-merchants {
    width: 115px;
    right: 80px;
    bottom: 115px;
}

#out-circle-merchants {
    width: 80px;
    left: 80px;
    bottom: -50px;
    transform: translateY(50%);
    z-index: 2;
    filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 70px 20px);
}

@media only screen and (max-width: 900px) {
    .merchants-section {
        padding: 0;
    }

    #out-circle-merchants {
        display: none;
    }
    
    .merchants-section .merchants-content {
        flex-direction: column-reverse;
        padding: 50px 0px;
    }

    .merchants-section .merchants-left, .merchants-section .merchants-right {
        width: 100%;
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .merchants-section .merchants-right {
        width: 260px;
        height: 250px;
        margin: auto;
    }

    #silver-globe-merchants {
        width: 180px;
    }

    #golden-basket-merchants {
        width: 120px;
    }

    #white-circle-merchants {
        width: 60px;
        left: 25px;
    }

    #circle-merchants {
        width: 70px;
        right: 0;
        bottom: 40px;
    }

    .merchants-section p {
        text-align: left;
    }

}

/* ---------------------------------------------------------
|                      GLOBAL TRANSEFRS                    | 
--------------------------------------------------------- */

.transfers-section {
    width: 100%;
    height: auto;
    transition: 0.3s;
    position: relative;
    background-color: #617181;
    padding: 50px 0;
}

.transfers-section .transfers-content {
    width: 100%; 
    max-width: 1344px;
    margin: auto;
    display: flex;
    padding: 100px 20px;
    position: relative;
}

.transfers-section .transfers-left, .transfers-section .transfers-right {
    width: 50%;
    padding: 0 20px;
    position: relative;
}

.transfers-section h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: #fff;
    margin-top: 40px;
    margin-bottom: 40px;
}

.transfers-section h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: white;
}

.transfers-section p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    max-width: 432px;
    margin-bottom: 60px;
    margin-top: 40px;
    color: white;
}

.transfers-section img {
    position: absolute;
}

#silver-lightning-transfers {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(20deg);
    width: 250px;
    z-index: 2;
}

#circle-transfers {
    width: 105px;
    right: 17%;
    top: -20px;
    z-index: 1;
}

#second-circle-transfers {
    width: 50px;
    left: 42%;
    bottom: 40px;
    z-index: 3;
}   

#golden-dollar-transfers {
    width: 100px;
    left: 50%;
    top: 120px;
    transform: translate(calc(-50% - 150px), -50%) rotate(-20deg);
    z-index: 3;
}

#golden-eiro-transfers {
    width: 150px;
    bottom: -40px;
    right: 140px;
    z-index: 3;
}

@media only screen and (max-width: 900px) {
    .transfers-section {
        padding: 0;
    }
    
    .transfers-section .transfers-content{
        flex-direction: column-reverse;
        padding: 50px 0px;
    }

    .transfers-section .transfers-left, .transfers-section .transfers-right {
        width: 100%;
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .transfers-section .transfers-right {
        width: 260px;
        height: 250px;
        margin: auto;
    }

    #silver-lightning-transfers {
        width: 150px;
    }

    #circle-transfers {
        right: 25px;
        top: 20px;
        width: 70px;
    }

    #second-circle-transfers {
        width: 35px;
        top: 160px;
        left: 100px;

    }

    #golden-dollar-transfers {
        width: 50px;
        left: 45px;
        top: 105px;
        transform: translate(-50%, -50%) rotate(-20deg);
    }

    #golden-eiro-transfers {
        width: 100px;
        right: 10px;
        bottom: -10px;
    }

    .transfers-section h2 {
        width: 342px;
        margin-top: 10px;
    }

    .transfers-section p {
        text-align: left;
    }
}

/* ---------------------------------------------------------
|                      REGULATED BUSINESSES                | 
--------------------------------------------------------- */

.businesses-section {
    width: 100%;
    height: auto;
    transition: 0.3s;
    position: relative;
    padding: 50px 0;
}

.businesses-section .businesses-content {
    width: 100%; 
    max-width: 1344px;
    margin: auto;
    display: flex;
    padding: 100px 20px;
    position: relative;
}

.businesses-section .businesses-left, .businesses-section .businesses-right {
    width: 50%;
    padding: 0 20px;
    position: relative;
}

.businesses-section h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
}

.businesses-section h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: #1E8687;
    margin-top: 40px;
    margin-bottom: 40px;
}

.businesses-section p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    max-width: 432px;
    margin-bottom: 40px;
    margin-top: 40px;
}

.businesses-section img {
    position: absolute;
}

#silver-balance-businesses {
    left: 50%;
    top: 50%;
    width: 380px;
    transform: translate(-50%, -50%) rotate(-15deg);
}

#circle-businesses {
    width: 60px;
    bottom: 110px;
    right: 210px;
}

#golden-shield-businesses {
    transform: translate(-50%, -50%) rotate(20deg) scaleX(-1);
    width: 150px;
    bottom: -100px;
    left: 280px;
}

#circle-white-businesses {
    width: 220px;
    right: 30px;
    top: -50px;
    transform: translateY(-20%);
    z-index: 2;
}

@media only screen and (max-width: 900px) {
    #circle-white-businesses {
        display: none;
    }

    .businesses-section {
        padding: 0;
    }
    
    .businesses-section .businesses-content {
        flex-direction: column-reverse;
        padding: 50px 0px;
    }

    .businesses-section .businesses-left, .businesses-section .businesses-right {
        width: 100%;
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .businesses-section .businesses-right {
        width: 260px;
        height: 250px;
        margin: auto;
    }

    #silver-balance-businesses {
        width: 230px;
    }

    #circle-businesses {
        width: 40px;
        right: 55px;
        bottom: 65px;
    }

    #golden-shield-businesses {
        width: 100px;
        left: 110px;
        bottom: -85px;
    }

    .businesses-section h2 {
        width: 342px;
        margin-top: 20px;
    }

    .businesses-section p {
        text-align: left;
        margin-top: 20px;
    }
}

/* ---------------------------------------------------------
|                  STARTUPS & ENTREPRENEURS                | 
--------------------------------------------------------- */

.entrepreneurs-section {
    width: 100%;
    height: auto;
    transition: 0.3s;
    position: relative;
    background-color: #1E8687;
    padding: 50px 0;
}

.entrepreneurs-section .entrepreneurs-content {
    width: 100%; 
    max-width: 1344px;
    margin: auto;
    display: flex;
    padding: 100px 20px;
    position: relative;
}

.entrepreneurs-section .entrepreneurs-left, .entrepreneurs-section .entrepreneurs-right {
    width: 50%;
    padding: 0 20px;
    position: relative;
}

.entrepreneurs-section h2 {
    font-weight: 500;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: white;
}

.entrepreneurs-section h3 {
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0%;
    max-width: 432px;
    color: white;
    margin-top: 40px;
    margin-bottom: 40px;
}

.entrepreneurs-section p {
    font-weight: 400;
    font-size: 16px;
    line-height: 150%;
    letter-spacing: 0%;
    max-width: 432px;
    margin-bottom: 40px;
    margin-top: 40px;
    color: white;
}

.entrepreneurs-section img {
    position: absolute;
}

#silver-rocket-entrepreneurs {
    top: 50%;
    left: 50%;
    width: 370px;
    transform: translate(-50%, -50%)
}

#golden-code-entrepreneurs {
    width: 200px;
    right: 70px;
    bottom: -20px;
}

#circle-entrepreneurs {
    width: 60px;
    left: 150px;
}

#circle-out-entrepreneurs {
    width: 100px;
    filter: drop-shadow(rgba(0, 0, 0, 0.15) 0px 70px 20px);
    right: 20px;
    bottom: -50px;
    transform: translateY(40%);
}

@media only screen and (max-width: 900px) {
    .entrepreneurs-section {
        padding: 0;
    }

    #circle-out-entrepreneurs {
        display: none;
    }
    
    .entrepreneurs-section .entrepreneurs-content {
        flex-direction: column-reverse;
        padding: 50px 0px;
    }

    .entrepreneurs-section .entrepreneurs-left, .entrepreneurs-section .entrepreneurs-right {
        width: 100%;
        margin: 30px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .entrepreneurs-section .entrepreneurs-right {
        width: 260px;
        height: 250px;
        margin: auto;
    }
    
    #silver-rocket-entrepreneurs {
        width: 215px;
    }

    #golden-code-entrepreneurs {
        width: 100px;
        right: 0;
        bottom: 0;
    }

    #circle-entrepreneurs {
        width: 40px;
        left: 25px;
        top: 10px;
    }

    .entrepreneurs-section p {
        text-align: left;
        margin-top: 20px;
    }
}