:root {
    /* corporate colors  */
	--big-bullet:"●";
	--small-bullet:"•";
	--small-square-bullet:"▪";
	--big-square-bullet:"■";

    --font-family: 'Manrope';
	--tt-tabs:#ada;
	--tt-link:#05f;
    --tt-green:#478C74;
    --tt-dark-green:#356957;
    --ttl-green:#67A48D;
    --tt-border:groove 1px #D9D9D9;
    --tt-bg-gray:#f7f7f7;

    --tt-gray:#474957;
    --tt-dark-gray:#34343A;
    --tt-lightgray:#D8D9DF;
    --tt-lightblue:#dff0ff;
    --shadow-a:1px 2px 7px #aaa;



    --tt-brown:#995044;
    --tt-cold-blue:#5F95AA;
    --tt-violet:#6C7099;
    --tt-green-blue:#599399;
    /* corporate colors  */

    --nat-green1:#F2FC43;
    --nat-green2:#C4EB2C;
    --nat-green3:#BEE937;
    --nat-green4:#ADDB57;
    --nat-green5:#93C264;
    --nat-green6:#7EAC03;

    --brand-accent: #FAC008;
    --background-base: #FEFEFE;
    --background-on-base: #F4F5F6;
    --background-dark: #282828;
    --text-primary: #212121;
    --text-secondary: #96A097;
    --text-tetriary: #909090;
    --text-primary-on-dark: #F1F1F1;
    --text-primary-on-accent: #000000;
    --border-primary: #F0F0F0;
    --border-secondary: #757575;
    --icon-primary: #454545;
    --icon-secondary: #D9D9D9;
    --icon-primary-on-dark: #F8F8F8;
    --icon-primary-on-accent: #212121;
    --status-negative: #F4212E;
    --status-warning: #FFAE10;
    --status-success: #00AC45;
    --state-default: #FAC008;
    --state-hover: #F1B800;
    --state-active: #E0A800;
    --state-pressed: #D49B00;
    --state-disabled: #BFBFBF;
    --global-white-primary: #ffffff;
    --global-black-primary: #000000;
    --link-primary: #0F62FE;
    --link-secondary: #0043CE;
    --radius-big: 12px;
    --radius-small: 8px;
    --green: #538B76;
    --green-white: #EFF6F2;
    --grenn-black: #272929;
    --primary: #191919
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Manrope';
    background-repeat:no-repeat;
	text-decoration-skip: none;
    text-decoration-skip-ink: none;
    text-decoration-thickness: 1.4px;
    text-underline-offset:.12em;
}


body {
    font-display: swap;
    font-style: normal;
    font-weight: normal;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    position: relative;
    -webkit-font-smoothing: antialised;
    overflow-x: hidden;
    background: var(--background-base);
    color: var(--text-primary);
    box-sizing: border-box;
}

img {
    max-width: 100%;
    object-fit:cover;
}

input:not([type="submit"]),
textarea {
    font-family: 'Manrope';
    height: 56px;
    width: 100%;
    padding: 0 12px;
    border-radius: var(--radius-small);
    border: 1px solid #8D8D8D;
    outline: none;
    font-size: 16px;
}

textarea {
    padding: 12px;
    height: auto;
}

input[type="submit"] {
    font-family: 'Manrope';
    border: none;
    height: 56px;
    padding: 0 50px;
    font-size: 20px;
    letter-spacing: -.25px;
}

input[type="checkbox"] {
    width: auto;
    height: auto;
}


a {
    color: var(--black);
    text-decoration: none;
    display: inline-block;

}

body input:focus:required:invalid,
body textarea:focus:required:invalid {
    color: red;
}

body input:required:valid,
body textarea:required:valid {
    color: green;
}

ul,
ol {
    list-style-position: inside;
}

img {
    max-width: 100%;
}
iframe {
    width: 100%;
    border:none;
}


h1 {
    font-size: 32px;
    line-height: 1.1;
}

h2 {
    font-size: 24px;
    line-height: 1.2;
}

h3 {
    font-size: 20px;
    line-height: 1.4;
}

h4 {
    font-size: 16px;
    font-weight: 900;
}

h2, h3, h4 {
    letter-spacing: -.3px;
}

b, h1, h2, h3 {
    font-weight: 700;
}

select {
    appearance: base-select;
    background: var(--tt-bg-gray);
    border: var(--tt-border);
    border-radius: var(--radius-big);
    display: block;
    padding: .5em 1em;
    outline: none;
    font-size:16px;
    margin-bottom:30px;
    max-width: 100%;

    option {
        appearance: base-select;
        font-family:var( --font-family);
    }
}


/*  --------------- TABLE --------------- */

