/* ================================
   Harmony Church Theme Stylesheet
   ================================ */

:root {
    --blue: #274683;
    --green: #7ac142;
    --linen: #fffaf2;
}

/* ------------------------------
   BASE TYPOGRAPHY
   ------------------------------ */
body {
    color: #222;
    font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    background:url(/wp-content/themes/harmony-church/assets/img/rough-background.jpg?1);
}

h1, h2, h3, h4, h5, h6 {
    font-family: "DM Serif Display", serif;
    font-weight: 400;
    letter-spacing: 0.02em;
}

/* ================================
   HEADER & NAVIGATION
   ================================ */

.harmony-header {
    background: transparent;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.75rem 0;
    transition: background 0.4s ease, box-shadow 0.4s ease, padding 0.3s ease;
}

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

/* Logo */
.harmony-header .navbar-brand img,
.custom-logo {
    height: 80px !important;
    width: auto !important;
    max-height: 80px !important;
    object-fit: contain;
    margin-top: 0;
    transition: all 0.3s ease;
}

/* On scroll */
body.scrolled .harmony-header {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    padding: 0.3rem 0;
}
body.scrolled .harmony-header .navbar-brand img {
    height: 36px !important;
}

/* Navigation Links */
.harmony-header .navbar-nav .nav-link {
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.95rem;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    position: relative;
    transition: color 0.2s ease, transform 0.2s ease;
}

/* Navigation Links */
.harmony-header .navbar-nav .dropdown ul .nav-link  {
    color: var(--blue) !important;
}

.harmony-header .navbar-nav .nav-link:hover,
.harmony-header .navbar-nav .nav-link:focus,
.harmony-header .navbar-nav .nav-link.active {
    color: var(--green) !important;
    text-decoration: none;
    transform: translateY(-1px);
}

/* Animated underline */
.harmony-header .navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: var(--green);
    transition: width 0.3s ease;
}

.harmony-header .navbar-nav .nav-link:hover::after,
.harmony-header .navbar-nav .nav-link.active::after {
    width: 100%;
}

/* Dropdown */
.harmony-header .dropdown-menu {
    background-color: white;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    padding: 0.5rem 0;
}

.harmony-header .dropdown-item {
    font-weight: 500;
    padding: 0.5rem 1.25rem;
    text-transform: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.harmony-header .dropdown-item:hover,
.harmony-header .dropdown-item:focus {
    background-color: var(--green);
}

/* Mobile toggler */
.navbar-toggler {
    border: none;
    background: transparent !important;
}
.navbar-toggler:focus { box-shadow: none; }

/* Admin bar offset */
body.admin-bar .harmony-header {top: 32px;}

/* Remove Bootstrap dropdown arrow from About Us and other menu items */
.harmony-header .navbar-nav .dropdown-toggle::after {
    display: none !important;
    content: none !important;
}


/* ================================
   HERO SECTION
   ================================ */

.harmony-hero-arch {
    position: relative;
    background: var(--blue);
    padding-top: 111px;
    padding-bottom: 35px;
    overflow: hidden;
    background-repeat:repeat;
}

.hero-stage {
    position: relative;
    width: var(--arch-w, 720px);
    max-width: 90%;
    margin: 0 auto;
    z-index: 10;
    padding-bottom: 50px;
}

.hero-arch-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 0.92;
    border-radius: 56% 56% 18px 18px;
    background-size: cover;
    background-position: center 35%;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,.18);
    z-index: 1;
}

.hero-arch-overlay {
    position: absolute;
    inset: 0;
    background: rgba(81, 42, 123, 0.35);
}

.arch-content {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 1);
    z-index: 3;
    width: 67%;
}

.arch-content h1 {
    font-size: clamp(2rem, 4vw, 4.75rem);
    line-height: 1.15;
    margin-bottom: 0.5rem;
}

.arch-content p {
    font-style: italic;
    font-weight: 400;
    opacity: 0.9;
}

