* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #ebebeb;
    /* --primary-color: rgb(191, 241, 241); */
    --secondary-color: #1a1819;

}

@font-face {
    font-family: poppin;
    src: url('../fonts/Poppins-Regular.ttf') format('truetype'),

}

@font-face {
    font-family: mono;
    src: url('../fonts/MartianMono-ExtraBold.ttf') format('truetype'),

}

@font-face {
    font-family: tung;
    src: url('../fonts/Tungsten-Bold.ttf') format('truetype'),

}

@font-face {
    font-family: space;
    src: url('../fonts/Space_Mono/SpaceMono-Regular.ttf') format('truetype'),

}

@font-face {
    font-family: hel;
    src: url('../fonts/helvectical/HelveticaNowDisplay-Medium.ttf') format('truetype'),

}

@font-face {
    font-family: hel-thin;
    src: url('../fonts/helvectical/HelveticaNowDisplay-Regular.ttf') format('truetype'),

}

@font-face {
    font-family: wide;
    src: url('../fonts/druk-wide-bold/DrukWideBold.ttf') format('truetype'),

}


html {
    width: 100%;
}

html,
body {
    font-size: 24px;
    overflow-x: clip;
    background-color: var(--primary-color);
}


nav {
    /* min-height: 16vh !important; */
}

.hero {
    background-image: none !important;
    background-color: var(--primary-color) !important;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 60px;
    padding-bottom: 4rem;
    padding-top: 150px !important;
    min-height: 100dvh;
    justify-content: center;

}

@media (max-width:760px) {
    .hero{
        padding-top: 130px !important;
    }
}

nav{
    position: absolute !important;  
}

nav .content,
nav .menu i {
    color: var(--secondary-color) !important;

}

nav .mobile-text{
    color: var(--secondary-color) !important;
}
nav .menu .lines .line {

    background: var(--secondary-color) !important;
}



.hero>.content {
    display: flex;
    padding: 0rem 3rem;
    padding-left: 4rem;
    gap: 2rem;
    justify-content: space-around;
    width: 100%;
    position: relative;
    top: 1rem;
    align-self: center;
}
.hero .content .img{
    width: 84vw;
    margin-inline: auto;
    position: relative;
}
.hero .content .img img {
    width: 100% !important;
    position: relative;

    /* left: -10px; */
}

.hero .content .img img {
    width: 21rem;

}

.hero .content .img .lines{
      position: absolute;
    width: 106% !important;
    height: 112%;
    top: 53.5%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.hero .text {
    display: flex;
    flex-direction: column;
    align-self: center;
    gap: 12px;
    /* width: 20rem; */
}

.hero .txt {
    display: grid;
    height: fit-content;
    gap: 5vw;
    justify-content: space-between;
    flex: 1;
    align-items: end;
    grid-template-columns: 70px 1fr;


    /*  */
        grid-template-columns: 70px 35vw;
    width: 85%;
}




.hero .text h1 {
    font-size: .7rem;
    font-family: space;
    position: relative;
    bottom: 5px;
    font-weight: lighter;
}

.hero .text h2 {
    font-size: 2.4rem;
    font-family: tung;
    text-align: left;
    flex: 1;
    font-weight: 500;
    position: relative;
    width: fit-content;
}
.hero .text h2::after{
    content: " ";
    width: 100%;
    height: 1.3px;
    background: var(--secondary-color);
    position: absolute;
    bottom: 1px;
    left: 0px;
}


@media (max-width:760px) {
    .hero{
        padding-bottom: 80px !important;
    }
    .hero>.content {
        flex-direction: column;
        padding-inline: 0px;
    }
    .hero .content .img{
        margin-top: 10px;
    }

    .hero>.content .text {
        padding: 2rem 0rem;
        padding-top: 3rem;
        width: 80%;
        position: relative;
        right: 18px;
        gap: 20px;
    }

    .hero>.content .text h1 {
        font-size: 12.5px;
        align-self: flex-end;
        position: relative;
        bottom: .55rem;
    }

    .hero>.content .text h2 {
        font-size: clamp(26px, 5.5vw, 54px);
        font-size: 8.3Zvw;
        position: relative;
        /* left: 23px; */
    }
    

    .hero .content .img img {
        width: 100%;
    }
}

@media (max-width:530px) {
    .hero>.content .img{
        margin-top: 13vw;
    }
}