@charset "utf-8";
/* CSS Document */


:root {
  --font-heading: "Montserrat", sans-serif;
  --font-body: 'Montserrat', sans-serif;
  --font-logo: "Karla", sans-serif;
}

:root {
  --color-primary:#334851; 
  --color-secondary:#7196A6; 
	
  --color-primary-alt: rgba(51, 72, 81, 0.8); 
  --color-secondary-alt: rgba(113, 150, 166, 0.8); 
	
  --color-secondary-1:#59BDE8; /*blue*/
  --color-secondary-2:#9BCDE3; /*blue*/
  --color-secondary-3:#285163; /*blue*/
  --color-secondary-4:#799FB0; /*blue*/
  --color-secondary-5:#B45471; /*red*/
  --color-secondary-6:#E87D68; /*salmon*/
  --color-secondary-7:#FCB560; /*orange*/
  --color-secondary-8:#F5EF77; /*yellow*/
	
 --color-tertiary-1:#c0ced3; /*#f6f8f8 lighter version*/
 --color-tertiary-2:#9cabb0;
 --color-tertiary-3:#e4eaeb;
	
  --color-heading: #334851;
  --color-body: #555;
  --color-gray: #f6f8f8;
  --color-link: #59BDE8;
  --color-link-hover: #B45471;
  --color-white: #ffffff;
  --color-black: #222222;
}

:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/

body {
  box-sizing: border-box;
  font-family: var(--font-body);
  color: var(--color-body);
  overflow-x: hidden;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
}

/*forces footer to stay at bottom*/
body {min-height: 100vh; display: flex; flex-direction: column;}
footer{margin-top: auto;}


body.modal-open {
    width: 100% !important;
    padding-right: 0 !important;
    overflow-y: scroll !important;
}

@media(max-width: 575px){
	body.modal-open {
		width: 100% !important;
		padding-right: 0 !important;
		overflow-y: scroll !important;
	}	
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  transition: all 0.3s;
}

a:hover {
  color: var(--color-secondary-2);
  text-decoration: none;
}

a:focus,
a:active {
  color: var(--color-primary-light);
  text-decoration: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
}

p {
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.45em; 
  color: var(--color-body);
  margin-bottom: 20px;
}

hr {
  display: block;
  height: 0;
  margin: 15px 0;
  border-top: 1px solid var(--color-body);
  background: transparent; }

/*h1 {font-size: 72px;}
h2 {font-size: 68px;}
h3 {font-size: 40px;}
h4 {font-size: 32px;}
h5 {font-size: 24px;}
h6 {font-size: 20px;}*/

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: #fff;
  transition: all 0.6s ease-out;
  width: 100%;
  height: 100vh;
}

#preloader:before,
#preloader:after {
  content: "";
  position: absolute;
  border: 4px solid var(--color-secondary);
  border-radius: 50%;
  -webkit-animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
  animation: animate-preloader 2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

#preloader:after {
  -webkit-animation-delay: -0.5s;
  animation-delay: -0.5s;
}

@-webkit-keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}

@keyframes animate-preloader {
  0% {
    width: 10px;
    height: 10px;
    top: calc(50% - 5px);
    left: calc(50% - 5px);
    opacity: 1;
  }

  100% {
    width: 72px;
    height: 72px;
    top: calc(50% - 36px);
    left: calc(50% - 36px);
    opacity: 0;
  }
}


/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 996;
  background: var(--color-secondary);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 28px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: var(--color-secondary-2);
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable AOS delay on mobile
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#header {
  height: 90px;
  transition: all 0.5s;
  z-index: 997;
  transition: all 0.5s;
  background: #fff;
  box-shadow: 0 4px 10px -3px rgba(191, 191, 191, 0.5);
}

#header .logo {
	
}

#header .logo h1 {
  font-size: 28px;
  margin: 0;
  line-height: 1;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: uppercase;
}

#header .logo h1 a,
#header .logo h1 a:hover {
  color: #fff;
  text-decoration: none;
}

#header .logo img {
  padding: 0;
  margin: 0;
  max-height: 60px;
}

.scrolled-offset {
  margin-top: 90px;
}

