html, body {
    overflow-x: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    font-family: 'Khula', sans-serif !important;
    scroll-behavior: smooth !important;
    }
    
    h1, h2, h3, h4, h5, h6 {
    font-weight: 800 !important;
    font-family: 'Khula', sans-serif !important;
    margin-bottom: 2px !important;
    }
    .page-section {
    margin-bottom: 100px;
    }
    
    .my-box-header {
    background-color: #d0d5db;
    padding: 8vw;
    margin-right: 1.5vw;
    }
    .my-carousel-caption-1 {
    top: 30% !important;
    bottom: 30% !important;
    left: 10% !important;
    padding-top: 10px !important;
    padding-bottom: 80px !important;
    text-align: left !important;
    }
    .my-carousel-caption-1 h1 {
    line-height: 0.9 !important;
    }
    .my-carousel-caption-1 p {
    line-height: 1 !important;
    }
    .my-carousel-caption-2 {
    right: 35% !important;
    bottom: 5vw !important;
    left: 35% !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }
    .my-carousel-caption-2 h1 {
    line-height: 1 !important;
    }
    .my-carousel-caption-2 h2 {
    line-height: 0 !important;
    }
    
    /*caption carousel 3*/
    .my-carousel-caption-3 {
    right: 37.5vw !important;
    top: 15vw !important;
    left: 37.5vw !important;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    }
    .my-carousel-caption-3 h1 {
    line-height: 0.6 !important;
    }
    .my-carousel-caption-3 p {
    background-color: #c39b49 !important;
    }
    .my-overlay-right {
    bottom: 42vw;
    position: absolute;
    right: 8vw;
    top: 0;
    z-index: 0;
    pointer-events: none;
    text-align: right;
    }
    
    .my-overlay-left {
    position: absolute;
    top: 0;
    bottom: 27vw;
    left: 3vw;
    z-index: 9;
    pointer-events: none;
    text-align: left;
    }
    .my-overlay-bottom-left {
    position: absolute;
    top: 27vw;
    bottom: 0;
    left: 3vw;
    z-index: 9;
    pointer-events: none;
    text-align: left;
    }
    .my-overlay-bottom-center {
    position: absolute;
    bottom: 5vw;
    left: 32vw;
    right: 32vw;
    z-index: 9;
    pointer-events: none;
    text-align: left;
    text-align: center;
    }

    a:hover {
      cursor: pointer;
    }

    .nav-item a:hover {
      color: #c39b49;
      font-weight: 700;
    }

    .fadeIn {
      transition:2.5s;
      visibility:hidden;
      opacity:0;
      }
    .fadeIn.active 
    {
      visibility:visible;
      opacity:1;
    }
    div#preloader {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99999;
      width: 100%;
      height: 100%;
      overflow: visible;
      background: #fff url('../../assets/img/preloader.gif') no-repeat center center;
    }
    
    /*text*/
    .text-header-section {
        font-size: 5vw;
        padding-top: 1vw;
        line-height: 1
    }

    .text-mission {
        font-size: 2.3vw;
        line-height: 1;
        font-weight: 500;
        margin-top: 2.5vw;
        padding-left: 1.5vw;
    }

    .text-mission-bottom-5 {
        font-size: 2.3vw;
        line-height: 1;
        font-weight: 500;
        margin-bottom: 5vw;
        padding-left: 1.5vw;
    }

    .text-header-rituals {
        margin-top: 1.5vw;
        line-height: 1;
        font-size: 2.5vw
    }

    .text-sub-header-rituals {
        font-weight: 700;
        font-size: 1.3vw;
    }

    .text-join-super-team {
        font-weight: 500;
        font-size: 4.5vw;
        line-height: 1;
        padding: 2vw 6vw;
    }

    .btn-super-team {
        font-size: 2.5vw;
        font-weight: 700;
        background: white;
        color: black;
        padding-top: 0.5vw;
        padding-left: 2vw;
        padding-right: 2vw;
        border-radius: 30px;
    }

    .icon-play {
        font-size: 4vw;
        color: rgb(255, 0, 0);
        position: absolute;
        z-index: 10; 
    }

    /*background*/
    .my-bg-mangrove {
      background-color: #c39b49;
    }
    .my-background-header-index {
        background-color:#5e5e5e;
    }

    /*text color*/
    .my-text-mangrove {
      color: #c39b49;
    }
    .my-text-header-index {
      color:#5e5e5e;
    }

    /*position*/
    .my-p-absolute {
      position: absolute;
    }

    /*border radius*/
    .my-border-radius-20 {
      border-radius: 20px;
    }
    .my-border-radius-30 {
      border-radius: 10px;
    }

    /*border header career*/
    .my-border-header{
      border: 1px solid black; width: 25%; margin: auto; margin-bottom: 3vw;
    }

    /*border left grey*/
    .border-right-grey-1 {
        border-right: 1px solid grey;
    }
    .border-left-grey-1 {
        border-left: 1px solid grey;
    }

    
    /*line height*/
    .my-line-height-0-8{
      line-height: 0.8;
    }
    .my-line-height-1{
      line-height: 1;
    }
    .my-line-height-1-3{
      line-height: 1.3;
    }
    .my-line-height-2-5{
      line-height: 2.5;
    }

    /*font bold*/
    .my-w-500 {
    font-weight: 500;
    }
    .my-w-700 {
    font-weight: 700;
    }
    .my-w-900 {
    font-weight: 900;
    }

    /*font size*/
    .my-fonts-1 {
    font-size: 1vw;
    }
    .my-fonts-1-3 {
    font-size: 1vw;
    }
    .my-fonts-1-5 {
    font-size: 1.5vw;
    }
    .my-fonts-2 {
    font-size: 2vw;
    }
    .my-fonts-2-3 {
    font-size: 2.3vw;
    }
    .my-fonts-2-5 {
    font-size: 2.5vw;
    }
    .my-fonts-3 {
    font-size: 3vw;
    }
    .my-fonts-3-5 {
    font-size: 3.5vw;
    }
    .my-fonts-4 {
    font-size: 4vw;
    }
    .my-fonts-4-5 {
    font-size: 4.5vw;
    }
    .my-fonts-5 {
    font-size: 5vw;
    }
    .my-fonts-5-3 {
    font-size: 5.3vw;
    }
    .my-fonts-6 {
    font-size: 6vw;
    }
    .my-fonts-8 {
    font-size: 8vw;
    }
    
    /*margin top*/
    .mt-vw-2 {
    margin-top: 2vw;
    }
    .mt-vw-3 {
    margin-top: 3vw;
    }
    .mt-vw-4 {
    margin-top: 4vw;
    }
    .mt-vw-10 {
    margin-top: 10vw;
    }

    /*margin bottom*/
    .mb-vw-0 {
        margin-bottom: 0 !important;
    }
    .mb-vw-5 {
        margin-bottom: 5vw;
    }
    
    /*margin left*/
    .ml-vw-1 {
      margin-left: 1vw !important;
    }

    /*margin x*/
    .mx-vw-0, .my-vw-0{
    margin: 0 0;
    }
    .mx-vw-2 {
    margin: 0 2vw;
    }
    .mx-vw-3 {
    margin: 0 3vw;
    }

    /*margin y*/
    .my-vw-5 {
    margin: 5vw 0;
    }

    /*padding*/
    .p-vw-1 {
        padding: 1vw;
    }
    .pr-vw-1-5 {
        padding-right: 1.5vw;
    }
    .pr-vw-2 {
        padding-right: 2vw;
    }

    .pl-vw-1-5 {
        padding-left: 1.5vw;
    }
    .pl-vw-5 {
        padding-left: 5vw;
    }

    .pt-vw-1 {
        padding-top: 1vw;
    }
    .pt-vw-1-5 {
        padding-top: 1.5vw;
    }
    .pt-vw-3-5 {
        padding-top: 3.5vw;
    }

    /*viw media screen*/
    @media only screen and (max-width: 768px) {
    .rituals-culture {
    padding: 0 2vw !important;
    }
    .rituals-culture p {
      font-size: 3vw
    }
    .rituals-culture img {
      width: 100% !important;
    }
    #founded p {
    font-size: 3vw;
    }
    #teamOverview p {
    font-size: 3vw;
    }
    #lookingFor p {
      font-size: 3vw;
      text-align: justify !important;
    }
    }