* {
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}

body {
    font-family: sans-serif;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;

}


.navbar {
    width: 100%;
    height: 6vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #121212;
    padding: 0 5vw;
    box-sizing: border-box;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.219);
    position: fixed;
    top: 0;
    left: 0;
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
    z-index: 1000;
}


.navbar.show {
    transform: translateY(0); /* slide down when scrolling */
}

.logo img {
    height: 5vh; 
    width: auto;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-item {
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: 1.8rem;
    background: linear-gradient(to bottom, #d5d6d6, #7284ac);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
}

/* Sidebar */
.sidebar {
    position: fixed;
    top: 0;
    right: 0;
    height: auto;
    width: auto;
    z-index: 99;
    background-color: rgba(18, 18, 18, 0.95);
    backdrop-filter: blur(10px);
    box-shadow: -10px 0 10px rgba(0, 0, 0, 0.5);
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding-top: 5vh;
}

.sidebar li {
    width: 100%;
    padding: 15px 20px;
}

.sidebar a {
    color: #cfd8e3;
    font-size: 1.3rem;
    text-decoration: none;
    display: block;
}


/* ####################################################### */
/* START PAGE 🟢🟢🟢🟢🟢*/
/* ####################################################### */



.tjenester-container{
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)),
    url(../images/TjenesterBackground.jpg);
    
  width: 100%;
  height: min-content;
  display: flex;
  gap: 30px;
  margin-top: 10vh;
  margin-bottom: 3vh;
  padding-top: 10vh;
  padding-bottom: 10vh;
  justify-content: center;
  align-items: center;
  background-size: cover;
  background-repeat: no-repeat;

}

.tjenestercont1, .tjenestercont2{
  display: flex;
  gap: 30px;
}

.card {
  width: 300px;
  height: 230px;
  perspective: 500px;
}

.card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.999s;
}

.card:hover .card-inner {
  transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 91%;
  backface-visibility: hidden;
}

.card-front {
  background-color: #121212;
  display: flex;
  align-items: center;
  flex-direction: column;
  border: 2px solid #8892a6;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(0deg);
}

.card-back {
  background-color: #121212;
  color: #fff;
  display: flex;
  align-items: center;
  flex-direction: column;
  text-align: center;
  border: 1px solid #8892a6;
  border-radius: 10px;
  justify-content: center;
  font-size: 24px;
  transform: rotateY(180deg);
}

.headercard{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 350;
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  background: linear-gradient(to bottom, #cfd8e3, #8892a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  margin: 0;
  transition: all 0.3s ease;
  margin-top: 17%;
}

.textcard{
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1rem);
  color: #c6c6c6;
  background-clip: text; /* for Firefox */
  margin: 0;
  transition: all 0.3s ease;
  margin-top: auto;
  margin-bottom: 2vh;
}
.textcardback{
      font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 1rem);
  color: #ffffff;
  background-clip: text; /* for Firefox */
  margin-left: 2vw;
  margin-right: 2vw;
  margin-bottom: auto;
  margin-top: 15%;
  transition: all 0.3s ease;
}
/* From Uiverse.io by zjssun */ 
#btn1 {
  padding: 10px 15px 8px 15px; /* top, right, bottom, left */
  text-transform: uppercase;
  border-radius: 8px;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  font-weight: 500;
  color: #ffffff80;
  background: transparent;
  cursor: pointer;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
  margin-bottom: 10px;
  box-shadow: none;
  text-shadow: none;
}

#btn1:hover,
#btn1:focus {
  color: #ffffff;
  background: #494949;
  border: 1px solid #8892a6;
  text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 300px #ffffff;
  box-shadow: 0 0 1px #8892a6, 0 0 1px #8892a6, 0 0 1px #8892a6, 0 0 10px #8892a6;
}

