/*
Theme Name: Romarto
Description: A custom theme designed by me.
Version: 1.1
*/

html{
  scroll-behavior: smooth;
  overflow-x: hidden;
}

 
  .font-light {
    font-family: "Nw";
  }
  
  .fz24 {
    font-size: 24px;
  }
  
 .panel {
    margin: 0 auto;
    padding-bottom: 100px;
  }
 
  .first-screen {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: calc(100vh - 52px);
  }
  
  /* .first-screen:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    opacity: 0.09;
    z-index: -2;
  } */
  
  .firstscreen-content-wrap {
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    flex-wrap: wrap;
  }
  
   
  .headerpic {
    margin-bottom: 17vh;
  }
  
  .headerpic img {
    width: 100%;
    max-width: 300px;
    border-radius: 50%;
  }
  
  .slogan {
    line-height: 1.1;
    text-align: center;
  }

  .slogan,
  .slogan-gradient {
    font-size: 64px;
  }
  
  .slogan-gradient {
    position: relative;
    display: inline-block;
    margin-top: 12px;
    line-height: 1.075;
    padding-bottom: 10px;
    background: linear-gradient(
      90deg,
      #ffb300 3%,
      #ff3100 30%,
      #db009d 50%,
      #ff3100 70%,
      #ffb300 97%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: slogan-gradient-move 3s infinite ease both;
    background-size: 200% 100%;
   }

  .border{
    position: absolute;
    border-bottom: 1px #999 solid;
  }

  .border-bl,.border-br, .border-c{
    position: relative;
    position: absolute;
      width: 12px;
      height: 12px;
      border: 1px #fff solid;
      bottom: -21px;
    }

    .border-bl:before,.border-c:before,.border-br:before{  
      position: absolute;
      content:'';
      top: -14px;
      left: 0;
      width: 8px;
      height: 8px;
      border-radius: 16px;
      border: 1px solid #bbb;
      background-color: white;
      z-index: 0;
    } 

  .border-bl:after,.border-c:after,.border-br:after{  
    position: absolute;
    content:'';
    top: -2px;
    left: -2px;
    width: 14px;
    height: 14px;
    background-color: #bbb;
    z-index: -1;
  }

  .border{
    bottom: 1.35vh;
    width: 100%;
    height: 100%;
  }

  .border:before{
    content: "";
    position: absolute;
    width: 27px;
    height: 27px;
    top: -4px;
    right: -3.5%;
    background: url("img/bucket.svg") no-repeat;
  }
  
  .border-bl{    
    left: -3px;
    background-color:   rgb(255, 174, 0);
  }

  .border-c{    
    left: 50%;
    background-color: rgb(247, 0, 0);
  }
  
  .border-br{    
    right: -3px;
    background-color: rgb(255, 0, 208);
  }
  
  @keyframes slogan-gradient-move {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    100% {
      background-position: 0% 0%;
    }
  }
  
  h2 {
    margin-top: 28px;
    font-size: 24px;
    line-height: 1.3;
    font-family: "Poppins Regular";
  }
  
  .cta-wrap {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    margin-top: 32px;
  }
    
  .service {
    width: 29%;
    margin: 16px;
  }
 
 .cta-button{
  margin-top: 0;
  padding: 18px 32px;
 }

  .btn-transp {
    font-size: 24px;
    color: black;
    padding: 16px 28px;
    line-height: 1.2;
    border: 1px dashed #00000045;
    border-radius: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .btn-transp:hover {
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 0 14px #dedede;
  }

  .btn-projects{
    margin-left: 20px;
    height: 100%; 
  }
  
  .projects-wrap {
    background-color: #fff;
    background: linear-gradient(
      0deg,
      #fff 88%,
      #f3f8ff 100%
    );
  }
  
  #projects .title span {
    display: block;
  }
  
  .project-types-controls {
    margin: 12px 0;
  }
  
  .project-types-controls a {
    font-size: 4.5vw;
    color: #000;
    padding: 4px 18px;
    border-radius: 32px;
  }
  
  a.btn-active {
    background-color: #fff;
    box-shadow: 6px 6px 9px 0px #d8dfe9;
    padding: 6px 18px;
  }
  
  .btn-passive {
    border: 1px solid #9baac2;
  }
  
  .projects {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    margin-top: 100px;
  }
  
  .project {
    display: flex;
    width: 100%;
    height: auto;
    margin-bottom: 210px;
  }
  
  .project:last-child {
    margin-bottom: 50px;
  }
  
  .project-title {
    font-size: 32px;
    line-height: 1.25;
  }
  
  .project-tech {
    margin-top: 16px;
  }
  
  .project-desc {
    width: 33%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    font-size: 28px;
  }
  
  .tech-name {
    display: inline-block;
    font-family: "Poppins Regular";
    font-size: 16px;
    border-radius: 100px;
    background-color: #f2f2f2;
    padding: 8px 16px;
    margin: 0px 1px 8px 0;
  }
  
  .project-text {
    margin-top: 8px;
    font-family: "Poppins Regular";
    font-size: 16px;
    line-height: 1.5;
    list-style-type: circle;
  }
  
  .btn-project-more {
    display: inline-block;
    align-self: flex-start;
    margin-top: 20px;
    padding: 10px 34px 10px 20px;
    font-size: 18px;
    color: white;
    background-color: black;
    border-radius: 50px;
    background: url("img/arrow.svg") 104% center / 36% 36% no-repeat #000;
  }
    
  .btn-project-more:hover {
    transition: all 0.1s linear;
    padding: 10px 37px 10px 20px;
  }
  
  .project-image {
    justify-content: right;
    align-items: center;
    position: relative;
    overflow: visible;
    margin-left: 16%;
  }

  .project-image img{
    max-width: 480px;
    height: auto;
    margin-top: -15%;
    position: relative;
    z-index: 1;
   }   

  .gradient-move:before,
  .gradient-move:after{
    content: '';
    position: absolute;
    width: 120%;
    height: 142%;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    opacity: 0.6;
    z-index: 0;
    //border: 1px solid grey;
  }
    .gradient-move:before{
    background: radial-gradient(circle at 66% 42%, #00f8c6, transparent 42%);
    animation: FirstGradMove 6s linear infinite; 
  }
  .gradient-move:after{
    background: radial-gradient(circle at 34% 59%, #097cff, transparent 42%); 
    animation: SecondGradMove 8s linear infinite;
  }

  .red-gradient:before{
    opacity: 0.28;
    background: radial-gradient(circle at 66% 42%, #FF540B, transparent 42%);
  }
  .red-gradient:after{
    opacity: 0.28;
    background: radial-gradient(circle at 34% 59%, #7900ea, transparent 42%);
  }

  .yellow-gradient:before{
    opacity: 0.45;
    background: radial-gradient(circle at 66% 42%, #64ff1a, transparent 42%);
  }
  .yellow-gradient:after{
    opacity: 0.6;
    background: radial-gradient(circle at 34% 59%, #f9cc00, transparent 42%);
  }


  @keyframes FirstGradMove {
    0%{
      transform:translate(-50%,-50%);
    }
    25%{
      transform:translate(-82%,-50%);
    }
    50%{
      transform:translate(-82%,-28%);
    }
    75%{
      transform:translate(-50%,-28%);
    }
     100%{
      transform:translate(-50%,-50%);
    }   
  }

  @keyframes SecondGradMove {

    0%{
      transform:translate(-50%,-50%);
    }
    25%{
      transform:translate(-50%,-60%);
    }
    50%{
      transform:translate(-20%,-60%);
    } 
     75%{
      transform:translate(-20%,-50%);
    }
     100%{
      transform:translate(-50%,-50%);
    }   
 }
  .proj-image{
    position: relative;
    width: 64%;

  }

  .proj-image:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 170%;
    top: -38%;
    left: 0%;
    background: radial-gradient(circle at 62% 44%, #00f8c6, transparent 44%),
                radial-gradient(circle at 41% 52%, #006EEA, transparent 44%);
    opacity: 0.6;
    z-index: 0;
  }

  .proj-image:after{
    content: '';
    position: absolute;
    width: 100%;
    height: 150%;
    top: -27%;
    background: url("img/p-01.svg") 80% top / 34% 34% no-repeat; 
   }
  
  .phone {
    min-width: 179px;
    min-height: 316px;
    margin-left: -120px;
    margin-top: 156px;
    background: url("img/phone.svg") 0% 0%/ 100% 100%;
  }
  
  .phone-image {
    width: 127px;
    height: 265px;
    margin: 26px 0 0 26px;
  }
  
  .phone-image img {
    border-radius: 14px;
  }
  
  .panel-services {
    display: flex;
    flex-direction: column;
    font-size: 76px;
    line-height: 0.62;
    background-color: #fff;
  }
  
  .services {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
  }
  
  .service {
    display: flex;
    justify-content: center;
    width: 100%;
    line-height: 1.35;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0px 0px 25px hsl(208deg 100% 92%);
    font-size: 28px;
    padding: 292px 20px 4% 20px;
    margin-bottom: 24px;
  }
  
  #service-1 {
    background: url("img/service-1-icon.png") center 30px / 360px 262px
      no-repeat;
  }
  
  #service-2 {
    background: url("img/service-2-icon.png") center 30px / 360px 262px
      no-repeat;
  }
  
  #service-3 {
    background: url("img/service-5-icon.png") center 30px / 360px 263px
      no-repeat;
  }
  
  .service span {
    text-align: center;
  }
  
  .title-services {
    display: block;
  }

  .side-projects{
    display: flex;
    justify-content: space-evenly;
    align-items: baseline;
  }

  .side-project{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30%;
  }

  .side-project img{
    max-width: 90%;
  }

  .side-project span{
    display: block;
    text-align: center;
    margin-top: 16px;
    font-size: 28px;
  }

  
  .panel-skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 76px;
    line-height: 0.62;
    //background-color: #f3f8ff;
    background: linear-gradient(90deg, #f3f8ff, #faf5ff);
  }
  
  .skill {
    width: 22%;
    min-height: 300px;
    padding: 200px 24px 42px 24px;
    margin: 14px;
    background-color: rgba(255, 255, 255, 0.45);
    border: 2px solid white;
    background-repeat: no-repeat;
    background-size: 128px 128px;
    background-position: center 44px;
    border-radius: 24px;
    //box-shadow: 20px 17px 20px #dfe6f0;
    box-shadow: 20px 17px 35px #e5e0f0;
    display: flex;
  }
  
  .skills {
    border-radius: 16px 16px 0 0;
    color: black;
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
  }
  
  #skills-fi {
    background-image: url(img/figma-logo.svg);
  }
  
  #skills-ap {
    background-image: url(img/ap-logo.svg);
  }
  
  #skills-ai {
    background-image: url(img/ai-logo.svg);
  }
  
  #skills-ae {
    background-image: url(img/ae-logo.svg);
  }
  
  #skills-html {
    background-image: url(img/html-logo.svg);
  }
  
  #skills-css {
    background-image: url(img/css-logo.svg);
  }
  
  #skills-js {
    background-image: url(img/js-logo.svg);
  }
  
  #skills-wp {
    background-image: url(img/wp-logo.svg);
  }
  
  .panel-why {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #f3f8ff;
  }
  
  .list-bold {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 12px;
  }
  
  .section-content-text {
    margin: 0 auto;
    font-size: 28px;
    text-align: center;
    line-height: 1.1;
  }
  
  .why-wrap {
    display: flex;
    flex-grow: 1;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
  }
  
  .why {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin-bottom: 24px;
    line-height: 1.35;
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 0px 0px 35px #dfe6f0;
    font-size: 32px;
    padding: 72px 20px;
  }
 
  .why span:not(.list-bold) {
    line-height: 1.2;
  }
  
  .testimonials {
    display: flex;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: linear-gradient(
      180deg,
      #f3f8ff 0%,
      #fff 30%
    );
  }
  
  .testimonials-wrap {
    position: relative;
    max-width: 840px;
    height: 280px;
  }

  .swiper-cube .swiper-cube-shadow:before {
    background: #bfd2e9 !important;
  }    

  .swiper-container .swiper-pagination{
    position: relative;
  }
  
  .swiper-button-next, .swiper-button-prev {
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
  }
   
  .swiper-wrapper{
    margin-bottom: 48px;
    display: flex;
    align-items: center;
  }
  
  .swiper-wrapper .client{
    position: relative;
    padding: 24px 36px;
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0px 0px 25px #dfe6f0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

 .client:before {
  content: '';
  position: absolute;
  bottom: -24px; /* Adjusts the position of the tail */
  left: 20%; /* Position the tail */
  width: 0;
  height: 0;
  border-left: 24px solid transparent;
  border-right: 0px solid transparent;
  border-top: 25px solid white; /* Same color as the bubble background */
  filter: drop-shadow(5px 5px 10px #dfe6f0);
  }

  .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: #333;
  }

  .swiper-slide-shadow-left {
    background: linear-gradient(to left, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)) !important; 
  }

  .swiper-slide-shadow-right {
    background: linear-gradient(to left, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)) !important; 
  }

  .swiper-container .swiper-button-prev,
  .swiper-container .swiper-button-next{
    position: absolute;
    background-color: #e0e8f2;
    height: 48px;
    width: 48px;
    color: #ffffff;
  }

  .swiper-container .swiper-button-prev{
    left: -12.75%;
  }

  .swiper-container .swiper-button-next{
    right: -12.75%;
  }

  .swiper-container .swiper-button-prev:after,
  .swiper-container .swiper-button-next:after{
    font-size: 24px;
  }

  .swiper-container  .swiper-pagination-bullet{
    background-color: #5c8dd1;
  }

  .swiper-container .swiper-pagination-bullet-active{
    background-color: #6996d5;
  }

  .client img{
    max-width: 128px;
    height: auto;
    object-fit: contain;
  }

  .client-name-text{
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 24px;
  }
   
  .client-name {
    line-height: 1.3;
    font-size: 20px;
    font-family: "Nw";
    background-color: rgba(255, 255, 255, 0.35);
  }
  
  .client-text {
    font-family: "Poppins Regular";
    font-size: 15px;
    line-height: 1.5;
    margin-top: 10px;
  }

  .clients-logos{
    margin-top: 64px; 
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

  .clients-logos img{
    height: 100%;
    max-width: 128px;
    max-height: 90px;
    margin: 20px 50px;
  }

  .clients-logos img:nth-child(7),
  .clients-logos img:nth-child(18){
    margin-left: 9%;
  }

  .clients-logos img:nth-child(11),
  .clients-logos img:nth-child(22){
    margin-right: 8%;
  }

  .hobbies-section{
    position: relative;
     background: linear-gradient(
      to bottom,
      #f3f8ff 0%,
      #fff 16%,
      #fff 90%
    ); 
    padding-bottom: 120px;
  }

  .hobbies-section:before{
    position: absolute;
    content: '';
    bottom: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(90deg, #25A900 0%, #FF0000 25%, #F68500 50%, #271690 75%, #33ABF4 100%);
    opacity: 0.075;
 }

 .hobbies-section:after{
  position: absolute;
  content: '';
  bottom: 0;
  width: 100%;
  height: 30px;
  background: linear-gradient(to bottom, #fff 0%, #ffffff25 100%);
 }

  .hobbies{
    display: flex;
    justify-content: center;
    position: relative;
  }

  .hobbies:before{
    content: "";
    position: absolute;
    top: 10%;
    width: 100%;
    height: 88%;
    background: linear-gradient(90deg, #25A900 0%, #FF0000 45%, #0077ff 60%, #F68500 100%);
    will-change: filter;
    filter: blur(50px);
    opacity: 38%;
    z-index: 0;
  }

  .hobby{
    position: relative;
    display: inline-block;
    width: 22%;
    margin: 12px;
    border-radius: 20px;
    border: 1px solid white;
    background-color: #ffffff77;
    padding: 8px 8px 16px 8px;
  }

  .hobby span{
    width: 100%;
    display: block;
    text-align: center;
    font-size: 22px;
    margin-top: 14px;
  }

  .hobby img,
  .video{
    width: 100%;
    border-radius: 12px;
  }

  .video-container {
    position: relative;
    width: 100%; /* Full width of the container */
    padding-bottom: 73.25%; /* This gives a 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 15px; /* Rounded corners */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 15px; /* Rounded corners for the iframe */
}
  
  #particles-wrapper {
    transform: scale(0);
    opacity: 17%;
    position: absolute;
    top: -20vh;
    left: -10vw;
    width: 116%;
    height: 115%;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    z-index: -1;
  }
  
  #particles-wrapper img {
    height: 4.75vw;
    width: 4.75vw;
    margin: 2.75vw 3.25vw;
  }
  
  #particles-wrapper img[data-value="2"] {
    filter: blur(4px);
    opacity: 85%;
    z-index: -2;
    height: 4.5vw;
    width: 4.5vw;
  }
  
  #particles-wrapper img[data-value="1"] {
    filter: blur(6px);
    opacity: 75%;
    z-index: -3;
    height: 4.25vw;
    width: 4.25vw;
  }
  
  .slogan-button-wrap {
    margin-left: 64px;
  }
  
  .slogan {
    text-align: left;
    font-size: 62px;
  }
  
  .project {
    flex-direction: row;
    justify-content: center;
  }
  
   .project-types-controls a {
    font-size: 24px;
  }
  
  .service {
    width: 30%;
    margin: 24px;
  }
  
  .why {
    width: 29%;
    margin: 20px;
  }
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 1680px) {
    .service {
      width: 28%;
      padding: 256px 20px 8% 20px;
    }
  }
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 1560px) {
    .why {
      margin: 20px;
    }
  }
  /*---------------------------------------------------*/
  @media screen and (max-width: 1440px) {
    #particles-wrapper {
      top: -17vh;
    }
  
      #particles-wrapper img {
      margin: 4.75vh 3.30vw;
    }
  }

    /*---------------------------------------------------*/
    @media screen and (max-width: 1360px) {

  .hobby span{
    font-size: 20px;
  }

    /*---------------------------------------------------*/
    @media screen and (max-width: 1240px) {
      .slogan,
      .slogan-gradient{
        font-size: 5vw;
      }
      .cta-button{
        font-size: 24px;
      }

      .testimonials-wrap {
        max-width: 80%;
      }

      .swiper-container .swiper-button-prev{
        left: -10%;
      }
    
      .swiper-container .swiper-button-next{
        right: -10%;
      }
    

    }
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 1023px) {
  
    .service,
    .castomer,
    .why {
      width: 100%;
    }

    .headerpic{
      margin-bottom: 0;
    }
  
    .slogan-button-wrap {
      margin-left: 0;
    }
  
    .slogan-button-wrap * {
      text-align: center;
    }

    .slogan,
      .slogan-gradient{
        font-size: 9vw;
      }
  
    .project {
      flex-direction: column;
      margin-bottom: 90px;
    }
  
    .project-desc {
      order: 2;
      width: 100%;
      text-align: center;
      margin-top: 80px;
    }
    .project-image {
      width: 100%;
      margin-left: 0;
    }
    .btn-project-more {
      margin: 12px auto;
    }
  
    .skill {
      width: 46%;
    } 
  }
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 727px) {
    .project-image {
      height: 45vw;
      border-radius: 14px;
    }
    .laptop {
      min-width: 0;
      width: 100%;
      position: relative;
    }
    .laptop-image {
      width: 81%;
      max-width: none;
      position: absolute;
      margin: 0;
      top: 49%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  
    .laptop-image img {
      width: 100%;
    }
  
    .phone {
      position: relative;
      width: 25%;
      min-width: 0;
      min-height: 0;
      margin: 0;
      margin-bottom: -37vw;
      margin-left: -15vw;
    }
  
    .phone-image {
      position: absolute;
      width: 70%;
      height: auto;
      margin: 0;
      top: 50.5%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .phone-image img {
      width: 100%;
    }
    .side-project span {
      font-size: 20px;
    }   

    .hobbies{
      flex-wrap: wrap;
    }
    .hobby{
      width: 48%;
      margin: 8px 0px;
    }
    .hobby:nth-child(odd){
      margin-right: 12px;
    }
  }  
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 640px) {
  
    .firstscreen-content-wrap {
      flex-direction: column;
    }

    .btn-projects{
      margin-top: 24px;
    }
  
  }
  
  /*---------------------------------------------------*/
  @media screen and (max-width: 440px) {

    .panel {
      padding-bottom: 70px;
    }
  
    .first-screen {
      min-height: 90vh;
    }
  
    .title {
      padding: 60px 10px;
    }

      
  #particles-wrapper {
    top: 0;
    left: 0;
  }
  
    #particles-wrapper img {
      height: 42px;
      width: 42px;
      margin: 18px 20px;
    }
  
    #particles-wrapper img[data-value="2"] {
      height: 36px;
      width: 36px;
      filter: blur(1px);
    }
  
    #particles-wrapper img[data-value="1"] {
      height: 30px;
      width: 30px;
      filter: blur(2px);
    }
  
    .headerpic {
      margin-bottom: 30px;
      text-align: center;
    }
  
    .headerpic img {
      width: 50%;
    }
  
    .slogan {
      font-size: 11vw;
    }

    .border{
      height:102%;
    }

    .border:before{
      top: -15px;
      right: -6%;
    }

    .cta-wrap{
      width: 100%;
      justify-content: center;
      margin: 24px auto 0 auto;
    }
  
    .cta-wrap a {
      width: auto;
      font-size: 24px;
      margin-right: 0;
    }

    .cta-button{
      padding: 16px 38px; 
    }

    .cta-button:before{
      box-shadow: 6px 8px 24px rgba(0, 0, 0, 0.35);
    }

    .btn-projects {
      margin-left: 0;
      padding: 11px 28px;
    }

    .projects{
      margin-top: 50px;
    }

    .project:last-child {
      margin-bottom: 0px;
    }

    .project-image {
      height: 50vw;
    }
  
    .laptop {
      margin-bottom: -32px;
    }

    .gradient-move:before,
    .gradient-move:after{
      width: 120%;
      height: 172%;
    }
  
    .project-image {
      max-width:92vw;
      //margin-left: 0;
    }
    .project-image img{
      width: 100%;
    }
  
    .skill {
      min-height: 0;
      padding: 100px 14px 25px 14px;
      margin: 8px 0;
      background-color: #fff;
      background-repeat: no-repeat;
      background-size: 64px 64px;
      background-position: center 24px;
      border-radius: 24px;
      box-shadow: 20px 17px 20px #dfe6f0;
      display: flex;
    }

    .skill:nth-child(odd){
      margin-right: 14px;
    }
  
    .section-content-text {
      font-size: 20px;
    }
  
    .why {
      width: 100%;
      margin: 12px 6px;
      padding: 50px 20px;
    }

    .testimonials-wrap {
      height: 450px;
    }
    .swiper-slide{
      flex-direction: column;
    }

    .client img {
      margin-bottom: 16px;
    }
    .client-name-text{
      margin: 0;
    }
    .client-text{
      font-size: 14px;
    }
    .swiper-wrapper .client {
      padding: 24px 12px;
    }

    .swiper-container .swiper-button-prev,
    .swiper-container .swiper-button-next{
      position: absolute;
      background-color: #e0e8f2;
      height: 24px;
      width: 24px;
      color: #fffff;      
    }
    .swiper-container .swiper-button-prev:after,
    .swiper-container .swiper-button-next:after{
      font-size: 14px;
    } 
    .clients-logos{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      flex-grow: 0;
      flex-shrink: 0;
      margin-top: 82px;
    } 
    .clients-logos img {
      width: 21%;
      height: auto;
      object-fit: contain; 
      margin: 5px 0;      
   } 

   .clients-logos img:nth-child(7),
   .clients-logos img:nth-child(18){
     margin-left: 0%;
   }
 
   .clients-logos img:nth-child(11),
   .clients-logos img:nth-child(22){
     margin-right: 0%;
   }
 


   .side-projects{
    flex-direction: column;
    align-items: center;
   }

   .side-project{
    width: 90%;
   }
   .side-project:not(:last-child){
    margin-bottom: 32px;
   }

   .hobbies:before {
    top: 4%;
    height: 86%;
   }

   .hobby  {
    padding-bottom: 8px;
   }

   .hobby span {
    margin-top: 6px;
   }
 
  }