@media screen and (max-width: 480px) {
    .hero, .sub-hero {  
        height: unset;
    } 
    
    .hero header, .sub-hero header {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto;
        padding: 1rem 4vw;
        position: relative;
    }
    
    .hero header .logo, .sub-hero header .logo {
        grid-column: 1; 
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    
    .hero header nav, .sub-hero header nav {
        gap: 15px;
        font-size: 0.9rem;
        grid-column: 1 / span 2;
        grid-row: 2;
        justify-content: flex-start;
        margin-top: 1rem;
        padding-top: 1rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0.5rem;
    }
    
    .hero header .cta, .sub-hero header .cta {
        grid-column: 2;
        justify-content: flex-end;
    }

    
    .hero header .cta i, .sub-hero header .cta i {
        width: 45px;
        height: 45px;
    }
    
    main {
        flex-direction: column;
        padding: 4rem 5vw;
        gap: 3rem;
        min-height: unset;
        position: relative;
    }
    
    main .hero-text {
        text-align: center;
        order: 2;
    }
    
    main .hero-text h1 {
        font-size: 8vw;
        line-height: 8.5vw;
    }
    
    main .hero-text h1 span {
        font-size: 9vw;
    }
    
    main .hero-text p {
        font-size: 0.95rem;
    }
    
    main .hero-image {
        order: 1;
        justify-content: center;
        flex-wrap: wrap;
        gap: 20px;
    }
    
    main .hero-image img {
        width: 120px;
        height: 200px;  
    }
    
    main .hero-image img:hover {
        transform: scale(1.1) rotate(10deg);
    }
    
    .bible-verse-widget { 
        position: relative;
        margin: unset;
        height: unset;
        padding: 3vh 5vw;
        border-radius: 0 0;
    }

    .bible-verse-widget::after{ 
        top: -13%; 
    } 
    
    .bible-verse-widget h3 {
        font-size: .8rem;
    }
    
    .bible-verse-widget #verse-text {
        width: 100%;
        font-size: 60px;
        line-height: 1.8rem;
        margin-block: 1rem;
    }
    
    .bible-verse-widget .cta {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }
    
    .bible-verse-widget .cta #new-verse-btn,
    .bible-verse-widget .cta #share-verse-btn {
        width: 100%;
        text-align: center;
        padding: 1rem;
    }

    .board{ 
        padding: 3vh 5vw; 
        gap: 6vh;
    }

    .mission, .vision{
        width: 100%; 
        display: flex; 
        flex-direction: column;
        align-items: stretch;
        justify-content: center;  
        height: unset;
        gap: 20px;
    } 

    .mission h1, .vision h1{
        padding: 4rem 2rem;
        font-size: 2.5rem;
    }

    .mission .text-content, .vision .text-content{
        background-position: top;
        padding-top: 35vh;
    }

    .mission .text-content p, .vision .text-content p{
        width: 100%;
        margin-left: unset;
    }
    
    .vision .text-content{
        background-size: 100% 40%;
        background-clip: border-box;
        background-position: -30% top;
    }

    .team {
        padding: 4rem 5vw;
        height: unset;
    }

    .team .team-cards {
        grid-template-columns: 1fr; 
        justify-content: center;
    }

    .team .team-cards .team-card{
        height: 450px;
    }

    .team .team-cards .team-card:hover img{
        transform: scale(1.05) rotate(0deg);
    }

    .getintouch {
        padding: 4rem 4vw; 
        flex-direction: column;
        height: unset;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: top;
        gap: 2rem;
    }

    .getintouch .text .header{
        font-weight: 600;
    }

    .getintouch .text h3{
        font-size: 2rem;
        line-height: 2.2rem;
        margin-bottom: 2rem;
        width: 90%;
    }

    .getintouch .text button{
        display: none;
    }

    .getintouch .text .bottom{
        position: relative;
        flex-direction: column;
    }

    .getintouch .text .bottom .card:not(:first-of-type){
        border-left: none;
        padding-left: 0;
    }

    .getintouch .contact-form{
        height: unset;
        margin-left: 0;
        padding: 1rem;
    }

    .getintouch .contact-form .form-control{
        flex-direction: column;
    }

    .contact-form button{
        width: 80%;
    }

    .subscribe{
        padding: 4rem 5vw;
        height: unset;
        min-height: unset;
        position: relative;
        flex-direction: column;
        gap: 1rem;
    }

    .subscribe h1{
        padding: 0 1rem;
        font-size: 2.5rem;
        line-height: 2rem;
    }

    .subscribe form{
        padding: 0 1rem;
    }

    .subscribe form .form-control{
        width: 100%;
    } 

    .subscribe form .form-control button{
        background-color: transparent;
    }

    .subscribe form .form-control button span{
        display: none;
    }

    .subscribe form .socials{
        justify-content: center;
    }
    
    .footer .footer-head {
        grid-template-columns: 1fr;
        gap: 3rem;
        margin: 2rem 5vw;
        padding-block: 2rem;
    }
    
    .footer .footer-head .logo a {
        width: 50% !important;
    }
    
    .footer .gradient {
        width: 100%;
        height: 40%;
        top: 30%;
        right: 0;
        filter: blur(40px);
    } 
    
    .footer .title {
        font-size: 1.4rem;
    }
    
    .footer nav {
        font-size: 0.95rem;
    }
    
    .footer .footer-head .text p {
        font-size: 0.95rem;
        line-height: 26px;
    }
    .footer footer{
        padding: 1vh 5vw;
    }

    .sub-hero{ 
        background-size: cover;
        background-position: top;
        width: 100%;
        height: unset; 
    }

    .sub-hero main{
        padding: 1rem 5vw;
    }

    .sub-hero main .hero-text{
        text-align: left;
    }

    .sub-hero main .hero-text p{
        width: 50%;
    }

    .sub-hero.donate{ 
        background-size: contain;
        background-position: 0 0 !important;
        height: unset !important;
    }
}



/* Improve touch targets for mobile */
@media screen and (max-width: 768px) {
    .hero header nav a {
        padding: 8px 12px;
        display: inline-block;
    }
    
    main .hero-text button {
        padding: 1rem 2rem;
        font-size: 1rem;
    }
    
    .footer nav a {
        padding: 5px 0;
    }
}