/*-----------------------*/
/*========FORSIDE========*/
/*-----------------------*/

* {
    /*nulstiller margin og padding på alle elementer*/
    margin: 0;
    padding: 0;
}


body {
    /*baggrundsfarve for siden*/
    background-color: #FDEEEF;
}



/*navigationslinks*/
.navlinks a {
    text-decoration: none; /*fjerner streger under links*/
    font-size: 18px; /*størrelse på link-tekst*/
    font-family: "Roboto Flex", sans-serif; /*font*/
    color: rgb(255, 255, 255); /*farve*/
    font-weight: 200; /*tykkelse på fonten*/
    position: relative; /*gør linket til forældre for ::after*/
    display: inline-block; /*giver et "felt" hvor stregen kommer*/
}

.navlinks a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px; /*afstand fra tekst*/
    width: 0px; /*start-længde*/
    height: 2px; /*tykkelse på streg*/
    background-color: #FFCBE2; /*farve på streg*/
    transition: width 0.3s ease; /*animation glidende*/
}

.navlinks a:hover::after {
    width: 100%; /*hvad der sker når jeg hover - holder musen over*/
}


/*navigationens container (menu baren)*/
.navbar {
    background-color: #000000; /*farve*/
    height: 130px; /*højde*/
    display: flex; /*aktivere flex layout*/
    align-items: center; /*centrere indholdet lodret*/
    justify-content: space-between; /*space mellem de to elementer*/
    padding: 0 80px;
}

/*str på log*/
.Logo {
    height: 150px;
    width: auto;
    margin-right: 10px;
}

/*indstiller lister (links) - fjerner punkter, laver vandret, afstand*/
.navlinks {
    list-style: none;
    display: flex;
    gap: 50px;
}




/*overskrift*/
.hero-text {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 25px;
    margin-bottom: 30px;
    flex: 1;
    max-width: 550px;
    color: #000000;
}

/*brødtekst*/
.hero-text p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 23px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #000000;
}

.hero {
    display: flex; /*aktivere flex layout*/
    flex-direction: row-reverse;
    justify-content: center;  /* tekst til venstre - billede til højre*/
    align-items: center; /*centrere lodret*/
    padding: 80px 80px; /*luft alle sider*/
    gap: 60px; /*astand mellem tekst og billedet*/
}

/*placering på img forside*/
.hero-image {
    flex: 1; /*tager plads i flexboxen*/
    max-width: 550px;
     width: 100%;
    display: flex; /*gøre container til flexboks-kan styre img placering*/
    justify-content: center; /*centrere vandret*/
    align-items: center; /*centree lodret*/
}

/*img forside*/
.hero-image img { 
    width: 100%; /*tilpas containers bredde*/
    max-width: 480px; /*max str*/
    height: auto; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/

}

.designtext {
    width: 100%;
    text-align: center;
    letter-spacing: 5px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Roboto Flex", sans-serif;
    color: #461021;

}

.signature {
    width: 100%; /*sektion fylder hele bredden*/
    display: flex; /*aktivere flex layout*/
    flex-direction: column; /*placerer linje og logo ovenfor hinanden*/
    align-items: center; /*centrere begge vandret*/
    margin: 120px 0 60px; /*luft over og under*/
}

/*linje*/
.sig-line {
    width: 60%; /*længde på linje*/
    height: 1px; /*tynd linje*/
    background-color: #8C2848;
    margin-bottom: 20px;
}

/*str på logo*/
.sig-logo { 
    height: 100px;
    width: auto;

}

/*bunden af siden*/
.footer { 
    background-color: #000000; /*farve på footer*/
    color: #FDEEEF;
    text-align: center; /*centrere indhold i footer*/
    padding: 40px 0;
    font-family: "Roboto Flex", sans-serif;
    font-weight: 200;
    font-size: 18px;
    margin-top: 120px;
}


/*-----------------------*/
/*======OM MIG SIDE======*/
/*-----------------------*/

/*margin og padding: margin - skubber boksen væk fra andre bokse. 
padding - giver indholdet inde i boksen plads*/

/*placering til overskrift*/
.Om {
    padding: 40px 120px 0;
}

/*overskrift*/
.Om h1 {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 60px;
    color: #000000;
}



