:root {
  --primary: #f32259;
  --secondary: #fe9101;
  --dark: #111;
  --light: #fff;
  --gray: #f7f7f7;
  --container: 1200px;
}

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

body {
  font-family: Century Gothic, sans-serif;
  line-height: 1.6;
  color: var(--dark);
    max-width: 2000px;
    overflow-x: hidden;
    position: relative;
}


/* Floating container fixed to bottom-right */
.floating-character {
    position: absolute;
    z-index: 999;
}
.character{
    bottom: 50%;
    right: 50%;
}.character1{
    bottom: 80%;
    right: 20%;
}.character2{
    bottom: 30%;
    right: 10%;
}.character3{
    bottom: 90%;
    right: 90%;
}



/* Character image */
.floating-character img {
    width: 60px;                  /* adjust size */
    height: 60px;
    transform-origin: bottom center;  /* pivot for jump & wave */
    
    /* Jump + waving animation */
    animation: jumpWave 2s ease-in-out infinite;
}

/* Jump + Waving Animation */
@keyframes jumpWave {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    25% {
        transform: translateY(-15px) rotate(-10deg); /* jump & tilt left */
    }
    50% {
        transform: translateY(-25px) rotate(10deg);  /* highest point & tilt right */
    }
    75% {
        transform: translateY(-15px) rotate(-5deg);  /* coming down & tilt left */
    }
}


h1{
    font-size: 42px;
}
h2{
    font-size: 26px;
    font-weight: lighter;
}
p{
    font-size: 16px;
}



/* --------------------  HEADER ----------------- */
header{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    
    position: sticky; /* Sticky positioning */
    top: 0;           /* Sticks to top when scrolling */
    background-color: #fff; /* Background so content underneath doesn't show through */
    z-index: 1000;    /* Keep it above page content  */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); 
    background-color: white;
}

/* -----------------  HEADER - NAV ----------------- */

.announcement{
    width: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    font-weight: bold;
    background-color: rgba(254, 145, 1, 0.6499999761581421);
}
.announcement p{
    animation: scrollLeft 15s linear infinite;
}
@keyframes scrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.nav{
    width: 70%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    padding: 5px 0;
    
}
header li{ 
    list-style: none;
    gap: 5px;
    display: flex;
    padding: 5px 0;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}
header li input{
    background-color: white;
    border: 1px solid var(--primary);
    border-radius: 50px;
    font-size: small;
    padding: 5px 10px;
}


.secnav li{
    color: #f42259;
}

li, .sec-btn{
    position: relative;
}
li::before, .sec-btn::before{
    content: " ";
    position: absolute;
    bottom: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: linear-gradient(90deg, rgba(243, 34, 89, 0.8999999761581421) 0%, rgba(254, 145, 1, 0.8999999761581421) 100%);
    opacity: 0;
    transform: scaleX(0);
    transition: all .3s;
}
li:hover::before, .sec-btn:hover::before{
    opacity: 1;
    transform: scaleX(1);
}
li.active::before{
    opacity: 1;
    transform: scaleX(1);
}
li:not(.active):hover::before{
    opacity: 1;
    transform: scaleX(1);
}

li.end:hover::before{
    opacity: 0;
}

.prinav li{
    color: #fe9101;
}


.mainnav ul{
    display: flex;
    flex-direction: row;
    gap: 15px;
    justify-content: flex-end;
}
header .mainnav img{
    width: 24px;
    height: 24px;
}
.hamburger img{
    width: 35px;
    height: 24px;
}
.logo{
    width: 70px;
    height: auto;
     /* Animation */
    animation: float 2s ease-in-out infinite;
    transition: transform 0.3s ease;
}
.nav #hamburger-nav-links{
    display: none;
}
#toggle{
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.hamburger{
    display: none;
}


