body {
    margin: 0;
    padding: 0;
    background: radial-gradient(circle, #F5E9D7, #EDE7DC, #D9D2C5);
    background-size: cover;
    font-family: 'Merriweather', 'Playfair Display', 'EB Garamond', 'Raleway', 'Lato', 'Open Sans', serif, sans-serif;
}

/* Header Styling */
header {
    padding: 10px;
    background-color: #EDE7DC;
    text-align: center;
    border-bottom: 2px solid #D9D2C5;
}

header h1 {
    font-size: 48px;
    color: #5A5A5A;
    margin-bottom: 10px;
}

header p {
    font-size: 16px;
    color: #5A5A5A;
    margin: 0 0 10px;
    line-height: 1.5;
}

/* Container and Layout */
.container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 10px; /* Adds 10px space between the header and the main container */
}

/* Top Row: Two Columns */
.row {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.col-md-6 {
    flex: 1;
}

/* Chat Dialog Styling */
.chat-dialog {
    background-color: #FFF9E6;
    border: 2px solid #D9D2C5;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.input-area {
    display: flex;
    gap: 10px;
    background-color: #F5E9D7;
    border: 2px solid #D9D2C5;
    border-radius: 8px;
    padding: 10px;
}

.input-area textarea {
    flex: 1;
    border: none;
    background: transparent;
    color: #5A5A5A;
    font-size: 16px;
    padding: 5px;
    resize: none;
    border-radius: 8px;
}

.input-area textarea:focus {
    outline: none;
}

.input-area button {
    width: 40px;
    height: 40px;
    background-color: #5A5A5A;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
}

.input-area button:hover {
    background-color: #444;
}

.scrollable-history {
    flex: 1; /* Take available vertical space */
    overflow-y: auto; /* Enable vertical scrolling */
    background-color: #FFF9E6;
    border-radius: 8px;
    padding: 10px;
    border: 2px solid #D9D2C5;
    max-height: 300px; /* Set a maximum height to control the scroll area */
}

.boundless-mercy-policy {
    font-size: 14px;
    color: #5A5A5A;
    text-align: center;
    line-height: 1.5;
    margin-top: 10px;
}

/* Image Container */
.image-container {
    background-color: #FFF9E6;
    border: 2px solid #D9D2C5;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.image-container img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Bottom Content Styling */
.bottom-content {
    background-color: #FFF9E6;
    border: 2px solid #D9D2C5;
    border-radius: 8px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    line-height: 1.6;
    margin-top: 10px;
}

.bottom-content h3 {
    text-align: center;
    color: #5A5A5A;
    margin-bottom: 15px;
}

.bottom-content ul {
    list-style-type: disc;
    padding-left: 20px;
    color: #5A5A5A;
}

.bottom-content ul li {
    margin-bottom: 10px;
}

.bottom-content p {
    margin-top: 20px;
    text-align: center;
    font-style: italic;
    font-size: 14px;
    color: #5A5A5A;
}

h5 {
    text-align: center;
}

.tagline {
    font-style: italic;
    text-align: center;
    font-size: 0.9em; /* Adjust size as needed */
    margin: 0; /* Removes default margins */
    padding: 0; /* Removes extra padding, if any */
    color: #555; /* Optional: Change text color for a subtle look */
}

/* Wrapper to keep the border fixed */
.zoom-container {
    position: relative;
    overflow: hidden; /* Ensure zoom stays within bounds */
    border-radius: 8px; /* Matches the existing border radius */
    display: inline-block; /* Ensures the border stays tight around the content */

    /* Glow/Box-Shadow Values */
    --drop-shadow-yellow-00: drop-shadow(0 2px 5px rgba(255, 255, 0, 0.1)); /* Subtle glow */
    --drop-shadow-yellow-50: drop-shadow(0 6px 15px rgba(255, 255, 0, 0.3)); /* Stronger glow */

    --drop-shadow-red-00: drop-shadow(0 2px 5px rgba(255, 69, 58, 0.2)); /* Soft reddish glow */
    --drop-shadow-red-50: drop-shadow(0 6px 15px rgba(255, 69, 58, 0.8)); /* Deeper, more intense red glow */
    --drop-shadow-red-100: drop-shadow(0 6px 15px rgba(255, 36, 0, 1)); /* Stronger red-orange glow */

    --animation-duration: 2s;
    --fiery-animation-duration: 4s;
    --transform-origin: center;
}

/* Add a subtle zoom-in effect with a glow */
@keyframes zoomContainerDropShadow {
    0% {
        filter: var(--drop-shadow-yellow-00)
    }
    50% {
        filter: var(--drop-shadow-yellow-50)
    }
    100% {
        filter: var(--drop-shadow-yellow-00)
    }
}

/* Apply animation to landing-image */
.zoom-container.loading {
    animation: zoomContainerDropShadow var(--animation-duration) ease-in-out forwards;
    transform-origin: var(--transform-origin);
}

@keyframes fieryGlow {
    0% {
        filter: var(--drop-shadow-red-00)
    }
    50% {
        filter: var(--drop-shadow-red-100)
    }
    100% {
        filter: var(--drop-shadow-red-00)
    }
}

/* Apply animation to landing-image */
.zoom-container.fiery-glow {
    animation: fieryGlow var(--fiery-animation-duration) infinite alternate;
}

/*************************************
 *
 * BASELINE VARIABLES
 *
 *************************************/

 #landing-image {
    /* Define variables specifically for #landing-image */

    /* Base image */
    --z-index: 1;
    /* --top-position: 0;*/
    /* --left-position: 0;*/

    /* ZoomFade Values */
    --opacity-initial: 1;  /* also used in Base image */
    /* --opacity-final: 0.15; */
    --animation-duration: 2s; /* make sure this aligns with --opacity-transition-duration in Transform Values */
    --zoomfade-00-scale: 1; /* Normal size */
    --zoomfade-50-scale: 1.01; /* Subtle zoom inward (~2-3 pixels) */
    --zoomfade-100-scale: 1; /* Back to normal size */

    /* Loading Values */
    --transform-origin: center;
    --opacity-transition-duration: 2s;

    /* Glow/Box-Shadow Values */
    --boxshadow-00:  0 0 0 rgba(255, 255, 238, 0); /* No glow */
    --boxshadow-50:  0 0 20px rgba(255, 255, 0, 0.4); /* Softer glow inside */

    position: relative; /* Default positioning within zoom-container */
    z-index: var(--z-index);
    opacity: var(--opacity-initial);
}

 #conversation-image {
    /* Define variables specifically for #conversation-image */

    /* Base image */
    --z-index: 5;
    --top-position: 0;
    --left-position: 0;

    /* ZoomFade Values */
    --opacity-initial: 1;  /* also used in Base image */
    --opacity-final: 1;
    --animation-duration: .75s; /* make sure this aligns with --opacity-transition-duration in Transform Values */
    --zoomfade-00-scale: .95;
    --zoomfade-50-scale: 1.07;
    --zoomfade-100-scale: .25;

    /* Loading Values */
    --transform-origin: center;
    --opacity-transition-duration: .75s;

    /* Use variables directly for styling */
    position: absolute;
    z-index: var(--z-index);
    top: var(--top-position);
    left: var(--left-position);
    opacity: var(--opacity-initial);
    transition: opacity var(--opacity-transition-duration) ease-in-out;
}


