/*
Theme Name: TrueConfRu
Theme URI: https://wordpress.org/themes/trueconfru/
Author: Admin
Description: TrueConf Ru
Version: 1.0
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------

	1. 	Document Setup
	2. 	Site Header
	3. 	Element Base
	4. 	Index Page
	5. 	Helper Classes
	6. 	CTA Block
	7. 	Tabs Panel
    8. 	FAQ Block
	9. 	Site Footer

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


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

/*	1. Document Setup
/* -------------------------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}

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

/*	2. Site Header
/* -------------------------------------------------------------------------- */

.header-menu {
    height: 76px;
    background: var(--white-color);
    position: sticky;
    top: 0;
    z-index: 10;
    padding-top: 8px;
    padding-bottom: 8px;
    -webkit-box-shadow: 0px 4px 10px 0px rgba(80, 80, 80, 0.10);
            box-shadow: 0px 4px 10px 0px rgba(80, 80, 80, 0.10);
}

.header-menu__container {
    max-width: 1508px;
    height: 58px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 576px) {
    .header-menu__container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.header-menu__logo img {
    display: block;
    width: 100%;
    max-width: 130px;
}

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

/*	3. Element Base
/* -------------------------------------------------------------------------- */

.feature--product {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: minmax(auto, 461px) 24px minmax(auto, 655px);
    grid-template-columns: minmax(auto, 461px) minmax(auto, 655px);
        grid-template-areas: "text img";
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 24px;
}

.feature--product-reverse {
    -ms-grid-columns: minmax(auto, 655px) minmax(auto, 461px);
    grid-template-columns: minmax(auto, 655px) minmax(auto, 461px);
        grid-template-areas: "img text";
}

.feature--product__description {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    grid-area: text;
}

.feature--product-reverse > .feature--product__description {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
}

.feature--product__image {
    -ms-grid-row: 1;
    -ms-grid-column: 3;
    grid-area: img;
}

.feature--product-reverse > .feature--product__image {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
}

.feature--product__image img {
    display: block;
    max-width: 100%;
    margin-left: auto;
}

.feature--product-reverse .feature--product__image img {
    margin-left: unset;
}

@media (max-width: 1024px) {
    .feature--product, .feature--product-reverse {
        -ms-grid-columns: 100%;
        grid-template-columns: 100%;
            grid-template-areas: "img" "text";
    }
    .feature--product__image img,
    .feature--product-reverse .feature--product__image img {
        margin-left: auto;
        margin-right: auto;
    }
    .feature--product__description {
        -ms-grid-row: 2;
        -ms-grid-column: 1;
    }
    .feature--product__image {
        -ms-grid-row: 1;
        -ms-grid-column: 1;
    }
}

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

/*	4. Index Page
/* -------------------------------------------------------------------------- */

.index-header__image {
    max-width: 600px;
    max-height: 400px;
    margin-left: auto;
}

@media (max-width: 1024px) {
    .index-header__image {
        margin-right: auto;
    }
}

.index-header__image--composable {
    position: relative;
}

.index-header__image-background {
    max-width: 100%;
    max-height: 100%;
}

.index-header__image-foreground {
    position: absolute;
    bottom: 0;
    right: 0;
    max-width: 44%;
    width: 44%;
    border-radius: 12px;
    overflow: hidden;
}

.index-header__image-foreground > * {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
    -webkit-box-shadow: -110.883px 205.516px 65px 0px rgba(0, 0, 0, 0.00), -70.736px 131.912px 60.221px 0px rgba(0, 0, 0, 0.01), -40.147px 73.603px 50.662px 0px rgba(0, 0, 0, 0.05), -18.162px 32.5px 37.28px 0px rgba(0, 0, 0, 0.09), -4.779px 8.603px 20.074px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
        box-shadow: -110.883px 205.516px 65px 0px rgba(0, 0, 0, 0.00), -70.736px 131.912px 60.221px 0px rgba(0, 0, 0, 0.01), -40.147px 73.603px 50.662px 0px rgba(0, 0, 0, 0.05), -18.162px 32.5px 37.28px 0px rgba(0, 0, 0, 0.09), -4.779px 8.603px 20.074px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10);
}

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

/*	5. Helper Classes
/* -------------------------------------------------------------------------- */

.grid-layout {
    display: -ms-grid;
    display: grid;
}

