/* Patient Feedback Section */
.patient-feedback-section {
    display: flex;
    flex-direction: column;
}

/* Feedback Heading */
.patient-feedback-heading {
    font-family: "Audiowide", system-ui;
    font-size: 2.3em;
    font-weight: bold;
    text-align: center;
    color: #001F62;
    margin-bottom: 50px;
    margin-top: 65px;
}

.feedback-card {
    max-width: 300px;
    min-height: 500px !important;
    background-color: #f2f8f9;
    border-radius: 25px !important;
    padding: 2em 2em; /* Increased horizontal padding */
    margin: 8px; /* Reduce this value */
    text-align: center;
    overflow: hidden;
    background: linear-gradient(to bottom, #c3e6ec, #a7d1d9);
    font-family: Outfit, sans-serif;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.4); 
    transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, background-color 0.5s ease-out, color 0.5s ease-out;
    margin-top: 30px;
    margin-bottom: 30px;
}

/* Slider Container with Reduced Width */
.slider-container {
    width: 100%;
    max-width: 90%; /* Reduce the container width to 90% of the parent element */
    margin: 0 auto; /* Center the container */
    overflow: hidden;
    position: relative;
}



/* Title and Description */
.card-heading {
    color: #001F62;
    font-size: 1.3em;
    font-weight: 800;
    margin-bottom: 0.5em;
}

.card-content {
    font-size: 0.9em;
    font-weight: 400;
    color: #001F62;
    text-align: justify;
}

/* Change text color to white on hover */
.feedback-card:hover .card-heading,
.feedback-card:hover .card-content {
    color: white; /* Change text color to white on hover */
}

