/* Header Styles */
header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    background-color: transparent;
    z-index: 9999;
    color: var(--ma-grey20);
}

.navbar {
    padding: 0px;
    width: 100%;
}

.navbar-brand {
    padding: 10px 0px 10px 0px;
}

.navbar-brand img {
    height: 35px;
    filter: brightness(100);
}

.navbar-collapse {
    justify-content: flex-end !important;
}

.navbar-nav {
    margin-right: 0;
}

.nav-item {
    position: relative;
    margin-right: 10px;
}

.nav_item_mega_menu {
    position: unset;
}

.nav-link {
    padding: 27px 10px 27px 10px;
    position: relative;
    color: white;
}

.header_fix .nav-link {
    color: var(--ma-gray-900) !important;
}

.dropdown-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center !important;
    padding: 27px 25px 27px 10px !important;
}

.dropdown-toggle::after {
    content: "";
    background-image: url('data:image/svg+xml;utf8,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0.855469 11.8535L0.146484 11.1445L5.29102 6L0.146484 0.855469L0.855469 0.146484L6.70898 6L0.855469 11.8535Z" fill="rgb(96, 94, 92)"/></svg>');
    background-size: cover;
    height: 10px;
    width: 10px;
    background-position: center;
    display: inline-block;
    background-repeat: no-repeat;
    position: absolute;
    margin: 0px;
    top: 33px;
    right: 7px;
    border: none;
    transform: rotate(90deg);
    transition: all .3s ease;
    filter: brightness(100);
}

.dropdown-toggle.show::after {
    transform: rotate(270deg);
}

.dropdown:hover .dropdown-toggle::after {
    transform: rotate(270deg);
}

.dropdown-menu {
    border: none;
    box-shadow: var(--ma-depth64);
    margin-top: 0;
}

.nav-item .dropdown-item {
    font-size: var(--ma-body-text);
}

.nav-link:hover,
.nav-link:focus {
    color: var(--ma-white);
}


.clear {
    clear: both;
}

header.header_fix {
    position: fixed;
    top: 0px;
    background: white;
    box-shadow: 0 0px 10px rgba(0, 0, 0, .1);
}

header.header_fix .navbar-brand img {
    filter: unset;
}

header .header_top .nav-link {
    color: var(--ma-gray-700);
}

.read_more_link {
    color: black;
    padding: 0px !important;
    word-spacing: normal;
    font-size: .875em;
}
    .read_more_link:hover,
    .read_more_link:focus,
    .read_more_link:active {
        color: black;
        text-decoration:underline;
    }

    /* Updated CSS for mobile with and without .header_fix class */
    @media (max-width: 991px) {
        /* Without .header_fix class */
        header: not(.header_fix) .nav-link {
        color: var(--ma-gray-700) !important;
    }

    /* With .header_fix class */
    header.header_fix .nav-link {
        color: var(--ma-gray-700) !important;
    }

    header:not(.header_fix) .mobile-login-container .nav-link {
        color: var(--ma-gray-700) !important;
        background: white;
        padding: 8px 20px !important;
    }

    /* With .header_fix class */
    header.header_fix .mobile-login-container .nav-link {
        color: var(--ma-white) !important;
        background: var(--ma-type-primary);
        padding: 8px 20px !important;
    }


    /* Hover states for mobile */
    header:not(.header_fix) .nav-link:hover,
    header:not(.header_fix) .nav-link:focus {
        color: var(--ma-type-primary) !important;
    }

    header.header_fix .nav-link:hover,
    header.header_fix .nav-link:focus {
        color: var(--ma-type-primary) !important;
    }
}

header.header_fix .dropdown-toggle::after {
    filter: unset;
}

header.header_fix .nav-link:hover,
header.header_fix .nav-link:focus {
    color: var(--ma-gray-900);
}

header.header_fix .header_bottom {
    background-color: var(--ma-grey10);
    box-shadow: var(--bs-box-shadow-sm) !important;
}

.header_menu_button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--ma-type-primary);
    font-size: 15px;
    border-radius: 5px;
    background-color: transparent;
    color: var(--ma-type-primary);
    transition: all .3s ease;
    margin-top: 20px;
}

.header_menu_button:hover {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid var(--ma-type-primary);
    font-size: 15px;
    border-radius: 5px;
    background-color: var(--ma-type-primary);
    color: var(--ma-white);
    transition: all .3s ease;
}


