.header-area-2.header-area .header-nav .navigation {
    top: 0px;
    background-color: #fff;
    box-shadow: 0 5px 10px 0 rgb(0 0 0 / 7%);
}
.header-nav .navigation {
    top: 0px;
}
.header-nav .navigation .navbar {
    width: 80%;
    margin: auto;
}
.banner-area {
    height: 750px;
    background: #eaeefd; 
    padding: 10px;   
}
.banner-area::before{
    background-image: url(../img/banner-image.png); 
    /*background-image: url(../images/banner-image.jpg);*/ 
    /*    background-position: 100% 100%;
        background-size: contain;
        background-repeat: no-repeat;*/
}
.portfolio-content .title {
    height:80px;
}
.portfolio-content p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.page-title-area::before {
    background-image: url(../images/banner-gradient-bg.png);
}
.page-title-area {
    height: 380px;
    background: #eaeefd;
}
.page-title-area .page-title-item {
    padding-top: 150px;
}
.main-btn-orange{
    background-color: #fdb143;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #fdb143;
}
.orange-color{
    color: #fdb143 !important;
}
.main-btn-orange:hover{
    background-color: #fff !important;
    color: #002249 !important;
    border: 1px solid #fdb143;
}
.main-btn-blue{
    background-color: #0c59db;
    color: #fff;
    border-radius: 5px;
    border: 1px solid #0c59db;
}
.main-btn-blue:hover{
    background-color: #fff !important;
    color: #0c59db !important;
    border-color: #0c59db !important;
}
.main-btn {
    /*    background-color: #6887f0;
        color: #fff;
        border: 1px solid #6887f0;
        border-radius: 2.1em;
        letter-spacing: .01em;
        line-height: 3rem;*/
}

.main-btn:hover {
    background-color: transparent;
    color: #ffffff;
    border-color: #ffffff;
}
.non-active{
    background-color: #fff;
    color: #6887f0;
    border: 1px solid #6887f0;
}
.banner-area .banner-shape {
    height: 610px;
    width: 610px;
    border: 50px solid #ebf4ff;
    background:radial-gradient(50% 50% at 50% 50%,rgba(40,139,255,0) 0,rgba(40,139,255,.3) 100%);
    /*background: radial-gradient(#fff, #3d96ff);*/
}

.banner-area .banner-shape::before {
    background: radial-gradient(50% 50% at 50% 50%,rgba(40,139,255,0) 0,rgba(40,139,255,.3) 100%);
    /*background: radial-gradient(#fff, #3d96ff);*/
}

.banner-area .banner-shape img {
    top: 0px;
    padding: 20px;
}
.banner-area .banner-shape {
    right: -5%;
    bottom: -35%;
}
.portfolio-area {
    padding-bottom: 85px;
    margin-top: 50px; 
    overflow: hidden;
}

.section-title .title-2::before {
    position: absolute;
    content: 'products';
    font-size: 180px;
    font-family: "GilroyBold";
    font-weight: 700;
    bottom: 0;
    color: #f5f6f8;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.section-title .title-3::before {
    position: absolute;
    content: 'Solution';
    font-size: 180px;
    font-family: "GilroyBold";
    font-weight: 700;
    bottom: 0;
    color: #f5f6f8;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
}
.get-touch-area {
    padding-top: 83px;
    padding-bottom: 80px;
    background: #f7fcff;
}
.sectiontitle span {
    color: #0c59db;
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 700;
    padding-bottom: 5px;
    z-index: 6;
    position: relative;
}
.sectiontitle .title {
    font-size: 40px;
    font-weight: 700;
    text-transform: capitalize;
    position: relative;
    z-index: 5;
    margin-bottom: 15px;
}

