:root {
  --text-color: #191919;
  --xs-font-size: 15px;
  --s-font-size: 20px;
  --m-font-size: 40px;
  --xl-font-size: 95px;
  --hero-text-color: #eadcbd;
  --secondary-color: #B8CADB;
  --primary-color: #FBFAF3;
  --font-family: 'roboto', sans-serif;
  --p-font-weight: 200;
  --h-font-weight: 700;
}

@import url("https://fonts.google.com/share?selection.family=Roboto:ital,wght@0,100..900;1,100..900");

/* -----------------------------Header--------------------------- */
.navbar {
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1450px;
  display: flex;
  justify-content: space-between;
  z-index: 100;
  padding: 18px 45px;


  background: linear-gradient(
    to bottom,
    rgba(255,255,255,.88),
    rgba(255,255,255,.55),
    rgba(255,255,255,0)
  );

  box-shadow:
  0 10px 35px rgba(0,0,0,0.15),
  0 4px 10px rgba(0,0,0,0.08);
    

}

.navbar-links {
  display: flex;
  align-items: center;
  gap: 150px;
  font-size: var(--s-font-size);
  margin-right: 80px;
  font-family: var(--font-family);
  font-weight: var(--p-font-weight);
  
}

.navbar-links li {
  list-style: none;
  display: flex;
}

.navbar-links li a {
  text-decoration: none;
  color: var(--text-color);
  position: relative;
}

.navbar-links li a:hover {
  cursor: pointer;
  
}

.logo img {
  width: 150px;
  height: auto;
  display: block;
}


.navbar-links a {
    position: relative;
    text-decoration: none;
    color: #000;
}

/* Streg under den aktive side */
.navbar-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 0;
    height: 2px;
    background: #c7b895;
    transition: width 0.3s ease;
}

/* Hover */
.navbar-links a:hover::after {
    width: 100%;
}

/* Aktiv side */
.navbar-links a.active::after {
    width: 100%;
}
/* =========================
   MOBIL
========================= */

@media (max-width: 768px) {

    .navbar {
        padding: 15px 20px;
    }

    .logo img {
        width: 105px;
    }

    .navbar-links {
        gap: 25px;
        margin-right: 0;
        font-size: 14px;
    }

    .navbar-links a::after {
        bottom: -5px;
        height: 1.5px;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    .navbar {
        padding: 16px 30px;
    }

    .logo img {
        width: 125px;
    }

    .navbar-links {
        gap: 60px;
        margin-right: 30px;
        font-size: 16px;
    }

    .navbar-links a::after {
        bottom: -7px;
    }
}

/* -----------------------------Hero--------------------------- */
body{
  background-color: var(--primary-color);
}


.hero {
  padding-top: 100px;
}

.hero-text {
  position: relative;
  text-align: center;
  margin-top: 150px;
  font-size: var(--xl-font-size);
  font-family: var(--font-family);
  
}

.hero-fill,
.hero-stroke {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  
}

.hero-fill {
  z-index: 1;
  text-shadow: #191919 0px 0px 10px;
  color: var(--hero-text-color);
}

.hero-stroke {
  z-index: 3;
  color: transparent;
  -webkit-text-stroke: 1px var(--hero-text-color);
}

.hero-image {
  display: block;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  height: auto;
  width: 500px;
  top: -150px;
  
}

.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 890px;
  z-index: -1;
}

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

.hero-intro,
.hero-description {
    position: absolute;
    z-index: 4;
    font-family: var(--font-family);
    font-size: var(--s-font-size);
    font-style: italic;
    font-weight: var(--p-font-weight);
    color: var(--text-color);
}


/* Venstre tekst */

.hero-intro {
    top: 205px;
    left: 9%;
}


/* Højre tekst */

.hero-description {
    top: 440px;
    right: 2%;
    line-height: 1.8;
}

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

/* Beige tekst kommer først */
.hero-fill {
    opacity: 0;
    animation: fillIn 1s ease-out forwards;
}


/* Billedet kommer bagefter */
.hero-image {
    opacity: 0;
    animation: imageIn 1s ease-out 0.5s forwards;
}


/* Stroke kommer til sidst ovenpå billedet */
.hero-stroke {
    opacity: 0;
    animation: strokeIn 0.8s ease-out 1.4s forwards;
}


/* =========================
   KEYFRAMES
========================= */