#btn2 {
  display: none;
  padding: 10px 15px 8px 15px; /* top, right, bottom, left */
  text-transform: uppercase;
  border-radius: 8px;
  font-size: clamp(0.8rem, 2vw, 0.9rem);
  font-weight: 500;
  color: #ffffff80;
  background: transparent;
  cursor: pointer;
  border: 1px solid #ffffff80;
  transition: 0.5s ease;
  user-select: none;
  margin-bottom: 10px;
  box-shadow: none;
  text-shadow: none;
}

#btn2:hover,
#btn2:focus {
  color: #ffffff;
  background: #494949;
  border: 1px solid #8892a6;
  text-shadow: 0 0 1px #ffffff, 0 0 2px #ffffff, 0 0 300px #ffffff;
  box-shadow: 0 0 1px #8892a6, 0 0 1px #8892a6, 0 0 1px #8892a6, 0 0 10px #8892a6;
}




.top{
    width: 100%;
    height: 30vh;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), 
        url(../images/TjenesterBackground.jpg);
    background-size: cover;
    display: flex;

}

  
.GLogo {/* front banner */
    height: 48vh;
    width: auto;
    display: block;
    margin: 0 auto;
}

.headertop-list {
  list-style: none;            /* Remove default bullets */
  margin: 0;
  padding: 0;
}

.headertop-list li {
  position: relative;
  padding-left: 35px;          /* Space for bullet */

  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 2vw, 2.3rem);
  background: linear-gradient(to bottom, #cfd8e3, #2e416d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 1vh 0;
}

