*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'poppins';
   text-transform: capitalize;
   text-decoration: none;
}

li {
   list-style-type: none;
   text-transform: capitalize;
}

a {
   text-decoration: none;
   color: #fff;
   /* color: red; */
   text-transform: capitalize;
}

h1,h2,h3,h4,h5,h6,p,a {
   font-family: 'poppins';
}
h1,h2,h3,h4,h5,h6 {
   color: var(--primar-clr);
}

p {
   color: var(--primar-clr-light);
}

body {
   background-color: var(--dark-clr);
}

.logo {
   font-size: 1.5rem;
   text-transform: uppercase;
   font-weight: bold;
   font-style: oblique;
   color: #fff;
}

/* Variables */
:root{
   /* padding */
   --p-xm: 4px;
   --p-sm: 10px 14px;
   --p-md: 12px 16px;
   --p-lg: 16px 24px;
   --container-pad: 60px 40px;
   --section-heading-pad: 44px 40px;

   /* margin */
   --m-xm: 4px 0;
   --m-sm: 8px 0;
   --m-md: 12px 0;
   --m-t-b: 10px 0;
   --m-t-b-md: 20px 0;

   /* color */
   --primar-clr: #fff;
   --primar-clr-light: #dedede;
   --first-gra-clr: #c32bfb;
   --second-gra-clr: #f818d2;
   --dark-clr: #12011b;
   --light-bg: #ffffff19;

   /* gradient clr */
   --gra-white : linear-gradient(45deg, #fff, #dedede);
   --gra-primary:linear-gradient(45deg, #c32bfb, #f818d2);

   /* font-size */
   --font-sm: .8rem;
   --font-nr: 1rem;
   --font-md: 1.2rem;

   /* border radius */
   --border-radius-full: 50%;
   --section-rad: 12px;
   --btn-radius: 4px;
   --card-rad: 8px;

   /* transition */
   --transition-one: all .25s ease;
   --transition-two: all .50s linear;
}

/* Customer Universal Closes */
.container {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   position: relative;
   padding: var(--container-pad);
   width: 100%;
}
.wrapper {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   position: relative;
   width: 1280px;
}

.col {
   flex: 1;
   display: flex;
   justify-content: center;
   flex-direction: column;
   position: relative;
}

figure {
   width: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
}

figure img {
   width: 100%;
   object-fit: cover;
}

.section-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 1280px;
   padding: var(--section-heading-pad);
   z-index: 100;
}

.section-heading .sub-heading {
   color: var(--primar-clr);
}

.heading-one {
   font-size: 4rem;
   text-transform: capitalize;
   color: var(--primar-clr);
}

.heading-two {
   font-size: 2.8rem;
   text-transform: capitalize;
}

.heading-three {
   font-size: 1.4rem;
   text-transform: capitalize;
}

.heading-one span,
.heading-two span {
   color: var(--first-gra-clr);
}

.btn {
   border: none;
   outline: none;
   background-image: var(--gra-primary);
   color: var(--primar-clr);
   border-radius: var(--btn-radius);
   padding: var(--p-sm);
   text-transform: capitalize;
   font-weight: 500;
   letter-spacing: 1px;
   transition: var(--transition-one);
   font-size: var(--font-nr);
   cursor: pointer;
}
.btn:hover {
   background-image: var(--gra-white);
   color: var(--dark-clr);
}

.clr-one {
   width: 800px;
   height: 800px;
   position: absolute;
   top: -250px;
   left: -400px;
   background-color: var(--first-gra-clr);
   opacity: .4;
   filter: blur(200px);
   border-radius: var(--border-radius-full);
}

.clr-two {
   width: 400px;
   height: 400px;
   background-color: var(--second-gra-clr);
   position: absolute;
   left: 50%;
   border-radius: var(--border-radius-full);
   opacity: .4;
   filter: blur(200px);
}
/* Universal End */

/* Header Section */
header {
   width: 100%;
   z-index: 1000;
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   padding: 20px 40px;
   position: fixed;
   top: 0;
   left: 0;
   background-color: var(--light-bg);
   backdrop-filter: blur(10px);
}

header .nav {
   width: 1280px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
}

header .nav .logo {
   font-size: 1.5rem;
   text-transform: uppercase;
   font-weight: bold;
   font-style: oblique;
   color: #fff;
}

.nav nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 20px;
   width: 100%;
}

.nav nav ul {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 30px;
   width: 100%;
}

.nav .nav-icon {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
}

.fa-solid {
   color: var(--primar-clr);
   transition: var(--transition-one);
   cursor: pointer;
}
.fa-solid:hover {
   color: var(--first-gra-clr);
}

