@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');

* {
    margin: 0;
    padding: 0;
    outline: none;
}

body, html {
    width: 100%;
    height: 100%;
}

body::-webkit-scrollbar {
    width: 8px;               /* ширина scrollbar */
  }
body::-webkit-scrollbar-track {
    background: rgb(255, 255, 255);        /* цвет дорожки */
}
body::-webkit-scrollbar-thumb {
    background-color: rgb(114, 114, 114);    /* цвет плашки */
    /* border-radius: 20px;       закругления плашки */
    /* border: 1px solid rgb(209, 209, 209);  padding вокруг плашки */
}

html {
    background-image: url('/icon/fone.jpg');
    background-blend-mode: overlay;
    background-color: #ffffffdb;
}

header {
    width: 100%;
    padding: 0px 0.5px 0 0.5%;
    background: transparent;
    display: flex;
    position: fixed;
    justify-content: space-between;

}

#logo {
    color: #ffffff;
    cursor: pointer;
    padding-top: 14px;
    padding-bottom: 8px;
}

#logotip {
    float: left;
    /* padding-top: 40px; */
}

#name {
    padding-left: 34px;
    line-height: 55px;
}

#logo {
    font-size: 20px;
    font-weight: 200;
    /* line-height: 45px; */
    margin-left: 104px;
    font-family: "Inter", sans-serif;
    float: left;
    vertical-align: middle;
}

.number {
    color: #e8e8e8;
    font-size: 18px;
    font-weight: 200;
    float: left;
    font-family: "Inter", sans-serif;
    margin-right: 34px;
    transition: transform 0.1s ease;
    margin-top: 21px;
    padding: 0;
}

.nomer {
    font-weight: 400;
    color: #ffeded;
    font-size: 1.15em;
}

.number:hover{
    transform: scale(1.02);
}

.number:hover{
    color: #ffffff;
    cursor: pointer;
}


#about {
    display:flex;
    margin-right: 104px;
}

.a1 {
    float: left;
    width: 45px;
    margin-top: 20px;
    margin-right: 34px;
    transition: transform 0.1s ease;
    cursor: pointer;
}

.a1:hover {
    transform: scale(1.1); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.a1:active {
    transform: scale(1.05); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

.a3 {
    position: absolute;
    width: 45px;
    padding-left: 15px;
    text-decoration: none;
}



#youtube {
    width: 190px;
    height: 45px;
    background-color: #5C5C5C;
    float: left;
    border-radius: 11px;
    transition: transform 0.1s ease;
    margin-top: 20px;
    cursor: pointer;

}

#youtube:hover {
    transform: scale(1.07); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
#youtube:active {
    transform: scale(1.05); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

#youtube span {
    position: absolute;
    font-size: 15px;
    color: #ffffff;
    font-weight: 200;
    font-family: "Inter", sans-serif;
    padding-left: 72px;
    padding-top: 14px;
}

.a3hide {
    display: none;
    width: 45px;
    float: left;
    margin-top: 20px;
}
.a3hide:hover {
    transform: scale(1.1); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.a3hide:active {
    transform: scale(1.05); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

.a123 {
    padding-top: 5000px;
}

.fixed {
    z-index: 5000;
    background-color: rgba(0, 0, 0, 0.504);
    backdrop-filter: blur(5px);
    animation: ani 2.5s forwards;
    
}

.a1phone {
    display: none;
}

@media screen and (max-width:1399px) {
    #youtube {
        display: none;        
    }
    .a1{
        width: 40px;  
        margin-top: 22px;      
    }
    .a3hide {
        display: inline;
    }
    #about {
        margin-right: 5%;
    }
    #logo {
        margin-left: 5%;
    }
    .zagol {
        margin-left: 150px;
    }
    .nomerhide {
        display: none;
    }
    .number {
        margin-top: 25px;
        /* background-color: #ff822e4b; */
        padding: 5px 8px 5px 8px;
        border-radius: 4px;
    }
}

@media screen and (max-width:850px) {
    .a1phone {
        display: inline;
        width: 40px; 
        float: left;
        margin-top: 22px;   
        margin-right: 34px;
        transition: transform 0.1s ease;
    }
    .a1phone:hover {
        transform: scale(1.1); /* Увеличение размера иконки */
      }
      
    /* Анимация нажатия */
    .a1phone:active {
        transform: scale(1.05); /* Немного меньше увеличение для эффекта нажатия */
        transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
    }
    .number {
        display: none;
    }
}

@media screen and (max-width:650px) {
    #name {
        display: none;
    }
}

/* Главный блок на сайте */

