/*
 * 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 {
  font-family: "Quattrocento Sans", sans-serif;
}

.p-34-b {
    font-size: 1rem;
    font-weight: bold;
    line-height: 1.25rem;
}
.p-30-b {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.25rem;
}
.p-28-b {
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.5rem;
}
.p-20-b {
    font-size: 1.125rem;
    font-weight: bold;
}

.p-15-b {
    font-size: 0.813rem;
    font-weight: bold;
}
@media (min-width: 768px) {
    .p-34-b {
    font-size: 2.125rem;
    line-height: 2.5rem;
    }
    .p-30-b {
    font-size: 2rem;
    line-height: 1.75rem;
    }
    .p-28-b {
    font-size: 1.75rem;
    line-height: 1.5rem;
    }
    .p-20-b {
    font-size: 1.25rem;
    }
    .p-15-b {
    font-size: 0.938rem;
    }
}

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

a.site-link {
  color: #3f3f3f;
  text-decoration: underline;
  font-weight: bold;
  transition: all 0.3s ease;
}
a.site-link:hover {
  color: #00B4B5;
  text-decoration: underline;
}
.wanderlust {
    max-width: 60%;
    height: auto;
}
.natlangkawi {
    max-width: 70%;
    height: auto;
}
/**@media (min-width: 992px) {
    .wanderlust, .natlangkawi {
        max-width: 100%;
        height: auto;
    }
}**/

.bg-wanderlust {
    background-image: url(../images/bg-wanderlust.webp);
    background-position: center left;
    background-size: cover;
}

@media (min-width: 768px) {

    .bg-wanderlust {
    background-image: url(../images/bg-wanderlust.webp);
    background-position: center;
    background-size: cover;
    }
}

/*
 * Header
 */


/****buttons****/

.btn-lgk {
    background-color: #00B4B5;
    color: #fff;
    border-radius: 2rem;
    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;
}
.btn-wanderlust {
    /**background-color: #FFD31A;**/
    background-color: #FFf;
    color: #000;
    border-radius: 2rem;
    padding: 0.75rem 2rem;
    font-family: "Quattrocento Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-wanderlust:hover{
    background-color: #E0B80F;
    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);
  }
}

/***add scrolling text***/
 .scroll-row {
    top:45px;
    width: 100%;
  }

  @media (min-width: 768px) {
    .scroll-row {
      top:0;
    }
  }



    @media (min-width: 768px) {

    }


/*****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;
        }

    }


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