@media (max-width: 991px) {
  #header {
    height: 70px;
  }
  .scrolled-offset {
    margin-top: 70px;
  }
  #header .logo img {
	padding: 5px 0;
	margin: 0;
	max-height: 60px;
	}
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-size: 16px;
  font-weight: 600;
  color: #151515;
  text-transform: uppercase;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover>a {
  color: var(--color-secondary);
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #151515;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #fff;
}

@media (max-width: 991px) {
  .mobile-nav-toggle {
    display: block;
  }

  .navbar ul {
    display: none;
  }
}

.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}

.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  right: 15px;
}

.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #fff;
  overflow-y: auto;
  transition: 0.3s;
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #151515;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover>a {
  color: var(--color-secondary);
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

/*HERO-OPTION- 3rd option*/

.top .logo {
  background: #fff; 
  margin: auto 0;
  text-align: center; 
  padding: .5em;
  display: block;
}

#hero {
  width: 100%;
  height: 100vh; /*79vh*/
  background: url("../images/home/hero.jpg");
  background-position: right center;
  background-size: cover;
  position: relative;
}

#hero:before {
  content: "";
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent);
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
}

@media(max-width: 1199px){
	#hero:before {
	  background: linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5));
	}	
}

#hero .container {
  position: relative;
}

#hero .container h1 {
  margin: 0 0 20px;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
}

#hero .container h2 {
  color: #fff;
  margin: 5px 0 50px 0;
  font-size: 28px;
  font-weight: 400;
  line-height: 1.2;
}

@media(min-width: 991px) and (max-width: 1399px){
	#hero .container h2 span {
      display: block;
	}
}

#hero .container .btn-get-started {
  font-family: "Montserrat", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 14px 30px;
  border-radius: 4px;
  margin: 0 10px 50px 0;
  transition: 0.5s;
  color: #fff;
  background: var(--color-secondary);
}

#hero .container .btn-get-started:hover {
  background: var(--color-primary);
  color: var(--color-white);
}

@media (min-width: 1024px) {
  #hero {
    background-attachment: fixed;
  }
}

@media (max-width: 768px) {
  #hero h1 {
    font-size: 28px;
    line-height: 36px;
  }

  #hero h2 {
    line-height: 22px;
  }
}


/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/

section {
  padding: 80px 0;
  overflow: hidden;
}

@media(max-width: 575px){
	section {
	  padding: 60px 0;
	}	
}

.section {
	padding: 0;
}

.section-bg {
  background-color: #f6f8f8; /*#f6f9ff;*/
}

.section-title {
  text-align: center;
  padding-bottom: 10px;
}

.section-title h2 {
  font-size: 34px;
  font-weight: bold;
  text-transform: capitalize;
  margin-bottom: 40px;
  padding-bottom: 0;
  color: var(--color-primary);
}

.section-title span {
	text-transform: lowercase;
}

.section-title p {
  margin-bottom: 0;
  font-size: 1.25rem;
  color: var(--color-white);
}

@media(max-width: 575px){
	.section-title h2 {
	  font-size: 28px;
	}	
}

/*--------------------------------------------------------------
# Colors
--------------------------------------------------------------*/

.primary {
	color: var(--color-primary);
}

.secondary {
	color: var(--color-secondary);
}

.primary-bg {
	background: var(--color-primary);
}

.secondary-bg {
	background: var(--color-secondary);
}

.tertiary-bg-1 {
	background: var(--color-tertiary-1);
}

.tertiary-bg-2 {
	background: var(--color-tertiary-2);
}

.tertiary-bg-3 {
	background: var(--color-tertiary-3);
}



/*--------------------------------------------------------------
# buttons
--------------------------------------------------------------*/

.btn-read-more {
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: var(--color-primary);
}

