:root {
    --primary-color: #e91e63; /* Pink from the logo */
    --secondary-color: #f1f1f1; /* Light gray for some text/elements */
    --bg-dark: #000;
    --bg-gray: #333333; /* Dark gray for middle footer */
    --text-light: #fff;
    --text-dark: #000;
    --accent-green: #4caf50; /* Green from contact info */
    --accent-blue: #2196f3; /* Blue from buttons */
}

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-color: var(--bg-dark);
    color: var(--text-light);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Typography */
h1, h2, h3, h4 {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 15px;
}

h1 {
    font-size: 2.5em;
    text-align: center;
    color: var(--text-light);
}

.container h2 {
    font-size: 2em;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 30px;
}

h3 {
    font-size: 1.5em;
    color: var(--text-light);
    margin-bottom: 10px;
}

p {
    margin-bottom: 15px;
}

a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--accent-blue);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 5px;
    text-transform: uppercase;
    font-weight: bold;
    transition: background-color 0.3s ease;
    text-align: center;
}

.btn-primary {
    background-color: var(--primary-color);
    color: var(--text-light);
    border: 2px solid var(--primary-color);
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--primary-color);
}

.btn-secondary {
    background-color: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: var(--text-light);
}

.btn-accent {
    background-color: #41bddc;
    color: var(--text-light);
    border: 2px solid #41bddc;
    font-size: 1.2em;
    line-height: 1.2;
}
.btn-email {
    margin-top:20px;
    width:236px;
    color: var(--text-light);
    border: 2px solid #41bddc;
    font-size: 1.2em;
    line-height: 1.2;
}

.btn-accent:hover {
    background-color: transparent;
    color: #41bddc;
}

.btn-wrapper {
    text-align: center;
    margin-top: 30px;
}

/* Sections */
.section-padding {
    padding: 60px 0;
}

.bg-dark {
    background-color: var(--bg-dark);
}

.bg-gray {
    background-color: var(--bg-gray);
    color: var(--secondary-color);
}

/* Header */
header {
    background-color: var(--bg-dark);
    padding: 10px 0;
    border-bottom: 1px solid #333;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
}

.logo img {
    height: 50px; /* Adjust as needed */
    width: auto;
}

nav {
    display: flex;
    align-items: center;
}

.main-nav {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

.main-nav li {
    margin-left: 25px;
}

.main-nav a {
    color: var(--text-light);
    text-transform: uppercase;
    font-weight: bold;
    padding: 5px 0;
    position: relative;
}

.main-nav a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background-color: var(--primary-color);
    bottom: 0;
    left: 0;
    transition: width 0.3s ease-in-out;
}

.main-nav a:hover::after,
.main-nav a.active::after {
    width: 100%;
}

.contact-info {
    margin-left: 30px;
    color: var(--secondary-color);
    font-size: 0.9em;
}

.contact-info a {
    color: #41bddc;
    font-weight: bold;
}

.contact-info .separator {
    margin: 0 10px;
}

.mobile-menu-toggle {
    display: none; /* Hidden by default */
    font-size: 2em;
    cursor: pointer;
    color: var(--text-light);
}

/* Sunroofs Hero Section */
.sunroofs-hero {

}



/* Content Grids */
.content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.content-grid .text-content p,
.content-grid .sunroof-types-list li {
    color: var(--secondary-color);
}

.content-grid .image-gallery {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}

.content-grid .image-gallery img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    margin-top: 20px;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

/* Types of Sunroofs */
.sunroof-types-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sunroof-types-list li {
    background-color: #1a1a1a;
    padding: 20px;
    margin-bottom: 15px;
    border-left: 5px solid var(--primary-color);
    border-radius: 5px;
}

.sunroof-types-list h4 {
    color: var(--primary-color);
    margin-top: 0;
}
 .image-gallery {
            flex: 1;
            position: relative;
        }
        .image-gallery ul {
            list-style: none;
        }
        .image-gallery li {
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 0.5s;
        }
        .image-gallery li.active {
            opacity: 1;
            position: relative;
        }
        .image-gallery img {
            width: 100%;
            height: auto;
            border-radius: 5px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.2);
        }
        
        /* 移动端样式 */
        @media (max-width: 768px) {
            .content-grid {
                flex-direction: column;
            }
            .image-gallery ul {
                display: flex;
                gap: 15px;
                margin-top: 20px;
            }
            .image-gallery li {
                position: relative;
                opacity: 1;
                flex: 1;
            }
        }
