@font-face {
    font-family: 'Montserrat Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Regular'), url('../fonts/montserrat/Montserrat-Regular.woff') format('woff');
    }
@font-face {
    font-family: 'Montserrat Thin';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Thin'), url('../fonts/montserrat/Montserrat-Thin.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat Light';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Light'), url('../fonts/montserrat/Montserrat-Light.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Medium'), url('../fonts/montserrat/Montserrat-Medium.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat SemiBold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat SemiBold'), url('../fonts/montserrat/Montserrat-SemiBold.woff') format('woff');
}
@font-face {
    font-family: 'Montserrat Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Montserrat Bold'), url('../fonts/montserrat/Montserrat-Bold.woff') format('woff');
}

:root {
    --c-utama: #ED2333;
    /* --c-utamasecond: rgba(250, 0, 0, 1); */
    --c-body: #000;
    --c-white: #fff;
    --c-gray: #8C8C8C;
    --c-gray-dark: #626262;
    --f-regular: 'Montserrat Regular';
    --f-thin: 'Montserrat Thin';
    --f-light: 'Montserrat Light';
    --f-medium: 'Montserrat Medium';
    --f-semibold: 'Montserrat SemiBold';
    --f-bold: 'Montserrat Bold';
}

body {
    color: var(--c-body);
    font-family: var(--f-regular);
}
a,
a:hover {
    color: var(--c-utama);
    text-decoration: none;
}
.c-utama {
    color: var(--c-utama) !important;
}
.f-semibold {
    font-family: var(--f-semibold);
}
@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1220px;
    }
}

/* CSS Header */
    .header {
        border-bottom: 4px solid transparent;
        border-image: url('../images/header-border.svg') 5 round;
    }
    .navbar a, .navbar a:focus {
        color: var(--c-body);
        font-family: var(--f-bold);
        font-size: 13px;
    }
    .navbar a:hover,
    .navbar .active,
    .navbar .active:focus,
    .navbar li:hover>a {
        color: var(--c-utama);
    }
    .navbar>ul>li>a:before{
        background-color: var(--c-utama);
    }
    @media (min-width: 1280px){
        .navbar>ul>li>a:before {
            width: 25%;
            left: 35%;
            transform: translate(-35%, 0);
        }
        .navbar li.btn-login a {
            background-color: var(--c-utama);
            color: var(--c-white);
            border-radius: 10px 3px 3px 3px;
            margin-left: 20px;
            padding-left: 25px;
            padding-right: 25px;
        }
        .navbar li.btn-login a:hover
        .navbar li.btn-login a:focus {
            color: var(--c-white);
        }
    }
    @media (max-width: 1279px){
        .navbar ul {
            background: rgba(255,255,255,0.9);
        }
        .navbar a, .navbar a:focus {
            font-size: 12px;
        }
    }
/* CSS Header */

/* CSS sTIKY HEADR */
make-sticky{
    background: #EFEBEB;
    padding: 10px 0;
}
.make-sticky.is-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9;
    background: #fff;
    border-bottom: 4px solid transparent;
    border-image: url(../images/header-border.svg) 5 round;
    padding: 5px 0;
}
.make-sticky.is-fixed .logo img { 
    max-height: 50px;
    -webkit-transition: max-height 1s; 
    -moz-transition: max-height 1s; 
    -ms-transition: max-height 1s; 
    -o-transition: max-height 1s; 
    transition: max-height 1s;  
}
@media (min-width: 1280px) {
    .make-sticky.is-fixed .navbar a {
        padding-bottom: 10px;
    }
    .make-sticky.is-fixed .navbar>ul>li>a:before {
        display: none;
    }
}
@media (max-width: 1279px){
    .make-sticky.is-fixed .mobile-nav-toggle {
        top: 24px;
    }
}
/* CSS sTIKY HEADR */
/* CSS Breadcumb */
.breadcrumbs {
    background-image: url('../images/bg-title.jpg');
    background-size: cover;
    padding: 2.4em 0;
}
.breadcrumbs h2 {
    font-family: var(--f-semibold);
    color: var(--c-white);
    font-size: 28px;
    display: block;
    text-transform: uppercase;
}
.breadcrumbs ol li,
.breadcrumbs ol li a {
    font-family: var(--f-medium);
    color: var(--c-utama);
    font-size: 12px;
}
.breadcrumbs ol li+li::before {
    color: var(--c-utama);
}
/* CSS Breadcumb */
/* CSS Footer */
.scroll-top {
    background: var(--c-utama);
}
.scroll-top:hover {
    background: var(--c-utamasecond);
}

