:root{
    --blue:#0b1f3a;
    --light-blue:#dce8f5;
    --red:#741313;
    --gold:#d4af37;
    --text:#444;
}
html{
    scroll-behavior:smooth;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Lato', Arial, sans-serif;
    background:#fafafa;
}

header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 80px;
    background:white;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

.logo{
    width:90px;
}


.hero{
    height:80vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:
    linear-gradient(
        rgba(11,31,58,0.75),
        rgba(11,31,58,0.75)
    ),
    url("church.jpg");

    background-size:cover;
    background-position:center;

    color:white;
}

.hero-logo{
    width:500px;
    margin-bottom:5px;
    transform:translateX(-30px);
}

.hero-button{
    padding:18px 50px;
    font-size:20px;
    border-radius:50px;
    background:var(--red);
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}


.hero-button:hover{
    background:#ae1b1b;
    transform:translateY(-3px);
}

.hero p{
    font-size:22px;
    width:650px;
    max-width:90%;
    margin-bottom:35px;
}


button{
    padding:16px 40px;
    font-size:18px;
    border:none;
    border-radius:40px;
    cursor:pointer;
    background:white;
    color:#c62828;
    font-weight:bold;
    transition:.3s;
}


button:hover{
    background:#f5f5f5;
    transform:translateY(-3px);
}
nav a{
    text-decoration:none;
    color:#333;
    margin-left:25px;
    font-weight:bold;
    transition:.3s;
}


nav a:hover{
    color:var(--red);
}
.hero h1{
    font-family:'Playfair Display', serif;
    font-size:clamp(36px,5vw,56px);
    margin-bottom:20px;
}/* SERVICES SECTION */


.services{
    padding:80px 20px;
    text-align:center;
    background:#dce8f5;
}

.services h2{
    font-family:'Playfair Display', serif;
    font-size:42px;
    font-weight:700;
    color:var(--red);
    margin-bottom:50px;
}

.services h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#d4af37;
    margin:15px auto 0;
    border-radius:10px;
}



.service-container{
    display:flex;
    justify-content:center;
    gap:30px;
    flex-wrap:wrap;
}



.service-card{
    width:280px;
    padding:35px;
    border-radius:15px;
    background:white;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
    transition:.3s;
}


.service-card:hover{
    transform:translateY(-8px);
}


.service-card h3{
    font-size:25px;
    margin-bottom:15px;
    color:#333;
}



.service-card p{
    font-size:30px;
    font-weight:bold;
    color:#d4af37;
    margin-bottom:10px;
}



.service-card span{
    color:#555;
}
/* ABOUT SECTION */


.about{
    padding:90px 80px;
    display:flex;
    align-items:center;
    gap:60px;
    background:#fafafa;
}



.about-image{
    flex:1;
}


.about-image img{
    width:90%;
    max-height:450px;
    object-fit:cover;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);
}



.about-content{
    flex:1;
}



.about-content h2{
    font-family:'Playfair Display', serif;
    font-size:42px;
    font-weight:700;
    color:var(--red);
    margin-bottom:25px;
}



.about-content h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:#d4af37;
    margin-top:15px;
    border-radius:10px;
}



.about-content p{
    font-size:19px;
    line-height:1.7;
    color:#444;
    margin-bottom:20px;
}



.about-content button{
    background:var(--red);
    color:white;
}


.about-content button:hover{
    background:#7d1515;
}

.about-button{
    display:inline-block;
    padding:16px 40px;
    font-size:18px;
    border-radius:40px;
    background:var(--red);
    color:white;
    text-decoration:none;
    font-weight:bold;
    transition:.3s;
}


.about-button:hover{
    background:#ae1b1b;
    transform:translateY(-3px);
}

/* MINISTERIOS HERO */

.page-hero{
    height:55vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    background:
    linear-gradient(
        rgba(11,31,58,.72),
        rgba(11,31,58,.72)
    ),
    url("ministerios-hero.jpg");

    background-size:cover;
    background-position:center;

    color:white;
}

.nosotros-hero{
    background:
    linear-gradient(
        rgba(11,31,58,.72),
        rgba(11,31,58,.72)
    ),
    url("nosotros-hero.jpg");

    background-size:cover;
    background-position:center bottom;
}


.page-hero h1{
    font-family:'Playfair Display', serif;
    font-size:60px;
    margin-bottom:20px;
}


.page-hero p{
    font-size:22px;
    width:700px;
    max-width:90%;
}