#top {
    width: 100%;
    height: 800px;
    background-image: url(/photo/glavfon/glavfon1.jpg);
    background-blend-mode: multiply;
    background-color: #2d1919aa;
    background-size: cover;
    color: #ffffff;
    font-family: "Inter", sans-serif;
}

.zagol {
    font-size: 45px;
    font-weight: 200;
    margin-left: 205px;
    padding-top: 200px;
}
.podz {
    font-size: 34px;
    font-weight: 300;
    padding-top: 44px;
    padding-left: 205px;
    padding-top: 25px;
    padding-right: 5%;
    color: #d0d0d0;
}

.os {
    width: 240px;
    height: 53px;
    background-color: #FF822E;
    border-radius: 2px;
    border: 0px;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    margin-top: 80px;
    margin-left: 205px;
    transition: transform 0.3s ease;
    cursor: pointer;
}
.os:hover {
    transform: scale(1.05); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.os:active {
    transform: scale(1.03); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

.services {
    width: 200px;
    height: 53px;
    background-color: #ff822e00;
    border-radius: 2px;
    border-style: solid;
    border-width: 3px;
    border-color: #ffffff;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    font-size: 18px;
    margin-top: 50px;
    margin-left: 39px;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.services:hover {
    transform: scale(1.05); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.services:active {
    transform: scale(1.03); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}




@media screen and (min-width: 1700px) {
    #top {
        height: 100%;
        max-height: 980px;
    }
    .zagol {
        font-size: 54px;
    }
    .zagol {
        padding-top: 270px;
    }
    .podz {
        font-size: 42px;
        padding-top: 65px;
    }
    .os {
        width: 280px;
        height: 60px;
        font-size: 23px;
        margin-top: 90px;
    }
    .services {
        width: 240px;
        height: 60px;
        font-size: 23px;
    }
}

@media screen and (max-width:1399px) {
    #top {
        height: 700px;
    }
    .zagol {
        margin-left: 10%;
        padding-top: 160px;
        font-size: 40px;
    }
    .podz {
        padding-left: 10%;
        font-size: 30px;
    }
    .os {
        width: 200px;
        height: 50px;
        font-size: 14px;
        margin-top: 90px;
        margin-left: 10%;
    }
    .services {
        width: 180px;
        height: 50px;
        font-size: 14px;
    }
}

@media screen and (max-width:800px) {
    #top {
        height: 550px;
    }
    .zagol {
        padding-top: 140px;
        /* font-size: 34px; */
    }
    .podz {
        font-size: 25px;
    }
    .os {
        width: 180px;
        height: 45px;
        margin-top: 60px;
        margin-left: 10%;
    }
    .services {
        margin-left: 20px;
        width: 150px;
        height: 45px;
    }
}

@media screen and (max-width:800px) {
    #top {
        background-image: url(/photo/glavfon/glavfon2.jpg);
        background-blend-mode: overlay;
        background-color: #2a2a2adb;
    }
    .zagol {
        font-weight: 400;
    }
}

@media screen and (max-width:673px) {
    /* #top {
        height: 550px;
    } */
    .zagol {
        /* padding-top: 140px; */
        font-size: 30px;
    }
    .podz {
        font-size: 20px;
    }
}

@media screen and (max-width:600px) {
    #top {
        height: 550px;
    }
    .zagol {
        padding-top: 140px;
        font-size: 30px;
    }
    .podz {
        font-size: 20px;
    }
    .os {
        width: 173px;
        height: 42px;
        /* font-size: 12px; */
        margin-top: 60px;
        margin-left: 10%;
    }
    .services {
        width: 145px;
        height: 42px;
        /* font-size: 12px; */
    }
}

@media screen and (max-width:520px) {
    #top {
        background-image: url(/photo/glavfon/glavfon3.jpg);
    }    
    .zagol {
        padding-top: 150px;
        font-size: 27px;
        padding-right: 5%;
    }
    .podz {
        font-size: 18px;
    }
    .os {
        width: 160px;
        height: 38px;
        /* font-size: 13px; */
        margin-top: 60px;
        margin-left: 10%;
    }
    .services {
        width: 140px;
        height: 38px;
        /* font-size: 13px; */
    }
    .a1, .a1phone {
        width: 35px;
        margin-top: 24px;
        margin-right: 20px;
    }
    .a3hide {
        width: 37px;
        margin-top: 24px;
    }
}

