/* ==============================
   KIDS WORSHIP LAUNCH
   Main Stylesheet
   Founded by Gage Petrick 
================================ */


/* ---------- RESET ---------- */

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


html {
    scroll-behavior: smooth;
}


body {
    font-family: "Arial", sans-serif;
    color: #1f2937;
    background: #ffffff;
    overflow-x: hidden;
}


/* ---------- COLORS ---------- */

:root {

    --blue: #2563eb;
    --purple: #7c3aed;
    --orange: #f97316;
    --green: #10b981;
    --yellow: #fbbf24;

    --dark: #111827;
    --light: #f8fafc;

}



/* ---------- GEOMETRIC BACKGROUND SHAPES ---------- */


.shape {
    position: absolute;
    z-index: 0;
    opacity: .50;
    overflow: hidden;
}


.shape-one {

    width: 500px;
    height: 500px;

    background: linear-gradient(
        135deg,
        var(--blue),
        var(--purple)
    );

    border-radius: 40% 60% 60% 40%;

    top: -180px;
    right: -320px;

    animation: floatOne 10s infinite ease-in-out;

}



.shape-two {

    width: 250px;
    height: 250px;

    background: linear-gradient(
        135deg,
        var(--orange),
        var(--yellow)
    );

    transform: rotate(45deg);

    bottom: 100px;
    left: -100px;

    animation: floatTwo 12s infinite ease-in-out;

}



.shape-three {

    width: 180px;
    height: 180px;

    background: var(--green);

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );

    top: 450px;
    right: 15%;

    animation: floatThree 8s infinite ease-in-out;

}
.shape-four {

    animation: floatFour 20s infinite ease-in-out ;
    
    width:220px;

    height:220px;

    background:linear-gradient(
        135deg,
        #10b981,
        #34d399
    );

    clip-path:polygon(
        50% 0%,
        100% 100%,
        0% 100%
    );

    top:120px;

    left:42%;

    transform:rotate(25deg);

}



@keyframes floatOne {

    50% {
        transform: translateY(30px) rotate(10deg);
    }

}


@keyframes floatTwo {

    50% {
        transform: translateY(-25px) rotate(60deg);
    }

}


@keyframes floatThree {

    50% {
        transform: translateY(25px);
    }

}
@keyframes floatFour {

    25% {
        transform: translateY(-25px) rotate(60deg);
    }

}



/* ---------- NAVIGATION ---------- */

header {
    width: 100%;
    padding: 30px 8%;
}

.logo {
    position: absolute;
    top: 20px;
    left: 10%;
    z-index: 10;
}

.logo img {
    width: 120px;
    height: 120px;
    object-fit: contain;
}

.navbar {
    display: flex;
    justify-content: right;
    align-items: center;
}

.logo span {
    display: block;
    font-size: .85rem;
    color: var(--blue);
    font-weight: 600;
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 30px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--dark);
    font-weight: 600;
}

.nav-button {
    background: var(--blue);
    color: white !important;
    padding: 12px 25px;
    border-radius: 50px;
}


/* ---------- MOBILE MENU ---------- */

.menu-toggle {
    display: none;
}

.mobile-menu {
    display: none;
}


@media(max-width:900px) {

    header {
        padding: 20px 5%;
    }

    .logo {
        top: 20px;
        left: 5%;
    }

    .logo img {
        width: 60px;
        height: 60px;
    }

    /* Hide desktop navigation */
    .nav-links {
        display: none;
    }

    /* Hamburger button */
    .menu-toggle {
        display: flex;

        position: absolute;
        top: 45px;
        right: 5%;

        width: 50px;
        height: 50px;

        border: none;
        border-radius: 14px;

        background: white;

        align-items: center;
        justify-content: center;

        flex-direction: column;
        gap: 5px;

        cursor: pointer;

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

        z-index: 1001;
    }

    .menu-toggle span {
        width: 24px;
        height: 3px;

        background: var(--dark);

        border-radius: 3px;
    }

    /* Dropdown */
    .mobile-menu {
        position: absolute;

        top: 75px;
        right: 5%;

        width: 240px;

        background: white;

        border-radius: 20px;

        padding: 15px;

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

        z-index: 1000;

        flex-direction: column;
        gap: 5px;
    }

    .mobile-menu.active {
        display: flex;
    }

    .mobile-menu a {
        display: block;

        padding: 14px 15px;

        text-decoration: none;

        color: var(--dark);

        font-weight: 600;

        border-radius: 12px;
    }

    .mobile-menu a:hover {
        background: var(--light);
    }

    .mobile-menu .nav-button {
        text-align: center;
        margin-top: 5px;
    }

}


