/*-----------------------------------*\
  #style.css
\*-----------------------------------*/




/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

:root {

/*COLOURS*/

    --signyellow: hsl(53, 50%, 93%);
    --signbrown: hsl(37, 18%, 40%);
    --signbrown-v2: hsl(36, 18%, 30%);
    --darkgrey: hsl(0, 2%, 22%);
    --cultured: hsl(0, 0%, 96%);
    --bannertextwhite: hsla(53, 50%, 93%, 0.521);
    --pricedel: rgb(255, 106, 0);
    --spanish-gray: hsl(0, 0%, 60%);
    --discount-green: hsl(152, 51%, 52%);

    /**
     * typography
     */
  
    --fs-1: 1.563rem;
    --fs-2: 1.375rem;
    --fs-3: 1.25rem;
    --fs-4: 1.125rem;
    --fs-5: 1rem;
    --fs-6: 0.938rem;
    --fs-7: 0.875rem;
    --fs-8: 0.813rem;
    --fs-9: 0.75rem;
    --fs-10: 0.688rem;
    --fs-11: 0.625rem;
  
    --weight-300: 300;
    --weight-400: 400;
    --weight-500: 500;
    --weight-600: 600;
    --weight-700: 700;
  


    /**
     * border-radius
     */
  
    --border-radius-md: 10px;
    --border-radius-sm: 5px;
  
    /**
     * transition 
     */
  
    --transition-timing: 0.4s ease;
  
  }
  
  
  
  
  
  /*-----------------------------------*\
    #RESET
  \*-----------------------------------*/
  
  *, *::before, *::after {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    
  }
  
  a { text-decoration: none; }
  
  li { list-style: none; }
  
  button {
    background: none;
    font: inherit;
    border: none;
    cursor: pointer;
  }
  
  img, ion-icon, button, a { display: block; }
  
  span { display: inline-block; }
  
  html {
    font-family: "Poppins", sans-serif;
    -ms-scroll-chaining: none;
        overscroll-behavior: contain;
  }
  
  input {
    display: block;
    width: 100%;
    font: inherit;
  }
  
  input::-webkit-input-placeholder { font: inherit; }
  
  input::-moz-placeholder { font: inherit; }
  
  input:-ms-input-placeholder { font: inherit; }
  
  input::-ms-input-placeholder { font: inherit; }
  
  input::placeholder { font: inherit; }
  
  body { background: var(--signyellow); }
  
  /**
   * scrollbar style
   */
  
  body::-webkit-scrollbar { width: 15px; }
  
  body::-webkit-scrollbar-track {
    background: var(--signyellow);
    border-left: 1px solid var(--cultured);
  }
  
  body::-webkit-scrollbar-thumb {
    background: hsl(0, 0%, 80%);
    border: 3px solid var(--signyellow);
    -webkit-border-radius: 10px;
            border-radius: 10px;
  }
  
  body::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 70%); }
  
  
  
  
  
  /*-----------------------------------*\
    #REUSED STYLE
  \*-----------------------------------*/
  
  .container { padding: 0 15px; }
  
  .has-scrollbar { padding-bottom: 5px; }
  
  .has-scrollbar::-webkit-scrollbar {
    width: 12px; /* for vertical scroll */
    height: 12px; /* for horizontal scroll */
  }
  
  .has-scrollbar::-webkit-scrollbar-thumb {
    background: transparent;
    border: 3px solid var(--signyellow);
    -webkit-border-radius: 20px;
            border-radius: 20px;
  }
  
  .has-scrollbar:hover::-webkit-scrollbar-thumb { background: hsl(0, 0%, 90%); }
  
  .has-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(0, 0%, 80%); }
  
  .title {
    color: var(--greybrown);
    font-size: var(--fs-5);
    font-weight: var(--weight-600);
    letter-spacing: 0.4px;
    text-transform: capitalize;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--cultured);
    margin-bottom: 30px;
  }
  
  
  
  
  
  /*-----------------------------------*\
    #MAIN
  \*-----------------------------------*/
  
  /**
   * overlay 
   */
  
  .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: hsla(0, 0%, 0%, 0.5);
    opacity: 0;
    pointer-events: none;
    z-index: 15;
    -webkit-transition: 0.5s ease;
    -o-transition: 0.5s ease;
    transition: 0.5s ease;
  }
  
  .overlay.active {
    opacity: 1;
    pointer-events: all;
  }
  
  

  
  /*-----------------------------------*\
    #HEADER
  \*-----------------------------------*/
  
 header {align-items: center;}
  
  .header-main {
    padding: 10px 0;
    border-bottom: 1px solid var(--cultured);

  }
  
  .header-logo { 
    margin-bottom: 2px;
    margin-left: auto;
    margin-right: auto;
    display: block;
   }
  
  .header-logo img { 
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  
  
  
  /*-----------------------------------*\
    #BANNER
  \*-----------------------------------*/
  
  .banner { margin: 30px 0; }
  
  .slider-container {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 10px;
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
    overflow: auto hidden;
    -webkit-scroll-snap-type: inline mandatory;
        -ms-scroll-snap-type: inline mandatory;
            scroll-snap-type: inline mandatory;
    overscroll-behavior-inline: contain;
  }
  
  .slider-item {
    position: relative;
    min-width: 100%;
    max-height: 600px;
    aspect-ratio: 3 / 2.3;
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
    overflow: hidden;
    scroll-snap-align: start;
  }
  
  .slider-item .banner-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: right;
       object-position: right;
  }
  
  .banner-content {
    background: hsla(46, 13%, 19%, 0.7);
    position: absolute;
    bottom: 25px;
    left: 25px;
    right: 25px;
    padding: 20px 25px;
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
  }
  
  .banner-subtitle {
    color: var(--signyellow);
    font-size: var(--fs-3);
    font-weight: var(--weight-600);
    letter-spacing: 2px;
    margin-bottom: 6px;
    text-transform: uppercase;
  }
  
  .banner-title {
    color: var(--signyellow);
    font-size: var(--fs-2);
    font-family: 'Courier New', Courier, monospace;
    font-weight: 200;
    letter-spacing: 2px;
    line-height: 1;
    margin-bottom: 6px;
  }
  
  .banner-text {
    color: var(--signyellow);
    font-size: var(--fs-11);
    letter-spacing: 2px;
    line-height: 1.5;
    margin-bottom: 10px;
    font-weight: 100;


   }
  
  .banner-btn {
    background: var(--bannertextwhite);
    color: whitesmoke;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    font-size: var(--fs-11);
    font-weight: var(--weight-600);
    text-transform: uppercase;
    padding: 4px 10px;
    -webkit-border-radius: var(--border-radius-sm);
            border-radius: var(--border-radius-sm);
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .banner-btn:hover { background: var(--signbrown); }
  
  
  
  /*-----------------------------------*\
    #PRODUCT GRID
  \*-----------------------------------*/
  
  .product-main { margin-bottom: 30px; }
  
  .product-grid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr;
    grid-template-columns: 1fr;
    gap: 25px;
  }
  
  .product-grid .showcase {
    border: 1px solid var(--cultured);
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
    overflow: hidden;
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .product-grid .showcase:hover { -webkit-box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); box-shadow: 0 0 10px hsla(0, 0%, 0%, 0.1); }
  
  .product-grid .showcase-banner { position: relative; }
  
  .product-grid .product-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .product-grid .product-img.default {
    position: relative;
    z-index: 1;
  }
  
  .product-grid .product-img.hover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
  }
  
  .product-grid .showcase:hover .product-img.hover { opacity: 1; }
  
  .product-grid .showcase:hover .product-img.default { opacity: 0; }
  
  .product-grid .showcase:hover .product-img { -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
  
  .product-grid .showcase-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--discount-green);
    font-size: var(--fs-8);
    font-weight: var(--weight-500);
    color: var(--signyellow);
    padding: 0 8px;
    -webkit-border-radius: var(--border-radius-sm);
            border-radius: var(--border-radius-sm);
    z-index: 3;
  }
  
  .product-grid .showcase-badge.angle {
    top: 25px;
    left: -45px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    text-transform: uppercase;
    font-size: 11px;
    padding: 5px 40px;
  }
  
  .product-grid .showcase-badge.black { background: orange; }
  
  .product-grid .showcase-badge.pink { background: var(--salmon-pink); }
  
  .product-grid .showcase-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
    z-index: 3;
  }
  
  .product-grid .showcase:hover .showcase-actions { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
  
  .product-grid .btn-action {
    background: black;
    color: var(--signyellow);
    margin-bottom: 5px;
    border: 1px solid var(--cultured);
    padding: 5px;
    -webkit-border-radius: var(--border-radius-sm);
            border-radius: var(--border-radius-sm);
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .product-grid .btn-action:hover {
    background: blue;
    color: greenyellow;
    border-color: var(--eerie-black);
  }
  
  .product-grid .showcase-content { padding: 15px 20px 0; }
  

  
  .product-grid .showcase-title {
    color: var(--signbrown);
    font-size: var(--fs-8);
    font-weight: var(--weight-300);
    text-transform: capitalize;
    letter-spacing: 1px;
    margin-bottom: 10px;
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .product-grid .showcase-title:hover { color: var(--darkgrey); }
  

  
  .product-grid .price-box {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    font-size: var(--fs-7);
    color: var(--signbrown);
    margin-bottom: 10px;
  }
  
  .product-grid .price { font-weight: var(--weight-700); }
  
  .product-grid del { color: var(--pricedel) }
  
  
   
  /*-----------------------------------*\
    #PRODUCT FEATURED
  \*-----------------------------------*/
  
  .product-featured { margin-bottom: 30px; }
  
  .product-featured .showcase-wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 20px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    -webkit-scroll-snap-type: inline mandatory;
        -ms-scroll-snap-type: inline mandatory;
            scroll-snap-type: inline mandatory;
  }
  
  .product-featured .showcase-container {
    min-width: 100%;
    padding: 30px;
    border: 1px solid whitesmoke;
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
    scroll-snap-align: start;
  }
  
  .product-featured .showcase-img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  
  .product-featured .showcase-content { margin-top: 30px; }
  
  
  
  .product-featured .showcase-title {
    font-size: var(--fs-7);
    color: var(--signbrown);
    overflow: hidden;
    white-space: nowrap;
    -o-text-overflow: ellipsis;
       text-overflow: ellipsis;
    text-transform: uppercase;
    margin-bottom: 3px;
  }
  
  .product-featured .showcase-desc {
    color: var(--signbrown);
    font-size: var(--fs-7);
    font-weight: var(--weight-300);
    margin-bottom: 10px;
  }
  
  .product-featured .price-box {
    font-size: var(--fs-3);
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
  }
  
  .product-featured .price {
    color: var(--signbrown);
    font-weight: var(--weight-700);
  }
  
  .product-featured del {
    color: var(--pricedel);
    font-weight: var(--weight-300);
  }
  
  .product-featured .add-cart-btn {
    background: var(--signbrown);
    padding: 8px 15px;
    color: var(--signyellow);
    font-weight: var(--fs-9);
    font-weight: var(--weight-700);
    text-transform: uppercase;
    -webkit-border-radius: var(--border-radius-md);
            border-radius: var(--border-radius-md);
    margin-bottom: 15px;
    -webkit-transition: var(--transition-timing);
    -o-transition: var(--transition-timing);
    transition: var(--transition-timing);
  }
  
  .product-featured .add-cart-btn:hover {
    background: var(--darkgrey);
    color: var(--cultured);
  }
  
  .product-featured .showcase-status { margin-bottom: 15px; }
  
  .product-featured .showcase-status .wrapper {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
    -webkit-align-items: center;
        -ms-flex-align: center;
            align-items: center;
    color: var(--spanish-gray);
    font-size: var(--fs-9);
    font-weight: var(--weight-400);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  
  .product-featured .showcase-status-bar {
    background: var(--cultured);
    position: relative;
    height: 10px;
    -webkit-border-radius: 5px;
            border-radius: 5px;
  }
  
  .product-featured .showcase-status-bar::before {
    position: absolute;
    content: '';
    top: 3px;
    left: 3px;
    height: 4px;
    width: 70%;
    background: var(--signbrown);
    -webkit-border-radius: 4px;
            border-radius: 4px;
  }
  

  .product-featured .display-number {
    color: var(--bannertextwhite);
    font-size: var(--fs-5);
    font-weight: var(--weight-500);
    min-width: 40px;
  }
  
  .product-featured .display-text {
    color: var(--darkgrey);
    font-size: var(--fs-11);
  }
  
  
  
  /* ^^^^^^^^^^^^^^^^     ABOUT   ^^^^^^^^^^^^^^^^ */

#about
{
	background-color: #000000;

}

#about .section-title
{
	margin-top: 20px;
	margin-bottom: 50px;
}

#px{
	margin: 0 auto;
	height: fit-content;
	background-image: url(IMG/Large/Collection_Macro.jpeg);
	background-size:cover;
	background-position-x: center;
	background-position-y: center;
	background-repeat:no-repeat;

	color: lightgrey;
}

#about .about-container {
	flex-direction: column-reverse;
	text-align: center;
	width: 80%;
	max-width: 700px;
	height: fit-content;
	margin: 0 auto;
	padding: 100px 20px;
	color: lightgrey;
	background-color: #0000008c;
}


#about .aboutcontent {
	width: 100%;
	height: fit-content;
}

