/*==========================
        SUCCESS STORIES
        ==========================*/

.success-stories {
    padding: 100px 0;
    background: #fff;
    overflow: hidden;
}

.success-stories .section-heading h2 {
    font-size: 20px;
    font-weight: 800;
    color: #222;
}

.success-stories .title-line {
    width: 70px;
    height: 4px;
    background: #ff3366;
    margin: 15px auto;
    border-radius: 50px;
}

.success-stories .section-heading p {
    max-width: 650px;
    margin: auto;
    color: #666;
    line-height: 28px;
}

/*==========================
        SWIPER
        ==========================*/

.successStoriesSwiper {
    position: relative;
    padding: 0px 5px 0px;
}

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

.success-card {

    background: #fff;

    border-radius: 18px;

    overflow: hidden;

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

    height: auto;

}

.success-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 18px 45px rgba(0, 0, 0, .12);

}

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

.success-image {
    position: relative;
    height: 180px;
    overflow: hidden;
    border-radius: 18px 18px 0 0;
}

.success-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.success-card:hover img {

    transform: scale(1.05);

}

/*==========================
        BADGE
        ==========================*/

.success-badge {

    position: absolute;

    right: 15px;

    top: 15px;

    width: 100px;

    height: 100px;

    background: #fff;

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    border: 8px solid #dff6e5;

    box-shadow: 0 10px 25px rgba(0, 0, 0, .08);

}

.success-badge strong {

    color: #ff3366;

    font-size: 20px;

    font-weight: 800;

    line-height: 1;

}

.success-badge span {

    font-size: 11px;

    color: #666;

    margin-top: 5px;

    text-align: center;

}

/*==========================
        CONTENT
        ==========================*/

.success-content {

    padding: 18px;

}

.success-content h3 {

    font-size: 18px;

    margin-bottom: 12px;

}

.success-content p {

    font-size: 13px;
    margin-bottom: 18px;
    min-height: 60px
}

.success-btn {

    color: #ff3366;

    font-weight: 700;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;
    font-size: 13px;

}

.success-btn i {

    transition: .3s;

}

.success-btn:hover i {

    transform: translateX(5px);

}

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

.success-prev,
.success-next {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    background: #ff3366;

    color: #fff;

    display: flex;

    justify-content: center;

    align-items: center;

    position: absolute;

    top: 50%;

    cursor: pointer;

    z-index: 20;

    transition: .3s;

    box-shadow: 0 10px 25px rgba(24, 165, 75, .35);

}

.success-prev {

    left: -20px;

}

.success-next {

    right: -20px;

}

.success-prev:hover,
.success-next:hover {

    background: #13863c;

}

/*==========================
        PAGINATION
        ==========================*/

.success-pagination {

    margin-top: 40px;

    position: relative;

}

.success-pagination .swiper-pagination-bullet {

    width: 12px;

    height: 12px;

    background: #d6d6d6;

    opacity: 1;

}

.success-pagination .swiper-pagination-bullet-active {

    width: 35px;

    border-radius: 30px;

    background: #ff3366;

}

/* .mobile-services .container{
        margin-top: -100px;
    z-index: 9999;
    position: relative;
} */

.why-main {
    box-shadow: rgba(0, 0, 0, 0.06) 0px 15px 45px;
    height: 100%;
    background: linear-gradient(90deg, #fffafa 0%, #fff5f7 50%, #fffafa 100%);
    border-radius: 24px;
    padding: 20px;
    align-items: center;
}

.why-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    height: 100%;
}

