/* LANDING PAGE STYLES */

/* LANDING HEADER */
.landing-header .navbar {padding: 20px 0; background: white;}
.landing-header .navbar-brand {margin-right: auto;}
.landing-header .navbar-brand img.logo {max-height: 60px;}
.header-contact {display: flex; align-items: center;}
.header-contact .contact-link {display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; font-weight: 600;}
.header-contact .contact-link i {font-size: 24px; margin-bottom: 5px; color: var(--color-primary);}
.header-contact .phone-number {font-size: 18px; font-weight: bold; color: var(--color-primary);}
.header-contact .call-text {font-size: 12px; color: #666; margin-top: 2px;}
.header-contact .contact-link:hover {opacity: 0.8;}

@media (max-width: 768px) {
	.header-contact .phone-number {font-size: 14px;}
	.header-contact .contact-link i {font-size: 18px;}
	.header-contact .call-text {font-size: 10px;}
}

/* HERO SECTION - SLIDER */
.landing-page .slider-home {position: relative; width: 100%; height: auto;}
.landing-page .swiper-slide {position: relative; overflow: hidden;}
.landing-page .swiper-slide picture {display: block; width: 100%; height: 75vh;}
.landing-page .swiper-slide img.responsive {width: 100%; height: 100%; display: block; object-fit: cover;}
.landing-page .carousel-caption {position: absolute; right: 5%; top: 50%; transform: translateY(-50%); color: var(--color-primary); z-index: 10; max-width: 500px; text-align: right; }
.landing-page .carousel-caption p{text-shadow:none;}
.landing-page .carousel-caption p:first-child {font-size: 16px; font-weight: 600; color: black; margin: 0; text-transform: uppercase; letter-spacing: 1px;}
.landing-page .carousel-caption .title {font-size: 48px; font-weight: bold; line-height: 1.2; margin: 15px 0; color: var(--color-primary); text-shadow:none;}
.landing-page .carousel-caption .subtitle {font-size: 16px; line-height: 1.6; color: #333; margin: 15px 0;}
.landing-page .carousel-caption strong {color: var(--color-primary); font-weight: 600;}

@media (max-width: 768px) {
	.landing-page .carousel-caption {right: 20px; left: 20px; max-width: none; text-align: center; transform: translateY(-50%);}
	.landing-page .carousel-caption .title {font-size: 28px;}
	.landing-page .carousel-caption p:first-child {font-size: 12px;}
	.landing-page .carousel-caption .subtitle {font-size: 14px;}
}

/* QUICK RELIEF SECTION */
.quick-relief-section {background: linear-gradient(135deg, rgba(85, 179, 59, 0.05) 0%, rgba(85, 179, 59, 0.02) 100%); padding: 80px 20px;}
.relief-items {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 25px; max-width: 1000px; margin: 0 auto;}
.relief-item {background: white; padding: 35px 25px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.08); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border: 2px solid transparent;}
.relief-item:hover {transform: translateY(-12px); box-shadow: 0 16px 40px rgba(85, 179, 59, 0.15); border-color: var(--color-primary);}
.relief-icon {font-size: 56px; color: white; margin: 0 auto 20px auto; width: 90px; height: 90px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.relief-item p {font-size: 15px; line-height: 1.6; color: #333; margin: 0;}

@media (max-width: 768px) {
	.quick-relief-section {padding: 60px 20px;}
	.relief-items {grid-template-columns: 1fr; gap: 20px;}
	.relief-item {padding: 25px 20px;}
	.relief-icon {font-size: 44px; width: 75px; height: 75px;}
	.relief-item p {font-size: 14px;}
}

/* IMPACT METRICS SECTION - Uses .row-green and .row-counters from general.css */

/* BENEFITS SECTION */
.benefits-section {padding: 80px 20px; background: linear-gradient(135deg, rgba(85, 179, 59, 0.05) 0%, rgba(85, 179, 59, 0.02) 100%); overflow-x: clip;}
.benefits-header {max-width: 800px; margin: 0 auto 50px auto;}
.benefits-header .title-lined {margin-bottom: 30px;}
.benefits-header p {font-size: 16px; color: #666; line-height: 1.6; text-align: center;}
.benefits-grid {display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto;}
.benefits-mobile {display: none;}

.benefit-card {background: white; padding: 35px 25px; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border: 2px solid transparent; text-align: center; display: flex; flex-direction: column; height: 100%;}
.benefit-card:hover {transform: translateY(-12px); box-shadow: 0 16px 40px rgba(85, 179, 59, 0.15); border-color: var(--color-primary);}
.benefit-icon {font-size: 56px; color: white; margin: 0 auto 25px auto; width: 90px; height: 90px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.benefit-card h3 {font-size: 17px; font-weight: bold; color: #333; margin-bottom: 15px; line-height: 1.3;}
.benefit-card p {font-size: 13px; color: #666; line-height: 1.7; margin: 0; flex-grow: 1;}

@media (max-width: 1024px) {
	.benefits-desktop {display: none;}
	.benefits-mobile {display: block; width: 100%; overflow: visible; padding-top: 15px; margin-top: -15px;}
	.benefits-mobile .swiper-wrapper {align-items: stretch;}
	.benefits-mobile .swiper-slide {height: auto; display: flex;}
}

@media (max-width: 768px) {
	.benefits-section {padding: 60px 20px;}
	.benefits-header p {font-size: 14px;}
	.benefit-card {padding: 25px 20px;}
	.benefit-icon {font-size: 44px; width: 75px; height: 75px;}
	.benefit-card h3 {font-size: 15px;}
	.benefit-card p {font-size: 12px;}
}

/* HOW WE WORK SECTION */
.how-we-work-section {padding: 80px 20px; background: white; overflow-x: clip;}
.section-header {max-width: 800px; margin: 0 auto 60px auto;}
.section-header .title-lined {margin-bottom: 30px;}
.steps-grid {display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 20px; align-items: stretch; max-width: 1200px; margin: 0 auto;}
.step-card {background: #f9f9f9; padding: 30px 25px; border-radius: 12px; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; border: 2px solid transparent; position: relative; text-align: center; height: 100%; display: flex; flex-direction: column;}
.step-card:hover {transform: translateY(-8px); box-shadow: 0 12px 30px rgba(85, 179, 59, 0.12); border-color: var(--color-primary);}
.step-number {font-size: 64px; font-weight: 900; color: white; margin: 0 auto 20px auto; width: 100px; height: 100px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.step-icon {display: none;}
.step-card h3 {font-size: 17px; font-weight: 700; color: #333; margin-bottom: 15px; margin-top: 0;}
.step-card p {font-size: 13px; color: #666; line-height: 1.6; margin: 0;}
.step-arrow {font-size: 28px; color: var(--color-primary); text-align: center; display: flex; align-items: center; justify-content: center;}

.steps-mobile {display: none;}

@media (max-width: 1024px) {
	.steps-desktop {display: none;}
	.steps-mobile {display: block; width: 100%; overflow: visible; padding-top: 15px; margin-top: -15px;}
	.steps-mobile .swiper-wrapper {align-items: stretch;}
	.steps-mobile .swiper-slide {height: auto; display: flex;}
	.steps-mobile .step-card {background: #f9f9f9; text-align: center; width: 100%; height: 100%;}
}

@media (max-width: 768px) {
	.how-we-work-section {padding: 60px 20px;}
	.step-card {padding: 25px 20px;}
	.step-number {font-size: 48px; width: 80px; height: 80px;}
	.step-card h3 {font-size: 15px;}
	.step-card p {font-size: 12px;}
}

/* TESTIMONIALS SECTION */
.testimonials-section {padding: 80px 20px; background: linear-gradient(135deg, rgba(85, 179, 59, 0.05) 0%, rgba(85, 179, 59, 0.02) 100%); overflow-x: clip;}
.testimonials-section .section-header {max-width: 800px; margin: 0 auto 60px auto;}
.testimonials-section .title-lined {margin-bottom: 0;}
.testimonials-swiper {width: 100%; margin: 0 auto; overflow: visible; padding-top: 15px; margin-top: -15px;}
.testimonials-swiper .swiper-wrapper {align-items: stretch;}
.testimonials-swiper .swiper-slide {height: auto; display: flex;}
.testimonials-grid {display: flex; gap: 0; padding-left: 0;}
.testimonial-card {background: #ffffff; padding: 35px 25px; border-radius: 12px; transition: box-shadow 0.3s ease, border-color 0.3s ease; border: 2px solid var(--color-primary); text-align: center; display: flex; flex-direction: column; height: 100%; width: 100%;}
.testimonial-stars {font-size: 18px; color: #ffc107; margin-bottom: 20px; letter-spacing: 2px;}
.testimonial-quote {font-size: 16px; font-weight: 600; color: var(--color-primary); margin-bottom: 15px; font-style: italic; flex-grow: 0;}
.testimonial-text {font-size: 14px; color: #666; line-height: 1.7; margin-bottom: 20px; flex-grow: 1;}
.testimonial-author {font-size: 13px; font-weight: 600; color: #333; margin: 0; flex-grow: 0;}

@media (max-width: 768px) {
	.testimonials-section {padding: 60px 0;}
	.testimonials-section .container {padding-right: 20px; padding-left: 20px; overflow: visible;}
	.testimonials-section .section-header {margin: 0 auto 40px auto;}
	.testimonials-swiper {width: 100%; margin: 0; overflow: hidden; padding-right: 0;}
	.testimonials-grid {gap: 0; padding-left: 0;}
	.testimonial-card {padding: 25px 20px;}
	.testimonial-quote {font-size: 14px;}
	.testimonial-text {font-size: 12px;}
}

/* CLOSING CTA SECTION */
.closing-cta-section {padding: 90px 20px; background: white; text-align: center;}
.closing-cta-section .container {max-width: none;}
.closing-cta-section .section-header {max-width: 800px; margin: 0 auto 50px auto;}
.closing-cta-section .title-lined {margin-bottom: 0; text-align: left;}
.closing-cta-section .title-lined small {color: #666;}
.closing-cta-section .title-lined h2.title {color: var(--color-primary);}
.closing-cta-section .title-lined:after {background: var(--color-primary);}
.closing-cta-button {margin-bottom: 40px; background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: 700; padding: 16px 40px; font-size: 17px;}
.closing-cta-button:hover {background: #2d7a1f; color: #fff; border-color: #2d7a1f;}
.closing-cta-divider {width: 60px; height: 2px; background: var(--color-primary); margin: 0 auto 30px auto;}
.closing-cta-contact-text {font-size: 15px; color: #666; margin: 0 0 20px 0; text-transform: uppercase; letter-spacing: 1px;}
.closing-cta-contact-links {display: flex; gap: 15px; justify-content: center; align-items: center; flex-wrap: wrap;}
.closing-cta-contact-link {border: 2px solid var(--color-primary) !important; color: var(--color-primary) !important; background: transparent !important; font-weight: 600;}
.closing-cta-contact-link:hover {background: var(--color-primary) !important; color: #fff !important; border-color: var(--color-primary) !important;}
.closing-cta-contact-link i {margin-right: 8px;}

@media (max-width: 768px) {
	.closing-cta-section {padding: 60px 20px;}
	.closing-cta-button {width: 100%; max-width: 420px; margin-bottom: 30px; padding: 14px 20px; font-size: 15px;}
	.closing-cta-contact-text {font-size: 13px;}
	.closing-cta-contact-links {gap: 12px;}
	.closing-cta-contact-links .btn {width: 100%; max-width: 420px;}
}

/* WHATSAPP FLOAT */
.whatsapp-float { position: fixed; bottom: 30px; right: 30px; background-color: #25d366; color: white; width: 60px; height: 60px; border-radius: 50px; text-align: center; font-size: 35px; z-index: 1001; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; text-decoration: none !important; }
.whatsapp-float:hover { background-color: #128c7e; transform: scale(1.1) rotate(5deg); color: white; }
.whatsapp-float .float-label { position: absolute; right: 70px; background: white; color: #333; padding: 5px 15px; border-radius: 20px; font-size: 14px; font-family: 'bold'; font-weight: 900; pointer-events: none; opacity: 0; transition: all 0.3s ease; white-space: nowrap; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.whatsapp-float:hover .float-label { opacity: 1; transform: translateX(-10px); }

@media (max-width: 768px) {
	.whatsapp-float { bottom: 20px; right: 20px; }
}