body {
    margin: 0;
    padding: 0;
	font-family: sans-serif;
	
}

.hero-section {
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 50px;
    color: white; /* Example text color for contrast */
    
    /* The core of the solution: multiple backgrounds */
    background-image: 
        linear-gradient(to top, #F5EBDD 0%, #FAE199 75%, #f8d56d 100%); /* Beige gradient overlay (color stops adjusted) */
    
    
    
    
	/*background-size: 400px auto;*/
    
    /* Prevent the backgrounds from repeating */
    background-repeat: no-repeat; 
	padding-bottom:75px;

    
}

/* Optional: Make images responsive and prevent distortion */
img {
    max-width: 100%; 
    height: auto;
}

/**************GA PIC*******************/
#georgia-pic{
	position: absolute;
	top:60px;
	left:100px;
	
	width: 175px;  /* Sets the width to 300 pixels */
	height: auto;
	
	border: 1px solid black;
    border-radius: 10px;
}
/**************GA PIC*******************/
/**************Home Link1***************/

.rectangle-link {
    /* Set the background and text colors */
    background-color: #3ED9D2;
    color: black;
	font-weight:bold;

    /* Make it a rectangular block and add spacing */
    display: inline-block;
    padding: 10px 20px; /* Adjust padding for desired size */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove the default underline */

    /* Optional: Add a border or rounded corners */
    border: 1px solid black;
    border-radius: 5px;
	transform: translate(-50%, -50%) rotate(-12deg);
	position: absolute;
	top:185px;
	left:190px;
}

/* Optional: Add hover effect for better user experience */
.rectangle-link:hover {
    background-color: #90c7e3; /* A slightly darker blue on hover */
}
/**************Home Link1***************/
/**************Home Link2***************/
#homelink2{
	  /* Set the background and text colors */
    background-color: #FFD447;
    color: black;

    /* Make it a rectangular block and add spacing */
    display: inline-block;
    padding: 2px 4px; /* Adjust padding for desired size */
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove the default underline */

    /* Optional: Add a border or rounded corners */
    border: 1px solid black;
    border-radius: 5px;
	transform: translate(-50%, -50%) rotate(-12deg);
	position: absolute;
	top:188px;
	left:250px;
}
/**************Home Link2***************/

/**************NAV BAR A****************/
.nav-list {
    list-style-type: none; /* Removes default bullet points */
    margin: 0;
    padding: 0;
    overflow: hidden;
    display: flex; /* Arranges list items horizontally */
	position: absolute;
	top:60px;
	left:500px;
}

.nav-list li a {
    display: block; /* Makes the entire link area clickable and allows padding */
    padding: 10px 20px; /* Creates the rectangular shape */
    background-color: #1E6091; /* Dark blue background color */
    color: white; /* White text color */
    text-align: center; /* Centers the text */
    text-decoration: none; /* Removes default underlines */
   /* font-weight: bold;*/ /* Makes the text bold */
    /* Optional: adds a slight margin between buttons */
    margin: 5px;
    border-radius: 5px; /* Optional: rounds the corners of the rectangles */
}

#donate {
	position:relative;
	left:10px;
    background-color: #3ED9D2; /* Light blue background for the rectangles */
	padding: 20px 40px; /* Creates the 'rectangle' shape and provides internal spacing */
	color: darkblue; /* Dark blue text color */
	font-weight: bold;
	font-size: 1.5rem;
    
}

.nav-list li a:hover {
    background-color: #0000CD; /* A slightly lighter blue on hover for interactivity */
}
/**************NAV BAR A****************/

/**************NAV BAR B****************/
.nav-listb {
    /* Removes default list bullets and padding */
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center; /* Centers the list within its container */
	position: absolute;
	top:60px;
	left:1450px;
}

.nav-listb li {
    /* Arranges list items horizontally */
    display: inline-block;
    margin: 10px; /* Adds space between the rectangle boxes */
}

.nav-listb li a {
    /* Styles the hyperlinks as rectangular blocks */
    display: block;
    padding: 20px 40px; /* Creates the 'rectangle' shape and provides internal spacing */
    background-color: #3ED9D2; /* Light blue background for the rectangles */
    color: darkblue; /* Dark blue text color */
    text-decoration: none; /* Removes default hyperlink underline */
    border: 1px solid blue; /* Optional: adds a blue border */
    border-radius: 5px; /* Optional: rounds the corners */
	font-weight: bold
}

.nav-listb li a:hover {
    /* Optional: style for when a user mouses over the link */
    background-color: rgb(144, 202, 249); /* A slightly different shade for hover effect */
}
/**************NAV BAR B****************/


/**********************Custom-Content-Area*********/
.custom-content-area {
  display: flex;             /* Align children side-by-side */
  
  max-width: 1375px;        /* Limits width of the area */
  
  gap: 30px;                /* Adds space between links and paragraphs */
  column-gap: 60px;
  padding: 0 20px;          /* Adds internal padding for mobile views */
  margin-left:120px;
  margin-top:300px;
  
  
  
  
}

.sidebar-links {
  flex: 1;                  /* Takes up 1 part of the flex container */
  min-width: 200px;         /* Ensures links don't get too squashed */
  font-weight:bold;
  color: red;
  font-size: 1.1rem;
  
}

.sidebar-links ul {
  list-style: none;         /* Removes default bullets */
  padding: 0;
}

.sidebar-links li {
  margin-bottom: 25px;      /* Spacing between links */
}

.sidebar-links ul li a {
  text-decoration: none;
  color: #1E6091;
  position: relative;
  padding-bottom: 5px;
  
}
.sidebar-links ul li a:hover {
  text-decoration: none;
  color: #886300;
  position: relative;
  padding-bottom: 5px;
  
}

.sidebar-links ul li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;      /* Thickness of the border */
  width: 315px;       /* Desired length of the border */
  background: #886300;
	
}

.main-paragraphs {
  flex: 3;                  /* Paragraphs take up 3x more space than the links */
  
}
h1{
	color:#1E6091;
	font-size:3rem;
	font-weight:bold;
}
h2{
	color:#AB7F00;
}
p{
	color:#1E6091;
	font-weight:bold;
	font-size:1.1rem;
}
.highlight{
	color:#866300;
}

/**********************Custom-Content-Area*********/





