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

html, body {
    height: 100%; /* Ensure body takes up full height */
    font-family: Arial, sans-serif;
}

body {
    display: flex;
    flex-direction: column; /* Makes the footer stick at the bottom */
    min-height: 100vh; /* Ensures the footer behaves correctly */
}

/* Header */
header {
    width: 100%;
    background-color: #444;
    padding: 10px;
    color: white;
    text-align: center;
}

/* Footer Styles */
.w3l-footer {
    background-color: #333;
    color: white !important;
    padding: 10px;
    width: 100%; /* Ensure it stretches full width */
    text-align: center;
    margin-top: auto; /* Pushes footer to the bottom */
}

.copyright-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    flex-wrap: wrap; /* Adjust on small screens */
}

.social a {
    margin-left: 10px;
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}

/* Film Section Styling */
.film-section {
    max-width: 90%;
    /* margin: 20px auto;
    padding: 10px; */
    text-align: center; /* Centers text and elements */
    background-color: inherit; /* Ensures it takes the parent's background */
    color: inherit; /* Optional: Ensure text color is inherited */
}


.films-test h1, h2, h3, h4, p{
    color: #ffffff; /* Default text color */
    margin: 3px 0;
}

.content-wrapper {
    display: flex;
    align-items: center; /* Align items vertically */
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap; /* Adjust on small screens */
}

.film-image {
    max-width: 100%; /* Keeps it proportionate */
    height: auto;
    max-height: 300px;
    flex: 1;
}

.text-content {
    flex: 2; /* Text takes up more space */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center elements vertically */
    text-align: center; /* Center text */
}

/* Theme-Sensitive Text Color */
.theme-color {
    transition: color 0.3s ease; /* Smooth transition for color changes */
    color:black;
}

/* For dark mode */
body.dark-mode {
    background-color: #121212;
    color: #ffffff;
}

/* For light mode */
body.light-mode {
    background-color: #ffffff;
    color: #333333;
}

/* Light Mode Styles */
.light-mode .theme-color {
    color: #333; /* Light mode text color */
}

/* Dark Mode Styles */
.dark-mode .theme-color {
    color: #ffffff; /* Dark mode text color */
}


/* Default styles */
.green-text {
    color: #5bbb47 !important;
    font-weight: bold;
    font-size: 18px; /* Default font size */
    letter-spacing: 5px; /* Default letter spacing */
    text-transform: uppercase;
}

.theme-color {
    color: #333; /* Theme color */
    font-size: 18px; /* Default font size */
    font-style: italic; /* Italic style */
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .video-container {
        max-width: 90%;
        justify-content: center;
        text-align: center;
    }
    .green-text {
        font-size: 16px; /* Slightly smaller font size on tablets and smaller screens */
        letter-spacing: 3px; /* Reduce letter spacing */
    }

    .theme-color {
        font-size: 14px; /* Smaller font size */
    }

    .film-section {
        max-width: 100%;
    }
}

/* Responsive adjustments for mobile screens */
@media (max-width: 480px) {
    .green-text {
        font-size: 14px; /* Further decrease font size on mobile */
        letter-spacing: 2px; /* Reduce letter spacing further */
    }

    .theme-color {
        font-size: 12px; /* Even smaller font size for mobile */
    }
}


.description {
    font-size: 1em;
    margin-bottom: 10px;
    text-align:start;
}

.cast-info {
    margin-bottom: 20px;
}

/* Centering container for description and cast info */
.centered-container {
    margin: 20px 0; /* Adjust margin to fit your design */
}

/* Video Player Styles */
.video-container {
    margin: 40px 0;
    max-width: 70%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Adjusting the video-info section */
.video-info {
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
}

/* Ensure proper spacing between titles */
.video-info h3 {
    margin: 10px 0 15px 0; /* Adds bottom space for preview */
    font-size: 2em;
}

/* Subtitle styling */
.video-info h4 {
    margin-top: 15px;
    font-size: 1.5em;
    font-weight: normal;
}

/* Adjust video preview for spacing */
.video-preview {
    margin: 0 auto; /* Center the video preview */
    margin-top: 20px;
    position: relative;
    display: inline-block;
    cursor: pointer;
    max-width: 600px;
    border-radius: 8px;
    overflow: hidden;
}

.preview-image {
    width: 100%;
    border-radius: 8px;
}

/* Play button inside the preview */
.play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2em;
    color: white;
    pointer-events: auto; /* Enable click events */
}

