/* homepage.html's css file -> homepage.css : CSS for the entire webpage 
	To run test php server run / execute `$php -S localhost:8000 -t ./`
*/
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,0.7); 											/* Transparent red header background */
    color:#fff; 																	/* Set text color to white */
    padding:20px; 																	/* 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 */
}
/* ----------- CSS for the slideshow ----------------- */
.slideshow-container{																/*  Container styles for the slideshow */
	width:100%;																		/* Set width to 100% of screen */
    /*max-width: 1000px;*/ 															/* Set maximum width for the slideshow */
	height:720px; 																	/* Set the height of the images */
	position:relative; 																/* Set position to relative for positioning children */
    margin:auto; 																	/* Center the container horizontally */
    overflow:hidden; 																/* Hide overflow to prevent images from spilling out */
	/*object-fit: cover;*/ 															/* Maintain aspect ratio and cover the container */
}
.homepageSlides{																	/* Hide slides by default */
	position:relative; 																/* Set position to relative for absolute positioning */
    display:none; 																	/* Hide the slides */
	width:auto; 																	/* Allow the width to adjust */
    height:720px; 																	/* Set the fixed height for the images */
    /*object-fit:cover;*/ 																/* Maintain aspect ratio and cover the container */
}
/* -----------  CSS for the Company Logo over slideshow ----------- */
.slideshow-container-logo-overlay{													/* Style the company logo overlay */
    position:absolute; 																/* Set position to absolute for overlay */
    top:25px; 																		/* Adjust top position */
    left:25px; 																		/* Adjust left position */
    max-width:200px; 																/* Set maximum width for the logo */
    z-index:10; 																	/* Set a higher z-index to appear above the image */
}
/* ----------- CSS for the gallery button over slideshow ----------- */
.gallery-button {
    position:absolute; 																/* Set position to absolute for overlay */
    top:30%;																		/* Adjust top position or can calculate like - `calc(50% - 25px); */
    /*right:50%;*/ 																		/* Adjust right position */
    left:50%; 																		/* Set left position to 50% */
    transform:translate(-50%,-50%); 												/* Center horizontally */
	z-index:10; 																	/* Ensure it's above the slideshow */
}
.gallery-button a{																	/* Styles for the gallery button link */
    display:flex; 																	/* Use flexbox for layout */
    align-items:center; 															/* Align items vertically in the center */
    text-decoration:none; 															/* Remove default link underline */
    background-color:rgba(234,67,53,0.4); 											/* Transparent red background */
    color:black; 																	/* Text color */
    padding:10px 15px; 																/* Padding around the button - margin: top-bottom left-right; */
    border-radius:5px; 																/* Rounded corners */
    transition:background-color 0.5s ease; 											/* Smooth transition for background color change */
}
.gallery-button a:hover{
    background-color:rgba(234,67,53,0.9); 											/* Darker red on hover */
}
.homepageDot{																		/* Styles for the navigation dots */
    height:15px; 																	/* Set height of the dot */
    width:15px; 																	/* Set width of the dot */
    margin:0 2px; 																	/* Set margin around the dots - margin: top-bottom left-right; */
	background-color:#bbb; 															/* Set default background color for the dots */
    border-radius:50%; 																/* Make dots circular */
    display:inline-block; 															/* Display dots in a line */
    transition:background-color 1.5s ease; 											/* Smooth transition for color change */
}
.homepageDotActive{																	/* Active dot styles */
    background-color:#717171; 														/* Change background color for active dot */
}
/* ------- Styles for the black transparent box over bottom part of slideshow ------- */
.slideshow-black-text-box{
    position:absolute; 																/* Positioning the black box absolutely */
    background-color:rgba(0,0,0,0.5); 												/* Black color with transparency */
    width:100%; 																	/* Full width of the slideshow container */
    height:40%; 																	/* 40% of the slideshow container's height */
    top:80%; 																		/* Positioned at 80% from the top of the slideshow container */
    left:0; 																		/* Aligned to the left edge */
    display:flex; 																	/* Using flexbox for layout */
    justify-content:center; 														/* Centering content horizontally */
    align-items:center; 															/* Centering content vertically */
    box-sizing:border-box; 															/* Includes padding and border in the total width and height */
    padding:20px; 																	/* Padding within the black box */
    /*text-align:center;*/ 																/* Center-aligning text */
    color:white; 																	/* Text color */
}
.slideshow-black-text-box p{														/* Styles for paragraphs within the black box */
    font-family:Arial, sans-serif; 													/* Font family for text */
    text-align:center; 																/* Center-aligning text */
    padding:20px; 																	/* Padding within paragraphs */
    color:white; 																	/* Text color */
}

