/* Reset & fonts */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
  }

  

  /* NAVBAR */
.navbar { 
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    padding:15px 50px; 
    position:fixed; 
    width:100%; 
    background:rgba(255,255,255,0.9); 
    z-index:1000; 
    box-shadow:0 2px 5px rgba(0,0,0,0.1);
}
.logo img { 
    height:50px; 
}

.nav-links { 
    display:flex; 
    list-style:none; 
    gap:25px; 
    align-items:center; 
}

.nav-links a { 
    text-decoration:none; 
    color:#333; 
    font-weight:500; 
    transition:0.3s;
}

.nav-links a:hover{
   color: #2c7be5;
}

.btn-donate { 
    background:#2c7be5; 
    color:white; 
    padding:8px 20px; 
    border-radius:5px; 
}

.btn-donate:hover{
    background:#edebe9;
    color: #222;
}

.hamburger { 
    display:none; 
    flex-direction:column; 
    gap:5px; cursor:pointer; 
}

.hamburger span { 
    width:25px; 
    height:3px; 
    background:#333; 
}
/* Footer Social Media Icons Styling */
.footer-socials {
  display: flex; /* Arrange the icons horizontally */
  justify-content: center; /* Center-align the icons */
  gap: 15px; /* Space between the icons */
  margin-top: 20px; /* Space above the icons */
}

.footer-socials a {
  font-size: 30px; /* Icon size */
  color: white; /* Icon color */
  text-decoration: none; /* Remove underlines from the links */
  transition: color 0.3s ease; /* Smooth color transition on hover */
}

.footer-socials a:hover {
  color: #0a4d8c; /* Change color on hover (blueish shade) */
}

/* Optional: You can add specific colors for each icon */
.footer-socials .facebook-icon:hover {
  color: #3b5998; /* Facebook blue */
}

.footer-socials .twitter-icon:hover {
  color: #00acee; /* Twitter blue */
}

.footer-socials .instagram-icon:hover {
  color: #C13584; /* Instagram pinkish purple */
}

.footer-socials .linkedin-icon:hover {
  color: #0077b5; /* LinkedIn blue */
}

.footer-socials .youtube-icon:hover {
  color: #FF0000; /* YouTube red */
}
/*  NAVBAR RESPONSIVE  */

@media (max-width: 768px) {

    .nav-links {
        position: absolute;
        top: 80px;
        right: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 30px 0;
        display: none; /* Hidden by default */
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    }

    .nav-links.active {
        display: flex; /* Show when active */
    }

    .hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
    }

    .hamburger span {
        width: 25px;
        height: 3px;
        background: #333;
        transition: 0.3s;
    }
}
    /* FOOTER */
.footer { 
    background:#222; 
    color:white; 
    padding:60px 50px 30px; 
    margin-top:50px; 
}

.footer-container { 
    display:flex; 
    justify-content:space-between; 
    flex-wrap:wrap; 
    gap:30px; 
}
.footer h3 { 
    margin-bottom:15px; 
    font-size:1.5rem; 
       color: #2c7be5;
}
.footer p, .footer a { 
    color:#ccc; 
    font-size:1rem; 
    text-decoration:none; 
    line-height:1.8; 
}

.footer-links ul { 
    list-style:none; 
}
.footer-links ul li a:hover { 
       color: #2c7be5;
}
.footer-socials { 
    display:flex; 
    gap:15px; 
    margin-top:10px; 
}
.footer-bottom { 
    text-align:center; 
    margin-top:40px; 
    border-top:1px solid #444; 
    padding-top:15px; 
    font-size:0.9rem; 
    color:#aaa; 
}

/* RESPONSIVE */
@media(max-width:768px){
    .hero h1{
        font-size:32px;
    }
}