:root {
    --primary-blue     : #009CD0;
    --primary-blue-dark: #1d4ed8;
    --text-dark        : #333;
    --text-light       : #666;
    --border-color     : #e5e7eb;
}

.modal-xxl {
    max-width: 80vw;
}

* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

body {
    font-family: 'Roboto', sans-serif;
    padding-top: 0;
    min-width  : 320px;
}

.top-header {
    background   : #ffffff;
    padding      : 12px 0;
    border-bottom: 1px solid var(--border-color);
    position     : relative;
    z-index      : 1050;
    transition   : all 0.3s ease;
}


.navbar {
    background: white;
    width     : 100%;
    transition: top 0.3s ease;
}

.top-header-content {
    padding        : 0 20px;
    padding-left   : 50px;
    padding-right  : 50px;
    display        : flex;
    justify-content: space-between;
    align-items    : center;
    flex-wrap      : wrap;
}

.logo-section {
    display    : flex;
    align-items: center;
    gap        : 15px;
}

.logo-container img {
    height: 60px;
}

.logo-divider {
    height    : 2px;
    background: var(--primary-blue);
    width     : 100%;
    margin-top: 5px;
}

.contact-info {
    display    : flex;
    gap        : 45px;
    align-items: flex-start;
    flex-wrap  : wrap;
}

.contact-item {
    display    : flex;
    align-items: center;
    gap        : 10px;
    position   : relative;
}

.contact-item::before {
    content         : '';
    position        : absolute;
    top             : 50%;
    right           : -21px;
    transform       : translateY(-50%);
    width           : 1px;
    height          : 60%;
    background-color: var(--border-color);
}

.contact-item:last-of-type::before {
    content: none;
}

.contact-item i {
    color      : var(--primary-blue);
    font-size  : 24px;
    margin-top : 2px;
    flex-shrink: 0;
}

.contact-item-content {
    display       : flex;
    flex-direction: column;
    gap           : 2px;
    overflow      : hidden;
}

.contact-item .label {
    color      : var(--text-light);
    font-size  : 15px;
    font-weight: 400;
    line-height: 1.4;
}

.contact-item .value {
    color      : var(--text-dark);
    font-weight: 500;
    font-size  : 16px;
    line-height: 1.4;
    display    : inline-block;
    white-space: nowrap;
    will-change: transform;
}

.contact-item-content .value.scroll {
    animation: scroll-left 10s linear infinite;
}
.announcement-container {
    overflow: hidden; 
    white-space: nowrap;
    width: 500px; 
    position: relative;
}

.announcement-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    display: inline-block; 
    padding-left: 100%;   
    animation: scroll-left 15s linear infinite; 
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-100%);
    }
}

@keyframes scroll-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-80%);
    }
}

.language-selector {
    display       : flex;
    flex-direction: row;
    align-items   : center;
    gap           : 8px;
    cursor        : pointer;
    border-radius : 4px;
    transition    : background 0.2s;
    min-width     : 80px;
    position      : relative;
}

.language-selector:hover {
    background: #f3f4f6;
}

.language-selector-header {
    display       : flex;
    align-items   : center;
    flex-direction: row;
    gap           : 6px;
}

.language-selector .flag {
    width        : 24px;
    height       : 19px;
    object-fit   : cover;
    border-radius: 2px;
}

.language-selector .language-label {
    font-size  : 15px;
    color      : var(--text-light);
    font-weight: 400;
}

.language-selector .language-text {
    font-size  : 16px;
    color      : var(--text-dark);
    font-weight: 600;
    display    : flex;
    align-items: center;
    gap        : 4px;
}

.language-selector .language-text i {
    font-size: 10px;
    color    : var(--text-light);
}

.language-dropdown {
    display   : none;
    position  : fixed;
    top       : 70px;
    right     : 20px;
    background: white;
    border    : 1px solid #ccc;
    list-style: none;
    padding   : 5px 0;
    margin    : 0;
    width     : 180px;
    z-index   : 999;
}

