/* ========== Customer Properties ========== */
:root{
  /* =====Colors====== */
  --clr-gray: 0 0% 86.3%;
  --clr-gray-light: 0 0% 93.3%;
  --clr-red: 356.7 90.1% 56.5%;
  --clr-black: 0 0% 21.2%;
  --clr-yellow: 43.5 99% 58.85;
  --clr-very-light-gray: 300 2.7% 92.7%;
  --clr-green: 144.3 64.4% 49.6%;
  --clr-blue: 214.5 100% 53.9%; 
  --clr-white: 0 0% 100%;
  
  /* ===== Font Size ===== */
  --fs-bf-194: 12.3vw;
  --fs-bf-109: 6.8125rem;
  --fs-bf-65: 4.865rem;
  --fs-bf-80: 5rem;
  --fs-bf-50: 3.125rem;
  --fs-bf-45: 2.8125rem;
  --fs-bf-30: 1.875rem;
  --fs-bf-20: 1.25rem;
  --fs-bf-16: 1rem;
  --fs-bf-15: 0.9375rem; 

  /* ===== Font Family ===== */
  --font-montserrat: "Montserrat", sans-serif;
  --font-poppins: "Poppins", sans-serif;
}

/* ========== Media Queries for fonts ========== */
@media (min-width: 35em){
  :root{
    /* ===== Font Size ===== */
    --fs-bf-194: 12.3vw;
    --fs-bf-109: 6.8125rem;
    --fs-bf-65: 4.865rem;
    --fs-bf-80: 5rem;
    --fs-bf-50: 3.125rem;
    --fs-bf-45: 2.8125rem;
    --fs-bf-30: 1.875rem;
    --fs-bf-20: 1rem;
    --fs-bf-16: 0.8rem;
    --fs-bf-15: 0.8rem; 
  }
}
@media (min-width: 35em) and (max-width:  59em){
  :root{
    /* ===== Font Size ===== */
    --fs-bf-194: 12.3vw;
    --fs-bf-109: 6.8125rem;
    --fs-bf-65: 4.865rem;
    --fs-bf-80: 5rem;
    --fs-bf-50: 3.125rem;
    --fs-bf-45: 2.8125rem;
    --fs-bf-30: 2.55rem;
    --fs-bf-20: 1.25rem;
    --fs-bf-16: 1rem;
    --fs-bf-15: 0.8375rem; 
  }
}
@media (min-width: 59em){
  :root{
    /* ===== Font Size ===== */
    --fs-bf-194: 12.3vw;
    --fs-bf-109: 6.8125rem;
    --fs-bf-65: 4.865rem;
    --fs-bf-80: 5rem;
    --fs-bf-50: 3.125rem;
    --fs-bf-45: 2.8125rem;
    --fs-bf-30: 1.875rem;
    --fs-bf-20: 2rem;
    --fs-bf-16: 1rem;
    --fs-bf-15: 0.9375rem; 
  }
}

/* ===== Default Reset ===== */
*,
*::after,
*::before {
  box-sizing: border-box;
}

/* ===== Removing Default Margin ===== */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/* ===== Removing List Style ===== */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* ===== set core root defaults ===== */
html:focus-within {
  scroll-behavior: smooth;
}

/* ===== set core body defaults ===== */
body{
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* ===== An element that don't have a class get default style ===== */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* ===== Make image easier to work with ===== */
img,
picture {
  /* min-width: 100%; */
  display: block;
}

/* ===== Inherit fonts for inputs and buttons ===== */
input,
button, 
textarea,
select {
  font: inherit;
}
::-webkit-scrollbar{
  display: none;
}

/* ===== Remove all animations, transitions and smooth scroll for people that prefer not to see them ===== */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::after,
  *::before {
    animation-duration: 0.1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.1s !important;
    scroll-behavior: auto !important;
  }
}
/* ===== End of general Reset ===== */
/* ===================================================== */

/* ===== Some Important Utility Class ===== */
/* ===================================================== */
body{
  overflow-x: hidden;
}