#alpha-image, #beta-image {
    /* Define variables specifically for #alpha-image and beta-image*/

    /* Base image */
    --z-index: 10;
    --top-position: 0;
    --left-position: 0;

    /* ZoomFade Values */
    --opacity-initial: 0;  /* also used in Base image */
    --opacity-final: 1.0;
    --animation-duration: .1s; /* make sure this aligns with --opacity-transition-duration in Transform Values */
    --zoomfade-00-scale: .95;
    --zoomfade-50-scale: 1.1;
    --zoomfade-100-scale: 1;

    /* Loading Values */
    --transform-origin: center;
    --opacity-transition-duration: .75s;

    /* Use variables directly for styling */
    position: absolute;
    z-index: var(--z-index);
    top: var(--top-position);
    left: var(--left-position);
    opacity: var(--opacity-initial);
    transition: opacity var(--opacity-transition-duration) ease-in-out;
}

#alpha-image.ajVisible, #beta-image.ajVisible {
    opacity: var(--opacity-final);
}

#alpha-image {
    z-index: 20; /* On top by default */
}

#beta-image {
    z-index: 10; /* Initially behind */
}

/*************************************
 *
 * LANDING
 *
 *************************************/

/* Add a subtle zoom-in effect with a glow */
@keyframes landingImageZoom {
    0% {
        transform: scale(var(--zoomfade-00-scale)); /* Normal size */
        box-shadow: var(--boxshadow-00); /* No glow */
    }
    50% {
        transform: scale(var(--zoomfade-50-scale)); /* Subtle zoom inward */
        box-shadow: var(--boxshadow-50); /* Softer glow inside */
    }
    100% {
        transform: scale(var(--zoomfade-100-scale)); /* Back to normal size */
        box-shadow: var(--boxshadow-00); /* No glow */
    }
}

/* Apply animation to landing-image */
.zoom-container #landing-image.loading {
    animation: landingImageZoom var(--animation-duration) ease-in-out forwards;
    transform-origin: var(--transform-origin);
}


