*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
:root{
  --after-content:'0';
}
body{
    background:radial-gradient(#fff, #f1e3e3);
}
html{
    scroll-behavior: smooth;
}
.stripe-cards{
width: 20px;
}

.navbar{
    background:#334155;
    height: 100px;
    width: 100%;
    margin-bottom:3.2% ;
}
.navbar .menu{
    display: none;
}
.nav-elements{
    display: flex;
    justify-content: space-around;
    text-align: center;
    align-items: center;
    cursor: pointer;
}
.nav-elements a img.website-logo{
    height: 80px;
    width: 200px;
    mix-blend-mode:screen;
}
.nav-elements a img.website-logo:hover{
  opacity: 1;
}
.nav-elements a{
    text-decoration: none;
    color: white;
    font-size: 26px;
    font-weight: bold;
}
/*...............................Underline @home...............*/
.nav-elements a.home::after{
        content: '';
        position: absolute;
        background:whitesmoke;
        background-clip: content-box;
        color: transparent;
        border-radius: 1px;
        height: 5px;
        width: 0px;
        margin-left: 10.2px;
        top: 10.5%;
        display: flex;
        transition: 0.5s;
        transition-duration: 0.2s;
        animation: underline;
        animation:infinite ease;
}
@keyframes underline{
    from{
    width: 0px;
    }
    to{
        width: 100%;
    }
}
.nav-elements a.home:hover::after{
   width: 45px;
}
.nav-elements .google-translate{
 border: 1px solid;
 width: 100px;
 height: 30px;
}
/*.................................................underline @ About ..................*/
.nav-elements a.about::after{
    content: '';
    position: absolute;
    background:whitesmoke;
    background-clip: content-box;
    color: transparent;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    margin-left: 15px;
    top: 10.5%;
    display: flex;
    transition: 0.2s;
    transition-duration: 0.2s;
    animation: underline;
    animation:infinite ease;
}
@keyframes underline{
    from{ width: 0px;}
    to{ width: 100%;}
}
.nav-elements a.about:hover::after{
    width: 45px;
}
/*.................................................underline @ user profile ..................*/
.user-profile h2::after{
  content: '';
  position: absolute;
  background:whitesmoke;
  background-clip: content-box;
  color: transparent;
  border-radius: 1px;
  height: 5px;
  width: 0px;
  bottom:-28%;
  margin-left: 25px;
  display: flex;
  transition: 0.2s;
  transition-duration: 0.2s;
  animation: underline;
  animation:infinite ease;
}
@keyframes underline{
  from{ width: 0px;}
  to{ width: 100%;}
}
.user-profile h2:hover::after{
  width: 120px;
}
.nav-elements a:hover{
   opacity: 0.4;
   transition: 0.2s;
}
.user-profile h2 span:hover{
  opacity: 0.6;
   transition: 0.2s;
}

.nav-elements form input{
    height:36px;
    width: 380px;
    border: none;
    background: rgb(219, 203, 206);
    border-radius: 4px;
    outline: none;
    padding: 10px;
    font-size: 16px;
}
.nav-elements form input:hover{
    background: white;
    color: black;
}
::placeholder{
    font-weight: 600px;
    color: black;
    padding:8px ;
    font-size: 18px;
}
.nav-elements button{
  height: 36.5px;
  width: 39px;
  background:black;
  justify-content: center;
  text-align: center;
  align-items: center;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 2px;
  margin-left: -10%;
}
.nav-elements button i.fa-magnifying-glass{
  font-size: 18px;
  color: white;
  text-align: center;
}
.user-profile{
  font-size: 13px;
  font-weight: bold;
  margin-right: -7.5%;
  text-align: center;
  position:relative;
  z-index: 999;
}
.profile-trigger{
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}
#chevronDown{
  rotate: 0deg;
  transition: rotate 0.4s ease;
  display: inline-block;
}
.user-profile h2 i{
  margin-left:5px;
}
.profile-features{
  position: absolute;
  background: white;
  border-radius: 12px;
  padding: 0;
  width: 320px;
  max-height: auto;
  overflow: visible;
  top: 100%;
  right: -80px;
  margin-top: 5px;
  font-size: 15px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.08);
  z-index: 10000;
  animation: slideDown 0.3s ease;
  visibility: visible;
  opacity: 1;
  display: flex;
  flex-direction: column;
}

.profile-features::-webkit-scrollbar {
  width: 6px;
}

.profile-features::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.profile-features::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 10px;
}

.profile-features::-webkit-scrollbar-thumb:hover {
  background: #555;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
  }
}

.profile-features:hover{
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
  transition: 0.3s ease;
}

/* Profile Header */
.profile-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px 12px 0 0;
  color: white;
  position: relative;
  flex-wrap: wrap;
}

.profile-avatar {
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.4);
}

.profile-info {
  flex: 1;
  text-align: left;
  min-width: 180px;
}

.profile-name {
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-weight: 600;
  color: white;
  text-transform: capitalize;
  word-break: break-word;
}

.profile-email {
  margin: 4px 0 0 0;
  padding: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
}

.profile-features button.closebutton{
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.profile-features button.closebutton:hover{
  background: rgba(255, 255, 255, 0.4);
  transform: rotate(90deg);
}

.profile-features button.closebutton:active{
  transform: rotate(90deg) scale(0.95);
}

.profile-features button.closebutton i{
  opacity: 1;
}

/* Menu Divider */
.profile-menu-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, #e0e0e0, transparent);
  margin: 8px 0;
  width: 100%;
}

/* Menu Section */
.profile-menu-section {
  padding: 8px 0;
  width: 100%;
}

/* Menu Items */
.profile-menu-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: #2c3e50;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
  overflow: visible;
  width: 100%;
  box-sizing: border-box;
  border-left: 4px solid transparent;
}

.profile-menu-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
}

.profile-menu-item:hover{
  background: linear-gradient(90deg, rgba(102, 126, 234, 0.05) 0%, transparent 100%);
  color: #667eea;
  padding-left: 20px;
}

.profile-menu-item:hover::before {
  transform: scaleY(1);
}

.profile-menu-item i:first-child {
  color: #667eea;
  font-size: 16px;
  width: 20px;
  text-align: center;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.profile-menu-item:hover i:first-child {
  color: #764ba2;
  transform: scale(1.15);
}

.profile-menu-item span {
  flex: 1;
  text-align: left;
  color: #2c3e50;
  font-weight: 500;
  display: inline-block;
}

.profile-menu-item i:last-child {
  color: #bdc3c7;
  font-size: 12px;
  margin-left: auto;
  opacity: 1;
  transform: translateX(0);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.profile-menu-item:hover i:last-child {
  opacity: 1;
  transform: translateX(0);
  color: #667eea;
}

/* Logout Button */
.logout-btn{
  width: calc(100% - 24px);
  margin: 12px 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.logout-btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255, 107, 107, 0.4);
}

.logout-btn:active {
  transform: translateY(0);
}

.logout-btn i {
  font-size: 14px;
}

#profileFeatures{
  display: none;
}

.logout-btn i {
  font-size: 16px;
}

#profileFeatures{
  display: none;
  transition: 0.3s ease;
}