/* Mega Menu Styles */
.products_menu {
    width: 100%;
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    max-width: unset;
    background: transparent;
    box-shadow: none;
    padding: 0px;
}

.products_menu[data-bs-popper],
.products_menu.show {
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    max-width: unset;
    border-top: 1px solid #eeeeee;
    box-shadow: 0px 8px 12px -12px grey;
}

.products_menu div.container {
    border-top: 1px solid #eeeeee;
    box-shadow: 0px 8px 12px -12px grey;
    min-height: 400px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

.products_menu div.container>div.row {
    padding: 0px;
    margin: 0px;
}

/* Product Column Styles */
.product-column {
    padding-right: 20px;
    height: 100%;
    position: relative;
}

/* Add divider line to Time Attendance and Payroll columns */
.product-column.with-divider::after {
    content: "";
    position: absolute;
    right: 0;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background-color: #eee;
}

.product-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}


.product-header i {
    position: relative;
    height: 32px;
    width: 32px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    margin-right: 15px;
}

.product-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--ma-gray-900);
}

.product-header h3 a {
    color: var(--ma-gray-900);
}

.product-header h3 a:hover,
.product-header h3 a:focus,
.product-header h3 a:active {
    color: var(--ma-gray-900);
}

.product-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-list li {
    margin-bottom: 15px;
}

.product-list li a {
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    color: var(--ma-gray-700);
    padding: 10px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.product-list li a:hover {
    background-color: #f8f9fa;
    color: var(--ma-type-primary);
}

.product-list li a i {
    font-size: 20px;
    margin-right: 12px;
    color: var(--ma-type-primary);
    margin-top: 2px;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

.product-info {
    flex: 1;
}

.product-info h4 {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--ma-gray-900);
}

.product-info p {
    font-size: 14px;
    margin: 0;
    color: #666;
    line-height: 1.4;
}

/* API Column Styles */
.api-column {
    background-color: #f0f7ff;
    border-radius: 8px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.api-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    position: relative;
}

.new-badge {
    position: absolute;
    top: -10px;
    right: -10px;
    background-color: var(--ma-type-primary);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 12px;
}

.api-header i {
    font-size: 28px;
    margin-right: 15px;
    color: var(--ma-type-primary);
}

.api-header h3 {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--ma-gray-900);
}

.api-header h3 a {
    color: var(--ma-gray-900);
}

.api-header h3 a:hover,
.api-header h3 a:focus,
.api-header h3 a:active {
    color: var(--ma-gray-900);
}

.api-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.api-content p {
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--ma-gray-700);
}

.api-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.api-features li {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 14px;
    color: var(--ma-gray-700);
}

.api-features li a {
    font-size: 14px;
    color: var(--ma-gray-700);
}

.api-features li a:hover,
.api-features li a:focus,
.api-features li a:active {
    color: var(--ma-gray-700);
}

.api-features li i {
    color: #28a745;
    margin-right: 10px;
}

.header_menu_button {
    align-self: flex-start;
    margin-top: auto;
}


/*-----------------------------------------------------------------------------*/

/*.login_btn {
    background-color: var(--ma-type-primary);
    color: white !important;
    border-radius: 5px;
    padding: 8px 20px !important;
    margin-left: 10px;
}

    .login_btn:hover {
        background-color: #0052a3;
        color: white !important;
    }*/

.login_menu {
    width: 100%;
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    max-width: unset;
    background: transparent;
    box-shadow: none;
    padding: 0px;
}

.login_menu[data-bs-popper],
.login_menu.show {
    top: 100% !important;
    left: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    max-width: unset;
    border-top: 1px solid #eeeeee;
    box-shadow: 0px 8px 12px -12px grey;
}

.login_menu div.container {
    border-top: 1px solid #eeeeee;
    box-shadow: 0px 8px 12px -12px grey;
    min-height: 400px;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
}

.login_menu div.container>div.row {
    padding: 0px;
    margin: 0px;
}



/*---contain of modal----*/
.card_sign_in_up_header h2 {
    color: var(--ma-type-primary);
    font-size: var(--ma-greeting-title);
}

.card_sign_in_up_header p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 5px;
    color: var(--ma-type-primary);
}



.card_sign_in_up {
    margin: 15px 0px;
}

.card_sign_in_up h5 {
    height: 40px;
}

.card_sign_in_up.time {
    background-color: #F9FBE7;
    padding: 20px;
    border-radius: 10px;
    color: var(--ma-tag-black);
}