@media screen and (max-width:450px) {
    #top {
        height: 620px;
    }    
    .podz {
        font-size: 16px;
    }
    .os {
        width: 170px;
        height: 43px;
        /* font-size: 13px; */
        margin-top: 60px;
        margin-left: 10%;
        margin-right: 60px;
    }
    .services {
        width: 145px;
        height: 43px;
        margin-left: 10%;
        /* font-size: 13px; */
        margin-top: 20px;
    }
}

@media screen and (max-width:400px) {
    .a1{
        width: 30px;  
        margin-top: 22px;      
    }
    .a1phone {
        width: 30px;
    }
    .a3hide {
        width: 30px;
    }
    .a1, .a1phone {
        margin-top: 20px;
        margin-right: 15px;
    }
    .a3hide {
        margin-top: 20px;
    }
    .logotip {
        width: 40px;
    }
}


/* Блок с услугами */

#services {
    text-align: center;
    font-family: "Inter", sans-serif;
    padding-bottom: 100px;
    margin-left: 5%;
    margin-right: 5%;
}

.servzag {
    font-size: 28px;
    font-weight: 300;
    padding-top: 100px;
}

.servdesc {
    margin-top: 40px;
    color: #303030;
}

.serv1234 {
    display: grid;
    /* Автоматически заполняем на всю ширину grid-контейнера */
    grid-template-columns: repeat(auto-fill, 265px);
    width: 100%;
    max-width: 1300px; /* Ширина grid-контейнера */
    justify-content: center;
    justify-items: center; /* Размещаем карточку по центру */
    column-gap: 40px; /* Отступ между колонками */
    row-gap: 40px; /* Отступ между рядами */
    margin: 0 auto;
    margin-top: 70px;
    text-align: left;
}

.ser1 {
    width: 290px;
    height: 412px;
    border: #303030;
    /* border-style: solid;
    border-width: 1px; */
    transition: transform 0.1s ease;
    position: relative;
}

.ser1:hover {
    transform: scale(1.01);
    position:static;
}

.nameserv {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 400;
}

.nameserv1 {
    margin-top: 18px;
    font-size: 16px;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    display: none;
}

.priceserv {
    margin-top: 15px;
    font-size: 18px;
    font-weight: 500;
}

.descserv {
    margin-top: 15px;
    font-size: 13px;
}

.buttserv {
    margin-top: 17px;
    width: 140px;
    height: 33px;
    background-color: #FF822E;
    border: none;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    border-radius: 2px;
    transition: transform 0.1s ease;
    cursor: pointer;
}

.buttserv:hover {
    transform: scale(1.05); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.buttserv:active {
    transform: scale(1.03); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

.buttserv3 {
    margin-top: 17px;
    width: 140px;
    height: 33px;
    background-color: #FF822E;
    border: none;
    color: #ffffff;
    font-family: "Inter", sans-serif;
    border-radius: 2px;
    transition: transform 0.1s ease;
    cursor: pointer;
}

.buttserv3:hover {
    transform: scale(1.05); /* Увеличение размера иконки */
  }
  
/* Анимация нажатия */
.buttserv3:active {
    transform: scale(1.03); /* Немного меньше увеличение для эффекта нажатия */
    transition: transform 0.1s; /* Более быстрая анимация для эффекта нажатия */
}

@media screen and (max-width:800px) {
    #services {
        padding-bottom: 80px;
    }
    .servzag {
        /* font-size: 22px; */
        padding-top: 12%;
    }
    .servdesc {
        margin-top: 30px;
        font-size: 13px;
    }
    .a10 {
        width: 200px
    }
    .ser1 {
        width: 200px;
        height: 307px;
    }
    .serv1234 {
        grid-template-columns: repeat(auto-fill, 200px);
        max-width: 700px; /* Ширина grid-контейнера */
        column-gap: 10px; /* Отступ между колонками */
        row-gap: 35px; /* Отступ между рядами */
        margin: 0 auto;
        margin-top: 50px;
    }
    .nameserv {
        margin-top: 12px;
        font-size: 11px;
    }
    
    .priceserv {
        margin-top: 11px;
        font-size: 13px;
        font-weight: 500;
    }
    
    .descserv {
        margin-top: 12px;
        font-size: 10px;
    }
    
    .buttserv {
        margin-top: 13px;
        width: 120px;
        height: 27px;
        border: none;
        font-size: 12px;
        position: absolute; 
        bottom: 0;
    }
}



@media screen and (max-width:456px) {
    .servzag {
        font-size: 19px;
        padding-top: 15%;
    }
    .servdesc {
        margin-top: 27px;
        font-size: 13px;
    }
    .a10 {
        width: 100%;
    }
    .ser1 {
        width: 100%;
        height: 220px;
    }
    .serv1234 {
        grid-template-columns: repeat(auto-fill, 47%);
        max-width: 400px; /* Ширина grid-контейнера */
        column-gap: 5px; /* Отступ между колонками */
        row-gap: 35px; /* Отступ между рядами */
        margin: 0 auto;
        margin-top: 40px;
    }
    .nameserv {
        display: none;
    }

    .nameserv1 {
        display: block;
        margin-top: 10px;
        font-size: 10px;
    }
    
    .priceserv {
        /* margin-top: 11px; */
        font-size: 11px;
        font-weight: 500;
        position: absolute; 
        bottom: 37px;
    }
    
    .descserv {
        display: none;
    }
    
    .buttserv {
        margin-top: 13px;
        width: 120px;
        height: 25px;
        border: none;
        font-size: 11px;
        position: absolute; 
        bottom: 0;
    }

    #services {
        padding-bottom: 70px;
    }
    .br {
        display: none;
    }
    #services {
        margin-left: 1%;
        margin-right: 1%;
    }
}

