@font-face {
    font-family: "CascadiaMono";
    src:local("CascadiaMono"),url("/static/main/fonts/CascadiaMono.ttf");
    font-family: 'MelinerRegular';
    src: local('MelinerRegular'), 
        url('/static/main/fonts/meliner.woff');
    font-family: 'Codename Coder Free 4F';
    src: local('Codename Coder Free 4F'), 
        url('/static/main/fonts/Codenamecoder.woff'),
        url('/static/main/fonts/Codenamecoder4.ttf'),
        url('/static/main/fonts/Codenamecoderfree4fbold.woff2');
    font-family: 'KyivTypeSans';
    src: local('KyivTypeSans'), 
        url('/static/main/fonts/KyivTypeSans.otf'),
        url('/static/main/fonts/KyivTypeSans.ttf');       
}


body {
    margin: 0;
    background: #000 ;/* Фоновый цвет и фоновый рисунок*/
     color: rgb(255, 255, 255); /*Цвет текста на странице */
    background-image: url("../images/PCB1-1.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    overflow: overlay;
    scrollbar-width: none;
                
}







/* Стили для анимации загрузки */
#loading-animation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #0a0a0a; /* Цвет фона */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Обеспечивает отображение поверх контента */
}

/* Стили для основного контента (скрыто, пока загружается страница) */
#glavk_index {
    opacity: 0; /* Сначала контент прозрачный */
    transition: opacity 1s ease-out;
}


/* ::-webkit-scrollbar { Скрывает скролл
  width: 0;
} */

.glavk_index{
    display: flex;
    justify-content: center;
}

