/*franchise banner*/

.image-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 50%;
}
.franchise-background {
    position: relative;
    top: 10px;
    left: 0;
    width: 100%;
    height: auto;
    object-fit: cover;
}


.gradient-overlay {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: auto;
background: linear-gradient(to top, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
z-index: 1; /* add a higher z-index value */
}

/*franchise banner*/

.title-caption {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: center;
align-items: center;
padding-top: 15vw;
opacity: 100%;

}

.titleName-r {
text-align: center;
font-size: 10vw;
color: #dd212c;
text-shadow: 0 0 12px #dd212c;
}

.titleName-b {
text-align: center;
font-size: 10vw;
color: #ecfefe;
text-shadow: 0 0 12px #ecfefe;
}

.titleName-w {
text-align: center;
font-size: 10vw;
color: #dd212c;
text-shadow: 0 0 12px #dd212c;
}




/*3D slider*/

.swiper-img {
position: relative;
transition: all 0.3s ease;
transform-style: preserve-3d;
transform-origin: center center;
}

.swiper-img:not(.swiper-slide-active) img {
  filter:blur(8px) brightness(50%);
transform: scale(0.8);
  z-index: 1;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  transform-origin: center center;
pointer-events: none;
}

.swiper-img:not(.swiper-slide-active) .text-container {
filter:blur(8px) brightness(50%);
transform: scale(0.9);
  z-index: 1;
  transition: all 0.3s ease;
  transform-style: preserve-3d;
  transform-origin: center center;
pointer-events: none;
margin-left: -30px;
margin-right: 10px;
}

.swiper-img.swiper-slide-prev img {
transform: scale(0.9) translateX() rotateY(20deg);
z-index: 0;
transition: all 0.3s ease;
}

.swiper-img.swiper-slide-active img {
filter: none;
transform: scale(1.0);
z-index: 0;
box-shadow: 0 0 7px #dd212c;
border-color:#dd212c;
border-width: 2px;
transition: all 0.3s ease;
}


.swiper-img.swiper-slide-next img {
transform: scale(0.9) translateX() rotateY(-20deg);
z-index: 0;
transition: all 0.3s ease;
}

.swiper-img img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
transition: all 0.3s ease;
}
.slider-container{
background-image: url("../images/Tiles/Franchise/frbanner.jpg");
background-size: 100% auto;
background-position: center;
margin-top: 4vw;

}

.fr-slide{
margin-top: 100px;
}
.fr-image {
width: 100%;
border-radius: 0.5vw;
position: relative;
overflow: hidden;
box-shadow: none;
border: solid transparent 2px;
transition: all 0.3s ease-in-out;
}

/**/

.image-with-text {
display: flex;
align-items: center;
}

.text-container {
  margin-left: 20px;
color: white;

}

.text-container h1 {
font-size: 2vw; /* adjust as needed */
margin-bottom: 10px;
}

.text-container p {
font-size: 1vw; /* adjust as needed */
}

