/*!
Theme Name: starlife
Theme URI: pprintdim.com
Author: pprintdim.com
Author URI: pprintdim.com
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: best-garage-door
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/
 
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Fonts
   ========================================================================== */

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

@font-face {
  font-display: swap; 
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/Inter-Medium.woff2') format('woff2');
}

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

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

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

@font-face {
  font-display: swap;
  font-family: 'Beatrice Deck';
  font-style: normal;
  font-weight: 500;
  src: url('assets/fonts/BeatriceDeck-Medium.woff2') format('woff2');
}


/*--------------------------------------------------------------
# Animations
--------------------------------------------------------------*/
[data-show] [data-fade-in] {
  opacity: 0;
  transform: translateY(20px);
}

[data-show].animated [data-fade-in] {
   animation: fadeIn 0.6s ease forwards;
}

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

/* All
   ========================================================================== */
html {
   margin:0;
   scroll-behavior: smooth;
   overflow-x: hidden;
   font-size: 16px;
   line-height: 1.2;
   font-style: normal;
}

body {
   margin: 0 auto;
   font-family: 'Inter',sans-serif;
   
   
}

h1,h2,h3,h4 {
   font-family: 'Poppins',sans-serif;
   font-weight: 500;
   margin: 0;
   padding: 0;
}

h1{
   font-size: 56px;
}

h2 {
   font-size: 36px;
}

h3{
   font-size: 24px;
}

h4 {
   font-size: 18px;
}

ul, ol {
   display: flex;
   flex-direction: column;
   padding: 0;
   margin: 0;
}

li,
p {
   display: inline-block;
   
}
p {
   margin-bottom: 1em;
}
img,
video {
   display: block;
   margin: 0;
   border: unset;
   outline: unset;
}

button,
[typ="submit"] {
   cursor: pointer;
   border: unset;
   outline: unset;
} 

* {
   font-size: inherit;
   line-height: inherit;
   color: inherit;
   box-sizing: border-box;
}

a {
   text-decoration: unset;
}

:before,
:after {
   display: block;
   background-position: center;
   background-repeat: normal;
   background-size: contain;
}

section {
   background: #E1EAF2;
   padding: 100px 0;
}

@media (max-width: 1200px) {
   section {
      padding: 60px 0;
   }
}

@media (max-width: 768px) {
   section {
      padding: 35px 0;
   }

   h1{
      font-size: 42px;
   }

   h2 {
      font-size: 30px;
   }

   h3{
      font-size: 20px;
   }

   h4 {
      font-size: 16px;
   }

}

/* Footer
   ========================================================================== */
.footer {
   background: #1A1919;
}
.footer-logo {
   display: block;
   max-width: 240px;
}
.footer__logo-img {
   width: 100%;
}
.footer__main-block {
   padding: 60px 0;
   display: grid;
   align-items: center;
   grid-template-columns: max-content 1fr max-content;
}

.footer__menu-column {
   display: flex;
   flex-direction: column;
}

.footer__menu {
   width: 100%;
   margin-left: auto;
   margin-right: auto;
   display: flex;
   flex-direction: row;
   gap: 15px;
   flex-wrap: wrap;
   max-width: max-content;
   padding-bottom: 15px;
   border-bottom: 1px solid #FFFFFF;

}

.footer__powered-text {
   display: block;
   text-align: center;
   padding-top: 15px;
   color: #FFFFFF;
}

.footer__menu a {
   display: block;
   text-transform: uppercase;
   text-transform: uppercase;
   font-size: 1em;
   color: #FFFFFF;

}
.footer__list li {
   height: fit-content;
}
.footer__list {
   flex-direction: row;
   gap: 16px;
}

.footer__list img {
   width: 40px;
   height: 40px;
}
@media (max-width: 1080px) {
   .footer__main-block {
      padding: 35px 0;
      display: flex;
      gap: 24px 0;
      flex-direction: column;
      align-items: center;
   }
}
@media (max-width: 768px) {
   .footer__menu {
      flex-direction: column;
      align-items: center;
      gap: 15px;
   }
}
/* Video
   ========================================================================== */
.play-btn {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 50%;
    cursor: pointer;
    z-index: 3;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}

.video-box {
   position: relative;
}

.video-box__thumb {
   width: 100%;
}

.video-box:after {
   content: '';
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   position: absolute;
   background: rgba(255, 255, 255, .7);
}