.zogolovok_zayavki{
    /* font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    background: #161515;
    border-radius: 3mm;
    margin-left: 1.5mm;
    margin-top: 1.5mm;
    margin-right: 1.5mm;
    padding-block: 2mm;
    padding-left: 6mm;
    padding-right: 6mm;
    text-align: center;
    font-size: 24px;
}
.captcha {
    position: absolute;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    margin-block-start: 20mm;
    margin-inline: 2mm;
    font-size: 4mm;
    padding-inline: 3mm;
}
.otvet_da{
    
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 4mm;
    width: 12mm;
    margin-block: 7mm;
    
}
.da{
    width: 4mm;
    margin-inline: 17mm;
    margin-block: -4mm;
    appearance: none;
    
}
.da::before {
    transition: all .3s;
    z-index: 1;
    opacity: 1;
    display: inline-block;
    content: "";
    width: 4mm;
    height: 4mm;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #161515;
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-color: #161515;
    background-position: center center;
    background-size: 50% 50%;
}
.da:checked::before {
    border-color: #161515;
    background-color: #161515;}

.da:not(:disabled):not(:checked):hover::before {
    
    background: #2c2a2a;
    color: white;
}

.otvet_net{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    width: 12mm;
    margin-block: 3mm;
    font-size: 4mm;
    appearance: none;
}
.net{
    width: 4mm;
    margin-inline: 17mm;
    margin-block: -4mm;
    appearance: none;
}
.net::before {
    transition: all .3s;
    z-index: 1;
    opacity: 1;
    display: inline-block;
    content: "";
    width: 4mm;
    height: 4mm;
    flex-shrink: 0;
    flex-grow: 0;
    border: 1px solid #161515;
    border-radius: 0.25em;
    margin-right: 0.5em;
    background-repeat: no-repeat;
    background-color: #161515;
    background-position: center center;
    background-size: 50% 50%;
  }
  .da::after {
    margin-block: 0.5mm;
    margin-inline: 0.5mm;
    position: absolute;
    z-index: 0;
    transition: all .3s;
    content: "";
    width: 3mm;
    height: 3mm;
    flex-shrink: 0;
    border: 1px solid #f8f6f6;
    border-radius: 0.7mm;
    margin-right: 4mm;
    background-color: #fcfafa;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;
}
.da:checked::after {
    z-index: 2;}

.net::after {
    margin-block: 0.5mm;
    margin-inline: 0.5mm;
    position: absolute;
    z-index: 0;
    transition: all .3s;
    content: "";
    width: 3mm;
    height: 3mm;
    flex-shrink: 0;
    border: 1px solid #f8f6f6;
    border-radius: 0.7mm;
    margin-right: 4mm;
    background-color: #fcfafa;
    align-items: center;
    flex-direction: row;
    justify-content: flex-start;

}
.net:checked::after {
    z-index: 2;}

.net:not(:disabled):not(:checked):hover::before {
    
    background: #2c2a2a;
    color: white;
} 
input, textarea  {
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    display: flex;
    width: 200px; 
    background: #080808;
    color: aliceblue;
    margin: -1mm;
    margin-left: 3.3cm;
    border: 0;
    margin-top: 5mm;
    
    }

label {
    font-size: 4mm;
    float:left;
    margin-left: 5mm;
    margin-right: -30mm;
    margin-top: 4.5mm;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    
    }


.button_anket {
    font-family: 'Codename Coder Free 4F';
    font-size: 17px;
    background: #161515;
    padding: 2mm;
    color: rgb(252, 250, 250);
    border-radius: 2mm;
    border: 0;
    border-width: thin;
    border-color: #080808;
    align-items: center;
    display: flex;
    float: right;
    position: relative;
    top: 54mm;
    margin-inline: -1mm;
    }

.button_tubs {
    position: relative;
    appearance: none;
    border: 0;
    border-radius: 5px;
    background: #161515;
    color: #fff;
    padding: 8px 16px;
    font-size: 16px;
    cursor: pointer;
    margin-inline: 11mm;
    transition: all .3s;
    text-decoration: none;
    font-family: 'Franklin Gothic Medium';
    
}
.button_tubs:hover {
    background: #2c2a2a;
    color: white;
  }
  
.button_tubs:focus {
    outline: none;
    box-shadow: 0 0 0 0px #cbd6ee;
  }

.button_anket:hover {
    background: #2c2a2a;
    color: white;
  }
  
.button_anket:focus {
    outline: none;
    box-shadow: 0 0 0 0px #cbd6ee;
  }
.rectangle_tabs {
    display: flex;
    margin-inline: 10mm;
    width: fit-content;
    height: 45px;
    border-radius: 3mm;
    background: #080808;
    padding-inline: 0px;
    right: 50%;
    align-items: center;
}
    
     

#rectangle_anket {
    font-family:'Codename Coder Free 4F';
    font-size: 8mm;
    padding: 2mm;
    width: auto;
    height: 120mm;
    margin-top: 20mm;
    border-radius: 3mm;
    background: #080808;
    margin-left: 15mm;
    float: left;
}

.zogolovok {
    margin-block: 1%;
    margin-inline: 10mm;
    display: inline-flex;
    font-size: 11mm;
    font-family: 'Franklin Gothic Medium';
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
}
.link {
    display: inline-flex;
    float: right;
    align-items: center;
}
.linkvk {
    margin-top: -2mm;
}

/* .linkavito{

} */

.solderimg {
    position: relative;
    right: -2mm;
    top: -1.5mm;

}
.slogan{
    position: relative;
    top: 10mm;
    letter-spacing: -0.1px;
    margin-inline-start: -50mm;
    font-size: 14px;
    width: max-content;
    font-family: 'Codename Coder Free 4F';
}

.anket{
    display: flex;
    margin-block-start: 4mm;
    margin-inline: 2mm;

}

.formtabs {
    display: flex;
    position: relative;
    align-items: center;
}
#name {
    font-size: 11mm;
    font-family: 'Franklin Gothic Medium';
    margin-block: 0;
}

.zogolovok {
    display: flex;
    font-size: 11mm;
    font-family: 'Franklin Gothic Medium';
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}


#id_zhalobi{
    resize: none;
    position: absolute;
    width: 190px;
    height: 150px;
}       

