/*
    Template Name    : skilify
	Description		 : HTML5 Template
    Version          : 1.0
/*
================================================
/* Table of Content
==================================================


1. Common CSS
2. Header CSS
3. Index Banner CSS
4. Card slider Sec CSS
5. Categories Cards Sec CSS
6. Remote Learning Sec CSS
7. Know About Platform Sec CSS
8. Testimonial Sec CSS
9. Partner Slider Sec CSS
10. Apply card Sec CSS
11. Footer CSS
12. Responsive CSS
*/
/*
================================================
1. Common CSS
================================================
*/
html,
body {
  font-family: 'Poppins';
  font-style: normal;
}

a {
  text-decoration: none;
}

a:hover {
  color: inherit;
}

img {
  max-width: 100%;
}

picture {
  display: block;
}

.container {
  max-width: 1200px;
  padding: 0 15px;
}

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

h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}

/** TMB LOADER  **/
@keyframes tmbloader {
  100% {
    top: 100%;
  }
}

#tmbLoader {
  position: fixed;
  height: 100vh;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  animation: tmbloader 1s 1s linear forwards;
  background-color: #fff;
}

/** colors  **/
.bg-primary {
  background-color: #fef0ef !important;
}

.bg-primary-dark {
  background-color: #F56962 !important;
}

.bg-secondary {
  background-color: #EFEFF6 !important;
}

.bg-dark {
  background-color: #33333D !important;
}

.text-primary {
  color: #302D3A !important;
}

.text-secondary {
  color: #5F5982 !important;
}

.text-third {
  color: #91929A !important;
}

.text-focus {
  color: #F68C20;
}

.text-focus:hover {
  color: #F68C20;
}

/** Font weight **/
.text-semi-bold {
  font-weight: 600;
}

.text-medium-bold {
  font-weight: 500;
}

/** spacing **/
.pt-8, .py-8 {
  padding-top: 80px;
}

.pb-8, .py-8 {
  padding-bottom: 80px;
}

.mt-8, .my-8 {
  margin-top: 80px;
}

.mb-8, .my-8 {
  margin-bottom: 80px;
}

.categories-crd-list, .apply-crd-list, .multi-course-crd-list,
.row-y-spacing {
  --bs-gutter-y: 1.5rem;
}

/** button **/
.dropdown-item {
  outline: 0;
}

.dropdown-item:hover, .dropdown-item:active, .dropdown-item:focus, .dropdown-item:active:focus {
  color: #fff;
  background-color: #91929A;
}

.form-control:focus {
  border: none;
  box-shadow: none;
}

.accordion-button {
  border: 0;
  box-shadow: none !important;
}

