/* =====================================================
   CLOUD SOLUTIONS PAGE
   PART 4B
===================================================== */

:root {
    --pink: #f5386d;
    --orange: #ff8a1e;
    --gradient: linear-gradient(90deg, #f5386d 0%, #ff8a1e 100%);
    --dark: #1a1a2e;
    --gray: #666;
    --light: #fff8f8;
    --iconBg: #fff3f5;
}

/* =====================================
   HERO
===================================== */

.cloud-hero {
    padding-top: 20px;
    background: transparent;
    overflow: hidden;
}

.cloud-hero h1 {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    margin: 20px 0;
    color: var(--dark);
}

.cloud-hero h1 span,
.h1_span {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cloud-hero p {
    font-size: 17px;
    color: #666;
    line-height: 30px;
    margin-bottom: 35px;
    max-width: 550px;
}

.section-tag {
    display: inline-block;
    /* padding: 8px 18px; */
    /* border-radius: 40px; */
    /* background: #ffe6ec; */
    color: var(--pink);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 50px;
}

.btn-gradient {
    background: var(--gradient);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-weight: 600;
    transition: .35s;
}

.btn-gradient:hover {
    transform: translateY(-3px);
    color: #fff;
    box-shadow: 0 15px 30px rgba(245, 56, 109, .25);
}

.btn-outline-brand {
    border: 2px solid var(--pink);
    color: var(--pink);
    border-radius: 10px;
    padding: 14px 28px;
    font-weight: 600;
    transition: .35s;
}

.btn-outline-brand:hover {
    background: var(--gradient);
    border-color: transparent;
    color: #fff;
}

/* =====================================
   HERO FEATURES
===================================== */

/* =====================================
   HERO FEATURES
===================================== */

.hero-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    max-width: 650px;
}


/* =====================================
   FEATURE ITEM
===================================== */

.feature-item {
    position: relative;

    /* display: flex; */
    align-items: center;
    gap: 12px;

    padding: 14px 16px;

    border: 1px solid rgba(245, 56, 109, 0.12);
    border-radius: 16px;

    background: rgba(255, 255, 255, 0.75);

    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.04);

    backdrop-filter: blur(8px);

    transition:
        transform 0.4s cubic-bezier(.34, 1.56, .64, 1),
        box-shadow 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease;

    overflow: hidden;

    cursor: pointer;
}


/* Shine effect */

.feature-item::before {
    content: "";

    position: absolute;

    top: 0;
    left: -120%;

    width: 80%;
    height: 100%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,0.7),
        transparent
    );

    transform: skewX(-20deg);

    transition: left 0.7s ease;
}

.feature-item:hover::before {
    left: 140%;
}


/* Hover */

.feature-item:hover {
    transform: translateY(-8px);

    background: linear-gradient(
        135deg,
        #ffffff,
        #fff5f8
    );

    border-color: rgba(245, 56, 109, 0.25);

    box-shadow:
        0 15px 35px rgba(245, 56, 109, 0.12),
        0 5px 12px rgba(0, 0, 0, 0.04);
}


/* =====================================
   FEATURE CIRCLE
===================================== */

.feature-circle {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: linear-gradient(
        135deg,
        #fff0f4,
        #ffffff
    );

    border: 1px solid rgba(245, 56, 109, 0.15);

    color: #f5386d;

    font-size: 18px;

    position: relative;
    z-index: 2;

    box-shadow:
        0 6px 18px rgba(245, 56, 109, 0.10);

    transition:
        transform 0.45s cubic-bezier(.34, 1.56, .64, 1),
        background 0.4s ease,
        color 0.3s ease,
        box-shadow 0.4s ease;
}


/* Circle outer ring */

.feature-circle::before {
    content: "";

    position: absolute;

    inset: -5px;

    border-radius: 50%;

    border: 1px solid rgba(245, 56, 109, 0.12);

    opacity: 0;

    transform: scale(0.7);

    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}


/* Icon hover */

.feature-item:hover .feature-circle {
    transform: scale(1.12) rotate(-8deg);

    background: linear-gradient(
        135deg,
        #f5386d,
        #ff7b9d
    );

    color: #fff;

    box-shadow:
        0 10px 25px rgba(245, 56, 109, 0.30);
}

.feature-item:hover .feature-circle::before {
    opacity: 1;
    transform: scale(1);
}


/* =====================================
   FEATURE TEXT
===================================== */

