body, html {
    scroll-behavior: smooth;
}

main { 
    display: flex; gap: 150px;
    flex-direction: column;
    margin-bottom: 150px;
    overflow-x: hidden;
}



.hero {
    background-image: url('http://domyar.ru/wp-content/uploads/2025/12/hero-bg.webp');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.hero__content { 
    display: flex; gap: 100px;
    justify-content: space-between;
    align-items: center;
    padding-block: 210px 100px; 
}
.hero__content > * { 
    position: relative;
    z-index: 1;
}
.hero::before,
.hero__content::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.hero::before {
    width: 50%;
    height: 70%;
    right: 0;
    bottom: 0;
    border-top-left-radius: 400px;
    background-color: var(--green-color);
    background-image: 
        linear-gradient(to top, 
            var(--black-color) 0%, 
            var(--green-color) 100%
        );
}
.hero__content::after {
    width: 80%;
    height: 85%;
    right: 0;
    transform: translateX(35%);
    bottom: 0;
    background-image: url(http://domyar.ru/wp-content/uploads/2025/12/hero-man.webp);
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: contain;
}
.hero__content-inner { 
    display: flex; gap: 60px;
    flex-direction: column;
}
.hero__content-main {
    display: flex; gap: 100px;
    align-items: center;
}
.hero .circle-button {
    width: 153px;
    height: 153px;
	white-space: wrap;
    background-color: var(--white-color);
    outline: 1px solid var(--white-color);
    outline-offset: 20px;
    border-radius: 50%;
    position: relative;
    transition: 
        filter 0.2s ease,
        outline-offset 0.2s ease;
    will-change: 
        filter,
        outline-offset;
}
.hero .circle-button .text { text-align: center; }
.hero .circle-button .svg {
    position: absolute;
    top: 4px; right: 4px;
}
.hero .circle-button .svg::before { 
    background-color: var(--black-color); 
}
.hero .circle-button .svg svg path { 
    stroke: var(--green-color);
    transform: rotate(135deg);
}
.hero .circle-button:hover { outline-offset: 16px; }
.hero .circle-button:hover .svg svg path {
    transform: rotate(0deg);
}
.hero__content-main-inner {
    display: flex; gap: 20px;
    flex-direction: column;
}
.hero hgroup { 
	display: flex; gap: 20px; 
	flex-direction: column;
}
.hero__list { padding-left: 30px; }
.hero__list li::marker {
	color: var(--white-color);
    font-size: 30px;
}
.hero__content-main-inner .button {
	max-width: 450px; width: 100%;
    justify-content: space-between;
}
.hero__content-down {
    width: 80%;
    display: grid; gap: 20px;
    grid-template-columns: 1fr 1.5fr 1.5fr;
    grid-template-areas:  
        'elem-1 elem-2 elem-3'
        'elem-1 elem-2 elem-4';
}
.hero .down-elem--1 { grid-area: elem-1; }
.hero .down-elem--2 { grid-area: elem-2; }
.hero .down-elem--3 { grid-area: elem-3; }
.hero .down-elem--4 { grid-area: elem-4; }
.hero .down-elem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    overflow: hidden;
    border-radius: 20px;
    background-color: var(--white-color-a30);
    backdrop-filter: blur(10px);
}
.hero .down-elem.row { flex-direction: row; gap: 20px; }
.hero .down-elem.col { flex-direction: column; }
.hero .down-elem--1 svg,
.hero .down-elem--2 svg {
    margin-top: auto;
    margin-left: auto;
}
.hero .down-elem--1 svg {
    position: relative;
    bottom: -20px;
    right: -20px;
}
.hero__content-right {
	pointer-events: none;
    display: flex; gap: 20px;
    flex-direction: column;
	padding-top: 200px;
}
.hero .right-elem {
    display: flex; gap: 10px;
    flex-direction: column;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--black-color-a40);
    backdrop-filter: blur(10px);
}