.footer .footer-content {
    background: var(--c-white);
    background-image: url('../images/bg-footer.png');
    background-size: 100% auto;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 8em 0 7em;
}
.footer .footer-content h3 {
    font-family: var(--f-bold);
    font-size: 20px;
    color: var(--c-body);
    text-transform: uppercase;
    margin-top: 2em;
}
.footer .footer-content p,
.footer .footer-content a{
    color: var(--c-gray);
    font-size: 14px;
    font-weight: 400;
    line-height: 24px;
}
.footer .footer-content h4 {
    font-size: 20px;
    font-family: var(--f-semibold);
    margin-top: 2em;
    margin-bottom: 25px;
    color: var(--c-utamasecond);
}
.footer .footer-content h4::after {
    width: 50px;
    background: var(--c-utamasecond);
}
.footer .footer-content .footer-info img {
    max-width: 60%;
    display: inline-block;
    margin-bottom: 0.7em;
}
.footer .footer-content .footer-info h5{
    color: #FFF;
    font-size: 20px;
    line-height: 30px; 
    letter-spacing: 0.6px;
    text-transform: capitalize;
    margin-top: 10px;
}
.footer .footer-content .footer-info p {
    color: #FFF;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 150% */
    letter-spacing: 0.36px;
    font-size: var(--f-regular);
}
.footer .footer-content .footer-links ul a {
    color: #fff;
}
.footer .footer-legal {
    /* background: #003214; */
}
.footer .footer-legal .social-links a {
    background: rgba(141,141,141, .1);
    color: var(--c-gray);
}
.footer .footer-legal .social-links a:hover {
    background: rgba(141,141,141, .1);
    color: var(--c-utama);
}
@media (min-width: 992px){
    .footer .footer-content .col-lg-5.footer-links {
        padding-left: 5%;
    }
}
@media (max-width: 768px){
    .footer .footer-content .footer-info img {
        max-width: 90%;
    }
    .footer .footer-content .footer-info h5 {
        font-size: 16px;
        line-height: 26px;
    }
    .footer .footer-content {
        padding: 6em 0 4em;
    }
    .footer .footer-content h4 {
        font-size: 16px;
        margin-top: 0;
        margin-bottom: 15px;
    }
    .footer .footer-content img {
        width: 70%;
    }
    .footer .footer-content h3 {
        font-size: 16px;
        margin-top: 1.5em;
    }
    .footer .footer-content p, .footer .footer-content a {
        font-size: 12px;
        line-height: 19px;
    }
}
/* CSS Footer */

.btn-utama, 
.btn-utama:focus,
.btn-utama:hover {
    font-size: 12px;
    color: var(--c-white);
    background-color: var(--c-utama);
    padding: 7px 23px;
    border-radius: 4px;
    transition: 0.3s;
    font-family: var( --f-semibold);
    border-radius: 10px 3px 3px 3px;
    display: inline-block;
}
.btn-utamasecond, 
.btn-utamasecond:focus,
.btn-utamasecond:hover {
    font-size: 16px;
    color: var(--c-white);
    background-color: var(--c-utamasecond);
    padding: 8px 23px;
    border-radius: 4px;
    transition: 0.3s;
    font-family: var( --f-semibold);
    border-radius: 4px;
    display: inline-block;
}
table.table thead th{
    background-color: var(--c-utama);
    color: var(--c-white);
    font-family: var( --f-semibold);
}
table.table tbody td{ 
    font-size: 14px;
}
.dropify-wrapper input::placeholder {
    font-size: 12px;
}
.section-header h2{
    color: var(--c-utamasecond);
    font-family: var(--f-semibold);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: uppercase;
}
.section-header h3{
    color: var(--c-body);
    font-family: var(--f-semibold);
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    text-transform: capitalize;
}
.section-header p {
    color: var(--c-body);
    text-transform: capitalize;
}

