main {
    position: relative;
    display: flex;

    margin-top: 75px;
    z-index: 1;

    .main {
        width: 100%;
        position: relative;
    }
}

/*** HERO SECTION *******************************/
#hero {
    position: relative;
    height: 70vw;
    overflow: hidden;

    .hero-img {
        position: absolute;
        width: 160%;
        left: -28%;
        aspect-ratio: 1/.5;
        z-index: -1;
    }
}

/*** CATGS **************************************/
.catgs {
    width: 95%;
    height: fit-content;
    margin: 0 auto;
    margin-top: 2rem;
    margin-bottom: 2rem;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .9rem;

    .catg {
        background-color: transparent;
        position: relative;
        overflow: hidden;
        box-shadow: 0 0 5px #111, 0 0 1px #111 inset;
        border-top-right-radius: 3rem;
        z-index: 10;

        .content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;

            z-index: -2;

            & img {
                aspect-ratio: 1/1.2;
                width: 100%;
                z-index: -1;

                box-shadow: 0px 0px 5px #111;
                transition: opacity 350ms ease-in-out;
            }

            .catgTitle {
                background-color: #e1d169;

                width: 100%;
                height: 40px;

                position: absolute;
                bottom: 0;
                left: 0;

                display: flex;
                align-items: center;

                & h5 {
                    width: 95%;
                    margin: 0 auto;
                    color: rgb(46, 46, 46);
                    padding: 0;
                    font-size: .85rem;
                    font-weight: 500;
                }
            }
        }

        & a {
            text-decoration: none;
        }

        & a:hover {
            .content img {
                opacity: .55;
            }
        }
    }
}

/*** WHAT WE DO *********************************/
.what-we-do {
    width: 100%;
    height: fit-content;
    margin: 0 auto;
    margin-top: 3rem;
    margin-bottom: 3rem;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    .wwd-body{
        width: 95%;
        height: fit-content;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 25vw 25vw 210px 210px;
        gap: 5px;

        .aperals {
            text-align: center;
            background-color: #111;
            background-image: url('../img/banner/b14.png');
            background-position: center;
            background-size: cover;
            box-shadow: inset 0 0 10px 1px #e1d169;
            padding: 10px;
            border-radius: 10px;
            border: 2px solid #e1d169;


            width: 100%;
            height: 100%;
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            align-items: center;
        
            p, h5 {
                font-size: clamp(.7rem, 2vw, 1rem);
                color: white;
            }
        }

        .aperals:nth-child(1){
            grid-column: 1/2;
            grid-row: 3/4;
        }

        .aperals:nth-child(2){
            grid-column: 2/3;
            grid-row: 3/4;
        }

        .aperals:nth-child(3){
            grid-row: 4/5;
            grid-column: 1/2;
        }

        .aperals:nth-child(4){
            grid-row: 4/5;
            grid-column: 2/3;
        }

        & video {
            grid-row: 1/3;
            grid-column: 1/3;
            height: 100%;
            width: 100%;
        }
    }
}

/*** FAN WEAR ***********************************/
.fanwear {
    padding: 2rem 0 2rem 0;

    position: relative;
    overflow: hidden;

    .fan-head {
        & h5 {
            color: #1a1a1a;
            font-size: .8rem;
        }

        & h2 {
            color: #1a1a1a;
            font-size: .9rem;
        }

        & p {
            color: #1a1a1a;
            width: 95%;
            margin: 0 auto;
            text-align: center;
            font-size: clamp(.75rem, 3vw, 1rem);
        }
    }

    #fanshops {
        width: 95%;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto auto;
        gap: 3vw;

        .fanshop {
            padding: .9rem;
            border: none;
            border-radius: .5rem;
            box-shadow: 0 0 12px 5px #111 inset;

            display: flex;
            flex-direction: column;
            gap: 5px;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: -50px;
                left: -50px;
                
                aspect-ratio: 1/1;
                width: 150px;

                background-color: #1cc2ffb1;
                border-radius: 50%;

                z-index: -1;
                transition: scale 650ms ease-in-out;
            }

            &:hover {
                &::before {
                    scale: 650%;
                }
            }

            & h3 {
                font-size: 1.2rem;
                padding: 0;
                margin: 0;
                color: #1a1a1a;
            }

            & img {
                aspect-ratio: 1/1;
                width: 95%;
                margin: 0 auto;
            }

            & button {

                text-align: center;
                font-size: .9rem;
            }
        }

        .empty-shop {
            height: 50vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;

            padding: .4rem;
            border: none;
            border-radius: .5rem;
            background-color: transparent;
            box-shadow: 0 0 7px 2px #111 inset;
            position: relative;
            overflow: hidden;

            &::before {
                content: '';
                position: absolute;
                top: -50px;
                left: -50px;
                
                aspect-ratio: 1/1;
                width: 150px;

                background-color: #ffdd00b1;
                border-radius: 50%;

                z-index: -1;
                transition: scale 600ms ease-in-out;
            }

            & h3 {
                margin-bottom: 1rem;
                text-align: center;
                font-size: 1rem;
                color: #1a1a1a;
            }

            &:hover {
                &::before {
                    scale: 650%;
                }
            }
        }
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;

        backdrop-filter: blur(5px);
        opacity: .08;
        background-color: #ffffff;
        background-image: url('./../img/shop/bg-pattern.png');
        background-size: contain;
        background-blend-mode: multiply;
        z-index: -1;
    }

    #fan-wear-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 150%;
        height: 350%;
        background-color: #111;
        opacity: 1;

        z-index: -1;
        animation: rotate 150s infinite linear;
    }
}