@media screen and (max-width:456px) {
    .ser1 {
        height: 240px;
    }
}

@media screen and (max-width:360px) {
    .ser1 {
        height: 230px;
    }
}

@media screen and (max-width:333px) {
    .ser1 {
        height: 220px;
    }
}

@media screen and (max-width:315px) {
    .ser1 {
        height: 215px;
    }
}




/* Примеры работ */


#photo {
    text-align: center;
    font-family: "Inter", sans-serif;
    background-color: #ebebeb7d;
    padding-bottom: 100px;
    padding-left: 1%;
    padding-right: 1%;
}

.photozag {
    font-size: 28px;
    font-weight: 300;
    padding-top: 100px;
}

.photodesc {
    margin-top: 40px;
    color: #303030;
}

.photo {
    display: grid;
    /* Автоматически заполняем на всю ширину grid-контейнера */
    grid-template-columns: repeat(auto-fill, 265px);
    width: 100%;
    max-width: 1300px; /* Ширина grid-контейнера */
    justify-content: center;
    justify-items: center; /* Размещаем карточку по центру */
    column-gap: 40px; /* Отступ между колонками */
    row-gap: 3px; /* Отступ между рядами */
    margin: 0 auto;
    margin-top: 70px;
    text-align: left;
}


.ph1 {
    overflow: hidden;
    border: #303030;
    /* border-style: solid;
    border-width: 1px; */
}

.ph1hide {
    display: none;
}

.a11:hover  {
    transform: scale(1.1);
}

.a11 {
    transition: transform 0.5s;
}

/* @media screen and (min-width: 973px) and (max-width: 1310px) {
    .ph1hide {
        display: inline;
    }
}

@media screen and (min-width: 801px) and (max-width: 972px) {
    .ph1hide {
        display: none;
    }
} */

/* @media screen and (max-width: 801px) {
    .ph1hide {
        display: inline;
    }
}

@media screen and (max-width: 684px) {
    .ph1hide {
        display: none;
    }
} */

.more {
    margin-top: 20px;
}

.youtubemore {
    color: red;
    font-weight: 600;
    font-size: 17px;
    cursor: pointer;
}
@media screen and (max-width:800px) {
    #photo {
        padding-bottom: 80px;
    }
    .photozag {
        /* font-size: 22px; */
        padding-top: 12%;
    }
    .photodesc {
        margin-top: 30px;
        font-size: 13px;
    }
    .photo {
        grid-template-columns: repeat(auto-fill, 47%);
        max-width: 700px; /* Ширина grid-контейнера */
        column-gap: 8px; /* Отступ между колонками */
        row-gap: 2px; /* Отступ между рядами */
        margin: 0 auto;
        margin-top: 50px;
    }
    .a11 {
        width: 100%
    }
    .more {
        font-size: 13px;
    }
    .youtubemore {
        font-size: 14px;
    }
}

@media screen and (max-width:520px) {
    .photozag {
        font-size: 19px;
        padding-top: 15%;
    }
    .photodesc {
        margin-top: 27px;
        font-size: 13px;
    }
    .more {
        font-size: 11px;
    }
    .youtubemore {
        font-size: 11px;
    }
    #photo {
        padding-bottom: 70px;
    }
}

@media screen and (max-width: 342px){
    .photozag {
        font-size: 19px;
        padding-top: 15%;
    }
    .photodesc {
        margin-top: 27px;
        font-size: 13px;
    }
    .more {
        font-size: 11px;
        font-weight: 400;
    }
    .youtubemore {
        font-size: 11px;
    }
    #photo {
        padding-bottom: 70px;
    }
}

