@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200..800&display=swap');


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Oxanium", sans-serif;
  }

  .center_items { display: flex; justify-content: center; align-items: center; margin: auto; }

  a.FooterLink:link { color: #f5f4f4; font-size: 15px; font-weight: 400; text-decoration: none; }
  a.FooterLink:visited { color: #f5f4f4; font-size: 15px; font-weight: 400; text-decoration: none; }
  a.FooterLink:active { color: #f5f4f4; font-size: 15px; font-weight: 400; text-decoration: none; }
  a.FooterLink:hover { color: #f5f4f4; font-size: 15px; font-weight: 400; text-decoration: none; }

  .textbox_1 { flex: 1; width: 50%; padding: 12px 16px; margin-bottom: 20px;
                  border: 1px solid #ddd;
                  border-radius: 8px;
                  font-size: 14px;
                  font-family: "Oxanium", sans-serif;
                  outline: none;
                  transition: border-color 0.3s ease; }

.button_1 {
			padding: 12px 20px; margin-top: 75px;
			border-radius: 5px;
			background: #2b3b91;
			border: none;
			cursor: pointer;
			transition: background-color 0.3s ease;
			color: #fff;
			font-size: 16px;
			font-weight: 500;
		  }
  .button_1:hover {
	background: #17bfa9;
  }



  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  .wrapper {
    width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body {
    background-color: white;
    header {
      .header-content {
        width: 100%;
        display: flex;
		text-align: center;
        justify-content: space-between;
        align-items: center;
        padding: 20px 0;
        img {
          width: 200px;
        }
        a {
          display: flex;
          padding: 10px 20px;
          justify-content: center;
          align-items: center;
          gap: 10px;
          border-radius: 100px;
          background: #17bfa9;
          color: #f5f4f4;
          text-align: center;
          font-family: Poppins;
          font-size: 16px;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          border: none;
          cursor: pointer;
          transition: all 0.3s ease;
          text-decoration: none;
        }
        a:hover {
          background: #15b300;
          transform: translateY(-2px);
          box-shadow: 0px 4px 12px rgba(23, 202, 0, 0.3);
        }
      }
    }
    .hero-section {
      background: linear-gradient(180deg, #003049 0%, #2b3b91 100%);
      padding: 120px 0px;
      overflow: hidden;
      .hero-content {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        .left-hero {
          width: 55%;
          z-index: 10;
          span {
            padding: 10px 20px;
            align-items: center;
            gap: 10px;
            border-radius: 100px;
            border: 1px solid #17bfa9;;
            color: #f5f4f4;
            font-size: 14px;
            font-weight: 400;
          }
          h1 {
            color: #fff;
            font-size: 44px;
            font-weight: 600;
            line-height: 120%;
            margin-top: 36px;
          }
          p {
            color: #fff;
            font-size: 16px;
            font-weight: 400;
            line-height: 158%;
            margin-top: 36px;
          }
          .hero-buttons {
            margin-top: 36px;
            .get-started {
              background-color: white;
              padding: 10.167px 24.333px;
              border-radius: 121.667px;
              border: 1.217px solid #fff;
              background: #fff;
              color: #17bfa9;
              font-size: 18px;
              font-weight: 600;
              text-decoration: none;
              cursor: pointer;
              transition: all 0.3s ease;
            }
            .get-started:hover {
              background: #f0f0f0;
              transform: translateY(-2px);
              box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.4);
            }
            .free-trial {
              padding: 10.167px 24.333px;
              border-radius: 121.667px;
              border: 1.217px solid #fff;
              background: transparent;
              color: #fff;
              font-size: 18px;
              font-weight: 600;
              text-decoration: none;
              margin-left: 10px;
              cursor: pointer;
              transition: all 0.3s ease;
            }
            .free-trial:hover {
              background: rgba(255, 255, 255, 0.1);
              transform: translateY(-2px);
              box-shadow: 0px 4px 12px rgba(255, 255, 255, 0.2);
            }
          }
        }
        .right-hero {
          width: 45%;
          position: relative;
          z-index: 2;
          img {
            width: 100%;
            height: auto;
            position: relative;
            z-index: 2;
          }
        }
        .right-hero::before {
          content: "";
          position: absolute;
          top: -110px;
          left: -50px;
          width: 600px;
          height: 600px;
          border-radius: 50%;
          background: #092fab;
          filter: blur(106.6500015258789px);
          z-index: -1;
          pointer-events: none;
        }
        .right-hero::after {
          content: "";
          position: absolute;
          top: -150px;
          left: 120px;
          width: 812px;
          height: 812px;
          border-radius: 812px;
          background: rgba(255, 255, 255, 0.1);
          z-index: -2;
          pointer-events: none;
        }
      }
    }
    .benefits-section {
      padding: 60px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      background: #f5f4f4;
      span {
        width: 101px;
        padding: 10px 20px;
        gap: 10px;
        border-radius: 100px;
        border: 0.5px solid #17bfa9;
        color: #17bfa9;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
      }
      h2 {
        color: #000;
        text-align: center;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
      }
      .benefits-container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px;
        margin-top: 14px;
        .benefit-item1 {
          display: flex;
          padding: 24px 12px;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-radius: 8px;
          background: #fff;
          box-shadow: 0px 4px 14.5px 0px rgba(0, 0, 0, 0.14);
          .benefit-icon {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            h3 {
              color: #2b3b91;
              font-size: 18px;
              font-weight: 600;
              text-align: start;
            }
            svg {
              width: 32px;
              height: 36px;
            }
          }
          p {
            color: #000;
            font-size: 14px;
            font-weight: 400;
            margin-top: 15px;
          }
        }
        .benefit-item2 {
          display: flex;
          padding: 24px 12px;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          border-radius: 8px;
          background: #17bfa9;
          box-shadow: 0px 4px 14.5px 0px rgba(0, 0, 0, 0.14);
          .benefit-icon {
            width: 100%;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 23px;
            h3 {
              color: #fff;
              font-size: 18px;
              font-weight: 600;
              text-align: start;
            }
            svg {
              width: 32px;
              height: 36px;
            }
          }
          p {
            color: #fff;
            font-size: 14px;
            font-weight: 400;
            margin-top: 15px;
          }
        }
      }
    }
    .accessibility-top {
      overflow: hidden;
      .accessibility-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 60px 0px;
        .left-accessibility {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: center;
          position: relative;
          gap: 16px;
          width: 55%;
          span {
            padding: 10px 20px;
            border-radius: 100px;
            border: 1px solid #17bfa9;
            color: #17bfa9;
            text-align: center;
            font-size: 18px;
            font-weight: 600;
          }
          h2 {
            color: #000;
            font-size: 48px;
            font-weight: 600;
            line-height: 120%;
          }
          p {
            color: #000;
            font-size: 16px;
            font-weight: 400;
            line-height: 158%;
          }
          a {
            padding: 10px 20px;
            gap: 10px;
            border-radius: 100px;
            border: 1px solid var(--primary, #2b3b91);
            background: #26264f;
            color: #fff;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.3s ease;
          }
          a:hover {
            background: #1e1e40;
            transform: translateY(-2px);
            box-shadow: 0px 4px 12px rgba(43, 59, 145, 0.3);
          }
        }
        .left-accessibility::after {
          content: "";
          position: absolute;
          top: -120px;
          left: -380px;
          width: 572px;
          height: 572px;
          border-radius: 572px;
          background: linear-gradient(
            180deg,
            rgba(43, 59, 145, 0.17) 0%,
            rgba(245, 244, 244, 0.17) 100%
          );
          z-index: -2;
          pointer-events: none;
        }
        .right-accessibility {
          width: 45%;
          position: relative;
          img {
            width: 100%;
            height: auto;
          }
        }
        .right-accessibility::after {
          content: "";
          position: absolute;
          top: -50px;
          left: -20px;
          width: 572px;
          height: 572px;
          border-radius: 572px;
          background: #f5f4f4;
          z-index: -2;
          pointer-events: none;
        }
      }
    }
    .works-section {
      background: #f5f4f4;
      padding-top: 60px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      span {
        padding: 10px 20px;
        border-radius: 100px;
        border: 1px solid #17bfa9;
        color: #17bfa9;
        text-align: center;
        font-size: 18px;
      }
      h2 {
        color: #000;
        text-align: center;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
        font-weight: 600;
        z-index: 10;
		padding-top: 10px;
      }
      .works {
        background-image: url("../_imgs/work-bg.png");
        background-repeat: no-repeat;
        background-size: contain;
        margin-top: 100px;
        .works-content {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          .work1 {
            flex: 1;
            position: relative;
            margin-top: 200px;
            margin-left: 100px;
            z-index: 1;

            h3 {
              color: #000;
              font-size: 24px;
              font-weight: 600;
            }
            p {
              color: #000;
              font-size: 16px;
              line-height: 158%;
            }
          }
          .work1::before {
            content: "1";
            position: absolute;
            font-family: Inter;
            font-size: 269.67px;
            font-style: normal;
            font-weight: 500;
            background: linear-gradient(180deg, #b9b9b9 0%, #fff 86.54%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            top: -150px;
            left: -50px;
            width: 350px;
            height: 350px;
            z-index: -1;
          }
          .work2 {
            flex: 1;
            position: relative;
            margin-bottom: 250px;
            margin-left: 50px;
            z-index: 1;
            h3 {
              color: #000;
              font-size: 22px;
              font-weight: 600;
            }
            p {
              color: #000;
              font-size: 15px;
              line-height: 158%;
            }
          }
          .work2::before {
            content: "2";
            position: absolute;
            font-family: Inter;
            font-size: 269.67px;
            font-style: normal;
            font-weight: 500;
            background: linear-gradient(180deg, #b9b9b9 0%, #fff 86.54%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            top: -120px;
            left: -50px;
            width: 350px;
            height: 350px;
            z-index: -1;
          }
          .work3 {
            flex: 1;
            position: relative;
            margin-top: 250px;
            padding-bottom: 50px;
            z-index: 1;
            h3 {
              color: #000;
              font-size: 22px;
              font-weight: 600;
            }
            p {
              color: #000;
              font-size: 15px;
              line-height: 158%;
            }
          }
          .work3::before {
            content: "3";
            position: absolute;
            font-family: Inter;
            font-size: 269.67px;
            font-style: normal;
            font-weight: 500;
            background: linear-gradient(180deg, #b9b9b9 0%, #fff 86.54%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            top: -110px;
            left: -50px;
            width: 350px;
            height: 350px;
            z-index: -1;
          }
        }
      }
      .mobile-works {
        display: none;
      }
    }
    .testimonial-section {
      padding: 80px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      background: linear-gradient(180deg, #003049 0%, #2b3b91 100%);
      span {
        padding: 10px 20px;
        gap: 10px;
        border-radius: 100px;
        border: 1px solid #17bfa9;;
        color: #17bfa9;;
        text-align: center;
        font-size: 18px;
        font-weight: 600;
        z-index: 1;
      }
      h2 {
        z-index: 1;
        color: #f5f4f4;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
      }
      p {
        color: #f5f4f4;
        font-size: 16px;
        line-height: 158%;
        z-index: 1;
      }
      .testimonials {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 36px;
        margin-top: 36px;
        .testimonial {
          display: flex;
          height: 188px;
          padding: 16px 38px;
          justify-content: center;
          align-items: center;
          gap: 22px;
          border-radius: 16px;
          border-left: 4px solid #17bfa9;
          background: #fff;
          img {
            width: 101px;
            min-width: 101px;
            height: 101px;
            border-radius: 50%;
            object-fit: cover;
          }
          .testimonial-content {
            h4 {
              color: #2b3b91;
              font-size: 24px;
              font-weight: 600;
            }
            h5 {
              color: #8d8d8d;
              font-size: 12px;
              line-height: 158%;
              font-weight: 400;
            }
            h6 {
              color: #2b3b91;
              font-size: 15px;
              line-height: 130%;
              margin-top: 16px;
              font-weight: 400;
            }
          }
        }
      }

      .testimonials::before {
        content: "‟";
        position: absolute;
        top: -300px;
        left: 0;
        z-index: 1;
        border-radius: 16px;
        width: 206px;
        height: 300.336px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold",
          sans-serif;
        font-size: 519.177px;
        font-weight: 500;
        background: linear-gradient(180deg, #003049 0%, #2b3b91 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 0;
      }
      .testimonials::after {
        content: "‟";
        position: absolute;
        transform: rotate(-180deg);
        top: -250px;
        right: 0;
        z-index: 1;
        border-radius: 16px;
        width: 206px;
        height: 300.336px;
        font-family: Impact, Haettenschweiler, "Arial Narrow Bold",
          sans-serif;
        font-size: 519.177px;
        font-weight: 500;
        background: linear-gradient(180deg, #003049 0%, #2b3b91 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        z-index: 0;
      }
    }
    .trust-section {
      padding: 80px 0px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      span {
        text-align: center;
        width: 101px;
        padding: 10px 20px;
        gap: 10px;
        border-radius: 100px;
        border: 1px solid #2b3b91;
        font-size: 18px;
        font-weight: 600;
      }
      h2 {
        color: #000;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
      }
      .trust-container {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        margin-top: 26px;
        gap: 35px;
        .left-trust {
          width: 50%;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          gap: 38px;
          .trust {
            display: flex;
            padding: 24px;
            align-items: center;
            gap: 29px;
            border-radius: 16px;
            background: #fff;
            box-shadow: 0px 8px 27.9px 0px rgba(0, 0, 0, 0.09);
            width: 100%;
            svg {
              width: 64px;
              height: 64px;
              padding: 15px;
              object-fit: contain;
              border-radius: 50%;
              background: #2b3b91;
              box-shadow: 0px 4px 6.5px 0px rgba(0, 0, 0, 0.11);
            }

            p {
              color: #000;
              font-size: 18px;
              font-weight: 500;
            }
          }
          .trust1 {
            svg {
              background-color: #17bfa9;
            }
          }
        }
        .right-trust {
          width: 50%;
          img {
            width: 100%;
            height: auto;
          }
        }
      }
    }
    .contact-section {
      padding: 60px 0px;
      background: #f5f4f4;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      overflow: hidden;
      span {
        padding: 10px 20px;
        border-radius: 100px;
        border: 1px solid #17bfa9;
        color: #17bfa9;
        font-size: 18px;
        font-weight: 600;
      }
      h2 {
        color: #000;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
      }
      p {
        color: #000;
        font-size: 18px;
        font-weight: 600;
      }
      .form-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
        width: 100%;
        gap: 20px;
        margin-top: 40px;
        .form-left {
          width: 40%;
          position: relative;
          background: var(
            --primary-gradient,
            linear-gradient(180deg, #003049 0%, #2b3b91 100%)
          );
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: flex-start;
          padding: 20px;
          border-radius: 15px;
          gap: 10px;
          h3 {
            color: #f5f4f4;
            font-size: 20px;
            font-weight: 600;
          }
          h4 {
            color: #c9c9c9;
            font-size: 16px;
            font-weight: 400;
          }
          .form-contact {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: center;
            margin-top: 40px;
            gap: 20px;
            .contact {
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: center;
              gap: 30px;
              color: #f5f4f4;
              font-size: 16px;
              font-weight: 400;
              line-height: 158%;
              p {
                color: #f5f4f4;
                font-size: 16px;
                font-weight: 400;
                line-height: 158%;
              }
            }
          }
          .social-icons {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: center;
            gap: 10px;
            margin-top: 120px;
            a {
              transition: all 0.3s ease;
              padding: 5px;
              border-radius: 50%;
            }
            a:hover {
              background: rgba(255, 255, 255, 0.1);
              transform: translateY(-2px);
            }
            i {
              width: 35px;
              height: 35px;
              color: white;
              transition: all 0.3s ease;
            }
            i:hover {
              transform: scale(1.1);
            }
          }
        }
        .form-left::before {
          content: "";
          position: absolute;
          bottom: 20px;
          right: 30px;
          width: 150px;
          height: 150px;
          border-radius: 269px;
          background: rgba(255, 255, 255, 0.12);
          z-index: 2;
          pointer-events: none;
        }
        .form-left::after {
          content: "";
          position: absolute;
          bottom: -100px;
          right: -70px;
          width: 300px;
          height: 300px;
          border-radius: 400px;
          background: rgba(255, 255, 255, 0.1);
          z-index: 1;
          pointer-events: none;
        }

        .form-right {
          width: 60%;
          border-radius: 8px;
          background: #fff;
          box-shadow: 3px 4px 12px 0px rgba(0, 0, 0, 0.11);
          padding: 20px;
          height: 100%;
          h2 {
            color: #000;
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 20px;
          }
          .contact-form {
            form {
              .form-row {
                display: flex;
                gap: 15px;
                margin-bottom: 20px;
                input,
                textarea {
                  flex: 1;
                  padding: 12px 16px;
                  border: 1px solid #ddd;
                  border-radius: 8px;
                  font-size: 14px;
                  font-family: "Oxanium", sans-serif;
                  outline: none;
                  transition: border-color 0.3s ease;
                }
                input:focus,
                textarea:focus {
                  border-color: #2b3b91;
                }
                textarea {
                  resize: vertical;
                  min-height: 150px;
                }
              }
              button {
                padding: 12px 20px;
                border-radius: 5px;
                background: #2b3b91;
                border: none;
                cursor: pointer;
                transition: background-color 0.3s ease;
                color: #fff;
                font-size: 16px;
                font-weight: 500;
              }
              button:hover {
                background: #15b300;
              }
            }
          }
        }
      }
    }
    .trial-section {
      background: var(
        --primary-gradient,
        linear-gradient(180deg, #003049 0%, #2b3b91 100%)
      );
      padding: 60px 0px;
      span {
        color: #17bfa9;
        font-size: 18px;
        font-weight: 600;
        padding: 10px 20px;
        gap: 10px;
        border-radius: 100px;
        border: 1px solid #17bfa9;
      }
      h2 {
        color: #f5f4f4;
        font-size: 48px;
        font-weight: 600;
        line-height: 120%;
        margin-top: 20px;
        max-width: 800px;
        text-align: center;
      }
      p {
        color: #f5f4f4;
        font-size: 16px;
        font-weight: 400;
        line-height: 158%;
        margin-top: 20px;
      }
      a {
        padding: 10px 20px;
        border-radius: 100px;
        border: 1px solid #17bfa9;
        background: #17bfa9;
        color: #f5f4f4;
        font-size: 20px;
        font-weight: 500;
        text-decoration: none;
        margin-top: 20px;
        transition: all 0.3s ease;
      }
      a:hover {
        background: #15b300;
        transform: translateY(-2px);
        box-shadow: 0px 4px 12px rgba(23, 202, 0, 0.3);
      }
    }
    .footer-content {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      padding: 50px;
      gap: 20px;
      width: 100%;
      .footer1 {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        p {
          color: #615e5b;
          font-size: 14px;

          font-weight: 400;
          line-height: 158%;
        }
        .footer-icons {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: center;
          gap: 20px;
          margin-top: 10px;

          a {
            transition: all 0.3s ease;
          }
          a:hover {
            transform: translateY(-3px);
          }
          i {
            font-size: 35px;
            color: black;
            transition: all 0.3s ease;
          }
          i:hover {
            color: #17bfa9;
            transform: scale(1.1);
          }
        }
      }
      .footer2 {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        img {
          width: 207px;
          height: auto;
          margin-top: 0px;
        }
      }
      .footer3 {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
        p {
          color: #202020;
          font-size: 24px;
          font-weight: 400;
          line-height: 135%;
        }
        a {
          border-radius: 8px;
          background: #2b3b91;
          color: #fff;
          font-size: 18px;
          font-weight: 400;
          line-height: 30px;
          text-decoration: none;
          padding: 10px 20px;
          margin-top: 20px;
          transition: all 0.3s ease;
        }
        a:hover {
          background: #1e2b6b;
          transform: translateY(-2px);
          box-shadow: 0px 4px 12px rgba(43, 59, 145, 0.3);
        }
      }
    }
    .mini-footer {
      background: #202020;
      padding: 20px 0px;
      span {
        color: #fff;
        font-size: 14px;
        font-weight: 400;
      }
    }
  }

  /* Media query for large screens */
  @media screen and (max-width: 1100px) {
    .wrapper {
      width: 90%;
    }
  }

  /* Tablet styles */
  @media screen and (max-width: 1024px) {
    body {
      .hero-section {
        padding: 80px 0px;
        .hero-content {
          flex-direction: column-reverse;
          gap: 40px;
          text-align: center;
          .left-hero {
            width: 100%;
            align-items: center;
            h1 {
              font-size: 36px;
            }
            .hero-buttons {
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              justify-content: center;
              gap: 15px;
              .free-trial {
                margin-left: 0;
              }
            }
          }
          .right-hero {
            width: 70%;
          }
        }
      }

      .benefits-section {
        .benefits-container {
          grid-template-columns: repeat(2, 1fr);
          gap: 24px;
        }
      }

      .accessibility-top {
        .accessibility-section {
          flex-direction: column-reverse;
          gap: 40px;
          text-align: center;
          .left-accessibility {
            width: 100%;
            align-items: center;
            h2 {
              font-size: 36px;
            }
          }
          .right-accessibility {
            width: 80%;
          }
        }
      }

      .testimonial-section {
        h2 {
          font-size: 36px;
        }
        .testimonials {
          flex-direction: column;
          gap: 24px;
        }
      }

      .trust-section {
        h2 {
          font-size: 36px;
        }
      }

      .contact-section {
        h2 {
          font-size: 36px;
        }
        .form-container {
          gap: 30px;
          .form-left,
          .form-right {
            width: 100%;
          }
          .form-left {
            .form-contact {
              margin-top: 60px;
            }
            .social-icons {
              margin-top: 60px;
            }
          }
        }
      }

      .trial-section {
        h2 {
          font-size: 36px;
        }
      }

      .footer-content {
        .footer1,
        .footer2,
        .footer3 {
          width: 100%;
        }
        .footer2 img {
          margin-top: 20px;
        }
      }
    }
  }

  /* Mobile styles */
  @media screen and (max-width: 768px) {
    body {
      header {
        .header-content {
          gap: 20px;
          text-align: center;
          img {
            width: 250px;
          }
        }
      }

      .hero-section {
        padding: 60px 0px;
        .hero-content {
          .left-hero {
            h1 {
              font-size: 28px;
            }
            p {
              font-size: 14px;
            }
            .hero-buttons {
              flex-direction: column-reverse;
              .get-started,
              .free-trial {
                text-align: center;
                padding: 12px 20px;
              }
              .get-started {
                width: fit-content;
              }
            }
          }
          .right-hero {
            width: 90%;
          }
        }
      }

      .benefits-section {
        padding: 40px 0px;
        h2 {
          font-size: 32px;
        }
        .benefits-container {
          grid-template-columns: 1fr;
          gap: 20px;
        }
      }

      .accessibility-top {
        .accessibility-section {
          padding: 40px 0px;
          .left-accessibility {
            h2 {
              font-size: 28px;
            }
            p {
              font-size: 14px;
            }
          }
          .right-accessibility {
            width: 100%;
          }
        }
      }

      .works-section {
        padding-top: 40px;
        h2 {
          font-size: 32px;
        }
        .works {
          display: none;
        }
        .mobile-works {
          display: flex;
          flex-direction: column;
          gap: 50px;
          padding: 40px 0px;
          max-width: 400px;
          margin: 0 auto;
        }

        .mobile-work1,
        .mobile-work2,
        .mobile-work3 {
          display: flex;
          align-items: center;
          gap: 50px;
          position: relative;
          padding: 0;
          background: transparent;
        }

        /* Large background numbers using ::before */
        .mobile-work1::before,
        .mobile-work2::before,
        .mobile-work3::before {
          content: "";
          position: absolute;
          left: 100px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 140px;
          font-weight: 900;
          color: rgba(200, 200, 200, 0.3);
          z-index: 0;
          font-family: "Arial", sans-serif;
          line-height: 1;
        }

        .mobile-work1::before {
          content: "1";
        }

        .mobile-work2::before {
          content: "2";
        }

        .mobile-work3::before {
          content: "3";
        }

        /* Icon container styling */
        .mobile-work1 > svg,
        .mobile-work2 > svg,
        .mobile-work3 > svg {
          background: #f5f4f4;
          padding: 18px;
          border-radius: 50%;
          flex-shrink: 0;
          z-index: 1;
          position: relative;
          width: 70px;
          height: 70px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
        }

        /* Content styling */
        .mobile-work1 > div,
        .mobile-work2 > div,
        .mobile-work3 > div {
          flex: 1;
          z-index: 1;
          position: relative;
        }

        .mobile-work1 h3,
        .mobile-work2 h3,
        .mobile-work3 h3 {
          margin: 0 0 10px 0;
          font-size: 20px;
          font-weight: 600;
          color: #000;
          line-height: 1.2;
        }

        .mobile-work1 p,
        .mobile-work2 p,
        .mobile-work3 p {
          margin: 0;
          font-size: 15px;
          color: #666;
          line-height: 1.4;
        }
      }

      .testimonial-section {
        padding: 60px 0px;
        h2 {
          font-size: 32px;
        }
        .testimonials {
          .testimonial {
            height: auto;
            padding: 20px;
            img {
              width: 80px;
              height: 80px;
              min-width: 80px;
              border-radius: 50%;
            }
            .testimonial-content {
              h4 {
                font-size: 20px;
              }
              h6 {
                font-size: 14px;
              }
            }
          }
        }
        .testimonials::after {
          display: none;
        }
      }

      .trust-section {
        padding: 60px 0px;
        h2 {
          font-size: 32px;
        }
        .trust-container {
          flex-direction: column-reverse;
          gap: 40px;
          .left-trust {
            width: 100%;
            .trust {
              gap: 15px;
              svg {
                width: 48px;
                height: 48px;
              }
              p {
                font-size: 16px;
              }
            }
          }
          .right-trust {
            width: 80%;
          }
        }
      }

      .contact-section {
        padding: 40px 0px;
        h2 {
          font-size: 32px;
        }
        .form-container {
          flex-direction: column;
          gap: 40px;
          .form-right {
            .contact-form {
              form {
                .form-row {
                  flex-direction: column;
                  gap: 15px;
                }
              }
            }
          }
        }
      }

      .trial-section {
        padding: 40px 0px;
        h2 {
          font-size: 32px;
        }
      }

      .footer-content {
        flex-direction: column;
        padding: 30px 20px;
        .footer1 {
          align-items: center;
          text-align: center;
          order: 2;
        }
        .footer2 img {
          width: 150px;
          order: 1;
        }
        .footer3 {
          margin-top: 10px;
          order: 3;
          align-items: center;
          text-align: center;
          p {
            font-size: 20px;
          }
          a {
            font-size: 16px;
            margin-top: 0px;
          }
        }
      }
    }
  }

  /* Small mobile styles */
  @media screen and (max-width: 480px) {
    body {
      header {
        .header-content {
          padding: 15px 0;
          img {
            width: 200px;
          }
          a {
            padding: 8px 16px;
            font-size: 14px;
          }
        }
      }

      .hero-section {
        padding: 40px 0px;
        .hero-content {
          .left-hero {
            h1 {
              font-size: 24px;
              line-height: 130%;
            }
            p {
              font-size: 15px;
            }
            span {
              font-size: 14px;
              padding: 8px 16px;
            }
            .hero-buttons {
              .get-started,
              .free-trial {
                font-size: 16px;
                padding: 10px 18px;
              }
            }
          }
        }
      }

      .benefits-section {
        padding: 30px 0px;
        span {
          font-size: 16px;
          padding: 8px 16px;
        }
        h2 {
          font-size: 28px;
        }
        .benefits-container {
          gap: 16px;
          .benefit-item1,
          .benefit-item2 {
            padding: 20px 10px;
            .benefit-icon {
              h3 {
                font-size: 16px;
              }
            }
            p {
              font-size: 13px;
            }
          }
        }
      }

      .accessibility-top {
        .accessibility-section {
          padding: 30px 0px;
          .left-accessibility {
            span {
              font-size: 16px;
              padding: 8px 16px;
            }
            h2 {
              font-size: 24px;
            }
            p {
              font-size: 13px;
            }
            a {
              font-size: 16px;
              padding: 8px 16px;
            }
          }
        }
      }

      .works-section {
        span {
          font-size: 16px;
          padding: 8px 16px;
        }
        h2 {
          font-size: 28px;
        }
      }

      .testimonial-section {
        padding: 40px 0px;
        span {
          font-size: 16px;
          padding: 8px 16px;
        }
        h2 {
          font-size: 28px;
        }
        p {
          font-size: 14px;
        }
        .testimonials {
          .testimonial {
            padding: 16px;
            .testimonial-content {
              h4 {
                font-size: 18px;
              }
              h5 {
                font-size: 11px;
              }
              h6 {
                font-size: 13px;
              }
            }
          }
        }
      }

      .trust-section {
        padding: 40px 0px;
        span {
          padding: 8px 16px;
          font-size: 16px;
        }
        h2 {
          font-size: 28px;
        }
        .trust-container {
          .left-trust {
            .trust {
              padding: 16px;
              p {
                font-size: 14px;
              }
            }
          }
        }
      }

      .contact-section {
        padding: 30px 0px;
        span {
          font-size: 16px;
          padding: 8px 16px;
        }
        h2 {
          font-size: 28px;
        }
        p {
          font-size: 16px;
        }
        .form-container {
          margin-top: 30px;
          .form-left {
            padding: 16px;
            h3 {
              font-size: 18px;
            }
            h4 {
              font-size: 14px;
            }
            .form-contact {
              margin-top: 20px;
              gap: 10px;
              .contact {
                gap: 20px;
                p {
                  font-size: 14px;
                }
              }
            }
            .social-icons {
              margin-top: 40px;
              i {
                width: 30px;
                height: 30px;
                font-size: 20px;
              }
            }
          }
          .form-right {
            padding: 16px;
            h2 {
              font-size: 16px;
            }
          }
        }
      }

      .trial-section {
        padding: 40px 0px;
        span {
          font-size: 16px;
          padding: 8px 16px;
        }
        h2 {
          font-size: 28px;
        }
        p {
          font-size: 14px;
        }
        a {
          font-size: 18px;
          padding: 8px 16px;
        }
      }

      .footer-content {
        padding: 20px 15px;
        .footer1 {
          p {
            font-size: 13px;
          }
          .footer-icons {
            i {
              font-size: 28px;
            }
          }
        }
        .footer2 img {
          width: 120px;
        }
        .footer3 {
          p {
            font-size: 18px;
          }
          a {
            font-size: 14px;
            padding: 8px 16px;
          }
        }
      }

      .mini-footer {
        padding: 15px 0px;
        span {
          font-size: 12px;
        }
      }
    }
  }