/*!
Theme Name: gow Child theme
Template: gow
Description: This is a Child theme for gow WordPress theme.
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: gow-child
*/

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');


:root {
	--pifoxen-primary: #BB9043 !important;
    --pifoxen-primary-rgb: 187, 144, 67 !important;
	--pifoxen-secondary: #446052 !important;
	--pifoxen-primary-rgb: 68, 96, 82 !important;
    --pifoxen-base: #153827 !important;
    --pifoxen-base-rgb: 21, 56, 39 !important;
	--pifoxen-black: #313234 !important;
	--pifoxen-black-rgb: 49, 50, 52 !important;
	--pifoxen-extra-two: #f7f3e9 !important;
    --pifoxen-extra-two-rgb: 247, 243, 233 !important;
	--pifoxen-extra: #705628 !important;
    --pifoxen-extra-rgb: 112, 86, 40 !important;
	--pifoxen-gray: #7e7e80 !important;
	--pifoxen-gray-rgb: 126, 126, 128 !important;
    --pifoxen-font: "Inter", sans-serif;
    --pifoxen-font-two: "Ubuntu", sans-serif;
}

body, button, input, select, optgroup, textarea {
	
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}

p {
    margin-bottom: 1.1em;
	line-height: normal;
}

.thm-btn:hover::before {
    height: 500%;
}

.thm-btn .elementor-button-content-wrapper {
	align-items: center;
}

.thm-btn .elementor-button-content-wrapper .elementor-button-icon svg {
	height: auto !important;
	width: 1.3em !important;
}

.donate-btn:hover {
	background-color: var(--pifoxen-primary) !important;
}

.home .header-main {
	position: absolute;
	width: 100%;
}

