:root {
    --pink: rgb(237, 59, 107);
    --gray: #3c3d41;
    --darkBlue: #181820;
}

:root {
    --Inter_28pt-Regular: Inter_28pt-Regular;
    --Kanit-SemiBold: Kanit-SemiBold;
    --JockeyOne-Regular: JockeyOne-Regular;
    --Inter_28pt-Medium: Inter_28pt-Medium;
}

* {
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: "Inter_28pt-Regular";
    src: url("../font/Inter_28pt-Regular.ttf");
}

@font-face {
    font-family: "Kanit-SemiBold";
    src: url("../font/Kanit-SemiBold.ttf");
}

@font-face {
    font-family: "JockeyOne-Regular";
    src: url("../font/JockeyOne-Regular.ttf");
}

@font-face {
    font-family: "Inter_28pt-Medium";
    src: url("../font/Inter_28pt-Medium.ttf");
}

html {
    box-sizing: border-box;
    font-size: 10px !important; /* 10px */
    scroll-behavior: smooth;

}

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

body {
    line-height: 1.6;
    font-size: 1.6rem;
    font-family: var(--Inter_28pt-Regular);
    transition: all 0.5s ease-in-out;
    background-color: #191920;
    overflow-x: hidden;
}


/*

-- Reset Style --

*/

a {
    text-decoration: none;
}


/*

-- Helper Class --

*/
.icon {
    width: 3rem;
    height: 3rem;
    cursor: pointer;
}

.active-size {
    background-color: #d0d0d0 !important;
    border: 4px solid white !important;

}

/*
=================
-----header------
=================
*/


header {
    position: relative;
}

header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100rem;
    height: 100rem;
    border-radius: 1000rem;
    background: rgba(255, 255, 255, 0.45);
    background: -o-linear-gradient(190deg, rgba(255, 255, 255, 0.45) 0%, rgba(115, 67, 210, 0) 100%);
    background: linear-gradient(260deg, rgba(255, 255, 255, 0.45) 0%, rgba(115, 67, 210, 0) 100%);
    -webkit-filter: blur(150px);
    filter: blur(150px);
    margin-left: -90%;
    margin-top: -90%;
    z-index: -1;
    opacity: 0.4;
}

.header__container {
    display: none;
    justify-content: center;
    align-items: center;
    padding: 3rem 1rem;
}

.header__logo {
    display: none;
}

.header__logo-img {
    width: 10.5rem;
    height: 4rem;
}

.header__item {
    display: flex;
    justify-content: space-between;
    align-items: center;

}

.header__item-button {
    display: flex;
}

.icon-explore {

}

.icon-shop {
    margin: 0 2rem 0 4rem;

}

.icon-search {
    position: absolute;
    top: 4.2rem;
    width: 1.7rem;
    height: 1.7rem;
    margin-left: .8rem;
    cursor: pointer;
}

.header__item-search {
    background-color: rgba(182, 182, 182, 0.32);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0);
    border-radius: .5rem;
    padding: .8rem .8rem .8rem 3rem;
    position: relative;
    outline: none;
    transition: all 0.3s ease;

}

.header__item-search:focus {
    border: 2px solid var(--pink);
}

::placeholder {
    color: white;
}

.header__menu {
    display: flex;
    justify-content: space-between;
    color: white;
    margin-right: 4rem;
}

.header__menu-item {
    margin: 0 1rem;
    font-size: 2rem;
    padding: 0 1rem;
    font-family: var(--Inter_28pt-Regular);
    transition: all 0.3s ease;
}

.header__menu-item:hover {
    color: var(--pink);
    cursor: pointer;
}

/*
==========================
------header-Mobile-------
==========================
*/


.header__mobile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 3rem;
}

.header__mobile-menu {
    width: 3rem;
    height: 3rem;
}

.header__mobile-menu-icon {
    width: 3rem;
    height: 3rem;
}

.mobile-menu-content {
    position: fixed;
    top: 0;
    left: -53rem;
    bottom: 0;
    width: 55%;
    padding: 1rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    z-index: 20;

}

