@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@200;300;400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kulim+Park:wght@300;400;600;700&display=swap');


/* Breakpoints */


/* Extra small devices (phones) */
@media (max-width: 576px) {
    body {
        font-size: 14px;
    }
}

/* Small devices (tablets) */
@media (min-width: 577px) and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

/* Medium devices (laptops) */
@media (min-width: 769px) and (max-width: 1024px) {
    body {
        font-size: 18px;
    }
}

/* Large devices (desktops) */
@media (min-width: 1025px) {
    body {
        font-size: 20px;
    }
}

.padded-row{
    padding: 35px 35px 25px 40px;
}

@media (max-width: 530px) {
    .padded-row{
        padding: 35px 0px 35px 0px;
    }   
}

/* End Breakpoints */

/* Change default page background */
body {
    background-color: #F1F3F0;
    font-family: 'Lato', sans-serif !important;
}


/*Typography*/

p, h1, h2, h3, h4, h5, h6{
    color: #0A4D1E;
}

p{
    font-size: 19px;
    line-height: 28px;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'Montserrat Alternates' !important;
    color: #0A4D1E !important;
}

h2{
    font-size: 42px;
    line-height: 50.4px;
    font-weight: 700;
}

h3{
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 120%;
}

h5{
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}



/* End Typography */





/* Header */

/* Top Bar */
.top-bar {
  width: 100%;
  background-color: #F4F4F4;
  padding: 10px 0;
  display: flex;
  justify-content: center;
}

.top-bar .container {
  width: 100%;
  max-width: 1170px;
}

.menu-row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.menu-row p {
  margin: 0;
}


.logo img {
  max-width: 100%;
  height: auto;
}

/* New wrapper to align the div right without breaking internal alignment */
.hours-notice-wrapper {
  display: flex;
  justify-content: flex-end; /* Push the inner box right */
  align-items: center; /* Vertical centering if needed */
  height: 100%;
}

.hours-notice {
  display: flex;
  align-items: center;
  background: #E4E9E2;
  border-radius: 30px;
  color: #0A4D1E;
  max-width: 383px;
  width: auto;
  margin: 0; /* Remove any defaults */
  padding: 6px 20px 6px 8px;
}

.hours-notice i {
  color: #0A4D1E;
  font-size: 49px;
  margin-right: 15px;
}

.hours-notice p{
    margin-bottom: 0;
}

.hours-text {
  display: flex;
  flex-direction: column;
  line-height: 1.4;
}

.hours-text p {
  margin: 0;
}

.hours{
    font-weight: 500;
}

.notices-dropdown {
  color: #0A4D1E;  font-weight: 600;
  font-family: 'Montserrat Alternates', sans-serif;
  text-decoration: none;
  margin-top: 3px;
}


.hours-open {
  font-weight: 600;
  font-family: 'Montserrat Alternates', sans-serif;
  font-size: 18px;
  line-height: 24px;
}


.buy-now-header-button{
    background-color: #A84300;
    color: #ffffff;
    padding-top: 10px;
    width: 187px;
    height: 47px;
    border-radius: 0px;
    font-family: 'Montserrat Alternates', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
}

.buy-now-header-button:hover{
    background-color: #0A4D1E;
    color: #ffffff;
}

.buy-now-header-button p{
     margin: 0px;   
}

/* Main Navigation */

.c-navbar-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
}

.c-mega-menu {
  float: none; /* Cancel any residual floats */
  margin: 0 auto; /* Center in block context if needed */
}


.nav-wrapper{
    background-color: #0A4D1E;
    margin-bottom: 5px;
}

.c-layout-header .c-navbar .c-mega-menu.c-fonts-uppercase > .nav.navbar-nav > li > .c-link
{
    text-transform: none;
    font-weight: 400;
}

