:root {
    /* --darkgray: #212329;  */
    /* --brightred: #F9423D; */
    --navcolor: rgb(60, 60, 60);
    --accentcolor: rgb(0, 171, 177);
    --darkeraccentcolor: rgb(0, 130, 134);
    --altgray: rgb(115, 115, 115);
    --altgrayhighlight: rgb(140, 140, 140);
}

* { /* I don't understand this stuff, like i get why youd want no margins etc, but why at the same time? */
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Nunito', sans-serif;
}

/* -------------------------------- */
/*            SCROLL BAR            */
/* --------------------------------- */
/* Realizing putting things helps alot, when im in the mode i can locate things easy
but what if you leave and come back.. or you got other people to look at the code 
it could be hard. It's not neccessary always for smaller projects, but for this one, its really nice. 
Idk if its necessary but its kinda nice. */

::-webkit-scrollbar {
    width: 14px;
    background-color: rgb(245, 245, 245);
}

::-webkit-scrollbar-thumb {
    background: var(--altgray);
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--altgrayhighlight);
}

body {
    /* I think i like this better but also full white could be clean, make other versions of pages? */
    background-image: linear-gradient(rgb(245, 245, 245), rgb(235, 235, 235));
    background-image: linear-gradient(rgb(62, 62, 62), rgb(43, 43, 43));
    /* background: rgb(46, 46, 46); */
    
}

.nav-container { /* whats the diff between navbar and nav container*/
    width: 100%;
    background: var(--navcolor);
    box-shadow: 0px 5px 10px rgba(0,0,0,.2); /* This solved of my problem, orignally i changed nav color to be slighly lighter */
}

.navbar { 
    display: grid;
    grid-template-columns: 0.2fr auto 1fr;
    align-items: center;
    height: 80px; 
    width: 90%;
    max-width: 1720px;
    margin: 0 auto;
}

#navbar-logo {
    color: white;
    justify-self: start;
    margin-left: 20px; 
}

#navbar-logo {
    cursor: pointer;
}

.nav-menu {
    display: grid;
    grid-template-columns: repeat(4, auto);
    list-style: none;
    text-align: center;
    width: 70%;
    justify-self: end;
}

.nav-links {
    color: white;
    text-decoration: none;
    font-size: 20px;
    white-space: nowrap;
}

.nav-links:hover {
    color: var(--accentcolor);
    transition: all 0.3s ease-out;
    /* text-decoration: underline; */
}

.nav-links-btn {
    background-color: var(--accentcolor);
    padding: 6px 16px;
    border-radius: 20px;
}

.nav-links-btn:hover {
    background-color: var(--darkeraccentcolor);
    color: white;
    border-radius: 10px;
    transition: all 0.3s ease-out;
    text-decoration: none;
}

.menu-toggle .bar {
    width: 25px;
    height: 3px;
    margin: 5px auto;
    transition: all 0.3s ease-in-out;
}

.main-container {
    height: 600px;
    padding: 20px;
    margin: 0 40px;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    /* border-bottom: 3px solid rgb(241, 241, 241); */
    gap: 20px;
}

.main-container img {
    height: auto;
    width: 40%;
    border-radius: 50%;
    max-width: 500px;
    min-width: 300px;
}

.hero-text {
    max-width: 50%;
    color: white;
}

.hero-text h1 {
    font-size: 3.2vw;
    margin-bottom: 8px;
}

.hero-text p {
    font-size: 1.8vw;
    margin-bottom: 12px;
}

button {
    padding: 6px 16px;
    border-radius: 4px;
    border: none;
    background-color: var(--accentcolor);
    border-radius: 20px;
    color: white;
    font-size: 30px;
    margin-top: 8px;
    cursor: pointer;
    border: 1px solid transparent;
}

button:hover {
    background-color: transparent;
    color: var(--accentcolor);
    /* padding: 6px 16px; */
    border-radius: 10px;
    border: solid 1px var(--darkeraccentcolor);
    transition: all 0.3s ease-out;
    /* could make it pop out but idk how to do that without moving stuff yet */
}

.main-container #socials a {
    text-decoration: none;
    color: var(--altgray);
    padding: 4px;
}

.main-container #socials {
    font-size: 40px;
    /* font-size: 3vw; */
    padding: 20px 0px;
  }

.main-container #socials a:hover { /*idek if adding this even makes it look nicer or not, maybe no hover for footer is cleaner) */
    color: var(--altgrayhighlight);
    transition: all 0.3s ease-out;
}

/* .section2 {
    height: 400px;
    background-image: linear-gradient(rgb(245, 245, 245), rgb(235, 235, 235));
    padding: 40px;
    color: rgb(100, 100, 100);
}

.section2 h1 {
    text-align: center;
}

.section2 p {
    text-align: center;
    margin-bottom: 40px;
    padding: 8px;
} */

.section1 {
    display: grid;
    grid-template: repeat(auto-fit minmax(270px, 1fr));
    gap: 15px;
    /* background-image: linear-gradient(rgb(245, 245, 245), rgb(235, 235, 235)); */
    background-color: var(--altgray);
    /* color: var(--altgray); */
    /* background-color: white; */
    color: white;
    padding: 40px;
}

.section1 h1 {
    text-align: center;
}

.section1 p {
    text-align: center;
    margin: 0 100px;
}

