/* Custom CSS for Luoyi Website */
@font-face {
    font-family: 'libertinusserif-regular'; /* 为字体起一个自定义名称 */
    src: url('/fonts/libertinusserif-regular.otf') format('opentype'); /* 指向 .otf 文件，格式为 opentype */
    /* 可选：添加备用字体文件 (woff2, woff) 以提高兼容性 */
    /* src: url('/fonts/YourCustomFont.woff2') format('woff2'),
             url('/fonts/YourCustomFont.woff') format('woff'),
             url('/fonts/YourCustomFont.otf') format('opentype'); */
    font-weight: normal; /* 字体粗细 */
    font-style: normal;  /* 字体样式 */
    font-display: swap;  /* 优化加载策略 */
}

* {
    font-family: "libertinusserif-regular";
}

body {
    font-family: "libertinusserif-regular", "Noto Sans SC", system-ui, -apple-system, "Segoe UI", sans-serif;
    touch-action: pan-y;
}

.btn {
    border-radius: 2rem;
}

.txt-spacing-2 {
    letter-spacing: 2px;
}

.breadcrumb-item+.breadcrumb-item::before {
    color: #fff;
}

/* Hero 容器 - 设置为相对定位，作为内部绝对定位元素的参考 */
.hero-container {
    position: relative;
    /* 可以根据需要设置最小高度 */
    /* min-height: 600px; */
}

/* 导航栏样式 - 相对于 hero-container 绝对定位在顶部 */
.navbar-blur {
    /* 移除 position: sticky; top: 0; */
    /* 添加绝对定位 */
    position: absolute;
    top: 0;
    left: 0;
    right: 0; /* 确保宽度占满容器 */
    z-index: 1000; /* 确保导航栏在最上层 */

    /* 设置背景为接近透明的白色 */
    background-color: rgba(255, 255, 255, 0.1); /* 白色，20% 不透明度，80% 透明 */
    /* 添加模糊效果 (毛玻璃) */
    -webkit-backdrop-filter: blur(10px); /* 为iOS Safari添加前缀 */
    backdrop-filter: blur(10px);
    /* 可选：添加边框阴影，增强立体感 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

    /* 设置导航栏文字颜色为白色 */
    color: #ffffff;
}

/* 调整导航链接的颜色 */
.navbar-blur .nav-link {
    color: #ffffff !important; /* 默认白色文字 */
    transition: color 0.3s ease;
}

/* 导航链接激活状态（当前页面） */
.navbar-blur .nav-link.active,
.navbar-blur .nav-link.show {
    color: #E8081A !important; /* 激活时蓝色文字 */
}

/* 导航链接悬停状态 */
.navbar-blur .nav-link:hover {
    color: #E8081A !important; /* 悬停时浅灰色文字，或者也可以是蓝色 */
    /* 如果希望悬停也是蓝色，可以使用下面这行 */
    /* color: #007bff !important; */
}

/* 品牌链接（Logo 旁边的链接） */
.navbar-blur .navbar-brand {
    color: #ffffff !important; /* 默认白色 */
}

.navbar-blur .navbar-brand:hover {
    /*color: #e6e6e6 !important; !* 悬停时浅灰色 *!*/
    /* 或者蓝色 */
    /* color: #007bff !important; */
}

/* 下拉菜单按钮 */
.navbar-blur .dropdown-toggle {
    /*color: #ffffff !important;*/
}

.navbar-blur .dropdown-toggle:hover {
    /*color: #e6e6e6 !important;*/
    /* 或者蓝色 */
    /* color: #007bff !important; */
}

/* 语言切换按钮 */
.navbar-blur .btn-outline-light {
    /*color: #ffffff !important;*/
    border-color: #ffffff !important;
}

.navbar-blur .btn-outline-light:hover {
    /*background-color: #ffffff !important;*/
    background-color: rgba(0, 175, 222, 0.2); /* 半透明白色，稍高不透明度 */
    color: #E8081A !important; /* 悬停时背景变白，文字变深 */
}