/* Leaf Accent */
.hero-leaf-wrap {
    position: absolute;
    left: calc(100% - 63px);
    top: 46%;
    transform: translateY(-50%) rotate(-8deg);
    width: 149px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    rotate: 15deg;
}


/* Leaf Accent */
.hero-leaf-wrap-right {
    position: absolute;
    right: calc(100% - 8px);
    top: 46%;
    transform: translateY(-50%) rotate(-8deg);
    width: 149px;
    height: auto;
    z-index: 0;
    pointer-events: none;
    rotate: 5deg;
}


/* Bottom curve */
.hero-curve {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 100vw;
    /* height: 140px; */
    transform: translateX(-50%);
    z-index: 1;
}

/* ================================
   EVENTS
   ================================ */

.harmony-events {
    text-align: center;
}

.harmony-events .section-title {
    color: var(--blue);
    font-family: "DM Serif Display", serif;
    font-size: 2rem;
    letter-spacing: 0.03em;
    font-weight: bold;
}

.event-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: #dcebd875;
    border-radius: 16px;
    padding: 1.25rem 0.75rem;
    box-shadow: 0 6px 18px rgba(0,0,0,0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    height: 100%;
    min-height: 160px;
    border:1px solid var(--green);
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.event-date {
    color: var(--blue);
    font-size: 1.25rem;
    line-height: 1;
}

.event-title {
    margin-top: 0.4rem;
    min-height: 32px;
    color: #333;
}

.event-time {
    margin-top: 0.25rem;
    font-size: 0.85rem;
    color: #666;
}

/* ---------------------------------
   Upcoming Events (Slider + List)
---------------------------------- */

.harmony-events {
    text-align: center;
}

/* Slider */
.harmony-events .carousel-inner {
}

.harmony-events .carousel-item img,
.harmony-events .carousel-item video {
    height:auto;
    border-radius:22px;
}

/* Carousel arrows */
.harmony-events .carousel-control-prev-icon,
.harmony-events .carousel-control-next-icon {
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}

/* Indicators spacing */
.harmony-events .carousel-indicators {
    margin-bottom: 0.75rem;
}

.harmony-events .carousel-indicators button {
    width: 20px;
    height: 1px;
    border-radius: 50%;
    background: var(--green);
}




.carousel-control-prev,
.carousel-control-next {
    width: 50px;
    opacity: 1;
    height:450px;
}

/* ---------------------------------
   Event List – Date Badge Layout
---------------------------------- */

.harmony-events .event-row {
    align-items: stretch;
}

/* Date box */
.harmony-events .event-date-box {
    width: 64px;
    min-width: 64px;
    border-radius: 12px;
    background: var(--green);
    padding: 6px 0;
    line-height: 1;
}

/* Month */
.harmony-events .event-month {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: white;
}

/* Day */
.harmony-events .event-day {
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

/* Event text */
.harmony-events .event-details {
    flex: 1;
    text-align: left;
}

.harmony-events .event-title {
    font-weight: 600;
    line-height: 1.25;
}

.harmony-events .event-time,
.harmony-events .event-location {
    font-size: 0.85rem;
    color: #6c757d;
    line-height: .1em;
}

/* Spacing cleanup */
.harmony-events .event-row:last-child {
    border-bottom: none;
}


.harmony-events .event-list {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.harmony-events .event-list {
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

/* Force slider to fill its column */
.harmony-events .carousel,
.harmony-events .carousel-inner,
.harmony-events .carousel-item {
    width: 100%;
    height: 100%;
}

/* Ensure the slider column behaves like a column, not content-sized */
.harmony-events .col-lg-7 {
    display: flex;
    align-items: stretch;
}

/* Ensure carousel stretches inside column */
.harmony-events #eventsSlider {
    width: 100%;
}

/* Clickable slide wrapper */
.harmony-events .slide-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* Caption strip */
.harmony-events .slide-caption {
    color: var(--blue);
    line-height: 1.3rem;
    font-size: 1.4rem;
    letter-spacing: 0.08em;
}

/* Right-side event list */
.harmony-events .event-list {
    background: #fff;
    border-radius: 22px;
    border: 1px solid rgba(0,0,0,0.08);
}

/* Event rows */
.harmony-events .event-row {
    text-align: left;
    line-height: 1.3;
}

.harmony-events .event-row:last-child {
    border-bottom: none;
}


/* ================================
   ABOUT SECTION
   ================================ */

.harmony-about .section-title {
    color: var(--blue);
    font-size: 4rem;
    letter-spacing: 0.02em;
}

.about-text {
    color: #333;
}


.about-scripture:before {
    content:"";
    border-top:3px solid var(--blue);
    opacity:.3;
    clear:both;
    display:block;
    margin-top:20px;
    padding-top:20px;
}

.about-scripture {
    color: var(--blue);
    font-size: 1.6rem;
    line-height:1.8rem;
    font-family: "DM Serif Display", serif;
}

.about-image {
    width: 100%;
    aspect-ratio: 1 / 1.1;
    background-size: cover;
    background-position: center;
}

/* ================================
   CALLOUTS
   ================================ */

.callout-card {
    background: #fff;
    border-radius: 22px;
    padding: 2rem;
    box-shadow: 0 6px 20px rgba(100,100,100,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    text-align: center;
}

.callout-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
}

.callout-title {
    color: var(--blue);
    font-family: "DM Serif Display", serif;
    font-size: 2.4rem;
}

.callout-icon{
    max-width:80px;
    margin:auto;
}
.callout-icon path{
    fill:var(--green);
}

/* ================================
   VISIT / MAP
   ================================ */

.harmony-visit {
    text-align: center;
}

.harmony-visit .section-title {
    color: var(--blue);
    font-size: 2rem;
}

.visit-map-wrap iframe {
    width: 100%;
    height: 450px;
    border: 0;
    display: block;
}

.visit-map-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: rgba(122,193,66,0.12); */
    pointer-events: none;
}

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

.harmony-footer {
    color: #fff;
    font-family: "Poppins", sans-serif;
}

#footer-background{
    background:var(--blue)
}

.footer-curve-top svg {
    display: block;
    width: 100%;
    height: 61px;
}

.footer-logo img {
    max-height: 80px;
    width: auto;
}

.footer-menu li {
    margin-bottom: 0.4rem;
}
.footer-menu a {
    color: #fff;
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-menu a:hover {
    color: var(--green);
}

.footer-mailing-list{
    border-bottom:1px solid #ffffff47;
    text-align:center;
    padding-bottom:16px;
    margin-bottom:16px;
}
.footer-mailing-list h2{
    font-size:22px;
}
.footer-mailing-list input{
    background:transparent !important;
    border:1px solid #fff;
    color:#fff;
    padding:5px 10px;
    border-radius:10px;
}
.footer-mailing-list .sib-default-btn{
    background:var(--green) !important;
    color:var(--blue);
    border:1px solid var(--green);
    font-weight:bold;

}
.footer-mailing-list input::placeholder {
    color: rgba(255, 255, 255, 0.7);
}


/* ================================
   RESPONSIVE
   ================================ */

@media (max-width: 1200px) {
    .hero-stage { --arch-w: 640px; }
    .hero-leaf-wrap { left: calc(100% - 28px); width: 240px; }
}
@media (max-width: 991px) {
    .hero-stage { --arch-w: 540px; }
    .hero-leaf-wrap { left: calc(100% - 22px); width: 210px; opacity: .16; }
}
@media (max-width: 767px) {
    .harmony-header {
        background: white;
        border-bottom:1px solid
    }
    .footer-menu { text-align: center; }
    .harmony-hero {
        min-height: 40vh !important;
    }

}


.rounded-pill {
    border-radius: var(--bs-border-radius-pill) !important;
    background: var(--blue);
    color: var(--linen);
}
.rounded-pill:hover{
    background: var(--blue);
    color: var(--linen);
    opacity:.8

}

/* Reusable paper texture overlay */

/* --- NAV LINK UNDERLINE EFFECT --- */
.harmony-header .navbar-nav .nav-link,
.harmony-header .navbar-nav .dropdown-toggle {
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
    text-decoration: none !important;
}

/* Remove Bootstrap caret on dropdowns */
.harmony-header .navbar-nav .dropdown-toggle::after {
    display: none !important;
    content: none !important;
}

/* Create the hover underline */
.harmony-header .navbar-nav .nav-link::before,
.harmony-header .navbar-nav .dropdown-toggle::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--green);
    transition: width 0.3s ease;
    z-index: 2; /* make sure it's above Bootstrap’s dropdown overlay */
}