.language-dropdown li a {
    display    : flex;
    align-items: center;
    gap        : 6px;
    padding    : 6px 12px;
}

.flag {
    width : 20px;
    height: 14px;
}

.language-dropdown li a:hover {
    background: #eee;
    text-decoration: none;
}

.language-selector.open .language-dropdown {
    display: block;
}

.main-navbar {
    background: #ffffff;
    padding   : 0;
    position  : relative;
    top       : 0;
    left      : 0;
    right     : 0;
    z-index   : 1030;
    transition: transform 0.6s ease;
}

.main-navbar.fixed {
    position  : fixed !important;
    top       : -2px !important;
    left      : 0;
    right     : 0;
    z-index   : 1031;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    animation : slideDownNavbar 0.5s ease forwards;
}

@keyframes slideDownNavbar {
    0% {
        transform: translateY(-100%);
        opacity  : 0;
    }

    100% {
        transform: translateY(0);
        opacity  : 1;
    }
}

.navbar-content {
    padding        : 0 20px;
    padding-left   : 60px;
    padding-right  : 50px;
    display        : flex;
    justify-content: flex-start;
    align-items    : center;
    width          : 100%;
}

.navbar-nav {
    display   : flex;
    list-style: none;
    margin    : 0;
    padding   : 0;
    gap       : 30px;
}

.nav-item {
    position: relative;
}

.nav-link {
    position       : relative;
    display        : flex;
    align-items    : center;
    padding        : 15px 0px !important;
    color          : var(--text-dark) !important;
    text-decoration: none;
    font-size      : 16px;
    font-weight    : 600;
    transition     : color 0.3s ease;
    border         : none;
    background     : none;
    cursor         : pointer;
}

.nav-link::before {
    content         : "";
    position        : absolute;
    top             : -2px;
    left            : 0;
    width           : 100%;
    height          : 4px;
    background-color: var(--primary-blue);
    transform       : scaleX(0);
    transform-origin: left;
    transition      : transform 0.5s ease;
}

.nav-link:hover::before,
.nav-item.active .nav-link::before {
    transform: scaleX(1);
}

.nav-link:hover,
.nav-item.active .nav-link {
    color: var(--primary-blue) !important;
}


.nav-link i {
    font-size  : 12px;
    margin-left: 5px;
}

.navbar-actions {
    display    : flex;
    align-items: center;
    gap        : 15px;
    margin-left: auto;
}

.search-box {
    position   : relative;
    display    : flex;
    align-items: center;
}

.search-icon {
    font-size : 18px;
    color     : var(--text-dark);
    font-size : 18px;
    cursor    : pointer;
    padding   : 8px;
    transition: all 0.3s;
}

.search-input {
    position     : absolute;
    right        : 0;
    width        : 0;
    opacity      : 0;
    padding      : 6px;
    border       : 1px solid #ccc;
    border-radius: 18px;
    transition   : width 0.3s ease, opacity 0.3s;
}

.search-box:hover .search-input,
.search-input:focus {
    width  : 250px;
    opacity: 1;
}

.search-icon:hover {
    color: var(--primary-blue);
}

.divider {
    width     : 1px;
    height    : 30px;
    background: var(--border-color);
}

.quote-btn {
    background         : linear-gradient(to left, var(--primary-blue) 0%, var(--primary-blue) 50%, black 50%, black 100%);
    background-size    : 250% 100%;
    background-position: right bottom;
    color              : #ffffff !important;
    border             : none;
    padding            : 10px 24px !important;
    border-radius      : 4px;
    font-weight        : 600;
    font-size          : 15px;
    cursor             : pointer;
    display            : flex;
    align-items        : center;
    gap                : 8px;
    text-decoration    : none;
    transition         : background-position 0.4s ease-in-out;
}

