/* ================================================GLOBAL=================================================== */

* {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 16px;
    color: white;
    line-height: 150%;
    scroll-behavior: smooth;
    /* outline : 1px solid red !important; */
}

body {
    background: url(../img/bgimg.jpg);
}

h1 {
    font-weight: 900;
    font-size: 80px;
    line-height: 125%;
    letter-spacing: 2px;
}

h2 {
    font-weight: 900;
    font-size: 64px;
    line-height: 150%;
    letter-spacing: 1px;
}

h3 {
    font-weight: 900;
    font-size: 32px;
    line-height: 125%;
}

svg {
    fill: white;
    display: block;
}

.car {
    display: block;
}

.load__anchor {
    position: fixed;
    width: 100%;
    height: 100%;
    background: url("../img/bgimg.jpg") 50% 50%;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    z-index: 1000;
    transition: 0.25s;
}

.load__anchor svg {
    margin-right: 30px;
}

#webapp_cover {
    display: none;
}

/* ================================================HEADER=================================================== */

header {
    background: url("../img/heroimg.jpg") 50% 50% / cover no-repeat;
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    height: 100vh;
    padding: 0 0 30px 0;
    box-shadow: 0 0 25px 5px black;
}

/* header__top */

.header__top {
    padding: 30px 0;
}

.header__top-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.header__logo {
    transition: 0.25s;
}

.header__logo svg {
    display: block;
}

.header__nav {}

.header__nav-list {
    display: flex;
    gap: 15px;
    list-style: none;
}

.header__nav-link {
    transition: 0.25s;
}

.header__nav-link:hover {
    font-size: 14px;
}

.header__contacts-list {
    text-align: end;
    list-style: none;
}

.header__contacts-link {
    text-decoration: underline 2px white solid;
    text-underline-offset: 5px;
}

/* header__body */

.header__body {
    height: 100%;
}

.header__main {
    display: flex;
    flex-flow: column;
    justify-content: center;
    height: 100%;
}

.header__title {
    max-width: 725px;
    margin: 15px 0;
    animation: header-title 1.5s;
}

.header__p-1 {
    font-size: 20px;
    animation: header-p 1.5s ease;
}

.header__p-2 {
    font-size: 20px;
    animation: header-p 1.5s ease-out;
}

.mobile-contacts-list {
    list-style: none;
    display: none;
    flex-flow: column;
    margin-top: 15px;
}

/* =================================================MAIN==================================================== */

/* service */

.service {}

.service__main {}

.service__title {
    text-align: end;
    margin: 100px;
}

.serivice__content {
    display: flex;
    flex-flow: column;
    gap: 180px;
}

.service__content-row {
    display: flex;
    align-items: center;
    gap: 100px;
}

.service__content-text {
    display: flex;
    flex-flow: column;
    max-width: 600px;
}

.service__content-h {
    margin: 60px 0 30px 0;
}

.service__content-p {}


.service__img {
    width: 600px;
    max-height: 100vh;
    border-radius: 10px;
}

.service__content-list {
    display: flex;
    flex-flow: column;
    gap: 30px;
}

.service__content-item {}

.service__content-list-h {
    margin: 5px;
}

.service__content-list-inner {
    padding-left: 15px;
}

.service__content-list-row3 {
    padding: 0 15px;
}

.service__content-list-row3 li {
    margin: 5px;
    font-size: 18px;
}

/* reviews */

.reviews {
    margin: 100px 0;
    padding: 100px 0;
    box-shadow: 0 0 25px 5px black;
}

.reviews__title {
    text-align: end;
}

