*{
  box-sizing: border-box;
}

.main-heading{
  width: fit-content;
  margin: 20px auto 20px;
  background-image: url(../image/wave.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding-bottom: 25px;
  h2{
    color: #333;
    font-weight: bold;
    font-size: 40px;
    span{
      color: #3BB77E;
    }
  }
  h1{
    color: #333;
    font-weight: bold;
    font-size: 48px;
    span{
      color: #3BB77E;
    }
  }
}

body{
  font-family: "Lato",sans-serif;
  color: #7E7E7E;
  font-weight: 400;
  font-style: normal;

}
a{
  color:#333;
}
.sticky{
  position: fixed;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.05);
  top: 0;
  left: 0;
  width: 100%;
}
@media only screen and (min-width: 1200px) {
  .container {
      max-width: 1610px;
  }
}
.container{

  margin: 0 auto;
}

a{
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
}

input:focus{
  outline: none;
}
.nav{
  border-bottom: 1px solid #dbdbdb;
  .container{
    display: flex;
    align-items: center;
  .header-form{
      height: 50px;
      margin: 0 30px;
      display: flex !important;
      border: 2px solid #9ddbc9;
      border-radius: 6px;
      position: relative;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      .select2-container{
        margin: 0 10px;
        height: 50px;
        .select2-selection{
          box-shadow: none !important;
        }
        .select2-selection__rendered{
          height: 50px;
          line-height: 50px !important;
          font-weight: 500;
          color: black ;
        }
        .select2-selection__arrow{
          height: 50px !important;
        }
        
      }
      .select2-container::before{
        content: "";
      }
      .select2{
        display: inline-block;
        }
      input{
        border: none;
        border-bottom:  2px solid #9ddbc9;
        height: 48px;
        width: 500px;
        margin-left:20px ;
        position: relative;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
      }
      input:focus{
        outline: none;
      }
      .input{
        position: relative;
      }
      .input::before{
        content: "";
        width: 1px;
        height: 20px;
        position: absolute;
        left: 0px;
        top:  15px;
        background-color: #dbdbdb;
      }
  span.select2-selection{
    border: 0;
  }
  }
  .header-form::after{
    font-family: "font awesome 6 free";
    content: "\f002";
    font-weight: 600;
    font-size: 20px;
    position: absolute;
    right: 10px;
    top: 8px;
    color: #afafaf;
  }

}
.select2-container{
  display: none;
  margin: 0 10px;
  height: 50px;
  @media only screen and (min-width: 1200px){
    display: block;
  }
  .select2-selection {
    border: 0;
    height: 40px;
    line-height: 40px;
    padding-left: 13px;
    width: 164px;
    max-width: unset;
    border-radius: 5px;
    background-color: #fff;
    border: 1px solid #ececec;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);

  }
  .select2-selection__rendered{
    height: 40px;
    line-height: 35px;
    position: relative;
    color: #3BB77E;
    font-weight: 400;
    
    margin-left: 12px;
  }
  .select2-selection__arrow{
    top: 7px;
    right: 6px;
  }
  
}
.select2-container{
  width: 164px !important;
}
.select2-container::before{
  font-family: "font awesome 6 free" !important;
  content: "\f3c5";
  font-weight: 900;
  font-size: 18px;
  position: absolute;
  left: 10px;
  top: 7px;
  color: #afafaf;
}
.navigation{
  display: flex;
  align-items: center;
    justify-content: space-between;
    margin: 0 20px;
    .cart:hover .cart-in{
      display: block;
      top: 30px;
    }
  div{
    display: inline-block;
    margin: 0 6px;
    position: relative;
    i{
      font-size: 22px;
      margin-bottom: 10px;
      position: relative;
    }
    i::after{
      content: attr(data-num);
      position: absolute;
      top: -50%;
      right: -50%;
      width: 20px;
      height: 20px;
      background-color: #3BB77E;
      border-radius: 50%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      -ms-border-radius: 50%;
      -o-border-radius: 50%;
      font-size: 10px;
      display: grid;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .nerf::after{
      content: "";
      background-color: transparent;
    }
    .cart-in{
      transition: 0.3s !important;
      display: none;
      position: absolute;
      top: 50px;
      right: 0;
      width: 290px;
      background-color: white;
      box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
      padding: 20px 15px;
      border-radius:6px ;
      border: #ececec 1px solid;
      -webkit-transition: 0.3s !important;
      -moz-transition: 0.3s !important;
      -ms-transition: 0.3s !important;
      -o-transition: 0.3s !important;
      -webkit-border-radius:6px ;
      -moz-border-radius:6px ;
      -ms-border-radius:6px ;
      -o-border-radius:6px ;
      z-index: 10000;
      .item{
        display: flex;
        margin-bottom: 20px;
        position: relative;
        img{
          max-width: 100%;
          width: 80px;
          height: 80px;
        }
        .text{
          .tag{
            a{
              color: #3BB77E;
            }
          }
        }
      }
      .item::after{
        content: "+";
        position: absolute;
        top: -10px;
        right: -15px;
        color: #868686;
        font-size: 28px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -o-transform: rotate(45deg);
      }
      hr{
        color: #e4e4e4;
        border: 1px solid #e4e4e4;
      }
      .total{
        display: flex;
        justify-content: space-between;
        margin: 0;
        .left{
          button:hover{
            background-color: #ffc107;
            color: white;
          }
          p{
            color: #afafaf;
            font-size: 18px;
            font-weight: bold;
          }
          button{
            background-color: white;
            color: #3BB77E;
            border: 2px solid #3BB77E;
            padding: 5px 15px;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
}
        }
        .right{
          button:hover{
            background-color: #ffc107;
            
          }
          p{
            color: #3BB77E;
            font-size: 20px;
            font-weight: bold;
            text-align: end;
          }
          button{
            color: white;
            background-color: #3BB77E;
            border: 2px solid #3BB77E;
            padding: 5px 15px;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
}
        }
      }
    }

  }
}
}
/* ############################################################################################################################################################### */

.select2-dropdown{
  width: 220px ;
  border: 1px solid #ececec;
  border-radius: 0 0 4px 4px;
  padding: 15px;
  min-width: 220px;
  left: -20px;
  
  }
  input{
    border:  1px solid #9ddbc9 ;
    border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
  }
  .select2-results__option{
    color: #868686;
  }
  .select2-results__option:hover{
    background-color: #9ddbc9;
    color: #868686;
  }
  .select2-results__option--highlighted{
    background-color: #9ddbc9;
  }
  


/* ############################################################################################################################################################### */


.nav2{
  transition: .5s;
  background-color: white;
  z-index: 10000000000;
  border-bottom: 1px solid #dbdbdb;
  -webkit-transition: .5s;
  -moz-transition: .5s;
  -ms-transition: .5s;
  -o-transition: .5s;
  .container{
    display: flex;
    padding:  15px 0;
    position: relative;
    .category{
      height: 44px;
      padding: 10px 20px 10px 40px;
      background-color: #3BB77E;
      color: #fff;
      display: inline-block;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      position: relative;
      p{
        margin: 0;
        font-weight: bold;
        position: relative;
        display: inline-block;
      }
      i{
        font-weight: 700;
        display: inline-block;
        margin-left: 10px;
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
      }
      .cate-in{
        background-color: white;
        z-index: 1100;
        position: absolute;
        color: black;
        top: 65px;
        left: 0px;
        display: none;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #9ddbc9;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        width: max-content;
        padding: 20px;
        max-height:367px;
        ul{
          padding: 0;
          list-style: none;
          margin-right: 15px;
          li{
            text-align: start;
            padding: 9px 18px;
            border: 1px solid #F2F3F4;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            margin-bottom: 15px;
            cursor: pointer;
            transition: .5s;
            -webkit-transition: .5s;
            -moz-transition: .5s;
            -ms-transition: .5s;
            -o-transition: .5s;
            img{
              width: 30px;
              height: 30px;
              margin: 0 10px 0 0 ;
            }
            p{
              color: #253D4E;
              font-size: 14px;
              font-weight: bold;
              transition: .5s;
              -webkit-transition: .5s;
              -moz-transition: .5s;
              -ms-transition: .5s;
              -o-transition: .5s;
}
          }
          li:hover{
            box-shadow:5px 5px 15px rgba(0, 0, 0, 0.05) ;
            border-color: #3BB77E;
            p{
              color: #3BB77E;
            }
          }
        }
}
    }
    .category::before{
      font-family: "font awesome 6 free";
      content: "\f009";
      font-weight: 700;
      position: absolute;
      top: 10px;
      left: 15px;
    }
    .navs{
      display: flex;
      align-items: center;
      .deals{
        margin: 0 30px 0 0 !important;
        i{
          font-size: 25px !important;
          color: #3BB77E;
        }
      }
      .active{
        font-weight:bold;
        color: #3BB77E !important;
        
      }
      .navegate{
        height: 100%;
        background-color: transparent;
        color: black;
        margin: 0 20px;
        display: flex;
        align-items: center;
        font-weight: 600;
        position: relative;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        i.fa-angle-down{
          margin: 5px 0 0 10px;
          font-size: 15px;
        }
        p{
          margin: 0;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
        }
        .mega-down{
          position: absolute;
          left: 0;
          top: 100%;
          background-color: #ffffff;
          width: 100%;
          padding: 35px 25px 35px 35px;
          transition: all 0.25s ease 0s;
          opacity: 0;
          visibility: hidden;
          margin-top: 20px;
          border-radius: 0 0 10px 10px;
          z-index: 99900000;
          border: 1px solid #ececec;
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          display: flex;
          justify-content: space-between;
          ul{
            margin-bottom: 20px;
            h2{
              font-size: 20px;
              color: #3BB77E;
              margin: 20px 0 ;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              cursor: pointer;
            }
            li{
              margin-bottom: 10px;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              cursor: pointer;
            }
            h2:hover{
              color: #ffc107;
            }
            li:hover{
              color: #3BB77E;
            }
          }
          .banner{
            position: relative;
            .sale{
              position: absolute;
              top: 13%;
              right: 7%;
              width: 80px;
              height: 80px;
              border-radius:50% ;
              -webkit-border-radius:50% ;
              -moz-border-radius:50% ;
              -ms-border-radius:50% ;
              -o-border-radius:50% ;
              font-size: 20px;
              background-color: #ffd55a;
              text-align: center;
              padding: 10px;
              color: #333;
            }
            .text{
              position: absolute;
              top: 20px;
              left: 20px;
              h4{
                color: #333;
                font-size: 18px;
                font-weight: lighter;
              }
              h3{
                width: 160px;
                color: #333;
                font-weight: bold;
              }
              p{
                font-weight: bold;
                font-size: 24px;
                color: #8BC34A;
                margin: 10px 0;
              }
              button{
                border: none;
                padding: 5px 20px ;
                background-color: #3BB77E;
                border-radius: 30px;
                -webkit-border-radius: 30px;
                -moz-border-radius: 30px;
                -ms-border-radius: 30px;
                -o-border-radius: 30px;
                font-size: 18px;
                color: white !important;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                font-weight: bold;
                a{
                  color: white !important;
                }
            }
              
            }
          }
          .banner:hover{
            .text{
              button{
                background-color: #fd6e6e;
              }
            }
          }

        }
        
        .down{
          position: absolute;
          left: 0;
          top: 100px;
          background-color: #ffffff;
          min-width: 250px;
          padding: 20px 20px;
          opacity: 0;
          visibility: hidden;
          margin-top: 12px;
          border-radius: 10px;
          z-index: 999000000000000;
          border: 1px solid #ececec;
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          transition: 0.3s;
          -webkit-transition: 0.3s;
          -moz-transition: 0.3s;
          -ms-transition: 0.3s;
          -o-transition: 0.3s;
          li:not(:last-of-type){
            margin-bottom: 21px;
          }
          li{
            font-size: 14px;
            color: #999999;
            cursor: pointer;
          }
          li:hover{
            color: #3BB77E;
          }
          .drop-in{
            display: flex;
            justify-content: space-between;
            position: relative;
            ul{
              position: absolute;
              left: 100%;
              top: -100px;
              background-color: #ffffff;
              width: 240px;
              padding: 20px 20px;
              transition: all 0.25s ease 0s;
              opacity: 0;
              visibility: hidden;
              border-radius: 10px;
              margin-top: 20px;
              border: 1px solid #ececec;
              box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
              li{
                a{
                  display: flex;
                  justify-content: space-between;
                }
              }
            }
          }
          .drop-in:hover{
            ul{
              visibility: visible;
              opacity: 1;
              top: -110px;
            }
          }

        }
      }
      .navegate:hover p{
        color: #3BB77E;
      }
      .navegate:hover i.fa-angle-down{
        color: #3BB77E;
      }
      .navegate:hover .down{
        opacity: 1;
        visibility: visible;
        top: 38px !important;
      }
      .navegate:hover{
        .mega-down{
          visibility: visible;
          opacity: 1;
          top: 55px !important;
        }
      }
      .mega{
        position: static;
      }
    }
    .support{
      display: flex;
      height: 50px;
      margin-left: 140px;
      i{
        font-size: 50px;
        margin: 0 10px 0 0;
        color: black;

      }
      .text{
        span{
          display: block;
          color: #3BB77E;
          font-size: 25px;
          font-weight: bold;
  
  
        }
        p{
          font-size: 14px;
          color: #333;
          margin: 0;
          
        }
      }
    }
  }
}

/* ############################################################################################################################################################### */


.land{
  .container{
    .slide{
      .slide1,
      .slide2{
        .content{
          padding: 60px;
          @media only screen and (max-width: 800px){
          padding:  20px;
            
          }
          
          h2{
            font-size: 75px;
            color: #333;
            margin: 20px;
            @media only screen and (max-width: 800px){
              font-size: 48px;
                
              }
          }
          p{
            font-size: 30px;
            margin: 0 20px 20px;
          }
          form{
            max-width: 450px;
            margin-top: 40px;
            position: relative;
            input{
              border: 0;
              border-radius:  50px;
              padding-left: 58px;
              height: 64px;
              box-shadow: none;
              font-size: 16px;
              width: 100%;
              margin-bottom: 20px;
            }
            button{
              border: 0;
              border-radius:50px ;
              -webkit-border-radius:50px ;
              -moz-border-radius:50px ;
              -ms-border-radius:50px ;
              -o-border-radius:50px ;
              height: 64px;
              font-size: 16px;
              padding: 0 30px ;
              position: absolute;
              top: 0;
              right: 0;
              background-color: #3BB77E;
              color: white !important;
            }
          }
        }
      }
      .slick-next::before{
        content: "\f105";
        font-family: "font awesome 6 free";
        position: relative;
        display: inline-block;
        background-color: #f2f3f4;
        color: #3333338c;
        font-weight: 700;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
      }
      .slick-next{
        right: 40px;
      }
      .slick-prev{
        left: 10px;
        z-index: 1000;
      }
      .slick-dots{
        bottom: 10px;
        li{
          button::before{
            width: 20px;
            height: 20px;
            background-color: #3BB77E;
            color: #3BB77E;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            border: 1px solid black;
        }
        }
      }
      .slick-prev::before{
        content: "\f104";
        font-family: "font awesome 6 free";
        position: relative;
        background-color: #f2f3f4;
        color: #3333338c;
        display: inline-block;
        font-weight: 700;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
}
      .slick-next:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .slick-prev:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .slide1{
        background-image:url(../image/slider-1.png) ;
        position: relative;;
        border-radius: 30px;
        background-size: cover;
        background-position: center center;
      }
      .slide2{
        background-image: url(../image/slider-2.png);
        position: relative;
        border-radius: 30px;
        background-size: cover;
        background-position: center center;
      }
    }
  }
}
/* ############################################################################################################################################################### */


.cate-section{
  margin: 40px 0;
  .container{
    .header{
      display: flex;
      margin-bottom: 15px;
      h2{
        font-size: 35px;
        color: #333;
        font-weight: bold;
      }
      .list{
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        p{
          margin: 0 20px;
          color: #333;
          font-weight: bold;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
        } 
        p:hover{
          margin-bottom: 10px;
          color: #3BB77E;
        }
        .active{
          color: #3BB77E;
        }
      }
    }
    .content{
      .slick-next::before{
        content: "\f105";
        font-family: "font awesome 6 free";
        position: relative;
        display: inline-block;
        background-color: #f2f3f4;
        color: #3333338c;
        font-weight: 700;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
      }
      .slick-next{
        top: -75px;
        right: 33px;
      }
      .slick-prev{
        top: -75px;
        z-index: 10;
        left: 93%;
      }
      .slick-prev::before{
        content: "\f104";
        font-family: "font awesome 6 free";
        position: relative;
        background-color: #f2f3f4;
        color: #3333338c;
        display: inline-block;
        font-weight: 700;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
}
      .slick-next:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .slick-prev:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .cate-card{
        position: relative;
        background: #F2FCE4;
        text-align: center;
        border: 1px solid #F4F6FA;
        border-radius: 10px;
        padding: 20px 0px 18px 0px;
        min-height: 180px;
        transition: 0.2s;
        margin:  0 12px 20px;
        img{
          width: 80px;
          height: 80px;
          margin: 0 auto;
        }
        p{
          margin-bottom: 5px;
          font-size: 14px;
          transition: 0.2s;
        }
        .name{
          font-size: 18px;
          color: #333;
          font-weight: bold;
        }
      }
      .bg-1{
        background-color: #F2fce4 !important;
      }
      .bg-2{
        background-color: #Fffceb !important;
      }
      .bg-3{
        background-color: #ecffec !important;
      }
      .bg-4{
        background-color: #feefea !important;
      }
      .cate-card:hover{
        border: 1px solid #3BB77E;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        .name{
          color: #3BB77E;
        }
      }
    }
  }
}
/* ############################################################################################################################################################### */