.main-menu-wrapper {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

.main-menu-wrapper__logo {
	margin-right: 0px;
}

.main-menu-wrapper__right {
	padding: 32.5px 0;
}

.main-menu-wrapper__right .main-menu-wrapper__search-cat {
	margin-right: 20px;
}

.main-menu-wrapper__main-menu {
	width: auto;
    margin-left: auto;
    margin-right: auto;
}

.main-menu .main-menu__list > li, .stricky-header .main-menu__list > li {
	padding-top: 37px;
    padding-bottom: 37px;
}

.section-title {
	margin-bottom: 30px;
}

.section-title-left, .section-title-center {
	position: relative;
}

.section-title-left::before,
.section-title-center::before {
	content: "";
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 84px;
	height: 4px;
	background-color: var(--e-global-color-primary);
}

.section-title-center::before {
	left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.main-slider h2, .main-slider p, .main-slider .thm-btn {
	opacity: 1 !important;
	visibility: visible !important;
}

a.sr7-layer {
	background-color: var(--pifoxen-primary) !important;
	border: var(--pifoxen-primary) !important;
}

a.sr7-layer:hover {
	background-color: #C9A669 !important;
	border: #C9A669 !important;
}

#SR7_2_1-9-6, #SR7_2_1-10-6,  {
	color: var(--pifoxen-primary) !important;
}

.we-use, .fundraishing, .help-them, .blog-page, .blog-sidebar, .blog-details {
	padding: 100px 0px 100px 0px;
}

.blog-pagination {
	padding-top: 0px;
}

.we-use__title {
	font-size: 50px;
	line-height: 55px;
}

.welcome-one, .two-boxes, .events {
	padding-bottom: 0px !important;
}

.blog-one, .testimonial-two {
    padding: 0px 0px;
	margin-top: 0px;
}

.testimonial-two {
	background-color: transparent;
}

.blog-one:before {
	height: 0%;
	content: none;
}

.about-one {
	padding-top: 0px;
	padding-bottom: 0px;
}

.about-one .container .row {
	align-items: center;
}

.about-one__img img {
	border-radius: 15px !important;
}

.about-one__points li + li {
	margin-left: 40px;
}

.about-one__text {
	margin-bottom: 0px;
	padding-bottom: 0px;
}

.events__content {
	padding: 35px 40px 35px;
}

.contact-info__title {
	margin-bottom: 2px !important;
}

.contact-info__single-3 {
	padding: 43px 60px 43px;
}

.comment-form__input-box {
	margin-bottom: 20px;
}

.trust-box-items .trust-box-item {
	text-align: center;
}

.trust-box-items .trust-box-item h4 {
	margin-bottom: 7px;
	color: var(--pifoxen-base);
}

.trust-box-items .trust-box-item h5 {
	margin-bottom: 7px;
	font-weight: 700;
}

.trust-box-items .trust-box-item h5 small {
	font-weight: 500;
}

.trust-box-items .trust-box-item div {
	margin-bottom: 7px;
}

.trust-box-items .trust-box-item div span {
	border-radius: 30px;
	background-color: var(--pifoxen-base);
	padding: 1px 15px;
	color: var(--pifoxen-extra-two);
	display: inline-block;
}

.trust-box-items .trust-box-item p {
	margin-bottom: 0px;
	line-height: 1.4rem;
}

.givewp-donation-form {
	padding: 0px !important;
}

.givewp-donation-form__steps {
	max-width: 100% !important;
	width: 100% !important;
}

.help-us-open .fundraishing__inner {
	display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.help-us-open .fundraishing__title {
	order: 0;
    width: 100%;
	margin-top: 0px;
	margin-bottom: 28px;
}

.help-us-open .fundraishing__sub-title {
	width: 100%;
    order: 1;
	margin-bottom: 28px;
}

.help-us-open .fundraishing__btn-box {
	order: 2;
}

.flip-title-text .elementor-icon-box-content {
	display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center;
}

.flip-title-text .elementor-icon-box-content .elementor-icon-box-title {
	order: 1;
    width: 100%;
	margin-top: 0px;
	margin-bottom: 0px !important;
}

.elementor-icon-box-description {
	width: 100%;
    order: 0;
	margin-bottom: 7px !important;
}

.help-them__single {
	height: stretch;
	padding-bottom: 20px !important;
}

.help-them__title,
.blog-one__title {
	line-height: 1.1em !important;
	margin-top: 0px;
    margin-bottom: 12px;
}

.blog-one__text {
	line-height: normal !important;
}

.blog-one__single {
	display: grid;
    /* height: stretch; */
	border: 1px solid var(--pifoxen-bdr-color, #e8e5e0);
	border-radius: 8px;
	height: 95%;
	 background-color: #ffffff;
	 box-shadow: 0px 10px 60px 0px rgba(0, 0, 0, 0.05);
}

.blog-one__single .blog-one__content {
	border-radius: 0px;
	border: none;
	background-color: transparent;
	box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.05);
}

.blog-sidebar__img img,
.blog-single__content-img img {
	margin-bottom: 0px;
	border-radius: 0px;
}

.blog-one__date {
	display: none !important;
}

.blog-one__content,
.help-them__single {
	padding: 20px 20px 0;
}

.blog-one__content .blog-one__meta {
	display: none;
}

.blog-one__bottom,
.help-them__bottom {
	padding-top: 15px;
    margin-top: 20px;
    padding-bottom: 15px;
}

.blog-sidebar__date {
	display: none !important;
}

.sidebar .widget.recent-posts-widget-with-thumbnails ul li .rpwwt-post-title,
.sidebar__single.recent-posts-widget-with-thumbnails ul li .rpwwt-post-title {
	line-height: 20px !important;
}

.sidebar .widget, .sidebar__single {
	padding: 2em 2em 2.4em 2em !important;
}

.blog-details__img img {
	width: 100%;
}

.blog-details__meta {
	border-bottom: 1px solid #D4D4D4;
}

.help-them__bottom {
	display: none !important;
}

.help-them__read-more {
	line-height: normal;
}

.donate-now {
	padding: 0px !important;
}

.donation-page-testimonials .testimonial-two .container {
	max-width: 100% !important;
}

.donation-page-testimonials .testimonial-two__carousel.owl-theme .owl-nav {
	position: relative;
	left: 0px;
	bottom: 0px;
}

.testimonial-two__quote {
	width: 47px;
	height: 47px;
	font-size: 20px;
	margin-bottom: 10px;
}

.testimonial-two__content {
	padding: 25px;
}

.header-donation-form .givewp-layouts-multiStepForm {
	padding-top: 0px;
}

.contact-page {
	padding: 2rem 0 2rem;
}

.contact-page .container {
	padding-left: 2rem;
	padding-right: 2rem;
}

.donate-text-highlight strong {
	color: #BB9043;
	font-weight: bold;
}

.donate-text-highlight strong a {
	display: inline-block !important;
    color: #BB9043;
    width: auto !important;
}

.donate-text-highlight strong a:hover {
	text-decoration: underline;
}

/* Footer Style */
.footer-widget__about {
	margin-right: 30px;
}
.footer-widget__about-text {
	font-weight: 700;
	font-size: 28px;
	line-height: 34px;
}
.footer-widget__contact {
	margin-left: 0px;
}
.site-footer__bottom-inner {
	padding: 20px 0;
}
.footer-widget__contact {
	margin-left: 30px;
}

.footer-widget__contact-list li .text p {
	line-height: 24px;
}

.site-footer__social a::before {
	background-color: var(--pifoxen-primary) !important;
}

.donate-btn.footer-donate__btn {
	background-color: var(--pifoxen-primary) !important;
}

/* Mobile Responsive */
@media (max-width: 1199px) {
	.main-menu-wrapper {
		justify-content: space-between;
	}
	.main-menu {
        padding: 0 15px;
    }
	.main-menu-wrapper__right {
        display: flex;
		margin-right: 15px;
		margin-left: auto;
    }
	.donate-btn {
		padding-right: 20px;
		letter-spacing: 0.05em;
	}
	.donate-btn i {
		margin-right: 7px;
	}
	.main-menu-wrapper__right .main-menu-wrapper__search-cat {
		margin-right: 5px;
        padding-right: 28px;
	}
	.main-menu-wrapper__search-cat:before {
		right: 10px;
        left: auto;
	}
	.main-menu-wrapper__main-menu {
		order: 2;
		margin-right: 0px;
		margin-left: 0px;
	}
	.contact-page__social {
		margin-top: 20px;
	}
	.container, .container-lg, .container-md, .container-sm {
        max-width: 100%;
    }
	.page-header {
		padding: 170px 0 170px;
	}
	.page-header__inner h2 {
		font-size: 48px;
	}
	.comment-form__input-box input[type=text], .comment-form__input-box input[type=password], .comment-form__input-box select, .comment-form__input-box input[type=search], .comment-form__input-box input[type=email] {
		height: 54px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.comment-form__input-box textarea {
		padding-left: 20px;
		padding-right: 20px;
	}
	.footer-widget__contact {
		margin-left: 0px;
	}
}

@media (max-width: 991px) {
	.sidebar {
        margin-top: 20px;
    }
	.contact-page__left {
		margin-bottom: 40px;
	}
	.contact-info__single {
		margin-bottom: 20px;
	}
	.page-header {
		padding: 150px 0 150px;
	}
	.page-header__inner h2 {
		font-size: 44px;
	}
}

@media (max-width: 767px) {
	.main-menu .mobile-nav__toggler {
		padding: 32px 0px;
	}
	.main-menu-wrapper__logo {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	.main-menu-wrapper__right {
		padding: 26.5px 0px;
	}
	.mobile-nav__content {
		padding-top: 15px;
    	padding-bottom: 15px;
	}
	.mobile-nav__content .logo-box {
		margin-bottom: 20px;
	}
	.page-header__inner h2 {
		font-size: 40px;
	}
	.about-one__right {
		margin-top: 30px;
	}
	.about-one__right .section-title {
		margin-bottom: 25px;
	}
	.about-one__text {
		padding-top: 25px;
	}
	.we-use, .fundraishing, .help-them, .blog-page, .blog-sidebar, .blog-details {
		padding: 70px 0px 70px 0px;
	}
	.contact-page {
		padding: 1.5rem 0 1.5rem;
	}
	.contact-page .container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
	.contact-info__single {
		padding: 1em 2em 1em;
	}
	.banner-half-gradient::before,
	.banner-half-gradient .elementor-background-overlay {
		background-image: linear-gradient(0deg, #343434 0%, #343434 100%) !important;
		opacity: 0.8 !important;
	}
	.footer-widget__title {
		margin-bottom: 15px;
	}
	.footer-widget__about-text-box {
		padding-bottom: 20px;
	}
	.footer-widget__links {
		margin-bottom: 10px;
        margin-top: 10px;
	}
	.footer-widget__links li {
		line-height: 1.6rem;
	}
	.footer-widget__contact {
		margin-top: 0px;
	}
	.footer-widget__contact-list li {
		padding-bottom: 8px;
    	margin-top: 5px;
	}
}

@media (max-width: 639px) {
	.page-header {
		padding: 100px 0 100px;
	}
	.page-header__inner h2 {
		font-size: 36px;
	}
	.main-menu-wrapper__right .main-menu-wrapper__search-cat {
        margin-right: 0px;
        padding-right: 23px;
    }
	.we-use, .fundraishing, .help-them, .blog-page, .blog-sidebar, .blog-details {
		padding: 50px 0px 50px 0px;
	}
	.help-them__single {
		margin-bottom: 15px;
	}
	.comment-form__input-box input[type=text], .comment-form__input-box input[type=password], .comment-form__input-box select, .comment-form__input-box input[type=search], .comment-form__input-box input[type=email] {
		height: 48px;
		padding-left: 15px;
		padding-right: 15px;
	}
	.comment-form__input-box textarea {
		padding-left: 15px;
		padding-right: 15px;
	}
	.footer-widget__contact-list li {
		padding-bottom: 6px;
    	margin-top: 3px;
	}
	.site-footer__bottom-text {
		font-size: 14px;
		text-align: center;
	}
}
/* ---------------------------------------------------------------------------
 * Footer menu: mark the current page in the theme's gold.
 *
 * The parent theme styles every footer link the same grey
 * (.footer-widget__links-list li a { color: #a8a8a8 }) and never highlights the
 * active item, so visitors get no "you are here" cue in the footer the way they
 * do in the header. WordPress already adds current-menu-item / current_page_item
 * to the right <li>, so this only needs colour.
 *
 * Specificity here is (0,2,2) against the theme's (0,1,2), so it wins without
 * !important. Colour is the theme's own --pifoxen-primary (#bb9043) rather than
 * a hard-coded gold, so it follows any palette change made in the Customizer.
 * ------------------------------------------------------------------------- */
.footer-widget__links-list li.current-menu-item > a,
.footer-widget__links-list li.current_page_item > a,
.footer-widget__links-list li.current-menu-parent > a,
.footer-widget__links-list li.current-menu-ancestor > a,
.footer-widget__links-list li.current-page-ancestor > a {
	color: var(--pifoxen-primary, #bb9043);
}

/* Keep hover readable on the already-gold active item. */
.footer-widget__links-list li.current-menu-item > a:hover,
.footer-widget__links-list li.current_page_item > a:hover {
	color: var(--pifoxen-white, #ffffff);
}

/* ---------------------------------------------------------------------------
 * Footer contact list: align the address row with the email and phone rows.
 *
 * The parent theme gives the email/phone links no line-height, so they inherit
 * body's 34px, while the address paragraph is set to 30px:
 *
 *   .footer-widget__contact-list li .text a { font-size:15px; }        -> 34px
 *   .footer-widget__contact-list li .text p { ...; line-height:30px; } -> 30px
 *
 * Each <li> is display:flex, so the shorter line box shifts the address text
 * against its pin icon while the first two rows line up. Matching the
 * line-height puts all three rows on the same rhythm.
 *
 * align-items:flex-start pins every icon to the first line of its text, which
 * also keeps things tidy if the address wraps to two lines on narrow screens.
 * ------------------------------------------------------------------------- */
.footer-widget__contact-list li {
	align-items: flex-start;
}

.footer-widget__contact-list li .text a,
.footer-widget__contact-list li .text p {
	line-height: 34px;
}

/* A long address should wrap rather than push past the column. */
.footer-widget__contact-list li .text p {
	overflow-wrap: anywhere;
}

/* =========================================================================
   Page header — minimalist
   -------------------------------------------------------------------------
   The parent theme sets padding: 119px 0 118px on .page-header. On a post
   with no header image the .page-header-bg layer renders as a flat grey slab
   nearly 300px tall carrying nothing but the title. Tightened to a compact
   band that still reads as a header, with the theme's own green and gold
   instead of the neutral #343434.
   ========================================================================= */

.page-header {
	padding: 44px 0 44px;
	background-color: var(--pifoxen-base, #153827);
}

/* A quiet gradient gives the band depth when there is no photograph behind it. */
.page-header::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--pifoxen-primary, #bb9043) 0%,
		rgba(187, 144, 67, 0) 60%
	);
	z-index: 16;
}

.page-header-bg {
	opacity: 0.42;
	background-color: var(--pifoxen-base, #153827);
}

.page-header__inner {
	text-align: center;
	max-width: 1140px;
	margin: 0 auto;
	padding: 0 15px;
}

.page-header__inner h2 {
	font-size: clamp(1.7rem, 3.4vw, 2.35rem);
	line-height: 1.2;
	margin-bottom: 8px;
	letter-spacing: -0.01em;
}

/* Breadcrumb, centred under the title. */
.page-header .thm-breadcrumb {
	justify-content: center;
	font-size: 0.86rem;
}

@media (max-width: 767px) {
	.page-header {
		padding: 30px 0 30px;
	}

}

/* =========================================================================
   404 page
   ========================================================================= */

.gow-404 {
	padding: 96px 0 104px;
	background: var(--pifoxen-white, #fff);
}

.gow-404__inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 20px;
	text-align: center;
}

.gow-404__code {
	display: inline-flex;
	align-items: baseline;
	gap: 2px;
	font-size: clamp(4rem, 13vw, 7.5rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.04em;
	color: var(--pifoxen-base, #153827);
	margin: 0 0 6px;
}

.gow-404__code span {
	color: var(--pifoxen-primary, #bb9043);
}

.gow-404__rule {
	width: 56px;
	height: 3px;
	margin: 18px auto 22px;
	background: var(--pifoxen-primary, #bb9043);
	border: 0;
}

.gow-404__title {
	font-size: clamp(1.35rem, 3vw, 1.85rem);
	line-height: 1.3;
	margin: 0 0 10px;
	color: var(--pifoxen-black, #1d2327);
}

.gow-404__text {
	margin: 0 auto 30px;
	max-width: 46ch;
	color: var(--pifoxen-gray, #66717c);
}

.gow-404__search {
	max-width: 420px;
	margin: 0 auto 34px;
}

.gow-404__search form {
	display: flex;
	gap: 8px;
}

.gow-404__search input[type="search"],
.gow-404__search input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 50px;
	padding: 0 16px;
	border: 1px solid #dfe2dd;
	border-radius: 8px;
	background: #fff;
	font-size: 0.95rem;
}

.gow-404__search input:focus {
	outline: none;
	border-color: var(--pifoxen-base, #153827);
	box-shadow: 0 0 0 1px var(--pifoxen-base, #153827);
}

.gow-404__search button {
	height: 50px;
	padding: 0 22px;
	border: 0;
	border-radius: 8px;
	background: var(--pifoxen-base, #153827);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}

.gow-404__search button:hover {
	background: var(--pifoxen-primary, #bb9043);
}

/* Rather than a dead end, offer the pages people actually want. */
.gow-404__links {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

.gow-404__links a {
	display: block;
	padding: 14px 16px;
	border: 1px solid #e4e7e2;
	border-radius: 10px;
	text-decoration: none;
	color: var(--pifoxen-black, #1d2327);
	transition: border-color .15s ease, transform .15s ease;
}

.gow-404__links a:hover,
.gow-404__links a:focus-visible {
	border-color: var(--pifoxen-primary, #bb9043);
	transform: translateY(-1px);
}

.gow-404__links b {
	display: block;
	font-size: 0.97rem;
	margin-bottom: 2px;
}

.gow-404__links span {
	font-size: 0.82rem;
	color: var(--pifoxen-gray, #66717c);
}

@media (prefers-reduced-motion: reduce) {
	.gow-404__links a {
		transition: none;
	}
}

@media (max-width: 575px) {
	.gow-404 {
		padding: 64px 0 72px;
	}

	.gow-404__search form {
		flex-direction: column;
	}

	.gow-404__search button {
		width: 100%;
	}
}

/* Every crumb legible on the dark header, with the theme gold on hover.
   The parent theme only lit .home and .current-item, so an intermediate
   crumb rendered dark-on-dark and looked like an empty gap between slashes. */
.page-header .thm-breadcrumb li,
.page-header .thm-breadcrumb li span,
.page-header .thm-breadcrumb li a,
.page-header .thm-breadcrumb li a span {
	color: var(--pifoxen-white, #fff);
}

.page-header .thm-breadcrumb li a,
.page-header .thm-breadcrumb li a span {
	opacity: 0.88;
	transition: color .15s ease, opacity .15s ease;
}

.page-header .thm-breadcrumb li a:hover,
.page-header .thm-breadcrumb li a:hover span,
.page-header .thm-breadcrumb li a:focus-visible,
.page-header .thm-breadcrumb li a:focus-visible span {
	color: var(--pifoxen-primary, #bb9043);
	opacity: 1;
}

/* The current page is not a link; keep it quieter than the ones that are. */
.page-header .thm-breadcrumb li.current-item,
.page-header .thm-breadcrumb li.current-item span {
	opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
	.page-header .thm-breadcrumb li a,
	.page-header .thm-breadcrumb li a span {
		transition: none;
	}
}

/* =========================================================================
   Header menu — no flicker on click
   -------------------------------------------------------------------------
   The parent theme animates a 2px underline in with
   `transform: scale(0,1) -> scale(1,1)` over 500ms. That animation restarts
   on every page load, so clicking a menu item shows the underline sweeping in
   again on the new page while the old one is still fading — which reads as a
   flicker. The current item's underline is now simply present, with no entry
   animation, and the transition is suppressed during the click itself so
   nothing animates while the browser is navigating away.

   Hover on a non-active item keeps the original animation; only the active
   state and the moment of clicking are changed.
   ========================================================================= */

.main-menu .main-menu__list > li.current-menu-item > a::before,
.main-menu .main-menu__list > li.current_page_item > a::before,
.main-menu .main-menu__list > li.current-menu-ancestor > a::before,
.main-menu .main-menu__list > li.current-menu-parent > a::before,
.stricky-header .main-menu__list > li.current-menu-item > a::before,
.stricky-header .main-menu__list > li.current_page_item > a::before,
.stricky-header .main-menu__list > li.current-menu-ancestor > a::before,
.stricky-header .main-menu__list > li.current-menu-parent > a::before {
	-webkit-transition: none;
	transition: none;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

/* While the link is being clicked, hold the underline still. */
.main-menu .main-menu__list > li > a:active::before,
.stricky-header .main-menu__list > li > a:active::before {
	-webkit-transition: none;
	transition: none;
}

/* The sticky clone fades rather than snapping into place on scroll. */
.stricky-header.stricked-menu {
	transition: opacity .2s ease, transform .2s ease;
}

@media (prefers-reduced-motion: reduce) {
	.main-menu .main-menu__list > li > a::before,
	.stricky-header .main-menu__list > li > a::before,
	.stricky-header.stricked-menu {
		-webkit-transition: none !important;
		transition: none !important;
	}
}

/* =========================================================================
   Blog card hover overlay — clipped to the image
   -------------------------------------------------------------------------
   .blog-one__img > a is absolutely positioned to inset:0 of .blog-one__img.
   That container was taller than the photograph inside it, because the <img>
   renders as an inline element and inline boxes reserve descender space
   beneath the baseline. The grey hover wash therefore spilled past the photo
   onto the white card below it.

   Zeroing the line box and making the image a block element removes the gap,
   so the container is exactly the height of the photograph and the overlay
   lands where it should.
   ========================================================================= */

.blog-one__img {
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}

.blog-one__img img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* Restore text metrics for anything inside the overlay itself. */
.blog-one__img > a {
	line-height: normal;
	font-size: 30px;
	overflow: hidden;
}

/* The same pattern is used by the other card widgets in this theme. */
.blog-two__img,
.blog-three__img,
.portfolio-one__img,
.team-one__img,
.event-one__img {
	line-height: 0;
	font-size: 0;
	overflow: hidden;
}

.blog-two__img img,
.blog-three__img img,
.portfolio-one__img img,
.team-one__img img,
.event-one__img img {
	display: block;
	width: 100%;
	height: auto;
	vertical-align: top;
}

/* =========================================================================
   Header height — tighter, and identical on every page
   -------------------------------------------------------------------------
   The parent theme pads the logo by 39px top / 38px bottom
   (.main-menu-wrapper__logo), which is 77px of empty space wrapped around an
   ~85px logo and makes the white header bar ~162px tall on every page.
   Reduced to 24/23, taking roughly 30px out of the header without touching
   the logo itself.

   The active-menu underline is positioned at top: -42px relative to its link,
   calibrated to the old height. The menu is vertically centred beside the
   logo, so a 30px shorter header raises the links by 15px — the underline is
   moved down by the same 15px so it stays exactly where it was against the
   top edge of the header rather than escaping above it.
   ========================================================================= */

.main-menu-wrapper__logo {
	padding-top: 16px;
	padding-bottom: 16px;
}

@media (max-width: 767px) {
	/* The mobile header uses the toggler for its height; the logo sits flush. */
	.main-menu-wrapper__logo {
		padding-top: 0;
		padding-bottom: 0;
	}
}

/* =========================================================================
   Header widget — remove Elementor's global widget spacing
   -------------------------------------------------------------------------
   The site header is rendered as an Elementor widget, so it picks up
   Elementor's default spacing between stacked widgets:

       .elementor-widget:not(:last-child) {
           margin-block-end: var(--kit-widget-spacing, 20px);
       }

   That put a 20px margin under the header, which is the gap between the
   header and the page content. It only affected desktop: the layout holds two
   header widgets (one hidden on mobile, one hidden on desktop/tablet), and
   only the first is :not(:last-child).

   Specificity matters here. Elementor's rule is (0,2,0) and its stylesheet is
   enqueued AFTER the child theme's, so a matching selector would lose on
   source order. The extra class raises this to (0,3,0) and it wins either way.
   ========================================================================= */

.elementor .elementor-widget-pifoxen-header:not(:last-child),
.elementor .elementor-widget-pifoxen-header-two:not(:last-child),
.elementor-widget-wrap > .elementor-widget-pifoxen-header:not(:last-child) {
	margin-block-end: 0;
	margin-bottom: 0;
}

/* =========================================================================
   Header menu — remove the click flicker
   -------------------------------------------------------------------------
   The parent theme sets `transition: all 500ms ease` on the menu links.
   `all` transitions every animatable property that changes, so clicking a
   link fires a half-second transition on colour, transform and background
   simultaneously — while the browser is already navigating away. The result
   reads as a flash.

   Only the colour ever needs to move, and 200ms is enough for it. The
   underline keeps its own transform transition, defined by the theme.
   ========================================================================= */

.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
	-webkit-transition: color 200ms ease;
	transition: color 200ms ease;
}

/* Nothing animates while the link is actually being clicked. */
.main-menu .main-menu__list > li > a:active,
.stricky-header .main-menu__list > li > a:active {
	-webkit-transition: none;
	transition: none;
}

/* =========================================================================
   Remove the perpetual zoom in/out
   -------------------------------------------------------------------------
   .zoom-fade and .zoominout run `animation-iteration-count: infinite`,
   scaling 0.9 -> 1 -> 0.9 every 5 seconds forever. A constantly pulsing
   element is distracting, keeps the compositor busy, and restarts on every
   page load. The elements stay exactly where they are; only the movement
   stops.
   ========================================================================= */

.zoom-fade,
.zoominout {
	-webkit-animation: none !important;
	animation: none !important;
	-webkit-transform: none !important;
	transform: none !important;
}

/* The same treatment for anyone who has asked their system to reduce motion,
   covering the theme's other infinite decorative loops. */
@media (prefers-reduced-motion: reduce) {
	.zoom-fade,
	.zoominout,
	.float-bob,
	.float-bob-y,
	.rotate-me,
	.rotatescale,
	.banner-animate {
		-webkit-animation: none !important;
		animation: none !important;
	}
}

/* =========================================================================
   Header layout — fluid from 320px to 3200px
   -------------------------------------------------------------------------
   The parent theme lays the header row out with floats and a hard-coded
   width on the menu:

       .main-menu-wrapper            { display: block; }
       .main-menu-wrapper__left      { float: left; }
       .main-menu-wrapper__main-menu { float: left; width: 58%; }
       .main-menu-wrapper__right     { float: right; }

   Three floated blocks whose widths are fixed cannot add up to 100% at every
   viewport. Around 1200px they overflow and the right-hand block — search and
   Donate Now — drops onto its own line, leaving the empty band you saw.

   Flexbox removes the arithmetic: the logo and the right-hand controls take
   the space they need, and the menu absorbs whatever is left. Nothing can
   drop because nothing is allowed to wrap.
   ========================================================================= */

.main-menu-wrapper {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	gap: clamp(12px, 2vw, 40px);
}

.main-menu-wrapper__left {
	float: none;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-width: 0;
}

/* The menu is the flexible element: it takes the remaining room and centres
   itself in it, at any width. `min-width: 0` lets it shrink below its
   content width instead of forcing the row wider. */
.main-menu-wrapper__main-menu {
	float: none;
	width: auto;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
	min-width: 0;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

.main-menu-wrapper__right {
	float: none;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	min-width: 0;
	margin-left: auto;
}

/* Menu item spacing scales with the viewport rather than sitting at a fixed
   55px, which is what pushed the row over the edge on mid-size screens. */
.main-menu .main-menu__list > li + li,
.stricky-header .main-menu__list > li + li {
	margin-left: clamp(14px, 2.4vw, 55px);
}

/* Keep labels on one line; wrapping doubles the header height. */
.main-menu .main-menu__list > li > a,
.stricky-header .main-menu__list > li > a {
	white-space: nowrap;
}

/* --- 1200-1399: tightest desktop range, where the break happened --------- */
@media (min-width: 1200px) and (max-width: 1399px) {
	.main-menu .main-menu__list > li > a,
	.stricky-header .main-menu__list > li > a {
		font-size: 15px;
	}
}

/* --- below 1200: the theme swaps in its toggler, so the list steps aside - */
@media (max-width: 1199px) {
	.main-menu-wrapper__main-menu {
		-ms-flex: 0 1 auto;
		flex: 0 1 auto;
	}
}

/* --- below 768: logo and toggler only, nothing competing for the row ----- */
@media (max-width: 767px) {
	.main-menu-wrapper {
		gap: 10px;
	}

	.main-menu-wrapper__right {
		gap: 8px;
	}
}

/* --- very wide screens: the row stays centred with the site container --- */
@media (min-width: 1920px) {
	.main-menu-wrapper {
		gap: 48px;
	}
}

/* =========================================================================
   Responsive: 320px to 3200px
   -------------------------------------------------------------------------
   Elementor writes each section's padding as fixed pixels into per-page CSS —
   the Scholarships intro, for example, is `padding: 120px 0 100px`. Those
   values are chosen on a desktop canvas and never scale, so on a phone you
   get 120px of empty space above the first line of text.

   Boxed content sections are capped below 1200px so the padding shrinks with
   the viewport. Full-width sections are deliberately excluded: those are the
   banners, headers and footers, whose spacing is part of the design.

   Elementor's per-page rules are (0,3,0) and load after the theme, so these
   need !important to win. That is the one place it is warranted here.
   ========================================================================= */

@media (max-width: 1199px) {
	.elementor-section.elementor-top-section.elementor-section-boxed {
		padding-top: clamp(28px, 6vw, 72px) !important;
		padding-bottom: clamp(28px, 6vw, 72px) !important;
	}
}

@media (max-width: 767px) {
	.elementor-section.elementor-top-section.elementor-section-boxed {
		padding-top: clamp(22px, 5vw, 44px) !important;
		padding-bottom: clamp(22px, 5vw, 44px) !important;
	}
}

/* --- Nothing may push the page sideways -------------------------------- */

html,
body {
	max-width: 100%;
	overflow-x: hidden;
}

/* Media never exceeds its container, whatever width is declared on it. */
img,
video,
iframe,
embed,
object,
svg:not(.gowd-flag):not(.gowd-i) {
	max-width: 100%;
}

img,
video {
	height: auto;
}

/* A long word or URL breaks instead of widening the page. Headings are the
   usual offender at 320px, where a single long word can be wider than the
   screen. */
h1, h2, h3, h4, h5, h6,
p, li, dd, dt, figcaption, blockquote {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Wide content scrolls inside itself rather than stretching the layout. */
.entry-content table,
.elementor-widget-container table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

pre,
code {
	overflow-x: auto;
	max-width: 100%;
}

/* --- Small screens ------------------------------------------------------ */

@media (max-width: 575px) {
	/* Elementor columns stack here; the residual side padding doubles up. */
	.elementor-section.elementor-section-boxed > .elementor-container {
		padding-left: 4px;
		padding-right: 4px;
	}

	/* Buttons go full width rather than sitting awkwardly half-wide. */
	.elementor-widget-button .elementor-button,
	.thm-btn {
		white-space: normal;
	}
}

@media (max-width: 400px) {
	/* At 320-400px the container padding is most of the screen. */
	.container,
	.elementor-section.elementor-section-boxed > .elementor-container {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* --- Very wide screens -------------------------------------------------- */
/* Above ~1920px an unbounded container makes lines far too long to read.
   Elementor's own boxed container caps at its content width; this keeps the
   theme's own .container in step on 2K and 4K displays. */
@media (min-width: 1920px) {
	.container {
		max-width: 1600px;
	}
}

/* =========================================================================
   Section spacing — fluid instead of a fixed 120px
   -------------------------------------------------------------------------
   The parent theme gives nearly every content section `padding: 120px 0`,
   in fixed pixels. On a desktop that is generous; at 375px it is a third of
   the screen height of empty space before anything is read, and it never
   changes. That is the white space showing up on every page.

   These are the section classes actually used on this site, retuned to scale
   with the viewport: about 90px on a wide screen, down to 40px on a phone.

   Deliberately left alone:
     .quality-work   its 268px bottom padding makes room for an element that
                     overlaps the next section; changing it breaks the overlap
     .page-header    already tuned separately to 44px
     .site-footer__top  footer rhythm is its own thing
   ========================================================================= */

.about-one,
.about-page,
.blog-details,
.blog-page,
.blog-sidebar,
.contact-page,
.cta-one,
.fundraishing,
.help-them,
.helping-hands,
.volunteers-one,
.we-believe,
.we-change,
.we-use,
.causes-one,
.blog-two,
.events-page,
.event-details,
.donations-page,
.donations-list,
.donations-details {
	padding-top: clamp(40px, 6vw, 90px);
	padding-bottom: clamp(40px, 6vw, 90px);
}

/* Sections the theme intentionally closed up at the bottom (90px rather than
   120px) keep that lighter foot. */
.causes-one,
.volunteers-one,
.help-them,
.we-believe,
.blog-two,
.events-page,
.donations-page {
	padding-bottom: clamp(32px, 4.5vw, 70px);
}

/* The brand strip was only ever a thin band. */
.brand-one,
.brand-two__inner {
	padding-top: clamp(30px, 4vw, 70px);
	padding-bottom: clamp(30px, 4vw, 70px);
}

/* The contact form card pulls up over the banner above it. Keep that overlap
   proportional rather than a flat -115px, which overshoots on small screens. */
.volunteers-and-donating__content {
	padding-top: clamp(36px, 5vw, 80px);
	padding-bottom: clamp(36px, 5vw, 80px);
}

/* =========================================================================
   Blogs page — heading no longer sits under the cards
   -------------------------------------------------------------------------
   The "Blogs" heading widget carries a negative bottom margin set in
   Elementor:

       margin: 2em 0 calc(var(--kit-widget-spacing, 0px) + -5em) 0

   -5em is roughly 80px of upward pull on whatever follows. It was invisible
   only because .blog-page carried 120px of top padding that absorbed it. Now
   that section padding scales with the viewport, the pull wins on narrower
   screens and the post grid rides up over the heading.

   The negative margin is the bug, not the padding: a heading should not drag
   the next block on top of itself. Neutralised here rather than in the page
   data so it is easy to see and easy to undo.
   ========================================================================= */

.elementor-18 .elementor-element.elementor-element-4214ecc {
	margin-bottom: 0 !important;
}

/* Give the grid a little air below the heading at every width. */
.elementor-18 .elementor-widget-pifoxen-blog {
	margin-top: clamp(8px, 1.5vw, 20px);
}

/* =========================================================================
   Small screens — stop desktop-tuned layout rules from colliding
   -------------------------------------------------------------------------
   Two patterns run through the Elementor pages on this site, both fine on a
   desktop canvas and both destructive on a phone:

   1. Flexbox containers (.e-con.e-flex) laid out as rows with no mobile
      direction set. Three icon boxes that sit happily side by side at 1440px
      are still trying to at 320px, so they overflow and clip.

   2. Negative margins used to nudge blocks together — -7px, -18px, -2em and
      so on, declared at ALL widths rather than desktop only. Once the layout
      stacks, those pulls land on top of the block above and text overlaps.

   Below the mobile breakpoint the containers stack and the upward pulls are
   released. Widget-level layouts (icon beside its own label) are untouched,
   because only container elements are matched.
   ========================================================================= */

@media (max-width: 767px) {
	/* --- containers stack instead of squeezing --- */
	.e-con.e-flex,
	.e-con-inner {
		--flex-direction: column;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.e-con > .e-con,
	.e-con-inner > .e-con {
		width: 100%;
		max-width: 100%;
		--width: 100%;
	}

	/* --- release upward pulls so nothing lands on the block above ---
	   Scoped to containers and columns only. It previously included
	   .elementor-widget, which also stripped legitimate positive margins —
	   that is what pushed the Blogs page title up against the header. */
	.elementor .e-con,
	.elementor .elementor-column {
		margin-top: 0 !important;
	}

	/* Widgets keep their spacing; only an upward pull is cancelled, and only
	   where one is actually set. */
	.elementor .elementor-widget[style*="margin-top:-"],
	.elementor .elementor-widget[style*="margin-top: -"] {
		margin-top: 0 !important;
	}

	/* Elementor writes its spacing into this variable; a negative value here
	   is what closes the gap between stacked widgets. */
	.elementor-widget:not(:last-child) {
		margin-block-end: 12px;
	}

	/* Columns from the older grid stack too. */
	.elementor-column,
	.elementor-col-25,
	.elementor-col-33,
	.elementor-col-50 {
		width: 100% !important;
	}
}

/* Tablet: containers may still sit in a row, but never narrower than is
   readable — they wrap onto the next line instead. */
@media (min-width: 768px) and (max-width: 1024px) {
	.e-con.e-flex {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}

/* Nothing may be wider than its container on a small screen.
   The Donate hero has two blocks set to `width: 103.6%` — someone nudged a
   text block past its container on a desktop canvas. At 1440px the extra 3.6%
   is invisible; at 320px it pushes the line off the screen and the text is
   clipped mid-word. Capping at 100% below the tablet breakpoint fixes that
   class of overflow wherever it occurs, not just here. */
@media (max-width: 1024px) {
	.elementor [class*="elementor-element-"] {
		max-width: 100% !important;
	}

	.elementor .e-con,
	.elementor .e-con-inner {
		--width: 100%;
	}
}

/* =========================================================================
   Card hover overlay — exactly the image, at every width
   -------------------------------------------------------------------------
   The overlay (.blog-one__img > a) is absolutely positioned to inset:0 of its
   container, so it is only ever as correct as that container's height.
   Measured at 1920px the container was 361px tall while the image inside it
   was 349px — no padding, no border, no min-height, and the image the only
   in-flow child. The container was being stretched by its parent, and the
   12px of stretch is where the grey wash spilled past the photo.

   Laying the container out as a single-cell grid makes it size to the image
   precisely instead of inheriting a stretched height, so the overlay lands on
   the photograph and nowhere else. Holds at every viewport because it is
   derived from the image rather than from a fixed number.
   ========================================================================= */

.blog-one__img,
.blog-two__img,
.blog-three__img,
.portfolio-one__img,
.event-one__img {
	display: grid;
	grid-template-columns: 1fr;
	align-content: start;
	align-items: start;
}

.blog-one__img > img,
.blog-two__img > img,
.blog-three__img > img,
.portfolio-one__img > img,
.event-one__img > img {
	grid-area: 1 / 1;
	display: block;
	width: 100%;
	height: auto;
}

/* The overlay shares the image's grid cell, so it can never be taller. */
.blog-one__img > a,
.blog-two__img > a,
.blog-three__img > a,
.portfolio-one__img > a,
.event-one__img > a {
	grid-area: 1 / 1;
	align-self: stretch;
	justify-self: stretch;
}

/* The image container is a child of a stretching parent (the card is laid out
   as a flex/grid column with align-items: stretch), which is why it measured
   12px taller than the photo it holds. Opting out of that stretch makes its
   height come from the image alone. */
.blog-one__img,
.blog-two__img,
.blog-three__img,
.portfolio-one__img,
.event-one__img {
	align-self: start;
	justify-self: stretch;
}


/* Scroll animations must never leave content stranded.
   The theme animates blocks in with WOW.js (.wow.slideInLeft and friends),
   which start life translated off-screen and are moved into place when
   scrolled into view. If a visitor has asked for reduced motion, the
   animation is suppressed — and without this the starting transform would
   stay applied, leaving that content permanently off the side of the page. */
@media (prefers-reduced-motion: reduce) {
	.wow,
	.animated {
		visibility: visible !important;
		-webkit-animation: none !important;
		animation: none !important;
		-webkit-transform: none !important;
		transform: none !important;
		opacity: 1 !important;
	}
}

/* =========================================================================
   WOW.js scroll animations — never leave content off-screen
   -------------------------------------------------------------------------
   The theme reveals blocks with WOW.js using animate.css classes. The
   horizontal ones (slideInLeft, fadeInRight and friends) start the element
   translated fully outside the viewport and slide it back as you scroll.

   That is fine on a desktop, but on a narrow screen the starting offset is
   most of the screen width, and anything that interrupts the animation —
   a missed IntersectionObserver, an element already in view at load, a slow
   frame — leaves the block stranded to one side. Measured on Student Stories
   at 320px it was sitting 12px off the left edge after the animation had
   supposedly finished.

   Below 992px those become a plain fade: same reveal, no displacement, so
   there is no position for content to get stuck in. Vertical reveals are
   left alone — they cannot push anything sideways.
   ========================================================================= */

@media (max-width: 991px) {
	.wow.slideInLeft,
	.wow.slideInRight,
	.wow.fadeInLeft,
	.wow.fadeInRight,
	.wow.fadeInLeftBig,
	.wow.fadeInRightBig,
	.animated.slideInLeft,
	.animated.slideInRight,
	.animated.fadeInLeft,
	.animated.fadeInRight {
		-webkit-animation-name: fadeIn !important;
		animation-name: fadeIn !important;
		-webkit-transform: none !important;
		transform: none !important;
	}
}

/* Whatever the animation, the finished state is always in place and visible.
   animate.css leaves the last keyframe applied via fill-mode; pinning the
   resting transform means a half-finished animation cannot strand a block. */
.wow.animated,
.animated.animated {
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}

/* =========================================================================
   "Points" lists — stack instead of colliding
   -------------------------------------------------------------------------
   .about-one__points-content is a flex row with no wrapping, so its items sit
   side by side at every width. Measured on Student Stories at 768px, two
   items were each 315px wide starting at 84px and 370px — a 29px overlap,
   with one paragraph printed over the other.

   Allowing the row to wrap and giving each item the full width below 992px
   makes them stack, which is what the design already does for every other
   two-column block at that size.
   ========================================================================= */

@media (max-width: 991px) {
	.about-one__points,
	.about-one__points-content {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}

	.about-one__points-content > li {
		width: 100%;
		-ms-flex: 0 0 100%;
		flex: 0 0 100%;
	}

	/* The horizontal gutter between items becomes a vertical one. */
	.about-one__points-content li + li,
	.about-page__right .about-one__points-content li + li {
		margin-left: 0;
		margin-top: 14px;
	}
}

/* =========================================================================
   Top bar — everything on one centre line
   -------------------------------------------------------------------------
   The bar itself is a flex row with align-items: center, and the left side
   obeys it. The right side does not: .main-header__top-right is display:block,
   so the phone/email list inside it is laid out from the top rather than
   centred. Measured at 1600px the bar's centre line was y=23 while that list
   sat at y=15 — eight pixels high, which is what reads as misalignment
   against the tagline and social icons opposite.

   Making the right side a flex row puts it on the same centre line, and
   centring each list item aligns every icon with its own label.
   ========================================================================= */

.main-header__top-right {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: end;
	-ms-flex-pack: end;
	justify-content: flex-end;
	gap: clamp(14px, 2vw, 40px);
}

.main-header__top-left,
.main-header__top-right,
.main-header__top-address,
.main-header__top-social {
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

/* Each phone/email entry: icon and its text share a centre line. */
.main-header__top-address li,
.main-header__top-address li a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 8px;
}

/* The icons themselves sit on the text baseline rather than floating. */
.main-header__top-address li i,
.main-header__top-address li svg,
.main-header__top-address li img,
.main-header__top-social a i,
.main-header__top-social a svg {
	display: block;
	line-height: 1;
	vertical-align: middle;
}

.main-header__top-social a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}

/* On a phone the bar wraps; keep both rows centred rather than ragged. */
@media (max-width: 767px) {
	.main-header__top-right {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
}

/* The phone/email list is a <ul> whose default 16px bottom margin was never
   reset. Flex centring centres an item's *margin box*, so 31px of content
   plus 16px of margin filled the 47px bar and pinned the text to the top —
   which is why it measured 8px above the centre line the tagline sits on.
   Clearing the margin lets it centre on its content. */
.main-header__top-address,
.main-header__top-social,
.main-header__top ul {
	margin-top: 0;
	margin-bottom: 0;
}

/* =========================================================================
   Touch targets — comfortable to hit with a finger
   -------------------------------------------------------------------------
   The audit measured several links well under the 32px that a fingertip
   needs: "Read More" at 71x18, footer and menu links around 38x21, and the
   phone/email entries at 30px tall. They are fine with a mouse and awkward
   on a phone.

   The fix is padding rather than font-size, so nothing looks bigger — the
   hit area grows around the text while the design stays as drawn. Negative
   inline margins keep the visual rhythm unchanged where links sit in a row.
   ========================================================================= */

@media (max-width: 991px) {
	.blog-one__btn a,
	.blog-two__btn a,
	.blog-details__btn a,
	.thm-btn,
	.footer-widget__links-list li a,
	.main-header__top-address li a,
	.site-footer__bottom a {
		display: inline-block;
		min-height: 32px;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	/* Row links keep their spacing: the padding grows the target, the
	   negative margin cancels the visual shift. */
	.main-header__top-address li a {
		margin-top: -7px;
		margin-bottom: -7px;
	}

	/* Social icons get a proper square rather than the glyph's own box. */
	.main-header__top-social a,
	.site-footer__social a,
	.footer-widget__social a {
		min-width: 36px;
		min-height: 36px;
	}

	/* "Read More" and its arrow are one target, not two small ones. */
	.blog-one__btn,
	.blog-two__btn {
		display: inline-flex;
		align-items: center;
		min-height: 36px;
	}
}

/* =========================================================================
   Bleed images — never wider than the gutter they bleed into
   -------------------------------------------------------------------------
   .about-one__left uses `margin-left: -110px` so the image breaks out of its
   column into the page gutter. That is deliberate, and it works when the
   gutter is wider than 110px — on a 1920px screen it is 360px.

   At 1440px the gutter is smaller than the bleed, so the block hangs 38px off
   the left edge of the screen; at 1200px, 68px. Measured with transform:none
   and stable after three seconds, so this is layout, not an animation.

   The bleed now scales: it grows to the full -110px once there is room, and
   shrinks to nothing when there is not. `max()` on negative lengths picks the
   less negative value, which is the one that stays on screen.
   ========================================================================= */

.about-one__left {
	margin-left: max( -110px, calc( ( 1260px - 100vw ) / 2 ) );
}

@supports not ( margin-left: max( -110px, 0px ) ) {
	/* Older browsers get no bleed rather than an off-screen block. */
	.about-one__left {
		margin-left: 0;
	}
}

@media (max-width: 1199px) {
	.about-one__left {
		margin-left: 0;
	}
}

/* =========================================================================
   Mobile menu logo — one logo file, legible on a dark panel
   -------------------------------------------------------------------------
   The site now uses oloowere-foundation-side-logo.svg everywhere. That mark is
   dark green (#153827) with gold, drawn for a light background, and the mobile
   menu panel is #343434 — so the green all but disappears against it.

   Rather than keep a second white version of the logo in circulation, the
   logo sits on its own white plate inside the dark panel. The brand mark
   stays exactly as designed, in its real colours, and reads clearly.
   ========================================================================= */

.mobile-nav__content .logo-box {
	display: inline-block;
	background: #ffffff;
	padding: 14px 18px;
	border-radius: 10px;
	margin-bottom: 6px;
	max-width: 100%;
}

.mobile-nav__content .logo-box a,
.mobile-nav__content .logo-box img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* =========================================================================
   Mobile drawer — active item highlighted like the desktop menu
   -------------------------------------------------------------------------
   Desktop marks the current page with:

       color: var(--pifoxen-base)          #153827, the brand green
       text-shadow: 0 0 1px currentColor   a pseudo-bold weight
       plus the accent underline above the link

   The drawer's background is rgb(49,50,52), so that green sits at roughly
   1.1:1 against it — the highlight would be invisible. The treatment is kept
   identical and the colour moves to the theme's other brand token, gold
   (--pifoxen-primary #BB9043), which clears 4:1 on that panel.

   The desktop underline sits above the link; in a vertical list the same cue
   reads better as a bar down the leading edge, so it becomes one.
   ========================================================================= */

.mobile-nav__container .main-menu__list li.current > a,
.mobile-nav__container .main-menu__list li.current-menu-item > a,
.mobile-nav__container .main-menu__list li.current_page_item > a,
.mobile-nav__container .main-menu__list li.current-menu-ancestor > a,
.mobile-nav__container .main-menu__list li.current-menu-parent > a {
	color: var(--pifoxen-primary, #bb9043);
	text-shadow: 0 0 1px currentColor;
}

/* The leading-edge bar, mirroring the desktop underline. */
.mobile-nav__container .main-menu__list > li {
	position: relative;
}

.mobile-nav__container .main-menu__list > li.current > a::after,
.mobile-nav__container .main-menu__list > li.current-menu-item > a::after,
.mobile-nav__container .main-menu__list > li.current_page_item > a::after,
.mobile-nav__container .main-menu__list > li.current-menu-ancestor > a::after,
.mobile-nav__container .main-menu__list > li.current-menu-parent > a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: -20px;
	width: 3px;
	height: 20px;
	background-color: var(--pifoxen-primary, #bb9043);
	border-radius: 0 2px 2px 0;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}

/* Tapping any item gives the same feedback, so the menu responds to touch
   the way the desktop one responds to hover. */
.mobile-nav__container .main-menu__list li a:hover,
.mobile-nav__container .main-menu__list li a:focus-visible {
	color: var(--pifoxen-primary, #bb9043);
}

/* =========================================================================
   Banner gradient — full coverage once the text stops being half-width
   -------------------------------------------------------------------------
   The About banner uses the theme's `banner-half-gradient`: a dark gradient
   across roughly the left half of the photograph, with the heading and copy
   sitting in that half. It works exactly as intended on a desktop.

   Below the stacking breakpoint the copy spans the full width of the frame,
   so the right-hand end of every line runs off the dark half and onto the
   bare photograph — which is what makes the paragraphs hard to read on a
   phone. The gradient becomes a full-width vertical scrim at those sizes, so
   the whole text column keeps the same backing.
   ========================================================================= */

@media (max-width: 991px) {
	.banner-half-gradient::before {
		background-image: linear-gradient(
			180deg,
			rgba(8, 18, 13, 0.93) 0%,
			rgba(8, 18, 13, 0.90) 55%,
			rgba(8, 18, 13, 0.86) 100%
		) !important;
		background-color: transparent !important;
		/* The theme sets opacity .8 on this layer, which multiplies the alpha
		   above and lightens the scrim; the alpha here is already exact. */
		opacity: 1 !important;
		width: 100% !important;
		left: 0 !important;
		right: 0 !important;
	}
}

/* The banner body copy is light grey, chosen to sit on the dark half of the
   desktop gradient. Over a photograph on a phone that grey is the weakest
   link even with a strong scrim, so it moves closer to white — still clearly
   secondary to the bold lead-ins, but readable. */
@media (max-width: 991px) {
	.elementor .banner-half-gradient p,
	.elementor .banner-half-gradient li,
	.elementor .banner-half-gradient .elementor-widget-text-editor,
	.elementor .banner-half-gradient .elementor-widget-text-editor p {
		color: rgba(255, 255, 255, 0.94) !important;
	}

	.banner-half-gradient strong,
	.banner-half-gradient b {
		color: #ffffff;
	}
}

/* =========================================================================
   Hero — paint the first slide before the slider script runs
   -------------------------------------------------------------------------
   Slider Revolution renders the homepage hero in JavaScript. Until SR7 has
   loaded and initialised, the hero area is empty, so the largest paint waited
   on the script: measured at 13.6s on a throttled mobile connection, with the
   LCP element being an SR7 text layer.

   The wrapper that SR7 renders into does exist in the HTML, so it carries the
   first slide as a CSS background. The browser can paint that as soon as the
   image arrives — and it arrives early because it is preloaded (see
   gow_preload_hero_image). SR7 then draws over the top; the backdrop is the
   same picture, so the handover is invisible.

   The height is 100vh, matching the slider measured at every breakpoint, so
   nothing shifts when SR7 takes over. Cumulative Layout Shift stays at 0.
   ========================================================================= */

.elementor-element-1e092ac {
	min-height: 100vh;
	background-image: url("/gownew/wp-content/uploads/2026/06/header-slider1.webp");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #153827;
}

/* Once the slider has drawn its own slide, the backdrop has done its job.
   It stays in place rather than being removed, so a slow or failed SR7 load
   still leaves a hero image rather than an empty band. */
.elementor-element-1e092ac sr7-module {
	position: relative;
	z-index: 1;
}

/* =========================================================================
   Parallax section backgrounds — restore their geometry
   -------------------------------------------------------------------------
   The theme paints these section photographs with a pair of layers: a solid
   black box (.we-use-bg-box) and, above it, the photograph at 40% opacity
   with mix-blend-mode: luminosity — which is what gives those bands their
   greyscale look.

   The photo layer is declared `position: absolute; inset: 0` by the theme,
   but at runtime it computes to `position: relative; height: 0`, so it
   collapses and only the black box shows. Confirmed not to be caused by this
   stylesheet: blocking it entirely leaves the element collapsed just the
   same, so the override comes from the jarallax initialisation.

   Re-asserting the intended geometry restores the photographs. Jarallax can
   still move the image into its own child for the parallax effect; the layer
   it works inside now has a size to work with.
   ========================================================================= */

.we-use-bg,
.fundraishing-bg,
.volunteers-and-donating-bg,
.we-change-bg,
.two-boxes__single-bg,
.testimonial-two-bg,
.cta-one-bg,
.quality-work-bg,
.we-believe-bg,
.helping-hands-bg,
.help-them-bg,
[data-jarallax] {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	min-height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

/* The solid colour layer each photo sits on. */
.we-use-bg-box,
.fundraishing-bg-box,
.we-change-bg-box,
.volunteers-and-donating-bg-box {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	height: auto !important;
	min-height: 100%;
}

/* Jarallax moves the picture into a child of its own; that child needs to
   fill the layer rather than collapse to nothing. */
.we-use-bg > div,
.fundraishing-bg > div,
.we-change-bg > div,
.volunteers-and-donating-bg > div {
	position: absolute;
	inset: 0;
	min-height: 100%;
	background-size: cover;
	background-position: center;
}

.we-use-bg > div img,
.fundraishing-bg > div img,
.we-change-bg > div img,
.volunteers-and-donating-bg > div img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}