*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  min-width: 0;
}

/* !---------variable */
:root {
  --dark: #1c1819;
  --light: #f5f5f5;
  --white: #fff;
  --grey-one: #e3e6f3;
  --primary-one: #d2bca7;
  --primary-two: #c7a88b;
  --primary: #098376;
}

/* !-----------Utility classes */
.container {
  width: min(100% - 2rem, 1300px);
  margin: 0 auto;
}
.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}
.centralize {
  display: grid;
  place-content: center;
}
.a-center {
  align-items: center;
}

.j-sb {
  justify-content: space-between;
}

img {
  object-fit: cover;
}
body {
  font-family: poppins;
  font-family: "Poppins", sans-serif;
  color: var(--dark);
  background: var(--white);
}

/* !header styles */

header {
  background-color: var(--light);
  z-index: 999;
  /* border: 1px solid green; */
  padding: 1em 0;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.115);
  position: sticky;
  top: 0;
  left: 0;
  border-bottom: 2px solid #dddbdb;
}
.logo {
  display: block;
  text-decoration: none;
  font-size: 1.55em;
  padding: 0.5em 0.75em;
  color: var(--dark);
  font-weight: 600;
}

/* nav section */
nav {
  gap: 1rem;
}
.nav-links {
  list-style: none;

  .nav-link {
    text-decoration: none;
    font-size: 1.15em;
    padding: 0.5em 0.75em;
    color: var(--dark);
    font-weight: 500;
    border-radius: 6px;
  }

  .nav-link:hover {
    background: var(--primary-two);
    color: white;
  }
  .nav-link.active {
    color: var(--primary-two);
  }
  .nav-link.active:hover {
    color: var(--white);
  }
}
/* cart icon */
nav .fa-solid {
  font-size: 1.35em;
  cursor: pointer;
  background-color: #f1f1f16b;
  padding: 0.6em 0.75em;
}

/* hero */
.hero {
  background: url("../img/hero4.png") no-repeat;
  background-position: top 25% right 0%;
  background-size: cover;
  height: 87vh;
  display: flex;
  flex-direction: column;

  justify-content: center;
}

.hero-content {
  margin-bottom: 5em;
  h2 {
    font-size: 2.25em;
    font-weight: 500;
    opacity: 0.75;
  }
  h1 {
    /* font-size: 4em; */
    line-height: 1.1;
    font-weight: 500;
    font-size: clamp(50px, 8vw, 65px);
  }
  h1 span {
    display: block;
    color: var(--primary);
  }
  h3 {
    opacity: 0.8;
    font-weight: 500;
    margin: 1.8rem 0;
  }

  .hero-btn {
    display: inline-block;
    background: url("../img/button.png") no-repeat center/cover;
    padding: 14px 80px 14px 65px;
    font-size: 1.15em;
    text-decoration: none;
    color: var(--dark);
    font-weight: 500;
  }
}

/* !--------products grid */
.section-padding {
  padding: 3.5em 0;
}
.border-top {
  border-top: 15px solid #e5ede6;
}

.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2em;
}

.section-heading {
  margin-bottom: 3.5rem;
  text-align: center;

  .section-header {
    font-size: clamp(50px, 8vw, 55px);
    text-transform: capitalize;
    text-align: center;
    font-weight: 500;
  }

  h2 {
    text-transform: capitalize;
    font-weight: 500;
    text-align: center;
    opacity: 0.5;
  }
}

.product {
  border: 1px solid #cce7d0be;
  padding: 0.8em 0.8em 1em 0.8em;
  border-radius: 2.5em;
  transition: box-shadow 0.2s ease;
  box-shadow: 0 5px 10px rgba(28, 24, 25, 0.025);
  cursor: pointer;
  display: grid;
  gap: 0.5em;

  .product-img-container {
    border-radius: 1.7em;

    img {
      border-radius: inherit;
      width: 100%;
    }
  }
  .product-type {
    font-weight: 800;
    border: 1px solid #4e4c4c6e;
    padding: 0.2em 0.5em;
    display: inline-block;
    margin-bottom: 0.45em;
    opacity: 0.45;
    letter-spacing: 2px;
    background: var(--grey-one);
    font-size: 0.75em;
    text-transform: uppercase;
    border-radius: 4px;
  }
  .product-type::before {
    content: "\f02b";
    font-family: "Font Awesome 5 Free";
    font: var(--fa-font-solid);
    margin-right: 0.5em;
  }
  .product-name {
    font-size: 1.2em;
    text-transform: capitalize;
    font-weight: 600;
    transition: color 0.2s ease;
  }

  .product-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(
      to right,
      #fbc02d,
      #ff5722
    ); /* gradient color */
    -webkit-background-clip: text;
    background-clip: text;
  }
  .ratings i {
    color: #fbc02d;
    color: transparent;
    padding: 0.5em 0;
  }
  .price {
    color: var(--primary);
    letter-spacing: 2px;
    font-weight: 600;
    /* background: red; */
  }
  button {
    background-color: #e8f6ea;
    border: none;
    border: 1px solid #cce7d0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: grid;
    place-content: center;
    font-size: 1.1em;
    color: var(--primary);
    transition: 0.15s ease;
  }
  button:hover {
    border: 1px solid #acc5b0;
  }
}
.product:hover {
  box-shadow: 0 10px 15px rgba(28, 24, 25, 0.1);
}
.product:hover .product-name {
  color: var(--primary);
}

