/*
 * Globals
 */

 @import url('https://fonts.googleapis.com/css2?family=Quattrocento+Sans:wght@400;700&display=swap');


/* Custom default button */
.btn-light,
.btn-light:hover,
.btn-light:focus {
  color: #333;
  text-shadow: none; /* Prevent inheritance from `body` */
}


/*
 * Base structure
 */

body {
  text-shadow: 0 .05rem .1rem rgba(0, 0, 0, .5);
  box-shadow: inset 0 0 5rem rgba(0, 0, 0, .5);
  font-family: "Quattrocento Sans", sans-serif;
}

.cover-container {
  max-width: 50em;
}

.lead {
  font-size: 1rem;
  font-weight: 700;
  text-wrap: pretty;
}
.p-24-b {
  font-size: 0.875rem;
  font-weight: 700;
}
@media (min-width: 768px) {
  .lead {
    font-size: 1.625rem;
  }
  .p-24-b {
    font-size: 1.5rem;
  }

}
a.site-link {
  color: #fff;
  text-decoration: none;
  transition: all 0.3s ease;
}
a.site-link:hover {
  color: #00B4B5;
  text-decoration: none;
}
.wanderlust {
    max-width: 78%;
    height: auto;
}
.natlangkawi {
    max-width: 83%;
    height: auto;
}
@media (min-width: 992px) {
    .wanderlust, .natlangkawi {
        max-width: 100%;
        height: auto;
    }
}

.d-desktop-br { display: none; }
@media (min-width: 992px) {
  .d-desktop-br { display: inline; }
}

/***Video Background***/
.bg-video-wrapper {
  position: fixed;
  top: 0; left: 0; width: 100vw; height: 100vh;
  z-index: -1;
  overflow: hidden;
}
.bg-video {
  position: absolute;
  top: 0; left: 0; width: 100vw; height: 100vh;
  object-fit: cover;
  display: none;
}
.bg-video-desktop { display: block; }

@media (max-width: 991.98px) {
  .bg-video-desktop { display: none; }
  .bg-video-tablet { display: block; }
}
@media (max-width: 767.98px) {
  .bg-video-tablet { display: none; }
  .bg-video-mobile { display: block; }
}

/***for vimeo background***/
.bg-vimeo {
  position: absolute;
  top: 0; left: 0; width: 100vw; height: 100vh;
  pointer-events: none;
}

/*
 * Header
 */


/****buttons****/

.btn-lgk {
    background-color: #00B4B5;
    color: #fff;
    border-radius: 1rem;
    padding: 0.75rem 1.875rem;
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-lgk:hover{
    background-color: #008C8D;
    color: #fff;
    text-decoration: none;
}

/****Animation****/
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.8s ease forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: none;
  }
}
.fade-in-down {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeInDown 0.8s ease forwards;
}

@keyframes fadeInDown {
  to {
    opacity: 1;
    transform: none;
  }
}
.fade-in-zoom {
  opacity: 0;
  transform: scale(0.8);
  animation: fadeInZoom 0.8s ease forwards;
}

@keyframes fadeInZoom {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/*****MARGIN & PADDING EXTRA*****/

.m-6 {
    padding: 5rem;
}
.mt-6 {
    margin-top: 5rem !important;
}
.mt-7 {
    margin-top: 7rem !important;
}
.my-6 {
    margin-top: 5rem !important;
    margin-bottom: 5rem !important;
}
.mx-6 {
    margin-left: 5rem !important;
    margin-right: 5rem !important;
}
.my-7 {
    margin-top: 7rem !important;
    margin-bottom: 7rem !important;
}
.p-7 {
    padding: 7rem;
}
.pt-6 {
    padding-top: 5rem !important;
}
.pt-7 {
    padding-top: 7rem !important;
}
.pt-8 {
    padding-top: 7.5rem !important;
}
.pt-9 {
    padding-top: 8.5rem !important;
}
.pb-6 {
    padding-bottom: 5rem !important;
}
.pb-7 {
    padding-bottom: 7rem !important;
}
.pb-8 {
    padding-bottom: 8rem !important;
}
.pb-9 {
    padding-bottom: 15.5rem !important;
}
.px-6 {
    padding-left: 5rem !important;
    padding-right: 5rem !important;
}
.py-6 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}
.py-7 {
    padding-top: 7rem !important;
    padding-bottom: 7rem !important;
}
.py-8 {
    padding-top: 7.5rem !important;
    padding-bottom: 7.5rem !important;
}
.py-9 {
    padding-top: 8.5rem !important;
    padding-bottom: 8.5rem !important;
}
.py-10 {
    padding-top: 9.5rem !important;
    padding-bottom: 9.5rem !important;
}

