* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: arial;
}
header {
/*height: 100%*/
    width: 100%;
    float: left;
    background: webkit-gradient(linear, left top, right top, from(#17D396), to(#07F7F7));
    background: linear-gradient(to right, #17D396, #07F7F7);
    position: fixed; /*fixed nav bar*/
    padding: 0 20px;
    color: #fff;
}
.brand-logo {
    max-width: 75px;
    float: left;
    padding: 14px 0px;
}
.brand-logo img {
    max-width: 100%;
}
.navigation {
    margin: 0px;
    float: right;
}
.navigation li {
    list-style: none;
    float: left;
}
.navigation li a {
    color: #fff;
    padding: 28px 15px;
    text-transform: uppercase;
    text-align: center;
    display: block;
    text-decoration: none;
}
.navigation li a i {
    width: 100%;
    font-size: 20px;
    margin-bottom: 7px;
}
.show-menu-btn,
.hide-menu-btn {
    transition: 0.4s;
    font-size: 30px;
    cursor: pointer;
    display: none;
}
.show-menu-btn {
    margin: 0px;
    float: right;
}
.show-menu-btn i {
    line-height: 100px;
}
.navigation a:hover,
.show-menu-btn:hover,
.hide-menu-btn:hover {
    color: #0026ff;
}
#toggle-btn {
    position: absolute;
    visibility: hidden;
    z-index: -1111;
}

/*-- Responsive CSS --*/
@media screen and (max-width:767px) {
.show-menu-btn,
.hide-menu-btn {
    display: block;
}
.navigation {
    position: fixed;
    width: 100%;
    height: 100vh;
    background: black;
    top: -100%;
    left: 0;
    padding: 50px 0px;
    transition: 1s;
    opacity: 85%;
}
.navigation li {
    width: 100%;
}
.navigation li a {
    padding: 15px 15px;
    text-align: left;
}
.navigation li a i {
    width: auto;
    font-size: 20px;
}
.hide-menu-btn {
    position: absolute;
    top: 15px;
    right: 20px;
}
#toggle-btn:checked ~ nav .navigation {
    top: 0px;
}
}
/*nav bar css ended*/

.banner{
    background-image: url("banner.jpg");
    width: 100%;
    height: 100vh;
}
.container{
    padding-top: 40vh;
    text-align: center;

}
.container p{
    font-size: 70px;
    font-family: cursive;
    color: white;
    font-weight: bolder;
}
.container span{
    color: white;
    font-size: 40px;
    font-family: cursive;
    font-weight: lighter;
}
.container p:hover{
  
    color: #07F7F7 ;
}
.container span:hover{
    color: #07F7F7;
}

.about-me{
    background-color: #22252c;
    
}
.about-me h1{
   
    color: rgba(8,218,162,1);
    padding-top: 5vh;
    font-size: 5vh;
    text-align: center;
}
.about-me strong{
    color: rgb(119, 226, 198);
    font-size: 25px;
}
.about-me p{
    color: white;
}
.about-me a{
    text-decoration: none;
    color: white;
}
.bio{
    padding-top: 5vh;
    padding-left: 5vh;
    padding-right: 5vh;
    font-size: 4vh;
    font-family: sans-serif;
}
.details{
    padding-top: 10vh;
    padding-bottom: 10vh;
    padding-left: 10vh;
    padding-right: 10vh;
    font-size: 4vh;
    letter-spacing: 0.9px;
}
@media screen and (max-width:767px){
    .about-me h1{
        font-size: 2.5vh;
    }
    .about-me strong {
        font-size: 12.5px;
    }
    .bio{
        font-size: 2vh;
    }
    .details{
        font-size: 2vh;
    }
    .container p{
        font-size: 35px;
    }
    .container span{
        font-size: 20px;
    }
}


.intrest{
    padding-top: 5vh;
    display:flex;  justify-content: space-around;
    
}
.intrest div{
    padding: 10px;
    
}

.individual-intrest1{
 order: 1;

}
.individual-intrest2{

    order: 2;
}
.individual-intrest3{
order: 3;;
}
.individual-intrest4{
order: 4;
}

.intrest i{
    font-size: 6vh;
    color: rgba(8,218,162,1);
    padding-bottom: 4vh;
}
.fa:hover{
    color: #07F7F7 ;
}
.fas:hover{
    color: #07F7F7 ;

}
.intrest p{
   padding-bottom: 5vh;
   color: white;
  
   
}
.intrest p:hover {
  
    color: rgba(8,218,162,1);
    font-weight: bolder;
}
.page-3{
    background-color: #313741;
   
}


.education i{
    color: rgba(8,218,162,1);
    padding-top: 5vh;
    padding-bottom: 3vh;
    font-size: 5vh;

}
.education h1{
    color: rgba(8,218,162,1);
    padding-top: 5vh;
    font-size: 5vh;
    text-align: center;
}
.edu {
    color: white;
    text-align: center;
    font-size: 3vh;
    padding-top: 2vh;
    font-weight: lighter;
    padding-bottom: 6vh;
}

@media screen and (max-width:767px){
    .education i{
        padding-top: 2.5vh;
        padding-bottom: 1.5vh;
        font-size: 2.5vh;
    }
    .education h1{
       
        padding-top: 2.5vh;
        font-size: 4vh;
      
    }
    .edu {
       
        font-size: 1.5vh;
        padding-top: 1vh;
        font-weight: lighter;
        padding-bottom: 3vh;
    }
}
.page-4{
    background-color: #22252c;
    padding-bottom: 10vh;
}

.page-6{
    background-color: #22252c;
  
}
.page-7{
    background-color: #313741;

}
/*Certificates*/
.certificate{
    padding-top: 5vh;
    color: #08f7f5;
}
.certificate-name{
    color: white;
}
.certi-centre {
    transform: scale(0.8);
}

@media screen and (max-width:767px){
    .certi-centre {
        transform: scale(1);
    }
    .projects img:hover{
        transform: scale(1);
    }
}
/*Certificates*/
.page-4 h1{
    color:rgba(8,218,162,1); 
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
}
.skill-name{
    color: white;
    padding-left: 10vh;
    padding-right: 10vh;
    font-size: 4vh;
    letter-spacing: 0.9px;
   text-align: center;
   padding-bottom: 1vh;
   padding-top: 1vh;
}
.posi{
    padding-left: 10vh;
    padding-right: 10vh;
}
.skill{
background-color: black;
    width: 100%;
   border-radius: 10px;
}

.html{width: 90%; background-color: rgba(8,218,162,1);border-radius: 10px;}
.css{width: 80%; background-color: rgba(8,218,162,1);border-radius: 10px;}
.java{width: 60%; background-color: rgba(8,218,162,1);border-radius: 10px;}
.dm{width: 70%; background-color: rgba(8,218,162,1);border-radius: 10px;}
.html:hover{
    background-color:#6dffff ;
}
.css:hover{
    background-color:#6dffff ;
}
.java:hover{
    background-color:#6dffff ;
}
.dm:hover{
    background-color:#6dffff ;
}

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

    .page-4{
      
        padding-bottom: 5vh;
    }
    
    
    .page-4 h1{
     
        padding-top: 2.5vh;
        padding-bottom: 2.5vh;
    }
    .skill-name{
      
        padding-left: 5vh;
        padding-right: 5vh;
        font-size: 2vh;
        letter-spacing: 0.4px;
       text-align: center;
       padding-bottom: 0.5vh;
       padding-top: 0.5vh;
    }
    .posi{
        padding-left: 5vh;
        padding-right: 5vh;
    }
    .skill{
    background-color: black;
        width: 100%;
       border-radius: 10px;
    }
    
    .html{width: 90%; background-color: rgba(8,218,162,1);border-radius: 10px;}
    .css{width: 80%; background-color: rgba(8,218,162,1);border-radius: 10px;}
    .java{width: 60%; background-color: rgba(8,218,162,1);border-radius: 10px;}
    .dm{width: 70%; background-color: rgba(8,218,162,1);border-radius: 10px;}
    

}





