




@media (max-width:992px) {
    /** Home section styling*/
   
    /** skills styling*/
    .skills-container {
        height: auto;
        min-height: 1300px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 400px);
        gap: 5%;
    }
    /********************************************/
    
}

@media (max-width: 480px) {
    
    /** Skills styling   */
    .skills-container {
        min-height: 2400px;
        height: auto;
        padding-bottom: 5%;
        display: grid;
        width: 100%;
        grid-template-columns: repeat(1, 90%);
        grid-template-rows: repeat(6, 400px);
        justify-content: center;
        gap: 30px;
        padding-bottom: 0;
    }
    
    }




    @media (max-width: 1200px) {
        html {
          font-size: 55%;
        }
      }
      
      @media (max-width: 1025px) {
        .header {
          padding: 2rem 3%;
        }
        section {
          padding: 10rem 3% 2rem;
        }
        
        .contact {
          min-height: auto;
          width: 95%;
        }
        .footer {
          padding: 2rem 3%;
        }
        .container {
          
         width: 100%;
          align-items: center;
          flex-direction: column;
          
        }
        .banner {
          
        width: 100%;
        height: 35vh;
        
      }
      .home{
        flex-direction: column;
        margin-top: 11rem;
          padding: 0;
      }
      .home-content p {
        font-size: 2.8rem;
        text-align: center;
        line-height: 1;
      
      }
      
      #btn{
        font-size: 3rem;
        
      }
      
        .banner img {
          width: 100%;
          height:60%;
        }
        .bannerbt {
          width: 100%;
          height: 50vh;
          
        }
        .bannerbt img {
          width: 100%;
          height:60%;
        }
        .box img {
        
          width: 90%;
          height: 100%;
          padding: 3rem;
          border-radius: 15%;
          transform: scale(1.1);
        }
        footer  .des ,p a{
          
          font-size: 3rem;
        }
        footer p span{
          font-size: 10rem;
        }
        
          .banner-ab{
            width: 100%;
            height: 40vh;
          }
          .banner-ab1 img {
                
                
            width: 80%;
        }
        .table__header {
          width: 100%;
          height: 0%;
          margin: 0rem;
          padding: 0;
          font-size: 3.5rem;
          text-align: center;
        }
        table, th, td {
          border-collapse: collapse;
          padding: .5 rem;
          text-align: center;
          border: 2px solid white;
          font-size: 2.8rem;
        }
        #btnbatch{
          padding:1.5rem;
          width:200px;
          font-size: 2.5rem;
          
        }
        .conh{
          flex-direction: column;
         margin-top: 3rem;
         }
         .call,.emailid{
         
          font-size: 2.2rem;
        width: 90%;
        height: 250px;
        
        margin-top: 3rem;
        padding: 2rem;
        
        }
        .add{
          width: 90%;
          margin-top: 3rem;
        }
        .about{
          flex-direction: column;
        }
           }
             
        
      
      
      @media (max-width: 768px) {
        #menu-icon {
          display: block;
        }
        .banner-ab{
          width: 100%;
          height: 55vh;
        }

        
        .navbar {
          margin-top: 22px;
          position: absolute;
          top: 3.7rem;
          left: 0;
          width: 100%;
          /* padding: 1rem 3%; */
          background: linear-gradient(
            90deg,
            rgba(2, 0, 36, 1) 0%,
            rgb(1, 19, 30),
            rgb(3, 40, 63),
            rgb(1, 19, 30),
            rgba(2, 0, 36, 1)
          );
          border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          display: none;
        }
        .navbar.active {
          display: block;
        }
        .navbar a {
          display: block;
          font-size: 2.9rem;
          margin: 3rem 2rem;
        }
        
        .home {
          flex-direction: column;
          margin-top: 10rem;
          padding: 0;
        }
        .home-content h3{
          font-size: 3.5rem;
          -webkit-text-stroke: 1px black;
        }
        .contact form {
          width: 95%;
          margin: 0.6rem auto;
          margin-bottom: 2rem;
          
        }
        .contact form .input-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
        .container {
          
          width: 100%;
          align-items: center;
          flex-direction: column;
          
        }
        .banner {
        width: 100%;
        height: 40vh;
        
        
      }
        .banner img {
          width: 100%;
          height:60%;
        }
        .bannerbt {
          width: 100%;
          height: 50vh; 
          
        }
        .bannerbt img {
          width: 100%;
          height:60%;
        }
        
        .box img {
        
          width: 90%;
          height: 100%;
          padding: 4rem;
          border-radius: 15%;
          transform: scale(1.3);
        }
        .skills-container {
          height: auto;
          min-height: 1300px;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: repeat(3, 400px);
          gap: 5%;
      }
       
        footer p span{
          font-size: 8rem;
        }
        footer  .des ,p a{
          
          font-size: 2.5rem;
        }
        
        .home-content h3 {
          font-size: 2.8rem;
          -webkit-text-stroke: 1px black;
        }
        .home-content p {
          font-size: 2.rem;
          text-align: center;
          line-height: 1;
        
        }
        .about {
          flex-direction: column;
      }
      .about img {
          width: 100%;
          margin-top: 3rem;
          border-radius: 50%;
      }
        #btn{
          font-size: 2.5rem;
          padding: 0.8;
          
        }
        .banner-ab{
          height:50% ;
        
           }
           .banner-ab1 img {
            border: solid 3px white;
            width: 80%;
        }
      

        .btn{
          justify-content:center;
          align-items:center;
          flex-direction:row;
        }
        .map{
          margin: 0rem;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          width: 100%;
          
        }
        .map iframe{
          border-radius: 15px;
         height: 300px;
         
         width:550px;
        }
        #btnbatch{
          padding:1rem;
          width:200px;
          
          
        }
        .table__header {
          width: 100%;
          height: 0%;
          margin: 0rem;
          padding: 0;
          font-size: 2.5rem;
          text-align: center;
        }
        table, th, td {
          border-collapse: collapse;
          padding: .8rem;
          text-align: center;
          border: 1px solid white;
          font-size: 2rem;
        }
        .conh{
          flex-direction: column;
         margin-top: 3rem;
         }
         .call,.emailid{
         
          font-size: 2.2rem;
        width: 90%;
        height: 250px;
        
        margin: 2rem;
        padding: 3rem;
        
        }
        .add{
          width: 90%;
         margin-top: 3rem;
        }
        .headingadm{
          font-size: 3rem;
          line-height: 2em;
          -webkit-text-stroke: 2px black;
        }
      }
      
      @media (max-width: 617px) {
        .map{
          margin: 0rem;
          flex-direction: column;
          justify-content: center;
          align-items: center;
         width: 100%;
          
        }
        .form-popup{
        margin: 0;
        padding: 0;
       }
        .map iframe{
          border-radius: 25px;
         height: 400px;
         width: 95%;
        }
        .contact form {
          width: 100%;
          margin: 0.6rem auto;
          margin-bottom: 2rem;
        }
        .contact form .input-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
        .container {
          
          width: 100%;
          align-items: center;
          flex-direction: column;
          
        }
        .banner {
        width: 100%;
        height: 50vh;
        
      }
        .banner img {
          width: 100%;
          height:60%;
        }
        .bannerbt {
          width: 100%;
          height: 50vh;
          
        }
        .bannerbt img {
          width: 100%;
          height:60%;
        }
        .box img {
        
          width: 90%;
          height: 100%;
          padding: 2.2rem;
          border-radius: 18%;
          transform: scale(1.5);
        }
        .skills-container {
          min-height: 2400px;
          height: auto;
          padding-bottom: 5%;
          display: grid;
          width: 100%;
          grid-template-columns: repeat(1, 90%);
          grid-template-rows: repeat(6, 400px);
          justify-content: center;
          gap: 30px;
          padding-bottom: 0;
      }
      .home {
        flex-direction: column;
        margin-top: 10rem;
        padding: 0;
      }
      
      
      .home-content h3 {
        font-size: 2.8rem;
        -webkit-text-stroke: 1px black;
      }
      .home-content p {
        font-size: 1.5rem;
        text-align: center;
        line-height: 1;
      
      }
      #btn{
        font-size: 2.3rem;
        padding: 0.7;
        
        
      
      }
      .banner-ab{
        height:50% ;
      
         }
         .banner-ab1 img {
              
          border: solid 3px white;
          width: 95%;
      }
      
      .btn{
        justify-content:center;
        align-items:center;
        flex-direction:column;
      }

      #btnbatch{
        padding:.8rem;
        width:180px;
        
      }
      .table__header {
        width: 100%;
        height: 0%;
        margin: 0rem;
        padding: 0;
        font-size: 2.2rem;
        text-align: center;
      }
      table, th, td {
        border-collapse: collapse;
        padding: .8rem;
        text-align: center;
        border: 1px solid white;
        font-size: 1.7rem;
      }
      .conh{
        flex-direction: column;
       margin-top: 3rem;
       }
       .call,.emailid{
       
        font-size: 2.2rem;
      width: 90%;
      height: 250px;
      
      margin: 2rem;
      padding: 3rem;
      
      }
      .add{
        width: 90%;
        margin-top: 3rem;
      }
      .about {
        flex-direction: column;
      }
      .headingadm{
        font-size: 2.5rem;
        line-height: 1em;
        -webkit-text-stroke: 1px black;
      }
    }
      
      @media (max-width: 450px) {
        html {
          font-size: 50%;
        }
        .map{
          margin: 0rem;
          flex-direction: column;
          justify-content: center;
          align-items: center;
         width: 100%;
          
        }
        .map iframe{
          border-radius: 15px;
         height: 300px;
         width: 95%;
     
        }

        .contact form.inpt-box input {
          width: 100%;
        }
        
        #menu-icon {
          display: block;
        }
        .navbar {
          margin-top: 22px;
          position: absolute;
          top: 3.7rem;
          left: 0;
          width: 100%;
          background: linear-gradient(
            90deg,
            rgba(2, 0, 36, 1) 0%,
            rgb(1, 19, 30),
            rgb(3, 40, 63),
            rgb(1, 19, 30),
            rgba(2, 0, 36, 1)
          );
          border-top: 0.1rem solid rgba(0, 0, 0, 0.2);
          box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
          display: none;
        }
        .navbar.active {
          display: block;
        }
        .navbar a {
          display: block;
          font-size: 2rem;
          margin: 3rem 2rem;
        }
        .contact form {
          width: 100%;
          margin: 0.6rem auto;
          margin-bottom: 2rem;
        }
        .contact form .input-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
        .container {
          
          width: 100%;
          align-items: center;
          flex-direction: column;
          
        }
        .banner {
        width: 100%;
        height: 40vh;
        
      }
        .banner img {
          width: 100%;
          height:60%;
        }
        .bannerbt {
          width: 100%;
          height: 50vh;
          
        }
        .bannerbt img {
          width: 100%;
          height:60%;
        }
        .box img {
        
          width: 90%;
          height: 100%;
          padding: 2.2rem;
          border-radius: 18%;
          transform: scale(1.4);
        }
        .home {
          flex-direction: column;
          margin-top: 10rem;
          padding: 0;
        }
        
        .home-content h3 {
          font-size: 2.8rem;
          -webkit-text-stroke: 1px black;
        }
        .home-content p {
          font-size: 2rem;
          text-align: center;
          line-height: 1;
        
        }
        #btn{
          font-size: 2.3rem;
          padding: .7;
          
          
        }
        footer p span a {
          
          font-size: 2.5rem;
          
        }
        footer p {
          font-size: 16px;
        }
        footer .des {
          
          font-size: 22px;
        }
        footer .des a{
          
          font-size: 22px;
        }
        .banner-ab{
          height:50% ;
        
           }

          
            .banner-ab1 img {
              
              border: solid 3px white;
              width: 90%;
          }
          
          

          .btn{
            justify-content:center;
            align-items:center;
            flex-direction:column;
          }

          #btnbatch{
            padding:.8rem;
            width:180px;
            
          }
         
          
          .table__header {
            width: 100%;
            height: 0%;
            margin: 0rem;
            padding: 0;
            font-size: 2rem;
            text-align: center;
          }
          table, th, td {
            border-collapse: collapse;
            padding: .8rem;
            text-align: center;
            border: 1px solid white;
            font-size: 1.3rem;
          }
          .conh{
            flex-direction: column;
           margin-top: 3rem;
           }
           .call,.emailid{
           
            font-size: 2.2rem;
          width: 90%;
          height: 250px;
          
          margin: 2rem;
          padding: 3rem;
          
          }
          .add{
            width: 90%;
            margin-top: 3rem;
          }
          .about {
            flex-direction: column;
          }
          .headingadm{
            font-size: 2.5rem;
            line-height: 2em;
            -webkit-text-stroke: 1px black;
          }
      }
      
      @media (max-width: 365px) {
        
        .footer {
          flex-direction: column-reverse;
        }
        .footer p {
          text-align: center;
          margin-top: 2rem;
        }
        .contact form {
          max-width: 50rem;
          margin: 0.6rem auto;
          margin-bottom: 2rem;
        }
        .contact form .input-box {
          display: flex;
          justify-content: space-between;
          flex-wrap: wrap;
          gap: 0.5rem;
        }
        .container {
          
          width: 100%;
          align-items: center;
          flex-direction: column;
          
        }
        .banner {
        width: 100%;
        height: 50vh;
        
      }
        .banner img {
          width: 100%;
          height:60%;
        }
        .bannerbt {
          width: 100%;
          height: 50vh;
          
        }
        .bannerbt img {
          width: 100%;
          height:60%;
        }
        .box img {
        
          width: 90%;
          height: 100%;
          padding: 2.2rem;
          border-radius: 18%;
          transform: scale(1.5);
        }
        .skills-container {
              min-height: 2400px;
              height: auto;
              padding-bottom: 5%;
              display: grid;
              width: 100%;
              grid-template-columns: repeat(1, 90%);
              grid-template-rows: repeat(6, 400px);
              justify-content: center;
              gap: 30px;
              padding-bottom: 0;
          }
          .home {
            flex-direction: column;
            margin-top: 10rem;
            padding: 0;
          }
          
          .home-content h3 {
            font-size: 2.8rem;
            -webkit-text-stroke: 1px black;
          }
          .home-content p {
            font-size: 1.6rem;
            text-align: center;
            line-height: 1;
          
          }
          #btn{
            font-size: 2.3rem;
            padding: 0.5;
            
          }
          footer p span a {
          
            font-size: 2.5rem;
            
          }
          footer p {
            font-size: 16px;
          }
          footer .des {
            
            font-size: 22px;
          }
          footer .des a{
            
            font-size: 22px;
          }
          .banner-ab {
          height: 50%;
            }
            .banner-ab1 img {
              
              border: solid 3px white;
              width: 90%;
          }
          #btnbatch{
            padding:.8rem;
            width:180px;
            
            
          }
          
          .table__header {
            width: 100%;
            height: 0%;
           margin: 0rem;
            padding: 0;
            font-size: 2rem;
            
          }
          table, th, td {
            border-collapse: collapse;
            padding: .8rem;
            text-align: center;
            border: 1px solid white;
            font-size: 1.3rem;
          }
          .map{
            margin: 0rem;
            flex-direction: column;
            justify-content: center;
            align-items: center;
           width: 100%;
            
          }
          .map iframe{
            border-radius: 15px;
           height: 300px;
           width: 95%;
           
          }
          .conh{
            flex-direction: column;
           margin-top: 3rem;
           }
           .call,.emailid{
           
            font-size: 2.2rem;
          width: 90%;
          height: 250px;
          
          margin: 2rem;
          padding: 3rem;
          
          }
          .add{
            width: 90%;
            margin-top: 3rem;
          }
          .about {
            flex-direction: column;
          }
          .headingadm{
            font-size: 2.5rem;
            line-height: 1em;
            -webkit-text-stroke: 1px black;
          }
      }
     
     
    