/* Main website stylesheet */

/* FONTS */
@font-face {
    font-family: 'GolosText';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Golos-Text_Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'GolosText';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/Golos-Text_SemiBold.woff2') format('woff2');
}

@font-face {
    font-family: 'GolosText';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Golos-Text_Bold.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
}

/* GLOBAL PSEUDOELEMENTS */
*,*:before,*:after {
    -webkit-box-sizing: inherit;
    box-sizing: inherit;
}

*:focus {
    outline: none;
}

:root {
    --font: GolosText, sans-serif;
    --font-title: Montserrat, sans-serif;
    --black: #0c121d;
    --white: #fff;
    --orange: #f06500;
    --blue: #252b3b;
    --orange-hover: #e05a00;
    --secondary-bg: #eff0f4;
    --media-laptop:1519px;
    --media-tablet:1279px;
    --media-mobile:767px;
}

/* GLOBAL ELEMENTS */
html {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-text-size-adjust: 100%;
    line-height: 1;
    scroll-behavior: smooth;
    overflow-anchor: none;
    font-feature-settings: 'liga' off, 'clig' off;
    background-color: #232833;
    
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    font-family: var(--font);
    font-size: 14px;
    line-height: 25px;
    color: var(--black);
    padding-right: 0;
    background-color: #f8f9ff !important;
    
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden !important;
    touch-action: none;
}

body.no-scroll .catalog-sidebar.is-open {
    touch-action: auto;
}

body.is-resizing * {
    transition: none !important;
    animation: none !important;
}

iframe {
    border-radius: 12px;
}

@media screen and (max-width: 1279px) {
    iframe {
        max-width: 100%;
    }
}

h1,h2,h3,h4,h5,h6,p,pre,span,ul,ol,li,tr,td,th,table,blockquote {
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6,
.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: var(--font-title);
  font-weight: 700;
}

img {
    display: block;
    max-width: 100%;
}

a {
    display: inline-block;
    text-decoration: none;
    color: var(--black);
    -webkit-transition: .3s;
    transition: .3s;
}

a:hover {
    color: var(--orange);
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

main {
    display: block;
}

pre {
    font-family: monospace, monospace;
    font-size: 1em;
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted;
}

b,strong {
    font-weight: bold;
}

small {
    font-size: 80%;
}

textarea {
    overflow: auto;
}

/* Body blur effect */
body::after{
    content: '';
    display: block;
    position: fixed;
    inset: 0;
    background: transparent;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 90;
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;

    pointer-events: none;
}

body:has(.nav-catalog-item:hover)::after {
    opacity: 1;
    visibility: visible;
}


/* ========= WIDTH CONTAINER ========= */
.container {
  width: 100%;
  max-width: 1470px;
  margin: 0 auto;
  /*padding: 0 20px;*/
}

@media (max-width: 1519px) {  
  .container {
    max-width: 1240px;
  }
}

@media (max-width: 1279px) {  
    .container{
        max-width:100%;
        padding:0 20px;
    }
}

@media (max-width: 767px) {
  .container {
    padding: 0 14px;
  }
}

/* ==============================================
 * BUTTONS
 ============================================== */
.btn{
    background: var(--orange);
    border-radius: 12px;
    padding:15px 50px;
    color:#fff;
    transition:all 0.3s ease-in-out;
    border:1px solid var(--orange);
    outline:none;
    text-decoration:none;
    font: 14px var(--font);
    line-height:24px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.btn:hover{
    background:var(--orange-hover);
    border-color:var(--orange-hover);
    color:#fff;
}

.btn-arrow,
.btn-icon{
    display:inline-flex;
    gap:20px;
}

.btn-arrow svg,
.btn-icon svg{
    width:24px;
    height:24px;
    display:block;
}

.btn-outline{
    background-color:transparent;
    color:var(--black);
}

.btn-outline.btn-arrow svg,
.btn-outline.btn-icon svg{
    color: rgba(12, 18, 29, 0.8);
}

.btn:hover.btn-outline.btn-arrow svg,
.btn:hover.btn-outline.btn-cion svg{
    color: unset;
}

.btn-clear{
    background:transparent;
    border-color:transparent;
    color:var(--black);

}

.btn:hover.btn-clear{
    background:transparent;
    border-color:transparent;
    color: var(--orange);
}

.btn-black{
    background:transparent;
    border-color: var(--black);
    color: var(--black);
}

.btn-black.btn-icon svg{
    color: var(--black);
    transition:all 0.3s ease-in-out;
}

.btn:hover.btn-black{
    background:transparent;
    border-color: var(--orange);
    color: var(--orange);
}

.btn:hover.btn-black.btn-icon svg{
    color: var(--orange);
}

.btn-icon-left span{
    order:2;
}

.btn-icon-left svg{
    order:1;
}

.btn-grey{
    background:#f2f4fc;
    border-color:#f2f4fc;
    color:var(--black);
}

.btn:disabled,
.btn[disabled],
.btn[disabled="disabled"],
.btn.is-disabled,
.btn:disabled:hover,
.btn[disabled]:hover,
.btn[disabled="disabled"]:hover,
.btn:hover.is-disabled{
    background: rgba(12, 18, 29, 0.35);
    border-color:transparent;
    color: rgba(12, 18, 29, 0.35);
    
    cursor:not-allowed;
}

.btn:disabled.btn-outline,
.btn[disabled].btn-outline,
.btn[disabled="disabled"].btn-outline,
.btn.btn-outline.is-disabled,
.btn:disabled:hover.btn-outline,
.btn[disabled]:hover.btn-outline,
.btn[disabled="disabled"]:hover.btn-outline,
.btn:hover.btn-outline.is-disabled{
    background-color:transparent;
    border-color:rgba(12, 18, 29, 0.35);
    color: rgba(12, 18, 29, 0.35);
}

.btn:disabled.btn-outline.btn-arrow svg,
.btn[disabled].btn-outline.btn-arrow svg,
.btn[disabled="disabled"].btn-outline.btn-arrow svg,
.btn.is-disabled.btn-outline.btn-arrow svg,
.btn:hover.is-disabled.btn-outline.btn-arrow svg,
.btn:disabled:hover.btn-outline.btn-arrow svg,
.btn[disabled]:hover.btn-outline.btn-arrow svg,
.btn:disabled.btn-outline.btn-icon svg,
.btn[disabled].btn-outline.btn-icon svg,
.btn[disabled="disabled"].btn-outline.btn-icon svg,
.btn.is-disabled.btn-outline.btn-icon svg,
.btn:hover.is-disabled.btn-outline.btn-icon svg,
.btn:disabled:hover.btn-outline.btn-icon svg,
.btn[disabled]:hover.btn-outline.btn-icon svg,
.btn[disabled="disabled"]:hover.btn-outline,
.btn:hover.is-disabled.btn-outline{
    color: rgba(12, 18, 29, 0.35);
}

.btn:disabled.btn-clear,
.btn[disabled].btn-clear,
.btn[disabled="disabled"].btn-clear,
.btn.is-disabled.btn-clear,
.btn:disabled:hover.btn-clear,
.btn[disabled]:hover.btn-clear,
.btn[disabled="disabled"]:hover.btn-clear,
.btn:hover.is-disabled.btn-clear{
    background-color:transparent;
    border-color:transparent;
    color: rgba(12, 18, 29, 0.35);
}

.btn-outline.btn-dark,
.btn-clear.btn-dark{
    color:#fff;
}

.btn-medium{
    padding:8px 50px;
}

.btn-small{
    padding:3px 50px;
}

@media (max-width: 1199px) {
    .btn-medium{
        padding:3px 25px;
    }
}

@media (max-width:1279px) {
    
    .btn.btn-arrow-md{
        background-color:transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M19.3762 15.0007C19.3772 15.1653 19.3456 15.3283 19.2834 15.4806C19.2212 15.6329 19.1296 15.7714 19.0137 15.8882L14.0137 20.8882C13.8972 21.0048 13.7588 21.0972 13.6065 21.1603C13.4542 21.2234 13.291 21.2559 13.1262 21.2559C12.9614 21.2559 12.7982 21.2234 12.6459 21.1603C12.4936 21.0972 12.3553 21.0048 12.2387 20.8882C12.1222 20.7717 12.0297 20.6333 11.9666 20.4811C11.9036 20.3288 11.8711 20.1656 11.8711 20.0007C11.8711 19.8359 11.9036 19.6727 11.9666 19.5204C12.0297 19.3682 12.1222 19.2298 12.2387 19.1132L16.3762 15.0007L12.4012 10.8757C12.2733 10.7608 12.1706 10.6206 12.0994 10.4641C12.0281 10.3076 11.9899 10.1381 11.9872 9.96612C11.9845 9.79417 12.0173 9.62352 12.0835 9.46482C12.1498 9.30613 12.248 9.16281 12.3722 9.04383C12.4963 8.92485 12.6437 8.83276 12.8051 8.77333C12.9664 8.7139 13.1383 8.68841 13.31 8.69844C13.4817 8.70848 13.6494 8.75383 13.8028 8.83165C13.9561 8.90948 14.0918 9.01811 14.2012 9.15074L19.0262 14.1507C19.2466 14.3793 19.3717 14.6832 19.3762 15.0007Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        width:44px;
        height:44px;
        padding:0;

        border-color:#fff;
    }

    .btn-arrow-md span,
    .btn-arrow-md svg{
        display:none;
    }

    .btn-arrow-md:hover{
        background-color:var(--orange);
        border-color:var(--orange);
    }
}

@media (max-width: 767px) {
    .btn.btn-arrow-sm{
        background-color:transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M19.3762 15.0007C19.3772 15.1653 19.3456 15.3283 19.2834 15.4806C19.2212 15.6329 19.1296 15.7714 19.0137 15.8882L14.0137 20.8882C13.8972 21.0048 13.7588 21.0972 13.6065 21.1603C13.4542 21.2234 13.291 21.2559 13.1262 21.2559C12.9614 21.2559 12.7982 21.2234 12.6459 21.1603C12.4936 21.0972 12.3553 21.0048 12.2387 20.8882C12.1222 20.7717 12.0297 20.6333 11.9666 20.4811C11.9036 20.3288 11.8711 20.1656 11.8711 20.0007C11.8711 19.8359 11.9036 19.6727 11.9666 19.5204C12.0297 19.3682 12.1222 19.2298 12.2387 19.1132L16.3762 15.0007L12.4012 10.8757C12.2733 10.7608 12.1706 10.6206 12.0994 10.4641C12.0281 10.3076 11.9899 10.1381 11.9872 9.96612C11.9845 9.79417 12.0173 9.62352 12.0835 9.46482C12.1498 9.30613 12.248 9.16281 12.3722 9.04383C12.4963 8.92485 12.6437 8.83276 12.8051 8.77333C12.9664 8.7139 13.1383 8.68841 13.31 8.69844C13.4817 8.70848 13.6494 8.75383 13.8028 8.83165C13.9561 8.90948 14.0918 9.01811 14.2012 9.15074L19.0262 14.1507C19.2466 14.3793 19.3717 14.6832 19.3762 15.0007Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        
        width:44px;
        height:44px;
        padding:0;
    }
    
    .btn-arrow-sm span,
    .btn-arrow-sm svg{
        display:none;
    }
    
    .btn-arrow-sm:hover{
        background-color:var(--orange);
    }
}

/* ==============================================
 * INPUT FIELDS 
 ============================================== */

/* TEXT FIELD */
.field-text{
    background: #f8f9ff;
    
    border: 1px solid rgba(12, 18, 29, 0.2);
    border-radius:10px;
    padding:9px 12px;
    
    font: 16px var(--font);    
    line-height: 25px;
    color:var(--black);
    
    width:100%;
    display:block;
    transition:all 0.3s ease-in-out;
}

.field-text::placeholder{
    color:rgba(12, 18, 29, 0.35);
}

.field-text:focus{
    border-color:var(--orange);
}

@media (max-width: 1279px) {
    .field-text{ font-size:14px; line-height:26px; padding:6px 12px }
}
@media (max-width: 767px) {
    .field-text{ line-height: 25px; padding: 4px 12px }
}

/* TEXTAREA FIELD */
.field-textarea{
    background: #f8f9ff;
    
    border: 1px solid rgba(12, 18, 29, 0.2);
    border-radius:10px;
    padding:9px 12px;
    
    font: 16px var(--font);    
    line-height: 25px;
    color:var(--black);
    
    resize:none;
    min-height:95px;
    
    width:100%;
    display:block;
    transition:all 0.3s ease-in-out;
}

.field-textarea::placeholder{
    color:rgba(12, 18, 29, 0.35);
}

.field-textarea:focus{
    border-color:var(--orange);
}

@media (max-width: 1279px) {
    .field-textarea{ font-size:14px; line-height:26px; padding:6px 12px; min-height: auto; resize: none }
}
@media (max-width: 767px) {
    .field-textarea{ line-height: 25px; padding: 4px 12px; min-height: auto; resize: none }
}

/* FILE FIELD */
.field-file{
    display:block;
    line-height: 1;
    padding: 0;
    vertical-align: top;
}

.field-file input[type="file"].visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.field-file input[type="file"]:focus-visible + label {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
    border-radius: 6px;
}

.field-file label{
    display:inline-flex;
    align-items:center;
    gap:8px;
    cursor:pointer;
}

.field-file-icon{
    width: 24px;
    height: 24px;
    flex:0 0 24px;
    display:inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(12, 18, 29, 0.35);
    transition:all 0.3s ease-in-out;
}

.field-file-icon svg{
    width:18px;
    height:19px;
    display:block;
    color: inherit;
}

.field-file-text{
    font: 16px var(--font);
    line-height: 26px;
    color: rgba(12, 18, 29, 0.35);
    transition:all 0.3s ease-in-out;
}

.field-file label:hover .field-file-icon,
.field-file label:hover .field-file-text{
    color:var(--orange);
}

.field-file-info {
    margin-top: 8px;
    font-size: 14px;
    line-height: 20px;
}

.field-file-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--black);
}

.field-file-error {
    display: none;
    color: #e63946; /* Красный цвет для ошибки */
    margin-top: 4px;
}

.field-file.has-error .field-file-error {
    display: block;
}

@media (max-width: 1279px) {
    .field-file-text{ font-size:14px; line-height:26px }
}

/* Checkbox field */
.field-checkbox{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.field-checkbox input[type="checkbox"]{
    -webkit-appearance:none;
    -moz-appearance:none;
    -ms-appearance:none;
    appearance:none;
    margin:0;
    
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border: 1px solid rgba(12, 18, 29, 0.2);
    border-radius: 6px;
    background-color: #f8f9ff;
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    
    background-position: center;
    background-size: 13px;
    background-repeat: no-repeat;
}

.field-checkbox input[type="checkbox"]:checked {
    background-color: var(--orange);
    border-color: var(--orange);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.field-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--orange);
    outline-offset: 4px;
}

.field-checkbox:hover input[type="checkbox"]:not(:checked) {
    border-color: var(--orange);
}

.field-checkbox-text {
    font: 12px var(--font);
    line-height: 19px;
    color: rgba(12, 18, 29, 0.65);
    user-select: none;
}

.field-checkbox-text a {
    color: rgba(12, 18, 29, 0.65);
    text-decoration: underline;
    transition: color 0.3s ease;
}

.field-checkbox-text a:hover {
    color: var(--orange);
}






/* ==============================================
 * HEADER 
 ============================================== */
