*{
margin: 0;
padding: 0px;
font-family: 'Poppins', sans-serif;
}
.header{
min-height: 100vh;
width: 100%;
background-image: url(image/MM.jpg);
background-position: center;
background-size: cover;
position: relative;

}
nav{
display: flex;
padding: 2% 6%;
justify-content: space-between;
align-items: center;
}
nav img{
width: 240px;
}
.nav-links{
flex:1;
text-align: right;
}
.nav-links ul li{
list-style: none;
display: inline-block;
padding: 7px 18px;
position: relative;
}
.nav-links ul li a{
color: darkblue;
text-decoration: none;
font-size: 13px;
}
.nav-links ul li::after{
content: '';
width: 0%;
height: 2px;
background: #f44336;
display: block;
margin: auto;
transition: 0.5s;
}
.nav-links ul li:hover::after{
width: 100%
}
.text-box{
width: 90%;
color: darkblue;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
text-align: center;
}
.text-box h1{
font-size: 62px;
}
.text-box p{
margin:
font-size: 10px 0 40px;
font-size: 14px;
color: darkblue;
}
.hero-btn{
display: inline-block;
text-decoration: none;
color: Darkblue;
border: 3px solid darkblue;
padding: 12px 34px;
font-size: 13px;
background: transparent;
position: relative;
cursor: pointer;
}
.hero-btn:hover{
border: 1px solid #f44336;
background: #f44336;
transition: 1s;
}
nav .fa{
display: none;
}
@media(max-width: 700px){
.text-box h1{
font-size: 20px;
}
.nav-links ul li{
display: block;
color: darkblue;
}
.nav-links{
position: absolute;
background: #f1ece6;
height: 50vh;
width: 140px;
top: 0;
right: ;
left: -200px;
text-align: center;
z-index: 2;
transition: 1s;
display: block;
}
nav .fa{
display: block;
color: darkblue;
margin: 10px;
font-size: 22px;
cursor: pointer;
}
.nav-links ul{
display: block;
padding: 10px;
}
}

/*------course-----*/

.course{
width: auto;
text-align: center;
padding: 50px;
color: darkblue;
}
h1{
color: darkblue;
font-size: 20px;
font-weight: 600px;
}
p{
color: darkblue;
fon-size: 14px;
font-weight: 300%;
line-height: 22px;
padding: 10px;
}
.row{
margin-top: 5%;
display: flex;
justify-content: space-between;
}
.course-col{
flex-basis: 50%;
background: light;
border-radius: 60px;
margin-bottom: 5%;
padding: 10px 12px;
box-sizing: border-box;
transition: 0.5s;
}
h3{
text-align: left;
color: darkblue;
font-weight: 600;
margin: 10px;

}
@media(max-width: 700px){
.row{
flex-direction: column;
}
}

/*------Branches-----*/
.branches{
width: 80%;
margin: auto;
text-align: center;
padding: 30px;
}
.branches-col{
text-align: center;
flex-basis: 32%;
border-radius: 10px;
margin-bottom: 30px;
position: relative;
overflow: hidden;
}
.branches-col img{
width: 100%;
display: block;
}
.layer{
background: lightblue;
text-align: center;
height: 100%;
width: 100%;
position: center;
top: 0;
left: 0;
transition: 0.5s;
}
.layer:hover{
background: rgba(226,0,0,0.7);
}
.layer h3{
width: 100%
font-weight: 500;
color: black;
font-size: 15px;
bottom: 0;
left: 50%;
position: center;
opacity: 3;
transition: 0.5s
}
.layer:hover h3{
bottom: 49%;
opacity: 2;
}

@media(max-width: 700px){
branches-col img{
height: 40px;
margin-left: 5px;
margin right: 30px;
border-radius: 50%
}
}

/*------CALL FOR ACTION------*/
.cta{
margin: auto;
width: 80%;
background-image: url(image/kh2.jpg);
background-position: center;
background-size: cover;
border-radius: 10px;
text-align: center;
padding: 10px 0;
}
.cta h1{
color: darkblue;
margin-bottom: 40px;
padding: 0;
}
@media(max-width: 700px){
.cta h1{
font-size: 24px;
}
}
/*------client------*/
.client{
position: center;
}
/*------Footer------*/
.footer{
width: 100;
text-align: center;
padding: 30px 0;
}
.footer h4{
color: darkblue;
margin-bottom: 25px;
margin-top: 20px;
font-weight: 600;
}
hr{
margin: 40px;
}
.icons .fa{
color: red;
margin: 0 13px;
cursor: pointer;
padding: 18px 0;
}
.fa-heart{
color: red;
}
}

*------Clients-----*/
.clients h1{
with: 80%;
margin: auto;
text-align: center;
padding: 30px;
}
.clients{
width: 80%;
margin: 70px;
text-align: center;
padding: 30px;
}
.clients-col{

flex-basis: 20%;
border-radius: 60px;
width: 80%;
position: 30px;
}
.clients-col img{
width: 100%;
}
}
/*------about------*/
.about h2{
width: 80%;
margin: auto;
text-align: center;
padding: 100px;
color: darkblue;
}
h2{
color: darkblue;
}
.article p{
width: 80%;
margin: auto;
text-align: center;
padding: 100px;
background: #fff3f3;
}
@media(max-width: 700px){
clients-col img{
height: 40px;
margin-left: 5px;
margin right: 30px;
border-radius: 50%;
}