/*
Theme Name: Compro Custom Theme
Author: Rajawali Website
Author URI: 
Description: Tema custom.
Version: 2.0
*/

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

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.nav-list li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-list li a:hover {
    color: #ccc;
}

.custom-logo-link img {
    max-height: 50px; 
    width: auto;
}

.content-body img {
    max-width: 100%;
    height: auto;
}
.filter-force-red {
    filter: brightness(0) saturate(100%) invert(26%) sepia(96%) saturate(7460%) hue-rotate(356deg) brightness(91%) contrast(116%);
    transition: all 0.3s ease;
}

.group:hover .filter-force-red {
    filter: brightness(0) invert(1);
}

.content-body {
        font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        color: #374151; 
        font-size: 1.125rem; 
        line-height: 1.8;    
    }

    .content-body p { 
        margin-bottom: 2rem;
    }

    .content-body h2 { 
        font-size: 1.875rem; 
        font-weight: 700; 
        color: #111827;
        margin-top: 3rem; 
        margin-bottom: 1.5rem; 
        line-height: 1.3;
    }
    
    .content-body h3 { 
        font-size: 1.5rem; 
        font-weight: 600; 
        color: #1f2937; 
        margin-top: 2.5rem; 
        margin-bottom: 1rem; 
    }

        /* Base ripple button */
    .ripple-btn {
        position: relative !important;
        overflow: hidden !important;
    }

    .ripple-effect {
        position: absolute;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transform: scale(0);
        animation: ripple-animation 0.6s ease-out;
        pointer-events: none;
    }

	.wpcf7-submit.ripple-btn {
		position: relative !important;
		overflow: hidden !important;
	}

    @keyframes ripple-animation {
        to {
            transform: scale(4);
            opacity: 0;
        }
    }

    /* Styling List (Bullet Points) */
    .content-body ul { 
        list-style-type: disc; 
        padding-left: 1.5rem; 
        margin-bottom: 2rem; 
    }
    
    .content-body ol { 
        list-style-type: decimal; 
        padding-left: 1.5rem; 
        margin-bottom: 2rem; 
    }
    
    .content-body li {
        margin-bottom: 0.5rem; 
    }

    /* Styling Quote */
    .content-body blockquote { 
        border-left: 4px solid #dc2626; 
        padding-left: 1.5rem; 
        font-style: italic; 
        font-size: 1.25rem;
        color: #4b5563; 
        margin: 2rem 0; 
        background: #f9fafb;
        padding: 1.5rem;
        border-radius: 0 8px 8px 0;
    }

    /* Styling Link */
    .content-body a { 
        color: #dc2626; 
        text-decoration: underline; 
        text-underline-offset: 4px;
    }
    .content-body a:hover { 
        color: #b91c1c; 
    }

/* Reset Layout Container */
.blog-pagination nav {
    width: 100%;
    display: flex;
    justify-content: center;
}

.blog-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
}

.blog-pagination .page-numbers {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 15px;
    background-color: white !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important; 
    color: #374151 !important;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s;
}

.blog-pagination .page-numbers:hover:not(.current) {
    background-color: #f3f4f6 !important;
    color: #dc2626 !important;
    border-color: #d1d5db !important;
    transform: translateY(-2px);
}

.blog-pagination .page-numbers.current {
    background-color: #dc2626 !important;
    color: white !important;              
    border-color: #dc2626 !important;
}

.blog-pagination .dots {
    border: none !important;
    background: transparent !important;
}

.footer-widget ul {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.footer-widget li {
    margin-bottom: 10px; 
}

.footer-widget a {
    text-decoration: none;
    color: white; 
}

#service-slider {
    padding-bottom: 3rem; 
}

#service-slider .splide__pagination__page {
    background: #cbd5e1 !important; 
    opacity: 1 !important;
    height: 10px !important;
    width: 10px !important;
    margin: 0 6px !important;
    transition: all 0.3s ease;
}

#service-slider .splide__pagination__page.is-active {
    background: #eab308 !important; 
    transform: scale(1.4);
}

#service-slider .splide__pagination {
    bottom: -2.5rem !important; 
}
#hero-slider .splide__pagination__page {
    background: rgba(255, 255, 255, 0.5) !important; 
    height: 10px !important;
    width: 10px !important;
    margin: 0 6px !important;
}


#hero-slider .splide__pagination__page.is-active {
    background: #eab308 !important; 
    transform: scale(1.4);
}

#hero-slider .splide__pagination {
    bottom: 2rem !important; 
}

#hero-bg-slider, 
#hero-bg-slider .splide__track,
#hero-bg-slider .splide__list, 
#hero-bg-slider .splide__slide {
    height: 100%;
}

.content-body {
    font-family: 'Open Sans', sans-serif;
    color: #374151; 
    font-size: 1.125rem; 
    line-height: 1.8;
}

.content-body p {
    margin-bottom: 2rem;
}

.content-body h2 {
    font-family: 'Oswald', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: #1e3a8a;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #facc15; 
}

.content-body h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e3a8a;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.content-body ul, .content-body ol {
    margin-bottom: 2rem;
    padding-left: 1.5rem;
}

.content-body ul { list-style-type: disc; }
.content-body ol { list-style-type: decimal; }

.content-body li { margin-bottom: 0.5rem; }

.content-body blockquote {
    border-left: 4px solid #eab308; 
    padding: 1.5rem;
    background: #eff6ff; 
    font-style: italic;
    color: #1e3a8a;
    margin: 2rem 0;
    border-radius: 0 10px 10px 0;
}

.content-body a {
    color: #1e3a8a;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #eab308;
}
.content-body a:hover {
    color: #eab308;
}

/* --- Styling List di Halaman Services --- */
.service-content-list ul {
    list-style-type: disc; /* Munculin titik bulat */
    padding-left: 1.2rem;  /* Kasih jarak kiri */
    margin-bottom: 1rem;
}

.service-content-list li {
    margin-bottom: 0.5rem; /* Jarak antar baris */
    line-height: 1.6;
}

/* Biar teks paragraf biasa gak nempel banget */
.service-content-list p {
    margin-bottom: 0.8rem;
}

.inverted {
	clip-path: path("M0,0H30A10,10 0,0,1 40,10V20A10,10 0,0,0 50,30H90A10,10 0,0,1 100,40V100A0,0 0,0,1 100,100H0A0,0 0,0,1 0,100V0A0,0 0,0,1 0,0Z");
	width: 100px;
	height: 100px;
	background-color: #513D34;
	aspect-ratio: 1 / 1;
}

.inverted-card {
    -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20350%22%3E%3Cpath%20d%3D%22M24%2C0H296A24%2C24%200%2C0%2C1%20320%2C24V290A10%2C10%200%2C0%2C1%20310%2C300H270A10%2C10%200%2C0%2C0%20260%2C310V340A10%2C10%200%2C0%2C1%20250%2C350H24A24%2C24%200%2C0%2C1%200%2C326V24A24%2C24%200%2C0%2C1%2024%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20350%22%3E%3Cpath%20d%3D%22M24%2C0H296A24%2C24%200%2C0%2C1%20320%2C24V290A10%2C10%200%2C0%2C1%20310%2C300H270A10%2C10%200%2C0%2C0%20260%2C310V340A10%2C10%200%2C0%2C1%20250%2C350H24A24%2C24%200%2C0%2C1%200%2C326V24A24%2C24%200%2C0%2C1%2024%2C0Z%22%20fill%3D%22%23fff%22%20%2F%3E%3C%2Fsvg%3E') no-repeat center / contain;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

@media (max-width: 768px) {
    .inverted-card {
        aspect-ratio: 32 / 35;
    }
}