/* gallery.html's css file -> gallery.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 */
}

/* -------------------------------------------- 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 */
}