/* --- layout base (replaces Bootstrap grid/buttons; site is plain HTML) --- */
*{box-sizing:border-box}
.container,.container-lg,.container-xl{width:100%;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px}
@media(min-width:576px){.container{max-width:540px}}
@media(min-width:768px){.container{max-width:720px}}
@media(min-width:992px){.container,.container-lg{max-width:960px}}
@media(min-width:1200px){.container,.container-lg,.container-xl{max-width:1140px}}
.btn{display:inline-block;padding:6px 12px;border-radius:4px;text-decoration:none;cursor:pointer}
.btn-sm{padding:2px 8px;font-size:.875rem}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* --- end layout base --- */

/*
Theme Name: Maasai Elders Theme
Theme URI: https://yourwebsite.com/maasai-elders-theme/ (Optional, but good practice)
Author: Your Name or Company Name
Author URI: https://yourwebsite.com/ (Optional)
Description: A custom theme for the Maa Council of Elders.
Version: 1.0
License: GNU General Public License v2 or later (Optional, but good practice)
License URI: http://www.gnu.org/licenses/gpl-2.0.html (Optional, but good practice)
Text Domain: maasai-elders-theme (Important for translation)
Tags: custom, maasai, elders, community, responsive (Optional, for theme directory search)
*/


   .navbar {
            background-color: rgb(255, 35, 56);
            white-space: nowrap;
        }
        .navbar b {
            justify-content: center !important;
            text-decoration: none;
            color: white;
            font-size: 2rem;
        }

        @media (max-width: 480px) {
            .navbar b {
                font-size: 4.2vw;
            }
        }

        @media (min-width: 481px) and (max-width: 767px) {
            .navbar b {
                font-size: 4.2vw;
            }
        }

        @media (min-width: 768px) and (max-width: 979px) {
            .navbar b {
                font-size: 4.2vw;
            }
        }

        @media (min-width: 980px) {
            .navbar b {
                font-size: 1.7vw;
            }
        }

        .navbar a {
            justify-content: flex-end;
            text-decoration: none;
            color: white;
            font-size: 1rem;
            display: inline-block;
        }

        @media (max-width: 480px) {
            .navbar a {
                font-size: 2.5vw;
            }
        }

        @media (min-width: 481px) and (max-width: 767px) {
            .navbar a {
                font-size: 2.5vw;
            }
        }

        @media (min-width: 768px) and (max-width: 979px) {
            .navbar a {
                font-size: 2.5vw;
            }
        }

        @media (min-width: 980px) {
            .navbar a {
                font-size: 16px;
            }
        }

        .btn:hover {
            background-color: rgb(253, 215, 215);
        }

        .navbar button {
            justify-content: right;
        }

        /* Add this new CSS */
        .navbar-brand-wrapper {
            display: flex;
            align-items: center;
            height: 100%;
        }

        .navbar-header {
            display: flex;
            align-items: center;
            height: 100%;
        }

        @media(max-width:980px){
            .navbar-header{
                display: flex;
                text-align: center;
                float:none;
                margin:0 auto;
            }
        }
        .logo-container {
            display: flex;
            align-items: center;
            margin-right: 10px;
        }
        .logo {
            width: 2vw;
            cursor: pointer;
            float: left;
            justify-content: center;
        }
        @media (max-width: 480px) {
            .logo {
                width:4vw;margin:0 auto;
            }
        }

        @media (min-width: 481px) and (max-width: 767px) {
            .logo{
                width:5vw;margin:0 auto;
            }
        }

        @media (min-width: 768px) and (max-width: 979px) {
            .logo {
                width:5vw;margin:0 auto;

            }
        }
        .navbar-container {
            display: flex;
            align-items: center;
        }

        .flex-grow {
            flex-grow: 1;
        }
        .btn-margin-right {
            margin-right: 20px; /* Adjust this value as needed */
        }
        .vertical-center {
            display: flex;
            align-items: center;
            height: 100%;
            color: white;
            font-size: 2rem;
        }

        footer .email-link {
            color: white;
            text-decoration: none;
            font-size:16px!important;
        }
        @media (max-width: 980px) {
            footer .email-link-div {
                display: flex;
                justify-content: center;
                text-align:center;
                margin:auto;
                font-size:12px!important;
            }
        }
        .image-container{
            position:relative;
            color:white;
        }
        .tagline{
            width:30%;
            position:absolute;
        }
        body{
            background-color:rgba(255, 255, 255, 0.321);
        }
        p{
            display:block;
            text-align:left;
            font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: #333131;
        }

        @media (max-width: 480px){
            p
            {
                font-size:16px;
            }
        }
        @media (min-width:481px) and (max-width:767px){
            p{
                font-size: 16px;
            }
        }
        @media (min-width:768px) and (max-width:979px){
            p{
                font-size: 16px;
            }
        }
        @media (min-width:980px){
            p{
                font-size: 16px;
            }
        }
        .intro p{
            font-family:'Times New Roman', Times, serif;
            text-align:center;
            color:#333131;
        }
        h1{
            color:#333131;
            text-align:center;
            font-family:'Times New Roman', Times, serif;
        }
        @media (max-width: 480px){
            h1
            {
                font-size:28px;
            }
        }
        @media (min-width:481px) and (max-width:767px){
            h1{
                font-size: 28px;
            }
        }
        @media (min-width:768px) and (max-width:979px){
            h1{
                font-size: 28px;
            }
        }
        @media (min-width:980px){
            h1{
                font-size: 28px;
            }
        }
        h2{
            color:#333131;
            font-family: Georgia, 'Times New Roman', Times, serif, ;
        }
        @media (max-width: 480px){
            h2
            {
                font-size:28px;
            }
        }
        @media (min-width:481px) and (max-width:767px){
            h2{
                font-size: 28px;
            }
        }
        @media (min-width:768px) and (max-width:979px){
            h2{
                font-size: 28px;
            }
        }
        @media (min-width:980px){
            h2{
                font-size: 28px;
            }
        }
        .tagline-container b{
            color: rgb(255, 255, 255);
            right: 17%;
            position:absolute;
            text-align:center;
            top: 15%;
            width: 100%
        }
        @media (max-width: 480px){
            .tagline-container b
            {
                font-size:12px;
            }
        }
        @media (min-width:481px) and (max-width:767px){
            .tagline-container b{
                font-size: 18px;
            }
        }
        @media (min-width:768px) and (max-width:979px){
            .tagline-container b{
                font-size: 26px;
            }
        }
        @media (min-width:980px){
            .tagline-container b{
                font-size: 40px;
            }
        }
        hr.solid{
            border-top:3px solid #bbb;
        }
        .tagline{
            font-size:1.4vw;
        }
        .wrap{
            float:left;
            padding-right:30px;
            width:33vw;
        }
        @media(max-width:768px){
            .wrap{
                float:none;
                padding-right:0;
                width:100%;
            }
        }
        .floater{
            display:flex;
            align-items: center;
            justify-content: center;
        }

