/* Poppins and DM Serif Display fonts import */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* Mobile first design */

/*general styles*/

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

:root {
  --primary-color: #f8dd9f;
  --bright-color: #fff;
  --dark-color: #000;
}

/* Browser preference for font size will be used - usually set to 16px as default.
This will allow the user to change the font size in the browser settings.
It also complies with accessibility standards. */

html {
  font-size: 100%;
}

body{
  font-family: 'Poppins', sans-serif;


  /* Explicitly setting the default font size to be the same as the browser default */
  font-size: 1rem;
}

html, body {
  overflow-x: hidden;
  width:100%;
  box-sizing: border-box;
}

.container {
  width:100%;
}



h1, h2, h3 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400; 
}

h1, .info h3 {
  /* 32px → fluid → 80px */
  font-size: clamp(2rem, 5vw, 5rem); 
  line-height: 1.2;
}

h2 {
  /* 28px → fluid → 60px */
  font-size: clamp(1.75rem, 4vw, 3.75rem); 
}

h3 {
  /* 24px -> 35px */
  font-size: clamp(1.5rem, 3vw, 2.1875rem);
}

.bold {
  font-weight: 600;
}


p {
  /* 16px */
  font-size: 1rem;
  margin-top: 20px;
}

.p-large {
  /* 16px -> 18px */
  font-size: clamp(1rem, 1.5vw, 1.125rem); 
  margin-top: 20px;
}

.p-xlarge {
  /* 16px -> 25px */
  font-size: clamp(1rem, 2vw, 1.5625rem); 
  font-weight:600;
  margin-top: 20px;
}

.uppercase {
  text-transform: uppercase;
}

.button-cta {
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:10px;
  font-family: 'Poppins', sans-serif;
  /* 16px -> 18px */
  font-size: clamp(1rem, 1.5vw, 1.125rem); 
  font-weight:600;
  text-decoration:none;
  width:185px;
  height:45px;
  margin-top:40px;
  cursor:pointer;
  transition: ease-in-out 0.2s;
}

.button-cta:hover {
  transform: scale(1.05);
}

.cta-dark-mobile, .cta-dark-desktop {
  background-color: var(--dark-color);
  color: var(--bright-color);

}

.header .cta-dark-mobile {
  margin-top:50px;
}

.cta-dark-desktop {
  display:none;
}

.cta-bright {
  background-color: var(--bright-color);
  color: var(--dark-color);
}

.cta-dark {
  background-color: var(--dark-color);
  color: var(--bright-color);
}


/*Mobile First Design */

/*******************/
/***** Header *****/
/******************/

.header {
  background-color:var(--bright-color);
  display:flex;
  justify-content: space-between;
  align-items:center;
height:60px;
 width:100%;
 padding:10px;
}

.logo {
  
  height:40px;

}

.header .button-cta-desktop {
  margin-top:0;

}

.hamburger {
  display: block; 
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}

.close {
  display: none; 
  cursor: pointer;
}


#menu-toggle {
  display: none; 
}

#menu-toggle:checked + .hamburger {
  display: none;
}

#menu-toggle:checked + .close {
  display: block;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, visibility 0.3s;
  z-index: 9;
}

nav {
  position: fixed;
  top: 0;
  right: -100%;
  width: 300px;
  height: 100vh;
  background: var(--bright-color);
  box-shadow: -5px 0 5px rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  align-items:start;
  padding: 20px;
  z-index: 10;
  transition: right 0.3s ease-in-out;
}

.nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.nav-links li {
  list-style:none;
}

.nav-links li a {
  /* 18px */
  font-size:1.125rem;
  text-decoration:none;
  display: block;
  text-align: center;
  padding: 10px 15px;
  color: var(--dark-color);
}

.nav-links li a:hover {
  background: var(--dark-color);
  color: var(--bright-color);
  border-radius: 5px;
}

/* Show Menu When Checked */
#menu-toggle:checked ~ .nav {
  right: 0;
}


/* Show Overlay When Menu is Open */
#menu-toggle:checked ~ .overlay {
  opacity: 1;
  visibility: visible;
}


