*{
  box-sizing: border-box;
}
html, body{
    width: 100vw;
    overflow-x: hidden;
}

/* MAIN BANNER */

.banner-down-icon{
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.banner-muar-dark{
    background-color: rgba(0, 0, 0, 0.5);
}
.banner-muar-light{
    background-color: rgba(255, 255, 255, 0.5);
}
.banner_content{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.logo_banner img{
    max-width: 200px;
}
.header_banner{
    font-size: 4rem;
    /* color: #fff; */
    font-weight: 400;
    letter-spacing: 0.5rem;
}
.text_banner{
    /* color: #fff; */
    font-weight: 100;
    max-width: 700px;
}
.arrow {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, -50%);
    /*transform: rotate(90deg);*/
    cursor: pointer;
}

.arrow span {
    display: block;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 2s infinite;
}

.arrow span:nth-child(2) {
    animation-delay: -0.2s;
}

.arrow span:nth-child(3) {
    animation-delay: -0.4s;
}

@keyframes animate {
    0% {
        opacity: 0;
        transform: rotate(45deg) translate(-20px, -20px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: rotate(45deg) translate(20px, 20px);
    }
}



/* ABOUT */
section{
    padding: 130px 0;
}
#about{
    /* background-color: #1E1E1E; */
    /* color: #fff; */

}
.about_header{
    font-size: 4rem;
    /* color: #fff; */
    font-weight: 400;
    letter-spacing: 0.5rem;
}
.about_caption_text{
    /* color: #fff; */
    font-weight: 100;
    max-width: 700px;
}

.about_img_block{
    width: 400px;
    /* border: 1px solid #fff; */
    opacity: 1;
    transition: 0.4s;
    object-fit: cover;
}

/* FEATURES */

#features{
    /* background-color: #1E1E1E; */
    /* color: #fff; */
}
.feature_content{
    transition: transform .2s;
}
/* .feature_content:hover .feature_header{
    color: #FCD9B8;
} */

.feature_header_text{
    padding-top: 20px;
    font-size: 1.5rem;
}
.border-features{
    border-right: 2px;
    border-left: 0;
    border-style: solid;
    /* border-image: linear-gradient(to bottom, #181818, #eee, #181818) 1 100%; */
}
.border-features:last-child {
    border-right: 0;
}


/* SLIDER */

#photo_scroll{
    /* background-color: #1E1E1E; */
    /* color: #fff; */
  }
  .scroll_header{
    font-size: 4rem;
    /* color: #fff; */
    font-weight: 400;
    letter-spacing: 0.3rem;
  }
  .sample-slider{
    /* background-color: #1E1E1E; */
    position: relative;
  }
  .text-colored{
    /* color: #F8923D; */
  }
  body {
    /* color: #fff; */
    /* background-color: #1E1E1E; */
    overflow-x: hidden;
  }
  @media (min-width: 300px){ 
    .swiper-slide-content{
      height: 400px;
    }
  }
  @media (min-width: 800px){ 
    .swiper-slide-content{
      height: 500px;
    }
  }
  @media (min-width: 1200px) { 
    .swiper-slide-content{
      height: 600px;
    }
  }
  .slider-content-hover{
    height: 100%;
    width: 100%;
    position: relative;
    opacity: 0;
    background-color: rgba(0, 0, 0, 0.7);
  }
  .slider-content-hover:hover{
    opacity: 1;
    transition: .6s;
  }
  .slider-content-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
  .slider-content-header{
    font-size: 3rem;
    font-weight: 400;
    letter-spacing: 0.5rem;
  }
  .slider-scrollbar{
    height: 3px!important;
    border-radius: 0;
    max-width: 1000px;
    /* background-color: #fff; */
    left: 0!important;
  }
  .slider-scrollbar .swiper-scrollbar-drag{
    /* background-color: #F8923D; */
  }


/* INFO BLOCK #1 */

.info_caption{
    vertical-align: middle;
    display: table-cell;
}
.info_caption h1{
    letter-spacing: 0.45rem;
}


/* INFO BLOCK #2 */

body{
    /* font-size: 16px; */
}
.info_2_image{
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: center center;
}

