/* GENERAL */
  body{
    margin: 0;
    padding: 0;
    font-family: Inter, sans-serif;
    height: 100vh;
   
  }

  h1, h2, h3, h4{
    margin: 0;
    padding: 0;
  }

  nav, header, section, footer{
    display: flex;
    justify-content: center;
    align-items: center;
  }



  .mobi{
    display: none;
  }


  .fixed {
    z-index: 1001;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
  }

  
  .content {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 1233px;
    justify-content: center;
  }


  /* NAVIGATION */

  nav {
    width: 100%;
    padding: 2px 60px;
    background-color: #3c3e6b;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
  }

  nav .content .info{
    display: flex;
    gap: 20px;
    justify-content: space-between;
    padding: 13px 0;
    width: 100%;
  }



  .logo {
    display: flex;
    align-self: stretch;
    gap: 12px;
    padding: 1px;
    font-weight: 350;
    line-height: 187.5%;
    color: #fff;
    text-decoration: none;
  }

  .logo:hover{
    color:#FF9900
  }

  .logo-image {
    width: 38px;
    aspect-ratio: 0.76;
    object-fit: auto;
    object-position: center;
  }

  .logo-name {
    display: flex;
    flex-direction: column;
    margin: auto 0;
  }


  .last-name {
    margin-top: -4px;
  }

  .menu{
    display: flex;
  }

  .nav-list {
    display: flex;
    align-self: stretch;
    justify-content: space-between;
    gap: 20px;
    margin: auto 0;
    line-height: 30px;
  }

  .nav-list .nav-item{
    color:#fff;
    text-decoration: none;
  }

  .contact-info {
    display: flex;
    align-self: stretch;
    gap: 8px;
    margin: auto 0;
    color: #fafafa;
    line-height: 169%;
  }

  .phone-number {
    font-family: Inter, sans-serif;
    color:#fff
  }

  .contact-separator {
    color: #fff;
  }

  .menu-toggle-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    align-self: center;
  }


  /* MOBILE-ADAPT */
  @media screen and (max-width: 1024px){
    nav{
      padding: 0 15px;
    }

    .contct-separator{
      display: none;
    }

    .logo, .contact-info{
      align-items: flex-start;
      justify-content: flex-start;
    }

    .logo-name{
      display: none;
    }

    nav .content .info{
      align-items: center;
    }

    .contact-info, .nav-list, .menu{
      flex-direction: column;
    }

    .contact-info{
      margin: 0;
      gap:0;
    }

    .contact-info .phone-number{
      font-size: 14.5px;
    }

    .menu{
      width: 98px;
      align-items: flex-start; 
      justify-content: flex-start;
      background: #2e3052;
      padding: 10px;
    }

    .nav-list {
      display: none;
      gap:5px;
    }
  
    .menu-toggle-btn {
      display: block;
      align-self: flex-start;
      padding: 0;
      font-weight: bolder;
    }
    
  }

  /* HEADER */

  #hero-section {
    display: flex;
    flex-direction: column;
    margin-top: 88px;
  }

  #hero-section .content{
    padding: 76px 0 0 0 ;
  }

  @media (max-width: 991px) {
    .hero-section {
      padding: 0 20px;
    }
  }

  .hero-content {
    display: flex;
    margin-left: 11px;
    gap: 8px;
  }

  @media (max-width: 991px) {
    .hero-content {
      flex-wrap: wrap;
    }
  }

  .hero-text {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    flex-basis: 0;
  }

  .hero-lines {
    display: flex;
    gap: 6px;
  }

  .hero-line {
    flex-grow: 1;
    flex-basis: auto;
  }

  .hero-columns {
    display: flex;
  }

  .hero-column-text {
    display: flex;
    flex-direction: column;
    line-height: normal;
    max-width: 700px;
    width: 100%;
    margin-left: 0;
  }

 

  .hero-heading {
    z-index: 10;
    display: flex;
    margin-top: 48px;
    flex-direction: column;
    font-size: 56.4px;
    color: var(--black, #0f0f0f);
    font-weight: 700;
    line-height: 114%;
    position: absolute;
  }

  .hero-description, .hero-cta{
    position: relative;
  }


  .hero-name {
    font-family: Inter, sans-serif;
  }

  

  .hero-title {
    font-family: Inter, sans-serif;
    margin-top: 8px;
  }

  
  .hero-subtitle {
    font-family: Inter, sans-serif;
    margin-top: 8px;
  }

  
  .hero-description {
    margin-top: 274px;
    font: 400 20px/32px Inter, sans-serif;
  }

  .hero-cta {
    justify-content: center;
    background-color: #FF9900;
    align-self: start;
    margin-top: 45px;
    color: #000000;
    padding: 16px 24px;
    font: 16px/30px Inter, sans-serif;
    font-weight: bolder;
    border: none;
    text-decoration: none;
  }

  .hero-cta:hover {
    background-color: #ff7b00;
    color:#000;
  }


 

  .hero-column-image {
    display: flex;
    flex-direction: column;
    line-height: normal;
    margin-left: 60px;
    position: relative;
    width: 100%;
  }

 

  .hero-image {
    max-width: 585px;
    object-fit: cover;
    width: 100%;
    flex-grow: 1;
    alt: "Ярослав Шумейко - досвідчений сімейний адвокат у Києві";
  }

  .hero-line-vertical-1 {
    align-self: end;
    width: 1px;
    height: 83px;
    right: -6px;
    bottom: -9px;
    background: linear-gradient(to top, #8D8D8D, #D0CDCD);
  }

  .hero-line-vertical-1, .hero-line-vertical-2,  .hero-line-horizontal-1,  .hero-line-horizontal-2{
    position: absolute;
    z-index: 100;

  }

  

  .hero-line-horizontal-1 {
    background: linear-gradient(90deg, #8d8d8d 0%, #d0cdcd 100%);
    align-self: end;
    width: 82px;
    height: 1px;
    bottom: -9px;
    right: -5px;
    background: linear-gradient(to left, #8D8D8D, #D0CDCD);

  }

  .hero-line-vertical-2 {
    align-self: end;
    width: 1px;
    height: 120px;
    right: -14px;
    bottom: -19px;
    background: linear-gradient(to top, #8D8D8D, #D0CDCD);

  }

  @media (max-width: 991px) {
    .hero-line-vertical-2 {
      margin-top: 40px;
    }
  }

  .hero-line-horizontal-2 {
    align-self: end;
    width: 133px;
    height: 1px;
    bottom: -19px;
    right: -13px;
    background: linear-gradient(to left, #8D8D8D, #D0CDCD);
  }

   /* MOBILE-ADAPT */
   @media screen and (max-width: 1024px){
      #hero-section{
        margin-top: 40px;
        height: 310px;
        justify-content: flex-start
      }

      .hero-columns{
        flex-direction: column-reverse;
        position: relative;
       
      }

      .hero-column-image{
        position: absolute;
        margin-left: 0;
        top: 0;
        z-index: 1;
      }

      .hero-column-image img{
        max-width: 250px;
        position: absolute;
        margin: 0;
        top: 15px;
        right: 15px;
      }

      .hero-heading{
        margin-top: 10px;
        position: relative;
        line-height: normal;
      }

      .hero-name, .hero-title, .hero-subtitle{
        font-size: 14.5px;
      }

      .hero-column-text, .hero-heading{
        max-width: 250px;
        width: 100%;
      }

      .hero-column-text{
        top: 20px;
        left: 10px;
        z-index: 10;
        position: absolute;
      }

      .hero-description{
        margin-top: 10px;
        font-size: 14px;
        display: none;
      }
      .hero-cta{
        margin-top: 20px;
        max-width: 130px;
        line-height: normal;
        padding: 5px;
      }

      .hero-line-horizontal-1{
        bottom: -266px;
        right: 10px;
      }

      .hero-line-horizontal-2{
        right: 5px;
        bottom: -274px;
      }

      .hero-line-vertical-1{
        bottom: -266px;
        right: 9px;
      }

      .hero-line-vertical-2{
        right: 4px;
        bottom: -274px;
      }
   }



  /* ADVANTAGES */

  #advantages{
    background-color: #f2f2f2;
    margin-top: 80px;
  }

  #advantages .content{
    flex-direction: column;
    padding: 40px 0;
  }

  #advantages .content .advantages-title{
    align-self: center;
    display: flex;
    margin:20px 0;
    flex-grow: 1;
    flex-direction: column;
    font-size: 44px;
    color: #000;
    font-weight: 500;
    font-family: Inter, sans-serif;
  }

  #advantages .content .advantages-list{
    display: flex;
    flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
    justify-content: center;
  }

  .separator {
    width: 1px;
    height: 125px;
    margin: auto 0;
    background: radial-gradient(
      2954.58% 50% at 50% 50%,
      #5c5c5c 0%,
      #c7c7c7 99.99%
    );
  }

  .advantage-item {
    display: flex;
    flex-direction: column;
    padding: 25px 55px;
    width: 306px;
  }

  .advantage-item:nth-child(n+5){
    padding-bottom: 0;
  }

  @media (max-width: 991px) {
    .advantage-item {
      padding: 0 20px;
    }
  }

  .advantage-icon {
    width: 60px;
    aspect-ratio: 1;
    object-fit: auto;
    object-position: center;
    align-self: center;
  }

  .advantage-text {
    margin-top: 22px;
    text-align: center;
    font-family: Inter, sans-serif;
  }

   /* MOBILE-ADAPT */
   @media screen and (max-width: 1024px){

    #advantages .content{
      padding: 5px;
    }
    #advantages .content .advantages-list{
      align-items: center;
      justify-content: center;
    }

    #advantages .content .advantages-list .advantage-item{
      width: 160px;
    }

    #advantages .content .advantages-title{
      align-self: center;
      font-size: 25px;
      margin: 20px 0 ;
    }
  

    .separator {
      display: none;
    }
   }

  /*--------------------------------*/
  /*----------- ABOUT ME -----------*/
  /*------------------------------=-*/
  
  #about-me {
    width: 100%;
    padding: 40px 0;
    flex-direction: column;
  }

  @media (max-width: 991px) {
    #about-me {
      max-width: 100%;
      padding: 0 5px;
    }
  }

  #about-me .content{
    align-items: flex-start;
  }

  #about-me .content:nth-child(2){
    margin-top: 41px;
  }

  .about-me-left {
    display: flex;
    flex-direction: column;
    line-height: normal;
    max-width: 498px;
    width: 100%;
    margin-left: 0;
    position: relative;
  }

  @media (max-width: 991px) {
    .about-me-left {
      width: 100%;
    }
  }

  .about-me-title {
    display: flex;
    margin-top: 11px;
    flex-grow: 1;
    flex-direction: column;
    font-size: 44px;
    color: #000;
    font-weight: 500;
    font-family: Inter, sans-serif;
  }

  @media (max-width: 991px) {
    .about-me-title {
      max-width: 100%;
      margin-top: 40px;
    }
  }

  .about-me-image {
    aspect-ratio: 1.04;
    object-fit: auto;
    object-position: center;
    width: 100%;
  }

  @media (max-width: 991px) {
    .about-me-image {
      max-width: 100%;
      margin-top: 40px;
    }
  }

  .about-me-right {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width:100%;
    margin-left: 20px;
  }

  @media (max-width: 991px) {
    .about-me-right {
      width: 100%;
    }
  }

  .about-me-content {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  @media (max-width: 991px) {
    .about-me-content {
      max-width: 100%;
      margin-top: 40px;
    }
  }

  .about-me-details {
    align-self: end;
    display: flex;
    width: 703px;
    max-width: 100%;
    flex-direction: column;
    font-size: 16px;
    color: #282828;
    font-weight: 400;
  }

  .about-me-name {
    font: 600 24px Inter, sans-serif;
  }

  @media (max-width: 991px) {
    .about-me-name {
      max-width: 100%;
    }
  }

  .about-me-education {
    font-family: Inter, sans-serif;
    line-height: 24px;
  }

  @media (max-width: 991px) {
    .about-me-education {
      max-width: 100%;
    }
  }

  .about-me-details hr {
    background: linear-gradient(to right, #adadad 0%, #e0e0e0 100%);
    height: 1px;
    margin: 0;
  }

  .about-me-details p{
    margin: 12px 0;
  }

  

  .about-me-certificate {
    color: #000;
    font-family: Inter, sans-serif;
    line-height: 24px;
  }

  @media (max-width: 991px) {
    .about-me-certificate {
      max-width: 100%;
    }
  }

  .about-me-experience {
    font-family: Inter, sans-serif;
    line-height: 150%;
  }

  @media (max-width: 991px) {
    .about-me-experience {
      max-width: 100%;
    }
  }

  .about-me-coverage {
    color: #000;
    font-family: Inter, sans-serif;
    line-height: 150%;
  }

  @media (max-width: 991px) {
    .about-me-coverage {
      max-width: 100%;
    }
  }

  .about-me-stats {
    background-color: #3c3e6b;
    display: flex;
    width: 210px;
    max-width: 100%;
    flex-direction: column;
    align-items: start;
    color: #fff;
    left: -125px;
    position: absolute;
    top:298px
  }

  .about-me-years {
    font: 100 56px Inter;
    padding: 8px 0 0 20px;
  }

  @media (max-width: 991px) {
    .about-me-years {
      font-size: 40px;
    }
  }

  .about-me-description {
    padding-left: 28px;
    font: 400 16px Inter;
  }

  @media screen and (max-width: 1024px){
    .about-me-title, .services-title{
      font-size: 25px;
      align-self: center;
      align-items: center;
    }
  
    #about-me .content{
      flex-direction: column;
    }

    .about-me-image{
      margin-top: 0;
    }

    .about-me-name{
      margin-top: 30px;
    }

    .about-me-stats{
      left: 170px;
      top: -85px;
      max-width: 165px;
    }

    .about-me-years{
      font-size: 30px;
    }

    .about-me-description{
      font-size: 13px;
      max-width: 150px;
    }

    #about-me .content p{
      max-width: 310px;
    }

    .about-me-right{
      margin-left: 0;
    }

    .about-me-details{
      width: 100%;
    }
  }

  /*--------------------------------*/
  /*----------- SERVICES -----------*/
  /*--------------------------------*/

  #services {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    margin-top: 40px;
  }

  #services .content{
    flex-direction: column;
  }

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

  .services-title {
    color: #000;
    margin-top: 11px;
    align-self: baseline;
    text-align: left;
    font: 500 44px Inter, sans-serif;
    margin-bottom: 24px;
  }

  @media (max-width: 1024px) {
    .services-title {
      max-width: 100%;
      font-size: 28px;
      text-align: center;
      align-self: center;
    }
  }

  .service-item {
    display: flex;
    justify-content: space-between;
    background-color: #ebebeb;
    margin-top: 20px;
    width: 1233px;
    max-width: 100%;
    padding: 16px 32px 16px 32px;
  }

  .service-link{
    text-decoration: none;
  }

  .service-link:nth-child(odd){
    background-color: #e6e6e6;
  }

  

  .service-item:hover{
    background-color: #3c3e6b;
    transition: background-color 0.6s ease; /* плавный переход фона */
  }

  .service-link:hover{
    background-color: #FF9900;
  }



  .service-item:hover .service-header, .service-item:hover .service-price .service-price-value, .service-item:hover .service-price .service-order-button{
    transition: color 0.6s ease;
    color:#fff
  }
  .service-link:hover .service-header{
    color:#000;
  }

  .service-item:hover .service-price .service-order-button
  {
    transition: background-color 0.6s ease;
    background: #FF9900;
    border-color: #FF9900; 
    color: #000;
    font-weight: bolder;
  }

  @media (max-width: 991px) {
    .service-item {
      margin-top: 40px;
    }
  }

  .service-content {
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 20px;
  }

  @media (max-width: 991px) {
    .service-content {
      flex-direction: column;
      align-items: stretch;
      gap: 0px;
    }
  }

  .service-details {
    display: flex;
    flex-direction: column;
    line-height: normal;
    margin-left: 0px;
  }

  @media (max-width: 991px) {
    .service-details {
      width: 100%;
    }
  }

  .service-header {
    display: flex;
    gap: 16px;
    color: #000;
  }

  @media (max-width: 991px) {
    .service-header {
      margin-top: 40px;
      flex-wrap: wrap;
    }
  }

  .service-number {
    align-self: start;
    font: 200 44px/91% Inter, sans-serif;
  }

  .service-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    font-size: 16px;
    font-weight: 500;
  }

  @media (max-width: 991px) {
    .service-info {
      max-width: 100%;
    }
  }

  .service-name {
    font: 24px/150% Inter, sans-serif;
 
  }

  @media (max-width: 991px) {
    .service-name {
      max-width: 100%;
    }
  }

  .service-separator {
    background: linear-gradient(90deg, #adadad 0%, #e0e0e0 100%);
    margin-top: 11px;
    height: 1px;
  }

  .service-item:hover .service-separator{
    background: linear-gradient(90deg, #e0e0e0 0%, #adadad 100%);
  }

  @media (max-width: 991px) {
    .service-separator {
      max-width: 100%;
    }
  }

  .service-includes {
    font-family: Inter, sans-serif;
    margin-top: 12px;
  }

  @media (max-width: 991px) {
    .service-includes {
      max-width: 100%;
    }
  }

  .service-includes-item {
    font-family: Inter, sans-serif;
    font-weight: 400;
    margin-top: 8px;
  }

  @media (max-width: 991px) {
    .service-includes-item {
      max-width: 100%;
    }
  }

  .service-price {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 180px;
    margin-left: 20px;
  }

  @media (max-width: 991px) {
    .service-price {
      width: 100%;
    }
  }

  .service-price-container {
    display: flex;
    flex-grow: 1;
    flex-direction: column;
  }

  @media (max-width: 991px) {
    .service-price-container {
      margin-top: 40px;
    }
  }

  .service-price-value {
    align-items: baseline;
    display: flex;
    gap: 6px;
    color: #000;
  }

  @media (max-width: 991px) {
    .service-price-value {
      margin-left: 10px;
    }
  }

  .service-price-from {
    font: 400 20px Inter, sans-serif;
  }

  .service-price-amount {
    font: 600 26.5px Inter, sans-serif;
  }

  .service-order-button {
    display: flex;
    justify-content: center;
    border: 1px solid #000;
    background: none;
    margin-top: 16px;
    color: #1b1b1b;
    white-space: nowrap;
    padding: 16px 48px;
    font: 400 16px/30px Inter, sans-serif;
  }

  @media (max-width: 991px) {
    .service-order-button {
      white-space: initial;
      padding: 0 20px;
    }
  }

  @media screen and (max-width: 1024px){
    #services .content{
      padding: 0 10px;
    }

    .service-price{
      margin-left:0;
    }

    .service-price-value{
      margin-left:0;
    }
  }


  /*-----------------------------------*/
  /*------------ WON CASES ------------*/
  /*-----------------------------------*/


  #won-cases{
    padding: 80px 0 40px 0;
  }

  #won-cases .content{
    flex-direction: column;
  }

  #won-cases .content .cases-list{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap:20px;
    max-width: 1230px;
    width: 100%;    
  }

  .cases-title {
    color: #000;
    font: 500 44px Inter, sans-serif;
    align-self: flex-start;
    margin-bottom: 40px;
  }
  
  @media (max-width: 991px) {
    .cases-title {
      max-width: 100%;
      font-size: 25px;
      text-align: center;
      align-self: center;
    }
  }
  
  .cases-container {
    background-color: #fff;
    margin: 44px 0 0 16px;
  }
  
  @media (max-width: 991px) {
    .cases-container {
      max-width: 100%;
      margin-top: 40px;
    }
  }
  
  .cases-grid {
    gap: 20px;
    display: flex;
  }
  
  @media (max-width: 991px) {
    .cases-grid {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }
  }
  
  .case-card, .fixed-document{
    display: flex;
    flex-direction: column;
    line-height: normal;
    max-width: 375px;
    width: 100%;
    margin-left: 0;
  }
  
  @media (max-width: 991px) {
    .case-card, .fixed-document {
      width: 100%;
    }
  }

  .fixed-document{
    transition: transform .3s ease;
  }

  .fixed-document:hover{
    transform: scale(1.5);
  }
  
  .case-content {
    background-color: #f0f0f0;
    display: flex;
    flex-grow: 1;
    flex-direction: column;
    font-size: 16px;
    color: #000;
    font-weight: 500;
    width: 100%;
    padding: 21px 20px;
  }
  
  @media (max-width: 991px) {
    .case-content {
      margin-top: 40px;
    }
  }
  
  .case-number {
    font-family: Inter, sans-serif;
    justify-content: center;
    background-color: #3c3e6b;
    color: #fff;
    white-space: nowrap;
    padding: 11px 13px;
    max-width: 150px;
  }
  
  @media (max-width: 991px) {
    .case-number {
      white-space: initial;
    }
  }
  
  .case-title {
    text-align: left;
    font-family: Inter, sans-serif;
    font-weight: 700;
    margin-top: 70px;
    font-size: 23px;
  }
  
  @media (max-width: 991px) {
    .case-title {
      margin-top: 40px;
    }
  }
  
  .case-divider {
    background: linear-gradient(90deg, #adadad 0%, #e0e0e0 100%);
    margin:20px 0;
    height: 1px;
  }
  
  .case-content h3 {
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 23px;
  }

  .lawyer-action-toggle{
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    color: #000;
    text-decoration: none;
  }

  .lawyer-action-toggle:hover{
    color: #000;

  }

  .lawyer-action-toggle span{
    color: #f90;
    font: 300 44px Inter, sans-serif;
    line-height: 20px;
    height: 25px;
    text-decoration: none;
  }
  
  
  .case-content p {
    font-weight: 500;
    margin-top: 20px;
    text-align: justify;
  }
  
  .case-link {
    font-family: Inter, sans-serif;
    justify-content: center;
    align-items: center;
    background-color: #f90;
    margin-top: 20px;
    font-weight: 700;
    text-align: center;
    padding: 12px 60px;
    text-decoration: none;
    color:#000;
    font-weight: bolder;
  }

  .case-link:hover{
    background-color: #ff7b00;
    color:#000;
  }
  





  
  /*--------------------------------*/
  /*----------- REVIEWS ------------*/
  /*--------------------------------*/

  #reviews {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 80px 80px 0;
    width: 100%;
  }

  @media (max-width: 991px) {
    #reviews {
      padding: 0 20px;
      max-width: 100%;
    }
  }

  .reviews-header {
    display: flex;
    width: 100%;
    max-width: 1233px;
    gap: 20px;
    margin-top: 10px;
    white-space: nowrap;
  }

  @media (max-width: 991px) {
    .reviews-header {
      flex-wrap: wrap;
      max-width: 100%;
      white-space: initial;
    }
  }

  .reviews-title {
    color: #000;
    flex-grow: 1;
    flex-basis: auto;
    font: 500 44px Inter, sans-serif;
  }

  .reviews-navigation {
    display: flex;
    gap: 20px;
   
    justify-content: space-between;
    align-self: start;
  }

  .reviews-navigation a{
    font-size: 40px;
    color: #f90;
    font-weight: 300;
    text-decoration: none;
  }

  @media (max-width: 991px) {
    .reviews-navigation {
      white-space: initial;
    }
  }

  .reviews-navigation-up,
  .reviews-navigation-down {
    font-family: Inter, sans-serif;
    cursor: pointer;
  }

  .reviews-navigation-up:hover,
  .reviews-navigation-down:hover{
    color: #ff7b00;
  }

  .reviews-content {
    display: flex;
    width: 100%;
    max-width: 1233px;
    margin-top: 12px;
    gap: 20px;
  }

  @media (max-width: 991px) {
    .reviews-content {
      flex-direction: column;
      align-items: stretch;
      gap: 0;
      max-width: 100%;
    }
  }

  .reviews-column {
    display: flex;
    flex-direction: column;
    line-height: normal;
    width: 33%;
    margin-left: 0;
  }

  @media (max-width: 991px) {
    .reviews-column {
      width: 100%;
    }
  }

  .review-card {
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(170, 170, 170, 1);
    padding: 28px 24px 80px;
    color: #000;
    margin-top: 35px;
    flex-grow: 1;
  }

  .review-card:hover{
    background: #3c3e6b;
    color: #fff;
    transition: all 0.6s ease;
  }



  @media (max-width: 991px) {
    .review-card {
      margin-top: 40px;
      padding: 0 20px;
    }
  }

  .review-author {
    font: 500 18px Inter, sans-serif;
  }

  .review-separator {
    height: 1px;
    margin-top: 10px;
    background: linear-gradient(90deg, #adadad 0%, #e0e0e0 100%);
  }

  .review-text {
    font: 400 16px Inter, sans-serif;
    margin: 13px 0 28px;
    text-align: justify;
  }

  .reviews-column:nth-child(2) {
    margin-left: 20px;
    position: relative;
    bottom: 65px;
  }

  .reviews-column:nth-child(3) {
    position: relative;
    bottom: 22px;
  }

 

  .reviews-column:last-child {
    margin-left: 20px;
  }

  @media screen and (max-width: 1024px){
    .reviews-column:nth-child(2), .reviews-column:nth-child(3){
      position: static;
      margin-left: 0;
    }

    .review-author{
      padding: 15px 0 5px 0;
    }

    .reviews-header{
      margin-top: 88px;
    }

    .reviews-title{   
      font-size: 25px;
      display: flex;
      align-items: center;
    }
  }



  /*----------------------------*/
  /*----------- FAQ  -----------*/
  /*----------------------------*/


  #faq {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 80px;
  }

  #faq .content{
    flex-direction: column;
  }

  @media (max-width: 991px) {
    .faq-section {
      padding: 0 20px;
      max-width: 100%;
    }
  }

  .faq-title {
    color: #000;
    font: 500 44px Inter, sans-serif;
    margin-top: 10px;
    align-self: baseline;
    margin-bottom: 58px;
  }

  @media (max-width: 991px) {
    .faq-title {
      max-width: 100%;
    }
  }

  .faq-divider {
    width: 1233px;
    max-width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #adadad 0%, #e0e0e0 100%);
  }

  @media (max-width: 991px) {
    .faq-divider {
      margin-top: 40px;
    }
  }

  .faq-item {
    display: flex;
    width: 100%;
    max-width: 1233px;
    margin: 20px 0;
    gap: 20px;
  }

  @media (max-width: 991px) {
    .faq-item {
      flex-wrap: wrap;
      max-width: 100%;
    }
  }

  .faq-icon {
    display: flex;
  }

  .faq-icon a{
    color: #f90;
    font: 300 44px Inter, sans-serif;
    line-height: 20px;
    height: 25px;
    text-decoration: none;
  }

  .faq-icon a:hover{
    color: rgb(255, 124, 1);

  }

  .faq-question {
    color: #000;
    font: 400 16px Inter, sans-serif;
    text-align: justify;
    margin: 0;
  }

  @media (max-width: 991px) {
    .faq-question {
      max-width: 100%;
    }
  }

  .answer{
    margin-top: 10px;
    border-top: 1px solid linear-gradient(90deg, #adadad 0%, #e0e0e0 100%);
	font-style: italic;
	text-align: justify;
  }

 

  @media screen and (max-width: 1024px){
    #faq{
      padding: 20px;
      margin: 40px 0;
    }

    .faq-title{
      font-size: 25px;
      align-self: center;
      margin-bottom: 20px;
    }

    .faq-divider{
      margin-top: 20px;
    }
  }

  .seo-text{
    margin-bottom: 80px;
  }

  /*--------------------------------*/
  /*------------ FOOTER ------------*/
  /*--------------------------------*/

  #contacts {
    background-color: #ebebeb;
    display: flex;
    width: 100%;
    gap: 20px;
    font-size: 20px;
    color: #0f0f0f;
    font-weight: 400;
    line-height: 135%;
   
    padding: 40px 0;
  }

  
  @media (max-width: 991px) {
    #contacts {
      max-width: 100%;
      flex-wrap: wrap;
      padding: 0 20px;
    }
  }

  #contacts .content{
    justify-content: space-between;
  }
  
  #contacts .contact-info {
    align-self: start;
    display: flex;
    margin-top: 11px;
    flex-direction: column;
  }
  
  .contact-heading {
    color: #000;
    font: 44px Inter, sans-serif;
  }
  
  .phone-number-1, .phone-number-2, .address{
    color:#000;
  }

  .phone-number-1, .phone-number-2, .phone-number{
    text-decoration: none;
  }

  .phone-number-1:hover, .phone-number-2:hover, .phone-number:hover, .nav-item:hover{
    color:#f90;
  }

  .phone-number-1 {
    margin: 40px 0 0 0;
  }
  
  @media (max-width: 991px) {
    .phone-number-1 {
      margin-top: 40px;
    }
  }
  
  .phone-number-2 {
    margin:0;
  }
  
  .address {
    font-weight: bold;
  }
  
  .messenger-heading {
    color: #000;
    margin: 30px 0 0 0;
    font: 32px Inter, sans-serif;
  }
  
  @media (max-width: 991px) {
    .messenger-heading {
      margin: 40px 10px 0 0;
    }
  }
  
  .messengers a svg{
    height: 56px;
    
  }
  .messengers a{
    display: inline-block;
    position: relative;
  }

  /* TELEGRAM */
  .messengers a:nth-child(1) svg:hover{
    fill:#28a8e9;
  }

  .messengers a:nth-child(1) svg:hover path:nth-child(1){
    stroke:#28a8e9;
  }

  /* VIBER */
  .messengers a:nth-child(2) svg:hover path:nth-child(1){
    fill:#ad3ee5;
    stroke: #ad3ee5;
  }

  .messengers a:nth-child(2) svg:hover path:nth-child(2),
  .messengers a:nth-child(2) svg:hover path:nth-child(3),
  .messengers a:nth-child(2) svg:hover path:nth-child(4),
  .messengers a:nth-child(2) svg:hover path:nth-child(5)
  {
    fill:#fff;
    stroke: none;
  }

  /* WHATS APP */
  .messengers a:nth-child(3) svg:hover path:nth-child(1){
    fill:#00d95f;
    stroke:#00d95f;
  }

  .messengers a:nth-child(3) svg:hover path:nth-child(2){
    fill: #fff;
    stroke: #fff;
  }


  @media screen and (max-width: 1024px){
    #contacts .content{
      flex-direction: column;
    }

    #contacts .content .contact-image{
      max-width: 320px;
      padding: 20px 0;
    }

    .contact-heading{
      font-size: 25px;
    }

    .messenger-heading{
      font-size: 21px;
      margin-top: 20px;
    }
  }






  /* CONTACT-FORM */
  
  .modal-dialog {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }


  #modal-contact-form .modal-content{
    padding: 28px;
  }

  #modal-contact-form .modal-dialog{
    max-width: 800px;
    width: 100%;

  }

  #modal-contact-form form{
    display: flex;
    flex-direction: column;
    max-width: 372px;
    width: 100%;
  }

  #modal-contact-form .modal-header .btn-close{
    position: absolute;
    margin: 0;
    padding: 0;
    top:24px;
    right: 24px;
    width: 48px;
    height: 48px;
  }

  #modal-contact-form .modal-header {
    align-items: center;
    justify-content: center;
    border-bottom: none;
  }

  #modal-contact-form .modal-body{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  
  .form-title{
    text-align: center;
  }

  .form-label {
    color: #606060;
    font-family: Inter, sans-serif;
    line-height: 187.5%;
    z-index: 10;
  }

  .form-label:nth-of-type(2){
    padding-top: 24px;
  }

  .form-input {
    border-top: none;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid #636363;
    height: 35px;
  }

  .form-input:focus{
    outline: none;
  }

  .form-label .form-input, .form-button{
    width: 100%;
  }

  .form-button {
    font-family: Inter, sans-serif;
    margin-top: 48px;
    color: #000000;
    padding: 16px 24px;
    font: 16px / 30px Inter, sans-serif;
    font-weight: bolder;
    border: none;
    text-decoration: none;
    background: #f90;
  }

  .form-button:hover{
    background: #ff7b00;
  }