.Praesentation {
    padding: 40px 120px;
    max-width: none; /*ikke begrænse bredden og følge skærmen*/
}

/*styling af tekststykke under img*/
.Praesentation p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 25px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 20px; /*luft mellem hver afsnit*/
}

.bold {
    font-weight: 500;
}

/*min baggrund tekststykke-fortæller om uddannelse og erfaring*/
.Baggrund {
    padding: 0 120px;
    max-width: none;
}

.Praesentation h2 {
    margin-top: 20px;
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 40px;
    color: #000000;
}
.Praesentation h3 {
    margin-top: 20px;
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 40px;
    color: #000000;
}


.kompetencer, .kom-section {
    font-family: "Cormorant Garamond", sans-serif;
    padding: 0 120px 0;
    font-size: 22px;
    color: #000000;
    margin-top: 0;
    text-align: center;
}

.kom-tags{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    padding: 40px 120px;
}

.kom-tags span {
    background-color: #412b32;
    color: #fff;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
    cursor: default;
    text-align: center;
}

/*split linje mellem om mig og min baggrund*/
.split-line {
    width: 100%;
    height: 1px;
    background-color: #8C2848;
    margin: 60px auto;
}

.split-line2 {
    width: 100%;
    height: 1px;
    background-color: #8C2848;
    margin: 0;
    padding: 0;
    display: block
}




/*-----------------------*/
/*======PROJEKT SIDE=====*/
/*-----------------------*/

/*projekt menu*/
.projekt-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 40px;
    margin-bottom: 0px;
}

.projekt-menu a {
    padding: 8px 16px;
    background: #8C2848;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-size: 0.9rem;
    font-family: "Roboto Flex", sans-serif;
    transition: 0.2s;
}

.projekt-menu a:hover {
    background: #5d2434;
}

/*placering til overskrift projekt*/
.Projekter {
    padding: 40px 120px 0;
}

/*Seneste projekter*/
.Projekter h1 {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 60px;
    color: #000000;
}

/*brødtekst overskrift produkt fotografering*/
.Pimg1-tekst h2, h3, h4, h5, h6 {
    font-family: "Roboto Flex", sans-serif;
    font-size: 2.5rem;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #000000;
}

/*brødtekst overskrift produkt fotografering*/
.Pimg1-tekst p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 25px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #000000;
}

.Pimg1-tekstboks {
    display: flex; /*aktivere flex layout*/
    flex-direction: row-reverse; /*bytter rundt på elementerne*/
    justify-content: space-between;  /* tekst til venstre - billede til højre*/
    align-items: flex-start; /*placere teksten i flex-startt*/
    padding: 120px 120px; /*luft alle sider*/
    gap: 50px; /*astand mellem tekst og billedet*/
}

.Pimg1-tekstboks > div {
    flex: 1;
}

/*placering på img forside*/
.Pimg1 {
    flex: none; /*tager plads i flexboxen*/
    display: flex; /*gøre container til flexboks-kan styre img placering*/
    justify-content: center; /*centrere vandret*/
    align-items: center; /*centree lodret*/
}

/*img forside*/
.Pimg1 img { 
    width: 100%; /*tilpas containers bredde*/
    max-width: 800px; /*max str*/
    height: auto; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/

}


/*BRUGER JAVASCRIPT*/
/*Gøre siden mere interaktivt altså billedeslideren*/
/*sliderens container - holder alle billeder i samme container*/
.slider {
    position: relative; /*gør muligt at placere pile i boksen*/
    width: 100%; /*fyld hele bredden af pladsen*/
    max-width: 800px; /*slider må ikke blive større end det*/
    overflow: hidden; /*skjuler billederne udenfor rammen*/
    border: 3px solid black;
}

/*alle slides billeder der er skjult*/
.slide {
    display: none; /*img vises ikke før de bliver aktive*/
    width: 100%; /*fylder hele sliderens bredde*/
}

/*den aktive billede som vises*/
.slide.active {
    display: block; /*viser den valgte img*/
}
 /*styling af begge pile*/
