:root {
    /* Colors */

--raisin-black-2: hsl(236, 17%, 17%);
--raisin-black-3: hsl(280, 11%, 11%);
--eerie-black-1: hsl(277, 25%, 10%);
--eerie-black-2: hsl(280, 7%, 8%);
--roman-silver: hsl(220, 6%, 59%);
--light-gray-1: hsl(0, 0%, 80%);
--light-gray-2: hsl(0, 2%, 82%);
--xiketic_90: hsla(280, 37%, 8%, 0.9);
--marigold: hsl(42, 99%, 46%);
--white_15: hsla(0, 0%, 100%, 0.15);
--xiketic: hsl(277, 25%, 10%);
--silver: hsl(0, 0%, 78%);
--white: hsl(0, 0%, 100%);
--jet: hsl(236, 13%, 23%);

/* Typography */

--ff-oxanium: 'Oxanium', cursive;
--ff-poppins: 'Poppins', sans-serif;

--fs-2: 4.5rem;
--fs-3: 3.6rem;
--fs-4: 2.4rem;
--fs-5: 2.2rem;
--fs-6: 2rem;
--fs-8: 1.5rem;
--fs-9: 1.4rem;
--fs-11: 1.2rem;

--fw-500: 500;
--fw-700: 700;
--fw-800: 800;

    /* Spacing */

--section-padding: 120px;

        /* Gradient */

--gradient: radial-gradient(circle, hsl(250, 7%, 17%), hsl(250, 11%, 11%));

        /* Box Shadows */

--shadow-1: 0px 2px 8px 0px hsla(0, 0%, 0%, 0.2),
inset 0px 2px 8px 0px hsla(0, 0%, 0%, 0.4);
--shadow-2: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.4);
--shadow-3: 0px 5px 10px 1px hsla(219, 98%, 17%, 0.2);
--shadow-4: 0px 5px 10px 1px hsla(0, 0%, 0%, 0.15);

        /* Transitions */

--transition: 0.25s ease;
--cubic-out: cubic-bezier(0.33, 0.85, 0.4, 0.96);

}

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

li { list-style: none; }

a {
text-decoration: none;
color: inherit;
}

a,
img,
span,
time,
input,
button,
ion-icon { display: block; }

img { height: auto; }

input,
button {
background: none;
border: none;
font: inherit;
}

input { width: 100%; }

button { cursor: pointer; }

ion-icon { pointer-events: none; }

address { font-style: normal; }

html {
font-family: var(--ff-poppins);
font-size: 10px;
scroll-behavior: smooth;
}

body {
background-color: var(--raisin-black-3);
font-size: 1.6rem;
line-height: 1.5;
}

:focus-visible { outline-offset: 4px; }


.container { padding-inline: 15px; }

.section { padding-block: var(--section-padding); }

.h1,
.h2,
.h3 {
color: var(--white);
font-family: var(--ff-oxanium);
font-weight: var(--fw-800);
line-height: 1;
}

.h1 {
font-size: var(--fs-2);
letter-spacing: -3px;
}

.h2 { font-size: var(--fs-3); }

.h3 {
font-size: var(--fs-6);
text-transform: uppercase;
}

:is(.h1, .h2, .h3, .card-price) .span {
display: inline-block;
color: var(--marigold);
}

.btn {
margin-inline: auto;
color: var(--eerie-black-1);
font-size: var(--fs-8);
text-transform: uppercase;
font-weight: var(--fw-700);
min-height: 55px;
padding-inline: 35px;
}

.skewBg {
position: relative;
z-index: 1;
}

.skewBg::before {
content: "";
position: absolute;
inset: 0;
transform: skewX(var(--skewX, -16deg));
background-color: var(--bg, var(--marigold));
z-index: -1;
}

.btn::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: calc(100% + 8px);
width: 5px;
transform: skewX(-16deg) translateX(var(--translateX, 0));
background-color: var(--marigold);
transition: var(--transition);
}

.btn:is(:hover, :focus)::after { --translateX: -13px; }
button,a{
        transition: .3s;
}
button:active,a:active{
        transform: scale(.81);
}


