/*!
README - STYLEGUIDE BRIEFLY

Find the style by media query screen width, using Find or CTRL + F
min-width 601px, min-width: 901px, min-width: 1300px, min-width: 1600px,
max-width: 1599px, max-width: 1299px, max-width: 900px, max-width: 600px

Make this stylesheet still readable and after using this file, dont forget to use beautify after development
Thankyou Whello Developer
*/



/* > Layar Besar */
@media all and (min-width: 2331px) {
	.page-id-11::after {
		width: 32%;

	}
}




/* > MOBILE */
@media all and (min-width: 601px) {

}

@media all and (min-width: 601px) and (max-width: 900px) {

	.logo-text h1 {
		font-size: 94px;
	}

	.logo-text .vc_single_image-wrapper {
		max-width: 124px;
	}

}


/* > TABLET */
@media all and (min-width: 901px) {

}

@media all and (min-width: 901px) and (max-width: 1200px) {
	.content-place p {
		font-size: 24px;
	}
}


/* >= DESKTOP & LAPTOP */
@media all and (min-width: 1300px) {

}

@media all and (min-width: 1300px) and (max-width: 1720px) {
	.page-id-11::after {
		top: -84px;
        left: -152px;
        width: 52%;
        height: 140%;
	}

	.content-place,
	.content-count-down {
		z-index: 4;
	}

	.page-id-11:before {
		z-index: 2;
	}
}


/* >= LARGE DESKTOP */
@media all and (min-width: 1600px) {

}


/* < LARGE DESKTOP */
@media all and (max-width: 1599px) {

}


/* >= DESKTOP & LAPTOP && < LARGE DESKTOP */
@media all and (min-width: 1300px) and (max-width: 1599px) {

}


/* <= LARGE TABLET */
@media all and (max-width: 1299px) {

    /*
     * Countdown berubah dari layout column
     * menjadi horizontal
     */
    .content-count-down {
        flex-direction: column;
    }


    .content-count-down .col-content,
    .content-count-down .col-counter {
        width: 100%;
    }


    .col-counter > .vc_column-inner {
        width: 100%;
    }


    /*
     * Countdown cards horizontal
     */
    .col-counter > .vc_column-inner > .wpb_wrapper {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;

        width: 100%;

        gap: 12px;

        flex-wrap: wrap;
    }


    /*
     * Card tetap mengikuti
     * ukuran responsive dari app.css
     */
    .card-counter {
        width: var(--counter-size);
        flex: 0 0 var(--counter-size);

        margin: 0;
    }


    /*
     * Inner card center
     */
    .card-counter > .wpb_column.vc_column_container > .vc_column-inner {
        width: 100%;
		padding: 0 !important;

        display: flex;
        justify-content: center;
    }


    /*
     * Hilangkan margin bawah
     * karena sekarang pakai gap
     */
    .card-counter:not(:last-of-type) {
        margin-bottom: 0;
        margin-right: 0;
    }


    /*
     * Jarak content dengan countdown
     */
    .content-count-down .col-content {
        margin-bottom: 40px;
    }


    /*
     * Hide decoration
     */
    .page-id-11:after {
        display: none;
    }

}


@media all and (min-width: 1025px) and (max-width: 1060px) {
	.card-counter .countdown-number {
		font-size: 32px;
	}

	.card-counter .countdown-label {
		font-size: 12px;
	}
}


@media all and (min-width: 901px) and (max-width: 1024px) {
	.card-counter .countdown-number {
		font-size: 24px;
	}

	.card-counter .countdown-label {
		font-size: 10px;
	}

	.date-text h2 {
		font-size: 48px;
	}

	.date-text p {
		font-size: 24px;
	}
}


/* > MOBILE && <= LARGE TABLET */
@media all and (min-width: 601px) and (max-width: 1299px) {

}


/* <= TABLET */
@media all and (max-width: 900px) {

	.card-counter .countdown-number {
		font-size: 20px;
	}

	.card-counter .countdown-label {
		font-size: 8px;
	}

	.content-place p {
		font-size: 14px;
	}
	
	.date-text .wpb_wrapper {
		display: flex;
    	flex-direction: column-reverse;
	}

	.date-text h2 {
		margin-top: 15px;
		margin-bottom: 0;
	}

	.date-text h2, .date-text p {
        font-size: 32px;
    }

	.countdown-section {
		min-height: 697px;
	}

	.content-place {
		margin-bottom: 60px;
		margin-top: 180px;
	}
}


/* <= MOBILE */
@media all and (max-width: 600px) {

    /*
     * Countdown card sudah otomatis
     * turun sampai 74px menggunakan clamp()
     */

    .col-counter > .vc_column-inner > .wpb_wrapper {
        gap: 10px;
    }


    .card-counter .countdown-number {
        font-size: 30px;
        margin-bottom: 10px;
    }


    .card-counter .countdown-label {
        font-size: 13px;
    }


    .card-counter > .wpb_column.vc_column_container > .vc_column-inner > .wpb_wrapper {
        padding-top: 18px;
        padding-bottom: 13px;
    }

	.date-text h2,
	.date-text p  {
		font-size: 20px;
	}

	.logo-text h1 {
		font-size: 63px;
	}

	.logo-text .vc_single_image-wrapper {
		max-width: 70px;
	}

	.logo-text > .wpb_column > .vc_column-inner > .wpb_wrapper {
		gap: 24px;
	}


}