/* ======================================= GOOGLE FONTS ======================================= */
@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ======================================= VARIABLES CSS ======================================= */
:root {
    --bs-body-font-family: 'Poppins', sans-serif !important;
    --second-font: 'Kaushan Script', cursive;

    --bs-primary-rgb: 253, 153, 13 !important;
}

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

html {
    scroll-behavior: smooth;
}

body {
    position: relative;
    background: black !important;
    color: white !important;
    overflow-x: hidden !important;
}


ul {
    list-style: none;
    color: var(--text-color);
}

a {
    text-decoration: none !important;
}

img {
    max-width: 100%;
    height: auto;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:active,
input:-webkit-autofill:focus {
    -webkit-text-fill-color: white !important;
    transition: background-color 5000s ease-in-out 0s !important;
}

.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: hsl(35, 98%, 52%) !important;
    --bs-btn-border-color: hsl(35, 98%, 52%) !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: hsl(35, 90%, 44%) !important;
    --bs-btn-hover-border-color: hsl(35, 91%, 42%) !important;
    --bs-btn-focus-shadow-rgb: 49, 132, 253 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: hsl(35, 91%, 42%) !important;
    --bs-btn-active-border-color: hsl(35, 90%, 39%) !important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: hsl(35, 98%, 52%) !important;
    --bs-btn-disabled-border-color: hsl(35, 98%, 52%) !important;
}

.btn-check:active+.btn:focus,
.btn-check:checked+.btn:focus,
.btn.active:focus,
.btn.show:focus,
.btn:active:focus {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.form-control:focus {
    color: hsl(35, 11%, 15%) !important;
    background-color: #fff !important;
    border-color: hsl(35, 98%, 76%) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.25rem hsla(35, 98%, 52%, 0.25) !important;
}

.form-control option {
    color: white !important;
}

::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

.form-check-input:checked {
    background-color: #fd990d !important;
    border-color: #fd990d !important;
}

/* ======================================= RESUABLE CLASSES ======================================= */
.container {
    max-width: 1024px !important;
}

section {
    padding: 4rem 0 8rem;
}

::-webkit-scrollbar {
    width: .65rem;
}

::-webkit-scrollbar-thumb {
    border-radius: .5rem;
    background-color: #FFDF0A;
    -webkit-border-radius: .5rem;
    -moz-border-radius: .5rem;
    -ms-border-radius: .5rem;
    -o-border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #fd990d;
}

/* ======================================= NAV ======================================= */
.nav__link {
    width: fit-content;
    color: white !important;
}

.nav__link i,
.nav__toggle i,
.nav__toggle-close i,
.nav__cart,
.nav__search {
    font-size: 1.5rem;
    cursor: pointer;
}

.nav__link:hover {
    color: #959595 !important;
}

.nav__link-sign-up {
    width: fit-content;
    background-color: #fd990d !important;
}

.nav__link-sign-up:hover {
    color: white !important;
    background-color: hsl(35, 98%, 42%) !important;
}

.nav__link-active {
    position: relative;
}

.nav__link-active:hover {
    color: white !important;
}

.nav__link-active::after {
    content: '';
    position: absolute;
    left: 17px;
    bottom: 0;
    width: 40%;
    height: 2px;
    background-color: white;
}

/* ======================================= HOME ======================================= */
.home__container {
    position: relative;
    margin-bottom: 10rem;
    max-width: 1024px !important;
    margin-bottom: 1rem;
    padding-bottom: 2rem !important;
    height: 75vh;
}

.home__img {
    width: 400px;
}

.icons {
    gap: .75rem;
}

.icons i {
    cursor: pointer;
}

.home__title {
    font-size: xx-large;
}

.contact__btn {
    background: none;
    outline: none;
    border: none;
}

.order__btn {
    background: hsl(35, 98%, 52%) !important;
    border: none !important;
}

.order__btn:hover {
    background: hsl(35, 98%, 42%) !important;
}

.swiper-pagination-bullet {
    background-color: hsl(35, 98%, 52%) !important;
}

.swiper-slide a:hover {
    color: initial !important;
}

/* ======================================= DEAL ======================================= */
.deal__container {
    display: grid;
    align-items: center;
    gap: 1rem;
}

.deal__container img {
    width: 450px;
}

/* ======================================= OFFER ======================================= */
.offer__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1.5rem;
    justify-items: center;
    align-items: center
}

