* {
    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);
    font-family: 'Poppins', sans-serif;
  }
  
  /* Header */
  
  header{
    width: 100%;
    margin: auto;
    background-image: linear-gradient(to right, #0200006b, #02000034), url("image/advanced.png");
    background-size: contain; /* Adjust the background image size to cover the entire container */
    background-position: right; /* Center the background image */
    height: 100%;
    justify-content: center;
    background-size: cover;
  }
  
  /* 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 Certifications Box */
  
    .all-courses-box{
      width: 150px;
      margin-right: 700px;
      height: 40px;
      background: var(--bg-color);
      border-radius: 10px;
    }
  .all-courses-box a{
    display: flex;
    justify-content: center;
    text-decoration: none;
    color: var(--main-color);
  }
  .all-courses-box a .folder{
    margin-top: 9px;
    margin-right: 10px;
    color: var(--main-color);
  }
  .all-courses-box a h3{
    margin-top: 11px;
    font-size: 14px;
    color: var(--main-color);
  }
  /* 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(--bg-color);
  border: 2px solid var(--main-color);
  margin-left: -90px;
  display: inline-block;
  color: var(--main-color);
  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(--bg-color);
  color: var(--bg-color);
  background: var(--main-color);
  }
  
  
  /* Second Navigation Bar */
  
  .nav2{
    text-align: center;
  }
  .nav2 ul{
    display: inline-flex;
    background: #4BCFFF;
    list-style: none;
    color: var(--other);
    border-radius: 10px;
  }
  .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(--main-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: #4BCFFF;
    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;
    background: transparent;
    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);
  }
  .hover-me:hover .sub-menu-1 .sec1 ul li:hover{
    background: var(--second-bg-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 {
    width: 100%;
    height: 500px;
    margin: auto;
  }
  #home .content{
    display: flex;
    justify-content: center;
  }
  #home .content .middle{
    width: 1349px;
    padding: 40px 80px 40px 80px;
    display: flex;
  }
  #home .content .middle .rigth{
    background: #ffffff6c;
    padding: 50px;
    border-radius: 20px;
    border: 2px solid #ffffff2f;
  }
  #home .content .middle .rigth h2{
    color: var(--bg-color);
    padding: 0 0 25px 0;
    font-weight: 800;
    font-size: 35.7px;
  }
  #home .content .middle .rigth p{
    padding: 0 0 20px 0;
    color: var(--bg-color);
    font-size: 15px;
  }
  #home .content .middle .rigth ul{
    list-style: none;
    margin-left: 20px;
    padding-bottom: 10px;
  }
  #home .content .middle .rigth ul li{
    padding: 0 0 15px 0;
  }
  #home .content .middle .rigth .btn{
    display: flex;
  }
  #home .content .middle .rigth .btn a{
    padding: 15px;
    background: var(--other);
    border-radius: 5px;
    margin: 0 10px 0 10px;
    border: 2px solid var(--main-color);
    text-decoration: none;
    color: var(--main-color);
    transition: all ease .50s;
  }
  #home .content .middle .rigth .btn a:hover{
    background: var(--main-color);
    transform: scale(1.1);
    color: var(--other);
    border: 2px solid var(--bg-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }
  #home .content .middle .left{
    width: 50%;
  }

  #midtit{
    width: 100%;
    margin: auto;
    background: var(--bg-color);
  }
  #midtit .content{
    display: flex;
    justify-content: center;
  }
  #midtit .content .middle{
    width: 1300px;
    padding: 20px 20px;
  }
  #midtit .content .middle .mid{
    display: flex;
    margin-top: -50px;
  }
  #midtit .content .middle .mid .card{
    width: 30%;
    background: var(--bg-color);
    border: solid 2px var(--main-color);
    border-radius: 10px;
    padding: 30px 30px;
    margin: 0 20px;
    cursor: pointer;
    box-shadow: 0px 0px 50px -25px var(--main-color);
    transition: all ease .50s;
  }
  #midtit .content .middle .mid .card:hover{
    background: var(--main-color);
    transform: scale(1.1);
    color: var(--other);
    border: 2px solid var(--bg-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }
  #hpcont{
    width: 100%;
    margin: auto;
    background: var(--bg-color);
  }
  #hpcont .content{
    display: flex;
    justify-content: center;
  }
  #hpcont .content .middle{
    width: 1300px;
    padding: 20px 20px;
  }
  #hpcont .content .middle h2{
    text-align: center;
    font-size: 30px;
    margin-top: 30px;
    margin-bottom: 30px;
  }
  #hpcont .content .middle .mid{
    display: flex;
    margin-bottom: 50px;
  }
  #hpcont .content .middle .mid .left{
    padding: 40px 200px;
    border-radius: 50%;
  }
  #hpcont .content .middle .mid .left img{
    height: 600px;
    border-radius: 10px;
    margin-left: -100px;
  }
  #hpcont .content .middle .mid .right .con p{
    font-size: 15px;
    margin-bottom: 15px;
  } 
  #hpcont .content .middle .mid .right .con ol{
    margin-left: 15px;
  }
  #hpcont .content .middle .mid .right .con ol li{
    margin-bottom: 15px;
    font-size: 15px;
  }
  #hpcont .content .middle .mid span{
    font-weight: 600;
  }
  #hpcont .content .middle .mid .right .con a{
    margin: 20px 0;
    padding: 10px 30px;
    font-weight: 500;
    background: var(--main-color);
    border: 2px solid var(--main-color);
    display: inline-block;
    color: var(--other);
    font-size: 18px;
    transition: all ease .50s;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
  }
  #hpcont .content .middle .mid .right .con a:hover{
    transform: translateX(5px);
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color);
  }
  #benefits{
    width: 100%;
    margin: auto;
    background: var(--bg-color);
  }
  #benefits .content{
    display: flex;
    justify-content: center;
  }
  #benefits .content .middle{
    width: 1000px;
    padding: 20px 20px;
  }
  #benefits .content .middle .mid h2{
    text-align: center;
    font-size: 30px;
    margin-top: 10px;
    margin-bottom: 30px;
    color: var(--main-color);
  }
  #benefits .content .middle .mid .conte{
    display: flex;
  }
  #benefits .content .middle .mid .conte .icons{
    margin-right: 100px;
  }
  #benefits .content .middle .mid .conte .icons img{
    height: 150px;
    margin-bottom: 50px;
  }
  #benefits .content .middle .mid .conte .cont{
    width: 70%;
  }
