:root {
    --hijau: #539165;
    --kuning: #f7c04a;
    --ungu: #3f497f;
    --cream: #f8f5e4;
    --gold: #ffd700;
    --coklat: #bf9f62;
    --biru: #007AFF;
}

body {
    font-family: "Poppins", sans-serif;
    margin: 0;
    padding: 0;
}

/* navbar */
/* -------------------------- */
.container-navbar {
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
}
.container-navbar .navbar {
    background: var(--kuning);
    padding: 10px 20px;
}
.container-fluid img {
    width: 180px;
    height: 50px;
}

.nav-link {
    font-weight: 500;
    color: black !important;
}

#login {
    /* margin-left: 30px; */
    border: 1px solid black;
    border-radius: 10px;
    width: max-content;
    padding: 0 5px;

    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.3);
}

.nav-link:hover {
    color: white !important;
    transition: all 0.3s ease-in-out;
}

.nav-item .dropdown-menu li {
    position: relative;
    left: 0;
    top: -7px;
}

/* HERO */
/* ------------------------- */
.container-hero {
    width: 100%;
    height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
        url("/img/makkah.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.container-hero .hero-title {
    display: flex;
    width: 100%;
    max-width: 800px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-width: 2px;
    text-transform: capitalize;
}
.hero-title > p {
    color: white;
    font-size: 30px;
    text-align: center;
    font-weight: 500;
    font-family: "inter", sans-serif;
}
.hero-title h1 {
    text-align: center;
    color: #ffd700;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
        0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
        0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2),
        0 20px 20px rgba(0, 0, 0, 0.15);

    font-size: 80px;
    font-family: "Lexend Deca", sans-serif;
}
/* .hero-title h1 {
    text-align: center;
    color: var(--gold);
    text-shadow: 0 10px 12px rgba(0, 0, 0, 3);
    font-size: 80px;
    font-family: "Lexend Deca", sans-serif;
} */

/* PROGRAM */
.container-program {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
}
.container-program .title-head {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-program .title-head > h1 {
    text-transform: uppercase;
    text-align: center;
    font-weight: 600;
}

.ct-card {
    width: 100%;
    display: flex;
    padding: 10px 20px;
    height: auto;
    justify-content: center;
    flex-wrap: wrap;
    gap: 30px;
}

.ct-card .card {
    background: white;
    width: 350px;
    border-radius: 15px;
    text-transform: capitalize;
    box-shadow: 0 6px 8px rgba(174, 190, 205, 0.4);
}

.card-image img {
    height: 250px;
    width: 350px;
    object-fit: cover;
    border-radius: 15px 15px 0 0;
}

.card h2 {
    padding: 10px;
    text-align: center;
    text-transform: capitalize;
}

.card ul {
    padding: 0 10px;
}

.card ul li {
    display: flex;
    padding-bottom: 5px;
    font-weight: 600;
    font-size: 14px;
    justify-content: start;
    text-transform: capitalize;
    gap: 0 10px;
}

.card ul li i {
    transform: translateY(25%);
    color: var(--kuning);
}
.card a:hover {
    border: 1px solid white;
}
.card > a {
    background-color: var(--kuning);
    color: black;
    font-weight: 600;
    padding: 10px 15px;
    display: block;
    text-align: center;
    margin: 0px 50px 10px 50px;
    border-radius: 10px;
    text-decoration: none;
    text-transform: capitalize;
}
.card:hover {
    background-color: #454545;
    color: white;
    cursor: pointer;
    transform: scale(1.03);
    transition: all 1s ease;
}

/* TENTANG */
.container-about {
    /* height: 400px; */
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.container-about > h1 {
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    color: black;
}

.container-about .about-child {
    max-width: 100%;
    /* height: 500px; */
    padding: 10px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    /* background: var(--kuning); */
    border-radius: 15px;
    border: 2px solid var(--kuning);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
    gap: 20px 30px;
}

.container-about .about-child img {
    max-width: 100%;
    width: 600px;
    max-height: 330px;

    max-height: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.8);
}

.container-about .about-child span {
    max-width: 480px;
    padding: 10px;
    /* flex-wrap: wrap; */
}
.container-about .about-child span ul {
    font-size: 14px;
}

/* Galeri */
.container-galeri {
    width: 100%;
    padding: 0 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container-galeri h1 {
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
    color: black;
}
.container-galeri .video {
    position: relative;
    max-width: 850px;
    width: 100%;
    height: 432px;
    padding: 20px 0;
    border-radius: 10px;
    background-color: whitesmoke;
    overflow: hidden;
    margin-bottom: 30px;
    border: 2px solid var(--kuning);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
}

.video .vid {
    display: flex;
    flex-direction: row;
}

.vid .v-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}
.v-slide iframe {
    max-width: 100%;
    width: 768px;
    height: 100%;
    /* height: 432px; */
}

.video .nav-btn {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transform: translateY(20px);
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.video .nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}
.video .nav-btn::after,
.video .nav-btn::before {
    font-size: 20px;
    color: white;
}

.swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0.8);
}

