@font-face { 
  font-family: "CenturySchoolbook";
  src:
    local("Century Schoolbook"),
    url("../Century Schoolbook.otf") format("opentype");
}

body {
    font-family: CenturySchoolbook, Helvetica, sans-serif;
    background: #F7F7F7;
}

header {
    position: fixed;
    width: 100%;
    margin: 0 auto;
    top: 0;
    left: 0;
    background: #F7F7F7;
    z-index: 3;
}

main {
    padding-top: 200px;
}

.bolder {
    font-weight: bold;
}

#request {
    position: fixed;
    display: none;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
}

#request textarea {
    max-width: 100%;
}

#request form {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 1vh 2vw 3vh;
    width: clamp(300px, 40%, 400px);
    margin: 0 auto;
    background: #f7f7f7;
    border-radius: 0.5vw;
    top: 10%;
}

#request form label {
    padding: 1vh 0;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

#request form input, #request form select, #request form textarea, .feedback input, .feedback textarea  {
    display: block;
    height: clamp(20px,5vh,40px);
    padding: 0.175rem 0.75rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #bdbdbd;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

#request form textarea, .feedback textarea {
    height: clamp(20px,0.35rem + 5vh,47px);
    resize: vertical;
}

#request form input::placeholder, #request form textarea::placeholder, .feedback input::placeholder, .feedback textarea::placeholder {
  color: #212529;
  opacity: 0.4;
}

#request form input:focus, #request form textarea:focus, .feedback input:focus, .feedback textarea:focus {
  color: #212529;
  background-color: #fff;
  border-color: #bdbdbd;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(158, 158, 158, 0.25);
}

#request select {
    height: clamp(20px,0.35rem + 5vh,47px) !important;
}

.send {
    cursor: pointer;
    transition: 1s !important;
}

.send:hover {
    background: #ffc84a !important;
}

.request__close {
    position: absolute;
    background: #ffc84a;
    padding: 2vw;
    border-radius: 50%;
    margin: -10% -5%;
    right: 0;
    cursor: pointer;
}

.header-wrapper {
    width: clamp(60%, 1366px, 90%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wrapper {
    width: clamp(60%, 1366px, 90%);
    margin: 0 auto;
    box-shadow: 0 20px 0px 0px #F7F7F7, 0 -20px 0px 0px #F7F7F7, 12px 0 15px -4px rgba(0,0,0,.25), -12px 0 15px -4px rgba(0,0,0,.25);
}

#wrapper--shadow {
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    background: rgba(143,147,153,.24);
    z-index: 4;
}

.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 2vh;
    z-index: 2;
    background: url("../img/header.png") 100%;
    height: 140px;
    background-blend-mode: overlay;
    background-size: cover;
}

.header__logo {
    position: relative;
    width: 6.5%;
}

.header__logo-img {
    width: 100%;
    margin-left:5%;
    object-fit: contain;
    opacity: 1;
}

.header__request-buttons {
    max-width: 15%;
    font-size: clamp(0.5rem, 0.3rem + 1vw, 1rem);
    color: #000;
    text-decoration: none;
    border: 0.2vw solid #ffc84a;
    background: #ffc84a;
    border-radius: 0.75vw;
    padding: 0.5vw 1vw;
    transition: 0.2s;
    cursor: pointer;
}

.header__request-buttons:hover {
    background: none;
    color: #ffc84a;
}

.header__adress {
    max-width: 25%;
    background: #ffc84a;
    border-radius: 1vw;
    padding: 1vw;
}

.header__adress a, .header__request-buttons a {
    color: #000;
    text-align: center;
    font-size: clamp(0.5rem, 0.347rem + 0.7648vw, 1rem);
    text-decoration: none;
}

.header__contacts {
    max-width: 30%;
    background: #ffc84a;
    border-radius: 1vw;
    padding: 1vw;
}

.header__contacts-tel {
    color: #000;
    font-size: clamp(0.625rem, 0.4338rem + 0.956vw, 1.25rem);
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
}
.header__contacts-desc {
    color: #000;
    font-size: clamp(0.5rem, 0.475rem + 0.125vw, 0.625rem);
    padding-top: 1vh;
    text-align: center;
}

.header__adress > a:hover, .header__contacts-tel:hover {
    text-decoration: underline;
    color: #000;
}

