body {
  font-family: 'Open Sans', sans-serif;
    
}
body ::-webkit-scrollbar {
    font-family: 'Open Sans', sans-serif;
    overflow-x: hidden;
    overflow-y: scroll;
}
.container{
  /*max-width: 1419px; */
  max-width: 1200px;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'Raleway', sans-serif;
}
h1{
  font-weight: 800;
  text-transform: uppercase;
}
h1{
  font-weight: 700;
  text-transform: uppercase;
}
h6,h3{
  font-weight: 700;
}
p{
    font-family: 'Open Sans', sans-serif;
}
.secondary-color{
  color: #bcfd4c;
}
.btn,.secondary-bg{
  background-color: #bcfd4c;
}
.btn:hover{
  background-color: #000;
  color:#fff;
}
@font-face {
    font-family: "Sofia Pro";
    font-style: normal;
    font-weight: normal;
    src: local('Sofia Pro'), url('../fonts/OpenSans/OpenSans-Regular.ttf') format('woff');
}


@font-face {
    font-family: "aSofiaProMediumAz";
    font-style: normal;
    font-weight: normal;
    src: local('SofiaProMediumAz'), url('../fonts/SofiaProMediumAz.otf') format('woff');
}

@font-face {
    font-family: "SofiaProBoldAz";
    font-style: normal;
    font-weight: normal;
    src: local('SofiaProBoldAz'), url('../fonts/SofiaProBoldAz.otf') format('woff');
}

@font-face {
    font-family: "SofiaProBlackAz";
    font-style: normal;
    font-weight: normal;
    src: local('SofiaProBlackAz'), url('../fonts/SofiaProBlackAz.otf') format('woff');
}

/* ------ HEADER-CSS-START  ------ */
.main-head{
  /* background: #6e6e6e; */
}
.top-header {
  border-bottom: 1px solid #bcfd4c;
  padding: 22px 0;
}
.top-header p{
    margin: 0;
}
.top-header p, .top-header a {
  color: #ffffff;
  text-decoration: none;
}
.head-ryt span.material-symbols-outlined {
  vertical-align: middle;
}
.top-header p span { margin-right: 20px; }

.head-ryt small {
  font-size: 11px;
}
.head-ryt span {
  display: inline-table;
}
.head-ryt strong {
  font-weight: 400;
  font-size: 14px;
}
ul.list-unstyled.head-ryt li {
  margin: 0 20px 0 0;
}
.head-ryt a {
  line-height: 16px;
}
.top-header img.img-fluid {
  width: 100px;
}
.top-header p span i {
    width: 30px;
    height: 30px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background: #444444;
    margin: 0.2rem;
    line-height: 30px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 
      0 2px 2px #d1d1d1;
    color: #fff;
    cursor: pointer;
    transition:
      all 0.15s ease;
      text-align: center;
}
.top-header ul.social-icons {
    margin: 0;
    padding: 0;
    text-align: right;
}
.top-header ul.social-icons li {
    display: inline-block;
    margin-left: 9px;
}
.top-header ul.social-icons li a {
    display: inline-block;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -webkit-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    font-size: 14px;
    color: #444444;
}
.top-header ul.social-icons li a:hover { color: #ffba00; }
header.active .top-header {
    height: 0;
    padding: 0;
}
header{
  transition: all 1s ease-in-out;
}
header .nav-link {
  display: block;
  padding: 0.5rem 9rem;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 500;
}

header .nav-link i {
    color: #fff;
    font-size: 13px;
    padding: 0 0 0 2px;
}

.navbar-light .navbar-nav .nav-link {
    color: #000;
    padding: 5px 10px;
    font-size: 13px;
}
header .nav-link:hover, .dropdown-content a:hover {
  color: #bcfd4c;
}

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
    color: #bcfd4c;
}

.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .show>.nav-link {
    color: #bcfd4c;
}
.navbar-light a.nav-item.nav-link.fill-btn {
    margin-right: 16px;
}
.white-btn {
    background: #fff;
    color: #130342 !important;
    border-radius: 5px;
    height: 30px;
}
.right-navbar {
    margin: 10px 0;
}

.dropbtn {
    border: none;
    background: transparent;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    border-radius: 4px;
    display: none;
    position: absolute;
    background-color: #6e6e6e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgb(0 0 0 / 20%);
    z-index: 1;
    padding: 6px 0 0 0;
}

.dropdown-content a {
  color: white;
  padding: 0 16px 8px;
  text-decoration: none;
  display: block;
  font-size: 13px;
}

.dropdown:hover .dropdown-content {
    display: block;
}
.social-icons-btn {
    display: flex;
  }
  .icons {
    width: 30px;
    height: 30px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    background: #444444;
    margin: 0.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: 
      0 2px 2px #d1d1d1;
    color: #fff;
    cursor: pointer;
    transition:
      all 0.15s ease;
  }
  .twitter:hover {
    background: #00ECEE;
  }
  .facebook:hover {
    background: #4267B2;
  }
  .instagram:hover {
    background-image: 
      linear-gradient(
      #8a3ab9,
      #e95950, 
      #bc2a8d, 
      #fccc63
      );
  }
  .linkedin:hover {
    background: #0A66C2;
  }
  .youtube:hover{
    background: #FF0000;
  }
  .social-icons-btn i {
    color: #fff;
}
.pinterest:hover{
background: #E60023;
}

