@-webkit-keyframes rotateMe {
        from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }

        to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}

@keyframes rotateMe {
        from {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
        }

        to {
                -webkit-transform: rotate(360deg);
                transform: rotate(360deg);
        }
}

.footer-shape-1 {
        position: absolute;
        top: 5%;
        left: 2%;
        -webkit-transform: translateY(-5%) translateX(-2%);
        transform: translateY(-5%) translateX(-2%);
        z-index: 1;
        max-width: 100px;
}

.footer-shape-1 img {
        -webkit-animation-name: rotateMe;
        animation-name: rotateMe;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
}

.footer-shape-2 {
        position: absolute;
        bottom: 10%;
        right: 5%;
        -webkit-transform: translateY(-10%) translateX(-5%);
        transform: translateY(-10%) translateX(-5%);
        z-index: 1;
        max-width: 100px;
}

.footer-shape-2 img {
        -webkit-animation-name: rotateMe;
        animation-name: rotateMe;
        -webkit-animation-duration: 10s;
        animation-duration: 10s;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        -webkit-animation-timing-function: linear;
        animation-timing-function: linear;
}

.default-btn {
        background-color: rgb(255, 97, 47);
        color: rgb(255, 255, 255);
        display: flex;
        font-size: 15px;
        font-weight: 500;
        position: relative;
        text-align: center;
        z-index: 1;
        border-width: initial;
        border-style: none;
        border-color: initial;
        border-image: initial;
        border-radius: 5px;
        overflow: hidden;
        padding: 13px 25px 13px 25px;
        transition: 0.5s;
}

.navbar-toggler .icon-bar {
        display: block;
        height: 2px;
        width: 28px;
        background: rgb(19, 196, 161);
        transition: 0.3s;
}

/* 下拉菜单核心样式 - 原生 CSS 完整版 */
/* 1. 父元素基础布局（关键！） */
.dropdown-parent {
        position: relative;
        /* 让子菜单基于父元素定位 */
        list-style: none;
        /* 去掉 li 默认圆点 */
        display: inline-block;
        /* 适配导航横向布局 */
}

/* 2. 触发按钮样式（保留你的原有交互） */
.dropdown-trigger {
        display: flex;
        align-items: center;
        gap: 2px;
        padding: 8px 0;
        /* py-2 对应的值 */
        border: none;
        background: transparent;
        cursor: pointer;
        /* color: #333; */
        /* 默认文字色 */
        transition: color 0.3s ease;
        font-size: 16px;
        /* 适配导航文字大小 */
}

/* 按钮悬浮变色（你的 #13c4a1 色值） */
.dropdown-trigger:hover {
        color: #13c4a1;
}

/* 下拉箭头样式 */
.dropdown-arrow {
        width: 16px;
        /* w-4 对应的值 */
        height: 16px;
        /* h-4 对应的值 */
        transition: transform 0.3s ease;
        /* 箭头旋转动画 */
}

/* 3. 下拉菜单基础样式（默认隐藏） */
.dropdown-menu {
        /* 核心定位：父元素底部左侧 */
        position: absolute;
        top: 100%;
        left: 0;
        margin-top: 8px;
        /* mt-2 对应的值 */
        width: 192px;
        /* w-48 对应的值 */

        /* 视觉样式 */
        background-color: #fff;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        /* shadow-lg 效果 */
        border-radius: 4px;
        /* rounded-md 对应的值 */

        /* 核心隐藏逻辑（避免点击穿透 + 适配动画） */
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        /* 向上偏移，滑出动画 */

        /* 过渡动画（丝滑效果） */
        transition: all 0.3s ease;

        /* 层级保障（避免被遮挡） */
        z-index: 50;
}

/* 4. 悬浮显示菜单 */
.dropdown-parent:hover .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        /* 偏移归位 */
}

/* 悬浮时箭头旋转 */
.dropdown-parent:hover .dropdown-arrow {
        transform: rotate(180deg);
}

/* 5. 菜单项样式 */
.dropdown-item {
        display: block;
        padding: 8px 16px;
        /* px-4 py-2 对应的值 */
        font-size: 14px;
        /* text-sm 对应的值 */
        /* color: #374151; */
        /* text-gray-700 对应的值 */
        text-decoration: none;
        transition: background-color 0.3s ease;
}

菜单项悬浮样式
.dropdown-item:hover {
        background-color: #f3f4f6;
        /* bg-gray-100 对应的值 */
}