/* Floating sticky div */
.floating-contact {
    position: fixed;          /* Stays on screen while scrolling */
    bottom: 40px;             /* Distance from bottom */
    right: 30px;              /* Distance from right */
    background-color: var(--primary);/* Example color */
    color: #fff;
    border-radius: 50%;       /* Makes it round */
    width: 70px;              /* Adjust size */
    height: 70px;
    display: flex;
    flex-direction: columns;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    cursor: pointer;
    z-index: 9999;
    
    /* Animation */
    animation: float 2s ease-in-out infinite;
    transition: transform 0.3s ease;
    color: var(--primary);
}
.floating-contact a{
    margin-top: 10px;
    width: 60%;
    height: 60%;
}
.floating-contact span{
    position: absolute;
    bottom: -50%;
}
.floating-contact img {
    width: 100%; /* Adjust icon size */
    height: auto;
}
.back-to-top{
    left: 30px; 
}

/* Optional: Hover effect */
.floating-contact:hover {
    transform: scale(1.2);
}

/* Simple floating animation */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px); /* Moves up 10px */
    }
}


/* -----------------  HERO ----------------- */

#hero{
    width: 100%;
    margin: auto;
    display: flex;
    justify-content: center;
    padding: 25px 0;
    animation: heroFadeIn 1.5s ease-out forwards;
}

/* Keyframes */
@keyframes heroFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
    filter: brightness(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1);
  }
}

.container{
    width: 70%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#hero .text{
    width: 50%;
    display: flex;
    gap: 20px;
    flex-direction: column;
}

#hero img{
    width: 270px;
    height: 310px;
    border-radius: 100px;
}

#hero button{
    width: 200px;
    
     /* Animation */
    animation: float 1s ease-in-out 2;
    transition: transform 0.2s ease;
}

/*------ BUTTON EFFECT------------ */

.main-btn{
    border-radius: 25px;
    padding: 15px 27.131784439086914px;
    color: white;
    background: linear-gradient(90deg, #f32259, #fe9101, #f32259);
    background-size: 200% 100%;   /* Make gradient wider */
    background-position: left;     /* Start position */

    transition: background-position 0.4s ease, transform 0.3s ease;
}

.main-btn:hover{
    background-position: right;    /* Slide gradient */
    transform: scale(1.05);
}


/* -----------------  MAIN SECTION  ----------------- */

main{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
}

main .container{
    width: 100%;
    display: flex;
    gap: 50px;
    flex-direction: column;
    background-image: url(pri-bg.png);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 100px 0 10px 0;
}
/*----MEDIA BG CHANGES---*/
@media screen  and (max-width: 1500px) {
    main .container{
    padding: 100px 0 35px 0;
}
}

@media screen  and (max-width: 1300px) {
    main .container{
    padding: 100px 0 45px 0;
    }
}
@media screen  and (max-width: 1200px) {
    main .container{
    padding: 100px 0 50px 0;
    }
}
@media screen  and (max-width: 1000px) {
    main .container{
    padding: 100px 0 80px 0;
    }
}
@media screen  and (max-width: 9000px) {
    main .container{
    padding: 100px 0 100px 0;
    }
}

@media screen  and (max-width: 700px) {
    main .container{
    padding: 100px 0 120px 0;
}
}

/*----MEDIA BG CHANGES END---*/



/*---- SlIDE IN TRANSITION BEGIN ---*/



.autoshow{
    animation: text-appear both;
    animation-timeline: view() ;
    animation-range: entry 20% cover 100vh;
}
@keyframes text-appear{
    from{
        opacity: 0;
        transform: translateY(100px);
    }
    to{
        opacity: 1;
        transform: translateY{0};
    }
}
.autoshowx{
    animation: text-appear-right both;
    animation-timeline: view() ;
    animation-range: entry 20% cover 100vh;
}
@keyframes text-appear-right{
    from{
        opacity: 0;
        transform: translateX(300px);
    }
    to{
        opacity: 1;
        transform: translateX{0};
    }
}
/*---- S;IDE IN TRANSITION  END---*/

#vision{
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#vision .text {
    width: 45%;
}
.text{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
#vision .image{
    width: 320px;
    height: 427px;
    position: relative;
}
#vision .img1{
    border-radius: 200px 200px 0px 0px;
    border: 10px solid white;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#vision .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
