@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Lexend+Deca:wght@100..900&display=swap');

/* 
font-family: "Lexend Deca", sans-serif;
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  padding-right: 0;
  padding-left: 0;
}

.my-container {
  width: 83.5%;
  margin: 0 auto;
}


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

p {
  margin-top: 0;
  margin-bottom: 0;
  /* text-align: justify; */
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0;
}

:root {
  --white: #fff;
  --black: #000;
  --paragraph: #4e4e4e;
  --blue-top-head: #3e6db5;
  --nav-grey: #0e1317;
  --banner-text-deep-blue: #082a5e;
  --banner-text-light-blue: #3e6db5;
  --benefit-grey: #e4e4e4;
  --benefit-heading: #131415;
  --thousand-course: #e7effc;
  --grey-border: #c1c1c1;
  --grey-border2: #7e7e7e;
  --recent-course-orange-deep: #ff8401;
  --recent-course-orange-light: #ffdbb5;
  --recent-course-para: #202020;
  --recent-course-sky-deep: #36abee;
  --recent-course-sky-light: #def3ff;
  --recent-course-green-deep: #2bcda6;
  --recent-course-green-light: #b9ffee;
  --recent-course-blue-deep: #082a5e;
  --recent-course-blue-light: #e7effc;
  --achievement-bg: #f3f7fb;
  --achievement-text-bg: #e7effc;
  --placement-btn: #5193ff;
  --footer-bg: #203e53;
  --copyright-bg: #222222;
  --pillar-text: #212121;
  --job-vacancy-box-head: #e1e1e1;
  --reply-btn-bg: #bcd6ff;
  --reply-btn-text: #1d76ff;
  --post-comment-form-border: #a7a7a7;
  --post-comment-form-bg: #f6f6f6;
  --post-comment-form-text: #747e93;
  --blog-page-box-bg: #e1ecff;
}

body {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 18px;
  background: #ffff;
  overflow-x: hidden;
}


/* ========NAVGATION AND MOBILE MENU========================= */

.mobile-active {
  display: none;
}

.bx-menu {
  color: var(--black);
}

.bx-chevron-down {
  margin: 0 0 0 5px;
}


nav {
  /* position: fixed; */
  position: relative;
  z-index: 99;
  width: 100%;
  background: #fff;
}

.nav-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 13px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
z-index:99999;
}

.nav-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

nav .wrapper {
  position: relative;
  max-width: 83%;
  height: 70px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wrapper .logo a {
  color: #f2f2f2;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
  outline: none;
}

.wrapper .nav-links {
  display: inline-flex;
  margin-left: 15rem;
  transition: all .6s ease-in-out;
}

.nav-links li {
  list-style: none;
  transition: all .6s ease-in-out;
}

.nav-links li a {
  color: var(--paragraph);
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  font-family: "Lexend Deca", sans-serif;
  padding: 9px 15px;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav-links li a:hover {
  background: var(--banner-text-light-blue);
  color: var(--white);
}

.nav-links .mobile-item {
  display: none;
}

.nav-links .drop-menu {
  position: absolute;
  background: var(--white);
  width: 180px;
  line-height: 45px;
  top: 85px;
  opacity: 0;
  visibility: hidden;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.nav-links li:hover .drop-menu,
.nav-links li:hover .mega-box {
  transition: all 0.3s ease;
  top: 70px;
  opacity: 1;
  visibility: visible;
}

.drop-menu li a {
  width: 100%;
  display: block;
  padding: 0 0 0 15px;
  font-weight: 400;
  border-radius: 0px;
}


.content .row img {
  width: 100%;
  /* height: 100%; */
  object-fit: cover;
}

.content .row header {
  color: #f2f2f2;
  font-size: 20px;
  font-weight: 500;
}

.content .row .mega-links {
  margin-left: -40px;
  border-left: 1px solid rgba(255, 255, 255, 0.09);
}

.row .mega-links li {
  padding: 0 20px;
}

.row .mega-links li a {
  padding: 0px;
  padding: 0 20px;
  color: #d9d9d9;
  font-size: 17px;
  display: block;
}

.row .mega-links li a:hover {
  color: #f2f2f2;
}

.wrapper .btn {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}

.wrapper .btn.close-btn {
  position: absolute;
  right: 30px;
  top: 10px;
}

@media only screen and (max-width:1550px) {
  nav .wrapper {
    max-width: 85% !important;
  }
}

@media only screen and (max-width:1500px) {
  nav .wrapper {
    max-width: 88% !important;
  }
}

@media screen and (max-width:1450px) {
  nav .wrapper {
    max-width: 91% !important;
  }
}

@media screen and (max-width:1400px) {
  nav .wrapper {
    max-width: 94% !important;
  }
}

@media screen and (max-width:1368px) {
  nav .wrapper {
    max-width: 84% !important;
  }

  .wrapper .nav-links {
    margin-left: 7rem;
  }
}

@media screen and (max-width:1280px) {
  nav .wrapper {
    max-width: 90% !important;
  }
}

@media screen and (max-width:1180px) {
  nav .wrapper {
    max-width: 81% !important;
  }

  .wrapper .nav-links {
    margin-left: 2rem;
  }

  .logo img {
    width: 113px;
    height: 34px;
  }

  .nav-links li a {
    padding: 9px 10px;
  }

}


@media screen and (max-width:1024px) {
  nav .wrapper {
    max-width: 94% !important;
  }

}

@media screen and (max-width: 970px) {
  .top-bar {
    display: none;
  }

  .nav-links {
    transition: all .6s ease-in-out !important;
  }

  .nav-links li {
    margin: 15px 5px;
    font-size: 14px;
    line-height: 30px;
  }

  .nav-links li a {
    padding: 0 0px;
    display: block;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    color: var(--mobile-menu-item);
  }

  .nav-links li a:hover {
    background: var(--mob-nav-hover);
  }

  .mobile-active {
    display: block;
  }

  .mobile-active ul {
    display: flex;
  }

  .bx {
    font-size: 30px;
  }

  .bx-x {
    font-size: 30px;
    width: 40px;
    height: 40px;
    border-radius: 60px;
    padding: 5px 0 0 0;
    background: var(--banner-text-deep-blue);
  }

  .bx-chevron-down {
    font-size: 18px;
    line-height: 20px;
  }

  .nav-btn {
    margin-left: 38rem;
    transition: all .6s ease-in-out !important;
  }

  .wrapper .btn {
    display: block;
    margin: 10px 0 0 0;
  }

  .wrapper .nav-links {
    margin-left: 0rem;
  }

  .wrapper .nav-links {
    position: fixed;
    height: 100vh;
    width: 40%;
    max-width: 970px;
    top: 0;
    left: -100%;
    background: var(--banner-text-light-blue);
    color: var(--white);
    display: block;
    padding: 50px 10px;
    line-height: 50px;
    overflow-y: auto;
    box-shadow: 0px 15px 15px rgba(0, 0, 0, 0.18);
    transition: all 0.3s ease;
  }

  ::-webkit-scrollbar-track {
    background: #242526;
  }

  ::-webkit-scrollbar-thumb {
    background: var(--mob-nav-hover);
  }

  #menu-btn:checked~.nav-links {
    left: 0%;
  }

  #menu-btn:checked~.btn.menu-btn {
    display: none;
  }

  #close-btn:checked~.btn.menu-btn {
    display: block;
  }

  /* 
  .nav-links li {
    margin: 15px 10px;
  } */
  /* 
  .nav-links li a {
    padding: 0 20px;
    display: block;
    font-size: 14px;
    line-height: 30px;
    font-weight: 400;
    color: var(--mobile-menu-item);
  }

  .nav-links li a:hover {
    background: var(--mob-nav-hover);
  } */


  .nav-links .drop-menu {
    position: static;
    opacity: 1;
    top: 80px;
    visibility: visible;
    /* padding-left: 20px; */
    width: 100%;
    max-height: 0px;
    overflow: hidden;
    box-shadow: none;
    transition: all 0.3s ease;
    background: #669db7;
  }

  #showDrop:checked~.drop-menu,
  #showMega:checked~.mega-box {
    max-height: 100%;
  }

  .nav-links .desktop-item {
    display: none;
  }

  .nav-links .mobile-item {
    display: block;
    color: #f2f2f2;
    font-size: 14px;
    font-weight: 400;
    padding-left: 20px;
    cursor: pointer;
    border-radius: 5px;
    transition: all 0.3s ease;
  }


  .nav-links .mobile-item:hover {
    background: var(--mob-nav-hover);
  }

  .drop-menu li a {
    border-radius: 2px;
    font-size: 14px;
    line-height: 40px;
    width: 100%;
  }


  .content .row .mega-links {
    border-left: 0px;
    padding-left: 15px;
  }

  .row .mega-links li {
    margin: 0;
  }

  .content .row header {
    font-size: 19px;
  }
}


@media screen and (max-width:932px) {

  .nav-btn {
    margin-left: 34rem;
    z-index: -1;
  }

}

@media screen and (max-width: 853px) {

  .nav-btn {
    margin-left: 30rem;
  }
}

@media screen and (max-width: 820px) {

  .nav-btn {
    margin-left: 28rem;
z-index:99999;
  }
}


@media screen and (max-width: 768px) {
  .nav-btn {
    margin-left: 25rem;
z-index:99999;
  }
}


@media screen and (max-width:667px) {
  .nav-btn {
    margin-left: 19rem;
z-index:99999;
  }
  .wrapper .nav-links {
    width: 48%;
  }


}


@media screen and (max-width:640px) {
  .nav-btn {
    margin-left: 18rem;
z-index:99999;
  }
}

@media screen and (max-width:540px) {
  .nav-btn {
    margin-left: 14rem;
  }
  .wrapper .nav-links {
    width: 55%;
  }

}

@media screen and (max-width:480px) {
  .wrapper .nav-links {
    width: 70%;
    /* max-width: 970px; */
  }

  .logo img {
    width: 113px;
    height: 34px;
  }

  .nav-btn {
    margin-left: 7rem;
    font-size: 13px;
    line-height: 18px;
    padding: 9px 10px;
  }

}

@media screen and (max-width:393px) {
  .nav-btn {
    margin-left: 4rem;
  }

  .bx-x {
    font-size: 24px;
    width: 30px;
    height: 30px;
    border-radius: 60px;
    padding: 3px 0 0 0;
    background: var(--banner-text-deep-blue);
  }

}

@media screen and (max-width:390px) {
  .wrapper .nav-links {
    width:74% !important;
  }
}

@media screen and (max-width:360px) {
  .wrapper .nav-links {
    width:78% !important;
  }
}

@media screen and (max-width:344px) {
  .wrapper .nav-links {
    width:82% !important;
  }
}



@media screen and (max-width:280px) {
  .nav-btn {
    margin-left: 2rem;
    font-size: 13px;
    line-height: 15px;
    padding: 8px 9px;
  }

  .logo img {
    width: 78px;
    height: 25px;
  }

  .wrapper .nav-links {
    width:99% !important;
  }
}

nav input {
  display: none;
}

/* 
.body-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  padding: 0 30px;
}

.body-text div {
  font-size: 45px;
  font-weight: 600;
}  */

/* ===============TOP HEAD======================== */

header .top-bar {
  background: var(--banner-text-light-blue);
  padding: 10px 0;
}