/* ------------------------------------------------- Founder Images ------------------------------------------------------ */
.founders{																			/* Styles for the container of the founders section */
    text-align:center; 																/* Center-align text within the container */
    margin-bottom:20px; 															/* Add space at the bottom of the container */
}
.founders h2{																		/* Styles for the heading of the founders section */
    font-size:24px; 																/* Set font size for the heading */
}
.founder-links{																		/* Styles for the container of founder linka */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:center; 														/* Center-align items horizontally */
    align-items:center; 															/* Center-align items vertically */
}
.founder{																			/* Styles for each individual founder */
    margin:5px 20px; 																/* Add margin around each founder - top and bottom : 5px , left and right 20px*/
	text-align:center; 																/* Center-align text within the founder section */
}
.founder-image{																		/* Styles for the images of the founders */
    width:100px; 																	/* Set width of the founder image */
    height:100px; 																	/* Set height of the founder image */
    border-radius:50%; 																/* 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 */
}
.founder p{																			/* Styles for the paragraph (name) under each founder image */
    margin-top:5px; 																/* Add space at the top of the paragraph */
    font-weight:bold; 																/* Set font weight of the paragraph text */
}

/* ------------------------------------------------------ Team Image ------------------------------------------------------*/

.innovators{																		/* Styles for the container of the innovators section */
    text-align:center; 																/* Center-align text within the container */
    margin-bottom:20px; 															/* Add space at the bottom of the container */
}
.innovators h2{																		/* Styles for the heading of the innovators section */
    font-size:20px; 																/* Set font size for the heading */
}
.innovators a{																		/* Change for links */
	color:purple; 																	/* Set default to purple */
}
.innovators a:visited{																/* Change color on visited */
	color:rgba(234,67,53,1.0);														/* Change color once visited to red */
}
.innovators a:hover{																/* Change style on hover for links */
	color:rgba(251,188,5,1.0);														/* Change color on hover */
}
.innovators .manager-links{															/* Styles for the container of managers links */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:center; 														/* Center-align items horizontally */
    align-items:center; 															/* Center-align items vertically */
}
.innovators .manager-links .manager{												/* Styles for each individual manager */
    margin:5px 20px; 																/* Add margin around each manager - top and bottom : 5px , left and right 20px*/
	text-align:center; 																/* Center-align text within the manager section */
}
.innovators .manager-links .manager .manager-image{									/* Styles for the images of the manager */
    width:100px; 																	/* Set width of the manager image */
    height:100px; 																	/* Set height of the manager image */
    border-radius:50%; 																/* 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 */
}
.innovators .manager-links .manager .manager-image p{								/* Styles for the paragraph (name) under each managers image */
    margin:3px; 																	/* Add space at the top of the paragraph */
    font-weight:bold; 																/* Set font weight of the paragraph text */
	color:rgba(234, 67, 53,1.0);
}
.innovators .manager-links .manager .manager-image .sub-heading{					/* Sub-Heading for managers */
	margin:2px; 																	/* Add space to the paragraph */
	font-weight:normal;																/* Set font weight */
}
.innovators .innovator-links{														/* Styles for the container of innovators links */
    display:flex; 																	/* Use flexbox for layout */
    justify-content:center; 														/* Center-align items horizontally */
    align-items:center; 															/* Center-align items vertically */
}
.innovators .innovator-links .innovator{											/* Styles for each individual innovator */
    margin:5px 20px; 																/* Add margin around each innovator - top and bottom : 5px , left and right 20px*/
	text-align:center; 																/* Center-align text within the innovator section */
}
.innovators .innovator-links .innovator .innovator-image{							/* Styles for the images of the innovator */
    width:100px; 																	/* Set width of the innovator image */
    height:100px; 																	/* Set height of the innovator image */
    border-radius:50%; 																/* 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 */
}
.innovators .innovator-links .innovator .innovator-image p{							/* Styles for the paragraph (name) under each innovator image */
    margin:3px; 																	/* Add space at the top of the paragraph */
    font-weight:bold; 																/* Set font weight of the paragraph text */
}
.innovators .innovator-links .innovator .innovator-image p:hover{					/* Change style on hover */
	color:rgba(251,188,5,1.0);														/* Change color on hover */
}
.innovators .innovator-links .innovator .innovator-image .sub-heading{				/* Sub-Heading for innovator */
	margin:2px; 																	/* Add space to the paragraph */
	font-weight:normal;																/* Set font weight */
}


/* -------------------------------------------- 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; 																/* 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:15px; 																/* Adjust font size as needed */
}
.small-text strong{
    font-weight:bold;																/* CSS for making the specified text bold */
}