body {
            font-family: 'Inter', sans-serif;
            background-color: #000;
        }
 /* Anchor links  */
         .grow-link {
                display: inline-block;
                font-size: 16px;
                transition: transform 0.3s ease;
            }

            .grow-link:hover {
                transform: scale(1.03);
                font-weight: bold;
                color: rgb(0, 191, 255);
            }

        /* Drawer animation */
        .drawer {
            transform: translateX(100%);
            transition: transform 0.3s ease-in-out;
        }

        .drawer.open {
            transform: translateX(0);
        }

        /* Overlay */
        #overlay {
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease-in-out;
        }

        #overlay.show {
            opacity: 1;
            pointer-events: auto;
        }

        /* Mobile nav animation */
        .mobile-nav {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-in-out;
        }

        .mobile-nav.open {
            max-height: 300px;
        }

        .hover-grow {
  padding: 12px 24px;
  font-size: 16px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.3s ease; /* Essential for smooth motion */
}

.hover-grow:hover {
  transform: scale(.75); /* Scales up to 105% */
}

.hover-slide {
  position: relative;
  padding: 12px 24px;
  background-color: #2c3e50;
  color: white;
  border: none;
  overflow: hidden; /* Keeps hidden pseudo-element contained */
  z-index: 1;
  cursor: pointer;
}

.hover-slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* Hidden off-screen to the left */
  width: 100%;
  height: 100%;
  background-color: #723ce7;
  transition: left 0.3s ease;
  z-index: -1; /* Placed behind text */
}

.grow-link {
                display: inline-block;
                font-size: 16px;
                transition: transform 0.3s ease;
            }

            .grow-link:hover {
                transform: scale(1.75);
                font-weight: bold;
            }

.hover-slide:hover::before {
  left: 0; /* Slides into view */
}
.image-card {
  position: relative;
  width: 300px;
  height: 300px;
  overflow: hidden; /* Masks scaling image borders */
}

.image-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.image-card .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0); /* Invisible by default */
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

/* Target adjustments when wrapper component is hovered */
.image-card:hover img {
  transform: scale(1.1);
}

.image-card:hover .overlay {
  background: rgba(0, 0, 0, 0.6); /* Darkens on hover */
}

.verse {
    margin-left: 2em;
    margin-right: 2em;
    margin-bottom: 0.5em;
    font-size: 1em;
    font-weight: bold;
}

blockquote p {
    padding: 10px;
    background: #eee;
    border-radius: 5px;
}