/* Load your custom fonts */
@font-face {
    font-family: "RoughneckExtreme";
    src: url("/fonts/Roughneck%20Extreme%20W00%20Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Gordita";
    src: url("/fonts/Gordita-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Gordita-light";
    src: url("/fonts/Gordita-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Zuumerough";
    src: url("/fonts/Zuumerough-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;
}

/* Apply styles */
h1 {
    font-family: "Zuumerough", sans-serif;
}

h2 {
    font-family: "Gordita", sans-serif;
    font-size: 15px;
}

body {
    font-family: "Gordita-light", sans-serif;
    font-size: 10px;
}

.prayer-header {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background:
        linear-gradient(rgba(0, 29, 35, 0.8), rgba(0, 29, 35, 0.8)),
        url(../img/prayer-1.png) center center no-repeat;
    background-size: cover;
}

.page-header {
    padding-top: 12rem;
    padding-bottom: 8rem;
    background:
        linear-gradient(rgba(0, 29, 35, 0.8), rgba(0, 29, 35, 0.8)),
        url("/assets/img/IDP-1.png") center center no-repeat;
    background-size: cover;
}

.page-header-new {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background:
        linear-gradient(rgba(0, 29, 35, 0.8), rgba(0, 29, 35, 0.8)),
        url(../img/our-team.jpg) center center no-repeat;
    background-size: cover;
}

.page-header-donate {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background:
        linear-gradient(rgba(0, 29, 35, 0.8), rgba(0, 29, 35, 0.8)),
        url(../img/donates.png) center center no-repeat;
    background-size: cover;
}

.page-header-new {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background:
        linear-gradient(hsla(190, 100%, 7%, 0.7), hsla(190, 100%, 7%, 0.5)),
        url(../img/ignition-2.png) center center no-repeat;
    background-size: cover;
}

@media (max-width: 768px) {
    .newsletter-img {
        height: 100% !important;
    }
}

/* =============================
   HEADER RESPONSIVE ADJUSTMENTS
   ============================= */
.carousel-caption-badge {
    /* desktop base setup */
    display: inline-block;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    padding: 20px 25px;
    text-align: left;
    max-width: 90%;
}

/* Free-floating caption variant (merged missionary hero) */
.hero-caption-free {
    position: absolute;
    top: auto;
    bottom: 5%;
    left: 5%;
    right: auto;
    text-align: left;
}

/* TITLE and SUBTITLE — base look, shared by every <x-hero> instance.
   --hero-title-lg/--hero-subtitle-lg let one instance override the desktop
   size (only the merged missionary hero needs this today). */
.hero-title {
    font-size: var(--hero-title-lg, 105px) !important;
    letter-spacing: 1px;
    color: #f5b54b;
    margin-bottom: 0;
    margin-top: 3px;
    line-height: 1;
    font-family: 'Gordita-light', sans-serif;
    text-transform: uppercase;
    text-align: left;
}

.hero-subtitle {
    font-size: var(--hero-subtitle-lg, 175px) !important;
    letter-spacing: 1px;
    color: white;
    margin-bottom: 0;
    line-height: 0.8;
    font-family: 'Zuumerough', sans-serif;
    text-transform: uppercase;
    text-align: left;
}

.hero-team, .hero-testimonies, .hero-security,
.hero-outreach, .hero-infrastructure {
    top: auto !important;
    bottom: 70px !important;
}

/* Mobile caption position — identical transform/position was previously
   repeated verbatim at all 3 breakpoints below; declared once here since
   max-width:420px/320px are subsets of max-width:768px and inherit it via
   the normal CSS cascade. */
@media (max-width: 768px) {
    .hero-about, .hero-team, .hero-infrastructure, .hero-farm,
    .hero-outreach, .hero-donate, .hero-testimonies, .hero-prayer {
        transform: translateX(-50%) !important;
        top: auto !important;
        bottom: 30px !important;
    }

    .hero-idp, .hero-security, .hero-resources {
        transform: translateX(-50%) !important;
    }
}

/* TITLE and SUBTITLE — MOBILE-Large.
   Font sizes vary per page; each <x-hero> call sets its own
   --hero-title-md/--hero-subtitle-md (etc.) inline via `style`, falling
   back to the shared defaults below when a page doesn't need a different size. */
@media (max-width: 768px) {
    #header-carousel .carousel-caption {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 5 !important;
        width: 100% !important;
    }

    .carousel-caption-badge {
        display: inline-block !important;
        background: rgba(0, 0, 0, 0.5) !important;
        border-radius: 8px !important;
        padding: 20px 20px !important;
        text-align: center !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        z-index: 5 !important;
        width: auto !important;
        max-width: 90% !important;
    }

    .carousel-caption-badge .hero-title {
        font-size: var(--hero-title-md, 50px) !important;
        margin-top: 6px;
    }

    .carousel-caption-badge .hero-subtitle {
        font-size: var(--hero-subtitle-md, 95px) !important;
    }

    /* ABOUT */
    #header-carousel .carousel-item {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        position: relative !important;
        overflow: hidden !important;
    }

    #header-carousel .carousel-item img[src*="img.jpeg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
        object-position: 70% center !important;
    }

    /* VIDEO (homepage) — restore full height on mobile */
    #header-carousel .carousel-item:has(.video-wrapper) {
        height: 100vh !important;
        min-height: 100vh !important;
    }

    .video-wrapper {
        height: 100vh !important;
        min-height: 100vh !important;
    }

    #header-carousel .carousel-item img {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #header-carousel .carousel-caption * {
        pointer-events: auto !important;
    }

    #header-carousel .carousel-item img[src*="our-team.jpg"] {
        min-height: 90vh !important;
    }

    #header-carousel .carousel-item img[src*="infrastructure-hero.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
        object-position: 80% top !important;
    }

    #header-carousel .carousel-item img[src*="farm-hero.jpeg"] {
        object-fit: cover !important;
        object-position: 40% center !important;
    }

    #header-carousel .carousel-item img[src*="secbanner1.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
        object-position: 50% center !important;
    }

    #header-carousel .carousel-item img[src*="donate-hero.jpeg"] {
        top: 30px !important; /* negative = shift up, positive = shift down */
    }

    #header-carousel .carousel-item img[src*="prayer-partner-hero.jpg"] {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        object-fit: cover !important;
        object-position: 40% center !important;
    }

    .section-label {
        min-width: 100% !important;
    }

    .resource-verse-img {
        width: 200px !important;
        margin-top: -10px !important;
    }
}

