/*-----IMPORTS-----*/
@import url('https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap');



/*-----VARIABLES------*/
:root {
    --color-neutral-900: rgb(255, 255, 255);
    --color-neutral-700: rgb(233, 233, 233);
    --color-neutral-600: rgb(166, 166, 166);
    --color-neutral-500: rgb(122, 122, 122);
    --color-neutral-300: rgb(66, 66, 66);
    --color-neutral-100: rgb(22, 22, 22);
}



/*-----RESETS-----*/
*, *::before, *::after {
    box-sizing: border-box;
}

* {
    margin: 0;
    padding: 0;
}



/*-----GENERAL-----*/
body {
    font-family: Urbanist;
    font-weight: 300;
}

h1 {
    font-size: 2.5rem;
    font-weight: 700;
}

@media (min-width: 720px) {
    h1 {
        font-size: 3rem;
    }
}

@media (min-width: 1200px) {
    h1 {
        font-size: 3.5rem;
    }
}

h2 {
    font-size: 1.5rem;
    font-weight: 500;
}

h3 {
    font-size: 2.25rem;
    font-weight: 700;
}

header, section, footer {
    padding-left: 24px;
    padding-right: 24px;
}

@media (min-width: 480px) {
    header, section, footer {
        padding-left: 32px;
        padding-right: 32px;
    }
}

@media (min-width: 720px) {
    header, section, footer {
        padding-left: 48px;
        padding-right: 48px;
    }
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}



/*-----HEADER / NAVIGATION-----*/
header {
    background-color: var(--color-neutral-900);
    color: var(--color-neutral-100);
}

nav {
    width: 100%;
    
    padding-top: 24px;
    padding-bottom: 24px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

@media (min-width: 720px) {
    nav {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
    }
}

@media (min-width: 1200px) {
    nav {
        padding-top: 32px;
        padding-bottom: 32px;
    }
}

.nav-links {
    display: flex;
    gap: 24px;

    width: 100%;
}

@media (min-width: 720px) {
    .nav-links {
        gap: 32px;
    }
}

@media (min-width: 720px) {
    .nav-links {
        width: auto;
    }
}

@media (min-width: 1200px) {
    .nav-links {
        gap: 48px;
    }
}

.nav-link:hover {
    text-decoration: underline;
    text-decoration-color: inherit;
    text-underline-offset: 6px;
}

nav svg {
    width: 24px;
    height: 24px;
}



/*-----HERO-----*/
#hero {
    position: relative;

    height: 85vh;

    background-color: var(--color-neutral-900);
    color: var(--color-neutral-700);
}

#hero .content {
    position: absolute;
    top: 12px;
    left: 40px;
    right: 40px;

    color: black;
    filter: invert(1);
    mix-blend-mode: difference;
}

@media (min-width: 480px) {
    #hero .content {
        left: 56px;
        right: 56px;
    }
}

@media (min-width: 720px) {
    #hero .content {
        left: 72px;
        right: 72px;
    }
}

#hero .content p {
    padding-left: 0.1rem;
    
    font-size: 1.125rem;
    font-weight: 200;
}

@media (min-width: 480px) {
    #hero .content p {        
        font-size: 1.125rem;
    }
}

@media (min-width: 720px) {
    #hero .content p {
        font-size: 1.25rem;
    }
}

@media (min-width: 1200px) {
    #hero .content p {
        padding-left: 0.2rem;
        
        font-size: 1.5rem;
    }
}

#hero .hero-video-container {
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    bottom: 48px;

    overflow: hidden;

    background-color: var(--color-neutral-100);
}

@media (min-width: 480px) {
    #hero .hero-video-container {
        left: 32px;
        right: 32px;
    }
}

@media (min-width: 720px) {
    #hero .hero-video-container {
        left: 48px;
        right: 48px;
    }
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 100%;
}

@media (max-aspect-ratio: 16/10.5) {
    .hero-video {
        width: auto;
        height: 100%;
    }
}

.hero-video-overlay {
    position: absolute;
    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.0);
}



/*-----SERVICES-----*/
#services {
    display: flex;
    flex-direction: column;
    gap: 5rem;

    padding-top: 5rem;
    padding-bottom: 8rem;

    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
}

@media (min-width: 1200px) {
    #services {
        gap: 6rem;
    }
}

.services-cards {
    display: flex;
    flex-direction: column;
    gap: 7rem;
}

@media (min-width: 1200px) {
    .services-cards {
        flex-direction: row;
        gap: 5rem;
    }
}

.services-card {
    display: flex;
    flex-direction: column;

    width: 100%;
    height: auto;
}

@media (min-width: 1200px) {
    .services-card {
        height: 440px;
    }
}

