/* =============================================
   LIFE World Mission - Main Stylesheet
   ============================================= */

/* Google Fonts - Updated to include Open Sans Condensed */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&family=Open+Sans+Condensed:wght@300;400;700&family=Playfair+Display:wght@400;700&display=swap');

/* CSS Variables */
:root {
    --primary-color: #48C1C9;
    --primary-dark: #3A87AD;
    --secondary-color: #4DC247;
    --text-dark: #333333;
    --text-gray: #878787;
    --text-light: #666666;
    --bg-light: #F5F5F5;
    --bg-white: #FFFFFF;
    --footer-bg: #d5e8e8;
    --white: #FFFFFF;
    --shadow: 0 2px 10px rgba(0,0,0,0.1);
    --transition: all 0.3s ease;
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    line-height: 1.7;
    color: #464133;
    background-color: var(--bg-white);
}

/* Typography Fixes */
main h1,
.page-title,
h1.page-title,
h2.page-title,
h1 {
    font-family: "Open Sans Condensed", sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    color: rgb(72, 193, 201);
    text-transform: uppercase;
    text-align: left !important;
    line-height: 66px;
    padding-top: 30px;
    margin-bottom: 0;
}

h2 {
    font-family: "Open Sans Condensed", sans-serif;
    font-size: 37px;
    font-weight: 400;
    color: #878787;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul {
    list-style: none;
}

.container, main {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 20px;
}

/* =============================================
   BOOTSTRAP GRID SYSTEM
   ============================================= */
.row-fluid {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.span6 {
    width: 50%;
    padding: 0 10px;
    box-sizing: border-box;
}

.span12 {
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

/* =============================================
   HEADER & NAVIGATION
   ============================================= */
header {
    background: var(--white);
    position: static;
    height: auto;
    padding: 0;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Header Logo Fixes */
.logo-link img,
.logo img,
header .brand img,
header .site-header-logo img,
header img {
    width: 64px !important;
    height: 64px !important;
    max-height: 64px;
    margin-top: 0;
}

/* Align header elements horizontally at same level */
header,
.site-header {
    display: flex;
    align-items: center;
    height: 72px;
}

/* Fix logo visibility - ensure it stays within header bounds */
.site-header .header-content {
    height: auto !important;
    display: flex !important;
    align-items: center !important;
}

.site-header .logo-section {
    position: relative !important;
}

.site-header .logo-link.brand {
    display: flex !important;
    align-items: center !important;
}

.site-header .logo.logo-market {
    position: relative !important;
    top: auto !important;
}

/* Logo parent container */
header a:first-child,
.site-header-logo,
.logo-section {
    display: flex;
    align-items: center;
    height: 48px;
}

.brand {
    display: flex;
    align-items: center;
    padding: 10px 20px;
    text-decoration: none;
}

.logo-text {
    font-size: 20px;
    font-weight: 200;
    color: #878787;
    margin-left: 10px;
    text-shadow: 0 1px 0 transparent;
}

nav ul {
    display: flex;
    gap: 15px;
}

header nav a {
    font-weight: 300;
    color: #161616;
    padding: 14px 15px;
    font-size: 14px;
    text-transform: uppercase;
    position: relative;
    white-space: nowrap;
}

nav ul li a:hover,
nav ul li a.active {
    color: var(--primary-color);
}

/* Simplified hover effect to match original */

/* Donate Button Styles */
a[href*="mercadopago"], .donate-btn, .btn-donate {
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 14px;
    background-color: #48C1C9;
    color: #fff;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
}

/* Hide breadcrumb navigation globally */
.breadcrumb,
[class*="breadcrumb"],
nav[aria-label="Breadcrumb"],
.page-breadcrumb {
    display: none !important;
}

/* Active navigation link styling - only highlight current page */
nav li.active a,
nav li a.active,
body[data-page="dona"] nav a[href="?page=dona"],
.page-dona nav a[href="?page=dona"] {
    color: rgb(72, 193, 201) !important;
}

/* Mobile Menu Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
}

.menu-toggle span,
.hamburger-line {
    width: 25px;
    height: 3px;
    background: var(--text-dark);
    transition: var(--transition);
    display: block;
    margin: 3px 0;
}

/* Legacy navbar support */
.navbar-fixed-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--white);
    border-bottom: 1px solid #ddd;
    box-shadow: var(--shadow);
}

.navbar-inner {
    padding: 0 20px;
}

.navbar-nav-integrated {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.nav-brand {
    flex: 0 0 auto;
}

.nav-brand .brand-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: var(--text-dark);
    padding: 5px 0;
}

.nav-brand .brand-link img.logo {
    width: 64px;
    height: 64px;
    margin-right: 10px;
}

.nav-center-group {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
}

.nav-center {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.nav-center li {
    margin: 0 15px;
}

.nav-center li a {
    display: block;
    padding: 15px 10px;
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    transition: var(--transition);
    white-space: nowrap;
    position: relative;
}

.nav-center li a:hover,
.nav-center li.active a {
    color: var(--primary-color);
}

.nav-center li a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: var(--transition);
}

.nav-center li a:hover::after,
.nav-center li.active a::after {
    width: 100%;
}

/* =============================================
   HERO SECTIONS
   ============================================= */
.hero {
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 80px;
}

.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    color: var(--white);
    max-width: 800px;
    padding: 0 20px;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero p {
    font-size: 20px;
    margin-bottom: 30px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}

/* Page Hero (smaller for internal pages) */
.page-hero {
    height: 40vh;
    min-height: 300px;
    margin-top: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
}

.page-hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 3px;
}

