* {
    box-sizing: border-box;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
}

/* tekst generel opsætning */
p {
    margin-bottom: 0.8em;
    line-height: 1.5;
}

h1 {
    font-size: 40px;
    font-weight: 600;
    color: #0A2C4F;
}

h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0A2C4F;
    margin-bottom: 0.8em;
    margin-top: 1.8em;
}

.rubrik {
    font-size: 24px;
    font-weight: 400;
}
/* tekst generel opsætning slut */

/* billede generel opsætning */
main img {
    max-width: 100%;
    grid-column: 1 / -1;
}

.logo {
    padding-top: 5px ;
    width: 48px;
    height: auto;
}

a:focus-visible {
    outline: 3px solid #0A2C4F;
    outline-offset: 4px;
    border-radius: 4px;
}

/* billede generel opsætning slut */

/* grid areas opsætning */
body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 80px 65px 1fr 100px;
    grid-template-areas: 
        "header header header header header header header header header header header header"
        "nav nav nav nav nav nav nav nav nav nav nav nav"
        "main main main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer footer footer ";
    min-height: 100vh;
}

header {
    grid-area: header;
    background-color: #0A2C4F;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 5px;
}

nav {
    grid-area: nav;
    background-color: transparent;
    border-bottom: #0A2C4F solid 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 5px;
    padding-right: 5px;
    color: #0A2C4F;
}

main {
    grid-area: main;
    background-color: white;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
}

footer {
    grid-area: footer;
    background-color: white;
    display: flex;
    justify-content: end;
}
/* grid area opsætning slut */

/* header & nav*/
header p {
    color: white;
    font-size: 12px;
    margin-bottom: 0;
}

.kyst {
    font-size: 20px;
    text-transform: uppercase;
    margin-bottom: 0;
}

nav i {
    font-size: 35px;
    color: #0A2C4F;
}
/*header & nav slut*/

/* sektion 1: Hero */
.hero {
    background-image: url(../img/mu_hero_billede.png);
    width: auto;
    min-height: 70vh;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 40px 60px 60px 1fr 100px 40px;
    position: relative;
    grid-column: 1 / -1;
}

.hero h1 {
    grid-column: 2  / 12;
    grid-row: 2 / 3;
    color: black;
}

.hero h2 {
    grid-column: 3 / 12;
    grid-row: 3 / 4;
    margin-top: 0;
    color: black;
}

.hero p {
    grid-column: 3 / 10;
    grid-row: 5 / 6;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
    color: black;
    filter: drop-shadow(1px 1px 1px white);
}

.heroknap {
    position: absolute;
    z-index: 10;
    bottom: -26px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #0A2C4F;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    padding: 16px 32px;
}

#solution:target {
    outline: 3px solid #0c2462;
    outline-offset: 6px;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}
/* sektion 1: hero slut */

/* sektion 2: problemet */
.problem {
    grid-column: 2 / 12;
    margin-top: 2em;
    margin-bottom: 3em;
}

.problem h2 {
    font-size: 40px;
    margin-bottom: 0.5em;
}

.kort {
    padding-top: 15px;
    padding-bottom: 5px;
    text-align: center;
    margin-top: 10px;
    font-weight: 500;
}

.kortnavn {
    font-size: 24px;
    margin-bottom: 0;
    margin-top: 0;
}

.kortbg {
    background-color: #0A2C4F;
    border-radius: 13px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 35px 15px;
    gap: 30px;
}

.kortbg img {
    height: 55px;
}

.kortbg p {
    font-size: 20px;
    color: white;
    text-align: right;
    font-weight: 400;
}
/* sektion 2: problemet slut */

/* sektion 3: vaske hår */
.vaske {
    background-image: url(../img/mand_vasker_haar.png);
    width: 100%;
    height: 500px;
    background-size: cover;
    grid-column: 1 / -1;
}

.vaske p {
    text-align: center;
    padding-top: 15px;
    font-weight: 500;
}
/* sektion 3: vaske hår slut */

/* sektion 4: postionering */
.position {
    grid-column: 2 / 12;
}
/* sektion 4: postionering slut */

/* sektion 5: løsningen */
.solution {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin-bottom: 2.5em;
    margin-top: 1.5em;
}

.aktivt {
    background-image: url(../img/aktiv_kul_shampoo_landskab.png);
    width: 100%;
    min-height: 50vh;
    background-size: cover;
    background-position: top;
    grid-column: 1 / -1;
    padding-top: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    align-content: start;
}

.aktivt h2 {
    grid-column: 2 / 12;
    margin-top: 0.8em;
    margin-bottom: 0.3em;
    color: black;
}

.aktivt p {
    grid-column: 4 / 12;
    text-align: right;
}

.so-indhold {
    grid-column: 2 / 12;
    margin-top: 1.8em;
}

.knap {
    background-color: #0A2C4F;
    color: white;
    text-decoration: none;
    border-radius: 30px;
    padding: 16px 32px;
    display: block;
    margin: 2em auto 0;
    text-align: center;
    width: fit-content;
}
/* sektion 5: løsningen slut*/

.vask {
    grid-column: 1 / -1;
}

.vask img {
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: 70% center;
}

/* sektion 6: grunden til det virker */

.virker {
    grid-column: 2 / 12;
    margin-bottom: 2.5em;
}

.kortbg2 {
    background-color: #0A2C4F;
    border-radius: 13px;
    padding: 35px 15px;
}

.kortbg2 p{
    font-size: 20px;
    color: white;
    text-align: left;
}
/* sektion 6: grunden til det virker slut*/