.stats-card {
    background: transparent;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.stat-box {
    border-left: 1px solid #ff3366 !important;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.stat-box h2 {
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-icon i,
.why-card h2 {
    color: #ff3b6b;
}

.portfolio-grid{
    text-align: center;
    justify-content: center;
}

.project-icon{
    width:70px;
    height:70px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:center;
}

.project-icon i{
    font-size:42px;
    color:#ff2d6f;
}

.mobile-project{
    height:100%;
    border:1px solid #f3dce3;
    /* border-radius:12px; */
    /* padding:35px 25px; */
    text-align:center;
    transition:.3s;
}

.mobile-project:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.mobile-project-content h5{
    font-size:16px;
    font-weight:700;
    margin-bottom:10px;
}

.mobile-project-content p{
    color:#666;
    min-height:50px;
}

.mobile-project-content a{
    color:#ff2d6f;
    font-weight:600;
    text-decoration:none;
}

.agric_bg{
    background: url("../images/bg/agriculture-bg.png") center center / cover no-repeat;
}

.bank_bg{
    background: url("../images/bg/banking_bg.png") center center / cover no-repeat;
}

.construction_bg{
    background: url("../images/bg/construction_bg.png") center center / cover no-repeat;
}

.retail_bg{
    background: url("../images/bg/retail_bg.png") center center / cover no-repeat;
}

.health_bg{
    background: url("../images/bg/health_bg.png") center center / cover no-repeat;
}

.realestate_bg{
    background: url("../images/bg/realestate_bg.png") center center / cover no-repeat;
}

.hero_left_side{
    padding: 60px 15px;
    /* background: rgba(275, 275, 275, 0.1); */
}

.mobile-services .container{
    margin-top: -100px;
    background: #fff;
}

.mobile-services .solution-icon i{
    color: #ff2d6f;
}

.cta-wrapper{
    background: linear-gradient(90deg, #ff7ca8 0%, #ff5b90 50%, #ff5887 100%)
}

.constraction_cta{
    background: url("../images/bg/construction_cta_bg.png") center center / cover no-repeat;
}

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

@media(max-width:991px) {

    .agric_bg, .bank_bg, .construction_bg, .retail_bg, .health_bg, .realestate_bg{
        background: #fff;
    }

    .hero_left_side{
        padding: 30px 15px;
    }

    .mobile-services .container{
        margin-top: 0px;
    }

    .successStoriesSwiper {

        padding-bottom: 0px;

    }

    .success-prev,
    .success-next {

        display: none;

    }

    .success-content h3 {

        font-size: 16px;

    }

}

@media(max-width:767px) {

    .success-stories {

        padding: 70px 0;

    }

    .success-image img {

        height: 220px;

    }

    .success-content {

        padding: 20px;

    }

    .success-badge {

        width: 90px;

        height: 90px;

        right: 12px;

        top: 12px;

        border-width: 7px;

    }

    .success-badge strong {

        font-size: 20px;

    }

    .success-badge span {

        font-size: 9px;

    }

    .success-content h3 {

        font-size: 16px;

    }

    .success-content p {

        font-size: 13px;

    }

}

/* =========================================
   BANKING PORTFOLIO CARDS
========================================= */

.portfolio-grid {
   perspective: 1200px;
}

.portfolio-item {
   transition: transform 0.5s ease, opacity 0.5s ease;
}

/* Main Card */
.mobile-project {
   position: relative;
   height: 100%;
   min-height: 270px;
   padding: 30px 24px;
   border-radius: 18px;
   background: #ffffff;
   border: 1px solid rgba(245, 56, 109, 0.10);
   overflow: hidden;
   isolation: isolate;

   box-shadow:
      0 8px 25px rgba(20, 30, 50, 0.07);

   transition:
      transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1),
      box-shadow 0.45s ease,
      border-color 0.45s ease;
}


/* Animated Gradient Top Line */
.mobile-project::before {
   content: "";
   position: absolute;
   top: 0;
   left: -100%;
   width: 100%;
   height: 4px;

   background: linear-gradient(
      90deg,
      #f5386d 0%,
      #ff8a1e 100%
   );

   transition: left 0.5s ease;
}


/* Soft Background Glow */
.mobile-project::after {
   content: "";
   position: absolute;
   width: 180px;
   height: 180px;
   top: -90px;
   right: -90px;

   background: linear-gradient(
      135deg,
      rgba(245, 56, 109, 0.13),
      rgba(255, 138, 30, 0.10)
   );

   border-radius: 50%;
   filter: blur(10px);

   z-index: -1;

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


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

.mobile-project:hover {
   transform: translateY(-12px) scale(1.015);

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

   box-shadow:
      0 20px 45px rgba(245, 56, 109, 0.13),
      0 8px 20px rgba(255, 138, 30, 0.08);
}


.mobile-project:hover::before {
   left: 0;
}


.mobile-project:hover::after {
   transform: scale(1.7);
   opacity: 0.9;
}


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

.project-icon {
   width: 62px;
   height: 62px;

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

   margin-bottom: 22px;

   border-radius: 16px;

   background: linear-gradient(
      135deg,
      rgba(245, 56, 109, 0.10),
      rgba(255, 138, 30, 0.10)
   );

   color: #f5386d;

   font-size: 25px;

   position: relative;

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


/* Small icon shine */
.project-icon::before {
   content: "";
   position: absolute;
   inset: 0;

   border-radius: inherit;

   background: linear-gradient(
      135deg,
      rgba(255,255,255,0.45),
      transparent
   );

   opacity: 0;

   transition: opacity 0.4s ease;
}


/* Icon Hover */
.mobile-project:hover .project-icon {
   transform: translateY(-5px) rotate(-5deg) scale(1.08);

   color: #ffffff;

   background: linear-gradient(
      135deg,
      #f5386d 0%,
      #ff8a1e 100%
   );

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


.mobile-project:hover .project-icon::before {
   opacity: 1;
}


/* =========================================
   CONTENT
========================================= */

.mobile-project-content {
   position: relative;
   z-index: 2;
}


.mobile-project-content h5 {
   margin-bottom: 12px;

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

   color: #1d2433;

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


.mobile-project:hover .mobile-project-content h5 {
   color: #f5386d;
   transform: translateX(3px);
}


.mobile-project-content p {
   margin-bottom: 20px;

   color: #697386;

   font-size: 14px;
   line-height: 1.7;

   transition: color 0.35s ease;
}


.mobile-project:hover .mobile-project-content p {
   color: #505b6f;
}


/* =========================================
   LEARN MORE LINK
========================================= */

.mobile-project-content a {
   display: inline-flex;
   align-items: center;

   color: #f5386d;

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

   text-decoration: none;

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


.mobile-project-content a i {
   transition:
      transform 0.35s ease,
      margin-left 0.35s ease;
}


.mobile-project-content a:hover {
   color: #ff8a1e;
   transform: translateX(3px);
}


.mobile-project-content a:hover i {
   transform: translateX(7px);
}


/* =========================================
   CARD GLOW ON HOVER
========================================= */

.mobile-project:hover {
   --glow-opacity: 1;
}


/* =========================================
   AOS + CUSTOM ANIMATION
========================================= */

.portfolio-item {
   animation: cardFadeUp 0.8s ease both;
}


/* Staggered fallback animation */
.portfolio-item:nth-child(1) {
   animation-delay: 0.05s;
}

.portfolio-item:nth-child(2) {
   animation-delay: 0.12s;
}

.portfolio-item:nth-child(3) {
   animation-delay: 0.19s;
}

.portfolio-item:nth-child(4) {
   animation-delay: 0.26s;
}

.portfolio-item:nth-child(5) {
   animation-delay: 0.33s;
}

.portfolio-item:nth-child(6) {
   animation-delay: 0.40s;
}

.portfolio-item:nth-child(7) {
   animation-delay: 0.47s;
}

.portfolio-item:nth-child(8) {
   animation-delay: 0.54s;
}


@keyframes cardFadeUp {

   0% {
      opacity: 0;
      transform: translateY(35px);
   }

   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


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

.project-icon i {
   display: inline-block;

   transition: transform 0.4s ease;
}

.mobile-project:hover .project-icon i {
   animation: iconFloat 1.2s ease-in-out infinite;
}


@keyframes iconFloat {

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

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


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

@media (max-width: 767px) {

   .mobile-project {
      min-height: 250px;
      padding: 25px 20px;
   }

   .project-icon {
      width: 56px;
      height: 56px;
      font-size: 22px;
   }

   .mobile-project-content h5 {
      font-size: 17px;
   }

   .mobile-project:hover {
      transform: translateY(-7px);
   }
}


/* =========================================
   ACCESSIBILITY
========================================= */

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

   .mobile-project,
   .project-icon,
   .mobile-project-content a,
   .mobile-project-content h5 {
      transition: none;
   }

   .mobile-project:hover .project-icon i {
      animation: none;
   }

   .portfolio-item {
      animation: none;
   }
}