.card_sign_in_up.time .inside_card_box {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #CDDC39;
}

.card_sign_in_up.time i {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0);
}

.card_sign_in_up.time h3 {
    font-size: var(--ma-pane-header);
    margin-bottom: 0px;
}

.card_sign_in_up.time h5 {
    font-size: var(--ma-subject-title);
    margin-bottom: 0px;
}

.card_sign_in_up.time p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 0px;
}

.card_actions {
    margin-top: 0px;
}

.card_sign_in_up.time .Sign_In_btn {
    font-size: var(--ma-subject-title);
    background-color: #CDDC39;
    border: 1px dashed #CDDC39;
    color: var(--ma-tag-black);
}

.card_sign_in_up.time .Sign_In_btn:hover,
.card_sign_in_up.time .Sign_In_btn:focus,
.card_sign_in_up.time .Sign_In_btn:active {
    background-color: #CDDC39;
    border: 1px dashed #CDDC39;
    color: var(--ma-tag-black);
    text-decoration: underline;
}

.card_sign_in_up.time .Sign_Up_btn {
    font-size: var(--ma-subject-title);
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
}

.card_sign_in_up.time .Sign_Up_btn:hover,
.card_sign_in_up.time .Sign_Up_btn:focus,
.card_sign_in_up.time .Sign_Up_btn:active {
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
    text-decoration: underline;
}


/*----------------------------------*/

.card_sign_in_up.edutech {
    background-color: #F1F8E9;
    padding: 20px;
    border-radius: 10px;
    color: var(--ma-tag-black);
}

.card_sign_in_up.edutech .inside_card_box {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #8BC34A;
}

.card_sign_in_up.edutech i {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0);
}

.card_sign_in_up.edutech h3 {
    font-size: var(--ma-pane-header);
    margin-bottom: 0px;
}

.card_sign_in_up.edutech h5 {
    font-size: var(--ma-subject-title);
    margin-bottom: 0px;
}

.card_sign_in_up.edutech p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 0px;
}

.card_actions {
    margin-top: 0px;
}

.card_sign_in_up.edutech .Sign_In_btn {
    font-size: var(--ma-subject-title);
    background-color: #8BC34A;
    border: 1px dashed #8BC34A;
    color: var(--ma-tag-black);
}

.card_sign_in_up.edutech .Sign_In_btn:hover,
.card_sign_in_up.edutech .Sign_In_btn:focus,
.card_sign_in_up.edutech .Sign_In_btn:active {
    background-color: #8BC34A;
    border: 1px dashed #8BC34A;
    color: var(--ma-tag-black);
    text-decoration: underline;
}

.card_sign_in_up.edutech .Sign_Up_btn {
    font-size: var(--ma-subject-title);
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
}

.card_sign_in_up.edutech .Sign_Up_btn:hover,
.card_sign_in_up.edutech .Sign_Up_btn:focus,
.card_sign_in_up.edutech .Sign_Up_btn:active {
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
    text-decoration: underline;
}


/*----------------------------------*/

.card_sign_in_up.pay {
    background-color: #FFF3E0;
    padding: 20px;
    border-radius: 10px;
    color: var(--ma-tag-black);
}

.card_sign_in_up.pay .inside_card_box {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #ff9800;
}

.card_sign_in_up.pay i {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0);
}

.card_sign_in_up.pay h3 {
    font-size: var(--ma-pane-header);
    margin-bottom: 0px;
}

.card_sign_in_up.pay h5 {
    font-size: var(--ma-subject-title);
    margin-bottom: 0px;
}

.card_sign_in_up.pay p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 0px;
}

.card_actions {
    margin-top: 0px;
}

.card_sign_in_up.pay .Sign_In_btn {
    font-size: var(--ma-subject-title);
    background-color: #ff9800;
    border: 1px dashed #ff9800;
    color: var(--ma-tag-black);
}

.card_sign_in_up.pay .Sign_In_btn:hover,
.card_sign_in_up.pay .Sign_In_btn:focus,
.card_sign_in_up.pay .Sign_In_btn:active {
    background-color: #ff9800;
    border: 1px dashed #ff9800;
    color: var(--ma-tag-black);
    text-decoration: underline;
}

.card_sign_in_up.pay .Sign_Up_btn {
    font-size: var(--ma-subject-title);
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
}