/* =============================================
   BUTTONS
   ============================================= */
.btn {
    display: inline-block;
    padding: 15px 35px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 5px;
    cursor: pointer;
    transition: var(--transition);
    border: none;
}

.btn-primary {
    background: var(--primary-color);
    color: var(--white);
}

.btn-primary:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(72, 193, 201, 0.4);
}

.btn-secondary {
    background: var(--secondary-color);
    color: var(--white);
}

.btn-secondary:hover {
    background: #3da339;
    transform: translateY(-2px);
}

.btn-outline {
    background: transparent;
    border: 2px solid var(--white);
    color: var(--white);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--primary-color);
}

.btn-large {
    padding: 18px 40px;
    font-size: 16px;
}

/* =============================================
   SECTIONS
   ============================================= */
section {
    padding: 80px 0;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: 42px;
    color: var(--primary-color);
    margin-bottom: 30px;
}

.section-subtitle {
    font-size: 24px;
    color: var(--text-gray);
    font-weight: 300;
    margin-bottom: 20px;
}

/* =============================================
   CTA BOX (Replaces Newsletter)
   ============================================= */
.cta-box {
    background: rgba(255, 255, 255, 0.95);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    max-width: 450px;
    box-shadow: var(--shadow);
}

.cta-box h2 {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.cta-box p {
    color: var(--text-gray);
    margin-bottom: 25px;
    font-size: 15px;
    line-height: 1.6;
}

/* =============================================
   CONTENT BLOCKS
   ============================================= */
.content-block {
    display: flex;
    gap: 50px;
    align-items: center;
    margin-bottom: 60px;
}

.content-block.reverse {
    flex-direction: row-reverse;
}

.content-block .image {
    flex: 1;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.content-block .text {
    flex: 1;
}

.content-block h2 {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    color: var(--text-gray);
    margin-bottom: 20px;
}

.content-block p {
    color: var(--text-light);
    margin-bottom: 15px;
    text-align: justify;
}

.content-block .highlight {
    color: var(--primary-color);
    font-weight: 600;
}

/* =============================================
   CARDS / PREVIEW SECTIONS
   ============================================= */
.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.15);
}

.card-image {
    height: 200px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
}

.card:hover .card-image img {
    transform: scale(1.1);
}

.card-content {
    padding: 25px;
}

.card-content h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.card-content h3 a:hover {
    color: var(--primary-dark);
}

.card-content p {
    color: var(--text-light);
    font-size: 14px;
    line-height: 1.6;
}

/* =============================================
   IMAGE CAROUSEL (Bootstrap Legacy)
   ============================================= */