.nav-elements a.user{
  margin-right: -2%;
}
.nav-elements i.fa-user{
    font-size: 25px;
    margin-right: -2%;
    color: brown;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 0px grey;
    padding: 8px;
}
.nav-elements i.fa-user:hover{
    opacity: 0.8;
    transition: 0.5s;
    background: radial-gradient(#fff, #ffd6d6);
}

.nav-links{
    margin-top: 5px;
    background:#1a1a1a;
    width: 100%;
    height: 60px;
}
.nav-links a{
    text-align: center;
    align-items: center;
    justify-content: space-between;
   margin-left: 20px;
   color: white;
   padding: 12px;
   font-size: 18px;
   font-weight: bold;
   text-decoration: none;
}
.nav-links a:hover{
    opacity: 0.5;
    transition: 0.2s;
}
.nav-links a:active{
    opacity: 0.4;
    color: orangered;
}
select{
    width: 100px;
    height: 30px;
    font-size: 16px;
    outline: 0;
    border-radius: 4px;
    padding-left: 12px;
}
.icons{
    color: brown;
    float: right;
    margin-right: 5px;
    cursor: pointer;
}
.icons i{
    justify-content: space-between;
    font-size: 28px;
    padding: 9px;
}
.menu-links{
    display: none;
}
.popover{
background:orangered;
color: black;
border: none;
border-radius: 4px;
margin: auto;
font-size: 18px;
padding: 6px 8px;
cursor: not-allowed;
}
::backdrop {
  background-image: url(Images/background\ cover-2.png);
  filter: blur(9px);
}

/*............................................................//Cart............//Favourites.................................*/
.icons .cart{
    border-radius: 4px;
    margin: 5px;
    width: 100px;
    margin-right: -5px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.icons .cart:hover{
    opacity: 0.6;
}
.cart i.fa-solid{
    border: none;
    box-shadow: none;
    margin:auto;
    font-size: 28px;
}
.cart i:hover{
    background: none;
}
.cart i span{
  color: white;
  font-size: 20px;
  background: black;
  border-radius: 50%;
  padding: 5px 8px;
  margin-left: 18px;
}
.icons .favourites{
    display: none;
}
.nav-elements .shoppingcart{
    display: none;
}

.non-empty::after{
  content: var(--after-content);
  font-size: 12px;
  background:radial-gradient(#fff, #ffd6d6);
  font-weight: bold;
  border-radius: 50%;
  padding:8px;
  text-align: center;
  position:relative;
  top: -10px;
  left: -2px;
}
/*-----------------------------------------------------------------------Shopping Cart----------------------------*/
.shopping-cart{
    background:black;
    color: white;
    width: 100%;
    height: 70vh;
    margin: auto;
    position: relative;
    margin-top: 3.8%;
    right:0;
    left: 0;
    display: grid;
    display: none;
    transition: 1s ease;
    transform: translateY(-200%);
    transition: 0.8s ease-in-out;
    grid-template-rows: 70px 1fr 70px;
}
.shopping-cart hr{
    display: none;
}
.shopping-cart h1{
    margin: 0;
    padding: 20px;
    font-weight: bold;
    justify-content: center;
    text-align: center;
}
/*.........................shopping Cart h1 underline......................*/
.shopping-cart h1::after{
    content: '';
    position: absolute;
   background: orangered;
    border-radius: 1px;
    height: 5px;
    width: 180px;
    left: 44%;
    top: 16%;
    display: none;
}
.shopping-cart .cart-btns{
    display: flex;
    column-gap: 10px;
    align-items: center;
    grid-template-columns: repeat(2, 1fr);
}
.shopping-cart .cart-btns button{
    background: orangered;
    font-family:sans-serif;
    font-size: 20px;
    height: 50px;
    width: 50%;
    font-weight: bold;
    border: 0;
    margin-bottom: -15rem;
    cursor: pointer;
    border-radius: 4px;
}
.shopping-cart .cart-btns button.checkout:hover{
    opacity: 0.8;
    transition: 0.4s ease;
}
.shopping-cart .cart-btns button.close{
    background: radial-gradient(#fff, #ffd6d6);
    opacity: 0.6;
}
.shopping-cart .cart-btns button.close:hover{
  opacity: 1;
  transition: 0.4s;
}
.shopping-cart .cart-list h2{
  text-align: center;
 padding: 30px;
}
.shopping-cart button.checkout .fa-chevron-right{
  color: black;
  margin: 0 10px;
}
.shopping-cart button.checkout .fa-chevron-right:hover{
 transform: translateX(5px);
 transition: 0.4s ease;
}
/*..................................................*/
.total-price{
  display: flex;
  justify-content: left;
  margin-top: 10rem;
  margin-left: 4rem;
  font-size: 2rem;
  text-decoration:  overline orangered;
}

/*.............................................Animated Underlines in the Navbar.......................-......*/
.nav-links a.link1::after{
    content: '';
    position: absolute;
    background:white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 2%;
    top: 17.5%;
    display: flex;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
@keyframes underline{
    from{ width: 0px;}
    to{ width: 45px;}
}
.nav-links a.link1:hover::after{
  width: 45px;
}
/*............................Link 2.............................*/
.nav-links a.link2::after{
    content: '';
    position: absolute;
    background: white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 8.2%;
    top: 17.5%;
    display: flex;
    animation: underline;
    animation-duration: 0.4s;
    animation: ease-in-out;
    transition: 0.2s;
}
@keyframes underline{
    from{ width: 0%;}
    to{width: 45px;}
}
.nav-links a.link2:hover::after{
    width: 45px;
}
/*............................Link 3.............................*/
.nav-links a.link3::after{
    content: '';
    position: absolute;
   background: white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 15%;
    top: 17.5%;
    display: flex;
    transition: 0.2s;
    animation: ease-in-out;
}
.nav-links a.link3:hover::after{
  width: 50px;
}
/*............................Link 4.............................*/
.nav-links a.link4::after{
    content: '';
    position: absolute;
    background: white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 23%;
    top: 17.5%;
    display: flex;
    transition: 0.2s;
}
.nav-links a.link4:hover::after{
  width: 60px;
}
/*............................Link 5.............................*/
.nav-links a.link5::after{
    content: '';
    position: absolute;
    background: white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 31.2%;
    top: 17.5%;
    display: flex;
    transition: 0.2s;
}
.nav-links a.link5:hover::after{
 width: 50px;
}
/*............................Link 6.............................*/
.nav-links a.link6::after{
    content: '';
    position: absolute;
   background: white;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    left: 39%;
    top: 17.5%;
    display: flex;
    transition:width 0.2s;
  
}
.nav-links a.link6:hover::after{
 width: 55px;
}



  /*.......................................................Main Page...................................................*/
/*--------------------------------------------------Home//Main page-------------------------------------------*/
  /*..........................................................................................................*/
  a {
    text-decoration: none;
    color: #555;
  }
  
  p {
    color: #555;
  }
  
  .container {
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .col-2 {
    flex-basis: 50%;
    min-width: 300px;
  }
  
  .col-2 img {
    max-width: 100%;
    padding: 20px;
    filter: drop-shadow(10px 5px grey);
  }
  
  .col-2 h1 {
    font-size: 60px;
    line-height: 60px;
    margin: 25px 0;
  }

  /*...................................................Testimonials.......................................................*/
  .testimony-section{
    display: flex;
    overflow-x:hidden;
    margin: 5% auto;
   
   
  }
  .testimony-section h2{
    text-align: center;
    margin: 12px auto 20px ;
    display: none;
  }
  .testimonials {
    display: flex;
   position: relative;

  }
    
  .testimony-container {
    background-color:  #faefef;
    padding: 20px;
    margin: 10px 20px;
    border-radius: 8px;
    width: 24vw;
    cursor: pointer;
    flex-direction: column;
    box-shadow: 1px 1px 4px rgb(169, 167, 167);
    animation: 10s testimonial-slides infinite linear;
  }

  @keyframes testimonial-slides{
    from{
transform: translateX(-100%);
    }
    to{
transform: translateX(0%);
    }
  }
.testimonials:hover .testimony-container{
    animation-play-state: paused;
  }
  
  .testimony-container p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 15px;
    margin-left: 15px;
  }

  
  .testmony-ratings {
    margin-bottom: 15px;
  }
  
  .testmony-ratings i {
    color:orangered; /* Yellow color for stars */
  }
  
  .testmony-ratings i.fas {
    margin-right: 5px;

  }
  
  .testmony-ratings i.far {
    margin-right: 5px;
    color: #ccc; /* Light gray color for empty stars */
  }
  
  .testimony-container img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
  }
  
  .testimony-container h3 {
    font-size: 18px;
   display: inline;
   text-align: center;
   justify-content: center;
  }
  


/*...............................Home page display animations...............*/
.deals-page h1{
 animation: fade linear forwards;
 scale: 0.6;
 opacity: 100%;
 animation-timeline: view();
 animation-range-start: entry -70px;
 animation-range-end:exit -80px;
}
.page-image{
  animation: fade linear forwards;
  scale: 0.4;
  opacity: 40%;
  animation-timeline: view();
  animation-range-start: entry -70px;
  animation-range-end:exit -80px;
 }
 .page-text{
  animation: fade linear forwards;
  scale: 1;
  opacity: 50%;
  animation-timeline: view();
  animation-range-start: entry -70px;
  animation-range-end:exit -80px;
 }
 .testimonial img, .company-brands img, .categories img{
  animation: fade linear forwards;
  scale: 0.4;
  opacity: 40%;
  animation-timeline: view();
  animation-range-start: entry -70px;
  animation-range-end:exit -80px;
  transform-origin: bottom;
 }
 .testimonial .col-3{
  animation: fade linear forwards;
  scale: 1;
  opacity: 50%;
  animation-timeline: view();
  animation-range-start: entry -70px;
  animation-range-end:exit -80px;
 }
 

@keyframes fade{
100%{
  scale: 1;
  opacity: 100%;
}
}


  /*................................................... Offer......................................................... */
  
  .offer {
    background: radial-gradient(#fff, #ffd6d6);
    margin-top: 80px;
    padding: 30px 0;
  }
  
  .col-2 .offer-img {
    padding: 50px;
  }
  
  small {
    color: #555;
  }

  /*........................................service section....................................................*/
  
/*Services*/

.services{
  width: 100%;
  margin: 0 auto 5%;
  text-align: center;
  padding: 80px 0 10px 0;
}

.services h1{
  font-size: 50px;
}

.services h1{
  background: linear-gradient(to left, #a07b46 , #703d3d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;   
}

.services .services_cards{
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  top: 50px;
}

.services .services_box i{
  font-size: 60px;
  color: orangered;
  margin: 20px 0;
  cursor: pointer;
}

.services .services_box h3{
  margin-bottom: 12px;
  font-size: 20px;
}

.services .services_box p{
  text-align: center;
  color: #919191;
  margin-bottom: 60px;
}

h1.customer-reviews{
  font-size: 45px;
  background: linear-gradient(to left, #c78120 , #79596b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
  /*..........................................................................................................*/
  
  .col-5 {
    width: 160px;
  }
  
  .col-5 img {
    width: 100%;
    cursor: pointer;
    filter: grayscale(100%);
  }
  
  .col-5 img:hover {
    width: 100%;
    cursor: pointer;
    filter: grayscale(0);
  }


  /*.....................................................Media querries......................................................*/

  /* ..............................................all products page................................... */
  
  .row-2 {
    justify-content: space-between;
    margin: 100px auto 50px;
  }
  
  .small-img-row {
    display: flex;
    justify-content: space-between;
  }
  
  .small-img-col {
    flex-basis: 24%;
    cursor: pointer;
  }
  
  .form-container span {
    font-weight: bold;
    padding: 0 10px;
    color: #555555;
    cursor: pointer;
    width: 100px;
    display: inline-block;
  }

  
  /* media query for less than 600 screen size */
  
  @media only screen and (max-width: 600px) {
    .row {
      text-align: center;
    }
    .col-2,
    .col-3,
    .col-4 {
      flex-basis: 100%;
    }
    .cart-info p {
      display: none;
    }

  }


  section.main-page p{
    text-align: center;
    align-items: left;
    justify-content: left;
  }
.container {
    max-width: 1300px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-around;
  }
  
  .col-2 {
    flex-basis: 50%;
    min-width: 300px;
  }
  
  .col-2 img {
    max-width: 100%;
    padding: 50px 0;
  }
  
  .col-2 h1 {
    font-size: 40px;
    line-height: 60px;
    margin: 25px 0;
  }
  a.explore-btn {
    text-decoration: none;
  }
  .explore-btn {
    display: inline-block;
    background: #ff523b;
    color: #ffffff;
    padding: 8px 20px;
    margin: 30px 30%;
    border-radius: 30px;
    width: 170px;
    transition: background 0.5s;
    font-weight: bold;
    text-align: center;
  }
  
  .explore-btn:hover {
    background: #563434;
  }


  /*..........................................................................................................*/

  .categories {
    margin: 70px 0;
  }
  
  .col-3 {
    flex-basis: 30%;
    min-width: 250px;
    margin-bottom: 30px;
  }
  
  .col-3 img {
    width: 100%;
  }
  .col-3 img.FC-image{
    height: 320px;
    width: 90%;
  }
  .small-container {
    max-width: 1080px;
    margin: auto;
    padding-left: 25px;
    padding-right: 25px;
  }
  
  .col-4 {
    flex-basis: 20%;
    padding: 10px;
    min-width: 200px;
    margin-bottom: 50px;
    transition: transform 0.5s;
  }
  
  .col-4 img {
    width: 100%;
  }
  
  .title {
    text-align: center;
    margin: 0 auto 80px;
    position: relative;
    line-height: 60px;
    color: #555;
  }
  .title::after {
    content: "";
    background: #ff523b;
    width: 80px;
    height: 5px;
    border-radius: 5px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%);
  }
  
  h4 {
    color: #555;
    font-weight: normal;
  }

  /* .......................................................Offer ....................................................*/
  
  .offer {
    background: radial-gradient(#fff, #ffd6d6);
    margin-top: 80px;
    padding: 30px 0;
  }
  
  .col-2 .offer-img {
    padding: 50px;
  }
  
  small {
    color: #555;
  }
  .rating .fas {
    color: #ff523b;
  }
  
  .rating .far {
    color: #ff523b;
  }
 

/*.......................................Nike collections....................................................*/
.nike-page .nike-collection{
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 12%;
}

.nike-page .nike-collection .nike-header h1{
  font-size: 100px;
  line-height: 70px;
  font-family: pyxidium quick;
  background: linear-gradient(to right, #c72092,#6c14d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  top: 45px;
  left: 5%;
}

.nike-page .nike-collection .nike-header h1 span{
  font-size: 80px;
  background: linear-gradient(to right, #c72092,#6c14d0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-decoration: none;
}

.nike-page .nike-collection p{
  width: 600px;
  text-align: justify;
  line-height: 21px;
  position: relative;
  top: 85px;
  left: 5%;
}

.nike-page .nike-collection .main_image img{
  background-image: url(Images/Nike-page/BackgroundImage-removebg-preview.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 600px;
  position: relative;
  left: 10px;
  top: 75px;
}
.nike-page .nike-collection .main_image img:hover{
  opacity: 1;
  transition: 0.4s;
}
.nike-page .social_icon{
  position: absolute;
  top: 80%;
  left: 98%;
  transform: translate(-50%,-50%);
  font-size: 20px;
}

.nike-page .social_icon i{
  margin: 8px 0;
  cursor: pointer;
  transition: 0.3s;
}

.nike-page .social_icon i:hover{
  color: #c72092;
}

.nike-page .button{
  margin:2% 20% 5%;
  width: 160px;
  cursor: pointer;
  font-weight: bold;
  padding: 10px 20px;
  border-radius: 30px;
  background: linear-gradient(to right,#c72092 , #6c14d0);
}
.nike-page .button a{
  color: white;
  text-decoration: none;
}

.nike-page .button i{
  color: white;
  margin-left: 5px;
  transition: 0.3s;
}
.nike-page .button:hover{
  transform: translateX(6px);
  opacity: 0.6;
  transition: 0.4s;
}

.nike-page .button:hover i{
  transform: translateX(6px);
  opacity: 0.6;
  transition: 0.4s;
}
/*....................................................Deals page-............................................*/
.deals-page{
  background: orangered;
  width: 98%;
  border-radius:8px ;
 padding: 5%;
 opacity: 0.7;
 cursor: pointer;
 margin: auto;
}
.deals-page:hover{
  opacity: 1;
  transition: 0.4s;
}
.deals-page h1{
  font-size: 120px;
  font-family: "Sedan SC", serif;
  font-weight: bold;
  color: white;
}


  /*----------------------------------------------------------company Logo slides---------------------------------------------*/
  .company-logos{
    padding:20px 20px;
    overflow-x:hidden;
    height: 36vh;
    white-space: nowrap;
  }
  .company-logos .logo-slide{
  display: inline-block;
    animation: 25s logo-slide infinite linear;
   
  }
  .company-logos .logo-slide img{
    width: 12vw;
    cursor: pointer;
    aspect-ratio: 3/2;
    object-fit: contain;
    mix-blend-mode: color-burn;
    margin: 12px 10px;
    padding:20px 20px;
    
  }

  .company-logos .logo-slide .HM-logo{
    width: 10vw;
      }
      .company-logos .logo-slide .Amazon-logo{
width: 16vw;
  }

  @keyframes logo-slide{
    from{
transform:translateX(0%);
    }
    to{
transform:translateX(-100%);
    }
  }
  .company-logos:hover .logo-slide{
    animation-play-state: paused;
  }

  .company-logos::before{
    content: "";
    background:linear-gradient(to left, rgba(255,255,255,0), #f1e3e3);
    height:34vh ;
    width: 250px;
    position: absolute;
    left: 0;
    z-index: 2;
    margin-top: -15px;
  }

  .company-logos::after{
    content: "";
    background:linear-gradient(to right, rgba(255,255,255,0), #f1e3e3);
    height:34vh ;
    width: 250px;
    position: absolute;
    right: 0;
    z-index: 2;
    margin-top: -15px;
  }
  /*..........................................................................................................*/
/*........................................Miain page..........................................................*/
hr.breakline{
    margin-top: 4%;
    height: 4px;
    font-size: 12px;
    color: orangered;
}
/*....................................................image slider.................................*/
.section1 {
    width: 100%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    opacity: 0.8;
    background:orangered;
    animation-name: background;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    transition: 0.5s;
    position: relative;
    margin-top: 0%;
  }
@keyframes background{
    0%{ background:linear-gradient( orangered)}
    25%{ background:pink}
    50%{background: orangered;}
    75%{background: yellow brown, purple;}
    100%{background:linear-gradient(to bottom, orangered,pink,brown);}
}

.img-slider img {
    height: 200px;
    width: 250px;
    margin: 4% 2% 0;
    opacity: 1;
    aspect-ratio: 3/2;
    object-fit: contain;
    cursor: pointer;
    background: transparent;
    filter: drop-shadow(0 0 2px black);
  }
 
  .img-slider:hover{
    animation-play-state: paused;
  }
  .img-slider {
    display: flex;
    float: left;
    position: relative;
    width: 100%;
    height: 320px;
    margin: auto;
    animation-name: slide;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    transition-duration: 2s;
  }


  @keyframes slide {
    0% {
      left: 0px;
    }
    15% {
      left: 50px;
      transform: scale(1.4);
    }
    20% {
      left: -108px;
    }
    32% {
      left: -108px;

    }
    35% {
      left: -216px;
    }
    50% {
      left: -250px;
    }
    100% {
      left: 100px;
    }
}

/*..........................................brand logos.............................................*/
.brands{
    margin: auto;
    display: flex;
     margin-left: 2%;
    justify-content: space-evenly;
}
.brands img{
width:150px;
height: 120px;
cursor: pointer;
margin: 2%;
padding: 2%;
background: white;
border-radius:35% 10% 35%;
filter: drop-shadow( 2px 2px 8px rgb(180, 123, 123));
}
.brands img:hover{
    transform:translateY(-10px);
    box-shadow: 2px 2px 8px black;
  opacity: 0.8;
  transition: 0.4s;
  transform: translate(0px, -8PX);

}
/*.........................................................................................................*/
.column{
    float: left;
    width: 50%;
}
main:after{
    content: "";
    display: table;
    clear: both;
}
.column-1{
    width: 50%;
    padding: 20px;
   
}
.column .other-links{
    margin: 25px;

}
.column .other-links a{
    box-shadow: 0 0 5px black;
    margin: 12px 20px;
    padding: 5px;
    border-radius: 3px;
    color: black;
    text-decoration: none;
    font-size: 16px;
}
.column .other-links a:hover{
    opacity: 0.5;
    box-shadow: 1px 1px 5px rgb(124, 77, 77);
}
.column .other-links button{
    color: rgb(0, 166, 255);
    border: none;
    background: none;
    font-size: 16px;
    text-decoration: underline;
    cursor: pointer;
}
.column .other-links button:hover{
    color: brown;
}
.column .other-links a i{
    font-size: 16px;
}
.column .other-links select{
    float: right;
    width: 150px;
    padding: 5px;
    border-radius: 3px;
    outline: none;
}

.links{
    padding:1% 4%;
}
.links a{
color:grey;
font-size: 18px;
font-weight: block;
text-decoration: none;
margin-left: 10px;
}
.links a:hover{
    color: black;
    text-decoration: underline 4px grey;
}
.column h1, p{
    text-align: center;
    margin-left: -10%;
    }
  

.column-1 ul li{
    list-style: none;
    border: 1px solid grey;
    height: 36px;
    padding: 8px;
    margin: 2%;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 1px 1px 8px black;  
    background: rgb(226, 218, 218);
}
.column-1 ul li i{
    float: right;
    font-size: 14px;
}
.bottom-text h2{
 text-align: center;
}

/*..................................................column 2.....................*/

.column-2{
     display: flex;
    padding: 20px;
    width: auto;
    border-radius: 5px;
    margin-left: -50%;
   overflow: hidden;
}

/*..................................................Cart page.........................*/
main.cart-page .column-2{
 margin: 0 8%;
  justify-content: space-between;
  }
  main.cart-page .cart-headers{
    margin-top: 5rem;
    display: flex;
    justify-content: space-between;
  }
  main.cart-page .cart-headers h1{
    font-size: 2.4rem;
    font-weight: bold;
    margin-left: 1.5rem;
  }
  main.cart-page .cart-headers span{
    font-size: 2rem;
    margin-right: 1.5rem;
  }
  main.cart-page .feautured-product-title h1{
    text-align: center;
  }
  
  .cart-container{
    display: flex;
  }
  .cart-container .cart-column{
    flex: 1;
    border: 1px solid grey;
    width: 200px;
    margin: 2%;
    padding: 12px;
    height: auto;
  }
  .cart-container img{
   width: 250px; 
  }
  .cart-container .item-column{
    display: flex;
  }
  .cart-container .item-column .item-row{
    flex: 1;
    text-align: center;
  }
  .cart-container .item-column .item-row P{
    justify-content: left;
    align-items: left;
    margin: auto;
  }
  .cart-container .product-image{
    background: rgb(181, 178, 178);
  }
/*...............................Product card.................................*/
.card{
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    width: 40%;
    max-height:340px;
    margin: 5px;
    padding-top: 5px;
    text-align: center;
    justify-content: center;
    align-items:flex-end;
    display: flex;
    flex-basis: 25%;
    border: 1px white solid;
    border-radius: 4px;
   background: white;
  }
.card h2{
  font-size: 18px;
}
  .card:hover{
    border: 1px black solid;
    transition: 0.5s;
    transform: translateY(-10px);
  }
  .card img{
    height: 130px;
    width: 130px;
    transform: scale(1);
    filter: drop-shadow(0 0 4px grey);
    cursor: pointer;
    aspect-ratio: 3/2;
    object-fit: scale-down;
}
.card img:hover{
    transform: scale(1.2);
    transition-duration: 0.5s;
}
.item1 img{
    height: 120px;
    width: 160px;
    float: left;
    display: flex;
    aspect-ratio: 3/2;
    object-fit: scale-down;
}
.item3 img{
  width: 120px;
  height: 180px;
  aspect-ratio: 3/2;
  object-fit: scale-down;
}
.item12 img{
  width: 160px;
  height: 200px;
  margin-top: -8%;
  aspect-ratio: 3/2;
  object-fit: scale-down;
}
.item10 img{
  width: 120px;
  margin-top: -6%;
  height: 180px;
  aspect-ratio: 3/2;
  object-fit: scale-down;
}
/*...........................................................................*/
.card .small-imgs a{
    text-decoration: none;
}
.card .small-imgs img{
    height: 50px;
    width: 50px;
    margin: 2px;
    padding: 2px;
    cursor: pointer;
    aspect-ratio: 3/2;
    object-fit:contain;
}
.card .item3 .small-imgs img{
  height: 64px;
  width: 50px;
  aspect-ratio: 3/2;
  object-fit: contain;
}
.card .small-imgs img:hover{
border: 1px solid grey;
transform: scale(1.1);
}
.small-imgs span{
    background: none;
    font-size: 20px;
}
/*.................................................................................*/

.card p.price{
    font-size: 16px;
    font-weight: bold;
    color: rgb(111, 108, 108);
}
.card p.price span{
    background: none;
    text-decoration: line-through 2px orangered;
}
.card p.discounts{
    color: orangered;
    font-size: 16px;
    font-weight: bold;
}
/*.................................................................................*/
.card p.sale{
   position: 50%;
   left: 0%;
   opacity: 1;
    background: orangered;
    border-radius: 1px;
    padding: 4px;
    width: 65px;
    font-size: 20px; 
}
.card p.card1{
    margin: -5% 0;
}
.card p.new{
    background: black;
    color: white;
    position: 50%;
    margin-left: 2%;
     border-radius: 1px;
     padding: 4px;
     width: 65px;
     font-size: 20px;
}
  
/*.......................................................................Heart //Favourite.............................*/

.heart-container {
  --heart-color: orangered;
  position: relative;
  width: 50px;
  height: 100px;
  transition: 0.3s;
}

.heart-container .checkbox {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 20;
  cursor: pointer;
}

.heart-container .svg-container {
  width: 75%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.heart-container .svg-outline,
        .heart-container .svg-filled {
  fill: var(--heart-color);
  position: absolute;
}

.heart-container .svg-filled {
  animation: keyframes-svg-filled 1s;
  display: none;
}

.heart-container .svg-celebrate {
  position: absolute;
  animation: keyframes-svg-celebrate .5s;
  animation-fill-mode: forwards;
  display: none;
  stroke: var(--heart-color);
  fill: var(--heart-color);
  stroke-width: 2px;
}

.heart-container .checkbox:checked~.svg-container .svg-filled {
  display: block
}

.heart-container .checkbox:checked~.svg-container .svg-celebrate {
  display: block
}

@keyframes keyframes-svg-filled {
  0% {
    transform: scale(0);
  }

  25% {
    transform: scale(1.2);
  }

  50% {
    transform: scale(1);
    filter: brightness(1.5);
  }
}

@keyframes keyframes-svg-celebrate {
  0% {
    transform: scale(0);
  }

  50% {
    opacity: 1;
    filter: brightness(1.5);
  }

  100% {
    transform: scale(1.4);
    opacity: 0;
    display: none;
  }
}


/*..................................................................................*/
.card button {
    display:flex;
    border: none;
    outline: 0;
    padding: 2px 8px;
    color: white;
    font-weight: bold;
    background-color: #000;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 2px;
    width:200px;
    height: 40px;
    font-size: 17px;
    bottom: 0;
     margin: 0 auto;
  }
  .card button i.fa-cart-shopping{
   margin: 0 5px;
  }
  .card button:hover{
    transition: 0.4s;
    opacity: 0.5;
  }
  /*.................................................................................................*/
  p.underline{
   position: relative;
   margin-left: -20%;
  }
  p.underline::before{
    content: "";
    position: absolute;
   background: orangered;
   bottom: 0;
   float: left;
   height: 5px;
   width: 50px;
  }
  /*.................................................Order status...............................................*/
.order-status{
    margin: 10%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
  .order-status form{
    margin: 25px auto;
  }
  .order-status form div{
    margin: 12px auto;
  }
  .order-status form div label{
    font-weight: bold;
    font-size: 18px;
  }
  .order-status form div input{
    width: 400px;
    height: 40px;
    padding: 5px 12px;
    border-radius: 2px;
   outline: none;
  }
  .order-status form button{
width: 400px;
height: 50px;
margin-left: 130px;
background: black;
color: white;
font-weight: bold;
border: none;
border-radius: 2px;
cursor: pointer;
font-size: 20px;
  }
  .order-status form button:hover{
    opacity: 0.6;
    transition: 0.4s;
  }
  .order-status p{
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: large;
    color: black;
    margin: 16px auto;
  }
  .order-status a{
    font-size: 20px;
    color:rgb(39, 39, 246);
    text-decoration: underline;
  }
/*..................................................Page buttons.........................,..........*/
.column-2 .page-btns{
    margin-bottom: 5%; 
}
.column-2 .page-btns button{
    font-size: 20px;
    font-weight: bold;
    border: 1px orangered solid;
    color: black;
    background: none;
    margin: 0 10px;
    padding: 5px;
    width: 40px;
    cursor: pointer;
}
.column-2 .page-btns a{
    text-decoration: none;
}
.column-2 .page-btns button.btn-1{
    background: orangered;
    color: white;
}
 
.column-2 .page-btns button.btn-1:hover{
    opacity: 0.5;
}
.column-2 .page-btns button:hover{
    background: orangered;
    color: white;
    transition: 0.4s;
}
/*...........................................page 2..........................................*/
.page-2 .page-btns button.btn-1{
    background: none;
    color: black;
}
.page-2 .page-btns button.btn-2{
    background: orangered;
    color: white;  
}
.page-2 .page-btns button.btn-2:hover{
    opacity: 0.5;
}
.page-2 .page-btns button.btn-3{
    background: none;
    color: white;
}
.page-3 .page-btns button.btn-3{
    background: orangered;
    color: white;
}

.card img.new-balance{
height: 90px;
width: 160px;
}
.page-2 .page-btns button.btn-3{
    background: orangered;
    color: white;     
}
/*....................................................Body text //Index..................................*/
.site-info{
   box-shadow: 1px 1px 5px 1px black;
   border-radius: 4px;
    margin: 2%;
    display: flex;
}
.site-info p{
    margin: 2%;
    font-size: 16px;
    text-align: left;
   justify-content: left;
}
.site-info .row{
    margin: 12px;
}
.site-info h1{
    font-size: 20px;
}
  /*............................................Registeration form..............................*/
  form .registeration-form{
   
    padding: 8% 5%;
    width: 75%;
    height: auto;
    align-items: center;
    justify-content: center;
    text-align: center;
   box-shadow: 0 0 4px grey;
  }
  .registeration-form p{
   
    margin: 4%;
    font-size: 18px;
  }
  .registeration-form .names{
    margin: 5% 1%;
  }
  .registeration-form input{
    width: 360px;
    background: none;
    display: flex;
    
    margin: 5px;
  }
  /*................................................ Account Page...................................................*/
 .background img{
    display: flex;
    float: left;
 }
    /*.......................................................Login section............................*/
    .wrapper{
        background:#1a1a1a;
         width: 400px;
        height: 65vh;
         overflow-y: hidden;
         color: white;
         top: 130px;
         box-shadow: 1px 1px 6px orangered;
         border-radius: 15px;
         padding:  10px;
         backdrop-filter: blur(38px);
         position: relative;
         margin:-5% 40% 12%;
         }
         .wrapper .login-form{
           margin-left: 12%;
           margin-bottom: 5%;
           transition: 0.5s ease-in-out;
           transform: translateY(0);
           
         }
         .login-form h1{
             text-align: center;
             margin: 5px 0px;
             font-size: 28px;
         }
       .login-form h1::after{
         content: '';
         width: 100px;
         height: 3px;
         position: absolute;
         left: 36%;
         top: 8%;
         transform: translateY(-50%);
         background: white;
         border-radius: 2px;
         opacity: 0.8;
         display: flex;
       }
         .inputbox input{
         width: 84%;
         height: 32px;
         font-size: 16px;
         border: solid 1px;
         background: transparent;
         border-radius: 4px;
         color: white;
         padding: 10px;
         margin: 4px 0;
         outline: none;
         
         }
         ::placeholder{
         color: rgb(255, 255, 255);
         padding: 5%;
         font-size: 16px;
         }

         .login-form .messageDiv{
          color: white;
          opacity:0;
          display:none;
          padding: 7px;
          background: orangered;
          font-size: 16px;
          border-radius: 4px;
          animation: fadeout 7s forwards;
          width: 84%;
          height: 32px;
          text-align: center;
      }
/*.....................................form validation..............................*/
       input:user-invalid{
        border: 1px solid red;
       }
       input:user-invalid::placeholder{
        color: red;
    }
    input:user-valid{
        border: 1px solid green;
    }
    input+span{
        color: red;
        display: none;
        margin: 0 8%;
    }
    input:user-invalid+span{
        display: inline;
    }
    input:user-invalid{
        animation: shake 0.1s linear 20;
    }
    input:focus{
      border: orange solid 1px;
    }

        @keyframes shake{
            0%{ transform: translateX(0);}
        
            25%{ transform: translateX(-2px);}
        
            50%{ transform: translateX(0);}
        
            75%{ transform: translateX(2px);}
        
            100%{ transform: translateX(0);}
        }
         #checkbox{
             width: 18px;
             height: 16px;
             margin-left: 20%;
             cursor: pointer;
         }
         #checkbox2{
            width: 18px;
            height: 16px;
            margin-left: 20%;
            cursor: pointer;
        }
       input[type="checkbox"]{
        vertical-align: auto;
      
       }
       .inputbox label.checkbox{
    vertical-align: baseline;
    cursor: pointer;

       }
         .inputbox span{
             font-weight: bold;
             margin-top: 15px;
         }
         .buttons{
             display: flex;
         }
         .buttons .create-account{
             height: 32px;
             text-decoration: none;
             background: none;
             font-weight: bold;
             font-size: 18px;
             color: white;
             border: none;
             box-shadow: -1px 1px 2px brown;  
             border-radius: 4px;
             padding: 6px;
             margin: 5px;
             cursor: pointer;
             text-align: center;
         }
         .buttons .create-account:hover{
             background: linear-gradient( to left, orangered, brown);
             box-shadow: none;
             transition: 0.2s;
             opacity: 0.4; 
         }
         .buttons .login{
         border-radius: 2px;
         width: 100px;
         height: 32px;
         cursor: pointer;
         align-items: center;
         font-size: 18px;
         margin: 5px;
         font-weight: bold;
         background: linear-gradient( to left, orangered,brown);
         border: none;
         color: white;
         }
         .buttons .login:hover{
             background: linear-gradient( to right, orangered,brown);
             transition: 0.5s;
             opacity: 0.5;
         }
         a.Link{
         color:aqua;
         text-decoration: none;
         font-size: 16px;
          margin-left: 10%;
         }
     
         a.Link:hover{
         color:white;
         text-decoration: underline aqua solid;
         }
         h3{
             opacity: 0.6;
            font-weight: bold;
            margin: 0 12%;
            font-size: 20px;
         }

         #message h2{
          color: white;
          text-align: center;
          margin: 12px 5px;
         }
         #message h2 i.fa-user{
          margin: auto;
          margin-left: 12px;
          font-size: 24px;
          font-weight: bold;
          float: left;
          color: white;
         }
         #message h2 i.fa-chevron-down{
          font-size: 12px;
         }
         button.facebook{
         border: none;
         border-radius: 5px;
         cursor: pointer;
         font-size: 17px;
         background:none;
         width: 88%;
         height: 30px;
         margin-bottom:8px;
         color: white;
        
         box-shadow: -1px 1px 2px brown;
         display: flex;
         text-align: center;
         justify-content: center;
         align-items: center;
         text-decoration: none;
         }
       button.facebook i{
        color: #0659ea;
       }
         button.facebook:hover{
             box-shadow: 1px 1px 2px brown;
         transition: 0.2s;
         opacity: 0.5;
         }
         .facebook .fa-brands{
             margin: 10px;
             font-size: 20px;
         }
    
        button.google{
          border: none;
          border-radius: 5px;
         box-shadow: 1px 1px 2px brown;
          width: 88%;
          height: 30px;
          cursor: pointer;
          font-size: 17px;
          background: none;
          color: white;
          text-decoration: none;
          display: flex;
          text-align: center;
          justify-content: center;
          align-items: center;
          animation: mymove 5s infinite;
          }
        button.google img{
          height: 24px;
          margin-right: 8px;
          transition: transform 0.5s;
        }
        button.google img:hover{
          animation: google-slide ease;
          transition: 0.5s;
          transform: translateX(-12px);
        }

  @keyframes google-slide{
    0%{ transform: translateX(0px);
    }
    100%{ transform: translateX(-12px);
    }
  }
  
         .google:hover{
             box-shadow: -1px 1px 2px brown;
             transition: 0.2s;
             opacity: 0.4;
         }
            /*.....................................Signup form..........................................*/
         .wrapper .signup-form{
            transform: translateY(10%);
            margin-left: 8%;
           transition: 0.5s ease-in-out;
         }

         .signup-form h1{
          text-align: center;
          font-size: 28px;
         }
         .signup-form h1::after{
             content: '';
             width: 120px;
             height: 3px;
             position: absolute;
             left: 36%;
             top: 9%;
             transform: translateY(-50%);
             background: white;
             border-radius: 2px;
             opacity: 0.8;
             display: flex;
         }
         .signup-form button{
             height: 32px;
             width: 150px;
             color: white;
             font-size: 18px;
             font-weight: bold;
             cursor: pointer;
             background: none;
             border-radius: 5px;
             border: none;
             margin: -2% 30%;
             padding: -8px;
             background: linear-gradient( to left, orangered, brown);
         }
         .signup-form .messageDiv{
          color: white;
          opacity:0;
          display:none;
          padding: 7px;
          background: orangered;
          font-size: 16px;
          border-radius: 4px;
          animation: fadeout 7s forwards;
          width: 84%;
          height: 32px;
          text-align: center;
      }
         .signup-form button:hover{
             opacity: 0.5;
             color: white;
             transition: 0.4s;
             background: linear-gradient( to right, orangered, brown);
         }
         .signup-form input{
         width: 84%;
         height: 32px;
         font-size: 16px;
         border: solid 1px;
         background: transparent;
         border-radius: 4px;
         color: white;
         padding: 10px;
         margin: 8px 0;
         outline: none;
         }
         .inputbox label span{
             margin-left: -30%;
         }
       
         .signup-form p a{
             color: aqua;
             font-size: 16px ;
             text-decoration:1px underline;
         }
         .signup-form #checkbox{
             width: 18px;
             height: 16px;
             margin-left: 32%;
             cursor: pointer;
         }
         .signup-form p a:hover{
             color:brown;
             text-decoration: underline 1px white;
             transition: 0.4s;
         }
         .signup-form p{
             padding-top: 10px;
             color: white;
         }
         .signup-form p span.login-btn{
             border: none;
             background: linear-gradient( to right, orangered,brown);
             opacity: 0.5;
             border-radius: 4px;
             height: 30px;
             padding: 5px;
             cursor: pointer;
             font-size: 18px;
             color: white;
             font-weight: bold;
             margin-left: 2%;
         }
         .signup-form p span.login-btn:hover{
             background: linear-gradient( to left, orangered,brown);
             transition: 0.5s;
             opacity: 1;
         }
     

  /*........................................................Other pages.............................*/
  /*................................................................................................*/
 
  .product-column{
width: 100%;
position: relative;
display: flex;
justify-content: space-between;
background: rgb(227, 224, 224);
  }

.product-column .product-image img{
    width: 700px;
    height: 600px;
   margin: 2% 10%;
}
.product-column .product-3 img{
  width: 100%;
  height: auto;
 margin: 0 10%;
}
.product-image #image2, #image3, #image4, #image5, #image6, #image7, #image8, #image9, #image10{
  display:none;
}
.product-image .image2, .image3, .image4, .image5, .image6, .image7, .image8.image9, .image10{
display: none;
}

.product-column .product-image img.new-balance{
    margin: 8% 4%;
}
.product-column .tshirt{
    margin: 2% 10%;
}
.product-column .tshirt img{
    width: 450px;
    height: 500px; 
}
.product-column .clothes img{
    width: 400px;
    height: 500px;
    margin: 2% 10%;
}
.product-column .product-image img:hover{
    transform: scale(1.1);
    cursor: zoom-in;
    transition: 0.5s ease-in-out;
}
.product-image img.new-balance{
    height: 400px;
}
.product-column .small-images{
   box-shadow: 1px 1px 4px black;
   background: whitesmoke;
    margin: 2%;
    max-height: 500px;
    width: 150px;
    overflow: scroll;
}
.product-column .clothes{
    margin-left: 15%;
}
.product-column .small-images img{
    width: 100px;
    height: 100px;
    display: flex;
    cursor: pointer;
    padding: 5px;
    margin: 0 auto;
}

.product-column .small-images img.image-1{
    height: 60px;
}
.product-column .small-images img.small-image-5{
    width: 110px;
    height: 100px;
    padding: 0;
}
.product-column .small-images img:hover{
    border: 1px black solid;
}
.product-column .product-description{
   box-shadow: 0 0 4px black;
   background: whitesmoke;
   width: 30%;
   margin: 2%;
}

.product-column .product-description h2{
    font-size: 30px;
    font-weight: bold;
    padding: 12px;
}
.product-description p{
    margin: 15px 10px;
    font-size: 18px;
    text-align: left;
}
.product-description p i.fa-star{
 color: orange;
 font-size: 20px;
}
.product-description p i.fa-star.blackstar{
    color: black;
}
.product-column select{
    width: 95%;
    height: 40px;
    padding: 5px;
    margin: 10px;
    font-weight: bold;
    -webkit-appearance: none;
  
}
/*........................................................................................*/
.product-details .titles ul{
    display: flex;
    float: left;
}
.product-details .titles ul li{
    text-decoration: none;
    list-style: none;
    margin: 5px 100px;
    color: black;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}
.product-details .titles ul i.fa-star{
    color: orange;
}
.product-details .titles ul i.blackstar{
    color: black;
}
.product-details .titles ul li span{
    color: orangered;
}

.product-details .titles .title-1:hover{
    text-decoration: none;
}
.product-description .product-size ul {
    text-align: center;
    justify-content: center;
    align-items: center;
}
.product-description .product-size ul li{
    list-style: none;
   float: left;
   display: flex;
   border: 1px black solid;
   border-radius: 50%;
   margin: 5px;
   padding: 12px;
   font-size: 18px;
   cursor: pointer;
}
.product-description .product-size ul li:hover{
  opacity: 0.5;
    transition: 0.4s;
}
.product-description .product-size span{
    font-weight: bold;
    font-size: 25px;
}
.product-description .product-size{
    float: left;
    text-align: left;
}
.product-description .chart{
    font-size: 18px;
    color:rgb(0, 98, 255);
    margin: 5% 40%;
}
/*......................................Product Add to Cart Button..........................*/
.product-description .add-cart-btn{
    width:100% ;
    height: 40px;
    background-color: orangered;
    color: black;
    font-weight: bold;
    font-size: 18px;
    border: none;
    bottom: 0;
    cursor: pointer;
    margin: 10% 0;
}
.product-description .add-cart-btn:hover{
   opacity: 0.5;
    transition: 0.2s;
}
.product-description .add-cart-btn i.fa-solid{
    float: left;
    font-size: 22px;
    color: black;
    margin: 0 6%;
}
.product-description .add-cart-btn span{
    text-decoration: line-through 3px white;
    padding: 0 4px;
}
.product-description button{
    width: 100%;
    display: flex;
    margin: 5% 0;
    background: black;
    height: 40px;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    justify-content: center;
    align-items: center;
}
.product-description button:hover{
opacity: 0.5;
transition: 0.5s;
}
.product-description button i.fa-solid{
    margin: 0 5%;
}
/*..........................................................................................................*/
.product-details{
    margin: 20px 20px;
  border: 1px grey solid;
}
.product-details .details-page{
    display: block;
    transition: 0.5s ease-in;
    transition-duration: 1s;
}
.product-details .size-page{
    display: none;
    transition: 0.5s ease-in;
    transition-duration: 1s;
}
.product-details .product-reviews{
    display: none;
}
.product-details .product-reviews h2{
margin: 5px 25%;
font-size: 32px;
}
.product-details .product-reviews h4{
    color: black;
    margin: 5px 10px;
}
.product-details .product-reviews i.fa-x{
    color:black;
    font-size: 15px;
   background:orangered;
    border-radius: 50%;
    padding: 2px;
    cursor: pointer;
}
.product-details .product-reviews a{
    text-decoration: underline black;
    font-size: 18px;
    margin: 0 10px;
}
.product-details .product-reviews a.translate{
    text-decoration: none;
    color:blue;
}
.product-details .product-reviews a.translate:hover{
    text-decoration: underline 2px solid;
    transition: 0.5s;
}
.product-details .product-reviews i.fa-x:hover{
    color: white;
    transition: 0.5s;
    background: black;
}
.product-details .product-reviews p i.fa-star{
    color: orange;
}
.product-details .product-reviews p i.blackstar{
    color: grey;
}
.product-details .product-reviews p i.like{
    color: orangered;
    font-size: 18px;
    cursor: pointer;
}
.product-details .product-reviews p span.like{
    font-size: 18px;
    font-weight: bold;
}
.product-details .product-reviews p i.like:hover{
    color: black;
    transition: 0.5s;
}
.product-details .product-reviews button{
    font-size: 20px;
    height: 50%;
    width: 360px;
    font-weight: bold;
    padding: 10px 0;
    margin: 10px 36px;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    border-radius: 2px;
}
.product-details .product-reviews button img{
width:15%;
float: left;
height: 10%;
margin: 5px 20px;
}
.product-reviews .review-comments{
    margin: 4% 0 1%;
}
/*....................................Review //Load more Buttons ........................*/

.product-reviews a.btn41-43 {
    padding: 10px 25px;
    background: transparent;
    outline: none !important;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
    text-decoration: none;
    font-size: 22px;
    font-weight: bold;  
  }
  
  .btn-41 {
    border: 4px solid orangered;
    border-radius: 4px;
    z-index: 1;
    color:black;
  }
  
  .btn-41:after {
    position: absolute;
    content: "";
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    direction: rtl;
    z-index: -1;
    background:orangered;
    transition: all 0.3s ease;
  }
  
  .btn-41:hover {
    color: rgb(0, 0, 0);
  }
  
  .btn-41:hover:after {
    left: auto;
    right: 0;
    width: 100%;
  }
  
  .btn-41:active {
    top: 2px;
  }

  .product-reviews a.load-more-btn{
    margin-left: 42%;
  }
  .product-reviews a.add-review-btn{
    margin-left: 20%;
    border: orangered 4px solid;
    cursor: pointer;
}
.product-reviews button.add-review-btn:hover{
    background: orangered;
    opacity: 0.8;
    transition: 0.4s;
}
/*.......................................................Ratings /// Reviews...........................*/
.product-reviews .row{
    float: left;
    width: 28%;
    margin: 20px 12px 0;
}

.product-reviews .rate-product p i.fa-star{
    background: none;
    font-size: 25px;
    padding: 10px;
    margin: 5px;
    border: 1.4px solid grey;
    cursor: pointer;
}
.product-reviews .rate-product p i.fa-star:hover{
    color: orangered;
    background: grey;
}
.product-reviews p.bigtext{
    font-size: 100px;
    font-weight: bold;
}
.product-reviews .summary-rates{
  float: left;
    
}
.product-reviews .row p i.fa-star{
    font-size: 20px;
    cursor: pointer;
}
.product-reviews .row p i.fa-star .black{
    color: black;
}

/*.......................................................volume bars.....................................*/

.volume-bars {
    display: flex;
    flex-direction: column;
  }

  .volume-bar {
    margin-bottom: 10px;
  }

  .bar-label {
    font-weight: bold;
  }

  .bar {
    width: 300px;
    height: 20px;
    background-color: grey;
    position: relative;
    border-radius: 2px;
  }

  .fill-bar {
    height: 100%;
    background-color: orangered;
    position: absolute;
  }
/*.........................................................................................................*/
.product-details p{
margin: 20px;
text-align: left;
justify-content: left;
}
.product-details .size-choices select{
    width: 25%;
   height: 40px;
   outline: none;
   border: 1px grey solid;
   border-radius: 2px;
   margin:5px 30px;
   display: flex;
}
.product-details .size-choices span{
    font-weight: bold;
    font-size: 18px;
    margin: 5px;
}
section .column-2 {
    margin: 1% 1%;
}
section  h1{
    font-size: 36px;
    text-align: center;
    font-weight: bold; 
}
section h1 span{
    text-decoration: underline 5px orangered;
}
/*.........................................................Title Underlines..........................*/
.product-details .titles li.title-1::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 120px;
    margin-top: 2%;
    margin-left: -6%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
.product-details .titles li::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    margin-top: 2%;
    margin-left: -7%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
@keyframes underline{
    from{ width: 0px;}
    to{ width: 50px;}
}
.product-details .titles li:hover::after{
  width: 120px;
}

/*...............................................................................................*/
.product-details .titles li.review::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 0px;
    margin-top: 2%;
    margin-left: -18%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
@keyframes underline{
    from{ width: 0px;}
    to{ width: 50px;}
}
.product-details .titles li.review:hover::after{
  width: 300px;
}

/*.......................................Like // Deslike Buttons...............................................*/
.like-dislike-container {
  --dark-grey: #353535;
  --middle-grey: #767676;
  --lightest-grey: linear-gradient(#fafafa,#ebebeb);
  --shadow: 0 5px 15px 0 #00000026;
  --shadow-active: 0 5px 5px 0 #00000026;
  --border-radius-main: 10px;
  --border-radius-icon: 50px;
  position: relative;
  display: flex;
  text-align: center;
  flex-direction: column;
  align-items: center;
  cursor: default;
  color: var(--dark-grey);
  opacity: .9;
  margin: auto;
  padding: 1.5rem;
  font-weight: 600;
  background: var(--lightest-grey);
  max-width: max-content;
  border-radius: var(--border-radius-main);
  box-shadow: var(--shadow);
  transition: .2s ease all;
}

.like-dislike-container:hover {
  box-shadow: var(--shadow-active);
}

.like-dislike-container .tool-box {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  top: 0;
  right: 0;
  border-radius: var(--border-radius-main);
}

.like-dislike-container .btn-close {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: .8rem;
  height: .8rem;
  color: transparent;
  font-size: 0;
  cursor: pointer;
  background-color: #ff000080;
  border: none;
  border-radius: var(--border-radius-main);
  transition: .2s ease all;
}

.like-dislike-container .btn-close:hover {
  width: 1rem;
  height: 1rem;
  font-size: 1rem;
  color: #ffffff;
  background-color: #ff0000cc;
  box-shadow: var(--shadow-active);
}

.like-dislike-container .btn-close:active {
  width: .9rem;
  height: .9rem;
  font-size: .9rem;
  color: #ffffffde;
  --shadow-btn-close: 0 3px 3px 0 #00000026;
  box-shadow: var(--shadow-btn-close);
}

.like-dislike-container .text-content {
  margin-bottom: 1rem;
  font-size: 18px;
  line-height: 1.6;
  cursor: default;
}

.like-dislike-container .icons-box {
  display: flex;
}

.like-dislike-container .icons {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: .6;
  margin: 0 0.5rem;
  cursor: pointer;
  user-select: none;
  border: 1px solid var(--middle-grey);
  border-radius: var(--border-radius-icon);
  transition: .2s ease all;
}

.like-dislike-container .icons:hover {
  opacity: .9;
  box-shadow: var(--shadow);
}

.like-dislike-container .icons:active {
  opacity: .9;
  box-shadow: var(--shadow-active);
}

.like-dislike-container .icons .btn-label {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  position: relative;
}

.like-dislike-container .like-text-content {
  border-right: 0.1rem solid var(--dark-grey);
  padding: 0 0.6rem 0 0.5rem;
  pointer-events: none;
}

.like-dislike-container .dislike-text-content {
  border-left: 0.1rem solid var(--dark-grey);
  padding: 0 0.5rem 0 0.6rem;
  pointer-events: none;
}

.like-dislike-container .icons .svgs {
  width: 1.3rem;
  fill: #000000;
  box-sizing: content-box;
  padding: 10px 10px;
  transition: .2s ease all;
}

/* Hide the default checkbox */
.like-dislike-container .icons .input-box {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.like-dislike-container .icons #icon-like-regular {
  display: block;
}

.like-dislike-container .icons #icon-like-solid {
  display: none;
}

.like-dislike-container .icons:hover :is(#icon-like-solid, #icon-like-regular) {
  animation: rotate-icon-like 0.7s ease-in-out both;
}

.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-regular {
  display: none;
  animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #like-checkbox:checked ~ #icon-like-solid {
  display: block;
  animation: checked-icon-like 0.5s;
}

.like-dislike-container .icons #icon-dislike-regular {
  display: block;
  transform: rotate(180deg);
}

.like-dislike-container .icons #icon-dislike-solid {
  display: none;
  transform: rotate(180deg);
}

.like-dislike-container .icons:hover :is(#icon-dislike-solid, #icon-dislike-regular) {
  animation: rotate-icon-dislike 0.7s ease-in-out both;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-regular {
  display: none;
  animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ #icon-dislike-solid {
  display: block;
  animation: checked-icon-dislike 0.5s;
}

.like-dislike-container .icons .fireworks {
  transform: scale(0.4);
}

.like-dislike-container .icons #like-checkbox:checked ~ .fireworks > .checked-like-fx {
  position: absolute;
  width: 10px;
  height: 10px;
  right: 40px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

.like-dislike-container .icons #dislike-checkbox:checked ~ .fireworks > .checked-dislike-fx {
  position: absolute;
  width: 10px;
  height: 10px;
  left: 40px;
  border-radius: 50%;
  box-shadow: 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
   0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 
   0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
   0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 
    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 
    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 
    0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff,
     0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff, 0 0 #fff;
  animation: 1s fireworks-bang ease-out forwards, 1s fireworks-gravity ease-in forwards, 5s fireworks-position linear forwards;
  animation-duration: 1.25s, 1.25s, 6.25s;
}

/* Shake Animation */
@keyframes rotate-icon-like {
  0% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(3deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(-3deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(1deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(0deg) translate3d(0, 0, 0);
  }
}

@keyframes rotate-icon-dislike {
  0% {
    transform: rotate(180deg) translate3d(0, 0, 0);
  }

  25% {
    transform: rotate(183deg) translate3d(0, 0, 0);
  }

  50% {
    transform: rotate(177deg) translate3d(0, 0, 0);
  }

  75% {
    transform: rotate(181deg) translate3d(0, 0, 0);
  }

  100% {
    transform: rotate(180deg) translate3d(0, 0, 0);
  }
}

/* Checked Animation */
@keyframes checked-icon-like {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(-10deg);
  }
}

@keyframes checked-icon-dislike {
  0% {
    transform: scale(0) rotate(180deg);
    opacity: 0;
  }

  50% {
    transform: scale(1.2) rotate(170deg);
  }
}

/* Fireworks Animation */
@keyframes fireworks-position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%;
  }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%;
  }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%;
  }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%;
  }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%;
  }
}

@keyframes fireworks-gravity {
  to {
    transform: translateY(200px);
    opacity: 0;
  }
}

@keyframes fireworks-bang {
  to {
    box-shadow: 114px -107.3333333333px #8800ff, 212px -166.3333333333px #a600ff, 197px -6.3333333333px #ff006a,
     179px -329.3333333333px #3300ff, -167px -262.3333333333px #ff0062, 233px 65.6666666667px #ff008c, 
     81px 42.6666666667px #0051ff, -13px 54.6666666667px #00ff2b, -60px -183.3333333333px #0900ff, 127px -259.3333333333px #ff00e6,
      117px -122.3333333333px #00b7ff, 95px 20.6666666667px #ff8000, 115px 1.6666666667px #0004ff, -160px -328.3333333333px #00ff40, 
      69px -242.3333333333px #000dff, -208px -230.3333333333px #ff0400, 30px -15.3333333333px #e6ff00, 235px -15.3333333333px #fb00ff, 
      80px -232.3333333333px #d5ff00, 175px -173.3333333333px #00ff3c, -187px -176.3333333333px #aaff00, 4px 26.6666666667px #ff6f00, 227px -106.3333333333px #ff0099, 
      119px 17.6666666667px #00ffd5, -102px 4.6666666667px #ff0088, -16px -4.3333333333px #00fff7, -201px -310.3333333333px #00ffdd, 64px -181.3333333333px #f700ff, 
      -234px -15.3333333333px #00fffb, -184px -263.3333333333px #aa00ff, 96px -303.3333333333px #0037ff, -139px 10.6666666667px #0026ff, 25px -205.3333333333px #00ff2b, 
      -129px -322.3333333333px #40ff00, -235px -187.3333333333px #26ff00, -136px -237.3333333333px #0091ff, -82px -321.3333333333px #6a00ff, 7px -267.3333333333px #ff00c8,
       -155px 30.6666666667px #0059ff, -85px -73.3333333333px #6a00ff, 60px -199.3333333333px #55ff00, -9px -289.3333333333px #00ffaa, -208px -167.3333333333px #00ff80, 
       -13px -299.3333333333px #ff0004, 179px -164.3333333333px #ff0044, -112px 12.6666666667px #0051ff, -209px -125.3333333333px #ff00bb, 14px -101.3333333333px #00ff95,
        -184px -292.3333333333px #ff0099, -26px -168.3333333333px #09ff00, 129px -67.3333333333px #0084ff,
         -17px -23.3333333333px #0059ff, 129px 34.6666666667px #7300ff, 35px -24.3333333333px #ffd900, 
        -12px -297.3333333333px #ff8400, 
        129px -156.3333333333px #0dff00, 157px -29.3333333333px #1a00ff, -221px 6.6666666667px #ff0062, 0px -311.3333333333px #ff006a, 155px 50.6666666667px #00ffaa,
         -71px -318.3333333333px #0073ff;
  }
}

/*...................................... //Newsletter...............................................*/
.newsletter-form {
  display: flex;
  flex-direction: column;
  background: #606c88;
  background: -webkit-linear-gradient(to right, #3f4c6b, #606c88);
  background: linear-gradient(to right, #3f4c6b, #606c88);
  padding: 20px;
  border-radius: 10px;
  max-width: 330px;
  margin: auto;
}

.newsletter-form .newsletter-title {
  font-size: 2rem;
  line-height: 2rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: #fff;
  text-align: center;
}

.newsletter-form .description {
  text-align: center;
  font-size: 1rem;
margin: auto;
  color: rgb(209 213 219);
}

.newsletter-form div {
  display: flex;
  max-width: 25rem;
  margin-top: 1rem;
  column-gap: 0.5rem;
}

.newsletter-form div input {
  outline: none;
  max-width: 180px;
  line-height: 1.5rem;
  font-size: 0.875rem;
  color: rgb(255 255 255 );
  padding: 0.5rem 0.875rem;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgba(253, 253, 253, 0.363);
  border-radius: 0.375rem;
  flex: 1 1 auto;
}

.newsletter-form div input::placeholder {
  color: rgb(216, 212, 212);
}
.newsletter-form div input:hover{
   border: 1px solid rgb(99 102 241);
}
.newsletter-form div input:focus {
  border: 1px solid rgb(99 102 241);
}

.newsletter-form div button {
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.25rem;
  padding: 0.625rem 0.875rem;
  background: rgb(59, 63, 254);
  border-radius: 0.375rem;
  border: none;
  outline: none;
  cursor: pointer;
  width: auto;
}
.newsletter-form div button:hover{
  opacity: 0.6;
}
:popover-open {
  position: fixed;
  inset: 0;
  width: fit-content;
  height: fit-content;
  margin: auto;
  border: solid blue;
  padding: 0.25em;
  background-color: orangered;
}
button.close-popover{
  cursor: pointer;
  margin: 12px;
}
dialog{
  border: none;
  margin: auto;
}
/*...................................................Footer section-.................................................*/
footer.main-footer{
    background: #1e293b;
    height: auto;
    width: 100%;
    margin: 2% 0 0;
}
footer.product-footer{
    background:#334155;
    height: auto;
    width: 100%;
    margin:0 0 0;
}
footer .first-row{
    padding-top: 2% ;
    display: flex;
    justify-content: space-around;
}
footer .first-row a{
    color: white;
    font-weight: 500px;
    font-size: 18px;
    text-decoration: none;
    display: flex;
    float: left;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    margin-left: 30px;
    background: rgb(44, 42, 42);
    width: 250px;
    height: 60px;
    border-radius: 4px;
}
footer .first-row i{
    font-size: 25px;
}
footer .first-row a:hover{
    background: grey;
    opacity: 0.8;
}


footer .logos{
    display: flex;
    justify-content: space-between;
    margin-top: 5%;
    cursor:pointer;
}
footer .logos img{
    width: 140px;
    display: flex;
    float: left;
    mix-blend-mode: screen;
}
footer .logos p{
    color: white;
    font-size: 20px;
    font-weight: bold;
    padding-right: 3%;
    margin-top: 4%;
}
p.griffintechs{
  opacity: .4;
  font-size: 16px;
}
p.griffintechs span{
  font-size: 14px;
}
/*................................................User ratings...........................*/
.user-rates-1{
    display: none;
}

.user-rates p{
   font-size: 18px;
   text-align: center;
   justify-content: center;
   align-items: center; 
   margin:4% 0;
}
.user-rates .rates{
    text-align: center;
    box-shadow: 1px 1px 2px orangered, -1.5PX -1.5PX 2PX orange;
    width: 20%;
    background: black;
    color: white;
    border-radius: 5px;
    margin: auto;
    margin-top: -4%;
    padding: 14px;
}
.rates span.one{
    font-size: 20px;
    font-weight: bold;
}
.rates i{
    color: rgb(216, 142, 6);
    font-size: 20px;
}
/*......................................................................................*/
  /*..........................................footer links..............................*/
  .footer-links{
    display: flex;
    margin: 2%;
  }
  .footer-links h2{
    color: whitesmoke;
    justify-content: left;
    text-align: left;
    margin:0 auto 16px;
    font-size: 16px;
  }
  .footer-links h3{
    color:orangered;
    font-weight: bold;
    justify-content: left;
    text-align: left;
    margin:0 auto 16px;
    font-size: 16px;
  }
  .footer-links h5{
    text-decoration: underline 5px orangered solid;  
    margin: -8px 12px 12px;
    display: none;
  }
  .footer-column{
    float: left;
    width: 50%; 
  }
.footer-column a{
    color: white;
    font-size: 14px;
    text-decoration: none;
    margin:12px 0;
   text-align: left;
}
.footer-column a:hover{
    color: orangered;
}
  .social-media .fa-brands{
    font-size: 18px;
    color: white;
    margin: 2%;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 0px orange;
    width: 30px;
    height: 30px;
    padding: 7px;
  }
  .social-media .fa-brands:hover{
   color: orangered;
   opacity: 0.5;
  }
  .payment-methods img{
    height: 40px;
    width: 50px;
    border-radius: 4px;
   margin: 2% 5%;
cursor: pointer;
  }
  .help-center a.account{
color: orangered;
font-size: 20px;
user-select: none;
  }
  .help-center a.account:hover{
    color: whitesmoke;
  }
/*..................................................Terms and Policies...................................*/
/*.........................................................................................................*/
section.Terms-and-Policies{
margin: 5% 5%;
}
section .Terms-and-Policies p span{
    font-weight: bold;
}
.Terms-and-Policies ol.question-list li{
    margin: 12px 15%;
}
.Terms-and-Policies ol.question-list li a{
color: black;
font-weight: bold;
font-size: 18px;
text-decoration: none;
}
.Terms-and-Policies ol.question-list li a:hover{
  color: orangered;
}
section.Terms-and-Policies ul li span{
  font-weight: bold;
  font-size: 20px;
}
/*...........................................Download our App..............................................................*/

.app-card {
  max-width: 350px;
  background-color: rgb(7 16 45);
  background: linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  background: -webkit-linear-gradient(to top right, rgb(7 16 45), rgb(58 60 84));
  display: flex;
  flex-direction: column;
  padding: 20px;
  border-radius: 20px;
  border: 1px solid rgb(84 90 106);
}

.small-text, .title,.desc {
  font-weight: 600;
}

.title,.desc {
  margin: 8px 0;
}

.small-text {
  color: #488aec;
  font-size: 16px;
  text-align: center;
}

.app-title {
  color: #fff;
  font-size: 24px;
  line-height: 26px;
}

.desc {
  color: rgb(151 153 167);
  font-size: 14px;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
}

.button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 10px;
  padding: 6px;
  opacity: 1;
  text-decoration: none;
}
.button:hover{
  opacity: 0.6;
  transition: 0.4s;
}

.button:first-child {
  box-shadow: 0 4px 6px -1px #488aec31, 0 2px 4px -1px #488aec17;
  background-color: #0b62e5;
  width: 150px;
  height: 60px;
}

.button:last-child {
  box-shadow: 0 4px 6px -1px #0b162531, 0 2px 4px -1px #0e192b17;
  background-color: #fff;
  width: 150px;
  height: 60px;
}

.icon {
  height: 25px;
  width: 25px;
}

.icon svg {
  width: 100%;
  height: 100%;
}

.icon svg:last-child {
  fill: #000
}

.button-text {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}

.button-text span:first-child {
  font-size: 12px;
  font-weight: 600;
 text-align: center;
 float: left;
}

.google span:first-child {
  color: rgb(219 206 253);
  font-size: 12px;
  margin-left: -12px;
}

.apple span:first-child {
  color: rgb(81 87 108);
  margin-left: -12px;
  font-size: 13px;
}

.google span:last-child {
  color: #fff;
  font-weight: 800;
}

.apple span:last-child {
  color: #000;
  font-weight: 800;
}
/*..................................................ABOUT US..............................................*/
/*.........................................................................................................*/
section.about-us{
    margin: 8% 20%;
}
.nike-page .social_icon{
  display: none;
}
  /*.............................................Footer title underlines......................*/
  footer .footer-links h2.title-1::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 80px;
    margin-top: 1.6%;
    margin-left: -8%;
}
footer .footer-links h2.title-2::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 60px;
    margin-top: 1.6%;
    margin-left: -4%;
}
footer .footer-links h2.title-3::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 80px;
    margin-top: 1.6%;
    margin-left: -6%;
}
footer .footer-links h2.title-4::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 75px;
    margin-top: 1.6%;
    margin-left: -6%;
}
footer .footer-links h2.title-5::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 80px;
    margin-top: 1.6%;
    margin-left: -9%;
}
footer .footer-links h2.title-6::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 3px;
    width: 80px;
    margin-top: 1.6%;
    margin-left: -6%;
}
  /*.........................................last row.................................*/
  footer .last-row{
    background:var(--dark-grey);
    width: 75%;
    height: 15vh;
    bottom: 0;
    left: 0;
    margin: auto;
    border-top: 1px solid darkred;
    margin-top: 20PX;
  }

  .last-row p{
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 10px;
  }
  .last-row p span{
color: orangered;
margin-bottom: 5px;
  }


