/* ===== PROCESSING ORDERS PAGE STYLES ===== */

/* ---- Brand letters animation (دقق / Dqq) ---- */
.brand-letters-inline {
    color: var(--bs-primary);
    white-space: nowrap;
}

.letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) scale(0.5) rotateX(90deg);
    filter: blur(8px);
    animation: letterReveal 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.letter:nth-child(1) { animation-delay: 0.8s; }
.letter:nth-child(2) { animation-delay: 0.9s; }
.letter:nth-child(3) { animation-delay: 1.0s; }
.letter:nth-child(4) { animation-delay: 1.1s; }
.letter:nth-child(5) { animation-delay: 1.2s; }

@keyframes letterReveal {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.5) rotateX(90deg);
        filter: blur(8px);
    }
    50% {
        opacity: 1;
        filter: blur(2px);
    }
    75% {
        transform: translateY(-8px) scale(1.1) rotateX(0deg);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0);
    }
}

.letter.revealed {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    filter: blur(0);
    animation: letterWave 4s ease-in-out infinite;
}

.letter.revealed:nth-child(1) { animation-delay: 0s; }
.letter.revealed:nth-child(2) { animation-delay: 0.15s; }
.letter.revealed:nth-child(3) { animation-delay: 0.3s; }
.letter.revealed:nth-child(4) { animation-delay: 0.45s; }
.letter.revealed:nth-child(5) { animation-delay: 0.6s; }

@keyframes letterWave {
    0% {
        transform: translateY(0) scale(1) rotate(0deg);
        text-shadow: 0 0 0 transparent;
    }
    15% {
        transform: translateY(-12px) scale(1.12) rotate(-2deg);
        text-shadow: 0 8px 20px rgba(36, 162, 89, 0.3);
    }
    30% {
        transform: translateY(0) scale(1) rotate(0deg);
        text-shadow: 0 0 0 transparent;
    }
    100% {
        transform: translateY(0) scale(1) rotate(0deg);
        text-shadow: 0 0 0 transparent;
    }
}

/* Hero animated background */
@keyframes heroBgShift {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

@keyframes heroOrb1 {
    0%, 100% {
        transform: translate(-20%, -20%);
        opacity: 0.45;
    }
    25% {
        transform: translate(10%, -40%);
        opacity: 0.6;
    }
    50% {
        transform: translate(-10%, 10%);
        opacity: 0.35;
    }
    75% {
        transform: translate(-35%, -10%);
        opacity: 0.55;
    }
}

@keyframes heroOrb2 {
    0%, 100% {
        transform: translate(20%, 20%);
        opacity: 0.35;
    }
    25% {
        transform: translate(-10%, 30%);
        opacity: 0.5;
    }
    50% {
        transform: translate(30%, -10%);
        opacity: 0.3;
    }
    75% {
        transform: translate(10%, 40%);
        opacity: 0.45;
    }
}

/* Hero entrance animation */
@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-section .chip-title,
.hero-section .title,
.hero-section .desc,
.hero-section .analysis,
.hero-section .go-down {
    opacity: 0;
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Chip rotating gradient border */
@keyframes borderSpin {
    0%   { --angle: 0deg; }
    100% { --angle: 360deg; }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

.hero-section .chip-title { animation-delay: 0.1s; }
.hero-section .title      { animation-delay: 0.25s; }
.hero-section .desc        { animation-delay: 0.4s; }
.hero-section .analysis    { animation-delay: 0.55s; }
.hero-section .go-down     { animation-delay: 0.7s; }
.features-hero{
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.hero-section{
    background: linear-gradient(168deg, #BFE7D0 0%, #d4f0e0 20%, #FFFFFF 45%, #e6f5ec 70%, #BFE7D0 100%);
    background-size: 300% 300%;
    animation: heroBgShift 12s ease-in-out infinite;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    text-align: center;
    padding: 4rem 0;
    position: relative;
}

/* Floating orb 1 — top-left green blob */
.hero-section::before {
    content: '';
    position: absolute;
    width: 500px;
    height: 500px;
    top: -5%;
    left: -5%;
    background: radial-gradient(circle, rgba(36, 162, 89, 0.18) 0%, rgba(36, 162, 89, 0.06) 40%, transparent 70%);
    border-radius: 50%;
    filter: blur(60px);
    animation: heroOrb1 15s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Floating orb 2 — bottom-right light blob */
.hero-section::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    bottom: -10%;
    right: -5%;
    background: radial-gradient(circle, rgba(36, 162, 89, 0.12) 0%, rgba(191, 231, 208, 0.15) 35%, transparent 70%);
    border-radius: 50%;
    filter: blur(70px);
    animation: heroOrb2 18s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.hero-section > * {
    position: relative;
    z-index: 1;
}

.hero-section .chip-title{
    border-radius: 50px;
    font-size: 17px;
    padding: .5rem 1rem;
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    letter-spacing: 0%;
    vertical-align: middle;
    text-transform: capitalize;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: max-content;
    margin: 3rem auto 0;
    border: 2px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-image:
        linear-gradient(#E9F6EE, #E9F6EE),
        conic-gradient(from var(--angle), #24A259, #8EDAAA, #24A259, #BFE7D0, #24A259);
    animation: heroFadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards,
               borderSpin 3s linear infinite;
}
.hero-section .title{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 60px;
    leading-trim: NONE;
    letter-spacing: -1%;
    text-align: center;
    color: #414141;
    width: 60%;
    margin: 1rem auto;
}
.hero-section .desc{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 50px;
    letter-spacing: 0%;
    text-align: center;
    color: #676767;
    width: 60%;
    margin:  0 auto 2rem;
}
.hero-section .analysis{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    margin-bottom: 3rem;
}
.hero-section .analysis .value{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 28px;
    leading-trim: NONE;
    letter-spacing: -1%;
    text-align: center;
    color: #24A259;
    margin-bottom: .3rem;
}
.hero-section .analysis .name{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: center;
    color: #414141;
    margin-bottom: 0;
}
/* Button arrow animations */
@keyframes arrowBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(5px); }
}

@keyframes arrowLoop {
    0%   { transform: translateY(0) scale(1.4); }
    40%  { transform: translateY(30px) scale(1.4); opacity: 0; }
    41%  { transform: translateY(-30px) scale(1.4); opacity: 0; }
    80%  { transform: translateY(0) scale(1.4); opacity: 1; }
    100% { transform: translateY(0) scale(1.4); opacity: 1; }
}

.hero-section .go-down{
    border: 2px solid #24A259;
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #24A259;
    background-color: transparent;
    padding: .8rem 1.5rem .8rem 3rem;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    transition: background-color 0.4s ease, box-shadow 0.4s ease, border-radius 0.4s ease;
}

.hero-section .go-down .go-down-text {
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
}

.hero-section .go-down svg {
    animation: arrowBounce 1.5s ease-in-out infinite;
    flex-shrink: 0;
    position: absolute;
    left: 1rem;
    transition: left 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

[dir="ltr"] .hero-section .go-down {
    padding: .8rem 3rem .8rem 1.5rem;
}
[dir="ltr"] .hero-section .go-down svg {
    left: auto;
    right: 1rem;
    transition: right 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-section .go-down svg path {
    transition: fill 0.3s ease;
}

/* Hover: hide text with opacity, arrow moves to center */
.hero-section .go-down:hover {
    background-color: #24A259;
    box-shadow: 0 4px 20px rgba(36, 162, 89, 0.35);
    border-radius: 50px;
}

.hero-section .go-down:hover .go-down-text {
    opacity: 0;
    pointer-events: none;
}

.hero-section .go-down:hover svg {
    left: 50%;
    transform: translateX(-50%) scale(1.4);
    animation: arrowLoop 1.2s ease-in-out infinite;
}

[dir="ltr"] .hero-section .go-down:hover svg {
    right: 50%;
    left: auto;
    transform: translateX(50%) scale(1.4);
}

.hero-section .go-down:hover svg path {
    fill: #fff;
}

/* Features Section */
.features-section {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5rem 0;
}

.features-section .section-title {
    font-family: MadaniArabic-SemiBold;
    font-size: 42px;
    color: #414141;
    margin-bottom: 1rem;
}

.features-section .section-desc {
    font-family: MadaniArabic-Regular;
    font-size: 20px;
    color: #676767;
    line-height: 40px;
}

.title {
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 45px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    text-align: center!important;
    color: #414141;
    margin-bottom: 1rem;
}
.desc{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 22px;
    leading-trim: NONE;
    line-height: 50px;
    letter-spacing: 0%;
    text-align: center;
    color: #8D8D8D;
    width: 70%;
    margin: 0 auto 4rem;
}


/* -------------------------------------------- */

/* Features section animations */
.features-section .animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.features-section .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for children */
.features-section .title.animate-on-scroll { transition-delay: 0s; }
.features-section .desc.animate-on-scroll { transition-delay: 0.15s; }
.features-section .problem-solving.animate-on-scroll { transition-delay: 0.1s; }

/* Problem side slides from right, image slides from left */
.features-section .problem-solving > div:first-child .animate-on-scroll {
    transform: translateX(40px);
    opacity: 0;
}

.features-section .problem-solving > div:first-child .animate-on-scroll.animated {
    transform: translateX(0);
    opacity: 1;
}

.features-section .problem-solving > div:last-child.animate-on-scroll {
    transform: translateX(-40px) scale(0.95);
    opacity: 0;
}

.features-section .problem-solving > div:last-child.animate-on-scroll.animated {
    transform: translateX(0) scale(1);
    opacity: 1;
}

/* Problem text stagger */
.features-section .name.animate-on-scroll { transition-delay: 0.1s; }
.features-section .problem-text.animate-on-scroll { transition-delay: 0.25s; }
.features-section .the-solution.animate-on-scroll {
    transition-delay: 0.4s;
    transform: translateY(30px) scale(0.97);
}
.features-section .the-solution.animate-on-scroll.animated {
    transform: translateY(0) scale(1);
}

/* Image side delay */
.features-section .problem-solving > div:last-child.animate-on-scroll {
    transition-delay: 0.3s;
}

.features-section{
    padding: 6rem 0;
}

.features-section .problem-solving {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6%;
    margin: 10rem 0;

}
.features-section .problem-solving > div{
    width: 47%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: start;
}
.features-section .problem-solving.solution-only {
    align-items: stretch;
}
.features-section .problem-solving.solution-only > div {
    display: flex;
    flex-direction: column;
}
.features-section .problem-solving.solution-only .the-solution {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 30px;
}
/* Image float animation */
@keyframes imgFloat {
    0%, 100% {
        transform: translateX(0);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.021));
    }
    50% {
        transform: translateX(-12px);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.021));
    }
}
@keyframes imgFloatY {
    0%, 100% {
        transform: translateY(0);
        filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.021));
    }
    50% {
        transform: translateY(-12px);
        filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.021));
    }
}