.feature-item span {
    color: #333;

    font-size: 13px;

    line-height: 1.35;

    font-weight: 700;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.feature-item:hover span {
    color: #f5386d;

    transform: translateX(3px);
}


/* =====================================
   ICON PULSE
===================================== */

.feature-circle i {
    transition: transform 0.4s ease;
}

.feature-item:hover .feature-circle i {
    transform: scale(1.15);
}


/* =====================================
   ENTRY ANIMATION
===================================== */

.hero-features .feature-item {
    opacity: 0;
    animation: featureReveal 0.8s ease forwards;
}

.hero-features .feature-item:nth-child(1) {
    animation-delay: 0.3s;
}

.hero-features .feature-item:nth-child(2) {
    animation-delay: 0.5s;
}

.hero-features .feature-item:nth-child(3) {
    animation-delay: 0.7s;
}

.hero-features .feature-item:nth-child(4) {
    animation-delay: 0.9s;
}


@keyframes featureReveal {
    from {
        opacity: 0;
        transform: translateY(25px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* =====================================
   SUBTLE FLOATING
===================================== */

.hero-features .feature-item:nth-child(odd) {
    animation-name: featureReveal, featureFloat;
    animation-duration: 0.8s, 4s;
    animation-delay: 0.3s, 1.5s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, both;
}

.hero-features .feature-item:nth-child(even) {
    animation-name: featureReveal, featureFloat;
    animation-duration: 0.8s, 4s;
    animation-delay: 0.5s, 1.8s;
    animation-iteration-count: 1, infinite;
    animation-fill-mode: forwards, both;
}


@keyframes featureFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

    .hero-features {
        grid-template-columns: repeat(2, 1fr);

        max-width: 500px;

        margin-left: auto;
        margin-right: auto;
    }

    .feature-item {
        padding: 14px;
    }
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 575px) {

    .hero-features {
        grid-template-columns: repeat(2, 1fr);

        gap: 12px;

        width: 100%;
    }

    .feature-item {
        padding: 12px 10px;

        gap: 9px;

        border-radius: 14px;
    }

    .feature-circle {
        width: 42px;
        height: 42px;

        font-size: 15px;
    }

    .feature-item span {
        font-size: 11px;
    }

    .feature-item:hover {
        transform: translateY(-5px);
    }

    .btn-gradient{
        width: 100%;
    }

    .btn-outline-brand{
        width: 100%;
    }
}


/* =====================================
   REDUCED MOTION
===================================== */

@media (prefers-reduced-motion: reduce) {

    .hero-features .feature-item,
    .feature-circle,
    .feature-item {
        animation: none !important;
        transition: none !important;
    }
}

/* =====================================
   HERO IMAGE
===================================== */

.hero-image-wrapper {
    position: relative;
    text-align: center;
}

.hero-image {
    max-width: 100%;
    border-radius: 30px;
    max-height: 500px;
}

.floating-card {

    position: absolute;
    width: 220px;
    z-index: 2;
    background: #fff;
    border-radius: 18px;

    padding: 18px;

    display: flex;
    gap: 15px;

    align-items: flex-start;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .10);

    transition: .35s;
    text-align: left;

}

.floating-card:hover {

    transform: translateY(-6px);

}

.floating-card .icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: var(--iconBg);
    color: #f5386d;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    flex-shrink: 0;
}

.floating-card h6 {

    font-weight: 700;
    margin-bottom: 6px;

}

.floating-card small {
    color: #777;
    line-height: 16px;
    font-size: 13px;
}

.card-one {
    left: -40px;
}

.card-two {
    top: 30px;
    right: -20px;
}

.card-three {
    bottom: 80px;
    left: -30px;
}

.card-four {
    bottom: 80px;
    right: -30px;
}

/* =====================================
   SECTION TITLE
===================================== */

.section-heading {

    margin-bottom: 55px;

}

.section-heading h2 {

    font-size: 20px;
    font-weight: 800;
    color: var(--dark);

}

.title-line {

    width: 80px;
    height: 4px;

    background: var(--gradient);

    border-radius: 20px;

    margin-top: 10px;

}

/* =====================================
   SOLUTION CARDS
===================================== */

.solution-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    text-align: left;
    height: 100%;
    border: 1px solid #eee;
    transition: .35s;
    position: relative;
    padding-bottom: 40px;
}

.solution-card:hover {

    transform: translateY(-10px);

    box-shadow:
        0 20px 45px rgba(245, 56, 109, .12);

}

.solution-icon {
    width: 52px;
    height: 52px;
    border-radius: 22px;
    background: var(--iconBg);
    color: var(--pink);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    margin-bottom: 22px;
}

.solution-card h4 {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 18px;
}

.solution-card p {
    color: #666;
    line-height: 16px;
    margin-bottom: 10px;
    font-size: 13px;

}

.solution-card a {
    color: var(--pink);
    font-weight: 700;
    text-decoration: none;
    position: absolute;
    bottom: 20px;
    right: 20px;
}

.solution-card a i {

    margin-left: 6px;

}

/* ===========================
   CLOUD PROCESS
=========================== */

.cloud-process {
    padding: 80px 0;
    background: #fff;
}

.process-line {

    position: relative;
}

.process-line:before {

    content: "";

    position: absolute;

    top: 78px;

    left: 0%;
    right: 12%;

    border-top: 2px dashed #f8bfd0;

    z-index: 0;

}

.timeline-dot {

    position: absolute;

    width: 7px;
    height: 7px;

    background: #f8bfd0;

    border-radius: 50%;

    top: 27px;

    right: 25%;

    z-index: 2;
}

.timeline-dot-last {
    display: none;
}

.process-item {
    position: relative;
    z-index: 2;
    text-align: left;
}

.process-icon {

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background: #fff;

    color: #f5386d;

    font-size: 22px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}

.process-item:hover .process-icon {

    color: #fff;

    /* transform:translateY(-6px); */

}

.step {

    color: #666;

    font-size: 13px;

    font-weight: 600;

    margin-top: 25px;

}

.process-item h5 {

    font-size: 15px;

    margin: 6px 0;

    font-weight: 700;

}

.process-item p {

    font-size: 13px;

    color: #666;

    line-height: 1.8;

}

/* =====================================
   CLOUD PLATFORMS
===================================== */

.cloud-platforms {

    background: #fff;

}

.platform-wrapper {

    background: #fff;

    padding: 5px 20px;

    border-radius: 25px;

}

