*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
}
a{
    color: inherit;
    text-decoration: none;
}
body{
    background-color: black;
    font-family: Arial, Helvetica, sans-serif;
}
/* header css starts here */
.main{
    width: 1170px;
    height: 1600px;
    background-color: white;
    margin: auto;
}
.top-section{
    width: 1170px;
    height: 40px;
    background:#343130;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.top-left{
    display: flex;
    color: white;
   }
.top-left-content{
    font-size: 20px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    margin-right: 10px;
}
.top-left-img{
    margin-left:23px;
    margin-right: 13px;
}
.menu-container{
    width: 1170px;
    height: 140px;
    display: flex;
    justify-content: space-between;
}
.logo{
    width: 165px;
    height: 125px;
    margin-top: 10px;
    margin-left: 50px;
    cursor: pointer;
}
.menu-bar{
 width: 900px;
 height: 140px;
 display: flex;
 align-items: end;
 justify-content: space-around;
}
 .menu-items{
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #343130;
    margin-bottom: 10px;
 }
 .active-menu-item a{
    font-size: 20px;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    color: #00a8ec;
}
 .active-menu-item{
       margin-bottom: 10px;
}
/* middle-container left part css starts here */
.middle-container{
    width: 1170px;
    height: 755px;
    border: 20px solid #f1f0ef;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
}
.middle-left{
    width: 260px;
    height: 750px;
}
.menu-item-left{
    background-color: #00a8ec;
    width: 250px;
    height: 40px;
    margin-left: 5px;
    margin-top: 2px;
    font-size: 20px;
    padding-top: 5px;
    text-align: center;
    font-family: Arial, Helvetica, sans-serif;
    color: white;
    font-weight: bold;
}
.middle-left-button{
    width: 250px;
    height: 360px;
    margin: 10px 0px 0px 5px;
    border-radius: 15px 15px 0px 0px;
    overflow: hidden;
}
.middle-left-button-news{
    width: 100%;
    height: 45px;
    background: #ef9c00;
    color: white;
    font-family: arial;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
    padding-top: 15px;
}
.news-list{
    width: 250px;
    height: 250px;
    border: 1px solid #908c89;
    border-top: none;
}
.news-list li{
    margin: 10px;
    width: 100%;
    height: 40px;
    font-family: Arial, Helvetica, sans-serif;
    color: #343130;
}
.news-list li img{
    border-radius: 50px;
    margin-right: 2px;
    height:11px;
    width: 12px;
}
/* middle container right part css starts here */
.middle-right{
    width: 850px;
    height: 750px;
}
.banner img{
    height: 440px;
    background-color: #f1f0ef;
    padding-bottom: 15px;
}
.course-container{
    width: 851px;
    height: 280px;
    padding: 0px 10px 10px 0px;
}
.course-text{
    width: 170px;
    height: 50px;
    background-color:#f1f0ef;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bolder;
    text-align: center;
    font-size: 30px;
    color:#00a8ec;
    margin-top: -5px;
}
.course-box{
    width: 832px;
    display: flex;
    justify-content: space-between;
}
.course-box-cards{
    width: 390px;
    height: 235px;
}
.icon{
    width: 390px;
    height: 22px;
    display: flex;
    margin: 30px 0px 30px 0px;
}
.icon img{
    width: 34px;
    height: 34px;
    background: #e6611c;
    border-radius: 50%;
    margin-right: 20px;
}
.icon h3{
    margin-top: 8px;
    margin-left: 10px;
    font-family: arial;
    color: #e6611c;
    font-weight: normal;
}
.adv-php img{
    background-color: #5e5da4;
}
.adv-php h3{
    color: #5e5da4;
}
.python h3{
 color: #7bb1e0;
}
.python img{
    background-color:#7bb1e0 ;
}
.android h3{
    color: #89c222;
}
.android img{
    background-color:#89c222;
}
.graphic h3{
    color: #d60726;
}
.graphic img{
    background-color: #d60726;;
}
.search-engine img{
    background-color:#308a7c;
}
.search-engine h3{
    color: #308a7c;
}
.work-heading{
    width: 1170px;
    height: 65px;
    padding: 20px 0px 15px 0px;
    text-align: center;
    font-family: arial;
    background: #f1f0ef;
    font-size: 30px;
    color: #00a8ec;
    font-weight: bold;
    word-spacing: 5px;
}
.work-container{
    width: 1110px;
    margin: auto;
    height: 220px;
}
.work-container-box{
    width: 1110px;
    height: 220px;
    color: white;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 25px;
    font-weight: bolder;
    text-align: center;
    text-shadow: 0px 0px 5px black;
    display: flex;
    justify-content: space-between;
}
.work-img{
    width: 270px;
    height: 215px;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: 168px 150px;
}
.work-color{
    width: 100%;
    height: 215px;
    padding-top: 70px;
}
.bg-work-1{
     background-image: url("../images/how/HOW-WE-WORK1.png");
}
.color-work-1{
    background: rgba(188, 72, 109, 0.8);
}
.bg-work-2{
    background-image: url("../images/how/HOW-WE-WORK2.png");
}
.color-work-2{
   background: rgba(233, 79, 113, 0.8);
}
.bg-work-3{
    background-image: url("../images/how/HOW-WE-WORK3.png");
}
.color-work-3{
        background: rgba(237, 136, 56, 0.8);
}
.bg-work-4{
    background-image: url("../images/how/HOW-WE-WORK4.png");
}
.color-work-4{
    background: rgba(244, 183, 65, 0.8);
}
/* footer css starts here */
.footer{
    width: 1170px;
    height: 360px;
    margin-top: 20px;
    background: #343130;
}
.footer-top-container{
    width: 1170px;
    height: 295px;
    border-bottom: 1px solid rgb(106, 97, 100);
    margin-top: 25px;
    display: flex;
    padding-top: 25px;
}
.quick-links-container{
    height: 100%;
    width: 225px;
    margin-left: 70px;
}
.quick-links-container h2{
    letter-spacing: 1px;
    color: #efeceb;
    font-family: arial;
    height: 40px;
}
.quick-links-container ul{
    margin-top: 10px;
    width: 225px;
    height: 212px;
    color: white;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-training-container{
    width: 520px;
    height: 295px;
    color: white;
    display: flex;
    justify-content: start;
  }

.footer-training-text h2{
 height: 40px;
 width: 0px;
 margin-left: 20px;
}
.training-container{
    width: 250px;
    height: 255px;
    margin-top: 40px;
}
.training-container ul{
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.footer-contact-container{
    width: 320px;
    height: 295px;
}
.footer-contact-container h2{
    color: white;
   }
.contact-address-list{
    color: white;
    margin-top:20px;
    display: flex;
    gap: 20px;
    flex-direction: column;
}
.social-links{
    display: flex;
    gap: 15px;
    margin-top: 15px;
}
.copy-right{
    color: white;
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
/* about page css */
.middle-right-about{
    width: 850px;
    height: 750px;
}
.page-status{
    width: 816px;
    height: 30px;
    padding: 20px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.page-status h1{
      color: #343130;
      width: 300px;
      height: 30px;
      font-weight: bold;
      font-size: 2em;
    
}
.about-content{
    width: 850px;
    height: 534px;
   
}
.about-content p {
    margin-top: 22px;
    font-size: 18px;
    word-spacing: 2px;
}
.why-points{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
/* courses css starts here */
.middle-right-course{
    width: 850px;
    height: 815px;
}
.course-content{
    width: 790px;
    height: 740px;
    margin: 30px 30px 0px 30px;

}
.row-1{
    width: 800px;
    height: 250px;
    display: flex;
    gap: 30px;
}
.course-1{
    width: 210px;
    height: 230px;
    border-radius: 10px;
    margin-left: 30px;
}
.course-php{
    border: 1px solid #e6611c;
 }
.course-1-icon{
    width: 100%;
    height: 160px;
  
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px 10px 0px 0px;
}
.course-icon-php{
    background-color: #e6611c;
}
.course-icon-python{
    background-color: #7bb1e0;
}
.course-python{
    border:1px solid #7bb1e0;

}
.course-ad-php{
    border: 1px solid #5e5da4;
}
.icon-1{
    width: 127px;
    height: 120px;
    border: 10px solid white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.course-icon-ad-php{
    background-color: #5e5da4;
}
.course-1-content{
    width: 209px;
    height: 62px;
    padding: 5px 0px 5px 0px;
    font-size: 22px;
   
    text-align: center;
}
.content-php{
    color: #e6611c;
}
.content-python{
    color: #7bb1e0;
    padding-top: 20px;
}
.content-ad-php{
    color: #5e5da4;
    padding-top: 20px;
  
}
.course-seo{
    border: 1px solid #308a7c;
}
.course-icon-seo{
    background-color: #308a7c;
}
.content-seo{
    color: #308a7c;
}
.course-android{
    border: 1px solid #89c222;
}
.course-icon-android{
    background-color: #89c222;
}
.content-android{
    color: #89c222;
}
.course-graphic{
    border: 1px solid #d60726;
}
.course-icon-graphic{
    background-color: #d60726;
}
.content-graphic{
    color: #d60726;

}
.course-digital{
    border: 1px solid #5e5da4;
}
.course-icon-digital{
    background-color: #5e5da4;
}
.content-digital{
    color: #5e5da4;
    padding-top: 20px;
}
.course-wordpress{
    border: 1px solid #e6611c;
}
.course-icon-wordpress{
    background-color: #e6611c;
}
.content-wordpress{
    color: #e6611c;
    padding-top: 20px;
}
.course-java{
    border: 1px solid darkgreen;
}
.course-icon-java{
    background-color: darkgreen;
}
.content-java{
    color: darkgreen;
    padding-top: 20px;
}
/* gallery css starts here */
.middle-right-gallery{
    width: 850px;
    height: 790px;
}
.gallery-content{
    width: 850px;
    padding: 50px 30px 0px 30px;
    display: flex;
    flex-wrap: wrap;
}
.galleryimgdiv{
    width: 225px;
    height: 220px;
    margin: 0px 35px 60px 0px;
   }
.galleryimgtitle{
 width: inherit;
 text-align: center;
 background: #343130;
 padding: 12px 0px 12px 0px;
 color: white;
border-radius: 0px 0px 5px 5px;
}
.img-gallery{
    width: 225px;
    height: 170px;
    border-radius: 5px 5px 0px 0px;
}
.middle-right-enquiry{
    width: 850px;
    height: 815px;
}
/* enquiry css starts here */
.mainwebsitecontent{
    width: 850px;
    height: 750px;
}
.formrow{
    display: flex;
    margin-top: 30px;
    margin-left: 30px;
    gap: 40px;
    margin-top: 40px;
    
}
.inputform{
    margin-left: 30px;
}
.heading{
    font-size: 18px;
    font-weight: 700;
}
.inputform2{
    margin-left: 50px;
}
.inputform3{
    margin-left: 10px;
}
.inputform4{
    margin-left: 35px;
}
.inputform5{
    margin-left: 60px;
}
.inputform6{
    margin-left: 70px;
}
.inputform7{
    margin-left: 30px;
}
.textarea{
    width: 200px;
    height: 100px;
    color: #5b5b5b;
    font-family: verdana;
}
.inputform8{
    margin-left: 50px;
}
.inputbox{
    width: 200px;
    height: 30px;
    color: #5b5b5b;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}
.buttonarea{
    margin-left: 30px;
    margin-top: 30px;
}
.button{
        background: #09F;
    border: none;
    color: #FFF;
    padding: 10px 20px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    border-radius: 10px;
    margin: 0px auto;
    cursor: pointer;
}
/* contactUs css starts here */
.middle-right-contactUs{
    width: 850px;
    height: 865px;
}
.contact-content{
    width: 860px;
    height: 760px;
}
.contact-row{
    width: 800px;
    height: 250px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}
.contact-row-left{
    width: 320px;
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-direction: column;
}
.row-left-para{
    font-weight: bold;
}
.findUs{
    font-size: 25px;
    margin-top: 30px;
    margin-left: 30px;
}
.contact-map{
    width: 800px;
    height: 402px;
    margin:20px auto;
}