/* =========================================
   RESPONSIVE OVERRIDES & UTILITIES
   ========================================= */

/* --- Mobile First Approach implied by base styles --- */
/* The base styles in style.css should default to Mobile/Vertical layouts */

/* --- Tablet / Medium Screens (>= 768px) --- */
@media (min-width: 768px) {
  /* Layout shifts */
  .md\:flex-row { flex-direction: row; }
  .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  
  /* Spacing */
  .md\:p-8 { padding: var(--space-8); }
  .md\:gap-8 { gap: var(--space-8); }
  
  /* Typography */
  .md\:text-left { text-align: left; }
  
  /* Visibility */
  .md\:block { display: block; }
  .md\:hidden { display: none; }
}



/* --- Desktop / Large Screens (>= 1024px) --- */
@media (min-width: 1024px) {
  /* Layout shifts */
  .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lg\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .lg\:grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  
  .lg\:col-span-1 { grid-column: span 1 / span 1; }
  
  .lg\:gap-12 { gap: var(--space-12); }
  
  /* Visibility */
  .lg\:block { display: block; }
  .lg\:hidden { display: none; }
}
@media (max-width: 1199px){
  .mobile-mockup{
    display: none;
  }

  .main-content-col-1,
  .main-content-col-2{
    position: initial;
    gap: 30px;
    flex-direction: row;
    flex-wrap: wrap;

  }
  .main-content{
        display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .seo-box-content{
    flex: 1;
    width: 100%;
  }
  .seo-box-content.box-1{
    margin: 0;
  }
}
@media (max-width: 991px) {

  header nav ul{
    flex-direction: column;
    gap: 15px;
  }

  header .btn-common{
    display: none;
  }

  header nav {
        position: fixed;
        top: 0;
        left: -100%;
        right: 0;
        width: 50%;
        height: 100dvh;
        background: #ffffff;
        padding: 40px 20px;
        z-index: 999;
        transform: translateX(-100%);
        transition: 0.5s ease-in-out;
        display: flex;
        flex-direction: column;
        overflow-y: auto;
    }

    header nav.open {
        transform: translateX(0);
        left: 0; 
    }

    header nav ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px !important;
        width: 100%;
    }
    
    header nav ul li {
        width: 100%;
        border-bottom: 1px solid #f3f3f3;
        padding-bottom: 5px;
        color: #f3f3f3;
    }

    header nav ul li a{
        font-size: 16px !important;
        color: #000 !important;
    }
    
    header nav  ul li:last-child {
        border-bottom: none;
    }
    
    header nav .header-btn {
        display: block !important; 
        margin-left: 0 !important;
        margin-top: 30px;
        width: 100%;
    }
    
    header nav .header-btn .btn-common {
        width: 100%;
        justify-content: center;
    }

    /* Toggle Button */
    .toggle {
        position: relative;
        z-index: 1001; 
        width: 30px;
        height: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
    }
    
    .toggle span.toggle-icon {
        width: 100%;
        height: 3px;
        background-color: #3b0a44;
        transition: all 0.5s ease;
        border-radius: 2px;
    }

    /* Toggle Open State Animation */
    .toggle.open span.toggle-icon:nth-child(1) {
        transform: rotate(45deg) translate(9px, 10px);
    }
    
    .toggle.open span.toggle-icon:nth-child(2) {
        opacity: 0;
    }
    
    .toggle.open span.toggle-icon:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -6px);
    }
    
    body.openmenu {
        overflow: hidden; 
    }

    .tab-btn{
      max-width: none;
    }

    .dev-process-inner{
      flex-direction: column;
      align-items: center;
    }
    .dev-process-col{
          width: fit-content;
    max-width: 360px;
    }

    .dev-process-col::before{
      top: auto;
      bottom: -17px;
      left: 45%;
    transform: rotate(90deg);
    }
    
}



@media (max-width: 820px){
  .banner-left-col h1{
    margin-bottom: 15px;
  }
  .tab-content-img{
    display: none;
  }
  .cta-row{
    flex-direction: column;
  }
  .cta-col-form{
    max-width: 100%;
  }
  .cta-col-heading h2{
    margin-bottom: 15px;
  }
  .cta-col-heading p{
    margin-bottom: 15px;
  }
  .form-group .form-control{
    padding: 12px;
  }

  .logo-slide img{
    max-height: 40px;
  }
  .logo-slide{
        border-radius: 10px;
    padding: 10px;
  }
  .about-qute-right-img{
    width: 80px;
  }
  .about-qute-left-img{
    width: 100px;
  }
}