.carousel-section {
    background: var(--bg-light);
}

.carousel-section .section-title {
    text-align: center;
}

/* Swiper CSS removed - using Bootstrap carousel instead
.swiper {
    width: 100%;
    padding: 20px 0 50px;
}

.swiper-slide {
    width: 300px;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--shadow);
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-pagination-bullet-active {
    background: var(--primary-color) !important;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--primary-color) !important;
}
*/

/* Legacy carousel support */
.carousel {
    position: relative;
    margin-bottom: 20px;
}

.carousel-inner {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-inner .item {
    display: none;
    position: relative;
    transition: left 0.6s ease-in-out;
}

.carousel-inner .item.active {
    display: block;
}

.carousel-inner .item img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Carousel Controls */
.carousel-control {
    position: absolute;
    top: 50%;
    left: 15px;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    font-size: 20px;
    font-weight: bold;
    line-height: 40px;
    color: #fff;
    text-align: center;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.carousel-control.right {
    left: auto;
    right: 15px;
}

.carousel-control:hover,
.carousel-control:focus {
    color: #fff;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.6);
}

/* Carousel Indicators */
.carousel-indicators {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 15;
    width: 60%;
    margin-left: -30%;
    text-align: center;
    list-style: none;
    padding: 0;
    margin-bottom: 0;
}

.carousel-indicators li {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 1px;
    text-indent: -999px;
    border: 1px solid #fff;
    border-radius: 10px;
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.25);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, 0.5);
}

.carousel-indicators .active {
    background-color: #fff;
}

/* Carousel Icons */
.carousel .icon-prev,
.carousel .icon-next {
    width: 20px;
    height: 20px;
    line-height: 1;
}

.carousel .icon-prev:before {
    content: '\2039';
    font-size: 20px;
}

.carousel .icon-next:before {
    content: '\203A';
    font-size: 20px;
}

/* =============================================
   QUOTE SECTION
   ============================================= */
.quote-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    text-align: center;
    color: var(--white);
}

.quote-section blockquote {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-style: italic;
    max-width: 800px;
    margin: 0 auto;
}

/* =============================================
   DONATION SECTION
   ============================================= */
.donation-info {
    background: var(--bg-light);
    padding: 30px;
    border-radius: 10px;
    margin-top: 30px;
}

.donation-info h3 {
    font-size: 18px;
    color: var(--text-dark);
    margin-bottom: 15px;
}

.donation-info p {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 8px;
}

.donation-info strong {
    color: var(--text-dark);
}

/* =============================================
   CONTACT SECTION
   ============================================= */
.contact-section {
    text-align: center;
}

.contact-section .section-subtitle {
    max-width: 600px;
    margin: 0 auto 40px;
}

.instagram-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: var(--white);
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    transition: var(--transition);
}

.instagram-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(220, 39, 67, 0.4);
}

.instagram-btn svg {
    width: 24px;
    height: 24px;
}

/* =============================================
   YOUTUBE EMBED
   ============================================= */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* =============================================
   FOOTER
   ============================================= */
/* Footer styling handled by footer template - removing conflicting styles */

.footer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 40px;
}