/* Блок с плюсами */

#plus {
    text-align: center;
    font-family: "Inter", sans-serif;
    padding-left: 5%;
    padding-right: 5%;
}

.pluszag {
    font-size: 28px;
    font-weight: 300;
    padding-top: 100px;
    padding-bottom: 80px;
}

.blockplus {
    display: grid;
    /* Автоматически заполняем на всю ширину grid-контейнера */
    grid-template-columns: repeat(auto-fill, 350px);
    width: 100%;
    max-width: 1300px; /* Ширина grid-контейнера */
    justify-content: center;
    justify-items: center; /* Размещаем карточку по центру */
    column-gap: 20px; /* Отступ между колонками */
    row-gap: 30px; /* Отступ между рядами */
    margin: 0 auto;
}

.numer {
    width: 60px;
    height: 60px;
    background-color: #FF822E;
    border-radius: 100px;
    position: absolute;
    float:left;
}

.numer p {
    margin: 0;
    position: absolute;               
    top: 50%;
    left: 50%;                         
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-family: "Inter", sans-serif;
    font-size: 1.3em;
    color: #ffffff;
    float: left;
}

.plus1 {
    width: 100%;
    height: 70px;
    float: left;
    display: table-cell;
    display: flex;
    align-items: center;
}

.descplus {
   text-align: left;
   padding-left: 25%;
}

@media screen and (max-width:800px) {
    .pluszag {
        /* font-size: 22px; */
        padding-top: 12%;
    }
    .blockplus {
        grid-template-columns: repeat(auto-fill, 200px);
        max-width: 1300px; /* Ширина grid-контейнера */
        column-gap: 20px; /* Отступ между колонками */
        row-gap: 30px; /* Отступ между рядами */
        margin: 0 auto;
    }
    
    .numer {
        width: 55px;
        height: 55px;
    }
    
    .numer p {
        font-size: 1.3em;
    }
    
    .plus1 {
        height: 70px;
    }
    
    .descplus {
       padding-left: 35%;
       font-size: 13px;
    }
}

@media screen and (max-width:800px) {
    .pluszag {
        font-size: 22px;
        padding-top: 12%;
    }
    .blockplus {
        grid-template-columns: repeat(auto-fill, 200px);
        max-width: 1300px; /* Ширина grid-контейнера */
        column-gap: 20px; /* Отступ между колонками */
        row-gap: 20px; /* Отступ между рядами */
        margin: 0 auto;
    }
    
    .numer {
        width: 55px;
        height: 55px;
    }
    
    .numer p {
        font-size: 1.3em;
    }
    .plus1 {
        height: 70px;
    }
    
    .descplus {
       padding-left: 35%;
       font-size: 13px;
    }
}

@media screen and (max-width:520px) {
    .pluszag {
        font-size: 19px;
        padding-top: 18%;
        padding-bottom: 50px;
    }
    .blockplus {
        grid-template-columns: repeat(auto-fill, 200px);
        max-width: 500px; /* Ширина grid-контейнера */
        column-gap: 10px; /* Отступ между колонками */
        row-gap: 5px; /* Отступ между рядами */
        margin: 0 auto;
    }
    
    .numer {
        width: 35px;
        height: 35px;
    }
    
    .numer p {
        font-size: 1.1em;
    }
    .plus1 {
        height: 50px;
    }
    
    .descplus {
       padding-left: 25%;
       font-size: 12px;
    }
}

@media screen and (max-width:455px) {
    .blockplus {
        grid-template-columns: repeat(auto-fill, 260px);
        max-width: 500px; /* Ширина grid-контейнера */
        column-gap: 10px; /* Отступ между колонками */
        row-gap: 5px; /* Отступ между рядами */
        margin: 0 auto;
    }
    .descplus {
        padding-left: 20%;
     }
}

/* Как работаем */

#howwork {
    text-align: center;
    font-family: "Inter", sans-serif;
    padding-bottom: 100px;
    margin-left: 5%;
    margin-right: 5%;
}

.howzag {
    font-size: 28px;
    font-weight: 300;
    padding-top: 100px;
    padding-bottom: 80px;
}

.blockhow {
    display: grid;
    /* Автоматически заполняем на всю ширину grid-контейнера */
    grid-template-columns: repeat(auto-fill, 350px);
    width: 100%;
    max-width: 1300px; /* Ширина grid-контейнера */
    justify-content: center;
    justify-items: center; /* Размещаем карточку по центру */
    column-gap: 55px; /* Отступ между колонками */
    row-gap: 30px; /* Отступ между рядами */
    margin: 0 auto;
}

