/* Second Header Styles */
.second-header {
    display: none; /* Hidden by default on desktop */
}

/* DESKTOP STYLES */
@media (min-width: 993px) {
    .desktop-ai-button {
        margin-left: 15px;
    }

    .desktop-ai-button a {
        position: relative;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        padding: 9px 22px;
        border-radius: 50px;
        transition: all 0.3s ease;
        letter-spacing: 0.5px;
        background: linear-gradient(45deg, #004D40, #e6b17e, #004D40);
        background-size: 400% 400%;
        animation: color-animation 10s linear infinite, pulse-glow 3s ease-in-out infinite;
        z-index: 1;
    }

    .desktop-ai-button a:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
}

/* MOBILE STYLES */
@media (max-width: 992px) {
    .second-header {
        display: block; /* Visible only on small devices */
        background-color: #000;
        border-top: 1px solid #333; /* Separator line */
        padding: 6px 0; /* Thinner padding */
    }

    .second-header-nav ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }

    .second-header-nav ul li {
        display: inline-block;
        margin: 0;
    }

    .second-header-nav ul li a {
        position: relative;
        display: inline-block;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        font-size: 13px;
        padding: 9px 22px;
        border-radius: 50px;
        transition: all 0.3s ease;
        letter-spacing: 0.5px;
        background: linear-gradient(45deg, #004D40, #e6b17e, #004D40);
        background-size: 400% 400%;
        animation: color-animation 10s linear infinite, pulse-glow 3s ease-in-out infinite;
        z-index: 1;
    }

    .second-header-nav ul li a:hover {
        transform: translateY(-2px); /* Slight lift on hover */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    }
}

@keyframes color-animation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-glow {
    0% {
        filter: drop-shadow(0 0 4px rgba(230, 177, 126, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 12px rgba(230, 177, 126, 0.6));
    }
    100% {
        filter: drop-shadow(0 0 4px rgba(230, 177, 126, 0.3));
    }
}