@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@200&display=swap');


* {
    padding: 0;
    margin: 0;
}
:root {
    --primary-color:#eb5757;
    --bg-color:#191b1d;
}
body {
    color: #fff;
    background: #000;
}

.active {
    color: var(--primary-color) !important;
}

@font-face {
    font-family: poppins-bold;
    src: url(fonts/poppins/Poppins-ExtraBold.otf);
}
nav.navbar.navbar-expand-sm.navbar-dark.bg-dark.d-flex.align-items-center.justify-content-between.p-3
{
    top: 0;
    position: sticky;
    position: -webkit-sticky;
}
nav a {
    font-family: poppins-bold;
    font-weight: 900;
    transition: all 0.3s ease-in-out;
}
nav button a:hover {
    color: var(--primary-color) !important;
}
nav button {
    transition: all 0.3s ease-in-out;
    border: 2px solid var(--primary-color) !important;
}
nav button:hover {
    background: #fff !important;


}
nav a:hover {
    color: var(--primary-color) !important;
}


.unbounded {
    font-family: 'Unbounded', cursive;
}
.content h1 {
    font-size: 3rem;
}
.content h1 span {
    color: var(--primary-color);
    font-size:larger;
    font-weight: 900;
}
.content button {
    font-family: 'Unbounded', cursive;

}
.content button i {
    transition: all 0.3s ease-in-out;
}
.content button:hover i {
    transform: translateX(10px);
}
.custom {
    position: relative;
}
.custom h3 {
    font-size: large;
    position: absolute;
    top: -5%;
    background: #000;
}

.custom {
    border: 1px solid #eb5757;
}



.product h2 i{
    transition: all 0.3s ease-in-out;
}
.product h2:hover i {
    transform: rotate(-90deg) translateY(10px);
}


button.navbar-toggler.d-lg-none,button.navbar-toggler.d-lg-none:focus {
    background: #000 !important;
    box-shadow: none;
    border: none !important;
}