@charset "UTF-8";

/* Reset */
/* -------------------------------------------------------------------- */
html {     color: var(--color-text); background: #fff; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, select, textarea, p, blockquote, th, td {
margin: 0; padding: 0; line-height: 1.4;}
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
ol, ul { list-style: none; list-style-position: inside;}
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal;}
input, textarea, select { font-family: inherit; font-size: inherit; font-weight: inherit; }
legend { color: #000; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
* { box-sizing: border-box; vertical-align: top; }

@font-face{
    font-family: 'Benzin';
    src: url(/assets/templates/default/fonts/benzin-semibold.ttf) format('truetype');
    font-style: normal;
}

:root{
    --color-blue: #141088;
    --color-gray: #969696;
    --color-light-gray: #EDEDED;
    --color-dark: #242424;
    --color-dark-gray: #373737;
    --color-white: #FFFFFF;

    --color-text: #3C3C3C;
    --color-heading: var(--color-blue);

    --font-size-xl: 6rem;
    --font-size-md: 4rem;
    --font-size-xs: 3rem;
    --font-size-xxs: 2rem;
--font-size-text: 1.6rem;

    --background-card: #EDEDED;
    --background-block: var(--transparent);
    --transparent: transparent;

    --button-background: #141088;
    --button-text-color: white;
    --button-padding: 1rem;

    --page-width: 135rem;

    --font-text: 'Montserrat', sans-serif;
    --font-heading: 'Benzin', sans-serif;

    --border-radius: 10rem;

    --input-background: var(--color-white);
    --input-color: var(--color-gray);
--input-padding: 1.3rem 1.8rem;
    
    --span: 2rem;
    --block-padding: calc(var(--span) * 2);
    --block-padding-small: calc(var(--span) / 2);
}
/* ============================================================== */
#cookie-popup { display: none; position: fixed; bottom: 2rem; left: 50%; width: 100%;
    max-width: 75rem; box-shadow: 0 0 10px 0 var(--color-blue); border-radius: 0rem; padding: 3rem 4rem;
    background: var(--color-text); backdrop-filter: blur(1rem); transform: translate(-50%, 0); z-index:10000; flex-wrap: wrap; justify-content: center;
    gap: 1rem; align-items: center; color: black; font-size: 1.5rem; }
#cookie-popup .text { flex-basis: 20rem; flex-grow: 1; }
#cookie-popup .link { color: var(--color-blue); text-decoration: underline; }
#cookie-popup.-active { display: flex; }

html{font-size: 10px; font-family: var(--font-text);}

h1,h2,h3{font-family: var(--font-heading);}
.page-block{padding: 12rem 2rem; width: 100%; overflow: hidden; }

.page-block.-blue{background: var(--color-blue);}
.page-block > .container { max-width: var(--page-width); margin: 0 auto; position: relative; font-size: var(--font-size-xxs);}
.page-block .container .content{    margin: 0 auto;  max-width: var(--page-width);  flex: 1;display: flex;  position: relative; gap: var(--span);  z-index: 1; flex-direction: column;}
.page-block.-blue{--color-text: white; background: var(--color-blue);}
.page-block.-blue h2{--color-heading: white; }
.page-block.-gray{--color-text: white; background: var(--color-dark);}
.page-block .container .content > .text{width: 100%; font-size: var(--font-size-text); gap: calc(var(--span) * 2);}
.page-block .container .content .text > .description{width: 50%;}

.grid-container{display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--span);}
button{border: none;}
.button{ max-width: 25rem; position: relative; text-align: center; font-size: 1.6rem;  display: flex;  gap: 10%;  padding: var(--button-padding); background: var(--button-background); color: var(--button-text-color); justify-content: center;  align-items: center;}
.button i{  width: 3rem; height: 3rem; background: var(--color-white);}
.button.-white{--button-background: var(--color-white); --button-text-color: var(--color-dark);}
.button.-white i{background: var(--color-blue);}

nav { display: flex; flex-wrap: wrap;}
nav a { display: inline-block; padding: 1rem 2rem; text-decoration: none; font-size: 1.4rem; cursor: pointer; text-align: center;}
nav a:hover {color: var(--color-blue); }
a{text-decoration: none; color: var(--color-dark-gray);}
.navigation{display: flex; align-items: center; flex-grow: 1; gap: var(--span); justify-content: center; z-index: 30;}

