@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');



:root{

  --green:#007df2;

}



*{

  font-family: 'Roboto', sans-serif;

  margin:0; padding:0;

  box-sizing: border-box;

  /*text-transform: capitalize;*/

  font-size:15px;

  outline: none; border:none;

  text-decoration: none;

  transition: all .2s linear;

}




.data {

    margin-top:50px;

    

    padding:4rem;

    font-size:1;

    min-height:62vh;

    background:#fff;


    

}



html{

  font-size: 62.5%;

  overflow-x: hidden;

  scroll-behavior: smooth;

  scroll-padding-top: 7rem;

}



section{

  padding:4rem 9% !important ;

}
li{
    list-style-type: none;
}
a{
  text-decoration: none!important;
}
.category-header
{
    padding: 1rem 9%;
    padding-top: 0;
    display: flex;
    align-items:center ;
    justify-content:space-between ;
}
.category-header .categories li{
list-style-type: none;

    
}
.mb-navbar{
  display: none;
}

.desktop-nav{
  display: block;
}

.navbar-expand-lg .navbar-nav{
    align-items:center!important;
    justify-content:space-between;
    width:100%;
    
}

.heading{

  
}

.data1{

    margin-top: 40px;

    /* text-align: center; */

    padding: 4rem;

    /* font-size: 1.4rem; */

    min-height: 40vh;

}



.btn-1{

  display: inline-block;

  margin-top: 1rem;

  padding:.8rem 3rem;

  background:#ffbd00;

  color:#fff;

  font-size: 17px;

  cursor: pointer;

}



.btn-1:hover{

  background:#333;

}

 .search-form{

    position: absolute;

    top:110%; right:-110%;

    width: 50rem;

    height:5rem;

    background: #fff;

    border-radius: .5rem;

    overflow: hidden;

    display: flex;

    align-items: center;

    box-shadow: 0 10px 10px rgb(0 0 0 / 34%);

}



 .search-form.active{

    right:2rem;

    transition: .4s linear;

}



 .search-form input{

    width:100%;

    border:var(--border);

    border-radius: .5rem;

    padding:1rem;

    font-size: 17px;

    color:#0d6efd;

    height: 100%;

}



 .search-form label{

    font-size: 2.2rem;

    padding-right: 1.5rem;

    color:var(--purple);

    cursor: pointer;

}



 .search-form label:hover{

    color:var(--pink);

}



.header-2,

.header-3{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:1rem 9%;


  /* background:var(--green); */

}

.header-3 .navbar{

    margin:0;

    min-height:auto;

}

.header-1{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:1rem 9%;

  background:#212529;

}



.header-1{

  border-bottom: .1rem solid rgba(255,255,255,.2);

}



.header-3{

  background:#fff;

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

  position: relative;

  z-index: 10000;

}



.header-1 span{

  font-weight: lighter;

  color:#fff;

  font-size: 17px;

}



.header-1 a{

  padding:0 .7rem;

  color:#fff;

  font-size: 17px;

}

 .course.dropdown-item{
    border-bottom: 1px solid rgb(140 140 140 / 20%);
    padding: 1rem!important;
}
.progress-bar{
    background-color: #4ba1f1!important;
}


.header-1 a:hover{

  color:#EFAE00;

}



.header-2 .logo{

  font-weight: bolder;

  font-size: 30px;

  color:#444;

}



.header-2 .logo i{

  color:#F2BE33;

  font-size:inherit;

}



 .search-bar-container{

  display: flex;

  align-items: center;

  width: 50rem;

  padding:15px;

  background:rgba(255,255,255,.2);

  border-radius: .5rem;
  border: 1px solid rgb(0 0 0 / 17%);

}



.search-bar-container #search-bar{

  width: 100%;

  background:none;

  text-transform: none;

  color:#fff;

  font-size: 17px;

}



.search-bar-container #search-bar::placeholder{

  text-transform: capitalize;

  color:#ddd;

}



 .search-bar-container label{

    color: #d4d4d4;

  cursor: pointer;

  font-size: 20px;

  padding:0 .5rem;


}
.navbar{
    margin:0!important;
    border-radius:0!important;
}



.search-bar-container label:hover{

  color:#EFAE00;

}



.header-3 .navbar a{

  color:#666;

  font-size: 20px;

  margin-right: 2rem;

}



.header-icons i{

  color:#fff;

  /*font-size: 2.5rem;*/

  /*margin-left: 1rem;*/

}
.header-icons li i{
  font-size: 20px;
    background: #0d6efd17;
    width: 40px;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin: 0.3rem;
    color: #0066ff;
    border-radius: 50%;
    padding: 0;
}



