@font-face {
    font-family: 'Mont';
    src: url('content/fonts/Mont-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}


@media screen and (max-width: 1000px)
{
    .lastgrouppa{
        padding: 0 50px;
    }
    .captcha-numbers{
        background: #333;
        padding: 10px 30px;
        border-radius: 4px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #1cb7e8;
        height: fit-content;
        font-size: 52px;
    }
    .captcha{
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .captcha input{
        background: transparent;
        border: none;
        border-bottom-width: medium;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
        border-bottom: 1px solid white;
        padding: 15px 0;
        color: white;
        font-family: "Mont", sans-serif;
        font-size: 42px;
        outline: none;
        transition: border-color 0.3s ease;
        width: 20%;
    }
    .file-input-container {
        position: relative;
        text-align: left;
        margin-top: 10px;
    }

    .file-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .file-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        padding: 15px 0;
        cursor: pointer;
        color: #888;
        font-family: "Mont", sans-serif;
        font-size: 52px;
        transition: border-color 0.3s ease;
        width: 100%;
    }

    .file-label:hover {
        border-bottom-color: white;
    }

    .file-placeholder {
        flex: 1;
    }

    .file-button {
        background: #1cb7e8;
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 37px;
        transition: background-color 0.3s ease;
        white-space: nowrap;
        margin-left: 10px;
    }

    .file-label:hover .file-button {
        background: #0fa3d4;
    }

    .file-name {
        display: block;
        font-size: 32px;
        color: #888;
        margin-top: 5px;
        font-style: italic;
    }

    /* Стили для чекбокса */
    .checkbox-container {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 20px;
    }

    .checkbox-input {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        min-width: 30px;
        border: 2px solid #1cb7e8;
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        margin-top: 3px;
    }

    .checkbox-input:checked {
        background: #1cb7e8;
        border-color: #1cb7e8;
    }

    .checkbox-input:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    .checkbox-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(28, 183, 232, 0.3);
    }

    .checkbox-label {
        color: white;
        font-size: 24px;
        line-height: 1.4;
        text-align: left;
        cursor: pointer;
        font-family: "Mont", sans-serif;
    }

    .checkbox-label a {
        color: #1cb7e8;
        text-decoration: underline;
    }

    .checkbox-input:invalid ~ .checkbox-label {
        color: #ff4444;
    }

    .submit-btn {
        background: #1cb7e8;
        color: white;
        border: none;
        padding: 15px 40px;
        font-size: 52px;
        font-family: "Mont", sans-serif;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 55px;
    }

    .submit-btn:hover:not(:disabled) {
        background: #0fa3d4;
    }

    .submit-btn:disabled {
        background: #666;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Валидация файла */
    .file-input.invalid + .file-label {
        border-bottom-color: #ff4444;
    }

    .file-input.invalid + .file-label + .file-name {
        color: #ff4444;
    }
    .form-stack {
        display: flex;
        flex-direction: column;
        gap: 60px;
        margin-bottom: 30px;
    }

    .form-stack input {
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        padding: 15px 0;
        color: white;
        font-family: "Mont", sans-serif;
        font-size: 52px;
        outline: none;
        transition: border-color 0.3s ease;
    }

    .form-stack input::placeholder {
        color: #888;
        font-family: "Mont", sans-serif;
    }

    .form-stack input:focus {
        border-bottom-color: white;
    }

    .form-stack input:invalid:not(:placeholder-shown) {
        border: 1px solid #ff4444;
    }
    .feedback-img{
        display: none;
    }
    .feedback{
        padding-bottom: 50px;
        padding-top: 50px;
        overflow: auto;
        display: flex;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .abouttext-small{
        font-family:Inter ;
        font-size: 26px;
        font-weight: 300;
    }
    .mainwrapper{
        padding: 0px 50px;
        background-color: black;
    }
    .mobile-social .socialbut img {
        width: 60px;
        height: 60px;
        padding: 20px;
    }
    .mobile-social .socialbut {
        margin: 0 10px;
    }
    .desktop-social {
        display: none!important; /* Скрываем соцкнопки в хедере на мобильных */
    }
    .mobile-social {
        display: flex; /* По умолчанию скрыто */
        justify-content: center;
        margin-top: 30px;
        width: 100%;
    }
    .burger-menu {
        display: block;
        background: none;
        border: none;
        z-index: 9999/* Показываем на мобильных */
    }

    .items {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        height: 100vh;
        background-color: black;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: right 0.3s ease;
        z-index: 1000;
        padding-top: 80px;
    }

    .items.active {
        right: 0;
        width: 100%;
        display: flex;
        justify-content: flex-start;
        margin-top: 200px;
    }

    .lowsection {
        margin: 15px 0;
        font-size: 24px;
    }

    /* Анимация бургера в крестик */
    .burger-menu.active .burger-line:nth-child(1) {
        transform: rotate(45deg) translate(20px, 5px);
    }

    .burger-menu.active .burger-line:nth-child(2) {
        opacity: 0;
    }

    .burger-menu.active .burger-line:nth-child(3) {
        transform: rotate(-45deg) translate(20px, -6px);
    }

    /* Затемнение фона при открытом меню */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        z-index: 999;
        display: none;
    }

    .overlay.active {
        display: block;
    }
    .mission{
        background-color: black;
        overflow: auto;
        color: white;
        text-align: center;
    }
    .profname{
        color: #fff;
        font-family: Mont;
        font-size: 38px;
    }
    .missiontext{
        background-color: black;
        color: white;
        overflow: auto;
        font-size: 35px;
        font-family: Inter;
        font-weight: 300;
        text-align: justify;
    }

    .lastgroupppa{
        display: block; margin-top: 15%
    }
    .upper{
        justify-content: center;
        text-align: center;
        display: flex;
        background-color:white;

    }
    html {
        scroll-behavior: smooth;
    }
    .section{
        font-family: Open Sans;
        display: flex;
        font-size: 14px;
    }
    .lower{

        justify-content: space-between;
        text-align: center;
        display: flex;
        background-color: black;

    }
    .logo {
        width: 360px;
        height: 120px;

    }
    .navbar{
        width: 100%;
        color: white;
        font-size: 20px;
        font-weight: lighter;
        margin-top: 20px;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        padding: 0 30px;
    }
    .logosection{
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .items{
        display: flex;

    }
    .lowsection{
        font-family: "Mont";
        display: flex;
        margin-left: 20px;
        margin-right: 20px;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .socialbutcontainer{
        display: flex;
        align-items: center;
        justify-content: center;
        gap:20px;
    }
    .socialbut{
        margin-left: 3px;
        margin-right: 3px;
        background-color: white;
        border: none;
        color: white;
        padding: 10px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 50%;
        transition: 0.3s;
    }
    .socialbut img{
        width: 50px;
        height: 50px;
    }
    .socialbut:hover{
        background-color: #1cb7e8;
    }
    group{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        height: 100vh !important;
        background-size: 100% ;
    }
    .vertical-fabric{
        width: 25%;
        height: 700px;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-size: cover !important;
        overflow: hidden; /* Важно для скрытия выходящих за границы частей */
        transition: all 0.5s ease; /* Плавный переход для контейнера */
        position: relative;
    }

    .vertical-fabric h2{
        margin-top: 30%;
        position: relative;
        z-index: 2; /* Текст поверх псевдоэлемента */
    }

    /* Псевдоэлемент для фона с анимацией */
    .vertical-fabric::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        transition: all 0.5s ease;
        z-index: 1;
    }

    /* Фоновые изображения для каждого элемента */
    .szmk::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szmk.png");
    }

    .szro::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szro.jpg");
    }

    .szgc::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szgc.jpg");
    }

    .metiz::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/metiz.jpg");
    }
    .connect img{
        z-index: 9;
        width: 360px;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        margin-top: 30%;
        font-size: 40px;
        color: white;
        padding: 20px 0;

    }
    .connect span{
        z-index: 9;
        margin-top: 30px;
        padding: 0 26px;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        font-size: 24px;
        color: white;
        opacity: 0;
    }
    .vertical-fabric h2 {
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        margin-top: 30%;
        width: fit-content;
        font-size: 40px;
        color: white; /* Белый текст для контраста */
    }

    /* Эффекты при наведении */
    .vertical-fabric:hover img{
        transform: scale(1.05);
        border-bottom-color: white;
    }

    .vertical-fabric:hover span{
        opacity: 1;
    }

    .vertical-fabric:hover::before {
        transform: scale(1.1); /* Увеличение фона */
    }

    /* Альтернативный вариант с filter для более драматичного эффекта */
    .vertical-fabric:hover::before {
        transform: scale(1.1);
        filter: brightness(1.1); /* Легкое осветление при увеличении */
    }
    .connect{
        color: white;
        display: flex;
        flex-wrap: wrap; /* Добавьте это */
        width: 100%;
        font-family: "Mont";
        height: fit-content;
        text-align: center;
        justify-content: center;
    }
    .connect > * {
        box-sizing: border-box;
        flex: 0 0 50%; /* Каждый элемент занимает 50% минус отступ */

    }
    .connectname{
        font-size: 100px;
        margin: 0;
        color: #1cb7e8;
    }
    .connecttype{
        font-size: 44px;
        margin: 0;
        font-weight: normal;
        margin-bottom: 20px;

    }
    .join{
        font-size: 33px;
        font-weight: normal;
    }
    .connectbut{
        border: 2px solid black;
        color:#1cb7e8;
        padding: 20px 35px;
        font-size: 33px;
        cursor: pointer;
        width: 50%;
        border-color: #1cb7e8;
        background-color: rgba(0,0,0,0);
        border-radius: 10px;
        transition: 0.5s;
        margin-bottom: 30px;
    }
    .connectbut:hover {
        background-color: #1cb7e8;
        color: white;
    }
    body
    {
        margin: 0px;
        padding: 0px;
        vertical-align: top;
        overflow: auto;
        /* ... */
    }
    .about {
        background-color: black;
        display: flex;
        font-family: "Mont";
        color: #1cb7e8;
        font-weight: normal;
        justify-content: center;
        text-align: center;
        padding-top: 50px;
        font-size: 32px;
        overflow: auto;
        width: auto;
        /* Добавляем перенос слов */
        overflow-wrap: break-word;
        word-break: break-word;
        max-width: 100%;
    }
    .about h1{
        overflow-wrap: break-word;
        word-break: break-word; /* Перенос слов */
        max-width: 80%; /* Гарантирует, что заголовок не превысит ширину родителя */

    }
    .aboutmore{
        background-color: black;
        display: block;
        color: white;
        overflow: hidden;
    }
    .abouttext{
        font-family:"Mont" ;
        font-weight: bold;
        font-size: 35px;
    }
    .abouttext-small{
        font-family:Inter ;
        font-size: 26px;
    }
    .abouttable{
        font-family:"Mont" ;
        font-size: 35px;
        margin-left: 30px;
        width:90%;
    }
    .left-blue-line{
        border-left: 6px solid #1cb7e8;
        padding-left: 20px;
        border-radius: 5px;
        margin-left: 30px;
    }
    .abouttext2{
        font-family:Inter ;
        font-size: 35px;
        margin-bottom: 50px;
        text-align: justify;
    }
    .comppics{
        font-family:Inter ;
        display: block;
        justify-content: space-between;
        margin-left: auto;
        margin-right: auto;
        text-align: justify;
        margin-top: 50px;
    }
    .compimg{
        width: 500px;
        height: 278px;
    }
    .comppic{
        display: block;
        max-width: min-content;
        margin-left: auto;
        margin-right: auto;
    }
    .comppic p{
        font-size: 35px;
        text-align: center;
    }
    .price{
        background-image: url("content/fon2-min_1x.png") ;
        min-height: 45vh !important;
        overflow: auto;


    }
    .pricename{
        font-size: 35px;
        font-family:"Mont" ;
        color: #1cb7e8;
    }
    .pricedesc{
        font-family:"Mont" ;
        color: white;
        font-size: 30px;
    }
    .pricetwo{

        display: block;
    }
    .priceinst{
        max-width: 400px;
        margin-left: 20px;
        margin-right: 20px;
    }
    .inner{
        float: right;
        margin-right: 14%;
    }
    .prof{

        font-family: "Open Sans";
        background-color: black;
        overflow: auto;
    }
    .salary{
        font-family: Inter;
        color: #fff;
        font-weight: bold;
        margin: 0;
        margin-bottom: 15px;
        font-size: 64px!important;
    }
    .profdesc{
        background-color: #333;
        overflow: auto;
        text-align: center;
        padding-right: 45px;
        padding-left: 45px;
        padding-top: 50px;
        font-size: 31px;
    }
    .profinst{
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        max-width: min-content;
        position: relative;
        font-size: 20px;
    }
    .profreq{
        text-transform: uppercase;
        font-size: 18px;
        text-align: center;
        padding: 0 15px;
        overflow: auto;
        background: #333;
        border-top: 1px solid white;
    }
    .profgot{
        display: flex;
        justify-content: center;
        align-items: end;
        background-color: #333;
        padding: 20px 0;
        border-top: 1px solid white;
    }
    .profimg{
        width: 780px;
        height: 450px;
    }
    .profbut{
        border: none;
        color: white;
        padding: 25px 40px;
        font-size: 35px;
        cursor: pointer;
        transition: 0.5s;
        border-radius: 10px;
        background: #1cb7e8;
        font-family: "Mont";
    }
    .profbut:hover {
        background-color: white;
        color: black;
    }
    .profflex{
        display: block;
        overflow: auto;
        justify-content: center;
    }
    .circle {
        background-color: black;
        border-radius: 50%;
        height: 160px;
        width: 160px;
        /* center .blue-circle inside .main */
        position: absolute;
        top: 0;
        bottom: 35%;
        left: 0;
        right: 0;
        margin: auto;
        /* center .text-div inside .blue-circle using flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
        display: none;
    }
    .circle img{
        width: 60px;
    }
    .pics{
        padding-left: 50px;
        padding-right: 50px;
        overflow: auto;
        background-color: black;
        padding-top: 30px;

    }
    .flexpics{
        display: block;
        overflow: hidden;


    }
    .picimg{
        width: 950px;
        height: fit-content;
        transition: 0.3s;
    }
    .pic{
        margin-top: 15px;
        position: relative;
        width: 100%;
        height:fit-content;

    }
    .picimg:hover{
        transform: scale(1.05);
        opacity: 0.5;
    }
    .picimg:hover + .imgdiv {
        opacity: 1;
    }
    .notfound-img{
        display: none;
    }
    .picimgsec{
        width: 950px;
        height: fit-content;
        transition: 0.3s;
    }
    .picimgsec:hover{
        transform: scale(1.05);
        opacity: 0.5;
    }
    .picimgsec:hover + .imgdivtwo{
        opacity: 1;
    }
    .imgdiv{
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-family: "Mont";
        font-size: 32px;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }
    .imgdivtwo{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-family: "Mont";
        font-size: 32px;
        opacity: 0;
        pointer-events: none;
        text-align: center;
    }
    .pictwo{
        width: fit-content;
        height: fit-content;
        display: block;

    }
    .pic2{
        margin-top: 15px;
        margin-bottom: 15px;
        position: relative;
        width: fit-content;
        height: fit-content;
        margin-left: auto;
        margin-right: auto;
    }
    .notfound{
        overflow: auto;
        min-height: 250px;
        background: url("content/Frame_55_1x.png");
        background-size: cover;
        padding: 50px;
    }
    .notfoundimg{
        display:block;position: relative; width: 100%;height: 300px;
    }
    .notfoundtext{
        color: white;
        font-family: "Mont";
        font-size: 35px;
        width: 100%;
        text-align: center;
    }
    .vacancy{
        font-size: 50px;
        color: #1cb7e8;
    }
    .ourteam{
        display: none;
        overflow: auto;
        width: 100%;
        background-color: black;
    }
    .flexteam{
        margin-bottom: 20px;
        display: block;
        font-family:"Mont" ;
        justify-content: center;
        text-align: center;
        width: 100%;
    }
    .peopname{
        font-size: 30px;
        margin: 0;
        color: #1cb7e8;
        padding: 0;
    }
    .peoprole{
        font-size: 20px;

        color: #1cb7e8;
    }
    .quote{
        font-size: 17px;
        color: white;
    }
    .people{
        width: 100%;
    }
    #team{
        display: none;
    }
    .prizeflex{
        display: block;
        overflow: auto;
        background-color: black;
        justify-content: center;
    }
    .prizeflex img{
        scale: 2;
        margin: 50px auto;
    }
    .prize {
        font-family: "Mont";
        width: 630px;
        display: block;
        text-align: center;
        padding-top: 50px;
        margin-left: auto;
        margin-right: auto;
    }
    .prizename{
        font-size: 55px;
        color: #1cb7e8;
    }
    .prizedesc {
        font-size: 35px;
        color: white;
    }
    .bottomgroup{
        margin-bottom: 15px;
        margin-top: 30px;
    }
    .carousel {
        background: rgba(0,0,0,0);
        width: 100%  ;
    }
    .carousel-cell {
        display: flex;
        justify-content: center;
        width: 50%;
        height: 187px;
        margin-right: 10px;
        border-radius: 5px;
        counter-increment: carousel-cell;
    }
    .carousel-cell:before {
        display: block;
        text-align: center;
        line-height: 200px;
        font-size: 80px;
        color: white;
    }
    .collab{
        display: flex;
        justify-content: center;
        background-color: rgb(18,30,29);
    }
    .accordinst{
        width: 100%; margin-bottom: 30px;
        display: block;
        font-size: 35px;
    }
    .price{
        display: none;
    }
    .price-mobile{
        background-image: url("content/Frame_55_1x.png");
        display: flex;
        flex-direction: column;
        background-size: cover;
        padding: 50px 0;
    }
    .price-mobile img{
        width: 90%;
        margin: 20px auto;

    }
    .flickity-viewport{
        height: 290px!important;
    }
    .collabimg{
        width: 700px;
        height: 300px;
    }
    .price-mobile h1{
        font-family: "Mont";
        color: #1cb7e8;
        font-weight: normal;
        font-size: 70px;
        width: fit-content;
        margin: 20px auto;
        margin-bottom: 50px;
    }
    .accord{
        background-color: black;
        overflow: auto;
        height: fit-content;
        display: flex;
        justify-content: center;
        padding: 50px 50px;
        box-sizing: border-box;
    }
    .accord-list{
        width: 100%;
    }
    .accordion {
        font-family: "Mont";
        font-size: 50px;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        background-color: #1d1d1d;
        transition: all 0.3s ease;
        border-bottom: 1px solid white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .accordion span:first-child {
        flex: 1;
        text-align: left;
        margin-right: 15px;
    }

    .accordion-arrow {
        transition: transform 0.3s ease;
        font-size: 16px;
        color: white;
    }

    .accordion.active .accordion-arrow {
        transform: rotate(180deg);
    }

    .accordion:hover {
        background-color: #2a2a2a;
    }

    .active, .accordion:hover {
        background-color: #1d1d1d;
    }
    .panel {
        border-radius: 10px;
        padding: 0 18px;
        background-color: #1d1d1d;
        display: none;
        overflow: hidden;
        font-family: "Mont";
        font-size: 35px;
        color: white;
        border: 1px solid #1cb7e8;
    }
    .feedback{
        padding-bottom: 50px;
        padding-top: 50px;
        overflow: auto;
        display: flex;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }
    .map{
    }
    iframe{
        width: 100%;
        height: 800px;
    }
    .last{
        display: block;
        overflow: auto;
        width: 100%;
        background-color: black;
    }
    .ending{

    }
    .lastgroup{
        color: #1cb7e8;
        font-family: "Mont";
        font-size: 72px;
        text-align: center;
    }
    .wish{
        font-family: "Mont";
        font-size: 32px;
        color: white;
    }
    .bottomhref{
        color: white;
        text-decoration: none;
    }
    a{
        color: black;
        text-decoration: none;
    }
    .heada{
        color: white;
        font-size: 50px;
        margin: 0;
    }
    .heada h4{
        margin: 40px 0;
    }
    footer{
        font-family: "Mont";
        font-size: 26px;
        color: white;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }
}
@media screen and (min-width: 1000px){
    .upper{
        justify-content: center;
        text-align: center;
        display: flex;
        background-color:white;

    }
    html {
        scroll-behavior: smooth;
    }
    .section{
        font-family: Open Sans;
        display: flex;
        margin-left: 20px;
        margin-right: 20px;
    }
    .lower{

        justify-content: center;
        text-align: center;
        background-color: black;

    }
    .logo {
        width: 190px;

    }
    .mission-title{
        font-weight: 500;
        font-size: 26px;
        font-family: Inter;
        color: #1cb7e8;
        text-transform: uppercase;
    }
    .navbar{
        color: white;
        font-size: 20px;
        font-weight: lighter;
        display: flex;
        justify-content: space-between;
        margin: 0 300px;
    }
    .logosection{
        justify-content: center;
        align-items: center;
        display: flex;
    }
    .items{
        display: flex;
        margin-right: 60px;
        margin-left: 60px;
        gap: 40px;
    }
    .lowsection{
        font-family: "Mont";
        display: flex;
        margin-left: 20px;
        margin-right: 20px;
        justify-content: center;
        align-items: center;
        color: white;
    }
    .socialbutcontainer{
        display: flex;
        align-items: center;
    }
    #team{
        display: none;
    }
    .mainwrapper{
        background-color: black;
        padding: 50px 300px;

    }
    .author{
        display: flex;
        color: black;
        align-items: center;

    }
    .author-img{
        margin-right: 15px;
        margin-top: auto;
        margin-bottom: auto;
    }
    .author h5{
        font-family: Inter;
        margin: 0;
        font-size: 18px;
    }
    .author span{
        font-family: Inter;
        margin: 0;
        font-size: 16px;
    }
    .socialbut{
        margin-left: 3px;
        margin-right: 3px;
        background-color: white;
        border: none;
        color: white;
        padding: 8px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        border-radius: 50%;
        transition: 0.3s;
    }
    .socialbut:hover{
        background-color: #1cb7e8;
    }
    .captcha-numbers{
        background: #333;
        padding: 5px 10px;
        border-radius: 4px;
        font-weight: bold;
        letter-spacing: 2px;
        color: #1cb7e8;
        height: fit-content;
    }
    .captcha{
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .captcha input{
        background: transparent;
        border: none;
        border-bottom-width: medium;
        border-bottom-style: none;
        border-bottom-color: currentcolor;
        border-bottom: 1px solid white;
        padding: 15px 0;
        color: white;
        font-family: "Mont", sans-serif;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s ease;
        width: 20%;
    }
    .group{
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: black;
        height: 100vh !important;
        background-size: 100% ;
    }
    .vertical-fabric{
        width: 25%;
        height: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        background-size: cover !important;
        overflow: hidden; /* Важно для скрытия выходящих за границы частей */
        transition: all 0.5s ease; /* Плавный переход для контейнера */
        position: relative;
    }

    .vertical-fabric h2{
        margin-top: 30%;
        position: relative;
        z-index: 2; /* Текст поверх псевдоэлемента */
    }

    /* Псевдоэлемент для фона с анимацией */
    .vertical-fabric::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-size: cover;
        background-position: center;
        transition: all 0.5s ease;
        z-index: 1;
    }

    /* Фоновые изображения для каждого элемента */
    .szmk::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szmk.png");
    }

    .szro::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szro.jpg");
    }

    .szgc::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/szgc.jpg");
    }

    .metiz::before {
        background-size: cover!important;
        background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/content/main_collage/metiz.jpg");
    }
    .connect img{
        z-index: 9;
        width: 360px;
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        margin-top: 30%;
        font-size: 40px;
        color: white;
        padding: 20px 0;

    }
    .connect span{
        z-index: 9;
        margin-top: 30px;
        padding: 0 26px;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        font-size: 24px;
        color: white;
        opacity: 0;
    }
    .vertical-fabric h2 {
        margin: 0;
        padding: 0;
        transition: all 0.3s ease;
        border-bottom: 2px solid transparent;
        margin-top: 30%;
        width: fit-content;
        font-size: 40px;
        color: white; /* Белый текст для контраста */
    }

    /* Эффекты при наведении */
    .vertical-fabric:hover img{
        transform: scale(1.05);
        border-bottom-color: white;
    }

    .vertical-fabric:hover span{
        opacity: 1;
    }

    .vertical-fabric:hover::before {
        transform: scale(1.1); /* Увеличение фона */
    }

    /* Альтернативный вариант с filter для более драматичного эффекта */
    .vertical-fabric:hover::before {
        transform: scale(1.1);
        filter: brightness(1.1); /* Легкое осветление при увеличении */
    }
    .connect{
        color: white;
        display: flex;
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: center;
        font-family: "Mont";
    }
    .connectname{
        font-size: 90px;
        margin: 0;
        color: #1cb7e8;
    }
    .connecttype{
        font-size: 25px;
        margin: 0;
        font-weight: normal;
        margin-bottom: 20px;
    }
    .join{
        font-size: 18px;
        font-weight: normal;
    }
    .connectbut{
        border: 2px solid black;
        color:#1cb7e8;
        padding: 14px 14px;
        font-size: 16px;
        cursor: pointer;
        width: 50%;
        font-family: "Mont";
        border-color: #1cb7e8;
        background-color: rgba(0,0,0,0);
        border-radius: 10px;
        transition: 0.5s;
    }
    .connectbut:hover {
        background-color: #1cb7e8;
        color: white;
    }
    body
    {
        margin: 0px;
        padding: 0px;
        vertical-align: top;
        overflow: auto;
        /* ... */
    }
    .aboutcompany{
        margin: 50px 0 0 0;
    }
    .about{
        background-color: black;
        display: flex;
        font-family:"Mont" ;
        color: #1cb7e8;
        font-weight: normal;
        justify-content: center;
        font-size: 20px;
        overflow: auto;
    }
    .aboutmore{
        background-color: black;
        display: block;
        color: white;
        overflow: hidden;
    }
    .abouttext{
        font-family:Inter ;
        font-size: 26px;
        font-weight: 300;
        margin-top: 0;
    }
    .abouttext-small{
        font-family:Inter ;
        font-size: 26px;
        font-weight: 300;
    }
    .abouttable{
        font-family:"Mont" ;

        font-size: 25px;
    }
    .abouttext2{
        font-family:Inter ;
        font-size: 26px;
        font-weight: 300;
        margin-bottom: 50px;
        text-align: justify;
    }
    .comppics{
        font-family:Inter ;
        display: flex;
        justify-content: space-between;
        text-align: center;
        font-weight: 300;
        margin-bottom: 50px;
    }
    .compimg{
        width: 255px;
        height: 145px;
    }
    .comppic{
        display: block;
        max-width: min-content;
        margin-left: 20px;
        margin-right: 20px;
    }
    .price{
        background-color: black;
        min-height: 60vh !important;
        overflow: auto;
        background-repeat: no-repeat;
        background-image: url("content/Frame_55_1x.png");
        background-size: cover;

        padding: 0 300px;
        padding-bottom: 50px;
    }
    .price img{
        display: block;
        width: 100%;
    }
    .pricename{
        font-size: 25px;
        font-family:"Mont" ;
        color: #1cb7e8;

    }
    .pricedesc{
        font-family:"Mont" ;
        color: white;
        font-size: 20px;
    }
    .pricetwo{

        display: flex;
    }
    .priceinst{
        max-width: 400px;
        margin-left: 20px;
        margin-right: 20px;
        line-height: 30px;
    }
    .inner{
        float: right;
        display: block;
        margin-right: 3dvh;
    }
    .prof{

        font-family:Inter;
        background-color: black;
        overflow: auto;
        padding: 0 300px;
    }
    .profdesc{
        background-color: #333;
        overflow: auto;
        text-align: center;
        padding-right: 45px;
        padding-left: 45px;
        padding-top: 50px;
        font-size: 15px;
        height: 210px;
    }
    .salary{
        font-family: Inter;
        color: #fff;
        font-weight: bold;
        font-size: 28px;
        margin: 0;
        margin-bottom: 0px;
        margin-bottom: 15px;
    }
    .profinst{
        max-width: min-content;
        position: relative;
    }
    .left-blue-line{
        border-left: 6px solid #1cb7e8;
        padding-left: 20px;
        border-radius: 5px;
        margin-left: 30px;
    }
    .profreq{
        text-transform: uppercase;
        font-size: 12px;
        text-align: center;
        padding: 0 15px;
        overflow: auto;
        background: #333;
        border-top: 1px solid white;
    }
    .profgot{
        display: flex;
        justify-content: center;
        align-items: end;
        background-color: #333;
        padding: 20px 0;
        border-top: 1px solid white;



    }
    .profimg{
        width: 350px;
        height: 200px;
    }
    .profbut{
        border: none;
        color: white;
        padding: 10px 28px;
        font-size: 16px;
        cursor: pointer;
        transition: 0.5s;
        border-radius: 10px;
        background: #1cb7e8;
        font-family: "Mont";
    }
    .profbut:hover {
        background-color: white;
        color: black;
    }
    .profflex{
        margin-top: 30px;
        display: flex;
        overflow: auto;
        justify-content: space-between;
    }
    .circle {
        background-color: white;
        border-radius: 50%;
        height: 100px;
        width: 100px;
        /* center .blue-circle inside .main */
        position: absolute;
        top: 0;
        bottom: 45%;
        left: 0;
        right: 0;
        margin: auto;
        /* center .text-div inside .blue-circle using flexbox */
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pics{
        overflow: auto;
        background-color: black;
        padding: 30px 300px;
    }
    .flexpics{
        margin-bottom: 30px;
        display: flex;
        justify-content: space-between;
    }
    .picimg{
        width: 100%;
        height: 540px;
        transition: 0.3s;
    }
    .pic{
        position: relative;
        width: 635px;
        height: 540px;

    }
    .picimg:hover{
        transform: scale(1.05);
        opacity: 0.5;
    }
    .picimg:hover + .imgdiv{
        opacity: 1;
    }
    .picimgsec{
        width: 100%;
        height: 255px;
        transition: 0.3s;
        margin-bottom: 30px;
    }
    .picimgsec:hover{
        transform: scale(1.05);
        opacity: 0.5;
    }
    .picimgsec:hover + .imgdiv{
        opacity: 1;
    }
    .picimgsec:hover + .imgdivtwo{
        opacity: 1;
    }
    .imgdivtwo{
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-family: "Mont";
        font-size: 20px;
        opacity: 0;
        pointer-events: none;
        width: 100%;
        text-align: center;
    }
    .imgdiv{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-family: "Mont";
        font-size: 20px;
        opacity: 0;
        pointer-events: none;
        width: 100%;
        text-align: center;
    }
    .pictwo{
        height: fit-content;
        display: block;
    }
    .pic2{
        position: relative;
        width: 635px;
        height: 285px;

    }
    .notfound{
        background: url("content/Frame_55_1x.png");
        padding: 100px 300px;
        display: flex;
        justify-content: space-between;
        gap: 10px;
        background-size: cover;
    }
    .notfound-img{
        border-radius: 10px;
        width: 50%;
        overflow: hidden;
    }
    .notfound-img img{
        border-radius: 10px;
    }
    .notfoundtext{
        color: white;
        font-family: "Mont";
        font-size: 20px;
        width: 45%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .vacancy{
        font-size: 28px;
        color: #1cb7e8;
        margin: 0;
    }
    .ourteam{
        display: none;
        overflow: auto;
        background-color: black;
    }
    .flexteam{
        margin-bottom: 20px;
        display: flex;
        font-family:"Mont" ;
        justify-content: center;
        text-align: center;
    }
    .peopname{
        font-size: 30px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        color: #1cb7e8;
    }
    .peoprole{
        font-size: 20px;
        margin-top: 0;
        margin-bottom: 0;
        padding: 0;
        color: #1cb7e8;
    }
    .quote{

        font-size: 17px;
        color: white;
    }
    .people{
        width: 30%;
    }
    .prizeflex{
        display: flex;
        overflow: auto;
        background-color: black;
        justify-content: center;
    }
    .prize {
        font-family: "Mont";
        width: 350px;
        text-align: center;
        padding-top: 50px;
    }
    .prizename{
        font-size: 20px;
        color: #1cb7e8;
    }
    .prizedesc {
        font-size: 16px;
        color: white;
    }
    .carousel {
        background: rgba(0,0,0,0);
        width: 100%  ;
    }
    .carousel-cell {
        display: flex;
        justify-content: center;
        width: 20%;
        height: 187px;
        margin-right: 10px;
        border-radius: 5px;
        counter-increment: carousel-cell;
    }
    .videos{
        display: flex;
        justify-content: space-between;
        gap: 25px;
    }
    .carousel-cell:before {
        display: block;
        text-align: center;
        line-height: 200px;
        font-size: 80px;
        color: white;
    }
    .collab{
        display: flex;
        justify-content: center;
        background-color: black;
    }
    .accord{
        background-color: black;
        overflow: auto;
        height: fit-content;
        display: flex;
        justify-content: center;
        padding: 50px 300px;
    }
    .accord-list{
        width: 100%;
    }
    .accordion {
        font-family: "Mont";
        font-size: 24px;
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        outline: none;
        background-color: #1d1d1d;
        transition: all 0.3s ease;
        border-bottom: 1px solid white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
    }
    .accordion span:first-child {
        flex: 1;
        text-align: left;
        margin-right: 15px;
    }

    .accordion-arrow {
        transition: transform 0.3s ease;
        font-size: 16px;
        color: white;
    }

    .accordion.active .accordion-arrow {
        transform: rotate(180deg);
    }

    .accordion:hover {
        background-color: #2a2a2a;
    }

    .active, .accordion:hover {
        background-color: #1d1d1d;
    }
    .panel {
        border-radius: 0 0 10px 10px;
        padding: 0 18px;
        background-color: #1d1d1d;
        display: none;
        overflow: hidden;
        font-family: "Mont";
        font-size: 20px;
        color: white;
        border: 1px solid white;
        border-top: none;
        margin-bottom: 15px;
    }

    .panel p {
        margin: 15px 0;
        line-height: 1.5;
    }
    .feedback{
        padding-bottom: 50px;
        padding-top: 50px;
        overflow: auto;
        display: flex;
        gap: 20px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        height: 720px;
    }
    .feedback-img{
        height: 100%;
        overflow: hidden;
        border-radius: 10px;
    }
    .feedback-img img {
        height: 100%;
        width: auto;
        right: 35%;
        position: relative;
    }
    .feedback {
        background-color: black;
        padding: 50px 20px;
        font-family: "Mont", sans-serif;
    }

    .feedback-form {
        max-width: 600px;
    }
    .checkbox-input{
        width: auto!important;
    }
    .form-stack {
        display: flex;
        flex-direction: column;
        gap: 20px;
        margin-bottom: 30px;
    }

    .form-stack input {
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        padding: 15px 0;
        color: white;
        font-family: "Mont", sans-serif;
        font-size: 16px;
        outline: none;
        transition: border-color 0.3s ease;
        width: 100%;
    }

    .form-stack input::placeholder {
        color: #888;
        font-family: "Mont", sans-serif;
    }

    .form-stack input:focus {
        border-bottom-color: white;
    }

    .form-stack input:invalid:not(:placeholder-shown) {
        border: 1px solid #ff4444;
    }

    /* Стили для поля файла */
    .file-input-container {
        position: relative;
        text-align: left;
        margin-top: 10px;
    }

    .file-input {
        position: absolute;
        opacity: 0;
        width: 0;
        height: 0;
    }

    .file-label {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: transparent;
        border: none;
        border-bottom: 1px solid white;
        padding: 15px 0;
        cursor: pointer;
        color: #888;
        font-family: "Mont", sans-serif;
        font-size: 16px;
        transition: border-color 0.3s ease;
        width: 100%;
    }

    .file-label:hover {
        border-bottom-color: white;
    }

    .file-placeholder {
        flex: 1;
    }

    .file-button {
        background: #1cb7e8;
        color: white;
        padding: 8px 15px;
        border-radius: 5px;
        font-size: 14px;
        transition: background-color 0.3s ease;
        white-space: nowrap;
        margin-left: 10px;
    }

    .file-label:hover .file-button {
        background: #0fa3d4;
    }

    .file-name {
        display: block;
        font-size: 12px;
        color: #888;
        margin-top: 5px;
        font-style: italic;
    }

    /* Стили для чекбокса */
    .checkbox-container {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-top: 20px;
    }

    .checkbox-input {
        appearance: none;
        -webkit-appearance: none;
        width: 20px;
        height: 20px;
        min-width: 30px;
        border: 2px solid #1cb7e8;
        border-radius: 3px;
        background: transparent;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        margin-top: 3px;
    }

    .checkbox-input:checked {
        background: #1cb7e8;
        border-color: #1cb7e8;
    }

    .checkbox-input:checked::after {
        content: '✓';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: white;
        font-size: 14px;
        font-weight: bold;
    }

    .checkbox-input:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(28, 183, 232, 0.3);
    }

    .checkbox-label {
        color: white;
        font-size: 14px;
        line-height: 1.4;
        text-align: left;
        cursor: pointer;
        font-family: "Mont", sans-serif;
    }

    .checkbox-label a {
        color: #1cb7e8;
        text-decoration: underline;
    }

    .checkbox-input:invalid ~ .checkbox-label {
        color: #ff4444;
    }

    .submit-btn {
        background: #1cb7e8;
        color: white;
        border: none;
        padding: 15px 40px;
        font-size: 18px;
        font-family: "Mont", sans-serif;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 20px;
    }

    .submit-btn:hover:not(:disabled) {
        background: #0fa3d4;
    }

    .submit-btn:disabled {
        background: #666;
        cursor: not-allowed;
        opacity: 0.7;
    }

    /* Валидация файла */
    .file-input.invalid + .file-label {
        border-bottom-color: #ff4444;
    }

    .file-input.invalid + .file-label + .file-name {
        color: #ff4444;
    }

    .map{
        width: 50%;
    }
    .videos iframe{
        height: 350px;
    }
    .map iframe{
        width: 100%;
        height: 500px;
    }
    .last{
        display: flex;
        overflow: auto;
        width: 100%;
        background-color: black;
    }
    .ending{
        margin-left: 30px;
    }
    .lastgroup{
        color: #1cb7e8;
        font-family: "Mont";
        font-size: 34px;
    }
    .wish{
        font-family: Inter;
        font-size: 18px;
        color: white;
        font-weight: 300;
    }
    .bottomhref{
        color: white;
        text-decoration: none;
    }
    a{
        color: black;
        text-decoration: none;
    }
    .heada{
        color: white;
    }
    footer{
        font-family: "Mont";
        font-size: 15px;
        color: white;
        background-color: black;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 20px;
        padding-bottom: 20px;
    }
    .accordinst{
        width: 100%; margin-bottom: 30px;
    }
    .lastgrouppa{
        display: flex; width: 50%;
        align-items: center;
    }
    .notfoundimg{
        display:block;position: relative; width: 100%;height: 100%;
    }
    .mission{
        overflow: auto;
        color: white;
        border-radius: 10px;
        padding: 25px 0;
    }
    .mobile-social {
        display: none; /* По умолчанию скрыто */
        justify-content: center;
        margin-top: 30px;
        width: 100%;
    }
    .burger-menu {
        display: none; /* По умолчанию скрыто на десктопе */
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px;
        margin-left: auto;
        z-index: 1001;
    }
    .missiontext{
        color: white;
        overflow: auto;
        font-family: Inter;
        font-size: 24px;
        text-align: justify;
        border-left: 5px solid #eb1c34;
        padding-left: 15px;
        border-radius: 5px;
        box-sizing: border-box;
        font-weight: 500;
    }
    .profname{
        color: #fff;
        font-family: Mont;
        font-size: 18px;
    }
    .price-mobile{
        display: none;
    }
    .price h1{
        font-family: "Mont";
        color: #1cb7e8;
        font-weight: normal;
        font-size: 40px;
        margin: 0px auto;
        display: block;
        width: fit-content;
        margin-top: 40px    ;
    }
    .left-blue-line-footer{
        border-left: 6px solid #1cb7e8;

        border-radius: 5px;
        padding-left: 20px;
    }
}
@media screen and (max-width: 1250px) and (min-width: 1000px) {
    .profinst{
        margin-left: 10px;
        margin-right: 10px;
    }
    .price img{
        display: block;
        margin: 0 auto;
        width: 1100px;
    }
}
@media screen and (max-width: 1130px) and (min-width: 1000px) {
    .profinst{
        margin-left: 10px;
        margin-right: 10px;
    }
    .price img{
        display: block;
        margin: 0 auto;
        width: 900px;
    }
}
@media screen and (max-width: 1530px) and (min-width: 1000px) {
    .pricedesc{
        font-size: 15px;

    }

}
@media screen and (max-width: 1320px) and (min-width: 1000px) {
    .priceinst{

        max-width: 330px;
    }
}
@media screen and (max-width: 1215px) and (min-width: 1000px) {
    .priceinst{

        max-width: 290px;
    }
}
@media screen and (max-width: 1800px) and (min-width: 1000px) {
    .navbar{
        margin: 0 200px;
    }
    .mainwrapper{
        padding: 50px 200px;
    }
    .price{
        padding: 0 200px;
    }
    .prof{
        padding: 0 200px;
    }
    .pics{
        padding: 30px 200px;
    }
    .notfound{
        padding: 100px 200px;
    }
    .accord{
        padding: 50px 200px;
    }
}
@media screen and (max-width: 1600px) and (min-width: 1000px) {
    .navbar{
        margin: 0 100px;
    }
    .mainwrapper{
        padding: 50px 100px;
    }
    .price{
        padding: 0 100px;
    }
    .prof{
        padding: 0 100px;
    }
    .pics{
        padding: 30px 100px;
    }
    .notfound{
        padding: 100px 100px;
    }
    .accord{
        padding: 50px 100px;
    }
}
@media screen and (max-width: 1400px) and (min-width: 1000px) {
    .navbar{
        margin: 0 50px;
    }
    .mainwrapper{
        padding: 50px 50px;
    }
    .price{
        padding: 0 50px;
    }
    .prof{
        padding: 0 50px;
    }
    .pics{
        padding: 30px 50px;
    }
    .notfound{
        padding: 100px 50px;
    }
    .accord{
        padding: 50px 50px;
    }
}
@media screen and (max-width: 1500px) and (min-width: 1000px) {
    .picimg{
        width: 100%;
        height: 100%;
    }
    .pic{
        width: 590px;
        height: 480px;
    }
    .picimgsec{
        width: 100%;
        height: 100%;
    }
    .pic2{
        width: 590px;
        height: 240px;
    }
}
@media screen and (max-width: 1300px) and (min-width: 1000px) {
    .compimg{
        height: 120px;
        width: 210px;
    }
    .picimg{
        width: 100%;
        height: 100%;
    }
    .pic{
        width: 560px;
        height: 480px;
    }
    .picimgsec{
        width: 100%;
        height: 100%;
    }
    .pic2{
        width: 560px;
        height: 240px;
    }
}
@media screen and (max-width: 1240px) and (min-width: 1000px) {

    .pic{
        width: 520px;
        height: 425px;
    }
    .pic2{
        width: 520px;
        height: 210px;
    }
    .profflex {
        justify-content: center;
        flex-direction: column;
        align-content: center;
        justify-items: center;
        flex-wrap: wrap;
    }
    .profinst{
        margin-top: 25px;
    }
}
@media screen and (max-width: 1160px) and (min-width: 1000px) {

    .pic{
        width: 490px;
        height: 425px;
    }
    .pic2{
        width: 490px;
        height: 210px;
    }
    .items{
        gap:10px;
    }
}
@media screen and (max-width: 1100px) and (min-width: 1000px) {

    .pic{
        width: 450px;
        height: 400px;
    }
    .pic2{
        width: 450px;
        height: 200px;
    }
}



.burger-line {
    display: block;
    width: 70px;
    height: 3px;
    background-color: white;
    margin: 15px 0;
    transition: all 0.3s ease;
}
html,body{
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
}
body {
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}
body {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

body > * {
    max-width: 100%;
}
@supports (-webkit-overflow-scrolling: touch) {
    .about {
        padding-left: constant(safe-area-inset-left);
        padding-right: constant(safe-area-inset-right);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    .about > * {
        -webkit-user-select: none;
        user-select: none;
    }
}

input:focus::placeholder {
    color: transparent;
}

/* Анимация для кнопки отправки */
.submit-btn {
    position: relative;
    overflow: hidden;
}

.submit-btn:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5px;
    height: 5px;
    background: rgba(255, 255, 255, 0.5);
    opacity: 0;
    border-radius: 100%;
    transform: scale(1, 1) translate(-50%);
    transform-origin: 50% 50%;
}

.submit-btn:focus:not(:active)::after {
    animation: ripple 1s ease-out;
}

@keyframes ripple {
    0% {
        transform: scale(0, 0);
        opacity: 1;
    }
    20% {
        transform: scale(25, 25);
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: scale(40, 40);
    }
}