@font-face {
  font-family: ROBOTO;
  src: url(../assets/Roboto-Thin.ttf) format("ttf"); }

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  outline: none; }

img {
  display: block;
  cursor: pointer;
  border-radius: 2px; }

li {
  list-style: none;
  cursor: pointer; }

button:not(.btn-next) {
  background-color: #c1187b;
  border: none;
  color: #fbfcfe;
  padding: 15px;
  min-width: 250px;
  border-radius: 30px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.5s ease; }
  button:not(.btn-next):hover {
    opacity: 0.8; }

body {
  font-family: ROBOTO, sans-serif; }
  body .header-background-container {
    position: absolute;
    height: 100vh;
    z-index: 0;
    width: 100vw;
    right: 0; }
    body .header-background-container .relative-mask {
      position: relative;
      height: 100%;
      width: 100%;
      overflow: hidden; }
      body .header-background-container .relative-mask .img-container {
        width: 1500px;
        height: 1000px;
        position: absolute;
        right: -200px;
        top: -510px;
        transform: rotate(25deg);
        border-radius: 200px;
        overflow: hidden; }
        body .header-background-container .relative-mask .img-container .vertical-container {
          width: 100%;
          height: 100%;
          transform: rotate(-20deg);
          position: relative;
          top: 400px; }
          body .header-background-container .relative-mask .img-container .vertical-container img {
            width: 100%;
            height: auto; }
        @media (max-width: 1800px) {
          body .header-background-container .relative-mask .img-container {
            width: 1300px; } }
        @media (max-width: 1600px) {
          body .header-background-container .relative-mask .img-container {
            width: 1200px; } }
        @media (max-width: 1450px) {
          body .header-background-container .relative-mask .img-container {
            width: 1100px;
            right: -300px; } }
        @media (max-width: 1200px) {
          body .header-background-container .relative-mask .img-container {
            right: -400px; } }
        @media (max-width: 1100px) {
          body .header-background-container .relative-mask .img-container {
            right: -500px; } }
        @media (max-width: 960px) {
          body .header-background-container .relative-mask .img-container {
            display: none; } }
  body header {
    background-color: #fbfcfe;
    min-height: 700px; }
    body header .container {
      padding-top: 30px; }
      body header .container nav {
        width: 70%;
        margin: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row; }
        body header .container nav .logo-container {
          width: 120px; }
          body header .container nav .logo-container img {
            width: 100%;
            transition: all 0.5s ease; }
            body header .container nav .logo-container img:hover {
              opacity: 0.7; }
          @media (max-width: 800px) {
            body header .container nav .logo-container {
              align-self: center; } }
        body header .container nav .menu-container {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          column-gap: 70px;
          -moz-column-gap: 70px;
          -webkit-column-gap: 70px;
          grid-column-gap: 70px; }
          body header .container nav .menu-container li {
            z-index: 1;
            padding: 0 3px;
            color: #fbfcfe;
            transition: all 0.5s ease;
            font-size: 20px; }
            body header .container nav .menu-container li.active-li {
              border-bottom: 2px solid #c1187b; }
            body header .container nav .menu-container li:hover {
              color: gainsboro; }
            @media (max-width: 800px) {
              body header .container nav .menu-container li {
                color: #1f1f1f;
                width: 100%;
                text-align: center;
                padding: 10px 0; }
                body header .container nav .menu-container li.active-li {
                  border-bottom: unset;
                  color: #c1187b; } }
          @media (max-width: 1450px) {
            body header .container nav .menu-container {
              column-gap: 30px;
              -moz-column-gap: 30px;
              -webkit-column-gap: 30px;
              grid-column-gap: 30px; } }
          @media (max-width: 960px) {
            body header .container nav .menu-container {
              column-gap: 20px;
              -moz-column-gap: 20px;
              -webkit-column-gap: 20px;
              grid-column-gap: 20px; } }
          @media (max-width: 800px) {
            body header .container nav .menu-container {
              flex-direction: column; } }
        @media (max-width: 1450px) {
          body header .container nav {
            width: 80%; } }
        @media (max-width: 1200px) {
          body header .container nav {
            width: 90%; } }
        @media (max-width: 800px) {
          body header .container nav {
            flex-direction: column;
            align-items: stretch;
            row-gap: 70px;
            -moz-row-gap: 70px;
            -webkit-row-gap: 70px;
            grid-row-gap: 70px;
            width: 100%; } }
    body header .main-text-container {
      width: 70%;
      margin: auto;
      margin-top: 250px; }
      body header .main-text-container .main-text {
        font-size: 60px; }
      body header .main-text-container .secondary-text {
        font-size: 38px;
        padding-bottom: 50px; }
      @media (max-width: 960px) {
        body header .main-text-container .main-text,
        body header .main-text-container .secondary-text {
          color: #fbfcfe; }
        body header .main-text-container .main-text {
          font-size: 40px; }
        body header .main-text-container .secondary-text {
          font-size: 20px; } }
      @media (max-width: 800px) {
        body header .main-text-container {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          margin: unset;
          height: 500px;
          width: 100%;
          background-image: url("../assets/window.jpg");
          background-repeat: no-repeat;
          background-size: auto;
          background-position: 85% 53%; } }
    @media (max-width: 960px) {
      body header {
        background-image: url("../assets/window.jpg");
        background-size: contain;
        background-repeat: no-repeat; } }
    @media (max-width: 800px) {
      body header {
        background-image: unset; } }
  body main {
    background-color: #fbfcfe; }
    body main .container {
      width: 50%;
      margin: auto; }
      @media (max-width: 1900px) {
        body main .container {
          width: 60%; } }
      @media (max-width: 1600px) {
        body main .container {
          width: 70%; } }
      @media (max-width: 1400px) {
        body main .container {
          width: 80%; } }
      @media (max-width: 1200px) {
        body main .container {
          width: 90%; } }
    body main .why-container {
      padding-top: 50px;
      width: 70%;
      margin: auto;
      position: relative;
      margin-bottom: 200px; }
      body main .why-container .two-sided-container {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: row;
        width: 100%; }
        body main .why-container .two-sided-container .img-container {
          flex-basis: 40%; }
          body main .why-container .two-sided-container .img-container img {
            width: 100%; }
        body main .why-container .two-sided-container .why-content-container {
          flex-basis: 60%;
          display: flex;
          justify-content: center;
          align-items: flex-start;
          flex-direction: row; }
          body main .why-container .two-sided-container .why-content-container .content {
            padding: 150px 0 0 150px; }
            body main .why-container .two-sided-container .why-content-container .content .main-text {
              font-size: 35px;
              padding-bottom: 20px; }
              @media (max-width: 850px) {
                body main .why-container .two-sided-container .why-content-container .content .main-text {
                  font-size: 23px;
                  font-weight: bold;
                  text-align: center; } }
            body main .why-container .two-sided-container .why-content-container .content .secondary-text {
              font-size: 18px;
              text-align: justify; }
              @media (max-width: 850px) {
                body main .why-container .two-sided-container .why-content-container .content .secondary-text {
                  text-align: center; } }
            @media (max-width: 1200px) {
              body main .why-container .two-sided-container .why-content-container .content {
                padding: 50px 0 0 50px; } }
            @media (max-width: 1000px) {
              body main .why-container .two-sided-container .why-content-container .content {
                padding: 30px 0 0 30px; } }
            @media (max-width: 850px) {
              body main .why-container .two-sided-container .why-content-container .content {
                padding: 30px 0; } }
        @media (max-width: 850px) {
          body main .why-container .two-sided-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column; } }
      body main .why-container .swiper {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: row;
        background-color: #ffffff;
        box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.1);
        padding: 30px;
        padding-top: 50px;
        border-radius: 2px;
        position: absolute;
        bottom: -50px;
        left: 250px; }
        body main .why-container .swiper .swiper-container {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: row;
          column-gap: 50px;
          -moz-column-gap: 50px;
          -webkit-column-gap: 50px;
          grid-column-gap: 50px;
          position: relative; }
          body main .why-container .swiper .swiper-container .card {
            text-align: center; }
            body main .why-container .swiper .swiper-container .card img {
              width: 100%; }
            body main .why-container .swiper .swiper-container .card p {
              padding-top: 20px; }
              body main .why-container .swiper .swiper-container .card p.active {
                color: #c1187b; }
            @media (max-width: 850px) {
              body main .why-container .swiper .swiper-container .card {
                padding-bottom: 20px; } }
          body main .why-container .swiper .swiper-container .btn-next {
            position: absolute;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            right: -50px;
            border: none;
            background-color: #c1187b;
            color: #fbfcfe;
            cursor: pointer;
            transition: all 0.5s ease;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: row; }
            body main .why-container .swiper .swiper-container .btn-next:hover {
              opacity: 0.8; }
            body main .why-container .swiper .swiper-container .btn-next .arrow-right {
              width: 15px;
              height: 15px;
              transform: rotate(45deg);
              border: 1px solid #fbfcfe;
              border-bottom: none;
              border-left: none;
              position: relative;
              right: 5px; }
            @media (max-width: 850px) {
              body main .why-container .swiper .swiper-container .btn-next {
                display: none; } }
          @media (max-width: 850px) {
            body main .why-container .swiper .swiper-container {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-direction: column; } }
        @media (max-width: 1300px) {
          body main .why-container .swiper {
            position: static;
            margin-top: 20px; } }
      @media (max-width: 1000px) {
        body main .why-container {
          padding-top: 30px;
          margin-bottom: 50px; } }
    body main .offer {
      background-color: #f8f8f8;
      padding: 100px 0; }
      body main .offer .container {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column; }
        body main .offer .container .main-text {
          font-size: 40px;
          padding-bottom: 20px; }
        body main .offer .container .secondary-text {
          text-align: center;
          padding-bottom: 50px; }
          @media (max-width: 1200px) {
            body main .offer .container .secondary-text {
              width: 60%; } }
          @media (max-width: 850px) {
            body main .offer .container .secondary-text {
              width: 70%; } }
        body main .offer .container .cards-container {
          display: flex;
          justify-content: center;
          align-items: stretch;
          flex-direction: row;
          column-gap: 40px;
          -moz-column-gap: 40px;
          -webkit-column-gap: 40px;
          grid-column-gap: 40px;
          width: 100%;
          flex-wrap: wrap;
          row-gap: 40px;
          -moz-row-gap: 40px;
          -webkit-row-gap: 40px;
          grid-row-gap: 40px; }
          body main .offer .container .cards-container .cards {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            text-align: center;
            padding: 20px 10px;
            background-color: #fbfcfe;
            min-width: 200px;
            flex-basis: 20%;
            border-radius: 6px;
            box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.1); }
            body main .offer .container .cards-container .cards img {
              width: 30px;
              height: auto;
              padding-bottom: 20px; }
            body main .offer .container .cards-container .cards p:nth-child(2) {
              font-weight: bold;
              padding-bottom: 5px; }
            body main .offer .container .cards-container .cards p:nth-child(3) {
              opacity: 0.7; }
          @media (max-width: 1200px) {
            body main .offer .container .cards-container {
              display: grid;
              grid-template-columns: repeat(2, 1fr); } }
          @media (max-width: 1000px) {
            body main .offer .container .cards-container {
              grid-template-columns: 1fr; } }
      @media (max-width: 1000px) {
        body main .offer {
          padding: 50px 0; } }
    body main .services {
      padding: 0 0 100px 0; }
      body main .services .container {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: row; }
        body main .services .container .right-side {
          flex-basis: 60%;
          display: flex;
          justify-content: center;
          align-items: flex-end;
          flex-direction: row; }
          body main .services .container .right-side .barbershop-container {
            width: 300px;
            margin-bottom: 50px;
            height: 70%;
            overflow: hidden; }
            body main .services .container .right-side .barbershop-container img {
              width: 100%; }
          body main .services .container .right-side .floor-container {
            width: 200px;
            position: relative;
            top: 10px;
            border-radius: 2px;
            right: -50px;
            padding: 10px;
            background-color: #fbfcfe; }
            body main .services .container .right-side .floor-container img {
              width: 100%; }
            @media (max-width: 550px) {
              body main .services .container .right-side .floor-container {
                display: none; } }
          @media (max-width: 1000px) {
            body main .services .container .right-side {
              padding-top: 50px; } }
        body main .services .container .left-side {
          flex-basis: 40%;
          display: flex;
          justify-content: flex-end;
          align-items: flex-start;
          flex-direction: column; }
          body main .services .container .left-side .main-text {
            margin-bottom: 20px;
            font-size: 30px; }
          body main .services .container .left-side .about-us {
            margin-bottom: 50px; }
          body main .services .container .left-side .secondary-text {
            margin-bottom: 40px; }
            @media (max-width: 1200px) {
              body main .services .container .left-side .secondary-text {
                width: 60%; } }
            @media (max-width: 850px) {
              body main .services .container .left-side .secondary-text {
                width: 70%; } }
          @media (max-width: 1000px) {
            body main .services .container .left-side {
              padding-top: 50px;
              order: 1;
              align-items: center;
              text-align: center; } }
          @media (max-width: 550px) {
            body main .services .container .left-side {
              padding-top: 0; } }
        @media (max-width: 1000px) {
          body main .services .container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column; } }
      @media (max-width: 550px) {
        body main .services {
          padding: 0; } }
    body main .tabs-container {
      background-color: #f8f8f8;
      padding: 100px 0; }
      body main .tabs-container .container {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-direction: column;
        row-gap: 70px;
        -moz-row-gap: 70px;
        -webkit-row-gap: 70px;
        grid-row-gap: 70px; }
        body main .tabs-container .container .tab-options {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;
          flex-wrap: wrap;
          column-gap: 20px;
          -moz-column-gap: 20px;
          -webkit-column-gap: 20px;
          grid-column-gap: 20px;
          row-gap: 20px;
          -moz-row-gap: 20px;
          -webkit-row-gap: 20px;
          grid-row-gap: 20px; }
          body main .tabs-container .container .tab-options li {
            font-weight: bold; }
            body main .tabs-container .container .tab-options li.active {
              color: #c1187b; }
          @media (max-width: 850px) {
            body main .tabs-container .container .tab-options {
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-direction: row; } }
          @media (max-width: 550px) {
            body main .tabs-container .container .tab-options {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-direction: column; } }
        body main .tabs-container .container .main-img-container {
          width: 100%;
          height: 200px;
          overflow: hidden; }
          body main .tabs-container .container .main-img-container img {
            width: 100%;
            position: relative;
            top: -110%; }
            @media (max-width: 900px) {
              body main .tabs-container .container .main-img-container img {
                top: -80%; } }
            @media (max-width: 700px) {
              body main .tabs-container .container .main-img-container img {
                top: -50%; } }
            @media (max-width: 600px) {
              body main .tabs-container .container .main-img-container img {
                top: -30%; } }
          @media (max-width: 800px) {
            body main .tabs-container .container .main-img-container {
              display: none; } }
        body main .tabs-container .container .cards-container {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: row;
          column-gap: 20px;
          -moz-column-gap: 20px;
          -webkit-column-gap: 20px;
          grid-column-gap: 20px;
          width: 100%; }
          body main .tabs-container .container .cards-container .card {
            flex-basis: 33%; }
            body main .tabs-container .container .cards-container .card .img-container {
              height: 200px;
              overflow: hidden; }
              body main .tabs-container .container .cards-container .card .img-container img {
                width: 100%; }
            body main .tabs-container .container .cards-container .card .main-text {
              font-size: 18px;
              padding-top: 10px;
              padding-bottom: 5px; }
            body main .tabs-container .container .cards-container .card .secondary-text {
              opacity: 0.5; }
            @media (max-width: 800px) {
              body main .tabs-container .container .cards-container .card {
                padding-bottom: 20px; } }
          @media (max-width: 800px) {
            body main .tabs-container .container .cards-container {
              display: flex;
              justify-content: flex-start;
              align-items: center;
              flex-direction: column; } }
        @media (max-width: 850px) {
          body main .tabs-container .container {
            align-items: center;
            justify-content: center; } }
    body main .user-experince {
      padding: 100px 0;
      text-align: center; }
      body main .user-experince .main-text {
        font-size: 40px; }
        @media (max-width: 1000px) {
          body main .user-experince .main-text {
            font-size: 30px;
            font-weight: bold; } }
        @media (max-width: 500px) {
          body main .user-experince .main-text {
            font-size: 25px; } }
      body main .user-experince .secondary-text {
        font-size: 25px;
        padding-bottom: 100px; }
      body main .user-experince .comments-container {
        display: flex;
        justify-content: center;
        align-items: stretch;
        flex-direction: row;
        column-gap: 70px;
        -moz-column-gap: 70px;
        -webkit-column-gap: 70px;
        grid-column-gap: 70px; }
        body main .user-experince .comments-container .card {
          flex-basis: 50%;
          position: relative;
          box-shadow: 5px 10px 30px 0 rgba(0, 0, 0, 0.1);
          padding: 35px;
          text-align: left; }
          body main .user-experince .comments-container .card .img-container {
            width: 70px;
            border-radius: 50%;
            overflow: hidden;
            position: absolute;
            left: -35px;
            top: -35px; }
            body main .user-experince .comments-container .card .img-container img {
              width: 100%; }
          body main .user-experince .comments-container .card .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-direction: row;
            padding-bottom: 20px; }
            body main .user-experince .comments-container .card .row .stars {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: row; }
              body main .user-experince .comments-container .card .row .stars img {
                width: 15px; }
          body main .user-experince .comments-container .card .comment-container blockquote {
            opacity: 0.5;
            font-style: italic;
            line-height: 30px; }
        @media (max-width: 1000px) {
          body main .user-experince .comments-container {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-direction: column;
            row-gap: 70px;
            -moz-row-gap: 70px;
            -webkit-row-gap: 70px;
            grid-row-gap: 70px;
            width: 80%;
            margin: auto; } }
        @media (max-width: 500px) {
          body main .user-experince .comments-container {
            width: 90%; } }
  body footer {
    padding-bottom: 50px;
    background-color: #fbfcfe; }
    body footer .logo-container {
      width: 50%;
      margin: auto;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: row;
      column-gap: 100px;
      -moz-column-gap: 100px;
      -webkit-column-gap: 100px;
      grid-column-gap: 100px; }
      body footer .logo-container .logo {
        flex-basis: 25%; }
        body footer .logo-container .logo img {
          width: 100%;
          filter: grayscale(1);
          opacity: 0.5;
          transition: all 0.5s ease; }
          body footer .logo-container .logo img:hover {
            opacity: 1; }
      @media (max-width: 1900px) {
        body footer .logo-container {
          width: 60%; } }
      @media (max-width: 1600px) {
        body footer .logo-container {
          width: 70%; } }
      @media (max-width: 1400px) {
        body footer .logo-container {
          width: 80%; } }
      @media (max-width: 1200px) {
        body footer .logo-container {
          width: 90%; } }
      @media (max-width: 800px) {
        body footer .logo-container {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          flex-direction: column;
          width: 50%;
          row-gap: 70px;
          -moz-row-gap: 70px;
          -webkit-row-gap: 70px;
          grid-row-gap: 70px; } }