#vision .img2{
    position: absolute;
    bottom: -20px;
    left: -90px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    border: 10px solid white;
    overflow: hidden;
}

#partner{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 50px;
    justify-content: center;
    align-content: center;
    background: url(BG-4.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
#partner .main-btn{
    margin: auto;
}

#partner .sponsors-images{
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 20px;
}

#partner .sponsors-images img{
    width: 40px;
    height: 40px;
    object-fit: contain;
}

#partner h1, #partner p{
    text-align: center;
}

main button{
    width: 200px;
}


#mission .text, #mission .image{
     width: 45%;
}

#mission{
    width: 70%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}
#mission .image-container{
    position: relative;
    width: 430px;
    height: 430px;
}
#mission .image{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 10px solid white;
    overflow: hidden;
}
#mission img{
    width: auto;
    height: 100%;
}
/* -----------------  BLOG AND EVENTS  ----------------- */


.blog-event-container {
  width: 70%;
  margin: 50px auto;
}
#spacebetween{
    margin-bottom: 50px;
}
.section-title {
  font-size: 40px;
  color: #f05a28;
  margin-bottom: 20px;
}

/* BLOG SECTION */

.blog-wrapper {
  display: flex;
  gap: 30px;
  margin-bottom: 20px;
}

.blog-card {
  flex: 1;
}

.blog-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.blog-card h3 {
  color: #e91e63;
  margin: 15px 0 5px;
}

.blog-card .date {
  font-size: 14px;
  color: #e91e63;
}

.blog-card p {
  margin: 10px 0;
  color: #333;
}

.blog-card a {
  font-size: 14px;
  color: #e91e63;
  text-decoration: none;
  font-weight: bold;
}

.sec-btn{
    padding: 5px 0;
  color: #e91e63;
  font-weight: bold;
  margin-top: 10px;
}

/* EVENTS SECTION */

.events-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}

.event-card {
  display: flex;
  gap: 20px;
  width: calc(50% - 20px);
}

.event-date {
  border-left: 5px solid #e91e63;
  padding-left: 10px;
}

.event-date span {
  font-size: 14px;
  color: #555;
}

.event-date h2 {
  font-size: 32px;
}

.event-info .time {
  font-size: 14px;
  color: #555;
}

.event-info h4 {
  color: #e91e63;
  margin: 5px 0;
}

.status {
  font-size: 12px;
  color: #f05a28;
  font-weight: bold;
}

/* -----------------  VIDEO  ----------------- */

#video-container{
    width: 100%;
    display: flex;
    justify-content: center;
    background-image: url(pri-bg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 70px;
}


.video-container{
    width: 70%;
    border: 2px solid black;
    padding: 25px;
    display: flex;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.video-container h1{
    text-align: center;
    color: black;
}

.video-container .youtube-link{
    width: 100%;
    height: 500px;
    background-color: white;
    position: relative;
}

.video-container img{
    width: 100px;
    height: auto;
    position: absolute;
    left: 40%;
    top: 40%;
}

/* -----------------  COMMENTS  ----------------- */
#arrow{
    width: 400px;
    display: flex;
    justify-content: space-between;
}
#arrow .left{
    transform: rotateY(180deg);
}
#arrow img{
    transition: all 0.3s ease-in-out;
}
#arrow img:hover{
    scale: 1.12;
}
#comment{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#comment .comment{
    width: 70%;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 70px;
}

.comment-image{
    height: 500px;
    width: 400px;
    border: 10px solid #e91e63;
    overflow: hidden;
    border-radius: 20px;
}

.comment-text{
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    justify-content: center;
    position: relative;
}



/* -----------------  GALLERY  ----------------- */
/*
#gallery{
    padding: 90px 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    background: url(yellow-bg.png) no-repeat center center / cover;

    /*
    background-image: url(pri-bg.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; */
}
*/
/*
#gallery button{
    width: 300px;
}
.gallery-text{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.gallery-images{
    display: flex;
    gap: 10px;
    justify-content: center;
}

.gallery-images img{
    border: 2px solid white;
    width: 250px;
    height: auto;
}
    */