.numer1 {
    width: 45px;
    height: 45px;
    background-color: #FF822E;
    border-radius: 100px;
    position: absolute;
    float:left;
}

.numer1 p {
    margin: 0;
    position: absolute;               
    top: 50%;
    left: 50%;                         
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-family: "Inter", sans-serif;
    font-size: 1.3em;
    color: #ffffff;
    float: left;
}

.howw {
    width: 100%;
    height: 70px;
    float: left;
    /* display: table-cell; */
    /* display: flex; */
    align-items: center;
    background-color: #eaeaea;
    padding: 5%;
    border-radius: 10px;
}

.deschow1, .deschow2 {
    text-align: left;
    padding-left: 20%;
}

.deschow1 {
    font-size: 1.2em;
    font-weight: 400;
}

.deschow2 {
    font-size: 0.9em;
    margin-top: 10px;
    color: #333333;
}

@media screen and (max-width:800px) {
    .howzag {
        /* font-size: 22px; */
        padding-top: 12%;
    }
    #howwork {
        padding-bottom: 80px;
    }
    .blockhow {
        grid-template-columns: repeat(auto-fill, 230px);
        max-width: 800px; /* Ширина grid-контейнера */
        column-gap: 35px; /* Отступ между колонками */
        row-gap: 20px; /* Отступ между рядами */
        margin: 0 auto;
    }
    
    .numer1 {
        width: 40px;
        height: 40px;
        background-color: #FF822E;
        border-radius: 100px;
        position: absolute;
        float:left;
    }
    
    .numer1 p {
        font-size: 1.2em;
    }
    
    .howw {
        height: 75px;
        /* padding: 5%; */
        border-radius: 10px;
    }
    
    .deschow1, .deschow2 {
        padding-left: 25%;
    }
    
    .deschow1 {
        font-size: 0.95em;
        font-weight: 400;
    }
    
    .deschow2 {
        font-size: 0.8em;
        padding-top: 0px;
    }
}

@media screen and (max-width:520px) {
    .howzag {
        font-size: 19px;
        padding-top: 20%;
        padding-bottom: 50px;
    }
    #howwork {
        padding-bottom: 70px;
    }
    .blockhow {
        grid-template-columns: repeat(auto-fill, 280px);
        max-width: 500px; /* Ширина grid-контейнера */
        column-gap: 35px; /* Отступ между колонками */
        row-gap: 10px; /* Отступ между рядами */
        margin: 0 auto;
    }
    
    .numer1 {
        width: 30px;
        height: 30px;
        background-color: #FF822E;
        border-radius: 100px;
        position: absolute;
        float:left;
    }
    
    .numer1 p {
        font-size: 1.1em;
    }
    
    .howw {
        background-color: #f0f0f0b4;
        height: 50px;
        /* padding: 5%; */
        border-radius: 10px;
    }
    
    .deschow1, .deschow2 {
        padding-left: 20%;
    }
    
    .deschow1 {
        font-size: 0.85em;
        font-weight: 400;
    }
    
    .deschow2 {
        font-size: 0.7em;
        margin-top: 10px;
    }
}

@media screen and (max-width:350px) {
    .howzag {
        font-size: 19px;
        padding-top: 20%;
        padding-bottom: 50px;
    }
    #howwork {
        padding-bottom: 70px;
    }
    .blockhow {
        grid-template-columns: repeat(auto-fill, 90%);
        max-width: 400px; /* Ширина grid-контейнера */
        row-gap: 5px; /* Отступ между рядами */
    }
    .howw {
        background-color: #f0f0f000;
    }
}

/* Блок обратной связи */

#blockos {
    text-align: center;
    font-family: "Inter", sans-serif;
    padding-bottom: 100px;
    padding-left: 5%;
    padding-right: 5%;
    background-color: #ebebeb7d;
}

#formos {
    text-align: center;
    font-family: "Inter", sans-serif;
    margin-left: 5%;
    margin-right: 5%;
}

.oszag {
    font-size: 28px;
    font-weight: 300;
    padding-top: 100px;
    padding-bottom: 80px;
}

.blockos {
    display: grid;
    /* Автоматически заполняем на всю ширину grid-контейнера */
    grid-template-columns: repeat(auto-fill, 300px);
    width: 100%;
    max-width: 1200px; /* Ширина grid-контейнера */
    justify-content: center;
    justify-items: center; /* Размещаем карточку по центру */
    column-gap: 20px; /* Отступ между колонками */
    row-gap: 30px; /* Отступ между рядами */
    margin: 0 auto;
}