.quote-btn:hover {
    background-position: left bottom;
    color              : #ffffff;
    text-decoration    : none;
}

.quote-btn i {
    font-size: 12px;
}

.dropdown-menu {
    border       : none;
    box-shadow   : 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    padding      : 8px 0;
    margin-top   : 0;
    min-width    : 200px;
    border-bottom: 4px solid var(--primary-blue);
}

.mega-parent .mega-dropdown {
    border       : none;
    box-shadow   : 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    padding      : 10px 0;
    min-width    : 250px;
    border-bottom: 4px solid var(--primary-blue);
    position     : absolute;
}

.dropdown-submenu {
    position: relative;
}

.dropdown-item.has-child::after {
    content  : "›";
    font-size: 14px;
    color    : #999;
}

.dropdown-submenu-content {
    position     : absolute;
    top          : 0;
    left         : 100%;
    min-width    : 240px;
    background   : #fff;
    border-radius: 4px;
    padding      : 8px 0;
    box-shadow   : 0 4px 10px rgba(0, 0, 0, 0.12);
    border-bottom: 4px solid var(--primary-blue);
    opacity      : 0;
    visibility   : hidden;
    transform    : translateX(5px);
    transition   : all 0.2s ease;
    z-index      : 999;
}

.dropdown-submenu:hover>.dropdown-submenu-content {
    opacity   : 1;
    visibility: visible;
    transform : translateX(0);
}

.dropdown-item {
    padding        : 10px 20px;
    font-size      : 14px;
    color          : var(--text-dark);
    display        : flex;
    justify-content: space-between;
    align-items    : center;
}

.dropdown-item:hover {
    background     : #f3f4f6;
    color          : var(--primary-blue);
    text-decoration: none;
}

.main-footer {
    background-color: #191f23;
    color           : #ffffff;
    padding-top     : 50px;
    font-size       : 16px;
    position        : relative;
    background-image: url(../img/bg-footer2.png);
    background-repeat: no-repeat;
    background-size  : contain;
    background-position: center;
}

.footer-title {
    font-size    : 18px;
    font-weight  : bold;
    color        : #ffffff;
    margin-bottom: 25px;
}

.footer-logo img {
    height       : 110px;
    margin-left  : 0px;
    margin-bottom: 30px;
}

.footer-about {
    color        : #cccccc;
    line-height  : 1.6;
    margin-bottom: 30px;
}

.social-links a {
    display         : inline-flex;
    justify-content : center;
    align-items     : center;
    width           : 35px;
    height          : 35px;
    background-color: transparent;
    color           : #ffffff;
    border          : 1px solid #3A3A3A;
    border-radius   : 4px;
    margin-right    : 10px;
    transition      : all 0.3s;
}

.social-links a:hover {
    background-color: #007bff;
    border-color    : #007bff;
    text-decoration : none;
}

.contact-info-list,
.quick-links-list {
    list-style: none;
    padding   : 0;
    margin    : 0;
}

.contact-info-list li {
    position     : relative;
    color        : #cccccc;
    margin-bottom: 15px;
    line-height  : 1.5;
}

.contact-info-list i {
    color       : #6B6B6B;
    margin-right: 10px;
    width       : 15px;
    text-align  : center;
}

.quick-links-list li a {
    color          : #cccccc;
    text-decoration: none;
    display        : block;
    padding        : 5px 0;
    transition     : color 0.3s;
}

.quick-links-list li a:hover {
    text-decoration: underline;
    color          : white
}

.quick-links-list li:hover::before {
    background-color: white;
}

.quick-links-list li {
    display      : flex;
    align-items  : center;
    margin-bottom: 5px;
}

.quick-links-list li::before {
    content         : "";
    display         : inline-block;
    width           : 5px;
    height          : 5px;
    background-color: var(--primary-blue);
    margin-right    : 10px;
    vertical-align  : middle;
    transition      : all 0.2s linear;
}


