.hKnowMore {
  margin: 4rem 0 0;
  padding: 1rem 4rem;
  /* border: 1px solid #bcfcf1; */
  font-weight: 600;
  color: #444;
  background-color: #9bf8e9; 
  border-radius: 30px;
  position: relative;
}
.hKnowMore:hover {
  color: #444;
  background-color: #fff;
}

.hKnowMore::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  background: url(../images/book.png) no-repeat center;
  background-size: contain;
}

.hKnowMore::after{
  content: '';
  position: absolute;
  top: 50%;
  right: 30px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  background: url(../images/arrow.png) no-repeat center;
  background-size: contain;
}

.hMainColor {
  color: #bcfcf1;
}
.hMainBgColor {
  background-color: #bcfcf14b;
  clip-path: polygon(20% 5%, 80% 5%, 95% 15%, 95% 80%, 80% 90%, 20% 90%, 5% 80%, 5% 15%);
}

.clip-polygon{
  clip-path: polygon(20% 5%, 80% 5%, 95% 15%, 95% 80%, 80% 90%, 20% 90%, 5% 80%, 5% 15%);

}

.trainers {
  background-color: #e6fdf9;
}
.classes {
  padding-top: 4rem;
  background-color: #e6fce4;
}
.sticky-wrapper.is-sticky .site-navbar .site-menu > li > a:hover,
.sticky-wrapper.is-sticky .site-navbar .site-menu > li > a.active {
  color: #0fb196 !important;
}

.hBanner {
  background-image: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.3),
      rgba(0, 0, 0, 0.3)
    ),
    url("../images/ai/banner/1.jpg") !important;
  background-position: 50% 50%;
  /* background-color: #f8c3cd; */
  background-size: cover;
  background-repeat: no-repeat;
}

.hover-1::after {
  background-color: #bcfcf1 !important;
}

/* .intro-text {
  padding: 1.5rem 2rem;
  background-color: #00000066;
} */
.hBannerTitle {
  color: #9bf8e9 !important;
  text-shadow: 1px 1px 0px #000;
}


.hBannerText {
  color: #ffeee1 !important;
  text-shadow: 1px 1px 0px #000;
  font-size: 2rem;
  font-weight: 600 !important;
  margin: 20px 0;
  position: relative;
  z-index: 2;
  display: inline-block;
}
.hBannerText:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to right, rgba(255,0,0,.2),rgba(255,0,0,.8));
  transform: skewX(50deg);
  z-index: -1;
}

h4{
  color:#033668;
}

.hight-light{
  color: #f2a61e;
}
.jcc{
  justify-content: center;
}

.sticky-wrapper.is-sticky .site-navbar{
  background:#6d000a;

}
.site-mobile-menu {
    background: #8d1e2a;
}
.sec-title:before,.text-bg:after{
  display: none;
}
.sec-title:after {
    content: '';
    position: absolute;
    top: calc(100% - 0px);
    left: 50%;
    /* transform: translateX(-50%); */
    width: 50px;
    height: 1px;
    background-color: #d59656;
}
.hover-1::after {
    background: repeating-linear-gradient(45deg, #e4e4e4, transparent 5px)!important;
}
.trainers {
    background-color: #fafafa;
}
body{
  background:url(../images/ai/banner/3.jpg) center center;
  background-attachment: fixed;
  -wwebkit-background-attachment: fixed;
}
#service{
  background:url(../images/ai/banner/2.jpg) no-repeat center/cover rgba(0, 0, 0, 0.719);
  background-blend-mode: multiply;
  background-attachment: fixed;
  -wwebkit-background-attachment: fixed;
  
}
#about{
  background: repeating-linear-gradient(45deg, #e4e4e4, transparent 5px);
  -webkit-background: repeating-linear-gradient(45deg, #e4e4e4, transparent 5px);
  background: #400c00;
}
#class-category{
  background: #310200;
}
.sticky-wrapper.is-sticky .site-navbar {
    border-bottom: 1px solid transparent;
    -webkit-box-shadow:4px 5px 20px 19px rgba(0, 0, 0, 0.1);
    box-shadow: 4px 5px 20px 19px rgba(0, 0, 0, 0.1);
}
.trainers {
    background-color: #172e3ae0;
    background: linear-gradient(180deg, #502b1fc7, #330e00);
    -webkit-background-color: #172e3ae0;
    -webkit-background: linear-gradient(180deg, #172e3ac7, #172e3a);
}
#fbfeed{
      background: #6b1a07;
}
.site-footer {
    background: #3e0c00;
}
.hMainBgColor {
    background-color: #c8e3fd;
    clip-path: polygon(20% 5%, 80% 5%, 95% 15%, 95% 80%, 80% 90%, 20% 90%, 5% 80%, 5% 15%);
}
.hKnowMore {
    margin: 4rem 0 0;
    padding: 1rem 4rem;
    background-color: #d59656;
    border-radius: 30px;
    position: relative;
    color: #fff;
}
.hBannerTitle {
    color: #ffffff !important;
    text-shadow: 1px 1px 0px #000;
}
.color-sub-primary{
  color:#fff;
  text-shadow: 1px 1px 1px #000;
}
.dsc{
  color: white;
  text-shadow: 1px 1px 1px #000;
  font-size: 18px;
}
.class-card{
      border: 2px solid #d69756;
    border-radius: 3px;
    padding: 1rem;
    background: linear-gradient(0deg, #fac10e 5%, #fff 5% 95%, #fac10e 5% );
  background: linear-gradient(45deg, #040404, transparent);
}
.sticky-wrapper.is-sticky .site-navbar .site-menu>li>a {
    color: #fff !important;
    padding: 20px 20px;
}
.sticky-wrapper.is-sticky .site-navbar .site-menu > li > a:hover, .sticky-wrapper.is-sticky .site-navbar .site-menu > li > a.active {
    color: #d69756 !important;
}
.sec-title {
    padding: 10px 10px;
}
.site-footer p,.sticky-wrapper .site-navbar .site-menu>li>a  {
    color: #ffffff !important;
}
.hMainBgColor {
    background-color: #942d0e;
    clip-path: inherit;
}
#contact-section img{
  width: 50%;
}
.hBannerText:before {
    background: linear-gradient(to right, rgba(255,0,0,.2),rgb(214 151 86));
}
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,p {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color: #fff;
}

#gallery-section img{
  width:100%;
  height:400px;
  object-fit: cover;
}
#gallery-section .carousel-inner h3{
  text-align: center;
  margin-top: 3rem;
}
@media (max-width: 991px){
  .hBannerText {
    font-size: 1rem;
    padding: 10px 30px;
    position: relative;
  }
  .hBannerText:before{
    top: 10%;
    left: -10%;
    width: 120%;
    height: 80%;
    transform: skewX(50deg);
  }
}

@media (max-width: 450px){
  .text-bg {
    position: relative;
    padding: 50px;
    margin: 0px;
}
}



#about p,
#workflow p {
  font-size: 1.125rem;
  line-height: 2;
  text-align: justify;
}

/* @media screen(max-width: 576){
  .sm-d-block p{
    flex-wrap:wrap;

  }
} */