/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

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

body {
    background-color: #000;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
}

.header {
    display: flex; /* Ensures the logo and hamburger icon are aligned horizontally */
    align-items: center;
    position: absolute;
    top: 10px; /* Adjusts the top position */
    left: 10px; /* Keeps the hamburger in the top-left corner */
    z-index: 1001;
}

.logo {
    position: fixed;
    top: 3px;
    left: 70px; /* Adds distance between the hamburger icon and the logo */
    height: 60px !important; /* Set height */
    width: auto; /* Ensure the width adjusts automatically */
    object-fit: contain;
}



/* Navigation Bar - orange bar on top but also affects images below it */
.navbar {
    background-color: rgba(255, 99, 71, 0.9);
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
	
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 50px; /* 30px adjusts the height of orange menu navbar.  */
    max-width: 1250px;
	
}


/* hamburger icon */
.navbar-logo img {
    height: 60px; /* Adjust the height as needed */
    width: auto;
    vertical-align: middle;
}

.navbar-logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

.navbar-menu {
    list-style: none;
    display: flex;
}

.navbar-menu li {
    margin-left: 20px;
}

.navbar-menu a {
    color: #fff;
    text-decoration: none;
    font-size: 1em;
    transition: color 0.3s ease;
}

.navbar-menu a:hover,
.navbar-menu a.active {
    color: #ffeb3b;
}

.navbar-toggle >i{
    display: none;
}

button.upload-btn {
    background: transparent;
    border: navajowhite;
    color: #fff;
    font-size: 19px;
    cursor: pointer;
}

/* Apply padding to non-homepages to prevent content overlap with navbar */
.non-homepage {
    padding-top: 100px; /* Adjust based on navbar height */
}

.contactpage
{
    padding-top: 90px; /* Adjust based on navbar height */
}

/* Hero Section */
.hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 75px 50px 50px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/main.jpg') no-repeat center center/cover;
    min-height: 80vh; 	/* adjust to fit or reduce main image on screen to eliminate scrollbars.  */
	
}

/* Share page & About page */
.hero2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 50px 30px;  /* Remove top padding 1st 0 */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/about3.webp') no-repeat center center/cover;
    min-height: 95vh;
    margin-top: 0; /* Ensure no margin above */
	
}


.hero3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 100px 30px 50px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/main3.webp') no-repeat center center/cover;
    min-height: 95vh;
}

.hero4 {
    /* display: flex; */
    margin-top: 20px;
	align-items: center;
    justify-content: space-between;
    padding: 75px 30px 0px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/reclaim.webp') no-repeat center center/cover;
    min-height: 93vh;
}

.hero5 {
    /* display: flex; */
    margin-top: -15px;
	align-items: center;
    justify-content: space-between;
    /* padding: 0px 0px 0px 0px;  */ 	/* adjusts directions of the hero and content */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/sign.webp') no-repeat center center/cover;
    min-height: 80vh; 	/* adjusts the hero background image size */
	/* padding-top: 0px;  Good-this adds the spacing from Navbar to heading <H1>, <H2>, etc.  */
}


.hero6 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* padding: 75px 50px 50px 30px; */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/oath.webp') no-repeat center center/cover;
    min-height: 100vh; 	/* adjust to fit or reduce main image on screen to eliminate scrollbars.  */
	
	}

.hero7 {
    /* display: flex; */
    margin-top: 0px; /* adjust distance from navbar - This effects hamburger-menu */
	padding-top: 75px; /* Good-this adds the spacing from Navbar to heading <H1>, <H2>, etc.  */
	align-items: center;
    justify-content: space-between;
    /* padding: 75px 30px 0px 30px; */
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/verse.webp') no-repeat center center/cover;
    min-height: 100vh;
	  z-index: 0; /* Ensures it's behind the navbar and hamburger menu */
	}

.hero7 h1 {
    margin-top: 80px; 
	font-size: 3em;
    margin-bottom: 10px;
    color: #ffeb3b;
}


.hero8 {
    /* display: flex; */
    margin-top: 20px;
	align-items: center;
    justify-content: space-between;
    padding: 75px 30px 0px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/contribute.webp') no-repeat center center/cover;
    min-height: 93vh;
}

.hero8 img {
    width: 100%;
    max-width: 150px;
    border-radius: 10px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.5); */
}

.hero9 {
    /* display: flex; */
    margin-top: 20px;
	align-items: center;
    justify-content: space-between;
    padding: 75px 30px 0px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/rainbow.webp') no-repeat center center/cover;
    min-height: 93vh;
}

.hero10 {
    /* display: flex; */
    margin-top: 5px;
	align-items: center;
    justify-content: space-between;
    padding: 75px 30px 0px 30px;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/merch.webp') no-repeat center center/cover;
    min-height: 93vh;
	
}

/* Q&A  */
.heroQA {
    margin-top: 0px; /* Distance from navbar */
    padding-top: 75px; /* Spacing from Navbar to heading */
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/QA.webp') no-repeat center center;
    background-size: cover; /* Ensures the image covers the area without stretching */
    background-attachment: fixed; /* Keeps the background in a fixed position for a parallax effect */
    min-height: 100vh;
    z-index: 0; /* Ensures it's behind the navbar and hamburger menu */
}

/* End of Q.A.html */

.hero-content {
    max-width: 50%;
}

.hero-content h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #ffeb3b;
}

.hero-content p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.cta-button {
    display: inline-block;
    background-color: #ff6347;
    color: #fff;
    padding: 12px 25px;
    font-size: 1.1em;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease;
}


.supportbutton {
    display: inline-block;
    background-color: #ff4500;
    color: #fff;
    padding: 12px 25px;
    font-size: 1.1em;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease;
    margin: 0 auto; /* This helps center it when inline */
}

.supportbutton:hover {
    background-color: #ff6347;
}

.button-container {
    text-align: center; 
    margin-top: 20px; 
	margin-bottom: 20px;
}


.cta-button:hover {
    background-color: #ff4500;
}