.risk__content {
    display: flex; gap: 20px;
    align-items: stretch;
}
.risk__card {
    display: grid; gap: 20px;
    grid-template-columns: 1fr 0fr;
    padding: 20px;
    width: 30%;
    height: 390px;
    border-radius: 20px;
    background-color: var(--green-color);
    transition: 
        grid-template-columns 0.2s ease,
        width 0.2s ease;
    will-change: grid-template-columns, width;
}
.risk__content:not(:has(.risk__card:hover)) .risk__card:first-child {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    width: 100%;
}
.risk__card .swapper-text p:last-child {
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: opacity;
}
.risk__content:not(:has(.risk__card:hover)) .risk__card:first-child .swapper-text p:last-child,
.risk__card:hover .swapper-text p:last-child {
    opacity: 1;
}
.risk__card:hover { 
    grid-template-columns: minmax(48%, 1fr) minmax(48%, 1fr);
    width: 100%;
}
.risk .main-content {
    display: flex; gap: 50px;
    flex-direction: column;
}
.risk .number { background-color: var(--black-color); }
.risk .number span { color: var(--green-color); }
.risk__card .swapper-text {
    display: flex; gap: 10px;
    flex-direction: column;
}
.risk__card:not(:hover, .open) .swapper-text p:first-child { text-align: center; }
.risk__card-image { 
    width: 100%;
    height: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 20px;
}




.do-for-you__content {
    display: grid; gap: 20px;
    grid-template-columns: repeat(4, 1fr);
}
.do-for-you__card {
    border-radius: 20px;
    overflow: hidden;
}
.do-for-you .number {
    position: absolute;
    z-index: 3;
    top: 20px;
    left: 20px;
}
.do-for-you .number svg { display: none; }
.do-for-you__card figure { height: 100%; }
.do-for-you_card-image {
    width: 100%;
    height: 100%;
    z-index: 1;
    object-fit: cover;
}
.do-for-you__card figure::before,
.do-for-you__card figure::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    will-change: opacity;
}
.do-for-you__card figure::before {
    background-color: var(--black-color-a50);
    opacity: 1;
}
.do-for-you__card figure::after {
    background-color: var(--green-color);
    opacity: 0;
}
.do-for-you__card figcaption {
    position: absolute;
    z-index: 3;
    top: 50%; left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    margin-inline: auto;
    padding-inline: 20px;
    text-align: center;
}
.do-for-you__card figcaption p:last-child {  display: none;}
.do-for-you__card:hover figure::before { opacity: 0; }
.do-for-you__card:hover figure::after { opacity: 1; }
.do-for-you__card:hover .number { background-color: var(--black-color); }
.do-for-you__card:hover .number span { display: none; }
.do-for-you__card:hover .number svg { display: block; }
.do-for-you__card:hover figcaption p:first-child { display: none; }
.do-for-you__card:hover figcaption p:last-child {  display: block; }
.do-for-you .cta {
    display: flex; gap: 30px;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 20px;
    border-radius: 90px;
    background-color: var(--grey-color);
}



.quiz {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: var(--color-bg-quiz);
}
.quiz hgroup { 
    padding-block: 40px 50px;
}
.quiz .heading { margin-bottom: 20px; }
.quiz .heading span { color: var(--white-color-a50); }
.quiz .marquiz__container_inline { max-width: unset; }