@media (max-width: 768px) {
    header.header .btn-utama{
        margin-right: 50px;
        font-size: 14px;
        padding: 7px 15px;
    }

    .section-header h2{
        font-size: 32px;
    }
    .section-header h3{
        font-size: 26px;
    }
    .section-header p {
        font-size: 14px;
    }
    table.table tbody td{ 
        font-size: 12px;
    }
}

.swiper-pagination-bullet-active {
    background: var(--c-utama)
}

/* CSS Title */
    .heading-title {
        margin-bottom: 3em;
    }
    .heading-title h3{
        font-family: var(--f-bold);
        font-size: 32px;
        color: var(--c-body);
        margin-bottom: 0;
        position: relative;
    }
    .heading-title h3::after {
        content: "";
        position: absolute;
        display: block;
        width: 37px;
        height: 3px;
        background: var(--c-utama);
        bottom: -10px;
        left: 0;
    }
    .heading-title a {
        font-family: var(--f-medium);
        font-size: 15px;
    }
    .heading-title-white h3,
    .heading-title-white h3::after,
    .heading-title-white a {
        color: var(--c-white) !important;
    }
    @media (max-width: 768px) {
        .heading-title h3{ 
            font-size: 17px;
        }
        .heading-title a {
            font-size: 14px;
        }
        .heading-title h3::after {
            width: 26px;
        }
    }
/* CSS Title */

/* CSS HERO SLIDER */
    .hero {
        background: var(--c-utama);
        padding: 0;
    }
    #hero.hero .carousel-item {
        min-height: 600px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }
    #hero.hero .carousel-item h2{
        color: var(--c-body);
        font-family: var(--f-bold);
        font-size: 32px;
        font-style: normal;
        line-height: normal;
    }
    .hero p {
        color: var(--c-gray);
    }
    @media (max-width: 768px) {
        #hero.hero .carousel-item {
            min-height: 500px;
            padding: 15px 0;
        }        
        #hero.hero .carousel-item h2{
            font-size: 16px;
        }
        .hero p {
            font-size: 13px;
        }
    }
/* CSS HERO SLIDER */

