/* Global Styles for the entire site */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #fbfbf2;
    /*color: white;*/
}

/* Navigation Bar */
nav {
    background-color: #333;
    padding: 10px;
    text-align: center;
}

nav a {
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    margin: 0 15px;
}

nav a:hover {
    background-color: #575757;
    border-radius: 5px;
}

/* New Section: Doing What I Do Best */
.home-page .doing-best-section {
    padding: 40px 20px;
    text-align: center;
}

.home-page .doing-best-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.home-page .image-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    overflow-x: auto;  /* Allows horizontal scrolling if needed */
}
/* Film container */
.home-page .main-films-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Create 4 columns */
    gap: 20px;
    padding: 5px;
    
    /* Center content in grid cells */
    justify-items: center;  /* Horizontally center items */
    align-items: center;    /* Vertically center items */
    
    /* Limit the container width to 90vw */
    width: 92vw;            
    margin: 0 auto;          /* Center the container horizontally */
}

/* Film container */
.home-page .films-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    /*padding: 5px;
     Center content in grid cells */
    justify-items: center;  /* Horizontally center items */
    align-items: center;    /* Vertically center items */
}

/* Image container (left side) */
.home-page .image-container {
    width: 200px;          /* Fixed size for the image container */
    height: 200px;         /* Fixed height */
    overflow: hidden;      /* Hide anything outside the container */
    position: relative;
    border-radius: 10px;   /* Optional: rounded corners */
    transition: transform 0.3s ease; /* Smooth zoom on hover */
}

.home-page .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* Ensure the image fills the container */
    object-position: center; /* Center the image inside the container */
}



/* Film item layout */
.home-page .film-item {
    background-color: #333;
    padding: 5px;
    border-radius: 10px;
    transition: transform 0.3s ease;
    width: 90%;
    /*display: flex;  Use Flexbox for side-by-side layout */
    /*flex-direction: row;  Ensure the layout is horizontal */
    align-items: center; /* Vertically center the content */
    gap: 20px; /* Space between image and text */
    cursor: pointer; /* Pointer cursor on hover to indicate interactivity */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Horizontal, Vertical, Blur radius, Color */
}

/* Hover effect for film items */
.home-page .film-item:hover {
    transform: scale(1.02);
}

.home-page .film-item h3 {
    margin-top: 5px;
}

.home-page h1 {
    margin: 20px;
}

.home-page .film-item p {
    width: 100%;
    font-size: 0.9rem;
}

.home-page a {
    color: white;
    text-decoration: none;
}

.home-page .film-item .text-container {
     /*flex-grow: 1; Allow the text container to take the remaining space */
    display: flex;
    /*width: max-content;*/
    flex-direction: column; /* Stack text vertically */
    justify-content: center; /* Center the text vertically */
}

/* Title text */
.home-page .film-item .text-container h3 {
    margin: 0; /* Remove default margin */
    font-size: 1.2rem;
    color: white;
}

/* Description text */
.home-page .film-item .text-container p {
    font-size: 0.9rem;
    color: white;
}

/* General Hero Section */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #111;
    /*gap: 30px;  Add space between left and right sections */
    border-radius: 10px;   /* Optional: rounded corners */
    width: 90vw;
    margin: 10px auto;  /* Center the div within the parent container */
    /* Add drop shadow */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Horizontal, Vertical, Blur radius, Color */
}

/* Left side of the Hero Section */
.hero .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 50%; /* Adjust width to take 50% */
    color: white;
}

/* Image and Credentials Container */
.hero .left .image-container {
    width: 250px;  /* Adjust width of the image */
    height: 250px;
    overflow: hidden;
    /*border-radius: 50%;   Circular image */
    margin-bottom: 20px;
}

.hero .left .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero .left .credentials h2 {
    font-size: 2.5rem;
    margin: 0;
    margin-bottom: 10px;
}

.hero .left .credentials p {
    font-size: 1.2rem;
    margin: 0;
    color: #ccc;
}

