/* responsive */

/* navbar:navigation */

#main-nav .container {
    /* display:grid; */
    grid-template-columns: repeat(1,1fr);
    align-items: center;
    justify-items: center;
}
#main-nav .container .social{
    display: none;
    
}

#main-nav .container ul
{
   justify-self: center;
}
#main-nav .container.logo{
    justify-self: center;
}

#main-nav .container ul li a {
    padding:.4rem;


}
/* Showcase  */

#showcase{
height:40vh;
margin:1rem;
}

 #showcase:before{
    content: none;
    
} 

#showcase .showcase-container .showcase-content {
    /* background: whitesmoke; */
    display: flex;
    padding:2rem;
    text-align: center;
    justify-content: flex-start;
    
}

/* about */

#about .about-container{
    display: grid;
    grid-template-columns: repeat(1,1fr);
    /* background: var(--primary-color); */
    
}

/* section:Courses */

#courses .courses {
   
    grid-template-columns: repeat(2,1fr);
    
}

/* *section:faculty */ 

#faculty .faculty-container{
    
    grid-template-columns: repeat(3,1fr);
    text-align: center;
    grid-gap:.5rem;
    justify-items: center;
}
/* contact */
#main-contact .contact-container{
    
    grid-template-columns: repeat(1,1fr);
    
}
#main-contact .container{
    max-width: 600px;
    margin:auto;
}
#main-contact .contact-container .contact-form{
    padding:1rem;
    overflow: hidden;
}

#main-footer .social {
    display: block;
    margin-bottom: .5rem;
}
#main-footer .social i {
    margin-right: .5rem;
} 


/* for smartphones */
@media(max-width: 600px){
    /* Courses */
     #courses .courses {
   
        grid-template-columns: repeat(1,1fr);
        
    }
    /* Faculty */
    #faculty .faculty-container{
    
        grid-template-columns: repeat(2,1fr);
        
    }
    /* contact */
    #main-contact .container{
        max-width: 600px;
        margin:auto;
    }
    #main-contact .contact-container .contact-form{
        width: 95%;
        border-radius: 0.3rem;
        padding:0.1/rem;
        overflow: ;
    }
    #main-contact  .contact-form label{
        display: block;
    }
    #main-contact  .contact-form input[type='email'],
    #main-contact  .contact-form input[type='text'] {
     width: 86%;
     padding: 0.3rem;
     margin-bottom: 0.5rem;
     border-radius: 5%;
}

    #main-contact input[type='submit'] {
        width: 86%;
        
      }
    #main-contact  .contact-form textarea{
    width: 86%;
  height: 50px;
  padding: 12px 20px;
  box-sizing: border-box;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  resize: none;
    }  
    
    #main-contact .map{
        display: none;
    }

    #main-contact{
        padding-bottom: 0.1rem;
    }
    
}