:root {

    --title: 'Kulim Park', sans-serif;

    --content: 'Kulim Park', sans-serif;

    

    --text-dark: #000;



    --font-button: 25px;

    --font-content: 20px;

    --font-big: 30px;


    --font-big-mobile: 22px;
	

    --color-pink: #c91e58;

    --color-blue: #059dbf;

    --color-orange: #e65847;


/* 	--color-degradate:  linear-gradient(to right, #c91e58, #c9275d, #c82f61, #c83666, #c73c6a, #c94671, #cc4f78, #ce587f, #d4668a, #d97395, #de809f, #e38daa); */

	--color-degradate:  linear-gradient(124deg, rgba(201,30,88,1) 0%, rgba(227,141,170,1) 35%, rgba(249,201,217,1) 100%); 

	--color-degradate-2: linear-gradient(to bottom, #059dbf, #11a3c5, #1aa9cb, #21b0d0, #28b6d6, #3dbbd9, #4dc1dd, #5bc6e0, #72cce2, #86d3e5, #98d9e8, #aadfeb);





}

h1,h2,h3,h4,h5 {

    font-family: var(--title);

}

a:focus-visible {
	outline: none!important;
	box-shadow: none!important;
}

p, a , span {

    font-family: var(--content);

}

p {

    font-size: var(--font-content);

    color: #000;

}

body {

    font-family: var(--content);

}
.bg-gray {
	background: #eee;
}


.title-section {
	font-size: 35px;

}
.title-secondary {

	font-size: 35px;

}

.text-dark {

	color: #000;

}
.text-blue {
	color: var(--color-blue);
}
@media (max-width: 768px) {
    .title-section {
        font-size: 35px;
    }
}

@media (max-width: 425px) {

    .title-section {

        font-size: 30px;

    }

    .title-secondary {

        font-size: 28px;

        text-align: center;

    }

    

}



.pl-0 {

	padding-left: 0;

}

.container-small {

    max-width: 1100px;

    margin: auto;



}






.border-links {
	/* border: 1px solid var(--color-pink); */
	color: #fff !important;
	text-decoration: none;
	padding: 6px 12px;
	display: flex;
	margin: 15px 0;
	text-align: center;
	justify-content: center;
	min-width: 200px;
	font-size: var(--font-button);
	border-radius: 50px;
	transition: 400ms;
	background: var(--color-degradate);
	background-size: 150%;
	/* width: max-content; */
	width: fit-content;
}

.border-links:hover {
	/*background: var(--color-pink);
	color: #fff !important;*/
	transition: 400ms;
	background-size: 100%;
}
.button-pink {
	/* border: 1px solid var(--color-pink); */
	color: #fff !important;
	text-decoration: none;
	padding: 6px 12px;
	display: flex;
	margin: 15px 0;
	text-align: center;
	justify-content: center;
	min-width: 200px;
	font-size: var(--font-button);
	border-radius: 50px;
	transition: 400ms;
	background: var(--color-degradate);
	background-size: 150%;
	/* width: max-content; */
	width: fit-content;
}
.button-pink:hover {
	transition: 400ms;
	background-size: 100%;
}	

.button-blue {
	background: var(--color-blue);
	color: #fff;
	text-decoration: none;
	padding: 10px 15px;
	position: relative;
	display: inline-flex;
	border-radius: 6px;
	border: 1px solid var(--color-blue);
	transition: 400ms;
}

.button-blue:hover {
	color: var(--color-blue);
	background: #fff;
	border: 1px solid var(--color-blue);
	transition: 400ms;
}


/**/
/* .logo-header.hide-logo-home {
	filter: brightness(0) invert(1);
} */

/**/
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
	margin: 19px auto;
}

/**/
.modal-content {
	min-height: 90vh;
}
.modal-header {
	background: var(--color-blue);
}
.modal-title {
	color: #fff;
}
.modal-content iframe {
	height: 80vh !important;
	width: 100%!important;
}
.modal-content .btn-close {
    background: transparent;
    border: none;
    filter: brightness(0) invert(1);
    font-size: 20px;
    opacity: 1;
    top: -5px;
    position: relative;
}
/* ============================================================
   Mobile Menu Toggle Label Rules
   Goal:
   - Desktop / monitors (>= 992px): normal menu, no toggle button
   - Medium widths (576px–991.98px): show ☰ + Menu
   - Phones (< 576px): show Menu only
   ============================================================ */


/* 1) Desktop / monitors: hide mobile menu button completely */
@media (min-width: 992px){
  button.button-toggle-menu{
    display: none !important;
  }
}


/* 2) Medium widths: show hamburger + Menu */
@media (min-width: 576px) and (max-width: 991.98px){

  button.button-toggle-menu{
    width: auto !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Show label */
  button.button-toggle-menu::after{
    content: "Menu" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  /* Make sure icon shows on medium */
  button.button-toggle-menu > *{
    display: inline-block !important;
  }

  button.button-toggle-menu::before{
    display: inline-block !important;
  }

  button.button-toggle-menu{
    background-image: initial !important;
    -webkit-mask-image: initial !important;
    mask-image: initial !important;
  }
}


/* 3) Phones: Menu ONLY (force-hide any icon method) */
@media (max-width: 575.98px){

  button.button-toggle-menu{
    width: auto !important;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center !important;

    /* kill icon drawn via background/mask */
    background-image: none !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  /* Hide anything inside the button (svg/spans/etc) */
  button.button-toggle-menu > *{
    display: none !important;
  }

  /* Hide icon drawn via ::before */
  button.button-toggle-menu::before{
    content: none !important;
    display: none !important;
  }

  /* Show label */
  button.button-toggle-menu::after{
    content: "Menu" !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    display: inline-block !important;
  }
}

#calendar{
  scroll-margin-top: 100px;
}