/*****************************/
/* (84*16 =1344 (which mean this code will fireup at 1344)) BELLOW
1344px(FOR SMALLER DESKTOP) */
/*****************************/
@media (max-width: 84em) {
  .hero {
    max-width: 120rem;
  }
  .hero-img {
    width: 100%;
  }
  .primary-heading {
    font-size: 3.2rem;
  }
  .arrow-icon {
    top: 502px;
    left: 60%;
  }
}
.categories-header {
  font-size: 2.7rem;
}
.price-con {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
}

/*****************************/
/* BELLOW 1088x (68em) --(Landscape Tablets) */
/*****************************/
@media (max-width: 68em) {
  .hero-sub-text {
    margin-top: 1.6rem;
  }
  .hero-text-container {
    padding: 3.2rem;
  }
  .collection-con::after {
    top: 8px;
    left: 75px;
  }
  .categories-header {
    font-size: 2.4rem;
  }
  .categories-sub {
    font-size: 1.6rem;
  }
  .collection-sub-head {
    margin-top: 1.6rem;
  }
  .featured-sub {
    margin-top: 1.6rem;
    line-height: 1.5;
    padding-bottom: 1.4rem;
  }
  .hero-img {
    width: 100%;
  }
  .shoe-icon {
    width: 4.1rem;
  }
  .star {
    width: 3.1rem;
    top: 286px;
  }
  .hero-img-container {
    padding-top: 6.4rem;
  }
}
/* ///////////// */
/* BELLOW 100px */
/* ///////////// */