/* Responsive font sizes and layouts */
@media (max-width: 768px) {
    .video-info h3 {
        font-size: 1.6em; /* Slightly smaller title */
    }

    .video-info h4 {
        font-size: 1.2em; /* Adjust subtitle */
    }

    .video-preview {
        max-width: 100%; /* Full width on smaller screens */
    }
}

@media (max-width: 480px) {
    .video-info {
        padding: 15px; /* Adjust padding for small screens */
    }

    .video-info h3 {
        font-size: 1.4em; /* Reduce title size further */
    }

    .video-info h4 {
        font-size: 1em; /* Smaller subtitle */
    }

    .video-preview {
        margin-top: 15px;
    }
}

/* Modal Styles */
.modal-hidden {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    /* background-color: #fff; */
    padding: 20px;
    /* border-radius: 8px; */
    position: relative;
    width: 85%; /* Set width to 85% */
    max-width: 800px; /* Optional max width */
    margin: auto; /* Center the modal */
}

.close-modal {
    position: absolute;
    top: 10px;
    right: 25px;
    cursor: pointer;
    font-size: 2.5em; /* Size of the close button */
    color: #333333; /* Color of the close button */
    z-index: 1001; /* Ensure it appears above the video */
}

.video-iframe {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9; /* Keeps video proportionate */
    border: none;
}



/* Carousel Styling */
.carousel {
    position: relative;
    max-width: 70%;
    overflow: hidden;
    margin-top: 20px;
    margin-left:auto;
    margin-right:auto;
}

.carousel-images {
    display: flex;
    transition: transform 0.5s ease;
}

.carousel-images img {
    max-width: 100%;
    object-fit: cover; /* Prevents distortion */
    flex: 0 0 100%; /* Images take up full width */
}

/* Carousel Controls */
button {
    position: absolute;
    top: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    border: none;
    cursor: pointer;
    padding: 10px;
    transform: translateY(-50%);
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

/* Responsive Styles */
@media (max-width: 600px) {
    .content-wrapper {
        flex-direction: column; /* Stacks elements */
    }

    .film-image {
        max-width: 100%; /* Full-width on small screens */
    }

    .video-iframe {
        height: 250px; /* Smaller height for video */
    }

    button {
        padding: 6px;
        font-size: 0.8em;
    }
    .carousel {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        margin-top: 20px;
        margin-left:auto;
        margin-right:auto;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.3em;
    }

    h2 {
        font-size: 1.2em;
    }

    .description {
        font-size: 0.9em;
    }
    .carousel {
        position: relative;
        max-width: 100%;
        overflow: hidden;
        margin-top: 20px;
        margin-left:auto;
        margin-right:auto;
    }
}

/* 2x2 Grid Layout (default, large screens) */
.unique-grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 items per row */
    gap: 20px; /* Adds spacing between grid items */
    justify-items: center; /* Center items horizontally */
    align-items: center; /* Align items vertically */
    width: 100%;
    max-width: 100%;
}

/* Grid Item Styling */
.grid-item {
    width: 100%;
}

/* Image container and styling */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    overflow: hidden;
}