.ministry{

    display:flex;

    align-items:center;

    gap:70px;

    padding:90px 100px;

}



.ministry-image{

    flex:1;

}


.ministry-image img{

    width:100%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.damas-image{

    flex:1;

}


.damas-image img{

    width:80%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transform: translateX(40px);

}

.caballeros-image{

    flex:1;

}


.caballeros-image img{

    width:80%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transform: translateX(40px);

}

.intercesion-image{

    flex:1;

}


.intercesion-image img{

    width:80%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transform: translateX(40px);

}

.cocina-image{

    flex:1;

}


.cocina-image img{

    width:80%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transform: translateX(40px);

}

.mantenimiento-image{

    flex:1;

}


.mantenimiento-image img{

    width:80%;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

    transform: translateX(40px);

}

.ministry-text{

    flex:1;

}



.ministry-text h2{

    font-family:'Playfair Display', serif;

    font-size:44px;

    color:var(--red);

    margin-bottom:20px;

}



.ministry-text p{

    font-size:20px;

    line-height:1.8;

    color:var(--text);

}



.reverse{

    flex-direction:row-reverse;

}
.ministry-title{
    display:flex;
    align-items:center;
    gap:15px;
}


.ministry-title img{
    width:60px;
    height:60px;
    border-radius:50%;
    object-fit:cover;
}


.ministry-title h2{
    margin:0;
}

/* =========================
   NOSOTROS PAGE
========================= */

.about-section{
    padding:90px 100px;
    background:#fafafa;
}


.about-section .about-content{
    max-width:1000px;
    margin:auto;
    flex:none;
}


.about-section .about-content h2{
    font-family:'Playfair Display', serif;
    font-size:42px;
    font-weight:700;
    color:var(--red);
    margin-bottom:25px;
}


.about-section .about-content h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:var(--gold);
    margin-top:15px;
    border-radius:10px;
}


.about-section .about-content p{
    font-size:19px;
    line-height:1.8;
    color:var(--text);
    margin-bottom:20px;
}


.mission{
    background:var(--light-blue);
}

/* =========================
   PASTORS SECTION
========================= */

.pastors{
    padding:90px 50px;
    text-align:center;
    background:#fafafa;
}


.pastors h2{
    font-family:'Playfair Display', serif;
    font-size:42px;
    font-weight:700;
    color:var(--red);
    margin-bottom:50px;
}


.pastors h2::after{
    content:"";
    display:block;
    width:70px;
    height:4px;
    background:var(--gold);
    margin:15px auto 0;
    border-radius:10px;
}


.pastor-container{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}


.pastor-card{
    width:320px;
    padding:35px;
    background:rgb(223, 245, 255);
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}



.pastor-card:hover{
    transform:translateY(-8px);
}


.pastor-card img{
    width:170px;
    height:170px;
    object-fit:cover;
    border-radius:50%;
    margin-bottom:25px;
    object-position:center 30%;
}


.pastor-card h3{
    font-family:'Montserrat', sans-serif;
    font-size:25px;
    font-weight:800;
    color:var(--red);
    margin-bottom:5px;
    letter-spacing:1px;
}


.pastor-card p{
    font-size:17px;
    line-height:1.7;
    color:var(--text);

}
.pastor-card h4{
    font-family:'Playfair Display', serif;
    font-size:26px;
    font-weight:600;
    color:#333;
    letter-spacing:1px;
    margin-top:8px;
}

.visit-info{
    margin-top:60px;
    max-width:700px;
    margin-left:auto;
    margin-right:auto;
}


.visit-info h3{
    font-family:'Playfair Display', serif;
    font-size:32px;
    color:var(--red);
    margin-bottom:15px;
}


.visit-info p{
    font-size:18px;
    line-height:1.7;
    color:var(--text);
    margin-bottom:20px;
}


.visit-button{
    display:inline-block;
    padding:16px 40px;
    background:var(--red);
    color:white;
    text-decoration:none;
    border-radius:40px;
    font-weight:bold;
    transition:.3s;
}


.visit-button:hover{
    background:#ae1b1b;
    transform:translateY(-3px);
}

/* SOCIAL LINKS */

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


.social-links a{
    width:45px;
    height:45px;
    display:flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:var(--red);
    color:white;
    text-decoration:none;
    font-size:22px;
    transition:.3s;
}


.social-links a:hover{
    background:var(--gold);
    transform:translateY(-3px);
}

/* =========================
   PREDICAS PAGE
========================= */