.card_sign_in_up.pay .Sign_Up_btn:hover,
.card_sign_in_up.pay .Sign_Up_btn:focus,
.card_sign_in_up.pay .Sign_Up_btn:active {
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
    text-decoration: underline;
}


/*----------------------------------*/

.card_sign_in_up.api {
    background-color: #EDE7F6;
    padding: 20px;
    border-radius: 10px;
    color: var(--ma-tag-black);
}

.card_sign_in_up.api .inside_card_box {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #9575CD;
}

.card_sign_in_up.api i {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0);
}

.card_sign_in_up.api h3 {
    font-size: var(--ma-pane-header);
    margin-bottom: 0px;
}

.card_sign_in_up.api h5 {
    font-size: var(--ma-subject-title);
    margin-bottom: 0px;
}

.card_sign_in_up.api p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 0px;
}

.card_actions {
    margin-top: 0px;
}

.card_sign_in_up.api .Sign_In_btn {
    font-size: var(--ma-subject-title);
    background-color: #9575CD;
    border: 1px dashed #9575CD;
    color: var(--ma-tag-black);
}

.card_sign_in_up.api .Sign_In_btn:hover,
.card_sign_in_up.api .Sign_In_btn:focus,
.card_sign_in_up.api .Sign_In_btn:active {
    background-color: #9575CD;
    border: 1px dashed #9575CD;
    color: var(--ma-tag-black);
    text-decoration: underline;
}

.card_sign_in_up.api .Sign_Up_btn {
    font-size: var(--ma-subject-title);
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
}

.card_sign_in_up.api .Sign_Up_btn:hover,
.card_sign_in_up.api .Sign_Up_btn:focus,
.card_sign_in_up.api .Sign_Up_btn:active {
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
    text-decoration: underline;
}

/*----------------------------------*/

.card_sign_in_up.partner {
    background-color: #E1F5FE;
    padding: 20px;
    border-radius: 10px;
    color: var(--ma-tag-black);
    /*    height: calc(100% - 30px);
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center !important;
    align-items: center !important;*/
}

.card_sign_in_up.partner .inside_card_box {
    padding: 20px;
    border-radius: 10px;
    border: 1px dashed #607D8B;
}

.card_sign_in_up.partner i {
    display: inline-block;
    height: 50px;
    width: 50px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(0);
}

.card_sign_in_up.partner h3 {
    font-size: var(--ma-pane-header);
    margin-bottom: 0px;
}

.card_sign_in_up.partner h5 {
    font-size: var(--ma-subject-title);
    margin-bottom: 0px;
}

.card_sign_in_up.partner p {
    font-size: var(--ma-body-font-size);
    margin-bottom: 0px;
}

.card_actions {
    margin-top: 0px;
}

.card_sign_in_up.partner .Sign_In_btn {
    font-size: var(--ma-subject-title);
    background-color: #5eb8ff;
    border: 1px dashed #5eb8ff;
    color: var(--ma-tag-black);
}

.card_sign_in_up.partner .Sign_In_btn:hover,
.card_sign_in_up.partner .Sign_In_btn:focus,
.card_sign_in_up.partner .Sign_In_btn:active {
    background-color: #5eb8ff;
    border: 1px dashed #5eb8ff;
    color: var(--ma-tag-black);
    text-decoration: underline;
}

.card_sign_in_up.partner .Sign_Up_btn {
    font-size: var(--ma-subject-title);
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
}

.card_sign_in_up.partner .Sign_Up_btn:hover,
.card_sign_in_up.partner .Sign_Up_btn:focus,
.card_sign_in_up.partner .Sign_Up_btn:active {
    background-color: transparent;
    border: 1px dashed var(--ma-tag-black);
    color: var(--ma-tag-black);
    text-decoration: underline;
}

/* Mobile Login Button Styles */
.mobile-login-container {
    display: none;
    margin-left: auto;
    margin-right: 15px;
}

.mobile-login-btn {
    background-color: var(--ma-type-primary);
    color: white !important;
    border-radius: 5px;
    padding: 8px 20px !important;
    font-weight: 500;
}

/* Desktop Login Button - Hide on Mobile */
.desktop-login-btn {
    display: block;
}

/* Mobile menu close button */
.mobile-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    display: none;
    z-index: 1050;
    background-color: transparent;
    border: none;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.mobile-menu-close:hover {
    opacity: 1;
}

