h1{
  font-size: xx-large;
}
/* Reset some basic elements */
body,
h1,
h2,
h3,
p,
ul,
li,
a {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  color: inherit;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 0;
  margin: 0;
}

header {
  background: #00aeff;
  color: #fff;
  padding: 10px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 8px 8px 0 0;
}

nav {
  display: flex;
  align-items: center;
  position: relative;
}

nav .logo {
  font-size: 1.5em;
  font-weight: bold;
}

nav ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

nav ul li {
  margin: 0 15px;
}

nav ul li a {
  color: #fff;
  font-weight: bold;
}

.menu-icon {
  display: none;
  cursor: pointer;
  font-size: 1.5em;
}

/* Hero and About Us Section */
#hero-about {
  display: flex;
  flex-wrap: wrap;
  overflow: hidden; /* Ensure children are clipped if they overflow */
}

#hero {
  flex: 0 0 70%;
  max-width: 70%;
  background: url("../Images/banner.jpg") no-repeat center center/cover;
  color: #fff;
  text-align: center;
  padding: 250px 0px;
  position: relative;
  z-index: 1;
  border-radius: 0 0 0 5%;
}
#hero h1{
  font-size: x-large;
  position: absolute;
  right: 0;
  width: 33%;
  padding: 2%;
  background-color: #00aeff;
  border-radius: 20px 0 0 20px;
}
.fade-text {
  transition: opacity 1s;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}
#about {
  flex: 0 0 30%;
  max-width: 28%;
  background: #00354e;
  padding: 50px 1%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
  color: #fff;
  border-radius: 0 0 5% 0;
}
#about h1 {
  text-align: center;
  font-size: xx-large;
  word-spacing: 7px;
}

.cta-button {
  background: #ff6347;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  font-weight: bold;
}

.cta-button:hover {
  background: #e55347;
}

#courses,
#benefits,
#testimonials,
#cta {
  padding: 50px 20px;
  opacity: 0;
  transition: opacity 1s ease-out;
}
#cta hr{
  width: 95%;
}
.emailbtn{
  border-radius: 5px;
  background-color: #fff;
  font-weight: bold;
  padding: 5px;
}
#courses h1{
  text-shadow: 1px 1px 3px;
  font-weight: bolder;
  margin: 0%;
  padding: 0% 1%;
  text-align: right;
  box-shadow: 1px 0px 2px #999;
  border-radius: 15px 10px 0 0;
}
.contactDetails{
  font-size: large;
}
.whatsapp{
  background-color: green;
  border-radius: 5px;
  padding: 0px 7px;
}
.whatsapSmall{
  color: green; 
}
.wtkm{
  margin-top: 2%;
  text-align: center;
  width: fit-content;
  word-spacing: 3px;
  box-shadow: 0px 1px 0px #999;
}
.wtkm h2{
  border: 1px solid red;
  border-radius: 7px;
  color: red;
}
#articles {
  padding: 50px 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 1s ease-out;
  /* background: url("../Images/it.png") no-repeat center center;
  background-size: 60%; */
}
#articles h1{
  text-shadow: 1px 1px 3px;
  font-weight: bolder;
  margin-bottom: 3%;
  box-shadow: 1px 1px 1px #999;
  border-radius: 10px;
  text-align: right;
  padding: 0% 1%;
}

.course-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.course {
  flex: 1;
  min-width: 250px;
  margin: 20px 5px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f9f9f9;
  text-align: left;
}
.course summary{
  color: rgb(255, 0, 0);
  font-weight: 600;
}
.course ul li{
  list-style-type: disc;
}
.course h3{
  list-style-type: disc;
  margin: 1.5% 0;
}
.courseKeyPoints li{
  list-style-type: disc;
}
.articles-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.article-item {
  flex: 1;
  min-width: 250px;
  margin: 20px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
  background: #f9f9f9;
  text-align: left;
}

.article-item img {
  max-width: 100%;
  border-radius: 5px;
}

.article-item h3 a {
  color: #333;
  text-decoration: none;
}

.article-item h3 a:hover {
  text-decoration: underline;
}

#benefits .benefit,
#testimonials .testimonial {
  margin: 20px 0;
}
.benefitsGrid{
  display: flex;
  flex-wrap: wrap;
}
.benefit{
  flex: 1 1 calc(50%);
  font-size: large;
}

#testimonials {
  background: #f4f4f4;
}

#cta {
  background: #00354e;
  color: #fff;
  display: flex;
}
#cta article{
  width: 50%;
}

footer {
  background: #00aeff;
  color: #fff;
  text-align: center;
  padding: 10px 0;
  border-radius: 0 0 10px 10px;
}

/* Fade effect */
.fade:before {
  content: "";
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15%;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
  pointer-events: none;
  z-index: 2;
}

.fade-removed:before {
  display: none;
}
.grid-container {
  display: flex;
  flex-wrap: wrap;
}

.grid-item {
  box-shadow: 1px 1px 5px #999;
  background-color: #fff;
  margin: 0.5%;
  padding: 0.2%;
  border-radius: 10px;
  flex: 0 0 31.9%;
}
.grid-item a>h5{
    color: #ededed;
    background-color: #00354e;
    margin: 0px;
    border-radius: 1px 1px 8px 8px;
}
.grid-item a>h5:hover{
  background-color: #515151;
  color: #fff;
}

.blogPost {
  border-radius: 10px;
  width: 95%;
}
/* .categoryArea{
  color: #fff;
} */

