* { box-sizing: border-box;
  margin: 0;
  padding: 0;}

body

 {
min-height: 100vh;
background-color: #2b2a2a;
  
font-family: Arial, sans-serif;


}



/* line-height: 1.6;
color: #fff;
background-color: #000;
}*/

a {
text-decoration: none;
color: #fff;
}

header {
background: #2b2a2a;;
}

.top-bar {
display: flex;
justify-content: space-between;
padding: 10px 20px;
font-size: 14px;
}

.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 0;
background: #2b2a2a;
border-bottom: 5px solid; /* Border width */
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;

}

.thumbnail{
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20%;

padding: 0;
}



.nav-links {
list-style: none;
display: flex;
gap: 20px;
pad: 20px;
}


.nav-links li a {
font-weight: 600;
}
.nav-links li a:hover {
background-color: #f0f0f0;
}

.sidebar {
position: fixed;
top: 0;
right: 0;
height: 100vh;
width: 250px;
z-index: 999;
background-color: #2b2a2a;

box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1);
display: none;
flex-direction: column;
align-items: flex-start;
justify-content: flext-start;
list-style: none;
gap: 20px;
}
.sidebar li a {
  width: 100%;
  font-weight: 600;
}

.cta-buttons {
 
  gap: 10px;
  height: fit-content;
  }

.btn {
padding: 8px 15px;
color: #fff;
font-weight: 600;
border-radius: 5px;
text-align: center;
height: fit-content;
}