.prev, .next {
    position: absolute; /*placere ovenpå slide*/
    top: 50%; /*midt på billede lodret*/
    transform: translateY(-50%); /*centrere præcis*/
    background: rgba(0, 0, 0, 0.4); /*halvtransparent sort baggrund*/
    color: #ffff; /*hvis pil*/
    border: none; /*ingen kant rundt om*/
    font-size: 40px;
    padding: 10px 15px;  
    cursor: pointer; /*viser klik-mus*/
    border-radius: 3px; /*afrundede hjørner*/
}

/*venstre pil*/
.prev {
    left: 10px; /*placere 10px fra v kant*/
}

/*højre pil*/
.next {
    right: 10px; /*placere 10px fra h kant*/
}

/*hover - pilens baggrund bliver mørkere når man holder musen over*/
.prev:hover, .next:hover {
    background-color: rgba(0, 0, 0, 0.6);
}

/*splitlinje mellem projekter*/
.split-line2 {
    width: 100%;
    height: 1px;
    background-color: #000000;
    margin: 60px auto;
}

.projekt-knap {
    display: inline-block;
    padding: 12px 24px;
    background-color: #8C2848;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: "Roboto Flex", sans-serif;
    margin-top: 20px;
    transition: 0.2s;
}

.projekt-knap button:hover {
    background-color: #9a5b79;
}

.figma-knap {
    display: inline-block;
    padding: 12px 24px;
    background-color: #6a1f39;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-family: "Roboto Flex", sans-serif;
    margin-top: 20px;
    transition: 0.2s;
    margin: 40px 120px;
}

.projekt-knap:hover {
    background-color: #6a1f39;
}

.Pfoto-tekst p {
    font-family: "Roboto Flex", sans-serif;
    font-size: 22px;
    line-height: 1.7;
    color: #000000;
    margin-bottom: 10px; /*luft mellem hver afsnit*/
    padding: 40px 120px 0;
}

.rhode-billede {
    max-width: 650px;
    height: 350px;
    display: block;
    margin: 40px 0;
    margin-left: 120px;
    border: 2px solid #000000;
    padding: 0;
}

.insta-video {
    width: 100%;
    height: auto;
    border: 4px solid #000000;
}

.projektbillede {
    border: 4px solid #000000;
    width: 100%; /*tilpas containers bredde*/
    max-width: 800px; /*max str*/
    height: 500px; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/
}

.kontaktimg {
    border: 4px solid #000000;
    width: 100%; /*tilpas containers bredde*/
    max-width: 300px; /*max str*/
    height: auto; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/
}

.kontaktimg1 img { 
    width: 100%; /*tilpas containers bredde*/
    max-width: 400px; /*max str*/
    height: auto; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/

}

.kikoplakat {
    border: 4px solid #000000;
    width: 100%; /*tilpas containers bredde*/
    max-width: 400px; /*max str*/
    height: auto; /*bevarer img form*/
    object-fit: cover; /*fyld plads ud*/
    
}

.ToVopslag {
    width: 100%; /*tilpas containers bredde*/
    max-width: 350px; /*max str*/
    height: auto; /*bevarer img form*/
    display: block;
    
}

.ToVopslagBox {
    border: 4px solid #000000;
    display: inline-block;
    margin-top: 40px;
    margin: 40px 120px 0;
}



.app-projekt h1 {
    font-family: "Cormorant Garamond", sans-serif;
    font-size: 60px;
    color: #000000;
    margin-left: 0;
    padding: 40px 120px 0;
}

.omimg {
    margin-left: 80px;
    margin-top: 40px;
    padding: 40px 40px 0;
}

.om-billede {
    max-width: 650px;
    height: 400px;
    display: block;
    border: 2px solid #000000;
}



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

/*Ydre container til kontaktformularen (sorte boks)*/
.kontakt {
    display: flex; /*gøre container til flexbox - muligt at styre indhold*/
    justify-content: center; /*centrere formularen vandret*/
    padding: 60px 20px; /*luft over, ned, sider*/
}

/*den sorte boks*/
.kontaktform {
    width: 100%; /*fylder hele bredden*/
    max-width: 600px; /*ikke større end 600*/
    background-color: #8C2848;
    padding: 40px; /*luft i boks*/
    border-radius: 12px; /*runde hjørner*/
    text-align: center; /*centrere text*/
}

