a {
    text-decoration: none;
}

@font-face {
    font-family: 'Roboto';
    font-weight: 900;
    font-style: normal;
    src:
        url(fonts/Roboto-Black.woff2) format('woff2'),
        url(fonts/Roboto-Black.woff) format('woff'),
}

@font-face {
    font-family: 'Roboto';
    font-weight: bold;
    font-style: normal;
    src:
        url(fonts/Roboto-Bold.woff2) format('woff2'),
        url(fonts/Roboto-Bold.woff) format('woff'),
}

@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url(fonts/Roboto-Regular.woff2) format(woff2),
         url(fonts/Roboto-Regular.woff) format(woff);
}

@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    font-style: normal;
    src:
        url(fonts/Roboto-Light.woff2) format('woff2'),
        url(fonts/Roboto-Medium.woff) format('woff'),
}


@font-face {
    font-family: "Hammersmith";
    font-style: normal;
    font-weight: 400;
    src: url(fonts/HammersmithOne-Regular.woff2) format(woff2),
         url(fonts/HammersmithOne-Regular.woff) format(woff);
}

@font-face {
    font-family: "Playfair Display";
    font-style: bold;
    src: url(fonts/PlayfairDisplay-Bold.woff2) format(woff2),
         url(fonts/PlayfairDisplay-Bold.woff) format(woff);
}

body {
    font-family: 'Roboto', sans-serif;
    width: 99% !important;
    overflow-x: hidden;
    width: 100%;
}

h1 {
    font-family: "Playfair Display";
}

h2 {
    font-family: "Playfair Display";
}

button {
    font-family: "Hammersmith";
}

:root {
    --turqouze: rgb(0, 224, 208);
    --turqouze-light: rgba(0, 224, 208, 0.3);
    --text-gray: #413d4b;
}

.none {
    display: none;
}

.none-1 {
    opacity: 0;
    height: 0;
    width: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.wrapper {
    display: grid;
    max-width: 1600px;
    width: 100%;
    grid-template-columns: minmax(1023px, 1600px);
    grid-template-rows: 670px 1fr 400px;
    margin: 0 auto;
}

/*Header*/

.slide-background {
    width: 101%;
    height: 100%;
}

.first-background {
    background-image: url(img/first.webp);
    position: absolute;
    top: 0;
    left: 0;
}

.second-background {
    background-image: url(img/second.webp);
    position: absolute;
    top: 0;
    left: 0;
}

.third-background {
    background-image: url(img/third.webp);
    position: absolute;
    top: 0;
    left: 0;
}

.fourth-background {
    background-image: url(img/fourth.webp);
    position: absolute;
    top: 0;
    left: 0;
}

.slide-container {
    width: 780px;
    margin: 0 auto;
    padding-top: 225px;
    text-align: center;
}

.blue-border {
    width: 50px;
    height: 1px;
    background-color: var(--turqouze);
    margin: 0 auto;
}

.main-title {
    margin: 0;
    padding-bottom: 27px;
    color: white;
    font-size: 32px;
}

.header-content {
    color: white;
    font-size: 14px;
    margin: 0;
    padding-top: 28px;
    padding-bottom: 65px;
    font-weight: 300;
}

.navbar {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -430px;
    max-width: 950px;
    z-index: 2;
    display: grid;
    grid-template-columns: 400px repeat(7, fit-content(100px));
    grid-template-rows: 80px;
}

.nav-link {
    color: white;
    margin: 32px 5px;
    font-size: 13px;
    font-weight: 600;
}

.logo {
    margin-top: 15px;
}

.nav-active {
    color: var(--turqouze);
}

.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    width: 100%;
    height: 100%;
}

.swiper-pagination-bullet {
    background-color: transparent;
    border: 1px solid white;
    width: 11px;
    height: 11px;
}

.swiper-pagination-bullet-active {
    width: 10px !important;
    height: 10px !important;
    border: none;
    background: var(--turqouze)  !important;
}

.swiper-pagination {
    top: 565px;
}

.btn {
    color: var(--turqouze);
    font-weight: 600;
    cursor: pointer;
    border: 1px solid var(--turqouze);
    border-radius: 2px;
    padding: 15px;
    background-color: transparent;
    font-size: 16px;
}

.btn:hover {
    background-color: var(--turqouze-light);
    color: white;
    transition: .2s background-color ease-in-out;
}

.btn:focus {
    background-color: var(--turqouze-light);
    color: white;
}

.btn:active {
    background-color: var(--turqouze);
    color: white;
}

.nav-link:hover {
    color: var(--turqouze-light);
    transition: .2s color ease-in-out;
}

.nav-link:focus {
    color: var(--turqouze-light);
}

.nav-link:active {
    color: var(--turqouze);
}

.nav-active:hover {
    color: var(--turqouze);
}

.nav-active:focus {
    color: var(--turqouze);
}

.nav-active:active {
    color: var(--turqouze);
}


/*Main*/

.main {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 400px 550px 755px 715px fit-content 500px 650px;
}

    /*Our story*/

.our-story {
    display: grid;
    grid-template-columns: minmax(250px, 710px) minmax(540px, 890px);
    grid-template-rows: 400px;
}

.our-story-image {
    margin-top: 70px;
    margin-left: auto;
    margin-right: 80px;
}

.our-story-content {
    margin-top: 70px;
    color: var(--text-gray);
}

.our-story-text {
    margin: 0;
    padding-top: 25px;
    font-size: 14px;
    width: 540px;
    line-height: 24px;
    color: var(--text-gray);
}

.section-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 40px;
}

.title {
    font-size: 22px;
    margin: 0;
    max-width: 300px;
}

    /*Expertise*/

.expertise {
    display: grid;
    margin: 0 auto;
    grid-template-columns: repeat(3, minmax(200px, 320px));
    grid-template-rows: 70px repeat(2, 300px);
    grid-template-areas: "title title title";
    margin-top: 70px;
}

.title-container {
    grid-area: title;
    text-align: center;
}

.expertise-title {
    margin: 0;
    color: var(--text-gray);
    font-size: 22px;
    padding-bottom: 15px;
}

.title-description {
    color: var(--text-gray);
    font-size: 14px;
    padding-bottom: 20px;
}

.gray-border {
    width: 50px;
    height: 1px;
    background-color: var(--text-gray);
    margin: 0 auto;
}

.expertise-module {
    text-align: center;
    margin-top: 40px;
}

.module-border {
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 0;
    margin-top: 80px;
}

.module-title {
    color: var(--text-gray);
    font-size: 14px;
    margin: 0;
    padding-top: 30px;
    padding-bottom: 20px;
}

.module-text {
    color: var(--text-gray);
    font-size: 14px;
    line-height: 22px;
    width: 255px;
    margin: 0 auto;
}

    /*Amazing team*/

