/* ------

Author: Janine Carbone
For: theendhasco.me
Last Change: 02/22/2026

------- */


/* ------ STYLE CSS CONTENTS -----


1) Overall Site Styling
2) Header
3) Footer
4) Page Styling
5) Individual Pages
    a) Home Page
    b) Bible Study
        i) Study Basics
        ii) End Times Bible Study
        iii) New Christian Study
        iv) Links and Resources
    c) Patterns
        i) First Born and Inheritance
        ii) 7 Days with an 8th Days
        iii) Raptures
        iv) Feast Days
        v) Harvests
        vi) Temples
    d) FAQs
    e) Get Saved
    f) Get in Touch


--------------------------------- */



/* =================================

1. Basic Styling

================================== */

:root {
    
    /* Color Palette */
    
    --clr-white: #FFFFFF;
    --clr-white-trans: rgba(255, 255, 255, 0.3); 
    --clr-off-white: #FAF6F6;
    --clr-blue: #258EA6;
    --clr-blue-light: #A0D8E4;
    --clr-blue-dark: #13293D;
    --clr-blue-dark-trans: #13293D00;
    --clr-accent: #917C78;
    --clr-accent-dark: #590925;
    --clr-neutral-900: #0d0d0d;
    --clr-neutral-800: #2a2a2b;
    --clr-neutral-700: #4b4c4e;
    --clr-neutral-600: #5f6062;
    --clr-neutral-500: #848687;
    --clr-neutral-400: #b4b5b6;
    --clr-neutral-300: #e4e4e5;
    --clr-neutral-200: #f2f2f2;
    --clr-neutral-100: #fafafa;
 
    
    /* Font */
    
    --font-1: 'Chivo', sans-serif ;
    --font-2: 'Lora', sans-serif;
    
    /* Design */
    
    --drop-shadow: -10px 10px 20px 0px rgba(0, 0, 0, .1);
    --drop-shadow-hover: -10px 10px 20px 0px rgba(0, 0, 0, .2);
    --blur: blur(5px);   
    
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reveal {
  0% {
    opacity: 0;
    transform: translateY(5rem);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(54px + 4rem);
    
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

main {
    opacity: 0;
    animation-name: fadeIn;
    animation-duration: 0.8s;
    animation-fill-mode: forwards;
    flex-grow: 1;
    z-index: 1;
}

body, h1, h2, h3, h4, h5, h6, p, ul {
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh; 
    position: relative;
    justify-content: space-between;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-1);
    margin-bottom: 1.5rem;
}

p, ul, ol {
    font-family: var(--font-2);
    font-size: 1.1rem;
    margin-bottom: 1rem;
}


div {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit*/
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

.flex_row {
    display: flex;
    flex-direction: row;
}

.flex_column {
    display: flex;
    flex-direction: column;
}

a {
    text-decoration: none;
    transition: 0.3s;
    color: black;
}

a:hover {
    color: var(--clr-blue);
}

.btn {
    padding: .4rem 1.5rem;
    border: 2px solid black;
    border-radius: 2rem;
    font-family: var(--font-1);
    font-weight: 600;
    font-size: .875rem;
    text-transform: uppercase;
    display: inline-block;
    transition: 0.3s;
    cursor: pointer;
}

.btn:hover {
    background-color: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.--alt {
    background-color: var(--clr-blue);
    color: white;
    border-color: var(--clr-blue);
}

.--alt:hover {
    background-color: white;
    color: black;
    border-color: black;
}

.disabled {
    opacity: .3;
    pointer-events: none;
}

.no-scroll {
    overflow: hidden;
}

.frosted_glass {
    background-color: var(--clr-white-trans);
    backdrop-filter: var(--blur);
    -webkit-backdrop-filter: var(--blur);
}

.container {
    width: 100%;
    padding: 2rem;
    margin: 0 auto;
}

.margin-top {
    margin-top: 4rem;
}

@media (min-width: 640px) AND (max-width: 768px) {
    .container {
        max-width: 640px;
    }    
}

@media (min-width: 769px) AND (max-width: 1023px) {
    .container {
        max-width: 769px;
    }    
}

@media (min-width: 1024px) AND (max-width: 1439px) {
    .container {
        max-width: 1024px;
    }    
}

@media (min-width: 1440px) AND (max-width: 1919px) {
    .container {
        max-width: 1440px;
    }   
}

@media (min-width: 1920px) AND (max-width: 2559px) {
    .container {
        max-width: 1920px;
    }    
}

@media (min-width: 2560px) {
    .container {
        max-width: 2650px;
    }    
}


/* =================================

2. Header

================================== */

header {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0; 
    z-index: 100;
}

.header_container {
    justify-content: center;
    z-index: 100;
    position: relative;
    background: white;   

    
    .container {
        justify-content: space-between;
        align-items: center;   
    }
    
    p {
        letter-spacing: 0;
    }
}

.header_left {
    align-items: center;
    
    svg {
        fill: black;
        height: 54px;        
    }
    
    h1 {
        text-transform: uppercase;
        font-size: .875rem;
        margin: 0;
    }
}

.header_right {
    
    .desktop {
        gap: 1.25rem;
    }
    
    .mobile {
        display: none;
    }
}

nav {
  &.primary-navigation {
    margin: 0 auto;
    display: block;  
    text-align: center;
      
      svg {
          width: 1rem;
          height: .6rem;
          fill: black;
          stroke-width: 1px;
          stroke: black;
          transition: 0.3s;
      }
      
      ul{ 
        margin-bottom: 0;
      }

    ul li {
        font-family: var(--font-1);
        font-weight: 300;
        font-size: 1rem;
        text-transform: uppercase;
        list-style: none;
        margin: 0 auto;
        display: inline-block;
        padding: 0;
        position: relative;
        text-decoration: none;
        text-align: center;
        padding: 0 .75rem;
        
        & > a {
            display: block;
            width: 100%;
        }        

        &:hover > a {
            color: var(--clr-blue);
            
            svg {
              stroke: var(--clr-blue);
              fill: var(--clr-blue);
              transform: rotateZ(-180deg);
            }
        }
        
        ul {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            padding: 3rem 0 0;
            left: 0;
            display: inline-flex !important;
            flex-direction: column;
            transform: translateY(-.5rem);
            transition: 0.3s;
            background: white;
            
            li {
                clear: both;
                text-align: left;
                line-height: 2.5;
                margin: 0;
                white-space: nowrap;
            }
        }
    }

    ul li:hover > ul,
    ul li ul:hover {
        visibility: visible;
        opacity: 1;
        transform: translateY(0rem);
        display: block;
        text-align: left;
    }
  }
    
     ul li ul li a { transition: all 0.5s ease; }
}


.menu_container {
    opacity: 0;    
    position: absolute;
    top: calc(54px + 4rem);
    left: 0;
    width: 100%;
    height: calc(100vh - 54px - 4rem);
    background-color: var(--clr-neutral-100);
    z-index: 99;
    transition: 0.3s;
    transform: translateY(-100px);
    pointer-events: none;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none; 
    -ms-overflow-style: none; 
    align-items: center;
    
    ul {
       font-family: var(--font-1);
        font-size: 1.5rem;
        font-weight: 500;
        text-transform: uppercase; 
        list-style: none;
        padding: 0;
        line-height: 2;
        
        ul {
            padding: 0 0 0 1rem;
            font-weight: 300;
        }
        
    }
}

.menu_container::-webkit-scrollbar {
  display: none; 
}

.menu_container.active {
    opacity: 100;
    transform: translateY(0);
    pointer-events: auto;
    
    a:hover {
        color: var(--clr-blue);
    }
    
    a.active {
        color: var(--clr-blue);
    }
}

.hamburger {
    font: inherit;
    display: inline-block;
    overflow: visible;
    margin: 0;
    padding: 15px;
    cursor: pointer;
    transition-timing-function: linear;
    transition-duration: .15s;
    transition-property: opacity, filter;
    text-transform: none;
    color: inherit;
    border: 0;
    background-color: transparent;
    z-index: 100;
    position: relative;
}

.hamburger.is-active:hover,
.hamburger:hover {
    opacity: .7;
}

.hamburger.is-active .hamburger-inner,
.hamburger.is-active .hamburger-inner:after,
.hamburger.is-active .hamburger-inner:before {
    background-color: black;
}

.hamburger-box {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.hamburger-inner {
    top: 50%;
    display: block;
    margin-top: -2px;
}

.hamburger-inner,.hamburger-inner:after,.hamburger-inner:before {
    position: absolute;
    width: 40px;
    height: 4px;
    transition-timing-function: ease;
    transition-duration: .15s;
    transition-property: transform;
    border-radius: 4px;
    background-color: black;
}

.hamburger-inner:after,.hamburger-inner:before {
    display: block;
    content: "";
}

.hamburger-inner:before {
    top: -10px;
}

.hamburger-inner:after {
    bottom: -10px;
}

.hamburger--spin .hamburger-inner {
    transition-timing-function: cubic-bezier(.55,.055,.675,.19);
    transition-duration: .22s;
}

.hamburger--spin .hamburger-inner:before {
    transition: top .1s ease-in .25s,opacity .1s ease-in;
}

.hamburger--spin .hamburger-inner:after {
    transition: bottom .1s ease-in .25s,transform .22s cubic-bezier(.55,.055,.675,.19);
}

.hamburger--spin.is-active .hamburger-inner {
    transition-delay: .12s;
    transition-timing-function: cubic-bezier(.215,.61,.355,1);
    transform: rotate(225deg);
}

.hamburger--spin.is-active .hamburger-inner:before {
    top: 0;
    transition: top .1s ease-out,opacity .1s ease-out .12s;
    opacity: 0;
}

.hamburger--spin.is-active .hamburger-inner:after {
    bottom: 0;
    transition: bottom .1s ease-out,transform .22s cubic-bezier(.215,.61,.355,1) .12s;
    transform: rotate(-90deg);
}

@media screen and (max-width: 1023px) {

    
    .desktop {
        display: none !important;
    }
    
    .mobile {
        display: block !important;
    }
    
}


/* =================================

3. Footer

================================== */

.footer_container {
    justify-content: center;
    position: relative;
    z-index: 90;
    background-color: white;
    
    .container {
        justify-content: space-between;
    }

    p, a {
        font-size: .875rem;
        font-family: var(--font-1);
        font-weight: 300;
    }
    
    .footer_right {
        gap: 1rem;
    }
}



/* =================================

4. Page Styling

================================== */

/* ----- General ------ */

.text_quote {
    width: 80%;
    margin: 4rem auto;
    padding: 2rem 0;
    border-top: 1px solid var(--clr-blue-light);
    border-bottom: 1px solid var(--clr-blue-light);
    
    p:last-of-type {
        font-style: italic;
        text-align: right;
        font-size: 0.875rem;
        margin: 0;
    }
}

.page_header {
    width: 100%;
    height: 300px;
    background-color: var(--clr-blue-dark);
    justify-content: center;
    margin-bottom: 4rem;
    text-align: center;
    
    .frosted_glass {
        width: fit-content;
        padding: 2rem 3rem;
        margin: 0 auto;
    }
    
    h1  { 
        margin: 0;
    }
}

.two_column {
    width: 100%;
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
    margin: 4rem 0;
    
    div {
        width: calc(50% - 4rem);
        max-width: 600px;
        min-width: 300px;
    }
    
    h4 {
        margin-bottom: 0;
        font-weight: 300;
    }

}

.img_block {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    height: 300px;
    
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.content_block {
    
    .btns {
        width: 100%;
        gap: 2rem;
    }
    .btn {
        margin-top: 1rem;
    }
}

@media (max-width: 1023px) {
    .two_column {
        div {
            width: 100%;
        }
    }
    
    .content_block {
        .btns {
            gap: 1rem;
        }
        
        .btn {
            flex: 1;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
}

/* =================================

5. 404 Page

================================== */


.warning_404 {
    align-items: center;
    
    h1 {
        font-size: 10rem;
        color: var(--clr-blue);
    }
}

/* =================================

5a. Home Page

================================== */


.starry-bg {
    width: 100%;
    padding: 15rem 0 10rem;
    background-image: linear-gradient(to bottom, var(--clr-blue-dark) 50%, var(--clr-blue));
    
    .container {
        align-items: center;
        gap: 30rem;
    }
}

.quote_container {
    width: 60%;
    color: white;
    align-items: center;
    gap: 1rem;
    
    p:first-of-type {
        font-family: var(--font-1);
        font-weight: 600;
        line-height: 2;
    }
    
    p:last-of-type {
        font-style: italic;
        align-self: flex-end;
    }
    
    p.large {
        font-size: 1.5rem;
    }
}

.text_block {
    width: 100%;
    color: white;
    line-height: 1.8;
    
    p:not(:last-of-type) {
        margin-bottom: 5rem;
    }
    
    p.large {
        font-family: var(--font-1);
        font-size: 2rem;
        font-weight: 700;
        text-align: center;
    }
}

@media (max-width: 1023px) {
    .quote_container {
        width: 90%;
    }
}

.reveal-element {
  animation: reveal linear forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 50%; 
}

.constellation_container {
    width: 100%;
    background-image: url(IMG/Revelation-12-sign-Wikicommons.gi);
    position: relative;
    aspect-ratio: 1000 / 557;
    
    .moon {
        position: absolute;
        aspect-ratio: 1;
        width: 40px;
        top: 86.5%;
        left: 8.5%; 
        
        svg {
            fill: white;
            width: 100%;
            height: 100%;
        }
    }
    
    .moon:after {
        content: 'Moon';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: 80%;
        left: 90%;
        font-size: .875rem;
    }
    
    .sun {
        position: absolute;
        aspect-ratio: 1;
        width: 15px;
        background: white;
        border-radius: 50%;
        top: 65%;
        left: 56%;
        box-shadow: 0 0 40px 20px white;
    }
    
    .sun:after {
        content: 'Sun';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: 100%;
        left: 100%;
        font-size: .875rem;
    }
    
    .planet {
        border-radius: 50%;
        position: absolute;
        aspect-ratio: 1;
    }
    
    #jupiter {
        width: 15px;
        background: white;
        top: 83%;
        left: 27.5%;
    }
    
     #jupiter:after {
        content: 'Jupiter';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: -150%;
        left: -300%;
        font-size: .875rem;
    }  

    
    #mercury {
        width: 10px;
        background: white;
        top: 52%;
        left: 68.5%;
    }
    
    #mercury:after {
        content: 'Mercury';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: 100%;
        left: 100%;
        font-size: .875rem;
    }  
    
    
    #mars {
        width: 5px;
        background: white;
        top: 47.5%;
        left: 76.25%;
    }
    
    #mars:after {
        content: 'Mars';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: 100%;
        left: 100%;
        font-size: .875rem;
    }
    
    #venus {
        width: 8px;
        background: white;
        top: 41%;
        left: 84%;
    }
    
    #venus:after {
        content: 'Venus';
        font-family: var(--font-1);
        color: white;
        position: absolute;
        top: 100%;
        left: 100%;
        font-size: .875rem;
    }
    
    .star {
        height: 25px;
        width: 20px;
        position: absolute;
        
        svg {
            fill: white;
            width: 100%;
            height: 100%;
        }
    }
    
    #star_1 {
        top: 58%;
        left: 6%;
    }
    
    #star_2 {
        top: 60%;
        left: 20%;
    }
    
    #star_3 {
        top: 75%;
        left: 7.5%;
    }
    
    #star_4 {
        top: 76%;
        left: 15.5%;
    }
    
    #star_5 {
        top: 85%;
        left: 17%;
    }
    
    #star_6 {
        top: 86%;
        left: 31%;
    }
    
    #star_7 {
        top: 64%;
        left: 28.5%;
    }
    
    #star_8 {
        top: 57%;
        left: 40%;
    }
    
    #star_9 {
        top: 42%;
        left: 38.5%;
    }
    
    #star_10 {
        top: 67%;
        left: 44%;
    }
    
    #star_11 {
        top: 65%;
        left: 50.5%;
    }
    
    #star_12 {
        top: 51%;
        left: 60%;
    }
    
    #star_13 {
        top: 35%;
        left: 59%;
    }
    
    #star_14 {
        top: 32.5%;
        left: 68.5%;
    }
    
    #star_15 {
        top: 22%;
        left: 68%;
    }
    
    #star_16 {
        top: 21%;
        left: 83.5%;
    }
    
    #star_17 {
        top: 13%;
        left: 84%;
    }
    
    #star_18 {
        top: 6%;
        left: 90%;
    }
    
    #star_19 {
        top: 10%;
        left: 93%;
    }
    
    #star_20 {
        top: 26%;
        left: 87.5%;
    }
    
    #star_21 {
        top: 37%;
        left: 88.25%;
    }
    
    #line-container {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    #line-container line {
        stroke: rgba(255, 255, 255, 0.4);
        stroke-width: 1.5;
    }
}

