/* Responsive for  370px */

@media (min-width: 370px){
    /* about */

    .about-table tr {flex-direction: row;}
    .about-table th,
    .about-table td {width: 50%;}
}


/* Responsive for 500px */
@media (min-width: 500px){
    /* variable */

    :root{
        --fs-1: 48px;
        --fs-2: 30px;
    }

    .section-padding { padding: 80px 20px; }

    /* navbar */

    .nav { padding: 100px 16%; }

    /* Header Intro */

    .intro { padding: 80px 15%;}

    /**
    *About
    */

    .content-card .card-head {
        flex-direction: row;
        gap: 20px;
    }

    /* Portfolio */

    .portfolio-carousel-inner { width: 250%;}


    /* Contact */

    .adress address, .phone a { max-width: 300px;}

    /* Footer */

    .footer { padding: 50px 20px; }
}

/* Responsive for 768px */
@media (min-width: 768px) {
    /* Header Intro */
    .intro { padding: 80px 20;}

    /* News and Tips */
    .article-grid { grid-template-columns: 1fr 1fr;}

    /* Contact */
    .contact-form .wrapper {
        flex-direction: row;
        gap: 30px;
    }

    .contact-form .wrapper > div { width: 50%;}
}

/* Responsive for 1024px */
@media (min-width: 1024px){
    .container{
        display: flex;
        flex-direction: row-reverse;
    }

    .section-padding { padding: 80px 50px;}

    /* Header */

    header {
        width: 40%;
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        border-left: 1px solid hsla(100, 100%, 100%, 0.2);
        position: relative;
    }

    /* NavBar */

    .nav { padding: 100px 50px; position: absolute;}

    /* Header Intro */

    .intro { padding: 80px 30%;}

    /* Main */

    main {
        width: 60%;
        height: 100vh;
        overflow-y: auto;
        scroll-behavior: smooth;
        margin-top: 150px;
    }

    /* Scroll Bar */

    ::-webkit-scrollbar { width: 6px;}

    ::-webkit-scrollbar-thumb { background: hsla(100, 100%, 100%, 0.2);}

    ::-webkit-scrollbar-track { background: var(--eerie-black-dark);}

    ::-webkit-scrollbar-track:hover { background: hsla(100, 100%, 100%, 0.05);}

    .footer{ padding: 50px;}
    
}