/*=================================================================================*/
/*    Carousel include DIV 4-5    START OF CAROUSEL STYLESHEET                     */
/*=================================================================================*/

/* Featured Carousel container 4 Div Opened */
.featured-carousel {
    width: 100%; 						/* Carousel takes full width */
    margin-bottom: 0.625rem; 					/* Adds margin to the bottom of the carousel */
    background: #ffffff; 					/* Sets the background color to white */
    border-radius: 8px; 					/* Rounds the corners of the carousel */
    overflow: hidden; 						/* Hides anything outside the carousel container */
}

/* Carousel container for position handling 5 Div Opened */
.carousel-container {
    position: relative; 					/* Ensures proper positioning for child elements */
    overflow: hidden; 						/* Hides any content that overflows the container */
}


/*=================================================================================*/
/*     Carousel include DIV 6-7     SLOWER SPEED BY ADDING MORE SECONDS BELOW	   */
/*=================================================================================*/

/* Carousel items container with animation 6 Div Opened */
.carousel-items {
    display: flex; 				/* Aligns carousel items in a row */
    width: 800%; 				/* Ensures enough space for multiple items */
    animation: slideshow 36s infinite; 		/* Animates the carousel items continuously */
}

/* Individual carousel item styles 7 Div Opened */
.carousel-item {
    width: 12.5%; 				/* Each item takes up 12.5% of the carousel's width */
    flex-shrink: 0; 				/* Prevents items from shrinking */
    position: relative; 			/* Allows positioning of child elements */
}




/*=================================================================================*/
/*                  BUTTONS PREV NEXT OF CAROUSEL 3 CLOSEST BELOW                   */
/*=================================================================================*/

/* Controls for carousel (prev and next buttons) */
.carousel-controls {
    position: absolute; 					/* Positions the controls absolutely within the carousel */
    bottom: 1rem; 						/* Positions controls 1rem from the bottom */
    right: 1rem; 						/* Positions controls 1rem from the right */
    gap: 0.5rem; 						/* Adds gap between control buttons */
    z-index: 2; 						/* Ensures controls are above other content */
    display: none; 						/* Flex Displays the control buttons in a row */
}

/* Previous and Next buttons */
.prev-btn,
.next-btn {
    background: rgba(0,0,0,0.5); 				/* Adds a semi-transparent background */
    color: ffffff; 						/* Sets text color to white */
    border: none; 						/* Removes border */
    padding: 1rem 1rem; 					/* Adds padding to the buttons */
    cursor: pointer; 						/* Changes cursor to a pointer on hover */
    border-radius: 4px; 					/* Rounds the corners of the buttons */
    font-weight: bold; 						/* Make arrows bold */ 
    display: none; 						/* Remove this line to show buttons */

}

/* Adjust size of the arrows inside the buttons */
.prev-btn:before,
.next-btn:before {
    font-size: 2rem; 					/* Increases the size of the arrows */
    font-weight: bold; 						/* Make arrows bold */ 
    display: none; 						/* Remove this line to show arrows */


}



/*=================================================================================*/
/*          		   Carousel include DIV 7-8 			           */
/*=================================================================================*/


/* 7 Div Styles for carousel item images ad where the maxresdefault images of the videos are shown */
.carousel-item img {
    width: 100%; 						/* Ensures images fill the container */
    height: auto; 						/* Maintains aspect ratio of images */
    max-height: 500px; 						/* Limits the height of images */
    object-fit: cover; 						/* Ensures images cover the area without stretching */
}

/* 8 Div Opened Carousel content (title and description) styling but why not category? */
.carousel-content {
    position: absolute; 					/* Positions content absolutely within the carousel */
    bottom: 0; 							/* Aligns content to the bottom */
    left: 0; 							/* Aligns content to the left */
    right: 0; 							/* Aligns content to the right */
    padding: 2rem; 						/* Adds padding around the content */
    background: linear-gradient(transparent, rgba(0,0,0,0.8)); 	/* Adds a gradient background */
    font-size: 19px; 						/* Reduces font size */
    font-weight: 650;          					/* Sets a semi-bold weight for the link */
    color: FFFFFF; 						/* Sets text color to white */
}


