/* Website by Michael Lewis of Skyrocket Web Design */
/* Circa 2026 */

*,
*::before,
*::after {
    box-sizing: border-box;
    /* The most important rule for modern design */
}

html,
body {
    width: 100%;
    margin: 0;
    padding: 0;
    /* overflow-x: hidden; */
    /* Prevents any accidental horizontal "leakage" */
    position: relative;
}


:Root {
    font-size: 20px;
    --font-family: "Lato", sans-serif;


    /* --primary-color: #78dB98;  Green color scheme
    --hover:#78db98;
    --yellow-color: #F2c955;
    --accent-color: #ff5733;
    --blue-color: #07417F;
    --text-color: #334533;
    --background-color: #EEEEEE;
    --salmon: #DB7A79;
    --graycolor: #7C9C86;
    --darkcolor: #455c4c;
    --verydarkcolor: #202620;
    --brown: #867777;
    --darkbrown: #331e1e; */


    --primary-color: #07417f;
    --hover: #8FC5FF;
    --yellow-color: #F2c955;
    --accent-color: #D89101;
    --blue-color: #07417f;
    --text-color: #202045;
    --background-color: #EEEEEE;
    --salmon: #DB7A79;
    --graycolor: #A7C5D6;
    --darkcolor: #142940;
    --verydarkcolor: #031119;
    --brown: #867777;
    --darkbrown: #331e1e;
}

body#Home a#Home,
body#About a#About,
body#Media a#Media,
body#Contact a#Contact,
body#Church a#Church,
body#Gospel a#Gospel {color: white;}


.icon-strip {
    width: 100%;
    overflow: hidden;  /* hides the scrolling content outside the strip */
    margin-top: 2rem;
}
.icon-chip img {
    width: calc (177px / 2);
    height: 50px;
    object-fit: contain;
}
.icon-strip-inner {
    display: flex;
    gap: 1rem;
    padding: .75rem 1rem;
    width: max-content;
    animation: marquee 40s linear infinite;
}

.icon-strip-inner:hover {
    animation-play-state: paused;  /* pauses on hover */
}

@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }  /* -50% because icons are doubled */
}

.matter-row {
    width:100%;
    background-color: white;
    margin-top: 2rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
    
}
.matter {
    width:100%;
    max-width:1000px;
    margin-left: auto;
    margin-right: auto;
    display:flex;
    flex-direction: column;
    justify-content: center;
}
.matter img {
    display: block;
    margin: 0 auto;
    align-self: center;
}
.matter p { font-size: 1.4rem;text-align: center;}

.lesson-title {margin-top:1rem;}
.lesson-row {
    width:100%;
    background-color: #E1EBEE;
    margin-top: 4rem;
    padding-top: 3rem;
    padding-bottom: 3rem;
}
.lesson-container {
    flex-direction: column;
    display:flex;
    gap:4rem;
    width:100%;
    max-width: 1200px;
    padding:1rem;
    margin-left: auto;
    margin-right: auto;
}
.lesson-child {
    display:flex;
    flex-direction: column;
    flex:1;
    margin:0;
    padding:0;
    gap:1rem;
}
.lesson-child a {
  display: flex;
  justify-content: center;
  text-decoration: none;
}

.lesson-child button {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}
.lesson-child p {padding:0;margin:0;}
.lesson-child img {
    width:100%;
    border-radius: 12px;
}
.lesson-child li {list-style: none;}
.lesson-child h3 {
    font-size: 1.3rem;
    align-self: center;
    font-weight: 300;
    margin-bottom: 1rem;;
}
.ethical-container {
    display:flex;
    gap:1rem;
    flex-direction: column;
}
.ethical-child {
    flex:1;
    padding: 0;
    text-align: left;
    display:flex;
    flex-direction:column;
    gap:1rem;
}
.ethical-child-text {
    color:var(--text-color);
    padding:0;
    flex:1;
    margin:0;
    width:100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.ethical-title {margin-top:3rem;min-height: 2rem;}
.ethical-title h2 {margin: 2rem 1rem;}
.ethical-title p.indent {margin-top: 1rem;}
.ethical-child-text a {white-space: nowrap;}
.ethical-child-img {
    flex:1;
    padding:0;
    display:flex;
    flex-direction:column;
    align-items: center; /* This centers the image horizontally in the flex-column */
    justify-content: center;
}
.ethical-child-img img {max-height: 350px;}





.altar-row {
    width:100%;
    background-color: transparent;

}
.altar-link {
    display:flex;
}
.altar-link a{
    background-color:var(--blue-color);
    padding: 0 2rem 0.2rem;
    border-radius: 500px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    color:#eee;
    font-size: clamp(1.1rem, 0.7727rem + 1.6364vw, 2rem);
    text-decoration: none;
    margin-top:4rem;
}
.altar-link a:hover {
    background-color: var(--hover);
    color:#333;
}


.plan-row {
    width:100%;
    max-width:1200px;
    margin-left: auto;
    margin-right: auto;
    padding:0 1rem 0 1rem;
}

.plan-row h1 {
    font-weight: 300;
    width:100%;
    text-align: center;
    margin:3rem 0;
}

.plan-row-dark {
    /* border-radius: 17px; */
    margin:0;
    width:100%;
    background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 134, 1) 51%, rgba(0, 0, 0, 1) 100%);
    max-width: 1400px;
    margin-bottom: 3rem;
    margin-left: auto;
    margin-right: auto;
    }

.plan-container {
    display:flex;
    gap:1rem;
    flex-direction: column;
}

.plan-child {
    flex:1;
    padding: 1rem;
    text-align: left;
    display:flex;
    flex-direction:column;
    gap:1rem;
}

.plan-child h2 {
    color:white;
    text-align: left;
    font-size: 2.5rem;
}
.plan-child-verse {
    width:99%;
    padding: 0.5rem .8rem 0.5rem .8rem;
    color:var(--text-color);
    background-color: seashell;
    border-radius: 12px;
    flex:1;
    margin:0;
    margin-left: auto;
    margin-right: auto;
    height:auto;
}
.plan-child-verse p {padding:0;margin:0;}
.plan-child-verse p.dropcap::first-letter {
    margin-right: .5rem;
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
    color:var(--accent-color);
    font-size: 2rem;
    line-height: 2.3rem;
    float:left;
    text-shadow: 1px 1px black;

}
.plan-child .verse {
    color:var(--accent-color);
    text-shadow: 1px 1px black;
    width:100%;
    text-align: right;
    margin:0;
    padding:0;
}


