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

 html,
 body {
     width: 100%;
     height: 100%;
     /* font-family: Arial, sans-serif; */
     background: #241f2d;
 }

 /* PARENT DIV */
 .main {
     width: 100%;
     height: 100vh;
     background: #241f2d;
     /* overflow: hidden; */
 }

 /* TOP DIV WITH IMAGE */
 .top {
     position: relative;

     width: 100%;
     height: 70%;

     overflow: hidden;

     border-bottom-left-radius: 50% 120px;
     border-bottom-right-radius: 50% 120px;

     display: flex;
     justify-content: center;
     align-items: center;

     color: white;
     text-align: center;
 }

 /* BLURRED BACKGROUND */
 .top::before {
     content: "";

     position: absolute;
     inset: 0;

     background:
         linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)),
         url("./bgImg.png");

     background-repeat: no-repeat;
     background-size: 100% auto;
     background-position: center top;

     filter: blur(2px);

     transform: scale(1.05);

     z-index: 1;
 }

 /* NAVBAR */
 .navbar {
     position: absolute;
     top: 0;
     left: 0;

     width: 100%;

     padding: 1px 167px;

     display: flex;
     justify-content: space-around;
     align-items: center;

     z-index: 10;
 }

 /* LEFT LOGO */
 .nav-left img {
     width: 130px;
 }

 /* CENTER LINKS */
 .nav-center {
     display: flex;
     gap: -20px;

     /* background:rgba(255,255,255,0.05); */

     padding: 8px 12px;

     border-radius: 10px;

     /* backdrop-filter:blur(8px); */
 }

 .nav-center a {
     text-decoration: none;
     color: white;

     font-size: 14px;
     font-weight: 500;

     padding: 10px 14px;

     border-radius: 8px;
 }

 /* ACTIVE LINK */
/* ACTIVE NAV ITEM */
.nav-center a.active{

    background:rgba(248, 151, 39, 0.08);

    border:1px solid rgba(255,255,255,0.12);

    /* box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.08),
    inset 0 -1px 1px rgba(255,255,255,0.04),
    0 8px 20px rgba(0,0,0,0.25); */

    backdrop-filter:blur(10px);

    color:white;
}

 /* RIGHT SOCIAL */
 .nav-right {
     display: flex;
     gap: 12px;
 }

 .nav-right a {
     width: 38px;
     height: 38px;

     background: white;

     border-radius: 10px;
     text-decoration: none;
     display: flex;
     justify-content: center;
     align-items: center;

 }

 .ri-instagram-line {
     color: #080808;
 }

 .ri-telegram-2-line {
     color: #080808;
 }

 .ri-discord-fill {
     color: #080808;
 }


 .nav-right img {
     width: 18px;
 }

 /* MONKEY IMAGE */
 .monkey {
     position: absolute;

     left: 50%;
     bottom: 1px;

     transform: translateX(-50%);

     z-index: 5;
 }

 .monkey img {
     width: 380px;
     height: 430px;

     display: block;
 }

 /* CONTENT */
 .content {
     position: relative;
     z-index: 2;
 }

 /* CONTENT */
 .content h1 {
     font-size: 98px;
     font-weight: 100;
     margin-bottom: 10px;
     font-family: ninja;
 }

 @font-face {
     font-family: 'ninja';
     src: url('./NinjaKageDemo-Rough.ttf') format('truetype');
 }

 .content p {
     font-size: 22px;
 }

 .one{
    margin-left: -777px;
    margin-bottom: -28px;
 }

 .two{
    margin-left: 777px;
    margin-top: -35px;
 }


 /* BOTTOM SECTION */
 .bottom {
     width: 100%;
     height: 30%;
     background: #241f2d;

     margin-top: -70px;

     display: flex;
     justify-content: center;
     align-items: flex-start;

     padding-top: 90px;

     color: white;
 }

 .bottom h2 {
     font-size: 50px;
     letter-spacing: 4px;
 }

 /* BOTTOM SECTION */
.bottom{
    width:100%;
    min-height:40vh;

    background:#241f2d;

    margin-top:-147px;

    padding-top:180px;
    padding-inline:80px;

    color:white;
}

/* CONTAINER */
.vision-container{
    width:100%;
}

/* TITLE */
.vision-container h2{
    text-align:center;

    font-size:30px;
    letter-spacing:8px;
    font-family: ninja;
    margin-bottom: 22px;
}

/* LINE */
.vision-line{
    position:relative;

    width:70%;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;

    margin-bottom:50px;
    margin: auto;
}

/* HORIZONTAL LINE */
.vision-line::before{
    content:"";

    position:absolute;

    width:100%;
    height:1px;

    background:rgba(255, 255, 255, 0.25);
}

/* SIDE DIAMONDS */
.diamond{
    position:absolute;

    width:10px;
    height:10px;

    border:1px solid rgba(213, 115, 10, 0.5);

    transform:rotate(45deg);

    background:rgba(213, 115, 10, 0.5);

    z-index:2;
}

.diamond.left{
    left:0;
}

.diamond.right{
    right:0;
}

/* CENTER DIAMOND */
.center-diamond{
    position:relative;
    z-index:3;

    width:20px;
    height:20px;

    border:1px solid rgba(255,255,255,0.35);

    transform:rotate(45deg);

    display:flex;
    justify-content:center;
    align-items:center;

    background:rgba(245, 130, 7, 0.5);

    font-size:12px;
}

.center-diamond::before{
    content:"◆";

    transform:rotate(-45deg);

    color:rgba(213, 115, 10, 0.5);
}

/* TEXT CONTENT */
.vision-content{
    display:flex;
    justify-content:space-around;
    gap:40px;
    margin-left: 200px;
    margin-top:23px;
}

/* PARAGRAPHS */
.vision-content p{
    width:50%;

    color:rgba(255,255,255,0.75);

    font-size:12px;
    line-height:1.5;

    letter-spacing:0.5px;
}

.vision-content p span{
    font-weight:600;
    color:white;
}