/* ------ANIMATION---- */
/* ===== Wrapper (stays fixed & centered) ===== */
#gallery{
    width: 100%;
    display: flex;
    gap: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}
.gallery-text{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.gallery-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 0;
}

/* ===== Moving Track ===== */
.gallery-images {
    display: flex;
    gap: 20px;
    width: max-content; /* important */
    animation: scroll 25s linear infinite;
}

/* Pause animation on hover */
.gallery-wrapper:hover .gallery-images {
    animation-play-state: paused;
}

/* ===== Images ===== */
.gallery-images img {
    height: 200px;
    width: auto;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 12px;
}

.gallery-images img.long {
    width: 350px;
}

/* ===== Animation ===== */
@keyframes scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}

/* ===== Fade Edges ===== */
.gallery-wrapper::before,
.gallery-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    width: 120px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.gallery-wrapper::before {
    left: 0;
    background: linear-gradient(to right, white 0%, transparent 100%);
}

.gallery-wrapper::after {
    right: 0;
    background: linear-gradient(to left, white 0%, transparent 100%);
}


/* -----------------  VOLUNTEERS  ----------------- */

#volunteers{
    padding: 30px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    overflow: hidden;
}
#voluteers button{
    width: 300px;
}
.volunteers-text{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.volunteers-profile{
    position: relative;
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
}
/* Moving track */
.volunteers-profile{
    gap: 2vw;              /* Responsive gap */
    animation: scrollRight 10s linear infinite;
}

/* ===============================
    ANIMATION
================================ */
.profile{
    flex-shrink: 0;
    padding: 5px;
}
/* Pause on hover */
.volunteers-profile:hover{
    animation-play-state: paused;
}


/* Even spacing using nth-child */
.profile:nth-child(1){ animation-delay: 0s; }
.profile:nth-child(2){ animation-delay: 5s;}
.profile:nth-child(3){ animation-delay: 10s; }
.profile:nth-child(4){ animation-delay: 15s; }
.profile:nth-child(5){ animation-delay: 20s; }
.profile:nth-child(6){ animation-delay: 25s; }
.profile:nth-child(7){ animation-delay: 30s; }
.profile:nth-child(8){ animation-delay: 35s; }
.profile:nth-child(9){ animation-delay: 40s; }

@keyframes scrollRight {
    from{
        transform: translateX(-50%);
    }
    to{
        transform: translateX(0);
    }
}

.desktop-thq-frame29-elm4{
    gap: 15px;
    width: 335px;
    height: auto;
    display: flex;
    padding: 20px;
    overflow: hidden;
    box-shadow: 1px 2px 10px 0px rgba(0, 0, 0, 0.25);
    align-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    flex-direction: column;
    justify-content: center;
    background-color: rgba(255, 255, 255, 1);
}
.profile img{
        gap: 10px;
    width: 100px;
    height: 100px;
    display: flex;
    overflow: hidden;
    align-items: center;
    flex-shrink: 0;
    border-radius: 500px;
}
.profile .name{
    font-weight: bold;
}
.profile p{
    text-align: center;
}

@media (max-width: 800px) {

    /* Stop animation */
    .volunteers-profile {
        animation: none;
        flex-wrap: wrap;
        justify-content: center;
        max-height: 1000px;
        overflow: hidden;
    }

    /* Profiles scale and wrap */
    .profile {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
    }

    

    /* Image smaller on mobile */
    .profile img {
        width: 70px;
        height: 70px;
    }

}

/* -----------------  SUBSCRIBE  ----------------- */

#subscribe{
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 30px 0;
}
.subscribe-container{
    width: 700px;
    border-radius: 25px;
    background-color: #FF8AA9;
    color: white;
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 10px;
    flex-direction: column;
    padding: 20px;
    position: relative;
}
.newsletter-form {
    width: 100%;
  display: flex;
  gap: 10px;            /* space between input and button */
}

