@media (max-width: 768px) {
  body {
    background: var(--darkBG);
  }
  .downloadBtn {
    margin-top: 2vw;
    font-size: 2vw;
    padding: 2vw 4vw;
    color: var(--light);
    background: var(--darkBG);
    border: 1px solid var(--light);
  }
  #main #loader #topHeading {
    top: 5%;
  }
  #main #loader #topHeading h5 {
    font-size: 3vw;
  }
  #main #loader #midHeading h1 {
    font-size: 7vw;
    letter-spacing: 2px;
  }
  #main #loader #lowerLoader {
    bottom: 5%;
  }
  #main #loader #lowerLoader .circle {
    width: 10vh;
    height: 10vh;
  }
  #main #loader #lowerLoader .circle .in {
    width: 9.1vh;
    height: 9vh;
  }
  #main #loader #lowerLoader .circle::after {
    width: 6vw;
    height: 15vh;
  }
  #main #heroSection nav ul {
    padding: 8vw 5vw;
  }
  #main #heroSection nav ul li a {
    color: var(--light);
    font-size: 2.2vw;
    letter-spacing: 2px;
  }
  #main #heroSection nav ul li a .line {
    height: 0.2vw;
    background: var(--light);
  }
  #main #heroSection nav ul li:nth-child(2) {
    display: none;
  }
  #main #heroSection nav ul li:nth-child(3) {
    display: none;
  }
  #main #heroSection .rows {
    padding-top: 18vw;
  }
  #main #heroSection .rows .row {
    flex-direction: column;
    color: var(--light);
  }
  #main #heroSection .rows .row .text {
    display: none;
  }
  #main #heroSection .rows .row h1 {
    font-size: 17vw;
    font-weight: bolder;
  }
  #main #heroSection .rows .row:nth-child(1) {
    align-items: baseline;
  }
  #main #heroSection .rows .row:nth-child(2) {
    align-items: end;
  }
  #main #heroSection .rows .row #circleText {
    display: none;
  }
  #main #heroSection .rows .smallScreenText {
    display: flex;
    align-items: flex-start;
    color: var(--light);
    font-size: 2.6vw;
    padding: 12vw 5vw;
    gap: 4rem;
  }
  #main #heroSection .rows .smallScreenText .text .reveal .childSpan {
    letter-spacing: 0.6px;
    line-height: 15px;
  }
  #main #heroSection .rows #about {
    margin-top: 25vw;
    margin-bottom: 10vw;
    flex-direction: column-reverse;
    align-items: flex-start;
    gap: 8rem;
  }
  #main #heroSection .rows #about .aboutLeft {
    width: 60%;
    margin-top: 4rem;
    margin-bottom: 4rem;
  }
  #main #heroSection .rows #about .aboutLeft .aboutMyself {
    color: var(--lightText);
    text-transform: uppercase;
    font-size: 2.5vw;
  }
  #main #heroSection .rows #about .aboutLeft h1 {
    color: var(--light);
    font-size: 4.2vw;
  }
  #main #heroSection .rows #about .aboutRight {
    width: 100%;
    margin-top: 5rem;
    align-items: center;
  }
  #main #heroSection .rows #about .aboutRight .img {
    width: 45vw;
    height: 70vw;
  }
  #main #heroSection .rows #work .svg svg {
    height: 8vw;
    width: 8vw;
  }
  #main #heroSection .rows #work .row1 .svg {
    display: none;
  }
  #main #heroSection .rows #work .row1 .workText {
    padding: 6vw 5vw;
    width: 50%;
  }
  #main #heroSection .rows #work .row1 .workText h6 {
    width: 60%;
    font-size: 3vw;
  }
  #main #heroSection .rows #work .row1 .workText h5 {
    margin-top: 2.2vw;
    font-size: 3vw;
  }
  #main #heroSection .rows #work hr {
    margin: 5vw;
  }
  #main #heroSection .rows #work .fearWorks {
    margin: 5vw;
    padding: 0vw 2vw;
  }
  #main #heroSection .rows #work .fearWorks .svg svg {
    height: 7vw;
    width: 7vw;
  }
  #main #heroSection .rows #work .fearWorks .works {
    margin-top: 5vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row {
    padding: 5vw 3vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row .leftContainer {
    gap: 4vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row .leftContainer .num {
    font-size: 3vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row .leftContainer h2 {
    width: 35%;
    font-size: 3.5vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row .leftContainer p {
    width: 40%;
    font-size: 2vw;
  }
  #main #heroSection .rows #work .fearWorks .works .col .work-row .rightContainer img {
    padding: 2vw 1vw;
    width: 6vw;
  }
  #main #heroSection .projects {
    margin-top: 5vw;
  }
  #main #heroSection .projects .projectTopText .highLight {
    font-size: 3vw;
  }
  #main #heroSection .projects .projectTopText .projectBottomText {
    width: 100%;
  }
  #main #heroSection .projects .projectTopText .projectBottomText .starSVG {
    width: 8vw;
  }
  #main #heroSection .projects .projectTopText .projectBottomText .rightText .p_heading {
    font-size: 5vw;
  }
  #main #heroSection .projects .projectTopText .projectBottomText .rightText p {
    font-size: 2vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project {
    flex-direction: column;
    gap: 5vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft {
    padding-top: 5vw;
    width: 100%;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .toptext {
    gap: 2vw;
    margin-bottom: 2vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .toptext .keyword {
    padding: 0.5vw 2vw;
    font-size: 2vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .toptext .keyword:hover {
    background: var(--darkBG);
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText {
    width: 100%;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText h1 {
    font-size: 6vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText p {
    font-size: 2.2vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText .hoverBtn {
    padding: 1vw 2vw;
    font-size: 2.5vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText .hoverBtn img {
    width: 2.5vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText .hoverBtn:hover {
    background: var(--darkBG);
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText h3 {
    font-size: 3vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project .PLeft .bottomText ul li {
    font-size: 2.3vw;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project #projectImg {
    width: 100%;
    overflow: hidden;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project #projectImg .card__content {
    width: 100%;
  }
  #main #heroSection .projects .projectTopText .showChaseProjects .project #projectImg .projectImg {
    width: 100%;
  }
  #main #heroSection .social {
    height: 60vh;
  }
  #main #heroSection .social .socialInnerContainer .wrapper svg {
    top: 40%;
  }
  #main #heroSection .social .socialInnerContainer .socialLinks {
    gap: 2.5vw;
  }
  #main #project {
    background: #fff;
  }
  #main footer {
    padding: 10vw;
    height: 30vh;
  }
  #main footer #c-circle {
    position: absolute;
    width: 100vw;
    bottom: 0px;
  }
  #main footer .footerHeading {
    padding-top: 10vw;
  }
  #main footer .footerHeading h1 {
    width: 60vw;
    font-size: 6vw;
  }
  #main footer .footerHeading a {
    padding: 2vw 0vw;
  }
  #main footer .footerHeading .hoverBtn {
    width: 100%;
  }
  #main footer .end {
    font-size: 2vw;
  }
  #cursor {
    display: none;
  }
}/*# sourceMappingURL=res.css.map */