.offer__subtitle {
    display: inherit;
}

.offer__card {
    min-height: 300px;
    background-color: #FFDF0A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-shadow: hwb(240 38% 6% / 0.2) 0px 7px 29px 0px;
    cursor: pointer;
    transition: .3s;
}

.offer__card:hover {
    box-shadow: 0px 0px 15px -3px #ffdf0a;
}

.offer__card:hover .offer__card-img {
    transform: scale(1.2);
}

.offer__card-img {
    display: flex;
    width: 150px;
    margin: auto;
    transition: .3s;
}

.offer__card-subtitle {
    font-size: .83rem;
}

/* ======================================= OFFER ======================================= */
.count__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 3rem;
    justify-items: center;
    align-items: flex-start
}

h3.count__title {
    width: fit-content;
    position: relative !important;
    margin: auto;
    cursor: pointer;
    transition: .3s;
    margin-bottom: 7rem;
}

h3.count__title:hover {
    transform: scale(1.25);
}

h3.count__title::after {
    content: '';
    position: absolute;
    width: 140%;
    height: 5px;
    background-color: white;
    bottom: -7px;
    left: 0;
}

h3.count__title::before {
    content: '';
    position: absolute;
    border: solid white;
    border-width: 0 5px 5px 0;
    right: -70px;
    bottom: -11px;
    display: inline-block;
    padding: 5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
}

.count__card {
    gap: 1.5rem;
    min-height: 150px;
}

/* ======================================= FOOTER ======================================= */
.footer {
    padding: 3rem 0 1rem;
    background-color: rgb(13, 13, 13);
}

.footer__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.footer__logo {
    color: #FFDF0A;
}

.footer__logo:hover {
    color: #fd990d;
}

.footer__description,
.footer__link {
    font-size: .9rem;
}

.footer__description a {
    color: #fd990d;
}

.footer__description a:hover {
    text-decoration: underline;
    color: #FFDF0A;
}

.footer__logo,
.footer__title {
    font-size: var(--h3-font-size);
}

.footer__link {
    display: inline-block;
    margin-bottom: .75rem;
    color: #e7e7e7;
}

.footer__link:hover {
    color: #929292;
}

.footer__social {
    font-size: 1.5rem;
    color: white;
    margin-right: 1.5rem;
}

.footer__social:hover {
    color: #929292;
}

.footer__copy {
    text-align: center;
    font-size: var(--small-font-size);
    color: #959595;
    margin-top: 4rem;
}

/* @media screen and (min-width: 568px) {} */

@media screen and (min-width: 768px) {
    .home__content {
        display: flex;
        align-items: center;
        gap: 3rem;
    }

    .home__img {
        width: 800px;
    }

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

@media screen and (min-width: 991.2px) {

    .nav__toggle,
    .nav__toggle-close {
        display: none !important;
    }

    .header__logo {
        display: none !important;
    }

    .nav__list {
        width: 100% !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }

    .nav__link-sign-up {
        margin-right: 1.5rem;
    }
}

/* NAV MENU */
@media screen and (max-width: 991.2px) {
    .nav__list {
        position: fixed;
        justify-content: initial !important;
        flex-direction: column;
        background-color: rgb(48, 48, 48) !important;
        top: 0;
        right: -100%;
        width: 70%;
        height: 100%;
        -webkit-box-shadow: -1px 0 4px rgb(14 55 63 / 15%);
        box-shadow: -1px 0 4px rgb(14 55 63 / 15%);
        padding: 3rem;
        z-index: 111;
        -webkit-transition: .4s;
        -o-transition: .4s;
        transition: .4s;
    }

    .nav__logo-div {
        display: none !important;
    }

    .nav__list .nav-pills {
        gap: .5rem !important;
        flex-direction: column;
    }

    .nav__link-sign-up {
        margin-top: .25rem !important;
        margin-left: .9rem !important;
    }

    .nav__toggle-close {
        position: absolute;
        top: 1rem;
        right: 1rem;
    }

    .show-menu {
        right: 0;
    }
}

@media screen and (max-width: 400px) {
    .nav__list {
        width: 100%;
    }
}