.header-3 a:hover{

  color:var(--green);

}



#menu-bar{

  font-size: 30px;

  color:#666;

  border:.1rem solid #666;

  border-radius: .5rem;

  padding:.5rem 1.5rem;

  cursor: pointer;

  display: none;

}



.header-3.active{

  position: fixed;

  top:0; left: 0; right: 0;

}










.banner-container{

  display: flex;

  flex-wrap: wrap;

  gap:1.5rem;

  padding-top: 7rem;

  padding-bottom: 7rem;

}



.banner-container .banner{

  flex:1 1 40rem;

  height:25rem;

  border:.1rem solid rgba(0,0,0,.3);

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

  overflow: hidden;

  position: relative;

}



.banner-container .banner .content{

  position: absolute;

  top:50%; left: 4%;

  transform: translateY(-50%);

}



.banner-container .banner img{

  height: 100%;

  width:100%;

  object-fit: cover;

}



.banner-container .banner .content span{

  color:#666;

  font-size:17px;

}



.banner-container .banner .content h3{

  color:#333;

  font-size:30px;

}



.banner-container .banner:hover img{

  transform: scale(1.2);

}

.category{

  min-height: 50vh;

  margin-bottom: 2rem;

}



.category .box-container{

  display: flex;

  flex-wrap: wrap;

 

  gap:2rem;

}



.category .box-container .box{

  position: relative;

  width:26rem;

  /*flex: 1 1 25rem;*/

  background: #dce9ff;

  height: 29rem;

    overflow: hidden;

    /* border: 0.1rem solid rgba(0,0,0,.3); */

    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 10%);

}



.category .box-container .box img{

  height: 100%;

  width:100%;

  object-fit: cover;

}

.category .box-container .box .image{

  width: 13rem;

   

  

    margin: auto;

    transform: translate(0, 50%);

}



.category .box-container .box .content{

  position: absolute;

  bottom: -5.5rem;

  background: #8eb6fd;

  /* border-top: 0.1rem solid rgba(0,0,0,.3); */

  text-align: center;

  padding: 0.5rem 0;

  width: 100%;

}



.category .box-container .box:hover .content{

  bottom:0;

}



.category .box-container .box .content h3{

  color:#333;
  

  font-size: 20px;

  padding:1rem 0;

}



.category .box-container .box .content .btn{

  margin-bottom: 1.3rem;

}

.product{

  min-height: 50vh;

}



.product .box-container{

  display: flex;

  flex-wrap: wrap;

  gap:2rem;

}



.product .box-container .box{

 width:350px;

  border:.1rem solid rgba(0,0,0,.3);

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

  /* text-align: center; */

  position: relative;

  overflow: hidden;

}

.product .box-container .box .content{

  padding: 1rem;

  /*height:200px;*/

}
.product .box-container .box .content h3 a{
 overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 1; /* number of lines to show */
           line-clamp: 1; 
   -webkit-box-orient: vertical;
}

.product .box-container .box .content p{

  font-size: 16px;

  color: #555;

  
  padding-bottom: .5rem;

}





.product .box-container .box .image{

  height: 25rem;

  width:100%;

  border-bottom:.1rem solid rgba(0,0,0,.3);

  object-fit: cover;

}

.product .box-container .box .image img{

    width:100%;

    height:100%;

     object-fit: cover;

    

}



.product .box-container .box .seller{

  position: absolute;

    /* top: 1rem; */

    /* left: 1rem; */

    background: #1684ff;

    color: #ffffff;

    /* border: 1px solid #ffad42; */

    font-size: 20px;

    padding: 0.5rem 1rem;



}



.product .box-container .box .icons{

  position: absolute;

  top:1rem; right:-8rem;

  display: flex;

  flex-flow: column;

  background:#fff;

  border-radius: 5rem;

  padding:.5rem;

  box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);

  text-align: center;

}





.product .box-container .box:hover .icons{

  right:1rem;

}



.product .box-container .box .icons a{

  height: 4rem;

  width:4rem;

  line-height: 4rem;

  font-size: 15px;

  color:#333;

  border-radius: 5rem;

  margin:.1rem;

}



.product .box-container .box .icons a:hover{

  color:#fff;

  background:var(--green);

}



.product .box-container .box h3 a{

  color:#333;

  font-size: 20px;

  /*padding:1rem 0;*/

  /*margin-bottom:1rem;*/

}

