@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
html, body {
        width: 100%;
        min-width: 100%;
        height: 100%;
        min-height: 100%;
    }
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Montserrat", serif;
}
body {
    background-color: #f7f8fd;
    color: black;
    font-family: "Montserrat", serif;
    overflow-x: hidden;
}
a {
    cursor: pointer;
    text-decoration: none;
    color: white;
}
button {
    cursor: pointer;
    
    padding: 15px 30px;
    border: none;
    border-radius: 25px;
    background: rgb(63,110,212);
    background: linear-gradient(112deg, rgba(63,110,212,1) 0%, rgba(69,137,214,1) 100%);
    color: white;
    font-size: 16px;
    font-weight: 400;
}
p {
    line-height: 24px;
}
input {
    outline: none;
    border: none;
    border-bottom: 2px solid #3F6ED4;
    padding: 20px 30px;
    font-size: 14px;
    background-color: none;
    background: none;
}
h2 {
    font-size: 35px;
}
.header {
    display: flex;
    justify-content: space-between; /* Распределяет элементы по краям */
    align-items: center; /* Центрирует элементы по вертикали */
    padding: 10px 20px; /* Немного отступов для эстетики */
    position: fixed; /* Фиксирует хедер */
    top: 0; /* Прикрепляет хедер к верхней части страницы */
    left: 0; /* Обеспечивает, что хедер будет полностью слева */
    width: 100%; /* Ширина хедера будет 100% */
     /* Фон для хедера, чтобы он не терял видимость при прокрутке */
    z-index: 100; /* Высокий индекс, чтобы хедер был поверх других элементов */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Легкая тень для выделения хедера */
    background-color: #3F6ED4;
}
.logo {
    display: flex;
    align-items: center; /* Центрирует логотип по вертикали */
}
.logo img {
    height: 40px; /* Высота логотипа */
    margin-right: 10px; /* Отступ между логотипом и текстом */
}
.header > div a {
    margin: 0 15px; /* Отступы между ссылками */
    text-decoration: none;
    color: white; /* Можно настроить цвет текста */
    font-size: 16px;
    cursor: pointer;
}
.header_Mobile {
    display: none;
    
    position: fixed;
    width: 100%;
    top: 0;
    background-color: #3F6ED4;
    color: white;
    text-align: end;
    font-size: 50px;
    
    padding: 15px 0;
    z-index: 200;

    -webkit-box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
    -moz-box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
    box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
}
.header_Mobile p {
    margin-right: 20px;
    cursor: pointer;
}
.headerMobile {
    display: none;
    position: absolute;
    position: fixed;
    z-index: 50;
    
    background: rgb(69,137,214);
    background: linear-gradient(340deg, rgba(69,137,214,1) 0%, rgba(63,110,212,1) 100%);
    
    
    width: 350px;
    height: 100%;
    top: 0;
    right: -500px;
    padding-top: 100px;
    
    transition: .5s ease;
    
    -webkit-box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
    -moz-box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
    box-shadow: -11px 0px 21px 0px rgba(34, 60, 80, 0.27);
}
.headerMobile img {
    width: 40px;
    margin-left: 30px;
    display: inline-block;
    vertical-align: middle;
}
.headerMobile p {
    margin-left: 15px;
    font-size: 16px;
    font-weight: 600;
    color: white;
    
    display: inline-block;
    vertical-align: middle;
}
.headerMobile hr {
    margin: 30px 0 30px 0;
}
.headerMobile a {
    width: 100%;
    display: block;
    color: white;
    padding: 20px 30px;
    font-size: 16px;
}

.main {
    padding: 60px 10% 15% 10%;
    background-image: url(dist/images/background.jpg);
    background-size: cover;
}
.main .content {
    color: black;
    font-size: 30px;
    width: 60%;
    margin-top: 15vh;
}
.main .content p {
    font-size: 20px;
    margin-top: 40px;
}
.main span {
    color: #3F6ED4;
}
.services {
    background-color: #f7f8fd;
    position: relative;
    padding: 10% 10% 0 10%;
    
    top: -50px;
    border-radius: 40px 40px 0 0;
    
    -webkit-box-shadow: -3px -5px 5px -5px rgba(34, 60, 80, 0.6);
    -moz-box-shadow: -3px -5px 5px -5px rgba(34, 60, 80, 0.6);
    box-shadow: -3px -5px 5px -5px rgba(34, 60, 80, 0.6);
}
.servicesGreed {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: row;
    grid-template-areas:
    "box1 box2 box3";
    column-gap: 40px;
    margin-bottom: 7%;
}

.box1 { grid-area: box1; }
.box2 { grid-area: box2; }
.box3 { grid-area: box3; }
.box1, .box2, .box3 {
    -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    
    background-color: #FAFCFE;
    border-radius: 10px;
    padding: 30px;
}
.servicesGreed h3 {
    font-size: 45px;
    color: #3F6ED4;
}
.servicesGreed p {
    margin: 10px 0;
}
.servicesContent {
    margin: 3% 0;
}
.servicesContent img {
    width: 40%;
    height: 500px;
    object-fit: cover;
    border-radius: 20px;
    margin-right: 7%;
    
    display: inline-block;
    vertical-align: middle;
}
.servicesPrice {
    display: inline-block;
    vertical-align: middle;
    width: 50%;
}
.service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid grey;
}
.service-name {
    font-size: 18px;
}
.service-price {
    font-size: 16px;
    color: #3F6ED4;
    font-weight: bold;
}
#lastItem {
    border-bottom: none;
    margin-top: 30px;
}
#lastItem a {
    border-bottom: 1px solid #3F6ED4;
    padding: 10px 0;
    cursor: pointer;
    color: #3F6ED4;
    font-weight: 600;
    font-size: 16px;
}