.projects__content { overflow-x: clip; }
.projects > * > hgroup { 
    margin-bottom: 50px;
    transition: margin-bottom 0.2s ease;
    will-change: margin-bottom;
}
.projects > * > * > .heading { margin-bottom: 20px; }
.projects .projects__slider { 
    overflow: visible; 
    padding-bottom: 100px;
}
.projects__slider > .swiper-wrapper { 
    padding-block: 100px 160px; 
    align-items: center;
}
.projects .hidden-content {
    overflow: hidden;
    max-height: 0; 
    transition: 
        max-height 0.2s ease,
        margin-block 0.2s ease;
    will-change: max-height, margin-block;
}
.projects .hidden-content ul li {
    display: flex; gap: 10px;
    align-items: center;
}
.projects__slider > * > .swiper-slide {
    aspect-ratio: 660 / 850;
    transition: 
        scale 0.2s ease,
        width 0.2s ease;
    will-change: scale, width;
}
.projects__slider > .swiper-wrapper > .swiper-slide { 
    scale: 0.8; 
    z-index: 1;
}
.projects__slider > .swiper-wrapper > .swiper-slide-active { 
    scale: 1;
    z-index: 2;
}
.projects__slider .swiper-slide-active .hidden-content {
    max-height: 500px; 
}
.projects__slider .swiper-slide .project__slider .swiper-pagination {
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: opacity;
}
.projects__slider .swiper-slide-active .project__slider .swiper-pagination {
    opacity: 1;
}
.projects__slider .swiper-slide:not(.swiper-slide-active) .project__slider {
    pointer-events: none;
}
.projects__slider .swiper-slide.swiper-slide-active .project__slider {
    pointer-events: auto;
	aspect-ratio: 2 / 1;
}
.projects .project__slider img { max-height: 300px; }
.projects .project-card { 
    background-color: var(--grey-color);
    border-radius: 30px;
    overflow: hidden;
}
.projects .swiper-buttons {
    position: absolute;
    top: -130px;
    right: 0;
    width: 150px;
    height: 100px;
}
.projects .swiper-button-prev svg { transform: rotate(180deg); }
.projects .swiper-buttons > div {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 50%;
    background-color: var(--green-color);
    filter: brightness(1);
    transition: filter 0.2s ease;
    will-change: filter;
}
.projects .swiper-buttons > div:hover { filter: brightness(0.9); }
.projects .project-card figcaption {
    padding: 20px;
	max-height: max-content;
}
.projects .project-card__prices {
    display: flex; gap: 10px;
    align-items: center;
}
.projects .projects__slider > * > .swiper-slide-active > .project-card { 
    width: 150%;
    margin-top: -25%;
    margin-left: -25%;
}
.projects .projects__slider .swiper-slide .project-card__caption hgroup { margin-bottom: 20px; }
.projects .projects__slider .swiper-slide-active .project-card__caption hgroup { margin-bottom: 30px; }
.projects .projects__slider .swiper-slide .hidden-content { 
    margin-block: 0;
}
.projects .projects__slider .swiper-slide-active .hidden-content { 
    margin-block: 30px; 
}
.projects .cta {
    display: flex; gap: 30px;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    padding: 50px;
    border-radius: 90px;
    background-color: var(--black-color);
}
.projects .cta figure {
    display: flex;
    gap: 20px;
    align-items: center;
/*     left: 60px; */
}
.projects .cta img {
    max-width: 260px;
    margin-top: -200px;
    bottom: -50px; 
}


.stages {
    background-color: var(--grey-color);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}
.stages .container { padding-block: 40px; }
.stages hgroup { margin-bottom: 50px; }
.stages hgroup .heading { margin-bottom: 20px; }
.stages__content {
    display: flex; gap: 40px;
    justify-content: space-between;
}
.stages .cta {
    max-width: 550px;
    width: 100%;
    display: flex; gap: 20px;
    flex-direction: column;
}
.stages .cta__content {
    display: flex; gap: 20px;
    flex-direction: column;
    padding: 30px 20px;
    border-radius: 30px;
    background-color: var(--black-color);
}
.stages .cta .heading span { color: var(--white-color-a50); }
.stages .cta img { 
    max-height: 240px; 
    border-radius: 30px;
}
.stages .cta ul { 
    list-style: none;
    display: flex; gap: 10px;
    flex-direction: column;
}
.stages .cta ul li {
    display: flex; gap: 10px;
    align-items: center;
}
.stages .cta .button {
    max-width: 100%;
    justify-content: space-between;
}




.form .heading span { color: var(--white-color-a50); }
.form__content {
    display: grid; gap: 20px;
    grid-template-columns: repeat(auto-fit, minmax(620px, 1fr) minmax(300px, 1fr));
}
.form__body {
    text-align: center;
    padding: 30px 20px;
    border-radius: 20px;
    background-color: VAR(--black-color);
}
.form__body header p:first-of-type { margin-bottom: 20px; }
.form img { 
    border-radius: 20px; 
    height: 100%;
}
.form .form__body p.text { display: none; }
.wpforms__file > div { border-radius: 30px !important; }