.video-box iframe {
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

.play-btn::before {
    content: '';
    display: block;
    margin-left: 4px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 18px;
    border-color: transparent transparent transparent #1A1919;
}


/* All Classes
   ========================================================================== */
.ab-top-menu {
   flex-direction: row;
}
.container {
   padding: 0 60px;
}
.swiper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.swiper-wrapper {
    display: flex;
    box-sizing: border-box;

}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    box-sizing: border-box;
}
.section-title {
   display: flex;
   align-items: center;
   gap: 0 10px;
   justify-content: flex-start;
   font-size: 24px;
   color: #282A2A;
   margin-bottom: 45px;
}
.section-title span {
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
   line-height: inherit;
}
.section-title img {
   width: 32px;
   height: 32px;
}

.main-btn {
   padding: 0 32px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 1.25em;
   text-align: center;
   color: #FFFFFF;
   border-radius: 45px;
   height: 50px;
   cursor: pointer;
   width: fit-content;
}

.main-btn span {
   font-size: inherit;
   color: inherit;
   line-height: inherit;
   font-weight: inherit;
}

.main-btn.has-icon {
   gap: 0 10px;
}

.main-btn.blue {
   border-color: #00ABC3;
   background-color: #00ABC3;
   color: #FFFFFF;
}

.main-btn.black {
   background: #1A1919;
   border-color: #1A1919;
   color: #FFFFFF;
}
@media (max-width: 1200px) {
   .container {
      padding: 0 30px;
   }

}

@media (max-width: 1080px) {
   .container {
      padding: 0 24px;
   }
   .main-btn {
      height: 45px;
   }
}

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

}

/* Burger menu
   ========================================================================== */

.mob-menu-wrapper {
   position: fixed;
   z-index: -111;
   visibility: hidden;
   padding: 30px 24px;
   height: 100%;
   top: 0;
   right: -360px;
   max-width: 360px;
   width: 0;
   transition: right .5s;
}

.mob-menu-wrapper.open {
   right: 0;
   visibility: visible;
   z-index: 1111;
   width: 100%;
}

.mob-menu-wrapper.open:after {
   content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    backdrop-filter: blur(5px);
    background: rgba(255, 255, 255, 0.75);
}
.mob-menu-wrapper__menu {
   flex-direction: column;
   align-items: center;
   width: 100%;
   gap: 22px;
}
.mob-menu-wrapper__menu a {
   font-size: 1.2em;
   font-weight: 500;
}
.mob-menu-wrapper .btn {
   max-width: 100%;
   width: 100%;
}
.mob-menu-wrapper__main-block {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100%;
   gap: 36px;
   position: relative;
   z-index: 1;
}

/* Inputs
   ========================================================================== */
.form-group {
   width: 100%;
   display: flex;
   flex-direction: column;
}

.form-group + .form-group {
   margin-top: 15px;
}

.form-group__input {
   display: flex;
   align-items: center;
   padding-left: 12px;
   padding-right: 12px;
   font-size: 1em;
   line-height: 1.1;
   background: transparent;
   border-radius: 6px;
   min-height: 50px;
   border: 1px solid #131313;
   width: 100%;
}

.form-group__title {
   margin-bottom: 6px;
   color: #919191;
   font-size: 1.1em;
   font-weight: 500;
}

/* Top Nav
   ========================================================================== */
.top-nav {
   position: fixed;
   z-index: 111;
   width: 100%;
   top: 0;
   left: 0;
   box-shadow: 0px 20px 20px -20px rgba(9, 8, 19, 0.15);
   overflow: hidden;
}

.top-nav:after {
   content: '';
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   backdrop-filter: blur(5px);
   background: rgba(255, 255, 255, 0.75);
}


.top-nav__main-block {
   position: relative;
   height: 80px;
   width: 100%;
   gap: 0 25px;
   justify-content: space-between;
   display: flex;
   align-items: center;
   z-index: 1;
}
.top-nav__burger-btn {
   display: none;
}
.top-nav__logo,
.top-nav__logo-img {
   display: block;
   max-width: 140px;
   max-height: 50px;
}
.top-nav__menu {
   flex-direction: row;
}
.top-nav__menu li a {
   font-weight: 500;
   padding: 10px;
   font-size: 1em;
   line-height: 1.1;
   color: #090813;
}