.aboutUsGreed {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 5%;
    grid-auto-flow: row;
    grid-template-areas:
        "Text1 photo1"
        "photo2 text2";
}
.Text1 { 
    grid-area: Text1; 
    padding-bottom: 60px;
}
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.text2 { grid-area: text2; }
.text2 input {
    display: inline-block;
    vertical-align: middle;
    width: 300px;
}
.text2 button {
    display: inline-block;
    vertical-align: middle;
    margin-left: 40px;
}
.text2 div {
    margin-top: 40px;
}
.aboutUs {
    padding: 0 10%;
}
.aboutUsGreed img {
    width: 90%;
    height: 550px;
    border-radius: 20px;
    object-fit: cover;
    -webkit-box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
}
.aboutUsGreed h2, .feedback h2, .servicePlastic_Title h2  {
    margin-bottom: 20px;
}
.aboutUsGreed span {
    margin-bottom: 40px;
    display: block;
    font-weight: 500; 
    line-height: 25px;
}
.aboutUsGreed p {
    font-weight: 400;
    line-height: 25px;
}

.feedback {
    padding: 10%;
    padding-bottom: 7%;
}
.feedback p {
    width: 60%;
    margin-bottom: 5%;
}
.feedbackContainer {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 40px;
    grid-auto-flow: row;
    grid-template-areas:
        "FeedBack1 FeedBack2 FeedBack3";
}
.FeedBack1 { grid-area: FeedBack1; }
.FeedBack2 { grid-area: FeedBack2; }
.FeedBack3 { grid-area: FeedBack3; }
.review-block {
    padding: 30px;
    border-radius: 20px;
    background-color: #3F6ED4;
    height: 430px;
}
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}
.user-info {
    display: flex;
    align-items: center;
}
.user-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 10px;
}
.user-details {
    display: flex;
    flex-direction: column;
}
.user-name {
    font-size: 16px;
    font-weight: bold;
    color: white;
}
.stars {
    color: #ffd600;
    font-size: 18px;
}
.review-date {
    font-size: 14px;
    color: #ffffffb0;
}
.review-text {
    color: white;
    line-height: 1.5;
}

.gallery {
    padding: 0 10%;
}
.gallery p {
    margin: 20px 0 60px 0;
    width: 60%;
}
.buttonGallery {
    text-align: end;
    margin-top: 5%;
}
.buttonGallery a {
    color: white;
    background: rgb(63,110,212);
    background: linear-gradient(112deg, rgba(63,110,212,1) 0%, rgba(69,137,214,1) 100%);
    padding: 15px 30px;
    border-radius: 30px;
    font-weight: 500;
}
.GaleryContainer {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 200px 200px 400px;
    gap: 50px;
    grid-auto-flow: row;
    grid-template-areas:
    "photo1 photo1 photo2 photo3"
    "photo1 photo1 photo4 photo5"
    "photo6 photo7 photo8 photo8";
}
.photo1 { grid-area: photo1; }
.photo2 { grid-area: photo2; }
.photo3 { grid-area: photo3; }
.photo4 { grid-area: photo4; }
.photo5 { grid-area: photo5; }
.photo6 { grid-area: photo6; }
.photo7 { grid-area: photo7; }
.photo8 { grid-area: photo8; }
.GaleryContainer div {
    display: block;
    width: 100%;
    background-color: coral;
    border-radius: 20px;
    overflow: hidden;
}
.GaleryContainer img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(52, 96, 166, 0.2);
    transition: transform 0.3s ease; 
}
.GaleryContainer div:hover img {
    transform: scale(1.1); 
}

.footerContent {  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr;
  grid-template-rows: 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  grid-template-areas:
    "footerUnfo footerUnfo footerForm";
}
.footerUnfo { grid-area: footerUnfo; }
.footerForm { grid-area: footerForm; }
.footer {
    margin-top: 10%;
    bbackground: rgb(63,110,212);
    background: linear-gradient(112deg, rgba(63,110,212,1) 0%, rgba(69,137,214,1) 100%);
    color: white;
    border-radius: 40px 40px 0 0;
    padding: 5% 10%;
}
.footerUnfo img {
    width: 50px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.footerUnfo h3 {
    display: inline-block;
    vertical-align: middle;
    width: 100px;
    font-size: 20px;
}
.footerUnfo div {
    margin-bottom: 5%;
}
.footerUnfo h2 {
    font-size: 26px;
    width: 90%;
}
.footerUnfo p {
    line-height: 25px;
    margin-top: 20px;
    margin-bottom: 50px;
    width: 65%;
}
.workTime p {
    margin: 0;
    width: 200px;
}
.socialGreed {  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 0 60px;
  grid-auto-flow: row;
  grid-template-areas:
    "workTime Instagram";
}
.workTime { grid-area: workTime; }
.Instagram { grid-area: Instagram; }
.Instagram div {
    display: block;
    padding: 30px;
}
.Instagram img {
    width: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
.Instagram span {
    display: block;
    margin-bottom: 20px;
    white-space: nowrap;
}
.footerUnfo h4 {
    margin-bottom: 20px;
}
.footerForm h2 {
    font-size: 26px;
}
.footerForm {
    background-color: white;
    color: black;
    border-radius: 30px;
    padding: 60px;
    height: auto;
    
    -webkit-box-shadow: 0px 5px 25px 2px rgba(30, 57, 101, 0.2);
-moz-box-shadow: 0px 5px 25px 2px rgba(30, 57, 101, 0.2);
box-shadow: 0px 5px 25px 2px rgba(30, 57, 101, 0.2);
}
.footerForm p {
    margin: 20px 0 40px 0;
}
.footerForm input {
    display: block;
    width: 100%;
    margin-bottom: 40px;
}
.footerForm button {
    margin-top: 30px;
}
.autor {
    text-align: center;
    padding: 10px 0;
    font-size: 13px;
}

.servicePlastic {
    padding: 5% 10% 0 10%;
    border-radius: 40px 40px 0 0;
    position: relative;
    top: -40px;
    z-index: 10;
    background-color: #f7f8fd;
}
.servicePlastic_Title {
    margin-bottom: 5%;
}
.servicePlastic_Title p {
    width: 70%;
}

.servicePlastic_Container .box1, .servicePlastic_Container .box2, .servicePlastic_Container .box3 {
    -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    
    background-color: #FAFCFE;
    border-radius: 10px;
    padding: 0;
}
.servicePlastic_Container .servicesGreed h3 {
    font-size: 25px;
    color: #3F6ED4;
    padding: 30px 30px 0 30px;
}
.servicePlastic_Container .servicesGreed p {
    margin: 10px 0;
    padding: 0 30px 0 30px;
    height: 250px;
    text-align: start;
}
.servicePlastic_Container .servicesGreed {
    text-align: center;
}
.servicePlastic_Container .servicesGreed img {
    width: 130px;
    margin-bottom: 20px;
}
#title2 {
    text-align: start;
}
.servicePlastic_Container .servicesGreed hr {
    width: 100px;
    margin: 0 auto;
    margin-top: 20px;
    margin-bottom: 40px;
    border: 1px solid #3F6ED4;
}
.servicePlastic_Container .servicesGreed div:hover hr {
    width: 70%;
    transition: .5s ease all;
}
.servicePlastic_Container .servicesGreed a {
    font-size: 16px;
    background: rgb(63,110,212);
    background: linear-gradient(112deg, rgba(63,110,212,1) 0%, rgba(69,137,214,1) 100%);
    color: white;
    width: 100%;
    display: block;
    padding: 20px 0;
    border-radius: 0 0 10px 10px;
}

.priceList {
    padding: 5% 0 0 0;
    background-color: #3F6ED4;
    color: white;
}
.priceList .servicesPrice {
    display: inline-block;
    vertical-align: middle;
    width: 100%;
}
.priceList .service-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 10%;
    border-bottom: none;
}
.priceList .service-name {
    font-size: 18px;
}
.priceList .service-price {
    font-size: 16px;
    color: white;
    font-weight: bold;
}
#second {
    background-color: #2850a7;
}
.priceList h2 {
    padding-left: 10%;
    margin-bottom: 60px;
}

