/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.pb0 {
	padding-bottom: 0;
}

.border-right {
	border-right: 2px solid #8010BD;
}

h1, h2 {
	color: #263c83;
	
}
h3 {
	color: #263c83;
}

.program-slider, h2 {
    font-size: 2.6em;
}

div#masthead {
	background-image: url(/wp-content/uploads/2024/02/Group-148-3.png);
	background-repeat: no-repeat;
	background-position: right;
	background-size: 60% 100%;
}



.header-button {
    padding-top: 4px;
    margin-right: 0px;
	margin-left: 70px;
}

img.header_logo.header-logo {
    margin-left: 40px;
}

a.button.secondary {
	background-image: url(/wp-content/uploads/2024/02/Group-149.png);
	background-position: 120px;
    background-repeat: no-repeat;
    background-size: 20%;
	width: 160px;
    padding-top: 3px;
    padding-bottom: 3px;
    padding-right: 50px;
	text-transform: none;
}

a.nav-top-link {
    color: white !important;
}

.nav>li>a {
    padding: 10px 10px;
}

.nav-size-large>li>a {
    font-size: .95em;
}

.row.white-box-row {
	position: relative;
	bottom: 15vh;
}

.row.white-box-row-responsive {
	position: relative;
	bottom: 20vh;
}

.pidl-logo img, .pidl-logo .img-inner, .pidl-logo {
	width: 100px !important;
	height: 100px !important;
}

section.intro-text {
	min-height: calc(100vw * 0.62);
}

.collection-col .col-inner {
	height: 540px;
}

.lebih-lanjut-btn-1 {
	margin-top: 72px;
}

.lebih-lanjut-btn-2 {
	margin-top: 25px;
}

.matlamat-row {
	padding: 30px;
	background-image: url('/wp-content/uploads/2024/02/Rectangle-31.png'), url('/wp-content/uploads/2024/02/Rectangle-31.png');
	background-position: left top, right bottom;
  	background-repeat: no-repeat;
	background-size: 15vw;
}

.matlamat-row-inner {
	background-color: #fff;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.accordion-col, .accordion-col span, a.accordion-title.plain.active {
	color: #470A68 !important;
}

.accordion-col span {
	font-size: 1.5rem;
	font-weight: 600;
}

.accordion-title.active {
	background-color: transparent;
	border-color: transparent;
}

.accordion-title {
	border-top: 0;
	padding-left: 160px;
	padding-right: 80px;
	display: block;
	width: 100%;
}

.accordion-title span {
	display: block;
	padding-bottom: 8px;
}

.accordion-item {
	background-color: #F1F1F1;
	margin-bottom: 15px;
	padding: 20px 10px 20px 50px;
	border-radius: 15px;
	display: block;
}

button.toggle {
	top: 10px !important;
	margin: 0 !important;
	border: none !important;
}

.accordion .toggle {
	left: auto;
    right: 30px !important;
}

i.icon-angle-down {
    background: #690A9C;
    padding: 2px 10px;
    border-radius: 100px;
    color: white;
}

.accordion .toggle {
    top: 15px !important;
}

.accordion-inner {
	margin-top: 20px;
	padding-bottom: 0;
}

.accordion-item:nth-child(1) {
	background-image: url('/wp-content/uploads/2024/02/counter-1-1.png');
	background-repeat: no-repeat;
	background-position: top 30px left 5.5%;
	background-size: 10%;
	min-height: 170px;
}

.accordion-item:nth-child(2) {
	background-image: url('/wp-content/uploads/2024/02/ebook-1-1.png');
	background-repeat: no-repeat;
	background-position: top 60px left 5.5%;
	background-size: 10%;
}

.accordion-item:nth-child(3) {
	background-image: url('/wp-content/uploads/2024/02/robot-1.png');
	background-repeat: no-repeat;
	background-position: top 60px left 5.5%;
	background-size: 10%;
}

.accordion-item:nth-child(4) {
	background-image: url('/wp-content/uploads/2024/02/meeting-1-1.png');
	background-repeat: no-repeat;
	background-position: top 55px left 5.5%;
	background-size: 10%;
}

.accordion-item:nth-child(5) {
	background-image: url('/wp-content/uploads/2024/02/hand-touching-tablet-screen-1.png');
	background-repeat: no-repeat;
	background-position: top 35px left 5.5%;
	background-size: 10%;
	min-height: 170px;
}