.donate-button {
background: red;
font-size: 1.2rem;
font-weight: bold;
text-align: center;
padding: 20px 10px;
height: fit-content;      
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s, transform 0.2s;
text-decoration: none;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.volunteer {
background: orange;
}
.instagram-button {
display: inline-block;
padding: 10px 20px;
background-color: #E4405F; /* Instagram brand color */
color: white;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
text-align: center;
text-decoration: none; /* Remove underline */
font-family: 'Times New Roman', Times, serif;
}

.instagram-button:hover {
background-color: #D63656; /* Slightly darker on hover */
}




.hero {
  display: flex; /* Enables Flexbox */
  flex-direction: column; /* Stack children (h1, h2) vertically */
  align-items: center; /* Center horizontally */
  justify-content: center; /* Center vertically */
  text-align: center; /* Ensures inline text is centered */

  background: url(queerjoy.webp) no-repeat center center/cover; /* Background image */
  margin: 0;
  border-bottom: 5px solid; /* Border width */
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  transition: background-image 1s ease-in-out;
}


.hero h1 {
  font-size: 2rem;
 font-family: Verdana, Geneva, Tahoma, sans-serif;
  color:rgb(59, 59, 59);
  font-weight: bold;
  font-style: italic;
  background-color: #ccc;
}


/*.hero h1 {
  font-size: 2.4rem;
  font-family: Tahoma, sans-serif;
  background: linear-gradient(to right, 
    red, orange, yellow, green, blue, indigo, violet, red);
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
  text-align: center;
  display: inline-block;
}*/

.hero h2 {
  font-size: 1rem;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
   color:rgb(59, 59, 59);
   font-weight: bold;
   font-style: italic;
   background-color: #ccc;
}
.herosec {
  padding: 100px;
  
  }


.hero1 {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  padding: 10px 50px;
  background: #2b2a2a;
  border-bottom: 5px solid; /* Border width */
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
 
  
  }
  .hero-content {
    max-width: 100%;
    text-align: center;
    }
    
  .hero1-content {
    max-width: 100%;
    text-align: justify;
    font-size: 1.2rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
  }
    
.hero-image {
max-width: 40%;
padding: 0px 0px 0px 15px;
border-radius: 20px;
}
.about-button {
  background: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  color: black;
  padding: 10px 20px 10px ;
  height: fit-content;      
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .about-button:hover {
    background-color: gray;
  }


/*.content-section {
padding: 50px 20px;
background: #111;
border-bottom: 5px solid;
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;*/
.objectives {
  text-align: justify;
  list-style: none; /* Remove default list styles */
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  
  padding: 10px 50px 20px;
  background: #2b2a2a;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  color: white;
  font-size: 1.2rem;
}
.hhh{
  font-size: 1.2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: justify;
}
.ach{
  font-size: 1.2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: justify;
}
.objectives ul {
  margin-left: 20px;
}

.objectives li {
  margin-bottom: 15px;
  position: relative;
  list-style: none; 
}

.objectives li::before {
  content: "★ "; /* Symbol to define the list item */
  color: gold; /* Customize the symbol color */
  font-size: 18px; /* Adjust symbol size */
  margin-right: 10px;
}

.bold {
  font-weight: bold;
  font-style: normal;
}

.team-section{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 50px 20px;
background: #2b2a2a;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.2rem;
}
.teamcards{
  display: flex;
  align-items: center;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  color: white;
  gap: 4rem;
  padding: 4rem;
  }


.mtt{
  color: white;
}
.team-image {
     max-width: 50%;
     border-radius: 10px;
   }    
.team-content  {
 max-width: 100%;
 color: white; 
 margin-bottom: 20px;
 color: white; 
 text-align: center;
 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 font-size: 1.2rem;

   }
   
.team-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  color: white; 
  border-radius: 10px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: justify;
  }
  .coll{
    color: white; 
  }

  
  .contactUs-section {
    text-align: center;
    padding: 50px 20px;
    background: #2b2a2a;
    border-bottom: 5px solid;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
    display: flex; /* Use Flexbox for alignment */
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
   
  }
  
.table-content th, td{

color: white;
}
.table-content p {
  color:white;
  font-family: 'Times New Roman', Times, serif;
  font-size: 1.5rem;
  }
  .social-icon {
    font-size: 2rem; /* Adjust icon size */
    color: #fff; /* Default icon color */
    margin: 0 10px; /* Add space between icons */
    transition: color 0.3s ease; /* Smooth color transition on hover */
    display: inline-block;
  }
  
  .social-icon:hover {
    color: #ff6600; /* Change icon color on hover */
  }

  

.heading{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  font-size: 2.5rem;
  font-style: italic;
  color: white;
  font-size: 1.2rem;
}

.contact-section{
padding: 50px 20px;
background:#2b2a2a;
border-bottom: 5px solid;
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
}


.waysWeHelp {
text-align: center;
padding: 2rem;
background: #2b2a2a;
border-bottom: 5px solid;
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.wwh{
  color: white;
  font-size: 1.2rem;
}
.waysWeHelp-description {
max-width: 100%;
margin: 0 auto 2rem;
font-size: 1.2rem;
text-align: justify;
}

.waysWeHelp-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 4rem;
}

.card {
background-color: #2b2a2a;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
width: 100%;
max-width: 300px;
text-align: center;
}
.card:hover{
  background-color: #928e8e; 
}

.card-image1 {
width: 100%;
height: auto;
display: block;
}
.card-image2 {
width: 100%;
height: auto;
display: block;
}
.card-image3 {
width: 100%;
height: auto;
display: block;
}
.card-title {
font-size: 1.25rem;
margin: 1rem 0 0.5rem;
color: #ccc;
}

.card-description {
font-size: 1rem;
text-align: justify;
margin: 0 1rem 1.5rem;
}
.program-button {
  background: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  color: black;
  padding: 10px 20px  ;
  height: fit-content;      
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .program-button:hover {
    background-color: gray;
  }




.media-section{
padding: 10px 10px;
background: #2b2a2a;
border-bottom: 5px solid;
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
color:white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
font-size: 1.2rem;
}

.media-section p{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
text-align: center;
font-size: 1.2rem;
color:white;
}
.media-button {
  background: white;
  font-size: 1.2rem;
  font-weight: bold;
  text-align: center;
  color: black;
  padding: 10px 20px  ;
  height: fit-content;      
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
  text-decoration: none;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  .media-button:hover {
    background-color: gray;
  }
.news{
  justify-content: center;
  text-align: center;
  border-bottom: 5px solid;
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
}
.media {
 display: flex;
 flex-wrap: wrap;
 gap: 2rem;
}
.media-image1 {
  max-width: 40%;
  border-radius: 10px;
}
.media-image2 {
  max-width: 50%;
  border-radius: 10px;
}
.media-image3 {
  max-width: 50%;
  border-radius: 10px;
}
.media-image4 {
  max-width: 50%;
  border-radius: 10px;
}
  
.content-section h2 {

font-size: 1.5rem;
color: #fff;
margin-bottom: 10px;
}




   


  



   /* Contact Page*/
/* #contact{
  background-color: #111;
  padding: 50px 20px;
  border-top: 5px solid purple;
}*/
   

.contactLocation{
  display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 20px;
   
  border-bottom: 5px solid; 
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
}
  

.contact-content {
  float: left;
 
  height: 100vh;
  padding: 100px 200px;
  background: #fff;
}

#contact-form input,
#contact-form textarea,
#contact-form select {
  width: 100%; /* Full width of the form container */
  padding: 12px; /* Larger padding for bigger input boxes */
  margin-bottom: 20px; /* Space between input boxes */
  font-size: 16px; /* Larger text size */
  border: 2px solid #ccc; /* Add a subtle border */
  border-radius: 4px; /* Slight rounding of edges */
  box-sizing: border-box; /* Ensures padding doesn’t exceed width */
}

#contact-form textarea {
  height: 150px; /* Adjust height for the message box */
  resize: vertical; /* Allows vertical resizing */
}

#contact-form button {
  background-color: #000; /* Black background for button */
  color: #fff; /* White text for button */
  padding: 12px 20px;
  font-size: 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#contact-form button:hover {
  background-color: #444; /* Slight hover effect */

}

   .map-container {
     width: 60%;
     height: 100vh; /* Adjust height as needed */
     float: right;
     
   }