.header-top,
.cart-btn,
.header-bottom::before,
.navbar-link::before { display: none; }

.header {
position: relative;
min-height: 1px;
}

.header-bottom {
position: absolute;
top: calc(100% - 1px);
left: 0;
width: 100%;
background-color: var(--raisin-black-2);
padding-block: 20px;
z-index: 4;
}

.header-bottom.active {
position: fixed;
top: -85px;
animation: slideIn 0.5s var(--cubic-out) forwards;
}

.header-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.logo {
color: var(--white);
font-family: var(--ff-oxanium);
font-size: 3rem;
font-weight: var(--fw-800);
}

.header-actions {
display: flex;
align-items: center;
gap: 20px;
}


.nav-toggle-btn {
color: var(--white);
font-size: 30px;
border: 1px solid var(--white);
padding: 4px;
}

.nav-toggle-btn.active .menu,
.nav-toggle-btn .close { display: none; }

.nav-toggle-btn .menu,
.nav-toggle-btn.active .close { display: block; }

.navbar {
background-color: var(--eerie-black-1);
color: var(--white);
position: absolute;
top: 100%;
right: 0;
width: 100%;
max-width: 350px;
visibility: hidden;
max-height: 0;
transition: 0.25s var(--cubic-out);
overflow: hidden;
}

.navbar.active {
visibility: visible;
max-height: 275px;
transition-duration: 0.5s;
}

.navbar-item:not(:last-child) { border-block-end: 1px solid var(--white_15); }

.navbar-link {
padding: 10px 25px;
transition: var(--transition);
}

.navbar-link:is(:hover, :focus) { background-color: var(--white_10); }


.hero-banner { display: none; }

.hero {
--section-padding: 60px;
margin-block-start: 84px;
background-repeat: no-repeat;
background-size: cover;
/* background-position: center; */
text-align: center;
min-height: 100vh;
display: grid;
align-items: center;
}

.hero-subtitle {
color: var(--marigold);
font-size: var(--fs-6);
font-weight: var(--fw-700);
text-transform: uppercase;
}

.hero-title { margin-block: 15px 12px; }

.hero-text {
color: var(--light-gray-2);
margin-block-end: 45px;
}


.footer { color: var(--roman-silver); }

.footer-top { padding-block-end: var(--section-padding); }

.footer-top .container {
display: grid;
gap: 50px;
}

.footer .logo { margin-block-end: 35px; }

.footer-text,
.footer .contact-item {
font-size: var(--fs-8);
font-weight: var(--fw-500);
line-height: 1.8;
}

.footer-text { margin-block-end: 15px; }

.contact-item:not(:last-child) { margin-block-end: 10px; }

.contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
}

.contact-icon {
margin-block-start: 3px;
font-size: 17px;
}

.footer-list-title {
position: relative;
color: var(--silver);
font-family: var(--ff-oxanium);
text-transform: uppercase;
font-weight: var(--fw-800);
padding-block-end: 20px;
margin-block-end: 35px;
}

.footer-list-title::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 30px;
height: 3px;
background-color: var(--marigold);
}

.footer-link {
font-size: var(--fs-9);
max-width: max-content;
transition: var(--transition);
padding-block: 8px;
font-weight: var(--fw-500);
}

.footer-link:is(:hover, :focus) {
color: var(--marigold);
transform: translateX(5px);
}


.footer-bottom-img { display: none; }

.footer-bottom {
background-color: var(--eerie-black-2);
padding-block: 20px;
text-align: center;
}

.copyright {
font-size: var(--fs-9);
font-weight: var(--fw-500);
line-height: 1.8;
}

.copyright-link {
display: inline-block;
color: var(--marigold);
}



.back-top-btn {
position: fixed;
bottom: 10px;
right: 15px;
background-color: var(--marigold);
padding: 12px;
z-index: 4;
transition: var(--transition);
opacity: 0;
visibility: hidden;
}

.back-top-btn.active {
opacity: 1;
visibility: visible;
transform: translateY(-10px);
}





@media (min-width: 576px) {

.container {
max-width: 540px;
width: 100%;
margin-inline: auto;
}

.h1 { --fs-2: 7rem; }



.header-actions { gap: 40px; }




}