.predicas{
    padding:90px 80px;
    background:#f8e0d7;
    text-align:center;
}


.predicas h2{
    font-family:'Playfair Display', serif;
    font-size:42px;
    color:var(--red);
    margin-bottom:50px;
}


.predica-container{
    display:flex;
    justify-content:center;
    gap:40px;
    flex-wrap:wrap;
}


.predica-card{
    width:320px;
    background:rgb(255, 255, 255);
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;
}


.predica-card:hover{
    transform:translateY(-8px);
}


.predica-card img{
    width:100%;
    height:200px;
    object-fit:cover;
}


.predica-card h3{
    font-family:'Playfair Display', serif;
    font-size:25px;
    color:var(--red);
    margin:25px 20px 10px;
}


.predica-card p{
    font-size:17px;
    color:var(--text);
    line-height:1.7;
    padding:0 20px 30px;
}
.predicas-hero{
    position:relative;
    height:55vh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:white;
    overflow:hidden;
}


.predicas-hero::before{
    content:"";
    position:absolute;
    inset:-20px;

    background:
    linear-gradient(
        rgba(11,31,58,.72),
        rgba(11,31,58,.72)
    ),
    url("predicas-hero.jpg");

    background-size:cover;
    background-position:center;

    filter:blur(5px);
    z-index:0;
}


.predicas-hero h1,
.predicas-hero p{
    position:relative;
    z-index:1;
}

.predica-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin:20px 0 30px;
    padding:14px 30px;

    background:var(--red);
    color:white;
    text-decoration:none;
    border-radius:40px;

    font-weight:bold;
    font-size:16px;

    transition:.3s;
}


.predica-button:hover{
    background:#ae1b1b;
    transform:translateY(-3px);
}


.predica-button i{
    font-size:20px;
}
/* =========================
   CONTACTO PAGE
========================= */

.contact-section{

    display:flex;
    justify-content:center;
    align-items:flex-start;

    gap:30px;

    padding:70px 50px;

    background:#fafafa;

    flex-wrap:wrap;

}



.contact-info{

    flex:0 1 400px;

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.08);

}



.contact-info h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:var(--red);

    margin-bottom:30px;

}



.contact-info h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--gold);

    margin-top:15px;

    border-radius:10px;

}



.contact-info p{

    font-size:19px;

    line-height:1.8;

    color:var(--text);

    margin-bottom:25px;

}



.contact-info strong{

    color:var(--red);

}



.contact-info a{

    text-decoration:none;

    color:var(--text);

    transition:.3s;

}



.contact-info a:hover{

    color:var(--red);

}



/* SOCIAL BUTTONS */

.contact-social{

    display:flex;

    gap:20px;

    margin-top:35px;

}



.contact-social a{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    background:var(--red);

    color:white;

    font-size:24px;

    transition:.3s;

}



.contact-social a:hover{

    background:var(--gold);

    transform:translateY(-5px);

}



/* MAP */

.contact-map{

    flex:1;

    min-width:500px;

}



.contact-map iframe{

    width:100%;

    height:500px;

    border:none;

    border-radius:20px;

    box-shadow:0 15px 35px rgba(0,0,0,.15);

}

.contacto-hero{
    background:
    linear-gradient(
        rgba(11,31,58,.72),
        rgba(11,31,58,.72)
    ),
    url("contacto-hero.jpg");

    background-size:cover;
    background-position:center;
}

/* =========================
   PRAYER SECTION
========================= */

.prayer-section{

    text-align:center;

    padding:80px 20px;

    background:var(--light-blue);

}



.prayer-section h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:var(--red);

    margin-bottom:20px;

}



.prayer-section h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--gold);

    margin:15px auto 0;

    border-radius:10px;

}



.prayer-section p{

    max-width:700px;

    margin:0 auto 35px;

    font-size:20px;

    line-height:1.7;

    color:var(--text);

}



.prayer-button{

    display:inline-block;

    padding:16px 40px;

    background:var(--red);

    color:white;

    text-decoration:none;

    border-radius:40px;

    font-weight:bold;

    transition:.3s;

}



.prayer-button:hover{

    background:#ae1b1b;

    transform:translateY(-3px);

}

.right-contact{

    flex:0 1 500px;

}



.prayer-box{

    margin-top:25px;

    background:var(--light-blue);

    padding:30px;

    border-radius:20px;

    text-align:center;

}