/*input (tekst til at skrive) og tekstfelt*/
.kontaktform input, .kontaktform textarea {
    width: 100%; /*felterne skal fylde alt plads i boksen*/
    max-width: 500px; 
    margin: 0 auto 20px auto; /*centrere felterne + afstand mellem nedad*/
    padding: 14px 16px; /*luft ind i felterne*/
    font-family: "Roboto Flex", sans-serif;
    font-size: 18px;
    background-color: #fff; /*hvid baggrund inden i felterne*/
    border: 1px solid #fff; /*kant farve*/
    border-radius: 5px;
    outline: none; /*fjerne blå kant i felterne*/
    margin-bottom: 20px;
    display: block; /*sørger for at margin auto virker*/
}

/*send knap*/
.kontaktform button {
    background-color: #fff;
    color: #000000;
    font-family: "Roboto Flex", sans-serif;
    font-size: 20px;
    padding: 14px 22px;
    border: none;
    border-radius: 6px ;
    cursor: pointer; /*hånd (klik mus) når man hover*/
    transition: 0.2s ease; /*glat overgang når farven ændre sig*/
    transition: background-color 0.3s ease, color 0.3s ease;;
}

/*hover effekt på knappen*/
.kontaktform button:hover {
    background-color: #9a5b79; /*mørkere farve*/
    color: #ffffff;
}


/*---------------------------*/
/*========MOBILE FIST========*/
/*---------------------------*/
/*Min layout tilpasses mindre skærm (mobil).
Padding, tekststr og placering ændres = siden er mere brugervenlig på mindre skærme*/

@media (max-width: 1100px) { /*aktiveres på skærme under*/

/* OM MIG – mobil */
.Om,
.Praesentation,
.Baggrund {
    padding: 20px;
}

.Om h1 {
    font-size: 36px;
    text-align: center;
}

.Praesentation p {
    font-size: 18px;
    line-height: 1.6;
}

.om-billede {
    max-width: 100%;
    height: auto;
}

.Pimg1-tekst h1 {
    font-size: 28px;
}

.Pimg1-tekst p,
.Pfoto-tekst p {
    font-size: 18px;
    padding: 20px;
}

.rhode-billede {
    max-width: 100%;
    height: auto;
    margin: 20px auto;
}

.app-projekt h1 {
    font-size: 36px;
    padding: 20px;
}

.kikoplakat {
    max-width: 100%;
    margin: 20px auto;
}

.ToVopslagBox {
    margin: 20px auto;
}

.ToVopslag {
    max-width: 100%;
}


/*billede og tekst placering*/
.hero {
    flex-direction: column-reverse;   /*billede øverst - tekst nederst*/
    padding: 40px 20px; /*mindre lfut på små skærme*/
    gap: 30px; /*afstand mellem elementerne*/
    text-align: center; /*centrere tekst*/
}    

/*teksten ved siden af billede*/
.hero-text {
    font-family: "Cormorant Garamond", sans-serif;
    margin-bottom: 30px;
    flex: 1;
    max-width: none;      /*tillader tekst kan fylde mere*/
    font-size: 22px;      /*mindre font str*/
    padding: 0 10px;      /*luft fra skærmens kanter*/
    color: #000000;
}

.hero-text p {
    text-align: left;
    line-height: 1.5;
}


/*billede ved siden af teksten*/
.hero-image img {
    width: 100%; /*billede fylder bredden*/
    max-width: 90%; /*minus begrænsing*/
    height: auto;
    margin: 0 auto;
    display: block;
}

/*menu*/
.navbar {
    height: auto;
    flex-direction: column; /*menu bliver lodret*/
    padding: 20px;
    gap: 20px;
}

/*menu indhold-links*/
.navlinks {
    gap: 20px;
    margin: 10px 0 0;
}


/*billede om mig */
.om-imgs {
    flex-direction: column; /*billeder under hinanden*/
    align-items: center;
    padding: 20px;
    gap: 20px;
}

.img-box {
    width: 100%;
    max-width: 600px;
    height: auto;
}


/*projekt tekst*/
.Pimg1-tekstboks {
    flex-direction: column-reverse; /*billede over tekst*/
    padding: 40px 20px;
    gap: 20px;
}

.Pimg1 img {
    width: 100%; /*fyld hele bredde*/
    max-width: 100%;
    height: auto;
}

.Projekter {
    padding: 40px 20px 0;
    
}

}