.btn-read-more span {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.btn-read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Images
--------------------------------------------------------------*/
.images {
  background-repeat: no-repeat;
  background-size: cover;
}

.photo {
    /*background-image: url('https://source.unsplash.com/random');*/
    background-position: center;
    min-height: 300px;
}

/*homepage*/
.pillar-1 {
    background-image: url("../images/home/leadership.png");
	background-position: top center;
}


.pillar-2 {
    background-image: url("../images/home/planning.jpg")
}

.pillar-3 {
    background-image: url("../images/home/data.jpg")
}

/*about page*/

.about-header {
	background-image:url("../img/why-us.jpg")
}

.mission {
    background-image: url("../images/about/mission.jpg");
	background-position: center;
}

.empower {
    background-image: url("../images/about/empower.jpg");
	background-position: left center;
}

/*headers*/

.about-header {
	background-image:url("../images/headers/about.jpg")
}

.client-header {
	background-image:url("../images/headers/clients.jpg");
	background-position: top center;
}


/*--------------------------------------------------------------
Intro
--------------------------------------------------------------*/

.intro .content {
  background: var(--color-primary);
  padding: 40px;
}

.intro h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-white);
  text-transform: uppercase;
}

.intro h2 {
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-white);
}

@media(max-width: 575px){
	.intro h2 {
	  font-size: 28px;
	}	
}

.intro p {
  margin: 15px 0 30px 0;
  line-height: 1.5;
  color: var(--color-white);
}

.intro .btn-read-more {
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: var(--color-secondary);
}

.intro .btn-read-more span {
  font-family: "Nunito", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.intro .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.intro .btn-read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Pillars Section
--------------------------------------------------------------*/

.pillars h2 {	
  font-size: 32px;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-white);
  text-align: center;
  margin-bottom: 1.5em;
}

@media(max-width: 575px){
	.pillars h2 {	
	  font-size: 28px;
	  text-transform: uppercase;
	  font-weight: 700;
	  color: var(--color-white);
	  text-align: center;
	  margin-bottom: 1.5em;
	}	
}

.pillars .card-item {
  border: 4px solid var(--color-white);
  position: relative;
  background: #fff;
  border-radius: 0;
}

.pillars .card-item .card-bg {
  min-height: 280px;
  position: relative;
}

.pillars .card-item .card-bg img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 1;
}

.pillars .card-item .card-body {
  padding: 30px;
  text-align: left;
}

.pillars .card-item h4 {
  font-family: var(--font-logo);
  display: inline-block;
  border: 4px solid var(--color-white);
  background: var(--color-secondary);
  padding: 0 30px 0 30px;
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.8;
  padding-top: 0;
  margin-top: 0;
  margin-bottom: 15px;
  position: relative;
  left: -50px; 
  top: 30px;
}



.pillars .card-item p {
  
  color: var(--color-body);
  font-size: 1rem;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

@media(min-width: 1350px) and (max-width: 1399px){
	.pillars .card-item .card-bg {
	  min-height: 370px;
	}
}

@media(max-width: 1349px){
	.pillars .card-item .card-bg {
	  min-height: 350px;
	}
}

@media(max-width: 991px){
	.pillars .card-item .card-bg {
	  min-height: 300px;
	}
	.pillars .card-item h4 {
	  top: 25px;
	}
}

@media (max-width: 620px){
	.pillars .card-item h4 {
	  left: -20px; 
	}
}

@media (max-width: 575px){
	.pillars .card-item h4 {
	  left: -10px; 
	  top: 18px;
      margin-bottom: 0px;
	}
}


/*--------------------------------------------------------------
# Call To Action 
--------------------------------------------------------------*/
.call-to-action {
  background: var(--color-secondary);
  padding: 70px 0 80px;
  position: relative;
}



.outline {
	outline: 4px solid var(--color-white);
	outline-offset: -20px;
}

.outline-secondary {
	outline: 2px solid rgba(55, 64, 89, 0.1); ;
	outline-offset: -20px;
}

/*.call-to-action img {
  position: fixed;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}*/

.call-to-action h3 {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 1em;
  color: var(--color-white);
}

@media(max-width: 575px){
	.call-to-action h3 {
	  font-size: 32px;
	}	
}

.call-to-action p {
  color: var(--color-white);
  font-weight: 500;
  margin-bottom: 2em;
}

.call-to-action .cta-btn {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
  display: inline-block;
  padding: 12px 40px;
  border-radius: 5px;
  transition: 0.5s;
  margin: 10px;
  background: var(--color-primary);
  color: var(--color-white);
}

.call-to-action .cta-btn:hover {
  background: var(--color-white);
  color: var(--color-primary);
}


/*CALL TO ACTION CONTACT FORM*/

#contact-form .modal-body .php-email-form {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: 5px;
}