#sidebarMenu {
  height: 100%;
  position: fixed;
  left: 0;
  width: 250px;
  margin-top: 45px;
  transform: translateX(-250px);
  transition: transform 250ms ease-in-out;
  /* background: #6e6e6e; */
}
.sidebarMenuInner{
    margin:0;
    padding:0;
    border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li{
    list-style: none;
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    padding: 20px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.sidebarMenuInner li span{
    display: block;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.50);
}
.sidebarMenuInner li a{
    color: #fff;
    text-transform: uppercase;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
}
.toggle-ic input[type="checkbox"]:checked ~ #sidebarMenu {
    transform: translateX(0);
}

.toggle-ic input[type=checkbox] {
    transition: all 0.3s;
    box-sizing: border-box;
    display: none;
}
.sidebarIconToggle {
    transition: all 0.3s;
    box-sizing: border-box;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    height: 100%;
    width: 100%;
    top: 20px;
    height: 22px;
    width: 22px;
}
.spinner {
    transition: all 0.3s;
    box-sizing: border-box;
    position: absolute;
    height: 3px;
    width: 100%;
    background-color: #fff;
}
.horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.diagonal.part-1 {
    position: relative;
    transition: all 0.3s;
    box-sizing: border-box;
    float: left;
}
.diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    position: relative;
    float: left;
    margin-top: 3px;
}
.toggle-ic input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {
    transition: all 0.3s;
    box-sizing: border-box;
    opacity: 0;
}
.toggle-ic input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(135deg);
    margin-top: 8px;
}
.toggle-ic input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {
    transition: all 0.3s;
    box-sizing: border-box;
    transform: rotate(-135deg);
    margin-top: -9px;
}
.toggle-ic span {
  position: absolute;
  left: 12%;
  color: #fff;
  font-weight: 400;
  font-size: 14px;
  top: 18px;
}
.sticky-top .container {
  display: initial;
}
.text-white small {
  color: #ffff;
  font-weight: 400;
}
.sticky-header {
  position: fixed;
  top: 0;
  z-index: 1020;
  width: 100%;
  /* background: #6e6e6e; */
}

/* ------ HEADER-CSS-END  ------ */
/* ------ FOOTER-CSS-START ------ */
footer {
  background: #6e6e6e;
  padding: 40px 0;
}
.foot-content li a {
  font-size: 14px;
}
.foot-content li a:hover {
  color: #bcfd4c !important;
}
.foot-content p{
  font-size: 13px;
}
.foot-content img.img-fluid {
  width: 50px;
  margin: 0 12px 0 0;
}
a.green-clr {
  color: #bcfd4c;
  text-decoration: none;
  font-size: 14px;
}
.foot-bottom p{
  font-size: 14px;
}
footer .breadcrumb-item a {
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
footer .payment-logos img{
  max-width: 50px;
}
li.breadcrumb-item{
  position: relative;
}
li.breadcrumb-item:after {
  position: absolute;
  content: '/';
  color: #fff;
  left: 8px;
}
li.breadcrumb-item:first-child:after {
  content: '';
}
/* ------ FOOTER-CSS-END ------ */
/* ------ COMMON-CSS-START ------- */
.required-field{
  color: red;
  font-weight: 700;
}
.form-control {
  padding: 15px 0.75rem;
}
form .btn{
  background: #bcfd4c;
  width: 100%;
  padding: 15px 20px;
  transition: all .5s ease-in-out;
}
form .btn:hover{
  background: #000;
  color:#fff;
}
form .pass-field {
  border-right: 0;
}
.pass-field-block span{
  padding: 15px 5px;
  border-top: 1px solid #ced4da;
  border-right: 1px solid #ced4da;
  border-bottom: 1px solid #ced4da;
  border-radius: 0.375rem;
}
/* ------ COMMON-CSS-END ------- */
/* ========================= HOME-PAGE-CSS-START =========================*/
#heroslider .carousel-inner{
  position: relative;  
}
#heroslider .carousel-inner:after{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  background-color: #52525266;
  width: 100%;
  height: 100%; 
  z-index: 0;
}
#heroslider .carousel-caption {
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
}
#heroslider .carousel-indicators button {
  width: 8px !important;
  height: 8px !important;
  background-color: #bcfd4c !important;
  opacity: 1 !important;
}
#heroslider .carousel-indicators .active{
  width: 30px !important;
  height: 8px !important;
  background-color: #ffffff !important;
}
.hero-wrapper form input{
  border: 1px solid #bcfd4c;
  background-color: transparent;
}
.hero-wrapper form input::placeholder{
color: #bcfd4c;
}
.hero-wrapper form .btn{
  max-width: 100px;
}
.service-wrapper{
  padding: 70px 0;
}
.service-block img{
  max-width: 60px;
}
.sale-block,.bnf-block,.deals-block{
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 40px;
}
.deals-block .btn{
  color: #579728;
}
.sale1{
  background-image: url(../../../root-images/sale1.png);
}
.sale2{
  background-image: url(../../../root-images/sale2.png);
}
.sale3{
  background-image: url(../../../root-images/sale3.png);
}
.top-deal-wrapper{
  padding: 100px 0;
}
.top-deal-wrapper h3,.featured-products-wrapper h3, .featured-brand-wrapper h3,.recommended-wrapper h3,.top-selling-wrapper h3{
  border-bottom: 2px solid #e9e9e9;
}
.top-deal-wrapper h3 span,.featured-products-wrapper h3 span, .featured-brand-wrapper h3 span,.recommended-wrapper h3 span,.top-selling-wrapper h3 span{
  border-bottom: 2px solid #bcfd4c;
}
.top-deal-wrap {
  display: inline-flex;
  gap: 3%;
  flex-wrap:wrap
}
.top-deal-wrap .top-deal-block {
  width: 17.6%;
  position: relative;
}
.top-deal-block .product-name{
color:#3385D3;
}
.top-deal-block .progress {
  height: 10px;
}
.top-deal-block .progress-bar {
  background-color: #CC1414;
}
.top-deal-block .sold-out{
  font-size: 14px;
  margin-top: 10px;
}
p.discount-value {
  position: absolute;
  left: 0;
  top: 0;
  background: #5AAB19;
  padding: 2px 15px;
}
.bestseller-block{
  background-image: url(../../../root-images/bestseller.png);
}
.featured-block{
  background-image: url(../../../root-images/featured.png);
}
.featured-products ul{
  list-style-type: none;
  padding-left: 0;
}
.featured-products .product-price{
  color: #CC1414;
}
.offer-section{
  background-color:#6E6E6E;
}
.all-deals-wrapper{
  padding: 100px 0 0;
}
.hot-deal{
  background-image: url(../../../root-images/game.png);
  height: 100%;
}
.electronic-deal{
  background-image: url(../../../root-images/electronics.png);
}
.sport-deal{
  background-image: url(../../../root-images/sport.png);
  height: 100%;
}
.laptop-deal{
  background-image: url(../../../root-images/laptop.png);
}
.electronic-deal .btn {
  color: #608b18;
}
.recommended-wrapper,.top-selling-wrapper{
  padding: 100px 0;
}
.recommended-wrapper .all-products{
  font-size: 16px;
  color: #444444;
  text-decoration: none;
}
.nav-pills .nav-link {
  padding: 10px !important;
  font-size: 16px !important;
  color: #444 !important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  background-color: #bcfd4c;
}
/* ========================= HOME-PAGE-CSS-END =========================*/

