@import url('https://fonts.googleapis.com/css?family=Poppins');
@import url('https://fonts.googleapis.com/css?family=Mooli');
*{
    padding:0;
    margin:0;
    box-sizing: border-box;
    font-family: Poppins;
}
.fix-header{
    z-index: 2;
    width:100%;
    padding:1% 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #1B4F72;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
    color:white;
    border-bottom: 5px solid darkorange;
}
.fix-header i{
    margin-right:10px;
}
.fix-header .text{
    display: flex;
    gap:30px;
}
.fix-header a{
    color:white;
    text-decoration: none;
    transition: all ease 0.4s;
}
.fix-header a:hover{
    cursor: pointer;
    color:darkorange;
}
.header{
    padding:0 5%;
    display:flex;
    width:100%;
    min-height:90px;
    box-shadow: 0px 0px 8px black;
    align-items: center;
    justify-content: center;
    padding:0px 0px 0px 5%;
    background: whitesmoke;
    z-index: 1; 
    position: relative;
}
.mbile-css{
    display: block;
    position: absolute;
    top:90px;
    align-items: center;
    left:0;
    flex-direction: column;
    background: whitesmoke;
    height:auto;
    width:100%;
    z-index: 100;
 }
 @keyframes rotate121 {
    to{
        transform: rotate(270deg);
    }
 }
 @keyframes rotate1211 {
    to{
        transform: rotate(-270deg);
    }
 }
.header i{
    color:#0B3C63;
    font-size:20px;
    display: none;  
    transition: all ease-in 0.4s;  
}
.logo .title{
    width:100%;
    height:100%;
}
.title img{
    width: 120px;
    height: 60px;
    object-fit: cover;
}
.header ul{
    height:90px;
    display: flex;
    align-items: center;
    justify-content: center;
    list-style: none;    
}
.header ul li{
    flex:0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 190px;
    position: relative;
    height:100%;
    transition: alll ease-in 0.4s;
}
.header ul li a{
    display: flex;
}
.header ul li i{
    padding-top:3px;
    margin-left:10px;
    font-size:16px !important;
    transition: all ease-in 0.4s;   
}
#courseup{
    display: none;
}
#coursedown{
    display: block;
}
@keyframes rotate1{
    to{
        transform: rotate(-360deg);
    }
}
@keyframes rotate{
    to{
        transform: rotate(360deg);
    }
}
.header ul li:hover{  
    cursor: pointer; 
    background: darkorange;
}

.header ul li:hover a{
    color:white;
}
ul li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color:#0B3C63;
    transition: all ease-in 0.3s;
}
ul li a:hover{
    color:darkorange;
    cursor: pointer;
}
ul li .drop-down{
    display: none;
    transition: all ease-in 0.4s;    
}

ul li:hover .drop-down{    
    display: block;
    position: absolute;
    top:100%;
    left:0%;
    width: 100%;
    background: whitesmoke;
    z-index: 2;
    animation:menu ease-in 0.5s;
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
}
#coursedown{
    animation: rotate1 linear 0.5s;
}
ul li:hover #coursedown{
    
    display: none;    
}
ul li:hover #courseup{
    display: block;
    animation: rotate linear 0.5s;
}

li .drop-down ul{
    display: flex;
    list-style: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 70;
    height: auto;
    transition: all ease-in 0.4s;
    
}
@keyframes menu{
    from{
        transform: translateY(-50px);
    }
    to{
        transform: translateY(0px);
    }
}
.drop-down ul li{
    font-size:16px; 
    text-align: center;  
    height:60px !important;
    position: relative;
}
.drop-down ul li .drop-down1{
    display: none;
}
.drop-down ul li:hover .drop-down1{
    display: block;
    position: absolute;
    top:0%;
    left:100%;  
    background:whitesmoke; 
    border-bottom-left-radius:8px;
    border-bottom-right-radius:8px;
    box-shadow: 0px 0px 7px rgba(0, 0, 0, 0.9);
}
.drop-down1 ul{
    display: flex;
    list-style: none;
    flex-direction: column;
}
.drop-down1 ul li{
    height: 30px;;
}

.drop-down ul li a{
    font-size:14px;
    color:#0B3C63 !important;
    padding:5px 0px;
    font-weight: 800;
    transition: all ease-in 0.4s;
}
.drop-down ul li:hover > a{
    cursor: pointer;
    color:white !important;
}
.social{
    padding:2px;
    background: transparent;
    z-index: 2;
    position: fixed;
    top:40%;
    right:0%;
    width:35px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.social .facebook{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: darkblue;
}
.social .youtube{
    width: 100%;
    height: 100%;
    display: flex;
    gap:2px;
    align-items: center;
    justify-content: center;
    background: red;
}
.social .instagram{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(120deg,yellow,purple,crimson,blue);
}
.facebook i,.youtube i,.instagram i{
    padding:10px;
    font-size:15px;
    color:white;
    transition: all ease-in 0.4s;
}
.facebook:hover{
    cursor: pointer;
    color:white;
 }
 .facebook:hover & .facebook i{
    background: darkblue;
 }
 .footer{
    width:100%;
    padding:2% 10%;
    color:rgba(0, 0, 0, 0.9);;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap:20px;
 }
 .footer .about-short{
    width:30%;
    text-align: center;
 }
 .footer .about-short img{
    width:180px;
    height:100px;
    object-fit: fill;
    
 }
 .footer .about-short p{
    line-height: 28px;
    text-align: justify;
    font-size:14px;
 }
 .footer .footer-data{
    width:100%;
    height: auto;
 }
 .footer-data .flex-container{
    width:100%;
    display: flex;
    flex-direction: row;
    gap:80px;
    padding:10px;

 }
 .flex-container h4{
    font-size:18px;
    letter-spacing: 3px;
 }
 .flex-container ul{
    list-style: none;
 }
 .flex-container ul li{
    padding:8px;    
    transition: all ease-in 0.4s;
    font-size:14px;
 }
 .flex-container ul li i{
    margin-right: 5px;
 }