/* ==========================================================================
  Add School Cards Section
========================================================================== */
.compare-header {
    margin-top: 25px;
    text-align: center;
    font-size: 20px;
    margin-bottom: 20px;
    font-weight: bold;
    text-align: left; /* Align text to the left */
    width: 100%;
    max-width: 1080px; /* Match the container width */
    margin-left: auto;
    margin-right: auto;
}

/* Sticky Compare Cards */
.sticky-compare {
    position: fixed;
    top: 120px; /* Adjust based on header height */
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    padding: 10px 0;
    box-shadow: 0 -4px 6px rgba(0, 0, 0, 0.1),
        /* Top Shadow */ 0 4px 6px rgba(0, 0, 0, 0.1); /* Bottom Shadow */
    transition: all 0.3s ease-in-out;
}

.sticky-table {
    position: fixed;
    top: calc(120px + 50px); /* Below the sticky-compare card */
    left: 0;
    width: 100%;
    background: white;
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

.compare-cards .col {
    text-align: center;
    background-color: #f7f7f7;
    border: 1px dashed #ccc;
    padding: 35px 25px; /* Adjusted padding for better alignment */
    border-radius: 5px; /* Slightly rounded corners */
    transition: box-shadow 0.3s;
    width: 250px; /* Increased width */
    height: 160px; /* Adjusted height */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px; /* Proper spacing */
}

.compare-cards .col:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.compare-cards .col {
    text-align: center;
    background-color: #f7f7f7;
    border: 1px dashed #ccc;
    padding: 20px 25px; /* Reduced top and bottom padding */
    border-radius: 15px; /* Slightly rounded corners */
    transition: box-shadow 0.3s;
    width: 250px; /* Increased width */
    height: 185px; /* Reduced height to remove extra space */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10px; /* Proper spacing */
}

.compare-cards .col:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
}

.add-circle {
    width: 75px; /* Slightly increased size */
    height: 75px; /* Slightly increased size */
    border: 2px dashed #186eba; /* Thicker border */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #186eba;
    font-size: 30px; /* Increased font size */
    font-weight: bold;
    margin: 0 auto;
}

.add-school {
    margin-top: 12px; /* Increased gap between circle and text */
    font-size: 14px;
    color: #186eba;
    font-weight: bold;
}

.info-section-container {
    text-align: left; /* Align text with the start of the cards */
    width: 100%;
    max-width: 1080px; /* Match card container width */
    margin-left: auto;
    margin-right: auto;
}

.info-section {
    font-weight: bold;
}

.info-section-container h5,
.info-section-container p {
    margin-left: 0; /* Ensure perfect alignment */
    text-align: left;
    font-size: 16px;
}

.custom-header th {
    background-color: #186eba !important;
    color: white !important;
}

/*--------------------------------------------------------------
# Table Section Titles
--------------------------------------------------------------*/
.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead {
    display: none; /* Hide headers */
}

.table tbody tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #ffffff !important; /* Ensure pure white background */
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    padding: 15px;
    border: none; /* Remove any borders */
    border: 1px solid #e0e0e0;
}

.table tbody tr td {
    flex: 1;
    text-align: center;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important; /* Remove borders */
    padding: 15px;
}

.table tbody tr td strong {
    font-weight: bold;
    color: #777;
    font-size: 14px;
}

/* Remove default table row hover or alternate background */
.table tbody tr:nth-child(even),
.table tbody tr:nth-child(odd) {
    background: #ffffff !important; /* Ensure no alternate row colors */
}

/*--------------------------------------------------------------
# Most Compare Section Titles
--------------------------------------------------------------*/
.compare-section-title {
    text-align: center;
    position: relative;
}

.compare-section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.compare-section-title h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.compare-section-title p {
    margin-bottom: 0;
}

.compare-box {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    background: linear-gradient(to right, #f8f9fa 50%, #e9ecef 50%);
    height: 200px;
    flex-wrap: nowrap;
}

.column {
    width: 45%;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compare-box img {
    width: auto;
    height: 80%;
    max-width: 80%;
    margin-bottom: 10px;
    border-radius: 5px;
}

.vs-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
    z-index: 1;
}

.compare-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 6px 16px;
    background-color: #1c70b8;
    color: white;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.compare-box:hover .vs-text {
    opacity: 0;
}

.compare-box:hover .compare-btn {
    opacity: 1;
}

.school-title {
    margin-top: 10px;
    text-align: center;
}

.school-title h6 {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}
.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
    content: "next";
    color: #186eba;
    font-size: 20px !important;
    font-weight: bold;
}

.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
    content: "prev";
    color: #186eba;
    font-size: 20px !important;
    font-weight: bold;
}

.school-location {
    font-size: 14px; /* Adjust as needed */
    color: #555; /* Optional: Slightly muted color */
    margin-top: 5px; /* Adds spacing */
}

/* Mobile View */
@media (max-width: 768px) {
    .compare-box {
        flex-wrap: nowrap; /* Ensure it doesn't wrap */
        height: auto; /* Adjust height dynamically */
        flex-direction: row; /* Keep columns in a row */
        justify-content: space-between;
        align-items: center;
    }

    .column {
        width: 45%; /* Maintain side-by-side layout */
        margin-bottom: 0;
    }

    .vs-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

@media (max-width: 767px) {
    #compareCards {
        display: flex;
        flex-wrap: nowrap; /* Prevent wrapping */
        justify-content: space-between; /* Distribute evenly */
        width: 100%; /* Ensure full width */
        overflow: hidden; /* No scrolling */
        padding: 0 5px; /* Small padding to keep alignment */
    }

    .compare-cards .col {
        width: 22% !important; /* Adjust width so 4 fit in one row */
        height: 110px !important; /* Reduce height */
        padding: 8px !important;
        flex: 0 0 auto; /* Maintain fixed width */
    }

    .add-circle {
        width: 40px !important; /* Smaller circle */
        height: 40px !important;
        font-size: 16px !important;
    }

    .add-school {
        font-size: 10px !important;
    }
}

@media (max-width: 991px) {
    /* For tablets */
    #compareCards {
        display: flex;
        flex-wrap: nowrap; /* Prevent wrapping */
        justify-content: space-between; /* Evenly distribute */
        width: 100%; /* Full width */
        overflow: hidden; /* Prevent scrolling */
        padding: 0 10px; /* Small padding for alignment */
    }

    .compare-cards .col {
        width: 22% !important; /* Ensure 4 cards fit */
        height: 120px !important; /* Slightly larger for tablets */
        padding: 10px !important;
        flex: 0 0 auto; /* Maintain fixed width */
    }

    .add-circle {
        width: 45px !important; /* Adjust size */
        height: 45px !important;
        font-size: 18px !important;
    }

    .add-school {
        font-size: 12px !important;
    }
}