.mobile-menu-content-box {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 2rem;

}

.mobile-menu-content-text {
    color: white;
    font-size: 4rem;
    font-family: var(--JockeyOne-Regular);
}

.mobile-menu-content-img {
    width: 8rem;
    height: 3rem;
}

.mobile-menu-content-input {
    width: 100%;
    z-index: 21;
}

.mobile-menu-content-item {
    font-size: 2rem;
    font-family: var(--Inter_28pt-Regular);
    margin: 2rem 0;
}

.mobile-menu-content-item a {
    color: white;
    transition: all 0.3s ease;
}

.mobile-menu-content-item a:hover {
    color: var(--pink);
}

.header__mobile-logo {
    width: 10rem;
}

.header__mobile-logo img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.header__mobile-shop {
    width: 3rem;
    height: 3rem;
}

.header__mobile-shop-icon {
    width: 3rem;
    height: 3rem;
}


/*
============
----main----
============
*/
main {

}

.main__container {
    position: relative;
}

.main__container-text {
    width: 100%;
    font-size: 9rem;
    font-family: var(--Kanit-SemiBold);
    font-weight: bold;
    color: #131319;
    position: absolute;
    text-align: center;
    z-index: -2;
}

.sneakers {
    padding: 8rem 0;
    font-family: var(--JockeyOne-Regular);
    display: flex;
    align-items: center;
    position: relative;
    flex-direction: column;
}

.sneakers-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column-reverse;
}


.sneakers__info-name {
    color: white;
    font-size: 5rem;
    margin-bottom: 3rem;
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);
    display: inline-block;
}

.sneakers__info-name span {
    color: var(--pink);
}

.sneakers__info-price {
    color: white;
    font-size: 3rem;
    font-family: var(--Inter_28pt-Medium);
    font-weight: lighter;
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);
    display: inline-block;
}

.sneakers__info-color {

}

.sneakers__info-color-text {
    font-size: 2.7rem;
    color: white;
    margin: 3rem 0 2rem 0;

}

.info-color {
    background-color: #ffffff;
    padding: 1rem;
    border-radius: 50%;
    border: none;
    margin: 0 .3rem;
    cursor: pointer;
}

.sneakers__info-color-white {
    background-color: white;
}

.sneakers__info-color-red {
    background-color: red;

}

.sneakers__info-color-green {
    background-color: #00ff00;

}

.sneakers__info-color-black {
    background-color: black;

}

.sneakers__info-size {

}

.sneakers__info-size-text {
    font-size: 2.7rem;
    color: white;
    margin: 3rem 0 2rem 0;


}

.info-size {
    padding: 1rem 1.9rem;
    border-radius: 50%;
    font-family: var(--JockeyOne-Regular);
    background-color: transparent;
    font-size: 2rem;
    border: 4px solid rgb(0, 0, 0);
    margin-bottom: 2rem;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sneakers__info-size-6 {

}

.sneakers__info-buy {
    font-family: var(--JockeyOne-Regular);
    font-size: 3rem;
    color: white;
    background-color: var(--pink);
    border: 2px solid transparent;
    border-radius: 1rem;
    padding: .5rem 10.2rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.sneakers__info-buy:hover {
    color: var(--pink);
    background-color: transparent;
    border: 2px solid var(--pink);

}


.main__container-nike {
    position: absolute;
    margin-top: -25%;
    margin-left: -11.7%;
    transform: rotate(342deg);
    z-index: -1;
}

.main__container-nike-img {
    width: 135rem;
    height: 48rem;
}


.sneakers__images {
    margin-bottom: 10rem;
}

.image-group-box {
    display: flex;
    width: 100%;
    margin-top: 10rem;
    justify-content: center;
    position: relative;
}

.image-group {
    width: 30%;
    z-index: 3;
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);

}

.img-1 {
    top: 24rem;
    right: 45rem;
}

.img-2 {
    top: 34rem;
    right: 55rem;
}

.img-3 {
    top: 45rem;
    right: 65rem;
}

.sneakers__image {
    transform: rotate(319deg) translateY(0);
    width: 100%;
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);
    opacity: 1;
}