#contactus {
color: black;
}
#contact-form label {
     color: #2c0c0c;
     font-size: 20px; /* Optional: Adjust font size */
     margin-bottom: 5px; /* Add some spacing below the label */
     display: block; /* Ensure the label appears on its own line */
   }
   

   .additional-info {
     float: bottom;
     background-color: black; /* Light grey background */
     padding: 20px;
     margin-top: 20px;
     border-top: 2px solid #ccc; /* Separator line on top */
   }

   .additional-info h2 {
     text-align: center;
     color: #333; /* Darker text for better visibility */
   }

   .contact-details {
     max-width: 600px; /* Restrict width for readability */
     margin: 0 auto;
     font-size: 16px;
     color: #555; /* Softer text color */
   }

   .contact-details h3 {
     margin-bottom: 10px;
     color: #000; /* Bold text for headers */
   }

   .contact-details p {
     margin: 5px 0;
     line-height: 1.6;
   }



   
/* About Us Page*/
   .story {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 50px 20px;
   
    border-bottom: 5px solid; 
    border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
     width: 100%;
     
    }

     
   .story-content {
     text-align: center;
     text-wrap: wrap ;
     width: 100%;
     padding: 50px 20px;
     align-items: center;
      
      }
   .st{
     color: #000;
     font-weight: bold;
     font-style: italic;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     font-size: 1.5rem;
         
         }
    .misionVision {
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding: 50px 20px;
      background: #2b2a2a;
      border-bottom: 5px solid; 
      border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
      text-align: center;
    
     gap: 15rem
    }

    .story-content h2 {
      text-align: center;
      
      font-size: 2.0rem;
      margin-bottom: 20px;
      color: #000; 
   }
   .story-content p {
    text-align: center;
   
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
    color: #000; 
 }
 .mision  {
  display: flex;
  padding: 10px;
  align-items: center;

} 

    .mision  p {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
      font-weight: normal;
      
    }
    .vision  {
      display: flex;
      padding: 10px;
      align-items: center;
    } 
    .vision  p{
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1.2rem;
      font-weight: normal;
      
    }
    .vision-image{
     max-width: 30%;
     border-radius: 50%;
    }
    .mision-image{
      max-width: 30%;    
      border-radius: 50%
      
    }
    .collaboration  {
      max-width: 100%;
      color: white; 
      margin-bottom: 20px;
      color: white; 
      text-align: center;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      padding: 10px;
      background: #2b2a2a;
      border-bottom: 5px solid; 
      border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
      
        }
      .collab-image{
        max-width: 60%;
        padding: 0px 0px 0px 15px;
        border-radius: 20px;  
      }  
     .collaboration-content p {
       font-size: 1.2rem;
       margin-bottom: 20px;
       color: white; 
       border-radius: 10px;
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       text-align: justify;
       }
       .coll{
         color: white; 
         text-align: center;
         font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         font-size: 1.5rem;
         font-weight: bold;
        }
        .achievements {
          text-align: center;
          list-style: none; /* Remove default list styles */
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          
          padding: 50px 20px;
          background: #2b2a2a;
          border-bottom: 5px solid;
          border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
          color: white;
          font-size: 1.2rem;
        }
        .ach{
          font-size: 1.2rem;
          font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
          color: white;
        }
        
        .achievements ul {
          margin-left: 20px;
        }
        
        .achievements li {
          margin-bottom: 15px;
          position: relative;
          list-style: none; 
        }
        
        .achievements li::before {
          content: "★ "; /* Symbol to define the list item */
          color: gold; /* Customize the symbol color */
          font-size: 18px; /* Adjust symbol size */
          margin-right: 10px;
        }
        
        .bold {
          font-weight: bold;
          font-style: normal;
        }
        