@keyframes rotate {
    0% {
        rotate: 0deg;
    }
    25% {
        rotate: 20deg;
    }
    50%{
        rotate: 0deg;
    }
    75% {
        rotate: -20deg;
    }
    100%  {
        rotate: 0deg;
    }
}

/*** JERSEY DESIGNS */
.jersey-designs {
    width: 100%;

    background-color: antiquewhite;

    .jd-cont {
        padding: 20px 0 20px 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.55);
        background-image: url("../img/indx/bg-jersey.avif");
        background-blend-mode:color;
        background-size: cover;
        background-position: center;

        display: flex;
        flex-direction: column;
        justify-content: center;

        .jd-head {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: white;
        }

        .jd-body {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-evenly;

            width: 100%;
            margin: 0 auto;
            overflow: hidden;

            .jersey-cont {
                display: flex;
                flex-direction: column;
                align-items: center;

                & h6 {
                    color: white;
                    text-align: center;
                    font-size: clamp(1rem, 2vw, 1rem);
                }
            }

            #fifth-jersey {
                display: none;
            }

            .jersey-cont .img-jersey {
                aspect-ratio: 1/1.8;
                height: clamp(300px, 20vw, 550px);

                position: relative;

                & img {
                    width: 130%;
                    height: 100%;

                    position: absolute;
                    top: 0;
                    left: 50%;
                    transform: translateX(-50%);
                }
            }
        }
    }
}

/*** SHOP BANNER ********************************/
.shop-banner {
    width: 100%;
    max-height: 650px;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;

    color: white;
    font-weight: 600;
    z-index: 1;

    .shop-cont {
        width: 95%;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 3;

        .logo, & h5, & h2, & a {
            z-index: 4;
        }

        .logo {
            aspect-ratio: 1/1;
            width: 45%;
            margin: 20px 0 20px 0;
        }
    }

    .model1, .model2 {
        position: absolute;
        bottom: -30px;
        height: 80%;
        z-index: 2;
        transform: rotateY(180deg);
    } 

    .model1 {
        left: -35%;
        transition: left 400ms ease-in-out;
    }

    .model2 {
        right: -30%;
        transition: right 400ms ease-in-out;
    }

    & a {
        font-weight: 700;
        box-shadow: 0 0 10px 1px #ffdd00;
        background-color: #ffdd00;
    }

    &::before {
        content: '';
        z-index: -1;
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #5e593f;
        background-image: url("../img/banner/b14.png");
        background-size: contain;
        background-position: center;
    }
}

.tati-coln {
    width: 90%;
    margin: 0 auto;
    margin-bottom: 3rem;
    text-align: center;

    .getPrds {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/*** MEDIA QUERIES *****************************/
@media (min-width: 425px) {

    /*** CATGS **************************************/
    .catgs {
        margin-top: 2rem;
        margin-bottom: 4rem;
        gap: 4vw;
    
        .catg .content {
            .catgTitle {
                height: 50px;

                & h5 {
                    font-size: 1rem;
                    font-weight: 600;
                }
            }
        }
    }

    /*** WHAT WE DO ****************************/
    .what-we-do {
        width: 90%; 

        .wwd-body {
            width: 100%;
            height: fit-content;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: 25vw 25vw auto auto;
            gap: 3vw;
            
            .aperals {
                #aperal-head {
                    text-align: center;

                    & h5 {
                        font-size: .9rem;
                        font-weight: 600;
                    }
                }

                & p {
                    width: 90%;
                    margin: 0 auto;
                    font-size: .85rem;
                    text-align: center;
                }
            }

            .aperals:nth-child(1){
                grid-column: 1/2;
                grid-row: 3/4;
            }

            .aperals:nth-child(2){
                grid-column: 2/3;
                grid-row: 3/4;
            }

            .aperals:nth-child(3){
                grid-row: 4/5;
                grid-column: 1/2;
            }

            .aperals:nth-child(4){
                grid-row: 4/5;
                grid-column: 2/3;
            }

            & video {
                grid-row: 1/3;
                grid-column: 1/3;
                width: 100%;
                height: 100%;
            }
        }
    }    
    
    .fanwear {
        padding: 2rem 0 2rem 0;

        #fanshops {
            width: 90%;
            gap: 5vw;
        }
    }

    .shop-banner {

        .model1 {
            left: -25%;
        }

        .model2 {
            right: -20%;
        }
    }
}

