body, html {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    height: 200vh; /* For scrolling purposes */
    overflow-x: hidden;
}

.hero-section {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-image: url('../images/homenew.jpg'); /* Adjusted path */
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease; /* Smooth transition */
}

.thick-hr {
    border: none; /* Remove default border */
    height: 29px; /* Set desired height for thickness */
    background-color: black; /* Set desired color */
    width: 100%; /* Set desired width */
    margin: 1.5rem auto; /* Center align */
}


.hero-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.7); /* Black color with 50% opacity */
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2; /* Ensure content is above the overlay */
}


.arrow-down {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-100%);
    width: 15px;
    height: 15px;
    border-right: 3px solid gray;
    border-bottom: 3px solid gray;
    transform: rotate(45deg);
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0) rotate(45deg);
    }
    40% {
        transform: translateX(-50%) translateY(10px) rotate(45deg);
    }
    60% {
        transform: translateX(-50%) translateY(5px) rotate(45deg);
    }
}





.module {
    position: relative;
    width: 100%;
    padding: 20px;
    margin: 20px 0;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s;
    height: 200px; /* 设定模块的固定高度 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.module .icon {
    margin-bottom: 20px; /* 在图标和标题之间添加间距 */
}

.module .icon img {
    width: 50px;
    height: 50px;
    transition: transform 0.3s;
}

.module .title {
    font-size: 18px;
    transition: transform 0.3s;
}

.module .description {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    width: 90%;  /* 设置宽度为模块宽度的80% */
    max-width: 300px; /* 限制最大宽度，防止过宽 */
    height: 80%; /* 设置高度为模块高度的80% */
    max-height: 300px; /* 限制最大高度，确保不会过高 */
    white-space: normal; /* 确保文字自动换行 */
    text-align: left; /* 调整文字对齐方式，如果需要 */
    justify-content: flex-start; /* 水平起点对齐 */
    align-items: flex-start; /* 垂直起点对齐 */
    font-size: 20px; /* 设置字体大小 */
    color: #6c757d; /* 设置字体颜色为灰色 */
    overflow: hidden; /* 确保内容不溢出 */
}

.module .description p,
.module .description * {
    margin: 0; /* 移除子元素的默认外边距 */
    padding: 0; /* 确保没有额外内边距 */
    font-size: inherit; /* 确保所有子元素继承父元素的字体大小 */
    color: inherit; /* 子元素继承父元素的字体颜色 */
}

.module:hover {
    transform: scale(0.9);
}

.module:hover .icon img,
.module:hover .title {
    transform: scale(0.9);
}

.module:hover .description {
    display: block;
}