@keyframes fillIn {
    from {
        opacity: 0;
        transform: translateY(60px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes imageIn {
    from {
        opacity: 0;
        transform: translateY(80px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes strokeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* =========================
   SORT TEKST ANIMATION
========================= */

.hero-intro,
.hero-description {
    opacity: 0;
    animation: textIn 0.8s ease-out forwards;
}

.hero-intro {
    animation-delay: 1.2s;
}

.hero-description {
    animation-delay: 1.6s;
}


@keyframes textIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}



/* =========================
   MOBIL
========================= */
@media (max-width: 768px) {

    .hero-intro,
    .hero-description {
        display: none;
    }

    .hero {
        padding-top: 80px;
        min-height: 600px;
    }

    .hero-text {
        margin-top: 90px;
        font-size: 50px;
    }

    .hero-image {
        width: 280px;
        top: -60px;
    }

    .hero-bg {
        height: 600px;
    }
}
/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    .hero {
        padding-top: 90px;
    }

    .hero-text {
        margin-top: 120px;
        font-size: var(--l-font-size);
    }

    .hero-image {
        width: 400px;
        top: -110px;
    }

    .hero-bg {
        height: 750px;
    }

}

/* -----------------------Projects Section------------------------- */

.all-projects-btn a {
  font-size: var(--s-font-size);
  text-decoration: none;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 250px;
  box-sizing: border-box;
  position: relative;
  padding: 24px 30px;
  border-radius: 25px;
  background-color: var(--secondary-color);
  margin: 100px auto;
  font-weight: var(--p-font-weight);
  font-family: var(--font-family);
  text-align: center;
}

.all-projects-btn a:hover {
  
  background-color: #6587a7;
  
}

.project-text h3{
  font-family: var(--font-family);
  font-size: var(--m-font-size);

}

.project-text h4 {
  margin-top: -100px;
}

.project-text {
  text-align: center;
}

h4 {
  color: #6587a7;
  font-family: var(--font-family);
  font-weight: var(--h-font-weight);
  letter-spacing: 3px;
  text-align: center;
}

.all-projects {
  margin-top: 0;
}



/* -----------------------Programs Section------------------------- */

.programs-section {
  background-color: #B8CADB;
  padding-top: 30px;
  padding-bottom: 1px;
}

.programs-section h2 {
  text-align: center;
  font-size: var(--m-font-size);
  margin-bottom: 60px;
  font-family: var(--font-family);
 
}

.programs ul {
  display: flex;
  gap: 50px;
  list-style: none;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family);
  
}

.programs h3 {
  font-weight: var(--p-font-weight);
}

.programs li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  
}

.programs img {
  display: block;
  margin: 0 auto;
  width: 50px;
  height: 50px;
}

.program-logo {
  border-radius: 8px;
}

/* skills */
.skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    background-color: var(--secondary-color);

    width: 100%;
    padding-bottom: 40px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 5px;
    box-sizing: border-box;
}

.skills-card {
    background: #fff;

    border: 1px solid #e8e8e8;
    border-radius: 20px;

    
    padding-left: 65px;
    padding-top: 20px;
    padding-bottom: 10px;

    min-height: 300px;

    box-sizing: border-box;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
}

.skills-header {
    display: flex;
    align-items: center;

    gap: 35px;

    margin-bottom: 35px;
}

.skills-header h3{
  font-family: var(--font-family);
  font-weight: var(--h-font-weight);
  font-size: var(--s-font-size);
  color: var(--text-color);
}

.skills-icon {
   height: auto;
   width: 60px;

    display: flex;
    align-items: center;
    justify-content: center;
    
}

.skills-list {
    display: grid;
    grid-template-columns: 1fr 1fr;

    column-gap: 45px;
}

.skills-list ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.skills-list li {
    position: relative;

    padding-left: 38px;

    margin-bottom: 25px;

    font-size: var(--xs-font-size);
    font-family: var(--font-family);
    font-weight: var(--p-font-weight);
    line-height: 1.4;

    color: var(--text-color);
}

.skills-list li::before {
    content: "✓";

    position: absolute;

    left: 0;
    top: 1px;

    width: 25px;
    height: 25px;

    border: 2px solid #75a6ce;
    border-radius: 50%;

    color: #75a6ce;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 15px;
    font-weight: 600;

    box-sizing: border-box;
}

/* Animation */
/* -----------------------
   PROGRAMS ANIMATION
------------------------- */

/* H4 starter usynlig */
.programs-section h4 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}


