/*
Theme Name: EntertopWP Child Theme
Theme URI: https://www.entertop.com.my
Version: 1.0
Description: Child theme by EntertopWP and EnterWapp plugin
Author: Entertop WP
Author URI: https://www.enterrom.com
template: bb-theme
*/


:where(.fl-builder-content, .fl-page) :is(a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])):focus{
	outline-style: none;
  	outline-width: none;
  	outline-offset: none;
}

/* =========================================================
   MONTSERRAT FONT FACE
========================================================= */

@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/entertopwp-theme-child/Montserrat-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/entertopwp-theme-child/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/entertopwp-theme-child/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Montserrat";
    src: url("/wp-content/themes/entertopwp-theme-child/Montserrat-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


/* =========================================================
   GLOBAL DESIGN SYSTEM
========================================================= */

:root {

    /* Primary Colours */
    --color-white: #ffffff;
    --color-primary-dark: #114c92;
    --color-primary-light: #45b7ee;

    /* Secondary Colours */
    --color-secondary-yellow: #fecb26;
    --color-secondary-turquoise: #1dd1c5;

    /* Typography */
    --font-heading: "Montserrat", sans-serif;
    --font-body: "Open Sans", sans-serif;

    /* Font Sizes */
    --font-h1: 65px;
    --font-h2: 50px;
    --font-h3: 40px;
    --font-h4: 30px;
    --font-h5: 25px;
    --font-h6: 20px;
    --font-body-size: 18px;
    --font-footer: 16px;
    --font-footer-small: 14px;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.site-h1 {
    font-family: var(--font-heading);
    font-size: var(--font-h1);
    font-weight: 800;
}

.site-h2 {
    font-family: var(--font-heading);
    font-size: var(--font-h2);
    font-weight: 600;
}

.site-h3 {
    font-family: var(--font-heading);
    font-size: var(--font-h3);
    font-weight: 600;
}

.site-h4 {
    font-family: var(--font-heading);
    font-size: var(--font-h4);
    font-weight: 600;
}

.site-h5 {
    font-family: var(--font-heading);
    font-size: var(--font-h5);
    font-weight: 600;
}

.site-h6 {
    font-family: var(--font-body);
    font-size: var(--font-h6);
    font-weight: 600;
}

.site-body {
    font-family: var(--font-body);
    font-size: var(--font-body-size);
    font-weight: 400;
}

.site-footer-text {
    font-family: var(--font-body);
    font-size: var(--font-footer);
}

.site-footer-small {
    font-family: var(--font-body);
    font-size: var(--font-footer-small);
}


/* =========================================================
   COLOUR UTILITIES
========================================================= */

.text-white {
    color: var(--color-white);
}

.text-primary-dark {
    color: var(--color-primary-dark);
}

.text-primary-light {
    color: var(--color-primary-light);
}

.text-secondary-yellow {
    color: var(--color-secondary-yellow);
}

.text-secondary-turquoise {
    color: var(--color-secondary-turquoise);
}

.bg-white {
    background-color: var(--color-white);
}

.bg-primary-dark {
    background-color: var(--color-primary-dark);
}

.bg-primary-light {
    background-color: var(--color-primary-light);
}

.bg-secondary-yellow {
    background-color: var(--color-secondary-yellow);
}

.bg-secondary-turquoise {
    background-color: var(--color-secondary-turquoise);
}

/* =========================================================
   TITLE HIGHLIGHT
========================================================= */

.title-highlight {
    --title-highlight-width: 135px;

    position: relative;
    display: inline-block;
    z-index: 1;
}

.title-highlight::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    z-index: -1;
    width: var(--title-highlight-width);
    height: 58px;
    border-radius: 0 30px 30px 0;
    background-color: var(--color-secondary-yellow);
    transform: translateY(-50%) scaleX(0.025);
    transform-origin: left center;
    transition:
        transform 1.15s cubic-bezier(0.16, 1, 0.3, 1);
}

.title-highlight.is-active::before {
    transform: translateY(-50%) scaleX(1);
}


/* =========================================================
   TITLE HIGHLIGHT SIZE
========================================================= */

.title-highlight-sm {
    --title-highlight-width: 110px;
}

.title-highlight-md {
    --title-highlight-width: 135px;
}

.title-highlight-lg {
    --title-highlight-width: 165px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1024px) {

    .title-highlight::before {
        height: 50px;
        border-radius: 0 25px 25px 0;
    }

}

@media (max-width: 767px) {
	
    .title-highlight,
    .title-highlight-sm,
    .title-highlight-md,
    .title-highlight-lg {
        --title-highlight-width: 100px;
    }

    .title-highlight::before {
        left: -7px;
        height: 44px;
        border-radius: 0 22px 22px 0;
    }
}

@media (max-width: 480px) {

    .title-highlight::before {
        height: 40px;
        border-radius: 0 20px 20px 0;
    }

}


/* =========================================================
   RESPONSIVE TYPOGRAPHY
========================================================= */

@media (max-width: 1024px) {

    :root {
        --font-h1: 52px;
        --font-h2: 42px;
        --font-h3: 34px;
        --font-h4: 28px;
    }

}

@media (max-width: 767px) {

    :root {
        --font-h1: 40px;
        --font-h2: 34px;
        --font-h3: 28px;
        --font-h4: 24px;
        --font-h5: 22px;
        --font-h6: 19px;
        --font-body-size: 17px;
    }

}

@media (max-width: 480px) {

    :root {
        --font-h1: 36px;
        --font-h2: 30px;
        --font-h3: 26px;
        --font-h4: 23px;
        --font-body-size: 16px;
    }

}





/* General */

a:hover{transition:0.3s;text-decoration:none;cursor: pointer;}

.justify p{text-align:justify;}

.map{-webkit-filter: grayscale(100%);
filter: grayscale(100%);}

.widgettitle { display:none !important; }

/* End General */



/*======================= BOL - Not in use ======================== */
/* # Archived at 2026-02-25 by Tung
ul {
	padding-left: 20px;
}


.zindex1{
	position: relative;
	z-index: 1;
}

.zindex2{
	position: relative;
	z-index: 1;
}

.zindex3{
	position: relative;
	z-index: 1;
}

.nolink a{
	pointer-events:none;
}

.zoom-in {
	overflow: hidden;
}

.zoom-in .fl-col-content{
	transform: scale(1);
	transition: 0.7s ;
}

.zoom-in:hover > .fl-col-content{
	transform: scale(1.1);
	transition: 0.7s;
}



.fl-widget {
	margin-bottom: 20px !important;
}



.row.fl-post-image-beside-wrap {
	display: flex;
}

.fl-post-thumb img {
	height: auto !important;
	max-width: 100%;
	width: 600px;
	margin-top: -120px;
}

.fl-post-author, .fl-sep {
	display: none;
}

.widgettitle {
	display: none !important;
}

.row.fl-post-image-beside-wrap {
	display: flex;
	margin-left: 0;
}

.fl-post-thumb {
	margin-bottom: 25px;
	height: 300px;
	overflow: hidden;
	width: 100%;
}

a.tag-cloud-link {
	font-size: 14px !important;
}

.wp-block-categories-list, .wp-block-archives-list, .wp-block-tag-cloud {
	margin-top: -10px !important;
}

*/
/*======================= EOL - Not in use ======================== */