.supporter-container {
    width:100;
    max-width: 500px;
    padding:3rem 1rem;
    margin-left: auto;
    margin-right: auto;
    /* background:salmon; */
}

.supporter-child {
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    width:100%;
}

.supporter-child .church {
    font-size: .9rem;
    margin-top:2rem;
    align-self: flex-start;
}

.supporter-child .church a {
    color:var(--darkbrown);
    text-decoration: none;
    border-bottom: 1px solid var(--accent-color);
    
}
.supporter-child .church a:hover {
    color:var(--hover);
    text-shadow: 1px 1px black;
}

.supporter-container .church::first-letter {
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    float: left;
    font-size: 1.3rem;
    line-height: 1.3rem;
    font-weight: bold;
    margin-right: .2rem;
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
}

.new2026-container {
    max-width: 1200px;
    padding: 0 2rem;
    margin: 0 auto; 
}
.three-columns {
    display:flex;
    flex-direction: column;
}

.three-child {
    flex:1;
    text-align: left;
    align-items: start;
    padding:0 1rem;
}

.new2026 {
    background-color: var(--background-color);
    text-align: center;
    width: 100%;   
    margin-top:2rem;
    margin-bottom:2rem;
    border-radius: 12px;
    padding:1rem;
    box-sizing: border-box;
}
.newfor2026 {
    color:var(--accent-color);
    text-shadow: 1px 1px black;
    font-family: "Mea Culpa", cursive;
    text-align: center;
    font-size: 3rem;
    margin:0;
}

img.media-icon {
    float:left;
    transform: rotate(-5deg);
    position: absolute;
    left:-20px;
    top:-10px;
    width:80px;
    height:49px;
}

.station-list {
    background-color: var(--background-color);
    padding:.5rem 1rem 2rem 1rem;
    /* color:white; */
    margin: .5rem 1rem;
    text-transform: capitalize;
    font-size: 1.0rem;
    color: var(--verydarkcolor);
    display:inline-block;
    border: 1px solid var(--primary-color);
    overflow: visible;
    position:relative;
    /* max-width: 30ch; */
    border-radius: 12px;
    transition: all 0.3s ease; /* Smooth hover transition */
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    width:90%;
}
.station-list img {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    padding: 1rem 2rem;
}
.station-list h4 {
    font-size: 1.5em;
    font-weight: 300;
    margin-left:0;
    text-align: center;
}
.station-list h4::first-letter {
    font-family: "Mea Culpa", cursive;
    font-size: 2.5rem;
    color:var(--accent-color);
    text-shadow: 1px 1px black;
    padding-right:5px;
}
.station-list .type, 
.three-child .type {
    color:var(--accent-color);
    text-shadow: 1px 1px black;
    font-family: "Mea Culpa", cursive;
    font-size: 2rem;
    margin:1rem 0 0 0;
}
/* .station-list .type, */
.station-list .time,
.station-list .channels {
    margin:1rem 0 0 .5rem;
}



.year-banner-wrapper {
    width: 100%;
    overflow: hidden;
    padding: 1.5rem 0;
}

.year-banner {
    background-color: goldenrod;
    width: 140%;
    margin-left: -20%;
    padding: 2rem 1rem;
    font-family: "Mea Culpa", cursive;
    font-size: clamp(1.7rem, 0.1364rem + 7.8182vw, 6rem);
    text-align: center;
    transform: rotate(-2deg);
    z-index: 999;
}

.mobile-only { visibility: visible;z-index: 1;}
.side-by-side-row {
    width:100%;
    padding: 4rem 0;
    margin:0;
}
.side-by-side-container{
    /* width:100%; */
    max-width: 1200px;
    margin:0;
    padding:0 1rem;
    display:flex;
    flex: 1;
    flex-direction: column;
    gap:2rem;
    margin-left: auto;
    margin-right: auto;
    

}
.side-by-side-child {
    width:100%;
    flex:1;
}
.side-by-side-child-img {
    width:100%;
    background-image: url("images/map.jpg");
    background-position: center;
    border-radius: 17px;
    overflow: hidden;
    display:flex;
    flex:1;
    min-height:400px;
}
.side-by-side-child img {
    overflow: hidden;
    width: 100%;
    object-fit: contain;
}

.side-by-side-child p {font-size: 1.3rem;}
div.img-caption {
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    z-index: 99;
    width:100%;
    background-color: rgba(0,0,0,0.6) !important;
    text-align: center;
    padding: .5rem 0;
    margin-top: auto;
    font-size: 1.5rem;
}

main.article {
    width:96%;
    background-color: seashell;
    margin-left: 2%;
    margin-right: 2%;
    margin-top:3rem;
    padding: 2%;
    border: 1px solid var(--verydarkcolor);
    border-radius: 10px;


}
main.article h1{text-transform: capitalize;}

.text-links-container {
    /* display:flex;
    flex-direction: column; */
    
    padding: 1rem ;
    /* background-color: var(--graycolor);
    background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 184, 1) 51%, rgba(0, 0, 0, 1) 100%); */
    /* background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 134, 1) 51%, rgba(0, 0, 0, 1) 100%); */
    display: grid;
    /* Columns will be at least 250px wide, fitting as many as possible per row */
    grid-template-columns: 1fr; 
    gap: 15px;
    width:100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.margins {margin:1rem !important;}

.row-blue {
    background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 134, 1) 51%, rgba(0, 0, 0, 1) 100%);
    width:100%;
    margin-top:4rem;
    padding:4rem 0 4rem 0;
}

.row-blue h2 {color: white;}
.text-file-link {
    background-color: var(--background-color);
    /* background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 184, 1) 51%, rgba(0, 0, 0, 1) 100%);
 */ padding:.5rem 1.5rem .5rem 3rem;
    /* color:white; */
    margin: .5rem 1rem;
    text-transform: capitalize;
    font-size: 1.0rem;
    color: var(--verydarkcolor);
    display:inline-block;
    border: 1px solid var(--primary-color);
    overflow: visible;
    position:relative;
    /* max-width: 30ch; */
    border-radius: 12px;
    transition: all 0.3s ease; /* Smooth hover transition */
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    width:90%;
}

