.banner-grp{
    margin-left: 14%;
    padding-left: 16%;
}
.first-col h1{
    font-family: "Bebas Neue", sans-serif;
}
.banner-grp .banner-col .second-col .banner-img-grp .shoe-img{
    width: auto;
    height: 370px;
    position: absolute;
    bottom: 75px;
    left: 15% !important;
    transform: translateX(-50%);
    left: 32%;
}
.banner-grp .banner-col .second-col .banner-img-grp{
    top: 36%;
}
.banner-col .first-col .first-col-grp {
    margin-top: 29%;
}
.banner-col .first-col .first-col-grp p{
    margin-bottom: 0 !important;
}
.prod-collection ul li{
    border: 1px solid #D8D8D8;
    padding: 15px;
}
.prod-collection ul li:hover{
    box-shadow: 0px 1px 6px #00000029;
    border: 1px solid #0000;
}
.prod-collection  .prod-title a{
    text-decoration: none !important;
}
.prod-collection .prod-price ins {
    text-decoration: none !important;
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
}
.prod-collection .prod-price del{
    font-size: 14px;
    font-weight: 500;
}
#products-section .product-box:hover {
    box-shadow: 0px 1px 6px #00000029;
    border: 1px solid #0000;
}
.banner-col .second-col .banner-img-grp .bg-img {
    margin-left: -12%;
    margin-top: -3%;
}
.product-sec.mt-5{
    margin-top: 12rem !important;
}

/* media query */
@media screen and (max-width: 767px){
    .product-sec.mt-5{
        margin-top: 3rem !important;
    }
    .banner-col .first-col .first-col-grp h1{
         font-size: 30px!important;
         text-align: center;
    }
    .banner-col .first-col .first-col-grp p{
        text-align: center;
    }
    .second-col .banner-img-grp .shoe-img img{
        height: auto !important; 
        margin-top: 74%;
        margin-left: 26%;
    }
    .second-col .bg-img img{
        width: auto;
        height: 310px!important;
        max-width: none
    }
    .banner-grp .banner-col .second-col .banner-img-grp {
        top: 9%;
        left: 3em;
    }
    .banner-grp {
        padding-left: 0!important;
    }
    .wp-block-column.first-col{
        margin-top: -3em;
    }
    .second-col{
        justify-items: center;
    }
    .product-sec ul.columns-4{
        grid-template-columns: 1fr !important;
    }
    .product-sec .prod-title {
        font-size: 25px;
    }
    .banner-col .first-col .first-col-grp{
        padding: 0 10px;
    }
}
@media (max-width: 480px) {
    .banner-col .second-col .bg-img img {
        width: auto;
        height: 270px
    } 
  }
@media screen and (min-width: 768px) and (max-width: 991px){
    .product-sec ul.columns-4{
        grid-template-columns: repeat(2, 1fr)!important;
    }
    .second-col .banner-img-grp .shoe-img img{
        height: auto !important;
        margin-top: 98%;
        margin-left: 72px;
    }
    .second-col .bg-img img{
        height: 275px!important;
    }
    .banner-col .first-col{
        flex-grow: initial!important;
        flex-basis: initial!important;
   } 
   .banner-col .second-col{
    flex-grow: initial!important;
    flex-basis: initial!important;
    } 
    .product-sec.mt-5 {
        margin-top: 1rem !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 781px) {
    .banner-grp .wp-block-columns.banner-col{
        flex-wrap: nowrap !important;
        flex-direction: row !important;
        display: flex !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 1200px){
    .banner-grp{
        min-height: 400px;
    }
    .banner-col .first-col .first-col-grp{
        margin-top: 25% !important;
        padding: 0 10px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1200px){
    .second-col .banner-img-grp .shoe-img img{
        height: auto!important;
        width: 390px!important;
        margin-top: 61%;
    }
    .second-col .bg-img img{
        height: 290px!important;
    }
    .banner-col .first-col{
        flex-grow: initial!important;
        flex-basis: initial!important;
   } 
   .banner-col .second-col{
        flex-grow: initial!important;
        flex-basis: initial!important;
    } 
    .banner-grp .banner-col .second-col .banner-img-grp .shoe-img {
        width: 390px!important;
        margin-left: 23%
    }
    .banner-grp .banner-col .second-col .banner-img-grp {
        left: 25%;
    }
    .product-sec.mt-5 {
        margin-top: 6rem !important;
    }
}