/* TITLE and SUBTITLE - MOBILE-Medium (375px and below) */
@media only screen and (max-width: 420px) {
    .carousel-caption-badge .hero-title {
        font-size: var(--hero-title-sm, 40px) !important;
        margin-top: 6px;
    }

    .carousel-caption-badge .hero-subtitle {
        font-size: var(--hero-subtitle-sm, 75px) !important;
        line-height: var(--hero-subtitle-sm-lh, 0.8) !important;
    }

    /* ABOUT */
    #header-carousel .carousel-item {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* VIDEO (homepage) — restore full height on mobile */
    #header-carousel .carousel-item:has(.video-wrapper) {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    .video-wrapper {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    #header-carousel .carousel-item img {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #header-carousel .carousel-caption * {
        pointer-events: auto !important;
    }

    #header-carousel .carousel-item img[src*="our-team.jpg"] {
        min-height: 90vh !important;
    }

    #header-carousel .carousel-item img[src*="infrastructure-hero.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
    }

    #header-carousel .carousel-item img[src*="farm-hero.jpeg"] {
        object-fit: cover !important;
        object-position: 40% center !important;
    }

    #header-carousel .carousel-item img[src*="staff-4a.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
        object-position: 60% center !important;
    }

    #header-carousel .carousel-item img[src*="donate-hero.jpeg"] {
        top: 30px !important; /* negative = shift up, positive = shift down */
    }

    #header-carousel .carousel-item img[src*="prayer-partner-hero.jpg"] {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        object-fit: cover !important;
        object-position: 40% center !important;
    }
}