/* Mobile Login Menu */
.mobile-login-menu {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-color: white;
    z-index: 1050;
    overflow-y: auto;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
    transform: translateX(-100%) !important;
    opacity: 1 !important;
    display: block !important;
    min-height: 100vh;
    max-height: 100vh;
    height: 100vh;
}

.mobile-login-menu.show {
    transform: translateX(0) !important;
    opacity: 1 !important;
}

/* Mobile login menu close button */
.mobile-login-menu-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background-color: transparent;
    border: none;
    opacity: 0.7;
    z-index: 1060;
    transition: opacity 0.3s ease;
}

.mobile-login-menu-close:hover {
    opacity: 1;
}

/* Desktop dropdown hover effect */
@media screen and (min-width: 992px) {
    .dropdown-menu {
        display: block;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }

    .dropdown:hover .dropdown-menu,
    .dropdown-menu.show {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.4s ease, transform 0.4s ease;
    }
}

/* Responsive adjustments for xxl screens (≥1400px) */
@media screen and (min-width: 1400px) {
    .products_menu div.container {
        max-width: 1320px;
        margin: 0 auto;
    }

    .login_menu div.container {
        max-width: 1320px;
        margin: 0 auto;
    }

    .product-header {
        margin-bottom: 25px;
    }

    .product-list li {
        margin-bottom: 18px;
    }

    .api-content p {
        margin-bottom: 25px;
    }
}

/* Responsive adjustments for xl screens (≥1200px) */
@media screen and (max-width: 1399px) and (min-width: 1200px) {
    .products_menu div.container {
        max-width: 1140px;
        margin: 0 auto;
    }

    .login_menu div.container {
        max-width: 1140px;
        margin: 0 auto;
    }
}

/* Responsive adjustments for lg screens (≥992px) */
@media screen and (max-width: 1199px) and (min-width: 992px) {
    .products_menu div.container {
        max-width: 960px;
        margin: 0 auto;
    }

    .login_menu div.container {
        max-width: 960px;
        margin: 0 auto;
    }

    .product-column {
        padding-right: 15px;
        margin-bottom: 20px;
    }

    /* Hide dividers on smaller screens */
    .product-column.with-divider::after {
        display: none;
    }

    .api-column {
        margin-bottom: 20px;
    }
}

/* Responsive adjustments for md screens (≥768px) */
@media screen and (max-width: 991px) and (min-width: 768px) {
    .products_menu {
        padding: 20px;
    }

    .product-column {
        padding-right: 0;
        margin-bottom: 25px;
    }

    .api-column {
        margin-bottom: 0;
    }

    .products_menu div.container {
        max-width: 720px;
        margin: 0 auto;
    }

    .login_menu div.container {
        max-width: 720px;
        margin: 0 auto;
    }

    .nav-link {
        padding: 15px 10px !important;
    }

    .dropdown-toggle {
        padding: 15px 25px 15px 10px !important;
    }

    .dropdown-toggle::after {
        top: 20px;
    }
}

/* Responsive adjustments for sm screens (≥576px) */
@media screen and (max-width: 767px) and (min-width: 576px) {
    .product-header {
        margin-bottom: 15px;
        padding-bottom: 10px;
    }

    .product-header i {
        font-size: 24px;
        margin-right: 10px;
    }

    .product-header h3 {
        font-size: 18px;
    }

    .product-list li {
        margin-bottom: 10px;
    }

    .product-list li a {
        padding: 8px;
    }

    .product-list li a i {
        font-size: 18px;
        margin-right: 10px;
    }

    .product-info h4 {
        font-size: 15px;
    }

    .product-info p {
        font-size: 13px;
    }

    .api-header {
        margin-bottom: 15px;
    }

    .api-header i {
        font-size: 24px;
        margin-right: 10px;
    }

    .api-header h3 {
        font-size: 18px;
    }

    .api-content p {
        font-size: 15px;
        margin-bottom: 15px;
    }

    .api-features li {
        font-size: 13px;
        margin-bottom: 8px;
    }

    .header_menu_button {
        padding: 8px 16px;
        font-size: 14px;
    }

    .products_menu div.container {
        max-width: 540px;
        margin: 0 auto;
    }

    .login_menu div.container {
        max-width: 540px;
        margin: 0 auto;
    }

    .card_sign_in_up {
        margin-bottom: 15px;
    }
}

