/* Reset default margin and padding */
body, html {
    margin: 0 auto 0 auto;
    padding: 0;
    background-color: #fff;
    box-shadow: 0 8px 8px rgba(0, 0, 0, 0.1); /* Horizontal, Vertical, Blur, Spread, Color */
    font-size: 16px;
    min-width: 1050px;
    max-width: 1440px;
    font-family: 'Lato Regular', sans-serif;
    line-height: 1.4;
    color: #555;
}

@media screen and (max-width: 767px) {
body, html {
    min-width: 50px;
    max-width: 767px;
	}
}

@media screen and (max-width: 479px) {
body, html {
    min-width: 50px;
    max-width: 479px;
    font-size: 10px;

	}
}
	
html {
    scroll-behavior: smooth;
}

.image-container {
    position: relative; /* Ensures the logo is positioned relative to this container */
}
.img-responsive {
    width: 100%; /* Makes sure the background images are responsive */
    height: auto;
}

.logo {
    position: absolute; /* Position the logo absolutely within the container */
    top: 70px; /* 50px from the top */
    left: 0; /* Align to the left */
    margin-left: 0; /* Optional: if you want some space from the left edge */
    z-index: 10; /* Make sure the logo appears above other images */
    width: 250px; /* Set the logo size (adjust as necessary) */
    height: auto; /* Maintain the aspect ratio of the logo */
}

@media screen and (max-width: 767px) {
	.logo {
    top: 40px; /* 50px from the top */
    width: 150px; /* Set the logo size (adjust as necessary) */
    }
}
@media screen and (max-width: 479px) {
	.logo {
    top: 20px; /* 50px from the top */
    width: 100px; /* Set the logo size (adjust as necessary) */
    }
}

/* Floating Image Style */

    .floating-image {
        width: 160px;
        position: fixed;
        bottom: 50px;
        right: calc(max((100% - 1440px) / 2 + 50px, 50px));
        z-index: 100;
    }
@media screen and (max-width: 767px) {
    .floating-image {
        width: 100px;
        right: calc(max((100% - 767px) / 2 + 30px, 30px));
    }
}
@media screen and (max-width: 479px) {
    .floating-image {
        width: 60px;
        right: calc(max((100% - 767px) / 2 + 10px, 10px));
    }
}


/* Standard Container Style */

    .container, endfooter {
        box-sizing: border-box;
        position: relative; /* Add position relative to the container */
        margin: 50px auto 50px auto;

    }

    /* Center-align text */
    .justify-center-text {
        text-align: center;
        margin: 0 auto; /* Ensures the element is centered horizontally */
    }

    /* Left-align text */
    .justify-left-text, endfooter {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
    }

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

    .fixed-size-image {
      width: 160px; /* Fixed width */
      height: auto; /* Fixed height */
      object-fit: cover; /* Ensures the image covers the area without stretching */
      margin: 10px auto;
    }

    h1 {
        font-size: 2.6em;
        color: #0067B1;
    }
    
    h2 {
        font-family: 'Lato Bold', sans-serif;
        font-size: 1.4em;
        color: #0067B1;
    }

    p {
        font-size: 1.2em;
    }
    
    @media screen and (max-width: 767px) {
        .fixed-size-image {
          width: 100px;
        }
        h1 {
            font-size: 1.6em;
        }
        
        h2 {
            font-size: 1.2em;
        }
    
        p {
            font-size: 1em;
        }
    }
    
    @media screen and (max-width: 479px) {
        .fixed-size-image {
          width: 60px;
        }
    }
/* ---- eligibility Container ----- */

    .eligibility-container {
      display: flex;
      padding: 60px 0 60px 0;
      justify-content: center; /* Centers horizontally */
      align-items: center; /* Centers vertically */
        background: #EBF6FC; /* Half white, half gray */
      /* height: 100vh; /* Full viewport height */
    }
    
    .eligibility-header-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
        font-size: 2.4em;
        color: #0067B1;
        padding: 0 0 10px 0;
    }
    
    .eligibility-img-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
    }
    
    .eligibility-txt-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
        vertical-align: top;  
        font-size: 1.2em;
    }
    
    @media screen and (max-width: 767px) {
        .eligibility-container {
          padding: 40px 0 40px 0;
        }
        
        .eligibility-header-cell {
            font-size: 1.8em;
        }

        .eligibility-txt-cell {
            font-size: 1em;
        }
    }