/* Show underline on hover and active state */
.harmony-header .navbar-nav .nav-link:hover::before,
.harmony-header .navbar-nav .nav-link.active::before,
.harmony-header .navbar-nav .dropdown-toggle:hover::before,
.harmony-header .navbar-nav .dropdown-toggle.active::before {
    width: 100%;
}



/* ================================
   HERO: Hill Horizon Layout
   ================================ */
.harmony-hero-hill {
    position: relative;
    padding-top: 70px;
    overflow: hidden;
}

.hero-circle {
    position: relative;
    width: 720px;
    max-width: 98%;
    aspect-ratio: 1 / 1;
    /* border-radius: 50%; */
    margin: 0 auto;
    background-size: cover;
    background-position: center 35%;
    /* box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25); */
    z-index: 2;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(81, 42, 123, 0.35); */
    /* border-radius: 50%; */
    /* border: 27px solid #7ac142; */
}

.arch-content {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    color: #fff;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.arch-content h1 {
    font-size: clamp(2rem, 4vw, 4.75rem);
    line-height: 1.1;
}


.hero-hills {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 0;
}


/* ================================
   FOOTER NAVIGATION FIX
   ================================ */
.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin: 0.25rem 0;
    line-height: 1.4;
}

/* Links */
.footer-menu a {
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    transition: color 0.2s ease;
}

