/*==================================
===  Media qureirs
==================================*/
@media (max-width: 1200px) {
  .header-desc {
    padding: 0 7rem 0 0rem;
  }
}

@media (max-width: 991px) {
  .navbar-items ul li .nav-link {
    padding: 0.625rem 0.2rem;
  }
  .services-items,
  .portfolio-items {
    grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr));
  }
  .settings {
    width: 70%;
  }
  .header-desc {
    padding: 0 5rem 0 0rem;
  }
  .header-title {
    font-size: 2.8rem;
  }
  .skills .skills-item {
    flex: 1 1 calc(100% / 4 - 20px);
    max-width: calc(100% / 4 - 20px);
  }
}

@media (max-width: 767px) {
  .header-img {
    margin-top: 50px;
  }
  .links {
    margin-top: 2.5rem;
    align-items: flex-start;
    flex-direction: column;
    gap: 3.125rem;
  }
  .header-text {
    padding: 0 0.9375rem;
  }
  .header-title {
    font-size: 2.625rem;
  }
  .navbar-items ul li .nav-link {
    padding: 0.625rem 0.925rem;
  }

  .navbar-items .navbar-links {
    display: flex;
    position: absolute;
    right: 0;
    flex-direction: column;
    top: 88px;
    padding: 30px;
    width: 100%;
    text-align: center;
    background: var(--bg-light);
    z-index: 999;
    gap: 30px;
    visibility: hidden;
    opacity: 0;
    transform: scale3d(1, 0, 1);
    transition: 0.3s;
    transform-origin: top;
    box-shadow: var(--shadow) var(--shadow-color);
  }

  .navbar-items .navbar-links.dropdown {
    visibility: visible;
    opacity: 1;
    transform: scale3d(1, 1, 1);
    transition: 0.3s;
  }

  .header-btns .toggle {
    display: block;
  }
  .settings {
    width: 80%;
    top: 60%;
  }
  .experience-item {
    padding: 25px 25px 30px;
    flex: 1 1 calc(100% / 1 - 40px);
    max-width: calc(100% / 1 - 40px);
  }
  .experience-item.end:not(:last-child):before {
    height: 130%;
  }
  .form {
    margin-top: 40px;
  }
  .skills .skills-item {
    flex: 1 1 calc(100% / 3 - 20px);
    max-width: calc(100% / 3 - 20px);
  }
}

@media (max-width: 575px) {
  .header-title {
    font-size: 2.1875rem;
  }
  .header-title .name {
    display: inline;
    color: var(--black);
  }
  .header-desc {
    margin-top: 1.25rem;
    padding: 0 1.25rem 0 0rem;
    line-height: 1.6;
  }
  .links {
    gap: 1.875rem;
  }
  .services-items,
  .experience-items,
  .portfolio-items {
    padding: 0.625rem;
  }
  .section-padding {
    padding: 3.125rem 0;
  }
  .services-items,
  .portfolio-items {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .settings-background .choose-bg {
    grid-auto-flow: row;
  }
  .settings-title {
    font-size: 1.2rem;
  }
  .experience-item {
    padding: 25px 25px 30px;
    flex: 1 1 calc(100% / 1 - 40px);
    margin-left: 0px;
  }
  .contact-details-info {
    font-size: 0.925rem;
    overflow-wrap: break-word;
  }
  .skills .skills-item {
    flex: 1 1 calc(100% / 2 - 20px);
    max-width: calc(100% / 2 - 20px);
  }
  .skills .skills-items {
    justify-content: center;
    align-items: center;
  }
}

@media (max-width: 300px) {
  .navbar-logo {
    font-size: 3.2rem;
  }
  .header-title {
    font-size: 1.375rem;
  }
  .header-btns .btn-hire {
    display: none;
  }
  .btn-hire {
    padding: 0.625rem 0.9375rem;
    text-align: center;
    line-height: 1.6;
    font-size: 0.875rem;
  }
  .about-text {
    padding: 1.875rem 0.75rem;
  }
  .about-title {
    font-size: 1.5625rem;
  }
  .social li {
    flex: 1 1 calc(100% / 2 - 0.625rem);
  }
  .services-item {
    padding: 0.75rem;
  }
  .navbar.scroll {
    padding: 0;
  }
  .portfolio-item-title {
    font-size: 1rem;
  }
  .portfolio-details {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }
  .section-second-title {
    font-size: 1.2rem;
  }
  .experience-item::before,
  .experience-item::after {
    display: none;
  }
  .experience-item {
    max-width: 100%;
  }
  .settings {
    top: 70%;
  }
  .contact-details-info {
    font-size: 0.825rem;
  }
  .form {
    padding: 1rem;
  }
  input,
  textarea {
    padding: 0.5rem;
  }
  .other-skills {
    padding: 4px;
  }
  .other-skills span {
    padding: 8px;
    font-size: 0.825rem;
  }
  .skills .skills-item {
    flex: 1 1 calc(100% / 1 - 20px);
    max-width: calc(100% / 1 - 20px);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-color: hsl(229, 75%, 60%);
    --bg-color: #212429;
    --bg-light: #343536;
    --dark-white: #9da1ac;
    --bg-dark: rgba(38, 38, 38, 0.451);
    --white: #28282f;
    --light-mode: #222228;
    --black: #fff;
    --shadow: 0rem 0rem 0.625rem 0rem;
    --second-color: #f6083a;
    --main-transition: 0.5s cubic-bezier(0.5, 1.6, 0.4, 0.7);
    --shadow-color: #00000026;
  }
}