@charset "utf-8";
/* CSS Document */

/* Header Aninmate */
.header {
  height: 100px;
}

svg text {
  letter-spacing: 10px;
  stroke: #0b7e67; /* Start with green outline */
  font-size: 80px;
  font-weight: 700;
  stroke-width: 3;
  fill: transparent; /* Initially transparent text fill */
  animation: textAnimate 5s forwards; /* Play animation once and keep final state */
}

@keyframes textAnimate {
  0% {
    stroke-dasharray: 0 50%; /* Start drawing the outline */
    stroke-dashoffset: 20%;
    fill: rgba(255, 255, 255, 0); /* Transparent text at the start */
    stroke: #0b7e67; /* Green outline at the start */
  }
  50% {
    fill: rgba(0, 0, 0, 0); /* Keep text transparent halfway through */
    stroke: #0b7e67; /* Keep the outline green halfway through */
  }
  100% {
    stroke-dasharray: 50% 0; /* Complete the outline drawing */
    stroke-dashoffset: -20%;
    stroke: black; /* Transition to black outline */
    fill: rgb(0, 0, 0); /* Text fills to black at the end */
  }
} 



.GreenButton {
	box-shadow: 0px 10px 14px -7px #3e7327;
	background:linear-gradient(to bottom, #77b55a 5%, #72b352 100%);
	background-color:#77b55a;
	border-radius:7px;
	border:1px solid #4b8f29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:Arial;
	font-size:17px;
	font-weight:bold;
	padding:9px 27px;
	text-decoration:none;
	text-shadow:0px 1px 0px #5b8a3c;
}
.GreenButton:hover {
	background:linear-gradient(to bottom, #72b352 5%, #77b55a 100%);
	background-color:#72b352;
}
.GreenButton:active {
	position:relative;
	top:1px;
}


  
  
/* Breakpoint for one column */
@media (max-width: 600px) {
 svg text {
  font-size: 53px;
    font-weight: 500;
   stroke-width: 2;
}
}
/* End Header Animate */
  
  
  
  
  
  h1 {
    color: #1e56a1;
text-shadow: 5px 5px 10px #cfcfcf;
  } 
  
 
/* Handles Fade slide up effect */
.fade-slide-right {
  opacity: 0; /* Initially hidden */
  transform: translateX(-100px); /* Initially moved down by 20px */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Animation timing */
}

.fade-slide-right.visible {
  opacity: 1; /* Fully visible */
  transform: translateX(0); /* Moves back to the original position */
}
  
/* End Fade slide up effect */

/* Handles Fade slide up effect */
.fade-slide-up {
  opacity: 0; /* Initially hidden */
  transform: translateY(100px); /* Initially moved down by 20px */
  transition: opacity 0.6s ease, transform 0.6s ease; /* Animation timing */
}

.fade-slide-up.visible {
  opacity: 1; /* Fully visible */
  transform: translateY(0); /* Moves back to the original position */
}
  
/* End Fade slide up effect */
  

  
/* Top Feature */
  
.top-feature {
margin-top:-55px;
    border-radius: 28px;
    width: 100%;
    /*padding: 30px;*/
    box-shadow: 0 39px 79px rgba(0, 0, 0, .03), 0 7px 10px rgba(0, 0, 0, .06), 0 46px 42px rgba(0, 0, 0, .08), inset 0 0 0 1px rgba(0, 0, 0, .06);
}

.fullwidth {
    padding: 20px;
    text-align: left;
    border-radius: 14px;
}	

	.akita-container {
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding: 1em 0.5em;
    position: relative;
}
		.akita-light-grey-text {
    color:dimgrey;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}
		
		.akita-features-item-title {
    color: #000;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.2;
}
		.akita-icon-wrap {
    background-color: #fff;
    border: 1px solid #eaedee;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    width: 70px;
    min-width: 70px;
    height: 70px;
    display: flex;
    position: relative;
}
		
		.akita-features-02-link {
    grid-column-gap: 6px;
    grid-row-gap: 6px;
    background-color: #fff;
    border-radius: 14px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 24px;
    text-decoration: none;
    transition: background-color .4s;
    display: flex;
}
  
  
  
  

  
  
  
  
  
/* End Top Feature */
  
  
  
  
  
  
  
  
  
  
  
  
/* Stlye for Cards*/
  .header-sub-text{  
   color:dimgrey;
    font-size: 25px;
    font-weight: 400;
    line-height: 1.3;
  margin-bottom:14px;
  }
  
.contactbox{
	background-color: white; 
		z-index: 0;
    border: .0625rem solid #dcdcdc;
    border-radius: 1.875rem;
    width: 100%;
    padding: 80px 2px 10px;
    position: relative;
  	width:350px;
  	height:235px; /* Change box height if needed should this size should be fine */
	}

	.gridcontainer{
	grid-column-gap: 1.875rem;
    grid-row-gap: 1.875rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    margin-top: 2.5rem;
	}
	
	.teamcard{
	text-align: center;
    flex-direction: column;
    align-items: center;
    display: flex;
	}
	
	.teamphoto
	{
		position: relative;
		margin-bottom:-5.2rem;
		z-index: 1;
		display: flex;
		
			
	}
	.teamphoto img
	{
		border-radius: 100%;
		border: 0.35rem solid #dcdcdc; /*Also change in Javascript 80 change mouseover color edit row 58*/
		background-color: white;
	}
	
	.cardtext
	{
      	text-decoration: none !important;
		position: relative;
		margin-top: 0;
  		margin-bottom: .3125rem;
    	font-weight: 500;
    	line-height: 1.3;
		color:#1e56a1;
		display:block;
		
	}

.school a:link,
.school a:active {
    text-decoration: none !important;
    font-size: 17px;
    font-weight: bold;
    color: #1e56a1; /* Original blue color */
 
}
.school a {
    color: #1e56a1; /* Original color */
    transition: color 0.3s; /* Add a transition for smoothness */
}

.school a:visited {
    color: #1e56a1; /* Keep visited link color */
}

.school a:hover {
    color: #b8b8b8; /* Change color on hover */
}

/*	.school a:link, .school a:visited, .school a:hover, .school a:active{
      	text-decoration: none !important;
		font-size: 17px;
		font-weight: bold
		color: #1e56a1;
	}*/
	.name{
      	text-decoration: none !important;
		font-size: 16px;
		color: #1e56a1;
	}
	.email a:link, .email a:visited, .email a:hover, .email a:active {
      	text-decoration: none !important;
		font-size: 15px;
		color: #1e56a1;
	}

	
	
	
	.teamphoto:hover + .school {
  color: #b8b8b8 !important;
}
	
	.cardhover
	{
		 background-color: #0b7e67;    

    /*transition the background-color over 1s with a linear animation */
   transition: background-color .5s linear;
	}
	.cardhoverout
	{
		 background-color: transparent;    

    /*transition the background-color over 1s with a linear animation */
   transition: background-color .5s linear;
	}
	
	
	
	
/* Center the flex container and apply padding */
.flex-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the flex items horizontally */
    max-width: 1200px;
    margin: 0 auto;
    gap: 15px; /* Apply 15px gap between rows and columns */
    padding: 15px;
    box-sizing: border-box;
}

/* Flex item with exact dimensions of 300px x 300px */
.flex-item {
    width: 370px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Inner content of the box */
.inner-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Breakpoint for two columns */
@media (max-width: 900px) {
    .flex-item {
        width: calc(50% - 15px); /* 2 columns with 15px gap */
    }
}

/* Breakpoint for one column */
@media (max-width: 600px) {
    .flex-item {
        width: 100%; /* Full width for one column */
    }
  
.fsStyleColumn-2, .fsStyleColumn-3, .fsStyleColumn-last {
 margin-top:45px;
}
  
  .header-sub-text{font-size:18px;}
}

/* End Style for Cards */
	
	
	
/* fade color for cards */
	
/* Default border color for the teamphoto image */
.teamphoto img {
    border: 0.35rem solid #dcdcdc; /* Original border color */
    transition: border-color 0.4s ease; /* Smooth transition for the border color */
}

/* Contact box styling */
.contactbox {
    background-color: transparent;
    transition: background-color 0.4s ease; /* Smooth transition for the background color */
}

/* Text div styling */
.school, .name, .email {
    /*color: inherit;  Default text color, which will change on hover */
    transition: color 0.4s ease; /* Smooth transition for text color */
}



@media (max-width: 320px) 
	{
		.school a:link,
.school a:active {
    text-decoration: none !important;
    font-size: 17px;
    font-weight: bold;
    color: #1e56a1; /* Original blue color */
 
}
.school a {
    color: #1e56a1; /* Original color */
    transition: color 0.3s; /* Add a transition for smoothness */
}

.school a:visited {
    color: #1e56a1; /* Keep visited link color */
}

.school a:hover {
    color: #b8b8b8; /* Change color on hover */
}

/*	.school a:link, .school a:visited, .school a:hover, .school a:active{
      	text-decoration: none !important;
		font-size: 17px;
		font-weight: bold
		color: #1e56a1;
	}*/
	.name{
      	text-decoration: none !important;
		font-size: 16px;
		color: #1e56a1;
	}
	.email a:link, .email a:visited, .email a:hover, .email a:active {
      	text-decoration: none !important;
		font-size: 15px;
		color: #1e56a1;
	}

		
	}
/* End fade color for cards */