/* ===== Background Color Utility ===== */
.bg-red{background-color: hsl(var(--clr-red));}
.bg-black{background-color: hsl(var(--clr-black));}
.bg-blue{background-color: hsl(var(--clr-blue));}
.bg-gray{background-color: hsl(var(--clr-gray));}
.bg-green{background-color: hsl(var(--clr-green));}
.bg-gary-light{background-color: hsl(var(--clr-gray-light));}
.bg-very-light-gray{background-color: hsl(var(--clr-very-light-gray));}
.bg-white{background-color: hsl(var(--clr-white));}
.bg-yellow{background-color: hsl(var(--clr-yellow));}

/* ===== Text Utility Class ===== */
.text-red{color: hsl(var(--clr-red));}
.text-black{color: hsl(var(--clr-black));}
.text-blue{color: hsl(var(--clr-blue));}
.text-gray{color: hsl(var(--clr-gray));}
.text-green{color: hsl(var(--clr-green));}
.text-gary-light{color: hsl(var(--clr-gray-light));}
.text-very-light-gray{color: hsl(var(--clr-very-light-gray));}
.text-white{color: hsl(var(--clr-white));}
.text-yellow{color: hsl(var(--clr-yellow));}

/* ========== Font Sizes ========== */
.fs-900{font-size: var(--fs-bf-194);}
.fs-800{font-size: var(--fs-bf-109);}
.fs-700{font-size: var(--fs-bf-80);}
.fs-600{font-size: var(--fs-bf-65);}
.fs-500{font-size: var(--fs-bf-50);}
.fs-400{font-size: var(--fs-bf-45);}
.fs-300{font-size: var(--fs-bf-30);}
.fs-200{font-size: var(--fs-bf-20);}
.fs-100{font-size: var(--fs-bf-16);}
.fs-50{font-size: var(--fs-bf-15);}

/* ========== Font Blood ========== */
.bold-100{font-weight: 100;}
.bold-200{font-weight: 200;}
.bold-300{font-weight: 300;}
.bold-400{font-weight: 400;}
.bold-500{font-weight: 500;}
.bold-600{font-weight: 600;}
.bold-700{font-weight: 700;}
.bold-800{font-weight: 800;}
.bold-900{font-weight: 900;}
.bold-bold{font-weight: bold;}
.bold-bolder{font-weight: bolder;}
/* ========== Font Family ========== */
.fs-poppins{font-family: 'Poppins', sans-serif;}
.fs-Montserrat{font-family: 'Montserrat', sans-serif;}
/* ========== End of Utility Class ========== */

/* ========== Component Utility Class ========== */
.uil{
  cursor: pointer;
}
.flex{
  display: flex;
  gap: var(--flex-gap, 1rem);
}
.grid{
  display: grid;
  gap: var(--flex-gap, 1rem);
}
.container{
  width: 96vw;
  margin-inline: auto;
  padding-inline: 2rem;
}
/* ========== End of Utility Class ========== */

