@media screen and (max-width: 1024px) {
    .nav-links {
      width: 78%;
    }
  
    @media screen and (min-width: 320px) and (max-width: 600px) {
      .navbar .wrapper{
        padding-top: 15px;
        padding-bottom: 15px;
      }
      .logo img {
        width: 170px;
    }
      .navbar-service {
        position: fixed;
        width: 100% !important;
        top: 0px;
      }
      .navbar-service .wrapper {
        padding-top: 15px;
      }
    }
    @media screen and (min-width: 601px) and (max-width: 1100px) {
      h1 {
        font-size: 40px !important;
        font-weight: 100px;
      }
      .navbar {
        display: flex;
        z-index: 2;
      }

    }
    @media screen and (min-width: 901px) and (max-width: 1280px) {
      h1 {
        font-size: 55px !important;
        font-weight: 100px;
      }
      .left-social ul {
        display: none;
      }
      .navbar {
        display: flex;
      }
    }

    @media screen and (min-width: 1451px) and (max-width: 10000px) {
      .card-wrapper-parent i:first-child {
        left: 90%;
        border-radius: 10px 0px 0px 10px;
      }
      .card-wrapper-parent i:last-child {
        right: 0px;
        border-radius: 0px 10px 10px 0px;
      }
    }
  
  
  @media screen and (min-width: 1450px) and (max-width: 1565px) {
    .card-wrapper-parent #left {
      left: 88%;
    }
  }
  @media screen and (min-width: 1566px) and (max-width: 10000px) {
    .card-wrapper-parent #left {
      left: 89%;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 1024px) {
   body {
        overflow-x: hidden;
      }
      .nav-links {
        position: fixed;
        right: 0px;
        height: 100vh;
        top: 0;
        background-color: white;
        flex-direction: column;
        align-items: center;
        width: 100%;
        transform: translateX(100%);
        transition: all 400ms ease-in-out;
        padding-top: 100px;
        display: none;
        padding-left: 20px;
        margin-top: 0px;
        z-index: 999;
      }
  
      .nav-links li {
  
        opacity: 0;
        width: 90%;
      }
      .burger {
        color: #000000;
        display: block;
        cursor: pointer;
        z-index: 9999;
      }
      .nav-links a {
        color: #000000;
        font-weight: 400;
        font-size: 1.25rem;
      }
    } /*  Media Query 768 End  */
  
    .nav-activ {
      transform: translateX(0);
      display: block;
    }
  
    @keyframes navLinkFade {
      from {
        opacity: 0;
        transform: translateX(50px);
      }
      to {
        opacity: 1;
        transform: translateX(0px);
      }
    }
  
    .toggle .line1 {
      background-color: #000000;
      transform: rotate(-45deg) translate(-5px, 5px);
      position: relative;
      z-index: 9999;
    }
  
    .toggle .line3 {
      background-color: #000000;
      transform: rotate(45deg) translate(-1px, -2px);
      position: relative;
      z-index: 9999;
    }
    .responsive-header-dropdown{
      display: block;
    }
    #border-bottom{
      border-bottom: 1px solid #000;
      padding: 20px 0px 20px 0px;
      display: flex;
      align-items: end;
    }
      #border-bottom a{
        display: flex;
        align-items: center;
        gap: 5px;
      }
    #navlink-home{
      border-bottom: 1px solid #000;
    }
    #responsive-header-dropdown-links{
      padding: 10px 10px 20px 10px;
    }

  }
  @media screen and (max-width: 760px) {
    .nav-links a{
        font-size: 16px !important;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 700px) {

    .logo img {
      width: 170px;
  }
    .navbar-service .wrapper {
      padding-top: 15px;
    }
    .services-card-row{
      grid-template-columns: repeat(1, 1fr);
    }
    .pricing-row-1, .pricing-row-2{
      grid-template-columns: repeat(1, 1fr);
    }
    .bottom-card-row{
      display: block;
      padding: 30px;
    }
    .banner-row{
      display: flex;
      flex-direction: column-reverse;
      padding-top: 20px;
    }
    .footer-row{
      grid-template-columns: repeat(1, 1fr);
    }
    .banner-btn-parent{
      display: block;
    }
    .third-row{
      grid-template-columns: repeat(1, 1fr);
    }
    .sign-up-btn{
      display: none;
    }
    .burger div{
      background-color: #000000;
    }
    .navbar-right-main{
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .banner-column-left h1{
      font-size: 35px !important;
    }
    .btn-1{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-1 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .btn-2{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-2 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .heading-1 h2{
      width: 100%;
      text-align: left;
      font-size: 35px !important;
      line-height: 40px;
    }
    .home-banner-section .wrapper{
      padding-bottom: 50px;
    }
    .services-card-column{
      border-left: 1px solid #D3D3D3;
    }
    .third-column h2{
      font-size: 35px !important;
      line-height: 40px;
      padding-top: 50px;
    }
    #user-profile-desktop{
      width: 35px;
    }
    .fourth-column h2{
      font-size: 35px !important;
      line-height: 40px;
      padding-top: 50px;
    }
    .fourth-row{
      display: flex;
      flex-direction: column-reverse;
    }
    .our-pricing-heading h2{
      font-size: 35px !important;
    }
    .pricing-column{
      padding: 50px 20px;
    }
    .pricing-column-2{
      padding: 50px 20px;
    }
    .bottom-card-column-1 h2{
      font-size: 35px !important;
      line-height: 40px;
    }
    .btn-3{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-4{
      margin-bottom: 20px;
      width: 100%;
    }
    #sign-up-btn-responsive{
      display: block;
      margin-right: 20px;
      margin-top: 30px;
    }
    #sign-up-btn-responsive a{
      width: 100%;
      display: flex;
      color: #fff;
      align-items: center;
      justify-content: center;
    }
  }
  @media screen and (min-width: 701px) and (max-width: 900px) {
    .logo img {
      width: 170px;
  }
    .navbar-service .wrapper {
      padding-top: 15px;
    }
    .services-card-row{
      grid-template-columns: repeat(2, 1fr);
    }
    .pricing-row-1, .pricing-row-2{
      grid-template-columns: repeat(2, 1fr);
    }
    .bottom-card-row{
      display: block;
      padding: 30px;
    }
    .banner-row{
      display: flex;
      flex-direction: column-reverse;
      padding-top: 20px;
    }
    .footer-row{
      grid-template-columns: repeat(1, 1fr);
    }
    .banner-btn-parent{
      display: flex;
    }
    .third-row{
      grid-template-columns: repeat(1, 1fr);
    }
    .sign-up-btn{
      display: none;
    }
    .burger div{
      background-color: #000000;
    }
    .navbar-right-main{
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .banner-column-left h1{
      font-size: 50px !important;
    }
    .btn-1{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-1 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .btn-2{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-2 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .heading-1 h2{
      width: 100%;
      text-align: left;
      font-size: 50px !important;
      line-height: 60px;
    }
    .home-banner-section .wrapper{
      padding-bottom: 50px;
    }
    .services-card-column{
      border-left: 1px solid #D3D3D3;
    }
    .third-column h2{
      font-size: 50px !important;
      line-height: 60px;
      padding-top: 50px;
    }
    #user-profile-desktop{
      width: 35px;
    }
    .fourth-column h2{
      font-size: 50px !important;
      line-height: 60px;
      padding-top: 50px;
    }
    .fourth-row{
      display: flex;
      flex-direction: column-reverse;
    }
    .our-pricing-heading h2{
      font-size: 50px !important;
    }
    .pricing-column{
      padding: 50px 20px;
    }
    .pricing-column-2{
      padding: 50px 20px;
    }
    .bottom-card-column-1 h2{
      font-size: 35px !important;
      line-height: 40px;
    }
    .btn-3{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-4{
      margin-bottom: 20px;
      width: 100%;
    }
    #sign-up-btn-responsive{
      display: block;
      margin-right: 20px;
      margin-top: 30px;
    }
    #sign-up-btn-responsive a{
      width: 100%;
      display: flex;
      color: #fff;
      align-items: center;
      justify-content: center;
    }
    .footer-left{
      display: flex;
      margin-left: auto;
      margin-right: auto;
    }

    .fourth-column-2 img{
      width: 100%;
    }
  }

  @media screen and (min-width: 901px) and (max-width: 1200px) {
    .logo img {
      width: 170px;
  }
    .navbar-service .wrapper {
      padding-top: 15px;
    }
    .services-card-row{
      grid-template-columns: repeat(3, 1fr);
    }
    .pricing-row-1, .pricing-row-2{
      grid-template-columns: repeat(2, 1fr);
    }
    .bottom-card-row{
      padding: 30px;
    }
    .banner-row{
      display: flex;
      padding-top: 20px;
    }
    .footer-row{
      grid-template-columns: repeat(3, 1fr);
    }
    .banner-btn-parent{
      display: flex;
    }
    .third-row{
      grid-template-columns: repeat(2, 1fr);
    }
    .sign-up-btn{
      display: none;
    }
    .burger div{
      background-color: #000000;
    }
    .navbar-right-main{
      display: flex;
      align-items: center;
      gap: 20px;
    }
    .banner-column-left h1{
      font-size: 50px !important;
    }
    .btn-1{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-1 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .btn-2{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-2 a{
      width: 100%;
      display: flex;
      justify-content: center;
    }
    .heading-1 h2{
      width: 100%;
      text-align: left;
      font-size: 50px !important;
      line-height: 60px;
    }
    .home-banner-section .wrapper{
      padding-bottom: 50px;
    }
    .services-card-column{
      border-left: 1px solid #D3D3D3;
    }
    .third-column h2{
      font-size: 50px !important;
      line-height: 60px;
      padding-top: 50px;
    }
    #user-profile-desktop{
      width: 35px;
    }
    .fourth-column h2{
      font-size: 45px !important;
      line-height: 60px;
      padding-top: 50px;
    }
    .fourth-row{
      display: flex;
    }
    .our-pricing-heading h2{
      font-size: 50px !important;
    }
    .pricing-column{
      padding: 50px 20px;
    }
    .pricing-column-2{
      padding: 50px 20px;
    }
    .bottom-card-column-1 h2{
      font-size: 35px !important;
      line-height: 40px;
    }
    .btn-3{
      margin-bottom: 20px;
      width: 100%;
    }
    .btn-4{
      margin-bottom: 20px;
      width: 100%;
    }
    #sign-up-btn-responsive{
      display: block;
      margin-right: 20px;
      margin-top: 30px;
    }
    #sign-up-btn-responsive a{
      width: 100%;
      display: flex;
      color: #fff;
      align-items: center;
      justify-content: center;
    }
    .footer-left{
      display: flex;
      margin-left: auto;
      margin-right: auto;
    }

    .fourth-column-2 img{
      width: 100%;
    }
  }