html {
    font-size: 1px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Rubik';
}

body {
    background-color: #f5f5f5;
}

.container {
    width: 100%;
    min-height: 100vh;
    margin: 0 auto;
    background-color: #F5FBFB;
}

.logo img {
    width: 95rem;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    height: 20.69rem;
    justify-content: space-between;
    margin-left: 26rem;
}

.mobile-menu span {
    width: 19.75rem;
    height: 2.72rem;
    background: #032950;
    border-radius: 2rem;
}

.menu-icon {
    font-size: 24rem;
    color: #0A2647;
}

.hero {
    width: 100%;
    padding: 30rem 20rem;
    padding-bottom: 10rem;
    background: #F5FBFB;
    text-align: center;
    position: relative;
}

/* 添加倒三角形渐变背景 */
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%; /* 修改left值 */
    transform: translateX(-50%);
    width: 60%;
    height: 20%;
    background: linear-gradient(179.86deg, rgba(0, 142, 147, 0.2) -14.34%, rgba(0, 142, 147, 0) 99.87%);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
    z-index: 1;
}

/* 确保内容在渐变层之上 */
.hero h1,
.hero p {
    position: relative;
    z-index: 2;
}

.hero h1 {
    font-size: 26rem;
    font-weight: 700;
    line-height: 100%;
    color: #0A2647;
    margin-bottom: 20rem;
}

.hero p {
    font-size: 16rem;
    font-weight: 400;
    line-height: 209%;
    color: #333333;
    margin-bottom: 15rem;
}

.pricing-card {
    width: 90%;
    margin: 20rem 20rem 50rem;
    padding: 25rem;
    background: #FFFFFF;
    border-radius: 15rem;
    box-shadow: 0px 3.84px 21.13px 6.72px rgba(200, 200, 200, 0.25);
}

.discount-tag {
    text-align: center;
    margin-bottom: 20rem;
    font-size: 28rem;
    font-weight: 600;
    line-height: 136%;
    color: #0A9396;
    padding: 0 20rem;
}

.discount-tag span:first-child {
    color: #FF6B00;
}

.price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 10rem;
    margin-bottom: 5rem;
}

.current-price {
    font-size: 40rem;
    font-weight: 700;
    color: #000000;
}

.original-price {
    font-size: 18rem;
    font-weight: 400;
    color: #6A6A6A;
    text-decoration: line-through;
}

.tax-info {
    font-size: 12rem;
    font-weight: 400;
    color: #212A33;
    text-align: center;
    margin-bottom: 15rem;
}

.plan-info {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5rem;
    margin-bottom: 20rem;
}

.info-text {
    font-size: 16rem;
    font-weight: 400;
    color: #212A33;
}
.tooltip-container {
    position: relative;
    display: inline-block;
}

.info-icon {
    width: 13rem;
    height: 13rem;
    background: #212A33;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 11rem;
    cursor: pointer;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 214rem;
    height: 100rem;
    background: #FFFFFF;
    border-radius: 5rem;
    padding: 10rem;
    font-size: 12rem;
    line-height: 164%;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
    margin-bottom: 10rem;
    box-shadow: 0 2rem 8rem rgba(0, 0, 0, 0.1);
    color: #333;
    text-align: left;
}

.tooltip-container:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.tooltip .cancel-link {
    color: #FF8039;
    text-decoration: none;
}

.tooltip .cancel-link:hover {
    text-decoration: underline;
}
.buttons {
    display: flex;
    gap: 15rem;
    padding-bottom: 25rem;
    border-bottom: 1rem solid #EEEEEE;
}

.buy-btn {
    flex: 1;
    width: 140rem;
    height: 45rem;
    background: #FF7F50;
    border-radius: 5rem;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8rem;
    text-decoration: none;  /* 添加这行因为是<a>标签 */
}

.buy-btn img {
    width: auto;  /* 改为自适应 */
    height: 16rem;
    object-fit: contain;  /* 确保图片比例正确 */
}

.buy-btn span {
    font-size: 16rem;
    color: #FFFFFF;
    font-weight: 500;
}