/* 调整下拉菜单的背景色，使其与导航栏一致 */
.navbar-blur .dropdown-menu {
    background-color: rgba(0, 175, 222, 0.2); /* 半透明白色，稍高不透明度 */
    border: none;
    -webkit-backdrop-filter: blur(5px); /* 为iOS Safari添加前缀 */
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.navbar-blur .dropdown-item {
    /*color: #2c3e50; !* 下拉项文字颜色为深色 *!*/
    color: #ffffff;
}

.navbar-blur .dropdown-item:hover {
    /*background-color: rgba(240, 240, 240, 0.8);*/
    background-color: rgba(0, 175, 222, 0); /* 半透明白色，稍高不透明度 */
    color: #E8081A;
}

#navbarNav {
    margin-left: 1.2rem;
    font-size: 1.2rem;
}

#navbarNav li {
    padding: 0 1rem;
}

#navbarNav .btn {
    border-radius: 2rem;
}

#navbarNav .bi-search {
    width: 1rem;
}

/* 遮罩层搜索样式 */
.search-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1024; /* 确保在其他元素之上 */
}

.search-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* 半透明黑色遮罩 */
}

.search-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* 水平垂直居中 */
    width: 80%; /* 或根据需要调整 */
    max-width: 600px; /* 限制最大宽度 */
    text-align: center;
    /* 相对定位，用于清除按钮的绝对定位 */
    position: relative;
}

.search-input {
    width: 100%;
    padding: 10px 0; /* 上下内边距 */
    border: none; /* 移除默认边框 */
    border-bottom: 2px solid #ffffff; /* 底框颜色改为白色 */
    background-color: transparent; /* 背景透明 */
    font-size: 1.5rem; /* 调整字体大小 */
    outline: none; /* 移除聚焦时的默认轮廓 */
    color: #ffffff; /* 文字颜色改为白色 */
}

.search-input:focus {
    border-bottom-color: #007bff; /* 聚焦时下划线颜色 */
}

.search-line {
    width: 100%;
    height: 2px;
    background-color: #007bff; /* 下划线颜色，可选 */
    margin-top: 5px; /* 与输入框的间距 */
    display: none; /* 如果不需要额外的下划线，可以隐藏 */
}

/* 清除按钮样式 */
.clear-search-btn {
    position: absolute;
    right: 0; /* 靠右对齐 */
    top: 50%; /* 垂直居中于搜索框 */
    transform: translateY(-50%); /* 精确垂直居中 */
    width: 60px;
    height: 60px;
    line-height: 60px; /* 让文字垂直居中 */
    text-align: center;
    font-size: 2rem;
    color: #ffffff; /* 按钮颜色 */
    background-color: transparent; /* 背景透明 */
    border: none; /* 移除边框 */
    cursor: pointer; /* 鼠标指针 */
    display: none; /* 默认隐藏 */
    z-index: 1051; /* 确保在输入框之上 */
}

.clear-search-btn:hover {
    color: #cccccc; /* 悬停颜色 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .search-content {
        width: 90%;
    }

    .search-input {
        font-size: 1.25rem;
    }

    .clear-search-btn {
        width: 25px;
        height: 25px;
        line-height: 25px;
        font-size: 1.25rem;
    }
}


/* Hero 内容区域 - 保持相对定位 */
/*.hero-content {*/
/*    position: relative;*/
/*    !* 可能需要一些上边距，具体取决于导航栏的高度 *!*/
/*    !* padding-top: 80px; *!*/
/*    !* 或者，如果想让图片从最顶部开始，可以不设置 padding-top，让内容从导航栏下方开始 *!*/
/*    !* 如果内容需要从图片的特定位置开始，可以使用 padding-top 或 margin-top *!*/
/*    margin-top: 0;*/
/*    !*background: linear-gradient(135deg, #3a1c71, #d76d77, #ffaf7b);*!*/
/*    background: url("/images/banner.png") center center;*/
/*    background-size: cover;*/
/*    !*min-height: 500px;*!*/
/*    height: 1000px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*}*/