.top-bar .top-bar-area {
  display: flex;
  justify-content: space-between;
  color: var(--white);
}
/* 
.top-bar .top-bar-area div {
  width: 43%;
} */
 
.top-bar .top-bar-area div {
  width: 35% !important;
}

header .top-bar .floated-left {
  display: flex;
  justify-content: space-between;
  font-family: "Lexend Deca", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--white);
}

header .top-bar .floated-left p {
  color: var(--light-yellow);
}


header .top-bar .floated-left a {
  font-family: "Lexend Deca", sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: var(--light-yellow);
  text-decoration: none;
}

header .top-bar .floated-right {
  display: flex;
  justify-content: end;
}

header .top-bar .floated-right a {
  margin: 0 0 0 10px;
}

/* ---------------------- */

/* nav .wrapper {
  position: relative;
  max-width: 82%;
  height: 70px;
  line-height: 70px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
} */

@media only screen and (max-width:1549px) and (min-width:1500px) {
  nav .wrapper {
    max-width: 87%;
  }
}

@media only screen and (max-width:1499px) and (min-width:1399px) {
  nav .wrapper {
    max-width: 87%;
  }
}


@media only screen and (max-width:1399px) and (min-width:1025px) {
  .top-bar .top-bar-area div {
    width: 50%;
  }

  .top-bar .top-bar-area div+div {
    width: 50%;
  }
}

@media only screen and (max-width:1180px) {
  .top-bar .top-bar-area div {
    width: 60%;
  }

  .top-bar .top-bar-area div+div {
    width: 40%;
  }
}


/* 
@media only screen and (max-width:970px) {
  .top-bar .top-bar-area {
    display: block;
    flex-direction: column;
  }

  .top-bar .top-bar-area div {
    width: 100%;
  }

  .top-bar .top-bar-area div+div {
    width: 100%;
  }

  header .top-bar .floated-left {
    display: block;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  header .top-bar .floated-left p {
    text-align: center;
    font-size: 13px;
    line-height: 30px;
  }

  header .top-bar .floated-right p {
    text-align: center;
    margin: 0 3px;

  }

  header .top-bar .floated-right {
    justify-content: center;
    align-items: center;
  }

  header .top-bar .floated-left a {
    font-size: 13px;
    line-height: 30px;
  }

} */

/* ===============BANNER======================== */

.banner-text-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.banner .banner-text-area h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 56px;
  line-height: 70px;
  font-weight: 700;
  color: var(--banner-text-deep-blue);
}

/* .banner .banner-text-area h1:before {
  position: absolute;
  content: "";
  left: 14rem;
  top: 18.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.banner-model img {
  position: relative;
  margin-top: 50px;
}

.banner .banner-text-area h1 span {
  color: var(--banner-text-light-blue);
}

.banner .banner-text-area ul {
  padding: 40px 0;
}

.banner .banner-text-area ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 22px;
  line-height: 40px;
  font-weight: 400;
  color: var(--banner-text-deep-blue);
  /* padding: 0 0 0 18px; */
  /* background: url(../images/homepage/banner-right-arrow-orange.png) 0% 50% no-repeat; */
}

.banner-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 18px 20px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
}

.banner-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.home-banner {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}



@media only screen and (max-width:1368px) {
  .banner .banner-text-area>div {
    width: 55% !important;
  }

  .banner .banner-text-area>div+div {
    width: 45% !important;
  }
}

@media only screen and (max-width:1180px) {
  .banner .banner-text-area>div {
    width: 58% !important;
  }

  .banner .banner-text-area>div+div {
    width: 42% !important;
  }

  .banner .banner-text-area h1:before {
    left: 26rem;
    top: 16.5rem;
  }

}


@media only screen and (max-width:1024px) {
  .home-banner {
    height: 400px !important;
  }

  .banner-model img {
    width: auto;
    height: 400px;
    margin-top: 0px;
  }

  .banner .banner-text-area h1 {
    font-size: 40px;
    line-height: 50px;

  }

  /* .banner .banner-text-area h1:before {
    left: 6rem;
    top: 10.5rem;
  } */

  .banner .banner-text-area ul li {
    font-size: 18px;
    line-height: 40px;
  }

  .banner-btn {
    font-size: 14px;
    line-height: 16px;
    padding: 16px 20px;
  }

  .banner .banner-text-area ul {
    padding: 14px 0;
  }
}

@media only screen and (max-width:932px) {
  .banner .swiper-wrappe {
    width: 100% !important;
  }

  /* .banner .banner-text-area h1:before {
    left: 10rem;
    top: 8.8rem;
  } */

}


@media only screen and (max-width:768px) {
  .banner h1 {
    font-size: 50px;
    line-height: 55px;
  }

  /* .banner .banner-text-area h1:before {
    left: 6rem;
    top: 8.8rem;
  } */
}

@media only screen and (max-width:745px) {
  .banner .banner-text-area h1:before {
    left: 6rem;
    top: 7.2rem;
}

}


@media only screen and (max-width:736px) {

  .home-banner {
    min-height: 100px !important;
  }

  .banner-model img {
    width: auto;
    height: 350px;
    margin-top: 40px;
  }

  .banner-text-area {
    padding: 40px 40px 0 40px;
  }

  .banner .banner-text-area h1 {
    font-size: 28px;
    line-height: 36px;
  }

  .banner-btn {
    font-size: 13px;
    line-height: 15px;
    padding: 12px 16px;
  }

  .banner-text-area {
    padding: 10px 0px 0 0px;
  }

  .banner .banner-text-area h1:before {
    left: 8rem;
    top: 10rem;
  }

}

@media only screen and (max-width:540px) {
  .banner-text-area {
    padding: 0px 0px 0px 15px;
  }

  .banner-model img {
    width: auto;
    height: 300px;
    margin-top: 30px;
  }

  .home-banner {
    height: 320px !important;
  }

  .banner .banner-text-area h1:before {
    left: 5rem;
    top: 8rem;
  }

}

@media only screen and (max-width:430px) {

  .banner .banner-text-area h1 {
    font-size: 22px;
    line-height: 25px;
  }

  .banner-btn {
    font-size: 13px;
    line-height: 15px;
    padding: 10px 14px;
  }

  .banner .banner-text-area h1:before {
    left: 4rem;
    top: 7rem;
  }

  .banner .banner-text-area ul li {
    font-size: 16px;
    line-height: 22px;
    padding: 10px 0 0 0px;
    /* background: url(../images/homepage/banner-right-arrow-orange.png) 5% 50% no-repeat; */
  }
}

@media only screen and (max-width:414px) {
  .banner .banner-text-area h1:before {
    left: 10rem;
    top: 5rem;
  }

}

@media only screen and (max-width:393px) {
  .banner .banner-text-area h1:before {
    left: 10rem;
    top: 7rem;
  }

  .banner .banner-text-area ul {
    padding: 5px 0;
  }
}

@media only screen and (max-width:375px) {
  .banner .banner-text-area h1 {
    font-size: 18px;
    line-height: 25px;
    background: none;
  }

  .banner .banner-text-area h1:before {
    background: none;
  }
}


@media only screen and (max-width:280px) {
  .banner .banner-text-area {
    flex-direction: column;
    text-align: left;
    padding: 0 0 0 0;
  }

  .banner .banner-text-area div {
    width: 100%;
  }

  

  .banner .banner-text-area h1 {
    font-size: 18px;
    line-height: 22px;
    padding: 30px 0 0 30px;
    text-align: left;
  }

  .banner .banner-text-area h1:before {
    background: none;
  }

  .banner .banner-text-area>div {
    width: 100% !important;
  }

  .banner .banner-text-area>div+div {
    width: 100% !important;
  }

  .home-banner {
    height: 400px !important;
  }

  .banner .banner-text-area ul {
    padding: 5px 0 15px;
  }

  
  .banner .banner-text-area ul li {
    padding: 10px 0 0 0px;
    /* background: url(../images/homepage/banner-right-arrow-orange.png) 11% 95% no-repeat; */
    font-size: 12px;
    line-height: 15px;
    text-align: left
  }

  .banner-btn {
    margin: 0 0 0 2rem;
  }

}





/* ===============DISCOVER COURSE======================== */

.discover-course {
  margin: 80px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* background: #000; */
}

.discover-course div {
  width: 49%;
  border-radius: 10px;
}

.discover-course .course-1 {
  background: url(../images/homepage/online-course-green-bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 0 40px;
}

.discover-course .course-1 h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 600;
  padding: 0 0 25px 0;
  color: var(--white);
}

.discover-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 15px 20px;
  background: var(--white);
  border-radius: 6px;
  color: var(--banner-text-light-blue);
  transition: all .6s ease;
}

.discover-btn:hover {
  transform: translateY(-5px);
}

.discover-course .course-2 {
  background: url(../images/homepage/test-skill-blue-bg.png) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px 0 40px;
}

.discover-course .course-2 h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 600;
  padding: 0 0 25px 0;
  color: var(--white);
}


@media only screen and (max-width:1368px) {
  .discover-course {
    margin: 50px 0;
  }

  .online-course-model {
    width: 200px;
    height: 190px;
  }

  .test-skill-model {
    width: 200px;
    height: 190px;
  }

  .discover-btn {
    font-size: 13px;
    line-height: 14px;
    padding: 10px 11px;
  }

  .discover-course .course-1 h3 {
    font-size: 27px;
    line-height: 31px;
  }

  .discover-course .course-2 h3 {
    font-size: 27px;
    line-height: 32px;
  }

  .discover-course .course-1 {
    padding: 20px 10px 0 20px;
  }

  .discover-course .course-2 {
    padding: 20px 10px 0 20px;
  }


}


@media only screen and (max-width:1024px) {
  .discover-course {
    margin: 50px 0;
  }

  .online-course-model {
    width: 200px;
    height: 190px;
  }

  .test-skill-model {
    width: 200px;
    height: 190px;
  }

  .discover-btn {
    font-size: 13px;
    line-height: 14px;
    padding: 10px 11px;
  }

  .discover-course .course-1 h3 {
    font-size: 27px;
    line-height: 31px;
  }

  .discover-course .course-2 h3 {
    font-size: 27px;
    line-height: 32px;
  }

  .discover-course .course-1 {
    padding: 20px 10px 0 20px;
  }

  .discover-course .course-2 {
    padding: 20px 10px 0 20px;
  }


}


@media only screen and (max-width:932px) {

  .discover-course .course-1 h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .discover-btn {
    font-size: 13px;
    line-height: 14px;
    padding: 10px 9px;
  }

  .discover-course .course-2 h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .online-course-model {
    width: 157px;
    height: 167px;
  }

  .test-skill-model {
    width: 157px;
    height: 167px;
  }
}

@media only screen and (max-width:768px) {
  .discover-course .course-1 h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .discover-btn {
    font-size: 13px;
    line-height: 14px;
    padding: 10px 9px;
  }

  .discover-course .course-2 h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .online-course-model {
    width: 157px;
    height: 167px;
  }

  .test-skill-model {
    width: 157px;
    height: 167px;
  }
}


@media only screen and (max-width:745px) {
  .discover-course {
    flex-direction: column;
    padding: 0 15px;
  }

  .discover-course div {
    width: 100%;
    margin: 20px 0 0 0;
  }

}

@media only screen and (max-width:480px) {
  .discover-course {
    flex-direction: column;
    padding: 0 15px;
  }

  .discover-course div {
    width: 100%;
    margin: 20px 0 0 0;
  }

}

