body{
  background: linear-gradient(90deg, rgba(245,214,229,0.4066001400560224) 0%, rgba(245,214,229,0.4009978991596639) 36%, rgba(197,237,244,0.39539565826330536) 100%);
 /* ======================header start=================== */

/* =============search  bar============= */
 
}
a{
  text-decoration: none;
}
.fa-times{
  cursor: pointer;
}

.input-box input{
  max-width: 100px;
  width: 100%;
  font-size: 14px;
  height: 25px;
}


.cross-button{
  background-color: white;
  color: black;
}
.search form{
  background-color: white;
  padding: 10px 20px;
  border-radius: 30px;
}
.search form input{
  border: none;
}
.search form input:focus{
  box-shadow: none;
}
.search form i{
  margin-top: 3px;
color:rgb(139, 139, 139) ;
  font-size: 30px;
}
.cros{
  cursor: pointer;
  color: gray;
 margin-left: 5px;
 padding-top: 2px;
}
.badge{
 background: rgba(33, 37, 41,.7);
 margin-left: 10px;
 margin-top: 10px;
 border-radius: 30px;
}
/* ==================== button ==================== */
.butn span{
  padding: 8px 10px;
  background-color: white;
  color: black;
  border-radius: 10px;
  cursor: pointer;
}
.butn .black{
  background-color: #16182E;
  color: white;
}
.btn1{
  background-color: white;
  border-radius: 30px;
}

.btn3{
  background-color: white;
  height: 37px;
  padding-top: 7px;
  border-radius: 10px;
  float: right;
  margin-right: 30%;
}

/* ================button end================= */

/* ================box card============== */
.cart{
  margin: 0px 10px;
  border: 1px solid white;
  background-color: white;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  border-radius: 20px;
  box-shadow: -1px 1px 10px rgb(167, 167, 167);
  
}
.pp{
  padding-top:50px;
}
.cart .span1 img{
  width: 50px;
}
.cart h3{
  font-weight: bold;
  font-family: sans-serif;
  font-size: 25px;
  text-align: center;
  margin-top: 40px;
  color: black !important;
}
.cart p:before{
  content: "\f3c5";
  font-family: fontawesome;
  margin-right: 6px;
  color: #8469FB !important;
}
.cart p{
  
  font-family: roboto, sans-serif;
  font-size: 14px;
  text-align: center;
  font-weight: 540;
  color: rgb(139, 139, 139) !important;
  margin-bottom: 40px;
}
.cart .span1{
  
  padding: 10px 10px;
  position: absolute;
  top: -35px;
  left: 43%;
  background-color: white;
  border-radius: 20px;
  box-shadow: -1px 1px 10px rgb(167, 167, 167);
}
.cart .span1 i{
  font-size: 45px;
}
.bottom .col-10{
  position: absolute;
  background: white;
  bottom: -30px;
  left: 8%;
  border-radius: 20px;
  box-shadow: -1px 1px 10px rgb(167, 167, 167);
}
.bottom h5,h4{
  margin-top: 10px;
  font-size: 10px;
  font-family: sans-serif;
  font-weight: 550;
  color:rgb(139, 139, 139) !important ;
}
.bottom h4{
  color: black !important;
}
/* ====================box card end================ */

/* ====================list card================ */
.pb{
  margin-top: 20px;
  align-items: center;
  text-align: center;
}
.cart1{
  align-items: center;
  justify-content: center;
  text-align: center;
  text-align: center;
  
}
.cart1 span{
  
  height: 70px;
  width: 70px;
  background-color: white;
  border-radius: 10px;
  box-shadow: -1px 1px 10px rgb(167, 167, 167);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 17px;
  
}
.cart1 h3{
  color: black !important;
}
.cart1 img{
width: 50px;
}
.text p{
  white-space: nowrap;
  color: black !important;
}
.text p:before{
      content: "\f3c5";
      font-family: fontawesome;
      margin-right: 6px;
      color: #8469FB !important;
}
.text h3{
  text-align: center;
}
.tleft{
  margin-left: 50px;
}
.tleft h4{
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 0px;
  white-space: nowrap;
}
.tcenter{
  font-size: 16px;
  margin-left: 50px;
}
.cart1 h5{
  color: black !important;
}
.tcenter h4{
  font-size: 16px;
  font-family: sans-serif;
  margin-top: 0px;
  white-space: nowrap;
}
.tleft h5, .tright h5, .tcenter h5{
  font-size: 16px;
  white-space: nowrap;
}
.tright{
  margin-left: 50px;
}
.tright h4{
  white-space: nowrap;
  font-size: 16px;
  margin-top: 0px;
  font-family: sans-serif;
}
.cover{
  background-color: white;
  padding: 5px 10px;
  padding-right: 30px;
  border-radius: 20px;
}
/* ====================list card end================ */
@media only screen and (max-width : 992px){
 
  .cart1 i{
      font-size: 50px;
  }
  .text p{
      font-size: 15px;
  }
  .tleft{
      margin-left: 20px;
  }
  .tleft h4{
      font-size: 16px;
  }
  .tleft h5{
      font-size: 16px;
  }
  .tcenter{
      margin-left: 20px;
  }
  .tcenter h4{
      font-size: 16px;
  }
  .tcenter h5{
      font-size: 16px;
  }
  .tright{
      margin-left: 20px;
  }
  .tright h4{
      font-size: 16px;
  }
  .tright h5{
      font-size: 16px;
  }
 
}