/* H2 starter usynlig */
.programs-section h2 {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}


/* H4 kommer ind først */
.programs-section.programs-visible h4 {
    opacity: 1;
    transform: translateY(0);
}


/* H2 kommer ind bagefter */
.programs-section.programs-visible h2 {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.2s;
}


/* Programmerne */
.programs-section .programs li {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}


/* Programmerne bliver synlige */
.programs-section.programs-visible .programs li {
    opacity: 1;
    transform: translateY(0);
}


/* Ét program ad gangen */
.programs-section.programs-visible .programs li:nth-child(1) {
    transition-delay: 0.4s;
}

.programs-section.programs-visible .programs li:nth-child(2) {
    transition-delay: 0.5s;
}

.programs-section.programs-visible .programs li:nth-child(3) {
    transition-delay: 0.6s;
}

.programs-section.programs-visible .programs li:nth-child(4) {
    transition-delay: 0.7s;
}

.programs-section.programs-visible .programs li:nth-child(5) {
    transition-delay: 0.8s;
}

.programs-section.programs-visible .programs li:nth-child(6) {
    transition-delay: 0.9s;
}

.programs-section.programs-visible .programs li:nth-child(7) {
    transition-delay: 1s;
}

.programs-section.programs-visible .programs li:nth-child(8) {
    transition-delay: 1.1s;
}

/* =========================
   SKILLS CARDS
========================= */

.skills-card {
    opacity: 0;
    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}


/* Første kort kommer fra venstre */
.skills-card:first-child {
    transform: translateX(-70px);
}


/* Andet kort kommer fra højre */
.skills-card:last-child {
    transform: translateX(70px);
}


/* Når skills-sektionen bliver synlig */

.skills-visible .skills-card {
    opacity: 1;
    transform: translateX(0);
}


/* Lille forskydning mellem kortene */

.skills-visible .skills-card:first-child {
    transition-delay: 0.1s;
}

.skills-visible .skills-card:last-child {
    transition-delay: 0.3s;
}
/* =========================
   MOBIL
========================= */

@media (max-width: 768px) {

    /* PROGRAMS */

    .programs-section {
        padding-top: 20px;
        padding-bottom: 10px;
    }

    .programs-section h2 {
        font-size: var(--m-font-size);
        margin-bottom: 35px;
    }

    .programs ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35px 20px;
        padding: 0 25px;
    }

    .programs li {
        width: 100%;
    }

    .programs img {
        width: 45px;
        height: 45px;
    }

    .programs h3 {
        font-size: var(--xs-font-size);
        margin-bottom: 5px;
    }


    /* SKILLS */

    .skills {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 5px 20px 30px;
    }

    .skills-card {
        width: 100%;
        min-height: auto;
        padding: 25px 25px 15px;
    }

    .skills-header {
        gap: 18px;
        margin-bottom: 25px;
    }

    .skills-header h3 {
        font-size: var(--s-font-size);
    }

    .skills-icon {
        width: 45px;
    }

    .skills-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .skills-list li {
        padding-left: 32px;
        margin-bottom: 18px;
        font-size: var(--xs-font-size);
        line-height: 1.4;
    }

    .skills-list li::before {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

}
/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    /* PROGRAMS */

    .programs-section {
        padding-top: 25px;
        padding-bottom: 5px;
    }

    .programs-section h2 {
        font-size: var(--m-font-size);
        margin-bottom: 45px;
    }

    .programs ul {
        gap: 35px;
        padding: 0 20px;
    }

    .programs img {
        width: 45px;
        height: 45px;
    }


    /* SKILLS */

    .skills {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
        padding: 5px 25px 35px;
    }

    .skills-card {
        padding: 25px 30px 15px;
        min-height: 280px;
    }

    .skills-header {
        gap: 20px;
        margin-bottom: 25px;
    }

    .skills-header h3 {
        font-size: var(--s-font-size);
    }

    .skills-icon {
        width: 50px;
    }

    .skills-list {
        column-gap: 25px;
    }

    .skills-list li {
        padding-left: 32px;
        margin-bottom: 20px;
        font-size: var(--xs-font-size);
    }

    .skills-list li::before {
        width: 22px;
        height: 22px;
        font-size: 13px;
    }

}

