/*My Custom CSS Comes Here*/

@font-face {
    font-family: 'monitoricabold';
    src: url('fonts/monitorica.bold-webfont.woff2') format('woff2'),
         url('fonts/monitorica.bold-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

body h1, body h2, body h3, body h4, body h5, body h6{
    color: #8d2b8c;
}

body.path-node h1, body.path-node h2, body.path-node h3, body.path-node h4,
body.path-node h5, body.path-node h6{
    color: #8d2b8c !important;
}

body{
    background-color: #E8E1CE !important;
     background-image: url('./images/textured-kitenge-16.png');
     background-blend-mode: screen;
     background-size: cover;
}

body .card h1, body .card h2, body .card h3, body .card h4, body .card h5, body .card h6 {
    color: #8d2b8c;
}

body .card, body .jss1{
    background-color: #dad3c2;
}

body .nav-tabs .nav-link{
   color: var(--bs-success);
}

/*Main Navigation Bar*/
header .navbar{
    background-color: color(srgb 0.955 0.715 0.043) !important;
}



/*Main Navigation Bar Links*/

/*Customize Default Breadcrumb Appearance*/

.breadcrumb{
    justify-content: center;
}

.navbar-brand a.site-title{
    font-family: 'monitoricabold';
    font-size: 39px;
    font-weight: initial;
    color: #8d2b8c !important; 
}

body .navbar-nav .nav-link.active,
body .nav-link.active  {
    color: var(--bs-warning);
  }

body .navbar-nav .nav-link:hover,
body .nav-link:hover  {
    color: var(--bs-success);
  }

  body .navbar-nav .nav-link,
body .nav-link {
    color: white;
}

body .btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: green;
  --bs-btn-hover-bg: #E8E1CE;
  --bs-btn-hover-border-color: #E8E1CE;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #8d2b8c ;
  --bs-btn-active-border-color: #8d2b8c ;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #8d2b8c ;
  --bs-btn-disabled-border-color: #8d2b8c;
}

body .bg-dark{
    background-color: #8d2b8c !important;
}

body .MuiButton-containedPrimary{
    background-color: #8d2b8c;;
}

/*Customize Link Colour*/

h6, .form-wrapper.accordion .accordion-item h2, .form-wrapper.accordion .accordion-item .h2, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1{
    color: var(--bs-purple);
    font-family: 'monitoricabold';
}

body a{
    color: #8d2b8c;
    text-decoration: none;
}

.link-orange a{
    color: #8d2b8c;
}

.link-yellow a{
    color: #f6c700;
}

.link-yellow a:hover{
    color: green;
}

.link-orange .modal-footer a{
    color: white;
}

a {
    color: var(--bs-success);
    text-decoration: underline;
}

a:hover {
    color: var(--bs-warning);
}

h5.card-title a{
    text-decoration: none;
}

/*Override Slider Image Width*/
.main-slider .img-fluid{
    width: 100%;
}

.main-slider  .carousel-caption{
    /*display: block !important;*/
    left: 0%;
    right: 0%;
    height: 100vh;
    position: absolute;
    top: 50%;
    translate: 0% -50%;
    display: flex !important;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-flow: column;
}

/*.main-slider  .carousel-caption .mask{
    height: 100vh;
    background: #000000b2;
    top: 100%;
    position: absolute;
    width: 100%;
    translate: 0% -100%;
}*/

.main-slider  .carousel-caption .mask{
   height: 100%;
   background-color: #000000b2;
   top: 50%;
   position: absolute;
   width: 100%;
   translate: 0% -50%;  
}

.main-slider  .carousel-caption h3,
.main-slider  .carousel-caption h5,
.main-slider  .carousel-caption p,
.main-slider  .carousel-caption h2,
.main-slider  .carousel-caption h4,
.main-slider  .carousel-caption a{
    color: #fff;
    z-index: 1;
    position: relative;
}

 .main-slider .carousel-caption h3 {
    color: var(--bs-warning);
}

.custom-list ul li:before,
.custom-list ol li:before{
    content: "\F633";
    display: inline-block;
    font-family: bootstrap-icons !important;
    font-style: normal;
    font-weight: normal !important;
    font-variant: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    line-height: 1;
    vertical-align: -0.125em;
    padding-right: 1rem;
    /*
    font-family: "Font Awesome 6 Pro";
    position: absolute;
    top: 2px;
    left: -15px;
    z-index: 1;
    color: #2D89FB;*/
}

.custom-list ul li,
.custom-list ol li{
    position: relative;
    list-style: none;
}

.custom-list ul,
.custom-list ol{
    padding-left: 0rem;
}

/*Articles Override*/

.blog-teaser-1 h2{
    text-align: center;
    margin-bottom: 2rem;
    border-top: 1px solid #8d2b8c;
    padding-top: 2rem;
}

/*Projects Teaser*/

.header-image .block-system-breadcrumb-block{
    position: absolute;
    top: 40%;
    z-index: 1;
}

.header-image .block-field-blocknodeprojectstitle{
    position: absolute;
    top: 50%;
    left: 0%;
    translate: 0% 50%;
    display: block;
    z-index: 1;
}

.header-image .block-system-breadcrumb-block a,
.header-image .block-field-blocknodeprojectstitle h1{
    color: white;
}

.header-image .mask{
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0%;
    background: rgb(0 0 0 / 42%);
}

/*Override Display of Footer Items*/

footer .region-footer{
    flex-direction: row !important;
    /*flex-wrap: wrap;*/
}

iframe#twitter-widget-0 {
    width: 100% !important;
}

