/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,400;6..12,500;6..12,600;6..12,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playball&display=swap');


/* Basic Setup */
:root{
 --background-color:#003E40;
 --primary-color:#53CF91;
 --secondary-color:#c9c9c9;
 --black-color:#000000;
 --heading-color:#003E40;
 --text-color:#4A4A4A;
 --text-color-two:#E7CCB0;
 --text-font: 'Nunito Sans', sans-serif;
 --text-font-two:'Playball', cursive;
 --white-color:#FFFFFF;
}
/* font-family: 'Playball', cursive; */

/* Add below your existing CSS */

/* Mobile responsive adjustments */


*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
.container{
   max-width: 1110px;
   margin: 0 auto;
}
img{
   max-width: 115%;
   height: auto;
}
a{
   text-decoration: none;
}
h1,h2,h3,h4,p{
   margin-bottom: 0;
}

/* hero section css start */

.email-input,
#pcode,
#num {
   width: 100%;
   padding: 12px 10px;
   margin: 8px 0;
   display: inline-block;
   border: 0;
   border-radius: 8px;
   box-sizing: border-box;
}*

.hero-bg{
padding-top: 100px; /* Adjust this value as needed */
  background-image: url(../images/background.png);
  background-size: cover;
  background-repeat: no-repeat;
  padding: 0px 0 100px;
  overflow: hidden;
}
.header-logo{
   text-align: center;
   padding-bottom: 45px;
}
.hero-body{
   display: flex;
   gap: 35px;
}
.hero-title h2 {
   margin-bottom: 20px; /* Adjust as needed */
   color: var(--text-color);
}

.hero-title h2 span {
 font-family: var(--text-font-two);
 font-weight: 400;
 color: #003E40;


}
.hero-desc p {
   font-size: 18px;
   color: #191919;
   font-family: var(--text-font);
   font-weight: 500;
 }

.hero-desc {
    /* max-width: 48%; Narrows the width to 50% of its parent */
    margin: 0 auto; /* Centers the content horizontally */
    /* width: 64%; */
}

.form-wrapper {
    width: 51%; /* Example width */
    margin: 0 auto; /* Center the form */
}

/* .hero-wrapper {
   background: #FFFFFF;
   padding: 18px 0 27px 24px;
   margin-top: 32px;
} */
.hero-wrapper{
  background-image: url();
  background-size: cover;
  background-repeat: no-repeat;
  padding: 18px 0 27px 24px;
  margin-top: 20px;
}
.hero-wrapper-title h3 {
   font-size: 28px;
   font-family: var(--text-font);
   font-weight: 700;
   color:var(--background-color);
}
.hero-wrapper-titleNew h3 {
   font-size: 28px;
   font-family: var(--text-font);
   font-weight: 700;
   color:white;
}
.hero-wrapper-desc p {
   font-size: 16px;
   font-weight: 500;
   font-family: var(--text-font);
   color:var(--background-color);

}
.hero-wrapper-title {
   padding: 15px 0 11px 30px;
}
.hero-wrapper-desc {
   padding-left: 30px;
}
span.prize {
   color: #622b07;
}

.hero-right {
   background-color: var(--background-color);
   padding: 20px;
   border-radius: 8px;
   box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Optional */
}
.hero-right input[type=text],[type=number] {
   width: 100%;
   padding: 12px 10px;
   margin: 8px 0;
   display: inline-block;
   border: 0;
   border-radius: 8px;
   box-sizing: border-box;
}
.centered-content {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   height: 100vh;
}
.hero-right input[type=submit] {
    display: block; /* Makes the button a block element */
    width: 100%; /* Sets the button's width to fully occupy its container */
    background-color: var(--primary-color);
    color: var(--white-color);
    padding: 16px 0; /* Sets padding on top and bottom, removes left/right padding */
    margin-top: 8px; /* Keeps the original top margin */
    margin-bottom: 8px; /* Keeps the original bottom margin */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Nunito Sans', sans-serif;
    font-weight: 700;
    text-align: center; /* Center the text inside the button */
}

}
.hero-right input[type=submit]:hover {
   background-color: var(--text-color-two);
}
.frm-grp.submit {
   text-align: center;
}
.form-wrapper {
   width: 100%; /* Adjust width as needed */
   max-width: 500px; /* Adjust as needed */
}
.frm-grp.check-span {
   margin: 20px 0 23px;
}
.hero-desc {
    background-color: var(--white-color); /* Dark brown with 70% opacity */
    margin: 0 auto; /* Keeps the content centered */
    width: 60%; /*Or whatever width was previously set*/
    padding: 20px; /* Adds space inside the box */
    color: #FFFFFF; /* Sets the text color to white */
    border-radius: 10px; /* Rounds the corners */
}


