/* Styling for PREPPING TESLAS FOR TINTING Video section */
h4.section-title {
    color: #516B6B;
    font-size: calc(1.125em + 1vw);
    text-align: center;
}
@media only screen and (min-width: 1440px) {
    h4.section-title {
        font-size: 2.25em; /* or whatever max size you want */
    }
}

.carousel-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
    background-image: url('/assets/img/perspective.png') !important;
    background-size: 100% 100% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.carousel-container {
    position: relative;
    width: 80%;
    height: 0;
    padding-bottom: 45%;
}

.video-column {
    position: absolute;
    width: 20%;
    height: 100%;
    top: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

#left-video {
    left: 0;
    transform: scale(0.7) translateX(-20%) perspective(1000px) rotateY(30deg);
    z-index: 1;
}

#center-video {
    left: 30%;
    width: 40%;
    z-index: 2;
}

#right-video {
    right: 0;
    transform: scale(0.7) translateX(20%) perspective(1000px) rotateY(-30deg);
    z-index: 1;
}

.active-video,
.side-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid #AAAABB;
    border-radius: 10px;
    box-shadow: 1px 1px 3px 0 rgba(119, 119, 119, 0.75);
}

.buttons-container {
    position: absolute;
    width: 100%;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    z-index: 3; /* Higher z-index to render above the videos */
}

/* Media query for smaller screens */
@media (max-width: 768px) {
    .buttons-container {
        padding: 0 5%;
    }
}

.carousel-button {
    width: 50px; /* Adjust the size as needed */
    height: 50px;
    padding: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex; /* Centers the arrow icon */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    border: 1px solid #AAAABB;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(119, 119, 119, 0.5);
    position: relative; /* Needed for the absolute positioning of the arrow */
}

.carousel-button-left::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 20px solid black; /* Left Arrow */
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

.carousel-button-right::before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 20px solid black; /* Right Arrow */
    transform: translate(-50%, -50%);
    left: 50%;
    top: 50%;
}

/* Flexbox Layout for Product Specs + Video */
/* https://www.w3schools.com/css/css3_flexbox_responsive.asp */
/* NOTE: The following CSS section applies only to pricing page for model X */

.vid-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.vid-border {
    padding: 3.3%;
    border: 2px solid #AAA;
    border-radius: 10px;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1),
                0px 3px 6px 0px rgba(0, 0, 0, 0.08);
}
/* This media query will apply for screens with a max-width of 810px */
@media (max-width: 810px) {
    .vid-border {
      border-radius: 10px; /* Reduce the border-radius for smaller screens */
    }
}
/* This media query will apply for screens with a max-width of 428px */
@media (max-width: 428px) {
    .vid-border {
      border-radius: 10px; /* Reduce the border-radius even further for very small screens */
    }
}

video {
    max-width: 100%;
    height: auto;
}
@media screen and (min-width: 600px) {
video {
    max-width: 100%;
    height: auto;
    }
}
@media screen and (max-width: 600px) {
video {
    max-width: 100%;
    height: auto;
    }
}

* {
    box-sizing: border-box;
}
.info-panel {
    display: flex;
    flex-direction: row;
    text-align: center;
}
.flex-item-left {
    padding: 10px; /* was: 0px */
    flex: 50%;
  }
.flex-item-right {
    padding: 10px; /* was: 0px */
    flex: 50%;
}
/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 972px) {
    .flex-container {
      flex-direction: column;
    }
}
.imgwrap img {
    display: block;
    width: 100%;
    max-width: 972px; /* actual image width */
    height: auto; /* maintain aspect ratio */
    margin: auto; /* optional centering of image */
    padding: 2.43%;
    border: 2px solid #AAA;
    border-radius: 10px; /* Smaller border-radius for smaller screens */
}
@media only screen and (min-width: 600px) {
    .img-wrap img {
      border-radius: 20px; /* Larger border-radius for larger screens */
    }
}