.footer-section h4 {
    font-size: 16px;
    color: var(--text-dark);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section ul li a, footer a {
    color: #777777;
    font-size: 14px;
}

/* Footer Social Icons and Positioning Fixes */

/* Compartir en heading */
.footer-share-title,
footer .compartir-title {
    font-family: "Open Sans", sans-serif;
    font-size: 14px;
    font-weight: 300;
    color: rgb(153, 153, 153);
}

/* Footer link colors */
footer .btn-link,
.site-footer .btn-link,
footer a.btn-link {
    color: rgb(135, 135, 135) !important;
}

/* Social share buttons in footer */
footer .btn.btn-default.btn-mini,
footer a[href="#"] {
    width: 32px !important;
    height: 28px !important;
    background-color: rgb(255, 255, 255) !important;
    border-radius: 4px !important;
    border: none;
    color: rgb(72, 193, 201) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 4px;
}

footer .btn.btn-default.btn-mini:hover {
    background-color: rgb(72, 193, 201);
    color: white;
}

/* Icon size inside buttons */
footer .fa {
    font-size: 14px;
}

/* Contact info icons */
footer .fa-envelope-o,
footer .fa-facebook,
footer .fa-instagram {
    font-family: FontAwesome;
    font-size: 14px;
    color: rgb(72, 193, 201);
    margin-right: 8px;
    width: 14px;
    display: inline-block;
}

/* Contact info icons - additional styling */
footer .fa-fw {
    color: rgb(255, 255, 255) !important;
    font-size: 14px !important;
}

/* Position Compartir en section to the right */
footer .share-section,
footer .compartir-section {
    float: right;
    text-align: right;
}

/* Or if using flexbox: */
footer .footer-row,
footer .footer-content {
    display: flex;
    justify-content: space-between;
}

footer .share-section {
    margin-left: auto;
}

.footer-section ul li a:hover {
    color: var(--primary-color);
}

.footer-contact p {
    color: var(--text-gray);
    font-size: 14px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--primary-color);
    color: var(--white);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(0,0,0,0.1);
}

.footer-bottom p {
    color: var(--text-gray);
    font-size: 14px;
}

/* =============================================
   DONATION PAGE STYLES
   ============================================= */
.dona-page {
    background: white;
    padding: 120px 0 60px 0;
}

.dona-page .page-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 72px;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0 0 40px 0;
    padding: 0;
    line-height: 1.1;
    text-align: center;
}

.dona-page .hero-image {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: 0;
    border-radius: 10px;
    box-shadow: var(--shadow);
}

.dona-page .donation-content {
    padding-left: 40px;
}

.dona-page .subtitle {
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 32px;  /* Increased from 24px to 32px to match Contacto */
    color: var(--text-gray);
    margin: 0 0 30px 0;
    line-height: 1.3;
}

.dona-page .donation-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-light);
    margin: 0 0 20px 0;
    text-align: left;
}

.dona-page .bank-info-intro {
    margin-top: 30px !important;
}

.dona-page .donation-button-container {
    margin: 30px 0;
}

.dona-page .btn-donate-monthly {
    background-color: var(--primary-color);
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 14px;
    text-transform: uppercase;
    padding: 12px 24px;
    border: none;
    border-radius: 5px;
    text-decoration: none;
    display: inline-block;
    transition: var(--transition);
}

.dona-page .btn-donate-monthly:hover {
    background-color: var(--primary-dark);
    color: white;
    text-decoration: none;
    transform: translateY(-2px);
}

.dona-page .bank-details {
    margin: 25px 0;
    padding: 20px;
    background: var(--bg-light);
    border-radius: 10px;
}

.dona-page .bank-details p {
    font-size: 14px;
    line-height: 1.5;
    color: var(--text-light);
    margin: 8px 0;
}

.dona-page .bank-details p strong {
    color: var(--text-dark);
    font-weight: 600;
}

/* =============================================
   PAGE-SPECIFIC OVERRIDES
   ============================================= */

/* Main content wrapper */
.wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-content {
    flex: 1;
    padding-top: 80px;
}

/* Page headers */
.page-header {
    padding: 40px 0;
    text-align: center;
}

.page-header h1 {
    font-family: 'Playfair Display', serif;
    font-size: 56px;
    color: var(--primary-color);
    text-transform: uppercase;
    margin: 0;
}