@media (min-width: 600px) {
    .catgs {
        grid-template-columns: repeat(3, 1fr);
    }

    .tati-coln {
        .getPrds {
            grid-template-columns: repeat(3, 1fr);
        }
    }

}

@media (min-width: 768px) {
    
    /*** HERO SECTION **************************/
    #hero {
        height: clamp(550px, 50vw, 650px);
        
        .hero-img {
            width: 120%;
            left: -10%;
            aspect-ratio: 1/.6;
        }
    }

    /*** CATGS **************************************/
    .catgs {
        margin-top: 2rem;
        margin-bottom: 4rem;
    
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    
        .catg .content .catgTitle{
            & h5 {
                font-size: 1.1rem;
                font-weight: 700;
            }
        }
    }

    .what-we-do .wwd-body {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-rows: 25vw 25vw auto;
        gap: .4rem;

        .aperals {
            #aperal-head {
                & img {
                    display: inline-block;
                }

                & h5 {
                    font-size: 1rem;
                }
            }

            & p {
                font-size: .9rem;
            }   
        }

        .aperals:nth-child(1){
            grid-column: 1/2;
            grid-row: 3/4;
        }

        .aperals:nth-child(2){
            grid-column: 2/3;
            grid-row: 3/4;
        }

        .aperals:nth-child(3){
            grid-column: 3/4;
            grid-row: 3/4;
        }

        .aperals:nth-child(4){
            grid-column: 4/5;
            grid-row: 3/4;
        }

        & video {
            grid-column: 1/5;
            grid-row: 1/3;
        }
    }

    .fanwear {
        padding: 2rem 0 2rem 0;

        .fan-head {
            margin-bottom: 2rem;

            & h5 {
                font-size: 1.2rem;
            }

            & h2 {
                font-size: 1.5rem;
            }
            & p {
                margin-top: 1rem;
                width: 70%;
            }
        }

        #fanshops {
            width: 90%;
            margin: 0 auto;

            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: auto;
            gap: 3vw;

            .fanshop {
                &::before {
                    top: -50px;
                    left: -50px;
                    
                    width: 150px;
                }

                &:hover {
                    &::before {
                        scale: 650%;
                    }
                }

                & h3 {
                    font-size: 1.4rem;
                }
            }

            .empty-shop {
                height: auto;
                padding: .8rem;
                &::before {
                    width: 150px;
                }

                & h3 {
                    margin-bottom: 1rem;
                    text-align: center;
                    font-size: 1.3rem;
                }

                &:hover {
                    &::before {
                        scale: 650%;
                    }
                }
            }
        }
    }

    .jersey-designs {
        height: clamp(500px, 25vw, 650px);
    }
    
    .jd-cont {
        background-size: contain;
    }

    .jersey-cont {
        width: 100%;
        aspect-ratio: 1/1.3;

        .img-jersey {
            width: 90%;
        }
    }

    .shop-banner {

        .shop-cont {
    
            .logo {
                aspect-ratio: 1/1;
                width: 200px;
                margin: 20px 0 20px 0;
            }
        }

        .model1, .model2 {
            position: absolute;
            bottom: 0px;
            height: 80%;
        } 

        .model1 {
            left: 2%;
        }

        .model2 {
            right: 1%;        }
    }

    .tati-coln {
        width: 90%;

        .getPrds {
            display: flex;
            gap: 1rem;
            height: fit-content;
            
            position: relative;
        }

        .product-cont:last-child {
            display: none;
        }
    }
}

