@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Monda:wght@400..700&family=Roboto:ital,wght@0,100..900;1,100..900&family=Zen+Kaku+Gothic+Antique&display=swap');



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

a:link{
   color:#CBD5E1;

}

a:hover
{
color:#D4AF37;
}

a:visited
{
   color:#CBD5E1;
}

body 
{
   background-color: #1F2B3C;
  font-family:"Monda", sans-serif ;
  color: #fff;

}


.container 
{
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


.slogan-text
{
 text-align: center;
 color:whitesmoke
}

.trailer
{
 display: flex;
  justify-content: center; /* Centers horizontally */
  align-items: center; /* Centers vertically */
  margin-top:20em;
}

.logo
{
  display:block;
 width: 85%;
aspect-ratio: 285 / 70;
background-size: contain;
margin:auto;
}

section
{
   margin: 60px 0;
}

h2
{
   font-size: 2.5em;
   margin-bottom: 30px;
   color: #D4AF37;
   text-align: center;
   text-transform: uppercase;
   letter-spacing: 2px;
}

h3
{
margin:5%;
font-size: 2.25em;
padding-bottom: 1em;
}


.reviews {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 10em;
}

.review {
    background: transparent;
    height: 300px;
    perspective: 1000px;
    cursor: pointer;
}

.review-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    transform: rotateY(180deg);
}

.review.flipped .review-inner {
    transform: rotateY(0deg);
}

.review-front,
.review-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.review-front {
    background: rgba(163, 159, 255, 0.05);
    border-left: 4px solid #D4AF37;
}

.review-front p {
    font-style: italic;
    color: #CBD5E1;
    margin: 0;
}

.review-back {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.15), rgba(163, 159, 255, 0.1));
    border: 2px solid #D4AF37;
    transform: rotateY(180deg);
    flex-direction: column;
    text-align: center;
}

.review-back h3
{
    color: #D4AF37;
    font-size: 1.8em;
    margin: 0 0 20px 0;
    padding: 0;
}

.review-back p
{
    color: #CBD5E1;
    font-size: 1.1em;
    line-height: 1.6;
}

/* Hover effect hint */
.review:hover .review-inner
{
    transform: rotateY(180deg) scale(1.02);
}

.review.flipped:hover .review-inner
{
    transform: rotateY(0deg) scale(1.02);
}



.cast
{
   margin: 60px 0;
}

.cast-member-right
{
   display: flex;
   gap: 30px;
   background: rgba(163, 159, 255, 0.05);
   padding: 30px;
   border-radius: 10px;
   margin-bottom: 30px;
   align-items: flex-start;
    border-left: 4px solid #D4AF37;
}

.cast-member-left
{
   flex-direction: row-reverse;
    display: flex;
   gap: 30px;
   background: rgba(163, 159, 255, 0.05);
   padding: 30px;
   border-radius: 10px;
   margin-bottom: 30px;
   align-items: flex-start;
    border-right: 4px solid #D4AF37;
}

.cast-image
{
   flex-shrink: 0;
   width: 200px;
}

.cast-image img 
{
   width: 100%;
   height: auto;
   border-radius: 8px;
   border: 2px solid #1F2B3C;
}

.cast-content
{
   flex: 1;
}

.cast-content h3
{
   font-size: 1.8em;
   color: #D4AF37;
   margin-bottom: 5px;
   margin-left: auto;
}


.cast-content h4
{
   font-size: 1.2em;
   color: #94A3B8;
   margin-bottom: 15px;
   font-weight: normal;
}

<script>
        document.addEventListener('DOMContentLoaded', function() {
    const reviews = document.querySelectorAll('.review');
    
    reviews.forEach(review => {
        review.addEventListener('click', function() {
            this.classList.toggle('flipped');
        });
    });
});
   // Cast image toggle functionality
document.addEventListener('DOMContentLoaded', function() {
    // Define multiple images for each cast member
    const castImages = {
        'mav': [
            '/src/images/mav.png',
            '/src/images/mav2.jpg',
            
        ],
        'goose': [
            '/src/images/goose.png',
            '/src/images/goose2.jpeg',
        
        ],
        'charlie': [
            '/src/images/charlie.png',
            '/src/images/charlie2.jpeg',
        
        ],
        'iceman': [
            '/src/images/iceman.png',
            '/src/images/iceman2.jpg',
            
        ],
        'viper': [
            '/src/images/viper.png',
            '/src/images/viper2.webp',
           
        ],
        'stinger': [
            '/src/images/stinger.jpg',
            '/src/images/stinger2.jpeg',
            
        ]
    };

    // Track current index for each character
    const currentIndex = {
        'mav': 0,
        'goose': 0,
        'charlie': 0,
        'iceman': 0,
        'viper': 0,
        'stinger': 0
    };

    // Get all cast images
    const castImageElements = document.querySelectorAll('.cast-image img');

    castImageElements.forEach(img => {
        // Determine which character this image belongs to
        let character = null;
        if (img.src.includes('mav')) character = 'mav';
        else if (img.src.includes('goose')) character = 'goose';
        else if (img.src.includes('charlie')) character = 'charlie';
        else if (img.src.includes('iceman')) character = 'iceman';
        else if (img.src.includes('viper')) character = 'viper';
        else if (img.src.includes('stinger')) character = 'stinger';

        if (character && castImages[character]) {
            // Add click event listener
            img.addEventListener('click', function() {
                // Increment index and wrap around
                currentIndex[character] = (currentIndex[character] + 1) % castImages[character].length;
                
                // Update image source with smooth transition
                img.style.opacity = '0.5';
                
                setTimeout(() => {
                    img.src = castImages[character][currentIndex[character]];
                    img.style.opacity = '1';
                }, 200);
            });

            // Add cursor pointer to indicate it's clickable
            img.style.cursor = 'pointer';
            img.style.transition = 'opacity 0.3s ease';
        }
    });
});
   
   </script>




.cast-content p
{
   color: #CBD5E1;
   line-height: 1.8;
}




.summary, .about
{

   background: rgba(163, 159, 255, 0.05);;
   padding: 40px;
   border-radius: 10px;
   max-width: 900px;
   margin: 60px auto;
   margin-bottom: 10em;
   margin-top:10em;
}


.summary p, .about p
{
   font-size: 1.1em;
   color: #CBD5E1;
   line-height: 1.8;
}

.f14
{
   display:block;
   margin:auto;
width: 100%;
   height: auto;
   padding-bottom:5%;
}



.where-to-watch
{
   text-align: center;
   margin: 60px 0;
   padding-bottom: 10%;
}


.where-to-watch ul
{
   list-style: none;
   display: flex;
   justify-content: center;
   gap: 40px;
   flex-wrap: wrap;
   margin-top: 30px;
}


.where-to-watch li
{
   background: rgba(163, 159, 255, 0.05);;
   padding: 30px 50px;
   border-radius: 10px;
   border: 2px solid #D4AF37;
   font-size: 1.3em;
   font-weight: bold;
}