/* Base Styles */
body{
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #f7e4c8;
	color: #333;
	font-size: 18px;
}

/*header and footer ids*/
#main-header {
    background-color: #34ade0;
    color: black;
    padding: 1rem 0;

    
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px; /* This adds space between your icons and the title */
}

#main-footer {
    background-color: #34ade0;
    color: black;
    text-align: center;
    padding: 1rem 0;
}

/* images in the header */
.header-icon {
    width: 80px;  
    height: 50px;
}

/*remove default header margin */
#main-header h1 {
    margin: 0;
}


/* main content and layout using flex */
.content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 2rem;
	gap: 2rem;
}

/* sections with class selector */
.intro, .benefits {
	max-width: 600px;
	text-align: center;
}

.images {
	display: flex;
	gap: 1.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.images img {
	width: 300px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgba(0,0,0.1);
}

/* Lists styled with class */
.benefits ul {
	list-style-type: square;
	padding-left: 1.5rem;
	text-align: left;
}


/*Nav Bar Style */
.topnav {
  background-color: #0a73c9; 
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); 
}

/*Style for navbar links */
.topnav a {
  float: left; 
  color: white; 
  text-align: center;
  padding: 14px 16px;
  text-decoration: none; 
  font-size: 17px;
}

/*style for hovered navbar links */
.topnav a:hover {
  background-color: #ddd; 
  color: black;
}

/*Style for active links */
.topnav a.active {
  background-color: #F0AE1F; 
  color: #333;
}


/* Headers for paragraphs */
h2 {
  background-color: #0a73c9; 
  color: white;             
  padding: 8px 12px;       
  font-size: 1.25rem;      
  border-radius: 20px;      
  display: inline-block;    
}







/* alternating paragraphs using flex*/

.alternating-row {
  display: flex;           
  align-items: center;    
  gap: 2rem;             
  margin-bottom: 2rem;   
  padding: 1rem;          
  background-color: #f0f4f8; 
  border-radius: 8px;     
}

.text-column {
  flex: 1;  
}

.image-column {
  flex: 1; 
}


.image-column img {
  width: 100%;
  height: auto;
  border-radius: 8px; 
}