@media (min-width: 1024px) {
    #hero {
        
        .hero-img {
            width: 100%;
            left: 0;
            aspect-ratio: 1/.55;
        }
    }

    /*** CATGS **************************************/
    .catgs {
        width: 90%;
        margin-top: 3rem;
        margin-bottom: 3rem;
    
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
    }

    /*** WHAT WE DO */
    .what-we-do {
        width: 90%;
        transition: width 400ms ease-in-out;
        margin-top: 3rem;
        margin-bottom: 3rem;

        .wwd-body {
            width: 100%;
            height: fit-content;
            display: grid;
            grid-template-columns: 20% 58% 20%;
            grid-template-rows: 15vw 15vw;
            gap: 10px;
            
            .aperals {
                width: 100%;
                height: 100%;
                margin: 0 auto;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;

                #aperal-head {
                    text-align: center;

                    & img {
                        display: none;
                    }

                    & h5 {
                        font-size: .9rem;
                        font-weight: 600;
                    }
                }

                & p {
                    font-size: .8rem;
                    text-align: center;
                }
            }

            .aperals:nth-child(1){
                grid-column: 1/2;
                grid-row: 1/2;
            }

            .aperals:nth-child(2){
                grid-column: 1/2;
                grid-row: 2/3;
            }

            .aperals:nth-child(3){
                grid-row: 1/2;
                grid-column: 3/4;
            }

            .aperals:nth-child(4){
                grid-row: 2/3;
                grid-column: 3/4;
            }

            & video {
                grid-row: 1/3;
                grid-column: 2/3;
            }
        }
    }

    .fanwear {
        /* border: 1px solid red; */
        padding: 4rem 0 4rem 0;
        position: relative;

        #fanshops {
            width: 90%;
            margin: 0 auto;
            grid-template-rows: min-content;
            gap: 3vw;

            .fanshop {
                height: fit-content;
                & img {
                    height: 55%;
                    width: 55%;
                }
            }
        }
    }

    .jersey-designs {
        height: clamp(550px, 35vw, 650px);

        .jd-cont {
            .jd-body {
                width: 90%;
                max-width: 1240px;

                #fifth-jersey {
                    display: flex;
                }
            }
        }
    }

    .shop-banner {
        max-height: 550px;

        .model1 {
            left: 10%;
        }

        .model2 {
            right: 10%;
        }
    }

    .tati-coln {
        width: 90%;
        margin-top: 6rem;
        margin-bottom: 6rem;

        .product-cont:last-child {
            display: block;
        }
    }
}

@media (min-width: 1440px) {
    #hero {
        .hero-img {
            width: 120%;
            left: -10%;
            aspect-ratio: 1/.4;
        }
    }

    /*** CATGS **************************************/
    .catgs {
        margin-top: 4rem;
        margin-bottom: 4rem;

        gap: 2rem;
    
        .catg .content {
            .catgTitle {
                & h5 {
                    font-size: 1.4rem;
                }
            }
        }
    }

    /*** WHAT WE DO */
    .what-we-do {

        .wwd-body {
            gap: 1rem; 

            .aperals {
                #aperal-head {
                    & img {
                        display: inline-block;
                    }
                    & h5 {
                        font-size: 1rem;
                    }
                }

                & p {
                    width: 90%;
                    font-size: 1rem;
                }
            }
        }
    }

    .fanwear {
        margin-bottom: 5rem;

        #fanshops {
            width: 70%;
            grid-template-columns: repeat(3, 1fr);

            .fanshop {
                padding: 1rem;
            }

            & button:nth-child(4){
                display: block;
            }
        }
    }

    .shop-banner {
        .model1 {
            left: 15%;
        }

        .model2 {
            right: 15%;
        }
    }
}

@media(min-width: 1600px){
    #hero {
        .hero-img {
            width: 100%;
            left: 0;
        }
    }

    /*** CATGS **************************************/
    .catgs {
        margin-top: 6rem;
        margin-bottom: 4rem;
    
        .catg {
            .content {
                & h5 {
                    font-size: 1.2rem;
                }
            }
        }
    }

    /*** WHAT WE DO */
    .what-we-do {
        /* border: 1px solid black; */
        margin-top: 0;
        padding: 5rem 0 5rem 0;

        #wwd-cont {
            & video {
                width: 70%;
            }

            .wwd-body {
                gap: .8rem; 

                .aperals {
                    border: 1px solid yellow;
                    height: clamp(150px, 10vw, 185px);
                    justify-content: space-around;
    
                    #aperal-head {
                        width: 20%;
                    }

                    & p {
                        width: 65%;
                        font-size: 1.2rem;
                    }
                }
            }
        }
    }

    .fanwear {
        /* border: 1px solid rebeccapurple; */
        padding: 4rem 0 6rem 0;
        margin-bottom: 0;

        .fan-head {
            & h5 {
                color: #1a1a1a;
                font-size: 1.65rem;
                font-weight: 600;
            }
    
            & h2 {
                color: #1a1a1a;
                font-size: 2.2rem;
                font-weight: 700;
            }
    
            & p {
                color: #1a1a1a;
                font-size: 1.2rem;
            }
        }

        #fanshops {
            margin: 0 auto;

            .fanshop {
                & h3 {
                    font-weight: 600;
                }
                &::before {
                    scale: 170%;
                }
                &:hover {
                    &::before {
                        scale: 735%;
                    }
                }
            }
            .empty-shop {
                & h3 {
                    font-weight: 600;
                }
                &::before {
                    scale: 170%;
                }
                &:hover {
                    &::before {
                        scale: 755%;
                    }
                }
            }
        }
    }
}