.prayer-box h2{

    font-family:'Playfair Display', serif;

    color:var(--red);

    font-size:28px;

    margin-bottom:10px;

}



.prayer-box p{

    font-size:17px;

    margin-bottom:20px;

}






.service-name{
    color:var(--gold);
    font-weight:bold;
    display:inline-block;
    margin-top:-15px;
}

/* =========================
   SIEMBRA PAGE
========================= */


.siembra-hero{

    background:
    linear-gradient(
        rgba(11,31,58,.72),
        rgba(11,31,58,.72)
    ),
    url("siembra-hero.jpg");

    background-size:cover;
    background-position:center;

}


/* Main message */

.siembra-content{

    padding:90px 80px;

    text-align:center;

}


.siembra-content h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:var(--red);

    margin-bottom:25px;

}



.siembra-content h2::after{

    content:"";

    display:block;

    width:70px;

    height:4px;

    background:var(--gold);

    margin:15px auto 0;

    border-radius:10px;

}



.siembra-content p{

    max-width:850px;

    margin:0 auto 35px;

    font-size:20px;

    line-height:1.8;

    color:var(--text);

}



/* Bible verse box */

.verse{

    max-width:700px;

    margin:40px auto 0;

    padding:35px;

    background:var(--light-blue);

    border-left:5px solid var(--gold);

    border-radius:15px;

}



.verse p{

    font-family:'Playfair Display', serif;

    font-size:24px;

    font-style:italic;

    margin-bottom:15px;

}



.verse strong{

    color:var(--red);

    font-size:18px;

}



/* Giving section */

.siembra-options{

    background:#fafafa;

    padding:80px 20px;

    text-align:center;

}



.siembra-options h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:var(--red);

    margin-bottom:50px;

}



.siembra-card{

    background:white;

    width:350px;

    margin:auto;

    padding:45px 35px;

    border-radius:20px;

    box-shadow:0 10px 30px rgba(0,0,0,.1);

    transition:.3s;

}



.siembra-card:hover{

    transform:translateY(-8px);

}



.siembra-card i{

    font-size:55px;

    color:var(--gold);

    margin-bottom:20px;

}



.siembra-card h3{

    font-size:28px;

    margin-bottom:15px;

    color:#333;

}



.siembra-card p{

    font-size:18px;

    line-height:1.6;

    color:var(--text);

    margin-bottom:30px;

}

/* =========================
   PAYMENT METHODS
========================= */


.payment-section{

    padding:80px 20px;

    background:var(--light-blue);

    text-align:center;

}



.payment-section h2{

    font-family:'Playfair Display', serif;

    font-size:42px;

    color:var(--red);

    margin-bottom:20px;

}



.payment-description{

    font-size:20px;

    margin-bottom:50px;

    color:var(--text);

}



.payment-container{

    display:flex;

    justify-content:center;

    gap:30px;

    flex-wrap:wrap;

}



.payment-card{

    width:250px;

    background:white;

    padding:35px;

    border-radius:20px;

    box-shadow:0 10px 25px rgba(0,0,0,.08);

    transition:.3s;
    
    text-decoration:none;
    
    color:inherit;
    
    cursor:pointer;

}



.payment-card:hover{

    transform:translateY(-8px);

}



.payment-card i{

    font-size:45px;

    color:var(--gold);

    margin-bottom:20px;

}



.payment-card h3{

    font-size:26px;

    margin-bottom:15px;

    color:#333;

}



.payment-card p{

    color:var(--text);

    font-size:18px;

}



.payment-card a{

    display:inline-block;

    margin-top:10px;

    color:var(--red);

    font-weight:bold;

    text-decoration:none;

}

.payment-card strong,
.payment-card p{
    overflow-wrap: break-word;
    word-break: break-word;
}

.payment-card strong{
    display:block;
    margin-top:10px;
    color:var(--gold);
    font-size:16px;
}

.payment-handle{

    display:block;

    color:var(--gold);

    font-size:16px;

    white-space:nowrap;



}


.payment-email{

    display:block;

    color:var(--gold);

    font-size:14px;

    overflow-wrap:normal;

}

/* =========================
   FOOTER
========================= */


footer{

    background:#0b1f3a;

    color:white;

    padding-top:60px;

}



.footer-container{

    max-width:1200px;

    margin:auto;

    padding:0 40px;

    display:flex;

    justify-content:space-between;

    gap:50px;

    flex-wrap:wrap;

}



.footer-logo{

    max-width:300px;

}



.footer-logo img{

    width:120px;

    margin-bottom:20px;

}