table {
	width: 100%;
	font-size: 16px;
	margin: 30px 0;
    border: var(--tt-border);
    border-radius: var(--radius-big);
	border-collapse: separate;
	border-spacing: 0;
	background-color:#d0e0ef;
    overflow: hidden;
    th,td {
        padding:.5em .7em;
        text-align:center;
    }
    th {
        font-weight: 500;
    }
    caption {
        text-align:left;
        font-weight: 600;
        font-size:1.05em;
        padding:.2em .7em;
    }
    tbody {
        td {background:white; }
        tr:nth-of-type(2n) td{ background:var(--tt-bg-gray); }
    }
    &.border{
        td, th { border:solid 1px white; border-width:1px 1px 0 0;}
        td {border-color:#bbb;}
    }
}


/* -------------  UNIVERSAL ------------------- */

.bg-blue {
    background: var(--tt-lightblue);
}
.bg-green {
    background: var(--green-white);
}

.bg-gray {
    background: #F7F7F7;
}

.hidden {
    display: none;
}

.overflow-h {
    overflow: hidden;
}

.text-center {
    text-align: center;
}

.right,
.text-right {
    text-align: right;
}

/* ---------- LIVE IMG ----------- */

@keyframes qtilt {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(0, 1px) rotate(0.2deg);
  }
  50% {
    transform: translate(0, 0) rotate(0deg);
  }
  75% {
    transform: translate(1px, 0) rotate(0.2deg);
  }
      100% {
    transform: translate(0, 0) rotate(0deg);
  }
}

.live-img {
  animation: qtilt 10s infinite ease-in-out;
}

/* -------------  ELEMENTS ------------------- */

.container {
    max-width: 1400px;
    margin: auto;
    position: relative;
    font:normal 16px sans serif,'Manrope',roboto,arial;
    padding:0 20px;
}

main {
    overflow: hidden;
}

main section:first-of-type {
    min-height: 500px;
}

main section:not(:first-of-type) {
    margin-top: 50px;
}

main section:last-child {
    padding-bottom:80px;
}

.first-section { /* заголовки страниц */
    h1,h2 { /*margin-bottom: 22px; */}
}


/*TEXT*/

.caps {
    text-transform: uppercase;
}

.name-section {
    margin-bottom: 45px;
}


.text-secondary {
    color: var(--text-secondary);
}


/* ----------------------  FLEX  -------------------- */
.rubber, .flex-rubber {flex-grow:1;}

.flex,
.flex-row {
    display: flex;
    align-items:flex-start;
    gap: 20px;
}

.flex-row {
    flex-flow:row nowrap;
}
.flex-column{
    display:flex;
    flex-flow:column nowrap;
    gap:30px;
}

.flex-wrap,
.flex-row-wrap,
.flex-wrap4,
.flex-wrap5 {
    display:flex;
    flex-flow:row wrap;
    justify-content: center;;
    align-items:flex-start;
}

.flex-wrap4 .grid-item {
    width:300px;
    height:300px;
}

.flex-wrap4 { gap:50px;}
.flex-wrap5 { gap:30px;justify-content: center;}

.flex-wrap4 .grid-item {
    width:300px;
    overflow:hidden;
}

.flex-wrap5 .grid-item{
    width:240px;
}

.gap20,.flex-gap20 { gap: 20px; }
.gap30,.flex-gap30 { gap: 30px; }

.align-center { align-items: center; }
.align-end {  align-items: end; }
.justify-left { justify-content: left; }
.justify-space { justify-content: space-between; }
.justify-center {justify-content: center;}


/* ------ DOUBLE  FLEX SECTIONS  --------- */

.flex-section {
    display:flex;
    flex-flow:row wrap;
    gap:30px;
    justify-content:flex-start;

    .section {
        display:flex;
        flex-flow:column nowrap;
        gap:15px;
        min-width:250px;
        flex:1 1 40%;
        overflow:hidden;/*** ??? ***/
        h2 {
            text-align:center;
            &.caption {
                margin:0;
                text-align:left;
            }
        }
        img.detail {
            object-fit:cover;
            display:block;
        }
    }

    ul {
        list-style:none;
        list-style-type: square;
        color:var(--text-primary);
        line-height:1.6;
        li {
            list-style-type: none;
            position: relative;
            padding-left: 1em;
        }

        li::before {
            color:var(--tt-link);
            left: .1rem;
            content: "•";
            position: absolute;
        }

        a {color:var(--tt-link);}

        a:hover {
            text-decoration:underline;
            text-decoration-thickness: 1.4px;
        }
    }
}

/* -------------------- DOTTED -------------------*/

.dotted {
    dl {
        display:flex;
        flex-flow:row nowrap;
        justify-content:space-between;
        background: url('/local/templates/termotronik_bitrix/css/images/point-7x3-1.gif') repeat-x 1px 80%;
        gap:20px;
    }
    dt,dd {
        display:inline-block;
        background:#fff;
        padding:2px 3px;
    }
}


