@media only screen and (min-width: 1024px) and (max-width: 1539px){}

@media only screen and (min-width: 768px) and (max-width: 1023px){}

@media screen and (max-width: 767px){

    /* ::-webkit-scrollbar {
        display: none;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        display: none;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        display: none;
      } */

      #cursor{
        visibility: hidden;
      }
      
    .top-nav ul {
       display: none;
    }

    .outer-circle {
        height: 400px;
        width: 400px;
    }

    .inner-circle {
        height: 300px;
        width: 300px;
        margin-top: 50px;
    }

    .circle {
        height: 200px;
        width: 200px;
        margin-top: 100px;
    }

    .circle-ping {
        height: 100px;
        width: 100px;
        margin-top: 150px;
    }

    .banner-image img {
        max-width: 150px;
        max-height: 150px;
    }

    .banner {
        margin-top: 130px;
    }

    .banner-text h2 {
        font-size: 30px;
        text-align: center;
    }

    .banner-image h3 {
        font-size: 32px;
        text-align: center;
    }

    .about {
        margin-top: 0;
        gap: 30px;
        flex-direction: column;
    }

    .about-image img {
        width: 250px;
        max-height: 250px;
        border-radius: 100%;
    }

    .project-text h2::after {
        width: 40px;
    }

    .project-text h2::before {
        width: 40px;
    }

    .project-text h2 {
        font-size: 30px;
        margin-top: 80px;
    }

    .about-text p {
        font-size: 20px;
    }

    .about-text h2 {
        text-align: center;
    }

    #about{
        height: 140vh;
    }

    .snap-start{
        scroll-snap-align: none;
    }

    .snap-center{
        scroll-snap-align: none;
    }

    .project-image img {
        width: 330px;
        height: 170px;
        transition: 0.3s all;
    }

    .pro {
        margin-top: 0;
    }
    
    .pro::before {
        height: 490px;
        top: 20%;
    }

    .project-detail h2 {
        font-size: 35px;
    }

    .project-detail p {
        font-size: 16px;
        text-align: justify;
    }

    .exp li {
        font-size: 18px;
    }

    .exp-detail {
        margin-top: 30px;
        margin-left: 23px;
    }

    .exp {
        width: 100vw;
        opacity: 1;
        padding: 60px;
        height: 100vh;
    }

    .exp h2 {
        font-size: 26px;
    }

    .contactinput {
        padding: 15px 5px 15px 25px;
    }

    button.btn {
        padding: 20px 137px;
    }


}

@media only screen and (min-width: 450px) and (max-width: 767px){}