@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;

}



*::selection{

  background:var(--green);

  color:#fff;

}

 /* advertise page */

  .content-top{

   

   

    text-align: center;

    list-style-type: none;

   

  }
  .navbar-toggler .hamburger-toggle .hamburger span {
    background:#fff!important;
}
  .navbar{
      padding:2rem 9%;
  }

  .content-top h2{

    color: #272F38;

    padding: 1rem;

    

    font-size: 2.1rem;

  }

  .content-top li{

    padding:.5rem;

    color: #384350;

    font-size: 1.4rem;

  }

  .content-top ul{

    list-style-type: none;

  }

.data {

    margin-top:50px;

    

    padding:4rem;

    font-size:1.4rem;

    min-height:62vh;

    background:#fff;

    

}



html{

  font-size: 62.5%;

  overflow-x: hidden;

  scroll-behavior: smooth;

  scroll-padding-top: 7rem;

}



section{

  padding:1.5rem 9%;

}

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

.heading{

  font-size: 3rem;

  color:#444;

  padding-left: 1rem;

  border-left: .4rem solid var(--green);

  margin-top: 1rem;

  margin-bottom: 3rem;

}

.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: 1.7rem;

  cursor: pointer;

}



.btn-1:hover{

  background:#333;

}





.header-2,

.header-3{

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding:2rem 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:#e44b3b;

}



.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: 1.7rem;

}



.header-1 a{

  padding:0 .7rem;

  color:#fff;

  font-size: 1.4rem;

}

 .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: 3rem;

  color:#fff;

}



.header-2 .logo i{

  color:#F2BE33;

  font-size:inherit;

}



 .search-bar-container{

  display: flex;

  align-items: center;

  width: 50rem;

  padding:1.5rem;

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

  border-radius: .5rem;

}



.search-bar-container #search-bar{

  width: 100%;

  background:none;

  text-transform: none;

  color:#fff;

  font-size: 1.7rem;

}



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

  text-transform: capitalize;

  color:#ddd;

}



 .search-bar-container label{

  color:#fff;

  cursor: pointer;

  font-size: 2rem;

  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: 2rem;

  margin-right: 2rem;

}



.header-icons i{

  color:#fff;

  /*font-size: 2.5rem;*/

  /*margin-left: 1rem;*/

}
.header-icons li a{
    color:#fff;
    font-size:2rem;
}



.header-3 a:hover{

  color:var(--green);

}



#menu-bar{

  font-size: 3rem;

  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;

}





.home{

  min-height: 60vh;

  display: flex;

  align-items: center;

  /*justify-content: center;*/

background:url(../images/header-n.png);
/*background-blend-mode: multiply;*/
    background-size: cover;
     background-position: center; 
    /*background-attachment: fixed;*/
  flex-wrap: wrap;

 

}



.home .image{

  padding:1rem ;

  flex:1 1 52rem;

  

  text-align: center;

}



.home .image img{

  height:60vh;

  /* padding-top: 4rem; */

}



.home .content{

  padding:1rem;

 text-align: left;
    width: 500px 

}



.home .content h1{

  font-size: 6rem;

  color:#fff;

  font-weight: 600;

}



.home .content p{

  font-size: 1.7rem;

  color:#f5f5f5;

  padding:1rem 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:1.7rem;

}



.banner-container .banner .content h3{

  color:#333;

  font-size:3rem;

}



