.navbar {
    background: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;
    height: 66px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background 0.3s ease;
    font-family: 'Maven Pro', sans-serif;
}
.navbar.scrolled {
    background: #ffffff;
}
.navbar-logo .api-main-logo {
    height: 52px;
    width: auto;
    object-fit: contain;
}
.navbar-left {
    display: flex;
    align-items: center;
    gap: 28px;
}
.navbar-left a {
    color: #113d6a;
    font-weight: 500;
    text-decoration: none;
    font-size: 16px;
    font-family: 'Afacad', sans-serif;
    padding: 10px 14px;
    border-radius: 6px;
    position: relative;
    transition: color 0.3s ease, background 0.3s ease;
}
.navbar-left a:hover {
    color: #113d6a;
    font-weight: 600;
    background-color: #f2f2f2; 
}
.navbar-left a.active {
    color: #113d6a;
    font-weight: 600;
    background-color: #f2f2f2;
}
.navbar-left a::after {
    content: '';
    position: absolute;
    width: 0%;
    height: 3px;
    bottom: 0;
    left: 0;
    background-color: #113d6a; 
    transition: width 0.3s ease-in-out;
}
.navbar-left a:hover::after,
.navbar-left a.active::after {
    width: 100%;
}
.navbar-left a:hover::after {
    width: 100%;
}
.navbar-right {
    display: flex;
    align-items: center;
    gap: 18px;
}
.api-default-btn {
    font-size: 16px;
    font-weight: 600;
    text-decoration: underline;
    color: #444;
    transition: color 0.2s ease;
}
.signinbtn {
    padding: 8px 42px;
    background-color: #113d6a;
    background-size: 200% 200%;
    border: 2px solid #113d6a;
    color: white;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    font-family: 'Afacad', sans-serif;
    transition: 
        background-color 0.4s ease,
        color 0.4s ease,
        transform 0.3s ease,
        border 0.4s ease;
}
.signinbtn img {
    display: none;
}
.signinbtn:hover {
    background-color: #0b2a49;
    transform: scale(1.05);
    text-decoration: none;
}
.reqDemoBtn {
    padding: 8px 22px;
    background-color: white;
    background-size: 200% 200%;
    color: #113d6a;
    border: 2px solid #113d6a;
    font-weight: 600;
    border-radius: 100px;
    text-decoration: none;
    font-family: 'Afacad', sans-serif;
    transition: 
        background-color 0.4s ease,
        color 0.4s ease,
        transform 0.3s ease,
        border 0.4s ease;
}
.reqDemoBtn:hover {
    background-color: #f2f2f2;
    color: #113d6a;
    transform: scale(1.05);
    text-decoration: none;
}
.hamburger-icon {
    display: none;
}
.nav-link-pulse {
    position: relative;
    display: inline-flex;
    align-items: center;
}  
.pulse-ring {
    position: absolute;
    top: 4px;
    right: 4px;
    background: #113d6a;
    color: white;
    font-size: 10px;
    padding: 3px;
    border-radius: 50%;
    animation: pulse-ring 1.2s infinite;
    box-shadow: 0 0 0 0 rgba(17, 61, 106, 0.502);
}
@keyframes pulse-ring {
    0% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(17, 61, 106, 0.502);
    }
    70% {
      transform: scale(1.3);
      box-shadow: 0 0 0 10px rgba(163, 12, 94, 0);
    }
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 rgba(163, 12, 94, 0);
    }
}  
@media (max-width: 768px) {
    body, html {
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    .navbar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 0 5px !important;
        position: sticky;
        top: 0;
        z-index: 1000;
    }
    .navbar-logo {
        margin-left: 0;
        display: flex;
        align-items: center;
    }
    .api-main-logo {
        margin-left: 8px;
        height: 30px !important;
        width: auto !important;
    }
    .hamburger-icon {
        display: block;
        font-size: 30px;
        background: none;
        border: none;
        color: #113d6a;
        cursor: pointer;
        margin-top: 0px;
        margin-right: 10px;
    }
    .signdiv{
        display: none;
    }
    .signham-item{
        display: flex !important;
        background-color: white;
        margin-right: 0px;
        padding: 10px !important;
        width: 20%;
    }
    .navbar-left {
        gap: 0px;
    }
    .navbar-left, .navbar-right {
        display: none;
        flex-direction: column;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: 50px;
        left: 0;
        text-align: center;
        padding: 10px 0;
        box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
        margin-left: 0;
    }
    .signdiv.menu-open {
        display: flex;
        flex-direction: row;
        justify-content: center;
        width: 100%;
        background-color: #fff;
        position: absolute;
        top: auto; /* reset */
        left: 0;
        text-align: center;
        padding: 10px 10px;
        z-index: 999;
    }
    .signdiv.menu-open a {
        padding: 8px 24px;
        font-size: 14px;
        text-decoration: none;
        font-weight: 500;
    }
    .navbar-left.menu-open + .signdiv.menu-open {
        gap: 10px;
        top: calc(62px + 384px); 
        margin-top: -175px;
        padding-bottom: 25px;
        background-color: #fff;
    }
    .navbar-left.menu-open, .navbar-right.menu-open {
        display: flex;
        background-color: #fff;
    }
    .navbar-left a, .navbar-right a {
        padding: 10px;
        font-size: 16px;
        color: #d4d4d4;
        text-decoration: none;
        font-weight: 500;
    }
    .navbar-left a:hover, .navbar-right a:hover {
        background-color: #d0bcffe5;
    }
    body.menu-open .main-container {
        margin-top: 290px !important;
    }
    .navbar-left a, .navbar-right a {
        padding: 7.5px;
        color: #113d6a;
    }
}
@media (max-width: 425px) {
    .navbar-left a{
        font-size: 14px;
    }
}