/* consortium.html's css file -> consortium.css : CSS for the entire webpage */
body {																				/* Basic styles for the entire body */
    font-family:Arial, sans-serif; 													/* Set font-family to Arial or fallback to sans-serif */
    margin:0; 																		/* Remove default margin */
    padding:0; 																		/* Remove default padding */
}

/* -------------------------------------------- Styles for the header section --------------------------------------------*/
header{																				/* Styles for the header section */
    /*position:fixed;*/ 																/* Fix the header position */
	top:0; 																			/* Position it at the top of the viewport */
    /*width: 100%;*/																/* Take the full width of the viewport */
	background-color:rgba(234,67,53,1.0); 											/* Transparent red header background */
    color:#fff; 																	/* Set text color to white */
    padding:12px; 																	/* Add padding around the header */
    text-align:center; 																/* Center-align text */
	left:0; 																		/* Align the left edge to the left side of the viewport */
    right:0; 																		/* Align the right edge to the right side of the viewport */
	z-index:1000; 																	/* Ensure it stays on top of other content */
}
.spacer{																			/* To create red box at background of header */
    height:70px; 																	/* Adjust the height according to your header's height */
	background-color:rgba(234,67,53,1.0);											/* Background color to red */ 
}
.header-content{																	/* Styles for the header content */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:space-between; 													/* Distribute content evenly */
    align-items:center; 															/* Center-align vertically */
}
.logo img{																			/* Styles for the logo */
    max-width:100px; 																/* Set maximum width for the logo */
    height:auto; 																	/* Maintain aspect ratio */
}
.navigation ul{																		/* Styles for the navigation links */
    list-style:none; 																/* Remove default list styles */
    padding:0; 																		/* Remove default padding */
    margin:0; 																		/* Remove default margin */
}
.navigation li{
    display:inline; 																/* Display list items inline */
    margin-right:15px; 																/* Adjust spacing between links */
}
.navigation a{
    color:#fff; 																	/* Set link text color to white */
    text-decoration:none; 															/* Remove default underline */
	transition:color 0.3s; 															/* Smooth transition for color change */
    font-weight:500; 																/* Adjust font weight to make text slightly thicker */
}
.navigation a:hover{																/* Change color on hover */
    color:yellow; 																	/* Change text color to yellow on hover */
}
/* ------- Drop down style ------- */
.navigation-dropdown{																/* Set the positioning for the navigation dropdown */
    position:relative; 																/* Set the position to relative */
    display:inline-block; 															/* Display as an inline block element */
}
.navigation-dropdown-content{														/* Styles for the dropdown content */
    display:none; 																	/* Initially hide the dropdown content */
    position:absolute; 																/* Position the dropdown content */
    top:100%; 																		/* Position the dropdown below the list item */
    background-color:rgba(234,67,53,1.0); 											/* Background color for the dropdown */
    /*min-width:160px;*/ 																/* Minimum width of the dropdown */
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2); 									/* Apply shadow effect */
    z-index:1; 																		/* Set the stacking order */
    left:0; 																		/* Align the dropdown with the left edge of the list item */
	width:auto; 																	/* Adjust the width to fit the content */
}
.navigation-dropdown:hover .navigation-dropdown-content{							/* Show dropdown content on hover */
    display:block; 																	/* Display the dropdown content on hover */
}
.navigation-dropdown-content a{														/* Styles for the links inside the dropdown */
    display:inline-block; 															/* Display dropdown links as block elements in one single line*/
    color:white; 																	/* Set text color */
    padding:10px 17px; 																/*  top-bottom and left-right -> Add padding */
    text-decoration:none; 															/* Remove default underline */
    text-align:center; 																/* Align text to the left */
    width:auto; 																	/* Make links take up full width within the dropdown */
    box-sizing:border-box; 															/* Include padding in the width */
	white-space:nowrap; 															/* Prevent line breaks */
	vertical-align:middle; 															/* Adjusts vertical alignment */
	font-family:Arial, sans-serif; 													/* Set the font family */
}
.navigation-dropdown-content a:hover{												/* Styles for the hover state of dropdown links */
    background-color:rgba(234,67,53,1.0); 											/* Change background color on hover */
}

/* ---------------------------------------------------- Main Contents ---------------------------------------------------- */

.peoples{																			/* Styles for the container of the peoples section */
    text-align:center; 																/* Center-align text within the container */
    margin-bottom:20px; 															/* Add space at the bottom of the container */
}
.peoples h2{																		/* Styles for the heading of the peoples section */
    font-size:24px; 																/* Set font size for the heading */
	text-shadow:0 0 2px rgba(0,0,0,0.5), -1px -1px 2px rgba(0,0,0,0.5);				/* Add shadow to text */
}
.peoples .people-links{																/* Styles for the container of people linka */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:center; 														/* Center-align items horizontally */
    align-items:center; 															/* Center-align items vertically */
}
.peoples .people-links .people{														/* Styles for each individual people */
    margin:5px 20px; 																/* Add margin around each people - top and bottom : 5px , left and right 20px*/
	text-align:center; 																/* Center-align text within the people section */
}
.peoples .people-links .people p{													/* Styles for the paragraph (name) under each people image */
    margin-top:10px; 																/* Add space at the top of the paragraph */
    padding:10px;																	/* Set padding to names */
	font-weight:bold; 																/* Set font weight of the paragraph text */
	/* box-shadow: h-offset v-offset blur color; */
	/*text-shadow:0 0 2px rgba(0,0,0,0.5); 											/* Add shadow to text */
}
.peoples .people-links .people .people-image{										/* Styles for the images of the peoples */
    width:256px; 																	/* Set width of the people image */
    height:256px; 																	/* Set height of the people image */
    border-radius:5%; 																/* Make the image circular */
    object-fit:cover; 																/* Maintain aspect ratio and cover the container */
    border:2px solid #fff; 															/* Add a white border around the image */
	/* box-shadow: h-offset v-offset blur spread color; */
	box-shadow:0 0 10px 0px rgba(0,0,0,0.5); 										/* Add shadow to images */
}

/* -------------------------------------------- Styles for the footer section -------------------------------------------- */
footer{
    background-color:#000; 															/* Set background color to dark gray */
    color:#fff; 																	/* Set text color to white */
    padding:2px; 																	/* Add padding around the footer */
    text-align:center; 																/* Center-align text */
    position:bottom;/*fixed;*/ 																/* Fix the footer to the bottom of the viewport */
    bottom:0; 																		/* Align the footer to the bottom */
    height:fit-content; 															/* Set height to fit the content */
	line-height:1; 																	/* Adjust line height to remove extra space */
	/*width:100%;*/ 																	/* Set the width of the footer to 100% of the viewport */
	left:0; 																		/* Align the left edge to the left side of the viewport */
    right:0; 																		/* Align the right edge to the right side of the viewport */
}
.small-text{
	font-size:10px; 																/* Adjust font size as needed */
}
.small-text strong{
    font-weight:bold;																/* CSS for making the specified text bold */
}