.product .box-container .box .stars {

  padding-bottom: .5rem;

  display: flex;

}

.product .box-container .box .stars p{

  padding: 0 1rem ;

}



.product .box-container .box .stars i{

  color:gold;

  font-size: 17px

}

.product .box-container .box .stars span{

  font-size: 17px;

    font-weight: 600;

    padding-right:1rem;

    color: orange;





}



.product .box-container .box .quantity{

  padding:1rem 0;

}



.product .box-container .box .quantity span{

  font-size: 17px;

}



/* .product .box-container .box .quantity input{

  font-size: 2rem;

  padding:.5rem;

  text-align: center;

  background:rgba(0,0,0,.1);

} */



.product .box-container .box .price{

  font-weight: bolder;

  color:var(--green);

  font-size: 20px;

}



.product .box-container .box .price span{

  text-decoration: line-through;

  color:#999;

  font-size: 15px;

}



.product .box-container .box .btn-1{

  display: block;

  margin:2rem;

  text-align: center;

}



.icons-container{

  display: flex;

  flex-wrap: wrap;

  gap:2rem;

  padding-bottom: 4rem;

  padding-top: 4rem;

  background:#dfebff;

}



.icons-container .icon{

  padding:2rem 0;

  display: flex;

  align-items: center;

  flex:1 1 25rem;

}

.icons-container .icon img{

  width:7rem;

}



.icons-container .icon .content{

  padding-left: 2rem;

}



.icons-container .icon .content h3{

 font-size: 20px;

 color:var(--green);

}



.icons-container .icon .content p{

  font-size: 15px;

  color:#666;

}



.about {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -webkit-box-align: center;

      -ms-flex-align: center;

          align-items: center;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  gap: 8rem;

  /* min-height: 60vh; */

 

}







.about .image {

  -webkit-box-flex: 1;

      -ms-flex: 1 1 42rem;

          flex: 1 1 42rem;

  position: relative;

}



/* .about .image::before {

  content: '';

  position: absolute;

  z-index: -1;

  background: #007DF2;

  height: 25rem;

  width: 25rem;

}



.about .image::before {

  top: 0;

  left: 0;

} */



.about .image::after {

  bottom: 0;

  right: 0;

}



.about .image img {

  width: 100%;

  padding: 2rem;

}



.about .content {

  -webkit-box-flex: 1;

      -ms-flex: 1 1 42rem;

          flex: 1 1 42rem;

}



.about .content span {

  font-size: 2rem;

  color: #EFAE00;

}



.about .content .title {

  font-size: 40px;

  color: var(--green);

  margin-top: .5rem;

 

}



.about .content p {

  font-size: 15px;

  color: #555;

  padding: 1rem 0;

  line-height: 2;

}



.about .content .box-container {

  display: -webkit-box;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-wrap: wrap;

      flex-wrap: wrap;

  gap: 2rem;

  margin-top: 1rem;

}



.about .content .box-container .box {

  -webkit-box-flex: 1;

      -ms-flex: 1 1 20rem;

          flex: 1 1 20rem;

}



.about .content .box-container .box h3 {

  font-size: 20px;

  color: #fff;

  background: linear-gradient(45deg, #ff93c0, #f7637a);

  padding: 1rem;

}



.about .content .box-container .box h3 i {

  padding-right: 15px;

  color: #fff;

}



 /* signup page */

   .signup-wrapper{

    padding: 4rem; 

    height: 100%;

    display: flex;

    justify-content: center;

    align-items: center;

    



   }

   .signup-form{

        margin-top:60px;

    position: relative;

    width: 100%;

    max-width: 600px;

    padding: 60px 40px 40px;

    

     background:#fff; 
     border: 2px solid #0d6efd;

    border-radius: 10px;

    color: #fff;

    box-shadow: 0 15px 25px rgba(0,0,0,0.5);

   }

  

  .signup-form h2 {

    text-align: center;

    letter-spacing: 4px;

    margin-bottom: 2rem;

    font-size: 24px;

    color: var(--green);

  }

  .signup-form .input-group {

    position: relative;

    width:100%;

  }

  .signup-form .input-group input,textarea,checkbox {

    width: 100%;

    padding: 10px 0;

    font-size: 14px;

    color:#333;

    letter-spacing: 1px;

    margin-bottom: 30px;

    border: none;

    border-bottom: 1px solid rgba(0,0,0,0.2);

    outline: none;

    background-color: transparent;

    resize: none;

  }

  .signup-form .input-group select {

    width: 100%;

    padding: 10px 0;

    font-size: 14px;

    color:#333;

    letter-spacing: 1px;

    margin-bottom: 30px;

    border: none;

    border-bottom: 1px solid rgba(0,0,0,0.2);

    outline: none;

    background-color: transparent;

    resize: none;

  }

   .signup-form .input-group radio {

    width: 100%;

    padding: 10px 0;

    font-size: 14px;

    color:#333;

    letter-spacing: 1px;

    margin-bottom: 30px;

    border: none;

    border-bottom: 1px solid rgba(0,0,0,0.2);

    outline: none;

    background-color: transparent;

    resize: none;

  }

  .signup-form .input-group label{

      color: #444;

      font-size: 14px;

  }

  .submit-btn {

     display: block;

     margin-left: auto;

     border: none;

     outline: none;

     background: #F2BE33;

     font-size: 14px;

     text-transform: uppercase;

     letter-spacing: 1px;

     padding: 10px 20px;

     border-radius: 5px;

     color: #fff;

     cursor: pointer;

     margin-bottom: 1.2rem;

   }

   

.radio-container {

  display: block;

  position: relative;

  padding-left: 35px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 22px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

}





.radio-container input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

}