.services-number {
    margin-bottom: 1rem;

    font-size: 14px;
    color: var(--color-neutral-500);
}

.services-line {
    width: 100%;
    height: 1px;
    margin-bottom: 1rem;

    background-color: var(--color-neutral-600);
}

@media (min-width: 1200px) {
    .services-line {
        margin-bottom: 2rem;
    }
}

.services-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    margin-bottom: 2rem;
}

.services-content h3 {

}

.services-content p {
    line-height: 1.4;
}

.services-suggestions {
    display: flex;
    flex-direction: column;
    gap: 8px;

    margin-bottom: 2rem;
}

.services-suggestions ul {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;

    padding-left: 15px;
}

.services-suggestions li {
    list-style: circle;

    font-weight: 500;
}

.services-prices {
    display: none;

    margin-top: auto;

    font-size: 1.75rem;
    font-weight: 300;
}

.services-buttons {
    display: flex;

    width: 100%;
    margin-top: 1rem;
}

.services-buttons .button {
    width: 100%;
    max-width: 320px;
    padding: 12px 16px;

    border: 1px solid var(--color-neutral-100);

    cursor: pointer;
}

.services-buttons .button:hover {
    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

.example-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 11;

    /*display is toggled to flex on button press*/
    display: none;
    flex-direction: column;
    gap: 16px;

    width: 60vw;
    padding: 16px;

    background-color: var(--color-neutral-900);
}

.modal-background {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    display: none;

    width: 100%;
    height: 100%;

    background-color: rgba(0, 0, 0, 0.6);
}

.example-modal .close-button {
    position: absolute;
    top: 0;
    right: 0;
    padding: 16px;

    cursor: pointer;
}

.example-modal .close-button svg{
    width: 16px;
    height: 16px;

    fill: var(--color-neutral-100);
}

.example-modal p {
    font-size: 1.5rem;
}

.example-modal p span {
    font-size: 1.25rem;

}

.example-modal .video-container {
    width: 100%;
    height: 100%;

    line-height: 0;
}

.example-modal .video-container video{
    width: 100%;
}

.example-modal .video-container img{
    width: 100%;
}



/*-----ABOUT-----*/
#about {
    position: relative;

    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    padding-top: 3.5rem;
    padding-bottom: 12rem;

    background-color: var(--color-neutral-100);
    color: var(--color-neutral-900);
}

@media (min-width: 720px) {
    #about {
        padding-bottom: 10rem;
    }
}

@media (min-width: 1200px) {
    #about {
        padding-bottom: 7rem;
    }
}

#about .content-wrapper {
    border: 1px solid var(--color-neutral-900);
    padding: 1.5rem 2rem;
}

@media (min-width: 480px) {
    #about .content-wrapper {
        padding: 2rem 4rem;
    }
}

@media (min-width: 720px) {
    #about .content-wrapper {
        padding: 2.5rem 6rem;
    }
}

@media (min-width: 1200px) {
    #about .content-wrapper {
        padding: 3rem 10rem;
    }
}

#about .content-wrapper p {
    line-height: 1.3;
}

@media (min-width: 1200px) {
    #about .content-wrapper p {
        line-height: 1.5;
    }
}

#about .picture-wrapper {
    position: absolute;

    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;

    padding: 8px 8px 16px 8px;

    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
}

#about .picture-wrapper.picture-wrapper-1 {
    bottom: -72px;
    right: 24px;

    transform: rotate(7.5deg);
}

@media (min-width: 720px) {
    #about .picture-wrapper.picture-wrapper-1 {
        bottom: -56px;
        right: 56px;

        transform: rotate(10deg);
    }
}

@media (min-width: 1200px) {
    #about .picture-wrapper.picture-wrapper-1 {
        bottom: -64px;
        right: 96px;

        transform: rotate(10deg);
    }
}

#about .picture-wrapper.picture-wrapper-2 {
    bottom: -24px;
    left: 24px;

    transform: rotate(-5deg);
}

@media (min-width: 720px) {
    #about .picture-wrapper.picture-wrapper-2 {
        bottom: -32px;
        left: 32px;

        transform: rotate(-5deg);
    }
}

@media (min-width: 1200px) {
    #about .picture-wrapper.picture-wrapper-2 {
        bottom: -32px;
        left: 48px;

        transform: rotate(-15deg);
    }
}

#about .picture-wrapper .picture {
    width: 160px;
    height: 160px;

    background-color: var(--color-neutral-500);
}

#about .picture-wrapper .text {
    font-size: 1.375rem;
    font-weight: 400;
}



/*-----PORTFOLIO-----*/
#portfolio {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    padding-top: 3.5rem;
    padding-bottom: 7rem;

    background-color: var(--color-neutral-900);
    color: var(--color-neutral-100);
}