/* CSS Jenis Pelatihan */
    .jenis-pelatihan .section-header p {
        color: var(--c-body);
        font-family: var(--f-regular-bold);
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 22px; /* 157.143% */
        text-transform: capitalize;
    }
    .card-jenis-pelatihan img {
        width: 130px;
        height: 130px;
        object-fit: contain;
    }
    .card-jenis-pelatihan h1 {
        position: relative;
        color: var(--c-utama);
        font-family: var(--f-semibold);
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .card-jenis-pelatihan p {
        color: var(--c-body);
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px; /* 185.714% */
    }
    @media (min-width: 992px){
        .card-jenis-pelatihan .col-md-9 {
            padding-left: 5%;
        }
        .card-jenis-pelatihan h1::after {
            content: "";
            position: absolute;
            display: block;
            width: 2px;
            height: 32px;
            background: var(--c-utamasecond);
            bottom: 0;
            left: -4%;
        }
    }
/* CSS Jenis Pelatihan */

/* CSS JADWAL PELATIHAN*/
    .jadwal-pelatihan {
        padding: 80px 0;
        background: url(../images/bg-jadwal-pelatihan.jpg) no-repeat;
        background-position: center center;
        background-size: cover;
        position: relative;
    }
/* CSS JADWAL PELATIHAN*/

/* CSS TATA CARA */
    .card-tata-cara {
        border: 0;
        padding: 40px 30px;
        margin: 15px;
        border-radius: 4px;
        box-shadow: 0px 16px 35px 0px rgba(0, 0, 0, 0.06), 0px 64px 64px 0px rgba(0, 0, 0, 0.05), 0px 143px 86px 0px rgba(0, 0, 0, 0.03), 0px 255px 102px 0px rgba(0, 0, 0, 0.01), 0px 398px 111px 0px rgba(0, 0, 0, 0.00);
        box-shadow: 0px 0 25px rgba(var(--color-black-rgb), 0.1);
    }
    .card-tata-cara .card-title {
        color: var(--c-utama);
        font-family: var(--f-semibold);
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 26px; 
        position: relative;
    }
    .card-tata-cara .card-title::before {
        content: "";
        position: absolute;
        width: 65%;
        height: 2px;
        bottom: 0;
        left: -30px;
        background-color: var(--c-utamasecond);
    }
    .card-tata-cara .card-title span {
        color: var(--c-utamasecond);
        -webkit-text-fill-color: white; /* Will override color (regardless of order) */
        -webkit-text-stroke-width: 1px;
        -webkit-text-stroke-color: var(--c-utamasecond);
        font-size: 48px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
    }
    .card-tata-cara .card-body {
        color: var(--c-body);
        font-family: var(--f-regular);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 26px;
    }
    .card-tata-cara .card-body strong{
        font-family: var(--f-regular-bold);
        font-weight: normal !important;
    }

    @media (max-width: 768px) {
        .card-tata-cara .card-title {
            font-size: 22px;
        }
        .card-tata-cara .card-title span {
            font-size: 38px;
        }
        .card-tata-cara .card-body {
            font-size: 14px;
        }
    }
/* CSS TATA CARA */

/* CSS DAFTAR SEKARANG */
    .section-daftar-sekarang {
        background: #F2F6FF;
    }
    .section-daftar-sekarang label {
        font-size: 16px;
    }
    .section-daftar-sekarang .form-control,
    .section-daftar-sekarang .form-select{
        background: rgba(230, 230, 230, 0.29);
    }
    @media (max-width: 768px) {
        .section-daftar-sekarang label {
            font-size: 14px;
        }
    }
/* CSS DAFTAR SEKARANG */


/* CSS Pertandingan */
    .label-cabor {
        border-radius: 20px;
        padding: 5px 15px;
        line-height: 26px;
        font-size: 12px;
    }
    .label-red{
        background: var(--c-utamasecond);
        color: #FFFFFF;
    }
    .label-red2 {
        background: #FFE4E4;
        color: #CE0A00;
    }
    .label-green{
        background: #B7EDA4;
        color: #2D871F;
    }

    .card-jadwal-diklat {
        background: #FFFFFF;
        box-shadow: 0px 0px 40px rgba(169, 169, 169, 0.27);
        border: 0;
        border-radius: 20px;
        padding: 20px 20px;
        margin-bottom: 2em;
    }
    .card-jadwal-diklat h4{
        font-family: var(--f-semibold);
        font-size: 20px;
        line-height: 24px;
        text-transform: uppercase;
        color: #000000;
    }
    .ket-pertandingan{
        font-size: 13px;
        line-height: 30px;
        color: #3E3E3E;
    }
    .ket-pertandingan span {
        display: inline-block;
        margin-right: 12px;
    }
    .ket-pertandingan i {
        color: var(--c-utama);
    }
    .card-jadwal-diklat hr {
        /* background-color: #DEDEDE; */
    }
    .card-jadwal-diklat .card-body {
        padding: 0;
    }
    .card-jadwal-diklat .card-body h5 {
        font-family: 'Montserrat Bold';
        font-size: 14px;
        line-height: 20px;
        color: #000000;
        margin-bottom: 0.5em;
    }
    .card-jadwal-diklat .card-body .lokasi {
        font-size: 12px;
        line-height: 18px;
        color: #3E3E3E;
    }

    @media (max-width: 768px) {
        .card-jadwal-diklat h4 {
            font-size: 13px;
            line-height: 16px;
        }
        .ket-pertandingan {
            margin-bottom: 0.7em;
        }
        .card-jadwal-diklat .card-body .lokasi {
            font-size: 10px;
        }
        .card-jadwal-diklat .card-body h5 {
            font-size: 12px;
            margin-bottom: 0;
        }
    }
/* CSS Pertandingan */

/* CSS CABOR 1 */
    .card-cabor {
        border: 0;
        box-shadow: 0px 0px 30px 0px #EDEDED;
        border-radius: 5px;
    }
    .card-cabor .card-inner-cabor {
    position: relative;
    width: 200px;
    width: 100%;
    height: 140px;
    background: var(--c-white);
    overflow: hidden;
  }
  .card-cabor .card-inner-cabor:before {
    /* content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff3d0;
    clip-path: circle(150px at 80% 20%);
    clip-path: circle(40px at 50% 50%);
    transition: 0.5s ease-in-out; */
  }
  .card-cabor:hover .card-inner-cabor:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--c-utama);
    transition: 0.5s ease-in-out;
    clip-path: circle(300px at 80% -20%);
  }
  .card-cabor .card-inner-cabor:after {
    content: "CABOR";
    position: absolute;
    top: 30%;
    left: -9%;
    font-size: 5em;
    font-weight: 800;
    font-style: italic;
    color: rgb(237 56 52 / 10%);
    color: rgba(255, 255, 255, 0.04);
  }
  .card-cabor .card-inner-cabor .imgBx {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    z-index: 8;
    width: 100%;
    height: 100%;
    transition: 0.5s;
  }
  .card-cabor:hover .card-inner-cabor .imgBx {
    top: 0%;
    transform: translateY(-5%);
    /* bug  */
  }
  .card-cabor .card-inner-cabor .imgBx img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 270px;
    width: auto;
    height: 96px;
    object-fit: contain;
  }
  .card-cabor:hover .card-inner-cabor .imgBx img {
    transform: translate(-50%, -50%) rotate(10deg);
  }
  .card-cabor .card-footer {
    font-family: var(--f-bold);
    background: var(--c-white);
    text-align: center;
    text-transform: uppercase;
    color: var(--c-body);
    font-size: 14px;
    padding: 0px 7px 15px;
    border: 0;
  }
  .card-cabor:hover .card-footer {
    background: var(--c-utama);
    color: var(--c-white);
  }
  @media (max-width: 768px) {
    .card-cabor .card-inner-cabor {
      height: 115px;
    }
    .card-cabor .card-inner-cabor .imgBx img {
      height: 60px;
      width: 60px;
      object-fit: contain;
    }
    .card-cabor .card-footer {
      font-size: 13px;
    }

    .thumb-kategori .card-cabor .card-inner-cabor{
      height: 57px;
      height: 40px;
    }
    .thumb-kategori .card-cabor .card-inner-cabor:before {
      clip-path: circle(20px at 50% 50%);
    }
    .thumb-kategori .card-cabor .card-inner-cabor .imgBx img {
      height: 40px;
      width: 40px;
      object-fit: contain;
    }
    .thumb-kategori .card-cabor .card-footer{
      font-size: 8px;
      padding: 5px;
      font-size: 7px;
      padding: 4px 0;
      font-family: var(--f-medium);
    }
  }
