/* Custom styles for the hero section */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;200;400;600&display=swap');

.hero-section {
    background-image: url('../images/hero.jpg'); /* Replace with the path to your image */
            background-size: cover;
            background-position: center;
            height: 100vh; /* Adjust the height as needed */
            display: flex;
            flex-direction: column;
            justify-content: flex-end; /* Align the content at the bottom of the flex container */
            text-align: center;padding: 0px;
    padding-bottom: 0px;
}

.hero-section .row.message{
    padding:0px;
    margin:0px;

}

.font-h1, .hero-section h1{
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size:3.2rem;
}
.font-h1{
    font-size: 4.5rem;
}
.hero-section h2{
    font-family: 'Kanit', sans-serif;
    font-weight: 600;
    font-size: 28px;
}

.bg-lime{
    background-color: #BBD531;
}
.bg-black{
    background-color: #000;
}

.fs-mono{
    font-family: 'Kanit', sans-serif;
    /**font-family: monospace !important;*/
    font-size: 20px;
    font-weight: 200;
}

span.splotch{
    background-image: url('../images/splotch.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: inline-block;
}

.bg-gray{
    background-color: #b5bbbf;
}

.font-size-20{
    font-size: 18px;
}

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

.w-45{
    width:45px;
}


.btn-green { 
  color: #ffffff; 
  background-color: #93FF2B; 
  border-color: #88F027; 
} 
 
.btn-green:hover, 
.btn-green:focus, 
.btn-green:active, 
.btn-green.active, 
.open .dropdown-toggle.btn-green { 
  color: #ffffff; 
  background-color: #84FA17; 
  border-color: #88F027; 
} 
 
.btn-green:active, 
.btn-green.active, 
.open .dropdown-toggle.btn-green { 
  background-image: none; 
} 
 
.btn-green.disabled, 
.btn-green[disabled], 
fieldset[disabled] .btn-green, 
.btn-green.disabled:hover, 
.btn-green[disabled]:hover, 
fieldset[disabled] .btn-green:hover, 
.btn-green.disabled:focus, 
.btn-green[disabled]:focus, 
fieldset[disabled] .btn-green:focus, 
.btn-green.disabled:active, 
.btn-green[disabled]:active, 
fieldset[disabled] .btn-green:active, 
.btn-green.disabled.active, 
.btn-green[disabled].active, 
fieldset[disabled] .btn-green.active { 
  background-color: #93FF2B; 
  border-color: #88F027; 
} 
 
.btn-green .badge { 
  color: #93FF2B; 
  background-color: #ffffff; 
}

.striped-bg{
    background-image: linear-gradient(135deg, #424242 16.67%, #040404 16.67%, #040404 50%, #424242 50%, #424242 66.67%, #040404 66.67%, #040404 100%);
    background-size: 63.64px 63.64px;
}
.navbar{
    background-color: transparent;
}

.navbar #lnk-open-coach-form{
    border-color: white !important;
    color: white !important;
}
.navbar.navbar-scrolled {
    background-color: #FFF; /* Change to your desired background color */
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a shadow effect */
}

.navbar.navbar-scrolled #lnk-open-coach-form{
    border-color: black !important;
    color: black !important;
}

@media (max-width: 575.98px) {
    .limebox-xs-class{
        margin-top:300px;
    }

    #lnk-open-resident-form{
        width:100%;
    }

    #lnk-open-coach-form.fs-mono{
        font-size: 14px;
        font-weight: 400;
    }

    #lnk-open-community-form{
        width:100%;
    }

    .font-h1{
        font-size:2.3rem;
    }

    .img-w-100{
        width:100%;
    }

    .py-5.py-xs-0{
        padding-top: 0px !important;
        padding-bottom: 0px !important;/***/
    }


    .hero-section {
      background-size: cover;
      background-position: inherit;
      height: 125vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      text-align: center;
      background-size: 220%;
    }

}