.checkmark {

  position: absolute;

  top: 0;

  left: 0;

  height: 20px;

  width: 20px;

  background-color: #eee;

  border-radius: 50%;

}





.radio-container:hover input ~ .checkmark {

  background-color: #ccc;

}





.radio-container input:checked ~ .checkmark {

  background-color: #2196F3;

}





.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}





.radio-container input:checked ~ .checkmark:after {

  display: block;

}





.radio-container .checkmark:after {

 top: 6px;

    left: 6px;

	width: 8px;

	height: 8px;

	border-radius: 50%;

	background: white;

}

    /* login-form */

  .login-wrapper {

      padding:7rem ;

   

     display: flex;

     justify-content: center;

     align-items: center;

   }

    .login-wrapper   .form {

       margin-top:40px;

     position: relative;

     width: 100%;

     max-width: 380px;

     padding: 80px 40px 40px;

    background:#fff;

     border:2px solid #0d6efd;

     border-radius: 10px;

     color: #fff;

     box-shadow: 0 15px 25px rgba(0,0,0,0.5);

   }

   

    .login-wrapper .form img {

     position: absolute;

     top: -50px;

     left: calc(50% - 50px);

     width: 100px;

     background: rgba(255,255,255, 0.8);

     border-radius: 50%;

   }

    .login-wrapper .form h2 {

     text-align: center;

     letter-spacing: 4px;

     margin-bottom: 2rem;

     font-size: 24px;

     color: var(--green);

   }

    .login-wrapper .form .input-group {

     position: relative;

   }

    .login-wrapper  .form .input-group input {

     width: 100%;

     padding: 10px 0;

     font-size: 14px;

     color:#111;

     letter-spacing: 1px;

     margin-bottom: 30px;

     border: none;

     border-bottom: 1px solid #777;

     outline: none;

     background-color: transparent;

   }

    .login-wrapper .form .input-group label{

       color: #333;

       font-size: 14px;

   }





/* view details page */