header .burger_icon {
   display: none;
}

/* Hero Section */
.col-text {
   align-self: self-start;
   padding-top: 100px;
}

.col-img {
   flex: 1.8;
}

.col-img .hero-img-off {
   width: 260px;
   height: auto;
   padding: 20px 10px;
   background-color: var(--light-bg);
   backdrop-filter: blur(10px);
   word-break: break-all;
   line-height: 1.8;
   border-radius: var(--card-rad);
   position: absolute;
   bottom: 160px;
   left: 400px;
}

.col-img .hero-img-off p {
   font-size: var(--font-sm);
   color: var(--primar-clr-light);
}

.col-img .hero-img-off h3 {
   color: var(--primar-clr);
}

.hero button {
   margin: var(--m-t-b-md);
   width: 200px;
   height: 44px;
   border-radius: 30px;
}

/* new arrival section */
.arrival .col {
   border-radius: var(--card-rad);
   padding: var(--p-sm);
}

.arrival .col figure {
   border-radius: var(--btn-radius);
   background-color: var(--light-bg);
}

.col-body {
   padding: .5rem;
   width: 100%;
}

.col-body .rating-icon {
   font-size: var(--font-sm);
}

.col-body .rating-icon .fa-star {
   color: #ffd700;
}

.col-body .sub-heading {
   font-size: var(--font-sm);
   color: var(--primar-clr-light);
}

.col-body .col-footer {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin: var(--m-sm);
}

.col-body .col-footer button {
   width: 100px;
   height: 36px;
   font-size: var(--font-sm);
}

/* About Us Section */
.about .wrapper {
   z-index: 100;
}

.about .col-text .sub-heading {
   color: var(--first-gra-clr);
}

.about .col-text .about-text {
   font-size: .9rem;
   margin: var(--m-md);
}

.about .col-text .btn {
   width: 120px;
   height: 40px;
   font-size: var(--font-sm);
   margin: var(--m-t-b);
}

.get-off {
   width: 180px;
   padding: var(--p-sm);
   background-color: var(--light-bg);
   border-radius: var(--btn-radius);
   backdrop-filter: blur(10px);
   bottom: 230px;
   position: absolute;
   left: 40px;
}

.get-off p {
   word-break: break-all;
   font-size: .7rem;
}

/* Our Best Collection */
.collection .grid-wrapper {
   display: grid;
   grid-template-columns: repeat(auto-fit,minmax(280px,1fr));
   gap: 30px;
   padding: 0 30px;
   width: 1280px;
}

.collection .collection-item {
   transition: var(--transition-one);
}

.collection .grid-wrapper .col {
   background-color: var(--light-bg);
   border: 2px solid rgba(220, 35, 186, 0.386);
   /* border: 2px solid var(--gra-primary); */
   border-radius: var(--card-rad);
}

.collection .btn-col.btn {
   color: var(--primar-clr);
   transition: var(--transition-one);
}
.collection .btn-col.btn:hover {
   background-color: var(--primar-clr);
   color: var(--dark-clr);
}

.collection .btn-col {
   margin-right: 5px;
   border: none;
   outline: none;
   border: 1px solid var(--first-gra-clr);
   background-color: transparent;
   color: var(--first-gra-clr);
   width: 120px;
   height: 44px;
   border-radius: var(--btn-radius);
   letter-spacing: 1px;
   cursor: pointer;
   transition: var(--transition-one);
}

.hide {
   display: none;
}

/* Testimonial */
.testimonial .sub-heading {
   color: var(--first-gra-clr);
   font-weight: bold;
}

.testimonial .wrapper {
   gap: 30px;
   align-items: center;
}

.testimonial figure {
   width: 80px;
   height: 80px;
}

.testimonial .col {
   align-items: center;
   text-align: center;
   gap: 30px;
   padding: 1.2rem 1.4rem;
   border-radius: var(--btn-radius);
   background-color: var(--light-bg);
   backdrop-filter: blur(10px);
   z-index: 200;
}

.testimonial .col p {
   font-size: var(--font-sm);
   word-break: break-all;
}

.testimonial .col h3 {
   color: var(--first-gra-clr);
}

.testimonial .fa-star {
   color: #ffd700;
   margin-right: 4px;
}
/* .testimonial .wrapper figure {
   width: 150px;
   height: 150px;
} */

.testimonial .wrapper figure img {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
}