@media only screen and (max-width:360px) {

  .discover-course .course-1 {
    flex-direction: column;
  }

  .discover-course .course-2 {
    flex-direction: column;
  }


}


/* ===============BENEFIT PART======================== */

.bxs-circle {
  font-size: 13px;
  line-height: 20px;
  margin: 0 6px 0 0;
}

.benefit-carousel{
  margin-bottom:40px;
}

.benefit-carousel .grey-area {
  text-align: center;
  background: var(--benefit-grey);
  width: 100%;
  padding: 40px 50px;
  position: relative;
}

.benefit-carousel .grey-area:before {
  position: absolute;
  content: "";
  left: 45%;
  top: 98%;
  background: url(../images/homepage/benefit-triangle-grey.png) no-repeat 0 0;
  width: 56px;
  height: 46px;
}

.benefit-carousel .grey-area h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 26px;
  line-height: 30px;
  font-weight: 700;
  color: var(--benefit-heading);
  padding-bottom: 25px;
}

.benefit-carousel .gradient-area {
  background: url(../images/homepage/benefit-bg-1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  width: 100%;
  padding: 30px;
  height: 300px;
  overflow-y: scroll;
}

.benefit-carousel .gradient-area-2 {
  background: url(../images/homepage/benefit-bg-2.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

.benefit-carousel .gradient-area-3 {
  background: url(../images/homepage/benefit-bg-3.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 300px;
}

.benefit-carousel .gradient-area ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 22px;
  font-weight: 300;
  color: var(--white);
  margin: 15px 0 0 0;
  padding: 0 0 0 20px;
  position: relative;
}

.bxs-circle {
  font-size: 13px;
  line-height: 20px;
  margin: 0 6px 0 0;
}

.benefit-carousel .gradient-area::-webkit-scrollbar {
  width: 8px;
}

.benefit-carousel .gradient-area::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.benefit-carousel .gradient-area::-webkit-scrollbar-thumb {
  background: #f1f1f1;
  border-radius: 0px;
}

.benefit-carousel .gradient-area::-webkit-scrollbar-thumb:hover {
  background: #b3b3b3;
}


@media only screen and (max-width:1368px) {
}

@media only screen and (max-width:1180px) {
}

@media only screen and (max-width:1024px) {
}


@media only screen and (max-width:932px) {
  .benefit-carousel.grey-area {
    padding: 20px 15px !important;
  }

  .benefit-carousel .grey-area h3 {
    font-size: 18px !important;
    line-height: 21px;
    padding-bottom: 18px;
  }

  .benefit-carousel .grey-area .who-can-attend-pic {
    width: 90px;
    height: 90px;
  }

  .benefit-carousel .gradient-area ul li {
    font-size: 16px;
    line-height: 22px;
    font-weight: 300;
  }


  .benefit-carousel {
    display: block;
    padding: 0 0px;
  }

  .benefit-part {
    display: none;
  }


  .benefit-carousel .gradient-area {
    height: 400px;
    padding: 20px 15px;

  }

}

@media only screen and (max-width:745px) {

.benefit-carousel .gradient-area {
  height:300px;
  padding: 20px 15px;
}


}


@media only screen and (max-width:736px) {
  .benefit-carousel {
    padding: 0 5px;
  }

}


@media only screen and (max-width:540px) {
  .benefit-carousel {
    padding: 0 10px;
  }

}

@media only screen and (max-width:375px) {
  .benefit-carousel .gradient-area {
    padding: 30px 15px 10px 5px;
  }
}


/* ===============RECENT COURSE======================== */
.recent-course {
  margin: 80px 0;
}

.view-course-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 15px 20px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
}

.view-course-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.recent-course .recent-course-heading h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
}

/* .recent-course .recent-course-heading h3:before {
  position: absolute;
  content: "";
  left: 10rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.recent-course .recent-course-heading h3 span {
  color: var(--banner-text-light-blue);
}

.recent-course .recent-course-heading div>span {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  background: var(--thousand-course);
  display: inline-block;
  padding: 8px 22px;
  border-radius: 5px;
}

.recent-course .mySwiper2 {
  margin-top: 60px;
}

.recent-course .mySwiper2>.swiper-pagination {
  position: relative;
  margin-top: 30px !important;
}

.recent-course .mySwiper2 .recent-course-box {
  border: 1px solid var(--grey-border);
  border-radius: 10px;
  padding: 15px 15px 10px 15px;
  min-height:450px !important;
}

.recent-course .mySwiper2 .recent-course-box .course-pic {
  width: 100%;
  border-radius: 4px;
}

.recent-course .mySwiper2 .recent-course-box h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);
  display: inline-block;
  padding: 10px 25px;
  border-radius: 10px;
  margin: 15px 0 15px;
}

.recent-course .mySwiper2 .recent-course-box p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--recent-course-para);

}

.recent-course .mySwiper2 .recent-course-box .enroll-now-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  padding: 12px 25px;
  color: var(--white);
  background: var(--banner-text-light-blue);
  border: 1px solid var(--banner-text-light-blue);
  border-radius: 6px;
  display: table;
  margin: 20px 0;
  transition: all .6s ease;
}

.recent-course .mySwiper2 .recent-course-box .enroll-now-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}



@media only screen and (max-width:1368px) {
  .recent-course .mySwiper2 .recent-course-box {
    min-height:480px;
  }

}

@media only screen and (max-width:1180px) {
  .recent-course .mySwiper2 .recent-course-box {
    min-height:440px;
  }

}

@media only screen and (max-width:1024px) {
  .recent-course {
    margin: 50px 0;
  }

  .recent-course .recent-course-heading h3 {
    font-size: 30px !important;
    line-height: 35px;
  }

  .recent-course .recent-course-heading div>span {
    font-size: 15px;
    line-height: 18px;
    padding: 8px 16px;
  }

  .view-course-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 12px 18px;
  }

}

@media only screen and (max-width:932px) {
  .recent-course .mySwiper2 .recent-course-box {
    min-height: 450px;
  }

}

@media only screen and (max-width:745px) {
  .view-course-btn {
    padding: 12px 8px;
}
.recent-course .mySwiper2 .recent-course-box {
  min-height:376px !important;
}

}

@media only screen and (max-width:736px) {
  .recent-course-heading {
    flex-direction: column;
  }

  .recent-course .recent-course-heading h3 {
    padding: 0 0 45px 0;
  }
}


@media only screen and (max-width:540px) {
  .recent-course {
    padding: 0 15px;
  }

}

@media only screen and (max-width:480px) {
  .recent-course {
    padding: 0 15px;
  }

  .recent-course .recent-course-heading {
    flex-direction: column;
  }

  .recent-course .recent-course-heading h3 {
    font-size: 22px !important;
    line-height: 28px;
  }

  /* .recent-course .recent-course-heading h3:before {
    left: 6rem;
    top: 2rem;
  } */

  .view-course-btn {
    font-size: 13px;
    line-height: 14px;
    padding: 11px 20px;
    margin: 0px 0 0 0;
  }

  .recent-course .recent-course-heading div>span {
    font-size: 14px;
    line-height: 20px;
    padding: 7px 18px;
  }

  .recent-course .mySwiper2 {
    margin-top: 30px;
  }

  .recent-course .mySwiper2 .recent-course-box .enroll-now-btn {
    font-size: 13px;
    line-height: 18px;
    padding: 10px 25px;
  }

}





/* ===============OUR SKILL======================== */
.our-skill {
  background: var(--achievement-bg);
  padding: 80px 0;
}

.our-skill h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--banner-text-light-blue);
  background: var(--achievement-text-bg);
  padding: 8px 22px;
  border-radius: 5px;
  display: table;
  margin: 0 auto 25px;
}

.our-skill h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  text-align: center;
  position: relative;
  padding: 0 0 50px 0;
}

.our-skill h3:before {
  position: absolute;
  content: "";
  left: 45rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
}

.our-skill h3 span {
  color: var(--banner-text-light-blue);
}

.our-skill .our-skill-area .skill-box h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 40px;
  line-height: 30px;
  font-weight: 700;
  color: var(--banner-text-deep-blue);
  padding: 25px 0 10px;
  background: none;
}

.our-skill .our-skill-area .skill-box h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--banner-text-deep-blue);
}

.our-skill .our-skill-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.our-skill .our-skill-area .skill-box {
  width: 24%;
  background: var(--white);
  border-radius: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  padding: 40px;
  text-align: center;
}


@media only screen and (max-width:1500px) {
  .our-skill h3:before {
    left: 42rem !important;
    top: 2.5rem;
  }

}

@media only screen and (max-width:1368px) {
  .our-skill h3:before {
    left: 37rem !important;
    top: 2.5rem;
  }

}

@media only screen and (max-width:1280px) {
  .our-skill h3:before {
    left: 32.5rem !important;
    top: 2.5rem;
  }

}

@media only screen and (max-width:1024px) {
  .our-skill {
    padding: 50px 0 !important;
  }

  .our-skill h3 {
    font-size: 30px;
    line-height: 35px;
    padding: 0 0 30px 0;
  }

  .our-skill h3:before {
    left: 28rem !important;
    top: 2.5rem;
  }

  .our-skill h4 {
    font-size: 15px;
    line-height: 18px;
    padding: 8px 16px;
  }

  .our-skill .our-skill-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .our-skill .our-skill-area .skill-box {
    margin: 30px 0 0 0;
    width: 48%;
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    cursor: pointer;
    padding: 30px;
  }

  .our-skill h3:before {
    left: 27rem;
    top: 2.5rem;
  }

  .our-skill .our-skill-area .skill-box h4 {
    font-size: 30px;
    line-height: 37px;
    padding: 18px 0 0px;
  }

}


@media only screen and (max-width:932px) {
  .our-skill h3:before {
    left: 24rem !important;
    top: 2.5rem;
  }

}

@media only screen and (max-width:896px) {
  .our-skill h3:before {
    left: 24rem !important;
    top: 2.5rem;
  }

}

@media only screen and (max-width:853px) {
  .our-skill h3:before {
    left: 22rem !important;
    top: 2.5rem;
  }

}


@media only screen and (max-width:768px) {
  .our-skill h3:before {
    left: 19rem !important;
    top: 2.5rem;
  }
}


@media only screen and (max-width:667px) {
  .our-skill h3:before {
    left: 16rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:540px) {
  .our-skill-area {
    padding: 0 15px;
  }

  .our-skill h3:before {
    left: 12rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:480px) {
  .our-skill h3:before {
    left: 10rem !important;
    top: 2rem;
  }

  .our-skill .our-skill-area {
    padding: 0 15px;
  }

  .our-skill h3 {
    font-size: 22px;
    line-height: 40px;
    padding: 0 15px;
  }

  .our-skill h4 {
    font-size: 14px;
    line-height: 18px;
    padding: 7px 18px;
    margin: 0 auto 10px;
  }

  .our-skill .our-skill-area .skill-box h4 {
    font-size: 27px;
    line-height: 22px;
    padding: 19px 0 0px;
  }

}

@media only screen and (max-width:430px) {
  .our-skill h3:before {
    left: 10rem !important;
    top: 2rem;
  }
}

@media only screen and (max-width:393px) {
  .our-skill h3:before {
    left: 8rem !important;
    top: 2rem;
  }
}

@media only screen and (max-width:360px) {
  .our-skill .our-skill-area .skill-box {
    width: 100%;
  }

}

@media only screen and (max-width:280px) {
  .our-skill h3:before {
    left: 7rem !important;
    top: 1.5rem;
  }

}


/* ===============PLACEMENT======================== */
.placement {
  background: url(../images/homepage/placement-bg.jpg) no-repeat center center;
  background-size: cover;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  text-align: center;
}

.placement-area {
  width: 40%;
}

.placement-area h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--white);
}