.footer-menu a:hover {
    color: var(--green);
}

/* Handle submenus */
.footer-menu ul {
    list-style: none;
    padding-left: 1.25rem; /* indentation for nested items */
    margin-top: 0.25rem;
    /* border-left: 2px solid rgba(255, 255, 255, 0.15); */
}

.footer-menu ul li a {
    font-size: 0.9rem;
    opacity: 0.9;
}

/* Optional: hover highlight for parent */
.footer-menu li.menu-item-has-children > a {
    font-weight: 500;
    position: relative;
}

.footer-menu li.menu-item-has-children > a::after {
    content: "›";
    font-size: 0.8em;
    margin-left: 6px;
    opacity: 0.6;
    transition: transform 0.2s ease;
}

.footer-menu li.menu-item-has-children:hover > a::after {
    transform: translateX(3px);
    opacity: 1;
}

/* Responsive alignment */
@media (max-width: 767px) {
    .footer-menu {
        text-align: center;
    }
    .footer-menu ul {
        border: none;
        padding-left: 0;
    }
}
/* ================================
   TESTIMONIAL SECTION
   ================================ */

.harmony-testimonial {

    position: relative;

}
.testimonial-card{
    box-shadow: 0 6px 20px rgba(100,100,100,0.2);
}


#testimonial-background{
    position:absolute;
    top:23px;
    width:100%;
    z-index:-1;
}

/* ================================
   INTERIOR PAGE TEMPLATE
   ================================ */

.page-hero {
    position: relative;
    overflow: hidden;
    min-height: 239px;
}

.page-hero-bg {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 56px;
}

#page-header-background{
    position:absolute;
    top:80px;
    width:100%;

    mix-blend-mode:multiply;

}