.gilaytron {
    position: relative;
    width: 55mm;
    background: #292929;
    border-radius: 2mm;
    margin-left: 25mm;
    margin-inline-end: 10mm;
}

.name_zagruzka {
    font-family: "Codename Coder Free 4F";
    display: flex;
    text-align: center;
    font-size: 14px;
    position: absolute;
    width: 30mm;
    height: auto;
    background: #292929;
    margin-inline: 12.5mm;
    margin-block: -0.5mm;
    border-bottom-left-radius: 1mm;
    border-bottom-right-radius: 1mm;
    align-items: center;
    justify-content: center;
    padding: 2px;
}

.progress{
        position: relative;
        background: #ffffff;
        height: 6mm;
        border-radius: 2mm;
        margin-block: 1mm;
        margin-inline: 1mm;
        transition: background-color 5s;
        width: -webkit--available;
        font-size: 0px;
}

.PD {
    font-family: 'Codename Coder Free 4F';
    font-size: 14px;
    width: 55mm;
    color: #757575;
}
.main_vitrini {
    display: flex;
    flex-wrap: wrap;
    width: 180mm;
    margin-left: 10mm;
    justify-content: center;
}
.vitrina1 {
    background-color: #161515f2;
    border-radius: 4mm;
    text-align: center;
    display: flex;
    margin-top: 30mm;
    margin-bottom: 5mm;
    font-size: 25px;
    font-family: 'KyivTypeSans';
    align-items: center;
    padding: 5mm;
}

l3{margin-inline-start: 5mm;}
l2{line-height: 24px;}

.vitrina2 {
    margin-inline: 10mm;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #1a1a1af2;
    float: left;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 3mm;
    width: fit-content;
    height: 45mm;
}
.image_t1{
    margin-block-start: -1mm;
}
text_vitrin{
    text-align: center;
    padding-bottom: 1mm;
    padding-inline: 2mm;
    border-radius: 1mm;
    background: #6c6c6c4d;
    /* font-family: 'CascadiaMono'; */
    font-size: 22px;
    margin-block-start: 3mm;
    margin-inline: 2mm;
    font-family: 'Codename Coder Free 4F';
}
.vitrina3 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-inline-end: 10mm;
    background: #1a1a1af2;
    float: left;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 3mm;
    width: 45mm;
    height: 45mm;
}
.vitrina4 {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-inline-end: 10mm;
    background: #1a1a1af2;
    float: left;
    font-size: 16px;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    border-radius: 3mm;
    width: 45mm;
    height: 45mm;
}


.zogolovok_vitrini{
    background: #161515;
    border-radius: 3mm;
    margin-left: 1.5mm;
    margin-top: 1.5mm;
    margin-right: 1.5mm;
    padding-block: 5mm;
    padding-left: 6mm;
    padding-right: 6mm;
    text-align: left;
    font-size: 30px;
}

.content_vitrini {
  position: relative;
  top: -1mm;
  left: 0mm;
  margin-left: 5mm;
  margin-right: 2mm;
  border-width: medium;
  padding-left: 2mm;
  padding-right: 2mm;
  padding-top: 8mm;
  padding-bottom: 5mm;
  font-family: 'Codename Coder Free 4F';
  font-size: 19px;
}

.OTZ {
    scrollbar-color: #aaa0 #fff0;
    overflow-x: overlay;
    height: 109mm;
    scrollbar-width: none;
    text-align: center;
    width: 85mm;
    position: relative;
    margin-top: 23mm;
    margin-left: 5mm;
    margin-right: 10mm;
    border-width: medium;
    padding-left: 5mm;
    padding-right: 5mm;
    padding-top: 5mm;
    padding-bottom: 5mm;
    background: #181818db;
    border-radius: 3mm;
    float: right;
    font-family: 'Codename Coder Free 4F';
}
.happy_people{
    text-align: left;
    margin-block: 5mm;
    border-radius: 2mm;
    background: #33363ec2;
    font-family: 'Codename Coder Free 4F';
}
.OTZname{
    border-bottom-style: outset;
    border-bottom-width: 1mm;
    border-bottom-color: #ffffff;
    border-top-left-radius: 2mm;
    border-top-right-radius: 2mm;
    padding: 1.5mm;
    background: #74757263;
    font-size: 20px;
}
.OTZdata{
    margin-inline-end: 1mm;
    padding: 1mm;
    font-size: 14px;
    float: right;
}
.OTZtext{
    padding: 2mm;
}