/* --- contact section --- */
#contact{max-width:640px;margin:40px auto 0;padding:0 20px}
#contact h2{text-align:center}
#contact .intro{text-align:center;color:#333131;margin-bottom:22px}
.contact-form{display:flex;flex-direction:column;gap:14px}
.contact-form label{font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;font-size:14px;color:#333131;font-weight:600}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:10px 12px;border:1px solid #cfcfcf;border-radius:4px;font-family:inherit;font-size:15px}
.contact-form textarea{min-height:130px;resize:vertical}
.contact-form .hp{position:absolute;left:-9999px;top:-9999px;height:0;width:0;overflow:hidden}
.contact-form button{background:rgb(255,35,56);color:#fff;border:none;padding:12px 18px;border-radius:4px;font-size:16px;cursor:pointer}
.contact-form button:hover{background:rgb(210,25,44)}
.contact-note{font-size:13px;color:#666;text-align:center;margin-top:8px}


/* --- logo badge (full-colour emblem on the red bars) --- */
.logo-container a{display:inline-flex;align-items:center;justify-content:center;background:transparent;padding:0;line-height:0}
.logo{width:44px;height:auto;max-width:none;float:none}
@media(max-width:980px){.logo{width:38px;margin:0}}
@media(max-width:480px){.logo{width:32px}}
/* --- end logo badge --- */


/* --- header nav cluster + language switch --- */
.navbar-container{flex-wrap:wrap;row-gap:10px}
.navbar .nav-cluster{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-left:auto}
.navbar .nav-link{color:#fff;text-decoration:none;font-size:16px;line-height:1.25;white-space:normal;max-width:270px;display:inline-block}
.navbar .nav-link.next::after{content:" \2192"}
.navbar .nav-link.active{font-weight:700;text-decoration:underline;cursor:default}
.navbar .nav-divider{width:1px;align-self:center;height:26px;background:rgba(255,255,255,.45)}
.navbar .lang-switch{display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:15px}
.navbar .lang-switch .globe{width:18px;height:18px;flex:none}
.navbar .lang-btn{color:#fff;text-decoration:none;font-size:15px}
.navbar .lang-btn.active{font-weight:700;text-decoration:underline}
.navbar .lang-sep{opacity:.55}
@media(max-width:980px){.navbar .nav-link{font-size:14px;max-width:220px}.navbar .lang-switch{font-size:13px}.navbar .nav-cluster{gap:12px}}
/* --- end header nav cluster --- */


/* --- nav cluster overlap fix + mobile-first header --- */
.navbar .nav-cluster{min-width:0}
.navbar .nav-link{margin-right:4px}
.navbar .lang-switch{white-space:nowrap;flex:none}
@media(max-width:768px){
  .navbar-container{flex-direction:column;align-items:center;text-align:center;row-gap:10px}
  .navbar-header{float:none;margin:0 auto}
  .navbar .nav-cluster{margin:0 auto;justify-content:center;gap:10px}
  .navbar .nav-link{max-width:90vw;text-align:center;margin-right:0}
  .navbar .nav-divider{display:none}
}
/* --- end nav cluster mobile fix --- */

/* breathing room around logo/content inside the red bars */
.navbar{padding:12px 0}


/* --- contact popup (modal) --- */
.contact-modal[hidden]{display:none}
.contact-modal{position:fixed;inset:0;z-index:1000;overflow:auto}
.contact-modal__backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55)}
.contact-modal__dialog{position:relative;background:#fff;max-width:560px;width:calc(100% - 32px);margin:48px auto;border-radius:10px;padding:26px 24px 30px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.contact-modal__close{position:absolute;top:6px;right:14px;background:none;border:none;font-size:30px;line-height:1;color:#777;cursor:pointer}
.contact-modal__dialog h2{text-align:center;font-family:Georgia,'Times New Roman',serif;color:#333131;font-weight:400;margin:0 0 10px}
.contact-modal__dialog .intro{text-align:center;color:#333131;margin:0 0 20px;font-size:15px;line-height:1.5}
.contact-status .ok{color:#1d7a3a;text-align:center;font-size:16px;line-height:1.6;padding:24px 6px}
.contact-status .err{color:#a32d2d;text-align:center;padding:10px 0}
.email-link.contact-open{cursor:pointer}
/* --- end contact popup --- */


/* --- contact sign-off emblem --- */
.contact-signoff{display:flex;align-items:center;gap:12px;margin-top:10px}
.contact-emblem{width:46px;height:auto;flex:none}
.contact-signoff .contact-note{margin:0;text-align:left}
/* --- end contact sign-off emblem --- */