/* this is the styling for the website */
body {
	margin:0;
	padding:0;
}

/* this is for the header */
.uphead {
  overflow:hidden;
  background:linear-gradient(#000010, #000010, #000010, #000);
  width:100%;
  position:fixed;
  z-index:100;
  opacity:0.9;
}
.uphead a {
  display:inline-block;
  color:#fff;
  padding:14px 16px;
  text-decoration:none;
  font-size:17px;
  font-family:bahnschrift;
  height:50px;
  text-transform:uppercase;
  float:left;
}

/* this is the style for sign in on the menu */
.uphead .dif1  {
  background:#00CCFF; 
  float:right;
  font-size:17px;
  text-align:center;
  font-family:arial rounded mt;
  padding:15px 20px 10px 10px;
  margin-top:5px;
  margin-right:20px;
  border-radius:5px;
  color: #FFFFFF;
  box-shadow: inset 0 0 0 50px transparent;
  transition:1.1s;
}
.uphead .dif1:hover {
  color:#000;
  box-shadow: inset 0 0 0 0 white;
}

/* this is for the search bar styling */
.search-input{
  padding: 10px;
  font-size: 16px;
  color:#fff;
  border-radius: 8px;
  background:none;
  margin-right:-55px;
  width:300px;
  margin-top:-30px;
  border: 2px solid #ccc;
}
.search-button {
  background-color: #f0f0f0;
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  margin-top:-20px;
  transition: background-color 0.5s ease;
  border: 3px solid #ccc;
}
.search-button:hover {
  background-color: #ddd;
}

/* this is the place of the logo */
.active {
  float:left;
}
/* this is the icon that shows in the responsive site */
.uphead .icon {
  display:none;
}

/* this is the dropdown styling */
.uphead .dropdown {
   float:left;
   overflow:hidden;
   transition:0.5s ease;
}
.uphead .dropbtn {
  display:block;
  padding:14px 16px;
  font-size:17px;
  font-family:bahnschrift;
  text-transform:uppercase;
  background:inherit;
  border:none;
  color:#fff;
  outline:none;
  margin:0;
}
.uphead .dropdown-content {
	display:none;
    position:fixed;
    background:linear-gradient(#000010, #000010, #000010, #000);
    min-width:180px;
    z-index:1;
    box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);
    
}
.uphead .dropdown-content a {
	text-align:left;
    color:#ffff;
    float:none;
    padding:14px 16px;
    text-decoration:none;
    display:block;
}

/* this is the hover effect of the header menu */
.uphead a:hover, .dropdown:hover .dropbtn {
  transition:1.0s ease;
  border-bottom:2px dashed #00CCFF;
  color:#00CCFF;
}
.uphead a input:hover {
  background:none;
}
.uphead .dropdown-content a:hover {
    color:#00CCFF;
    transition:1.0s ease;
}
.uphead .dropdown:hover .dropdown-content {
    display:inline-block;
}


/* this is the responsiveness of the header section */
@media screen and (max-width:600px) {
  .uphead a:not(:first-child), .dropdown .dropbtn {
    display:none;
  }
  .uphead a.icon {
    float:right;
    display:block;
  }
}
@media screen and (max-width:600px) {
  .uphead.responsive {position:relative;}

  .uphead.responsive .icon {
    position:absolute;
    right:0;
    top:0;
  }
  .uphead.responsive a {
    float:none;
    display:block;
    text-align:left;
  }
  .uphead.responsive .dropdown {float:none;}

  .uphead.responsive .dropdown-content {position:relative;}

  .uphead.responsive .dropdown .dropbtn {
    display:block;
    width:100%;
    text-align:left;
  }
}



/* this is the css for the slideshow */
*{box-sizing:border-box;}
/* Slideshow container */
.slideshow-container {
  min-width:90%;
  position: relative;
  margin:0;
}

	/* this is the hover effect of all the images */
	.mySlides img:hover {
		box-shadow:2px 2px 10px 0px lightgrey;
		transition:0.5s;
		opacity:0.7;
	}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size:20px;
  padding: 8px 8px;
  position: absolute;
  bottom: 8px;
  width: 90%;
  text-align: center;
}
.text h2 {
	color:#00CCFF;
	font-size:30px;
	font-family:tahoma;
	font-weight:bolder;
}
.text p {
	font-family:ink journal;
	font-size:40px;

}


</* this is for the responsiveness of the the images slideshow */
@media screen and (max-width:600px) {
	.mySlides img {
		height:100px;
	}
}