.newsletter-form {
    display      : flex;
    margin-top   : 15px;
    margin-bottom: 15px;
    position     : relative;
}

.newsletter-form .form-control {
    border-radius: 0;
    border       : none;
    height       : 50px;
    flex-grow    : 1;
    padding      : 0 10px;
    font-size    : 14px;
    position     : relative;
}

.newsletter-form .btn {
    border-radius   : 0;
    background-color: var(--primary-blue);
    border          : 1px solid var(--primary-blue);
    color           : #ffffff;
    width           : 40px;
    height          : 40px;
    position        : absolute;
    top             : 5px;
    right           : 5px;
    padding         : 0;
}

.newsletter-form .btn i {
    display   : inline-block;
    transition: transform 0.4s ease;
    font-size : 18px;
}

.newsletter-form .btn:hover i {
    animation: slideOutIn 0.4s ease forwards;
}

@keyframes slideOutIn {
    0% {
        transform: translateX(0);
        opacity  : 1;
    }

    40% {
        transform: translateX(20px);
        opacity  : 0;
    }

    41% {
        transform: translateX(-20px);
        opacity  : 0;
    }

    100% {
        transform: translateX(0);
        opacity  : 1;
    }
}

.footer-question a {
    color          : #ccc !important;
    text-decoration: underline;
}

.footer-question a:hover {
    color          : #ccc !important;
    text-decoration: none;
}

.footer-question {
    color: #cccccc;
}

.footer-bottom {
    background-color: #151719;
    padding         : 15px 0;
    margin-top      : 50px;
    font-size       : 14px;
}

.copyright-text {
    margin: 0;
    color : #cccccc;
}

.footer-utility-links a {
    color          : #cccccc;
    text-decoration: none;
    margin-left    : 15px;
    position       : relative;
}

.footer-utility-links span {
    color: #cccccc;
}

.footer-utility-links a::before {
    content  : "•";
    position : absolute;
    left     : -8px;
    color    : #cccccc;
    font-size: 16px;
}

.footer-utility-links a:first-child::before {
    content: none;
}

.mobile {
    display: none;
}

.desktop {
    display: block;
}

.mobile-dropdown {
    display: none;
}

.footer-title2 {
    display        : flex;
    justify-content: space-between;
}
.sticky-footer-bar {
    position: fixed;
    bottom: -1px;
    left: 0;
    width: 100%;
    background-color: #005D8C;
    color: white;
    z-index: 20;
    padding: 12px 20px;
}

.sticky-bar-container {
    display: flex;
    align-items: center;
    justify-content: center; 
    max-width: 100%;
    margin: 0 auto;
    position: relative;
}

.left-content {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-right: 20px;
}

.right-content {
    display: flex;
    align-items: center;
}

.badge-recruitment {
  background-color: #e31e24;
  color: #ffffff;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  white-space: nowrap;
  text-transform: uppercase;
}
.announcement-text {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
}

.right-content {
    display: flex;
    align-items: center;
    gap: 20px;
}

.btn-apply {
  background-color: #ffffff; 
  color: #003d82; 
  padding: 8px 25px;
  border-radius: 50px; 
  font-weight: bold;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out;
  font-size: 14px;
  border: none; 
  display: inline-block;
}

.btn-apply:hover {
  transform: scale(1.05);
  background-color: #f0f0f0;
  color: #002a5a; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
}

.close-sticky-bar {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 18px;
    opacity: 0.8;
        margin-left: 20px;
}

.close-sticky-bar:hover { opacity: 1; }

/* Định nghĩa hiệu ứng rung */
@keyframes ring-bell {
  0% { transform: rotate(0); }
  10% { transform: rotate(15deg); }
  20% { transform: rotate(-15deg); }
  30% { transform: rotate(10deg); }
  40% { transform: rotate(-10deg); }
  50% { transform: rotate(5deg); }
  60% { transform: rotate(-5deg); }
  70% { transform: rotate(0); }
  100% { transform: rotate(0); }
}