/* ---------- HERO ---------- */


.hero {

    min-height: 85vh;

    padding: 60px 8%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    position: relative;

    overflow: hidden;

}



.hero-text {

    max-width: 650px;
    
    z-index: 2;

    color: #000;
}
.hero-text p{

    max-width: 650px;
    
    z-index: 2;

    color: #000;
}
.hero-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2;
}
.hero-image img {

    width: 420px;

    max-width: 86%;

    border-radius: 30px;

    object-fit: cover;

    box-shadow:
        0 30px 70px rgba(0,0,0,.18);

    position: relative;

    z-index: 2;

    transition: .4s;

}




.eyebrow {

    color: var(--orange);

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    margin-bottom: 20px;

}



h1 {

    font-size: clamp(3rem, 6vw, 5rem);

    line-height: 1.05;

    color: var(--dark);

    margin-bottom: 25px;

}



.hero-description {

    font-size: 1.2rem;

    line-height: 1.7;

    color: #4b5563;

    margin-bottom: 35px;

}



/* ---------- BUTTONS ---------- */


.hero-buttons {

    display: flex;

    gap: 20px;

    flex-wrap: wrap;

}


.primary-button,
.secondary-button {

    text-decoration: none;

    padding: 16px 30px;

    border-radius: 50px;

    font-weight: 700;

    transition: .3s;

}



.primary-button {

    background: var(--blue);

    color: white;

}



.secondary-button {

    border: 2px solid var(--blue);

    color: var(--blue);

}



.primary-button:hover,
.secondary-button:hover {

    transform: translateY(-5px);

}



/* ---------- PHOTO ---------- */


.hero-image {

    display: flex;

    justify-content: center;

}



.photo-placeholder {

    width: 350px;

    height: 260px; 

    background:

    linear-gradient(
        135deg,
        var(--purple),
        var(--blue)
    );

    border-radius: 40px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: white;

    font-size: 2rem;

    font-weight: 800;

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

}



/* ---------- SECTIONS ---------- */


section {

    padding: 100px 8%;

    text-align: center;

}



section h2 {

    font-size: 3rem;

    margin-bottom: 20px;

    color: var(--dark);

}


section p {

    font-size: 1.2rem;

    color: #6b7280;

}



/* ---------- FOOTER ---------- */


footer {

    padding: 40px;

    background: var(--dark);

    color: white;

    text-align: center;

}



/* ---------- MOBILE ---------- */


@media(max-width:900px){


    .nav-links {

        display:none;

    }



    .hero {

        flex-direction: column;

        text-align:center;

    }



    .hero-buttons {

        justify-content:center;

    }



    .photo-placeholder {

        width:280px;

        height:210px;

    }


}
/* =========================
   CHURCH STORIES - PREMIUM DESIGN
========================= */


.stories-section {
    position: relative;
    background: #ffffff;
    overflow: hidden;

}


/* colorful background shapes */

.stories-section::before {

    content: "";

    position: absolute;
    pointer-events: none;

    width: 350px;
    height: 350px;

    background: linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    border-radius: 50%;

    top: -150px;
    left: -150px;

    opacity: .12;

}



.stories-section::after {

    content: "";

    position: absolute;
    pointer-events: none;

    width: 300px;
    height: 300px;

    background: linear-gradient(
        135deg,
        #f97316,
        #fbbf24
    );

    clip-path: polygon(
        50% 0,
        100% 100%,
        0 100%
    );

    bottom: -100px;
    right: 50px;

    opacity: .15;

}


.story-container {

    max-width: 1200px;

    margin:auto;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:50px;

    position:relative;

    z-index:2;

    margin-top: 60px;

}



.story-card {

    background:white;

    border-radius:40px;

    padding:0;

    overflow:hidden;

    text-align:left;

    box-shadow:

    0 20px 60px rgba(0,0,0,.08);

    transition:.4s;

    position:relative;

}



.story-card:hover {

    transform:translateY(-12px);

    box-shadow:

    0 30px 70px rgba(0,0,0,.15);

}



/* image area */

.story-image {

    
    height:260px;

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    display:flex;

    align-items:center;

    justify-content:center;

    color:white;

    font-size:1.5rem;

    font-weight:800;

    min-height: 340px;

    position: relative;
}

.image-bg{

    position:absolute;

    width:300px;

    height:300px;

    border-radius:35px;

    z-index:1;

}

.image-bg.blue{

    background:linear-gradient(
        315deg,
        #2563eb 0%,
        #3b82f6 50%,
        #60a5fa 100%
    );

    top:20px;

    left:140px;

    transform:rotate(-8deg);

}