@media (min-width: 992px)
{
    .nav > li > a{
        display: block;
        position: relative;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}

@media (min-width: 1207px)
{
    .nav > li > a{
        display: block;
        position: relative;
        padding-left: 15px !important;
        padding-right: 15px !important;
        font-size: 18px !important;
    }
}


  .c-navbar > .container {
    padding-left: 0px;
    padding-right: 0px;
    width: 100% !important;
  }
  
  /* Kill the line above menu items */
  .c-layout-header.c-layout-header-default .c-navbar .c-mega-menu > .nav.navbar-nav > li:focus > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before, .c-layout-header.c-layout-header-default .c-navbar .c-mega-menu > .nav.navbar-nav > li:active > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before, .c-layout-header.c-layout-header-default .c-navbar .c-mega-menu > .nav.navbar-nav > li:hover > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before, .c-layout-header.c-layout-header-default .c-navbar .c-mega-menu > .nav.navbar-nav > li.c-active > a:not(.btn):not(.c-btn-icon):not(.c-quick-sidebar-toggler):before{
      height: 0px !important;
  }





.fa-brands{
    color: #ffffff;
    font-weight: 400;
}

/* Utility Bar */
.utility-bar {
  background-color: #77BF44;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 5px 20px;
}

.utility-bar .languages,
.utility-bar .socials {
  margin-left: 20px;
}

.utility-bar a {
  color: #0A4D1E;
  margin-left: 10px;
  text-decoration: none;
}





/* End Header */

/* Slider */

.c-layout-revo-slider-4{
    position: relative;
    z-index: -5;
}

/* End Slider */





/* Slider Boxes - Front Page */

.slider-box-row{
    height: 200px;
    display: flex;
    gap: 10px;
}

.slider-box-container{
    position: relative;
    margin-top: -90px;
    z-index: 50;
    height: 200px;
}

.slider-box-container-1170{
    height: inherit;
}

.slider-box-column {
    height: 100%;
    padding: 25px;
}

.plan-your-visit-column, 
.plan-your-visit-container, 
.plan-your-visit-item{
    background-color: #77BF44;
}

.plan-your-visit-column{
    border-radius: 0 0 0 35px;
}

.slider-box-plan-your-visit,
.slider-box-buy-tickets
{
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat Alternates', sans-serif;
    line-height: 24px;
    margin-bottom: 20px;
}

.slider-box-map{
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Montserrat Alternates', sans-serif;
    line-height: 24px;
    margin-bottom: 5px;
}

.slider-box-buy-tickets-links{
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 20px;
}

.slider-box-buy-tickets-prices,
.slider-box-map-park-map-text{
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 23px;
    font-weight: 600;
    text-decoration: underline;
    color: #ffffff;
}

.slider-box-plan-your-visit i,
.slider-box-buy-tickets i,
.slider-box-map i{
    margin-right: 10px;
}

.slider-box-pyv-date{
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 27px;
    color: #0A4D1E;
    margin-bottom: 15px;
}

.slider-box-pyv-time{
    font-family: 'Montserrat', sans-serif;
    font-size: 20px;
    line-height: 20px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.slider-box-pyv-last-admission{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 16px;
    color: #0A4D1E;
    font-weight: 700;
}

.slider-box-pyv-last-admission-time{
    color: #ffffff;
    font-size: 24px;
    line-height: 27px;
    font-weight: 700;
    margin-left: 25px;
}

.buy-tickets-column,
.buy-tickets-container, 
.buy-tickets-item{
    background-color: #A84300;
}

.buy-tickets-container p{
    color: #ffffff;
}

.slider-box-map-park-map-row,
.slider-box-map-park-map-map-column,
.slider-box-map-park-map-text-column{
    height: 95px;
}

.slider-box-map-park-map-text-column{
    display: flex;
    flex-direction: column;
}

.slider-box-map-park-map-text{
    margin-top: auto;
}

.map-column,
.map-container{
    background-color: #0A4D1E;
    border-radius: 0 0 35px 0;
}

.map-container p{
    color: #ffffff;
}



/* End Slider Boxes - Front Page */






/* Footer */


.footer-container {
  background: linear-gradient(
    to bottom,
    #E8EcE6 0%,
    #E5D5E4 25%,
    #D8DFD5 40%,
    #E4E9E2 80%,
    #FFFFFF 95%
  );
  position: relative;
  overflow: hidden;
  padding-top: 220px; /* Room for the wave */
}

.footer-container::before {
  content: "";
  position: absolute;
  top: -140px;
  left: 0;
  width: 100%;
  height: 400px;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23F1F3F0" fill-opacity="1" d="M0,192 C300,100 1140,300 1440,160 V0 H0 Z"></path></svg>') no-repeat top center;
  background-size: cover;
  z-index: 1;
}






.info-section {
    align-items: center;
    font-weight: bold;
    color: #0A4D1E;
    gap: 10px;
}

.info-icon, .info-icon-2{
    font-size: 18px;
}
.info-icon {
    margin-right: 10px;
}

.info-icon-2 {
    margin-right: 20px;
}

.know-before, .getting-here{
    font-family: 'Montserrat Alternates';
    font-size: 20px;
    line-height: 24px;
    font-weight: 700;
}

.info-links-1 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 35px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 23px;
    font-weight: 600;
}

.info-links-2 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: 35px;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    line-height: 23px;
    font-weight: 600;
}



