/* Base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Noto Sans', sans-serif;
    line-height: 1.6;
    font-size: 16px; /* Base font size */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Content wrapper (50% width) */
.content-wrapper {
    width: 50%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: left;
}

/* Typography */
h1, h2 {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    text-align: left;
    color: #3DC2EC; /* Blue text color */
    letter-spacing: 3px;
    padding-bottom: 30px;
    margin-bottom: 0;
    word-wrap: break-word; /* Ensures text wraps properly */
    hyphens: auto; /* Enables hyphenation for better text breaks */
}

h1 {
    font-size: 6rem; /* Using rem units for better responsiveness */
    letter-spacing: 0.375rem;
}

h2 {
    font-size: 2.5rem;
    letter-spacing: 0.1875rem;
    line-height: 1.3; /* Improved line height for readability */
}

/* White text class for section 2 */
.white-text {
    color: white !important;
}

/* Hero background color text class for section 3 */
.hero-color-text {
    color: #240750 !important; /* Same as hero background color */
}

/* Science text styling (half the size of h2) */
.science-text {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    font-size: 1.25rem; /* Half of h2's 2.5rem */
    line-height: 1.5;
    color: #3DC2EC; /* Default color, overridden by white-text class */
    margin-bottom: 30px;
    text-align: left;
    word-wrap: break-word;
    hyphens: auto;
}

/* Links */
a:link, a:visited, a:hover, a:active {
    color: #3DC2EC; /* Match text color */
    text-decoration: underline;
}

/* App Store Badge */
.app-store-badge {
    width: 135px; /* Standard App Store badge width */
    height: auto;
    display: block;
    margin-top: 20px;
    margin-bottom: 30px;
}
.app-store-link {
    display: inline-block;
    text-decoration: none; /* Remove underline from the link */
}

/* App Screenshots Container */
.screenshots-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 30px;
    width: 100%;
}

/* Individual App Screenshots */
.app-screenshot {
    width: 30%; /* Takes up almost a third of the container with spacing */
    height: auto;
    border-radius: 12px; /* Rounded corners for iPhone-style screenshots */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    transition: transform 0.3s ease;
}

.app-screenshot:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
}

/* Hero Section (Full Viewport) */
.hero-section {
    background-color: #240750; /* Deep purple */
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden; /* Prevent checkmark from causing overflow */
}

/* Hero content layout with space for logo */
.hero-content {
    display: flex;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
}

.hero-text {
    flex: 1;
    text-align: left;
    padding-right: 20px;
}

/* Special styling for hero section badge */
.hero-section .app-store-badge {
    margin-bottom: 0; /* Less bottom margin in hero section */
}

/* SVG Checkmark styling */
.checkmark-container {
    width: 300px; /* Same size as original logo-space */
    height: 300px; /* Same size as original logo-space */
    display: flex;
    align-items: center;
    justify-content: center;
}

.checkmark-svg {
    height: 80vh; /* 80% of viewport height */
    max-height: 600px; /* Add max-height to prevent overflow on iPad */
    width: auto;
    filter: invert(67%) sepia(72%) saturate(1582%) hue-rotate(165deg) brightness(97%) contrast(91%); /* This filter creates the #3DC2EC blue color */
}

/* Make sure hero headings are left-aligned */
.hero-section h1,
.hero-section h2 {
    text-align: left;
}
/* Content Sections */
.section-one, .section-two, .section-three {
    padding: 100px 0;
    width: 100%;
    display: flex;
    justify-content: flex-start; /* Changed from center to flex-start for left alignment */
}

.section-one {
    background-color: #344C64; /* Dark blue-gray */
}

.section-two {
    background-color: #577B8D; /* Medium blue-gray */
}

.section-three {
    background-color: #76ABAE; /* Ny baggrundsfarve som ønsket */
}

/* Tags */
.tags {
    margin-top: 50px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    text-align: left;
}

.tags span {
    border-radius: 0; /* No rounded corners */
    display: inline-block;
    background-color: #240750; /* Same as hero background color */
    padding: 8px 14px; /* Slightly more padding for better touch targets */
    color: #3DC2EC; /* Same as hero text color */
    font-size: 0.9375rem; /* 15px in rem */
    font-weight: 400;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 180ms ease-in-out; /* Only transition background-color */
}
.tags span:hover {
    background-color: #402E7A; /* New hover state color */
    color: #3DC2EC; /* Hero text color maintained on hover */
}

/* Footer */
.footer {
    background-color: #FFFFFF; /* White footer */
    text-align: center; /* Kept centered as requested */
    padding: 80px 0;
    border-top: 1px solid #ECEAE8;
    color: black; /* Footer text is black */
}

.footer p {
    font-size: 1.125rem; /* 18px in rem */
    font-weight: 400;
}

/* Footer link styling */
.footer-link:link, .footer-link:visited {
    color: black;
    text-decoration: underline;
}

.footer-link:hover, .footer-link:active {
    color: #666;
}

/* Responsive adjustments */
@media (max-width: 1400px) {
    html {
        font-size: 16px; /* Base font size */
    }

    h1 {
        font-size: 5rem;
    }

    h2 {
        font-size: 2.25rem;
    }

    .science-text {
        font-size: 1.125rem;
    }

    .checkmark-svg {
        height: 75vh;
        max-height: 550px;
    }
}
@media (max-width: 1200px) {
    html {
        font-size: 15px; /* Slightly reduced base font size */
    }

    .content-wrapper {
        width: 70%;
    }

    h1 {
        font-size: 4.5rem;
    }

    h2 {
        font-size: 2rem;
    }

    .science-text {
        font-size: 1rem;
    }

    .tags span {
        font-size: 0.875rem;
    }

    .checkmark-svg {
        height: 70vh;
        max-height: 500px;
    }
}