.navigation__menu { 
    display: flex;
    justify-content: center;
}

.navigation__submenu {
    position: absolute;
    display: none;
    padding: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem) 0;
    z-index: 1;
    background: #F7F7F7;
}

.navigation__menu-item, .navigation__submenu-item {
    list-style-type: none;
}

.navigation__menu-item {
    padding: 0.5vw 2vw 0.5vw 2vw;
    font-size: clamp(0.625rem, 0.4338rem + 0.956vw, 1.25rem);
    font-weight: bold;
}

.navigation__menu-item a {
    position: relative;
    padding-bottom: 2vh;
}

.navigation__submenu-item { 
    font-weight: 400;
    padding: 0.5vh 1vw;
}

.navigation__menu-item > a, .navigation__submenu-item > a, .services__title > a, .services-box__item-button {
    color: #000;
    text-decoration: none;
}

.navigation__menu-item:hover > a {
    color: #ffc84a;
    border-bottom: 0.25vw solid #ffc84a;
}

.navigation__submenu-item:hover > a, .reviews-container__prev:hover, .reviews-container__next:hover {
    color: #ffc84a;
}

.navigation__menu-item:hover .navigation__submenu {
    display: grid;
    grid-template-columns: repeat(1);
    grid-template-rows: repeat(6);
    margin-left: -1vw;
    z-index: 3;
}

.services {
    margin-top: 10vh;
}

#services__title {
    text-align: center;
    margin: 12vh 0;
}

#services__title > span {
    position: relative;
    font-size: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
    color: #000;
    border-radius: 0.15vw;
    box-shadow: 0 2px 7px 0 rgba(0,0,0,.15);
    padding: 1vw 1.5vw;
    background-color: #ffc84a;
}

#services__title > span::before, .services__title > span::after  {
    position: absolute;
    top: 100%;
    left: 50%;
    width: 15px;
    height: 15px;
    content: "";
    transform: translate(-50%,-50%) scale(1.15,.76) rotate(45deg);
    background-color: #ffc84a;
}

#services__title > span::after {
    box-shadow: 0 2px 7px 0 rgba(0,0,0,.15);
    z-index: -1;
}

.services-box {
    margin-top: 4vh;
    flex-wrap: wrap;
}

.services-box__item {
    width: 19.2%;
    min-width: 200px;
    margin: 2vh auto 0;
    flex-direction: column;
    border-radius: 0 0 0.5vw 0.5vw;
    box-shadow: 0 6px 18px 0 rgba(143,147,153,.24);
}