.swiper-pagination-bullet-active {
    background-color: blue;
}

.slider {
    width: 100%;
    height: 220px;
    margin: auto;
    position: relative;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
}

.slide-track {
    display: flex;
    width: calc(250px * 18);
    animation: scroll 40s linear infinite;
}
.slide-track:hover {
    animation-play-state: paused;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-250px * 9));
    }
}

.slide-track .slide {
    height: 200px;
    width: 250px;
    display: flex;
    align-items: center;
    padding: 15px;
    perspective: 100px;
}

.slide-track .slide img {
    width: 100%;
    transition: transform 1s;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
}
.slide-track .slide img:hover {
    transform: translateZ(20px);
}

.slider::before,
.slider::after {
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        /* rgba(255, 215, 0, 1) 0%, */ rgba(0, 0, 0, 0) 100%
    );
    content: "";
    height: 100%;
    position: absolute;
    width: 10%;
    z-index: 2;
}

.slider::before {
    left: 0;
    top: 0;
}
.slider::after {
    right: 0;
    top: 0;
    transform: rotateZ(180deg);
}

/* Testimonial */

.container-testi {
    /* height: 400px; */
    width: 100%;
    display: flex;
    padding: 20px;
    align-items: center;
    flex-direction: column;
    justify-content: center;
}
.container-testi h1 {
    text-transform: uppercase;
    font-weight: 600;
}
.container-testi .testimonial {
    position: relative;
    max-width: 900px;
    width: 100%;
    max-height: 100%;
    padding: 20px 0;
    border-radius: 10px;
    background-color: whitesmoke;
    overflow: hidden;
    border: 2px solid var(--kuning);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.3);
}

.testimonial .slide {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-bottom: 5px;
}

.slide .details > p {
    text-align: center;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: black;
}

.slide .details {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-transform: capitalize;
    text-align: center;
    word-break: break-word;
}

.details .name {
    font-size: 20px;
    font-weight: 600;
    color: black;
}

.details .job {
    font-size: 16px;
    font-weight: 400;
    color: var(--kuning);
}

/* .nav-btn {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    transform: translateY(20px);
    background-color: rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}

.nav-btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.nav-btn::after,
.nav-btn::before {
    font-size: 20px;
    color: white;
} */

.swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0.8);
}

.swiper-pagination-bullet-active {
    background-color: blue;
}


/* Berita */
/* ------------------------- */
.container-berita > h1 {
    text-transform: uppercase;
    font-weight: 600;
}

.container-berita > div > a:hover {
    background-color: var(--kuning);
}

.container-berita > .row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
    padding: 20px;
}

.container-berita > .row > .card {
    width: 350px;
    background: #eaeaea;
}

.container-berita > .row > .card > .card-body {
    padding: 10px;
}

.container-berita > .row > .card > img {
    width: 300px;
    height: auto;
}

.container-berita > .row > .card > .card-body > .card-title {
    inset: 0;
}

.container-berita > .row > .card {
    color: #041e44;
}

.container-berita > .row > .card > .card-footer {
    padding: 0 !important;
}

.container-berita > .row > .card > .card-footer > .btn {
    padding: 0;
    background-color: var(--kuning);
}

.container-berita > .row > .card > .card-footer > .btn:hover {
    color: red;
}


/* Footer*/
/* ------------------------- */
.footer {
    width: 100%;
    background: var(--kuning);
    display: flex;
    padding: 20px;
    flex-wrap: wrap;
    flex-direction: column;
    font-size: 14px;
}
.footer .ct-footer {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}
.ct-footer .title-footer {
    width: 100%;
    max-width: 650px;
    padding: 0 10px;
    align-items: start;
}
.ct-footer .title-footer > img {
    width: 300px;
    height: 100px;
    margin-bottom: 10px;
}
.ct-footer .title-footer ul li i {
    padding-right: 10px;
}
.ct-footer .title-footer > ul {
    padding: 0;
    gap: 10px 0;
}
.ct-footer .title-footer > ul > li {
    list-style: none;
    display: flex;
    justify-content: left;
    align-items: baseline;
}

.ct-footer .contact-footer {
    padding: 20px;
    max-width: 100%;
    width: 330px;
    display: flex;
    flex-direction: column;
}
.ct-footer .contact-footer > h3 {
    font-weight: 500;
    color: white;
    margin-bottom: 10px;
    text-shadow: 0 3px 2px black;
}