.kaunter-perkhidmatan:nth-child(5) span {
	padding-top: 30px;
}


.ebooks a.accordion-title.plain::after {
	content: "\A Penang Islamic Digital Library (PIDL) memberikan akses mudah ke Ebooks dengan aplikasi eksklusifnya. Pada peringkat awal operasi, jumlah koleksi Ebooks adalah sebanyak 1877. Dengan koleksi Ebooks yang terus berkembang, ahli-ahli PIDL dapat menikmati bacaan digital di mana-mana dan pada bila-bila masa.";
	word-wrap: break-word;
	clear: both;
	color: #470A68;
}

.bilik-robotik a.accordion-title.plain::after {
	content: "\A Bilik Robotik PIDL menyediakan kemudahan pengaturcaraan robotik dan dron. Pengguna PIDL dapat mempelajari pengaturcaraan, menggunakan aplikasi, dan Bahasa Python di sini. Dengan ruang khusus ini, mereka dapat memprogram dan memahami artificial intelligence (AI) serta sains logik secara selamat.";
	word-wrap: break-word;
	clear: both;
	color: #470A68;
}


.bilik-perbincangan a.accordion-title.plain::after {
	content: "\A Bilik Robotik PIDL menyediakan kemudahan pengaturcaraan robotik dan dron. Pengguna PIDL dapat mempelajari pengaturcaraan, menggunakan aplikasi, dan Bahasa Python di sini. Dengan ruang khusus ini, mereka dapat memprogram dan memahami artificial intelligence (AI) serta sains logik secara selamat.";
	word-wrap: break-word;
	clear: both;
	color: #470A68;
}


.akses-ipad a.accordion-title.plain::after {
	content: "\A PIDL juga menyediakan kemudahan seperti iPad, ruang bacaan, bilik perbincangan, ruangan kanak-kanak, serta kafeteria yang selesa dan santai untuk kemudahan pengunjung PIDL.";
	word-wrap: break-word;
	clear: both;
	color: #470A68;
}

.flickity-prev-next-button.previous {
    left: 44%;
	top: 102%;
}

.flickity-prev-next-button.next {
    right: 44%;
	top: 102%;
}

.flickity-prev-next-button svg:hover {
    background: transparent !important;
	border: 2px solid white !important;
}

.footer-block {
	background-image: url('/wp-content/uploads/2024/02/Layer_1-2.png');
	background-repeat: no-repeat;
	background-position: bottom 6vh right 6vh;
	background-size: 18%;
}

.perasmian-slider .img-inner img {
	border-radius: 20px;
}

.perasmian-slider .img-inner {
	padding: 0 25px;
}

.scroll-to-bullets {
	display: none;
}

.nav > li > a {
    font-weight: 400;
    font-style: normal;
    color: #004707;
    font-size: 1em;
    font-family: 'Kanit';
}

.book-slider .img-inner {
	padding: 0 30px;
}

div#clock {
	font-family: Kanit, sans-serif !important;
	color: rgb(86, 196, 97) !important;
	font-size: 18px !important;
}

.footer-widget h4 {
	font-size: 18px;
}

.home-banner .pidl-counter div.counter {
	display: inline;
	width: auto;
	font-size: 60px;
	font-weight: 500;
	line-height: 1;
}

div.counter-text p {
	margin-bottom: 0;
	font-size: 60px;
	font-weight: 500;
	display: inline;
	line-height: 1;
}

.gtranslate_wrapper {
	display: inline;
	margin-left: 10px;
}

.gtranslate_wrapper a {
	color: #FFF;
	padding: 0 10px 0 0;
}

.gtranslate_wrapper a:before {
	content: '|';
	margin-right: 10px;
	font-weight: 400 !important;
}

.video-frame {
    border-radius: 15px; 
    overflow: hidden; 
}

.pidl-reference .ux-logo {
	display: block;clear: both;
}