.badge-recruitment .icon {
  display: inline-block;
  animation: ring-bell 1.5s ease-in-out infinite; 
  transform-origin: top center;
}

@media (max-width: 768px) {
    .sticky-footer-bar {
        padding: 15px 10px 10px 10px; 
    }

    .sticky-bar-container {
        gap: 10px;
        flex-direction: column;
        align-items: center;
        text-align: center;
        position: relative; 
    }
  
    .left-content {
        flex-direction: column;
        gap: 5px;
        margin-right: 0px;
    }

    .close-sticky-bar {
        position: absolute;
        top: -5px;
        right: 0;
        padding: 5px;
        font-size: 20px; 
    }

    .announcement-text {
        font-size: 12px;
        padding: 0 15px; 
        margin-top:10px;
    }
    .announcement-container{
           width: 300px;
    }

    .btn-apply {
        padding: 6px 20px;
        font-size: 13px;
        width: 100%; 
        max-width: 200px;
    }
}
@media (max-width: 450px) {
    .language-selector {
        min-width: 55px;
    }
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .mobile-top-nav {
        display   : block;
        position  : fixed;
        top       : 0;
        width     : 100%;
        z-index   : 1020;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .mobile-top-nav .container-fluid {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        padding        : 10px 15px;
    }

    .menu-toggle-container {
        position : relative;
        width    : 30px;
        height   : 30px;
        cursor   : pointer;
        font-size: 24px;
    }

    .mobile-nav-actions {
        display    : flex;
        align-items: center;
        gap        : 10px;
    }

    .menu-open-icon,
    .menu-close-icon {
        position  : absolute;
        top       : 50%;
        left      : 50%;
        transform : translate(-50%, -50%);
        transition: opacity 0.3s;
        color     : #333;
    }

    .menu-open-icon {
        opacity: 1;
    }

    .menu-close-icon {
        opacity       : 0;
        pointer-events: none;
    }

    body.menu-open #openMenuIcon {
        opacity       : 0;
        pointer-events: none;
    }

    body.menu-open #closeMenuIcon {
        opacity       : 1;
        pointer-events: auto;
    }

    .mobile-menu-dropdown {
        position        : fixed;
        top             : 74px;
        width           : 85%;
        z-index         : 1010;
        background-color: #fff;
        box-shadow      : 0 5px 5px rgba(0, 0, 0, 0.1);
        display         : none;
        overflow-y      : auto;
        height          : calc(100vh - 70px)
    }

    .mobile-nav-list {
        list-style: none;
        padding   : 0;
        margin    : 0;
        border-top: 1px solid #eee;
    }

    .mobile-nav-item {
        border-bottom: 1px solid #eee;
    }

    .mobile-nav-item a {
        display        : block;
        padding        : 20px 58px 20px 20px;
        color          : #333;
        text-decoration: none;
        font-weight    : 500;
        white-space    : normal;
        line-height    : 1.3;
        height         : auto
    }

    .mobile-nav-item>a {
        white-space: normal;
        line-height: 1.2;
        height     : auto;
    }

    .mobile-submenu-title {
        display      : block;
        padding      : 10px 5px 7px 20px;
        color        : var(--primary-blue);
        font-weight  : 500;
        margin-top   : 10px;
        border-bottom: 1px solid #eee;
    }

    .mobile-dropdown-menu li a.mobile-submenu-item {
        font-weight: 400;
        padding    : 10px 20px 10px 40px;
        white-space: normal;
        line-height: 1.3;
        height     : auto;
        font-size  : 15px;
    }

    .mobile-submenu-item1 {
        padding: 9px 5px 7px 0px !important;
    }

    .mobile-dropdown-menu li a {
        font-weight: 400;
    }

    .mobile-nav-item.has-dropdown {
        position: relative;
        display : block;
    }

    .mobile-nav-item>.dropdown-toggle-icon {
        position        : absolute;
        right           : 15px;
        top             : 5px;
        cursor          : pointer;
        color           : black;
        background-color: #00000014;
    }

    .dropdown-toggle-icon:before {
        transition: transform 0.3s ease;
        transform : rotate(0deg);
        display   : inline-block;
    }

    .dropdown-toggle-icon.rotated:before {
        transform: rotate(180deg);
    }

    .mobile-nav-item.has-dropdown a {
        flex-grow: 1;
    }

    .dropdown-toggle-icon {
        padding   : 12px 15px;
        cursor    : pointer;
        color     : #999;
        transition: transform 0.3s;
    }

    .mobile-dropdown-menu {
        display         : none;
        list-style      : none;
        padding         : 0;
        background-color: #f7f7f7;
        width           : 100%;
        overflow        : hidden;
    }

    .mobile-dropdown-menu li a {
        display: block;
        padding: 10px 5px 7px 40px;
        color  : #555;
    }

    .mobile-quote-action {
        padding   : 15px;
        border-top: 1px solid #eee;
    }

    .quote-btn {
        width: fit-content;
    }

    .footer-logo img {
        margin-bottom: 30px;
    }

    .social-links {
        margin-bottom: 30px;
    }

    .contact-info-list,
    .quick-links-list {
        margin-bottom: 35px;
    }

    .footer-title {
        margin-bottom : 5px;
        padding-bottom: 10px;
    }

    .footer-title2 {
        flex-direction: column;
    }

    .search-box:hover .search-input,
    .search-input:focus {
        width  : 150px;
        opacity: 1;
    }
}