/* CSS CABOR */
/* CSS Detail Cabor */
    .info-cabor {
        font-size: 14px;
        line-height: 30px;
        }
    .info-cabor .card-img-cabor{
        box-shadow: 0px 0px 30px 0px rgba(237, 237, 237, 1);
        padding: 30px 15px;
        border: 0;
    }
    .info-cabor .card-img-cabor img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        object-position: center;
        margin: 0 auto;
    }
    .about .nav-link.active {
        color: var(--c-utama);
        background: none;
        border-bottom: 3px solid var(--c-utama);
    }
/* CSS Detail Cabor */
/* CSS Team */
    .team .team-member {
        width: 100%;
    }
    .team .team-member .member-img {
        background-color: #fff;
        border: 1px solid rgb(218, 221, 224, .5);
    }
    .team .team-member .member-img img {
        width: 100%;
        height: 180px;
        object-fit: contain;
        margin: 0 auto;
        object-position: center;
    }
    .team .team-member .member-info {
        padding: 10px 8px;
        margin: -30px 15px 0 15px;
    }
    .team .team-member .member-info h4 {
        font-family: var(--f-semibold);
        font-size: 14px;
    }
    .team .team-member .member-info span {
        font-size: 12px;
        color: var(--c-gray);
        font-family: var(--f-light);
    }
    @media (max-width: 768px) { 
        .team .team-member .member-info {
            padding: 15px 10px;
            margin: -30px 15px 0 15px;
        }
        .team .team-member .member-info h4 {
            font-size: 14px;
        }
        .team .team-member .member-info span {
            font-size: 12px;
        }
        .team .team-member .member-img img {
            height: 150px;
        }
    }