.portfolio .tabs { 
    display: flex; gap: 20px; 
    justify-content: center;
    margin-bottom: 40px;
	flex-wrap: wrap;
}
.portfolio .tab .text { white-space: nowrap; } 
.portfolio .tab.active { background-color: var(--green-color); }
.portfolio .panel { 
    display: grid; gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(4, 225px);
}
.portfolio__content .panels > :nth-child(odd of .panel) {
    grid-template-areas: 
        "e1 e1 e2 e3"
        "e1 e1 e4 e4"
        "e5 e6 e7 e8"
        "e5 e6 e9 e8";
}
.portfolio__content .panels > :nth-child(even of .panel) {
    grid-template-areas: 
        "e1 e2 e3 e4"
        "e1 e6 e6 e4"
        "e5 e6 e6 e8"
        "e7 e7 e9 e8";
}
.portfolio .panel > :nth-child(1) { grid-area: e1; }
.portfolio .panel > :nth-child(2) { grid-area: e2; }
.portfolio .panel > :nth-child(3) { grid-area: e3; }
.portfolio .panel > :nth-child(4) { grid-area: e4; }
.portfolio .panel > :nth-child(5) { grid-area: e5; }
.portfolio .panel > :nth-child(6) { grid-area: e6; }
.portfolio .panel > :nth-child(7) { grid-area: e7; }
.portfolio .panel > :nth-child(8) { grid-area: e8; }
.portfolio .panel > :nth-child(9) { grid-area: e9; }
.portfolio .panel { display: none; }
.portfolio .panel.open { display: grid; }
.portfolio .panel-item > button {
    cursor: pointer;
    width: 100%;
    height: 100%;
    border: 0;
    background-color: transparent;
}
.portfolio .panel-item figure {
    border-radius: 20px;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.portfolio .panel-item figure:hover img { scale: 1; }
.portfolio .panel-item img { 
    height: 100%; 
    scale: 1.05;
    transform-origin: center;
    transition: scale 0.2s ease;
    will-change: scale;
}
.portfolio .panel-item figcaption {
    position: absolute;
    z-index: 1;
    left: 20px;
    bottom: 20px;
    padding: 10px 20px;
    border-radius: 90px;
    background-color: var(--white-color-a20);
    backdrop-filter: blur(4px);
}
.portfolio .panel-item__slider .swiper-slide { overflow: hidden; }
.portfolio .panel-item__slider img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	display: block;
	-webkit-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
	user-select: none;
}
.portfolio dialog:has(.swiper-slide-zoomed) {
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(3px);
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
}
.portfolio dialog:has(.swiper-slide-zoomed) form { height: 100%; }
.portfolio dialog:has(.swiper-slide-zoomed) .panel-item__slider {
	height: 100%;
    max-height: 100%;
}


.portfolio .cta {
    display: flex; gap: 20px;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--black-color);
}
.portfolio dialog {
    position: fixed;
    width: clamp(300px, 90vw, 1110px);
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 20px;
    background-color: var(--grey-color);
}
.portfolio dialog form { padding: 60px; }
.portfolio .panel-item__slider { 
	max-height: 700px; 
	border-radius: 10px;
}
.portfolio .panel-item .swiper__buttons {
    height: 60px;
    top: 50%;
    left: 2%;
    position: absolute;
    width: 96%;
}
.portfolio dialog img { aspect-ratio: 1110 / 750; }
.portfolio .panel-item .swiper__buttons > div {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 50%;
    background-color: var(--green-color);
    filter: brightness(1);
    transition: filter 0.2s ease;
    will-change: filter;
}
.portfolio .panel-item .swiper__buttons > div:hover { filter: brightness(0.9); }
.portfolio .panel-item .swiper-button-prev {
    transform: rotate(180deg);
}
.portfolio button.close {
    cursor: pointer;
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 25px;
    width: 40px;
    height: 40px;
    border: 0;
    background-color: transparent;
}






.about__content {
    display: grid; gap: 110px;
    grid-template-columns: 1.8fr 1fr;
}
.about .main-content p:first-child { margin-bottom: 20px; }
.about .media-content {
    margin-top: 50px;
    max-height: 365px;
    display: grid; gap: 20px;
    grid-template-columns: 1fr 0.7fr 0.7fr;
    grid-template-rows: 2.5fr 1fr;
    grid-template-areas: 
    "image-1 image-2  .  "
    "image-1   text  text";
}
.about .media-content img:first-of-type { grid-area: image-1; }
.about .media-content img:last-of-type  { grid-area: image-2; }
.about .media-content p  { grid-area: text; }
.about img { 
    border-radius: 30px;
    height: 100%; 
}
.about .media-content img:first-of-type { 
    max-width: 320px;
    aspect-ratio: 320 / 365;
}
.about .media-content img:last-of-type { 
    max-height: 235px;
    aspect-ratio: 205 / 235;
}
.about figure img { max-height: 655px; }
.about figcaption {
    position: absolute;
    bottom: 0; left: 0;
    transform: translateX(-40%) translateY(-100%);
    padding: 40px 20px;
    border-radius: 20px;
    background-color: var(--black-color-a40);
    backdrop-filter: blur(10px);
}