/* iPad-specific media query */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .content-wrapper {
        width: 80%;
    }

    .checkmark-svg {
        height: auto; /* Override the vh-based height */
        max-height: 400px; /* Limit the height on iPad */
        max-width: 90%; /* Ensure it doesn't overflow horizontally */
    }

    .checkmark-container {
        width: 250px;
        height: 250px;
    }

    /* Fix for screenshots in section 1 on iPad */
    .screenshots-container {
        flex-wrap: wrap; /* Allow items to wrap as needed */
        justify-content: center; /* Center the items */
        gap: 20px; /* Add some space between items */
    }

    .app-screenshot {
        width: 45%; /* Make them a bit wider, 2 per row */
        margin-bottom: 20px;
    }

    /* Better typography for iPad */
    h1 {
        font-size: 4rem;
    }

    h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 992px) {
    html {
        font-size: 14px; /* Further reduced base font size */
    }

    h1 {
        font-size: 4rem;
        padding-bottom: 20px;
    }

    h2 {
        font-size: 1.75rem;
        padding-bottom: 20px;
    }

    .science-text {
        font-size: 0.875rem;
    }

    .section-one, .section-two, .section-three {
        padding: 80px 0;
    }

    .checkmark-svg {
        height: 65vh;
        max-height: 450px;
    }

    .screenshots-container {
        flex-direction: column;
        gap: 20px;
    }

    .app-screenshot {
        width: 60%;
    }
}
@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .content-wrapper {
        width: 90%;
    }

    h1 {
        font-size: 3.5rem;
        letter-spacing: 0.25rem;
    }

    h2 {
        font-size: 1.5rem;
        letter-spacing: 0.125rem;
    }

    .science-text {
        font-size: 0.85rem;
        letter-spacing: 0.0625rem;
    }

    .hero-content {
        flex-direction: column;
    }

    .hero-text {
        padding-right: 0;
        padding-bottom: 30px;
    }

    .checkmark-container {
        width: 200px;
        height: 200px;
        margin: 0 auto;
    }

    .checkmark-svg {
        height: 50vh;
        max-height: 350px;
    }

    .tags span {
        font-size: 0.8125rem;
        padding: 6px 10px;
    }

    /* Slightly smaller App Store badge on mobile */
    .app-store-badge {
        width: 120px;
    }

    .screenshots-container {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .app-screenshot {
        width: 70%;
    }
}
@media (max-width: 576px) {
    html {
        font-size: 13px;
    }

    .content-wrapper {
        width: 100%;
        padding: 0 15px;
    }

    h1 {
        font-size: 3rem;
        letter-spacing: 0.1875rem;
        padding-bottom: 15px;
    }

    h2 {
        font-size: 1.25rem;
        letter-spacing: 0.0625rem;
        padding-bottom: 15px;
    }

    .science-text {
        font-size: 0.8rem;
        padding-bottom: 15px;
    }

    .section-one, .section-two, .section-three, .footer {
        padding: 60px 0;
    }

    .checkmark-container {
        width: 150px;
        height: 150px;
    }

    .checkmark-svg {
        height: 40vh;
        max-height: 250px;
    }

    .footer p {
        font-size: 1rem;
    }

    .tags {
        gap: 8px;
    }

    .tags span {
        font-size: 0.75rem;
        padding: 5px 8px;
    }

    .app-screenshot {
        width: 85%;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.5rem;
    }

    .science-text {
        font-size: 0.75rem;
    }

    .tags {
        margin-top: 30px;
        gap: 6px;
    }

    .tags span {
        font-size: 0.7rem;
        padding: 4px 7px;
    }

    .checkmark-svg {
        height: 35vh;
        max-height: 200px;
    }

    .app-screenshot {
        width: 100%;
    }
}
/* Tilføj disse CSS-regler til slutningen af din style.css fil */

@media (max-width: 768px) {
    /* Centrér alt indhold i hero section på mobil */
    .hero-section {
        text-align: center;
    }

    .hero-text {
        text-align: center;
        padding-right: 0;
        padding-bottom: 0; /* Fjern padding i bunden */
        order: 2; /* Ændre rækkefølgen, så checkmark kommer først */
    }

    /* Centrér h1 og h2 i hero section */
    .hero-section h1,
    .hero-section h2 {
        text-align: center;
    }

    /* Centrér app store badge */
    .hero-section .app-store-badge {
        margin-left: auto;
        margin-right: auto;
    }
/* Flyt checkmark over teksten */
    .checkmark-container {
        margin: 0 auto 30px;
        order: 1; /* Sæt checkmark først i flex-containeren */
        width: 150px;
        height: 150px;
    }

    /* Ændre flex-direction og tilføj order til hero-content */
    .hero-content {
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    /* Gør science-text større, samme som h2 */
    .science-text {
        font-size: 1.5rem !important; /* Samme størrelse som h2 på mobil */
    }

    /* Forbedret visning af screenshots på mobil - slider håndteres af JS */
    .screenshots-container {
        display: block;
        position: relative;
        text-align: center;
    }
}

/* Ekstra små skærme */
@media (max-width: 480px) {
    /* Behold science-text størrelse */
    .science-text {
        font-size: 1.25rem !important;
    }
}