/*=================================================================================*/
/*         Adjust size of video title++ in carousel on desktop here below          */
/*=================================================================================*/

.carousel-content h2 {
    font-size: 1.6rem; 						/* Adjust size of the video title */
    margin-bottom: 0.5rem; 					/* Adds margin to the bottom of the title */
}


 /* tried to get this to work for VIDEO and PERSON/UPLOADER on desktop but it refuses */

/* Category text styling */
.carousel-video-category {
    line-height: 14px; 					/* Adjusts line height */
    font-size: 19px; 					/* Reduces font size */
    font-weight: 650;          				/* Sets a semi-bold weight for the link */

    color: #FFFFFF;
}


/*=================================================================================*/
/*           Adjust size of video title in carousel on mobile here below           */
/*=================================================================================*/

@media screen and (max-width: 768px) {
    .carousel-content h2 {
    font-size: 1.2rem; 						/* Adjusts size of video title for mobile */
    align-items: flex-end; 					/* Vertically aligns items   */
    margin-bottom: 0.2rem; 					/* Adds margin to the bottom of the title */


    }
}


/*=================================================================================*/
/*     Adjust size of video uploader name in carousel on mobile here below         */
/*=================================================================================*/

@media screen and (max-width: 768px) {
    .carousel-content {
    font-size: 11px; 					/* Adjusts uploader name size for mobile */
    align-items: flex-end; 					/* Vertically aligns items   */
    margin-bottom: 0.1rem; 					/* Adds margin to the bottom of the text */
    padding-bottom: 0;                  			/* Ensures there's no padding */

    }
}






/* Continuous loop animation for the carousel */
@keyframes slideshow {
    0% { transform: translateX(0); }
    11% { transform: translateX(0); }
    12.5% { transform: translateX(-12.5%); }
    23.5% { transform: translateX(-12.5%); }
    25% { transform: translateX(-25%); }
    36% { transform: translateX(-25%); }
    37.5% { transform: translateX(-37.5%); }
    48.5% { transform: translateX(-37.5%); }
    50% { transform: translateX(-50%); }
    61% { transform: translateX(-50%); }
    62.5% { transform: translateX(-62.5%); }
    73.5% { transform: translateX(-62.5%); }
    75% { transform: translateX(-75%); }
    86% { transform: translateX(-75%); }
    87.5% { transform: translateX(-87.5%); }
    98.5% { transform: translateX(-87.5%); }
    100% { transform: translateX(-100%); } /* Make it continuous */
}

/*=================================================================================*/
/*This is the function that makes back and forward buttons work go back and forward*/
/*=================================================================================*/
@media screen and (max-width: 768px) {
    .carousel-controls .prev-btn, 
    .carousel-controls .next-btn {
        padding: 0.01rem 0.01rem;   /* Increases button size for better touch interaction    used to be     padding: 0.75rem 1.5rem; but making small to see if decresases space unde text */
    }

/*=================================================================================*/
/* This is the width setting where carousel width is limited or expanded on mobile */ 
/*=================================================================================*/

    .carousel-container {
    	width: 100%; 						/* D testing if carousel takes full width on mobile */
        margin-right: 0%; 					/* Fixes right margin issue on mobile */
    }

    .featured-carousel {
        width: 100%; 						/* Makes carousel wider on mobile */
    }

}

 /* 100% confirmed as S9 carousel-video-category VIDEO and PERSON/UPLOADER on mobile below here for color but maybe not size */

/* Category text styling */
.carousel-video-category {
    font-size: 12px; 					/* Reduces font size */
    line-height: 14px; 					/* Adjusts line height */
    font-weight: 490;          				/* Sets a semi-bold weight for the link */
    color: #FFFFFF;
}


/*=================================================================================*/
/*                           END OF CAROUSEL STYLESHEET                            */
/*=================================================================================*/