/* Checkbox Hack: Show Menu When Checked */
#menu-toggle:checked + .hamburger + .nav {
  display: flex;
}

.section.hero, .section.purstuit {
  padding-top:40px;
  padding-bottom:40px;
}


.header, .section, .footer {
  padding: 10px 20px;
}

.section {
  display: flex;
  flex-direction: column;
}

.content {
  text-align:left;
}

/***************************/
/*****  Hero section  *****/
/**************************/

.hero {
  /*height: clamp(450px, 80vh, 925px);*/
  text-align: center;
  justify-content:center;
  background-image: url('assets/topbillede.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--bright-color);

}

.hero p {
display:flex;
justify-content:center;
}

/**************************************/
/***** Pursuit Excellence Section *****/
/**************************************/
.section.pursuit {
  background-color: var(--primary-color);
 /* height: clamp(200px, 40vh, 575px);*/
  color: var(--dark-color);
  display:flex;
  justify-content: center;
  align-items: center;
}

.pursuit .content {
 text-align:center;
 margin:0 auto;
 width:100%;
}

.pursuit .content p {
  text-align:center;
}

.pursuit .content .cta-dark {
 
margin:20px auto;
}



/**********************************************/
/***** Modern refinement Sections *****/
/********************************************/
.section.modern {
  display: flex;
    flex-direction: column; 
    align-items: stretch;
    width: 100%;
    min-height:700px
  
}



.modern-image {
  flex:1;
  background-size: cover;
  background-position: center;
  min-height:300px;
}

.modern-content {
  flex: 1; 
  background-color: var(--bright-color);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height:450px;;
}

/**********************************************/
/***** Modern refinement (first) Section *****/
/********************************************/
 
.modern-image-1 {
  margin-top:40px;
  background-image: url('assets/splitsektion-1.jpg');
}

/*****************/
/***** Info *****/
/*****************/

section.info {
  display: flex;
  width:100%;
  flex-direction:column;
  justify-content: space-between; 
  width: 100%;
  min-height: 400px; 
  padding:0;
}

.info .column {
  flex: 1; 
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  text-align: center;
  font-size: 1.5rem;
  background-size: cover;
  background-position: center;
}


.ydelser {
  background-image: url('assets/ydelser.jpg');
}

.service {
  background-image: url('assets/service.jpg');
}

.kontaktos {
  background-image: url('assets/kontaktos.jpg');
}

/**********************************************/
/***** Modern refinement (first) Section *****/
/********************************************/

.section.modern-2 {
  flex-direction:column-reverse
}

.modern-image-2 {
  margin-bottom:40px;
  background-image: url('assets/splitsektion-2.jpg');

}


/*********************************/
/***** Get In Touch Section *****/
/*******************************/

.section.get-in-touch {
  background-color: var(--primary-color);
  color: var(--dark-color);
  display:flex;
  flex-direction:column;
  justify-content: center;

}

.get-in-touch .column {
  margin: 40px 0;
}

/* form */

#kontakt-form input,
#kontakt-form textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
    font-family: inherit;
    transition: border-color 0.3s ease-in-out;
}

#kontakt-form input:focus,
#kontakt-form textarea:focus {
    border-color: var(--dark-color);
    outline: none;
}

#kontakt-form textarea {
    resize: vertical; 
    min-height: 120px;
}

#kontakt-form button {
    width: 100%;
    padding:30px;
    margin-top:0;
  
   
}

#kontakt-form button:hover {
    background-color: #333;
}


/*********************/
/*****  Footer  *****/
/*******************/

.footer {
  background-color: var(--dark-color);
  color: var(--bright-color);
  display: flex;
  flex-direction: column;
  gap: 20px; /* Adds spacing between columns */
}

.footer-column {
  display:flex;
  flex-direction:column;
  margin-top:40px;
}

.footer-column:first-child ul {
  margin-bottom: 20px; /* Adjust space between <ul> */
}