/* TITLE and SUBTITLE - MOBILE-Small (≤ 320 px) */
@media only screen and (max-width: 320px) {
    .carousel-caption-badge .hero-title {
        font-size: var(--hero-title-xs, 40px) !important;
        margin-top: 6px;
    }

    .carousel-caption-badge .hero-subtitle {
        font-size: var(--hero-subtitle-xs, 70px) !important;
    }

    /* ABOUT */
    #header-carousel .carousel-item {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        max-height: 100vh !important;
        max-height: 100dvh !important;
        height: 100vh !important;
        height: 100dvh !important;
        position: relative !important;
        overflow: hidden !important;
    }

    /* VIDEO (homepage) — restore full height on mobile */
    #header-carousel .carousel-item:has(.video-wrapper) {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    .video-wrapper {
        height: 100vh !important;
        height: 100dvh !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    }

    #header-carousel .carousel-item img {
        position: relative !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
    }

    #header-carousel .carousel-caption * {
        pointer-events: auto !important;
    }

    #header-carousel .carousel-item img[src*="our-team.jpg"] {
        min-height: 90vh !important;
    }

    #header-carousel .carousel-item img[src*="infrastructure-hero.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
    }

    #header-carousel .carousel-item img[src*="farm-hero.jpeg"] {
        object-fit: cover !important;
        object-position: 40% center !important;
    }

    #header-carousel .carousel-item img[src*="staff-4a.jpg"] {
        min-height: 90vh !important;
        object-fit: cover !important;
        object-position: 60% center !important;
    }

    #header-carousel .carousel-item img[src*="donate-hero.jpeg"] {
        top: 30px !important; /* negative = shift up, positive = shift down */
    }

    #header-carousel .carousel-item img[src*="prayer-partner-hero.jpg"] {
        min-height: 100vh !important;
        min-height: 100dvh !important;
        object-fit: cover !important;
        object-position: 35% center !important;
    }

    .nav-logo-text {
        font-size: 18.5px !important;
    }
}

/* Matthew 6:33 Motto Section */
.matthew-section {
    background-color: #ffffff;
}

.matthew-section .container-xxl {
    padding-bottom: 0 !important;
}

/* ===== DESKTOP ===== */
.matthew-section h1 {
    font-family: "Gordita-light";
    font-weight: 200;
    letter-spacing: 8px;
    font-size: 65px;
    margin-bottom: -20px;
    position: relative;
    z-index: 2;
    text-align: center;
}

.matthew-section img {
    display: block;
    margin: 0;
    padding: 0;
    position: relative;
    top: -5px;
    width: 100%;
    height: auto;
}

.carousel-item {
    height: 100vh;
    position: relative;
}

.count-up {
    font-size: 32px;
}

.text-uppercase {
    font-size: 22px !important;
}

/* ===== TABLET ===== */
@media only screen and (max-width: 991px) {
    .matthew-section h1 {
        font-size: 50px !important;
        letter-spacing: 6px !important;
        margin-bottom: -10px !important;
        text-align: center !important;
    }

    .matthew-section img {
        top: 0 !important;
        width: 100% !important;
        object-fit: contain !important;
    }

    .testimonial-carousel .owl-nav {
        opacity: 1;
    }
}

/* ===== MOBILE ===== */
@media only screen and (max-width: 576px) {
    .matthew-section {
        background-color: #ffffff !important;
        padding-bottom: 42px !important;
    }

    .matthew-section h1 {
        font-size: 25px !important;
        text-align: center !important;
    }

    .matthew-section img {
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin-top: 10px !important;
        object-fit: cover !important;
    }
}

/* ===========================
   NEWSLETTER MOBILE CENTERING
   =========================== */