.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: 2rem;

  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: 1.6rem;

  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: 2rem;

    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: 1.5rem;

  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: 2rem;

  /*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: 1.7rem;

}

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

  font-size: 1.7rem;

    font-weight: 600;

    padding-right:1rem;

    color: orange;





}



.product .box-container .box .quantity{

  padding:1rem 0;

}



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

  font-size: 1.7rem;

}



/* .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: 2rem;

}



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

  text-decoration: line-through;

  color:#999;

  font-size: 1.5rem;

}



.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: 2rem;

 color:var(--green);

}



.icons-container .icon .content p{

  font-size: 1.5rem;

  color:#666;

}

.deal{

  padding-right: 0;

}



.deal .row{

  display: flex;

  flex-wrap: wrap;

  gap:1.5rem;

  align-items: center;

}



.deal .row .image{

  flex:1 1 40rem;

}



.deal .row .image img{

  width:100%;

}



.deal .row .content{

  flex:1 1 40rem;

}



.deal .row .content .title{

  font-size: 3.5rem;

  color: #efae00;

}



.deal .row .content p{

  font-size: 1.5rem;

  color:#666;

  padding:1rem 0;

}



.deal .row .content .count-down{

  display: flex;

  padding:1rem 0;

  gap:1.5rem;

}



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

  width:9rem;

  text-align: center;

  border:.1rem solid #8eb6fd;

}



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

  font-size: 5rem;

  color:#4c8cff;

}



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

  font-size: 1.7rem;

  color:#fff;

  display: block;

  background:#1684ff;

  padding:.5rem;

}

.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: 4rem;

  color: var(--green);

  margin-top: .5rem;

 

}



.about .content p {

  font-size: 1.5rem;

  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: 2rem;

  color: #fff;

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

  padding: 1rem;

}



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

  padding-right: 1.5rem;

  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 var(--black);

    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: 2.4rem;

    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: 1.4rem;

    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: 1.4rem;

    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: 1.4rem;

    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: 1.4rem;

  }

  .submit-btn {

     display: block;

     margin-left: auto;

     border: none;

     outline: none;

     background: #F2BE33;

     font-size: 1.4rem;

     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 var(--black);

     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: 2.4rem;

     color: var(--green);

   }

    .login-wrapper .form .input-group {

     position: relative;

   }

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

     width: 100%;

     padding: 10px 0;

     font-size: 1.4rem;

     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: 1.4rem;

   }

   /* cart page */

.small-container{

	max-width: 1080px;

	margin: auto;

	padding-left: 25px;

	padding-right: 25px;

}

.cart-page{

	margin: 80px auto;

}

.small-container table{

	width: 100%;

	border-collapse: collapse;

}

.small-container .cart-info{

	display: flex;

	flex-wrap: wrap;



}

.small-container th{



	/* text-align: center; */

	padding: 12px;

	color: #fff;

	background: var(--purple);

	font-weight: normal;

}

.small-container td{

	padding: 10px 5px;

    color: var(--purple);

    text-align: right;

}

.small-container .description {

    text-align: center;

}

.small-container .total-price h4{

    color: var(--purple);

    font-weight: 600;

    font-size: 1.4rem;

}

.small-container .total-price p{

font-size: 1.4rem;

    color: var(--pink);

    font-weight: 600;

    margin: 0;

}



.small-container td input{

	width: 40px;

    height: 30px;

    outline: none;

    padding: 5px;

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



}

.small-container .cart-info p{

color: var(--purple);

font-size: 1.6rem;

margin: 0;

}

.small-container .cart-info .cart{

    display: flex;

    justify-content: space-between;

    width: 80%;

}

.small-container .cart-info small{

   color:#666;

}





.small-container td .buttons a{

	color: var(--pink);

	font-size: 1.4rem;

    padding: 0 .5rem;



}

.small-container td .image{

	width: 80px;

	height: 80px;

	margin-right: 10px;

}

.small-container td .image img{

    width:100%;

    height: 100%;

}

.small-container .total-price{

	display: flex;

	justify-content: flex-end;



}

.small-container .total-price table{

	border-top: 3px solid var(--purple);

	width: 100%;

	max-width: 400px;  

}



.small-container th:last-child{

	text-align: right;

}



.payment {

    text-align:center;

    padding-bottom:2rem;

    

}

.payment .btn-1{

    height: 4rem;

    width: 17rem;

    background: #ff3e9e;

    color: #fff;

    font-size: 1.4rem;

    cursor: pointer;

    border: none;

    outline: none;

    border-radius: 2rem;

}

.payment .btn-1:hover{

    background:var(--purple);

    letter-spacing:0;

    

}