.header svg {
  display: block;
  width: 100%;
  height: 100%;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: 30px 0;
  background-image: linear-gradient(180deg, #F8F9FF 0%, #f8f9ff00 75%, #f8f9ff00 100%);
  z-index: 1000;
}

.header-wrap {
  display: flex;
  gap: 15px;
  max-width: 1470px;
  margin:0 auto;
}

/* ОБЩИЕ ПЛАШКИ */
.header-brand-area,
.header-nav,
.header-contacts {
  background: rgba(12, 18, 29, 0.9);
  border-radius: 22px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  height: 70px;
}

.header-brand-area {
  justify-content: center;
  width: 158px;
  padding: 0 20px;
}

.header-brand-area > a {
  display: flex;
  align-items: center;
}

.header .header-logo-img {
  width: 110px;
  height: 27px;
}

.header-mobile-controls {
  display: none;
}

.header-nav {
  flex: 1;
  padding: 0 18px;
  justify-content: center;
}

.header-nav > ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-right: 20px;
    margin:0;
    list-style:none;
}

.header-nav > li {
    position: relative;
}

.header-nav > ul > li > a {
    padding: 7px 0;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
}

.header-nav > ul > li > a:hover,
.header-nav > ul > li > a.is-active{
  border-bottom-color: var(--orange);
}

.header-nav a.header-nav-catalog,
.nav-mobile-catalog-btn{
    display:flex;
    gap:10px;
    background:red;
    background: var(--orange);
    border-radius: 12px;
    padding: 7px 20px;
}

.header-nav a.header-nav-catalog svg,
.nav-mobile-catalog-btn svg{
    width: 24px;
    height: 24px;
    margin-top: 1px;
    transition: transform 0.3s ease;
}

/* Catalog dropdown menu */
.nav-catalog {
    width:887px;
    position: absolute;
    top: 100%;
    left: 0;
    padding: 24px;
    transform: translate(-20px, 5px);
    transition: all 0.3s ease;
    z-index: 100;
    border-radius:24px;
    background: rgba(12, 18, 29, 0.9);
    display:none;
}

.nav-catalog::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    height: 30px;
}

.nav-catalog-item:hover .nav-catalog{
    display:block;
}

.nav-catalog-inner{
    width:100%;
    display:flex;
    position:relative;
}

.nav-catalog-categories-col{
    width:350px;
    height:350px;
    background: rgba(12, 18, 29, 0.9);
    border-radius:24px;
    padding:16px;
}

.nav-catalog-title{
    font:bold 18px var(--font-title);
    line-height: 28px;
    color:#fff;
    padding-left:16px;
    margin-bottom:20px;
}

ul.nav-catalog-categories-list{
    width:100%;
    height:270px;
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction: column;
    gap:4px;
}

li.nav-catalog-category .nav-catalog-brands-col{
    display:none;
    position: absolute;
    left: 350px;
    width: 489px;
    height: 350px;
    overflow: hidden;
    padding: 16px;
    top: 0;
}

li.nav-catalog-category > a {
    font-size:14px;
    color:#fff;
    line-height: 43px;
    padding:0 16px;
    text-decoration: none;
    display:block;
    border-radius:12px;
}

li.nav-catalog-category.is-active > a{
    font-weight:bold;
    color:var(--orange);
    background: rgba(255, 255, 255, 0.1);
}

li.nav-catalog-category.is-active .nav-catalog-brands-col{
    display:block;
}

ul.nav-catalog-brands-list{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:4px;
    height:270px;
    width:100%;
}

ul.nav-catalog-brands-list li a{
    display:block;
    font-size: 14px;
    line-height: 41px;
    color:#fff;
    padding:0 16px;
}

ul.nav-catalog-brands-list li a:hover{
    color:var(--orange);
}

ul.nav-catalog-brands-list li.nav-catalog-brands-all a{
    color:var(--orange);
}

ul.nav-catalog-brands-list li.nav-catalog-brands-all a:hover{
    color:var(--orange-hover);
}

@media (max-width: 1519px) {  
    .nav-catalog {
        width:873px;
    }
    
    .li.nav-catalog-category .nav-catalog-brands-col{
        width: 475px;
    }
}

/* Mobile menu arrow rotation */
.header-nav-list a.open svg,
.header-mobile-controls a.open svg {
  transform: rotate(180deg);
}

/* header contacts */
.header-contacts {
  padding: 0 18px;
  justify-content: space-between;
  width: 100%;
  max-width: 397px;
}

.header-contacts-info {
    display: flex;
    gap: 18px;
    width: 100%;
    justify-content: center;
}

.header-contacts-info a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  padding: 10px 0;
  transition: all 0.3s ease-in-out;
}

.header-contacts-info a:hover{
    color:var(--orange);
}

.nav-mobile-catalog-dropdown,
.mobile-drawer{
    display:none;
}

/* --- АДАПТИВ --- */
@media (max-width: 1519px) {
    .header { padding: 30px 0 }
    .header-wrap { max-width: 1236px; margin:0 auto }
    .header-brand-area { width: 146px }
    .header-contacts { max-width: 201px }
    .header-contacts-info a[href^="mailto"] { display: none }
}

