@font-face {
    font-family: 'Synco';
    src: url('../fonts/Syncopate-Regular.ttf') ; /* Adjust the path as needed */
    font-weight: normal; /* or 400 */
    font-style: normal; /* or italic, if it's an italic font */
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf'); /* Adjust the path as needed */
    font-weight: 100; /* or 400 */
    font-style: normal; /* or italic, if it's an italic font */
    font-display: swap;
}
@font-face {
    font-family: 'Montserrat3';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf'); /* Adjust the path as needed */
    font-weight: normal; /* or 400 */
    font-style: normal; /* or italic, if it's an italic font */
    font-display: swap;
}

.images-type-boat{
    display: flex;
    width: 100%;
  }
  
.image-type-boat-link {
    position: relative;
    width: 50%;
    overflow: hidden;
  }
  
.image-type-boat-link img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Maintain aspect ratio */
    filter: grayscale(100%); /* Make the image black and white */
    transition: filter 0.3s ease, transform 0.3s ease; /* Smooth transition for filter and zoom */
  }

.image-type-boat-link img:hover{
    filter: grayscale(0);
      transform: scale(1.1); /* Zoom in effect */
}
  
  .image--type-boat-text {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centers the text horizontally and vertically */
    color: white;
    padding: 5px;
    border: 2px solid white; /* White border line */
    text-align: center; /* Ensures the text is centered inside the box */
    max-width: 90%; /* Prevents text from touching the edges */
    font-family: 'Synco', sans-serif;
    font-size: 4vh;
  }

@media screen and (max-width: 1320px){
    .image--type-boat-text{
        font-size: 2vh;
    }
}
@media screen and (max-width: 688px){
    .image--type-boat-text{
        font-size: 2vh;
        filter: grayscale(0%);
    }
}
@media screen and (max-width: 1024px){
  .image-type-boat-link img{
    filter: none;
  }
} 
@media screen and (max-width: 700px) {
  .image-type-boat-link {
    width: 100%; /* Full width for smaller screens */
}

.images-type-boat {
    flex-direction: column;
}

}