.page-hero-overlay {
    position: absolute;
    inset: 0;
}

.page-hero h1 {
    font-family: "DM Serif Display", serif;
    font-size: 2.5rem;
    text-shadow: 0 3px 6px rgba(255,255,255,1);
    color:var(--blue);
}

.page-hero p {
    font-family: "Poppins", sans-serif;
    font-size: 1.1rem;
    opacity: 0.95;
}

/* Content styling */

.content-block {
    /*background: #fff;*/
    /*border-radius: 1rem;*/
    /*padding: 2rem;*/
    /*box-shadow: 0 6px 16px rgba(0,0,0,0.05);*/
}

.content-block h2, .content-block h3 {
    color: var(--blue);
    font-family: "DM Serif Display", serif;
}

.content-block a {
    color: var(--green);
    text-decoration: none;
    font-weight: 500;
}
.content-block a:hover {
    color: #599b25;

}




/* Gutenberg custom color support */
.has-harmony-green-color { color: #3a7a47 !important; }
.has-harmony-green-background-color { background-color: #3a7a47 !important; }

.has-harmony-gold-color { color: var(--green) !important; }
.has-harmony-gold-background-color { background-color: var(--green) !important; }

.has-harmony-gray-color { color: #555555 !important; }
.has-harmony-gray-background-color { background-color: #555555 !important; }

.has-harmony-white-color { color: #ffffff !important; }
.has-harmony-white-background-color { background-color: #ffffff !important; }

/* Example if you added blue */
.has-harmony-blue-color { color: var(--blue) !important; }
.has-harmony-blue-background-color { background-color: var(--blue) !important; }



.faq-card{
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    margin-bottom: 20px;
}

.faq-card h4{
    margin-top:0;
    margin-bottom:.35rem;
    color:var(--blue); /* Harmony blue */
}

.faq-card p{ margin:0; }

/* subtle “card rise” hover, optional */
.faq-card:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 30px rgba(0,0,0,.08);
    transition:.2s ease;
}



.wp-block-image img {
    width: 80%;
    max-width: 250px;
    margin: 0 auto;
    display: block;
}
.wp-block-columns {
    align-items: center;
    margin-bottom: 2.5rem;
}
.wp-block-columns h3 {
    font-family: "DM Serif Display", serif;
    color: #512a7b;
}
.wp-block-columns p {
    font-family: "Poppins", sans-serif;
    line-height: 1.7;
}

/* Light background for alternating sections */
.has-harmony-light-background-color {
    background-color: #faf8f5 !important;
}

/* Hero cover overlays */
.wp-block-cover {
    border-radius: 0;
    overflow: hidden;
}


/* Centered buttons spacing */
.wp-block-buttons {
    margin-top: 1.5rem;
}

/* Headings */
h1, h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    letter-spacing: 0.5px;
}


@media (min-width: 992px) {
    .navbar .dropdown:hover > .dropdown-menu {
        display: block;
        margin-top: 0.2rem;
    }
}
/* Hill divider */
.hill-divider {
    display: block;
    width: 100%;
    height: auto;
    margin-bottom: 60px;
}

/* Timeline layout */
.timeline {
    position: relative;
    max-width: 1000px;
    margin: 60px auto;
    padding-left: 0px;
    border-left: 4px solid var(--blue);
}

.timeline-item {
    position: relative;
    margin-bottom: 60px;
}

.timeline-marker {
    position: absolute;
    left: -12px;
    top: 27px;
    width: 20px;
    height: 20px;
    background: var(--green);
    border: 4px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 3px var(--blue);
}

.timeline-content {
    background: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.06);
}

.timeline-content h3 {
    margin-top: 0;
    color: var(--blue);
    font-family: "DM Serif Display", serif;
}

.timeline-content p {
    margin-bottom: 0.6rem;
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 768px) {
    .timeline { padding-left: 25px; }
    .timeline-marker { left: -10px; }
}


/* Ministry Blocks */
.wp-block-group.has-background {
    background-color: #faf8f5;
}

.wp-block-columns.alignwide {
    gap: 2rem;
}

.wp-block-column h3 {
    color: var(--blue);
    font-family: "DM Serif Display", serif;
    margin-bottom: 0.5rem;
}

.wp-block-column p {
    font-family: "Poppins", sans-serif;
    line-height: 1.7;
}

/* Subtle card effect */
.wp-block-column {
    background: #fff;
    padding: 1.5rem 2rem;
    border-radius: 16px;
    box-shadow: 0 6px 20px rgba(100,100,100,0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background: #f1f5ed;
}
.wp-block-column:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}


/* Subtle card effect */
.wp-block-column.no-background {
    background: transparent;
    padding: 0;
    border-radius: 0;
    box-shadow: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-block-column.no-background:hover {
    transform:none;

}



/* Visit Page */
.visit-map-wrap iframe {
    width: 100%;
    height: 400px;
    border: 0;
    display: block;
    filter: grayscale(10%) contrast(105%);
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}

.wp-block-column h3,
.wp-block-column h4 {
    color: var(--blue);
    font-family: "DM Serif Display", serif;
    margin-bottom: 0.5rem;
}

.rounded-pill {
    background: var(--green);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s;
}
.rounded-pill:hover {
    background: #5d9f33;
    color: #fff;
}

/* Connect Page Form */
.connect-form-wrap {
    max-width: 700px;
    margin: 0 auto;
}

.connect-form .form-group {
    margin-bottom: 1.2rem;
}

.connect-form label {
    font-weight: 600;
    color: var(--blue);
    display: block;
    margin-bottom: 0.4rem;
}

.connect-form input,
.connect-form select,
.connect-form textarea {
    width: 100%;
    padding: 0.65rem 0.9rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    font-family: "Poppins", sans-serif;
}

.connect-form button {
    background: var(--green);
    border: none;
    color: #fff;
    font-weight: 600;
    transition: background 0.3s ease;
}
.connect-form button:hover {
    background: #5d9f33;
    color: #fff;
}
.navbar-expand-lg .navbar-nav .dropdown-menu{
    top:36px;
}

.harmony-hero {
    position: relative;
    min-height: 70vh;
    overflow: hidden;
    mix-blend-mode: multiply;

}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: center;
    padding-top: 10vh;
    z-index:105;

}

.hero-welcome-img{
    max-width:100%;
    padding:0 20px;

}


.hero-sub {
    font-family:"DM Serif Display", serif;
    letter-spacing: 0.05em;
    font-size: 1.9rem;
    margin-top: 1rem;
    color: var(--blue);
    text-shadow:0 0 5px rgba(255,255,255,1)
}

.hero-cta {
    display: inline-block;
    margin-top: 2rem;
    padding: 0.75rem 1.75rem;
    background: #8dba41;
    color: #ffffff;
    text-decoration: none;
    border-radius: 30px;
    z-index:104;
    border:2px solid white;
    box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.hero-cta:hover{
    background: #6b912b;

}

.hero-visuals {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.hero-church {
    position: absolute;
    bottom: 40px; /* sits above swishes */
    left: 35%;
    transform: translateX(-50%);
    width: min(1200px, 90vw);
    opacity: 0.40;
    z-index:100;
    mix-blend-mode: multiply;

}
.hero-swishes {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    mask-image: url("/wp-content/themes/harmony-church/assets/img/home-hero-swish.svg");

    z-index:102;
    mix-blend-mode: multiply;
    background:no-repeat;
}

.hero-swishes-background {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    z-index: 2;
    fill:white;
    z-index:101;
}




.light-green-background{
    background:url(/wp-content/themes/harmony-church/assets/img/green-background-tappered.jpg);
    background-position:center top;
    background-repeat:repeat-y;
    mix-blend-mode: multiply;

}