body {
    background-color: #ffffff;
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    width: auto !important;
}


/* bread */

ol.breadcrumb {
    font-weight: 500;
    font-size: small;
    color: #6c757d;
    margin-bottom: 0rem !important;
    background-color: #fafafa !important;
}

.breadcrumb-item+.breadcrumb-item:before {
    float: left;
    padding-right: 0.5rem;
    color: #6c757d;
    content: ">";
    font-weight: 700;
    font-family: "Poppins";
}


/* bread */

.bg-red {
    background-color: #ca3900;
}

.bg-dark-red {
    background-color: #a80000 !important;
}

.bg-semi-dark-red {
    background-color: #eb4200 !important;
}

.bg-light-red {
    background-color: #235F2C !important;
}

.border-light-red {
    border-color: #235F2C !important;
}

.border-md {
    border-width: 0.2rem !important;
}

.bg-orange {
    background-color: #ffa304 !important;
}

.bg-base {
    background-color: #ffffff !important;
}

.text-dark-red {
    color: #a83000 !important;
}

.text-grey {
    color: #acacac;
}

.text-light-red {
    color: #235F2C !important;
}

.skin-page-title {
    background-color: #fafafa !important;
    color: black !important;
    min-height: 2rem;
    font-weight: 700;
    /* padding: 0.8rem 1.5rem !important; */
    /* margin-bottom: 4rem; */
}

.text-orange {
    color: #ffa304 !important;
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:focus,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-nav .nav-link {
    color: black;
}

.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #235F2C;
}

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
    color: #235F2C;
}

.portfolio-navbar .navbar-nav .nav-link {
    font-weight: 500;
}

.portfolio-navbar .navbar-nav .nav-link.active {
    font-weight: 800;
}

.navbar {
    padding-top: 0rem;
    padding-bottom: 0rem;
}

.navbar-brand.logo img {
    height: 60px !important;
    width: auto !important;
}

.navbar-expand-lg .navbar-collapse {
    align-content: center !important;
}

.navbar-toggler {
    background-color: #a80000;
    border: 1px solid #074514;
}

.circle-md {
    width: 70px !important;
    height: 70px !important;
    padding: 0.7rem;
    border-radius: 50% !important;
}

.circle-mdsmall {
    width: 50px !important;
    height: 50px !important;
    padding: 0.4rem;
    border-radius: 50% !important;
}

.circle-lg {
    width: 110px !important;
    height: 110px !important;
    padding: 1rem;
    border-radius: 50% !important;
}

.circle-xl {
    width: 150px !important;
    height: 150px !important;
    padding: 2rem;
    border-radius: 50% !important;
}

.circle-sm {
    width: 30px !important;
    height: 30px !important;
    padding: 0.2rem;
    border-radius: 50% !important;
}

.square-mdsmall {
    width: 50px !important;
    height: 50px !important;
    padding: 0.4rem !important;
    border-radius: 15% !important;
}

ul.yess li a {
    color: white;
    font-weight: 400;
}

.rounded-lg {
    border-radius: 0.6rem !important;
}

.rounded-left-lg {
    border-radius: 0.6rem 0rem 0rem 0.6rem !important;
}

.rounded-right-lg {
    border-radius: 0rem 0.6rem 0.6rem 0rem !important;
}

.no-bg {
    background-color: transparent !important;
}

.bg-line {
    background-image: url("../img/line-bg.svg");
    background-size: auto 100%;
    background-position-x: right;
    background-repeat: no-repeat;
    color: white;
}