/* CSS Team */
/* CSS JADWAL PERTANGINGAN */
  .card-jadwal-tanding {
    box-shadow: 0px 0px 40px 0px #A9A9A945;
    border: 0;
  }
  .card-jadwal-tanding .card-header {
    border-color: #DEDEDE;
    background-color: transparent;
    padding: 0;
    margin: 30px 30px 0;
    padding-bottom: 12px;
  }
  .card-jadwal-tanding .card-header h2 {
    font-family: var(--f-bold);
    color: var(--c-body);
    font-size: 20px;
    line-height: 30px;
  }
  .card-jadwal-tanding .card-header .meta-loc {
    font-family: var(--f-light);
    color: var(--c-gray);
    font-size: 13px;    
    line-height: 24px;
  }
  .card-jadwal-tanding .card-header .meta-loc i{
    color: #CE0A00;
  }
  .card-jadwal-tanding .card-body {
    padding: 20px 30px;
    font-size: 12px;
  }
  .card-jadwal-tanding .card-body h5 {
    font-family: var(--f-bold);
    font-size: 13px;
  }
  .card-jadwal-tanding .card-body li {
    line-height: 24px;
    list-style-type: none;
  }
  .card-jadwal-tanding .card-body li::marker {
    content: initial;
    list-style-type:none;
  }
  @media (max-width: 768px) { 
    .card-jadwal-tanding .card-header h2 {
      font-size: 16px;
      line-height: 20px;
    }
  }
/* CSS JADWAL PERTANGINGAN */
/* CSS Berita */
    .blog.list-berita .posts-list .meta-top i {
        color: var(--c-gray);
    }
    .blog.list-berita .posts-list .title {
        margin-top: 12px;
    }
    .blog.list-berita .posts-list .title a{
        color: var(--c-body);
        font-family: var(--f-bold);
        display: block;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 20px;
        line-height: 28px;
        min-height: 56px;
        letter-spacing: .01rem;
        font-weight: normal;
        text-transform: capitalize;
    }
    .blog.list-berita .content {
        margin-bottom: 10px;
    }
    .blog.list-berita .content p{
        display: block;
        display: -webkit-box;
        max-width: 100%;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        min-height: 72px;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        letter-spacing: 0em;
        text-align: left;
        color: var(--c-gray);
    }
    .blog.list-berita hr {
        margin-top: 2rem;
        border-top: 1px solid var(--c-gray);
    }
    .blog .blog-pagination li.active, .blog .blog-pagination li:hover {
        background: var(--c-utama);
    }
    @media (max-width: 768px) { 
        .blog.list-berita .posts-list .title a{
            font-size: 16px;
        }
        .blog.list-berita .content {
            margin-bottom: 5px;
            margin-top: 7px;
        }
        .blog.list-berita .content p {
            font-size: 13px;
        }
    }
/* CSS Berita */
/* CSS Detail */
    .blog.detail-blog .blog-details .post-img img{
        width: 100%;
        height: 350px;
        object-fit: contain;
        margin-bottom: 1em;
    }
    .blog.detail-blog .blog-details .meta-top i {
        color: var(--c-gray);
    }
    .blog.detail-blog .blog-details .title{
        color: var(--c-body);
        font-family: var(--f-bold);
        font-size: 20px;
        line-height: 28px;
        letter-spacing: .01rem;
        font-weight: normal;
        text-transform: capitalize;
    }
    .blog.detail-blog .blog-details .content {
        margin-top: 20px;
        font-size: 14px;
    }
    @media (max-width: 768px) { 
        .blog.detail-blog .blog-details .content img {
            height: 300px;
        }
        .blog.detail-blog .blog-details .title{
            font-size: 16px;
        }
        .blog.detail-blog .blog-details .content {
            font-size: 13px;
        }
        .blog .comments .comment {
            font-size: 12px;
        }
    }
