body {
  font-family: "Inter", sans-serif;
}
.row {
  display: flex;
  gap: 24px;
  flex-flow: row wrap;
}
html {
  scroll-behavior: smooth;
}

.container {
  word-wrap: break-word;
}
a {
  text-decoration: none;
  font-size: 17px;
}
a:hover {
  color: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

:root {
  --primary-color: #ffaa33;
  --secondary-color: #1c1e6d;
  --white-color: #ffffff;
  --black-color: #000000;
  --light-Bg: #f6f6f6;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
img {
  width: 100%;
}
.Container {
  max-width: 1600px;
  margin: auto;
  width: 90%;
}
.Primary-Btn {
  background-color: var(--primary-color);
  padding: 15px 25px;
  border: none;
  border-radius: 50px;
  display: flex;
  align-items: center;
  gap: 17px;
  transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  font-weight: 500;
  font-size: 16px;
  &:hover {
    background-color: var(--secondary-color);
    color: var(--white-color);
  }
}
.SectionTtle {
  h2 {
    font-size: 45px;
    color: var(--black-color);
    font-weight: 500;
    span {
      color: var(--primary-color);
      display: block;
    }
  }
}
.SubTitle {
  h3 {
    font-size: 20px;
    font-weight: 400;
    color: var(--black-color);
  }
}
.TopMargin {
  margin-top: 100px;
}
.Paddingbg {
  padding: 100px 0;
}
h1 {
  font-size: 57px;
  font-weight: 600;
}
h3 {
  font-size: 20px;
  font-weight: 500;
}
.row {
  display: flex;
  align-items: center;
}
p {
  font-size: 17px;
  opacity: 0.6;
  font-weight: 300;
  line-height: 23px;
}
.ButtonVeiwMore {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  margin-top: 35px;
  color: var(--black-color);
  opacity: 0.5;
  &:hover {
    color: var(--primary-color);
    opacity: 1;
    transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
  }
}
/* SERVICEGRID */
.ServiceGrid {
  margin-top: 70px;
  display: flex;
  align-items: center;
  gap: 30px;
  flex-flow: row wrap;
  .Card {
    width: calc(33.33% - 20px);
    background-color: var(--white-color);
    padding: 53px 60px;
    border-radius: 16px 16px 65px 16px;
    .Icon {
      margin-bottom: 35px;
      i {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--secondary-color);
        color: var(--white-color);
        font-size: 37px;
      }
    }
    p {
      margin: 18px 0;
      font-size: 17px;
    }
    a {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 15px;
      margin-top: 30px;
    }
    &:hover {
      transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
      background-color: var(--secondary-color);
      .Icon {
        i {
          background-color: var(--primary-color);
          color: var(--black-color);
        }
      }
      h3,
      p,
      a {
        color: var(--white-color);
      }
      a {
        &:hover {
          color: var(--primary-color);
        }
      }
    }
  }
}
/* COURSE CARD */
.CourseCard {
  background-color: var(--white-color);
  padding: 30px;
  border-radius: 16px 16px 65px 16px;
  border: 1px solid var(--secondary-color);
  position: relative;
  transition: all 0.3s ease-in-out;
  &::after {
    content: "";
    background-color: var(--secondary-color);
    border-radius: 16px 16px 65px 16px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: top 0.3s ease-in-out, left 0.3s ease-in-out;
  }
  &:hover::after {
    top: 10px;
    left: 10px;
  }
  .CourseImage {
    aspect-ratio: 440/299;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    img {
      width: 100%;
      height: 100%;
      object-fit: contain;
    }
    span {
      background-color: var(--primary-color);
      padding: 8px 17px;
      border-radius: 50px;
      width: 140px;
      position: absolute;
      top: 50px;
      left: 50px;
      text-align: center;
      font-size: 16px;
    }
  }
  .Cnt {
    margin-top: 22px;
    h3 {
      font-size: 27px;
      max-width: 400px;
    }
    .Flex {
      display: flex;
      align-items: center;
      justify-content: space-between;
      align-items: center;
      margin-top: 16px;
      .Primary-Btn {
        font-size: 14px;
        padding: 10px 17px;
      }
    }
  }
}
/* BLOG GRID */
.BlogGrid {
  display: flex;
  align-items: center;
  margin-top: 60px;
  gap: 24px;
  .Card {
    width: calc(33.33% - 16px);
    margin: 0 10px;
    .Image {
      aspect-ratio: 497/399;
      width: 100%;
      overflow: hidden;
      border-radius: 32px;
      position: relative;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .Date {
        background-color: var(--primary-color);
        padding: 6px 10px;
        border-radius: 50px;
        width: 170px;
        position: absolute;
        bottom: 25px;
        left: 25px;
        text-align: center;
        font-size: 16px;
        display: flex;
        align-items: center;
        gap: 5px;
        i {
          font-size: 26px;
        }
      }
    }
    h3 {
      font-size: 27px;
      margin-top: 22px;
    }
    a {
      font-size: 16px;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: 13px;
      color: var(--black-color);
      opacity: 0.5;
      &:hover {
        opacity: 1;
        color: var(--secondary-color);
        transition: cubic-bezier(0.075, 0.82, 0.165, 1) 1s;
      }
    }
  }
}

/* MEDIA QUARY */
@media (max-width: 1550px) {
  h1 {
    font-size: 58px;
  }
  .Primary-Btn {
    padding: 11px 25px;
  }
  .SectionTtle {
    h2 {
      font-size: 42px;
    }
  }
  /* service */
  .ServiceGrid {
    .Card {
      padding: 43px 47px;
    }
  }
  .CourseCard {
    padding: 25px;
    .Cnt {
      h3 {
        font-size: 25px;
      }
    }
  }
  .BlogGrid {
    & .Card {
      & .Image {
        .Date {
          width: 160px;
          font-size: 15px;
          i {
            font-size: 24px;
          }
        }
      }
      h3 {
        font-size: 25px;
        margin-top: 20px;
      }
    }
  }
}
@media (max-width: 1333px) {
  a {
    text-decoration: none;
    font-size: 15px;
  }
  .Primary-Btn {
    padding: 11px 20px;
    font-size: 14px;
  }
  h3 {
    font-size: 18px;
  }
  h1 {
    font-size: 46px;
  }
  .SectionTtle {
    h2 {
      font-size: 33px;
    }
  }
  p {
    font-size: 16px;
  }
  h3 {
    font-size: 19px;
  }
  .Paddingbg {
    padding: 80px 0;
  }
  .TopMargin {
    margin-top: 80px;
  }
  .ServiceGrid {
    .Card {
      padding: 35px 34px;
      .Icon {
        margin-bottom: 19px;
        i {
          width: 65px;
          height: 65px;
        }
      }
      p {
        margin: 11px 0;
        font-size: 15px;
      }
      a {
        font-size: 14px;
        margin-top: 14px;
      }
    }
  }
  .CourseCard {
    padding: 17px;
    & .CourseImage {
      span {
        width: 120px;
        top: 26px;
        left: 27px;
        font-size: 13px;
      }
    }
    & .Cnt {
      h3 {
        font-size: 21px;
      }
      & .Flex {
        width: 90%;
        .Primary-Btn {
          font-size: 13px;
          padding: 8px 12px;
        }
        span {
          font-size: 14px;
        }
      }
    }
  }
  .BlogGrid {
    margin-top: 45px;
    & .Card {
      h3 {
        font-size: 21px;
      }
      a {
        font-size: 15px;
      }
      .Image {
        .Date {
          width: 150px;
          font-size: 14px;
          bottom: 17px;
          left: 17px;
          padding: 3px 10px;
        }
      }
    }
  }
}
@media (max-width: 1024px) {
  .SubTitle {
    h3 {
      font-size: 16px;
    }
  }
  h3 {
    font-size: 18px;
  }
  .TopMargin {
    margin-top: 60px;
  }
  .Paddingbg {
    padding: 60px 0;
  }
  h1 {
    font-size: 43px;
  }
  .Primary-Btn {
    padding: 10px 15px;
    font-size: 13px;
  }
  a {
    text-decoration: none;
    font-size: 14px;
  }
  .ServiceGrid {
    margin-top: 40px;
    align-items: start;
    .Card {
      width: calc(50% - 15px);
      height: 100%;
      padding: 35px 25px;
    }
  }
}
@media (max-width: 768px) {
  h3 {
    font-size: 19px;
  }
  h1 {
    font-size: 41px;
  }
  .SectionTtle {
    h2 {
      font-size: 30px;
    }
  }
  .ServiceGrid {
    & .Card {
      & .Icon {
        i {
          width: 57px;
          height: 57px;
        }
      }
    }
  }
  .CourseCard {
    .Cnt {
      h3 {
        font-size: 19px;
      }
      .Flex {
        flex-flow: column-reverse;
        justify-content: start;
        width: 80%;
        gap: 10px;
        align-items: flex-start;
        margin-top: 7px;
      }
    }
  }
  .BlogGrid {
    & .Card {
      h3 {
        font-size: 20px;
        margin-top: 12px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
    }
  }
}
@media (max-width: 600px) {
  h1 {
    font-size: 32px;
  }
  .SectionTtle {
    h2 {
      font-size: 26px;
    }
  }
  h3 {
    font-size: 20px;
  }
  .ServiceGrid {
    .Card {
      width: 100%;
      padding: 35px 37px;
    }
  }
}