@font-face {
  font-family: "MyFont";
  src: url("../font/PPAgrandir-TightBlack.ttf") format("truetype");
}
@font-face {
  font-family: "MyFont2";
  src: url("../font/OmnesRegular-Roman.otf") format("truetype");
}
@font-face {
  font-family: "omnessemibold";
  src: url("../font/OmnesSemibold-Roman.otf") format("truetype");
}
@font-face {
  font-family: "omneslight";
  src: url("../font/OmnesExtraLight-Roman.otf") format("truetype");
}
h1, h2, h3, h4, h5, h6{
    word-spacing: 4px;
}
body{
    padding:0;
  font-family: "MyFont";
    margin:0;
}
header{
    background: #008bce !important;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: flex;
}

.section-one{
    background: #008bce url(../images/a049bd73905496bd5b85487da8fc325df89ef4ec.png);
        padding-bottom: 40px;
            background-size: cover;
    background-position: 50% 0px;
}
.image-one img{
    width: 12vw;
    text-align: center;
    margin: auto;
    display: block;
    padding-top: 14px;
}
.image-one h1{
    font-size: 3.4vw;
    text-align: center;
    width: 61vw;
    margin: auto;
    font-weight: 800;
    text-transform: uppercase;
  font-family: "MyFont", sans-serif !important;
    line-height: 4vw;
    letter-spacing: 2px;
        font-weight: 500;
    margin-top: 30px;
}

.colr-pink{
    background: #f7b5c8 !important;
}

.section-three{
       background: #008bce url(../images/texture.png) no-repeat;
        padding-bottom: 40px;
    background-position: 50% 0px;
     padding-top: 90px; 
}
.be-win h1{
    font-size: 72px;
    font-weight: 700;
    color:#fff;
    font-family: "MyFont", sans-serif !important;
    line-height: 68px;
}
.win-text{
    color: #f7b5c8;
}
.section-three .win-text{
    color: #01426a;
}
.section-four .win-text{
    color: #008bce;
}
.prize-draw-page .section-three {
    background-image: none;
    padding-top: 50px;
}
.prize-draw-page .section-three h1, .prize-draw-page .section-three h1 span {
    color: #02426a;
}