/*  */


label.label-text {
   color: var(--text-color-two);
   font-size: 16px;
   font-weight: 700;
   font-family: var(--text-font);
}

/* The container */
.check-wrapper {
 display: block;
 position: relative;
 padding-left: 30px;
 margin-bottom: 16px;
 cursor: pointer;
 font-size: 16px;
 -webkit-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
 color: var(--text-color-two);
}

/* Hide the browser's default checkbox */
.check-wrapper input {
 position: absolute;
 opacity: 0;
 cursor: pointer;
 height: 0;
 width: 0;
}

/* Create a custom checkbox */
.checkmark {
 position: absolute;
 top: 0;
 left: 0;
 height: 17px;
 width: 17px;
 background-color: #eee;
 border-radius: 20px;
}

/* On mouse-over, add a grey background color */
.check-wrapper:hover input ~ .checkmark {
 background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-wrapper input:checked ~ .checkmark {
 background-color: #FF6500;
}

/* Create the checkmark/indicator (hidden when not checked) */
.check-wrapper:after {
 content: "";
 position: absolute;
 display: none;
}

/* Show the checkmark when checkeuuud */
.check-wrapper input:checked ~ .checkmark:after {
 display: block;
}

/* Style the checkmark/indicator */
.check-wrapper .checkmark:after {
 left: 9px;
 top: 5px;
 width: 5px;
 height: 10px;
 border: solid var(--white-color);
 border-width: 0 3px 3px 0;
 -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}

/* hero section css end */


/* banner section start */
.banner-bg{
   background-image: url(../images/bannerbg.png);
   background-size: cover;
   background-repeat: no-repeat;
   padding: 144px 0 116px;
   overflow: hidden;
}
.banner-body {
   display: flex;
   gap: 69px;
}
.banner-img img {
   max-width: 100%;
   height: auto;
}

.banner-title h2 {
   color: var(--background-color);
   font-size: 32px;
   font-weight: 500;
   font-family: var(--text-font);
}
.banner-desc p {
   font-family: var(--text-font);
   font-weight: 400;
   font-size: 18px;
   color: var(--black-color);
   padding-top: 15px;
}
.banner-title.banner-title-two {
   margin: 20px 0 0px;
}
.banner-img img {
 border-radius: 10px;
}
/* banner section end */



/* footer section css start */
.footer-bg{
   background-color: var(--background-color);
   padding: 61px 0 52px;
}
.footer-title h3 {
   font-size: 32px;
   font-weight: 500;
   color: var(--white-color);
   font-family: var(--text-font);
}
.footer-title {
   margin-bottom: 66px;
}
form.footer-form {
   display: flex;
   gap: 47px;
}
.footer-content{
  text-align: center;
}
.footer-content p {
   font-size: 16px;
   font-weight: 700;
   color: var(--white-color);
   font-family: var(--text-font);
}
a.terms-link {
  color:var(  --secondary-color);
  text-transform: capitalize;
}
.footer-spacer {
   margin: 65px 0 38px;
}
.footer-spacer hr {
   color: var(--white-color);
}
.footer-form input[type=text],[type=number] {
   width: 100%;
   padding: 12px 12px 12px 12px;
   margin: 8px 0 0;
   display: inline-block;
   border: 0;
   border-radius: 8px;
   box-sizing: border-box;
}
.footer-form input[type=submit] {
   background-color: var(--primary-color);
   color: var(--white-color);
   padding: 12px 90px;
   margin: 30px 0 0 0;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   text-align: center;
   font-family: 'Nunito Sans', sans-serif;
   font-weight: 700;
}
.footer-form input[type=submit]:hover {
   background-color: var(--text-color-two);
}
p.copy-right-text {
   margin-bottom: 17px;
}
.email-input {
   width: 99%;
   padding: 12px 12px 12px 12px;
   margin: 8px 0 0;
   display: inline-block;
   border: 0;
   border-radius: 8px;
   box-sizing: border-box;
}
/* footer section css end */



/* terms page css start */
.terms-bg{
  background-color: var(--text-color-two);
  padding: 0px 0;
}
.terms-logo{
   text-align: center;
}
.terms-hero-bg{
 padding: 61px 0 130px;
}
.terms-title h2 {
   text-align: center;
   font-size: 48px;
   font-weight: 700;
   color: var(--background-color);
   padding-bottom: 54px;
}
.terms-heading h4 {
   color: var(--text-color);
   font-weight: 700;
   font-size: 24px;
   font-family: var(--text-font);
}
.terms-heading-one{
   padding: 30px 0 47px;
}
.terms-desc p {
   color: var(--text-color);
   font-family: var(--text-font);
   font-size: 20px;
}