.info-links-1 a, info-links-2 a {
    text-decoration: underline;
    color: #0A4D1E;
    font-weight: normal;
}

.info-links-1 a:hover, .info-links-2 a:hover {
    text-decoration: none;
}

.season {
    font-weight: bold;
    margin-left: 35px;
}

.season-months{
    font-weight: normal;
}

.season-months::before{
    content: "(";
}

.season-months::after{
    content: ")";
}

.season-times{
    color: #77BF44;
}

@media (max-width: 767px) {
    .info-links-1, .info-links-2, .season{
        margin-left: 0px;
    }   
}


/* Make the column for the hand image not restrict the width */
.section-mobile {
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  max-width: none;
  height: 100%;
  display: flex;
  align-items: center;
}

/* Resize the actual image */
.hand-image-container {
  position: relative;
  z-index: 5; /* Make sure it's above the wave */
}

.hand-holding-phone {
  width: 340px;
  max-width: none;
  position: relative;
  top: 30px;
  right: -30px;
  z-index: 5; /* Bring it forward */
}



/* Replace section at a breakpoint (e.g., 768px) */
@media (max-width: 1200px) {
  .section-mobile {
    display: none;
  }
  
  .col-mobile-bottom-padding{
      padding-bottom: 25px;
  }
}



/* End hand holding cell phone */

/* Default (mobile + tablet) - stacked layout */
.join-our-newsletter {
  background: linear-gradient(to bottom, #0A4D1E 0%, #0A4D1E 75%, #084019 100%);
  position: relative;
  z-index: 10;
  padding: 35px 35px 25px 40px;
  display: block; /* Stacked by default */
}

/* Remove margin from the columns */
.newsletter-col {
  margin: 0;
  display: block; /* Stack content inside column */
}

/* Flex only on larger screens (from 769px and up) */
@media (min-width: 769px) {
  .join-our-newsletter {
    display: flex;
    align-items: center; /* Vertical centering */
  }

  .newsletter-col {
    display: flex;
    align-items: center;
  }

  /* Optional: prevent the .relevant-emails text from squeezing beside the form */
  .newsletter-col:last-child {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 571px) {
.join-our-newsletter-heading h2{
       font-size: 32px;
       line-height: 38px;
    }
}

/* Flex the form container */
.webform-submission-form {
  display: flex;
  align-items: stretch; /* This is key for equal height */
  gap: 0;
  max-width: 500px;
  margin: 0 auto;
}

/* Input wrapper */
.form-item-your-email {
  flex: 1;
  margin: 0;
}

/* Email input */
.form-item-your-email input[type="email"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #FFFFFF;
  border-right: none;
  border-radius: 4px 0 0 4px;
  font-size: 18px;
  color: #FFFFFF;
  background-color: transparent;
  outline: none;
  height: 100%; /* Ensure it matches button height */
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}

/* Submit button wrapper */
.webform-submission-form #edit-actions .btn-medium {
  margin-top: 0 !important;
}


/* Submit button */
#edit-actions-submit {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 20px 11px 20px;
  font-size: 17px;
  font-weight: 600;
  color: #0A4D1E !important;
  background-color: #77BF44;
  border-top: 1px solid #FFFFFF;
  border-right: 1px solid #FFFFFF;
  border-bottom: 1px solid #FFFFFF;
  border-left: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  text-transform: capitalize;
  height: 100%;
  box-sizing: border-box;
  font-family: 'Lora', sans-serif;
}