.portfolio-cards {
    display: flex;
    flex-direction: column;
}

.portfolio-card {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    width: 100%;
    height: 25rem;
    padding: 16px 20px;

    color: var(--color-neutral-700);
}

.portfolio-card.das-schwarze-haus {
    background-image: url(https://assets.drohnenjungs.de/images/das_schwarze_haus_front.JPG);
    background-size: 180%;
    background-position-x: 55%;
    background-position-y: 70%;
}

.portfolio-card.die-kleine-acht {
    background-image: url(https://assets.drohnenjungs.de/images/die_kleine_acht/die_kleine_acht_cover.jpg);
    background-size: 130%;
    background-position-x: 55%;
    background-position-y: 60%;
}

.portfolio-card.wista-conventions-flythrough {
    background-image: url(https://assets.drohnenjungs.de/images/wista_conventions/wista_conventions_cover.png);
    background-size: 100%;
    background-position-x: 50%;
    background-position-y: 40%;
}

.portfolio-card .overlay {
    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;
}

.portfolio-card.das-schwarze-haus .overlay {
    background-color: rgba(0, 0, 0, 0.60);
}

.portfolio-card.die-kleine-acht .overlay {
    background-color: rgba(0, 0, 0, 0.73);
}

.portfolio-card.wista-conventions-flythrough .overlay {
    background-color: rgba(0, 0, 0, 0.60);
}

.portfolio-card .content {
    z-index: 1;

    display: flex;
    flex-direction: column;
    gap: 4px;
}

.portfolio-card .content p {
    padding-left: 0.1rem;
}

.portfolio-card .cta {
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 12px 16px;

    border: 1px solid var(--color-neutral-700);
}

.portfolio-card .cta:hover {
    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
}

.portfolio-card .cta .icon svg {
    width: 20px;
    height: 20px;

    fill: var(--color-neutral-700);
}

.portfolio-card .cta:hover .icon svg {
    fill: var(--color-neutral-100);
}



/*-----CONTACT-----*/
#contact {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;

    padding-top: 3rem;
    padding-bottom: 6rem;

    background-color: var(--color-neutral-700);
    color: var(--color-neutral-100);
}

.contact-cards {
    display: flex;
    flex-direction: column;
}

@media (min-width: 720px) {
    .contact-cards {
        flex-direction: row;
    }
}

.contact-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;

    width: 100%;
    padding: 24px 32px;
    
    border-right: 1px solid var(--color-neutral-100);
    border-bottom: 1px solid var(--color-neutral-100);
    border-left: 1px solid var(--color-neutral-100);
}

@media (min-width: 720px) {
    .contact-card {
        border-top: 1px solid var(--color-neutral-100);
        border-right: 1px solid var(--color-neutral-100);
        border-bottom: 1px solid var(--color-neutral-100);
        border-left: none;
    }
}

.contact-card.first {
    border-top: 1px solid var(--color-neutral-100);
}

@media (min-width: 720px) {
    .contact-card.first {
        border-left: 1px solid var(--color-neutral-100);
    }
}

.contact-card p {

}

/*-----FOOTER-----*/
footer {
    display: flex;
    flex-direction: column;

    background-color: var(--color-neutral-100);
}

.footer-cta {
    font-size: calc(16px + 5vw);
    font-weight: bold;
    line-height: 80%;
    color: var(--color-neutral-700);

    padding-top: 4rem;
    padding-bottom: 6rem;
}

@media (min-width: 480px) {
    .footer-cta {
        font-size: calc(16px + 6.6vw);
    }
}

@media (min-width: 720px) {
    .footer-cta {
        font-size: calc(16px + 7.7vw);
    }
}

@media (min-width: 1200px) {
    .footer-cta {
        font-size: calc(16px + 9.2vw);
    }
}

.footer-navigation {
    display: flex;
    flex-direction: column;
    gap: 48px;

    padding-bottom: 16px;
}

@media (min-width: 720px) {
    .footer-navigation {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
}

.footer-navigation .social-items {
    display: flex;
    gap: 12px;
}


.footer-navigation .social-item a {
    display: block;
    width: 100%;
    height: 100%;
}

.footer-navigation .social-item a svg {
    width: 32px;
    height: 32px;
    fill: var(--color-neutral-500);
}



.footer-navigation .navigation-items {
    display: flex;
    gap: 24px;
}

@media (min-width: 480px) {
    .footer-navigation .navigation-items {
        gap: 32px;
    }
}

.footer-navigation .navigation-item {

}

.footer-navigation .navigation-item:hover {
    text-decoration: underline;
    text-decoration-color: var(--color-neutral-600);
    text-underline-offset: 6px;
}

.footer-navigation .navigation-item a {
    font-size: 14px;
    color: var(--color-neutral-500);
}

@media (min-width: 480px) {
    .footer-navigation .navigation-item a {
        font-size: 16px;
    }
}

.horizontal-line {
    width: 100%;
    height: 1px;

    background-color: var(--color-neutral-500);
}

.footer-legal {
    display: flex;
    gap: 24px;

    padding-top: 16px;
    padding-bottom: 24px;

    font-size: 14px;
    color: var(--color-neutral-300);
}

@media (min-width: 480px) {
    .footer-legal {
        gap: 32px;

        font-size: 16px;
    }
}

@media (min-width: 720px) {
    .footer-legal {
        justify-content: flex-end;
    }
}



/*----------------------Subpage: PORTFOLIO----------------------*/
#portfolio-subpage h1 {
    font-size: 3.5rem;
}

#portfolio-subpage h2 {
    font-size: 2.25rem;
}