.pulse-element {
    animation: pulse-scale 2s infinite;
}

@keyframes pulse-scale {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}

@media (max-width: 1023px) {
    .star{
        height: 15px !important;
        width: 10px !important;
        margin: 5px 0 0 3px;
    }
}

/* ----- Timeline -----*/

.timeline_container {

    h1,h2,h3,h4,h5,h6 {
        color: var(--clr-blue);
        margin-top: 0;
        margin-bottom: 0;
    }

    .container-fluid {
        .row {
            padding: 0 0 4em 0;
        }
    }

    .example-title {
        text-align: center;
        margin-bottom: 3rem;
        padding: 3em 0;
        border-bottom: 1px solid var(--clr-neutral-300);
    }

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

    /*-- GENERAL STYLES
    ------------------------------*/
    .timeline {
        line-height: 1.4em;
        list-style: none;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    /*----- TIMELINE ITEM -----*/

    .timeline-item {
        padding-left: 40px;
        position: relative;
        &:last-child {
            padding-bottom: 0;
        }
    }

    /*----- TIMELINE INFO -----*/

    .timeline-info {
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 3px;
        margin: 0 0 .5em 0;
        text-transform: uppercase;
        white-space: nowrap;
        font-family:var(--font-1);
        color: var(--clr-neutral-500);
    }
    /*----- TIMELINE MARKER -----*/

    .timeline-marker {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        width: 15px;
        &:before {
            background: var(--clr-blue);
            border: 3px solid transparent;
            border-radius: 100%;
            content: "";
            display: block;
            height: 10px;
            position: absolute;
            top: 4px; left: 0;
            width: 10px;
            transition: background 0.3s ease-in-out,
                    border 0.3s ease-in-out;
        }
        &:after {
            content: "";
            width: 3px;
            background: #CCD5DB;
            display: block;
            position: absolute;
            top: 24px; bottom: 0; left: 6px;
        }
        .timeline-item:last-child &:after {
            content: none;
        }
    }
    .timeline-item:not(.period):hover .timeline-marker:before {
        background: transparent;
        border: 3px solid var(--clr-blue);
    }

    /*----- TIMELINE CONTENT -----*/

    .timeline-content {
        padding-bottom: 40px;
        
        p:last-child {
            margin-bottom: 0;
        }
        
        p.reference {
            font-size: .875rem;
            font-style: italic;
            margin-top: -.75rem;
        }
    }

    /*----- TIMELINE PERIOD -----*/
    
    .period {
        padding: 0;
        .timeline-info {
            display: none;
        }
        .timeline-marker {
            &:before {
                background: transparent;
                content: "";
                width: 15px;
                height: auto;
                border: none;
                border-radius: 0;
                top: 0;
                bottom: 30px;
                position: absolute;
                border-top: 3px solid #CCD5DB;
                border-bottom: 3px solid #CCD5DB;
            }
            &:after {
                content: "";
                height: 32px;
                top: auto;
            }
        }
        .timeline-content {
            padding: 40px 0 70px;
        }
        .timeline-title {
            margin: 0;
        }
    }
    
    .period:first-of-type {
        .timeline-marker {
            &:before {
                background: transparent;
                content: "";
                width: 15px;
                height: auto;
                border: none;
                border-radius: 0;
                top: 0;
                bottom: 30px;
                position: absolute;
                border-bottom: 3px solid #CCD5DB;
            }
        }
    }

    /*----------------------------------------------
        MOD: TIMELINE SPLIT
    ----------------------------------------------*/

        .timeline-split {
            @media (min-width: 768px) {
                .timeline {
                    display: table;
                }
                .timeline-item {
                    display: table-row;
                    padding: 0;
                }
                .timeline-info,
                .timeline-marker,
                .timeline-content,
                .period .timeline-info {
                    display: table-cell;
                    vertical-align: top;
                }
                .timeline-marker {
                    position: relative;
                }
                .timeline-content {
                    padding-left: 30px;
                }
                .timeline-info {
                    padding-right: 30px;
                }
                .period .timeline-title {
                    position: relative;
                    left: -45px;
                }
            }
        }

}

/* =================================

5b. Bible Study 

================================== */


#Bible-Study {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 30%),
                rgb(from var(--clr-blue) r g b / 0%)), 
                url('IMG/Header_Bible-Study.jpg');
    background-position: center;
    background-size: cover;
}