/*..................................................................Star rates.....................................*/
  .container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
  }
  
  .container {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
  }
  
  .container svg {
    position: relative;
    top: 0;
    left: 0;
    height: 50px;
    width: 50px;
    transition: all 0.3s;
    fill: #666;
  }
  
  .container svg:hover {
    transform: scale(1.1);
  }
  
  .container input:checked ~ svg {
    fill: #ffeb49;
  }





  /* ....................................Media querry for Extra small devices (phones, 600px and down) ............................*/

  /*.......................................Media querry for menu....................................................................*/
  @media only screen and (max-width:600px){
   .navbar{
    width: 100%;
   }
    .nav-elements img.website-logo{
    height:90px;
    width: 160px;
    display: flex;
    mix-blend-mode: screen;
    margin: 5% 0;
    }
    .nav-elements form{
        display: none;
    }
    .nav-elements .navbar-link{
        display: none;
    }
    .nav-elements .languages{
        display: none;
    }
    .nav-elements .user{
        display: none;
    }
 
    .nav-elements a.home{
        display: none;
    }
    .nav-elements a.home-link{
        display: block;
        color: brown;
        text-align: center;
        align-items: center;
    }
    .nav-elements a.about{
        display: none;
    }
    .nav-links{
        display:none;
    }
    .other-links{
      display: none;
      float: left;
    }
    .column{ 
    display: contents;
    }
    .user-profile{
      display: none;
    }
    /*-----------------------------------------------Shopping cart-----------------------------*/
    .nav-elements .shoppingcart{
        font-size: 36px;
        color: brown;
        display: flex;
        float: right;
    }
.shopping-cart{
    margin: -4% 0 3%;
    height: 50vh;
}
.shopping-cart hr{
    display: block;
}
.shopping-cart h1::after{
    margin: 2% -4%;
}
.shopping-cart .cart-btns button{
    height: 36px;
}
    .nav-elements a.home::after{
        content: '';
        position: absolute;
        background: linear-gradient(90deg,red, blue, orangered);
        background-clip: content-box;
        color: transparent;
        border-radius: 1px;
        height: 5px;
        width: 0px;
        margin-left: 10px;
        top: 8%;
        display: flex;
        transition: 0.5s;
        transition-duration: 0.2s;
        animation: underline;
        animation:infinite ease;
}
/*...............................................Menu---------------------------------------------------*/
.navbar .menu{
    display: block;
    margin:7% 2%;
    color: brown;
    justify-content: center;
    text-align: center;
    align-items: center;
    font-size: 36px;
    font-weight: bold;
    float: left;
    display: flex;
}

.menu-links{
  display: none;
    background:white;
    width: 100%;
    height: 72vh;
    margin-top: -5%;
    margin-bottom:-8px;
    overflow-y: hidden;
}
.menu-links-other-pages{
    margin-bottom: 12px;
}
.menu-links .account-link{
    background: black;
    color: white;
    width: 100%;
    height: 7vh;
    margin: -5px auto;
    text-align: center;
    align-items: center;
}
.menu-links .account-link a{
    color:white;
    font-size: 25px;
    font-weight: bold;
    text-decoration: none;
    display: flex;
    margin: 10px 5px;
}
.menu-links .account-link a i.fa-user{
    color: white;
    font-weight: bold;
    font-weight: 500px;
    margin: 2px 6px;
    text-align: center;
    font-size: 24px;
    justify-content: center;
}
.menu-links .account-link a span{
    margin:0 6px;
}
.menu-links i.fa-x{
  font-size: 24px;
  font-weight: bold;
  color: brown;
  float: right;
  margin:8px auto;
  margin-right: 12px;
  border-radius: 50%;
  padding: 6px 8px;
  box-shadow: -1px 1px 4px brown;
}

.menu-links ul li{
    list-style: none;
    margin:15px 12px;
    display: flex;
}
.menu-links ul.small-device-menu-links i{
  color:grey;
  margin-right: 18px;
  font-size: 18px;
}

.menu-links ul li a{
    font-size: 25px;
    color: black;
    text-decoration: none;
    background: none;
}
.menu-links ul h2{
    text-align: center;
    font-size: 28px;
}
.menu-links ul li a.link{
    font-size: 20px;
}
.menu-links ul button.logout{
  border: none;
  background: linear-gradient( to right, orangered,brown);
  border-radius: 4px;
  height: 35px;
  width: 140px;
  padding: 4px;
  cursor: pointer;
  font-size: 18px;
  color: white;
  font-weight: bold;
  text-align: center;
  justify-content: center;
  margin: 12px;
}
.menu-links ul a.loginBtn{
color: white;
font-weight: bold;
text-decoration: none;
}
.menu-links ul button.logout i{
  margin-left: 8px;
  color: black;
}
.menu-links button.close-menu{
    color: white;
    border: 1px solid black;
    display: none;
}

    /*...............................................Media querry for main body..........................*/
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    main .section1{
        height: 60px;
        margin-top: -15px;
    }
.column-1{
    display: none;
}
.column-2{
    display: contents;
   padding: 20px;
   width: auto;
   border-radius: 5px;
}
    main .section1 img{
        width: 60px;
        height: 50px;
    }
    @keyframes slide {
        0% {
          left: 0px;
        }
        15% {
          left: 50px;
          transform: scale(1.1);
        }
        20% {
          left: -108px;
        }
        32% {
          left: -108px;
    
        }
        35% {
          left: -216px;
        }
        50% {
          left: -250px;
        }
        100% {
          left: 100px;
        }
    }
    .brands img{
        width: 5opx;
        height: 40px;
        margin: 4px;
        justify-content: space-between;
    }

    .links{
      margin-left: -15px;
       text-align: center;

    }
    .links a{
      font-weight: bold;
      margin-left: -1px;
        font-size: 18px;
    }
/*.................................................Nike collections //Deals Page............................................*/
    .deals-page{
      background: orangered;
      width: 100%;
      padding: 30px 0;
    }
    .deals-page h1{
      font-size: 36px;
    }
  
    .nike-page .nike-collection{
      overflow-x: scroll;
    }
    .nike-page .nike-collection .nike-header h1{
      font-size: 60px;
      top: 0;
    }
    .nike-page .nike-collection .nike-header h1 span{
      font-size: 40px;
      margin-left: 10px;
    }
    .nike-page .nike-collection p{
      text-align: center;
      line-height: 12px;
      top: 8px;
      float:calc(-50%);
    }
    .nike-page .nike-collection .main_image img{
      background-image: url(Images/Nike-page/BackgroundImage-removebg-preview.png);
      background-size: cover;
      background-repeat: no-repeat;
      width: 250px;
      position: relative;
      left: -10%;
      top: 50px;
      opacity: 0.6;
    }
    .nike-page .social_icon{
      position: absolute;
      top: 70%;
      left: 95%;
      transform: translate(-50%,-50%);
      font-size: 20px;
    }

  /*...............................................Media querries for testimony section...........................*/

    .testimony-section{
      display: none;
    }
   
  /*...............................................Media querries for company logo section...........................*/

  .company-logos{
    display: none;
  }
       /*...............................................Media querries for product cards...........................*/
       .card{
        width: 280px;
        margin-top: 5%;
        margin-left: 15%;
        margin-bottom: 4%;
        height: 400px;
        align-items: center;
        justify-content: center;
        text-align: center;
       }
       .card img{
        width: 100px;
        height: 100px;
       }
       .card .small-imgs img{
        width: 50px;
        height: 40px;
        margin: auto;
       }
.item1 .small-imgs{
 display: contents;
}
.card .item1 button{
    margin-left: 16%;
    margin-top: 20%;
}
.card button{
    margin: auto;
    position: relative;
    width: 200px;
    margin-left: 9%;
    bottom: 0;
    display: flex;

}
.card .Nike-green p button{
    margin-top: 20% ;
}
.card h2{
    font-size: 18px;
}
.user-rates.rates{
       display: flex;
    }


.size-page .size-choices select{
    width: 50%;
    margin: 12px auto;
}
/*...............................................Media querries for footer section...........................*/
    footer.main-footer{
        width: 100%;
    }
.site-info{
        display: contents;
        width: fit-content;
    }
    .site-info p{
         font-size: 14px;
         margin: auto;
        }

  footer .first-row{
    display: inline-block;
  }
.first-row a i{
    margin-right: 5px;
}
  footer .first-row a{
    margin: 12px 16%;
    justify-content: center;
    text-align: center;
    align-items: center;
    height: 60px;
  }
  footer .footer-column{
   float: none;
   width: 100%;
   text-align: center;
   justify-content: center;
   align-items: center;
   margin: auto;
   margin-left: 5%;
  }
  footer .footer-column h2{
    font-size: 18px;
    text-align: center;
    margin: 10px;
    letter-spacing: 3px;
  }
  footer .footer-column h2.title-2{
    letter-spacing: 5px;
  }
  footer .footer-column h3{
    text-align: center;
  }
  /*.....................title under lines.............................*/
  footer .footer-column h2.title-1::after{
    margin-top: 6%;
    margin-left: -40%;
    width: 80px;
  }
  footer .footer-column h2.title-2::after{
    margin-top: 6%;
    margin-left: -15%;
    width: 40px;
  }
  footer .footer-column h2.title-3::after{
    margin-top: 6%;
    margin-left: -22%;
    width: 45px;
  }
  footer .footer-column h2.title-4::after{
    margin-top: 6%;
    margin-left: -25%;
    width: 50px;
  }
  footer .footer-column h2.title-5::after{
    margin-top: 6%;
    margin-left: -36%;
    width: 60px;
  }
  footer .footer-column h2.title-6::after{
    margin-top: 6%;
    margin-left: -28%;
    width: 60px;
  }
  .footer-links{
    display: inline-block;
  }


  .user-rates-1{
    display: block;
}
 .user-rates{
    display: none;
 }
 footer .logos img{
    height: 50px;
    width: 80px;
 }
footer .logos p{
    font-size: 18px;
    width: fit-content;
    margin-left: 5px;
 }
 footer .logos p span{
    display: none;
 }

   /*.................................................Order status...............................................*/
.order-status form button{
  margin: auto;
}

 /*.......................................login page...............................................*/
.wrapper{
margin:auto auto 52%;
width: auto;
height: 460px;
width: 100%;
  
}
section .bkg-images img{
margin: auto;  
display: none;
}
.login-form .create-account{
    font-size: 18px;
    width: auto;
    margin: auto;
}
.signup-form label p{
   margin-left: 5px;
}

/*.................................................................Other pages.........................*/
.product-column{
    display: contents;
}
.product-image #image2, #image3, #image4, #image5, #image6, #image7, #image8{
  display:none;
}
.product-image .image2, .image3, .image4, .image5, .image6, .image7, .image8{
display: none;
}
.product-column .product-image img{
    width: 240px;
    height: 250px;
    margin: auto;
    display:flex;
}
.product-column .product-image img.new-balance{
    height: 180px;
    width: 320px;
    margin: 5%;
}
.product-column .small-images{
    width: 70%;
    margin: auto;
    height: 360px;
    overflow: auto;
}
.item10 img{
  width: 100px;
  margin-top: -16%;
  height: 150px;
}
.item12 img{
  width: 150px;
  height: 220px;
  margin-top: -12%;
  margin-bottom: -15%;
}