.platform-logo {

    max-height: 55px;

    opacity: .8;

    transition: .35s;

}

.platform-logo:hover {

    opacity: 1;

    transform: scale(1.08);

}

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

@media(max-width:991px) {

    .process-line:before,
    .timeline-dot {
        display: none;
    }

    .cloud-hero {

        text-align: center;

    }

    .hero-buttons {

        justify-content: center;

    }

    .hero-features {

        margin-top: 35px;

    }

    .hero-image-wrapper {

        margin-top: 0px;

    }

    .floating-card {

        position: static;
        width: 100%;
        margin-bottom: 20px;

    }

}

@media(max-width:767px) {

    .cloud-hero {

        padding-top: 70px;

    }

    .cloud-hero h1 {

        font-size: 25px;

    }

    .hero-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .solution-card {

        padding: 30px 22px;

    }

    .platform-wrapper {

        padding: 25px;

    }

}

/* =====================================
   PROCESS SECTION - PROFESSIONAL STYLE
===================================== */

.process-line {
    position: relative;
    padding: 20px 0 10px;
}

/* Timeline */
.process-line:before {
    content: "";
    position: absolute;
    top: 47px;
    left: 4%;
    right: 4%;
    height: 2px;

    background: repeating-linear-gradient(
        to right,
        #f8bfd0 0px,
        #f8bfd0 8px,
        transparent 8px,
        transparent 15px
    );

    z-index: 0;
    opacity: 0.9;

    animation: timelineMove 2s linear infinite;
}

@keyframes timelineMove {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 30px 0;
    }
}


/* =====================================
   PROCESS ITEM
===================================== */

.process-item {
    position: relative;
    z-index: 2;

    text-align: left;

    padding: 0 12px 25px;

    border: 1px solid transparent;
    border-radius: 18px;

    transition:
        transform 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease,
        background 0.45s ease;

    background: rgba(255, 255, 255, 0.85);
}


/* Hover Card */

.process-item:hover {
    transform: translateY(-10px);

    background: linear-gradient(
        145deg,
        #ffffff 0%,
        #fff6f9 100%
    );

    border-color: rgba(245, 56, 109, 0.18);

    box-shadow:
        0 15px 35px rgba(245, 56, 109, 0.12),
        0 5px 15px rgba(0, 0, 0, 0.05);
}


/* =====================================
   PROCESS ICON
===================================== */

.process-icon {
    width: 58px;
    height: 58px;

    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #ffffff,
        #fff1f5
    );

    border: 1px solid rgba(245, 56, 109, 0.15);

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 18px;

    position: relative;
    z-index: 5;

    box-shadow:
        0 8px 20px rgba(245, 56, 109, 0.10);

    transition:
        transform 0.5s cubic-bezier(.34,1.56,.64,1),
        box-shadow 0.4s ease,
        background 0.4s ease;
}


/* Icon Image */

.process-icon img {
    width: 32px;
    height: 32px;

    object-fit: contain;

    transition:
        transform 0.5s ease,
        filter 0.4s ease;
}


/* Icon Hover */

.process-item:hover .process-icon {
    transform: translateY(-5px) scale(1.08);

    background: linear-gradient(
        135deg,
        #f5386d,
        #ff7b9d
    );

    box-shadow:
        0 12px 28px rgba(245, 56, 109, 0.28);
}

.process-item:hover .process-icon img {
    transform: rotate(8deg) scale(1.12);

    filter: brightness(0) invert(1);
}


/* =====================================
   ICON OUTER GLOW
===================================== */

.process-icon:before {
    content: "";

    position: absolute;

    width: 100%;
    height: 100%;

    border-radius: 50%;

    border: 1px solid rgba(245, 56, 109, 0.18);

    transform: scale(1);

    opacity: 0;

    transition:
        transform 0.5s ease,
        opacity 0.5s ease;
}

.process-item:hover .process-icon:before {
    transform: scale(1.3);
    opacity: 1;
}


/* =====================================
   TIMELINE DOT
===================================== */

.timeline-dot {
    position: absolute;

    width: 9px;
    height: 9px;

    background: #f5386d;

    border: 2px solid #fff;

    border-radius: 50%;

    top: 23px;
    right: 21%;

    z-index: 6;

    box-shadow:
        0 0 0 4px rgba(245, 56, 109, 0.10),
        0 0 15px rgba(245, 56, 109, 0.35);

    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.process-item:hover .process-icon{
    margin-top: 15px;
}

/* Dot Hover */

.process-item:hover .timeline-dot {
    transform: scale(1.6);

    box-shadow:
        0 0 0 6px rgba(245, 56, 109, 0.12),
        0 0 25px rgba(245, 56, 109, 0.55);
}


/* =====================================
   STEP TEXT
===================================== */

.step {
    display: inline-flex;
    align-items: center;

    color: #f5386d;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;

    margin-top: 3px;
    margin-bottom: 6px;

    position: relative;

    transition: 0.3s ease;
}


/* Small line before Step */

.step:before {
    content: "";

    width: 18px;
    height: 2px;

    background: #f5386d;

    margin-right: 7px;

    border-radius: 10px;

    transition: width 0.3s ease;
}

.process-item:hover .step:before {
    width: 28px;
}


/* =====================================
   HEADING
===================================== */

.process-item h5 {
    font-size: 16px;

    color: #222;

    margin: 6px 0 8px;

    font-weight: 700;

    line-height: 1.4;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.process-item:hover h5 {
    color: #f5386d;

    transform: translateX(3px);
}


/* =====================================
   DESCRIPTION
===================================== */

.process-item p {
    font-size: 13px;

    color: #707070;

    line-height: 1.8;

    margin-bottom: 0;

    transition:
        color 0.3s ease;
}

.process-item:hover p {
    color: #555;
}


/* =====================================
   FLOATING EFFECT
===================================== */

.process-icon {
    animation: processFloat 4s ease-in-out infinite;
}

.process-item:nth-child(2) .process-icon {
    animation-delay: .4s;
}

.process-item:nth-child(3) .process-icon {
    animation-delay: .8s;
}

.process-item:nth-child(4) .process-icon {
    animation-delay: 1.2s;
}

.process-item:nth-child(5) .process-icon {
    animation-delay: 1.6s;
}

.process-item:nth-child(6) .process-icon {
    animation-delay: 2s;
}

@keyframes processFloat {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-4px);
    }
}


