deptstyle.css

*{ margin: 0%;
    box-sizing: border-box;
 }
 :root,
 :root.light {
 --color-1:#1C3879;
 --color-2:#607EAA;
 --color-3:#EAE3D2;
 --color-4:#F9F5EB;
 --font-familee:'Open Sans', sans-serif;
}

 :root.dark {
 --color-1:#171717;
 --color-2:#444444;
 --color-3:#DA0037;
 --color-4:#EDEDED;
 }

 :root.green {
    --color-1:#1C6758;
    --color-2:#3D8361;
    --color-3:#D6CDA4;
    --color-4:#EEF2E6;
    --bg-url:url(greenheader.jpg);
 }

 :root.brown {
    --color-1:#472D2D;
    --color-2:#553939;
    --color-3:#F2D388;
    --color-4:#FFFBE9;
    --bg-url:url(brownheader.jpg);
    --font-familee: 'Comic Neue', cursive;
  }

 :root.galaxy{
  --color-1:#2E0249;
  --color-2:#570A57;
  --color-3:#E4BAD4;
  --color-4:#F6DFEB;
  --bg-url:url(galaxyheader.jpg);

 }

 
 body{
    margin: 0;
    background-color: var(--color-4);
    
    color: var(--color-1);
    font-family: var(--font-familee);
 }
 select {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    font-family: inherit;
    background-color: var(--color-1);
    color: var(--color-4);
    border-radius: 0.25rem;
    border: 1px solid var(--color-4);
    }
  
 h1{
     padding: 50px;
     align-items: center;
     font-size: xx-large;
     color: var(--color-4);
 }
 h3{
     margin: 20px;
     padding: 20px;
     font-size: large;
     color: var(--color-1);
 }

.font-change:active {
	background-color: #0f0;
	
}

.p1{
    margin: 40px;
    color:var(--color-1)
}
.column {
    float: left;
    width: 50%;
    padding: 15px;
    align-items: center;
}
.header {
     margin: 0;
     background-color: var(--color-1);
     background-image: var(--bg-url);
     padding: 20px;
     text-align: center;
 }
.head1{
     color: var(--color-4);
 }
 .phead1{
   margin: 0;
   color:var(--color-4);
 }
 .topnav {
     overflow: hidden;
     background-color:var(--color-4);
 }
   
 .topnav a {
     float: left;
     display: block;
     color: var(--color-1);
     text-align: center;
     padding: 14px 16px;
     text-decoration: none;
     font-size: 17px;
 }
   
 .topnav a:hover {
     background-color: var(--color-2);
     color: black;
 }
 
 .topnav .icon {
     display: none;
 }
 
 @media screen and (max-width: 600px) {
     .topnav a:not(:first-child) {display: none;}
     .topnav a.icon {
       float: right;
       display: block;
     }
     .column {
         width: 100%;
     }
 }
   
 @media screen and (max-width: 600px) {
     .topnav.responsive {position: relative;}
     .topnav.responsive .icon {
       position: absolute;
       right: 0;
       top: 0;
     }
     .topnav.responsive a {
       float: none;
       display: block;
       text-align: left;
     }
 }
 

/*footer*/
 .footer-basic {
     padding:40px 0;
     background-color:var(--color-1);
     background-image: var(--bg-url);
     color:var(--color-4);
     margin-top: 20px;
   }
   
   .footer-basic ul {
     padding:0;
     list-style:none;
     text-align:center;
     font-size:18px;
     line-height:1.6;
     margin-bottom:0;
   }
   
   .footer-basic li {
     padding:0 10px;
   }
   
   .footer-basic ul a {
     color:inherit;
     text-decoration:none;
     opacity:0.8;
   }
   
   .footer-basic ul a:hover {
     opacity:1;
   }
   
   .footer-basic .social {
     text-align:center;
     padding-bottom:25px;
   }
   
   .footer-basic .social > a {
     font-size:24px;
     width:40px;
     height:40px;
     line-height:40px;
     display:inline-block;
     text-align:center;
     border-radius:50%;
     border:1px solid var(--color-4);
     margin:0 8px;
     color:inherit;
     opacity:0.75;
   }
   
   .footer-basic .social > a:hover {
     opacity:0.9;
   }
   
   .footer-basic .copyright {
     margin-top:15px;
     text-align:center;
     font-size:13px;
     color:var(--color-4);
     margin-bottom:0;
   }
   
   @media screen and (max-width: 650px) {
     .column {
       width: 100%;
       display: block;
     }
   }
 @media screen and (max-width: 650px) {
   .column {
     width: 100%;
     display: block;
   }
 }
 @media screen and (max-width: 600px) {
     .topnav a:not(:first-child) {display: none;}
     .topnav a.icon {
       float: right;
       display: block;
     }
   }
   
   @media screen and (max-width: 600px) {
     .topnav.responsive {position: relative;}
     .topnav.responsive a.icon {
       position: absolute;
       right: 0;
       top: 0;
     }
     .topnav.responsive a {
       float: none;
       display: block;
       text-align: left;
     }
   }

