/* ========================================== */
/* ================= MOBILE ================= */
/* ========================================== */


/* ================================================= */
/* ================= RESET ========================= */
/* ================================================= */

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

html {
    scroll-behavior: smooth;
}

/* ================================================= */
/* ================= BODY ========================== */
/* ================================================= */

body {
    /* Fjerner browserens standard luft */
    margin: 0;

    /* Baggrundsbilleder: hele billedet øverst, udfyldning bagved */
    background-image:
        url(img/krylletpapir2.jpg),
        url(img/krylletpapir2.jpg);

    /* Viser hele billedet og udfylder det hvide område bagved */
    background-size:
        contain,
        cover;

    /* Centrerer baggrunden */
    background-position:
        center,
        center;

    /* Baggrunden gentages ikke */
    background-repeat:
        no-repeat,
        no-repeat;

    /* Standard font */
    font-family: "Barlow Semi Condensed", sans-serif;
}



/* ================================================= */
/* ================= CONTAINER ===================== */
/* ================================================= */

.container {

    /* Luft i siderne */
    padding-left: 40px;
    padding-right: 40px;
}

/* ================================================= */
/* ================= NAVBAR ======================== */
/* ================================================= */

.navbar {
    /* Creme baggrund */
    background-color: #fdf6d8;

    /* Logo til venstre og burger til højre */
    display: flex;
    justify-content: space-between;
    align-items: center;

    /* Gør navbaren lavere */
    padding: 22px 30px;

    /* Luft under navbar */
    margin-bottom: 45px;

    /* Bruges til tape */
    position: relative;
}

/* Tape nederst venstre */
.navbar::before {

    /* Gør pseudo-element synligt */
    content: "";

    /* Tape størrelse */
    width: 60px;
    height: 16px;

    /* Hvid tape */
    background-color: white;

    /* Placering */
    position: absolute;

    /* Nederst venstre hjørne */
    left: -18px;
    bottom: 10px;

    /* Rotation */
    transform: rotate(45deg);
}

/* Tape nederst højre */
.navbar::after {

    /* Gør pseudo-element synligt */
    content: "";

    /* Tape størrelse */
    width: 60px;
    height: 16px;

    /* Hvid tape */
    background-color: white;

    /* Placering */
    position: absolute;

    /* Nederst højre hjørne */
    right: -18px;
    bottom: 10px;

    /* Rotation */
    transform: rotate(-45deg);
}

/* ================================================= */
/* ================= LOGO ========================== */
/* ================================================= */

.logo img {
    /* Logo størrelse på mobil */
    width: 30px;

    margin-left: 10px;
}

/* ================================================= */
/* ================= CHECKBOX ====================== */
/* ================================================= */

/* Skjuler checkbox */
.menu-toggle {

    display: none;
}

/* ================================================= */
/* ================= NAVIGATION ==================== */
/* ================================================= */

.nav-links {
    /* Skjuler almindelig menu på mobil */
    display: none;
}

/* ================================================= */
/* ================= HAMBURGER ===================== */
/* ================================================= */

.hamburger {
    /* Viser burger-menu på mobil */
    display: flex;

    /* Streger under hinanden */
    flex-direction: column;

    /* Afstand mellem stregerne */
    gap: 5px;

    /* Ændrer musen til en hånd når man holder over menuen */
    cursor:pointer;
}

/* De 3 hamburger-streger */
.hamburger span {

    /* størrelsen på hamburger*/
    width: 28px;
    height: 2px;

    margin-right: 10px;

    background-color: #003EC2;
}

/* ================================================= */
/* ================= DROPDOWN MENU ================= */
/* ================================================= */

/* Når checkbox er checked */
.menu-toggle:checked ~ nav .nav-links {

    /* Vis menu */
    display: flex;
}