.text-file-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-color: #007bff; /* Change to your brand color */
}
.text-file-link:hover >.article-icon {
    transform: rotate(0deg);
    transition: all 0.45s ease; 
}

.text-file-link.dropcap::first-letter {
    line-height: 
    2rem;font-size: 
    2rem !important;
    text-shadow: 1px 1px black;
}
.text-file-link i {float:right;font-size: .8rem;}
.text-links a {text-decoration: none;}
.text-file-link .fa-file {
    font-size: 3.7rem;
    color: gray;
    float:left;
    transform: rotate(5deg);
    position: absolute;
    left:-20px;
    top:-3px;
}

.article-icon {
    font-size: 3.7rem;
    color: gray;
    float:left;
    transform: rotate(5deg);
    position: absolute;
    left:-20px;
    top:-10px;
    width:62px;
    height:82px;
}


i {
    font-size: 1rem;
}

.footer-spacer {
    min-height: 3rem;
}

footer {
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
}

.subheading {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    color: var(--primary-color);
    text-align: center;
    margin: 0;
}

body {
    background-color: white;
    /* background-color: #212925; */
    /* background-color: seashell; */
    padding: 0;
    margin: 0;
    font-size: 20px;
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

blockquote {
    background-color: var(--darkcolor);
    width: 100%;
    margin: 4rem 0 0 0;
    padding: 0px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Centers content along the main axis (horizontal by default) */
    align-items: center;
}

blockquote p {
    color: #eee;
    font-weight: bolder;
    font-size: clamp(8px, 0.6268rem + 2.3944vw, 3.5rem);
    margin: 2rem 0 0;
    padding: 0px;
    white-space: nowrap;
}

blockquote cite {
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    margin: 0px;
    padding: 0px;
    margin: 0 0 2rem 0;
    font-size: 1.3rem;
}

button {
    margin-top: 3rem;
    padding: 10px 29px 10px;
    font-size: 1.5rem;
    font-family: 'Lato-bold', sans-serif;
    background-color: var(--graycolor);
    color: var(--text-color);
    border: 1px solid black;
    border-radius: 999em;
    cursor: pointer;
}

button:hover {
    background-color: var(--hover);
    /* box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.6); */
}

button .big-icon {
    color: var(--text-color);
    margin-right: 1rem;
    font-size: 1.4rem;
}

a.eot img {
    aspect-ratio: 16 / 9;
    border-radius: 17px;
    width:100% !important;
    
}

.video-container {
  width: 100% !important; /* Forces 100% width */
  aspect-ratio: 16 / 9;   /* Automatically sets height to keep the ratio */
  border: none;
  display: inline-block;        /* Ensures it behaves as a block element */
  position: relative;
}
#gary, #jason, #sheila iframe {border-radius: 17px;overflow: hidden;}

.row-video {
    
    padding:0 3%;
    /* gap:1rem; */
    width:100%;
}

.wrapper-video {
    /* max-width: 1400px; */
    margin-left: auto;
    margin-right: auto;
    width:100%;
    display:flex;
    flex-direction: column;
    max-width: 1200px;
}
.panel-video {
    margin-top: 100px;
    padding: 100px 1rem 1rem;
    background-color: seashell;
    color: var(--text-color);
    font-size: 20px;
    border-radius: 17px;
    /* max-width: 900px; */
    /* width: 95%; */
    width: 100%;
    display:flex;
    flex-direction: column;
    border:2px solid var(--primary-color);
    position: relative;
}
.panel-video p {font-size: 1.3rem;}
.grid-box img.photo {
    width:160px;
    border-radius: 50%;
    position:absolute;
    left: calc(50% - 80px);
    top:-80px;
    border:3px solid var(--graycolor);
    outline: 6px solid var(--primary-color);
}


.grid-youtube {
  /* background-color: #867777;   */
  -ms-flex-align: start;
  display: grid;
  /* Two columns: left fits content/image, right takes remaining space */
  grid-template-columns: 1fr; 
  /* Two rows of equal or automatic height */
  grid-template-rows: auto auto; 
  column-gap: 30px; /* Optional space between items */
  max-width: 100%;
  margin-left: 0 ;
  margin-right: 0 ;
  margin-bottom: 2rem;
}
.grid-youtube h3 {font-size: 2rem;}
.grid-youtube h4 {font-size: 1.4rem;font-weight: 300;}
.grid-box {
  /* This forces the image container to span both rows on the left */
  grid-row: span 2; 
  place-self: center
}

.grid-box img {
  width: 100%;
  height: 169px;
  /* Ensures the image fills the span without stretching */
  object-fit: cover; 
  display: block;
  width:160px;
  border-radius: 50%;
}

.grid-row {
  padding: 10px;
  font-size: 20px;
  line-height: 2rem;
 /*  background-color: #ddddff; Visual aid */
  color: var(--text-color);
  text-align: center;
}
.grid-row {
  align-self: end; 
}
.grid-row:last-child {
  align-self: start;
}


/* Columns*/
.centere {
    /* Wrapping your h2 and p in this div makes them move as one unit */
    max-width: 50ch;
    margin-left: auto;
    margin-right: auto;
}

.centered h2 {
    display: inline-block !important;
    max-width: 50ch;
}

.indent {text-indent: 1rem;}


.contact-columns {
  display: flex;         /* Enables flexbox on the container */
  flex-wrap: wrap;       /* Allows items to wrap to the next line */
  justify-content: space-between; /* Distributes space evenly between items */
  gap: 2rem;             /* Adds space between columns and rows */
  justify-content: center;
}

.col{
  width: 100%S;
  box-sizing: border-box;
  padding: 1rem;
  
}
.col h3 {
    font-size: 2rem;
    margin-top: 3rem;
    font-weight: 300;
}
.map h3 {margin-bottom: 2rem;font-size: 2rem;color:var(--graycolor);font-weight: 300;}
.col h4 {margin-top:2rem;font-size: 1.5rem;}
.col p {font-size: 1.0rem;margin-top:.5rem; margin-left:1rem;}

.map-container {
    background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 84, 1) 51%, rgba(0, 0, 0, 1) 100%);
}
.map {
    width:100vw;
    
    padding:2.5rem 5% 4rem 5%; margin-top:3rem;
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;
}

