*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: century ;
}
header{
    background-image: url(media/JKIA-Refurbishment-1536x1021.jpg);
    height: 60vh;
    background-size: cover;
    background-position: center;
    min-height: 100px;
}
ul{
    float: right;
    list-style-type:none;
    margin-top: 40px;
    min-height: 400px;
    margin-right: 60px;
    font-size: 17px;
  
}
ul li{
    display: inline-block;
    
}
ul li a{
    text-decoration: none;
    color: #fff;
    padding: 10px 30px;
    border:1px solid transparent;
    transition: 0.5s ease-in-out;
}
.logo img{
    float: left;
    width: 150px;
    height: auto;
    background-color: #fff;
    transition: 0.5s;

}
.active{
    border-radius: 10px;
    color: #000;

}
.active{
    background-color: bisque;
    border-radius: 10px;
}
.logo img:hover{
    border-radius: 20px;
    cursor: pointer;
}
.main{
    max-width: 1200px;
    margin: auto;
   
}
ul li a:hover{
    background-color: bisque;
    border-radius: 3px;
    color: #000;
}
.dropdown_menu {
    display: none;
}
.dropdown_menu ul{
    display: block;
    position: absolute;
    padding: 0px;
    margin-top: 2%;
    
}
.dropdown_menu ul li{
    padding: 10px;
    left: 0%;
}

ul li:hover .dropdown_menu{
    display:block ;
    position: absolute;
    margin-top: 0;
    
}
.dropdown_menu2{
    display: none;
}
.dropdown_menu2 ul{
    display: block;
    padding: 0px;
    position: absolute;
    margin-top: 2%;
}
.dropdown_menu2 ul li{
    padding: 10px;
    left: 0%;
}
ul li:hover .dropdown_menu2{
    display: block;
    position: absolute;
    margin-top: 0%;
}
.h1{
    color: burlywood;
    position:absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 40px;
    background-color: #fff;
    transition: 0.5s;
}
.image{
    right: 50%;
    bottom: 0%;
    position: absolute;
    left: 50%;
    width: 30px; 


}
.dropdown_menu3{
    display: none;
}
.dropdown_menu3 ul{
    display: block;
    padding: 0;
    margin-top: 2px;
    position: absolute;

}
ul li:hover .dropdown_menu3{
    display: block;
}
.dropdown_menu3 ul li{
    display: block;
    padding: 10px;
}
.dropdown_menu4{
    display: none;
}
.dropdown_menu4 ul{
    display: block;
    margin-top: 2px;
    padding: 0%;
    position: absolute;

}
.dropdown_menu4 ul li{
    display: block;
    padding: 10%;
}
ul li:hover .dropdown_menu4{
    display: block;
}
.container{
    float: right;
    margin-top: 40px;
    position: right;
}
.container form{
    border-radius: 5px;
    padding: 10px;
    height: 50px;
    background-color: gray;
}
.container form,input{
    padding: 5px;
    margin-top: 2%;
}
.container button{
    text-decoration: none;
    padding: 2px;
}
.About-Us{
    text-align: center;
}
.about-us{
    background: burlywood;
    color: black;
    height: 450px;
    position: relative;
    display: flex;
}
.about-us .section{
    flex: 1;
    border: 1px solid transparent;
    position: relative;
}
.about-us .section .A,.logo2{
    text-align: center;
}
.about-us .section .A,p{
    padding: 15px;
    margin-left: 5px;
    font-size: large;
}
.about-us .section .B,h2{
    text-align: center;
}
.about-us .section .B,img{
    position: absolute;
    width: 95%;
    height: 400px;
    object-fit: cover;
    margin-top: 6px;
    margin-left: 2px;
}
.wards{
    background-color: #fff;
    height: 400px;
    border: 1px solid transparent;
    border-radius: 25px;
    position: relative;
}
.wards .wards-tittle{
    background-color: white;
    height: 50px;
    width: 100%;
    border-radius: 5px;
    color: brown;
    text-align: center;
    position: absolute;
    font-size: 40px;
}
.wards .wards-content{
    color: #000;
    height: 350px;
    display: flex; 
}
.wards .wards-content .wards-section{
    flex: 1;
    border: 1px solid white;
    background-color: gray;
    box-shadow: #303036;
    
}
.wards .wards-content .wards-section:hover{
    background-color: bisque; 
    color: black;
    transition: 2s;
    border-radius: 3px;
}
.wards .wards-content .wards-section,h4{
    padding: 20px
}
/*--media--*/
.media{
    background-color: #fff;
    height: 400px;
    position: relative;
}
.media .media-content{
    display: flex;
    height: 350px;
}
.media .media-content .media-section{
    flex: 1;
    border: 1px solid transparent;
    height: 350p;
    position: relative;
}
.media .media-content .media-section img{
    object-fit: cover;
    position: absolute; 
    height: 325px;
    display: block;
 }
 .media .media-content .media-section img:hover{
    color: #303036;
 }

          /* footer */
          .footer{
            background: #303036;
            color: #d3d3d3;
            height: 500px;
            position: relative;
            border-radius: 30px;
        }
        .footer .footer-bottom{
            background: lightgrey;
            color: blue;
            height: 40px;
            width: 100%;
            text-align: center;
            position: absolute;
            bottom: 0px;
            left: 0%;
            padding-top: 20px;
        }
        .footer-content{
            border: rebeccapurple;
            height: 475px;
            display: flex;
            border-radius: 3%;
        }
        .footer .footer-content .footer-section{
            flex: 1;
            border: 0.1px solid gray;
            padding: 25px;
            border-radius: 25px;
        }
        .footer .footer-content .footer-section .about,p{
            font-size: larger;
        }
        .footer .footer-content .footer-section h1,h2,h3{
            color: #fff;
        }
        .footer .footer-content h1 span{
            color: aquamarine;
        }
        .footer .footer-content .footer-section .contact span{
            display: block;
            font-size: large;
            margin-bottom: 30 px;
        }
        .footer .footer-content .footer-section .socials{
            border: 1px solid grey;
            width: 80px;
            height: 80px;
            padding-top:5px ;
            margin-right: 5px;
            text-align: center;
            display: inline ;
            font-size: 30px;
            background-color: #fff;
            border-radius: 5px;
            bottom: 0px;
            color: red;
        
        }
        .footer .footer-content .footer-section .socials .gram,.tube{
            color: red;
        }
        .footer .footer-content .footer-section .socials .twitter,.book{
            color: blue;
        }
        .footer .footer-content .footer-section .socials a:hover{
            color: aquamarine;
            transition: 0s;
        }
        .footer .footer-content .links{
            position: relative;
        }
        .footer .footer-content .links li{
            display: block;
        }
        .footer .footer-content .links ul a{
           display: block; 
           margin-top: 5px;
           font-size: large;
        }
        .footer .footer-content .links a:hover{
            color: #fff;
            margin-left: 5px;
            transition: 2s;
        }
        .footer .footer-content .footer-section .contact-form,.text-input{
            background-color: rgb(63, 62, 62);
            padding: 10px;
            line-height: 1.2cm;
            border: none;
            width: 100%;
        }
        .footer .footer-content .footer-section .contact-form,.text-input:focus{
            background-color: #000;
        }