/* Stop floating while hovering */

.process-item:hover .process-icon {
    animation-play-state: paused;
}


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

@media (max-width: 991px) {

    .process-line {
        padding-top: 10px;
    }

    .process-line:before,
    .timeline-dot {
        display: none;
    }

    .process-item {
        padding: 20px;

        height: 100%;
    }

    .process-item:hover {
        transform: translateY(-7px);
    }

    .process-icon {
        margin-bottom: 15px;
    }
}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {

    .process-line {
        padding: 10px 0;
    }

    .process-item {
        padding: 18px 14px;
        border: 1px dashed pink;
        border-radius: 16px;
    }

    .process-icon {
        width: 52px;
        height: 52px;
    }

    .process-icon img {
        width: 29px;
        height: 29px;
    }

    .process-item h5 {
        font-size: 14px;
    }

    .process-item p {
        font-size: 12px;
        line-height: 1.7;
    }

    .step {
        font-size: 11px;
    }
}


/* =====================================
   REDUCED MOTION
===================================== */

@media (prefers-reduced-motion: reduce) {

    .process-line:before,
    .process-icon {
        animation: none;
    }

    .process-item,
    .process-icon,
    .process-icon img {
        transition: none;
    }
}

/* =====================================================
   WHY CHOOSE US
===================================================== */

.why-cloud {
    padding: 90px 0;
    /* background: #fff8f8; */
}

.why-card {
    background: #fff8f8;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 15px 45px rgba(0, 0, 0, .06);
    height: 100%;
}

.why-card h2 {
    /* font-size: 20px; */
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 30px;
}

.why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.why-list li {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 5px;
    font-size: 18px;
    color: #555;
}

.why-list i {
    color: var(--pink);
    font-size: 27px;
    margin-top: 4px;
}

/* ====================================
   STATS
==================================== */

.stats-card {

    background: #ffe6ec;

    border-radius: 24px;

    padding: 45px;

    text-align: center;

    box-shadow: 0 15px 45px rgba(0, 0, 0, .06);

    height: 100%;

}

.stats-image {

    max-width: 100%;
    margin-bottom: 20px;

}

.stats-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 30px;
    color: var(--dark);
    text-align: left;
}

.stat-box {
    text-align: left;
}