.sneakers__image-img {
    width: 85%;
    height: auto;
    object-fit: cover;
    display: block;
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);
}


.sneakers__images-group {
    display: flex;
    width: 100%;
    justify-content: center;
    transform: rotate(44deg);
    position: absolute;
    top: 25.5%;
}

.sneakers__images-group img {
    width: 80%;
}


.selector {
    position: fixed;
    bottom: 7rem;
    transform: rotate(90deg);
}

.selector__container {
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    position: relative;
    right: -22rem;
    background: linear-gradient(90deg, rgb(200, 200, 200), #191920 35%);
}

.selector__container::before {
    content: '';
    background-color: #191920;
    width: 18rem;
    height: 18rem;
    border-radius: 50%;
    position: absolute;
    right: 1rem;
    top: 1rem;
}

.line-container {
    position: relative;
    width: 20rem;
    height: 20px;
    top: 9rem;
    transform: rotate(0deg);
    transition: all 1s cubic-bezier(0.65, 0.05, 0.36, 1);
    z-index: 10;
}

.line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 50%;
    height: 4px;
    background-color: rgba(85, 85, 85, 0);
    transform: translateY(-50%);
    z-index: 1;
}

.circle {
    position: absolute;
    top: 50%;
    left: -.5rem;
    width: 22px;
    height: 22px;
    background-color: #ffffff;
    border-radius: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

.selector__border {
    position: relative;
    top: .3rem;
    right: .2rem;
    /*display: none;*/
}

.selector__img {
    width: 8rem;
    height: 4rem;
    position: absolute;
    border-radius: 1rem;
    background: linear-gradient(90deg, rgba(40, 88, 255, 0.53), rgba(40, 88, 255, 0) 80%);
    overflow: hidden;
    z-index: 2;
    animation: bgimg 1s cubic-bezier(0.65, 0.05, 0.36, 1);
}

.selector__img.active {
    animation: bgimg 1s cubic-bezier(0.65, 0.05, 0.36, 1) forwards;
}

/*@keyframes bgimg {*/
/*    0%{*/
/*        background: linear-gradient(90deg, rgba(0, 0, 255, 0)20%, rgb(40, 88, 255));*/
/*    }*/
/*    100%{*/
/*        background: linear-gradient(90deg, rgba(0, 0, 255, 0)20%, rgb(255, 40, 40));*/

/*    }*/
/*}*/

.selector__img1 {
    top: -5rem;
    right: 15rem;
    transform: rotate(50deg);
}

.selector__img2 {
    top: 0rem;
    right: 18.5rem;
    transform: rotate(25deg);
}

.selector__img3 {
    top: 6rem;
    right: 20rem;
    transform: rotate(0);
}

.selector__img4 {
    top: 12rem;
    right: 18.5rem;
    transform: rotate(-25deg);
}

.selector__img5 {
    top: 17rem;
    right: 15rem;
    transform: rotate(-50deg);
}


/*
======================
------main-Mobile-----
======================
*/
.mobile__images-box {
    margin-bottom: 15rem;
}

.mobile__images {

}

.mobile__image {
    transform: rotate(316deg);
}

.mobile__image-img {
    width: 100%;
    height: auto;
}

.mobile__images-group {
    position: relative;
    top: -6rem;
    left: 6rem;
}

.mobile__images-group img {
    position: absolute;
    width: 80%;
    height: auto;
}

.mobile-image-group-box {
    position: relative;
}

.mobile-image-group {
    width: 30%;
    height: auto;
    position: absolute;

}

.mobile-img-1 {

}

.mobile-img-2 {
    top: 21.5rem;
    right: 7.5rem;
}

.mobile-img-3 {

}


/*
===============
----footer-----
===============

*/

footer {

}

.container {

}

.footer__container li {
    text-align: center;
    font-size: 1.3rem;
    font-family: var(--Inter_28pt-Regular);
    color: white;
}

.footer__container li a {
    color: var(--pink);
}