.placement-area p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--white);
  padding: 30px 0;
  text-transform: capitalize;
}

.placement-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 15px 25px;
  background: var(--placement-btn);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
}

.placement-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

@media only screen and (max-width:1024px) {
  .placement {
    padding: 80px 0;
  }

  .placement-area h2 {
    font-size: 30px;
    line-height: 35px;
  }

  .placement-area {
    width: 80%;
  }

  .placement-area p {
    font-size: 15px;
    line-height: 25px;
    padding: 30px 0;
  }

  .placement-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 12px 20px;
  }
}

@media only screen and (max-width:480px) {
  .placement-area h2 {
    font-size: 27px;
    line-height: 36px;
  }

  .placement {
    padding: 80px 0;
  }

  .placement-area {
    width: 90%;
  }

  .placement-btn {
    font-size: 13px;
    line-height: 18px;
    padding: 10px 20px;
  }
}

/* ===============BLOG======================== */

.blog {
  margin: 20px 0;
}

.blog-box-carousel-margin {
  margin: 80px 0;
}


.view-blog-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 15px 25px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
}

.view-blog-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.blog .blog-heading h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 40px 0;
}

/* .blog .blog-heading h3:before {
  position: absolute;
  content: "";
  left: 6rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.blog .blog-heading h3 span {
  color: var(--banner-text-light-blue);
}

.blog .blog-heading div>span {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  background: var(--thousand-course);
  display: inline-block;
  padding: 8px 22px;
  border-radius: 5px;
}


.blog-box-pic {
  width: 100% !important;
  border-radius: 4px;
}


.blog-box-carousel {
  border: 1px solid var(--grey-border);
  padding: 15px;
  border-radius: 15px;
  margin-bottom: 40px;
}

.blog-box-carousel .blog-text {
  position: absolute;
  top: 25rem;
  right: 0;
  left: 2rem;
  width: 98%;
}

.blog-box-carousel-pic {
  width: 100% !important;
  border-radius: 4px;
}


.blog-box-carousel .blog-text h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 15px 0 15px;
}

.blog-box-carousel .blog-text h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--white);
  width: 80%;
}

.blog-box-carousel .blog-text ul {
  display: flex;
  padding: 15px 0 0px 0;
}

.blog-box-carousel .blog-text ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--white);
  padding: 0 0 0 25px;
  margin: 0 40px 0 0;
}

.blog-box-carousel .blog-text ul .admin {
  background: url(../images/homepage/blog-icon-admin.svg) no-repeat 0% 0%;
}

.blog-box-carousel .blog-text ul .date {
  background: url(../images/homepage/blog-icon-calender.svg) no-repeat 0% 0%;
}


@media only screen and (max-width:1368px) {

  /* .blog-box-carousel .blog-text {
    top: 39rem;
  } */
  .blog-box-carousel .blog-text {
    top: 21rem;
  }

}

@media only screen and (max-width:1180px) {

  .blog-box-carousel .blog-text {
    top: 31rem;
  }

}

@media only screen and (max-width: 1024px) {
  .blog {
    margin: 20px 0;
  }

  .blog-box .blog-text h5 {
    font-size: 15px;
    line-height: 23px;
  }
  .blog-box-carousel .blog-text {
    top: 15rem;
  }



  .blog-box .blog-text {
    position: absolute;
    top: 15rem !important;
    right: 0;
    left: 2rem;
    width: 100%;
  }

  .blog-box .blog-text h4 {
    font-size: 14px;
    line-height: 20px;
    padding: 8px 18px;
    margin: 15px 0 15px;
  }

  .blog-box .blog-text ul li {
    font-size: 14px;
    line-height: 20px;
    padding: 0 0 0 21px;
    margin: 0 28px 0 0;
  }

  .view-blog-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 12px 18px;
  }

  .blog .blog-heading div>span {
    font-size: 15px;
    line-height: 18px;
    padding: 8px 16px;
  }

  .blog .blog-heading h3 {
    font-size: 30px !important;
    line-height: 35px;
  }

}

@media only screen and (max-width:932px) {
  .blog {
    margin: 20px 0;
  }

  .blog-box {
    display: none;
  }

  .blog-box-carousel {
    display: block !important;
    margin: 0 0 50px 0;
  }

  .blog-box-carousel .blog-text {
    top: 18rem;
    right: 0
  }

  .blog-box-carousel-margin {
    margin: 60px 0;
  }


}

@media only screen and (max-width:915px) {

  .blog-box-carousel .blog-text{
    top:6rem;
  }
  .blog-box-carousel .blog-text ul{
    flex-direction: column;
  }
  .blog-box-carousel .blog-text ul li{
  margin:15px 0 0 0;
  }

}


/* 
@media only screen and (max-width:768px) {
  .blog-box-carousel .blog-text {
    top: 18rem;
    right: 0
  }
} */




@media only screen and (max-width:745px) {
  .blog-box-carousel .blog-text h4 {
    font-size: 13px;
    line-height: 15px;
    font-weight: 600;
  }

  .blog-box-carousel .blog-text {
    top: 8rem !important;
    right: 0;
  }

  .blog-box-carousel .blog-text ul {
    flex-direction: column;
  }

  .blog-box-carousel .blog-text ul li {
    margin: 15px 0 0 0;

  }
}



@media only screen and (max-width:736px) {

  .blog-box-carousel .blog-text {
    top: 7.5rem;
    right: 0
  }

  .blog-box-carousel .blog-text h4 {
    font-size: 15px;
    line-height: 18px;
    padding: 6px 17px;
  }

  .blog-box-carousel .blog-text h5 {
    font-size: 16px;
    line-height: 24px;
  }

  .blog-box-carousel .blog-text ul {
    flex-direction: column;
  }

  .blog-box-carousel .blog-text ul li {
    margin: 15px 0 0 0;
  }
}

@media only screen and (max-width:720px) {

  .blog-box-carousel .blog-text{
    top: 34.5rem !important;
  }

}



@media only screen and (max-width:667px) {
  .blog-box-carousel .blog-text{
    top: 35rem !important;
  }

}

@media only screen and (max-width:640px) {
  .blog-box-carousel .blog-text{
    top: 35rem !important;
  }

}


@media only screen and (max-width:540px) {

  .blog-box-carousel .blog-text {
    top: 31rem !important;
    right: 0;
  }

  .blog-box-carousel-margin {
    padding: 0 15px;
  }

  .blog-box-carousel .blog-text {
    top: 32.5rem;
    right: 0;
  }

}

@media only screen and (max-width:430px) {
  .blog-heading {
    flex-direction: column;
  }

  .blog-box-carousel .blog-text {
    top: 20rem !important;
    right: 0;
  }

  .blog .blog-heading div>span {
    font-size: 14px;
    line-height: 20px;
    padding: 7px 18px;
  }

  .blog .blog-heading h3 {
    font-size: 22px !important;
    line-height: 28px;
  }

  /* .blog .blog-heading h3:before {
    left: 3rem;
    top: 2rem;
  } */

  .view-blog-btn {
    font-size: 13px;
    line-height: 16px;
    padding: 11px 20px;
    margin: 20px 0 0 0;
  }

  .blog-box-carousel .blog-text ul li {
    font-size: 14px;
    line-height: 20px;
  }


}

@media only screen and (max-width:393px) {
  .blog-box-carousel .blog-text {
    top: 18rem !important;
    right: 0;
  }

}


@media only screen and (max-width:375px) {
  .blog-box-carousel .blog-text {
    top: 18rem !important;
    right: 0;
  }

}


@media only screen and (max-width:360px) {
  .blog-box-carousel .blog-text {
    top: 16rem !important;
    right: 0;
  }

}



@media only screen and (max-width:280px) {
  .blog-box-carousel .blog-text {
    top: 8rem !important;
    right: 0;
  }

  .blog-box-carousel .blog-text h4 {
    font-size: 13px;
    line-height: 16px;
    padding: 6px 17px;
  }

  .blog-box-carousel .blog-text h5 {
    font-size: 15px;
    line-height: 23px;
  }

  .blog-box-carousel .blog-text ul {
    padding: 5px 0 0px 0;
  }


}



/* ================================FOOTER================================== */
footer .footer-area {
  /* background: var(--footer-bg); */
  background: var(--blue-top-head);
  padding: 80px 0px;
}

footer .footer-area p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--white);
  margin-top: 25px;
}

footer .footer-area h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 25px;
  color: var(--white);
  font-weight: 400;
}

footer .footer-area ul li a {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 40px;
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
}

footer .footer-area ul li a:hover {
  color: var(--bannertext);
}

footer .footer-area ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 25px;
  color: var(--white);
  font-weight: 400;
  text-decoration: none;
}

footer .footer-area .quick-link {
  padding: 0 0 0 100px;
}

footer .footer-area .follow-us img {
  margin: 10px 10px 0 0;
}

footer .copyright {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 60px;
  color: var(--white);
  font-weight: 400;
  text-align: center;
  background: var(--copyright-bg);
  margin-bottom: 0;
}

footer .follow-us a img:hover {
  transform: rotateY(360deg);
}

.footer-submit-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 13px 15px;
  background: var(--footer-bg);
  border-radius: 6px;
  color: var(--white);
  margin: 20px 0 0 0;
  transition: all .6s ease;
}

.footer-submit-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}


@media only screen and (max-width: 1180px) {
  footer .follow-us {
    padding: 25px 0px 0px 100px;
  }

  footer .contact-us {
    padding: 25px 0px 0px 0px;
  }

}

@media only screen and (max-width: 1024px) {
  footer .footer-area {
    padding: 80px 20px;
  }

  footer .footer-area .quick-link {
    padding: 0 0 0 100px;
  }

  footer .footer-area .follow-us {
    padding: 30px 0 0 100px;
  }

  footer .footer-area .contact-us {
    padding: 50px 0 0 0px;
  }
}

@media only screen and (max-width:768px) {
  footer .footer-area {
    padding: 80px 30px;
  }

}

@media only screen and (max-width:540px) {

  footer {
    text-align: center;
  }

  footer .footer-area .quick-link {
    padding: 20px 0 0 0px;
  }

  footer .footer-area .follow-us {
    padding: 30px 0 0 0px;
  }

  footer .footer-logo-part {
    padding-bottom: 30px;
    padding-left: 0px !important;
  }

}

@media only screen and (max-width:480px) {
  footer .footer-logo-part {
    padding-bottom: 30px;
    padding-left: 0px;
  }

  footer .footer-area {
    padding: 60px 30px;
  }

  footer .copyright {
    font-size: 13px;
    line-height: 20px;
    padding: 20px 15px;
  }

  footer .footer-area .contact-us {
    padding: 30px 0 0 0px;
  }

  .footer-submit-btn {
    font-size: 13px;
    line-height: 18px;
    padding: 10px 16px;
    margin: 20px 0 0 0;

  }


}

/* ===========ABOUT PAGE========================= */
.about-page-banner {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  min-height: 350px;
}