.footer-logo p{

    line-height:1.6;

    color:#ddd;

}



footer h3{

    color:var(--gold);

    margin-bottom:20px;

    font-size:22px;

}



.footer-links{

    display:flex;

    flex-direction:column;

}



.footer-links a{

    color:white;

    text-decoration:none;

    display:inline-block;

    transition:.3s;

}



.footer-links a:hover{

    color:var(--gold);

}



.footer-contact p{

    line-height:1.6;

    color:#ddd;

}



.footer-social{

    display:flex;

    gap:15px;

    margin-top:20px;

}



.footer-social a{

    width:40px;

    height:40px;

    border-radius:50%;

    background:var(--gold);

    color:#0b1f3a;

    display:flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    transition:.3s;

}



.footer-social a:hover{

    transform:translateY(-5px);

}



.footer-bottom{

    margin-top:50px;

    padding:20px;

    text-align:center;

    background:#071426;

}



.footer-bottom p{

    margin:0;

    color:#ccc;



}


.footer-links{

    width:300px;

}
.footer-link-grid{

    display:grid;

    grid-template-columns:repeat(3, auto);

    gap:10px 25px;

}

footer{
    text-align:left;
}


.footer-bottom{
    text-align:center;
}


.footer-social{
    justify-content:flex-start;
}
/* Extra space before footer on Siembra */

.payment-section{
    padding-bottom:120px;
}

/* GLOBAL PAGE TEXT CONSISTENCY */

.contact-info p,
.siembra-content p,
.about-section .about-content p,
.ministry-text p,
.about-content p{
    font-size:19px;
    line-height:1.7;
}



/* =========================
   MOBILE RESPONSIVE DESIGN
========================= */

@media (max-width:768px){


/* HEADER */

header{
    flex-direction:column;
    padding:20px;
    gap:20px;
}


.logo{
    width:80px;
}


nav{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;
    flex-wrap:nowrap;
    gap:12px;
    width:100%;
}


nav a{
    margin:0;
    font-family:'Lato', Arial, sans-serif;
    font-size:13px;
    font-weight:700;
    white-space:nowrap;
    letter-spacing:-0.3px;
}



/* HERO */

.hero{
    height:70vh;
    padding:20px;
}


.hero-logo{
    width:300px;
    transform:none;
}


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


.hero p{
    width:auto;
    font-size:18px;
}



/* PAGE HEROES */

.page-hero{
    height:45vh;
    padding:20px;
}


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


.page-hero p{
    width:auto;
    font-size:18px;
}



/* ABOUT SECTIONS */

.about,
.ministry{
    flex-direction:column;
    padding:50px 25px;
    gap:35px;
}


.about-image img{
    width:100%;
}


.ministry-text h2{
    font-size:36px;
}



/* SERVICES */

.services{
    padding:50px 20px;
}


.services h2,
.about-content h2,
.predicas h2,
.contact-info h2,
.payment-section h2{
    font-size:34px;
}



/* PASTORS */

.pastors{
    padding:50px 20px;
}



/* PREDICAS */

.predicas{
    padding:50px 20px;
}


.predica-card{
    width:100%;
    max-width:350px;
}



/* CONTACT */

.contact-section{
    padding:40px 20px;
}


.contact-info{
    width:100%;
}


.contact-map{
    min-width:100%;
}


.contact-map iframe{
    height:350px;
}



/* SIEMBRA */

.siembra-content{
    padding:50px 25px;
}


.siembra-content h2{
    font-size:34px;
}


.payment-card{
    width:100%;
    max-width:330px;
}



/* FOOTER */

.footer-container{
    flex-direction:column;
    padding:0 25px;
    gap:35px;
}


.footer-links{
    width:auto;
}


.footer-link-grid{
    grid-template-columns:repeat(2, auto);
}

.about-section{
    padding:50px 25px;
}


.about-section .about-content{
    width:100%;
}


.about-section .about-content p{
    font-size:18px;
    line-height:1.7;
}


.payment-email{
    font-size:13px !important;
    white-space:nowrap;
    word-break:normal;
    overflow-wrap:normal;
}



}

.pastor-images{
    display:flex;
    justify-content:center;
    gap:20px;
    margin-bottom:25px;
}

.pastor-images img{
    width:170px;
    height:170px;
    object-fit:cover;
    border-radius:50%;
}

@media(max-width:768px){

    .pastor-images img{
        width:120px;
        height:120px;
    }

}