.map iframe {margin-left:auto;margin-right:auto;}
.map h3 {margin-left: 4rem;}


.two-columns {
    flex-direction: column;
    display: flex;
    align-items: stretch;
    /* width:100%; */
    margin: 1rem;
    margin-left: auto;
    margin-right: auto;
}

.text-box {
    /* padding:1rem; */
    justify-content: center;
}

.text-box,
.image-box {
    flex: 1;
    /* Makes columns take up equal space */
}

.text-box p {
    margin: auto;
    /* background-color: rgb(232, 193, 193);  */
    max-width: 50ch;
    line-height: 1.6rem;
    padding: 0 1rem 2rem 1rem;
}

.text-box img {
    text-align: center;
    margin: auto;
    /* width:100%; */
    border-radius: 17px;
    margin-right: 1rem;
    overflow: auto;
}

.text-box h2 {
    text-align: left;
    margin: auto;
}

.text-box p.dropcap::first-letter {
    /* display:inline-block; */
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    /* Your accent color */
    float: left;
    /* Allows text to wrap around the letter */
    font-size: 4rem;
    /* Make it large */
    line-height: 0.8;
    /* Pull the letter up to align with the top of the text */
    font-weight: bold;
    margin-right: 4px;
    /* Space between letter and following text */
    font-family: "Mea Culpa", cursive;
    /* Serif fonts usually look better for drop caps */
}

.image-box {
    margin: auto;
    width: 95%;

}

.image-box img {
    width: 100%;
    object-fit: contain;
    /* Fills the column while maintaining aspect ratio */
    display: block;
    /* Removes bottom whitespace */
    border-radius: 17px;
    height: auto;
}

.image-left img {
    border-radius: 17px;
    margin-bottom: 2rem;
}

.image-right img {
    border-radius: 17px;
}

/* End Columns */




.panel {
    padding: 2rem;
    color: var(--text-color);
    font-size: 20px;
    background-color: white;
    border-radius: 17px;
    border: 1px solid var(--darkcolor);
    /* box-shadow: 2px 2px 4px rgba(3,3,3,.3); */
    max-width: 900px;
    width: 85%;
    margin: auto;
}

.panel-giant {
    padding: 1rem;
    background-color: seashell;
    color: var(--text-color);
    font-size: 20px;
    border-radius: 17px;
    border: 1px solid var(--darkcolor);
    max-width: 900px;
    width: 95%;
    margin: auto;
}

.panel-giant p {
    font-size: 20px;
    text-align: justify;
}

.panel-giant cite {
    font-size: 16px;
    float: right;
    margin-bottom: 1rem;
    color: var(--accent-color);
    text-shadow: 1px 1px black;
}

p {
    color: var(--text-color);
    font-family: var(--font-family);
    font-size: 20px;
    margin-top: 1.5rem;
    ;
}

p cite {
    text-align: center;
    color: var(--accent-color);
    text-shadow: 1px 1px black;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    padding: 0;
    color: var(--primary-color);
}

.fa-regular,
.fa-solid {
    margin-right: .5rem;
    margin-left: .5rem;
    color: var(--hover);
}

.fa-clock,
.fa-map {
    color: var(--hover);
}

.fa-clock:hover,
.fa-map:hover,
.tag:hover>.fa-map {
    color: var(--verydarkcolor);
}

.fa-clock:hover,
.tag:hover>.fa-clock {
    color: var(--verydarkcolor);
}


#sticky-button-container {
    position: fixed;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
    z-index: 1000;
    transition: opacity 0.3s ease;
}

/* This class will be toggled by JS */
#sticky-button-container.at-footer {
    position: absolute;
    bottom: auto;
    /* Adjust this value based on your footer's position */
    top: -119px;
}

/* Ensure the footer is relative so the absolute buttons 
   position themselves correctly against it */
#site-footer {
    position: relative;
    /* background: #333; */
    padding: 50px;
    z-index: 150;
}
.sitemap a {margin-right:1rem;white-space: nowrap; }

.tag {
    position: relative;
    padding: 0px 10px 5px 10px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    border: none;
    background-color: var(--verydarkcolor);
    color: white;
    box-shadow: none;
}


/* .tag:hover { box-shadow: 0px 0px 6px var(--graycolor);} */


nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
}

.nav-links {
    display: flex;
    position: relative;
    flex-direction: row;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    background-color: var(--graycolor);
    text-decoration: none;
    margin: 0;
    padding: 0;

}

.nav-links a {
    color: var(--darkbrown);
    text-decoration: none;
    font-size: 1.1rem;
    font-family: 'Lato-bold', sans-serif;
    margin: 0;
    padding: 3px 0px 3px;
}


.nav-links a:hover {
    color: var(--primary-color);
}


.moving-underline {
    position: absolute;
    height: 3px;
    bottom:0;
    background-color: var(--accent-color);
    transition: width 0.3s ease, transform 0.3s ease, opacity 0.5s ease;
    pointer-events: none; 
    opacity: 0;
    pointer-events: none;
}


@media screen and (max-width: 759px) {
    .nav-links {
        position: absolute;
        visibility: hidden;
        left: 1rem;
        height: auto;
        top: 40px;
        background-color: var(--graycolor);
        display: flex;
        flex-direction: column;
        align-items: left;
        width: auto;
        transform: translateX(calc(-100% - 1.2rem));
        transition: transform 0.5s ease-in-out;
        overflow: hidden;
        z-index: 90;
        justify-content: space-around;
        text-decoration: none;
        padding-left: 2rem;
        padding-right: 2rem;
        padding-bottom: 1rem;
        padding-top: 1rem;
        gap: 0px;
        box-shadow: 1px 1px 5px black;
        border-radius: 13px;
    }

    .burger {
        /* display: none;  */
        background-color: var(--graycolor);
        width: 40px;
        /* margin: 10px; */
        padding: 3px 40px 3px 5px;
        position: absolute;
        border-radius: 4px;
        margin-top: 1rem;
        margin-left: 1rem;
        z-index: 100;
        box-shadow: 1px 1px 5px black;
        z-index: 9999999999;
    }

    .burger div {
        width: 27px;
        height: 4px;
        background-color: var(--darkbrown);
        margin: 4px;
        border-radius: 3px;
        transition: all 0.3s ease;
        z-index: 99999;
    }

    .nav-links li {
        opacity: 0;
    }

    .burger {
        display: block;
        cursor: pointer;
    }

    .hideme {
        display: none
    }

    .showme {
        display: block;
    }

    .nav-links li {
        list-style: none;
        padding: 5px 0 1rem;
    }

}

