.desktop {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: relative;
    width: 100%;
    max-width: 100%;
  }
  
  .desktop .hero-section {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 930px;
    background-color: #ffffff;
  }
  
  .desktop .top-nav {
    display: flex;
    width: 100%;
    max-width: 1330px;
    align-items: center;
    justify-content: space-between;
    padding: 13px;
    position: absolute;
    top: 36px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0px 4px 100px #0000001a;
  }
  
  .desktop .img {
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .navbar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 37.5px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper {
    position: relative;
    width: fit-content;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 16px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .btn {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    padding: 12px 21px;
    position: relative;
    flex: 0 0 auto;
    border-radius: 10.5px;
    overflow: hidden;
    border: 1px solid;
    border-color: #e6e6e6;
  }

  .desktop .mobile-menu-btn {
    display: none;
  }
  
  .desktop .div {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-primary);
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .overlap {
    position: absolute;
    width: 100%;
    max-width: 1329px;
    height: 561px;
    top: 231px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .btns {
    display: inline-flex;
    align-items: center;
    gap: 29px;
    position: absolute;
    top: 437px;
    left: 0;
  }
  
  .desktop .playstore {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.5px;
    padding: 12px 20.25px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -1px;
    background-color: #ffffff;
    border-radius: 9.75px;
    overflow: hidden;
    border: 0.75px solid;
    border-color: #a9a9a9;
  }
  
  .desktop .frame {
    display: flex;
    width: 130.35px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .playstore-2 {
    position: relative;
    width: 28.88px;
    height: 33px;
  }
  
  .desktop .content {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-2 {
    position: relative;
    align-self: stretch;
    margin-top: -1.2px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 12px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-3 {
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 600;
    color: #000000;
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .appstore {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.5px;
    padding: 12px 20.25px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -0.62px;
    margin-bottom: -0.62px;
    margin-right: -1px;
    background-color: #ffffff;
    border-radius: 9.75px;
    overflow: hidden;
    border: 0.75px solid;
    border-color: #a9a9a9;
  }
  
  .desktop .frame-2 {
    display: flex;
    align-items: center;
    gap: 9.75px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .apple {
    position: relative;
    width: 27.5px;
    height: 33px;
  }
  
  .desktop .content-2 {
    display: flex;
    width: 93.6px;
    gap: 2.25px;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  
  .desktop .text-wrapper-4 {
    position: relative;
    align-self: stretch;
    margin-top: -1.2px;
    font-family: "SF Compact-Light", Helvetica;
    font-weight: 300;
    color: #000000;
    font-size: 10.8px;
    letter-spacing: 0;
    line-height: 10.8px;
  }
  
  .desktop .text-wrapper-5 {
    position: relative;
    align-self: stretch;
    font-family: "SF Compact-Medium", Helvetica;
    font-weight: 500;
    color: #000000;
    font-size: 21.6px;
    letter-spacing: -0.56px;
    line-height: 21.6px;
  }
  
  .desktop .overlap-group {
    position: absolute;
    width: 1329px;
    height: 561px;
    top: 0;
    left: 0;
  }
  
  .desktop .ellipse {
    position: absolute;
    width: 112px;
    height: 112px;
    top: 283px;
    left: 508px;
    background-color: #d40511ab;
    border-radius: 56.25px;
    filter: blur(112.5px);
    aspect-ratio: 1;
  }
  
  .desktop .one-klik-is-all-it {
    position: absolute;
    width: 589px;
    top: 13px;
    left: 0;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: transparent;
    font-size: 58.5px;
    letter-spacing: 0;
    line-height: 75.8px;
  }
  
  .desktop .span {
    font-weight: 800;
    color: #191919;
  }
  
  .desktop .text-wrapper-6 {
    font-weight: 900;
    color: #191919;
  }
  
  .desktop .text-wrapper-7 {
    font-family: "Shantell Sans", Helvetica;
    font-weight: 700;
    color: #d40511;
  }
  
  .desktop .p {
    position: absolute;
    width: 554px;
    top: 290px;
    left: 0;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #a1a1a1;
    font-size: 19.5px;
    letter-spacing: 0;
    line-height: 37.5px;
  }
  
  .desktop .hero-section-hero {
    position: absolute;
    width: 751px;
    height: 561px;
    top: 0;
    left: 578px;
  }
  
  .desktop .section {
    height: 573px;
    background-image: url("About Us Section Bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  /* New About Us section layout */
  .desktop .about-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .desktop .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 80px;
    width: 100%;
    max-width: 1200px;
    position: relative;
    flex-direction: row-reverse;
  }

  .desktop .about-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 37.5px;
    flex: 1;
    max-width: 600px;
  }
  
  .desktop .about-us-hero {
    width: 450px;
    height: 405px;
    flex-shrink: 0;
  }
  
  .desktop .ellipse-2 {
    width: 93px;
    height: 93px;
    top: 225px;
    left: 32px;
    border-radius: 46.5px;
    position: absolute;
    background-color: #d40511ab;
    filter: blur(112.5px);
    aspect-ratio: 1;
  }
  
  .desktop .section-2 {
    height: 764px;
    background-image: url("Services Section Bg.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    align-self: stretch;
    width: 100%;
  }

  /* New Services section layout */
  .desktop .services-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 80px;
  }

  .desktop .services-header {
    text-align: center;
    margin-bottom: 40px;
    max-width: 800px;
  }

  .desktop .services-subtext {
    text-align: center;
    margin-bottom: 60px;
    max-width: 800px;
  }

  .desktop .services-cards {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 1200px;
  }
  
  .desktop .text-wrapper-9 {
    position: relative;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
    margin-bottom: 25px;
  }
  
  .desktop .overlap-3 {
    position: absolute;
    width: 100%;
    max-width: 1385px;
    height: 500px;
    top: 232px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .icon-in-red-2 {
    position: absolute;
    width: 317px;
    height: 500px;
    top: 0;
    left: 0;
    aspect-ratio: 1.24;
    object-fit: cover;
  }
  
  .desktop .frame-5 {
    display: flex;
    width: 100%;
    max-width: 1330px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 53px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .card {
    display: flex;
    flex-direction: column;
    width: 285px;
    height: 345px;
    align-items: center;
    gap: 33.75px;
    padding: 45px 21.75px;
    position: relative;
    background-color: #ffffff;
    border-radius: 22.5px;
    overflow: hidden;
    box-shadow: 0px 3px 75px #0000001a;
  }
  
  .desktop .head-sub-text {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-10 {
    position: relative;
    width: 233.25px;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 19.5px;
    text-align: center;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .text-wrapper-11 {
    position: relative;
    width: 225px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: var(--klik-dark-grey);
    font-size: 15px;
    text-align: center;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .head-sub-text-2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-12 {
    position: relative;
    align-self: stretch;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 19.5px;
    text-align: center;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .text-wrapper-13 {
    position: relative;
    width: 100%;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #a1a1a1;
    font-size: 22.5px;
    text-align: center;
    letter-spacing: 0;
    line-height: 40.5px;
  }
  
  .desktop .why-klik-section {
    height: 444px;
    background-image: url(https://c.animaapp.com/zPYqG63V/img/pattern-with-red-background-and-red-gradient-1.png);
    background-size: cover;
    background-position: 50% 50%;
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  /* New Why Klik section layout */
  .desktop .why-klik-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .desktop .frame-6 {
    display: flex;
    flex-direction: column;
    width: 501px;
    align-items: flex-start;
    gap: 55px;
    position: relative;
  }

  .desktop .why-klik-hero {
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    margin-left: 80px;
  }
  
  .desktop .overlap-4 {
    position: relative;
    width: 100%;
    height: 444px;
    background-image: url(https://c.animaapp.com/zPYqG63V/img/pattern-with-red-background-and-red-gradient-1.png);
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .desktop .frame-7 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-14 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: var(--klik-white);
    font-size: 42px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .div-2 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .faster-deliveries {
    position: relative;
    width: 483px;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-white);
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-15 {
    position: relative;
    width: 483px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-white);
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .partner-first-tools {
    position: relative;
    width: 457px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-white);
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .frame-8 {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .frame-wrapper {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 18px;
    position: relative;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -1px;
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    border: 0.68px solid;
    border-color: #a9a9a9;
  }
  
  .desktop .frame-9 {
    display: flex;
    width: 118.92px;
    align-items: center;
    justify-content: space-between;
    position: relative;
    flex: 0 0 auto;
    margin-right: -2.92px;
  }
  
  .desktop .playstore-3 {
    position: relative;
    width: 26.34px;
    height: 30.11px;
  }
  
  .desktop .content-3 {
    display: inline-flex;
    gap: 2.74px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  
  .desktop .text-wrapper-16 {
    margin-top: -1.09px;
    color: #000000;
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    font-size: 8.2px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-17 {
    color: #000000;
    font-size: 14.6px;
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 600;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .appstore-2 {
    display: flex;
    width: 152px;
    height: 54px;
    gap: 7px;
    padding: 11px 18px;
    margin-top: -0.63px;
    margin-bottom: -0.63px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 0.63px solid;
    border-color: #a9a9a9;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-right: -1px;
    overflow: hidden;
  }
  
  .desktop .frame-10 {
    display: inline-flex;
    align-items: center;
    gap: 8.23px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .apple-2 {
    position: relative;
    width: 23.21px;
    height: 27.85px;
  }
  
  .desktop .content-4 {
    display: flex;
    width: 78.99px;
    gap: 1.9px;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  
  .desktop .text-wrapper-18 {
    margin-top: -1.01px;
    color: #000000;
    font-size: 9px;
    line-height: normal;
    position: relative;
    align-self: stretch;
    font-family: "SF Compact-Light", Helvetica;
    font-weight: 300;
    letter-spacing: 0;
  }
  
  .desktop .text-wrapper-19 {
    width: fit-content;
    color: #000000;
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: normal;
    white-space: nowrap;
    position: relative;
    font-family: "SF Compact-Medium", Helvetica;
    font-weight: 500;
  }
  
  .desktop .section-3 {
    height: 810px;
    background-color: #ffffff;
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  .desktop .text-wrapper-20 {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .overlap-5 {
    position: absolute;
    width: 100%;
    max-width: 1330px;
    height: 543px;
    top: 161px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .ellipse-3 {
    width: 112px;
    height: 112px;
    top: 238px;
    left: 644px;
    border-radius: 56.25px;
    position: absolute;
    background-color: #d40511ab;
    filter: blur(112.5px);
    aspect-ratio: 1;
  }
  
  .desktop .frame-11 {
    display: flex;
    width: 100%;
    max-width: 1330px;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .how-it-works-hero {
    position: relative;
    width: 605px;
    height: 543px;
  }
  
  .desktop .overlap-group-2 {
    position: relative;
    width: 554px;
    height: 470px;
    top: 26px;
    left: 51px;
  }
  
  .desktop .line {
    position: absolute;
    width: 7px;
    height: 393px;
    top: 53px;
    left: 49px;
  }
  
  .desktop .request {
    display: inline-flex;
    align-items: center;
    gap: 33.75px;
    position: absolute;
    top: 0;
    left: 10px;
  }
  
  .desktop .text {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-21 {
    position: relative;
    width: fit-content;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 800;
    color: #172019;
    font-size: 27px;
    letter-spacing: 0;
    line-height: normal;
    white-space: nowrap;
  }
  
  .desktop .text-wrapper-22 {
    position: relative;
    width: 426px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #172019;
    font-size: 16.5px;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .dispatch {
    display: inline-flex;
    align-items: center;
    gap: 33.75px;
    position: absolute;
    top: 185px;
    left: 3px;
  }
  
  .desktop .delivery {
    display: inline-flex;
    align-items: center;
    gap: 33.75px;
    position: absolute;
    top: 370px;
    left: 0;
  }
  
  .desktop .icon {
    position: relative;
    width: 99px;
  }
  
  .desktop .text-wrapper-23 {
    position: relative;
    width: 407.25px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #172019;
    font-size: 16.5px;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .section-4 {
    height: 577.5px;
    background-color: #ffffff;
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  .desktop .frame-12 {
    display: flex;
    width: 100%;
    max-width: 1099px;
    align-items: center;
    gap: 129px;
    position: relative;
    top: 64px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .img-3 {
    position: relative;
    width: 468.68px;
    height: 450px;
  }
  
  .desktop .who-we-serve {
    display: flex;
    flex-direction: column;
    width: 501px;
    align-items: flex-start;
    gap: 41.25px;
    position: relative;
  }
  
  .desktop .frame-13 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-24 {
    position: relative;
    align-self: stretch;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: var(--klik-black);
    font-size: 48px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-25 {
    position: relative;
    align-self: stretch;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-black);
    font-size: 18px;
    letter-spacing: 0;
    line-height: 32.2px;
  }
  
  .desktop .increase-orders {
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-black);
    font-size: 18px;
    letter-spacing: 0;
    line-height: 32.2px;
  }
  
  .desktop .btn-2 {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    padding: 12px 21px;
    position: relative;
    border-radius: 10.5px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--klik-primary);
  }
  
  .desktop .text-wrapper-26 {
    position: relative;
    width: fit-content;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-primary);
    font-size: 18px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .download-app-section {
    position: relative;
    align-self: stretch;
    width: 100%;
    height: 619px;
    background-image: url("https://c.animaapp.com/zPYqG63V/img/pattern-with-yellow-background-and-yellow-gradient-1.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  /* New Download App section layout */
  .desktop .download-container {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 55px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .desktop .frame-14 {
    display: flex;
    flex-direction: column;
    width: 501px;
    align-items: flex-start;
    gap: 55px;
    position: relative;
  }

  .desktop .right-app-view {
    width: 500px;
    height: 500px;
    flex-shrink: 0;
    margin-left: 80px;
  }
  
  .desktop .overlap-6 {
    position: relative;
    width: 100%;
    height: 581px;
    top: 38px;
  }
  
  .desktop .download-app-inner {
    position: absolute;
    width: 100%;
    height: 497px;
    top: 84px;
    left: 0;
    background-color: #ffffff;
  }
  
  .desktop .overlap-group-3 {
    position: relative;
    height: 497px;
  }
  
  .desktop .pattern-with-red {
    position: absolute;
    width: 100%;
    height: 443px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  .desktop .pattern-with-yellow {
    position: absolute;
    width: 100%;
    height: 497px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  .desktop .frame-15 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 25px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-27 {
    position: relative;
    width: 382px;
    margin-top: -1px;
    font-family: "Urbanist", Helvetica;
    font-weight: 800;
    color: var(--klik-black);
    font-size: 48px;
    letter-spacing: 0;
    line-height: 61px;
  }
  
  .desktop .text-wrapper-28 {
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 500;
    color: var(--klik-black);
    font-size: 24px;
    letter-spacing: 0;
    line-height: 40px;
  }
  
  .desktop .frame-16 {
    display: inline-flex;
    align-items: center;
    gap: 30px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .playstore-4 {
    display: flex;
    flex-direction: column;
    width: 152px;
    align-items: flex-start;
    gap: 7px;
    padding: 11px 18px;
    position: relative;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -1px;
    background-color: var(--klik-black);
    border-radius: 8px;
    overflow: hidden;
    border: 0.68px solid;
    border-color: #a9a9a9;
  }
  
  .desktop .text-wrapper-29 {
    margin-top: -1.09px;
    color: var(--klik-white);
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    font-size: 8.2px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-30 {
    color: var(--klik-white);
    font-size: 14.6px;
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 600;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .appstore-3 {
    display: flex;
    width: 152px;
    height: 54px;
    gap: 7px;
    padding: 11px 18px;
    margin-top: -0.63px;
    margin-bottom: -0.63px;
    background-color: var(--klik-black);
    border-radius: 8px;
    border: 0.63px solid;
    border-color: #a9a9a9;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-right: -1px;
    overflow: hidden;
  }
  
  .desktop .text-wrapper-31 {
    margin-top: -1.01px;
    color: var(--klik-white);
    font-size: 9px;
    line-height: normal;
    position: relative;
    align-self: stretch;
    font-family: "SF Compact-Light", Helvetica;
    font-weight: 300;
    letter-spacing: 0;
  }
  
  .desktop .text-wrapper-32 {
    width: fit-content;
    color: var(--klik-white);
    font-size: 16px;
    letter-spacing: -0.48px;
    line-height: normal;
    white-space: nowrap;
    position: relative;
    font-family: "SF Compact-Medium", Helvetica;
    font-weight: 500;
  }
  
  .desktop .iphone-pro {
    position: absolute;
    width: 460px;
    height: 527px;
    top: 0;
    left: 798px;
    aspect-ratio: 0.87;
  }
  
  .desktop .section-5 {
    height: 800px;
    background-color: var(--klik-primary);
    position: relative;
    align-self: stretch;
    width: 100%;
  }
  
  .desktop .frame-17 {
    display: flex;
    width: 100%;
    max-width: 1329px;
    align-items: flex-start;
    justify-content: space-between;
    position: absolute;
    top: 66px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .footer-left-logo {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 52.5px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .frame-18 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-33 {
    position: relative;
    width: 390px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: var(--klik-white);
    font-size: 15px;
    letter-spacing: 0;
    line-height: 30px;
  }
  
  .desktop .btns-2 {
    display: inline-flex;
    align-items: center;
    gap: 22.5px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .playstore-5 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7.5px;
    padding: 8.25px 13.5px;
    position: relative;
    flex: 0 0 auto;
    margin-top: -1px;
    margin-bottom: -1px;
    margin-left: -1px;
    background-color: #ffffff;
    border-radius: 6.62px;
    overflow: hidden;
    border: 0.51px solid;
    border-color: #ff4d4d;
  }
  
  .desktop .frame-19 {
    display: flex;
    align-items: center;
    gap: 7.5px;
    position: relative;
    align-self: stretch;
    width: 100%;
    flex: 0 0 auto;
  }
  
  .desktop .playstore-6 {
    position: relative;
    width: 19.61px;
    height: 22.42px;
  }
  
  .desktop .text-wrapper-34 {
    margin-top: -0.82px;
    color: var(--klik-black);
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    font-size: 8.2px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-35 {
    color: var(--klik-black);
    font-size: 12.2px;
    position: relative;
    align-self: stretch;
    font-family: "Urbanist", Helvetica;
    font-weight: 600;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .appstore-4 {
    display: inline-flex;
    gap: 7.5px;
    padding: 8.25px 13.5px;
    flex: 0 0 auto;
    margin-top: -0.76px;
    margin-bottom: -0.76px;
    background-color: #ffffff;
    border-radius: 6.62px;
    border: 0.51px solid;
    border-color: #ff4d4d;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    margin-right: -1px;
    overflow: hidden;
  }
  
  .desktop .apple-3 {
    position: relative;
    width: 18.68px;
    height: 22.42px;
  }
  
  .desktop .content-5 {
    display: inline-flex;
    gap: 1.53px;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }
  
  .desktop .text-wrapper-36 {
    margin-top: -0.82px;
    color: var(--klik-black);
    font-size: 7.3px;
    line-height: 7.3px;
    position: relative;
    align-self: stretch;
    font-family: "SF Compact-Light", Helvetica;
    font-weight: 300;
    letter-spacing: 0;
  }
  
  .desktop .text-wrapper-37 {
    width: 65px;
    color: var(--klik-black);
    font-size: 14.7px;
    letter-spacing: -0.38px;
    line-height: 14.7px;
    position: relative;
    font-family: "SF Compact-Medium", Helvetica;
    font-weight: 500;
  }
  
  .desktop .social-medias {
    display: inline-flex;
    align-items: center;
    gap: 20.25px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .img-4 {
    position: relative;
    width: 18px;
    height: 18px;
    aspect-ratio: 1;
  }
  
  .desktop .footer-menus {
    display: flex;
    width: 757.5px;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
  }
  
  .desktop .div-3 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12.5px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-38 {
    position: relative;
    width: fit-content;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 600;
    color: var(--klik-white);
    font-size: 18px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .frame-20 {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0px;
    position: relative;
    flex: 0 0 auto;
  }
  
  .desktop .text-wrapper-39 {
    width: fit-content;
    font-weight: 400;
    color: #ffaeae;
    font-size: 18px;
    text-align: right;
    position: relative;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-40 {
    position: relative;
    width: fit-content;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #ffaeae;
    font-size: 18px;
    text-align: right;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .text-wrapper-41 {
    position: relative;
    width: 276.75px;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #ffaeae;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 27px;
  }
  
  .desktop .deep-foot {
    display: flex;
    width: 100%;
    max-width: 1329px;
    align-items: flex-end;
    justify-content: space-between;
    position: absolute;
    top: 533px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .text-wrapper-42 {
    position: relative;
    width: fit-content;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: var(--klik-white);
    font-size: 16.5px;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .frame-21 {
    position: relative;
    width: 939.75px;
  }
  
  /* Original CSS code should be injected here */
  
  /* Additional responsive and accessibility improvements */
  .desktop .text-wrapper:hover,
  .desktop .text-wrapper:focus {
    color: var(--klik-primary);
    transition: color 0.2s ease;
  }
  
  .desktop .btn:hover,
  .desktop .div-wrapper:hover,
  .desktop .btn-2:hover {
    transform: translateY(-1px);
    box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
  }
  
  .desktop .playstore:hover,
  .desktop .appstore:hover,
  .desktop .playstore-4:hover,
  .desktop .appstore-3:hover,
  .desktop .playstore-5:hover,
  .desktop .appstore-4:hover,
  .desktop .frame-wrapper:hover,
  .desktop .appstore-2:hover {
    transform: translateY(-2px);
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
  }
  
  .desktop .card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 100px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
  }
  
  .desktop .social-medias a:hover .img-4 {
    transform: scale(1.1);
    transition: transform 0.2s ease;
  }
  
  .desktop .footer-menus a:hover {
    color: var(--klik-white);
    transition: color 0.2s ease;
  }
  
  /* Focus styles for better accessibility */
  .desktop .btn:focus,
  .desktop .div-wrapper:focus,
  .desktop .btn-2:focus {
    outline: 2px solid var(--klik-primary);
    outline-offset: 2px;
  }
  
  .desktop .playstore:focus,
  .desktop .appstore:focus,
  .desktop .playstore-4:focus,
  .desktop .appstore-3:focus,
  .desktop .playstore-5:focus,
  .desktop .appstore-4:focus,
  .desktop .frame-wrapper:focus,
  .desktop .appstore-2:focus {
    outline: 2px solid var(--klik-primary);
    outline-offset: 2px;
  }
  
  .desktop .social-medias a:focus {
    outline: 2px solid var(--klik-white);
    outline-offset: 2px;
    border-radius: 2px;
  }
  
  /* Ensure proper text contrast and readability */
  .desktop .text-wrapper-22,
  .desktop .text-wrapper-23 {
    color: #172019;
  }
  
  /* Improve button accessibility */
  .desktop .btn,
  .desktop .div-wrapper,
  .desktop .btn-2 {
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Ensure interactive elements are properly sized for touch */
  .desktop .playstore,
  .desktop .appstore,
  .desktop .playstore-4,
  .desktop .appstore-3,
  .desktop .playstore-5,
  .desktop .appstore-4,
  .desktop .frame-wrapper,
  .desktop .appstore-2 {
    cursor: pointer;
    min-height: 44px;
  }
  
  .desktop .social-medias a {
    cursor: pointer;
    min-height: 44px;
    min-width: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Improve link styling in footer */
  .desktop .footer-menus a {
    cursor: pointer;
    text-decoration: none;
    min-height: 44px;
    display: inline-block;
    line-height: 44px;
  }
  
  /* Ensure address element has proper styling */
  .desktop .text-wrapper-41 {
    font-style: normal;
  }
  
  .desktop .overlap {
    position: absolute;
    width: 100%;
    max-width: 1329px;
    height: 561px;
    top: 231px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .overlap-2 {
    position: absolute;
    width: 100%;
    max-width: 704px;
    height: 488px;
    top: 86px;
    right: 55px;
  }
  
  .desktop .overlap-3 {
    position: absolute;
    width: 100%;
    max-width: 1385px;
    height: 500px;
    top: 232px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .overlap-4 {
    position: relative;
    width: 100%;
    height: 444px;
    background-image: url(https://c.animaapp.com/zPYqG63V/img/pattern-with-red-background-and-red-gradient-1.png);
    background-size: cover;
    background-position: 50% 50%;
  }
  
  .desktop .overlap-5 {
    position: absolute;
    width: 100%;
    max-width: 1330px;
    height: 543px;
    top: 161px;
    left: 50%;
    transform: translateX(-50%);
  }
  
  .desktop .overlap-6 {
    position: relative;
    width: 100%;
    height: 581px;
    top: 38px;
  }
  
  .desktop .download-app-inner {
    position: absolute;
    width: 100%;
    height: 497px;
    top: 84px;
    left: 0;
    background-color: #ffffff;
  }
  
  .desktop .overlap-group-3 {
    position: relative;
    height: 497px;
  }
  
  .desktop .pattern-with-red {
    position: absolute;
    width: 100%;
    height: 443px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  
  .desktop .pattern-with-yellow {
    position: absolute;
    width: 100%;
    height: 497px;
    top: 0;
    left: 0;
    object-fit: cover;
  }
  

  
  /* Add responsive container for better layout control */
  .desktop > * {
    width: 100%;
    max-width: 100%;
  }

  /* Ensure sections stretch to full width */
  .desktop .section,
  .desktop .section-2,
  .desktop .section-3,
  .desktop .section-4,
  .desktop .section-5,
  .desktop .overlap-wrapper,
  .desktop .download-app-section {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* Center content within sections */
  .desktop .text-wrapper-9,
  .desktop .text-wrapper-20 {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    font-family: "Urbanist", Helvetica;
    font-weight: 700;
    color: #000000;
    font-size: 48px;
    text-align: center;
    letter-spacing: 0;
    line-height: normal;
  }
  
  /* Responsive adjustments for smaller screens */
  @media (max-width: 1440px) {
    .desktop .top-nav {
      max-width: 90%;
    }
    
    .desktop .overlap,
    .desktop .overlap-3,
    .desktop .overlap-5,
    .desktop .frame-5,
    .desktop .frame-11,
    .desktop .frame-12,
    .desktop .frame-17,
    .desktop .deep-foot {
      max-width: 90%;
    }
  }

  @media (max-width: 1200px) {
    .desktop .top-nav {
      max-width: 95%;
    }
    
    .desktop .overlap,
    .desktop .overlap-3,
    .desktop .overlap-5,
    .desktop .frame-5,
    .desktop .frame-11,
    .desktop .frame-12,
    .desktop .frame-17,
    .desktop .deep-foot {
      max-width: 95%;
    }
  }
  
  .desktop .about-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 37.5px;
    flex: 1;
    max-width: 600px;
  }
  
  .desktop .text-wrapper-8 {
    align-self: stretch;
    font-weight: 800;
    color: #000000;
    font-size: 42px;
    position: relative;
    margin-top: -0.75px;
    font-family: "Urbanist", Helvetica;
    letter-spacing: 0;
    line-height: normal;
  }
  
  .desktop .klik-connects {
    position: relative;
    width: 100%;
    font-family: "Urbanist", Helvetica;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    letter-spacing: 0;
    line-height: 40.5px;
  }
  
  .desktop .div-wrapper {
    all: unset;
    box-sizing: border-box;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7.5px;
    padding: 12px 21px;
    position: relative;
    border-radius: 10.5px;
    overflow: hidden;
    border: 1px solid;
    border-color: var(--klik-primary);
  }
  
  /* Responsive adjustments for About Us section */
  @media (max-width: 1200px) {
    .desktop .about-content {
      max-width: 1000px;
      gap: 60px;
    }
  }

  @media (max-width: 900px) {
    .desktop .about-content {
      flex-direction: column;
      gap: 50px;
      text-align: center;
    }
    
    .desktop .about-text {
      align-items: center;
    }
    
    .desktop .about-container {
      padding: 40px 30px;
    }
  }

  /* Responsive adjustments for Services section */
  @media (max-width: 1200px) {
    .desktop .services-cards {
      gap: 30px;
      max-width: 1000px;
    }
  }

  @media (max-width: 900px) {
    .desktop .services-container {
      padding: 40px 30px;
      padding-top: 60px;
    }
    
    .desktop .services-header {
      margin-bottom: 30px;
    }
    
    .desktop .services-subtext {
      margin-bottom: 40px;
    }
    
    .desktop .services-cards {
      gap: 25px;
      flex-wrap: wrap;
    }
  }

  /* Responsive adjustments for Download App section */
  @media (max-width: 1200px) {
    .desktop .download-container {
      gap: 60px;
    }
    
    .desktop .right-app-view {
      margin-left: 60px;
      width: 450px;
      height: 450px;
    }
  }

  @media (max-width: 900px) {
    .desktop .download-container {
    flex-direction: column;
      gap: 50px;
      padding: 40px 30px;
    }
    
    .desktop .frame-14 {
      align-items: center;
    text-align: center;
    }
    
    .desktop .right-app-view {
      margin-left: 0;
      width: 400px;
      height: 400px;
    }
  }

  /* Responsive adjustments for Why Klik section */
  @media (max-width: 1200px) {
    .desktop .why-klik-container {
      gap: 60px;
    }
    
    .desktop .why-klik-hero {
      margin-left: 60px;
      width: 450px;
      height: 450px;
    }
  }

  @media (max-width: 900px) {
    .desktop .why-klik-container {
      flex-direction: column;
      gap: 50px;
      padding: 40px 30px;
  }
  
  .desktop .frame-6 {
      align-items: center;
      text-align: center;
    }
    
    .desktop .why-klik-hero {
      margin-left: 0;
      width: 400px;
      height: 400px;
    }
  }
  
  /* Mobile Responsive Design */
  @media (max-width: 768px) {
    /* Reset all absolute positioning for mobile */
    .desktop .top-nav,
    .desktop .overlap,
    .desktop .btns,
    .desktop .overlap-group,
    .desktop .overlap-5,
    .desktop .frame-11,
    .desktop .frame-12,
    .desktop .frame-17,
    .desktop .deep-foot {
      position: relative !important;
      top: auto !important;
      left: auto !important;
      right: auto !important;
      transform: none !important;
      width: 100% !important;
      height: auto !important;
    }
    /* Mobile Navigation */
    .desktop .top-nav {
      padding: 15px 20px;
      flex-wrap: wrap;
    }
    
    .desktop .top-nav .img {
      width: 80px;
      height: auto;
    }
    
    .desktop .navbar {
      display: none;
    }
    
    .desktop .btn {
      display: none;
    }
    
    .desktop .mobile-menu-btn {
      display: block;
      background: none;
      border: none;
      cursor: pointer;
      padding: 5px;
    }
    
    .desktop .mobile-menu-btn img {
      width: 24px;
      height: 24px;
    }

    /* Hero Section Mobile */
    .desktop .hero-section {
      padding: 20px;
      min-height: auto;
    position: relative;
  }
  
    .desktop .overlap {
    flex-direction: column;
      gap: 30px;
      padding: 0;
      margin-top: 20px;
    }
    
    .desktop .one-klik-is-all-it {
      font-size: 28px;
      line-height: 1.3;
      text-align: center;
      margin-bottom: 20px;
    }
    
    .desktop .p {
      font-size: 16px;
      text-align: center;
      margin: 20px 0 30px 0;
      line-height: 1.5;
    }
    
    .desktop .btns {
    flex-direction: column;
      gap: 15px;
      align-items: center;
      margin: 20px 0;
    }
    
    .desktop .hero-section-hero {
      width: 100%;
      max-width: 280px;
      height: auto;
      margin: 0 auto;
    }

    /* About Us Section Mobile */
    .desktop .about-container {
      padding: 30px 20px;
    }
    
    .desktop .about-content {
    flex-direction: column;
      gap: 40px;
  }
  
    .desktop .about-text {
      text-align: center;
    align-items: center;
    }
    
    .desktop .text-wrapper-8 {
      font-size: 28px;
    }
    
    .desktop .klik-connects {
      font-size: 16px;
      line-height: 1.5;
    }
    
    .desktop .about-us-hero {
      width: 100%;
      max-width: 300px;
      height: auto;
    }

    /* Services Section Mobile */
    .desktop .services-container {
      padding: 40px 20px;
      height: auto;
    }
    
    .desktop .services-header {
      margin-bottom: 30px;
    }
    
    .desktop .text-wrapper-9 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    
    .desktop .services-subtext {
      margin-bottom: 40px;
    }
    
    .desktop .text-wrapper-13 {
    font-size: 16px;
      line-height: 1.5;
      margin-bottom: 30px;
    }
    
    .desktop .services-cards {
      flex-direction: column;
      gap: 25px;
    width: 100%;
  }
    
    .desktop .card {
      width: 100%;
      max-width: 350px;
      margin: 0 auto;
    }

    /* How It Works Section Mobile */
    .desktop .section-3 {
      padding: 40px 20px;
      height: auto;
    }
  
  .desktop .text-wrapper-20 {
      font-size: 28px;
    text-align: center;
      margin-bottom: 40px;
  }
  
  .desktop .overlap-5 {
      flex-direction: column;
      gap: 40px;
    }
    
    .desktop .frame-11 {
      flex-direction: column;
      gap: 40px;
    }
    
    .desktop .how-it-works-hero {
      display: none;
    }
    
    .desktop .overlap-group-2 {
    display: flex;
      flex-direction: column;
      gap: 40px;
    align-items: center;
      width: 100%;
    }
    
    .desktop .request,
    .desktop .dispatch,
    .desktop .delivery {
      width: 100%;
      max-width: 280px;
      text-align: center;
      padding: 20px;
    }

    /* Who We Serve Section Mobile */
    .desktop .section-4 {
      padding: 40px 20px;
      height: auto;
    }
    
    .desktop .frame-12 {
      flex-direction: column;
      gap: 40px;
    }
    
    .desktop .who-we-serve {
      text-align: center;
    align-items: center;
      width: 100%;
    }
    
    .desktop .text-wrapper-24 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    
    .desktop .text-wrapper-25 {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 20px;
    }
    
    .desktop .increase-orders {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 30px;
    }
    
    .desktop .img-3 {
      width: 100%;
      max-width: 300px;
      height: auto;
      margin: 0 auto;
    }

    /* Download App Section Mobile */
    .desktop .download-container {
    flex-direction: column;
      gap: 40px;
      padding: 40px 20px;
      height: auto;
    }
    
    .desktop .frame-14 {
    align-items: flex-start;
      text-align: left;
      width: 100%;
    }
    
    .desktop .text-wrapper-27 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    
    .desktop .text-wrapper-28 {
      font-size: 16px;
      line-height: 1.5;
      margin-bottom: 30px;
    }
    
    .desktop .right-app-view {
      width: 100%;
      max-width: 300px;
      height: auto;
      margin-left: 0;
      margin: 0 auto;
    }

    /* Why Klik Section Mobile */
    .desktop .why-klik-container {
      flex-direction: column;
      gap: 40px;
      padding: 40px 20px;
      height: auto;
    }
    
    .desktop .frame-6 {
      align-items: center;
      text-align: center;
      width: 100%;
    }
    
    .desktop .text-wrapper-14 {
      font-size: 28px;
      margin-bottom: 20px;
    }
    
    .desktop .faster-deliveries,
    .desktop .text-wrapper-15,
    .desktop .partner-first-tools {
      font-size: 16px;
      line-height: 1.5;
    width: 100%;
      margin-bottom: 15px;
    }
    
    .desktop .why-klik-hero {
      width: 100%;
      max-width: 280px;
      height: auto;
      margin-left: 0;
      margin: 0 auto;
    }

    /* Footer Mobile */
    .desktop .section-5 {
      padding: 40px 20px;
      height: auto;
    }
    
    .desktop .frame-17 {
    flex-direction: column;
      gap: 40px;
      text-align: center;
    }
    
    .desktop .deep-foot {
    flex-direction: column;
      gap: 30px;
      text-align: center;
    }
    
    .desktop .frame-32 {
      flex-direction: column;
      gap: 30px;
    }
    
    .desktop .frame-32 > div {
      width: 100%;
      text-align: center;
      margin-bottom: 20px;
    }
  }

  /* iPhone and Small Mobile Devices */
  @media (max-width: 480px) {
    /* Additional fixes for iPhone 14 Pro Max and similar devices */
    .desktop .hero-section {
      padding: 15px;
    }
    
    .desktop .overlap {
      gap: 25px;
      margin-top: 15px;
    }
    
    .desktop .one-klik-is-all-it {
      font-size: 24px;
      line-height: 1.4;
    }
    
    .desktop .p {
      font-size: 14px;
      margin: 15px 0 25px 0;
    }
    
    .desktop .btns {
      gap: 12px;
      margin: 15px 0;
    }
    
    .desktop .hero-section-hero {
      max-width: 250px;
    }
    
    /* Services section fixes */
    .desktop .services-container {
      padding: 30px 15px;
    }
    
    .desktop .services-cards {
      gap: 20px;
    }
    
    .desktop .card {
      max-width: 320px;
    }
    
    /* How It Works fixes */
    .desktop .section-3 {
      padding: 30px 15px;
    }
    
    .desktop .overlap-5 {
      gap: 30px;
    }
    
    .desktop .frame-11 {
      gap: 30px;
    }
    
    .desktop .overlap-group-2 {
    gap: 30px;
    }
    
    .desktop .request,
    .desktop .dispatch,
    .desktop .delivery {
      max-width: 260px;
      padding: 15px;
    }
    
    /* Who We Serve fixes */
    .desktop .section-4 {
      padding: 30px 15px;
    }
    
    .desktop .frame-12 {
      gap: 30px;
    }
    
    .desktop .img-3 {
      max-width: 250px;
    }
    
    /* Download App fixes */
    .desktop .download-container {
      padding: 30px 15px;
      gap: 30px;
    }
    
    .desktop .right-app-view {
      max-width: 250px;
    }
    
    /* Why Klik fixes */
    .desktop .why-klik-container {
      padding: 30px 15px;
      gap: 30px;
    }
    
    .desktop .why-klik-hero {
      max-width: 250px;
    }
    
    /* Footer fixes */
  .desktop .section-5 {
      padding: 30px 15px;
  }
  
  .desktop .frame-17 {
      gap: 30px;
    }
    
    .desktop .deep-foot {
      gap: 25px;
    }
    
    .desktop .frame-32 {
      gap: 25px;
    }
    .desktop .top-nav {
      padding: 10px 15px;
    }
    
    .desktop .one-klik-is-all-it {
      font-size: 24px;
    }
    
    .desktop .text-wrapper-8,
    .desktop .text-wrapper-9,
    .desktop .text-wrapper-20,
    .desktop .text-wrapper-24,
    .desktop .text-wrapper-27,
    .desktop .text-wrapper-14 {
      font-size: 24px;
    }
    
    .desktop .p,
    .desktop .klik-connects,
    .desktop .text-wrapper-13,
    .desktop .text-wrapper-25,
    .desktop .text-wrapper-28,
    .desktop .faster-deliveries,
    .desktop .text-wrapper-15,
    .desktop .partner-first-tools {
      font-size: 14px;
    }
    
    .desktop .about-container,
    .desktop .services-container,
    .desktop .section-3,
    .desktop .section-4,
    .desktop .download-container,
    .desktop .why-klik-container,
    .desktop .section-5 {
      padding: 20px 15px;
    }
  }
  
  /* iPhone 14 Pro Max and similar devices */
  @media (max-width: 430px) {
    .desktop .hero-section {
      padding: 10px;
    }
    
    .desktop .overlap {
      gap: 20px;
      margin-top: 10px;
    }
    
    .desktop .one-klik-is-all-it {
      font-size: 22px;
    }
    
    .desktop .p {
      font-size: 13px;
      margin: 10px 0 20px 0;
    }
    
    .desktop .hero-section-hero {
      max-width: 220px;
    }
    
    .desktop .services-container,
    .desktop .section-3,
    .desktop .section-4,
    .desktop .download-container,
    .desktop .why-klik-container,
    .desktop .section-5 {
      padding: 25px 10px;
    }
    
    .desktop .services-cards {
      gap: 15px;
    }
    
    .desktop .card {
      max-width: 300px;
    }
    
    .desktop .overlap-5,
    .desktop .frame-11 {
      gap: 25px;
    }
    
    .desktop .overlap-group-2 {
      gap: 25px;
    }
    
    .desktop .request,
    .desktop .dispatch,
    .desktop .delivery {
      max-width: 240px;
      padding: 12px;
    }
    
    .desktop .frame-12 {
      gap: 25px;
    }
    
    .desktop .img-3,
    .desktop .right-app-view,
    .desktop .why-klik-hero {
      max-width: 220px;
    }
    
    .desktop .download-container,
    .desktop .why-klik-container {
      gap: 25px;
    }
    
    .desktop .frame-17,
    .desktop .deep-foot,
    .desktop .frame-32 {
      gap: 20px;
    }
  }
  
  /* Mobile overrides for iPhone 14 Pro Max and similar */
  @media (max-width: 768px) {
    /* 1) Universal 28px padding for main sections */
    .desktop .hero-section,
    .desktop .about-container,
    .desktop .services-container,
    .desktop .section-3,
    .desktop .section-4,
    .desktop .download-container,
    .desktop .why-klik-container,
    .desktop .section-5 {
      padding: 28px 28px;
    }

    /* Ensure no cropping: allow overflow and auto heights */
    .desktop .section,
    .desktop .section-2,
    .desktop .section-3,
    .desktop .section-4,
    .desktop .download-app-section,
    .desktop .section-5 {
      overflow: visible !important;
      height: auto;
    }

    /* 2) Hero: left-align, wrap, buttons below */
    .desktop .overlap,
    .desktop .overlap-group {
    display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 100%;
      height: auto;
      position: relative;
      top: auto;
      left: auto;
      transform: none;
      gap: 20px;
    }
    .desktop .one-klik-is-all-it {
      text-align: left;
      width: 100%;
      white-space: normal;
      word-wrap: break-word;
      word-break: break-word;
      font-size: 42px;
      line-height: 1.2;
      order: 1;
      margin-bottom: 0;
    }
    .desktop .p {
      text-align: left;
      width: 100%;
      font-size: 24px;
      line-height: 1.4;
      order: 2;
      margin-bottom: 0;
    }
    .desktop .btns {
      align-items: flex-start;
      width: 100%;
      order: 3;
      margin-top: 10px;
    }

    /* 3) Services: full viewport height, fix overlap */
    .desktop .section-2 { min-height: 100vh; min-height: 100dvh; }
    .desktop .services-container { min-height: 100%; }
    .desktop .text-wrapper-9,
    .desktop .text-wrapper-13 {
      position: static !important;
      display: block;
      margin: 0 0 12px 0;
      text-align: center;
    }
    .desktop .services-header { text-align: center; }
    .desktop .services-subtext { 
      margin-bottom: 16px; 
      text-align: center;
    }
    .desktop .services-cards { width: 100%; }

    /* 4) Why Klik: full viewport height, left aligned text */
    .desktop .why-klik-section { min-height: 100vh; min-height: 100dvh; }
    .desktop .why-klik-container { 
      align-items: flex-start; 
      padding-bottom: 15px;
    }
    .desktop .frame-6 { align-items: flex-start; text-align: left; }
    .desktop .faster-deliveries,
    .desktop .text-wrapper-15,
    .desktop .partner-first-tools { text-align: left; }
    .desktop .why-klik-hero {
      width: 100%;
      max-width: 350px;
      height: auto;
    }

    /* 5) Download App: tighten spacing */
    .desktop .download-container { gap: 20px; }
    .desktop .frame-14 { gap: 20px; }
    .desktop .frame-16 { gap: 12px; }

    /* 6) Footer: left align intro, hide deep-foot illustration, center rights */
    .desktop .text-wrapper-33 { text-align: left; }
    .desktop .deep-foot .frame-21 { display: none; }
    .desktop .deep-foot .text-wrapper-42 { text-align: center; margin: 0 auto; display: block; }
  }