/* Styling af dropdown */
.nav-links {

    /* Gør menuen frit placerbar i forhold til nærmeste parent med position */
    position: absolute;

    /* Placerer menuen lige under navbaren */
    top: 100%;

    /* Flytter menuens venstre side til 50% af parentens bredde */
    left: 50%;

    /* Gør menuen 50% bred i forhold til parent-elementet */
    width: 50%;

    /* Sætter baggrundsfarven på dropdown-menuen */
    background-color: #fdf6d8;

    /* Placerer links lodret under hinanden */
    flex-direction: column;

    /* Centrerer links vandret inde i menuen */
    align-items: center;

    /* Giver 20px afstand mellem links */
    gap: 20px;

    /* Tilføjer luft over og under linksene */
    padding: 25px 0;

    /* Sørger for at dropdown-menuen ligger ovenpå andre elementer */
    z-index: 20;

    /* Fjerner standard punkttegn (bullet points) fra listen */
    list-style: none;

    /* Tilføjer en synlig kant rundt om menuen */
    border-style: solid;

    /* Gør kantens farve orange */
    border-color: #ffa538;
}

/* ================================================= */
/* ================= LINKS ========================= */
/* ================================================= */

.nav-links a {

    /* Fjerner understregning */
    text-decoration: none;

    /* Blå farve */
    color: #003EC2;

    /* Fed tekst */
    font-weight: bold;

    /* Tekst størrelse */
    font-size: 1.3rem;
}

/* ================================================= */
/* ================= HERO SECTION ================== */
/* ================================================= */

.hero {
    /* Creme baggrund */
    background-color: #fdf6d8;

    /* Tekst og billede ved siden af hinanden */
    display: grid;
    grid-template-columns: 1fr 1fr;

    align-items: center;

    /* Luft indeni boksen */
    padding: 40px 20px;

    /* Luft under hero */
    margin-bottom: 55px;

    /* Bruges til tape */
    position: relative;

    overflow: visible;
}

/* Tape øverst højre */
.hero::before {

    /* skaber et tomt element*/
    content: "";

    /* Tape størrelse */
    width: 80px;
    height: 14px;

    /* Tape farve */
    background-color: white;

    /* Placering */
    position: absolute;

    /* Øverst højre */
    right: -20px;
    top: 10px;

    /* Rotation */
    transform: rotate(45deg);
}

/* Tape nederst venstre */
.hero::after {

    /* skaber et tomt element*/
    content: "";

    /* Tape størrelse */
    width: 80px;
    height: 14px;

    /* Tape farve */
    background-color: white;

    /* Placering */
    position: absolute;

    /* Nederst venstre */
    left: -18px;
    bottom: 10px;

    /* Rotation */
    transform: rotate(45deg);
}

/* ================================================= */
/* ================= HERO TEKST ==================== */
/* ================================================= */

/* Tekstområde i hero-sektionen */
.hero-text {

    /* Placerer tekstboksen i starten (venstre side) af grid-området */
    justify-self: start;

    /* Gør at tekstområdet kan være op til 220% af sin normale bredde */
    max-width: 220%;
}

/* Overskrift i hero-sektionen */
.hero-text h1 {

    /* Gør overskriften orange */
    color: #ffa538;

    /* Sætter skriftstørrelsen til 1.7rem */
    font-size: 1.7rem;

    /* Gør linjeafstanden kompakt */
    line-height: 1;

    /* Giver 20px afstand under overskriften */
    margin-bottom: 20px;

    /* Giver 20px afstand til højre side */
    margin-right: 20px;

    /* Sørger for at ord ikke brydes unaturligt */
    word-break: normal;
}

/* Beskrivende tekst i hero-sektionen */
.hero-text p {

    /* Gør teksten blå */
    color: #003EC2;

    /* Gør teksten lige så bred som parent-elementet */
    width: 100%;

    /* Sætter skriftstørrelsen til 0.75rem */
    font-size: 0.75rem;

    /* Gør teksten fed */
    font-weight: bold;

    /* Giver lidt luft mellem tekstlinjerne */
    line-height: 1.2;

    /* Placerer teksten i starten af grid-området */
    justify-self: start;
}

/* ================================================= */
/* ================= HERO BILLEDE ================== */
/* ================================================= */

.hero-image img {
    /* Billedstørrelse på mobil */
    width: 125px;

    /* Beholder proportionerne */
    height: auto;

    display: block;

    margin-left: 0;
}