/* ========================= LOGIN-PAGE-CSS-START =========================*/
.login-wrapper img{
  max-width: 300px;
}
/* ========================= LOGIN-PAGE-CSS-END =========================*/

/* ========================= REGISTER-PAGE-CSS-START =========================*/

/* ========================= REGISTER-PAGE-CSS-END =========================*/

/* ========================= FORGOT-PASSWORD-PAGE-CSS-START =========================*/

/* ========================= FORGOT-PASSWORD-PAGE-CSS-END =========================*/

/* ========================= ABOUT-US-PAGE-CSS-START =========================*/
.about-hero-wrapper{
  background-image: url(../../../root-images/about-bg.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 100px 0;
}
.how-work-wrapper{
 background-color:  #f6f7f9;
 padding: 60px 0;
}
.how-work-wrapper .card{
  padding: 20px;
  border: 0;
  border-radius: 6px;
}
.how-work-wrapper .card img{
  max-width: 100px;
}
.team-block{
  max-width: 200px;
}
.team-wrapper,.about-wrapper{
  padding: 60px 0;
 }
 
/* ========================= ABOUT-US-PAGE-CSS-END =========================*/

/* ------ RESPOSNIVE-CSS-START ------- */

@media (max-width:1199.98px) {
  .top-deal-wrap .top-deal-block {
    width: 31.3%;
}
}
@media (max-width: 991.98px) {
  .top-deal-wrap .top-deal-block {
    width: 48.5%;
}
}

@media (max-width: 767.98px) {
  .recommended-wrapper, .top-selling-wrapper,.top-deal-wrapper,.service-wrapper,.all-deals-wrapper {
    padding: 40px 0;
}
}
@media (max-width: 576.98px) {
  .top-deal-wrap .top-deal-block {
    width: 100%;
}
}
@media (max-width: 767px) {
  .carousel-inner .carousel-item > div {
    display: none;
  }
  .carousel-inner .carousel-item > div:first-child {
    display: block;
  }
}

.carousel-inner .carousel-item.active,
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-inner .carousel-item .card{
  border: 0;
}
/* medium and up screens */
@media (min-width: 768px) {

  .carousel-inner .carousel-item-end.active,
  .carousel-inner .carousel-item-next {
    transform: translateX(25%);
  }

  .carousel-inner .carousel-item-start.active, 
  .carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
  }
}

.carousel-inner .carousel-item-end,
.carousel-inner .carousel-item-start { 
  transform: translateX(0);
}
/* ------ RESPOSNIVE-CSS-END ------- */