/* 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: 1.4rem;

    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: 1.5rem;

    color: #d33af9;;

  }

  

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

    padding-top: 1.5rem;

    font-size: 2.5rem;

    color: rgb(108, 33, 155);

  }

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

    font-size: 1.4rem;

    color:#666;

  }

  

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

    color:var(--light-color);

    font-size: 1.6rem;

    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: 1.5rem;

    

  }

  

  .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: 1rem 2rem !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:#fff;
    font-size:2rem;

  }
.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;!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: 1.4rem;

    color: #444;

  }

  .info li{

    list-style-type: none;

    padding: .2rem 0;

    font-size: 1.4rem;

    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: 1.4rem;

    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: 2rem;

  }

  .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: 1.5rem;

  }

  .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: 1.5rem;

    color: #d33af9;;

  }

  

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

 

    font-size: 2.5rem;

    color: #007DF2;

    margin-top:10px;

    margin-bottom: .5rem;

  }

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

    font-size: 1.4rem;

    color:#666;

    margin-bottom:0;

  }

  

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

    color:var(--light-color);

    font-size: 1.6rem;

    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: 1.5rem;

    

  }

  

  .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: 1.6rem;

    color: #d21fff;

  }

  

  .container-1 .sidebar .box .title{

    padding: 1.5rem;

    font-size: 2rem;

    color: #6c219b;

    text-align: center;

    background: var(--black);

    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: 2rem;

  }

  

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

    color:var(--light-color);

    font-size: 1.5rem;

    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:var(--black);

    color:#fff;

    font-size: 1.7rem;

    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: 2rem;

      color:#444



  }

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

    font-weight: bolder;

    color:var(--green);

    padding: 1rem 0;

    font-size: 3rem;

  }

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

    text-decoration: line-through;

    padding: 1rem 0;

    color:#999;

    font-size: 1.5rem;

  }

  

  .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:var(--black);

    font-size: 2rem;

    padding-bottom: 1rem;

  }

  

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

    color:var(--light-color);

    font-size: 1.5rem;

  }

  

  .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: 1.5rem;

    color:var(--black);

    border-radius: .5rem;

    border:var(--border);

    margin:.5rem;

  }

  

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

    background:var(--black);

    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: 1.4rem;

    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: 1.7rem;



  }

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

    font-size: 1.7rem;

    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: 2rem;



  }

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

    text-decoration: line-through;

    color:#999;

    font-size: 1.5rem;

    

  }

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

    font-size: 1.5rem;

    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: 2.5rem;

    color: var(--green);

  }

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

    font-size: 1.4rem;

    color:#666;

  }

  

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

    color:var(--light-color);

    font-size: 1.6rem;

    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: 1.5rem;

    

  }

  

  .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: 2rem;

    color: var(--green);

    float: right;



    padding: 3rem;

   

  

  }

  .icons-2 i{

    padding: .5rem;

  }

  .info{

      padding: 5rem;

  }

  .info h2{

      font-size: 2rem;

      color: #444;



  }



  .info p{

    padding: 2rem 0;

    font-size: 1.4rem;

    color: #444;

  }

  .info li{

    list-style-type: disclosure-closed;

    padding: 0.5rem 0;

    font-size: 1.7rem;

    color: #444;



  }







.footer{

  background: #263138;

}



.footer .box-container{

  display: flex;

  flex-wrap: wrap;

  gap:1.5rem;

}

/*.footer .box-container .box.details{*/

/*  flex:1 1 30rem;*/



/*}*/



.footer .box-container .box{

  flex:1 1 25rem;

}



.footer .box-container .box h3{

  color:#8eb6fd;

  font-size: 2.5rem;

  padding:1rem 0;

}



.footer .box-container .box p{

  color:#ddd;

  font-size: 1.5rem;

  padding:1rem 0;

}



.footer .box-container .box a{

  display: block;

  color:#ddd;

  font-size: 1.5rem;

  padding:1rem 0;

}



.footer .box-container .box a:hover{

  text-decoration: underline;

  color:var(--green);

}



.footer .credit{

  font-size: 1.4rem;

  padding: 1rem;

  margin-top: 2rem;

  border-top: 0.1rem solid rgb(255 255 255 / 10%);

  text-align: center;

  font-weight: normal;

  color: #ddd;

}



.footer .credit span{

  color:var(--green);

}



.scroll-top{

  position: fixed;

  bottom: 7.5rem; right:2rem;

  z-index: 1000;

  font-size: 3.5rem;

  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;

}



 /*dashboard*/

  .dash-container{

  position: relative;

  width:  100%;

  display:flex;

  margin: 0rem auto;

 min-height: 100vh;

 /*margin-top:55px;*/

  

  

}

.dash{

    padding:1rem;

}

.dash-nav{

  position: absolute;

  top: 0;

  width :250px;

  height: 100%;

  background:#01324e;;

  transition: 0.5s;

  /*overflow: hidden;*/

}

.dash-nav.active{

  width: 10px;



}

.dash-nav ul{

  position: absolute;

  top:0;

  left:0;

  width:100%

}

.dash-nav ul li{

  position: relative;

  width:100%;

  list-style: none;

}

.dash-nav ul li:hover{

  background: var(--color);

  cursor:pointer;



}

/*.dash-nav ul li:nth-child(1){*/

/*  margin-bottom:20px ;*/

/*}*/



.dash-nav ul li:nth-child(1):hover{

  background: transparent;

}

.dash-nav ul li a h2{

  font-size: 15px;

  

 

}

.dash-nav .link .dash-title h2{

    margin-top:0px;

    margin-bottom:10px;

}