.newsletter-form input[type="email"] {
  width: 100%;
  padding: 12px 20px;
  border: 2px solid white;    
  border-radius: 50px;        
  background-color: transparent;
  color: white;
}

.newsletter-form input[type="email"]::placeholder {
  color: #eee;               /* lighter placeholder text */
}

.newsletter-form input[type="email"]:focus {
  outline: none;
  border-color: #fff;         /* keeps border white on focus */
}
.subscribe-container img{
    position: absolute;
    right:-13%;
    bottom: 10% ;
    
    width: 100px;
    height: auto;
}


/* -----------------  FOOTER  ----------------- */

footer{
    background-color: black;
    width: 100%;
    display: flex;
    justify-content: center;
}
footer .container{
    width: 70%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

footer p, footer h3, footer a{
        color: white;
    }

.section1 .footer-logo{
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
} 
@media screen (min) {
    
}
.section1 img{
    width: 50px;
    height: auto;
}


.social-media img:hover{
    scale: 1.12;
}

footer .section2{
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    border-bottom: 1px solid white;
    padding-bottom: 10px;
}
footer .getintouch{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
footer .git1 img{
    width: 20px;
    height: 20px;
    border-radius: 5px;
}

footer .git1{
    display: flex;
    gap: 10px;
}
footer .heading{
    font-weight: bold;
    border-bottom: 1px solid white;
    padding: 5px;
}
footer .quicklinks li{
   padding: 5px;
}
.footer-gallery img{
    width: 60px;
    height: 60px;
    border-radius: 5px;
    border: 1px solid whites;
}
.footer-gallery-images{
    padding: 5px;
    display: flex;
    width: 200px;
    flex-wrap: wrap;
    gap: 5px;
}




/*  =====    MEDIA VIEWWPORT     =====   */
/*  =====    MEDIA VIEWWPORT     =====   */
/*  =====    MEDIA VIEWWPORT     =====   */

/*-----TABLET HEADER-----*/


@media screen  and (max-width: 1000px){
    

.nav, #mission, .video-container, footer .container, .container, #comment .comment, .blog-event-container, #vision, .container { 
    width: 100%;
    padding: 10px;
}
#arrow{
    width: 80%;
    justify-content: space-between;
}
#comment{
    padding: 50px 0;
}

}
@media screen  and (max-width: 800px) {
    .email-floating{
        display: none;
    }
    
    h1{
        font-size: 32px;
    }
    h2{
        font-size: 20px;
    }
    p{
        font-size: 14px;
    }
    .hamburger{
        display: inline-block;
        cursor: pointer;
    }
    
    .nav{
    width: 100%;
    padding: 10px;
   }
   
   header ul{
    flex-direction: column;
    justify-content: flex-end;
    }

    .mainnav ul{
        display: none;
    }
    .logo{
        width: 45px;
        height: auto;
    }
    
    .nav #hamburger-nav-links{
        width: 100%;
        padding: 20px 0;
        position: absolute;
        top: 100px;
        left: 0px;
        display: inline-block;
        background-color: white;
        transform: translateX(200%);
        transition: all .5s;
        z-index: 999;
    }
    .nav #hamburger-nav-links li{
        padding: 10px;
        color: var(--secondary);
        text-align: right;
        display: block;
    }
    

       #hero .text {
    width: 100%;
    align-items: center;
    text-align: center;
    }
        #hero img {
            display: none;
    }
    #vision {
        flex-direction: column-reverse;
        gap: 50px;
    }
    #vision .text {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    #mission {
        flex-direction: column;
        gap: 50px;
    }
    #mission .text {
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .video-container .youtube-link {
        height: 300px;
    }
    .comment-image {
        height: 400px;
        width: 300px;
        border: 5px solid #e91e63;
    }
    .gallery-text{
        width: 90%;
    }

    .subscribe-container{
        width: 500px;
    }
    .subscribe-container img {
    right: -18%;
}




    /* SLIDE MENU WHEN HAMBURGER IS CLICKED */

    #toggle:checked ~ #hamburger-nav-links{
        transform: translateY(1%);
    }
    
    /* FOOTER */

    footer .container{
    width: 100%;
}
}  