.reviews__window {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.reviews__window iframe {
    width: 600px;
    height: 100vh;
    border-radius: 10px;
}

.reviews__window-title {
    text-align: end;
    text-decoration: underline 3px white solid;
    text-underline-offset: 5px;
    transition: 0.25s;
}

/* contacts */

.contacts {
    margin-bottom: 100px;
}

.contacts__title {
    text-align: end;
}

.contacts__main {
    display: flex;
    gap: 30px;
}

.map-container {
    width: 600px;
    height: 100vh;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

#map {
    width: 100%;
    height: 100%;
}

.contacts__div-box {
    display: flex;
    flex-flow: column;
    margin: auto auto auto;
    gap: 15px;
}

.contacts__div {
    display: flex;
    align-items: center;
    gap: 15px;
}

.contacts__p {}

.contacts__nav-link {
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: underline 2px white solid;
    text-underline-offset: 5px;
    transition: 0.25s;
}

/* ================================================FOOTER=================================================== */

.footer {
    padding: 30px 0 30px 0;
    box-shadow: 0 0 25px 5px black;
}

.footer__top-inner {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer__nav {}

.footer__nav-list {
    gap: 15px;
    list-style: none;
}

.footer__nav-item {}

.footer__nav-link {}

.footer__titles {
    display: flex;
    flex-flow: column;
    text-align: end;
    margin-left: auto;
    gap: 5px;
}

/* ================================================GALLERY.HTML=================================================== */

.gallery {
    padding: 100px 0;
}

.gallery__h2 {
    animation: header-p 1.5s;
}

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

.gallery__main {
    display: grid;
    grid-gap: 15px;
    justify-content: center;
    grid: repeat(15, 100px) / repeat(10, 100px);
}

.photo {
    background-size: cover;
    border-radius: 10px;
    box-shadow: 0 0 5px 1px black;
    transition: 0.5s;
}

.photo:hover {
    transform: scale(1.5);
    border: 1px solid white;
    z-index: 50;
}

.photo1 {
    grid-row: 1 / 4;
    grid-column: 1 / 3;
    background-image: url(../img/gallery/galleryimg6.jpg);
}

.photo2 {
    grid-row: 1 / 5;
    grid-column: 3 / 5;
    background-image: url(../img/gallery/galleryimg1.jpg);
}

.photo3 {
    grid-row: 1 / 5;
    grid-column: 5 / 7;
    background-image: url(../img/gallery/galleryimg2.jpg);
}

.photo4 {
    grid-row: 1 / 3;
    grid-column: 7 / 11;
    background-image: url(../img/gallery/galleryimg4.png);
}

.photo5 {
    grid-row: 3 / 7;
    grid-column: 7 / 9;
    background-image: url(../img/gallery/galleryimg17.jpg);
}

.photo6 {
    grid-row: 3 / 7;
    grid-column: 9 / 11;
    background-image: url(../img/gallery/galleryimg18.jpg);
}

.photo7 {
    grid-row: 4 / 8;
    grid-column: 1 / 3;
    background-image: url(../img/gallery/galleryimg3.jpg);
}

.photo8 {
    grid-row: 5 / 8;
    grid-column: 3 / 5;
    background-image: url(../img/gallery/galleryimg5.jpg);
}

.photo9 {
    grid-row: 5 / 8;
    grid-column: 5 / 7;
    background-image: url(../img/gallery/galleryimg7.png);
}

.photo10 {
    grid-row: 7 / 11;
    grid-column: 7/ 9;
    background-image: url(../img/gallery/galleryimg8.jpg);
}

.photo11 {
    grid-row: 7 / 11;
    grid-column: 9 / 11;
    background-image: url(../img/gallery/galleryimg9.jpg);
}

.photo12 {
    grid-row: 8 / 12;
    grid-column: 1 / 3;
    background-image: url(../img/gallery/galleryimg10.jpg);
}

.photo13 {
    grid-row: 8 / 12;
    grid-column: 3 / 5;
    background-image: url(../img/gallery/galleryimg11.jpg);
}

.photo14 {
    grid-row: 8 / 12;
    grid-column: 5 / 7;
    background-image: url(../img/gallery/galleryimg12.jpg);
}

.photo15 {
    grid-row: 11 / 14;
    grid-column: 7 / 9;
    background-image: url(../img/gallery/galleryimg13.jpg);
}

.photo16 {
    grid-row: 11 / 14;
    grid-column: 9 / 11;
    background-image: url(../img/gallery/galleryimg14.jpg);
}

.photo17 {
    grid-row: 12 / 16;
    grid-column: 1 / 3;
    background-image: url(../img/gallery/galleryimg15.jpg);
}

.photo18 {
    grid-row: 12 / 16;
    grid-column: 3 / 5;
    background-image: url(../img/gallery/galleryimg16.jpg);
}

.photo19 {
    grid-row: 12 / 16;
    grid-column: 5 / 7;
    background-image: url(../img/gallery/galleryimg19.jpg);
}

.photo20 {
    grid-row: 14 / 16;
    grid-column: 7 / 11;
    background-image: url(../img/gallery/review.png);
}