.catBrief{
  background-color: #00354e;
  border-radius: 10px 0 0 0;
  color: #fff;
  display: flex;
}
.catBrief figure{
  width: 100%;
  text-align: left;
  font-size: x-large;
  text-align: center;
}
.catBrief figure>img{
  width: 100%;
}
.catContent{
  margin-top: 1%;
  font-size: large;
}
#mainSep{
  width: 60%;
  border-color: #fff;
  box-shadow: 0px 0px 6px #999;
}
.popularSkills{
  display: flex;
  flex-wrap: wrap;
  box-shadow: 0px 0px 10px #999;
  border-radius: 0 0 10px 10px;
  width: 99.9%;
}
.popularSkills figure{
  width: 35%;
  margin: 0px;
  padding: 1%;
}
.popularSkills figure>img{
  width: 90%;
  margin: 0 5%;
  border-radius: 20px;
}
.popularSkills figcaption{
  font-size: xx-large;
  text-align: center;
}
.popularSkills article{
  width: 60%;
  margin: 1%;
  font-size: large;
}
.fade-content {
  transition: opacity 1s;
  opacity: 1;
}

.fade-out {
  opacity: 0;
}
.notFOund{
  margin-top: 4%;
  font-size: 300%;
  text-align: center;
  color: #00aeff;
}
.notFOund h1{
  font-size: 200%;
}
/* Responsive Styles */
/* Tablets (Landscape) */
@media (max-width: 1024px) {
  .menu-icon {
    display: block;
  }

  nav ul {
    position: fixed;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    background: #333;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
  }

  nav ul.show {
    left: 0;
  }

  nav ul li {
    margin: 15px 0;
  }

  nav ul li a {
    font-size: 1.5em;
  }

  #hero-about {
    flex-direction: row;
  }

  #hero {
    flex: 0 0 70%;
    max-width: 70%;
    padding: 70px 0px;
  }

  #about {
    flex: 0 0 30%;
    max-width: 28%;
    padding: 30px 1%;
  }

  #courses,
  #benefits,
  #articles,
  #testimonials,
  #cta {
    padding: 30px 20px;
  }
  .benefit fieldset{
    width: 30%;
  }
}

/* Tablets (Portrait) and smaller devices */
@media (max-width: 768px) {
  .menu-icon {
    display: block;
  }

  nav ul {
    position: fixed;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    background: #333;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
  }

  nav ul.show {
    left: 0;
  }

  nav ul li {
    margin: 15px 0;
  }

  nav ul li a {
    font-size: 1.5em;
  }

  #hero-about {
    flex-direction: column;
  }

  #hero {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 70px 20px;
  }

  #about {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 30px 20px;
  }

  .cta-button {
    display: inline-block;
    margin-top: 20px;
  }

  #courses,
  #benefits,
  #articles,
  #testimonials,
  #cta {
    padding: 30px 20px;
  }
  .benefit fieldset{
    width: 70%;
  }
}

/* Mobile Devices (Landscape) */
@media (max-width: 480px) {
  header{
    background: #00aeff;
  }
  .menu-icon {
    display: block;
  }

  nav ul {
    position: fixed;
    top: 0;
    left: -100%;
    width: 90%;
    height: 100%;
    background: #333;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: left 0.3s ease-in-out;
    z-index: 1000;
  }

  nav ul.show {
    left: 0;
  }

  nav ul li {
    margin: 5px 0;
  }

  nav ul li a {
    font-size: 1.5em;
  }

  #hero-about {
    flex-direction: column;
  }

  #hero {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 50px 20px;
  }
  #hero h1{
    font-size: 55%;
    border-radius: 15px 0 0 0;
  }

  #about {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 5px 20px;
    border-radius: 0 0 5% 0;
    border-radius: 0 0 7% 7%;
  }
  #about h1 {
    font-size:large;
  }
  #about h2,p{
    font-size: small;
  }
  .cta-button {
    width: 100%;
    padding: 15px 0;
  }
  #articles h1{
    font-size: large;
  }
  .grid-item {
    margin: 0.5%;
    padding: 0.2%;
    flex: 0 0 100%;
  }
  .grid-item h3{
    font-size: large;
  }
  .grid-item p{
    font-size: small;
    text-align: justify;
    padding: 1% 2.5%;
  }
  .grid-item a>h5{
      color: #ededed;
      background-color: #222;
      margin: 0px;
      border-radius: 1px 1px 8px 8px;
  }
  #courses,
  #benefits,
  #articles,
  #testimonials,
  #cta {
    padding: 30px 20px;
  }
  .benefitsGrid{
    display: inline-block
  }
  .benefit fieldset{
    width: 90%;
  }
  #itCourses, #mCourses{
    font-size: large;
  }
  .catBrief{
    display: block;
  }
  .catBrief figure{
    width: 90%;
    margin: 0% 5%;
  }
  .catBrief figcaption{
    font-size: small;
    text-decoration: underline;
    margin: 0px;
    font-weight: bolder;
  }
  .catContent p{
    text-align: justify;
    padding: 1% 2.5%;
  } 
  .popularSkills figure{
    width: 100%;
    margin: 0px;
  }
  .popularSkills figure>img{
    width: 90%;
    margin: 0 5%;
    border-radius: 20px;
  } 
  .popularSkills figcaption{
    font-size: large;
    text-align: center;
  }
  .popularSkills article{
    width: 100%;
    padding: 1% 2.5%;
    text-align: justify;
    font-size: large;
  }
  .courseKeyPoints li{
    margin: 1% 3%;
    font-size: medium;
  }
  #dynamic-article strong{
    font-size: medium;
    text-align: l;
  }
}

/* Mobile Devices (Portrait) */
@media (max-width: 320px) {

}