.features {
    display: flex;
    flex-direction: column;
    gap: 15rem;
    margin-top: 30rem;
}

.feature {
    display: flex;
    align-items: center;
    gap: 15rem;
}

.feature img {
    width: 30rem;
    height: 30rem;
}

.feature span {
    font-size: 14rem;
    font-weight: 400;
    color: #000000;
}

.payment-methods {
    padding: 60rem 20rem;
    text-align: center;
    background-color: #fff;
}

.payment-methods p {
    font-size: 16rem;
    font-weight: 600;
    color: #000000;
    margin-bottom: 15rem;
}

.payment-icons {
    display: grid;
    grid-template-columns: repeat(4, 65rem);
    gap: 20rem;
    justify-content: center;
}

/* 创建一个包装容器来处理第二行 */
.payment-icons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20rem;
}

/* 第一行容器 */
.payment-icons div:first-child {
    display: grid;
    grid-template-columns: repeat(4, 65rem);
    gap: 20rem;
}

/* 第二行容器 */
.payment-icons div:last-child {
    display: grid;
    grid-template-columns: repeat(3, 65rem);
    gap: 20rem;
}

.payment-icons img {
    width: 100%;
    height: 40rem;
    object-fit: contain;
}

footer {
    background: #03294D;
    padding: 20rem;
}

.footer-section {
    border-bottom: 1rem solid rgba(255, 255, 255, 0.1);
    padding: 15rem 0;
}

.footer-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15rem;
}

.footer-heading h3 {
    font-size: 16rem;
    font-weight: 700;
    color: #FFFFFF;
}

.footer-heading span {
    font-size: 16rem;
    color: #FFFFFF;
}

.list-mobile-drop-down {
    line-height: 69rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.drop-down-title {
    font-size: 18rem;
    font-weight: 600;
    line-height: 21rem;
    color: #FFFFFF;
}

.drop-down-box {
    min-height: 69rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.drop-down-box img {
    transition: transform 0.3s ease;
}

.drop-down-box.active img {
    transform: rotate(180deg);
}

.list-mobile-drop-down {
    line-height: 69rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.option-item {
    color: white;
    font-size: 12rem;
    line-height: 246.5%;
}

/* 下拉内容的样式 */
.drop-down-content {
    display: none;
    padding: 10rem 0;
}

.drop-down-content.show {
    display: block;
}

.newsletter {
    margin: 20rem 0;
}

.newsletter-text {
    font-size: 18rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 10rem;
}

.newsletter-email {
    width: 227rem;
    height: 39rem;
    background: #FFFFFF;
    border-radius: 6rem;
    margin: 25rem 0 35rem 0;
    position: relative;
}

.newsletter-input {
    width: 100%;
    height: 100%;
    padding: 0 30rem 0 10rem;
    border: none;
    border-radius: 6rem;
    font-size: 16rem;
    outline: none;
}

.newsletter-input::placeholder {
    color: rgba(0, 0, 0, 0.21);
}

/* 为了兼容不同浏览器，添加以下前缀 */
.newsletter-input::-webkit-input-placeholder {
    color: rgba(0, 0, 0, 0.21);
}

.newsletter-input::-moz-placeholder {
    color: rgba(0, 0, 0, 0.21);
}

.newsletter-input:-ms-input-placeholder {
    color: rgba(0, 0, 0, 0.21);
}

.newsletter-email::after {
    content: "›";
    position: absolute;
    right: 13rem;
    top: 50%;
    transform: translateY(-50%);
    color: #FF7F50;
    font-size: 20rem;
}

.Follow-Us-icon .icon-item {
    width: 33.41rem;
    height: 33.41rem;
    background: #073662;
    border-radius: 7.20586rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14.7rem 14.7rem;
}

.Follow-Us-icon {
    display: flex;
    gap: 15rem;
    padding: 15rem 0 30rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.icon-item {
    width: 24rem;
    height: 24rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.icon-item:hover {
    opacity: 0.8;
}

.copyright {
    font-size: 12rem;
    font-weight: 400;
    color: #FFF;
}