@media(max-width:768px)
{
    .loader {
        position:absolute;
        top:45%;
        left:40%;
    }

    .hero-section h4 {
        font-size:16px;
    }
    
    .hero-section img {
        width:40%;
    }


    .hero-section p {
        text-align: justify !important;
        letter-spacing: 0;
    }

    .technology h3
    {
        font-size: 16px;
    }

    .portfolio h1,h2{
        font-family: Righteous;
        font-size: 16px;
      }

      .portfolio h3 {
        font-size: 14px;
      }

      .project h3 {
        font-size: 22px;
      }

      .portfolio img {
        width:70%;
        margin-left:15%;
        margin-right:15%;
      }

      .design img,.design .card {
        width:60%;
        margin-left:20%;
        margin-right:20%;
        background-color: black;
      }
    
}

/* max width 425px */
@media(max-width:425px)
{
    .loader {
        position:absolute;
        top:45%;
        left:30%;
    }

    .hero-section h4 {
        font-size:12px;
    }
    
    .hero-section img {
        width:30%;
    }


    .hero-section p {
        text-align: justify !important;
        letter-spacing: 0;
    }

    .portfolio h1,h2{
        font-family: Righteous;
        font-size: 14px;
      }

      .portfolio h3 {
        font-size: 10px;
      }

      .project h3 {
        font-size: 16px;
      }
      .myfont {
        font-size:16px !important;
      }

      .portfolio img {
        width:60%;
        margin-left:20%;
        margin-right:20%;
      }

      .portfolio p,span {
        font-size:10px;
      }

      .design img,.design .card {
        width:70%;
        margin-left:15%;
        margin-right:15%;
        background-color: black;
      }

      .technology img {
        width:100px;
      }

      #footer h6 {
        font-size:34px;
      }
    
}




/* max width 320px */
@media(max-width:320px)
{
    .loader {
        position:absolute;
        top:45%;
        left:30%;
    }

    .navbar-brand {
        font-size: 16px;
    }

    .hero-section h4 {
        font-size:12px;
    }
    
    .hero-section img {
        width:30%;
    }


    .hero-section p {
        text-align: justify !important;
        letter-spacing: 0;
    }

    .portfolio h1,h2{
        font-family: Righteous;
        font-size: 14px;
      }

      .portfolio h3 {
        font-size: 10px;
      }

      .project h3 {
        font-size: 16px;
      }
      .myfont {
        font-size:16px !important;
      }

      .portfolio img {
        width:60%;
        margin-left:20%;
        margin-right:20%;
      }

      .portfolio p,span {
        font-size:10px;
      }

      .design img,.design .card {
        width:80%;
        margin-left:10%;
        margin-right:10%;
        background-color: black;
      }

      .technology img {
        width:100px;
      }

      #footer h6 {
        font-size:34px;
      }
    
}