/* Gallery Grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

.gallery-grid img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.gallery-grid img:hover {
    transform: scale(1.05);
}

/* Product Videos */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 30px;
}

.video-item h3 {
    text-align: center;
    color: var(--secondary-color);
    font-size: 1.2em;
}

/* Footer */
footer {
    background-color: var(--bg-dark);
    color: var(--secondary-color);
    font-size: 0.9em;
}

.top-footer {
    padding: 40px 0;
    border-bottom: 1px solid #444;
}

.footer-widgets {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    text-align: center;
}

.footer-widget {
    margin: 20px;
}

.footer-widget img {
    max-height: 70px;
    margin-bottom: 15px;
}

.footer-widget p {
    margin: 0;
    line-height: 1.4;
}

.middle-footer {
    padding: 60px 0;
    background-color: var(--bg-gray);
    color: var(--secondary-color);
}

.footer-content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.footer-about img {
    max-height: 60px;
    margin: 20px 0;
}

.footer-about .btn {
    margin-right: 10px;
    margin-bottom: 10px;
}

.footer-services ul,
.footer-visit ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-services li,
.footer-visit li {
    margin-bottom: 10px;
}

.footer-services a {
    color: var(--secondary-color);
    display: block;
    padding: 5px 0;
}

.footer-services a:hover {
    color: var(--primary-color);
    padding-left: 5px;
}

.footer-visit .btn-accent {
    margin-top: 20px;
}

.bottom-footer {
    padding: 20px 0;
    text-align: center;
    border-top: 1px solid #444;
}

.bottom-footer a {
    color: var(--primary-color);
}

/* Responsive Design */
@media (max-width: 992px) {
    .header-content {
        flex-direction: column;
        text-align: center;
    }
    .dh-nav {
        width: 100%;
        margin-top: 15px;
        flex-direction: column;
        align-items: center;
    }
    .main-nav {
        flex-direction: column;
        width: 100%;
        display: none; /* Hide by default for mobile */
    }
    .main-nav.active {
        display: flex;
    }
    .main-nav li {
        margin: 10px 0;
    }
    .contact-info {
        margin-left: 0;
        margin-top: 15px;
    }
    .mobile-menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 25px;
    }

    .content-grid {
        grid-template-columns: 1fr;
    }

    .sunroofs-hero h1 {
        font-size: 2.5em;
    }

    h2 {
        font-size: 1.8em;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 15px;
    }
    .section-padding {
        padding: 40px 0;
    }
    h1 {
        font-size: 2em;
    }
    h2 {
        font-size: 1.5em;
    }
    .footer-content-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .footer-about .btn {
        margin-right: 5px;
    }
    .footer-widgets {
        flex-direction: column;
    }
    .footer-widget {
        margin-bottom: 30px;
    }
}

@media (max-width: 480px) {
    .sunroofs-hero h1 {
        font-size: 1.8em;
    }
    .main-nav a {
        font-size: 0.9em;
    }
    .contact-info {
        font-size: 0.8em;
    }
    .btn {
        padding: 10px 20px;
        font-size: 0.9em;
    }
    .btn-accent {
        font-size: 1em;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');







.video-player-wrapper {
    position: relative;
    width: 100%;
    background-color: #0f3460; /* 更深的蓝色 */
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px; /* 确保视频本身也有圆角 */
}

.video-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
    display: flex;
    align-items: center;
    padding: 10px 15px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    box-sizing: border-box;
}

.video-player-wrapper:hover .video-controls,
.video-player-wrapper:focus-within .video-controls {
    opacity: 1;
}

.control-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5em;
    color: #e0e0e0;
    margin: 0 8px;
    padding: 5px;
    transition: color 0.2s ease;
    width: 30px; /* 统一按钮宽度 */
    height: 30px; /* 统一按钮高度 */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.control-btn:hover {
    color: #e94560;
}

/* 自定义播放/暂停图标 */
.play {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M8 5v14l11-7z"/></svg>');
}
.pause {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
}
.control-btn:hover.play {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M8 5v14l11-7z"/></svg>');
}
.control-btn:hover.pause {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/></svg>');
}


/* 自定义音量图标 */
.volume-up {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.98 7-4.99 7-8.77s-2.99-7.79-7-8.77z"/></svg>');
}
.volume-mute {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 9v6h4l5 5V4l-5 5H7zM16 11.27v1.46c.74-.38 1.25-1.14 1.25-2.03s-.51-1.65-1.25-2.03z"/></svg>');
}
.control-btn:hover.volume-up {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.98 7-4.99 7-8.77s-2.99-7.79-7-8.77z"/></svg>');
}
.control-btn:hover.volume-mute {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M7 9v6h4l5 5V4l-5 5H7zM16 11.27v1.46c.74-.38 1.25-1.14 1.25-2.03s-.51-1.65-1.25-2.03z"/></svg>');
}

/* 自定义全屏图标 */
.fullscreen {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>');
}
.fullscreen-exit {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e0e0e0"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>');
}
.control-btn:hover.fullscreen {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>');
}
.control-btn:hover.fullscreen-exit {
     background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23e94560"><path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/></svg>');
}


.progress-bar, .volume-bar {
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #0f3460; /* 进度条背景 */
    border-radius: 3px;
    outline: none;
    margin: 0 10px;
    flex-grow: 1; /* 占据可用空间 */
    cursor: pointer;
}

.progress-bar::-webkit-slider-thumb,
.volume-bar::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    background: #e94560; /* 进度条拖动块 */
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(233, 69, 96, 0.5);
    transition: background 0.2s ease;
}