.features-section .problem-solving > div > img{
    width: 100%;
    animation: imgFloat 4s ease-in-out infinite;
    border-radius: 12px;
}
.features-section .problem-solving .name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    color: #676767;
    margin-bottom: 0;
}
.features-section .problem-solving .problem-text{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 22px;
    leading-trim: NONE;
    letter-spacing: 0%;
    color: #414141;
    margin-bottom: 2rem;
}

/* Problem icon shake */
@keyframes iconShake {
    0%, 85%, 100% { transform: rotate(0deg); }
    88%  { transform: rotate(-8deg); }
    91%  { transform: rotate(8deg); }
    94%  { transform: rotate(-5deg); }
    97%  { transform: rotate(5deg); }
}

.features-section .problem-solving .problem-text svg {
    flex-shrink: 0;
    animation: iconShake 3s ease-in-out infinite;
}

.features-section .problem-solving .the-solution{
    padding: 1.5rem;
    border-radius: 12px;
    background: #F9F9FB;
    position: relative;
    overflow: hidden;
    border: 1px solid #e8e8e8;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.4s ease;
}

.features-section .problem-solving .the-solution:hover {
    transform: translateY(-5px) scale(1.01);
}

.features-section .problem-solving .the-solution:hover::before {
    background: conic-gradient(
        from var(--angle),
        transparent 0%,
        transparent 80%,
        rgba(36, 162, 89, 0.4) 88%,
        rgba(36, 162, 89, 0.2) 94%,
        transparent 100%
    );
}

.features-section .problem-solving .the-solution::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(
        from var(--angle),
        transparent 0%,
        transparent 85%,
        #999999 92%,
        rgba(153, 153, 153, 0.5) 96%,
        transparent 100%
    );
    animation: borderSpin 3.5s linear infinite;
    z-index: 0;
}

.features-section .problem-solving .the-solution::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: #F9F9FB;
    border-radius: 10px;
    z-index: 1;
}

.features-section .problem-solving .the-solution > * {
    position: relative;
    z-index: 2;
}
/* Solution name + icon animations */
@keyframes iconPulse {
    0%   { box-shadow: 0 0 0 0 rgba(36, 162, 89, 0.35); }
    50%  { box-shadow: 0 0 0 12px rgba(36, 162, 89, 0); }
    100% { box-shadow: 0 0 0 0 rgba(36, 162, 89, 0); }
}

@keyframes iconSpin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.features-section .problem-solving .the-solution-name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 35px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    text-align: start;
    color: #24A259;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 1rem;
    opacity: 0;
    text-align: start!important;
    transform: translateX(20px);
    transition: opacity 0.6s ease 0.5s, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}

.the-solution.animate-on-scroll.animated .the-solution-name {
    opacity: 1;
    transform: translateX(0);
}

.features-section .problem-solving .the-solution-name .icon {
    background: #E9F6EE;
    width: 60px;
    height: 60px;
    min-width: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0) rotate(-180deg);
    transition: opacity 0.5s ease 0.8s, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.8s;
}

.the-solution.animate-on-scroll.animated .the-solution-name .icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
    animation: iconPulse 2.5s ease-in-out 1.5s infinite;
}

