@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Passions+Conflict&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
:root{
    --red:#dd1d1d;
    --dark-red: #a81212;
    --yellow:#e5d61a;
    --cyan:#55d6be;
    --white:#f4f2f3;
    --grey:#6d6d6d;
    --light-grey:#cfcfcf;
    --english-violet:#483A58;
    --ultra-violet:#56638A;
    --sea-green:#00916E;
    --sky-magenta:#D264B6;
    --fn-main:'Playfair Display',serif;
    --fn-alt:'Nunito Sans',sans-serif;
    --fn-sign:'Passions Conflict',cursive;
}
html,body{margin:0px;padding:0px;min-height:100vh;}
body{font-family:var(--fn-main);font-size:20px;}
input,button,textarea,select{font-family:inherit;font-size:inherit;}
input:focus,button:focus,textarea:focus,select:focus{outline:none;}
a{text-decoration:none;color:var(--red);}
a:hover{color:var(--sky-magenta);}
a.btn{display:flex;justify-content:center;align-items:center;height:50px;border-radius:10px;color:white;font-size:18px;font-weight:600;font-family:var(--fn-alt);transition:all 0.1s ease;}
a.btn.btn-red{background-color:var(--red);}
a.btn.btn-red:hover{background-color:var(--sky-magenta);}
a.btn.btn-violet{background-color:var(--english-violet);}
a.btn.btn-violet:hover{background-color:var(--ultra-violet);}
.btn-note{display:flex;align-items:center;justify-content:center;column-gap:10px;font-size:12px;font-family:var(--fn-alt);color:var(--grey);}

.smline-btn{display:flex;align-items:center;column-gap:10px;border:solid 1px var(--white);padding:4px 10px;color:var(--white);font-size:0.9em;transition:all 0.3s ease;}
.smline-btn:hover{background-color:var(--white);color:black;transition:all 0.3s ease;}

.loading{display:none;font-size:0.9em;color:var(--english-violet);font-style:italic;}
.loading.dark {color:var(--cyan);}

.swal2-popup {font-family: var(--fn-alt);}

.mg-b-5{margin-bottom:5px !important;}
.mg-b-10{margin-bottom:10px !important;}
.mg-b-20{margin-bottom:20px !important;}
.mg-b-30{margin-bottom:30px !important;}
.mg-b-40{margin-bottom:40px !important;}
.mg-b-50{margin-bottom:50px !important;}
.mg-b-100{margin-bottom:100px !important;}
.mg-b-150{margin-bottom:150px !important;}
.mg-b-200{margin-bottom:200px !important;}

.mg-r-5{margin-right:5px !important;}
.mg-r-10{margin-right:10px !important;}
.mg-r-15{margin-right:15px !important;}
.mg-r-20{margin-right:20px !important;}

.py-10{padding-top:10px !important;padding-bottom:10px !important;}
.py-15{padding-top:15px !important;padding-bottom:15px !important;}
.py-40{padding-top:40px !important;padding-bottom:40px !important;}
.py-50{padding-top:50px !important;padding-bottom:50px !important;}
.py-100{padding-top:100px !important;padding-bottom:100px !important;}

.px-content{padding-left:100px !important;padding-right:100px !important;}
.px-content-2{padding-left:200px !important;padding-right:200px !important;}

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

.text-justify{text-align:justify;}
.text-center{text-align:center;}
.text-left{text-align:left;}
.text-right{text-align:right;}

h3.section-title{margin:0px;font-size:30px;margin-bottom:50px;position:relative;}
h3.section-title::after{content:'';display:block;position:absolute;width:100px;height:8px;border-radius:4px;background-color:var(--yellow);left:0px;bottom:-16px;}
h3.section-title.title-center,.section-subtitle.title-center{text-align:center;}
h3.section-title.title-center::after{left:50%;transform:translateX(-50%);}
h3.section-title.inner-page{padding-top:50px;}
h3.section-title.inner-page::before{
    content: '';
    display: block;
    
    width: 100%;
    position: absolute;
    left: 0px;
    top: -50px;
    height: 50px;
    background-image: url(../img/corak.jpg);
    background-size: contain;
    background-repeat: repeat-x;
}
.section-subtitle{font-size: 18px;font-style: italic;}