@media screen and (min-width: 577px) {
    .grid-layout--column-4 {
        -ms-grid-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-layout--column-3 {
        -ms-grid-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 577px) and (max-width: 1024px) {
    .grid-layout--column-3.grid-layout--row-1 {
        -ms-grid-columns: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-layout--column-3.grid-layout--row-1 > *:nth-child(1) {
        -ms-grid-column: 1;
        -ms-grid-column-span: 2;
        grid-column: 1 / 3;
    }
    .grid-layout--column-3.grid-layout--row-1 > *:nth-child(2) {
        -ms-grid-column: 3;
        -ms-grid-column-span: 2;
        grid-column: 3 / 5;
    }
    .grid-layout--column-3.grid-layout--row-1 > *:nth-child(3) {
        -ms-grid-column: 2;
        -ms-grid-column-span: 2;
        grid-column: 2 / 4;
    }
}

@media screen and (min-width: 771px) {
    .grid-layout--column-2 {
        -ms-grid-columns: repeat(2, 1fr);
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (min-width: 1025px) {
    .grid-layout--column-3 {
        -ms-grid-columns: repeat(3, 1fr);
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-layout--column-4 {
        -ms-grid-columns: repeat(4, 1fr);
        grid-template-columns: repeat(4, 1fr);
    }
}

.gap-40 {
    gap: 40px;
}

.gap-32 {
    gap: 32px;
}

@media screen and (max-width: 770px) {
    .gap-40, .gap-32 {
        gap: 24px;
    }
}

.gap-24 {
    gap: 24px;
}

.gap-12 {
    gap: 12px;
}

.gap-8 {
    gap: 8px;
}

.rounded-12 {
    border-radius: 12px;
}

.rounded-8 {
    border-radius: 8px;
}

.rounded-6 {
    border-radius: 6px;
}

.p-sm-2 {
    padding: 12px;
}

.p-sm-1 {
    padding: 14px;
}

.p-md-1 {
    padding: 18px;
}

.p-md-2 {
    padding: 24px;
}

.p-lg-1 {
    padding: 32px;
}

.p-lg-2 {
    padding: 40px;
}

@media screen and (max-width: 576px) {
    .p-lg-1, .p-lg-2 {
        padding: 24px;
    }
}

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

/*	6. CTA Block
/* -------------------------------------------------------------------------- */

.cta-block {
    padding-left: 40px;
    padding-right: 40px;
}

.cta-block--rounded {
    border-radius: 24px;
}

.cta-block--cyan {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.12%, #0097A7), color-stop(35.49%, #0097A7), color-stop(100.12%, #04B8CB));
    background: -o-linear-gradient(top, #0097A7 0.12%, #0097A7 35.49%, #04B8CB 100.12%);
    background: linear-gradient(180deg, #0097A7 0.12%, #0097A7 35.49%, #04B8CB 100.12%);
}

.cta-block__text {
    padding: 60px 0;
}

@media screen and (min-width: 771px) {
    .cta-block {
        display: -ms-grid;
        display: grid;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-grid-columns: .6fr 1fr;
        grid-template-columns: .6fr 1fr;
        gap: 24px;
        padding-right: 24px;
    }
    .cta-block__media {
        position: relative;
    }
    .cta-block--absolute .cta-block__media img {
        position: absolute;
        bottom: 0;
    }
}

@media screen and (min-width: 1181px) {
    .cta-block {
        -ms-grid-columns: .8fr 1fr;
        grid-template-columns: .8fr 1fr;
    }
    .cta-block__text {
        padding: 80px 0;
    }
}

@media screen and (max-width: 770px) {
    .cta-block__text {
        padding: 60px 0 32px;
    }
    .cta-block__media {
        text-align: center;
    }
}

@media screen and (max-width: 480px) {
    .cta-block__text {
        padding: 40px 0 24px;
    }
    .cta-block {
        padding-right: 24px;
        padding-left: 24px;
    }
}

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

/*	7. Tabs Panel
/* -------------------------------------------------------------------------- */

.tabs-panel__header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    background: var(--extra-light-blue-color);
    border-radius: 6px;
    padding: 8px;
}

@media screen and (max-width: 576px) {
    .tabs-panel__header {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
}

.tabs-panel__tab {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 50%;
            flex: 1 1 50%;
    border-radius: 6px;
    text-align: center;
    padding: 18px;
    cursor: pointer;
    -webkit-transition: background .3s linear;
    -o-transition: background .3s linear;
    transition: background .3s linear;
}

.tabs-panel__tab.tabs-panel__tab--active {
    background: var(--additionl-blue-color);
}

.tabs-panel__content:not(.tabs-panel__content--active) {
    display: none;
}

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

/*	8. FAQ Block
/* -------------------------------------------------------------------------- */

#faq .faq__container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

#faq .faq__item {
    background: var(--light-blue-color);
    border-radius: 8px;
    padding: 0 24px 24px;
}

#faq .faq__question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding-top: 24px;
    margin: 0;
}

#faq .faq__question::after {
    content: "";
    display: inline-block;
    min-width: 24px;
    height: 24px;
    background-color: #1A1A1A;
    -webkit-mask: url(/tc-content/themes/trueconfrf-theme/assets/image/icon/t1-downward.svg) 50% 50% / cover no-repeat;
    mask: url(/tc-content/themes/trueconfrf-theme/assets/image/icon/t1-downward.svg) 50% 50% / cover no-repeat;
    mask-size: cover;
    margin-left: 24px;
    transition: transform .3s linear;
}

#faq .faq__item .faq__question.active::after  {
    transform: rotateX(180deg);
}

#faq .faq__item .faq__question.active + .faq__answer {
    margin-top: 12px;
}

#faq .faq__answer {
    max-height: 0;
    overflow: hidden;
    transition: 0.3s;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

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

/*	9. Site Footer
/* -------------------------------------------------------------------------- */

.footer-navigation {
    background: var(--primary-dark-color);
}