/* ---------------------Footer----------------------- */
footer {
  background-color: var(--secondary-color);
 
}

/* ------------------projekter.html-------------------- */
.project-hint {
    position: absolute;
    top: 25px;
    right: 350px;
    display: flex;
    align-items: center;
    margin-top: 100px;
}

.project-arrow {
    width: 110px;
    transform: rotate(20deg);
   padding-top: 40px;
   margin-left: -40px;
}

.project-hint p {
    font-size: var(--xs-font-size);
    font-family: var(--font-family);
    font-weight: var(--h-font-weight);
    color: #75a6ce;
    font-style: italic;
    line-height: 1.25;
    width: 170px;
    margin: 0;
}

@media (max-width: 768px) {
    .project-hint,
    .project-hint-1,
    .project-hint-3 {
        display: none;
    }
}

/* ----------- */

.my-projects {
  position: relative;
  font-size: var(--m-font-size);
  text-align: center;
  margin-top: 200px;
  font-family: var(--font-family);
  font-weight: var(--h-font-weight);
}

.all-projects {
  
    display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 35px;
  max-width: 1400px;
  margin: 0 auto;
  margin-top: 80px;
  box-sizing: border-box;
  margin-bottom: 100px;
}

.all-projects p {
  font-size: var(--xs-font-size);
  font-family: var(--font-family);
  font-weight: var(--p-font-weight);
  
}

.all-projects a{
  color: var(--text-color);
  text-decoration: none;
  font-weight: 800;
  font-family: var(--font-family);
}



/* ------------------ skærmene-------------------------- */
/* projekt 1 */
.ipad {
  position: relative;
  width: fit-content;
  height: 250px;
  margin: 0 auto;
}

.ipad-img {
  display: block;
  height: 250px;
  width: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.screen-video-3 {
  position: absolute;
  top: 1px;

  width: 100%;
  height: 250px;

  object-fit: cover;
  border-radius: 30px;
  z-index: 1;
}

/* projekt 2 */
.laptop {
  position: relative;
  width: fit-content;
  height: 250px;
  width: auto;
  margin: 0 auto;
}

.pc-img {
  display: block;
  height: 250px;
  width: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.screen {
  position: absolute;
  top: 4%;
  left: 10%;
  width: 80%;
  height: 90%;
  z-index: 1;
}

.screen-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* projekt 3 */
.touch {
  position: relative;
  width: fit-content;
  height: 350px;
  margin: 0 auto;
}

.touch-img {
   display: block;
  height: 350px;
  width: auto;
  position: relative;
  z-index: 2;
  pointer-events: none;
}

.screen-video-2 {
   position: absolute;
  top: -8px;
  left: -29px;

  width: 317px;
  height: 220px;

  object-fit: cover;
  border-radius: 18px;
  z-index: 1;
}

/* ----------------------- "cards"------------------- */
/* Selve boksene */
.ovartaci-project-1,
.haze-project-2,
.nord-project-3 {
  
   width: 450px;
  height: 620px;

  background: #fff;

  border: 1px solid #e5e5e5;
  border-radius: 20px;

  padding: 25px;
  box-sizing: border-box;

  display: flex;
  flex-direction: column;

  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);

  transition: transform 0.3s ease,
              box-shadow 0.3s ease;
  

  
}

/* Hover på hele projektboksen */
.ovartaci-project-1:hover,
.haze-project-2:hover,
.nord-project-3:hover {
  transform: translateY(-6px);

  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.product-ovartaci,
.product-haze,
.product-nord {
  height: 350px;
 

  display: flex;
  justify-content: center;
  align-items: center;

  margin-bottom: 15px;

  flex-shrink: 0;
}

.ovartaci-project-1 > a:last-child,
.haze-project-2 > a:last-child,
.nord-project-3 > a:last-child {
    margin-top: auto;
}



/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

  .all-projects {
    grid-template-columns: 1fr 1fr;
  }

}


/* =========================
   MOBIL
========================= */

@media (max-width: 700px) {

  .all-projects {
    grid-template-columns: 1fr;
    padding: 30px 20px;
    
  }

  .project-text {
    padding-top: 50px;
  }

  .product-ovartaci,
  .product-haze,
  .product-nord {
    height: 300px;
  }

  .touch {
    transform: scale(0.8);
  }

}


/* --------------------------Kontakt---------------------------- */

.contact-body {
  margin-top: 150px;
}

.contact-img {
    width: auto;
    height: 420px;
    object-fit: cover;
    margin-top: -30px;
}

.contact-body {
  background-color: var(--secondary-color);
}

.contact-header h2{
  font-family: var(--font-family);
  font-weight: var(--h-font-weight);
  font-size: var(--m-font-size);
  text-align: center;
  margin-bottom: 30px;
  margin-top: 40px;
}

.contact-header p {
  font-family: var(--font-family);
  font-weight: var(--p-font-weight);
  font-size: var(--xs-font-size);
  text-align: center;
  
}

.contact-header h2:after{
    content: "";
    display: block;
    width: 38px;
    height: 3px;
    background-color: var(--hero-text-color);
    margin: 12px auto 0;
    border-radius: 2px;
}

.contact-header h4 {
  margin-bottom: -20px;
}

.contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;

    gap: 18px 70px;

    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 60px;

    box-sizing: border-box;
}