/* !-------------------cta-section */
.cta-section {
  background: linear-gradient(to left, #1c181987, #1c18199d, #1c1819b1),
    url("../img/banner/b2.jpg") no-repeat center/cover;
  padding: 4em 0;
  text-align: center;
  color: var(--light);

  .container {
    h3 {
      font-weight: 500;
      text-transform: capitalize;
      text-align: center;
      font-size: 1.4em;
      margin-bottom: 0.5em;
      color: var(--grey-one);
    }
    h1 {
      font-weight: 500;
      text-align: center;
      margin-bottom: 1em;
      font-size: 2.6em;

      span {
        color: #d5333c;
        text-align: center;
        font-weight: 600;
        letter-spacing: 1px;
      }
    }
    .cta {
      background-color: var(--grey-one);
      display: inline-block;
      text-decoration: none;
      font-weight: 600;
      color: var(--dark);
      border-radius: 10px;
      padding: 1em 2em;
      transition: 0.2s ease;
      font-size: 1.4em;
    }
    .cta:hover {
      background: var(--white);
      color: var(--primary);
    }
  }
}

/* !new arrivals */
.products-flex {
  display: grid;
  grid-auto-flow: column;
  /* grid-auto-columns: 25%; */
  grid-auto-columns: 300px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: 2em;
  overscroll-behavior-inline: contain;
  gap: 2em;
}

.snap-inline {
  scroll-snap-type: inline mandatory;
  scroll-padding-inline: 2em;
}
.snap-inline > * {
  scroll-snap-align: start;
}

::-webkit-scrollbar {
  cursor: pointer;
  width: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: #444;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  cursor: pointer;
  background-color: #f1f1f1;
}

.snap-inline {
  scrollbar-width: thin;
  scrollbar-color: #444 #f1f1f1;
}

/*!-------------- banners */
.banner-section {
  display: grid;
  gap: 2em;
}
.banners {
  display: grid;
  gap: 2em;
}
.banners-col-2 {
  grid-template-columns: repeat(auto-fit, minmax(50vh, 1fr));
}
.banner {
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 60vh;
  padding: 2em;
  flex-direction: column;
  transition: 0.2s ease;
  color: white;
  h4 {
    font-weight: 500;
    text-transform: capitalize;
    text-shadow: 0 5px 8px #1c181952;
    font-size: 1.45em;
  }
  h2 {
    /* text-transform: uppercase; */
    font-weight: 600;
    letter-spacing: 1px;
    text-shadow: 0 5px 8px #1c181984;
    font-size: 2.5em;
  }
  p {
    font-weight: 500;
    text-shadow: 0 5px 8px #1c181952;
    margin: 0.5em 0 1em 0;
  }
}

.border-btn {
  /* display: inline-block; */
  text-transform: capitalize;
  font-size: 1.25em;
  font-weight: 500;
  border: 2px solid white;
  padding: 0.5em 1em;
  text-decoration: none;
  color: white;
  transition: 0.2s ease;
  gap: 1em;

  * {
    transition: 0.2s ease;
  }
}
.border-btn:hover {
  background: #1c181924;
  color: var(--white);
}
.border-btn:hover i {
  transform: translateX(5px);
}

.banner:nth-child(1) {
  background: linear-gradient(#00000013, #00000012),
    url("../img/banner/b17.jpg") no-repeat center/cover;
}

.banner:nth-child(2) {
  background: linear-gradient(#00000023, #0000001b),
    url("../img/banner/b10.jpg") no-repeat center/cover;

  .border-btn:hover {
    background: #09837749;
  }
  .border-btn:hover i {
    color: #fff;
  }
}

.banner:hover {
  box-shadow: inset 0px 0px 280px #00000046;
}
.banner:hover .border-btn {
  background: #09837749;
}

/* banner-3-col */
.banners-col-3 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  /* min-height: 50vh; */
}

.banner-linked {
  text-decoration: none;
  align-items: flex-start;
  padding: 4em 2em;
  min-height: auto;
  justify-content: flex-start;

  h2 {
    font-size: 1.85em;
    font-weight: 800;
    text-shadow: none;
    text-transform: capitalize;
  }
  p {
    font-size: 1.45em;
    text-shadow: none;
    /* font-weight: 600; */
  }
}
.red {
  color: #ec544e;
}
.banner-linked:nth-child(1) {
  --grad: linear-gradient(#0000007d, #0000008e);
  background: var(--grad), url("../img/banner/b7.jpg") no-repeat center/cover;
}
.banner-linked:nth-child(2) {
  --grad: linear-gradient(#00000081, #0000007b);
  background: var(--grad), url("../img/banner/b4.jpg") no-repeat center/cover;
}
.banner-linked:nth-child(3) {
  --grad: linear-gradient(#00000064, #00000070);
  background: var(--grad), url("../img/banner/b18.jpg") no-repeat center/cover;
}

/* !-------------News letter Section */
.news-letter {
  background-image: url("../img/banner/b14.png");
  background-repeat: no-repeat;
  background-position: 20% 30%;
  color: white;
  background-color: #041e42;
  /* background-attachment: fixed; */
}
.news-letter-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  justify-content: center;
  align-items: center;
  gap: 2em;

  h2 {
    font-size: 2em;
    font-weight: 500;
    text-transform: capitalize;
    margin-bottom: 0.25em;
  }

  p {
    font-size: 1.2em;
    color: var(--grey-one);

    span {
      opacity: 1;
      color: #ffbd27;
      font-weight: 500;
    }
  }
}
.news-letter-input-field {
  justify-content: flex-end;
  input {
    padding: 1em;
    font-size: 1.25em;
    border: none;
    border-radius: 4px 0 0 4px;
    background: var(--grey-one);
    width: 70%;
  }
  button {
    padding: 1em 2em;
    width: 30%;
    border: none;
    background: var(--primary);
    border-radius: 0 4px 4px 0;
    font-size: 1.25em;
    color: white;
    text-transform: capitalize;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    transition: 0.2s ease;
  }
  button:hover {
    background: #07635a;
  }
}

/* footer */
.footer {
  /* background-image: url("../img/banner/b14.png"); */
  /* background-attachment: fixed; */
  background-repeat: repeat;
  background-position: center;
  color: white;
  background-color: #1c1819;
  /* margin-top: 2em; */
}
.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: flex-start;
  justify-content: center;
  gap: 2em;

  ul {
    list-style: none;
  }
  .footer-header {
    /* color: red; */
    text-transform: capitalize;
    font-weight: 500;
    letter-spacing: 1px;
  }
}

.footer-container > * {
  /* border: 2px solid red; */
  display: grid;
  gap: 0.6em;
}
/* footer left stufs */
.footer-contact {
  li {
    padding: 0.125em 0;
    color: #acadad;
  }
  li span {
    font-weight: 600;
  }
  .social-icons {
    display: flex;
    gap: 0.5em;

    li a {
      color: inherit;
      padding: 0.5rem;
      transition: color 0.2s ease;
    }

    li i {
      font-size: 1.8em;
    }
  }
}
.facebook:hover {
  color: #1877f2 !important;
}
.twitter:hover {
  color: #1da1f2 !important;
}
.instagram:hover {
  --brand-color: linear-gradient(
    45deg,
    #405de6,
    #5851db,
    #833ab4,
    #c13584,
    #e1306c,
    #fd1d1d,
    #f56040,
    #f77737,
    #fcaf45,
    #ffdc80,
    #ffcc6b
  );
  background: var(--brand-color);
  color: transparent !important;
  background-clip: text;
}
.pinterest:hover {
  color: #bd081c !important;
}
.tiktok:hover {
  --brand-color: linear-gradient(
    45deg,
    #69c9d0,
    #65a7b7,
    #6560e2,
    #662d91,
    #fcb900,
    #ed1692,
    #0085ca
  );
  background: var(--brand-color);
  color: transparent !important;
  background-clip: text;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
}
.footer-nav > * {
  /* border: 2px solid red; */
  flex: 1;

  ul li a {
    padding: 0.125em 0;
    display: inline-block;
    color: #acadad;
    text-decoration: none;
    transition: 0.2s ease;
  }
  ul li a:hover {
    color: white;
    text-decoration: underline;
  }
}

.app-section {
  p {
    color: #acadad;
  }
}
.app-store {
  display: flex;
  gap: 1em;
  a img {
    border-radius: 8px;
  }
}

/* page sign */
.page-sign {
  text-align: center;
  border-top: 2px solid #acadad73;
  color: #acadad;
  padding: 1em 0;
}