/*end media query*/


body#Home a#Home {
    color: #eeeeee;
}


/* Footer */
#site-footer {
    display: flex;
    flex-direction: column;
    background-color: var(--verydarkcolor);
}

#footer-row {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    flex-wrap: wrap;
    width: 100%;
    max-width: 1200px;

}

#footer-row>div {
    flex: 1 1 300px;
    /* Grow: 1, Shrink: 1, Basis: 300px */
    min-width: 0;
    /* Prevents overflow from breaking the layout */
}

.footer-left-side,
.footer-right-side {
    text-align: center;
    background-color: var(--darkcolor);
    border-radius: 1rem;
    padding: 1rem;
    padding-top: 2rem;
}

#site-footer p {
    color: seashell;
    margin: 0;
}

#site-footer h3 {
    color: #d7d7d7;
    margin-bottom: 1rem;
    font-size: 1.4rem;
    font-weight: 300;
}

#site-footer h4 {
    color: var(--graycolor);
    margin: 1rem 0 .6rem 0;
    font-size: 1.2rem;
}

#site-footer a {
    font-family: var(--font-family);
    margin-top: 1rem;
    color: var(--hover);
    transition: color 0.3s ease;
    /* Makes the color change smooth */
}

#site-footer a:hover {
    color: var(--background-color);
}

#site-footer .fa-compass,
#site-footer .fa-phone,
#site-footer .fa-envelope,
#site-footer .fa-cloc,
#site-footer .fa-file-lines {
    margin-right: 1rem;
    color: #ccc;
}

.footer-left-side .bi-facebook {
    fill: var(--graycolor);
    /* Your variable color */
    transition: fill 0.3s ease;
    /* Makes the color change smooth */
}

/* Hover state */
.footer-left-side .bi-facebook:hover {
    fill: white !important;
}



.footer-byline {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    width: 100%;
    padding-top: 1.5rem;
    margin-top: auto;
    /* Pushes to absolute bottom */
}

.byline-container {
    max-width:1200px;
    display:flex;
    flex-direction: row;
    align-items: center;
}

.footer-byline>div {
    flex: 1 1 300px;
    display: flex; 
    justify-content: center;
    /* Centers text horizontally */
    align-items: center;
    /* Centers text vertically */
    color: #999;
    font-size: .9rem;
    /* text-align: center; */
    padding: 0;
    margin: 0;
    width: auto;
    margin-left: auto;
    margin-right: auto;
    gap:1rem;
}
.skyrocket,
.copyright {
    text-align: center;
    width:100%;
}

/* 3. Ensure images inside byline don't break the flex */
.footer-byline img {
    margin: 0 5px;
}


/* End Footer*/


#hero {
    max-height: 100vh;
    height: 100vh;
    background-image: url('../images/main-hero-small.jpg');
    margin: 0;
    padding: 0;
    background-size: cover;
    background-position: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
}

#about-hero {
    background-image: url('../images/thin-hero.jpg');
    margin: 0;
    padding: 0;
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
}
#saved-hero {
    background-image: url('../images/thin-hero.jpg');
    margin: 0;
    padding: 0;
    height: 300px;
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 1.5rem;
}
#saved-hero h1 {
        color: #eeeeee;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        4px 4px 6px #000;
    letter-spacing: 2px;
    font-family: 'Lato-thin', sans-serif;
}

.eg-hero {
    background-color: #223;
    width:100%;
    height: 300px;
    display:flex;
    position:relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* background-image: url('../images/eg.jpg');
    background-position: center;
    background-size: cover; */
    margin: 0;
    padding: 0;
}
.eg-hero-container {
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin:0;
    margin-left:auto;
    margin-right: auto;
}
.eg-hero h1 {
    font-family: "Mea Culpa", cursive;
    font-variant: normal;
    color:var(--accent-color);
}
.eg-hero h2
.eg-hero h3 {
    color:white;
    text-align: center;
    font-size: 3rem;
    padding:0;
    margin:0;
}
.eg-hero h1 {font-size: clamp(1.125rem, 0.6rem + 4.875vw, 5.75rem);font-weight: 400;}
.eg-hero h2 {font-size: clamp(1rem, 0.575rem + 2.125vw, 3.125rem);font-weight: 300;color:#ccc;}


#hero h1,
#about-hero h1 {
    color: #eeeeee;
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        4px 4px 6px #000;
    letter-spacing: 2px;
    font-family: 'Lato-thin', sans-serif;
    font-size: 1.3rem;
    margin: 0;
    margin-bottom: .7rem;
    padding: 0;
    font-size: 4rem !important;
}


#about-hero h1,
#saved-hero h1,
.eg-hero h1,
.eg-hero h2 {
    
    /* Apply the animation */
    animation-name: slide-down;
    animation-duration: 1.5s; /* How long the animation takes */
    animation-timing-function: ease-out; /* Smooths the end of the animation */
    animation-fill-mode: forwards; /* Ensures the text stays in its final position after the animation ends */
    opacity: 0; /* Start with opacity 0 for a fade-in effect */
}

#about-hero.eg h1 {font-size: 2.5rem !important;}

/* Define the animation sequence */
@keyframes slide-down {
    0% {
        transform: translateY(-500px); /* Start 100% of the viewport height above its final position */
        opacity: 0;
    }
    100% {
        transform: translateY(0); /* End at its natural position (no vertical translation) */
        opacity: 1;
    }
}



h2 {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
    font-size: 2rem;
    color: var(--primary-color);
    /* color: #01411C; */
    text-align: center;
    margin: 0;
    padding: 0 1rem 2rem 1rem;
}


#title {
    font-family: 'Lato-black', sans-serif;
    /* color: var(--primary-color); */
    margin: 0;
    padding: 0;
    font-size: 2.5rem;
    /* text-shadow:
    black 5px 5px 5px,
    black -5px -5px 5px,
    black -5px 5px 5px,
    black 5px -5px 5px; */
    text-shadow:
        -1px -1px 0 #000,
        1px -1px 0 #000,
        -1px 1px 0 #000,
        1px 1px 0 #000,
        4px 4px 6px #000;
    letter-spacing: 1px;
}