.study_topics_container {
    flex-wrap: wrap;
    gap: 4rem;
    justify-content: center;
    margin: 4rem 0;
    
    .study_item {
        width: 100%;
        max-width: 400px;
        overflow: hidden;
        border-radius: 12px;
        background: white;
        box-shadow: var(--drop-shadow);
        transition: 0.3s;
        
        .item_header {
            width: 100%;
            height: 90px;
            background: var(--clr-blue);
            padding: 2rem;
            text-align: center;
            color: white;
            
            h3 {
                margin: 0;
                font-size: 1.5rem;
            }
        }
        
        .item_img {
            width: 100%;
            height: 150px;
            
            
            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }
        
        .item_text {
            padding: 2rem;
            flex-grow: 1;
            align-items: flex-start;
            
            .btn {
                margin-top: auto;
            }
            
        }
    }
    
    .study_item:hover {
        transform: scale(1.02);
        box-shadow: var(--drop-shadow-hover);
    }
}

/* =================================

5b.i Study Basics

================================== */

#Study-Basics {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 30%),
                rgb(from var(--clr-blue) r g b / 0%)), 
                url('IMG/Header_Study-Basics.jpg');
    background-position: center;
    background-size: cover;
}

.information_section {
    margin: 4rem 0;
    
    h2 {
        color: var(--clr-blue);
        border-bottom: 2px solid var(--clr-blue);
        line-height: 2;
        margin-bottom: 3rem;
    }
    
    .two_column {
        margin: 2rem 0;
        
        .img_block {
            max-width: unset;
            flex: 1;
        }
    }
}