/* ---- coverage Container ----- */

    .coverage-container {
        display: flex;
        width: 100%;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        background: #fff; /* Half white, half gray */
        padding: 60px 0 60px 0;
    }
    
    .coverage-header-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
        font-size: 2em;
        color: #0067B1;
        padding: 0 0 10px 0;
        vertical-align: top;  
    }
    
    .coverage-img-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
        width:50px;
    }
    
    .coverage-txt-cell {
        text-align: left;
        margin: 0; /* Ensures no extra margins are added */
        vertical-align: top;  
        font-size: 1.2em;
    }
    
    .image-cell {
    background-image: url('../img/line.png'); /* Replace with your image URL */
    background-repeat: repeat-y; /* Image will repeat both horizontally and vertically */
    background-size: auto; /* Keeps the original size of the image when repeating */
    background-position: center; /* Optional: centers the background image in the cell */
    }   
    
    @media screen and (max-width: 767px) {
        .coverage-container {
            padding: 40px 0 40px 0;
        }
        
        .coverage-header-cell {
            font-size: 1.6em;
        }
        
        .coverage-img-cell {
            width:30px;
        }
        
        .coverage-txt-cell {
            font-size: 1em;
        }
    }
    

    
/* ---- Benefits Container ----- */


    .benefits-title-container {
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        background: linear-gradient(to bottom,  #fff 50%, #F5F5F5 50%); /* Half white, half gray */
    }

    .stadium {
    font-size: 2.2em;
      display: inline-block;
      padding: 20px 60px; /* Adjust padding for height and width */
      background-color: #0067B1; /* Background color of the stadium */
      color: white; /* Text color */
      text-align: center;
      border-radius: 50px; /* Makes the shape round at the edges */
      font-family: Arial, sans-serif;
    }

    .benefits-body-container {
        margin: 0 auto;
        background: linear-gradient(to bottom, #F5F5F5 10%, rgba(255, 255, 255, 0) 50%),url('../img/Cover2-1.png'); /* Gradient from white to transparent */
        background-size: contain; /* Ensures the image covers the entire container */
        background-position: center bottom; /* Centers the background image */
        background-repeat: no-repeat; /* Prevents the image from repeating */
        padding: 20px 0 300px 0; /* Adds padding around the table */
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        min-height: 600px; /* Set a minimum height to allow the background to show */
        width: 100%;
    }
    
    @media screen and (max-width: 767px) {
        .stadium {
            font-size: 1.4em;
            padding: 10px 50px; /* Adjust padding for height and width */
        }
        .benefits-body-container {

            padding: 20px 0 350px 0; /* Adds padding around the table */
        }
    }

    @media screen and (max-width: 479px) {
        .benefits-body-container {

            padding: 20px 0 180px 0; /* Adds padding around the table */
        }
        
    }

    ul {
      list-style-type: disc; /* Bullets for list items */
      padding-left: 20px; /* Space from the left edge */

    }
    ol {
      list-style: decimal; /* Numbered list style for level 1 */
      padding-left: 20px; /* Space from the left edge */
    }
    
    li .li {
        font-size: 1.2em;
    }

    
/* Table Container Style */

        .table-container {
            display: flex;
            justify-content: center;
        }

        table {
            border-collapse: collapse;
            width: 90%;  
            text-align: center;
            justify-content: center;
            font-family: 'Lato Regular', sans-serif;
        }

        th, td {
            border: 0 solid black;
         /*   text-align: left;
            vertical-align: text-top; */
            padding: 0 10px 0 10px;

        }

        .benefits-table-image-column1 {
            width:200px;
            vertical-align: top; /* Aligns text to the top of the cell */

        }
        .benefits-table-image-column2 {
            width:600px;
            font-size: 1em;
            vertical-align: top; /* Aligns text to the top of the cell */
            text-align: left;
        }
        
    @media screen and (max-width: 767px) {
        .benefits-table-image-column1 {
            width:50px;
        }
        .benefits-table-image-column2 {
            width:95%;
            font-size: 1em;
        }
    }

        .footer {
            background-color: #5BC2E7;
            color: #ffffff;
            margin: 0 30px 0 30px;
            padding: 40px;
            text-align: left;   
            font-size: 1.2em;
        }

    .footerlinks {
        margin: 30px;	
        color: #0667b0;
        font-size: 0.8em;
    }
    
    .footerlinks2 {
        color: #0067B1; 
        font-size: 1em;
    }
    
    .endfooter {
        font-size:1em;
        margin: 0 30px 0 60px;
        padding: 0 0 0 0;
    }
    
    @media screen and (max-width: 767px) {
        .footer {
            margin: 0 20px 0 20px;
            padding: 25px;
            font-size: 1em;
        }
        .endfooter {
            font-size:0.8em;
            margin: 0 20px 0 45px;
            padding: 0 0 0 0;
        }
    }

.mobile-show {
    display:none ;
}
.mobile-hide {
    display:block ;
}
    @media screen and (max-width: 767px) {
        .mobile-show {
            display:block ;
        }
        .mobile-hide {

            display:none ;
        }
    }

    .interested-container   {
        margin: 0 auto;
        display: flex;
        justify-content: center; /* Centers horizontally */
        align-items: center; /* Centers vertically */
        background: #EBF6FC; /* Half white, half gray */
    }

    .interested-header {
        font-size: 1.8em;
        padding:  30px 0 10px 0;
    }
    .interested-body {
        font-size: 1.4em;
        padding:  0 0 20px 0;
    }

    @media screen and (max-width: 767px) {
        .interested-header {
            font-size: 1.4em;
        }
        .interested-body {
            font-size: 1em;
        }
    }


/* ---- FORM Style------ */
    .form-container {
        max-width: 1200px;
        margin:  0 auto;
        padding: 20px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }
    @media screen and (max-width: 767px) {
        .form-container {
            max-width: 767px;
        }
    }
    
    .form-group {
      margin-bottom: 15px;
    }

    .form-group label {
      display: block;
      margin-bottom: 5px;
      font-weight: bold;
      color: #333;
    }
    @media screen and (max-width: 767px) {
        .form-group label {
            font-size:0.8em;
        }
    }
    

    .form-group input[type="text"],
    .form-group input[type="tel"],
    .form-group input[type="email"] {

      width: 800px;
      padding: 10px;
      border: 0px solid #ddd;
      border-radius: 4px;
      box-sizing: border-box;
    }


    .form-group input[type="text"]::placeholder,
    .form-group input[type="tel"]::placeholder,
    .form-group input[type="email"]::placeholder {
      color: #aaa;
    }

    .form-group input[type="checkbox"] {
      margin-right: 10px;
      width: 20px;
    }

    .form-group .checkbox{
      display: flex;
      align-items: center;
      width: 800px;
    }
    
    @media screen and (max-width: 767px) {
        .form-group input[type="text"],
        .form-group input[type="tel"],
        .form-group input[type="email"],
        .form-group .checkbox {
            width: 500px;
            font-size: 0.8em;
        }
    }
    @media screen and (max-width: 479px) {
        .form-group input[type="text"],
        .form-group input[type="tel"],
        .form-group input[type="email"],
        .form-group .checkbox {
            width: 300px;
            font-size: 0.8em;

        }
    }
    
    
    .checkbox {
        font-size: 0.6em;
    }
    
    @media screen and (max-width: 767px) {
        .checkbox {
            font-size: 0.4em;
        }
    }
    @media screen and (max-width: 479px) {
        .checkbox {
            font-size: 0.2em;
        }
    }
    .submit-button {
        display: block;
        padding: 10px 30px 10px 30px;
        color: #666;
        border: none;
        border-radius: 4px;
        font-size: 16px;
        text-align: center;
        cursor: not-allowed; /* For disabled state */
        transition: background-color 0.3s ease;
        background-color: #ccc;
    }


    /* Disabled button style */
    .submit-button.disabled-btn {
        background-color: #ccc; /* Grey for disabled state */
        color: #666;
    }

    /* Enabled button style */
    .submit-button.enabled-btn {
        background-color: #28a745; /* Green for enabled state */
        color: #fff;
        cursor: pointer; /* Change the cursor to pointer */
    }

    /* Optionally, add hover effect for enabled button */
    .submit-button.enabled-btn:hover {
        background-color: #218838;
    }


    /* RHB Logo at Footer Style */

    .RHBlogo img {

        width: 200px; /* Adjust the size as needed */
        height: auto;
        position: absolute; /* Position the logo absolutely */
        top: 20px; /* Adjust the top position */
        left: 0; /* Adjust the left position */
        z-index: 1; /* Ensure the logo stays on top */
    }

    .RHBlogo_img {

        width: 200px; /* Adjust the size as needed */

    }
    
    @media screen and (max-width: 767px) {
        .RHBlogo img {
            width: 160px; /* Adjust the size as needed */
        }
        .RHBlogo_img {
            width: 160px; /* Adjust the size as needed */
        }
    }
        @media screen and (max-width: 479px) {
        .RHBlogo img {
            width: 100px; /* Adjust the size as needed */
        }
        .RHBlogo_img {
            width: 100px; /* Adjust the size as needed */
        }
    }
    
/* font styles */

.bold {
font-family: 'Lato Bold', sans-serif;
}
.heavy {
font-family: 'Lato Heavy', sans-serif;
}
.regular {
font-family: 'Lato Regular', sans-serif;
}
.italic {
font-family: 'Lato Italic', sans-serif;
}
.light {
font-family: 'Lato Light', sans-serif;
}
.black, interested-header {
font-family: 'Lato Black', sans-serif;
}