.details-container{

    display: grid;

  

    background:#eee;

    margin-top:3rem;

  }

  

  .details-container .posts-container .post{

    width:100%;

    height: 100%;

    padding:2rem;

    background:#fff;

    border:var(--border);

    border-radius: .5rem;

    margin-bottom: 1.5rem;

  }

  .location{

    font-size: 14px;

    color: #777;

  }

  .details-container .posts-container .post .com-details{

    display: flex;

    justify-content: space-between;

  }

  .details-container .posts-container .post .com-details img{

    width:6rem;

  }

  

  .details-container .posts-container .post .image{

    height: 40rem;

    width:100%;

    border-radius: .5rem;

    object-fit: cover;

  }

  

  .details-container .posts-container .post .date{

    padding-top: 2rem;

    font-size: 15px;

    color: #d33af9;;

  }

  

  .details-container .posts-container .post .title{

    padding-top: 1.5rem;

    font-size: 25px;

    color: rgb(108, 33, 155);

  }

  .details-container .posts-container .post .com-details p{

    font-size: 14px;

    color:#666;

  }

  

  .details-container .posts-container .post .text{

    color:var(--light-color);

    font-size: 16px;

    line-height: 1.7;

    padding:1rem 0;

  }

  

  .details-container .posts-container .links{

  

    margin-top: .5rem;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    margin-bottom: .5rem;

    display: flex;

    align-items: center;

    border-bottom: 1px solid rgba(0,0,0,0.2);

  

    

  }

  

  /* .container .posts-container .links .user{

    margin-right: auto;

  } */

  

  

  .details-container .posts-container .links .icon{

    padding-right: 3rem;

  }

  

  .details-container .posts-container .links a{

    color: #666;

    line-height: 2;

    font-size: 15px;

    

  }

  

  .details-container .posts-container .links a i{

    padding-right: .2rem;

    color:var(--light-color);

  }

  

  .details-container .posts-container .links a:hover{

    color:var(--orange);

  }

  

  .details-container .posts-container .links a i:hover{

    color:var(--orange);

  }
  .user .dropdown-item{
   padding: 1rem 2rem;
 
    border-bottom: 1px solid rgb(0 0 0 / 7%);
    font-size:inherit;
  }
  .dropdown-menu>li>a{
 padding: 1.5rem  !important;
    border-bottom: 1px solid rgb(0 0 0 / 7%);
  }
  

  .details-container .sidebar .box{

    /* min-height: 70vh; */

    border:var(--border);

    border-radius: .5rem;

    overflow:hidden;

    background:#fff;

    margin-bottom: 1.5rem;

    

  }

  .header-icons{

    font-size: 2rem;

    color: #d21fff;

    float: right;
    display:flex;
    align-items:center;
    justify-content: space-between;
    width: 120px 

   

  

  }
  .dropdown-menu-dark .dropdown-item {
    color: #444!important;
}
.header-icons .dropdown-toggle::after{
    display:none;

}

  .header-icons i{
    /*padding: .5rem;*/
    color:#0d93fd;
    font-size:20px;

  }