.accordion-button:not(.collapsed) {
  background-color: #EFEFF6;
  color: #5F5982;
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.btn {
  text-transform: capitalize;
}

.btn-check:focus + .btn, .btn:focus {
  outline: 0;
  box-shadow: none;
}

button {
  background-color: transparent;
  border: 0;
  outline: none;
}

.btn-primary, .btn-secondary {
  background: #F56962;
  border: none;
  border-radius: 4px;
  padding: 12px 25px;
  font-size: 16px;
  transition: 0.2s;
}

.btn-primary:hover, .btn-secondary:hover, .btn-primary:active, .btn-secondary:active, .btn-primary:focus, .btn-secondary:focus, .btn-primary:active:focus, .btn-secondary:active:focus {
  background-color: #e65750;
  box-shadow: 0 7px 15px -2px #e65750;
}

.btn-outline-primary {
  border-radius: 4px;
  padding: 12px 25px;
  font-size: 16px;
  transition: 0.2s;
  color: #F56962;
  border-color: #F56962;
}

.btn-outline-primary:hover, .btn-outline-primary:active, .btn-outline-primary:focus, .btn-outline-primary:active:focus {
  color: #fff;
  background-color: #e65750;
  box-shadow: 0 7px 15px -2px #e65750;
  border-color: #e65750;
}

.btn-secondary {
  background: #EFEFF6;
  color: #5F5982;
}

.btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus, .btn-secondary:active:focus {
  color: #5F5982;
  box-shadow: 0 7px 15px -2px #ccc;
  background-color: #EFEFF6;
}

.btn-secondary-outline {
  border-radius: 4px;
  padding: 12px 25px;
  font-size: 16px;
  transition: 0.2s;
  color: #5F5982;
  border-color: #EFEFF6;
}

.btn-secondary-outline:hover, .btn-secondary-outline:active, .btn-secondary-outline:focus, .btn-secondary-outline:active:focus {
  color: #5F5982;
  box-shadow: 0 7px 15px -2px #ccc;
  background-color: #EFEFF6;
}

/** main Content Top Gap Strat **/
.main-top-gap {
  margin-top: 85px;
}

/** main Content Top Gap End **/
/** Commaon Hero Banner  css**/
.banner-content {
  position: relative;
  z-index: 3;
}

.sub-banner-heading {
  color: #5F5982;
}

.banner-heading {
  font-size: 50px;
  font-weight: 600;
}

.banner-brief {
  font-size: 22px;
}

.banner-search {
  border: 0;
  outline: 0;
}

/** common sec parts **/
.sec-heading {
  color: #302D3A;
  font-size: 40px;
  font-weight: 500;
}

.text-white .sec-heading {
  color: #fff;
}

.sec-brief {
  font-size: 20px;
  color: #5F5982;
}

.card-title {
  color: #302D3A;
  font-weight: 500;
  font-size: 22px;
}

.card-subtitle {
  color: #302D3A;
  font-weight: 500;
  font-size: 18px;
}

.card-text {
  font-size: 16px;
  color: #5F5982;
}

.sec-header-btn a {
  white-space: nowrap;
}

/** Crd Slider  css**/
.crd-slider-list {
  margin: -15px;
}

.crd-slider-list .crd-item {
  padding: 15px;
}

.crd-slider-sec .sec-content {
  position: relative;
  z-index: 2;
}

.crd-slider-sec .sec-content::before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/svg/dots-pattern-gray.svg) no-repeat;
  height: 110px;
  width: 250px;
}

/** Course card  css**/
.course-card {
  position: relative;
  height: 100%;
  padding: 15px;
  background-color: #fff;
  border-radius: 5px;
  transition: 0.5s;
  box-shadow: 0 0 15px #ececea;
}

.course-card .crd-img-wrap {
  overflow: hidden;
  transition: 0.5s;
}

.course-card:hover {
  box-shadow: 0 0 30px -15px rgba(0, 0, 0, 0.4);
  transform: translateY(-15px);
}

.course-card .crd-content {
  padding-bottom: 40px;
}

.course-card .crd-bottom {
  position: absolute;
  bottom: 15px;
  right: 15px;
  left: 15px;
  gap: 0 5px;
}

.heart__path,
.heart__stroke {
  transition: all 0.5s 0s;
}

.heart__path {
  fill: transparent;
}

.heart__stroke {
  fill: #fff;
}

.wish-heart {
  position: absolute;
  right: 10px;
  top: 10px;
  stroke-width: 20px;
  stroke: #fff;
  transition: all 0.5s 0s;
}

.wish-heart.active .heart__svg {
  stroke: red;
  fill: red;
}

.wish-heart.active .heart__path,
.wish-heart.active .heart__stroke {
  fill: red;
}

.bookmark-icon.active {
  fill: red;
}

.crd-info {
  border-bottom: 1px solid #ccc;
}

.crd-info-txt {
  font-size: 14px;
  color: #5F5982;
}

.crd-img {
  height: 240px;
  width: 100%;
  object-fit: cover;
  border-radius: 5px;
  transition: 0.5s;
}

.crd-img.blog-crd-img {
  height: 325px;
}

.crd-profile img {
  border-radius: 8px;
}

.profile-name {
  color: #5F5982;
  font-size: 14px;
}