/* Solution name span - continuous shimmer */
@keyframes textShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.features-section .problem-solving .the-solution-name > span {
    background-image: linear-gradient(
        110deg,
        #24A259 0%,
        #24A259 35%,
        #6FD89A 50%,
        #24A259 65%,
        #24A259 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 4s ease-in-out infinite;
}
.features-section .problem-solving .solution-text{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 19px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: start;
    color: #676767;
    margin-bottom: 0;
}
/* ------------------------------------------ */

/* Employee section animations */
@keyframes phoneFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

@keyframes circleSpin {
    0%   { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

.emplyee-section .animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.emplyee-section .animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Title & desc stagger */
.emplyee-section .title.animate-on-scroll { transition-delay: 0s; }
.emplyee-section .desc.animate-on-scroll  { transition-delay: 0.15s; }
.emplyee-section .contents.animate-on-scroll { transition-delay: 0.2s; }

/* Left column cards slide from right (RTL) */
.emplyee-section .contents > div:first-of-type > div {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Right column cards slide from left (RTL) */
.emplyee-section .contents > div:last-of-type > div {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Staggered delays for cards */
.emplyee-section .contents > div:first-of-type > div:first-child,
.emplyee-section .contents > div:last-of-type > div:first-child {
    transition-delay: 0.3s;
}
.emplyee-section .contents > div:first-of-type > div:last-child,
.emplyee-section .contents > div:last-of-type > div:last-child {
    transition-delay: 0.5s;
}

/* Phone entrance - scale up */
.emplyee-section .contents > div:nth-of-type(2) .phone {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
                transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s;
}

/* Circle entrance - scale + fade */
.emplyee-section .contents > div:nth-of-type(2) .circle {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.5);
    transition: opacity 0.8s ease 0.1s,
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

/* Animated state - triggered by JS */
.emplyee-section .contents.animate-on-scroll.animated > div:first-of-type > div,
.emplyee-section .contents.animate-on-scroll.animated > div:last-of-type > div {
    opacity: 1;
    transform: translateX(0);
}

.emplyee-section .contents.animate-on-scroll.animated > div:nth-of-type(2) .phone {
    opacity: 1;
    transform: scale(1);
    animation: phoneFloat 3.5s ease-in-out 1s infinite;
}

.emplyee-section .contents.animate-on-scroll.animated > div:nth-of-type(2) .circle {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    animation: circleSpin 25s linear 1s infinite;
}

/* Icon pulse on cards after entrance */
.emplyee-section .contents.animate-on-scroll.animated .icon {
    animation: iconPulse 2.5s ease-in-out 1s infinite;
}

.emplyee-section{
    background: #F4FAF7;
    padding: 5rem 0;
    margin-bottom: 5rem;
}

.emplyee-section .contents{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 5%;
}
.emplyee-section .contents > div:first-of-type,.emplyee-section .contents > div:last-of-type{
    width: 27%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}
.emplyee-section .contents > div:nth-of-type(2){
    width: 34%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.emplyee-section .contents .icon{
    background: #D3ECDE;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.emplyee-section .contents .name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 24px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    text-align: start;
    color: #414141;
    margin-bottom: .1rem;

}
.emplyee-section .contents .text{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: start;
    color: #676767;
    margin-bottom: 0;
}
.emplyee-section .contents .phone{
    width: 60%;
    z-index: 2;
}
.emplyee-section .contents .circle{
    width: 90%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 1;
}

/* ------------------------------------------- */
/* dqq-section */

/* Gradient slowly rotates and shifts */
@keyframes dqqGradientShift {
    0%   { background-position: 0% 0%; }
    25%  { background-position: 100% 0%; }
    50%  { background-position: 100% 100%; }
    75%  { background-position: 0% 100%; }
    100% { background-position: 0% 0%; }
}

/* Floating light orbs */
@keyframes dqqOrbFloat {
    0%   { transform: translate(0, 0) scale(1); opacity: 0.25; }
    25%  { transform: translate(30px, -40px) scale(1.2); opacity: 0.35; }
    50%  { transform: translate(-20px, -60px) scale(0.9); opacity: 0.2; }
    75%  { transform: translate(-40px, -20px) scale(1.1); opacity: 0.3; }
    100% { transform: translate(0, 0) scale(1); opacity: 0.25; }
}

/* Shine sweep */
@keyframes dqqShineSweep {
    0%        { transform: translateX(100%) skewX(-15deg); opacity: 0; }
    10%       { opacity: 1; }
    90%       { opacity: 1; }
    100%      { transform: translateX(-100%) skewX(-15deg); opacity: 0; }
}

/* Card soft glow pulse */
@keyframes dqqCardGlow {
    0%, 100% { box-shadow: 0 10px 40px rgba(27, 251, 122, 0.15); }
    50%      { box-shadow: 0 15px 60px rgba(27, 251, 122, 0.3), 0 0 80px rgba(36, 164, 90, 0.1); }
}

/* Title text shimmer */
@keyframes dqqTextShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Button breathe */
@keyframes dqqBtnBreathe {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(36, 162, 89, 0.2);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 6px 30px rgba(36, 162, 89, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.12);
        transform: scale(1.03);
    }
}

/* Arrow loop - exits left, re-enters from right */
@keyframes dqqArrowLoop {
    0%, 20%  { transform: translateX(0); opacity: 1; }
    40%      { transform: translateX(-12px); opacity: 0; }
    41%      { transform: translateX(12px); opacity: 0; }
    60%, 100%{ transform: translateX(0); opacity: 1; }
}

.dqq-section{
    margin: 5rem 0;
    background: linear-gradient(135deg, #1a9b4e 0%, #24A45A 25%, #1BFB7A 50%, #24A45A 75%, #1a9b4e 100%);
    background-size: 300% 300%;
    animation: dqqGradientShift 8s ease-in-out infinite,
               dqqCardGlow 4s ease-in-out infinite;
    padding: 4rem;
    border-radius: 25px;
    position: relative;
    overflow: hidden;
}

/* Floating light orbs */
.dqq-section::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background:
        radial-gradient(circle 120px at 15% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 70%),
        radial-gradient(circle 100px at 85% 20%, rgba(255, 255, 255, 0.12) 0%, transparent 70%),
        radial-gradient(circle 80px at 50% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    animation: dqqOrbFloat 10s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Shine sweep overlay */
.dqq-section::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.06) 30%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.06) 70%,
        transparent 100%
    );
    animation: dqqShineSweep 6s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 0;
}

.dqq-section > * {
    position: relative;
    z-index: 1;
}

.dqq-section .title{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 45px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    text-align: center!important;
    width: 70%;
    margin: 0 auto 1rem;
    background-image: linear-gradient(
        110deg,
        #F4FAF7 0%,
        #F4FAF7 40%,
        #ffffff 50%,
        #F4FAF7 60%,
        #F4FAF7 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: dqqTextShimmer 5s ease-in-out infinite;
}
.dqq-section .desc{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 21px;
    leading-trim: NONE;
    line-height: 50px;
    letter-spacing: 0%;
    text-align: center;
    color:#F4FAF7;
    margin: 2rem auto;
}
.dqq-section a{
    background: #FFFFFF;
    color: #24A259;
    font-family: MadaniArabic-SemiBold;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    width: max-content;
    border-radius: 10px;
    text-decoration: none;
    margin: 0 auto;
    animation: dqqBtnBreathe 3s ease-in-out infinite;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.dqq-section a:hover{
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    animation: none;
}
.dqq-section a svg{
    animation: dqqArrowLoop 2.5s ease-in-out infinite;
    flex-shrink: 0;
}
.dqq-section a:hover svg{
    animation: none;
    transform: translateX(-6px);
    transition: transform 0.3s ease;
}

@keyframes dqqArrowLoopLtr {
    0%, 20%  { transform: translateX(0); opacity: 1; }
    40%      { transform: translateX(12px); opacity: 0; }
    41%      { transform: translateX(-12px); opacity: 0; }
    60%, 100%{ transform: translateX(0); opacity: 1; }
}
[dir="ltr"] .dqq-section a svg{
    animation: dqqArrowLoopLtr 2.5s ease-in-out infinite;
}
[dir="ltr"] .dqq-section a:hover svg{
    transform: translateX(6px);
}

/* ------------------------------------------- */
/* dqq-section animations */
.dqq-section.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.dqq-section.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Children start hidden, animate after parent */
.dqq-section .title.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s;
}
.dqq-section .desc.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.35s;
}
.dqq-section a.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px) scale(0.9);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition-delay: 0.5s;
}

.dqq-section.animate-on-scroll.animated .title.animate-on-scroll,
.dqq-section.animate-on-scroll.animated .desc.animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
}
.dqq-section.animate-on-scroll.animated a.animate-on-scroll {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ------------------------------------------- */
/* anther-features keyframes */
@keyframes antherBgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes antherShineSweep {
    0%       { transform: translateX(100%) skewX(-20deg); opacity: 0; }
    5%       { opacity: 1; }
    95%      { opacity: 1; }
    100%     { transform: translateX(-100%) skewX(-20deg); opacity: 0; }
}

@keyframes antherPillGlow {
    0%        { box-shadow: 0 2px 8px rgba(36, 162, 89, 0.08); }
    12.5%     { box-shadow: 0 4px 20px rgba(36, 162, 89, 0.25), 0 0 0 4px rgba(36, 162, 89, 0.08); }
    25%, 100% { box-shadow: 0 2px 8px rgba(36, 162, 89, 0.08); }
}

@keyframes antherIconBounce {
    0%, 100% { transform: translateY(0); }
    30%      { transform: translateY(-3px); }
    60%      { transform: translateY(1px); }
}

@keyframes antherChevronLoop {
    0%, 20%  { transform: translateX(0); opacity: 1; }
    40%      { transform: translateX(-8px); opacity: 0; }
    41%      { transform: translateX(8px); opacity: 0; }
    60%, 100%{ transform: translateX(0); opacity: 1; }
}

@keyframes antherLabelShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.anther-features{
    margin: 7rem 0;
    background: linear-gradient(135deg, #F4FAF7 0%, #E9F6EE 50%, #F4FAF7 100%);
    background-size: 200% 200%;
    animation: antherBgShift 8s ease-in-out infinite;
    border-radius: 16px;
    padding: 3rem;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
    position: relative;
    overflow: hidden;
    flex-wrap: wrap;
}

/* Shine sweep overlay */
.anther-features::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 40%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.4) 60%,
        transparent 100%
    );
    animation: antherShineSweep 6s ease-in-out 2s infinite;
    pointer-events: none;
    z-index: 0;
}