#calltoaction{
    width: 100%;
    margin: auto;
    background: var(--bg-color);
}
#calltoaction .content{
    display: flex;
    justify-content: center;
    margin-top: -90px;
}
#calltoaction .content .middle{
    width: 1300px;
    padding: 20px 20px;
}
#calltoaction .content .middle .mid .first{
    display: flex;
    justify-content: right;
}
#calltoaction .content .middle .mid .first .imge{
    padding: 150px 100px;
    background: var(--main-color);
    border-radius: 50%;
}
#calltoaction .content .middle .mid .first .imge img{
    height: 300px;
}
#calltoaction .content .middle .mid h1{
    margin-bottom: 50px;
    margin-top: 10px;
    width: 500px;
    font-size: 30px;
    text-align: center;
}
#calltoaction .content .middle .mid .mddd{
    display: flex;
    justify-content: center;
}
#calltoaction .content .middle .mid .mdd{
    display: flex;
    justify-content: center;
}
#calltoaction .content .middle .mid .middd{
    width: 1000px;
}
#calltoaction .content .middle .mid .middd p{
    margin-top: 20px;
}
#calltoaction .content .middle .mid .middd span{
    font-weight: 600;
}
#calltoaction .content .middle .mid .middd h2{
    margin-top: 20px;
    margin-bottom: -10px;
}
#calltoaction .content .middle .mid .middd .list{
    display: flex;
}
#calltoaction .content .middle .mid .middd .list i{
    margin-right: 10px;
    color: var(--main-color);
}
#calltoaction .content .middle .mid .call-to-action{
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
#calltoaction .content .middle .mid .call-to-action a{
    padding: 10px 30px;
    font-weight: 500;
    background: var(--main-color);
    border: 2px solid var(--main-color);
    display: inline-block;
    color: var(--other);
    font-size: 18px;
    transition: all ease .50s;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
