/*
=================================================================
    CSS Index
=================================================================

	1. Global Styles
	2. Generic Components (Buttons, Forms, etc.)
	3. Gradients & Overlays
	4. Site Structure (Header, Footer)
	5. Page Sections
		- Banner Area
		- Call to Action Area
		- Project Area
		- About Area
		- Volunteer (Team) Area
		- Donate Area
		- About Us Page
	6. Plugin Styles (Swiper, etc.)
	7. Media Queries

=================================================================
*/

/*=================================================================
	1. Global Styles
=================================================================*/
::-moz-selection { background-color: #f41665; color: #fff; }
::selection { background-color: #f41665; color: #fff; }
::-webkit-input-placeholder { color: #777777; font-weight: 300; }
:-moz-placeholder { color: #777777; opacity: 1; font-weight: 300; }
::-moz-placeholder { color: #777777; opacity: 1; font-weight: 300; }
:-ms-input-placeholder { color: #777777; font-weight: 300; }
::-ms-input-placeholder { color: #777777; font-weight: 300; } 

body { color: #555; font-family: "Poppins", sans-serif; font-size: 14px; font-weight: 300; line-height: 1.625em; position: relative; }
ol, ul { margin: 0; padding: 0; list-style: none; }
select { display: block; }
figure { margin: 0; }
a { -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
iframe { border: 0; }
a, a:focus, a:hover { text-decoration: none; outline: 0; }

h1, h2, h3, h4, h5, h6 { font-family: "Poppins", sans-serif; color: #222; line-height: 1.2em !important; margin-bottom: 0; margin-top: 0; font-weight: 600; }
.h1, .h2, .h3, .h4, .h5, .h6 { margin-bottom: 0; margin-top: 0; font-family: "Poppins", sans-serif; font-weight: 600; color: #222; }
h1, .h1 { font-size: 36px; }
h2, .h2 { font-size: 30px; }
h3, .h3 { font-size: 24px; }
h4, .h4 { font-size: 20px; }
h5, .h5 { font-size: 16px; }
h6, .h6 { font-size: 14px; color: #222; }

td, th { border-radius: 0px; }
.clear::before, .clear::after { content: " "; display: table; }
.clear::after { clear: both; }

.section-gap { padding: 120px 0; }
.section-title { padding-bottom: 30px; }
.section-title h2 { margin-bottom: 20px; }
.section-title p { font-size: 16px; margin-bottom: 0; }

.gray-bg { background: #f9f9ff; }
.light { color: #fff; }
.dark { color: #000; }
.relative { position: relative; }
.overflow-hidden { overflow: hidden; }
.no-padding { padding: 0; }

/* Helper Classes */
.mt-10 { margin-top: 10px; } .mt-15 { margin-top: 15px; } .mt-20 { margin-top: 20px; } .mt-25 { margin-top: 25px; } .mt-30 { margin-top: 30px; } .mt-40 { margin-top: 40px; } .mt-50 { margin-top: 50px; } .mt-60 { margin-top: 60px; } .mt-70 { margin-top: 70px; } .mt-80 { margin-top: 80px; } .mt-100 { margin-top: 100px; } .mt-120 { margin-top: 120px; } .mt-150 { margin-top: 150px; }
.ml-0 { margin-left: 0 !important; } .ml-5 { margin-left: 5px !important; } .ml-10 { margin-left: 10px; } .ml-15 { margin-left: 15px; } .ml-20 { margin-left: 20px; } .ml-30 { margin-left: 30px; } .ml-50 { margin-left: 50px; }
.mr-0 { margin-right: 0 !important; } .mr-5 { margin-right: 5px !important; } .mr-10 { margin-right: 10px; } .mr-15 { margin-right: 15px; } .mr-20 { margin-right: 20px; } .mr-30 { margin-right: 30px; } .mr-50 { margin-right: 50px; }
.mb-0 { margin-bottom: 0px; } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-25 { margin-bottom: 25px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-100 { margin-bottom: 100px; }
.pt-0 { padding-top: 0px; } .pt-10 { padding-top: 10px; } .pt-15 { padding-top: 15px; } .pt-20 { padding-top: 20px; } .pt-25 { padding-top: 25px; } .pt-30 { padding-top: 30px; } .pt-40 { padding-top: 40px; } .pt-50 { padding-top: 50px; } .pt-60 { padding-top: 60px; } .pt-70 { padding-top: 70px; } .pt-80 { padding-top: 80px; } .pt-100 { padding-top: 100px; } .pt-120 { padding-top: 120px; } .pt-150 { padding-top: 150px; }
.pb-0 { padding-bottom: 0px; } .pb-10 { padding-bottom: 10px; } .pb-15 { padding-bottom: 15px; } .pb-20 { padding-bottom: 20px; } .pb-25 { padding-bottom: 25px; } .pb-30 { padding-bottom: 30px; } .pb-40 { padding-bottom: 40px; } .pb-50 { padding-bottom: 50px; } .pb-60 { padding-bottom: 60px; } .pb-70 { padding-bottom: 70px; } .pb-80 { padding-bottom: 80px; } .pb-100 { padding-bottom: 100px; } .pb-120 { padding-bottom: 120px; } .pb-150 { padding-bottom: 150px; }
.p-40 { padding: 40px; }
.text-white { color: #fff; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Screen-reader only text */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}
/*=================================================================
	2. Generic Components (Buttons, Forms, etc.)
=================================================================*/
.btn.active.focus, .btn.active:focus, .btn.focus, .btn.focus:active, .btn:active:focus, .btn:focus { text-decoration: none; outline: 0; }
.btn i, .btn-large i, .btn-floating i, .btn-large i, .btn-flat i { font-size: 1em; line-height: inherit; }

.primary-btn { line-height: 42px; padding-left: 30px; padding-right: 60px; border-radius: 25px; border: none; color: #fff; display: inline-block; font-weight: 500; position: relative; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; }
.primary-btn:focus { outline: none; }
.primary-btn span { color: #fff; position: absolute; top: 50%; transform: translateY(-60%); right: 30px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.primary-btn:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; border-radius: 20px; opacity: 0; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; z-index: 1; }
.primary-btn:hover { color: #fff; }
.primary-btn:hover span { color: #fff; right: 20px; }
.primary-btn.no-icon { padding-right: 30px; }

.head-btn { border: 1px solid #777; color: #222; font-weight: 500; background: #fff; text-transform: uppercase; font-size: 14px; border-radius: 20px; padding: 12px 28px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.head-btn:hover { color: #fff; border: 1px solid transparent; cursor: pointer; }
.head-btn2 { background: #fff; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.head-btn2:hover { background: #222; color: #fff; cursor: pointer; }

.generic-blockquote { padding: 30px 50px 30px 30px; background: #f9f9ff; border-left: 2px solid #fcd2ff; }

.unordered-list li { position: relative; padding-left: 30px; line-height: 1.82em !important; }
.unordered-list li:before { content: ""; position: absolute; width: 14px; height: 14px; border: 3px solid #fcd2ff; background: #fff; top: 4px; left: 0; border-radius: 50%; }
.ordered-list { margin-left: 30px; }
.ordered-list li { list-style-type: decimal-leading-zero; color: #fcd2ff; font-weight: 500; line-height: 1.82em !important; }
.ordered-list li span { font-weight: 300; color: #777; }

.project-description-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
    line-height: 1.7;
}
.list-bullet-icon { 
    margin-right: 10px; 
    margin-top: 5px; 
    max-width: 100px; 
    max-height: 100px; /* You can adjust this value */
    height: auto; 
}

.single-input { display: block; width: 100%; line-height: 40px; border: none; outline: none; background: #f9f9ff; padding: 0 20px; }
.single-input:focus { outline: none; }
.single-textarea { display: block; width: 100%; line-height: 40px; border: none; outline: none; background: #f9f9ff; padding: 0 20px; height: 100px; resize: none; }
.single-textarea:focus { outline: none; }

/*=================================================================
	3. Gradients & Overlays
=================================================================*/
.p1-gradient-bg, .primary-btn, .primary-btn:after, .banner-content .clock_sec, .head-btn:hover, .callto-wrap, .single-project .content .content-overlay, .single-vol .content .content-overlay {
    background-image: -moz-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -webkit-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -ms-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
}
.p2-gradient-bg {
    background-image: -moz-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -webkit-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -ms-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    opacity: .5;
}
.p1-gradient-color {
    color: #f86e3d; /* Fallback for older browsers */
    background: -webkit-linear-gradient(bottom, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background: -o-linear-gradient(bottom, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background: linear-gradient(to top, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.overlay { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

/*=================================================================
	4. Site Structure (Header, Footer)
=================================================================*/
.default-header {
    background-color: #fff; padding: 20px 0; width: 100% !important;
    box-shadow: -21.213px 21.213px 30px 0px rgba(158, 158, 158, 0.3);
    position: fixed; top: 0; left: 0; z-index: 999;
    transition: top 0.3s ease-in-out;
}
.nav-up { top: -100px; /* Adjust this value if header height changes */ }

.sticky-wrapper { height: 48px !important; }
.menu-bar { cursor: pointer; }
.menu-bar span { color: #000; font-size: 24px; }
.main-menubar { position: relative; } /* Ensure this is correctly positioned */
nav {
    margin-right: 70px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    transform-origin: 100% 50%;
    /* Default state for desktop, will be overridden by media query for mobile */
}
nav.hide { transform: scale(0); opacity: 0; visibility: hidden; pointer-events: none; display: none; } /* Add display: none for full hiding */
nav a { color: #000; font-size: 12px; font-weight: 500; text-transform: uppercase; margin: 0 25px; display: inline-block; }
nav a:hover { color: #f41665; }
.menu-bar {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
}


.footer-area { background-color: #fff; color: #222; text-align: center; }
.footer-menu { margin-bottom: 30px; }
.footer-menu li { display: inline-block; }
.footer-menu li a { color: #222; font-weight: 600; text-transform: uppercase; padding: 30px; }
.footer-menu li a:hover { color: #f41665; }
.footer-social { padding-bottom: 30px; }
.footer-social a { padding: 15px; }
.footer-social a i { color: #888; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.footer-social a i:hover { color: #f41665; }
.footer-text a, .footer-text i { color: #f41665; }

/*=================================================================
	5. Page Sections
=================================================================*/

/* Banner Area */
.banner-area { background: url(../img/header-bg.jpg) no-repeat center center/cover; }
.banner-area .overlay-bg { opacity: .5; background-color: #000; }
.banner-content h1 { color: #fff; font-size: 72px; font-weight: 700; line-height: 1.15em; margin-bottom: 30px; }
.banner-content p { color: #fff; margin-bottom: 60px; font-size: 14px; font-weight: 100; max-width: 730px; }
.banner-content .clock_sec { color: #fff; margin-top: 30px; padding: 30px 40px; }
.banner-content .clock_sec .clockinner { text-align: center; }
.banner-content .clock_sec .clockinner span { font-size: 36px; font-weight: 600; }

/* Call to Action Area */
.callto-area { margin-top: -55px; }
.callto-wrap { padding-left: 5%; padding-right: 5%; }

/* Project Area */
.project-area { background-color: #f9f9ff; }
.project-area .header-text { text-align: center; }
.project-area .header-text h1 { margin-bottom: 25px; }
.project-wrap .details h2 { font-size: 20px; font-weight: 600; margin-top: 30px; }
.project-wrap .details p { font-size: 14px; font-weight: 300; margin-top: 8px; }
.project-wrap .content a.img-gal {
    cursor: -webkit-zoom-in;
    cursor: -moz-zoom-in;
    cursor: zoom-in;
}
.project-wrap .details a { font-size: 14px; font-weight: 600; color: #222; }
.single-project .content { position: relative; max-width: 400px; margin: auto; overflow: hidden; }
.single-project .content .content-overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.single-project .content:hover .content-overlay { opacity: .8; }
.single-project .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.single-project .content-title { font-size: 18px; color: #fff; font-weight: 500; }
.single-project .content:hover .content-details { top: 50%; left: 50%; opacity: 1; }
.single-project .content-details p { color: #fff; font-size: 0.8em; }
.single-project .fadeIn-bottom { top: 80%; }

/* About Area (Homepage) */
.about-area { background-color: #222; }
.about-right { padding-right: 20%; padding-left: 5%; }
.about-right h1 { color: #fff; margin-bottom: 25px; }
.about-right p { color: #ddd; font-weight: 300; }
.about-features { margin-top: 40px; }
.about-features .feature-item { margin-bottom: 25px; }
.about-features .feature-item i { color: #f86e3d; transition: all .3s ease; }
.about-features .feature-item h4 { color: #fff; font-size: 18px; margin-bottom: 10px; }
.about-features .feature-item p { color: #ddd; margin-bottom: 0; font-size: 14px; }
.about-features .feature-item:hover i { transform: scale(1.1); color: #fbcd11; }
.about-right .btn-black { margin-top: 30px; background-color: #222; border: 1px solid #777; color: #fff; text-transform: uppercase; font-size: 14px; border-radius: 20px; padding: 12px 28px; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; }
.about-right .btn-black:hover { border: 1px solid #222; background: #fff; color: #222; cursor: pointer; }
.about-right .btn-black span { margin-left: 10px; transition: all .3s ease; }
.about-right .btn-black:hover span { transform: translateX(5px); }

/* Volunteer (Team) Area */
.volunteer-area { background-color: #f9f9ff; }
.volunteer-area .header-text { text-align: center; }
.volunteer-area .header-text h1 { margin-bottom: 25px; }
.single-vol .content { position: relative; max-width: 400px; margin: auto; overflow: hidden; }
.single-vol .content .content-overlay { position: absolute; left: 0; top: 0; bottom: 0; right: 0; opacity: 0; -webkit-transition: all 0.4s ease-in-out 0s; -moz-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; }
.single-vol .content:hover .content-overlay { opacity: .8; }
.single-vol .content-details { position: absolute; text-align: center; padding-left: 1em; padding-right: 1em; width: 100%; top: 50%; left: 50%; opacity: 0; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transition: all 0.3s ease-in-out 0s; -moz-transition: all 0.3s ease-in-out 0s; transition: all 0.3s ease-in-out 0s; }
.single-vol .content-details h4 { color: #fff; }
.single-vol .content:hover .content-details { top: 50%; left: 50%; opacity: 1; }
.single-vol .fadeIn-bottom { top: 80%; }

.single-vol .content-image {
    width: 100%;
    height: 250px; /* Adjust height as needed for a uniform look */
    object-fit: cover;
    object-position: center; /* Ensures the image is centered */
}

.team-social a:not([href]) {
    cursor: default;
    opacity: 0.5;
}
/* Donate Area */
.donate-area { background: url(../img/header-bg.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
.donate-area .overlay-bg { opacity: .9; background-color: #000; }
.donate-area .header-text h1 { color: #fff; margin-bottom: 25px; }
.donate-area .header-text p { color: #ddd; }
.donate-area .contact-right .form-control { border-radius: 0; background-color: transparent; border: 1px solid #656463; color: #fff; font-size: 14px; padding: 12px; }
.donate-area .contact-right .form-control::placeholder { color: #bbb; }
.donate-area .contact-right .form-control::-webkit-input-placeholder { color: #bbb; }
.donate-area .contact-right .form-control::-moz-placeholder { color: #bbb; opacity: 1; }
.donate-area .contact-right .form-control:-ms-input-placeholder { color: #bbb; }
.donate-area .contact-right .form-control::-ms-input-placeholder { color: #bbb; }
.donate-area .contact-right input, .donate-area .contact-right textarea { font-size: 14px; font-weight: 200; }
.donate-area .contact-right .option { color: #222; }
.donate-area .contact-right .nice-select span { color: #ddd; font-size: 14px; font-weight: 200; }
.donate-area .contact-right textarea { height: 150px; }
.donate-area .contact-right .list { width: 100%; }
.donate-area .contact-right .payment-method { color: #ddd; margin-top: 30px; }
.payment-logo { margin: 0 10px; transition: transform .2s ease; }
.payment-logo:hover { transform: scale(1.1); }
.payment-logo {
    max-width: 100%; /* Make sure images don't exceed their container */
    height: auto;    /* Maintain aspect ratio */
}
/* Donation Amount Buttons */
.amount-buttons .amount-btn {
    background: #fff;
    border: 1px solid #ccc;
    color: #222;
    padding: 10px 20px;
    margin: 5px;
    border-radius: 20px;
    transition: all 0.3s ease;
}
.amount-buttons .amount-btn.active, .amount-buttons .amount-btn:hover {
    background-image: -moz-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -webkit-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -ms-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    color: #fff;
    border-color: transparent;
}
/* About Us Page */
.about-details-area { background-color: #f9f9ff; }
.about-details-content h2 { font-size: 28px; margin-bottom: 20px; color: #222; }
.about-details-content h3 { font-size: 22px; margin-bottom: 15px; color: #333; }
.about-details-content p { color: #555; line-height: 1.7; }
.vision-mission-cards .card { border: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07); transition: all 0.3s ease; }
.vision-mission-cards .card:hover { transform: translateY(-5px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); }
.vision-mission-cards .card-title { color: #f86e3d; font-weight: 600; }
.about-details-area .list-group-item { background-color: transparent; border-color: #eee; padding-left: 0; }
.about-details-area .list-group-item i { color: #f86e3d; margin-right: 10px; }
.primary-btn span { margin-left: 10px; transition: all .3s ease; }
.primary-btn:hover span { transform: translateX(-5px); }

/*=================================================================
	Back to Top Button
=================================================================*/
.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-image: -moz-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -webkit-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    background-image: -ms-linear-gradient(0deg, #f40f68 0%, #f86e3d 55%, #fbcd11 100%);
    color: #fff;
    text-align: center;
    line-height: 40px;
    font-size: 16px;
    z-index: 998;
    transition: all 0.4s;
}

/*=================================================================
	Preloader
=================================================================*/
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff; /* Opaque white background */
    z-index: 9999; /* Make sure it's on top */
    display: flex;
    align-items: center;
    justify-content: center;
}

.loader {
    border: 8px solid #f3f3f3; /* Light grey */
    border-top: 8px solid #f86e3d; /* Orange from your gradient */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/*=================================================================
	6. Plugin Styles (Swiper, etc.)
=================================================================*/
.mySwiper {
  width: 100%;
  max-width: 800px; /* Adjust as needed */
  height: 400px;    /* Adjust as needed */
  margin: 50px auto; /* Center it on the page */
  border-radius: 10px;
}
.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This makes the image cover the area without distortion */
}
.swiper-button-next,
.swiper-button-prev {
  color: #ffffff; /* Change arrow color */
}

/* Magnific Popup Fade Animation */
.mfp-fade.mfp-bg { opacity: 0; transition: all 0.3s ease-out; }
.mfp-fade.mfp-bg.mfp-ready { opacity: 0.8; }
.mfp-fade.mfp-bg.mfp-removing { opacity: 0; }

/*=================================================================
	7. Media Queries
=================================================================*/
@media (max-width: 1199px) {
    .banner-content h1 { font-size: 45px; }
    .banner-content p { margin-top: 20px; }
    .about-right { padding-left: 5%; padding-right: 5%; }
    .about-right h1 { font-size: 25px; }
}

@media (max-width: 991px) {
    .section-title p br { display: none; }
    .banner-content h1 { font-size: 36px; }
    .banner-content h1 br { display: none; }
    .banner-content p br { display: none; }
    .about-right { padding-top: 50px; padding-bottom: 50px; }
}

@media (max-width: 768px) {
    .callto-area h3 { margin-bottom: 20px; }
    .single-vol { margin-bottom: 30px; }
}

@media (max-width: 767px) {
    nav { margin-right: 0; position: absolute; right: 0; top: 47px; text-align: right; padding: 20px 0; z-index: 5; background: #fff; }
    nav a { color: #000 !important; margin: 5px 25px; display: block; } /* Ensure links are block for better mobile tapping */
    nav a:hover { color: #f41665; }
    /* When not hidden, ensure it's displayed as a block menu */
    nav:not(.hide) {
        display: block; /* Make it visible when 'hide' is removed */
        transform: scale(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    /* The .hide class will override the above when present */
    nav.hide {
        display: none; /* Completely hide when closed */
    }
}

@media (max-width: 414px) {
    .banner-content h1 { font-size: 40px; }
    .footer-menu { padding: 15px; }
    .single-project .content .content-overlay { left: 11px; width: 94%; }
    .single-vol .content .content-overlay { left: 62px; width: 68%; }
}

@media (max-width: 413px) {
    .single-project .content .content-overlay { left: 0; width: 100%; }
    .single-vol .content .content-overlay { left: 12px; width: 92%; }
}