/**************************
       INITIAL SET UP
**************************/

@font-face {
    font-family: "NikeNormal";
    src: url(Fonts/Nike-Basic-Font.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "NikeSpecial";
    src: url(Fonts/Nike-Special-Font.woff2) format("woff2");
    font-weight: normal;
    font-style: normal;
}

:root {
    --font-family-nike: NikeSpecial, serif;
    --font-family-normal: NikeNormal, serif;
    
    --font-size-large: 1.7rem;
    --font-size-med: 1.5rem;
    --font-size-small: 1.1rem;
    --font-size-extra-small: .8rem;
    
    --color-light: #FFFFFF ;
    --color-dark: #111111;
    --color-secondary: #F5F5F5;
    --color-secondary-mid: #E5E5E5;
    --color-secondary-dark: #757575;
}

*,*::before,*::after {
    box-sizing: border-box;
}

/********************TYPOGRAPHY**************************/
html,body {
    height: 100%;
    margin: 0;
    font-size: var(--font-size-small);
}

body {
    overflow-x: hidden;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: var(--font-size-extra-small);
    font-family: var(--font-family-normal);
}

p {
    padding: 0;
    margin: 0;
    font-family: var(--font-family-normal);
}

text {
    font-family: var(--font-family-normal);
}

button {
    /* font-size: calc(var(--font-size-extra-small) + .1rem); */
    font-family: var(--font-family-normal);
}

a {
    text-decoration: none;
    font-size: var(--font-size-extra-small);
    font-family: var(--font-family-normal);
}

h1,h2,h3 {
    font-family: var(--font-family-nike)
}

h2 {
    margin: 0;
    padding: 0;
    font-size: var(--font-size-large);
}

/************************IMAGERY*****************************/
img {
    max-width: 100%;
    vertical-align: middle;
}

svg {
    padding: 0;
    margin: 0;
    vertical-align: middle;
}

/************Tablet Default Properties Here**************/
@media (min-width: 600px) {
    :root {
        --font-size-large: 2.5rem;
        --font-size-med: 1.6rem;
        --font-size-small: 1.1rem;
        --font-size-extra-small: 1rem;
        --font-size-extra-extra-small: .7rem;
    }

    button {
        font-size: var(--font-size-small);
    }

    h2 {
        font-size: var(--font-size-med);
    }

    ul {
        font-size: var(--font-size-extra-small);
    }

    img {
        display: block;
        margin-inline: auto;
    }
}

/**********Desktop Default Properties Here***************/
@media (min-width: 800px) { 
    :root {
        --font-size-large: 3.2rem;
        --font-size-med: 1.8rem;
        --font-size-small: 1.1rem;
        --font-size-extra-small: 1.1rem;
    }

    h2 {
        font-size: var(--font-size-med);
    }

    ul {
        font-size: var(--font-size-extra-small);
    }
}


/**********4k Default Properties Here***************/
@media (min-width: 1500px) { 
    :root {
        --font-size-large: 5rem;
        --font-size-med: 1.65rem;
        --font-size-small: 1.25rem;
        --font-size-extra-small: .8rem;
    }

    h2 {
        font-size: var(--font-size-med);
    }

    ul {
        font-size: var(--font-size-extra-small);
    }
}

/**************************
          HEADER
**************************/
header {
    background-color: var(--color-light);
}

.top-header {
    display: none;
}

.header-menu {
    display: none;
}

.header-wrapper {
    margin: 0 0.8em;
}

.bottom-header {
    display: flex;
    justify-content: space-between;
}

.shop-icons {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: .5em;
}

.shop-icons li:nth-child(3) {
    display: none;
}

.shop-icons svg {
    width: 30px;
    height: 30px;
}

.shop-icons a {
    width: 100%;
    height: 100%;
}

.shop-icons li {
    padding-inline: .1em;
    border-radius: 50%;
}

.shop-icons li:hover {
    cursor: pointer;
    background-color: var(--color-secondary-mid);
}

.shop-icons input {
    display: none;
}
/* Skip Navigation Button */
.skip-nav-button {
    position: absolute;
    padding: .2em;
    color: black;
    background-color: white;
    border: 2px solid black;

    left: .9em;

    transform: translateY(-500%);
}

.skip-nav-button:focus {
transform: translateY(30%);
}


/* Mobile Menu Toggle*/

#mobile-nav-toggle-off {
    position: absolute;
    top: 5vw;
    right: 5vw;
}

