/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Importing Custom Fonts */
@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/MOMCAKE-Bold.otf');
}

@font-face {
    font-family: 'CustomFont2';
    src: url('../fonts/Poison-Regular.otf');
}

@font-face {
    font-family: 'CustomFont3';
    src: url('../fonts/1.ttf');
}

@font-face {
    font-family: 'CustomFont4';
    src: url('../fonts/2.ttf');
}

@font-face {
    font-family: 'CustomFont5';
    src: url('../fonts/3.ttf');
}

@font-face {
    font-family: 'CustomFont6';
    src: url('../fonts/Blome.otf');
}

@font-face {
    font-family: 'CustomFont8';
    src: url('../fonts/8.ttf');
}
@font-face {
    font-family: 'CustomFont9';
    src: url('../fonts/9.ttf');
}
@font-face {
    font-family: 'CustomFont10';
    src: url('../fonts/10.otf');
}
@font-face {
    font-family: 'CustomFont11';
    src: url('../fonts/11.otf');
}

html {
    scroll-behavior: smooth;
}

/* Keep every image inside its box at any window size */
img {
    max-width: 100%;
}



/* Body Styles */
body {
    margin: 0;
    font-family: 'CustomFont2', sans-serif;
    overflow-x: hidden;
    background-color: #ffffff;
}
.container, .photo-text-section, .photo-collage {
    max-width: 100vw; /* Ensure content doesn't exceed viewport width */
    overflow-x: hidden; /* Prevent horizontal overflow */
}

/* Background Container */
/* Banner Styles */
.banner {
    position: absolute; /* Position relative to the .background-container */
    top: 0;
    left: 0;
    width: 100%; /* Full width of the parent container */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: clamp(1rem, 2vw, 2rem) clamp(2rem, 3vw, 3rem); /* Fluid, no breakpoint needed */
    z-index: 1000; /* Keep it above the background image */
}
/* Center Header on Background Image */
.header-middle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: rgb(255, 255, 255); /* Default color for all text in header-middle */
    z-index: 2;
    max-width: 94vw; /* never wider than the screen */
}

/* Main Header Text (h1) */
.header-middle h1 {
    font-size: clamp(1rem, 5vw, 3.25rem); /* Fluid across phone -> monitor, no breakpoints needed */
    font-weight: normal;
    letter-spacing: 0.3em; /* Adjust spacing */
    white-space: nowrap; /* Prevent the text from wrapping */
    overflow: hidden; /* Handle overflow scenarios */
    text-overflow: ellipsis; /* Optional: Adds "..." if the text overflows */
    margin: 0; /* Remove default margin */
    line-height: 1.2; /* Maintain consistent line spacing */
    font-family: 'CustomFont11', sans-serif; /* Custom font for h1 */
    text-align: center; /* Center align text if required */
}


/* Subheader Text (p) */
.header-middle p {
    font-size: clamp(0.75rem, 2vw, 1.5rem); /* Fluid across phone -> monitor, no breakpoints needed */
    margin-top: 20px; /* Add spacing below the header */
    color: white; /* Ensure the text is white */
    font-family: 'CustomFont10', sans-serif; /* Use a different font for the subheader */
    font-weight: bold; /* a little heavier so it reads clearly on the photo */
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
    letter-spacing: 0.3em; /* Adjust spacing */
    line-height: 1.5; /* Comfortable line spacing */
}