/* Advantage Icons */
.advantage-icon {
    background: #f8f9fa;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Stat Cards */
.stat-card {
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
}

/* Footer */
footer {
    background: linear-gradient(135deg, #2c3e50, #1a252c);
}

/* Language Switcher */
.dropdown-menu {
    background: #343a40;
    border: none;
}

.dropdown-item {
    color: #fff;
}

.dropdown-item:hover {
    background: #495057;
    color: #fff;
}

/* Buttons */
.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    transition: all 0.3s ease;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
    transition: all 0.3s ease;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
    border-color: #dc3545;
}

/* Font Awesome Icons */
.fa-lightbulb, .fa-paint-brush, .fa-dollar-sign, .fa-box-open, .fa-industry, .fa-check-circle {
    color: #dc3545;
}

/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        min-height: 300px;
        text-align: center;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .stat-card {
        margin-bottom: 20px;
    }
}

/* Animation for sections */
.animate-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.animate-section.show {
    opacity: 1;
    transform: translateY(0);
}

/* Scroll animation */
.scroll-animation {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-animation.visible {
    opacity: 1;
    transform: translateY(0);
}


/* Airlines Items Section 卡片样式优化 */
.airlines-item-container .container {
    padding: 3rem 0;
}
.airlines-item-container .card {
    /* 添加过渡效果，使悬停变化更平滑 */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* 可选：添加初始圆角 */
    border-radius: 10px;
    /* 移除之前的初始阴影（如果有的话） */
    box-shadow: none;
}

/* 卡片悬停时的动态效果 */
.airlines-item-container .card:hover {
    /* 添加边框阴影 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    /* 往左上角轻微偏移 */
    transform: translate(-8px, -8px);
}

.manufacturer-container .container {
    padding: 4rem 0;
}


/* Advantage Section 样式 */
.advantage-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem; /* 左右两侧与中心图片之间的间距 */
    padding: 2rem 0;
}

.advantage-left,
.advantage-right {
    flex: 1; /* 让左右两侧平均分配剩余空间 */
    display: flex;
    flex-direction: column;
    gap: 2rem; /* 项目之间的垂直间距 */
}

.advantage-center {
    flex-shrink: 0; /* 防止中心图片被压缩 */
    text-align: center;
}

.advantage-plane {
    max-width: 30rem; /* 限制飞机图片的最大宽度 */
    height: auto;
    /*border-radius: 10px; !* 可选：给图片加圆角 *!*/
    /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); !* 可选：给图片加阴影 *!*/
}

/* 左侧项目：图标在右侧 */
.advantage-left .advantage-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* 让文字和图标分别靠左靠右 */
    gap: 1rem; /* 图标和文字之间的间距 */
    flex-direction: row-reverse; /* 交换图标和文字的顺序 */
}

/* 右侧项目：图标在左侧 */
.advantage-right .advantage-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between; /* 让文字和图标分别靠左靠右 */
    gap: 1rem; /* 图标和文字之间的间距 */
    /* flex-direction: row; */ /* 默认值，图标在左 */
}

.advantage-icon {
    background-color: #f8f9fa;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* 防止图标被压缩 */
}

.advantage-icon img {
    width: 4rem;
    height: 4rem;
    /*color: #dc3545; !* 图标颜色，您可以根据需要调整 *!*/
}

/* 鼠标悬停效果 */
.advantage-item:hover .advantage-icon {
    transform: scale(1.1); /* 图标放大 */
    background-color: #e9ecef; /* 背景颜色变浅 */
}

.advantage-text {
    flex: 1; /* 让文字区域占据剩余空间 */
}

.advantage-left .advantage-text {
    text-align: right;
}

.advantage-text h5 {
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #2c3e50;
}

.advantage-text p {
    font-size: 0.9rem;
    color: #495057;
    line-height: 1.5;
    margin-bottom: 0;
}

.partner-section img {
    /*background: url("/images/partners.jpg") 100% 100%;*/
    /*background-size: cover;*/
    width: 100%;
    margin: 0;
    padding: 0;
}

.blog-section {
    margin: 4rem 0;
}