.hero-image {
    /* Gør billedets container lige så bred som parent-elementet */
    width: 100%;

    /* Placerer billedet mod slutningen (højre side) af grid-området */
    justify-self: end;

    /* Flytter billedet 5px længere mod højre */
    margin-right: -5px;

}

/* ================================================= */
/* ================= PORTFOLIO GRID ================ */
/* ================================================= */

.portfolio-grid {
    /* Gul/creme baggrund bag alle bokse */
    background-color: #fdf6d8;

    /* Luft inde i den gule sektion */
    padding: 40px 20px;

    /* Luft over sektionen */
    padding-top: 30px;

    /* Luft under sektionen */
    padding-bottom: 30px;

    /* Portfolio i 2 kolonner */
    display: grid;

    /* Portfolio i én kolonne på mobil */
    grid-template-columns: 1fr;

    /* Afstand mellem boksene */
    gap: 20px;

    /* Bruges til tape */
    position: relative;

}




/* ================================================= */
/* ================= TAPE ØVERST HØJRE ============= */
/* ================================================= */

.portfolio-grid::before {

    /* skaber et tomt element*/
    content: "";

    width: 80px;
    height: 16px;

    background-color: white;

    position: absolute;

    /* Placering */
    right: -25px;
    top: 12px;

    /* Rotation */
    transform: rotate(45deg);
}

/* ================================================= */
/* ================= TAPE NEDERST VENSTRE ========== */
/* ================================================= */

.portfolio-grid::after {
    /* skaber et tomt element*/
    content: "";

    width: 80px;
    height: 16px;

    background-color: white;

    position: absolute;

    /* Placering */
    left: -35px;
    bottom: 12px;

    /* Rotation */
    transform: rotate(45deg);
}

/* ================================================= */
/* ================= PORTFOLIO BOKSE =============== */
/* ================================================= */

.portfolio-grid article {
    /* Grå placeholder-baggrund */
    background-color: #d9d9d9;

    /* Højde på billedboksene */
    height: 400px;

    /* Skjuler alt der går udenfor boksen */
    overflow: hidden;

    /* Gør det lettere at placere indhold */
    position: relative;
}

/* Billeder inde i portfolio-bokse */
.portfolio-grid img {
    width: 100%;

    height: 100%;

    /* Får billedet til at fylde boksen pænt */
    object-fit: cover;

    /* Flytter fokuspunktet */
    object-position: center;

    display: block;

    /* SORT/HVID + BLUR + MØRKERE */
    filter: grayscale(100%) blur(0px) brightness(100%);

}

/* Overskrifter inde i portfolio-bokse */
.portfolio-grid h2 {

    /* Gør teksten orange */
    color: #ffa538;

    /* Sætter skriftstørrelsen til 1.8rem */
    font-size: 1.8rem;

    /* Centrerer teksten vandret */
    text-align: center;

    /* Gør overskriften frit placerbar i forhold til nærmeste positionerede parent */
    position: absolute;

    /* Placerer overskriften 50% ned fra toppen */
    top: 50%;

    /* Placerer overskriften 50% ind fra venstre */
    left: 50%;

    /* Flytter teksten tilbage for at centrere den helt præcist */
    transform: translate(-50%, -50%);
}

/* Portfolio-sektionens hovedoverskrift */
.portfolio-grid .portfolio-title {

    /* Giver overskriften normal placering i dokumentflowet */
    position: static;

    /* Fjerner tidligere transform-effekter */
    transform: none;

    /* Nulstiller left-værdien */
    left: auto;

    /* Venstrestiller teksten */
    text-align: left;

    /* Gør teksten orange */
    color: #ffa538;

    /* Sætter skriftstørrelsen til 1.6rem */
    font-size: 1.6rem;

    /* Lader overskriften fylde alle grid-kolonner */
    grid-column: 1 / -1;
}


/* ================================================= */
/* ================= KLIKBART PORTFOLIO CARD ======= */
/* ================================================= */