.crd-price del {
  font-size: 16px;
  color: #91929A;
}

.crd-price span {
  font-size: 18px;
  color: #F68C20;
  font-weight: bold;
}

/** custom slider btns **/
.crd-slider-btns {
  position: relative;
  z-index: 1;
}

.slider-dark .slide-btn {
  background-color: #EFEFF6;
}

.slide-btn {
  height: 50px;
  width: 50px;
  background-color: #fff;
  transition: 0.3s;
}

.slide-btn svg {
  fill: #909090;
  transition: 0.3s;
}

.slide-btn:hover {
  box-shadow: 0 0 10px -3px #ddd;
}

.slide-btn:hover svg {
  fill: #F68C20;
}

.slide-prev svg {
  transform: rotate(180deg);
}

.custom-slider-btn .slick-arrow {
  display: none !important;
}

.custom-slider-dots .slick-dots,
.custom-slider-dots-responsive .slick-dots {
  display: flex;
  width: calc(100% - 160px);
  left: 50%;
  bottom: -55px;
  transform: translateX(-50%);
  z-index: 2;
}

.custom-slider-dots .slick-dots li,
.custom-slider-dots-responsive .slick-dots li {
  height: 3px;
  background-color: #fff;
  width: 100%;
  border-radius: 5px;
}

.custom-slider-dots .slick-dots li:last-child,
.custom-slider-dots-responsive .slick-dots li:last-child {
  margin-right: 0;
}

.custom-slider-dots .slick-dots li:first-child,
.custom-slider-dots-responsive .slick-dots li:first-child {
  margin-left: 0;
}

.custom-slider-dots .slick-dots li.slick-active,
.custom-slider-dots-responsive .slick-dots li.slick-active {
  background-color: #F68C20;
}

.custom-slider-dots .slick-dots button,
.custom-slider-dots-responsive .slick-dots button {
  height: 3px;
  width: 100%;
  padding: 0;
}

.custom-slider-dots .slick-dots button::before,
.custom-slider-dots-responsive .slick-dots button::before {
  display: none;
}

.custom-slider-dots-dark .slick-dots li {
  background-color: #EFEFF6;
}

.custom-slider-dots-dark .slick-dots li.slick-active {
  background-color: #F68C20;
}

.custom-slider-dots-responsive .slick-dots {
  bottom: -30px;
}

/** custom slider btns **/
.not-found-content {
  max-width: 700px;
  margin: 0 auto;
}

/*
================================================
2. Header CSS
================================================
*/
/** index Header **/
.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9;
  transition: 0.5s;
  padding-top: 10px;
}

@keyframes headerSticky {
  to {
    transform: translateY(0);
  }
}

.header.sticky {
  transform: translateY(-100%);
  position: fixed;
  padding-top: 0;
  background-color: #fff;
  box-shadow: 0 0 10px #ddd;
  animation: headerSticky 0.3s forwards;
}

.navbar {
  transition: 0.5s;
}

.header-logo text {
  fill: #302D3A;
}

.navbar-nav {
  margin: 0 auto;
}

.nav-link {
  font-size: 16px;
  color: #5F5982;
  transition: 0.3s;
}

.dropdown-item {
  text-transform: capitalize;
}

.home-img img {
  height: 220px;
  width: 220px;
}

.navbar-nav .nav-link .dropdown-icon {
  transition: 0.2s;
}

.header-svg-fill {
  fill: #5F5982;
}

.header-light .header-logo text,
.header-light .header-svg-fill {
  fill: #fff;
}

.header-light .nav-link {
  color: #fff;
}

.header-light.sticky .header-logo text,
.header-light[style="background-color: #fff;"] .header-logo text {
  fill: #302D3A;
}

.header-light.sticky .nav-link,
.header-light[style="background-color: #fff;"] .nav-link {
  color: #5F5982;
}

.header-light.sticky .header-svg-fill,
.header-light[style="background-color: #fff;"] .header-svg-fill {
  fill: #5F5982;
}