#label {
    width: 270px;
    height: 45px;
    float: left;
    font-family: "Inter", sans-serif;
    /* display: table-cell; */
    /* display: flex; */
    align-items: center;
    background-color: #ffffff;
    border-radius: 2px;
    border-style: none;
    padding-left: 17px;
    font-weight: 300;
    color: #000000;
    transition: transform 0.1s ease;
}

#label:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 1px #393939; /* Эмуляция границы без сдвига */
    border-radius: 1px;
}

#labelnomer {
    width: 270px;
    height: 45px;
    float: left;
    font-family: "Inter", sans-serif;
    align-items: center;
    background-color: #ffffff;
    border-radius: 2px;
    border-style: none;
    padding-left: 17px;
    font-weight: 300;
    color: #000000;
    transition: transform 0.1s ease;
}

#labelnomer:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 1px #393939; /* Эмуляция границы без сдвига */
    border-radius: 1px;
}



#buttonos {
    width: 287px;
    height: 45px;
    float: left;
    font-family: "Inter", sans-serif;
    align-items: center;
    background-color: #FF822E;
    border-radius: 2px;
    border-style: none;
    padding-left: 13px;
    font-weight: 300;
    color: #f8f8f8;
    transition: transform 0.1s ease;
}

#buttonos:hover {
    transform: scale(1.02);
}

#buttonos:focus {
    transform: scale(1.04);
}

@media screen and (max-width:520px) {
    .oszag {
        font-size: 19px;
        padding-top: 20%;
        padding-bottom: 50px;
    }
    .blockos {
        /* Автоматически заполняем на всю ширину grid-контейнера */
        grid-template-columns: repeat(auto-fill, 250px);
        width: 100%;
        max-width: 1200px; /* Ширина grid-контейнера */
        column-gap: 20px; /* Отступ между колонками */
        row-gap: 10px; /* Отступ между рядами */
    }
    #label {
        width: 220px;
        height: 35px;
        padding-left: 17px;
        font-weight: 300;
    }
    #buttonos {
        width: 237px;
        height: 35px;
        padding-left: 13px;
        font-weight: 300;
        color: #f8f8f8;
        margin-top: 10px;
    }
    #labelnomer {
        width: 220px;
        height: 35px;
        padding-left: 17px;
        font-weight: 300;
    }
}


/* Футер */


.footer {
    background-image: url(/photo/glavfon/fonefoot.jpg);
    background-blend-mode: overlay;
    background-color: #2e2e2ecd;
    padding: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    font-family: "Inter", sans-serif;
}
.footer > div, .footer > ul {
    /* flex-basis: calc(50% - 40px); */
    margin: 10px;
    text-align: center;
}
.footer h3 {
    /* margin-bottom: 10px; */
    font-weight: 200;
}

.footercomp {
    /* margin-bottom: 7px; */
    font-size: 27px;
    font-weight: 300;
}

.footer ul {
    list-style: none;
    padding: 0;
}
.footer li {
    margin-bottom: 5px;
    color: #000000;
}
.social-icons {
    display: flex;
    justify-content: center;
    transition: transform 0.1s ease;
}
.social-icons a {
    text-decoration: none;
    margin: 0 5px;
}
.social-icons img {
    width: 40px;
    height: 40px;
    transition: transform 0.15s ease;
}
.social-icons img:hover {
    transform: scale(1.03);
}
@media (max-width: 768px) {
    .footer > div,
    .footer > ul {
      flex-basis: calc(100% - 40px);
    }
}

@media screen and (max-width:520px) {
    .footercomp {
        font-size: 22px;
        font-weight: 400;
    }
}

/* Модальное окно ОС */

#modalwindow {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    visibility: hidden; 
    display: none; 
}

#modalwindow.open {
    display: flex;
    opacity: 1;
    visibility: visible; /* Сделать видимым */
    transition: opacity 0.4s ease, visibility 0.4s ease; 
}

.modwindow {
    z-index: 5005;
    background-color: #242424;
    color: white;
    font-family: "Inter", sans-serif;
    width: 800px; 
    height: 390px;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
    margin-left: 5%;
    margin-right: 5%;
}

.overlay {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.9;
}

.moddesk1 {
    font-size: 25px;
    font-weight: 200;
    padding: 7% 0 0 10%;
    
}

.modnomer {
    width: 320px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FF822E;
    font-size: 32px;
    margin: 20px auto 0 auto;
    /* padding: 10px; */
    position: relative;
    border-radius: 1px;
    border: none;
}

.moddesk2 {
    font-size: 22px;
    font-weight: 200;
    padding: 25px 0 0 10%;
}