/* CSS Detail */
/* CSS hASIL Kompetisi */
    .card-hasil-kompetisi {
        box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
        border: 0;
    }
    .card-hasil-kompetisi .card-header {
        border-color: #DEDEDE;
        background-color: transparent;
        padding: 0;
        margin: 30px 15px 0;
        padding-bottom: 12px;
    }
    .card-hasil-kompetisi .card-header h2 {
        font-family: var(--f-bold);
        color: var(--c-body);
        font-size: 20px;
        line-height: 30px;
    }
    .card-hasil-kompetisi .card-header .meta-loc {
        font-family: var(--f-light);
        color: var(--c-gray);
        font-size: 13px;    
        line-height: 24px;
    }
    .card-hasil-kompetisi .card-header .meta-loc i{
        color: #CE0A00;
    }
    .card-hasil-kompetisi .card-body {
        padding: 20px 15px;
        font-size: 12px;
    }
    .card-hasil-kompetisi .card-body h5 {
        font-family: var(--f-bold);
        font-size: 12px;
    }
    .card-hasil-kompetisi .card-body i {
        font-size: 24px;
        display: inline-block;
        margin-bottom: 6px;
    }
    .card-hasil-kompetisi .card-body .skor-hasil {
        font-family: var(--f-bold);
        font-size: 25px;
        margin-left: -9px;
        margin-right: -9px;
        letter-spacing: 6px;
    }
    .card-hasil-kompetisi .card-body .flag-hasil {
        font-family: var(--f-medium);
        font-size: 10px;
        padding: 5px 22px;
        border-radius: 10px;
        display: inline-block;
        margin-top: 4px;
    }
    .card-hasil-kompetisi .card-body .flag-hasil.hasil-menang {
        color: #2D871F;
        background-color: #D4FFBF;
    }
    .card-hasil-kompetisi .card-body .flag-hasil.hasil-kalah {
        color: #CE0A00;
        background-color: #FFE4E4;
    }
    @media (max-width: 768px) { 
        .card-hasil-kompetisi .card-header h2 {
            font-size: 16px;
            line-height: 20px;
        }
    }