ul.normal-list{list-style:none;margin:0px;padding:0px;}
ol.number-list{margin:0px;margin-block-start:0px;padding-inline-start:17px;}
ol.number-list > li{padding-left:10px;}

input.form-control,
select.form-control{border:solid 1px var(--grey);padding:5px;}

input.full-width,
select.full-width{width:100%;}

.form-style1 {
    position: relative;
    display: flex;
    flex-direction: column;
    row-gap: 5px;
}

.form-style1 label {
    display: flex;
    position: relative;
    width: 100%;
    border: solid 1px white;
}

.form-style1 label > span {
    width: 40px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}

.form-style1 label > input,
.form-style1 label > textarea {
    padding: 5px;
    flex-grow: 1;
    background-color: rgba(0,0,0,0);
    color: white;
    border: none;
    resize: none;
}

.form-style1 button {
    width: 50%;
    border: solid 1px white;
    background-color: var(--grey);
    color: white;
    padding: 10px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.form-style1 button:hover {
    cursor: pointer;
    background-color: var(--red);
    transition: all 0.3s ease;
}

.table {
    display: flex;
    flex-direction: column;
    border: solid 1px #888;
}

.table .tr {
    display: flex;
    align-items: stretch;
}

.table .tr .td {
    border: solid 0.5px #888;
    padding: 4px 5px;
}

.table .tr .td.title-cell {
    background-color: var(--grey);
    color: white;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.col-1 {width:calc(1 / 12 * 100%);}
.col-2 {width:calc(2 / 12 * 100%);}
.col-3 {width:calc(3 / 12 * 100%);}
.col-4 {width:calc(4 / 12 * 100%);}
.col-5 {width:calc(5 / 12 * 100%);}
.col-6 {width:calc(6 / 12 * 100%);}
.col-7 {width:calc(7 / 12 * 100%);}
.col-8 {width:calc(8 / 12 * 100%);}
.col-9 {width:calc(9 / 12 * 100%);}
.col-10 {width:calc(10 / 12 * 100%);}
.col-11 {width:calc(11 / 12 * 100%);}
.col-12 {width:calc(12 / 12 * 100%);}

#top-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    font-family: var(--fn-alt);
    font-size: 15px;
    color: white;
    border-bottom: solid 1px var(--light-grey);
    background-color: black;
}

#top-strip .top-left {
    display: flex;
    column-gap: 40px;
    padding-left: 15px;
}

#top-strip .top-left a {
    color: var(--white);
    display: flex;
    align-items: center;
    column-gap: 5px;
    position: relative;
}

#top-strip .top-left a:hover {
    color: var(--light-grey);
}

#top-strip .top-left a:not(:last-child)::after {
    content: '';
    display: block;
    width: 1px;
    height: 50%;
    background-color: var(--white);
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
}

#top-strip .top-right {
    display: flex;
    align-items: center;
    column-gap: 20px;
}

#top-strip .top-right .waktusolat-box {
    position: relative;
}

#waktusolat-display {
    display: none;
    position: absolute;
    right: 0px;
    top: 105%;
    background-color: var(--white);
    color: black;
    border: solid 1px var(--grey);
    width: 250px;
    padding: 10px 15px;
    z-index: 9003;
    font-size: 0.9em;
}

#waktusolat-display > a {
    display: flex;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
    column-gap: 5px;
    margin-bottom: 10px;
    color: var(--red);
    font-weight: 600;
}

#waktusolat-display > a:hover {
    color: red;
}

#waktusolat-display .wslt-zon {
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 5px;
}

#waktusolat-display .wslt-times {
    width: 180px;
    margin: 10px auto 20px;
    border-collapse: collapse;
}

#waktusolat-display .wslt-times tr:not(:first-child) {
    border-top: dotted 1px var(--grey);
}

#waktusolat-display .wslt-times tr td {
    padding: 4px;
    display: flex;
    justify-content: space-between;
}

