:root {
  --orange: orange;
  --green: green;
  --red: rgb(255, 51, 0);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400;500;600;700&display=swap');

html {
  scroll-behavior: smooth;
}

body {
  font-family: Poppins, sans-serif;
}

img {
    width: 100%;
}

ul.nav {
    list-style: none;
    padding: 0;
}
ul.nav li {
    text-align: center;
}
ul.nav li a {
  padding: 4px 0;
  color: black;
  line-height: 2;
  text-decoration: none;
}
ul.nav li a:hover {
  border-bottom: solid 3px red;
}

.white-text {
  color: white
}
.orange-text {
  color: var(--orange);
}
.green-text {
  color: var(--green)
}
.red-text {
  color: var(--red)
}
.orange-border {
  border-color: var(--orange)
}
.green-border {
  border-color: var(--green)
}
.red-border {
  border-color: var(--red)
}
.text-center {
  text-align: center
}
.text-left {
  text-align: left
}
cite {
  display: inline-block;
  margin-bottom: 1rem
}

#carouselProject1 .carousel-inner,
#carouselProject2 .carousel-inner,
#carouselProject3 .carousel-inner {
  height: 195px;
}

/* TOP BAR */
.logo {
  width: 90px;
  margin: 0 auto;
}
.graphite-link {
  background-color: slategray;
  border-radius: 50px;
  padding: 4px 12px !important;
  color: white !important;
}
.graphite-link:hover {
  border-bottom: unset !important;
  background-color: dimgray;
}

/* HERO */
.hero-banner {
  min-height: 300px;
  padding: 20px;
  background-image: url(images/hero-temp.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
h1 {
  font-weight: bold;
  font-size: 23px;
  line-height: 1.4;
  color: #fff;
  text-shadow: 0px 3px 6px rgba(0, 0, 0, 0.37);
}

/* DESTAQUES */
.destaques {
  margin: 40px 0;
}
.hilite-item {
  margin: 20px 0;
}
.hilite-image {
  width: 162px;
  height: 162px;
  margin: 0 auto;
}
  .principios, .cientifica, .valores {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
  .principios { background-image: url('images/orando.jpg') }
  .cientifica { background-image: url('images/cientistas2.jpeg') }
  .valores { background-image: url('images/valores.jpg') }
.round-image {
  background: #fff;
  border-width: 4px;
  border-style: solid;
  border-radius: 50%;
  overflow: hidden;
}
h3 {
  margin: 24px 0 10px;
  font-weight: 600;
  font-size: 22px;
  text-align: center;
}
.hilite-text {
  width: 272px;
  height: 48px;
  margin: 0 auto;
  font-size: 16px;
  text-align: center;
  color: #919191;
}

/* TURMAS */
.turmas {
  padding: 40px 0;
  background-color: var(--orange);
}
.classes-item {
  margin: 20px auto 20px;
}
.classes-item_image {
  width: 100%;
  height: 192px;
  margin: 0 auto;
  border: solid 4px white;
  border-radius: 16px;
  overflow: hidden;
}
.classes-item_text {
  display: none;
  font-size: 16px;
  text-align: center;
  color: #4a4a4a;
}
.video-frame {
  width: 100%;
  height: 186px;
}

/* PROJETOS */
.projetos {
  padding: 40px 0;
}
h2 {
  font-weight: 600;
  font-size: 32px;
  text-align: center;
  text-transform: uppercase;
  color: #000;
}
.card {
  margin: 20px 0 20px;
}
.card-img-top {
  min-height: 220px;
  background: #d9d9d9;  
}
.card-title {
  margin-bottom: 16px;
  font-weight: 500;
  font-size: 20px;
  text-align: left;
  color: #000;
}
.card-text {
  /* width: 299px; */
  /* height: 73px; */
  font-size: 16px;
  text-align: left;
  color: #525252;
}

/* GALERIA */
.galeria {
  padding: 40px 0;
  background-color: var(--green);
}
.woxo-container {
  max-height: 450px;
  overflow: hidden;
}

/* DEPOIMENTOS */
.depoimentos {
  padding: 40px 0;
}
.testimonials-slide {
  position: relative;
}
.arrow-back {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 40%;
  left: 0;
}
.testimonials-item  {
  width: 80%;
  margin: 0 auto;
}
.testimonials-item h3 {
  font-weight: 600;
  font-size: 24px;
  text-align: left;
  color: #2c2c2c;
}
.testimonial-image {
    width: 200px;
    height: 200px;
    margin: 50px auto 0;
}
.arrow-next {
  width: 44px;
  height: 44px;
  position: absolute;
  top: 40%;
  right: 0;
  text-align: right;
}
.depoimentos .carousel-control-next-icon,
.depoimentos .carousel-control-prev-icon {
  background-color: lightgrey;
  border-radius: 4px;
}

/* CONTATO */
.contato {
  padding: 40px 0;
  background-color: var(--red);
}
.form-container {
  margin-left: 20px;
  margin-right: 20px;
}
input, textarea {
  display: block;
  margin-bottom: 10px;
}
.text-input, textarea {
  padding: 10px;
  margin-bottom: 16px;
  width: 100%;
  border-radius: 4px;
  border: none;
}
.submit-btn {
  min-width: 100px;
}

/* FOOTER */
.main-footer {
  padding: 40px 0;
  border-top: solid 8px var(--red);
}
.bottom-logo {
  width: 190px;
  margin: 0 auto;
}
.address {
  display: inline;
  vertical-align: text-top;
}
.main-footer svg {
  margin-right: 10px;
}
.company-info {
  padding: 20px 40px;
}
.company-info > div {
  margin-bottom: 16px;
}
.bottom-nav {
  display: none;
}
.copy {
  text-align: center;
  font-size: 14px;
}

.page {
  padding: 40px 0;
  background-color: rgb(248 55 10 / 4%);
  background-image: url(images/bg-page-top.png), url(images/bg-page-bottom.png);
  background-repeat: no-repeat;
  background-position: right top, left bottom;
}
.page .content.escola {
  width: 70%;
  padding: 40px;
  min-width: 300px;
  margin: 0 auto;
  background-color: white;
  border-radius: 24px;
}

/***********
*
DESKTOP 
*
************/

@media screen and (min-width: 1024px) {
  
  .hero-section {
    overflow: hidden;
  }
  h1 {
    font-size: 36px;
    width: 400px;
    padding-left: 40px;
    padding-top: 40px;
  }
  .logo {
    width: 80px;
    margin: 0;
  }
  ul.nav li {
    text-align: left;
    margin-left: 32px;
  }
  ul.nav {
    align-self: center;
  }
  .navbar {
    justify-content: flex-end;
    padding-top: 20px;
  }
  .container-fluid {
    width: unset;
    margin: 0;
  }
  .top-bar {
    position: sticky;
    top: 0;
    padding: 8px;
    background-color: white;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.37);
    z-index: 1000;
  }
  .classes-item_image {
    width: 510px;
    height: 290px;
  }
  .video-frame {
    width: 560px; 
    height: 315px
  }
  .slide-imgs {
    position: relative;
  }
  .woxo-container {
    max-height: 1120px;
  }
  .slide-imgs img {
    position: absolute;
    top: 0;
    left: 0;
  }
  .form-container {
    max-width: 600px;
    margin: 0 auto;
  }
  .footer-container {
    width: 60%;
    margin: 0 auto;
  }
}