/* CSS hASIL Kompetisi */
/* CSS Home */
    .homepage .blog .posts-list article {
        /* box-shadow: 0 4px 16px #ededed; */
        background-color: var(--c-white);
    }
    .homepage .section-news .blog .posts-list article {
        padding: 20px;
        padding-bottom: 30px;
        box-shadow: 0 4px 16px #ededed;
        background-color: var(--c-white);
    }
    .homepage .section-news .blog .posts-list .post-img {
        margin: 0;
    }
    .homepage .section-news .blog .posts-list .post-img img{
        border-radius: 5px;
    }
    .bg-gradasi {
        background-image: url('../images/bg-gradasi.jpg');
        background-size: cover;
        background-position: bottom;
    }
    .section-cabor {
        background-image: url('../images/bg-cabor.png');
        background-size: cover;
        background-position: top;
        padding-bottom: 110px;
    }
    .section-cabor .card-cabor {
        box-shadow: none;
    }
    .section-jadwal-kompetisi{
        background: linear-gradient(180deg, #EFDADA -21.31%, #FFFFFF 85.96%);
        background-image: url('../images/bg-kompetisi.png');
        background-size: 100% auto;
        background-position: top;
        background-repeat: no-repeat;
        padding-top: 110px;
    }

    .section-jadwal-pertandingan .margin-swiper {
        margin-left: -30px;
        margin-right: -30px;
        margin-top: -20px;
        margin-bottom: -30px;
    }
    .swiper-slide .card-jadwal-tanding {
        margin: 30px;
        box-shadow: 0 4px 16px #ededed;
    }

    .section-hasil-kompetisi .margin-swiper {
        margin-left: -30px;
        margin-right: -30px;
        margin-top: -20px;
        margin-bottom: -30px;
    }
    .swiper-slide .d-flex.flex-column {
        margin: 30px;
        box-shadow: 0 4px 16px #ededed;
    }
    @media (max-width: 768px) { 
        .section-jadwal-kompetisi {
            padding-top: 30px;
        }
    }
/* CSS Home */

/* CSS Counter */
    .card-counter-section {
        background-color: var(--c-utama);
        border-radius: 5px;
        text-align: center;
        padding: 15px;
        border: 0;
        color: var(--c-white);
        font-size: 14px;
    }
    .card-counter-section span.counter {
        font-family: var(--f-bold);
        font-size: 24px;
        line-height: 30px;
        color: var(--c-white);
        display: block;
        margin-bottom: .4em;
    }
    @media (max-width: 768px) { 
        .card-counter-section {
            font-size: 13px;
            padding: 10px;
        }
        .card-counter-section span.counter {
            font-size: 20px;
        }
    }
/* CSS Counter */

/* CSS ID CARD */

.single_advisor_profile {
    position: relative;
    margin-bottom: 50px;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    z-index: 1;
    border-radius: 15px;
    -webkit-box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
    box-shadow: 0 0.25rem 1rem 0 rgba(47, 91, 234, 0.125);
}
.single_advisor_profile .advisor_thumb {
    position: relative;
    z-index: 1;
    border-radius: 15px 15px 0 0;
    margin: 0 auto;
    padding: 30px 30px 0 30px;
    background-color: var(--c-utama);
    overflow: hidden;
}
.single_advisor_profile .advisor_thumb::after {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: absolute;
    width: 150%;
    height: 80px;
    bottom: -45px;
    left: -25%;
    content: "";
    background-color: #ffffff;
    -webkit-transform: rotate(-15deg);
    transform: rotate(-15deg);
}
@media only screen and (max-width: 575px) {
    .single_advisor_profile .advisor_thumb {
        height: 400px;
        padding-right: 40px;
    }
    .single_advisor_profile .advisor_thumb::after {
        height: 140px;
        bottom: -90px;
    }
}
.single_advisor_profile .advisor_thumb .social-info {
    position: absolute;
    z-index: 1;
    width: 100%;
    bottom: 0;
    right: 30px;
    text-align: right;
}
.single_advisor_profile .advisor_thumb .social-info a {
    font-size: 14px;
    color: #020710;
    padding: 0 5px;
}
.single_advisor_profile .advisor_thumb .social-info a:hover,
.single_advisor_profile .advisor_thumb .social-info a:focus {
    color: #3f43fd;
}
.single_advisor_profile .advisor_thumb .social-info a:last-child {
    padding-right: 0;
}
.single_advisor_profile .single_advisor_details_info {
    position: relative;
    z-index: 1;
    padding: 30px;
    text-align: right;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    border-radius: 0 0 15px 15px;
    background-color: #ffffff;
}
.single_advisor_profile .single_advisor_details_info::after {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    position: absolute;
    z-index: 1;
    width: 50px;
    height: 3px;
    background-color: #3f43fd;
    content: "";
    top: 12px;
    right: 30px;
    border-bottom: 4px solid transparent;
    border-image: url(../images/header-border.svg) 30 round;
}
.single_advisor_profile .single_advisor_details_info h5 { 
    text-transform: uppercase;
    font-family: var(--f-semibold);
    font-size: 12px;
}
.single_advisor_profile .single_advisor_details_info h6 {
    margin-bottom: 0.25rem;
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    font-size: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single_advisor_profile .single_advisor_details_info h6 {
        font-size: 14px;
    }
}
.single_advisor_profile .single_advisor_details_info p {
    -webkit-transition-duration: 500ms;
    transition-duration: 500ms;
    margin-bottom: 0;
    font-size: 14px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .single_advisor_profile .single_advisor_details_info p {
        font-size: 12px;
    }
}
@media only screen and (max-width: 575px) {
    .single_advisor_profile .single_advisor_details_info {
        background-color: transparent;
        margin-top: -30px;
    }
}
.single_advisor_profile:hover .advisor_thumb::after,
.single_advisor_profile:focus .advisor_thumb::after {
    background-color: var(--c-utama);
}
.single_advisor_profile:hover .advisor_thumb .social-info a,
.single_advisor_profile:focus .advisor_thumb .social-info a {
    color: #ffffff;
}
.single_advisor_profile:hover .advisor_thumb .social-info a:hover,
.single_advisor_profile:hover .advisor_thumb .social-info a:focus,
.single_advisor_profile:focus .advisor_thumb .social-info a:hover,
.single_advisor_profile:focus .advisor_thumb .social-info a:focus {
    color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info,
.single_advisor_profile:focus .single_advisor_details_info {
    background-color: var(--c-utama);
}
.single_advisor_profile:hover .single_advisor_details_info::after,
.single_advisor_profile:focus .single_advisor_details_info::after {
    background-color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info h6,
.single_advisor_profile:focus .single_advisor_details_info h6 {
    color: #ffffff;
}
.single_advisor_profile:hover .single_advisor_details_info p,
.single_advisor_profile:focus .single_advisor_details_info p {
    color: #ffffff;
}