.nav-section { gap:1rem;  display: flex; flex-wrap: wrap; justify-content: space-between;}
.nav-section a { max-width: 30rem; flex-grow: 1;  border-radius: 10rem;   transition: all 0.5s ease; box-sizing: border-box; margin: 0; max-width: 30rem;}
.nav-section-mobile { display: none; width: 100%;}



h1{font-size: var(--font-size-xl); color: var(--color-blue); font-family: var(--font-heading); text-transform: uppercase;}
h2{font-size: var(--font-size-md); color: var(--color-heading); font-family: var(--font-heading); text-transform: uppercase; margin-bottom: 4rem;}
h3{font-size: var(--font-size-xs); color: var(--color-white); font-family: var(--font-heading); text-transform: uppercase;}

p{font-size: var(--font-size-text); color: var(--color-text); font-family: var(--font-text);}
.text{ display: flex; flex-direction: column; gap: var(--span);}
img{width: 100%;}


.header-block{height: 100vh; background: var(--color-light-gray);}
#header-block .content {
    width: 70%; margin: 0;}
.header{   background: var(--color-white);   margin-bottom: 12rem;  padding: 1rem 1.5rem;  border-radius: 10rem; font-size: var(--font-size-text);  display: flex; gap: 1rem 2rem; align-items: center;justify-content: center; flex-wrap: wrap;}
.header > .site-logo{display: inline-block; width: 15rem; height: 4rem; background: url(../img/site-logo.svg) no-repeat;}


.header-block > .page-block{     padding: 6rem 2rem; margin: 0 auto;  max-width: var(--page-width); height: 100%; display: flex; position: relative; z-index: 1;}
.video-container{display: block; position: absolute; padding-top: 10rem; left: 0;  top: 0;  width: 100%;  height: 100%;  z-index: 0; overflow: hidden;}
.video-container > video{object-fit: cover; object-position: 90%;}
.header > .contact{    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;}
.header .contact i { background: var(--color-dark-gray);width: 2rem;height: 2rem; flex-shrink: 0; }


.header .button-mobile-menu 
 {
    display: none;
}
.button-mobile-menu {
    width: 3rem;
    border-radius: 10rem;
    border: none;
    text-align: left;
    justify-content: start;
    height: 5rem;
    flex-basis: 5rem;
    background: var(--color-dark-gray);
    position: relative;
    top: 0;
    right: 0;
}

.button-mobile-menu::after {
       transition: all .3s;
    display: block;
    content: '';
    transform: translate(-50%, -50%);
    position: absolute;
    left: 50%;
    top: 50%;
    width: 3rem;
    height: 3rem;
    background: url(../img/icons/burger.png) no-repeat center;
    background-size: 3rem auto;
}
.close-menu {
    display: none; 
    position: absolute;
    top: 1rem;
    right: 2rem;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    border: none;
    background: var(--color-dark-gray);
    cursor: pointer;
}
.close-menu::after {
    content: '';
    display: block;
    opacity: 1;
    background: url(../img/icons/close.svg) center / contain no-repeat;
    filter: invert(100%);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    height: 2rem;
    transform: translate(-50%, -50%);
}












/* карточки */
.card{  background: var(--color-light-gray); padding: var(--span); height: 40rem;      transition: all 0.5s ease;}
.card .inner {height: 100%; display: flex;  flex-direction: column;}
.card .inner .content{  justify-content: flex-end;flex: 1;}

.card .inner > .title{font-size: 2rem; font-family: var(--font-heading); }
.card .inner .content > .description { font-family: var(--font); font-size: var(--font-size-text); color: var(--color-text);}
.card .inner .content > .price { font-family: var(--font-heading);  font-size: 2.2rem;  color: var(--color-blue);}
.card .inner .content > .button { width: 100%;  margin: 0 auto;}




/* слайдер */
.slider-wrapper{overflow: hidden;  position: relative;  width: 100%;}
.slider-track { display: flex; transition: transform 0.4s ease;}
.slider-track > .slider-card{ flex-shrink: 0; width: 100%; }
.slider-card { width: 100%;  flex: 0 0 auto;  display: flex;  gap: 4rem; align-items: center; box-sizing: border-box;}
.slider-buttons { display: flex; gap: 1rem; margin-bottom: 1rem;}

.slider-buttons .button-prev,
.slider-buttons .button-next {  width: 5rem; height: 5rem; border-radius: 50%; background: var(--color-blue); cursor: pointer; transition: all 0.3s ease; border: none; position: relative;}

.slider-buttons .button-prev:hover,
.slider-buttons .button-next:hover {  background: var(--color-white);  transform: scale(1.1);}