.inner-banner-text {
  padding: 8rem 0;
}

.inner-banner-text h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--white);
}

.inner-banner-text ul {
  display: flex;
  margin: 15px 0 0 0;
}

.inner-banner-text ul li {
  color: var(--white);
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
}

@media only screen and (max-width:1024px) {

  .inner-banner-text h1 {
    font-size: 30px;
    line-height: 25px;
  }

  .about-page-banner {
    min-height: 100px !important;
  }

  .inner-banner-text {
    padding: 6rem 0;
  }
}

@media only screen and (max-width:540px) {
  .inner-banner-text {
    padding: 4rem 15px;
  }
}

@media only screen and (max-width:480px) {
  .about-page-banner {
    min-height: 100px !important;
  }

  .inner-banner-text {
    padding: 4rem 15px;
  }

  .inner-banner-text h1 {
    font-size: 28px;
    line-height: 35px;
  }

  .inner-banner-text ul li {
    font-size: 14px;
    line-height: 22px;
  }

  .inner-banner-text ul {
    margin: 6px 0 0 0;
  }
}



/* ------- ABOUT EDGGI---------------- */
.about-edggi {
  margin: 80px 0;
}

.about-edggi .about-page .about-pic{
  float: right;
  padding:30px;
}

.about-edggi h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 25px 0;
}


.about-edggi h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--banner-text-deep-blue);
  padding: 0px 0 5px;
}

.about-edggi p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  padding: 0 0 20px 0;
  text-align: justify;
}


.about-edggi ul li{
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
}

.about-edggi .bxs-circle{
  margin: 0 0 0 0;
  font-size: 12px;
  line-height:15px;
}

.about-edggi-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 18px 20px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  margin: 10px 0 0 0;
}

.about-edggi-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}
.about-edggi-btn img{
  width: auto;
}

@media only screen and (max-width:1024px) {
  .about-edggi {
    margin: 50px 0;
  }

  .about-edggi h2 {
    font-size: 30px;
    line-height: 35px;
  }


  .about-edggi h4 {
    font-size: 18px;
    line-height: 26px;
  }

}

@media only screen and (max-width:480px) {

.about-edggi{
  padding: 0 15px;
}

  .about-edggi h2 {
    font-size: 22px;
    line-height: 28px;
    padding: 0 0 20px 0;
  }
  

  .about-founder-text-part h4 {
    font-size: 18px;
    line-height: 26px;
  }

  .about-founder-text-part p {
    padding: 0 0 0px 0;
  }

  .about-edggi-btn {
    font-size: 13px;
    line-height: 14px;
    padding:14px 20px;
  }

}


/* ------- About Page Mission---------------- */
.about-mission {
  display: flex;
  justify-content: space-between;
}

.about-mission>div {
  width: 49%;
}

.about-mission>div img {
  width: 100%;
}

.about-mission .mission-1 {
  display: flex;
  justify-content: space-between;
}

.about-mission .mission-1>div {
  width: 35%;
}

.about-mission .mission-1>div img {
  width: 100%;
  height: 100%;
}

.about-mission .mission-1>div+div {
  width: 65%;
  background: url(../images/aboutpage/vision-bg.jpg) no-repeat;
  background-size: cover;
  padding: 60px 30px 40px 30px;
  justify-content: center;
  align-items: center;
}

.about-mission .mission-1>div+div h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 500;
  color: var(--white);
}

.about-mission .mission-1>div+div p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  padding: 15px 0 0 0;
  color: var(--white);
  
}


.about-mission .mission-2 {
  display: flex;
  justify-content: space-between;
}

.about-mission .mission-2>div {
  width: 35%;
}

.about-mission .mission-2>div img {
  width: 100%;
  height: 100%;
}

.about-mission .mission-2>div+div {
  width: 65%;
  background: url(../images/aboutpage/mission-bg.jpg) no-repeat;
  background-size: cover;
  padding: 60px 30px 40px 30px;
  justify-content: center;
  align-items: center;
}

.about-mission .mission-2>div+div h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 30px;
  line-height: 35px;
  font-weight: 500;
  color: var(--white);
}

.about-mission .mission-2>div+div p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  padding: 15px 0 0 0;
  color: var(--white);
}

@media only screen and (max-width:1024px) {
  .about-mission .mission-1 {
    flex-direction: column;
  }

  .about-mission .mission-1>div {
    width: 100%;
  }

  .about-mission .mission-1>div+div {
    width: 100%;
    padding: 30px 20px 20px 20px;
    min-height: 200px;
  }

  .about-mission .mission-1>div+div h3 {
    font-size: 25px;
    line-height: 30px;
  }

  .about-mission .mission-1>div+div p {
    font-size: 17px;
    line-height: 25px;
    padding: 15px 0 0 0;
  }

  .about-mission .mission-2 {
    flex-direction: column;
  }

  .about-mission .mission-2>div {
    width: 100%;
  }

  .about-mission .mission-2>div+div {
    width: 100%;
    padding: 30px 20px 20px 20px;
    min-height: 200px;
  }

  .about-mission .mission-2>div+div h3 {
    font-size: 24px;
    line-height: 30px;
  }

  .about-mission .mission-2>div+div p {
    font-size: 17px;
    line-height: 25px;
    padding: 15px 0 0 0;
  }

}

@media only screen and (max-width:540px) {
  .about-mission {
    padding: 0 15px;
  }

}

@media only screen and (max-width:480px) {
  .about-mission {
    padding: 0 15px;
  }

  .about-mission .mission-1>div+div h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .about-mission .mission-2>div+div h3 {
    font-size: 20px;
    line-height: 26px;
  }

  .about-mission .mission-1>div+div p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    padding: 15px 0 0 0;
  }

  .about-mission .mission-2>div+div p {
    font-size: 16px;
    line-height: 26px;
    font-weight: 400;
    padding: 15px 0 0 0;
  }

  .about-mission .mission-2>div+div {
    min-height: 247px;
  }

  .about-mission .mission-1>div+div {
    min-height: 247px;
  }

}

@media only screen and (max-width:393px) {

  .about-mission {
    flex-direction: column;
  }

  .about-mission>div {
    width: 100%;
  }

  .about-mission>div img {
    width: 100%;
  }

  .about-mission .mission-1 {
    flex-direction: column;
  }

  .about-mission .mission-1>div {
    width: 100%;
  }

  .about-mission .mission-1>div img {
    width: 100%;
    height: 100%;
  }


  .about-mission .mission-2 {
    flex-direction: column;
    margin: 20px 0 0 0;
  }

  .about-mission .mission-2>div {
    width: 100%;
  }

  .about-mission .mission-2>div img {
    width: 100%;
    height: 100%;
  }

  .about-mission .mission-2>div+div {
    min-height: 169px !important;
  }

  .about-mission .mission-1>div+div {
    min-height: 200px !important;
  }

}

@media only screen and (max-width:375px) {
  .about-mission .mission-2>div+div {
    min-height: 273px;
  }

}

/* ------- About Page Founder---------------- */
.about-founder {
  margin: 80px 0;
}

.about-page .about-pic{
  float: right;
  padding:25px;
}



.about-founder h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  /* text-align: center;
  padding: 0 0 50px 0; */
}

.about-founder h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  text-align: center;
  padding: 0 0 50px 0;
}


.about-founder h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 22px;
  line-height: 30px;
  font-weight: 500;
  color: var(--banner-text-deep-blue);
  padding: 0px 0 20px;
}

.about-founder p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  padding: 0 0 5px 0;
  text-align: justify;
}
.about-founder ul li{
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
}

.about-founder .bxs-circle{
  margin: 0 0 0 0;
  font-size: 12px;
  line-height:15px;
}



@media only screen and (max-width:1024px) {
  .about-founder {
    margin: 50px 0;
  }

  .about-founder h2 {
    font-size: 30px;
    line-height: 35px;
  }


  .about-founder h4 {
    font-size: 18px;
    line-height: 26px;
  }

}

@media only screen and (max-width:480px) {

.about-founder{
  padding: 0 15px;
}

  .about-founder h2 {
    font-size: 22px;
    line-height: 28px;
    padding: 0 0 0 0;
  }
  

  .about-founder-text-part h4 {
    font-size: 18px;
    line-height: 26px;
  }

  .about-founder-text-part p {
    padding: 0 0 0px 0;
  }

}


/* ------- About Page Pillars---------------- */
.our-pilar {
  background: var(--achievement-bg);
  padding: 80px 0;
}

.our-pilar h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 600;
  color: var(--banner-text-light-blue);
  background: var(--achievement-text-bg);
  padding: 8px 22px;
  border-radius: 5px;
  display: table;
  margin: 0 auto 25px;
}

.our-pilar h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  text-align: center;
  position: relative;
}

/* .our-pilar h3:before {
  position: absolute;
  content: "";
  left: 50rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.our-pilar h3 span {
  color: var(--banner-text-light-blue);
}

.our-pilar .our-pilar-area .pilar-box h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 25px;
  line-height: 30px;
  font-weight: 600;
  color: var(--pillar-text);
  text-align: center;
  padding: 25px 0 0 0;
}

.our-pilar .our-pilar-area {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.our-pilar .our-pilar-area .pilar-box {
  width: 24%;
  background: var(--white);
  border-radius: 10px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  margin-top: 50px;
  padding: 50px;
  text-align: center;
}


@media only screen and (max-width:1550px) {
  .our-pilar h3:before {
    left: 47rem;
    top: 2.5rem;
  }
}

@media only screen and (max-width:1500px) {
  .our-pilar h3:before {
    left: 47rem;
    top: 2.5rem;
  }
}

@media only screen and (max-width:1400px) {
  .our-pilar h3:before {
    left: 43rem;
    top: 2.5rem;
  }
}

@media only screen and (max-width:1280px) {
  .our-pilar h3:before {
    left: 39rem;
    top: 2.5rem;
  }
}

@media only screen and (max-width:1180px) {
  .our-pilar h3:before {
    left: 37rem;
    top: 2.5rem;
  }
}


@media only screen and (max-width:1024px) {
  .our-pilar {
    padding: 50px 0;
  }

  .our-pilar h4 {
    font-size: 15px;
    line-height: 20px;
    padding: 8px 16px;
  }

  .our-pilar h3 {
    font-size: 30px;
    line-height: 35px;
    padding: 0 0 30px 0;
  }

  .our-pilar .our-pilar-area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .our-pilar h3:before {
    left: 32rem !important;
    top: 2.5rem;
  }

  .our-pilar .our-pilar-area .pilar-box {
    margin: 30px 0 0 0;
    width: 48%;
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
    cursor: pointer;
  }

  .our-pilar h3:before {
    left: 27rem;
    top: 2.5rem;
  }
}

@media only screen and (max-width:932px) {
  .our-pilar h3:before {
    left: 30rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:896px) {
  .our-pilar h3:before {
    left: 28rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:800px) {
  .our-pilar h3:before {
    left: 25rem !important;
    top: 2.5rem;
  }
}


@media only screen and (max-width:768px) {
  .our-pilar h3:before {
    left: 24rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:667px) {
  .our-pilar h3:before {
    left: 21rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:540px) {
  .our-pilar h3:before {
    left: 16rem !important;
    top: 2.5rem;
  }

  .our-pilar-area {
    padding: 0 15px;
  }
}

@media only screen and (max-width:480px) {

  .our-pilar h4 {
    font-size: 14px;
    line-height: 18px;
    padding: 7px 18px;
    margin: 0 auto 15px;
  }

  .our-pilar h3 {
    font-size: 22px;
    line-height: 28px;
    padding: 0 0 15px 0;
  }

  .our-pilar h3:before {
    left: 14rem !important;
    top: 2.5rem;
  }

  .our-pilar .our-pilar-area {
    padding: 0 15px;
  }

  .our-pilar h3 {
    font-size: 27px;
    line-height: 45px;
  }

  .our-pilar .our-pilar-area .pilar-box h5 {
    font-size: 20px;
    line-height: 24px;
    padding: 20px 0 0 0;
  }

}

@media only screen and (max-width:393px) {
  .our-pilar h3:before {
    left: 11rem !important;
    top: 2.5rem;
  }
}

@media only screen and (max-width:375px) {
  .our-pilar h3:before {
    left: 11rem !important;
    top: 2.5rem;
  }

  .our-pilar .our-pilar-area {
    flex-direction: column;
  }

  .our-pilar .our-pilar-area .pilar-box {
    width: 100%;
  }

}

@media only screen and (max-width:280px) {
  .our-pilar h3:before {
    left: 7rem !important;
    top: 2.5rem;
  }
}

/* ------- About Page What Do---------------- */
.about-what-do {
  background: url(../images/aboutpage/edggi-stand-pic.jpg) no-repeat center center;
  padding: 100px 0;
  display: flex;
  justify-content: center;
  text-align: center;
}

