/* Add this CSS code to your existing stylesheet */
@import url("https://fonts.googleapis.com/css2?family=Baloo+Da+2&display=swap");
            html,
            body {
                font-family: "Baloo Da 2";
            }
/* Style for the movie cards container */
 @media (min-width: 992px) {
.movie-cards-container-view{
    display:grid;
    grid-template-columns:40% auto;
    grid-column-gap: 20px;
    margin2px;
    margin-bottom:20px;
    justify-items:start;
    align-items:start;
}
}
@media (max-width: 991px) {
.movie-cards-container-view {
    display: grid;
    justify-items: center;
    grid-template-columns: auto;
    grid-column-gap: 20px;
    grid-row-gap: 20px;
}
}

/* Style for the movie card */
.movie-card-view {
    background-color: transparent; /* Black background color */
    color: #fff; /* White text color */
    padding: 0; /* Remove padding for the entire card */
    margin-top: 4px;
    text-align:left;
    border-radius: 4px; /* Add border radius to the image */

    /* Responsive layout */
    @media (max-width: 768px) {
        height: auto;
        min-width: calc(100% - 10px);
        max-width: calc(100% - 10px); /* Limit card width for 2 columns on mobile */
    }
    @media (min-width: 769px) {
        min-width: calc(100% - 10px);
        max-width: calc(100% - 10px); /* Limit card width for 4 columns in desktop */
    }
}

/* Style for the movie card image container */
.movie-card-view .image-container-view {
    position: relative;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    width: 100%;
    /* Responsive layout */
    @media (max-width: 768px) {
        height: auto;
    }
    @media (min-width: 769px) {
        height: auto;
    }
    overflow: hidden; /* Hide overflow to ensure the image fits within the container */
}

/* Style for the overlay data */
.movie-card-view .quality {
    position: absolute;
    top: 8px; /* Add space from the top */
    right: 8px; /* Add space from the right */
    border-radius: 2px 2px 2px 2px; /* Rounded border on the top-left corner */
    background-color: #001c55; /* Background color for the overlay */
    color: #fff; /* Text color for the overlay */
    padding: 3px 6px 0 6px; /* Padding for the overlay (adjust as needed) */
    font-weight: bold;
    font-size: 12px; /* Adjust the font size as needed */
    @media (min-width: 769px) {
        font-size: 18px;;
    }
}
.movie-card-view .notice {
    position: absolute;
    top: 8px; /* Add space from the top */
    left: 8px; /* Add space from the right */
    border-radius: 2px 2px 2px 2px; /* Rounded border on the top-left corner */
    background-color: #FF0000; /* Background color for the overlay */
    color: #fff; /* Text color for the overlay */
    padding: 3px 6px 0 6px; /* Padding for the overlay (adjust as needed) */
    font-weight: bold;
    font-size: 12px; /* Adjust the font size as needed */
    @media (min-width: 769px) {
        font-size: 18px;;
    }
}
.movie-card-view .image-container-view .language {
    position: absolute;
    bottom: 0;
    left: 0; /* Add space from the right */
    border-radius: 0 2px 0 4px; /* Rounded border on the top-left corner */
    background-color: #5f8f00; /* Background color for the overlay */
    color: #fff; /* Text color for the overlay */
    padding: 3px 4px 0 4px; /* Padding for the overlay (adjust as needed) */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px; /* Adjust the font size as needed */
    @media (min-width: 769px) {
        font-size: 18px;;
    }
}
.movie-card-view .image-container-view .type {
    position: absolute;
    bottom: 0;
    right: 0; /* Add space from the right */
    border-bottom-right-radius: 4px;
    border-radius: 2px 0 4px 0; /* Rounded border on the top-left corner */
    background-color: #FF0000; /* Background color for the overlay */
    color: #fff; /* Text color for the overlay */
    padding: 3px 4px 0 4px; /* Padding for the overlay (adjust as needed) */
    text-transform: uppercase;
    font-weight: bold;
    font-size: 12px; /* Adjust the font size as needed */
    @media (min-width: 769px) {
        font-size: 18px;;
    }
}

/* Style for the movie card image */
.movie-card-view .image-container-view img {
    width: 100%; /* Set image width to 100% to fit the container */
    height:auto; /* Automatically adjust the image height while maintaining aspect ratio */
    border-radius: 4px; 
    transition: transform 0.3s, opacity 0.3s; /* Add transitions for transform and opacity */
}