.example_container {
    width: 90%;
    margin: 2rem auto;
    
    h3 {
        background-image: linear-gradient(45deg, var(--clr-blue-light), var(--clr-blue-dark));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
        display: inline-block; 
        font-weight: 900;
        font-size: 1.5rem;
    }
    
    .question, .answer {
        width: 100%;
        border-radius: 12px;
        padding: 1.5rem;
        
        p:last-of-type {
            margin-bottom: 0;
        }
    }
    
    .question {
        background: var(--clr-neutral-200);
        
        p{ 
            font-family: var(--font-1);
            color: var(--clr-blue);
        }
    }
}


/* =================================

5b.ii End Times Bible Study

================================== */

#End-Times-Bible-Study {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 20%),
                rgb(from var(--clr-blue) r g b / 0%)), 
                url('IMG/Header_End-Times-Bible-Study.jpg');
    background-position: 50% 15%;
    background-size: cover;
}

.study_btn_container {
    margin: 2rem 0;
    gap: 1.5rem;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    
    button {
        width: 100%;
        max-width: 15rem;
    }
}


/* 	----------------------------------- 
	[CAC] Compound Accordion
    ----------------------------------- */

.compound--accordion-container {
    width: 100%;
    margin-bottom: 5rem;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.cac {
    width: 100%;
    display: flex;
}

.cac--accordion {
    width: 100%;
    transition: 3s;
    justify-content: space-between;
    background: unset;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

.cac--accordion--below {
    width: 100%;
    transition: .3s;
    
    svg, h3 {
        transition: 0.3s;
    }
}

.cac--accordion--below:hover {
    
    svg {
        fill: var(--clr-blue);
    }
    
    .cac--accordion--header h3 {
        color: var(--clr-blue);
    }
}

.cac--accordion--header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 100%;
    
    h3 {
        margin: 0;
    }
}

.cac-accordion--header--arrow {
    height: 1.17em;
    aspect-ratio: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s;
}

.cac-arrow-svg {
    width: 100%;
    height: 100%;
}

.cac--panel {
    transition: 0.3s;
    overflow: hidden;
    max-height: 0;
    padding-top: 0;
    display: block;
}

.is-open .cac--panel {
    padding-top: 2rem;
    max-height: 100%;
}

.cac-accordion--header--arrow {
    transform: rotate(0);
}

.is-open .cac-accordion--header--arrow {
    transform: rotate(90deg);
}

@media (max-width: 1023px) {
    .compound--accordion-container .img_block {
        display: none;
    }
}

/* =================================

5b.iv Resources

================================== */

#Resources {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 20%),
                rgb(from var(--clr-blue) r g b / 0%)), 
                url('IMG/Header_Resources.jpg');
    background-position: 50% 30%;
    background-size: cover;
}