.dropdown-item {
  font-size: 15px;
  color: #5F5982;
}

.dropdown-toggle::after {
  display: none;
}

.navbar-toggler, .navbar-toggler::after,
.navbar-toggler::before {
  height: 3px;
  width: 30px;
  border-radius: 10px;
  position: relative;
  padding: 0;
  border: 0;
  top: 0;
  left: 0;
  transition: 0.5s;
  background-color: transparent;
}

.navbar-toggler::after,
.navbar-toggler::before {
  content: "";
  opacity: 1;
  position: absolute;
  background-color: #F56962;
}

.navbar-toggler::after {
  transform: rotate(45deg);
}


.navbar-toggler::before {
  transform: rotate(-45deg);
}

.navbar-toggler:focus, .navbar-toggler:focus::after,
.navbar-toggler:focus::before {
  box-shadow: none;
}

.navbar-toggler.collapsed, .collapsed.navbar-toggler::after,
.collapsed.navbar-toggler::before {
  opacity: 1;
  background-color: #F56962;
}

.collapsed.navbar-toggler::after,
.collapsed.navbar-toggler::before {
  top: -7px;
  transform: none;
  transform: rotate(0);
}


.collapsed.navbar-toggler::before {
  top: 7px;
}

@media only screen and (min-width: 992px) {
  .header .mega-nav-item {
    position: static;
  }
  .header .mega-nav-item .dropdown-menu {
    margin-top: -20px !important;
  }
  .header .dropdown-menu {
    min-width: 220px;
    display: block;
    box-shadow: 0 5px 40px rgba(0, 0, 0, 0.15);
    top: 100%;
    width: 100%;
    opacity: 0;
    z-index: -9;
    visibility: hidden;
    overflow: hidden;
    margin-top: 0;
  }
  .header .nav-item.dropdown:hover .dropdown-icon {
    transform: rotate(-180deg);
  }
  .header .nav-item.dropdown:hover .dropdown-menu,
  .header .dropdown-menu:hover {
    z-index: 9;
    opacity: 1;
    visibility: visible;
    top: 100%;
    transition: all .2s ease-out;
  }
  .header .nav-item.dropdown:hover .dropdown-menu .dropdown-item,
  .header .dropdown-menu:hover .dropdown-item {
    transition: all .2s ease-out 0s;
  }
  .header .dropdown-item {
    transition: all 0s ease-out;
    box-shadow: 0px 30px 60px -10px rgba(0, 0, 0, 0.1);
  }
  .header .dropdown-item:hover {
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
  }
}

/*
================================================
3. Index Banner CSS
================================================
*/
.index-banner-form {
  box-shadow: 0 40px 70px 0px #f5b5b0;
}

.index-banner {
  padding-top: 130px;
}

.index-banner::after, .index-banner::before {
  content: "";
  position: absolute;
  background: url(../images/svg/dots-pattern-pink.svg) no-repeat;
  height: 250px;
  width: 110px;
}

.index-banner::after {
  bottom: 0;
  left: 0;
}

.index-banner::before {
  top: 25%;
  right: 0;
}

.index-banner-img {
  position: relative;
  border-radius: 5%;
  margin-bottom: 50px;
}

.index-banner-img img {
  position: relative;
  z-index: 2;
  border-radius: 5%;
}

.index-banner-img::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50px;
  z-index: 1;
  border: 3px solid #F68C20;
  border-radius: inherit;
  height: 100%;
  width: 80%;
}

/*
================================================
4. Card slider Sec CSS
================================================
*/
/*
================================================
5. Categories Cards Sec CSS
================================================
*/
.categories-crd {
  padding: 25px;
  height: 100%;
  border-radius: 5px;
  transition: 0.5s;
  display: block;
}

.categories-crd:hover {
  box-shadow: 0 0 30px -15px rgba(0, 0, 0, 0.4);
}

