.hero {
    margin-bottom: 2rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    @media (max-width: 768px) {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    .contact {
        display: flex;
        flex-direction: column;
        gap: 15px;
        color: #000;
        a {
            color: #000;
        }
    }
    .details {
        color: #465a9e;
        opacity: 0;
        animation: fadeInCool 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;

        h1 {
            color: #ba8c60;
            font-weight: bolder;
            font-size: 2rem;
            opacity: 0;
            white-space: nowrap;
            animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.3s
                forwards;
            @media (max-width: 768px) {
                font-size: 1.75rem;
            }
        }
        h4 {
            font-size: 1.5rem;
            font-weight: normal;
            padding-top: 10px;
            padding-bottom: 10px;
            opacity: 0;
            animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.5s
                forwards;
        }
        small {
            display: block;
            padding-top: 10px;
            padding-bottom: 10px;
            font-style: italic;
            opacity: 0;
            animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.7s
                forwards;
        }
        p {
            font-size: 0.85rem;
            opacity: 0;
            animation: slideInLeft 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s
                forwards;
            @media (max-width: 768px) {
                font-size: 0.9rem;
            }
        }
    }
    img {
        position: relative;

        width: 100%;
        object-fit: scale-down;
        animation: upDown 5s ease-in-out infinite;
        @media (max-width: 768px) {
            top: 30px;
        }
    }

    a {
        cursor: pointer;
        transition: all 0.3s ease;
        &:hover {
            color: var(--gray-text-color);
            text-decoration: underline;
            transition: all 0.3s ease;
        }
    }
    .btn {
        margin-top: 30px;
        margin-bottom: 30px;
        display: flex;
        opacity: 0;
        align-items: center;
        justify-content: flex-start;
        width: 220px;
        gap: 10px;
        color: #fff;
        padding: 0.75rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
        font-size: 1rem;
        background: var(--text-color);
        box-shadow: 4px 5px 4.9px rgba(0, 0, 0, 0.25);
        border-radius: 4px;
        text-decoration: none;
        background: #24b41c;
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        border-radius: 10px;
        transition: all 0.3s ease;
        animation: popIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 1.1s forwards;

        &:hover {
            color: var(--background-color);
            background: var(--secondary-color);
            transform: translateY(-2px);
            box-shadow: 4px 7px 6px rgba(0, 0, 0, 0.3);
            text-decoration: none;
        }
        svg {
            width: 24px;
        }
    }
    .services {
        padding-top: 2rem;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 20px;
        width: fit-content;
        width: 100%;

        a {
            padding: 1rem;
            color: #fff;
            background: #465a9e;
            width: fit-content;
            border-radius: 10px;
            text-decoration: none;
            opacity: 0;
            animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;

            &:nth-child(1) {
                animation-delay: 1.3s;
            }
            &:nth-child(2) {
                animation-delay: 1.4s;
            }
            &:nth-child(3) {
                animation-delay: 1.5s;
            }
            &:nth-child(4) {
                animation-delay: 1.6s;
            }
            &:nth-child(5) {
                animation-delay: 1.7s;
            }
            &:nth-child(6) {
                animation-delay: 1.8s;
            }
        }
    }
}

@keyframes upDown {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
    100% {
        transform: translateY(0);
    }
}

@keyframes fadeInCool {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translateX(-60px) rotateY(-15deg);
        filter: blur(8px);
    }
    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0);
        filter: blur(0);
    }
}

@keyframes popIn {
    0% {
        opacity: 0;
        transform: scale(0.5) rotate(-5deg);
        filter: blur(5px);
    }
    50% {
        transform: scale(1.05) rotate(2deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
        filter: blur(0);
    }
}

@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}