/*-----MOBILE -----*/
/* ===== 320px – 480px PORTRAIT ===== */
/*-----MOBILE -----*/
/* ===== 320px – 480px PORTRAIT ===== */
/*-----MOBILE -----*/
/* ===== 320px – 480px PORTRAIT ===== */
/*-----MOBILE -----*/
/* ===== 320px – 480px PORTRAIT ===== */
@media screen and (max-width: 480px) {

    body {
        
        max-width: 480px;!important
        overflow: hidden;
    }
    

    h1 { font-size: 22px; }
    h2 { font-size: 16px; }
    p  { font-size: 13px; }

    /*---floating buttons---*/
    
   

    .nav {
        padding: 10px 15px;
    }

    .nav #hamburger-nav-links {
        top: 80px;
        width: 100%;
    }

    /* HERO */
    #hero {
        padding: 20px 15px;
        
    }

    #hero .text {
        width: 100%;
        gap: 15px;
    }

    #hero button {
        width: 160px;
        padding: 10px;
    }

    /* VISION & MISSION */
    #vision,
    #mission {
        width: 100%;
        flex-direction: column;
        padding: 0 15px;
        gap: 30px;
    }

    #vision .image {
        width: 80%;
        height: 400px;
    }
    #mission .image-container {
        width: 300px;
        height: 300px;
    }

    #vision .img2 {
        display: none; /* remove floating circle on small screens */
    }

    /* BLOG */
    .blog-event-container{
        width: 90%;
        margin:10px auto;
    }
    .blog-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .event-card {
        width: 100%;
        flex-direction: column;
        gap: 10px;
    }

    /* VIDEO */
    #video-container{
        padding: 25px 10px;
    }
    .video-container{
        padding: 10px;
    }

    .video-container .youtube-link {
        height: 200px;
    }

    /* COMMENT */
    #comment .comment {
        flex-direction: column;
        padding: 20px;
        gap: 20px;
    }

    .comment-image {
        width: 100%;
        height: 250px;
    }

    .comment-text {
        max-width: 100%;
        text-align: center;
    }
    #arrow{
        width: 100%;
        margin: 10% 0;
    }

    /* GALLERY 
    .gallery-images {
        flex-wrap: wrap;
        justify-content: center;
    }  */
   
    @media (max-width: 800px) {

    /* Stop animation */
    .gallery-images {
        animation: none;
        width: 100%;
        margin: 5px;
        flex-wrap: wrap;       /* allow wrapping */
        justify-content: center;
    }

    /* Remove forced long widths */
    .gallery-images img,
    .gallery-images img.long {
        width: calc(50% - 10px);   /* 2 per row accounting for gap */
        height: auto;
    }

    /* Remove fade overlays on mobile */
    .gallery-wrapper::before,
    .gallery-wrapper::after {
        display: none;
    }
}

    /* VOLUNTEERS */
   
    .volunteers-profile {
        flex-direction: column;
        align-items: center;
        
    }

    .desktop-thq-frame29-elm4 {
        width: 100%;
        height: auto;
    }

    /* SUBSCRIBE */
    #subscribe{
        padding: 50px 0 0 0;
    }
    
    .subscribe-container {
        width: 95%;
        padding: 20px;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input,
    .newsletter-form button {
        width: 100%;
    }

    .subscribe-container img {
        display: inline; /* hide floating image */
        transform: rotate(-90deg);
        right: 50%;
        top: -58%;
    }

    /* FOOTER */
    footer .container{
        padding: 10px;
    }
    footer .section2 {
        flex-direction: ;
        gap: 20px;
    }
    footer .gallery{
        flex: 1;
    }
    footer .gallery-images{
        width: 350px;
        justify-content: flex-start;
    }


}