.anther-features > * {
    position: relative;
    z-index: 1;
}
.anther-features p{
    margin-bottom: 0;
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 19px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    color: #676767;
}
.anther-features a{
    background: #E9F6EE;
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 17px;
    leading-trim: NONE;
    line-height: 50px;
    letter-spacing: 0%;
    text-align: start;
    vertical-align: middle;
    text-transform: capitalize;
    color: #24A259;
    padding: .1rem 1rem;
    border-radius: 50px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: .6rem;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.anther-features a:hover {
    background: #D3ECDE;
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(36, 162, 89, 0.15);
}

/* Arrow chevron nudge on hover */
.anther-features a > svg:last-child {
    transition: transform 0.3s ease;
}
.anther-features a:hover > svg:last-child {
    transform: translateX(-4px);
}

/* ------------------------------------------- */
/* anther-features animations */
.anther-features.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.anther-features.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.anther-features p.animate-on-scroll {
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.15s;
}
.anther-features.animate-on-scroll.animated p.animate-on-scroll {
    opacity: 1;
    transform: translateX(0);
}

.anther-features a {
    opacity: 0;
    transform: translateY(15px) scale(0.95);
}
.anther-features.animate-on-scroll.animated a {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.3s ease, box-shadow 0.3s ease;
}
.anther-features a:nth-child(2) { transition-delay: 0.2s; }
.anther-features a:nth-child(3) { transition-delay: 0.35s; }
.anther-features a:nth-child(4) { transition-delay: 0.5s; }
.anther-features a:nth-child(5) { transition-delay: 0.65s; }

/* Infinite animations - after entrance */

/* Label text shimmer */
.anther-features.animate-on-scroll.animated p {
    background-image: linear-gradient(
        110deg,
        #676767 0%,
        #676767 40%,
        #24A259 50%,
        #676767 60%,
        #676767 100%
    );
    background-size: 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: antherLabelShimmer 5s ease-in-out 1.5s infinite;
}

/* Pill glow pulse - staggered */
.anther-features.animate-on-scroll.animated a:nth-child(2) {
    animation: antherPillGlow 8s ease-in-out infinite;
}
.anther-features.animate-on-scroll.animated a:nth-child(3) {
    animation: antherPillGlow 8s ease-in-out 2s infinite;
}
.anther-features.animate-on-scroll.animated a:nth-child(4) {
    animation: antherPillGlow 8s ease-in-out 4s infinite;
}
.anther-features.animate-on-scroll.animated a:nth-child(5) {
    animation: antherPillGlow 8s ease-in-out 6s infinite;
}

/* Pause pill glow on hover */
.anther-features a:hover {
    animation: none !important;
}

/* Feature icons bounce - staggered */
.anther-features.animate-on-scroll.animated a > svg:first-child {
    animation: antherIconBounce 3s ease-in-out infinite;
}
.anther-features a:nth-child(3) > svg:first-child { animation-delay: 1s !important; }
.anther-features a:nth-child(4) > svg:first-child { animation-delay: 2s !important; }
.anther-features a:nth-child(5) > svg:first-child { animation-delay: 3s !important; }

/* Chevron loop - exits left, re-enters from right */
.anther-features.animate-on-scroll.animated a > svg:last-child {
    animation: antherChevronLoop 3s ease-in-out infinite;
}
.anther-features a:hover > svg:last-child {
    animation: none;
    transform: translateX(-6px);
}

@keyframes antherChevronLoopLtr {
    0%, 20%  { transform: translateX(0); opacity: 1; }
    40%      { transform: translateX(8px); opacity: 0; }
    41%      { transform: translateX(-8px); opacity: 0; }
    60%, 100%{ transform: translateX(0); opacity: 1; }
}
[dir="ltr"] .anther-features a:hover > svg:last-child {
    transform: translateX(4px);
}
[dir="ltr"] .anther-features.animate-on-scroll.animated a > svg:last-child {
    animation: antherChevronLoopLtr 3s ease-in-out infinite;
}
[dir="ltr"] .anther-features a:hover > svg:last-child {
    animation: none;
    transform: translateX(6px);
}

/* ------------------------------------- */
/* workflows-section */
.workflows-section{
    margin: 5rem 0;
}
.workflows-section .workflow-element{
    background: linear-gradient(82.43deg, rgba(243, 250, 246, 0.36) -2.29%, rgba(198, 234, 213, 0.37) 99.01%);
    padding:5rem 6rem;
    border-radius: 30px;
    margin-top: 3rem;
}
.workflows-section .workflow-element .chip{
    margin: 0 auto 1rem;
    padding: .6rem 1.5rem;
    border-radius: 20px;
    background:  #FFFFFF;
    width: max-content;
    display: block;
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 16px;
    leading-trim: NONE;
    letter-spacing: 0%;
    text-align: right;
    vertical-align: middle;
    text-transform: capitalize;
    color: #414141
}
.workflows-section .workflow-element .title{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 35px;
    leading-trim: NONE;
    line-height: 170%;
    letter-spacing: -1%;
    text-align: right;
    color: #24A259
}
.workflows-section .workflow-element .desc{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 18px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
}
.workflows-section .workflow-element .steps{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 2rem;
}
.workflows-section .workflow-element .steps .icon{
    width: 110px;
    height: 70px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #D3ECDE;
    margin: 0 auto 1rem;
}
.workflows-section .workflow-element .steps .name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 25px;
    leading-trim: NONE;
    letter-spacing: -1%;
    text-align: center;
    color:#414141;
    white-space: nowrap;
    margin-bottom: .5rem;
}
.workflows-section .workflow-element .steps .value{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
    color: #676767;
    margin-bottom: 0;
}

.workflows-section .workflow-element .steps > div:not(.image) {
    flex-shrink: 0;
}
.workflows-section .workflow-element .steps .image {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
}
.workflows-section .workflow-element .steps .image svg {
    width: 100%;
    height: auto;
}

/* ---- workflows-section animations ---- */
.workflows-section > .title.animate-on-scroll,
.workflows-section > .desc.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.workflows-section > .title.animate-on-scroll.animated,
.workflows-section > .desc.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.workflows-section > .title.animate-on-scroll { transition-delay: 0s; }
.workflows-section > .desc.animate-on-scroll { transition-delay: 0.15s; }