.hero-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.hero-image2 img {
    width: 100%;
    max-width: 500px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

/* Features Section */
.features {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px 30px;
    background-color: rgba(255, 255, 255, 0.1);
}

.feature {
    text-align: center;
    max-width: 220px;
}

.feature i {
    font-size: 3em;
    color: #ff6347;
    margin-bottom: 15px;
}

.feature h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
    color: #ffeb3b;
}

.feature p {
    font-size: 1em;
    color: #fff;
}

/* About Preview Section */
.about-preview {
    padding: 60px 30px;
    text-align: center;
    background-color: rgba(0, 0, 0, 0.9);
}

.about-preview h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #ffeb3b;
}

.about-preview p {
    font-size: 1.2em;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

/* about page paragraph formatting in 2nd section */
.callout2 p {
	font-size: 1.1em;
    margin-bottom: 5px;
	margin-top: 1px;
	
}

/* about page 2nd header */
.header-title {
	font-size: 2.5em;
    margin-bottom: 0px;
	color: #ffeb3b; /* Large Yellow Font */
	
}

.header-title-container {
    display: flex;
    justify-content: center; /* Centers content horizontally */
    padding: 0px; /* Optional: Adjust padding around the container */
	margin-bottom: 1px;
	
}

/* Merchandise page 2nd header Rainbow, Anywhere, Anytime!*/
.header-title-vision {
	font-size: 1.3em;
	color: black; /* Large Yellow Font */
     background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet);
	 /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
	text-align: center;
	font-weight: bold;
	filter: brightness(1.5) ;
	padding: 0px 5px; /* Adjust padding to wrap the background tightly around the text */
    border-radius: 10px; /* Add rounded corners */
    display: inline-block; /* Ensure the background fits the text only */
	 margin: 0 auto; /* Center the block on the page */
	 /* white-space: nowrap;  /* Prevent text from wrapping */
	/* margin-top: 0 !important; */
	/* margin-bottom: 5px; */
	/* display: inline-block; */
	
}


.read-more {
    display: inline-block;
    background-color: #ff6347;
    color: #fff;
    padding: 10px 20px;
    font-size: 1em;
    text-decoration: none;
    border-radius: 20px;
    transition: background-color 0.3s ease;
}

.read-more:hover {
    background-color: #ff4500;
}



/* Footer */
footer {
    background-color: #333;
    padding: 5px 5px;
    color: #fff;
}

.footer-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: auto;
}

.footer-left h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
	
}

/* Centers copyright along the bottom */
.home-footer .footer-left {
    text-align: center; /* Center the copyright text */
    width: 100%; /* Make sure it takes the full width */
}

.footer-left p {
    font-size: 0.9em;
	text-align: center;
}

.footer-right a {
    color: #fff;
    margin-left: 15px;
    font-size: 1.2em;
    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #ff6347;
}


/* To improve Verses page appearance, merchandise pages, etc. */

.section-title {
    font-size: 2.5em;
    color: #ffeb3b; /* Bright yellow for emphasis */
    text-align: center;
	/* margin: 0 0 0; */
	padding: 20px; /* add for Yellow Title to be below menu for multiple pages using this class */
	margin-top: 0 !important;
	margin-bottom: -20px !important; /* tightens up the colorful text "A Rainbow, Anywhere, Anytime!"  */
}

.section-title-contact {
	font-size: 2.5em;
    color: #ffeb3b; /* Bright yellow for emphasis */
    text-align: center;
	/* margin: 0 0 0; */
	/* padding: 20px; /* add for Yellow Title to be below menu for multiple pages using this class */ 
	/* margin-top: 0px; */
}

.section-intro {
    text-align: center;
    font-size: 1.2em;
    margin-bottom: 10px;
	color: #fff; /* white */
}

.verses-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    
}

.verse-card {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 20px;
    margin: 20px 0;
    border-radius: 10px;
    max-width: 750px;
    width: 100%;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.verse-card:hover {
    transform: scale(1.05);
    /* background-color: rgba(255, 255, 255, 0.2); */
    background-color: rgba(0, 0, 0, .5);
}

.verse-text {
    font-size: 1.5em;
    line-height: 1.6;
}

.verse-ref {
    font-size: 1em;
    color: #ffeb3b; /* Bright yellow for references */
    margin-top: 10px;
}

/* Color Coding for text within cards */
.versetextcard1 {
    color: #87cefa; /* Brightened sky blue */
    font-weight: bold;
    /* filter: brightness(1.2) ; */
	filter: saturate(2.9);
	/* Increase brightness and saturation */
}


.versetextcard2 {
    color: #b0e0e6; /* Powder Blue */
    font-weight: bold;
	filter: brightness(1.2) ;
}


/* END of improving Verses page appearance */

/* Q.A. Webpage */
.QA-ref {
    font-size: 1.5em;
    color: #87cefa; /* Brightened sky blue */
    margin-top: 10px;
}

/* Color Coding for text within cards */
.QA-card1 {
    font-size: 1.5em;
	color: #ffeb3b; /* blue */
    font-weight: bold;
    /* filter: brightness(1.2) ; */
	filter: saturate(2.9);
	/* Increase brightness and saturation */
}

/* End of Q.A. Webpage */


/* Style Enhancements for about.html page */
.callout {
    background-color: rgba(255, 99, 71, 0.9); /* Tomato gradient or your current theme color */
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
    color: #fff;
    font-size: 1.1em; /* Increase font size */
}


/* Join Button */
.join-btn {
    display: inline-block;
    background-color: #ff4500; /* Darker orange */
    color: white;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s ease;
	margin-top: 15px;
}

.join-btn:hover {
    background-color: #ff6347; /* Lighter tomato color on hover */
}

/* Content Section */
.content-container {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.1); /* Adjust background transparency for better contrast */
    text-align: center;
}
/* End of Style Enhancements for about.html page */

.quote-color {                                             
	color: #87cefa; /* sky blue */
	font-style: italic; 
}