/* BILLEDE */
.contact-img {
    width: auto;
    height: 470px;
    object-fit: contain;

    grid-column: 1;
    grid-row: 1 / 4;

    justify-self: center;
}


/* CARDS */
.contact-cards {
    display: grid;
    grid-template-columns: 65px 1fr;
    grid-template-rows: auto auto;

    align-items: center;

    width: 100%;
    min-height: 105px;

    padding: 20px 30px;

    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 16px;

    box-sizing: border-box;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.contact-cards a {
  font-family: var(--font-family);
  color: var(--text-color);
  text-decoration: none;
  font-weight: var(--p-font-weight);
  font-size: var(--xs-font-size);

  padding-left: 20px;
}

/* Første card */
.contact-cards:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2;
}


/* Andet card */
.contact-cards:nth-of-type(3) {
    grid-column: 2;
    grid-row: 3;
}


/* Tredje card */
.contact-cards:nth-of-type(4) {
    grid-column: 2;
    grid-row: 1;
}


/* IKON */
.contact-icon {
    grid-column: 1;
    grid-row: 1 / 3;

    width: 70px;
    height: 70px;
    object-fit: contain;
    

    padding: 10px;
    box-sizing: border-box;
}


/* OVERSKRIFT */
.contact-cards h5 {
    grid-column: 2;
    grid-row: 1;

    margin: 0 0 3px;

    font-family: var(--font-family);
    font-weight: var(--h-font-weight);
    font-size: var(--s-font-size);

    padding-left: 20px;

    color: #6587a7;
    letter-spacing: 3px;
}


/* TEKST */
.contact-cards p {
    grid-column: 2;
    grid-row: 2;

    margin: 0;

    font-family: var(--font-family);
    font-weight: var(--p-font-weight);
    font-size: var(--xs-font-size);

    color: var(--text-color);

    padding-left: 20px;
}

/* =========================
   MOBIL
========================= */

@media (max-width: 768px) {

    .contact-body {
        margin-top: 100px;
    }

    .contact-header h2 {
        font-size: var(--m-font-size);
        margin-top: 25px;
        margin-bottom: 20px;
    }

    .contact-header p {
        padding: 0 25px;
        line-height: 1.5;
    }

    

   .contact-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;

    gap: 18px 70px;

    width: 100%;
    max-width: 1200px;

    margin: 0 auto;
    padding: 80px 40px;

    box-sizing: border-box;
}

.contact-img {
    justify-self: center;
}



    /* BILLEDE */

    .contact-img {
        grid-column: 1;
        grid-row: auto;

        width: 100%;
        max-width: 320px;
        height: auto;

        justify-self: center;
        margin-top: 0;
    }


    /* CARDS */

    .contact-cards {
        grid-column: 1 !important;
        grid-row: auto !important;

        grid-template-columns: 55px 1fr;

        width: 100%;
        min-height: 95px;

        padding: 18px 20px;
        border-radius: 14px;
    }


    /* IKON */

    .contact-icon {
        width: 55px;
        height: 55px;
        padding: 6px;
    }


    /* OVERSKRIFT */

    .contact-cards h5 {
        font-size: var(--s-font-size);
        padding-left: 12px;
        letter-spacing: 2px;
    }


    /* TEKST */

    .contact-cards p,
    .contact-cards a {
        font-size: var(--xs-font-size);
        padding-left: 12px;
        line-height: 1.4;
    }

}

/* =========================
   TABLET
========================= */

