@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
  @import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@600&display=swap');
/* General styles */

/* Fonts */

/* Background */
body {
    background: linear-gradient(to right, #3c92a7, #a1dde2 , #3c92a7);
	justify-content: center;
  }
  
body {
  font-family: 'Raleway', sans-serif;
  text-align: center;
}



  
  
  /* header {
	color: #fff;

  } */
  
  h1.about-us {
	margin-top: 30px;
	font-size: 50px;
	font-weight: bolder;
	margin-bottom: 0px;
  }
  
  main {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	padding: 20px;
  }
  

   .team-member {
	position: relative;
	width: 300px;
	height: 350px;
	margin: 40px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0,0,0,0.3);
  }
  
  .team-member img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
  }
  
  .team-member:hover img {
	transform: scale(1.3);
  }
  
  .team-member h2 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 10px;
	margin: 0;
	color: white;
	background-color: rgba(7, 42, 48, 0.81);
	font-size: 1.5rem;
	text-align: center;
	transition: bottom 0.5s ease;
  }
  
  .team-member:hover h2 {
	bottom: -50px;
  }
  
  .team-member ul {
	position: absolute;
	bottom: -100%;
	left: 0;
	width: 100%;
	padding: 10px;
	margin: 0;
	color: white;
	background-color: rgba(7, 42, 48, 0.859);
	list-style: none;
	text-align: center;
	transition: bottom 0.5s ease;
  }
  
  .team-member:hover ul {
	bottom: 0;
  }
  
  .team-member li {
	margin-bottom: 10px;
  }
  
  .team-member .social-links {
	display: inline-block;
	margin: 0 5px;
  }
  
  .team-member .social-links a {
	color: white;
	font-size: 1.5rem;
	transition: color 0.5s ease;
  }
  
  .team-member .social-links a:hover {
	color: #0077b5;
  }
  


  /* Header styles */
  
  header {
	border-radius: 10px;
	background: linear-gradient(to bottom, #072b34, #0a484d, #072b34 );
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-left: 20px;
	border-bottom: 2px solid #ccc;
	font-family: 'Alkatra', cursive;
	color: #ffffff;
  }
  
  .logo {
	font-size: 30px;
	font-weight:bolder;
	border-bottom:  solid #ffffff;
	padding-bottom: 3px;
  }
  
.nav-links {
	font-family: 'Montserrat', sans-serif;
	font-weight: bolder;
	display:flex;
	list-style: none;
	margin: 0;
	padding: 0;
  }
  
  .nav-links li {
	
	margin-right: 20px;
	
  }
  
  .nav-links li:last-child {
	margin-right: 10;
	
  }
  
  .nav-links a {
	display:inline-flex;
	padding: 1rem;
	color: #bfc9cc;
	text-decoration: none;
	transition: all 0.5s ease;
  }
  
  .nav-links a:hover {
	background-color: #ffffff;
	color: rgb(19, 31, 45);
  }
     /* Style the dropdown button */
	 .dropbtn {
		display: inline-block;
		color: white;
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
		border: none;
	  }
	  
	  /* Style the dropdown content */
	  .dropdown-content {
		text-align: center;
		display: none;
		position: absolute;
		z-index: 1;
		background: linear-gradient(to top, #3c92a7e6, #08383be3 ); /* Change the background color of the menu to a gradient */
	
		transition: all 0.3s ease-in-out; /* Add a transition effect to the menu */
	  }
	  
	  .dropdown-content a {
		color: rgb(231, 242, 244);
		padding: 12px 16px;
		text-decoration: none;
		display: block;
		font-size: 16px; /* Change the font size of the menu items */
	  }
	  
	  /* Show the dropdown menu on hover */
	  .dropdown:hover .dropdown-content {
		display: block;
	  }
	  
	  /* Change the background color of the dropdown menu links on hover */
	  .dropdown-content a:hover {
		background-color: #b1dee9;
	  }
	  
	  /* Add a hover effect to the dropdown button */
	  .dropbtn:hover {
		background-color: #1abc9c;
	  }
	  
	  /* Responsive styles */
	  @media screen and (max-width: 600px) {
		.dropdown-content {
		  position: relative;
		  background: #f9f9f9;
		  box-shadow: none;
		}
		
		.dropdown-content a {
		  color: #000;
		  font-size: 14px;
		}
		
		.dropdown:hover .dropdown-content {
		  display: block;
		}
	  }
	  
	  .nav-links li:not(:last-child) {
		border-right: 2px solid rgb(225, 239, 243);
		padding-right: 10px;
	  }

	  .prompt {
		position: fixed;
		bottom: 20px;
		right: 20px;
	  }
	  
	  #prompt-button {
		background-color: #fff;
		border: 1px solid #ddd;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
		cursor: pointer;
		transition: all 0.2s ease-in-out; /* Added property */
	  }
	  
	  #prompt-button img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	  }
	
	  #prompt-button:hover {
		transform: scale(1.2); /* Added selector */
	  }