/* Import Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

/* General body styling */
body {
    font-family: 'Inter', 'Helvetica Neue', Arial, sans-serif;
    background-color: #fff;
    color: #1f2937; /* approx text-gray-800 */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* Main container: centers content */
.main-container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1rem; /* 16px */
    text-align: center;
    box-sizing: border-box;
}

/* Images container: handles layout of images and arrow */
.images-container {
    display: flex;
    flex-direction: column; /* Mobile: stacked vertically */
    align-items: center;
    justify-content: center;
    gap: 1rem; /* 16px */
    margin-bottom: 2rem; /* 32px */
}

/* Styling for the main image */
.main-image {
    width: 100%; /* Responsive width */
    max-width: 25rem; /* 400px */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain;
    border-radius: 0.5rem; /* 8px */
}

/* Main heading */
.content-heading {
    font-size: 1.5rem; /* 24px */
    font-weight: 300;
    color: #374151; /* text-gray-700 */
    margin-bottom: 1.5rem; /* 24px */
    line-height: 1.4;
}

/* Links container */
.links-container {
    display: flex;
    flex-direction: column;
    gap: 0.75rem; /* 12px */
}

/* Base link styling */
.links-container a {
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

/* Link 1 */
.link1 {
    font-size: 1.125rem; /* 18px */
    color: #1f2937; /* text-gray-800 */
}

.link1:hover {
    color: #b91c1c; /* hover:text-red-700 */
    text-decoration: underline;
}

/* Link 2 */
.link2 {
    font-size: 1rem; /* 16px */
    color: #4b5563; /* text-gray-600 */
}

.link2:hover {
    color: #2563eb; /* hover:text-blue-600 */
    text-decoration: underline;
}

/* This class is on the <br> tag to hide it on larger screens */
.mobile-break {
    display: block;
}


/* --- Responsive styles for Desktop (md: breakpoint, 768px) --- */
@media (min-width: 768px) {

    /* Larger image on desktop */
    .main-image {
        max-width: 35rem; /* 560px */
    }

    /* Larger heading */
    .content-heading {
        font-size: 1.875rem; /* 30px */
    }

    /* Hide the line break on desktop */
    .mobile-break {
        display: none;
    }
}