/* ========== Primary Header ========== */
.primary-header{
  justify-content: space-between;
  align-items: center;
  /* padding-block: 2rem; */
  padding: 2rem;
  .header-inner-one{
    align-items: center;
    .logo{
      margin-right: 2rem;
      img{
        width: 5em;
        filter: brightness(0) invert(0);
      }
    }
    nav{
      .primary-navigation{
        margin: 0;
        /* padding: 0; */
        list-style: none;
        --flex-gap: 2rem;
        a{
          text-decoration: none;
          color: hsl(var(--clr-black) / 0.6);
          cursor: pointer;
        }
        .active{
          color: #000000;
        }
      }
    }
  }
  
  .header-login{
    justify-content: space-between;
    align-items: center;
    --flex-gap: 2rem;
    p a{
      text-decoration: none;
      color: black;
    }
    .fa-shopping-bag{
      font-size: 2rem;
      margin-top: -0.5rem;
      position: relative;
    }
    .fa-shopping-bag::after{
      content: '0';
      width: 1rem;
      position: absolute;
      background-color: hsl(var(--clr-red));
      height: 1.2rem;
      margin-top: -3rem;
      margin-left: 1rem;
      border-radius: 0.3rem;
      display: grid;
      color: hsl(var(--clr-white));
      font-size: 1.19rem;
      font-weight: 700;
      text-align: center;
    }

    /* ===== Cart box ===== */
    .cart-icon{
      position: absolute;
      inset: 0% 30% 0% 0%;
      background-color: hsl(var(--clr-very-light-gray)); 
      transform: translateX(-100%);
      transition: transform 250ms ease-in-out;
      z-index: 1111;
      .shopping{
        padding: 2rem;
        justify-content: space-between;
        align-items: center;
        > p{
          font-size: var(--fs-bf-20);
          font-family: var(--font-montserrat);
        }
        > i{
          font-size: 1.5rem;
          color: hsl(var(--clr-black) / 0.8);
          transition: transform 250ms ease-in-out;
        }
        i:hover{
          transform: rotate(90deg);
        }
      }
      .cart{
        flex-direction: column;
        justify-content: center;
        width: 100%;
        --flex-gap: 2.5rem;
        align-items: center;
        font-family: var(--font-poppins);
        text-transform: uppercase;
        color: hsl(var(--clr-black) / 0.5);
        > i{
          font-size: 5rem;
          margin-bottom: -2rem;
        }
      }
    }
    .cart-icon[data-visible="true"] {
      transform: translateX(0%);
    }
  }
}

/* ========== Media Queries ========== */
/* ===== Mobile ===== */
@media (max-width: 35em) {
  .primary-navigation{
    position: fixed;
    flex-direction: column;
    z-index: 9999;
    text-align: center;
    --flex-gap: 1.7rem;
    inset: 0 0 0 0;
    background-color: hsl(var(--clr-gray-light) / 0.9);
    padding: clamp(3rem, 30vh, 10rem) 0;
    transform: translateY(-100%);
    transition: transform 250ms ease-in-out;
  }
  .primary-navigation[data-visible="true"] {
    transform: translateY(0%);
  }
  .primary-navigation a{
    font-size: var(--fs-bf-30);
  }
  .header-login{
    --flex-gap: 1.5rem;
    margin-left: 4rem;
  }
  .mobile-close-btn{
    display: block;
    z-index: 88888;
    top: 2rem;
    position: fixed;
    right: 13.5rem;
    border: 0;
    font-size: 3rem;
    cursor: pointer;
    transform: translateY(-300%); 
    transition: transform 250ms ease-in-out;
  }
  .mobile-close-btn[data-visible="true"] {
    transform: translateY(0%);
  }
  .mobile-open-btn{
    display: block;
    font-size: 2rem;
    cursor: pointer;
  }
  .cart-icon {
    z-index: 9999;
    position: fixed;
  }
}

/* ===== Ipad ===== */
@media (min-width: 35em) and (max-width: 59em) {
  .primary-navigation{
    position: fixed;
    flex-direction: column;
    z-index: 9999;
    text-align: center;
    --flex-gap: 1.7rem;
    inset: 0 0 0 0;
    background-color: hsl(var(--clr-gray-light) / 0.9);
    padding: clamp(0rem, 20vh, 10rem) 0;
    transform: translateY(-100%);
    transition: transform 250ms ease-in-out;
    a{
      font-size: var(--fs-bf-30);
    }
  }
  .primary-navigation[data-visible="true"] {
    transform: translateY(0%);
  }
  .header-login{
    --flex-gap: 1.5rem;
    margin-left: 4rem;
  }
  .mobile-close-btn{
    display: block;
    z-index: 88888;
    top: 1rem;
    position: fixed;
    right: 18rem;
    border: 0;
    font-size: 3rem;
    cursor: pointer;
    transform: translateY(-300%);
    transition: transform 25ms ease-in-out;
  }
  .mobile-close-btn[data-visible="true"] {
    transform: translateY(0%);
  }
  .mobile-open-btn{
    display: block;
    font-size: 2rem;
    cursor: pointer;
  }
  .cart-icon {
    z-index: 9999;
    position: fixed;
  }
}

