*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'inter', sans-serif;
}
.exportacion-hero{
    min-height: 320px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('/assets/export-hero-bg.jpg')  no-repeat;
    background-size: cover;
    background-position: center center;
    position: relative;
    margin-top: 40px;
}
.export-hero-content{
    font-size: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 9999;
}
.hero-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, #65040bd9, rgba(92, 4, 9, 0.705) 38.42%, rgba(190, 27, 37, 0.49) 54.4%, rgba(190, 33, 41, 0.1225) 78.36%, rgba(191, 39, 45, 0) 99.32%);
background-blend-mode: multiply;
}
.hero-logo img{
    width: 60px;
    height: 60px;
    
}
.grey-logo-symbol{
    position: absolute;
    right: 0;
    top: 0;
    z-index: 999;
}
.grey-logo-symbol img{
    max-height: 300px;
}
.export-hero-content h1{
    position: relative;
    font-weight: 700;
    color: white;
}
.export-hero-heading{
    position: relative;
}

.export-hero-heading span{
    position: absolute;
    min-width: 300px;
    min-height: 78px;
    background: #373F52;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    z-index: -1;
}
.export-section-2{
    margin-top: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    position: relative;
}
.gradient-overlay{
    position:absolute;
    right: 0;
    top: -30px;
    min-width: 60%;
    min-height: 300px;
    background: linear-gradient(198.47deg, #be1621ab -0.51%, #8a2534b7 14.46%, #5d3344b1 29.44%, #413b4ebd 41.42%, #373F52 48.4%, rgba(55, 63, 82, 0) 98.32%);
    z-index:-1;

}
.export-section-2 .left-side{
    min-width: 50%;
    min-height: 400px;
    background: url('/assets/sobre-section-2.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: -2;
}
.export-section-2 .right-side{
    max-width: 650px;
    margin-left: -60px;
    background: #F1F1F1;
    padding: 30px;
    padding-right: 50px;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 12px;
    box-shadow: 7.28px 7.94px 15.88px 0px #00000033;

}
.export-section-2 .right-side h3{
    color: #BF272D;
    font-size: 42px;
}
.export-section-2 .right-side p{
    font-size: 24px;
}
.export-section-3{
    background: #373F52;
    min-height: 500px;
    padding: 40px 120px;
    margin: auto;
    position: relative;
}
.export-section-3 > div:nth-child(2){
display: flex;
    flex-direction: column;
    gap: 24px;
}

.export-section-3 h2{
    color: white;
    font-size: 42px;
    font-weight: 700;
}
.export-section-3 h2 span{
    font-size: 49px;
}
.export-section-3 .section-3-map-img{
    display: flex;
    justify-content: center;
    align-items: center;

}
.export-section-3 .section-3-map-img img{
    max-width: 800px;
    margin: auto;
}
.export-section-3 .logo{
    position: absolute;
    left:-50px;
    top: 30px;
}

.export-section-4{
    display: flex;
    margin: 24px auto;
}

.export-section-4 .left-side{
     background: #BF272D;
     padding: 24px;
     padding-right: 2px;
    color: white;
    font-size: 38px;
    font-weight: 700;
    max-width: 50%;
}

.export-section-4 .right-side{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

}
.export-section-4 .right-side.row{
    display: flex;
}
.export-section-4 .right-side .row{
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 12px 24px;
    max-width: 90%;
}
.export-section-4 .right-side .row p{
    /* max-width: 300px; */
    font-size: 28px;
    color: #373F52;
}
.export-section-4 .right-side .row .icon{
     background: linear-gradient(90deg, #C0272D 0%, #373F52 99.98%);
    max-width: fit-content;
    padding: 1px;
}
.export-section-4 .right-side .row .icon img{
       width: 40px;
    height: 40px;
}
@media (max-width:700px) {
 

    .export-hero-heading h1{
        font-size: 42px;
    }
    .exportacion-hero .grey-logo-symbol{
        top: 50%;
        transform: translateY(-50%);
    }
    .exportacion-hero .grey-logo-symbol img{
        max-height: 180px;
    }
    .export-hero-heading span{
        min-width: 160px;
        min-height: 44px;
    }
    .export-section-2{
        flex-direction: column;
    }
    .export-section-2 .left-side{
        z-index: 0;
        min-width: 100%;
    }
    .export-section-2 .right-side{
        margin: 0;
    }
    .export-section-3{
        padding-left: 40px;
        /* padding: ; */
        padding-right: 4px;
        justify-content: center;        
        align-items: center;
    }
    .export-section-3 h2{
        position: relative;
        font-size: 32px;
        z-index: 99;
    }
    .export-section-3 h2 span{
        font-size: 40px;
    }
    .export-section-3 > div .section-3-map-img img{
        max-width: 300px;
    }
    .export-section-4{
        flex-direction: column;
    }
    .export-section-4 .left-side{
        max-width: 100%;
    }
    .export-section-4 .right-side{
        max-width: 100%;
    }
}
@media (max-width:360px) {
    .export-section-3{
        padding: 20px;
    }
    .export-section-3 >div .logo{
        z-index: 999;
        left: -80px;
        bottom: 0;
        top: auto;
    }
    .export-section-3 .logo{
        z-index: 1;
    }
       .export-section-3 > div .section-3-map-img img{
       max-width: 260px; 
    }
    .export-section-4 .right-side .row {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        font-size: 12px;
    }
    .export-section-4 .right-side .row p{
        font-size: 20px;
        text-align: center;
    }
}