.reviews {
    background-color: var(--grey-color);
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
}
.reviews .container { padding-block: 40px; }
.reviews .reviews__slider { overflow-x: hidden; }
.reviews__slider .swiper-slide {
    height: 300px;
    padding: 30px 20px;
    border-radius: 20px;
    background-color: var(--white-color);
}
.reviews__slider .user { 
    display: flex; gap: 30px;
    align-items: center;
    margin-bottom: 30px;
}
.reviews__slider .user > div { 
    display: flex; gap: 20px;
    flex-direction: column;
}
.reviews__slider .ava {
    width: 76px;
    height: 76px;
    border-radius: 50%;
}
.reviews__slider .user + p { 
    max-height: 130px;
    overflow-y: auto;
}
.reviews .swiper__buttons {
    width: 150px;
    height: 60px;
    position: absolute;
    top: 0;
    right: 0;
    transform: translateY(-185%);
}
.reviews .swiper-button-prev svg { transform: rotate(180deg); }
.reviews .swiper__buttons > div {
    width: 60px;
    height: 60px;
    padding: 15px;
    border-radius: 50%;
    background-color: var(--green-color);
    filter: brightness(1);
    transition: filter 0.2s ease;
    will-change: filter;
} 
.reviews .swiper__buttons > div:hover { filter: brightness(0.9); }




.faq__content {
    display: grid; gap: 30px;
    grid-template-columns: 1fr 1fr;
}
.faq .accordion {
    border-bottom: 1px solid var(--grey-color);
}
.faq .cta img { border-radius: 30px; }
.faq .cta__content {
    margin-top: 20px;
    padding: 20px;
    border-radius: 20px;
    background-color: var(--grey-color);
}
.faq .cta__content p { margin-bottom: 30px; }
.faq .cta__content .button { margin-inline: auto; }
/* .faq .accordion header {
    grid-template-columns: 1fr max-content;
} */
.faq .accordion-content > * { padding-left: 0; }






.popup-overlay {
	display: none;
	position: fixed;
	z-index: 1000;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(3px);
}
.popup-overlay.open { display: block; }
.popup {
	width: clamp(300px, 90vw, 900px);
	height: max-content;
	padding: 50px 30px 30px;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
	background-color: rgba(0, 0, 0, 0.8);
    border-radius: 20px;
}
.popup .close {
	position: absolute;
	top: 0; right: 0;
	border: 0;
    background-color: transparent;
	cursor: pointer;
}
.popup header {
	display: flex; gap: 30px;
	flex-direction: column;
	max-width: 80%;
	margin: 0 auto;
    text-align: center;
}
.popup .heading span { color: var(--white-color-a50); }
.popup .form {}