.salvation {
    text-align: center;
    /* background-color: var(--verydarkcolor); */
    padding: 2rem 0 2rem 0;
}

.salvation button {
    margin: 0;
}


.row-domed h2 {
    color: var(--graycolor);
    padding: 1rem;
    font-size: 1.8rem;
}


.bio-container {
    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    width: 100%;
    margin: 0;
    padding: 1rem;
    justify-content: space-between;
    align-items:stretch;
    box-sizing: border-box;
    margin: 0 auto;
    justify-content: center;
    max-width: 1200px;
}
.bio-container h2 {
    font-size:3rem; 
    margin-top: 3rem;
    font-weight: 300;
}
.flex {display: flex !important}
.bio-2 {
    flex: 1 1 0;
    display: flex !important;
    max-width: 550px;
    min-width: 300px;
    margin-top:0rem;
    margin-bottom: 3rem;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    align-items: center !important;  
}
.bio-2 img.left {
    width:100%;
    order: -1 !important;
    max-width:300px;
    border-left: 6px solid var(--accent-color);
    border-top: 6px solid var(--accent-color);
}
.bio-2 img.right {
    order: 1 !important;
    max-width:300px;
    border-right: 6px solid var(--accent-color);
    border-top: 6px solid var(--accent-color);
}
.bio-2 h3{
    font-size: 2rem;
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    order: 2 !important;
}
.bio-2 .title {
    font-size: 1.5rem;
    margin-top: 0 !important; 
    order: 3 !important;   

}
.bio-2 p {order: 4 !important;}
.bio-2 .indent,
.bio-2 .dropcap {margin-bottom: 0 !important;
    margin-top:1rem;order:4 !important;}
.bio-2.photo {order: 1;}
.bio-2.words {order:2;}

hr {
    background-color: var(--graycolor);
    width:80%;
    height: 2px;
}


div.deacon-container {
    display:flex;
    flex-direction: column;
    max-width: 800px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 2rem;
    gap:5rem;
    
    
}

div.deacon-child {
    flex:1;
    text-align: center;
    display:flex;
    flex-direction: column;
    gap:.3rem;
}



div.deacon-child img {
    max-width: 300px;
    height:auto;
    display: block;
    border: 6px solid var(--accent-color);
    /* border-top: 6px solid var(--accent-color); */
    margin-left: auto;
    margin-right: auto;
}

.deacon-child-name {
    font-size: 1.6rem;
    color:var(--accent-color);
    text-shadow: 1px 1px black;
    /* padding-top: .5rem !important; */
    font-weight: 400;
}

.deacon-child-title {
    font-size: 1.3rem;
    font-weight: 300;
}




.row-domed {
    /* 1. Make the box wider than the screen */
    width: 140%;
    /* 2. Pull it back to the left to center the "hump" */
    margin-left: -20%;

    background-color: var(--darkcolor);

    /* 3. The curve now spans the massive 140% width */
    border-top-left-radius: 50% 200px;
    border-top-right-radius: 50% 200px;

    padding-top: 50px;
    padding-bottom: 5rem;
    overflow: hidden;

}


.newspaper-article {
    margin-bottom: 2rem;
    column-width: 350px;
    column-gap: 2rem;
    column-rule: 1px solid var(--graycolor);
    background: #142940;
    background: linear-gradient(337deg,rgba(20, 41, 64, 1) 0%, rgba(5, 5, 84, 1) 51%, rgba(0, 0, 0, 1) 100%);
    max-width:1400px;
    margin-left:auto;
    margin-right:auto;

}

.accent {
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    font-size: 1rem;
}

#row {
    padding-top: 4rem;
}

.Jesus-words {color:red;}
.row-dark {
    /* background-color: var(--verydarkcolor); */
    padding: 4rem .5rem;
}

.row-dark a:link,
.row-dark a:visited {color:var(--graycolor); text-decoration: none;}
.row-dark a:hover {color:var(--accent-color);}
.row-dark a:active {color:var(--blue-color);}

.row-dark .text-box {
    /* background-color: var(--darkcolor); */
    border-radius: 17px;
    padding: 1rem .3rem;
}

.row-dark li { color:var(--accent-color);text-shadow: 1px 1px black;}
.row-dark h2 {
    color: var(--graycolor);
    column-span: all;
    /* Title will sit above all three columns */
}

.row-dark p {
    color: seashell;
    padding: 0;
    padding-bottom: .5rem;
}

.verse-box-container {
    display:grid;
    margin-bottom: 2rem;
    gap:1rem;
    /* grid-template-columns: 1fr 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    max-width:1400px;
margin-left:auto;
margin-right:auto;
    
}
.verse-box {
    background-color: seashell;
    padding:1rem 1rem 2rem;
    border:1px solid var(--verydarkcolor);
    border-radius: 17px;
    position:relative;
}
.verse-title {
    margin-bottom: 1rem;
    width: calc(100% - 2rem);
    text-align: center;
    color: var(--blue-color);
}
.verse-reference {
    position: absolute;
    bottom:.5rem;
    padding-top: 1rem;;
    width: calc(100% - 2rem);
    text-align: center;
    color: var(--accent-color);
    text-shadow: 1px 1px black;
}
.nav-active {
    transform: translateX(0%);
    visibility: visible;
}

.media-active {
    transform: translateX(0%);
}


@keyframes navLinkFade {

    from {
        opacity: 0;
        transform: translateX(-100%);
        display: hidden;
    }

    to {
        opacity: 1;
        transform: translateX(0px);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}


/* #region Modals */

/* If any element starting with 'modal' is active, lock the background */
html:has([id^="modal"]:target),
body:has([id^="modal"]:target) {
    overflow: hidden;
}

.modal-btn {
    transition: background 250ms;
    padding: 16px 24px;
    border-radius: 4px;
    background-color: var(--accent-color);
    color: var(--accent-color);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.1em;
    margin-top: 32px;
    display: inline-block;
    text-decoration: none;
}

.modal-btn:hover,
.modal-btn:focus {
    background-color: green;
}

.modal {
    position: fixed;
    min-height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    display: flex;
    z-index: 999999;
}

.modal:not(:target) {
    display: none;
}

.modal-overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    /* background-color: rgba(0, 0, 0, 0.7); */
    background-color: rgba(196, 196, 196, 0.7);
    left: 0;
}