.section2 {
    background-image: linear-gradient(rgb(245, 245, 245), rgb(235, 235, 235));
    color: var(--altgray);
    padding: 40px;
}

.section2 img {
    width: 70%;
    max-width: 70%;
}

.section2 h1 {
    text-align: center;
    padding-bottom: 20px;
}

.section2 p {
    text-align: center;
    margin-bottom: 40px;
    padding: 8px;
} 

.box-container {
    display: grid;
    grid-template: repeat(auto-fit minmax(270px, 1fr));
    gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}

.box-container .box {
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-radius: 10px;
    text-align: center;
    padding: 30px 20px;
    background-color: white;
}

#section3 {
    display: grid;
    /* grid-template: repeat(auto-fit minmax(270px, 1fr)); */
    /* gap: 15px; */
    background-color: var(--accentcolor);
    color: white;
    padding: 40px;
    margin-bottom: 40px;
    box-shadow: 0px 5px 10px rgba(0,0,0,.2);
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#section3 h1 {
    text-align: center;
    padding-bottom: 20px
}

.contact-box {
    max-width: 600px;
    background-color: #fff;
    box-shadow: 0 0 20px 0 rgba(0,0,0,.2);
    border-radius: 10px;
    justify-self: center;
    /* margin: 20px 0; */
}

form {
    margin: 35px;
}

.input-field {
    width: 400px;
    height: 40px;
    margin-top: 20px;
    padding: 0 10px;
    border: 1px solid #777;
    border-radius: 14px;
    outline: none;
    align-items: center;
    width: 100%;
    font-size: 16px;
}

.textarea-field {
    height: 150px;
    padding-top: 10px;
    resize: none;
}

.formbutton {
    border-radius: 20px;
    color: #fff;
    margin-top: 18px;
    padding: 10px;
    background-color: var(--accentcolor);
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.formbutton:hover {
    background-color: var(--darkeraccentcolor);
    border: none;
    color: white;
}

.footer {
    background-color: #3c3c3c;
    height: 160px;
    margin: auto;
    text-align: center;
    padding-top: 35px;
    position: absolute;
    width: 100%;
}

.footer a {
    text-decoration: none;
    color: var(--accentcolor);
    padding: 4px;
}

.footer a:hover { /*idek if adding this even makes it look nicer or not, maybe no hover for footer is cleaner) */
    color: var(--darkeraccentcolor);
    transition: all 0.3s ease-out;
}

.footer #socials {
    font-size: 40px;
    padding: 5px;
  }

.footer #copyright {
    color: rgb(100, 100, 100);
    font-size: 15px;
    font-weight: bold;
  
}

@media screen and (max-width: 768px) {
    .nav-container {
        position: relative;
    }

    /* .nav-bar .nav-menu:first-child {
        border-bottom: 2px solid red;
        z-index: 1;
    } */

    .nav-menu {
        display: grid;
        grid-template-columns: auto;
        background: var(--navcolor);
        margin: 0;
        width: 100%;
        position: absolute;
        top: 80px;
        left: -100%;
        opacity: 0;
        transition: all 0.5s ease;
    }

    /* #navbar-logo {
        margin-left: 20px;
    } */

    .nav-menu.active {
        background: var(--navcolor);
        left: 0;
        opacity: 1;
        transition: all 0.5s ease;
    }

    .nav-links {
        text-align: center;
        line-height: 60px;
        width: 100%;
        display: table;
        padding: 6px;
    }

    .nav-links:hover {
        background-color: var(--accentcolor);
        color: white;
        transition: all 0.3s ease-out;
    }

    .navbar {
        width: 100%;
    }

    .nav-links-btn {
        border: none;
        border-radius: 0;
        background: var(--navcolor);
        color: white;
        transition: all 0.3s ease-out;
        padding: 5px;
    }

    .nav-links-btn:hover {
        border: none;
        border-radius: 0;
        background-color: var(--accentcolor);
        color: white;
        transition: all 0.3s ease-out;
    }

    #mobile-menu {
        position: absolute;
        top: 20%;
        right: 5%;
        transform: translate(5%, 20%);
    }

    .menu-toggle .bar {
        display: block;
        background-color: white;
        cursor: pointer;
    }

    .menu-toggle:hover {
        cursor: pointer;
    }

    #mobile-menu.is-active .bar:nth-child(1) {
        transform: translateY(8px) rotate(45deg)
    }

    #mobile-menu.is-active .bar:nth-child(2) {
        opacity: 0;
    }

    #mobile-menu.is-active .bar:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg)
    }

    .main-container {
        flex-direction: column;
        gap: 0;
    }

    .hero-text p, h1 {
        text-align: center;
    }

    .main-container #socials {
        text-align: center;
    }

    .button {
        text-align: center;
    }

    /* .hero-text {
        width: 100%;
        text-align: center;;
    }

    .hero-text h1 {
        font-size: 3rem;
    } */

    /* @media (max-width: 678px) {
    
        .hero-text h1 {
            font-size: 2rem;
        }
    } */

    button {
        font-size: 20px;
    }

    .box-container {
        grid-template-columns: repeat(1, 1fr);

    }

}

@media screen and (max-width: 434px) {


    .main-container #socials {

    }

    .main-container #socials a {
        font-size: 30px;
        padding: 0;

    }

}