.top-nav__user-wrapper {
   display: flex;
   align-items: center;
   gap: 0 12px;
}

.top-nav__avatar {
   width: 50px;
   height: 50px;
   border-radius: 50%;
}

.top-nav__logout-btn {
   width: 50px;
   border-radius: 50%;
   padding: 0;
}

.top-nav__logout-btn svg {
   color: #FFFFFF;
   min-width: 24px;
}

@media (max-width: 1080px) {
   .top-nav__menu {
      display: none;
   }
   .top-nav__buttons-group {
      display: flex;
      align-items: center;
      gap: 0 16px;
   }

   .top-nav__burger-btn {
      width: 45px;
      height: 45px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px 0;
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      background: #00ABC3;
   }

   .top-nav__burger-btn:before,
   .top-nav__burger-btn:after {
      content: '';
   }

   .top-nav__burger-btn span,
   .top-nav__burger-btn:before,
   .top-nav__burger-btn:after {
      width: 24px;
      height: 2px;
      background:#FFFFFF;
      display: block;
   }

   .top-nav__burger-btn.active:before,
   .top-nav__burger-btn.active:after {
      position: absolute;
   }

   .top-nav__burger-btn.active:before {
      transform: rotate(45deg);
   }
   .top-nav__burger-btn.active:after {
      transform: rotate(-45deg);
   }

   .top-nav__burger-btn.active span {
      display: none;
   }


}

/* Modals
    ========================================================================== */
.modal-close-wrapper {
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   z-index: 111;
   background: rgba(0,0,0,.7);
   cursor: pointer;
}
.modal-wrapper .form__forgotten-btn {
   background: transparent;
   width: max-content;
   margin-left: auto;
}
.modal-wrapper .form .region-group__input {
   border: unset;
   padding: 0;
   height: auto;
   width: max-content;
   opacity: .8;
   outline: unset!important;
   text-align: right;
   font-size: .9em;
}

.modal-wrapper .form__avatar {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px 16px;
}

.modal-wrapper .form .avatar__img {
   display: block;
   border-radius: 50%;
   width: 50px;
   height: 50px;
   object-fit: cover;
}

.modal-wrapper  .avatar .upload-btn,
.modal-wrapper .avatar .remove-btn {
   flex: 1 1 auto;
}
.modal-wrapper .avatar .upload-btn {
   width: 100%;
   max-width: 100%;
}

.modal-wrapper {
   position: fixed;
   z-index: 1111;
   display: none;
   width: 100%;
   max-width: 560px;
   background: #FFFFFF;
   min-height: 40vh;
   overflow-y: auto;
   border-radius: 14px;
   left: 50%;
   top: 50%;
   transform: translate(-50%,-50%);
}

.search-wrapper .main-block {
   display: flex;
   align-items: center;
   background: #FFFFFF;
   padding-right: 12px;
}


.modal-wrapper.active {
   display: block;
}
.modal-wrapper__btn,
.modal-wrapper__submit-btn {
   cursor: pointer;
   max-width: 300px;
   width: 100%;
   margin-left: auto;
   margin-right: auto;
}
.modal-wrapper__buttons-group {
   display: grid;
   grid-gap: 20px;
   grid-template-columns: repeat(2, 1fr);
}
.modal-wrapper__buttons-group > * {
   width: 100%;
   max-width: 100%;
}

