body {
  font-family: "Nunito Sans", sans-serif;
  font-size: 1.0rem;
}  

.img_corners{
  border-radius: 1.25rem;	
}
.navbar{
  --bs-navbar-color: #59A1A4;
  --bs-navbar-hover-color: #59A1A4;
  --bs-navbar-active-color: #DE6161;
}
.navbar-nav {
  padding-right: 10px;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-font-size: 1rem;
  gap: 10px;
}  

.dropdown-menu {
  --bs-dropdown-color: #fff;
  --bs-dropdown-bg: #DE6161;
  --bs-dropdown-border-color: var(--bs-border-color-translucent);
  --bs-dropdown-link-color: #fff;
  --bs-dropdown-link-hover-color: #fff;
  --bs-dropdown-link-hover-bg: #F17980;
  --bs-dropdown-link-active-color: #fff;
  --bs-dropdown-link-active-bg: #F17980; 
  --bs-dropdown-border-radius: 1.25rem;
}

.dropdown-item {
  border-radius: 1.25rem;
}

.dropdown-toggle::after {
	display: none;
}

.home-video-container {
  position: relative;
}
.home-overlay-text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 50%; /* Limit text area width to 50% */
  height: 100%; /* Keep the height full to ensure vertical centering */  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  padding: 20px;
  box-sizing: border-box;
}
.bioBorder{
	border-style:solid;
	border-width:0px 1px;
	border-color:#DE6161;
}

.bioBorder2{
	border-style:solid;
    border-width: 0px 1px 0px 0px;
	border-color:#DE6161;
}

  @media (max-width: 1250px){
    .noshowmed{
       display: none !important;
    }
  }  

  /* Adjust font size for mobile screens */
  @media (max-width: 999px) {
    .home-overlay-text{
      width:65%;	
    }   
    .small_single{
  	  width:100% !important;
  	  margin-left:0px !important;
    } 	
  }
  
  @media (max-width: 850px){
    .noshowsmall{
       display: none !important;
    }
  }  
   
  @media (max-width: 768px) {
    .home-overlay-text h3 {
      font-size: 1.5rem; /* Smaller font size for tablets and phones */
    }
    .home-overlay-text{
      width:75%;	
    } 
    .bioBorder{
	  border-width:0px 0px;
    }
    .bioBorder2{
      border-right:0px;	
    }   	
  }

  @media (max-width: 480px) {
    .home-overlay-text h3 {
      font-size: 1rem; /* Even smaller size for very small screens */
    }
    .home-overlay-text{
      width:90%;	
    }

  }

.icon-container {
  text-align: center;
}
.icon-container img {
  max-width: 201px;
  min-width: 201px;
  min-height: 201px;
  height: auto;
  margin-bottom: 10px; /* Space between image and text */
}
.home-button{
  max-width: 301px;
  min-width: 301px;
  min-height: 201px;
  height: auto;
  border-radius:1.25rem;
  background-color:#F1E8C6;	
  /* Add Flexbox to center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; /* Ensures multi-line text is centered */  
}

.donate-button{
  max-width: 90%;
  min-width: 90%;
  min-height: 450px;
  height: auto;
  border-radius:1.25rem;
  /* Add Flexbox to center content */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left; /* Ensures multi-line text is centered */  
}

h1{
  font-size:2.6rem;
  font-weight:600;
  color:#59A1A4;	
}
h2{
  font-size:2.1rem;
  font-weight:900;	
  color:#59A1A4;  	
}
h3{
  font-size:1.7rem;
  font-weight:700;
  color:#59A1A4;  		
}
h4{
  font-size:1.3rem;
  font-weight:600;
  color:#59A1A4;  		
}
h5{
  font-size:1rem;
  font-weight:700;
  text-transform: uppercase;		
}
h6{
  font-size:1rem;
  font-weight:700;
  line-height:1.5rem;		
}
.h7{
  font-size:0.9rem;
  font-weight:400;
}
.h7b{
  font-size:0.9rem;
  font-weight:700;
}
.mir_26pt_black{
  font-size:1.4rem;
  font-weight:900;		
}

.mir_26pt_regular{
  font-size:1.4rem;	
}