#contact-form .modal-body .php-email-form .form-group {
  padding-bottom: 8px;
}

#contact-form .modal-body .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

#contact-form .modal-body .php-email-form .error-message br+br {
  margin-top: 25px;
}

#contact-form .modal-body .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: var(--color-secondary-5);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#contact-form .modal-body .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

#contact-form .modal-body .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--color-secondary-2);
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

#contact-form .modal-body .php-email-form input,
#contact-form .modal-body .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

#contact-form .modal-body .php-email-form input {
  height: 44px;
}

#contact-form .modal-body .php-email-form textarea {
  padding: 10px 12px;
}

#contact-form .modal-body .php-email-form button[type=submit] {
  background: var(--color-secondary);
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

#contact-form .modal-body .php-email-form button[type=submit]:hover {
  background: var(--color-secondary-5);
}


/*--------------------------------------------------------------
# Programs Section
--------------------------------------------------------------*/
.programs {
  padding-bottom: 40px;
}

.programs .icon-box {
  margin-bottom: 20px;
  text-align: center;
}

.programs .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  background: var(--color-secondary);
  border-radius: 50%;
  transition: 0.5s;
  color: #fff;
  overflow: hidden;
}

/*toss start*/

.programs .icon-color {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 80px;
  height: 80px;
  margin-bottom: 20px;
  background: transparent;
  border-radius: 50%;
  border: 2px solid var(--color-secondary);
  transition: 0.5s;
  color: #fff;
  overflow: hidden;
}

.programs .icon-box:hover .icon-color {
	background: var(--color-tertiary-3);
}

/*toss end*/

.programs .icon i {
  font-size: 36px;
  line-height: 0;
}

.programs .icon-box:hover .icon {
	background: var(--color-primary);
}

.programs .title {
  font-weight: 600;
  margin-bottom: 25px;
  font-size: 21px;
  position: relative;
  padding-bottom: 15px;
}

.programs .title a {
  color: #444;
  transition: 0.3s;
}

.programs .title a:hover {
  color: var(--color-secondary);
}

.programs .title::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 2px;
  background: var(--color-secondary);
  bottom: 0;
  left: calc(50% - 25px);
}

.programs .learn-more {
  line-height: 24px;
  color: var(--color-body);
  margin-bottom: 2em;
}

/*--------------------------------------------------------------
# Modal Styles
--------------------------------------------------------------*/

.modal .btn-close .close:focus {
  outline: none;
}

.modal-footer .btn-secondary {
  background: var(--color-secondary);
  transition: 0.3s;
}

.modal-footer .btn-secondary:hover {
	background: var(--color-primary);
}

.modal-footer .btn-primary {
  background: var(--color-primary);
  transition: 0.3s;
}

.modal-footer .btn-primary:hover {
	background: var(--color-secondary);
}

/*#contact-form .modal-backdrop.show {
  background-color: #000; 
}

#contact-form .modal-backdrop.show {
  opacity: 0.5; 
}*/


