/* Указываем box sizing */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Убираем внутренние отступы */
ul[class],
ol[class] {
    padding: 0;
}

/* Убираем внешние отступы */
body,


h3,
h4,
p,

ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
    margin: 0;
}

/* Выставляем основные настройки по-умолчанию для body */
body {
    min-height: 100vh;
    scroll-behavior: smooth;
    text-rendering: optimizeSpeed;
    line-height: 1.5;
    /* background-image: url(https://www.transparenttextures.com/patterns/shattered-dark.png); */
    /* background-color: #5274cc;
    background-image: url("https://www.transparenttextures.com/patterns/subtle-grey.png"); */
    font-family: 'Roboto', sans-serif;
}

/* Удаляем стандартную стилизацию для всех ul и il, у которых есть атрибут class*/
ul[class],
ol[class] {
    list-style: none;
}

/* Элементы a, у которых нет класса, сбрасываем до дефолтных стилей */
a:not([class]) {
    /* text-decoration-skip-ink: auto; */
    text-decoration: none;
}

/* Упрощаем работу с изображениями */
img {
    /* max-width: 100%; */
    display: block;
}

/* Указываем понятную периодичность в потоке данных у article*/
article > * + * {
    margin-top: 1em;
}

/* Наследуем шрифты для инпутов и кнопок */
input,
button,
textarea,
select {
    font: inherit;
}

/* Удаляем все анимации и переходы для людей, которые предпочитай их не использовать */
@media (prefers-reduced-motion: reduce) {
  * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
  }
}

/* обнуление --------------------------------------------------------------------------------------------------------------------- */
html{
    font-size: 16px;
}
.flex-center h2{
    font-size: 2rem;
    color: #FEFCF3;
}
h2{
    font-size: 1.5rem;
}
h3{
    
}
p{
    font-size: 1.2rem;
}
.name__adres p{
    font-size: 15px;
}




h1 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 2em;
    color: #FEFCF3;
    
}



.content{
    /* margin-top: 20px; */
    padding: 0 30px 0 30px;
    background-color: #71a8e3;
background-image: url("https://www.transparenttextures.com/patterns/shattered-dark.png");
}


.grid{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(100px, auto);
    grid-template-areas:
    
    "b b b b b b b b b b b b"
    "c c c c c c c c c c c c"
    "a a a a a a a a a a a a"
    "j j j j j j j . . . . ."
    "w w w w w w w w w w w w"
    ". d d d d d d d d d d ."
    "f f f f f f . p p p p ."
    "e e e e e e . h h h h ."
    "g g g g g g g g g g g g";
}
.block{
    margin: 50px 0 50px 0;
    border-radius: 20px;
}

.about__zil{
    grid-area: a;
    color: white;
    /* background-color: #add7e5;
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	/* padding: 30px; */
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);


}
.about__zil .text{
    text-align: center;
    padding: 50px 80px;
}
.pdf{
    grid-area: j;
    display:flex;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
    color: white;
    background-color: rgba(46, 31, 31, 0.2);
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);
}
.about__rec{
    grid-area: b;
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	/* padding: 30px; */
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);

}
.about__rec .text{
    /* text-align: center; */
    padding: 50px 80px;
}

.models{
    grid-area: c;
    /* color: white; */
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	/* padding: 30px; */
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);

}


.questions{
    grid-area: d;
    color: white;
    /* background-color:#F7F7F7 ;
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	/* padding: 30px; */
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);

}


.work{
    grid-area: w;
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	/* padding: 30px; */
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);

}

.feedback{
    grid-area: e;
    /* border: solid 2px black; */
    /* background-color: rgba(198, 131, 131, 0.304); */
    /* box-shadow:1em 1em 1em #212121; */
}

.delivery{
    grid-area: h;
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	padding: 30px;
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);

}
.delivery img{
    width: 350px;
}
.delivery .text{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.map{
    grid-area: f;
    /* background-color: rgb(203, 151, 151); */
}

.news{
    grid-area: g;
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	padding: 0 30px;
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);
    padding-bottom: 2rem;
}

.contact{
    grid-area: p;
    color: white;
    /* background-color: rgb(203, 151, 151);
    box-shadow:1em 1em 1em #212121; */
    background-color: rgba(46, 31, 31, 0.2);
	padding: 20px 15%;
	border-radius: 20px;
	backdrop-filter: blur(3px);
    transform-style: preserve-3d;
    transform: perspective(800px);
	border-top: 1px solid rgba(255,255,255,.5);
	border-left: 3px solid rgba(255,255,255,.5);
	box-shadow: 5px 5px 10px black, inset 5px 5px 10px rgba(0,0,0,.2), inset -5px -5px 10px rgba(255,255,255,.2), inset -2px -2px 5px rgba(0,0,0, .5);
}



  
    
    /* background-color: antiquewhite; */
    /* margin-left: 20px; */
    /* align-items: center;
    font-size: 35px;
    display: flex;
    justify-content: center;
} */
.contact ul{
    padding-left: 0;
}
.contact li{
    list-style-type: none;
}


footer{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    color: white;
    background-color: black;
    height: 250px;
}
footer img{
    width: 100px;
}
footer .adress{
    margin-left: 2rem;
}
.text__img{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content: center;
}
.text__img img{
    width:250px;
    margin:auto 2rem;
    border-radius:1rem;
    transition: all 0.25s ease-in-out;
    transform: scale(1);
}
.text__img img:hover{
    transform: scale(1.5);
    transition: all 0.25s ease;
}
.table__model{
    font-size: 1.5rem;
}