/* Basic Reset & Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Microsoft YaHei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f8; /* A light grey background similar to original */
}

.container {
    width: 100%;
    max-width: 1190px; /* Maximum width like the original */
    margin: 0 auto;
    padding: 0 15px;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.subtitle {
    color: #777;
    font-size: 0.9em;
    text-transform: uppercase;
    margin-bottom: 20px;
    text-align: center;
}

h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
    font-weight: 500;
    color: #333;
}
h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

/* Header */
header {
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 15px 0;
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

header nav ul {
    display: flex;
}

header nav ul li a {
    padding: 10px 15px 10px 0px;
    color: #555;
    font-weight: 500;
}
header nav ul li a.active,
header nav ul li a:hover {
    color: #ff9900; /* Orange accent */
    border-bottom: 2px solid #ff9900;
}

.header-actions {
    display: flex;
    align-items: center;
}
.search-icon {
    font-size: 1.2em;
    margin-right: 15px;
    cursor: pointer;
}
.call-button {
    background-color: #ffc107; /* Yellow/Orange button */
    color: #333;
    padding: 10px 20px;
    border-radius: 4px;
    font-weight: bold;
}

/* Main Content Padding to avoid overlap with fixed header */
main {
    padding-top: 36px; /* Adjust based on actual header height */
}

/* Hero Section */
.hero {
    background-image: url('https://via.placeholder.com/1200x400/cccccc/333?text=Hero+Background'); /* Replace with actual image */
    background-size: cover;
    background-position: center;
    height: 400px; /* Adjust as needed */
    display: flex;
    align-items: center;
    padding-left: 5%; /* Indent text from left */
}

.hero-content {
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent white background for text */
    padding: 20px 30px;
    border-radius: 5px;
    max-width: 500px;
}
.hero-content h1 {
    font-size: 2.5em;
    color: #333;
    margin-bottom: 15px;
}
.hero-content ul li {
    font-size: 1.1em;
    color: #444;
    margin-bottom: 8px;
    list-style: disc;
    margin-left: 20px;
}


/* School Profile & Environment Sections */
.school-profile, .school-environment, .study-info {
    padding: 40px 0;
    background-color: #fff;
    margin-bottom: 20px;
}
.school-environment {
    background-color: #f9f9f9; /* Slightly different bg for variation */
}

.grid-container, .articles-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Responsive grid */
    gap: 20px;
    margin-bottom: 30px;
}

.grid-item, .article-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.grid-item img, .article-card img {
    width: 100%;
    height: 180px; /* Fixed height for images */
    object-fit: cover;
}
.grid-item p, .article-card h3, .article-card .date, .article-card .excerpt {
    padding: 10px;
}
.article-card h3 {
    font-size: 1.2em;
    margin-top: 5px;
    color: #333;
}
.article-card .date {
    font-size: 0.85em;
    color: #888;
}
.article-card .excerpt {
    font-size: 0.95em;
    color: #555;
    text-align: left;
}


.view-more, .view-more-orange, .submit-button {
    display: block;
    width: 180px;
    margin: 20px auto 0;
    padding: 12px 20px;
    background-color: #fff;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
    text-align: center;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
}
.view-more:hover, .view-more-orange:hover, .submit-button:hover {
    background-color: #ff9900;
    color: #fff;
    border-color: #ff9900;
}
.view-more-orange {
    background-color: #ff9900;
    color: #fff;
    border-color: #ff9900;
    margin: 20px 0 0 0; /* For specific placement */
}
.submit-button {
    width: 100%;
    background-color: #ff9900;
    color: #fff;
    font-size: 1.1em;
}