.about-what-do-area {
  width: 60%;
}

.about-what-do-area h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--white);
  position: relative;
}

/* .about-what-do-area h2:before {
  position: absolute;
  content: "";
  left: 26rem;
  top: 3rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.about-what-do-area p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 300;
  color: var(--white);
  padding: 50px 0;
  text-transform: capitalize;
}

@media only screen and (max-width:1400px) {
  /* .about-what-do-area h2:before {
    left: 23rem;
    top: 3rem;
  } */

}

@media only screen and (max-width:1180px) {
  /* .about-what-do-area h2:before {
    left: 19rem;
    top: 3rem;
  } */

}


@media only screen and (max-width:1024px) {

  .about-what-do {
    padding: 80px 0;
  }

  .about-what-do-area h2 {
    font-size: 30px;
    line-height: 35px;
  }

  /* .about-what-do-area h2:before {
    left: 22rem;
    top: 2.8rem;
  } */

  .about-what-do-area {
    width: 80%;
  }

  .about-what-do-area p {
    font-size: 15px;
    line-height: 25px;
    padding: 30px 0;
  }
}

@media only screen and (max-width:932px) {
  /* .about-what-do-area h2:before {
    left: 19rem;
    top: 2.5rem;
  } */

}

@media only screen and (max-width:768px) {
  /* .about-what-do-area h2:before {
    left: 16rem;
    top: 2.8rem;
  } */

}

@media only screen and (max-width:667px) {
  /* .about-what-do-area h2:before {
    left: 14rem;
    top: 2.5rem;
  } */

}

@media only screen and (max-width:540px) {
  /* .about-what-do-area h2:before {
    left: 12rem;
    top: 2.5rem;
  } */

}



@media only screen and (max-width:480px) {
  .about-what-do-area h2 {
    font-size: 27px;
    line-height: 36px;
  }

  /* .about-what-do-area h2:before {
    left: 11rem;
    top: 2.5rem;
  } */

  .about-what-do {
    padding: 80px 0;
  }

  .about-what-do-area {
    width: 90%;
  }

}

@media only screen and (max-width:430px) {
  /* .about-what-do-area h2:before {
    left: 10rem;
    top: 2.5rem;
  } */

}

@media only screen and (max-width:393px) {
  /* .about-what-do-area h2:before {
    left: 8rem;
    top: 2.5rem;
  } */

}

@media only screen and (max-width:375px) {
  .about-what-do-area h2 {
    font-size: 26px;
    line-height: 36px;
  }

  /* .about-what-do-area h2:before {
    left: 8rem;
    top: 2.5rem;
  } */


}

@media only screen and (max-width:360px) {
  /* .about-what-do-area h2:before {
    left: 8rem;
    top: 2rem;
  } */

}


.about-page-benefit {
  margin: 80px 0  50px !important;
}


@media only screen and (max-width:1024px) {
  .about-page-benefit {
    margin: 50px 0 !important;
  }

}



/* ===========JOB VACANCY PAGE========================= */
.job-vacancy {
  margin: 80px 0;
}

.job-vacancy-area {
  display: flex;
  justify-content: space-between;
}

.job-vacancy-area .job-filter {
  /* width: 26%; */
  width: 27%;
}

.job-vacancy-area .job-details {
  width: 71%;
}

.job-details-area {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.job-details-area div {
  width: 32%;
  padding: 15px 10px 25px;
  border-radius: 10px;
  border: 1px solid var(--grey-border);
  margin: 20px 10px 0 0;
}


.job-details .job-details-area .job-pic {
  width: 100%;
  border-radius: 4px;
}

.job-details-area>div h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 20px 0 0 0;
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);

}

.job-details-area>div h4 a {
  text-decoration: none;
  color: var(--recent-course-blue-deep);
}


.job-details-area ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 25px;
  font-weight: 400;
  color: var(--recent-course-para);
  padding: 0 0 0 25px;
  margin: 10px 0 0 0;
}

.job-details-area .company {
  background: url(../images/jobvacancypage/job-vacancy-icon-1.svg) no-repeat 0% 50%;
}

.job-details-area .exp {
  background: url(../images/jobvacancypage/job-vacancy-icon-2.svg) no-repeat 0% 50%;
}

.job-details-area .location {
  background: url(../images/jobvacancypage/job-vacancy-icon-3.svg) no-repeat 0% 50%;
}

.job-filter .job-category {
  border: 1px solid var(--grey-border);
  border-radius: 10px;
  background: var(--white);
  padding: 30px 20px;
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
  margin: 20px 0 0 0;
}

.job-filter .job-category h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 12px 0;
}

.job-filter .job-category h3:before {
  position: absolute;
  content: '';
  background: url(../images/jobvacancypage/blue-text-underline.png) no-repeat 0% 0%;
  width: 59px;
  height: 5px;
  top: 34px;
  right: 0;
  left: 0;
}

.job-filter .job-category input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border: 1px solid var(--grey-border);
  border-radius: 4px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 4px 0px;
  margin: 20px 0 0 0;
}

.job-filter .job-category label {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px !important;
  line-height: 18px;
  font-weight: 300;
  color: var(--recent-course-para);
  margin:19px 0 0 10px;
}

@media only screen and (max-width:1180px) {
  .job-vacancy {
    margin: 50px 0;
  }

  .job-details-area div {
    width: 48%;
  }

  .job-vacancy-area .job-filter {
    width: 35%;
  }

  .job-vacancy-area .job-details {
    width: 63%;
  }
}

@media only screen and (max-width:932px) {
  .job-details-area div {
    width: 100%;
  }

  .job-vacancy-area .job-filter {
    width: 40%;
  }

  .job-vacancy-area .job-details {
    width: 56%;
  }

}



@media only screen and (max-width:736px) {
  .job-details-area>div h4 {
    font-size: 16px;
    line-height: 22px;
  }

  .job-filter .job-category h3 {
    font-size: 18px;
    line-height: 30px;
  }

  .job-filter .job-category label {
    font-size: 16px;
    line-height: 22px;
  }

  .job-vacancy-area {
    flex-direction: column;
    padding: 0 15px;
  }

  .job-vacancy-area .job-filter {
    width: 100%;
  }

  .job-vacancy-area .job-details {
    width: 100%;
  }

  .job-details-area {
    flex-direction: column;
  }

  .job-details-area div {
    width: 100%;
  }

}

@media only screen and (max-width:280px) {
  .job-filter .job-category {
    padding: 30px 10px;
  }

}

/* ===========SELF ASSESSMENT PAGE========================= */

.assessment-duration {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 400;
  color: var(--recent-course-para);
  padding: 15px 0;
}

.job-details .job-details-area .assess-pic {
  width: 100%;
  border-radius: 4px;
}


.job-details .job-details-area .enroll-now-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  /* display: table;
  margin: 0 auto; */
  padding: 14px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  float: left;
  margin: 5px 0 !important;
}

.job-details .job-details-area .enroll-now-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.arrow-on-btn {
  width: 20px;
  height: 12px;
}

.job-details-area>div h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--recent-course-para);
  margin: 15px 0 0 0;
}


/* ===========ONLINE COURSE PAGE========================= */
.job-details-area>div .online-course-heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);
  margin: 20px 0;
  padding: 10px 15px;
  border-radius: 10px;
}

.job-details-area>div .online-course-sub-heading {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--recent-course-para);
  margin-top: 0;
  margin-bottom: 15px;
}



.online-course-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  /* display: table;
  margin: 0 auto; */
  padding: 14px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  float: left;
  margin: 5px 0 !important;
}

.online-course-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}


@media only screen and (max-width:1024px) {
  .online-course-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 12px 18px;
  }
}

@media only screen and (max-width:480px) {
  .job-details-area>div .online-course-heading {
    font-size: 16px;
    line-height: 22px;
  }

  .online-course-btn {
    font-size: 14px;
    line-height: 15px;
    padding: 12px 22px;
  }

}

/* ===========JOB VACANCY DETAILS PAGE========================= */
.job-vacancy-details {
  margin: 80px 0;
}

.job-vacancy-details h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 35px 0;
}

/* .job-vacancy-details h1:before {
  position: absolute;
  content: "";
  left: 12rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.job-vacancy-details h1 span {
  color: var(--banner-text-light-blue);
}


.job-vacancy-details h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding:15px 0 5px 0;
}


.job-vacancy-details h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding: 0 0 15px 0;
}



.job-vacancy-details ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  background: url(../images/jobvacancypage/job-vacancy-details-dot-grey.png) no-repeat 0% 42%;
  padding: 0 0 0 15px;
}
.job-vacancy-details p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  /* color: var(--paragraph);
  background: url(../images/jobvacancypage/job-vacancy-details-dot-grey.png) no-repeat 0% 42%;
  padding: 0 0 0 15px; */
}


.job-upload-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 13px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  margin: 40px 0 0 0;
}

.job-upload-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

@media only screen and (max-width:1024px) {
  .job-vacancy-details {
    margin: 50px 0;
  }

  .job-vacancy-details h1 {
    font-size: 30px;
    line-height: 35px;
    padding: 0 0 35px 0;
  }


}

@media only screen and (max-width:540px) {
  .job-vacancy-details {
    padding: 0 15px;
  }
}

@media only screen and (max-width:480px) {
  .job-vacancy-details {
    padding: 0 15px;
  }

  .job-vacancy-details h1 {
    font-size: 22px;
    line-height: 28px;
  }

  /* .job-vacancy-details h1:before {
    left: 7rem;
    top: 2rem;
  } */

  .job-upload-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 10px 17px;
    margin: 30px 0 0 0;
  }


}

/* ===========CONTACT PAGE========================= */

.mySwiper5 {
  display: none !important;
}

.contact-information h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 35px 0;
  text-align: center;
}

/* .contact-information h1:before {
  position: absolute;
  content: "";
  left: 41rem;
  top: 2.5rem;
  background: url(../images/homepage/banner-text-sign.png) no-repeat 0 0%;
  width: 84px;
  height: 20px;
} */