.resource_item {
    width: 350px;
    border-radius: 12px;
    box-shadow: var(--drop-shadow);
    overflow: hidden;
    align-items: center;
    transition: 0.3s;
    
    .resource_top {
        background: var(--clr-blue-dark);
        height: 60px;
        width: 100%;
    }
    
    .resource_icon {
        width: 75px;
        height: 75px;
        background: var(--clr-blue);
        border: 4px solid var(--clr-blue);
        border-radius: 50%;
        margin-top: -37.5px;
        transition: 0.3s;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        
        img {
            width: 100%;
            height: 100%;            
        }
        
        svg {
            fill: white;
            width: 60%;
        }
    }
    
    .resource_information {
        width: 100%;
        padding: 1rem 2rem 2rem;
        align-items: flex-start;
        flex-grow: 1;
        
        a {
          margin-top: auto;
        }
    }    
}

.resource_item:hover {
    box-shadow: var(--drop-shadow-hover);
    
    .resource_icon {
        transform: scale(1.1);
    }
}

/* =================================

5d. FAQs

================================== */

#FAQs {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 20%),
                rgb(from var(--clr-blue) r g b / 5%)), 
                url('IMG/Header_FAQs.jpg');
    background-position: center;
    background-size: cover;
}

.FAQ {
    
    h2 {
        margin-bottom: 3rem;
    }
    
    .cac--accordion--below {
        padding: 1.5rem;
    }
    
    .cac--accordion--header {
        flex-direction: row-reverse;
        justify-content: flex-end;
        gap: 1.5rem;
    }
    
    .faq_search {
        width: 100%;
        max-width: 768px;
        margin: 0 auto 5rem;
        position: relative;
        
        svg {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 1.5rem;
            width: 1rem;
            height: 1rem;
            fill: var(--clr-neutral-500);
        }
    }
    
    #faqSearch {
        width: 100%;
        padding: 1rem 1rem 1rem 3rem;
        border-radius: 2rem;
        border: 1px solid var(--clr-neutral-500);
        font-family: var(--font-1);
        font-size: 1rem;
    }
}


