@media (max-width: 576px) {
    .main-section {
        margin: 0px 16px !important;
        padding: 20px 16px 12px 16px !important;
    }
    
    .benefit-title-data{
       font-size:24px !important;
    }
    .benefit-desc-data{
       font-size:16px !important; 
    }
    .benefit-wrapper{
       padding:48px 16px !important;
    }
    .footer {
        margin: 0px 16px !important;
        padding: 0px 0px !important;
    }
    
    .feature-title {
    font-size:18px !important;
    }
    
    .feature-subtext{
    font-size:14px !important;
    }
    
    .preview-img-data{
    height:auto !important;
    }
    .seers-cmp-cookie-policy-text{
    margin-bottom:40px;
    }
    
    .icon-left{
        margin-right: 15px !important;
        margin-left:-5px !important;
    }
    
    .set-card-benefit-padding{
      padding:16px !important;
    }

    .hero-wrapper-success-contact{
      padding: 24px 16px !important;
    }

    .about-section h2{
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }
    .about-box{
        padding: 0px 0px !important;
        background: none !important;
    }
    .set-data-margin-badge{
margin-left:16px !important;
}
    .preview-img{
            object-fit: contain !important;
    }

    .feature-btn{
        padding: 12px !important;
        transform: scale(1) !important;
        opacity: 1 !important;
    }

    .modal-header{
      padding:20px 24px 16px 16px !important; 
    }
    
    .step-title{
      font-size: 16px !important;
      color: #086CC5 !important;
    font-weight: 700 !important;
    }

    .step-desc{
      font-size: 14px !important;
      margin-top: 8px !important;
      margin-bottom: 16px;
    }

    .benefit-desc{
        font-size: 16px !important;
        margin-bottom: 32px !important;
    }

    .beta-btn{
      padding: 9px 12px !important;
      font-size: 12px !important;
    }
    
    .hamburger{
      margin-left: 12px !important;
    }

    .hero h1 {
          margin-bottom: 12px !important;
    }

    .TM-upper{
      top: -1.5em !important;
    }

    .modal-body {
    padding: 24px 16px !important;
}

.dashboard-frame{
    padding: 0px !important;
}

    .hero p {
      margin-bottom: 24px !important;
      font-size: 16px !important;
    }

    .about-section p{
      font-size: 16px !important;
    }

    .about-badge{
      padding: 4px 12px !important;
      font-size: 12px !important;
    }

    .cta-desc{
      font-size: 16px !important;
    }

    .feature-btn h6{
          font-size: 14px !important;
    }

    .feature-btn.active{
        padding: 12px !important;
        transform: scale(1) !important;
                margin-bottom: 0px !important;
                border-radius: 16px 16px 0 0 !important;
    }

    .feature-btn.active + .mobile-image + .feature-btn{
        padding: 12px !important;
        transform: scale(1) !important;
        margin-top: 14px;
        margin-bottom: 14px;
        
    }

    .benefit-title {
    font-size: 24px !important;
    margin-bottom: 8px !important;
    }

    .hero h1 {
      font-size: 32px !important;
    }

    .mobile-image {
      margin-top: 0px !important;
    }

    .cta-title{
      font-size: 32px !important;
    }

    .set-top-join-beta{
  margin-top: 24px;
}

    .set-footer-padding {
        padding: 24px 17px 20px 17px !important;
      }
      .btn-cta {
        display: block;
        width: 100%;
        text-align: center;
      }
      .badge-pill-hero-section{
        margin-bottom: 8px !important;
        font-size: 12px !important;
      }
      .hero{
        padding: 0px 16px !important;
      }
      .hero-wrapper {
        padding: 32px 16px !important;
      }
      .footer p{
        font-size: 16px !important;
      }
      .about-section, .section-card, .cta-section, .section {
        padding: 0px 16px !important;
      }
      .about-wrapper{
        padding: 48px 16px !important;
      }
      .cta-box{
        padding:24px 16px !important;
      }
      .header-section{
        padding: 0px !important;
      }
}

@media(min-width:576px){
.step.active {
  position: relative;
  background: #f3f8ff;
  padding: 24px;
  border-radius: 18px;
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.08);
  transition: all 0.3s ease;
  z-index: 1;
}

/* 🔥 Gradient Border */
.step.active::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1.5px; /* border thickness */
  border-radius: 18px;

  background: linear-gradient(
    100.34deg,
    rgba(0, 142, 255, 0.5) 9.58%,
    rgba(0, 142, 255, 0.08) 26.99%,
    rgba(0, 142, 255, 0.08) 81.05%,
    rgba(0, 142, 255, 0.08) 93.92%
  );

  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;

  z-index: -1;
}

  .step.active .step-icon {
background: #0d6efd;
color: #fff;
}

.step.active .step-title {
color: rgba(8, 108, 197, 1);
}

}

@media (max-width: 992px) {
    .footer-links ul {
        justify-content: flex-start !important; /* Aligns left on mobile */
        /* use 'center' instead of 'flex-start' if you want them centered */
        margin-top: 15px; /* Adds a little space above the links on mobile */
    }
    .dashboard-frame {
        border-radius: 25px;
      }
    
      .desktop-image {
        display: none;
      }
    
      .mobile-image img {
        border: 2px solid #3b82f6;
        padding: 10px;
        width: 100%;
        height: 100%;
        border-radius: 0px 0px 16px 16px !important;
      }
      .step {
    opacity: 1 !important;
    transform: none !important;
    pointer-events: none; 
    padding-left: 0px !important;
  }
  .set-image-data{
    width: 100%;
  }
}

@media (max-width: 991px) {
    .main-header {
      padding: 14px 0;
    }
    .mobile-image {
      display: none;
    }

    .preview-box img{
      width: 100%;
    }
  
    /* Show only when active */
    .feature-btn.active + .mobile-image {
      display: block;
    }
  }
  
  @media (min-width: 992px) {
    .mobile-image {
      display: none !important;
    }
    
  }
  
  

  /* --- DESKTOP BEHAVIOR (Large screens and up) --- */
  @media (min-width: 992px) {
      /* Hide active icon by default */
      .step .icon-active { display: none; }
      
      /* When active, hide default icon and show active icon */
      .step.active .icon-default { display: none; }
      .step.active .icon-active { display: inline-block; }
      
      /* Optional: Hide descriptions of non-active steps if you want an accordion effect */
      /* .step:not(.active) .step-desc { display: none; } */ 
  }

  /* --- MOBILE BEHAVIOR (Tablets and phones) --- */
  @media (max-width: 991px) {
      /* 1. Force ALL icons to the blue/active state */
      .step .icon-default { display: none !important; }
      .step .icon-active { display: inline-block !important; }

      /* 2. Force descriptions and mobile images to ALWAYS show */
      .step .step-desc,
      .step .set-image-data { display: block !important; }

      /* 3. Make all step titles blue (Adjust the hex code to match your theme's active blue) */
      .step .step-title { color: #086CC5 !important; }

      /* 4. Remove the border/background "box" from the active step so it looks like a flat list */
      .step.active {
          background: transparent !important;
          border: none !important;
          box-shadow: none !important;
          padding: 0 !important; /* Adjust if your .active class adds padding */
      }
      
      /* Add a little spacing between steps on mobile */
      .step {
          margin-bottom: 2rem;
      }

      .mobile-drawer.active{
        display: block !important;
      }
  }
  
  @media (min-width: 992px) {
  .mobile-drawer, 
  .menu-toggle, 
  .drawer-overlay {
    display: none !important;
  }
}

@media (min-width: 1025px) {
.feature-card{
height:500px !important;
}
}