.categories-crd:hover .card-title, .categories-crd:hover .card-text {
  color: #fff;
}

.categories-crd:hover .categories-crd-img-wrap {
  background-color: #fff;
}

.categories-crd-list-v3 .categories-crd {
  padding: 15px;
  border-radius: 10px;
}

.categories-crd-list-v3 .categories-crd img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px;
}

.categories-crd-img-wrap {
  height: 60px;
  width: 60px;
  display: inline-block;
  border-radius: 5px;
  transition: 0.5s;
}

.categories-crd-gray {
  background-color: #EFEFF6;
}

.categories-crd-gray .categories-crd-img-wrap {
  background-color: #e2ddff;
}

.categories-crd-gray:hover {
  background-color: #5444a5;
}

.categories-crd-orange {
  background-color: #F68C201A;
}

.categories-crd-orange .categories-crd-img-wrap {
  background-color: #fae0d0;
}

.categories-crd-orange:hover {
  background-color: #F68C20;
}

.categories-crd-blue {
  background-color: #BBF0FF80;
}

.categories-crd-blue .categories-crd-img-wrap {
  background-color: #bbf0ff;
}

.categories-crd-blue:hover {
  background-color: #36bbf0;
}

.categories-crd-green {
  background-color: #CEF6D680;
}

.categories-crd-green .categories-crd-img-wrap {
  background-color: #cef6d6;
}

.categories-crd-green:hover {
  background-color: #5fd46d;
}

/*
================================================
6. Remote Learning Sec CSS
================================================
*/
.remote-learning-sec::before, .remote-learning-sec::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 250px;
}

.remote-learning-sec::before {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  background: url(../images/svg/dots-pattern-gray-vertical.svg) no-repeat;
}

.remote-learning-sec::after {
  bottom: 0;
  left: 0;
  background: url(../images/svg/dots-pattern-pink.svg) no-repeat;
}

.remote-learning-content {
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
}

.patterns-wrap img {
  position: absolute;
  z-index: 1;
}

.remote-circle1 {
  top: 0;
  left: 0;
}

.remote-circle2 {
  top: 50%;
  left: 5%;
}

.remote-circle3 {
  top: 50%;
  left: 5%;
  transform: translateY(-50%);
}

.remote-circle4 {
  bottom: 0px;
  left: 15px;
}

.remote-circle5 {
  top: 0px;
  right: 5%;
}

.remote-circle6 {
  top: 0;
  right: -5%;
}

.remote-circle7 {
  top: 40%;
  right: 0;
}

.remote-circle8 {
  bottom: 0px;
  right: 10%;
}

@keyframes swinging {
  0% {
    transform: rotate(-10deg) translate3d(-15px, 0, 0);
  }
  100% {
    transform: rotate(10deg) translate3d(15px, 0, 0);
  }
}

/*
================================================
7. Know About Platform Sec CSS
================================================
*/
.know-about-img {
  border-radius: 0  40% 0 0;
  position: relative;
  margin-top: 50px;
}

.know-about-img img {
  border-radius: 0  40% 0 0;
}

.know-about-img::after {
  content: "";
  position: absolute;
  top: -50px;
  right: 0.8rem;
  border: 5px solid #F56962;
  height: 100%;
  width: 80%;
  border-radius: inherit;
  z-index: -1;
}

/*
================================================
8. Testimonial Sec CSS
================================================
*/
.testimonial-slider .section-content {
  position: relative;
}

.testimonial-slider .section-content::before {
  content: "";
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: url(../images/svg/dots-pattern-gray.svg) no-repeat;
  height: 110px;
  width: 250px;
}

.testimonial-list {
  margin: 0 -15px;
}

.testimonial-item {
  padding: 0 15px;
}

.testimonial-inner {
  border-radius: 0px 30px 0px 0px;
  background-color: rgba(255, 255, 255, 0.6);
  padding: 25px;
  border-left: 4px solid transparent;
  transition: 0.5s;
}