.progress{
    width:100%;
    max-width:250px;
      min-width:250px;
  height: 10px !important;
    margin-bottom: 10px!important;
    overflow: hidden!important;
    background-color: #f5f5f5!important;
    border-radius: 4px!important;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 -3px 2px rgba(0,0,0,.1)!important;
  }

  .info p{

    padding: 2rem 0;

    font-size: 14px;

    color: #444;

  }

  .info li{

    list-style-type: none;

    padding: .2rem 0;

    font-size: 14px;

    color: #444;

  }

  .container-1{

    display: grid;

    grid-template-columns: 2.5fr 1fr;

    gap:1.5rem;

    background:#eee;

    margin-top:3rem;

  }

  

  .container-1 .posts-container .post{

    width:100%;

    padding:2rem;

    background:#fff;

    border:var(--border);

    border-radius: .5rem;

    margin-bottom: 1.5rem;

  }

  .location{

    font-size: 14px;

    color: #777;

  }

  .container-1 .posts-container .post .com-details{

    display: flex;

    justify-content: space-between;

    align-items: center;

  }

  .container-1 .posts-container .post .com-details .price{

    font-weight: bolder;

    color:var(--green);

    font-size: 20px;

  }

  .container-1 .posts-container .post .com-details .price i {

      padding: 0 1rem ;

  }

  .container-1 .posts-container .post .com-details .price span{

    text-decoration: line-through;

    color:#999;

    font-size: 15px;

  }

  .container-1 .posts-container .post .com-details .image{

    width:200px;

    height: 100%;

  }

  .container-1 .posts-container .post .com-details .image img{

      height: 100%;

      width: 100%;

  }

  

  .container-1 .posts-container .post .image{

    height: 40rem;

    width:100%;

    border-radius: .5rem;

    object-fit: cover;

  }

  

  .container-1 .posts-container .post .date{

    padding-top: 2rem;

    font-size: 15px;

    color: #d33af9;;

  }

  

  .container-1 .posts-container .post .title{

 

    font-size: 25px;

    color: #007DF2;

    margin-top:10px;

    margin-bottom: .5rem;

  }

  .container-1 .posts-container .post .com-details p{

    font-size: 14px;

    color:#666;

    margin-bottom:0;

  }

  

  .container-1 .posts-container .post .text{

    color:var(--light-color);

    font-size: 16px;

    line-height: 1.7;

    padding:1rem 0;

  }

  

  .container-1 .posts-container .links{

  

    margin-top: .5rem;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    margin-bottom: .5rem;

    display: flex;

    align-items: center;

    border-bottom: 1px solid rgba(0,0,0,0.2);

  

  }

  

  /* .container .posts-container .links .user{

    margin-right: auto;

  } */

  

  

  .container-1 .posts-container .links .icon{

    padding-right: 3rem;

  }

  

  .container-1 .posts-container .links a{

    color: #666;

    line-height: 2;

    font-size: 15px;

    

  }

  

  .container-1 .posts-container .links a i{

    padding-right: .2rem;

    color:var(--light-color);

  }

  

  .container-1 .posts-container .links a:hover{

    color:var(--orange);

  }

  

  .container-1 .posts-container .links a i:hover{

    color:var(--orange);

  }

  

  .container-1 .sidebar .box{

    /* min-height: 70vh; */

    border:var(--border);

    border-radius: .5rem;

    overflow:hidden;

    background:#fff;

    margin-bottom: 1.5rem;

    padding-bottom: 2rem;

  }

  

  .details{

    float: right;

    font-size: 16px;

    color: #d21fff;

  }

  

  .container-1 .sidebar .box .title{

    padding: 1.5rem;

    font-size: 20px;

    color: #6c219b;

    text-align: center;

    background: #0d6efd;

    text-transform: capitalize;

  }

  

  .container-1 .sidebar .box .about{

    text-align: center;

    padding:1rem 1.5rem;

  }

  

  .container-1 .sidebar .box .about img{

    height: 15rem;

    width: 15rem;

    border-radius: 50%;

    object-fit: cover;

    margin:1rem 0;

  }

  

  .container-1 .sidebar .box .about h3{

    color:var(--orange);

    font-size: 20px;

  }

  

  .container-1 .sidebar .box .about p{

    color:var(--light-color);

    font-size: 15px;

    line-height: 1.5;

    padding:1rem;

  }

  

  .container-1 .sidebar .box .about .follow{

    padding:1rem 0;

  }

  

  .container-1 .sidebar .box .about .follow a{

    height: 4rem;

    line-height: 4rem;

    width: 4rem;

    border-radius: 50%;

    background:#0d6efd;

    color:#fff;

    font-size: 17px;

    margin:0 .1rem;

  }

  

  .container-1 .sidebar .box .about .follow a:hover{

    background:var(--orange);

  }

  

  .container-1 .sidebar .box .category{

    padding:1rem 1.5rem;

    min-height: 25vh;



  }

  .container-1 .sidebar .box .category.total h3{

      font-size: 20px;

      color:#444



  }

  .container-1 .sidebar .box .category.total .price{

    font-weight: bolder;

    color:var(--green);

    padding: 1rem 0;

    font-size: 30px;

  }

  .container-1 .sidebar .box .category.total .price span{

    text-decoration: line-through;

    padding: 1rem 0;

    color:#999;

    font-size: 15px;

  }

  

  .container-1 .sidebar .box .p-post{

    padding:1rem 2rem;

  }

  

  .container-1 .sidebar .box .p-post a{

    padding:1rem 0;

    display: block;

  }

  

  .container-1 .sidebar .box .p-post a h3{

    color:#0d6efd;

    font-size: 20px;

    padding-bottom: 1rem;

  }

  

  .container-1 .sidebar .box .p-post a span{

    color:var(--light-color);

    font-size: 15px;

  }

  

  .container-1 .sidebar .box .p-post a span i{

    padding-right: .2rem;

  }

  

  .container-1 .sidebar .box .p-post a:hover h3{

    color:var(--orange);

  }

  

  .container-1 .sidebar .box .tags{

    padding:1rem;

  }

  

  .container-1 .sidebar .box .tags a{

    display: inline-block;

    padding:1rem 1.5rem;

    font-size: 15px;

    color:#0d6efd;

    border-radius: .5rem;

    border:var(--border);

    margin:.5rem;

  }

  

  .container-1 .sidebar .box .tags a:hover{

    background:#0d6efd;

    color:#fff;

  }

  /* .cart{

    display: flex;

align-items:center;

    width: 100%;

  

  }

  .cart .content{

      padding: 0 1rem;

  }

  .cart .content .stars{

    display: flex;

    margin-top: .5rem;

    font-size: 1.4rem;

   

    align-items: center;

  }

  .cart .content .stars i{

    color:gold;

   

  }

  .cart .content .stars span{

      padding-right:1rem;

      color: orange;

      font-weight: 600;

  }

  .cart .content .stars p{

    padding-left:1rem;

} */

/*view-course page */

