:root{
    --nav-color: black;
    --nav-color2: rgb(223,213,213);
    --burgundy: rgb(122,59,59);     /*(86,0,34)*/
    --grey: rgb(230, 223, 223);
    --grey1: rgb(174, 158,158);
    --grey2: rgb(237,237,237);
    --burgundy-overlay: rgba(122,59,59,0.5);

}

body{
    margin: 0;
    font-family: 'Roboto', sans-serif;
	font-weight: 400;

}

header{
    background: var(--nav-color);
    position: fixed;
    width: 100%;
    text-align: center;
    z-index: 99;
    height: 80px;

}






.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after{
    display: block;
    background: white;
    height: 2px;
    width: 2em;
    border-radius: 2px;
    position: relative;
}

.nav-toggle-label span::before,
.nav-toggle-label span::after{
    content: '';
    position: absolute;
}

.nav-toggle-label span::before{
    bottom: 7px;
}

.nav-toggle-label span::after{
    top: 7px;
}
.nav-logo-container{
    display: none;
}


.mobile-nav-logo-container{
    width: 100%;
}

.mobile-nav-logo{
    width: auto;
    height: 60px;
    position: relative;
    top: 10px;

}

.nav-logo{
    display: none;

}


nav{
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    background: var(--nav-color);
    width: 100%;
    transform: scale(1,0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
}

nav ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

nav li{
    margin-bottom: 1em;
    margin-left: 1em;
}

nav a{
    color: white;
    text-decoration: none;
    font-size: 14px;
    font-weight: 100;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 150ms ease-in-out;
}

nav a:hover{
    color: var(--burgundy);
}

.nav-toggle{
    display: none;
}

.nav-toggle-label{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 100%;
    display: flex;
    align-items: center;
}

.nav-toggle:checked ~ nav{
    transform: scale(1,1);

}

.nav-toggle:checked ~ nav a{
    opacity: 1;
    transition: opacity 250ms ease-in-out 250ms;

}

.banner {
  display: none;
}

.mobile-banner{
    position: relative;
    top: 80px;
    width: 100%;
    height: 150px;
    background: rgba(122,59,59,0.5);
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.spacer{
    height: 100px;
    background: var(--burgundy);
    position: relative;
    z-index: -5;
}

.mobile-banner-h-container{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%
}
.mobile-banner-h-container h2{
    color: white;
    font-size: 45px;
    font-weight: 300;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.mobile-offering-img{
    position: relative;
    z-index: -1;
}

.mobile-banner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.banner-h-container{
    position: relative;
    display: flex;
    width: 90%;
    margin: 0;
    text-align: center;
    justify-content: center;
    align-items: center;

}


.banner-h-container h2{
    color: white;
    font-weight: 400;
    font-size: 22px;

}

.banner-msg{
    position: relative;
    top: 150px;
    display: flex;
    width: 100%;
    margin: 0;
    text-align: center;
    justify-content: center;
    align-items: center;
    display: none;

}

.banner-msg p{
    color: white;
    font-weight: 200;
    margin: 5px;
    margin-top: 10px;
    font-size: 16px;
}

h5{
   color: black;
   font-size: 24px;
   font-weight: 400;
   text-align: center;
   margin: 0px;
   margin-bottom: 10px;
   margin-top: 25px;
   padding: 0px;
}

.offering-container{
    display: none;
}

.ministries-h2 h2{
            color: black;
            font-size: 32px;
            font-weight: 400;
            text-align: center;
            padding-left: 38px;
            padding-right: 38px;
}

.ministries-divider {
                width: 115px;
                position: relative;
                top: -20px;
                padding: 0px;
                margin-top: 0px;
                margin-bottom: 0px;
                border-top: 4px solid var(--burgundy);
                border-radius: 5px;
}




.our-impact{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .impact-content{
            width: 100%;
            background: var(--burgundy);

        }
        .impact-img{
            width: 80%;

        }

        .impact-img img{
            width: 100%;
            height: 400px;
            object-fit: cover;
            background: linear-gradient(#e66465, #9198e5);
        }
        .our-impact h3{
            text-align: left;
            font-size: 32px;
            color: white;
            padding: 0px;
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 10px;
            padding-top: 10px;
            margin-bottom:10px;

        }
        .our-impact p{
            text-align: left;
            color: white;
            padding: 0px;
            margin-left: 40px;
            margin-right: 40px;
            margin-top:10px;
            padding-bottom: 20px;
            font-weight: 300;
            font-size: 20px;
        }


        /*.heading-divider {
                width: 90%;

                padding: 0px;
                margin-top: 0px;
                margin-bottom: 0px;
                border-top: 4px solid var(--burgundy);
                border-radius: 5px;
        }*/

        .connect{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 100px;

        }
        .connect-back{
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--grey2);
            display: flex;
            flex-direction: column-reverse;


        }
        .connect-content{
            width: 100%;
        }
        .connect h3{
            width: 100%;
            text-align: center;
            font-size: 32px;
            color: black;
            padding: 0px;
            margin-top: 10px;
            margin-bottom:10px;
        }
        .connect p{
            text-align: center;
            color: black;
            padding: 0px;
            margin-top:10px;
            padding-bottom: 20px;
            margin-left: 40px;
            margin-right: 40px;
            font-weight: 300;
            font-size: 20px;
        }

        .highlights-container{
            display: none;
        }







.banner-buffer{
            width: 100%;
            height: 25px;
            background: var(--burgundy);
            position: relative;
            top: -5px;
        }


h4{
    position: relative;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
}

.footer-links{
    display: none;
}
.footer-links-mobile{
    display: block;
    margin-top: 30px;
}



.footer-logo-container{
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-logo{
    width: 20%;

}
h4{
   color: black;
   font-size: 24px;
   font-weight: 400;
   text-align: center;
   margin: 0px;
   margin-top: 50px;
   padding: 0px;
   }

.column p{
    color: black;
    font-size: 14px;
    font-weight: 100;
    text-align: center;
    margin: 0px;
    margin-top: 0px;
    padding: 0px;
}

.socials{
            display: flex;
            width: 100%;
            position: relative;
            justify-content: center;
            align-items: center;
        }

.footer-links-mobile{
        color: black;
        font-weight: 300;
        text-align: center;
}



.grid-backdrop{
    background: var(--burgundy);
    display: grid;
    place-items: center;

}
.more-grid-backdrop{
    background: var(--burgundy);
    height: 80px;
}
.grid{
    display: grid;
    grid-template-columns: 319px;
    grid-template-rows: 311px;
    grid-row-gap: 50px;
    grid-column-gap: 25px;
    margin-left: 40px;
    }


.grid > div{
     box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, .2);
     padding: 10px;
     background: white;
     height: 391px;
     }




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


        header{
            position: static;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 120px;
        }

        .menu{
            display: flex;
            justify-content: center;

        }

        .nav-toggle-label{
            display: none;
        }

        .mobile-nav-logo-container{
            display: none;
        }

        .mobile-nav-logo{
            display: none;

        }

        .nav-logo-container{
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .nav-logo {
            all: unset;
            width: auto;
            height: 100px;
            margin-right: 20px;
            margin-left: 0px;
            margin-top: 12px;

        }

        nav {
            all: unset;
            display: flex;
            align-items: center;

        }

        nav ul{
            display: flex;
            justify-content: center;
        }

        nav li{
            all: unset;
            margin-left: 2em;
            margin-right: 2em;

        }

        nav a{
            opacity: 1;
            position: relative;
            font-size: 16px;

        }

        nav a::before{
            content: '';
            display: block;
            height: 1px;
            background: white;
            position: absolute;
            top: 1.75em;
            left: 0;
            right: 0;
            transform: scale(0,1);
            transition: transform ease-in-out 250ms;
        }

        nav a:hover::before{
            transform: scale(1,1);
        }



        h3{
            color: black;
            font-size: 48px;
            font-weight: 300;
            text-align: center;
            padding-left: 38px;
            padding-right: 38px;
            padding-top: 10px;

        }

        .buffer{
            width: 100%;
            height: 25px;
            background: var(--burgundy);

        }
        .buffer2{
            width: 100%;
            height: 40px;
            background: white;

        }

        .banner {
          all: unset;
          background: rgba(122,59,59,0.5);
          width: 100%;
          height: 400px;
          overflow: hidden;
          position: relative;
          display: flex;
          flex-direction: column;
          text-align: center;
          justify-content: center;
          align-items: center;
        }

        .event-img{
          all: unset;
          position: absolute;
          width: 100%;
          height: 100%;
          object-fit: cover;
          z-index: -2;

        }

        .banner-h-container{
            all: unset;
            position: relative;
            top: -15px;
            display: flex;
            width: 100%;
            margin: 0;
            text-align: center;
            justify-content: center;
            align-items: center;

        }


        .banner-h-container h2{
            all: unset;
            color: white;
            font-weight: 400;
            font-size: 40px;
            width: 50%;

        }

        .banner-msg{
            all: unset;
            display: flex;
            width: 100%;
            margin: 0;
            text-align: center;
            justify-content: center;
            align-items: center;

        }

        .banner-msg p{
            all: unset;
            color: white;
            font-weight: 300;
            margin: 5px;
            margin-top: 10px;
            font-size: 24px;
            width: 75%;
        }



        .mobile-banner{
            display: none;
        }

        .footer-container {
              all: unset;
              display: flex;
              justify-content: center;
              align-items: flex-start;
              background: rgb(47,46,46);
              overflow: hidden; /* Enable vertical scrolling if the content overflows */

            }
        .footer-logo-container{
            all: unset;
            padding: 0px;
            margin: 0px;
            display: flex;
            justify-content: center;
            align-items: center;
            width: auto;
            height: auto;
        }
        .footer-logo{
            all: unset;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 0px;
            width: auto;
            height: 110px;
            margin: 25px;
        }

        .column {
              all: unset;
              padding: 20px;
              text-align: center;
              color: white;
              margin-bottom: 75px;
              width: 100%;
            }

        .column p{
            position: relative;
            top: 10px;
            color: white;
            text-align: center;
            margin: 0px;
            padding: 0px;
            font-weight: 100;
        }

        @media screen and (max-width: 1150px){
            .column {
              display: none;

            }
            .footer-divider{
                display: none;
            }

        }
        .footer-divider {
              position: relative;
              top: 25px;
              width: 0px;
              height: 175px;
              background-color: black;
              border: 1px dotted white;

            }

        .socials{
            all: unset;
            display: flex;
            width: 200px;
            position: relative;
            justify-content: center;
            align-items: center;
        }

        .social-logo{
            all: unset;
            display: flex;
            width: 100%;
        }

        .footer-links{
            all: unset;
            margin-left: 100px;
            margin-right: 100px;

        }
        .footer-links p{
            color: white;
            font-size: 12px;
        }

        h4{
            color: white;
            font-size: 24px;
            font-weight: 400;
            text-align: center;
            margin: 0px;
            margin-top: 20px;
            padding: 0px;
        }
        .footer-links-mobile{
            display: none;
        }

        .ministries-divider {
                width: 200px;
                position: relative;
                top: -20px;
                padding: 0px;
                margin-top: 0px;
                margin-bottom: 30px;
                border-top: 4px solid var(--burgundy);
                border-radius: 5px;
            }
        .ministries-h2 h2{
            font-size: 48px;
}
            .spacer{
                display: none;
            }

        .our-impact{
            display: flex;
            justify-content: center;
            flex-direction: column;
            align-items: center;
            position: relative;
        }
        .impact-content{
            width: 80%;
            position: absolute;
            z-index: 2;
            bottom: 0;
            background: rgba(0,0,0,.5);
            background: rgba(122,59,59,0.75);

        }
        .impact-img{
            height: 800px;
            width: 80%;

        }
        .impact-img img{
            width: 100%;
            height: 800px;
            object-fit: cover;
        }
        .our-impact h3{
            text-align: left;
            font-size: 36px;
            color: white;
            padding: 0px;
            margin-left: 40px;
            margin-right: 40px;
            margin-top: 10px;
            margin-bottom:10px;

        }
        .our-impact p{
            text-align: left;
            color: white;
            padding: 0px;
            margin-left: 40px;
            margin-right: 40px;
            margin-top:10px;
            padding-bottom: 20px;
            font-weight: 300;
            font-size: 20px;
        }


        /*.heading-divider {
                width: 90%;

                padding: 0px;
                margin-top: 0px;
                margin-bottom: 0px;
                border-top: 4px solid var(--burgundy);
                border-radius: 5px;
        }*/

        .connect{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 100px;

        }
        .connect-back{
            width: 80%;
            display: flex;
            justify-content: center;
            align-items: center;
            background: var(--grey2);
            display: flex;
            flex-direction: row-reverse;


        }
        .connect-content{
            width: 80%;
        }
        .connect h3{
            width: 100%;
            text-align: left;
            font-size: 36px;
            color: black;
            padding: 0px;
            margin-top: 10px;
            margin-bottom:10px;
            margin-left: 40px;
            margin-right: 40px;
        }
        .connect p{
            text-align: left;
            color: black;
            padding: 0px;
            margin-top:10px;
            padding-bottom: 20px;
            margin-left: 40px;
            margin-right: 40px;
            font-weight: 300;
            font-size: 20px;
        }

        .highlights-container{
            all: unset;
        }

        .highlights-container h2{
            color: black;
            font-size: 48px;
            font-weight: 400;
            text-align: center;
            padding-left: 38px;
            padding-right: 38px;
        }
        .grid-backdrop{
            background: white;
            display: grid;
            place-items: center;

        }

        .grid{
            display: grid;
            margin-top: 0px;
            grid-row-gap: 50px;
            grid-column-gap: 25px;
            grid-template-columns: repeat(1, 319px);
        }

        .image {
	position: relative;
	width: 319px;
	height: 391px;
}

.image__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.6);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.25s;

}

.image__overlay--blur {
	backdrop-filter: blur(5px);
}

.image__overlay--primary {
	background: var(--burgundy);


}

.image__overlay>* {
	transform: translateY(20px);
	transition: transform 0.25s;
}

.image__overlay:hover {
	opacity: 1;
}

.image__overlay:hover>* {
	transform: translateY(0);
}

.image__title {
	font-size: 2em;
	font-weight: bold;
}

.image__description {
	font-size: 1.25em;
	margin-top: 0.25em;
	display: flex;
	text-align: center;
}

        .grid > div{
            padding: 0px;
            background: white;

        }
        @media screen and (min-width: 1350px){
            .grid{
                display: grid;
                grid-template-columns: repeat(1, 319px);
                }




        }
        @media screen and (max-width: 1000px){
            .connect-back{
                background: unset;
            }
            .connect-content{
                background: var(--grey2);
            }
        }


}

.mobile header{
    height: 110px;
    position: relative;

}

.mobile .mobile-nav-logo{
    width: auto;
    height: 75px;
    position: relative;
    top: 20px;
}

.mobile .nav-toggle-label span,
.mobile .nav-toggle-label span::before,
.mobile .nav-toggle-label span::after{

    height: 4px;
    width: 40px;
    border-radius: 2px;

}

.mobile .nav-toggle-label span::before{
    bottom: 10px;
}

.mobile .nav-toggle-label span::after{
    top: 10px;
}
.mobile .nav-toggle-label{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 1em;
    height: 110%;
    display: flex;
    align-items: center;
}

.mobile .nav-toggle:checked ~ nav{
    height: 260px;

}
.mobile nav{
    top: 99%;
}
.mobile nav a{
    font-size: 30px;
}





.mobile .mobile-banner{
    top: unset;
    height: 200px;
}

.mobile .spacer{
    height: 25px;
}