@media (min-width: 801px) and (max-width: 1200px) {
/* ----------Fokus--------- */
#FocusContainer {
  margin-left: 1%;
  margin-right: 1%;
  padding: 10px;
}

.Focus {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.Focuscard {
  width: 33%;
  height: 300px;
  text-align: center;
  background: white;
  border-radius: 15px;
  border: 2px solid #ff6600;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

/* Titlen styles normalt */
.Focuscard h2 {
  font-size: 20px;
  color: #333;
  margin-bottom: 1px; /* Reducer margin mellem h2 og p */
}

/* Container til ikon og tekst */
.Focuscard .focuscontent {
  position: relative;
}

.focuscontent {
  width: 100%;
  height: auto;
}

/* Ikon styling */
.Focuscard i.icon {
  font-size: 100px;
  color: #ff6600;
  opacity: 1;
  visibility: visible;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Tekst styling */
.Focuscard p {
  opacity: 0; /* Skjult som standard */
  visibility: hidden; /* Skjult som standard */
  font-size: 14px;
  color: #333;
  position: relative;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  margin: 0; /* Sørg for ingen margin */
  /* margin-top: -5px; /* Alternativt kan du bruge negativ margin her */
}

/* Hover-effekt */
.Focuscard:hover i.icon {
  opacity: 0;
  visibility: hidden;
}

.Focuscard:hover p {
  opacity: 1;
  visibility: visible;
}
/* -----Slut fokus ----- */
/* ----- RouteMap ----- */
.Routemap {
    margin: 0 auto; /* Centrerer hele Routemap-containeren */
    padding: 20px;
    max-width: 800px; /* Maksimal bredde */
}

.Overskrift {
    text-align: center; /* Centrerer overskriften */
    margin-bottom: 20px;
}

.Row {
    display: flex; /* Gør rækken til en flex-container */
    justify-content: space-around; /* Placerer ikonerne jævnt */
    align-items: flex-start; /* Justerer elementerne i starten af containeren */
    margin-bottom: 20px; /* Mellemrum mellem rækkerne */
}

.IconsText {
    text-align: center; /* Centrerer tekst og ikoner */
    width: 150px; /* Fast bredde for hver ikon-container */
    min-height: 200px; /* Fast minimumshøjde for at sikre ensartede højde */
    display: flex; /* Gør IconsText til en flex-container */
    flex-direction: column; /* Arrangerer indholdet vertikalt */
    justify-content: flex-start; /* Justerer indholdet øverst i containeren */
    align-items: center; /* Centrerer indholdet horisontalt */
    overflow: hidden; /* Skjuler overskydende tekst */
  	padding-bottom: 25px;
}

.icon {
    font-size: 120px; /* Størrelse på ikonerne */
    color: #29282b; /* Farve på ikonerne ff6600*/
}

.arrow {
    font-size: 50px; /* Størrelse på pilene */
    margin: 0 10px; /* Mellemrum på begge sider af pilene */
    align-self: center; /* Centerer pilene vertikalt */
}


/* -----Slut RouteMap ----- */
.content {
    display: flex; /* Gør content-sektionen til en flex-container */
    align-items: center; /* Centrerer indholdet vertikalt */
    padding: 20px; /* Tilføj lidt plads omkring indholdet */
  	margin-left:20%;
    margin-right:20%;
    margin-bottom:75px;
}
.FirstContent {
    display: flex;
    justify-content: center; /* Horisontal centrering */
    align-items: center;     /* Vertikal centrering */
    margin-left:2%;
    margin-right:2%;
  	margin-bottom:30px;
}
.orange-link {
    color: #ff6600; /* Orange farve */
    text-decoration: none; /* Fjern standard understregning */
}

.orange-link:hover {
    text-decoration: underline; /* Understreg ved hover for at indikere linket */
}

/* Start af tre billeder */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Verdana, sans-serif;
}

.TreBilleder {
    margin-left: 1%;
    margin-right: 1%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 20px; /* Indvendig afstand */
    border-radius: 10px;
}


a.card {
    width: 33%;
    text-decoration: none; /* Fjern understregning */
    color: inherit; /* Bevar tekstfarve */
    display: inline-block;
    text-align: center;
   	border-radius: 13px;
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.5); /* Tilføjer en blød skygge */
    border: 2px solid #ff6600;
}

.image-container {
    position: relative;
    width: 100%;
    height: 300px;
    border-radius: 10px;
    overflow: hidden;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Sikrer, at billedet fylder hele containeren */
    transition: transform 0.3s ease; /* Tilføjer overgangseffekt for zoom */
    border-radius: 10px;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Fordeler pladsen mellem børnene */
    transition: opacity 0.3s ease; /* Overgang til synlighed ved hover */
}

.overlay h2 {
    margin: 2% 0;
  	background-color: #ff6600;
	color: white; /* Lysere farve for bedre synlighed */
    margin-left: 10px;
    align-self: flex-start; /* Placerer h2 i venstre hjørne */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Skygge for at adskille teksten fra baggrunden */
  	padding: 6px 10px;
  	border-radius:5px;
}

.overlay p {
    margin: 10px 0;
  	padding: 8px 12px;
    margin-right: 10px;
    background-color: #272727;
    align-self: flex-end; /* Placerer p i nederste del */
    color: white; /* Lysere farve for bedre synlighed */
    font-size: 16px; /* Større tekst */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Skygge for at adskille teksten fra baggrunden */
    padding: 8px 12px;
  	border-radius:5px;
}

.image-container:hover .overlay {
    opacity: 1; /* Gør overlayet synligt ved hover */
}

.overlay {
    opacity: 1; /* Gør det usynligt som standard */
}

.image-container:hover img {
  transform: scale(1.1); /* Zoom-effekt ved hover på billedet */
}

/* Slut af tre billeder */

.Midt-text {
    padding: 20px;           /* Valgfri - giver lidt luft rundt om teksten */
  	line-height: 2;
}

.left-text {
    padding-right: 20px; /* Tilføj lidt plads til højre for at adskille tekst og billede */
  	line-height: 2;
}

.left-text .feedback-button {
  font-size: 20px;
  background-color: #ff6600;
  padding: 12px 24px;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.left-text .feedback-button:hover {
  background-color: #e55a00;
  transform: scale(1.05);
}

.left-text .feedback-button:active {
  background-color: #cc5000;
  transform: scale(1);
}

.feedback-button{
  text-align: center;
}

.right-image {
    width: 500px;  /*Billedet fylder hele sin container */
    flex: 1; /* Gør billedsektionen fleksibel */
}

.right-image img {
    width: 300px; /* Billedet fylder hele sin container */
    height: auto; /* Beholder billedets oprindelige proportioner */
    display: block; /* Fjerner unødvendig afstand under billedet */
    margin-right: 20px; /* Juster marginen for afstand til detaljer */
    border-radius: 10px; /* Gør billedet cirkulært */
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); /* Tilføj skygge */
}
.centered {
    text-align: center;
}

.midcontent {
    display: flex; /* Gør content-sektionen til en flex-container */
    align-items: center; /* Centrerer indholdet vertikalt */
    padding: 20px; /* Tilføj lidt plads omkring indholdet */
  	margin-left:1%;
    margin-right:1%;
  	margin-bottom:2%;
  	margin-top:50px;
}

.Lastcontent {
    display: flex; /* Gør content-sektionen til en flex-container */
    align-items: center; /* Centrerer indholdet vertikalt */
    padding: 20px; /* Tilføj lidt plads omkring indholdet */
  	margin-left:1%;
    margin-right:1%;
  	margin-bottom:2%;
}
}