:root {
  --primary-color: #101423;
  --secondary-color: #F0D2C7;
  --cards-color: #3B425F;
  --gradient-start: #FFEAC2;
  --gradient-middle: #EED5A2;
  --gradient-end: #745D29;
  --text-color: #f1f1f1;
  --gold-color: linear-gradient(90deg, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
  --gold-shadow-color: rgba(238, 213, 162, 0.5); /* Adjust the alpha value for transparency */
}

body, html {
  background-color: var(--primary-color);
  color: var(--text-color);
  font-family: 'Jost', sans-serif;
  margin: 0;
  padding: 0;
}
h1{
  font-family: 'Jost', sans-serif;
  font-weight: 100px;
}
.navbar {
  background-color: var(--primary-color);
  color: var(--text-color);
  
}
#jost-text {
  font-family: 'Jost', sans-serif;
  font-weight: 100px;
  
}
span {
  background: var(--gold-color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
#cevat-text {
  font-family: 'Caveat', cursive;
  font-weight: 100;
  font-size: 2rem;
  background: var(--gold-color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.competenc{
  
  color: var(--text-color);
}
.navbar-menu {
  background-color: var(--primary-color);
}
#gradient-border {
  border: 0.5px solid transparent;
  border-image: linear-gradient(90deg, var(--gradient-start), var(--gradient-middle), var(--gradient-end));
  border-image-slice: 1;
}


.hero-img {
  border-radius: 150px 150px 0 0;

  
}
.sideimag {
  display: block;
}

@media (max-width: 768px) {
  .sideimag {
    display: none;
  }
}

.has-bullets {
  list-style-type: disc;
  padding-left: 20px;
  

}
.btn, .custom-button  {
  background-color: var(--cards-color);
  color: var(--gold-color);
  border: 1px solid transparent; /* Ændret til transparent for at bruge border-image */
  border-image: var(--gold-color); /* Tilføj denne linje for at bruge gradienten */
  border-image-slice: 1; /* Tilføj denne linje for at sikre, at hele gradienten bruges */
  padding: 12px 25px; 
  
}
.btn:hover, 
.btn:active  {
  background-image: var(--gold-color); /* Guld baggrund ved hover */
  color: var(--primary-color); /* Mørk farve tekst ved hover */
}
.btn-f {
  background-color: var(--gold-color);
  color: var(--text-color); /* Text color for normal state */
  border: 1px solid transparent; /* Transparent border for gradient */
  border-image: var(--gold-color); /* Use gradient for border */
  border-image-slice: 1; /* Ensure the full gradient is used */
  cursor: pointer;
  transition: all 0.3s ease; /* Smooth transition for hover/active effects */
}

.btn-f:hover, .btn-f:active {
  background-image: var(--gold-color); /* Gold gradient background */
  color: var(--text-color); /* Dark text color on hover/active */
  box-shadow: 0 4px 12px var(--gold-shadow-color); /* Add shadow effect */
  transform: scale(1.05); /* Slightly enlarge the button on hover/active */
}
.shadow {
  box-shadow: 0 4px 12px var(--gold-shadow-color);
}
.card-s{
  background-color: var(--cards-color);
  color: var(--text-color);
  
}
.card {
  background-color: var(--cards-color);
  color: var(--text-color);
  height: 100%;
  border: 1px solid transparent;
  display: flex; /* Makes the card a flex container */
  flex-direction: column; /* Stacks children vertically */
  justify-content: space-between; /* Ændret til transparent for at bruge border-image */
}
.card-content {
  flex-grow: 1; /* Ensures the content takes up available space */
  display: flex; /* Makes the content a flex container */
  flex-direction: column; /* Stacks children vertically */
  justify-content: space-between; /* Pushes the last child to the bottom */
}

.card-content .is-flex {
  margin-top: auto; /* Pushes the .is-flex div to the bottom */
}
.icon, a {
  background: var(--gold-color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.small-text {
  font-size: 1rem; /* Adjust the size as needed */
  background: var(--gold-color);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  font-family: 'Caveat', cursive;
  font-weight: lighter;
}
.arrow-container {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
      transform: translateX(-50%) translateY(0);
  }
  40% {
      transform: translateX(-50%) translateY(-10px);
  }
  60% {
      transform: translateX(-50%) translateY(-5px);
  }
}

.skils {
  display: flex;
 
}

.play-icon-container {
  position: relative;
  display: inline-block;
}

.play-icon-container {
  position: relative;
  display: inline-block;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3rem; /* Adjust the size of the play icon */
  color: var(--gold-color); /* Use your gold color variable */
 
}
.icon-card {
  font-size: 1.5rem; /* Passende størrelse for ikoner */
  cursor: pointer; /* Indikerer, at ikonet er klikbart */
  transition: transform 0.2s ease; /* Tilføjer en hover-effekt */
}

.icon-card:hover {
  transform: scale(1.2); /* Forstørrer ikonet lidt ved hover */
}
.modal-content img {
  max-width: 100%; /* Sørger for, at billedet ikke overstiger modalens bredde */
  height: auto; /* Bevarer billedets oprindelige proportioner */
  display: block;
  margin: 0 auto;
  object-fit: contain; /* Sørger for, at billedet passer naturligt inden for containeren */
  border-radius: 0; /* Fjern eventuelle afrundede hjørner, hvis det ikke ønskes */
}