body{
  font-size: 1.05rem;
  /*background-color: #ecf7df;*/
  background-image: rgb(255, 255, 255);
  font-family: 'Arial', sans-serif; 

 /* overflow: auto;*/


}

header {
  position: relative;
  background-color: black;
  height: 5%;
  min-height: 1.5rem;
  width: 100%;



}

.square-message {
  background-color: #ffffff;
  font-size: 20px;
  color: black;
  text-decoration: none;
  border: 1px solid black;
  padding: 10px 20px;
  border-radius: 0;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, box-shadow 0.3s;
   width: 100%;              /* Take full column width */

}


.square-button {
  background-color: #ffc000;
  font-size: 20px;
  font-weight: bold;
  color: black;
  text-decoration: none;
  border: 2px solid black;
  padding: 10px 5px;
  border-radius: 0;
  display: inline-block;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s, box-shadow 0.3s;
   width: 100%;              /* Take full column width */
  max-width: 200px;
}

.square-button:hover {
  background-color: #e6ac00;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.nav-link{
  color:#82539d;
  font-weight: 700;
}

.nav-link:hover{
  text-decoration: underline;
  color:rgb(200, 122, 174);
}

.support{
  color:#82539d;
  font-weight: 700;
}




.service_column_text {
  margin-top: 20px;
  text-align: justify;
  margin-left: 10px;
  margin-right: 10px;
  line-height: 1.6; /* Improves readability */
}

.resources_column_text{
  margin-top: 10px;
  text-align: justify;
  margin-left: 0px;
  margin-right: 10px;
  line-height: 1;
}

.main_foto{
  padding-top:6%;
  
}

.our_support{
  background-image: linear-gradient(rgb(230, 175, 255), rgb(240, 248, 221));
}

footer{
  background-color: #006341;
}


nav.navbar {
  position: relative; /* Not overlapping with video */
  z-index: 10;        /* Ensure it stays above the video */
  width: 100%;
  background-color: rgba(255, 255, 255, 0.8); /* Optional: Light transparent background for better visibility */
}

.overlay {
  display: none; /* Remove the overlay as it's no longer needed */
}

.donate_button{
  background-color:rgb(200, 122, 174);
  color: white;
}

.donate_button:hover{
  background-color:rgb(255, 255, 255);
  color:rgb(200, 122, 174);
}

.hero_button{
  background-color:rgb(255, 255, 255);
  color:rgb(200, 122, 174);
}
.hero_button:hover{
  background-color:rgb(200, 122, 174);
  color: white;
}

.lgbtq_background{
  background-color: linear-gradient(to right, 
  #E40303,  /* Red */
  #FF8C00 16.66%, /* Orange */
  #FFED00 33.33%,/* Yellow */
  #008026 50%, /* Green */
  #004DFF 66.66%, /* Blue */
  #750787 83.33% /* Purple */
) 2; /* Apply gradient and scale for border */
 /* Adjust as needed */
}
.footer_separator{
  border: 5px solid; /* Set the border width */
  border-image: linear-gradient(to right, 
    #E40303,  /* Red */
    #FF8C00 16.66%, /* Orange */
    #FFED00 33.33%,/* Yellow */
    #008026 50%, /* Green */
    #004DFF 66.66%, /* Blue */
    #750787 83.33% /* Purple */
  ) 2; /* Apply gradient and scale for border */
  border-radius: 10px; /* Adjust as needed */

  margin-top: -0.15rem !important;
  margin-bottom: -0.05rem !important;
  box-shadow: 4px 4px 10px rgba(219, 50, 115, 0.3);
  
}


.logo_image{
 
  padding-bottom: 0.1rem;
  padding-top: 0.1rem;
}
/* Media Query for devices withi coarse pointers and no hover functionality */

/* This will use a fallback image instead of a video for devices that commonly do not support the HTML5 video element */

@media (pointer: coarse) and (hover: none) {
  header {
    background: url('https://source.unsplash.com/XT5OInaElMw/1600x900') rgb(255, 255, 255) no-repeat center center scroll;
  }

  header video {
    display: none;
  }
}

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1050; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgba(0,0,0,0.4); /* Black background with opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 3px solid #db84f3;
  width: 60%;
   /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.video_link{
  background-color:rgb(255, 255, 255);
  color:rgb(200, 122, 174);
}

.video_link:hover{
  background-color:rgb(255, 255, 255);
  color:rgb(200, 122, 174);
}

.custom-toggler {
  border-color: rgb(200, 122, 174); /* Change the border color of the toggler */
}

.custom-toggler .navbar-toggler-icon {
  background-image: none; /* Remove the default icon */
  position: relative;
  width: 30px; /* Set width of the custom icon */
  height: 2px; /* Set height for the middle bar */
  background-color: rgb(200, 122, 174); /* Set background color for the middle bar */
}

.custom-toggler .navbar-toggler-icon::before,
.custom-toggler .navbar-toggler-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; /* Ensure the lines span the full width */
  height: 2px; /* Same height for the top and bottom bars */
  background-color: rgb(200, 122, 174); /* Set the color for the bars */
}

.custom-toggler .navbar-toggler-icon::before {
  top: -8px; /* Position for the top line */
}

.custom-toggler .navbar-toggler-icon::after {
  top: 7px; /* Position for the bottom line */
}


.video-container {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 aspect ratio */
  height: 0;
  overflow: hidden;
  max-width: 90%;
  background: #000;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
}

.hero_button, .donate_button {
  font-size: 15px;
  padding: 10px 20px; /* Custom padding for default size */
}

/* Smaller buttons for screens smaller than 768px (tablets and phones) */
@media (max-width: 768px) {
  .hero_button, .donate_button {
    font-size: 12px;  /* Reduce the font size */
    padding: 6px 12px; /* Reduce the padding */
  }
 
}



.offcanvas-end {
  width: 50vw; /* Make the off-canvas menu full width */
  max-width: 100%; /* Ensure it does not exceed the viewport width */
}

.responsive-iframe {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* Aspect ratio 16:9 (height/width) */
}

.responsive-iframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.float-end {
  float: right;
  margin-right: 15px; /* Adjust space between text and image */
}

.logo_color{
  color:rgb(200, 122, 174);
}



/* Even smaller buttons for screens smaller than 576px (small phones) */
@media (max-width: 576px) {

  .hero_button, .donate_button {
    font-size: 12px;  /* Further reduce the font size */
    padding: 5px 10px; /* Further reduce the padding */
  }
  .modal-content {
    width: 90%;
     /* Could be more or less, depending on screen size */
  }

  

  
}