/* About-Video Section */
.about-video {
    background-color: #f0f0f0; /* Light grey background */
    padding: 50px 0;
}
.about-video-content {
    display: flex;
    align-items: center;
    gap: 30px;
}
.about-text {
    flex: 1;
}
.about-text h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
}
.about-text p {
    margin-bottom: 20px;
    color: #555;
    font-size: 1.05em;
}
.video-placeholder {
    flex: 1;
    height: 300px; /* Adjust as needed */
    background-color: #ccc;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    position: relative;
}
.video-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}
.play-button {
    position: absolute;
    font-size: 3em;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Full Width Banner */
.full-width-banner {
    margin: 20px 0;
}
.full-width-banner img {
    width: 100%;
    height: auto;
}

/* Consultation Form Section */
.consultation-form-section {
    padding: 50px 0;
    background-color: #fff;
}
.consultation-layout {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 30px;
}
/* .form-decoration {
    flex: 0 0 350px; /* Fixed width for decoration */
    text-align: center;
    border: 2px solid #ff9900;
    padding: 20px;
    border-radius: 8px;
}
.form-decoration img {
    margin-bottom: 10px;
    border-radius: 5px;
}
.form-decoration p {
    margin-bottom: 5px;
    color: #d9534f; /* Reddish text */
    font-weight: 500;
}
.form-decoration h3 {
    font-size: 2em;
    color: #d9534f;
    margin-bottom: 10px;
}
.form-deco-phone {
    background-color: #d9534f;
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;
    margin-top: 15px;
} */

.form-container {
    flex: 1;
}
.form-container h2 {
    text-align: left;
    margin-bottom: 25px;
    font-size: 1.8em;
}
.form-container input[type="text"],
.form-container input[type="tel"] {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1em;
}