.headertop-list li::before {
  content: "➢";
  position: absolute;
  left: 0;
  top: 0;
  background: linear-gradient(to bottom, #cfd8e3, #2e416d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.headertopdiv{
  margin: 100px 80px 80px 80px;  /* top, right, bottom, left */
}

.headertopdiv2{
  margin: 100px 80px 80px 0px;  /* top, right, bottom, left */
  padding-right: 80px;
}







.kontaktpage{
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 5vh;
}

.mapsection, .kontaktsection{
  width: 50%;
  padding-left: 10%;
  display: flex;
  flex-direction: column;

}



.mapheader, .kontaktheader{
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 500;
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    background: linear-gradient(to bottom, #cfd8e3, #8892a6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text; /* for Firefox */
    margin:  30px 20px;
  
}
.map{
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
  width: 100%;  /* larger on big screens */
  height: 600px;
}




.kontakt{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  color: #121212;
  background-clip: text; /* for Firefox */
  line-height: 1.6;
  margin-top: 2vh;

}

.kontaktsvar{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #121212;
  background-clip: text; /* for Firefox */
  margin: 0 20px;
  line-height: 1.6;
}

/* ####################################################### */
/* START    page  🔴🔴🔴🔴🔴*/
/* ####################################################### */




/* ####################################################### */
/* FOOTER  🟢🟢🟢🟢🟢*/
/* ####################################################### */
footer{
  width: 100%;
  height: auto;
  background-color: #121212;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10vh;
  padding-bottom: 2vh;


}
.ftitle{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.2rem, 2.5vw, 1.4rem);
  color: #cfd8e3;
  background: linear-gradient(to bottom, #cfd8e3, #8892a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  padding-top: 3vh;
}
.ftekst{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.5vw, 1.2rem);
  color: #cfd8e3;
  margin-top: 0.3vh;
}
.ftekst2{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #cfd8e3;
  margin-top: 3vh;
}
.ftekst3{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #cfd8e3;
  margin-top: 0vh;
}
/* ####################################################### */
/* FOOTER  🔴🔴🔴🔴🔴*/
/* ####################################################### */





/* ####################################################### */
/* TJENESTER PAGE 🟢🟢🟢🟢🟢*/
/* ####################################################### */
.top_positioner{ /* TOP picture Positioner */
  width: 100%;
  height:max-content;
  margin-top: 7vh;
  display: flex; 
  justify-content: center;
  margin-bottom: 1vh;
}
.subnav{
  height: auto;
  width: max-content;
  background-color: #d4d4d4;
  display: flex;
  justify-content: center;
  align-items: center;

}

.subnav-item{
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: 1.5rem;
    color: #121212;
    padding: 10px 15px; /* top/bottom, left/right */
}
.subnav-itempdr{
      font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: 1.5rem;
    color: #121212;
    padding: 10px 20px; /* top/bottom, left/right */
}
.subnav-item:hover,
.subnav-itempdr:hover {
  background-color: #b1b1b1;

}
.subnav-item:not(:last-child),
.subnav-itempdr:not(:last-child) {
  border-right: 1px solid #cacaca; /* vertical separator */
}

.subnavimg{
  max-width: 1200px;
  width: 45%;
}


.wrapper{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  gap: 2vh;
  margin-bottom: 5vh;
}
.wrapperleft{
  width:min-content;
  height: auto;

}
.wrapperright{
  width:25%;
  height: auto;

  display: flex;
  flex-direction: column;
}

.Tjenesterheader{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 7rem);
  background: linear-gradient(to bottom, #cfd8e3, #8892a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  margin: 40px 80px; 
}
.Tjenesterheaderpr{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.8rem, 3.5vw, 4.6rem);
  background: linear-gradient(to bottom, #cfd8e3, #8892a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  margin: 40px 80px 40px 0px; /* top, right, bottom, left */
}
.Tjenestertext{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #121212;
  margin: 0px 80px;

}
.Tjenesterpicture{
  height: clamp(300px, 20vw, 500px);
  width: clamp(300px, 20vw, 500px);
  border-radius: 15px;
  object-fit: cover;
  margin-bottom: 2vh;
}

.plastrepid, .pdrid, .srid{
  display: none;
}
/* ####################################################### */
/* TJENESTER PAGE 🔴🔴🔴🔴🔴*/
/* ####################################################### */






/* ####################################################### */
/* OM OSS    PAGE 🟢🟢🟢🟢🟢*/
/* ####################################################### */

.omoss-container{
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 10vh;
  gap: 3vw;
}
.omossleft{
  width: 18%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 8vh;
}
.omossheader{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(3.7rem, 3.5vw, 7rem);
  background: linear-gradient(to bottom, #cfd8e3, #8892a6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* for Firefox */
  margin: 40px 0px;
}
.omosstext{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1vw, 1.5rem);
  color: #121212;
  line-height: 1.6;
}
.omossright{
  width: 25%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 5vh;
}
.photodisplayimg{
  height: clamp(700px, 40vw, 1100px);
  width: auto;

}



/* ####################################################### */
/* OM OSS    PAGE 🔴🔴🔴🔴🔴*/
/* ####################################################### */




@media (max-width: 370px) {

.GLogo {/* front banner */
    height: 48vh;
    width: 100%;
    display: block;
    margin: 0 auto;
}
}



@media (max-width: 800px) {
  .map {
    height: 400px;
  }
  .kontaktpage{
    flex-direction: column-reverse;
    align-items: center;
  }
.mapsection, .kontaktsection{
  width: 90%;
  padding-left: 0%;
}
}
@media (max-width: 700px) {

.mapsection, .kontaktsection{
  width: 80%;

}
}

@media (max-width: 700px) {

.logo img {
    height: 4vh; 
    width: auto;
}
}
@media (max-width: 500px) {

.logo img {
    height: auto; 
    width: 80%;
}
}

/* Hide hamburger on desktop */
@media(min-width: 900px){
    .Hideondesktop{
        display: none;
    }
}

/* Hide nav links on mobile */
@media(max-width: 900px){
    .nav-links{
        display: none;
    }
}


@media (max-width: 1921px) {

.omossleft{
  width: 30%;
  height: auto;
  display: flex;
  flex-direction: column;
  margin-top: 8vh;
}
}
@media (max-width: 1600px) {

.omossleft{
  width: 35%;

}
.omossright{
  width: 40%;

}
}
@media (max-width: 900px) {
.omossleft{
  width: 40%;

}
.omossright{
  width: 50%;

}

}
@media (max-width: 730px) {
.photodisplayimg{
  height: clamp(600px, 40vw, 1000px);
  width: auto;
}
}
@media (max-width: 650px) {
.photodisplayimg{
  height: clamp(540px, 40vw, 1000px);
  width: auto;
}
}
@media (max-width: 600px) {
.omossleft{
  width: 80%;

}
.omossright{
  width: 80%;

}
}
@media (max-width: 500px) {
.omosstext{
  font-size: clamp(0.9rem, 1vw, 1.5rem);
}
}
@media (max-width: 350px) {
.omosstext{
  font-size: clamp(0.8rem, 1vw, 1.5rem);
}
}
@media (max-width: 600px) {
.omoss-container{

  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 7vh;
  gap: 1vw;
}
.omossright{
  margin-top: 0vh;
}
.omoss-container{
  margin-top: 4vh;

}
.omossleft{
  margin-top: 0vh;
}

}
@media (max-width: 1100px) {


  .wrapper{
    flex-direction: column;
    align-items: center;

  }
  .wrapperright{
    display: flex;
    flex-direction: row; /* this is default, so you can omit it */
    justify-content: center;
    margin-top: 5vh;

  }
}
@media (max-width: 700px) {

  .wrapperright{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

  }

}
@media (max-width: 400px) {

.Tjenestertext{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #121212;
  margin: 0px;
  margin-left: 30px;

}

}
@media (max-width: 300px) {

.Tjenestertext{
  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: #121212;
  margin: 0px;
  margin-left: 20px;

}

}


@media (max-width: 700px) {
.subnav-item{
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: 1rem;
    color: #121212;
    padding: 15px 15px; /* top/bottom, left/right */
}
}

@media (max-width: 500px) {

.wrapperleft{
  width: 100%;
  height: auto;

}
.subnav-item{
    font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
    font-weight: 450;
    font-size: 0.9rem;
    color: #121212;
    padding: 10px 10px; /* top/bottom, left/right */
}
}


@media (max-width: 1000px) {

  .headertopdiv, .headertopdiv2{
    display: none;
  }

}
@media (max-width: 2100px) {
.headertop-list li {
  position: relative;
  padding-left: 35px;          /* Space for bullet */

  font-family: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 2.3rem);
  background: linear-gradient(to bottom, #cfd8e3, #2e416d);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0 0 1vh 0;
}
}
@media (max-width: 2100px) {

  .headertopdiv, .headertopdiv2{
    margin: 60px 60px 60px 60px;  /* top, right, bottom, left */
    padding: 0%;
  }

}




@media (max-width: 1500px) {

  .headertopdiv, .headertopdiv2{
    margin: 80px 40px 80px 40px;  /* top, right, bottom, left */
    padding: 0%;
  }

}



@media (max-width: 1300px) {

  .tjenester-container{

    display: flex;
    flex-direction: column;
  }

  #btn2{
    display: flex;
  }
  .textcard{
    display: none;
  }

.card:hover .card-inner {
  transform: rotateY(0deg);
}

.card-front{
  gap: 5vh;
}

}

@media (max-width: 700px) {

.tjenestercont1, .tjenestercont2{

  gap: 20px;
}
.card {
  width: 270px;
  height: 200px;
}

}
@media (max-width: 600px) {

.card {
  width: 240px;
  height: 200px;
}
}


@media (max-width: 500px) {

.tjenester-container{
  margin-top: 3vh;
  gap: 0;
}

.tjenestercont1, .tjenestercont2{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 0;

}
.card {
  width: 80%;
  height: 200px;

}
}







@media (min-width: 2000px) {

.tjenester-container{

  gap: 60px;

}

.tjenestercont1, .tjenestercont2{

  gap: 60px;
}

.card {
  width: 350px;
  height: 250px;
}
}