/*DonatePage*/

.donatePage{
  text-align: center; 
  padding: 50px;
  display: flex;
align-items: center;
justify-content: space-between;
padding: 50px 20px;

border-bottom: 5px solid; 
border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
}

.donateHere {
  text-align: center;
  padding: 2rem;

  border-bottom: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  }
  .donateHere h2, p {
    color: white;
    }
  
  .donateHere-description {
  max-width: 100%;
  margin: 0 auto 2rem;
  font-size: 1rem;
  }
  
  .donateHere-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  }
  .paypall{
    background: rgb(59, 14, 223);
    font-size: 2rem;
  }
  .stripe{
    background: #15df0e;
    font-size: 2rem;
  }
  
  .card1 {
  background-color: #a5b3fd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  text-align: center;
  }
  .card2 {
    background-color: rgb(120, 250, 120);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 50%;
    text-align: center;
    }
    .card3 {
      background-color:  rgb(120, 250, 120);
      border-radius: 8px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      width: 100%;
      max-width: 100%;
      text-align: center;
      }
      .card-title1 {
        font-size: 1.25rem;
        margin: 1rem 0 0.5rem;
        color: #0c0b0b;
        }
        .container {
          width: 100%;
          max-width: 400px;
          margin: 50px auto;
          padding: 20px;
          background: white;
          border-radius: 8px;
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        h2 {
          text-align: center;
          color: #333;
        }
        label {
          display: block;
          margin: 10px 0 5px;
          font-size: 1.1rem;
        }
        input {
          width: 100%;
          padding: 10px;
          margin: 10px 0;
          font-size: 1rem;
          border-radius: 4px;
          border: 1px solid #ccc;
        }
        .hidden {
          display: none;
        }
        .submit-btn {
          background-color: #28a745;
          color: white;
          border: none;
          padding: 10px 20px;
          font-size: 1.1rem;
          cursor: pointer;
          width: 100%;
          border-radius: 4px;
        }
        .submit-btn:hover {
          background-color: #218838;
        }

        .mass1{
    
          display: flex;
          align-items: center;
          justify-content: space-between;
          text-align: center;
          font-size: 1.2rem;
          
          
          }
      .mass-content1 {
        max-width: 100%;
        text-align: justify;
        color:black;
            font-weight: bolder;
            background-color: #928e8e;
        
           }
           .mass-content1 p {
           padding: 10px;
            text-align: justify;
            color:black;
            font-weight: bolder;
          
               } 
      .mass-content1 h2 {
        
         color:black;
       
       
            }     
      .mass-image1{
       max-width: 50%;
      max-height: 50%;
      }
      .mass-content1 ul {
        margin-left: 20px;

      }
      
      .mass-content1 li {
        margin-bottom: 15px;
        position: relative;
        list-style: none; 
        font-weight: bolder;
        font-size: 1.2rem;
      }
      
      .mass-content1 li::before {
        content: "★ "; /* Symbol to define the list item */
        color: gold; /* Customize the symbol color */
        font-size: 18px; /* Adjust symbol size */
        margin-right: 10px;
      }
      
        /* News and media*/


.social-handle{
  color: rgb(138, 138, 252); /* Default icon color */
  margin: 0 10px; /* Add space between icons */
  transition: color 0.3s ease;
}
  
.social-handle:hover {
    color:blue; /* Change icon color on hover */
  }

.majivunoDay{

  background: #2b2a2a;
    display: flex;
  align-items: center;
  justify-content: space-between;
    text-align: center;
  font-size: 1.2rem;
  text-align: center;
 
  }
  .majivuno-content {
    max-width: 100%;
    text-align: center;
    
    }
    .majivuno-content p {
      padding: 10px;
      text-align: justify;
      }
.paragraph{
  color:white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 1.2rem;
  text-align: center;
  }
  
.majivuno-image{
 max-width: 50%;
 
}
.playdate{
  
  background: #2b2a2a;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: 1.2rem;
  text-align: center;
 
  }
  .mass{
    background: #2b2a2a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 1.2rem;
    text-align: center;
    
    }
.mass-content {
  max-width: 100%;
  text-align: center;
     }
     .mass-content p {
     padding: 10px;
      text-align: justify;
         }   
.mass-image{
 max-width: 50%;

}
  .playdate1{
    background: #2b2a2a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center;
    font-size: 1.2rem;
    text-align: center;
    
    }
.playdate-content {
  max-width: 100%;
  text-align: center;
     }
     .playdate-content p {
      padding: 10px;
      text-align: justify;
         }
.playdate-image{
 max-width: 50%;

}
.hike{
  
  background: #2b2a2a;
  
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: center;
  font-size: 1.2rem;
  text-align: center;
 
  }
.hike-content p {
  padding: 10px;
      text-align: justify;
     }
     .hike-content {
      max-width: 100%;
      text-align: center;
         } 
.hike-image{
 max-width: 50%;

}
.media-icons{
  padding: 10px 10px;
  background: #2b2a2a;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  color:white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: justify;
  font-size: 1.2rem;
}

 .media-section{
  padding: 10px 10px;
  background: #2b2a2a;
  border-bottom: 5px solid;
  border-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet) 1;
  color:white;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: justify;
  font-size: 1.2rem;
  }
          
