@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #ca9954; /* Consistent background color */
    color: white; /* Default text color */
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 20px 10%;
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

.logo {
    font-size: 25px;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

.navbar a {
    font-size: 18px;
    color: white;
    text-decoration: none;
    font-weight: 500;
    margin-left: 35px;
    transition: .3s;
}

.navbar a:hover,
.navbar a.active {
    color: #945029;
}

.home {
    display: flex;
    height: 100vh;
    align-items: center;
    justify-content: center;
    padding: 0 10%;
}

.home-content {
    flex: 1;
    max-width: 50%;
}

.home-content h1 {
    font-size: 3.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.home-content h3 {
    font-size: 1.8rem;
    font-weight: 600;
    color: #945029;
    margin-bottom: 20px;
}

.home-content p {
    font-size: 1rem;
    margin-bottom: 30px;
    color: white;
}

.about-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-image img {
    max-width: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}




.projects-text {
    position: absolute; /* Position it relative to the home section */
    bottom: 40px; /* Align with the home-sci section */
    left: 50%; /* Start at the middle of the section */
    transform: translateX(-50%); /* Shift back by half its width to perfectly center */
    font-size: 18px; /* Font size for readability */
    color: #945029; /* Matches the blue theme color */
    font-weight: 600; /* Make it slightly bold */
    text-align: center; /* Ensure the text is centered */
}






/* Part Two */

.scroll-down-section {
    display: flex; /* Flexbox layout for text and image */
    align-items: center;
    justify-content: space-between; /* Space out text and image */
    height: 100vh; /* Full height for the section */
    background-color: #b3804a; /* Hot pink background */
    padding: 20px;
    color: white; /* Text color for contrast */
}

.scroll-content {
    flex: 1;
    max-width: 50%; /* Limit the width of the text */
    text-align: left; /* Align text to the left */
    margin-right: 20px; /* Add space between text and image */
    font-size: 1rem; /* Adjust text size for better fit */
    line-height: 1.5; /* Line spacing for readability */
}

.scroll-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.scroll-image img {
    max-width: 90%; /* Ensure the image fits within its container */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px; /* Optional: Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Optional: Add depth with a shadow */
}


.scroll-down-section h2 {
    margin-top: 30px;
}

.scroll-down-section p {
    margin-top: 15px;
}






.scroll-content {
    margin-top: 0px; /* Add some spacing above the logline section */
    text-align: left; /* Keep logline text aligned to the left */
    font-size: 1rem;
    color: #fff;
    line-height: 1.6;
}


.test {
    margin-top: 450px;
    margin-bottom: 200px;
}





/* Part Three */

/* Sketches Section */
.scroll-down-section2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #ca9954; /* Match main background color */
    padding: 40px 20px;
    color: white; /* Text color for contrast */
    text-align: center;
}

.sketches-title {
    margin-top: 15px;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.sketches-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Responsive grid */
    gap: 20px;
    max-width: 90%;
    margin: 0 auto;
}

.sketches-gallery img {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Optional: Add depth */
}




/* Logo For instagram */
.footer-section {
    position: absolute;
    bottom: 20px; /* Adjusts position relative to the bottom */
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10%; /* Add padding to separate from edges */
}

.projects-text {
    font-size: 18px;
    color: #945029;
    font-weight: 600;
    text-align: left;
    margin-bottom: 20px; /* Space between text and other elements */
}

.home-sci {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px; /* Space between the icon and other elements */
}

.about-image {
    margin-bottom: 40px; /* Add space below the image */
}


.home-sci a {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 50px; /* Button size */
    height: 50px;
    background: transparent;
    border: 2px solid #945029;
    border-radius: 50%;
    font-size: 24px; /* Icon size */
    color: #945029;
    text-decoration: none;
    transition: all 0.3s ease;
}

.home-sci a:hover {
    color: #fff; /* Change icon color on hover */
    background: #945029; /* Change background color on hover */
    border-color: #fff;
}




/* Part Four */

.scroll-down-section5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #b3804a; /* Match the theme */
    padding: 40px 20px;
    color: white; /* Contrast text */
    text-align: center;
}

.scroll-down-section5 h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.scroll-down-section5 p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.pdf-viewer {
    width: 90%; /* The iframe will take up 90% of the width of its parent container. */
    max-width: 1200px; /* The width of the iframe will not exceed 800px, even if 90% is larger. */
    margin: 0 auto 20px; /* Centers the iframe horizontally (`auto` for left and right) and adds a 20px bottom margin. */
    border: 2px solid #945029; /* Creates a 2px solid border with the color #945029 (a shade of brown). */
    border-radius: 8px; /* Rounds the corners of the iframe with a radius of 8px. */
    overflow: hidden; /* Hides any content that overflows the iframe’s boundary (useful for rounded corners). */
}



.pdf-download a {
    text-decoration: none;
    background-color: #945029;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.pdf-download a:hover {
    background-color: white;
    color: #945029;
    border: 2px solid #945029;
}




/* Part five */

/* Sketches Section */
.scroll-down-section4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f4e0c4; /* Light contrasting background */
    color: #945029; /* Text color matching the theme */
    border: 2px solid #945029; /* Border for visual separation */
    padding: 40px 20px;
    color: white; /* Text color for contrast */
    text-align: center;
}


.director-producer {
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 10px;
    background-color: #f4e0c4; /* Light contrasting background */
    color: #945029; /* Text color matching the theme */
    border-radius: 10px; /* Rounded corners for aesthetics */
    max-width: 350px; /* Limit width for compact layout */
    text-align: center; /* Center-align the text */
    font-size: 1rem; /* Font size for readability */
    line-height: 1.5; /* Line spacing for readability */
}





/* Part Six */

/* Sketches Section */
.scroll-down-section5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #b3804a; /* Match main background color */
    padding: 40px 20px;
    color: white; /* Text color for contrast */
    text-align: center;
}

.scroll-down-section5 .sketches-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three images per row */
    gap: 20px; /* Space between the images */
    max-width: 90%; /* Ensure the gallery fits within the container */
    margin: 0 auto; /* Center the gallery */
}


.scroll-down-section5 .sketches-gallery img {
    width: 100%; /* Allow images to occupy full space within the grid */
    height: auto; /* Maintain aspect ratio */
    border-radius: 10px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4); /* Add depth */
    transition: transform 0.3s ease; /* Smooth zoom effect on hover */
}

.scroll-down-section5 .sketches-gallery img:hover {
    transform: scale(2); /* Enlarges the image */
    z-index: 10; /* Ensures the image appears above other content */
    transition: transform 0.5s ease; /* Smooth transition */
}