@media (max-width: 991.98px) {
    .newsletter-content-col {
        height: auto;
        padding: 10pt 1.5rem;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
}

/* ===========================
   OUR TEAM — MOBILE TEXT
   =========================== */
@media (max-width: 768px) {
    .team-text-section {
        padding: 2rem !important;
        text-align: center !important;
    }

    .team-section-heading {
        font-size: 48px !important;
    }

    .team-section-subheading {
        font-size: 37px !important;
    }

    .team-section-hr {
        width: 100% !important;
        max-width: 320px;
        margin-left: auto !important;
        margin-right: auto !important;
    }

    .team-section-body {
        font-size: 32px !important;
        text-align: center !important;
    }

    .text-decoration-hover {
        text-decoration: underline;
    }
}

@media (max-width: 576px) {
    .team-section-heading {
        font-size: 30px !important;
    }

    .team-section-subheading {
        font-size: 26px !important;
    }

    .team-section-body {
        font-size: 23px !important;
    }
}

/* resource page  */
.link-underline-hover:hover .fw-bold,
.link-underline-hover:hover .text-dark {
    text-decoration: underline !important;
}

.read-bio-btn {
    display: inline-block;
    font-size: 14px;
    color: #333333;
    text-decoration: none;
    transition: text-decoration 0.3s ease;
}

.read-bio-btn:hover,
.text-decoration-hover:hover {
    text-decoration: underline;
}

@media (min-width: 1080px) {
    .engage-title {
        font-size: 72px !important;
    }
}

@media (min-width: 1440px) {
    .engage-title {
        font-size: 80px !important;
    }
}

@media (min-width: 1440px) {
    .engage-title-long {
        font-size: 72px !important;
    }
}

@media (min-width: 992px) and (max-width: 1399px) {
    .prayer-partner-nav-btn {
        font-size: 20px;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* spacing divider */
.engage-img-3 {
    transform: scale(1.0);
    transform-origin: center center;
}

.engage-img-2 {
    transform: scale(1.05);
    transform-origin: center center;
}

.engage-img-1 {
    transform: scale(1.04);
    transform-origin: center center;
}

.newsletter-text {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    font-size: clamp(16px, 7vw, 28px);
}

.form-control label {
    transition: all 1s ease;
    font-size: 4.9rem;
}
.form-floating:hover>label, .form-floating:focus>label {
    transform: scale(0.65) translateY(-0.10rem) translateX(0.15rem);
}

/* ===========================
   ABOUT US PAGE
   =========================== */
.font-gordita {
    font-family: "Gordita", sans-serif;
}

.font-zuumerough {
    font-family: "Zuumerough", sans-serif;
}

.about-hero-split {
    min-height: 90vh;
}

/* Reusable large/small heading sizes for big display copy */
.about-heading-lg {
    font-size: clamp(50px, 6vw, 75px);
}

.about-heading-sm {
    font-size: clamp(35px, 6vw, 50px);
}

.about-heading-overlay {
    font-size: 58px;
}

/* Reusable large-body-copy styling shared by intro, mission, and overlay text blocks */
.about-copy {
    font-size: 23px;
    font-weight: 500;
}

.about-copy-sm {
    font-size: 20px;
}

.about-intro-copy {
    max-width: 850px;
    padding: 0 40px;
}

.about-overlay-card-wrap {
    max-width: 500px;
}

.overlay-card-dark {
    background: rgba(20, 20, 20, 0.8);
    border-radius: 10px;
}

/* <x-overlay-cta> background, image supplied per instance via --overlay-cta-bg-image */
.overlay-cta-bg {
    background: var(--overlay-cta-bg-image) center center/cover no-repeat;
}

.missionary-cta-heading {
    font-size: 35px;
    line-height: 40px;
}

.missionary-cta-btn {
    background-color: transparent;
    border: 2px solid #ffffff;
    font-size: 23px;
}

.img-cover-zoom {
    object-fit: cover;
    object-position: center;
    transform: scale(1.2);
}

.about-mission-bg {
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url(../img/shot.4.jpg) center center/cover no-repeat fixed;
    min-height: 100vh;
}

.about-overlay-bg {
    background: url(../img/img.1.jpg) center center/cover no-repeat;
}

@media (max-width: 1399.98px) {
    .about-heading-lg {
        font-size: 60px !important;
    }

    .about-copy {
        font-size: 24px !important;
    }
}

@media (max-width: 991.98px) {
    .about-heading-lg {
        font-size: 42px !important;
    }

    .about-copy {
        font-size: 20px !important;
    }

    .about-intro-copy {
        padding: 1rem 1.5rem !important;
    }
}

@media (max-width: 575.98px) {
    .about-heading-lg {
        font-size: 32px !important;
    }

    .about-copy {
        font-size: 18px !important;
    }

    .about-intro-copy {
        padding: 1rem !important;
    }
}