.contact-information h1 span {
  color: var(--banner-text-light-blue);
}

.contact-page-form-bg h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 37px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  padding: 90px 0 0 40px;
}

.contact-information {
  padding: 80px 0;
}

.contact-information h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--paragraph);
  text-align: center;
}

.contact-information-area div {
  width: 32%;
  background: var(--white);
  border-radius: 2px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  text-align: center;
  padding: 80px;
}

.contact-information-area div:hover {
  border: 1px solid var(--recent-course-orange-deep);
}

.contact-information-area div h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--paragraph);
  text-align: center;
  padding: 12px 0;
}

.contact-information-area div h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--paragraph);
  text-align: center;
}

.contact-page-send-message div {
  width: 100%;
}

.contact-page-send-message .contact-pic {
  width: 100%;
  height: 100%;
}

.contact-page-form-bg {
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.contact-page-form-bg .contact-page-form-area {
  padding: 20px 0 0 40px;
  width: 85%;
}

.contact-page-form-area .form-input-area div {
  width: 49%;
  margin: 0 0 15px 0;
}

.contact-page-form-bg .contact-page-form-area form input[type="text"],
.contact-page-form-bg .contact-page-form-area form input[type="email"],
.contact-page-form-bg .contact-page-form-area form input[type="tel"] {
  width: 100%;
  height: 50px;
  border: 1px solid var(--grey-border);
  font-family: "Lexend Deca", sans-serif;
  font-size: 13px;
  line-height: 22px;
  font-weight: 400;
  color: var(--form-placeholder);
  text-indent: 10px;
  border-radius: 2px;
  outline: none;
}

.contact-page-form-bg .contact-page-form-area form textarea {
  width: 100%;
  height: 100px;
  border: 1px solid var(--grey-border);
  font-family: "Lexend Deca", sans-serif;
  font-size: 13px;
  line-height: 22px;
  font-weight: 400;
  color: var(--form-placeholder);
  text-indent: 10px;
  border-radius: 2px;
  outline: none;
  padding: 20px 0 0 0;
}

.contact-page-form-bg .contact-page-form-area form .form-submit-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 14px 15px;
  margin: 30px 0 0 0;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  border: none;
}

/* 
.contact-page-form-bg .contact-page-form-area form .form-submit-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 18px 25px;
  margin: 30px 0 0 0;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  border: none;
} */

.contact-page-form-bg .contact-page-form-area form .form-submit-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}


/* 
@media only screen and (max-width:1399px) and (min-width:1025px) {
  .contact-page-form-bg h2 {
    padding: 20px 0 0 40px;
  }
} */


@media only screen and (max-width:1368px) {
  /* .contact-information h1:before {
    left: 36rem;
    top: 2.5rem;
  } */
}

@media only screen and (max-width:1180px) {
  /* .contact-information h1:before {
    left: 30rem;
    top: 2.5rem;
  } */

  .contact-page-form-bg h2 {
    padding: 40px 0 0 40px;
  }

}

@media only screen and (max-width:1024px) {
  .contact-page-form-bg h2 {
    padding: 20px 0 0 40px;
  }

  .contact-page-form-bg .contact-page-form-area form .form-submit-btn {
    padding: 13px 21px;
    margin: 10px 0 0 0;
    font-size: 15px;
    line-height: 16px;
  }

}

@media only screen and (max-width:932px) {
  /* .contact-information h1:before {
    left: 23rem;
    top: 2.5rem;
  } */

  .contact-page-form-bg h2 {
    padding: 5px 0 0 40px;
  }

  .mySwiper5 {
    display: block !important;
  }

  .contact-information-area {
    display: none !important;
  }

  .contact-information-area-carousel {
    width: 100%;
    background: var(--white);
    border-radius: 2px;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    text-align: center;
    padding: 30px;
  }

  .contact-information-area-carousel h3 {
    font-family: "Lexend Deca", sans-serif;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    color: var(--paragraph);
    text-align: center;
    padding: 12px 0;
  }

  .contact-information-area-carousel h4 {
    font-family: "Lexend Deca", sans-serif;
    font-size: 16px;
    line-height: 22px;
    font-weight: 400;
    color: var(--paragraph);
    text-align: center;
  }


}

@media only screen and (max-width:896px) {

  .contact-page-send-message {
    flex-direction: column;
  }

  .contact-page-form-bg .contact-page-form-area {
    padding: 20px 15px 50px;
  }

  .contact-page-form-area .form-input-area div {
    width: 100%;
  }

  .contact-page-form-bg .contact-page-form-area form .form-submit-btn {
    font-size: 16px;
    line-height: 18px;
    padding: 15px 19px;
    margin: 25px 0 0 0;
  }

  .contact-page-send-message .contact-pic {
    width: 100%;
    height: 416px;
  }

  .contact-page-form-bg .contact-page-form-area {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .contact-page-form-bg h2 {
    text-align: center;
    padding: 30px 0 20px !important;
  }


}


@media only screen and (max-width:736px) {
  /* .contact-information h1:before {
    left: 18rem;
    top: 2rem;
  } */
}

@media only screen and (max-width:540px) {
  .mySwiper5 {
    padding: 0 15px !important;
  }
}


@media only screen and (max-width:480px) {
  /* .contact-information h1:before {
    left: 12rem;
    top: 2rem;
  } */

  .contact-information {
    padding: 50px 0;
  }

  .contact-information h3 {
    font-size: 16px;
    line-height: 15px;
  }

  .contact-information-area {
    padding: 0 15px;
  }

  .contact-information-area div {
    width: 100%;
  }

  .contact-information-area div h3 {
    font-size: 16px;
    line-height: 15px;
  }

  .contact-information-area div h4 {
    font-size: 15px;
    line-height: 22px;
  }

  .contact-information h1 {
    font-size: 22px;
    line-height: 28px;
  }

  .contact-information-area div img {
    width: 50px;
    height: 50px;
  }

  .contact-page-form-bg h2 {
    font-size: 22px;
    line-height: 28px;
    padding: 50px 0 0px !important;
  }

  .contact-page-form-bg .contact-page-form-area {
    padding: 20px 15px 50px;
  }

  .contact-page-form-area .form-input-area div {
    width: 100%;
  }

  .contact-page-form-bg .contact-page-form-area form .form-submit-btn {
    font-size: 14px !important;
    line-height: 18px !important;
    padding: 12px 18px !important;
    margin: 25px 0 0 0;
  }

  .contact-page-send-message .contact-pic {
    width: 100%;
    height: 250px;
  }


}

@media only screen and (max-width:280px) {
  /* .contact-information h1:before {
    left: 8rem;
    top: 2rem;
  } */
}


/* ===========BLOG DETAILS PAGE========================= */

.blog-details {
  margin: 80px 0;
}

.blog-details-area {
  display: flex;
  justify-content: space-between;
}

.blog-details-area .blog-details-comment {
  width: 72%;
}

.blog-details-area .blog-details-filter {
  width: 25%;
}

.blog-details-category {
  border: 1px solid var(--grey-border);
  border-radius: 10px;
  background: var(--white);
  padding: 30px 20px;
  /* box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; */
  box-shadow: rgba(99, 99, 99, 0.1) 0px 2px 4px 0px;
  margin: 20px 0 0 0;
}

.blog-details-category h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 20px;
  line-height: 30px;
  font-weight: 500;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 12px 0;
}

.blog-details-category h3:before {
  position: absolute;
  content: '';
  background: url(../images/jobvacancypage/blue-text-underline.png) no-repeat 0% 0%;
  width: 59px;
  height: 5px;
  top: 34px;
  right: 0;
  left: 0;
}

.blog-details-category input[type="checkbox"] {
  width: 15px;
  height: 15px;
  border: 1px solid var(--grey-border);
  border-radius: 4px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 4px 0px;
  margin: 20px 0 0 0;
}

.blog-details-category label {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 10px;
  font-weight: 300;
  color: var(--recent-course-para);
  margin: 0 0 0 5px;
}

.blog-details-comment .blog-details-pic {
  width: 100%;
  border-radius: 8px;
  margin: 20px 0 0 0;
}
/* 
.blog-details-comment h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  width: 70%;
  padding: 30px 0 15px;
} */


.blog-details-comment h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 30px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
/*  width: 70%; */
  padding: 30px 0 15px;
}


.blog-details-comment h2,h3,h4,h5,h6 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding:15px 0 5px 0;
}

/* .blog-details-comment ul {
  display: flex;
  padding: 15px 0 20px 0;
} */


.blog-details-comment ul {
  /* display: flex; */
  padding: 0px 0 20px 0;
}


.blog-details-comment ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--recent-course-para);
  padding: 0 0 0 0px;
  margin: 10px 40px 0 0;
}

.blog-details-comment ul .admin {
  background: url(../images/blogdetailspage/blogdetails-icon-admin.svg) no-repeat 0% 0%;
}

.blog-details-comment ul .date {
  background: url(../images/blogdetailspage/blogdetails-icon-calender.svg) no-repeat 0% 0%;
}





/* 
.blog-admin{} */

.blog-details-comment .blog-admin {
  display: flex;
  padding: 15px 0 20px 0;
}

.blog-details-comment .blog-admin {
  display: flex;
  padding: 15px 0 20px 0;
}

.blog-details-comment .blog-admin li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--recent-course-para);
  padding: 0 0 0 25px;
  margin: 10px 40px 0 0;
}

.blog-details-comment .blog-admin .admin {
  background: url(../images/blogdetailspage/blogdetails-icon-admin.svg) no-repeat 0% 0%;
}

.blog-details-comment .blog-admin .date {
  background: url(../images/blogdetailspage/blogdetails-icon-calender.svg) no-repeat 0% 0%;
}

.blog-details-comment p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
}

.blog-details-comment .social-icon {
  border-top: 1px solid var(--grey-border2);
  border-bottom: 1px solid var(--grey-border2);
  padding: 10px 0;
  margin: 25px 0;
  display: flex;
}

.blog-details-comment .social-icon h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: var(--benefit-heading);
  padding: 0 0 0 0 !important;
}

.blog-details-comment .social-icon a {
  margin: 0 4px;
}

/* .blog-details-comment h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 600;
  color: var(--benefit-heading);
} */

.blog-details-comment .user {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--grey-border2);
  padding: 35px 0;
}

.blog-details-comment .user .user-box {
  padding: 0 0 0 20px;
}

.blog-details-comment .user .user-box h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 400;
  color: var(--benefit-heading);
}

.blog-details-comment .user .user-box h6 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 400;
  color: var(--benefit-heading);
}

.blog-details-comment .user p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  width: 80%;
  padding: 15px 0 30px;
}

.blog-details-comment .user .reply-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 300;
  color: var(--reply-btn-text);
  background: var(--reply-btn-bg);
  padding: 7px 18px;
  margin: 20px 0 0 0;
  border-radius: 2px;
  text-decoration: none;
}

.blog-details-comment .post-comment h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 500;
  color: var(--benefit-heading);
  padding: 30px 0 20px;

}

.post-comment form textarea {
  height: 100px;
  border: 1px solid var(--post-comment-form-border);
  background: var(--post-comment-form-bg);
  border-radius: 2px;
  width: 100%;
  font-family: "Lexend Deca", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--post-comment-form-text);
  text-indent: 10px;
  padding: 10px 0 0 0;
  outline: 0;

}

