@keyframes talk {
    0%, 100% { transform: scaleY(1); }
    50% { transform: scaleY(0.95); }
}

@keyframes fadeInOut {
    0%, 100% { opacity: 0; transform: scale(0.8); }
    10%, 90% { opacity: 1; transform: scale(1); }
}

@keyframes bounce-in {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.group-hover\:animate-bounce-in:hover svg,
.group:hover .group-hover\:animate-bounce-in svg {
    animation: bounce-in 0.5s;
}

@keyframes heartBeat {
    0%, 100% { transform: scale(1); }
    20%, 60% { transform: scale(1.15); }
    40%, 80% { transform: scale(0.92); }
}

.svg-heartbeat {
    transition: none;
}

.group:hover .svg-heartbeat {
    animation: heartBeat 0.7s 1;
}

:root {
    --color-primary: #106473;
}

.fixed-height-header {
    transition: 0.3s ease all;
}

.fixed-height-header.active .logo-img-class {
    width: 40px;
}

.fixed-height-header.active .py-3 {
    padding-bottom: 6px;
    padding-top: 6px;
}

.fixed-height-header.active .speech-bubble {
    left: 3.5rem;
}

.logo-img-class {
    width: 100px;
    height: auto;
    transition: 0.3s ease all;
}

.animate-talk {
    animation: talk 0.6s ease-in-out infinite;
}

/* Speech bubble styling */
.speech-bubble {
    animation: fadeInOut 4s ease-in-out infinite;
    transform-origin: left center;
    transition: 0.3s ease all;
}

.speech-bubble {
    width: 74px;
    left: 6.5rem;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
}

.hero-heading-prefix {
    display: block;
    margin-bottom: 0.2em;
}

#typewriter {
    display: block;
    min-height: 1.25em;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

#typewriter.hero-phrase-exit {
    opacity: 0;
    transform: translateY(-0.35em);
}

#typewriter.hero-phrase-enter {
    opacity: 0;
    transform: translateY(0.35em);
    transition: none;
}

.kodlers {
    background: url(../img/kod-logo.png) no-repeat 0 0 / contain;
    padding: 0px 47px;
}

.main-text {
    line-height: 1.9;
}

.custom-gradiant {
    background-color: #1F2937;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg %3E%3Ccircle fill='%231F2937' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23202a39' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23212c3b' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23222d3c' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23232f3e' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23243040' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

/* Unique animations for each SVG icon */
.svg-spin {
    transition: transform 0.7s cubic-bezier(.4, 2, .6, 1);
}

.group:hover .svg-spin {
    transform: rotate(360deg);
}


.group:hover .svg-bounce {
    transform: translateY(-8px);
}

.svg-rotate {
    transition: transform 0.5s cubic-bezier(.4, 2, .6, 1);
}

.group:hover .svg-rotate {
    transform: rotate(45deg);
}

.svg-scale {
    transition: transform 0.4s cubic-bezier(.4, 2, .6, 1);
}

.group:hover .svg-scale {
    transform: scale(1.2);
}

.svg-fade {
    transition: opacity 0.4s cubic-bezier(.4, 2, .6, 1);
}

.group:hover .svg-fade {
    opacity: 0.6;
}

.svg-jump {
    transition: transform 0.5s cubic-bezier(.6, -0.28, .74, .05);
}

.group:hover .svg-jump {
    transform: translateY(-14px) scale(1.15);
}

.svg-wiggle {
    transition: transform 0.2s;
}

.group:hover .svg-wiggle {
    transform: rotate(-12deg);
}

.svg-drop {
    transition: transform 0.35s cubic-bezier(.4, 2, .6, 1);
}

.group:hover .svg-drop {
    transform: translateY(10px) scale(0.9);
}

.svg-flip {
    transition: transform 0.4s;
}

.group:hover .svg-flip {
    transform: scaleX(-1);
}

.svg-breath {
    transition: filter 0.4s;
}

.group:hover .svg-breath {
    filter: brightness(1.7);
}

#services h3.text-lg {
    font-size: 1.1rem;
}

.bg-white\/20 {
    background-color: rgba(255, 255, 255, 0.20);
}

.bg-black\/30 {
    background-color: rgba(0, 0, 0, 0.30);
}

/* Card glow + floating icon animation */
.group:hover .portfolio-float-icon {
  transform: translateY(-8px) scale(1.12) rotate(-8deg);
  filter: drop-shadow(0 0 12px #00C19D77);
}
.portfolio-float-icon {
  transition: all 0.35s cubic-bezier(.4,2,.6,1);
  right: 1.5rem;
  top: 1.5rem;
}

/* Shimmer effect for the button */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.shimmer-link {
  background: linear-gradient(90deg, #00C19D22 25%, #00C19D66 50%, #00C19D22 75%);
  background-size: 200% 100%;
  transition: background 0.2s;
}
.group:hover .shimmer-link {
  animation: shimmer 1.2s linear 1;
}

/* Portfolio image pulse on hover */
.group:hover .portfolio-img-animate {
  animation: pulse-img 1.2s ease-in-out 1;
}
@keyframes pulse-img {
  0%, 100% { filter: brightness(1);}
  50% { filter: brightness(1.22) saturate(1.18);}
}

.swiper-slide p {
    min-height: 170px;
}

.swiper-slide + div {
    overflow: hidden;
}

@media (min-width: 768px) {
    .custom-mt-80 {
        margin-top: 80px;
    }

    h1.break-words {
        font-size: 2.8rem;
    }
}

@media (max-width: 767px) {
    .custom-mt-80 {
        margin-top: 7rem;
    }

    #typewriter {
        display: block;
        /* min-height: 3.75em; */
    }

    .tech-stack-strip {
        flex-wrap: nowrap;
        column-gap: 0.6rem;
        row-gap: 0;
        margin-top: 2rem;
    }

    .tech-stack-strip > div > span {
        width: 1.5rem;
        height: 1.5rem;
    }

    .tech-stack-strip > div > span > svg {
        width: 0.7rem;
        height: 0.7rem;
    }

    .tech-stack-strip > div > span > span {
        font-size: 0.45rem;
        line-height: 1;
    }

    #arrowContainer {
        display: none;
    }
}