.mt-150 {
    margin-top: 75px;
}
.mt-200 {
    margin-top: 100px;
}
.mt-250 {
    margin-top: 125px;
}
.mt-300 {
    margin-top: 150px;
}

@media (min-width: 576px) {
    .mt-sm-6 {
        margin-top: 5rem !important;
    }
    .mt-sm-7 {
        margin-top: 7rem !important;
    }
    .pt-sm-6 {
        padding-top: 5rem !important;
    }
    .pt-sm-7 {
        padding-top: 7rem !important;
    }
    .pb-sm-6 {
        padding-bottom: 5rem !important;
    }
    .pb-sm-7 {
        padding-bottom: 7rem !important;
    }
    .px-sm-6 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }
    .py-sm-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .py-sm-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
    .mt-150 {
        margin-top: 150px;
    }
    .mt-200 {
        margin-top: 200px;
    }
    .mt-250 {
        margin-top: 250px;
    }
    .mt-300 {
        margin-top: 300px;
    }
}

@media (min-width: 768px) {
    .mt-md-6 {
        margin-top: 5rem !important;
    }
    .mt-md-7 {
        margin-top: 7rem !important;
    }
    .pt-md-6 {
        padding-top: 5rem !important;
    }
    .pt-md-7 {
        padding-top: 7rem !important;
    }
    .pb-md-6 {
        padding-bottom: 5rem !important;
    }
    .pb-md-7 {
        padding-bottom: 7rem !important;
    }
    .px-md-6 {
        padding-left: 5rem !important;
        padding-right: 5rem !important;
    }
    .py-md-6 {
        padding-top: 5rem !important;
        padding-bottom: 5rem !important;
    }
    .py-md-7 {
        padding-top: 7rem !important;
        padding-bottom: 7rem !important;
    }
}

    @media (min-width: 992px) {
        .mt-lg-6 {
            margin-top: 5rem !important;
        }
        .mt-lg-7 {
            margin-top: 7rem !important;
        }
        .pt-lg-6 {
            padding-top: 5rem !important;
        }
        .pt-lg-7 {
            padding-top: 7rem !important;
        }
        .pt-lg-8 {
            padding-top: 9rem !important;
        }
        .pt-lg-9 {
            padding-top: 11rem !important;
        }
        .pb-lg-6 {
            padding-bottom: 5rem !important;
        }
        .pb-lg-7 {
            padding-bottom: 7rem !important;
        }
        .pb-lg-9 {
            padding-bottom: 15.5rem !important;
        }

        .px-lg-6 {
            padding-left: 5rem !important;
            padding-right: 5rem !important;
        }
        .py-lg-6 {
            padding-top: 5rem !important;
            padding-bottom: 5rem !important;
        }
        .py-lg-7 {
            padding-top: 7rem !important;
            padding-bottom: 7rem !important;
        }
        .py-lg-9 {
            padding-top: 8.5rem !important;
            padding-bottom: 8.5rem !important;
        }
        .py-lg-10 {
            padding-top: 9.5rem !important;
            padding-bottom: 9.5rem !important;
        }
        
        .mx-lg-6 {
            margin-left: 5rem !important;
            margin-right: 5rem !important;
        }
        .my-lg-6 {
            margin-top: 5rem !important;
            margin-bottom: 5rem !important;
        }
        .my-lg-7 {
            margin-top: 7rem !important;
            margin-bottom: 7rem !important;
        }
    }
    @media (min-width: 1200px) {
        .mt-xl-6 {
            margin-top: 5rem !important;
        }
        .mt-xl-7 {
            margin-top: 7rem !important;
        }
        .pt-xl-6 {
            padding-top: 5rem !important;
        }
        .pt-xl-7 {
            padding-top: 7rem !important;
        }
        .pt-xl-9 {
            padding-top: 11rem !important;
        }
        .pb-xl-6 {
            padding-bottom: 5rem !important;
        }
        .pb-xl-7 {
            padding-bottom: 7rem !important;
        }
        .pb-xl-9 {
            padding-bottom: 15.5rem !important;
        }
        .px-xl-6 {
            padding-left: 5rem !important;
            padding-right: 5rem !important;
        }
        .px-xl-7 {
            padding-left: 7rem !important;
            padding-right: 7rem !important;
        }
        .py-xl-6 {
            padding-top: 5rem !important;
            padding-bottom: 5rem !important;
        }
        .py-xl-7 {
            padding-top: 7rem !important;
            padding-bottom: 7rem !important;
        }
        .py-xl-8 {
            padding-top: 8.5rem !important;
            padding-bottom: 8.5rem !important;
        }
        .py-xl-9 {
            padding-top: 10rem !important;
            padding-bottom: 10rem !important;
        }
        .py-xl-10 {
            padding-top: 11.5rem !important;
            padding-bottom: 11.5rem !important;
        }

    }


/**********************/