* {
    margin: 0;
    box-sizing: border-box;
    font-family: "AtlasGrotesk", sans-serif;
    font-optical-sizing: auto;
}


:root {

    /* Colors */

    --main-background: #F8F8F8;
    --main-background-hover: #ececec;
    --green-background: #009F76;
    --main-border: #009F76;
    --main-text: #231F20;
    --text-secondary: #6A6A6A;
    --green-text: #009F76;
    --text-white: #fff;

    /* Spacing */

    --spacing-0: 0rem;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-8: 0.5rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-36: 2.25rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-96: 6rem;


    /* Font-size */

    --font-size-0: 0rem;
    --font-size-2: 0.125rem;
    --font-size-4: 0.25rem;
    --font-size-8: 0.5rem;
    --font-size-12: 0.75rem;
    --font-size-14: 0.875rem;
    --font-size-16: 1rem;
    --font-size-20: 1.25rem;
    --font-size-24: 1.5rem;
    --font-size-32: 2rem;
    --font-size-40: 2.5rem;
    --font-size-90: 5.625rem;

}

@font-face {
  font-family: "SharpGrotesk";
  src: url("./fonts/SharpGrotesk-Medium20.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: "SharpGrotesk";
  src: url("./fonts/SharpGrotesk-Book20.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AtlasGrotesk";
  src: url("./fonts/AtlasGrotesk-Light-Trial.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "AtlasGrotesk";
  src: url("./fonts/AtlasGrotesk-Bold-Trial.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
}

body {
    background-color: var(--green-background);
    display: grid;
    grid-template-columns: 1fr 850px 240px 1fr;
    grid-template-rows: 60px 1fr 1fr 1fr 60px;
    height: 100svh;
    gap: 2px;
}

button {
    border: none;
    background: transparent;
    padding: var(--spacing-0);
}

button:hover {
    cursor: pointer;
}

div {
    background-color: var(--main-background);
}

a {
    color: var(--text-main);
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}


.home-page-btn {
    width: 250px;
}

.home-img{
    width: 100%;
}

.deatails {
    grid-area: 2/2/4/3;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.btns-wrappers {
    grid-area: 1/3/3/4;
    display: flex;
    flex-direction: column;
    gap: 2px;
    height: 100%;
    background-color: transparent;
}

.social-btn {
    width: 100%;
    height: 100%;
    font-size: var(--font-size-24);
    background-color: var(--main-background);
}

.social-btn:hover {
    background-color: var(--main-background-hover);
}


.about-page-btn {
    grid-area: 3/3/4/4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: fit-content;
    gap: var(--spacing-12);
    padding: var(--spacing-32);
    height: 100%;
}

.about-page-btn:hover {
    cursor: pointer;
}

.click-me-description {
    font-size: var(--font-size-14);
    color: var(--green-text);
    text-align: center;
    font-weight: 500;
}

.projects-and-title-wrapper {
    grid-area: 4/2/5/4;
    min-height: 200px;
    position: relative;
}

.heading {
    color: var(--main-text);
    font-size: var(--font-size-90);
    font-family: "SharpGrotesk", sans-serif;
    font-weight: 600;
}

.sub-header {
    color: var(--text-secondary);
    font-size: 38px;
    font-weight: 400;
    font-family: "SharpGrotesk", sans-serif;
    font-weight: 400;
}

.about-par {
    font-size: var(--font-size-20);
    color: var(--text-secondary);
}

.projects-box {
    display: grid;
    grid-template-columns: minmax(37%, 1fr) 1fr 1fr;
    align-items: end;
    width: 100%;
    height: 100%;
    position: relative;
    background-color: transparent;
}

.project-box {
    height: 40%;
    border-radius: var(--spacing-16) var(--spacing-16) 0 0;
    position: relative;
    transition: height 0.4s ease-in-out;
    padding-bottom: var(--spacing-8);
}

.project-box:hover {
    height: 80%;
    cursor: pointer;
}

.project-box.one {
    background-color: #B4DC19;
    grid-column: 1;
}

.project-box.two {
    background-color: #009F76;
    grid-column: 2;
    margin-left: -60px;
}

.project-box.three {
    background-color: #0F503C;
    grid-column: 3;
    margin-left: -60px;
}

.project-header {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: var(--spacing-20);
    background-color: transparent;
    color: var(--text-white);
    font-size: var(--font-size-16);
    font-weight: 300;
    height: 100%;
}

.title-and-icon-wrapper {
    background-color: transparent;
    display: flex;
    justify-content: space-between;
    font-weight: 600;
}

.project-box.one>.project-header {
    color: var(--text-main);
    font-size: var(--font-size-16);
}

.projects-title {
    position: absolute;
    bottom: 50%;
    left: 60px;
    color: var(--text-secondary);
    font-size: var(--font-size-20);
}

/* blank divs */


.header {
    height: 100%;
    grid-area: 1/2/2/3;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: var(--spacing-12);
}

.footer.one {
    height: 100%;
    grid-area: 5/1/6/2;
}

.footer.two {
    height: 100%;
    grid-area: 5/2/6/4;
}

.footer.three {
    height: 100%;
    grid-area: 5/4/6/5;
}

.left-box.one {
    height: 100%;
    grid-area: 1/1/2/2;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: var(--spacing-12);
}

.left-box.two {
    height: 100%;
    grid-area: 2/1/3/2;
}

.left-box.three {
    height: 100%;
    grid-area: 3/1/4/2;
}

.left-box.four {
    height: 100%;
    grid-area: 4/1/5/2;
}

.right-box.one {
    height: 100%;
    grid-area: 1/4/2/5;
}

.right-box.two {
    height: 100%;
    grid-area: 2/4/3/5;
}

.right-box.three {
    height: 100%;
    grid-area: 3/4/4/5;
}

.right-box.four {
    height: 100%;
    grid-area: 4/4/5/5;
}





@media (max-width: 1200px) {
    body {
        background-color: var(--green-background);
        display: grid;
        grid-template-columns: 1fr 3fr 150px 1fr;
        grid-template-rows: 60px 150px auto auto 40px;
        height: 100svh;
        gap: 2px;


    }

    .deatails {
        grid-area: 2/2/4/4;
        padding: 20px;

    }

    .heading {
        font-size: var(--font-size-40);
    }

    .sub-header {
        color: var(--text-secondary);
        font-size: var(--font-size-24);
        font-weight: 400;
    }

    .about-par {
        font-size: var(--font-size-16);
        color: var(--text-secondary);
    }

    .projects-and-title-wrapper {
        min-height: none;
        grid-area: 4 / 2 / 5 / 4;
    }

    .projects-box {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: stretch;
        gap: 20px;
        height: 100%;
        transition: none;
        padding: var(--spacing-20);
    }

    .projects-box:hover {
        height: 100%;
    }



    .project-box.one {
        grid-area: 1/1/2/1;
        border-radius: 16px 16px 16px 16px;
    }

    .project-box.two {
        grid-area: 2/1/3/1;
        margin-left: 0;
        border-radius: 16px 16px 16px 16px;
    }

    .project-box.three {
        grid-area: 3/1/4/1;
        margin-left: 0;
        border-radius: 16px 16px 16px 16px;
    }

    .about-page-btn{
        display: none;
    }

    .btns-wrappers{
       grid-area: 1/3/2/4;
       flex-direction: row; 
    }
}