/*
Theme Name: Al-Farabi
Theme URI: https://gurujagoan.com/theme/alfarabi
Author: Trida Studio
Author URI: https://tridastudio.com/
Description: Al-Farabi adalah tema WordPress yang dirancang khusus untuk sekolah, pesantren, dan lembaga pendidikan lainnya. Dengan desain modern, ringan, dan responsif, tema ini memberikan tampilan profesional serta kemudahan dalam pengelolaan konten pendidikan. Cocok untuk website sekolah, madrasah, dan institusi akademik lainnya.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: responsive, blog, custom-menu, featured-images
Text Domain: alfarabi
*/

body > header > div.main-navigation > nav > div > a > h3 {
    margin-bottom: -10px;
}

body > header > div.main-navigation > nav > div > a > span {
    font-size: 0.99rem;
}

body > main > div.hero-section > div > div.owl-stage-outer > div > div.owl-item.active > div {
    min-height: 500px; /* Sesuaikan tinggi minimal sesuai kebutuhan */
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
}

/* Start Single */
body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > p {
    margin-bottom: 20px !important;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > blockquote {
    background: var(--theme-bg-light);
    border-left: 5px solid var(--theme-color);
    padding: 30px;
    font-size: 17px;
    font-style: italic;
    margin: 20px 0;
    border-radius: 0px;
    position: relative;
}

body > div.swal2-container.swal2-backdrop-show {
    z-index: 999999 !important;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > ul > li {
    position: relative;
    padding-left: 25px; /* Beri ruang untuk ikon */
    margin-bottom: 3px;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > ul > li::before {
    font-family: "Font Awesome 6 pro";
    content: "\f058"; /* Simbol check */
    position: absolute;
    left: 0;
    color: #f65801; /* Warna ikon */
    font-weight: bold;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > ul, body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-details > h3, body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > h3 {
    margin-bottom: 20px;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-8 > div > div > div.blog-info > div.blog-author > div.blog-author-img > img {
    width: 171px;
}
/* End Single */

/* widget footer 2 */
ul.footer-list > li > a {
    left: 20px;
}

ul.footer-list > li > a::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f101"; /* Simbol check */
    position: absolute;
    left: -10px;
    color: var(--theme-color);
    font-weight: bold;
    opacity: 0;
    transform: translateX(-15px); /* Sembunyikan ikon lebih jauh ke kiri */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

ul.footer-list > li > a:hover {
    color: var(--theme-color) !important;
    padding-left: 20px; /* Menambahkan ruang agar ikon bisa muncul */
}

ul.footer-list > li > a:hover::before {
    opacity: 1;
    transform: translateX(0); /* Geser ikon ke kanan */
    
}

/* widget footer 3 */
body > footer > div.footer-widget > div > div > div > div > div > div > div > ul.wp-block-latest-posts > li > a {
    left: 20px;
    color: var(--color-white) !important;
}

body > footer > div.footer-widget > div > div > div > div > div > div > div > ul.wp-block-latest-posts > li > a::before {
    font-family: "Font Awesome 6 Pro";
    content: "\f101";
    position: absolute;
    left: -10px;
    color: var(--theme-color);
    font-weight: bold;
    opacity: 0;
    transform: translateX(-15px); /* Sembunyikan ikon lebih jauh ke kiri */
    transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
}

body > footer > div.footer-widget > div > div > div > div > div > div > div > ul.wp-block-latest-posts > li > a:hover {
    color: var(--theme-color) !important;
    padding-left: 20px; /* Menambahkan ruang agar ikon bisa muncul */
}

body > footer > div.footer-widget > div > div > div > div > div > div > div > ul.wp-block-latest-posts > li > a:hover::before {
    opacity: 1;
    transform: translateX(0); /* Geser ikon ke kanan */
}

body > main > div.feature-area.pt-100 > div > div > div > div > div > div.feature-icon > i {
    font-size: 2rem;
    left: 24px;
    top: 20px;
    position: absolute;
    color: #fff;
}

body > main > div.about-area.py-120 > div > div > div > div > div.about-content > div > div > div > div.icon > i {
    color: #fff;
    font-size: 1.5rem;
    padding-top: 20px;
}

body > main > div.counter-area.pt-40.pb-40 > div > div > div > div > div.icon > i {
    color: var(--theme-color);
}

body > main > div.service-area2.py-120 > div > div.row.wow.fadeInUp > div > div > div.service-icon > i {
    color: #fff;
    font-size: 2rem;
}

body > main > div.service-area2.py-120 > div > div.row.wow.fadeInUp > div > div > div.shape > i {
    color: rgb(169, 169, 169);
    font-size: 5.5rem;
}


body > main > div.service-area.bg.py-80 > div > div.service-slider.owl-carousel.mt-4.owl-loaded.owl-drag > div.owl-stage-outer > div > div > div > div.service-icon > i {
    color: #fff;
    font-size: 1.7rem;
}

body > main > div.portfolio-area.pa-bg.pt-70.pb-120 > div > div.row.popup-gallery.pb-20 > div > div.owl-stage-outer > div > div > div > div.portfolio-img {
    width: 283px;
    height: 339px;
    overflow: hidden;
}

body > main > div.portfolio-area.pa-bg.pt-70.pb-120 > div > div.row.popup-gallery.pb-20 > div > div.owl-stage-outer > div > div > div > div.portfolio-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Thumbnail Sidebar */
body > main > div.blog-single.py-120 > div > div > div.col-lg-4 > aside > div > div > div.recent-post-img {
    width: 75px;
    height: 75px;
    overflow: hidden;
}

body > main > div.blog-single.py-120 > div > div > div.col-lg-4 > aside > div > div > div.recent-post-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Single GTK */
body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.info-gtk > h4 {
    padding-bottom: 10px;
    margin-bottom: 30px;
    position: relative;
    font-size: 22px;
    color: var(--theme-bg-light);
    font-weight: 700;
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.info-gtk > h4::before {
    position: absolute;
    content: '';
    width: 15px;
    border-bottom: 3px solid var(--theme-color);
    bottom: 0;
    left: 0;
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.info-gtk > h4::after {
    position: absolute;
    content: '';
    width: 30px;
    border-bottom: 3px solid var(--theme-color);
    bottom: 0;
    left: 22px;
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.info-gtk{
    background: var(--theme-color2);
    color: #fff;
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > p {
    margin-bottom: 20px;
}


body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.kontak-gtk {
    background: var(--theme-color);
    color: #fff;
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.kontak-gtk > ul {
    list-style: none; /* Menghilangkan bullet point */
    padding: 0;
    margin: 0;
    display: flex; /* Menggunakan flexbox agar sejajar */
    gap: 15px; /* Jarak antar item */
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.kontak-gtk > ul > li {
    display: flex;
    align-items: center; /* Menyelaraskan ikon dan teks */
}

body > main > div.portfolio-single.py-120 > div > div > div > div.col-xl-8.col-lg-8 > div > div.content > div.alert.kontak-gtk > ul > li > i {
    margin-right: 5px; /* Jarak antara ikon dan teks */
}

/* Testimoni */
body > main > div.portfolio-area.pt-120.pb-80 > div > div > div > div > div.box-testimoni {
    background: var(--theme-bg-light) !important;
}

.btn-testimoni {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--footer-bg);
    --bs-btn-border-color: var(--footer-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-color);
    --bs-btn-hover-border-color: var(--theme-color);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-color);
    --bs-btn-active-border-color: var(--theme-color);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--footer-bg);
    --bs-btn-disabled-border-color: var(--footer-bg);
}

/* PPDB */
.select2-container .select2-selection--single {
    height: 38px !important; /* Sesuaikan dengan tinggi input Bootstrap */
    padding: 6px 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
}

.select2-container .select2-selection__rendered {
    line-height: 26px !important;
    padding-left: 50px !important;
}

.select2-container .select2-selection__arrow {
    height: 38px !important;
}

.select2-container--default .select2-selection--single::before {
    content: "\f549"; /* Unicode FontAwesome (fa-school) */
    font-family: "Font Awesome 5 Pro"; /* Pastikan FontAwesome dimuat */
    font-weight: 900;
    position: absolute;
    top: 50%;
    left: 20px;
    transform: translateY(-50%);
    color: var(--theme-color);
    font-size: 16px;
}
