:root {
    --main: #19071B;
    --primary: #553357;
    --primary-hover: #F7E278;
    --bg-body: #F7F9FC;
    --text-secondary: #666;
}

/* latin */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

* {
    box-sizing: border-box !important;
    /* transition: all 0.3s ease-in; */
}

body {
    font-family: "Inter", serif;
    font-weight: normal;
    font-size: 1rem;
    height: 100%;
    line-height: 1.5;
    color: var(--main) !important;
    background-color: #fff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", serif;
    font-weight: 600 !important;
    margin-bottom: 0 !important;
}

a,
a:hover,
a:active,
a:focus {
    outline: none !important;
    text-decoration: none !important;
    color: initial;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}
.fnt18{
    font-size: 18px;
}
.fnt20{
    font-size: 20px;
}
.link-yellow{
    color: var(--primary-hover);
}
.bg-yellow{
    background: var(--primary-hover);
}
/* custom btn */
.btn-common.hover-filled-slide-right::before {
    top:0;
    bottom: 0;
    right: 0;
    height: 100%;
    width: 100%;
  }
  .btn-common.hover-filled-slide-right:hover::before {
    width: 0%;
  }
  .btn-common {
    position: relative;
    display: inline-block;
    width: auto;
    height: auto;
    background-color: var(--primary-hover);
    border: none;
    cursor: pointer;
    border-radius: 5px;
  }
    .btn-common span {         
      position: relative;
      display: inline-block;
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 1px;
      text-transform: uppercase;
      top: 0;
      left: 0;
      width: 100%;
      padding: 7px 20px;
      transition: 0.3s;
    }
    
.btn-main::before {
    position: absolute;
    content: "";
    background-color: var(--primary);
    transition: 0.3s ease-out;
    border-radius: 5px;
  }
  .btn-main span {
    color: rgb(255,255,255);
    border: 1px solid var(--primary);
    transition: 0.2s 0.1s;
    border-radius: 5px;
  }
  .btn-main span:hover {
    color: var(--primary);
    transition: 0.2s 0.1s;
  }
  .btn-main span::before,  .btn-1 span::after{
    position: absolute;
    content: "";
  }
.btn-main-yellow{
    background: var(--primary);
}
  .btn-main-yellow span{
    color: var(--main);
    border: 1px solid var(--primary-hover);
  }
  .btn-main-yellow span:hover{
    color: var(--main);
  }
  .btn-main-yellow:hover span{
    color: var(--primary-hover);
  }
  .btn-main-yellow::before{
    background-color: var(--primary-hover);
  }

.btn-primary {
    background: var(--primary);
    border: none;
    color: #ffffff;
    border-radius: 6px;
    padding: 7px 20px;
    font-size: 16px;
    font-weight: 600;
}

.btn-primary.focus,
.btn-primary:focus {
    color: var(--main);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
    box-shadow: none;
}