.info2_text_block{
}
.info2_header{
    font-size: 4rem;
    /* color: #fff; */
    font-weight: 400;
    letter-spacing: 0.5rem;
}
.info2_header_mobile{
    font-size: 2.5rem;
}
.info2_list ul li{
    padding: 1rem 0;
}
.info2_list ul li::marker {
    /* color: #F8923D; */
}
.size-12x{
    font-size: 1.2em;
}



/* ORDER #1 */


.card-order-2 {
    width: 100%;
    height: 100%;
    
    /* border: 1px solid #fff; */
  }
  
  .card-order-2 .top-image{
      object-fit: cover;
      object-position: center center;
  }
  
  .order_front_content{
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  .order_back_header{
      font-size: 1.5rem;
  }
  /* .order_back_count, .order_back_price{
      color: #F8923D;
  } */
  .btn-image-modal{
      text-decoration: underline;
      background: none;
       border: none;
       padding: 0;
  }
  .btn-image-modal:hover, .btn-image-modal:active, .btn-image-modal:focus{
      text-decoration: underline;
      background: none;
       border: none;
       padding: 0;
       box-shadow: none;
  }


  /* ORDER #2 */
    /* Flip */
    .orderFlipCard {
        perspective: 1000px;
        height: 100%;
      }
      .orderFlipCard .boxes {
        display: grid;
        transition-duration: 0.6s;
        transition-timing-function: ease-in-out;
        transform-style: preserve-3d;
        height: 100%;
      }
      .orderFlipCard .boxes .box {
        /* padding: 1rem; */
        /* border: 1px solid #fff; */
        /*---------*/
        grid-row: 1/2;
        grid-column: 1/2;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
      }
      .orderFlipCard .boxes .box.front {
        transform: rotateY(0deg);
      }
      .orderFlipCard .boxes .box.back {
        transform: rotateY(-180deg);
      }
      .orderFlipCard:hover .boxes {
        transform: rotateY(-180deg);
      }
      .order_title{
          font-size: 3.5rem;
          /* text-decoration: underline; */
          /* color: #F8923D; */
      }
      .return_button{
          position: absolute;
          /* color: #F8923D; */
          font-size: 1.5rem;
          height: 50px;
          width: 50px;
          right: 20px;
          bottom: 20px;
          display: flex;
          justify-content: center;
          align-items: center;
          border-radius: 50%;
          /* border: 2px solid #F8923D; */
      }
      
      /* .order_back_count, .order_back_price{
          color: #F8923D;
      } */
      .btn-image-modal, .btn-image-modal:hover, .btn-image-modal:active, .btn-image-modal:focus{
          text-decoration: underline;
          background: none;
          border: none;
          padding: 0;
          box-shadow: none;
      }
  


  /* Modal */
.modal {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: .3s;
    top: -1000px;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    overflow-y: scroll;
    padding: 60px 15px;
    }
    
    .modal_active {
    position: fixed;
    top: 0;
    visibility: visible;
    opacity: 1;
    transition: .3s;
    }
    
    .modal__content {
    width: 100%;
    max-width: 1200px;
    height: 100%;
    max-height: 90vh;
    padding: 50px;
    /* background: #1E1E1E; */
    border-radius: 3px;
    position: relative;
    box-shadow: 0 5px 15px black;
    position: relative;
    }
    
    .modal__close-button {
    background: rgb(30, 30, 30);
    /* color: #fff; */
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    position: absolute;
    right: 10px;
    top: 10px;
    background: none;
    cursor: pointer;
    transition: .3s;
    outline: none;
    }
    
    .modal__close-button:hover {
    /* background: #1E1E1E; */
    transition: .3s;
    transform: rotate(180deg);
    /* color: #fff; */
    }
    
    .modal__title {
    font-size: 1.8rem;
    text-transform: uppercase;
    margin: 0 0 15px;
    }
    
    .modal__description {
    font-size: 1.125rem;
    }


    /* Modal Swiper */
    .modal-slider{
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .modal-slider .image-slide-modal {
      width: 100%;
      height: 100%;
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .modal-slider .image-slide-modal img{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }
    .modal-slider .image-slide-modal  .image-slide-navbar {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
    }
    .modal-slider .image-slide-modal  .image-slide-navbar img {
      max-height: 100%;
      max-width: 100%;
      object-fit: cover;
    }
    .modal-slider .swiper-wrapper{
        width: 100%;
    }
    .modal-slider .swiper-button-next, .modal-slider .swiper-button-prev{
        height: 25px;
    }
    .modal-slider .swiper-pagination{
        left: 0;
        right: 0;
    }
    
    .modal-slider .swiper-pagination-bullet {
        margin: 5px;
        /* background: #fff; */
    }
    /* .modal-slider .swiper-pagination-bullet-active{
        background: #F8923D;
    } */


    /* FAQ */
    
.faqFlipCard {
    perspective: 1000px;
  }
  .faqFlipCard .boxes {
    display: grid;
    transition-duration: 0.6s;
    transition-timing-function: ease-in-out;
    transform-style: preserve-3d;
  }
  .faqFlipCard .boxes .box {
    padding: 1rem;
    /* border: 1px solid #fff; */
    /*---------*/
    grid-row: 1/2;
    grid-column: 1/2;
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
  }
  .faqFlipCard .boxes .box.front {
    transform: rotateX(0deg);
  }
  .faqFlipCard .boxes .box.back {
    transform: rotateX(-180deg);
  }
  .faqFlipCard:hover .boxes {
    transform: rotateX(-180deg);
  }
  .faq-header{
      font-size: 4rem;
      font-weight: 400;
      letter-spacing: 0.5rem;
  }
  .faq_question{
      font-size: 2.5rem;
  }
  

/* CONTACTFORM */

#contactform-modal .modal__content{
  height: auto;
  width: auto;
  display: flex;
  justify-content: center;
  padding: 20px;
}
.button_comfort_contactform{
  width: 200px;
}
.button_comfort_contactform:hover{
  background-color: transparent!important;
}
.button_comfort_contactform:focus{
  box-shadow: none;
}

  /* CONTACTS */
  .contacts-muar{
    background-color: rgba(0, 0, 0, 0.5);
}
.contacts_content{
    width: 100%;
    padding: 30px;
}
.logo_contacts{
    max-width: 200px;
}
.header_contacts{
    font-size: 2rem;
    font-weight: 400;
    letter-spacing: 0.5rem;
}
.text_contacts{
    /* color: #fff; */
    font-weight: 100;
}


/* SOCIAL LINK  */

.social-links ul {
    padding: 0;
    display: inline-grid;
    grid-auto-flow: column;
    list-style-type: none;
    grid-template-columns: auto repeat(8, calc((var(--active, 0) * 30px) + 10px));
    transition: grid-template-columns 0.35s var(--ease-elastic-1);
  }
  
  .social-links {
    /* width: 66ch; */
  }
  
  .social-links li {
    display: grid;
    justify-content: end;
    z-index: calc(var(--count) - var(--index));
  }
  
  .social-links nav {
    position: relative;
  }
  
  nav > button {
    position: absolute;
    left: 0;
    background: red;
    z-index: var(--count);
  }
  
  .social-links a {
    /* background: hsl(0 0% 60% / 0.18); */
    /* background: rgba(248, 146, 63, 1); */
    /* border: 1px solid #000; */
    display: inline-block;
    /* padding: var(--size-2) var(--size-4); */
    padding: 5px 8px;
    border-radius: var(--radius-5);
    margin: 0;
    color: var(--gray-0);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-0);
    backdrop-filter: blur(40px);
    transition: color 0.2s, background 0.2s;  
  }
  .social-links a:hover{
    /* background: rgba(248, 146, 63, 1); */
  }
  .no-click {
    pointer-events: none;
    cursor: default;
  }
  
  .social-links a:visited {
    color: var(--gray-0);
  }
  
  .social-links svg {
    height: 24px;
    aspect-ratio: 1;
    fill: currentColor;
  }
  
  .social-links span {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    grid-template-columns: 16px 1fr;
    /* gap: 0.25rem; */
  }
  
  .social-links li:is(
    :nth-of-type(2),
    :nth-of-type(3),
    :nth-of-type(4),
    :nth-of-type(5),
    :nth-of-type(6),
    :nth-of-type(7),
    :nth-of-type(8)
  ) span {
    opacity: var(--active, 0);
  }
  
  .social-links li:is(
    :nth-of-type(2),
    :nth-of-type(3),
    :nth-of-type(4),
    :nth-of-type(5),
    :nth-of-type(6),
    :nth-of-type(7),
    :nth-of-type(8)
  ) 
  .social-links a:is(:hover, :focus) {
    background: var(--gray-0);
    color: var(--gray-12);
  }
  
  .social-links a:focus-visible {
    outline-color: transparent;
  }
  
  .social-links ul:is(:focus-within, :hover) {
    --active: 1;
  }


  /* NAV MENU  */
  .burger-checkbox {
    position: absolute;
    visibility: hidden;
    }
    .burger {
    position: fixed;
    right: 30px;
    top: 30px;
    z-index: 1111;
    cursor: pointer;
    display: block;
    border: none;
    background: transparent;
    width: 40px;
    height: 26px;
    }
    .burger .account-link{
        display: none;
        position: absolute;
        right: 0;
        top: 60px;
        width: 40px;
    }
    .burger-checkbox:checked ~ .burger .account-link{
        display: block;
        animation-name: fall-down-ul;
        animation-duration: 1s;
    }
    @keyframes fall-down-ul {
        from {
            position: absolute;
            top: 0;
        }
        to {
            position: absolute;
            top: 60px;
        }
    }
    .burger .account-link ul{
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        list-style: none;
        width: 100%;
        justify-content: center;
        position: relative;
    }
    .burger .account-link ul li{
        /* display: flex;
        justify-content: center; */
        text-align: center;
        padding-bottom: 20px;
    }

    .burger::before,
    .burger::after {
    content: '';
    left: 0;
    position: absolute;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 10px;
    /* background: #fff; */
    }
    .burger::before {
    top: 0;
    /* box-shadow: 0 11px 0 #fff; */
    transition: box-shadow .3s .15s, top .3s .15s, transform .3s;
    }
    .burger::after {
    bottom: 0;
    transition: bottom .3s .15s, transform .3s;
    }
    .burger-checkbox:checked + .burger::before {
    top: 11px;
    transform: rotate(45deg);
    box-shadow: 0 6px 0 rgba(0,0,0,0);
    transition: box-shadow .15s, top .3s, transform .3s .15s;
    }
    .burger-checkbox:checked + .burger::after {
    bottom: 11px;
    transform: rotate(-45deg);
    transition: bottom .3s, transform .3s .15s;
    }
    .menu-content {
    z-index: 1010;
    top: 0;
    right: 0;
    position: fixed;
    min-height: 100vh;
    /* min-width: 360px; */
    /* display: grid; */
    gap: 12px;
    margin: 0;
    
    list-style-type: none;
    transform: translateX(100%);
    transition: .3s;
    width: 200px;
    }
    .dark-menu-bg .menu-content {
      background: rgba(30, 30, 30, 0.95);
      color: #fff;
    }
    .light-menu-bg .menu-content {
      background: rgba(250, 250, 250, 0.95);
      color: #000;
    }
    .light-menu-bg a, .light-menu-bg a:visited{
      color: #000;
    }
    .light-menu-bg .social-links a:hover{
        color: #000!important;
    }
    .dark-menu-bg .social-links a:hover{
      color: #fff!important;
    }
    
    @keyframes bg-nav {
        from {
            opacity: 0.7;
        }
        to {
            opacity: 1;
        }
    }

    @media (max-width: 799px) {
        .menu-content{
            width: 100vw;
        }
    }
    @media (min-width: 800px) and (max-width:1299px) {
        .menu-content{
            width: 50vw;
            display: grid;
        }
    }
    @media (min-width: 1300px){
        .menu-content{
            width: 30vw;
            display: grid;
        }
    }
    .menu-item {
    display: block;
    padding: 8px;
    color: white;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    }
    .menu-item:hover {
    background: rgba(255,255,255,.2)
    }
    .burger-checkbox:checked ~ .menu-content {
    transform: translateX(0);
    animation-name: bg-nav;
    animation-duration: 0.5s;
    }
    .menu-list li{
        margin-bottom: 10px;
        /* margin-right: 40px; */
        /* background-color: rgba(0,0,0,.5);
        box-shadow: 5px 5px 5px rgba(256,256,256,.3); */
        letter-spacing: 0.2em;
        width: 90%;
        text-transform: uppercase;
        font-weight: 400;
    }
    .underline-one {
        /* color: #fff; Цвет обычной ссылки */
        position: relative;
        cursor: pointer;
        text-decoration: none; /* Убираем подчеркивание */
    }
    .underline-one:after {
        content: "";
        display: block;
        position: absolute;
        right: 0;
        bottom: -3px;
        width: 0;
        height: 2px; /* Высота линии */
        /* background-color: #fff; Цвет подчеркивания при исчезании линии */
        transition: width 0.5s; /* Время эффекта */
    }

    .underline-one:hover:after {
        content: "";
        width: 100%;
        display: block;
        position: absolute;
        left: 0;
        bottom: -3px;
        height: 2px; /* Высота линии */
        /* background-color: #F8923D; Цвет подчеркивания при появлении линии */
        transition: width 0.5s;  /* Время эффекта */
    }
    .nav-logo{
        max-height: 70px;
    }
    .nav-logo a img{
        max-height: 70px;
    }
    
    
    .navbar {
        position: relative;
        /* margin: 0px auto; */
        padding: 50px 0;
        clear: both;
    }
    
    .ul-menu-2{
      background-color: #1E1E1E;
      list-style: none;
    }
      
    .ul-menu {
      list-style: none;
      padding: 0;
      margin: 0;
      /*height: 100px;*/
      border-radius: 2px;
      -moz-border-radius: 2px;
      -webkit-border-radius: 2px;
      
      /* == */
      width: 340px;
      /* == */
    }
    .ul-menu li {
      position: relative;
      /*float:left;*/
    }
    .ul-menu li a {
      text-transform: uppercase;
      display: block;
      text-decoration: none;
      padding: 12px 20px;
      /* color: #777; */
      /*text-align: center;
      border-right: 1px solid #E7E7E7;*/
      
      /* == */
      text-align: left;
      height: 36px;
      position: relative;
      /* == */
    }
    .ul-menu li a i {
      /*display: block;
      font-size: 30px;
      margin-bottom: 10px;*/
      
      /* == */
      float: left;
      font-size: 20px;
      margin: 0 10px 0 0;
      /* == */
      
    }
    /* == */
    .ul-menu li a p {
      float: left;
      margin: 0 ;
    }
    /* == */
    
    
    .ul-menu li a i, .ul-menu li a strong, .ul-menu li a small {
      position: relative;
      
      transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -webkit-transition: all 300ms linear;
    }
    
    .ul-menu li a.active {
      position: relative;
      border:0;
      /*border-top: 4px solid #e67e22;
      border-bottom: 4px solid #e67e22;
      margin-top: -4px;*/
      margin: 0 -4px;
      /* == */
    }
    .ul-menu li a.active:before {
      content: "";
      position: absolute;
      /*top: 0;
      left: 45%;
      border-top: 5px solid #e67e22;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;*/
      
      /* == */
      top: 42%;
      left: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
      /* == */
    }
    
    /* == */
    .ul-menu li a.active:after {
      content: "";
      position: absolute;
      top: 42%;
      right: 0;
      border-top: 5px solid transparent;
      border-bottom: 5px solid transparent;
    }
 
    
    
    .ul-menu li ul,
    .ul-menu li ul li ul {
      position: absolute;
      height: auto;
      min-width: 200px;
      padding: 0;
      margin: 0;
      /*border-top: 4px solid #e67e22;*/
      opacity: 0;
      visibility: hidden;
      transition: all 300ms linear;
      -o-transition: all 300ms linear;
      -ms-transition: all 300ms linear;
      -moz-transition: all 300ms linear;
      -webkit-transition: all 300ms linear;
      /*top: 130px;*/
      z-index: 1000;
      
      /* == */
      right:340px;
      top: 0px;
      /* == */
    }
    .ul-menu li ul:before {
      content: "";
      position: absolute;
      /*top: -8px;
      left: 23%;
      border-bottom: 5px solid #e67e22;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;*/
      
      /* == */
      top: 25px;
      left: -9px;
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
      /* == */
    }
    .ul-menu li:hover > ul,
    .ul-menu li ul li:hover > ul {
      display: block;
      opacity: 1;
      visibility: visible;
      /*top: 100px;*/
      
      /* == */
      right:340px;
      /* == */
    }
    /*.ul-menu li ul li {
      float: none;
    }*/
    .ul-menu li ul li a {
      padding: 10px;
      text-align: left;
      border: 0;
      
      /* == */
      height: auto;
      /* == */
    }
    .ul-menu li ul li a i {
      font-size: 16px;
      display: inline-block;
      margin: 0 10px 0 0;
    }
    .ul-menu li ul li ul {
      right: 230px;
      top: 0;
      border: 0;
    }  
    .ul-menu li ul li ul:before {
      content: "";
      position: absolute;
      top: 15px;
      /*left: -14px;*/
      /* == */
      left: -9px;
      /* == */
      border-bottom: 5px solid transparent;
      border-top: 5px solid transparent;
    }
    .ul-menu li ul li:hover > ul {
      top: 0px;
      right: 340px;
    }
    
    
    
    /*.ul-menu li.float {
      float: right;
    }*/
    .ul-menu li a.search {
      /*padding: 29px 20px 30px 10px;*/
      padding: 10px 10px 15px 10px;
      clear: both;
    }
    .ul-menu li a.search i {
      margin: 0;
      display: inline-block;
      font-size: 18px;
    }
    .ul-menu li a.search input {
      padding: 10px;
      outline: none;
      
      /* == */
      width:170px;
      float:left;
      /* == */
    }
    .ul-menu li a.search button {
      /*padding: 10px;*/
      outline: none;
      margin-left: -4px;
      
      /* == */
      float:left;
      padding: 10px 10px 11px 10px;
      /* == */
    }
    
    
    
    .search-mobile { 
      display:none !important;
      border-radius:0 3px 3px 0;
    }
    .search-mobile i { 
      margin:0 !important;
    }

    @media only screen and (max-width: 479px){
      .ul-menu li ul {
        right: 0;
        top: 30px;
      }
      .ul-menu li ul li ul{
        right: 0;
        top: 30px;
      }
      .ul-menu li:hover > ul, .ul-menu li ul li:hover > ul{
        right: 0;
        top: 30px;
      }
    }
    
     /*BUTTONS*/
     a:visited {
      /* color: #fff; */
  }
  .button_comfort_color{
    /* --line_color : #fff ; */
    /* --back_color : #F8923D  ; */
  }
  .button_comfort{
      border: none;
      box-shadow: none;
      position : relative ;
      display: block;
      z-index : 0 ;
      width : 200px ;
      height : 56px ;
      text-decoration : none ;
      font-size : 14px ; 
      font-weight : bold ;
      color : var(--line_color) ;
      letter-spacing : 2px ;
      transition : all .3s ease ;
      background-color: transparent;
      overflow: visible;
  }
  .button__text{
      display : flex ;
      justify-content : center ;
      align-items : center ;
      width : 100% ;
      height : 100% ;
  }
  .button_comfort::before,
  .button_comfort::after,
  .button__text::before,
  .button__text::after{
      content : '' ;
      position : absolute ;
      height : 3px ;
      border-radius : 2px ;
      background : var(--line_color) ;
      transition : all .5s ease ;
  }
  .button_comfort::before{
      top : 0 ;
      left : 54px ;
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button_comfort::after{
      top : 0 ;
      right : 54px ;
      width : 8px ;
  }
  .button__text::before{
      bottom : 0 ;
      right : 54px ;
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button__text::after{
      bottom : 0 ;
      left : 54px ;
      width : 8px ;
  }
  .button__line{
      position : absolute ;
      top : 0 ;
      width : 56px ;
      height : 100% ;
      overflow : hidden ;
  }
  .button__line::before{
      content : '' ;
      position : absolute ;
      top : 0 ;
      width : 150% ;
      height : 100% ;
      box-sizing : border-box ;
      border-radius : 300px ;
      border : solid 3px var(--line_color) ;
  }
  .button__line:nth-child(1),
  .button__line:nth-child(1)::before{
      left : 0 ;
  }
  .button__line:nth-child(2),
  .button__line:nth-child(2)::before{
      right : 0 ;
  }
  .button_comfort:hover{
      letter-spacing : 6px ;
      background-color: transparent;
  }
  .button_comfort:hover::before,
  .button_comfort:hover .button__text::before{
      width : 8px ;
  }
  .button_comfort:hover::after,
  .button_comfort:hover .button__text::after{
      width : calc( 100% - 56px * 2 - 16px ) ;
  }
  .button_comfort:focus{
      outline: none;
      border: none;
  }
  .button_comfort:active{
      background: transparent;
  }
  .button__drow1,
  .button__drow2{
      position : absolute ;
      z-index : -1 ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
  }
  .button__drow1{
      top : -16px ;
      left : 40px ;
      width : 32px ;
      height : 0;
      transform : rotate( 30deg ) ;
  }
  .button__drow2{
      top : 44px ;
      left : 77px ;
      width : 32px ;
      height : 0 ;
      transform : rotate(-127deg ) ;
  }
  .button__drow1::before,
  .button__drow1::after,
  .button__drow2::before,
  .button__drow2::after{
      content : '' ;
      position : absolute ;
  }
  .button__drow1::before{
      bottom : 0 ;
      left : 0 ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( -60deg ) ;
  }
  .button__drow1::after{
      top : -10px ;
      left : 45px ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( 69deg ) ;
  }
  .button__drow2::before{
      bottom : 0 ;
      left : 0 ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( -146deg ) ;
  }
  .button__drow2::after{
      bottom : 26px ;
      left : -40px ;
      width : 0 ;
      height : 32px ;
      border-radius : 16px ;
      transform-origin : 16px 16px ;
      transform : rotate( -262deg ) ;
  }
  .button__drow1,
  .button__drow1::before,
  .button__drow1::after,
  .button__drow2,
  .button__drow2::before,
  .button__drow2::after{
      background : var( --back_color ) ;
  }
  .button_comfort:hover .button__drow1{
      animation : drow1 ease-in .06s ;
      animation-fill-mode : forwards ;
  }
  .button_comfort:hover .button__drow1::before{
      animation : drow2 linear .08s .06s ;
      animation-fill-mode : forwards ;
  }
  .button_comfort:hover .button__drow1::after{
      animation : drow3 linear .03s .14s ;
      animation-fill-mode : forwards ;
  }
  .button_comfort:hover .button__drow2{
      animation : drow4 linear .06s .2s ;
      animation-fill-mode : forwards ;
  }
  .button_comfort:hover .button__drow2::before{
      animation : drow3 linear .03s .26s ;
      animation-fill-mode : forwards ;
  }
  /* .button_comfort:hover .button__drow2::after{
      animation : drow5 linear .06s .32s ;
      animation-fill-mode : forwards ;
  } */
  @keyframes drow1{
      0%   { height : 0 ; }
      100% { height : 100px ; }
  }
  @keyframes drow2{
      0%   { width : 0 ; opacity : 0 ;}
      10%  { opacity : 0 ;}
      11%  { opacity : 1 ;}
      100% { width : 120px ; }
  }
  @keyframes drow3{
      0%   { width : 0 ; }
      100% { width : 80px ; }
  }
  @keyframes drow4{
      0%   { height : 0 ; }
      100% { height : 120px ; }
  }
  @keyframes drow5{
      0%   { width : 0 ; }
      100% { width : 124px ; }
  }
  
  /* PAGE PROFILE */
  #profile .wa-field .wa-name{
    padding-bottom: 10px;
  }
  #profile .wa-field .wa-value input:not([type='submit']):not([type='button']){
    min-width: 300px;
  }
  #profile .wa-field{
    padding: 20px 0;
  }
  #profile .wa-form {
    padding: 30px 0;
  }
  #profile .field{
    width: 100%;
    padding: 20px 0;
    display: flex;
    justify-content: between;
  }
  


  /* PAGE  */

  #page{
    min-height: 93vh;
  }


  /* SIGNUP */

  .wa-signup-form-fields, .wa-signup-form-actions{
    padding: 30px 0;
  }
  .wa-signup-form-wrapper .wa-field .wa-value input, .wa-field-login .wa-value input, .wa-login-form-wrapper input[type="password"], .wa-field-login {
    width: 100%!important;
    margin-right: 0px!important;
  }
  .wa-signup-form-title, .wa-buttons-wrapper, .wa-login-url, .wa-signup-url, .wa-login-form-title {
    text-align: center;
  }


  /* LOGIN  */
  .wa-field-login .wa-value{
    display: flex;
  }

  input[type=submit]{
     padding: 5px 30px;
  }

  @media(width < 600px){
    .banner-down-icon{
      position: absolute;
      bottom: 0;
      display: flex;
      justify-content: center;
      text-align: center;
    }
    .scroll_header {
      font-size: 2rem;
    }
    .info_caption h1{
      font-size: 1.5rem;
    }
    .return_button {
      right: 10px;
      bottom: 10px;
      height: 40px;
      width: 40px;
    }
    .faq_question {
      font-size: 1.5rem;
    }
  }
  .social-links a{
      display: flex;
      align-items: center;
  }
  #reviews .card {
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0;
  }