/* hi troy */

body, h1, h2, h3, p, ul, li {
    margin: 0;
    padding: 0;
}

body{
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrollbars from appearing */
    height: 100%;
    min-height: 100vh;      /* Take full viewport height */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    background-color: red; /* Just for visibility */
}

body.index {
    background-color: white;
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;   /* Take full viewport width */
    height: 100%;  /* Take full viewport height */
}

.image-wrapper {
    position: relative; /* Keep this if you plan to absolutely position an overlay/circle inside it */
    /* Remove width/height/max-width here, let the image control the wrapper size */
    /* Or set explicit dimensions if the wrapper needs a specific size independently */
    display: flex; /* Make it a flex container too to center the image if needed, though not strictly required with outer flex */
    justify-content: center;
    align-items: center;
    /* The wrapper will naturally adapt to the size of its child image here */
    max-width: 100%; /* This is fine to prevent wrapper from overflowing */
    max-height: 100%; /* This is fine to prevent wrapper from overflowing */
}

.responsive-image {
    display: block;
    width: auto;        /* Maintain aspect ratio */
    height: auto;       /* Maintain aspect ratio */
    max-width: 100vw;    /* Image will not exceed its parent's width */
    max-height: 100vh;    /* Image will not exceed its parent's width */
    object-fit: contain;
}

.circle {
    position: absolute; /* Position the circle relative to the image-wrapper */
    background-color: red; /* Red circle with some transparency */
    border-radius: 50%; /* Makes it a circle */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    /* Animation for the initial pulsating effect */
    animation: pulsate 0.7s infinite ease-in-out;
    /* Smooth out the size changes on hover and click */
    transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
    z-index: 1000;
}

/* 1. Pulsating Animation */
@keyframes pulsate {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.08);
    }
    100% {
        transform: scale(1);
    }
}

.circle.expand {
    transform: scale(100);
    transition: transform 0.7s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/* header */

.main-header {
    position: fixed;
    width: 100%; /* Make the header span the full width of the page */
    padding: 20px 20px; /* Some padding around the content inside the header */
    top: 0; /* Sticks it to the very top */
    left: 0; /* Sticks it to the very left */
}

.fixed-logo-header {
    position: fixed; /* Makes the header sticky */
    z-index: 1000; /* Ensures it stays on top of other content */
    padding: 20px 20px; /* Some padding around the content inside the header */
    top: 0; /* Sticks it to the very top */
    left: 0; /* Sticks it to the very left */
    /* Optional: Add a background or shadow if you want it to stand out */
    /* background-color: rgba(255, 255, 255, 0.9); */
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.1); */
}

.logo img {
    height: 50px; /* Set a fixed height for your logo */
    /* width: auto; Let the width adjust proportionally */
    display: block; /* Remove any extra space below the image */
}

.logo a {
    text-decoration: none; /* Remove underline from logo link */
    /* If your logo isn't an image and is text, you might style it here */
    color: #333;
    font-size: 24px;
    font-weight: bold;
}

.logo-container {
    position: relative; /* This is crucial for positioning children absolutely */
    display: flex; /* Or block, depending on your layout needs. Inline-block ensures it only takes up the space of its content. */
    /* You might want to set a specific width/height if your logo image is not the exact size you want its container to be */
    width: 50%;
    justify-content: center;
}





/* main */

.fade-in-text a {
    text-decoration: none;
    color:white;
}

.fade-in-text {
    font-family: Helvetica, Arial, sans-serif;
    font-size:40pt;
    font-weight: 500;
    opacity: 0; /* Start with opacity 0 (invisible) */
    animation: fadeIn 2s forwards; /* Apply the fadeIn animation */
    text-align: center;
}

@keyframes fadeIn {
  from {
    opacity: 0; /* Starting opacity */
  }
  to {
    opacity: 1; /* Ending opacity (fully visible) */
  }
}