.ct-footer .contact-footer > ul {
    padding: 0;
    gap: 10px 0;
    display: flex;
    justify-content: left;
    align-items: baseline;
}
.ct-footer .contact-footer > ul > li > p {
    padding: 0;
    margin: 0;
}
.ct-footer .contact-footer > ul > li {
    list-style: none;
}

.ct-footer .contact-footer > ul > i {
    transform: translateY(25%);
    padding-right: 10px;
}
.ct-footer .title-footer > span > p,
.ct-footer .contact-footer > span > p {
    padding-left: 10px;
}

/* Icons */
.contact-footer .icons .icon {
    display: flex;
    gap: 10px;
}

.icons .icon .icon-fb {
    background-color: #4267b2;
}
.icons .icon .icon-ig {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}
.icons .icon .icon-ytb {
    background-color: #ff0000;
}
.icons .icon .icon-tiktok {
    background-color: #000;
}
.icons .icon .icon-wa {
    background-color: #25d366;
}

/* icon hover */
.icons .icon .icon-fb:hover {
    background-color: #4267b2;
}
.icons .icon .icon-ig:hover {
    background: radial-gradient(
        circle at 30% 107%,
        #fdf497 0%,
        #fdf497 5%,
        #fd5949 45%,
        #d6249f 60%,
        #285aeb 90%
    );
}
.icons .icon .icon-ytb:hover {
    background-color: #ff0000;
}
.icons .icon .icon-tiktok:hover {
    background-color: #000;
}
.icons .icon .icon-wa:hover {
    background-color: #25d366;
}

.icons .icon a {
    display: inline-flex;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transition-duration: 0.25s;
    color: white;
    text-decoration: none;
}

.icons .icon a > i {
    margin: auto;
    font-size: 30px;
}

.icons .icon .icon-fb:hover,
.icons .icon .icon-ig:hover,
.icons .icon .icon-wa:hover,
.icons .icon .icon-ytb:hover,
.icons .icon .icon-tiktok:hover {
    animation: shake 0.25s;
    outline-offset: 4px;
    outline: 2px solid #fff;
}

.icons a .logo-siskopatuh:hover {
    outline-offset: 4px;
    outline: 2px solid white;
    border-radius: 10px;
}

@keyframes shake {
    10% {
        transform: rotate(20deg);
    }
    20% {
        transform: rotate(-20deg);
    }
    30% {
        transform: rotate(20deg);
    }
    40% {
        transform: rotate(-20deg);
    }
}

/* End Icon */

.footer > hr {
    height: 5px;
}
.footer > .bwh {
    text-align: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}

/* Media Query  */

@media screen and (max-width: 480px) {
    .container-hero {
        height: 300px;
        width: 100%;
    }
    .hero-title p {
        font-size: 14px;
    }
    .hero-title h1 {
        font-size: 40px;
    }

    /* program card */
    .card-image img {
        width: 100%;
        object-fit: cover;
        border-radius: 15px 15px 0 0;
    }

    /* tentang */
    .container-about .about-child img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }

    /* galeri */
    .container-galeri .video {
        height: 250px;
        width: 90%;
    }
    .container-galeri .slider {
        height: 150px;
        width: 100%;
    }
    .container-galeri .slide {
        height: 150px;
        width: 250px;
    }

    /* testimonial */
    .slide .span {
        font-size: 14px;
    }
    .slide .details > p {
        font-size: 12px;
    }

    /* footer */
    .ct-footer {
        display: flex;
        flex-direction: column;
        justify-content: left;
    }
}

@media screen and (min-width: 481px) and (max-width: 768px) {
    /* program card */
    .card-image img {
        width: 100%;
        object-fit: cover;
        border-radius: 15px 15px 0 0;
    }

    /* tentang */
    .container-about .about-child img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    /* testimonial */
    .slide .span {
        font-size: 14px;
    }
    .slide .details > p {
        font-size: 12px;
    }

    /* footer */
    .ct-footer {
        display: flex;
        flex-direction: column;
        justify-content: left;
    }
}

@media screen and (min-width: 769px) and (max-width: 1024px) {
    /* program card */
    .card-image img {
        width: 100%;
        object-fit: cover;
        border-radius: 15px 15px 0 0;
    }

    /* tentang */
    .container-about .about-child img {
        max-width: 100%;
        max-height: 100%;
        object-fit: cover;
    }
    /* testimonial */
    .slide .span {
        font-size: 14px;
    }
    .slide .details > p {
        font-size: 12px;
    }

    /* footer */
    .ct-footer {
        display: flex;
        flex-direction: column;
        justify-content: left;
    }
}