@media only screen and (max-width: 848px) {
	div#masthead {
		background-image: none !important;
	}
	
	.row.white-box-row {
		position: relative;
		top: 23vh !important;
	}
	
	.flickity-prev-next-button.previous {
		left: 42% !important;
		top: 102%;
	}

	.flickity-prev-next-button.next {
		right: 42% !important;
		top: 102%;
	}
	
	.pidl-logo img, .pidl-logo .img-inner, .pidl-logo {
		width: 80px !important;
		height: 80px !important;
	}
	
	.accordion-title {
		padding-left: 110px !important;
	}
	
	.accordion-item:nth-child(1) {
		background-image: url('/wp-content/uploads/2024/02/ebook-1-1.png');
		background-repeat: no-repeat;
		background-position: top 82px left 5.5%;
		background-size: 10%;
	}

	.accordion-item:nth-child(2) {
		background-image: url('/wp-content/uploads/2024/02/robot-1.png');
		background-repeat: no-repeat;
		background-position: top 97px left 5.5%;
		background-size: 10%;
	}

	.accordion-item:nth-child(3) {
		background-image: url('/wp-content/uploads/2024/02/meeting-1-1.png');
		background-repeat: no-repeat;
		background-position: top 94px left 5.5%;
		background-size: 10%;
	}

	.accordion-item:nth-child(4) {
		background-image: url('/wp-content/uploads/2024/02/hand-touching-tablet-screen-1.png');
		background-repeat: no-repeat;
		background-position: top 60px left 5.5%;
		background-size: 10%;
	}

	.accordion-item:nth-child(5) {
		background-image: url('/wp-content/uploads/2024/02/counter-1-1.png');
		background-repeat: no-repeat;
		background-position: top 42px left 5.5%;
		background-size: 10%;
		min-height: 170px;
	}
	
	.keahlian-menu {
		padding: 0 30px !important;
	}
	
	.book-slider .img-inner {
		padding: 0 20px;
	}
}


@media only screen and (max-width: 450px) {
	.row.white-box-row {
		position: relative;
		top: 18vh !important;
	}
	
	.perasmian-slider .img-inner {
		padding: 0 15px;
	}
	
	.book-slider .img-inner {
		padding: 0 15px;
	}
	
	.pidl-logo img, .pidl-logo .img-inner, .pidl-logo {
		width: 60px !important;
		height: 60px !important;
	}
	
	.matlamat-row {
		background-size: 35vw !important;
	}
	
	.accordion-title {
		padding-left: 60px !important;
	}
	
	.accordion-item:nth-child(3) .accordion-title {
		padding-right: 50px !important;
	}
	
	.accordion-item:nth-child(5) .accordion-title {
		padding-right: 100px !important;
	}
	
	.accordion-item:nth-child(1) {
		background-image: url('/wp-content/uploads/2024/02/counter-1-1.png');
		background-repeat: no-repeat;
		background-position: top 35px left 7%;
		background-size: 15%;
		min-height: 120px;
	}
	
	.accordion-item:nth-child(2) {
		background-image: url('/wp-content/uploads/2024/02/ebook-1-1.png');
		background-repeat: no-repeat;
		background-position: top 21px left 7%;
    	background-size: 15%;
	}

	.accordion-item:nth-child(3) {
		background-image: url('/wp-content/uploads/2024/02/robot-1.png');
		background-repeat: no-repeat;
		background-position: top 50px left 7%;
    	background-size: 15%;
	}

	.accordion-item:nth-child(4) {
		background-image: url('/wp-content/uploads/2024/02/meeting-1-1.png');
		background-repeat: no-repeat;
		background-position: top 19px left 7%;
    	background-size: 15%;
	}

	.accordion-item:nth-child(5) {
		background-image: url('/wp-content/uploads/2024/02/hand-touching-tablet-screen-1.png');
		background-repeat: no-repeat;
		background-position: top 25px left 7%;
   		background-size: 15%;
		min-height: 120px;
	}

	.accordion .toggle {
		top: 0px !important;
		right: 10px !important;
	}
	
	i.icon-angle-down {
		background: #690A9C;
		padding: 3px 10px;
		border-radius: 200px;
		border-top-left-radius: 200px;
		border-top-right-radius: 200px;
		border-bottom-right-radius: 200px;
		border-bottom-left-radius: 200px;
		color: white;
	}
	
	.toggle i {
		font-size: 1.5em;
		transition: all .3s;
	}
	
	.accordion-col span {
		font-size: 1.15rem;
		font-weight: 600;
		padding-bottom: 0;
	}
	
	.accordion-inner {
		margin-top: 0px;
	}
	.footer-block {
	background-image: url('/wp-content/uploads/2024/02/Layer_1-2.png');
	background-repeat: no-repeat;
	background-position: bottom 6vh right 6vh;
	background-size: 60%;
}
}