﻿body {
  font-family: "Titillium Web", sans-serif;
  font-size: 15px;
  color: #fff;
  padding: 1rem 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
strong {
  font-weight: 700;
}

.highlight {
  background: url("../images/bg-highlight.jpg?i=1") no-repeat top center;
  background-size: 820px;
  min-height: 475px;
  height: 100%;
  padding-top: 2rem;
}

.highlight .text {
  width: 30%;
  background: #4c4c4e;
  padding: 1rem;
  font-size: 1.2rem;
  height: 100%;
}

@media (max-width: 991px) {
  .highlight .text {
    width: 45%;
  }
}

@media (max-width: 550px) {
  .highlight .text {
    width: 61%;
  }
}

.highlight .text h1 {
  font-size: 26px;
}

.highlight .text span {
  color: #f8c031;
  font-size: 26px;
}

.col-right {
  height: 100%;
}

.col-right .clients {
  height: 15%;
}

.col-right .statistics {
  height: 85%;
}

@media (max-width: 991px) {
  .col-right .clients {
    height: auto;
    margin-bottom: 1rem;
  }

  .col-right .statistics {
    height: auto;
  }
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
}

@media (max-width: 768px) {
  .benefits-grid {
    display: flex;
    flex-direction: column;
  }
}

.box {
  height: 100%;
  padding: 1rem;
}

.box:hover,
.highlight:hover {
  transform: scale(1.005);
}

.box h2 {
  text-align: center;
  font-size: 22px;
}

@media (max-width: 1428px) {
  .box h2 {
    font-size: 17px;
  }
}

.box p {
  margin-bottom: 0;
}

.box.black {
  background: #000000;
  text-align: right;
  padding-left: 19%;
  font-size: 1.2rem;
}

.box.black h3 {
  font-size: 100px;
  font-weight: bold;
  border-bottom: solid 1px #f8c031;
  color: #d42452;
}

.box.black .source {
  color: #9c9c9c;
  font-size: 0.9rem;
  line-height: 1rem;
  font-style: italic;
  margin-top: 1rem;
}

.box.darkgray {
  background: #4c4c4e;
}

.box.blue {
  background: #3caacb;
}

.box.lightgray {
  background: #e6e7e8;
  color: #4c4c4e;
}

.box.yellow {
  background: #f8c031;
  color: #4c4c4e;
}

.testimonial {
  text-align: right;
}

.site {
  text-align: center;
}

.site:hover {
  transform: scale(1.01);
}

.testimonial {
  display: flex;
  align-items: center;
  justify-content: right;
}
.testimonial cite {
  font-style: italic;
}

.box.red {
  background: #d42452;
}

.text-red {
  color: #d42452;
  text-decoration: underline;
  font-weight: bold;
}

.text-blue {
  color: #3caacb;
  text-decoration: underline;
  font-weight: bold;
}