/* sektion 7: social proof */
.proof {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2em;
}

.proof h2 {
    grid-column: 1 / -1;
}

.trust {
    grid-column: 1 / 2;
    font-size: 18px;
    font-weight: 400;
    
}

.rating {
    grid-column: 2 / 3;
    text-align: center;
}

.score {
    font-size: 40px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 0;
}

.review {
    grid-column: 1 / 3;
    border: 1px solid #0A2C4F;
    border-radius: 30px;
    padding: 25px 10px;
}

.erik {
    font-weight: 100;
    font-size: 16px;
    font-style: italic;
}

.silber {
    font-weight: 600;
    text-align: right;
    font-size: 16px;
    font-style: italic;
}

/* sektion 7: social proof slut */

/* sektion 8: afsender */
.afsender {
    grid-column: 2 / 12;
    margin-bottom: 2.5em;
}

.afsender a {
    display: block;
    font-weight: 600;
    text-align: right;
}

/* sektion 8: afsender slut */

/* sektion 9: vidensbro */
.vidensbro {
    grid-column: 2 / 12;
}

.vidensbro h2 {
    margin-top: 1.5em;
}

.vidensbro a {
    display: block;
    font-weight: 600;
    text-align: right;
}

.baggrund {
    background-color: #0A2C4F;
    border-radius: 13px;
    padding: 35px 15px;
    margin-bottom: 2em;
}

.baggrund p {
    color: white;
    font-size: 20px;
    text-align: right;
}

.baggrund i {
    color: white;
    font-size: 30px;
}

.underover {
    display: flex;
    justify-content: space-between;
}

.underover p {
    font-size: 24px;
    font-weight: 700;
}

/* sektion 9: vidensbro slut*/

/* sektion 10: bloggen, relateret viden */
.blog {
    grid-column: 2 / 12;
}
/* sektion 10: bloggen, relateret viden slut */

/* sektion 11: cta */
.cta {
    grid-column: 2 / 12;
}

.center {
    text-align: center;
    margin-top: 2.5em;
}

/* sektion 11: cta slut */

footer img {
    height: 110px;
    width: auto;
}

/*desktop*/

@media (min-width: 769px){

*{
    font-size: 18px;
}

h1 {
    font-size: 44px;
}

h2 {
    font-size: 32px;
}

body {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 100px 100px 1fr 100px;
    grid-template-areas:
        "header header header header header header header header header header header header "
        "nav nav nav nav nav nav nav nav nav nav nav nav "
        "main main main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer footer footer ";
}

/* header & nav  */
header {
    grid-area: header;
    background-color: #0A2C4F;
    padding-left: 30px;
    padding-right: 30px;
}

header p {
    font-size: 16px;
}

.logo {
    width: 75px;
    height: auto;
}

nav {
    grid-area: nav;
    padding-left: 30px;
    padding-right: 30px;
}

.kyst {
    font-size: 30px;
}

nav i {
    font-size: 42px;
}
/* header & nav slut */

/* sektion 1 hero */
.hero {
    background-image: url(../img/forside_billede_desktop.png);
    min-height: 80vh;
    width: 100%
}

.hero p {
    font-size: 28px;
    grid-column: 3 / 12;
    grid-row: 4 / 5 ;
    font-weight: 400;
    text-align: right;
}

.heroknap {
    font-size: 24px;
}
/* sektion 1 hero  slut*/

/* sektion 2 problem*/

.problem {
    grid-column: 2 / 12;
    margin-top: 2em;
    margin-bottom: 3em;
}

.box {
    display: flex;
    gap: 1.5em;
    align-items: end;
    justify-content: center;
}

.kortbg {
    gap: 0.1em;
}
/* sektion 2 problem slut*/

/* sektion 3 vaske */
.vaske p {
    font-size: 20px;
    margin-top: 0.5em;
}
/* sektion 3 vaske slut*/

/* sektion 4 position*/
.position div {
    margin-top: 1.5em;
}
/* sektion 4 position slut*/

/* sektion 5 solution */
.aktivt {
    min-height: 60vh;
    background-position: bottom;
}
/* sektion 5 solution slut*/

.vask {
    grid-column: 1 / -1;
    height: 60vh;
    overflow: hidden;
}

.vask img {
    aspect-ratio: initial;
    object-fit: cover;
    object-position: center;
}

/* sektion 6 virker*/
.kortbg2 {
    min-height: 180px;
    max-width: 370px;
    display: block;
    align-items: center;
    padding-bottom: 10px;
}
/* sektion 6 virker slut*/

/* sektion 7 proof*/
.proof {
    grid-column: 2 / 12;
    display: grid;
    grid-template-columns: 50% auto;
}

.trust {
    grid-column: 1 / 2;
    text-align: center;
}

.rating {
    grid-column: 1 / 2;
}

.review {
    grid-column: 2 / 3;
}
/* sektion 7 proof slut*/

/* sektion 8 afsender*/
.afsender div {
    margin-top: 1.5em;
}

.afsender a {
    font-size: 20px;
}
/* sektion 8 afsender slut*/

/* sektion 9 vidensbro*/
.vidensbro a {
    font-size: 20px;
}
/* sektion 9 vidensbro slut*/

/* sektion 10 blog*/
.baggrund {
    min-height: 180px;
    max-width: 370px;
    padding: 10px;
}
/* sektion 10 blog slut*/

/* sektion 11 cta*/
/* sektion 11 cta slut*/










}