@charset "utf-8";
body {
        margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color:#ACD0B6;
    background-image: url(/project/images/banner-image.jpeg);
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    }
        .sticky-header {
            position: sticky;
            top: 0;
            background-color: #ACD0B6;
            box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            border-bottom: 2px solid #333; /* Added bottom border */
        }

        .sticky-header h1 {
            margin: 0;
        }

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

        nav li {
            display: inline;
            margin-right: 20px;
        }

        nav a {
            text-decoration: none;
            color: #333;
            font-weight: bold;
        }

        .box-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            max-width: 1280px; /* Adjust as needed */
            margin: 20px auto;
        }

        .box {
            width: 200px;
            height: 150px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            padding: 20px;
            margin: 10px;
        }
        
         .about-box {
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            padding: 20px;
            margin: 10px;
        }

        h1 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        p {
            font-size: 14px;
        }
		
		 footer {
		    
            background-color: #ACD0B6;
	   		border-top: 1px solid black; 
    		box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.1);
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            color: black; /* Change as needed */
             text-align: center;
             padding: 10px 0; /* Adjust padding as needed */
 		
        }
        
        
        .box-pages {
            width: 200px;
            height: 480px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            text-align: left;
            padding: 20px;
            margin: 10px;
        }
        
        .box-resources {
            width: 200px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
            text-align: center;
            padding: 20px;
            margin: 10px;
            
        }

  

        p {
            font-size: 14px;
        }
		
		 

   


/* Podcast Box */
.podcast-box {
    width: 225px;
            height: 225px;
            background-color: #fff;
            border: 1px solid #333; /* Added border */
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Added box shadow */
            text-align: center;
            padding: 20px;
            margin: 10px;
}
.podcast-box h2 {
    margin-top: 0;
}
.podcast-box p {
    margin: 10px 0;
}
.box-newsletter {
            width: 225px;
            height: 200px;
            background-color: #fff;
            border: 1px solid #333; /* Added border */
            border-radius: 10px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Added box shadow */
            text-align: center;
            padding: 20px;
            margin: 10px;
        }

        h1 {
            font-size: 18px;
            margin-bottom: 10px;
        }

        p {
            font-size: 14px;
        }

#wrapper {
	width: 960px;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-right: 20px;
	padding-left: 20px;
	margin-right: auto;
	margin-left: auto;
	background-color: brown;
	border: thick;
	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); /* Added box shadow */
	border-radius: 10px;
	text-align: center;
     
            
	
}
a:link {
	color:black;
	text-decoration: none;
}

a:visited {
	color: grey;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: sage;
}