/* Logo Styles */
.logo {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.logo-image {
    height: 50px; /* Adjust height as needed */
    width: auto; /* Maintain aspect ratio */
    display: block;
    transition: transform 0.3s ease; /* Add smooth animation on hover */
    filter: invert(1); /* Invert colors */

}

/* Hover Effect */


/* Signature logo (top-left). The PNG has a lot of empty transparent space
   around the signature, so .sig crops to just the signature itself, then
   sizes and positions it from the window width: close to the edge on
   phones, a little further in on big screens. */
.sig {
    --logo-w: clamp(60px, 2vw + 50px, 95px); /* visible signature width */
    position: absolute;
    top: clamp(14px, 2vw, 40px);
    left: clamp(16px, 3vw, 58px);
    width: var(--logo-w);
    aspect-ratio: 671 / 398; /* shape of the signature inside the PNG */
    overflow: hidden;
    z-index: 15;
    transition: transform 0.3s ease; /* hover grow */
}
.sig:hover {
    transform: scale(1.1); /* Slightly enlarge on hover */
}
/* The full PNG, scaled and shifted so only the signature shows */
.sig img {
    width: calc(var(--logo-w) * 3.6066); /* 2420 / 671 */
    height: auto;
    max-width: none;
    margin-left: calc(var(--logo-w) * -1.1177); /* -750 / 671 */
    margin-top: calc(var(--logo-w) * -0.4590); /* -308 / 671 */
    display: block;
}

.overlay-button {
    position: absolute;
    inset: 0; /* covers the whole signature */
    width: 100%;
    height: 100%;
    background-color: transparent; /* Invisible button */
    border: none;
    cursor: pointer;
    z-index: 999; /* Ensures the button is above the image */
    padding: 0; /* Removes any default padding */
    margin: 0; /* Removes any default margin */
}

.overlay-button:focus {
    outline: none;
}
/* Container and Background */
.container {
    position: relative;
    width: 100%;
    min-height: 100vh;
    min-height: 100svh; /* visible screen height on phones (ignores the URL bar) */
    background-image: url(../images/home-background.jpg);
    background-size: cover;
    background-position: center 12%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
}



        



/* Arrow Styles */
.arrow-link {
    position: absolute;
    bottom: 20px; /* Adjust distance from the bottom of the container */
    left: 50%;
    transform: translateX(-50%);
    cursor: pointer;
    transition: transform 0.3s ease;
    z-index: 10; /* Ensure it stays above the background */
}

.arrow {
    width: clamp(20px, 3vw, 40px); /* Fluid across phone -> monitor, no breakpoints needed */
    height: auto;
    filter: invert(1); /* Invert colors */
    transition: transform 0.3s ease;
}


.arrow-link:hover .arrow {
    animation: bounce 1s infinite; /* Apply bounce animation */
    transform: scale(1.2); /* Slightly enlarge on hover */
}



/* About Me */
.about {
        display: flex;
        flex-wrap: wrap; /* stack image + text on narrow screens instead of squishing */
        padding-top: 10vh;
        align-items: center;
        padding-bottom: 10vh;
        margin-left: clamp(1.5rem, 5vw, 10vw);
        margin-right: clamp(1.5rem, 5vw, 10vw);
        justify-content: center;
        gap: clamp(1.5rem, 5vw, 4rem);
}
.about-text {
    flex: 1 1 min(320px, 100%);
    max-width: 500px;
}
.about-photo {
    flex: 1 1 min(280px, 100%);
    /* Portrait photo: scale with the window width AND height so it never
       dominates a small screen. 500px on a normal desktop, like before. */
    max-width: min(500px, 35vw + 100px, 46vh);
}
.about .img {
    width: 100%; /* fills whatever width the flex item above ends up with */
    height: auto;
    border-radius: 10px;
    display: block;
}
.about .title {
    font-size: clamp(2rem, 1.3rem + 2.2vw, 3.5rem); /* Smooth scaling: 32px phone -> 56px wide monitor */
    font-family: 'CustomFont11', sans-serif; /* Use a custom font */
    text-align: right;
}
.about .text {
    font-size: clamp(1rem, 0.85rem + 0.55vw, 1.5rem); /* Smooth scaling: 16px phone -> 24px wide monitor */
    text-align: right;
    justify-content: center; /* Center text horizontally */
    line-height: 1.6; /* Improves readability */
    font-family: 'CustomFont2', sans-serif; /* Use a custom font */
}

/* Footer Styles */
.footer {
    background-color: #000; /* Black background */
    padding: 2rem 0;
    text-align: center; /* Center align content */
    color: #fff; /* White text */
    font-family: 'CustomFont2', sans-serif; /* Match the rest of the site */
}

.footer-social {
    display: flex;
    justify-content: center; /* Horizontally centers the icons */
    align-items: center; /* Vertically centers the icons (if necessary) */
    gap: clamp(2rem, 8vw, 5rem); /* Space between icons */
    margin-bottom: 1rem; /* Space between icons and copyright text */
}


.social-icon {
    font-size: 2rem; /* Icon size */
    color: #fff; /* White color for icons */
    transition: color 0.3s ease, transform 0.3s ease; /* Add hover effect */
}

.social-icon:hover {
    color: #bababa; /* Yellow color on hover */
    transform: scale(1.2); /* Slightly enlarge on hover */
}

/* Copyright Text */
.footer-copyright {
    font-size: 0.9rem; /* Smaller text size */
    color: rgba(255, 255, 255, 0.7); /* Slightly muted white color */
    margin-top: 0.5rem; /* Space above the text */
}

/* Video Section */
.video-section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4rem clamp(1rem, 4vw, 2rem); /* Add spacing around the section */
    background-color: #f5f5f5; /* Light background color */
    color: #000000; /* Text color */
}