.slider-buttons .button-prev::after {
    content: '←';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); font-size: 2rem;   font-weight: bold; color: white;}
.slider-buttons .button-next::after {
    content: '→';  position: absolute;  top: 50%;  left: 50%;  transform: translate(-50%, -50%); font-size: 2rem;   font-weight: bold; color: white;}

.slider-buttons .button-prev:hover::after,
.slider-buttons .button-next:hover::after {color: var(--color-blue);}






.nav-select-mobile {
    font-size: var(--font-size-text);
    width: 100%;
    background: var(--color-blue);
    color: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 2rem;
    padding: 1rem 2rem;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
 border-radius: 2rem; overflow: hidden;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1.5rem center; background-size: 1.6rem; transition: all 0.3s ease;
}

.nav-select-mobile:hover { opacity: 0.9;}
.nav-select-mobile:focus { outline: none;}

.nav-select-mobile option { background: white;
    color: black; }
@media (max-width: 1200px) {
    .nav-section.-desktop { justify-content: center;}
}

@media (max-width: 980px) {
    .video-container{ padding-top: 20rem;}

}

@media (max-width: 768px) {
    .page-block .container .content .text > .description {
    width: 100%;
}

    .nav-section.-desktop { display: none;}
    .nav-section-mobile {display: block; width: 100%;margin-bottom: var(--span);}

    .slider-wrapper { position: relative;}

    .navigation {  position: fixed; left: 0; top: -100%; width: 100%; background: white; flex-direction: column; align-items: flex-start;  padding: 30px; box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1); transition: 0.3s;  z-index: 99;}
    .navigation.show {  top: 0;}
    .navigation a {  border-bottom: 1px solid #eee;  width: 100%;  text-align: left;}
    .navigation a:hover { border-color: var(--color-blue);}
   

    .header{justify-content: space-between;}
    .header .button-mobile-menu  {  display: inline-block;}
    .close-menu {  display: flex; 
    }
    .header > .contact{display: none;}
}

@media (max-width: 480px) {
    h2{font-size: var(--font-size-xs);}
}