.view-container{

    display: grid;

  

    background:#eee;

   

  }

  

  .view-container .posts-container .post{

    width:100%;

    height: 100%;

    /* padding:2rem; */

    background:#fff;

    border:var(--border);

    border-radius: .5rem;

    margin-bottom: 1.5rem;

  }

  .location{

    font-size: 14px;

    color: #777;

  }

  .view-container .posts-container .post .com-details{

    display: flex;

    justify-content: space-evenly;

    border-bottom: 1px solid rgba(0,0,0,0.2);

    /* align-items: center; */

  }

  .view-container .posts-container .post .com-details .image{

      width:30%;

      height:auto;



  }

  .view-container .posts-container .post .com-details .content{

      width:60%;

  }

  .view-container .posts-container .post .com-details .content .stars{

    padding-bottom: .5rem;

    display: flex;



  }

  .view-container .posts-container .post .com-details .content .stars p{

    padding: 0 1rem ;



  }

  .view-container .posts-container .post .com-details .content .stars i{

    color:gold;

    font-size: 17px;



  }

  .view-container .posts-container .post .com-details .content .stars  span{

    font-size: 17px;

    font-weight: 600;

    padding-right:1rem;

    color: orange;



  }

  .view-container .posts-container .post .com-details img{

    /* width:6rem; */

    width: 100%;

  }

  

  .view-container .posts-container .post .image{

    height: 40rem;

    width:100%;

    border-radius: .5rem;

    object-fit: cover;

  }

  

  .view-container .posts-container .post .com-details .price{

    font-weight: bolder;

    color:var(--green);

    font-size: 20px;



  }

  .view-container .posts-container .post .com-details .price span{

    text-decoration: line-through;

    color:#999;

    font-size: 15px;

    

  }

  .view-container .posts-container .post .date{

    font-size: 15px;

    background: #007df2;

    padding: 1rem 2rem;

    width: 14%;

    color: #ffffff;

    margin-bottom: 3rem;

  }

  .view-container .posts-container .post .date i{

      padding: 0 1rem;

  }

  

  .view-container .posts-container .post .title{

    padding-top: 1.5rem;

    font-size: 25px;

    color: var(--green);

  }

  .view-container .posts-container .post .com-details p{

    font-size: 14px;

    color:#666;

  }

  

  .view-container .posts-container .post .text{

    color:var(--light-color);

    font-size: 16px;

    line-height: 1.7;

    padding:1rem 0;

  }

  

  .view-container .posts-container .links{

  

    margin-top: .5rem;

    padding-top: 1.5rem;

    padding-bottom: 1.5rem;

    margin-bottom: .5rem;

    display: flex;

    align-items: center;

    

  

    

  }

  

  /* .container .posts-container .links .user{

    margin-right: auto;

  } */

  

  

  .view-container .posts-container .links .icon{

    padding-right: 3rem;

  }

  

  .view-container .posts-container .links a{

    color: #666;

    line-height: 2;

    font-size: 15px;

    

  }

  

  .view-container .posts-container .links a i{

    padding-right: .2rem;

    color:var(--light-color);

  }

  

  .view-container .posts-container .links a:hover{

    color:var(--orange);

  }

  

  .view-container .posts-container .links a i:hover{

    color:var(--orange);

  }

  

  .view-container .sidebar .box{

    min-height: 70vh;

    border:var(--border);

    border-radius: .5rem;

    overflow:hidden;

    background:#fff;

    margin-bottom: 1.5rem;

  }

  .icons-2{

    font-size: 20px;

    color: var(--green);

    float: right;



    padding: 3rem;

   

  

  }

  .icons-2 i{

    padding: .5rem;

  }

  .info{

      padding: 5rem;

  }

  .info h2{

      font-size: 20px;

      color: #444;



  }



  .info p{

    padding: 2rem 0;

    font-size: 14px;

    color: #444;

  }

  .info li{

    list-style-type: disclosure-closed;

    padding: 0.5rem 0;

    font-size: 17px;

    color: #444;



  }









.scroll-top{

  position: fixed;

  bottom: 7.5rem; right:2rem;

  z-index: 1000;

  font-size: 35px;

  background:rgba(0,255,0,.1);

  color:var(--green);

  border-radius: .5rem;

  border:.1rem solid rgba(0,0,0,.1);

  padding:.5rem 1.5rem;

  display: none;

}



.scroll-top:hover{

  background:var(--green);

  color:#fff;

}



 




/* media queries  */



@media (max-width:1200px){



  html{

    font-size: 55%;

  }



}