.wpforms { font-family: "Inter", sans-serif; }
.wpforms__name  input,
.wpforms__phone input {
	border-radius: 90px !important;
	height: 50px !important;
}
.wpforms__name  input:focus,
.wpforms__phone input:focus {
	border: 0 !important;
	outline: 0 !important;
}
.wpforms__button {
	position: relative !important;
    width: 100% !important;
    border-radius: 90px !important;
    background-color: var(--green-color) !important;
    color: var(--black-color) !important;
    text-align: start !important;
    font-weight: 600 !important;
    font-size: 20px !important;
    height: 70px !important;
}
.wpforms__button::after {
	content: '';
	position: absolute;
	z-index: 1;
	top: 0; right: 0;
	width: 30px;
	height: 30px;
	transform: translate(-50%, 60%);
	background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3e%3cpath d='M1 11L21 11M21 11L10.7356 1M21 11L10.7356 21' stroke='%23191919' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.wpforms__checkbox label {
	color: var(--white-color) !important;
	font-weight: 500 !important;
    font-size: 14px !important;
}
.wpforms__checkbox li.choice-1 { 
    display: flex !important;
    align-items: center !important;
}




@media screen and (max-width: 1070px) {
	main { 
		margin-bottom: 130px;
		gap: 130px; 
	}
	
	.quiz hgroup p, .faq .main-content > p,
	.projects hgroup p, .stages hgroup p,
	.about .main-content p:first-of-type,
	h2 { text-align: center; }
	
	.hero__list {
		text-align: start;
    	margin: 0 auto;
	}
	
	.faq .main-content > p br, h2 br, hgroup br,
	.about .main-content p:last-of-type br { display: none; }
	
    .hero__content { 
        flex-direction: column;
/*         gap: 300px; */
    }
    .hero__content-down {
        width: 100%;
        grid-template-columns: repeat(4, 1fr);
        grid-template-areas:
            'elem-1 elem-2 elem-3 elem-4';
    }
    .hero .down-elem { 
        justify-content: center;
        text-align: center;
    }
    .hero .down-elem.col, .hero .down-elem.row { 
        flex-direction: column-reverse; 
    }
    .hero .down-elem--1 svg {
        bottom: 0; 
        right: 0;
    }
    .hero .down-elem--1 svg, .hero .down-elem--2 svg {
        margin: unset;
    }
    .hero .down-elem svg {
        width: 50px;
        height: 50px;
    }
    .hero::before {
        height: 37%;
        border-top-left-radius: 200px;
    }
    .hero__content-right { margin-right: auto; }
    .hero .circle-button {
        position: absolute;
        bottom: -110%;
        left: 50%;
    }
    .hero__content-main {
        justify-content: center;
        text-align: center; 
    }
    .hero__content-main-inner .button { margin: 0 auto; }
    .hero .right-elem {
        width: 400px;
        text-align: center;
    }



    .risk__content {
        display: flex;
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .risk__content > .risk__card,
    .risk__content > .risk__card-mobil {
        width: 100%;
        height: auto;
        display: grid;
        gap: 20px;
        grid-template-columns: 1fr 0fr;
        align-items: stretch;
        padding: 20px;
        border-radius: 20px;
        background-color: var(--black-color);
        overflow: hidden;
        position: relative;
        transition: grid-template-columns .25s ease, background-color .25s ease;
        will-change: grid-template-columns;
        cursor: pointer;
    }
    .risk__content > .risk__card:hover {
        width: 100%;
        grid-template-columns: 1fr 0fr;
    }
    .risk__content > .risk__card:hover .swapper-text p:last-child {
        opacity: 0;
        max-height: 0;
    }
    .risk__content > .risk__card.open,
    .risk__content > .risk__card-mobil.open {
        background-color: var(--green-color);
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        cursor: default;
    }
    .risk .main-content {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
    .risk__content > .risk__card.open .main-content,
    .risk__content > .risk__card-mobil.open .main-content {
        flex-direction: column;
        align-items: flex-start;
        gap: 50px;
    }
    .risk__content > .risk__card .number,
    .risk__content > .risk__card-mobil .number{
        background-color: var(--green-color);
    }
    .risk__content > .risk__card .number span,
    .risk__content > .risk__card-mobil .number span {
        color: var(--black-color);
    }
    .risk__content > .risk__card.open .number,
    .risk__content > .risk__card-mobil.open .number {
        background-color: var(--black-color);
    }
    .risk__content > .risk__card.open .number span,
    .risk__content > .risk__card-mobil.open .number span {
        color: var(--green-color);
    }
    .risk__content > .risk__card .swapper-text p:first-child,
    .risk__content > .risk__card-mobil .swapper-text p:first-child {
        color: var(--white-color);
    }
    .risk__content > .risk__card.open .swapper-text p:first-child,
    .risk__content > .risk__card-mobil.open .swapper-text p:first-child {
        color: var(--black-color);
    }
    .risk__content > .risk__card .swapper-text p:last-child,
    .risk__content > .risk__card-mobil .swapper-text p:last-child {
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: opacity .2s ease, max-height .25s ease;
        will-change: opacity, max-height;
    }
    .risk__content > .risk__card.open .swapper-text p:last-child,
    .risk__content > .risk__card-mobil.open .swapper-text p:last-child {
        opacity: 1;
        max-height: 260px; 
    }
    .risk__content > .risk__card .hidden-content,
    .risk__content > .risk__card-mobil .hidden-content {
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s ease;
    }
    .risk__content > .risk__card.open .hidden-content,
    .risk__content > .risk__card-mobil.open .hidden-content {
        opacity: 1;
        visibility: visible;
    }
    .risk__card-image {
        width: 100%;
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        border-radius: 20px;
    }
    .risk__content > .risk__card::after,
    .risk__content > .risk__card-mobil::after {
        content: "";
        position: absolute;
        right: 22px;
        top: 28px;
        width: 10px;
        height: 10px;
        border-right: 2px solid var(--green-color);
        border-bottom: 2px solid var(--green-color);
        transform: rotate(45deg);
        transition: transform .2s ease, border-color .2s ease;
        pointer-events: none;
    }
    .risk__content > .risk__card.open::after,
    .risk__content > .risk__card-mobil.open::after {
        transform: rotate(-135deg);
        border-color: var(--black-color);
        opacity: 0;
    }


    .do-for-you__content {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(2, 400px);
    }



    .projects .projects__slider { padding-bottom: 100px; }
    .projects__slider > .swiper-wrapper { 
        padding-block: 0;
        height: 770px;
    }
    .projects .projects__slider > * > .swiper-slide-active > .project-card {
        width: 100%;
        margin-top: 0;
        margin-left: 0;
    }  
    .projects__slider > .swiper-wrapper > .swiper-slide { scale: unset; }
    .projects .hidden-content { max-height: unset; }
    .projects .project-card { 
/* 		height: 100%;  */
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 300px 100%;
	}
	.projects .project-card .project__slider { 
		width: 100%; 
		height: 100%;
	}
    .projects .swiper-buttons {
        top: unset;
        right: unset;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
    }
    .projects .cta { 
        flex-direction: column;
/*         overflow: hidden; */
		border-radius: 30px;
    }
	.projects .cta figcaption {
        margin-left: 120px;
        padding: 20px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(3px);
        text-align: center;
    }
    .projects .cta figure { position: static; }
    .projects .cta img {
        position: absolute;
        bottom: 0;
        left: 0;
    }




    .stages__content { flex-direction: column; }
    .stages .cta { 
        flex-direction: row;
        max-width: unset; 
        align-items: stretch;
    }
    .stages .cta img { max-height: unset; }
    .stages .cta > * { width: 50%; }



    .form__content { grid-template-columns: 1fr; }
    .form img { display: none; }



    .portfolio .panel { 
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 420px);
    }
    .portfolio__content .panels > :nth-child(odd of .panel),
    .portfolio__content .panels > :nth-child(even of .panel) {
        grid-template-areas: 
            "e1 e2"
            "e3 e4"
            "e5 e6"
            "e7 e8"
            "e9 e9";
    }


    .about .media-content { 
        grid-template-columns: 0.7fr 0.7fr 0.7fr;
        grid-template-areas:
            "image-1 image-2 image-2"
            "image-1  text    text";
    }
	.about .main-content { display: contents; }
	.about__content { 
        display: grid; gap: 30px;
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"text-1 text-1"
			"text-2 image"
			"group  group";
    }
	.about .main-content > p:first-of-type { grid-area: text-1; }
	.about .main-content > p:last-of-type  { grid-area: text-2; }
	.about .main-content > .media-content  { grid-area: group;  }
	.about .main-content figure            { grid-area: image;  }
	.about figcaption {
		transform: translateX(-60%) translateY(-60%);
        width: 130%; 
	}


    .faq__content { grid-template-columns: 1fr; }
    .faq .cta img { display: none; }
}


@media screen and (max-width: 991px) {
	.projects__slider > .swiper-wrapper { height: 100%; }
	.projects__slider > * > .swiper-slide { aspect-ratio: unset; }
}


@media screen and (max-width: 850px) {
	main { 
		margin-bottom: 110px;
		gap: 110px; 
	}
	
    .do-for-you .cta { 
        flex-direction: column; 
        border-radius: 30px;
    }
	.stages .cta { flex-direction: column;  }
	.stages .cta > * {
		width: 100%;
	}
	.stages .cta img { max-height: 300px; }
}


@media screen and (max-width: 800px) {
    .hero::before { width: 80%; }
    .hero__content-down {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: 150px 150px;
        grid-template-areas: 
            "elem-1 elem-2"
            "elem-3 elem-4";
    }
    .hero .circle-button { 
		bottom: 0;
        transform: translateY(400%);
	}
    .hero__content-right {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas: 
            "elem-3 elem-1"
            "elem-3 elem-2";
    }
    .hero .right-elem--1 { grid-area: elem-1; }
    .hero .right-elem--2 { grid-area: elem-2; }
    .hero .right-elem--3 { grid-area: elem-3; }
    .hero .right-elem {
        width: auto;
        justify-content: center;
    }
	.hero__content::after {
		transform: translateX(0%);
		background-size: cover;
		right: unset;
		left: 0;
        height: 600px;
	}
	.hero .circle-button { left: 60%; }
	.hero__content-main-inner .button {
		max-width: 400px;
	}
}

@media screen and (max-width: 700px) {
    .reviews .container { padding-bottom: 100px; }
    .reviews .swiper__buttons {
        top: unset;
        bottom: 0;
        left: 50%;
        transform: translateY(120%) translateX(-50%);
    }
	.projects .cta { margin-top: 100px; }
	.projects .cta img { max-width: 330px; }
	.projects .cta figure { width: 100%; }
	.projects .cta figcaption { 
		margin-left: unset; 
		width: 100%;
	}
	.projects .cta .button {
		max-width: 100%;
		width: 100%;
		justify-content: space-between;
	}
	
	.portfolio dialog form { padding: 60px 20px 20px; }
	.portfolio .panel-item .swiper__buttons { display: none; }
	
	.about__content { 
		grid-template-columns: 1fr;
		grid-template-areas:
			"text-1"
			"image"
			"text-2"
			"group";
    }
	.about figcaption {
        transform: translateX(0%) translateY(0);
        width: 100%;
    }
	.about .media-content {
		margin-top: 0;
    	max-height: 100%;
		grid-template-rows: 300px max-content 300px;
        grid-template-columns: 1fr;
		grid-template-areas:
			"image-1"
			" text  "
			"image-2";
    }
	.about .media-content img { 
		max-width: 100% !important; 
		max-height: 300px !important;
		border-radius: 10px !important;
		aspect-ratio: 1 !important;
	}
	.about .main-content > p:first-of-type br { display: none; }
}

@media screen and (max-width: 600px) {
	.hero__content { padding-block: 150px 100px; }
	
    .risk__content > .risk__card.open,
    .risk__content > .risk__card-mobil.open {
        grid-template-columns: 1fr;
    }
    .risk .swapper-text { 
        text-align: center;
        margin: 0 auto;
    }


    .do-for-you__content {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, 400px);
    }

	
	.portfolio .tabs { flex-direction: column; }
	.portfolio .tab {
		width: 100%;
		max-width: 100%;
		justify-content: center;
	}
    .portfolio__content .panels > :nth-child(odd of .panel), 
    .portfolio__content .panels > :nth-child(even of .panel) {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(8, 420px);
        grid-template-areas:
        "e1" "e2" "e3" "e4" "e5" "e6" "e7" "e8" "e9";
    }
}

@media screen and (max-width: 500px) {
	main { 
		margin-bottom: 80px;
		gap: 80px; 
	}
	
	.about .media-content {
		max-height: unset;
        grid-template-columns: 1fr;
		grid-template-rows: auto;
        grid-template-areas:
        "image-2"
		" text"
        "image-1";
    }
	.about .media-content img:first-of-type { max-width: unset; }
	
	.accordion header {
		grid-template-columns: auto 0fr max-content;
		grid-template-areas: 
			"number . arrow"
			"title  . arrow";
		row-gap: 10px;
	}
	.accordion header p.heading { grid-area: number; }
	.accordion header p.text    { grid-area: title;  }
	.accordion header div.svg   { grid-area: arrow;  }
	
	.projects .cta {
		margin-top: 170px;
		padding: 20px; 
	}
}


@media screen and (max-width: 400px) {
	main { 
		margin-bottom: 70px;
		gap: 70px; 
	}
	.hero__content-main-inner .button {
		max-width: 100%;
	}
}