/* -----------------  В И Д Е О ------------------    */

#tabs .video{
    gap:40px;
    margin-top:20px;
    justify-content: left;
}
.video-container {
     width: 240px; /* Ширина вашего видео */
    cursor: pointer;
    border-radius:var(--radius-big);
    overflow:hidden;
    line-height:2em;
    text-align:center;
    font-size:smaller;
    background:#555;
    color:white;
    position:relative;
    box-shadow:1px 3px 5px #aaa;

    &:hover .play-button {
      background: rgba(230, 0, 0, 0.6); /* Красный фон (как у YouTube) */
    }

    img {
      width: 100%;
      aspect-ratio:16/14;
      display: block;
      object-fit:cover;
    }

    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: white; /* Цвет значка */
      background: rgba(0, 0, 0, 0.4); /* Полупрозрачный фон для контраста */
      border-radius: 50%; /* Делает кнопку круглой */
      padding: 5px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: background 0.3s ease;
    }
}



/* ----------------- main-page ----------------- */


.banners-item {
    background-size: cover;
    background-position: center;
}

.banner-content {
    min-height: 60vh;
    padding: 50px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #fff;
}

.banner-name h1 {
    text-transform: uppercase;
    font-size: 36px;
    font-weight: 700;
    letter-spacing: .2px;
}

.banner-description {
    max-width: 440px;
}

.banner-description p {
    margin-bottom: 20px;
}

.otr-prom {
    display: block;
}

.otr-prom img {
    width: 100%;
    display: block;
    height: 190px;
    object-fit: cover;
    margin-bottom: 12px;
}

.otr-prom p {
    font-size: 16px;
}


.catalog-cat {
    padding: 24px;
}

.catalog-cat h3 {
    margin-bottom: 20px;
}

.catalog-cat p {
    color: var(--text-secondary);
    letter-spacing: -.3px;
    margin-bottom: 33px;
}

.catalog-cat img {
    display: block;
    margin: auto;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

.service-item {
    font-size: 24px;
    padding: 100px 0;
    text-align: center;
    background-size: cover;
    background-position: center;
    display: block;
    color: #fff;
    font-weight: 700;
    /*border-radius: var(--radius-small);*/
}

/* ------- N E W S -------- */
.news-item {
   position:relative;
    h4 {
        margin-bottom: 4px;
    }
    img {
        height: 180px;
        object-fit: cover;
    }
    a {
        display: block;
        height:340px;
        overflow:hidden;
        border:solid 10px var(--green-white);
        font-size:smaller;
    }
    .date {
        padding: 2px 5px;
        color: var(--text-secondary);
        float:right;
        position:absolute; top:0;right:0;
        background:var(--green-white);

    }

}





/* ------------ ???? ------------ */

.popup {
    max-width: 400px;
    padding: 20px;
    border-radius: var(--radius-small);
    background: #fff;
    position: relative;
    margin: auto;
}

.form-fieldset__item {
    margin-bottom: 20px;
    position: relative;
}

.form-fieldset__item sup {
    color: red;
    position: absolute;
    top: 5px;
    font-size: 20px;
    right: 5px;
}



/* --------------- корзина  --------------- */
/*.cart_item {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--icon-secondary);
    padding: 30px 0;
}

.cart-item_article {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 5px;
    line-height: 1;
}

.cart-item_product {
    font-size: 18px;
    font-weight: 700;
}

.cart-item_price {
    font-size: 26px;
    text-align: right;
    font-weight: 500;
}

.quantity_inner {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: right;
}

.bt_minus,
.bt_plus {
    width: 24px;
    height: 24px;
    border-radius: 2px;
    background: #EFF6F2;
    border: none;
    transition: .3s;
}

.bt_minus:hover,
.bt_plus:hover {
    background: var(--green);
    color: #fff;
    ;
}

.quantity_inner .quantity {
    width: 40px;
    height: 24px;
    border: none;
    font-weight: 500;
    text-align: center;
}

.reviews-list img {
    box-shadow: 0 2px 3px 1px #ddd;
}

.hidden-text {
    margin-top: 20px;
    display: none;
}

.cart-button {
    margin-top: 50px;
}

.pagination-list {
    font-style: 16px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    list-style-type: none;
}

.pagination-list_item {}

.pagination-list_item a {
    width: 30px;
    height: 30px;
    display: inline-block;
    text-align: center;
    line-height: 30px;
    border-radius: 50%;
    background-color: var(--green-white);
}

.pagination-list_item.active a {
    background: var(--green);
    color: #fff;
}

.busket-table-item-delete {
    color: red;
    margin-top: 30px;
    cursor: pointer
}

.conclusion-row {
    padding: 30px 20px;
    border-radius: var(--radius-big);
    background-color: var(--green-white);
}

.conclusion-total-final {
    font-size: 26px;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
    margin-bottom: 30px;
}

.conclusion-row .dop-info {
    font-size: 14px;
    margin-top: 20px;
    color: var(--text-secondary);
}

.form-checkbox {
    margin-bottom: 20px;
}

p.mb-25 {
    margin-bottom: 20px;
}

p.mb-35 {
    margin-bottom: 35px;
}

.section-thanks {
    margin-top: 80px;
}

*/

/* ------------------- TABS ----------------- */

#tabs{
    padding:30px 0 30px;
    .tabs {
        display: flex;
        flex-wrap: wrap;
        overflow: visible;
        list-style:none;
        justify-content:center;
        padding:10px 0 30px;
        font-size:18px;
        .ui-tabs-anchor {
            padding: 14px 24px 16px;
            display: block;
            white-space: nowrap;
        }
    }
    .tab {
        flex-grow: 1;
        flex-shrink: 1;
        text-align:center;
        color: #697;
        font-weight: 500;
        font-size:inherit;
        max-width:400px;

        &.active,
        &.ui-tabs-active {
            flex-shrink: 0;
            color: var(--global-white-primary);
            background: var(--tt-green);
            border-color: var(--tt-green);
            border-width:2px 2px 0 3px;
            border-style: outset;
            color:#fff;
            z-index:9;
            border-radius: 2em;
            box-shadow:1px 1px 5px rgb(100,100,100,0.9);
        }
    }
}


