@import url("pages.css");

.banner-section{
    display : flex;
    align-items : center;
    justify-content : space-between;
    background : hsl(0deg, 0%, 100%);
    /* height : calc(100vh - 100px); */
}

.banner-img-wrapper{
    width : 45%;
    height : 100%;

}

.banner-img-container{
    height: 100%;
}

.logistics.banner-img-container img{
    width : 100%;
    min-width : 300px;
    height : 500px;
    object-fit : cover;
    object-position: 50% 40%;
}
/* 
.banner-img-container img:nth-child(2){
    transform : translate(-10px, 30px);
} */

.banner-text-content{
    width : 55%;
    padding : 40px 20px 20px 30px;
}

.sub-text{
    color : var(--b-theme-clr);
    font-size : .8rem;
    margin-bottom : 10px;
    padding-left : 5px;
}

.main-text{
    font-size : clamp(3rem, 6.5vw, 4rem);
    margin: 0px 0 0;
}

.details-text{
    color : rgba(0,0,0,.8);
    line-height: 1.6;
    margin: 10px 0 0;
    max-width : 600px;
    font-size: 15px;
}

.logistics .contact-link{
    border-radius: 10px;
    padding: 10px 65px;
    cursor: pointer;
}

.logistics-services-section{
    --bg-clr : #f5f8ff;
    background-color : var(--bg-clr);
    padding: 40px 15px 50px
}

.logistics-service-head,
.logistics-advantages-head{
    margin : 0 0 0 0;
    font-size : clamp(1.2rem, 4.5vw, 3rem);
    text-align: center;
    color : var(--b-theme-clr);
    position : relative;
    z-index : 1;
}

.logistics-service-head span{
    background-color: var(--bg-clr);
    padding: 0 10px;
}

.logistics-service-head span::after{
    content : '';
    position : absolute;
    top : calc(50% + 4px);
    left : 50%;
    transform : translate(-50%, -50%);
    height : 5px;
    width : 90%;
    max-width : 600px;
    border-radius : 5px;
    background-color : var(--b-theme-clr);
    z-index : -1;
}

.logistics-service-block-wrapper{
    display : flex;
    flex-wrap : wrap;
    gap: 1rem;
    margin-top : 40px;
    justify-content: center;
}

.logistics-service-box{
    /* width : 500px; */
    width : 30%;
    min-width : 300px;
    background-color : white;
    padding : 20px 15px;
    border-radius : 10px;
    text-align : center;
    box-shadow : 0px 10px 15px rgba(0,0,0,.14);
}

.logistics-service-box svg{
    width : 50px;
    height : 50px;
    fill: var(--b-theme-clr)

}

.logistics-service-box h3{
    margin: 7px 0;
    font-size: clamp(1.5rem, 2.5vw, 1.8rem);
}

.logistics-service-box p{
    font-size : .9rem;
    color : rgba(0,0,0,.7);
    line-height: 1.6;
}

.logistics-advantages-section{
    display : flex;
    /* align-items :  center; */
}

.advantages-banner-section{
    width : 45%;
}

.advantages-text-section{
    background-image: linear-gradient(240deg, #4481eb 0%, #04befe 100%);
    padding : 60px 20px;
    width : 55%;
}

.advantages-text-section h3{
    font-size: clamp(3rem, 4.5vw, 2rem);
    margin-bottom: 10px;
    color: rgba(255,255,255,.9);
}

.advantages-text-section p{
    color: rgba(255,255,255,.9);
    line-height: 1.7;
    margin: 20px auto 0;
    font-size: 1.1rem
}

.advantages-banner-section img{
    height : 500px;
    width : 100%;
    object-fit : cover;
}

@media(max-width : 900px){
    .banner-section{
        flex-direction: column;
    }

    .banner-img-wrapper,
    .banner-text-content{
        width : 100%;
    }

    .banner-img-container img{
        height : 400px;
        object-position : 50% 40%;
    }

    .banner-text-content{
        padding : 70px 20px;
        text-align : center;

    }

    .details-text{
        margin: 15px auto 0
    }

    .logistics-advantages-section{
        flex-direction : column;
    }

    .advantages-banner-section,
    .advantages-text-section{
        width : 100%;
    }

    .advantages-text-section{
        padding : 60px 30px;    
    }

    .advantages-banner-section img{
        height : 400px;
        object-position : center;
    }
}