/*--------------------------------------------------------------
# Inner-page Header
--------------------------------------------------------------*/
.inner-header {
  min-height: 25vh;
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner-header:before {
  content: "";
  background-color: var(--color-primary-alt);   
  position: absolute;
  inset: 0;
}

.inner-header h2 {
  font-size: 2.5em;
  font-weight: 700;
  color: #fff;
  font-family: var(--font-body);
  text-align: center;
  position: absolute;
  z-index: 1;
}

@media(max-width: 1299px){
	.inner-header h2 {
	  font-size: 2.25em;
	}	
}

@media(max-width: 575px){
	.inner-header h2 {
	  font-size: 2.5em;
	  font-weight: 700;
	}	
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/

.about h3 {
	font-family: var(--font-logo);
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: 20px;
}

.about .buckle-up {
	margin-top: 4em;
	margin-bottom: 0;
}

.about .buckle-up p  {
	font-weight: 500;
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
#team {  
    background: var(--color-tertiary-1);  
}    

.team {  
    display: flex;  
}    

@media(max-width: 575px){  
    .team {  
        display: block;  
    }  
}    

.team img {  
    max-height: 340px;   
    position: relative;  
    border-radius: 0;  
    padding: 5px;  
    background: #fff;  
}    

.team .card {   
    border: none;  
    max-width: 320px;   
    padding: 20px 20px 10px;   
    margin-left: -5px;  
    border-radius: 0; 
    position: relative; /* Add this line */
}    

.team h4 {   
    position: relative;     
    margin-left: -50px;    
    margin-bottom: 20px; 
}    

.team h4 span {   
    font-family: var(--font-heading);   
    padding: 10px 20px;    
    background: var(--color-primary);    
    color: var(--color-white);    
    border: 4px solid #fff;   
    display: inline-block;  
}    

.team p {  
    margin-bottom: 0; 
}    

.team .social {  
    margin-left: auto;   
    font-size: 21px; 
    position: absolute; /* Add this line */
    bottom: -2px; /* Adjust as needed */
    right: 4px; /* Adjust as needed */
}


@media(min-width: 576px) and (max-width: 768px){
	.team img { 
		width: 250px;
		height: 250px;
	}
}

@media(max-width: 575px){
	.team img {
		max-height: 340px; 
		position: relative;
	}

	.team .card { 
		border: none;
		max-width: 330px; 
		margin-left: 0;
	}

	.team h4 {
	  position: relative;  
      margin-left: -35px; 
	  margin-top: -50px; 
	  margin-bottom: 20px;
	}
}


/*--------------------------------------------------------------
# Teams - option for larger photos
--------------------------------------------------------------*/
.teams {
  background: url("../img/team-bg.jpg") center center no-repeat;
  background-size: cover;
  padding: 60px 0;
  position: relative;
}

.teams::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.75);
  z-index: 9;
}