.bg-img {
    background-image: linear-gradient(90deg, #cc0000 60%, rgba(6, 69, 20, 0) 118.02%), url("../img/banner-hero.webp");
    background-size: auto 100%;
    background-position-x: right;
    background-repeat: no-repeat;
    /* background-size: cover; */
    color: white;
}

.bg-img-pelatihan {
    background-image: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("../img/yess/medium-shot-two-farm-coworkers-facing-camera-standing-greenhouse-looking-screen-tablet-pc.jpg");
    background-size: cover;
    background-position-y: 5%;
    background-position-x: right;
    background-repeat: no-repeat;
    /* background-size: cover; */
}

.bg-img-hibkom {
    background-image: linear-gradient(90deg, #064514 60%, rgba(6, 69, 20, 0) 118.02%), url("../img/yess/medium-shot-two-farm-coworkers-facing-camera-standing-greenhouse-looking-screen-tablet-pc 1.jpg");
    background-size: auto 100%;
    background-position-x: right;
    background-repeat: no-repeat;
    /* background-size: cover; */
    color: white;
}

.bg-img-program {
    background-image: linear-gradient(90deg, #064514 30%, rgba(6, 69, 20, 0) 100%), url("../img/yess/5945528128897024.jpg");
    background-size: cover;
    background-position-y: -12rem;
    background-position-x: right;
    background-repeat: no-repeat;
    /* background-size: cover; */
}

@media only screen and (max-width: 1200px) {
    .bg-img {
        background-image: linear-gradient(90deg, #cc0000 70%, rgba(6, 69, 20, 0) 118.02%), url("../img/banner-hero.webp");
        background-size: auto 100%;
        background-position-x: right;
        background-repeat: no-repeat;
        /* background-size: cover; */
        color: white;
    }
}

.card-input-element+.card {
    color: var(--primary);
    border: 2px solid transparent;
    border-radius: 4px;
}

.card-input-element+.card:hover {
    cursor: pointer;
}

.card-input-element:checked+.card {
    border: 2px solid var(--primary);
    -webkit-transition: border 0.3s;
    -o-transition: border 0.3s;
    transition: border 0.3s;
}

.card-input-element:disabled+.card {
    cursor: not-allowed;
}

.skew-square {
    height: 60px;
    width: 60px;
    pad: 1rem;
    transform: rotate(-59.46deg);
}

.skew-square span {
    position: absolute;
    transform: rotate(59.46deg);
    bottom: 15%;
    right: 40%;
    font-size: 26px;
}

.bg-stroke-curve {
    background-image: url("../img/icon/stroke.svg");
    background-position-y: 75%;
    background-position-x: 50%;
    background-repeat: no-repeat;
    background-size: fit;
}

.my-5 {
    margin: 5rem 0rem;
}

.py-5 {
    padding: 5rem 0rem;
}

.bg-petani {
    background-image: linear-gradient(0deg, #064514 0%, rgba(6, 69, 20, 0) 118.02%), url("../img/pexels-anna-shvets-5231143\ \(1\).jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 45%;
}

.bg-pwmp {
    background-image: linear-gradient(0deg, #064514 0%, rgba(6, 69, 20, 0) 118.02%), url("../img/header_pwmp.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 45%;
}


/* tab navs */

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    color: black;
    font-weight: 700;
    box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.15) !important;
    margin-bottom: 1rem !important;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0rem;
    border-left: 4px solid #dee2e6 !important;
    border-color: #0ea0ff !important;
}

a.nav-link {
    color: black;
}


/* pagination */

.page-item.active .page-link {
    z-index: 3;
    color: #fff;
    background-color: #235F2C !important;
    border-color: #235F2C !important;
}

.page-link a {
    color: #235F2C !important;
}


/* end pagination */

.card-kegiatan-main {
    position: relative !important;
    padding: 3rem 3rem 1rem 2rem !important;
    margin-top: 2rem !important;
    height: 18rem !important;
}

.card-kegiatan-ornament {
    position: absolute !important;
    top: -3rem;
    left: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
}

.ornament-img {
    width: 40px;
}

.card-rekrut-main {
    position: relative !important;
    padding: 1rem 3rem 1rem 2rem !important;
    margin-top: 2rem !important;
}

.card-rekrut-icon {
    width: 80px;
    height: 80px;
}

.number-rekrut {
    font-size: 13pt;
    position: absolute !important;
    top: 2rem;
}

.icon-img {
    width: 70px;
}

@media only screen and (max-width: 575.98px) {
    .card-kegiatan-main {
        margin-top: 2rem !important;
        height: 13rem !important;
    }
    .card-rekrut-main {
        margin-top: 2rem !important;
    }
}

.kubah {
    position: relative;
    width: 15rem;
    height: 20rem;
    background: linear-gradient(180deg, #0db546 0%, #ffaf51 133.89%);
    border: 15px solid rgba(6, 69, 20, 0.3);
    box-sizing: border-box;
    border-radius: 500px 500px 30px 30px;
}

.kubah-image {
    position: absolute;
    width: 23rem;
    height: auto;
    top: -5rem;
    left: 1rem;
}

.read-more {
    text-decoration: none;
    text-decoration-style: none;
}

.text-wait-footer {
    font-size: 20pt;
}

.mitra-img {
    width: 100px !important;
}

.box {
    background: #ffffff;
}

.box-testimonial {
    background: #f1cc3f;
    border-radius: 15px;
    width: 70%;
}

.testimonial-img {
    top: -3rem;
}

.testimonial-caption {
    border-left: 8px solid #e03d3d;
    font-size: 10pt;
    position: relative;
    bottom: 3rem;
    background-color: white;
}

.testimonial-caption p {
    border-left: 1px solid rgba(147, 147, 147, 0.3);
}

.box-program {
    padding-bottom: 30px;
    /* border-bottom: 2px solid white; */
}