/* -- CRITICAL -- */
h2 {
    font-size: 2rem;
    text-align: center;
}

/* -- HERO -- */
@media only screen and (min-width: 0px) {
    #shootingStar {
        display: none;
    }
    #hero {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 0;
        min-height: 75vh;
        background: linear-gradient(
            rgba(25, 25, 25, 1) 10%,
            rgba(45, 45, 45, 1)
        );
        background-size: cover;
        color: white;
    }
    #hero .c {
        color: var(--gold1);
    }
    #heroText img,
    #hero h1,
    #hero h2,
    #hero button,
    #mockups {
        opacity: 0;
        animation: fadeUp 1s forwards;
    }
    #hero button {
        background: none;
        color: white;
        border: 4px solid white;
        animation: fadeUp 1s forwards;
        animation-delay: 0.3s;
    }
    #heroContent {
        padding: 2rem 5%;
        display: flex;
        flex-direction: column;
        text-align: center;
        margin-top: 2rem;
    }
    #hero h1 {
        font-size: calc(2rem + 2vw);
        margin: 0;
        animation-delay: 0.1s;
    }
    #hero h2 {
        font-size: 1.2rem;
        animation-delay: 0.2s;
    }
    #circuits {
        position: absolute;
        top: 0;
        height: 100%;
        width: 100%;
    }
    #circuits img {
        opacity: 0.3;
    }
    #circuits img:first-of-type {
        position: relative;
        width: 60%;
        top: 20svh;
        left: 0;
        animation: enterLeft 1s;
    }
    #circuits img:last-of-type {
        position: absolute;
        width: 80%;
        top: 50svh;
        right: 0;
        animation: enterRight 1s;
    }
    #mockups {
        margin-top: 2rem;
        width: 100%;
        height: auto;
        animation-delay: 0.4s;
        z-index: 2;
    }
    #heroWave {
        position: relative;
        margin-bottom: -0.6rem;
        z-index: 1;
    }
}
@media only screen and (min-width: 768px) {
    #heroContent {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
    #heroText {
        width: 100%;
        margin-right: 1rem;
    }
    #mockups {
        position: relative;
        top: 30%;
    }
    #circuits img:first-of-type {
        top: 55svh;
        width: 30%;
    }
    #circuits img:last-of-type {
        top: 10svh;
        width: 40%;
    }
}
@media only screen and (min-width: 992px) {
    #mockups {
        left: -20%;
        width: 120%;
    }
}

/* -- WHY US -- */
@media only screen and (min-width: 0px) {
    #whyUsGrid {
        display: flex;
        flex-direction: column;
    }
    .why-us-card {
        margin: 1rem 0;
    }
    .why-us-card h3 {
        margin-top: 0;
    }
    #whyUs button {
        margin-top: 1rem;
    }
}
@media only screen and (min-width: 600px) {
    #whyUs {
        text-align: center;
        font-size: large;
    }
    #whyUsGrid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 5%;
    }
    .why-us-card {
        text-align: center;
        font-size: medium;
    }
    #wuc1 {
        grid-column: 1 / 3;
    }
    #wuc2 {
        grid-column: 3 / 5;
    }
    #wuc3 {
        grid-column: 2 / 4;
    }
}
@media only screen and (min-width: 992px) {
    #whyUsGrid {
        grid-template-columns: repeat(3, 1fr);
    }
    #wuc1 {
        grid-column: 1;
    }
    #wuc2 {
        grid-column: 2;
    }
    #wuc3 {
        grid-column: 3;
    }
}

/* -- AFFORDABLE -- */
@media only screen and (min-width:0px) {
    #affordable img {
        width: 100%;
        height: auto;
    }
    #affordable ul {
        list-style-type: none;
    }
    #affordable ul li {
        margin: 20px 0;
        padding-left: 2rem;
        background-image: url(/images/checkmark-light.svg);
        background-position: 0 0;
        background-size: 1.5rem 1.5rem;
        background-repeat: no-repeat;
    }
    .dark {
        #affordable ul li {
            background-image: url(images/checkmark-dark.svg);
        }
    }
}
@media only screen and (min-width: 768px) {
    #affordable {
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
    }
    #affordableContent {
        display: flex;
        flex-direction: column;
    }
    #affordable a  {
        align-self: center;
    }
}
@media only screen and (min-width: 1200px) {
    #affordable ul {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-column-gap: 2rem;
    }
}