.progress-bar::-webkit-slider-thumb:hover,
.volume-bar::-webkit-slider-thumb:hover {
    background: #ff6b8a;
}

.volume-bar {
    width: 80px; /* 音量条固定宽度 */
    flex-grow: 0;
}

#currentTime, #durationTime {
    font-size: 0.9em;
    color: #b0b0b0;
    margin: 0 5px;
    min-width: 45px; /* 避免时间显示跳动 */
}

.video-info {
    text-align: left;
    margin-top: 30px;
    padding: 0 20px;
}

.video-info h2 {
    color: #e94560;
    font-size: 1.8em;
    margin-bottom: 15px;
}

.video-info p {
    font-size: 1.1em;
    line-height: 1.6;
    color: #c0c0c0;
    margin-bottom: 10px;
}

.carousel {
	position: relative;
	width: 100%;
	height: auto;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 8px 30px rgba(0,0,0,0.1);
}
.carousel .slides {
	display: flex;
	width: 100%;
	height: 100%;
	transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.carousel .slide {
	min-width: 100%;
}
.carousel .slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.carousel .control {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 50px;
	height: 50px;
	background: rgba(255,255,255,0.8);
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	transition: all 0.3s;
	box-shadow: 0 2px 10px rgba(0,0,0,0.1);
	border: none;
	font-size: 1.5rem;
	color: var(--primary-color);
}
.carousel .control:hover {
	background: white;
	transform: translateY(-50%) scale(1.1);
}
.carousel .prev {
	left: 20px;
}
.carousel .next {
	right: 20px;
}
.carousel .dots {
	position: absolute;
	bottom: 25px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 12px;
}
.carousel .dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,0.6);
	cursor: pointer;
	transition: all 0.3s;
}
.carousel .dot.active {
	width: 14px;
	height: 14px;
	background: white;
}
   /* 移动端样式 */
        @media (max-width: 768px) {
            .carousel {
            }
            .control {
                display: none !important;
            }
            :root {
                --dot-active-size: 12px;
                --dot-inactive-size: 8px;
            }
        }

        /* PC端样式 */
        @media (min-width: 769px) {
            .carousel {
            }
            .control {
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s, visibility 0.3s;
            }
            .carousel:hover .control {
                opacity: 1;
                visibility: visible;
            }
        }