.product-column .product-description{
    width: 90%;
    margin: 4% auto;
}

.product-column .product-description a.chart {
   text-align: center;
 margin: auto 30%;
 
}
.product-details{
    width: 90%;
    margin: auto;
}
.product-details .titles ul{
  display: inline-block;
}
.product-details .titles ul li{
    font-size: 20px;
    text-align: left;
    justify-content: left;
}
.product-details .titles ul li.title-1{
    font-size: 25px;
    margin: 2% 2%;
}
.product-details .titles ul li.title-2{
    font-size: 25px;
    margin: 5% 2%;
}
.product-details .titles .review{
    margin: 5% 20px;
    font-size: 25px;
}
.product-details .titles li.title-1::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 50px;
    margin-top: 8%;
    margin-left: -16%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
.product-details .titles li.title-2::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 50px;
    margin-top: 8%;
    margin-left: -18%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
.product-details .titles li.review::after{
    content: '';
    position: absolute;
    background:orangered;
    border-radius: 1px;
    height: 5px;
    width: 100px;
    margin-top: 8%;
    margin-left: -60%;
    float: left;
    animation: underline;
    animation: ease-in-out infinite;
    animation-duration: 0.4s;
    transition: 0.2s;
}
.product-details .titles li.review:hover::after{
    width: 240px;
    margin-left: -70%;
}
.review-comments button.nike{
    width: 100%;
    padding: 0;
    margin: auto;
}
.product-reviews h2.sub-title{
    font-size: 22px;
    margin: 4% auto;
    text-align: center;
}
.review-comments a.load-more-btn{
margin: 2% auto 2%;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.product-reviews .row{
    display: contents;
}
.product-reviews .row h3{
    text-align: center;
    font-size: 25px;
    text-decoration: underline 2px black;
}
.product-reviews .volume-bars{
    margin:auto;
    width: fit-content;
}
.product-reviews .summary-rates p{
    text-align: center;
}
.product-reviews .summary-rates .small-text p{
    justify-content: center;
    text-align: center;
}
.company-brands .col-5{
  width: 200px;

}
.company-brands .col-5 img {
  width: 80%;
}

}





  /*.................................DESIGNED  & DEVELOPED ......................................................................//
  //............................................................BY................................................................//
 //........................................................ .........GRIFFIN.......................................................//
//............................................................................TECHNOLOGIES...........................................//
//..............................................................................................2024................................../*