.modform {
    padding: 20px 10% 15px 10%;
}

.modlabel {
    margin-bottom: 10px;
    min-width: 180px;
    height: 40px;
    padding-left: 15px;
    border-radius: 2px;
    border-color: #f1f1f1;
    border-style: solid;
    border-radius: 1px;
    font-family: "Inter", sans-serif;
    font-size: 12px;
    display: inline-block;
    margin-right: 10px;
}

.modlabel:focus {
    transform: scale(1.02);
    box-shadow: 0 0 0 1px #000000; /* Эмуляция границы без сдвига */
    border-radius: 1px;
}

.modbutton {
    background-color: #FF822E;
    border: none;
    border-radius: 1px;
    width: 195px;
    height: 40px;
    color: white;
    font-family: "Inter", sans-serif;
    cursor: pointer;
    transition: transform 0.1s ease;
}

.modbutton:hover {
    transform: scale(1.02);
}

.modclose {
    position: absolute;
    cursor: pointer;
    right: 3.7%;
    top: 7%;
    filter: invert();
    opacity: 0.7;
}

.modclose:hover {
    opacity: 1;
}

@media screen and (max-width:585px) {
    .modwindow {
        height: 450px
    }
    .moddesk1 {
        font-size: 20px;
    }
    .moddesk2 {
        font-size: 18px;
    }
    .modlabel {
        width: 100%;
        /* margin-right: 0px; */
        height: 40px;
        max-width: 240px;
        margin-right: 0px;
    }
    .modclose {
        right: 15px;
        top: 15px;
    }
}

@media screen and (max-width:450px) {
    .modwindow {
        height: 420px
    }
    .moddesk1 {
        font-size: 17px;
    }
    .moddesk2 {
        font-size: 15px;
    }
    .formlabeldiv {
        width: 100%;
        height: 210px;
        display: flex; 
        align-items: center;
        flex-direction: column;
    }
    .modlabel {
        width: 92%;
        height: 35px;
        max-width: 240px;
        /* margin-right: 10%; */
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .modbutton {
        width: 100%;
        max-width: 258px;
        height: 35px;
        margin-top: 5px;
        color: white;
        font-family: "Inter", sans-serif;
    }
    .modclose {
        /* right: 3.7%;
        top: 7%; */
        right: 15px;
        top: 15px;
    }
    .modnomer {
        width: 250px;
        height: 50px;
        font-size: 26px;
        margin: 20px auto 0 auto;
    }
    .modclose {
        right: 15px;
        top: 15px;
        width: 20px;
    }
}

@media screen and (max-width:370px) {
    .moddesk1 {
        width: 150px;
    }
    .modnomer {
        width: 220px;
        height: 45px;
        font-size: 23px;
    }
}

/* Окно благодарности */

#modalthanks {
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    /* opacity: 0; */
    transition: opacity 0.4s ease, visibility 0.4s ease;
    /* visibility: hidden;  */
    display: none; 
}

#modalthanks.open {
    display: flex; /* Добавлено для центрирования содержимого */
    opacity: 1;
    visibility: visible; /* Сделать видимым */
    transition: opacity 0.4s ease, visibility 0.4s ease; /* Синхронизировать продолжительность переходов */
}

.modthanks {
    z-index: 5005;
    background-color: #242424;
    color: white;
    font-family: "Inter", sans-serif;
    width: 400px; 
    height: 300px;
    border-radius: 2px;
    position: relative;
    box-shadow: 0 10px 15px rgba(0, 0, 0, .4);
    margin-left: 5%;
    margin-right: 5%;
}

.overlay2 {
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.9;
}

.modthxdesc {
    font-size: 25px;
    font-weight: 200;
    padding: 15% 0 0 10%;
}

.modthxdesc2 {
    font-size: 22px;
    font-weight: 200;
    padding: 25px 0 0 10%;
}

.modclose2 {
    position: absolute;
    cursor: pointer;
    right: 3.7%;
    top: 7%;
    filter: invert();
    opacity: 0.7;
}

.modclose2:hover {
    opacity: 1;
}

.custom-title {
  font-family: 'Arial', sans-serif; /* Измените на нужный шрифт */
  color: #e4e4e4; /* Измените на нужный цвет текста */
  font-weight: 200;
}

.custom-popup {
  background-color: #242424; /* Измените на нужный цвет фона окна */
}

.custom-icon {
  color: #ffa500; /* Оранжевый цвет иконки */
}

.otizivi {
    padding-top: 10%;
    background-color: #e5e5e5;
}