.testimonial-inner:hover {
  background-color: white;
  border-color: #F68C20;
  box-shadow: 0 0 30px -15px rgba(0, 0, 0, 0.4);
}

.testimonial-profile-info span {
  color: #91929A;
  font-size: 16px;
}

.testimonial-profile-img img {
  border-radius: 50%;
}

/*
================================================
9. Partner Slider Sec CSS
================================================
*/
.partner-list {
  margin: 0 -15px;
}

.partner-list .slick-track {
  display: flex;
  align-items: center;
}

.partner-item {
  padding: 0 15px;
}

/*
================================================
10. Apply card Sec CSS
================================================
*/
.apply-crd-sec {
  position: relative;
}

.apply-crd-sec::before, .apply-crd-sec::after {
  content: "";
  position: absolute;
  width: 110px;
  height: 250px;
}

.apply-crd-sec::before {
  top: 0;
  right: 0;
  background: url(../images/svg/dots-pattern-gray-vertical.svg) no-repeat;
}

.apply-crd-sec::after {
  bottom: 0;
  left: 0;
  background: url(../images/svg/dots-pattern-pink.svg) no-repeat;
}

.apply-crd-list {
  position: relative;
  z-index: 3;
}

.apply-crd {
  padding: 25px 15px;
  background-color: #fff;
  border-radius: 5px;
  transition: 0.5s;
}

.apply-crd:hover {
  box-shadow: 0 0 35px 1px #f5696270;
}

.apply-crd-img img {
  border-radius: 50%;
}

/*
================================================
11. Footer CSS
================================================
*/
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Add other styling properties as needed */
}
.footer-link {
  color: #91929A;
  font-size: 18px;
}

.footer-link:hover {
  color: #fff;
}

.copy-right {
  border-top: 1px solid #91929A;
}

.copy-right .footer-socila-link svg path, .copy-right .footer-socila-link svg circle, .copy-right .footer-socila-link svg rect {
  fill: #777;
}

.copy-right .footer-socila-link a:hover svg path, .copy-right .footer-socila-link a:hover svg circle, .copy-right .footer-socila-link a:hover svg rect {
  fill: #fff;
}

.copy-right-txt {
  color: #91929A;
  font-size: 16px;
}

/*
================================================
12. Responsive CSS
================================================
*/
@media only screen and (max-width: 1024px) {
  /** multi choice crd sec CSS Start  **/
  .multi-choice-crd-list {
    grid-template-columns: repeat(3, 1fr);
  }
  /** multi choice crd sec CSS End  **/
  /** teacher profile page css Start **/
  .teacher-profile-banner {
    padding-bottom: 80px;
  }
  .teacher-profile-banner::after {
    height: 0;
  }
  .teacher-profile-banner .profile-banner-img {
    border: 5px solid #fff;
  }
  .teacher-profile-banner .profile-banner-txt {
    padding-bottom: 0;
  }
  /** teacher profile  page css END **/
}

@media only screen and (max-width: 991px) {
  /** Header CSS Start  **/
  .dropdown-toggle.show .dropdown-icon {
    transform: rotate(180deg);
  }
  .navbar-collapse {
    position: fixed;
    width: 250px;
    max-width: 100%;
    top: 75px;
    right: -100%;
    height: 100%;
    min-height: 100vh;
    background-color: #fff;
    overflow-y: scroll;
    transition: 0.3s;
    padding: 20px 15px;
    padding-bottom: 85px;
  }
  .navbar-collapse.show {
    right: 0;
    box-shadow: #f56b64 -10px 21px 50px -25px;
  }
  .header.sticky .navbar-collapse {
    top: 65px;
  }
  .header.sticky .navbar {
    transform: none;
  }
  .header .nav-link {
    width: 100%;
  }
  .header .nav-item {
    border-bottom: 1px solid #F56962;
  }
  .dropdown-menu.show {
    margin-bottom: 10px;
  }
  /** Header CSS End  **/
  /** Course Detail css Start **/
  #course-detail-banner-bg {
    width: calc(100% + 30px);
    margin-left: -15px;
    height: 100%;
  }
  .course-detail-banner {
    position: relative;
  }
  .course-detail-grid {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 0 50px;
    grid-template-rows: max-content;
  }
  .course-detail-crd-btn {
    width: auto;
  }
  /** Course Detail css End **/
  /** Article Card  css Start **/
  .article-crd-list {
    grid-template-columns: repeat(2, 1fr);
  }
  /** Article Card  css End **/
}