</* this is for the responsiveness of the the images slideshow */
@media screen and (max-width:600px) {
	.text h2 {
		font-size:10px;
	}
}


/* this is the first infomation on our home page */
.mother1 {
	padding:30px;
	display:flex; 
	flex-wrap:wrap;
	justify-content:space-between; 
	max-width:1300px; 
	margin:auto;
	text-align:justify;

}
.mother1 div {
	width:50%;
	padding:10px;
}
.mother1 .left {
	float:left;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}
.mother1 .right {
	float:right;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}
.mother1 .right img {
	border-radius:30px;
	box-shadow:7px 2px 10px 0px #000;
}
.mother1 .right img:hover {
	box-shadow:10px 2px 10px 0px #000;
	transition:0.5s;
	opacity:0.7;
}
.mother1 h2 {
	color:#000066;
	font-family:tahoma;
	font-weight:bolder;
	font-size:33px;
	margin:0;
}
.mother1 p {
	font-family:maiandra gd;
}


/* this is the styling f the horizontal rule */
hr {
	width:80%;
	border:2px dashed  #283c4e ;
}


/* this is the second infomation on our home page */
.mother2 {
	padding:30px;
	display:flex; 
	flex-wrap:wrap;
	justify-content:space-between; 
	max-width:1300px; 
	margin:auto;

}
.mother2 div {
	width:50%;
	padding:10px;
}
.mother2 .left {
	float:right;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}
.mother2 .right {
	float:left;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}
.mother2 .right img {
	border-radius:30px;
	box-shadow:0px 0px 20px 0px #000;
}
.mother2 .right img:hover {
	box-shadow:10px 2px 10px 0px #000;
	transition:0.5s;
	opacity:0.7;
}
.mother2 h2 {
	color:#000066;
	font-family:tahoma;
	font-weight:bolder;
	font-size:33px;
	margin:0;
	text-align:right;
}
.mother2 p {
	font-family:maiandra gd;
	text-align:justify;
}

/* this is the styling of the meet our teams in the home[age */
.mother {
	padding:30px;
	display:flex; 
	flex-wrap:wrap;
	justify-content:space-between; 
	max-width:1300px; 
	margin:auto;
	text-align:center;

}
.mother div {
	width:50%;
	padding:15px;
}
.mother .left {
	float:right;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
	border:5px double #ddd;
	border-radius:30px;
	margin-right:20px;
}
.mother .right {
	float:left;
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
	border:5px double #ddd;
	border-radius:30px;
}
.mother img {
	border-radius:50%;
	box-shadow:0px 0px 20px 0px #000;
}
.mother img:hover {
	box-shadow:10px 2px 10px 0px #000;
	transition:0.5s;
	opacity:0.7;
}
.mother h2 {
	color:#091E3E;
	font-family:tahoma;
	font-size:30px;
	text-transform:uppercase;
	margin:0;
}
.mother p {
	font-family:maiandra gd;
	text-align:justify;
}
.mother span {
	font-family:calibri;
	color:#06A3DA
}










/** THis styling is for the footer area */
footer {
	background:linear-gradient(#000010, #000010, #000010, #000); 
	color:#fff; 
	padding:40px 20px; 
	font-family:bahnschrift;
}

.foot-1 {
	display:flex; 
	flex-wrap:wrap; 
	justify-content:space-between; 
	max-width:1250px; 
	margin:auto;
}

.foot1 {
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
	text-align:center;
}
.foot1 p {
	text-align:justify;
	padding-right:20px;
}

.foot2 {
	flex:1; 
	min-width:200px; 
	margin-bottom:20px;
	padding-left:20px;
}
.foot2 p {
	text-align:justify;
	cursor:pointer;
}

.foot3 {
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}

.foot3 li a {
	color:#fff;
	text-decoration:none;
}
.foot3 li a:hover {
	color:#005fa3;
	transition:0.5s ease;
}

.foot4 {
	flex:1; 
	min-width:250px; 
	margin-bottom:20px;
}
.foot4 a {
	color:#fff;
}
.foot4 a img:hover {
	border-bottom:2px solid #00CCFF;
	transition:0.5s ease;
}

.foot5 {
	text-align:center; 
	margin-top:30px; 
	border-top:2px solid #00CCFF; 
	padding-top:20px;
}
.foot5 a {
	color:#00CCFF;
}
.foot5 a:hover {
	color:#fff;
	transition:0.5s ease;
}