/* -- PORTFOLIO -- */
@media only screen and (min-width: 0px) {
    #portfolioGrid {
        display: grid;
        grid-gap: 2rem;
        align-items: center;
        justify-items: center;
    }
    .portfolio-card {
        width: 80%;
        text-align: center;
        border: 3px solid var(--midblue);
        padding: 1rem;
        border-radius: 20px;
        
    }
    .portfolio-card img {
        width: 100%;
        height: auto;
    }
}
@media only screen and (min-width: 600px) {
    #portfolioGrid {
        grid-template-columns: repeat(4, 1fr);
    }
    #poc1 {
        grid-column: 1 / 3;
    }
    #poc2 {
        grid-column: 3 / 5;
    }
    #poc3 {
        grid-column: 2 / 4;
    }
}
@media only screen and (min-width: 992px) {
    #portfolioGrid {
        grid-template-columns: repeat(3, 1fr);
    }
    #poc1 {
        grid-column: 1;
    }
    #poc2 {
        grid-column: 2;
    }
    #poc3 {
        grid-column: 3;
    }
}

/* -- PLANS -- */
@media only screen and (min-width: 0px) {
    #planGrid {
        display: grid;
        grid-gap: 2rem;
        justify-items: center;
    }
    .plan-card {
        padding: 1rem 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        border: 3px solid black;
        border-radius: 20px;
        font-weight: bold;
        text-align: center;
        width: 80%;
    }
    .dark {
        .plan-card {
            animation: boxFlicker 5s infinite;
            border: 3px solid var(--lightblue);
        }
    }
    .plan-card h3 {
        margin: 0;
        font-size: 2rem;
    }
    .plan-card ul {
        list-style-type: none;
    }
    #plans p {
        text-align: center;
        margin-bottom: 2rem;
    }
}
@media only screen and (min-width: 660px) {
    #planGrid {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
    .plan-card {
        width: 90%;
    }
    #plc1 {
        grid-column: 1 / 3;
    }
    #plc2 {
        grid-column: 3 / 5;
    }
    #plc3 {
        grid-column: 2 / 4;
    }
}
@media only screen and (min-width: 992px) {
    #planGrid {
        grid-template-columns: 1fr 1fr 1fr;
    }
    #plc1 {
        grid-column: 1;
    }
    #plc2 {
        grid-column: 2;
    }
    #plc3 {
        grid-column: 3;
    }
}

/* -- MISSION -- */
@media only screen and (min-width: 0px) {
    #mission, #missionContent {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #mission img {
        width: 100%;
        height: auto;
    }
}
@media only screen and (min-width: 768px) {
    #mission {
        display: grid;
        justify-items: center;
        grid-template-columns: 1fr 1fr;
        grid-gap: 2rem;
    }
    #missionContent {
        width: 100%;
        grid-column: 1;
        grid-row: 1;
    }
    #mission img {
        height: auto;
        grid-column: 2;
    }
}

/* -- TESTIMONIALS -- */
@media only screen and (min-width: 0px) {
    #testimonialsGrid {
        display: grid;
        grid-gap: 2rem;
    }
    .testimonial-card {
        padding: 1rem;
    }
}
@media only screen and (min-width: 992px) {
    #testimonialsGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* -- FAQ -- */
@media only screen and (min-width: 0px) {
    .accordion {
        font-weight: bold;
        font-size: medium;
        border-radius: 0px;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        text-align: left;
        border: none;
        background-color: var(--bodycolor);
        transition: background-color 250ms;
        box-shadow: none;
    }
    .accordion:hover {
        background: #cfcfcf;
        box-shadow: none;
    }
    .panel {
        padding: 0 18px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.2s ease-out;
    }
    .panel ul {
        list-style: inside;
    }
}

.dark {
    #hero {
        background-image: url(images/background-dark.svg);
    }
    #hero button {
        animation: fadeUp 1s forwards, boxFlicker 5s infinite;
        animation-delay: 0.3s;
    }
    #circuits {
        display: none;
    }
    #shootingStar {
        display: block;
        width: 4px;
        height: 8px;
        background-color: white;
        position: absolute;
        left: 5%;
        transform: rotate(-45deg);
        z-index: 0;
        box-shadow: 0px 0px 5px 0px white;
        border-radius: 10px;
        animation: shootingStar 5s infinite;
    }
    .accordion {
        background-color: var(--bodycolor);
        color: white;
    }
    .accordion:hover {
        background-color: var(--midblue);
    }
}
@media only screen and (min-width: 768px) {
    .dark {
        #shootingStar {
            left: 50%;
        }
    }
}