.card-img-overlay{
    background: linear-gradient(90deg, #204985 0%, rgb(88 121 169 / 75%) 50%, rgba(255, 255, 255, 0) 100%);
}

.cardoverlay{
    background: none;
    top: 15%;
}
.cardoverlay span{
    font-size: 24px;
}

p.big-text {
    font-size: 26px;
}
#headingbanner{
    padding-top: 80px; 
}
@media (max-width:575.98px){
    #headingbanner{
        padding-top: 20px; 
    }
    .banner-area::before {

        background-image: url(../img/banner-image.png);
        /*        background-image: url(../images/banner-image.jpg);
                background-position: 100% 100%;
                background-size: contain;
                background-repeat: no-repeat;*/
    }
    .cardoverlay{
        background: #002e76;
    }
    .cardoverlay span{
        font-size: 13px;
    }
}
@media (max-width:767.98px){

    .banner-area::before {
        background-image: url(../img/banner-image.png);
        /*        background-image: url(../images/banner-image.jpg);
                background-position: 100% 100%;
                background-size: contain;
                background-repeat: no-repeat;*/
    }
    .cardoverlay{
        background: #002e76;
    }
    .cardoverlay span{
        font-size: 13px;
    }
}
@media (max-width:991.98px){

    .banner-area::before {
        background-image: url(../img/banner-image.png);

        /*        background-image: url(../images/banner-image.jpg);
                background-position: 100% 100%;
                background-size: contain;
                background-repeat: no-repeat;*/
    }
    .cardoverlay{
        background: #002e76;
    }
    .cardoverlay span{
        font-size: 13px;
    }
}
@media (max-width:1199.98px){

    .banner-area::before {
        background-image: url(../img/banner-image.png);

        /*        background-image: url(../images/banner-image.jpg);
                background-position: 100% 100%;
                background-size: contain;
                background-repeat: no-repeat;*/
    }
    .cardoverlay{
        background: #002e76;
    }

}

.font-size-45{
    font-size: 45px !important;
}
.font-size-80{
    font-size: 80px !important;

}
.font-size-80{
    font-size: 80px !important;

}
.font-size-50{
    font-size: 50px !important;
    letter-spacing: 3px;
    line-height: initial !important;
    padding-bottom: 15px !important;
}
#banner .card-title{
    /*font-family: "GilroyBold";*/
    /*font-weight: 700;*/
    margin: 0px;
    letter-spacing: 1px;
}


.card{
    border: none;
    background-color: #eaeefd !important;
}
.card-img-overlay{
    padding: 10px;
}
.case-details-area{
    margin-top: 80px;
}
.smartlogistic{
    width: -webkit-fill-available;
}
.vertical-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.text-footer{
    text-align: left;
}
.text-right-footer{
    text-align: right !important;
}
.social-links{
    text-align: left;
}
@media (max-width:575.98px){
    .card-img-overlay{
        position: relative;
        margin: auto;
        width: -webkit-fill-available;
    }
    .smartlogistic{
        position: relative;
    }
    .vertical-center{
        display: block !important;
    }
    .text-footer{
        text-align: center;
    }
    .text-right-footer{
        text-align: center !important;
    }
    .social-links{
        text-align: center;
    }
}

@media (max-width:767.98px){
    .card-img-overlay{
        position: relative;
        margin: auto;
        width: -webkit-fill-available;
    }
    .smartlogistic{
        position: relative;
    }
    .vertical-center{
        display: block !important;
    }
    .text-footer{
        text-align: center;
    }
    .social-links{
        text-align: center;
    }
}
@media (max-width:991.98px){
    .card-img-overlay{
        position: relative;
        margin: auto;
        width: -webkit-fill-available;
    }
    .smartlogistic{
        position: relative;
    }
    .vertical-center{
        display: block !important;
    }
    .text-footer{
        text-align: center;
    }
    .text-right-footer{
        text-align: center !important;
    }
    .social-links{
        text-align: center;
    }
}
@media (max-width:1199.98px){
    .card-img-overlay{
        position: relative; 
        margin: auto;
        width: -webkit-fill-available;
    }
    .smartlogistic{
        position: relative;
    }
    .vertical-center{
        display: block !important;
    }
    .text-footer{
        text-align: center;
    }
    .text-right-footer{
        text-align: center !important;
    }
    .social-links{
        text-align: center;
    }
}



.about-intro-area{
    padding-bottom: 50px;
}