.callForm {
    padding: 5% 10%;
}
.callForm_content {  
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    grid-template-rows: 1fr;
    gap: 0 60px;
    grid-auto-flow: row;
    grid-template-areas:
        "callForm_Text callForm_ContactForm";
    
    background-color: white;
    border-radius: 20px;
    padding: 60px;
    color: black;
}
.callForm_Text { grid-area: callForm_Text; }
.callForm_ContactForm { grid-area: callForm_ContactForm; }
.callForm_Text h2 {
    padding: 0;
    margin-bottom: 30px;
}
.callForm_Text span {
    color: #3F6ED4;
}

.callForm_ContactForm  input {
    width: 100%;
    margin-bottom: 30px;
}
.callForm_ContactForm button {
    margin-top: 20px;
}
.callForm_ContactForm .formNumber {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.informationContent {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 60px;
    grid-auto-flow: row;
    grid-template-areas:
        "littleInfo LittleInfoText";
}

.littleInfo { grid-area: littleInfo; }
.LittleInfoText { grid-area: LittleInfoText; }

.information {
    padding: 5% 10% 5% 10%;
    position: relative;
    margin-top: -5%;
    z-index: 10;
    background-color: #f7f8fd;
    border-radius: 40px 40px 0 0;
}

.informationContent img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
}
.servicePlastic_Profil h2,.LittleInfoText h2, .littleInfo h2 {
    margin-bottom: 30px;
}

.servicePlastic_breakdowns { 
    margin-top: 5%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 30px;
    grid-auto-flow: row;
    grid-template-areas:
        "breakdown1 breakdown2 breakdown3";
    
    text-align: center;
    position: relative;
}
.breakdown1 { grid-area: breakdown1; }
.breakdown2 { grid-area: breakdown2; }
.breakdown3 { grid-area: breakdown3; }
.breakdown1, .breakdown2, .breakdown3 {
    background-color: #3F6ED4;
    color: white;
    border-radius: 20px;
    padding-bottom: 50px;
}
.servicePlastic_breakdowns h3 {
    background-color: #2850a7;
    width: 100%;
    border-radius: 20px 20px 0 0;
    padding: 60px 20px 40px 20px;
    
    font-size: 25px;
}
.servicePlastic_breakdowns img {
    width: 100px;
    position: absolute;
    background-color: #3F6ED4;
    padding: 20px;
    border-radius: 100%;
    top: -50px;
    margin-left: -50px;
    border: 2px solid white;
}
.breakdown_Pluses {
    text-align: start;
    padding: 40px;
    min-height: 340px;
}
.breakdown_Pluses p {
    margin-bottom: 13px;
    width: 100%;
}
.breakdown_Pluses span {
    background-color: #2850a7;
    padding: 0 7px;
    font-size: 14px;
    border-radius: 100%;
    margin-right: 10px;
    display: inline-block;
}
.buttonAction {
    color: black;
    background-color: white;
    padding: 10px 25px;
    border-radius: 20px;
}


#titleText {
    width: 60%;
    margin: 30px 0 7% 0;
}
.container_profil { grid-area: container_profil; }
.container_profilBox { grid-area: container_profilBox; }
.profilBox1 { grid-area: profilBox1; }
.profilBox2 { grid-area: profilBox2; }
.profilBox3 { grid-area: profilBox3; }
.profilBox4 { grid-area: profilBox4; }
.profilBox5 { grid-area: profilBox5; }
.profilBox6 { grid-area: profilBox6; }

.container_profilBox {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 30px;
    grid-auto-flow: row;
    grid-template-areas:
        "profilBox1 profilBox2"
        "profilBox3 profilBox4"
        "profilBox5 profilBox6";
}
.servicePlastic_Profil {  
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
    "container_profil container_profilBox";
}

.container_profilBox h3 {
    margin-bottom: 30px;
}
.profilBox1, .profilBox2, .profilBox3, .profilBox4, .profilBox5, .profilBox6 {
    background-color: #dfe6f7;
    border-radius: 20px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    
}