.media-section p{
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  text-align: center;
  font-size: 1.2rem;
  color:white;
  }

  .social-iconm {
    font-size: 1.5rem; /* Adjust icon size */
    color: #fff; /* Default icon color */
    margin: 0 10px; /* Add space between icons */
    transition: color 0.3s ease; /* Smooth color transition on hover */
    display: inline-block;
    align-items: center;
  }
  
  .social-iconm:hover {
    color: #ff6600; /* Change icon color on hover */
  }

 .wrapper-main p {
  text-align: justify;
 }         
  .media {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
  }
  .media-image1 {
    max-width: 40%;
    border-radius: 10px;
  }
  .media-image2 {
    max-width: 50%;
    border-radius: 10px;
  }
  .media-image3 {
    max-width: 50%;
    border-radius: 10px;
  }
  .media-image4 {
    max-width: 50%;
    border-radius: 10px;
  }
      
  







  .content-section h2 {
          
  font-size: 1.5rem;
  color: #fff;
  margin-bottom: 10px;
  }
          
          
          
          
             




@media (max-width: 800px) {
  .hideOnMobile{ 
      display: none;
  }

  

.donateHere-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
   gap: 4rem;
  }

.waysWeHelp-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 100%;
  padding: 0px;
}
.waysWeHelp-description{
  text-align: justify;
  font-size: 1.0rem;
  padding: 0px;
}
.waysWeHelp{
    padding: 15px 15px;
  }

.card{
 max-width: 100%;
 background-color: #2b2a2a; 
}
.card:hover{
  
  background-color: #928e8e; 
 }
.program-cards {
display: flex;
flex-wrap: wrap;

}

.team-section{
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding:10px 10px 0px 0px;
}
.team-content{
  text-align: justify;
    font-size: 1.0rem;
}
.team-content p{
     font-size: 1.0rem;
}

.card-description{
  text-align: justify;
  font-size: 1.0rem; 
} 

.hero {
  padding: 30px 10px;
}
.media-section{
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 50px 0px;
  gap: 4px}
 
  .media-image{
    max-width: 100%;
    border-radius: 10px;
    }

.story {
  padding: 30px 10px;
}
.story-content{
  text-align: justify;
  font-size: 1.0rem; 
}
.more-section {
  padding: 30px 10px;
}
.hero1{
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 10px 20px;
}
.hero1-content {
  max-width: 100%;
  text-align: center;
  font-size: 1.0rem;
  text-align: justify;
  }