.quote-section  {
    .contact-item {
        display: flex;
        align-items: flex-start; /* 让图标和文字顶部对齐 */
        gap: 0.5rem; /* 图标和文字之间的间距 */
        margin-bottom: 0.5rem; /* 项目之间的垂直间距 */
    }

    .contact-icon {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
        filter: invert(26%) sepia(14%) saturate(348%) hue-rotate(172deg) brightness(96%) contrast(89%);
        margin-top: 0.3rem;
    }

    /* 文字区域样式 */
    .contact-item span {
        flex: 1; /* 让文字区域占据剩余空间 */
        line-height: 1.5; /* 设置行高 */
        word-wrap: break-word; /* 允许长单词或 URL 在必要时换行 */
        white-space: pre-line; /* 保留换行符 */
    }
    .media-icon {
        width: 2rem;
    }
}

.footer-section {
    background: url("/images/footer.jpg") center center;
    background-size: cover;

    a {
        text-decoration: none;
    }
    a:hover {
        text-decoration: underline;
    }

    .contact-item {
        display: flex;
        align-items: flex-start; /* 让图标和文字顶部对齐 */
        gap: 0.5rem; /* 图标和文字之间的间距 */
        margin-bottom: 0.5rem; /* 项目之间的垂直间距 */
    }

    .contact-icon {
        width: 1rem;
        height: 1rem;
        vertical-align: middle;
        margin-top: 0.3rem;
    }

    /* 文字区域样式 */
    .contact-item span {
        flex: 1; /* 让文字区域占据剩余空间 */
        line-height: 1.5; /* 设置行高 */
        word-wrap: break-word; /* 允许长单词或 URL 在必要时换行 */
        white-space: pre-line; /* 保留换行符 */
    }
    .media-icon {
        width: 2rem;
    }
}

/* 移动端适配 - 优化 footer 图标显示 */
@media (max-width: 768px) {
    .footer-section .contact-icon {
        width: 1rem;
        height: 1rem;
    }
    
    .footer-section .media-icon {
        width: 1.5rem;
    }
}

.logo-luoyi {
    width: 6rem;
}

.faq-section .accordion-header {
    background-color: #fff !important;
    color: #000000;
}

.faq-section .accordion-body {
    color: #3c4057;
}

.faq-section .accordion-button:not(.collapsed) {
    background-color: #fff !important;
    color: #000000;
}

.faq-section .accordion-button:focus {
    border: none;
    box-shadow: none;
}

.faq-section .fa-circle-question {
    margin-right: 0.5rem;
}

.global-markets-section {
    background: url("/images/product/Our-Airline-Items-Markets-are-All-Over-The-World.jpg") center center;
    background-size: cover;
    color: #ffffff;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .advantage-container {
        flex-direction: column;
        gap: 1rem;
    }

    .advantage-left,
    .advantage-right {
        flex: none;
        width: 100%;
    }

    .advantage-center {
        order: 1; /* 让中心图片在移动端显示在最上方 */
    }

    /* 移动端时，左右两侧的项目都变为文字在上，图标在下 */
    .advantage-left .advantage-item,
    .advantage-right .advantage-item {
        flex-direction: row; /* 变为垂直布局 */
        align-items: center; /* 居中对齐 */
        text-align: center !important; /* 文字居中 */
        margin-bottom: 0;
    }

    .advantage-text {
        text-align: center !important;
    }
}

.img-container {
    overflow: hidden;
    position: relative;
}

.img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.img-container:hover img {
    transform: scale(1.1);
    cursor: pointer;
}

/* 针对iOS设备的特殊优化 */
@supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)) {
    /* iOS设备上增强毛玻璃效果 */
    @media screen and (max-width: 768px) {
        .navbar-blur {
            background-color: rgba(255, 255, 255, 0.15); /* 稍微增加不透明度 */
            -webkit-backdrop-filter: blur(15px); /* 增加模糊值 */
            backdrop-filter: blur(15px);
        }
        
        .navbar-blur .dropdown-menu {
            background-color: rgba(0, 175, 222, 0.3); /* 稍微增加不透明度 */
            -webkit-backdrop-filter: blur(8px); /* 增加模糊值 */
            backdrop-filter: blur(8px);
        }
    }
}