.container_profil span {
    background-color: #3F6ED4;
    color: white;
    padding: 5px 0;
    border-radius: 100%;
    margin-right: 10px;
    
    display: inline-block;
    text-align: center;
    width: 30px;
    height: 30px;
    font-weight: 400;
    font-size: 16px;
}
.container_profil h4 {
    font-size: 20px;
    font-weight: 500;
}
.container_profil p {
    margin: 10px 0 30px 0;
    width: 80%;
}


.attention_container {  
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    gap: 30px;
    grid-auto-flow: row;
    grid-template-areas:
        "attention1 attention2 attention3"
        "attention4 attention5 attention6"
        "attention8 attention8 attention8";
     
    margin-top: 5%;
}
.attention1 { grid-area: attention1; }
.attention2 { grid-area: attention2; }
.attention3 { grid-area: attention3; }
.attention4 { grid-area: attention4; }
.attention5 { grid-area: attention5; }
.attention6 { grid-area: attention6; }
.attention8 { grid-area: attention8; }

.attention {
    padding: 5% 10%;
    position: relative;
    top: -60px;
    background-color: #f7f8fd;
    border-radius: 50px 50px 0 0;
}
.attention h2 {
    width: 60%;
    margin-bottom: 20px;
}

.attention1, .attention2, .attention3, .attention4, .attention5, .attention6 {
    background-color: #dfe6f7;
    border-radius: 20px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
    z-index: 2;
    
    position: relative; 
    overflow: hidden; 
    display: flex; 
    flex-direction: column;
    justify-content: space-between;
    transition: .5s ease all;
}
.attention1:hover, .attention2:hover, .attention3:hover, .attention4:hover, .attention5:hover, .attention6:hover {
    background-color: #3F6ED4;
    color: white;
}
.attention1:hover:before {
    color: #ffffff1a;
}
.attention2:hover:before {
    color: #ffffff1a;
}
.attention3:hover:before {
    color: #ffffff1a;
}
.attention4:hover:before {
    color: #ffffff1a;
}
.attention5:hover:before {
    color: #ffffff1a;
}
.attention6:hover:before {
    color: #ffffff1a;
}

.attention_container h3 {
    margin-bottom: 30px;
    font-size: 25px;
    font-weight: 500;
}
.attention8 {
    padding: 30px;
}
.attention8 p {
    margin-bottom: 50px;
}
.attention8 input {
    margin-right: 30px;
    display: inline-block;
    width: 30%;
}
.attention8 button {
    margin-top: 30px;
}

.attention1::before, .attention2::before, .attention3::before, .attention4::before, .attention5::before, .attention6::before {
    content: attr(data-number);
    position: absolute;
    top: 25%;
    left: 85%;
    transform: translate(-50%, -50%);
    font-size: 250px;
    font-weight: bold;
    color: rgba(63, 110, 212, 0.1);
    z-index: -1;
    pointer-events: none;
}
.attention1 { data-number: "1"; }
.attention2 { data-number: "2"; }
.attention3 { data-number: "3"; }
.attention4 { data-number: "4"; }
.attention5 { data-number: "5"; }
.attention6 { data-number: "6"; }

.attention1 h3, .attention2 h3, .attention3 h3, .attention4 h3, .attention5 h3, .attention6 h3 {
    margin-bottom: 0; 
}
.attention1 p, .attention2 p, .attention3 p, .attention4 p, .attention5 p, .attention6 p {
    margin-top: auto;
    margin-bottom: 0;
}

#wood  {
    padding: 5% 10% 5% 10%;
    margin-top: 0;
    border-radius: 40px 40px 0 0;
}
#wood .LittleInfoText h3 {
    margin: 30px 0 20px 0;
    font-weight: 500;
}
#wood .LittleInfoText span {
    color: white;
    background-color: #3F6ED4;
    font-size: 16px;
    font-weight: 500;
    border-radius: 100%;
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    padding: 5px 0;
    text-align: center;
    margin-right: 10px;
}

/* затемнение фона при вызове actionForm */
.modal-wrapper {
    visibility: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    z-index: 200;
    transition: visibility 0.3s, opacity 0.3s ease-in-out;
}
.modal-wrapper.active {
    visibility: visible;
    opacity: 1;
}
.form2 {
    background: white;
    position: fixed;
    text-align: center;
    visibility: hidden;
    opacity: 0;
    color: black;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 550px;
    max-height: 700px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -60%); /* Начальное положение формы */
    margin: auto;
    padding: 30px;
    border-radius: 20px;
    box-shadow: 0px 5px 30px 2px rgba(23, 51, 73, 0.21);
    transition: visibility 0.3s, opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}
.form2.active {
    visibility: visible;
    opacity: 1;
    transform: translate(-50%, -50%); /* Конечное положение формы */
}
.form2 p {
    margin: 20px 0 50px 0;
    width: 80%;
}
.form2 input {
    margin-bottom: 30px;
    width: 80%;
}
.form2 button {
    padding: 15px 60px;
    margin-top: 40px;
}
.closePopup { 
    position: absolute;
    top: 0;
    right: 0;
    margin: 20px 30px 0 0;
    font-weight: 400;
    font-size: 20px;
    cursor: pointer;
}

/* Стили для select */
select {
    padding: 15px 20px;
    font-size: 14px; 
    border: none;
    border-bottom: 2px solid #3F6ED4;
    cursor: pointer;
    outline: none; 
    transition: all 0.3s ease;
    appearance: none;
    width: 80%;
    margin: 20px 0;
}
/* Стили для option */
option {
    padding: 15px; 
    font-size: 14px; 
    background-color: #fff;
    color: #333;
}
option:hover {
    background-color: #007BFF;
    color: #fff;
}

/* мобильный хедер */
@media (min-width: 350px) and (max-width: 1000px) {
    .header {
        display: none;   
    }
    .header_Mobile {
        display: block;
    }
    .headerMobile {
        display: block;
    }
}