.team {
    display: grid;
    grid-template-columns: repeat(4, 240px);
    grid-template-rows: 186px 308px 222px;
    margin: 0 auto;
    width: 960px;
    text-align: center;
}

.team-background {
    width: 101%;
    background-image: url(img/team-bg.webp);
    background-repeat: no-repeat;
}

.team-title-container {
    grid-row-start: 1;
    grid-column-start: 1;
    grid-column-end: 5;
}

.first-card {
    grid-row-start: 2;
    grid-column-start: 1;
}

.last-card {
    grid-row-start: 2;
    grid-column-start: 4;
}

.team-card {
    grid-row-start: 2;
    border-bottom: 1px solid #79768e;
}

.button-container {
    grid-row-start: 3;
    grid-column-start: 1;
    grid-column-end: 5;
}

.photo {
    width: 220px;
    height: 230px;
    object-fit: cover;
    margin-bottom: 20px;
}

.team-title {
    color: white;
    font-size: 22px;
    margin: 0;
    padding-bottom: 20px;
    padding-top: 70px;
}

.team-description {
    color: white;
    font-size: 14px;
    padding-bottom: 20px;
}

.white-border {
    width: 50px;
    height: 1px;
    background-color: #655c80;
    margin: 0 auto;
}

.name {
    color: white;
    font-weight: 600;
    margin-bottom: 9px;
    display: block;
    font-size: 14px;
}

.name:hover {
    color: var(--turqouze-light);
    cursor: pointer;
    transition: .2s color ease-in-out;
}

.name:focus {
    color: var(--turqouze-light);
    cursor: pointer;
}

.name:active {
    color: var(--turqouze);
    cursor: pointer;
}

.no-controls {
    display: none;
}

.profession {
    font-size: 13px;
    color: #79768e;
    font-weight: 200;
    margin-bottom: 30px;
}

.welcome {
    color: white;
    margin-top: 70px;
    margin-bottom: 40px;
}

.video-container {
    position: relative;
    display: grid;
    grid-template-columns: 100%;
    height: 550px;
}

.movie {
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    object-fit: cover;
}

.watch {
    position: relative;
}

.controls-background {
    background: linear-gradient(90deg, rgba(121, 118, 142, 0.5), rgba(240, 130, 130, 0.5));
    position: absolute;
    width: 101%;
    top: 497px;
    height: 53px;
    opacity: 1;
    transition: .1s opacity ease-in-out;
}


.hidden {
    opacity: 0;
    transition: 1.s opacity ease-in-out;
    transition-delay: 3s;
}

.progress {
    width: 90%;
    margin: 0 auto;
    display: block;
}

.progress-container {
    padding-top: 20px;
}

progress {
    border:0;
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #79768e;
}
progress::-webkit-progress-bar {
    width: 100%;
    height: 5px;
    border-radius: 5px;
    background: #79768e;
}
progress::-webkit-progress-value {
    border-radius: 5px;
    background: #161037;
}
progress::-moz-progress-bar {
    border-radius: 5px;
    background: #221b49;
}

.play-btn {
    border: none;
    background-color: transparent;
    background-image: url(img/Play-Icon.webp);
    width: 40px;
    height: 40px;
    background-size: 100%;
    position: absolute;
    top: 5px;
    left: 10px;
}

.play-btn:hover {
    background-image: url(img/play-hover.png);
}

.pause-btn {
    border: none;
    background-color: transparent;
    background-image: url(img/Pause\ Icon.png);
    width: 40px;
    height: 40px;
    background-size: 100%;
    position: absolute;
    top: 5px;
    left: 10px; 
}

.pause-btn:hover {
    background-image: url(img/pause-hover.png); 
}

.watch-story {
    font-size: 16px;
    font-weight: 600;
    color: white;
}

.big-play {
    position: absolute;
    top: 41%;
    left: 43%;
    text-align: center;
    cursor: pointer;
}

.big-btn {
    width: 105px;
    height: 105px;
    background-color: transparent;
    background-image: url(img/Play-Icon.webp);
    background-size: 90%;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    margin-bottom: 10px;
}

.big-btn:hover {
    background-size: 100%;
    transition: .2s background-size cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
}

.big-btn:focus {
    background-size: 100%;
    transition: .2s background-size cubic-bezier(0.075, 0.82, 0.165, 1);
    cursor: pointer;
}

.controls {
    display: flex;
}

.volume {
    position: absolute;
    right: 10px;
    height: 4px;
    top: 36px;
}

input[type='range'] {
    overflow: hidden;
    width: 80px;
    -webkit-appearance: none;
    background: linear-gradient(90deg, #d37783, #794586);
    border-radius: 2px;
  }
  
  input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    -webkit-appearance: none;
    color: var(--turqouze);
    margin-top: -1px;
  }
  
  input[type='range']::-webkit-slider-thumb {
    width: 10px;
    height: 10px;
    -webkit-appearance: none;
    cursor: pointer;
    background: var(--yellow);
    box-shadow: -80px 0 0 80px var(--turqouze);
  }
  
  input[type="range"]::-moz-range-progress {
    background-color: var(--turqouze);
  }
  
  input[type="range"]::-moz-range-track {
    background-color: white;
  }
  
  input[type="range"]::-ms-fill-lower {
    background-color:  var(--turqouze);
  }
  
  input[type="range"]::-ms-fill-upper {
    background-color: white;
  }


  /*Our works*/

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

  .works-title-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    position: relative;
  }

  .look-more {
      color: var(--text-gray);
      font-size: 14px;
      background-image: url(img/right154.webp);
      width: 180px;
      height: 16px;
      background-repeat: no-repeat;
      background-position: 96% 50%;
      position: absolute;
      left: 65%;
      top: 45%;
  }

  .look-more:hover {
      color: #a1a1a1;
      background-image: url(img/right-hover.webp);
      transition: .5s color cubic-bezier(0.075, 0.82, 0.165, 1);
      transition: .5s background-image cubic-bezier(0.075, 0.82, 0.165, 1);
  }

  .look-more:focus {
    color: #a1a1a1;
    background-image: url(img/right-hover.webp);
}

.look-more:active {
    text-decoration: underline;
}

  .works-title {
      color: var(--text-gray);
      font-size: 22px;
      position: absolute;
      left: 17%;
      top: 31%;
  }

  .project-link {
      width: 100%;
      height: 100%;
      display: block;
      z-index: 1;
  }

  .first-container {
      z-index: 5;
  }

  .picutre-1 {
      background-color: #b6b6b6;
  }

  .picutre-2 {
    background-color: #acacac;
  }

.picutre-3 {
    background-color: #a1a1a1;
}

.picutre-4 {
    background-color: #8a8a8a;
}

.picutre-5 {
    background-color: #b6b6b6;
}

.picutre-6 {
    background-color: #a4a4a4;
}

