@media screen and (min-width:1020px) and (max-width:1400px){
    .icon-menu{
      display: none;
    }
    .sidenav a{
      display: none;
    }
      
    }
      @media screen and (max-width:1020px) {
        
     
        body {
          font-family: "Lato", sans-serif;
        }
        
        .sidenav {
          height: 100%;
          width: 0;
          position: fixed;
          z-index: 1;
          top: 0;
          left: 0;
          background-color: #111;
          overflow-x: hidden;
          transition: 0.5s;
          padding-top: 60px;
          /* text-align:center; */
        }
        
        .sidenav a {
          padding: 8px 8px 8px 32px;
          text-decoration: none;
          font-size: 25px;
          color: #818181;
          display: block;
          transition: 0.3s;
        
        }
        
        .sidenav a:hover{
          color: #f1f1f1;
        }
        
        .sidenav .closebtn {
          position: absolute;
          top: 0;
          right: 25px;
          font-size: 36px;
          margin-left: 50px;
        }
        
       
      }
      @media screen and (max-height: 450px) {
          .sidenav {padding-top: 15px;}
          .sidenav a {font-size: 18px;}
        }

    




/* section css================================>> */


        .col i{
          padding: 5px;

        }
        .col{
          /* max-height: 10px; */
        }
    
        .menu{
          border-right: 1px solid rgb(186, 5, 5);
          border-left: 1px solid rgb(186, 5, 5);
          padding: 10px;
          
        }
        .menu:hover{
            background-color: #111;
            cursor: pointer;
        }


        @media screen and (max-width:1025px) {
            .menu{
                display: none;
            }
            .head{
              display: none;
            }

           .section-11{
            padding-top: 22px;
            padding-left: 15px;
           }
            .nav-2{
                /* flex-grow: 1; */
                /* width: 100%; */
            }
            
         
            .section-3{
                display: none;
            }
            .section-2{
              position: absolute;
              top: 19%;
              left: 35%;
            }

          
            
            
        }
 /* slider-card-section============================>> */
.col{
   /* border: 2px solid red; */
   
   padding: 1rem;
  
 }
 .col img{
  border-radius: 10px;
 }

 .col img:hover{
  /* -webkit-tap-highlight-color: rgba(0,0,0,0); */
  -webkit-filter: grayscale(50%); /* Safari 6.0 - 9.0 */
  filter: grayscale(50%);

 }
 


/* ===============>>multiple-card-section================================>> */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
  .devide{
  
  background-color:lightgray;
  height: 1px;
}
.devider{
  background-color:lightgray;
  height: 1px;
  width: 20%;
  margin: auto;
}
.col{
  /* border: 1px solid red; */
}
.blue-btn button{
font-size: 13px;
border: none;
background-color: #277CD9;
}
.card:hover{
  border: 1px solid #6fbe44;
  cursor: pointer;
}
.images img{
  /* background-color: red; */
  transition: width 1s, height 1s;
  /* padding: 200px; */
}
.images img:hover{

}
.hover button:hover{
/* width: 200px; */


}

/* baje csss========================>> */
.product-label-diagonal.product-label-133 {
  /* display: block; */
  /* position: relative; */
  /* z-index: -1; */
}
.product-label-diagonal {
  top: 0;
  left: 0;
  width: 300px;
  -webkit-transform: translate3d(-130px, 8px, 0) rotate(-45deg);
  transform: translate3d(-130px, 8px, 0) rotate(-45deg);
  font-size: 15px;
  text-align: center;
  position: absolute;
  /* z-index: -1; */
  margin: 0;
  padding: 0;
 

}
.product-label {
  position: relative;
  pointer-events: none;
  -webkit-box-ordinal-group: 6;
  -ms-flex-order: 5;
  /* order: 5; */

}

.images{
  /* background: url('placeholder-550x550.png'); */
  height: 200px;

  background-size: cover;
}


.designs{
  border: 2px solid red;
  /* padding-right: 1rem; */
  margin: 0.1rem;
  /* min-height: 700px;
  max-height: 00px; */

}

.card-para{
  /* border: 2px solid red; */
  min-height: 130px;
  max-height: 130px;
  padding: 0.1rem;
}

.line{
  width: 4%;
  background-color: #6fbe44;
  height: 1px;
}


.sectio-3{
  background-color: black;
}
.sectio-3:hover{
  /* background-color: red; */
  background-color: #6fbe44;
}

.boxes:hover{
  border-color: #6fbe44;
}





/* body-section---------------------------------------------->> */
.body-section{
    background: url('Gift-1400x500w.jpg');
    min-height: 500px;
}

.devider{
    width: 30%;
    background-color:lightgray;
    height: 1px;
}

.devide{
    
    background-color:lightgray;
    height: 1px;
}

.button button{
    /* padding: 1px; */
    font-size: 12px;
    border: none;
   
}
.blue-btn button{
  font-size: 13px;
  border: none;
}

.card .img img:hover{
    height: 200px;
    width: 200px;
}


.icon i{
  background-color:#0D6EFD;
  padding:0.5rem 0.7rem;
  border-radius: 50%;
}

.foo1{
  /* border: 2px solid red; */
}

.opacity > div{
  opacity: 0.8;
  font-weight:600 ;
}


@media screen and (max-width:480px) {
  .card-section{
    /* flex-direction: column; */
    /* width: 50%; */
    /* flex-wrap: wrap; */
  }
  
}