@media (min-width: 460px) and (max-width: 991px) {
    .mobile {
        display: block;
    }

    .desktop {
        display: none;
    }

    .mobile-top-nav {
        display   : block;
        position  : fixed;
        top       : 0;
        width     : 100%;
        z-index   : 1020;
        background: #fff;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    .mobile-top-nav .container-fluid {
        display        : flex;
        justify-content: space-between;
        align-items    : center;
        padding        : 10px 15px;
    }

    .menu-toggle-container {
        position : relative;
        width    : 30px;
        height   : 30px;
        cursor   : pointer;
        font-size: 24px;
    }

    .mobile-nav-actions {
        display    : flex;
        align-items: center;
        gap        : 10px;
    }

    .menu-open-icon,
    .menu-close-icon {
        position  : absolute;
        top       : 50%;
        left      : 50%;
        transform : translate(-50%, -50%);
        transition: opacity 0.3s;
        color     : #333;
    }

    .menu-open-icon {
        opacity: 1;
    }

    .menu-close-icon {
        opacity       : 0;
        pointer-events: none;
    }

    body.menu-open #openMenuIcon {
        opacity       : 0;
        pointer-events: none;
    }

    body.menu-open #closeMenuIcon {
        opacity       : 1;
        pointer-events: auto;
    }

    .mobile-menu-dropdown {
        position        : fixed;
        top             : 74px;
        width           : 85%;
        z-index         : 1010;
        background-color: #fff;
        box-shadow      : 0 5px 5px rgba(0, 0, 0, 0.1);
        display         : none;
        overflow-y      : auto;
        height          : calc(100vh - 70px)
    }

    .mobile-nav-list {
        list-style: none;
        padding   : 0;
        margin    : 0;
        border-top: 1px solid #eee;
    }

    .mobile-nav-item {
        border-bottom: 1px solid #eee;
    }

    .mobile-nav-item a {
        display        : block;
        padding        : 20px 58px 20px 20px;
        color          : #333;
        text-decoration: none;
        font-weight    : 500;
        white-space    : normal;
        line-height    : 1.3;
        height         : auto
    }

    .mobile-nav-item>a {
        white-space: normal;
        line-height: 1.2;
        height     : auto;
    }

    .mobile-submenu-title {
        display      : block;
        padding      : 10px 5px 7px 20px;
        color        : var(--primary-blue);
        font-weight  : 500;
        margin-top   : 10px;
        border-bottom: 1px solid #eee;
    }

    .mobile-dropdown-menu li a.mobile-submenu-item {
        font-weight: 400;
        padding    : 10px 20px 10px 40px;
        white-space: normal;
        line-height: 1.3;
        height     : auto;
        font-size  : 15px;
    }

    .mobile-dropdown-menu li a {
        font-weight: 400;
    }

    .mobile-nav-item.has-dropdown {
        position: relative;
        display : block;
    }

    .mobile-nav-item>.dropdown-toggle-icon {
        position        : absolute;
        right           : 15px;
        top             : 5px;
        cursor          : pointer;
        color           : black;
        background-color: #00000014;
    }

    .dropdown-toggle-icon:before {
        transition: transform 0.3s ease;
        transform : rotate(0deg);
        display   : inline-block;
    }

    .dropdown-toggle-icon.rotated:before {
        transform: rotate(180deg);
    }

    .mobile-nav-item.has-dropdown a {
        flex-grow: 1;
    }

    .dropdown-toggle-icon {
        padding   : 12px 15px;
        cursor    : pointer;
        color     : #999;
        transition: transform 0.3s;
    }

    .mobile-dropdown-menu {
        display         : none;
        list-style      : none;
        padding         : 0;
        background-color: #f7f7f7;
        width           : 100%;
        overflow        : hidden;
    }

    .mobile-dropdown-menu li a {
        display: block;
        padding: 10px 5px 7px 40px;
        color  : #555;
    }

    .mobile-quote-action {
        padding   : 15px;
        border-top: 1px solid #eee;
    }

    .quote-btn {
        width: fit-content;
    }

    .footer-logo img {
        margin-bottom: 30px;
    }

    .social-links {
        margin-bottom: 30px;
    }

    .contact-info-list,
    .quick-links-list {
        margin-bottom: 35px;
    }

    .footer-title {
        margin-bottom : 5px;
        padding-bottom: 10px;
    }

    .footer-title2 {
        flex-direction: column;
    }

    .search-box:hover .search-input,
    .search-input:focus {
        width  : 150px;
        opacity: 1;
    }
}