.hero-image {
  max-width: 100%;
  border-radius: 15px;
  padding: 10px 0px 0px 0px; 
} 
.ach{
  text-align: justify;
  font-size: 1.0rem;
}
.objectives {
  text-align: justify;
  list-style: none; /* Remove default list styles */
  padding: 10px 20px;
  background: #2b2a2a;
  font-size: 1.0rem;
}
.achievements {
  text-align: justify;
  list-style: none; /* Remove default list styles */
  padding: 10px 20px;
  background: #2b2a2a;
  font-size: 1.0rem;
}
.contactUs-section {
    padding: 0px; /* Reduce padding for smaller screens */
  }

  .table-content {
    width: 100%; /* Make table take full width */
    border-collapse: collapse; /* Adjust table layout for smaller screens */
   font-size: 1.0rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .table-content p {
    
   font-size: 1.0rem;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  .table-content th, .table-content td {
  /* Stack table rows for smaller screens */
    text-align: left; /* Align text to the left for better readability */
    width: 100%; /* Make each cell take full width */
    padding: 10px; /* Add padding for better spacing */
  }

  .table-content tr {
    margin-bottom: 10px; /* Add spacing between rows */
  }

   .table-content tr, .table-content td {
    display: block; /* Stack table rows for smaller screens */
    text-align: left; /* Align text to the left for better readability */
    width: 100%; /* Make each cell take full width */
    padding: 10px; /* Add padding for better spacing */
  }

  .instagram-button {
    display: inline-block; /* Ensure buttons fit within the screen */
    margin-top: 10px; /* Add spacing for better layout */
  }

  .contactLocation{
    flex-direction: column;
    align-items: center;
    width: 100%;
      padding: 0px 0px;
  }
  .map-container {
    width: 100%;
  }
    .contact-content {
      
      width: 100%;
      
    } 
    .contact-content {
      width: 100%; /* Increase width to utilize more space */
      padding: 50px 20px; /* Reduce padding to save space */
      float: none; /* Remove float for better alignment */
      margin: 0 auto; /* Center the content */
      height: auto; /* Allow content to adjust height naturally */
    } 

    .news{
      padding: 10px;
    }
    .paragraph{
      text-align: justify;
      font-size: 1.0rem;
      } 
      .collaboration-content p{
        text-align: justify;
      font-size: 1.0rem;
      }
      .mass{
        flex-direction: column;
         align-items: center;
         width: 100%;
         text-align: justify;
         padding: 10px 0px 0px 0px;
       }  
     .mass-image{
          
       max-width: 100%; } 
       .mass1{
        flex-direction: column;
         align-items: center;
         width: 100%;
         text-align: justify;
         padding: 10px 0px 0px 0px;
       }  
      .mass-content1{ 
      background-color: #928e8e;}
     .mass-image1{
          
       max-width: 100%; } 
      .majivunoDay{
     flex-direction: column;
      align-items: center;
      width: 100%;
      text-align: justify;
      padding: 10px 0px 0px 0px;
    }  
  .majivuno-image{
       
    max-width: 100%; } 
    .paragraph{
     
      text-align: justify;
      font-size: 1.0rem;
      }        
.playdate{

align-items: center;
width: 100%;
flex-direction: column-reverse;
text-align: justify;
padding: 10px 0px 0px 0px;
} 
.playdate1{
  flex-direction: column;
  align-items: center;
  width: 100%;
  flex-direction: column-reverse;
  text-align: justify;
  padding: 10px 0px 0px 0px;
  }   

  .playdate-image{
         
  max-width: 100%; } 
  .hike{
    flex-direction: column;
    align-items: center;
    width: 100%; 
    flex-direction: column-reverse;
    padding: 10px;
  }  
    .hike-image{
      text-align: justify;     
      max-width: 100%; 
    } 

.vision-image{
  max-width: 70%;
 
 }
 .mision-image{
   max-width: 70%;     
 }      
  
.mision  {
  flex-direction: column; 
  padding: 10px;
  align-items: center;

} 
.mision p  {
  text-align: justify;
      font-size: 1.0rem;
} 
.vision  {
  flex-direction: column;
      padding: 10px;
      align-items: center;
    } 
    .vision p {
      text-align: justify;
      font-size: 1.0rem;
        } 
    .hero h2 {
      font-size: 0.8rem;
        }    
    .hero h1  {
      font-size: 1.5rem;
    }    
.herosec{
 padding: 50px;
  display: flex;
  justify-content: center;  /* Horizontally center the content */
  align-items: flex-end; 
  flex-direction: column;
} 
.collab-image{
  max-width: 100%;

  border-radius: 20px;  
}  
.wrapper-main p{
  text-align: justify;
  font-size: 1.0rem;
}  
.mass-content1 li {
  color:black;
            font-weight: bolder;
            font-size: 1.0rem;
            text-align: justify;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
     }
 .donateHere p{
  color:black;
            font-weight: bolder;
            font-size: 1.0rem;
            text-align: justify;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 .card1 {
  background-color: #a5b3fd;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  text-align: center;
  }
 
    .card3 {
      
    
      width: 100%;
      max-width: 100%;
      text-align: center;
      }   
}






@media (max-width: 400px) 
  {.sidebar{ 
      width: 100%;
  }
  }