/*列表页开始 */
	/* Sunroofs About Section */
	.sunroofs-about {
	    background-image: url('../images/ban.avif'); /* Placeholder */
	    background-size: cover;
	    background-position: center;
	    padding: 100px 0;
	    text-align: center;
	    color: var(--text-light);
	}
	.sunroofs-news {
	    background-image: url('../images/news.jpg'); /* Placeholder */
	    background-size: cover;
	    background-position: center;
	    padding: 100px 0;
	    text-align: center;
	    color: var(--text-light);
	}
	.sunroofs-product {
	    background-image: url('../images/product.jpg'); /* Placeholder */
	    background-size: cover;
	    background-position: center;
	    padding: 100px 0;
	    text-align: center;
	    color: var(--text-light);
	}
	.sunroofs-kefu {
	    background-image: url('../images/kefu.jpg'); /* Placeholder */
	    background-size: cover;
	    background-position: center;
	    padding: 100px 0;
	    text-align: center;
	    color: var(--text-light);
	}
	.sunroofs-about h1 {
	    font-size: 3.5em;
	    margin: 0;
	    text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
	}
	
        .container-list {
             max-width: 1200px;
             margin: 0 auto;
             padding: 20px;
         }
         .breadcrumb {
             margin-bottom: 30px;
         }
         .breadcrumb ol {
             display: flex;
             list-style: none;
         }
         .breadcrumb li {
             display: flex;
             align-items: center;
			 color: #fff;
         }
         .breadcrumb a {
             color: #fff;
             text-decoration: none;
             transition: color 0.3s;
         }
         .breadcrumb a:hover {
             color: #cd128c;
         }
         .breadcrumb-arrow::after {
             content: '\f054';
             font-family: 'Font Awesome 6 Free';
             font-weight: 900;
             margin: 0 10px;
             font-size: 12px;
             color: #fff;
         }
         .article-list {
             display: flex;
             flex-direction: column;
             gap: 20px;
         }
         .article-card {
             background-color: #1a1a1a;
             border-radius: 8px;
             overflow: hidden;
             transition: transform 0.3s, box-shadow 0.3s;
         }
         .article-card:hover {
             transform: translateY(-5px);
             box-shadow: 0 10px 20px rgba(205, 18, 140, 0.2);
         }
         .list-content {
             display: flex;
             flex-direction: column;
         }
         @media (min-width: 768px) {
             .list-content {
                 flex-direction: row;
             }
         }
         .article-thumbnail {
             flex: 1;
             min-height: 200px;
         }
         .article-thumbnail img {
             width: 100%;
             height: 100%;
             object-fit: cover;
			 max-width: 280px !important;
         }
         .article-details {
             flex: 3;
             padding: 20px;
         }
         .article-title {
             font-size: 1.5rem;
             margin-bottom: 10px;
         }
         .article-title a {
             color: #41bddc;
             text-decoration: none;
             transition: color 0.3s;
         }
         .article-title a:hover {
             color: #cd128c;
         }
         .article-excerpt {
             color: #ccc;
             margin-bottom: 15px;
         }
         .article-meta {
             display: flex;
             gap: 15px;
             color: #fff;
             font-size: 0.9rem;
         }
         .pagination {
             display: flex;
             justify-content: center;
             margin-top: 40px;
         }
         .pagination-nav {
             display: flex;
             border-radius: 5px;
             overflow: hidden;
         }
         .pagination-nav li {
             padding: 8px 12px;
             background-color: #1a1a1a;
             color: white;
             text-decoration: none;
             border: 1px solid #333;
             transition: all 0.3s;
			 list-style: none;
         }
         .pagination-nav li:hover {
             background-color: #333;
             color: #cd128c;
         }
         .pagination-nav li.active {
             background-color: #cd128c;
             color: white;
             border-color: #cd128c;
         }
		 
		/* 文章页 */
		 
		         .container-art {
		             max-width: 1200px;
		             margin: 0 auto;
		             padding: 20px;
		         }
		        
		   
		         .article-header {
		             margin-bottom: 30px;
		             text-align: center;
		         }
		         .article-title {
		             font-size: 2.2rem;
		             margin-bottom: 15px;
		             color: #41bddc;
		         }
		         .article-meta {
		             
		          
		         }
				 .article-meta-art{
					 display: flex;
					 justify-content: center;
				 }
		         .article-featured-image {
		             width: 100%;
		             max-height: 500px;
		 
		             border-radius: 8px;
		             margin-bottom: 30px;
		         }
		         .article-content {
		             margin: 0 auto 40px;
		         }
		         .article-content p {
		             margin-bottom: 20px;
		             font-size: 1.1rem;
		             line-height: 1.8;
		         }
		         .article-content h2 {
		             font-size: 1.8rem;
		             margin: 40px 0 20px;
		             color: #cd128c;
		         }
		         .article-content img {
		             max-width: 100%;
		             height: auto;
		             border-radius: 8px;
		             margin: 20px 0;
		         }
		         .article-pic {
		             margin: 0 auto 40px;
		             text-align: center;
		         }
		         .article-pic img {
		             max-width: 100%;
		             height: auto;
		             border-radius: 8px;
		             margin: 20px 0;
		         }
		         .article-navigation {
		             display: flex;
		             justify-content: space-between;
		             margin-top: 50px;
		             padding-top: 30px;
		             border-top: 1px solid #333;
		         }
		         .nav-button {
		             padding: 12px 25px;
		             background-color: #1a1a1a;
		             color: white;
		             text-decoration: none;
		             border-radius: 5px;
		             border: 1px solid #333;
		             transition: all 0.3s;
		             display: flex;
		             align-items: center;
		             gap: 10px;
		         }
		         .nav-button:hover {
		             background-color: #333;
		             color: #cd128c;
		         }