@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;300;400;700;800;900&display=swap');

:root {
    /* Colors */
    --primary: #9CC155;
    --primary_hover:#7DAA25;
    --default: #050503;
    --light: #fff;
    --light-gray: #b0afaf;
    --gray: #282828;
    --black: #111;
    --dark: #1C1C1C;

    /* Fonts */
    --font_family: "Nunito Sans", sans-serif;

    --font_black_0: 900 100px var(--font_family);
    --font_black_1: 900 60px var(--font_family);
    --font_black_2: 900 50px var(--font_family);
    --font_black_3: 900 30px var(--font_family);
    --font_black_4: 900 18px var(--font_family);

    --font_extra_bold_1: 800 40px var(--font_family);
    --font_extra_bold_2: 800 30px var(--font_family);

    --font_bold_1: 700 40px var(--font_family);
    --font_bold_2: 700 24px var(--font_family);
    --font_bold_3: 700 30px var(--font_family);

    --font_regular_1: 400 18px var(--font_family);

    --font_light_1: 300 30px var(--font_family);
    --font_light_2: 300 24px var(--font_family);
    --font_light_3: 300 18px var(--font_family);
    --font_light_4: 300 16px var(--font_family);

    --border_radius: 20px;
}

@media only screen and (max-width: 1024px) {
    :root {
        --font_black_0: 900 37px var(--font_family); /* + */
        --font_black_1: 900 30px var(--font_family); /* + */
        --font_black_2: 900 20px var(--font_family); /* + */
        --font_black_3: 900 14px var(--font_family); /* + */
        --font_black_4: 900 14px var(--font_family); /* + */

        --font_extra_bold_1: 800 40px var(--font_family);
        --font_extra_bold_2: 800 30px var(--font_family);
    
        --font_bold_1: 700 16px var(--font_family); /* + */
        --font_bold_2: 700 14px var(--font_family); /* + */
        --font_bold_3: 700 16px var(--font_family); /* + */
    
        --font_regular_1: 400 16px var(--font_family); /* + */
    
        --font_light_1: 300 18px var(--font_family); /* + */
        --font_light_2: 300 14px var(--font_family); /* + */
        --font_light_3: 300 14px var(--font_family); /* + */
        --font_light_4: 300 14px var(--font_family); /* + */
    }

}

* {
    text-decoration: none;
    box-sizing: border-box;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

p {
    margin: 35px 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font_family);
    color: var(--light);
    background: var(--black);
}

.container {
    width: 100%;
    max-width: 1600px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
    box-sizing: content-box;
}

header {
    backdrop-filter: blur(15px);
    background: rgba(17, 17, 17, 0.4);
    height: 103px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    width: 100%;
}

header > * {
    display: flex;
    justify-content: space-between;
}

header nav {
    display: flex;
    align-items: center;
    margin-left: 100px; 
}

header nav ul {
    display: flex;
    gap: 30px;
}

header nav ul li a {
    font: var(--font_light_4);
    color: var(--light-gray);
}

header nav ul li a:hover,
header nav ul li a.active {
    color: var(--light);
    text-decoration: underline;
}

.header_left {
    display: flex;
}

.header_contacts {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header_contacts__social {
    background: rgba(6, 6, 6, 0.2);
    padding: 10px 20px;
    display: flex;
    gap: 30px;
    border-radius: 6px;
}

.header_contacts__social a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--light);
}

.hr {
    width: 1px;
    height: 100%;
    background: var(--primary);
    height: 45px;
}

.hero {
    height: 1008px;
    background: url('../images/hero-bg.webp') no-repeat;
    display: flex;
    align-items: center;
}

.hero__title {
    font: var(--font_black_1);
    width: 730px;
}

.hero__desc {
    margin-top: 30px;
    font: var(--font_light_1);
}