.bannar-section{
  .container{
    .row{
      .col-12{
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        overflow: hidden;
        position: relative;
        margin-bottom: 20px;
        img{
          border-radius: 6px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          -o-border-radius: 6px;
        }
        .content{
          position: absolute;
          top: 50px;
          left: 50px;
          p{
            transition: .3s;
            font-size: 25px;
            color: #333;
            margin-top: 20px;
            font-weight: bold;
            width: 250px;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          button{
            transition: .3s;
            border: 0;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            padding: 5px 15px;
            color: white;
            background-color: #3BB77E;
            font-size: 14px;
            font-weight: bold;
            margin-top: 10px;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            i{
              margin-left: 10px;
              font-size: 10px;
            }
          }
          button:hover{
            background-color: #ffc107;
            padding-right: 20px;
          }
        }
        .content:hover{
          p{
            margin: 10px 0 26px;

          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################### */

.shop{
  margin-top: 50px;
  .container{
    .header{
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      h2{
        font-size: 35px;
        color: #333;
        font-weight: bold;
      }
      .list{
        display: flex;
        align-items: center;
        margin-left: 10px;
        flex-wrap: wrap;
        p{
          margin: 0 10px;
          color: #333;
          font-weight: bold;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
        } 
        p:hover{
          margin-bottom: 10px;
          color: #3BB77E;
        }
        .active{
          color: #3BB77E;
        }
      }
    }
    .content{
      .row{
        .col-12{
          margin-bottom: 20px;
          .prod-cont{
            position: relative;
            background-color: #fff;
            border: 1px solid #ececec;
            border-radius: 15px;
            overflow: hidden;
            transition: 0.2s;
            -moz-transition: 0.2s;
            -webkit-transition: 0.2s;
            -o-transition: 0.2s;
            position: relative;
            padding: 20px;
            .img-container{
              position: relative;
              .img{
                max-width: 100%;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              .img-alt{
                position: absolute;
                max-width: 100%;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                visibility: hidden;
                opacity: .25;
                left: 0;
              }
            }
            .sales{
              z-index: 10;
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
              font-size: 12px;
              line-height: 1;
              border-radius: 15px 0 20px 0;
              color: #fff;
              padding: 9px 20px 10px 20px;
            }
            .hot{
              background-color: #f74b81;;
            }
            .sale{
              background-color: #67bcee;
            }
            .new{
              background-color: #3BB77E;
            }
            .num{
              background-color: #f59758;
            }
            .text{
              .spon{
                font-size: 12px;
              }
              .name{
                color: #333;
                font-size: 18px;
                font-weight: bold;
              }
              .star{
                margin-bottom: 10px;
                i{
                  color: #ffc107;
                  font-size: 10px;
                }
                i:last-of-type{
                  color: #333;
                }
              }
              .by{
                font-size: 14px;
                span{
                  color: #3BB77E;
                }
              }
              .price{
                display: flex;
                justify-content: space-between;
                p{
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 18px;
                  del{
                    color: #868686;
                    font-size: 14px;
                    margin-left: 10px;
                    font-weight: bold;
                  }
                }
                button{
                  border:0;
                  margin-bottom: 10px;
                  background-color: #d3fff2;
                  padding: 5px 20px;
                  color: #3BB77E;
                  transition: .3s;
                  -webkit-transition: .3s;
                  -moz-transition: .3s;
                  -ms-transition: .3s;
                  -o-transition: .3s;
                  border-radius: 4px;
                  -webkit-border-radius: 4px;
                  -moz-border-radius: 4px;
                  -ms-border-radius: 4px;
                  -o-border-radius: 4px;
                }
                button:hover{
                color: white;
                  background-color: #3BB77E;
                }
            }
            }
          }
        }
        .col-12:hover{
          .prod-cont{
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
            border: 1px solid #3BB77E;
            .img{
              opacity: .25;
              visibility: hidden;
              transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
            }
            .img-alt{
              visibility: visible;
              opacity: 1;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
            }
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################### */

.product-slider{
  margin-top: 30px;
  .container{
    .header{
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        h2{
          font-size: 35px;
          color: #333;
          font-weight: bold;
        }
        .list{
          display: flex;
          align-items: center;
          margin-left: 10px;
          p{
            margin: 0 20px;
            color: #333;
            font-weight: bold;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          } 
          p:hover{
            margin-bottom: 10px;
            color: #3BB77E;
          }
          .active{
            color: #3BB77E;
          }
        }
      }
    display: flex;
    .banner{
      border-radius: 15px;
      overflow: hidden;
      height: 520px;
      background: url(../image/banner-4.png) no-repeat center bottom;
      background-size: cover;
      padding: 50px;
      h3{
        font-size: 40px;
        font-weight: bold;
        width: 250px;
        color: #333;
        margin-bottom: 70px;
        top: 30px;
      }
      button{
        transition: .3s;
        border: 0;
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        padding: 5px 15px;
        color: white;
        background-color: #3BB77E;
        font-size: 14px;
        font-weight: bold;
        margin-top: 10px;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        i{
          margin-left: 10px;
          font-size: 10px;
        }
      }
      button:hover{
        background-color: #ffc107;
        padding-right: 20px;
      }
    }
    .slide{
      .slick-next::before{
        font-family: "font awesome 6 free";
        position: relative;
        display: inline-block;
        background-color: #f2f3f4;
        color: #3333338c;
        font-weight: 700;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        margin-bottom: 30px;
      }
      .slick-next{
        top: 40%;
        right: 60px;
        margin-bottom: 30px;
      }
      .slick-prev{
        top: 40%;
        left: 50px;
        z-index: 1000;
        margin-bottom: 30px;
      }
      .slick-prev::before{
        font-family: "font awesome 6 free";
        position: relative;
        background-color: #f2f3f4;
        color: #3333338c;
        display: inline-block;
        font-weight: 700;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        font-size: 18px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        margin-bottom: 30px;
      }
      .slick-next:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .slick-prev:hover::before{
        background-color:#3BB77E;
        color:white;
      }
      .product{
        width: 278px;
        position: relative;
        background-color: #fff;
        border: 1px solid #ececec;
        border-radius: 15px;
        overflow: hidden;
        transition: 0.2s;
        -moz-transition: 0.2s;
        -webkit-transition: 0.2s;
        -o-transition: 0.2s;
        margin: 10px 7px;
        position: relative;
        padding: 20px;
        .img-container{
          position: relative;
          .img{
            max-width: 100%;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          .img-alt{
            position: absolute;
            max-width: 100%;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            visibility: hidden;
            opacity: .25;
            left: 0;
            top: 0;
          }
        }
        .sales{
          z-index: 10;
          position: absolute;
          top: 0;
          left: 0;
          display: inline-block;
          font-size: 12px;
          line-height: 1;
          border-radius: 15px 0 20px 0;
          color: #fff;
          padding: 9px 20px 10px 20px;
        }
        .hot{
          background-color: #f74b81;;
        }
        .sale{
          background-color: #67bcee;
        }
        .new{
          background-color: #3BB77E;
        }
        .num{
          background-color: #f59758;
        }
        .text{
          .spon{
            font-size: 12px;
          }
          .name{
            color: #333;
            font-size: 18px;
            font-weight: bold;
          }
          .star{
            margin-bottom: 10px;
            i{
              color: #ffc107;
              font-size: 10px;
            }
            i:last-of-type{
              color: #333;
            }
          }
          .by{
            font-size: 14px;
            span{
              color: #3BB77E;
            }
          }
          .price{
            display: flex;
            justify-content: space-between;
            p{
              color: #3BB77E;
              font-weight: bold;
              font-size: 18px;
              del{
                color: #868686;
                font-size: 14px;
                margin-left: 10px;
                font-weight: bold;
              }
            }
            button{
              border:0;
              margin-bottom: 10px;
              background-color: #d3fff2;
              padding: 5px 20px;
              color: #3BB77E;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              border-radius: 4px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              -ms-border-radius: 4px;
              -o-border-radius: 4px;
            }
            button:hover{
            color: white;
              background-color: #3BB77E;
            }
          }
        }
      }
      .product:hover{
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #3BB77E;
        .img{
          opacity: .25;
          visibility: hidden;
          transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
        }
        .img-alt{
          visibility: visible;
          opacity: 1;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;

          transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
        }
        }
    }
  }
}
/* ############################################################################################################################################################### */

.countdown-section{
  margin-bottom: 10rem;
  .container{

    .count-product{
      position: relative;
      img{
        border-radius: 6px;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
      }
      .content{
        transition: .3s;
        position: absolute;
        left: 50%;
        top: 95%;
        transform: translate(-50%, -50%);
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        .count-num{
          width: 300px;
          text-align: center;
          div{
            background-color: white;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            display: inline-block;
            height: fit-content;
            padding: 10px;
            width: 60px;
            height: 65px;
            margin: 0 5px;
            .num{
            display: inline-block;
            color: #3BB77E;
            font-weight: 500;
            font-size: 20px;
            line-height: 1;
            text-align: center;
            font-family: "Quicksand", sans-serif;
            }
            .text{
              font-size: 18px;
              display: block;
              text-align: center;
              margin: 0 auto;
            }
          }
        }
        
        .count-text{
          width: 300px;
          background-color: white;
          padding: 20px;
          margin: 15px auto ;
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          border-radius: 6px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          -o-border-radius: 6px;
          .spon{
            font-size: 12px;
          }
          .name{
            color: #333;
            font-size: 18px;
            font-weight: bold;
          }
          .star{
            margin-bottom: 10px;
            i{
              color: #ffc107;
              font-size: 10px;
            }
            i:last-of-type{
              color: #333;
            }
          }
          .by{
            font-size: 14px;
            span{
              color: #3BB77E;
            }
          }
          .price{
            display: flex;
            justify-content: space-between;
            p{
              color: #3BB77E;
              font-weight: bold;
              font-size: 18px;
              del{
                color: #868686;
                font-size: 14px;
                margin-left: 10px;
                font-weight: bold;
              }
            }
            button{
              border:0;
              margin-bottom: 10px;
              background-color: #d3fff2;
              padding: 5px 20px;
              color: #3BB77E;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              border-radius: 4px;
              -webkit-border-radius: 4px;
              -moz-border-radius: 4px;
              -ms-border-radius: 4px;
              -o-border-radius: 4px;
            }
            button:hover{
            color: white;
              background-color: #3BB77E;
            }
          }
        }
      }
      .content:hover{
        top: 93%;
      }
    }
  }
}

/* ############################################################################################################################################################### */
.activity-section{
  .container{
    .col-12 {
      padding: 10px;
      .header{
        position: relative;
        border-bottom: 1px solid #ececec;
        padding-bottom: 20px;
        font-size: 24px;
        margin-top: 0;
        color: #333;
      }
      .header::before{
        content: "";
        width: 80px;
        height: 2px;
        position: absolute;
        bottom: 0;
        left: 0;
        background-color: #BCE3C9;

      }
      ul{
        padding: 0;
        margin-top: 15px;
        li{
          display: flex;
          margin-bottom: 15px;
          transition: .3s;

          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          img{
            width: 110px;
            height: 110px;
            border-radius: 6px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
          }
          .text{
            margin-left: 20px;
            p{
              font-size: 18px;
              color: #333;
              margin: 0;
            }
            .star{
              margin-bottom: 10px;
              i{
                color: #ffc107;
                font-size: 10px;
              }
              i:last-of-type{
                color: #333;
              }
            }
            .price{
              display: flex;
              justify-content: space-between;
              p{
                color: #3BB77E;
                font-weight: bold;
                font-size: 18px;
                del{
                  color: #868686;
                  font-size: 14px;
                  margin-left: 10px;
                  font-weight: bold;
                }
              }
            }
          }
        }
        li:hover{
          transform: translateY(-6px);
          -webkit-transform: translateY(-6px);
          -moz-transform: translateY(-6px);
          -ms-transform: translateY(-6px);
          -o-transform: translateY(-6px);
}
      }
    }
  }
}
/* ############################################################################################################################################################### */
.form-section{
  margin-bottom: 10px;
  padding: 10px;
  .container{
    background: url(../image/banner-10.png) no-repeat center;
    background-size: cover;
    padding: 84px 78px;
    clear: both;
    display: table;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    min-height: 230px;
    position: relative;
    .content{

      .text{
        h2{
          color: #333;
          font-size: 50px;
  
        }
        p{
          color: #333;
          margin-top: 10px;
          margin-bottom: 10px;
          font-size: 20px;
          span{
            
            color: #3BB77E;
          }
        }
      }
      form{
        max-width: 450px;
        margin-top: 40px;
        position: relative;
        input{
          border: 0;
          border-radius:  50px;
          padding-left: 58px;
          height: 64px;
          box-shadow: none;
          font-size: 16px;
          width: 100%;
        }
        button{
          border: 0;
          border-radius:50px ;
          -webkit-border-radius:50px ;
          -moz-border-radius:50px ;
          -ms-border-radius:50px ;
          -o-border-radius:50px ;
          height: 64px;
          font-size: 16px;
          padding: 0 30px ;
          position: absolute;
          top: 0;
          right: 0;
          background-color: #3BB77E;
          color: white !important;
        }
      }
      form::before{
        content: "\f1d8";
        font-family: "font awesome 6 free";
        font-weight: 400;
        position: absolute;
        top: 50%;
        left: 25px;
        transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        -o-transform: translateY(-50%);
        font-size: 18px;
}
    }
    img{
      position: absolute;
    right: 50px;
    bottom: 0;
    max-width: 40%;
    }
  }
/* ############################################################################################################################################################### */
}
/* ############################################################################################################################################################### */

.end-section{
  margin-top:20px ;
  .container{
    .col-12{
      margin-bottom: 10px;
      .con{
        position: relative;
        background: #F4F6FA;
        padding: 20px;
        border-radius: 10px;
        display: flex;
        img{
          width: 60px;
          height: 60px;
          margin-right: 10px;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
        }
        img:hover{
          transform: translateY(-5px);
          -webkit-transform: translateY(-5px);
          -moz-transform: translateY(-5px);
          -ms-transform: translateY(-5px);
          -o-transform: translateY(-5px);
        }
        .text{
          padding: 10px;
          h4{
            color: #242424;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 5px;
          }
          p{
            margin-bottom: 0;
            color: #adadad;
          }
        }
      }
    }
  }
}
/* ############################################################################################################################################################### */

footer{
  margin-top: 50px;
  .container{
    .first.row{
      padding:  20px 0;
      border-bottom: 1px solid #3BB77E;
      .social{
        .logo-section{
          img{
            margin-bottom: 20px;
          }
          i{
            display: inline-block;
          }
          p{
            display: inline-block;
            color: #333;
            font-size: 16px;
          }
        }
        .social-li{
          margin-top: 10px;
          div{
            display: flex;
            margin-bottom: 10px;
            i{
              margin-right: 7px;
              margin-top: 5px;
              color: #3BB77E;
              font-size: 18px;
            }
            p{
              margin: 0;
              display: inline-block;
              font-size: 16px;
              color: #333;
              span{
                text-align: center;
              }
            }
          }
        }
      }
      .company{
        width: 200px;
        p{
          margin: 0;
        }
        ul{
          padding: 0;
          li{
            margin-bottom: 15px;
            color: #242424;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          li:hover{
            color: #3BB77E;
            margin-left: 5px;
          }
          
        }
      }
      .colums{
        p{
          color: #242424;
          font-size: 24px;
          font-weight: bold;
        }
        ul{
          padding: 0;
          li{
            margin-bottom: 15px;
            color: #242424;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          li:hover{
            color: #3BB77E;
            margin-left: 5px;
          }
          
        }
      }
      .last-column{
        .install{
          .text{
            h2{
              font-weight: bold;
              font-size: 30px;
              margin-bottom: 20px;
              color: #242424;
            }
            p{
              color: #333;
            }
          }
          .img{
            img{
              max-width: 128px;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              margin-right: 10px;
              display: inline-block;
              
            } 
            img:hover{
              transform: translateY(-10px);
              -webkit-transform: translateY(-10px);
              -moz-transform: translateY(-10px);
              -ms-transform: translateY(-10px);
              -o-transform: translateY(-10px);
            }
          }
        }
        .visa{
          margin-top: 50px;
          p{
            color: #333;
          }
          img{
            max-width: 100%;
          }
        }
      }
    }
    .second{
      display: flex;
      justify-content: space-between;
      padding:  30px 0;
      .copyright{
        p{
          font-size: 14px;
          span{
            color: #3BB77E;
            font-weight: bold;
          }
        }
      }
      .contact{
        display: flex;
        .right,
        .left{
          margin-right: 20px;
          display: flex;
          i{
            font-size: 50px;
          }
          .text{
            h2{
              color: #3BB77E;
              font-size: 24px;
              font-weight: bold;
              margin-bottom: 0;
            }
            p{
              font-size: 14px;
              margin: 0;
            }
          }
        }
      }
      .social{
        .follow{
          display: flex;
          p{
            margin-bottom: 0;
            color: #333;
            font-weight: bold;
            margin-right: 15px;
            font-size: 18px;
          }
          i{
            margin: 0 3px;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            background-color: #3BB77E;
            color: white;
            display: grid;
            align-items: center;
            justify-content: center;
            font-size: 14px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          i:hover{
            transform: translateY(-3px);
            -webkit-transform: translateY(-3px);
            -moz-transform: translateY(-3px);
            -ms-transform: translateY(-3px);
            -o-transform: translateY(-3px);
          }
        }
        p{
          font-size: 14px;
        }
      }
    }
  }
}

/* ************************************************************************************************************************************************************** */
/* ############################################################################################################################################################# */

/*                                                                     wishlist                                                                */



.top-section{
  border-bottom: 1px solid #dbdbdb;
  margin-bottom: 10px;
  .container{
    p{
      margin-bottom: 0;
      padding: 20px;
      span{
        color:#3BB77E;
      }
      i.fa-angle-right{
        margin-right: 10px ;
        margin-left: 10px ;
        font-size: 8px;
        transform: translateY(-2px);
        -webkit-transform: translateY(-2px);
        -moz-transform: translateY(-2px);
        -ms-transform: translateY(-2px);
        -o-transform: translateY(-2px);
}
      i:first-of-type{
        color: #3BB77E;
        margin-right: 10px;
      }
    }
  }
}

.main-section{
  margin-bottom: 50px;
  .container{
    .wish-products{
      .wish{
        padding: 10px;
        .wish-header{
          padding: 15px;
          background-color: #ececec;
          .left,
          .right{
            display: flex; 
            p{
              margin-bottom: 0;
              margin-right: 30px;
              margin-left: 30px;
              color: #242424;
              font-weight: bold;
              font-size: 18px;
            }
          }
          .left{
            input{
              background-color: #ececec;
              border: 2px solid #ced4da;
              border-radius: 0;
              -webkit-border-radius: 0;
              -moz-border-radius: 0;
              -ms-border-radius: 0;
              -o-border-radius: 0;
              width: 20px;
              height: 20px;
            }
            input:checked{
              background-color: #3BB77E;
              border: 0;
              box-shadow: none;
            }
            input:focus{
              outline: 0;
              box-shadow: none;
            }
          }
          .right{
            p{
              margin-right: 20px;
              margin-left: 20px;
            }
            p:last-of-type{
              margin-left: 45px;
            }
          }
        }
        .wish-content{

          .wish-product{
            padding:40px 15px ;
            border: 1px solid #e9ecef;
            .col-6{
              display: flex;
              align-items: center;
            }
            .left{
              img{
                width: 120px;
                height: 120px;
                border: 1px solid #e9ecef;
                margin: 0 20px;
                border-radius: 20px;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                -ms-border-radius: 20px;
                -o-border-radius: 20px;
              }
              input{
                
                border: 2px solid #ced4da;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                width: 20px;
                height: 20px;
              }
              input:checked{
                background-color: #3BB77E;
                border: 0;
                box-shadow: none;
              }
              input:focus{
                outline: 0;
                box-shadow: none;
              }
              .text{
                p{
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 16px;
                  margin-bottom: 0;
                }
                .star{
                  margin-bottom: 10px;
                  i{
                    color: #ffc107;
                    font-size: 10px;
                  }
                  i:last-of-type{
                    color: #333;
                  }
                }
              }
            }
            .right{
              div{
                margin: 0 30px;
              }
              .unit-price{
                margin-left: 30px;
                font-weight: bold;
                font-size: 20px;
              }
              .quantity{
                .stock{
                  position: relative;
                  margin: 0 20px;
                  background: #fff;
                  border: 2px solid #3BB77E !important;
                  font-size: 16px;
                  font-weight: 700;
                  color: #3BB77E;
                  border-radius: 5px;
                  padding: 11px 20px 11px 30px;
                  max-width: 90px;
                  input{
                    width: 30px;
                    border: 0;
                  }
                  .up-q{
                    cursor: pointer;
                    position: absolute;
                    right: 8px;
                    color: #3BB77E;
                    top: 0;
                    i{
                      font-size: 12px;
                      text-align: end;
                    }
                  }
                  .down-q{
                    cursor: pointer;
                    position: absolute;
                    right: 8px;
                    color: #3BB77E;
                    bottom: 0;
                    i{
                      font-size: 12px;
                      text-align: end;
                    }
                  }
                }
              }
              .subtotal{
                margin-left: 40px;
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 20px;
              }
              .remove{
                margin-left: 50px;
                color: #B6B6B6;
              }
            }
          }
        }
      }
      .btns{
        display: flex;
        justify-content: space-between;
        button{
          color: white;
          background-color: #3BB77E;
          border: 0;
          padding: 12px 30px;
          border-radius: 6px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          -o-border-radius: 6px;
          margin-bottom: 30px;
          margin-top: 20px;
          font-weight: bold;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          i{
            margin-right: 5px;
          }
        }
        button:hover{
          background-color: #ffc107;
        }
      }
    }
  }
}

/*                                                                        cart                                                                             */



.header{

  margin-top: 50px;
  padding: 10px;
  h2{
    color: #333;
    font-size: 40px;
    margin-bottom: 10px;
  }
  p{
    margin-bottom: 10px;
    font-size: 18px;
    span{
      color: #3BB77E;
    }
  }
  .right{
    position: relative;
    button{
      border: 0;
      background-color: transparent;
      color: #B6B6B6;
      position: absolute;
      bottom: 25px;
      right: 0px;
      font-weight: bold;
      font-size: 18px;
    }
  }
}
.main-cart-section{
  margin-bottom: 50px;
  .container{
    .wish-products{
      .wish{
        padding: 10px;
        .wish-header{
          padding: 15px;
          background-color: #ececec;
          .left,
          .right{
            display: flex; 
            p{
              margin-bottom: 0;
              margin-right: 30px;
              margin-left: 30px;
              color: #242424;
              font-weight: bold;
              font-size: 18px;
            }
          }
          .left{
            input{
              background-color: #ececec;
              border: 2px solid #ced4da;
              border-radius: 0;
              -webkit-border-radius: 0;
              -moz-border-radius: 0;
              -ms-border-radius: 0;
              -o-border-radius: 0;
              width: 20px;
              height: 20px;
            }
            input:checked{
              background-color: #3BB77E;
              border: 0;
              box-shadow: none;
            }
            input:focus{
              outline: 0;
              box-shadow: none;
            }
          }
          .right{
            p{
              margin-right: 20px;
              margin-left: 20px;
            }
            p:last-of-type{
              margin-left: 45px;
            }
          }
        }
        .wish-content{

          .wish-product{
            padding:40px 15px ;
            border: 1px solid #e9ecef;
            .col-6{
              display: flex;
              align-items: center;
            }
            .left{
              img{
                width: 120px;
                height: 120px;
                border: 1px solid #e9ecef;
                margin: 0 20px;
                border-radius: 20px;
                -webkit-border-radius: 20px;
                -moz-border-radius: 20px;
                -ms-border-radius: 20px;
                -o-border-radius: 20px;
              }
              input{
                
                border: 2px solid #ced4da;
                border-radius: 0;
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                width: 20px;
                height: 20px;
              }
              input:checked{
                background-color: #3BB77E;
                border: 0;
                box-shadow: none;
              }
              input:focus{
                outline: 0;
                box-shadow: none;
              }
              .text{
                p{
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 16px;
                  margin-bottom: 0;
                }
                .star{
                  margin-bottom: 10px;
                  i{
                    color: #ffc107;
                    font-size: 10px;
                  }
                  i:last-of-type{
                    color: #333;
                  }
                }
              }
            }
            .right{
              div{
                margin: 0 30px;
              }
              .unit-price{
                margin-left: 30px;
                font-weight: bold;
                font-size: 20px;
              }
              .quantity{
                .stock{
                  position: relative;
                  margin: 0 20px;
                  background: #fff;
                  border: 2px solid #3BB77E !important;
                  font-size: 16px;
                  font-weight: 700;
                  color: #3BB77E;
                  border-radius: 5px;
                  padding: 11px 20px 11px 30px;
                  max-width: 90px;
                  input{
                    width: 30px;
                    border: 0;
                  }
                  .up-q{
                    cursor: pointer;
                    position: absolute;
                    right: 8px;
                    color: #3BB77E;
                    top: 0;
                    i{
                      font-size: 12px;
                      text-align: end;
                    }
                  }
                  .down-q{
                    cursor: pointer;
                    position: absolute;
                    right: 8px;
                    color: #3BB77E;
                    bottom: 0;
                    i{
                      font-size: 12px;
                      text-align: end;
                    }
                  }
                }
              }
              .subtotal{
                margin-left: 40px;
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 20px;
              }
              .remove{
                margin-left: 50px;
                color: #B6B6B6;
              }
            }
          }
        }
      }
      .btns{
        display: flex;
        justify-content: space-between;
        button{
          color: white;
          background-color: #3BB77E;
          border: 0;
          padding: 12px 30px;
          border-radius: 6px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          -o-border-radius: 6px;
          margin-bottom: 30px;
          margin-top: 20px;
          font-weight: bold;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          i{
            margin-right: 5px;
          }
        }
        button:hover{
          background-color: #ffc107;
        }
      }
      .row{
        .col-lg-8{
          .col-lg-7{
            border: 1px solid #ececec;
            border-radius: 6px;
            padding: 25px;
            -webkit-border-radius: 6px;
            -moz-border-radius: 6px;
            -ms-border-radius: 6px;
            -o-border-radius: 6px;
            h2{
              color: #333;
              font-size: 30px;
            }
            p{
              font-size: 18px;
              font-weight: bold;
              span{
                color: #3BB77E;
              }
            }
            .content{
              form{
                .select2-container{
                  .select2-selection{
                    border-radius: 10px;
                    height: 64px;
                    line-height: 64px;
                    border: 1px solid #ececec;
                    padding-left: 20px;
                    font-size: 14px;
                    .select2-selection__rendered{
                      line-height: 64px;;
                    }
                    .select2-selection__arrow{
                      top: 50%;
                      right: 14px;
                      transform: translateY(-50%);
                    }
                    
                  }
                }
                input{
                  border-radius: 10px;
                  background: #fff;
                  border: 1px solid #ececec;
                  height: 64px;
                  box-shadow: none;
                  padding-left: 20px;
                  font-size: 16px;
                  margin: 10px auto;
                }
              }
            }
          }
          .col-lg-5{
            .text{
              padding: 20px;
              h3{
                color: #333;
              }
              p{
                color: #b6b6b6;
              }
            }
            .content{
              padding: 0 20px;
              input{
                border:1px solid  #b6b6b6;
                padding: 5px;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                -ms-border-radius: 6px;
                -o-border-radius: 6px;
              }
              button{
                color: white;
                background-color: #3BB77E;
                border: 0;
                padding: 12px 30px;
                border-radius: 6px;
                -webkit-border-radius: 6px;
                -moz-border-radius: 6px;
                -ms-border-radius: 6px;
                -o-border-radius: 6px;
                margin-bottom: 30px;
                margin-top: 20px;
                font-weight: bold;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                i{
                  margin-right: 5px;
                  transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  -moz-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                }
                i::before{
                  transform: rotate(45deg);
                  -webkit-transform: rotate(45deg);
                  -moz-transform: rotate(45deg);
                  -ms-transform: rotate(45deg);
                  -o-transform: rotate(45deg);
                }
                button:hover{
                  background-color: #ffc107;
                }
              }
            }
          }
        }
      }
    }
    .info{
      padding: 10px;
      .content{
        margin-left: 20px;
        padding: 20px;
        border-radius: 15px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        border: 1px solid #ececec;
        .text{
          border: 1px solid #ececec;
          div{
            border-bottom: 1px solid #ececec;
            padding: 8px;
            display: flex;
            justify-content: space-between;
            p{
              margin-bottom: 0;
              font-size: 16px;
              font-weight: bold;
            }
            hr{
              width: 100%;
              margin: 10px 0;
            }
            span{
              font-size: 20px;
              color: #3BB77E;
              font-weight: bold;
            }
            .black{
              color: #333;
            }
          }
        }
        button{
          width: 100%;
          color: white;
          background-color: #3BB77E;
          border: 0;
          padding: 12px 30px;
          border-radius: 6px;
          -webkit-border-radius: 6px;
          -moz-border-radius: 6px;
          -ms-border-radius: 6px;
          -o-border-radius: 6px;
          margin-bottom: 30px;
          margin-top: 20px;
          font-weight: bold;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          i{
            margin-left: 5px;
          }
        }
        button:hover{
          background-color: #ffc107;
        }
      }
    }
  }
}
 


/*                                                                        About                                                                          */

.welcome-section{
  .container{
    .img{
      padding: 30px;
      img{
        max-width: 100%;
        border-radius: 15px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        -ms-border-radius: 15px;
        -o-border-radius: 15px;
      }
    }
    .content{
      .slide{
        .slick-next::before{
          font-family: "font awesome 6 free";
          position: relative;
          display: inline-block;
          background-color: #f2f3f4;
          color: #3333338c;
          font-weight: 700;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: .3s;
          margin-bottom: 30px;
        }
        .slick-next{
          top: 50%;
          right: 0px;
          margin-bottom: 30px;
        }
        .slick-prev{
          top: 50%;
          left: -20px;
          z-index: 1000;
          margin-bottom: 30px;
        }
        .slick-prev::before{
          font-family: "font awesome 6 free";
          position: relative;
          background-color: #f2f3f4;
          color: #3333338c;
          display: inline-block;
          font-weight: 700;
          width: 40px;
          height: 40px;
          border-radius: 50%;
          -webkit-border-radius: 50%;
          -moz-border-radius: 50%;
          -ms-border-radius: 50%;
          -o-border-radius: 50%;
          font-size: 18px;
          display: flex;
          justify-content: center;
          align-items: center;
          transition: .3s;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          margin-bottom: 30px;
        }
        .slick-next:hover::before{
          background-color:#3BB77E;
          color:white;
        }
        .slick-prev:hover::before{
          background-color:#3BB77E;
          color:white;
        }
        .product{
          width: 278px !important;
          position: relative;
          background-color: #fff;
          border: 1px solid #ececec;
          border-radius: 15px;
          overflow: hidden;
          transition: 0.2s;
          -moz-transition: 0.2s;
          -webkit-transition: 0.2s;
          -o-transition: 0.2s;
          margin: 10px 7px;
          position: relative;
          padding: 20px;
          .img-container{
            position: relative;
            .img{
              max-width: 100%;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
            }
            .img-alt{
              position: absolute;
              max-width: 100%;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              visibility: hidden;
              opacity: .25;
              left: 0;
              top: 0;
            }
          }
          .sales{
            z-index: 10;
            position: absolute;
            top: 0;
            left: 0;
            display: inline-block;
            font-size: 12px;
            line-height: 1;
            border-radius: 15px 0 20px 0;
            color: #fff;
            padding: 9px 20px 10px 20px;
          }
          .hot{
            background-color: #f74b81;;
          }
          .sale{
            background-color: #67bcee;
          }
          .new{
            background-color: #3BB77E;
          }
          .num{
            background-color: #f59758;
          }
          .text{
            .spon{
              font-size: 12px;
            }
            .name{
              color: #333;
              font-size: 18px;
              font-weight: bold;
            }
            .star{
              margin-bottom: 10px;
              i{
                color: #ffc107;
                font-size: 10px;
              }
              i:last-of-type{
                color: #333;
              }
            }
            .by{
              font-size: 14px;
              span{
                color: #3BB77E;
              }
            }
            .price{
              display: flex;
              justify-content: space-between;
              p{
                color: #3BB77E;
                font-weight: bold;
                font-size: 18px;
                del{
                  color: #868686;
                  font-size: 14px;
                  margin-left: 10px;
                  font-weight: bold;
                }
              }
              button{
                border:0;
                margin-bottom: 10px;
                background-color: #d3fff2;
                padding: 5px 20px;
                color: #3BB77E;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                border-radius: 4px;
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
              }
              button:hover{
              color: white;
                background-color: #3BB77E;
              }
            }
          }
        }
        .product:hover{
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          border: 1px solid #3BB77E;
          .img{
            opacity: .25;
            visibility: hidden;
            transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
          }
          .img-alt{
            visibility: visible;
            opacity: 1;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
  
            transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
          }
          }
      }
      img{
        margin-right: 20px;
      }
      h2{
        margin-top: 30px;
        font-size: 40px;
        font-weight: bold;
        color: #333;
        margin-bottom: 30px;
      }
      p{
        margin-bottom: 15px;
      }
    }
  }
}

.provide-section{
  margin-bottom: 30px;
  .container{
    padding: 0;
    .col-12{
      .col-12{ 
        margin-bottom: 25px;
        .card-f{
          transition: .3s;
          text-align: center;
          padding: 50px 30px;
          border-radius: 15px;
          border: 1px solid #ececec;
          background: #fff;
          -webkit-transition: .3s;
          -moz-transition: .3s;
          -ms-transition: .3s;
          -o-transition: .3s;
          img{
            width: 100px;
            margin-bottom: 30px;
          }
          h4{
            color: #333;
            font-weight: bold;
            margin-bottom: 30px;
          }
          p{
            margin-bottom: 30px;
          }
          a{
            color: #3BB77E;
            transition:.3s ;
            -webkit-transition:.3s ;
            -moz-transition:.3s ;
            -ms-transition:.3s ;
            -o-transition:.3s ;
          }
          a:hover{
            color: #ffc107;
          }
        }
        .card-f:hover{
          box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        }
      }
    }
  }
}
.pref-section{
  margin-bottom: 40px;
  .container{
    .col-12{
      .col-12{
        img{
          max-width: 100%;
        }
      }
      .col-12{
        h4{
          font-size: 24px;
          margin-bottom: 20px;
          font-weight: bold;
        }
        h1{
          font-size: 48px;
          color: #333;
          margin-bottom: 40px;
          font-weight: bold;
        }
        p{
          margin-bottom: 30px;
        }
      }
      .row{
        margin-top: 40px;
        .col-sm{
          padding: 20px;
          h4{
            color: #333;
            font-size: 32px;
            margin-bottom: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
.count-section{
  .container{
    z-index: 100;
    position: relative;
    color: #fff;
    background: url(../image/about-9.png) no-repeat center center;
    border-radius: 15px;
    padding: 100px 0;
    overflow: hidden;
    .col-xl{
      z-index: 3;
      position: relative;
      h1{
        font-family: "Quicksand", sans-serif;
        font-size: 72px;
        color: #fff;
      }
      h4{
        color: #fff;
        font-size: 24px;
      }
    }
  }
  .container:after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background: #4B675A;
    z-index: 2;
    opacity: 0.8;
  }
}
.our-team-section{
  .container{
    .row{
      .col-xl-4{
        padding: 20px;
        span{
          color: #3BB77E;
          margin-bottom: 5px;
          font-weight: bold;
        }
        h2{
          color: #333;
          margin-bottom: 30px;
          font-size: 48px;
          font-weight: bold;
        }
        p{
          margin-bottom: 30px;
        }
        a{
          display: inline-block;
          border: 1px solid transparent;
          font-size: 14px;
          font-weight: 700;
          padding: 12px 30px;
          border-radius: 4px;
          color: #fff;
          border: 1px solid transparent;
          background-color: #3BB77E;
          cursor: pointer;
          transition: all 300ms linear 0s;
          letter-spacing: 0.5px;
        }
        a:hover{
          background-color: #ffc107;
        }
      }
      .col-xl-8{
        .col-sm-6{
          position: relative;
          img{
            max-width: 100%;
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
          }
          .text{
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
            border-radius: 15px;
            background: #fff;
            padding: 30px;
            max-width: 80%;
            position: relative;
            z-index: 2;
            transform: translateY(-90px);
            margin-left: auto;
            margin-right: auto;
            transition: 0.2s;
            text-align: center;
            h4{
              color: #333;
              margin-bottom: 10px;
              font-weight: bold;
            }
            p{
              margin-bottom: 10px;
              font-size: 18px;
            }
            i{
              color: #3BB77E;
              margin-right: 15px;
            }
          }
        }
        .col-sm-6:hover .text{
          transform: translateY(-100px);
          -webkit-transform: translateY(-100px);
          -moz-transform: translateY(-100px);
          -ms-transform: translateY(-100px);
          -o-transform: translateY(-100px);
        }
      }
    }
  }
}

/*                                                                        profile                                                                       */

.dashboard{
  margin-top: 100px;
  margin-bottom: 100px;
  .container{
    .col-sm-10{
      .col-sm-3{
        padding: 10px;
        ul{
          padding: 0;
          li{
            overflow: hidden;
            margin-bottom: 10px;
            position: relative;
            border-radius: 10px;
            border: 1px solid #ececec;
            a{
              display: flex;
              font-size: 16px;
              color: #7E7E7E;
              padding: 15px 30px;
              font-family: "Quicksand", sans-serif;
              font-weight: 700;
              i{
                color: #7E7E7E;
                font-size: 19px;
                opacity: 0.6;
                margin-right: 10px;
                display: inline-block;
              }
            }
          }
          .active{
            background-color: #3BB77E;
              color: white !important;
          }
        }
      }
      .col-sm-9{
        padding: 10px 20px;
        .tab-pane{
          padding: 0 50px;
          
        }
        #dashboard{
          h2{
            color: #333;
            margin-bottom: 30px;
            font-weight: bold;
          }
          p{
            a{
              color: #3BB77E;
            }
          }
        }
        #orders{
          h2{
            color: #333;
            margin-bottom: 30px;
            font-weight: bold;
          }
          .table{
            .head{
              border: 1px solid #ececec;
              display: flex;
              padding: 5px;
              p{
                color: #333;
                margin-right: 65px;
                margin-bottom: 0;
                margin-left: 50px;
                font-size: 18px;
              }
            }
            .content{
              border: 1px solid #ececec;
              border-top: none;
              border-bottom: none;
              .order{
                display: flex;
                border-bottom: 1px solid #ececec;
                p{
                  display: inline-block;
                  margin-right: 38px;
                  margin-bottom: 0;
                  margin-left: 20px;
                  a{
                    color: #3BB77E;
                  }
                }
              }
            }
          }
        }
        #track-orders{
          .head{
            margin-bottom: 30px;
            h2{
              color: #333;
              margin-bottom: 30px;
              font-weight: bold;
            }
          }
          .content{
            .col-sm-8{
              form{
                p{
                  margin-bottom: 5px;
                  color: #333;
                  font-size: 16px;
                }
                input{
                  border: 1px solid #ececec;
                  border-radius: 10px;
                  height: 64px;
                  box-shadow: none;
                  padding-left: 20px;
                  font-size: 16px;
                  width: 100%;
                  margin-bottom: 10px;
                }
                button{
                  font-size: 17px;
                  font-weight: 500;
                  padding: 20px 40px;
                  color: #ffffff;
                  border: none;
                  background-color: #253D4E;
                  border-radius: 10px;
                  font-family: "Quicksand", sans-serif;
                  margin-top: 25px;
                }
              }
            }
          }
        }
        #address{
          .row{
            .col-sm-6{
              .head{
                padding: 16px;
                h3,
                h5{
                  color: #333;
                  font-weight: bold;
                }
              }
              .content{
                padding: 16px;
                div{
                  color: #333;
                  font-size: 14px;
                }
                p{
                  margin-bottom: 5px;
                }
                a{
                  color: #3BB77E;
                  transition: all 0.3s ease 0s;
                }
                a:hover{
                  color: #ffc107;
                }
              }
            }
          }
        }
        #account-detail{
          .head{
            h5{
              color: #242424;
              padding: 20px 0;
              font-weight: bold;
            }
            p{
              a{
                color: #3BB77E;
              }
            }
          }
          .content{
            padding: 20px;
            .col-6,
            .col-12{
              margin-top: 5px;
              label{
                display: block;
                color: #242424;
                padding: 5px;
                margin-bottom: 3px;
              }
              input{
                background: #fff;
                border: 1px solid #ececec;
                height: 64px;
                box-shadow: none;
                padding-left: 20px;
                font-size: 16px;
                width: 100%;
                border-radius: 10px;
              }
              button{
                font-size: 16px;
                font-weight: 500;
                padding: 15px 40px;
                color: #ffffff;
                border: none;
                background-color: #3BB77E;
                border: 1px solid #29A56C;
                border-radius: 10px;
                display: block;
                width: fit-content;
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }
}

/*                                                                        login                                                                         */

.login-section{
  margin-top: 50px;
  margin-bottom: 50px;
  .container{
    .col-sm-8{
      .col-sm-6{
        padding: 20px;
        padding-top: 40px;
        padding-bottom: 40px;
        img{
          max-width: 100%;
          border-radius: 15px;
        }
        .head{
          margin-bottom:20px;
          h1{
            color: #333;
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 48px;
            
          }
          p{
            a{
              color: #29A56C;
            }
          }
        }
        .content{
          .col-12{
            display: flex; 
            justify-content: space-between;
            margin-bottom: 15px;
            input{
              background: #fff;
              border: 1px solid #ececec;
              height: 64px;
              box-shadow: none;
              padding-left: 20px;
              font-size: 16px;
              width: 100%;
              border-radius: 10px;
            }
            .security{
              display: inline-block;
              border-radius: 10px;
              height: 64px;
              line-height: 64px;
              padding: 0 32px;
              font-size: 24px;
              font-weight: bold;
              background: #BCE3C9;
              width: 100%;
              text-align: center;
              .green{
                color: #55bb90;
              }
              .red{
                color:#f74b81;
              }
              .blue{
                color: #67bcee;
              }
              .yellow{
                color: #ffc107;
              }
            }
            .rem{
              input{
                border: 2px solid #ced4da;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                width: 17px !important;
                height: 17px !important;
                padding: 0;
                font-size: 18px;
                margin-right: 5px;
                margin-top: 2px;
              }
              input:checked{
                background-color: #3BB77E !important;
                border: 0;
                box-shadow: none;
                background-image: url(../image/download.svg);
              }
              input:focus{
                outline: 0;
                box-shadow: none;
              }
              p{
                font-size: 14px;
              }
            }
            a{
              color: #7E7E7E;
              font-size: 14px;
            }
          }
          button{
            background-color: #253D4E;
            border-color: #253D4E;
            font-weight: 700;
            border: 0;
            font-size: 16px;
            padding: 15px 40px;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            width: fit-content;
            margin-top: 20px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          button:hover{
            background-color:#29A56C ;
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            -o-transform: translateY(-10px);
}
        }
      }
    }
  }
}

/*                                                                        register                                                                         */

.register-section{
  margin-top: 50px;
  margin-bottom: 50px;
  .container{
    .col-lg-8{
      .col-lg-6{
        padding: 20px;
      }
      .inputs{
        .head{
          margin-bottom:20px;
          h1{
            color: #333;
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 48px;
            
          }
          p{
            a{
              color: #29A56C;
            }
          }
        }
        .content{
          .col-12{
            display: flex; 
            justify-content: space-between;
            margin-bottom: 15px;
            input{
              background: #fff;
              border: 1px solid #ececec;
              height: 64px;
              box-shadow: none;
              padding-left: 20px;
              font-size: 16px;
              width: 100%;
              border-radius: 10px;
            }
            .security{
              display: inline-block;
              border-radius: 10px;
              height: 64px;
              line-height: 64px;
              padding: 0 32px;
              font-size: 24px;
              font-weight: bold;
              background: #BCE3C9;
              width: 100%;
              text-align: center;
              .green{
                color: #55bb90;
              }
              .red{
                color:#f74b81;
              }
              .blue{
                color: #67bcee;
              }
              .yellow{
                color: #ffc107;
              }
            }
            .rem{
              input{
                border: 2px solid #ced4da;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                width: 17px !important;
                height: 17px !important;
                padding: 0;
                font-size: 18px;
                margin-right: 5px;
                margin-top: 2px;
              }
              input:checked{
                background-color: #3BB77E !important;
                border: 0;
                box-shadow: none;
                background-image: url(../image/download.svg);
              }
              input:focus{
                outline: 0;
                box-shadow: none;
              }
              p{
                font-size: 14px;
              }
            }
            a{
              color: #7E7E7E;
              font-size: 14px;
            }
          }
          .radio{
            div{
              display: flex;
              input{
                width: 16px;
              }

            }
          }
          button{
            background-color: #3BB77E;
            border-color: #3BB77E;
            font-weight: 700;
            border: 0;
            font-size: 16px;
            padding: 15px 40px;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            width: fit-content;
            margin-top: 20px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          button:hover{
            background-color:#29A56C ;
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            -o-transform: translateY(-10px);
          }
        }
      }
      .google-section{
        .container-g{
          margin-top: 115px;
          padding: 50px;
          border-radius: 15px;
          border: 1px solid #ececec;
          margin-left: 30px;
          a{
            font-size: 20px;
            font-weight: 700;
            font-family: "Quicksand", sans-serif;
            display: flex;
            align-items: center;
            width: 100%;
            padding: 15px 25px;
            border-radius: 10px;
            margin-bottom: 20px;
            transition: 0.3s;
            img{
              margin-right: 10px;
            }
            i{
              margin-right: 10px;
              font-size: 22px;
            }
          }
          .facebook{
            background-color: #1877F2;
            color: #fff
          }
          .google{
            color: #7E7E7E;
            border: 1px solid #F2F3F4;
            background-color: #fff;
          }
          .apple{
            color: white;
            background-color: #000000;
          }
          a:hover{
            transform: translateY(-5px);
            -webkit-transform: translateY(-5px);
            -moz-transform: translateY(-5px);
            -ms-transform: translateY(-5px);
            -o-transform: translateY(-5px);
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          }
        }
      }
    }
  }
}

/*                                                                        shop                                                                             */

.shop-head{
  padding: 0 12px;
  margin-top: 30px;
  margin-bottom: 30px;
  .container{
    background: url(../image/header-bg.png) no-repeat center center;
    border-radius: 20px;
    padding: 70px 80px;
    background-size: cover;
    .name{
      h1{
        color: #333;
        font-size: 48px;
      }
      p{
        i.ph.ph-house{
          color: #29A56C;
          font-size: 18px;
          margin-right: 10px;
        }
        span{
          color: #29A56C;
        }
        i.fa-angle-right{
          font-size: 8px;
          margin-right: 15px;
          margin-left: 15px;
          transform: translateY(-2px);
          -webkit-transform: translateY(-2px);
          -moz-transform: translateY(-2px);
          -ms-transform: translateY(-2px);
          -o-transform: translateY(-2px);
        }
      }
    }
    .cate{
      a{
        background-color: #fff;
        display: inline-block;
        border-radius: 30px;
        box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
        padding: 10px 20px;
        border: 1px solid #ececec;
        font-family: "Quicksand", sans-serif;
        font-size: 17px;
        font-weight: 700;
        color: #29A56C;
        margin-right: 10px;
        margin-top: 20px;
        transition: 0.3s;
        i{
          margin-right: 5px;
          color: #7E7E7E;
          font-size: 14px;
        }
      }
      a:hover{
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
}
      .active{
        color: black;
      }
    }
  }
}
.shop-section{
  margin-top: 50px;
  .container{
    .head{
      p{
        span{
          color: #29A56C;
          font-weight: bold;
        }
      }
      .dropdown-con{
        .btn-group{
          margin-right: 10px;
          .btn{
            align-items: center;
            background: #fff;
            border: 1px solid #f7f8f9;
            color: #777;
            padding: 9px 16px;
            border-radius: 10px;
            transition: all 0.3s ease 0s;
            cursor: pointer;
            border: 1px solid #ececec;
            i{
              margin-right: 10px;
            }
          }
          .dropdown-menu{
            li{
              button{
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              button:hover{
                background-color: #3BB77E;
                color: white;
              }
              button:active{
                background-color: #3BB77E;
                color: white;
              }
            }
          }
        }
      }
    }
    .content{
      .row{
        .col-12{
          .con{
            position: relative;
            background-color: #fff;
            border: 1px solid #ececec;
            border-radius: 15px;
            overflow: hidden;
            transition: 0.2s;
            -moz-transition: 0.2s;
            -webkit-transition: 0.2s;
            -o-transition: 0.2s;
            margin-bottom: 20px;
            position: relative;
            padding: 10px;
            .img-container{
              position: relative;
              .img{
                max-width: 100%;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              .img-alt{
                position: absolute;
                max-width: 100%;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                visibility: hidden;
                opacity: .25;
                left: 0;
              }
            }
            .sales{
              z-index: 10;
              position: absolute;
              top: 0;
              left: 0;
              display: inline-block;
              font-size: 12px;
              line-height: 1;
              border-radius: 15px 0 20px 0;
              color: #fff;
              padding: 9px 20px 10px 20px;
            }
            .hot{
              background-color: #f74b81;;
            }
            .sale{
              background-color: #67bcee;
            }
            .new{
              background-color: #3BB77E;
            }
            .num{
              background-color: #f59758;
            }
            .text{
              .spon{
                font-size: 12px;
              }
              .name{
                color: #333;
                font-size: 18px;
                font-weight: bold;
              }
              .star{
                margin-bottom: 10px;
                i{
                  color: #ffc107;
                  font-size: 10px;
                }
                i:last-of-type{
                  color: #333;
                }
              }
              .by{
                font-size: 14px;
                span{
                  color: #3BB77E;
                }
              }
              .price{
                display: flex;
                justify-content: space-between;
                p{
                  color: #3BB77E;
                  font-weight: bold;
                  font-size: 18px;
                  del{
                    color: #868686;
                    font-size: 14px;
                    margin-left: 10px;
                    font-weight: bold;
                  }
                }
                button{
                  border:0;
                  margin-bottom: 10px;
                  background-color: #d3fff2;
                  padding: 5px 20px;
                  color: #3BB77E;
                  transition: .3s;
                  -webkit-transition: .3s;
                  -moz-transition: .3s;
                  -ms-transition: .3s;
                  -o-transition: .3s;
                  border-radius: 4px;
                  -webkit-border-radius: 4px;
                  -moz-border-radius: 4px;
                  -ms-border-radius: 4px;
                  -o-border-radius: 4px;
                }
                button:hover{
                color: white;
                  background-color: #3BB77E;
                }
              }
            }
          }
        }
        .col-12:hover{
            .con{
              box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
              border: 1px solid #3BB77E;
              .img{
                opacity: .25;
                visibility: hidden;
                transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
              }
              .img-alt{
                visibility: visible;
                opacity: 1;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;

                transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
              }
            }
          }
        }
    }
    .navs{
      margin-top: 50px;
      display: flex;
      p{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        color: #7e7e7e;
        background-color: #f2f3f4;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        margin-right: 10px;
        i{
          font-size: 10px;
        }
      }
      .active{
        background-color: #3BB77E;
        color: white;
      }
      p:hover{
        background-color: #3BB77E;
        color: white;
      }
    }
  }
}

/*                                                                        vendors                                                                           */

.vendor-head{
  margin-top: 50px;
  margin-bottom: 50px;
  .container{
    h1{
      font-size: 72px;
      line-height: 1;
      color: #242424;
      margin-bottom: 50px;
      padding: 0;
    }
    .col-lg-5{
      position: relative;
      input{
        border-radius: 30px;
        padding-left: 30px;
        box-shadow: 20px 20px 40px rgba(0, 0, 0, 0.07);
        border: 1px solid #ececec;
        height: 64px;
        font-size: 16px;
        width: 100%;
      }
      i{
        position: absolute;
        top: 20px;
        right: 40px;
        font-size: 20px;
        color:#242424;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
      }
      i:hover {
        color: #3BB77E;
      }
    }
  }
}

.vendor-section{
  margin-bottom: 30px;
  .container{
    .row{
      .vendor-header{
        margin-bottom: 50px !important;
          p{
            span{
              color: #29A56C;
              font-weight: bold;
            }
          }
          .dropdown-con{
            .btn-group{
              margin-right: 10px;
              .btn{
                align-items: center;
                background: #fff;
                border: 1px solid #f7f8f9;
                color: #777;
                padding: 9px 16px;
                border-radius: 10px;
                transition: all 0.3s ease 0s;
                cursor: pointer;
                border: 1px solid #ececec;
                i{
                  margin-right: 10px;
                }
              }
              .dropdown-menu{
                li{
                  button{
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                  }
                  button:hover{
                    background-color: #3BB77E;
                    color: white;
                  }
                  button:active{
                    background-color: #3BB77E;
                    color: white;
                }
              }
            }
          }
        }
      }
    }
    .vendor{
      .col-sm-6{
        padding: 20px;
        .product{
          display: flex;
          position: relative;
          background-color: #fff;
          border: 1px solid #ececec;
          border-radius: 15px;
          overflow: hidden;
          transition: 0.2s;
          -moz-transition: 0.2s;
          -webkit-transition: 0.2s;
          -o-transition: 0.2s;
          position: relative;
          .sales{
            z-index: 10;
            position: absolute;
            top: 0;
            right: 0;
            display: inline-block;
            font-size: 12px;
            line-height: 1;
            border-radius: 0px 10px 0 20px;
            color: #fff;
            padding: 9px 20px 10px 20px;
          }
          .hot{
            background-color: #f74b81;;
          }
          
          .image{
            width: 170px;
            padding: 20px;
            img{
              width: 144px;
            }
            p{
              position: relative;
              display: inline-block;
              padding: 6px 20px 6px 20px;
              border-radius: 4px;
              background-color: #DEF9EC;
              font-size: 14px;
              font-weight: 700;
              color: #3BB77E;
              min-width: 123px;
              margin-top: 15px;
            }
          }
          .content{
            padding: 20px 0 20px 10px;
            .up{
              margin-bottom: 20px;
              .since{
                font-size: 14px;
                margin-bottom: 0;
              }
              .name{
                color: #253D4E;
                margin-bottom: 0;
              }
              .star{
                margin-bottom: 10px;
                i{
                  color: #ffc107;
                  font-size: 10px;
                }
                i:last-of-type{
                  color: #333;
                }
              }
            }
            .down{
              p{
                color: #B6B6B6 ;
                i{
                  color: #3BB77E;
                  margin-right: 5px;
                }
              }
            }
          }
          .button{
            display: flex;
            align-items: end;
            justify-content: center;
            padding: 30px 10px 30px 0;
            button{
              min-width: 105px;
              padding: 8px 10px 8px 13px;
              font-size: 12px;
              text-transform: none;
              display: inline-flex;
              flex-wrap: wrap;
              line-height: 1.3;
              border-radius: 4px;
              color: #fff;
              border: 1px solid transparent;
              background-color: #3BB77E;
              cursor: pointer;
              transition: all 300ms linear 0s;
              letter-spacing: 0.5px;
              i{
                margin-left: 5px;
                margin-top: 3px;
              }
            }
            .button:hover{
              background-color: #ffc107;
            }
          }
        }
      }
    }
    .navs{
      margin-top: 20px;
      display: flex;
      p{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        color: #7e7e7e;
        background-color: #f2f3f4;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        margin-right: 10px;
        i{
          font-size: 10px;
        }
      }
      .active{
        background-color: #3BB77E;
        color: white;
      }
      p:hover{
        background-color: #3BB77E;
        color: white;
      }
    }
  }
}
/*                                                                        forget                                                                          */

.forget-section{
  margin-top: 100px;
  margin-bottom: 100px;
  .container{
    .col-xl-4{
        .head{
          margin-bottom:20px;
          img{
            border-radius: 15px;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            -ms-border-radius: 15px;
            -o-border-radius: 15px;
            margin-bottom: 10px;
          }
          h2{
            color: #333;
            font-weight: bold;
            margin-bottom: 5px;
            font-size: 40px;
            
          }
        }
        .content{
          .col-12{
            display: flex; 
            justify-content: space-between;
            margin-bottom: 15px;
            
            input{
              background: #fff;
              border: 1px solid #ececec;
              height: 64px;
              box-shadow: none;
              padding-left: 20px;
              font-size: 16px;
              width: 100%;
              border-radius: 10px;
            }
            .security{
              display: inline-block;
              border-radius: 10px;
              height: 64px;
              line-height: 64px;
              padding: 0 32px;
              font-size: 24px;
              font-weight: bold;
              background: #BCE3C9;
              width: 100%;
              text-align: center;
              .green{
                color: #55bb90;
              }
              .red{
                color:#f74b81;
              }
              .blue{
                color: #67bcee;
              }
              .yellow{
                color: #ffc107;
              }
            }
            .rem{
              input{
                border: 2px solid #ced4da;
                border-radius: 2px;
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                width: 17px !important;
                height: 17px !important;
                padding: 0;
                font-size: 18px;
                margin-right: 5px;
                margin-top: 2px;
              }
              input:checked{
                background-color: #3BB77E !important;
                border: 0;
                box-shadow: none;
                background-image: url(../image/download.svg);
              }
              input:focus{
                outline: 0;
                box-shadow: none;
              }
              p{
                font-size: 14px;
              }
            }
            a{
              color: #7E7E7E;
              font-size: 14px;
            }
          }
          button{
            background-color: #253D4E;
            border-color: #253D4E;
            font-weight: 700;
            border: 0;
            font-size: 16px;
            padding: 15px 40px;
            color: #ffffff;
            border: none;
            border-radius: 10px;
            width: fit-content;
            margin-top: 20px;
            transition: .3s;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
          }
          button:hover{
            background-color:#29A56C ;
            transform: translateY(-10px);
            -webkit-transform: translateY(-10px);
            -moz-transform: translateY(-10px);
            -ms-transform: translateY(-10px);
            -o-transform: translateY(-10px);
          }
      }
    }
  }
}

/*                                                                        reset                                                                          */

.reset-section{
  margin-top: 100px;
  margin-bottom: 100px;
  .container{
    .col-lg-6{
      .head{
        margin-bottom:20px;
        img{
          border-radius: 15px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          -ms-border-radius: 15px;
          -o-border-radius: 15px;
          margin-bottom: 10px;
        }
        h2{
          color: #333;
          font-weight: bold;
          margin-bottom: 5px;
          font-size: 40px;
          
        }
      }
      .content{
        .col-lg-6{
          margin-top: 20px;
          .col-12{
            margin-bottom: 10px;
            input{
              background: #fff;
              border: 1px solid #ececec;
              height: 64px;
              box-shadow: none;
              padding-left: 20px;
              font-size: 16px;
              width: 100%;
              border-radius: 10px;
            }
          }
          .col{
            button{
              background-color: #253D4E;
              border-color: #253D4E;
              font-weight: 700;
              border: 0;
              font-size: 16px;
              padding: 15px 40px;
              color: #ffffff;
              border: none;
              border-radius: 10px;
              width: fit-content;
              margin-top: 20px;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
            }
            button:hover{
              background-color:#29A56C ;
              transform: translateY(-10px);
              -webkit-transform: translateY(-10px);
              -moz-transform: translateY(-10px);
              -ms-transform: translateY(-10px);
              -o-transform: translateY(-10px);
            }
          }
          span{
            display: inline-block;
            color: #253D4E;
            margin-bottom: 15px;
          }
          p{
            margin-bottom: 15px;
          }
          ul{
            padding: 0;
            list-style-type: disc;
            li{
              padding-left: 10px;
              margin-left: 20px;
              font-size: 14px;
            }
          }
        }
      }
    }
  }
}
/*                                                                        vendor-guide                                                                          */

.vendor-guide-head{
  .container{
    p{
      margin-top: 40px;
      margin-bottom: 50px;
      font-size: 19px;
    }
    .row{
      .col-lg-10{
        .col-lg-4{ 
          margin-bottom: 25px;
          .card-f{
            transition: .3s;
            text-align: center;
            padding: 50px 30px;
            border-radius: 15px;
            border: 1px solid #ececec;
            background: #fff;
            -webkit-transition: .3s;
            -moz-transition: .3s;
            -ms-transition: .3s;
            -o-transition: .3s;
            img{
              width: 100px;
              margin-bottom: 30px;
            }
            h4{
              color: #333;
              font-weight: bold;
              margin-bottom: 30px;
            }
            p{
              margin-bottom: 30px;
              font-size: 17px;
            }
            a{
              color: #3BB77E;
              transition:.3s ;
              -webkit-transition:.3s ;
              -moz-transition:.3s ;
              -ms-transition:.3s ;
              -o-transition:.3s ;
            }
            a:hover{
              color: #ffc107;
            }
          }
          .card-f:hover{
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
          }
        }
      }
    }
  }
}

.vendor-guide{
  .container{
    .col-lg-8{
      .section{
        margin-top: 30px;
        margin-bottom: 40px;
        text-rendering: optimizeLegibility;
        color: #253D4E;
        font-size: 17px;
        h2{
          color: #242424;
          font-size: 36px;
        }
        p{
          color: #253D4E;
          font-size: 17px;
        }
        ul{
          list-style: circle;
          padding-left: 1rem;
          font-size: 1rem;
          li{
            position: relative;
            margin-bottom: 7px;
          }
        }
      }
    }
  }
}

.contact-form{
  margin-bottom: 60px;
  .container{
    .col-lg-8{
      padding: 0;
      .head{
        span{
          display: inline-block;
          margin-bottom: 15px;
          color: #3BB77E;
          font-size: 20px;
          font-weight: bold;
        }
        h2{
          font-family: "Quicksand", sans-serif;
          color: #253D4E;
          font-weight: 700;
          line-height: 1.2;
          margin-bottom: 10px;
          font-size: 40px;
        }
        p{
          color: #B6B6B6 !important;
          font-size: 14px;
          margin-bottom: 30px !important;
        }
      }
      .col-sm-6{
        margin-bottom: 20px !important;
        input{
          border: 1px solid #ececec;
          border-radius: 10px;
          height: 64px;
          box-shadow: none;
          padding-left: 20px;
          font-size: 16px;
          width: 100%;
        }
      }
      .col-12{
        margin-bottom: 30px !important;
        textarea{
          border: 1px solid #ececec;
          border-radius: 10px;
          height: 50px;
          box-shadow: none;
          padding: 10px 10px 10px 20px;
          font-size: 16px;
          width: 100%;
          min-height: 200px;
        }
        textarea:focus{
          outline: none;
        }
      }
      button{
        width: fit-content;
        font-size: 17px;
        font-weight: 500;
        padding: 20px 40px;
        margin-left: 10px;
        color: #ffffff;
        border: none;
        background-color: #253D4E;
        border-radius: 10px;
        font-family: "Quicksand", sans-serif;
        transition: all 0.3s ease 0s;
      }
      button:hover{
        background-color: #3BB77E;
      }
    }
  }
}


/*                                                                        vendor-dashboard                                                                          */

.vendor-dashboard{
  margin-top: 100px;

  .container{
    .head{
      h1{
        font-size: 72px;
        line-height: 1; 
        color: #253D4E;
        font-weight: 700;
        margin-bottom: 30px;
      }
    }
    hr{
      margin-bottom: 80px;
    }
    .dashboard{
      .col-lg-9{
        h3{
          line-height: 1; 
          color: #253D4E;
          font-weight: 700;
          margin-bottom: 30px;
          font-size: 32px;
        }
        .table{
          padding: 0 12px;
          .head{
            border: 1px solid #e9ecef;
            display: flex;
            p{
              align-items: start;
              padding: 8px;
              /* padding-right: 180px; */
              padding-left: 10px;
              border: 1px solid #ececec;
              border-bottom: 0;
              border-top: 0;
              margin-bottom: 0;
              border-left: 0 solid #000;
              color: #000;
            }
          }
          .section{
            
            border: 1px solid #e9ecef;
            display: flex;
            p{
              color: #000;
              align-items: start;
              padding: 8px;
              /* padding-right: 180px; */
              padding-left: 10px;
              border: 1px solid #ececec;
              border-bottom: 0;
              border-top: 0;
              margin-bottom: 0;
              border-left: 0 solid #000;
            }
            a{
              align-items: start;
              padding: 8px;
              /*padding-right: 180px;
              */padding-left: 10px;
              border: 1px solid #ececec;
              border-bottom: 0;
              border-top: 0;
              margin-bottom: 0;
              border-left: 0 solid #000;
              color: #3BB77E;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
              cursor: pointer;
            }
            a:hover{
              color: #ffc107;
            }
          }
        }
      }
        .col-lg-3{
          .sidebar{
            position: relative;
            padding: 30px;
            border: 1px solid #ececec;
            border-radius: 15px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
            .header{
              margin-top: 0;
              position: relative;
              border-bottom: 1px solid #ececec;
              padding-bottom: 20px;
              font-size: 24px;
              color: #333;
            }
            .header::before{
              content: "";
              width: 80px;
              height: 2px;
              position: absolute;
              bottom: 0;
              left: 0;
              background-color: #BCE3C9;
      
            }
            ul{
              padding: 0;
              margin-top: 15px;
              li{
                padding-bottom: 10px;
                border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
                display: flex;
                margin-bottom: 10px;
                transition: .3s;
      
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                img{
                  width: 110px;
                  height: 110px;
                  border-radius: 6px;
                  -webkit-border-radius: 6px;
                  -moz-border-radius: 6px;
                  -ms-border-radius: 6px;
                  -o-border-radius: 6px;
                }
                .text{
                  margin-left: 15px;
                  padding: 10px;
                  p{
                    font-size: 18px;
                    color: #3BB77E;
                    margin-bottom: 0;
                    font-weight: bold;
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                  }
                  p:hover{
                    color: #ffc107;
                  }
                  .star{
                    margin-bottom: 10px;
                    i{
                      color: #ffc107;
                      font-size: 10px;
                    }
                    i:last-of-type{
                      color: #333;
                    }
                  }
                  .price{
                    display: flex;
                    justify-content: space-between;
                    p{
                      font-size: 16px !important;
                      margin-top:5px;
                      color: #7E7E7E;
                      font-weight: normal;
                    }
                    p:hover{
                      color: #7E7E7E;
                    }
                  }
                }
              }
              
              
          }
          }
      }
    }
  }
}
.shop-section{
  .head{
    h2{
      font-size: 32px;
      color: #253D4E;
      font-weight: bold;
      margin-bottom: 30px;
    }
  }
}


/*                                                                        blog                                                                          */

.blog-section{
  margin-top: 50px;
  .container{
    .head{
      p{
        span{
          color: #29A56C;
          font-weight: bold;
        }
      }
      h2{
        font-size: 32px;
        color: #253D4E;
        font-weight: bold;
        margin-bottom: 30px;
        img{
          width: 36px;
          margin-right: 10px;
          margin-bottom: 3px;
        }
      }
      .dropdown-con{
        .btn-group{
          margin-right: 10px;
          .btn{
            align-items: center;
            background: #fff;
            border: 1px solid #f7f8f9;
            color: #777;
            padding: 9px 16px;
            border-radius: 10px;
            transition: all 0.3s ease 0s;
            cursor: pointer;
            border: 1px solid #ececec;
            i{
              margin-right: 10px;
            }
          }
          .dropdown-menu{
            li{
              button{
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              button:hover{
                background-color: #3BB77E;
                color: white;
              }
              button:active{
                background-color: #3BB77E;
                color: white;
              }
            }
          }
        }
      }
    }
    .blogs{
      .blog{
        position: relative;
        margin-bottom: 30px;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        img{
          max-width: 100%;
          border-radius: 15px;
          -webkit-border-radius: 15px;
          -moz-border-radius: 15px;
          -ms-border-radius: 15px;
          -o-border-radius: 15px;
        }
        .icon{
          position: absolute;
          top: 20px;
          left: 30px;
          z-index: 2;
          i{
            display: inline-block;
            color: #fff !important;
            background-color: #FDC040;
            border-radius: 4px;
            width: 32px;
            height: 32px;
            text-align: center;
            line-height: 35px;
          }
        }
        .text{
          padding: 20px 30px;
          margin-top: 15px;
          text-align: center;
          p{
            margin-bottom: 10px;
            font-size: 14px;
            color: #B6B6B6 !important;
            font-weight: bold;
          }
          h4{
            margin-bottom: 15px !important;
            font-size: 24px;
            font-weight: bold;

            a{
              color: #253D4E;
              transition: .3s;
              -webkit-transition: .3s;
              -moz-transition: .3s;
              -ms-transition: .3s;
              -o-transition: .3s;
            }
            a:hover{
              color: #3BB77E;
            }
          }
          .spans{
            span{
              margin-right: 10px !important;
              font-size: 13px;
            }
            span.has-dot{
              position: relative;
            }
            span.has-dot::before{
              content: "";
              width: 4px;
              height: 4px;
              background: #d2d2d2;
              border-radius: 50%;
              position: absolute;
              top: 50%;
              margin-top: -2px;
              display: block;
              left: -8px;
            }
          }
        }
      }
      .blog:hover{
        transform: translateY(-10px);
        -webkit-transform: translateY(-10px);
        -moz-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
      }
    }
    .navs{
      margin-top: 50px;
      display: flex;
      p{
        display: grid;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        color: #7e7e7e;
        background-color: #f2f3f4;
        transition: .3s;
        -webkit-transition: .3s;
        -moz-transition: .3s;
        -ms-transition: .3s;
        -o-transition: .3s;
        margin-right: 10px;
        i{
          font-size: 10px;
        }
      }
      .active{
        background-color: #3BB77E;
        color: white;
      }
      p:hover{
        background-color: #3BB77E;
        color: white;
      }
    }
  }
}

/*                                                                        contact                                                                       */
.contact-head{
  margin-top: 50px;
  margin-bottom: 30px;
  .container{
    .col-lg-10{
      .main{
        h4{
          margin-bottom: 20px !important;
          color: #3BB77E !important;
          font-size: 24px;
          font-weight: bold;
        }
        h2{
          margin-bottom: 30px !important;
          font-size: 50px;
          color: #253D4E;
          font-weight: bold;
        }
      }
    }
    .col-lg-8{
      padding-top: 110px;
      .col-12{
        h5{
          margin-bottom: 20px !important;
          font-size: 20px;
          color: #253D4E;
          font-weight: bold;
        }
        .active{
          color: #3BB77E;
        }
      }
    }
  }
}
.iframe-section{
  margin-bottom: 50px;
  .container{
    div{
      iframe{
      border-radius:15px ;
      -webkit-border-radius:15px ;
      -moz-border-radius:15px ;
      -ms-border-radius:15px ;
      -o-border-radius:15px ;
      }
      iframe:focus{
        outline: none;
      }
    }
  }
}
.location-section{
  margin-top: 50px;
  margin-bottom: 50px;
  .container{
    .col-sm-10{
      .col-sm-4{
        margin-bottom: 20px;
        h4{
          margin-bottom: 15px !important;
          color: #3BB77E !important;
          font-size: 24px;
          font-weight: bold;
          font-family: "Quicksand", sans-serif;
        }
        p{
          margin-bottom: 3px;
          font-size: 14px;
          span{
            text-decoration: underline dotted;
            cursor: help;
          }
        }
        button{
          margin-top: 20px !important;
          font-size: 12px;
          text-transform: none;
          line-height: 1.8;
          border: 1px solid transparent;
          background-color: #3BB77E;
          cursor: pointer;
          transition: all 300ms linear 0s;
          letter-spacing: 0.5px;
          border-radius: 4px;
          padding: 8px 18px !important;
          box-shadow: 0 2px 6px 0 rgba(88, 151, 251, 0.16);
          display: inline-block;
          color: white;
        }
        button:hover{
          transform: translateY(-10px);
          -webkit-transform: translateY(-10px);
          -moz-transform: translateY(-10px);
          -ms-transform: translateY(-10px);
          -o-transform: translateY(-10px);
          background-color: #ffc107;
        }
      }
    }
  }
}

.message-section{
  margin-bottom: 30px;
  .container{
    .col-lg-10{
      .col-lg-8{
        padding: 0;
        .head{
          span{
            display: inline-block;
            margin-bottom: 15px;
            color: #3BB77E;
            font-size: 20px;
            font-weight: bold;
          }
          h2{
            font-family: "Quicksand", sans-serif;
            color: #253D4E;
            font-weight: 700;
            line-height: 1.2;
            margin-bottom: 10px;
            font-size: 40px;
          }
          p{
            color: #B6B6B6 !important;
            font-size: 14px;
            margin-bottom: 30px !important;
          }
        }
        .col-sm-6{
          margin-bottom: 20px !important;
          input{
            border: 1px solid #ececec;
            border-radius: 10px;
            height: 64px;
            box-shadow: none;
            padding-left: 20px;
            font-size: 16px;
            width: 100%;
          }
        }
        .col-12{
          margin-bottom: 30px !important;
          textarea{
            border: 1px solid #ececec;
            border-radius: 10px;
            height: 50px;
            box-shadow: none;
            padding: 10px 10px 10px 20px;
            font-size: 16px;
            width: 100%;
            min-height: 200px;
          }
          textarea:focus{
            outline: none;
          }
        }
        button{
          width: fit-content;
          font-size: 17px;
          font-weight: 500;
          padding: 20px 40px;
          margin-left: 10px;
          color: #ffffff;
          border: none;
          background-color: #253D4E;
          border-radius: 10px;
          font-family: "Quicksand", sans-serif;
          transition: all 0.3s ease 0s;
        }
        button:hover{
          background-color: #3BB77E;
        }
      }
      .col-4{
        padding-left: 50px !important;
        img{
          max-width: 100%;
          border-radius: 15px;
          margin-top: 50px !important;
        }
      }
    }
  }
}
/*                                                                        product                                                                       */

.product-main-section{
  overflow: hidden;
  .container{
    .col-12{
      .col-xl-9{
        .up{
          .img{
            position: relative;
            img{
              max-width: 100%;
              border-radius: 16px;
              background-color: #fff;
              position: relative;
              z-index: -1;
            }
            i{
              position: absolute;
              top: 20px;
              right: 30px;
              font-size: 18px;
              z-index: 10;
            }
            .imgslide{
              margin-bottom: 30px;
              border-radius: 15px;
              
              overflow: hidden;
              border: 1px solid #ececec;
            }
            .imgnavs{
              
              .slick-next::before{
                font-family: "font awesome 6 free";
                position: relative;
                display: inline-block;
                background-color: #f2f3f4;
                color: #3333338c;
                font-weight: 700;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                font-size: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: .3s;
                margin-bottom: 30px;
              }
              .slick-next{
                top: 40%;
                right: 0px;
                margin-bottom: 30px;
                opacity: 0;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              .slick-prev{
                top: 40%;
                left: -20px;
                z-index: 1000;
                margin-bottom: 30px;
                opacity: 0;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
              }
              .slick-prev::before{
                font-family: "font awesome 6 free";
                position: relative;
                background-color: #f2f3f4;
                color: #3333338c;
                display: inline-block;
                font-weight: 700;
                width: 40px;
                height: 40px;
                border-radius: 50%;
                -webkit-border-radius: 50%;
                -moz-border-radius: 50%;
                -ms-border-radius: 50%;
                -o-border-radius: 50%;
                font-size: 18px;
                display: flex;
                justify-content: center;
                align-items: center;
                transition: .3s;
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                margin-bottom: 30px;
              }
              .slick-next:hover::before{
                background-color:#3BB77E;
                color:white;
              }
              .slick-prev:hover::before{
                background-color:#3BB77E;
                color:white;
              }
              .slick-slide{
                margin: 0 10px;
                border:1px solid transparent;
    
              }
              .slick-current{
                border:1px solid  #3BB77E;
              }
            }
            .imgnavs:hover{
              .slick-next{
                opacity: 1;
              }
              .slick-prev{
                opacity: 1;
              }
            }
          }
          .text{
            padding: 0 30px;
            .sale{
              color: #f74b81;
              background: #fde0e9;
              display: inline-block;
              padding: 8px 12px;
              border-radius: 5px;
              margin-bottom: 15px;
              font-family: "Quicksand", sans-serif;
              font-size: 14px;
              font-weight: 700;
              line-height: 1;
            }
            .name{
              font-size: 40px;
              font-family: "Quicksand", sans-serif;
              color: #253D4E;
              font-weight: 700;
              line-height: 1.2;
            }
            .star{
              margin-bottom: 10px;
              i{
                color: #ffc107;
                font-size: 10px;
              }
              i:last-of-type{
                color: #333;
              }
            }
            .price{
              display: flex;
              font-size: 58px;
              text-decoration: none;
              font-weight: 900;
              color: #3BB77E !important;
              margin-bottom:15px ;
              .del{
                margin-top: 15px;
                span{
                  font-size: 12px;
                font-weight: 600;
                margin-bottom: 6px;
                display: block;
                color: #FDC040;
                margin-left: 15px !important;
                margin-bottom: 0;
                }
                .line{
                  text-decoration: line-through;
                  color: #B6B6B6;
                  margin-left: 20px;
                  font-size: 28px;
                  font-weight: 700;
                  display: block;
                  margin-left: 15px !important;
                }
              }
            }
            .desc{
              font-size: 17px;
              margin-bottom: 30px;
            }
            .select{
              strong{
                margin-right: 10px !important;
              }
              span{
                color: #7E7E7E;
                height: 32px;
                line-height: 32px;
                min-width: 40px;
                text-align: center;
                display: inline-block;
                border-radius: 5px;
                padding: 0 9px;
                background: #fff;
                transition: all 0.5s ease-out 0s;
              }
              .active{
                color: #fff;
                background-color: #3BB77E;
                border-color: #3BB77E;
              }
              span:hover{
                color: #fff;
                background-color: #3BB77E;
                border-color: #3BB77E;
              }
            }
            .add{
              display: flex;
              .quantity{
                position: relative;
                margin-right: 10px;
                background: #fff;
                border: 2px solid #3BB77E !important;
                font-size: 16px;
                font-weight: 700;
                color: #3BB77E;
                border-radius: 5px;
                padding: 11px 20px 11px 30px;
                max-width: 90px;
                input{
                  width: 30px;
                  border: 0;
                }
                .up-q{
                  cursor: pointer;
                  position: absolute;
                  right: 8px;
                  color: #3BB77E;
                  top: 0;
                  i{
                    font-size: 12px;
                    text-align: end;
                  }
                }
                .down-q{
                  cursor: pointer;
                  position: absolute;
                  right: 8px;
                  color: #3BB77E;
                  bottom: 0;
                  i{
                    font-size: 12px;
                    text-align: end;
                  }
                }
              }
              button{
                position: relative;
                padding: 0px 20px;
                border-radius: 5px;
                border: 0;
                height: 50px;
                line-height: 50px;
                font-weight: 700;
                font-size: 16px;
                font-family: "Quicksand", sans-serif;
                background-color: #3BB77E;
                color: #ffffff;
              }
              a{
                background: #fff none repeat scroll 0 0;
                border: 1px solid #f1f1f1;
                color: #333;
                border-radius: 5px;
                display: inline-block;
                height: 50px;
                line-height: 55px;
                position: relative;
                text-align: center;
                vertical-align: top;
                width: 50px;
                margin: 0 5px;
                transition: all 0.5s ease-out 0s;
                -webkit-transition: all 0.5s ease-out 0s;
                i{
                  font-size: 18px;
                  opacity: 0.6;
                  transform: translateY(-3px);
                }
              }
              a:hover{
              background-color: #3BB77E;
              color: #fff;
              transform: translateY(-5px);
              transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
              -webkit-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
              -moz-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
              -ms-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
              -o-transition: all 0.25s cubic-bezier(0.02, 0.01, 0.47, 1);
              i{
                opacity: 1;
              }
            }
            }
            .type{
              font-size: 13px;
              margin-top: 50px;
              display: flex;
              ul{
                padding: 0;
                li{
                  margin-bottom: 10px;
                  span{
                    color: #3BB77E;
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                  }
                  span.hover:hover{
                    color:#ffc107 ;
                  }
                }
              }
            }
          }
        }
        .descrabtion{
          border: 1px solid #ececec;
          border-radius: 15px;
          padding: 40px 50px;
          ul{
            li{
              button{
                display: block;
                padding: 13px 24px !important;
                text-align: center;
                font-weight: 700;
                font-family: "Quicksand", sans-serif;
                text-transform: none;
                font-size: 17px;
                border-radius: 30px;
                border: 1px solid #ececec;
                background: #fff;
                color: #7E7E7E;
                margin-right:15px ;
              }
              .active,
              button:hover{
                color: #3BB77E;
                box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
              }
              
            }
          }
          .tab-content{
            #pills-home{
              ul{
                list-style-type: disc;
                padding: 20px;
                li{
                  font-size: 14px;
                  span{
                    width: 165px;
                    display: inline-block;
                    margin-left: 0;
                    margin-bottom: 10px;
                  }
                }
              }
              h4{
                font-size: 24px;
                color: #253D4E;
                font-weight: bold;
                margin-bottom: 30px;
              }
              span{
                font-size: 14px;
                margin-left: 20px;
                display: block;
                margin-bottom: 30px;
              }
            }
            #pills-profile{
              .row{
                border: 1px solid #ececec;
                .col-5{
                  padding: 0;
                  border-right: 1px solid #ececec;
                  p{
                    border-bottom: 1px solid #ececec ;
                    padding: 10px 20px;
                    margin-bottom: 0;
                  }
                }
                .col-7{
                  padding: 0;
                  p{
                    border-bottom: 1px solid #ececec ;
                    padding: 10px 20px;
                    margin-bottom: 0;
                  }
                }
              }
            }
            #pills-contact{
              .name{
                display: flex;
                margin-bottom: 20px;
                .text{
                  margin-left: 10px;
                  a{
                    color: #3BB77E;
                    font-weight: bold;
                    transition:.3s;
                    -webkit-transition:.3s;
                    -moz-transition:.3s;
                    -ms-transition:.3s;
                    -o-transition:.3s;
                  }
                  a:hover{
                    color: #ffc107;
                  }
                  .star{
                    margin-bottom: 10px;
                    i{
                      color: #ffc107;
                      font-size: 10px;
                    }
                    i:last-of-type{
                      color: #333;
                    }
                  }
                }
              }
              .social{
                margin-top: 10px;
                div{
                  display: flex;
                  margin-bottom: 10px;
                  i{
                    margin-right: 7px;
                    margin-top: 5px;
                    color: #3BB77E;
                    font-size: 18px;
                  }
                  p{
                    margin: 0;
                    display: inline-block;
                    font-size: 16px;
                    color: #333;
                    span{
                      text-align: center;
                    }
                  }
                }
              }
              .rats{
                margin-top: 50px;
                display: flex;
                .rat{
                  margin-right: 20px;
                  p{
                    margin-bottom: 0;
                    color: #3BB77E;
                    font-size: 13px;
                  }
                  h4{
                    color: #253D4E;
                    font-size: 30px;
                    font-weight: bold;
                  }
                }
              }
              .textp{
                margin-top: 50px;
                p{
                  font-size: 17px;
                  
                }
              }
            }
            #pills-rev{
              .row{
                .col-8{
                  h4{
                    color: #2a2a2a;
                    font-size: 18px;
                    margin-bottom: 30px ;
                    font-weight: bold;
                  }
                  .comments{
                    display: flex;
                    margin: 0 0 15px 0;
                    border: 1px solid #f2f2f2;
                    border-radius: 15px;
                    padding: 20px;
                    transition: 0.2s;
                    margin-bottom: 30px !important;
                    .img{
                      margin-right: 10px;
                      padding: 10px;
                      img{
                        width: 80px;

                      }
                      p{
                        color:#3BB77E;
                        font-weight: bold;
                        text-align: center;
                        margin-top: 10px;
                      }
                    }
                    .text{
                      .top{
                        display: flex;
                        justify-content: space-between;
                        span{
                          font-size: 13px;
                          color: #B6B6B6 !important;
                        }
                        .star{
                          margin-bottom: 10px;
                          i{
                            color: #ffc107;
                            font-size: 10px;
                          }
                          i:last-of-type{
                            color: #333;
                          }
                        }
                      }
                      p{
                        font-size: 15px;
                        margin-bottom: 10px !important;
                        color: #7e7e7e;
                        span{
                          opacity: 0;
                          transition: .3s;
                          -webkit-transition: .3s;
                          -moz-transition: .3s;
                          -ms-transition: .3s;
                          -o-transition: .3s;
                        }
                        span:hover{
                          color: #ffc107;
                        }
                      }
                    }
                  }
                  .form{
                    margin-top: 150px;
                    h4{
                      margin-bottom: 0;
                    }
                    .star{
                      margin-top: 0;
                      margin-bottom: 20px;
                      i{
                        color: #B6B6B6;
                        font-size: 10px;
                      }
                    }
                    .row{
                      .col-12{
                        margin-bottom: 20px;
                        input{
                          background: #fff;
                          border: 1px solid #ececec;
                          height: 64px;
                          box-shadow: none;
                          padding-left: 20px;
                          font-size: 16px;
                          width: 100%;
                          border-radius: 10px;
                          padding: .375rem .75rem;
                        }
                        input:focus{
                          background: transparent;
                          border-color: #BCE3C9;
                        }
                        textarea{
                          width: 100%;
                          height: 220px;
                          padding-top: 15px;
                          border: 1px solid #f0e9ff;
                          border-radius: 10px;
                          padding-left: 18px;
                          font-size: 16px;
                          background: transparent;
                        }
                        textarea:focus{
                          background: transparent;
                          outline: none !important;
                          box-shadow: none;
                          border-color: #BCE3C9;
                        }
                      }
                      .col-6{
                        margin-bottom: 20px;
                        input{
                          background: #fff;
                          border: 1px solid #ececec;
                          height: 64px;
                          box-shadow: none;
                          padding-left: 20px;
                          font-size: 16px;
                          width: 100%;
                          border-radius: 10px;
                          padding: .375rem .75rem;
                        }
                        input:focus{
                          background: transparent;
                          border-color: #BCE3C9;
                        }
                      }
                      button{
                        font-size: 16px;
                        font-weight: 500;
                        padding: 15px 40px;
                        color: #ffffff;
                        border: none;
                        background-color: #3BB77E;
                        border: 1px solid #29A56C;
                        border-radius: 10px;
                        width:fit-content;
                        margin-left: 10px;
                      }
                    }
                  }
                }
                .col-4{
                  h4{
                    color: #2a2a2a;
                    font-size: 18px;
                    margin-bottom: 30px !important;
                    font-weight: bold;
                  }
                  .header-star{
                    display: flex;
                    .star{
                      i{
                        color: #ffc107;
                        font-size: 10px;
                      }
                      i:last-of-type{
                        color: #333;
                      }
                    }
                    h6{
                      margin-left: 10px;
                      font-weight: bold;
                      margin-bottom: 0;
                      margin-top: 5px;
                      color: #2a2a2a;
                    }
                  }
                  .progress-c{
                    margin-top: 15px;
                    .prog{
                      display: flex;
                      p{
                        font-size: 12px;
                        display: inline-block;
                        /* width: 100%; */
                        margin-right: 10px;
                      }
                      .progress{
                        display: inline-block;
                        width: 85%;
                        border-radius: 0 0.375rem 0.375rem   0 ;
                        -webkit-border-radius: 0 0.375rem 0.375rem   0 ;
                        -moz-border-radius: 0 0.375rem 0.375rem   0 ;
                        -ms-border-radius: 0 0.375rem 0.375rem   0 ;
                        -o-border-radius: 0 0.375rem 0.375rem   0 ;
                        .progress-bar{
                          background-color: #3BB77E;
                        }
                      }
                    }
                  }
                  a{
                    color: #b6b6b6;
                    font-size: 13px;
                  }
                }
              }
              #pills-rev:hover{
                .col-9{
                  .comments{
                    .text{
                      p{
                        span{
                          opacity: 1;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .shop-section{
          h5{
            position: relative;
            border-bottom: 1px solid #ececec;
            padding-bottom: 20px;
            font-size: 24px;
            margin-bottom: 30px;
            color: #253D4E;
            font-weight: bold;
          }
          h5::before{
            content: "";
            width: 80px;
            height: 2px;
            position: absolute;
            bottom: 0;
            left: 0;
            background-color: #BCE3C9;
          }
          .content{
            margin-bottom: 100px;
            .row{
              .col-3{
                .pro{
                  position: relative;
                  background-color: #fff;
                  border: 1px solid #ececec;
                  border-radius: 15px;
                  overflow: hidden;
                  transition: 0.2s;
                  -moz-transition: 0.2s;
                  -webkit-transition: 0.2s;
                  -o-transition: 0.2s;
                  position: relative;
                  padding: 10px;
                  
                  .img-container{
                    position: relative;
                    .img{
                      max-width: 100%;
                      transition: .3s;
                      -webkit-transition: .3s;
                      -moz-transition: .3s;
                      -ms-transition: .3s;
                      -o-transition: .3s;
                    }
                    .img-alt{
                      position: absolute;
                      max-width: 100%;
                      transition: .3s;
                      -webkit-transition: .3s;
                      -moz-transition: .3s;
                      -ms-transition: .3s;
                      -o-transition: .3s;
                      visibility: hidden;
                      opacity: .25;
                      left: 0;
                    }
                  }
                  .sales{
                    z-index: 10;
                    position: absolute;
                    top: 0;
                    left: 0;
                    display: inline-block;
                    font-size: 12px;
                    line-height: 1;
                    border-radius: 15px 0 20px 0;
                    color: #fff;
                    padding: 9px 20px 10px 20px;
                  }
                  .hot{
                    background-color: #f74b81;;
                  }
                  .sale{
                    background-color: #67bcee;
                  }
                  .new{
                    background-color: #3BB77E;
                  }
                  .num{
                    background-color: #f59758;
                  }
                  .text{
                    .spon{
                      font-size: 12px;
                    }
                    .name{
                      color: #333;
                      font-size: 18px;
                      font-weight: bold;
                    }
                    .star{
                      margin-bottom: 10px;
                      i{
                        color: #ffc107;
                        font-size: 10px;
                      }
                      i:last-of-type{
                        color: #333;
                      }
                    }
                    .by{
                      font-size: 14px;
                      span{
                        color: #3BB77E;
                      }
                    }
                    .price{
                      display: flex;
                      justify-content: space-between;
                      p{
                        color: #3BB77E;
                        font-weight: bold;
                        font-size: 18px;
                        del{
                          color: #868686;
                          font-size: 14px;
                          margin-left: 10px;
                          font-weight: bold;
                        }
                      }
                      button{
                        border:0;
                        margin-bottom: 10px;
                        background-color: #d3fff2;
                        padding: 5px 20px;
                        color: #3BB77E;
                        transition: .3s;
                        -webkit-transition: .3s;
                        -moz-transition: .3s;
                        -ms-transition: .3s;
                        -o-transition: .3s;
                        border-radius: 4px;
                        -webkit-border-radius: 4px;
                        -moz-border-radius: 4px;
                        -ms-border-radius: 4px;
                        -o-border-radius: 4px;
                      }
                      button:hover{
                      color: white;
                        background-color: #3BB77E;
                      }
                    }
                  }
                }
              }
              .col-3{
                .pro:hover{
                  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
                  border: 1px solid #3BB77E;
                  .img{
                    opacity: .25;
                    visibility: hidden;
                    transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
                  }
                  .img-alt{
                    visibility: visible;
                    opacity: 1;
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
        
                    transform: scale3d(1.05, 1.05, 1.05) translateZ(0);
                  }
                  }
                }
              }
            }
          }
        }
      }
      .col-lg-3{
        .sticky-sidebar{
          .side{
            position: relative;
            padding: 30px;
            border: 1px solid #ececec;
            border-radius: 15px;
            box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05);
            margin-bottom: 30px;
            h5{
              position: relative;
              border-bottom: 1px solid #ececec;
              padding-bottom: 20px;
              font-size: 24px;
              margin-bottom: 30px;
              color: #253D4E;
              font-weight: bold;
            }
            h5::before{
              content: "";
              width: 80px;
              height: 2px;
              position: absolute;
              bottom: 0;
              left: 0;
              background-color: #BCE3C9;
            }
          }
          .cate{
            
            .content{
              padding: 0;
              li{
                display: flex;
                align-items: center;
                line-height: 48px;
                border-radius: 5px;
                border: 1px solid #F2F3F4;
                padding: 9px 18px;
                margin: 0 0 15px 0;
                justify-content: space-between;
                transition: 0.3s;
                -moz-transition: 0.3s;
                -webkit-transition: 0.3s;
                -o-transition: 0.3s;
                a{
                  display: flex;
                  align-items: center;
                  padding: 0;
                  line-height: 1.5;
                  color: #253D4E;
                  font-size: 14px;
                  img{
                    max-width: 30px;
                    margin-right: 15px;
                  }
                }
                span{
                  display: inline-block;
                  background-color: #BCE3C9;
                  width: 24px;
                  height: 24px;
                  line-height: 24px;
                  text-align: center;
                  border-radius: 20px;
                  margin-left: 5px;
                  font-size: 12px;
                  color: #253D4E;
                }
              }
            }
          }
          .products{
            ul{
              padding: 0;
              margin-top: 15px;
              li{
                padding-bottom: 10px;
                border-bottom: 1px dotted rgba(0, 0, 0, 0.15);
                display: flex;
                margin-bottom: 10px;
                transition: .3s;
      
                -webkit-transition: .3s;
                -moz-transition: .3s;
                -ms-transition: .3s;
                -o-transition: .3s;
                img{
                  width: 110px;
                  height: 110px;
                  border-radius: 6px;
                  -webkit-border-radius: 6px;
                  -moz-border-radius: 6px;
                  -ms-border-radius: 6px;
                  -o-border-radius: 6px;
                }
                .text{
                  margin-left: 15px;
                  padding: 10px;
                  p{
                    font-size: 18px;
                    color: #3BB77E;
                    margin-bottom: 0;
                    font-weight: bold;
                    transition: .3s;
                    -webkit-transition: .3s;
                    -moz-transition: .3s;
                    -ms-transition: .3s;
                    -o-transition: .3s;
                  }
                  p:hover{
                    color: #ffc107;
                  }
                  .star{
                    margin-bottom: 10px;
                    i{
                      color: #ffc107;
                      font-size: 10px;
                    }
                    i:last-of-type{
                      color: #333;
                    }
                  }
                  .price{
                    display: flex;
                    justify-content: space-between;
                    p{
                      font-size: 16px !important;
                      margin-top:5px;
                      color: #7E7E7E;
                      font-weight: normal;
                    }
                    p:hover{
                      color: #7E7E7E;
                    }
                  }
                }
              }
              
              
          }
          }
          .side-img{
            position: relative;
            border-radius: 15px;
            margin-bottom: 30px;
            img{
              max-width: 100%;
              opacity: 0.9;
              border-radius: 10px;
            }
            .text{
              position: absolute;
              top: 50%;
              z-index: 2;
              transform: translateY(-50%);
              padding: 0 50px;
              span{
                color: #adadad;
                font-size: 14px;
              }
              h4{
                font-weight: bold;
                margin-bottom: 15px;
                min-height: 100px;
                font-size: 24px;
                color: #253D4E;
                span{
                  color: #3BB77E !important;
                  font-size: 24px;
                }
              }
            }
          }
          .price{
            background: url(../image/fillter-widget-bg.png) no-repeat right bottom;
            background-size: 150px;
            .content{
              .range{
                .line{
                  width: 100%;
                  height: 4px;
                  background-color: #3BB77E;
                  border-radius: 10px;
                  -webkit-border-radius: 10px;
                  -moz-border-radius: 10px;
                  -ms-border-radius: 10px;
                  -o-border-radius: 10px;
                  margin-bottom: 10px;
                  position: relative;
                }
                .line::before{
                  content: "";
                  height: 18px;
                  width: 18px;
                  border-radius: 50%;
                  -webkit-border-radius: 50%;
                  -moz-border-radius: 50%;
                  -ms-border-radius: 50%;
                  -o-border-radius: 50%;
                  background-color: #3BB77E;
                  position: absolute;
                  left: -9px;
                  top: 50%;
                  transform: translateY(-50%);
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                }
                .line::after{
                  content: "";
                  height: 18px;
                  width: 18px;
                  border-radius: 50%;
                  -webkit-border-radius: 50%;
                  -moz-border-radius: 50%;
                  -ms-border-radius: 50%;
                  -o-border-radius: 50%;
                  background-color: #3BB77E;
                  position: absolute;
                  right: -9px;
                  top: 50%;
                  transform: translateY(-50%);
                  -webkit-transform: translateY(-50%);
                  -moz-transform: translateY(-50%);
                  -ms-transform: translateY(-50%);
                  -o-transform: translateY(-50%);
                }
                .ft{
                  display: flex;
                  justify-content: space-between;
                  p{
                    font-size: 14px;
                    span{
                      color: #3BB77E;
                      font-weight: bold;
                    }
                  }
                }
              }
              ul{
                h6{
                  font-weight: bold;
                  color: #253D4E;
                }
                li{
                  margin-bottom: 5px;
                  input{
                    border: 2px solid #ced4da;
                    border-radius: 0;
                    -webkit-border-radius: 0;
                    -moz-border-radius: 0;
                    -ms-border-radius: 0;
                    -o-border-radius: 0;
                    width: 15px;
                    height: 15px;
                    margin-right: 10px;
                  }
                  input:checked{
                    background-color: #3BB77E;
                    border: 0;
                    box-shadow: none;
                  }
                  input:focus{
                    outline: 0;
                    box-shadow: none;
                  }
                }
              }
              button{
                display: inline-block;
                border: 1px solid transparent;
                font-size: 12px;
                font-weight: 700;
                padding: 8px 18px;
                border-radius: 4px;
                color: #fff;
                border: 1px solid transparent;
                background-color: #3BB77E;
                cursor: pointer;
                transition: all 300ms linear 0s;
                letter-spacing: 0.5px;
                margin-top: 10px;
              }
              button:hover{
                background-color: #ffc107;
                padding-left: 30px;
                
              }
            }
          }
        }
      }
    }
}


/*                                                                        mobile                                                                      */


.mobile-nav{
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.07);
  background-color: #fff;
  border-top: 1px solid #ececec;
  border-bottom: 1px solid #ececec;
  height: 70px;
  .container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 70px;
    button{
      border: 0;
      background-color: transparent;
      font-size: 24px;
      width: fit-content;
      height: fit-content;
    }
    .logo{
      img{
        width: 150px;
        height: 150px;
      }
    }
    a{
      i{
        font-size: 20px;
      }
    }
  }
}

@media only screen and (max-width: 480px) {
  .cate-section {
      .header{
        display: grid !important;  
        .list{
          p{
            margin: 0 20px !important;
            display: inline-block;
            font-size: 14px;
          }
        }
      }
  }
  .bannar-section{
    .col-12{
      .content{
        p{
          font-size: 18px !important;
          width: 180px !important;
        }
      }
    }
  }
  .shop{
    .header{
      display: grid !important;
      .list{
        flex-wrap: wrap;
        p{
          font-size: 14px !important;
          margin: 0 15px 5px 0 !important;
          display: inline-block;
        }
      }
    }

  }
  .countdown-section{
    .count-product{
      margin-bottom: 150px;
    }
  }
  .form-section{
    .container{
      padding: 20px !important;
      z-index: -2 !important;
      h2{
        font-size: 22px !important;
      }
      p{
        font-size: 14px !important;
        margin-bottom: 25px !important;
      }
      form{
        margin: 15px 0 !important;
      }
      img{
        z-index: -1 !important;
      }
    }
  }
  .shop-head{
    .container{
      padding: 30px;
    }
  }
  .welcome-section{
    .container{
      .content{
        .slide{
          .slick-next{
            right: 20px;
          }
        }
      }
    }
  }
  .img-w{
    width: 180px !important;
    height: 180px !important;
  }
  .name-b::before{
    content: attr(data-title) " ";
    float: left;
    text-transform: capitalize;
    margin-right: 15px;
    font-weight: bold;
    font-size: 14px !important;
    color: #242424;
    width: 3px;
  }
  .img-w{
    width: 180px !important;
    height: 180px !important;
  }
  .mrx-0{
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .mrx-5{
    margin-left: 3rem !important;
    margin-right: 3rem !important;
  }
  .contact-head{
    .container{
      .col-sm-8{
        padding-top: 20px;
      }
    }
  }
  .dashboard{
    .container{
      .col-sm-9{
        .tab-pane{
          padding: 0 20px !important;
        }
        #orders{
          .table{
            .content{
              .order:first-of-type{
                border-top: 1px solid #ececec;
              }
            }
          }
        }
      }
    }
  }
  .vendor-dashboard{
    .container{
      .dashboard{
        .col-lg-9{
          .table{
            .section{
              border-top: 1px solid #ececec !important;
              p{
                border: 0 !important;
                border-bottom:1px  solid #ececec !important;
                width: 100%;
                text-align: center;
              }
              a{
                width: 100%;
                text-align: center;
              }
            }
          }
        }
      }
    }
  }
  .vendor-head{
    .container{
      h1{
        font-size: 65px;
      }
    }
  }
  .font-land{

    font-size: 32px !important;
  }
  .font-landp{
    font-size: 16px;
  }
  .activity-section{
    .container{
      .col-12{
        ul{
          li{
            img{
              width: 70px;
              height: 70px;
            }
          }
        }
      }
    }
  }
}

@media only screen and (min-width: 500px){
  .font-14{
    font-size: 14px !important;
  }
  .img-w{
    width: 80px !important;
    height: 80px !important;
  }
}

@media only screen and (min-width: 800px){
  .img-w{
    width: 120px !important;
    height: 120px !important;
    .font-14{
      font-size: 16px !important;
    }
  }
}
@media only screen and (min-width: 1200px) {
  .col-lg-1-5 {
      width: 20%;
  }
}

.offcanvas{
  width: 80%;
  .offcanvas-header{
    border-bottom: 1px solid #ececec;
    img{
      width: 140px;
    }
    button{
      position: relative;
      background-color: transparent;
      padding: 0;
      border: none;
      width: 26px;
      height: 26px;
      background-color: #DEF9EC;
      border-radius: 30px;
      background-image:none ;
      font-size: 14px;
      margin-right: 10px;
    }
    
  }
  .offcanvas-body{
    .form{
      padding: 0 10px;
      input{
        font-size: 14px;
        height: 45px;
        color: #253D4E;
        background-color: #F2F3F4;
        border-radius: 5px;
        padding: 3px 50px 3px 20px;
        transition: all 0.25s cubic-bezier(0.645, 0.045, 0.355, 1);
        border: 0;
        width: 100%;
      }
    }
    .collap{
      .colp{
        display: block;
        position: relative;
        padding: 13px 0;
        border-bottom: 1px solid #ececec;
        button{
          border: 0;
          background-color: transparent;
          width: 100%;
          display: flex;
          justify-content: space-between;
          a{
            font-size: 14px;
            line-height: 1;
            text-transform: capitalize;
            font-weight: 700;
            position: relative;
            display: inline-block;
            color: #253D4E;
          }
        }
        .collapse{
          .card{
            border: 0;
            ul{
              padding: 0;
              li{
                margin-bottom: 10px;
                .collapse{
                  .card{
                    .ul{
                      padding: 0;
                      li{
                        margin-bottom: 10px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
        .collapsing{
          .card{
            border: 0;
            ul{
              padding: 0;
              li{
                margin-bottom: 10px;
                .collapse{
                  .card{
                    .ul{
                      padding: 0;
                      li{
                        margin-bottom: 10px;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .navs{
      margin-top: 20px;
      width: 100%;
      padding: 20px;
      border: 1px solid #ececec;
      border-radius: 6px;
      -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
      -ms-border-radius: 6px;
      -o-border-radius: 6px;
      a{
        display: block;
        margin-bottom: 10px;
        i{
          color: #3BB77E;
          margin-right: 5px;
        }
      }
    }
    .social{
      margin-top: 20px;
      h6{
        margin-bottom: 10px;
        margin-top: 10px;
        color: #253D4E;
        font-weight: bold;
      }
      .icons{
        margin-top: 15px;
        display: flex;
        a{
          i{
            width: 30px;
            height: 30px;
            background-color: #3BB77E;
            border-radius: 50%;
            -webkit-border-radius: 50%;
            -moz-border-radius: 50%;
            -ms-border-radius: 50%;
            -o-border-radius: 50%;
            display: grid;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 14px;
            margin-right: 7px;
          }
        }
      }
    }
    .copy{
      padding: 20px;
      margin-top: 40px;
      p{
        font-size: 13px;
        color: #B6B6B6;
      }
    }
  }
}