@media screen and (min-width: 1024px) {
  html,
  body {
    overflow-x: hidden;
  }

  #root {
    min-width: 0;
  }

  .container,
  .nav-container {
    width: min(100% - 56px, 1240px) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nav-wrapper {
    min-height: 78px;
    padding: 14px clamp(32px, 4vw, 64px) !important;
  }

  .nav-menu {
    column-gap: clamp(24px, 2.2vw, 36px);
  }

  .hero-wrapper {
    min-height: clamp(720px, calc(100svh - 32px), 920px);
  }

  .hero-content-wrap {
    width: 100%;
    min-height: clamp(620px, calc(100svh - 150px), 820px);
    justify-content: center !important;
    padding-top: clamp(120px, 13vh, 180px) !important;
    padding-bottom: clamp(96px, 11vh, 160px) !important;
  }

  .hero-title-wrap {
    width: min(100%, 1120px);
    margin-left: auto;
    margin-right: auto;
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(48px, 4.1vw, 68px) !important;
    line-height: 1.04 !important;
    letter-spacing: 0 !important;
  }

  .hero-text-wrap,
  .feature-text-wrap,
  .blog-text-wrap,
  .tools-item-text-wrap,
  .pricing-text-wrap,
  .faqs-text-wrap,
  .testimonials-text-wrap,
  .achievement-text-wrap,
  .team-text-wrap {
    width: min(100%, 680px) !important;
  }

  .hero-text {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(17px, 1.18vw, 20px) !important;
    line-height: 1.62 !important;
  }

  .hero-badge-wrapper .badge-one-wrapper,
  .hero-badge-wrapper .badge-two-wrapper {
    width: clamp(140px, 10vw, 188px) !important;
    height: clamp(140px, 10vw, 188px) !important;
  }

  .hero-badge-wrapper .badge-one-wrapper {
    left: max(24px, 3vw) !important;
    bottom: clamp(96px, 12vh, 150px) !important;
  }

  .hero-badge-wrapper .badge-two-wrapper {
    right: max(24px, 3vw) !important;
    bottom: clamp(104px, 13vh, 170px) !important;
  }

  .hero-ticker-title,
  .ticker-wrapper {
    margin-left: auto;
    margin-right: auto;
  }

  .feature,
  .tools,
  .pricing,
  .faqs,
  .testimonials,
  .about,
  .achievement,
  .team,
  .integration-tools,
  .framework-one,
  .framework-two,
  .blogs,
  .helps,
  .contact,
  .blog-details,
  .contact-section,
  .contact-form-section {
    padding-top: clamp(88px, 8vw, 136px) !important;
    padding-bottom: clamp(88px, 8vw, 136px) !important;
  }

  .feature-top-wrapper,
  .tools-item-top-wrapper,
  .pricing-top-wrapper,
  .faqs-top-wrapper,
  .testimonials-top-wrapper,
  .blog-top-wrapper,
  .achievement-top-wrapper,
  .team-top-wrapper {
    margin-bottom: clamp(34px, 3.2vw, 56px) !important;
  }

  .feature-card-grid-wrap,
  .pricing-cards-grid-wrap,
  .testimonials-items-top-grid-wrap,
  .testimonials-items-bottom-grid-wrap,
  .team-cards-wrapper,
  .integration-tools-items-grid-wrap,
  .contact-info-grid,
  .contact-locations-grid {
    gap: clamp(18px, 1.6vw, 28px) !important;
  }

  .feature-card-grid-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .feature-card-one,
  .feature-card-two,
  .feature-card-three,
  .feature-card-four,
  .feature-card-five,
  .feature-card-six,
  .pricing-card,
  .testimonial-card-one,
  .testimonial-card-two,
  .about-card-one,
  .about-card-two,
  .about-card-three,
  .integration-item,
  .blog-single-card,
  .contact-card,
  .contact-location-card {
    border-radius: 16px !important;
  }

  .feature-card-one,
  .feature-card-three,
  .feature-card-four,
  .feature-card-six,
  .pricing-card,
  .testimonial-card-two,
  .integration-item {
    padding: clamp(28px, 2.2vw, 40px) !important;
  }

  .feature-card-one {
    padding-top: clamp(150px, 11vw, 190px) !important;
  }

  .feature-two-card-content-grid-wrap {
    align-items: center;
    gap: clamp(32px, 3.2vw, 56px) !important;
  }

  .feature-two-card-leftwrap {
    padding-left: clamp(32px, 4vw, 64px) !important;
  }

  .tools-single-card {
    min-height: clamp(360px, 30vw, 500px);
    padding: clamp(96px, 9vw, 160px) clamp(64px, 7vw, 130px) !important;
  }

  .tools-item-gird-wrap {
    gap: clamp(28px, 3vw, 46px) !important;
  }

  .tools-icon-wrap {
    width: clamp(88px, 7vw, 116px) !important;
    height: clamp(88px, 7vw, 116px) !important;
  }

  .about-content-grid-wrap {
    grid-template-columns: minmax(360px, 0.48fr) minmax(0, 1fr) !important;
    gap: clamp(18px, 1.6vw, 28px) !important;
    align-items: stretch;
  }

  .about-right-wrapper {
    gap: clamp(18px, 1.6vw, 28px) !important;
  }

  .about-card-two {
    gap: clamp(44px, 5vw, 80px) !important;
  }

  .about-card-two-text-wrap,
  .about-card-three-content-wrap {
    width: min(100%, 460px) !important;
  }

  .about-card-three {
    padding-left: clamp(80px, 9vw, 170px) !important;
  }

  .pricing-cards-grid-wrap {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .pricing-card-content-grid-wrap {
    grid-template-columns: minmax(190px, 0.55fr) minmax(0, 1fr) !important;
    gap: clamp(24px, 2.4vw, 40px) !important;
  }

  .pricing-card-left-top-wrap {
    margin-bottom: clamp(44px, 6vw, 86px) !important;
  }

  .pricing-card-price {
    font-size: clamp(36px, 2.8vw, 48px) !important;
    line-height: 1.08 !important;
  }

  .faq-items-wrapper {
    width: min(100%, 1040px);
    margin-left: auto;
    margin-right: auto;
    padding: clamp(48px, 5vw, 80px) clamp(64px, 8vw, 160px) !important;
  }

  .achievement-item-grid-wrap {
    gap: clamp(44px, 6vw, 100px) !important;
  }

  .achievement-card-icon-wrap,
  .framework-item-icon-wrap {
    margin-bottom: clamp(56px, 6vw, 100px) !important;
  }

  .contact-form-card {
    max-width: min(100%, 860px) !important;
  }

  .contact-info-grid,
  .contact-locations-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .footer {
    padding-top: clamp(96px, 8vw, 136px) !important;
  }

  .footer-bottom-wrapper {
    padding-left: clamp(40px, 8vw, 160px) !important;
    padding-right: clamp(40px, 8vw, 160px) !important;
  }

  .footer-logo-link {
    font-size: clamp(150px, 14vw, 260px) !important;
    line-height: 0.9 !important;
    letter-spacing: 0 !important;
  }
}

@media screen and (min-width: 1280px) {
  .container,
  .nav-container {
    width: min(100% - 72px, 1360px) !important;
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    font-size: clamp(54px, 3.9vw, 72px) !important;
  }
}

@media screen and (min-width: 1536px) {
  .container,
  .nav-container {
    width: min(100% - 96px, 1480px) !important;
  }

  .hero-wrapper {
    min-height: clamp(780px, calc(100svh - 28px), 980px);
  }

  .hero-content-wrap {
    min-height: clamp(700px, calc(100svh - 150px), 860px);
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 1220px;
    font-size: clamp(62px, 3.5vw, 78px) !important;
  }

  .section-caption-text {
    font-size: 15px !important;
  }

  .feature,
  .tools,
  .pricing,
  .faqs,
  .testimonials,
  .about,
  .achievement,
  .team,
  .integration-tools,
  .framework-one,
  .framework-two,
  .blogs,
  .helps,
  .contact,
  .blog-details,
  .contact-section,
  .contact-form-section {
    padding-top: clamp(110px, 7.2vw, 150px) !important;
    padding-bottom: clamp(110px, 7.2vw, 150px) !important;
  }
}

@media screen and (min-width: 1920px) {
  .container,
  .nav-container {
    width: min(100% - 120px, 1600px) !important;
  }

  .nav-wrapper {
    min-height: 86px;
    padding: 16px clamp(48px, 4vw, 80px) !important;
  }

  .nav-menu {
    column-gap: 36px;
  }

  .nav-menu a {
    font-size: 16px !important;
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 1320px;
    font-size: clamp(68px, 3.2vw, 82px) !important;
  }

  .hero-text {
    font-size: 21px !important;
    max-width: 780px;
  }

  .hero-wrapper {
    min-height: clamp(820px, calc(100svh - 24px), 1060px);
  }

  .hero-content-wrap {
    min-height: clamp(740px, calc(100svh - 140px), 940px);
    padding-top: clamp(140px, 14vh, 200px) !important;
    padding-bottom: clamp(110px, 12vh, 180px) !important;
  }

  .hero-badge-wrapper .badge-one-wrapper,
  .hero-badge-wrapper .badge-two-wrapper {
    width: 200px !important;
    height: 200px !important;
  }

  .section-caption-text {
    font-size: 16px !important;
  }

  .feature-title,
  .tools-item-title,
  .pricing-title,
  .faqs-title,
  .testimonials-title,
  .achievement-title,
  .team-title,
  .blog-title,
  .contact-section-title {
    font-size: clamp(48px, 2.8vw, 62px) !important;
  }

  .feature-card-grid-wrap,
  .pricing-cards-grid-wrap,
  .testimonials-items-top-grid-wrap,
  .testimonials-items-bottom-grid-wrap,
  .team-cards-wrapper,
  .integration-tools-items-grid-wrap,
  .contact-info-grid,
  .contact-locations-grid {
    gap: 28px !important;
  }

  .feature,
  .tools,
  .pricing,
  .faqs,
  .testimonials,
  .about,
  .achievement,
  .team,
  .integration-tools,
  .framework-one,
  .framework-two,
  .blogs,
  .helps,
  .contact,
  .blog-details,
  .contact-section,
  .contact-form-section {
    padding-top: clamp(120px, 7vw, 160px) !important;
    padding-bottom: clamp(120px, 7vw, 160px) !important;
  }

  .feature-top-wrapper,
  .tools-item-top-wrapper,
  .pricing-top-wrapper,
  .faqs-top-wrapper,
  .testimonials-top-wrapper,
  .blog-top-wrapper,
  .achievement-top-wrapper,
  .team-top-wrapper {
    margin-bottom: clamp(48px, 3vw, 64px) !important;
  }

  .feature-card-one,
  .feature-card-three,
  .feature-card-four,
  .feature-card-six,
  .pricing-card,
  .testimonial-card-two,
  .integration-item {
    padding: 40px !important;
  }

  .pricing-card-price {
    font-size: 48px !important;
  }

  .faq-items-wrapper {
    width: min(100%, 1120px);
    padding: clamp(56px, 4vw, 88px) clamp(80px, 6vw, 180px) !important;
  }

  .footer-logo-link {
    font-size: 280px !important;
  }

  .footer {
    padding-top: clamp(110px, 7vw, 150px) !important;
  }
}

/* ─────────────────────────────────────────────
   2560px — Ultra-wide / QHD / 1440p monitors
   ───────────────────────────────────────────── */
@media screen and (min-width: 2560px) {
  html {
    font-size: 18px;
  }

  .container,
  .nav-container {
    width: min(100% - 160px, 2000px) !important;
  }

  .nav-wrapper {
    min-height: 96px;
    padding: 18px 72px !important;
    border-bottom-left-radius: 32px !important;
    border-bottom-right-radius: 32px !important;
  }

  .nav-menu {
    column-gap: 44px;
  }

  .nav-menu a {
    font-size: 18px !important;
  }

  .nav-button {
    min-height: 52px !important;
    padding: 14px 28px !important;
    border-radius: 14px !important;
  }

  .nav-button .primary-button-text {
    font-size: 16px !important;
  }

  .brand-logo-wrap img {
    height: 56px !important;
    transform: scale(3) !important;
  }

  .hero-wrapper {
    min-height: clamp(900px, 100svh, 1200px);
  }

  .hero-content-wrap {
    min-height: clamp(800px, calc(100svh - 160px), 1080px);
    padding-top: 200px !important;
    padding-bottom: 160px !important;
  }

  .hero-title-wrap {
    width: min(100%, 1500px);
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 1500px;
    font-size: clamp(78px, 3.2vw, 96px) !important;
    line-height: 1.02 !important;
  }

  .hero-text-wrap,
  .feature-text-wrap,
  .blog-text-wrap,
  .tools-item-text-wrap,
  .pricing-text-wrap,
  .faqs-text-wrap,
  .testimonials-text-wrap,
  .achievement-text-wrap,
  .team-text-wrap {
    width: min(100%, 860px) !important;
  }

  .hero-text {
    max-width: 900px;
    font-size: 24px !important;
    line-height: 1.65 !important;
  }

  .hero-badge-wrapper .badge-one-wrapper,
  .hero-badge-wrapper .badge-two-wrapper {
    width: 240px !important;
    height: 240px !important;
  }

  .hero-badge-wrapper .badge-one-wrapper {
    left: 5vw !important;
    bottom: 160px !important;
  }

  .hero-badge-wrapper .badge-two-wrapper {
    right: 5vw !important;
    bottom: 180px !important;
  }

  .hero-button-wrap a,
  .hero-button-wrap button {
    min-height: 56px !important;
    padding: 16px 32px !important;
    font-size: 17px !important;
    border-radius: 14px !important;
  }

  .section-caption-text {
    font-size: 17px !important;
  }

  .feature-title,
  .tools-item-title,
  .pricing-title,
  .faqs-title,
  .testimonials-title,
  .achievement-title,
  .team-title,
  .blog-title,
  .contact-section-title,
  #about h2,
  #services .feature-title {
    font-size: clamp(56px, 2.6vw, 72px) !important;
    line-height: 1.06 !important;
  }

  .feature,
  .tools,
  .pricing,
  .faqs,
  .testimonials,
  .about,
  .achievement,
  .team,
  .integration-tools,
  .framework-one,
  .framework-two,
  .blogs,
  .helps,
  .contact,
  .blog-details,
  .contact-section,
  .contact-form-section {
    padding-top: 160px !important;
    padding-bottom: 160px !important;
  }

  .feature-top-wrapper,
  .tools-item-top-wrapper,
  .pricing-top-wrapper,
  .faqs-top-wrapper,
  .testimonials-top-wrapper,
  .blog-top-wrapper,
  .achievement-top-wrapper,
  .team-top-wrapper {
    margin-bottom: 64px !important;
  }

  .feature-card-grid-wrap {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 36px !important;
  }

  .feature-card-one,
  .feature-card-three,
  .feature-card-four,
  .feature-card-six,
  .pricing-card,
  .testimonial-card-two,
  .integration-item {
    padding: 48px !important;
    border-radius: 24px !important;
  }

  .feature-card-one {
    padding-top: 220px !important;
  }

  .pricing-cards-grid-wrap {
    gap: 36px !important;
  }

  .pricing-card-price {
    font-size: 56px !important;
    line-height: 1.06 !important;
  }

  .pricing-card-content-grid-wrap {
    gap: 44px !important;
  }

  .testimonials-items-top-grid-wrap,
  .testimonials-items-bottom-grid-wrap,
  .team-cards-wrapper {
    gap: 36px !important;
  }

  .tools-single-card {
    min-height: 580px;
    padding: 180px 160px !important;
  }

  .tools-icon-wrap {
    width: 130px !important;
    height: 130px !important;
  }

  .tools-item-gird-wrap {
    gap: 52px !important;
  }

  .about-content-grid-wrap {
    gap: 36px !important;
  }

  .about-card-two {
    gap: 88px !important;
  }

  .about-card-two-text-wrap,
  .about-card-three-content-wrap {
    width: min(100%, 540px) !important;
  }

  .faq-items-wrapper {
    width: min(100%, 1300px);
    padding: 88px 200px !important;
  }

  .achievement-item-grid-wrap {
    gap: 110px !important;
  }

  .achievement-card-icon-wrap,
  .framework-item-icon-wrap {
    margin-bottom: 110px !important;
  }

  .contact-form-card {
    max-width: min(100%, 1060px) !important;
  }

  .contact-info-grid,
  .contact-locations-grid {
    gap: 36px !important;
  }

  .integration-tools-items-grid-wrap {
    gap: 36px !important;
  }

  .footer {
    padding-top: 160px !important;
  }

  .footer-logo-link {
    font-size: 360px !important;
    line-height: 0.88 !important;
  }

  .footer-bottom-wrapper {
    padding-left: 180px !important;
    padding-right: 180px !important;
  }
}