/* =================================

5e. Get Saved

================================== */

#Get-Saved {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 50%),
                rgb(from var(--clr-blue) r g b / 30%)), 
                url('IMG/Header_Get-Saved.jpg');
    background-position: 50% 30%;
    background-size: cover;
}

.abc {
    margin: 4rem auto;
    width: 90%;
    
    h2{
        color: var(--clr-blue);
    }
}

.next_steps {
    margin: 4rem 0 0;
}

/* =================================

5f. Get In Touch

================================== */

#Get-In-Touch {
    background: linear-gradient(
                to right,
                rgb(from var(--clr-blue) r g b / 20%),
                rgb(from var(--clr-blue) r g b / 5%)), 
                url('IMG/Header_Get-In-Touch.jpg');
    background-position: 50% 30%;
    background-size: cover;
}

.contact_form {
    width: 100%;
    max-width: 700px;
    margin: 2rem auto;
    
    form {
        gap: 1rem;
        
        .input_container {
            flex: 1;
            position: relative;  
            
            input {
                padding-left: 4rem;
                width: calc(100% - 6rem);
            }

            
            svg {
                position: absolute;
                left: 2rem;
                top: 50%;
                transform: translateY(-50%);
                width: 1rem;
                height: 1rem;
                fill: var(--clr-neutral-500);
            }
            
        }
        
        input, textarea {
            background: var(--clr-neutral-200);
            padding: 1rem 2rem;
            border-radius: 1.5rem;
            border: none;
            margin: 0;
            font-family: var(--font-1);
            font-size: 1rem;
            color: var(--clr-neutral-500);
        }
        
        textarea {
            min-height: 100px;
            flex: 1;
            resize: vertical;
            field-sizing: content;
        }
    }
}

/* =================================

5e. Timeline

================================== */