/* @import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital@0;1&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Josefin+Sans:ital,wght@0,100..700;1,100..700&family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

*{
  padding: 0;
  margin: 0;
}

html{
  scroll-behavior: smooth;
}

body{
  font-family: "Rubik", sans-serif;
}

/* loder */
.loader-container{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100vh;
  /* background-color: rgba(194, 211, 230, 0.87); */
  background-color: #000;
  opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
}
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 1;
  background: 
    radial-gradient(farthest-side,#fed700 94%,#0000) top/8px 8px no-repeat,
    conic-gradient(#0000 30%,#fed700);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13{ 
  100%{transform: rotate(1turn)}
}
/* loder ends here*/



button{
    border: none;
    font-family: "Rubik", sans-serif;
  }
  input{
    border: none;
    font-family: "Rubik", sans-serif;
    outline: none;
    border-radius: 0;
  }
  h5{
    margin-top: 0;
    margin-bottom: 0;
  }
  p{
    margin-top: 0;
    margin-bottom: 0;
  }
  a{
    font-family: "Rubik", sans-serif;
  }

  /* header */
  header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 30px;
    color: black;
    /* background-color: #15596f; */
    /* background-color: #03317a; */
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
  }
  .app-logo{
    display: flex;
    align-items: center;
    gap: 0px;
    color: black;
    font-size: 30px;
    font-weight: 600;
    text-decoration: none;
    position: relative;
  }
  .app-logo button{
    width: 6px;
    height: 6px;
    background-color: var(--secondary-color);
    /* background-color: #0d6efd; */
    position: absolute;
    left: 122px;
    top: 28px;
  }

  .contact-us-button.btn-secondary{
    display: flex;
    align-items: center;
    color: var(--tin-color);
    background: none;
    font-size: 14px;
    font-weight: 500;
    padding: 0 0;
    border: none;
  }
  .contact-us-button.btn-secondary:hover{
    background: none;
    color: black;
  }
  .dropdown-toggle::after{
    display: none !important;
  }
  .btn.show{
    background: none !important;
  }

  .nav-links-container{
    width: 500px;
    /* background-color: red; */
  }

  .other-links-container{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  .other-links{
    display: flex;
    align-items: center; 
    gap: 20px;
  }
  .other-links-container a{
    color: var(--tin-color);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
  }
  .last-link-container{
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .last-link-container a{
    text-decoration: none;
    font-size: 14px;
    color: var(--tin-color);
  }
  .helpme-container{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    position: relative;
  }
  .help-icon-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 23px;
    height: 23px;
    background-color: black;
    border-radius: 50%;
  }
  .help-icon-btn svg{
    fill: white;
  }
  .helpme-container h5{
    font-size: 14px;
    color: black;
    margin-bottom: 0;
  }
  .helpme-dropdown{
    display: flex;
    flex-direction: column;
    width: 200px;
    height: 0;
    background-color: white;
    padding: 8px 0;
    border-radius: 5px;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    position: absolute;
    left: -50px;
    top: 30px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    z-index: 9999;
  }
  .helpme-container:hover .helpme-dropdown{
    height: 120px;
    opacity: 1;
    visibility: visible;
  }

  .helpme-dropdown a{
    color: black;
    padding: 2px 10px;
    transition: 0.3s;
  }
  .helpme-dropdown a:hover{
    background-color: #f1f1f2;
  }
  .cart-header-link{
    display: flex;
    align-items: center;
    gap: 3px;
    position: relative;
    /* background-color: #2e75e7; */
  }

  .favourite-link{
    position: relative;
  }
  .favourite-count{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    background-color: var(--border-color);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid white;
    border-radius: 50%;
    color: black;
    position: absolute;
    right: 0;
    top: 0px;
  }

  .cart-counter-display{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    background-color: var(--secondary-color);
    font-size: 11px;
    font-weight: 500;
    border: 1px solid white;
    border-radius: 50%;
    color: #031f24;
    position: absolute;
    right: 0;
    top: 0px;
  }

  .menu-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    display: none;
    background: none;
  }
  .close-menu-icon{
    display: none;
  }


  /* cart page */
  .toast-header{
    display: flex;
    justify-content: space-between;
  }
  .empty-cart-container{
    display: flex;
    justify-content: center;
    padding-top: 100px;
    padding-bottom: 50px;
  }
  .empty-cart-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 430px;
    padding: 30px 20px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .empty-cart-body h5{
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
  }
  .empty-cart-body p{
    font-size: 13px;
    font-weight: 400;
  }
  .cart-main-container.new-arrivals-container{
    display: none;
  }
  .cart-container{
    display: none;
    gap: 20px;
    margin-top: 40px;
  }
  .cart-body{
    width: 70%;
    /* height: 200px; */
    border-radius: 3px;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .cart-body-header-body{
    border-bottom: 1px solid var(--border-color);
    padding: 10px 20px;
  }
  .cart-body-header{
    font-size: 20px;
    font-weight: 700;
  }
  .cart-item-container{
    padding: 10px 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
  }
  .cart-item-body{
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .cart-item-and-title{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .cart-img{
    width: 100px;
    height: 100px;
    border-radius: 2px;
    overflow: hidden;
  }
  .cart-img .img{
    width: 100%;
    object-fit: cover;
  }
  .cart-item-title{
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 3px;
  }
  .cart-item-description{
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 5px;
    margin-top: 5px;
  }
  .remove-cart-btn{
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background-color: var(--secondary-color);
    color: #5f6368;
    font-weight: 600;
    border-radius: 3px;
    margin-top: 10px;
    transition: 0.3s;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .remove-cart-btn:hover{
    /* transform: translatey(5%); */
    background-color: #e9ca1c;
  }
  .cart-footer{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .cart-duplicate-buttons{
    display: flex;
    align-items: center;
    gap: 15px;
  }
  .cart-minus-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 28px;
    background-color: var(--secondary-color);
    color: white;
    border-radius: 2px;
    transition: 0.3s;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .cart-minus-btn:hover{
    background-color: #e9ca1c;
  }

  .cart-border-divider{
    width: 100%;
    height: 1px;
    background-color: var(--border-color);
    margin-top: 10px;
  }


  /* cart sunnery */
  .cart-summery{
    width: 30%;
  }
  .cart-subtotal{
    height: 190px;
    border-radius: 3px;
    margin-bottom: 20px;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .checkout-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 12px 10px;
    font-size: 15px;
    font-weight: 700;
    color: black;
    text-decoration: none;
    background-color: var(--secondary-color);
    border-radius: 5px;
    margin-top: 10px;
    transition: 0.3s;
  }
  .checkout-btn:hover{
    background-color: #e9ca1c;
  }
  .payment-modal-header{
    display: flex;
    justify-content: center;
    position: relative;
  }
  .payment-btn-close-modal{
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 20px;
    bottom: 10px;
  }
  .black-mark{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    background-color: var(--primary-color);
    color: white;
    padding: 8px 20px;
  }
  .payment-method{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid var(--border-color);
    padding: 5px 20px;
    border-radius: 5px;
    margin-bottom: 15px;
    cursor: pointer;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
  }
  .payment-method-text{
    display: flex;
    flex-direction: column;
  }
  .payment-method-text h5{
    width: unset;
    text-align: left !important;
  }
  .payment-method-img{
    width: 55px;
  }
  .payment-method-img .img{
    width: 100%;
  }
  .payment-method-imgs{
    width: 35px;
  }
  .payment-method-imgs .img{
    width: 100%;
  }
  .add-user-content{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    margin-bottom: 10px;
    position: relative;
  }
  .add-user-content-container{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
  }
  .add-user-content-container  .add-user-content{
    width: 50%;
    margin-bottom: 0;
  }
  .add-user-content input{
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #dee2e6;
    border-radius: 3px;
  }
  .pay-now-btn{
    width: 100%;
    padding: 10px 20px;
    font-weight: 500;
    background-color: var(--secondary-color);
    border-radius: 4px;
    margin-top: 10px;
  }
  .card-img{
    width: 30px;
    position: absolute;
    top: 37px;
    left: 10px;
  }
  /* checkout modal ends here*/

  .congrats-modal .modal-header{
    border-bottom: 0;
    padding: 10px 20px;
    /* margin-bottom: 10px; */
  }
  .congrats-modal .modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px 30px;
    padding-bottom: 40px;
  }
  .mark-img-container{
    width: 13%;
  }
  .mark-img-container .img{
    width: 100%;
  }
  .modal-body h5{
    text-align: center;
    width: 300px;
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
  }
  .okay-btn{
    width: 100%;
    padding: 10px 10px;
    background-color: black;
    text-transform: uppercase;
    /* background-color: var(--basic-color); */
    color: white;
    font-size: 17px;
    font-weight: 600;
    border-radius: 4px;
    margin-top: 15px;
    transition: 0.3s;
  }
  .okay-btn:hover{
    opacity: 0.8;
  }

  /* cart page */

  /* aside */
  aside{
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 0 30px;
    margin-top: 40px;
  }
  .categories-container {
    width: 25%;
    position: relative;
  }
  .category-btn{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    gap: 10px;
    width: 100%;
    height: 60px;
    padding: 5px 10px;
    color: #031f24;
    background-color: var(--secondary-color);
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
  }
  .categories-contents{
    width: 100%;
    height: 0;
    background-color: white;
    border-radius: 5px;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 65px;
    transition: 0.3s;
    z-index: 9999;
  }
  .visible.categories-contents{
    height: 330px;
    opacity: 1;
    visibility: visible;
  }
  .categories-contents a{
    display: flex;
    flex-direction: column;
    /* gap: 20px; */
    color: black;
    text-decoration: none;
    padding: 5px 10px;
    transition: 0.3s;
  }
  .category-content a:hover{
    background-color: #f1f1f2;
  }


  .search-container{
    display: flex;
    align-items: center;
    width: 50%;
    height: 60px;
  }
  .search-container input{
    width: 80%;
    height: 100%;
    border: 1px solid var(--border-color);
    border-right: 2px solid transparent;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
    padding: 0 20px;
  }
  .search-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    color: #031f24;
    font-weight: 600;
    font-size: 13px;
    text-decoration: none;
    /* border-left: 1px solid #fed700; */
    text-transform: uppercase;
    background-color: var(--secondary-color);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid var(--secondary-color);
  }
  .black-friday-btn{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 25%;
    height: 60px;
    text-decoration: none;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    padding: 10px 10px;
    position: relative;
    overflow: hidden;
    z-index: 1;
  }
  .black-friday-btn h5{
    font-size: 16px;
    margin-bottom: 0;
  }
  .black-friday-btn h6{
    font-size: 13px;
    margin-bottom: 0;
    color: black;
  }
  .black-friday-btn:hover{
    border: 1px solid transparent;
  }
  .black-friday-btn .hover-effect{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    top: 0;
    background-color: black;
    z-index: -1;
    transition: transform 300ms ease-in-out;
    transform: scaley(0);
    transform-origin: bottom;
  }
  .black-friday-btn:hover h5{
    color: white;
  }
  .black-friday-btn:hover h6{
    color: white;
  }
  .black-friday-btn:hover .hover-effect{
    width: 100%;
    transform: scaley(1);
    background-color: black;
  }

  /* aside */

  /* header ends here*/

  /* hero section */
  .hero-section{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 0 30px;
    margin-top: 20px;
  }
  .carousel-section{
    width: 65%;
    overflow: hidden;
    /* height: 30%; */
    /* height: 530px; */
    position: relative;
  }
  /* .carousel{
    height: 100%;
  } */

  .carousel-section-content{
    color: white;
    position: absolute;
    left: 50px;
    top: 150px;
    z-index: 99;
  }
  .carousel-section-content h5{
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
  }
  .carousel-section-content h4{
    width: 400px;
    font-size: 30px;
    font-weight: 700;
    line-height: 38px;
  }
  .shopping-link{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 300px;
    height: 50px;
    padding: 5px 20px;
    background-color: var(--secondary-color);
    margin-top: 15px;
    color: #031f24;
    text-decoration: none;
    font-weight: 600;
    border-radius: 5px;
    opacity: 0.6;
    transition: 0.3s;
  }
  .shopping-link:hover{
    opacity: 1;
    /* background-color: red;
    transform: translateY(20px); */
  }

  .carousel-inner{
    height: 100%;
    border-radius: 8px;
    /* overflow: hidden; */
  }
  .carousel-item{
    height: 100%;
  }
  .carousel-item .img{
    height: 100%;
  }
  .carousel-section .carousel-control-next-icon{
    display: none;
  }
  .carousel-section .carousel-control-prev{
    display: none;
  }

  .image-square-container{
    display: flex;
    flex-direction: column;
    /* flex: 1; */
    gap: 20px;
    width: 35%;
    height: 450px;
  }
  .image-square{
    width: 100%;
    height: 222px;
  }
  .image-square .img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
    object-fit: cover;
  }
  /* hero section ends here*/

  .shopping-header{
    display: flex;
    align-items: center;
    padding: 10px 40px;
    color: #031f24;
    background-color: var(--secondary-color);
    border-radius: 3px;
  }
  .shopping-header h5{
    margin-bottom: 0;
  }
  .shopping-background{
    /* display: flex; */
    background-color: white;
    padding: 10px 10px;
  }
  .item-card{
    display: flex;
    flex-direction: column;
    background-color: white;
    color: black;
    text-decoration: none;
    padding: 10px 10px;
    border-radius: 2px;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
    transition: 0.3s;
    /* position: relative; */
  }
  .item-card a{
    color: black;
    text-decoration: none;
  }
  .item-card:hover{
    transform: scale(1.06);
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
  }
  /* .item-card-favourite-icon{
    position: absolute;
    top: 10px;
    right: 10px;
  } */
  .item-card-img{
    width: 100%;
    height: 130px;
    border-radius: 3px;
    overflow: hidden;
    background-color: blue;
  }
  .item-card-img .img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .item-card-title{
    font-size: 15px;
    font-weight: 600;
    margin-top: 20px;
    margin-bottom: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

  }
  .item-current-price{
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    margin-bottom: 0;
  }
  .item-old-price{
    font-size: 13px;
    font-weight: 600;
    text-decoration: line-through;
    margin-bottom: 0;
    opacity: 0.7;
  }

  /* category */
  .category-hero-section{
    width: 100%;
    height: 300px;
    /* background-color: var(--basic-color); */
    border-radius: 8px;
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
  }
  .category-hero-content{
    color: white;
    position: absolute;
    left: 50px;
    top: 80px;
    transform: translateY(50%);
  }
  .category-hero-content h4{
    font-weight: 700;
    font-size: 30px;
    text-transform: uppercase;
  }
  .category-hero-content h5{
    font-weight: 500;
    font-size: 17px;
  }
  .category-hero-section .img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .category-card-price{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
  }
  .item-card.category-item-card:hover{
    transform: scale(1.01);
  }
  .sold-by-container{
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
  }
  .sold-by-container h5{
    font-size: 13px;
    margin-bottom: 0;
    opacity: 0.8;
  }
  .sold-by-container p{
    font-size: 13px;
    color: var(--basic-color);
    margin-bottom: 0;
  }
  .col-xl-2 .category-add-cart-button{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    color: var(--basic-color);
    background-color: white;
    font-weight: 600;
    border: 2px solid var(--basic-color);
    padding: 9px 10px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 10px;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
  .category-add-cart-button:hover{
    color: white;
    border: 1px solid transparent;
  }
  .category-add-cart-button .blue-hover-effect{
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    top: 0;
    background-color: var(--basic-color);
    z-index: -1;
    transition: transform 300ms ease-in-out;
    transform: scaley(0);
    transform-origin: bottom;
  }
  .category-add-cart-button:hover .blue-hover-effect{
    width: 100%;
    transform: scaley(1);
    background-color: var(--basic-color);
    color: white;
  }
  /* category ends here*/

  /* new arrivals */
  .new-arrivals-container{
    padding: 20px 30px;
    background-color: white;
    box-shadow: 0 0 3px rgb(0 0 0 / 20%);
    margin-bottom: 50px;
    border-radius: 5px;
  }
  .new-arrivals-container h4{
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
  }
  .new-arrivals-body{
    display: flex;
    align-items: center;
    justify-content: center;
    /* flex-wrap: wrap; */
    gap: 20px;
  }
  .new-arrival-card{
    display: flex;
    width: 200px;
    height: 200px;
    background-color: #ffd3d9;
    border-radius: 5px;
    overflow: hidden;
    transition: 0.3s;
  }
  .new-arrival-card:hover{
    transform: scale(1.06);
  }
  .new-arrival-card .img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* new arrivals ends here*/

  /* bottom gif */
  .bottom-gif-container{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 30px;
    padding: 0 30px;
  }
  .bottom-gif{
    width: 33%;
    border-radius: 5px;
    overflow: hidden;
  }
  .bottom-gif .img{
    width: 100%;
  }
 /* bottom gif ends here*/

  


  /* <!-- FOOTER --> */
.footer-container{
  width: 100%;
  height: auto;
  background-color: #181818;
  font-family: "Rubik", sans-serif;
  /* font-family: 'Roboto', sans-serif; */
  padding-top: 50px;
  margin-top: 80px;
}
.footer-body{
  display: flex;
  padding: 40px 30px;
  gap: 30px;
  /* border-bottom: 1px solid #999999; */
}
.footer-body a{
  text-decoration: none;
  color: #999999;
  font-size: 14px;
  display: contents;
  flex-direction: column;
}
.footer-body a:hover{
  color: white;
  transition: 0.3s;
}
.support-footers{
  width: 32%;
  border-top: 1px solid #999999;
  padding-top: 40px;
}
.support-footers h2{
  color: white;
  padding-bottom: 20px;
  font-size: 14px;
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}
.support-footer-body{
  display: flex;
  gap: 30px;
}
.support-footer a{
  display: flex;
  padding: 5px;
  font-size: 13px;
}


.about-footer-container{
  display: flex;
}

.about-footers{
  width: 32%;
  border-top: 1px solid #999999;
}
.about-footers h2{
  color: white;
  padding-top: 40px;
  font-size: 14px;
  padding-bottom: 20px;
  font-weight: 500;
}
.about-footer-body{
  display: flex;
  gap: 70px;
}
.about-footer a{
  display: flex;
  padding: 5px;
  font-size: 13px;
}

.details-bodys{
  width: 32%;
  border-top: 1px solid #999999;
}
.details-bodys h2{
  color: white;
  /* padding-top: 40px; */
  font-size: 14px;
  padding-bottom: 20px;
  font-weight: 500;
}
.details-input{
  display: flex;
  gap: 10px;
  padding-bottom: 20px;
}
.details-input input{
  width: 370px;
  height: 60px;
  background-color: #181818;
  border: 1px solid #999999;
  color: white;
  padding: 0 10px;
  border-radius: 2px;
}
.details-btn{
  width: 49px;
  padding: 5px;
  background-color: #181818;
  border: 1px solid #999999;
  border-radius: 2px;
}
.details-btn i{
  color: white;
  font-size: 30px;
}
.details-btn:hover{
  border: 1px solid white;
  transition: 0.3s;
}

.select-language-dropdown{
  display: none;
  width: 450px;
  height: 95vh;
  background-color: green;
  position: absolute;
  top: 1600px;
  left: 429px;
  border-radius: 10px;
}

.selectactive{
  display: block;
}
.select-language-btn{
  display: flex;
  justify-content: flex-end;
  padding: 30px 20px;

}
.language-exit-btn{
  background: none;
  border: none;
  padding: 4px;
}
.language-exit-btn i{
  font-size: 35px;
}
.language-exit-btn:hover{
  background-color: wheat;
  transition: 0.3s;
}

.explore-puma{
 display: flex;
 gap: 20px;
}
.explore{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 60px;
  height: 60px;
  background-color: #181818;
  border: 1px solid #999999;
  padding: 10px 0;
  border-radius: 6px;
  transition: 0.2s;
}
.explore h5{
  color: white;
  font-weight: 400;
  font-size: 12px;
}
.explore a i{
  font-size: 20px;
  color: white;
}
.explore:hover{
  border: 1px solid white;
}

.footer-bottom-section{
  padding: 20px 30px;
}
.footer-bottom-body{
  padding: 20px;
  border-top: 1px solid #999999;
}
.footer-bottom-body{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-social-icons{
  display: flex;
  gap: 20px;
  width: 21%;
  transition: 0.2s;
}

.footer-social-icons a{
  color: white;
  font-size: 33px;
}
.footer-social-icons a:hover{
  color: #999999;
}
.footer-code{
  width: 15%;
  color: #999999;
}
.footer-inc{
  color: #999999;
  width: 15%;
  font-size: 13px;
  /* font-weight: 300; */
}

.footer-firm{
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  /* width: 35%; */
}
.footer-firm button{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
}
.footer-firm button i{
  font-size: 20px;
}
.social-handles{
  display: flex;
  align-items: center;
  gap: 25px;
  z-index: 999;
}
.social-handles a{
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: 22px;
  transition: 0.3s;
  /* background-color: red; */
}
.twitter-img{
width: 20px;
}
.twitter-img .img{
width: 100%;
filter: invert(1);
}
.social-handles a:hover{
  opacity: 0.8;
}


/* contact css */
.contact-container{
  background-color: #f2f2f2;
  padding: 30px 20px;
  border-radius: 8px;
}
.contact-body{
  display: flex;
  justify-content: space-between;
  gap: 30px;
}
.contact-container h3{
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
}
.contact-context{
  width: 50%;
  background-color: white;
  padding: 20px 20px;
  border-radius: 5px;
}
.contact-item{
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-bottom: 15px;
}
.contact-item h5{
  font-size: 13px;
  opacity: 0.9;
}
.contact-item input{
  /* width: 100%; */
  padding: 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  transition: 0.3s;
}
.contact-item input:hover{
  border: 1px solid black;
}
.contact-item input:focus{
  border: 1px solid black;
}
.contact-item input::placeholder{
  font-size: 12px;
  font-weight: 600;
}
.contact-item textarea{
  /* height: 50px; */
  resize: none;
  padding: 20px 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  outline: none;
  transition: 0.3s;
}
.contact-item textarea:hover{
  border: 1px solid black;
}
.contact-item textarea:focus{
  border: 1px solid black;
}
.contact-submit{
  display: flex;
  justify-content: center;
}
.contact-submit button{
  display: flex;
  width: 50%;
  justify-content: center;
  padding: 12px 10px;
  background-color: var(--basic-color);
  color: white;
  border-radius: 5px;
  font-weight: 600;
  transition: 0.3s;
}
.contact-submit button:hover{
   opacity: 0.8;
}

.contact-content{
  width: 50%;
}
.contact-content-item{
  margin-bottom: 40px;
}
.contact-content-item h6{
  margin-bottom: 5px;
}
.contact-whatsapp-body a{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: black;
}
/* contact css ends here*/

/* FAQS */
.accordion-button{
  font-weight: 700;
}
.accordion-button:not(.collapsed){
  background-color: transparent !important;
  border: none !important;
}
.accordion-button:focus{
  box-shadow: none !important;
}
/* FAQS ends here*/



/* about us */
.about-gesture{
  display: flex;
  justify-content: center;
  align-items: center;
  /* width: 400px; */
}
.about-gesture .img{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  object-fit: cover;
}
.about.contact-content{
  display: flex;
  justify-content: center;
}
/* about us ends here*/


/* checkout styling */
.billing-input-body{
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 20px;
}
.billing-input-body input{
  width: 100%;
  padding: 10px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  transition: 0.3s;
}
.billing-input-body input:hover{
  border: 1px solid var(--primary-color);
}
.asterix{
  color: red;
}
.billing-input-body select{
  width: 100%;
  padding: 12px 10px;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  outline: none;
  transition: 0.3s;
}
.billing-input-body select:hover{
  border: 1px solid var(--primary-color);
}
.continue-payment{
  background-color: var(--secondary-color);
  padding: 10px 20px;
  font-weight: 600;
  border-radius: 3px;
  margin-top: 30px;
  opacity: 0.8;
  transition: 0.3s;
}
.continue-payment:hover{
  opacity: 1;
}
/* checkout styling */

/* item details css */
.division {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 30px;
  margin-top: 20px;
}
.image-division{
  width: 50%;
}
.product-image-display {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 450px;
  background-color: #f6f6f6;
  border-radius: 10px;
  position: relative;
}
.add-favourite{
  cursor: pointer;
  position: absolute;
  right: 30px;
  top: 20px;
}
.add-fav-text{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 0;
  font-size: 13px;
  font-weight: 600;
  color: white;
  background-color: #3a3a3a;
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -40px;
  transition: 0.3s;
}
.active.add-favourite{
  fill: var(--secondary-color);
}
.filled-fave-icon{
  display: none;
}
.add-favourite:hover .add-fav-text{
  height: 27px;
  font-weight: 400;
  opacity: 1;
  visibility: visible;
}
.product-image-display .img {
  width: 60%;
  object-fit: contain;
  border-radius: 5px;
}
.small-flex {
  display: flex;
  gap: 10px;
}
.small-div {
  display: flex;
  justify-content: center;
  width: 20%;
  height: 100px;
  border-radius: 6px;
  background-color: #f6f6f6;
  margin-top: 25px;
}


/* content */
.content-division{
  width: 50%;
}
.content-division h4 {
  font-size: 30px;
  font-weight: 700;
}
.content-division p {
  font-size: 14px;
  font-weight: 600;
}
.span-financing{
  font-size: 14px;
}
.green-star i {
  font-size: 12px;
  color: #48b546;
}
.content-division h3 {
  font-size: 17px;
  margin-top: 10px;
  padding-top: 18px;
  padding-bottom: 18px;
  border-top: 1px solid #f6f6f6;
  border-bottom: 1px solid #f6f6f6;
}
.detail-old-price{
  text-decoration: line-through;
  opacity: 0.8;
}
.detail-current-price{
  font-size: 20px;
  font-weight: 700;
}
.product-purchase-cont{
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}
.buy-item-button{
  width: 50%;
  padding: 10px 10px;
  background-color: var(--basic-color);
  color: white;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  border: 2px solid transparent;
  opacity: 0.8;
  transition: 0.3s;
}
.buy-item-button:hover{
  opacity: 1;
}
.add-cart-button{
  width: 50%;
  padding: 10px 10px;
  color: var(--basic-color);
  background-color: white;
  border-radius: 5px;
  font-size: 17px;
  font-weight: 500;
  border: 2px solid var(--basic-color);
  overflow: hidden;
  z-index: 1;
  transition: 0.3s;
}
.add-cart-button:hover{
  color: #242424;
  border: 2px solid #242424;
}
.footer-box {
  width: 100%;
  /* height: 100px; */
  border: 1px solid #f6f6f6;
  padding: 15px 15px;
  /* padding-left: 15px; */
  margin-top: 20px;
}
.first-delivery {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;

}
.footer-box i {
  color: #f4a060;
}
.free h5{
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 0;
}
.free a {
  color: black;
  font-size: 12px;
  font-weight: 400;
}
.free p{
  font-weight: 500;
  margin-bottom: 0;
  /* height: 2px; */
}

/* item details css ends here*/




  @media screen and (max-width:1058px) {
    .cart-body{
      width: 60%;
    }
    .cart-summery{
      width: 40%;
    }
  }

  @media screen and (max-width:986px) {
    .cart-container{
      flex-direction: column;
    }
    .cart-body{
      width: 100%;
    }
    .cart-summery{
      width: 100%;
    }
  }

  @media screen and (max-width:910px) {
    .new-arrivals-body{
      flex-wrap: wrap;
      justify-content: flex-start;
    }
    /* .new-arrival-card{
      width: 120px;
      height: 100px;
    } */
    .hero-section{
      margin-bottom: 30px;
    }
    .image-square-container{
      display: none;
    }

    .carousel-section{
      width: 100%;
    }
    .footer-bottom-body{
      flex-wrap: wrap;
      gap: 15px;
    }
    .footer-code{
      width: 100%;
    }
    .footer-inc{
      width: 100%;
    }

    .footer-body{
      flex-wrap: wrap;
    }
    .details-bodys{
      width: 100%;
    }
    .support-footers{
      width: 100%;
    }
    .about-footers{
      width: 100%;
    }
    .about-footer{
      width: 100%;
    }
    .details-input input{
      width: 90%;
    }
  }

  @media screen and (max-width: 770px) {
    aside{
      justify-content: center;
      flex-wrap: wrap;
    }
    .categories-container{
      width: 100%;
    }
    .search-container{
      width: 100%;
    }
    .black-friday-btn{
      width: 100%;
    }
    .menu-btn{
      display: flex;
      z-index: 99999999;
    }
    .other-links-container{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        width: 0;
        height: 100vh;
        background-color: #242424;
        transition: all 300ms ease-in-out;
        position: absolute;
        top: 0;
        left: 0;
        visibility: hidden;
        z-index: 99999;
    }
    .other-links-container a{
      color: white;
    }
    .contact-us-button.btn-secondary{
      color: white;
    }
    .visible.other-links-container{
      width: 100%;
      visibility: visible;
      opacity: 1;
    }
    .division{
      flex-direction: column;
    }
    .image-division{
      width: 100%;
    }
    .content-division{
      width: 100%;
    }
    .product-image-display{
      height: 250px;
      padding: 20px 0;
    }
    .contact-body{
      flex-direction: column;
    }
    .contact-context{
      width: 100%;
    }
    .contact-context{
      width: 100%;
    }
    .contact-content{
      width: 100%;
    }
  }

  @media screen and (max-width:500px) {
    .helpme-container{
      display: none;
    }
    .search-container input {
      border: 1px solid var(--border-color);
      /* border-right: 1px solid transparent; */
      border-radius: 0 !important;
      border-bottom-left-radius: 4px !important;
      border-top-left-radius: 4px !important;
   }
   .search-container .search-input{
      /* border-radius: 0 !important; */
      /* background-color: green; */
   }
   .remove-search-section{
    display: none;
   }
    .carousel-section-content{
      position: absolute;
      left: 30px;
      top: 30px;
    }
    .carousel-section-content h4{
      width: 300px;
      font-size: 16px;
      line-height: 22px;
    }
    .shopping-link{
      width: 160px;
      height: 40px;
      font-size: 12px;
      padding: 5px 10px;
      border-radius: 3px;
    }
    .item-card-img{
      height: 190px;
    }
    .cart-item-body{
      flex-direction: column;
    }
    .cart-duplicate-buttons{
      margin-top: 10px;
    }
    .cart-item-price{
      padding: 10px 0;
    }
    aside{
      padding: 0 15px;
    }
    .hero-section{
      padding: 0 15px;
    }
    .main{
      padding: 0 0 !important;
    }
    .new-arrivals-container{
      padding: 20px 15px;
      border-radius: 0 !important;
    }
    .new-arrivals-body{
      justify-content: center;
      gap: 15px;
    }
    .new-arrival-card{
      width: 110px;
      height: 100px;
    }
    .shopping-header{
      border-radius: 0;
    }
    .category-hero-section{
      height: 230px;
    }
    .category-hero-content {
      color: white;
      position: absolute;
      left: 30px;
      top: 70px;
    }
    .category-hero-content h4{
      font-size: 16px;
      margin-bottom: 5px;
    }
    .category-hero-content h5{
      font-size: 12px;
    }
    .cart-main-container{
      padding: 0 15px !important;
    }
    .empty-cart-container{
      padding-top: 60px !important;
      /* padding-bottom: 20px !important; */
    }
    .contact-container{
      border-radius: 0;
    }
    .bottom-gif-container{
      gap: 5px;
      padding: 0 20px;
    }
    .footer-container{
      margin-top: 30px;
    }
  }