/* Reclaim Page Styles */
.reclaim-button {

    display: block !important;
    text-align: center !important; 
    margin: 20px auto !important; /* Centers the button horizontally */
    max-width: 215px !important; /* Adjust size of "Reclaim the Rainbow" button */
    background-color: #ff6347;
    color: white;
    padding: 9px 0px !important; /* Adjust height of "Reclaim the Rainbow" button */
    border-radius: 25px !important;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
}



.reclaim-button:hover {
    background-color: #ff4500;
    color: white;
}

.reclaim-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    margin: 40px 0;
}

.option-card {
	   
	/* calming grey background  */
	background-color: rgba(112, 128, 144, 0.9); 

	/* Teal background */
	/* background-color: rgba(0, 128, 128, 0.9);  */
		
    color: white;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.option-card:hover {
    transform: translateY(-5px);
}

.option-card h2 {
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
}


.option-card p {
    font-size: 1.1em;
    margin-bottom: 20px;
}
/* End of Reclaim Page Styles */

.hero-content-donate {
    width: 100%; 
    max-width: 100%; /* Prevents any narrowing of the width */
    margin: 0; /* Removes margin that could limit expansion */
    padding: 0 30px; /* Adds padding only to the sides if needed */
    text-align: center; /* Optional: Center the text within the expanded area */
}

.hero-content-donate h1 {
    font-size: 3em;
    margin-bottom: 20px;
    color: #ffeb3b;
}

/* donate page for A Rainbow, Anywhere, Anytime! however now changing to colorful text */
/* .hero-content-donate h2 { */
    /* font-size: 1.7em; */
    /* margin-bottom: 5px; */
    /* Tomato font color #ff6347 */
	/* color: white;  */
    /* background-color: #ff6347; */
	/* #87CEEB;  Light sky blue background */
	
    /* padding: 5px; /* Padding around the text */ 
    /* display: inline-block; /* Ensures the background only covers the text */ 
    /* border-radius: 5px; /* Adds rounded corners */ 
/* } */



.hero-content-donate p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.shadow-box {
     /* background: linear-gradient(135deg, rgba(255, 99, 71, 0.9), rgba(255, 165, 0, 0.9), rgba(173, 216, 230, .010)); */
	 background: linear-gradient(135deg, rgba(72, 209, 204, 0.1), rgba(90, 100, 0, 0.9), rgba(72, 209, 204, 0.1));
	color: #fff; /* White text for contrast */
    padding: 10px; /* Generous padding */
    border-radius: 20px; /* Smooth rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(255, 99, 71, 0.5); /* Soft and dynamic shadow */
    /* max-width: 850px;  */
    margin: 30px auto; /* Center and add vertical space */
    text-align: center; /* Center the text */
    font-family: 'Arial', sans-serif; /* Clean and modern font */
    font-size: 1.2em; /* Larger text for emphasis */
    line-height: 1.7; /* Increased line height for readability */
    transition: transform 0.3s ease; /* Adding a hover effect */
}

.shadow-box:hover {
    transform: scale(1.08); /* Slight zoom effect on hover */
}


.shadow-box-rainbows {
     /* background: linear-gradient(135deg, rgba(255, 99, 71, 0.9), rgba(255, 165, 0, 0.9), rgba(173, 216, 230, .010)); */
	 background: rgba(0, 128, 128, 0.9)
	color: #fff; /* White text for contrast */
    padding: 10px; 
    border-radius: 20px; /* Smooth rounded corners */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3), 0 4px 15px rgba(255, 99, 71, 0.5); /* Soft and dynamic shadow */
    max-width: 850px; 
    margin: 30px auto; /* Center and add vertical space */
    text-align: center; /* Center the text */
    font-family: 'Arial', sans-serif; /* Clean and modern font */
    font-size: 1em; /* Larger text for emphasis */
    line-height: 1.7; /* Increased line height for readability */
    transition: transform 0.3s ease; /* Adding a hover effect */
}

.shadow-box-rainbows:hover {
    transform: scale(1.08); /* Slight zoom effect on hover */
}

.option-card-donate {
	   
	/* calming grey background  */
	/* background-color: rgba(112, 128, 144, 0.9);  */
	
	/* pale cyan */
	/* background-color: rgba(173, 216, 230, 0.9);  */
	background-color: rgba(72, 209, 204, 0.9); /* lighter-teal */

	/* Teal background */
	/* background-color: rgba(0, 128, 128, 0.9);  */
	color: white;
    border-radius: 10px;
    padding: 10px;
    width: 300px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
}

.option-card-donate h1 {
    margin-bottom: 15px;
    font-size: 1.5em;
    font-weight: bold;
	color: black;
}

.option-card-donate p {
    font-size: 1.1em;
    margin-bottom: 20px;
}

.option-card-donate:hover {
    transform: translateY(-5px);
}

/* Reclaim the Rainbow link in navbar */
.navbar-menu .highlight {
    color: #ff6347;  
    /* font-weight: bold;  */
    /* border: 2px solid #ff4500; /* Adds a border around the link */ 
    padding: 0px 0px;  
 	/* border-radius: 5px;  */
    transition: background-color 0.3s ease, color 0.3s ease;
	background-color: white; 
	 border-radius: 25px;
}


.navbar-menu .highlight:hover {
    background-color:  gold; /* Changes background color on hover */
    color: purple; /* Changes text color on hover */
}

/* Oath Form Styles */

.oath-background {
    background: url('images/oath.webp') no-repeat center center fixed;
    background-size: cover;
    min-height: 100vh; /* Ensure it covers the whole viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}


.oath-form-container {
    margin-top: 20px; /* Adds space so content doesn’t overlap with the fixed navbar */
    margin-bottom: 20px;
	max-width: 450px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    /* background-color: rgba(255, 99, 71, 0.9); */
	/* Teal background */
	background-color: rgba(0, 128, 128, 0.9); 
    border-radius: 25px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    text-align: center;
    color: white;
}