/* ─────────────────────────────────────────────
   3840px — 4K / Ultra HD displays
   ───────────────────────────────────────────── */
@media screen and (min-width: 3840px) {
  html {
    font-size: 24px;
  }

  .container,
  .nav-container {
    width: min(100% - 240px, 2800px) !important;
  }

  .nav-wrapper {
    min-height: 120px;
    padding: 24px 96px !important;
    border-bottom-left-radius: 40px !important;
    border-bottom-right-radius: 40px !important;
  }

  .nav-menu {
    column-gap: 56px;
  }

  .nav-menu a {
    font-size: 24px !important;
  }

  .nav-button {
    min-height: 64px !important;
    padding: 18px 36px !important;
    border-radius: 18px !important;
  }

  .nav-button .primary-button-text {
    font-size: 22px !important;
  }

  .brand-logo-wrap img {
    height: 72px !important;
    transform: scale(4) !important;
  }

  .hero-wrapper {
    min-height: 100svh;
  }

  .hero-content-wrap {
    padding-top: 280px !important;
    padding-bottom: 220px !important;
  }

  .hero-title-wrap {
    width: min(100%, 2100px);
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 2100px;
    font-size: 128px !important;
    line-height: 1.02 !important;
  }

  .hero-text-wrap,
  .feature-text-wrap,
  .blog-text-wrap,
  .tools-item-text-wrap,
  .pricing-text-wrap,
  .faqs-text-wrap,
  .testimonials-text-wrap,
  .achievement-text-wrap,
  .team-text-wrap {
    width: min(100%, 1200px) !important;
  }

  .hero-text {
    max-width: 1200px;
    font-size: 32px !important;
    line-height: 1.6 !important;
  }

  .hero-badge-wrapper .badge-one-wrapper,
  .hero-badge-wrapper .badge-two-wrapper {
    width: 320px !important;
    height: 320px !important;
  }

  .hero-button-wrap a,
  .hero-button-wrap button {
    min-height: 72px !important;
    padding: 20px 44px !important;
    font-size: 22px !important;
    border-radius: 18px !important;
  }

  .section-caption-text {
    font-size: 22px !important;
  }

  .feature-title,
  .tools-item-title,
  .pricing-title,
  .faqs-title,
  .testimonials-title,
  .achievement-title,
  .team-title,
  .blog-title,
  .contact-section-title,
  #about h2,
  #services .feature-title {
    font-size: 88px !important;
    line-height: 1.04 !important;
  }

  .feature,
  .tools,
  .pricing,
  .faqs,
  .testimonials,
  .about,
  .achievement,
  .team,
  .integration-tools,
  .framework-one,
  .framework-two,
  .blogs,
  .helps,
  .contact,
  .blog-details,
  .contact-section,
  .contact-form-section {
    padding-top: 220px !important;
    padding-bottom: 220px !important;
  }

  .feature-top-wrapper,
  .tools-item-top-wrapper,
  .pricing-top-wrapper,
  .faqs-top-wrapper,
  .testimonials-top-wrapper,
  .blog-top-wrapper,
  .achievement-top-wrapper,
  .team-top-wrapper {
    margin-bottom: 88px !important;
  }

  .feature-card-grid-wrap {
    gap: 48px !important;
  }

  .feature-card-one,
  .feature-card-three,
  .feature-card-four,
  .feature-card-six,
  .pricing-card,
  .testimonial-card-two,
  .integration-item {
    padding: 64px !important;
    border-radius: 32px !important;
  }

  .feature-card-one {
    padding-top: 280px !important;
  }

  .pricing-cards-grid-wrap {
    gap: 48px !important;
  }

  .pricing-card-price {
    font-size: 72px !important;
  }

  .pricing-card-content-grid-wrap {
    gap: 56px !important;
  }

  .testimonials-items-top-grid-wrap,
  .testimonials-items-bottom-grid-wrap,
  .team-cards-wrapper {
    gap: 48px !important;
  }

  .tools-single-card {
    min-height: 720px;
    padding: 240px 220px !important;
  }

  .tools-icon-wrap {
    width: 168px !important;
    height: 168px !important;
  }

  .tools-item-gird-wrap {
    gap: 72px !important;
  }

  .about-content-grid-wrap {
    gap: 48px !important;
  }

  .faq-items-wrapper {
    width: min(100%, 1800px);
    padding: 120px 280px !important;
  }

  .contact-form-card {
    max-width: min(100%, 1400px) !important;
  }

  .contact-info-grid,
  .contact-locations-grid {
    gap: 48px !important;
  }

  .footer {
    padding-top: 220px !important;
  }

  .footer-logo-link {
    font-size: 480px !important;
    line-height: 0.86 !important;
  }

  .footer-bottom-wrapper {
    padding-left: 240px !important;
    padding-right: 240px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .container,
  .nav-container {
    width: min(100% - 44px, 1060px) !important;
    max-width: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .nav-bar {
    padding-left: 22px;
    padding-right: 22px;
  }

  .nav-wrapper {
    min-height: 72px;
    padding: 12px 28px !important;
  }

  .nav-menu {
    display: flex !important;
    gap: 22px !important;
  }

  .nav-wrapper button.lg\:hidden {
    display: none !important;
  }

  .brand-logo-wrap img {
    height: 42px !important;
    transform: scale(2.55) !important;
  }

  .hero-wrapper {
    min-height: 650px !important;
    padding-bottom: 54px !important;
  }

  .hero-content-wrap {
    min-height: 540px !important;
    justify-content: center !important;
    padding-top: 98px !important;
    padding-bottom: 56px !important;
  }

  .hero-title-wrap {
    width: min(100%, 760px) !important;
    margin-top: 10px !important;
    margin-bottom: 14px !important;
  }

  .hero .hero-title,
  section.hero h1.hero-title,
  section.hero .hero-content-wrap .hero-title-wrap > h1.hero-title,
  section.hero h1.hero-title.text-\[38px\] {
    max-width: 760px !important;
    font-size: 38px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .hero-text-wrap {
    width: min(100%, 620px) !important;
    margin-top: 20px !important;
  }

  .hero-text {
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero-button-wrap {
    margin-top: 28px !important;
  }

  .hero-badge-wrapper {
    display: none !important;
  }

  .feature#services .hidden.md\:grid,
  section#services .hidden.md\:grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
  }

  #about > .container > .grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr) !important;
    gap: 42px !important;
    align-items: center !important;
  }

  #about h2,
  #services .feature-title,
  .pricing-title,
  .testimonials-title,
  .contact-section-title {
    font-size: 42px !important;
    line-height: 1.08 !important;
    letter-spacing: 0 !important;
  }

  .feature#services .group,
  section#services .group {
    padding: 26px !important;
  }

  .pricing .hidden.md\:grid.grid-cols-3,
  .pricing .hidden.md\:grid {
    gap: 22px !important;
  }

  .pricing .hidden.md\:grid.grid-cols-3 > div,
  .pricing .hidden.md\:grid > div {
    border-radius: 24px !important;
  }

  .pricing .hidden.md\:grid.grid-cols-3 > div > div,
  .pricing .hidden.md\:grid > div > div {
    padding: 28px !important;
  }

  .pricing .grid[class*="lg:grid-cols-2"] {
    grid-template-columns: 1fr !important;
  }

  .pricing table {
    min-width: 0 !important;
  }

  .pricing th,
  .pricing td {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .testimonials .grid[class*="lg:grid-cols-3"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .contact-form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .hero-wrapper {
    min-height: 660px;
  }

  .hero-content-wrap {
    min-height: 560px;
    padding-top: 82px !important;
    padding-bottom: 72px !important;
  }

  .hero .hero-title,
  section.hero h1.hero-title {
    max-width: 860px;
    font-size: clamp(34px, 4vw, 40px) !important;
    line-height: 1.06 !important;
  }

  .hero-text {
    max-width: 620px;
    font-size: 16px !important;
    line-height: 1.55 !important;
  }

  .hero-badge-wrapper {
    display: none !important;
  }

  .pricing-card-content-grid-wrap,
  .about-content-grid-wrap,
  .feature-two-card-content-grid-wrap {
    grid-template-columns: 1fr !important;
  }

  .about-card-three {
    padding-left: 40px !important;
  }

  .tools-items-grid-wrap,
  .pricing-cards-grid-wrap,
  .feature-card-grid-wrap {
    grid-template-columns: 1fr !important;
  }

  .footer-bottom-wrapper {
    padding-left: 32px !important;
    padding-right: 32px !important;
  }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
  .nav-wrapper > nav[role="navigation"].nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 1 auto !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .nav-wrapper > nav[role="navigation"].nav-menu > a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: rgba(255, 255, 255, 0.72) !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    padding: 8px 0 !important;
    white-space: nowrap !important;
  }

  .brand-logo-wrap {
    width: 150px !important;
    min-width: 150px !important;
    overflow: visible !important;
  }

  .brand-logo-wrap img {
    height: 34px !important;
    transform: scale(1.75) !important;
  }

  .nav-button {
    min-height: 44px !important;
    padding: 12px 18px !important;
  }

  .nav-button .primary-button-text {
    font-size: 14px !important;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .nav-wrapper {
    background-image: url("../images/68522c6072d28f41364af623_c072a487f8aaa5681d42c4c8777d01ec_Nav%20Bar%20Bg.webp") !important;
    background-position: 50% !important;
    background-size: cover !important;
    border-bottom-left-radius: 26px !important;
    border-bottom-right-radius: 26px !important;
  }

  .w-nav[data-collapse="medium"] .nav-menu,
  .nav-wrapper > nav[role="navigation"].nav-menu {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-wrapper > nav[role="navigation"].nav-menu > a {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .nav-wrapper button[aria-label="Toggle menu"] {
    display: none !important;
  }
}