/* Contact Us Section */
.contact-us {
    padding: 50px 0;
    background-color: #e9f5ff; /* Light blueish background */
}
.contact-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
}
.contact-info {
    flex: 1;
}
.contact-info h3 {
    font-size: 1.8em;
    margin-bottom: 15px;
}
.contact-info p {
    margin-bottom: 10px;
    font-size: 1.05em;
    color: #444;
}
.contact-info strong {
    color: #333;
}
.dropdown-arrow {
    font-size: 0.8em;
    color: #555;
}
.map-placeholder {
    flex: 1.5; /* Map takes more space */
    height: 300px; /* Adjust as needed */
    background-color: #e0e0e0;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}


/* Footer */
footer {
    background-color: #f8f8f8;
    padding: 30px 0;
    text-align: center;
    color: #666;
    font-size: 0.9em;
    border-top: 1px solid #eee;
}
.footer-nav ul {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
}
.footer-nav ul li a {
    padding: 0 12px;
    color: #555;
}
.footer-nav ul li a:hover {
    color: #ff9900;
}
.copyright {
    margin-bottom: 5px;
}
.address-footer {
    font-size: 0.9em;
}

/* Floating Action Buttons */
.fab-left {
    position: fixed;
    left: 10px; /* Adjust as needed */
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.fab-left a {
    background-color: rgba(255, 153, 0, 0.8); /* Semi-transparent orange */
    color: white;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    font-size: 0.8em; /* Smaller text */
}
.fab-left a span { /* For icon */
    font-size: 1.5em; /* Larger icon */
    display: block;
}
.fab-left a:hover {
    background-color: #ff9900;
}

.fab-bottom-right {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.fab-item {
    background-color: #555;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 0.75em; /* Small text for multi-line */
    line-height: 1.2;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: background-color 0.3s;
}
.fab-item span { /* For icon */
    font-size: 1.6em;
    margin-bottom: 3px;
}
.fab-item:hover {
    background-color: #777;
}
.fab-main-action {
    background-color: #ff9900;
    width: 80px; /* Wider main button */
    height: 80px;
    font-size: 0.8em;
}
.fab-main-action:hover {
    background-color: #e68a00;
}

/* Ensure sections have some default top/bottom margin if not using background colors to separate */
section:not(.hero):not(.full-width-banner) {
    margin-bottom: 20px;
}


/* Specific adjustments for a more accurate look if needed */
.school-profile .grid-container .grid-item,
.school-environment .grid-container .grid-item {
    background-color: #f9f9f9; /* Background for individual items if image doesn't fill */
}
.school-profile .grid-item p,
.school-environment .grid-item p {
    background-color: #f9f9f9;
    padding: 15px 10px;
    font-weight: 500;
}


/* ... (Keep all previous CSS from the homepage) ... */

/* Page Title Section */
.page-title-section {
    padding: 30px 0 10px; /* Reduced bottom padding */
    background-color: #fff; /* White background for this section */
    text-align: left; /* Title is left-aligned in the image */
    margin-bottom: 0;
}

.page-title-section h1 {
    font-size: 2em;
    color: #333;
    font-weight: 500;
    text-align: left; /* Ensure h1 is left-aligned */
}

.page-body-content {
    padding: 30px 0;
    background-color: #fff; /* White background for this section */
}

/* Filter Section */
.filter-section {
    background-color: #fff;
    padding: 15px 0 30px; /* Padding around tabs */
    border-bottom: 1px solid #eee;
}

.filter-tabs {
    display: flex;
    gap: 15px;
}

.tab-button {
    padding: 8px 20px;
    background-color: #f0f0f0;
    color: #555;
    border-radius: 20px; /* Rounded tabs */
    font-size: 0.95em;
    border: 1px solid transparent;
}

.tab-button.active,
.tab-button:hover {
    background-color: #fffaf2; /* Light orange for active/hover */
    color: #de8e33; /* Darker orange text */
    border-color: #ffeed4; /* Light orange border */
}

/* School List Section */
.school-list {
    padding: 30px 0;
    background-color: #fff; /* Or keep body background */
}

.school-grid { /* Specific styling for school grid if different from generic grid */
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Adjust minmax for 4 items per row in a 1190px container */
}

.school-list .grid-item {
    /* Styles from previous .grid-item are mostly applicable */
    background-color: #f9f9f9; /* Light background for each item */
}

.school-list .grid-item img {
    height: 180px; /* Or adjust as desired */
    object-fit: cover;
}

.school-list .grid-item p {
    padding: 15px 10px;
    font-weight: 500;
    color: #333;
    background-color: #f9f9f9; /* Ensure p background matches item background */
}


/* Adjust FABs if their position conflicts with the new layout */
/* Example: Lift the right FABs a bit more if footer is taller or page is shorter */
.fab-bottom-right {
    bottom: 30px; /* Slightly more space from bottom */
}

/* Re-align FAB left if needed, typically it should be fine */
.fab-left a:last-child { /* Target "免费咨询" specifically if needed */
     /* background-color: #some-other-color; */
}

.fab-bottom-right .fab-item:not(.fab-main-action) {
    display: none; /* Hiding the smaller right FABs as they are not in this image */
}
/* Show back to top if desired, or only the main action button */
.fab-bottom-right #backToTop {
    display: flex; /* or none if you don't want it on this page like the image */
}

/* ... (Keep all previous CSS from index.html and school_profile.html) ... */

/* Environment Gallery Section Specifics */
.environment-gallery {
    padding: 30px 0 40px; /* Add padding below grid */
    background-color: #fff;
}

.environment-grid {
    /* Inherits from .grid-container, adjust if needed */
     grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* 4 columns */
}

.environment-gallery .grid-item {
    background-color: #f9f9f9;
    border: 1px solid #eee; /* Subtle border */
}

.environment-gallery .grid-item img {
    height: 180px; /* Consistent image height */
    object-fit: cover;
    width: 100%;
}

.environment-gallery .grid-item p {
    padding: 15px 10px;
    font-weight: 500;
    color: #333;
    background-color: #f9f9f9; /* Match item background */
    font-size: 0.95em;
}

/* Pagination Section */
.pagination-section {
    padding: 20px 0;
    background-color: #fff; /* Match gallery background */
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px; /* Space between buttons */
}

.page-button {
    padding: 8px 15px;
    background-color: #fff;
    color: #555;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9em;
    min-width: 40px; /* Ensure buttons have a decent width */
    text-align: center;
}

.page-button.active {
    background-color: #ff9900; /* Active page number style */
    color: #fff;
    border-color: #ff9900;
    font-weight: bold;
}

.page-button:hover:not(.active) {
    background-color: #eee; /* Hover effect for non-active buttons */
    border-color: #ccc;
}

/* Adjust specific FABs for this page if different */
.fab-bottom-right .fab-main-action {
   background-color: #e4a550; /* Matching the specific orange in the screenshot */
   width: 80px; /* Adjust size if needed */
   height: 80px;
}
.fab-bottom-right .fab-main-action:hover {
   background-color: #d39440; /* Darker shade for hover */
}

/* Study Live / Video Page */
.video-list-section {
    padding: 40px 0;
    background-color: #fff;
}

.video-item {
    margin-bottom: 40px;
    border-bottom: 1px solid #eee;
    padding-bottom: 30px;
}
.video-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.video-item h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 5px;
    text-align: left; /* Titles are left aligned */
}

.video-subtitle {
    font-size: 0.95em;
    color: #777;
    margin-bottom: 20px;
    text-align: left;
}

.video-player-container {
    position: relative;
    width: 100%;
    max-width: 900px; /* Control video width */
    margin: 0 auto; /* Center the video player */
    background-color: #000; /* Black background for video area */
    border-radius: 5px;
    overflow: hidden;
}

.video-player-container img {
    width: 100%;
    height: auto;
    display: block;
}

.play-button-large { /* Slightly different from generic play button */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 4em; /* Larger play icon */
    color: rgba(255, 255, 255, 0.8);
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}
.play-button-large:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/* Contact Us - Detailed Page */
.contact-details-map {
    padding: 30px 0;
    background-color: #fff; /* White background for this section */
}

.contact-flex-container {
    display: flex;
    gap: 30px; /* Space between map and text details */
    align-items: flex-start;
}

.map-full-width {
    flex: 2; /* Map takes more space */
    min-width: 0; /* Important for flex item to shrink if needed */
}
.map-full-width img {
    width: 100%;
    height: auto; /* Or a fixed height like 400px */
    max-height: 450px;
    object-fit: cover;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.contact-text-details {
    flex: 1;
    background-color: #f9f9f9; /* Light background for text box */
    padding: 25px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.contact-text-details h3 {
    font-size: 1.2em;
    color: #333;
    margin-top: 15px;
    margin-bottom: 8px;
    font-weight: 500;
}
.contact-text-details h3:first-child {
    margin-top: 0;
}

.contact-text-details p {
    font-size: 1em;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.7;
}
.contact-text-details .dropdown-arrow {
    cursor: pointer;
    color: #777;
}
.contact-text-details .dropdown-content { /* Basic styling for potential dropdown */
    display: block; /* Or use JS to toggle */
    margin-left: 10px;
    font-size: 0.95em;
    color: #666;
}

/* Article Listing Page */
.article-listing {
    padding: 30px 0;
    background-color: #fff;
}

.article-item-detailed {
    display: flex;
    gap: 25px;
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #f0f0f0;
}
.article-item-detailed:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.article-image {
    flex: 0 0 166px; /* Fixed width for image */
    height: 160px; /* Fixed height for image container */
}
.article-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.article-content {
    flex: 1;
}

.article-content h3 {
    margin-top: 0;
    margin-bottom: 8px;
    font-size: 1.4em; /* Slightly larger title */
    font-weight: 500;
}
.article-content h3 a {
    color: #333;
}
.article-content h3 a:hover {
    color: #ff9900;
}

.article-content .date {
    font-size: 0.85em;
    color: #999;
    margin-bottom: 10px;
}

.article-content .excerpt {
    font-size: 0.95em;
    color: #555;
    line-height: 1.7;
    /* Limit text to a few lines with ellipsis */
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Show 3 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pagination for articles - can reuse existing .pagination-section and .pagination styles */
.article-listing .pagination-section {
    background-color: transparent; /* Or #fff if desired */
    padding-top: 40px;
}


/* Breadcrumb Section */
.breadcrumb-section {
    background-color: #f9f9f9; /* Light grey for breadcrumb bar */
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.breadcrumbs {
    font-size: 0.9em;
    color: #666;
}
.breadcrumbs a {
    color: #555;
    text-decoration: none;
}
.breadcrumbs a:hover {
    color: #ff9900;
    text-decoration: underline;
}

/* Article Detail Content Section */
.article-detail-content {
    padding: 30px 0;
    background-color: #fff;
}

.article-header {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f0f0f0;
}

.article-header h1 {
    font-size: 2.2em; /* Larger title for detail page */
    color: #222;
    margin-bottom: 10px;
    font-weight: 600;
}

.article-meta {
    font-size: 0.9em;
    color: #888;
}

.article-body {
    font-size: 1.05em; /* Slightly larger body text for readability */
    line-height: 1.8;
    color: #333;
}

.article-body p {
    margin-bottom: 1.5em;
}

.article-body h3 {
    font-size: 1.5em;
    color: #333;
    margin-top: 2em;
    margin-bottom: 1em;
    padding-bottom: 0.3em;
    border-bottom: 2px solid #ffcc80; /* Orange underline for H3 */
    display: inline-block; /* To make border only as wide as text */
}
.article-body h3:first-child {
    margin-top: 0;
}

.article-body ol {
    list-style-type: decimal;
    margin-left: 25px; /* Indent ordered list */
    margin-bottom: 1.5em;
}
.article-body ol li {
    margin-bottom: 0.8em;
}

.article-body strong {
    font-weight: 600;
    color: #444;
}

.article-tags {
    font-size: 0.9em;
    color: #777;
    margin-top: 2em;
    word-spacing: 5px;
}

/* Related Articles Section */
.related-articles {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #eee;
}

.related-articles h2 {
    font-size: 1.6em;
    color: #333;
    margin-bottom: 25px;
    text-align: left; /* Align "相关推荐" to the left */
    border-left: 4px solid #ff9900; /* Orange accent on the left */
    padding-left: 10px;
}

.related-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); /* Responsive grid for related items */
    gap: 20px;
}

.related-item {
    background-color: #f9f9f9;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid #eee;
    transition: box-shadow 0.3s;
}
.related-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.related-item a {
    text-decoration: none;
    color: inherit;
    display: block;
}

.related-item img {
    width: 100%;
    height: 100px; /* Or adjust as needed */
    object-fit: cover;
}

.related-item-title {
    padding: 10px 12px 5px;
    font-size: 0.95em;
    font-weight: 500;
    color: #333;
    line-height: 2em;
    /* Ellipsis for long titles */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em; /* 2 lines * 1.4 line-height */
}

.related-item-date {
    padding: 0 12px 10px;
    font-size: 0.8em;
    color: #888;
}

/*==============================================
 Banner: Flex
 ===============================================*/
 .slides {
    margin: 0;
    padding: 0;
    list-style: none;
}

.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus {
    border: none; 
    outline: none;
}

.flex-control-nav {
    margin: 0;
    padding: 0;
    list-style: none;
    border: none;
}

.flex-direction-nav {
    display: none;
}

.flexslider {
    position: relative;
    margin: 0;
    padding: 0;
}

.flex-viewport {
    max-height: 2000px;
    -webkit-transition: all 1s ease;
            transition: all 1s ease;
}

.flex-control-nav {
    position: absolute;
    z-index: 10;
    right: 15px;
    bottom: 15px;
    margin: 0; 
    text-align: center;
}

.flex-control-nav li {
    display: block;
    float: left;
    width: 10px;
    height: 10px; 
    margin: 0 3px;
}

.flex-control-nav li a {
    display: block;
    width: 10px;
    height: 10px;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
         -o-transition: all .3s ease-in-out; 
            transition: all .3s ease-in-out;
    text-indent: -9999px;
    border: 1px solid #fff;
    border-radius: 50%;
}

.flex-control-nav li:hover a,
.flex-control-nav li a.flex-active {
    background-color: #fff;
}

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

.flex-direction-nav {
    *height: 0;
}

.flex-direction-nav a {
    position: absolute;
    z-index: 200;
    top: 50%;
    display: block;
    overflow: hidden;
    width: 40px;
    height: 40px;
    margin: -40px 0 0;
    cursor: pointer;
    -webkit-transition: all .3s ease-in-out;
            transition: all .3s ease-in-out;
    text-decoration: none;
    color: rgba(0, 0, 0, .8);
    background-color: rgba(0, 0, 0, .5);
    line-height: 40px;
}

.flex-direction-nav a:hover {
    background-color: rgba(0, 0, 0, .7);
}

.flex-direction-nav a:before {
    display: block;
    width: 40px; 
    content: "\f104";
    text-align: center;
    color: #fff;
    font-family: "fontawesome";
    font-size: 16px;
}

.flex-direction-nav a.flex-next:before {
    content: "\f105";
}

.flex-direction-nav .flex-prev {
    left: 0;
}

.flex-direction-nav .flex-next {
    right: 0;
    text-align: right;
}

.post-slider-thumb .flex-control-thumbs {
    position: relative;
    z-index: 10;
    top: 10px;
    right: auto;
    left: auto; 
    margin: 0 auto;
    text-align: left;
}

.post-slider-thumb .flex-control-thumbs li {
    display: inline-block;
    float: none;
    width: 80px;
    height: auto;
    margin: 0 3px 0 0;
    cursor: pointer;
}

.post-slider .flex-direction-nav,
.post-slider-thumb .flex-direction-nav {
    display: block;
}

.post-slider .flex-direction-nav .flex-prev,
.post-slider .flex-direction-nav .flex-next,
.post-slider-thumb .flex-direction-nav .flex-prev,
.post-slider-thumb .flex-direction-nav .flex-next {
    opacity: 0;
}

.post-slider:hover .flex-direction-nav .flex-prev,
.post-slider:hover .flex-direction-nav .flex-next,
.post-slider-thumb:hover .flex-direction-nav .flex-prev,
.post-slider-thumb:hover .flex-direction-nav .flex-next {
    opacity: 1;
}

.post-list-aside .post-img img {
    border: 2px solid transparent;
}

.post-list-aside .post-img img.flex-active {
    border: 2px solid rgba(0, 0, 0, .8);
}

.post-slider .flex-control-thumbs {
    display: none;
}

@media screen and (max-width: 860px) {
    .flex-direction-nav .flex-prev,
    .post-slider .flex-direction-nav .flex-prev,
    .post-slider-thumb .flex-direction-nav .flex-prev {
        left: 0; 
        opacity: 1;
    }
    .flex-direction-nav .flex-next,
    .post-slider .flex-direction-nav .flex-next,
    .post-slider-thumb .flex-direction-nav .flex-next {
        right: 0; 
        opacity: 1;
    }
}

.index-head {
    min-height: 500px;
    margin-top: 0px;;
}

/* Company Profile / About Us Page */

/* Company Intro Section */
.company-intro-section {
    padding: 40px 0;
    background-color: #fff; /* Or a very light grey like #f9f9f9 */
}

.company-intro-flex {
    display: flex;
    align-items: center; /* Vertically align items */
    gap: 40px;
}

.intro-text {
    flex: 1.5; /* Text takes more space */
}
.intro-text h2 {
    font-size: 1.8em;
    color: #333;
    margin-bottom: 15px;
    text-align: left;
}
.intro-text p {
    font-size: 1em;
    line-height: 1.7;
    color: #555;
    margin-bottom: 15px;
}

.intro-video {
    flex: 1;
    position: relative;
    max-width: 500px; /* Control video size */
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.intro-video img {
    width: 100%;
    display: block;
}
.intro-video .play-button { /* Reusing the smaller play button style */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 3em;
    color: rgba(255,255,255,0.8);
    cursor: pointer;
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Promo Video Section */
.promo-video-section {
    padding: 40px 0;
    background-color: #f0f2f5; /* Light grey background */
}

.promo-video-header {
    text-align: center;
    margin-bottom: 30px;
}
.promo-video-header h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 8px;
}
.promo-video-header p {
    font-size: 1em;
    color: #666;
}

.promo-video-player {
    position: relative;
    width: 100%;
    max-width: 1160px; /* Full container width or slightly less */
    margin: 0 auto;
    background-color: #000;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
}
.promo-video-player img {
    width: 100%;
    display: block;
}
/* Reusing .play-button-large from study_live.html for consistency */
.promo-video-player .play-button-large {
    /* Styles already defined */
}


/* Company Branches Section */
.company-branches-section {
    padding: 40px 0;
    background-color: #fff;
}
.company-branches-section h2 {
    text-align: center;
    font-size: 1.8em;
    margin-bottom: 15px;
}
.branches-intro {
    font-size: 1em;
    line-height: 1.7;
    color: #555;
    text-align: center;
    max-width: 800px; /* Constrain width of intro text */
    margin: 0 auto 30px auto;
}

.branches-grid {
    /* Uses generic .grid-container styles */
    /* Adjust columns if needed, default is 4 */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.branch-item {
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 5px;
    overflow: hidden;
    text-align: center;
}
.branch-item img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.branch-item p {
    padding: 15px 10px;
    font-weight: 500;
    color: #333;
}

/* ... existing styles ... */

/* Video Player Styling when active (already defined, should work for <video> too) */
.intro-video.is-playing,
.promo-video-player.is-playing,
.video-player-container.is-playing {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background-color: #000;
}

.intro-video.is-playing img,
.intro-video.is-playing .play-button,
.promo-video-player.is-playing img,
.promo-video-player.is-playing .play-button-large,
.video-player-container.is-playing img,
.video-player-container.is-playing .play-button,
.video-player-container.is-playing .play-button-large {
    display: none;
}

.intro-video.is-playing iframe,
.intro-video.is-playing video, /* Added 'video' selector */
.promo-video-player.is-playing iframe,
.promo-video-player.is-playing video, /* Added 'video' selector */
.video-player-container.is-playing iframe,
.video-player-container.is-playing video { /* Added 'video' selector */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ... (Existing styles) ... */

/* Video Container to help position play button over video */
.video-container {
    position: relative; /* Needed for absolute positioning of the play button */
    /* background-color: #000; /* Optional: if poster doesn't cover fully */
    border-radius: 5px;
    overflow: hidden;
}

.video-container video {
    display: block; /* Remove extra space below video */
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 5px; /* If you want rounded corners on the video itself */
}


/* Play Button Styling (No major changes, just ensure they are positioned correctly) */
.intro-video .play-button,
.promo-video-player .play-button-large {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10; /* Ensure button is on top of the video poster */
    cursor: pointer;
    /* ... (rest of existing play button styles: font-size, color, background, border-radius, width, height, display, justify-content, align-items) ... */
}

/* Copied from previous examples for completeness */
.intro-video .play-button {
    font-size: 3em;
    color: rgba(255,255,255,0.8);
    background-color: rgba(0,0,0,0.3);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.promo-video-player .play-button-large {
    font-size: 4em;
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.3s;
}
.promo-video-player .play-button-large:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

.contact-line-item.with-dropdown {
    position: relative; /* So dropdown-content can be positioned relative to this */
    cursor: default; /* Or pointer if the whole line is clickable */
}