.oath-box {
    background-color: rgba(255, 255, 255, 0.2); /* Semi-transparent background */
    padding: 3px;
    border-radius: 15px;
    margin: 10px 0;
    text-align: center;
    transition: background-color 0.5s ease, box-shadow 0.5s ease; /* Smooth transition */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    font-style: italic;
    font-size: 1.2em;
    color: #fff; /* White text for contrast */

}

.oath-box:hover {
    background-color: rgba(255, 255, 255, 0.4); /* Increase transparency on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2); /* Deepen shadow on hover */
}



.oath-form-container h1 {
    margin-bottom: 20px;
    font-size: 2.5em;
    font-family: 'Great Vibes', cursive;
}

.oath-form-container p {
    margin-bottom: 30px;
    font-size: 1.1em;
}

.form-group {
    margin-bottom: 20px;
}

input[type="text"], input[type="email"] {
    width: 100%;
    padding: 15px;
    font-size: 1.1em;
    border: none;
    border-radius: 8px;
    margin-top: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.submit-button {
    background-color: #ff4500;
    color: white;
    padding: 12px 30px;
    font-size: 1.3em;
    font-weight: bold;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
	margin-top: 20px;
}

.submit-button:hover {
    background-color: white;
    color: white;
}

/* Certificate Styles */
.certificate-container {
    max-width: 700px;
    margin: 40px auto;
    padding: 50px;
    text-align: center;
    background-color: black;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

#certificate_content{
    background-color: black;
    border-radius: 15px;
}

.certificate-logo {
    max-width: 150px; /* Adjust size as needed */
    margin-bottom: 20px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}


.certificate-border {
    border: 8px solid #ff6347;
    padding: 30px;
    border-radius: 15px;
}

.certificate h2, .certificate h3 {
    color: #ff6347;
    font-family: 'Poppins', sans-serif;
}

.certificate h1 {
    color: #87cefa;
    font-size: 2.8em;
    font-family: 'Great Vibes', cursive;
    margin: 20px 0;
}

.oath-text {
    font-size: 1.2em;
    color: #87cefa;
    margin-top: 20px;
    font-style: italic;
}


/* end of oath styles */


/* Merchandise Page Styles */
.merchandise-container {
    max-width: 2500px;
	margin: 15px auto;
	text-align: center;
    padding: 5px;
	padding-top: 0px; /* adding distance from navbar */
	padding-left: 48px; /* added to center all images across screen */
	/* justify-items: center;      */
	/* justify-content: center; */
	/* padding-bottom: 25px; */
}

.merchandise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 40px;
	justify-items: center;     
	justify-content: center;
    padding-top: 10px;
	padding-bottom: 50px;
}



.merchandise-grid2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 30px; 	/* spacing between merch items bookmarkers */
	/* justify-items: center;  */ /* Center individual items */
	justify-content: center;
    padding-top: 10px;
	padding-bottom: 60px;
}

.merchandise-grid-mag {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 60px;
	/* justify-items: center;  */ /* Center individual items */
	justify-content: center;
    padding-top: 10px;
	padding-bottom: 50px;
}

.merch-item {
    background-color: black;
	
		/* #f2dad5; unique salmon color*/
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.merch-item h2 {
    font-size: 1.5em;
    /* margin-top: 10px; */
    margin-bottom: 0px;
    color: #ff6347;
}

.merch-item p {
    font-size: 1.2em;
    font-weight: bold;
    margin-bottom: 15px;
	color: white;
}

.merch-item:hover  {
    transform: scale(1.08); /* Slight zoom effect on hover */
	transition: transform 0.3s ease; /* Adding a hover effect */
}

.merch-item img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.merch-item2 {
    /* background-color: black; */
	/* #f2dad5; unique salmon color*/
    padding: 5x;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.merch-item2:hover  {
    transform: scale(1.08); /* Slight zoom effect on hover */
	transition: transform 0.3s ease; /* Adding a hover effect */
}

.merch-item2 img {
    max-width: 80%;
    height: auto;
    border-radius: 10px;
    margin-bottom: 15px;
}

.add-to-cart:hover {
    background-color: #ff4500;
}
/* end of merchandise styles */


/* magnets */
.merch-item-mag {
    display: inline-block;
    width: 100%; /* Ensure the item takes up full width */
    max-width: 420px; /* Adjust as per your desired container size */
    text-align: center; /* Center the text and button inside the container */
    vertical-align: top; /* Align the items to the top of the container */
    margin: 15px; /* Add some space between each item to prevent overlap */
}

.merch-item-mag img {
    width: 100%; /* Make the image fill the container's width */
    height: 200px; /* Set the fixed height */
    object-fit: cover; /* Ensure the image fits without stretching */
    border-radius: 10px;
    margin-bottom: 15px; /* Add space between the image and the button */
}

.merch-container-mag {
    display: flex;
    flex-wrap: wrap; /* Ensure items wrap and don't overlap */
    justify-content: center; /* Center the items in the container */
    gap: 20px; /* Add space between each item */
}

.merchandise-grid-mag {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}


.merch-item-mag:hover  {
    transform: scale(1.30); /* Slight zoom effect on hover */
	transition: transform 0.3s ease; /* Adding a hover effect */
}

/* end of magnets */

.add-to-cart {
    background-color: #ff6347;
    color: white;
    padding: 10px 20px;
    font-size: 1.1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}






/* Donate Page Styles */
.donate-container {
    max-width: 1200px;
    margin: 50px auto;
    text-align: center;
    padding: 20px;
}

.donate-container p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.donation-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 15px;
}

.donation-tier {
	background-color: rgba(173, 216, 230, 0.9); /* pale cyan */
		/* background-color: rgba(176, 224, 230, 0.9); */ 	 	/* powder blue */
		/* background-color: rgba(100, 200, 200, 0.9); teal mist */
	padding: 16px;
    border-radius: 15px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    flex-basis: 250px; /* Adjust width of donation tiers */
}

.donation-tier h2 {
    color: black;
    font-size: 1.3em;
    margin-bottom: 10px;
	
}

#custom-donation {
    width: 160px; /* Adjust the width of the input box */
    height: 40px; /* Adjust the height of the input box */
    font-size: 1.2em; /* Increase the font size for better readability */
    padding: 10px; /* Add padding inside the input box */
    border: 2px solid #ff6347; /* Optional: Add a border to match your theme */
    border-radius: 5px; /* Add rounded corners for a smoother look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Optional: Add a slight shadow for depth */
    text-align: right; /* Right-align the text for financial inputs */

}