/* 9px/16px=0.5625 (Ans*100%) = 56.26% */
@media (max-width: 62.5em) {
  html {
    font-size: 56.25%;
  }
  .hero-img {
    display: none;
  }
  .hero-Tab-Mode-img {
    display: block;
    width: 100%;
    padding: 0 8rem;
  }
  .hero-con {
    background-color: #fff4cf;
    padding-bottom: 9rem;
    border-bottom-left-radius: 9rem;
    border-bottom-right-radius: 9rem;
  }
  .hero-text-container {
    background-color: #fff4cf;
  }
  .hero-img-container {
    background-color: #fff4cf;
  }
  .hero-img-container {
    padding-top: 0;
  }
  .hero {
    text-align: center;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .primary-heading {
    padding-top: 2.4rem;
  }
  .faces-con {
    justify-content: center;
    padding-bottom: 2.4rem;
  }
  .arrow-icon {
    top: 466px;
    left: 50%;
  }
  .primary-heading {
    padding-top: 3.2rem;
    font-size: 4.4rem;
  }
  .hero-sub-text {
    padding: 0 2.4rem;
  }
  .feature-con {
    display: grid;
    gap: 1.2rem;
  }
  .feature-tittle {
    margin-top: 1.4rem;
  }

  .containner {
    margin-top: 6.4rem;
  }
  .new-collection {
    gap: 8rem;
    grid-template-columns: repeat(2, 1fr);
  }
  .collection-con::after {
    top: 22px;
    left: 134px;
    padding: 0.4rem;
    padding-bottom: 1.6rem;
    font-size: 2rem;
  }
  .arrow-icon {
    top: 358px;
    left: 50%;
  }
  .collection-heading {
    font-size: 3.8rem;
  }
  .collection-sub-head {
    font-size: 2.4rem;
  }
  .present-price {
    font-size: 2.4rem;
  }
  .canceled-price {
    font-size: 1.6rem;
  }
  .new-collection {
    padding: 2.4rem 4.8rem;
    gap: 4.8rem;
  }
  .collection-con::after {
    top: 26px;
    left: 104px;
    padding-bottom: 0.8rem;
    font-size: 2rem;
  }
  .add-main-container {
    margin-top: 4.8rem;
    padding-bottom: 2.4rem;
  }
  .featured-product-con {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4.8rem;
    padding: 0 4.8rem;
  }
  .feature-product-header {
    font-size: 2.8rem;
    font-weight: 600;
  }

  .CTA-text-section {
    background-color: #fff;
    padding: 2.4rem;
  }

  .arrow-icon {
    top: 281.4px;
    left: 65%;
  }
  .shoe-icon {
    position: absolute;
    top: 25px;
    left: 48%;
  }
  .star {
    width: 3.1rem;
    top: 146px;
  }
  .cart-icon {
    position: absolute;
    top: 316px;
    left: 15%;
  }
  .CTA-header {
    font-size: 3rem;
  }
  .CTA-sub-header {
    font-size: 1.4rem;
  }
}
@media (max-width: 58em) {
  /* NAVIGATION WORKING */
  /* CODE FOR SVG NAV ICON */
  .nav-open .NAV-btn-i {
    display: none;
  }
  .nav-open .NAV-btn-ii {
    display: block;
  }
  .nav-open .social-icons2 {
    font-size: 2rem;
    color: #333;
    display: block;
    padding: 0.7rem;
    background-color: #333;
    border-radius: 50px;
    color: #fff;
  }
  .NAV-btn {
    display: block;
    z-index: 9999;
  }

  .navigation-links {
    display: none;
  }
  /* .navigations {
    position: relative;
  } */
  .navigation-links {
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.774);
    justify-content: center;
    flex-direction: column;
    align-items: center;
    z-index: 1;
    transform: translateX(150%);
    transition: all 0 ease-in;
    pointer-events: none;
    visibility: hidden;
  }
  .nav-open .navigation-links {
    padding-top: 4rem;
    transform: translateX(0);
    position: absolute;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    pointer-events: auto;
    visibility: visible;
  }
  .nav-open .navigation-link {
    font-size: 2.4rem;
    text-transform: uppercase;
  }
}
@media (max-width: 49em) {
  .containner {
    padding: 0 4.8rem;
  }
  .span {
    font-size: 2.4rem;
    margin-right: 0.2rem;
  }
  .hero-Tab-Mode-img {
    padding: 0 2.4rem;
  }
  .featured-product:hover {
    transform: translateY(0);
  }
  .featured-sub {
    font-size: 1.4rem;
    line-height: 1.5;
    margin-bottom: 1.8rem;
  }
  .featured-img-spacer {
    margin-bottom: 1rem;
  }
  .footer {
    padding: 1.2rem;
    margin-top: 4.8rem;
  }
  .footer-link-header {
    font-weight: 600;
  }
  .footer-link:link,
  .footer-link:visited {
    color: #fff;
    font-size: 1.4rem;
    text-decoration: none;
    font-weight: 300;
    transition: all 0.3s ease-in;
  }
  .feature-tittle {
    font-size: 1.4rem;
    font-weight: 700;
  }
}
@media (max-width: 34em) {
  .hero {
    text-align: left;
  }
  .feature-con {
    display: grid;
    gap: 2.4rem;
  }
  .CTA-section {
    margin-top: 8rem;
  }
  .footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.4rem;
  }
  .footer-logo {
    grid-column: 2/3;
    grid-row: 2/3;
    grid-column: span 4;
    text-align: center;
  }
  .footer-social-icon-con {
    justify-content: center;
    margin-top: 1.2rem;
  }
  html {
    font-size: 50%;
  }
  .primary-heading {
    padding-top: 3.2rem;
    font-size: 3.8rem;
    margin: 0 0;
    font-weight: 800;
    /* padding-right: 2.4rem; */
  }
  .hero-sub-text {
    padding: 0 0;
    font-size: 1.6rem;
    font-weight: 500;
  }
  .break {
    display: none;
  }
  .hero-text-container {
    padding: 1.4rem;
  }
  .shoe-icon {
    top: 3px;
    left: 49%;
  }

  .arrow-icon {
    display: none;
  }
  .faces-con {
    justify-content: left;
  }
  .hero-Tab-Mode-img {
    display: none;
  }
  .hero-phone-Mode-img {
    display: block;
    width: 100%;
  }
  .hero-con {
    background-color: #fff4cf;
    padding-bottom: 2.4rem;
    border-bottom-left-radius: 4rem;
    border-bottom-right-radius: 4rem;
  }
  .CTA-container {
    grid-template-columns: 1fr;
    overflow: hidden;
    border-radius: 11px;
  }
  .CTA-img-section {
    height: 30rem;
    grid-row: 1;
    background-position: center;
  }
  .CTA-sub-header {
    font-size: 1.8rem;
  }
  .form {
    flex-direction: column;
  }
  .containner {
    padding: 0 3.2rem;
  }
  .CTA-container {
    box-shadow: 0 0 22px 1px rgb(0 0 0 / 30%);
  }
  .hero-con {
    padding-top: 3.2rem;
  }
  .star {
    top: 67px;
  }
  .cart-icon {
    left: 60%;
    top: 260px;
  }
  .CTA-text-section {
    background-color: #f7f7f7;
    padding: 2.4rem;
  }
  .feature-con {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 6.4rem;
  }
  .new-collection {
    gap: 8rem;
    grid-template-columns: 1fr;
  }
  .collection-con::after {
    left: 78px;
  }
  .FAETURED-PRODUCT-SCROLLER {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-columns: 50%;
    overflow-x: auto;
    gap: 2rem;
    overscroll-behavior-inline: contain;
    scroll-behavior: smooth;
    padding: 0;
  }
  .SNAP-INLINE {
    scroll-snap-type: inline mandatory;
  }

  .feature-product-header {
    font-size: 2rem;
  }
  .featured-CTA {
    display: inline-block;
  }
  .featured-price-con {
    padding: 0 6rem;
  }
  .btn-sapcing {
    margin: 0 6rem;
  }
  .feature-product-header {
    font-size: 3.2rem;
    font-weight: 700;
    margin-top: 1.8rem;
  }
  .featured-sub {
    font-size: 1.8rem;
    margin-top: 0;
    padding-bottom: 0;
  }
  .featured-product {
    border-radius: 9px;
  }

  .add-main-container {
    display: grid;
    grid-template-columns: 1fr;
  }
  .add {
    height: 100%;
  }
  .containner {
    padding: 0 2.4rem;
  }
}
/* ///////////////// */
/* FIXING SAFARI FLEXBOX GAP */

.no-flexbox-gap .navigation-links li:not(:last-child) {
  margin-right: 5.2rem;
}
.no-flexbox-gap .navigation-links p:not(:last-child) {
  margin-bottom: 1.2rem;
}