@media (max-width:991px){



  .header-1,

  .header-2,

  .header-3{

    padding: .5rem 1rem ;
    

  }



  section{

    padding:1.5rem;

  }



}



@media (max-width:768px){
  
    .search-bar-container  {
        width:100%;
        padding: auto;
    }
.navbar-expand-lg .navbar-nav{
    align-items:start;
}
.header-icons li {
    /* margin-bottom:1rem; */
}
.header-icons{
/* flex-direction: column; */
  
    margin-top: 1rem;
    justify-content: revert-layer;
    align-items: center;
    /* width: 100%; */
    margin: auto;
    float: none;
}
.navbar{
/* justify-content: end; */
}
.header-2{
  display: block;
}

.mb-navbar{
  display: block!important;
}
.desktop-nav{
  display: none!important;
}

  #menu-bar{

    display: initial;

  }

  .img-responsive{

      width:100%;

  }



  .header-3 .navbar{

    position: absolute;

    top:100%; left: 0; right: 0;

    background:#eee;

    padding:1rem 2rem;

    border-top: .1rem solid rgba(0,0,0,.3);

    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);

  }



  .header-3 .navbar.active{

    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

  }



  .header-3 .navbar a{

    display: block;

    margin:1.5rem 0;

    padding:1.5rem;

    border-radius: .5rem;

    border:.1rem solid rgba(0,0,0,.3);

    background:#fff;

    text-align: center;

  }



  .header-2{

    /* flex-flow: column; */

  }



  .header-2 .search-bar-container{

    width: 100%;

 

  }

  .home{
    background-image: url('../images/header-banner.png');
  background-color: rgba(0, 0, 0, 0.2); /* Overlay color with 50% opacity */
  background-blend-mode: multiply; /* Blend mode to mix the background color with the image */


  }
  /* .home .content{

    text-align: center;

  } */

  .home .image img{

    width: 100%;

    height: 100%;

  }

  .about{

    gap:0;

  }

  .container{

        grid-template-columns: 1fr;

        gap:0;

    }

    

    .profile-container{

      grid-template-columns: 1fr;

      gap:0;

    }

    .container .posts-container .post .com-details .image {

        width: 120px;

       ;

    }

    .container .posts-container .post .com-details{

        flex-direction: column;

    

    }

    .container .posts-container .post .com-details .price{

        padding: 2rem 1rem;

    }

    

    .view-container .posts-container .post .com-details 

    {

        flex-direction: column-reverse;



    }

    .view-container .posts-container .post .com-details .content

    {

       width: 100%;



    }

    .view-container .posts-container .post .com-details .image

    {

       width: 100%;



    }

    .view-container .posts-container .post 

    {

      padding: 2rem;



    }

    .view-container .posts-container .post .date{

        width:50%;

    }

    .info{

        padding: 2rem;

    }

    .view-container .posts-container .links .icon {

    padding-right: 1.2rem;

}

.category .box-container{

    justify-content:center;

}

.category .box-container .box{

    width:100%;

}

.product .box-container .box{

    width:100%;

}

.signup-wrapper, .login-wrapper{

    padding:2rem 1rem;

    

}



}



@media (max-width:450px){



  html{

    font-size: 50%;

  }



  .header-1{

    display: none;

  }

  



  .deal .row .content .count-down .box{

    width:7rem;

  }



  .deal .row .content .count-down .box h3{

    font-size: 30px;

    padding:.5rem 0;

  }



  .deal .row .content .count-down .box span{

    font-size: 15px;

  }



}

@media (max-width:992px){

  .dash-nav{

      left:-300px;

  }

  .dash-nav.active{

      left:0;

  }

 

  .main-container{

      width:100%;

      left:0px;   



  }

  .cardBox{

      grid-template-columns: repeat(1,1fr);

  }

}



@media(max-width:480px){

  .carBox{

      grid-template-columns: repeat(1,1fr);

  }

  .dash-nav{

      width: 100%;

      left: -100%;

      z-index: 1000;

  }

  .dash-nav.active{

      width: 100%;

      left:0;

  }



  .toggle.active{

      /* position: fixed; */

      z-index: 10000;

      right: 0;

      left:288px;

     



  }

  .toggle.active::before{

      color:#fff;

  }

  

  .dash-ban{

            left:0;

        }

        .dash-bottom{

            left:0;

            

        }

        .dash-container{

            width:100%;

        }

        

        

            .topbar h4{

                display:block;

            }

            .toggle.active h4{

                display:none;

                

            }

          

            

  

}