.lead.mb-4 {
    text-align: justify !important;
    hyphens: auto !important;
    word-wrap: break-word !important;
}

#page-header {
    position: -webkit-sticky;
    /* Safari */
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #fff;
    /* or any color that fits your design */
    height: 70px;
}



.ailu-button-link {
  display: inline-block;
  margin: 8px 0;
  padding: 8px 16px;
  background-color: #404B47 !important;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.ailu-button-link:hover {
  background-color: #686868; /* Lighter green on hover */
}


.ailu-text-link {
  color: #404B47 !important;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease-in-out;
}

.ailu-text-link:hover {
  color: #6C6C6C !important;
  text-decoration: underline;
}




.bg-primary {
	background-color: #404B47 !important;
}

.btn-primary {
	background-color: #404B47 !important;
}


#banner_ailu {
  position: relative;
  width: 100%;
  max-width: 1600px; /* Optional: constrain ultra-wide displays */
  height: 400px; /* fixed height */
  margin: 0 auto;
  overflow: hidden;
  background-color: #000;
}


#banner_ailu img {
    position: relative;
    width: 100%;
    height: 400px;
    object-fit: cover;
}


.banner-img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center top; /* Adjust to "top" so heads aren’t cropped */
  display: block;

}









#banner_container {
    position: relative;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
}

#logo_overlay {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 400px;
    z-index: 10;
    padding-bottom: 40px;
    opacity: 0.9;
}


#logo_tint_wrapper {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;
    max-width: 400px;
    z-index: 10;
}

#logo_tint_wrapper::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 180, 170, 0.5); /* green-blue hue */
    mix-blend-mode: multiply;
    pointer-events: none;
}















#banner_slides {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto; /* ← This centers it horizontally */
    height: 560px;
}

#banner_slides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: none;
}

#banner_slides2 {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1600px;
  margin: 0 auto; /* ← This centers it horizontally */
  height: 560px;
}


#banner_slides2 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: none;
}


@keyframes pan {
    0% {
        left: 0;
    }

    100% {
        left: -5700px;
    }
}


#mapid {
  width: 100%;
  height: 500px;
  max-width: 100%;
  border-radius: 8px; /* optional for nicer visual integration */
}


.pricing-card {
    max-width: 700px;
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 20px;
    background-color: #f0f0f0;
}


.pricing-card .card-header {
  color: white;
}


#pricing {
    max-width: 1400px;
    margin: 0 auto;
}


#pricing .container {
    padding-left: 260px;
    padding-right: 260px;
}

.pricing-column {
  margin-bottom: 2rem; /* or 20px */
}


.center-column {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.card-image_ailu {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;

}



.text-block {
  max-width: 1200px !important;
  margin-left: auto;
  margin-right: auto;
  text-align: start;
}



/*CONTACT FORM ##########################################*/

.subject-input {
  display: block;       /* allow height to apply */
  min-height: 200px;    /* or adjust to whatever height you need */
}







/*##  BREAKPOINTS  #########################################################################################*/

/*Common breakpoint tiers (2025 best practice):
Breakpoint	Devices
max-width: 480px	Small phones (older or compact)
max-width: 576px	Modern smartphones (tight layouts)
max-width: 768px	Mobile + small tablets (standard)
max-width: 992px	Tablets and smaller laptops
max-width: 1200px	Standard desktops and up
*/



@media (min-width: 1201px) {
    #banner_ailu {
        height: 800px;
    }

    #banner_ailu img {
        height: 800px;
    }
}




@media (min-width: 993px) and (max-width: 1200px) {
    #banner_ailu {
        height: 700px;
    }

    #banner_ailu img {
        height: 700px;
    }
}



@media (min-width: 769px) and (max-width: 992px) {
    #banner_ailu {
        height: 440px;
    }

    #banner_ailu img {
        height: 440px;
    }
}



@media (max-width: 768px) {

    #banner_ailu {
        height: 340px;
    }

    #banner_ailu img {
        height: 340px;
    }

    .hamburger-menu {
        display: block;
        cursor: pointer;
        padding: 0.2rem 0.5rem;
        position: absolute;
        top: 10px;             /* tweak as needed */
        right: 20px;           /* match icon & menu */
        z-index: 1001;         /* above everything */
    }

    .hamburger-menu .bar {
        display: block;
        width: 30px;
        height: 3px;
        background-color: #333;
        margin: 6px 0;
        transition: 0.4s;
    }

		/* Hamburger Icon Animation  ------------------*/
    .hamburger-menu.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .hamburger-menu.active .bar:nth-child(2) {
        opacity: 0;
    }

    .hamburger-menu.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
		/* ---------------------------------------------------*/


		/* NAVIGATION DROP DOWN MENU -------------------------------*/

    #main-navigation {
        display: none;
        position: absolute; 
        top: 60px;
        right: 20px;           /* align with icon */
        background-color: white;
        width: 220px;
        border: 1px solid #ccc;
        z-index: 1000;         /* just beneath the icon */
    }

    #main-navigation.show {
        display: block;
    }




  /* Force vertical column menu */
    #main-navigation .navbar-nav {
        flex-direction: column !important;
        gap: 0 !important;
        padding: 0;
        margin: 0;
    }

    /* List items full width */
    #main-navigation .navbar-nav li {
        width: 100%;
    }

    /* Nav links styled as dropdown buttons */
    #main-navigation .nav-link {
        display: block;
        width: 100%;
        padding: 12px 0;
        text-align: center;
        background-color: white;
        border-bottom: 1px solid #eee;
    }



    /* Optional hover effect */
    #main-navigation .nav-link:hover {
        background-color: #f0f0f0;
    }


  }








@media (max-width: 576px) {

    #banner_ailu {
        height: 300px;
    }

    #banner_ailu img {
        height: 300px;
    }
}