/* Universal Box-Sizing for consistency */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: #f5f5f5;
    overflow-x: hidden; /* Prevent horizontal overflow */
    width: 100%; /* Ensure body doesn't exceed viewport */
}

.main-content {
    padding: 30px;
    max-width: 100%; /* Prevent container from causing overflow */
}

.header {
    background-color: #3498db;
    color: white;
    padding: 20px;
    margin-bottom: 20px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allows items to wrap on smaller screens */
    gap: 15px;
}

.header h1 {
    margin: 0;
    flex-grow: 1; /* Allows the heading to take available space */
}

.exit-button {
    white-space: nowrap; /* Prevents button text from wrapping */
}

.content {
    padding: 30px;
    border-radius: 4px;
    max-width: 100%; /* Prevent content from causing overflow */
    overflow-x: auto; /* Allow horizontal scrolling only when needed */
}

.filter-container {
    background-color: #f8f9fa;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
}

.filter-row {
    display: flex;
    flex-wrap: wrap; /* Allows filter groups to wrap to the next line */
    gap: 15px;
    margin-bottom: 15px;
}

.filter-group {
    flex: 1; /* Allows groups to grow and shrink */
    min-width: 200px; /* Ensures a minimum width before wrapping */
}

/* TABLE STYLING - Adjusted for no horizontal scroll on mobile */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    table-layout: auto; /* Allow table to adjust column widths */
    max-width: 100%; /* Prevent table from overflowing */
}

th, td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    word-break: break-word; /* Prevent long words from causing overflow */
}

th {
    background-color: #3498db;
    color: white;
    position: relative;
    cursor: pointer;
}

th.sortable:hover {
    background-color: #2980b9;
}

th.sort-asc::after {
    content: ' ↑';
}

th.sort-desc::after {
    content: ' ↓';
}

tr:hover {
    background-color: #f5f5f5;
}

.action-links a {
    margin-right: 10px;
    color: #3498db;
    white-space: nowrap; /* Prevents action links from breaking */
    font-size: 0.9em; /* Slightly smaller on all screens for better fit */
}

.action-links a:hover {
    text-decoration: underline;
}

.pagination {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    flex-wrap: wrap; /* Allows pagination items to wrap */
    gap: 5px; /* Small gap between pagination items */
}

.no-records {
    text-align: center;
    padding: 20px;
    color: #777;
}

/* Common Section Heading Styling (if not already global) */
.section-heading {
    text-align: center;
    font-size: 38px;
    font-weight: 700;
    color: var(--dark-blue); /* Using dark blue for section headings */
    margin-bottom: 20px;
}

.section-heading + p { /* Style for paragraph immediately following a section heading */
    margin-top: 30px; /* Center and add bottom margin */
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-color);
}

/* Adjust button part styling (if not already global) */
.btn-part a {
    background-color: var(--theme);
    color: var(--white);
    padding: 10px 25px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 5px;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-part a:hover {
    background-color: var(--dark-blue); /* Darker hover for theme */
    color: var(--theme);
    transform: translateY(-2px);
}

/* --- Hero Section --- */
.hero-sec{
    padding: 120px 0px;
    background: url('../assets/images/home/background.png'); /* Ensure this path is correct */
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: center;
    color: var(--white);
}
.hero-sec h1{
    font-size: 44px;
    font-weight: 700;
    margin-bottom: 15px; /* Adjusted margin */
    color: var(--theme);
}
.hero-sec h2 { /* Added styling for h2 in hero */
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--white); /* Using theme color for H2 */
}
.hero-sec .btn-part{
    margin-top: 30px;
}
.hero-sec p{
    margin: 20px 0;
    font-size: 18px;
    line-height: 1.6; /* Better readability */
    color: var(--white);
}