.video-content {
    display: flex;
    flex-wrap: wrap; /* stack text above video on narrow screens */
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 8vw, 10rem); /* Space between text and video */
    max-width: 90vw;
    padding-top: 10vh;
    padding-bottom: 10vh;
    width: 100%; /* Full width for flexibility */
}

.video-text {
    flex: 1 1 min(320px, 100%);
    max-width: 500px;
    text-align: left; /* Align text to the left */
}

.video-section .content-title {
    font-size: clamp(2rem, 1.3rem + 2.2vw, 3.5rem); /* Same scale as the About title */
    font-family: 'CustomFont11', sans-serif; /* Use a custom font */
    font-weight: 700;
    margin-bottom: 1rem; /* Space below the title */
}

.video-section .content-text {
    font-size: clamp(1rem, 0.85rem + 0.55vw, 1.5rem); /* Same scale as the About text */
    font-family: 'CustomFont2', sans-serif; /* Use another custom font */
    line-height: 1.6; /* Improves readability */
}

.video-thumbnail-link {
    position: relative;
    display: block;
    flex: 1 1 min(420px, 100%); /* Beside the text on desktop; full width when stacked on small screens */
    max-width: 640px;
    aspect-ratio: 16 / 9;
    border-radius: 10px; /* Rounded corners */
    overflow: hidden; /* Ensure content stays inside rounded corners */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow */
    cursor: pointer;
}

.video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.video-thumbnail-link:hover .video-thumbnail {
    transform: scale(1.05);
    filter: brightness(0.8);
}