.picutre-7 {
    background-color: #a4a4a4;
}

.picutre-8 {
    background-color: #b6b6b6;
}

.picutre-9 {
    background-color: #8a8a8a;
}

.picutre-10 {
    background-color: #a1a1a1;
}

.picutre-11 {
    background-color: #acacac;
}

.picutre-12 {
    background-color: #b6b6b6;
}

.work-btn-container {
    text-align: center;
}

.load {
    margin-top: 80px;
    padding-left: 26px;
    padding-right: 26px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.project-pictures-container {
    display: grid;
    grid-template-columns: repeat(6, minmax(170px, 269px));
    grid-template-rows: repeat(2, 200px);
    width: 101%;
    margin-bottom: 60px;
    margin-top: 60px;
    opacity: 1;
    transform: translateX(0);
    transition: .5s opacity ease-in-out;
}

.none-1 {
    opacity: 0;
    height: 0;
    width: 0;
    margin-top: 0;
    margin-bottom: 0;
    transform: translateX(-101%);
    transition: .5s opacity ease-in-out;
}

.none {
    display: none;
}

    /*Quotes*/

.quoutes {
    background-image: url(img/testimonials-background.webp);
    width: 100%;
}

.double-quoutes {
    width: 32px;
    height: 30px;
    background-image: url(img/“.png);
    background-position: center;
    background-repeat: no-repeat;
    margin: 0 auto;
    padding-top: 70px;
}

.hide {
    display: none;
}

.slider-2 {
    width: 400px;
    height: 70px;
}

.testimonial-slide {
    width: 70px;
    height: 70px;
}

.testimonial-client {
    width: 50px;
    height: 50px; 
    margin: 10px;
}

.slider-2 {
    margin-left: 33px !important;
}

.slider-2 .swiper-slide-active .testimonial-client {
    width: 70px;
    height: 70px;
    margin: 0;
}

.buttons-wrapper {
    width: 450px;
    position: relative;
    margin: 0 auto;
    margin-bottom: 70px;
}

.btn-next {
    width: 15px;
    height: 26px;
    background-color: transparent;
    border: none;
    background-image: url(img/slider-stroke.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top: 23px;
    right: 0;
    cursor: pointer;
    z-index: 1;
}

.btn-prev {
    width: 15px;
    height: 26px;
    background-color: transparent;
    border: none;
    background-image: url(img/slider-stroke.webp);
    transform: rotate(180deg);
    background-repeat: no-repeat;
    background-position: 50% 50%;
    position: absolute;
    top: 23px;
    left: 0;
    cursor: pointer;
}

.testimonial {
    width: 767px;
    height: 175px;
    margin: 0 auto;
    text-align: center;
    margin-bottom: 40px;
}

.testimonial-content {
    color: white;
    font-size: 16px;
    line-height: 26px;
    font-family: "Playfair Display";
    margin-bottom: 50px;
}

.customer-name {
    color: white;
    font-weight: 800;
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 10px;
}

.customer-occupation {
    color: white;
    font-size: 13px;
    font-weight: 200;
}

    /*Good News*/

.contacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(512px, 1fr));
    grid-template-rows: 655px;
}

.contacts-title {
    color: var(--text-gray);
    font-size: 22px;
    margin-top: 70px;
    margin-bottom: 33px;
}

.news {
    margin-right: 248px;
    margin-left: auto;
    width: 264px;
}

.contact-form {
    margin-left: auto;
    margin-right: 55px;
    width: 460px;
    display: flex;
    flex-direction: column;
}

.input {
    margin-bottom: 25px;
    width: 94%;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    border: 1px solid #e5e5e5;
}

.input:focus {
    outline: 1px solid #968ea8;
}

.textarea {
    height: 150px;
    resize: none;
}

.client-title {
    width: 240px;
    margin-right: auto;
    margin-left: 47px;
}

.sibmit-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.client-container {
    margin-left: 47px;
    margin-right: auto;
    width: 390px;
    display: grid;
    grid-template-columns: repeat(2, 150px);
    grid-template-rows: repeat(5, 73px);
    grid-column-gap: 80px;
}

.zara {
    padding-top: 9px;
    width: 162px;
    height: 31px;
}

.calvin {
    padding-top: 10px;
    width: 151px;
    height: 34px;
}

.gucci {
    padding-top: 24px;
    width: 140px;
    height: 21px;
}

.puma {
    width: 114px;
    height: 56px;
}

.barneys {
    width: 154px;
    height: 41px;
}

.levis {
    width: 109px;
    height: 53px;
}

.mango {
    width: 138px;
    height: 22px;
}

.nike {
    width: 95px;
    height: 34px;
}

.billabong {
    width: 130px;
    height: 70px;
}

/*Footer*/

.footer {
    background-image: url(img/footer-background.webp);
    width: 100%;
}

.footer-container {
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 310px);
    grid-template-rows: 233px 96px;
    width: 940px;
    grid-column-gap: 10px;
    margin-top: 70px;
}

.footer-title {
    margin-bottom: 38px;
    color: white;
    font-size: 15px;
    font-weight: 800px;
}

.logo {
    margin-bottom: 20px;
}

.footer-content {
    margin: 0;
    color: white;
    width: 285px;
}

.footer-link {
    color: white;
    padding: 3px;
}

.footer-link:hover {
    color: var(--turqouze-light);
    transition: .3s color cubic-bezier(0.075, 0.82, 0.165, 1);
}

.footer-link:focus {
    color: var(--turqouze-light);
}

.footer-link:active {
    color: var(--turqouze);
    transition: .3s color cubic-bezier(0.075, 0.82, 0.165, 1);
}

.copiright {
    grid-column-start: 3;
    grid-row-start: 2;
    font-size: 14px;
    color: white;
}

.footer-address {
    font-style: normal;
    color: white;
    font-size: 14px;
    padding-left: 30px;
    background-image: url(img/big104.webp);
    background-repeat: no-repeat;
    width: 267px;
    margin-bottom: 20px;
}

.footer-phone {
    color: white;
    padding-left: 30px;
    background-image: url(img/phone351.webp);
    background-repeat: no-repeat;
}

.footer-phone:hover {
    color: #968ea8;
}

.footer-phone:focus {
    color: #968ea8;
}

.footer-phone:active {
    color: var(--turqouze);
}

.footer-input {
    background-color: transparent;
    padding-left: 18px;
    padding-top: 15px;
    padding-bottom: 15px;
    border: 1px solid #968ea8;
    outline: none;
    width: 200px;
    outline: none;
}

.footer-input:focus {
    outline: 1px solid #736692;
}

.send-btn {
    height: 48px;
    width: 70px;
    background-color: rgba(150, 142, 168, 0.5);
    border: none;
    background-image: url(img/paper122.webp);
    background-repeat: no-repeat;
    background-position: 50% 50%;
}

