/* Modal Header */
.modal-header {
    width: 100vw; /* Full width */
    padding: 20px; /* Comfortable padding */
    box-sizing: border-box; /* Include padding in width calculation */
    text-align: center; /* Center title text */
    background-color: rgba(254, 254, 254, 0.95); /* Slightly transparent white */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
}

.modal-links {
    padding-top: 1vh;
    width: calc(45vw - 50px);
    margin-left: auto;
    margin-right: auto;
}

.modal-header h2 {
    margin: 0; /* Remove default margin */
    font-size: 4.5rem; /* Responsive font size */
    color: #fc7401; /* Title color */
}

/* Modal Content */
.modal-content-custom {
    width: 90%; /* Responsive width */
    max-width: 600px; /* Max width to maintain readability */
    margin: auto; /* Center in the available space */
    overflow-y: auto; /* Allow scrolling within the modal */
    border-radius: 8px; /* Rounded corners for modal content */
    animation: sketchInModalContent 0.5s forwards; /* Smooth entrance animation */
    margin-left: -60px;
}

.modal-content-custom img {
    max-width: 100%; /* Ensure image is responsive and doesn't overflow */
    height: auto; /* Maintain aspect ratio */
}

/* Improved Animation for modal content */
@keyframes sketchInModalContent {
    0% {
        opacity: 0;
        transform: translateY(-20%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Fullscreen Modal */
.modal.show {
    display: flex; /* Show the modal */
}

/* Close Button */
.close {
    position: absolute; /* Position absolutely within the modal */
    top: 20px; /* Distance from the top */
    right: 20px; /* Distance from the right */
    font-size: 2rem; /* Larger clickable area */
    color: #000; /* Default color */
}

.close:hover,
.close:focus {
    color: #fc7401; /* Highlight color on hover/focus */
    cursor: pointer; /* Change cursor to indicate clickable */
}

@media (max-width: 1080px) {
  .modal-links {
    width: calc(60vw - 20px);
    margin-left: auto;
    margin-right: auto;
  }
}


@media (max-width: 767px) {
  .modal-links {
    width: calc(90vw - 20px);
    margin-left: auto;
    margin-right: auto;
  }
}