.mobile-nav-open .mobile-nav-menu {
    display: flex;
    flex-direction: column;
    transform: translate(0);
    transition: transform 250ms ease-in-out;
}

.no-scroll.mobile-nav-open {
    overflow: hidden;
}

.mobile-nav-open body {
    position: relative;
}

.mobile-nav-open .mobile-nav-menu-blur {
    position: absolute;
    z-index: 1;
    inset: 0;
    background-color: rgba(117, 117, 117, 0.514);
    backdrop-filter: blur(4px);
}

.mobile-nav-menu {
    position: absolute;
    height: 100vh;
    width: 75vw;
    top: 0;
    right: 0;
    gap: 2em;
    
    background-color: var(--color-light);
    overflow-y: auto;
    padding: 1.5em;
    padding-top: 15vw;
    z-index: 10;
    
    transform: translate(100%);
    transition: transform 250ms ease-in-out;

    visibility: 0;
    display: none;
}

.mobile-nav-menu svg {
    width: 2rem;
    justify-self: flex-end;
}

.mobile-nav-menu svg:hover {
    cursor: pointer;
}

/* Mobile Header Menu */

.mobile-header-menu {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.mobile-header-menu li {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.mobile-header-menu svg {
    width: .5rem;
    vertical-align: middle;
}

.mobile-header-menu li:last-of-type svg {
    display: none;
}

.mobile-header-menu a {
    color: var(--color-dark);
    font-size: var(--font-size-large);
    border-bottom: 2px solid var(--color-light);
}

.mobile-header-menu a:hover {
    border-bottom: 2px solid var(--color-dark);
}

/* Nav Popular Brands */

.nav-popular-brands {
    display: flex;
    flex-direction: column;
    gap: .5em;
}
.nav-popular-brands svg {
    margin-right: .5em;
}

.nav-popular-brands a {
    max-width: max-content;
    padding: .2em;
    color: var(--color-dark);
    font-size: var(--font-size-small);
    border-bottom: 2px solid var(--color-light);
}

.nav-popular-brands a:hover {
    border-bottom: 2px solid var(--color-dark);
}

/* Nav Member Info */

.nav-member-info {
    width: 75%;
    margin-top: 2em;
    font-size: var(--font-size-small);
    color: var(--color-secondary-dark);
}

.nav-member-info a {
    font-size: var(--font-size-small);
    color: var(--color-dark);
}

.nav-member-info a:hover {
    border-bottom: 2px solid var(--color-dark);
}

.nav-member-info button {
    margin: .5em 0;
    font-size: var(--font-size-small);
}


/* Nav Customer Service */

.nav-customer-service {
    display: flex;
    flex-direction: column;
    gap: 1em;
    margin-bottom: 8em;
}

.nav-customer-service svg {
    width: var(--font-size-med);
    vertical-align: top;
    margin-right: .5em;
}

.nav-customer-service a {
    color: var(--color-dark);
    font-size: var(--font-size-small);
}

.nav-customer-service a:hover {
    border-bottom: 2px solid var(--color-dark);
}

@media (min-width:600px) { /*Tablet Properties */
    .mobile-nav-menu {
        width: 45vw;
        padding-top: 8vw;
    }

    .mobile-header-menu a {
        font-size: var(--font-size-med);
    }

    #mobile-nav-toggle-off {
        top: 2vw;
        right: 2vw;
    }
}

@media (min-width:800px) {/*Laptop Properties*/
    header {
        position: initial;
    }

    .header-wrapper {
        margin: 0;
    }

    /* Top Header */
    .top-header {
        display: flex;
        justify-content: space-between;
        padding: 0 2em;
        background-color: var(--color-secondary);
    }

    .top-header-logo-container {
        min-width: 7vw;
        display: flex;
        justify-content: space-between;
    }

    .membership-login {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        width: 25vw;
    }

    .membership-login li a {
        color: var(--color-dark);
        font-size: var(--font-size-extra-small);
        border-bottom: 1px solid var(--color-secondary);
    }

    .membership-login li a:hover {
        border-bottom: 1px solid var(--color-dark);
    }

    .membership-login li:nth-child(2)::before {
        content: '|';
        display: inline;
        padding: 0 .5em;
    }

    .membership-login li:nth-child(2)::after {
        content: '|';
        display: inline;
        padding: 0 .5em;
    }
    
    /* Bottom Header */
    .bottom-header {
        padding: 0 2em;
    }

    .header-menu {
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: 30vw;
        margin-left: 10em;
    }

    .header-menu li a {
        color: var(--color-dark);
        border-bottom: 2px solid var(--color-light);
    }

    .header-menu li a:hover {
        border-bottom: 2px solid var(--color-dark);
    }

    .shop-icons {
        justify-content: space-between;
        max-width: min-content;
        gap: 0;
    }

    .shop-icons li:nth-child(3) {
        display: inline;
    }

    .shop-icons li:last-of-type {
        display: none;
    }

    .shop-icons li:nth-child(2) {
        background-color: var(--color-secondary);
        padding: .3em;
        border-radius: 50px;
        max-width: 55%;
    }

    .shop-icons input {
        background-color: var(--color-secondary);
        display: inline;
        border: none;
        padding: .4em;
        max-width: 65%;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    /* Top Header */
    .top-header {
        padding: 0 10vw;
        height: min-content;
    }

    .top-header-logo-container {
        justify-content: flex-start;
        gap: 2em;
    }

    .top-header-logo-container svg {
        height: min-content;
    }

    .membership-login {
        height: min-content;
    }
    
    /* Bottom Header */
    .bottom-header {
        padding: 0 10vw;
    }

    .header-menu {
        justify-content: center;
        gap: 3em;
    }
}

/***************************
          BODY
***************************/

.main-wrapper {
    display: grid;
    grid-template-columns: auto;
    gap: 2.5em;
    margin: 0 .8em;
}

.btn-dark {
    color: var(--color-light);
    font-weight: lighter;
    padding: .5em 1em;
    background-color: var(--color-dark);
    border: none;
    border-radius: 100px;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: var(--color-secondary-dark);
    cursor: pointer;
}

.btn-light {
    color: var(--color-dark);
    font-weight: lighter;
    padding: .5em 1em;
    background-color: var(--color-light);
    border: none;
    border-radius: 100px;
}

.btn-light:hover {
    color: var(--color-light);
    background-color: var(--color-secondary-dark);
    cursor: pointer;
}

@media (min-width:800px) {/*Laptop Properties*/
    .main-wrapper {
        margin: 0 2em;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .main-wrapper {
        margin: 0 10vw;
    }
}

/************* DISCOUNTS BANNER ***************/

.discounts-banner {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 100vw;
    background-color: var(--color-secondary);
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
}

.discounts-banner > * {
    animation: test 6.5s 2s ease-in-out forwards infinite alternate;
}

@keyframes test {
    0%, 50% {
        transform: translate(0,0);
    }
    60%, 100% {
        transform: translateX(-100%);
    }
}

.discounts-banner::-webkit-scrollbar {
    display: none;
}

.discount-item {
    display: flex;
    flex-direction: column;
    gap: .3em;
    padding: .7em;
    margin: 0;
    text-align: center;
    align-items: center;
    font-size: var(--font-size-extra-small);
}

.discount-item a {
    color: black;
    text-decoration: underline;
    width: fit-content;
    font-size: calc(var(--font-size-extra-small) - .15rem);
}

/************* BIG MEDIA CONTAINER ***************/

.big-picture {
    max-width: 90vw;
    margin: 0 auto;
}

@media (min-width:800px) { /*Laptop Properties*/
    .big-picture img {
        min-width: 100%;
    }
}

/************* PROMO CONTAINER ***************/

.promo-container {
    display: grid;
    grid-template-columns: auto;
    justify-items: center;
    text-align: center;
    gap: .5em;
}

.promo-container h2 {
    font-size: var(--font-size-large);
}

.promo-container p {
    font-weight: lighter;
    font-size: var(--font-size-small);
}

.promo-container-buttons {
    display: flex;
    gap: 1em;
}

/************* POPULAR ITEMS CONTAINER ***************/

.popular-items-container {
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
}

.popular-items-header h2 {
    font-size: var(--font-size-med);
}

.popular-items-header-toggles {
    display: none;
}

.popular-items {
    display: grid;
    gap: 1.5em;
    grid-auto-flow: column;
    grid-auto-columns: 75vw;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
}

.popular-items > * {
    scroll-snap-align: start;
}

.popular-items::-webkit-scrollbar {
    border-radius: 100vw;
    height: .25em;
}

.popular-items::-webkit-scrollbar-track{
    background-color: var(--color-secondary);
    border-radius: 100vw;
    margin: 2em;
}

.popular-items::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary-dark);
    border-radius: 100vw;
}

.popular-items::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark);
}