/* Workflow card entrance */
.workflow-element.animate-on-scroll {
    opacity: 0;
    transform: translateY(50px) scale(0.97);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.workflow-element.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Chip pops in */
.workflow-element .chip.animate-on-scroll {
    opacity: 0;
    transform: translateY(15px) scale(0.9);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.2s;
}
.workflow-element .chip.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Title and desc inside workflow card */
.workflow-element .title.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.3s;
}
.workflow-element .title.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

.workflow-element .desc.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.4s;
}
.workflow-element .desc.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Steps row slides up */
.workflow-element .steps.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 0.5s;
}
.workflow-element .steps.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Step items — JS-orchestrated visibility */
.workflow-element .steps > div:not(.image).step-hidden {
    opacity: 0;
    transform: scale(0.85);
}
.workflow-element .steps > div:not(.image).step-show {
    animation: stepPop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.workflow-element .steps > div:not(.image).step-fade {
    animation: wfArrowFadeOut 0.8s ease-out forwards;
}

/* Arrow dot-line draw animation — JS-orchestrated */
.workflow-element .steps .image {
    position: relative;
}
.workflow-element .steps .image svg {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
}

/* Draw phase: line reveals right→left, dot travels */
.workflow-element .steps .image.arrow-draw svg {
    animation: wfArrowDraw 1.2s ease-out forwards;
}

/* Visible phase: static */
.workflow-element .steps .image.arrow-visible svg {
    clip-path: inset(0 0 0 0);
    opacity: 1;
}

/* Pulse phase: gentle glow during hold */
.workflow-element .steps .image.arrow-pulse svg {
    clip-path: inset(0 0 0 0);
    animation: wfArrowPulse 2s ease-in-out infinite;
}

/* Fade phase */
.workflow-element .steps .image.arrow-fade svg {
    clip-path: inset(0 0 0 0);
    animation: wfArrowFadeOut 0.8s ease-out forwards;
}

@keyframes stepPop {
    0% {
        opacity: 0;
        transform: translateY(25px) scale(0.85);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Arrow line draw — reveals right to left */
@keyframes wfArrowDraw {
    0%   { clip-path: inset(0 0 0 100%); opacity: 1; }
    100% { clip-path: inset(0 0 0 0);    opacity: 1; }
}

/* LTR: flip arrow SVGs — scaleX(-1) also flips the clip-path coordinate space,
   so the original RTL clip/animation automatically reveals left→right */
[dir="ltr"] .workflow-element .steps .image svg {
    transform: scaleX(-1);
}


/* Gentle pulse during 7s hold */
@keyframes wfArrowPulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* Fade out before restart */
@keyframes wfArrowFadeOut {
    0%   { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- workflows infinite animations ---- */

/* 1. Card background gradient shift */
@keyframes wfBgShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.workflow-element.animate-on-scroll.animated {
    background: linear-gradient(82.43deg,
        rgba(243, 250, 246, 0.36) 0%,
        rgba(198, 234, 213, 0.5) 25%,
        rgba(210, 245, 225, 0.3) 50%,
        rgba(198, 234, 213, 0.5) 75%,
        rgba(243, 250, 246, 0.36) 100%);
    background-size: 200% 200%;
    animation: wfBgShift 8s ease-in-out infinite;
}

/* 2. Chip shine sweep */
@keyframes wfChipShine {
    0%   { left: -100%; }
    15%  { left: 100%; }
    100% { left: 100%; }
}

.workflow-element .chip.animate-on-scroll.animated {
    position: relative;
    overflow: hidden;
}
.workflow-element .chip.animate-on-scroll.animated::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(36, 162, 89, 0.12), transparent);
    transform: skewX(-20deg);
    animation: wfChipShine 5s ease-in-out infinite;
}


/* 6. Title text shimmer */
@keyframes wfTitleShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.workflow-element .title.animate-on-scroll.animated {
    background: linear-gradient(90deg, #24A259 0%, #24A259 40%, #1BFB7A 50%, #24A259 60%, #24A259 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wfTitleShimmer 6s ease-in-out infinite;
}


/* -------------------------------------- */
/* automations-steps */

.automations-steps{
    margin: 6rem 0;
}
.automations-steps .steps{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    background: linear-gradient(85.81deg, rgba(243, 250, 246, 0.36) 14.33%, rgba(198, 234, 213, 0.37) 141.71%);
    padding: 2rem 4rem;
    border-radius: 30px;
}
.automations-steps .steps .step{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    position: relative;
    padding: 3rem 0;
}
.automations-steps .steps .line{
    width: 1px;
    align-self: stretch;
    background: #d9d9d97a;
}
.automations-steps .steps .step .number{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 120px;
    leading-trim: NONE;
    vertical-align: middle;
    color: #d3ecde69;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    line-height: 1;
}
.automations-steps .steps .step .icon{
    margin-bottom: 2rem;
}
.automations-steps .steps .step .name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 30px;
    leading-trim: NONE;
    letter-spacing: -1%;
    text-align: center;
    color: #414141;
    margin-bottom: 0;
}

.automations-steps .steps .step .value{
    font-family: MadaniArabic-Regular;
    font-weight: 400;
    font-style: Regular;
    font-size: 20px;
    leading-trim: NONE;
    line-height: 40px;
    letter-spacing: 0%;
    text-align: center;
    color: #676767;
    margin-bottom: 0;
}

/* automations-steps animations */
.automations-steps .title.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.automations-steps .title.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.automations-steps .desc.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.15s;
}
.automations-steps .desc.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.automations-steps .steps.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.3s;
}
.automations-steps .steps.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}

