/* Mode Dark */
[data-bs-theme=dark] {
    --bs-body-bg: initial !important;
    --text: #fff;
    --ijo: #14b8a6;
    /* header */
    --warna-1: #0f172a !important;
    /* pengalaman */
    --warna-2: #1b2439 !important;
    /* portofolio */
    --warna-3: #1e293b !important;
    /* partner done*/
    --warna-4: #cbd5e1 !important;
    /* blog */
    --warna-5: #0f172a !important;
    /* contact done*/
    --warna-6: #1e293b !important;
    --partner: black;
    --blog-body: #1e293b;
    --posts-body: #1e293b !important;
}

/* Mode Light */
[data-bs-theme=light] {
    --bs-body-bg: initial !important;
    --text: #000000;
    --ijo: #14b8a6;
    --warna-1: #ffffff !important;
    --warna-2: #ecf0f1 !important;
    --warna-3: #f1f5f9 !important;
    --warna-4: #1e293b !important;
    --warna-5: #f1f5f9 !important;
    --warna-6: #ffffff !important;
    --partner: white;
    --blog-body: #ffffff;
    --posts-body: #ecf0f1 !important;

}

.navbar .navbar-toggler {
    /* color: var(--warna-1); */
    background-color: var(--warna-4) !important;
}


* {
    text-decoration: none !important;
}

.hero h1,
.hero a,
nav a,
h2,
h4,
p,
.no-post,
.herodua p,
.nav-pagination li a,
.border-pagination,
.single-post li,
.linkcat svg,
.linkcat a,
.rules a {
    color: var(--text) !important;
}

.hero img {
    margin-top: -100px !important;
}

.dropdown-menu {
    --bs-dropdown-link-active-bg: #14b8a6 !important;
}

nav a,
.hero h4,
.hero h1,
.tentang h4,
.tentang h2,
.pengalaman h2,
.portofolio h4,
.partner h4,
.blog h4,
.blog h5,
.contact h4,
.contact .nama,
.contact .email,
.contact .pesan,
.contact button,
.blog button,
.herodua h2,
.posts a,
.posts h5,
.single-post .back,
.search button,
.pagination,
.login button,
.register button,
.list-category a {
    font-weight: bolder !important;
}

a:hover,
.populer a:hover,
.mode:hover {
    color: var(--ijo) !important;
}

.posts .card-body {
    background-color: var(--posts-body);
}



body {
    background-color: var(--warna-1);
}

.navbar-toggler {
    background-color: var(--text) !important;
}

.pengalaman {
    background-color: var(--warna-2);
}

.portofolio a {
    color: var(--text) !important;
}

.partner {
    background-color: var(--warna-4);
    padding-bottom: 100px;
}

.blog {
    background-color: var(--warna-5);
}

.blog .card-body,
.pengalaman .card-body {
    background-color: var(--blog-body) !important;
}

.contact {
    background-color: var(--warna-6);
}

footer {
    background-color: #0f172a !important;
}

header nav,
.mode-warna ul {
    backdrop-filter: blur(4px);
    background-color: rgba(15, 23, 42, 0.5);
}


navbar-brand,
.hero h4,
.tentang h4,
.portofolio h4,
.pengalaman h2,
.partner h4,
.blog h4,
.contact h4,
.contact .nama,
.contact .email,
.contact .pesan {
    color: var(--ijo) !important;
}

.hero .row {
    padding-top: 100px;
}


.hero h1 {
    font-size: 50px;
}

.hero h2::before {
    content: "Saya adalah ";
}

.hero p strong,
.name a,
.name button,
.tentang h2,
.descomp strong,
.pengalaman .card-title,
.portofolio h2,
.ipor button,
.ipor h5,
.blog h2,
.blog h5,
.contact h2,
.blog button,
.posts a,
.posts h5,
.single-post .back,
.search button,
.main-post strong,
.login button,
.register button,
.populer a {
    color: var(--text) !important;
}

.hero .name {
    margin-top: 200px;
}

.hero button,
#myBtn,
.ipor button,
.contact button,
.blog button,
.posts .btn,
.single-post .back,
.search button,
.pagination .active,
.login button,
.register button,
.portofolio a {
    background-color: var(--ijo) !important;
}

.hero button:hover,
#myBtn:hover,
.ipor button:hover,
.contact button:hover,
.link:hover,
.blog button:hover,
.posts .btn:hover,
.single-post .back:hover,
.search button:hover,
.login button:hover,
.register button:hover {
    background-color: var(--ijo) !important;
}

.hero img {
    padding-top: 150px;
}


.desbot p,
.descomp p,
.pengalaman p {
    font-weight: 500;
    font-size: 20px;
}

.tentang,
.pengalaman,
.portofolio,
.partner,
.blog,
.contact,
footer,
.single-post,
.login,
.register {
    padding-top: 5rem;
}


.pengalaman .card,
.blog .card,
.portofolio,
.posts .card,
.single-pos,
.pagination,
.pagination {
    background-color: var(var(--warna-3)) !important;
}

.pengalaman .card-text {
    opacity: .5 !important;
}


#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    color: white;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 15px;
    padding-left: 15px;
    padding-right: 15px;
    border-radius: 4px;
}

.portofolio .card-title {
    margin-top: 20px;
    color: white;
}


.conpor {
    padding-bottom: 50px;
}


.partner img {
    width: 250px !important;
}

.partner h2 {
    color: var(--partner) !important;
}

.parim img {
    filter: grayscale(100%);
    padding-right: 50px;

}

.parim img:hover {
    filter: grayscale(0%);
    transition-duration: 2s;
}

.blog,
.contact,
.posts,
.single-post {
    padding-bottom: 100px;
}

.contact button {
    border-radius: 40px !important;
}

.link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-bottom: 15px !important;
    padding-top: 10px !important;
}

.link svg {
    color: #cbd5e1 !important;
}

.garis {
    width: 500px;
    border-top: 3px solid white;
}

.copyright {
    text-align: center;
}

.herodua h2 {
    padding-top: 100px;
}

.contact input,
.contact textarea,
.login input,
.register input {
    background-color: #e2e8f0;
}

.login label,
.register label {
    color: black;
}

.form-loger .form-floating:focus-within {
    z-index: 2;
}

.form-loger .name {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-loger .username {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-loger .email {
    margin-bottom: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin .email {
    margin-bottom: -1px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

.form-signin .password {
    margin-bottom: -1px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.form-loger .password {
    margin-bottom: 10px;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.login .ror {
    background-color: #f8d7da !important;
}



.list-category {
    padding-top: 75px;
}

.contact input[type=text] {
    color: var(--warna-1) !important;
}


/* 
#1e293b
#1b2439
#283655
#cbd5e1
*/

/* Handphone */
@media (max-width: 575.98px) {
    .hero .row {
        padding-top: 0px;
    }

    .hero img {
        padding-top: 125px;
    }

    .hero .name {
        margin-top: 125px;
    }

    .hero h1 {
        font-size: 40px;
    }

    .hero img {
        width: 75%;
    }

    .hero {
        padding-bottom: 100;
    }


    .descomp {
        padding-top: 50px;
    }

    .main-post img {
        width: 100%;
    }
}