.portfolio-card {

    /* Gør hele portfolio-boksen klikbar */
    display: block;

    /* Fylder hele article */
    width: 100%;
    height: 100%;

    /* Bruges til at placere h2 ovenpå billedet */
    position: relative;

    /* Fjerner link-streg */
    text-decoration: none;

    /* Smooth animation på overskriften */
    transition: 0.3s ease;
}

/* Gør animation smooth */
.portfolio-card img {

    transition: 0.3s ease;
}

/* Effekt når musen holdes over portfolio-billedet */
.portfolio-card:hover img {

    /* Forstørrer billedet til 105% af dets normale størrelse */
    transform: scale(1.05);
}

/* ================================================= */
/* ================= MODAL BAGGRUND ================ */
/* ================================================= */

.modal {

    /* Modal er skjult som standard */
    display: none;

    /* Ligger fast ovenpå hele skærmen */
    position: fixed;

    /* Fylder hele browser-vinduet */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    /* Mørk gennemsigtig baggrund */
    background-color: rgba(0, 0, 0, 0.4);

    /* Sørger for at modal ligger øverst */
    z-index: 1000;

    /* Luft rundt om boksen */
    padding: 0px;
}



/* Når modalens id bliver aktivt */
.modal:target {

    /* Viser modal */
    display: flex;

    /* Centrerer modal vandret */
    justify-content: center;

    /* Centrerer modal lodret */
    align-items: center;
}



/* ================================================= */
/* ================= MODAL BOKS ==================== */
/* ================================================= */

.modal-box {

    /* Creme baggrund */
    background-color: #fdf6d8;

    /* Bredde på mobil */
    width: 90%;

    /* Maks bredde på større skærme */
    max-width: 1050px;

    /* Maks højde */
    height: 100%;

    /* Scroll inde i modal hvis der er meget tekst */
    overflow-y: auto;

    /* Luft indeni */
    padding: 20px;

}



/* ================================================= */
/* ================= TILBAGE-KNAP ================== */
/* ================================================= */

.modal-back {

    /* Blå tekst */
    color: #003EC2;

    /* Fed tekst */
    font-weight: bold;

    /* Fjerner understregning */
    text-decoration: none;

    /* Tekststørrelse */
    font-size: 1rem;

    /* får det til at aligne med billeder og tekst */
    margin-left: 10px;

    /* Luft under */
    padding-bottom: 20px;

}

/* Når musen holdes over knappen */
.modal-back:hover {

   text-decoration: underline;

    /* Gør overgangen blød */
    transition: 0.3s;
}

/* ================================================= */
/* ================= MODAL OVERSKRIFT ============== */
/* ================================================= */

.modal-box h2 {

    /* Orange overskrift */
    color: #ffa538;

    /* Størrelse */
    font-size: 2rem;

    /* Luft under overskrift */
    margin-bottom: 20px;

    /* får det til at aligne med billeder og tekst */
    margin-left: 10px;

    margin-top: 20px;

}



/* ================================================= */
/* ============ MODAL BILLEDER PLACERING =========== */
/* ================================================= */

.modal-images1 {

    /* Billeder ved siden af hinanden */
    display: grid;

    /* 2 kolonner */
    grid-template-columns: 1fr 1fr;

    justify-items: center;

    /* Luft under billeder */
    margin-bottom: 20px;
}

.modal-images2 {

    /* Billeder ved siden af hinanden */
    display: grid;

    /* 2 kolonner */
    grid-template-columns: 1fr 1fr;

    justify-items: center;

    /* Luft under billeder */
    margin-bottom: 20px;

}

/* Videoer inde i Kunstnær modal */
.modal-images3 {

    /* Videoerne ved siden af hinanden */
    display: grid;

    /* 2 kolonner */
    grid-template-columns: 1fr 1fr;

    /* Luft mellem videoerne */
    gap: 10px;

    /* Centrerer videoerne */
    justify-items: center;

    /* Luft under videoerne */
    margin-bottom: 20px;

    
}


.modal-images4 {

    /* Billeder ved siden af hinanden */
    display: grid;

    /* 2 kolonner */
    grid-template-columns: 1fr 1fr;

    justify-items: center;

    /* Luft under billeder */
    margin-bottom: 20px;
}

