/*
 Theme Name:   HW-Buddy
 Theme URI:    https://hw-buddy.de/
 Description:  Custom WP Theme based on Kadence (Kadence Child)
 Author:       Homework-Buddy
 Author URI:   https://hw-buddy.de
 Template:     kadence
 Version:      1.0.0
 Tags:         customizable, modern, responsive-layout, gutenberg, header builder, footer builder
 Text Domain:  hwbuddy
*/

/* Theme customization starts here
-------------------------------------------------------------- */

.entry.single-entry,
.kadence-posts-list .entry-list-item article.entry {
    border-radius: 15px;
}

@media screen and (max-width: 1023px) {
    h1.page-title,
    .entry-hero h1 {
        font-size: 2.5em !important;
    }
}

@media screen and (min-width: 1024px) and (max-width: 1190px) {

    .wp-block-kadence-header-section .kb-button,
    .wp-block-kadence-header-section .menu > .menu-item > .kb-link-wrap > .kb-nav-link-content {
        font-size: 16px;
    }

    .wp-block-kadence-header-section .wp-block-site-logo img {
        width: 230px;
    }

}

/* Animation */
/* ============================================================
   animate-reveal.css
   Utility classes for entrance/reveal animations
   Usage: tambahkan class ke elemen, lalu tambahkan .is-visible
          untuk trigger animasi (bisa via JS IntersectionObserver)
   ============================================================ */

/* ------------------------------------------------------------
   BASE: semua elemen dengan class animate-* dimulai invisible
   ------------------------------------------------------------ */
[class*="animate-"] {
    opacity: 0;
    transition-duration: 0.5s;
    transition-timing-function: ease-out;
    transition-property: opacity, transform;
}

/* Saat .is-visible ditambahkan (via JS), elemen muncul */
[class*="animate-"].is-visible {
    opacity: 1;
    transform: translate(0, 0) !important;
}

/* ------------------------------------------------------------
   FADE only
   ------------------------------------------------------------ */
.animate-fade {
    opacity: 0;
}

/* ------------------------------------------------------------
   SLIDE dari bawah ke atas
   ------------------------------------------------------------ */
.animate-slide-up {
    transform: translateY(40px);
}

.animate-slide-up-sm {
    transform: translateY(20px);
}

.animate-slide-up-lg {
    transform: translateY(80px);
}

/* ------------------------------------------------------------
   SLIDE dari atas ke bawah
   ------------------------------------------------------------ */
.animate-slide-down {
    transform: translateY(-40px);
}

.animate-slide-down-sm {
    transform: translateY(-20px);
}

.animate-slide-down-lg {
    transform: translateY(-80px);
}

/* ------------------------------------------------------------
   SLIDE dari kiri ke kanan
   ------------------------------------------------------------ */
.animate-slide-right {
    transform: translateX(-40px);
}

.animate-slide-right-sm {
    transform: translateX(-20px);
}

.animate-slide-right-lg {
    transform: translateX(-80px);
}

/* ------------------------------------------------------------
   SLIDE dari kanan ke kiri
   ------------------------------------------------------------ */
.animate-slide-left {
    transform: translateX(40px);
}

.animate-slide-left-sm {
    transform: translateX(20px);
}

.animate-slide-left-lg {
    transform: translateX(80px);
}

/* ------------------------------------------------------------
   FADE + SLIDE kombinasi
   ------------------------------------------------------------ */
.animate-fade-up {
    transform: translateY(40px);
}

.animate-fade-down {
    transform: translateY(-40px);
}

.animate-fade-right {
    transform: translateX(-40px);
}

.animate-fade-left {
    transform: translateX(40px);
}

/* ------------------------------------------------------------
   ZOOM
   ------------------------------------------------------------ */
.animate-zoom-in {
    transform: scale(0.85);
}

.animate-zoom-out {
    transform: scale(1.15);
}

/* ------------------------------------------------------------
   DURATION modifiers
   ------------------------------------------------------------ */
.duration-300 {
    transition-duration: 0.3s;
}

.duration-500 {
    transition-duration: 0.5s;
}

/* default */
.duration-700 {
    transition-duration: 0.7s;
}

.duration-1000 {
    transition-duration: 1s;
}

.duration-1200 {
    transition-duration: 1.2s;
}

