body, html {
    margin: 0;
    padding: 0;
    padding-top: 70px; /* 确保固定导航栏不遮挡内容 */
    font-family: 'Open Sans', sans-serif;
    background: #FAFAFA;
    color: #333;
}

/* 头部样式 */
header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: #003366;
    color: #fff;
	
	width: 100%; /* 确保header宽度是响应式的 */
	/* position: relative; *//* 如果使用fixed或absolute定位，需要设置为relative */
	/* ... 其他样式 ... */
}

/* 头部内容的flex布局 */
.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px; /* 添加一些内边距 */
}

.header-gif {
    max-width: 25%; /* 限制GIF的最大宽度，防止它超过header的宽度 */
    height: auto; /* 自动调整高度以保持宽高比 */
    display: block; /* 防止出现不必要的滚动条 */
    margin: 0 auto; /* 居中显示GIF图像 */
}

#navbar {
    /* ...其他样式... */
    display: flex;
    align-items: center;
    justify-content: space-between;
	
}

/* Logo容器样式 */
.logo-container {
    display: flex;
    align-items: center;
}



.logo-icon {
    /* ...其他样式... */
    margin-right: 10px; /* 或根据需要调整间距 */
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-sub {
    /* ...其他样式... */
    font-size: smaller; /* 或根据需要调整大小 */
}

/* ...其他样式... */

.logo {
    font-family: 'Arial', sans-serif;
    color: #00ff00; /* Elasticsearch的深蓝色
    text-align: left;
    display: flex; /* 使用flex布局使元素在同一行 */
    align-items: center; /* 垂直居中对齐 */
}

.logo-main {
    font-size: 50px; /* 主标题的大小 */
    font-weight: bold; /* 加粗字体 */
    margin-right: 10px; /* 添加右边距离 */
    position: relative; /* 相对定位用于定位伪元素 */
}

/* .logo-main::after {
    content: "";
    color: #00007f; 
    margin-left: 2px; 
    position: relative; 
    right: -10px; 
} */

.logo-sub {
    font-size: 20px; /* 副标题的大小 */
    color: #00ff00; /* 深灰色，确保与主标题有好的对比 */
}

 .logo-icon {
    width: 100px; /* 设置宽度为100像素 */
    height: auto; /* 高度自动调整以保持宽高比 */
    padding: 5px; /* 添加5像素的填充 - 这将作为白色边框 */
    background-color: white */ /* 设置背景颜色为白色 */
    display: block;  /* 如果需要的话，可以设置为inline-block */
    box-sizing: border-box; /* 确保填充不会增加图像的总尺寸 */
}


.navbar .logo {
    font-weight: bold;
    color: #FFF; /* Logo使用白色以突出 */
}


.tech-title {
    color: #0079ff; /* Elasticsearch主题的蓝色 */
    font-family: 'Arial', sans-serif;
    font-weight: bold;
    text-transform: uppercase; /* 所有字母大写，增加现代感 */
    text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); /* 添加文字阴影增强立体感 */
    background: -webkit-linear-gradient(45deg, #0052cc, #29abe2); /* 渐变背景 */
    -webkit-background-clip: text; /* 将背景仅应用于文字 */
    -webkit-text-fill-color: transparent; /* 使文字颜色透明，显示背景渐变 */
    margin: 20px 0;
    padding: 10px 0;
}


nav ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #f8c52c; /* Elasticsearch的黄色 */
} 




.container {
    padding: 50px 20px;
    text-align: center;
    background: #fff; /* 使用白色背景以凸显内容 */
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.link-button {
    display: inline-block;
    background-image: linear-gradient(45deg, #f8c52c 0%, #f8c52c 100%); /* 使用渐变色增强科技感 */
    color: #003366; /* 按钮文字使用深蓝色 */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px;
    margin-top: 20px;
    transition: background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 增加阴影增强立体感 */
    border: none; /* 移除边框 */
}

.link-button:hover {
    background-image: linear-gradient(45deg, #e7b715 0%, #e7b715 100%); /* 深一些的黄色渐变 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 悬停时增加阴影 */
}

footer {
    background: #003366; /* Elasticsearch的深蓝色 */
    color: #fff;
    text-align: center;
    padding: 10px 0;
    width: 100%;
}

@media (max-width: 768px) {
    .container {
        padding: 50px 10px;
    }

    nav ul li {
        display: block;
        margin: 5px 0;
    }
}

.no-bullets {
    list-style-type: none;
    padding-left: 0;
}