.tab_content {
    padding: 10px 0;

    table caption {
        font-weight:500;
        text-align:left;
    }
    table.price th:last-of-type{
        white-space:nowrap;
    }
}


@media only screen and (max-width : 768px) {
    .tabs {
        font-size:16px;
    }

    .tabs .ui-tabs-anchor {padding: 15px 10px;}
}
/* -------------- BIZCARD  --------------- */

.bizcard-list {
    gap:30px;
}

.bizcard {
    min-height: 200px;
    overflow: hidden;
    border: 1px solid var(--tt-bg-gray);
    border-radius: var(--radius-big);
    padding: 20px;
    display:flex;
    flex-flow:row wrap;
    gap: 20px;
}

.bizcard a img {
    width: 120px;
}

.bizcard > div div {
    margin-bottom:5px;
}

.bizcard .contact-company {
    margin-bottom:0;
    font-weight: 700;
}

.bizcard .contact-name {
    font-weight: 500;
    color: var(--text-secondary);
}

.bizcard .contact-phone,
.bizcard .contact-address,
.bizcard .contact-email {
    display: flex;
    gap: 5px;
    align-items:flex-end;
}

/* --------------------- DOUBLE COLUMN ---------------------- */

.cols2 {
   display: flex;
   flex-flow: row wrap;
   justify-content: center;
   align-items: flex-start;
   gap:20px 60px;
}

.cols2 > * {
  flex: 1 1 360px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 300px */
  min-width: 200px; /* Элементы будут сжиматься до 200px перед тем, как произойдет перенос */
  display: flex;
  flex-flow: column nowrap;
   gap:15px;
}

/* --------------------------------------------------------
-----------------------------------------------------------


/* --------------- video-image  -------------


.video-image {
    position: relative;
}

.video-image img {
    display: block;
    margin-bottom: 10px;
}

.video-image_overlay {
    position: absolute;
    display: flex;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 40px;
    justify-content: center;
    align-items: center;
}

----------------------------------------------------------- */
/*
.btn {
    padding: 20px 36px;
    font-size: 16px;
    display: inline-block;
    width: auto;
}

.btn.btn-white {
    background: #fff;
    color: var(--primary);
}

.btn-green {
    border-radius: var(--radius-small);
    background: var(--green);
    transition: .3s;
}

.btn-green-border {
    display: block;
    text-transform: uppercase;
    padding: 16px;
    text-align: center;
    border-radius: var(--radius-small);
    background: var(--green);
    color: var(--global-white-primary);
    border: 1px solid var(--green);
    font-size: 12px;
    transition: .3s;
}

.btn-green-border:hover {
    color: var(--green);
    background: var(--global-white-primary);
}

.btn-white-border {
    display: block;
    text-transform: uppercase;
    padding: 16px;
    text-align: center;
    border-radius: var(--radius-small);
    border: 1px solid var(--green);
    font-size: 12px;
    color: var(--green);
    transition: .3s;
}

.btn-white-border:hover {
    color: var(--global-white-primary);
    background: var(--green);
}

a.big.under {
    font-size: 20px;
    text-decoration: underline;
    color: var(--green);
    font-weight: 700;
}

a.under {
    text-decoration: underline;
}

*/