#logo{
    width:100px !important;
    border-radius: 10px;
}

ul li a{
    font-size: 20px !important;
    color: black !important;
}

ul li a:hover{
    border-bottom: 1px solid blue !important;
    color: blue !important;
}

#leader{
    background-image: url('../images/building.jpg');
    background-repeat: no-repeat;
    background-position: auto;
    background-attachment: fixed;
}

.water{
    background-image: url('../images/water.jpg');
    background-position: bottom;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size:cover;
    filter:brightness(90%);
    color:white;
}

#textdescription{
    text-shadow: 2px 2px 2px solid black !important;
}

/* hover effect */
  #image-hover-container {
      position: relative !important;
      /*
      width: 300px;  
      height: 200px;
      */
      overflow: hidden;
      cursor: pointer;
    }

     

    #image-hover-container:hover img {
      transform: scale(1.05); /* Slight zoom on hover */
      transition: 0.5s;
      cursor: pointer;
    }

    #hover-text {
    position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: block;
      
      justify-content: center;
      color: white;
      font-size: 1.5em;
      background-color: rgba(0, 0, 0, 0.5); /* semi-transparent dark overlay */
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    #image-hover-container:hover #hover-text {
      opacity: 1;
    }


    #quotation{
        background-image: url('../images/water.jpg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #footer{
      background-color: royalblue !important;
    }


    @media only screen and (max-width: 600px) {
  #hidesmall {
    display: none;
  }
}