.stat-box h2 {
    font-size: 35px;
    font-weight: 800;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-box span {
    color: #666;
    display: block;
    font-size: 13px;
    font-weight: 600;
}

/*=================================
TESTIMONIALS
==================================*/

.testimonials-section {
    background: #fff;
    position: relative;
    padding: 80px 0;
}

.testimonial-card {

    max-width: 900px;
    margin: auto;

    /* background:#fff; */

    border-radius: 18px;

    /* box-shadow:0 8px 30px rgba(0,0,0,.07); */

    padding: 35px 45px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}

.testimonial-left {

    display: flex;

    align-items: flex-start;

    gap: 25px;

    flex: 1;

}

.quote {

    color: #ff2b7b;

    font-size: 50px;

    line-height: 1;

    flex-shrink: 0;

}

.testimonial-left p {

    margin: 0;

    font-size: 16px;

    color: #555;

}

.testimonial-right {

    display: flex;

    align-items: center;

    gap: 18px;

}

.testimonial-right img {

    width: 90px;

    height: 90px;

    border-radius: 50%;

    object-fit: cover;

}

.client-details h5 {

    margin-bottom: 5px;

    font-size: 20px;

    font-weight: 700;

}

.client-details span {

    display: block;

    color: #666;

    margin-bottom: 10px;

    font-size: 15px;

}

.stars {

    color: #ffb400;

    font-size: 15px;

}

.carousel-indicators {

    bottom: 0;
    position: relative;
    margin: 0;

}

.carousel-indicators button {

    width: 20px !important;

    height: 0px !important;

    border-radius: 50%;

    background: #ffd3e2 !important;

    border: none;

    opacity: 1;

    margin: 0 5px;

}

.carousel-indicators .active {

    background: #ff2b7b !important;

}

/* Previous Button */

.carousel-control-prev {

    width: 55px;

    left: -70px;

    opacity: 1;

}

/* Next Button */

.carousel-control-next {

    width: 55px;

    right: -70px;

    opacity: 1;

}

/* Responsive */

@media(max-width:768px) {

    .testimonial-card {

        flex-direction: column;

        text-align: center;

        padding: 30px;

    }

    .testimonial-left {

        flex-direction: column;

        align-items: center;

    }

    .testimonial-right {

        flex-direction: column;

    }

    .carousel-control-prev {

        left: 0;

    }

    .carousel-control-next {

        right: 0;

    }

}

.client-info {

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 18px;

}

.client-info img {

    width: 70px;
    height: 70px;

    border-radius: 50%;

    object-fit: cover;

}

.client-info h5 {

    margin-bottom: 5px;

    font-weight: 700;

}

.client-info span {

    color: #777;

    font-size: 14px;

}

.carousel-control-prev,
.carousel-control-next {

    width: 55px;
    height: 55px;

    background: var(--gradient);

    border-radius: 50%;

    top: 50%;

    transform: translateY(-50%);

    opacity: 1;

}

.carousel-control-prev {

    left: -70px;

}

.carousel-control-next {

    right: -70px;

}

.carousel-control-prev-icon,
.carousel-control-next-icon {

    width: 18px;
    height: 18px;

}

/* ====================================
   CTA
==================================== */

.cta-wrapper {

    background: var(--gradient);

    color: #fff;

    border-radius: 10px;

    padding: 20px 60px;

    overflow: hidden;

    position: relative;

}

.cta-wrapper::before {

    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    background: rgba(255, 255, 255, .08);

    border-radius: 50%;

    right: -120px;
    top: -120px;

}

.cta-icon {
    background: #fff;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    font-size: 35px;
    color: var(--pink);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
}

.cta-wrapper h2 {
    font-size: 25px;
    font-weight: 500;
}

.cta-wrapper p {
    opacity: .95;
    max-width: 700px;
    margin: 0;
}

.cloud-cta .btn {
    font-weight: 700;
    padding: 15px 32px;
    transition: .35s;
    border-radius: 10px !important;
    font-size: 16px;
    color: var(--pink);
}

.cloud-cta .btn:hover {

    transform: translateY(-3px);

}

/* ====================================
   ANIMATIONS
==================================== */

.solution-card,
.process-item,
.platform-logo,
.why-card,
.stats-card,
.testimonial-card,
.cta-wrapper {

    transition: .35s ease;

}

.solution-card:hover,
.why-card:hover,
.stats-card:hover,
.testimonial-card:hover {

    transform: translateY(-8px);

}

.platform-logo:hover {

    transform: scale(1.08);

}

.process-item:hover .process-icon {

    transform: scale(1.08);

}

.carousel-inner {
    padding: 20px 10px;
}

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

@media(max-width:1200px) {

    .carousel-control-prev {

        left: -20px;

    }

    .carousel-control-next {

        right: -20px;

    }

}

@media(max-width:991px) {

    .why-card,
    .stats-card {

        padding: 20px;

    }

    .cta-wrapper {

        padding: 45px;

        text-align: center;

    }

    .cta-wrapper h2 {

        font-size: 20px;

    }

    .carousel-control-prev,
    .carousel-control-next {

        display: none;

    }

}

@media(max-width:767px) {

    .why-cloud {

        padding: 70px 0;

    }

    .why-card {

        padding: 28px;

    }

    .why-card h2 {

        font-size: 20px;

    }

    .stats-card {

        padding: 30px;

    }

    .stats-card h3 {

        font-size: 24px;

    }

    .stat-box h2 {

        font-size: 32px;

    }

    .testimonial-card {

        padding: 30px 22px;

    }

    .testimonial-card p {

        font-size: 14px;

    }

    .client-info {

        flex-direction: column;

    }

    .cta-wrapper {

        padding: 35px 25px;

    }

    .cta-wrapper h2 {

        font-size: 20px;

    }

    .cta-wrapper p {

        font-size: 15px;

        line-height: 28px;

    }

}

.platformSwiper {
    overflow: hidden;
}

.swiper-wrapper {
    align-items: center;
}

.platformSwiper .swiper-slide {

    display: flex;

    justify-content: center;

    padding: 5px 0;

    align-items: center;

    border: 1px solid #f1e7ea;
    border-radius: 16px;
    background: #fffafa;

}

.platformSwiper .swiper-slide:hover {

    box-shadow: 0 12px 30px rgba(245, 56, 109, .08);

}

.platform-logo {

    max-width: 140px;

    transition: .35s;

    /* filter:grayscale(100%); */

}

.platform-logo:hover {

    filter: none;

    transform: scale(1.08);

}

/* =====================================================
   MOBILE TESTIMONIAL
===================================================== */

.mobile-testimonials {

    padding: 0;

    background: #fff;

}

.mobile-testimonials #testimonialCarousel {

    padding: 0 75px;

}


/* =====================================================
   CARD
===================================================== */