.donation-tier p {
    font-size: 1.1em;
    margin-bottom: 18px;
}

.donate-button {
    background-color: #ff6347;
    color: white;
    margin-top: 18px;
	padding: 10px 25px;
    font-size: 1.1em;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.donate-button:hover {
    background-color: #ff4500;
}
/* end of donate page styles */

/* Contact Page Styles */
.contact-container {
    max-width: 600px;
    margin: 10px auto; /* Adjust the top margin to provide space below navbar */
    padding: 20px;
    text-align: center;
    background-color: rgba(173, 216, 230, 0.9); /* Pale Cyan background */
    border-radius: 20px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

/* adding not not(.success-message) to prevent this class from being applied to email message confirmation/failed message. */
.contact-container p:not(.success-message) {
    font-size: 1.3em;
    margin-bottom: 30px;
    color: black;
}


.contact-form {
    display: flex;
	flex-direction: column;
    gap: 10px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #333;
}

.form-group input, .form-group textarea {
    padding: 10px;
    font-size: 1.1em;
    border: 2px solid #ff6347;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    background-color: #fff;
}



/* end of Contact styles */

/* Share the Oath Page Styles */

/* .share-container { */
    /* max-width: 800px; */   /* Adjust the top margin to provide space below navbar */
	/* padding: 20px; */
    /* text-align: center; */
    /* background-color: rgba(173, 216, 230, 0.9); /* Pale Cyan background */ 
    /* border-radius: 10px; */
    /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); */



/* .share-container h1 { */
    /* position: absolute; */
	/* font-size: 2.5em; */
    /* color: #ff6347; /* Matches the theme */ 
    /* margin-bottom: 20px; */
	
/* } */

/* Form Container Positioned on the Top Right */
.share-form-container {
    position: relative;
    /* top: 150px; /* Adjust as needed */ 
    /* right: 250px; /* Adjust as needed */ 
	/* width: 300px; /* Set width for the form */ 
    /* background-color: rgba(255, 255, 255, 0.9); /* Light background for form readability */ 
    padding: 20px;
	border-radius: 10px;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
	margin-top: 20px; /* Add margin to ensure space below the hero section */
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}


.submit-button {
    padding: 10px 20px;
    font-size: 1.2em;
    background-color: #ff6347;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #ff4500;
}
/* End of Share the Oath Styles */


/* .social-share { */
    /* margin-top: 20px; */
/* } */

/* .social-share a { */
    /* margin: 0 10px; */
    /* color: #ff6347; */
    /* font-size: 1.2em; */
    /* text-decoration: none; */
/* } */

/* .social-share i { */
    /* margin-right: 5px; */
/* } */



/* email success/fail message */

.success-message {
    color: White; /* color for success */
    font-weight: bold;
    font-size: 1.5em; 
    margin-bottom: 15px;
}

.error-message {
    color: red; /* Red color for error */
    font-weight: bold;
    font-size: 1.5em; 
    margin-bottom: 15px;
}

/* Spinner styles for waiting for email sent confirmation */
#spinner {
    display: none;  /* Hidden by default */
    border: 6px solid #f3f3f3;  /* Light grey */
    border-top: 6px solid #3498db;  /* Blue */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

/* Spinner animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* This is the little reclaim rainbow icon */
.flip-rainbow {
    display: inline-block;
    transform: scaleX(-1); /* Flips horizontally */
}

/* styles for rainbows.html page to host rainbow imgages */
/* Rainbow Gallery Styling */
.rainbow-gallery-container {
    text-align: center;
   /* margin-top: 25px;  	 distance from title */
    padding: 1px;
	
}

.rainbow-gallery-container h2 {
    color: #ff6347; /* Match Tomato theme */
	text-align: center;
}

  
.rainbow-gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
	gap: 25px;
	/* background-color: pink; */
}

/* hide ALT= text on rainbows.html page until images are fully loaded */
/* Initial state: hide all rainbow items by default */


/* Hide the date on the rainbows.html page until images are fully loaded */
.rainbow-container p {
    display: none; /* Hide all posted date paragraphs by default */
}




/* Only for the Date section displaying on images from rainbows.html: <p>  Posted on October 1, 2024  </p> */
.rainbow-item p {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    color: white; 	/* changes "Posted on date" text color */
    text-align: center;
	font-size: 1.2em;
    /* background-color: pink; */
	/* Semi-transparent background */
    background-color: rgba(0, 0, 0, 0.7); 
	padding: 1px;
    box-sizing: border-box; /* Ensure padding is contained within the element */
}

/* Check here */
/* To make Rainbow Oath or verse appear on top of the image when image clicked from Rainbows.html page*/
/* the java script must be affecting the text on top of the images so that the verse is not displayed vertically center. The issue didn't matter before because no cache of images but now returning to page the verse overlay is displayed at top of image instead of centered on rainbows.html page.   */
.rainbow-container {
    position: relative; 
    display: inline-block;<div id="myModal" class="modal">
            <span class="close">&times;</span>
            <img class="modal-content" id="img01">
            <div id="caption"></div>
        </div>
    /* color: pink !important; - doesn't change text color */
	/* top: 50px !important; */
	width: 100%; 	/* image size inside container */
	/* adjusting font-size adjusts the white font that shows on top of the image after clicked on rainbows.html  */
	/* font-size: 1.2em; */
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	/* padding-top: 5px !important; */
	/* margin-top: 50px !important; */
	
}

/* Rainbow image itself within container such as rounded corners etc.  */