i { display: inline-block; width: 2rem; height: 2rem;  background: black; --image: linear-gradient(transparent, transparent); mask: var(--image) center / contain no-repeat; -webkit-mask: var(--image) center / contain no-repeat;}
i[data-icon="tg"] { --image: url(../img/icons/tg.png); }
i[data-icon="max"] { --image: url(../img/icons/max.png); }
i[data-icon="vk"] { --image: url(../img/icons/vk.png); }
i[data-icon="star"] { --image: url(../img/icons/star.png); }
.message-queue { position: fixed; top: 50%; padding: 3rem; left: 50%; right: 0; background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); max-width: 800px; border-radius: 1rem;  z-index:100; }
.message-queue .message { margin: 0 auto; max-width: 700px; display: block; background: white; padding: 1rem; margin-bottom: 0.5rem; border-radius: 3px; box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.3);  }
.message-queue .message: last-child { margin-bottom: 0;  }
.message-queue .message.error { border-left: 5px solid #a6051b;  }
.message-queue .message strong { font-weight: bold; }
.message-queue .message .large { font-size: 2.5rem;}
.message-queue .message .large strong { color: #a6051b; }
.message-queue .message.critical { border-left: 5px solid transparent; color: white; background: #a6051b;  }
.message-queue .message.warning { border-left: 5px solid #ffd376;  }

@media screen and (max-width: 640px) {
	 .message-queue { padding: 1rem; bottom: 0; width: 100%; border-radius: 0; top: auto; transform: none; left:0; right:0; }
	 .message-queue .message { padding: 0.5rem; }
}






#about-block h2 {  margin-bottom: 0;}
#about-block .container>.heading {  display: flex; flex-direction: column; align-items: flex-start; gap: 4rem; margin-bottom: 4rem;}
#about-block .container>.heading h2 {  width: 100%;  text-align: left;}
#about-block .container>.heading p { width: 100%;  margin-left: auto;}


#about-block .card {  cursor: pointer;  position: relative;  perspective: 150rem;  background: transparent;  padding: 0;}
#about-block .card .inner { position: relative; width: 100%;   height: 100%; transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);  transform-style: preserve-3d;  border-radius: 2rem;}
#about-block .card:hover .inner {  transform: rotateY(180deg);}
#about-block .card .inner .content>.description { color: var(--color-white);}

.front-side,
.back-side {  position: absolute;  width: 100%;  height: 100%;  backface-visibility: hidden; padding: var(--span);  background: var(--color-light-gray);  display: flex;  flex-direction: column; box-sizing: border-box;}

.front-side { transform: rotateY(0deg); z-index: 10; overflow: hidden;}
.back-side {  transform: rotateY(180deg);  background: var(--color-blue);  color: var(--color-white);}

.front-side .title,
.back-side .title { font-size: 2rem; font-family: var(--font-heading);  margin-bottom: 2rem; flex-shrink: 0;     color: var(--color-text);}
.back-side .title { color: var(--color-white);}

.front-side .content,
.back-side .content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start;}

.front-side .image { width: 100%; position: relative; bottom: -5rem; left: 5rem; z-index: 10;}
.front-side .image img { width: 100%; height: auto; object-fit: cover; display: block;  transition: transform 0.4s ease;}
.card:hover .front-side .image img { transform: scale(1.05);}


















#portfolio-block{ overflow: hidden;}
#portfolio-block .nav-section a {  border: solid 1px var(--color-gray);
    color: var(--color-gray);
    background: var(--transparent);}
#portfolio-block .nav-section a:hover {  color: var(--color-white);  --transparent: var(--color-blue);}
#portfolio-block, #portfolio-block .container {position: relative;}
#portfolio-block .full-width-cards { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; margin-left: 0;}
#portfolio-block .grid-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; margin-bottom: 2rem;}
#portfolio-block .portfolio-card { width: 100%; box-sizing: border-box;  overflow: hidden;  display: flex;  flex-direction: column;  height: 100%;}
#portfolio-block .image-wrapper { position: relative; width: 100%; overflow: hidden; aspect-ratio: 16 / 9; flex-shrink: 0;}
.portfolio-thumb,
.portfolio-video {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;  transition: opacity 0.3s ease;}
.portfolio-video {  opacity: 0;  z-index: 2; pointer-events: none;}

.portfolio-thumb { z-index: 1;}

.portfolio-card:has(.portfolio-video):hover .portfolio-video {  opacity: 1;}
.portfolio-card:has(.portfolio-video):hover .portfolio-thumb { opacity: 0;}

#portfolio-block .portfolio-card .title {padding: 2rem; border: solid 1px var(--color-gray);  background: var(--color-white);  font-weight: bold;  font-size: 2rem; z-index: 3;  bottom: 0;  width: 100%;  position: absolute;}

#portfolio-block .button { width: 100%; margin: 0 auto; text-align: center; --button-background: var(--transparent); --button-text-color: var(--color-gray);}
#portfolio-block .button i { background: var(--color-gray);}
#portfolio-block .container .head-portfolio-block {  display: flex; flex-direction: row; justify-content: space-between;     align-items: center; max-width: var(--page-width);  margin: 0 auto; margin-bottom: 4rem;  gap: 2rem; flex-wrap: nowrap;}
#portfolio-block .head-portfolio-block h2 { margin-bottom: 0;}





#slider-block .slider-card .image { flex: 1; min-width: 30rem;}

#slider-block .slider-card .image img { width: 100%; height: auto; object-fit: cover;}

#slider-block .slider-card .content { flex: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%;}

#slider-block .slider-card .content .text {  font-size: var(--font-size-xxs); line-height: 1.4;  color: var(--color-white); margin-bottom: 3rem;}
#slider-block .slider-card .content {  color: var(--color-white);}

#slider-block .slider-card .bottom {display: flex; flex-direction: column;}

#price-block .slider-buttons{display: none;}



.tabs-menu {  margin: 4rem 0;}

#slider-block .nav-section .tab-menu {
    position: relative;
    padding: 1rem 2rem;
    border: 1px solid #dfdfdf;
    border-radius: 10rem;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #dfdfdf;
}

#slider-block .tab-menu.active {
    color: var(--color-white);
    font-weight: bold;
}

#slider-block .tab-menu.active::before {
    content: '';
    position: absolute;
    inset: -2px;
    border: 2px solid var(--color-white);
    border-radius: 10rem;
    pointer-events: none;
    transition: all 0.3s ease;
}








#price-block .cards {  display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

#price-block .slider-card {
    transition: all 0.3s ease;
}

#price-block .slider-card:hover {
    background: var(--color-blue);
    color: var(--color-white);
}

#price-block .slider-card :hover .description,
#price-block .slider-card :hover .price {  color: var(--color-white);}

