html, body {
    overflow-x: hidden;
    
  }

.overlay {
  pointer-events: none;
}


#particle {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100dvh;
}

#designTree {
    position: relative;
}

.size-up-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none; /* if it shouldn't block clicks */
  }

.section-about {
    overflow-x: hidden;
}



#about {
    font-size: 11.3vi;
    line-height: 100%;
    letter-spacing: -6px;
    color: rgb(255, 255, 255);

    width: 80%;
    margin-top: 13px;
  }

#h-num {
    font-size: 4.5vi;
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
    /* margin-top: -24px; */
    margin-top: -1.7rem;
}

#h-arrow {
    /* font-size: 6.5vi; */
    /* margin-top: -3vi; */
    width: 70%;
    fill: rgb(255, 255, 255);
    justify-self: center;
    font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
}


.h-num {
    font-size: 4.5rem;
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
    margin-top: 25px;
    /* height: 100px; */
    line-height: 60px;
    /* letter-spacing: -0.1rem; */
}

.h-arrow {
    line-height: 60px;
    font-size: 6.5rem;
    margin-top: 0.5rem;
    margin-right: .5rem;
    /* width: 70%; */
    fill: rgb(255, 255, 255);
    justify-self: right;
    font-family:'Segoe UI', 'Arial Narrow', Arial, sans-serif;
}

.text-column-2 {
    column-count: 2;

    padding-left: 20px !important;
    padding-right: 20px !important;
  
    /* below properties are only for beautification purpose */  
    column-gap: 50px;
    text-align: justify;
    padding: 10px;
    min-height: 100px;
    line-height: 1.3rem;
  }

  .about-head {
      scale: 20px;
  }

  .h-contain {
    width: 50vw;
    position: absolute;
}

.title {
    font-size: 4rem;
    line-height: 3.5rem;
    letter-spacing: -.3rem;
}

.track-lines {
    height: 30px;
    align-items: center;
}

.about-space {
    height: 67vh; 
}

.about-lower-third {
    margin-bottom: 70px;
}

.about-name-logo {
    justify-content: left;
}

.about-name-logo h1{
    color: rgb(255, 255, 255);
}

.about-name {
    font-size: 1rem;
    margin-top: -5px;
    width: auto; 
    height: 90px; 
    display: inline-grid;
}

.about-logo-mark {
    width: 90px;
    height: 90px;
}

.about-logo-text {
    height: 90px;
    max-width: 600px;
}

.about-lower-accent-text {
    font-size: 12px;
    height: 40px;
    width: 200px;
    display: inline-grid;
    margin-bottom: 10px;
}

.about-lower-accent-elements1 {
    padding-bottom: 45px;
    width: 50%;
}

.about-lower-accent-elements2 {
    position: relative;
    bottom:0;
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
}

.reverse {
    display: flex;
}

.bar {
    max-width: 450px;
    align-content: center;
    margin-bottom: 15px;
}


.left-load .char,
.right-load .char {
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity, filter, color;
}

.line-left {
    margin-top:100px;
    margin-bottom:-50px;
    position: relative;
    top: 0%;
    left: 50%;
    width: 25%;
    height: 2px;
    background-color: #000;
    transform: translate(-100%, -50%);
  }

.line-right {
    margin-top:100px; 
    margin-bottom:-50px; 
    position: relative;  
    top: 0%;  
    left: 50%;  
    width: 25%;  
    height: 2px;  
    background-color: #000;  
    transform: translate(0%);
  }

  .background-section {
    display: flex;
    color: rgb(0, 0, 0);
    justify-content: center;
    align-self: center;
    margin-bottom:60px;
    margin-top:100px;
    margin-left: 30px;
    margin-right: 15px;
  }

  .hello {
    font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
  }

  .hello mark {
    padding: 0px 3px 1px 3px;
  }

  .highlight {
    margin-bottom: 10px;
  }