/*************************************
 *
 * CONVERSATION
 *
 *************************************/

/* Add a subtle zoom-in effect with a glow */
@keyframes conversationZoomFade {
    0% {
        transform: scale(var(--zoomfade-00-scale));
        opacity: var(--opacity-initial); /* Use initial opacity */
    }
    50% {
        transform: scale(var(--zoomfade-50-scale));
        opacity: var(--opacity-final); /* Target opacity */
    }
    100% {
        transform: scale(var(--zoomfade-100-scale));
        opacity: var(--opacity-initial); /* Return to initial opacity */
    }
}

/* Apply animation to conversation-image */
.zoom-container #conversation-image.loading {
    animation: conversationZoomFade var(--animation-duration) forwards;
    transform-origin: var(--transform-origin);
}

/*************************************
 *
 * ALPHA-BETA IMAGES
 *
 *************************************/

/* Zoom, fade-in, and stay visible for alpha-image and beta-image */
@keyframes alphaBetaZoomFade {
    0% {
        transform: scale(var(--zoomfade-00-scale));
        opacity: var(--opacity-initial);
    }
    50% {
        transform: scale(var(--zoomfade-50-scale));
        opacity: var(--opacity-final);
    }
    100% {
        transform: scale(var(--zoomfade-100-scale));
        opacity: var(--opacity-initial);
    }
}

/* Apply animation to alpha-image and beta-image  */
.zoom-container #alpha-image.loading,
.zoom-container #beta-image.loading {
    animation: alphaBetaZoomFade var(--animation-duration) ease-in-out forwards;
    transform-origin: var(--transform-origin);
}

@media (max-width: 768px) {
    .row {
        flex-direction: column; /* Stack columns vertically */
    }

    .col-md-6.text-center {
        order: -1; /* Move the right column above the left column */
    }

    .col-md-6.text-center .image-container img {
        max-width: 50%; /* Limit the image width to 50% */
        margin: 0 auto; /* Center the image horizontally */
        display: block; /* Ensure proper centering */
    }
}

/*************************************
 *
 * FOOTER
 *
 *************************************/

/* Footer Styling */
.footer {
    border-top: none; /* Remove the thick border-top */
    border-bottom: 50px solid #D9D2C5; /* Retain the bottom border */
    border-top: 2px solid #D9D2C5; /* Add a thin line like the header */
    background-color: #EDE7DC; /* Ensure background matches header */
    padding-top: 0; /* Remove any excessive top padding from the footer */
}

.footer .container {
    max-width: 1200px; /* Matches the page container */
    margin: 0 auto; /* Center aligns the footer within the page */
    padding: 0 15px; /* Matches Bootstrap's container padding */
    margin-bottom: 0; /* Ensure the container itself doesn't add extra space */
}

.footer p {
    margin-top: 5px; /* Add 5px of space between the accordion and the copyright */
}

/* Accordion Styling */
.faq-container .accordion-item {
    border: none;
    margin-bottom: 10px;
}

.faq-container {
    margin-top: 5px; /* Adds the required 5px space */
    margin-bottom: 0; /* Adds 5px space between the accordion and the copyright message */
}

.faq-container .accordion-button {
    background-color: #FFF9E6;
    color: #5A5A5A;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
}

.faq-container .accordion-button:focus {
    box-shadow: none;
}

.faq-container .accordion-body {
    background-color: #F5E9D7;
    border-radius: 5px;
    padding: 10px;
    font-size: 14px;
    color: #5A5A5A;
}

.faq-container h3 {
    text-align: center; /* Centers the heading */
    margin-bottom: 5px; /* Reduces space below the FAQ heading */
    position: relative;
    bottom: 0; /* Aligns it at the bottom */
}

.teletypeX {
    font-family: monospace;
    white-space: pre-wrap; /* Allow line breaks inside the span */
    overflow: hidden;
    display: inline-block; /* Keep span inline */
    position: relative;
    animation: typing 1s forwards;
  }

  .textX {
    display: inline; /* Ensure text flows naturally within the span */
  }

  @keyframes blinkX {
    from, to {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  .teletype {
    color:#0000;
    background:
      linear-gradient(-90deg,#000000 2px,#0000 0) 10px 0,
      linear-gradient(#000000 0 0) 0 0;
    background-size:calc(var(--n)*1ch) 200%;
    -webkit-background-clip:padding-box,text;
    background-clip:padding-box,text;
    background-repeat:no-repeat;
    animation:
      b .7s infinite steps(1),
      t calc(var(--n)*.05s) steps(var(--n)) forwards;
  }
  @keyframes t{
    from {background-size:0 200%}
  }
  @keyframes b{
    50% {background-position:0 -100%,0 0}
  }