.services-box__item-img {
    width: 100%;
    padding-top: 70%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

.services-box__item-img--check {
    background-image: url("../img/check_auto.png");
}

.services-box__item-img--mechanic {
    background-image: url("../img/auto mechanic3.png");
}

.services-box__item-img--rb {
    background-image: url("../img/rb.png");
}

.services-box__item-img--china {
    background-image: url("../img/china.png");
}

.services-box__item-img--americ {
    background-image: url("../img/americ.png");
}

.services-box__item-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.services-box__item-title {
    min-height: 5vh;
    text-align: center;
    font-weight: bold;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    padding: 1vw 0.7vw;
}

.services-box__item-desc {
    padding: 0 0.7vw;
}

.services-box__item-desc p { 
    font-size: clamp(0.75rem, 0.597rem + 0.7648vw, 1.25rem);
    padding: 0.5vw 0;
}

.services-box__item-price {
    text-align: center;
    font-weight: bold;
    font-size: clamp(0.75rem, 0.4058rem + 1.7208vw, 1.875rem);
    padding-bottom: 0.5vw;
}

.services-box__item-button {
    color: #000;
    background-color: #ffc84a;
    text-align: center;
    border-radius: 0.5vw;
    padding: 0.7vw 0;
    border: 0.15vw solid #ffc84a;
    transition: .5s;
    cursor: pointer;
}

.services-box__item-button:hover {
    background-color: #fff;
    color: #ffc84a;
    border: 0.15vw solid #ffc84a;
}

.reviews-container {
    position: relative;
    width: 100%;
}

.reviews-container__review {
    height: 20vh;
    flex-direction: column;
    justify-content: center;
    padding: 0 5%;
}

.reviews-container__review-text, .reviews-container__review-name {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    text-align: justify;
}

.reviews-container__review-name {
    font-weight: bold;
    padding-bottom: 1vh;
}

.reviews-container__prev, .reviews-container__next {
    position: absolute;
    cursor: pointer;
    top: 50%;
    font-weight: bold;
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    margin-top: calc(clamp(1rem, 0.75rem + 1.25vw, 2.25rem)/-2);
    padding: 0 1%;
    transition: .6s ease;
}

.reviews-container__next {
    right: 0;
}

.reviews-container__nav {
    display: flex;
    justify-content: center;
}

.reviews-container__nav-dot {
    display: inline-block;
    width: clamp(12px, 1.5vw, 1.5vw);
    height: clamp(12px, 1.5vw, 1.5vw);
    margin: 0 0.1vw;
    border-radius: 50%;
    background-color: #ffc84a;
    cursor: pointer;
    transition: background-color .6s ease;
}

.reviews-container__nav-dot--active {
    background-color: #FF5F4A;
}

.feedback {
    display: flex;
    flex-direction: column;
    width: 90%;
    margin: 3vh auto 0 auto;
}

.feedback__result {
    text-align: center;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    margin-top: 1vh;
}

.guaranty {
    display: flex;
    justify-content: space-around;
}

.guaranty-type {
    width: 35%;
    display: flex;
    flex-direction: column;
}

.guaranty-type__imgcontainer {
    width: 100%;
    height: 20vh;
    margin-bottom: 1.5vh;
}

.guaranty-type__img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.guaranty-type__title, .guaranty-type__text {
    text-align: center;
    padding-top: 1.5vh;
}

.guaranty-type__title {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    font-weight: bold;
}

.footer {
    background-color: #FFA44A;
    margin-top: 5vh;
}

.footer iframe {
    width: 100%;
}

.footer__title {
    text-align: center;
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    padding: 2vh 0;
}

.footer__info {
    display: flex;
    padding-bottom: 3vh;
}

.footer__contact {
    width: 50%;
    border-right: 1px solid rgba(0,0,0,.2);
}

.footer__contact p {
    text-align: center;
    color: #000
}

.footer__contact p:first-child {
    padding-bottom: 1vh;
}

.footer__contact-number, .footer__contact-messenger {
    color: #000;
    text-decoration: none;
    transition: 1s;
}

.footer__contact-number {
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
}

.footer__contact-messenger {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
}

.footer__contact-number:hover, .footer__contact-messenger:hover {
    color: #fff
}

.social-network {
    width: 50%;
}

.social-network__title {
    color: #000;
    text-align: center;
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    padding-bottom: 1vh;
}

.social-network__icon-container {
    display: flex;
    width: 20%;
    margin: 0 auto;
    justify-content: space-around;
}

.social-network__icon {
    width: clamp(40px,20%, 100px);
}

.social-network__icon img {
    width: 100%;
}

.social-network__icon img:hover {
    filter: invert(1);
}

.justification {
    display: flex;
    justify-content: space-between;
}

.contacts, {
    padding-bottom: 5vh;
}

.section__subtitle, .section__desc {
    font-size: clamp(0.875rem, 0.8rem + 0.375vw, 1.25rem);
    padding: 1.25vh 5vw;
}

.section__subtitle {
    font-weight: bold;
}

.section__desc {
    text-align: justify;
}

.contacts p {
    text-align: center;
}

.title {
    display: block;
    text-align: center;
    font-size: clamp(1.5rem, 0.888rem + 3.06vw, 3.5rem);
    margin: 15vh 0 5vh;
}

.title--section {
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    margin: 3vh 0;
}

.error {
    display: flex;
    align-items: center;
    min-height: 58vh;
}

.error__404 {
    width: 30%;
    display: inline;
    text-align: center;
    font-size: clamp(2.25rem, 0.2615rem + 9.9426vw, 8.75rem);
    font-weight: bold;
}

.error__desc {
    width: 70%;
}

.error__desc-title {
    font-size: clamp(1rem, 0.75rem + 1.25vw, 2.25rem);
    margin: 3vh 0;
}

.error__desc-subtitle, .error__desc-list {
    font-size: clamp(0.625rem, 0.4338rem + 0.956vw, 1.25rem);
}

.error__desc-subtitle {
    margin-bottom: 3vh; 
}

.error__desc-list {
    margin-bottom: 6vh; 
}