:root {
    /* --primary: #FF3460; */
    --primary: #ff0000;
    --secondaery: #ffffff;
}

body {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
}

p {
    font-weight: 300;
    letter-spacing: .012rem;
    line-height: 24px;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    border: none;
    border: 1px solid var(--primary);
    padding: .6rem 2rem;
    font-size: .85rem;
    /* border-radius: 3px; */
}

.btn-primary:hover {
    background-color: var(--primary);
    color: var(--primary);
    border: 1px solid var(--primary);
    padding: .6rem 2rem;
    font-size: .85rem;
    border-radius: 3px;
    background-color: transparent;
}

.btn-secondary {
    /* background-color: var(--primary); */
    background-color: var(--secondaery);
    color: var(--primary);
    border: 1px solid var(--primary);
    /* border-radius: 20px; */
    padding: .75rem 2rem;
    font-size: .85rem;
    border-radius: 3px;
}

.btn-secondary:hover {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
    /* border-radius: 20px; */
    padding: .75rem 2rem;
    font-size: .85rem;
    border-radius: 3px;
}

.bg-danger {
    background-color: var(--primary) !important;
    color: var(--secondaery);
}

.btn-outline {
    background-color: transparent;
    border: 1px solid #1A242D;
    /* border-radius: 20px; */
    padding: .5rem 2rem !important;
    transition: all;
}

.btn-outline:hover {
    border: 1px solid #1A242D;
    opacity: 0.5;
}

.bg-fill {
    background-color: #F5F7F9 !important;
}

.border-black{
    border-color: #1A242D;
}


input {
    border: none;
    outline: none;
}

.card-body-image {
    background-color: #F5F7F9;
    transition: all .2s ease;
}

/* .card:hover img {
    transform: scale(1.2); 
    transition: transform 0.3s ease;
    cursor: pointer;
  } */

ul li {
    list-style: none;
}

.ck-editor__editable_inline {
    min-height: 200px;
}

.btn-outline-primary {
    border-color: var(--primary);
    color: var(--primary);
}

.btn-outline-primary:hover {
    background-color: var(--primary);
    border-color: var(--primary);
}

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

#carouselExampleIndicators .carousel-control-prev .carousel-control-prev-icon {
    background-color: transparent;
    border-radius: 3px;
    padding-top: 50px;
}

.carousel-control-prev .carousel-control-prev-icon {
    background-color: black;
    border-radius: 3px;
    padding-top: 50px;
}

#carouselExampleIndicators .carousel-control-next .carousel-control-next-icon {
    background-color: transparent;
    border-radius: 3px;
    padding-top: 50px;
}

.carousel-control-next .carousel-control-next-icon {
    background-color: black;
    border-radius: 3px;
    padding-top: 50px;
}

.text-hover {
    transition: all .2s ease-in;
}
.text-hover:hover {
    opacity: 0.5;
}

.image-zoom-hover {
    transition: transform 0.3s;  /* Animasi transformasi selama 0.3 detik */
}

.image-zoom-hover:hover {
    transform: scale(1.1);  /* Skala gambar saat dihover */
}

.hover-primary{
    transition: all .2s ease-in;
}
.hover-primary:hover {
    background-color: var(--primary) !important;
    color: white !important;
    opacity: 0.7;
}

/* CSS SKELETON */
.skeleton-effect {
    position: relative;
    overflow: hidden;
}

.skeleton-effect::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #f0f0f0, transparent);
    animation: loading 1.5s infinite;
}

.hover-opacity:hover {
    opacity: .5;
}

.silhouette {
    filter: brightness(0) invert(1);
}

.cursor-pointer {
    cursor: pointer;
}

/* styles.css atau file CSS Anda */

.pickr .pcr-button {
    width: 40px !important;
    height: 40px !important;
    border-radius: 40px !important;
}

.pickr .pcr-button::before,
.pickr .pcr-button::after {
    border-radius: 40px !important; 
}

.bg-vh {
    height: 100vh;
}

@keyframes loading {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}



@media (min-width: 768px) {
    .bg-vh {
        height: 95vh;
    }
  }
  
  
@media only screen and (max-width: 767px) {
    .bg-vh {
        height: 95vh;
    }
    
    .image-zoom-hover {
        /* Gaya yang ingin Anda terapkan pada mode seluler di sini */
        height: 100px !important;
    }
}