.teams .container {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.teams .container .col-10, .col-lg-5, .col-xxl-3 {
  display: flex;
  flex-direction: column;
}

.teams .member {
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  position: relative;
  flex-grow: 1;
   Add these lines 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.teams .member .member-info {
  position: relative;
  background: #fff;
  padding: 20px;
  color: var(--color-body);
  margin: 0 auto;
}

.teams .member h4 {
  font-weight: 700;
  margin-bottom: 10px;
  font-size: 16px;
  color: #364146;
  position: relative;
  padding-bottom: 10px;
}

.teams .member h4::after {
  content: "";
  position: absolute;
  display: block;
  width: 50px;
  height: 1px;
  background: var(--color-secondary);
  bottom: 0;
  left: calc(50% - 25px);
}

.teams .member p {
  font-size: 15px;
  line-height: 1.6;
  text-align: left;
}

.teams .member .social {
  margin-top: 15px;
}

.teams .member .social a {
  transition: color 0.3s;
  color: var(--color-secondary);
}

.teams .member .social a:hover {
  color: var(--color-primary);
}

.teams .member .social i {
  font-size: 21px;
  margin: 0 2px;
}

@media (max-width: 992px) {
  .teams .member {
    margin-bottom: 110px;
  }
}

/*--------------------------------------------------------------
# clients Section
--------------------------------------------------------------*/
.clients {
	background: var(--color-gray);
}

.clients h2 {
	padding-left: 20px; 
	padding-right: 20px; 
}

.clients .client {
  background: var(--color-gray);
  border: 2px solid #e9ecef;
  height: 100%;
  padding: 30px;
  transition: 0.3s;
  border-radius: 10px;
  display: flex;
  transition: all 0.3s;
}

.clients .client .icon {
  font-size: 50px;
  border-radius: 10px;
  position: relative;
  margin-right: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.clients .client .logo {
  /*font-size: 50px;*/
  border-radius: 10px;
  position: relative;
  margin-right: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  flex-shrink: 0;
}

.clients .client h3 {
  color: var(--color-heading);
  font-size: 21px;
  transition: 0.3s;
}

.clients .client p {
  margin-bottom: 0;
  color: var(--color-body);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  transition: 0.3s;
}

.clients .client:hover {
  box-shadow: 0px 2px 15px #999;
  background: var(--color-white);
}

.clients .client .truncate {
  max-width: 100%;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

.clients .client .read-more {
  display: inline-flex;
  align-items: center;
  margin-top: 10px;
  transition: 0.3s;
  font-size: 14px;
  color: var(--color-link);
}

.clients .client .read-more i {
  margin-left: 10px;
}

.clients .client .read-more:hover {
	color: var(--color-link-hover);
}



/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
/*https://heropatterns.com/*/

.pattern-1 {
	background-color: var(--color-secondary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='192' height='192' viewBox='0 0 192 192'%3E%3Cpath fill='%23334851' fill-opacity='0.4' d='M192 15v2a11 11 0 0 0-11 11c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H145v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11 13 13 0 1 1 .02 26 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43a6.1 6.1 0 0 0-3.03 4.87V143h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 181 164a11 11 0 0 0 11 11v2a13 13 0 0 1-13-13 12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84a6.1 6.1 0 0 0-4.87-3.03H145v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 124 181a11 11 0 0 0-11 11h-2a13 13 0 0 1 13-13c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43a6.1 6.1 0 0 0 3.03-4.87V145h-35.02a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 107 124a11 11 0 0 0-22 0c0 1.94 1.16 4.75 2.53 6.11l2.36 2.36a6.93 6.93 0 0 1 1.22 7.56l-.43.84a8.08 8.08 0 0 1-6.66 4.13H49v35.02a6.1 6.1 0 0 0 3.03 4.87l.84.43c1.58.79 4 .4 5.24-.85l2.36-2.36a12.04 12.04 0 0 1 7.51-3.11A13 13 0 0 1 81 192h-2a11 11 0 0 0-11-11c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V145H11.98a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 0 1 0 177v-2a11 11 0 0 0 11-11c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H47v-35.02a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 28 109a13 13 0 1 1 0-26c2.47 0 5.79 1.37 7.53 3.11l2.36 2.36a4.94 4.94 0 0 0 5.24.85l.84-.43A6.1 6.1 0 0 0 47 84.02V49H11.98a8.08 8.08 0 0 1-6.66-4.13l-.43-.84a6.91 6.91 0 0 1 1.22-7.56l2.36-2.36A10.06 10.06 0 0 0 11 28 11 11 0 0 0 0 17v-2a13 13 0 0 1 13 13c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84A6.1 6.1 0 0 0 11.98 47H47V11.98a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 68 11 11 11 0 0 0 79 0h2a13 13 0 0 1-13 13 12 12 0 0 1-7.53-3.11l-2.36-2.36a4.93 4.93 0 0 0-5.24-.85l-.84.43A6.1 6.1 0 0 0 49 11.98V47h35.02a8.08 8.08 0 0 1 6.66 4.13l.43.84a6.91 6.91 0 0 1-1.22 7.56l-2.36 2.36A10.06 10.06 0 0 0 85 68a11 11 0 0 0 22 0c0-1.94-1.16-4.75-2.53-6.11l-2.36-2.36a6.93 6.93 0 0 1-1.22-7.56l.43-.84a8.08 8.08 0 0 1 6.66-4.13H143V11.98a6.1 6.1 0 0 0-3.03-4.87l-.84-.43c-1.59-.8-4-.4-5.24.85l-2.36 2.36A12 12 0 0 1 124 13a13 13 0 0 1-13-13h2a11 11 0 0 0 11 11c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V47h35.02a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 179 28a13 13 0 0 1 13-13zM84.02 143a6.1 6.1 0 0 0 4.87-3.03l.43-.84c.8-1.59.4-4-.85-5.24l-2.36-2.36A12 12 0 0 1 83 124a13 13 0 1 1 26 0c0 2.47-1.37 5.79-3.11 7.53l-2.36 2.36a4.94 4.94 0 0 0-.85 5.24l.43.84a6.1 6.1 0 0 0 4.87 3.03H143v-35.02a8.08 8.08 0 0 1 4.13-6.66l.84-.43a6.91 6.91 0 0 1 7.56 1.22l2.36 2.36A10.06 10.06 0 0 0 164 107a11 11 0 0 0 0-22c-1.94 0-4.75 1.16-6.11 2.53l-2.36 2.36a6.93 6.93 0 0 1-7.56 1.22l-.84-.43a8.08 8.08 0 0 1-4.13-6.66V49h-35.02a6.1 6.1 0 0 0-4.87 3.03l-.43.84c-.79 1.58-.4 4 .85 5.24l2.36 2.36a12.04 12.04 0 0 1 3.11 7.51A13 13 0 1 1 83 68a12 12 0 0 1 3.11-7.53l2.36-2.36a4.93 4.93 0 0 0 .85-5.24l-.43-.84A6.1 6.1 0 0 0 84.02 49H49v35.02a8.08 8.08 0 0 1-4.13 6.66l-.84.43a6.91 6.91 0 0 1-7.56-1.22l-2.36-2.36A10.06 10.06 0 0 0 28 85a11 11 0 0 0 0 22c1.94 0 4.75-1.16 6.11-2.53l2.36-2.36a6.93 6.93 0 0 1 7.56-1.22l.84.43a8.08 8.08 0 0 1 4.13 6.66V143h35.02z'%3E%3C/path%3E%3C/svg%3E");
}

#footer {
  color: #fff;
  font-size: 14px;
  position: relative;
}

#footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
}

#footer .footer-top {
  padding: 60px 0;
  text-align: left;
  position: relative;
  z-index: 2;
}

#footer .contact {
	text-align: center;
}

#footer h5 {
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: 24px;
  margin-bottom: 20px;
  line-height: 1;
  font-weight: 400;
  text-align: center;
}