.post-comment form .input-area {
  display: flex;
  justify-content: space-between;
}

.post-comment form .input-area input[type="text"],
.post-comment form .input-area input[type="email"] {
  width: 32%;
  height: 50px;
  border: 1px solid var(--post-comment-form-border);
  background: var(--post-comment-form-bg);
  border-radius: 2px;
  font-family: "Lexend Deca", sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 400;
  color: var(--post-comment-form-text);
  text-indent: 10px;
  margin: 10px 0 0 0;
  outline: 0;
}

.post-comment form .post-comment-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  padding: 13px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 2px;
  border: none;
  color: var(--white);
  transition: all .6s ease;
  margin: 40px 0 0 0;
}

.post-comment form .post-comment-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.blog-details-filter .recent-post {
  margin: 20px 0 0 0;
}

.blog-details-filter .recent-post .recent-post-pic {
  border-radius: 4px;
  margin: 0 15px 0 0;
  width: 86px;
  height: 80px;
}

.blog-details-filter .recent-post .recent-post-area {
  display: flex;
  justify-content: space-between;
}

.blog-details-filter .recent-post .recent-post-area h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 18px;
  line-height: 22px;
  font-weight: 300;
  color: var(--benefit-heading);
  padding: 0 0 15px 0;
}

.blog-details-filter .recent-post .recent-post-area p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 22px;
  font-weight: 300;
  color: var(--benefit-heading);
  padding: 0 0 0 20px;
  background: url(../images/blogdetailspage/recent-post-icon-calender.svg) no-repeat 0% 30%;
}


@media only screen and (max-width:1180px) {
  .blog-details-area .blog-details-filter {
    width: 28%;
  }

  .blog-details-area .blog-details-comment {
    width: 69%;
  }

}

@media only screen and (max-width:1024px) {
  .blog-details {
    margin: 50px 0;
  }

  .blog-details-area .blog-details-comment {
    width: 68%;
  }

  .blog-details-area .blog-details-filter {
    width: 28%;
  }

  /* .blog-details-comment h2 {
    font-size: 30px;
    line-height: 35px;
    width: 100%;
  } */
  .blog-details-comment h1 {
    font-size: 30px;
    line-height: 35px;
    width: 100%;
  }


  .post-comment form .post-comment-btn {
    font-size: 14px;
    line-height: 16px;
    padding: 11px 15px;
    margin: 30px 0 0 0;
  }

}

@media only screen and (max-width:932px) {

  .blog-details-area .blog-details-comment {
    width: 60% !important;
  }

  .blog-details-area .blog-details-filter {
    width: 35% !important;
  }

}

@media only screen and (max-width:768px) {

  .blog-details-filter .recent-post .recent-post-area {
    flex-direction: column;
  }

  .blog-details-filter .recent-post .recent-post-pic {
    border-radius: 4px;
    margin: 0 0px 0 0;
    width: 200px;
    height: 200px;
  }

  .blog-details-filter .recent-post .recent-post-area h4 {
    padding: 15px 0 12px 0;
  }

}

@media only screen and (max-width:736px) {
  .blog-details-area {
    flex-direction: column-reverse;
    padding: 0 15px;
  }

  .blog-details-area .blog-details-comment {
    width: 100% !important;
  }

  .blog-details-area .blog-details-filter {
    width: 100% !important;
  }

  .blog-details-filter .recent-post .recent-post-pic {
    width: 100%;
    height: 100%;
  }

}



@media only screen and (max-width:480px) {
  .blog-details-comment h1 {
    font-size: 22px;
    line-height: 28px;
  }

  /* .blog-details-comment h2 {
    font-size: 22px;
    line-height: 28px;
  } */

  /* .blog-details-category h3 {
    font-size: 18px;
    line-height: 30px;
  } */

  .blog-details-category label {
    font-size: 16px;
    line-height: 22px;
  }

  .post-comment form .post-comment-btn {
    font-size: 15px;
    line-height: 17px;
    margin: 30px 0 0 0;
  }

}

@media only screen and (max-width:375px) {

  .blog-details-comment .user {
    flex-direction: column;
  }

  .user-box {
    margin: 25px 0 0 0;
  }

}


/* ===========BLOG PAGE========================= */
.blog-page {
  margin: 80px 0;
}

.blog-page-area {
  display: flex;
  /* justify-content: space-between; */
  flex-wrap: wrap;
}

.blog-page-area .blog-page-box {
  width: 32%;
  border: 1px solid var(--grey-border);
  border-radius: 10px;
  margin: 20px 15px 0 0;
}

.blogpage-pic {
  width: 100%;
  border-radius: 5px 5px 0 0;
  height: 380px;
  object-fit: fill;
}


.blog-page-box .bottom-part {
  padding: 25px;
}

.blog-page-area .blog-page-box h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 22px;
  font-weight: 600;
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);
  display: inline-block;
  padding: 10px 15px;
  border-radius: 10px;
  margin: 0px 0 15px;
}
.blog-page-area .blog-page-box h4 a{
  color: var(--recent-course-blue-deep);
  background: var(--recent-course-blue-light);
  text-decoration: none;
}


.blog-page-area .blog-page-box h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 21px;
  font-weight: 600;
  color: var(--recent-course-para);
}

.blog-page-area .blog-page-box ul {
  display: flex;
  padding: 15px 0 0px 0;
}

.blog-page-area .blog-page-box ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 16px;
  line-height: 20px;
  font-weight: 400;
  color: var(--recent-course-para);
  padding: 0 0 0 25px;
  margin: 0 40px 0 0;
}

.blog-page-area .blog-page-box ul .admin {
  background: url(../images/blogdetailspage/blogdetails-icon-admin.svg) no-repeat 0% 0%;
}

.blog-page-area .blog-page-box ul .date {
  background: url(../images/blogdetailspage/blogdetails-icon-calender.svg) no-repeat 0% 0%;
}

@media only screen and (max-width:1180px) {
  .blog-page-area .blog-page-box ul li {
    margin: 0 12px 0 0;
  }

}


@media only screen and (max-width:1024px) {
  .blog-page {
    margin: 50px 0;
  }

  .blog-page-area .blog-page-box ul li {
    font-size: 14px;
    line-height: 20px;
    margin: 0 18px 0 0;
  }

 

}

@media only screen and (max-width:932px) {
  .blog-page-area .blog-page-box {
    width: 49%;
  }
}

@media only screen and (max-width:736px) {
  .blog-page-area .blog-page-box {
    width: 49%;
  }

  .blog-page-area .blog-page-box h4 {
    font-size: 15px;
    line-height: 20px;
    padding: 10px 20px;
    margin: 0px 0 15px;
  }


  .blog-page-area .blog-page-box ul {
    flex-direction: column;
    padding: 0px 0 0px 0;
  }

  .blog-page-area .blog-page-box ul li {
    padding: 0 0 0 25px;
    margin: 20px 0px 0px 0px;
  }

}

@media only screen and (max-width:540px) {
  .blog-page-area {
    padding: 0 15px;
  }

}


@media only screen and (max-width:480px) {
  .blog-page-area {
    padding: 0 15px;
  }

  .blog-page-area .blog-page-box {
    width: 100%;
  }

  .blog-page-box .bottom-part {
    padding: 25px 20px 25px 20px;
  }

  .blog-page-area .blog-page-box h4 {
    font-size: 15px;
    line-height: 20px;
    padding: 10px 20px;
    margin: 0px 0 15px;
  }

}

/* ===========COURSE DETAILS PAGE========================= */

.course-details {
  margin: 80px 0;
}

.course-details h1 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 35px;
  line-height: 40px;
  font-weight: 600;
  color: var(--banner-text-deep-blue);
  position: relative;
  padding: 0 0 35px 0;
}

.course-details h1 span {
  color: var(--banner-text-light-blue);
}


.course-details h2 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding:15px 0 5px 0;
}

.course-details h3 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding:15px 0 5px 0;
}

.course-details h4 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding: 0 0 15px 0;
}

.course-details h5 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding: 0 0 15px 0;
}
.course-details h6 {
  font-family: "Lexend Deca", sans-serif;
  font-size: 17px;
  line-height: 25px;
  font-weight: 600;
  color: var(--recent-course-para);
  padding: 0 0 15px 0;
}



.course-details ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  background: url(../images/jobvacancypage/job-vacancy-details-dot-grey.png) no-repeat 0% 42%;
  padding: 0 0 0 15px;
}

.course-upload-btn {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 18px;
  font-weight: 300;
  text-decoration: none;
  display: inline-block;
  padding: 13px 15px;
  background: var(--banner-text-light-blue);
  border-radius: 6px;
  color: var(--white);
  transition: all .6s ease;
  margin: 40px 0 0 0;
}

.course-upload-btn:hover {
  transform: translateY(-5px);
  background: var(--banner-text-deep-blue);
}

.course-details p{
  font-family: "Lexend Deca", sans-serif;
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
}

@media only screen and (max-width:1024px) {
  .course-details {
    margin: 50px 0;
  }

  .course-details h1 {
    font-size: 30px;
    line-height: 35px;
    padding: 0 0 35px 0;
  }


}

@media only screen and (max-width:540px) {
  .course-details {
    padding: 0 15px;
  }
  
  .course-details ul li {
    background: url(../images/jobvacancypage/job-vacancy-details-dot-grey.png) no-repeat 0% 37%;
}


}

@media only screen and (max-width:480px) {
  .course-details {
    padding: 0 15px;
  }

  .course-details h1 {
    font-size: 22px;
    line-height: 28px;
  }

  /* .course-details h1:before {
    left: 7rem;
    top: 2rem;
  } */

  .course-upload-btn {
    font-size: 14px;
    line-height: 18px;
    padding: 10px 17px;
    margin: 30px 0 0 0;
  }

  .course-details ul li {
     background: url(../images/jobvacancypage/job-vacancy-details-dot-grey.png) no-repeat 0% 37%;
  }

}


/* ===========COURSE LISTING PAGE========================= */

.online-course-list {
  margin: 80px 0;
}

.online-course-list-area {
  display: flex;
}

.online-course-list-area div {
  width: 24%;
  padding: 15px 10px 25px;
  border-radius: 10px;
  border: 1px solid var(--grey-border);
  margin: 20px 10px 0 0;
}

@media only screen and (max-width:1180px) {

  .online-course-list {
    margin: 50px 0;
  }
  
  
  .online-course-list-area div {
    width:48%;
  }
 
}

@media only screen and (max-width:932px) {

  .online-course-list{
    padding: 0 15px;
  }
}



@media only screen and (max-width:736px) {

  .online-course-list-area div {
    width:100%;
  }
}


/* ===========PRIVACY POLICY PAGE========================= */

.privacy-policy{
  margin:80px 0;
}

.privacy-policy p {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  padding: 0 0 10px 0;
  text-align: justify;
}

.privacy-policy .bxs-circle{
  font-size:10px;
  line-height: 15px;
}
.privacy-policy ul{
  margin: 0 0 15px 15px;
}

.privacy-policy ul li {
  font-family: "Lexend Deca", sans-serif;
  font-size: 15px;
  line-height: 28px;
  font-weight: 400;
  color: var(--paragraph);
  text-align: justify;
}

@media only screen and (max-width:1024px) {


  .privacy-policy{
    margin:50px 0;
    padding: 0 15px;
  }
  


}