/* --- About Section --- */
.about-sec{
    padding: 60px 0;
    background-color: #fff;
}
.about-sec .about{
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column-gap: 40px; /* Increased gap */
    align-items: center; /* Vertically align content */
}
.about-sec .about .imgpart img{
    border-radius: 8px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); /* Soft shadow */
}
.about-sec .about .content{
    padding: 0; /* Remove top/bottom padding to let grid handle it */
}
.about-sec .about .content h2{
    font-size: 36px;
    font-weight: 700;
    color: var(--dark-blue);
    margin-bottom: 20px;
}
.about-sec .about .content p {
    margin-bottom: 15px;
    line-height: 1.6;
    color: var(--text-color);
}
.about-sec .about .content .btn-part {
    margin-top: 25px;
}

/* --- Services Section --- */
.services-sec{
    padding: 60px 0px;
    background: #ffffff4f;
    color: var(--black);
}

/* Common styling for section heading (if not global) */
.services-sec .section-heading {
    color: var(--theme); /* Override for this section */
    margin-bottom: 15px; /* Adjust spacing */
}
.services-sec .section-heading + p {
    color: var(--black); /* Ensure paragraph text is white */
}


.services-sec .services .card {
    border-radius: 10px; /* Slightly more rounded */
    color: var(--white);
    background: rgba(255, 255, 255, 0.08); /* More subtle translucent background */
    height: 100%;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); /* Deeper shadow */
    transition: all 0.4s ease-in-out; /* Smoother transition */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
    text-decoration: none; /* Remove underline from link */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.services-sec .services .card .service-name{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px; /* Increased gap for icon and text */
    padding-bottom: 15px;
}
.services-sec .services .card .service-name img{
    width: 80px; /* Slightly smaller icon */
    padding: 12px; /* Adjusted padding */
    border: 2px solid var(--theme);
    border-radius: 50%;
    background-color: var(--white); /* White background for icons */
    box-shadow: #fff;
}
.services-sec .services .card .service-name p{
    font-size: 20px; /* Slightly smaller font */
    font-weight: 600;
    color: var(--theme);
    margin-bottom: 0;
}
.services-sec .services .card .service-info{
    text-align: center;
    font-size: 15px;
    line-height: 1.5;
    color:var(--black);
}
.services-sec .services .card:hover{
    background: #fff;
    color:var(--black);
    transform: translateY(-8px); /* Less dramatic lift */
    box-shadow: #fff; /* Stronger shadow on hover */
}
.services-sec .services .card:hover .service-name img{
    background: var(--black); /* Darker background on hover */
    border-color: var(--white); /* White border on hover */
}
.services-sec .services .card:hover .service-name p{
    color: var(--theme); /* White text on hover */
}
.services-sec .services .card:hover .service-info {
    color: var(--black); /* Black text on hover */
}

/* --- Facilities Section --- */
.facilities-sec {
    padding: 60px 0px;
    background-color: #f8f9fa; /* Light background */
}
.facilities-sec .section-heading {
    color: var(--dark-blue);
}
.facilities-sec .card{
    cursor: pointer;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    overflow: hidden; /* Ensures rounded corners */
}
.facilities-sec .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
.facilities-sec .card .card-top{
    background: linear-gradient(188deg, var(--theme), #795548); /* Using theme variable */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 25px 0 !important; /* Increased padding */
}
.facilities-sec .card .card-top img{
    width: 80px; /* Adjusted icon size */
}
.facilities-sec .card .card-body{
    text-align: center;
    padding: 25px; /* Consistent padding */
    background-color: #fff;
}
.facilities-sec .card .card-title{
    color: var(--dark-blue);
    font-weight: 600;
    font-size: 22px; /* Adjusted font size */
    margin-bottom: 10px;
}
.facilities-sec .card .card-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color);
}