.play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(48px, 5vw, 70px);
    height: clamp(48px, 5vw, 70px);
    background: rgba(0, 0, 0, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.play-button::after {
    content: '';
    margin-left: 5px; /* optical centering for the triangle */
    border-style: solid;
    border-width: 14px 0 14px 22px;
    border-color: transparent transparent transparent #ffffff;
}

.video-thumbnail-link:hover .play-button {
    background-color: #ff0000; /* YouTube red */
}

/* Collage and Text Section */
.photo-text-section {
    display: flex;
    flex-direction: column; /* Stack text above the collage */
    align-items: center; /* Center both children horizontally */
    padding: 4rem clamp(1rem, 4vw, 2rem);
    padding-bottom: 10vh;
    background-color: #f5f5f5; /* Light background color */
    container-type: inline-size; /* lets the collage size itself from this section's width */
}

/* Collage Layout - the tile-* classes (applied per photo-button in
   index.html) give the asymmetric magazine-style layout. Row height is tied
   to the collage's own width, so the whole collage shrinks as one piece and
   keeps its proportions at any window size instead of squashing. On phones
   it switches to a simpler 2-column version of the same arrangement. */
.photo-collage {
    --collage-width: min(900px, 100cqw);
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* Six equal columns */
    grid-auto-rows: calc(var(--collage-width) * 0.1333); /* 120px at full size */
    gap: clamp(0.5rem, 1.2vw, 1.2rem);
    width: var(--collage-width);
    margin: 0 auto; /* Center the collage block */
    overflow: hidden; /* Ensures clean edges */
}

.tile-hero { grid-column: span 6; grid-row: span 3; }
.tile-tall { grid-column: span 2; grid-row: span 4; }
.tile-wide { grid-column: span 4; grid-row: span 4; }
.tile-small { grid-column: span 3; grid-row: span 2; }
.tile-banner { grid-column: span 6; grid-row: span 2; }

@media (max-width: 600px) {
    .photo-collage {
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: auto;
    }
    .tile-hero, .tile-tall, .tile-wide, .tile-small, .tile-banner {
        grid-row: auto;
    }
    .tile-hero   { grid-column: span 2; aspect-ratio: 3 / 2; }
    .tile-tall,
    .tile-wide,
    .tile-small  { grid-column: span 1; aspect-ratio: 3 / 4; }
    .tile-banner { grid-column: span 2; aspect-ratio: 2 / 1; }
}

/* General Photo Styles */
.photo {
    position: relative; /* Establish context for the title positioning */
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px; /* Optional rounded edges */
    transition: transform 0.3s ease, filter 0.3s ease; /* Smooth zoom and dark overlay transition */
}

/* Make each photo a button */
.photo-button {
    position: relative; /* Establish positioning context for title */
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensures the image stays inside the rounded edges */
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    text-decoration: none; /* Remove default underline for links */
    border-radius: 10px; /* Add rounded corners to the parent */
}

/* Title Overlay */
.photo-title {
    position: absolute;
    top: 0; /* Align with the top of the photo */
    left: 0; /* Align with the left of the photo */
    width: 100%; /* Make the title span the full width of the photo */
    height: 100%; /* Make the title span the full height of the photo */
    color: white; /* Ensure the text is visible over the photo */
    font-size: clamp(1rem, 4cqw, 2.75rem); /* Scales with the collage, not the whole window */
    padding: 0 0.5em; /* keeps long titles off the tile edges */
    font-family: 'CustomFont', sans-serif; /* Use a custom font */
    display: flex; /* Use flexbox to center the text */
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    background-color: rgba(0, 0, 0, 0); /* Initially no overlay */
    text-align: center; /* Center the text */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Add subtle shadow for better visibility */
    pointer-events: none; /* Ensure the text does not interfere with clicks */
    border-radius: 10px; /* Match the rounded corners of the photo */
    transition: background-color 0.3s ease, opacity 0.3s ease; /* Smooth transition for overlay and text */
}

/* Photo Button Hover Effect */
.photo-button:hover .photo-title {
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay on hover */
    opacity: 1; /* Make the title visible on hover */
}

/* Zoom Effect on Hover */
.photo-button:hover .photo {
    transform: scale(1.05); /* Slight zoom effect */
    filter: brightness(0.9); /* Slightly darken the photo */
}

/* Text Content */
.text-content {
    max-width: 700px; /* Restrict text width */
    text-align: center;
    display: flex;
    flex-direction: column; /* Stack heading and subtext */
    align-items: center; /* Horizontally center the content */
    margin-bottom: 3rem; /* Space before the collage below */
}

.text-content h2 {
    font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); /* Same scale as the other titles */
    margin-bottom: 1rem;
    text-align: center;
    font-family: 'CustomFont11', sans-serif; /* Use a custom font */
    color: #333;
}


.text-content p {
    font-size: clamp(1rem, 0.85rem + 0.55vw, 1.5rem); /* Same scale as the other body text */
    line-height: 1.6;
    font-family: 'CustomFont2', sans-serif;
    color: #555;
}











/* Drone Services - sits between the header photo and About.
   Same fonts, rounded photo and fluid sizing as the About / Explore sections. */
.drone-section {
    display: flex;
    justify-content: center;
    padding: 4rem clamp(1rem, 4vw, 2rem);
    background-color: #ffffff; /* white, so it stands apart from the grey sections below */
    color: #000;
}