/*gallery*/   
.heading {
    text-align: start;
    font-size: 2.0em;
    padding-top: 30px;
    color: var(--color-1);
 }
 
 .gallery-image {
   padding: 20px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
 }
 
 .gallery-image img {
   height: 250px;
   width: 350px;
   transform: scale(1.0);
   transition: transform 0.4s ease;
 }
 
 .img-box {
   box-sizing: content-box;
   margin: 10px;
   height: 250px;
   width: 350px;
   overflow: hidden;
   display: inline-block;
   color: var(--color-4);
   position: relative;
   
 }
 
 .caption {
   position: absolute;
   bottom: 5px;
   left: 20px;
   opacity: 0.0;
   transition: transform 0.3s ease, opacity 0.3s ease;
 }
 
 .transparent-box {
   height: 250px;
   width: 350px;
   background-color:rgba(0, 0, 0, 0);
   position: absolute;
   top: 0;
   left: 0;
   transition: background-color 0.3s ease;
 }
 
 .img-box:hover img { 
   transform: scale(1.1);
 }
 
 .img-box:hover .transparent-box {
   background-color:rgba(0, 0, 0, 0.5);
 }
 
 .img-box:hover .caption {
   transform: translateY(-20px);
   opacity: 1.0;
 }
 
 .img-box:hover {
   cursor: pointer;
 }
 
 .caption > p:nth-child(2) {
   font-size: 0.8em;
 }
 
 .opacity-low {
   opacity: 0.5;
 }
 
 .container {
   padding: 0 16px;
   margin-top:25px;
 }
 
 .container::after, .row::after {
   content: "";
   clear: both;
   display: table;
 }
 
 .title {
   color: var(--color-3);
 }
 
 .button {
   border: none;
   outline: 0;
   display: inline-block;
   padding: 8px;
   color: var(--color-4);
   background-color: #000;
   text-align: center;
   cursor: pointer;
   width: 100%;
 }
 
 .button:hover {
   background-color: #555;
 }
 *, *:before, *:after {
     box-sizing: inherit;
   }
   
   .column {
     float: left;
     width: 32.1%;
     margin-bottom: 16px;
     padding: 0 8px;
   }
   
   .card {
     box-shadow: 0 4px 8px 0 var(--color-2);
     margin: 20px;
   }
   
   .about-section {
     padding: 50px;
     text-align: center;
     background-color: #474e5d;
     color: white;
   }
   .desc {
    color: #ddd;
   }
   .head {
     text-align: center;
     color: var(--color-1);
   }
   .container1 {
     padding: 0 20px;
   }
   
   .container1::after, .row::after {
     content: "";
     clear: both;
     display: table;
   }
   
   .title {
     color: var(--color-1);
   }
   
   .button {
     border: none;
     outline: 0;
     display: inline-block;
     padding: 8px;
     color: var(--color-4);
     background-color: var(--color-1);
     text-align: center;
     cursor: pointer;
     width: 100%;
     
   }
   
   .button:hover {
     background-color: var(--color-2);
   }
   
   a{
     text-decoration:none;
 }
 .text {
     color: var(--color-4);
 }
 .services{
     width:100%;
     height: 100vh;
     display: flex;
     flex-direction: column;
     justify-content: space-evenly;
     align-items: center;
 }
 .s-heading{
     text-align:center;
     color: var(--color-1);
 }
 .s-heading h1{
     
     font-size: 3rem;
     font-weight: 400;
     letter-spacing: 1px;
     margin: 0px;
 }
 .s-heading p{
     
     font-size: 1rem;
     margin: 5px;
     text-align: center;
 }
 .s-box-container{
     width:100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }
 .s-box{
     display:flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
     width:300px;
     padding: 20px 25px;
     height: 400px;
     box-sizing: border-box;
     margin: 30px;
     position: relative;
 }
 .s-box img{
     height: 75px;
 }
 .s-box h1{
     color:var(--color-2);
     letter-spacing: 1px;
     font-size: 1.5rem;
     margin-bottom: 8px;
     
 }
 .s-box p{
     color: var(--color-2);
     text-align: center;
 }
 .s-btn{
     width: 140px;
     height: 40px;
     border-radius: 20px;
     border:1px solid var(--color-1);
     display: flex;
     justify-content: center;
     align-items: center;
     color:var(--color-2);
     margin-top:10px; 
 }
 .bar{
     width: 100px;
     height: 6px;
     position: absolute;
     left: 50%;
     top: 0%;
     transform: translateX(-50%);
     background-color:var(--color-2); 
     border-radius: 0px 0px 10px 10px;
     display: none;
     animation: bar 0.5s;
 }
 .s-box:hover{
     box-shadow: 2px 2px 30px var(--color-2);
     transition: all ease 0.3s;
 }
 .s-btn:hover{
     background-color:#4a90e2;
     border: 1px solid #4a90e2;
     color:#FFFFFF;
     transition: all ease 0.3s;
 }
 .s-box:hover .bar{
     display: block;
 }
 .container{
     width: 85%;
     background: #fff;
     border-radius: 6px;
     padding: 20px 60px 30px 40px;
     box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
   }
   .container .content{
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
   .container .content .left-side{
     width: 25%;
     height: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin-top: 15px;
     position: relative;
   }
   .content .left-side::before{
     content: '';
     position: absolute;
     height: 70%;
     width: 2px;
     right: -15px;
     top: 50%;
     transform: translateY(-50%);
     background: var(--color-3);
   }
   .content .left-side .details{
     margin: 14px;
     text-align: center;
   }
   .content .left-side .details i{
     font-size: 30px;
     color: var(--color-1);
     margin-bottom: 10px;
   }
   .content .left-side .details .topic{
     font-size: 18px;
     font-weight: 500;
   }
   .content .left-side .details .text-one,
   .content .left-side .details .text-two{
     font-size: 14px;
     color: #afafb6;
   }
   .container .content .right-side{
     width: 75%;
     margin-left: 75px;
   }
   .content .right-side .topic-text{
     font-size: 23px;
     font-weight: 600;
     color:var(--color-1);
   }
   .right-side .input-box{
     height: 40px;
     width: 100%;
     margin: 12px 0;
   }
   .right-side .input-box input,
   .right-side .input-box textarea{
     height: 100%;
     width: 100%;
     border: none;
     outline: none;
     font-size: 16px;
     background:var(--color-2);
     border-radius: 6px;
     padding: 0 15px;
     resize: none;
   }
   .right-side .message-box{
     min-height: 70px;
   }
   .right-side .input-box textarea{
     padding-top: 6px;
   }
   .right-side .button{
     display: inline-block;
     margin-top: 5px;
   }
   .right-side .button input[type="button"]{
     color: #fff;
     font-size: 18px;
     outline: none;
     border: none;
     padding: 8px 16px;
     border-radius: 6px;
     background: var(--color-1);
     cursor: pointer;
     transition: all 0.3s ease;
   }
   .button input[type="button"]:hover{
     background: var(--color-2);
   }
    input::placeholder{
        color:var(--color-4);
    }
   @media (max-width: 950px) {
     .container{
       width: 90%;
       padding: 30px 40px 40px 35px ;
     }
     .container .content .right-side{
      width: 75%;
      margin-left: 55px;
   }
   }
   @media (max-width: 820px) {
     .container{
       margin: 40px 0;
       height: 100%;
     }
     .container .content{
       flex-direction: column-reverse;
     }
    .container .content .left-side{
      width: 100%;
      flex-direction: row;
      margin-top: 40px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .container .content .left-side::before{
      display: none;
    }
    .container .content .right-side{
      width: 100%;
      margin-left: 0;
    }
   }
   
 @keyframes bar{
     0%{
         width:0px;
     }
     100%{
         width:100px;
     }
 }

 /*courses*/
 .testimonials{
     
     color:var(--color-1);
     text-align: center;
 }
 .inner{
     max-width:1200px;
     margin: auto;
     overflow: hidden;
     padding: 0 20px;
     color:var(--color-1);
     text-align: center;
 }
 .border{
     width: 160px;
     height: 5px;
     background:var(--color-2);
     margin: 26px auto;
 }
 .about{
     color:var(--color-2);
     text-align: center;
     font-size: 25px;
 }
 .row{
     display: flex;
     flex-wrap:wrap;
     justify-content: center;
 }
 .col{
     flex: 33.33%;
     max-width: 33.33%;
     box-sizing: border-box;
     padding: 15px;
 }
 .testimonial{
     background: var(--color-4);
     padding: 40px;
 }

 .name{
     color: var(--color-1);
     font-size: 20px;
     text-transform: uppercase;
     margin: 20px 0;
     text-decoration: underline;
 }
 .des{
     color: var(--color-1);
 }

 @media screen and (max-width:960px)
 {
     .col{
         flex: 100%;
         max-width: 80%;
     }
 }
 @media screen and (max-width:600px)
 {
     .col{
         flex: 100%;
         max-width: 100%;
     }
}

/*teacher style*/
.teach-section{
	
	text-align: center;
	
}
.inner-width{
	max-width: 1200px;
	margin: auto;
	padding: 40px;
	color: FFFFFFF;
	overflow: hidden;
	
}
.team-section h2{
	text-transform: uppercase;
	display: inline-block;
	font-size: 20px;	
}
.border{
	width: 120px;
	height: 3px;
	background: var(--color-2);
	margin: 20px auto;

}
.pe{
	float: left;
	width: calc(33.33%);
	overflow: hidden;
	padding: 40px 0;
	transition: 0.4s;
  align-items: center;
}
.pe:hover{
	background:var(--color-3);
}
.pe img{
	width: 120px;
	height: 120px;
	
	
}
.p-name {
	margin: 16px 0;
	text-transform: uppercase;
}
.p-des{
	font-style: sans serif;
	color: var(--color-1); 
	
	
}
@media screen and (max-width:600px){
	.pe{
		width:100%;
	}
}