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

body {
    font-family: 'Montserrat', sans-serif;
    background-color: #000000;
    color: #EEEEEE;
}

.app-container {
    width: 1440px;
    margin: 0 auto;
}

/* Utility Classes */
.upper-case {
    text-transform: uppercase;
}

.font-weight-700 {
    font-weight: 700;
}

.font-weight-600 {
    font-weight: 600;
}

.font-weight-bold {
    font-weight: bold;
}

.font-size-24 {
    font-size: 24px;
}

.font-size-14 {
    font-size: 14px;
}

.font-size-16 {
    font-size: 16px;
}

.font-size-48 {
    font-size: 48px;
}

.d-flex {
    display: flex;
    align-items: center;
}

.decoration-none {
    text-decoration: none;
}

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

.width-35 {
    width: 35%;
}

.width-50 {
    width: 50%;
}

.width-65 {
    width: 65%;
}

.width-22 {
    width: 22%;
}

.mt-60 {
    margin-top: 60px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-50 {
    margin-top: -50px;
}
.mb-20{
    margin-bottom: 20px;
}

.m-tb-10 {
    margin: 10px 0;
}

.ml-60 {
    margin-left: 60px;
}

.ml-50{
    margin-left: 50px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-40 {
    margin-left: -40px;
}

.ml-90{
    margin-left: 90px;
}

.ml-100 {
    margin-left: -100px;
}

.ml-460 {
    margin-left: 460px;
}

.mr-10 {
    margin-right: 10px;
}

.bg-black {
    background-color: #141414;
}

.bg-light-black {
    background-color: #000000;
}

.bg-blue {
    background-color: #0069D1;
}

.bg-orange {
    background-color: #FB4338;
}

.bg-color {
    background-color: #11102E;
}

.color-orange {
    color: #FB4338;
}

.color-yellow {
    color: #FFB400;
}

.color-green {
    color: #03F246;
}

.color-blue {
    color: #0055FB;
}

.color-purple {
    color: #BE63D2;
}

.color-white {
    color: #FFFFFF;
}

.fans-uppercards {
    border-radius: 20px;
    padding: 20px;
    width: 349px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
    height: 160px;
}

.fans-lowercards {
    border-radius: 20px;
    padding: 20px;
    width: 349px;
    margin-top: -140px;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cards-text {
    line-height: 19.5px;
}

/* Landing Page CSS Starts */
.hero-section {
    padding: 100px 90px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.site-heading {
    font: 800 48px/58px 'Montserrat', sans-serif;
}

.heading-webkit {
    color: #000000;
    font: 600 65px/80px 'Arial', sans-serif;
    -webkit-text-stroke: 1px #FFFFFF;
}

.sub-heading {
    font: 16px/30px 'Montserrat', sans-serif;
}

.download-btn {
    width: fit-content;
    display: flex;
    padding: 22px 40px;
    border-radius: 40px;
    font: 400 30px/36px 'Montserrat', sans-serif;
    transition: background-color 0.3s ease;
    gap: 8px;
    margin: 40px 0 0;
}

.download-icon {
    max-width: 38px;
    width: 100%;
}

.logo-wrap .logo {
    max-width: 382px;
    width: 100%;
}

/* Landing Page CSS Ends */

/* About Section CSS Starts */
.about-wrap {
    gap: 10px;
}

.img-wrap .about-rafters {
    max-width: 520px;
    width: 100%;
}

.main-heading {
    font: 800 48px/58.51px 'Montserrat', sans-serif;
}

.blue-leaf-container {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/*Feature Card CSS Starts*/
.feature-section {
    padding: 20px 0px;
}

.features {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.features-item {
    margin: 10px;
    max-width: 220px;
}

.features-item img {
    max-width: 60px;
    width: 100%;
    margin-right: 10px;
}

/*Feature Card CSS Ends*/

/*Culture Card CSS Starts*/
.culture-box {
    display: flex;
    gap: 40px;
    flex-wrap: nowrap;
    margin-top: 50px;
}

.culture-webkit {
    color: #000000;
    font: bold 24px 'Arial', sans-serif;
    margin-bottom: 20px;
    -webkit-text-stroke: 1px #FFFFFF;
    padding-left: 30px;
}

.culture-card {
    max-width: 285px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.values-box {
    border: 1px solid #2b2a2a;
    border-radius: 20px;
    padding: 23px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    flex-grow: 1;
}

.box-sub {
    line-height: 1.5;
}

.link {
    display: block;
    margin: 0;
    padding: 0;
}

/* Fans CSS Starts*/
.fans-container {
    border-radius: 8px;
    padding: 20px 0px 100px 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    position: relative;
    margin-left: -20px;
}

.fans-content {
    position: relative;
    padding: 50px 0px 0px 100px;
}

.football-image {
    position: absolute;
    top: -65px;
    right: 2px;
}

.circular-img {
    position: absolute;
    top: 540px;
    left: 2px;
}

.info-boxes {
    display: flex;
    gap: 7%;
    flex-wrap: wrap;
    padding: 40px 0px 0px 110px;
}

.blue-container {
    margin: 30px 0px 0px -45px;
}

.yellow-container {
    margin: 70px 0px 0px -100px;
}

.info-red-card {
    padding: 20px;
    width: 20%;
    max-width: 400px;
    margin-top: 50px;
    margin-left: 85px;
}

.red-main-heading {
    margin-bottom: 20px;
}

.info-content {
    justify-content: space-between;
    margin-bottom: 10px;
}

.progress-bar {
    border-radius: 15px;
    width: 80%;
    padding: 10px 0px 3px 0px;
}

.blue-gradient {
    background: linear-gradient(to left, #FFFFFF, rgba(255, 255, 255, 0));
}

.yellow-gradient {
    background: linear-gradient(to right, rgba(243, 192, 49, 0), rgba(243, 192, 49, 1));
}

.green-gradient {
    background: linear-gradient(to left, #3DD07B, rgba(61, 208, 123, 0));
}

.orange-gradient {
    background: linear-gradient(to left, #FF774B, rgba(255, 120, 76, 0));
}

/*Campaign Card Starts*/
.campaign-section {
    padding: 20px;
    display: flex;
    justify-content: center;
    margin-bottom: 130px;
}

.campaign-wrapper {
    padding: 50px;
}

.campaign-card-wrap {
    display: flex;
    gap: 7%;
    padding-top: 50px;
    flex-wrap: wrap;
}

.camp-card {
    border-radius: 30px;
    padding: 20px;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.card-sports-betting {
    border: 2px solid rgb(103, 170, 214);
    width: 48%;
}

.card-build-website {
    width: 20%;
    margin: 50px 0px 0px 50px;
}

.card-expanding-sports {
    width: 27%;
    margin-top: 70px;
}

.animated-loading {
    margin-left: -80px;
}

.card-original-content {
    margin: -50px 0px 0px 110px;
}

.animated-loader {
    max-width: 1340px;
   width: 100%;
   margin: 20px;
}

/*Mobile Section*/
.mobile-section {
    margin-bottom: 50px;
}

.mobile-container {
    border-radius: 8px;
    padding: 20px 0px 80px 0px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    margin-left: -40px;
}

.mobile-content {
    padding: 40px 0px 0px 70px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.mobile-image {
    position: absolute;
    top: -100px;
    right: -20px;
    max-width: 38%;
    margin-right: 50px;
}

/*Services Section Starts*/
.services-content {
    display: flex;
    margin-top: 80px;
}

.logo-box {
    padding: 20px;
    width: 360px;
}

.services {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-left: 100px;
    padding-left: 100px;
}

.services-stat {
    padding-right: 100px;
}

/* Marketing Section Starts */
.marketing-content {
    flex-direction: column;
    padding: 20px 0px 20px 15px;
}

.marketingteam-section {
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.marketing-wrapper {
    display: flex;
    gap: 14px;
    margin: 10px;
}

.marketing-card {
    padding-left: 10px;
}

.marketing-main {
    margin-bottom: 8px;
}

.marketing-subtitle {
    line-height: 17px;
    font-weight: 500;
}

/*Footer Section Starts*/
footer {
    justify-content: space-between;
    width: 1440px;
}