@media (max-width: 1024px) {

    .contact-body {
        margin-top: 120px;
    }

    .contact-header h2 {
        font-size: var(--m-font-size);
        margin-top: 30px;
        margin-bottom: 25px;
    }

    .contact-header p {
        padding: 0 30px;
    }

    .contact-section {
        grid-template-columns: 0.8fr 1.2fr;
        gap: 20px 40px;

        padding: 60px 35px;
    }

    .contact-img {
        height: 400px;
        max-width: 100%;
    }

    .contact-cards {
        min-height: 100px;
        padding: 18px 20px;
        grid-template-columns: 55px 1fr;
    }

    .contact-icon {
        width: 60px;
        height: 60px;
        padding: 8px;
    }

    .contact-cards h5 {
        font-size: var(--s-font-size);
        padding-left: 15px;
        letter-spacing: 2px;
    }

    .contact-cards p,
    .contact-cards a {
        font-size: var(--xs-font-size);
        padding-left: 15px;
    }

}

/* =========================
   CONTACT ANIMATION
========================= */

/* Overskrift */
.contact-header {
    animation: contactHeader 0.8s ease forwards;
}

/* Billede */
.contact-img {
    opacity: 0;
    animation: contactImage 0.9s ease 0.2s forwards;
}

/* Kontaktkort */
.contact-cards {
    opacity: 0;
    animation: contactCards 0.7s ease forwards;
}

/* Første kort */
.contact-cards:nth-of-type(2) {
    animation-delay: 0.3s;
}

/* Andet kort */
.contact-cards:nth-of-type(3) {
    animation-delay: 0.45s;
}

/* Tredje kort */
.contact-cards:nth-of-type(4) {
    animation-delay: 0.6s;
}


/* =========================
   KEYFRAMES
========================= */