.footer-top .container { grid-template-columns: 1fr 1fr; }

.footer-brand,
.footer-wrapper { grid-column: 1 / 3; 
}


@media (min-width: 768px) {

.container { max-width: 720px; }

.scrollbar-item { min-width: calc(50% - 15px); }

.hero-text {
max-width: 60ch;
margin-inline: auto;
}


.footer-brand,
.footer-wrapper { grid-column: auto; }

.footer-bottom-img { display: block; }

.footer-bottom { text-align: left; }

.footer-bottom .container {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
}


.back-top-btn {
bottom: 50px;
right: 45px;
}

}


@media (min-width: 992px) {
        

.container { max-width: 960px; }

:is(.header, .hero, .live-match) .container { max-width: unset; }

.scrollbar-item { min-width: calc(33.33% - 20px); }


.header-top {
display: block;
background-image: url("../img/header-top-bg.jpg");
background-repeat: no-repeat;
background-size: cover;
background-position: center;
width: 100%;
padding-block: 20px;
}

.header-top .container {
display: flex;
justify-content: space-between;
align-items: center;
}

.header :is(.social-wrapper, .social-list) {
display: flex;
align-items: center;
}

.header .social-wrapper { gap: 15px; }

.header .social-list { gap: 10px; }

.social-title {
color: var(--white);
font-family: var(--ff-oxanium);
font-size: var(--fs-8);
font-weight: var(--fw-700);
}

.header .social-link {
background-color: var(--jet);
color: var(--marigold);
font-size: var(--fs-9);
padding: 8px 10px;
}

.header-bottom { outline: 1px solid hsla(0, 0%, 0%, 0.2); }

.header-bottom::before {
display: block;
top: 0;
left: -15px;
right: auto;
width: 170px;
--skewX: 16deg;
}

.nav-toggle-btn { display: none; }

.navbar,
.navbar.active {
all: unset;
margin-inline: auto 15px;
}

.navbar-list { display: flex; }

.navbar-item:not(:last-child) { border-block-end: none; }

.navbar-link {
color: var(--white);
font-family: var(--ff-oxanium);
font-size: var(--fs-11);
text-transform: uppercase;
font-weight: var(--fw-700);
padding: 10px 20px;
}

.navbar-link::before {
display: block;
opacity: 0;
transition: var(--transition);
}

.navbar-link:is(:hover, :focus) {
background-color: transparent;
color: var(--xiketic);
}

.navbar-link:is(:hover, :focus)::before { opacity: 1; }


.hero { text-align: left; }

.hero-banner { display: block; }

.hero .container {
display: grid;
grid-template-columns: 1fr 0.9fr;
align-items: center;
gap: 50px;
}

.btn { margin-inline: 0; }



.footer .container {
grid-template-columns: 1fr 0.7fr 0.7fr;
column-gap: 80px;
}

}
@media (min-width: 746px){
        .hero{
                background-position: center;


        }
        
}

@media (min-width: 1200px) {

.container,
:is(.header, .hero, .live-match) .container { max-width: 1230px; }

.h1 { --fs-2: 7.5rem; }

.scrollbar-item { 
min-width: calc(25% - 22.5px); 
margin-bottom: 3rem;
}

.header-bottom::before { width: 270px; }

.navbar-link {
font-size: var(--fs-9);
padding-inline: 25px;
}


.hero .container { grid-template-columns: 1fr 1fr; }




.footer .container { grid-template-columns: 1fr 0.7fr 0.7fr 1fr; }

}

a{
cursor: pointer;
}
@media (min-width:999px){
        .hero{
                background-position: initial;
        }
}

::-webkit-scrollbar{
        width: 0.6rem;
        border-radius: .72rem;
        background-color: hsl(228,8%,76%);
    
    }
    ::-webkit-scrollbar-thumb{
        background-color: hsl(229, 20%, 89%);
        border-radius: .72rem;
    
    }
    
    
    ::-webkit-scrollbar-thumb:hover{
        background-color: hsl(225, 22%, 96%);
     
        
    }