.movie-card-view .rating{position:absolute;top:8px;/* Add space from the top */
    left:8px;/* Add space from the left */
    border-radius:2px 2px 2px 2px;/* Rounded border on the top-left corner */
    background-color:#F50F51;/* Background color for the overlay */
    color:#fff;/* Text color for the overlay */
    padding:3px 6px 0 6px;/* Padding for the overlay (adjust as needed) */
    font-weight:bold;font-size:12px;/* Adjust the font size as needed */
    @media (min-width: 769px) {
        font-size: 18px;
    }
}

/* Hover effect for the movie card image */
.movie-card-view .image-container-view:hover img {
    border-radius: 4px;
    opacity: 0.8; /* Reduce opacity on hover */
}

/* Style for other content */
.movie-card-view .content-view {
    position: relative;
    height: 60px; /* Set content height to 30% of card height */
    padding: 5px; /* Add padding for title and other content */
    overflow: hidden; /* Hide content overflow */
}

/* Style for truncated text */
.movie-card-view .content-view a {
    margin-top: 3px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    max-height: 3.2em; /* Adjust the value for two lines of text */
    font-size: 14px;
    text-decoration: none;
    color: #fff !important; /* Dim white color */
}

/* Highlight text color on hover within .movie-card */
.movie-card-view a:hover {
    color: #4e73df !important; /* White color on hover with !important */
}


/* Additional CSS for button text responsiveness */
.btn-text {
    color: cyan !important;
    font-size: 24px; /* Default font size for larger screens */
    white-space: nowrap; /* Prevent text from wrapping */
    overflow: hidden; /* Hide overflowed text */
    text-overflow: ellipsis; /* Add ellipsis (...) for long text */
}
.btn-text i {
    color: cyan !important;
}
.btn-user {
        padding: 8px 15px; /* Adjust padding for smaller buttons */
    }
/* Adjust button size for different screen sizes using Bootstrap classes */
@media (max-width: 767px) {
    /* Small screens (e.g., mobile) */
    .btn-text {
        font-size: 27px; /* Adjust font size for smaller screens */
    }
    .btn-user {
        padding: 8px 15px; /* Adjust padding for smaller buttons */
    }
    .text-lg {
            font-size: 24px;
        }
}

@media (max-width: 575px) {
    /* Extra small screens (e.g., smaller mobile devices) */
    .btn-text {
        font-size: 15px; /* Further reduce font size for extra small screens */
    }
    .btn-user {
        padding: 6px 10px; /* Adjust padding for extra small buttons */
    }
}
.carousel-inner {
        border-radius: 4px;
    }
.carousel-inner img {
        border-radius: 4px;
    }

    /* Media query for larger screens */
    @media (min-width: 769px) {
        .text-lg {
            font-size: 32px;
        }
    }
    
.text-green {
    color: green !important;
}

.text-red {
    color: red !important;
}

.text-blue {
    color: blue !important;
}

.text-orange {
    color: orange !important;
}

.text-purple {
    color: purple !important;
}

.text-pink {
    color: pink !important;
}

.text-yellow {
    color: yellow !important;
}

.text-cyan {
    color: cyan !important;
}

.text-teal {
    color: teal !important;
}

.text-brown {
    color: brown !important;
}
/* Add custom CSS for highlighting */
.custom-highlight {
    background-color: #001f3f; /* Background color for highlighting */
    border-radius: 10px; /* Adjust the border radius as needed */
    /* Other styles for your highlighted section */
}

.shadow-lg {
  --tw-shadow: 0 10px 12px -1px rgba(0, 0, 0, 1), 0 6px 8px -2px rgba(0, 0, 0, 1);
  --tw-shadow-colored: 0 10px 12px -1px var(--tw-shadow-color), 0 6px 8px -2px var(--tw-shadow-color);
  box-shadow:
    0 0 var(--tw-shadow), /* Bottom shadow */
    0 0 var(--tw-shadow), /* Top shadow */
    var(--tw-shadow), 0 0 var(--tw-shadow), /* Left shadow */
    var(--tw-shadow); /* Right shadow */
}

.shadow-rounded{--tw-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}
.screenshot img {
    width: 100%; /* Makes the image fill the container's width */
    height: auto; /* Maintains the aspect ratio */
    max-width: 100%; /* Ensures the image does not exceed container width */
    display: block; /* Removes extra space below images */
}


@media (min-width: 768px) {
    .screenshot img {
        max-width: 50%; /* Limits the image size for tablets and desktops */
    }
}