@import url('variables.css');

@media screen and (min-width: 496px) {

    /* ---Header Section--- */
    #header {
        max-height: 15vh;
        position: sticky;
        top: 0;
        z-index: 10;
        transition: all 0.3s ease;
    }

    #header::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: var(--background-orange);
        transition: top 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
        opacity: 0;
        transform: translateY(-100%);
        z-index: -1;
    }

    #header.gradient-active::before {
        opacity: 1;
        transform: translateY(0);
    }

    .header-container {
        align-items: flex-start;
        box-sizing: border-box;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        justify-content: center;
        flex-grow: 0;;
    }

    /* Dropdown Content (Hidden by default) */
    .dropdown-content {
        position: absolute;
        top: 100%;
        left: 0;
        width: max-content;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 10px; /* Spacing between rows and columns */
        visibility: hidden;
        opacity: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.75s ease, overflow 0.75s step-start;
        border-radius: 10px;
    }

    .dropdown:hover .dropdown-content,
    .dropdown:focus-within .dropdown-content {
        max-height: 500px;
        transition: max-height 0.75s ease, overflow 0.75s step-end;
        visibility: visible;
        opacity: 1;
        font-size: 24px;
        background: var(--background-orange);
        height: auto;
    }

    #aicc-link {
        top: 25vh;
    }

    #aicc-auth {
        font-size: 1rem;
    }
    .dropdown-content a {
        white-space: normal;
        align-self: center;
    }


    #main-header {
        font-size: 3.5rem;
    }

    .carousel-item ul {
        font-size: 1.7rem;
    }

    .carousel-item li {
        font-size: 1.2rem;
        font-weight: normal;
    }

    #process h3 {
        font-size: 1.7rem;
    }
}

@media screen and (min-width: 546px) {

    .hamburger-menu {
        display: none;
    }

    #navigation {
        display: flex;
        box-sizing: border-box;
        gap: 1%;
        width: 90vw;
        justify-content: space-around;
        align-items: baseline;
        font-size: 1rem;
        flex-grow: 1;
    }

    #navigation ul {
        list-style-type: none;
        padding: 0;
    }

    #navigation a {
        font-family: "Lato", sans-serif;
        text-decoration: none;
        display: block;
        color: var(--background);
        animation: none;
        animation-fill-mode: forwards;
    }

    #navigation a:hover,
    .full-screen-nav a:hover {
        animation: glow-text 1.5s ease-in-out infinite alternate;
    }

    #aicc-link {
        top: 30vh;
    }
}

@media screen and (min-width: 692px) {
    #main-header {
        font-size: 4rem;
    }

    #aicc-link {
        top: 33vh;
    }

    #aicc-auth {
        font-size: 1.25rem;
    }
}

@media screen and (min-width: 768px) {

    .carousel-item ul {
        width: 60vw;
    }

    #dna-image {
        max-width: 70vw;
    }

    h2 {
        font-size: 2rem;
    }

    .card-back p {
        font-size: 1.25rem;
    }

}

@media screen and (min-width: 876px) {

    #navigation {
        font-size: 1.5rem;
    }

    #main-header {
        font-size: 4.5rem;
    }

    #aicc-link {
        top: 40vh;
    }

    #aicc-auth {
        font-size: 1.5rem;
    }
}

@media screen and (min-width: 1024px) {
    #navigation {
        font-size: 1.85rem;
    }

    .image-overlay-text {
        top: 8vh;
    }

    #main-header {
        font-size: 5.5rem;
    }

    #mission-statement-heading {
        font-size: 2em;
    }

    #mission-statement-text {
        padding: 0 2em 0 2em;
        font-size: 1.7rem;
    }

    #cta-main {
        font-size: 1.2rem;
    }

    #cta-main button {
        max-width: 35vw;
        height: 8vh;
        color: var(--background);
        box-shadow: #52380d 2px 4px 8px 0;
    }

    #aicc-link {
        top: 45vh;
    }

    .wrap-image {
        max-width: 60%;
    }

    #dna-image {
        max-width: 60vw;
    }

    .card-inner {
        width: 60vw;
    }

    #gpts-container p {
        font-size: 1.7rem;
        width: 90vw;
    }

    .footer-accordion .accordion-header {
        font-size: 1.7rem;
    }
}

/* Media Query for larger screens */
@media screen and (min-width: 1340px) {

    #logo {
        width: 110px;
        height: auto;
    }

    #navigation {
        display: flex;
        font-size: 2.15rem;
    }

    #main-header {
        font-size: 8.5rem;
    }

    #aicc-link {
        top: 50vh;
    }

    #dna-image {
        max-width: 60vw;
    }

}

@media screen and (min-width: 1440px) {
    #aicc-link {
        top: 65vh;
    }
}