#portfolio-subpage h3 {
    font-size: 1.5rem;
    font-weight: 500;
}

#portfolio-subpage a {
    text-decoration: underline;
    text-underline-offset: 0.25rem;
}

#portfolio-subpage #banner {
    position: relative;

    width: 100%;
    padding-top: 1rem;
    padding-bottom: 2.5rem;
}

#portfolio-subpage .banner-das-schwarze-haus {
    background-image: url(https://assets.drohnenjungs.de/images/das_schwarze_haus_front.JPG);
    background-position-x: 60%;
    background-position-y: 73%;
    background-size: 140%;
}

#portfolio-subpage .banner-die-kleine-acht {
    background-image: url(https://assets.drohnenjungs.de/images/die_kleine_acht/die_kleine_acht_cover.jpg);
    background-position-x: 60%;
    background-position-y: 50%;
    background-size: 100%;
}

#portfolio-subpage .banner-wista-conventions-flythrough {
    background-image: url(https://assets.drohnenjungs.de/images/wista_conventions/wista_conventions_cover.png);
    background-position-x: 50%;
    background-position-y: 40%;
    background-size: 100%;
}

#portfolio-subpage #banner a,#portfolio-subpage #banner h1,#portfolio-subpage #banner .property-type {
    color: black;
    filter: invert(1);
    mix-blend-mode: difference;
}

#portfolio-subpage #banner h1 {
    margin-top: 11rem;
}

#portfolio-subpage #banner .property-type {
    font-size: 1.25rem;
}

#portfolio-subpage #banner .cover {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

#portfolio-subpage #banner .cover.cover-das-schwarze-haus {
    background-color: rgba(0, 0, 0, 0.6);
}

#portfolio-subpage #banner .cover.cover-die-kleine-acht {
    background-color: rgba(0, 0, 0, 0.72);
}

#portfolio-subpage #overview {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

#portfolio-subpage #overview ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    margin-top: 2rem;
}

#portfolio-subpage #overview ul li  {
    list-style: circle;
    margin-left: 1rem;
}

#portfolio-subpage #overview ul li div {
    margin-bottom: 0.25rem;

    font-size: 1.25rem;
    font-weight: 400;
}

#portfolio-subpage #overview ul li a {
    font-weight: 100;
}

#portfolio-subpage #deliverables {
    padding-left: 0;
    padding-right: 0;
}

#portfolio-subpage #deliverables .deliverable-card {
    width: 60%;
    margin-top: 6rem;
}

#portfolio-subpage #deliverables .deliverable-card h3 {

}

#portfolio-subpage #deliverables .deliverable-card video {
    width: 100%;
    margin-top: 1rem;
}

#portfolio-subpage #deliverables .deliverable-card iframe {
    width: 100%;
    aspect-ratio: 16 / 9;
    margin-top: 1rem;
}

#portfolio-subpage #deliverables .deliverable-card img {
    width: 100%;
    margin-top: 1rem;
}

#portfolio-subpage #deliverables #short-videos,#videografie,#drohnentour {
    padding: 5rem 3rem 5rem 3rem;

    background-color: var(--color-neutral-700);
}

#portfolio-subpage #deliverables #dronetour,#fotografie {
    padding: 5rem 3rem 5rem 3rem;

    background-color: var(--color-neutral-100);
    color: var(--color-neutral-700);
}

#portfolio-subpage #deliverables #dronetour .hide {
    display: none;
}

#portfolio-subpage #feedback {
    display: none;

    background-color: var(--color-neutral-700);
}

#portfolio-subpage #credits {
    padding-top: 4rem;
    padding-bottom: 5rem;
}

#portfolio-subpage #credits ul {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    margin-top: 2rem;
}

#portfolio-subpage #credits ul li {
    list-style: circle;
    margin-left: 1rem;

    font-size: 1.25rem;
    font-weight: 400;
}