/* Style the verse overlay or highlight the image */
.rainbow-container.highlight {
    border: 2px solid #ff6347; /* Tomato theme */
    transition: border 0.3s ease;
	
}


/* Style for the alt text verse overlay on top of images on rainbows.html. Also changes the shadow or transparent box with white text */

.alt-text-overlay {
    display: flex !important; /* centers verse on images  */
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 32px;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ 
	/* background-color: pink; */
    color: white;
	/* color: pink; - changes verse text color on main rainbow page.  */
	/* font-weight: bold; */
    font-size: 1.2em;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 0px;
    pointer-events: none; /* Prevent interference with clicks */
}


/* end of rainbow style page */


/* Custom link styling */
.custom-link {
    color: #ff6347; /* Tomato color for visibility */
    text-decoration: none;
    font-weight: bold;
    border-bottom: 2px solid #ff4500; /* Darker red underline to draw attention */
    transition: color 0.3s ease, border-bottom 0.3s ease; /* Smooth hover effect */
}

.custom-link:hover {
    color: #ff4500; /* Change to darker red on hover */
    border-bottom: 2px solid #ff6347; /* Swap the colors on hover */
}

/* Merchandise Sold out message */
.image-container {
    position: relative;
    display: inline-block;
}

.image-container img {
    width: 100%;
    height: auto;
}
/* Merchandise Sold out message */
.overlay-text {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg); /* Rotates the text diagonally */
    background-color: rgba(200, 10, 50, 0.7); /* Semi-transparent red */
    color: white;
    font-size: 15px;
    font-family: 'Arial', sans-serif; /* Customize font as needed */
    padding: 10px 12px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap; /* Ensures text doesn't wrap */
	 opacity: 0; /* Initially hide the text */
	  transition: opacity 0.3s ease; /* Smooth transition for fade-in */
}

.overlay-text2 {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-30deg); /* Rotates the text diagonally */
    background-color: rgba(255, 255, 250, 0.7); /* Semi-transparent red */
    color: black;
    font-size: 15px;
    font-family: 'Arial', sans-serif; /* Customize font as needed */
    padding: 10px 12px;
    text-align: center;
    font-weight: bold;
    letter-spacing: 2px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap; /* Ensures text doesn't wrap */
	opacity: 0; /* Initially hide the text */
	  transition: opacity 0.3s ease; /* Smooth transition for fade-in */
}

.image-container:hover .overlay-text {
    opacity: 1; /* Show the text when hovering over the image */
}

.image-container:hover .overlay-text2 {
    opacity: 1; /* Show the text when hovering over the image */
}

/* End of Merchandise Sold out message */

/* Checkout Cart */
.sidebar {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    background-color: #f4f4f4;
    padding: 20px;
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
}

.cart-items {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.cart-items li {
    margin: 10px 0;
}

.cart-summary {
    margin-top: 20px;
}

.checkout-btn {
    margin-top: 10px;
    padding: 10px;
    background-color: #ff6347;
    color: white;
    border: none;
    cursor: pointer;
}
/* end of checkout cart */

/* rainbows.html page of image once clicked in full screen view  */
/* Modal hidden by default */
.modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* When modal is open */
.modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal Content (Image) */
.modal-content {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  object-fit: contain;
  margin: auto;
}

/* Caption */
#caption {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1.5em;
  font-weight: bold;
  color: white;
  background-color: rgba(0, 0, 255, 0.5);
  padding: 10px 15px;
  border-radius: 10px;
  text-align: center;
  max-width: 80%;
  word-wrap: break-word;
  z-index: 1000;
}

/* Close button */
.close-button {
  position: fixed;
  top: 20px;
  right: 20px;
  background-color: #ff6347;
  color: white;
  border: none;
  padding: 5px 8px;
  font-size: 1em;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1000;
  transition: background-color 0.3s ease;
}

.close-button:hover {
  background-color: #ff4500;
}

/* end of close shared button */


/* Add Animation */
/* .modal-content, #caption {   */
  /* -webkit-animation-name: zoom; */
  /* -webkit-animation-duration: 0.6s; */
  /* animation-name: zoom; */
  /* animation-duration: 0.6s; */
/* } */

/* @-webkit-keyframes zoom { */
  /* from {transform: scale(0)}  */
  /* to {transform: scale(1)} */
/* } */

@keyframes zoom {
  from {transform: scale(0.1)} 
  to {transform: scale(1)}
}

/* The rainbows.html images Close Button */
.close {
  position: absolute;
  top: 2px;
  right: 5%;  /* Adjusted to a percentage for more responsive placement */
  color: Yellow;
  font-size: 50px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}
/* end of rainbow styles  */

/* =================== New hamburger menu  */
/* Hamburger menu styles */
.hamburger-menu {
    position: fixed; /* Keeps the menu in the top-left corner even when scrolling */
    top: 10px;
    left: 10px;
	z-index: 1001; /* Higher z-index to ensure it stays above other elements */
}


.hamburger-icon {
    display: inline-block;
    cursor: pointer;
    position: absolute;
    top: 10px;
    left: 10px;
	z-index: 1001;
}

.hamburger-icon span {
    display: block;
    width: 30px;
    height: 4px;
    margin: 5px;
    background-color: #fff; /* You can adjust this color */
    transition: background-color 0.3s, transform 0.3s;
}


/* Hide checkbox */
#menu-toggle {
    display: none;
}

/* Hamburger Menu styles */
.menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 275px;
    height: 100vh;
    background-color: rgba(0, 128, 128, 0.9); /* Teal background */
    transform: translateX(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}

.menu ul {
    list-style-type: none;
    padding: 50px 20px;
}

.menu ul li {
    margin: 0px 0;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 13px;
}

.menu ul li a {
    color: white;
    text-decoration: none;
    font-size: 15px;
    padding: 10px;
    display: block;
    transition: background-color 0.3s, color 0.3s; /* Smooth transition */
}

/* Highlight effect on hover */
.menu ul li a:hover {
    background-color: rgba(255, 99, 71, 0.9); /* Highlight with a Tomato background */
    color: white; /* Change text color */
}

