/* ==========================================================================
*
* Custom CSS Stylesheet. This is where you should add your own styles!
*
** ========================================================================== */

/* Simple style overrides or custom adds */

.carousel-item {
    transition: transform 1.2s ease-in-out; /* Pro klasický slide */
}

.carousel-fade .carousel-item {
    transition-property: opacity;
    transition-duration: 0.8s; 
}

/* Styl pro kontejner lišty */
.carousel-progress-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background-color: #ffc107; /* Žlutá barva nebo vaše firemní */
    width: 0;
    z-index: 20;
}

/* Animace lišty, když je snímek aktivní */
/* čas v sec stejný jako data-bs-interval */
.carousel-item.active ~ .carousel-progress-bar {
    animation: progress-animation 4s linear infinite;
}

@keyframes progress-animation {
    0% { width: 0%; }
    100% { width: 100%; }
}

/*.carousel-progress-bar {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 5px;
	background: #007bff; 
	z-index: 10;
	width: 0;
}*/

/* Spuštění animace při přepnutí */
.active.carousel-item ~ .carousel-progress-bar {
	animation: fillProgress 4s linear infinite;
}

@keyframes fillProgress {
	from { width: 0; }
	to { width: 100%; }
}

/* ==========================================================================
** Responsive styles custom rules
* These rules are ready to be used for either overrides
* or just your own custom rules.
========================================================================== */
@media (min-width: 992px) { 
    
}


/** Higher screens+ **/
@media only screen and (min-width : 1921px){

}


/** Desktop+ **/
@media (min-width: 1200px) {

}


/** Laptop **/
@media (max-width: 1200px) {

}


/** Laptop+ **/
@media (min-width: 991px) {

}


/** Laptop **/
@media (min-width: 992px) and (max-width: 1199px) {

}


/** Large Tablets **/
@media (max-width: 992px) {

}


/** Tablets (landscape mode)  **/
@media (min-width: 768px) and (max-width: 991px) {

}


/** Tablets+  **/
@media (min-width: 768px) {

}


/** Tablets (portrait mode)  **/
@media (min-width : 481px) and (max-width : 768px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 767px) {

}


/** Smartphone landscape mode / Mini Tablet **/
@media (max-width: 600px) {

}


/** Smartphone portrait mode **/
@media (max-width: 480px) {

    
}

/** Normal phone portrait mode+ **/
@media (min-width: 320px) {
	
}