.mobile-testimonial-card {

    max-width: 1050px;

    min-height: 120px;

    margin: auto;

    padding: 20px 35px;

    background: linear-gradient(90deg,
            #fffafa 0%,
            #fff6f8 50%,
            #fffafa 100%);

    border: 1px solid #f7edef;

    border-radius: 14px;

    display: grid;

    grid-template-columns: 70px 1fr 280px;

    align-items: center;

    gap: 20px;

    box-shadow: 0 8px 25px rgba(0, 0, 0, .035);

}


/* =====================================================
   QUOTE
===================================================== */

.testimonial-quote {

    display: flex;

    align-items: center;

    justify-content: center;

}

.testimonial-quote i {

    font-size: 38px;

    color: var(--pink);

}


/* =====================================================
   TEXT
===================================================== */

.testimonial-text p {

    margin: 0;

    color: #333;

    font-size: 13px;

    line-height: 1.8;

    font-weight: 500;

}


/* =====================================================
   CLIENT
===================================================== */

.testimonial-client {

    display: flex;

    align-items: center;

    gap: 15px;

}

.testimonial-client img {

    width: 65px;

    height: 65px;

    border-radius: 50%;

    object-fit: cover;

}

.client-details h5 {

    font-size: 14px;

    font-weight: 700;

    color: var(--dark);

    margin: 0 0 4px;

}

.client-details span {

    display: block;

    font-size: 12px;

    color: #555;

    margin-bottom: 7px;

}

.client-rating {

    display: flex;

    gap: 3px;

}

.client-rating i {

    color: #ffad00;

    font-size: 12px;

}


/* =====================================================
   CAROUSEL ARROWS
===================================================== */

.mobile-testimonials .carousel-control-prev,
.mobile-testimonials .carousel-control-next {

    width: 42px;

    height: 42px;

    top: 55%;

    transform: translateY(-50%);

    border: 1.5px solid var(--pink);

    border-radius: 50%;

    background: #fff;

    opacity: 1;

}

.mobile-testimonials .carousel-control-prev {

    left: 5px;

}

.mobile-testimonials .carousel-control-next {

    right: 5px;

}

.mobile-testimonials .carousel-control-prev i,
.mobile-testimonials .carousel-control-next i {

    color: var(--pink);

    font-size: 14px;

}

.mobile-testimonials .carousel-control-prev:hover,
.mobile-testimonials .carousel-control-next:hover {

    background: var(--gradient);

    border-color: transparent;

}

.mobile-testimonials .carousel-control-prev:hover i,
.mobile-testimonials .carousel-control-next:hover i {

    color: #fff;

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .mobile-testimonial-card {

        grid-template-columns: 50px 1fr 220px;

        padding: 20px 25px;

    }

    .testimonial-client img {

        width: 55px;

        height: 55px;

    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .mobile-testimonials {

        padding: 20px 0;

    }

    .mobile-testimonials #testimonialCarousel {

        padding: 0;

    }

    .mobile-testimonial-card {

        grid-template-columns: 1fr;

        text-align: center;

        padding: 25px 20px;

        gap: 15px;

    }

    .testimonial-quote i {

        font-size: 32px;

    }

    .testimonial-client {

        justify-content: center;

        text-align: left;

    }

    .mobile-testimonials .carousel-control-prev,
    .mobile-testimonials .carousel-control-next {

        top: auto;

        bottom: 0;

        transform: none;

    }

    .mobile-testimonials .carousel-control-prev {

        left: calc(50% - 52px);

    }

    .mobile-testimonials .carousel-control-next {

        right: calc(50% - 52px);

    }

}

.section-heading span {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================================
   SOLUTION CARD - 3D FLIP
========================================= */

.solution-card-wrapper {
   width: 100%;
   height: 360px;

   perspective: 1200px;
}


/* Main Card */

.solution-card {
   position: relative;

   width: 100%;
   height: 100%;

   transform-style: preserve-3d;

   transition:
      transform 0.8s cubic-bezier(.4, .2, .2, 1),
      box-shadow 0.4s ease;

   cursor: pointer;
}


/* =========================================
   FRONT + BACK
========================================= */

.solution-card-front,
.solution-card-back {
   position: absolute;

   inset: 0;

   width: 100%;
   height: 100%;

   padding: 30px 22px;

   display: flex;
   flex-direction: column;

   align-items: flex-start;
   justify-content: center;

   border-radius: 18px;

   overflow: hidden;

   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;

   border: 1px solid rgba(0, 0, 0, 0.07);
}


/* =========================================
   FRONT
========================================= */

.solution-card-front {
   background: #ffffff;

   color: #111827;

   transform: rotateY(0deg);
}


/* =========================================
   BACK
========================================= */

.solution-card-back {
   background: linear-gradient(
      90deg,
      #f5386d 0%,
      #ff8a1e 100%
   );

   color: #ffffff;

   transform: rotateY(180deg);
}


/* =========================================
   HOVER FLIP
========================================= */

.solution-card-wrapper:hover .solution-card {
   transform: rotateY(180deg);

   box-shadow:
      0 25px 50px rgba(245, 56, 109, 0.25);
}


/* =========================================
   ICON
========================================= */

.solution-icon {
   width: 58px;
   height: 58px;

   display: flex;
   align-items: center;
   justify-content: center;

   margin-bottom: 20px;

   border-radius: 16px;

   background: #f8f8f8;

   color: #f5386d;

   font-size: 24px;

   transition:
      transform 0.5s ease,
      background 0.4s ease,
      color 0.4s ease;
}


/* Icon animation */

.solution-card-wrapper:hover .solution-icon {
   transform:
      rotate(-8deg)
      scale(1.08);
}


/* Back Icon */

.solution-card-back .solution-icon {
   background: rgba(255, 255, 255, 0.18);

   color: #ffffff;

   border: 1px solid rgba(255, 255, 255, 0.25);

   box-shadow:
      0 8px 20px rgba(0, 0, 0, 0.08);
}


/* =========================================
   HEADING
========================================= */

.solution-card h4 {
   font-size: 19px;

   line-height: 1.35;

   font-weight: 700;

   margin-bottom: 14px;

   letter-spacing: -0.2px;
}


/* =========================================
   PARAGRAPH
========================================= */

.solution-card p {
   margin: 0;

   font-size: 13px;

   line-height: 1.7;

   color: #64748b;
}


/* Back paragraph */

.solution-card-back p {
   color: rgba(255, 255, 255, 0.85);
}


/* =========================================
   ARROW BUTTON
========================================= */

.solution-card a {
   margin-top: 22px;

   width: 42px;
   height: 42px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: var(--pink);

   color: #ffffff;

   text-decoration: none;

   transition:
      transform 0.3s ease,
      background 0.3s ease,
      color 0.3s ease;
}


/* Back button */

.solution-card-back a {
   width: auto;
   height: auto;

   padding: 10px 17px;

   gap: 8px;

   border-radius: 30px;

   background: #ffffff;

   color: #f5386d;

   font-size: 13px;

   font-weight: 600;
}


/* Arrow hover animation */

.solution-card-wrapper:hover
.solution-card-front a {
   transform: translateX(5px);
}


.solution-card-back a:hover {
   transform: translateX(5px);

   background: var(--pink);

   color: #ffffff;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.solution-card-front::before,
.solution-card-back::before {
   content: "";

   position: absolute;

   width: 180px;
   height: 180px;

   right: -90px;
   top: -90px;

   border-radius: 50%;

   background: rgba(0, 0, 0, 0.035);

   transition:
      transform 0.6s ease;
}


.solution-card-back::before {
   background: rgba(255, 255, 255, 0.10);
}


.solution-card-wrapper:hover
.solution-card-back::before {
   transform: scale(1.5);
}


/* =========================================
   SECOND DECORATIVE CIRCLE
========================================= */

.solution-card-back::after {
   content: "";

   position: absolute;

   width: 100px;
   height: 100px;

   bottom: -50px;
   left: -50px;

   border-radius: 50%;

   background: rgba(255, 255, 255, 0.08);

   transition:
      transform 0.7s ease;
}


.solution-card-wrapper:hover
.solution-card-back::after {
   transform: scale(1.5);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

   .solution-card-wrapper {
      height: 330px;
   }

   .solution-card-front,
   .solution-card-back {
      padding: 25px 18px;
   }

   .solution-card h4 {
      font-size: 17px;
   }

   .solution-card p {
      font-size: 12px;
   }

   .solution-icon {
      width: 52px;
      height: 52px;

      font-size: 21px;
   }
   
   .carousel-indicators [data-bs-target]{
      display: none;
   }

}


/* ================================
   3D FLIP CARD
================================ */

.solution-flip-card {
   width: 100%;
   height: 300px;
   perspective: 1200px;
}

.solution-flip-inner {
   position: relative;
   width: 100%;
   height: 100%;
   transition: transform 0.75s cubic-bezier(.4, .2, .2, 1);
   transform-style: preserve-3d;
}


/* Flip on hover */
.solution-flip-card:hover .solution-flip-inner {
   transform: rotateY(180deg);
}


/* ================================
   FRONT & BACK
================================ */

.solution-flip-front,
.solution-flip-back {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   padding: 25px 15px;

   border-radius: 18px;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   text-align: center;

   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;

   overflow: hidden;
}

.solution-flip-front p {
    font-size: 12px;
}


/* ================================
   FRONT
================================ */

.solution-flip-front {
   background: #fff;

   border: 1px solid var(--border);

   box-shadow:
      0 10px 30px rgba(245, 56, 109, 0.08);

   transition: box-shadow 0.3s ease;
}

.solution-flip-card:hover .solution-flip-front {
   box-shadow: none;
}


/* Gradient top border */

.solution-flip-front::before,
.solution-flip-back::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;

   width: 100%;
   height: 4px;

   background: var(--gradient);
}


/* ================================
   ICON
================================ */

.solution-icon {
   width: 65px;
   height: 65px;
    background: #f5eaea !important;
   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   margin-bottom: 10px;

   position: relative;

   transition: all 0.4s ease;
}

.solution-icon i {
   font-size: 27px;

   background: var(--gradient);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}


/* Icon hover animation */

.solution-flip-card:hover .solution-icon {
   transform: scale(1.08);
}


/* ================================
   HEADINGS
================================ */

.solution-flip-front h4,
.solution-flip-back h4 {
   margin: 0;

   color: var(--dark);

   font-size: 18px;
   font-weight: 700;

   line-height: 1.3;
}


/* ================================
   FLIP HINT
================================ */

.flip-hint {
   position: absolute;

   bottom: 18px;

   width: 32px;
   height: 32px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: var(--gradient);

   color: #fff;

   font-size: 13px;

   animation: flipHint 2s infinite;
}

@keyframes flipHint {
   0%,
   100% {
      transform: rotate(0deg);
   }

   50% {
      transform: rotate(180deg);
   }
}


/* ================================
   BACK
================================ */

.solution-flip-back {
   background: var(--gradient);

   color: #fff;

   transform: rotateY(180deg);

   box-shadow:
      0 15px 35px rgba(245, 56, 109, 0.25);
}


/* Back icon */

.solution-flip-back .solution-icon {
   background: rgba(255, 255, 255, 0.18);
}

.solution-flip-back .solution-icon i {
   background: none;
   -webkit-text-fill-color: #fff;
   color: #fff;
}


/* Back heading */

.solution-flip-back h4 {
   color: #fff;

   font-size: 17px;

   margin-bottom: 12px;
}


/* Back paragraph */

.solution-flip-back p {
   margin: 0;

   color: rgba(255, 255, 255, 0.92);

   font-size: 13px;

   line-height: 1.6;
}


/* ================================
   ARROW BUTTON
================================ */

.solution-arrow {
   width: 40px;
   height: 40px;

   margin-top: 15px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: var(--pink);

   color: #fff;

   text-decoration: none;

   transition: all 0.3s ease;
}

.solution-arrow:hover {
   background: var(--gradient);
   color: #fff;

   transform: translateX(5px);
}


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

@media (max-width: 991px) {

   .solution-flip-card {
      height: 280px;
   }

   .solution-flip-front,
   .solution-flip-back {
      padding: 20px 12px;
   }

   .solution-flip-front h4,
   .solution-flip-back h4 {
      font-size: 16px;
   }

}


@media (max-width: 575px) {

   .solution-flip-card {
      height: 260px;
   }

   .solution-icon {
      width: 55px;
      height: 55px;
   }

   .solution-icon i {
      font-size: 23px;
   }

   .solution-flip-front h4,
   .solution-flip-back h4 {
      font-size: 15px;
   }

   .solution-flip-back p {
      font-size: 12px;
      line-height: 1.5;
   }

}


/* =====================================
   3D FLIP CARD
===================================== */

.solution-flip-card {
   width: 100%;
   height: 300px;
   perspective: 1200px;
}


.solution-flip-inner {
   position: relative;
   width: 100%;
   height: 100%;

   transform-style: preserve-3d;

   transition:
      transform 0.75s cubic-bezier(.4, .2, .2, 1);
}


/* Flip */

.solution-flip-card:hover .solution-flip-inner {
   transform: rotateY(180deg);
}


/* =====================================
   FRONT + BACK
===================================== */

.solution-flip-front,
.solution-flip-back {
   position: absolute;
   inset: 0;

   width: 100%;
   height: 100%;

   padding: 10px 25px 15px;

   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   text-align: center;

   border-radius: 18px;

   overflow: hidden;

   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
}


/* =====================================
   FRONT
===================================== */

.solution-flip-front {
   background: #fff;

   border: 1px solid var(--border);

   box-shadow:
      0 10px 30px rgba(245, 56, 109, 0.08);
}


/* Gradient top line */

.solution-flip-front::before,
.solution-flip-back::before {
   content: "";

   position: absolute;

   top: 0;
   left: 0;

   width: 100%;
   height: 4px;

   background: var(--gradient);
}


/* =====================================
   ICON
===================================== */

.solution-icon {
   width: 65px;
   height: 65px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: var(--light-bg);

   margin-bottom: 18px;

   position: relative;

   transition: all 0.4s ease;
}


.solution-icon i {
   font-size: 27px;

   background: var(--gradient);

   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;

   background-clip: text;
}


/* =====================================
   TITLE
===================================== */

.solution-flip-front h4,
.solution-flip-back h4 {
   margin: 0;
   margin-bottom: 6px;

   color: var(--dark);

   font-size: 16px;
   font-weight: 700;

   line-height: 1.3;
}


/* =====================================
   FLIP HINT
===================================== */

.flip-hint {
   position: absolute;

   bottom: 18px;

   width: 32px;
   height: 32px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: var(--gradient);

   color: #fff;

   font-size: 13px;

   animation: flipHint 2s infinite;
}


@keyframes flipHint {

   0%,
   100% {
      transform: rotate(0deg);
   }

   50% {
      transform: rotate(180deg);
   }

}


/* =====================================
   BACK
===================================== */

.solution-flip-back {
   background: var(--gradient);

   color: #fff;

   transform: rotateY(180deg);

   box-shadow:
      0 15px 35px rgba(245, 56, 109, 0.25);
}


/* Back icon */

.solution-flip-back .solution-icon {
   background: rgba(255, 255, 255, 0.18);
}


.solution-flip-back .solution-icon i {
   background: none;

   color: #fff;

   -webkit-text-fill-color: #fff;
}


/* Back title */

.solution-flip-back h4 {
   color: #fff;

   font-size: 17px;

   margin-bottom: 12px;
}


/* Back description */

.solution-flip-back p {
   margin: 0;

   color: rgba(255, 255, 255, 0.92);

   font-size: 13px;

   line-height: 1.55;
}


/* =====================================
   ARROW
===================================== */

.solution-arrow {
   width: 40px;
   height: 40px;

   margin-top: 15px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background: #fff;

   color: var(--pink);

   text-decoration: none;

   transition: all 0.3s ease;
}


.solution-arrow:hover {
   background: var(--pink); 

   color: #fff;

   transform: translateX(5px);
}


/* =====================================
   HOVER EFFECT
===================================== */

.solution-flip-card:hover .solution-icon {
   transform: scale(1.08);
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

   .solution-flip-card {
      height: 280px;
   }

   .solution-flip-front,
   .solution-flip-back {
      padding: 20px 12px;
   }

   .solution-flip-front h4,
   .solution-flip-back h4 {
      font-size: 16px;
   }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 575px) {

   .solution-flip-card {
      height: 260px;
   }

   .solution-icon {
      width: 55px;
      height: 55px;
   }

   .solution-icon i {
      font-size: 23px;
   }

   .solution-flip-front h4,
   .solution-flip-back h4 {
      font-size: 15px;
   }

   .solution-flip-back p {
      font-size: 12px;
      line-height: 1.5;
   }

}

.why-choose-text{
    font-size: 24px;
}

.why-choose-li i{
    font-size: 18px;
}

.why-choose-li li{
    font-size: 14px;
}