:root {
    --primary-color: #F48A00;
    --dark-color: #13137C;
    --dark-second-color: #13137C;
    --text-color-dark: var(--dark-color);
    --text-color-light: #FFFFFF;
    --body-color: #F3F3F3;
    --semi-light: #F3F3F3;
    --footer-bg: #13137C;
}

@media (min-width: 1200px) {
    .container {
        width: 1440px;
    }
}

body {
    display: flex;
    flex-direction: column;
    background-color: var(--body-color);
    color: var(--dark-color);
}

.bg-dark {
    background-color: var(--dark-color) !important;
}


/* Wrapper for page content to push down footer */

.main-wrapper {
    height: 100%;
}

html {
    background-color: var(--body-color);
    color: var(--dark-color);
}

html * {
    font-family: 'Nunito', sans-serif;
}

html {
    scroll-behavior: smooth;
}

header {
    padding: 0px 116px;
    display: flex;
}

header>* {
    display: inline-block;
    margin: 19px 0;
}

header>* {
    width: 20%;
}

.img-logo {
    height: 41px;
    margin-top: 20px;
}

nav {
    display: flex;
    justify-content: flex-end;
    margin-top: -19px;
}

nav>* {
    display: block;
}

.navbar-nav {
    flex-direction: inherit !important;
}

nav a {
    color: var(--body-color);
    text-decoration: none;
    padding: 37px 20px 20px 20px !important;
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 700;
}

nav a:hover,
.nav-item.active {
    background: var(--primary-color);
    color: var(--body-color);
    text-decoration: none;
}

.footer-nav .nav-items-list {
    margin-top: 1.9rem !important;
}

header {
    z-index: 9;
}

.header-bckground-icon {
    padding: 0px !important;
}

#topCarousel {
    margin-top: -110px;
}

#topCarousel .carousel-item {
    height: 755px;
    background-size: cover !important;
}

.top-carousel-content {
    color: var(--text-color-light);
    font-weight: 700;
    margin-top: 150px;
    position: absolute;
    z-index: 99;
    width: 500px;
    left: 50%;
    margin-left: -530px;
}

.top-carousel-content h3 {
    font-size: 47px;
    font-weight: 700;
    line-height: 45px;
}

.top-carousel-content h4 {
    font-size: 23px;
    font-weight: 700;
}

.top-carousel-content p {
    font-size: 18px;
}

#topCarousel .carousel-indicators li {
    width: 18px !important;
    height: 18px !important;
}

#sport-widget {
    width: 370px;
    height: 512px;
    top: 150px;
    right: 50%;
    position: absolute;
    z-index: 99;
    margin-right: -527px;
}

.btn-install-extension:hover {
    opacity: 0.8;
}


/** favorite sport */

.favorite-sport {
    height: 287px;
    background: url(../img/favorite-sport.png) center center no-repeat;
    margin-top: -27px !important;
    background-size: cover;
}

.favorite-sport-left,
.favorite-sport-right {
    height: 287px;
}

.favorite-sport-2 {
    height: 320px;
    background: url(../img/favorite-sports-bg.png) center 85px no-repeat;
    background-size: 50%;
}

.favorite-sport-2 h2 {
    padding-top: 220px;
    font-weight: 700;
    font-size: 36px;
}

.favorite-sport-2 p {
    font-weight: 700;
}

.favorite-sport-3 * {
    color: var(--body-color);
}

.favorite-sport-3 h2 {
    font-weight: 700;
}

.favorite-sport-3 h3 {
    font-weight: 700;
    font-size: 38px;
}

.favorite-sport-3 p {
    font-weight: 700;
    font-size: 15px;
}

.detailed-match h1 {
    font-weight: 700;
    font-size: 32px;
    color: var(--text-color-dark);
}

.favorite-sport-31 h2 {
    margin-top: 100px;
}

.favorite-sport-32 img {
    margin-top: -40px;
}

.favorite-sport-33 img {
    margin-top: -100px;
}

.favorite-sport-34 img {
    margin-top: -100px;
}

.favorite-sport-33 h2 {
    margin-top: 130px;
}

.favorite-sport-34 h2 {
    margin-top: 150px;
}


/** secondHomeCarousel */

#secondHomeCarousel .carousel-inner {
    height: 590px;
}

.second-carousel-bg {
    width: auto;
    height: 520px;
}

.carousel-control-next,
.carousel-control-prev {
    border: none;
    background-color: transparent;
}

.carousel-control-next span {
    background: url(../img/second-carousel-next.png) center center no-repeat;
}

.carousel-control-prev span {
    background: url(../img/second-carousel-prev.png) center center no-repeat;
}

#secondHomeCarousel .carousel-indicators {
    top: -25px;
}

.second-carousel-text {
    padding-top: 220px !important;
}

.second-carousel-text span {
    color: var(--text-color-light);
    background-color: var(--primary-color);
    font-weight: 700;
    font-size: 24px;
    line-height: 38px;
    padding: 7px 15px 7px 15px;
}

.second-carousel-text p {
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
}

#gettingStarted {
    color: var(--text-color-light);
}

#gettingStarted h1 {
    font-weight: 700;
    font-size: 32px;
    text-transform: uppercase;
}