label1{
    font-size: 21px;
}


.robotyaga {
    margin-block: 10mm;
    width: 500mm;
    height: auto;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    border-radius: 11.3386px;
    background-color: #191919;
}
/* 🔥 SLIDE + FADE эффект
@keyframes photoSlideIn {
    0% {
        opacity: 0;
        transform: scale(0.98);
    }
    50% {
        opacity: 0.7;
        transform: scale(0.99);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
} */


.current-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.9s ease-in-out, transform 0.6s ease-in-out;
    opacity: 1;
}

.current-photo.fade-out {
    opacity: 1;
    transform: scale(1.35);
}

.current-photo.fade-in {
    animation: photoSlideIn 0.9s linear;}
.photo_primer {
    overflow: hidden;
    position: relative;
    background: #262626;
    width: auto;
    height: 65mm;
    border-radius: 4mm;
    margin: 5mm;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
.photo-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.7);
    color: white;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
}
.prev-photo { left: 5px; }
.next-photo { right: 5px; }

.photo-counter {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.8);
    color: white;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
}
.photo_primer img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/* 🔥 АНИМАЦИЯ ТЕКСТА */
.rasstanovka_horizontal {
    transition: all 0.5s ease-in-out;
    opacity: 1;
    transform: translateY(0);
}

.repair-carousel.fade-text {
    opacity: 0.7;
    transform: translateY(15px);
}

.opisanie_primer, 
.neispravnost_primer {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    transform: translateX(0);
}

.opisanie_primer.fade-out,
.neispravnost_primer.fade-out {
    opacity: 0.3;
    transform: translateX(-20px);
}
.opisanie{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-block-start: 5mm;
}
.opisanie_primer {
    font-family: 'Codename Coder Free 4F';
    padding: 3mm;
    scrollbar-width: none;    
    overflow-x: overlay;
    background: #262626;
    width: 75mm;
    height: 45mm;
    border-radius: 3mm;
    margin-block-end: 5mm;
    margin-inline: 5mm;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
}
text_opisanie {
    font-family: 'Codename Coder Free 4F';
    padding: 2mm;
    background: #262626;
    width: 30mm;
    border-radius: 2mm;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    text-align: center;
    height: auto;
    margin-block: -1mm;
}
.sloghnost_primer {
    font-family: 'Codename Coder Free 4F';
    padding: 3mm;
    background: #262626;
    width: 55mm;
    height: 5mm;
    border-radius: 3mm;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-block: 3mm;
    display: flex;
    align-items: center;
}
text_sloghnost {
    font-family: 'Codename Coder Free 4F';
    padding: 2mm;
    background: #262626;
    width: 30mm;
    border-radius: 2mm;
    text-align: center;
    height: auto;
    margin-block-end: -5mm;
}
.rasstanovka_horizontal {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: flex-end;
}
.rasstanovka_vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}
.neispravnost_primer {
    font-family: 'Codename Coder Free 4F';
    padding: 3mm;
    background: #262626;
    width: 70mm;
    height: 20mm;
    border-radius: 3mm;
    margin-inline: 5mm;
    border: 1px solid rgba(0, 0, 0, 0.2);
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    margin-block: 5mm;
}
text_neispravnost{
    font-family: 'Codename Coder Free 4F';
    padding: 2mm;
    background: #262626;
    width: 30mm;
    border-radius: 2mm;
    text-align: center;
    height: auto;
    margin-block-end: -6mm;
}