#footer .contact h5 span.stretch {
    display:inline-block;
    -webkit-transform:scale(0.84,1); /* Safari and Chrome */
    -moz-transform:scale(0.84,1); /* Firefox */
    -ms-transform:scale(0.84,1); /* IE 9 */
    -o-transform:scale(0.84,1); /* Opera */
    transform:scale(0.84,1); /* W3C */
}

.first-letter {
    font-size: 130%;
    text-transform: uppercase;
}

#footer .contact p {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: white;
  font-style: normal;
  margin-bottom: 20px;
}

#footer .contact a {
  color: var(--color-secondary-2);
  transition: 0.3s;
}

#footer .contact a:hover {
  color: var(--color-secondary-4);
}

#footer .footer-top .php-email-form {
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  padding: 20px;
  border-radius: 5px;
}

#footer .footer-top .php-email-form .form-group {
  padding-bottom: 8px;
}

#footer .footer-top .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  font-weight: 600;
}

#footer .footer-top.php-email-form .error-message br+br {
  margin-top: 25px;
}

#footer .footer-top .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: var(--color-secondary-5);
  text-align: center;
  padding: 15px;
  font-weight: 600;
}

#footer .footer-top .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
}

#footer .footer-top .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--color-secondary-2);
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

#footer .footer-top .php-email-form input,
#footer .footer-top .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
}

#footer .footer-top .php-email-form input {
  height: 44px;
}

#footer .footer-top .php-email-form textarea {
  padding: 10px 12px;
}

#footer .footer-top .php-email-form button[type=submit] {
  background: var(--color-secondary);
  border: 0;
  padding: 10px 24px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

#footer .footer-top .php-email-form button[type=submit]:hover {
  background: var(--color-secondary-2);
}

#footer .footer-top .social-links {
  margin: 20px 0;
}

#footer .footer-top .social-links a {
  font-size: 18px;
  display: inline-block;
  background: var(--color-secondary-4);
  color: #fff;
  line-height: 1;
  padding: 8px 0;
  margin-right: 4px;
  border-radius: 50%;
  text-align: center;
  width: 36px;
  height: 36px;
  transition: 0.3s;
}

#footer .footer-top .social-links a:hover {
  background: var(--color-secondary-2);
  color: #fff;
  text-decoration: none;
}

#footer .footer-bottom {
  z-index: 2;
  position: relative;
  display: block;
  background: #243137;
  padding-top: 40px;
  padding-bottom: 40px;
}

#footer .copyright {
  text-align: center;
}

#footer .credits {
  text-align: center;
  font-size: 13px;
  padding-top: 5px;
}