#gettingStarted h4 {
    font-weight: 700;
    font-size: 24px;
    text-transform: uppercase;
    margin-left: 115px;
}

#gettingStarted img {
    width: 320px;
    margin-left: 50px;
    margin-bottom: 30px;
}

#gettingStarted span {
    width: 50px;
    height: 50px;
    background-color: var(--primary-color);
    display: inline-block;
    margin-left: 50px;
    line-height: 50px;
    margin-top: -24px;
    font-weight: 700;
    font-size: 24px;
    position: absolute;
}

#gettingStarted p {
    font-weight: 700;
    font-size: 16px;
    margin-left: 115px;
}

.button.add-ext-btn {
    color: var(--body-color);
    background: var(--primary-color);
    text-decoration: none;
    padding: 14px 22px 14px 22px !important;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
    border-radius: 0 !important;
}

.button.add-ext-btn:hover {
    opacity: 0.8;
}

.welcome-section {
    color: var(--text-color-dark);
}

.welcome-section h1 {
    font-weight: 700;
    font-size: 48px;
    line-height: 79px;
    text-transform: uppercase;
}

.welcome-section p {
    font-style: normal;
    font-weight: 600;
    font-size: 18px;
}

.accessing-widget-section {
    height: 317px;
    background: var(--semi-light) url(../img/htu-top2-bg.png) center -30px no-repeat;
    color: var(--text-color-light);
    background-size: cover;
}

.accessing-widget-section h2 {
    font-weight: 700;
    font-size: 31px;
    text-transform: uppercase;
}

.accessing-widget-section p {
    font-weight: 400;
    font-size: 13px;
    line-height: 25px;
}

.accessing-widget-section img {
    margin: -239px 605px;
    width: 443px;
    position: absolute;
    z-index: 9;
}

.bg-semi-light {
    background: var(--semi-light);
}

.htu-widget-interaction h4 {
    font-size: 22px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
    padding-left: 20%;
    text-align: left;
}

.htu-widget-interaction p {
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-align: left;
    width: 70%;
    padding-left: 20%;
}


/* Footer
----------------------------------------- */

.nav-items-list li {
    display: inline;
    padding: 7px;
}

.nav-items-list li a {
    color: var(--body-color);
    font-weight: 700;
    font-size: 16px;
}

.footer-nav-items {
    height: 100% !important;
}

footer {
    padding: 17px 80px;
    height: 380px;
    background-color: var(--footer-bg);
}

footer a.nav-link {
    display: inline-block;
    padding: 0;
    padding: 20px 20px 20px 20px;
    margin-top: -12px;
    text-transform: uppercase;
}

footer a.nav-link:focus,
footer a.nav-link:hover {
    text-decoration: none;
    background-color: var(--primary-color);
}

.error-view,
.ccpa-container,
.legal-container,
.exit-survey-view,
.requirements-view {
    color: var(--text-color-dark);
    min-height: calc(100vh - 210px);
}


/** feedback page **/

.fdbck-header-holder {
    background: var(--footer-bg) url(../img/footer-bg.png) center center no-repeat;
    background-size: 45% !important;
}

.fdbc-img-holder {
    background: var(--footer-bg);
}


/** scroller */

::-webkit-scrollbar {
    width: 7px;
}

 ::-webkit-scrollbar-track {
    background: var(--body-color);
}

 ::-webkit-scrollbar-thumb {
    background: var(--dark-color);
}

 ::-webkit-scrollbar-thumb:hover {
    background: var(--dark-second-color);
}

@media (max-width: 1400px) {
    footer {
        height: 432px;
    }
}

@media (max-width: 1120px) {
    #sport-widget {
        right: 62%;
    }
    .accessing-widget-section img {
        max-width: 342px !important;
        margin-top: -210px !important;
    }
}

@media (max-width: 1080px) {
    .top-carousel-content {
        margin-left: -444px !important;
    }
    .accessing-widget-section img {
        max-width: 300px !important;
        margin-top: -210px !important;
        margin-left: 52% !important;
    }
}

@media (max-width: 916px) {
    .top-carousel-content {
        margin-left: -380px !important;
    }
    #sport-widget {
        width: 320px !important;
        margin-right: -496px !important;
    }
}

@media (max-width: 994px) {
    .favorite-sport-31 img,
    .favorite-sport-33 img {
        margin-left: -45%;
    }
    .favorite-sport-34 img {
        max-width: 88%;
        margin-top: 22%;
    }
    header img {
        display: none;
    }
    .favorite-sport-3 {
        margin-top: 130px;
    }
}

@media (max-width: 860px) {
    footer {
        height: 484px;
    }
    .favorite-sport-3 {
        margin-top: 170px;
    }
    #sport-widget {
        display: none !important;
    }
    .top-carousel-content {
        margin-left: -256px !important;
    }
    nav a {
        padding: 26px 11px 42px 11px !important;
    }
}

@media (max-width: 765px) {
    footer {
        height: 536px;
    }
    .favorite-sport-3 img {
        margin-left: 0px !important;
        margin-top: 30px !important;
    }
}

@media (max-width: 715px) {
    footer {
        height: 536px;
    }
    nav a {
        margin-top: -22px !important;
    }
}