@import url('https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght@400;500;600;700;800&display=swap');
 body{
  font-family: 'Kumbh Sans', sans-serif;
 }
 .contact-us-bg{
  background-image: url(images/nairobi-city.jpg);
  background-size:cover;
  background-position: center center;
  background-repeat: no-repeat;
}
.contact-us-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.contact-us-bg{
  position: relative;
}
.contact-us-bg > *{
  z-index: 10;
  position: relative;
  /* color:white; */
}

.slider-img {
    max-width: 100%;
    height: 80px;
    object-fit: contain;

  }
  .slider-img2 {
    max-width: 100%;
    height: 80px;
    object-fit: contain;
    filter: grayscale(100);

  }
  .slider-img:hover{
    filter: grayscale(100);
    transition: all 1s;
  }
  .slider-img2:hover{
    filter: grayscale(0);
    transition: all 1s;
  }

.service_box{
    position: relative;
    box-sizing: border-box;
}

.service_box::after{
    content:"";
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 0px solid #312783;
    border-right: 2px solid #312783;
    border-left: 0px solid #312783;
    border-bottom: 2px solid #312783;
    top: 93%;
    left: 50%;
    margin-left: -15px;
    transform: rotate(45deg);
    background-color: #312783;
}

  [x-cloak] {
    display: none !important;
  }


  .contact-bg{
    background-image: url(images/wave.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .loader{
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .loader.hidden{
    animation: fadeOut 1s;
    animation-fill-mode: forwards;
  }

  @keyframes fadeOut {

    100%{
      opacity: 1;
      visibility: hidden;
    }

  }

.box {
  display: none;
  transform: rotate(-30deg);
  text-align: center;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  position: fixed;
}

.box {
  transition: 1s;
}

.box:hover {
  transform: rotate(0deg);
  cursor: pointer;
}


.blur-background-filter{
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

.call-to-action-bg{

  background-repeat: no-repeat;
  background-position: right;
  background-size: contain;

}

.call-to-action-bg{
  background-image: url(images/manager-person.png);
  background-size:contain;
  background-position: calc(100% - 200px) top;
  background-repeat: no-repeat;
}
.call-to-action-bg::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right,   rgba(49, 39, 131) 40% ,rgba(33, 187, 239, .5));
  z-index: 1;
}
.call-to-action-bg{
  position: relative;
}
.call-to-action-bg > *{
  z-index: 10;
  position: relative;
  color:white;
}

@keyframes slide-from-right {

  from{
    margin-left: 1000px;
  }
  to{
    margin-left: 10px;
  }

}
@keyframes slide-from-left {

  from{
    margin-left: -800px;
  }
  to{
    margin-left: 10px;
  }

}
.slide-from-right {
  animation-name: slide-from-right;
  animation-duration: 2s;
  animation-timing-function: ease-in-out ;
  animation-fill-mode: forwards;


}
.slide-from-left {
  animation-name: slide-from-left;
  animation-duration: 2s;
  animation-timing-function: ease;
}


#mainContainer{
  background: white !important;
}
ul{
  list-style: square;
  margin-left: 20px !important;
}
h2.wp-block-heading {
  margin-top: 15px;
  padding-bottom: 10px;
  font-size: 3vh;
}
h3.wp-block-heading  {
  margin-top: 10px;
}

/* Create a class selector targeting elements with class "rich_editor"*/
.rich_editor {
  /* Paste your previously defined styles here */

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    margin-top: 0.5em;  /* Top margin for headings */
    margin-bottom: 0.5em;  /* Bottom margin for headings */
  }

  h1 {
    font-size: 2.5em; /* Larger size for h1 */
    font-weight: 700;
  }

  h2 {
    font-size: 2em; /* Slightly smaller size for h2 */
    font-weight: 700;
  }

  h3, h4, h5, h6 {
    font-size: 1.5em; /* Consistent size for smaller headings */
    font-weight: 700;
  }

  /* Paragraphs */
  p {
    margin-top: 1em;  /* Top margin for paragraphs */
    margin-bottom: 1em;  /* Bottom margin for paragraphs */
  }

  /* Inline elements */
  span, strong {
    margin: 0 0.25em; /* Small margin around inline elements */
  }

  /* Unordered list */
  ul {

    padding: 0; /* No default padding for list */
  }

  li {
    margin: 0.5em 0; /* Margin for list items */
  }

  /* Generic block element (div) */
  div {
    margin-top: 1em; /* Top margin for generic block elements */
    margin-bottom: 1em; /* Bottom margin for generic block elements */
  }

  p strong {
  display: block;  /* Make strong element display as block-level */
  font-size: 1.8em;  /* Adjust font size for emphasis */
  font-weight: bold;  /* Maintain bold weight */
  margin-top: 0.5em;  /* Add some top margin for separation */
  margin-bottom: 0.25em; /* Add some bottom margin */
}
}




@media (max-width:768px) {
  .hero-section{
    height: 60vh;
    background-image: url(images/hero-image.jpg);
    background-size: cover;
    background-position:  center 24px ;
    margin-bottom: 0px;
}
.box {
  display: none;
  text-align: center;
  bottom: 60px;
  right: 20px;
  z-index: 99;
  position: fixed;

}
h1 {
  font-size: 1.2em; /* Larger size for h1 */
  font-weight: 700;
}

h2 {
  font-size: 0.8em; /* Slightly smaller size for h2 */
  font-weight: 700;
}

h3, h4, h5, h6 {
  font-size: 0.5em; /* Consistent size for smaller headings */
  font-weight: 700;
}


}