/* Reset the webform button defaults */
.webform-button--submit {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}

.relevant-emails p{
    color: #ffffff;
    font-size: 18px;
    line-height: 23px;
    font-family: 'Lora', sans-serif;
    font-weight: 400;
}



.footer-forest {
    background-image: url('/web/sites/default/files/forest.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 400px;
    position: relative;
    padding-top: 50px;
}


/* End Footer */


/* Individual Pages */





/* About Us */

.bg-full-width.about-page-banner,
.bg-full-width.our-park-page-banner,
.bg-full-width.park-map-page-banner{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  padding: 0;
}

.about-page-banner img,
.our-park-page-banner img,
.park-map-page-banner img{
  width: 100%;
  height: auto;
  display: block;
}


/* Remove title */
.c-breadcrumbs-wrapper .c-page-title {
  display: none;
  float: none !important;
}

/* Reset container */
.c-breadcrumbs-wrapper .container {
  display: block;
  width: 100%;
  max-width: 100%;
  text-align: center;
}

/* Breadcrumbs */
.c-breadcrumbs-wrapper nav {
  display: block;
  width: 100%;
}

.c-centered.c-layout-breadcrumbs-1.c-fonts-uppercase.c-fonts-bold.c-bordered.c-bordered-both {
  background-color: transparent !important;
}

.c-layout-breadcrumbs-1.c-bordered-both{
    border: none;
}

.c-breadcrumbs-wrapper .c-page-breadcrumbs {
  float: none !important;
  display: inline-block;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

/* Optional full-width breakout */
.c-breadcrumbs-wrapper {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  padding: 20px 0;
}

/* Breadcrumb wrapper */
.c-page-breadcrumbs {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  color: #0A4D1E !important;
}

/* Breadcrumb items */
.c-page-breadcrumbs li {
  display: inline-flex;
  align-items: center;
  opacity: 0.7 !important;
  color: #0A4D1E !important;
}

/* Last breadcrumb item (current page) */
.c-page-breadcrumbs li:last-child {
  opacity: 1 !important;
}

/* Breadcrumb links */
.c-page-breadcrumbs li a {
  color: inherit !important;
  text-decoration: none !important;
}

/* House icon */
.breadcrumb-icon {
  margin-right: 4px;
  font-size: inherit;
  color: inherit !important;
}

/* Separator styling */
.breadcrumb-separator {
  margin: 0 4px;
  font-size: inherit;
  color: inherit !important;
}


@media (min-width: 992px) {
    .about-us-introduction-row, 
    .about-us-history-row,
    .about-us-opportunities-row{
        display: flex;
    }   
    
    .about-us-introduction-row-column,
    .about-us-history-row-column,
    .about-us-opportunities-row-column{
        margin: auto;
    }   
}

@media (max-width: 991px) {
    .about-us-introduction-image img,
    .about-us-history-image img{
        margin-bottom: 25px;
    }
}


.fa-ban-smoking,
.fa-baby-carriage,
.fa-car,
.fa-pagelines,
.fa-accessible-icon,
.fa-person-dots-from-line{
    color: #A84300;
    margin-right: 15px;
    font-size: 20px;
    font-weight: 900;
}

.fa-baby-carriage,
.fa-car,
.fa-accessible-icon,
.fa-person-dots-from-line{
    margin-left: 25px;
}

.about-us-icon-notices-text p{
    font-family: 'Lora', sans-serif;
    line-height: 29px;
}



.about-us-explore-park-map-button,
.about-us-contact-us-button{
    color: #ffffff;
    padding: 20px 35px;
    border-radius: 0;
    font-family: 'Kulim Park', sans-serif;
    font-size: 18px;
    line-height: 25px;
    font-weight: 600;
}

.about-us-explore-park-map-button{
    background-color: #0A4D1E;
}

.about-us-contact-us-button{
    background-color: #A84300;
}

@media (max-width: 445px){
    .button-wrapper{
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 12px;
    }
    
    .about-us-contact-us-button{
        margin-left: 0px !important;
        text-align: center;
    }
    
    .about-us-our-vision-our-mission-container{
        padding: 20px 0;
    }
}

@media (min-width: 446px){
    .about-us-our-vision-our-mission-container{ 
        padding: 30px 50px 30px 25px;
    }
}

.about-us-our-vision-our-mission-container{
    background-color: #E8ECE6;
    margin-top: 50px;
}

.about-us-our-vision-our-mission-column{
    padding: 5px 40px;
}

.about-us-our-vision-column{
    border-right: 1px solid #CDD8CE;
}

@media (max-width: 767px) {
    .about-us-our-vision-column{
        border: none;
    }   
}
.full-width-history-section,
.full-width-our-park-section{
  position: relative;
  background-color: #E8ECE6;
  overflow: hidden;
  padding-top: 220px;
}

.full-width-history-section::before,
.full-width-our-park-section::before{
  content: "";
  position: absolute;
  top: -140px; /* adjust as needed */
  left: 0;
  width: 100%;
  height: 400px; /* adjust to match your desired wave height */
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320"><path fill="%23F1F3F0" fill-opacity="1" d="M0,192 C300,100 1140,300 1440,160 V0 H0 Z"></path></svg>') no-repeat top center;
  background-size: cover;
  z-index: 1;
}

.about-us-history-row-container,
.our-park-prgrams-row-container{
  background: linear-gradient(to bottom, #E8ECE6 0%, #F1F3F0 100%);
}

.about-us-history-row
 {
  margin-top: -200px; /* adjust as needed */
  gap: 40px;
  position: relative;
  z-index: 20; /* make sure it's above the wave */
}

.our-park-programs-row {
  gap: 40px;
  position: relative;
  z-index: 20; /* make sure it's above the wave */
}




/* End About Us */

.intro-text {
    width: 100%; /* Ensures full width */
    max-width: 860px; /* Adjust as needed */
    margin: 0 auto; /* Centers within the container */
    text-align: center; /* Ensures text alignment */
}




/* Our Park */

.wildlife-row{
    background-color: #E8ECE6;
}

.wildlife-row:hover {
  background-color: #0A4D1E; /* <-- New background color on hover */
}

.wildlife-row:hover .col-xs-12.col-sm-6.col-md-6.col-lg-6,
.wildlife-row:hover .col-xs-12.col-sm-6.col-md-6.col-lg-6 * {
  color: #E8ECE6 !important; 
}

.wildlife-row:hover .col-xs-12.col-sm-6.col-md-6.col-lg-6 a {
  color: #F5AE32 !important; 
}

.wildlife-row {
  transition: background-color 0.3s ease;
}

.wildlife-row .col-sm-6,
.wildlife-row .col-sm-6 * {
  transition: color 0.3s ease;
}



.wildlife-image-container{
    min-width: 250px !important;
}

.wildlife-image-container img {
    min-width: 250px !important;
    height: 250px;
    object-fit: cover; /* Ensures the image fills the box without distortion */
}

.download-map-container {
    text-align: center; /* Centers the button */
}

.download-map-button {
    background-color: #a84300 !important;
    color: white !important;
    padding: 10px 20px;
    border-radius: 0px;
    text-decoration: none;
    font-size: 16px;
    display: inline-block;
    transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.download-map-button:hover {
    background-color: #0A4D1E !important;
    color: white !important;
    transform: scale(1.1); /* Increases size by 10% */
}

.programs-services-icon,
.our-park-programs-row .fa-person-dots-from-line{
    
    font-size: 24px;
    padding: 10px;
    background-color: #F1F3F0;
    border-radius: 5px;
    margin-right: 7px;
    color: #0A4D1E!important;
    
}

.our-park-programs-row .fa-person-dots-from-line{
    margin-left: 0;
}

.panel-heading{
    background: linear-gradient(to bottom, #0b5722 0%, #084018 100%);
}

.panel-title{
    padding-top: 10px;
    padding-bottom: 10px;
}

.panel-title a{
    color: #ffffff;
}

.panel-default{
    border: none !important;
    background-color: transparent;
}

.panel-body p{
    font-size: 19px;
    line-height: 28px;
}

.toggle-icon {
  color: #ffffff;
  display: inline-block;
  width: 1em;
  margin-right: 0.5em;
  font-weight: bold;
  transition: transform 0.2s;
}


/* End Our Park */