.call-to-teach{
    background-color: #000000ba;
    background-blend-mode: overlay;
    color: white;
}

.call-to-teach h2{
    color: white;
    padding-top: 0px;
    border-top: 0px;
}


#available-packages .card-body{
   justify-content: space-between;
   display: flex;
   flex-direction: column;
  
}


@media  screen and (min-width: 768px) and (max-width: 1398px) {
    #available-packages .card-body {
        min-height: 40vh;
        max-height: 40vh;
        height: -webkit-fill-available;
    }
}
@media  screen and (max-width: 767px) {
.wellness-cta{
    background-image: none !important;
    min-height: 50vh;
    height: -webkit-fill-available;
}
}


@media  screen and (min-width: 992px) {
    .path-frontpage .view-articles .card-body{
    height: 30vh;
   }
}

@media screen and (max-width: 990px){
        .main-slider .carousel-caption .mask{
        /*top: 120%;*/
    }
}

@media  screen and (min-width: 991px) {

    .path-frontpage header .navbar {
        background-color: color(srgb 0.955 0.715 0.043) !important;
        /*position: absolute;*/
        z-index: 2;
        width: 100%;
    }
    .main-slider  .carousel-caption{
        /*bottom: 6.25rem;*/
       /* height: 100vh;
        position: absolute;
        top: 0%;
        padding-top: 15%;*/
    }

     .main-slider  .carousel-caption{
        height: 100vh;
        position: absolute;
        top: 50%;
        translate: 0% -50%;
        display: flex !important;
        justify-content: center;
        align-content: center;
        align-items: center;
        flex-flow: column;
    }

    .main-slider .carousel-caption h3{
        color: var(--bs-warning);
        font-size: 55px;
    }

    .main-slider  .carousel-caption h3,
    .main-slider  .carousel-caption h5,
    .main-slider  .carousel-caption p,
    .main-slider  .carousel-caption h2,
    .main-slider  .carousel-caption h4,
    .main-slider  .carousel-caption a{
 
        margin-bottom: 40px;
    }
    .main-slider  .carousel-caption h5{
        font-size: 30px;
    }


}



/*Accordions Override*/


.ckeditor-accordion-container > dl{
  border: 0px solid #8d2b8c;
}

.ckeditor-accordion-container > dl dt > a{
 padding: 10px 15px 10px 0px !important;
 background-color: transparent !important;
 border-bottom: 0px solid #8d2b8c !important;
 color: rgb(3 57 94) !important;
 font-weight: lighter !important;
 font-size: 18px !important;
 text-decoration: none;
}

.ckeditor-accordion-container > dl dt.active > a,
.ckeditor-accordion-container > dl dt > a:hover{
 padding: 10px 15px 10px 15px !important;
}

.ckeditor-accordion-container > dl dt > a:before{
 content: "// ";
}

.ckeditor-accordion-container > dl dt > a:hover{
 background-color: #8d2b8c !important;
 color: #ffffff !important;
}

.ckeditor-accordion-container > dl dt.active > a {
 background-color: #8d2b8c !important;
 color: #ffffff !important;
 text-decoration: none;
}

.ckeditor-accordion-container > dl dt.active > a:hover{
 background-color: #8d2b8c !important;
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle{
 left: 99.2%;
}

.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle,
.ckeditor-accordion-container > dl dt > a:hover > .ckeditor-accordion-toggle{
 left: 98%;
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before {
 left: -4px;
 -webkit-transform: rotate(135deg);
 transform: rotate(90deg);
}

.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before {
 transform: rotate(0deg);
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after {
 right: 24px;
 -webkit-transform: rotate(0deg);
 transform: rotate(0deg);
}

.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:after {
 transform: rotate(0deg);
}

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

.ckeditor-accordion-container > dl{
 border-bottom: 0px solid #8d2b8c !important;
 border-top: 1px solid #8d2b8c;
 padding-top: 0px !important;
}
.ckeditor-accordion-container > dl, .ckeditor-accordion-container > dl dt, .ckeditor-accordion-container > dl dd{
 padding: 6px 0px;
 border-bottom: 1px solid #8d2b8c;
}

.ckeditor-accordion-container > dl dt.active{
 padding: 19px 0px 0px;
}

.ckeditor-accordion-container > dl dt.active{
 border-bottom: 0px solid #8d2b8c;
}

.ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt > a > .ckeditor-accordion-toggle:after{
 background:#8d2b8c;
}

.ckeditor-accordion-container > dl dt > a:hover > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt > a:hover > .ckeditor-accordion-toggle:after,
.ckeditor-accordion-container > dl dt.active > a:hover > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt.active > a:hover > .ckeditor-accordion-toggle:after,
.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before, .ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:after{
 background:#ffffff;
}

.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:before, 
.ckeditor-accordion-container > dl dt.active > a > .ckeditor-accordion-toggle:after{
 top: 30%;
}

.fix-cards .card{
    min-height: 473px;
}

.path-frontpage .view-articles .card{
    min-height: 300px;
}

.wellness-cta{
    min-height: 66vh;
    height: -webkit-fill-available;
    max-height: 66vh;
}