/* navigationsbar*/ 
#menu { 
display: flex; 
justify-content: space-around;


}

.menu-list {
display: flex;
list-style-type: none;
gap: 78px;
margin-right: 40px;
justify-content: center;


margin: 0;
padding: 0; 
}

.menu-list a { 
text-decoration: none;
color: black;
font-size: 20px;
white-space: nowrap;
line-height: 1;
display: block;
font-family: 'urbanist', sans-serif;
font-weight: 500;

}

.menu-glas-boks { 
height: 80px;
padding: 0px 45px;
border-radius: 999px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 40px;
z-index: 4;



/* glas looket */
background: rgba(255, 255, 255, 0.35);
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);

/* kant og skygge */
border: 1px solid rgba(255, 255, 255, 0.55);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);

}



/* logo */
#logo-fugl { 
display: block; 
margin-left: 20px;
height: 100px;
}


/*forside hero sektion*/
.hero { 
height: 125vh;
overflow: hidden;
position: relative;
}

.hero-baggrund { 
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 0%;
display: block;
z-index: 0;

}

/*venstre plante billede*/

.venstre-plante { 
position: absolute;
left: -140px;
bottom: 80px;   

width: 680px;
height: auto;

z-index: 3;
pointer-events: 0; /* gør det umuligt at klikke på billedet */
}

/*højre plante billede*/

.hojre-plante { 
position: absolute;
bottom: 0;
right: 0;
left: 49rem;

width: 1700px;
height: auto;

z-index: 3;


}

/* toco toucan navigationsbillede */ 

.toco-toucan { 
position: absolute;
top: 10px;
right: 42rem; 

width: 120px;
height: auto;

z-index: 2;

}

/* forside overskrift */ 

.hero-overskrift { 
position: absolute;
top: 45%;
left: 27%;
transform: 50% -50%;
font-size: 36px; 

text-align: center;
font-weight: 600;
letter-spacing: 2px;
color: #FEC4F0;
text-decoration: 2px 2px 4px rgba(0, 0, 0, 0.3);
font-family: 'urbanist', sans-serif;


z-index: 2;
}



/* indikatoren på navigationsbaren*/ 

.nav-indikator { 
position: absolute;
top: 50%;
transform: translateY(-50%);

width: 44px;
height: 36px;

border-radius: 999px;
background: rgba(255,180,210,0.55);
pointer-events: none;
transition: left 220ms ease, width 220ms ease, opacity 220ms ease;
opacity: 0;
z-index: -1;

}

/* intro siden (om mig) */

.intro { 
padding: 150px 10%;
background-color: #F6F3EE;
/*text-align: center;*/

}

.intro-titel { 
position: relative;
font-family: 'urbanist', sans-serif;
font-weight: 900;
font-size: 200px;
margin-bottom: 10px;
z-index: 2;
}

.toucan { 
position: absolute;
left: 100px;
top: 18px;
width: 150px;
z-index: 1;
}

.jaguar { 
position: absolute;
right: 300px;
top: -160px; 
width: 175px;
z-index: 4;
}


.latin { 
font-family: 'urbanist', sans-serif;
font-weight: 400;
font-size: 96px;
margin-bottom: 60px;
margin-top: -20px;
}

.intro-content { 
display: grid;
grid-template-columns: 1fr 1fr; 
max-width: 1200px;
margin: 0 auto; 
gap: 100px; 
align-items: start;

}

.intro-content p { 
/*margin-bottom: 25px;*/
line-height: 1.61;
font-size: 30px;
letter-spacing: 1.5px;
}

.cta-boks { 
margin-top: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px; 
}

.intro-tekst-hojre .cta-tekst {
font-size: 20px;
font-family: 'inter', sans-serif;
font-weight: 300;
align-self: center;

}



.intro-tekst-venstre { 
min-width: 0;
max-width: 571px;


}

.intro-tekst-hojre { 
min-width: 0;
max-width: 571px;
align-items: center;
text-align: left;

display: flex;
flex-direction: column;



}


.intro-tekst-venstre, .intro-tekst-hojre p { 
font-family: 'inter', sans-serif;
font-weight: 300;

}




.general-knap { 
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
transition: all 0.4s ease;
z-index: 1;

padding: 22px 90px; 
border-radius: 999px;

color: #111; 
text-decoration: none;

font-size: 38px;

font-family: 'urbanist', sans-serif;
font-weight: 500;

background: rgba(255,255,255,0.4);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);

