/**
* Template Name: Impact - v1.1.1
* Template URL: https://bootstrapmade.com/impact-bootstrap-business-website-template/
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Set main reusable colors and fonts using CSS variables
# Learn more about CSS variables at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
--------------------------------------------------------------*/
/* Fonts */
:root {
  --font-default: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-primary: "Montserrat", sans-serif;
  --font-secondary: "Poppins", sans-serif;
}

/* Colors */
:root {
  --color-default: #222222;
  --color-primary: #008374;
  --color-secondary: #f85a40;
}

/* Smooth scroll behavior */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
body {
  font-family: var(--font-default);
  color: var(--color-default);
  background-color: #2DAF90;
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: #00b6a1;
  text-decoration: none;
}

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

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.teachers {
  width: 100%;
  position: relative; 
  padding: 80px 0 107px;
}

.teachers h2 {
  font-family: 'Arvo';
  font-size: 48px;
  font-weight: 400;
  margin-bottom: 31px;
  color: #E1E5E8;
}

.teachers p {
  font-family: 'Inter';
  color: #EFF8FA;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 30px;
}
.tec-box {
  width: 90%;
  padding: 15px;  
}

.tec-box:hover {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid #B8B8B8;
  box-shadow: 0px 0px 25px rgb(0 0 0 / 5%);
  border-radius: 10px;
}

.teachers .tec-box img{
    width: 100px;
    border-radius: 50px;
    margin-right: 15px;
}
.teachers .tec-box h3{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 0.9;
  color: #EFF8FA;
  margin: 0px;
}
.teachers .view_all{
  margin-top: 30px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 16px;
}

@media (max-width: 640px) {
  .teachers h2 {
    font-size: 36px;
  }
  .tec-box {
    width: 100%;
    padding: 0px 10px;  
  }
  .teachers .tec-box img {
    width: 70px;
    border-radius: 50px;
    margin-right: 15px;
  }
  .teachers .tec-box h3 {    
    font-size: 20px;    
  }
  .teachers p {    
    font-size: 14px;   
  }
}