.popular-item {
    margin-bottom: 1em;
}

.popular-item-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    color: var(--color-dark);
    font-size: var(--font-size-small);
    padding-right: .3em;
}

.popular-item-info-name {
    display: flex;
    flex-direction: column;
    gap: .1em;
}

.popular-item-info-name text {
    color: var(--color-secondary-dark);
}

@media (min-width:600px) {/*Tablet Properties*/
    .popular-items {
        grid-auto-columns: min-content;
        max-width: fit-content;
        justify-content: start;
    }

    .popular-item {
        max-width: fit-content;
    }

    .popular-item-info {
        justify-content: space-between;
    }
    
    .popular-item img {
        max-width: 50vw;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    .popular-items {
        display: flex;
    }

    .popular-item img {
        max-width: 30vw;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .popular-item img {
        max-width: 25vw;
    }
}

/************* SEASONAL PROMOS CONTAINER ***************/

.seasonal-promos-container {
    display: grid;
    grid-template-columns: auto;
    gap: 1em;
}

.seasonal-promo {
    position: relative;
    text-align: start;
}

.seasonal-promo-info {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: .5em;
    padding: .3em .5em;
    color: var(--color-light);
}

.seasonal-promo-info button {
    width: fit-content;
}

.seasonal-promo-info-title {
    font-size: var(--font-size-large);
}

.seasonal-promo-info-subtitle {
    font-size: var(--font-size-small);
}

@media (min-width:600px) { /* Tablet Properties*/
    .seasonal-promo-info {
        padding-bottom: 1.5em;
        padding-left: 1.5em;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .seasonal-promo img {
        min-width: 100%;
    }
}

/************* FEATURED STYLES CONTAINER ***************/

.featured-styles-cards {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5em;
}

.featured-style-card {
    position: relative;
    max-width: 100%;
    text-align: start;
}

.featured-style-card-info {
    position: absolute;
    bottom: .5em;
    padding: .5em;
    color: var(--color-secondary);
    font-size: var(--font-size-med);
}

.featured-style-card-info button {
    margin-top: .2em;
}

@media (min-width:600px) { /* Tablet Properties*/
    .featured-styles-cards {
        flex-direction: row;
        justify-content: space-evenly;
    }

    .featured-style-card {
        max-width: 45vw;
    }

    .featured-style-card-info {
        padding-bottom: .5em;
        padding-left: 1em;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .featured-style-container {
        min-width: fit-content;
        margin-inline: auto;
    }

    .featured-styles-cards {
        justify-content: space-between;
    }

    .featured-style-card {
        max-width: fit-content;
    }

    .featured-style-card img {
        min-width: 39vw;
    }
}

/************* JUST IN CONTAINER ***************/

@media (min-width:1500px) {/*4k Properties*/
    .just-in-container img {
        min-width: 100%;
    }
}

/************* IN SEASON CONTAINER ***************/

.in-season-container {
    display: grid;
    grid-template-columns: auto;
    gap: .5em;
}

.in-season-items {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70vw;
    gap: 1em;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
}

.in-season-items > * {
    scroll-snap-align: start;
}

.in-season-items::-webkit-scrollbar {
    border-radius: 100vw;
    height: .25em;
}

.in-season-items::-webkit-scrollbar-track{
    background-color: var(--color-secondary);
    border-radius: 100vw;
    margin: 2em;
    padding: 1em;
}

.in-season-items::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary-dark);
    border-radius: 100vw;
}

.in-season-items::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark);
}