/* button */
button,
.btn {
    width: 250px;
    height: 60px;
    font: var(--font_regular_1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

.btn_green {
    background: var(--primary);
    color: var(--light);
}

.btn_green:hover {
    background: var(--primary_hover);
}

.btn_hero {
    margin-top: 80px;
}

.btn_dark {
    background: var(--dark);
    color: var(--light);
}

.btn_dark:hover {
    color: var(--primary)
}

/* button end */

.advantages {
    padding: 110px 160px;
}

.title {
    font: var(--font_black_2);
    position: relative;
    padding-top: 60px;
    margin-bottom: 80px;
    margin-top: 110px;
}

.title_bg {
    font: var(--font_black_0);
    color: var(--gray);
    position: absolute;
    top: 0;
    z-index: -1;
}

.advantages__row {
    display: flex;
    gap: 50px;
    margin-top: 75px;
}

.advantages__item {
    flex: 1;
    padding: 50px;
    border-radius: var(--border_radius);
    border: 1px solid var(--primary);
}

.advantages__item__title {
    margin-top: 30px;
    font: var(--font_black_4);
    text-transform: uppercase;
}

.advantages__item__text {
    margin-top: 20px;
    font: var(--font_light_4);
}

.advantages__lists {
    margin-top: 80px;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.advantages__lists__item {
    font: var(--font_light_2);
    border-left: 2px solid var(--primary);
    padding-left: 50px;
}

.consultation {
    background: url('../images/consultation-bg.webp') no-repeat var(--primary);
    color: var(--light);
    height: 524px;
    position: relative;
}

.consultation__text {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    margin: auto;
    height: max-content;
}

.consultation__title {
    font: var(--font_black_2);
}

.consultation__desc {
    font: var(--font_light_1); 
    margin-top: 30px; 
}

.btn_consultation {
    margin-top: 80px;
}

.portfolio {
    position: relative;
    padding-top: 110px;
    overflow: hidden;
}

.portfolio__slider {
    width: 1420px;
    position: absolute !important;
    right: -300px;
    top: 110px;
}

.portfolio__slider__item {
    position: relative;
}

.portfolio__slider__img::after {
	content: '';
	width: 100%;
	height: 70%;
	background: linear-gradient(180deg, rgba(28, 28, 28, 0.5) 0%, rgba(28, 28, 28, 0) 100%);
    position: absolute;
    top: 0;
}

.portfolio__slider__img img {
	height: 700px;
    width: 685px;
    object-position: center;
    object-fit: cover;
	border: 1px solid #9CC155;
    border-radius: 20px;
}

.portfolio__slider__text {
    position: absolute;
    top: 0;
    padding: 50px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.portfolio__slider__title {
    font: var(--font_bold_1);
    color: var(--light);
}

.portfolio__slider__play {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    margin: auto;
    width: 150px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    cursor: pointer;
}

.portfolio__slider__play::before {
    content: '';
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    filter: blur(1px);
    width: 100%;
    height: 100%;
    display: block;
}

.portfolio__slider__play svg {
    position: absolute;
}

.portfolio__title {
    font: var(--font_black_2); 
    padding-left: 50px;
    border-left: 2px solid var(--primary);
    width: 335px;
}

.portfolio__all-link {
    display: block;
    margin-top: 50px;
    font: var(--font_light_3);
    color: var(--primary);
}

.portfolio__slider-arrows {
    display: flex;
    gap: 20px;
    margin-top: 370px;
}

.portfolio__slider-arrow {
    background: var(--primary);
    width: 60px;
    height: 60px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.calculation {
    background: var(--primary);
    color: var(--light);
    padding: 50px;
    padding-left: 0;
    display: inline-block;
    font: var(--font_light_1);
    margin-top: 170px;
    border-radius: 0 20px 20px 0;
    position: relative;
}

.calculation::before {
    content: '';
    display: inline-block;
    height: 100%;
    width: 50%;
    position: absolute;
    transform: translate(-100%, 0);
    top: 0;
    background: var(--primary);
}

.calculation__text {
    border-left: 2px solid var(--light);
    padding-left: 30px;
}

.calculation__text span {
    font-weight: 900;
    text-transform: uppercase;
}

.services {
    margin-top: 110px;
}

.services__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    flex-wrap: wrap;
    gap: 45px 50px;
    margin-top: 80px;
}

.services__item {
    flex: 1;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
}

.services__item img {
    height: 495px;
    width: 100%;
}

.services__item__img::after {
    content: '';
    width: 100%;
    height: 50%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: linear-gradient(1deg, black, transparent);
}

.services__item__title {
    font: var(--font_bold_3);
    position: absolute;
    bottom: 0;
    padding: 50px;
    color: var(--light);
}

.services__item img {
    border-radius: 20px;
}

.about-us {
    margin-top: 110px;
    margin-bottom: 110px;
}

.send-email {
    background: var(--primary);
    padding: 80px 0;
}

.send-email>* {
    display: flex;
    gap: 100px;
}

.send-email__title {
    font: var(--font_black_2);   
}

.send-email__desc {
    margin-top: 30px;
    font: var(--font_light_1);
}

.send-email__text {
    font: var(--font_light_4);
    padding-left: 30px;
    border-left: 2px solid var(--light);
    margin-top: 63px;
}

input {
    width: 100%;
    border: 1px solid #c0d792;
    border-radius: 10px;
    height: 65px;
    padding: 0 30px;
    background: none;
    color: #e3f5be;
    font: var(--font_regular_1);
    margin-bottom: 20px;
}

input::placeholder {
    color: #e3f5be;
}

.wpcf7-form input[type="checkbox"]{
    width: auto;
    height: auto;
}

footer {
    padding: 80px 0;
}

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

.footer__menu_row,
.footer__info_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer__menu_row a {
    color: var(--light);
}

.footer__contacts {
    text-align: right;
}

.footer__contacts__phone {
    font: var(--font_bold_2);
    margin-top: 10px;
}

footer .header_contacts__social {
    padding: 0;
    margin-top: 30px;
    justify-content: flex-end;
}

.copyright {
    text-align: center;
    color: #646464;
    margin-top: 40px;
}

.header_contacts__phone {
    color: var(--light);
    display: flex;
    align-items: center;
    gap: 10px;
}

.page_title {
    font: var(--font_black_2);
    margin-top: 183px;
    border-left: 2px solid var(--primary);
    padding-left: 50px;
    margin-bottom: 80px;
}

.project_gallery {
    width: 920px;
    position: relative;
}

.project_gallery .slider-item img {
    border-radius: 20px;
    width: 100%;
    height: 690px;
}

.project_gallery .slick-dots {
    display: flex;
    gap: 30px;
    margin-top: 30px;
}

.project_gallery .slick-dots img {
    width: 207px;
    height: 155px;
    border-radius: 20px;
	object-fit: cover;
}

.project_gallery .arrow {
    position: absolute;
    top: 250px;
    height: max-content;
    z-index: 1;
    cursor: pointer;
}

.project_gallery .arrow.preview {
    left: 0;
}

.project_gallery .arrow.next {
    right: 0;
}

.project_wrapper {
    display: flex;
    gap: 50px;
}

.project_info {
    font: var(--font_light_2);
}

.project_info span {
    color: var(--primary)
}

.project_info__characteristics {
    margin-top: 70px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.project_info__characteristics span {
    font: var(--font_extra_bold_2);
    margin-right: 5px;
}

.project_info__characteristics__item {
    border-left: 2px solid var(--primary);
    padding-left: 30px;
}

.project_price {
    margin-top: 60px;
}

.project_price span {
    font: var(--font_extra_bold_1);   
    margin: 0 5px;
}

.project_info__area_along-axes span {
    display: block;
    font: var(--font_extra_bold_1); 
}

.portfolio_page__item {
    width: calc(40% - 20px);
    display: block;
    height: 572px;
    position: relative;
}

.portfolio_page__item:nth-child(4n),
.portfolio_page__item:nth-child(4n+1),
.portfolio_page__item:nth-child(1) {
    width: calc(60% - 20px);
}

.portfolio_page__item img {
    object-fit: cover;
    max-width: 100%;
    max-height: 100%;
    height: 572px;
    width: 100%;
    border-radius: 20px;
}

.portfolio_page__row {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}

.portfolio__page__text {
    font: var(--font_bold_1);
    color: var(--light);
    position: absolute;
    bottom: 50px;
    left: 50px;
}

.planirovka__text {
    margin-top: 110px;
    text-align: center;
    width: 780px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 110px;
}

.planirovka__text_title {
    font: var(--font_black_2);
    text-align: center;
    margin-top: 110px;
}

.planirovka__text_desc {
    font: var(--font_light_2);
    margin-top: 40px;
}

.planirovka__text a {
    margin-top: 40px;
    margin-left: auto;
    margin-right: auto;
    gap: 10px;
}

.mobile-menu {
    display: none;
}

.cat-lists {
    margin-bottom: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cat-list {
    color: #fff;
    font-size: 20px;
    border: 1px solid var(--primary);
    padding: 10px 30px;
    border-radius: 10px;
}

.cat-list:hover,
.active {
    background: var(--primary);
}

.content-pages {
    margin-top: 150px;
    margin-bottom: 100px;
}

form a {
    color: #050503;
    text-decoration: underline;
}

.tab {
    position: relative;
    display: none;
}

.tab-visible {
    display: block;
}

.portfolio .cat-lists {
    position: absolute;
/*     right: 887px; */
    z-index: 9;
    cursor: pointer;
	left: 660px;
}

.not-font {
    font-size: 150px;
    width: 100vw;
    height: 100vh;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media only screen and (max-width: 1024px) {

    .container {
        box-sizing: border-box;
    }

    .advantages__row,
    .services__row {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
    }

    .services__row {
        flex-direction: column;
    }

    .hero {
        height: 482px;
        padding-top: 100px;
    }

    header nav,
    .header_contacts__social {
        display: none;
    }

    .services__item img,
    .hero__title {
        width: 100%;
        height: auto;
    }

    .btn_hero {
        margin-top: 30px;
    }

    button, .btn {
        border-radius: 6px;
        padding: 12px 24px;
        width: 158px;
        height: 46px;
    }

    .header_logo img {
        width: 50px;
        height: auto;
    }

    header {
        height: 70px;
    }

    .advantages {
        padding: 0;
    }

    .title {
        margin-top: 50px;
        margin-bottom: 30px;
        padding-top: 25px;
    }

    .advantages__item {
        padding: 30px;
    }

    .advantages__row {
        margin-top: 30px;
        flex-direction: column;
    }

    .advantages__item__title {
        margin-top: 20px;
    }

    .advantages__lists {
        margin-top: 40px;
        margin-bottom: 50px;
        gap: 30px;
    }
    
    .advantages__lists__item {
        padding-left: 20px;
    }

    .consultation__text {
        position: static;
        padding: 40px 15px;
    }

    .advantages__item__text {
        margin-top: 10px;
    }

    .consultation__desc {
        margin-top: 10px;
    }

    .btn_consultation {
        margin-top: 30px;
    }

    .consultation {
        background-size: 500px;
        background-position: -20% 100%;
    }

    .portfolio__slider {
        width: 100%;
        position: static !important;
        order: -1;
    }

    .portfolio {
        display: flex;
        flex-direction: column;
    }

    .portfolio__slider__text {
        padding: 30px;
    }

    .slick-slide img {
        width: 100%;
        height: 300px;
    }

    .portfolio__slider__play {
        height: 68px;
        width: 68px;
    }

    .portfolio__slider__play svg {
        width: 16px;
        height: 18px;
    }

    .portfolio__title {
        width: 100%;
        padding-left: 20px;
        position: absolute;
        top: 50px;
    }

    .portfolio__block {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 100px;

    }

    .portfolio__slider-arrows {
        margin-top: 0px;
        gap: 10px;
    }

    .portfolio__all-link {
        margin-top: 0;
    }

    .calculation {
        margin-top: 50px;
        padding: 20px;
    }

    .services__row {
        margin-top: 30px;
    }

    .services__item__title {
        padding: 20px;
    }

    .about-us {
        margin-top: 50px;
        margin-bottom: 50px;
    }

    .send-email {
        padding: 40px 0;
    }

    .send-email>* {
        flex-direction: column;
        gap: 40px;
    }

    .send-email__desc {
        margin-top: 10px;
    }

    .send-email__text {
        margin-top: 20px;
    }

    footer {
        padding: 40px 0;
    }

    .footer__logo img {
        width: 63px;
        height: auto;
    }

    .footer__info_row {
        order: 2;
    }

    .footer__menu_row {
        order: 3;
    }

    .footer__contacts {
        order: 4;
        width: 200px;
    }

    .footer__row {
        flex-wrap: wrap;
        gap: 40px;
    }

    .footer__menu_row, .footer__info_row {
        gap: 5px;
    }

    .page_title {
        margin-top: 120px;
        margin-bottom: 30px;
    }

    .project_gallery {
        width: 100%;
    }

    .project_gallery .slick-dots img {
        width: 100%;
        max-width: 120px;
        border-radius: 8px;
        height: auto;
    }

    .project_gallery .arrow {
        top: 125px;
    }

    .project_gallery .slick-dots {
        margin-top: 20px;
        gap: 10px;
    }

    .project_wrapper {
        flex-direction: column;
    }

    .project_wrapper {
        gap: 30px;
    }

    .project_info__characteristics,
    .project_price {
        margin-top: 30px;
    }

    .content img {
        width: 100%;
        height: auto;
    }

    .planirovka__text {
        width: 100%;
        margin: 50px 0;
    }

    .planirovka__text_title {
        margin-top: 50px;
    }

    .planirovka__text_desc {
        margin-top: 10px;
    }

    .planirovka__text button {
        margin-top: 30px;
    }

    .advantages__item {
        width: 100%;
    }

    .portfolio_page__row {
        flex-direction: column;
    }

    .portfolio_page__item {
        width: 100% !important;
        height: auto;
    }

    .portfolio_page__item img {
        height: auto;
        width: 100%;
        border-radius: 16px;
    }

    .portfolio__slider__img {
        height: 200px;
    }
    
    .portfolio_page__row {
        gap: 20px;
    }

    .portfolio__page__text {
        bottom: 20px;
        left: 20px;
    }

    .hr {
        display: none;
    }
    
    .menu-icon {
        width: 15px;
        height: 3px;
        background: #fff;
        cursor: pointer;
    }

    .menu-icon::before {
        content: '';
        display: block;
        width: 25px;
        height: 3px;
        background: #fff;
        position: relative;
        top: -10px;
    }

    .menu-icon::after {
        content: '';
        display: block;
        width: 20px;
        height: 3px;
        background: #fff;
        position: relative;
        top: 8px;
    }

    .menu-toggle {
        display: flex;
        align-items: center;
        width: 30px;
        height: 30px;
    }

    header > * {
        align-items: center;
    }

    .mobile-menu {
        position: absolute;
        top: 50px;
        width: 100%;
        height: max-content;
        background: rgba(0, 0, 0, 0.9);
        padding: 30px 0;
    }

    .mobile-menu nav {
        display: block;
        margin: 0;
        margin-bottom: 88px;
    }
    
    .mobile-menu .header_contacts__social {
        display: flex !important;
        padding-left: 0;
    }
    
    .mobile-menu .footer__contacts__adress {
        margin-bottom: 7px;
    }

    .portfolio .cat-lists {
        position: static;
    }

    .project_gallery .slider-item img {
        height: auto;
    }
}