@media only screen and (max-width: 768px) {
  /** Common Banner CSS Start  **/
  .banner-heading {
    font-size: 40px;
  }
  .banner-brief {
    font-size: 20px;
  }
  /** Common Banner CSS End  **/
  /** Blog Banner CSS Start  **/
  .blog-banner .banner-content {
    margin: 0  auto;
  }
  /** Blog Banner CSS End  **/
  /** Two side curve Sec css  Start**/
  .two-side-curve-content {
    padding: 50px 15px;
    border-radius: 0 70px 0 70px;
  }
  /** Two side curve Sec css  End**/
  /** Course Detail css Start **/
  .course-detail-crd-btn {
    width: 100%;
  }
  /** Course Detail css End **/
  /** Contact us css Start **/
  .contactus-item .sec-heading {
    font-size: 30px;
  }
  .contactus-item .sec-sub-heading {
    font-size: 16px;
  }
  /** Contact us css End **/
}

@media only screen and (max-width: 767px) {
  html {
    font-size: 70%;
  }
  /** Header Css Start **/
  .navbar-collapse {
    top: 67px;
  }
  .header.sticky .navbar-collapse {
    top: 57px;
  }
  .main-top-gap {
    margin-top: 79px;
  }
  /** Header Css End **/
  /** common code Css Start **/
  .course-card:hover {
    transform: none;
  }
  .banner-form .index-banner-search {
    font-size: 14px;
  }
  /** common code Css End **/
  /** spacing Classes Css Start **/
  .pt-8, .py-8 {
    padding-top: 50px;
  }
  .pb-8, .py-8 {
    padding-bottom: 50px;
  }
  .mt-8, .my-8 {
    margin-top: 50px;
  }
  .mb-8, .my-8 {
    margin-bottom: 50px;
  }
  .readcrumb-sec {
    padding-bottom: 100px;
  }
  .cart-main-content {
    margin-top: -50px;
  }
  .teacher-profile-banner {
    padding-bottom: 50px;
  }
  .skilify-info-sec {
    padding: 0;
  }
  .skilify-info-points {
    top: -50px;
  }
  /** spacing Classes Css End **/
  /** Index Banner Css Start **/
  .index-banner::after, .index-banner::before {
    opacity: 0.3;
  }
  /** Index Banner Css End **/
  /** card Css Start **/
  .crd-img {
    height: 260px;
  }
  /** card Css End **/
  /** Article Card  css Start **/
  .article-crd-list {
    grid-template-columns: 1fr;
  }
  /** Article Card  css End **/
  /** Blog Detail css Start **/
  .blog-detail-img img {
    height: auto;
  }
  .blog-detail-banner {
    padding-bottom: 120px;
  }
  .clap-response-wrap {
    max-width: 100%;
  }
  /** Blog Detail css End **/
  /** Courses  page css Start **/
  .courses-search .sec-header .btn-secondary {
    padding: 10px 15px 10px 15px;
  }
  .learn-steps-v3-content::after {
    width: 100%;
    height: 65%;
  }
  /** Courses  css End **/
  /** Contact us css Start **/
  .contactus-banner .banner-content {
    padding-bottom: 20px;
  }
  .contactus-item .sec-heading {
    font-size: 26px;
  }
  .contactus-item::after {
    width: 100%;
  }
  /** Contact us css End **/
}