.modal-images5 {

     /* Billeder ved siden af hinanden */
    display: grid;

    /* 2 kolonner */
    grid-template-columns: 1fr 1fr;

    justify-items: center;

    /* Luft under billeder */
    margin-bottom: 20px;
}

.modal-images6 {

     /* Gør containeren til et grid-layout */
    display: grid;

    /* Opretter 2 lige brede kolonner */
    grid-template-columns: 1fr 1fr;

    /* Giver 20px afstand mellem elementerne */
    gap: 20px;

    /* Placerer elementerne i toppen af grid-cellerne */
    align-items: start;

    /* Centrerer hele grid-layoutet inde i containeren */
    justify-content: center;

    /* Centrerer indholdet inde i hver grid-kolonne */
    justify-items: center;

    /* Giver 20px afstand under grid-containeren */
    margin-bottom: 20px;
}



/* ================================================= */
/* =============== MODAL BILLEDER STR.============== */
/* ================================================= */

/* Billeder inde i modal1 */
.modal-images1 img {

    /* Fylder kolonnen */
    width: 90%;

    /* billedets faktiske højde */
    height: 350px;

    /* Viser hele billedet */
    object-fit: cover;

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;
}

/* Billeder inde i modal2 */
.modal-images2 img {

/* Fylder kolonnen */
    width: 90%;

    /* højde */
    height: 250px;

    /* Viser hele billedet */
    object-fit:cover;

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;

}

/* Selve videoerne */
.modal-images3 video {

    /* Fylder hver sin kolonne */
    width: 90%;

    /* Beholder proportioner */
    height: 100%;

    object-fit: cover;

    background-color:#ffa538;
}

/* Billeder inde i modal4 */
.modal-images4 img {

    /* Fylder kolonnen */
    width: 90%;

    /* højde */
    height: 350px;

    /* Viser hele billedet */
    object-fit:cover;

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;
}

/* Billeder inde i modal5 */
.modal-images5 img {

     /* Fylder kolonnen */
    width: 90%;

    /* højde */
    height: 350px;

    /* Viser hele billedet */
    object-fit:cover;

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;
}

/* video inde i modal6 */
.modal-images6 video {

    /* Fylder kolonnen */
    width: 90%;

    /* højde */
    height: auto;

    /* Viser hele billedet */
    object-fit:cover;
    

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;
}

/* billede inde i modal6 */
.modal-images6 img {

    /* Fylder kolonnen */
    width: 90%;

    /* højde */
    height: auto;

    /* Viser hele billedet */
    object-fit:cover;

    /* transparent baggrund hvis billedet ikke loader */
    background-color:transparent;
}


/* ================================================= */
/* ================= MODAL TEKST =================== */
/* ================================================= */

.modal-box p {

    /* Brun tekst */
    color: #3D1200;

    /* Typewriter-look */
    font-family: "Roboto Mono", monospace;

    /* Tekststørrelse */
    font-size: 0.9rem;

    /* Linjeafstand */
    line-height: 1.4;

    /* Luft under tekst */
    margin-bottom: 15px;

    padding-left: 10px;

    padding-right: 10px;
}

/* ================================================= */
/* ================= ABOUT SECTION ================= */
/* ================================================= */

.about-section {

    /* Creme baggrund */
    background-color: #fdf6d8;

    /* Luft indeni */
    padding: 40px 20px;

    /* Luft over section */
    margin-top: 65px;

    /* Luft under section */
    margin-bottom: 75px;

    /* Bruges til tape */
    position: relative;
}

/* Tape øverst til venstre */
.about-section::before {

    /* skaber et tomt element*/
    content: "";

    width: 80px;
    height: 14px;

    background-color: white;

    position: absolute;

    left: -15px;
    top: 5px;

    transform: rotate(-35deg);
}

/* Tape nederst til højre */
.about-section::after {
    /* skaber et tomt element*/
    content: "";

    width: 80px;
    height: 14px;

    background-color: white;

    position: absolute;

    right: -15px;
    bottom: 5px;

    transform: rotate(-35deg);
}


/* Overskrift */
.about-section h2 {

    color: #ffa538;

    font-size: 1.6rem;

    margin-top: -20px;

    margin-bottom: 25px;
}