/* Typography improvements */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    color: var(--text-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

p {
    margin-bottom: 15px;
}

/* =============================================
   RESPONSIVE DESIGN
   ============================================= */
@media (max-width: 992px) {
    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-content {
        grid-template-columns: repeat(2, 1fr);
    }

    .content-block {
        flex-direction: column;
    }

    .content-block.reverse {
        flex-direction: column;
    }

    .dona-page .page-title {
        font-size: 56px;
        margin-bottom: 30px;
    }

    .dona-page .donation-content {
        padding-left: 20px;
    }
}

@media (max-width: 768px) {
    /* Bootstrap Grid Responsive */
    .row-fluid {
        flex-direction: column;
    }

    .span6 {
        width: 100%;
        margin-bottom: 20px;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: 20px;
        box-shadow: var(--shadow);
    }

    nav ul.active {
        display: flex;
    }

    .nav-center {
        flex-direction: column;
        width: 100%;
    }

    .nav-center li {
        margin: 0;
        border-bottom: 1px solid #eee;
    }

    .menu-toggle {
        display: flex;
    }

    .hero h1 {
        font-size: 32px;
    }

    .page-hero h1 {
        font-size: 36px;
    }

    .section-title {
        font-size: 32px;
    }

    .cards-grid {
        grid-template-columns: 1fr;
    }

    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .hero {
        height: auto;
        min-height: 100vh;
        padding: 100px 20px;
    }

    .cta-box {
        margin: 30px auto 0;
        position: static !important;
        transform: none !important;
    }

    .dona-page .page-title {
        font-size: 42px;
        margin-bottom: 25px;
        text-align: center;
    }

    .dona-page .donation-content {
        padding-left: 0;
        margin-top: 30px;
    }

    .dona-page .subtitle {
        text-align: center;
        font-size: 26px;  /* Increased from 20px to 26px to match Contacto mobile */
    }

    .dona-page .donation-button-container {
        text-align: center;
    }

    .navbar-nav-integrated {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 480px) {
    .hero h1 {
        font-size: 26px;
    }

    .btn {
        padding: 12px 25px;
        font-size: 13px;
    }
}

/* ============================================================================
   FOOTER FIXES - Applied to all pages
   ============================================================================ */

/* Fix: Social icons visibility - teal background with white icons */
footer .btn.btn-default.btn-mini,
.site-footer .btn.btn-default.btn-mini {
    background-color: #48c1c9 !important;  /* Updated to match plan */
    border: none;
    border-radius: 4px;
    background-image: none !important;
}

footer .btn.btn-default.btn-mini i,
.site-footer .btn.btn-default.btn-mini i,
footer .fa,
.site-footer .fa {
    color: #fff !important;  /* White icons on teal background */
}

/* Fix: Footer columns wrapping - prevent third column from going to new line */
footer .row-fluid,
.site-footer .row-fluid {
    flex-wrap: nowrap !important;
    display: flex;
    justify-content: space-between;
}

/* Adjust column widths to fit properly */
footer .span4,
.site-footer .span4 {
    width: 31% !important;  /* Slightly narrower to fit */
    flex: 0 0 31%;
    max-width: 31%;
}

/* Ensure proper text alignment is respected */
footer .text-right,
.site-footer .text-right {
    text-align: right !important;
}

/* =====================================================
   EDUCACIÓN PAGE CHROME EXTENSION ANALYSIS FIXES
   ===================================================== */

/* Task A: Typography System Fixes */
h2, .section-title,
.education-content h2 {
    font-family: "Open Sans Condensed", sans-serif !important;
    color: #48c1c9 !important;
}

/* Special handling for "50 Años" subtitle */
.video-section h2,
h2:contains("50 Años"),
.subtitle-50-anos {
    color: #878787 !important;
    font-size: 40px !important;
    font-family: "Open Sans Condensed", sans-serif !important;
}

/* Task B: Layout Structure Fixes - Remove Hero Banner Backgrounds */
.page-header,
.educacion-page .page-header {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    background: none !important;  /* Override template's linear-gradient */
    padding: 40px 0 !important;
    border-bottom: none !important;  /* Fix: Remove horizontal line after title */
}

/* Fix: Remove title underline based on user analysis */
.page-header h1,
.page-header h1.educacion-title,
.educacion-page h1,
h1.educacion-title {
    text-decoration: none !important;  /* Corrected: Original doesn't have underline */
    background: transparent !important;
    color: rgb(72, 193, 201) !important;  /* Override template's white color */
}

/* Task C: Footer Social Buttons - Site Wide Fix */
footer .btn-mini,
footer .btn-default,
.site-footer .btn,
footer .btn.btn-default.btn-mini {
    background: #48c1c9 !important;
    background-image: none !important;
    border: none !important;
    border-radius: 4px !important;
}

footer .btn i,
footer .fa,
.site-footer .fa,
footer .btn.btn-default.btn-mini i {
    color: #fff !important;
}

/* Override previous conflicting footer styles */
footer .btn.btn-default.btn-mini,
.site-footer .btn.btn-default.btn-mini {
    background-color: #48c1c9 !important;  /* Override previous white background */
}

/* Task D: Education Level Buttons */
.level-card .btn,
.education-levels .btn,
a[href*="institutocristiano"],
a[href*="icvl.com"],
.education-button {
    background-color: #48c1c9 !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    padding: 10px 20px !important;
    color: white !important;
    text-decoration: none !important;
    border: none !important;
}

.level-card .btn:hover,
.education-levels .btn:hover,
.education-button:hover {
    background-color: #3A87AD !important;
    color: white !important;
}

/* Task E: Social Contact Section De-emphasis */
.social-contact-section,
.seguinos-section,
.social-integration-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
}

.social-contact-section .btn,
.seguinos-section .btn {
    background: transparent !important;
    color: #48c1c9 !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
    font-weight: normal !important;
    text-decoration: underline !important;
}

.social-contact-section .btn:hover,
.seguinos-section .btn:hover {
    color: #3A87AD !important;
}

/* Additional fixes for consistent styling across education page */
.educacion-page .content-section h2,
.education-section h2 {
    font-family: "Open Sans Condensed", sans-serif !important;
    color: #48c1c9 !important;
    font-size: 37px !important;
}

/* Ensure video section maintains correct styling */
.video-section {
    background: transparent !important;
}

/* Fix any card elements that might interfere */
.education-card,
.program-card {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 20px;
    margin: 15px 0;
}

/* ============================================
   USER ANALYSIS - SPECIFIC EDUCACIÓN FIXES
   ============================================ */

/* Issue 3: Education Level Buttons - Compact like original */
.educacion-btn,
.btn.btn-primary.btn-large,
.level-card .btn,
.education-levels .btn {
    display: inline-block !important;
    width: auto !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    border-radius: 4px !important;
    background-color: #48c1c9 !important;
    color: white !important;
    margin: 5px 0 !important;
}

/* Issue 4: Simplify Seguinos section - Remove card styling */
.seguinos-section .card,
.contact-card,
.social-contact-section,
.social-integration-section {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Hide complex headings if they exist */
h3.seguinos-heading,
.seguinos-section h3,
.social-contact-section h3 {
    display: none !important;
}

/* Style contact links to match original */
.seguinos-section a,
.contact-section a,
.social-contact-section a {
    color: #878787 !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 16px !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
    font-weight: normal !important;
}

.seguinos-section a:hover,
.contact-section a:hover,
.social-contact-section a:hover {
    text-decoration: underline !important;
    color: #878787 !important;
}

/* Additional button overrides for education page specifically */
.educacion-page .btn,
.educacion-page .btn-large {
    width: auto !important;
    display: inline-block !important;
    padding: 4px 12px !important;
    font-size: 14px !important;
}

/* END EDUCACIÓN PAGE FIXES */

/* =====================================================
   CONTACTO PAGE SIMPLIFIED STRUCTURE - USER PROVIDED
   ===================================================== */

/* Contacto Section Styles */
.contacto-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px 60px 20px;  /* Added bottom padding like Dona page */
    background: #fff;
}

.contacto-section .page-header {
    margin-bottom: 60px;  /* Added more space between header and content */
    padding-bottom: 20px;  /* Additional spacing */
}

.contacto-title {
    color: #3CBBB1;
    font-size: 48px;
    font-weight: bold;
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: #3CBBB1;
    margin: 0 0 40px 0;  /* Consistent with Dona page margin pattern */
    text-align: center;
    font-family: "Open Sans Condensed", sans-serif;  /* Match font consistency */
}

.contacto-content {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-top: 20px;  /* Additional top margin for better separation */
    padding-top: 20px;  /* Extra padding to match Dona page spacing */
}

.contacto-image {
    flex: 0 0 40%;
    max-width: 400px;
}

.contacto-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.contacto-info {
    flex: 1;
    padding-left: 20px;
}

.contacto-subtitle {
    font-family: "Open Sans", sans-serif;
    font-size: 32px;  /* Increased from 24px to 32px */
    color: #878787 !important;  /* Changed to gray like Dona page subtitle */
    margin-bottom: 25px;
    line-height: 1.4;
    font-weight: 400;  /* Added for better readability */
}

.instagram-message {
    background: #f8f9fa;
    padding: 25px;
    border-radius: 8px;
    border-left: 4px solid #3CBBB1;
}

.instagram-message p {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
}

.btn-instagram {
    background-color: #3CBBB1;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 500;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    border: none;
    transition: background-color 0.3s ease;
}

.btn-instagram:hover {
    background-color: #2a9d94;
    color: white;
    text-decoration: none;
}

.btn-instagram i {
    font-size: 16px;
}

/* Responsive Design for Contacto */
@media (max-width: 768px) {
    .contacto-section {
        padding: 30px 15px 40px 15px;  /* Reduce padding on mobile */
    }

    .contacto-section .page-header {
        margin-bottom: 40px;  /* Reduce spacing on mobile */
        padding-bottom: 15px;
    }

    .contacto-content {
        flex-direction: column;
        gap: 30px;
        margin-top: 10px;  /* Reduce top margin on mobile */
        padding-top: 10px;
    }

    .contacto-info {
        padding-left: 0;
    }

    .contacto-title {
        font-size: 36px;
        margin-bottom: 25px;  /* Consistent with mobile spacing */
    }

    .contacto-subtitle {
        font-size: 26px;  /* Increased from 20px to 26px for mobile */
        text-align: center;
    }

    .instagram-message {
        padding: 20px;
    }

    .btn-instagram {
        width: 100%;
        justify-content: center;
    }
}

/* Override any conflicting page header styles for contacto */
.page-contacto .page-header,
.contacto-page .page-header {
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    border-bottom: none !important;
}

.page-contacto .page-header h1,
.contacto-page .page-header h1 {
    background: transparent !important;
    color: #3CBBB1 !important;
}

/* =====================================================
   ENHANCED FOOTER SOCIAL BUTTON FIXES
   ===================================================== */

/* Override previous footer social button styles with correct implementation */
footer .btn-mini,
footer .btn-default,
.site-footer .btn,
footer .btn.btn-default.btn-mini {
    background: #48c1c9 !important;
    background-image: none !important;
    background-color: #48c1c9 !important;
    border: none !important;
    border-radius: 4px !important;
    width: 32px !important;
    height: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 4px !important;
}

footer .btn i,
footer .fa,
.site-footer .fa,
footer .btn.btn-default.btn-mini i,
footer .btn-mini i,
footer .btn-default i {
    color: #fff !important;
    font-size: 14px !important;
}

footer .btn:hover,
footer .btn-mini:hover,
footer .btn-default:hover {
    background-color: #3A87AD !important;
}

/* =====================================================
   ADDITIONAL TYPOGRAPHY AND LAYOUT ENHANCEMENTS
   ===================================================== */

/* Ensure all section titles use correct font and color consistently */
.section-title,
.content-title,
main h2,
section h2 {
    font-family: "Open Sans Condensed", sans-serif !important;
    color: #48c1c9 !important;
    font-weight: 400 !important;
}

/* Special handling for subtitle elements */
.subtitle,
.section-subtitle,
h2.subtitle {
    color: #878787 !important;
    font-family: "Open Sans Condensed", sans-serif !important;
}

/* Ensure page headers have consistent styling */
.page-header {
    background: transparent !important;
    background-image: none !important;
    padding: 40px 0 !important;
    text-align: center;
}

.page-header h1 {
    color: #48c1c9 !important;
    font-family: "Open Sans Condensed", sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    margin: 0;
    background: transparent !important;
}

/* Button consistency across all pages */
.btn-primary,
.btn.btn-primary {
    background-color: #48c1c9 !important;
    border-color: #48c1c9 !important;
    font-family: "Open Sans", sans-serif !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background-color: #3A87AD !important;
    border-color: #3A87AD !important;
}

/* END ENHANCED CSS FIXES */