@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');


body{background-color:#212428!important;}
h1,h2,h3,h4,h5,h6,p{font-family: 'Montserrat', sans-serif;margin:0px; padding:0px;color:#c4cfde ;}
li{list-style:none;color: #c4cfde;}
a,a:hover{ font-family: 'Montserrat', sans-serif;margin:0px;padding: 0px !important;text-decoration:none!important}


html{scroll-behavior: smooth;}
body::-webkit-scrollbar {
  background-color: transparent;
  width: 3px;
}

body::-webkit-scrollbar-thumb {
  background-color: #ff014f;
  border-radius: 50px;
}
 


nav {

  height: 100%;
  width: 18%;
 
  
}


#profileimg {
  margin-left: 20px;
  border-radius: 100px;
  width: 200px;
  border: 5px solid #32363b;
  height: auto;
  box-shadow: 10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
  margin-top:50px;
}

nav ul {backdrop-filter: blur(40px);
  float: right;
  margin-right: 20px;
  margin: auto;
  overflow-y: scroll;
  
}


nav ul::-webkit-scrollbar {
  width: 5px;               /* width of the entire scrollbar */
}
nav ul::-webkit-scrollbar-track {
  background: #070707;        /* color of the tracking area */
}

nav ul::-webkit-scrollbar-thumb {
  background-color: #212428;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid #070707;}

nav ul li {
  display: inline-block;
  line-height: 50px;
  margin: 0 5px;
}


.box{width:80%;
margin:auto;
margin-top: 40px;
margin-bottom: 30px;
}

nav ul li a {
  color: #c4cfde;
  font-size: 16px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
  font-weight: 500;
}

a.active,
a:hover {
 color: #ff014f;
  transition: .5s;
}

.checkbtn {
  font-size: 30px;
  color: #ff014f;
  float: right;
  line-height: 80px;
  margin-right: 20px;
  cursor: pointer;
  display: none;
}

#check {
  display: none;
}




.box2{width:80%;
  margin:auto;
  margin-top: 50px;
  margin-bottom:60px;
  border-top: 1px solid #c4cfde;
  text-align: center;
  }

.box2 h1{font-family:'poppins', sans-serif; 
        color: #c4cfde;
        font-size: 14px;
        text-transform: uppercase;
        letter-spacing: 2px;
        font-weight: 500;
       text-align: center!important;
        margin-bottom: 20px;
        margin-top: 40px;
       
}


  .facebook_icon {
    color:  #c4cfde;
    font-size: 30px;
  
    box-shadow: inset 0px 0px 4px 1px var(--color);
    transition: all ease-in-out .4s;
  }

  .facebook_icon:hover {
    translate: 0 -.3rem;
    color: var(--white);
   color:#ff014f;
  }

  .insta_icon {
    color:  #c4cfde;
   
    font-size: 30px;
    box-shadow: inset 0px 0px 4px 1px var(--color);
    transition: all ease-in-out .4s;
  }

   .insta_icon:hover {
    translate: 0 -.3rem;
    color: var(--white);
    color:#ff014f;
  }

  .linkedin_icon {
    color:  #c4cfde;
    font-size:30px;
   
    box-shadow: inset 0px 0px 4px 1px var(--color);
    transition: all ease-in-out .4s;
  }

  .linkedin_icon:hover {
    translate: 0 -.3rem;
    color:#ff014f;
    
  }


                                      /*----home-start----*/
  
    .HOME{width:82%;
      height: 100%;
      overflow-x: hidden!important;
     }

                                      /*----profile-start----*/

    .profile{width:80%;
      margin:auto;
      text-align: center;
      margin-top: 80px;
      border-bottom: 1px solid #070707;
      padding-bottom: 150px;
      margin-bottom:50px ;}

        .bordergredient{
                        display: inline-block;
                        margin:auto;
                        width:338px;
                        height:100%;
                       padding:10px;
                        margin-top:50px;
                        border-radius:100%;
                       animation: change 3s infinite;
                       animation-direction: alternate;
                       box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                       margin-bottom: 30px;
                      } 

                          @keyframes change{
                          0%{background-position: 0 0;}
                          50%{background-position: 400% 0;}
                          100%{background-position: 0 0;}
                          0% {background: radial-gradient(circle at 90% 80%, #ce17ce, #00ffff9f);}
                          25% {background: radial-gradient(circle at 90% 80%, #993399, #3333cccc);}
                          50% {background: radial-gradient(circle at 90% 80%,#00ffff9f, #993399);}
                          75% {background: radial-gradient(circle at 90% 80%, #3333cccc, #b51073);}
                          100% {background: radial-gradient(circle at 90% 80%, #993399, #099fff);}

                            }
                            .bordergredient::after{
                              filter: blur(40px);opacity: .5;
                            }
          
        #profilehome {
          border-radius: 100%;
          width: 320px;
          height: auto
          }
        
          .profile h1{color:#c4cfde;font-weight: 700;}
          .anitext{font-size:36px;font-family:'poppins', sans-serif; color: #c4cfde;margin-top: 20px;font-weight: 300;}
          .typing-text{color:#ff014f;}
          .btn1{
            border-radius: 10px;
            font-size: 16px;
            font-family:'poppins', sans-serif;
            color:#ff014f;
            padding: 10px 40px;
            border: 2px solid #16171a00;
            background: linear-gradient(145deg, #1e2024, #23272b);
            transition: all ease-in-out .3s;
            margin-top: 30px;
           
            filter: drop-shadow(1px 1px 20px #181818);
            
          }
          .btn1:hover{  translate: 0 -.5rem;
            background: linear-gradient(to right bottom, #212428, #16181c);
          }

              /*---------feature-start-------------*/
            
          .features{width:98%;
            height: 100%;
            margin:auto;
            margin-top: 10px;
            border-bottom: 1px solid #070707;
            padding-bottom: 70px;
            margin-bottom:50px ;
            padding-top: 50px;
           }

           .features h6{color:#ff014f;margin:0px;text-align:center;
            
          }
          
          .features h1{color: #c4cfde;
            font-size: 60px;
            font-weight: 700;
            line-height: 1.2;
            margin-top: 10px;
            margin-bottom: 30px;
            text-align:center;
           
          }

           

           


                        
              .animate_box {
                cursor: pointer;
                transition: ease-in-out .4s;
                padding: 12% 10%;
                position: relative;
                border-radius: 10px;
                background: linear-gradient(145deg, #1e2024, #23272b);
                box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
              }

              .animate_box:hover {
                color: #fff;
                background: linear-gradient(to right bottom, #212428, #16181c);
                                }

                  /* .animate_box .bars {
                    font-size: 2.5rem;
                    transition: linear .5s;
                    transform: rotate(-45deg);

                  }

                  .animate_box:hover .bars{
                    transform: rotate(325deg);
                    translate: 0 -.5rem;
                  } */

                .animate_box .bars {
                  font-size: 2.5rem;
                  transition: linear .5s;
                  color:#ff014f;
                }

                .animate_box:hover .bars {
                  transform: rotate(360deg);
                  translate: 0 -.5rem;
                }

                .animate_box h3 {
                  transition: ease-in-out .3s;
                  font-family:'poppins', sans-serif;
                  font-size: 1.8rem;
                  color: #c4cfde;
                }

                .animate_box:hover h3 {
                  translate: 0 -.5rem;
                }

                .animate_box p {
                  transition: ease-in-out .3s;
                  font-family:'poppins', sans-serif;
                  font-size: 1.1rem;
                  color: #c4cfde;
                }

                .animate_box:hover p {
                  translate: 0 -.5rem;
                }

                .animate_box .right_arrow {
                  transition: ease-in-out .2s;
                  font-size: 2rem;
                  visibility: hidden;
                  position: absolute;
                  bottom: 0;
                  color:#ff014f;
                }

                .animate_box:hover .right_arrow {
                  visibility: visible;
                  translate: 0 -.5rem;
                bottom: 5%;
                color:#ff014f;
                }

                        
     
                           /*---------feature-end-------------*/


                           /*---------Portfolio-Start-------------*/
                           /*---------Portfolio-Start-------------*/

                           .portfolio{width:98%;
                            height: 100%;
                            margin:auto;
                            margin-top: 50px;
                            border-bottom: 1px solid #070707;
                            padding-bottom: 70px;
                            margin-bottom:50px ;
                            padding-top: 50px;
                            
                           }
                
                           .portfolio h6{color:#ff014f;margin:0px;text-align:center;
                           
                          }
                          
                          .portfolio h1{color: #c4cfde;
                            font-size: 60px;
                            font-weight: 700;
                            line-height: 1.2;
                            margin-top: 10px;
                            margin-bottom: 30px;
                            text-align:center;
                          }
                    
                          
                          
                          @keyframes display {
                            0% {
                              transform: translateX(0);
                              opacity: 0;
                            }
                            10% {
                              transform: translateX(0);
                              opacity: 1;
                            }
                            20% {
                              transform: translateX(0);
                              opacity: 1;
                            }
                            30% {
                              transform: translateX(0);
                              opacity: 0;
                            }
                            100% {
                              transform: translateX(0);
                              opacity: 0;
                            }
                          }
                          
                          .pic-ctn {
                            position: relative;
                            width: 300px;
                            height: 300px;
                            margin-top: 0px;
                            margin-bottom: 40px;
                            margin: auto;
                          }
                          
                          .pic-ctn > img {
                            width:300px;
                            height: 300px;
                            position: absolute;
                            top: 0;
                            opacity: 0;
                            animation: display 10s infinite;
                            border-radius: 10px;
                            object-fit: contain;

                          }
                          
                          img:nth-child(2) {
                            animation-delay: 2s;
                          }
                          img:nth-child(3) {
                            animation-delay: 4s;
                          }
                          img:nth-child(4) {
                            animation-delay: 6s;
                          }
                          img:nth-child(5) {
                            animation-delay: 8s;
                          }


                         

                           /*---------Portfolio-End-------------*/
                           /*---------Portfolio-End-------------*/
                           /*---------Resume-Start-------------*/
                           /*---------Resume-Start-------------*/




                          
                          
                           .resume{width:98%;
                            height: 100%;
                            margin:auto;
                            margin-top: 50px;
                            border-bottom: 1px solid #070707;
                            padding-bottom: 70px;
                            margin-bottom:50px ;
                            padding-top:50px
                           }
                
                           .resume h6{color:#ff014f;margin:0px;text-align:center;
                            
                          }
                          
                          .resume h1{color: #c4cfde;
                            font-size: 60px;
                            font-weight: 700;
                            line-height: 1.2;
                            margin-top: 10px;
                            margin-bottom: 30px;
                            text-align:center;
                          }
                    

                          #resumetxt h2{color:#ff014f;font-family:'poppins', sans-serif;}
                          #resumetxt h4{color:#c4cfde;font-family:'poppins', sans-serif;}
                          .school{color:#ff014f;font-family:'poppins', sans-serif;}

                          #skill h6{color:#ff014f;text-align: left;font-family:'poppins', sans-serif;}
                          #skill h2{color:#c4cfde;margin-top: 20px;margin-bottom: 20px;font-family:'poppins', sans-serif;}


                              .rangetxt h6{margin-bottom: 10px;
                                color: #c3cedd!important;
                                font-size: 12px;
                                text-transform: uppercase;
                                letter-spacing: 2px;
                                opacity: 0.9;
                                font-weight: 400;
                                font-family:'poppins', sans-serif;}                            
                              .range {
                                position: relative;
                                background-color: #3330;
                                width: 550px;
                                height: 15px;
                                transform: skew(30deg);
                                font-family:'poppins', sans-serif;
                                
                                &:before {
                                  --width: calc(var(--p) * 1%);
                                                              
                                content: '';
                                position: absolute;
                                top: 0;
                                left: 0;
                                width: 0;
                                height: 100%;
                              background: rgb(41,9,121);
                              background: linear-gradient(90deg, rgb(73 0 255 / 45%) 0%, rgba(108, 9, 121, 0.9024859943977591) 57%, rgb(255 0 138 / 35%) 100%);
                                z-index: 0;
                                animation : load .5s forwards linear, glitch 2s infinite linear;
                              }
                              
                              &:after {
                                counter-reset: progress var(--p);
                                content: counter(progress) '%';
                                color: #000;
                                position: absolute;
                                left: 5%;
                                top: 50%;
                                transform: translateY(-50%) skewX(-30deg);
                                z-index: 1;
                              }
                              
                              &__label {
                                transform: skew(-30deg) translateY(-100%);
                                line-height: 1.5;
                              }
                            }

                                  @keyframes load {
                                    to {
                                      width: var(--width);
                                    }
                                  }


                                  .myproject{margin-top: 50px!important;opacity: 0.7;}

                                  





                                          /*---------Resume-End-------------*/
                                          /*---------Resume-End-------------*/

                                          /*-----------Contact-Start--------*/
                                          /*-----------Contact-Start--------*/
                                          .contact{width:98%;
                                            height: 100%;
                                            margin:auto;
                                            margin-top: 50px;
                                            border-bottom: 1px solid #070707;
                                            padding-bottom: 70px;
                                            padding-top: 50px;
                                           }
                                
                                           .contact h6{color:#ff014f;margin:0px;text-align:center;
                                          }
                                          
                                          .contact h1{color: #c4cfde;
                                            font-size: 60px;
                                            font-weight: 700;
                                            line-height: 1.2;
                                            margin-top: 10px;
                                            margin-bottom: 30px;
                                            text-align:center;
                                          }
                          
                                          #contact1{width:38%;
                                            margin:1%;
                                          padding:30px;
                                          cursor: pointer;
                                          position: relative;
                                          border-radius: 10px;
                                          background: linear-gradient(145deg, #1e2024, #23272b);
                                          box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                          }
                                         
                                      
                                                            
                                          #contact2{width:58%;
                                            margin:1%;
                                            padding:30px;
                                            cursor: pointer;
                                            position: relative;
                                            border-radius: 10px;
                                            background: linear-gradient(145deg, #1e2024, #23272b);
                                            box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                            }

                                            .ccard{width:100%;
                                              margin: auto;
                                            }

                                            .imgcard{
                                              margin-bottom: 25px;
                                            }
                                            .imgcard img{
                                              width:100%;
                                              height: auto;
                                              border-radius: 10px;
                                              
                                            }

                                            .imgcard img:hover{
                                              transform: scalex(-1);
                                               
                                            }

                                            .txtcard{margin-bottom: 30px;}
                                            .txtcard h4{
                                              font-weight: 600;
                                              color:#e4e6ea;
                                              font-size: 30px;
                                              opacity: 0.9;
                                              letter-spacing: 1px;
                                              font-family:'poppins', sans-serif; 
                                            }
                                            .txtcard h6{
                                              color:#878e99;
                                              text-align: left;
                                              margin-bottom: 20px;
                                              margin-top: 20px;
                                              font-weight: 400;
                                              font-family:'poppins', sans-serif; 
                                            }
                                            .txtcard p{
                                              font-size: 18px;
                                              color:#878e99;
                                              text-align: left;
                                              font-weight: 400;
                                              margin-bottom: 25px;
                                              font-family:'poppins', sans-serif; 
                                              opacity: 0.9;
                                            }

                                            .txtcard h5{
                                              font-size: 16px;
                                              color:#878e99;
                                              text-align: left;
                                              font-weight: 400;
                                              margin-bottom: 15px;
                                              font-family:'poppins', sans-serif; 
                                              opacity: 0.9;
                                            }

                                            .phoneno{color:#c4cfde;
                                              font-weight: 500;
                                              display: inline-block;
                                              position: relative;
                                             
                                              text-decoration: none;
                                            }
                                            .phoneno:hover{
                                              color:#ff014f
                                            }
                                          
                                            
                                            .phoneno::after {
                                             
                                              content: '';
                                              position: absolute;
                                              width: 100%;
                                              transform: scaleX(0);
                                              border-radius: 5px;
                                              height: 0.05em;
                                              bottom: 0;
                                              left: 0;
                                              background: #ff014f;
                                              transform-origin: bottom right;
                                              transition: transform 0.25s ease-out;
                                            }
                                            .phoneno:hover::after {

                                              transform: scaleX(1);
                                              transform-origin: bottom left;
                                            }
                                            .findme h6{
                                              color:#878e99;
                                              text-align: left;
                                              margin-bottom: 30px;
                                              margin-top: 30px;
                                              font-weight: 400;
                                              font-family:'poppins', sans-serif; 
                                            }

                                            .icn{text-align: center;}

                                            .link1 {
                                              color:  #c4cfde;
                                              font-size:30px;
                                              background: linear-gradient(145deg, #1e2024, #23272b);
                                              box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                             padding:15px;
                                             margin:15px;
                                              transition: all ease-in-out .4s;
                                              border-radius: 10px;
                                            }
                                          
                                            .link1:hover {
                                              translate: 0 -.3rem;
                                              color:#ff014f;
                                              background: linear-gradient(to right bottom, #212428, #16181c);
                                            }

                                            .instagram1 {
                                              color:  #c4cfde;
                                              font-size:30px;
                                              background: linear-gradient(145deg, #1e2024, #23272b);
                                              box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                             padding:15px;
                                             margin:15px;
                                              transition: all ease-in-out .4s;
                                              border-radius: 10px;
                                            }
                                          
                                            .instagram1:hover {
                                              translate: 0 -.3rem;
                                              color:#ff014f;
                                              background: linear-gradient(to right bottom, #212428, #16181c);
                                            }

                                            .twitter {
                                              color:  #c4cfde;
                                              font-size:30px;
                                              background: linear-gradient(145deg, #1e2024, #23272b);
                                              box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                             padding:15px;
                                             margin:15px;
                                              transition: all ease-in-out .4s;
                                              border-radius: 10px;
                                            }
                                          
                                            .twitter:hover {
                                              translate: 0 -.3rem;
                                              color:#ff014f;
                                              background: linear-gradient(to right bottom, #212428, #16181c);
                                            }

                                                                                          
                                              form {
                                                text-align: left;
                                                width: 100%;
                                                margin: 0 auto;
                                              }

                                              .name{
                                                width:50%;
                                                height: 110px;
                                                padding:0 15px;
                                              }
                                              .name h5{
                                                font-size: 12px;
                                                color: #a0a8b3;
                                                font-weight: 500;
                                                letter-spacing: 1px;
                                                text-transform: uppercase;
                                                margin-bottom: 14px;
                                                text-align: left;
                                                display: block;

                                              }

                                              .maile{
                                                width:100%;
                                                height: 110px;
                                                padding:0 15px;
                                              }
                                              .maile h5{
                                                font-size: 12px;
                                                color: #a0a8b3;
                                                font-weight: 500;
                                                letter-spacing: 1px;
                                                text-transform: uppercase;
                                                margin-bottom: 14px;
                                                text-align: left;
                                                display: block;

                                              }

                                              .maile1{
                                                width:100%;
                                                height: 220px;
                                                padding:0 15px;
                                              }

                                              .maile1 h5{
                                                font-size: 12px;
                                                color: #a0a8b3;
                                                font-weight: 500;
                                                letter-spacing: 1px;
                                                text-transform: uppercase;
                                                margin-bottom: 14px;
                                                text-align: left;
                                                display: block;

                                              }

                                              textarea {
                                                height: 200px!important;
                                              }

                                              .input_margin {
                                               
                                                height: 55px!important;
                                              }
                                              #phn{margin:0!important}
                                              #phn:hover{
                                                border: 2px solid #ff014f; 
                                              }
                                              #hvrinput{}

                                              #hvrinput:hover{
                                                border: 2px solid #ff014f; 
                                                transition: 0.5;
                                              }

                                              input,
                                              textarea {
                                                
                                                background-color: #191b1e;
                                                border-radius: 6px;
                                                height: 55px;
                                                transition: 0.4;
                                                border: 2px solid #191b1e;
                                                font-size: 14px;
                                                font-family: 'Montserrat', sans-serif ;
                                                color:#c4cfde;
                                                box-shadow: 1px 4px 2px -3px rgba(0, 0, 0, 0.7) inset, -1px -3px 3px -2px rgba(255, 255, 255, 0.2) inset;;
                                                letter-spacing: 1px;
                                                display: block;
                                                width: 100%;
                                                border: 0;
                                                padding: 10px 15px;
                                              }
                                             

                                              input:focus,
                                              textarea:focus{
                                                /* sizes for the 2 images (focus state) */
                                                background-size: 100% 2px, 100% 1px;
                                                outline: none;

                                              }

                                              .form_button {
                                                color:#c4cfde;
                                                background: linear-gradient(145deg, #1e2024, #23272b)!important;
                                                box-shadow:10px 10px 19px #1c1e22, -10px -10px 19px #262a2e;
                                                font-size: 1rem;
                                                letter-spacing: 1px;
                                                font-weight: 700!important;
                                              }

                                              .form_button:hover {
                                                color:#c4cfde;
                                                translate: 0 -.3rem;
                                                background: #191b1e!important;
                                              }
                                                          
                                            
                                           



                                          

                                          /*-----------Contact-End--------*/
                                          /*-----------Contact-End--------*/


                                          /*-----------FOOTER-START--------*/
                                          /*-----------FOOTER-START--------*/



                                          .footer{width:98%;
                                            height: 100%;
                                            margin:auto;
                                            margin-top: 50px;
                                            margin-bottom:50px ;
                                            
                                           }
                                         

                                           #anav{font-weight: 200;
                                           
                                              color:#ff014f;
                                           

                                          }








                                          /*-----------FOOTER-END--------*/
                                          /*-----------FOOTER-END--------*/


                                          
/*------------------------TO--TOP--BUTTON---START--------------*/

.back-to-top {
  position: fixed;
  right: 2rem;
  bottom: 2rem;
  border-radius: 100%;
  background:#c4cfde;
  color: #ff014f;
  padding: .9rem 1rem;
  border: none;
  cursor: pointer;
  opacity: 100%;
  transition: linear .3s;

}

.hidden {
  opacity: 0%;
}

.back-to-top:hover {
  background:#c4cfde;
  color: #ff014f;
  box-shadow: 0 0 10px #ff014f;
  translate: 0 -.5rem;
}


.back-to-top-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.progress-bar {
  height: .5rem;
  background:#ff014f;
  border-radius: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
}

/*------------------------TO--TOP--BUTTON---END--------------*/





                              /*---------MOBILE-VIEW-------------*/
                                       
@media (max-width: 952px) {
  label.logo {
    font-size: 30px;
    padding-left: 50px;
  }
  
  .HOME{
      width:100%;
  }
  .profile{
      width:100%;
  }
  .bordergredient{
      width:80%;
  }
  #profilehome {
      width:100%;
  }
  #contact1{
              margin: auto;
        width: 90%;}
       
  #contact2{
          padding: 10px;  margin: auto;
        margin-top: 10%;
        width: 90%;
  }
  .name{
      width:100%;
  }
  .range {
      width:98%;
  }
  
  .sticky-top{
      left:100%;
      margin-left:90%;
  }
      .checkbtn{
          position:fixed;
      }

  nav {
    height: 100%;
    width: 10%;
  

  nav ul li a {
    font-size: 16px;
  }


.sticky-top{width: 100%;}

.HOME{width:100%;}
.profile{width:100%;
padding-bottom: 50px;
margin-top:0px ;
margin-bottom: 50px;
} 

.features{margin-top: 40px;
  margin-bottom: 50px;
  padding-bottom: 50px;
  width:90%;
  padding-top: 20px;
}

.portfolio{width:90%;
  padding-top: 20px;}
.resume{width:90%;
  padding-top: 20px;
}
.contact{width:90%;
  padding-top: 20px;}
#resumetxt{margin-left: 10px;}
#skill {margin-left:10px;}
.range{width: 98%;}


#contact1{width:95%;
  margin-top: 30px;
  margin: auto;

 
}
#contact2{width:95%;
  margin: auto;
  margin-top: 30px;
  padding-top:50px;
}

.name{margin-bottom: 15px;}
.name h5{padding-bottom: 5px;}
.maile{margin-bottom: 15px;}
.maile h5{padding-bottom: 5px;}
.maile1{margin-bottom: 15px;}
.maile1 h5{padding-bottom: 5px;}

.name{width: 100%;}

}

page2 {
    width: 100%;
    height: 6vh;
    padding: 3vw 0;
}



@media (max-width: 858px) {
  .checkbtn {
    display: block;
    opacity: 0.5;
   
  }
  
   .nav{
    overflow-x: hidden;
  }

  ul {
    border-top:2px solid #070707!important ;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: #1c1e2082;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }

  nav ul li {
    display: block;
    margin: 50px 0;
    line-height: 30px;
  }

  nav ul li a {
    font-size: 20px;
  }

  a:hover,
  a.active {
    background: none;
    color: #ff014f;
  }

  #check:checked~ul {
    left: 0;
  }
}

section {
  background: url(bg1.jpg) no-repeat;
  background-size: cover;
  height: calc(100vh - 80px);
}