/* Container til tekst + billede */
.about-content {

    display: flex;

    /* Én kolonne på mobil */
    flex-direction: column;

    /* starter indhold til venstre*/
    align-items: flex-start;

    gap: 25px;
}

/* Tekst område */
.about-text {

    width: 100%;
}

/* Tekst styling */
.about-text p {

    color: #3D1200;

    font-family: "Roboto Mono", monospace;

    font-size: 0.8rem;

    line-height: 1.1;

    margin-bottom: 18px;
    
}

/* Portræt billede */
.about-img {

    width: 250px;

    height: auto;

    align-self: center;

    /* order: -1; order: -1; */
    order: -1;
    
}

/* Program ikoner */
.program-icons {

    display: grid;

    /* 5 kolonner */
    grid-template-columns: repeat(5, 1fr);

    /* Luft mellem ikoner */
    gap: 15px;

    /* Venstrestiller */
    justify-items: start;

    margin-top: 25px;
}

/* Ikon størrelse */
.program-icons img {

    width: 35px;

    height: 35px;

    object-fit: contain;
}

/* Logo nederst */
.about-logo {

    width: 45px;

    position: absolute;

    right: 30px;
    bottom: 25px;

    padding-right: 10px;
}



/* ================================================= */
/* ================= KONTAKT SECTION =============== */
/* ================================================= */

.contact-section {

    background-color: #fdf6d8;

    padding: 40px 20px;

    padding-top: 30px;

    padding-bottom: 30px;

    margin-bottom: 85px;

    position: relative;
}

/* Tape nederst venstre */
.contact-section::before {
    /* skaber et tomt element*/
    content: "";

    width: 70px;
    height: 14px;

    background-color: white;

    position: absolute;

    left: -25px;
    bottom: 10px;

    transform: rotate(55deg);
}

/* Tape øverst højre */
.contact-section::after {
    /* skaber et tomt element*/
    content: "";

    width: 70px;
    height: 14px;

    background-color: white;

    position: absolute;

    right: -25px;
    top: 15px;

    transform: rotate(55deg);
}

/* Overskrift */
.contact-section h2 {

    color: #ffa538;

    font-size: 1.6rem;

    margin-bottom: 20px;
}

/* Kontakt container */
.contact-content {

    display: flex;

    /* Én kolonne */
    flex-direction: column;

    gap: 25px;
}

/* Kontakt tekst */
.contact-content > p {

    width: 100%;

    color: #3D1200;

    font-family: "Roboto Mono", monospace;

    font-size: 0.8rem;

    line-height: 1.1;
}

/* Kontakt info */
.contact-info {

    width: 100%;

    /* Gør bokse under hinanden */
    display: flex;

    flex-direction: row;

    /* Centrerer dem vandret */
    align-items: flex-end;

    /* Centrerer hele boks-gruppen i højre side */
    justify-content: center;

    /* 10px mellem bokse */
    gap: 10px;
}

/* Kontakt bokse */
.contact-box {

    /* Gør baggrunden lysegrå */
    background-color: #e6e6e6;

    /* Gør teksten blå */
    color: #003EC2;

    /* Gør teksten fed */
    font-weight: bold;

    /* Sætter skriftstørrelsen til 0.8rem */
    font-size: 0.8rem;

    /* Giver luft inde i boksen (12px top/bund og 15px venstre/højre) */
    padding: 12px 15px;

    /* Afrunder hjørnerne på boksen */
    border-radius: 6px;

    /* Gør boksen kun så bred som dens indhold */
    width: fit-content;

    /* Forhindrer boksen i at blive bredere end parent-elementet */
    max-width: 100%;

    /* Fjerner standard understregning fra links */
    text-decoration: none;

    /* Gør hover- og overgangseffekter bløde over 0.2 sekunder */
    transition: 0.2s;

    /* Gør at boksen kan vokse og dele plads i et flex-layout */
    flex: 1;

}


.contact-box:hover {

    /* Gør baggrunden lidt mørkere ved hover */
    background-color: #d8d8d8;

    /* Forstørrer boksen til 102% af dens normale størrelse */
    transform: scale(1.02);
}