.modal-wrapper__main-block {
   padding: 20px;
   display: flex;
   flex-direction: column;
   gap: 12px 0;
}
.modal-wrapper__title-group {
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.modal-wrapper .title-group__title {
   font-size: 24px;
   font-weight: 500;
   line-height: 1.2;
}
.modal-wrapper__close-btn {
   width: 50px;
   height: 50px;
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   background: transparent;
   padding: 0;
}


.modal-wrapper__close-btn:after,
.modal-wrapper__close-btn:before {
   content: '';
   position: absolute;
   width: 32px;
   height: 1px;
   background: #222;
   opacity: .6;
}

.modal-wrapper__close-btn:after {
   transform: rotate(45deg);
}

.modal-wrapper__close-btn:before {
   transform: rotate(-45deg);
}

.modal-wrapper__close-btn:hover:after,
.modal-wrapper__close-btn:hover:before {
   opacity: 1;
}

.modal-wrapper__form {
   display: flex;
   gap: 20px 0;
   flex-direction: column;
}

.modal-wrapper .form__rating-group {
   display: flex;
   align-items: center;
   gap: 0 12px;
}

.modal-wrapper .rating-group__rating-list {
   gap: 0 7px;
   align-items: center;
}

.modal-wrapper .rating-group__text {
   display: block;
   font-weight: 500;
   font-size: 1em;
   color: #f99b00;
}

.modal-wrapper .rating-group .rating-list__item {
   cursor: pointer;
}

.modal-wrapper .rating-list .item.active polygon {
   fill: #ff8c00;
}

.modal-wrapper .dropdown-group {
   position: relative;
}

.modal-wrapper .text-group__textar img {
   display: inline-block;
   width: auto!important;
   height: 16px!important;
   object-fit: contain;
}

.modal-wrapper .text-group__textar {
   color: #444;
   line-height: 1.4;
}

@media (max-width: 520px) {
   .modal-wrapper {
      border-radius: 12px;
      min-height: auto;
   }

   .modal-wrapper__close-btn {
      width: 30px;
      height: 30px;
   }
}

/* Hero
   ========================================================================== */
.about-sec__main-block {
   display: grid;
   grid-gap: 0 35px;
   grid-template-columns: repeat(2, 1fr);
}
.about-sec__img {
   mix-blend-mode: multiply;
}
.about-sec__read-more-btn {
   display: block;
   margin-top: 4px;
   line-height: 1.4;
   font-size: 1em;
   color: #8E8E93;
}

.about-sec__content-preview p,
.about-sec__content-full p {
   line-height: 1.6;
   color: #090813;
   font-size: 1em;
}
.about-sec__right-column {
   height: 100%;
   width: 100%;
   display: flex;
   align-items: center;
}

@media (max-width: 768px) {
   .about-sec__right-column {
      order: 1;
   }
   .about-sec__left-colemn {
      order: 2;
   }

   .about-sec__img {
      margin-left: auto;
      margin-right: auto;
   }
   
   .about-sec__main-block {
      display: flex;
      flex-direction: column;
      gap: 24px;
   }
} 

/* Hero
   ========================================================================== */

.hero-sec {
   position: relative;
}
.hero-sec:after {
   content: '';
   width: 100%;
   height: 100%;
   max-height: 100vh;
   position: absolute;
   left: 0;
   top: 0;
   background: linear-gradient(rgba(0, 0, 0, .4));
   z-index: 1;
}

.hero-sec__video {
   height: 100vh;
   object-fit: cover;
   width: 100%;

}

.hero-sec__text-wrapper {
   padding-top: 80px;
   position: absolute;
   z-index: 11;
   left: 0;
   top: 0;
   height: 100%;
   width: 100%;
}
.hero-sec .container{
   height: 100%;
   width: 100%;
   display: flex;
   justify-content: flex-start;
   align-items: flex-end;
}

.hero-sec__main-block {
   padding-bottom: 60px;
   padding-top: 80px;
   display: flex;
   flex-direction: column;
   gap: 50px 0;
}
.hero-sec__text-column {
   display: flex;
   flex-direction: column;
   gap: 24px 0;
}
.hero-sec__hero-title {
   line-height: 80px;
   color: #FFFFFF;
   font-weight: 500;
   font-size: 64px;
   text-transform: uppercase;
   font-family: 'Beatrice Deck', sans-serif;
}
.hero-sec__sub-title {
   color: #FFFFFF;
   font-size: 1.3em;
   color: #FFFFFF;
}
@media (max-width: 768px) {
   .hero-sec__video {
      max-height: 60vh;
   }

   .hero-sec__hero-title {
      line-height: 1.3;
   }

   .hero-sec__main-block {
      height: 100%;
      padding-bottom: 30px;
      padding-top: 60px;
      justify-content: flex-start;
   }
} 

/* Benefits sec
   ========================================================================== */
.benefits-sec__columns {
   display: grid;
   grid-gap: 24px;
   grid-template-columns: repeat(2, 1fr);
}
.benefits-sec__left-column {
   display: flex;
   flex-direction: column;
   height: 100%;
   justify-content: space-between;
   width: 100%;
   max-width: 430px;
   margin-left: auto;
   margin-right: auto;
}
.benefits-sec__title {
   text-align: center;

}
.benefits-sec__list-group {
   margin-top: 45px;
   padding: 24px 32px;
   background: #00ABC3;
   border-radius: 24px;
   
}

.benefits-sec__list {
   flex-direction: column;
} 

.benefits-sec .list__item {
   padding: 15px 0;
   display: grid;
   align-items: center;
   grid-gap: 0 15px;
   grid-template-columns: max-content 1fr;
}

.benefits-sec .list__item img {
   width: 45px;
   height: 45px;
}

.benefits-sec .list__item span {
   display: block;
   color: #F2F3FB;
   font-size: 1em;
   line-height: 1.3;
}

.benefits-sec__img {
   max-width: 600px;
   height: auto;
}
@media (max-width: 1200px) {
   .benefits-sec__title {
      display: none;
   }
   .benefits-sec__list-group {
      margin-top: 0;
   }
   .benefits-sec__columns {
      align-items: center;
      grid-template-columns: 430px 1fr;
   }

   .benefits-sec__img {
      margin-left: auto;
      margin-right: auto;
   }
}

@media (max-width: 768px) {
   .benefits-sec__columns {
      display: flex;
      flex-direction: column;
      gap: 30px 0;
      align-items: center;
   }
   .benefits-sec__left-column {
      max-width: 100%;
      order: 2;
   }

   .benefits-sec__right-column {
      order: 1;
      max-width: 100%;
      width: 100%;
   }

   .benefits-sec .list__item {
      grid-gap: 0 10px;
      padding: 10px 0;
   }
}


/* Partners sec
   ========================================================================== */

.partners-sec__list {
   display: grid;
   grid-gap: 24px;
   grid-template-columns: repeat(auto-fill,minmax(260px ,1fr));
}

.partners-sec .list__item {
   overflow: hidden;
   width: 100%;
   position: relative;
} 

.partners-sec .list img {
   padding: 15px;
   width: 100%;
   height: 100px;
   object-fit: contain;
   object-position: center;
}

.partners-sec .list .item a {
   display: flex;
   align-items: center;
   color: #00ABC3;
   font-weight: 500;
   font-size: .9em;
   line-height: 1.3;
}

.partners-sec .list .item a * {
   font-size: inherit;
   line-height: inherit;
   color: inherit;
   font-weight: inherit;
}

.partners-sec .list .item__text-group {
   visibility: hidden;
   width: 0;
   height: 0;
   z-index: -11;
   position: absolute;
   left: 0;
   top: 0;
   transform: scale(0);
   transition: transform .5s;
   display: flex;
   align-items: center;
   flex-direction: column;
   justify-content: center;
   gap: 12px;
}

.partners-sec .list .item:hover .text-group {
   visibility: visible;
   z-index: 1;
   width: 100%;
   height: 100%;
   background:#FFFFFF;
   border: 1px solid #00ABC3;
   transform: scale(1);
   border-radius: 20px;
}


/* Contacta sec
   ========================================================================== */
.contacts-sec__list {
   max-width: 1100px;
   margin-left: auto;
   margin-right: auto;
   display: grid;
   grid-gap: 35px;
   grid-template-columns: repeat(3, 1fr);
}

.contacts-sec .list__item {
   min-height: 100px;
   background: #F3F4F7;
   border-radius: 24px;
   display: grid;
   align-items: center;
   grid-gap: 24px;
   grid-template-columns: max-content 1fr;
   padding: 24px;
}

.contacts-sec .list .item__text {
   display: block;
   font-size: 1em;
   font-weight: 500;
   font-style: 'Poppins',sans-serif;

}

.contacts-sec .list .item__icon {
   width: 40px;
   height: 40px;
   color: #00ABC3;
}
@media (max-width: 1080px) {
   .contacts-sec__list {
      grid-template-columns: repeat(2, 1fr);
   }
   .contacts-sec .list__item:last-child {
      grid-column: 1/3;
   }
}
@media (max-width: 768px) {
   .contacts-sec__list {grid-gap: 24px;}
}

@media (max-width: 520px) {
   .contacts-sec__list {
      gap: 24px;
      flex-direction: column;
      display: flex;
   }
}


/* FAQ sec
   ========================================================================== */

.faq-sec__list {
   flex-direction: column;
   gap: 15px;
   max-width: 900px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 20px;
}

.faq-sec .list__item {
   overflow: hidden;
   background: #F3F4F7;
   border: 1px solid #F3F4F7;
   backdrop-filter: blur(7.5px);
   border-radius: 12px;
   display: flex;
   flex-direction: column;
   padding: 20px;
}

.faq-sec .list__item.active {
   background-color: #FFFFFF;
   border-color: #00ABC3;
}


.faq-sec .list .item__num {
   font-family: 'Poppins', sans-serif;
   font-size: 32px;
   line-height: 1.2;
   color: #090813;

}

.faq-sec .list .item__top-group {
   display: grid;
   align-items: center;
   justify-content: flex-start;
   grid-gap: 16px;
   grid-template-columns: max-content 1fr;
   cursor: pointer;
}

.faq-sec .list .item__question {
   display: grid;
   grid-gap: 0 10px;
   align-items: center;
   grid-template-columns: 1fr max-content;
}

.faq-sec .list .item__question i {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
   height: 18px;
   width: 18px;
}

.faq-sec .list .item__question i:after {
   transform: rotate(90deg);
}

.faq-sec .list .item__question i:after,
.faq-sec .list .item__question i:before {
   content: '';
   width: 100%;
   position: absolute;
   background: #00ABC3;
   height: 1px;
}

.faq-sec .list .item.active .question i:after {
   content: unset;
}

.faq-sec .list .item__question span {
   display: block;
   font-size: 1em;
   font-weight: 400;
   font-family: 'Inter',sans-serif;
} 

.faq-sec .list .item__answer {
   display: none;
   margin-top: 12px;
}

/* Account sec
   ========================================================================== */
.account-sec .page-title {
   margin-bottom: 40px;
}
.account-sec .form-wrapper .sнection-title {
   margin-bottom: 20px;
}
.account-sec__form-wrapper {
   max-width: 660px;
   margin-left: auto;
   margin-right: auto;
   padding: 24px 30px;
   border-radius: 20px;
   background: #FFFFFF;
}
.account-sec__videos-wrapper {
   margin-top: 80px;
}
.account-sec__videos-list {
   display: grid;
   grid-gap: 34px;
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.account-sec .videos-list__item {
   width: 100%;
}

.profile-form .buttons-group {
   margin-top: 20px;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 20px;
}

.profile-form .submit-btn,
.profile-form .logout-btn {
   width: 100%;
   max-width: 100%;
}
.profile-form {
   display: block;
}
.profile-form .avatar {
   margin-top: 20px;
   justify-content: center;
   display: flex;
   gap: 20px;
   align-items: center;
}
.profile-form .avatar__img {
   width: 50px;
   height: 50px;
   border-radius: 50%;
   object-fit: cover;
   display: block;
}

@media (max-width: 768px) {
   .faq-sec .list .item__question {
      font-size: .9em;
   }

   .faq-sec .list .item__answer {
      font-size: .8em;
      margin-top: 7px;
   }
}

/* Tariff sec
   ========================================================================== */
.tariff-sec__video-group {
   max-height: 1200px;
   margin-left: auto;
   margin-right: auto;
}

.tariff-sec__video-box {
   width: 100%;
}

.tariff-sec .video-box__thumb {
   width: 100%;
   object-fit: cover;
   max-height: 90vh;
}

.tariff-sec__list {
   margin-top: 40px;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: center;
   gap: 24px;
}
.tariff-sec .list__item {
   min-width: 230px;
   max-width: 332px;
   display: flex;
   flex-direction: column;
   padding: 20px;
   background: #F3F4F7;
   box-shadow: 0px 4px 8px rgba(16, 12, 91, 0.15);
   border-radius: 16px;
}
.tariff-sec .item__thumb {
   display: block;
   border-radius: 4px;
   overflow: hidden;
}
.tariff-sec .item .thumb__img {
   width: 100%;
   aspect-ratio: 1/1;
   object-fit: cover;
}
.tariff-sec .item__title {
   margin-top: 20px;
   font-size: 20px;
   line-height: 30px;
   text-align: center;
   color: #1A1919;

}
.tariff-sec .item__excerpt {
   height: 75px;
   overflow: hidden;
   margin-top: 20px;
   font-size: .9em;
}
.tariff-sec .item__btn {
   margin-top: 12px;
   max-width: 100%;
   width: 100%;
   gap: 0 10px;
   font-size: .9em;
}

@media (max-width: 768px) {
   .tariff-sec__list {
      display: grid;
      grid-gap: 24px;
      grid-template-columns: repeat(2, 1fr);
   }
   .tariff-sec .list__item {
      max-width: 100%;
   }
}

@media (max-width: 520px) {
   .tariff-sec__list {
      flex-direction: column;
      gap: 20px 0;
      display: flex;
   }

}

/* Education sec
   ========================================================================== */
.education-sec__columns {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 0 45px;
}
.education-sec__text-column {
   padding: 10px 0;
   display: flex;
   flex-direction: column;
   gap: 20px 0;
}
.education-sec__right-column {
   position: relative;
}

.education-sec .right-column__arrow {
   position: absolute;
   right: 190px;
   top: 15px;
   color: #00ABC3;
   max-width: 51px;
}

.education-sec .right-column__title {
   padding-bottom: 40px;
   text-align: center;
}

.education-sec .right-column__title span {
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
   line-height: inherit;
   color: #00ABC3;
}

.education-sec .text-column__descr {
   font-size: 1em;
   line-height: 1.5;
   color: #090813;
}

.education-sec__lessons {
   display: flex;
   flex-direction: column;
   gap: 10px 0;
}


.education-sec .lessons__item {
   display: flex;
   align-items: center;
   gap: 0 16px;
   padding: 16px 20px;
   background: #F3F4F7;
   backdrop-filter: blur(7.5px);
   border-radius: 12px;
}
.education-sec .lessons .item__num {
   display: block;
   font-family: 'Poppins',sans-serif;
   font-size: 32px;
   line-height: 56px;
   color: #282A2A;
}
.education-sec .lessons .item__value {
   display: block;
   line-height: 1.2;
   font-size: 1em;
}

@media (max-width: 1080px) {
   .education-sec__columns {
      grid-gap: 0 30px;
   }
   .education-sec__lessons {
      margin-top: 15px;
   }
}

@media (max-width: 768px) {
   .education-sec__columns {
      display: flex;
      flex-direction: column;
      gap: 30px 0;
   }
}

/* Products sec
   ========================================================================== */
.products-sec__products-wrapper {
   margin-top: 30px;
}

.products-sec .top-swiper .swiper-slide {
   padding: 24px 20px;
   box-shadow: 0px 4px 4px rgba(236, 240, 241, 0.1);
   border-radius: 24px;
}
.products-sec .top-swiper .swiper-slide.is-current {
   background: #D8E3E9;
   box-shadow: 0px 4px 4px rgba(236, 240, 241, 0.6);
}


.products-sec .swiper-slide__img {
   display: block;
   width: 100%;
   max-height: 85px;
   object-fit: contain;
   object-position: center;
}
.products-sec .docs-swiper .swiper-wrapper {
   align-items: center;
   min-height: 200px;
}

.products-sec .docs-swiper {
   margin-top: 30px;
}

.products-sec .docs-swiper--static .swiper-wrapper {
    display: flex;
    justify-content: center; /* або flex-start */
    transform: none !important;
}

.products-sec .docs-swiper--static .swiper-slide {
    margin-right: 24px;
}

.products-sec .docs-swiper .swiper-slide {
   padding: 20px;
   background: #F3F4F7;
   border-radius: 20px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   max-width: 320px;
   min-height: 130px;
   width: 100%;
   position: relative;
}

.products-sec .docs-swiper .swiper-slide a {
   line-height: 1.3;
   display: list-item;
   font-size: .9em;
   color: #00ABC3;
   list-style-type: disc;
}

.products-sec .docs-swiper .swiper-slide-active {
   max-width: 360px;
   min-height: 200px;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px 0;
   background: #FFFFFF;
}

.products-sec .docs-swiper .swiper-slide__text-group {
   visibility: hidden;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   padding-left: 20px;
   position: absolute;
   opacity: 0;
   z-index: -1111;
}
.products-sec .docs-swiper--static .swiper-slide .text-group,
.products-sec .docs-swiper .swiper-slide-active .text-group {
   position: unset;
   z-index: auto;
   margin-top: 12px;
   visibility: visible;
   gap: 20px 0;
   opacity: 1;
} 

.products-sec .docs-swiper .swiper-slide__name {
   display: block;
   font-size: 1em;
   font-weight: 500;
   color: #1A1919;
}