.modal-content {
    transition: transform 1s;
    background-color: var(--darkcolor);
    width: 90%;
    position: relative;
    margin: auto;
    height: auto;
    padding: 0rem;
    padding-top: 1cap;
    border-radius: 19px;
    max-width: 1000px;
    box-shadow: 10px 10px 29px black;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    overflow-y: auto;
    max-height: 90vh;
}

.modal-content h2 {
    font-size: 1rem;
    color: var(--graycolor);
    padding: 7px 1rem;
    margin-top: 2px;
    border-radius: 50px;
    background-color: var(--verydarkcolor);
    width: fit-content;
    max-width: 400px;
    margin-left: 2rem;
    border: 1px solid white;
    border-color: darkgrey gray gray darkgray;
}


.modal-content p {
    padding: 1.2rem;
    margin: 1rem 1rem 1rem;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px,
        rgba(0, 0, 0, 0.12) 0px -12px 30px,
        rgba(0, 0, 0, 0.12) 0px 4px 6px,
        rgba(0, 0, 0, 0.17) 0px 12px 13px,
        rgba(0, 0, 0, 0.09) 0px -3px 5px;
    min-height: 2rem;
    background-color: seashell;
    border-radius: 17px;
    color: var(--text-color);
}

.underline {
    border-bottom: 2px solid var(--accent-color);
}

.number {color: var(--accent-color);font-size: .8rem;text-shadow: 1px 1px black;}
.modal-content p::first-letter,
.dropcap::first-letter,
.two-columns p.dropcap::first-letter,
.row-dark p.dropcap::first-letter  {
    color: var(--accent-color);
    text-shadow: 1px 1px black;
    /* Your accent color */
    float: left;
    /* Allows text to wrap around the letter */
    font-size: 3rem;
    /* Make it large */
    line-height: 1.3rem;
    /* Pull the letter up to align with the top of the text */
    font-weight: bold;
    margin-right: .5rem;
    /* Space between letter and following text */
    /* font-family: "Georgia", serif; /* Serif fonts usually look better for drop caps */
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
}

.modal-content p::first-letter {
    font-size: 2.6rem;
    line-height: 2rem;
    text-shadow: 1px 1px black;
}

.row-dark p.dropcap::first-letter  {
    line-height: 3rem;
    text-shadow: 1px 1px black;
}

h3.dropcap::first-letter {
    float: none;
    display: inline-block;
    text-shadow: 1px 1px black;

}

.mea-culpa-regular {
    font-family: "Mea Culpa", cursive;
    font-weight: 400;
    font-style: normal;
}

.modal-close {
    font-size: 36px;
    text-decoration: none;
    color: var(--accent-color);
    position: absolute;
    right: 24px;
    top: 10px;
}

.modal-close:hover {
    color: var(--brown);
    font-weight: bold;
}

/* #endregion */