#about .aboutcontent h1{
	color: lightgrey;

}


#about .aboutcontent h2 {
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 10px;
	color: lightgrey;

}
#about .aboutcontent p {
	margin-bottom: 20px;
	color: lightgrey;

}
#about .aboutcontent .cta {
	color: lightgrey;
	margin-bottom: 50px;
	padding: 10px 20px;
	font-size: 2rem;
}
@media (max-width: 768px) {
	#about .about-container {
	   flex-direction: column;
	   text-align: center;
	   width: 90%;
	   height: fit-content;
	   margin: 0 auto;
	   padding: 80px 20px;
	   color: lightgrey;
	   background-color: #0000008c;
	}
 }

/* ----------------     CONTACT   -----------------	*/

a {
	text-decoration: none;
}

.section-title {
	font-size: 4rem;
	font-weight: 300;
	color: black;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	text-align: center;
}

#contact .contact {
	flex-direction: column-reverse;
	text-align: center;
	max-width: 1500px;
	margin: 0 auto;
	padding: 100px 20px;
}
#contact .col-left {
	width: 250px;
	height: 360px;
}
#contact .col-right {
	width: 100%;
}
#contact .col-right h2 {
	font-size: 1.8rem;
	font-weight: 500;
	letter-spacing: 0.2rem;
	margin-bottom: 10px;
}
#contact .col-right p {
	margin-bottom: 20px;
}
#contact .col-right .cta {
	color: black;
	margin-bottom: 50px;
	padding: 10px 20px;
	font-size: 2rem;
}
#contact .col-left .contact-img img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
#contact .col-left .contact-img {
	height: 100%;
	width: 100%;
	position: relative;
	border: 10px solid white;
}
#contact .col-left .contact-img::after {
	content: '';
	position: absolute;
	left: -33px;
	top: 19px;
	height: 98%;
	width: 98%;
	border: 7px solid rgb(163, 163, 163);
	z-index: -1;
}
.cta {
	display: inline-block;
	padding: 10px 30px;
	color: white;
	background-color: transparent;
	border: 2px solid rgb(62, 62, 62);
	font-size: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	margin-top: 30px;
	transition: 0.3s ease;
	transition-property: background-color, color;
}
.cta:hover {
	color: black;
	background-color: rgb(255, 255, 255);
}

  
  /*-----------------------------------*\
    #FOOTER
  \*-----------------------------------*/
  
  footer {
    background: var(--signbrown);
    padding: 30px 0;
  }
  
  
 
  .footer-bottom {
    margin-bottom: 50px;
    text-align: center;
  }
  
  .payment-img {
    max-width: 335px;
    width: 100%;
    margin: auto;
    margin-bottom: 15px;
  }
  
  .copyright {
    color: var(--signbrown-v2);
    font-size: var(--fs-8);
    font-weight: var(--weight-500);
    text-transform: capitalize;
    letter-spacing: 1.2px;
  }
  
  .copyright a {
    display: inline;
    color: inherit;
  }
  
  
  
  
  
  /*-----------------------------------*\
    #RESPONSIVE
  \*-----------------------------------*/
  
  
  /**
   * responsive larger than 480px screen
   */
  
  @media (min-width: 480px) {
  
    /**
     * #CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-1: 1.875rem;
  
    }
  
  
  
    /**
     * #HEADER
     */
  
    .header-top {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--signyellow);
    }
  
    .header-main { padding: 25px 0; }
  
  
  
    /**
     * #BANNER
     */
  
    .slider-item { aspect-ratio: 5 / 3; }
  
    .banner-content {
      top: 50%;
      right: auto;
      bottom: auto;
      -webkit-transform: translateY(-50%);
          -ms-transform: translateY(-50%);
              transform: translateY(-50%);
      max-width: 320px;
    }
  
  
  
    .banner-text b { font-size: var(--fs-11); }
  
    .banner-btn { padding: 7px 20px; }
  
  
  
    /**
     * #PRODUCT 
     */
  
    .product-grid {
      -ms-grid-columns: 1fr 30px 1fr;
      grid-template-columns: 1fr 1fr;
      gap: 30px;
    }
  

  
    /**
     * #FOOTER
     */
  
    .copyright { --fs-8: 0.875rem; }
  
  }
  
  
  
  
  
  /**
   * responsive larger than 570px screen
   */
  
  @media (min-width: 570px) {
  
    /**
     * #HEADER
     */
  
    .header-top .container,
    .header-main .container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -webkit-justify-content: space-between;
          -ms-flex-pack: justify;
              justify-content: space-between;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
    }
  
    .header-logo { margin-bottom: 0; }
  
  
  
    /**
     * #BANNER
     */
  
    .slider-item { aspect-ratio: 5 / 2; }
  
  
    .banner-subtitle { 
      --fs-7: 1rem; 
      color: var(--signyellow);
    }
  
      .banner-title {
        color: var(--signyellow);
  
      }
    
      .banner-text {
        display: block;
        color: var(--signyellow);
        font-size: var(--fs-11);
        font-weight: var(--weight-500);
        margin-bottom: 10px;
      }

  
    /**
     * #PRODUCT
     */
  
    .product-minimal .showcase-container { min-width: 50%; }
  
    .product-featured .showcase-img {
      max-width: 450px;
      margin: auto;
    }
  
    .product-featured .countdown { gap: 20px; }
  
  
  }
  
  
  
  
  
  /**
   * responsive larger than 768px screen
   */
  
  @media (min-width: 768px) {
  
    /**
     * #CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-1: 2.375rem;
  
    }
  
  
  
    /**
     * #BASE 
     */
  
    html { font-size: 17px; }
  
  
  
    /**
     * #REUSED STYLE 
     */
  
    .container {
      max-width: 750px;
      margin: auto;
    }
  
 
  
    /**
     * #HEADER 
     */
  
    .header-main .container { gap: 80px; }
  
    .header-search-container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -ms-flex-positive: 1; flex-grow: 1; }
  
  
  
    /**
     * #BANNER 
     */
  
    .slider-item {
      aspect-ratio: auto;
      height: 350px;
    }
    .banner-title {--fs-2: 1.75rem;}

    .banner-content { max-width: 380px; }
  
    .banner-subtitle { --fs-7: 1.25rem; }
  
    .banner-text { --fs-7: 1.125rem; }
  
    .banner-text b { --fs-2: 1.875rem; }
  
    .banner-btn { --fs-11: 0.75rem; }
  
  
 
  
    /**
     * #PRODUCT 
     */
  
  
    .product-showcase {
      min-width: -webkit-calc(50% - 10px);
      min-width: calc(50% - 10px);
      width: -webkit-calc(50% - 10px);
      width: calc(50% - 10px);
    }
  
    .showcase-container { min-width: 100%; }
    
    .product-featured .showcase {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -webkit-justify-content: center;
          -ms-flex-pack: center;
              justify-content: center;
      -webkit-box-align: center;
      -webkit-align-items: center;
          -ms-flex-align: center;
              align-items: center;
      gap: 20px;
    }
  
    .product-featured .showcase-img { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; }
  
    .product-featured .showcase-content {
      margin-top: 0;
      min-width: -webkit-calc(100% - 345px);
      min-width: calc(100% - 345px);
    }
  
  
  
    /**
     * #FOOTER 
     */
  
    .footer-nav .container {
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-flex-wrap: wrap;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
      row-gap: 50px;
      -webkit-column-gap: 20px;
         -moz-column-gap: 20px;
              column-gap: 20px;
    }
  
 
  
  }
  
  
  
  
  
  /**
   * responsive larger than 1024px screen
   */
  
  @media (min-width: 1024px) {
  
    /**
     * #CUSTOM PROPERTY
     */
  
    :root {
  
      /**
       * typography 
       */
  
      --fs-1: 2.625rem;
      --fs-2: 1.125rem;
  
    }
  
  
  
    /**
     * #REUSED STYLE 
     */
  
    .container { max-width: 980px; }
  
  
 
  
    /**
     * #BANNER 
     */
  
    .banner { margin-top: 0; }
  
    .slider-item { height: 380px; }
  
    .banner-content {
      left: 75px;
      max-width: 400px;
    }
  
    .banner-subtitle { --fs-7: 1.625rem; }
  
    .banner-text { --fs-7: 1.375rem; }
  
    .banner-btn { --fs-11: 0.875rem; }
  
  
  
  
    /**
     * #PRODUCT 
     */
  
    .product-container .container {
      position: relative;
      display: -webkit-box;
      display: -webkit-flex;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: start;
      -webkit-align-items: flex-start;
          -ms-flex-align: start;
              align-items: flex-start;
      gap: 30px;
      margin-bottom: 30px;
    }
  
  
    .product-featured .countdown-content { padding: 5px 10px; }
  
    .product-grid { -ms-grid-columns: (1fr)[3]; grid-template-columns: repeat(3, 1fr); }
  
  
  
  
    /**
     * #FOOTER
     */
  
    .footer-nav-list {
      min-width: -webkit-calc(20% - 16px);
      min-width: calc(20% - 16px);
      width: -webkit-calc(20% - 16px);
      width: calc(20% - 16px);
    }
  
    .footer-nav-list:last-child { display: none; }
  
    .footer-bottom { margin-bottom: 0; }
  
  
  
  
  
  
  
  /**
   * responsive larger than 1200px screen
   */
  
  @media (min-width: 1200px) {
  
    /**
     * #REUSED STYLE 
     */
  
    .container { max-width: 1200px; }
  
  
 
  
    /**
     * #BANNER
     */
  
    .slider-item:last-child .banner-img { -o-object-position: top; object-position: top; }
  
  
 
  
    /**
     * #PRODUCT
     */
  
    .product-featured .showcase > div { min-width: -webkit-calc(50% - 10px); min-width: calc(50% - 10px); }
  
    .product-featured .display-number { --fs-5: 1.125rem; }
  
    .product-grid { -ms-grid-columns: (1fr)[4]; grid-template-columns: repeat(4, 1fr); }
  
  
  
  
  
    /**
     * #FOOTER
     */
  
    footer { padding-top: 50px; }
  
  
  
  
  
  
  /**
   * responsive larger than 1400px screen
   */
  
  @media (min-width: 1400px) {
  
    /**
     * #BASE 
     */
  
    html { font-size: 18px; }
  
  
  
    /**
     * #REUSED STYLE 
     */
  
    .container { max-width: 1350px; }
  
  
  
    /**
     * #BANNER
     */
  
    .slider-item { height: 450px; }
  
    .banner-content {
      left: 110px;
      max-width: 460px;
    }
  
  }