.page5 input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-top: 6px;
    margin-bottom: 16px;
    resize: vertical;
  }
  
 .page5 input[type=submit] {
    background-color:  rgba(8,218,162,1);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .page5 input[type=submit]:hover {
    background-color: #07F7F7;
  }
  
  .containerss {
    background-color: #313741;
    padding: 10vh;
  }
  .containerss h1{
    color:rgba(8,218,162,1); 
    text-align: center;
    padding-top: 5vh;
    padding-bottom: 5vh;
  }
  .containerss label{
      color:rgba(8,218,162,1);
      font-weight: bold;
  }



.internship:hover{
        font-size: 10vh;
}
.intern:hover{
    font-size: 5vh;
}

  @media screen and (max-width:767px)
  {
    .intern:hover{
        font-size: 2.5vh;
    }
      .internship:hover{
        font-size: 6vh;
}
    .containerss h1{
       
      padding-top: 2.5vh;
      padding-bottom: 2.5vh;
  }}
  footer{
      background-color: #22252c;    
  }
  .footer i{
    color: white;
    font-size: 6vh;
    padding: 10vh 2vh 4vh 2vh;
  
    
  }
.footer{
    text-align: center;
    
}
footer p{
    color: white;
    padding: 0 2vh 4vh 2vh;
    font-size: 1.8vh;
}

.copyright{

    background-color: #22252c;
}
.copyright p{
    color: white;
    text-align: center;
    padding: 2vh 0vh 2vh 2vh;
    font-size: 1.3vh;
}

.projects{
    background-color: #313741;
    text-align: center;
    color: rgba(8,218,162,1);
    padding: 5vh 3vh 5vh 3vh;
    
}
.projects h1{
    padding-bottom: 3vh;
}
.projects p{
    padding: 3vh 3vh;
    font-size: 4vh;
}

.projects img:hover{
    transform: scale(1.1);
}

.column {
    float: left;
    width: 33.33%;
    padding: 5px;
    
  }
  
  /* Clearfix (clear floats) */
  .row::after {
    content: "";
    clear: both;
    display: table;
  }
  
  /* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 500px) {
    .column {
      width: 100%;
      
    }
    .projects p{
       
        font-size: 3vh;
    }
  }