.mir_bg_lightblue{
	background-color:#e2f1f1
}
.mir_bg_darkblue{
	background-color:#5C6D92 !important;
}
.mir_bg_blue{
	background-color:#59A1A4 !important;
}
.mir_bg_tan{
	background-color:#F1E8C6;
}
.mir_bg_green{
	background-color:#ADC666;
}
.mir_bg_red{
	background-color:#DE6161;
}
.mir_bg_orange{
	background-color:#D67954 !important;
}
.mir_bg_steel{
	background-color:#486C70;
}
.mir_darkblue{
	color:#5C6D92;
}
.mir_blue{
	color:#59A1A4;
}
.mir_tan{
	color:#F1E8C6;
}
.mir_green{
	color:#ADC666;
}
.mir_red{
	color:#DE6161;
}
.mir_orange{
	color:#D67954;
}
.mir_steel{
	color:#486C70;
}
.mir_white{
	color:#fff;
}

  .no-color-change a {
    color: inherit;           /* Inherit color from parent element */
    text-decoration: underline;
  }
  
  .no-color-change a:hover,
  .no-color-change a:focus,
  .no-color-change a:active,
  .no-color-change a:visited {
    color: inherit;           /* Maintain the same color */
    text-decoration: underline; /* Keep the underline */
  }
  .no-color-change2 a,
  .no-color-change2 a:hover,
  .no-color-change2 a:focus,
  .no-color-change2 a:active,
  .no-color-change2 a:visited {
    color: inherit;      
    text-decoration: none; 
  }  
 
/* Container for the arrows */
.nav-arrows {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 120px; /* Adjust as needed */
  margin: 0 auto;
}


  
/* Blue circle container */
.circle {
  width: 50px;
  height: 50px;
  background-color: #59A1A4;
  border-radius: 50%;           /* Makes the container a circle */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

.left-square {
  width: 23px;                  /* Adjusted to fit within the circle */
  height: 23px;
  background-color: transparent;
  border-left: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);     /* Rotate to form the desired shape */
  position: absolute;
  left: 35%;                    /* Position the square’s tip at the center */
}

.right-square {
  width: 23px;                  /* Adjusted to fit within the circle */
  height: 23px;
  background-color: transparent;
  border-top: 3px solid white;
  border-right: 3px solid white;
  transform: rotate(45deg);     /* Rotate to form the desired shape */
  position: absolute;
  right: 35%;                    /* Position the square’s tip at the center */
}
.top-square {
  width: 23px;                  /* Adjusted to fit within the circle */
  height: 23px;
  background-color: transparent;
  border-left: 3px solid white;
  border-top: 3px solid white;
  transform: rotate(45deg);     /* Rotate to form the desired shape */
  position: absolute;
  top: 35%;                    /* Position the square’s tip at the center */
}
.bottom-square {
  width: 23px;                  /* Adjusted to fit within the circle */
  height: 23px;
  background-color: transparent;
  border-right: 3px solid white;
  border-bottom: 3px solid white;
  transform: rotate(45deg);     /* Rotate to form the desired shape */
  position: absolute;
  bottom: 35%;                    /* Position the square’s tip at the center */
}
.figcaption{
	font-size: 1.3rem;
	font-weight:600;
	color: #59A1A4;
	display: table-caption;
	caption-side: bottom ;
	text-align: left;
	padding: 3%;
	max-width:360px;
}

.btn-filter {
  --bs-btn-bg: #59A1A4;            /* Background color */
  --bs-btn-color: #F1E8C6;         /* Text color */
  --bs-btn-border-color: #59A1A4;   /* Border color */
  --bs-btn-hover-bg: #5C6D92;      /* Hover background */
  --bs-btn-hover-border-color: #5C6D92; /* Hover border color */
  --bs-btn-hover-color: #fff;
  margin: 5px; 
}

    	.web_box{
    		background-color:#F7F1E4;
    		border-radius:1.25rem;
    	}

.popup-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1050; 
    background: #F1E8C6;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    max-width: 800px;
    width: 100%;
    max-height:90%;
    min-height: 400px;
    overflow-y:auto; 
    
}

.popup-content {
    text-align: center;
}

.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: transparent;
    border: none;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    color: #000;
}

.btn-black {
    background-color: black;
    color: white;
    border: none;
    width:100%;
    margin-top:5px;
    margin-bottom:10px;
}

.btn-black:hover {
    background-color: #333; /* Darker shade for hover effect */
    color: white;
}