/* адаптация index */
@media (min-width: 1200px) and (max-width: 1500px) {
    input {
        padding: 15px 20px;
        font-size: 14px;
    }
    h2 {
        font-size: 30px;
    }
    .main .content {
        font-size: 26px;
        width: 70%;
    }
    .main .content p {
        font-size: 18px;
    }
    .servicesGreed h3 {
        font-size: 35px;
    }
    .servicesGreed p {
        margin: 10px 0;
    }
    .servicesContent img {
        width: 40%;
        height: 500px;
    }
    .service-name {
        font-size: 16px;
    }
    .service-price {
        font-size: 14px;
    }
    #lastItem {
        margin-top: 20px;
    }
    #lastItem a {
        font-size: 14px;
    }
    .aboutUsGreed p {
        font-size: 16px;
    }
    .text2 input {
        width: 200px;
    }
    .aboutUsGreed img {
        height: 650px;
    }
    .feedback p {
        width: 80%;
    }
    .review-block {
        height: 550px;
    }
    .user-avatar {
        width: 40px;
        height: 40px;
    }
    .user-name {
        font-size: 14px;
    }
    .stars {
        font-size: 16px;
    }
    .review-date {
        font-size: 14px;
    }
    .footerUnfo h2 {
        font-size: 22px;
    }
}
@media (min-width: 1000px) and (max-width: 1200px) {
    a {
        font-size: 14px;
    }
    button {
        padding: 13px 30px;
        font-size: 14px;

    }
    input {
        padding: 10px 20px;
    }
    p {
        line-height: 18px;
        font-size: 13px;
    }
    h2 {
        font-size: 25px;
    }
    .header {
        padding: 10px 10px; /* Немного отступов для эстетики */
        font-size: 14px;
    }
    .logo img {
        height: 30px; /* Высота логотипа */
        margin-right: 0px; /* Отступ между логотипом и текстом */
    }
    .header > div a {
        font-size: 12px;
    }
    .main .content {
        font-size: 20px;
    }
    .main .content p {
        font-size: 16px;
    }
    .servicesGreed {  
        column-gap: 20px;
    }
    .box1, .box2, .box3 {
        padding: 20px;
    }
    .servicesGreed h3 {
        font-size: 30px;
    }
    .service-name {
        font-size: 14px;
    }
    .service-price {
        font-size: 12px;
    }
    #lastItem a {
        font-size: 12px;
    }
    .Text1 { 
        padding-bottom: 0px;
    }
    .text2 input {
        width: 200px;
    }
    .text2 button {
        margin-left: 10px;
        font-size: 13px;
        padding: 10px 20px;
    }
    .text2 div {
        margin-top: 30px;
    }
    
    .aboutUsGreed img {
        width: 100%;
        height: 500px;
    }
    .aboutUsGreed span {
        margin-bottom: 30px;
        line-height: 20px;
    }
    .aboutUsGreed p {
        line-height: 20px;
    }

    .feedbackContainer {  
        gap: 20px;
    }
    .review-block {
        padding: 20px;
        height: 400px;
    }
    .review-header {
        margin-bottom: 20px;
    }
    .user-avatar {
        width: 30px;
        height: 30px;
    }
    .user-name {
        font-size: 13px;
    }
    .stars {
        font-size: 13px;
    }
    .review-date {
        font-size: 11px;
    }
    .review-text {
        font-size: 13px;
    }

    .GaleryContainer {  
        grid-template-rows: 200px 200px 300px;
        gap: 20px;
    }

    .footerUnfo h3 {
        font-size: 18px;
    }
    .footerUnfo h2 {
        font-size: 20px;
    }
    .footerUnfo p {
        line-height: 20px;
        margin-top: 20px;
        margin-bottom: 50px;
        width: 65%;
    }
    .workTime p {
        margin: 0;
        width: 150px;
    }
    .Instagram img {
        width: 20px;
    }
    .Instagram span {
        margin-bottom: 15px;
    }
    .footerForm h2 {
        font-size: 20px;
    }
    .footerForm {
        padding: 40px;
    }
    .footerForm input {
        margin-bottom: 30px;
        font-size: 12px;
    }
    .footerForm button {
        margin-top: 30px;
    }
}
@media (min-width: 600px) and (max-width: 1000px) {
    button {
        cursor: pointer;

        padding: 15px 30px;
        font-size: 16px;
    }
    p {
        line-height: 24px;
    }
    input {
        padding: 20px 30px;
        font-size: 14px;
    }
    h2 {
        font-size: 35px;
    }

    .main {
        padding: 60px 10% 25% 10%;
    }
    .main .content {
        color: black;
        font-size: 16px;
        width: 90%;
    }
    .main .content p {
        font-size: 15px;
        margin-top: 30px;
        line-height: 20px;
    }
    .services {
        border-radius: 30px 30px 0 0;
    }
    .servicesGreed {  
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
        "box1"
        "box2"
        "box3";
        gap: 40px;
        margin-bottom: 60px;
    }
    .servicesGreed h3 {
        font-size: 40px;
    }
    .servicesGreed p {
        margin: 10px 0;
    }
    .servicesContent {
        margin: 30px 0;
    }
    .servicesContent img {
        width: 100%;
        height: 400px;
        margin-right: 0;
        margin-bottom: 30px;
    }
    .servicesPrice {
        width: 100%;
    }
    .service-name {
        font-size: 14px;
    }
    .service-price {
        font-size: 12px;
    }
    #lastItem a {
        font-size: 13px;
    }

    .aboutUsGreed {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 0;
        grid-template-areas:
            "photo1"
            "Text1"
            "photo2"
            "text2";
    }
    .Text1 { 
        padding-bottom: 0px;
    }
    .text2 input {
        width: 100%;
        margin-bottom: 30px;
    }
    .text2 button {
        margin-left: 0px;
    }
    .aboutUsGreed img {
        width: 100%;
        height: 90%;
    }
    .aboutUsGreed h2, .feedback h2, .servicePlastic_Title h2  {
        margin-bottom: 20px;
        font-size: 30px;
    }

    .feedback {
        padding: 10%;
        padding-bottom: 60px;
    }
    .feedback p {
        width: 100%;
        margin-bottom: 60px;
    }
    .feedbackContainer {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 40px;
        grid-auto-flow: row;
        grid-template-areas:
            "FeedBack1" "FeedBack2" "FeedBack3";
    }
    
    .gallery p {
        margin: 20px 0 60px 0;
        width: 100%;
    }
    .buttonGallery {
        margin-top: 60px;
    }
    .GaleryContainer {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 300px 200px 300px 200px 300px 1fr 200px;
        gap: 50px;
        grid-auto-flow: row;
        grid-template-areas:
        "photo1" "photo2" "photo3"
        "photo4" "photo5"
        "photo6" "photo7" "photo8";
    }
    

    .footerContent {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
        "footerUnfo" "footerForm";
        margin-top: 20px;
    }
    .footer {
        margin-top: 60px;
        border-radius: 30px 30px 0 0;
    }
    .footerUnfo img {
        width: 40px;
    }
    .footerUnfo h3 {
        font-size: 18px;
    }
    .footerUnfo div {
        margin-bottom: 30px;
    }
    .footerUnfo h2 {
        font-size: 20px;
        width: 80%;
    }
    .footerUnfo p {
        width: 80%;
    }
    .socialGreed {  
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        gap: 0 20px;
        grid-auto-flow: row;
        grid-template-areas:
        "workTime Instagram";
        font-size: 15px;
    }
    .Instagram img {
        width: 23px;
    }
    .footerForm {
        padding: 50px;
        height: auto;
    }
    .footerForm input {
        display: block;
        width: 100%;
        margin-bottom: 40px;
    }
    .footerForm button {
        margin-top: 0px;
    }
}
@media (min-width: 300px) and (max-width: 600px) {
    button {
        cursor: pointer;

        padding: 12px 30px;
        font-size: 13px;
    }
    p {
        font-size: 13px;
        line-height: 23px;
    }
    input {
        padding: 13px 20px;
        font-size: 13px;
    }
    h2 {
        font-size: 20px;
    }

    .header_Mobile p{
        font-size: 40px;
        padding: 0;
    }
    .header_Mobile  {
        padding: 13px 0;
    }
    .main {
        padding: 60px 10% 25% 10%;
    }
    .main .content {
        color: black;
        font-size: 18px;
        width: 100%;
    }
    .main .content p {
        font-size: 13px;
        margin-top: 30px;
        line-height: normal;
    }
    .services {
        border-radius: 30px 30px 0 0;
    }
    .servicesGreed {  
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        grid-template-areas:
        "box1"
        "box2"
        "box3";
        gap: 40px;
        margin-bottom: 60px;
    }
    .servicesGreed h3 {
        font-size: 35px;
    }
    .servicesGreed p {
        margin: 10px 0;
    }
    .servicesContent {
        margin: 50px 0;
    }
    .servicesContent img {
        width: 100%;
        height: 400px;
        margin-right: 0;
        margin-bottom: 30px;
    }
    .servicesPrice {
        width: 100%;
    }
    .service-name {
        font-size: 14px;
    }
    .service-price {
        font-size: 12px;
    }
    #lastItem a {
        font-size: 13px;
    }
    #lastItem {
        margin: 0;
        display: block;
    }
    #lastItem a {
        display: block;
        margin-bottom: 20px;
    }
    
    .aboutUsGreed {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        gap: 0;
        grid-template-areas:
            "photo1"
            "Text1"
            "photo2"
            "text2";
    }
    .aboutUsGreed span {
        font-size: 13px;
        line-height: 23px;
    }
    .aboutUsGreed p {
        font-size: 13px;
        line-height: 23px;
    }
    .Text1 { 
        padding-bottom: 50px;
    }
    .text2 input {
        width: 100%;
        margin-bottom: 30px;
    }
    .text2 button {
        margin-left: 0px;
    }
    .aboutUsGreed img {
        width: 100%;
        height: 90%;
    }
    .aboutUsGreed h2, .feedback h2, .servicePlastic_Title h2  {
        margin-bottom: 20px;
        font-size: 20px;
    }

    .feedback {
        padding: 10%;
        padding-bottom: 60px;
    }
    .feedback p {
        width: 100%;
        margin-bottom: 60px;
    }
    .review-block {
        padding: 30px;
        border-radius: 20px;
        background-color: #3F6ED4;
        height: auto;
    }
    .feedbackContainer {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 40px;
        grid-auto-flow: row;
        grid-template-areas:
            "FeedBack1" "FeedBack2" "FeedBack3";
    }

    .user-avatar {
        width: 40px;
        height: 40px;
    }
    .user-name {
        font-size: 14px;
    }
    .stars {
        font-size: 16px;
    }
    .review-date {
        font-size: 12px;
    }
    .review-text {
        font-size: 13px;
    }
    
    .gallery p {
        margin: 20px 0 60px 0;
        width: 100%;
    }
    .buttonGallery {
        margin-top: 60px;
        font-size: 13px;
    }
    .GaleryContainer {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 200px 300px 200px 300px 200px 300px 1fr 200px;
        gap: 50px;
        grid-auto-flow: row;
        grid-template-areas:
        "photo1" "photo2" "photo3"
        "photo4" "photo5"
        "photo6" "photo7" "photo8";
    }
    
    .workTime p {
        margin: 0;
        width: 200px;
        font-size: 14px;
    }
    .footerContent {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 0.5fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
        "footerUnfo" "footerForm";
        margin-top: 20px;
    }
    .footer {
        margin-top: 60px;
        border-radius: 30px 30px 0 0;
    }
    .footerUnfo img {
        width: 40px;
    }
    .footerUnfo h3 {
        font-size: 18px;
    }
    .footerUnfo div {
        margin-bottom: 30px;
    }
    .footerUnfo h2 {
        font-size: 20px;
        width: 100%;
    }
    .footerUnfo p {
        width: 100%;
    }
    .socialGreed {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0 20px;
        grid-auto-flow: row;
        grid-template-areas:
        "workTime" "Instagram";
        font-size: 15px;
    }
    .Instagram img {
        width: 23px;
    }
    .footerForm {
        padding: 40px;
        height: auto;
    }
    .footerForm input {
        display: block;
        width: 100%;
        margin-bottom: 40px;
    }
    .footerForm button {
        margin-top: 0px;
    }
    .footerForm p {
        font-size: 13px;
    }
    .footerForm h2 {
        font-size: 20px;
    }
}
/* адаптация алюмин пластик */
@media (min-width: 300px) and (max-width: 600px) {
    .servicePlastic_Title {
        margin-bottom: 60px;
    }
    .servicePlastic_Title p {
        width: 100%;
    }

    .servicePlastic_Container .servicesGreed h3 {
        font-size: 20px;
    }
    .servicePlastic_Container .servicesGreed p {
        margin: 10px 0 20px 0;
        height: auto;
    }
    .servicePlastic_Container .servicesGreed img {
        width: 130px;
        margin-bottom: 20px;
    }
    .servicePlastic_Container .servicesGreed hr {
        margin-top: 20px;
        margin-bottom: 30px;
    }
    .servicePlastic_Container .servicesGreed a {
        font-size: 13px;
    }

    .priceList {
        padding: 10% 0;
    }
    .priceList .service-name {
        font-size: 13px;
        width: 70%;
    }
    .priceList .service-price {
        font-size: 10px;
        text-align: end;
        width: 80px;
    }

    .callForm_content {  
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 30px;
        grid-template-areas:
            "callForm_Text" "callForm_ContactForm";
        padding: 30px;
    }

    .informationContent {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.5fr 1fr;
        gap: 60px;
        grid-auto-flow: row;
        grid-template-areas:
            "littleInfo" "LittleInfoText";
    }
    .information {
        padding: 5% 10% 10% 10%;
        border-radius: 30px 30px 0 0;
    }

    .servicePlastic_breakdowns { 
        margin-top: 20%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 70px;
        grid-auto-flow: row;
        grid-template-areas:
            "breakdown1" "breakdown2" "breakdown3";
    }
    .servicePlastic_breakdowns h3 {
        border-radius: 20px 20px 0 0;
        padding: 50px 20px 40px 20px;

        font-size: 20px;
    }
    .servicePlastic_breakdowns img {
        width: 80px;
        position: absolute;
        background-color: #3F6ED4;
        padding: 10px;
        border-radius: 100%;
        top: -40px;
        margin-left: -40px;
    }
    .breakdown_Pluses {
        text-align: start;
        padding: 30px;
        min-height: 300px;
        height: auto;
    }
    .breakdown_Pluses span {
        padding: 0 8px;
        font-size: 10px;
    }
    .buttonAction {
        color: black;
        background-color: white;
        padding: 10px 25px;
        border-radius: 20px;
        font-size: 13px;
    }


    #titleText {
        width: 100%;
        margin: 30px 0 7% 0;
    }
    .container_profilBox {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr 1fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "profilBox1" 
            "profilBox2"
            "profilBox3" 
            "profilBox4"
            "profilBox5" 
            "profilBox6";
    }
    .servicePlastic_Profil {  
        display: grid;
        grid-template-columns: 1fr ;
        grid-template-rows: 0.5fr 1fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
        "container_profil" "container_profilBox";
    }

    .container_profil span {
        padding: 4px 0;
        width: 25px;
        height: 25px;
        font-size: 13px;
    }
    .container_profil h4 {
        font-size: 16px;
    }
    .container_profil p {
        width: 100%;
    }

    .attention_container {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 0.9fr 0.9fr 0.9fr 0.9fr 0.9fr 0.8fr 0.8fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "attention1" "attention2" "attention3"
            "attention4" "attention5" "attention6"
            "attention8";

        margin-top: 10%;
    }

    .attention {
        padding: 10%;
        border-radius: 30px 30px 0 0;
    }
    .attention h2 {
        width: 100%;
        margin-bottom: 20px;
    }

    .attention_container h3 {
        font-size: 18px;
    }
    .attention8 {
        padding: 30px 0;
    }
    .attention8 input {
        margin-right: 0px;
        margin-bottom: 30px;
        width: 100%;
    }
    .attention8 button {
        margin-top: 0px;
    }

    .attention1::before, .attention2::before, .attention3::before, .attention4::before, .attention5::before, .attention6::before {
        top: 16%;
        left: 85%;
        font-size: 200px;
    }

    #wood .LittleInfoText h3 {
        margin: 30px 0 20px 0;
        font-weight: 500;
        font-size: 16px;
    }
    #wood .LittleInfoText span {
        font-size: 13px;
        width: 20px;
        height: 20px;
        padding: 2px 0;
    }

    .form2 {
        width: 90%;
        max-height: 95%;
    }
    .form2 h1 {
        font-size: 23px;
        margin-top: 40px;
    }
    .form2 p {
        margin: 20px 0 50px 0;
        width: 100%;
    }
    .form2 input {
        margin-bottom: 30px;
        width: 100%;
    }
    .form2 button {
        padding: 15px 60px;
        margin-top: 30px;
    }
    select {
        padding: 12px 20px;
        font-size: 13px; 
        width: 100%;
    }
}
@media (min-width: 600px) and (max-width: 1000px) {
    .servicePlastic {
        border-radius: 30px 30px 0 0;
    }
    .servicePlastic_Title {
        margin-bottom: 60px;
    }
    .servicePlastic_Title p {
        width: 80%;
    }
    .priceList {
        padding: 10% 0;
    }
    .priceList .service-name {
        font-size: 18px;
        width: 400px;
    }
    .priceList .service-price {
        font-size: 16px;
        color: white;
        font-weight: bold;
        width: 150px;
        text-align: end;
    }
    .callForm_content {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0 60px;
        grid-auto-flow: row;
        grid-template-areas:
            "callForm_Text" "callForm_ContactForm";

        background-color: white;
        border-radius: 20px;
        padding: 60px;
        color: black;
    }
    .informationContent {   
        margin-top: 40px;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 60px;
        grid-auto-flow: row;
        grid-template-areas:
            "littleInfo" "LittleInfoText";
    }
    .information {
        padding: 5% 10% 10% 10%;
        position: relative;
        margin-top: -5%;
        z-index: 10;
        background-color: #f7f8fd;
        border-radius: 40px 40px 0 0;
    }
    .servicePlastic_Profil h2,.LittleInfoText h2, .littleInfo h2 {
        margin-bottom: 30px;
        font-size: 25px;
    }
    .servicePlastic_breakdowns { 
        margin-top: 15%;
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "breakdown1" "breakdown2" "breakdown3";

        text-align: center;
        position: relative;
    }
    .breakdown_Pluses {
        text-align: start;
        padding: 40px;
        min-height: 300px;
    }
    #titleText {
        width: 80%;
        margin: 30px 0 7% 0;
    }

    .container_profilBox {  
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "profilBox1 profilBox2"
            "profilBox3 profilBox4"
            "profilBox5 profilBox6";
    }
    .servicePlastic_Profil {  
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
        "container_profil" "container_profilBox";
    }

    .container_profilBox h3 {
        margin-bottom: 30px;
        font-size: 18px;
    }
    .profilBox1, .profilBox2, .profilBox3, .profilBox4, .profilBox5, .profilBox6 {
        padding: 20px;
    }



    .attention_container {  
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.9fr 0.9fr 0.9fr 0.9fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "attention1 attention2" "attention3 attention4" "attention5 attention6"
            "attention8 attention8";

        margin-top: 10%;
    }

    .attention {
        padding: 10%;
        position: relative;
        top: -60px;
        background-color: #f7f8fd;
        border-radius: 30px 30px 0 0;
    }
    .attention h2 {
        width: 80%;
        margin-bottom: 20px;
        font-size: 25px;
    }

    .attention1, .attention2, .attention3, .attention4, .attention5, .attention6 {
        padding: 20px;
    }
    .attention_container h3 {
        font-size: 18px;
    }
    .attention8 {
        padding: 0px;
    }
    .attention8 input {
        margin-right: 0px;
        margin-bottom: 20px;
        display: inline-block;
        width: 100%;
    }
    .attention8 button {
        margin-top: 10px;
    }

    .attention1::before, .attention2::before, .attention3::before, .attention4::before, .attention5::before, .attention6::before {
        top: 15%;
        left: 75%;
        font-size: 200px;
    }

    
    #wood  {
        padding: 10%;
        margin-top: 0;
        border-radius: 40px 40px 0 0;
    }
    #wood .LittleInfoText h3 {
        margin: 30px 0 20px 0;
        font-weight: 500;
    }
    #wood .LittleInfoText span {
        color: white;
        background-color: #3F6ED4;
        font-size: 16px;
        font-weight: 500;
        border-radius: 100%;
        display: inline-block;
        vertical-align: middle;
        width: 30px;
        height: 30px;
        padding: 5px 0;
        text-align: center;
        margin-right: 10px;
    }
}
@media (min-width: 1000px) and (max-width: 1200px) {
    .attention_container h3 {
        font-size: 20px;
    }
    .attention_container input {
        width: 200px;
    }
    .servicePlastic_breakdowns h3 {
        font-size: 18px;
    }
    .servicePlastic_breakdowns h3 {
        padding: 50px 0px 20px 0px;
    }
    .servicePlastic_breakdowns img {
        width: 80px;
        padding: 10px;
        top: -40px;
        margin-left: -40px;
    }
    .breakdown_Pluses {
        text-align: start;
        padding: 20px;
        min-height: 270px;
    }
    .breakdown_Pluses span {
        background-color: #2850a7;
        padding: 0 4px;
        font-size: 14px;
        border-radius: 100%;
        margin-right: 10px;
        display: inline-block;
    }

    .container_profilBox {  
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 0.5fr 0.5fr 0.5fr;
        gap: 30px;
        grid-auto-flow: row;
        grid-template-areas:
            "profilBox1 profilBox2"
            "profilBox3 profilBox4"
            "profilBox5 profilBox6";
    }
    .container_profilBox h3 {
        margin-bottom: 30px;
        font-size: 16px;
    }
    .profilBox1, .profilBox2, .profilBox3, .profilBox4, .profilBox5, .profilBox6 {
        background-color: #dfe6f7;
        border-radius: 20px;
        padding: 30px;
        -webkit-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
        -moz-box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);
        box-shadow: 0px 5px 25px -7px rgba(66, 134, 245, 0.2);

    }

    .container_profil span {
        background-color: #3F6ED4;
        color: white;
        padding: 2px 0;
        border-radius: 100%;
        margin-right: 10px;

        display: inline-block;
        text-align: center;
        width: 20px;
        height: 20px;
        font-weight: 400;
        font-size: 13px;
    }
    .container_profil h4 {
        font-size: 16px;
        font-weight: 500;
        width: 95%;
    }
    .container_profil p {
        margin: 10px 0 30px 0;
        width: 90%;
    }
    
    #wood .LittleInfoText h3 {
        margin: 30px 0 20px 0;
        font-weight: 500;
        font-size: 16px;
    }
    #wood .LittleInfoText span {
        color: white;
        background-color: #3F6ED4;
        font-size: 13px;
        font-weight: 500;
        border-radius: 100%;
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        padding: 2px 0;
        text-align: center;
        margin-right: 10px;
    }
    .servicePlastic_Container .servicesGreed h3 {
        font-size: 18px;
    }
    .servicePlastic_Container .servicesGreed a {
        font-size: 13px;
    }
    
    .priceList .service-name {
        font-size: 16px;
    }
    .priceList .service-price {
        font-size: 14px;
    }
}
@media (min-width: 1200px) and (max-width: 1500px) {
    .servicePlastic_Container .servicesGreed h3 {
        font-size: 20px;
    }
    .servicePlastic_Container .servicesGreed p {
        height: 300px;
    }
    
}