/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/


/* ==================================================
   HKGrotesk — Web Font (IAI)
   ================================================== */

   @font-face {
	font-family: 'HKGrotesk';
	src:
		url('../assets/fonts/HKGrotesk/HKGrotesk-Regular.woff2') format('woff2'),
		url('../assets/fonts/HKGrotesk/HKGrotesk-Regular.ttf') format('truetype');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'HKGrotesk';
	src:
		url('../assets/fonts/HKGrotesk/HKGrotesk-Bold.woff2') format('woff2'),
		url('../assets/fonts/HKGrotesk/HKGrotesk-Bold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* ==================================================
   bottom floating buttons
   ================================================== */


.fixed-bottom-message {
    border-radius: 20px;
    /* padding: 10px; */
    background-color: #2acc50;
    position: fixed;
    bottom: 1.5rem;
    font-size: 13px;
    left: 1rem;
    height: auto;
    transition: .3s;
    cursor: pointer;
    z-index: 1000;
    display: block;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.fixed-bottom-message2 {
    border-radius: 20px;
    /* padding: 10px; */
    background-color: #2acc50;
    position: fixed;
    bottom: 1.5rem;
    font-size: 13px;
    left: 11rem;
    height: auto;
    transition: .3s;
    cursor: pointer;
    z-index: 1000;
    display: block;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.fixed-bottom-message:hover {
    opacity: .7;
}

.fixed-bottom-message3 {
    border-radius: 20px;
    /* padding: 10px; */
    background-color: #fff4f2;
    position: fixed;
    bottom: 1.5rem;
    font-size: 13px;
    left: 19.3rem;
    height: auto;
    transition: .3s;
    cursor: pointer;
    z-index: 1000;
    display: block;
    padding-top: 0.5rem !important;
    padding-bottom: 0.5rem !important;
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

#mainMenu nav>ul>li>a {
    font-size: 16px !important;
    font-weight: 600 !important;
    letter-spacing: 0.8px !important;
}

#mainMenu nav>ul>li .dropdown-menu>li>a,
#mainMenu nav>ul>li .dropdown-menu>li>span,
#mainMenu nav>ul>li .dropdown-menu>li [class*="col-"]>ul>li>a {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 15px !important;
}

#topbar .top-menu>li>a {
    font-size: 13px !important;
}

button.btn.btn-xs,
.btn:not(.close):not(.mfp-close).btn-xs,
a.btn:not([href]):not([tabindex]).btn-xs {
    font-size: 12px !important;
}


.testimonial.testimonial-left .testimonial-item>img {
    display: inherit;
    float: left;
    margin: 0 0 40px 0;
    height: 170px !important;
    width: 170px !important;
}

.ql-video-wrapper {
    width: 80%;
    margin: auto;
}

.ql-video-inner {
    padding-top: 56.25%;
    position: relative;
    height: 0;
}

.ql-video-inner iframe,
.ql-video-inner object,
.ql-video-inner embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



.fixed-bottom-wrapper {
    position: fixed;
    bottom: 10px;
    left: 10px;
    /* ⬅️ nempel kiri */
    width: auto;
    /* ⬅️ jangan 100% */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* ⬅️ isi ke kiri */
    z-index: 9999;
}



/* base button */
.fb-btn {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.9rem;
    font-size: 13px;
    border-radius: 20px;
    cursor: pointer;
    transition: .3s;
    white-space: nowrap;
}

/* WhatsApp buttons */
.fb-btn.wa {
    background-color: #2acc50;
    color: #fff;
}

/* FAQ */
.fb-btn.faq {
    background-color: #fff4f2;
    color: #dc3545;
}

.fb-btn.text-only {
    background-color: #f7e8c1;
    color: #f74758c0;
    font-style: italic;
}

/* Icon only (IAI Hadir) */
.fb-btn.icon-only {
    padding: 0.6rem;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

/* Hover effect */
.fb-btn:hover {
    opacity: .85;
    transform: translateY(-2px);
}

/* Mobile optimization */
@media (max-width: 576px) {
    .fb-btn span {
        display: none;
        /* icon only di HP */
    }
}




/* ==================================================
   APPLY HKGROTESK (LOWERCASE CONTENT)
   ================================================== */

   html body,
   html body p,
   html body span,
   html body li,
   html body a,
   html body input,
   html body textarea,
   html body select,
   html body small,
   html body label {
       font-family: 'HKGrotesk', Helvetica, Arial, sans-serif !important;
   }
   
   /* ==================================================
      READABILITY BOOST (IAI)
      ================================================== */
   
   html body {
       font-size: 1.125rem;
       /* 18px */
       line-height: 1.8;
   }
   
   .post-content p,
   .container p {
       font-size: 1.125rem;
       line-height: 1.85;
   }
   
   h1,
   h2 {
       line-height: 1.3;
   }