/* General Body Styles */
		.noto-sans-web {
		  font-family: "Noto Sans", sans-serif;
		  font-optical-sizing: auto;
		  font-weight: normal;
		  font-style: normal;
		  font-variation-settings:
			"wdth" 100;
		}

        body {
            font-family: "Noto Sans", Helvetica, Arial, sans-serif;
            color: #000;
            background-color: #fff;
            text-align: center;
            padding: 0; /* Adjust padding for better mobile responsiveness */
            line-height: 1.6;
            margin: 0;
        }

        /* Container for Main Content */
        .container {
            display: block;
            max-width: 1200px; /* Increased max-width for better content flow */
            margin: 0px auto; /* Centered with top/bottom margin */
            padding: 40px;
            /*background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);*/
            text-align: left; /* Align text left within the container */
        }
		
		iframe {
			border: none;
			outline: none;
			height: 900px;
			width: 100%;
		}
		
		/* The hero image */
		.hero-image {
		  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
		  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("hero.jpg");

		  /* Set a specific height */
		  height: 400px;

		  /* Position and center the image to scale nicely on all screens */
		  background-position: center;
		  background-repeat: no-repeat;
		  background-size: cover;
		  position: relative;
		}

		/* Place text in the middle of the image */
		.hero-text {
		  text-align: center;
		  position: absolute;
		  top: 50%;
		  left: 50%;
		  transform: translate(-50%, -60%);
		  text-shadow: black 1px 1px;
		}
		
		.hero-text h1 {
			color: #fff;
			text-align: center;
			line-height:2.7rem;
		}
		
		.hero-text p {
			color: #fff;
			font-size: 26px;
		}
		
		header {
			top: 0;
			height:50px;
			background: #fff;
			padding: 25px 0;
			box-shadow: 0 1px 4px #00000026;
		}
		
		
		
		footer {
			bottom: 0;
			background: whitesmoke;
			/* position: fixed; */
			/* width: 100%; */
		}
		
		.footerContainer {
			max-width: 1200px; /* Increased max-width for better content flow */
            margin: 0px auto; /* Centered with top/bottom margin */
            padding: 40px;
			text-align: left;
		}
		
		.copyright {
			margin-top: 10px;
			width: 100%;
			border-top: 1px solid #d2d6db;
		}
		
		.copyright p {
			font-size: 0.8rem;
			text-align: left;
		}

        h2 {
            font-size: 26px;
            color: #062766;
            margin-top: 30px;
            margin-bottom: 15px;
        }

        h3 {
            font-size: 22px;
            color: #062766;
            margin-top: 25px;
            margin-bottom: 10px;
        }

        /* Paragraph Styles */
        p {
            font-size: 18px;
            margin-bottom: 15px;
            color: #000;
        }

        /* Link Styles */
        a {
            color: #0f62fe; /* A more common blue for links */
            text-decoration: none;
            font-weight: bold;
        }

        a:hover {
            color: #0056b3;
            text-decoration: underline; /* Add underline on hover for clarity */
        }

        /* Logo Styles */
        .logo {
            max-width: 200px;
            height: auto;
            margin-bottom: 20px;
            display: block; /* Make logo a block element to center it */
            margin-left: auto;
            margin-right: auto;
        }

        /* Social Media Links */
        .social-links {
            margin-top: 25px;
            text-align: center;
			padding: 15px 10px 10px 10px;
			background: var(--gray-100);
			max-width: 400px;
			display: block; /* Make logo a block element to center it */
            margin-left: auto;
            margin-right: auto;
			border-radius: 8px;
        }

        .social-links a {
            display: inline-block;
            margin: 0 15px;
            font-size: 18px;
            color: #555; /* Default social link color */
        }

        .social-links a:hover {
            color: #007bff; /* Hover color for social links */
        }
		
		img.social {
			height: 30px;
		}

        /* Responsive adjustments */
        @media (max-width: 768px) {
            h2 {
                font-size: 22px;
            }
			
			p {
				font-size: 16px;
			}
			
            .container {
                margin: 20px auto;
                padding: 30px;
            }
			
			img.social {
				height: 25px;
			}
			
			.hero-text h1 {
				color: #fff;
				text-align: center;
				line-height:2.3rem;
			}
			
			.hero-text {
			  text-align: center;
			  position: absolute;
			  top: 50%;
			  left: 50%;
			  transform: translate(-50%, -60%);
			  text-shadow: black 1px 1px;
			}
			
			.footerContainer {
				padding: 20px 30px;
			}
			
			.copyright p {
				font-size: 0.7rem;
			}
        }

        @media (max-width: 480px) {
            h2 {
                font-size: 20px;
            }
			
			p {
				font-size: 15px;
			}
			
            .container {
                margin: 20px auto;
                padding: 20px;
            }
			
			img.social {
				height: 22px;
			}
			
			.hero-text h1 {
				color: #fff;
				text-align: center;
				line-height:2.1rem;
			}
			
			.footerContainer {
				padding: 20px;
			}
			
			.copyright p {
				font-size: 0.6rem;
			}
        }