@media (max-width: 1250px) {

  body {

    font-size: 15px;

    line-height: 22px;

  }

  .cta-band {

    gap: 30px;

    gap: 30px;

  }

  .cta-band > div:first-child {

    width: 400px;

  }

  .content-area ul li::before {

    top: 2px;

  }

  .banner-wrapper {

    padding: 100px 20px 100px;

  }

}

@media (max-width: 1023px) {

  .page-hero .container,

  .showcase,

  .contact-grid,

  .grid-4,

  .grid-3,

  .grid-2 {

    grid-template-columns: 1fr;

  }

  .window-grid {

    grid-template-columns: 1fr;

  }

  .section-head {

    flex-direction: column;

    align-items: start;

  }

  .cta-band {

    flex-direction: column;

    align-items: start;

  }

  .footer-grid {

    gap: 20px;

  }

  .footer-bottom {

    padding-top: 20px;

    padding-bottom: 0;

  }

    .footer-bottom .container {

    flex-direction: column-reverse;

    gap: 15px;

    text-align: center;

  }

  .footer-brand p {

    max-width: 100%;

  }

  .footer-col h4 {

    margin-bottom: 10px;

  }

  .footer-bottom-links{

    gap: 10px;

    column-gap: 20px;

  }

  .form-grid{

    text-align: left;

  }

  /* HAMBURGER */

  .menu-toggle {

    display: block !important;

    width: 28px;

    height: 20px;

    position: relative;

    cursor: pointer;

    z-index: 1001;

  }



  /* COMMON LINE STYLE */

  .menu-toggle span {

    position: absolute;

    width: 100%;

    height: 2px;

    background: #000;

    left: 0;

    border-radius: 2px;

    transform-origin: center;

    transition: all 0.35s ease;

  }



  /* PERFECTLY CENTERED LINES */

  .menu-toggle span:nth-child(1) {

    top: 0;

  }



  .menu-toggle span:nth-child(2) {

    top: 50%;

    transform: translateY(-50%);

  }



  .menu-toggle span:nth-child(3) {

    bottom: 0;

  }



  /* 🔥 ACTIVE → PERFECT X */

  .menu-toggle.active span:nth-child(1) {

    top: 50%;

    transform: translateY(-50%) rotate(45deg);

  }



  .menu-toggle.active span:nth-child(2) {

    opacity: 0;

  }



  .menu-toggle.active span:nth-child(3) {

    bottom: auto;

    top: 50%;

    transform: translateY(-50%) rotate(-45deg);

  }

  /* NAV WRAPPER */

  .nav-links {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #fff;

    z-index: 1000;

    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.06);

    top: 70px;

    padding-top: 10px;

    height: calc(100dvh - 70px);

  }



  /* MENU LIST */

  .nav-menu {

    display: flex;

    flex-direction: column;

    padding: 20px;

    gap: 15px;

    list-style: none;

    margin: 0;

  }



  .nav-menu li a {

    display: block;

    padding: 10px 0;

    text-decoration: none;

    color: #000;

    font-size: 16px;

  }



  /* CTA BUTTONS */

  .nav-cta {

    display: flex;

    flex-direction: column;

    gap: 20px;

    padding: 20px 20px 40px;

  }



  .nav-cta .btn {

    width: 100%;

    text-align: center;

  }

  .nav-menu li a {

    padding: 0;

  }

  .nav-links ul {

    gap: 0;

  }

  .nav-menu li a {

    padding: 15px 20px;

    display: block;

    width: 100%;

    text-align: center;

  }

  .nav-menu li {

    width: 100%;

  }

  .banner-wrapper {

    padding: 60px 20px 60px;

  }

  .container {

    width: min(var(--max), calc(100% - 40px));

  }

  .banner-text h1 {

    font-size: 40px;

    line-height: normal;

  }

  .banner-text {

    gap: 20px;

  }

  .btn-row {

    flex-wrap: wrap;

    justify-content: center;

  }

  p,

  .banner-text p,

  .section-head p,.cta-band p {

    font-size: 15px;

    line-height: 22px;

  }

  .btn-row a {

    font-size: 16px;

  }

  .section {

    padding: 60px 0;

  }

  .card {

    padding: 14px;

    text-align: center;

  }

  .grid-3 .card,

  .grid-2 .card {

    padding: 25px 20px;

  }

  .icon {

    margin: 0 auto 20px;

  }

  .section-head {

    margin-bottom: 30px;

  }

  .section-head {

    text-align: center;

  }

  .section-head > div {

    width: 100%;

  }

  .icon {

    width: 36px;

    height: 36px;

  }

  .card h3 {

    font-size: 20px;

    line-height: normal;

  }

  .pill-row {

    justify-content: center;

  }

  .cross-grid{

    gap: 30px;

    flex-direction: column !important;

  }

  .content-area{

    padding: 0 20px !important;

    max-width: 100%;

  }

  .cross-grid figure, .content-grid{

    max-width: 100%;

  }

  .content-area h2{

    font-size: 32px;

    line-height: normal;

  }

  .cta-band > div:first-child{

    width: 100%;

  }

  .cta-band h3{

    font-size: 28px;

    line-height: normal;

    margin-bottom: 15px;

  }

  .cta-band{

    padding: 30px 20px;

    text-align: center;

    gap: 20px;

  }

  .cta-band .hero-actions{

    justify-content: center;

    margin: 0 auto;

  }

  .footer-grid{

    padding: 25px 0 25px;

  }

  .hero-banner::before{

    background: rgba(0, 0, 0, 0.8);

  }

  .dark-bg{

    padding-top: 60px;

  }

  .banner-img{

    max-width: 100%;

  }

  .banner-img img{

    position: initial;

    object-fit: contain;

  }

  .sub-page-banner .banner-wrapper{

    flex-direction: column;

    gap: 40px;

  }

  .sub-page-banner .banner-text{

    padding: 0;

    max-width: 100%;

    text-align: center;

  }

  .sub-page-banner .banner-wrapper{

    padding: 50px 0;

  }

  .sub-page-banner .btn-row{

    justify-content: center;

    margin: 0 auto;

  }

  .dark-bg-icon .icon{

    font-size: 36px;

    margin-bottom: 15px;

  }

  .contact-items{

    gap: 15px;

  }

  .contact-container p{

    margin-bottom: 20px;

  }

  .pt-20{

    padding-top: 10px;

  }
  .contact-grid .card{
    padding: 0;
  }

}

@media (max-width: 720px) {

  .brand img {

    height: 42px;

  }

  .hero-copy h1 {

    font-size: 40px;

  }

  .hero-copy p {

    font-size: 16px;

  }

  .hero-actions,

  .nav-cta {

    flex-wrap: wrap;

  }

  .form-grid,

  .check-grid,

  .hero-metrics,

  .workspace .tiles {

    grid-template-columns: 1fr;

  }

  .row {

    grid-template-columns: 1fr 1fr;

    row-gap: 8px;

  }

  .cta-band a{

    margin: 0 auto;

  }

}

@media (max-width: 475px) {

   .hero-actions{

    flex-direction: column;

   }

   .hero-actions a{

   margin: initial;

   }

   .btn-row{

    flex-direction: column;

    align-items: initial;

   }

}