/* defining variables */

:root{
    --primary-color:#28346A;
    --secondary-color:#F8B018;
    --light-color:#fff;
    --dark-color:#333;
}

/* core,default styling */

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}
body{
    font-family: sans-serif;
    line-height: 1.5;

}

a{
    color:var(--light-color);
    text-decoration:none;
}

ul{
    list-style: none;
}
img{
    width:100%;
}
/* utility */
.container{
    max-width: 1100px;
    margin:0 auto;
}

.btn{
    display: inline-block;
    padding:0.4rem 0.6rem;
}
.btn-primary{
    background: var(--primary-color);
    color: var(--secondary-color);
}

.btn-secondary{
    background: var(--primary-color);
    color: var(--secondary-color);
}
.btn-block {
    display: block;
    width: 100%;
    background: var(--primary-color);
    color:var(--light-color);
}

.btn-dark{

}
.btn:hover{
    opacity:0.9;
}

.text-primary{
  color:;
  margin:1rem 0rem;
}

.text-secondary{
    
}
.bg-primary{
    background: var(--primary-color);
    color:var(--light-color);
}
.bg-secondary{
    background: var(--secondary-color);
    color:var(--primary-color);
}
.bg-light{
    background: whitesmoke;
    color:var(--primary-color);
}

.card{
    padding:1rem;
}

.l-heading{
    font-size: 2rem;
    color:var(--secondary-color)
}
.m-heading{
    font-size: 1.3rem;
}

.m-1{margin:1rem;}

.py-2{padding:1rem 0rem;}
.py-3{padding:3rem 0rem;}
.py-4{padding:4rem 0rem;}

.p-1{padding:1rem;}
.p-2{padding:2rem;}
.p-3{padding:3rem;}





/* navbar:navigation */

#main-nav{
    background: var(--primary-color);
    padding:.4rem;
    position:sticky;
    top:0;
    z-index:2;
}

#main-nav .container {
    display:grid;
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
}



#main-nav .container img{
    width:100px;
}

#main-nav .container ul{
    display: flex;
    justify-content: flex-end;
}
#main-nav .container ul li a {
    padding:.7rem;
    /* background: var(--secondary-color); */
    color:var(--light-color);
    font-weight:bold;
    margin-right: .2rem;
}

#main-nav .container ul li a.current {
    
    background: var(--secondary-color);
    color:var(--dark-color);
    font-weight:bold;
    margin-right: .2rem;
}
#main-nav .container ul li a:hover{
    background: var(--light-color);
    color:var(--dark-color)
}
#main-nav .container .social{
    display: flex;
    justify-content: center;
}

#main-nav .container .social i {
    margin-right: .5rem;
    
}

#main-nav .social a:hover{
    color: #888;;
}


/* navigation */

#showcase {
    height:100vh;
    position: relative;
    background: #fff;;
    
}

#showcase:before{
    content:'';
    background: url('../img/ziapicture.png')no-repeat center center/cover;
    position: absolute;
    top:14px;
    left:370px;
    width: 50%;
    height: 70%;
    
    opacity:0.7;
}

#showcase .showcase-container {
   /* align-items: center; */
   height:83vh;
}

#showcase .showcase-container .showcase-content {
    height:100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* text-align: center; */
    justify-content: flex-end;
    
    
}


/* section:about us */

#about .about-container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    /* align-items: center; */
    grid-gap:1.5rem;
    margin-bottom: 1rem;
}

#about .about-container h2{
    color:var(--secondary-color);
}




/* section:Courses */

#courses .courses {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    grid-auto-rows: minmax(300px,auto);
    grid-gap:1rem;
    margin-bottom:1rem;
    overflow: hidden;
}

#courses .courses > div:nth-child(even),
#courses .courses > div:nth-child(odd){
    /* display:grid; */
    /* grid-template-columns: repeat(1,1fr); */
    /* grid-auto-rows: minmax(100px,auto); */
    /* grid-gap:1rem; */
   
}



/* section:faculty */
#faculty{
    margin-bottom: 1rem;
}
#faculty .faculty-container{
    display: grid;
    grid-template-columns: repeat(5,1fr);
    text-align: center;
    grid-gap:.3rem;
}

#faculty .faculty-container img{
    border-radius: 50%;
}



/* section:contact */

#main-contact{
    background: whitesmoke;
}

#main-contact .contact-container{
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-gap:1rem;
}

#main-contact .contact-container .contact-form {
   background: var(--secondary-color);
   padding:1rem;
    display:grid;
    /* grid-template-columns: 1fr 1fr; */

}
#main-contact  .contact-form label{
    display: block;
}
#main-contact  .contact-form input[type='email'],
#main-contact  .contact-form input[type='text'] {
     width: 90%;
     padding: 0.3rem;
     margin-bottom: 0.5rem;
     border-radius: 5%;
}

#main-contact  .contact-form textarea{
    resize: none;
    border-radius: 5;
}
     
#main-contact input[type='submit'] {
    width: 90%;
    
  }

/* main-footer */

#main-footer{
    /* background: var(--primary-color); */
    text-align: center;
    line-height: 1.7;
}

#main-footer .social {
    display:none;
}