/* ========== Desktop ========== */
@media (min-width: 59em){
  .cart-icon {
    position: absolute;
    inset: 10% 5% 50% 60%;
    border-radius: 1rem;
    transform: translateX(150%);
    transition: transform 2250ms ease-in-out;
    z-index: 222;
  }
  .cart-icon[data-visible="true"]{
    transform: translateX(0%);
  }
  /* .cart-icon .shopping{
    display: none;
  } */
  .cart {
    padding-top: 4rem;
  }
}

/* ========== Hero Section ========== */
.block{display: block;}

.uppercase{text-transform: uppercase;}
.lineHeight{line-height: var(--line, 3rem);}
.lineHeight2{line-height: var(--line2, 4rem);}

.large-btn{
  border: 0;
  padding: 0.7rem 1rem;
  border-radius: 2rem;
  cursor: pointer;
  transition: transform 250ms ease-in-out;
}

.large-btn:hover{
  background-color: hsl(var(--clr-black));
  box-shadow: 3px 2px 37px -6px rgba(255, 255, 255, 0.69);
}
/* <!-- =======  Feature Section ======= --> */
.shop-feature{
  div {
    text-align: center;
    p{
      a{
        color: red;
      }
    }
  }
  h2{
    text-align: center;
  }
}

/********************** Contact Us **********************/
.contact-us{
  width: 90vw;
  margin-inline: auto;
  align-items: center;
  --grid-gap: 4rem;
  margin-block: 3rem;
  grid-template-columns: 1fr;
  grid-template-areas: 
  'one'
  'two';
}

.contact-us:nth-child(1){
  grid-area: one;
}
.contact-us:nth-child(2){
  grid-area: two;
}

.contact-form{
  margin-block: 2rem;
  --grid-gap: 1rem;
}

.contact-us input{
  border: 0;
  padding: 1rem 2rem;
  border-radius: 2rem;
}

.contact-us input:focus{
  outline: none;
}

.contact-us textarea{
  width: 100%;
  border: 0;
  border-radius: 2rem;
  padding: 2em 1.8em;
}

.contact-us textarea:focus{
  outline: none;
}

.contact-btn > button{
  padding: 1rem 3rem;
  font-size: 1rem;
  margin-top: 1.5rem;
}

.image {
  img{
    width: 35em;
    margin-top: -2em;
  }
}

.map{
  background-color: hsl(var(--clr-red)/0.3);
  padding: 1rem 2rem;
  margin-block: 2rem;
  position: relative;
  width: 45vw;
}

.map::before{
  content: '';
  width: 5px;
  top: 0;
  left: 0;
  height: 100%;
  background-color: hsl(var(--clr-red));
  position: absolute;
}

.support-container{
  .support-info{
    .mail{
      img{
        width: 7rem;
        cursor: pointer;
      }
    }
    .phone{
      padding:0 1.8em;
      img{
        width: 5rem;
        cursor: pointer;
      }
    }
    .location{
      padding:0 3em;
      img{
        width: 2.7rem;
        cursor: pointer;
      }
    }

    .email-info{
      margin-top: -2em;
    }
  }
}

/* ========== Media Queries ========== */
@media(min-width: 45em){
  .contact-us{
    grid-template-areas: 
    'one two';
  }
  .contact-us h1{
    font-size: 1rem;
  }
  .map h4{
    font-size: 1rem;
  }
}

.support-container{
  width: 90vw;
  margin-inline: auto;
  margin-bottom: 7rem;
  place-items: center;
  --grid-gap: 3rem;
  grid-auto-columns: 1fr;
  grid-template-areas: 
  'one'
  'two'
  'three';
}
.support-container:nth-child(1){
  grid-area: one;
}
.support-container:nth-child(2){
  grid-area: two;
}
.support-container:nth-child(3){
  grid-area: three;
}

.support-info{
  --grid-gap: 1rem;
  place-items: center;
}

.support-img{
  place-items: center;
}

@media (min-width: 45em){
  .support-container{
    grid-template-areas: 'one two three';
  }
  .support-info > p,
  .support-info span{
    font-size: 1rem;
  }
}