.send-btn:hover {
    background-color: rgb(118, 106, 146);
    cursor: pointer;
    transition: .3s background-color cubic-bezier(0.075, 0.82, 0.165, 1);
} 

.send-btn:focus {
    outline: 1px solid var(--turqouze);
}

.send-btn:active {
    background-color: var(--turqouze);
}

.subscribe {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

@media (max-width: 1600px) {

    .none {
        display: none;
    }

    .container {
        margin: 0 auto;
        max-width: 1600px;
        width: 100%;
    }

    .wrapper {
        display: grid;
        max-width: 1600px;
        margin: 0 auto;
        width: 100%;
        grid-template-columns: minmax(1023px, 1600px);
        grid-template-rows: 670px 1fr 400px;
        margin: 0 auto;
    }

    /*Header*/

    .slide-background {
        width: 101%;
        height: 100%;
    }

    .first-background {
        background-image: url(img/first.webp);
        position: absolute;
        top: 0;
        left: 0;
    }

    .second-background {
        background-image: url(img/second.webp);
        position: absolute;
        top: 0;
        left: 0;
    }

    .third-background {
        background-image: url(img/third.webp);
        position: absolute;
        top: 0;
        left: 0;
    }

    .fourth-background {
        background-image: url(img/fourth.webp);
        position: absolute;
        top: 0;
        left: 0;
    }

    .slide-container {
        width: 780px;
        margin: 0 auto;
        padding-top: 225px;
        text-align: center;
    }

    .blue-border {
        width: 50px;
        height: 1px;
        background-color: var(--turqouze);
        margin: 0 auto;
    }

    .main-title {
        margin: 0;
        padding-bottom: 27px;
        color: white;
        font-size: 32px;
    }

    .header-content {
        color: white;
        font-size: 14px;
        margin: 0;
        padding-top: 28px;
        padding-bottom: 65px;
        font-weight: 300;
    }

    .navbar {
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -430px;
        max-width: 950px;
        z-index: 2;
        display: grid;
        grid-template-columns: 400px repeat(7, fit-content(100px));
        grid-template-rows: 80px;
    }

    .nav-link {
        color: white;
        margin: 32px 5px;
        font-size: 13px;
        font-weight: 600;
    }

    .logo {
        margin-top: 15px;
    }

    .nav-active {
        color: var(--turqouze);
    }

    .swiper {
        width: 101%;
        height: 100%;
    }

    .swiper-slide {
        width: 101%;
        height: 100%;
    }

    .swiper-pagination-bullet {
        background-color: transparent;
        border: 1px solid white;
        width: 11px;
        height: 11px;
    }

    .swiper-pagination-bullet-active {
        width: 10px !important;
        height: 10px !important;
        border: none;
        background: var(--turqouze)  !important;
    }

    .swiper-pagination {
        top: 565px;
    }

    .btn {
        color: var(--turqouze);
        font-weight: 600;
        cursor: pointer;
        border: 1px solid var(--turqouze);
        border-radius: 2px;
        padding: 15px;
        background-color: transparent;
        font-size: 16px;
    }

    .btn:hover {
        background-color: var(--turqouze-light);
        color: white;
        transition: .2s background-color ease-in-out;
    }

    .btn:focus {
        background-color: var(--turqouze-light);
        color: white;
    }

    .btn:active {
        background-color: var(--turqouze);
        color: white;
    }

    .nav-link:hover {
        color: var(--turqouze-light);
        transition: .2s color ease-in-out;
    }

    .nav-link:focus {
        color: var(--turqouze-light);
    }

    .nav-link:active {
        color: var(--turqouze);
    }

    .nav-active:hover {
        color: var(--turqouze);
    }

    .nav-active:focus {
        color: var(--turqouze);
    }

    .nav-active:active {
        color: var(--turqouze);
    }


    /*Main*/

    .main {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 400px 550px 755px 715px fit-content 500px 650px;
    }

        /*Our story*/

    .our-story {
        display: grid;
        grid-template-columns: minmax(250px, 710px) minmax(540px, 890px);
        grid-template-rows: 400px;
    }

    .our-story-image {
        margin-top: 70px;
        margin-left: auto;
        margin-right: 80px;
    }

    .our-story-content {
        margin-top: 70px;
        color: var(--text-gray);
    }

    .our-story-text {
        margin: 0;
        padding-top: 25px;
        font-size: 14px;
        width: 540px;
        line-height: 24px;
        color: var(--text-gray);
    }

    .section-btn {
        padding-top: 10px;
        padding-bottom: 10px;
        margin-top: 40px;
    }

    .title {
        font-size: 22px;
        margin: 0;
        max-width: 300px;
    }

        /*Expertise*/

    .expertise {
        display: grid;
        margin: 0 auto;
        grid-template-columns: repeat(3, minmax(200px, 320px));
        grid-template-rows: 70px repeat(2, 300px);
        grid-template-areas: "title title title";
        margin-top: 70px;
    }

    .title-container {
        grid-area: title;
        text-align: center;
    }

    .expertise-title {
        margin: 0;
        color: var(--text-gray);
        font-size: 22px;
        padding-bottom: 15px;
    }

    .title-description {
        color: var(--text-gray);
        font-size: 14px;
        padding-bottom: 20px;
    }

    .gray-border {
        width: 50px;
        height: 1px;
        background-color: var(--text-gray);
        margin: 0 auto;
    }

    .expertise-module {
        text-align: center;
        margin-top: 40px;
    }

    .module-border {
        border-bottom: 1px solid #ebebeb;
        margin-bottom: 0;
        margin-top: 80px;
    }

    .module-title {
        color: var(--text-gray);
        font-size: 14px;
        margin: 0;
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .module-text {
        color: var(--text-gray);
        font-size: 14px;
        line-height: 22px;
        width: 255px;
        margin: 0 auto;
    }

        /*Amazing team*/

    .team {
        display: grid;
        grid-template-columns: repeat(4, 240px);
        grid-template-rows: 186px 308px 222px;
        margin: 0 auto;
        width: 960px;
        text-align: center;
    }

    .team-background {
        width: 101%;
        background-image: url(img/team-bg.webp);
        background-repeat: no-repeat;
    }

    .team-title-container {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .first-card {
        grid-row-start: 2;
        grid-column-start: 1;
    }

    .last-card {
        grid-row-start: 2;
        grid-column-start: 4;
    }

    .team-card {
        grid-row-start: 2;
        border-bottom: 1px solid #79768e;
    }

    .button-container {
        grid-row-start: 3;
        grid-column-start: 1;
        grid-column-end: 5;
    }

    .photo {
        width: 220px;
        height: 230px;
        object-fit: cover;
        margin-bottom: 20px;
    }

    .team-title {
        color: white;
        font-size: 22px;
        margin: 0;
        padding-bottom: 20px;
        padding-top: 70px;
    }

    .team-description {
        color: white;
        font-size: 14px;
        padding-bottom: 20px;
    }

    .white-border {
        width: 50px;
        height: 1px;
        background-color: #655c80;
        margin: 0 auto;
    }

    .name {
        color: white;
        font-weight: 600;
        margin-bottom: 9px;
        display: block;
        font-size: 14px;
    }

    .name:hover {
        color: var(--turqouze-light);
        cursor: pointer;
        transition: .2s color ease-in-out;
    }

    .name:focus {
        color: var(--turqouze-light);
        cursor: pointer;
    }

    .name:active {
        color: var(--turqouze);
        cursor: pointer;
    }

    .no-controls {
        display: none;
    }

    .profession {
        font-size: 13px;
        color: #79768e;
        font-weight: 200;
        margin-bottom: 30px;
    }

    .welcome {
        color: white;
        margin-top: 70px;
        margin-bottom: 40px;
    }

    .video-container {
        position: relative;
        display: grid;
        grid-template-columns: 100%;
        height: 550px;
    }

    .movie {
        position: absolute;
        top: 0;
        left: 0;
        width: 101%;
        height: 100%;
        object-fit: cover;
    }

    .watch {
        position: relative;
    }

    .controls-background {
        background: linear-gradient(90deg, rgba(121, 118, 142, 0.5), rgba(240, 130, 130, 0.5));
        position: absolute;
        width: 101%;
        top: 497px;
        height: 53px;
        opacity: 1;
        transition: .1s opacity ease-in-out;
    }

    
    .hidden {
        opacity: 0;
        transition: 1.s opacity ease-in-out;
        transition-delay: 3s;
    }

    .progress {
        width: 90%;
        margin: 0 auto;
        display: block;
    }

    .progress-container {
        padding-top: 20px;
    }

    progress {
        border:0;
        width: 100%;
        height: 5px;
        border-radius: 5px;
        background: #79768e;
    }
    progress::-webkit-progress-bar {
        width: 100%;
        height: 5px;
        border-radius: 5px;
        background: #79768e;
    }
    progress::-webkit-progress-value {
        border-radius: 5px;
        background: #161037;
    }
    progress::-moz-progress-bar {
        border-radius: 5px;
        background: #221b49;
    }

    .play-btn {
        border: none;
        background-color: transparent;
        background-image: url(img/Play-Icon.webp);
        width: 40px;
        height: 40px;
        background-size: 100%;
        position: absolute;
        top: 5px;
        left: 10px;
    }

    .play-btn:hover {
        background-image: url(img/play-hover.png);
    }

    .pause-btn {
        border: none;
        background-color: transparent;
        background-image: url(img/Pause\ Icon.png);
        width: 40px;
        height: 40px;
        background-size: 100%;
        position: absolute;
        top: 5px;
        left: 10px; 
    }

    .pause-btn:hover {
        background-image: url(img/pause-hover.png); 
    }

    .watch-story {
        font-size: 16px;
        font-weight: 600;
        color: white;
    }

    .big-play {
        position: absolute;
        top: 41%;
        left: 43%;
        text-align: center;
        cursor: pointer;
    }

    .big-btn {
        width: 105px;
        height: 105px;
        background-color: transparent;
        background-image: url(img/Play-Icon.webp);
        background-size: 90%;
        background-position: center;
        background-repeat: no-repeat;
        border: none;
        margin-bottom: 10px;
    }

    .big-btn:hover {
        background-size: 100%;
        transition: .2s background-size cubic-bezier(0.075, 0.82, 0.165, 1);
        cursor: pointer;
    }

    .big-btn:focus {
        background-size: 100%;
        transition: .2s background-size cubic-bezier(0.075, 0.82, 0.165, 1);
        cursor: pointer;
    }

    .controls {
        display: flex;
    }

    .volume {
        position: absolute;
        right: 10px;
        height: 4px;
        top: 36px;
    }

    input[type='range'] {
        overflow: hidden;
        width: 80px;
        -webkit-appearance: none;
        background: linear-gradient(90deg, #d37783, #794586);
        border-radius: 2px;
      }
      
      input[type='range']::-webkit-slider-runnable-track {
        height: 5px;
        -webkit-appearance: none;
        color: var(--turqouze);
        margin-top: -1px;
      }
      
      input[type='range']::-webkit-slider-thumb {
        width: 10px;
        height: 10px;
        -webkit-appearance: none;
        cursor: pointer;
        background: var(--yellow);
        box-shadow: -80px 0 0 80px var(--turqouze);
      }
      
      input[type="range"]::-moz-range-progress {
        background-color: var(--turqouze);
      }
      
      input[type="range"]::-moz-range-track {
        background-color: white;
      }
      
      input[type="range"]::-ms-fill-lower {
        background-color:  var(--turqouze);
      }
      
      input[type="range"]::-ms-fill-upper {
        background-color: white;
      }


      /*Our works*/

      .works {
        width: 100%;
        display: flex;
        flex-direction: column;
      }

      .works-title-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        position: relative;
        grid-template-rows: 120px;
      }

      .look-more {
          color: var(--text-gray);
          font-size: 14px;
          background-image: url(img/right154.webp);
          width: 180px;
          height: 16px;
          background-repeat: no-repeat;
          background-position: 96% 50%;
          position: absolute;
          left: 65%;
          top: 45%;
      }

      .look-more:hover {
          color: #a1a1a1;
          background-image: url(img/right-hover.webp);
          transition: .5s color cubic-bezier(0.075, 0.82, 0.165, 1);
          transition: .5s background-image cubic-bezier(0.075, 0.82, 0.165, 1);
      }

      .look-more:focus {
        color: #a1a1a1;
        background-image: url(img/right-hover.webp);
    }

    .look-more:active {
        text-decoration: underline;
    }

      .works-title {
          color: var(--text-gray);
          font-size: 22px;
          position: absolute;
          left: 17%;
          top: 31%;
      }

      .project-link {
          width: 100%;
          height: 100%;
          display: block;
      }

      .picutre-1 {
          background-color: #b6b6b6;
      }

      .project-pictures:hover {
        background-color: #8a8686;
        transition: .3s background-color ease-in-out;
    }

    .project-pictures:focus {
        background-color: #8a8686;
        transition: .5s background-color ease-in-out;
    }

      .picutre-2 {
        background-color: #acacac;
      }

    .picutre-3 {
        background-color: #a1a1a1;
    }

    .picutre-4 {
        background-color: #8a8a8a;
    }

    .picutre-5 {
        background-color: #b6b6b6;
    }

    .picutre-6 {
        background-color: #a4a4a4;
    }

    .picutre-7 {
        background-color: #a4a4a4;
    }

    .picutre-8 {
        background-color: #b6b6b6;
    }

    .picutre-9 {
        background-color: #8a8a8a;
    }

    .picutre-10 {
        background-color: #a1a1a1;
    }

    .picutre-11 {
        background-color: #acacac;
    }

    .picutre-12 {
        background-color: #b6b6b6;
    }

    .work-btn-container {
        display: flex;
        justify-content: center;
    }

    #hide-btn {
        margin-left: 20px;
    }

    .load {
        margin-top: 0;
        margin-bottom: 60px;
        padding-left: 26px;
        padding-right: 26px;
        padding-top: 10px;
        padding-bottom: 10px;
        z-index: 2;
    }

    .project-pictures-container {
        display: grid;
        grid-template-columns: repeat(6, minmax(170px, 269px));
        grid-template-rows: repeat(2, 200px);
        width: 101%;
        opacity: 1;
        transform: translateX(0);
        transition: .3s transform ease-in-out;
        transition: .5s opacity ease-in-out;
    }

    .none-1 {
        opacity: 0;
        height: 0;
        width: 0;
        margin-top: 0;
        margin-bottom: 0;
        transform: translateX(-101%);
        transition: .3s opacity ease-in-out;
    }

    .none {
        display: none;
    }

        /*Quotes*/

    .quoutes {
        background-image: url(img/testimonials-background.webp);
        width: 101%;
    }

    .double-quoutes {
        width: 32px;
        height: 30px;
        background-image: url(img/“.png);
        background-position: center;
        background-repeat: no-repeat;
        margin: 0 auto;
        padding-top: 70px;
    }

    .hide {
        display: none;
    }

    .slider-2 {
        width: 400px;
        height: 70px;
    }

    .testimonial-slide {
        width: 70px;
        height: 70px;
    }

    .testimonial-client {
        width: 50px;
        height: 50px; 
        margin: 10px;
    }

    .slider-2 {
        margin-left: 33px !important;
    }

    .slider-2 .swiper-slide-active .testimonial-client {
        width: 70px;
        height: 70px;
        margin: 0;
    }

    .buttons-wrapper {
        width: 450px;
        position: relative;
        margin: 0 auto;
        margin-bottom: 70px;
    }

    .btn-next {
        width: 15px;
        height: 26px;
        background-color: transparent;
        border: none;
        background-image: url(img/slider-stroke.webp);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        position: absolute;
        top: 23px;
        right: 0;
        cursor: pointer;
        z-index: 1;
    }

    .btn-prev {
        width: 15px;
        height: 26px;
        background-color: transparent;
        border: none;
        background-image: url(img/slider-stroke.webp);
        transform: rotate(180deg);
        background-repeat: no-repeat;
        background-position: 50% 50%;
        position: absolute;
        top: 23px;
        left: 0;
        cursor: pointer;
    }

    .testimonial {
        width: 767px;
        height: 175px;
        margin: 0 auto;
        text-align: center;
        margin-bottom: 40px;
    }

    .testimonial-content {
        color: white;
        font-size: 16px;
        line-height: 26px;
        font-family: "Playfair Display";
        margin-bottom: 50px;
    }

    .customer-name {
        color: white;
        font-weight: 800;
        font-size: 14px;
        line-height: 22px;
        margin-bottom: 10px;
    }

    .customer-occupation {
        color: white;
        font-size: 13px;
        font-weight: 200;
    }

        /*Good News*/

    .contacts {
        display: grid;
        grid-template-columns: repeat(2, minmax(512px, 1fr));
        grid-template-rows: 655px;
    }

    .contacts-title {
        color: var(--text-gray);
        font-size: 22px;
        margin-top: 70px;
        margin-bottom: 33px;
    }

    .news {
        margin-right: 248px;
        margin-left: auto;
        width: 264px;
    }

    .contact-form {
        margin-left: auto;
        margin-right: 55px;
        width: 460px;
        display: flex;
        flex-direction: column;
    }

    .input {
        margin-bottom: 25px;
        width: 94%;
        padding-top: 15px;
        padding-bottom: 15px;
        padding-left: 20px;
        border: 1px solid #e5e5e5;
    }

    .input:focus {
        outline: 1px solid #968ea8;
    }

    .textarea {
        height: 150px;
        resize: none;
    }

    .client-title {
        width: 240px;
        margin-right: auto;
        margin-left: 47px;
    }

    .sibmit-btn {
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 30px;
        padding-right: 30px;
    }

    .client-container {
        margin-left: 47px;
        margin-right: auto;
        width: 390px;
        display: grid;
        grid-template-columns: repeat(2, 150px);
        grid-template-rows: repeat(5, 73px);
        grid-column-gap: 80px;
    }

    .zara {
        padding-top: 9px;
    }

    .calvin {
        padding-top: 10px;
    }

    /*Footer*/

    .footer {
        background-image: url(img/footer-background.webp);
        width: 101%;
    }

    .footer-container {
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 310px);
        grid-template-rows: 233px 96px;
        width: 940px;
        grid-column-gap: 10px;
        margin-top: 70px;
    }

    .footer-title {
        margin-bottom: 38px;
        color: white;
        font-size: 15px;
        font-weight: 800px;
    }

    .logo {
        margin-bottom: 20px;
    }

    .footer-content {
        margin: 0;
        color: white;
        width: 285px;
    }

    .footer-link {
        color: white;
        padding: 3px;
    }

    .footer-link:hover {
        color: var(--turqouze-light);
        transition: .3s color cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .footer-link:focus {
        color: var(--turqouze-light);
    }

    .footer-link:active {
        color: var(--turqouze);
        transition: .3s color cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .copiright {
        grid-column-start: 3;
        grid-row-start: 2;
        font-size: 14px;
        color: white;
    }

    .footer-address {
        font-style: normal;
        color: white;
        font-size: 14px;
        padding-left: 30px;
        background-image: url(img/big104.webp);
        background-repeat: no-repeat;
        width: 267px;
        margin-bottom: 20px;
    }

    .footer-phone {
        color: white;
        padding-left: 30px;
        background-image: url(img/phone351.webp);
        background-repeat: no-repeat;
    }

    .footer-phone:hover {
        color: #968ea8;
    }

    .footer-phone:focus {
        color: #968ea8;
    }

    .footer-phone:active {
        color: var(--turqouze);
    }

    .footer-input {
        background-color: transparent;
        padding-left: 18px;
        padding-top: 15px;
        padding-bottom: 15px;
        border: 1px solid #968ea8;
        outline: none;
        width: 200px;
        outline: none;
    }

    .footer-input:focus {
        outline: 1px solid #736692;
    }

    .send-btn {
        height: 48px;
        width: 70px;
        background-color: rgba(150, 142, 168, 0.5);
        border: none;
        background-image: url(img/paper122.webp);
        background-repeat: no-repeat;
        background-position: 50% 50%;
    }

    .send-btn:hover {
        background-color: rgb(118, 106, 146);
        cursor: pointer;
        transition: .3s background-color cubic-bezier(0.075, 0.82, 0.165, 1);
    } 
    
    .send-btn:focus {
        outline: 1px solid var(--turqouze);
    }

    .send-btn:active {
        background-color: var(--turqouze);
    }

    .subscribe {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

@media (max-width: 1024px) {

    .none {
        display: none;
    }

    .wrapper {
        display: grid;
        max-width: 1024px;
        width: 100%;
        grid-template-columns: minmax(1023px, 1600px);
        grid-template-rows: 870px 1fr 600px;
    }

    .swiper {
        width: 101%;
        height: 100%;
    }

    .swiper-slide {
        width: 100%;
        height: 100%;
    }

    .slide-background {
        background-size: cover;
    }

    .navbar {
        position: absolute;
        top: 50px;
        left: 2%;
        margin-left: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: 350px repeat(7, fit-content(130px));
        grid-template-rows: 120px;
        align-items: center;
    }

    .nav-link {
        font-size: 17px;
        display: block;
    }

    .main-title {
        font-size: 50px;
    }

    .contact-form {
        width: 370px;
    }

    .logo {
        width: 300px;
        object-fit: cover;
        margin: 0;
        height: 116px;
    }

    .news {
        margin-right: 160px;
    }
}

@media (max-width: 768px) {

    .none {
        display: none;
    }

    /*Header*/
    .navbar {
        left: 74%;
        grid-template-rows: 140px;
        grid-template-columns: minmax(150px, 300px) repeat(7, fit-content(130px));
        grid-gap: 20px;
        margin-left: 0;
        top: 0;
        left: 0;
        width: 966px;
    }

    .logo {
        width: 84%;
        margin-left: 24px;
        height: auto;
        object-fit: cover;
    }

    .nav-link {
        font-size: 20px;
        margin-top: 32px;
        margin-left: 0;
        margin-right: 0;
    }

    .swiper-pagination {
        top: 780px;
    }

    .swiper {
        width: 101%;
    }

    .slider-1 {
        width: 102%;
    }

    .swiper-pagination-bullet {
        width: 30px !important;
        height: 30px !important;
        margin: 0 15px !important;
        outline: none;
    }

    .main-title {
        font-size: 50px;
        padding-bottom: 40px;
    }

    .blue-border {
        width: 70px;
    }

    .header-content {
        font-size: 27px;
        padding-top: 40px;
        padding-bottom: 100px;
    }

    .btn {
        padding: 20px;
        font-size: 18px;
    }

    .title {
        font-size: 27px;
    }

    .our-story-content {
        margin-top: 40px;
    }

    .our-story-text {
        padding-top: 15px;
        font-size: 16px;
    }

    .section-btn {
        margin-top: 20px;
    }

    .learn-more-btn {
        padding-top: 25px;
        padding-bottom: 25px;
        padding-left: 60px;
        padding-right: 60px;
        font-size: 25px;
    }

    .main {
        display: grid;
        grid-template-columns: 100%;
        grid-template-rows: 600px 750px 955px 1060px fit-content 600px 650px;  
    }

    /*Our story*/

    .our-story {
        width: 100%;
        height: 600px;
    }

    .our-story-image {
        margin-top: 170px;
    }

    .title {
        font-size: 30px;
    }

    .story-title {
        margin-bottom: 20px;
    }

    .our-story-text {
        font-size: 25px;
        font-weight: 300;
    }

    .our-story-content {
        margin-top: 70px;
    }

    .section-btn {
        margin-top: 50px;
    }

    /*Watch*/

    .watch {
        width: 101%;
        height: 750px;
    }

    .video-container {
        height: 100%;
    }

    .controls-background {
        height: 100px;
        top: 650px;
    }

    .big-btn {
        width: 135px;
        height: 135px;
    }

    .progress {
        width: 80%;
        height: 10px;
        margin-left: 13.5%;
    }

    progress::-webkit-progress-bar {
        width: 100%;
        height: 10px;
        border-radius: 5px;
        background: #79768e;
    }

    .progress-container {
        padding-top: 30px;
    }

    .play-btn {
        width: 75px;
        height: 75px;
        top: 10px;
        left: 25px;
    }

    .pause-btn {
        width: 75px;
        height: 75px;
        top: 10px;
        left: 25px; 
    }

    .volume {
        right: 68px;
        height: 10px;
        top: 70px;
    }

    input[type='range'] {
        overflow: hidden;
        width: 200px;
        -webkit-appearance: none;
        background: linear-gradient(90deg, #d37783, #794586);
        border-radius: 2px;
      }
      
      input[type='range']::-webkit-slider-runnable-track {
        height: 10px;
        -webkit-appearance: none;
        color: var(--turqouze);
        margin-top: -1px;
      }
      
      input[type='range']::-webkit-slider-thumb {
        -webkit-appearance: none;
        cursor: pointer;
        background: var(--yellow);
        box-shadow: -80px 0 0 80px var(--turqouze);
      }


    /*Expertise*/

    .expertise {
        height: 955px;
        margin-top: 90px;
        grid-template-rows: 70px repeat(2, 380px);
    }

    .expertise-title {
        font-size: 30px;
    }

    .title-description {
        font-size: 17px;
    }

    .module-border {
        margin-top: 115px;
        margin-bottom: -65px;
    }

    .icon {
        height: 70px;
    }

    .gray-border {
        width: 70px;
    }

    .module-title {
        font-size: 20px;
    }

    .second-line {
        margin-top: 140px;
    }

    .module-text {
        font-size: 20px;
        line-height: 27px;
    }

    /*Team*/

    .team-background {
        height: 1160px;
        background-size: cover;
        width: 102%;
    }

    .team {
        display: grid;
        grid-template-columns: repeat(2, 430px);
        grid-column-gap: 50px;
        grid-template-rows: 186px 360px 360px 90px;
        margin: 0 auto;
        height: 960px;
        text-align: center;
    }

    .team-title-container {
        grid-row-start: 1;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .welcome {
        display: none;
    }

    .first-card {
        grid-row-start: 2;
        grid-column-start: 1;
    }

    .last-card {
        grid-row-start: 3;
        grid-column-start: 2;
    }

    .team-card {
        border-bottom: 1px solid #79768e;
        margin-top: 30px;
    }

    .third-card {
        grid-row-start: 3;
        grid-column-start: 1;
    }

    .button-container {
        grid-row-start: 4;
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .hire {
        margin-top: 80px;
        padding: 20px 60px;
        font-size: 25px;
    }

    .team-description {
        font-size: 17px;
    }

    .white-border {
        width: 70px;
    }

    .photo {
        width: 300px;
    }

    .team-title {
        font-size: 27px;
    }

    .name {
        font-size: 17px;
    }

    .profession {
        font-size: 16px;
        color: #bdb9d6;
    }

    /*Works*/

    .works {
        display: flex;   
    }

    .picutre-6 {
        display: none;
    }

    .picutre-5 {
        display: none;
    }

    .picutre-12 {
        display: none;
    }

    .picutre-11 {
        display: none;
    }

    .project-pictures-container {
        grid-template-columns: repeat(4, minmax(170px, 269px));
        grid-template-rows: repeat(2, 250px);
        width: 102%;
        margin-bottom: 60px;
        margin-top: 60px;
    }

    .works-title {
        font-size: 27px;
    }

    .look-more {
        width: 250px;
        font-size: 20px;
        height: 24px;
    }

    .load {
        margin-top: 60px;
        padding: 20px 40px;
        font-size: 25px;
    }

    /*Quoutes*/

    .quoutes {
        height: 600px;
        background-size: cover;
        width: 102%;
    }

    .testimonial-content {
        font-size: 25px;
    }

    .double-quoutes {
        width: 52px;
        height: 50px;
        background-size: 100%;
    }

    .customer-name {
        font-size: 27px;
    }

    .customer-occupation {
        font-size: 17px;
    }

    .slider-2 {
        width: 480px;
        height: 80px;
        margin-left: 68px !important;
    }

    .testimonial {
        height: 210px;
    }

    .buttons-wrapper {
        width: 600px;
    }

    .btn-next {
        width: 21px;
        height: 31px;
        background-size: 100%;
    }

    .btn-prev {
        width: 21px;
        height: 31px;
        background-size: 100%;
    }

    .slider-2 .swiper-slide-active .testimonial-client {
        width: 80px;
        height: 80px;
    }

    .testimonial-client {
        width: 60px;
        height: 60px;
    }

    /*Contacts*/

    .contacts {
        grid-template-columns: 100%;
        grid-template-rows: 1fr 400px;
        height: 1000px;
    }

    .contacts-title {
        font-size: 27px;
    }

    .news {
        width: 321px;
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 30px;
    }

    .contact-form {
        margin: 0 auto;
        width: 590px;
    }

    .input {
        height: 28px;
        border: 2px solid #e5e5e5;
        cursor: zoom-in;
    }

    .input:focus {
        height: 35px;
        width: 110%;
        font-size: 20px;
    }

    .textarea {
        height: 150px;
    }

    .textarea:focus {
        width: 110%;
        height: 170px;
    }

    .client-title {
        width: 297px;
        margin: 0 auto;
        margin-top: 60px;
        margin-bottom: 30px;
    }

    .client-container {
        margin-left: 47px;
        margin-right: auto;
        width: 390px;
        display: grid;
        grid-template-columns: repeat(5, 150px);
        grid-template-rows: repeat(2, 73px);
        grid-column-gap: 50px;
    }

    .gucci {
        margin-top: 31px;
    }

    .nike {
        margin-top: 10px;
    }

    .mango {
        margin-top: 30px;
    }

    .converse {
        margin-top: -14px;
    }

    .submit-btn {
        padding: 20px 60px;
        margin: 0 auto;
        display: block;
        font-size: 25px;
    }

    /*Footer*/

    .footer {
        width: 102%;
        background-size: cover;
    }

    .footer-container {
        margin: 0 auto;
        display: grid;
        grid-template-columns: 310px 400px 220px;
        grid-template-rows: 150px 233px 96px;
        width: 940px;
        grid-column-gap: 10px;
        margin-top: 70px;
    }

    .logo-column {
        grid-column-start: 1;
        grid-column-end: 3;
    }

    .our-studio {
        grid-row-start: 2;
    }

    .stay-in-touch {
        grid-row-start: 2;   
    }

    .copiright {
        grid-row-start: 3;
        grid-column-start: 3;
    }

    .footer-logo {
        width: 36%;
    }

    .footer-content {
        display: none;
    }

    .links-row {
        display: none;
    }

    .footer-title {
        font-size: 17px;
    }

    .footer-address {
        font-size: 19px;
    }

    .footer-phone {
        font-size: 19px;
    }

    .footer-input {
        width: 288px;
    }

    .footer-input:focus {
        border: 2px solid var(--turqouze);
        color: white;
        width: 300px;
        height: 30px;
        font-size: 25px;
    }

    .send-btn {
        width: 85px;
    }
}

@media(max-width: 320px) {

    .hide-text {
        display: none;
    }

    .our-story-text {
        font-size: 31px;
        line-height: 36px;
        font-weight: 300;
    }

    .big-btn {
        width: 180px;
        height: 180px;
    }

    .watch-story {
        font-size: 19px;
    }

    .team-background {
        width: 102%;
    }

    .project-pictures-container {
        width: 102%;
    }

    .quoutes {
        width: 102%;
    }

    .footer {
        width: 102%;
    }

    .input {
        font-size: 25px;
    }

    .input:focus {
        font-size: 30px;
    }

    .name {
        font-size: 25px;
    }

    .header-content {
        font-size: 26px;
    }

    .module-text {
        font-size: 26px;
    }

    .module-title {
        font-size: 25px;
    }

    .testimonial-content {
        font-size: 28px;
    }

    .expertise {
        height: 990px;
    }

    .dropdown {
        position: absolute;
        display: inline-block;
        right: -35px;
        top: 35px;
    }

    .dropdown-menu {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        right: 20px;
        width: 220px;
        background: linear-gradient(90deg, rgb(97, 20, 97), transparent);
        transform: translateY(-590px);
        transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .menu-active {
        transform: translateY(0);
        transition: .6s transform cubic-bezier(0.075, 0.82, 0.165, 1);
    }

    .logo {
        width: 67%;
    }

    .nav-link-drop {
        color: white;
        margin: 20px 5px;
        font-size: 25px;
        font-weight: 600;
        margin-left: 50px;
    }

    .nav-link-drop:focus {
        color: var(--turqouze);
    }

    .navbar {
        grid-template-columns: repeat(2, 1fr);
    }

    .burger {
        border: none;
        background-color: transparent;
        width: 70px;
        height: 70px;
        background-image: url(img/425-4251166_menu-bar-icon-white-clipart.png);
        z-index: 3;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
        position: absolute;
        top: 0;
        right: 0;
    }

    .burger-focus {
        background-image: url(img/Mask\ Group.png);
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center;
    }

    .slide-container {
        padding-top: 153px;
    }

    .main-title {
        font-size: 60px;
    }

    .header-content {
        font-size: 23px;
    }


    .btn {
        padding: 30px 80px;
    }

    .swiper-pagination {
        top: 740px;
    }

    .nav-link {
        display: none;
    }
}