#waktusolat-display .wslt-foot {
    text-align: center;
    font-size: 11px;
}

#waktusolat-display .wslt-foot a {
    color: black;
}

@media all and (max-width: 1151px){
    #top-strip {
        flex-direction: column;
        row-gap: 10px;
        height: auto;
    }
}

@media all and (max-width: 767px){
    #top-strip {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
    #top-strip .top-left {
        display: flex;
        column-gap: 40px;
        flex-direction: column;
        row-gap: 5px;
        padding: 0px;
    }

    #top-strip .top-left a {
        justify-content: center;
    }

    #top-strip .top-left a:not(:last-child)::after {
        display: none;
    }

    #top-strip .top-right {
        flex-direction: column;
        row-gap: 5px;
    }

    #top-strip .top-right > .tarikh {
        font-size: 0.8em;
        text-align: center;
    }

    #top-strip .top-right .waktusolat-box {
        position: relative;
    }

    #waktusolat-display {
        right: -50px;
    }
}


nav {
    margin: 0px;
    display: flex;
    justify-content: stretch;
    align-items: center;
    column-gap: 20px;
    background-color: white;
    height: 120px;
    position: relative;
}

nav.sticky {
    position: fixed;
    top: -120px;
    left: 0;
    z-index: 9001;
    width: 100%;
    transform: translateY(120px);
    transition: transform 0.3s;
    box-shadow: 0px 1px 15px rgba(0,0,0,0.5);
}

nav #logo {
    position: relative;
    width: 200px;
    flex-grow: 0;
}

nav #logo > img {
    display: block;
    width: 100%;
}

nav #quick-cta {
    width: 300px;
    position: relative;
    display: flex;
    justify-content: space-between;
    flex-grow: 0;
}

nav #quick-cta a {
    width: 140px;
}

nav .nav-filler {
    flex-grow: 1;
}

#navmenu {
    position: relative;
    flex-grow: 0;
    font-family: var(--fn-alt);
    font-weight: 500;
}

ul.menu {
    list-style: none;
    padding: 0px;
    margin: 0px;
    display: flex;
    column-gap: 10px;
    font-size: 17px;
}

ul.menu li a {
    display: block;
    padding: 5px 10px;
    color: black;
}

ul.menu li a:hover {
    color: var(--red);
}

#menu-toggle {
    display: none;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    position: fixed;
    z-index: 9002;
    left: 50%;
    transform: translateX(-50%);
    top: 80px;
    background-color: rgba(255,255,255,0.7);
    color: black;
    border: solid 1px rgba(0,0,0,0.5);
    border-radius: 6px;
}

@media all and (max-width: 1439px){
    ul.menu {
        font-size: 16px;
    }
    ul.menu li a {
        text-align: center;
    }
    nav #quick-cta {
        width: 240px;
    }
    nav #quick-cta a {
        width: 110px;
        font-size: 16px !important;
    }
    nav.sticky,
    nav {
        position: fixed;
        top: auto;
        bottom: 100%;
        left: 0;
        flex-direction: column;
        justify-content: flex-start;
        row-gap: 30px;
        width: 100%;
        height: 100vh;
        transform: translateY(0);
        z-index: 9001;
        padding-top: 150px;
    }
    nav .nav-filler {
        display: none;
    }
    ul.menu {
        font-size: 20px;
        flex-direction: column;
        row-gap: 20px;
    }
    nav #quick-cta {
        width: 250px;
        flex-direction: column;
        row-gap: 20px;
        align-items: stretch;
        position: relative;
    }
    nav #quick-cta a {
        width: auto;
        flex-grow: 1;
    }
    #menu-toggle {
        display: flex;
    }
}

@media all and (max-width: 767px){
    #menu-toggle {
        top: 130px;
    }
    nav #logo {
        width: 150px;
    }
    nav {
        row-gap: 20px;
        padding-top: 180px;
    }
    nav.px-content {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
    ul.menu {
        font-size: 18px;
        row-gap: 10px;
    }
    nav #quick-cta {
        row-gap: 10px;
    }
}

