:root {
    --white: #ffffff;
    --black: #000000;
    --orange: #e3811d;
    --lsorange: #fff2e5;
    --lorange: #fccc60;
    --purple: #890fcc;
    --lpurple: #8378f8;
    ---gredient: linear-gradient(to right,  var(--lsorange) 20%, #890FCC 750%, #8378F8 100%);
    --grey: #b3b1b1;
  }
  /* Google Fonts - Barlow */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@media (max-width: 768px) /*Mobile*/ {

  .about-heading{
    text-align: left;
  }
    .hero-btn1 {
      border: 1px solid var(--orange);
      color: var(--orange);
      padding: 10px;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .hero-btn2 {
      background: var(--orange);
      color: var(--white);
      padding: 10px;
      width: 100%;
      margin-top: 10px;
      margin-bottom: 5px;
    }
    .hero-sub-section img {
      width: 100%;
      height: 310px;
    }
    .about-2{
      display: flex;
      width: 358px;
      padding: 40px 24px;
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }
    .about-2-head{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 24px;
      align-self: stretch;
    }
    .about-2-foot{
      display: flex;
      padding: 20px;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 20px;
      align-self: stretch;
      border-radius: 10px;
      border: 1px solid #D4D4D4;
      background: rgba(36, 36, 36, 0.20);
      backdrop-filter: blur(6px);
    }
    .footer-section{
      background: url("/static/assets/image/footer-img.4a05a0cba0de.png");
      background-position: right bottom;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 30px;
      padding-top: 20px;
      border-top: 1px solid var(--grey);
    }
    .footer-head .menu a{
      color: #1E1E1E;
      font-family: "Barlow";
      font-style: normal;
      line-height: 150%; /* 24px */
    }
    .footer-head .connect i{
      color: var(--orange);
      background: var(--lsorange);
      font-size: 25px;
      padding: 10px;
    }
    .footer-head .connect{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 14px;
      align-self: stretch;
      color: #1E1E1E;
      font-family: "Barlow";
      font-style: normal;
      line-height: 150%;
    }
    .footer-head .menu{
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      gap: 20px;
      align-self: stretch;
      flex-wrap: wrap;
      padding-bottom: 20px;
    }
    .footer-head{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
      align-self: stretch;
    }
    .footer-foot .con i{
      color: var(--orange);
      margin-right: 10px;
      padding: 10px;
    }
    .footer-foot .con div{
      text-align: center;
      gap: 20px;
      align-self: stretch;
      margin-bottom: 10px;
    }
    .footer-foot .copy{
      text-align: center;
      -webkit-text-stroke-width: 1;
      -webkit-text-stroke-color: var(--black);
      font-family: "Barlow";
      font-style: normal;
      line-height: 150%;
      margin-bottom: 20px;
    }
    .footer-foot{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      align-self: stretch;
    }
    .course-heading{
      padding: 40px;
      background: var(---gredient);
    }
    .course-1{
      padding: 10px;
      margin: 0;
      width: 100%;
    }
    .course-cont{
      margin-top: 20px;
    }
    .blog-post-head {
      text-align: center;
    }
    .blog-post-card .card-body .card-head span {
      background: var(--black);
      color: var(--white);
      padding: 8px;
      border-radius: 5px;
    }
    /* .blog-post-card .card-body .card-head {
      font-size: 13px;
    } */
    /* .blog-post-card .card-body .card-title{
      margin-left: ;
    } */
    .blog-post-card .card-body {
      padding-left: 10px;
    }
    .blog-post-card .card-body p {
      display: none;
    }
    .blog-post-card {
      display: flex;
      line-height: 2;
      flex-shrink: 0;
      cursor: pointer;
    }
    .blog-post-card .card-pinned img {
      width: 100%;
      height: 100px;
      flex-shrink: 0;
      border-radius: 10px;
    }
    .blog-post-card {
      margin-top: 50px;
      margin-bottom: 50px;
    }

  }
  @media (min-width: 769px) /*PC*/ {
    .hero-count {
      margin-top: 50px;
    }
    .hero-sub-section img {
      width: 550px;
      height: 500px;
      margin-top: 20px;
    }
    .footer-head{
      display: flex;
      justify-content: space-between;
    }
    .footer-boot-1{
      display: flex;
      justify-content: space-around;
    }
    .about-2-foot{
      display: flex;
      padding: 24px 40px;
      justify-content: center;
      align-items: center;
      gap: 20px;
      align-self: stretch;
      border-radius: 12px;
      border: 1px solid var(--Grey-15, #262626);
      background: var(--color-white-solid, #FFF);
      backdrop-filter: blur(6px);
    }
    .about-2{
      padding-right: 80px;
      padding-left: 80px;
      padding-top: 40px;
      padding-bottom: 40px;
      margin-top: 40px;
      backdrop-filter: blur(6px);
    }
    .about-2-head img{
      width: 200px;
      height: 52px;
    }
    .about-2-head{
      display: flex;
      align-items: center;
      gap:  40px;
      align-self: stretch;
    }
    .footer-section {
      background: url("/static/assets/image/footer-img.4a05a0cba0de.png");
      background-position: right bottom;
      background-repeat: no-repeat;
      display: flex;
      padding: 30px 162px;
      flex-direction: column;
      align-items: flex-start;
      gap: 50px;
      border-top: 1px solid var(--black, #262626);
    }
    .footer-head .menu a{
      color: #000;
      font-family: "Barlow";
      font-style: normal;
      line-height: 150%; /* 27px */
    }
    .footer-head .menu{
      display: flex;
      align-items: center;
      gap: 30px;
    }
    .footer-head .connect i{
      padding: 10px;
      background: var(--lsorange);
      color: var(--orange);
    }
    .footer-head .connect{
      display: flex;
      padding: 14px 14px 14px 24px;
      align-items: center;
      gap: 20px;
      border-radius: 12px;
      border: 1px solid var(--black, #262626);
    }
    .footer-foot .con i{
      color: var(--orange);
      margin-right: 10px;
    }
    .footer-foot .copy{
      color: var(--black);
      font-family: "Barlow";
      font-style: normal;
      line-height: 150%; /* 27px */
    }
    .footer-foot .con{
      display: flex;
      align-items: flex-start;
      gap: 30px;
    }
    .footer-foot{
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-self: stretch;
    }
    .footer-head{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      align-self: stretch;
    }
    .course-heading{
        padding: 40px;
        background: var(---gredient);
      }
      .course-1{
        padding: 10px;
      }
      .course-cont{
        margin-top: 30px;
      }
      .course-body, .course-head{
        padding: 40px;
      }
      .blog-post-head {
        text-align: center;
      }
      .blog-post-card .card-body .card-head span {
        padding: 10px;
        margin: 10px;
        margin-left: -5px;
        background: var(--purple);
        color: var(--white);
        border-radius: 5px;
      }
      .blog-post-card .card-body {
        padding-left: 7px;
      }
      .blog-post-card .card-body .card-head {
        line-height: 3;
      }
      .blog-post-card {
        padding: 10px;
      }
      .blog-post-card .card-pinned img {
        width: 100%;
        height: 295px;
        flex-shrink: 0;
      }
      .title-img {
        width: 100%;
      }
      .title-img img{
        width: 100%;
        flex-shrink: 0;
        border-radius: 30px;
    }
    .work-card {
      padding: 0;
      margin: 5px;
      width: 30%;
  }
  }