/* --- Doctors Section --- */
.doctors-sec{
    padding: 60px 0px;
    background: #c3c3c321; /* Light background */
}
.doctors-sec .section-heading {
    color: var(--dark-blue);
}
.doctors-sec p {
    margin: 30px auto 30px auto;
    font-size: 17px;
    line-height: 1.6;
    color: var(--text-color);
}
.doctors-sec .doctors {
    padding-top: 30px;
}
.profile-icon {
    width: 90px; /* Increased size */
    height: 90px;
    border-radius: 50%;
    background-color: #f0f8ff; /* Light blue background */
    color: var(--theme); /* Theme color for icon */
    font-size: 2.5rem; /* Larger icon */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.doctor-card {
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1); /* Softer shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--white);
    border: none; /* Remove default card border */
}

.doctor-card:hover {
    transform: translateY(-8px); /* More noticeable lift */
    box-shadow: 0 8px 25px rgba(0,0,0,0.15); /* Stronger shadow on hover */
}

.doctor-card .card-top {
    background: linear-gradient(135deg, var(--theme), #795548); /* Gradient for top part */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    padding: 25px 0 !important; /* Important to override default padding */
}

.card-title {
    font-weight: 600;
    color: var(--dark-blue); /* Dark blue for titles */
    margin-bottom: 0.5rem;
    font-size: 20px; /* Adjusted font size */
}

.specialization {
    color: var(--theme); /* Theme color for specialization */
    font-weight: 600; /* Bolder specialization */
    margin-bottom: 0.3rem;
    font-size: 16px;
}

.qualification {
    color: #777;
    font-size: 0.9rem;
}

/* --- Responsiveness --- */
@media screen and (max-width:1199px) {
    .hero-sec h1{
        font-size: 38px;
    }
    .hero-sec h2 {
        font-size: 28px;
    }
    .hero-sec p{
        font-size: 17px;
    }
    .about-sec .about .content h2 {
        font-size: 32px;
    }
    .section-heading {
        font-size: 34px;
    }
    .section-heading + p {
        font-size: 16px;
    }
}

@media screen and (max-width:991px) {
    .hero-sec{
        padding: 80px 0px;
    }
    .about-sec .about{
        grid-template-columns: 1fr; /* Single column layout */
        grid-column-gap: 0;
        grid-row-gap: 30px; /* Gap between stacked elements */
    }
    .about-sec .about .imgpart{
        order: 1; /* Puts image first on small screens */
    }
    .about-sec .about .content {
        text-align: center; /* Center align text on small screens */
    }
    .about-sec .about .content p,
    .about-sec .about .content .btn-part {
        text-align: center;
        margin-left: auto;
        margin-right: auto;
    }
    .services-sec .section-heading + p {
        max-width: 90%;
    }
    .facilities-sec .section-heading + p {
        max-width: 90%;
    }
    .doctors-sec p {
        max-width: 90%;
    }
}

@media screen and (max-width:767px) {
    .main-content {
        padding: 15px; /* Reduce main content padding on smaller screens */
    }

    .header {
        flex-direction: column; /* Stack header items vertically */
        align-items: flex-start; /* Align items to the start */
        padding: 15px;
        gap: 10px; /* Reduced gap */
    }
    .header h1 {
        font-size: 1.8rem; /* Smaller header title */
    }
    .exit-button {
        padding: 8px 12px; /* Smaller button padding */
        font-size: 0.9rem; /* Smaller button font */
    }

    .content {
        padding: 20px; /* Reduced content padding */
    }

    .filter-container {
        padding: 15px; /* Reduced filter container padding */
    }

    .filter-row {
        flex-direction: column; /* Stack filter groups vertically */
        gap: 10px; /* Smaller gap between stacked filters */
    }

    .filter-group {
        min-width: unset; /* Remove min-width to allow full width */
        width: 100%; /* Make filter groups take full width */
    }

    /* Table adjustments for no horizontal scroll */
    table {
        /* No min-width, allowing table to shrink */
        word-break: break-word; /* Allow long words to break */
        font-size: 0.85em; /* Smaller font size for table content */
    }
    th, td {
        padding: 8px 10px; /* Reduced cell padding */
    }
    .action-links a {
        margin-right: 5px; /* Smaller margin for action links */
        font-size: 0.8em; /* Even smaller font for action links on this breakpoint */
    }

    .hero-sec h1{
        font-size: 32px;
    }
    .hero-sec h2{
        font-size: 24px;
    }
    .hero-sec p{
        font-size: 16px;
    }
    .about-sec .about .content h2 {
        font-size: 28px;
    }
    .section-heading {
        font-size: 30px;
    }
    .section-heading + p {
        font-size: 15px;
        margin-bottom: 30px;
    }
    .facilities-sec .card-title {
        font-size: 20px;
    }
    .doctor-card .card-title {
        font-size: 18px;
    }
}

@media screen and (max-width:575px) {
    .main-content {
        padding: 10px; /* Even smaller padding */
    }

    .header {
        padding: 10px; /* Even smaller header padding */
    }
    .header h1 {
        font-size: 1.5rem; /* Further reduced header title */
    }
    .exit-button {
        padding: 6px 10px; /* Further reduced button padding */
        font-size: 0.8rem; /* Further reduced button font */
    }

    .content {
        padding: 15px; /* Further reduced content padding */
    }

    .filter-container {
        padding: 10px; /* Further reduced filter container padding */
    }
    .filter-row {
        gap: 8px; /* Slightly smaller gap */
    }

    /* Table adjustments */
    th, td {
        padding: 6px 8px; /* Significantly reduced cell padding */
        font-size: 0.75em; /* Smallest font size for table text */
    }
    .action-links a {
        font-size: 0.7em; /* Smallest font for action links */
        margin-right: 3px;
    }

    .hero-sec{
        background: linear-gradient(112deg, var(--theme), var(--black)); /* Solid background on very small screens */
        padding: 50px 0;
        text-align: center; /* Center all text in hero */
    }
    .hero-sec h1{
        font-size: 28px;
    }
    .hero-sec h2{
        font-size: 20px;
    }
    .hero-sec p{
        font-size: 15px;
        margin-top: 10px;
    }
    .hero-sec .btn-part {
        text-align: center;
    }
    .about-sec .about .content h2 {
        font-size: 24px;
    }
    .services-sec, .facilities-sec, .doctors-sec {
        padding: 40px 0; /* Reduced padding */
    }
    .section-heading + p {
        font-size: 14px;
        margin-bottom: 25px;
    }
    .services-sec .services .card .service-name img {
        width: 70px;
        padding: 10px;
    }
    .services-sec .services .card .service-name p {
        font-size: 18px;
    }
    .facilities-sec .card .card-top img {
        width: 70px;
    }
    .facilities-sec .card .card-title {
        font-size: 18px;
    }
    .profile-icon {
        width: 70px;
        height: 70px;
        font-size: 2rem;
    }
    .pagination {
        flex-direction: column; /* Stack pagination buttons vertically */
        align-items: center; /* Center stacked pagination buttons */
    }
    .pagination button, .pagination a { /* Adjust styling for pagination buttons */
        width: 100%;
        max-width: 150px; /* Limit width of individual buttons */
        font-size: 0.85rem; /* Smaller font for pagination */
        padding: 6px 10px; /* Smaller padding for pagination */
    }
    
    /* Additional mobile-specific fixes */
    body {
        position: relative;
        width: 100vw;
        overflow-x: hidden;
    }
    
    .hero-sec h1, 
    .hero-sec h2,
    .section-heading {
        word-break: break-word; /* Prevent long words from causing overflow */
    }
    
    /* Make sure images don't cause overflow */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Ensure all cards stay within bounds */
    .card {
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }
    
    /* Prevent text overflow in cards */
    .card-title, 
    .card-text,
    .service-name p,
    .service-info {
        word-break: break-word;
        hyphens: auto;
    }
}