.image-bg.orange{

    background:linear-gradient(
        135deg,
        var(#ff9900),
        var(#f8f402)
    );

    bottom:20px;

    right:140px;

    transform:rotate(8deg);

}

.story-image img{

    position:relative;

    z-index:2;

    width:270px;

    border-radius:25px;

    box-shadow:0 25px 55px rgba(0,0,0,.18);

}


.orange-card .story-image {

    background:

    linear-gradient(
        135deg,
        #f97316,
        #fbbf24
    );

}



/* content */

.story-content {

    padding:40px;

}



.story-label {

    color:#7c3aed;

    font-size:.8rem;

    font-weight:900;

    letter-spacing:2px;

    text-transform:uppercase;

}



.orange-card .story-label {

    color:#f97316;

}



.story-card h3 {

    font-size:2rem;

    margin:15px 0 5px;

    color:#111827;

}



.story-location {

    color:#6b7280 !important;

    font-weight:700;

}



.story-card p {

    color:#4b5563;

    line-height:1.7;

}



.impact-grid {

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:15px;

    margin:30px 0;

}



.impact-grid div {

    background:#f8fafc;

    border-radius:20px;

    padding:18px 10px;

    text-align:center;

}



.impact-grid strong {

    display:block;

    font-size:2rem;

    color:#2563eb;

}



.orange-card .impact-grid strong {

    color:#f97316;

}



.impact-grid span {

    font-size:.8rem;

    color:#6b7280;

}



.story-button {

    display:inline-block;

    background:#111827;

    color:white;

    padding:15px 28px;

    border-radius:50px;

    text-decoration:none;

    font-weight:800;

    transition:.3s;

}



.story-button:hover {

    background:#2563eb;

    transform:translateY(-5px);

}



/* featured story */

.featured-story {

    border-top: 8px solid #10b981;

}



.featured-story::before {

    content:"FEATURED STORY";

    position:absolute;

    top:20px;

    right:20px;

    background:#10b981;

    color:white;

    padding:8px 15px;

    border-radius:50px;

    font-size:.7rem;

    font-weight:900;

    letter-spacing:1px;

    z-index:5;

}



@media(max-width:900px){

    .story-container{

        grid-template-columns:1fr;

    }


    .featured-story{

        transform:none;

    }


    .impact-grid{

        grid-template-columns:1fr;

    }

}
.section-title {
    position: relative;
    z-index: 5;
}
/* =========================
   HERO GEOMETRIC SHAPES
========================= */


.hero {
    position: relative;
    overflow: hidden;
}



.hero-shape {

    position:absolute;

    opacity:.70;

    z-index:0;

}
.hero-text,
.hero-image {
    position:relative;
    z-index:2;
}
/* =========================
   ABOUT GAGE
========================= */

.about-section{

    background:white;

    padding:120px 8%;

}

.about-wrapper{

    max-width:900px;

    margin:auto;

    display:grid;

    grid-template-columns:420px 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:35px;

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

}

.about-content h2{

    font-size:3rem;

    margin:15px 0 30px;

}

.about-content p{

    line-height:1.8;

    color:#555;

    margin-bottom:25px;

}

.about-stats{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:15px;

    margin-top:40px;

}

.about-stats div{

    background:#f8fafc;

    padding: 15px;

    border-radius:25px;

    transition:.3s;

    border-left:8px solid #2563eb;

}

.about-stats div:nth-child(2){

    border-color:#10b981;

}

.about-stats div:nth-child(3){

    border-color:#f97316;

}

.about-stats div:nth-child(4){

    border-color:#7c3aed;

}

.about-stats div:hover{

    transform:translateY(-8px);

}

.about-stats h3{

    font-size:1.5rem;

    margin-bottom:1px;

    color:#111827;

}

.about-stats p{

    margin:0;

    color:#667;

}

@media (max-width:900px){

    .about-wrapper{
        grid-template-columns:1fr;
        gap:40px;
    }

    .about-image{
        max-width:320px;
        margin:0 auto;
    }

    .about-content{
        text-align:center;
    }

    .about-content h2{
        font-size:2.2rem;
    }

    .about-stats{
        grid-template-columns:1fr;
    }

}
/* =========================
   TIMELINE
========================= */

.journey-section{

    padding:140px 8%;

    background:linear-gradient(
        180deg,
        #ffffff,
        #f8fafc
    );

}

.journey-header{

    text-align:center;

    max-width:800px;

    margin:auto;

    margin-bottom:80px;

}

.journey-header h2{

    font-size:3rem;

    margin:20px 0;

}

.timeline{

    max-width:900px;

    margin:auto;

    position:relative;

}

.timeline::before{

    content:"";

    position:absolute;

    left:34px;

    top:0;

    bottom:0;

    width:6px;

    background:linear-gradient(

        #2563eb,

        #f97316,

        #10b981,

        #7c3aed

    );

    border-radius:50px;

}

.timeline-item{

    display:flex;

    gap:40px;

    margin-bottom:70px;

    position:relative;

}

.timeline-dot{

    width:28px;

    height:28px;

    border-radius:50%;

    flex-shrink:0;

    margin-top:20px;

    border:6px solid white;

    box-shadow:0 0 0 6px rgba(0,0,0,.05);

    z-index:2;

}

.blue{

    background:#2563eb;

}

.orange{

    background:#f97316;

}

.green{

    background:#10b981;

}

.purple{

    background:#7c3aed;

}

.timeline-card{

    background:white;

    padding:35px;

    border-radius:25px;

    box-shadow:

        0 20px 60px rgba(0,0,0,.08);

    transition:.3s;

}

.timeline-card:hover{

    transform:translateY(-8px);

}

.timeline-card h3{

    margin-bottom:5px;

}

.timeline-card span{

    color:#2563eb;

    font-weight:bold;

}

.timeline-card p{

    margin-top:18px;

    color:#555;

    line-height:1.8;

}

.pulse{

    animation:pulseGlow 2s infinite;

}

@keyframes pulseGlow{

    0%{

        box-shadow:0 0 0 0 rgba(124,58,237,.5);

    }

    70%{

        box-shadow:0 0 0 18px rgba(124,58,237,0);

    }

    100%{

        box-shadow:0 0 0 0 rgba(124,58,237,0);

    }

}

@media(max-width:800px){

.timeline::before{

    left:18px;

}

.timeline-item{

    gap:25px;

}

}
/*=========================
      PROCESS
=========================*/

.process-section{

    padding:140px 8%;

    background:linear-gradient(180deg,#f8fbff,#ffffff);

}

.process-flow{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    margin-top:80px;

    flex-wrap:wrap;

}

.process-step{

    width:260px;

    background:white;

    padding:35px;

    border-radius:28px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.35s;

}

.process-step:hover{

    transform:translateY(-10px);

}

.step-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:2.7rem;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

    color:white;

}

.process-step:nth-of-type(3) .step-icon{

    background:linear-gradient(
        135deg,
        #10b981,
        #22c55e
    );

}

.process-step:nth-of-type(5) .step-icon{

    background:linear-gradient(
        135deg,
        #f97316,
        #fb923c
    );

}

.process-step:nth-of-type(7) .step-icon{

    background:linear-gradient(
        135deg,
        #ec4899,
        #a855f7
    );

}

.process-step h3{

    margin-bottom:18px;

    font-size:1.4rem;

}

.process-step p{

    color:#555;

    line-height:1.8;

}

.process-arrow{

    font-size:2.5rem;

    color:#2563eb;

    font-weight:bold;

}

/* Mobile */

@media(max-width:800fpx){

    .process-flow{

        flex-direction:column;

    }

    .process-arrow{

        display: none !important;

    }

}
/*=========================
      RESOURCES
=========================*/

.resources-section{

    padding:140px 8%;

    background:#f8fafc;

}

.resources-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:35px;

    margin-top:70px;

}

.resource-card{

    background:white;

    border-radius:30px;

    padding:40px;

    text-align:center;

    box-shadow:0 20px 50px rgba(0,0,0,.08);

    transition:.35s;

}

.resource-card:hover{

    transform:translateY(-10px);

}

.resource-icon{

    width:90px;

    height:90px;

    margin:auto;

    margin-bottom:25px;

    border-radius:25px;

    background:linear-gradient(135deg,#2563eb,#7c3aed);

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:2.7rem;

}

.resource-card:nth-child(2) .resource-icon{

    background:linear-gradient(135deg,#10b981,#22c55e);

}

.resource-card:nth-child(3) .resource-icon{

    background:linear-gradient(135deg,#f97316,#fb923c);

}

.resource-card:nth-child(4) .resource-icon{

    background:linear-gradient(135deg,#ec4899,#a855f7);

}

.resource-card h3{

    margin-bottom:15px;

}

.resource-card p{

    color:#555;

    line-height:1.8;

}

@media(max-width:800px){

.resources-grid{

    grid-template-columns:1fr;

}

}
/*=========================
      TESTIMONIAL
=========================*/


.testimonial-section{

    padding:140px 8%;

    background:#ffffff;

}


.testimonial-card{

    max-width:1100px;

    margin:80px auto 0;

    display:grid;

    grid-template-columns:350px 1fr;

    gap:60px;

    align-items:center;

    background:#f8fafc;

    padding:60px;

    border-radius:40px;

    box-shadow:
    0 25px 70px rgba(0,0,0,.1);

}


.pastor-image img{

    width:100%;

    border-radius:35px;

}


.quote-icon{

    font-size:5rem;

    line-height:.5;

    color:#2563eb;

    font-weight:bold;

}


.quote{

    font-size:1.1rem;

    line-height:1.8;

    color:#444;

    font-style:italic;

}


.testimonial-content h3{

    margin-top:35px;

    font-size:1.7rem;

}

.pastor-info{

    text-align:center;

    margin-bottom:20px;

}

.pastor-info h3{

    margin-bottom:8px;

}

.pastor-info .role{

    margin-bottom:10px;

}


.role{

    color:#2563eb;

    font-weight:bold;

}


.contact{

    margin-top:20px;

}


@media(max-width:850px){

    .testimonial-card{

        grid-template-columns:1fr;

        padding:35px;

        text-align:center;

    }


    .pastor-image{

        max-width:300px;

        margin:auto;

    }

}
/*=========================
      CONTACT SECTION
=========================*/

.contact-section{

    padding:140px 8%;

    background:linear-gradient(
        135deg,
        #2563eb,
        #7c3aed
    );

}


.contact-wrapper{

    max-width:800px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}


/* LEFT SIDE TEXT */

.contact-text{

    color:white;

}


.contact-text h2{

    font-size:3rem;

    margin:20px 0 30px;

}


.contact-text p{

    line-height:1.8;

    font-size:1.1rem;

    margin-bottom:20px;

    color: #000;

}


.contact-card{

    background:white;

    padding:30px;

    border-radius:35px;

    box-shadow:0 25px 70px rgba(0,0,0,.2);

}


.contact-card h3{

    font-size:2rem;

    margin-bottom:20px;

}


.contact-card p{

    color:#000;

    line-height:1.8;

    margin-bottom:30px;

}


.contact-info{

    display:flex;

    flex-direction:column;

    gap:20px;

    margin-bottom:35px;

}


.contact-item{

    display:flex;

    align-items:center;

    gap:15px;

    font-size:1.1rem;

}


.contact-button{

    display:inline-block;

    padding:16px 30px;

    border-radius:50px;

    background:#f97316;

    color:white;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}


.contact-button:hover{

    transform:translateY(-5px);

}


/* MOBILE */

@media(max-width:800px){

    .contact-wrapper{

        grid-template-columns:1fr;

        gap:50px;

    }


    .contact-text h2{

        font-size:2.3rem;

    }


}
/*=========================
      CLOSING SECTION
=========================*/

.closing-section{

    padding:120px 8%;

    background:linear-gradient(
        135deg,
        #f97316,
        #ec4899
    );

    text-align:center;

    color:white;

}

.closing-content p{

    color:black

}
.closing-content{

    max-width:800px;

    margin:auto;

}


.closing-content h2{

    font-size:3rem;

    margin-bottom:25px;

}


.closing-content p{

    font-size:1.15rem;

    line-height:1.8;

    margin-bottom:20px;

}


.closing-button{

    display:inline-block;

    margin-top:30px;

    padding:18px 40px;

    border-radius:50px;

    background:white;

    color:#f97316;

    text-decoration:none;

    font-weight:bold;

    transition:.3s;

}


.closing-button:hover{

    transform:translateY(-5px);

}


@media(max-width:700px){

    .closing-content h2{

        font-size:2.2rem;

    }

}

html,
body{
    width:100%;
    overflow-x:hidden;
    overflow-x:clip;
}
@media screen and (max-width: 800px) {
    .process-arrow {
        display: none !important;
        visibility: hidden !important;
    }
}
/* ---------- BACK TO TOP ---------- */

/* ---------- BACK TO TOP ---------- */

.back-to-top {
    position: fixed;
    bottom: 25px;
    right: 25px;

    width: 50px;
    height: 50px;

    background: var(--blue);
    color: white;

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

    border-radius: 50%;

    text-decoration: none;

    font-size: 26px;
    font-weight: 900;

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

    z-index: 999;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 1.6s ease,
        visibility 1.6s ease;
}

.back-to-top.show {
    opacity: .85;
    visibility: visible;
    pointer-events: auto;
}

.back-to-top:hover {
    transform: translateY(-5px);
}

.back-to-top span {
    transform: translateY(-4px);
}
@media (min-width: 1000px) {
    html {
        zoom: 1.1;
    }
}