/* Right side of the Hero Section */
.hero .right {
    width: 40%;  /* Adjust width to take 40% */
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero .right .logo-container {
    width: 80%;
    text-align: center;
}

.hero .right .logo-container img {
    max-width: 100%;  /* Ensure logo scales well */
    height: auto;
}
/*******************************************************************************/
/******************************************************************************/
/* Film-specific Styles */
.films .film-details {
    display: flex;
    flex-direction: row; /* Align items side by side */
    justify-content: space-between;
    padding: 20px;
}

/* Left container for film content */
.films .film-content {
    width: 40%;           /* Left container will take 40% of the screen */
    margin-right: 20px;   /* Space between content and images */
}

/* Right container for images (full window height) */
.films .film-images {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    width: 85%;           /* Right container will take 55% of the screen */
    height: 90vh;         /* Set the height to the full height of the window */
    overflow-y: auto;     /* Enable vertical scrolling if content overflows */
    background-color: #111;
    border-radius: 10px;   /* Optional: to give rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);  /* Horizontal, Vertical, Blur radius, Color */
}

.films .image-container {
    width: 280px;         /* Fixed size for the image container */
    height: 280px;        /* Fixed height */
    overflow: hidden;     /* Hide anything outside the container */
    position: relative;
    margin: 10px auto;
    border-radius: 10px;   /* Optional: to give rounded corners */
}

.films .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* Ensures the image covers the container */
    object-position: center; /* Center the image inside the container */
}

.films .film-description {
    margin-top: 20px;
}

.films h1, .films h3 {
    color: black;
}

.films .film-title {
    margin-bottom: 20px;
}

/*******************************************************************************/
/******************************************************************************/
/* Contact Page Specific Styles */
.contact h2 {
    text-align: center;
    font-size: 2rem;
    margin-top: 50px;
}

/* Film List in Contact Page */
.contact .film-list {
    padding: 20px;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact .film-list li {
    font-size: 1.2rem;
    padding: 10px;
    background-color: #333;
    margin: 10px 0;
    border-radius: 5px;
    transition: background-color 0.3s;
    width: 80%; /* Adjust the width for the list items */
    text-align: center;
}

.contact .film-list li:hover {
    background-color: #575757;
}

/* Contact Form */
.contact .contact-form {
    width: 80%;
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background-color: #333;
    border-radius: 10px;
}

.contact .contact-form label {
    font-size: 1rem;
    margin-bottom: 8px;
    display: block;
    color: white;
}

.contact .contact-form input, .contact .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #222;
    color: white;
}

.contact .contact-form button {
    padding: 10px 20px;
    background-color: #444;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    font-size: 1rem;
}

.contact .contact-form button:hover {
    background-color: #575757;
}
/* Styling for the "Doing Best" Section */
.doing-best-section {
    background-color: #222;   /* Dark background for contrast */
    color: white;              /* White text for readability */
    padding: 40px 20px;        /* Ample padding for space */
    text-align: center;        /* Center the text */
    border-radius: 15px;       /* Rounded corners for a soft look */
    max-width: 89vw;          /* Limit the width to avoid overly wide text */
    margin: 10px auto;            /* Center it horizontally */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);  /* Drop shadow for depth */
    line-height: 1.6;          /* Increased line height for readability */
}

/* Heading Styles */
.doing-best-section h2 {
    font-size: 2.5rem;         /* Larger heading size */
    margin-bottom: 20px;       /* Space below the heading */
    color: #F4B400;            /* Highlight color for the heading */
}

/* Paragraph text styling */
.doing-best-section p {
    font-size: 1.1rem;         /* Slightly larger text for body */
    margin-bottom: 15px;       /* Space below each paragraph */
}

/* Layout for categories */
.categories-container {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    gap: 30px;
    width: 91vw;
    margin: 5px auto;  /* Center the div within the parent container */
}

.category {
    width: 30%;  /* Adjust as needed */
    background-color: #333;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
}

.category-thumbnail img {
    width: 300px;             /* Fixed width */
    height: 300px;            /* Fixed height */
    object-fit: cover;        /* Crop the image to fill the container without stretching */
    object-position: center;  /* Center the image within the container */
    border-radius: 10px;      /* Optional: rounded corners */
    margin-bottom: 15px;      /* Optional: space below each image */
}

.category a, h2{
    /*color: white;*/
    text-decoration: none;
    font-size: 1.2rem;
}