/* Highlighting text A Rainbow, Anywhere, Anytime! in yellow within hamburger-menu */
.menu ul li a[href="rainbows.html"] {
    color: black !important; 
    font-weight: bold;
    text-decoration: none;
	/* font-size: 1.5em; <- makes vision-menu font larger */
}

/* Menu colorful option for Vision: Rainbow, Anywhere, Anytime! */
.vision-menu {
	font-size: 1.5em;
	/* color: black !important; /* Large Yellow Font */ 
	color: black;
     /* background: linear-gradient(90deg, red, orange, yellow, green, blue, indigo, violet); */
	 background: linear-gradient(90deg, 
        red 2%, 
        orange 15%, 
        yellow 25%,  /* Reduce yellow’s range */
        green 40%, 
        blue 60%, 
        indigo 80%, 
        violet 100%);
	 /* -webkit-background-clip: text; */
    /* -webkit-text-fill-color: transparent; */
	text-align: center;
	font-weight: bold;
	filter: brightness(1.5) ;
	padding: 5px 0px; /* Adjust padding to wrap the background tightly around the text */
    line-height: 0.5; /* Adjust line height to shrink the height of the text */
	border-radius: 10px; /* Add rounded corners */
    display: inline-block; /* Ensure the background fits the text only */
	 margin: 0 auto; /* Center the block on the page */
	}

/* adding this for share.html page where I have hyperlink to rainbow.html around text: Rainbow, Anywhere, Anytime! */
a.vision-menu {
    font-size: 1.0em;
	text-decoration: none !important; /* Ensure no underline is applied */
    color: black; /* Make sure it inherits the color of surrounding text */
	padding: 5px 5px; /* Adjust padding to wrap the background tightly around the text */
	
}

.menu ul li a[href="rainbows.html"]:hover {
    color: #FFD700 !important; /* Optional hover effect */
}
/* end of highlight Rainbow, Anywhere, Anytime!  */



/* Show the menu when the checkbox is checked */
#menu-toggle:checked + .hamburger-icon + .menu {
    transform: translateX(0);
}

/* Animate the hamburger icon when the menu is open */
#menu-toggle:checked + .hamburger-icon span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

#menu-toggle:checked + .hamburger-icon span:nth-child(2) {
    opacity: 0;
}

#menu-toggle:checked + .hamburger-icon span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}
/* end of new hamburger menu */

/* share rainbow image & verse */

.share-icon-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

.share-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    color: white; /* Tomato theme */
    transition: transform 0.3s ease;
	/* Try this later */
    
    /* background-color: #ff6347; */
    /* padding: 10px; */
    /* color: white; */
    /* border-radius: 10px; */
    
}


.share-btn:hover {
    transform: scale(1.1);
}


/* Styling for the shared image */
.shared {
    border: 5px solid #ff6347; /* Highlight the shared image */
    padding: 0px;
    border-radius: 10px;
    position: relative; /* Needed for the prayer hands icon */
	 /* overflow: visible; /* Ensure the pseudo-element isn't clipped */
}

/* Prayer hands icon styling */
.prayer-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 1.2rem;
    color: #ff6347;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 50%;
    z-index: 1000;
}




/* End of Style for images that have been shared */


/* overlay is for verses/images that are shared and tie to rainbows-fullscreen.html confirm by changing font color: blue */
.verse-overlay {
   position: absolute;
   bottom: 10%;
   left: 50%;
   transform: translateX(-50%);
   font-size: 1.5em;
   font-weight: bold;
   color: white;
   /* color: blue; */
   /* background-color: rgba(0, 0, 0, 0.7); */
   /* background-color: blue; */
   background-color: rgba(0, 0, 255, 0.5); /* 0.3 for more transparency or 0.8 for blue less transparency). */
   padding: 10px;
   border-radius: 10px;
   text-align: center;
   max-width: 90%;
   }




/* Popup message styling */
.popup-message {
    display: none; /* Hidden by default */
    position: absolute;
     top: 110%; /* Position it below the button */
	/* bottom: -90px; /* Adjust based on your layout */ 
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 5px 5px;
    border-radius: 5px;
    font-size: 0.9rem;
    z-index: 1000;
	width: 180px; /* Make the pop-up wider to fit on two lines */
    text-align: center; /* Center align the text */
}

/* Show the popup message when hovering over the button */
.share-icon-container:hover .popup-message,
.share-icon-container:focus-within .popup-message {
    display: block; /* Show the message on hover or focus */
}

/* this is for rainbows.html page while initial images are loaded  */
.placeholder {
    /* position: absolute; */
    /* top: 0; */
    /* left: 0; */
    width: 100%;
    height: 300px;
    z-index: 999; /* Ensure it appears above other elements */
    /* display: flex; */
    justify-content: center;
    align-items: center;
    /* background-color: rgba(255, 255, 255, 0.8); /* Optional: translucent background */ 
	max-width: 600px;
    height: auto;
}



.gray-heart {
    color: gray;
    cursor: pointer;
}

.red-heart {
    color: red;
}



.share-counter {
    position: fixed;
    top: 90px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
	/* background-color: rgba(0, 0, 0, 0.5); /* Optional background for visibility */ 
	z-index: 9999; /* High z-index to stay above other elements */
	
}
.share-counter p {
    color: #000;
    font-weight: 600;
    border: 3px solid #000;
    background: #fff;
	/* background-color: rgba(255, 255, 255, 0.8); */
    padding: 5px 3px;
	border-radius: 10px;
}
.share-prayer-icon {
    font-size: 1.2rem;
    color: #ff6347;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 5px;
    border-radius: 50%;
    z-index: 1000;
}

/* Media Queries for Print */
@media print {
    /* Hide the form container and any other elements you don't want to appear in print */
    .oath-form-container {
        display: none;
    }

    body {
        -webkit-print-color-adjust: exact; /* For Chrome */
        print-color-adjust: exact;         /* For other browsers */
    }

    .certificate {
        background-size: cover; /* Make sure the image covers the certificate */
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }

    /* Hide other non-essential elements like buttons */
    .submit-button, .navbar {
        display: none;
    }

    /* Ensure the certificate is displayed properly */
    .certificate {
        width: 100%;
        border: none; /* Optionally remove any borders for a clean print */
    }
}