/* ------------------------------------------------------------
   DELAY modifiers (untuk staggered animation)
   ------------------------------------------------------------ */
.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-500 {
    transition-delay: 0.5s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-700 {
    transition-delay: 0.7s;
}

.delay-800 {
    transition-delay: 0.8s;
}

.delay-900 {
    transition-delay: 0.9s;
}

.delay-1000 {
    transition-delay: 1s;
}

/* ------------------------------------------------------------
   EASING modifiers
   ------------------------------------------------------------ */
.ease-out {
    transition-timing-function: ease-out;
}

/* default */
.ease-in {
    transition-timing-function: ease-in;
}

.ease-in-out {
    transition-timing-function: ease-in-out;
}

.ease-linear {
    transition-timing-function: linear;
}

/* ease-out variants yang lebih expressive */
.ease-smooth {
    transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.ease-snappy {
    transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
}

.ease-gentle {
    transition-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
}

/* ------------------------------------------------------------
   REPEAT / LOOP (untuk animasi yang terus berputar)
   Gunakan dengan @keyframes animation, bukan transition
   ------------------------------------------------------------ */
@keyframes pulse-opacity {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.4;
    }
}

@keyframes float-up-down {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.animate-pulse {
    animation: pulse-opacity 2s ease-in-out infinite;
    opacity: 1; /* override base */
}

.animate-float {
    animation: float-up-down 3s ease-in-out infinite;
    opacity: 1; /* override base */
}

/* Utility */
.rotate-5 {
    rotate: 5deg;
    display: inline-block;
}

.rotate--5 {
    rotate: -5deg;
    display: inline-block;
}

.rotate-10 {
    rotate: 10deg;
    display: inline-block;
}

.rotate--10 {
    rotate: -10deg;
    display: inline-block;
}

.rotate-15 {
    rotate: 15deg;
    display: inline-block;
}

.rotate--15 {
    rotate: -15deg;
    display: inline-block;
}

.rotate-20 {
    rotate: 20deg;
    display: inline-block;
}

.rotate--20 {
    rotate: -20deg;
    display: inline-block;
}

.rotate-25 {
    rotate: 25deg;
    display: inline-block;
}

.rotate--25 {
    rotate: -25deg;
    display: inline-block;
}

.rotate-30 {
    rotate: 30deg;
    display: inline-block;
}

.rotate--30 {
    rotate: -30deg;
    display: inline-block;
}

.rotate-35 {
    rotate: 35deg;
    display: inline-block;
}

.rotate--35 {
    rotate: -35deg;
    display: inline-block;
}

.rotate-40 {
    rotate: 40deg;
    display: inline-block;
}

.rotate--40 {
    rotate: -40deg;
    display: inline-block;
}

.rotate-45 {
    rotate: 45deg;
    display: inline-block;
}

.rotate--45 {
    rotate: -45deg;
    display: inline-block;
}

.rotate-50 {
    rotate: 50deg;
    display: inline-block;
}

.rotate--50 {
    rotate: -50deg;
    display: inline-block;
}

.rotate-55 {
    rotate: 55deg;
    display: inline-block;
}

.rotate--55 {
    rotate: -55deg;
    display: inline-block;
}

.rotate-60 {
    rotate: 60deg;
    display: inline-block;
}

.rotate--60 {
    rotate: -60deg;
    display: inline-block;
}

.rotate-65 {
    rotate: 65deg;
    display: inline-block;
}

.rotate--65 {
    rotate: -65deg;
    display: inline-block;
}

.rotate-70 {
    rotate: 70deg;
    display: inline-block;
}

.rotate--70 {
    rotate: -70deg;
    display: inline-block;
}

.rotate-75 {
    rotate: 75deg;
    display: inline-block;
}

.rotate--75 {
    rotate: -75deg;
    display: inline-block;
}

.rotate-80 {
    rotate: 80deg;
    display: inline-block;
}

.rotate--80 {
    rotate: -80deg;
    display: inline-block;
}

.rotate-85 {
    rotate: 85deg;
    display: inline-block;
}

.rotate--85 {
    rotate: -85deg;
    display: inline-block;
}

.rotate-90 {
    rotate: 90deg;
    display: inline-block;
}

.rotate--90 {
    rotate: -90deg;
    display: inline-block;
}

.rotate-95 {
    rotate: 95deg;
    display: inline-block;
}

.rotate--95 {
    rotate: -95deg;
    display: inline-block;
}

.rotate-100 {
    rotate: 100deg;
    display: inline-block;
}

.rotate--100 {
    rotate: -100deg;
    display: inline-block;
}

.rotate-105 {
    rotate: 105deg;
    display: inline-block;
}

.rotate--105 {
    rotate: -105deg;
    display: inline-block;
}

.rotate-110 {
    rotate: 110deg;
    display: inline-block;
}

.rotate--110 {
    rotate: -110deg;
    display: inline-block;
}

.rotate-115 {
    rotate: 115deg;
    display: inline-block;
}

.rotate--115 {
    rotate: -115deg;
    display: inline-block;
}

.rotate-120 {
    rotate: 120deg;
    display: inline-block;
}

.rotate--120 {
    rotate: -120deg;
    display: inline-block;
}

.rotate-125 {
    rotate: 125deg;
    display: inline-block;
}

.rotate--125 {
    rotate: -125deg;
    display: inline-block;
}

.rotate-130 {
    rotate: 130deg;
    display: inline-block;
}

.rotate--130 {
    rotate: -130deg;
    display: inline-block;
}

.rotate-135 {
    rotate: 135deg;
    display: inline-block;
}

.rotate--135 {
    rotate: -135deg;
    display: inline-block;
}

.rotate-140 {
    rotate: 140deg;
    display: inline-block;
}

.rotate--140 {
    rotate: -140deg;
    display: inline-block;
}

.rotate-145 {
    rotate: 145deg;
    display: inline-block;
}

.rotate--145 {
    rotate: -145deg;
    display: inline-block;
}

.rotate-150 {
    rotate: 150deg;
    display: inline-block;
}

.rotate--150 {
    rotate: -150deg;
    display: inline-block;
}

.rotate-155 {
    rotate: 155deg;
    display: inline-block;
}

.rotate--155 {
    rotate: -155deg;
    display: inline-block;
}

.rotate-160 {
    rotate: 160deg;
    display: inline-block;
}

.rotate--160 {
    rotate: -160deg;
    display: inline-block;
}

.rotate-165 {
    rotate: 165deg;
    display: inline-block;
}

.rotate--165 {
    rotate: -165deg;
    display: inline-block;
}

.rotate-170 {
    rotate: 170deg;
    display: inline-block;
}

.rotate--170 {
    rotate: -170deg;
    display: inline-block;
}

.rotate-175 {
    rotate: 175deg;
    display: inline-block;
}

.rotate--175 {
    rotate: -175deg;
    display: inline-block;
}

.rotate-180 {
    rotate: 180deg;
    display: inline-block;
}

.rotate--180 {
    rotate: -180deg;
    display: inline-block;
}

.rotate-185 {
    rotate: 185deg;
    display: inline-block;
}

.rotate--185 {
    rotate: -185deg;
    display: inline-block;
}

.rotate-190 {
    rotate: 190deg;
    display: inline-block;
}

.rotate--190 {
    rotate: -190deg;
    display: inline-block;
}

.rotate-195 {
    rotate: 195deg;
    display: inline-block;
}

.rotate--195 {
    rotate: -195deg;
    display: inline-block;
}

.rotate-200 {
    rotate: 200deg;
    display: inline-block;
}

.rotate--200 {
    rotate: -200deg;
    display: inline-block;
}

.rotate-205 {
    rotate: 205deg;
    display: inline-block;
}

.rotate--205 {
    rotate: -205deg;
    display: inline-block;
}

.rotate-210 {
    rotate: 210deg;
    display: inline-block;
}

.rotate--210 {
    rotate: -210deg;
    display: inline-block;
}

.rotate-215 {
    rotate: 215deg;
    display: inline-block;
}

.rotate--215 {
    rotate: -215deg;
    display: inline-block;
}

.rotate-220 {
    rotate: 220deg;
    display: inline-block;
}

.rotate--220 {
    rotate: -220deg;
    display: inline-block;
}

.rotate-225 {
    rotate: 225deg;
    display: inline-block;
}

.rotate--225 {
    rotate: -225deg;
    display: inline-block;
}

.rotate-230 {
    rotate: 230deg;
    display: inline-block;
}

.rotate--230 {
    rotate: -230deg;
    display: inline-block;
}

.rotate-235 {
    rotate: 235deg;
    display: inline-block;
}

.rotate--235 {
    rotate: -235deg;
    display: inline-block;
}

.rotate-240 {
    rotate: 240deg;
    display: inline-block;
}

.rotate--240 {
    rotate: -240deg;
    display: inline-block;
}

.rotate-245 {
    rotate: 245deg;
    display: inline-block;
}

.rotate--245 {
    rotate: -245deg;
    display: inline-block;
}

.rotate-250 {
    rotate: 250deg;
    display: inline-block;
}

.rotate--250 {
    rotate: -250deg;
    display: inline-block;
}

.rotate-255 {
    rotate: 255deg;
    display: inline-block;
}

.rotate--255 {
    rotate: -255deg;
    display: inline-block;
}

.rotate-260 {
    rotate: 260deg;
    display: inline-block;
}

.rotate--260 {
    rotate: -260deg;
    display: inline-block;
}

.rotate-265 {
    rotate: 265deg;
    display: inline-block;
}

.rotate--265 {
    rotate: -265deg;
    display: inline-block;
}

.rotate-270 {
    rotate: 270deg;
    display: inline-block;
}

.rotate--270 {
    rotate: -270deg;
    display: inline-block;
}

.rotate-275 {
    rotate: 275deg;
    display: inline-block;
}

.rotate--275 {
    rotate: -275deg;
    display: inline-block;
}

.rotate-280 {
    rotate: 280deg;
    display: inline-block;
}

.rotate--280 {
    rotate: -280deg;
    display: inline-block;
}

.rotate-285 {
    rotate: 285deg;
    display: inline-block;
}

.rotate--285 {
    rotate: -285deg;
    display: inline-block;
}

.rotate-290 {
    rotate: 290deg;
    display: inline-block;
}

.rotate--290 {
    rotate: -290deg;
    display: inline-block;
}

.rotate-295 {
    rotate: 295deg;
    display: inline-block;
}

.rotate--295 {
    rotate: -295deg;
    display: inline-block;
}

.rotate-300 {
    rotate: 300deg;
    display: inline-block;
}

.rotate--300 {
    rotate: -300deg;
    display: inline-block;
}

.rotate-305 {
    rotate: 305deg;
    display: inline-block;
}

.rotate--305 {
    rotate: -305deg;
    display: inline-block;
}

.rotate-310 {
    rotate: 310deg;
    display: inline-block;
}

.rotate--310 {
    rotate: -310deg;
    display: inline-block;
}

.rotate-315 {
    rotate: 315deg;
    display: inline-block;
}

.rotate--315 {
    rotate: -315deg;
    display: inline-block;
}

.rotate-320 {
    rotate: 320deg;
    display: inline-block;
}

.rotate--320 {
    rotate: -320deg;
    display: inline-block;
}

.rotate-325 {
    rotate: 325deg;
    display: inline-block;
}

.rotate--325 {
    rotate: -325deg;
    display: inline-block;
}

.rotate-330 {
    rotate: 330deg;
    display: inline-block;
}

.rotate--330 {
    rotate: -330deg;
    display: inline-block;
}

.rotate-335 {
    rotate: 335deg;
    display: inline-block;
}

.rotate--335 {
    rotate: -335deg;
    display: inline-block;
}

.rotate-340 {
    rotate: 340deg;
    display: inline-block;
}

.rotate--340 {
    rotate: -340deg;
    display: inline-block;
}

.rotate-345 {
    rotate: 345deg;
    display: inline-block;
}

.rotate--345 {
    rotate: -345deg;
    display: inline-block;
}

.rotate-350 {
    rotate: 350deg;
    display: inline-block;
}

.rotate--350 {
    rotate: -350deg;
    display: inline-block;
}

.rotate-355 {
    rotate: 355deg;
    display: inline-block;
}

.rotate--355 {
    rotate: -355deg;
    display: inline-block;
}

.rotate-360 {
    rotate: 360deg;
    display: inline-block;
}

.rotate--360 {
    rotate: -360deg;
    display: inline-block;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.z-1 {
    z-index: 1;
}

.z-2 {
    z-index: 2;
}

.z-3 {
    z-index: 3;
}

.z-10 {
    z-index: 10;
}

.z-100 {
    z-index: 100;
}