/* Spotlight — highlight flows step 1 → 2 → 3, 9s cycle */
.automations-steps .steps .step,
.automations-steps .steps .line {
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.automations-steps .steps.animate-on-scroll.animated .step:nth-child(1) {
    animation: spotStep1 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .step:nth-child(1) .number {
    animation: spotNum1 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .line:nth-child(2) {
    animation: spotLine1 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .step:nth-child(3) {
    animation: spotStep2 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .step:nth-child(3) .number {
    animation: spotNum2 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .line:nth-child(4) {
    animation: spotLine2 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .step:nth-child(5) {
    animation: spotStep3 5s ease-in-out infinite;
}
.automations-steps .steps.animate-on-scroll.animated .step:nth-child(5) .number {
    animation: spotNum3 5s ease-in-out infinite;
}

@keyframes spotStep1 {
    0%       { opacity: 1; transform: translateY(-5px); }
    30%      { opacity: 1; transform: translateY(-5px); }
    36%      { opacity: 0.45; transform: translateY(0); }
    94%      { opacity: 0.45; transform: translateY(0); }
    100%     { opacity: 1; transform: translateY(-5px); }
}
@keyframes spotLine1 {
    0%, 27%  { opacity: 0.35; }
    33%      { opacity: 1; }
    39%      { opacity: 0.35; }
    100%     { opacity: 0.35; }
}
@keyframes spotStep2 {
    0%, 30%  { opacity: 0.45; transform: translateY(0); }
    36%      { opacity: 1; transform: translateY(-5px); }
    63%      { opacity: 1; transform: translateY(-5px); }
    69%      { opacity: 0.45; transform: translateY(0); }
    100%     { opacity: 0.45; transform: translateY(0); }
}
@keyframes spotLine2 {
    0%, 60%  { opacity: 0.35; }
    66%      { opacity: 1; }
    72%      { opacity: 0.35; }
    100%     { opacity: 0.35; }
}
@keyframes spotStep3 {
    0%, 63%  { opacity: 0.45; transform: translateY(0); }
    69%      { opacity: 1; transform: translateY(-5px); }
    94%      { opacity: 1; transform: translateY(-5px); }
    100%     { opacity: 0.45; transform: translateY(0); }
}

/* Number pop + center when step is active */
@keyframes spotNum1 {
    0%       { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    30%      { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    36%      { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
    94%      { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
    100%     { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
}
@keyframes spotNum2 {
    0%, 30%  { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
    36%      { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    63%      { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    69%      { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
    100%     { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
}
@keyframes spotNum3 {
    0%, 63%  { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
    69%      { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    94%      { top: 50%; transform: translateX(-50%) translateY(-50%) scale(2);   color: #d3ecde30; }
    100%     { top: 0;   transform: translateX(-50%) translateY(0)   scale(1);   color: #d3ecde69; }
}





/* --------------------------------------------- */
/* msg-watsap */
.msg-watsap{
    margin: 7rem 0;
    background: linear-gradient(85.81deg, rgba(243, 250, 246, 0.36) 14.33%, rgba(198, 234, 213, 0.37) 141.71%);
    padding: 4rem 4rem 4rem 0;
    border-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5rem;
}

.msg-watsap > img{
    width: 45%;
}
.msg-watsap .chip{
    background: #FFEECC;
    margin-bottom: 1rem;
    display: block;
    width: max-content;
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 22px;
    leading-trim: NONE;
    letter-spacing: -1%;
    color: #FFAB00;
    padding: .5rem 1.5rem;
    border-radius: 30px;
}
.msg-watsap .name{
    font-family: MadaniArabic-SemiBold;
    font-weight: 400;
    font-style: Regular;
    font-size: 40px;
    leading-trim: NONE;
    letter-spacing: -1%;
    color: #414141;
    margin-bottom: 1rem;

}
.msg-watsap .value{
    font-family: MadaniArabic-Regular;
font-weight: 400;
font-style: Regular;
font-size: 20px;
leading-trim: NONE;
line-height: 50px;
letter-spacing: 0%;
text-align: right;
color: #8D8D8D;
margin-bottom: 0;

}

/* msg-watsap animations */
.msg-watsap.animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.msg-watsap.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.msg-watsap .chip.animate-on-scroll {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.2s;
}
.msg-watsap .chip.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.msg-watsap .name.animate-on-scroll {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.35s;
}
.msg-watsap .name.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.msg-watsap .value.animate-on-scroll {
    opacity: 0;
    transform: translateY(15px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: 0.5s;
}
.msg-watsap .value.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
}
.msg-watsap > img.animate-on-scroll {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    transition-delay: 0.4s;
}
.msg-watsap.animated > img.animate-on-scroll.animated {
    opacity: 1;
    transform: translateX(0);
}

/* Repeating animations — triggered after entrance */
.msg-watsap.animated .chip.animated {
    animation: chipPulse 3s ease-in-out 0.8s infinite;
}
@keyframes chipPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 171, 0, 0); }
    50%      { box-shadow: 0 0 18px 4px rgba(255, 171, 0, 0.25); }
}

.msg-watsap.animated .name.animated {
    background: linear-gradient(90deg, #414141 0%, #414141 40%, #24A259 50%, #414141 60%, #414141 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textShimmer 5s ease-in-out 1s infinite;
}

.msg-watsap.animated > img.animated {
    animation: imgFloat 4s ease-in-out 1s infinite;
}
@keyframes imgFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}

/* ===== RESPONSIVE ===== */

/* 1500px */
@media (max-width: 1500px) {
    .hero-section .chip-title {
        font-size: 16px;
        margin: 1.5rem auto 0;
    }
    .hero-section .title {
        font-size: 48px;
        width: 75%;
        margin: 0.5rem auto;
    }
    .hero-section .desc {
        font-size: 18px;
        line-height: 38px;
        margin-bottom: 1.5rem;
        width: 75%;
    }
    .hero-section .analysis {
        gap: 2rem;
        margin-bottom: 1.5rem;
    }
    .hero-section .analysis .value {
        font-size: 26px;
    }
    .hero-section .analysis .name {
        font-size: 15px;
    }
    .hero-section .go-down {
        font-size: 14px;
        padding: .6rem 1.2rem .6rem 2.5rem;
    }
    [dir="ltr"] .hero-section .go-down {
        padding: .6rem 2.5rem .6rem 1.2rem;
    }
    .features-section {
        padding: 2.5rem 0;
    }
    .title {
        font-size: 28px;
        line-height: 140%;
        margin-bottom: 0.5rem;
    }
    .desc{
        font-size: 15px;
        line-height: 30px;
        width: 90%;
        margin: 0 auto 1.5rem;
    }
    .features-section .problem-solving .name {
        font-size: 14px;
    }
    .features-section .problem-solving .problem-text {
        font-size: 15px;
        margin-bottom: 1rem;
    }
    .features-section .problem-solving .problem-text svg {
        width: 22px;
        height: 22px;
    }
    .features-section .problem-solving .the-solution {
        padding: 1rem;
    }
    .features-section .problem-solving .the-solution-name {
        font-size: 20px;
        gap: .5rem;
        margin-bottom: 0.5rem;
        margin-top: 0.5rem;
    }
    .features-section .problem-solving .the-solution-name .icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .features-section .problem-solving .the-solution-name .icon svg {
        width: 20px;
        height: 20px;
    }
    .features-section .problem-solving .solution-text {
        font-size: 14px;
        line-height: 26px;
    }
    .features-section .problem-solving > div {
        gap: 0.7rem;
    }
    .emplyee-section {
        padding: 3.5rem 0;
        margin-bottom: 3.5rem;
    }
    .emplyee-section .contents {
        gap: 3%;
    }
    .emplyee-section .contents .icon {
        width: 55px;
        height: 55px;
    }
    .emplyee-section .contents .icon svg {
        width: 28px;
        height: 28px;
    }
    .emplyee-section .contents .name {
        font-size: 18px;
    }
    .emplyee-section .contents .text {
        font-size: 16px;
        line-height: 32px;
    }
    .dqq-section {
        padding: 3rem;
    }
    .dqq-section .title {
        font-size: 33px;
        line-height: 160%;
        width: 80%;
    }
    .dqq-section .desc {
        font-size: 16px;
        line-height: 38px;
        margin: 1.5rem auto;
    }
    .dqq-section a {
        font-size: 15px;
        padding: .8rem 1.3rem;
    }
    .anther-features {
        padding: 2rem;
        gap: 2rem;
        margin: 5rem 0;
    }
    .anther-features p {
        font-size: 16px;
    }
    .anther-features a {
        font-size: 15px;
        padding: .1rem 1.2rem;
        line-height: 42px;
    }
    .anther-features a > svg:first-child {
        width: 20px;
        height: 20px;
    }
    .workflows-section {
        margin: 3.5rem 0;
    }
    .workflows-section .workflow-element {
        padding: 3.5rem 4rem;
        border-radius: 24px;
        margin-top: 2.5rem;
    }
    .workflows-section .workflow-element .chip {
        font-size: 13px;
        padding: .4rem 1rem;
    }
    .workflows-section .workflow-element .title {
        font-size: 24px;
    }
    .workflows-section .workflow-element .desc {
        font-size: 14px;
        line-height: 28px;
    }
    .workflows-section .workflow-element .steps {
        gap: 1.2rem;
    }
    .workflows-section .workflow-element .steps .icon {
        width: 90px;
        height: 60px;
        border-radius: 35px;
    }
    .workflows-section .workflow-element .steps .name {
        font-size: 16px;
    }
    .workflows-section .workflow-element .steps .value {
        font-size: 14px;
        line-height: 28px;
    }
    .automations-steps {
        margin: 4rem 0;
    }
    .automations-steps .steps {
        gap: 2rem;
        padding: 2rem 3rem;
    }
    .automations-steps .steps .step .number {
        font-size: 100px;
    }
    .automations-steps .steps .step .icon svg {
        width: 45px;
        height: 45px;
    }
    .automations-steps .steps .step .name {
        font-size: 24px;
    }
    .automations-steps .steps .step .value {
        font-size: 17px;
        line-height: 34px;
    }
    .msg-watsap {
        margin: 4rem 0;
        padding: 2.5rem 2.5rem 2.5rem 0;
        gap: 2.5rem;
        border-radius: 24px;
    }
    .msg-watsap .chip {
        font-size: 16px;
        padding: .3rem 1rem;
    }
    .msg-watsap .name {
        font-size: 28px;
        margin-bottom: .7rem;
    }
    .msg-watsap .value {
        font-size: 15px;
        line-height: 34px;
    }
}

/* 991px - iPad / Tablet */
@media (max-width: 991px) {
    .hero-section .chip-title {
        font-size: 15px;
        margin: 1rem auto 0;
    }
    .hero-section .title {
        font-size: 38px;
        width: 85%;
    }
    .hero-section .desc {
        font-size: 16px;
        line-height: 34px;
        margin-bottom: 1.2rem;
        width: 85%;
    }
    .hero-section .analysis {
        gap: 1.5rem;
        margin-bottom: 1.2rem;
    }
    .hero-section .analysis .value {
        font-size: 24px;
    }
    .hero-section .analysis .name {
        font-size: 14px;
    }
    .hero-section .go-down {
        font-size: 13px;
        padding: .5rem 1rem .5rem 2.2rem;
    }
    [dir="ltr"] .hero-section .go-down {
        padding: .5rem 2.2rem .5rem 1rem;
    }
    .features-section {
        padding: 2rem 0;
    }
    .title {
        font-size: 24px;
    }
    .desc {
        font-size: 14px;
        line-height: 28px;
        width: 95%;
        margin: 0 auto 1.5rem;
    }
    .features-section .problem-solving {
        flex-direction: column;
        gap: 2rem;
        margin: 6rem 0;
    }
    .features-section .problem-solving > div {
        width: 100%;
    }
    .features-section .problem-solving > div:has(> img) {
        order: 2;
    }
    .features-section .problem-solving > div > img {
        animation: imgFloatY 4s ease-in-out infinite;
    }
    .features-section .problem-solving .problem-text {
        font-size: 16px;
    }
    .features-section .problem-solving .the-solution-name {
        font-size: 22px;
    }
    .features-section .problem-solving .solution-text {
        font-size: 15px;
        line-height: 30px;
    }
    .emplyee-section {
        padding: 3rem 0;
        margin-bottom: 3rem;
    }
    .emplyee-section .contents {
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
    }
    .emplyee-section .contents > div:first-of-type,
    .emplyee-section .contents > div:last-of-type {
        width: 100%;
        flex-direction: row;
        gap: 2rem;
    }
    .emplyee-section .contents > div:nth-of-type(2) {
        width: 50%;
        order: -1;
    }
    .emplyee-section .contents .icon {
        width: 50px;
        height: 50px;
    }
    .emplyee-section .contents .icon svg {
        width: 25px;
        height: 25px;
    }
    .emplyee-section .contents .name {
        font-size: 16px;
    }
    .emplyee-section .contents .text {
        font-size: 14px;
        line-height: 28px;
    }
    .dqq-section {
        padding: 2.5rem;
        margin: 3rem 0;
        border-radius: 20px;
        animation: dqqGradientShift 8s ease-in-out infinite;
    }
    .dqq-section::before {
        animation: none;
    }
    .dqq-section::after {
        animation: none;
    }
    .dqq-section a {
        animation: none;
    }
    .dqq-section a svg {
        animation: dqqArrowNudge 2.5s ease-in-out infinite;
    }
    .dqq-section .title {
        font-size: 28px;
        line-height: 155%;
        width: 90%;
    }
    .dqq-section .desc {
        font-size: 16px;
        line-height: 34px;
        margin: 1.2rem auto;
    }
    .dqq-section a {
        font-size: 14px;
        padding: .7rem 1.2rem;
    }
    .dqq-section a svg {
        width: 22px;
        height: 22px;
    }
    .anther-features {
        padding: 1.5rem;
        gap: 1rem;
        margin: 3rem 0;
        flex-wrap: wrap;
        animation: antherBgShift 8s ease-in-out infinite;
    }
    .anther-features::after {
        animation: none;
    }
    .anther-features.animate-on-scroll.animated a:nth-child(2),
    .anther-features.animate-on-scroll.animated a:nth-child(3),
    .anther-features.animate-on-scroll.animated a:nth-child(4),
    .anther-features.animate-on-scroll.animated a:nth-child(5) {
        animation: none;
    }
    .anther-features.animate-on-scroll.animated a > svg:first-child {
        animation: none;
    }
    .anther-features p {
        font-size: 15px;
        width: 100%;
    }
    .anther-features a {
        font-size: 13px;
        padding: .1rem 1rem;
        line-height: 38px;
    }
    .anther-features a > svg:first-child {
        width: 18px;
        height: 18px;
    }
    .anther-features a > svg:last-child {
        width: 14px;
        height: 14px;
    }
    .workflows-section {
        margin: 3rem 0;
    }
    .workflows-section .workflow-element {
        padding: 2.5rem 2rem;
        border-radius: 20px;
        margin-top: 2rem;
    }
    .workflows-section .workflow-element .chip {
        font-size: 12px;
        padding: .4rem 1rem;
    }
    .workflows-section .workflow-element .title {
        font-size: 22px;
    }
    .workflows-section .workflow-element .desc {
        font-size: 13px;
        line-height: 26px;
    }
    .workflows-section .workflow-element .steps {
        flex-direction: column;
        gap: 0;
    }
    .workflows-section .workflow-element .steps > div:not(.image) {
        flex-shrink: unset;
    }
    .workflows-section .workflow-element .steps .image {
        flex: unset;
        width: 60px;
        height: auto;
        transform: rotate(90deg);
        margin: 0.5rem auto;
    }
    .workflows-section .workflow-element .steps .icon {
        width: 80px;
        height: 55px;
        border-radius: 30px;
    }
    .workflows-section .workflow-element .steps .icon svg {
        width: 30px;
        height: 30px;
    }
    .workflows-section .workflow-element .steps .name {
        font-size: 16px;
    }
    .workflows-section .workflow-element .steps .value {
        font-size: 13px;
        line-height: 26px;
    }
    .automations-steps {
        margin: 3rem 0;
    }
    .automations-steps .steps {
        flex-direction: column;
        gap: 0;
        padding: 2rem;
    }
    .automations-steps .steps .step {
        padding: 2rem 0;
    }
    .automations-steps .steps .line {
        width: 60%;
        height: 1px;
        min-height: 1px;
        align-self: center;
        flex-shrink: 0;
    }
    .automations-steps .steps .step .number {
        font-size: 80px;
    }
    .automations-steps .steps .step .icon svg {
        width: 40px;
        height: 40px;
    }
    .automations-steps .steps .step .name {
        font-size: 22px;
    }
    .automations-steps .steps .step .value {
        font-size: 16px;
        line-height: 30px;
    }
    .msg-watsap {
        margin: 3rem 0;
        flex-direction: column;
        padding: 2rem 2rem 0;
        gap: 2rem;
        border-radius: 20px;
        text-align: center;
        overflow: hidden;
    }
    .msg-watsap > img {
        width: 70%;
        display: block;
        margin: 0 auto;
    }
    .msg-watsap .chip {
        font-size: 15px;
        margin: 0 auto 1rem;
    }
    .msg-watsap .name {
        font-size: 24px;
    }
    .msg-watsap .value {
        font-size: 15px;
        line-height: 32px;
        text-align: center;
    }
}

/* 768px - iPad portrait */
@media (max-width: 768px) {
    .hero-section {
        padding: 6rem 0 3rem;
    }
    .hero-section .chip-title {
        font-size: 14px;
    }
    .hero-section .title {
        font-size: 32px;
        width: 90%;
    }
    .hero-section .desc {
        font-size: 15px;
        line-height: 30px;
        width: 90%;
    }
    .hero-section .analysis .value {
        font-size: 22px;
    }
    .hero-section .analysis .name {
        font-size: 13px;
    }
    .title{
        font-size: 22px;
    }
    .desc {
        font-size: 13px;
        line-height: 26px;
    }
    .features-section .problem-solving .the-solution-name {
        font-size: 20px;
    }
    .features-section .problem-solving .the-solution-name .icon {
        width: 38px;
        height: 38px;
        min-width: 38px;
    }
    .features-section .problem-solving .solution-text {
        font-size: 14px;
        line-height: 28px;
    }
    .dqq-section {
        padding: 2rem 1.5rem;
        margin: 2.5rem 0;
        border-radius: 18px;
    }
    .dqq-section .title {
        font-size: 24px;
        line-height: 150%;
        width: 95%;
    }
    .dqq-section .desc {
        font-size: 15px;
        line-height: 30px;
        margin: 1rem auto;
    }
    .dqq-section a {
        font-size: 14px;
        padding: .7rem 1.1rem;
    }
    .dqq-section a svg {
        width: 20px;
        height: 20px;
    }
    .automations-steps .steps {
        padding: 1.5rem;
        border-radius: 20px;
    }
    .automations-steps .steps .step .number {
        font-size: 70px;
    }
    .automations-steps .steps .step .icon svg {
        width: 36px;
        height: 36px;
    }
    .automations-steps .steps .step .icon {
        margin-bottom: 1.5rem;
    }
    .automations-steps .steps .step .name {
        font-size: 20px;
    }
    .automations-steps .steps .step .value {
        font-size: 15px;
        line-height: 28px;
    }
    .msg-watsap {
        padding: 1.5rem 1.5rem 0;
        border-radius: 16px;
    }
    .msg-watsap > img {
        width: 80%;
    }
    .msg-watsap .chip {
        font-size: 14px;
        padding: .3rem 1rem;
    }
    .msg-watsap .name {
        font-size: 22px;
    }
    .msg-watsap .value {
        font-size: 14px;
        line-height: 28px;
    }
}

/* 576px - Phone */
@media (max-width: 576px) {
    .hero-section {
        padding: 5rem 0 2rem;
    }
    .hero-section .chip-title {
        font-size: 13px;
        margin-bottom: 1rem;
        gap: .3rem;
    }
    .hero-section .chip-title svg {
        width: 18px;
        height: 18px;
    }
    .hero-section .title {
        font-size: 26px;
        width: 95%;
    }
    .hero-section .desc {
        font-size: 14px;
        line-height: 26px;
        margin-bottom: 2rem;
        width: 95%;
    }
    .hero-section .analysis {
        gap: 1rem;
        margin-bottom: 2rem;
    }
    .hero-section .analysis .value {
        font-size: 20px;
    }
    .hero-section .analysis .name {
        font-size: 12px;
    }
    .hero-section .go-down {
        font-size: 12px;
        padding: .5rem .8rem .5rem 2rem;
    }
    [dir="ltr"] .hero-section .go-down {
        padding: .5rem 2rem .5rem .8rem;
    }
    .title {
        font-size: 20px;
    }
    .desc {
        font-size: 13px;
        line-height: 24px;
        width: 100%;
    }
    .features-section .problem-solving .name {
        font-size: 13px;
    }
    .features-section .problem-solving .problem-text {
        font-size: 14px;
    }
    .features-section .problem-solving .problem-text svg {
        width: 20px;
        height: 20px;
    }
    .features-section .problem-solving .the-solution {
        padding: .8rem;
    }
    .features-section .problem-solving .the-solution-name {
        font-size: 18px;
        gap: .4rem;
    }
    .features-section .problem-solving .the-solution-name .icon {
        width: 35px;
        height: 35px;
        min-width: 35px;
    }
    .features-section .problem-solving .the-solution-name .icon svg {
        width: 18px;
        height: 18px;
    }
    .features-section .problem-solving .solution-text {
        font-size: 13px;
        line-height: 24px;
    }
    .emplyee-section {
        padding: 2rem 0;
        margin-bottom: 2rem;
    }
    .emplyee-section .contents {
        gap: 2rem;
    }
    .emplyee-section .contents > div:first-of-type,
    .emplyee-section .contents > div:last-of-type {
        flex-direction: column;
        gap: 1.5rem;
    }
    .emplyee-section .contents > div:nth-of-type(2) {
        width: 65%;
    }
    .emplyee-section .contents .icon {
        width: 45px;
        height: 45px;
    }
    .emplyee-section .contents .icon svg {
        width: 22px;
        height: 22px;
    }
    .emplyee-section .contents .name {
        font-size: 15px;
        line-height: 150%;
    }
    .emplyee-section .contents .text {
        font-size: 13px;
        line-height: 24px;
    }
    .dqq-section {
        padding: 1.5rem 1.2rem;
        margin: 2rem 0;
        border-radius: 15px;
    }
    .dqq-section .title {
        font-size: 20px;
        line-height: 150%;
        width: 100%;
    }
    .dqq-section .desc {
        font-size: 13px;
        line-height: 26px;
        margin: .8rem auto;
    }
    .dqq-section a {
        font-size: 13px;
        padding: .6rem 1rem;
        border-radius: 8px;
    }
    .dqq-section a svg {
        width: 18px;
        height: 18px;
    }
    .anther-features {
        padding: 1.2rem;
        gap: .8rem;
        margin: 2rem 0;
        border-radius: 12px;
    }
    .anther-features p {
        font-size: 13px;
    }
    .anther-features a {
        font-size: 12px;
        padding: .1rem .8rem;
        line-height: 34px;
        gap: .4rem;
    }
    .anther-features a > svg:first-child {
        width: 16px;
        height: 16px;
    }
    .anther-features a > svg:last-child {
        width: 12px;
        height: 12px;
    }
    .automations-steps {
        margin: 2rem 0;
    }
    .automations-steps .steps {
        padding: 1.2rem;
        border-radius: 16px;
        gap: 0;
    }
    .automations-steps .steps .step {
        padding: 1.5rem 0;
    }
    .automations-steps .steps .line {
        width: 50%;
    }
    .automations-steps .steps .step .number {
        font-size: 55px;
    }
    .automations-steps .steps .step .icon {
        margin-bottom: 1rem;
    }
    .automations-steps .steps .step .icon svg {
        width: 30px;
        height: 30px;
    }
    .automations-steps .steps .step .name {
        font-size: 17px;
    }
    .automations-steps .steps .step .value {
        font-size: 13px;
        line-height: 24px;
    }
    .msg-watsap {
        margin: 2rem 0;
        padding: 1.2rem 1.2rem 0;
        gap: 1.5rem;
        border-radius: 12px;
    }
    .msg-watsap > img {
        width: 90%;
    }
    .msg-watsap .chip {
        font-size: 13px;
        padding: .25rem .8rem;
    }
    .msg-watsap .name {
        font-size: 18px;
        margin-bottom: .5rem;
    }
    .msg-watsap .value {
        font-size: 13px;
        line-height: 24px;
    }
}