/* Subscribe Section */
.subscribe .wrapper {
   background-image: linear-gradient(45deg, #0202025c, #000000c3), url(/img/subs.jpg);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   flex-direction: column;
   border-radius: var(--section-rad);
   padding: 100px;
}

.subscribe form {
   display: flex;
   width: 500px;
   justify-content: center;
   align-items: center;
}

.subscribe form input {
   width: 100%;
   padding: var(--p-sm);
   border: none;
   outline: none;
   border-radius: 4px 0 0 4px;
}

.subscribe form .btn {
   border-radius: 0 4px 4px 0;
   width: 140px;
   height: 40px;
}

/* Footer */
footer {
   background-color: #160021;
}

footer .wrapper .logo {
   color: var(--first-gra-clr);
}

footer .wrapper {
   justify-content: center;
   align-items: center;
}

footer .wrapper .col {
   justify-self: flex-start;
   align-self: flex-start;
   gap: 15px;
}

footer .wrapper .col:nth-child(1) {
   font-size: .9rem;
}

footer a:hover {
   color: var(--first-gra-clr);
}

/* Color Animation */
.clr-one {
   animation: changing 2.5s linear infinite;
}

.clr-two {
   animation: changing 2.5s linear infinite;
}

@keyframes changing {
   0% {
      background-color: #c32bfb;
   }
   40% {
      background-color: #e30abf;
      opacity: .5;
   }
   60% {
      background-color: #cc41ff;
      opacity: .4;
   }
   80% {
      background-color: #b60af5;
      opacity: .6;
   }
   100% {
      background-color: #c32bfb;
   }
}

/* scrollbar */
::-webkit-scrollbar {
   width: 10px;
 }
 ::-webkit-scrollbar-thumb {
   background: rgba(85, 60, 154, 0.3);
   border-radius: 10px;
   border: 1px solid rgba(255, 255, 255, 0.1);
 }
 ::-webkit-scrollbar-track {
   background-color: #301934;
   border: 5px solid #301934;
 }
 ::-webkit-scrollbar-button {
   background-color: #301934;
   background-repeat: no-repeat;   
   background-size: 100%;
   background-position: center;
  }
 ::-webkit-scrollbar-button:decrement {
   background-image: url("/img/logo2.png");   
  }
 ::-webkit-scrollbar-button:increment {
   background-image: url("/img/logo2.png"); 
 }

 /* Responsive for All Devices */
 @media screen and (max-width: 600px) {
   .wrapper,
   .grid-wrapper,
   .section-heading {
      flex-direction: column;
      align-items: center;
      max-width: 560px;
      min-width: 340px;
   }
   .heading-one {
      font-size: 2.6rem;
   }
   .heading-two {
      font-size: 1.8rem;
   }
   .section-heading {
      text-align: center;
      align-items: center;
   }
   .collection .btn-section {
      margin: var(--m-t-b);
   }
   .collection .btn-col {
      margin: 5px;
   }
   .about .col-text {
      align-items: center;
      text-align: center;
   }
   .hero .col-text {
      width: 100%;
      flex: 1;
      align-items: center;
      text-align: center;
   }
   .hero .col-img {
      flex: 1;
   }
   .arrival .btn {
      width: 140px;
      margin: var(--m-t-b);
   }
   form {
      flex-direction: column;
      gap: 10px;
   }
   .nav {
      max-width: 560px;
      min-width: 340px;
   }
   
   header {
      padding: 15px 10px;
   }
   .nav .nav-icon {
      width: 100%;
      justify-content: flex-end;
      margin-right: 10px;
      padding-right: 10px;
   }
   header .burger_icon {
      display: block;
   }
   .nav nav ul {
      position: absolute;
      top: 155%;
      right: -10px;
      padding: 10px;
      flex-direction: column;
      width: 240px;
      background-color: #d4d4d425;
      display: none;
      opacity: 0;
   }
   .nav nav ul.active {
      display: flex;
      opacity: 1;
      animation: fadeIn .5s ease-in-out;
   }
   @keyframes fadeIn {
      0% {
         opacity: 0;
         transform: translate(-2px);
      }
      100% {
         opacity: 1;
         transform: translate(0);
      }
   }
   .nav nav ul a:hover {
      color: var(--first-gra-clr);
   }
   .clr-two {
      width: 200px;
      height: 200px;
   }
   .hero .hero-img-off {
      left: 10px;
   }
   .testimonial .wrapper {
      width: 99%;
   }
   .subscribe .wrapper {
      width: 99%;
   }
   .subscribe .wrapper input {
      width: 70%;
      border-radius: 4px;
   }
   .subscribe .wrapper .btn {
      border-radius: 4px;
   }
   footer .wrapper {
      align-items: center;
      justify-content: center;
      gap: 40px;
   }
   footer .col {
      width: 100%;
      text-align: center;
      align-self: center;
      justify-self: center;
   }
}