/* Responsive adjustments for xs screens (<576px) */
@media screen and (max-width: 575px) {
    .products_menu {
        padding: 15px;
    }

    .product-header {
        margin-bottom: 12px;
        padding-bottom: 8px;
    }

    .product-header i {
        font-size: 22px;
        margin-right: 8px;
    }

    .product-header h3 {
        font-size: 16px;
    }

    .product-list li {
        margin-bottom: 8px;
    }

    .product-list li a {
        padding: 6px;
    }

    .product-list li a i {
        font-size: 16px;
        margin-right: 8px;
    }

    .product-info h4 {
        font-size: 14px;
    }

    .product-info p {
        font-size: 12px;
    }

    .api-header {
        margin-bottom: 12px;
    }

    .api-header i {
        font-size: 22px;
        margin-right: 8px;
    }

    .api-header h3 {
        font-size: 16px;
    }

    .api-content p {
        font-size: 14px;
        margin-bottom: 12px;
    }

    .api-features li {
        font-size: 12px;
        margin-bottom: 6px;
    }

    .header_menu_button {
        padding: 6px 14px;
        font-size: 13px;
    }

    .products_menu div.container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .login_menu div.container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .nav-link {
        padding: 12px 8px !important;
    }

    .dropdown-toggle {
        padding: 12px 20px 12px 8px !important;
    }

    .dropdown-toggle::after {
        top: 17px;
    }

    .navbar-brand img {
        height: 30px;
    }

    .card_sign_in_up_header h2 {
        font-size: 24px;
    }

    .card_sign_in_up_header p {
        font-size: 14px;
    }

    .card_sign_in_up {
        margin-bottom: 15px;
    }

    .card_sign_in_up h3 {
        font-size: 18px;
    }

    .card_sign_in_up h5 {
        font-size: 14px;
    }

    .Sign_In_btn,
    .Sign_Up_btn {
        font-size: 14px;
        padding: 6px 12px;
    }
}

/* Mobile Menu Scrolling Fix */
@media (max-width: 991px) {

    /* Show mobile login button */
    .mobile-login-container {
        display: block;
    }

    /* Hide desktop login button */
    .desktop-login-btn {
        display: none;
    }

    /* Show mobile menu close button */
    .mobile-menu-close {
        display: block;
    }

    /* Fix mobile menu scrolling */
    .navbar-collapse {
        position: fixed;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-color: white;
        z-index: 1000;
        overflow-y: auto;
        padding: 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
        transform: translateX(-100%) !important;
        opacity: 1 !important;
        display: block !important;
        min-height: 100vh;
        max-height: 100vh;
        height: 100vh;
    }

    .navbar-collapse.show {
        transform: translateX(0) !important;
        opacity: 1 !important;
    }

    /* Adjust dropdown menus in mobile view */
    .dropdown-menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .products_menu,
    .login_menu {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin-top: 0 !important;
        padding: 0 !important;
    }

    .products_menu div.container,
    .login_menu div.container {
        padding: 0;
        max-width: 100%;
    }

    /* Adjust navbar-toggler position */
    .navbar-toggler {
        /*        margin-left: auto;*/
        margin-right: 15px;
        border-color: white;
        color: white;
    }

    .header_fix .navbar-toggler {
        border-color: black;
        color: black;
    }


    /* Adjust navbar-brand for mobile */
    .navbar-brand {
        margin-right: 0;
    }

    /* Adjust nav items for mobile */
    .nav-item {
        margin-right: 0;
        margin-bottom: 10px;
    }

    /* Adjust dropdown toggle for mobile */
    .dropdown-toggle {
        padding: 10px 0 !important;
    }

    .dropdown-toggle::after {
        display: none;
    }

    /* Adjust header for mobile */
    header {
        height: 70px;
    }

    /* Adjust product columns for mobile */
    .product-column {
        margin-bottom: 30px;
    }

    .product-column.with-divider::after {
        display: none;
    }

    /* Adjust API column for mobile */
    .api-column {
        margin-bottom: 0;
    }

    /* Show mobile login menu */
    .mobile-login-menu {
        display: block;
    }

    /* Fix login menu for mobile */
    .login_menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 20px !important;
        overflow-y: auto;
        z-index: 1050;
        background-color: white;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
}

/* =========================================
   New Product Dropdown Styles (4-Column)
   ========================================= */

/* Wrapper & Layout */
.product-dropdown-wrapper {
    background: #fff;
    min-height: 400px;
    /* Ensure visual balance */
}

