/*Navbar*/
.menu{
    display: block;
}

.hidden{
    display: none;
}

#navbar{
    grid-template-columns: 1fr;
    overflow: hidden;
}

.services{
    flex-direction: column;
    animation: show 2s backwards;
    position: relative;
    transition: all 0.6s;
}

@keyframes show {
    from{top: -100%;}
    to{top: 0%;}
}


.services a:not(:last-child) {
    margin-right: 0px;
}

.services a{
    margin-bottom: 20px;
}

/*HomeSection*/
#homeSection{
   grid-template-columns: 1fr;

}

.image{
    display: flex;
    justify-content: center;
    align-items: center;
}

#homeSection img{
    width: 50%;
}

/*Contact Form*/
.contactForm {
    padding: 2% 2%;
}

/*Project Form*/
.ProjectForm {
    padding: 2% 2%;
}

/*Home Section*/
#profileIntro{
    margin-bottom: 5%;
    margin-top: 5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.animate{
    font-size: 2.3rem;
}

/*Qualification*/
#qualificationSection{
    padding: 15px 5px;
}
.schoolBox{
    grid-template-columns: 1fr;
}
.schoolImage{
    display: flex;
    justify-content: center;
    align-items: center;
}
.schoolImage img{
    width: 80%;
}
.collegeBox{
    grid-template-columns: 1fr;
}
.collegeImage{
    display: flex;
    justify-content: center;
    align-items: center;
}
.collegeImage img{
    width: 80%;
}
.universityBox{
    grid-template-columns: 1fr;
}
.universityImage{
    display: flex;
    justify-content: center;
    align-items: center;
}
.universityImage img{
    width: 80%;
}

/*Skills*/
#skillsSection{
    padding: 15px 5px;
}
.skillHTML{
    padding: 10px 0px;
}
.skillCSS{
    padding: 10px 0px;
}
.skillJS{
    padding: 10px 0px;
}
.skillBootstrap{
    padding: 10px 0px;
}

/*Experience*/
.experience{
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.experienceBox{
    border-bottom: 2px solid rgba(243, 243, 243, 0.7);
}
.experienceDetails{
    text-align: center;
}

/*Project Section*/
#projectsSection{
    padding: 15px 5px;
}
.box{
    width: 100%;
    margin-right: 0px;
}
.textOverlay h1{
    font-size: 1.6rem;
}
.textOverlay p{
    font-size: 1rem;
}

/*Collabaration*/
.collabBox{
    width: 37%;
}

/*Testimonial Section*/
#testimonialSection{
    padding: 15px 5px;
}

/*Footer*/
footer h3{
    font-size: 20px;
}
footer h2{
    font-size: 25px;
}
.reveal2 {
    transition: all 1.2s;
    transform: scale(1.2);
}

.reveal2.active {
    transform: scale(1);
}

/*Utility Classes*/
.heading{
    font-size: 2.3rem;
}