body {

            margin: 0;
        }

    .section.trending {
        margin-top: 10px;
    }

    .jumbotron {
        position: relative;
        background: none;
        color: white;
        margin-bottom: 20px;
    }

    .jumbotron:after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        background-image: url('../images/banner.jpg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 80%;
        opacity: 0.10;
        z-index: -1;
    }

    .jumbotron .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 80%;
        background-color: #D2F6FF;
        z-index: -1;
    }

    .jumbotron .lead {
        color: #4889cf;
        text-align: justify;
        margin: 0 2in;
        line-height: 1.8;
    }

    .kcp-facilities {
        text-align: center;
        font-size: 24px;
        color: #E38732;
        margin-bottom: 20px;
        margin-top: -50px;
        animation: fadeInDown 1s ease-in-out;
    }

    .trending-items {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      /* Adjusted negative margin */
    }
    .carousel-control-prev,
    .carousel-control-next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 10; /* Higher z-index to ensure it's above other elements */
        width: 50px; /* Set width for control */
        height: 50px; /* Set height for control */
        background: transparent;
        border: none;
        outline: none;
    }
    
    .carousel-control-prev {
        left: 5px; /* Move the control outside of the carousel */
    }
    
    .carousel-control-next {
        right: 5px; /* Move the control outside of the carousel */
    }
    
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        width: 30px;
        height: 30px;
        background-size: 100%, 100%;
    }
    

    
    .trending-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 20px; /* Adjusted margin */
        cursor: pointer;
        text-align: center;
        animation: fadeInUp 1s ease-in-out;
        width: calc(20% - 10px); /* Two items per row with margin adjustments */
        
    }

    .trending-item .thumb {
        width: 80px;
        height: 80px;
        margin-bottom: 5px;
        background-color: #D2F6FF;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
        transition: background-color 0.3s ease;
    }

    .trending-item .thumb:hover {
        background-color: #F8E1CC;
    }

    .trending-item .thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 10px;
    }

    .trending-item .down-content {
        width: 100%;
        word-break: break-word;
    }

    .trending-item .down-content h4 {
        font-size: 11px;
        margin: 10px 0;
        font-weight: 300;
        color: #777;
    }
    @media (max-width: 768px) {
        .jumbotron .lead {
            margin: 0 1in;
        }
    }

    @media (max-width: 576px) {
        .jumbotron .lead {
            margin: 0 0.5in;
        }
    }

    @keyframes fadeInDown {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }


    .carousel-inner .row {
        max-width: 900px; /* Adjusted maximum width */
        margin: 0 auto; /* Center align the row */
    }

    .carousel-item {
        width: 100%;
    }

    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: transparent;
        height: 2px; /* Reduced height */
        width: 50px;  /* Added width for consistent control size */
        margin-top: -60px;
    }

    .carousel-control-prev-icon {
        background-image: none;
        margin-right: 100px;
    }

    .carousel-control-prev-icon::before {
        content: '‹';
        font-size: 50px;
        color: #4889cf;
        display: inline-block;
    }

    .carousel-control-next-icon {
        background-image: none;
        margin-left: 100px;
    }

    .carousel-control-next-icon::before {
        content: '›';
        font-size: 50px;
        color: #4889cf;
        
    }



    @media (max-width: 576px) {
        .jumbotron {
            position: relative;
            background: none;
            color: white;
            margin-top: 35px;
            width:103%;
        }
        .jumbotron:after {
            height: 100%; /* Adjusted to cover the entire jumbotron */
            
            opacity: 0.2;
        }
    
        .jumbotron .overlay {
            height: 91%; /* Match the overlay height to the jumbotron */
        }
    
        .jumbotron .lead {
            margin: 0 10px; /* Reduce margin for smaller screens */
            font-size: 12px; /* Adjust font size for better readability */
            line-height: 1.6;
            margin-top: -4px;
        }
    
        .kcp-facilities {
            font-size: 18px; /* Reduced font size to fit better on small screens */
            margin-top: -30px; /* Adjust margin to avoid overlapping */
        }
    
        .carousel-inner .row {
            flex-direction: column; /* Stack items vertically */
        }
    
        .carousel-item {
            max-width: 100%; /* Ensure the carousel item does not exceed the container width */
        }
        .trending-item {
            width: calc(50% - 10px); /* Two items per row with margin adjustments */
            margin: 5px; /* Adjust margin for spacing between items */
        }
    
    }