#hero{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    /* background: linear-gradient(180deg, #f9f9f9 0%, #f9f9f9 50%, #ffffff 100%); */
}

#hero::after{
    content: url(../resources/images/pub/top-right.png);
    position: absolute;
    top: 0;
    right: 0;
    max-width: 30%;
    overflow-x: hidden;
    }
    .wrapper{
        position: relative;
        background: linear-gradient(to bottom,#ffffff00 0%, #ffffff00 40%,  #ffffff 50%, rgba(255, 255, 255, 0.8) 80%, rgba(255, 255, 255, 0.8) 100%), url(../resources/images/pub/middle.png);
        background-repeat: no-repeat;
        background-size: 30%;
        background-position: 0 50%;
    }

    #benefits{
        position: relative;
    }
    .benefits{
        border: .1rem solid var(--grey);
        background:white;
        z-index: 4;
        position: relative;
    }
    .benefit-group{
        background: white;
    }
    .benefit-group img{
        width: 2.2rem;
        height: 2.2rem;
        object-fit: contain;
    }
    .benefit-group .tag{
        background: var(--lightgrey);
    }
    .single-benefit{
     display: flex;
     gap: 1rem;
     align-items: center;   
    }
    #benefits::after{
        content: url(../resources/images/pub/bottom-right.png);
        position: absolute;
        bottom: 0;
        right: 0;
        max-width: 30%;
        overflow-x: hidden;
    }
    #monetize .tag, .logistic-wrap .tag{
        background: var(--yellow);
    }
    #section2{
        background: linear-gradient(180deg, #F9F9F9 0%, #ffffff 100%);
    }
    .single-offer{
        display: flex;
        gap: 1.5rem;
        align-items: start;
    }
    .star{
        width: 2rem !important;
        height: 2rem !important;
        object-fit: contain;
        margin: unset !important;
    }
    .logistic-wrap{
        background-color: #F9F9F9;
        justify-content: space-between;
        overflow: hidden;
    }
    #logistic .grid img{
        max-width: 21.3rem;
    }
    #logistic .right .grid-two{
        gap: 3rem !important;
    }
    #services{
        text-align: center;
        background: linear-gradient(180deg, white 50%, #f9f9f9 50%);
    }
    #services .card{
        width: 100%;
        max-width: 100%;
        text-align: initial;
    }
     .card .single-benefit img{
        margin: unset;
    }
    #extra{
        background-color: #F9F9F9;
        text-align: center;
    }
    #extra .card{
        border: none;
    }
    #extra img{
        width: 8rem;
        height: 8rem;
    }
    #support{
        position: relative;
    }
    #support::before{
        
        content: '';
        top: 0%;
        left: 0;
        position: absolute;
        max-width: 15rem;
        background: url(../resources/images/pub/extra.png);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center center;
        height: 100%;
        width: 100%;
        z-index:-1;
    }
    #platforms{
        text-align: center;
        background-color: #F9F9F9;
    }
    .logos{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: clamp(2.5rem, 2.6vw, 2.6vw );
        justify-content: center;
    }
    .logos img{
        max-height: clamp(6rem, 4.58vw, 4.58vw) ;
    }
    @media screen and (max-width:992px) {
      .logistic-wrap.grid-two{
        grid-template-columns: repeat(1, 1fr)

      }
      .grid-two{
        margin-top: 2rem;
      }
    }
    @media screen and (max-width:768px){
        #logistic .right .grid-two{
            gap: 1rem;
            grid-template-columns: repeat(2, 1fr)
        }
        #logistic .grid img{
            max-width: 100%;
        }
    }