/* Responsive Design - Mobile First Approach */

/* ===== ÉTAPE 1: MOBILE (320px - 768px) ===== */
@media screen and (max-width: 768px) {
  
  /* Headers - Mobile */
  .header, .header-2, .header-3, .header-4, .header-5, .header-6, .header-7, .header-8, .header-9, .header-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
    position: relative !important;
  }
  
  .logo-nav-transverse, .logo-nav-transverse-2, .logo-nav-transverse-3, .logo-nav-transverse-4, 
  .logo-nav-transverse-5, .logo-nav-transverse-6, .logo-nav-transverse-7, .logo-nav-transverse-8, .logo-nav-transverse-9 {
    gap: 12px !important;
    flex: 1 !important;
  }
  
  /* Logo size adjustment */
  .notifications-icon, .notifications-icon-2, .notifications-icon-3, .notifications-icon-4,
  .icon-wrapper, .logo, .logo-2, .logo-3, .logo-4 {
    width: 44px !important;
    height: 44px !important;
  }
  
  /* Menu tabs - Hide desktop menu and show hamburger */
  .menu-tabs, .menu-tabs-2, .menu-tabs-3, .menu-tabs-4, .menu-tabs-5, .menu-tabs-6, .menu-tabs-7, .menu-tabs-8, .menu-tabs-9 {
    display: none !important;
  }
  
  /* Mobile hamburger menu */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    transition: background-color 0.2s ease;
  }
  
  .mobile-menu-toggle:hover {
    background-color: #f4f6fa;
  }
  
  .hamburger-icon {
    width: 24px;
    height: 24px;
    position: relative;
    transform: rotate(0deg);
    transition: 0.3s ease-in-out;
  }
  
  .hamburger-icon span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background: #101010;
    border-radius: 1px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: 0.25s ease-in-out;
  }
  
  .hamburger-icon span:nth-child(1) {
    top: 6px;
  }
  
  .hamburger-icon span:nth-child(2) {
    top: 11px;
  }
  
  .hamburger-icon span:nth-child(3) {
    top: 16px;
  }
  
  .hamburger-icon.open span:nth-child(1) {
    top: 11px;
    transform: rotate(135deg);
  }
  
  .hamburger-icon.open span:nth-child(2) {
    opacity: 0;
    left: -60px;
  }
  
  .hamburger-icon.open span:nth-child(3) {
    top: 11px;
    transform: rotate(-135deg);
  }
  
  /* Mobile menu overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
  }
  
  .mobile-menu-overlay.show {
    opacity: 1;
    visibility: visible;
  }
  
  /* Mobile menu */
  .mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 280px;
    height: 100vh;
    background-color: #ffffff;
    z-index: 1000;
    padding: 20px;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease;
    overflow-y: auto;
  }
  
  .mobile-menu.show {
    right: 0;
  }
  
  .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #1010101a;
    margin-bottom: 20px;
  }
  
  .mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    padding: 8px;
    border-radius: 8px;
    transition: background-color 0.2s ease;
  }
  
  .mobile-menu-close:hover {
    background-color: #f4f6fa;
  }
  
  .mobile-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  
  .mobile-menu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 12px;
    color: #101010;
    text-decoration: none;
    border-radius: 8px;
    font-family: var(--body-m-semibold-font-family);
    font-weight: var(--body-m-semibold-font-weight);
    font-size: var(--body-m-semibold-font-size);
    transition: background-color 0.2s ease;
  }
  
  .mobile-menu-item:hover {
    background-color: #f4f6fa;
  }
  
  .mobile-menu-item.active {
    background-color: #e6f7ff;
    color: #00a0e6;
  }
  
  .mobile-menu-item img {
    width: 20px;
    height: 20px;
  }
  
  .mobile-menu-divider {
    height: 1px;
    background-color: #1010101a;
    margin: 12px 0;
  }
  
  .mobile-menu-section {
    margin-top: 20px;
  }
  
  .mobile-menu-section-title {
    font-family: var(--body-s-semibold-font-family);
    font-weight: var(--body-s-semibold-font-weight);
    font-size: var(--body-s-semibold-font-size);
    color: #10101080;
    padding: 8px 12px;
    margin-bottom: 8px;
  }
  
  /* Right navigation - Simplified for mobile */
  .right-nav, .right-nav-2, .right-nav-3, .right-nav-4, .div-3, .div-4, .div-5, .div-7, .right-nav-5 {
    gap: 8px !important;
  }
  
  /* Search bar - Hide on mobile, show in menu */
  .search-nav, .search-nav-2, .search-nav-3, .search-nav-4, .search-nav-5, .search-nav-6, .search-nav-7, .search-nav-8, .search-nav-9 {
    display: none !important;
  }
  
  /* Project and profile buttons - Show only notifications */
  .project, .project-2, .project-3, .project-4, .project-5, .project-6, .project-7, .project-8,
  .panel-profile, .panel-profile-2, .panel-profile-3, .panel-profile-4, .panel-profile-5, 
  .panel-profile-6, .panel-profile-7, .panel-profile-8, .panel-profile-9 {
    display: none !important;
  }
  
  /* Keep notifications visible on mobile */
  .icon-wrapper, .notifications-icon, .notifications-icon-2, .notifications-icon-3, .notifications-icon-4,
  .logo, .logo-2, .logo-3, .logo-4 {
    display: flex !important;
  }
  
  /* Main content adjustments */
  .d-accueil, .d-landing, .d-landing-screen, .d-dtail-offre, .d-landing-my, .d-landing-my-screen, 
  .d-landing-my-wrapper, .d-landing-wrapper, .div-wrapper {
    padding: 16px 12px !important;
    gap: 24px !important;
  }
  
  /* Content containers */
  .content-3, .body, .body-2, .body-3 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
  
  /* Grid layouts - Single column */
  .grid-cols, .cards-grid, .cards-grid-2, .cards-grid-3 {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .col, .col-2 {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Cards - Full width */
  .card-documentation, .card-documentation-2, .card-documentation-3, .card-documentation-4, 
  .card-documentation-5, .card-documentation-6, .card-documentation-7, .card-documentation-8, .card-documentation-9 {
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px 16px !important;
  }
  
  /* News/Actu section */
  .actu {
    flex-direction: column !important;
    padding: 16px !important;
    gap: 16px !important;
  }
  
  .img-8 {
    width: 100% !important;
    height: 200px !important;
    object-fit: cover !important;
  }
  
  /* Project panels - Stack vertically */
  .frame-14, .frame-15, .frame-16, .container-3 {
    flex-direction: column !important;
    gap: 16px !important;
  }
  
  .left-panel, .left-panel-2, .left-panel-3, .left-panel-4 {
    width: 100% !important;
    height: auto !important;
    padding: 16px !important;
  }
  
  .right-panel, .right-panel-2, .right-panel-3, .panel {
    width: 100% !important;
    padding: 16px !important;
    border-radius: 16px !important;
  }
  
  /* Search input in hero */
  .search-input, .search-input-2 {
    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;
    padding: 0 4px 0 16px !important;
  }
  
  /* Top line sections */
  .top-line, .top-line-2, .top-line-3 {
    padding: 32px 16px !important;
    gap: 16px !important;
  }
  
  /* Categories section */
  .categories, .categories-2 {

    overflow-x: auto !important;
  }
  
  .frame-4, .frame-7 {
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Tables and lists - Responsive */
  .table-head {
    padding: 8px 16px !important;
    font-size: 12px !important;
  }
  
  .tile-ticketing, .tile-document, .tile-document-2 {
    padding: 12px 16px !important;
    gap: 12px !important;
  }
  
  /* Pagination */
  .pagination, .pagination-2, .pagination-3, .pagination-4 {
    gap: 8px !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
  }
  
  /* Footer */
  .footer-links, .footer-links-2, .footer-links-3, .footer-links-4, .footer-links-5, 
  .footer-links-6, .footer-links-7, .footer-links-8, .footer-links-9 {
    width: 100% !important;
    gap: 8px 16px !important;
    text-align: center !important;
  }
  
  /* Typography adjustments */
  .welcome-to-the-ASN, .search-for-a, .search-for-a-2, .need-assistance, .frequently-asked {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  
  .text-wrapper-7, .text-wrapper-17 {
    font-size: 18px !important;
  }
  
  /* Dropdowns - Full width on mobile */
  .dropdown-menu, .profile-dropdown-menu, .project-dropdown-menu, .notifications-dropdown-menu {
    min-width: 200px !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(-5px) !important;
  }
  
  .dropdown-menu.show, .profile-dropdown-menu.show, .project-dropdown-menu.show, .notifications-dropdown-menu.show {
    transform: translateY(0) !important;
  }
  
  /* Notifications dropdown mobile adjustments */
  .notifications-dropdown-menu {
    max-width: 100% !important;
  }
  
  .notification-item {
    padding: 12px 16px !important;
  }
  
  .notification-content {
    gap: 2px !important;
  }
  
  .notification-title {
    font-size: 13px !important;
  }
  
  .notification-message {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
}

/* ===== ÉTAPE 2: TABLET (769px - 1024px) ===== */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  
  /* Headers - Tablet */
  .header, .header-2, .header-3, .header-4, .header-5, .header-6, .header-7, .header-8, .header-9, .header-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  
  /* Hide mobile menu on tablet */
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .mobile-menu-overlay,
  .mobile-menu {
    display: none !important;
  }
  
  /* Content containers */
  .content-3, .body, .body-2, .body-3 {
    width: 100% !important;
    max-width: 1000px !important;
    margin: 0 auto !important;
  }
  
  /* Grid layouts - Two columns */
  .cards-grid, .cards-grid-2, .cards-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
  
  .grid-cols {
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  .col, .col-2 {
    width: 100% !important;
  }
  
  /* Cards - Responsive width */
  .card-documentation, .card-documentation-2, .card-documentation-3, .card-documentation-4, 
  .card-documentation-5, .card-documentation-6, .card-documentation-7, .card-documentation-8 {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Project panels - Maintain side by side but adjust proportions */
  .frame-14, .frame-15, .frame-16, .container-3 {
    flex-direction: row !important;
    gap: 16px !important;
  }
  
  .left-panel, .left-panel-2, .left-panel-3, .left-panel-4 {
    width: 20% !important;
    min-width: 300px !important;
  }
  
  .right-panel, .right-panel-2, .right-panel-3, .panel {
    width: 60% !important;
    flex: 1 !important;
  }
  
  /* Search input */
  .search-input, .search-input-2 {
    width: 100% !important;
    max-width: 80% !important;
  }
  
  /* Categories section */
  .categories, .categories-2 {

    overflow-x: auto !important;
  }
  
  .frame-4, .frame-7 {
    flex-direction: row !important;
    gap: 16px !important;
    min-width: 800px !important;
  }
  
  /* Navigation - Show simplified version */
  .menu-tabs, .menu-tabs-2, .menu-tabs-3, .menu-tabs-4, .menu-tabs-5, .menu-tabs-6, .menu-tabs-7, .menu-tabs-8, .menu-tabs-9 {
    display: flex !important;
  }
  
  .tabs-nav-desktop, .tabs-nav-desktop-2, .tabs-nav-desktop-3, .tabs-nav-desktop-4, 
  .tabs-nav-desktop-5, .tabs-nav-desktop-6, .tabs-nav-desktop-7, .tabs-nav-desktop-8, .tabs-nav-desktop-9 {
    padding: 10px 14px !important;
    font-size: 13px !important;
  }
  
  /* Right navigation - Compact */
  .search-nav, .search-nav-2, .search-nav-3, .search-nav-4, .search-nav-5, .search-nav-6, .search-nav-7, .search-nav-8, .search-nav-9 {
    min-width: 160px !important;
    display: flex !important;
  }
  
  .project, .project-2, .project-3, .project-4, .project-5, .project-6, .project-7, .project-8 {
    display: flex !important;
  }
  
  .panel-profile, .panel-profile-2, .panel-profile-3, .panel-profile-4, .panel-profile-5, 
  .panel-profile-6, .panel-profile-7, .panel-profile-8, .panel-profile-9 {
    display: flex !important;
  }
  
  /* Tables - Better spacing */
  .table-head {
    padding: 12px 24px !important;
  }
  
  .tile-ticketing, .tile-document, .tile-document-2 {
    padding: 16px 20px !important;
  }
}

/* ===== ÉTAPE 3: DESKTOP (1025px+) ===== */
@media screen and (min-width: 1025px) {
  
  /* Headers - Desktop */
  .header, .header-2, .header-3, .header-4, .header-5, .header-6, .header-7, .header-8, .header-9, .header-10 {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  
  /* Hide mobile menu on desktop */
  .mobile-menu-toggle {
    display: none !important;
  }
  
  .mobile-menu-overlay,
  .mobile-menu {
    display: none !important;
  }
  
  /* Content containers - Max width for large screens */
  .content-3 {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  .body, .body-2, .body-3 {
    max-width: 100% !important;
    margin: 0 auto !important;
  }
  
  /* Grid layouts - Full desktop layout */
  .cards-grid, .cards-grid-2 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
  
  .cards-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(218px, 1fr)) !important;
    gap: 12px !important;
  }
  
  .grid-cols {
    flex-direction: row !important;
    gap: 12px !important;
  }
  
  /* Cards - Original desktop sizes */
  .card-documentation, .card-documentation-2, .card-documentation-3 {
    width: 282px !important;
  }
  
  .card-documentation-4, .card-documentation-5, .card-documentation-6 {
    width: 282px !important;
  }
  
  .card-documentation-8 {
    width: 218px !important;
  }
  
  /* Project panels - Desktop layout */
  .frame-14, .frame-15, .frame-16, .container-3 {
    flex-direction: row !important;
    gap: 12px !important;
  }
  
  .left-panel, .left-panel-2, .left-panel-3, .left-panel-4 {
    width: 250px !important;
    height: 746px !important;
  }
  
  .right-panel, .right-panel-2, .right-panel-3, .panel {
    flex: 1 !important;
    padding: 40px !important;
  }
  
  /* Search input - Desktop size */
  .search-input, .search-input-2 {
    width: 647px !important;
  }
  
  /* Categories section - Desktop layout */
  .categories, .categories-2 {

    overflow-x: visible !important;
  }
  
  .frame-4, .frame-7 {
    max-width: 100% !important;
   /* width: auto !important;*/
    gap: 20px !important;
  }
  
  /* Navigation - Full desktop */
  .menu-tabs, .menu-tabs-2, .menu-tabs-3, .menu-tabs-4, .menu-tabs-5, .menu-tabs-6, .menu-tabs-7, .menu-tabs-8, .menu-tabs-9 {
    display: flex !important;
  }
  
  .right-nav, .right-nav-2, .right-nav-3, .right-nav-4, .div-3, .div-4, .div-5, .div-7, .right-nav-5 {
    gap: 12px !important;
  }
  
  .search-nav, .search-nav-2, .search-nav-3, .search-nav-4, .search-nav-5, .search-nav-6, .search-nav-7, .search-nav-8, .search-nav-9 {
    min-width: 200px !important;
  }
  
  /* All elements visible on desktop */
  .project, .project-2, .project-3, .project-4, .project-5, .project-6, .project-7, .project-8,
  .panel-profile, .panel-profile-2, .panel-profile-3, .panel-profile-4, .panel-profile-5, 
  .panel-profile-6, .panel-profile-7, .panel-profile-8, .panel-profile-9 {
    display: flex !important;
  }
  
  /* Tables - Full desktop spacing */
  .table-head {
    padding: 12px 60px 12px 68px !important;
  }
  
  .tile-ticketing {
    padding: 16px 0px !important;
  }
  
  /* Large screen optimizations */
  @media screen and (min-width: 1440px) {
    .content-3 {
      width: 100% !important;
    }
    
    .body, .body-2, .body-3 {
      max-width: 100% !important;
    }
    

  }
}

/* ===== UTILITY CLASSES FOR RESPONSIVE BEHAVIOR ===== */

/* Hide elements on specific screen sizes */
.mobile-only {
  display: block !important;
}

.tablet-only,
.desktop-only {
  display: none !important;
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .mobile-only,
  .desktop-only {
    display: none !important;
  }
  
  .tablet-only {
    display: block !important;
  }
}

@media screen and (min-width: 1025px) {
  .mobile-only,
  .tablet-only {
    display: none !important;
  }
  
  .desktop-only {
    display: block !important;
  }
}

/* Responsive text sizes */
@media screen and (max-width: 768px) {
  .responsive-title {
    font-size: 24px !important;
    line-height: 1.2 !important;
  }
  
  .responsive-subtitle {
    font-size: 18px !important;
    line-height: 1.3 !important;
  }
  
  .responsive-body {
    font-size: 14px !important;
    line-height: 1.4 !important;
  }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
  .responsive-title {
    font-size: 32px !important;
    line-height: 1.1 !important;
  }
  
  .responsive-subtitle {
    font-size: 20px !important;
    line-height: 1.2 !important;
  }
  
  .responsive-body {
    font-size: 15px !important;
    line-height: 1.4 !important;
  }
}

/* Responsive spacing */
.responsive-padding {
  padding: 16px 12px;
}

@media screen and (min-width: 769px) {
  .responsive-padding {
    padding: 24px 20px;
  }
}

@media screen and (min-width: 1025px) {
  .responsive-padding {
    padding: 32px 24px;
  }
}

/* Responsive gaps */
.responsive-gap {
  gap: 16px;
}

@media screen and (min-width: 769px) {
  .responsive-gap {
    gap: 20px;
  }
}

@media screen and (min-width: 1025px) {
  .responsive-gap {
    gap: 24px;
  }
}

/* ===== LOGIN PAGE RESPONSIVE ===== */

/* Mobile (320px - 768px) */
@media screen and (max-width: 768px) {
  .d-login {
    width: 100vw !important;
    height: 100vh !important;
    padding: 0 !important;
  }
  
  .d-login .div {
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  .d-login .overlap-group {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 2rem 1.5rem !important;
    background-color: #ffffff !important;
  }
  
  .d-login .rectangle {
    display: none !important;
  }
  
  .d-login .logo-alcatel {
    position: relative !important;
    width: 4rem !important;
    height: 4rem !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 2rem !important;
  }
  
  .d-login .frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    gap: 2rem !important;
  }
  
  .d-login .welcome-to-the-ASN {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    text-align: center !important;
  }
  
  .d-login .frame-2 {
    width: 100% !important;
    gap: 1.25rem !important;
  }
  
  .d-login .textfield {
    width: 100% !important;
    min-height: 3rem !important;
    padding: 0.875rem 1.25rem !important;
  }
  
  .d-login .CTA {
    width: 100% !important;
    padding: 1rem 2rem !important;
  }
}

/* Tablet (769px - 1024px) */
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .d-login {
    width: 100vw !important;
    height: 100vh !important;
  }
  
  .d-login .div {
    width: 100% !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
  
  .d-login .rectangle {
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  .d-login .overlap-group {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 3rem 2rem !important;
  }
  
  .d-login .logo-alcatel {
    position: relative !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 3rem !important;
  }
  
  .d-login .frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    gap: 2.5rem !important;
  }
  
  .d-login .welcome-to-the-ASN {
    font-size: 2rem !important;
    line-height: 1.1 !important;
  }
  
  .d-login .frame-2 {
    width: 100% !important;
    gap: 1.5rem !important;
  }
  
  .d-login .textfield {
    width: 100% !important;
    min-height: 3.5rem !important;
    padding: 1rem 1.5rem !important;
  }
  
  .d-login .CTA {
    width: 100% !important;
    padding: 1.25rem 2.5rem !important;
  }
}

/* Desktop (1025px - 1439px) */
@media screen and (min-width: 1025px) and (max-width: 1439px) {
  .d-login {
    width: 100% !important;
    height: 100vh !important;
  }
  
  .d-login .div {
    width: 100% !important;
    height: 100vh !important;
    display: grid !important;
    grid-template-columns: 1.5fr 1fr !important;
  }
  
  .d-login .rectangle {
    width: 100% !important;
    height: 100vh !important;
    object-fit: cover !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
  }
  
  .d-login .overlap-group {
    position: relative !important;
    width: 100% !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4rem 3rem !important;
  }
  
  .d-login .logo-alcatel {
    position: relative !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 3rem !important;
  }
  
  .d-login .frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    gap: 2.5rem !important;
  }
  
  .d-login .welcome-to-the-ASN {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }
  
  .d-login .frame-2 {
    width: 100% !important;
    gap: 1.5rem !important;
  }
  
  .d-login .textfield {
    width: 100% !important;
    min-height: 3.5rem !important;
    padding: 1rem 1.5rem !important;
  }
  
  .d-login .CTA {
    width: 100% !important;
    padding: 1.25rem 2.5rem !important;
  }
}

/* Large Desktop (1440px+) - Original Design */
@media screen and (min-width: 1440px) {
  .d-login {
    width: 100vw !important;
    height: 100vh !important;
  }
  
  .d-login .div {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    margin: 0 auto !important;
    position: relative !important;
  }
  
  .d-login .rectangle {
    position: absolute !important;
    width: 63.6% !important;
    height: 100vh !important;
    top: 0 !important;
    left: 0 !important;
    object-fit: cover !important;
  }
  
  .d-login .overlap-group {
    position: absolute !important;
    width: 36.4% !important;
    height: 100vh !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4rem !important;
  }
  
  .d-login .logo-alcatel {
    position: relative !important;
    width: 4.5rem !important;
    height: 4.5rem !important;
    top: 0 !important;
    left: 0 !important;
    margin-bottom: 4rem !important;
  }
  
  .d-login .frame {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    gap: 2.5rem !important;
  }
  
  .d-login .welcome-to-the-ASN {
    font-size: 2.25rem !important;
    line-height: 1.1 !important;
  }
  
  .d-login .frame-2 {
    width: 100% !important;
    gap: 1.375rem !important;
  }
  
  .d-login .textfield {
    width: 100% !important;
    min-height: 3rem !important;
    padding: 0.875rem 1.25rem !important;
  }
  
  .d-login .CTA {
    width: 100% !important;
    padding: 1.1875rem 2.25rem !important;
  }
}

/* Ultra-wide screens (1920px+) */
@media screen and (min-width: 1920px) {
  body{
    max-width: 80% !important;
    margin: auto !important;
  }

  .d-login .div {
    max-width: 100% !important;
  }
  
  .d-login .overlap-group {
    padding: 5rem !important;
  }
  
  .d-login .frame {
    max-width: 100% !important;
  }
  
  .d-login .welcome-to-the-ASN {
    font-size: 2.5rem !important;
  }
}

@media screen and (max-width: 1170px) {
  body{
    max-width: 95% !important;
    margin: auto !important;
  } 
}

@media screen and (max-width: 1420px) {
  body{
    max-width: 95% !important;
    margin: auto !important;
  } 
}

@media screen and (min-width: 1421px) {
  body{
    max-width: 80% !important;
    margin: auto !important;
  } 
}


/* Focus and accessibility improvements */
.d-login .textfield:focus-within {
  outline: 2px solid #00a0e6 !important;
  outline-offset: 2px !important;
}

.d-login .CTA:focus-visible {
  outline: 2px solid #ffffff !important;
  outline-offset: 2px !important;
}

/* Smooth transitions for responsive changes */
.d-login .div,
.d-login .overlap-group,
.d-login .frame,
.d-login .textfield,
.d-login .CTA {
  transition: all 0.3s ease !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .d-login .textfield {
    border: 2px solid #101010 !important;
  }
  
  .d-login .CTA {
    border: 2px solid #ffffff !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .d-login .div,
  .d-login .overlap-group,
  .d-login .frame,
  .d-login .textfield,
  .d-login .CTA {
    transition: none !important;
  }
}