.footer-title {
   /* 24px -> 35px */
   font-size: clamp(1.5rem, 3vw, 2.1875rem);
   margin-top:20px;
   margin-bottom: 20px;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer ul li {
  margin-bottom: 8px; /* Adjust spacing between items */
}

.footer a {
  color: var(--bright-color);
  text-decoration: none;
}

.footer a:hover {
  text-decoration: underline;

}

.footer .socials {
  display: flex;
  gap: 20px;
}

.footer .socials img {
  width: 25px;
  height: 25px;
}
@media (min-width:500px) {
  .nav {
    width: 400px;
  }

  .header, .section, .footer {
    padding: 40px;
  }

  .header {
    height:70px;
  }

  .logo {
    height:50px;
  }

  #kontakt-form button {
    width: 214px;
    padding: 12px;
    margin-left:auto;
    margin-top:0;
  
   
}
}


@media (min-width: 768px) {

  header {
    height: 80px;
  }

  .hamburger {
    top:40px;
  }

  .hamburger svg {
    width:50px;
    height:auto;
  }

  .logo {
    height:60px;
  }


  .header {
    padding: 50px 60px;
  }

   .section, .footer {
    padding: 90px 60px;
  }
  
  .section.info {
    flex-direction:row;
    padding:0;
  }


  .nav {
    width: 500px;
  }

  .pursuit .content .cta-dark {
 
    margin:40px auto;
    }

  .cta-dark-desktop {
    display:flex;
    margin-right:auto;
    margin-left:40%;
    margin-top: 0;
   
  }

 
  .cta-dark-mobile {
    display:none;
  }
  .hero .content {
    max-width: 60%;
  }

  .section.pursuit .content {
    width:50%;
  }

  .modern-content {
    min-height: 500px;
    justify-content:center;
    padding-top:90px;
  }

  .modern-image {
    min-height:500px;
  }

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

.footer-column {
    width: 48%; 
}
}

@media (min-width: 1024px) {

  .button-cta {
    width:214px;
    height:53px;
  }

  .header {
    height: 120px;
  }

  .logo {
    height: 80px;
  }
  .header, .section, .footer {
    padding: 20px 80px;
  }

  .section.hero {
    min-height:600px;
  }

  .section.pursuit {
    min-height:400px;
  }

  .section.modern {
    flex-direction:row;
  }

  .section.modern-2 {
    flex-direction:row-reverse;
  }

  .modern-content-1 {
    padding-left:90px;
  }

  .modern-content p, .get-in-touch p {
    margin-right:40px;
 
  }

  .modern-image {
    margin: 90px 0;
  }

  .section.get-in-touch {
    flex-direction:row;
  }

  .section.get-in-touch .column {
    flex:1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}


  .footer {
    flex-wrap: nowrap; 
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 80px;
  }

  .footer-column {
    width: auto;
    margin-top: 0;
  

}
}

@media (min-width: 1200px) {

 

  .header, .section, .footer {
    padding: 20px 120px;
  }

 
  
}

@media (min-width: 1440px) {

  .header, .section, .footer {
    padding: 20px 140px;
  }


  .header .cta-dark-desktop {
    margin:0;
  }



  .hamburger, .close-button {
    display: none;
  }
  .nav {
    display: flex;
    position: static; /* Reset positioning */
    flex-direction: row;
    right: 0;
    width: auto;
    height: auto;
    background: transparent;
    box-shadow: none;
    transition:none;
    
}
.nav-links {
    display: flex;
    flex-direction: row;
    
}

.modern-content p, .get-in-touch p {
  margin-right:60px;

}

}


@media (min-width: 1920px) {

.section, .footer, .header {
    padding: 20px 180px;
  }

  .section.hero {
    min-height:925px;
  }

  .section.pursuit {
    min-height:575px;
  }

  .section.modern {
    min-height:976px;
  }

  .section.info {
    padding:0;
    min-height:820px;
  }

  .section.get-in-touch {
    min-height: 710px;
  }



  .modern-content p, .get-in-touch p {
    margin-right:90px;
 
  }


.info .column {
  width: 100%; 
  text-align: center; 
}


.column.ydelser h3, .column.service h3, .column.kontaktos h3 {
  padding-left: 0px;
}

.footer {
  padding-right:390px;
}



}