@media (max-width: 1279px) {
    .header { padding: 0 }
    .header-wrap { width:100%; max-width: unset }
    .header-nav, .header-contacts { display: none }

    .header-brand-area {
        width: 100%;
        height: 76px;
        border-radius: 0;
        justify-content: space-between;
        padding: 0 14px;
    }

    .header-mobile-controls {
        display: flex;
        align-items: center;
        gap: 18px;
    }
  
    /* Catalog button */
    .nav-mobile-catalog-btn{
        display:flex;
        gap:10px;
        background:red;
        background: var(--orange);
        border-radius: 12px;
        padding: 2px 20px 3px;
        font-size:14px;
        line-height:25px;
        color:#fff;
        border:0;
        outline:0;
        -webkit-appearance: none;
        -moz-appearance: none;
        -ms-appearance: none;
        appearance: none;
    }
    
    .nav-mobile-catalog-btn:hover{ color:#fff }

    .nav-mobile-catalog-btn svg{
        width: 24px;
        height: 24px;
        margin-top: 1px;
        transition: transform 0.3s ease;
    }
    
    .nav-mobile-catalog-btn.is-active svg{
        transform:rotate(180deg);
    }
    
    /* Dropdown catalog menu */
    .nav-mobile-catalog-dropdown{
        
        position: fixed;
        top: 76px;
        left: 0;
        right: 0;
        bottom: 0;
        
/*        position:absolute;
        top:100%;
        left:0;
        right:0;*/
        /*background:#fff;*/
        padding:24px 12px;
        border-radius:0 0 20px 20px;
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.35);
        /*display:none;*/
        
        z-index:900;
        display:block;
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0.4s;
        
    }
    
    .nav-mobile-catalog-dropdown.is-open{
        /*display:block;*/
        
        visibility: visible;
        pointer-events: auto;
    }
    
    .nav-mobile-catalog-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(12, 18, 29, 0);
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);
        transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
        /*will-change: background, backdrop-filter;*/
    }

    .nav-mobile-catalog-dropdown.is-open .nav-mobile-catalog-backdrop {
        background: rgba(12, 18, 29, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    
    .nav-mobile-catalog-inner {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: #fff;
        padding: 24px 12px;
        border-radius: 0 0 20px 20px;
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.35);
        
        max-height: calc(100vh - 76px);
        overflow-y: auto;
        
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        /*transition-delay: 0.1s;*/
        /*will-change: transform;*/
        
        transition-delay: 0.05s;
    }
    
    .nav-mobile-catalog-dropdown.is-open .nav-mobile-catalog-inner {
        opacity: 1;
        transform: translateY(0);
        /*transition-delay: 0.05s;*/
    }
    
    .nav-mobile-catalog-title{
        font:bold 18px var(--font-title);
        line-height: 28px;
        color:var(--black);
        margin-bottom:24px;
    }
    
    ul.nav-mobile-catalog-list{
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-direction:column;
        gap:12px;
    }
    
    ul.nav-mobile-catalog-list li a{
        display:flex;
        width:100%;
        background: #eff1fb;
        gap:12px;
        align-items: center;
        border-radius:20px;
        overflow:hidden;
        padding:10px;
    }
    
    .nav-mobile-catalog-img{
        flex:0 0 50px;
        height:50px;
        overflow:hidden;
    }
    
    .nav-mobile-catalog-img img{
        width:100%;
        height:100%;
        object-fit:contain;
        object-position: center;
        display:block;
    }
    
    ul.nav-mobile-catalog-list li a span:last-child {
        font: bold 14px var(--font-title);
        line-height: 22px;
    }
    
    /* Menu burger button */
    .nav-mobile-menu-btn {
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Mobile slideout menu */
    .mobile-drawer{
        position:fixed;
        inset:0;
        z-index:1010;
        /*display:none;*/
        
        display: block;
        
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0.4s;
    }
    
    .mobile-drawer.is-open{
        /*display:block;*/
        visibility: visible;
        pointer-events: auto;
    }
    
    .mobile-drawer-backdrop{
        position: absolute;
        /*position:fixed;*/
        inset:0;
        z-index:1020;
/*        background: rgba(12, 18, 29, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);*/
        
        background: rgba(12, 18, 29, 0);
        -webkit-backdrop-filter: blur(0px);
        backdrop-filter: blur(0px);

        transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
        /*will-change: background, backdrop-filter;*/
    }
    
    .mobile-drawer.is-open .mobile-drawer-backdrop {
        background: rgba(12, 18, 29, 0.5);
        -webkit-backdrop-filter: blur(4px);
        backdrop-filter: blur(4px);
    }
    
    .mobile-drawer-content{
        /*position:fixed;*/
        position: absolute;
        
        top:0;
        left:0;
        bottom:0;
        width:390px;
        border-radius: 0 36px 36px 0;
        box-shadow: 4px 4px 15px 0px rgba(0, 0, 0, 0.25);
        background: #f8f9ff;
        padding:56px 24px 25px;
        z-index:1030;
        display:flex;
        flex-direction: column;
        gap:22px;
        
        transform: translateX(-100%);
        transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        /*will-change: transform;*/
    }
    
    .mobile-drawer.is-open .mobile-drawer-content {
        transform: translateX(0);
        transition-delay: 0.05s; 
    }
    
    .mobile-drawer-header a{
        display:block;
        line-height:1;
        text-decoration:none;
        padding:0;
        margin:0;
    }
    
    .mobile-drawer .header-logo-img{
        width:150px;
        height:37px;
    }
    
    .mobile-drawer .header-logo-img svg{
        width:100%;
        height:100%;
        display:block;
    }
    
    .mobile-drawer-nav ul{
        list-style:none;
        margin:0;
        padding:0;
        display:flex;
        flex-direction: column;
    }
    
    .mobile-drawer-nav a{
        display:flex;
        line-height:26px;
        border-bottom:1px solid rgba(12, 18, 29, 0.2);
        align-items:center;
        justify-content: space-between;
        font-size:16px;
        color:var(--black);
        padding: 20px 0;
    }
    
    .mobile-drawer-nav ul li:last-child a{
        border:none;
    }
    
    .mobile-drawer-nav a svg{
        flex:0 0 26px;
        width:26px;
        height:26px;
        display:block;
    }
    
    .mobile-drawer-contacts{
        display:flex;
        flex-direction: column;
        gap:24px;
        padding:20px 0;
    }
    
    .mobile-drawer-contacts a{
        font-weight:bold;
        font-size:16px;
        line-height:26px;
        color:var(--black);
    }
    
    .mobile-drawer-copyright{
        font-size:12px;
        color: rgba(12, 18, 29, 0.65);
        margin-top:auto;
        text-align:center;
    }
    
    .mobile-drawer-close{
        /*position:fixed;*/
        position: absolute;
        
        top:36px;
        right:40px;
        width:75px;
        height:75px;
        z-index:1030;
        
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .mobile-drawer.is-open .mobile-drawer-close {
        opacity: 1;
        transition-delay: 0.2s;
    }
    
    .mobile-drawer-close button{
        width:75px;
        height:75px;
        border:0;
        outline:none;
        background:transparent;
        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        appearance:none;
        display:flex;
        justify-content: center;
        align-items: center;
        color:#fff;
    }
    
    .mobile-drawer-close button svg{
        width:38px;
        height:38px;
        display:block;
    }
    
}

@media (max-width: 767px) {
    .header-brand-area { height: 69px }
    .header-nav-list a, .header-mobile-controls a { font-size: 12px }
  
    /* Mobile menu */
    .nav-mobile-catalog-dropdown { top: 69px; }
    .nav-mobile-catalog-inner { max-height: calc(100vh - 69px); }
    
    
    .mobile-drawer-content{
        width:290px;
        padding:50px 24px 16px;
        gap:20px;
    }
    
    .mobile-drawer-contacts{
        display:flex;
        flex-direction: column;
        gap:18px;
        padding:16px 0;
    }
    
    .mobile-drawer-close{
        right:11px;
    }

}


/* ======== FOOTER ======== */
.footer {
    width: 100%;
    max-width: 1472px;
    padding: 50px 53px;
    border-radius: 24px;
    margin: 70px auto 0;
    background-color: var(--blue);
    color: #fff;
}

.footer-wrap {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.footer-logo {
    display: flex;
    justify-content: flex-start;
}

.footer-logo svg{
    width: 224px;
    height: 57px;
    display:block;
}

.footer-content {
    display: grid;
    grid-template-columns: 350px 300px 600px;
    gap: 39px;
    justify-content: space-between;
}

.footer-content .footer-column:last-child {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 39px;
}

.footer-content h3 a{
    font:bold 18px var(--font-title);
    line-height: 24px;
    color: var(--orange);
    margin-bottom: 36px;
    text-decoration:none;
}

.footer-content h3 a:hover{
    color:var(--orange-hover);
}

.footer-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.footer-content li {
    margin: 0;
}

.footer-content ul li a {
    font-size:16px;
    line-height: 26px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-content ul li a:hover {
    color: var(--orange);
}

.footer-bottom{
    display: flex;
    align-items: center;
    gap: 36px;
}

.footer-contact{
    display: flex;
    gap: 36px;
}

.footer-contact a{
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    text-decoration: none;
    padding: 10px 0;
    white-space: nowrap;
    transition: color 0.3s ease;
}

.footer-contact a:hover{
    color:var(--orange);
}

.footer-banner{
    display: flex;
    gap: 48px;
    align-items: center;
    margin-left: auto;
}

.footer-banner a {
    display: inline-block;
    transition: opacity 0.3s ease;
    text-decoration: none;
    padding: 0;
    line-height: 1;
    
    /* SAFARI FIX */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    will-change: opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.footer-banner a:hover {
    opacity: 0.8;
}

.footer-disclaimer{
    margin: 0;
}

.footer-disclaimer a{
    color:var(--orange);
}

.footer-disclaimer p{
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    opacity: 0.5;
    margin: 0 0 22px 0;
}

.footer-disclaimer p:last-child {
    margin: 0;
}

.footer-copyright{
    display:flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copyright span {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    opacity: 0.6;
}

.footer-copyright a {
    font-size: 16px;
    line-height: 26px;
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-copyright a:hover {
    color: var(--orange);
}

.footer-designby{
    padding: 0 0 50px;
    visibility: hidden;
}

.footer-designby a{
    display:none;
}

@media (max-width: 1519px) {
    .footer {
        margin: 60px auto 0;
        max-width: 1236px;
    }

    .footer-content {
        grid-template-columns: 350px 300px 1fr;
        gap:0;
    }
    
    .footer-content .footer-column:last-child {
        gap: 0;
    }
    
    .footer-banner{
        gap: 36px;
    }
    
    .footer-banner a{
        max-width: 170px;
    }
    
    .footer-banner svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .footer-copyright a,
    .footer-copyright span,
    .footer-disclaimer p {
        font-size: 14px;
        line-height: 25px;
    }
  
}

@media (max-width: 1279px) {
    .footer {
        padding: 50px 20px;
        margin: 0 20px;
        max-width: calc(100% - 40px);
    }

    .footer-wrap {
        gap: 42px;
    }

    .footer-logo svg {
        width: 158px;
        height: 40px;
    }
  
    .footer-content {
        grid-template-columns: 230px 180px 1fr;
        gap: 60px;
    }
    
    .footer-content .footer-column:last-child {
        gap: 24px;
        display: flex;
        flex-direction: column;
    }

    .footer-content h3 {
        margin-bottom: 0;
    }

    .footer-content h3 a {
        margin: 0;
        font-size: 18px;
        line-height: 28px;
    }

    .footer-content ul {
        margin-top: 24px;
        gap: 15px;
    }

    .footer-content ul li a {
        font-size: 14px;
        line-height: 25px;
    }
  
    .footer-contact a {
        padding: 0;
        font-size: 14px;
    }
  
    .footer-bottom {
        gap: 42px;
        flex-wrap:wrap;
        
        /*background:lightblue;*/
    }
    
    .footer-button{
        flex:0 0 180px;
        /*background:orange;*/
    }
  
    .footer-contact {
        flex: 1 1 auto;
        gap:57px;
        /*gap: 150px;*/
        /*justify-content: space-between;*/
        /*width: calc(100% - 222px);*/
        /*max-width: 860px;*/
        /*margin-left: auto;*/
        
        /*background:red;*/
    }
  
    .footer-banner {
        gap: 60px;
        margin-left:0;
        flex:1 1 100%;
        width:100%;
    }

}

@media (max-width: 767px) {
    .footer {
        padding: 36px 14px;
        margin: 0 14px;
        max-width: calc(100% - 28px);
    }

    .footer-logo svg {
        width: 110px;
        height: 27px;
    }

    .footer-wrap {
        gap: 38px;
    }
  
    .footer-content {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .footer-content h3 a {
        font-size: 16px;
        line-height: 22px;
    }

    .footer-content ul {
        margin-top: 12px;
        gap: 8px;
    }

    .footer-content ul li a br {
        display: none;
    }
    
    .footer-bottom {
        flex-direction: column;
        gap: 38px;
        align-items: stretch;
    }
    
    .footer-button {
        flex:none;
        order:2;
    }
  
    .footer-contact {
        justify-content: space-between;
        order:1;
    }

    .footer-banner {
        gap: 39px;
        justify-content: flex-end;
        /*justify-content: space-between;*/
        flex-direction: row-reverse;
        order:3;
    }
    
    .footer-copyright a,
    .footer-copyright span,
    .footer-disclaimer p {
        font-size: 14px;
        line-height: 20px;
    }

    .footer-copyright {
        flex-direction: column-reverse;
        gap: 16px;
        text-align: left;
        align-items: flex-start;
    }
  
} 

/* ======== BREADCRUMBS ======== */
.breadcrumbs{ margin: 0 0 44px }

@media (max-width:1519px) {
    .breadcrumbs{ margin: 0 0 34px }
}

@media (max-width: 1279px) {
    .breadcrumbs{ margin: 21px 0 38px }
}

@media (max-width: 767px) {
    .breadcrumbs{ margin: 19px 0 38px }
}

.breadcrumbs ol{
    list-style:none;
    padding:0;
    margin:0;
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
}

.breadcrumbs ol li{
    vertical-align: middle;
    padding:0;
    margin:0;
}

.breadcrumbs ol li a{
    text-decoration: none;
}

.breadcrumbs ol li a span {
    font-size: 12px;
    line-height: 19px;
    color: rgba(12, 18, 29, 0.35);
    transition: color 0.2s ease;
}

.breadcrumbs ol li a:hover span {
    color: var(--orange);
}

.breadcrumbs ol li:not(:last-child)::after {
    content: '/';
    display: inline-block;
    font-size: 12px;
    line-height: 19px;
    color: rgba(12, 18, 29, 0.65);
    padding: 0 4px 0 2px;
    pointer-events: none;
    speak: none;
}

.breadcrumbs ol li span[aria-current="page"] {
    font-size: 12px;
    line-height: 19px;
    color: rgba(12, 18, 29, 0.65);
    cursor: default;
}




h1.page-title{
    font: bold 45px var(--font-title);
    line-height: 55px;
    margin:0 0 36px;
    max-width:766px;
    word-wrap: break-word;
}

@media (max-width: 1279px) {
    h1.page-title {
        font-size:35px;
        line-height:50px;
    }
}

@media (max-width: 767px) {
    h1.page-title {
        font-size:22px;
        line-height:32px;
        margin-bottom:24px;
    }
}



/* ======== ALL PAGES CONTAINER ======== */
.main-content{
    padding-top:130px;
}

@media (max-width: 1279px) {
    .main-content{
        padding-top: 76px;
        overflow-x:hidden;
    }
}


/* ======== HOMEPAGE ======== */

/* HOMEPAGE BANNER */
.hp-banner {
    position: relative;
    padding: 45px 0 80px 0;
    display:block;
    min-height: 868px;
}

.hp-banner-content {
    position: relative;
    z-index: 2;
    max-width: 820px;
    padding:0 0 0 20px;
}

.hp-banner-content h1{
    color:var(--black);
    font-family: var(--font-title);
    font-size: 55px;
    line-height: 70px;
    font-weight: 700;
    margin-bottom: 36px;
}

.hp-banner-content p{
    color:var(--black);
    font-family: var(--font);
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    max-width: 570px;
}

.hp-banner-services{
    margin-top: 55px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 365px;
}

.hp-banner-services h3{
    color: #f06500;
    font-family: var(--font-title);
    font-size: 18px;
    line-height: 28px;
    font-weight: 700;
}

.hp-banner-services-list{
    display:flex;
    flex-direction: column;
    gap:16px;
}

.hp-banner-services-list a{
    background: #f8f9ff;
    border-radius: 14px;
    border: 1px solid #252B3B;
    padding: 10px 16px 10px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    height: 50px;
    opacity: 0.95;
    transition: border-color 0.3s ease, color 0.3s ease;
}

.hp-banner-services-list a:hover{
    border-color:var(--orange);
}

.hp-banner-services-list a:hover svg{
    color:var(--black);
}

.hp-banner-service-title {
    
    font:normal 14px var(--font);
    
    color:var(--black);
    line-height: 28px;
    
    letter-spacing: 0;
    
    height: 28px;
    align-items: center;
    flex: 1 1 auto;
}

.hp-banner-service-icon {
    flex: 0 0 28px;
    height: 28px;
    background: #252b3b;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hp-banner-service-icon svg{
    max-width:18px;
    max-height:18px;
    display:block;
}

.hp-banner-service-arrow {
    flex:0 0 20px;
    width:20px;
    height: 27px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.hp-banner-service-arrow svg{
    width:20px;
    height:20px;
    display:block;
    color: rgba(12, 18, 29, 0.8) !important;
}

.hp-banner-image {
  position: absolute;
  top: -50px;
  right: 0;
  z-index: 1;
  width: 980px;
  max-width: none;
  pointer-events: none;
}


@media (max-width: 1519px) {
    
    .hp-banner {
        min-height: 680px;
    }

    .hp-banner-image {
        top: -30px;
        right: 25px;
        width: 740px;
        max-width: none;
    }
    
    .hp-banner-content h1{
        font-size: 45px;
        line-height: 55px;
        margin-bottom:18px;
    }
    
    .hp-banner-content p br{
        display:none;
    }
    
    .hp-banner-services{
        gap: 18px;
        max-width: 390px;
    }

    .hp-banner-services-list a{
        padding: 10px 14px 10px 12px;
    }

}

@media (max-width: 1279px) {
    .hp-banner {
        padding: 36px 0 40px 0;
        min-height: 642px;
    }
    
    .hp-banner-content{
        max-width: 560px;
    }
    
    .hp-banner-content h1{
        font-size: 35px;
        line-height: 40px;
        margin-bottom:24px;
    }
}

@media (max-width: 767px) {
    
    .hp-banner {
        padding: 24px 0 36px 0;
        min-height: unset;
    }
    
    .hp-banner-content{
        max-width:unset;
        padding:0;
    }
    
    .hp-banner-content h1{
        margin-bottom: 8px;
        font-size: 28px;
        line-height: 37px;
    }
    
    .homepage-blog-section .hp-section-header{
        margin-bottom:36px;
    }
    
    .homepage-blog-section .hp-section-header .btn{
        display:inline-block;
        margin-top:0;
    }
    
    .homepage-blog-section .article-list .article-card:nth-child(n+4),
    .homepage-blog-section .hp-section-bottom,
    .hp-banner-services,
    .hp-banner-image{
        display:none;
    }

}



@media (min-width: 768px) and (max-width: 1129px) {
    .hp-banner-image {
        top: -54px;
        left: 390px;
        width: 740px;
        max-width: none;
    }
}

@media (min-width: 1130px) and (max-width: 1279px) {
    .hp-banner-image {
        top: -54px;
        right: 0;
        width: 740px;
        max-width: none;
    }
}

/* HOMEPAGE BANNER SLIDER SECTION */
.hp-banner-slider{
    display:none;
}

@media (max-width: 767px) {
    .hp-banner-slider{
        display:block;
    }
}

.hp-banner-card{
    width:100%;
    max-width:767px;
    position:relative;
    overflow: hidden;
    min-height: auto;
    aspect-ratio: 362 / 285;
    border-radius:16px;
    display:block;
}

.hp-banner-card-img{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
}

.hp-banner-card-content{
    padding:16px;
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    display:flex;
    width:100%;
    gap:16px;
}

.hp-banner-card-content h2{
    flex: 1 1 auto;
    font:bold 16px var(--font-title);
    line-height:25px;
    color:#fff;
}

.hp-banner-card-btn{
    flex: 0 0 40px;
    width:40px;
    height:40px;
    border-radius:16px;
    display:flex;
    justify-content: center;
    align-items: center;
    border:1px solid #fff;
    color: #fff;
}

.hp-banner-card-btn svg{
    width:24px;
    height:24px;
    display:block;
}


/* icon arrow right default color #0C121D */


/* HOMEPAGE GENERAL SECTION BLOCK */
.hp-section{
/*    margin-bottom:70px;*/
    margin:140px 0;
}

.hp-section h2{
    /*font-family: var(--font-title);*/
    /*font-weight: 700;*/
    font-size: 28px;
    line-height: 37px;
    color: var(--black);
}

.hp-section > h2 {
    margin: 0 0 45px 0;
}

.hp-section-header h2 {
    margin: 0; 
}

.hp-section-header{
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 36px;
}

.hp-section > h2 + .hp-section-header {
    margin-top: -29px; 
    align-items: flex-end;
}

.hp-section-header p{
    font-size: 16px;
    line-height: 26px;
    max-width: 900px;
    margin:0;
}

.hp-section-bottom{
    display:none;
}

@media (max-width: 1519px) {
    .hp-section{ margin:120px 0 }
    .hp-section > h2 { margin: 0 0 36px 0 }
    .hp-section > h2 + .hp-section-header { margin-top: -24px }
}

@media (max-width:1279px) {
    .hp-section{ margin:90px 0 }
    .hp-section-header p br{ display:none }
    
    .hp-section-header{
        gap:32px;
    }
}

@media (max-width: 767px) {
    .hp-section{ margin:70px 0 }
    .hp-section-header .btn{ display:none }
    .hp-section-bottom{ display:block; margin-top:30px; padding-bottom:12px }
    .hp-section-bottom .btn{ width:100%; text-align:center }
    .hp-section > h2 { margin: 0 0 24px }
    .hp-section > h2 + .hp-section-header { margin-top: -16px }
    .hp-section h2 { font-size: 22px; line-height: 32px }
    .hp-section-header{ margin-bottom: 24px }
    .hp-section-header p{ font-size: 14px; line-height: 25px }
}

/* HOMEPAGE SUPPLY SECTION (CATALOG CATEGORIES) */
.hp-supply-wrap{
    display:flex;
    gap:24px;
}

.hp-supply-card{
    display:flex;
    flex: 1 1 0%;
    min-width: 0;
    position:relative;
    aspect-ratio: 608 / 290;
    min-height:auto;
    overflow:hidden;
    border-radius:16px;
    text-decoration:none;
    transition: transform 0.3s ease;
}

.splide__slide .hp-supply-card{
    flex:none;
    width:100%;
}

.hp-supply-splide-track{
    padding-top:6px;
}

.hp-supply-card:hover{
    transform: translateY(-6px);
}

.hp-supply-card img{
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    z-index:1;
    transition: all .3s ease-in-out;
}

.hp-supply-card:hover img{
    -webkit-filter: grayscale(0%);
    filter: grayscale(0%);
}

.hp-supply-card h3{
    position:absolute;
    left:0;
    bottom:0;
    right:0;
    padding:16px;
    font: bold 22px var(--font-title);
    line-height: 32px;
    vertical-align: bottom;
    color:#fff;
    z-index:3;

}

.hp-supply-card-overlay{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55.39%, rgba(0, 0, 0, 1) 100%);
    z-index: 2;
}

@media (max-width: 1279px) {
    .hp-supply-card h3{ font-size:18px; line-height:28px }
}

@media (max-width: 767px) {
    .hp-supply-wrap{ flex-direction: column }
    .hp-supply-card h3{ font-size:16px; line-height:25px }
}

/* HOMEPAGE SERVICES */
.hp-services{
    display:flex;
    flex-wrap: wrap;
    gap:22px;
}

.hp-service{
    position:relative;
    overflow:hidden;
    border-radius:24px;
}

.hp-services .hp-service:nth-child(1){
    width:628px;
    height:250px;
}

.hp-services .hp-service:nth-child(2){
    width:820px;
    height:250px;
}

.hp-services .hp-service:nth-child(3){
    width:1470px;
    height:218px;
}

.hp-service-img{
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:1;
    overflow:hidden;
}

.hp-service-img:after{
    content:'';
    display:block;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:2;
}

.hp-services .hp-service:nth-child(1) .hp-service-img:after{
    background: rgba(12, 18, 29, 0.72);
}

.hp-services .hp-service:nth-child(2) .hp-service-img:after{
    background: rgba(12, 18, 29, 0.5);
}

.hp-services .hp-service:nth-child(3) .hp-service-img:after{
    background: rgba(12, 18, 29, 0.75);
}

.hp-services .hp-service:nth-child(1) .hp-service-img img{
    opacity:0.83;
}

.hp-services .hp-service:nth-child(2) .hp-service-img img{
    opacity:0.9;
}

.hp-services .hp-service:nth-child(3) .hp-service-img img{
    opacity:0.93;
}

.hp-service-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position: center;
}

.hp-service-content{
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content: space-between;
}

.hp-service-info{
    position:relative;
    z-index:3;
    padding:28px 22px 0 22px;
}

.hp-service-info h3{
    font: bold 22px var(--font-title);
    line-height: 32px;
    color:#fff;
}

.hp-service-info p{
    font-size:16px;
    line-height: 26px;
    color:#fff;
}

.hp-services .hp-service:nth-child(1) p,
.hp-services .hp-service:nth-child(2) p{
    max-width:600px;
}

.hp-services .hp-service:nth-child(3) p{
    max-width:800px;
}

.hp-service-footer{
    position: relative;
    z-index:3;
    display:flex;
    justify-content:space-between;
    padding:8px 22px 24px;
}

.hp-service-icon{
    line-height:44px;
    display:flex;
    gap:18px;
}

.hp-service .btn.btn-medium{
    padding: 7px 25px;
}
    

@media (max-width: 1519px) {
    
    .hp-services .hp-service:nth-child(1){
        width:580px;
    }

    .hp-services .hp-service:nth-child(2){
        width:636px;
    }

    .hp-services .hp-service:nth-child(3){
        width:1240px;
        height:200px;
    }
    
    .hp-service-info p{
        font-size:14px;
        line-height: 25px;
    }
    
    .hp-services .hp-service:nth-child(1) p,
    .hp-services .hp-service:nth-child(2) p{
        max-width:480px;
    }
    
    .hp-services .hp-service:nth-child(3) p{
        max-width:750px;
    }
    
}

@media (max-width: 1279px) {
    
    .hp-services{
        gap:14px;
    }
        
    .hp-services .hp-service:nth-child(1){
        flex: 344 1 0%;
        width:auto;
    }
    
    .hp-services .hp-service:nth-child(2){
        flex: 370 1 0%;
        width:auto;
    }
    
    .hp-services .hp-service:nth-child(3){
        width:100%;
    }
    
    .hp-service-footer{
        justify-content: flex-end;
    }
    
    .hp-service-icon{
        display:none;
    }
    
    .hp-service .btn.btn-medium{
        padding: 4px 25px;
        line-height: 25px;
    }
    
}

@media (max-width: 767px) {
    
    .hp-services {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain; 
        scroll-snap-type: x mandatory;
        gap: 16px;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        padding-bottom: 10px;
    }
    
    .hp-services::-webkit-scrollbar {
        display: none;
    }
    
    .hp-services .hp-service:nth-child(1),
    .hp-services .hp-service:nth-child(2),
    .hp-services .hp-service:nth-child(3){
        flex: 0 0 300px;
        height:180px;
        scroll-snap-align: center;
    }
    
    .hp-service-info{
        position:relative;
        z-index:3;
        padding:16px 40px 0 18px;
    }
    
    .hp-service-info h3{
        font-size: 18px;
        line-height: 28px;
    }
    
    .hp-service-info p {
        display: none; 
    }
    
    .hp-service-footer {
        padding:0 31px 31px 0;
    }
    
    .hp-service-button{
        height:44px;
        line-height:1;
    }
    
    .hp-service .btn.btn-medium{
        background-color:transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M19.3762 15.0007C19.3772 15.1653 19.3456 15.3283 19.2834 15.4806C19.2212 15.6329 19.1296 15.7714 19.0137 15.8882L14.0137 20.8882C13.8972 21.0048 13.7588 21.0972 13.6065 21.1603C13.4542 21.2234 13.291 21.2559 13.1262 21.2559C12.9614 21.2559 12.7982 21.2234 12.6459 21.1603C12.4936 21.0972 12.3553 21.0048 12.2387 20.8882C12.1222 20.7717 12.0297 20.6333 11.9666 20.4811C11.9036 20.3288 11.8711 20.1656 11.8711 20.0007C11.8711 19.8359 11.9036 19.6727 11.9666 19.5204C12.0297 19.3682 12.1222 19.2298 12.2387 19.1132L16.3762 15.0007L12.4012 10.8757C12.2733 10.7608 12.1706 10.6206 12.0994 10.4641C12.0281 10.3076 11.9899 10.1381 11.9872 9.96612C11.9845 9.79417 12.0173 9.62352 12.0835 9.46482C12.1498 9.30613 12.248 9.16281 12.3722 9.04383C12.4963 8.92485 12.6437 8.83276 12.8051 8.77333C12.9664 8.7139 13.1383 8.68841 13.31 8.69844C13.4817 8.70848 13.6494 8.75383 13.8028 8.83165C13.9561 8.90948 14.0918 9.01811 14.2012 9.15074L19.0262 14.1507C19.2466 14.3793 19.3717 14.6832 19.3762 15.0007Z' fill='white'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        
        width:44px;
        height:44px;
        padding:0;
    }
    
    .hp-service .btn.btn-medium:hover{
        background-color: var(--orange);
    }
    
    .hp-service .btn.btn-medium span,
    .hp-service .btn.btn-medium svg{
        display:none;
    }
    
}

/* HOMEPAGE CATALOG SECTION */
.hp-catalog-arrow-prev,
.hp-catalog-arrow-next{
    display:none;
}

@media (min-width: 1280px) {
    .home-catalog-section{ position:relative }

    .hp-catalog-arrow-prev,
    .hp-catalog-arrow-next{
        width:24px;
        position:absolute;
        top:85px;
        bottom:0;
        overflow:hidden;
        display:block;
    }

    .hp-catalog-arrow-prev{ left:-24px }
    .hp-catalog-arrow-next{ right:-24px }

    .hp-catalog-arrow{
        width:24px;
        height:100%;
        background:transparent;

        padding:0;
        margin:0;
        border:none;
        outline:none;

        cursor:pointer;

        -webkit-appearance:none;
        -moz-appearance:none;
        -ms-appearance:none;
        appearance:none;

        display:flex;
        align-items:center;
        justify-content:center;
    }
}




/* ============== ABOUT PAGE ============== */
.about-section{
    display:flex;
    justify-content:space-between;
    gap:24px;
    margin-top:36px;
}

.about-content{
    flex:848 1 0%;
    border-radius:24px;
    background:#eff1fb;
    padding:24px;
}

.about-logo{
    margin-bottom:24px;
}

.about-logo svg{
    width: 249px;
    height: 43px;
    display:block;
}

.about-text p{
    font-size: 16px;
    line-height: 26px;
    color:var(--black);
    margin-bottom:24px;
}

.about-text p:last-child{
    margin-bottom:0;
}

.about-button{
    margin-top:36px;
}

.about-quote{
    flex:598 1 0%;
    border-radius:24px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    position:relative;
    overflow:hidden;
    padding:24px 10px;
}

.about-image{
    position:absolute;
    inset: 0;
    z-index:1;
    overflow:hidden;
}

.about-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.about-quote-content{
    position: relative;
    z-index:2;
    padding:24px 20px;
    background: rgba(244, 244, 244, 0.01);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border-radius: 28px;
    box-shadow: 0px 5px 8px 0px rgba(10, 9, 20, 0.05);
}

.about-quote-content::before {
    content: '';
    position: absolute;
    inset: 0; /* Stretch it to the entire block */
    border-radius: inherit; /* Follows parents rounding */
    padding: 1.4px; /* Border width */
    background: linear-gradient(173.83deg, rgba(255, 255, 255, 0.4) 4.82%, rgba(255, 255, 255, 0.0001) 38.08%, rgba(255, 255, 255, 0.0001) 56.68%, rgba(255, 255, 255, 0.1) 95.1%); /* Glass gradient */
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); /* Leave only borders */
    -webkit-mask-composite: xor; /* Leave only borders */
    mask-composite: exclude; /* Leave only borders */
    pointer-events: none; /* Not to cover links in the parent */
    z-index: 1; /* Border over the background, but under the text */
}

.about-quote-content h5{
    font:bold 14px var(--font-title);
    line-height: 22px;
    color:var(--orange);
    margin-bottom:12px;
    position: relative;
    z-index: 2;
}

.about-quote-content p{
    font-size: 14px;
    line-height: 25px;
    color:#fff;
    margin:0;
    position: relative;
    z-index: 2;
}

.about-partners{
    display:flex;
    flex-wrap:wrap;
    gap:22px;
}

.about-partner-img{
    flex: 0 0 351px;
    height:111px;
}

.about-partner-img img{
    object-fit:scale-down;
    object-position: center;
    display:block;
    width:100%;
    height:100%;
}

.about-map{
    width:100%;
}

.about-map-big{
    width:100%;
    display:block;
}

.about-map-small{
    width:100%;
    display:none;
}

@media (max-width: 1519px) {
    .about-partner-img{ flex:0 0 293px }    
}

@media (max-width:1279px) {
    .about-text{ margin-bottom:0 }
    .about-quote{ display:none }
    .about-partners{ gap:49px }
    .about-partner-img{ flex: 0 0 calc((100% - 48px) / 3) }
    .about-partner-img:nth-child(n+7) { display:none }
    .about-map-big{ display:none }
    .about-map-small{ display:block }
}

@media (max-width:767px) {
    .about-section{
        margin-top:24px;
    }
    
    .about-logo{
        display:none;
    }
    
    .about-partners {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain; 
        scroll-snap-type: x mandatory;
        gap: 36px;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        padding-bottom: 10px;
    }
    
    .about-partners::-webkit-scrollbar {
        display: none;
    }
    
    .about-partner-img {
        flex: 0 0 130px; 
        height: 75px;
        scroll-snap-align: center;
    }
    
    .about-partner-img:nth-child(n+7) {
        display: block; 
    }
    
}


/* ============== BLOG STYLES ============== */
.articles-section{
    margin-top:0;
}

.article-list{
    display:flex;
    flex-wrap:wrap;
    gap:24px;
}

.article-card{
    flex:0 0 474px;
    display:flex;
    flex-direction:column;
}

.article-card-link{
    display:flex;
    flex-direction:column;
    flex-grow: 1;
    gap:18px;
    text-decoration: none;
}

.article-card-image{
    display:block;
    width:100%;
    height:240px;
    overflow:hidden;
    border-radius:24px;
    background: #f8f9ff;
}

.article-card-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.article-card-link h3{
    padding:8px 12px;
    margin:0;
    font:normal 16px var(--font);
    line-height: 26px;
    color: var(--black);
    transition: color 0.3s ease;
}

.article-card-link:hover h3{
    color:var(--orange);
}

.article-card-link:hover .article-card-image img {
    transform: scale(1.04);
}

.article-card-category{
    padding:8px 12px;
    margin-top: auto;
}

.article-card-category a{
    color:var(--orange);
    font-size:12px;
    line-height:19px;
    transition: opacity 0.3s ease;
}

.article-card-category a:hover {
    opacity: 0.7;
}

.article-categories{
    display:flex;
    gap:8px;
    margin-bottom:56px;
}

.article-categories .btn{
    padding:4px 20px;
}

.article-more{
    width:100%;
    display:flex;
    align-items:center;
    justify-content: space-around;
    /*margin-bottom:64px;*/
    margin-top:50px;
}

.article-more button{
    /*background:red;*/
    padding: 4px 50px;
    line-height: 24px;
    gap: 4px;
    color:var(--orange);
    opacity:1;
    transition:opacity 0.3s ease-in-out;
}

.article-more button svg{
    color:var(--orange);
    opacity:1;
    transition:opacity 0.3s ease-in-out;
}

.article-more button:hover,
.article-more button:hover svg{
    opacity:0.8;
}

.article-fade-in {
    opacity: 0;
    animation: articleFadeUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes articleFadeUp {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1519px) {
    .article-list{
        gap:20px;
    }
    
    .article-card{
        flex:0 0 400px;
    }
}

@media (max-width:1279px) {
    .article-list.article-list-section .article-card:nth-child(n+3){
        display:none;
    }
}

@media (min-width: 768px) and (max-width:1279px) {
    .article-list{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    
    .article-card{
        flex: none; 
        width: 100%;
    }
}

@media (max-width: 767px) {
    .article-list{
        flex-direction: column;
        gap:36px;
    }
    
    .article-card{
        flex: 1 1 100%;
    }
    
    .article-card-category{
        padding:2px 12px;
    }
}

/* Article page */
.article-page{
    width:100%;
    display:flex;
    gap:64px;
    margin-bottom:64px;    
}

.article-page-content{
    flex: 1 1 auto;
}

.article-page-content h1.page-title{
    max-width:none;
    margin-top:0;
}

.article-page-date{
    font-size:12px;
    line-height: 19px;
    color: rgba(12, 18, 29, 0.65);
    margin-bottom:36px;
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    justify-content: space-between;
    align-items:center;
}

.article-page-sidebar {
    flex: 0 0 350px;
    height: fit-content;
}

.article-page-sidebar h5{
    font: normal 12px var(--font-title);
    line-height: 16px;
    color: rgba(12, 18, 29, 0.65);
    margin-bottom:16px;
}

.article-page-list{
    display:flex;
    flex-direction:column;
    gap:24px;
}


.article-page-list .article-card{
    flex: 0 0 auto;
}

.article-page-list .article-card-category{
    margin-top:0;
}

.article-page-list .article-card-image{
    height: 155px;
}

@media (max-width:1519px) {
    .article-page{ gap: 48px }
}

@media (max-width: 1279px) {
    .article-page-sidebar{ display:none }
}

.article-page-text .banner{
    margin:24px 0;
}

.article-page-text p,
.article-page-text ul,
.article-page-text ol{
    font-size:16px;
    line-height:26px;
    color:var(--black);
    margin-bottom:20px;
    text-align:justify;
}

.article-page-text h2{
    font-size: 18px;
    line-height: 28px;
    color:var(--black);
    margin-bottom:16px;
}

.article-page-text ul{
    list-style-type:circle;
}

.article-page-text ol{
    list-style: identifier;
    
}

.article-page-text ul,
.article-page-text ol{
    display:flex;
    flex-direction:column;
    gap:12px;
    list-style-position: outside;
    padding-left:32px;
}

.article-page-text blockquote{
    display:flex;
    flex-direction:column;
    gap:15px;
    padding:24px 16px;
    background: #eff1fb;
    font-size:16px;
    line-height:26px;
    color:var(--black);
    margin-bottom:20px;
    border-radius:24px;
}

/* SEARCHBAR */
.searchbar{
    width:100%;
    /*display:flex;*/
    margin-bottom:48px;
    position:relative;
}

.searchbar form{
    width:100%;
    display:flex;
}

.searchbar-input{
    width:100%;
    display:flex;
    align-items:center;
    background:transparent;
    
    border-radius:12px;
    overflow:hidden;
    
    height:40px;
    
    padding:0 10px;
    
    border: 1px solid rgba(12, 18, 29, 0.2);
    
    transition: border-color 0.3s ease-in-out;
}

.searchbar-input:focus-within {
    border-color: var(--orange);
}

.searchbar-input svg{
    width:24px;
    height:24px;
    display:block;
    /*background:red;*/
}

.searchbar-input input{
    /*background:lightblue;*/
    border-radius:0;
    border:none;
    outline:none;
    height:38px;
    padding-left:4px;
    /*font-size:20px !important;*/
}

.searchbar-clear{
    padding:0;
    margin:0;
    display:block;
    width:24px;
    height:24px;
    
    border:none;
    outline:none;
    
    cursor:pointer;
    
    background:transparent;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

.searchbar-input input:not(:placeholder-shown) ~ .searchbar-clear {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.searchbar-clear svg{
    color:var(--black);
    opacity:0.35;
    transition: color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.searchbar-clear:hover svg{
    color:var(--orange);
    opacity:1;
}

.searchbar .search-results{
    display:flex;
    flex-direction: column;
    gap:15px;
    padding:20px 24px;
    border-radius:24px;
    background: rgba(12, 18, 29, 0.95);
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.05);
    
    position:absolute;
    left:0;
    width:850px;
    top:calc(100% + 5px);
    
    z-index:90;
}

.article-search-result{
    position:relative;
}

.article-sr-wrap{
    display:flex;
    gap:22px;
    align-items:center;
    
    padding:10px;
    border-radius:12px;
    
    transition:background 0.3s ease-in-out;
}

.article-search-result:hover .article-sr-wrap{
    background: rgba(190, 213, 255, 0.18);
}

.article-sr-image{
    flex:0 0 74px;
    width:74px;
    height:74px;
    overflow:hidden;
    
    border-radius:18px;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.article-sr-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position: center;
}

.article-sr-info{
    padding-bottom:25px;
}

.article-sr-info h3{
    font-size: 18px;
    line-height: 28px;
    color:#fff;
    margin:0;
    padding:0;
}

.article-sr-info p{
    font-size: 14px;
    line-height: 25px;
    color: rgba(255, 255, 255, 0.5);
    margin:0;
    padding:0;
    max-height:50px;
    overflow:hidden;
}

.article-sr-category{
    font-size: 14px;
    line-height: 25px;
    color:var(--orange);
    text-decoration:none;
    position:absolute;
    bottom:10px;
    left:106px;
    opacity:1;
    transition: opacity 0.3s ease-in-out;
}

.article-sr-category:hover{
    opacity: 0.85;
}

@media (max-width:1279px) {
    .searchbar-input{ height:35px }
    .searchbar-input input{ height:33px }
    .searchbar .search-results{ gap:8px; padding:12px; border-radius:16px; width:450px }
    .article-sr-wrap{ gap:13px; padding:8px }
    .article-sr-image{ flex:0 0 54px; width:54px; height:54px; border-radius:14px }
    .article-sr-info{ padding-bottom:0 }
    .article-sr-info h3{ font-size: 12px; line-height: 21px }
    .article-sr-info p{ display:none }
    .article-sr-category { display:none }
}

@media (max-width: 767px) {
    .searchbar .search-results{ border-radius:24px; width:100%; max-width:450px }
}




/* =========== INFORMATION PAGE STYLES ============ */
.page-promo{
    margin: 0 auto 170px;
    position: relative;
    display: grid;
    grid-template-columns: 766px 1fr;
    gap: 30px;
}

.page-promo-content{
    
}

.page-promo-content p{
    color: var(--black);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 20px;
}

.page-promo-text{
    margin-bottom:40px;
}

.page-promo-text p:last-child{
    margin-bottom:0;
}

.page-promo-image{
    position: relative;
    align-items: center;
    justify-items: center;
    display: flex;
}

.page-promo-image img{
    object-fit: contain;
    object-position: center;
    display: block;
    width: 100%;
    height: 100%;
    inset: 0;
    position: absolute;
}

@media screen and (max-width: 1519px) {
    
    .page-promo {
        grid-template-columns: 650px 1fr;
        gap: 20px;
        margin: 0 auto 130px;
    }
      
    .page-promo-text{
        margin-bottom:36px;
    }
    
}

@media screen and (max-width: 1279px) {
    .page-promo {
        display:flex;
        flex-direction: column;
        gap: 0;
        margin: 0 auto 90px;
    }
    
    .page-promo-content {
        display: contents;
    }
    
    .page-promo-content h1{
        order:1;
        max-width:none;
        margin-bottom:32px;
    }
    
    .page-promo-image{
        display:flex;
        order:2;
        justify-content: center;
        height:498px;
        margin-bottom:22px;
    }
    
    .page-promo-image img{
        max-width:728px;
        position:relative;
        inset:unset;
    }
    
    .page-promo-text{
        order:3;
        margin-bottom:30px;
    }
    
    .page-promo-content button{
        order:4;
        width:100%;
    }
  
}

@media screen and (max-width: 767px) {
    
    .page-promo {
        margin: 0 auto 70px;
    }
    
    .page-promo-image{
        margin-bottom:24px;
        height:245px;
    }
    
    .page-promo-image img{
        max-width:100%;
    }
}


/* Steps section */
.page-steps{
    display: grid;
    grid-template-columns: 1fr 480px;
    gap: 24px;
}

.page-steps-content{
    background: #eff1fb;
    border-radius: 24px;
    padding: 10px 35px 10px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.page-step{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items:center;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(37, 43, 59, 0.1);
}

.page-steps-content .page-step:last-child{
    border-bottom:none;
}

.page-step-icon{
    background: rgba(12, 18, 29, 0.8);
    border-radius: 12px;
    width: 45px;
    height: 45px;
    flex: 0 0 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.page-step-icon svg{
    width:18px;
    height:18px;
    display:block;
}

.page-step-info{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.page-step-info h3{
    font:bold 16px var(--font-title);
    line-height: 25px;
    color: rgba(12, 18, 29, 0.8);
}

.page-step-info p{
    font-size: 14px;
    line-height: 25px;
    color: rgba(12, 18, 29, 0.35);
}

.page-steps-form{
    background: #252b3b;
    border-radius: 24px;
    width: 100%;
    height: 100%;
    padding:32px 24px;
    display:flex;
    flex-direction: column;
    gap:32px;
    align-items:center;
}

.page-steps-form .page-steps-logo{
    width: 180px;
    height: 46px;
    display:block;
}

.page-steps-form h4{
    font:bold 18px var(--font-title);
    line-height: 28px;
    color:#fff;
    max-width: 296px;
    text-align:center;
}

.page-steps-form img{
    max-width:100%;
    margin:auto 0;
}

.page-steps-form button{
    margin-top:auto;
}

@media screen and (max-width: 1519px) {
    
    .page-steps{
        grid-template-columns: 1fr 416px;
    }
    
}

@media screen and (max-width: 1279px) {
    
    .page-steps{
        display: block;
    }
    
    .page-steps-content{
        background: transparent;
        border-radius: 0;
        gap: 16px;
        padding:0;
    }

    
    .page-step{
        gap: 18px;
        padding: 15px 16px 15px 8px;
        background: #eff1fb;
        border-radius: 24px;
        border:none;
    }
    
    .page-step-icon{
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
    }
    
    .page-step-info h3{
        font:normal 16px var(--font); 
        line-height: 26px;
    }
    
    .page-step-info p{
        display:none;
    }
    
    .page-steps-form{
        display:none;
    }
    
}

@media screen and (max-width: 767px) {
    
    .page-step-info h3{
        font-size:14px; 
        line-height: 25px;
    }
    
}

/* CONDITIONS SECTION */
.page-conditions{
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
}

.page-condition{
    border-radius: 24px;
    border: 1px solid #f06500;
    padding: 24px;
    gap: 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    min-width: 348px;
    position: relative;
}

.page-condition-header{
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.page-condition-img {
    flex-shrink: 0;
    width: 70px;
    height: 70px;
}

.page-condition h3{
    font:bold 18px var(--font-title);
    line-height: 28px;
    color: var(--black);
}

.page-condition p{
    color: var(--black);
    font-size: 16px;
    line-height: 26px;
}

.page-condition:nth-child(1) {flex: 0 0 600px}
.page-condition:nth-child(2) {flex: 0 0 450px}
.page-condition:nth-child(3) {flex: 0 0 372px}
.page-condition:nth-child(4) {flex: 0 0 310px}
.page-condition:nth-child(5) {flex: 0 0 544px}
.page-condition:nth-child(6) {flex: 0 0 530px}

@media (max-width: 1519px) {
    
    .page-conditions {gap: 21px}
    
    .page-condition{min-width: auto}
    
    .page-condition:nth-child(1) {flex: 0 0 500px}
    .page-condition:nth-child(2) {flex: 0 0 366px}
    .page-condition:nth-child(3) {flex: 0 0 332px}
    .page-condition:nth-child(4) {flex: 0 0 295px}
    .page-condition:nth-child(5) {flex: 0 0 423px}
    .page-condition:nth-child(6) {flex: 0 0 480px}
    
}

@media (max-width:1279px) {
    
    .page-conditions {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain; 
        scroll-snap-type: x mandatory;
        gap: 14px;
        scrollbar-width: none; 
        -ms-overflow-style: none; 
        padding-bottom: 10px;
    }
    
    .page-conditions::-webkit-scrollbar {
        display: none;
    }
    
    .page-condition:nth-child(1), 
    .page-condition:nth-child(2), 
    .page-condition:nth-child(3), 
    .page-condition:nth-child(4), 
    .page-condition:nth-child(5), 
    .page-condition:nth-child(6) {
        flex: 0 0 350px;
        scroll-snap-align: center;
    }
    
    .page-condition-header{
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .page-condition-img {
        width: 45px;
        height: 45px;
    }

}

@media (max-width: 767px) {
    
    .page-condition h3 {
        font-size: 16px;
        line-height: 22px;
    }
    
    .page-condition p {
        font-size: 14px;
        line-height: 25px;
    }
    
}

/* PAGE CONDITIONS ACCORDION */
.page-service-card-price{
    width:100%;
    display:flex;
    justify-content: space-between;
    margin-top:auto;
}

.page-service-card-price .price-label{
    font: bold 18px var(--font-title);
    line-height: 28px;
    color: var(--black);
}

.page-service-card-price .price-value{
    font: bold 18px var(--font-title);
    line-height: 28px;
    color: var(--orange);
}

.page-consulting.accordion ul{
    font:16px var(--font);
    line-height:26px;
    color:var(--black);
    list-style: inside;
}

.page-service-card-text{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.page-service-card-icon img{
    width:70px;
    height:70px;
    display:block;
}


@media (min-width: 1280px) {
    .page-consulting.accordion{
        width:100%;
        display:flex;
        flex-direction: row;
        flex-wrap:wrap;
        gap:22px;
    }

    .page-service-card.accordion-item{
        border:1px solid var(--orange);
        border-radius:24px;
        padding: 24px;
    }

    .page-consulting .page-service-card.accordion-item:nth-child(1){ flex:0 0 648px }
    .page-consulting .page-service-card.accordion-item:nth-child(2){ flex:0 0 800px }
    .page-consulting .page-service-card.accordion-item:nth-child(3){ flex:0 0 450px }
    .page-consulting .page-service-card.accordion-item:nth-child(4){ flex:0 0 526px }
    .page-consulting .page-service-card.accordion-item:nth-child(5){ flex:0 0 450px }

    .page-consulting.accordion .accordion-header{
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:16px;
        pointer-events: none;
    }

    .page-consulting.accordion .accordion-title{
        color: var(--orange);
        font: bold 18px var(--font-title);
        line-height: 28px;
    }

    .page-consulting.accordion .accordion-icon-arrow{
        display:none;
    }

    .page-consulting.accordion .accordion-collapse{
        max-height:none !important;
        height:100%;
    }

    .page-consulting.accordion .accordion-body{
        padding:20px 0 0;
        height:100%;
    }

}

@media (min-width: 1280px) and (max-width:1519px) {
    .page-consulting .page-service-card.accordion-item:nth-child(1){ flex:0 0 555px }
    .page-consulting .page-service-card.accordion-item:nth-child(2){ flex:0 0 663px }
    .page-consulting .page-service-card.accordion-item:nth-child(3){ flex:0 0 387px }
    .page-consulting .page-service-card.accordion-item:nth-child(4){ flex:0 0 455px }
    .page-consulting .page-service-card.accordion-item:nth-child(5){ flex:0 0 354px }
}

@media (max-width: 1279px) {
    
    .page-consulting.accordion{
        width:100%;
        display:flex;
        flex-direction: column;
        gap:12px;
    }
    
    .page-consulting .page-service-card-icon img{
        width:36px;
        height:36px;
        display:block;
    }
    
    .page-consulting.accordion .accordion-header{ gap:12px }
    
    .page-service-card.accordion-item{
        border:1px solid var(--orange);
        border-radius:24px;
        padding:0 12px;
    }
    
    .page-service-card .accordion-title{
        font: bold 18px var(--font-title);
        line-height: 28px;
        color:var(--black);
        transition:all 0.1s ease-in-out;
    }
    
    .page-service-card.is-active .accordion-title{ color:var(--orange) }
    
    .page-service-card-price{ margin-top:0 }

    .page-service-card-price .price-label,
    .page-service-card-price .price-value{ font-size: 16px; line-height: 25px }
    
}

@media (max-width: 767px) {
    .page-service-card-text{ gap:14px }
    .page-consulting.accordion ul{ font:14px var(--font); line-height: 25px }
    .page-consulting.accordion .accordion-body{ padding:0 0 24px }
    .page-service-card .accordion-title{ font-size: 16px; line-height:25px }
}

/* CARGO SECTION */
.page-cargo-types{
    display:flex;
    flex-direction: column;
    gap:36px;
}

.page-cargo-item{
    display:flex;
    gap:24px;
}

.page-cargo-item-img{
    flex:0 0 596px;
    height:295px;
    border-radius:24px;
    overflow:hidden;
}

.page-cargo-item-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.page-cargo-item h3{
    font: bold 22px var(--font-title);
    line-height: 32px;
    color:var(--black);
    margin-bottom:20px;
}

.page-cargo-item p{
    font-size: 16px;
    line-height: 26px;
    color:var(--black);
}

.page-cargo-item .accordion-header {
    pointer-events: none; /* Disable JS click */
    padding: 0;
    min-height: auto;
    margin-bottom: 8px;
}

.page-cargo-item .accordion-icon-arrow {
    display: none;
}

.page-cargo-item .accordion-title {
    font: bold 22px var(--font-title);
    line-height: 32px;
    color: var(--black);
}

.page-cargo-item .accordion-collapse {
    max-height: none;
}

.page-cargo-item .accordion-body, 
.page-cargo-item .accordion-no-icon .accordion-body{
    padding: 0;
}

.page-cargo-item .accordion-item {
    border-bottom: none;
}



@media (max-width: 1519px) {
    .page-cargo-item-img{flex:0 0 530px}
}

@media (max-width:1279px) {
    
    .page-cargo-item{
        flex-direction:column;
        gap:0;
    }
    
    .page-cargo-item-img{
        flex:0 0 auto;
        height:300px;
    }
    
    .page-cargo-item-info > h3,
    .page-cargo-item-info > p{
        display:none;
    }
    
    .page-cargo-item .accordion-header {
        pointer-events: auto; /* Enable header clicks */
        padding: 20px 0;
        margin-bottom: 0;
    }
    
    .page-cargo-item .accordion-icon-arrow {
        display: block; /* Display arrow */
    }
    
    .page-cargo-item .accordion-body, 
    .page-cargo-item .accordion-no-icon .accordion-body{
        padding: 0 40px 26px 0;
    }
    
    .page-cargo-item h3 {
        margin-bottom: 0;
    }
    
    .page-cargo-item .accordion-title{
        font-size:18px;
        line-height:28px;
    }
    
    .page-cargo-item .accordion-collapse {
        max-height: 0;
    }
    
}

@media (max-width: 767px) {
    .page-cargo-item-img{
        height:169px;
    }
    
    .page-cargo-item .accordion-title{
        font-size:16px;
        line-height:25px;
    }
}


/* PAGE CONTENT */
.page-content{
    /*background:yellow;*/
}

.page-content table{
    width:100%;
    border-collapse: separate;
    border-spacing: 0;
    margin:48px 0 16px;
}

.page-content table caption{
    padding: 17px 24px;
    font: bold 16px var(--font);
    line-height: 26px;
    color: var(--white);
    text-align: center;
    background: #252b3b;
    border-radius: 24px 24px 0 0;
}

.page-content table thead th,
.page-content table tbody td {
    font-family: var(--font);
    color: var(--black);
    border-bottom: 1px solid #c2c4cf;
    border-right: 1px solid #c2c4cf;
}

.page-content table thead th {
    font-size: 16px;
    line-height: 26px;
    padding: 16px 55px;
    border-top: 1px solid #c2c4cf;
}

.page-content table tbody td{
    font-size: 14px;
    line-height: 25px;
    padding: 12px 30px;
    text-align: center;
}

.page-content table tr th:first-child,
.page-content table tr td:first-child {
    border-left: 1px solid #c2c4cf;
}

.page-content table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 24px;
}

.page-content table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 24px;
}

.page-content ul{
    display:flex;
    flex-direction:column;
    gap:14px;
}

.page-content ul li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:11px;
    font-size:14px;
    line-height: 25px;
    color:var(--black);
}

.page-content ul li:before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    content: '';
    background: var(--orange);
    border-radius: 2px;
}

@media (max-width: 1519px) {
    .page-content table thead th,
    .page-content table tbody td {
        font-size: 14px;
        line-height: 25px;
    }
}

@media (max-width: 1279px) {
    .page-content table caption {
        font-size: 14px;
        line-height: 23px;
        padding: 14px 24px;
    }
    
    .page-content table thead th {
        font-size: 12px;
        line-height: 16px;
    }
    
    .page-content table tbody td {
        font-size: 12px;
        line-height: 19px;
    }
    
    .page-content ul li{
        font-size:12px;
        line-height: 19px;
    }
    
    .page-table-scroll{
        width:100%;
        overflow-x:auto;
    }
    
    .page-table-scroll::-webkit-scrollbar {
        display: none;
    }
}

@media (max-width: 767px) {
    
    .page-content table caption {
        font-size: 12px;
        line-height: 16px;
        padding: 14px 24px;
    }

}


/* ==============================================
 * CONTACTS PAGE 
 ============================================== */
.contacts-section{
    width: 100%;
    display: flex;
    gap: 24px;
    margin-bottom:96px;
}

.contacts-tabs{
    flex: 0 0 844px;
    padding: 8px 24px 24px;
    border: 2px solid #eff1fb;
    border-radius: 24px;
}

.contacts-tabs h3{
    font: bold 18px var(--font-title);
    color:var(--black);
    margin-bottom: 10px;
}

.contacts-tabs p{
    font-size: 16px;
    color:var(--black);
    margin-bottom: 10px;
}

.contacts-tabs ul {
    width:100%;
    padding: 0;
    margin: 17px 0;
    display: flex;
    flex-direction: column;
}

.contacts-tabs ul li{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap:11px;
    font-size:16px;
    line-height: 26px;
    color:var(--black);
}

.contacts-tabs ul li:before{
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    content: '';
    background: var(--orange);
    border-radius: 2px;
}

.contacts-map{
    width: 100%;
    height: 427px;
    flex: 1 1 auto;
    overflow: hidden;
    position:relative;
    
    border-radius: 30px;
}

.map-controls{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
}

.map-btn{
    width: 40px;
    height: 40px;
    background: #ff6600;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    margin-bottom: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s;
}

.map-btn svg{
    width: 24px;
    height: 24px;
    display:block;
}

.ymap-container {
    width: 100%;
    height: 100%;
    background-color: #141414; 
}

.ymaps-2-1-79-ground-pane {
    will-change: transform;
    filter: saturate(0)!important; 
}

@media (max-width: 1519px) {
    
    .contacts-tabs{
        flex: 0 0 660px;
    }
    
}

@media (max-width: 1279px) {
    
    .contacts-section{
        flex-direction:column;
        gap:48px;
    }
    
    .contacts-tabs{
        flex: 0 0 100%;
    }
    
    .contacts-map{
        height:330px;
    }
    
}

/* FORMS */
.section-general-form{ margin-bottom:140px }

@media (max-width:1519px) {
    .section-general-form{ margin-bottom:120px }
}

@media (max-width:1279px) {
    .section-general-form{ margin-bottom:80px }
}

@media (max-width:767px) {
    .section-general-form{ margin-bottom:70px }
}

.form-general-wrap{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 24px 20px;
    background: #eff1fb;
    border-radius: 24px;
}

.form-general-wrap h4{
    font: normal 16px var(--font);
    line-height: 26px;
    color: var(--black);
    margin:0;
    padding:0;
}

.form-general-wrap form{
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    gap: 14px;
}

.form-general-wrap form .form-general-field:nth-child(1),
.form-general-wrap form .form-general-field:nth-child(2){
    flex:0 0 calc(50% - 7px);
}

.form-general-wrap form .form-general-field:nth-child(3){
    flex: 0 0 100%;
}

.form-general-wrap form .form-general-file{
    flex: 0 0 100%;
    margin-top: 16px;
}

.form-general-bottom{
    width:100%;
    display:flex;
    align-items:center;
    gap: 24px;
    margin-top:16px;
}

@media screen and (max-width: 1279px) {
    
    .form-general-bottom{
        justify-content: space-between;
    }
    
    .form-general-consent{
        max-width:460px;
    }
    
}

@media screen and (max-width: 767px) {
    
    .form-general-wrap{
        padding: 18px 9px;
    }
    
    .form-general-wrap h4{
        font-size: 14px;
        line-height: 25px;
    }
    
    .form-general-wrap form{
        flex-direction: column;
    }
    
    .form-general-wrap form .form-general-field:nth-child(1),
    .form-general-wrap form .form-general-field:nth-child(2){
        flex:0 0 100%;
    }
    
    .form-general-wrap form .form-general-file{
        margin-top:7px;
    }
    
    .form-general-bottom{
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        margin-top:7px;
    }
    
    .form-general-bottom button{
        width:100%;
    }
    
}

/* ==============================================
 * TABS
 ============================================== */
.tab-panel {
    /*display: none;*/
    padding-top:32px;
    
    
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    
    /*animation: fadeIn 0.3s ease;*/
    
    transform: translateY(5px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}

.tab-panel.is-active {
    /*display: block;*/
    
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    z-index: 1;
}

.tabs-panels{
    display:grid;
    /*background:red;*/
}

.tabs-nav{
    width:100%;
    display: flex;
    gap:24px;
    border-bottom: 1px solid rgba(12, 18, 29, 0.2);
}

.tab-btn{
    margin-bottom: -1px;
    max-width: fit-content;
    font:16px var(--font);
    line-height: 26px;
    padding: 9px 20px;
    color: var(--black);
    flex: 1;
    text-align: center;
    justify-content: center;
    background: transparent;
    border:0;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    transition: color 0.3s ease-in-out;
}

.tab-btn:not(.is-active):hover{
    color:var(--orange);
    /*color:#fff;*/
}

.tab-btn.is-active{
    border-bottom:2px solid var(--orange);
}

@media (max-width: 767px) {
    
    .tabs-nav{
        overflow-y:hidden;
        overflow-x:auto;
        gap:8px;
    }
    
    .tabs-nav::-webkit-scrollbar { display: none }
    
    .tab-btn{
        font-size:14px;
        line-height:25px;
        padding: 9px 12px;
    }
    
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}


/* ==============================================
 * ACCORDION
 ============================================== */
.accordion-heading{
    width:100%;
    display:block;
    margin:0;
    padding:0;
    line-height:1;
}

button.accordion-header{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    
    border:none;
    margin:0;
    
    width: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    padding:0;
    min-height: 80px;
    
    
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.accordion-icon-faq,
.accordion-icon-arrow{
    flex:0 0 24px;
    width:24px;
    height:24px;
}

.accordion-icon-faq svg,
.accordion-icon-arrow svg{
    width:100%;
    height:100%;
    display:block;
    transition:all 0.3s ease-in-out;
}

.accordion-icon-arrow{
    margin-left:auto;
}

.accordion-icon-arrow svg{
    color:var(--black);
}


.accordion-item.is-active .accordion-icon-arrow svg{
    transform: rotate(180deg);
    color:var(--orange);
}

.accordion-title{
    font: bold 18px var(--font-title);
    line-height: 28px;
    color: var(--black);
    flex: 1 1 auto;
}

.accordion-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    
    position: relative;
    
    border-bottom: 1px solid rgba(12, 18, 29, 0.1);
}

.accordion-collapse {
    width:100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.accordion-body{
    width: 100%;
    padding: 0;
    overflow: hidden;
    padding: 0 40px 26px 48px;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.accordion-body p{
    font-size: 16px;
    line-height: 26px;
    color: var(--black);
    max-width: 1250px;
}

.accordion-no-icon .accordion-icon-faq{
    display:none;
}

.accordion-no-icon .accordion-body{
    padding:0 40px 26px 0;
}

@media screen and (max-width: 1279px) {
    
    .accordion-title{
        font-size:16px;
        line-height: 25px;
        max-width: 100%;
    }
    
}

@media screen and (max-width: 767px) {
    
    .accordion-title{
        font-size:14px;
        line-height:22px;
    }
    
    .accordion-body p{
        font-size: 14px;
        line-height: 25px;
    }
    
}


/* ==============================================
 * CATALOG 
 ============================================== */
.catalog-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin: 0 0 45px;
}

.catalog-heading h1.page-title{
    margin-bottom:0;
}

@media (max-width: 1519px) {
    .catalog-heading { margin: 0 0 36px }
}

@media (max-width: 767px) {
    .catalog-heading { margin: 0 0 24px }
}

/* CATALOG LIST PAGE (/catalog/) */
.catalog-list-section{
    display:flex;
    gap:36px;
    margin-bottom:48px;
}

.catalog-list{
    flex: 1 1 auto;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:14px;
    order:2;
}

.catalog-list-item{
    display:block;
    text-decoration:none;
    background: #eff1fb;
    border:1px solid #eff1fb;
    border-radius:12px;
    padding:22px;
    transition: all 0.3s ease-in-out;
    max-height: 120px;
}

.catalog-list-item img{
    max-width:235px;
    height:74px;
    display:block;
    margin:0 auto;
}

.catalog-list-item:hover{
    border-color:var(--orange);
}

.catalog-sidebar{
    flex: 0 0 300px;
    order:1;
}

.catalog-filter{
    width:100%;
    display:flex;
    flex-direction: column;
    gap:16px;
}

.catalog-filter-title{
    font: bold 16px var(--font-title);
    line-height: 25px;
    color:var(--black);
}

.catalog-filter-body{
    display:flex;
    flex-direction: column;
    gap:12px;
}

.catalog-filter-body ul{
    display:flex;
    flex-direction: column;
    gap:12px;
}

.catalog-filter-body hr{
    width:100%;
    height:1px;
    border:none;
    background: #c9cbd2;
}

.catalog-filter-body .field-checkbox-text{
    font-size:16px;
    line-height:26px;
}


.catalog-filter-buttons{ margin-top:12px }

.catalog-filter-mobil,
.catalog-sidebar-overlay,
.btn-filter-search,
.btn-filter-close{
    display:none;
}

@media (max-width: 1279px) {
    .catalog-list-section{ flex-direction:column }
    .catalog-filter-mobil{ display:block } /*  margin-bottom:36px */
    .catalog-list{ grid-template-columns: 1fr 1fr }
    
    .catalog-sidebar{
        flex:1 1 auto;
        position:fixed;
        top:76px;
        left:0;
        right:0;
        bottom: 0;
        z-index:900;
        display:block;
        /*display:none;*/
        
        
        visibility: hidden;
        pointer-events: none;
        transition: visibility 0.4s;
    }
    
    .catalog-sidebar.is-open {
        /*display: block;*/
        visibility: visible;
        pointer-events: auto;
    }
    
    .catalog-sidebar-overlay{
        content:'';
        display:block;
        position:fixed;
        inset:0;
        background: rgba(0, 0, 0, 0);
        z-index:890;
        -webkit-backdrop-filter:blur(0px);
        backdrop-filter:blur(0px);
        transition: background 0.3s ease, backdrop-filter 0.3s ease, -webkit-backdrop-filter 0.3s ease;
    }
    
    .catalog-sidebar.is-open .catalog-sidebar-overlay{
        background: rgba(0, 0, 0, 0.5);
        -webkit-backdrop-filter:blur(2px);
        backdrop-filter:blur(2px);
    }
    
    .catalog-filter{
        background: #f8f9ff;
        position:relative;
        width:100%;
        
        max-height: calc(100vh - 76px - 20px);
        
        z-index:900;
        padding:24px 20px;
        border-radius:0 0 20px 20px;
        box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.35);
        
        display: flex;
        flex-direction: column;
        
        opacity: 0;
        transform: translateY(15px);
        transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    
    .catalog-sidebar.is-open .catalog-filter{
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.05s;
    }
    
    .catalog-filter-body{
        
        flex: 1 1 auto; 
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        
        padding-right: 10px;
        margin-right: -10px;
        margin-bottom: 16px;
    }
    
    
    .catalog-filter-body::-webkit-scrollbar {
        width: 4px;
    }
    .catalog-filter-body::-webkit-scrollbar-track {
        background: rgba(12, 18, 29, 0.05);
        border-radius: 4px;
    }
    .catalog-filter-body::-webkit-scrollbar-thumb {
        background: var(--orange);
        border-radius: 4px;
    }
    
    
    .catalog-filter-mobil button{ padding-left:0; padding-right:0 }
    
    .catalog-filter-body .field-checkbox{
        padding:20px 14px 20px 10px;
        background: #eff1fb;
        border-radius: 20px;
    }
    
    .catalog-filter-buttons{
        width:100%;
        display:flex;
        align-items:center;
        /*gap:36px;*/
        
        gap:16px;
        flex: 0 0 auto;
        padding-top: 10px;
    }
    
    .catalog-filter-buttons .btn{ padding: 4px 40px; line-height:25px }
    .catalog-filter-buttons .btn-filter-search{ display:none }
    .catalog-filter-buttons .btn-filter-close{ display:inline-block; margin-left:auto; background:var(--orange); color:#fff }
    .catalog-filter-buttons .btn-filter-close:hover{ background: var(--orange-hover); border-color: var(--orange-hover); color: #fff }
    
}

@media (max-width: 767px) {
    .catalog-list{ grid-template-columns: 1fr }
    .catalog-sidebar{ top:69px }
    .catalog-filter{ max-height: calc(100vh - 69px - 200px) }
    .catalog-filter-buttons{ flex-wrap:wrap; align-items:flex-start }
}

/* CATALOG LIST BANNER */
.catalog-list-banner{
    width:100%;
    height:230px;
    display:flex;
    flex-direction: column;
    gap:24px;
    padding:32px 24px 32px 36px;
    background: #252b3b;
    border-radius:24px;
    margin:120px 0 140px;
}

.catalog-list-banner h3{
    font-size:22px;
    line-height: 32px;
    color:#fff;
    max-width:800px;
}

.catalog-list-banner p{
    font-size:16px;
    line-height: 26px;
    color:#fff;
    max-width:800px;
}

@media (max-width:1519px) {
    .catalog-list-banner { margin:100px 0 }
}

@media (max-width: 1279px) {
    .catalog-list-banner{ height: 252px; padding: 32px 20px 32px 24px; margin: 70px 0 90px }
    .catalog-list-banner p{ font-size:14px; line-height: 25px; max-width:600px }
    .catalog-list-banner h3{ max-width:600px }
}

@media (max-width: 767px) {
    .catalog-list-banner{ height: 252px; padding: 24px 14px 24px 24px; margin: 70px 0 }
    .catalog-list-banner p{ font-size:12px; line-height: 19px; max-width:none }
    .catalog-list-banner h3{ font-size:16px; line-height: 25px; max-width:none }
}

/* BRAND PAGE */
.brand-list-section{
    display:flex;
    gap:36px;
    margin-bottom:48px;
}

.brand-list{
    flex:1 1 auto;
    /*background:gold;*/
    order:2;
    min-height:477px;
    position:relative;
}

.brand-list-loader{
    position:absolute;
    inset:0;
    height:477px;
    z-index:2;
    
    background:rgba(255,255,255,0.2) url(/assets/front/img/loader.svg) no-repeat center;
    background-size:100px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.brand-products{
    display:flex;
    flex-wrap: wrap;
    gap:42px;
    /*background:yellow;*/
}

@media (max-width: 1519px) {
    
    .brand-list-section{
        gap:24px;
    }
    
    .brand-products{
        gap:21px;
    }
    
    .brand-list-section .catalog-sidebar{
        flex:0 0 274px;
    }
    
}

@media (max-width: 1279px) {
    .brand-list{
        min-height:auto;
    }
}

/* PRODUCT CARD */
.product-card{
    width:350px;
    background: #eff1fb;
    border-radius: 25px;
    padding:18px 18px 24px;
}

.product-card-top{
    background:rgba(255,255,255,.35);
    border-radius:16px;
    height:256px;
    padding:0 11px;
    margin-bottom:18px;
    display: block;
}

.product-card-stock-info{
    display:flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom:36px;
    padding:13px 12px 0 0;
}

.product-card-tag-instock{
    display:flex;
    padding:0 15px;
    border: 1px solid var(--orange);
    border-radius:24px;
    height: 24px;
    justify-content: center;
    align-items: center;
    font: bold 12px var(--font-title);
    line-height: 21px;
    color:var(--orange);
    white-space: nowrap;
}

.product-card-tag-instock.out-of-stock{
    border-color:rgba(12, 18, 29, 0.35);
    color:rgba(12, 18, 29, 0.65);
}

.product-card-qnt{
    font:bold 12px var(--font-title);
    line-height: 1;
    color: rgba(12, 18, 29, .65);
}

.product-card-img{
    width: 100%;
    height:170px;
    overflow: hidden;
}

.product-card-img img{
    width:100%;
    height:100%;
    object-fit: contain;
    object-position:center;
    display:block;
}

.product-card-title{
    display:block;
    font: bold 16px var(--font-title);
    line-height: 25px;
    color:var(--black);
    margin-bottom:14px;
    
    height: 50px; 
    overflow: hidden;
}

.product-card-props{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:130px;
    overflow:hidden;
}

.product-card-prop{
    display:flex;
    width:100%;
    gap: 5px;
    font-size: 14px;
    justify-content: space-between;
    align-items: center;
    line-height:25px;
}

.product-card-prop div:last-child{
    color: rgba(12, 18, 29, 0.65);
}

.product-card-props .product-card-prop:last-child{
    padding-top:6px;
    margin-top:auto;
}

.product-card-props .product-card-prop:last-child div:last-child{
    font: bold 16px var(--font-title);
    text-align: right;
    color:var(--black);
}

@media (min-width:1280px) and (max-width: 1519px) {
    
    .product-card{
        width:300px;
        padding:18px 16px 24px;
    }
    
    .product-card-top{
        height:242px;
        padding:0 9px;
    }
    
    .product-card-stock-info{
        padding:16px 12px 0 0;
    }
    
    .product-card-img{
        height:150px;
    }
    
    .product-card-props{
        height:107px;
    }
    
    .product-card-prop{
        font-size:12px;
        line-height:19px;
    }
    
}

@media (max-width:1279px) {
  
    .product-card{
        width:275px;
        padding:15px 14px;
    }
    
    .product-card-top{
        height:195px;
        padding:0 9px;
    }
    
    .product-card-stock-info{
        margin-bottom:24px;
        padding:10px 11px 0 0;
    }
    
    .product-card-tag-instock{
        padding:0 12px;
        border-radius:24px;
        height: 16px;
        font-size:9px;
        line-height: 16px;
    }
    
    .product-card-qnt{
        font-size:10px;
        line-height:16px;
    }
    
    
    .product-card-img{
        height:130px;
    }
    
    .product-card-title{
        font-size:14px;
        line-height:22px;
        height:44px;
        margin-bottom:14px;
    }
    
    .product-card-props{
        height:87px;
    }
    
    .product-card-prop{
        font-size:10px;
        line-height:14px;
    }
    
    .product-card-props .product-card-prop:last-child div:last-child{
        font-size:12px;
    }
       
}

/* Brand page product card mobile styles */
/* No design for this part, and needs solving, so we have weird workaround here */
@media (min-width: 811px) and (max-width: 1279px) {
    .brand-products{
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:24px;
    }
    
    .brand-products .product-card{
        width:100%;
    }
}

@media (max-width: 810px) {
    
    .brand-products{
        flex-wrap: nowrap;
        flex-direction:column;
        /*background:gold;*/
    }
    
    .brand-products .product-card{
        width:100%;
        display:flex;
        gap:18px;
        /*background:red;*/
    }
    
    .brand-products .product-card-top {
        width:253px;
        flex:0 0 253px;
        height: 169px;
        margin:0;
        /*padding: 0 9px;*/
    }
    
    .brand-products .product-card-info{
        width:425px;
        /*background:pink;*/
    }
    
}

@media (max-width: 767px) {
       
    .brand-products .product-card{
        width:100%;
        display:flex;
        gap:18px;
        padding:12px;
        /*background:red;*/
    }
    
    .brand-products .product-card-top {
        width:136px;
        flex:0 0 136px;
        height: 127px;
        margin:0;
        padding: 8px;
        
        /*background:yellow;*/
    }
    
    .brand-products .product-card-stock-info{
        padding:0;
    }
    
    .brand-products .product-card-img {
        height: 68px;
    }
    
    .brand-products .product-card-info{
        width:unset;
        flex:1 1 auto;
        
        /*background:lightblue;*/
    }
    
    .brand-products .product-card-title{
        font-size:12px;
        line-height:21px;
        height: 42px;
        margin-bottom: 8px;
    }
    
    .brand-products .product-card-props{
        gap:4px;
        height:75px;
    }
    
    .product-card-prop div:last-child{
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
        max-width: 100px;
    }
    
}

/* Product page */
.product-page-main{
    display:flex;
    gap:48px;
    /*margin-bottom:120px;*/
    /*margin-top:50px;*/
    /*background:red;*/
}

.product-page-photo{
    flex:0 0 628px;
    /*background:orange;*/
}

.product-page-content{
    width:100%;
    /*background:yellow;*/
}

.product-page-image{
    width:100%;
    height:450px;
    cursor: zoom-in;
    overflow:hidden;
    border-radius:24px;
    
    /*background:pink;*/
}

.product-page-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit: contain;
    object-position: center;
    /*background:purple;*/
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.product-page-image:hover img{
    transform: scale(1.01);
}


.product-image-prewiews-wrap{
    display:flex;
    margin-top:24px;
    /*background:coral;*/
}

.product-image-previews-arrow{
    flex:0 0 24px;
    /*background:lightblue;*/
}

.product-image-previews-arrow button{
    /*background:green;*/
    
    width:100%;
    height:100%;
    
    border:none;
    margin:0;
    padding:0;
    background:transparent;
    cursor:pointer;
    
    display:flex;
    justify-content: center;
    align-items:center;
    
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
}

.product-image-previews-arrow button svg{
    width:24px;
    height:24px;
    display:block;
    color:var(--black);
    transition:all 0.15s ease-in-out;
}

.product-image-previews-arrow button:hover svg{
    color:var(--orange);
}

/*.product-image-previews{
    background:lightgreen;
}*/


.product-page-preview-image{
    max-width: 184px;
    height: 120px;
    border-radius: 16px;
    border: 1px solid #eff1fb;
    overflow:hidden;
    transition: border-color 0.3s ease-in-out;
}

.product-page-preview-image img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position:center;
}

.splide__slide.is-active .product-page-preview-image {
    border-color: var(--orange);
}

.product-page-preview-image:hover {
    border-color: var(--orange);
}

.product-image-previews .splide__track--nav>.splide__list>.splide__slide.is-active,
.product-image-previews .splide__track--nav>.splide__list>.splide__slide{
    border:none !important;
}

.product-page-content h1{
    font: bold 35px var(--font-title);
    line-height: 50px;
    color: var(--black);
    margin-bottom:8px;
}

.product-page-stock{
    font-size:14px;
    line-height:23px;
    /*color: rgba(12, 18, 29, 0.35);*/
    color: var(--orange);
}

.product-page-stock.in-stock{
    color: var(--orange);
}

.product-page-top{
    display:flex;
    gap:24px;
}

.product-page-sku{
    font-size:14px;
    line-height:23px;
    color: rgba(12, 18, 29, 0.35);
}

.product-page-sku span:first-child{
    color:var(--orange);
}

.product-page-sku span:last-child{
    color:var(--black);
}

.product-page-description{
    margin-top:36px;
}

.product-page-description h2{
    font: bold 16px var(--font-title);    
    line-height: 25px;
    color:var(--black);
    margin-bottom:14px;
}

.product-page-description p{
    font-size: 14px;
    line-height: 25px;
    color: rgba(12, 18, 29, 0.65);
    margin-bottom:14px;
}

.product-page-description ul{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding-left:8px;
}

.product-page-description ul li{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap:11px;
    font-size:14px;
    line-height: 25px;
    color: rgba(12, 18, 29, 0.65);
}

.product-page-description ul li:before {
    width: 8px;
    height: 8px;
    flex: 0 0 8px;
    content: '';
    background: var(--orange);
    border-radius: 2px;
    margin-top: 9px;
}

.product-page-price{
    font: bold 16px var(--font-title);
    line-height: 25px;
    color:var(--black);
    margin:24px 0 36px;
}

@media (max-width:1519px) {
    .product-page-photo{
        flex:0 0 628px;
    }
}

@media (max-width:1279px) {
    
    .product-page-main { flex-direction: column; gap: 0 }
    .product-page-content { display: contents }
    .product-page-content h1 { order: 1; font-size: 28px; line-height: 37px }
    .product-page-top { order: 2; margin-bottom: 24px }
    .product-page-photo { order: 3; flex: 1 1 auto; width: 100%; margin-bottom: 32px }
    .product-page-description { order: 4; margin-top: 0 }
    .product-page-price { order: 5 }
    .product-page-contact { order: 6 }
    .product-image-previews-arrow{ display:none }
    .product-image-previews{ width:100%; min-width: 0 }
    .product-page-preview-image{
        width:160px;
        height:110px;
    }
}

@media (max-width: 767px) {
    
    .product-page-content h1 {
        font-size: 22px;
        line-height: 32px;
    }
    
    .product-page-stock,
    .product-page-sku{
        font-size:12px;
        line-height:16px;
    }
    
    .product-page-image{
        height:260px;
    }
    
    .product-page-preview-image{
        width: 105px;
        height: 86px;
    }
    
}



/* Product characteristics section */
.product-characteristics .hp-section-header div:last-child{
    /*background:gold;*/
    display:flex;
    gap:22px;
}

.product-characteristics .hp-section-header a {
    font-size: 16px;
    line-height: 26px;
    color:var(--orange);
}

.product-characteristics .hp-section-header a:hover{
    color:var(--orange);
    text-decoration:underline;
}

.product-characteristics-body{
    width: 100%;
    /*height: 418px;*/
    padding:32px 24px 24px;
    border-radius: 24px;
    border: 2px solid #eff1fb;
}

.product-kit-props{
    padding-bottom:32px;
    margin-bottom:32px;
    border-bottom: 1px solid rgba(12, 18, 29, 0.2);
}

.product-props{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:24px;
}

.product-prop{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:100px;
    /*background:coral;*/
}

.product-prop div:first-child{
    flex:0 0 450px;
    font-size:16px;
    line-height:26px;
    color:var(--black);
    /*background:lightcoral;*/
}

.product-prop div:last-child{
    flex:0 0 874px;
    font-size:16px;
    line-height:26px;
    color: rgba(12, 18, 29, 0.65);
    /*background:lightblue;*/
}

.product-props-button{
    width:100%;
    display:flex;
    margin-top:24px;
    justify-content:center;
    align-items:center;
    /*background:lightgreen;*/
}

.product-props-collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.product-props-collapse.is-expanded {
    opacity: 1;
}

.props-hidden-inner {
    padding-top: 24px; 
}

.product-props-button button svg {
    transition: transform 0.3s ease;
}

.product-props-button button.is-expanded svg {
    transform: rotate(180deg);
}

@media (max-width:1519px) {
    .product-prop div:last-child{ flex:0 0 642px }
}

@media (max-width: 1279px) {
    .product-prop{ gap:12px }
    .product-characteristics .hp-section-header div:last-child{ gap: 16px }
    .product-prop div:first-child,
    .product-prop div:last-child,
    .product-characteristics .hp-section-header a{ font-size:14px; line-height:25px }
    .product-prop div:first-child{ flex:0 0 270px }
    .product-prop div:last-child{ flex:1 1 auto }
    .props-hidden-inner { padding-top: 12px }
}

@media (max-width: 767px) {
    
    .product-characteristics .hp-section-header{
        flex-direction:column;
        align-items: flex-start;
    }
    
    .product-characteristics .hp-section-header div:last-child{
        margin-top:16px;
        flex-wrap:wrap;
    }
    
    .product-characteristics .hp-section-header a{
        font-size:12px;
        line-height:19px;
        white-space:nowrap;
    }
    
    .product-characteristics-body{
        padding:24px;
    }
    
    .product-props{
        gap:16px;
    }
    
    .product-prop{
        flex-direction:column;
        gap:12px;
    }
    
    .product-prop div:first-child,
    .product-prop div:last-child{
        width:100%;
        flex:1 1 auto;
    }
    
    .product-kit-props{
        padding-bottom:0;
        margin-bottom:10px;
        border-bottom: none;
    }
    
    .props-hidden-inner { padding-top: 12px }
    
}

.product-page-main{ margin-bottom:120px }
.hp-section.product-page-projects{ margin-top:140px }
.product-characteristics{ margin-bottom:140px }

@media (max-width: 1519px) {
    .hp-section.product-page-projects{ margin-top:120px }
    .product-characteristics{ margin-bottom:120px }
}

@media (max-width: 1279px) {
    .product-page-main{ margin-bottom:90px }
    .hp-section.product-page-projects{ margin-top:90px }
    .product-characteristics{ margin-bottom:90px }
}

@media (max-width: 767px) {
    .product-page-main{ margin-bottom:70px }
    .hp-section.product-page-projects{ margin-top:70px }
    .product-characteristics{ margin-bottom:70px }
}

/* ======================================= BANNER ======== */
.banner{
    width:100%;
    min-height:285px;
    /*height:300px;*/
    padding:27px 24px 27px 36px;
    overflow:hidden;
    display:flex;
    flex-direction: column;
    background:var(--black);
    border-radius:24px;
    position: relative;
    margin:140px 0;
}

.banner-info{
    max-width: 690px;
    display:flex;
    flex-direction: column;
    gap:18px;
    position: relative;
    z-index:2;
}

.banner h3{
    font-size: 28px;
    line-height: 37px;
    color:#fff;
}

.banner p{
    font-size: 16px;
    line-height: 26px;
    color:#fff;
}

.banner-button{ 
    width:100%;
    display: flex; 
    margin-top:14px;
}

.banner-img {              
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 50%;
    z-index: 1;
    
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #0c121d 35%);
    mask-image: linear-gradient(to right, transparent 0%, #0c121d 35%);
}

.banner-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center right;
}

@media (min-width: 1280px) {
    .banner{
        min-height:auto;
    }
    
    .banner-info{
        max-width:60%;
    }
    
    .banner-info p{
        text-align:left;
    }
    
    .banner-info p:last-of-type{
        margin-bottom:0;
    }
    
    .banner h3{
        font-size: 24px;
        line-height: 30px;
    }
    
    .banner-button{
        margin-top:0;
    }
}

@media (max-width: 1519px) {
    .banner{ margin:120px 0 }
}

@media (max-width: 1279px) {
    .banner{ min-height: 250px; padding:24px; margin:90px 0 }
    .banner-info{ max-width: 402px }
    .banner h3{ font-size: 22px; line-height: 32px }
    .banner p{ font-size: 14px; line-height: 25px }
    .banner-img { width:60%; opacity: 0.6 }
    
    .banner-button {
        
    }
}

@media (max-width: 767px) {
    .banner{ min-height: 285px; padding:18px 16px; margin:70px 0 }
    .banner-info{ flex-direction:row; justify-content: space-between; align-items: flex-end; max-width: none; gap: 12px; flex: 1 0 100% }
    .banner h3{ font-size: 16px; line-height: 25px; flex: 1 1 auto }
    .banner p{ display:none }
    .banner-button{ flex: 0 0 44px }
    .banner-img { width:100%; opacity: 1; -webkit-mask-image: none; mask-image: none }
}

/* ============================================
   DUAL RANGE SLIDER
   ============================================ */
.filter-group {
    border-bottom:1px solid #c9cbd2;
    padding-bottom:12px;
}

.filter-group:last-child{
    border-bottom:none;
    padding-bottom:0;
}

.filter-group-title {
    font: 14px var(--font-title);
    line-height:24px;
    color: var(--black);
    margin-bottom:8px;
}

/* Slider (range track) container */
.filter-range {
    padding: 0 0 10px;
}

.filter-range-slider-wrapper {
    position: relative;
    height: 30px;
    margin: 0 0 20px 0;
    padding: 0 10px;
}

/* ============================================
   TRACK AND PROGRESS
   ============================================ */
/* Main slider (track) */
.filter-range-track {
    position: absolute;
    width: 100%;
    height: 13px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
    left: 0;
    background:var(--black);
}

/* Progress (active slider) */
.filter-range-progress {
    position: absolute;
    height: 11px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0;
    left: 0;
    right: 0;
    margin-top:-1px;
    background:var(--orange);
    overflow: hidden;
}

/* ============================================
   Sliders (tracks)
   ============================================ */
.filter-range-slider {
    position: absolute;
    width: 100%;
    left: 0;
    height: 30px;
    background: transparent;
    pointer-events: none;
    -webkit-appearance: none;
    appearance: none;
    z-index: 10;
    top: 11px;
}

/* Hide default track */
.filter-range-slider::-webkit-slider-runnable-track,
.filter-range-slider::-moz-range-track{
    background: transparent;
    border: none;
    height: 6px;
}

/* Controls (thumbs) */
.filter-range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    cursor: grab;
    pointer-events: all;
    margin-top: -5px;
    position: relative;
    background-color:transparent;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(12, 18, 29)" d="M 53 97.248 H 247.041 V 247.412 A 44 44 0 0 1 203.041 291.412 H 97 A 44 44 0 0 1 53 247.412 V 97.248 Z"/><path fill="rgb(12, 18, 29)" d="M 132.65 16.973 Q 150.027 0.301 167.404 16.973 L 241.256 87.828 Q 258.633 104.5 223.879 104.5 L 76.175 104.5 Q 41.421 104.5 58.798 87.828 Z"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.filter-range-slider.filter-range-min::-webkit-slider-thumb{ left:-9px }
.filter-range-slider.filter-range-max::-webkit-slider-thumb{ left:5px }

.filter-range-slider::-webkit-slider-thumb:hover {
    border:none;
    background:transparent;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path fill="rgb(240, 101, 0)" d="M 53 97.248 H 247.041 V 247.412 A 44 44 0 0 1 203.041 291.412 H 97 A 44 44 0 0 1 53 247.412 V 97.248 Z"/><path fill="rgb(240, 101, 0)" d="M 132.65 16.973 Q 150.027 0.301 167.404 16.973 L 241.256 87.828 Q 258.633 104.5 223.879 104.5 L 76.175 104.5 Q 41.421 104.5 58.798 87.828 Z"/></svg>');
}

.filter-range-max { z-index: 11 }


/* ============================================
   INPUT FIELDS (FROM / TO)
   ============================================ */
.filter-range-values{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
}

.filter-range-input-wrap{
    flex:0 0 calc(50% - 6px);
}

.filter-range-input-item{
    display:block;
    height:40px;
    overflow:hidden;
    position:relative;
}

.filter-range-input-item-label{
    color: rgba(12, 18, 29, 0.35);
    font-size:10px;
    line-height:1;
    vertical-align:top;
    position:absolute;
    top:4px;
    left:13px;
    z-index:2;
}

.filter-range-input-item-input{
    width:100%;
    height:40px;
    display:flex;
    position: relative;
    z-index:1;
    gap:12px;
    align-items:center;
    padding:0 12px;
    border-radius:10px;
    background: #f8f9ff;
    border: 1px solid rgba(12, 18, 29, 0.2);
    transition:all 0.3s ease-in-out;
}

.filter-range-input-item-unit{
    font-size:12px;
    color: rgba(12, 18, 29, 0.8);
    line-height:1;
}

.filter-range-input-item-input:focus-within{
    border-color:var(--orange);
}

.filter-range-input {
    width: 100%;
    height:40px;
    color: var(--black);
    font-size: 15px;
    text-align: left;    
    padding:10px 0 0;
    border-radius:0;
    border:none;
    background:transparent;
    outline: none !important;
}

.filter-range-input::placeholder {
    color: #555;
}

/* Remove number input arrows */
.filter-range-input::-webkit-outer-spin-button,
.filter-range-input::-webkit-inner-spin-button,
.filter-range-input[type=number]{
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    margin: 0;
}


/* Form popup */
.form-popup{
    position:fixed;
    inset:0;
    z-index:9990;
    display:flex;
    justify-content: center;
    align-items: center;
    
    visibility: hidden;
    pointer-events: none;
    transition: visibility 0.4s;
}

.form-popup.is-open {
    visibility: visible;
    pointer-events: auto;
}

.form-popup-overlay{
    /*position:fixed;*/
    
    position:absolute;
    
    inset:0;
    z-index:9991;
    
    background: rgba(0, 0, 0, 0.0);
    -webkit-backdrop-filter: blur(0px);
    backdrop-filter: blur(0px);
    
    /*background: rgba(0, 0, 0, 0.4);*/
    /*-webkit-backdrop-filter:blur(2px);*/
    /*backdrop-filter:blur(2px);*/
    
    transition: background 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease;
    /*will-change: background, backdrop-filter;*/
}

.form-popup.is-open .form-popup-overlay {
    background: rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.form-popup-content{
    /*position:fixed;*/
    /*inset:0;*/
    
    position: relative;
    
    z-index:9992;
    /*background:green;*/
    display:flex;
    justify-content: center;
    align-items:center;
}

.form-popup-body{
    width:500px;
    /*position:fixed;*/
    display:block;
    background:#fff;
    box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.25);
    position:relative;
    border-radius:24px;
    padding:24px;
    
    /*height:593px;  @tmp */
    
    z-index:9993;
    
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    /*will-change: transform, opacity;*/
}

.form-popup.is-open .form-popup-body {
    opacity: 1;
    transform: translateY(0);
}

.form-popup-title{
    font: bold 18px var(--font-title);
    line-height: 28px;
    color:var(--orange);
    margin-bottom:24px;
}

.form-popup-fields{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.form-popup-fields .field-text{
    background:#fff;
    padding: 14px 12px;
}

.form-popup-fields .field-textarea{
    background:#fff;
    resize:none;
    height:139px;
}

.form-popup-fields .field-file-text{
    font-size:14px;
    line-height:25px;
    color:var(--black);
}

.form-popup-fields .field-file-icon{
    color:var(--black);
}

.form-popup-consent .field-checkbox-text{
    font-size:10px;
    line-height:14px;
}

.form-popup-fz{
    font-size:10px;
    line-height:14px;
    color: rgba(12, 18, 29, 0.65);
}

.form-popup-button{
    margin-top:8px;
    padding-bottom:3px;
    display: flex;
    width: 100%;
    justify-content: flex-end;
}

.form-popup-close{
    width:24px;
    height:24px;
    display:block;
    padding:0;
    margin:0;
    border:none;
    background:transparent;
    outline:none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    color: rgba(12, 18, 29, 0.8);
    
    position:absolute;
    top:10px;
    right:15px;
    
    cursor:pointer;
    transition:all 0.3s ease-in-out;
}

.form-popup-close:hover{
    color:var(--orange);
}

.form-popup-close svg{
    width:24px;
    height:24px;
    display:block;
    /*color: rgba(12, 18, 29, 0.8);*/
}

.form-popup-success{
    display:flex;
    flex-direction: column;
    gap:24px;
    align-items:center;
    text-align:center;
}

.form-popup-success h3{
    font-size: 18px;
    line-height: 28px;
    color:var(--orange);
}

.form-popup-success p{
    font-size: 16px;
    line-height: 26px;
    color:var(--black);
}

.form-popup-success img{
    width:164px;
    height:auto;
    display:block;
}

@media (max-width: 767px) {
    
    .form-popup-body{
        width:366px;
        padding:16px;
    }
    
    .form-popup-title{
        font-size: 16px;
        line-height: 25px;
        padding-right:20px;
    }
    
    .form-popup-fields .field-text{
        padding: 9px 12px;
    }
    
    
    .form-popup-success h3{
        font-size: 14px;
        line-height: 22px;
    }

    .form-popup-success p{
        font-size: 12px;
        line-height: 19px;
    }

    .form-popup-success img{
        width:100px;
    }
    
    
}


/* Policy pages */
.section-policy{
    margin-top:0;
}

.policy-wrap{
    display:flex;
    gap:24px;
}

.policy-text{
    flex:1 1 auto;
    background: #EFF1FB;
    border-radius:24px;
    padding:24px;
}

.policy-text a{
    color:#0000ff;
}

.policy-form{
    flex:0 0 481px;
}

.policy-text p,
.policy-text ul,
.policy-text ol{
    font-size:14px;
    line-height:25px;
    color:var(--black);
    margin-bottom:12px;
}

.policy-text h1{
    font-size: 45px;
    line-height: 55px;
    margin-bottom:24px;
}

.policy-text h2{
    font-size: 16px;
    line-height: 25px;
    color:var(--black);
    margin-bottom:8px;
}

.policy-text ul{
    list-style-type:disc;
}

.policy-text ol{
    list-style: identifier;
    
}

.policy-text ul,
.policy-text ol{
    display:flex;
    flex-direction:column;
    gap:12px;
    list-style-position: outside;
    padding-left:32px;
}

.policy-img{
    width:481px;
    height:414px;
    display:block;
    margin-bottom:24px;
    border-radius:24px;
    overflow:hidden;
}

.policy-img img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    object-position: center;
}

.policy-form button{
    width:100%;
}

@media (max-width: 1519px) {
    .policy-form{
        flex:0 0 447px;
    }
    
    .policy-img{
        width:447px;
    }
}

@media (max-width: 1279px) {
    .policy-wrap{
        flex-direction:column;
    }
    
    .policy-text{
        flex:0 0 100%;
    }
    
    .policy-form{
        flex:0 0 100%;
    }
    
    .policy-img{
        display:none;
    }
    
    .policy-text h1{
        font-size: 35px;
        line-height: 50px;
    }
}

@media (max-width: 767px) {
    .policy-text h1{
        font-size: 28px;
        line-height: 37px;
    }
}


/* GALLERY POPUP */
.gallery-popup{
    position:fixed;
    inset:0;
    z-index:9990;

    
    align-items: center;
    justify-content: center;
    
    background: rgba(12, 18, 29, 0.5);
    
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    
    display:none;
}

.gallery-popup.is-open{
    display:flex;
}


.gallery-popup-body{
    width:1150px;
    height:847px;
    position:relative;
    display:flex;
    flex-direction:column;
}

.gallery-popup-close{
    flex:0 0 87px;
    height:87px;
    display:flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.gallery-popup button{
    display:block;
    padding:0;
    margin:0;
    border:none;
    outline:none;
    background:transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    cursor:pointer;
    color:#fff;
    transition: color 0.3s ease-in-out;
}

.gallery-popup-close button{
    width:75px;
    height:75px;
}

.gallery-popup-close button:hover{
    color:var(--orange);
}

.gallery-popup-close button svg{
    width:75px;
    height:75px;
    display:block;
}

.gallery-popup-container{
    display:flex;
}

.gallery-popup-arrow{
    flex:0 0 75px;
    width:75px;
}

.gallery-popup-arrow button{
    width:100%;
    height:100%;
    display:flex;
    align-items: center;
    justify-content:center;
}

.gallery-popup-arrow button:hover{
    color:var(--orange);
}

.gallery-popup-arrow button svg{
    width:50px;
    height:50px;
    display:block;
}

.gallery-popup-image{
    flex:0 0 1000px;
    width:1000px;
    height:584px;
    border-radius:24px;
    overflow:hidden;
    background:#f8f9ff;
    user-select: none;
}

.gallery-popup-image img{
    width:100%;
    height:100%;
    object-fit: cover;
    object-position: center;
    display:block;
}

.gallery-popup-previews{
    width:1000px;
    height:140px;
    margin:auto auto 0;
}

.gallery-popup-previews .splide__track--nav>.splide__list>.splide__slide{
    border: 1px solid transparent;
    border-radius:24px;
    overflow:hidden;
    height:140px;
}

.gallery-popup-previews .splide__track--nav>.splide__list>.splide__slide.is-active{
    border-color:var(--orange);
}

.gallery-popup-preview{
    width:100%;
    height:100%;
    display:block;
    background:#f8f9ff;
}

@media (max-width:1519px) {
    .gallery-popup-body{
        height:776px;
    }
    
    .gallery-popup-close{
        flex:0 0 75px;
        height:75px;
    }
    
    .gallery-popup-image{
        height:525px;
    }
}

@media (max-width:1279px) {
    
    .gallery-popup-body{
        width: calc(100% - 40px);
        height:auto;
        overflow:hidden;
    }
    
    .gallery-popup-close{
        flex:0 0 75px;
        height:75px;        
        position:fixed;
        top:64px;
        right:20px;
        z-index:9991;
    }
    
    .gallery-popup-arrow{
        display:none;
    }
    
    .gallery-popup-image{
        flex:0 0 100%;
        width:100%;
        height:408px;
    }
    
    .gallery-popup-previews{
        width:100%;
        height:140px;
        margin:36px auto 0;
    }
    
}


@media (max-width:767px) {
    
    .gallery-popup-body{
        width: calc(100% - 28px);
        height:auto;
        overflow:hidden;
    }
    
    .gallery-popup-close{
        top:24px;
        right:14px;
    }
    
    .gallery-popup-arrow{
        display:none;
    }
    
    .gallery-popup-image{
        height:207px;
    }
    
    .gallery-popup-previews .splide__track--nav>.splide__list>.splide__slide{
        height:86px;
    }
    
    .gallery-popup-previews{
        height:86px;
        margin:24px auto 0;
    }
    
}

/* Cookie popup */
.cookie-popup{
    width:841px;
    position:fixed;
    bottom:20px;
    left:50%;
    margin-left:-420px;
    z-index:9990;
    
    background: rgba(12, 18, 29, 0.9);
    -webkit-backdrop-filter:blur(2px);
    backdrop-filter:blur(2px);
    
    border-radius:22px;
    padding:22px 24px;
    display:flex;
    gap:36px;
    align-items:center;
}

.cookie-popup p{
    font-size: 14px;
    line-height: 25px;
    color:#fff;
    padding:0;
    margin:0;
}

.cookie-popup p a{
    text-decoration: underline;
    color:#fff;
}

@media (max-width:1279px) {
    .cookie-popup{
        width:365px;
        margin-left:-182px;
        flex-direction:column;
        gap:24px;
    }
    
    .cookie-popup > div{
        width:100%;
    }
    
    .cookie-popup button{
        height:45px;
        width:100%;
    }
    
    .cookie-popup p{
        font-size: 12px;
        line-height: 19px;
        text-align:center;
    }
}


@media (max-width:767px) {
    .cookie-popup{
        width:unset;
        left:14px;
        right:14px;
        margin-left:0;
        flex-direction:column;
        gap:24px;
    }
    
    .cookie-popup > div{
        width:100%;
    }
    
    .cookie-popup button{
        height:45px;
        width:100%;
    }
    
    .cookie-popup p{
        font-size: 12px;
        line-height: 19px;
        text-align:center;
    }
}


/* ========= 404 PAGE ========== */
.page-404{
    /*background:red;*/
    display:flex;
    flex-direction:column;
    align-items: center;
    gap:20px;
    padding:150px 0 270px;
}

.page-404 img{
    width:450px;
}

.page-404 h1.page-title{
    margin-bottom:8px;
    text-align:center;
}

.page-404 p{
    font-size: 16px;
    line-height: 26px;
    color: rgba(12, 18, 29, 0.65);
    text-align:center;
}

@media (max-width: 1519px) {
    .page-404 { padding:150px 0 230px }
    .page-404 h1.page-title{ font-size:35px; line-height:50px }
    .page-404 p{ font-size:14px; line-height:25px }
}

@media (max-width: 1279px) {
    .page-404 { padding:164px 0 220px }
    .page-404 img{ width:240px }
    .page-404 h1.page-title{ font-size:28px; line-height:37px }
    .page-404 p{ font-size:16px; line-height:26px }
}

@media (max-width: 767px) {
    .page-404 { padding:120px 0 120px }
    .page-404 img{ width:200px }
    .page-404 h1.page-title{ font-size:22px; line-height:32px }
    .page-404 p{ font-size:14px; line-height:25px }
}