#calltoaction .content .middle .mid .call-to-action a:hover{
    transform: translateX(5px);
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-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);
  }
  @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(--bg-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%;
        height: 100%;
        margin: auto;
      }
      #home .content{
        display: flex;
        justify-content: center;
      }
      #home .content .middle{
        width: 1000px;
        padding: 20px 40px 80px 40px;
        display: flex;
      }
      #home .content .middle .rigth{
        padding: 50px;
        border-radius: 20px;
        border: 2px solid #ffffff2f;
      }
      #home .content .middle .rigth h2{
        color: var(--bg-color);
        padding: 0 0 20px 0;
        font-weight: 800;
        font-size: 25px;
      }
      #home .content .middle .rigth p{
        padding: 0 0 20px 0;
        color: var(--bg-color);
        font-size: 14px;
      }
      #home .content .middle .left{
        width: 0%;
      }
      #midtit .content .middle{
        width: 750px;
        padding: 30px 30px;
      }
      #midtit .content .middle .mid{
        display: flex;
        margin-top: -50px;
      }
      #midtit .content .middle .mid .card{
        width: 30%;
        background: var(--bg-color);
        border: solid 2px var(--main-color);
        border-radius: 10px;
        padding: 30px 30px;
        margin: 0 20px;
        cursor: pointer;
        box-shadow: 0px 0px 50px -25px var(--main-color);
        transition: all ease .50s;
      }
      #midtit .content .middle .mid .card:hover{
        background: var(--main-color);
        transform: scale(1.1);
        color: var(--other);
        border: 2px solid var(--bg-color);
        box-shadow: 0px 0px 50px -25px var(--main-color);
      }
      #midtit .content .middle .mid .card h3{
        font-size: 15px;
      }
      #midtit .content .middle .mid .card p{
        font-size: 12px;
      }
      #hpcont .content .middle{
        width: 750px;
        padding: 20px 20px;
      }
      #hpcont .content .middle h2{
        text-align: center;
        font-size: 20px;
        margin-top: 10px;
        margin-bottom: 0px;
      }
      #hpcont .content .middle .mid{
        display: block;
        margin-bottom: 50px;
      }
      #hpcont .content .middle .mid .left{
        padding: 40px 200px;
        border-radius: 50%;
      }
      #hpcont .content .middle .mid .left img{
        height: 600px;
        display: none;
        border-radius: 10px;
        margin-left: -100px;
      }
      #hpcont .content .middle .mid .right .con{
        margin-left: 10px;
        margin-top: -20px;
      }
      #hpcont .content .middle .mid .right .con p{
        font-size: 15px;
        margin-bottom: 15px;
      } 
      #hpcont .content .middle .mid .right .con ol{
        margin-left: 15px;
      }
      #hpcont .content .middle .mid .right .con ol li{
        margin-bottom: 15px;
        font-size: 15px;
      }
      #hpcont .content .middle .mid span{
        font-weight: 600;
      }
      #hpcont .content .middle .mid .right .con a{
        margin: 20px 0;
        padding: 10px 30px;
        font-weight: 500;
        background: var(--main-color);
        border: 2px solid var(--main-color);
        display: inline-block;
        color: var(--other);
        font-size: 18px;
        transition: all ease .50s;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
      }
      #hpcont .content .middle .mid .right .con a:hover{
        transform: translateX(5px);
        background: transparent;
        border: 2px solid var(--main-color);
        color: var(--main-color);
      }
      #benefits .content .middle{
        width: 750px;
        padding: 20px 20px;
      }
      #benefits .content .middle .mid h2{
        text-align: center;
        font-size: 20px;
        margin-top: -30px;
        margin-bottom: 30px;
        color: var(--main-color);
      }
      #benefits .content .middle .mid .conte{
        display: flex;
      }
      #benefits .content .middle .mid .conte .icons{
        margin-right: 10px;
      }
      #benefits .content .middle .mid .conte .icons img{
        height: 150px;
        margin-bottom: 50px;
      }
      #benefits .content .middle .mid .conte .cont{
        width: 70%;
        margin-bottom: 20px;
      }
    #calltoaction .content{
        margin-top: 0px;
    }
    #calltoaction .content .middle{
        width: 750px;
        padding: 20px 20px;
    }
    #calltoaction .content .middle .mid .first .imge{
        padding: 150px 100px;
        background: var(--main-color);
        border-radius: 50%;
    }
    #calltoaction .content .middle .mid .first .imge img{
        height: 300px;
    }
    #calltoaction .content .middle .mid h1{
        margin-bottom: 0px;
        margin-top: -10px;
        width: 500px;
        font-size: 20px;
        text-align: center;
    }
    #calltoaction .content .middle .mid .mddd{
        display: flex;
        justify-content: center;
    }
    #calltoaction .content .middle .mid .mdd{
        display: flex;
        justify-content: center;
    }
    #calltoaction .content .middle .mid .middd{
        width: 100%;
    }
    #calltoaction .content .middle .mid .middd p{
        margin-top: 20px;
        font-size: 12px;
    }
    #calltoaction .content .middle .mid .middd span{
        font-weight: 600;
    }
    #calltoaction .content .middle .mid .middd h2{
        margin-top: 20px;
        margin-bottom: -10px;
        font-size: 15px;
    }
    #calltoaction .content .middle .mid .middd .list{
        display: flex;
    }
    #calltoaction .content .middle .mid .middd .list i{
        margin-right: 10px;
        color: var(--main-color);
    }
    #calltoaction .content .middle .mid .call-to-action{
        display: flex;
        justify-content: center;
        margin: 20px 0;
    }
    #calltoaction .content .middle .mid .call-to-action a{
        padding: 10px 30px;
        font-weight: 500;
        background: var(--main-color);
        border: 2px solid var(--main-color);
        display: inline-block;
        color: var(--other);
        font-size: 18px;
        transition: all ease .50s;
        border-radius: 5px;
        cursor: pointer;
        text-decoration: none;
    }
    #calltoaction .content .middle .mid .call-to-action a:hover{
        transform: translateX(5px);
        background: transparent;
        border: 2px solid var(--main-color);
        color: var(--main-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;
    background: #44ccfdb0;
  }
  .nav1 .logo{
    width: 150px;
    height: 50px;
  }
  .nav1 ul .active{
    margin-top: -5px;
  }
  .nav1 ul .active .a{
    margin-left: 150px;
    color: var(--bg-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(--main-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;
  }
  .nav2 ul{
    display: inline-flex;
    background: transparent;
    list-style: none;
    color: var(--other);
    border-radius: 10px;
  }
  #home .content .middle{
    width: 663px;
    padding: 10px 20px 40px 20px;
    display: flex;
  }
  #home .content .middle .rigth{
    padding: 30px;
    border-radius: 20px;
    border: 2px solid #ffffff2f;
  }
  #home .content .middle .rigth h2{
    color: var(--bg-color);
    padding: 0 0 20px 0;
    font-weight: 800;
    font-size: 20px;
  }
  #home .content .middle .rigth p{
    padding: 0 0 20px 0;
    color: var(--bg-color);
    font-size: 10px;
  }
  #home .content .middle .rigth span{
    font-size: 12px;
    color: var(--main-color);
  }
  #home .content .middle .left{
    width: 0%;
  }
  #home .content .middle .rigth .btn a{
    padding: 10px;
    background: var(--other);
    border-radius: 5px;
    margin: 0 10px 0 10px;
    border: 2px solid var(--main-color);
    text-decoration: none;
    color: var(--main-color);
    transition: all ease .50s;
    font-size: 12px;
  }

  #midtit .content .middle{
    width: 663px;
    padding: 30px 30px;
  }
  #midtit .content .middle .mid{
    display: block;
    margin-top: 0px;
  }
  #midtit .content .middle .mid .card{
    width: 100%;
    background: var(--bg-color);
    border: solid 2px var(--main-color);
    border-radius: 10px;
    padding: 30px 30px;
    margin: 10px 20px;
    cursor: pointer;
    box-shadow: 0px 0px 50px -25px var(--main-color);
    transition: all ease .50s;
  }
  #midtit .content .middle .mid .card:hover{
    background: var(--main-color);
    transform: scale(1.1);
    color: var(--other);
    border: 2px solid var(--bg-color);
    box-shadow: 0px 0px 50px -25px var(--main-color);
  }
  #midtit .content .middle .mid .card h3{
    font-size: 15px;
  }
  #midtit .content .middle .mid .card p{
    font-size: 12px;
  }
  #hpcont .content .middle{
    width: 663px;
    padding: 30px 30px;
  }
  #hpcont .content .middle h2{
    text-align: center;
    font-size: 20px;
    margin-top: 10px;
    margin-bottom: 0px;
  }
  #hpcont .content .middle .mid{
    display: block;
    margin-bottom: 50px;
  }
  #hpcont .content .middle .mid .left{
    padding: 40px 200px;
    border-radius: 50%;
  }
  #hpcont .content .middle .mid .left img{
    height: 600px;
    display: none;
    border-radius: 10px;
    margin-left: -100px;
  }
  #hpcont .content .middle .mid .right{
    width: 100%;
  }
  #hpcont .content .middle .mid .right .con{
    margin-left: 50px;
    margin-top: -20px;
  }
  #hpcont .content .middle .mid .right .con p{
    font-size: 12px;
    margin-bottom: 15px;
  } 
  #hpcont .content .middle .mid .right .con ol{
    margin-left: 15px;
  }
  #hpcont .content .middle .mid .right .con ol li{
    margin-bottom: 15px;
    font-size: 12px;
  }
  #hpcont .content .middle .mid span{
    font-weight: 600;
  }
  #hpcont .content .middle .mid .right .con a{
    margin: 20px 0;
    padding: 10px 30px;
    font-weight: 500;
    background: var(--main-color);
    border: 2px solid var(--main-color);
    display: inline-block;
    color: var(--other);
    font-size: 15px;
    transition: all ease .50s;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
  }
  #hpcont .content .middle .mid .right .con a:hover{
    transform: translateX(5px);
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color);
  }
  #benefits .content .middle{
    width: 663px;
    padding: 30px 30px;
  }
  #benefits .content .middle .mid h2{
    text-align: center;
    font-size: 20px;
    margin-top: -30px;
    margin-bottom: 30px;
    color: var(--main-color);
  }
  #benefits .content .middle .mid .conte{
    display: flex;
  }
  #benefits .content .middle .mid .conte .icons{
    margin-right: 10px;
  }
  #benefits .content .middle .mid .conte .icons img{
    height: 150px;
    margin-bottom: 50px;
  }
  #benefits .content .middle .mid .conte .cont{
    width: 70%;
    margin-bottom: 20px;
    font-size: 12px;
  }