@media only screen and (max-width: 575px) {
  .main-top-gap {
    margin-top: 77px;
  }
  /** Home 2 Css Start **/
  .hero-banner-v2::after {
    border-radius: 25px;
  }
  /** Home 2 Css Css **/
  /** Common Banner CSS Start  **/
  .banner-heading {
    font-size: 34px !important;
  }
  .banner-brief {
    font-size: 18px !important;
  }
  /** Common Banner CSS End  **/
  /** Course Detail css Start **/
  .course-price {
    width: 100%;
  }
  /** Course Detail css End **/
  /** Cart css Start **/
  .cart-course-img {
    width: 100%;
    height: auto;
  }
  .check-out-crd, .payment-crd-wrap {
    min-width: auto;
  }
  /** Cart css End **/
  /** Card CSS Start  **/
  .card-subtitle {
    font-size: 16px;
  }
  .card-title {
    font-size: 20px;
  }
  .card-text {
    font-size: 14px;
  }
  /** Card CSS End  **/
  /** Remote Learning CSS Start  **/
  .remote-learning-content-wrap {
    padding: 0;
  }
  .remote-learning-sec::before, .remote-learning-sec::after {
    width: 70px;
    height: 100px;
    background-size: contain;
  }
  /** Remote Learning CSS End  **/
  /** Course Card CSS Start  **/
  .course-card {
    padding: 10px;
  }
  .course-card .crd-bottom {
    position: absolute;
    bottom: 10px;
    right: 10px;
    left: 10px;
  }
  .crd-info-txt {
    font-size: 12px;
  }
  /** Course Card CSS End  **/
  /** Common section CSS Start  **/
  .sec-heading {
    font-size: 30px;
  }
  .sec-brief {
    font-size: 16px;
  }
  /** Common section CSS End  **/
  /** Home v3 Css Start **/
  .skilify-info-point img {
    height: 35px;
    width: 35px;
  }
  .skilify-info-point .card-title {
    font-size: 18px;
  }
  /** Home v3 Css End **/
  /** Two Side Curve section CSS Star  **/
  .two-side-curve-content .sec-heading {
    font-size: 24px;
  }
  .two-side-curve-content .sec-brief {
    font-size: 14px;
  }
  /** Two Side Curve section CSS End  **/
  /** Blog Detail CSS Start  **/
  .clap-text,
  .respose-text {
    font-size: 14px;
  }
  .social-btn {
    min-width: 130px;
  }
  .author-writen-by {
    font-size: 12px;
  }
  .author-name {
    font-size: 18px;
  }
  /** Blog Detail css End **/
  /** Contact us css Satrt **/
  .contactus-banner .sub-banner-heading {
    font-size: 16px;
  }
  /** Contact us css End **/
}

@media only screen and (max-width: 480px) {
  /** Index Banner CSS Start  **/
  .index-banner {
    padding-top: 100px;
  }
  .banner-form .btn.btn-primary, .banner-form .btn.btn-secondary {
    padding: 10px 15px;
  }
  .banner-form .btn.btn-primary img, .banner-form .btn.btn-secondary img {
    width: 25px;
  }
  /** Index Banner CSS End  **/
  /** Blog Detail CSS Start  **/
  .crd-img.blog-crd-img {
    height: auto;
  }
  /** Blog Detail CSS End  **/
  /** Footer CSS Start  **/
  .footer-heading {
    border-bottom: 1px solid #91929A;
    position: relative;
    font-size: 20px;
  }
  .footer-heading::after, .footer-heading::before {
    content: "";
    transition: 0.3s;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 3px;
    width: 20px;
    border-radius: 10px;
    background-color: #91929A;
  }
  .footer-heading.active::after, .footer-heading.active::before {
    background-color: #fff;
  }
  .footer-heading.active::before {
    transform: translateY(-50%) rotate(270deg);
  }
  .footer-links {
    font-size: 16px;
    transition: 0.3s;
    height: 0;
    overflow: hidden;
  }
  .copy-right {
    border: 0;
  }
  /** Footer CSS End  **/
}