/* For Mobile */
@media screen and (max-width: 540px) {

    #about {
        font-size: 22.3vi;
        line-height: 100%;
        /* letter-spacing: -3px; */
        margin-right: 19px;

        width: 83%;
      }
    
    #h-num {
        font-size: 9.1vi;
        margin-top: -0.75rem;
    }
    
    #h-arrow {
        /* font-size: 11.9vi; */
        margin-top: -1vi;
    }

    .h-contain {
        width: 100%;
        position: relative;
        margin-top: -25px;
    }

    .track-lines {
        margin-top: 65px;
    }
    .about-space {
        height: 44vh; 
    }

    .about-logo-mark {
        width: 79px;
        height: 79px;
        margin-top: -5px;
        margin-right: -10px;
        margin-left: -15px;
    }

    .about-name-logo {
        justify-content: center;
    }

    .about-logo-text {
        height: 0px;
        width: 0px;
    }

    .about-name {
        font-size: 1rem;
        margin-top: -5px;
        width: auto; 
        height: 70px; 
        display: inline-grid;
    }

    .about-space {
        height: 34vh; 
    }

    .about-lower-third {
    margin-bottom: 0px;
    }

    .about-upper-accent-text {
        font-size: 9px;
        margin-top: 38px;
    }
    

    .about-lower-accent-text {
        font-size: 9px;
        padding-top: 10px;
        width: 100%;
        height: 30px;
        display: inline-grid;
        margin-bottom: 15px;
    }

    .about-lower-accent-elements1 {
        height: 30px;
        margin-bottom: 80px;
        width: 50%;
    }

    .about-lower-accent-elements2 {
        margin-bottom: 10px;
    }

    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .bar {
        max-width: 450px;
        margin-left: 0px;
        margin-right: 0px;
    }

    .line-left {
        width: 0%;
        height: 0%;
        opacity: 0;
      }
    
    .line-right { 
        width: 0%; 
        height: 0%;
        opacity: 0; 
      }

    .text-column-2 {
        column-count: 2;
        font-size: 0rem;

        padding-left: 20px !important;
        padding-right: 20px !important;

        /* below properties are only for beautification purpose */  
        column-gap: 50px;
        text-align: justify;
        padding: 10px;
        min-height: 50px;
        line-height: 1rem;
    }

    .scroll-down {
        /* background-color: lawngreen; */
        /* color: rgb(0, 0, 0); */
    }

    .h-num {
        font-size: 2.5rem;
        font-family:'Roboto Mono', 'Arial Narrow', Arial, sans-serif;
        margin-top: 8px;
        line-height: 60px;
    }

    .h-arrow {
        line-height: 60px;
        font-size: 3.7rem;
        margin-top: -1.1rem;
        margin-right: .25rem;
    }

    .title {
        font-size: 2.6rem;
        line-height: 2.4rem;
        letter-spacing: -.16rem;
    }   

    .background-section {
        margin-top:80px;
    }

    .animated-section {
        padding-right: 30px;
    }

}


/* For Tablets */
@media screen and (min-width: 540px) and (max-width: 990px) {

    #about {
        font-size: 22.3vi;
        letter-spacing: -16px;
        /* line-height: 100%; */
      }
    
    #h-num {
        font-size: 9.1vi;
    }
    
    #h-arrow {
        font-size: 12.9vi;
        margin-top: -7vi;
    }
    
    .h-contain {
        width: 100%;
        position: relative;
    }

    .about-name {
        margin-top: -10px;
        width: auto; 
        height: 7vh; 
        display: inline-grid;
    }

    .about-space {
        height: 45vh; 
    }
    
    .about-logo-mark {
        width: 7vh;
    }

    .about-name-logo {
        justify-content: center;
    }

    .about-logo-text {
        height: 0px;
        width: 0px;
    }

    .about-upper-accent-text {
        font-size: 9px;
    }

    .about-lower-accent-text {
        font-size: 9px;
        padding-top: 10px;
        width: 100%;
        height: 30px;
    }

    .about-lower-accent-elements2 {
        /* position: absolute; */
        justify-content: space-between;
        margin-bottom: 15px;
    }

    .about-lower-accent-elements1 {
        height: 60px;
        margin-bottom: 0px;
    }

    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .bar {
        max-width: 350px;
        margin-left: 0px;
        margin-right: 0px;
    }

}


@media screen and (min-width: 1300px) {
.top-row{
    height: 200px;
  }

  .about-space {
    height: 60vh; 
}

}

/* For Line thickness */
@media screen and (min-width: 1575px) {

#about {
    font-size: 180px;
    line-height: 100%;
}

#h-num {
    font-size: 70px;
    margin-top: -30px;
}

/* #h-arrow {
    font-size: 108px;
} */

.h-contain {
    width: 800px;
}

.bar {
    max-width: 450px;
    margin-left: 60px;
    margin-right: 60px;
}

}