border: 1px solid rgba(255,255,255,0.6);

box-shadow:
    0 25px 40px rgba(0,0,0,0.25),
    inset 0 2px 6px rgba(255,255,255,0.6);


}

.general-knap::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 999px;

    background: radial-gradient(
        120% 100% at 30% 50%,
        #ffc6ea 0%,
        #f6b7dd 45%,
        transparent 75%
    );

    transform: translateX(-120%);
    transition: transform 0.5s ease;
    z-index: 0;
}

/* Hover-effekten */
.general-knap:hover::before {
    transform: translateX(0%);
}

.general-knap span { 
position: relative;
z-index: 2;
}


.intro-header { 
position: relative;
text-align: center;
margin-bottom: 60px;

}

/* projekt siden (på forsiden) */

.projekter { 
padding-top: 80px;
padding-bottom: 0;
font-family: 'urbanist', sans-serif;
margin-bottom: 0;

} 

.projekter-titel { 
padding: 0 6vw;
text-align: center;
font-size: clamp(40px, 5vw, 80px);
margin-bottom: 40px; 
}

/*grid (boks)*/

.projekt-boks { 
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 100%;

}

.projekt-med-tekst, .projekt-uden-tekst {
position: relative;
overflow: hidden;
min-height: 420px;
}

.kaffekanden-tekst-billede,
.kaffekanden-projekt-billede,
.hjertevarme-projekt-billede,
.hjertevarme-tekst-billede,
.havblink-tekst-billede,
.havblink-projekt-billede {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/*glasboks*/
.projekt-glas-boks { 
position: absolute;
inset: 0;

background: linear-gradient(
to bottom,
rgba(255,255,255,0.25),
rgba(255,255,255,0.08)
);



backdrop-filter: blur(0px);
-webkit-backdrop-filter: blur(0px);

border: 1px solid rgba(255, 255, 255, 0.35);
box-shadow: 
inset 0 1px 0 rgba(255, 255, 255, 0.6),
inset 0 -1px 0 rgba(255, 255, 255, 0.15);

pointer-events: none;
}

/*tekst indholdet i projekterne*/

.projekt-content {
position: absolute;
inset: 0;
z-index: 2;
font-family: 'urbanist', sans-serif;
font-weight: 600;

display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;


padding: 60px 48px;
color: #ffffff;
max-width: 500px;
text-align: left;
margin: 0 auto;

}

.projekt-content .general-knap { 
align-self: center;
margin-top: 20px;
}

.projekt-content h3 { 
font-size: clamp(36px, 4vw, 70px);
margin-bottom: 12px;

align-self: center;
text-align: center;
font-family: 'urbanist', sans-serif;
font-weight: 600;
}

.projekt-content p { 
margin-bottom: 16px;
font-family: 'inter', sans-serif;
font-weight: 300;
font-size: 20px;
}

/*læs mere tekst*/ 

.læs-mere-tekst-projekt { 
font-size: 20px;
margin-bottom: 10px;
}

/*knappen i projekterne*/

.projekter .general-knap {
padding: 12px 28px;
font-size: 20px;

width: fit-content;
color: #F6F3EE;
}

.projekt-med-tekst { 
position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.projekt-top {
margin-top: 40px;
max-width: 500px;
text-align: center;

}

.projekt-bottom { 
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
margin-bottom: 40px;
margin-top: 10rem;
}

/* galleri intro side*/ 

.galleri {
position: relative;
width: 100%;
min-height: 120vh;
overflow: hidden;

margin: 0;
padding: 0;

}

.galleri-forside { 
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
z-index: 1;
object-position: center 30%;
}

.galleri-overskrift {
position: absolute;
font-family: 'urbanist', sans-serif;
font-weight: 900;


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

text-align: center;
color:#F6F3EE;

z-index: 2;
inset: 0; 
justify-content: flex-start;
padding-top: 46rem; 

}

.galleri-overskrift h2 { 
font-size: clamp(80px, 12vw, 220px);
font-family: 'urbanist', sans-serif;
font-weight: 900;
margin: 0;
}

.galleri-overskrift .general-knap { 
margin-top: 40px; 
color:#F6F3EE;
box-shadow: #111 0px 25px 40px, rgba(255,255,255,0.6) inset 0px 2px 6px;
}

/* kontakt intro side*/ 

.kontakt-sektion {
position: relative;
overflow: hidden;
min-height: 80vh;
padding: 120px;
background: #F6F3EE;

display: flex;
flex-direction: column;

}

.kontakt-billede-plante {
position: absolute;

right: -50rem;
bottom: -80px; 

width: clamp(600px, 70vw, 1400px);
transform: scale(1.35);
transform-origin: bottom right;
height: auto;

z-index: 1;
pointer-events: none; 

}

.kontakt-indhold { 
position: relative;
z-index: 2;

max-width: 1200px;
display: flex;
flex-direction: column;
flex: 1;
}

.kontakt-indhold h2 { 
font-family: 'urbanist', sans-serif;
font-weight: 900;
font-size: clamp(40px, 4vw, 70px);
margin-bottom: 20px;
}

.kontakt-indhold p { 
font-size: 20px;
margin-bottom: 40px;

font-family: 'urbanist', sans-serif;
font-weight: 900;
font-size: clamp(40px, 4vw, 70px);
}

.kontakt-sektion .general-knap {
position: absolute;
left: 50%;
bottom: 80px;
transform: translateX(-50%);
z-index: 3;
}

.kontakt-billede-abe { 
position: absolute;
left: 130px;
bottom: 310px; 
width: clamp(120px, 10vw, 220px);
height: auto;
z-index: 2;
pointer-events: none;
}


/* OM MIG SIDE */

.om-top { 
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 80vh;

margin-top: 180px;
margin-bottom: 0;
}

/* venstre side */

.venstre-side { 
background-color: #F6F3EE;
padding: 80px 70px;
padding-top: 0px;

display: flex;
flex-direction: column;
justify-content: flex-start;
}

.venstre-side h1 {
margin: 0 0 40px 0; 
font-family: 'urbanist', sans-serif;
font-weight: 600;
font-size: 50px;
line-height: 1.1;
text-align: center;

}

.venstre-side h2 { 
margin: 0 0 16px 0;
font-size: 26px;

font-family: 'urbanist', sans-serif;
font-weight: 400;
}

.venstre-side p { 
margin: 0;
font-size: 18px;

font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;
line-height: 40px;
}

/* højre side */

.hojre-side { 
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
}

.hojre-side img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* træ hylde sektion*/ 

.stort-billede { 
margin: 0;
padding: 0;
}

.stort-billede img {
width: 100%;
display: block;
z-index: 1;
}

/* sidste sektion på om mig siden*/

.kompetencer { 
display: grid;
grid-template-columns: 1fr 1fr 1fr;
background-color: #F6F3EE;
padding: 100px 80px;
}

/*kolonner*/ 

.kolonne h2 { 
text-align:center;
margin-bottom: 60px;
font-size: 34px;
letter-spacing: 2px;

font-family: 'urbanist', sans-serif;
font-weight: 400;
}

/* soft skills*/ 

.liste { 
list-style: none;
padding: 0; 
text-align: center;


font-family: 'inter', sans-serif;
font-weight: 300;
font-size: 25px;


}

.liste li { 
margin-bottom: 70px;
letter-spacing: 1px;

}

/* hard skills */ 

.programmer { 
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
text-align: center;
}

.program img { 
width: 90px;
margin-bottom: 10px;
}

/* interesser */ 

.interesser-grid { 
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
text-align: center;
}

.interesse img { 
width: 70px;
margin-bottom: 10px;
}

.program p { 
font-family: 'inter', sans-serif;
font-weight: 300;
font-size: 15px;
}

.interesse p { 
font-family: 'inter', sans-serif;
font-weight: 300;
font-size: 15px;
}


/* PROJEKTSIDE (kaffekanden) */ 

/* hele sektionen*/ 
.projektside-top { 
padding: 250px 0 60px;
}

/* billedets wrapper*/ 

.projekt-billede-wrap { 
width: min(1200px, 90%);
margin: 0 auto 40px;
}

/* selve billedet*/

.hoved-billede { 
width: 100%;
display: block;
}

/* titel */ 

.projektside-titel { 
text-align: center;
margin: 0;
font-family: 'urbanist', sans-serif;
font-weight: 600;
font-size: 40px;
}

/* info området*/ 

.projektside-info { 
width: min(1200px, 90%);
margin: 40px auto 0;

display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}

/* venstre tekst*/ 

.projektside-venstre p { 
margin: 0 0 10px; 
font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;
line-height: 15px;
font-size: 16px;


}

/* tekstboks højre */ 

.text-box { 
background: #F6F3EE;
width: 100%;
min-height: 190px;
padding: 0 30px 30px;

text-align: left;
font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;
line-height: 30px;
font-size: 16px;
}

.text-box p { 
margin: 0;
margin-top: 0;
}

/* den sorte streg */ 

.projektside-streg { 
width: min(1200px, 90%);
height: 1px;
background-color: #111;
margin: 20px auto 40px;
}

.projektside-hojre { 
align-self: start;
}

.projektside-venstre, .projektside-hojre { 
align-self: start;
}

/* hele sektionen*/ 

.brand-sektion { 
width: min(1200px, 90%);
margin: 140px auto;
display: grid; 
grid-template-columns: 1fr 1fr;
gap: 100px;
align-items: start;
}

/*venstre side - 8 billeder */ 

.brand-grid { 
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}

.brand-grid img { 
width: 100%;
display: block;
}

/* højre side - tekst */ 

.brand-overskrift { 
margin: 0 0 40px 0;
font-size: 30px;
letter-spacing: 2px;
font-family: 'urbanist', sans-serif;
font-weight: 600;
text-align: center;
}

/* tekst boks */ 

.brand-boks { 
min-height: 600px;
padding: 40px; 

font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;
line-height: 30px;
font-size: 16px;
}

.brand-boks p { 
margin: 0;
}


/* infografik sektion*/ 

.infografik-sektion { 
width: min(1200px, 90%);
margin: 100px auto;
}

.infografik-titel { 
text-align: center;
margin-bottom: 60px;
font-family: 'urbanist', sans-serif;
font-weight: 600;
font-size: 30px;
}

.infografik-grid { 
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
}

.infografik-boks { 
width: 100%;
display: block;
}

.infografik-tekst { 
text-align: center;
margin-top: 20px;

font-family: 'inter', sans-serif;
font-weight: 300;
}

/* galleri side */ 

.galleri-side { 
position: relative;
padding-top: 220px;
padding-bottom: 140px;

overflow-x: hidden;


}



.hylde { 
position: relative;
z-index: 1;
padding-bottom: 60px;
width: 100%;

margin: 0 0 50px;
}



.billeder-3 { 
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-end;

width: min(1100px, 90%);
margin: 0 auto;
z-index: 2;
padding: 0 20px; 

gap: clamp(20px, 4vw, 70px);
}

.galleri-billede { 
width: clamp(160px, 20vw, 240px);
height: auto;

position: relative;
transform: translateY(35px); 

}

.trae-hylde { 
position: absolute;
bottom: 0px;
top: 300px;
left: 0;
width: 100%;
z-index: 1;
height: auto;
pointer-events: none;
} 

body.galleri-body { 
    background-image: url("images/baggrundsplante-billede.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

/* kontakt side */

.kontakt-side-ny { 
position: relative;
padding-top: 170px;
padding-bottom: 100px;
overflow: hidden;
}

/* tekst venstre */ 

.kontakt-tekst-ny { 
width: min(900px, 90%);
margin-left: 90px;
margin-right: auto;
position: relative;
z-index: 2;
}

.kontakt-overskrift-ny { 
font-size: 150px;
margin: 0 0 20px;
margin-top: 20px;
margin-bottom: 20px;

font-family: 'urbanist', sans-serif;
font-weight: 900;
}

.kontakt-undertitel-ny { 
font-size: 40px;
margin-bottom: 40px;
font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;

margin-top: 120px;
}

.kontakt-oplysninger-ny { 
line-height: 1.9;
margin-top: 18vh;

font-family: 'inter', sans-serif;
font-weight: 300;
letter-spacing: 1.5px;
}

.kontakt-label-ny { 
font-weight: 600;
margin-bottom: 10px;
}

/* plante billede*/ 

.kontakt-hojre-plante { 
position: absolute;
right: -500px;
top: -40px;
width: 1400px;
max-width: none;
height: auto;
z-index: 1;
pointer-events: none;
}


/* abe */ 

.kontakt-abe-ny { 
position: absolute;
left: 185px;
top: 310px;
width: 100px;
height: auto;
z-index: 3;
pointer-events: none;
}