.drone-content {
    display: flex;
    flex-wrap: wrap; /* photo drops below the text on narrow screens */
    align-items: center;
    justify-content: center;
    gap: clamp(2rem, 6vw, 8rem);
    max-width: 90vw;
    width: 100%;
    padding-top: 6vh;
    padding-bottom: 6vh;
}

.drone-text {
    flex: 1 1 min(320px, 100%);
    max-width: 500px;
}

.drone-title {
    font-size: clamp(2rem, 1.3rem + 2.2vw, 3.5rem); /* same scale as the other titles */
    font-family: 'CustomFont11', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
}

.drone-intro {
    font-size: clamp(1rem, 0.85rem + 0.55vw, 1.5rem); /* same scale as the other body text */
    font-family: 'CustomFont2', sans-serif;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.drone-list {
    list-style: none;
    margin-bottom: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.15);
}

.drone-list li {
    font-family: 'CustomFont10', sans-serif; /* same font as the PHOTOGRAPHY subheading */
    font-size: clamp(0.75rem, 0.65rem + 0.35vw, 1rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    padding: 0.8em 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.drone-contact {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.5rem;
}

.drone-name {
    font-family: 'CustomFont11', sans-serif;
    font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem);
}

.drone-call {
    display: inline-block;
    font-family: 'CustomFont10', sans-serif;
    font-size: clamp(0.8rem, 0.7rem + 0.3vw, 1rem);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    text-decoration: none;
    color: #000;
    border: 1px solid #000;
    border-radius: 10px;
    padding: 0.9em 1.4em;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.drone-call:hover {
    background-color: #000;
    color: #fff;
}

.drone-contact .drone-name {
    flex-basis: 100%; /* name on its own line, Call and Email buttons side by side under it */
}

/* Vertical (9:16) sample video. Width is capped by the window height too,
   so the whole clip always fits on screen without scrolling. */
.drone-video {
    flex: 0 1 auto;
    width: min(100%, 380px, 48vh);
    margin: 0;
}

.drone-clip {
    width: 100%;
    aspect-ratio: 9 / 16;
    display: block;
    object-fit: cover;
    background: #000;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.drone-caption {
    margin-top: 0.8rem;
    text-align: center;
    font-family: 'CustomFont10', sans-serif;
    font-size: clamp(0.7rem, 0.6rem + 0.3vw, 0.9rem);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #555;
}


/* Button on the header photo - tells visitors there's more below and
   jumps to Drone Services. Solid white so it stands out on the photo,
   same rounded corners and letter-spacing as the rest of the site. */
.hero-button {
    display: inline-block;
    margin-top: clamp(1.75rem, 5vh, 3.5rem);
    padding: 1.05em 2em;
    font-family: 'CustomFont10', sans-serif;
    font-size: clamp(0.8rem, 0.7rem + 0.4vw, 1.1rem);
    font-weight: bold;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: #000;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    animation: hero-button-in 1s ease 0.6s both; /* gentle fade-in after the title */
}

.hero-button:hover {
    background-color: rgba(0, 0, 0, 0.35);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

@keyframes hero-button-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}


/* Scroll cue: thin white circle with a down chevron that gently bobs.
   Matches the rounded, outlined style of the buttons on the site. */
.arrow-link {
    display: block;
    bottom: clamp(20px, 4vh, 40px);
    padding: 0;
    text-decoration: none;
}

.scroll-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: clamp(46px, 3.5vw, 58px);
    height: clamp(46px, 3.5vw, 58px);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.85);
    background-color: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
    color: #fff;
    animation: scroll-bob 2.4s ease-in-out infinite;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.scroll-circle svg {
    width: 45%;
    height: 45%;
}

.arrow-link:hover .scroll-circle {
    background-color: #fff;
    color: #000;
}

@keyframes scroll-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

@media (prefers-reduced-motion: reduce) {
    .scroll-circle, .hero-button { animation: none; }
}