/* Common Column Headers */
.column-header {
    font-size: 16px;
    font-weight: 700;
    color: var(--ma-gray-900);
    text-transform: capitalize;
    display: flex;
    align-items: center;
    padding: 12px 8px;
    border-radius: 8px;
    margin-bottom: 32px;
}

    .column-header i {
        font-size: 18px;
        color: var(--ma-type-primary);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 8px;
        background: white;
        padding: 4px;
        border-radius: 4px;
    }

/* 1. Platform Column */
/*.platform-column {
    border-right: 1px solid #eee;
}*/
.product_column {
    padding: 32px 18px;
}

.platform-nav .nav-link {
    color: var(--ma-gray-700);
    font-weight: 500;
    padding: 12px 15px;
    border-radius: 8px;
    margin-bottom: 5px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    background: transparent;
    /* Reset default nav-link bg */
}

.header_fix .platform-nav .nav-link {
    color: var(--ma-gray-700) !important;
}

.platform-nav .nav-link:hover {
    background-color: #f8f9fa;
    color: var(--ma-type-primary) !important;
}

.platform-nav .nav-link.active {
    background-color: #F4F8FF;
    color: var(--ma-type-primary) !important;
/*    font-weight: 600;*/
}

.platform-nav .nav-link i {
    font-size: 20px;
    color: #6c757d;
    transition: all 0.2s ease;
    object-fit: contain;
    height: 24px;
    width: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: grayscale(100%);
    margin-right: 10px;
}

.platform-nav .nav-link:hover i,
.platform-nav .nav-link.active i {
    filter: grayscale(0%);
    color: var(--ma-type-primary);
}

/* 2. Features Column */
.features-column {
    min-height: 480px;
    /* Match height of platform column roughly */
}

.feature-list li,
.operation-list li {
    /*    margin: 8px 0px;*/
    padding: 16px;
    border-radius: 8px;
    cursor: pointer;
}

.feature-list li:hover,
.operation-list li:hover {
    background-color: #F4F8FF;
}

.feature-list a, .operation-list a {
    color: var(--ma-gray-700);
    text-decoration: none;
    font-size: 14px;
    display: flex;
    align-items: center;
    transition: color 0.2s;
}

.feature-list li:hover a, .operation-list li:hover a, .feature-list li:hover i, .operation-list li:hover i {
    color: var(--ma-type-primary);
}

.feature-list i {
    font-size: 18px;
    color: #b0b0b0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 3. Operations Column */
.operations-column {
    border-right: 1px solid #eee;
}

.operations-column h6 {
    font-size: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid #E6E6E6;
}

.operation-list i {
    font-size: 18px;
    color: #b0b0b0;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 4. API Integration Column */
.api-integration-column {
    background-color: #f0f7ff;
    padding: 32px 44px;
}

.api-list li {
    margin-bottom: 12px;
}

.api-list a {
    color: var(--ma-gray-900);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.api-list a:hover {
    color: var(--ma-type-primary);
    text-decoration: underline;
}
.explore_api_price_btn {
    border: 1.5px solid #89ACED;
    background-color: white;
    color: #295097;
    width: 100%;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
}
/* Responsive Handling for Mobile Dropdown (Reuse existing logic or standard stacking) */
@media (max-width: 991px) {
    .product-dropdown-wrapper .row>div {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
    header .nav-link {
        color: var(--ma-gray-700) !important;
    }
    .features-column {
        min-height: auto;
        background: #fff;
    }

    /* Hide the complex platform tabs on mobile and just show a simple list if needed 
       But current HTML structure will show all columns stacked. 
       Feature Groups are hidden by d-none, so they won't show on mobile unless hovered?
       Wait, hover on mobile is touch. 
       
       Strategy for Mobile:
       - Since user said "responsive till 992px" and "dont do anything for smaller size",
         I will ensure it's legible if it wraps.
       - The script uses `mouseenter` which works poorly on touch, but `click` logic isn't strictly requested.
       - I'll add a rule to SHOW the first feature group by default or similar if desired, 
         but technically 'dont do anything' implies leaving it as is.
       - Actually, checking logic: Platform links are generic links. 
         If I click "Time Attendance", it executes the HREF.
         The hover script prevents default? No, it just adds active class.
         So on mobile, clicking the link likely goes to the page, which is fine.
    */
    .platform-nav .nav-link {
        padding: 10px 0;
    }
}