.image {
    /* Styles for the Home page title image */
    margin-top: 0;
    position: relative;
    width: 100%;
    height: 100vh; /* Height scales with viewport height */
    background-image: url(../Images/keramikwand.jpeg);
    background-size: cover;
    background-position: center; /* Center the image for better scaling */
    display: flex;
    justify-content: center;
    align-items: center;
}

.image .copy {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70%; /* Adjust width to be a percentage of the screen */
    padding: 2rem; /* Add padding for spacing */
    background-color: rgba(69, 140, 133, 0.70);
}

.image .page-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem; /* Relative spacing */
    flex: 0 0 auto;
    margin-left: 1rem; /* Use relative margin */
}

.image .text-wrapper {
    position: relative;
    align-self: stretch;
    font-family: "Inter-Bold", Helvetica;
    font-weight: 700;
    color: var(--color-light-1);
    font-size: 5vw; /* Font size scales with viewport width */
    margin-left: 0.5rem; /* Use relative margin */
}


.carousel-indicators .active {
    background-color: #6c757d !important;
    /*design of bottom indicators of image carousel */
}

.carousel-indicators button {
    background-color: #adb5bd !important;
    border: none;
}

.carousel-indicators button:hover {
    background-color: #6c757d;
}



.subtitle-1 { 
    color: var(--color-matching-gradient-4)

  }

  .subtitle-2, 
  #subtitle-2-link {
    color: var(--color-matching-gradient-5)

  }

  .subtitle-3 {
    color: var(--color-matching-gradient-6)

  }

  .subtitle-link {
    color: inherit; /* Inherit the text color from the parent header */
  }


  #subtitle-2-link:hover {
    text-decoration: underline;
    color: var(--color-matching-gradient-5); /* Custom color for the first subtitle */
    opacity: 0.8; /* Reduce opacity on hover */
  }
  
  .subtitle-link:hover
   {
    text-decoration: underline; 
    color: inherit; /* Inherit the text color from the parent header */
    opacity: 0.8; /* Reduce opacity on hover */
  }
  
  .subtitle-link:focus {
    outline: none; /* Remove focus outline */
  }
  

  .wrapper { 
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

}

.main {
    flex: 3;
}


.main p {
    margin-bottom: .75rem;
}


.intro-img {
  width: 25%;
  height: 25%;
  float: left;
  shape-outside: circle() margin-box;
  shape-margin: 10px;
  padding: 10px;
  padding-right: 20px;
}