.in-season-item {
    margin-bottom: .5em;
}

.in-season-item a {
    color: var(--color-dark);
    font-size: var(--font-size-med);
}

@media (min-width:600px) { /* Tablet Properties*/
    .in-season-items {
        grid-auto-columns: 60vw;
        text-align: center;
        margin: 0;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    .in-season-items {
        display: flex;
    }

    .in-season-items::-webkit-scrollbar {
        display: none;
    }
}

/************* MEMBER BENEFITS CONTAINER ***************/

.member-benefits-container {
    display: grid;
    grid-template-columns: auto;
    gap: .5em;
    text-align: center;
}

.member-benefits {
    position: relative;
}

.member-benefits img {
    display: block;
}

.member-benefits img:last-of-type {
    display: none;
}

.member-benefits-info {
    position: absolute;
    bottom: .8em;
    left: 50%;
    transform: translate(-50%,0);
    width: 30ch;
    font-size: var(--font-size-small);
}

.member-benefits text {
    position: absolute;
    width: 20ch;
    font-size: var(--font-size-med);
    top: 2em;
    transform: translate(-50%, -50%);
}

.member-benefits-info-buttons {
    margin-top: .3em;
    display: flex;
    gap: 1em;
    justify-content: center;
}

@media (min-width:600px) { /* Tablet Properties*/
    .member-benefits-info {
        position: initial;
        inset: initial;
        transform: initial;
        left: initial;
        bottom: initial;
        width: 80vw;
        margin-inline: auto;
        font-size: var(--font-size-small);
    }

    .member-benefits img:first-of-type {
        display: none;
    }

    .member-benefits img:last-of-type {
        display: block;
        object-fit: cover;
        object-position: bottom;
    }

    .member-benefits text {
        max-height: fit-content;
        top: 50%;
        width: 40ch;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    .member-benefits text {
        top: 65%;
        transform: translate(-50%, -50%);
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .member-benefits img {
        min-width: 100%;
    }
}

/************* EXCLUSIVE PERKS CONTAINER ***************/

.exclusive-perks-container {
    display: grid;
    grid-template-columns: auto;
    text-align: center;
    gap: .5em;
}

.exclusive-perks {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 70vw;
    gap: 1em;
    overflow-x: auto;
    scroll-snap-type: inline mandatory;
}

.exclusive-perk {
    margin-bottom: .5em;
}

.exclusive-perk a {
    color: var(--color-dark);
}

.exclusive-perks > * {
    scroll-snap-align: start;
}

.exclusive-perks::-webkit-scrollbar {
    border-radius: 100vw;
    height: .25em;
}

.exclusive-perks::-webkit-scrollbar-track{
    background-color: var(--color-secondary);
    border-radius: 100vw;
    margin: 2em;
    padding: 1em;
}

.exclusive-perks::-webkit-scrollbar-thumb {
    background-color: var(--color-secondary-dark);
    border-radius: 100vw;
}

.exclusive-perks::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark);
}

@media (min-width:600px) { /*Tablet Properties*/
    .exclusive-perks {
        grid-auto-columns: 50vw;
    }

    .exclusive-perk {
        width: 50vw;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    .exclusive-perks {
        display: flex;
    }

    .exclusive-perks::-webkit-scrollbar {
        display: none;
    }
}

/************* SPECIFIC CATALOG CONTAINER ***************/

.specific-catalogs-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 1em;
}

.specific-catalog-header {
    margin-top: .8em;
    padding: .2em;
    margin-bottom: 0;
}

.specific-catalog li {
    color: var(--color-secondary-dark);
    display: none;
    transition: display 250ms ease-in-out;
}

.show-catalog-one .specific-catalog:nth-child(1) li {
    display: block;
}
.show-catalog-two .specific-catalog:nth-child(2) li {
    display: block;
}
.show-catalog-three .specific-catalog:nth-child(3) li {
    display: block;
}
.show-catalog-four .specific-catalog:nth-child(4) li {
    display: block;
}

.specific-catalog li:first-child {
    display: block;
    width: min-content;
    color: var(--color-dark);
    cursor: default;

    border-bottom: 2px solid var(--color-light);
}

.specific-catalog li:first-child:hover {
    border-bottom: 2px solid var(--color-dark);
}

.specific-catalog li {
    margin-top: .7em;
}

.specific-catalog li a {
    padding-inline: .5em;
    color: var(--color-secondary-dark);
    border-bottom: 2px solid var(--color-light);
    transition: 250ms ease-in-out;
}

.specific-catalog a:hover,
.specific-catalog a:focus {
    color: var(--color-dark);
    border-bottom: 2px solid var(--color-dark);
}

@media (min-width:600px) { /*Tablet Properties*/
    .specific-catalogs-container {
        flex-direction: row;
        justify-content: space-between;
        overflow-y: hidden;
    }

    .specific-catalog li {
        display: block;
        margin: 1em 0;
        font-size: var(--font-size-extra-small);
    }

    .specific-catalog li:first-child {
        font-size: var(--font-size-extra-small);
        margin: 0;
        padding: 0;
    }
    
    .specific-catalogs-container li {
        display: none;
    }

    .show-specific-catalogs .specific-catalogs-container li {
        display: block;
    }

    .specific-catalog li:nth-child(1),
    .specific-catalog li:nth-child(2),
    .specific-catalog li:nth-child(3),
    .specific-catalog li:nth-child(4),
    .specific-catalog li:nth-child(5) {
        display: block;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    .specific-catalogs-container {
        justify-content: space-around;
        padding: 0 2em;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    .specific-catalogs-container {
        padding: 0 20vw;
    }
}

/*********************************
              FOOTER
*********************************/

footer {
    background-color: var(--color-dark);
    font-size: var(--font-size-extra-small);
}

footer a {
    color: var(--color-light);
}

/********** FOOTER GUIDES ***********/

.footer-guides-container {
    color: var(--color-light);
}

.footer-guides {
    display: flex;
    flex-direction: column;
}

.footer-guide li {
    margin: 1em 1em;
    border-bottom: 1px solid var(--color-dark);
    width: fit-content;
    border-bottom: 2px solid var(--color-dark);
}

.footer-guide:first-of-type li:hover {
    border-bottom: 2px solid var(--color-light);
}

/* GET HELP GUIDE */

.footer-guide:nth-child(2) li:first-child {
    min-width: 90%;
    font-size: var(--font-size-small);
    padding-top: 1em;
    border: none;
}

.footer-guide:nth-child(2) a {
    margin-left: 2em;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-secondary-dark);
}

.footer-guide:nth-child(2) a:hover {
    color: var(--color-light);
    border-bottom: 2px solid var(--color-light);
}

/* ABOUT NIKE GUIDE */
.footer-guide:nth-child(3) li:first-child {
    border: none;
    font-size: var(--font-size-small);
}

.footer-guide:nth-child(3) a {
    margin-left: 2em;
    font-family: Arial, Helvetica, sans-serif;
    color: var(--color-secondary-dark);
}

.footer-guide:nth-child(3) a:hover {
    color: var(--color-light);
    border-bottom: 2px solid var(--color-light);
}

@media (min-width:600px) { /*Tablet Properties*/
    footer {
        padding: 0 1em;
    }

    /* Footer Guides */
    .footer-guides-container {
        display: flex;
        justify-content: space-between;
        padding: 2.5em 0;
    }

    .footer-guides {
        flex-direction: row;
    }

    .footer-guide {
        margin-right: 3em;
    }

    .footer-guide li {
        margin: 1em 0;
    }

    .footer-guide li a {
        font-size: calc(var(--font-size-extra-small) - .1rem);
    }

    .footer-guide li:first-child {
        margin: 0;
    }

    /* Get Help Guide */
    .footer-guide:nth-child(2) li:first-of-type {
        border-top: none;
        padding: 0;
        font-size: calc(var(--font-size-extra-small) - .1rem);
    }

    .footer-guide:nth-child(2) li a {
        font-size: calc(var(--font-size-extra-small) - .1rem);
    }

    .footer-guide:nth-child(2) a {
        margin: 0;
    }

    /* About Nike Guide */
    .footer-guide:nth-child(3) li:first-of-type {
        font-size: calc(var(--font-size-extra-small) - .1rem);
    }

    .footer-guide:nth-child(2) li a {
        font-size: calc(var(--font-size-extra-small) - .1rem);
    }

    .footer-guide:nth-child(3) a {
        margin: 0;
    }
}

@media (min-width:800px) { /*Laptop Properties*/
    /* Footer Guides */
    .footer-guides-container {
        padding: 2.5em 1.5em;
    }
    
    .footer-guide {
        margin-right: 5.5em;
    }
}

@media (min-width:1500px) {/*4k Properties*/
    footer {
        padding: 0 30vw;
    }
}

/*********** FOOTER SOCIALS ************/

.footer-socials {
    display: flex;
    gap: 1em;
    margin: .5em 1em;
}

.footer-socials svg {
    border-radius: 50%;
    filter: invert(50%);
}

.footer-socials svg:hover {
    filter: invert(90%);
}

@media (min-width:600px) { /*Tablet Properties*/
    .footer-socials {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        height: fit-content;
    }
}

/*************** FOOTNOTES *********************/

.footer-footnotes-container {
    color: var(--color-light);
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 1em;
}

.footer-footnote:first-child a {
    filter: invert();
}

.footer-footnote:first-child p {
    color: var(--color-secondary-dark);
}

.footer-footnote:first-child {
    font-size: var(--font-size-extra-small);
}

/************ 2ND FOOTNOTE *************/

.footer-footnote:nth-child(2) {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1em;
    color: var(--color-secondary-dark);
}

.footer-footnote:nth-child(2) li:first-child:hover {
    color: var(--color-light);
    cursor: pointer;
}

.footer-footnote:nth-child(2) a {
    color: var(--color-secondary-dark);
}

.footer-footnote:nth-child(2) a:hover {
    color: var(--color-light);
    cursor: pointer;
}

.footer-footnote-guide-container {
    display: flex;
    padding: 1em;
    background-color: var(--color-dark);
    border: 1px solid var(--color-light); 
    position: absolute;
    
    justify-content: space-evenly;
    align-items: flex-start;
    width: 90vw;
    height: fit-content;
    top: -140%;

    display: none;
}

.guide-tab-open .footer-footnote-guide-container {
    display: flex;
}

.footer-footnote-guide-container ul{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.footer-footnote-guide-container ul li {
    margin-bottom: 1em;
}


@media (min-width:600px) { /*Tablet Properties*/
    .footer-footnotes-container {
        flex-direction: row;
        justify-content: space-between;
    }

    /* 1st Footnote */
    .footer-footnote:first-of-type {
        display: flex;

    }

    .footer-footnote span {
        font-size: var(--font-size-extra-extra-small);
    }

    .footer-footnote p {
        margin-left: 2em;
        font-size: var(--font-size-extra-extra-small);
    }

    .footer-footnote svg {
        vertical-align: top;
    }

    /* 2nd Footnote */

    .footer-footnote-guide-container {
        justify-content: space-evenly;
        align-items: flex-start;
        height: fit-content;
        
        width: 50vw;
        top: -1000%;
        right: 0%;
        padding-inline: 0;
    }

    .footer-footnote-guide-container ul li a {
        font-size: var(--font-size-extra-small);
    }

    .footer-footnote li {
        font-size: var(--font-size-extra-extra-small);
    }

    .footer-footnote li a {
        font-size: var(--font-size-extra-extra-small);
    }
    
    .footer-footnote:nth-child(2) {
        flex-direction: row;
    }
}

@media (min-width:1500px) {/* 4K properties*/
    /* 2nd Footnote */
    .footer-footnote-guide-container {
        width: 20vw;
        top: -1100%;
    }
}