.dash-nav ul li .link{

   

   padding:.5rem;

  position: relative;

  display: block;

  width: 100%;

  /*display: flex;*/

  text-decoration: none;

  color:#fff;

  font-size: 12px;

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

  



}

.dash-nav ul li a{

    color:#fff;

    text-decoration:none;

    text-align:left;

}

/*.dash-nav ul li a .icon{*/

/*  position: relative;*/

/*  display: block;*/

/*  min-width: 60px;*/

/*  height: 60px;*/

/*  line-height: 60px;*/

/*  text-align: center;*/



/*}*/

.dash-nav ul li a .icon .fab{

  color: #fff;

  font-size: 15px;

}

.dash-nav ul li  .dash-title{

  position: relative;

 

  display: block;

  padding: 0 30px;

  /*height: 60px;*/

  line-height: 25px;

  white-space: nowrap;

}

.dash-nav ul li a .brand{

  text-transform: uppercase;

  font-size: 15px;

}

.main-container{

  position: relative;

  width: calc(100% - 250px);

 

  left:250px;

  /* min-height: 100vh; */

  /*background: #f5f5f5;*/

  transition: 0.5s;

}

.main-container.active{

  width: calc(100% - 10px);

  left:10px;

}





.main-container .topbar{

  width: 100%;

  background: rgb(181 179 179 / 30%);

  height: 60px;

  padding-left: 0 10px;

  display: flex;

  justify-content: space-between;

  align-items: center;

}

.toggle h4{

  position: absolute;

    top: 13px;

    left: 49px;

}

.toggle{

  position: relative;

  width: 60px;

  height: 60px;

  

  cursor: pointer;

}

.toggle::before{

  content: '\f007';

  font-family: "Font Awesome 5 Free";

  position: absolute;

  width: 100%;

  height: 100%;

  line-height: 60px;

  font-size: 24px;

  text-align: center;

  color: #111;

}



.cardBox{

  position: relative;

  width: 100%;

  padding: 40px;

  display: grid;

  background:#fff;

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

  grid-gap:20px;



}

.cardBox .dash-card{

  position: relative;

   /*background: #fff; */

  padding: 20px;

  display: flex;

  justify-content: space-between;

  cursor: pointer;

  

}

.cardBox .dash-card .numbers{

  position: relative;

  font-size: 2em;

  font-weight: 500;

}

.cardBox .dash-card .cardName{

  color:#999;





}

.cardBox .dash-card  .iconBox .fab{

  font-size: 3.5rem;

  color: var(--color);

}

/*.details{*/

/*  font-size: 1.2rem;*/

/*  position: relative;*/

/*  width: 100%;*/

/*  padding: 20px;*/

/*  padding-top: 0;*/

/*  display: grid;*/

/*  grid-gap: 20px;*/

/*  grid-template-columns: 3fr 1fr;*/

/*}*/



/*.details .recent-details{*/

/*  position: relative;*/

/*  display: grid;*/

/*  min-height: 530px;*/

/*  background: #fff;*/

/*  padding: 20px;*/

/*}*/

.cardHeader{

 text-align: center;

}

.cardHeader h2{

  font-weight: 600;

  padding: 10px;

  line-height: 1.4;

  

}

.cardHeader p{



  text-align: justify;

  margin-bottom: 30px;

  line-height: 1.4;

}



.dash-btn{

  

  position: relative;

  padding: 5px 10px;

  background: #132250;

  color: #fff;

  text-decoration: none;

  border-radius: 10px;

}

.details .right-nav{

  font-size: 1.2rem;

  position: relative;

  display: grid;

  height: 100%;

  background: #fff;

  padding: 20px;

}

.details .right-nav ul{

  padding: 10px;

  list-style: none;

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

}

.details .right-nav li{

  padding-bottom: 8px;

}

.details .right-nav  a{

  text-decoration: none;



  color:#E94100



}

































/* media queries  */



@media (max-width:1200px){



  html{

    font-size: 55%;

  }



}



@media (max-width:991px){



  .header-1,

  .header-2,

  .header-3{

    padding:2rem;

  }



  section{

    padding:1.5rem;

  }



}



@media (max-width:768px){
    .search-bar-container  {
        width:100%;
    }
.navbar-expand-lg .navbar-nav{
    align-items:start;
}
.header-icons li {
    margin-bottom:1rem;
}
.header-icons{
flex-direction: column;
    align-items: baseline;
}


  #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%;

    margin-top: 2rem;

  }

  .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: 3rem;

    padding:.5rem 0;

  }



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

    font-size: 1.5rem;

  }



}

@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;

                

            }

          

            

  

}