@media only screen and (max-width : 768px){
  .cover{
      padding: 5px;
  }
  .cart1{
      padding: 5px;
  }
  .cart1 span{
      height: 60px;
      width: 60px;
      margin-right: 13px;
  }
  .text{
      width: 200px;
  }
  .text h3{
      font-size: 20px;
      margin-top: -9px !important;
      white-space: normal;
  }
  .cart1 .text p{
      font-size: 14px !important;
      margin-bottom: 0px;
      white-space: normal !important;
  }
  .cart1 .text{
      white-space: normal !important;
  }
  .over{
      padding-bottom: 20px;
  }
  .btn3{
      margin-right: 10%;
  }
  .tcenter, .tright, .tleft{
      margin-left: 0px;
  }
}
@media only screen and (max-width : 520px){
 

  .cart .span1{
      left: 42%;
  }
}
@media only screen and (max-width : 400px){
  .cart .span1{
      left: 41%;
  }
}
@media only screen and (max-width : 300px){
  .cart .span1{
      left: 38%;
  }
}
@media only screen and (max-width : 324px){
  .cart1 .text{
      padding-top: 10px !important;
  }
}
.medium{
  display: none;
}
nav{
  background-color: black;
}

nav .btn {
  background-color: #BC2F80;
  font-weight: bold;
  font-size: 20px;
  font-family: sans-serif;
  color: white;
  padding: 13px 20px;
  margin: 10px 20px;
  border: none;
}
nav .btn:hover{
  background-color: #2BBBAD;
  color: white;
}
.largee ul li a{
  color: white;
  text-decoration: none;
}
.largee ul li :hover a{
  color: white;
}
.largee .dropdown{
  margin: 0px 15px;
}
.line{
  margin-top: 9px;
  width: 3px;
  height: 25px;
  background-color: gray;
}
.largee .dropdown ul{
  background-color: black;
 
}
.largee .dropdown-menu{
  min-width: 1rem;
  border: 2px solid gray;
}
.largee .dropdown-menu li :hover {
  background-color: #BC2F80;
 
}

.nav-link:focus, .nav-link:hover {
  color: white;
}
.PRICING{
  margin: 0% 15px;
}
.PRICING a{
 font-weight: bold;
}
.three{
  margin: 0 30px;
}
.three a{
  font-weight: bold;
  margin: 0 4px;
}
.btn:focus{
  box-shadow: none;
}
/* ================ medium nav============== */
.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 0px solid transparent;
  border-radius: 0.25rem;
  box-shadow: none;
}
.medium nav{
  background-color: black;
}
.medium span i{
  color: white;
  font-size: 35px;
}
.medium .nav-link{
  color: white;
  text-align: center;
}
.medium .dropdown-menu{
  min-width: 1rem;
  color: white;
  background-color: black;
  border: 2px solid gray;
}
.medium .dropdown-menu .dropdown-item:hover {
  background-color: #BC2F80;
}
.medium .dropdown-item {
  color: white;
  
}
.medium .dropdown{
  
  text-align: center;
  
}

.medium .dropdown-menu.show {
  display: inline-block;
}
.PRICING1{
 padding: 5px 0px;
 margin-left: 50px;
 margin-right: 50px;
 border-top: gray 2px solid;
 border-bottom:gray 2px solid;
 font-weight: bold;
}
.three1{
  padding: 20px 0;
  font-weight: bold;
  line-height: 2rem;
  margin-left: 50px;
  margin-right: 50px;
  border-top: gray 2px solid;
  
}
.three1 a{
  padding: 15px;
}
.offcanvas{
  width: 270px;
  background-color: black;
  top: 55px !important;
}
@media only screen and (max-width: 576px){
  .offcanvas{
      width: 100% !important;
  }
}
/* =========bottom=========== */
.end{
  background-color: black;
  position: fixed;
  z-index: 11;
  bottom: 0;
  display: none;
}
.end .col-4{
  text-align: center;
}
.end_C{
margin-top: 5px;
}
.end_C i{
  color: white;
  font-size: 17px;
}
.end_C h5{
  color: white;
  font-size: 15px;
  font-weight: 400;
}
@media only screen and (max-width : 992px){  
  .end{
      display: block;
  }
  .largee{
      display: none;
  }
  .medium{
      display: block;
  }
}