#calltoaction .content{
    margin-top: 0px;
}
#calltoaction .content .middle{
    width: 663px;
    padding: 20px 20px;
}
#calltoaction .content .middle .mid .first .imge{
    padding: 150px 100px;
    background: var(--main-color);
    border-radius: 50%;
}
#calltoaction .content .middle .mid .first .imge img{
    height: 300px;
}
#calltoaction .content .middle .mid h1{
    margin-bottom: 0px;
    margin-top: -10px;
    width: 100%;
    font-size: 20px;
    text-align: center;
}
#calltoaction .content .middle .mid .mddd{
    display: flex;
    justify-content: center;
}
#calltoaction .content .middle .mid .mdd{
    display: flex;
    justify-content: center;
}
#calltoaction .content .middle .mid .middd{
    width: 100%;
}
#calltoaction .content .middle .mid .middd p{
    margin-top: 20px;
    font-size: 12px;
}
#calltoaction .content .middle .mid .middd span{
    font-weight: 600;
}
#calltoaction .content .middle .mid .middd h2{
    margin-top: 20px;
    margin-bottom: -10px;
    font-size: 15px;
}
#calltoaction .content .middle .mid .middd .list{
    display: flex;
}
#calltoaction .content .middle .mid .middd .list i{
    margin-right: 10px;
    color: var(--main-color);
}
#calltoaction .content .middle .mid .call-to-action{
    display: flex;
    justify-content: center;
    margin: 20px 0;
}
#calltoaction .content .middle .mid .call-to-action a{
    padding: 10px 30px;
    font-weight: 500;
    background: var(--main-color);
    border: 2px solid var(--main-color);
    display: inline-block;
    color: var(--other);
    font-size: 15px;
    transition: all ease .50s;
    border-radius: 5px;
    cursor: pointer;
    text-decoration: none;
}
#calltoaction .content .middle .mid .call-to-action a:hover{
    transform: translateX(5px);
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-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;
  }
}