/* ================================================= */
/* ================= FOOTER ======================== */
/* ================================================= */

.footer {

    background-color: #fdf6d8;

    padding: 35px 25px;

    position: relative;

    display: grid;

    /* logo | tekst | sociale medier */
    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 20px;
}

/* Tape venstre */
.footer::before {

    content: "";

    width: 60px;
    height: 14px;

    background-color: white;

    position: absolute;

    left: -20px;
    top: 5px;

    transform: rotate(-55deg);
}

/* Tape højre */
.footer::after {

    content: "";

    width: 60px;
    height: 14px;

    background-color: white;

    position: absolute;

    right: -25px;
    top: 5px;

    transform: rotate(55deg);
}

/* Footer logo */
.footer-logo {

    width: 30px;

}

/* Lokation + kontakt centreres */
.footer-lokationtekst,
.footer-kontakttekst {

    grid-column: 2;

    text-align: center;

    justify-self: center;
}

/* Lokation øverst */
.footer-lokationtekst {

    grid-row: 1;
}

/* Kontakt under */
.footer-kontakttekst {

    grid-row: 2;

    margin-top: 10px;
}

/* Footer tekst */
.footer h3 {

    color: #003EC2;

    font-size: 0.8rem;

    margin: 0;

}



/* Sociale medier */
.socials {

    display: flex;

    /* Gør dem lodrette */
    flex-direction: column;

    /* Luft mellem ikoner */
    gap: 3px;

    /* Skubber dem mod højre */
    margin-left: auto;

    /* Centrerer ikonerne */
    align-items: center;
}


/* Insta ikon */
.lab.la-instagram {

    font-size: 32px;

    color: #003EC2;

    object-fit: contain;

}

/* Linked in ikon */
.lab.la-linkedin {

    font-size: 32px;

    color: #003EC2;

    object-fit: contain;

}

.socials a {

    text-decoration: none;

    color: #003EC2;

    
}

.socials a:hover {

    transform: scale(1.09);
}

.footer-info {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 25px;

    width: 100%;
}

.footer-text {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 30px;

    width: 100%;
}



/* ========================================== */
/* ================= DESKTOP ================ */
/* ========================================== */