.section-four{
     background: #01426a url(../images/texture-dark.png) no-repeat;
        padding-bottom: 30px;
            padding-top: 60px;
    background-position: 50% -44px; 
}
.prize-draw-page .section-four {
    background-image: none;
    padding-top: 30px;
}
.footer{
    background: #008bce !important;
    font-family: "MyFont2";
}
.logo-footer img{
     width: 13%;
    margin: auto;
    display: block;
}
.logo-footer p{
     text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 300;
    margin-top: 50px !important;
}
.footer {
    
    padding: 70px 0;
}
.be-win h3{
    font-weight: 500;
    color: #fff;
    font-size: 32px;
    line-height: 32px;
    margin: 17px 0;


}
.boldest{
  font-family: "omnessemibold", sans-serif !important;

}
.be-win p{
    font-size: 24px;
    color: #fff;
    font-weight: 300;
    line-height: 26px;
    margin: 15px 0;
  font-family: "omneslight", sans-serif !important;

}
.font-boldest{
  font-family: "omnessemibold", sans-serif !important;

}
.colr-white{
    background: #fff;
}
.be-inheading{
  font-family: "MyFont2", sans-serif !important;
  color: white;
  font-weight: 700;;
}
.social-icons {
    display: flex;
    list-style-type: none;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.social-icons img {
    width: 50px;
    margin-right: 10px;
}

.align-center{
        max-width: 600px;
    margin: auto;
}
.prize-draw-page .section-three .align-center{
    max-width: 670px;
}

.scti-logo {
    width: 250px;
    padding: 20px;
}
.gamesetinsure-logo {
    width: 220px;
    padding: 10px 20px;
}
.homepage-banner-section {
    background: #008BCE url('/images/cloud-texture-visual.png') no-repeat;
    background-position: top center;
}

.homepage-banner-section h1 {
    font-size: 72px;
    font-weight: 800;
    text-transform: uppercase;
    font-family: "MyFont", sans-serif !important;
    line-height: 72px;
}
.homepage-banner-section .heading-text{
   color:#fff;
}
.heading-text-1{
   color:#01426a;
}
.homepage-section-1 {
    height: 410px;
    background-color: #008BCE;
}
.section-2{
    background: #008bce00 url(../images/hero-image-landmarks-1200-1920-3840.png);
    background-position: top center;
    height: 300px;
    position: absolute;
    top: -92px;    z-index: 9;
    width: 100%;
  
}
.section-3{
      background: #008bce00 url(../images/hero-image-cityscape-1200-1920-3840.png);
    background-position: center center;
    height: 300px;
    position: absolute;
    top: -13px;
    width: 100%;
}
.section-4{
    background: #008bce00 url(../images/hero-image-hedge-1200-1920-3840.png);
    background-position: center center;
    height: 300px;
    position: absolute;
    top: 0;
    
    width: 100%;    z-index: 10;
}
.section-5{
     background: #008bce00 url(../images/hero-image-court-1200-1920-3840.png);
    background-position: top center;
    z-index: 11;
    height: 523px;
    position: absolute;
    width: 100%;
    top: -111px;
}

.buttons-play a:hover{
    color: #02426a;
    
}
.buttons-play a{

        
}
.buttons-play {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 12;
}
.buttons-play a, .buttons-play button {
    color: #01426A;
     width: 220px;
    font-size: 22px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    background: #fff;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 10px;
    font-family: "MyFont", sans-serif !important;
}
.buttons-play a:hover, .buttons-play button:hover{
    color: #02426a;  
}
.homepage-section-1 .mobile-bg {
    display: none;
}

.nice-rally-section{
    background: #008BCE url(../images/form-header-bg.png) no-repeat;
        padding-bottom: 40px;
            padding-top: 10px;
    background-position: bottom center;
    background-size: cover;

}
.nice-rally-section h1{
    font-size: 100px;
    font-weight: 700;
    color: #02426a;
    font-family: "MyFont", sans-serif !important;
    line-height: 78px;
    text-align: center;
    font-size: 74px;
}
.nice-rally-section h1 span {
    color: #f7b5c8;
    display: block;
}
.nice-rally-section .racket {
    width: 61%;
    margin-left: 15%;
}
/* Game CSS */
form {
    font-family: "MyFont2", sans-serif !important;
}
form .form-label {
    display: none;
}

 .form-select{
        background: transparent !important;
            border-radius: 15px !important;
    border: 2px solid #fff !important;
}
.form-control{
    background: transparent !important;
    border-radius: 25px !important;
    border: 2px solid #fff !important;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 21px;
}
.form-control:focus {
    color: #fff;
}
::placeholder {
    color: white !important;
    opacity: 1; /* Safari ke liye */
    font-size: 21px;
     display: flex;
    align-items: center;
}
select.form-select {
    background-color: transparent !important; /* Blue background */
    color: white !important; /* White text */
      border: 2px solid #fff !important;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    font-size: 21px;
}
 
select.form-select option {
    background-color: #fff;
    color: black;
}
.custom-rounded-checkbox {
    /* Hide the actual browser checkbox */
    position: absolute;
    opacity: 0;
    /* This ensures the custom box is interactive */
    height: 0;
    width: 0;
}

.form-check-label {
    /* Set the label to be clickable and visually relative to the custom box */
    position: relative;
    padding-left: 28px; /* Space for the custom checkbox */
    cursor: pointer;
    user-select: none;
    font-size: 21px;
    color: #fff;
    line-height: 24px;
}
.small-optin-text {
    font-size: calc(1rem - 1px); /* 2px smaller */
    display: inline-block;
    margin-top: 4px;
    line-height: 20px;
}
.small-optin-text a {
    color: #ffffff !important;
    text-decoration: underline;
}
.draw {
    color: #02426a !important;
}


/* ------------------------------------- */
/* 2. Style the Unselected Rounded Box */
/* ------------------------------------- */
.form-check {
    text-align: left;
}
.form-check-label::before {
    content: "";
    position: absolute;
    top: 16px;
    left: -10px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;

    border: 2px solid #fff; /* Unselected border color */
    border-radius: 50%;
    transition: all 0.2s ease-in-out;
}

.custom-rounded-checkbox:checked + .form-check-label::before {
    /* Optional: Change the background/border color when checked */
    background-color: #02426a; /* Primary/Selected color */
    border-color: #02426a;
}

.form-check-label::after {
    content: "";
    position: absolute;
    top: 13px;
    left: 0px;
    transform: translateY(-50%) rotate(45deg); /* Rotate for checkmark shape */
    width: 6px;
    height: 12px;
    border: solid #fff; 
    border-width: 0 2px 2px 0;
    opacity: 0;
    transition: all 0.2s ease-in-out;
}

.custom-rounded-checkbox:checked + .form-check-label::after {
    opacity: 1;
}

.custom-rounded-checkbox:checked + .form-check-label::after {
    opacity: 1;
    border-radius: 1px; /* Subtle rounding on the checkmark ends/bend */
}
.colr-white  {
    background-color: #fff;
    padding: 9px 25px;
    font-size: 1.4vw;
    text-decoration: none;
    color: #02426a;
    border-radius: 50px;
    text-transform: uppercase;
    font-weight: 800;
    margin: 0 10px;
    font-family: "MyFont", sans-serif !important;
    width: 13vw;
    border: none;
    text-align: center;
    justify-content: center;
    white-space: nowrap;
    letter-spacing: 1px;
    font-weight: 500;
}

@media only screen and (min-width: 768px) and (max-width: 998px) {
    .nice-rally-section {
        background-image: url('../images/texture.png');
        padding: 25px 0;
    }
    .nice-rally-section h1 span {
        display: inline-block;
    }
    .nice-rally-section .racket {
        margin: 0;
        width: 170px;
        text-align: center;
        margin-left: 80%;
        z-index: 1;
        position: relative;
    }
    .nice-rally-section .mobile-img {
        position: absolute;
        bottom: 0;
        background-color: #008BCE;
        z-index: 0;
        padding-bottom: 25px;
    }
}
@media only screen and (max-width: 768px) and (min-width: 320px) {
    .align-center{
        width: 100%;
        margin: auto;
    }
    
    .section-one{
        height:auto;
    }

    .homepage-banner-section {
        background-size: cover !important;
    }


    .be-win h3 {
        font-weight: 500;
        color: #fff;
        font-size: 32px;
        line-height: 32px !important;
        margin: 17px 0;
    }
    .be-win{
        padding: 0 40px;
    }
    .logo-footer img {
        width: 54% !important;
        margin: auto;
        display: block;
    }
    .buttons-play {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .buttons-play a {
        margin: 10px 0;
    }
    .homepage-section-1 {
        height: auto;
        overflow: hidden;
    }
    .homepage-section-1 .section-2, .homepage-section-1 .section-3, .homepage-section-1 .section-4, .homepage-section-1 .section-5 {
       display: none;
    }
    .homepage-section-1 .mobile-bg {
        display: block;
    }
    .homepage-section-1 .mobile-bg img {
        width: 100%;
        overflow: hidden;
    }
    .homepage-banner-section h1 {
        font-size: 40px;
        line-height: 40px;
    }
    .homepage-banner-section .buttons-play {
        padding: 10px 0;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .homepage-banner-section .buttons-play a {
        margin: 10px;
    }
    .homepage-banner-section .buttons-play a:first-child {
        margin: 10px 50px;
    }
    .nice-rally-section h1 {
        font-size: 50px;
        line-height: 50px;
    }
    .nice-rally-section {
        background-image: url('../images/texture.png');
        padding: 25px 0;
    }
    .nice-rally-section h1 span {
        display: inline-block;
    }
    .nice-rally-section .racket {
        margin: 0;
        width: 170px;
        text-align: center;
        margin-left: 40%;
        z-index: 1;
        position: relative;
    }
    .nice-rally-section .mobile-img {
        position: absolute;
        bottom: 0;
        background-color: #008BCE;
        z-index: 0;
        padding-bottom: 25px;
    }
    .form-control, ::placeholder, select.form-select, .form-check-label{ 
        font-size: 20px;
    }
    .be-win h3 {
        font-size: 25px;
    }
    
    /* .homepage-section-1 .mobile-bg{
        background: #008BCE url('../images/landing-page-bg-1.png') no-repeat;
        background-position:  100% 0px;
        height: 50vw;
    } */
    .footer {
        padding: 30px 0;
    }
    .logo-footer p {
        font-size: 14px;
        margin-top: 30px !important;
    }
}