/* Google Reviews Icon */
.google-reviews-icon {
    width: 130px;
    display: block;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Corner Animation (Top-right) */
.feedback-card:before {
    content: '';
    position: absolute;
    z-index: -1;
    top: -16px;
    right: -16px;
    background: linear-gradient(135deg, #364a60, #384c6c);
    height: 32px;
    width: 32px;
    border-radius: 32px;
    transform: scale(1);
    transform-origin: 50% 50%;
    transition: transform 0.35s ease-out;
}

.feedback-card:hover:before {
    transform: scale(28);
}

/* Hover Effects with Enhanced Shadow */
.feedback-card:hover {
    transform: scale(1.05);
    /* Enhance shadow on right and bottom side */
    box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.8); 
}

/* Slider Controls */
.slider-control {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 9999;
}

.slider-control.prev {
    left: -1%;
}

.slider-control.next {
    right: 3%;
}

.slider-control img {
    width: 80px;
    height: 80px;
    
}

/* Slider Styles */
.slider-container {
    width: 90%;
    overflow: hidden;
    position: relative;
}

.slider {
    display: flex;
    justify-content: space-evenly;
    transition: transform 0.5s ease;
    will-change: transform;
}

.slider .col-12 {
    flex: 0 0 32.32%; /* Previously it was 33.33%, reduce this slightly */
    max-width: 32%;
    display: flex;
    justify-content: center;
}

/* Feedback card setup */
.feedback-card {
    position: relative;
    overflow: hidden; /* Prevents overflow during sliding */
}



/* Tablet Screens (991px and below) */
@media (max-width: 991px) {
    .slider .col-12 {
        flex: 0 0 50%; /* Show 2 cards at a time on medium screens */
        max-width: 50%;
    }

    .feedback-card {
        min-height: 450px !important; /* Adjust height for smaller screens */
        padding: 1.5em 1em; /* Reduce padding for smaller screens */
    }

    .google-reviews-icon {
        width: 80px; /* Adjust icon size */
        bottom: 20px; /* Position icon higher on smaller screens */
    }

    /* Adjust control buttons for smaller screens */
    .slider-control.prev {
        left: 25px;
    }

    .slider-control.next {
        right: 25px;
    }
}

/* Mobile Screens (768px and below) */
@media (max-width: 768px) {
    .slider .col-12 {
        flex: 0 0 100%; /* Show 1 card at a time on small screens */
        max-width: 100%;
    }

    .feedback-card {
        padding: 2em 2.0em; /* Slightly reduced padding for smaller screens */
        min-height: 400px !important; /* Adjust height for mobile */
    }

    .card-heading {
        font-size: 1.1em; /* Decrease heading size on mobile */
    }

    .card-content {
        font-size: 1em; /* Decrease content font size on mobile */
    }

    .google-reviews-icon {
        width: 70px; /* Adjust icon size */
        bottom: 15px; /* Position icon higher */
    }

    .slider-control {
        position: absolute;
        top: 55%;
    }

    /* Further adjust control buttons for small screens */
    .slider-control.prev {
        left: 15px;
    }

    .slider-control.next {
        right: 15px;
    }
}

/* Small Mobile Screens (560px and below) */
@media (max-width: 560px) {
    .feedback-card {
        padding: 2em 1.8em; /* Further reduced horizontal padding for very small screens */
        min-height: 420px !important; /* Reduce height further */
        margin-top: 0.5em; /* Add a small margin to separate the card from the next one */
        margin-bottom: 70px;
    }

    /* Slider Container with Reduced Width */
    .slider-container {
        width: 100%;
        max-width: 100%; /* Reduce the container width to 90% of the parent element */
        margin: 0 auto; /* Center the container */
        overflow: hidden;
        position: relative;
    }

    .patient-feedback-heading {
        font-family: "Audiowide", system-ui;
        font-size: 1.8em;
        font-weight: bold;
        text-align: center;
        color: #001F62;
    }

    .card-heading {
        font-size: 1em; /* Further decrease heading size */
    }

    .card-content {
        font-size: 0.9em; /* Keep content font size */
        line-height: 1.2em; /* Adjust line-height for better readability */
        margin-top: 1.0em !important; /* Reduce space between heading and content */
    }

    .google-reviews-icon {
        width: 90px; /* Keep icon size */
        bottom: 8px; /* Maintain icon positioning */
        margin-top: 0.5em; /* Ensure space between content and icon */
    }
    /* Adjust control buttons for smaller screens */
    .slider-control.prev {
        left: 45px;
        margin-top: 180px;
    }

    .slider-control.next {
        right: 45px;
        margin-top: 180px;
    }
}

/* Extra Small Mobile Screens (320px and below) */
@media (max-width: 320px) {
    .feedback-card {
        min-height: 420px !important; /* Increase height for small screens */
        padding: 2em 1.5em; /* Maintain reduced padding */
        margin-top: 0.5em; /* Add a small margin to separate the card from the next one */
    }

    .card-heading {
        font-size: 0.9em; /* Maintain decreased heading size */
        margin-bottom: 0.3em; /* Reduce space between heading and card content */
    }

    .card-content {
        font-size: 1.1em; /* Keep content font size */
        line-height: 1.4em; /* Adjust line-height for better readability */
        margin-top: 1.0em !important; /* Reduce space between heading and content */
    }

    .google-reviews-icon {
        width: 100px; /* Keep icon size */
        bottom: 8px; /* Maintain icon positioning */
        margin-top: 0.5em; /* Ensure space between content and icon */
    }

    /* Adjust control buttons for smaller screens */
    .slider-control.prev {
        left: 45px;
    }

    .slider-control.next {
        right: 45px;
    }
}

@media (min-width: 2560px) {
    .patient-feedback-section {
        min-height: 97vh;
        display: flex;
        flex-direction: column;
    }
    .patient-feedback-heading {
        font-size: 4em; /* Increase heading font size */
        margin-bottom: 70px; /* Increase space below the heading */
        margin-top: 80px; /* Increase space above the heading */
    }

    .feedback-card {
        margin-top: 150px;
        max-width: 450px; /* Increase the width of feedback cards */
        min-height: 850px !important; /* Increase the height of feedback cards */
        padding: 3em 1.5em; /* Increase padding inside cards */
        border-radius: 30px !important; /* Increase border radius for a more rounded look */
        background-color: #f2f8f9; /* Maintain background color */
        background: linear-gradient(to bottom, #c3e6ec, #a7d1d9); /* Gradient background */
        box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.6); /* Enhance shadow */
        margin-bottom: 30px;
        transition: transform 0.5s ease-out, box-shadow 0.5s ease-out, background-color 0.5s ease-out, color 0.5s ease-out; /* Smooth transitions */
    }

    /* Slider Container with Reduced Width */
    .slider-container {
        width: 100%;
        max-width: 90%; /* Reduce the container width to 90% of the parent element */
        margin: 0 auto; /* Center the container */
        overflow: hidden;
        position: relative;
    }

    .feedback-card:hover {
        transform: scale(1.05); /* Increase hover scale effect */
        box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.8); /* Enhance hover shadow */
    }

    .card-heading {
        font-size: 2.5em; /* Increase heading size */
        color: #001F62; /* Maintain color */
        font-weight: 800; /* Maintain font weight */
        margin-bottom: 0.5em; /* Maintain spacing */
    }

    .card-content {
        font-size: 1.8em; /* Increase content font size */
        color: #001F62; /* Maintain color */
        font-weight: 400; /* Maintain font weight */
        text-align: center; /* Center-align the content */
    }

    /* Hover text color change */
    .feedback-card:hover .card-heading,
    .feedback-card:hover .card-content {
        color: white; /* Change text color to white on hover */
    }

    .google-reviews-icon {
        width: 160px; /* Increase size of Google Reviews icon */
        bottom: 40px; /* Position icon lower in the card */
        left: 50%; /* Keep icon centered */
        transform: translateX(-50%); /* Keep icon centered */
        transition: transform 0.3s ease, filter 0.3s ease; /* Maintain smooth transition */
    }

    .feedback-card:before {
        content: '';
        position: absolute;
        z-index: -1;
        top: -16px;
        right: -16px;
        background: linear-gradient(135deg, #364a60, #384c6c); /* Corner animation gradient */
        height: 40px; /* Increase size of the corner circle */
        width: 40px;
        border-radius: 40px; /* Maintain round corner */
        transform: scale(1);
        transition: transform 0.35s ease-out; /* Smooth corner animation */
    }

    .feedback-card:hover:before {
        transform: scale(38); /* Enhance corner expansion effect on hover */
    }

    .slider .col-12 {
        flex: 0 0 25%; /* Display 4 cards at a time */
        max-width: 25%;
    }

    .slider-control img {
        width: 70px; /* Increase the size of the slider control icons */
        height: 70px;
    }

    .slider-control.prev {
        left: 30px; /* Adjust slider control positioning */
    }

    .slider-control.next {
        right: 30px; /* Adjust slider control positioning */
    }
}

@media (max-width: 1440px) {
    /* Slider Container with Reduced Width */
    .slider-container {
        width: 100%;
        max-width: 100%; /* Reduce the container width to 90% of the parent element */
        margin: 0 auto; /* Center the container */
        overflow: hidden;
        position: relative;
    }
}

@media (min-width: 1980px) {
    .slider-control.prev {
        left: -10px;
    }
    
    .slider-control.next {
        right: 45px;
    }
}