@media (min-width: 768px) {

    /* ================================================= */
    /* ================= CONTAINER ===================== */
    /* ================================================= */

    .container {

        padding-left: 100px;
        padding-right: 100px;
    }

    /* ================================================= */
    /* ================= NAVBAR ======================== */
    /* ================================================= */

    .navbar {

        padding: 35px 80px;
    }

    /* Skjuler hamburger */
    .hamburger {

        display: none;
    }

    /* Viser desktop navigation */
    .nav-links {

        display: flex;

        position: static;

        flex-direction: row;

        align-items: center;

        gap: 50px;

        width: auto;

        background-color: transparent;

        border: none;

        padding: 0;
    }

    /* Desktop links */
    .nav-links a {

        font-size: 1.1rem;
    }

    /* Logo større */
    .logo img {

        width: 60px;
    }

    /* ================================================= */
    /* ================= HERO ========================== */
    /* ================================================= */

    .hero {

        padding: 90px 80px;

        margin-bottom: 90px;
    }

   .hero-text h1 {

    font-size: 4rem;

    line-height: 0.95;

    display: inline-block;

    width: 600px;
    }


    .hero-text p {

        font-size: 1.2rem;

        line-height: 1.5;
    }

    .hero-image img {

        justify-self: end;

        width: 350px;

    }

    /* ================================================= */
    /* ================= PORTFOLIO ===================== */
    /* ================================================= */

    .portfolio-grid {

        grid-template-columns: repeat(3, 1fr);

        padding: 90px 80px;
    }

    /* ================================================= */
    /* =============== STØRRE MODAL BILLEDER =========== */
    /* ================================================= */

    .modal {
        padding: 25px;
    }

    .modal-images1 img,
    .modal-images2 img,
    .modal-images4 img,
    .modal-images5 img {

        /* Fylder mere på desktop */
        width: 70%;

        /* Gør billederne større */
        height: 500px;

        /* Beskærer pænt */
        object-fit: cover;
    }

    /* Container */
.modal-images6 {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    justify-items: center;

    align-items: start;

    margin-bottom: 20px;
    }

/* Billede + video samme størrelse */
.modal-images6 img,
.modal-images6 video {

    width: 100%;

    max-width: 380px;

    height: 560px;

    object-fit: cover;

    display: block;
    }
    

    /* Videoer større */
    .modal-images3 video{
        
        width: 70%;

        height: auto;
    }

    /* ================================================= */
    /* ================= ABOUT SECTION ================= */
    /* ================================================= */

    .about-section {

        padding: 90px 80px;
    }

    /* Mere luft mellem tekst og billede */
   .about-content {

    display: grid;

    /* tekst + billede ved siden af hinanden */
    grid-template-columns: 1.5fr 1fr;

    align-items: start;

    /* Tekst først, billede sidst */
    grid-template-areas: 
    "text image";

    gap: 60px;
    
    }

    /* Tekst */
    .about-text {

        grid-area: text;

        width: 100%;
    }

    .about-text p {

        font-size: 1rem;

        line-height: 1.5;
    }

    /* Billede */
    .about-img {

        grid-area: image;

        width: 100%;

        max-width: 360px;

        height: 480px;

        object-fit: cover;

        justify-self: end;
    }

    /* Program ikoner */
    /* Program ikoner desktop */
    .program-icons {

    display: flex;

    flex-wrap: nowrap;

    justify-content: flex-start;

    align-items: center;

    gap: 20px;

    margin-top: 40px;
    }

    /* Større ikoner */
    .program-icons img {

    width: 45px;
    height: 45px;

    object-fit: contain;
    }

    /* ================================================= */
    /* ================= KONTAKT ======================= */
    /* ================================================= */

   .contact-section {
    padding: 60px 40px;

    margin-top: 65px;

    margin-bottom: 75px;
   }
    /* Kontakt layout desktop */
    .contact-content {
    display: grid;

    grid-template-columns: 1.5fr 1fr;

    column-gap: 160px;

    align-items: flex-start;

    padding-left: 40px;
    
    }

    .contact-section h2 {

    padding-left: 40px;
    }

    .contact-content > p {
    width: 100%;

    font-size: 1rem;

    line-height: 1.5;
    }

    .contact-info {
    width: 100%;

    display: flex;

    flex-direction: column;

    align-items: flex-end;

    padding-right: 40px;

    gap: 25px;
    
    }

    .contact-box {
    font-size: 1rem;

    padding: 20px 40px;

    min-width: 240px;

    border-radius: 8px;
    }

    /* ================================================= */
    /* ================= FOOTER ======================== */
    /* ================================================= */



    .footer {
        display: grid;

        grid-template-columns: auto 1fr 1fr auto;

        align-items: center;

        gap: 30px;

        padding: 45px 60px;
    }

    .footer-lokationtekst {
        grid-column: 2;
        grid-row: 1;

        justify-self: start;
        text-align: left;
    }

    .footer-kontakttekst {
        grid-column: 2;
        grid-row: 1;

        justify-self: end;
        text-align: left;

        margin-top: 0;
    }

    .socials {
        grid-column: 4;
        grid-row: 1;

        justify-self: end;
        align-self: center;
    }

    .footer h3 {
        font-size: 1.15rem;
        line-height: 1.5;
        margin: 0;
    }

    /* Sociale medier større */
    .lab.la-instagram,
    .lab.la-linkedin {

        font-size: 50px;
    }

    /* Footer logo */
    .footer-logo {

    width: 60px;

    }

    /* ================================================= */
    /* ================== TAPE ========================= */
    /* ================================================= */

    /* Tape stykker */
    .navbar::before,
    .navbar::after,
    .hero::before,
    .hero::after,
    .portfolio-grid::before,
    .portfolio-grid::after,
    .about-section::before,
    .about-section::after,
    .contact-section::before,
    .contact-section::after,
    .footer::before,
    .footer::after {

        height: 20px;
        width: 85px;
    }
}