@charset "UTF-8";
/* CSS Document */

/* Reset and base styles */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

		.gowun-dodum-regular {
  			font-family: "Gowun Dodum", serif;
  			font-weight: 400;
  			font-style: normal;
		}

		.inria-sans-light {
  			font-family: "Inria Sans", serif;
  			font-weight: 300;
  			font-style: normal;
		}

		.inria-sans-regular {
  			font-family: "Inria Sans", serif;
  			font-weight: 400;
  			font-style: normal;
		}

		.inria-sans-bold {
  			font-family: "Inria Sans", serif;
  			font-weight: 700;
  			font-style: normal;
		}

		.inria-sans-light-italic {
  			font-family: "Inria Sans", serif;
  			font-weight: 300;
  			font-style: italic;
		}

		.inria-sans-regular-italic {
  			font-family: "Inria Sans", serif;
  			font-weight: 400;
  			font-style: italic;
		}

		.inria-sans-bold-italic {
  			font-family: "Inria Sans", serif;
  			font-weight: 700;
  			font-style: italic;
		}

		Griffon Extra Light {
			font-family: "griffon", serif;
			font-weight: 100;
			font-style: normal;
		}

		Griffon Light {
			font-family: "griffon", serif;
			font-weight: 200;
			font-style: normal;
		}

		Griffon Regular {
			font-family: "griffon", serif;
			font-weight: 400;
			font-style: normal;
		}

		Griffon Semibold {
			font-family: "griffon", serif;
			font-weight: 600;
			font-style: normal;
		}

		Griffon Bold {
			font-family: "griffon", serif;
			font-weight: 700;
			font-style: normal;
		}



        body {
            font-family: "Inria Sans", serif;
  			font-weight: 300;
  			font-style: normal;
            line-height: 1.6;
            color: #70767C;
			background-color: #70767C;
			width:100%;
			margin: auto;
        }

		img {
			display: block;
			max-width: 100%;
			height: auto;
		}

		p {
			font-family: "Inria Sans", serif;
  			font-weight: 300;
  			font-style: normal;
		}

		a {
            color: white;
            transition: color 0.3s;
        }

		a:hover {
            color: #fbb03a;
        }

		#mainWrap {
			background-color: #fff;
			max-width: 834px;
			margin: auto;
}

        /* Container */
        .container {
            max-width: 834px;
            margin: 0px auto;
            padding: 2%;
        }

        /* Header */
        header {
            background-color: #010d3f;
            padding: 1rem 0;
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .logo {
            margin: auto;
        }

		.justified {
			text-align: justify;
  			text-justify: inter-word;
			justify-content: center;
			text-align-last: center;
		}

		/* Contact Form */
		.successMessage {
    		background-color: #d4edda;
   			color: #155724;
    		padding: 1.5%;
    		border-radius: 1%;
   			margin-bottom: 2%;
    		text-align: center;
		}

		form {
			margin: 2rem 0 1rem 0;
			padding: 0 0 1rem 0;
		}
		
		.error-message {
    		background-color: #f8d7da;
    		color: #721c24;
    		padding: 1.5%;
    		border-radius: 1%;
   			margin-bottom: 2%;
    		text-align: center;
		}
		.form-group {
            margin-bottom: 1.5rem;
			text-align: left;
        }

		label {
   			display: block;
    		margin-bottom: 0.5rem;
    		font-weight: normal;
			text-align: left;
		}

		input, textarea {
    		width: 100%;
    		padding: 1rem;
    		border: 1px solid #ddd;
    		border-radius: 1%;
    		font-size: .8em;
			resize: vertical;
		}

		input:focus, textarea:focus {
    		outline: none;
    		border-color: #3498db;
    		box-shadow: 0 0 5px rgba(52, 152, 219, 0.5);
		}

		.contact {
			margin: 0% 5%;
		}

		.contact h2 {
			margin: 2% 0% 0% 0%;
			padding: 0;
		}

		.contact p {
			margin: 2% auto;
			padding: 1%;
		}

		.contact-form {
            max-width: 600px;
            margin: 0 auto;
        }

        button {
            background-color: #F9B03C;
            color: white;
			margin: 0%;
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:a {
            text-decoration: none;
			color: #fff;
        }

        .buttonLink a {
            text-decoration: none;
			color: #fff;
        }


        button:hover {
            background-color: #010d3f;
        }


        /* Navigation */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

		.nav-links {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background-color: #010d3f;
            padding: 1rem;
            gap: 1rem;
            list-style: none;
			font-weight: lighter;
        }

        .nav-links.active {
            display: flex;
        }

        .nav-links a {
            color: white;
            text-decoration: none;
            transition: color 0.3s;
        }

        .nav-links a:hover {
            color: #fbb03a;
        }

		.active {
			font-weight: 900;
			font-size: 1rem;
		}

		.normal {
			font-weight: 300;
			font-size: 0.8rem;
		}

        /* Mobile menu */
        .menu-toggle {
            color: white;
            font-size: 1.5rem;
            background: none;
            border: none;
            display: inline-block;
        }

        /* Hero section */
        .hero {
            background-color: #9badbe;
            color: white;
            padding: 0px;
            text-align: center;
        }

        .hero h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

		.whatWeDo {
			margin: 1.5rem 0;
			padding: 5% 3% 0% 3%;
			clear: both;
		}

		.perpetualTop {
			margin: 0%;
			padding: 0% 3% 2% 0%;
		}

		.perpetualTop p {
			margin: 0 0 2% 0;
		}

		.perpetualText {
			margin: 2% 0% 0% 0%;
			padding: 3%;
			background-color: #55616d;
		}

		.perpetualText p {
			margin: 0 0 2% 0;
		}

		#spanish {
			margin-top: 1.5rem;
		}

		.scriptures {
			margin: 0% 5%;
		}

		.scriptures h2 {
			margin: 2% 0% 0% 0%;
			padding: 0;
		}

		.scriptures h3 {
			margin: 0;
			padding: 0;
			font-style: italic;
		}

		.scriptures p {
			text-align: left;
			margin: 2% auto;
			padding: 1%;
		}

		.resources {
			margin: 0% 5%;
		}

		.resources h2 {
			margin: 2% 0% 0% 0%;
			padding: 0;
		}

		.resources h3 {
			margin: 0;
			padding: 0% 0% 2% 0%;
			font-style: italic;
		}

		.resources p {
			text-align: left;
			margin: 2% auto;
			padding: 1%;
		}

		.footnotes {
			text-align: left;
			margin: 0% 5%;
		}

		.footnotes p {
			margin: 0 auto;
			padding: 1% 1% 0% 1%;
			font-size: 0.8rem;
		}

		.largeHeading {
			font-size: 1.2rem;
			font-weight: 600;
			margin: 1% 0% 0% 0%;
			padding: 0%;
			color: #F8EF24;
		}

		.smallHeading {
			font-size: 1.1rem;
			margin: 0;
			padding: 0;
		}

		.link {
			font-size: 1rem;
			margin: 0% 0% 1% 0%;
			padding: 0%;
		}

		.homeheader {
			margin: auto;
			max-width: 200px;
			align-content: center;
			vertical-align: bottom;
			display: inline;
		}

		.homePageHeading {
			width: 50%;
			display: inline-block;
		}

		.haaderIMG {
			position: sticky;
		}

		.buttonContainer {
			position: absolute;
			top: 10%;
			margin: auto;
		}

		.englishButton {
			float: left;
			margin-left: 30%;
		}

		.spanishButton {
			float: right;
			margin-right: 30%;
		}

		.container {
			clear: both;
		}

		.min_max {
			display: inline-block;
			max-width: 30px;
		}

		.min_max img {
			max-width: 30px;
			display: inline;
		}

		.min_max_minimize {
			display: none;
			max-width: 30px;
			min-width: 15px;
		}

		.min_max_minimize img {
			max-width: 30px;
			min-width: 15px;
			display: none;
		}

		.hidden english {
			float: clear;
			clear: both;
			display: inline-block;
		}

		.hidden english p {
			margin: 0 auto 2% auto;
			padding: 1%;
			font-size: 1.2rem;
		}

		.hidden spanish {
			float: clear;
			clear: both;
			display: none;
		}

		.hidden spanish p {
			margin: 0 auto 2% auto;
			padding: 1%;
			font-size: 1.2rem;
		}

		.italics {
			margin: 0 auto 2% auto;
			padding: 1%;
  			font-family: "Inria Sans", serif;
  			font-weight: 300;
			font-style: italic;
		}

		.bold {
			font-family: "Inria Sans", serif;
  			font-weight: 700;
  			font-style: normal;
		}

		.underline {
			text-decoration: underline;
		}

		.hidden a {
			color: #fff;
		}

		.hidden a:hover {
			color: #fbb03a;
		}

		.hidden hr {
			border-color: #fff;
}

        /* Content sections */
        .section {
            margin: 0%;
			padding: 0%;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }

        .card {
            background: white;
            padding: 1.5rem;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        /* Footer */
        footer {
            background-color: #010d3f;
            color: white;
            padding: 1rem 0;
            margin: 0;
        }
	
		
        .menu-toggle {
            display: hide;
            cursor: pointer;
        }



        /* Responsive design */
        @media (max-width: 768px) {
            .menu-toggle {
                display: block;
            }

            .menu-toggle.active + .nav-links {
                display: flex;
                flex-direction: column;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background: white;
                padding: 1rem;
                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
			
			.nav-links {
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                background-color: #010d3f;
                flex-direction: column;
                padding: 1rem;
                gap: 1rem;
            }

            .hero h1 {
                font-size: 2rem;
            }
        }

		 @media (max-width: 600px) {
            .hero h1 {
            	font-size: 1.5rem;
            	margin-bottom: 1rem;
            }

			.englishButton {
				margin-left: 20%;
			}

			.spanishButton {
				margin-right: 20%;
			}
        }

		 @media (max-width: 480px) {
            .hero h1 {
            	font-size: 1rem;
            	margin-bottom: 1rem;
            }

			.englishButton {
				margin-left: 10%;
			}

			.spanishButton {
				margin-right: 10%;
			}
        }