:root{
    --body: #282F4D;
    --blue: #7888CA;
}

// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.inter-<uniquifier> {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

*::-webkit-scrollbar {width: 7px;}
*::-webkit-scrollbar-track {background: #D9D9D9;}
*::-webkit-scrollbar-thumb {background-color: #7888CA;}

/*html {cursor: url('images/c_boby.svg') 4 1, pointer;}*/

body {padding: 0px; margin: 0px; font-size: 17px; font-weight: 300; color: #fff; background: var(--body); font-family: "Inter", sans-serif; overflow-x: hidden;}

a {color: #7888CA;}
a:hover {text-decoration: none;}

footer, nav, header, section, aside {display: block;}

.leftBlockFix {position: fixed; z-index: 2; top: 0px; left: 0px; width: 349px; height: 100vh; border-right: 1px solid #394060; box-sizing: border-box; padding: 0px 20px;}
.topFix {position: fixed; z-index: 1; top: 0px; left: 0px; width: 100%; height: 104px; border-bottom: 1px solid #394060; background: var(--body);}
.layoutContent {max-width: 1570px; box-sizing: border-box; padding: 0px 50px; margin-top: 105px; margin-left: 350px;}
.content {float: left; margin-top: 70px; width: 100%;}
.leftFixAddress {position: absolute; bottom: 50px; font-weight: 200;}
.block1 {float: left; width: 58%;}
.block2 {float: right; position: relative; width: 40%;}
.block2 img {width: 100%; height: auto;}
.dopImg {position: absolute; left: -137px; bottom: 50px;}
.titleBlock {width: 100%; font-size: 40px; color: #fff;}
.titleBlock b {font-size: 60px; font-weight: 800; color: #7888CA;}
.textSlide {width: 100%; font-size: 20px; font-weight: 200; color: #fff; margin-top: 40px;}
.textSlide span {color: #5F6786; font-size: 25px; font-weight: 400;}
.textSlide a {display: block; transition: .4s; margin-top: 40px; font-size: 20px; text-decoration: none; color: #fff; border: 1px solid #fff; padding: 20px; width: 200px; text-align: center; border-radius: 5px;}
.textSlide a:hover {background: rgb(255 255 255 / 10%);}
.quote {float: left; width: 100%; position: relative; font-size: 17px; color: #5F6786; font-style: italic; margin-top: 38px;}
.quote span {font-weight: 500; color: #7888CA;}
.cov {position: absolute; left: -20px; bottom: 0px;}
.logoLeftFix {float: left; width: 100%; margin-top: 30px;}
.logoLeftFix img, .logoTopFix img {width: 100%;}
.logoTopFix {display: none; margin-left: 20px; width: 308px; margin-top: 30px;}
.topFix nav {float: left; margin-left: 400px; margin-top: 40px;}
.topFix nav ul {margin: 0px; padding: 0px;}
.topFix nav ul li {float: left; list-style: none; font-size: 16px; margin-right: 30px;}
.topFix nav ul li:last-child {margin-right: 0px;}
.topFix nav ul li a {text-decoration: none; color: #D1DAFF;}
.rightTopFix {float: right; display: flex; align-items: center; gap: 50px; margin-right: 50px; margin-top: 30px;}
.phone {font-size: 23px; font-weight: 600; line-height: 20px;}
.phone a {font-size: 15px; font-weight: 300;}
.vopros {font-size: 16px; color: #7888CA; display: flex; align-items: center; gap: 10px;}
.vopros img {display: block;}
.vopros a {transition: .4s; text-decoration: none; color: #7888CA; border-bottom: 1px dotted #7888CA;}
.vopros a:hover {color: #fff; border-bottom: 1px dotted #fff;}
.leftFixTitle {float: left; width: 100%; font-size: 20px; color: #5F6786; font-style: italic; margin-top: 40px;}
.layoutFormLeftFix {float: left; width: 100%; box-sizing: border-box; border: 1px solid #7888CA; border-radius: 7px; padding: 20px; margin-top: 18px;}
.titleFormLeftFix {float: left; width: 100%; font-size: 20px; color: #7888CA; font-weight: 700;}
.SubTitleFormLeftFix {float: left; width: 100%; font-size: 13px; color: #fff; margin-top: 10px;}
.layoutOkomp {float: left; display: flex; gap: 50px; width: 100%; margin-top: 130px; margin-bottom: 100px;}
.layoutOkomp .right {font-size: 17px;}
.layoutOkomp .right a {transition: .4s; text-decoration: none; color: #fff; font-weight: 600; border-bottom: 1px dotted #fff;}
.layoutOkomp .right a:hover {color: #7888CA; border-bottom: 1px dotted #7888CA;}
.icoOkomp {display: flex; gap: 70px; margin-top: 40px;}
.layoutKatalog {float: left; width: 100%;}
.titleCatalog {float: left; width: 100; font-size: 50px; font-weight: 700; margin-bottom: 40px;}
.catalog {float: left; width: 100%; display: flex; flex-wrap: wrap; gap: 30px; height: auto; margin-bottom: 50px;}
.catalog .tovar{position: relative; transition: .2s; opacity: 1; width: calc(100% / 4.3); height: 480px; }
.catalog .tovar a {text-decoration: none; color: #7888CA;}
.hoverTovar {transition: .4s; position: absolute; opacity: 0; width: 100%; height: 480px; background: rgb(40 47 77 / 70%) url('images/hover.svg') center top no-repeat; background-position-y: 50px;}
.catalog .tovar:hover .hoverTovar {opacity: 1;}
.catalog .imgMiniTovar {width: 100%; border-radius: 7px; overflow: hidden;}
.catalog .imgMiniTovar img {display: block; width: 100%; height: auto;}
.catalog .nameTovar {width: 100%; font-size: 24px; font-weight: 400; margin-top: 20px; margin-bottom: 10px;}
.catalog .miniText {font-size: 16px; color: #fff;}
.catalog .miniText span {text-decoration: none; color: #7888CA; border-bottom: 1px dotted #7888CA;}
.layoutCont {float: left; width: 100%;}
.cont {float: left; display: flex; width: 100%; justify-content: space-between;}
.tittleCont {font-size: 40px; font-weight: 600; margin-bottom: 50px;}
.cont div:first-child {max-width: 460px;}
.cont div:last-child {width: 65%; border-radius: 7px; overflow: hidden;}
.cont div b {color: #7888CA;}
.cont div span {font-size: 30px;}

#okompKomp {width: 100% !important;}


.moreT {float: left;  position: relative; border: 1px solid #fff;  border-radius: 7px; padding: 20px 0px; width: 210px; text-align: center; margin-top: 40px; transition: .4s; margin-bottom: 80px; color: #fff;}
.moreT::after{position: absolute; content: " "; left: 243px; bottom: 30px; height: 1px; width: 300px; background: #fff;}
.moreT:hover {transform: .4s; cursor: pointer; background: rgb(255 255 255 / 10%); color: #fff;}
footer {float: left; width: 100%; display: flex; justify-content: space-between; color: #5b6382; border-top: 1px solid #fff; padding: 25px 0px; margin-top: 80px;}
.moreTovar {height: 800px;}
.layoutMoreTovar {float: left; width: 100%; display: flex; justify-content: space-between; gap: 20px;}
.imgTovarMore {width: 400px; border: 1px solid #7888CA; border-radius: 7px; overflow: hidden; align-content: center;}
.imgTovarMore img {width: 100%; height: auto; display: block;}
.textTovarMore {width: 65%;}
.textTovarMore b {font-size: 45px;}
.textTovarMore a{display: inline-block; background: #7888CA; font-size: 20px; padding: 20px 40px; transition: .4s; text-decoration: none; color: #fff; border-radius: 5px;}
.textTovarMore a:hover {background: #282F4D;}
.layoutAcc {float: left; width: 100%; margin-top: 35px;}

.accordion .accordion-item {margin: 0 0 10px 0;}
.accordion .ui-accordion-header {font-weight: 500; color: #282F4D; cursor: pointer;outline: none; font-size: 24px;}
.accordion .ui-accordion-header:hover {color: #7888CA;}
.accordion .ui-accordion-content {padding-top: 20px; margin-bottom: 25px; border-bottom: 3px solid #7888CA; padding-bottom: 25px;}
.accordion .ui-accordion-header-active {color: #7888CA; border-bottom: 1px solid #7888CA; padding-bottom: 15px;}

/*********ТАБЫ************/
.tabs {
   float: left;
   width: 100%;
 
}

/* Стили для списка вкладок */
.tab-header {
   list-style: none;
   padding-left: 0;
   display: flex;
   align-items: center;
   justify-content: flex-start;
   margin: 0;
   height: 30px;
/**********ПОСТАВИТЬ ПРИ МОБИЛЬНОМ РАЗРЕШЕНИИ**********/ 
       overflow: auto; 
}

/* Стили для вкладки */
.tab-header__item {   
   margin-right: 15px;
   cursor: pointer;   
   border-bottom: none;
   color: #a9a9a9;
}

/* Стили для активной вкладки */
.tab-header__item.active {
   color: #7888CA;
   position: relative;
   top: 1px;
   background-color: #fff;
   font-weight: 500;
   border-bottom: 2px solid #7888CA;
  
}

/* Стиль для списка контейнеров с содержимым вкладок */
.tab-content {
   list-style: none;
   padding: 0;
   margin: 0;
   overflow: auto;
}

/* Стили для контейнера с содержимым вкладки */
.tab-content__item {
   display: none;
   padding-top: 20px;
}

/* Стили для активного контейнера вкладки */
.tab-content__item.active {
   display: block;
}


/*****FORM****/
.layoutFormLeftFix .form {float: left; position: relative; margin-top: 15px;}
.layoutFormLeftFix .form input {width: 100%; box-sizing: border-box; background: none; font-size: 17px; font-weight: 300; color: #5F6786; font-family: "Inter", sans-serif; border: 1px solid #7888CA; border-radius: 5px; resize: none; padding: 15px; margin: 10px 0px; outline: none;}
.layoutFormLeftFix .form button {transition: .4s; width: 100%; background: none; color: #fff; font-size: 17px; font-weight: 400; text-decoration: none; padding-top: 14px; padding-bottom: 15px; border-radius: 5px; border: none; cursor: pointer; outline: none; margin-top: 8px; border: 1px solid #fff; }
.layoutFormLeftFix .form button:hover {background: rgb(255 255 255 / 10%); color: #fff;}
.layoutFormLeftFix .form .checkbox {float: left; text-transform: none; line-height: 10px; margin-top: 10px;}
.layoutFormLeftFix .form .checkbox input {width: auto; float: left; margin-top: 0px; margin-right: 10px;}
.layoutFormLeftFix .form .checkbox label {font-size: 11px; color: #9B9AB5;}
.layoutFormLeftFix .form input::placeholder {color: #5F6786; font-size: 17px; font-weight: 300;}
/*****FORM****/


/*****FORM_PopUp****/
.form input {width: 100%; box-sizing: border-box; background: #fff; font-size: 20px; font-weight: 300; color: #474747; font-family: "Inter", sans-serif; border: 1px solid #cdcdcd; border-radius: 5px; resize: none; padding: 24px; margin: 10px 0px; outline: none;}
.form button {transition: .4s; width: 100%; background: #7888CA; color: #fff; font-size: 20px; font-weight: 400; text-decoration: none; padding-top: 23px; padding-bottom: 24px; border-radius: 5px; border: none; cursor: pointer; outline: none; margin-top: 8px;}
.form button:hover {background: #282F4D; color: #fff;}
.form .checkbox {float: left; text-transform: none; line-height: 10px; margin-top: 10px;}
.form .checkbox input {width: auto; float: left; margin-top: 0px; margin-right: 10px;}
.form .checkbox label {font-size: 14px; color: #9B9AB5;}
.form input::placeholder {color: #474747; font-size: 20px; font-weight: 300;}
.fancybox-content {border-radius: 10px !important; color: var(--body);}
.fancybox-content h2 {padding: 0px; margin: 0px; margin-bottom: 25px;}
/*****FORM_PopUp****/

.fancybox-bg {background: #282F4D !important;}

@media only screen and (max-width:1630px) {
    .catalog {gap: 20px;}    
}

@media only screen and (max-width:1550px) {
    .dopImg {display: none;}    
}

@media only screen and (max-width:1440px) {
    .layoutOkomp .right img {width: 75%;}  
    .layoutOkomp .right .icoOkomp img {width: auto;}
}

@media only screen and (max-width:1400px) {
    .leftBlockFix {display: none;}  
    .layoutContent {margin-left: 0px;}
    .logoTopFix {float: left; display: block;}
    .topFix nav {float: left; margin-left: 5%; margin-top: 40px;}
}

@media only screen and (max-width:1280px) {
    .rightTopFix {gap: 15px;}
}

@media only screen and (max-width:1180px) {
    .vopros {display: none;}
}

@media only screen and (max-width:1024px) {
    .topFix nav {display: none;}  
    .block1, .block2 {width: 100%;}
    .block2 {margin-top: 25px;}
    .block1 {text-align: center;}
    .textSlide a {margin: auto; margin-top: 40px;}
    .layoutOkomp {flex-direction: column-reverse;}
    .layoutOkomp .left img {width: 100%;}
    .catalog .tovar {width: 47%; height: auto;}
    .catalog {justify-content: space-between;}
    .hoverTovar {height: auto; height: 450px;}
    .cont {flex-direction: column; gap: 35px;}
    .cont div:last-child {width: 100%;}
    footer {flex-direction: column; gap: 15px;
    text-align: center;}
    footer div {width: 100%;}
    .moreT::after {display: none;}
    .layoutOkomp {margin-top: 50px;}
    .content {margin-top: 35px;}
    .tittleCont {margin-bottom: 30px;}
    .layoutMoreTovar {flex-direction: column-reverse;}
    .textTovarMore, .imgTovarMore {width: 100%;}
    #moreTovar, .moreTovar {width: 100% !important;}
    
}

@media only screen and (max-width:780px) {
    .tab-header{overflow: inherit; flex-direction: column; align-items: flex-start; gap: 30px; height: auto;}
}

@media only screen and (max-width:600px) {
    .phone {display: none;}
    .textSlide {margin-top: 25px;}
    .moreT {width: 100%;}
    .layoutContent {padding: 0px 15px;}
}

@media only screen and (max-width:480px) {
    .icoOkomp {flex-direction: column;} 
    .catalog .tovar {width: 100%;}
    .hoverTovar {height: 355px;}
    .textTovarMore b {font-size: 30px;}
}

.noHidden {height: auto; margin-bottom: 60px;}
.noButton {display: none;}

/***cookie**/
#cookie_note{
    display: none;
    position: fixed;
    bottom: 25px;
    left: 45%;
    max-width: 90%;
    transform: translateX(-45%);
    padding: 20px;
    background-color: white;
    border-radius: 4px;
    box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 100;
}

.layout_text_cookie {display: flex; gap: 20px; align-items: center;}

#cookie_note p{
    margin: 0;
    font-size: 0.7rem;
    text-align: leАнод политика сделать (оплачено)ft;
    color: black;
    width: 90%;
}

#cookie_note a {color: #3755fa;}
#cookie_note a:hover {text-decoration: none;}

.cookie_accept{
    width: 100px;
    height: 30px;
    background: #3755fa;
    border: none;
    color: #fff;
    border-radius: 5px;
    transition: .3s;
}

.cookie_accept:hover {cursor: pointer; background: #283eb9;}

@media (max-width: 780px){
.layout_text_cookie {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-direction: column;
}
}

@media (min-width: 576px){
    #cookie_note.show{
        display: flex;
    }
}

@media (max-width: 575px){
    #cookie_note.show{
        display: block;
        text-align: left;
    }
}
/***cookie**/