@font-face {
    font-family: font2;
    src: url('../fonts/Super\ Meatball.ttf') format('truetype'),


}




:root {
    --primary-color: ;
    --secondary-color: ;
    --accent-color: ;
    --tertiary-color: ;
    --font-1: hel;
    --font-2: ;
    /* --font-3: font3; */
    --heading-size: ;
    --para-size: ;
    --padding: ;
}

body {
    background-color: var(--secondary-color);
    color: var(--primary-color);
}

p {
    letter-spacing: 1.3px;
    line-height: 29px;

}



.hero {
    background-color: var(--primary-color);
    height: 100vh;
    padding: var(--padding);
    padding: 30px 30px;

    display: flex;
    flex-direction: column;
    gap: 40px;
}

.hero header {
    background-color: var(--secondary-color);
    height: 10vh;
    border-radius: 25px;
    padding: 25px 50px;
    background-image: linear-gradient(to top, #212121, #1e1e1e, #1a1a1a, #171717, #131313);
    width: 100%;
}


.hero .container {
    border-radius: 25px;
    min-width: 100%;
    height: 85%;
    background-color: var(--secondary-color);
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 35px 50px;
    background-image: linear-gradient(to top, #212121, #1e1e1e, #1a1a1a, #171717, #131313);
    /* padding: 5px 10px; */
}

.hero h1 {
    font-family: var(--font-4);
    font-size: 200px;
    font-weight: normal;
    width: fit-content;
    /* color: var(--secondary-color); */



    /* background: linear-gradient(0deg, #99999901, #efefef, #efefef);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; */
}

.hero .p {
    font-family: var(--font-4);
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    margin-left: auto;
    width: 100%;
}

.hero button {
    background: var(--primary-color);
    color: var(--secondary-color);
    border-radius: 10px;
    padding: 14px 30px;
    font-size: 20px;
    font-weight: normal;
    border: none;
    height: fit-content;
    margin-top: auto;
    display: flex;
    gap: 7px;
    align-items: center;

}

.hero p {
    width: 700px;
    text-align: right;
    font-weight: lighter;


}

/*  */


.section-1 {
    min-height: fit-content;
    /* background-color: var(--secondary-color);     */
    background-color: none;
    /* background: #131313; */
    /* background-image: linear-gradient(to top, #212121, #1e1e1e, #1a1a1a, #171717, #131313); */


    padding: var(--padding);
    position: relative;

}

.section-1 .container {
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.circle {
    background-color: rgba(233, 233, 233, 0.932);
    filter: blur(160px);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    position: absolute;
    bottom: 30px;
    right: 60px;
}

.section-1 .tag {
    background: #131313;

    /* background-image: linear-gradient(to top, #212121, #1a1a1a, #2d2d2d, #282828); */
    background-image: linear-gradient(to bottom, #424242, #363636, #2a2a2a, #1e1e1e, #131313);
    border-radius: 100px;
    width: fit-content;
    border: .5px solid rgb(85, 85, 85);
    box-shadow: inset 2px 2px 3px 0px rgb(95, 95, 95) ;
    font-family: var(--para-size);
    padding: 8px 25px;
    font-weight: bolder;
    margin: 0 auto;


    &:hover{
        cursor: pointer;
    }

}

.section-1 h3 {
    font-size: 80px;
    font-weight: lighter;
    text-align: center;
        font-weight: bold;
    
    /* text-align: r; */
}

.section-1 .div {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.section-1 .div>div {
    /* background-color: var(--primary-color); */
    border-radius: 15px;
    height: 23vh;
    border: 1px solid var(--primary-color)
}

.section-1 p {
    font-weight: lighter;
    /* text-align: right; */
    /* margin-left: auto; */
    width: 750px;
    /* margin-top: 100px; */
    font-size: 19px;
}

.section-1 span{
    color: rgb(139, 139, 139);
}


/*  */

.section-2 {
    padding: var(--padding);
    min-height: 100vh;

}

.section-2 .container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* column-gap: 120px; */
    gap: 50px;
    padding: 10px 60px;
}

.section-2 .container .box{
    min-height: 70vh;
    background-color: var(--primary-color);
    border-radius: 10px;
    padding:  10px;
    display: flex;

}

.section-2 .container .box .a {
    /* background-color: var(--secondary-color); */
    color: var(--primary-color);
    height: 12vh;
    width: 100%;
    border-radius: 10px;
    margin-top: auto;

    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background-image: linear-gradient(to bottom, #3a3a3a, #363636, #2a2a2a, #1e1e1e, #131313);

    transition: all .4s ease;
    
    &:hover{
        transform: translateY(-5px);
        cursor: pointer;
    }
}

.section-2 .container .box h5{
    font-size: 40px;
    font-weight: lighter;
    letter-spacing: 1.4px;
}

.section-2 .container .box .arrow{
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 10px;
    height: 100%;
    width: 60px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    /* box-shadow: inset   0px 0px 2px 2px  rgb(130, 52, 52); */
}

.section-2 .container .arrow img{
    width: 40px;
    height: 40px;
    rotate: 140deg;
}