@keyframes contactHeader {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes contactImage {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


@keyframes contactCards {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}


/* =========================
   MOBIL
========================= */

@media (max-width: 768px) {

    .contact-img {
        animation-name: contactImageMobile;
    }

    .contact-cards {
        animation-name: contactCardsMobile;
    }
}


@keyframes contactImageMobile {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


@keyframes contactCardsMobile {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --------------------om mig----------------------- */

.about-me {
      padding-top: 30px;
      
}

.layers-image img {
    width: 100%;
    max-width: 450px;

    transition:
        opacity 0.25s ease,
        transform 0.25s ease;
}

.layers-image img.change {
    opacity: 0;
    transform: scale(0.97);
}


.back-button {
    display: none;

    margin-top: 30px;
    padding: 10px 0;

    background: none;
    border: none;

    color: #6689a8;

    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    width: fit-content;

    transition: 0.3s ease;
}

.back-button:hover {
    transform: translateX(-5px);
}

/* ========================================
   LAGENE AF MIG
======================================== */

.about-layers {
    width: 100%;
    max-width: 1500px;

    margin: -30px auto 0;
    padding: 30px 70px 40px;
    

    display: grid;
    grid-template-columns: 0.8fr 1fr 1.35fr;
    align-items: center;
    gap: 70px;

    background-color: var(--primary-color);

    box-sizing: border-box;
}


/* ========================================
   VENSTRE SIDE
======================================== */

.layers-menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
  
}


/* Lille blå tekst */

.small-title {
    margin: 0 0 15px;

    color: #6687a5;

    font-size: 16px;
    font-weight: 600;
    font-family: var(--font-family);

    letter-spacing: 3px;
}


/* Overskrift */

.layers-menu h2 {
    margin: 0 0 20px;

    font-family: var(--font-family);
    font-size: 58px;
    line-height: 0.95;
    font-weight: 600;

    color: #111;
}


/* Intro tekst */

.intro-text {
    max-width: 270px;

    margin: 0 0 35px;

    font-size: var(--s-font-size);
    font-family: var(--font-family);
    font-weight: var(--p-font-weight);
    line-height: 1.6;

    color: var(--text-color);
}


/* ========================================
   LAG-KNAPPER
======================================== */

.about-layers {
    width: 100%;
    max-width: 1500px;

    margin: -30px auto 0;
    padding: 30px 90px 90px;

    display: grid;
    grid-template-columns: 0.8fr 1fr 1.35fr;
    align-items: center;
    gap: 70px;

    background-color: var(--primary-color);

    box-sizing: border-box;
}

.layer-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;

    width: 100%;
    max-width: 330px;
}


/* Selve knappen */

.layer-btn {
    width: 100%;

    display: flex;
    align-items: center;

    gap: 15px;

    padding: 11px 18px;

    border: none;
    border-radius: 40px;

    background: transparent;

    cursor: pointer;

    text-align: left;

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


/* Ikon */

.layer-btn img {
    width: 46px;
    height: 46px;

    object-fit: contain;

    flex-shrink: 0;
}


/* Nummer + tekst */

.layer-btn div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}


/* Nummer */

.layer-btn span {
    font-size: 14px;
    color: #6687a5;

    font-weight: 500;
    font-family: var(--font-family);
}


/* Titel */

.layer-btn strong {
    font-size: var(--xs-font-size);
    font-weight: var(--h-font-weight);
    font-family: var(--font-family);

    color: #243c52;
}


/* Hover */

.layer-btn:hover {
    transform: translateX(5px);
}

/* Aktiv tekst */

.layer-btn.active span,
.layer-btn.active strong {
    color: var(--text-color);
}

/* 01 - Mig som person */
.layer-btn:nth-child(1).active {
    background-color: #EFD2D0;
}


/* 02 - Mig som designer */
.layer-btn:nth-child(2).active {
    background-color: #A7BCCF;
}


/* 03 - Mig i udvikling */
.layer-btn:nth-child(3).active {
    background-color: #E3C991;
}


/* ========================================
   BILLEDE / MIDTERSTE DEL
======================================== */

.layers-image {
    position: relative;

    display: flex;
    justify-content: center;
    align-items: center;
}


/* Polaroid */

.layers-image img {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 430px;

    padding: 15px 15px 80px;

    

    transform: rotate(-4deg);

    transition:
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* Når billedet skifter */

.layers-image img.change {
    opacity: 0;
    transform: rotate(-4deg) scale(0.96);
}




/* ========================================
   HØJRE SIDE
======================================== */

.layers-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    max-width: 600px;

    transition: opacity 0.3s ease;
    padding-right: 30px;
    
}


/* Nummer */

.layer-number {
    margin: 0 0 8px;

    font-size: 25px;
    font-weight: 500;
    font-family: var(--font-family);

    color: #a96b69;

    letter-spacing: 2px;
}


/* Overskrift */

.layers-content h2 {
    margin: 0;

    font-family: var(--font-family);
    font-weight: var(--h-font-weight);
    font-size: var(--m-font-size);
    line-height: 1.05;
    

    color: var(--text-color);
}


/* Lille streg */

.blue-line {
    width: 75px;
    height: 3px;

    margin: 25px 0 35px;

    background-color: var(--secondary-color);
}


/* Brødtekst */

#layer-text {
    max-width: 550px;

    margin: 0 0 45px;

    font-size: var(--s-font-size);
    font-family: var(--font-family);
    font-weight: var(--p-font-weight);
    line-height: 1.7;

    color: #252525;
}


.contact-btn a{
    font-size: var(--s-font-size);
  text-decoration: none;
  color: var(--text-color);
  display: flex;
  justify-content: center;
  align-items: center;

  width: 300px;
  max-width: 100%;
  box-sizing: border-box;

  padding: 20px 30px;
  border-radius: 25px;
  background-color: var(--secondary-color);

  margin: 60px auto 0;

  font-weight: var(--p-font-weight);
  font-family: var(--font-family);
  text-align: center;
}



.contact-btn a:hover {
  
  background-color: #6587a7;
  
}


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

.back-button {
    display: none;

    width: fit-content;

    margin-top: 10px;

    padding: 10px 0;

    border: none;
    background: none;

    color: #6687a5;

    font-family: var(--font-family);
    font-size: 16px;
    font-weight: 500;

    cursor: pointer;

    transition:
        transform 0.3s ease,
        color 0.3s ease;
}


.back-button:hover {
    transform: translateX(-5px);

    color: #4f708e;
}


/* ========================================
   STARTSTATE
======================================== */

.about-layers.start-state .layer-number {
    color: #6687a5;
}

.about-layers.start-state .blue-line {
    background-color: #6687a5;
}


/* ========================================
   DE TRE FORSKELLIGE LAG
======================================== */

/* 01 – Personlighed */

.about-layers.person-state .layer-btn.active {
    background-color: #efd2d0;
}

.about-layers.person-state .layer-number,
.about-layers.person-state .blue-line {
    background-color: #a96b69;
}

.about-layers.person-state .layer-number {
    color: #a96b69;
}


/* 02 – Designer */

.about-layers.designer-state .layer-btn.active {
    background-color: #d8e3ed;
}

.about-layers.designer-state .layer-number {
    color: #6687a5;
}

.about-layers.designer-state .blue-line {
    background-color: #6687a5;
}


/* 03 – Udvikling */

.about-layers.udvikling-state .layer-btn.active {
    background-color: #dce5dc;
}

.about-layers.udvikling-state .layer-number {
    color: #718c73;
}

.about-layers.udvikling-state .blue-line {
    background-color: #718c73;
}


/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 1100px) {

    .about-layers {
        grid-template-columns: 0.8fr 0.9fr 1.2fr;

        gap: 35px;

        padding: 60px 40px;
    }

    .layers-menu h2 {
        font-size: 48px;
    }

    .layers-content h2 {
        font-size: 42px;
    }

    .layers-image img {
        max-width: 350px;
    }

}