/* *Media Queries Start* Responsive Styles for Smaller Screens. */

/* tablets in landscape mode or small medium-size desktop screens. */
@media (max-width: 992px) {
        .vision-menu{
            line-height: 1.2;
        }
        .join-btn {
            padding: 10px 20px;
            font-size: 12px;
        }
	  #caption {
        position: absolute;
        bottom: 50%; /* moves caption text higher up on the image */
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2em;
        padding: 1px;
        width: 98%; /* Explicitly set the width */
		max-width: 98%; /* Use most of the screen width. Increasing makes caption box wider.*/
        z-index: 1000;
		box-sizing: border-box; /* Ensure padding is included within the width */
    }
	.hero {
        flex-direction: column;
        text-align: center;
    }

    .hero-content, .hero-image {
        max-width: 100%;
    }

    .features {
        flex-direction: column;
    }

    .navbar-menu {
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: -100%;
        width: 100%;
        background-color: rgba(255, 99, 71, 0.9);
        transition: left 0.3s ease;
    }

    .navbar-menu.active {
        left: 0;
    }
	
	
}



/* Tablets in portrait mode and cell phones */
@media (max-width: 768px) {
	  #caption {
        position: absolute;
        bottom: 50%; /* moves caption text higher up on the image */
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.3em;
        padding: 1px;
        width: 95%; /* Explicitly set the width */
		max-width: 95%; /* Use most of the screen width. Increasing makes caption box wider.*/
        z-index: 1000;
    }
	
	.hero2 {
        padding: 100px 5px 30px;
    }

    .about-section {
        margin: 40px 10px;
        padding: 15px;
        font-size: 90%;
    }

    .hero2-content {
        padding: 40px;
    }

    .callout, .callout2 {
        padding: 10px;
        font-size: 90%;
    }

    .join-btn {
        padding: 10px 20px;
    }

    .hero3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 100px 30px 50px 30px;
        background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('images/main3.webp') no-repeat center center/cover;
        min-height: 95vh;
    }

    .hero5 {
        margin-top: -20px;
    }

    .verse-card {
        padding: 15px;
        margin: 15px 0;
    }

    .verse-text {
        font-size: 1.3em;
    }

    .verse-ref {
        font-size: 0.9em;
    }

    .share-form-container {
        margin-top: 50px;
        padding: 15px;
        width: 90%;
    }

    .navbar-container {
        padding: 35px 50px;
    }
	
	/* Hide Prayer hands when image is clicked using java*/
     .hide-share-counter {
    display: none;
	}
	
	/* oath page and certificate formatting */
	.hero6 {
    flex-direction: column;
    margin-top: 68px;
    margin-bottom: 200px;

	}

	.certificate-container {
		margin: 0;
		padding: 0;
	}
	
}


@media (max-width: 600px) {
    #fullscreen-image {
        width: 100%; /* Adjust the width as needed */
        height: auto;
	}
	   
	.share-counter{
        top: 21px;
        right: 75px;
        z-index: 9999;
    }
	#caption {
        position: absolute;
        bottom: 50%; /* moves caption text higher up on the image */
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.3em;
        padding: 1px;
        width: 95%; /* Explicitly set the width */
		max-width: 95%; /* Use most of the screen width. Increasing makes caption box wider.*/
        z-index: 1000;
    }
	
	.hero-content h1 {
        font-size: 2.5em;
    }

    .features {
        padding: 40px 15px;
    }

    .feature {
        max-width: 100%;
        margin-bottom: 30px;
    }

    .about-preview h2 {
        font-size: 2em;
    }

      /* Hide text in the share icon section, but keep the share button visible */
    .share-icon-container p, 
    .share-icon-container center p {
        display: none !important; /* Force hiding the text inside <center> */
    }

	 /* Hide the share text, but keep the share button visible */
    .share-text {
        display: none !important; /* Forcefully hide the text */
    }


    .share-btn {
        font-size: 0; /* Hide the "Encourage Someone" text by setting the font-size to 0 */
    }

    .share-btn::before {
        content: '💌'; /* Display only the share icon */
        font-size: 2rem; /* Adjust the icon size if necessary */
    }
	
	
	/* Show the popup message when hovering over the button */
   	.popup-message {
		width: 200%;
		
    }

   

}



/* Media Queries for cell or Extra Small Screens */
@media (max-width: 480px) {
    
	
	#caption {
        position: absolute;
        bottom: 50%; /* moves caption text higher up on the image */
        left: 50%;
        transform: translateX(-50%);
        font-size: 1.2em;
        padding: 1px;
        width: 95%; /* Explicitly set the width */
		max-width: 95%; /* Use most of the screen width. Increasing makes caption box wider.*/
        z-index: 1000;
    }

		 
   	/* Hide Prayer hands when image is clicked using java*/
     .hide-share-counter {
    display: none;
	}

	
	.hero2 {
        padding: 20px 10px;
        text-align: center;
    }

    .share-form-container {
        margin-top: 60px;
        padding: 10px;
        width: 100%;
    }

    .hero5 {
        margin-top: -15px;
    }
	
	/* adjust for cell  */
	.verse-overlay {
		 /* position: absolute; */
        bottom: 45%; /* moves caption text higher up on the image */
        /* left: 50%; */
        /* transform: translateX(-50%); */
        font-size: 1.3em;
        padding: 1px;
        width: 100%; /* Explicitly set the width */
		max-width: 95%; /* Use most of the screen width. Increasing makes caption box wider.*/
        z-index: 1000;
   }
	
}





/* Tomato font color #ff6347 */
/* Tomato gradient is the current theme color */ /* background-color: rgba(255, 99, 71, 0.9);  */


footer {
            text-align: center;
            width: 100%;
        }