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

@media (max-width: 1024px) {
	.hero-wrapper {
		flex-direction: column;
		min-height: auto;
	}
	
	.hero-content {
		width: 100%;
		padding: 40px 0;
		order: 2;
        margin: auto;
		position: relative;
        max-width: 100%;
        background-color: #F5F5F0;
	}

    .hero-inner {
        width: 90%;
        max-width: 675px;
        margin: 0 auto;
    }
	
	.hero-image {
        width: 100%;
        min-height: 200px;
        order: 1;
        max-height: 450px;
	}
	
	.hero-image::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 75px;
		background: linear-gradient(180deg, rgba(245, 245, 240, 0.00) 0%, #F5F5F0 100%);
		z-index: 1;
	}
	
	.hero-image {
		width: 100%;
		min-height: 400px;
		order: 1;
	}
	
	.hero-image img {
		position: relative;
        max-height: 450px;
	}
	
	.gradient-fill {
		display: none;
	}
}


@media screen and (max-width: 1000px) {
    .banner-image {
        min-height: 300px;
    }
    .footer-bottom {
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
    .footer-address {
        order: 2;
        text-align: center;
    }
    .footer-links {
        text-align: center;
        order: 1;
    }
    .disclaimer {
        order: 3;
    }
    footer .main-nav {
        justify-self: flex-end;
        margin-left: auto;
        margin-right: 15px;
    }
}

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

@media screen and (max-width: 850px) {
    .tk-donation-buttons .donate-btn {
        width: 47%;
    }
}

@media screen and (max-width: 800px) {
    #takeover {
        height: auto;
    }
    #takeover .inner {
        flex-direction: column-reverse;
        justify-content: flex-end;
        height: 100%
    }
    .takeoverright {
        width: 90%;
        max-width: 500px;
        margin-left: -5%;
        margin-top: -19px;
    }
    .takeoverleft {
        width: 90%;
        max-width: 500px;
    }
    .left-content {
        padding: 20px;
    }
    #takeover .inner {
        padding: 0px 0;
    }
    #home-link {
        margin: 10px auto;
    }
    .tk-donation-buttons .donate-btn {
        width: 31%;
        padding: 10px 5px;
    }
    .left-content h2 {
        font-size: 27px;
        margin-bottom: 15px;
    }
    .tk-logo-container {
        width: 80px;
    }
}

@media (max-width: 768px) {
	.hero-wrapper h1 {
		font-size: 36px;
		letter-spacing: -1px;
	}
	
	.hero-image {
        min-height: unset;
        height: auto;
	}

	.meet-section {
		flex-direction: column;
		min-height: auto;
	}
	
	.meet-section .image {
		width: 100%;
		height: 300px;
        min-height: auto;
	}
	
	.meet-section .text {
		width: 100%;
		margin-left: 0;
		padding: 40px 20px;
	}
	
	.meet-section .text .title {
		font-size: 28px;
	}
	
	/* Get involved responsive adjustments */
	.meet-section.get-involved .image {
		width: 100%;
		min-height: 300px;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
        padding: 0;
        height: auto;
	}
	
	.meet-section.get-involved .text {
		width: 100%;
		margin-left: 0;
		padding: 30px 20px;
        margin-top: 10px;
	}
	
	.meet-section.get-involved .text form .form-row {
		flex-direction: column;
		gap: 0;
	}
	
	.meet-section.get-involved .text form .form-row input {
		width: 100%;
	}

    .container {
        display: block;
    }
    .main-header .main-nav {
        display: none;
    }

    .off-white-box.priorities,
    .priorities-wrapper.off-white-box .off-white-box.priorities.fliped {
        flex-direction: column;
    }

    .off-white-box.priorities .image-wrap,
    .priorities-wrapper.off-white-box .off-white-box.priorities.fliped .image-wrap {
        width: 100%;
    }

    .off-white-box.priorities .text-wrap,
    .priorities-wrapper.off-white-box .off-white-box.priorities.fliped .text-wrap {
        width: 100%;
    }
    .priorities-wrapper.off-white-box .off-white-box.priorities.fliped .text-wrap .title {
        font-size: 24px;
    }
    .off-white-box.priorities.fliped .image-wrap img, 
    .off-white-box.priorities.blue.fliped .image-wrap img {
        position: relative;
    }
    .priorities-wrapper.off-white-box .off-white-box.priorities.fliped .text-wrap {
        padding: 0;
    }
    .footer-top {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    footer .main-nav {
        justify-self: center;
        margin-left: auto;
        margin-right: auto;
    } 

    .endorsement-item {
        width: calc(33.3% - 15px);
    }
}

@media screen and (max-width: 700px) {
    .photo-wrap {
        flex-direction: column;
        margin-top: 15px;
    }
    .photo-wrap img {
        width: 100%;
    }
    .banner-image {
        min-height: 200px;
        margin-bottom: 15px;
    }
    .prefooter .donate-btn {
        width: 48.5%;
    }
    .prefooter .donate-btn.other {
        width: 100%;
    }
    .prefooter .donate-buttons-wrapper {
        flex-wrap: wrap;
        justify-content: space-between;
        gap: 0;
    }
    .prefooter .donate-btn {
        margin-bottom: 10px;
    }
    footer a.donate {
        margin-top: 10px;
    }
    .footer-logo {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 550px) {
    .endorsement-item {
        width: calc(50.7% - 15px);
    }

}

@media screen and (max-width: 500px) {
    footer .main-nav {
        flex-direction: column;
        align-items: center;
        gap: 15px;
        margin-left: auto;
        margin-right: auto;
        flex-direction: column;
    }
    .main-nav ul li {
        margin: 0;
    }
}

@media screen and (max-width: 450px) {
    .meet-section.get-involved .image {
        display: flex;
        flex-wrap: wrap;
        gap: 2%;
        height: auto;
    }
    
    .meet-section.get-involved .image img {
        height: auto;
        aspect-ratio: 1/1;
        object-fit: cover;
        margin-bottom: 10px;
    }
    
    .meet-section.get-involved .image img:nth-child(1),
    .meet-section.get-involved .image img:nth-child(2) {
        width: 49%;
        margin-bottom: 10px;
    }
    
    .meet-section.get-involved .image img:nth-child(3) {
        width: 100%;
        margin-bottom: 0;
    }
    .endorsement-item {
        width: 100%;
    }
    .left-content {
        padding: 10px;
    }
    .takeoverleft,
    .takeoverright {
        width: 95%;
    }
}

@media screen and (max-width: 400px) {
    .tk-donation-buttons .donate-btn {
        font-size: 12px;
    }
}