/* #region lato fonts */
.lato-thin {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.lato-light {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.lato-black {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.lato-thin-italic {
    font-family: "Lato", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.lato-light-italic {
    font-family: "Lato", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.lato-regular-italic {
    font-family: "Lato", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.lato-bold-italic {
    font-family: "Lato", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.lato-black-italic {
    font-family: "Lato", sans-serif;
    font-weight: 900;
    font-style: italic;
}

/* #endregion */

@media screen and (min-width: 400px) {

    .row-dark {
        padding: 4rem .75rem;
    }

    .row-dark .text-box {
        padding: 1rem .6rem;
    }

    #hero h1,
    #about-hero h1 {
        letter-spacing: 1px;
        font-size: 1.6rem;
        margin-bottom: 0.5rem;
    }

    #title {
        font-size: 2rem;
        letter-spacing: 1px;
        margin-bottom: 3rem;
    }

    button {
        font-size: 1.5rem;
    }

    .modal-content h2 {
        font-size: 1.5rem;
        margin: auto;
        border: 1px solid white;
        border-color: #111 gray gray #333;
    }
}


@media screen and (min-width: 410px) {
    .supporter-child .church {
        font-size: 1.1rem;
    }

    .supporter-container .church::first-letter {
        font-size: 2rem;
        line-height: 1.3rem;
        font-weight: bold;
        margin-right: .2rem;
        font-family: "Mea Culpa", cursive;
        font-weight: 400;
        font-style: normal;
    }

}

@media screen and (min-width: 500px) {

    .supporter-child .church:nth-child(even) {align-self: flex-end;}    

    #about-hero.eg h1 {font-size: 3rem !important;}

    .row-dark {
        padding: 4rem 2rem;
    }

    #hero h1,
    #about-hero h1 {
        letter-spacing: .8px;
        font-size: 2.3rem;
        margin-bottom: 0.3rem;
    }

    #title {
        font-size: 2.5rem;
        letter-spacing: 1px;
        margin-bottom: 3rem;
    }

    button {
        /* padding: 10px 20px; */
        font-size: 1.5rem;
    }


    .modal-content h2 {
        color: var(--graycolor);
        padding: 7px 2rem;
        margin: top 2px;
        border-radius: 50px;
        background-color: var(--verydarkcolor);
        width: fit-content;
        max-width: 400px;
        margin: auto;
        border: 1px solid white;
        border-color: #222;
    }

    .panel-giant {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .panel-giant p {
        font-size: 30px;
    }

    .panel-giant cite {
        font-size: 24px;
    }

}

@media screen and (min-width: 600px) {

   .ethical-child-text {
        max-width: 80%;
    }

    main.article {
    width:90%;
    margin-left: 5%;
    margin-right: 5%;
    margin-top:3rem;
    padding: 2rem;
    }


    #about-hero.eg h1 {font-size: 3.5rem !important;}

    .row-dark {
        padding: 4rem 3rem;
    }

    .row-dark .text-box {
        padding: 1rem 1rem;
    }

    #hero h1,
    #about-hero h1 {
        letter-spacing: 2px;
        font-size: 2.3rem;
        margin-bottom: 0.3rem;
    }

    #title {
        font-size: 3.5rem;
        letter-spacing: 1px;
        margin-bottom: 3rem;
    }

    button {
        /* padding: 10px 20px; */
        font-size: 1.5rem;
    }

}

@media screen and (min-width: 700px) {

    .row-video {
        flex-direction: row;
        width:100%;
        margin-left:auto;
        margin-right: auto;
    }
    .wrapper-video {
        display:flex;
        flex-direction: row;
        gap:2rem;
    }
    .panel-video {width:50%; margin-right: auto;margin-left: auto;}
    .grid-youtube h3 {font-size: 2rem;}
    .grid-youtube h4 {font-size: 1.4rem;}

    .row-dark {
        padding: 4rem 4rem;
    }

    .panel-giant {
        padding: 1rem;
        padding-bottom: 2rem;
    }

    .panel-giant p {
        font-size: 35px;
    }

    .panel-giant cite {
        font-size: 28px;
    }
    .grid-youtube h3 {font-size: 2rem;}
    .grid-youtube h4 {font-size: 1.6rem;font-weight: 300;}
}

@media screen and (min-width: 750px) {
    .col{
    width: auto;
    }
    .contact-columns {justify-content: center;}
}

@media screen and (min-width: 760px) {
    nav {
        position: fixed;
        top:0px;
        z-index: 9999999;
        width:100%;
    }
    .plan-container {
    gap:1rem;
    flex-direction: row;
}
    .plan-row-dark {
    border-radius: 17px;
    width: calc(100% - 2rem);
    /* margin-left:1rem;
    margin-right:1rem; */
    }
    .plan-child-verse {
    width:90%;
    }
     .lesson-container {
    flex-direction: row;
    gap:2rem;
    }

}

@media screen and (min-width: 800px) {

    div.deacon-container {
        flex-direction: row;
        gap:2rem;
    }

    .supporter-container {max-width: 800px;}
    .supporter-child .church:nth-child(even) {align-self: flex-end;}
    .supporter-child .church {
        font-size: 1.8rem;
        line-height: 1.3rem;
        margin-top: 3rem;
    }
    .supporter-container .church::first-letter {
        font-size: 3rem;
        line-height: 1.3rem;
        margin-right: .5rem;
}
    .mobile-only {display:none;visibility: hidden;}
    .side-by-side-container {
    flex-direction: row;
}

    .side-by-side.child {flex:1;}

    .side-by-side.panel-giant img {
    overflow: hidden;
    max-width: 50%;
}

    .bio-container {
    /* display: flex; */
    flex-direction: row;
    /* flex-wrap: wrap; */
    gap: 2rem;
}
.bio-2 {

    font-size: 3rem;
    max-width: 550px;
    min-width: 300px;
    margin-top:4rem;
}
.bio-2 img.left {
    width:100%;
    max-width:300px;
    justify-content: right;
    display:block !important;
    object-fit: cover;
    float:right;
    clear:both;
    border-left: 6px solid var(--accent-color);
    border-top: 6px solid var(--accent-color);
}
.bio-2 img.right {
    width:100%;
    max-width:300px;
    justify-content: right;
    display:block !important;
    object-fit: cover;
    float:left;
    clear:both;
    border-right: 6px solid var(--accent-color);
    border-top: 6px solid var(--accent-color);
}
.bio-2 h3{
    font-size: 2rem;
    color: var(--accent-color);
    text-shadow: 1px 1px black;
}
.bio-2 .title {
    font-size: 1.5rem;
    margin-top: 0 !important;    

}
.bio-2 .indent {margin-bottom: 0 !important;
    margin-top:1rem;
}
.bio-2.photo {order: 2;}
.bio-2.words {order:1;}
}


@media screen and (min-width: 850px) {
.ethical-child-text {
    margin-left: 0;
    max-width: 100%;    
}
.ethical-container {
    flex-direction: row;
    max-width:100%;
}
.ethical-child-img img {max-height: 100%};

}

@media screen and (min-width: 900px) {

    .three-columns {
        flex-direction: row;
    }
    .side-by-side-child p {font-size: 1.4rem;}

         .text-links-container {
            max-width: 1200px;
            margin-left:auto;
            margin-right: auto;        
            grid-template-columns: repeat(2, 1fr);
            }

        main.article {
            width:70%;
            margin-left: auto;
            margin-right: auto;
            margin-top:3rem;
            padding: 2rem;
        }    
}

@media screen and (min-width: 1000px) {

    
    #hero h1,
    #about-hero {
        letter-spacing: 2px;
        font-size: 3rem;
        margin-bottom: 0.3rem;
    }

    #about-hero {
        margin-bottom: 0;
    }

    #title {
        font-size: 4.5rem;
        margin-bottom: 3rem;
    }

    button {
        font-size: 1.5rem;
    }

    .icon-chip img {
    width: 177px;
    height: 100px;
    }

    .two-columns {
        flex-direction: row;
        max-width: 1400px;
    }

    .image-box {
        order: 0;
        height: auto;
        flex-shrink: 0;
        padding-right: 2rem;
        align-items: flex-start;
    }

    .centered {
        max-width: 90%;
    }

    .image-left img {
        margin: 0;
        margin-left:1rem;
    }

    .image-right img {
        border-radius: 17px 0 0 17px;
        margin: 0;
    }

    .panel-giant {
        padding: 2rem;
        padding-bottom: 2rem;
    }

    .panel-giant p {
        font-size: 40px;
    }

    .panel-giant cite {
        font-size: 30px;
    }
    .lesson-container {
    gap:3rem;
    }
}

@media screen and (min-width: 1140px) {


}

@media screen and (min-width: 1200px) {
    .text-links-container {
    grid-template-columns: repeat(3, 1fr);
    }
}
/* Add this at the VERY END of your CSS file */
@media screen and (min-width: 760px) {

    /* We chain classes and use !important to kill the JS-applied styles */
    body .nav-links,
    body .nav-links.nav-active {
        display: flex !important;
        transform: none !important;
        position: relative !important;
        visibility: visible !important;
        opacity: 1 !important;
        transition: none !important;
    }

    /* This kills the "navLinkFade" animation that JS put directly on your links */
    body .nav-links li {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        visibility: visible !important;
    }

    .burger {
        display: none !important;
    }

    nav-links {
        position: relative !important;
        /* Establishes the coordinate system */
        transform: none !important;
        /* Removes the mobile offset */
    }

    .moving-underline {
        /* display: block !important; */
        /* opacity: 1 !important; */
        z-index: 10;
        bottom: -1;
        /* Adjust this to align with your links */
    }
}