@media (min-width: 992px) and (max-width: 1299px) {
    .contact-item .value {
        max-width: 300px !important;
    }
}

.contact-item .value {
        max-width: 400px
    }

    
    /* otp modal */
    .otp-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        backdrop-filter: blur(3px);
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 9999;
    }
    @keyframes bankModalIn {
    0% {
        opacity: 0;
        transform: translateY(60px) scale(0.9);
    }

    60% {
        opacity: 1;
        transform: translateY(-6px) scale(1.01);
    }

    100% {
        transform: translateY(0) scale(1);
    }
    }
    .otp-card {
        background: #fff;
        border-radius: 24px;
        padding: 36px 32px;
        width: 380px;
        text-align: center;
        box-shadow: 0 20px 60px rgba(0,0,0,.12);
        animation: bankModalIn 0.35s cubic-bezier(0.22, 1, 0.36, 1);

    }

    .otp-icon {
        width: 64px;
        height: 64px;
        background: #e6f3fa; 
        border-radius: 50%;
        margin: 0 auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .otp-icon i {
        font-size: 28px;
        color: #005D8C;
    }

    .otp-card h2 {
        font-size: 26px;
        font-weight: 700;
        margin-bottom: 8px;
    }

    .otp-desc {
        color: #6b7280;
        font-size: 15px;
        margin-bottom: 24px;
    }

    .otp-input-group {
        display: flex;
        gap: 12px;
        justify-content: center;
        margin-bottom: 16px;
    }

    .otp-input-group input {
        width: 52px;
        height: 52px;
        border-radius: 10px;
        border: 1.5px solid #cfd8dc;
        text-align: center;
        font-size: 22px;
        font-weight: 600;
        outline: none;
        transition: .2s;
    }

    .otp-input-group input:focus {
        border-color: #005D8C;
        box-shadow: 0 0 0 2px rgba(0,93,140,.25);
    }

    .otp-resend {
        font-size: 14px;
        color: #6b7280;
        margin-bottom: 24px;
    }

    .otp-resend a {
        color: #005D8C;
        text-decoration: none;
        font-weight: 600;
    }

    .otp-btn {
        width: 100%;
        height: 52px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(180deg, #0074ad, #005D8C);
        color: white;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: .2s;
    }

    .otp-btn:hover {
        opacity: .9;
    }
    .otp-input::-webkit-outer-spin-button,
    .otp-input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
    }

    .otp-input[type=number] {
        -moz-appearance: textfield;
    }


    /* loading-overlay */
   :root {
        --loading-text-size: 12vw;
    }

    .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        pointer-events: auto;
        background: transparent;
    }
    
    .loading-overlay[style*="display: none"],
    .loading-overlay[style*="display:none"],
    .loading-overlay:not(:visible) {
        pointer-events: none !important;
        z-index: -1 !important;
    }

    #loadingContainer {
        position: fixed;
        height: 100vh;
        width: 100%;
        font-family: "roboto", sans-serif;
        z-index: 10000;
        top: 0;
        left: 0;
    }

    #loadingContainer .loading-texts {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100vh;
        position: absolute;
        top: 0;
        left: 0;
        background-color: rgba(21, 23, 25, 0.85);
        backdrop-filter: blur(2px);
        z-index: 20;
    }

    #loadingContainer .loading-texts span {
        font-size: var(--loading-text-size);
        position: relative;
        display: inline-block;
        color: #fff;
        text-transform: uppercase;
        animation: waviy 1s infinite;
        animation-delay: calc(0.1s * var(--i));
        -webkit-box-reflect: below -90px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
    }

    #loadingContainer .ready-text {
        overflow: hidden;
        position: absolute;
        text-transform: uppercase;
        color: #fff;
        width: 100%;
        height: 100%;
        text-align: center;
        font-size: var(--loading-text-size);
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background: linear-gradient(45deg, #fff, #ddd);
        background-size: cover;
        background-attachment: fixed;
        background-position: center;
    }

    #loadingContainer .shutter {
        position: relative;
        left: 0;
        width: 100%;
        height: 50%;
        background-color: #0a0a0a;
        overflow: hidden;
    }

    #loadingContainer .shutter.top {
        top: 0;
        animation: slide-top 2.4s 1.2s forwards;
    }

    #loadingContainer .shutter.bottom {
        bottom: 0;
        animation: slide-bottom 2.4s 1.2s forwards;
    }

    #loadingContainer .top .ready-text {
        padding-top: calc(50vh - var(--loading-text-size) / 1.6);
    }

    #loadingContainer .bottom .ready-text {
        margin-top: calc(-1 * var(--loading-text-size) / 1.6);
        height: calc(100% + var(--loading-text-size) / 1.6);
    }

    @keyframes slide-top {
        100% {
            transform: translateY(-100%);
        }
    }

    @keyframes slide-bottom {
        100% {
            transform: translateY(100%);
        }
    }

    @keyframes waviy {
        0%, 40%, 100% {
            transform: translateY(0);
        }
        20% {
            transform: translateY(-20px);
        }
    }

    @media (max-width: 996px) {
        :root {
            --loading-text-size: 130px;
        }
    }

    @media (max-width: 750px) {
        :root {
            --loading-text-size: 100px;
        }
    }

    @media (max-width: 500px) {
        :root {
            --loading-text-size: 80px;
        }
        #loadingContainer .loading-texts span {
            font-size: 40px;
            -webkit-box-reflect: below -35px linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
        }
    }