@media (max-width: 800px) {

    .about-layers {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 60px 30px;
    }


    /* Venstre */

    .layers-menu {
        align-items: center;

        text-align: center;
    }


    .intro-text {
        max-width: 400px;
    }


    .layer-buttons {
        max-width: 400px;
    }


    /* Billede */

    .layers-image {
        order: 2;
    }


    .layers-image img {
        max-width: 350px;
    }


    /* Tekst */

    .layers-content {
        order: 3;

        max-width: 600px;

        margin: 0 auto;

        text-align: center;
    }


    .blue-line {
        margin: 20px auto 30px;
    }


    #layer-text {
        margin-left: auto;
        margin-right: auto;
    }


    .back-button {
        margin-left: auto;
        margin-right: auto;
    }

}


@media (max-width: 500px) {

    .about-layers {
        padding: 45px 20px;
    }


    .layers-menu h2 {
        font-size: 42px;
    }


    .layers-content h2 {
        font-size: 36px;
    }


    .layers-image img {
        max-width: 290px;
    }


    .layer-btn {
        padding: 9px 15px;
    }


    .layer-btn img {
        width: 40px;
        height: 40px;
    }

}



/* ---------------------footer---------------------- */
footer {
    background: linear-gradient(
        to bottom,
        #eef5fb 0%,
        #dceaf5 50%,
        #c9ddec 100%
    );
}

.footer-logo {
  height: auto;
  width: 100px;
}

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

.footer {
    width: 100%;

    background-color: #dce8f2;

   padding-top: 30px;
   padding-bottom: 30px;

    box-sizing: border-box;
}


/* Hovedindhold */

.footer-inner {
    max-width: 1400px;

    margin: 0 auto;

    display: grid;

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

    align-items: center;

    gap: 50px;
}


/* ========================================
   VENSTRE - NAVIGATION
======================================== */
/* Logo */

.footer-logo {
    width: 130px;

    height: auto;
}


.footer-nav {
    display: flex;
    flex-direction: column;

    gap: 12px;
}




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

.footer-contact {
    display: flex;
    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 8px;
}

.footer-contact h4 {
    margin: 0 0 8px;

    font-size: 20px;
    font-family: var(--font-family);

    color: var(--text-color);
}

.footer-contact a {
    color: var(--text-color);

    text-decoration: none;

    transition: color 0.3s ease;
    font-family: var(--font-family);
    font-size: var(--xs-font-size);
    font-weight: var(--p-font-weight);
}

.footer-contact a:hover {
    color: #6689a8;
}


/* ========================================
   HØJRE - LOGO + SOCIALE MEDIER
======================================== */

.footer-right {
    display: flex;

    flex-direction: column;

    align-items: flex-end;

    gap: 20px;
}

.footer-right a{
  
    color: #222;

    text-decoration: none;

    font-family: var(--font-family);

    font-size: 16px;

    transition: color 0.3s ease;
}

.footer-right a:hover {
    color: #6689a8;
}



/* ========================================
   RESPONSIVE
======================================== */

@media (max-width: 800px) {

    .footer {
        padding: 45px 30px 20px;
    }

    .footer-inner {
        grid-template-columns: 1fr;

        text-align: center;
    }

    .footer-nav {
        align-items: center;
    }

    .footer-right {
        align-items: center;
    }

}