#price-block .slider-card  .button { display: none;}
#price-block .slider-card :hover .button {  display: inline-flex;}
#price-block .slider-buttons .button-prev::after, #price-block .slider-buttons .button-next::after {  color: var(--color-gray);}
#price-block h2 { max-width: 100%;}





/* видео анимация */
#info-block .container{  display: flex;  justify-content: center;  flex-direction: column;   align-items: center;}
#info-block .animation-video { width: 100%;overflow: hidden; display: flex; justify-content: center; align-items: center;}
#info-block .animation-video video { object-fit: cover; clip-path: circle(20%); display: block; will-change: clip-path;     object-position: center;}
#info-block h2{width: 100%; font-size: clamp(2.5rem, 5vw + 1rem, 7rem); display: block; text-align: left; flex-direction: column; box-sizing: border-box;
}
#info-block h2 span{color: var(--color-text); text-align: right; display: block;
    width: 100%;}

/* #info-block .animation-video video:hover {
  clip-path: circle(100%);
} */



/* вопросы */
#faq-block .faq-list {  display: flex; flex-direction: column;  gap: var(--span);}

#faq-block .faq-question { list-style: none;
display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    background: var(--background-card);
    padding: var(--span);
    font-size: var(--font-size-xxs);
    font-family: var(--font-heading);
    font-weight: bold;    color: var(--color-text);}
#faq-block .faq-question::-webkit-details-marker { display: none; }
#faq-block .faq-question::after { content: "+"; font-size: 2.5rem;  padding: 1rem 2rem; background: var(--color-white); border-radius: 10rem; font-weight: 400; color: var(--color-blue); transition: transform 0.3s ease;  display: inline-block;
    transition: transform 0.3s ease;
    flex-shrink: 0;}
#faq-block .faq-item[open] > .faq-question::after {
    content: "−";
}
#faq-block .faq-answer {
    padding: 0 var(--span);
    overflow: hidden;
    opacity: 0;
    color: var(--color-text);
    line-height: 1.4;
    transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}

#faq-block .faq-item[open] .faq-answer {
background: var(--background-card);
display: block;
    opacity: 1;
    padding: 2rem;
}








/* контактная форма */
#contact-block .image {  display: block; position: absolute; right: 0; top: 0; width: 40%; height: 100%;  z-index: 0;  overflow: hidden;}
#contact-block .content{ width: 60%; align-items: flex-start; margin: 0;}
#contact-block .image > img {  width: 100%;  object-fit: contain; height: 100%;}


form .flex-container { display: flex; gap: 2rem;}
form .form-input { flex: 1;}
form .form-input label { font-weight: normal;  display: block;  font-size: 90%; color: var(--color-white);  }
form .form-input select{color: #333333;}
form figure { margin: 0; display: flex; gap: 2rem; flex-direction: column; flex: 1;}
form .button {  width: 100%;  margin: 0 auto;     font-family: var(--font-text);}

.checkbox-input { display: flex;  align-items: center; align-content: center; margin: 2rem 0; gap: 1rem;}
.checkbox-input a { color: var(--color-white);}

input[type="text"],
select,
textarea {
    width: 100%;min-height: 3rem;
    padding: var(--input-padding);font-size: var(--font-size-text); outline: 0;
    border: 1px solid transparent; display: block; color: var(--input-color);
    overflow: hidden;  background: var(--input-background); transition: all .3s;  height: 100%;
}



#type {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    --sel-padding: 1.3rem;
    padding: var(--sel-padding) calc(var(--sel-padding) * 2 + 16px) var(--sel-padding) 1.8rem;
    background-color: #fff;
    cursor: pointer;
    width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--sel-padding) center;
    background-size: 1.6rem 1.6rem;
}




/* подвал */
#footer > .container { display: flex;  gap: 4rem;  position: relative;  z-index: 1; flex-wrap: wrap;  justify-content: center;  color: var(--color-white);  font-size: var(--font-size-text);}

#footer .company { flex-basis: 30rem; font-size: 1.3rem;  text-align: center;}
#footer .company .copyrights {  margin-bottom: 1rem;}

#footer .contacts {  flex-basis: 20%;  text-align: center;  display: flex;  flex-flow: column;  align-items: center; justify-content: center; gap: 2rem;flex-grow: 1;}

#footer .bottom-menu {  display: flex; gap: 2rem; flex-grow: 1; justify-content: center; font-size: 1.8rem;}
#footer .bottom-menu > a{  font-weight: bold;}
#footer .bottom-menu a {  color: white; display: block; text-decoration: none; opacity: 1; transition: .3s;}

