* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  :root{
    --dark-blue: #497b8d;
    --main-color: #00b0f0;
    --second-color: #ec008c;
    --bg-color: #fff;
    --text-color: #000;
    --second-bg-color: #7ed6f7;
    --second-cl-ligh: #ff9fd9;
    --other-color: rgb(255, 208, 236);
    --other-with-color: rgb(63, 63, 63);
    --other: #ffffff;
    --hd-color: #00000027;
    --white-sd: #CDF6FD;
  
    --h1-font: 85.8px;
    --h2-font: 40px;
    --h3-font: 35px;
    --p-font: 13px;
    --italic: italic;
  }
  /* body */
  
  body {
    color: var(--text-color);
    background: var(--other);
    font-family: 'Poppins', sans-serif;
  }
  
  /* Header */
  
  header{
    width: 100%;
    margin: auto;
  }
  
  /* Nav */
  
  .nav1 .a{
    color: transparent;
  }
  .nav1{
    display: flex;
    height: 100px;
    justify-content: center;
  }
  
  .nav1 ul{
    display: flex;
    list-style: none;
    margin-right: 50px;
    margin-top: 30px;
  }
  .nav1 .menu{
    margin-top: -55px;
  }
  /* Logo */
  
  .logo{
    margin: 15px;
    width: 200px;
    height: 65px;
    cursor: pointer;
  }
  
  /* All Courses Box */
  
    .all-courses-box{
      width: 150px;
      margin-right: 700px;
      height: 40px;
      background: var(--main-color);
      border-radius: 10px;
    }
  .all-courses-box a{
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: var(--other);
  }
  .all-courses-box a .folder{
    margin-top: 9px;
    margin-right: 10px;
  }
  .all-courses-box a h3{
    margin-top: 11px;
    font-size: 14px;
  }
  /* Search */
    .nav1 form{
      display: none;
    }
  
  .search{
    width: max-content;
    display: flex;
    align-content: center;
    border-radius: 10px;
    background: var(--other);
    border: 1px solid var(--main-color);
    margin-right: 300px;
  }
  .search-input{
    font-size: 16px;
    font-family: "lexend", sans-serif;
    color: var(--other-with-color);
    margin-left: 14px;
    outline: none;
    border: none;
    background: transparent;
    width: 300px;
  }
  .search-input::placeholder, .search-icon{
    color: var(--main-color);
    padding: 5px;
  }
  .search-icon{
    border: 1px solid var(--main-color);
    border-radius: 5px;
  }
  
  /* Button */
  
  .nav1 button{
  height: 40px;
  width: 100px;
  background: var(--main-color);
  border: 2px solid var(--main-color);
  margin-left: -90px;
  display: inline-block;
  color: var(--other);
  font-size: 18px;
  font-weight: 400;
  transition: all ease .50s;
  border-radius: 5px;
  cursor: pointer;
  }
  .nav1 button:hover{
  transform: translateX(5px);
  background: transparent;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  }
  
  
  /* Second Navigation Bar */
  
  .nav2{
    background: var(--main-color);
    text-align: center;
  }
  .nav2 ul{
    display: inline-flex;
    list-style: none;
    color: var(--other);
  }
  .nav2 ul li{
    margin: 15px;
    padding: 15px;
  }
  .nav2 ul .category p{
    margin-top: 20px;
    margin-bottom: -35px;
    margin-left: -45px;
    font-style: var(--italic);
    font-size: 13px;
  }
  .nav2 ul li a{
    text-decoration: none;
    color: var(--other);
  }
  .nav2 ul li:hover{
    background: var(--second-bg-color);
    border-radius: 3px;
  }
  .or{
    display: flex;
  }
  
  /* Sub Menu Category */
  
  .sub-menu{
    display: none;
  }
  .nav2 ul li:hover .sub-menu{
    display: block;
    position: absolute;
    background: var(--main-color);
    margin-top: 15px;
    margin-left: -15px;
    border-radius: 10px;
    box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
  }
  .nav2 ul li:hover .sub-menu ul{
    display: block;
    margin: 10px;
  }
  .nav2 ul li:hover .sub-menu ul li{
    padding: 10px;
    border-bottom: 1px dotted var(--other);
    border-radius: 3px;
    text-align: left;
  }
  .bi-caret-left-fill{
    float: left;
    margin-right: 10px;
  }
  
  
  /* second Sub Menu */
  
  /* second Sub Menu */
  .uk-course .hover-me:hover .sub-menu-1{
    display: block;
    position: relative;
    margin-left: 200px;
    margin-top: -80px;
    background: var(--white-sd);
  }
  .uk-course .sub-menu-1{
    width: 400px;
    margin-left: 350px;
  }
  .uk-course .hover-me:hover .sub-menu-1 .sec1{
    width: 100%;
  }
  .sub-menu-1{
    display: none;
    width: 800px;
    border-radius: 10px;
    box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
  }
  .active1 .hover-me:hover .sub-menu-1{
    display: block;
    position: absolute;
    margin-left: 200px;
    margin-top: -250px;
    background: var(--white-sd);
  }
  .active1 .sub-menu{
    width: 300px;
  }
  .active1 .sub-menu .hover-me .sub-menu-1{
    width: 500px;
  }
  .active .hover-me:hover .sub-menu-1{
    display: block;
    position: absolute;
    margin-left: -810px;
    margin-top: -200px;
    background: var(--white-sd);
  }
  .hover-me:hover .sub-menu-1 .section{
    display: flex;
  }
  .active .hover-me:hover .sub-menu-1 .sec1{
    width: 300px;
  }
  .hover-me:hover .sub-menu-1 .sec1 ul li a{
    color: var(--other-with-color);
  }
  .hover-me:hover .sub-menu-1 .sec1 ul li{
    border-bottom: 1px dotted var(--other-with-color);
  }
  .active1 .hover-me:hover .sub-menu-1 .sec2{
    padding: 30px;
  }
  .active .hover-me:hover .sub-menu-1 .sec2{
    margin-left: 50px;
    padding: 30px;
    width:  60%;
  }
  .active .hover-me:hover .sub-menu-1 .sec2 .secd{
    margin-bottom: 50px;
  }
  .active1 .hover-me:hover .sub-menu-1 .sec2 .secd p span{
    color: var(--main-color);
    font-size: 16px;
  }
  .active1 .hover-me:hover .sub-menu-1 .sec2 .secd button{
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    background: var(--other);
    border-radius: 5px;
    margin: 10px 140px;
    border: 2px solid var(--main-color);
    color: var(--main-color);
    transition: all ease .50s;
    cursor: pointer;
  }
  .active1 .hover-me:hover .sub-menu-1 .sec2 .secd button:hover{
    background: transparent;
    transform: scale(1.1);
    color: var(--main-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }
  .hover-me:hover .sub-menu-1 .sec2 .secd h3{
    color: var(--other-with-color);
    text-align: center;
    margin-left: -20px;
  }
  .hover-me:hover .sub-menu-1 .sec2 .secd p{
    color: var(--other-with-color);
    font-size: 14px;
    font-style: normal;
    justify-content: baseline;
  }
  .active1 .sub-menu .hover-me .sub-menu-1 .section .sec2 .secd a{
    color: var(--main-color);
  }
  .mobile .bi-list, 
  .mobile .sub-menu .hover-me a,  
  .mobile .active .hover-me:hover .sub-menu-1, 
  .mobile .hover-me:hover .sub-menu-1 .sec2 .secd h3, 
  .mobile .hover-me:hover .sub-menu-1 .sec2 .secd p, 
  .mobile .hover-me:hover .sub-menu-1 .sec1 ul li a, 
  .mobile .hover-me:hover .sub-menu-1 .sec1 ul li{
    color: transparent;
    background: transparent;
    border: none;
    box-shadow: 0px 29px 51px 2px rgba(0, 0, 0, 0);
  }
  
  
  /* Home */
  #home {
    width: 100%;
    margin: auto;
  }
  
  #home .content{
    display: flex;
    justify-content: center;
    background: var(--white-sd);
    height: 400px;
  }
  #home .content .middle{
    width: 1349px;
    padding: 40px 80px 0px 80px;
    display: flex;
  }
  #home .content .middle .left{
    padding: 30px 0px;
    width: 60%;
  }
  #home .content .middle .left h1{
    font-size: 60px;
  }
  #home .content .middle .left h5{
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
  }
  #home .content .middle .right img{
    width: 400px;
  }


  #home2 {
    width: 100%;
    margin: auto;
  }
  
  #home2 .content{
    display: flex;
    justify-content: center;
    background: #47022c1c;
  }
  #home2 .content .middle{
    width: 1349px;
    padding: 20px 80px 20px 80px;
    display: flex;
  }
  #home2 .content .middle .left{
    padding: 30px 0px;
    width: 60%;
    margin-top: 50px;
  }
  #home2 .content .middle .left h1{
    font-size: 60px;
  }
  #home2 .content .middle .left h5{
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
  }
  #home2 .content .middle .right img{
    width: 400px;
    border-radius: 10%;
    border: 10px solid var(--second-bg-color);
  }

  #home3 {
    width: 100%;
    margin: auto;
    height: 100%;
  }
  
  #home3 .content{
    display: flex;
    justify-content: center;
    background: #00b0f01a;
  }
  #home3 .content .middle{
    width: 1349px;
    padding: 20px 80px 20px 80px;
    display: flex;
  }
  #home3 .content .middle .left{
    padding: 30px 0px;
    width: 60%;
    margin-top: 50px;
  }
  #home3 .content .middle .left h1{
    font-size: 60px;
    display: none;
  }
  #home3 .content .middle .left h5{
    font-weight: 600;
    font-size: 30px;
    margin-bottom: 5px;
  }
  #home3 .content .middle .left p{
    font-style: italic;
    margin-bottom: 20px;
  }
  #home3 .content .middle .left p span{
    font-weight: 600;
    font-style: normal;
  }
  #home3 .content .middle .right img{
    width: 300px;
    border-radius: 10%;
  }
  #home3 .apply a{
    background: var(--main-color);
    text-decoration: none;
    color: var(--bg-color);
    padding: 10px 20px;
    border-radius: 5px;
    transition: all ease .50s;
    border: 2px solid var(--main-color);
  }
  #home3 .apply a:hover{
    background: var(--bg-color);
    transform: translateX(5px);
    color: var(--main-color);
  }


  #home4 {
    width: 100%;
    margin: auto;
  }
  
  #home4 .content{
    display: flex;
    justify-content: center;
    background: #00b0f01a;
  }
  #home4 .content .middle{
    width: 1349px;
    padding: 20px 80px 20px 80px;
    display: flex;
  }
  #home4 .content .middle .left{
    padding: 30px 0px;
    width: 60%;
    margin-top: 50px;
  }
  #home4 .content .middle .left h1{
    font-size: 40px;
  }
  #home4 .content .middle .left h5{
    font-style: italic;
    font-weight: 500;
    font-size: 18px;
  }
  #home4 .content .middle .right img{
    width: 300px;
    border-radius: 10%;
  }


  #mid{
    width: 100%;
    margin: auto;
  }
  #mid .content{
    display: flex;
    justify-content: center;
  }
  #mid .content .middle{
    width: 1349px;
    padding: 20px 80px;
    display: flex;
  }
  #mid .content .middle p{
    font-size: 18px;
  }
  #responsibility{
    width: 100%;
    margin: auto;
  }
  #responsibility p{
    font-size: 15px;
  }
  #responsibility .content{
    display: flex;
    justify-content: center;
  }
  #responsibility .content h3{
    text-align: center;
    margin-bottom: 20px;
  }
  #responsibility .content .middle{
    width: 1349px;
    padding: 20px 80px;
  }
  #responsibility .content .middle .mid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 2rem;
  }
  #responsibility .content .middle .mid .card{
    padding: 30px 50px;
    background: var(--second-bg-color);
    border-radius: 50px 15px;
    transition: all ease .50s;
  }
  #responsibility .content .middle .mid .card ol li{
    margin-bottom: 10px;
  }
  #responsibility .content .middle .mid .card ol li p{
    margin-left: 10px;
  }
  #responsibility .content .middle .mid .card ol li span{
    font-weight: 600;
    margin-right: 5px;
  }
  #responsibility .content .middle .mid .card:hover{
    background: var(--main-color);
    transform: translateX(5px);
  }
  #responsibility .content .middle .mid .card:hover h3{
    color: var(--bg-color);
  }
  #responsibility .content .middle .mid .card:hover li{
    color: var(--bg-color);
  }
  #Eligibility{
    width: 100%;
    margin: auto;
    border-bottom: 2px solid #00000010;
  }
  #Eligibility .content{
    display: flex;
    justify-content: center;
  }
  #Eligibility .content .middle{
    width: 1300px;
    padding: 20px 20px 0 20px;
  }
  #Eligibility .content .middle h1{
    font-size: 25px;
    margin-top: 20px;
    text-align: center;
    padding: 20px 0;
    border-bottom: 2px solid var(--main-color);
  }
  #Eligibility .content .middle .mid{
    margin-top: 20px;
    display: flex;
    margin-bottom: 50px;
  }
  #Eligibility .content .middle .mid .box{
    width: 50%;
    margin: 0 50px;
  }
  #Eligibility .content .middle .mid .box p span{
    margin-right: 5px;
    font-weight: 600;
  }
  #Eligibility .content .middle .mid .box p{
    font-size: 15px;
    margin-left: 10px;
  }
  #Eligibility .content .middle .mid .box .midd{
    margin: 20px 0px 20px -30px;
    padding: 10px 0;
    border-bottom: 2px solid var(--text-color);
    border-top: 2px solid var(--text-color);
  }
  #Eligibility .content .middle .mid .box .main .main2{
    margin-left: 50px;
    margin-top: 10px;
  }
  #Eligibility .content .middle .mid .box .main .main2 .main3{
    margin-left: 50px;
    margin-top: 20px;
  }
  #Eligibility .content .middle .mid .box .note{
    padding: 50px;
    background: var(--white-sd);
    border-radius: 10px 50px;
  }
  #Eligibility .content .middle .mid .box .note p{
    margin-left: 10px;
  }
  #Eligibility .content .middle .mid .box .note h3{
    font-size: 18px;
    margin-bottom: 10px;
  }
  #Eligibility .content .middle .mid .box .note ol li{
    margin-bottom: 10px;
  }
  #Eligibility .content .middle .mid .box .note ol li span{
    margin-right: 5px;
    font-weight: 600;
  }
  #benfits{
    width: 100%;
    margin: auto;
  }
  #benfits .content{
    display: flex;
    justify-content: center;
  }
  #benfits .content .middle{
    width: 1349px;
    padding: 20px 80px;
  }
  #benfits .content .middle h1{
    margin: 20px 0;
    text-align: center;
  }
  #benfits .content .middle .mid{
    display: flex;
  }
  #benfits .content .middle .card{
    padding: 50px;
    background: var(--second-bg-color);
    border-radius: 30px 5px;
  }
  #benfits .content .middle .card ol li{
    margin-bottom: 10px;
  }
  #benfits .content .middle .card ol li p{
    margin-left: 10px;
  }
  #benfits .content .middle .right img{
    border-radius: 50%;
    width: 400px;
    margin-left: 150px;
    margin-top: 20px;
    border: 5px solid var(--second-bg-color);
  }
  #apply{
    width: 100%;
    margin: auto;
  }
  #apply .content{
    display: flex;
    justify-content: center;
  }
  #apply .content .middle{
    width: 1349px;
    padding: 0px 80px;
  }
  #apply .content .middle .mid{
    display: flex;
  }
  #apply .content .middle .mid .note{
    width: 75%;
    padding: 50px;
    background: var(--second-bg-color);
    border-radius: 50px 0 0 0;
  }
  #apply .content .middle .mid .note h3{
    margin-bottom: 15px;
    margin-left: -15px;
  }
  #apply .content .middle .mid .note p{
    margin-left: 10px;
    margin-bottom: 5px;
  }
  #apply .content .middle .mid .note p .span1{
    font-weight: 600;
  }
  #apply .content .middle .mid .note p .span2{
    font-style: italic;
  }
  #apply .content .middle .mid .apply{
    padding: 160px 80px;
    width: 25%;
    border-radius: 0 50px 0 0;
    background: var(--white-sd);
  }
  #apply .content .middle .mid .apply a{
    background: var(--main-color);
    text-decoration: none;
    color: var(--bg-color);
    padding: 10px 20px;
    border-radius: 5px;
    transition: all ease .50s;
    border: 2px solid var(--main-color);
  }
  #apply .content .middle .mid .apply a:hover{
    background: var(--bg-color);
    transform: translateX(5px);
    color: var(--main-color);
  }

  #apply .content .middle .mid .note .down h4{
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: -20px;
  }
  #apply .content .middle .mid .note .down p{
    margin-left: -20px;
    margin-bottom: 5px;
  }


  #mid2{
    width: 100%;
    margin: auto;
  }
  #mid2 .content{
    display: flex;
    justify-content: center;
  }
  #mid2 .content .middle{
    width: 1349px;
    padding: 0px 80px;
  }
  #mid2 .content .middle h3{
    font-size: 25px;
    padding: 20px 10px;
    margin-left: 600px;
  }
  #mid2 .content .middle .mid{
    display: flex;
  }
  #mid2 .content .middle .mid .left{
    padding: 10px 100px 0px 10px;
    margin-top: -70px;
  }
  #mid2 .content .middle .mid .right{
    margin-top: 30px;
  }
  #mid2 .content .middle .mid .left img{
    border: 2px solid var(--white-sd);
    border-radius: 20px;
    width: 500px;
  }



  #mid2-2{
    width: 100%;
    margin: auto;
  }
  #mid2-2 .content{
    display: flex;
    justify-content: center;
  }
  #mid2-2 .content .middle{
    width: 1349px;
    padding: 0px 80px;
  }
  #mid2-2 .content .middle h3{
    font-size: 25px;
    padding: 10px 10px;
    margin-left: 600px;
  }
  #mid2-2 .content .middle .mid{
    display: flex;
  }
  #mid2-2 .content .middle .mid .left{
    padding: 10px 100px 0px 10px;
    margin-top: 60px;
  }
  #mid2-2 .content .middle .mid .right{
    margin-top: 30px;
  }
  #mid2-2 .content .middle .mid .right ul li{
    margin-bottom: 20px;
  }
  #mid2-2 .content .middle .mid .left img{
    border: 2px solid var(--white-sd);
    border-radius: 20px;
    width: 400px;
  }

  #mid2-3{
    width: 100%;
    margin: auto;
  }
  #mid2-3 .content{
    display: flex;
    justify-content: center;
  }
  #mid2-3 .content .middle{
    width: 1349px;
    padding: 0px 80px;
  }
  #mid2-3 .content .middle h3{
    font-size: 25px;
    padding: 20px 0px;
  }
  #mid2-3 .content .middle .mid{
    display: flex;
  }
  #mid2-3 .content .middle .mid .left{
    padding: 10px 100px 0px 10px;
    margin-top: -70px;
    margin-left: 50px;
    margin-right: -40px;
  }
  #mid2-3 .content .middle .mid .right{
    margin-top: 30px;
  }
  #mid2-3 .content .middle .mid .left img{
    border: 2px solid var(--white-sd);
    border-radius: 20px;
    width: 500px;
  }

  #mid3{
    width: 100%;
    margin: auto;
  }
  #mid3 .content{
    display: flex;
    justify-content: center;
  }
  #mid3 .content .middle{
    width: 1349px;
    padding: 20px 80px;
  }
  #mid3 .content .middle h3{
    font-size: 25px;
    padding: 10px 0px;
  }
  #mid3 .content .middle .mid{
    display: flex;
  }
  #mid3 .content .middle .mid .left{
    padding: 0px 100px 0px 10px;
    width: 70%;
  }
  #mid3 .content .middle .mid .left p{
    padding: 10px 0px;
  }
  #mid3 .content .middle .mid .right{
    width: 20%;
    padding: 30px 20px;
    background: var(--white-sd);
    border-radius: 10px;
    margin-top: -20px;
  }
  #mid3 .content .middle .mid .right h4{
    padding: 10px 25px;
    font-weight: 600;
  }
  #mid3 .content .middle .mid .right button{
    padding: 10px 30px;
    margin: 0px 33px;
    background: var(--other);
    border-radius: 5px;
    border: 2px solid var(--main-color);
    text-decoration: none;
    color: var(--main-color);
    transition: all ease .50s;
    cursor: pointer;
    font-weight: 500;
  }
  #mid3 .content .middle .mid .right a{
    padding: 5px 30px;
    margin: 0px 33px;
    background: var(--other);
    border-radius: 5px;
    border: 2px solid var(--main-color);
    text-decoration: none;
    color: var(--main-color);
    transition: all ease .50s;
    cursor: pointer;
    font-weight: 500;
  }
  #mid3 .content .middle .mid .right button:hover{
    background: var(--main-color);
    transform: scale(1.1);
    color: var(--bg-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }
  #mid3 .content .middle .mid .right a:hover{
    background: var(--main-color);
    transform: scale(1.1);
    color: var(--bg-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }

  #mid5{
    width: 100%;
    margin: auto;
  }
  #mid5 .content{
    display: flex;
    justify-content: center;
  }
  #mid5 .content .middle{
    width: 1349px;
    padding: 20px 80px;
  }
  #mid5 .content .middle h3{
    font-size: 25px;
    padding: 10px 0px;
  }
  #mid5 .content .middle ul li{
    margin-bottom: 10px;
  }
  #mid5 .content .middle ul li span{
    font-weight: 600;
    font-size: 18px;
  }


  #mid4{
    width: 100%;
    margin: auto;
  }
  #mid4 .content{
    display: flex;
    justify-content: center;
  }
  #mid4 .content .middle{
    width: 1349px;
    padding: 15px 80px;
    display: flex;
    background: var(--second-bg-color);
    border-radius: 10px;
    margin-bottom: -20px;
  }
  #mid4 .content .middle .left{
    padding: 20px 50px;
    margin-right: 50px;
    margin-left: 100px;
    margin-top: 20px;
  }
  #mid4 .content .middle .left h3{
    font-size: 35px;
  }
  #mid4 .content .middle .right{
    margin-top: 30px;
    margin-left: 100px;
  }
  #mid4 .content .middle .right ul li{
    list-style: none;
    margin-bottom: 30px;
  }
  #mid4 .content .middle .right ul li a{
    text-decoration: none;
    padding: 10px 20px;
    color: var(--text-color);
    transition:  ease-in-out .40s;
  }
  #mid4 .content .middle .right ul li a i{
    margin-right: 10px;
  }
  #mid4 .content .middle .right ul li a:hover{
    background: var(--white-sd);
    border-radius: 3px;
    transform: scale(1.1);
  }
  
  .testimony{
    width: 100%;
    margin: auto;
  }
  .testimony .content{
    display: flex;
    justify-content: center;
  }
  .testimony .content .middle{
    width: 1349px;
    padding: 15px 80px;
  }
  .testimony .content .middle h3{
    font-size: 25px;
    margin: 50px 0px 30px 500px;
  }
  .testimony .content .middle .part{
    display: flex;
    margin-bottom: 50px;
  }
  .testimony .content .middle .part .left{
    width: 80%;
    padding: 40px;
    background: var(--second-bg-color);
    border-radius: 20px;
  }
  .testimony .content .middle .part .left h4{
    font-size: 20px;
    margin-left: 350px;
    margin-bottom: 20px;
  }
  .testimony .content .middle .part .right{
    width: 20%;
    padding: 40px;
    margin-right: -50px;
  }
  .testimony .content .middle .part .right img{
    width: 100px;
    padding: 10px;
    border: 2px solid var(--white-sd);
    border-radius: 50%;
    margin-top: 20px;
    background: var(--second-bg-color);
  }

  footer{
    width: 100%;
    margin: auto;
    background-color: var(--main-color);
  }
  footer .content{
    display: flex;
    justify-content: center;
  }
  footer .content .middle{
    width: 1300px;
    padding: 20px 20px 0 20px;
  }
  footer .content .middle .mid{
    display: flex;
  }
  footer .content .middle .mid .parts{
    border-radius: 10px;
    width: 300px;
    padding: 10px;
    margin: 5px;
    transition: all ease .40s;
  }
  footer .content .middle .mid .parts .logo{
    margin-left: -20px;
    width: 200px;
    height: 100px;
    cursor: pointer;
  }
  footer .content .middle .mid .parts h3{
    margin-bottom: 20px;
    color: var(--other);
  }
  .soc-links a{
    size: 10px;
    color: var(--other);
    text-align: center;
    text-decoration: none;
    margin: 5px;
  }
  footer .content .middle .mid .soc-links i{
    transition:  ease-in-out .40s;
  }
  footer .content .middle .mid .soc-links i:hover{
    background: var(--second-bg-color);
    padding: 10px;
    border-radius: 20%;
    color: var(--other);
    transform: scale(1.1);
  }
  footer .content .middle .mid .parts1{
    width: 18%;
  }
  footer .content .middle .mid .parts ul{
    list-style: none;
  }
  footer .content .middle .mid .parts ul li{
    margin: 10px;
    transition:  ease-in-out .40s;
  }
  footer .content .middle .mid .parts ul li:hover{
    transform: scale(1.1);
  }
  footer .content .middle .mid .parts ul li a{
    text-decoration: none;
    color: var(--other);
    padding: 10px;
  }
  footer .content .middle .mid .parts ul li a:hover{
    background: var(--second-bg-color);
    border-radius: 3px;
    color: var(--other);
  }
  footer .content .middle .mid .parts ul li a i{
    margin-right: 5px;
  }
  footer .content .middle .mid .parts ul li button{
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--white-sd);
    color: var(--text-color);
    font-size: var(--p-font);
    font-weight: 400;
    border: 2px solid var(--main-color);
    transition: all ease .50s;
    text-decoration: none;
    margin-left: 20px;
    margin-top: 20px;
  }
  footer .content .middle .mid .parts ul li button:hover{
    transform: scale(1.1);
    background: transparent;
    border: 2px solid var(--bg-color);
    color: var(--other);
  }
  /* responsive */
    @media screen and (max-width: 1000px) {
      /* Header */
      header{
        width: 100%;
        margin: auto;
      }
      /* Top Nav */
      .nav1{
        height: 80px;
        justify-content: left;
      }
      .nav1 .logo{
        width: 150px;
        height: 50px;
      }
      .nav1 ul .active{
        margin-top: -5px;
      }
      .nav1 ul .active .a{
        margin-left: 350px;
        color: var(--main-color);
        font-weight: 800;
        font-size: 20px;
        cursor: pointer;
      }
      .nav1 .a:hover{
        border-radius: 3px;
        background: var(--white-sd);
        padding: 2.5px 10px;
      }
      .nav1 .menu{
        display: none;
        margin-left: 200px;
      }
      .nav1 ul{
        display: block;
      }
      .nav1 ul li:hover .menu{
        display: block;
        position: absolute;
        background: var(--bg-color);
        box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
        margin-top: 5px;
        border-radius: 10px;
        padding-bottom: 10px;
        width: 200px;
        margin-right: 200px;
        border: 2px solid var(--white-sd);
      }
      .nav ul li:hover .menu ul{
        display: block;
        margin: 0 10px;
      }
      .nav1 ul li:hover .menu ul li{
        padding: 5px 20px;
        border-radius: 3px;
        text-align: left;
      }
      .nav1 ul li:hover .menu ul .all-courses-box{
        margin-left: 15PX;
        box-shadow: 0px 29px 51px 2px var(--white-sd);
      }
      .nav1 ul li:hover .menu ul button{
        margin-left: 65PX;
        box-shadow: 0px 29px 51px 2px var(--white-sd);
      }
      .nav1 ul li:hover .menu .search{
        display: none;
      }
      /* Second Nav */
      .or{
        display: none;
      }
      .category{
        margin-left: 0px;
        height:70px;
        margin-top: 10px;
        justify-content: left;
      }
      .category .hover-me:hover .sub-menu-1{
        display: none;
      }
      .bi-caret-right-fill{
        display: none;
      }
      .active1, .active1 .category{
        display: none;
      }
      .mobile{
        margin-left: 300px;
        margin-top: 5px;
      }
      .nav2 ul li:hover .sub-menu{
        box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
      }
      .mobile .bi-list{
        color: var(--bg-color);
      }
      .mobile .sub-menu .hover-me a{
        color: var(--other);
        font-size: 13px;
      }
      .mobile .hover-me:hover .sub-menu-1 .sec1 ul li{
        border-bottom: 1px dotted var(--other-with-color);
      }
      .mobile .hover-me:hover .sub-menu-1 .sec2 .secd h3{
        color: var(--other-with-color);
        font-size: 14px;
      }
      .mobile .hover-me:hover .sub-menu-1 .sec2 .secd p{
        color: var(--other-with-color);
        font-size: 10px;
      }
      .mobile .hover-me:hover .sub-menu-1 .sec1 ul li a{
        color: var(--other-with-color);
        font-size: 10px;
      }
      .mobile .active .hover-me:hover .sub-menu-1{
        display: block;
        position: absolute;
        margin-left: -570px;
        margin-top: -140px;
        background: var(--white-sd);
      }
      .sub-menu-1{
        width: 550px;
        box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
      }
      .hover-me:hover .sub-menu-1 .sec2{
        padding: 0px;
        margin-left: 0px;
      }
      .hover-me:hover .sub-menu-1 .sec2 .secd{
        margin-bottom: 0px;
      }
      .active .hover-me:hover .sub-menu-1 .sec1{
        width: 200px;
      }
      .nav2 ul li{
        margin: 10px;
        padding: 10px;
      }
      
      /*content */
      /* home */
  #home {
    width: 100%;
    margin: auto;
  }
  
  #home .content{
    height: 100px;
  }
  #home .content .middle{
    width: 750px;
    padding: 20px 80px 0px 80px;
  }
  #home .content .middle .left{
    padding: 10px 0px;
    width: 100%;
  }
  #home .content .middle .left h1{
    font-size: 20px;
  }
  #home .content .middle .left h5{
    font-size: 10px;
  }
  #home .content .middle .right{
    display: none;
  }


  #home2 {
    width: 100%;
    margin: auto;
  }
  
  #home2 .content{
    height: 100px;
  }
  #home2 .content .middle{
    width: 750px;
    padding: 20px 80px 0px 80px;
  }
  #home2 .content .middle .left{
    padding: 10px 0px;
    width: 100%;
    margin-top: 0px;
  }
  #home2 .content .middle .left h1{
    font-size: 20px;
  }
  #home2 .content .middle .left h5{
    font-size: 10px;
  }
  #home2 .content .middle .right{
    display: none;
  }

  #home3 {
    width: 100%;
    margin: auto;
  }
  
  #home3 .content{
    height: 100%;
  }
  #home3 .content .middle{
    width: 750px;
    padding: 20px 80px 0px 80px;
  }
  #home3 .content .middle .left{
    padding: 10px 0px;
    width: 100%;
    margin-top: 0px;
  }
  #home3 .content .middle .left h1{
    font-size: 20px;
  }
  #home3 .content .middle .left h5{
    font-size: 10px;
  }
  #home3 .content .middle .right{
    display: none;
  }

  #home4 {
    width: 100%;
    margin: auto;
  }
  
  #home4 .content{
    height: 100px;
  }
  #home4 .content .middle{
    width: 750px;
    padding: 20px 80px 0px 80px;
  }
  #home4 .content .middle .left{
    padding: 10px 0px;
    width: 100%;
    margin-top: 0px;
  }
  #home4 .content .middle .left h1{
    font-size: 20px;
  }
  #home4 .content .middle .left h5{
    font-size: 10px;
  }
  #home4 .content .middle .right{
    display: none;
  }


  #mid{
    width: 100%;
    margin: auto;
  }
  #mid .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid .content .middle p{
    font-size: 15px;
  }
  #Eligibility .content .middle{
    width: 1000px;
    padding: 10px 20px 0 40px;
  }
  #Eligibility .content .middle h1{
    font-size: 25px;
    margin-top: 20px;
    padding: 20px 0;
    border-bottom: 2px solid var(--second-cl-ligh);
  }
  #Eligibility .content .middle .mid{
    margin-top: 20px;
    display: flex;
    margin-bottom: 50px;
  }
  #Eligibility .content .middle .mid .box{
    width: 50%;
    margin: 0 20px;
  }
  #Eligibility .content .middle .mid .box p{
    font-size: 14px;
  }
  #Eligibility .content .middle .mid .box .midd{
    margin: 20px 0px 20px -30px;
    padding: 10px 0;
    border-bottom: 2px solid var(--text-color);
    border-top: 2px solid var(--text-color);
  }
  #Eligibility .content .middle .mid .box .main .main2{
    margin-left: 50px;
    margin-top: 10px;
  }
  #Eligibility .content .middle .mid .box .main .main2 .main3{
    margin-left: 50px;
    margin-top: 20px;
  }
  #Eligibility .content .middle .mid .box .note{
    padding: 30px;
    background: var(--white-sd);
    border-radius: 10px;
    margin-top: 20px;
  }
  #Eligibility .content .middle .mid .box .note h3{
    font-size: 17px;
    margin-bottom: 10px;
  }
  #Eligibility .content .middle .mid .box .note ul{
    margin-left: 20px;
  }
  #benfits .content .middle{
    width: 1000px;
    padding: 20px 20px;
  }
  #benfits .content .middle .mid{
    display: block;
  }
  #benfits .content .middle .mid .right{
    display: none;
  }
  #apply .content .middle{
    width: 1000px;
    padding: 0px 20px;
  }
  #apply .content .middle .mid .note{
    width: 60%;
  }
  #apply .content .middle .mid .apply{
    width: 40%;
    padding: 180px 80px;
  }
  #mid2 .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid2 .content .middle h3{
    font-size: 20px;
    padding: 10px 0px;
    margin-left: 0px;
  }
  #mid2 .content .middle .mid{
    display: block;
  }
  #mid2 .content .middle .mid .left{
    display: none;
  }
  #mid2 .content .middle .mid .right{
    margin-top: 10px;
  }
  #mid2 .content .middle .mid .left img{
    border: 2px solid var(--white-sd);
    border-radius: 20px;
    width: 500px;
  }

  #mid2-2 .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid2-2 .content .middle h3{
    font-size: 20px;
    padding: 10px 10px;
    margin-left: 0px;
  }
  #mid2-2 .content .middle .mid{
    display: block;
  }
  #mid2-2 .content .middle .mid .left{
    padding: 10px;
    margin-top: 10px;
    display: none;
  }
  #mid2-2 .content .middle .mid .right{
    margin-top: 30px;
  }
  #mid2-2 .content .middle .mid .right ul li{
    margin-bottom: 20px;
  }

  
  #mid2-3 .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid2-3 .content .middle h3{
    font-size: 20px;
    padding: 10px 10px;
  }
  #mid2-3 .content .middle .mid{
    display: block;
  }
  #mid2-3 .content .middle .mid .left{
    display: none;
  }
  #mid2-3 .content .middle .mid .right{
    margin-top: 0px;
  }

  #mid3 .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid3 .content .middle h3{
    font-size: 20px;
    padding: 10px 10px;
  }
  #mid3 .content .middle .mid{
    display: block;
  }
  #mid3 .content .middle .mid .left{
    padding: 0px 100px 0px 10px;
    width: 100%;
  }
  #mid3 .content .middle .mid .left p{
    padding: 10px 0px;
  }
  #mid3 .content .middle .mid .right{
    width: 40%;
    padding: 30px 20px;
    background: var(--white-sd);
    border-radius: 10px;
    margin-top: 20px;
    margin-left: 170px;
  }



  #mid5 .content .middle{
    width: 750px;
    padding: 20px 50px;
  }
  #mid5 .content .middle h3{
    font-size: 20px;
    padding: 10px 10px;
  }
  #mid5 .content .middle ul li{
    margin-bottom: 10px;
  }
  #mid5 .content .middle ul li span{
    font-weight: 600;
    font-size: 15px;
  }
  #mid5 .content .middle ul li p{
    font-size: 14px;
  }

  #mid4 .content .middle{
    width: 740px;
    padding: 10px 50px;
    display: flex;
    background: var(--second-bg-color);
    border-radius: 10px;
    margin-bottom: -20px;
  }
  #mid4 .content .middle .left{
    padding: 20px 50px;
    margin-right: 50px;
    margin-left: 100px;
    margin-top: 20px;
  }
  #mid4 .content .middle .left h3{
    font-size: 35px;
  }
  #mid4 .content .middle .right{
    margin-top: 30px;
    margin-left: 100px;
  }
  #mid4 .content .middle .right ul li{
    list-style: none;
    margin-bottom: 30px;
  }
  #mid4 .content .middle .right ul li a{
    text-decoration: none;
    padding: 10px 20px;
    color: var(--text-color);
    transition:  ease-in-out .40s;
  }
  #mid4 .content .middle .right ul li a i{
    margin-right: 10px;
  }
  #mid4 .content .middle .right ul li a:hover{
    background: var(--white-sd);
    border-radius: 3px;
    transform: scale(1.1);
  }


  .testimony .content .middle{
    width: 750px;
    padding: 10px 50px;
  }
  .testimony .content .middle h3{
    font-size: 20px;
    margin: 0px 0px 30px 260px;
  }
  .testimony .content .middle .part{
    display: flex;
    margin-bottom: 50px;
  }
  .testimony .content .middle .part .left{
    width: 70%;
    padding: 40px;
    background: var(--second-bg-color);
    border-radius: 20px;
  }
  .testimony .content .middle .part .left h4{
    font-size: 18px;
    margin-left: 100px;
    margin-bottom: 20px;
  }
  .testimony .content .middle .part .left p{
    font-size: 15px;
  }
  .testimony .content .middle .part .right{
    width: 20%;
    padding: 40px;
    margin-right: 50px;
  }
  .testimony .content .middle .part .right img{
    width: 100px;
    padding: 10px;
    border: 2px solid var(--white-sd);
    border-radius: 50%;
    margin-top: 100px;
    background: var(--second-bg-color);
  }
      /*footer*/
    
      footer{
        width: 100%;
        height: 100%;
        margin: auto;
        background-color: var(--main-color);
      }
      footer .content{
        display: flex;
        justify-content: center;
      }
      footer .content .middle{
        width: 750px;
        padding: 30px 0 0 30px;
      }
      footer .content .middle .mid{
        display: flex;
      }
      footer .content .middle .mid .parts{
        width: 100%;
        padding: 1px;
      }
      footer .content .middle .mid .parts .logo{
        width: 150px;
        height: 80px;
      }
      footer .content .middle .mid .parts h3{
        font-size: 15px;
      }
      footer .content .middle .mid .parts a{
        font-size: 13px;
      }
      footer .parts{
        border-radius: 10px;
        padding: 0px;
        margin: 0px;
        transition: all ease .40s; 
    }
    }
  
  @media (max-width: 663px) {
    /* Header */
    header{
      width: 100%;
      margin: auto;
    }
    /* Top Nav */
    .nav1{
      height: 80px;
    }
    .nav1 .logo{
      width: 150px;
      height: 50px;
    }
    .nav1 ul .active{
      margin-top: -5px;
    }
    .nav1 ul .active .a{
      margin-left: 150px;
      color: var(--main-color);
      font-weight: 800;
      font-size: 20px;
      cursor: pointer;
    }
    .nav1 .a:hover{
      border-radius: 3px;
      background: var(--white-sd);
      padding: 2.5px 10px;
    }
    .nav1 .menu{
      display: none;
      margin-left: -10px;
    }
    .nav1 ul{
      display: block;
    }
    .nav1 ul li:hover .menu{
      display: block;
      position: absolute;
      background: var(--bg-color);
      box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
      margin-top: 5px;
      border-radius: 10px;
      padding-bottom: 10px;
      width: 200px;
      margin-right: 200px;
      border: 2px solid var(--white-sd);
    }
    .nav ul li:hover .menu ul{
      display: block;
      margin: 0 10px;
    }
    .nav1 ul li:hover .menu ul li{
      padding: 5px 20px;
      border-radius: 3px;
      text-align: left;
    }
    .nav1 ul li:hover .menu ul .all-courses-box{
      margin-left: 15PX;
      box-shadow: 0px 29px 51px 2px var(--white-sd);
    }
    .nav1 ul li:hover .menu ul button{
      margin-left: 65PX;
      box-shadow: 0px 29px 51px 2px var(--white-sd);
    }
    .nav1 ul li:hover .menu .search{
      display: none;
    }
    /* Second Nav */
    .or{
      display: none;
    }
    .category{
      height:70px;
      margin-top: 0px;
      margin-left: -100px;
    }
    .hover-me:hover .sub-menu-1{
      display: none;
    }
    .bi-caret-right-fill{
      display: none;
    }
    .mobile{
      margin-left: -10px;
      margin-top: 5px;
    }
    .nav2 ul li:hover .sub-menu{
      box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
    }
    .mobile .bi-list{
      color: var(--bg-color);
    }
    .mobile .sub-menu .hover-me a{
      color: var(--other);
      font-size: 13px;
    }
    .mobile .hover-me:hover .sub-menu-1 .sec1 ul li{
      border-bottom: 1px dotted var(--other-with-color);
    }
    .mobile .hover-me:hover .sub-menu-1 .sec2 .secd h3{
      color: var(--other-with-color);
      font-size: 14px;
    }
    .mobile .hover-me:hover .sub-menu-1 .sec2 .secd p{
      color: var(--other-with-color);
      font-size: 10px;
    }
    .mobile .hover-me:hover .sub-menu-1 .sec1 ul li a{
      color: var(--other-with-color);
      font-size: 13px;
    }
    .mobile .active .hover-me:hover .sub-menu-1{
      display: block;
      position: absolute;
      margin-left: -570px;
      margin-top: -140px;
      background: var(--white-sd);
    }
    .sub-menu-1{
      width: 550px;
      box-shadow: 0px 29px 51px 2px rgba(0,0,0,0.32);
    }
    .hover-me:hover .sub-menu-1 .sec2{
      padding: 0px;
      margin-left: 0px;
    }
    .hover-me:hover .sub-menu-1 .sec2 .secd{
      margin-bottom: 0px;
    }
    .active .hover-me:hover .sub-menu-1 .sec1{
      width: 200px;
    }
    .nav2 ul li{
      margin: 10px;
      padding: 10px;
    }

    #home {
      width: 100%;
      margin: auto;
    }
    
    #home .content{
      height: 70px;
    }
    #home .content .middle{
      width: 450px;
      padding: 5px 20px 0px 20px;
    }
    #home .content .middle .left{
      padding: 10px 0px;
      width: 100%;
    }
    #home .content .middle .left h1{
      font-size: 15px;
    }
    #home .content .middle .left h5{
      font-size: 9px;
    }
    #home .content .middle .right{
      display: none;
    }
  
  
    #home2 {
      width: 100%;
      margin: auto;
    }
    
    #home2 .content{
      height: 70px;
    }
    #home2 .content .middle{
      width: 450px;
      padding: 5px 20px 0px 20px;
    }
    #home2 .content .middle .left{
      padding: 10px 0px;
      width: 100%;
      margin-top: 0px;
    }
    #home2 .content .middle .left h1{
      font-size: 15px;
    }
    #home2 .content .middle .left h5{
      font-size: 9px;
    }
    #home2 .content .middle .right{
      display: none;
    }
  
    #home3 {
      width: 100%;
      margin: auto;
    }
    
    #home3 .content{
      height: 100%;
    }
    #home3 .content .middle{
      width: 450px;
      padding: 5px 20px 0px 20px;
    }
    #home3 .content .middle .left{
      padding: 10px 0px;
      width: 100%;
      margin-top: 0px;
    }
    #home3 .content .middle .left h1{
      font-size: 18px;
    }
    #home3 .content .middle .left h5{
      font-size: 15px;
    }
    #home3 .content .middle .right{
      display: none;
    }
  
    #home4 {
      width: 100%;
      margin: auto;
    }
    
    #home4 .content{
      height: 90px;
    }
    #home4 .content .middle{
      width: 450px;
      padding: 5px 20px 0px 20px;
    }
    #home4 .content .middle .left{
      padding: 10px 0px;
      width: 100%;
      margin-top: 0px;
    }
    #home4 .content .middle .left h1{
      font-size: 15px;
    }
    #home4 .content .middle .left h5{
      font-size: 9px;
    }
    #home4 .content .middle .right{
      display: none;
    }
  
  
    #mid{
      width: 100%;
      margin: auto;
    }
    #mid .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid .content .middle p{
      font-size: 12px;
    }
    #Eligibility .content .middle{
      width: 663px;
      padding: 10px 20px 0 40px;
      }
      #Eligibility .content .middle h1{
      font-size: 20px;
      margin-top: 20px;
      padding: 10px 0;
      width: 90%;
      border-bottom: 2px solid var(--second-cl-ligh);
      }
      #Eligibility .content .middle .mid{
      margin-top: 20px;
      display: block;
      margin-bottom: 50px;
      }
      #Eligibility .content .middle .mid .box{
      width: 90%;
      margin: 0 20px;
      }
      #Eligibility .content .middle .mid .box p{
      font-size: 14px;
      }
      #Eligibility .content .middle .mid .box .midd{
      margin: 20px 0px 20px -30px;
      padding: 10px 0;
      border-bottom: 2px solid var(--text-color);
      border-top: 2px solid var(--text-color);
      }
      #Eligibility .content .middle .mid .box .main .main2{
      margin-left: 50px;
      margin-top: 10px;
      }
      #Eligibility .content .middle .mid .box .main .main2 .main3{
      margin-left: 50px;
      margin-top: 20px;
      }
      #Eligibility .content .middle .mid .box .note{
      padding: 20px;
      background: var(--white-sd);
      border-radius: 10px;
      margin-top: 20px;
      }
      #Eligibility .content .middle .mid .box .note h3{
      font-size: 15px;
      margin-bottom: 10px;
      }
      #Eligibility .content .middle .mid .box .note ul{
      margin-left: 20px;
      }
      #Eligibility p{
        font-size: 10px;
      }
      #benfits .content .middle{
        width: 450px;
        padding: 20px 20px;
      }
      #benfits .content .middle .mid{
        display: block;
      }
      #benfits .content .middle .mid .right{
        display: none;
      }
      #apply .content .middle{
        width: 450px;
        padding: 0px 20px;
      }
      #apply .content .middle .mid .note{
        width: 80%;
        padding: 30px;
        border-radius: 20px 0 0 0;
      }
      p{
        font-size: 12px;
      }
      #apply .content .middle .mid .note h3{
        font-size: 15px;
      }
      #apply .content .middle .mid .apply{
        width: 50%;
        padding: 250px 15px;
        border-radius: 0 20px 0 0;
      }
      #apply .content .middle .mid .apply a{
        font-size: 15px;
        padding: 5px;
      }
    #mid2 .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid2 .content .middle h3{
      font-size: 15px;
      padding: 0px 0px;
      margin-left: 0px;
    }
    #mid2 .content .middle .mid{
      display: block;
    }
    #mid2 .content .middle .mid .left{
      display: none;
    }
    #mid2 .content .middle .mid .right{
      margin-top: 10px;
    }
    #mid2 .content .middle .mid .right p{
      font-size: 12px;
    }
    #mid2 .content .middle .mid .left img{
      border: 2px solid var(--white-sd);
      border-radius: 20px;
      width: 500px;
    }
  
    #mid2-2 .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid2-2 .content .middle h3{
      font-size: 15px;
      padding: 0px 0px;
      margin-left: 0px;
    }
    #mid2-2 .content .middle .mid{
      display: block;
    }
    #mid2-2 .content .middle .mid .left{
      padding: 10px;
      margin-top: 10px;
      display: none;
    }
    #mid2-2 .content .middle .mid .right{
      margin-top: 0px;
      padding: 20px;
    }
    #mid2-2 .content .middle .mid .right ul li{
      margin-bottom: 20px;
      font-size: 12px;
    }
  
    
    #mid2-3 .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid2-3 .content .middle h3{
      font-size: 15px;
      padding: 0px 0px;
    }
    #mid2-3 .content .middle .mid{
      display: block;
    }
    #mid2-3 .content .middle .mid .left{
      display: none;
    }
    #mid2-3 .content .middle .mid .right{
      margin-top: 10px;
    }
    #mid2-3 .content .middle .mid .right p{
      font-size: 12px;
    }
  
    #mid3 .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid3 .content .middle h3{
      font-size: 15px;
      padding: 0px 20px;
    }
    #mid3 .content .middle .mid{
      display: block;
    }
    #mid3 .content .middle .mid .left{
      padding: 0px 100px 0px 10px;
      width: 100%;
    }
    #mid3 .content .middle .mid .left p{
      padding: 10px 10px;
      font-size: 12px;
    }
    #mid3 .content .middle .mid .right{
      width: 70%;
      padding: 30px 20px;
      background: var(--white-sd);
      border-radius: 10px;
      margin-top: 20px;
      margin-left: 40px;
    }
  
  
  
    #mid5 .content .middle{
      width: 450px;
      padding: 10px 20px;
    }
    #mid5 .content .middle h3{
      font-size: 15px;
      padding: 10px 0px;
    }
    #mid5 .content .middle ul li{
      margin-bottom: 10px;
      margin-left: 10px;
      font-size: 12px;
    }
    #mid5 .content .middle ul li span{
      font-weight: 600;
      font-size: 13px;
    }
    #mid4{
      display: none;
    }
    #mid4 .content .middle{
      width: 740px;
      padding: 10px 50px;
      display: flex;
      background: var(--second-bg-color);
      border-radius: 10px;
      margin-bottom: -20px;
    }
    #mid4 .content .middle .left{
      padding: 20px 50px;
      margin-right: 50px;
      margin-left: 100px;
      margin-top: 20px;
    }
    #mid4 .content .middle .left h3{
      font-size: 35px;
    }
    #mid4 .content .middle .right{
      margin-top: 30px;
      margin-left: 100px;
    }
    #mid4 .content .middle .right ul li{
      list-style: none;
      margin-bottom: 30px;
    }
    #mid4 .content .middle .right ul li a{
      text-decoration: none;
      padding: 10px 20px;
      color: var(--text-color);
      transition:  ease-in-out .40s;
    }
    #mid4 .content .middle .right ul li a i{
      margin-right: 10px;
    }
    #mid4 .content .middle .right ul li a:hover{
      background: var(--white-sd);
      border-radius: 3px;
      transform: scale(1.1);
    }
  
  
    .testimony .content .middle{
      width: 450px;
      padding: 10px 50px;
    }
    .testimony .content .middle h3{
      font-size: 15px;
      margin: 0px 0px 30px 130px;
    }
    .testimony .content .middle .part{
      display: flex;
      margin-bottom: 10px;
    }
    .testimony .content .middle .part .left{
      width: 70%;
      padding: 20px;
      background: var(--second-bg-color);
      border-radius: 20px;
    }
    .testimony .content .middle .part .left h4{
      font-size: 13px;
      margin-left: 20px;
      margin-bottom: 20px;
    }
    .testimony .content .middle .part .left p{
      font-size: 10px;
    }
    .testimony .content .middle .part .right{
      width: 20%;
      padding: 40px;
      margin-right: 50px;
    }
    .testimony .content .middle .part .right img{
      width: 100px;
      padding: 10px;
      border: 2px solid var(--white-sd);
      border-radius: 50%;
      margin-top: 60px;
      margin-left: -25px;
      background: var(--second-bg-color);
    }


  
    /*footer*/
  
    footer{
      width: 100%;
      margin: auto;
      background-color: var(--main-color);
    }
    footer .content{
      display: flex;
      justify-content: center;
    }
    footer .content .middle{
      width: 450px;
      padding: 30px 0 0 30px;
    }
    footer .content .middle .mid{
      display: block;
    }
    footer .content .middle .mid .parts{
      width: 100%;
      padding: 1px;
    }
    footer .content .middle .mid .parts .logo{
      width: 150px;
      height: 80px;
    }
    footer .content .middle .mid .parts h3{
      font-size: 15px;
    }
  }