/* Hero */
.hero {
  height: 65vh
}

@media only screen and (min-width: 768px) {
  .info-popup .container {
    width: 90% !important;
    margin: 0 auto;
  }
}

.mappa {
  width: 55%;
}

.info-popup {
  width: 45%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.2);
  z-index: 1000;
}

.info-popup .info-logo img {
  max-width: 50%;
  width: 50%;
}

.info-popup .info-img {
  width: 100%;
  height: 40%;
  object-fit: cover;
  object-position: center;
}

.mappa .info-meta {
  font-size: 14px;
  font-weight: 400
}

@media only screen and (max-width: 575px) {
  .mappa .info-meta {
    font-size: 9.5px
  }
}

.hero .info-popup .info-contacts {
  height: 60%
}

.hero .info-popup i {
  font-size: 20px;
  color: var(--brandColor)
}

.hero-banner .hero-heading {
  width: 100%
}

@media only screen and (max-width: 767px) {
  .hero-banner .hero-heading {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .hero-banner .hero-heading .banner-navigation {
    margin-bottom: 10px;
  }
}

.hero .info-popup .info-opening .info-meta h5 {
  font-weight: 400 !important
}

@media only screen and (max-width:991px) {
  .hero {
    flex-direction: column-reverse;
    height: 90vh;
  }

  .hero .mappa {
    width: 100%;
    height: 45%;
  }

  .hero .info-popup {
    width: 100%;
    height: 55%;
  }

  .info-popup .info-img {
    height: 40%
  }

  .hero .info-popup .info-logo {
    display: none !important;
    justify-content: flex-start !important;
    flex-wrap: wrap;
  }

  .hero .info-popup .info-logo img {
    width: 50%;
  }
}

/* History */
.history {
  background: var(--brandColor)
}

.history .section-heading h1 {
  color: var(--white)
}

.history .history-content {
  color: var(--white);
  text-align: center;
}

/* Services */
.services .services-card-list .single-service-card {
  width: calc(100% / 2.05);
  height: 420px;
  box-shadow: 0 0px 4px rgb(0 0 0 / 0.2);
  padding: 45px 40px;
  position: relative;
}

.services .services-card-list .single-service-card h2 {
  position: relative;
  margin-top: 60px !important;
}

.services .services-card-list .single-service-card h2::before {
  content: '';
  display: block;
  color: var(--serviceNumberColor);
  font-size: 110px;
  font-weight: 700;
  position: absolute;
  left: 0;
  bottom: -8px;
  z-index: -1000
}

.services .services-card-list .autoscuola h2:before {
  content: '01'
}

.services .services-card-list .pratiche h2:before {
  content: '02'
}

.services .services-card-list .single-service-card .btn-more {
  padding: 10px 35px;
  position: absolute;
  bottom: 45px;
}

@media only screen and (max-width: 767px) {
  .services .services-card-list {
    flex-direction: column;
  }

  .services .services-card-list .single-service-card {
    width: 100%
  }

  .services .services-card-list .pratiche {
    margin-top: 10px;
  }
}

/* Simulation */
.simulation {
  background-color: var(--brandColor)
}

.simulation .section-heading h1 {
  color: var(--white)
}

.simulation .simulation-content .btn-more {
  border: 1px solid var(--white);
  color: var(--white) !important;
  padding: 20px 40px;
}

.simulation .simulation-content .btn-more:first-child {
  margin-right: 15px;
}

.simulation .simulation-content .btn-more:hover {
  background: var(--white);
  color: var(--black) !important;
}

@media only screen and (max-width: 767px) {
  .simulation-content {
    flex-direction: column;
  }

  .simulation .simulation-content .btn-more:first-child {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .simulation .simulation-content .btn-more {
    text-align: center;
  }
}

/* News */
.news .news-article-list .single-news-article:not(:last-child) {
  border-bottom: 1px solid var(--brandColor)
}

.news .news-article-list .single-news-article .post-content h3:hover {
  color: var(--brandColor)
}

.news .news-article-list .single-news-article i {
  color: var(--brandColor)
}

.news .container .btn-more {
  padding: 15px 25px !important;
}

.news .news-article-list .single-news-article hr {
  height: 3px;
  border-radius: 2px;
  background-color: var(--brandColor)
}

.news .page-counter .block-count {
  width: 40px;
  height: 50px;
  border-radius: 5px;
  box-shadow: 0 0px 4px rgb(0 0 0 / 0.2);
  cursor: pointer;
  position: relative;
  transition: 0.5s
}

.news .page-counter .block-count:not(:last-child) {
  margin-right: 10px;
}

.news .page-counter .block-count:hover {
  background: var(--brandColor)
}

.news .page-counter .block-count:hover a h4 {
  color: var(--white) !important
}

.news .page-counter .active {
  background: var(--brandColor)
}

.news .page-counter .active a h4 {
  color: var(--white) !important
}

.news .page-counter .block-count a {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media only screen and (max-width: 767px) {
  .news .page-counter .block-count {
    width: 35px;
    height: 45px;
  }

  .news .page-counter .block-count:not(:last-child) {
    margin-right: 7px;
  }
}

/* Contact Us */
.contact-us {
  background-color: var(--brandColor)
}

.contact-us .contacts .section-heading {
  text-align: left;
}

.contact-us .contacts .section-heading h1 {
  color: var(--white)
}

.contact-us .contacts h5, .contact-us .contacts h4, .contact-us .contacts i {
  color: var(--white) !important
}

.contact-us .direct-contact {
  width: 100%;
  height: 100%;
  border: 2px solid var(--white);
  padding: 30px 30px;
}

@media only screen and (max-width: 575px) {
  .contact-us .direct-contact {
    border: none;
    padding: 0;
  }
}

.contact-us .direct-contact h3 {
  color: var(--white);
}

.contact-us .direct-contact input, .contact-us .direct-contact textarea {
  width: 100%;
  border: 2px solid var(--white);
  background-color: transparent;
  color: var(--white);
  padding: 15px 15px;
}

.contact-us .direct-contact .user-name input {
  width: calc(100% / 2.015);
}

.contact-us .direct-contact .email-message textarea {
  max-height: 150px;
  height: 150px;
  resize: none;
}

.contact-us #form-error {
  margin-top: 15px !important;
  color: var(--white)
}

@-moz-document url-prefix() {
  .contact-us .direct-contact input::-moz-placeholder, .contact-us .direct-contact textarea::-moz-placeholder, .contact-us .direct-contact input:-moz-placeholder, .contact-us .direct-contact textarea:-moz-placeholder {
    font-family: 'Lato', FontAwesome, sans-serif;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.5;
    text-decoration: inherit;
    vertical-align: top;
    color: var(--white) !important;
  }
}

.contact-us .direct-contact input::-webkit-input-placeholder, .contact-us .direct-contact textarea::-webkit-input-placeholder {
  font-family: 'Lato', FontAwesome, sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.5;
  text-decoration: inherit;
  vertical-align: top;
  color: var(--white);
}

.contact-us .direct-contact .btn-submit {
  font-size: 20px;
  transition: 0.5s
}

.contact-us .direct-contact .btn-submit:hover {
  background: var(--white);
  color: var(--black) !important;
}

@media only screen and (max-width: 991px) {
  .contact-us .container {
    flex-direction: column;
  }

  .contact-us .container .contacts {
    margin-bottom: 40px
  }
}

@media only screen and (max-width: 575px) {
  .contact-us .direct-contact .user-name {
    flex-direction: column;
  }

  .contact-us .direct-contact .user-name input {
    width: 100%
  }

  .contact-us .direct-contact .user-name input:last-child {
    margin-top: 5px
  }
}