.grid-image {
    width: 80%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

/* Text container styling */
.text-container {
    text-align: center;
    font-size: 1.2rem;
    padding: 10px;
}

/* List styling */
.text-container ul {
    list-style-type: circle;
    padding-left: 20px;
}


/* Dark Mode Styling */
.theme-wrapper.dark-mode .unique-grid-item.text {
  color: #ffffff !important; /* Light text on dark background */
}

.theme-wrapper.dark-mode .unique-grid-container {
  background-color: #121212 !important; /* Dark background */
}

/* Light Mode Styling */
.theme-wrapper.light-mode .unique-grid-item.text {
  color: #000000 !important; /* Dark text on light background */
}

.theme-wrapper.light-mode .unique-grid-container {
  background-color: #ffffff !important; /* Light background */
}

/* Responsive Design for Small Screens */
@media (max-width: 768px) {
  .theme-wrapper .unique-grid-container {
    grid-template-columns: 1fr; /* Switch to a single column on small screens */
  }

  .theme-wrapper .unique-grid-item.photo {
    height: 150px; /* Smaller photos for mobile */
  }
}


/* Light Mode Styles */
.light-mode h2,
.light-mode h3,
.light-mode h4,
.light-mode p {
    color: #333; /* Light mode text color */
}

/* Dark Mode Styles */
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode p {
    color: #ffffff; /* Dark mode text color */
}

/* Ensure the footer text remains unchanged */
.copyright-footer p,
.copyright-footer ul {
    color: white; /* Keep footer text color consistent */
}

/*-- toggle switch --*/
nav {
    display: flex;
    justify-content: flex-end;
}

.theme-switch-wrapper {
    display: flex;
    align-items: center;
}

.theme-switch-wrapper em {
    margin-left: 10px;
    font-size: 1rem;
}

.theme-switch {
    display: inline-block;
    position: relative;
    margin: 10%;
}

.theme-switch input {
    display: none;
}

/*-- //toggle switch --*/

.mode-container {
  width: 24px;
  height: 24px;
  margin-left: 12px;
  color:gray;
}

.gg-sun {
  position: relative;
  -webkit-transform: scale(var(--ggs, 1));
  transform: scale(var(--ggs, 1));
  height: 24px;
  background: linear-gradient(180deg, currentColor 4px, transparent 0) no-repeat 5px -6px/2px 6px, linear-gradient(180deg, currentColor 4px, transparent 0) no-repeat 5px 14px/2px 6px, linear-gradient(180deg, currentColor 4px, transparent 0) no-repeat -8px 5px/6px 2px, linear-gradient(180deg, currentColor 4px, transparent 0) no-repeat 14px 5px/6px 2px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 5px;
  border: 6px solid transparent;
}

.gg-moon {
  overflow: hidden;
  position: relative;
  -webkit-transform: rotate(-135deg) scale(var(--ggs, 1));
  transform: rotate(-135deg) scale(var(--ggs, 1));
  width: 20px;
  height: 20px;
  border: 2px solid;
  border-bottom: 2px solid transparent;
}

.gg-moon,
.gg-moon:after {
  display: block;
  box-sizing: border-box;
  border-radius: 50%;
}

.gg-moon:after {
  content: "";
  position: absolute;
  width: 12px;
  height: 18px;
  border: 2px solid transparent;
  box-shadow: 0 0 0 2px;
  top: 8px;
  left: 2px;
}

.gg-sun,
.gg-sun:after,
.gg-sun:before {
  box-sizing: border-box;
  display: block;
  width: 24px;
}

.gg-sun:after,
.gg-sun:before {
  content: "";
  position: absolute;
  height: 2px;
  border-right: 4px solid;
  border-left: 4px solid;
  left: -6px;
  top: 5px;
}

.gg-sun:before {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.gg-sun:after {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mode-container i.gg-sun {
  display: none;
}

.mode-container i.gg-moon {
  display: block;
}

input:checked+.mode-container i.gg-sun {
  display: block;
}

input:checked+.mode-container i.gg-moon {
  display: none;
}

.navbar-brand img {
  transition: all 0.3s ease;
  content: url('/assets/images/logo-dark.png'); /* Image for light mode */
}

.light-mode .navbar-brand img {
  content: url('/assets/images/logo-dark.png'); /* Image for light mode */
}

.dark-mode .navbar-brand img {
  content: url('/assets/images/logo-white.png'); /* Image for dark mode */
}

.suggestions-section {
    transition: background-color 0.3s ease;
}

.suggestions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.suggestion-card {
    background: var(--card-bg, #fff);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid var(--border-color, #e0e0e0);
}

.suggestion-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
}

.card-image {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.suggestion-card:hover .card-image img {
    transform: scale(1.05);
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.suggestion-card:hover .card-overlay {
    opacity: 1;
}

.view-more {
    color: white;
    font-size: 16px;
    font-weight: 500;
    padding: 10px 20px;
    border: 2px solid white;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.view-more:hover {
    background: white;
    color: #333;
}

.card-content {
    padding: 25px;
}

.card-title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    font-family: 'Playfair Display', serif;
}

.card-description {
    font-size: 14px;
    line-height: 1.6;
    opacity: 0.8;
}

/* Green text styling to match your existing theme */
.green-text {
    color: #28a745 !important;
}

/* Dark mode support */
body.dark-mode .suggestions-section {
    --bg-color: #1a1a1a;
    --card-bg: #2d2d2d;
    --border-color: #404040;
}

body.dark-mode .suggestion-card {
    background: var(--card-bg);
    border-color: var(--border-color);
}

body.dark-mode .suggestion-card:hover {
    box-shadow: 0 15px 35px rgba(255, 255, 255, 0.1);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .suggestions-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 0 15px;
    }

    .card-image {
        height: 200px;
    }

    .card-content {
        padding: 20px;
    }

    .card-title {
        font-size: 20px;
    }

    .card-description {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .suggestions-section {
        padding: 40px 0;
    }
}

/*-- //dark and light mode styling --*/
/*# sourceMappingURL=style-freedom.css.map */