/* HOME PAGE ONLY */
/* Header Section */
.homeHeader {
  position: relative;
  display: inline-block;
  max-height: 85vh;
  font-size: clamp(1rem, 2vw, 2.5rem);
  font-weight: 700;
  text-align: center;
  overflow: hidden;
  margin-top: var(--navbar-height, 15vh); /* Use dynamic navbar height */
}

.logo-image {
    max-width: 23vw; /* Maximum width for the logo */
    padding-bottom: 3vw;
}

/* About Us Section */
.aboutUsContainer {
    display: flex;
    height: fit-content;
    padding-top: 4vw;
    padding-bottom: 4vw;
    background: black;
    background-size: cover;
    color: white;
}



.aboutUsLeftSection, .aboutUsRightSection {
    padding: 2vw;
    height: 40vh;
    align-content: center;
}

.aboutUsLeftSection {
    width: 65vw;
    font-size: var(--textContent);
    line-height: var(--lineHeight);
    padding-left: 8vw;
    height: fit-content;
}

.aboutUsLeftSection h1 {
    font-size: var(--textHeader)
}

.aboutUsRightSection {
    width: 35vw;
    font-size: var(--textContent);
    color: var(--black);
}



/* Main Options */
.mainOptionContainer {
    background: black;
    color: white;
    justify-content: center;
    overflow: hidden;
    height: fit-content;
    width: 100vw;
    padding: 0 3vw 0 3vw;
}

.mainOptionContainer h3{
    margin-top: 6vh;
    font-size: var(--textHeader);
}

.mainOptionContainer p{
  font-size: var(--textContent);
  line-height: var(--lineHeight);
}

.mainOptionContainerExtras {
  background: var(--black);
  justify-content: center;
  overflow: hidden;
  height: fit-content;
  width: 100vw;
  padding: 0 3vw 0 3vw;
}

.mainOptionContainerExtras h3{
  margin-top: 6vh;

}

.mainOptionContainerExtras h3 {
  font-size: var(--textHeader);
}

.priceMainOption{
    color: var(--white);
    font-size: var(--textContent);
    padding-bottom: 1vw;
}



/* Carousel */
#cCarousel, #cCarousel2 {
    position: relative;
    max-width: 95vw;
    margin: auto;
    width: 85vw;
    justify-content: center;
  }
  
  /* Default for non-touch devices */
  .arrow, #cCarousel2 .arrow {
    position: absolute;
    top: 50%;
    display: flex;
    width: 4vw;
    height: 4vw;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    z-index: 1;
    font-size: (1rem, 2vw, 2rem);
    color: white;
    background: var(--purpleMain);
    cursor: pointer;
  }


  
  #cCarousel #prev, #cCarousel2 #prev2 {
    left: 0px;
  }
  
  #cCarousel #next, #cCarousel2 #next2 {
    right: 0px;
  }

  #carousel-vp, #carousel-vp2 {
    width: 60vw;
    height: 50vh;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: auto;
    margin-bottom: 6vw;
  }
  
  #cCarousel #cCarousel-inner, #cCarousel2 #cCarousel-inner2 {
    display: flex;
    position: absolute;
    transition: 0.3s ease-in-out;
    left: 0px;
    width: fit-content;
    gap: 3vw
  }
  
  .cCarousel-item, .cCarousel-item2{
    background: linear-gradient(71deg, var(--black), var(--purpleMain), var(--black));
    color: var(--black);
    position: relative;
    border-style:outset;
    border-color: var(--black);
    box-shadow: 1px 1px 4px rgb(193, 191, 191);
    transition: transform 0.3s ease, background-color 0.3s ease;
    overflow: hidden;
    width: 25vw;
    height: 35vw;
    max-height: 45vh;
    min-height: 30vh;
    padding: 2vw 1vw;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents tiling */
  
  }

.cCarousel-item::before, .cCarousel-item2::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit; /* Use the same background image */
    background-size: cover; /* Ensure it scales properly */
    background-position: center; /* Keep it centered */
    filter: brightness(50%); /* Darkened overlay */
    transition: filter 0.3s ease-in-out, opacity 0.3s ease-in-out;
    opacity: 0.6;
    z-index: 1;
}

.cCarousel-item:hover::before, .cCarousel-item2:hover::before {
    filter: brightness(80%); /* Make image more visible on hover */
    opacity: 1;
}

.cCarousel-item:hover, .cCarousel-item2:hover {
    transform: scale(1.05);
}
  

  .cCarousel-item .infos h3, .cCarousel-item2 .infos h3{
    margin-top: 0;
    color: var(--white);
  }
  


  /* Card Text */
  .cCarousel-item .infos, .cCarousel-item2 .infos {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    position: relative;
    z-index: 2;
    text-align: center;
    font-size: var(--textContent);
    font-weight: 400;
    text-shadow: 1px 1px 12px rgba(0, 0, 0, 1);
}

.cCarousel-item .infos{
  color: var(--black);
}
.cCarousel-item2 .infos{
  color: var(--white);
}
  


  /* Carousel: Override for touch-enabled devices */
  .touch-device #cCarousel .arrow, .touch-device #cCarousel2 .arrow {
    display: none; /* Hide the arrows on touch devices */
  }
  
  .touch-device #carousel-vp, .touch-device #carousel-vp2 {
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-snap-type: x mandatory; /* Ensure smooth snapping to items */
    -webkit-overflow-scrolling: touch; /* Enable momentum scrolling for iOS */
  }
/* Enable scrolling on touch devices */
.touch-device #carousel-vp, 
.touch-device #carousel-vp2 {
  overflow-x: auto; /* Enable horizontal scrolling */
  scroll-snap-type: x mandatory; /* Ensure smooth snapping */
  -webkit-overflow-scrolling: touch; /* Enable momentum scrolling for iOS */
}

.touch-device #cCarousel #cCarousel-inner, 
.touch-device #cCarousel2 #cCarousel-inner2 {
  display: flex; /* Flex layout for children */
  gap: 3vw; /* Add spacing between items */
  width: max-content; /* Ensure the container is wide enough for scrolling */
  position: relative; /* Reset positioning if necessary */
}

.touch-device .cCarousel-item {
  scroll-snap-align: center; /* Ensure items snap to the center */
}

.touch-device .cCarousel-item2 {
  scroll-snap-align: center; /* Ensure items snap to the center */
}


/* Package Options */
.containerPackageOptions {
    background-color: var(--black);
    width: 100vw;
    height: fit-content;
}

.containerPackageOptions h3 {
  font-size: var(--textHeader);
    padding-top: 8vw;
}