.btn-primary:hover {
    color: var(--main);
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show>.btn-primary.dropdown-toggle {
    background-color: var(--primary-hover);
    border-color: var(--primary-hover);
}

.btn:not(:disabled):not(.disabled) {
    box-shadow: none;
}

.btn-primary:not(:disabled):not(.disabled).active:focus,
.btn-primary:not(:disabled):not(.disabled):active:focus,
.show>.btn-primary.dropdown-toggle:focus {
    box-shadow: none;
}
.dropdown-menu{
    box-shadow: 0 0.225rem 0.5rem rgba(0, 0, 0, 0.075);
    border: none;
}
.dropdown-item{
    padding-top: 10px;
    padding-bottom: 10px;
}
.dropdown-item:focus, .dropdown-item:hover{
    background-color: #ebebeb;
}
.dropdown-menu{
    animation: menu-sub-dropdown-animation-fade-in .3s ease 1, menu-sub-dropdown-animation-move-up .3s ease 1;
}
@keyframes menu-sub-dropdown-animation-fade-in {
    from {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes menu-sub-dropdown-animation-move-up {
    from {
        margin-top: .75rem
    }

    to {
        margin-top: 0
    }
}

@keyframes menu-sub-dropdown-animation-move-down {
    from {
        margin-bottom: .75rem
    }

    to {
        margin-bottom: 0
    }
}
.form-control{
    padding: 16px 20px;
    border-color: var(--main);
    background-color: transparent;
}
.stroke-text {
    font-size: 4rem;
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translateX(100%) rotate(-90deg);
    transform-origin: bottom left;
    display: inline-block;
    color: transparent;
    font-weight: 800;
    user-select: none;
    white-space: nowrap;
    z-index: 0;
    margin-bottom: 0;
    -webkit-text-stroke: 1px #d2d4d6;
    animation: textmove 100s linear infinite;
}
@-webkit-keyframes textmove {
    100% {
        transform: translateX(100%) rotate(-90deg) translateX(300%)
    }
}

@keyframes textmove {
    100% {
        transform: translateX(100%) rotate(-90deg) translateX(300%)
    }
}
/* ==== Header ==== */
.bg-dark{
    background-color: var(--main) !important;
}
.header-top{
    /* background-color: var(--main);
    color: #fff; */
    background: #fff;
    color: var(--main);
    padding: 10px 0;
    font-size: 14px;
}
.header-top .header-icon-box{
    display: flex;
    align-items: center;
    gap: 5px;
}
.header-top .header-icon-box .brand-logo-icon{
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

@media screen and (max-width: 576px) {
    .hero-container {
        width: 100vw;
        height: 1060px;
        overflow: visible;
        padding-top: 0;
        margin-top: 0;
        transform: translateY(-10%);
    }
}
@media screen and (max-width: 500px) {
    .hero-container {
        width: 100vw;
        height: 1000px;
        overflow: visible;
        padding-top: 0;
        margin-top: 0;
        transform: translateY(-25%);
    }
}
.brand-logo{
    height: 36px;
}
.navbar .nav-link{
    padding-left: 15px !important;
    padding-right: 15px !important;
    color: #fff;
    border-bottom: 1px solid transparent;
}
.navbar .nav-link:focus, .navbar .nav-link:hover{
    border-color: #fff;
}
.navbar-toggler{
    background: #fff;
}
.navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #fff;
    border-color: #fff;
}
.header-sticky{
    background: rgb(85 51 87 / 100%);
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    width: 100%;
    backdrop-filter: blur(25px);
    z-index: 1020;
    transition: top 0.3s;
    
}
.header-sticky.navbar-scrolled-top {
    position: fixed;
    z-index: 1040;
    top: 0;
    left: 0;
    right: 0;
    background-color: var(--primary);
    /* -webkit-animation: fadeInDown 0.5s;
    animation: fadeInDown 0.5s; */
    width: 100%;
    display: block;
}
.silder-title{
    /* background: linear-gradient(to right, #0090f7, #ba62fc, #f2416b); */
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    display: inline-block;
    color: var(--primary);
}

.silder-content {
   font-size: 22px;
   font-weight: 500;
}
.sub-text{
    font-weight: 300;
}
.home-section{
    /* background: url(../images/header-new-img.png) no-repeat; */
    background: url(../images/home-slider1.png) no-repeat;
    background-size: cover;
    height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background-position: 50% 35%;
    position: relative;
}
.section-overlay{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 150px;
    background: linear-gradient(0deg, #ffffff 5%, transparent 100%);
    z-index: 1;
}

.main-title{
    font-size: 22px;
    font-weight: bold;
    text-transform: uppercase;
    color:var(--primary)
}
.section-heading-line {
    width: 50px;
    height: 6px;
    background: var(--primary);
    display: inline-block;
    margin: 0 auto;
    position: relative;
}
.section-heading-line:before, .section-heading-line:after {
    content: "";
    position: absolute;
    left: -50px;
    top: 2px;
    width: 50px;
    height: 3px;
    display: block;
    background-color: var(--main);
}
.section-heading-line:after {
    left: 50px;
}
.section-space {
    padding: 80px 0;
    overflow: hidden;
    position: relative;
    
}
.cardOnHover{
    position: relative;
    border-radius: 10px;
    padding: 0px;
    border: 1px solid #F2F5F6;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.5s all;
}
.cardOnHoverRounded{
    border-radius: 10px 10px 0 0;
    width: 100%;
}
.iframeBorder, .vision-mission-inner{
    transition: 0.5s all; 
}
.cardOnHover:hover, .vision-mission-inner:hover{
    /* background: #F2F5F6; */
    box-shadow: 2px 4px 16px #00000029;
    transform: scale(1.07);
  transition: 0.5s all;
}
.cardOnHover .news-category{
    font-size: 18px;
}
.cardOnHover .cardContent{
    flex: 1 0 auto;
    padding: 0 1rem;
}
.main-badge{
    font-size: 12px;
    background: var(--primary-hover);
    border-radius: 10px;
    font-weight: normal;
    color: #000;
    padding: 3px 10px;
    position: absolute;
    right: 5px;
    top: 5px;
    z-index: 1;
}
.iframeBorder{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
}
.iframeBorder:before{
    /* background: linear-gradient(to right, #0090f7, #ba62fc, #f2416b); */
    background: #ddd;
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
    border-radius: 6px;
}
.iframeBorder iframe{
    width: 100%;
    border-radius: 6px;
}
.free-live-btn{
  background-color: #fff;
  font-size: 17px;
  font-weight: bold;
  border: 1px dashed var(--primary);
  padding: 10px 10px;
  border-radius: 6px;
}
.multi-color-shape{
    background: url(../images/shape-layer.svg) no-repeat;
    background-position: right top;
    background-size: 100%;
}
.our-workshop-section{
    background: url(../images/workshop-bg.png) no-repeat center;
    background-size: cover;
}
.our-workshop-section .slick-slide img{
    width: 100%;
    border-radius: 10px 10px 0 0;
}
.workshop-item .workshop-title{
    min-height: 50px;
    padding: 0 10px;
}
.slick-slide{
    margin:0 10px;
    transition: transform 0.5s ease;
}
.testimonials-section{
    background: url(../images/feedback.png) no-repeat center;
    background-size: cover;
}
.testimonials-section .section-heading-line:before, .testimonials-section .section-heading-line:after{
    background-color: #fff
}
.testimonials-single{
    border: 1px solid #FFD8C7;
    padding: 35px 25px;
    color: #fff;
    background: rgb(25 7 27 / 70%);
    backdrop-filter: blur(10px);
    border-radius: 10px;
}
.testi-client-img{
    width: 50px;
    height: 50px;
    border-radius: 50px;
    object-fit: cover;
}
.slick-dots{
  bottom: -35px;
}
.testimonials-section .slick-dots li button:before{
    background: #fff;
    opacity: 0.5;
}
.testimonials-section .slick-dots li.slick-active button:before{
    background: var(--primary-hover);
    opacity: 1;
}
.book-now-section{
    background: url(../images/book-now-bg.png) no-repeat center;
    background-size: cover;
}
/* .blog-section .card{

    transform: translateX(10%);
} */
.blog-section .slick-initialized .slick-slide, .our-client-section .slick-initialized .slick-slide{
    display: flex;
}
footer{
    background: var(--primary);
    color: #fff;
}
footer .social-list .brand-logo-icon {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #ffffff;
}
.footer-pattern-left{
    opacity: 0.03;
    top: 0;
}
.footer-pattern-right{
    opacity: 0.03;
    top: 0;
    right: 0;
}
.footer-contact-wrapper{
    background: var(--main);
    color: #fff;
    padding: 50px 35px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    position: relative;
    transform: translateY(50%);
    z-index: 1;
}
.announcement-img{
    position: absolute;
    left: -50px;
}
.footer-item{
    padding: 5px 0;
    color: #fff;
}
.footer-item .footer-link{
    color: #fff;
    font-weight: 300;
}
.footer-item .footer-link:hover{
    color: var(--primary-hover);
}
.client-speak-item + .prev, .client-speak-item + .prev + .next {
    background: transparent;
    border: none;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size:18px;
    font-weight: 300;
  }
  
  .client-speak-item  + .prev {
    left: 20px;
  }
  
  .client-speak-item + .prev + .next  {
    right: 20px;
  }
  

  .light.blink {
    width: 8px;
    height: 8px;
    background: red;
    border-radius: 10px;
    display: inline-block;
  }
  
  @-webkit-keyframes blink {
    0% {
      opacity: 0.1;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-moz-keyframes blink {
    0% {
      opacity: 0.1;
    }
    100% {
      opacity: 1;
    }
  }
  
  @-ms-keyframes blink {
    0% {
      opacity: 0.1;
    }
    100% {
      opacity: 1;
    }
  }
  
  .blink {
    -webkit-animation: blink .7s alternate infinite;
    -moz-animation: blink .7s alternate infinite;
    -ms-animation: blink .7s alternate infinite;
  }
  .head-card{
    border-radius: 10px;
    background: var(--primary);
    color: #fff;
    position: relative;
    padding: 20px;
    max-width: 991px;
    margin: auto;
  }
  .quote-absolute{
  position: absolute;
  top: -13px;
  left: 0px;
  font-size: 50px;
  color: var(--primary-hover);
}
.inner-section{
    background: url(../images/inner-bg1.png) no-repeat center;
    background-size: cover;
    height: 300px;
    display: flex;
    align-items: center;
}
.inner-section .pt-61{
    padding-top: 61px;
}
.about-shape-option{
    height: 400px;
    background-position: left top;
}
.nav-pills .nav-link {
    color: var(--main);
    background-color: #eff2fc;
    border-radius: 6px;
}
.nav-pills .nav-item, .nav-pills .nav-item {
    margin-right: .375rem;
    margin-left: .375rem;
}
.nav-pills .nav-link:hover:not(.active), .nav-tabs .nav-link.show:not(.active){
    color: var(--primary);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link{
    background-color: var(--primary-hover);
    color: var(--primary);
}
.clamp-1{
    display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.clamp-2{
    display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.blog-list-img{
    width: 100%;
    height: 225px;
    object-fit: cover;
}
.bg-main-blog{
    background-color: #eff2fc;
    color: var(--main);
}
.no-post-wrapper{
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    padding: 50px 0;
}
.no-post-wrapper .no-post-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    border-radius: 50px;
    font-size: 40px;
    border: 1px solid #ddd;
}
.list-inline-item:hover a{
    color: var(--primary) !important;
}
.buttle-ul{
    margin-bottom:15px;
}
.buttle-ul .buttle-list{
    margin-bottom: 5px;
    font-weight: 300;
    margin-left: 20px;
    list-style: disc;
    padding-left: 6px;
}

.number-list{
    list-style:decimal !important;  
}
.more-option{
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    display: inline-block;
}
.qus-ans-group{
    border-bottom:1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 10px;
    font-weight: 300;
}
.download-brochure-wrapper{
    position: relative;
    overflow: hidden;
    transition: 0.5s all;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}
.download-brochure-wrapper img{
    border-radius: 6px;
}
.download-brochure-wrapper .download-brochure-btn{
    position: absolute;
    bottom: -50px;
    left: 0;
    font-size: 14px;
    background: var(--primary-hover);
    border-radius: 0 0 5px 5px;
    padding: 5px 10px;
    font-weight: bold;
    z-index: 1;
    width: 100%;
    text-align: center;
}

.date-time-icon{
    position: absolute;
    right: 14px;
    top: 14px;
    font-size: 20px;
}

.vision-mission-wrapper .vision-mission-inner {
    padding: 25px 50px;
    border-radius: 20px;
    color: #fff;
    text-align: center;
    height: 100%;
    background: var(--primary);
}
.vision-title {
    color: var(--primary-hover);
    font-size: 30px !important;
}
.img-skewed:hover{
    transform: translateY(-5px) !important;
}
.img-skewed-start .img-skewed-item {
    box-shadow: 0 2.75rem 5.5rem -3.5rem rgba(189, 197, 209, .5), 0 2rem 4rem -2rem rgba(33, 50, 91, .3);
    box-shadow: 25px 60px 125px -25px rgba(80, 102, 144, .1), 16px 40px 75px -40px rgba(0, 0, 0, .2);
    border-radius: 10px;
    position: relative;
}

.btn-hover{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 16px;
    height: 44px;
    justify-content: center;
    overflow: hidden;
    padding: 0 58px 0 24px;
    position: relative;
    text-decoration: none;
    width: min-content;
    border-radius: 100px;
    box-shadow: none;
    transform: none;
    transform-origin: 50% 50% 0px;
    background: #000;
    transition: width 2s; 
}
.btn-text{
    color: #fff;
    color: #fff;
    white-space: nowrap;
    display: flex;
    align-items: center;
    transition: width 2s;
}
.icon-hover{
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 100px;
    transition: width 2s;
    right: 2px;
    top: 2px;
    background: #fff;
    line-height: 38px;
}

.icon-hover::before{
    content: '➜';
  color: black;
    font-size: 14px;
    font-weight: bold;

}
.btn-hover:hover .icon-hover::before{
    background: #fff;
    left: 2px;
    width: auto;
    transition: width 2s;
}

.btn-icon-option{
    background: #fff;
    color: #000;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
}
.navbar-toggler{
    background: transparent;
    border: none;
    padding: 0;
}
.navbar-toggler:focus{
    box-shadow: none;
}
.navbar-toggler-icon{
    background-image:url(../images/ham-icon.svg);
}
.workshop-item .slick-list, .client-speak-item .slick-list{
    padding-top: 20px;
}
.workshop-card{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}
.floating_btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 70px;
    height: 70px;
    display: flex;
    flex-direction: column;
    align-items:center;
    justify-content:center;
    z-index: 1000;
  }
  
  @keyframes pulsing {
    to {
      box-shadow: 0 0 0 30px rgba(232, 76, 61, 0);
    }
  }
  
  .contact_icon {
    background-color: #42db87;
    color: #fff;
    width: 66px;
    height: 66px;
    font-size:32px;
    border-radius: 50px;
    text-align: center;
    box-shadow: 2px 2px 3px #999;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(0px);
    animation: pulse 2s infinite;
    box-shadow: 0 0 0 0 #42db87;
    -webkit-animation: pulsing 2s infinite cubic-bezier(0.66, 0, 0, 1);
    -moz-animation: pulsing 2s infinite cubic-bezier(0.66, 0, 0, 1);
    -ms-animation: pulsing 2s infinite cubic-bezier(0.66, 0, 0, 1);
    animation: pulsing 2s infinite cubic-bezier(0.66, 0, 0, 1);
    font-weight: normal;
    font-family: sans-serif;
    text-decoration: none !important;
    transition: all 300ms ease-in-out;
  }
  
  
  .text_icon {
    margin-top: 8px;
    color: #707070;
    font-size: 13px;
  }
  .image-scale-card{
    position: relative;
    border-radius: 10px;
    padding: 0px;
    border: 1px solid #F2F5F6;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.5s all;
    overflow: hidden;
    transform: scale(1);
    background: #fff;
  }
  .image-scale-card .image-scale-effect{
    transition: 0.5s all;
    border-radius: 10px 10px 0 0;
  }
  .image-scale-card:hover{
        
        transition: 0.5s all;
    }
    .image-scale-card .image-scale-effect img{
       
        width:100%;
    }
    .image-scale-card:hover{
        transform: scale(1.07);
    }
    .cardContent{
        flex: 1 0 auto;
        padding: 0 1rem;
    }
    /* article.card:hover{
        box-shadow: 2px 4px 16px #00000029;
        transform: scale(1.07)
    } */
    .message-box {
    width: 100%;
    background-color: #d4edda; /* Light green background */
    color: #000;
    padding: 15px;
    font-weight: bold;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1050; /* Higher than navbar */
}

/* Adjust navbar when message is present */
.navbar.has-message {
    position: relative !important; /* Change fixed/sticky navbar to relative */
    top: 50px; /* Adjust based on message box height */
}
.whatsapp-chat {
    position: fixed;
    bottom: 20px;
    right: 10px;
}

.client-speak-item .slick-slide{
    margin: 0 20px;
}
.client-speak-item .slick-list{
    padding-bottom: 20px;
}
.home-section.slick-slide{
    margin: 0;
}
.slider-content-height{
    height: 80vh;
}
.fullmoon-section{
    background-image: url(../images/full-moon-header.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: calc(100vh - 112px);
    display: flex;
    align-items: center;
    margin-top: 62px;
}
.dna-matrix-section{
    background-image: url(../images/dna-matrix-header.jpg);
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
    height: 90vh;
    display: flex;
    align-items: center;
}

.banner-slider{
  height: calc(100vh - 60px);
}

/* @media (min-width: 992px) {
    .banner-slider .slider, .banner-slider .slide {
      height: 68vh;
    }
  } */
  
  .banner-slider .slide {
    position: relative;
    transition: 1s;
  }
  .banner-slider .slide .slide-img {
    width: 100%;
    height: auto;
    overflow: hidden;
  }
  @media (min-width: 992px) {
    .banner-slider .slide .slide-img {
      position: absolute;
      /* top: 50%; */
      left: 0;
      /* transform: translateY(-50%); */
    }
  }
  .banner-slider .slick-slide{
    margin:0px;
    background-position: top;
    background-size: cover;
    height: calc(100vh - 230px);
    /* height:80vh; */
  }
  .banner-slider .slide .slide-img img {
    max-width: 100%;
    width: 100%;
    height: auto;
    opacity: 1 !important;
    -webkit-animation-duration: 3s;
            animation-duration: 3s;
    transition: all 1s ease;
  }
  .banner-slider .slide .slide-content {
    position: absolute;
    top: 50%;
    left: 20%;
    transform: translate(-30%, -50%);
    width:40%;
  }
  .banner-slider .slide.third-slide .slide-content {
    left: auto;
    right: 0%;
  }
  .banner-slider .slide .slide-content--headings {
    color: #FFF;
  }
  .banner-slider .slide .slide-content--headings h2 {
    font-size: 4.5rem;
    margin: 10px 0;
  }
  .banner-slider .slide .slide-content--headings .animated {
    transition: all 0.5s ease;
  }
  .banner-slider .slide .slide-content--headings .top-title {
    font-size: 1.5rem;
  }
  .banner-slider .slide .slide-content--headings .title {
    font-size: 2rem;
  }
  .banner-slider .slide .slide-content--headings .button-custom {
    text-decoration: none;
    color: #333;
    padding: 1.2rem 2.5rem;
    font-size: 1.5rem;
  }
  
  .banner-slider .slider [data-animation-in] {
    opacity: 0;
    -webkit-animation-duration: 1.5s;
            animation-duration: 1.5s;
    transition: opacity 0.5s ease 0.3s;
    transition: 1s;
  }
  
  .banner-slider .slick-dotted .slick-slider {
    margin-bottom: 30px;
  }

  
  .banner-slider .slick-nav {
    --active: #fff;
    --border: rgba(255, 255, 255, .12);
    width: 44px;
    height: 44px;
    position: absolute;
    cursor: pointer;
    top: calc(50% - 44px);
  }
  .banner-slider .slick-nav.prev-arrow {
    left: 3%;
    transform: scaleX(-1);
    z-index: 999;
  }
  .banner-slider .slick-nav.next-arrow {
    left: auto;
    right: 3%;
  }
  .banner-slider .slick-nav i {
    display: block;
    position: absolute;
    margin: -10px 0 0 -10px;
    width: 20px;
    height: 20px;
    left: 50%;
    top: 50%;
  }
  .banner-slider .slick-nav i:before, .banner-slider .slick-nav i:after {
    content: "";
    width: 10px;
    height: 2px;
    border-radius: 1px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: var(--active);
    margin: -1px 0 0 -5px;
    display: block;
    transform-origin: 9px 50%;
  }
  .banner-slider .slick-nav i:before {
    transform: rotate(-40deg);
  }
  .banner-slider .slick-nav i:after {
    transform: rotate(40deg);
  }
  .banner-slider .slick-nav:before, .banner-slider .slick-nav:after {
    content: "";
    display: block;
    position: absolute;
    left: 1px;
    right: 1px;
    top: 1px;
    bottom: 1px;
    border-radius: 50%;
    border: 2px solid var(--border);
  }
  .banner-slider .slick-nav svg {
    width: 44px;
    height: 44px;
    display: block;
    position: relative;
    z-index: 1;
    color: var(--active);
    stroke-width: 2px;
    stroke-dashoffset: 126;
    stroke-dasharray: 126 126 0;
    transform: rotate(0deg);
  }
  .banner-slider .slick-nav.animate svg {
    -webkit-animation: stroke 1s ease forwards 0.3s;
            animation: stroke 1s ease forwards 0.3s;
  }
  .banner-slider .slick-nav.animate i {
    -webkit-animation: arrow 1.6s ease forwards;
            animation: arrow 1.6s ease forwards;
  }
  .banner-slider .slick-nav.animate i:before {
    -webkit-animation: arrowUp 1.6s ease forwards;
            animation: arrowUp 1.6s ease forwards;
  }
  .banner-slider .slick-nav.animate i:after {
    -webkit-animation: arrowDown 1.6s ease forwards;
            animation: arrowDown 1.6s ease forwards;
  }
  
  @-webkit-keyframes stroke {
    52% {
      transform: rotate(-180deg);
      stroke-dashoffset: 0;
    }
    52.1% {
      transform: rotate(-360deg);
      stroke-dashoffset: 0;
    }
    100% {
      transform: rotate(-180deg);
      stroke-dashoffset: 126;
    }
  }
  
  @keyframes stroke {
    52% {
      transform: rotate(-180deg);
      stroke-dashoffset: 0;
    }
    52.1% {
      transform: rotate(-360deg);
      stroke-dashoffset: 0;
    }
    100% {
      transform: rotate(-180deg);
      stroke-dashoffset: 126;
    }
  }
  @-webkit-keyframes arrow {
    0%, 100% {
      transform: translateX(0);
      opacity: 1;
    }
    23% {
      transform: translateX(17px);
      opacity: 1;
    }
    24%, 80% {
      transform: translateX(-22px);
      opacity: 0;
    }
    81% {
      opacity: 1;
      transform: translateX(-22px);
    }
  }
  @keyframes arrow {
    0%, 100% {
      transform: translateX(0);
      opacity: 1;
    }
    23% {
      transform: translateX(17px);
      opacity: 1;
    }
    24%, 80% {
      transform: translateX(-22px);
      opacity: 0;
    }
    81% {
      opacity: 1;
      transform: translateX(-22px);
    }
  }
  @-webkit-keyframes arrowUp {
    0%, 100% {
      transform: rotate(-40deg) scaleX(1);
    }
    20%, 80% {
      transform: rotate(0deg) scaleX(0.1);
    }
  }
  @keyframes arrowUp {
    0%, 100% {
      transform: rotate(-40deg) scaleX(1);
    }
    20%, 80% {
      transform: rotate(0deg) scaleX(0.1);
    }
  }
  @-webkit-keyframes arrowDown {
    0%, 100% {
      transform: rotate(40deg) scaleX(1);
    }
    20%, 80% {
      transform: rotate(0deg) scaleX(0.1);
    }
  }
  @keyframes arrowDown {
    0%, 100% {
      transform: rotate(40deg) scaleX(1);
    }
    20%, 80% {
      transform: rotate(0deg) scaleX(0.1);
    }
  }
  .img-custom-size{
    max-height:450px;
  }
  @media screen and (max-width: 1400px) {
    .img-custom-size{
        max-height:350px;
    }
    
  }
  @media screen and (max-width: 576px) {
    .img-custom-size{
        max-height:300px;
    }
    
  }
  .slider-item-arrow .slick-nav {
    opacity: 0.5;
  }
  .slider-item-arrow .slick-nav:hover {
    opacity: 1;
  }
  .slider-item-arrow .slick-nav {
    --active: #fff;
    --border: #fff;
    width: 44px;
    height: 44px;
    position: absolute;
    cursor: pointer;
    top: calc(50% - 44px);
}
.slider-item-arrow .slick-nav.next-arrow {
  left: auto;
  right: -6%;
}

.slider-item-arrow .slick-nav.prev-arrow {
  left: -6%;
  z-index: 999;
  transform: scaleX(-1)
}

.slider-item-arrow .slick-nav svg {
  width: 44px;
  height: 44px;
  display: block;
  position: relative;
  z-index: 1;
  color: var(--active);
  stroke-width: 2px;
  stroke-dashoffset: 126;
  stroke-dasharray: 126 126 0;
  transform: rotate(0deg);
}
.slider-item-arrow .slick-nav:before, .slider-item-arrow .slick-nav:after {
  content: "";
  display: block;
  position: absolute;
  left: 1px;
  right: 1px;
  top: 1px;
  bottom: 1px;
  border-radius: 50%;
  border: 2px solid var(--border);
}
.slider-item-arrow .slick-nav:hover:before, .slider-item-arrow .slick-nav:hover:after{
  transform: scale(1.05);
}
.slider-item-arrow .slick-nav i {
  display: block;
  position: absolute;
  margin: -10px 0 0 -10px;
  width: 20px;
  height: 20px;
  left: 50%;
  top: 50%;
}
.slider-item-arrow .slick-nav i:before, .slider-item-arrow .slick-nav i:after {
  content: "";
  width: 10px;
  height: 2px;
  border-radius: 1px;
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--active);
  margin: -1px 0 0 -5px;
  display: block;
  transform-origin: 9px 50%;
}
.slider-item-arrow .slick-nav i:before {
  transform: rotate(-40deg);
}
.slider-item-arrow .slick-nav i:after {
  transform: rotate(40deg);
}
.blog-item.slider-item-arrow .slick-nav:before, .blog-item.slider-item-arrow .slick-nav:after{
  border-color: var(--primary);
}
.blog-item.slider-item-arrow .slick-nav i:before, .blog-item.slider-item-arrow .slick-nav i:after{
  background: var(--primary);
}
.consultation-section{
  padding-top: 62px;
  padding-bottom: 0;
}
.workshop-title{
  padding: 10px;
}
.dna-headline{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
}
.dna-headline h1{
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
}
.dna-headline sup{
  font-size: 20px;
  font-weight: normal;
}
 .blueprint-headline sup{
  font-size: 30px;
  font-weight: normal;
  color: #fff;
}
.blueprint-headline h1{
  color: #fff;
  font-size: 45px;
  font-weight: bolder;
  display: inline-block;
}
.trans-text{
  text-align: center;
    position: absolute;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
}
.l-4{
  letter-spacing: 4px;
}
.meditation-title{
  font-size: 40px;
  font-weight: bold;
}
.abouts-section-hero{
  padding-top: 62px;
  padding-bottom: 0;
}
.abouts-section-hero video{
  width: 100%;
}
.carousel {
  overflow: auto;
  scroll-snap-type: x mandatory;

  /* gen a button by putting content into the new pseudo */
  &::scroll-button(right) {
    /* icon font with accessible fallback text */
    content: 'arrow_forward' / 'Next';
  }
  
  &::scroll-button(left) {
    content: 'arrow_back' / 'Previous';
  }
}
.hall-of-fame-section{
  background: url(../images/hall-of-fame-hero.jpg) no-repeat center;
  margin-top: 62px;
  background-size: cover;
}
.blog-hero-section{
  padding: 60px 0;
}
.home-overlay-section{
  position: absolute;
  bottom: 100px;
  width: 100%;
  text-align: center;
}
.home-overlay-section img{
  opacity: 0.1;
}
/* .home-overlay-section{
  background: url(../images/white-bg-img.png) no-repeat center;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
} */
 .workshop-card-height{
  height: 100%;
 }
.blog-cat{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
    .blog-cat .category.active {
        background-color: var(--primary-hover);
        color: var(--primary);
    }
    .blog-cat .category {
        border-radius: 6px;
        color: var(--main);
        background-color: #eff2fc;
        padding: 5px 10px;
    }
.yearanchor:hover{
    /*font-weight:bold;*/
    color:var(--primary);
    cursor:pointer;
}
.blogDetail-Style ul {
   padding-left:2rem;
}
.blogDetail-Style ul li{
    list-style:disc;
    line-height:1.6;
}
    .blogDetail-Style ul li img {
        max-width: 100%;
        height: auto;
        border-radius: 7px;
        border: 5px solid #ddd;
    }
    @media(max-width: 576px) {
        .blog-hero-section{
           padding-top: 57px !important;
        }
    }
.input-has-icon input{
    padding:5px 10px;
}
.total-post-number {
    width: 24px;
    height: 24px;
    background-color: #fff;
    text-align: center;
    border-radius: 5px;
    transition: .3s;
    position: relative;
    display: inline-block;
}
.blog-breadcrumb {
    background-color: #f8f9fa;
    padding: .75rem 1.25rem;
    border-radius: 8px;
}