@media screen and (max-width: 600px) {
    header {
      padding: 0 !important;
    }
    header .right-header {
      padding: 0 !important;
    }
    .theme-btn {
      -webkit-tap-highlight-color: transparent !important;
      width: 50px;
      height: 50px;
    }
    .header-content {
      grid-template-columns: 1fr;
      padding-bottom: 6rem;
    }
    .left-header .h-shape {
      display: none;
    }
    .right-header {
      grid-row: 1;
      padding-right: 0rem !important;
      width: 90%;
      margin: 0 auto;
    }
    .right-header .name {
      font-size: 2.5rem !important;
      text-align: center;
      padding-top: 3rem;
    }
    .header-content .left-header .image {
      margin: 0 auto;
      width: 90%;
    }
    .about-container {
      grid-template-columns: 1fr;
    }
    .about-container .right-about {
      flex-direction: column;
      padding-top: 2.5rem;
    }
    .about-container .left-about {
      padding-right: 0;
    }
    .about-container .left-about p {
      padding-left: 0;
      text-align: center;
    }
    .contact-content-con {
      flex-direction: column;
    }
    .contact-content-con .right.contact {
      margin-left: 0;
      margin-top: 2.5rem;
    }
    .contact-content-con .right-contact .i-c-2 {
      flex-direction: column;
    }
    .contact-content-con .right-contact .i-c-2 :last-child {
      margin-left: 0;
      margin-top: 1.5rem;
    }
    .contact-content-con .right-contact {
      margin-bottom: 6rem;
    }
    .contact-item {
      flex-direction: column;
      margin: 1rem 0;
    }
    .contact-item p {
      font-size: 15px;
      color: var(--color-grey-2);
    }
    .contact-item span {
      font-size: 15px;
    }
    .contact-item .icon {
      grid-template-columns: 25px 1fr;
    }
    .timeline {
      grid-template-columns: 1fr;
      padding-bottom: 6rem;
    }
    .about-stats .progress-bars {
      grid-template-columns: 1fr;
    }
    .blogs {
      grid-template-columns: 1fr;
      padding-bottom: 6rem;
    }
    .blogs .blog img {
      max-width: 100%;
      height: auto;
    }
    .portfolios {
      grid-template-columns: 1fr;
      padding-bottom: 6rem;
    }
    .section {
      padding: 2rem 2.5rem !important;
    }
    .main-title h2 {
      font-size: 2rem;
    }
    .main-title h2 span {
      font-size: 2.5rem;
    }
    .main-title h2 .bg-text {
      font-size: 3rem;
    }
    .controlls {
      -webkit-tap-highlight-color: transparent;
      top: auto;
      bottom: 0;
      flex-direction: row;
      left: 50%;
      justify-content: center;
      transform: translateX(-50%);
      width: 100%;
      background-color: var(--color-grey-5);
      gap: 0.5rem;
    }
    .controlls .controls {
      margin: 1rem 0.3rem;
    }
  }
  @media screen and (max-width: 1432px) {
    .control-1 span,
    .control-2 span,
    .control-3 span,
    .control-4 span,
    .control-5 span,
    .control-6 span {
      display: none !important;
    }
    .controlls {
      -webkit-tap-highlight-color: transparent;
      gap: 1rem;
    }
    .hover-items {
      width: 100% !important;
      height: 100% !important;
      background-color: var(--color-secondary);
      position: absolute;
      left: 0;
      top: 0;
      border-radius: 15px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      opacity: 0;
      transform: scale(0);
      transition: all 0.4s ease-in-out;
    }
    #submit {
      font-size: 1rem;
    }
    .image {
      width: 100% !important;
      align-items: center !important;
    }
    .portfolios img {
      width: 100% !important;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    header {
      padding: 0 !important;
    }
    .section {
      padding: 7rem 11rem;
    }
    .contact-content-con {
      flex-direction: column;
    }
    .contact-content-con .right.contact {
      margin-left: 0;
      margin-top: 2.5rem;
    }
    .contact-content-con .right-contact .i-c-2 {
      flex-direction: column;
    }
    .contact-content-con .right-contact .i-c-2 :last-child {
      margin-left: 0;
      margin-top: 1.5rem;
    }
    .controlls .theme-btn {
      -webkit-tap-highlight-color: transparent !important;
    }
  }
  @media screen and (max-width: 1070px) {
    .about-container {
      grid-template-columns: 1fr;
    }
    .about-container .right-about {
      padding-top: 2.5rem;
    }
    .portfolios {
      grid-template-columns: 1fr;
    }
    .blogs {
      grid-template-columns: 1fr;
    }
    .main-title h2 {
      font-size: 4rem;
    }
    .main-title h2 span {
      font-size: 4rem;
    }
    .main-title h2 .bg-text {
      font-size: 4.5rem;
    }
  }
  @media screen and (max-width: 970px) {
    .section {
      padding: 7rem 6rem;
    }
    header {
      padding: 0 !important;
    }
    header .right-header {
      padding: 0 !important;
    }
    .theme-btn {
      width: 50px;
      height: 50px;
    }
    .header-content {
      grid-template-columns: 1fr;
      padding-bottom: 6rem;
    }
    .left-header .h-shape {
      display: none;
    }
    .right-header {
      grid-row: 1;
      padding-right: 0rem !important;
      width: 90%;
      margin: 0 auto;
    }
    .right-header .name {
      font-size: 2.5rem !important;
      text-align: center;
      padding-top: 3rem;
    }
    .header-content .left-header .image {
      margin: 0 auto;
      width: 90%;
    }
    .controlls {
      top: auto;
      bottom: 0;
      flex-direction: row;
      left: 50%;
      justify-content: center;
      transform: translateX(-50%);
      width: 100%;
      background-color: var(--color-grey-5);
      gap: 0.5rem;
    }
    .controlls .controls {
      margin: 0.6rem 1rem !important;
    }
  }
  @media screen and (max-width: 700px) {
    .section {
      padding: 7rem 3rem;
    }
    .about-stats .progress-bars {
      grid-template-columns: repeat(1, 1fr);
    }
    .about-container .right-about {
      grid-template-columns: repeat(2, 1fr);
    }
    .timeline {
      grid-template-columns: repeat(1, 1fr);
    }
    .main-title h2 {
      font-size: 1.5rem;
    }
    .main-title h2 span {
      font-size: 1.5rem;
    }
    .main-title h2 .bg-text {
      font-size: 3rem;
    }
  }
  @media screen and (max-width: 1400px) {
    body {
      overflow-y: auto;
    }
    .flex {
      flex-direction: column;
    }
    .containerLeft {
      width: 100%;
    }
    .containerRight {
      width: 90%;
      margin: 0 auto;
      gap: 15px;
    }
    .containerLeft h1,
    .box {
      top: 0%;
    }
    .containerCode .error {
      width: 350px;
    }
    .containerCode .success {
      width: 350px;
    }
    .containerCode #msg-error {
      right: 4%;
    }
    .containerCode #msg-success {
      right: 4%;
    }
  }
  @media screen and (max-width: 1050px) {
    .boxCode h1 {
      font-size: 240%;
    }
    .boxCode input[type=submit] {
      font-size: 110%;
    }
    .boxCode input[type=number] {
      width: 14px;
      margin-left: 1px;
      margin-right: 1px;
    }
  }
  @media screen and (max-width: 1000px) {
    .containerLeft h1 {
      top: 0%;
      font-size: 150%;
      padding: 30px;
    }
    .box h2 {
      font-size: 120%;
    }
    .box p {
      font-size: 90%;
    }
  }
  @media screen and (max-width: 800px) {
    .box .ficon,
    .box h2,
    .box p {
      padding: 15px;
    }
    .boxCode {
      width: 90%;
      height: 60%;
      text-align: center;
    }
    .boxCode #codeForm .code h1 {
      position: relative;
      top: 0;
      margin-top: 0;
      margin-bottom: 20px;
    }
    .containerCode .error {
      width: 300px;
    }
    .containerCode .success {
      width: 300px;
    }
    .containerCode #msg-error {
      right: 5%;
    }
    .containerCode #msg-success {
      right: 5%;
    }
  }
  @media screen and (max-width: 720px) {
    .containerRight {
      width: 80%;
      display: flex;
      flex-direction: column;
    }
    .containerLeft h1 {
      font-size: 120%;
      padding: 15px;
    }
    .box .ficon,
    .box h2,
    .box p {
      padding: 10px;
    }
  }
  @media screen and (max-width: 600px) {
    .containerLeft h1 {
      font-size: 120%;
    }
    .box h2 {
      font-size: 100%;
    }
    .box p {
      font-size: 80%;
    }
    .box .ficon,
    .box .boxCode h1 {
      font-size: 220%;
    }
  }
  @media screen and (max-width: 520px) {
    .containerLeft h1 {
      font-size: 100%;
    }
    .box h2 {
      font-size: 90%;
    }
    .box p {
      font-size: 65%;
    }
    .box .ficon {
      font-size: 200%;
    }
    .boxCode h1 {
      font-size: 180%;
    }
    .boxCode input[type=number] {
      padding: 6px;
    }
  }
  #codeForm span {
    color: var(--color-secondary);
    cursor: pointer;
  }