.section-two-column {
    display: flex;
    column-gap: 100px;
}

.section-two-column > section {
    width: 50%;
}

footer {
    background-color: black;
    color: var(--white);
    position: relative;
    display: flex;
    column-gap: 100px;
    font-size: 16px;
    font-family: var(--fn-alt);
    line-height: 2em;
}

footer .foot-main {
    width: 34%;
    text-align: justify;
}

footer .foot-side {
    width: 33%;
}

footer .foot-title {
    font-weight: 600;
    margin-bottom: 30px;
}

footer .foot-title > span {
    position: relative;
    display: inline-block;
}

footer .foot-title > span::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: var(--yellow);
    left: 0px;
    bottom: -8px;
}

footer .foot-donate {
    display: flex;
    column-gap: 5px;
}

footer .foot-donate > a {
    display: block;
    width: 20%;
    text-align: center;
    background-color: var(--grey);
    padding: 15px 5px;
    color: white;
    border-radius: 8px;
    transition: all 0.2s ease;
}

footer .foot-donate > a:hover {
    background-color: var(--red);
    font-size: 1.1em;
    font-weight: 600;
    transition: all 0.2s ease;
}

footer .foot-note {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    flex-wrap: wrap;
    font-size: 13px;
}
footer .foot-note img {
    display: block;
    height: 16px;
}

footer addr {
    display: block;
}

footer addr.line {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: flex-start;
}

footer addr > label {
    display: inline-block;
    width: 50px;
}

footer addr > a {
    color: white;
    border-bottom: solid 1px black;
}

footer addr > a:hover {
    border-bottom: dashed 1px white;
}

footer .foot-socials {
    display: flex;
    align-items: center;
    column-gap: 15px;
}

footer .foot-socials > a {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    border: solid 2px white;
    border-radius: 50%;
    transition: all 0.2s ease;
}

footer .foot-socials > a:hover {
    background-color: white;
    color: var(--ultra-violet);
    transition: all 0.2s ease;
}

footer .foot-links a {
    color: white;
}

footer .foot-links a:hover {
    color: var(--yellow);
}

.credits {
    position: relative;
    background-color: black;
    color: var(--white);
    text-align: center;
    font-family: var(--fn-alt);
    font-size: 14px;
}

.credits a {
    color: var(--red);
    font-weight: 800;
}

.credits a:hover {
    color: var(--sky-magenta);
}

@media all and (max-width: 1365px) {
  footer {
    flex-direction: column;
    row-gap: 40px;
    column-gap: 0;
    font-size: 15px;
    padding-left: 30px !important;
    padding-right: 30px !important;
  }
  footer .foot-main,
  footer .foot-side {
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
  }
  footer .foot-main {
    text-align: left;
  }
  footer .foot-donate {
    flex-wrap: wrap;
    gap: 10px 5px;
  }
  footer .foot-donate > a {
    width: 120px;
    min-width: 90px;
    flex: 1 1 90px;
    padding: 10px 0;
    font-size: 1em;
  }
  footer .foot-socials {
    justify-content: flex-start;
    margin-bottom: 10px;
  }
  footer .foot-socials > a {
    width: 40px;
    height: 40px;
    font-size: 1.2em;
  }
  footer .foot-title {
    margin-bottom: 15px;
  }
  footer .foot-links {
    margin-bottom: 15px !important;
  }
  footer addr.line {
    flex-direction: row;
    align-items: flex-start;
  }
  .credits {
    font-size: 12px;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}

@media all and (max-width: 767px){
    .px-content {
        padding-left: 50px !important;
        padding-right: 50px !important;
    }
}

.dasar .baca-dasar {
    font-family: var(--fn-alt);
}

.dasar .baca-dasar h2.title {
    margin: 0;
    text-transform: uppercase;
}

.dasar .baca-dasar p.subtitle {
    margin: 0;
    color: var(--grey);
}

.dasar .baca-dasar > section {
    margin: 1em 0;
}

.dasar .baca-dasar > section addr > span {
    display: block;
}