#footer .bottom-menu .group > a { margin-bottom: 1rem;  font-weight: bold;}
#footer .bottom-menu .group { flex-basis: 25rem;}
#footer .container .contacts .phone {  font-weight: bold;  font-size: 2.4rem; color: var(--color-white);}
#footer a i { background: var(--color-white); width: 4rem; height: 4rem;}
#footer .site-logo { display: block; width: 20rem;  height: 8rem; background: url(../img/footer-site-logo.png) center / contain no-repeat;  justify-self: center;  margin: 0 auto ; margin-bottom: 1rem;}






@media (min-width: 980px) {
    #about-block .container>.heading h2 { max-width: 70%;}
    #about-block .container>.heading p {  max-width: 50%;}
#price-block h2{ max-width: 60%;}

}
   
@media (max-width: 1200px) {
    #price-block .cards {  grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 980px) {
h1 {font-size: var(--font-size-md);}

h3 {
    font-size: var(--font-size-xxs);
}
.header-block > .page-block {padding: 4rem 2rem 0;}
#header-block {  display: flex;  flex-direction: column-reverse;   height: 100%;}
#header-block .content {
    width: 100%;}
    #header-block .text {  gap: 4rem;}
    #header-block .video-container {  position: static;  width: 100%;  height: 60rem;padding-top: 0; box-sizing: border-box;}
    #header-block .video-container video { position: static; width: 100%;object-fit: cover; object-position: 93% 40%; }
    #header-block .container { width: 100%; box-sizing: border-box;}
    .header {
        margin-bottom: 4rem;
    }

#slider-block .slider-card .image {  width: 100%;  max-width: 100%;  min-width: auto;}
    #slider-block .slider-card .bottom {  align-items: center;width: 100%;}

    #slider-block .slider-buttons { justify-content: center;}
    #slider-block .slider-card .content { width: 100%;  align-items: center;}
    #slider-block .slider-card {  flex: 0 0 100%;  flex-direction: column;  text-align: center;}

    #contact-block .flex-container {  flex-direction: column; gap: 2rem;}
    textarea {  height: 20rem;}
 #contact-block .content{ width: 100%;}
    #contact-block .text{ padding-top: 20rem;}
#contact-block .image { height: 50%; top: -4rem;}
#contact-block h2{ width: 60%;}
}
@media (max-width: 768px) {
   

    #portfolio-block .container .head-portfolio-block {  flex-direction: column;  align-items: stretch;  gap: 1.5rem;margin: 0;}
    #portfolio-block .full-width-cards { position: static; left: auto; transform: none; width: auto;}
    #portfolio-block .full-width-cards > div { padding: 0;}
    #portfolio-block .grid-container { grid-template-columns: 1fr;}
    #portfolio-block .image-wrapper { aspect-ratio: 4 / 3;}
    #portfolio-block .portfolio-card .title{  padding: 1rem 2rem;  font-size: var(--font-size-xxs);}

    
    #contact-block .image { width: 60%; right: -4rem;}
    #contact-block .text {  padding-top: 15rem;}

#info-block h2 span{    display: contents;}

    #price-block .cards {  display: flex;gap: var(--span); width: 100%;}
    #price-block .cards::-webkit-scrollbar {   display: none;}
    #price-block .slider-card { flex: 0 0 100%;       min-width: 0;  box-sizing: border-box;  flex-shrink: 0;}
    #price-block .slider-card:last-child {  margin-right: 0;}
    #price-block .slider-buttons {  display: flex;  justify-content: center;  gap: 1rem; margin-top: 2rem;}
    #price-block .button-prev,
    #price-block .button-next {  background: var(--transparent);}

    #footer .bottom-menu { flex-basis: auto;  flex-wrap: wrap;}
    #footer .bottom-menu .group {  flex-basis: auto;  display: flex;  justify-content: center;  gap: 1rem 2rem;  flex-wrap: wrap;align-items: center;}
    #footer .bottom-menu .group ul { display: contents;}
    #footer .bottom-menu .group > a { margin-bottom: 0; }
    #footer .company { flex-basis: 50rem;  justify-self: center;}

}


@media (max-width: 480px) {
    #contact-block h2 {
        width: 100%;
    margin-bottom: 0;
    }
    #contact-block .image { width: 60%;
        height: 20%;
        top: 15rem;
        right: -2rem;}
    #contact-block .text {
        padding-top: 10rem;
    }
#info-block .animation-video{height: 40rem;}
}