*{
    margin: 0;
    padding: 0;
    text-align: justify;
    gap: 3.2rem;
    font-family: Montserrat, sans-serif;
}
html{
    scroll-behavior: smooth;
}
body{
    overflow-x: hidden;
    display: grid;
    justify-content: center;
    justify-items: center;
}
li{
    list-style: none;
}
img{
    object-fit: cover;
    width: 100%;
    height: 100%;
}
/** Hover and Visited transition **/
a:link{text-decoration:none; text-decoration-color: black;}
a:hover{color: #EBE6D6;}
a:visited{text-decoration:none; color: black;}
a:link {color: black;}
a:visited {color: black;}
a{transition: all 500ms ease;}
/**Brand Color**/
.light-yellow{
    background-color: #EDDCA0;
}
.light-background{
    background-color: #FFFEF2;
}
/**Text Properties**/
p{
    font-size: 0.8rem;
    font-weight: normal;
}
.menu{
    font-size: 1.2rem;
    font-weight: normal;
    text-transform: uppercase;
}
.name{
    font-size: 1.6rem;
    font-weight: normal;
    text-transform: uppercase;
    /**line-height: 80%;**/
}
.areas{
    font-size: 2.4rem;
    font-weight: bold;
    text-transform: uppercase;
}
.big-p{
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 4.8rem;
    text-transform: uppercase;
}
.role{
    font-size: 7.2rem;
    font-weight: 900;
    line-height: 6rem;
    text-transform: uppercase;
}
footer .corner{
    color: #EBE6D6;
}
/**General Properties**/
.mobile{
    display: none;
}
.display{
    display: grid;
}
.content-width{
    justify-items: left;
    width: 80vw;
}
.hero-container{
    width: 75vw;
    height: 56vh;
}
.hero-logo{
    top: 6vh;
    position: absolute;
    z-index: 1;
    object-fit: contain;
}
.hero{
    z-index: -1;
}
.presentation{
    display: grid;
    width: 40vw;
}
.projects-width{
    display: inline-flex;
    column-gap: 3.2rem;
    width: 80vw;
}
.logo-name{
    display: grid;
    padding-top:56vh;
    /*width: 80vw;*/
    justify-items: start;
    justify-content: left;
}
.link-container{
    padding-left: 8vw;
    padding-right: 8vw;
    display: inline-flex;
    grid-column-gap: 1.6rem;
}
.mockup-container{
    display: inline-flex;
   /* gap: 15px;*/
}
.mockup{
    width: 50%;
}
.brand-color{
    height: 24vh;
    align-items: baseline;
}
.screen-container{
    /**grid-gap: 1.2rem;**/
    grid-template-columns: repeat(5, auto);
}
.background {
    display: flex;
    justify-content: center; /* Centers the logo horizontally */
    align-items: center; /* Centers the logo vertically */
    position: relative; /* Ensures positioning context for absolute elements */
    z-index: 1;
    width: 100%;
    height: 15vh;
}
.logo {
    position: absolute; /* Keeps logo fixed in place within the .hero */
    z-index: 2;
    width: 20vw; /* Adjust the width as needed */
    object-fit: contain; /* Ensures the logo retains aspect ratio */
}
/**Divider Properties**/
.point-eight{
    height: 0.8rem;
}
.one-two-rem{
    height: 1.2rem;
}
.one-six-rem{
    height: 1.6rem;
}
.three-two-rem{
    height: 3.2rem;
}
.five-six-rem{
    height: 5.6rem;
}
.seven-two-rem{
    height: 7.2rem;
}
.a-third{
    height: 30vh;
}
.a-half{
    height: 60vh;
}
.line-solid{
    border-top: 10px solid;
    border-color: black;
}