@media (max-width: 1024px){
  .tabs-btns{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px){
  .tabs-btns{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }
  .tab-btn{
    padding: 0.65rem 1rem;
    min-width: 0;
  }

  .crm-flow4-grid{
    grid-template-columns: 1fr;
  }

  .crm-hero-features-grid{
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px){
  .md\:block { display: block !important; }
  .md\:hidden { display: none !important; }
}

@media (max-width: 991px){
  .platform-modules-inner{
    grid-template-columns: 1fr;
  }
  .platform-modules-grid{
    grid-template-columns: 1fr;
  }
  .inside-crm-wrap{
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .inside-crm-right{
    padding: 16px;
  }

  .crm-flow4-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .crm-flow4-grid::before{
    display: none;
  }
  .crm-flow4-card:not(:last-child)::before{
    display: none;
  }
  .crm-flow4-card:not(:last-child) .crm-flow4-num::after{
    display: none;
  }

  .crm-hero-features-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-journey-step{
    grid-template-columns: 1fr;
    grid-template-areas:
      "head"
      "tags"
      "bullets";
  }

  .crm-journey-list::before{
    display: none;
  }
}

/* --- Mobile Only Specifics (< 768px) --- */
@media (max-width: 767px) {
  /* Helper to stack things on mobile that are flex on desktop */
  .sm\:flex-col { flex-direction: column; }
  
  .sm\:w-full { width: 100%; }
  
  /* Adjust specific font sizes for mobile if variables aren't enough */
  h1 { font-size: var(--text-3xl); }
  
  .container { padding-inline: var(--space-4); }

  /* Navbar specifics */
  .navbar-menu {
    display: none; /* simple toggle placeholder */
  }

  .logo-footer{
    max-width: 100%;
  }
  
  .banner-row{
    flex-direction: column;
  }

  .banner-left-col{
    max-width: 100%;
  }
  .client-say-detail{
    padding: 20px;
  }

  /* All-in-One CRM Accordion */
  .all-in-one-section .flex.gap-8 {
    flex-direction: column;
  }
  .forex-cards {
    max-width: 100%;
  }
  .forex-cards-details {
    display: none;
  }
  .crm-card {
    height: auto !important; /* Force auto height */
    padding: 20px;
  }
  .crm-card.active {
    height: auto !important;
  }
  
  /* Retarget arrows for vertical layout: Point Down (inactive), Up (active) */
  /* Original Icon: Points Top-Right (NE) */
  /* rotate(135deg) -> South (Down) */
  /* rotate(-45deg) -> North (Up) */
  .crm-card:not(.active) .crm-arrow {
     transform: rotate(135deg);
  }
  .crm-card.active .crm-arrow {
     transform: rotate(-45deg);
  }
  
  /* Show internal image on mobile only */
  /* Remove hidden class constraint if using Tailwind utility, ensure display blockOverride */
  .mobile-crm-img {
      display: block !important;
  }
.card-link{
  margin-top: 10px;
}
  .card-link, .crm-card.active .card-arrow{
    position: inherit;
  }
  .banner-col{
    padding-top: 40px;
  }
  .app-crm-row{
    flex-direction: column;
  }
}

@media (max-width: 640px){
  .vision-mission-row{
    flex-direction: column;
  }
  .key-fetures-inner-row{
    flex-direction: column;
  }
  .our-office-row,
  .key-fetures-section-bg .key-fetures-inner-row{
    flex-direction: column;
  }
  .dowload-app-row{
    flex-direction: column;
  }
}

@media (max-width: 600px) {
  header nav{
    width: 100%;
  }

  .footer-col{
    width: 100%;
  }
  .footer-row{
    gap: 20px;
  }
  .logo-footer p,
  .footer-col-logo{
    margin-bottom: 10px;
  }
  .cta-col-form{
    padding: 15px;
  }

  .toggle.open span.toggle-icon:nth-child(1),
  .toggle.open span.toggle-icon:nth-child(3){
    background-color: #3b0a44;
  }

}

@media (max-width: 475px){
  .main-content-col-1,
  .main-content-col-2{
    flex-direction: column;
  }
  .crm-hero-features-grid{
    grid-template-columns: 1fr;
  }
  .crm-flow4-grid{
    grid-template-columns: 1fr;
  }
  
}

/* Mobile Dropdown Overrides */
@media (max-width: 991px) {
    header nav ul li .dropdown-menu {
        position: static;
        box-shadow: none;
        padding-left: 20px;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: transparent;
        min-width: 0;
        padding-top: 10px;
        padding-bottom: 0;
        display: none;
    }
    
    header nav ul li.dropdown-open .dropdown-menu {
        display: block;
    }

    header nav ul li .dropdown-menu li a {
        color: #3b0a44;
        padding: 8px 0;
        font-size: 16px;
    }
    
    .mobile-dropdown-toggle {
        color: #000 !important;
    }
}

    header nav ul li .dropdown-menu li a:hover {
        background-color: transparent;
        color: #FDCC29;
}