/*------------***Common-Layout---start***------------*/

* {
   padding: 0;
   margin: 0;
   scroll-behavior: smooth;
   font-family: "Poppins", sans-serif;
   box-sizing: border-box;
}

ul,
ol {
   list-style: none;
}

p {
   margin-bottom: 20px;
}

:root {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
}

.container,
.container-fluid {
   width: 100%;
   padding-right: var(--bs-gutter-x, .75rem);
   padding-left: var(--bs-gutter-x, .75rem);
   margin-right: auto;
   margin-left: auto;
}

@media (min-width: 576px) {
   .container {
      max-width: 540px;
   }
}

@media (min-width: 768px) {
   .container {
      max-width: 720px;
   }
}

@media (min-width: 992px) {
   .container {
      max-width: 960px;
   }
}

@media (min-width: 1200px) {
   .container {
      max-width: 1140px;
   }
}

@media (min-width: 1400px) {
   .container {
      max-width: 1320px;
   }
}

.row {
   --bs-gutter-x: 1.5rem;
   --bs-gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
   margin-top: calc(-1 * var(--bs-gutter-y));
   margin-right: calc(-0.5 * var(--bs-gutter-x));
   margin-left: calc(-0.5 * var(--bs-gutter-x));
}

.row>* {
   box-sizing: border-box;
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
   padding-right: calc(var(--bs-gutter-x) * 0.5);
   padding-left: calc(var(--bs-gutter-x) * 0.5);
   margin-top: var(--bs-gutter-y);
}

.col-6 {
   flex: 0 0 auto;
   width: 50%;
}

/*------------ Layout media query starts ------------*/
@media (min-width: 768px) {

   .col-md-3 {
      flex: 0 0 auto;
      width: 25%;
   }

   .col-md-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
   }

   .col-md-6 {
      flex: 0 0 auto;
      width: 50%;
   }

   .col-md-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
   }
}

@media (min-width: 992px) {

   .col-lg-1 {
      flex: 0 0 auto;
      width: 8.33333333%;
   }

   .col-lg-2 {
      flex: 0 0 auto;
      width: 16.66666667%;
   }

   .col-lg-3 {
      flex: 0 0 auto;
      width: 25%;
   }

   .col-lg-4 {
      flex: 0 0 auto;
      width: 33.33333333%;
   }

   .col-lg-5 {
      flex: 0 0 auto;
      width: 41.66666667%;
   }

   .col-lg-7 {
      flex: 0 0 auto;
      width: 58.33333333%;
   }

   .col-lg-6 {
      flex: 0 0 auto;
      width: 50%;
   }

   .col-lg-8 {
      flex: 0 0 auto;
      width: 66.66666667%;
   }

   .col-lg-9 {
      flex: 0 0 auto;
      width: 75%;
   }

   .col-lg-10 {
      flex: 0 0 auto;
      width: 83.33333333%;
   }

   .col-lg-11 {
      flex: 0 0 auto;
      width: 91.66666667%;
   }

   .col-lg-12 {
      flex: 0 0 auto;
      width: 100%;
   }
}

@media (min-width:992px) {
   .col-lg {
      flex: 1 0 0%
   }
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 700;
   line-height: 1.3;
   margin-bottom: 20px;
   font-family: Montserrat, Poppins, sans-serif;
}

:is(.h1,
   .h2,
   .h3,
   .h4,
   .h5,
   .h6,
   h1,
   h2,
   h3,
   h4,
   h5,
   h6) span {
   color: var(--pc);
}

.h1,
h1 {
   font-size: calc(1.375rem + 1.5vw)
}

@media (min-width:1200px) {

   .h1,
   h1 {
      font-size: 3rem;
   }
}

.h2,
h2 {
   font-size: calc(1.325rem + .9vw)
}

@media (min-width:1200px) {

   .h2,
   h2 {
      font-size: 2.5rem
   }
}

.h3,
h3 {
   font-size: calc(1.3rem + .6vw)
}

@media (min-width:1200px) {

   .h3,
   h3 {
      font-size: 1.75rem
   }
}

.h4,
h4 {
   font-size: calc(1.275rem + .3vw)
}

@media (min-width:1200px) {

   .h4,
   h4 {
      font-size: 1.5rem
   }
}

.h5,
h5 {
   font-size: 1.25rem
}

.h6,
h6 {
   font-size: 1rem;
}

[class*="row-gap"] {
   row-gap: 20px;
}

.row-gap-3 {
   row-gap: 30px;
}

img,
svg {
   vertical-align: middle;
}

.img-fluid {
   max-width: 100%;
   height: auto;
}

:where(.section, section, .sec-space, .mt-auto) {
   margin-top: 80px;
}

.mt-3 {
   margin-top: 30px !important;
}

.mt-5 {
   margin-top: 50px;
}

.mb-auto {
   margin-bottom: 80px;
}

.mx-auto {
   margin-inline: auto;
}

.my-auto {
   margin-block: auto;
}

.mb-0 {
   margin-bottom: 0 !important;
}

.mb-2 {
   margin-bottom: 20px !important;
}

.ps-15 {
   padding-left: 15px !important;
}

.ps-50 {
   padding-left: 50px;
}

.py-70 {
   padding-block: 70px !important;
}

.pb-50 {
   padding-bottom: 50px !important;
}

[class*="flex-"] {
   display: flex;
   align-items: center;
}

[class*="flex-col"] {
   flex-flow: column;
   align-items: unset;
}

[class*="-between"] {
   justify-content: space-between;
}

[class*="grid"] {
   display: grid !important;
}

.justify-content-center {
   justify-content: center;
}

.justify-content-start {
   justify-content: flex-start;
}

.justify-content-end {
   justify-content: flex-end;
}

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

.text-center {
   text-align: center;
}

/*-------site-btn-------*/

[class*="flex-btn"] {
   padding: 12px 20px;
   gap: 12px;
   position: relative;
   width: fit-content;
   overflow: hidden;
}

/*-------heading-seprator-------*/

.flex-col-sec-hd-center {
   align-items: center;
   text-align: center;
}

[class*="flex-col-sec-hd"] {
   gap: 10px;
   margin-bottom: 30px;
}

/*---marquee-css----*/

.marquee-con {
   padding-block: 100px;
   overflow: hidden;
}

.marquee {
   overflow: hidden;
   padding-block: 15px !important;
   width: 100%;
}

.marquee-content {
   min-width: 100%;
   gap: 10px;
   white-space: nowrap;
}

.flex-mrq-item {
   padding-inline: 25px;
   gap: 10px;
   white-space: nowrap;
   width: fit-content;
}

/*---service-card-css----*/

.dark-bg-img {
   background: url(https://wp.ditsolution.net/toptech-multipurpose/wp-content/uploads/2023/12/it-solution-footer-bg.png) no-repeat center center / cover fixed;
   height: 100%;
   width: 100%;
   z-index: 0;
   position: relative;
   padding-block: 50px;
}

.dark-bg-halfImg {
   padding-top: 50px;
}

.dark-bg-halfImg:after {
   background: url(https://wp.ditsolution.net/toptech-multipurpose/wp-content/uploads/2023/12/it-solution-footer-bg.png) no-repeat center center / cover fixed;
   height: 450px;
   width: 100%;
   inset: 0;
   z-index: -1;
}

.flex-col-service-card {
   padding: 25px;
   gap: 12px;
   position: relative;
   z-index: 0;
   overflow: hidden;
   height: 100%;
}

.more-content {
   display: none;
}

.flex-col-site-cta {
   padding: 30px;
   height: 100%;
   justify-content: center;
}

.flex-col-icon-service-card {
   padding: 30px;
   gap: 15px;
}

.flex-link {
   gap: 10px;
   padding-top: 15px;
   margin-top: 5px;
   width: 100%;
}

.flex-col-icon-service-card .flex-card-icon {
   height: 80px;
   width: 80px;
   justify-content: center;
}

.flex-col-small-card {
   padding: 20px;
   overflow: hidden;
   gap: 15px;
   text-align: center;
}

.flex-col-small-card img {
   height: 60px;
   width: 60px;
   object-fit: contain;
}

.site-cta {
   background: url(https://themexriver.com/wp/tekz/wp-content/uploads/2025/04/tst-bg-scaled.webp) no-repeat center center / cover;
   padding: 50px;
   height: 100%;
   width: 100%;
   border-radius: 20px;
   overflow: hidden;
}

.wcu-container {
   background: var(--sc) url(https://html.themexriver.com/it-firm/images/background/pattern-11.png) no-repeat center center / cover;
   height: 100%;
   width: 100%;
   object-fit: cover;
   position: relative;
   padding-block: 150px;
}

.grid-2 {
   grid-template-columns: repeat(2, 1fr);
   gap: 8px;
}

.icon-list li {
   position: relative;
   margin-left: 30px;
   margin-bottom: 12px;
   color: rgba(0, 0, 0, 0.8);
}

.grid-5 {
   grid-template-columns: repeat(5, 1fr);
}

.process-card-wrap {
   gap: 0 20px;
}

.cs-card {
   position: relative;
   height: 100%;
   width: 100%;
   overflow: hidden;
   padding: 10px;
}

.cs-card img {
   height: 100%;
   width: 100%;
}

.cs-card .flex-col-cs-detl {
   position: absolute;
   bottom: -1px;
   left: 0;
   width: 100%;
   height: fit-content;
   padding: 60px 30px 30px;
   gap: 8px;
   transform: translateY(100%);
   opacity: 0;
   visibility: hidden;
   z-index: 999;
}

.acc-header {
   width: 100%;
   text-align: left;
   padding: 15px 50px 15px 15px;
   display: flex;
   align-items: center;
}

.acc-body {
   overflow: hidden;
   max-height: 0;
   margin-left: 15px;
}

.acc-body .content {
   padding: 15px;
   margin: 0;
}

.flex-col-rev-card {
   padding: 25px;
   z-index: 0;
   gap: 10px;
}

/*----blog-card---*/

.flex-col-blog-card .flex-col-blog-content {
   border-radius: 0 0 var(--radius) var(--radius);
   gap: 10px;
   padding: 0 20px 15px;
}

.flex-col-blog-card [class*="-title"] {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   display: -webkit-box !important;
   margin-bottom: 0 !important;
   overflow: hidden;
   text-overflow: ellipsis;
}

.flex-col-blog-card .img-placeholder,
.flex-col-blog-card .img-placeholder img {
   width: 100%;
   object-fit: cover;
}

.img-placeholder {
   background-color: #c7c7c7;
   aspect-ratio: 16 / 9;
   overflow: hidden;
}

.flex-col-blog-card .flex-post-smry-between {
   gap: 10px 50px;
   padding: 13px 20px;
}

 .flex-col-prcs-card {
   padding: 30px;
   position: relative;
   gap: 10px;
   margin-top: 20px;
}

.flex-col-prcs-card .number {
   position: absolute;
   right: 20px;
   bottom: 20px;
}

/*------------***Common-Style---start***------------*/

:root {
   --pc: rgb(244 129 32);
   --sc: rgb(14 16 59);
   --muted: #b0b0b0;
   --white: rgb(255 255 255);
   --black: rgb(0 0 0);
   --radius: 5px;
   scroll-behavior: smooth;
}

body a {
   text-decoration: none;
   transition: all .3s ease;
   color: var(--black);
}

body main a {
   color: var(--pc);
}

p {
   font-size: 16px;
   line-height: 1.8;
   color: rgba(0, 0, 0, 0.8);
}

/*-------site-btn-------*/

[class*="flex-btn"] {
   font-size: 16px;
   font-weight: 500;
   color: var(--white);
   border-radius: var(--radius);
   border: unset;
   cursor: pointer;
   background: var(--black);
}

.pc-flex-btn {
   background: var(--pc);
}

.sc-flex-btn {
   background: var(--sc);
}

/*---site-form----*/

body main .form-wrap {
   background: var(--white);
   border-radius: var(--radius);
   border: 1px solid var(--muted);
   padding: 25px;
}

form :is(input, select, textarea) {
   width: 100%;
   padding: 10px 12px;
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   font-size: 16px;
}

form textarea{
   height: 120px;
}

form :is(input, select, textarea):focus {
   box-shadow: 0 2px 0 0 var(--pc);
   border-bottom: unset;
   outline: unset;
}

form label{
    font-weight:500;
    margin-bottom:10px;
    font-size:15px;
}

form label span{
    color:red;
}

form .select_dropdown {
   position: relative;
}

form select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   line-height: 1.5;
}

form .select_dropdown:after {
   content: '';
   position: absolute;
   right: 15px;
   top: 50%;
   transform: translateY(-50%);
   background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="dropdown-icon"><path d="m6 9 6 6 6-6"></path></svg>') no-repeat;
   height: 20px;
   width: 20px;
}

.light-btn {
   color: var(--sc);
   width: fit-content;
   background: var(--white);
}

.flex-pairBtn {
   flex-wrap: wrap;
   gap: 15px 40px;
}

.daa_fav_wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top;
   border-radius: var(--radius);
}

.abt_daa_fav_wrap .flex-fav-wrapper {
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.daa_fav_wrap {
   position: relative;
}

.flex-fav-wrapper {
   background: var(--pc);
   border-radius: 50%;
   position: absolute;
   height: 160px;
   width: 160px;
   font-size: 13px;
   justify-content: center;
}

.flex-fav-wrapper img {
   height: 40px;
   width: 40px;
   object-fit: contain;
}

.flex-fav-wrapper .flex-go-icon {
   height: 90px;
   width: 90px;
   z-index: 99;
}

.flex-fav-wrapper .flex-badge-text {
   border-radius: 50%;
   background: var(--white);
}

.flex-fav-wrapper .flex-badge-text .text-layer {
   position: absolute;
   padding: 23px;
   overflow: visible;
}

.animate-spin {
   animation: counterclockwise 22s linear infinite;
}

@keyframes counterclockwise {
   0% {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(-1turn);
   }
}

.sub-ttl {
   font-family: Playfair Display SC, Poppins, sans-serif;
   ;
   color: var(--sc);
   letter-spacing: 1px;
}

.ps-3 {
   padding-left: 30px;
}

[class*="flex-col-sec-hd"] :is(.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6) {
   margin-bottom: 0;
}

.flex-col-icon-list {
   gap: 15px;
}

.flex-col-icon-list li {
   position: relative;
   z-index: 0;
   color: rgba(0, 0, 0, 0.8);
   padding-left: 30px;
}

.flex-col-icon-list li:after {
   content: '';
   position: absolute;
   z-index: -1;
   height: 20px;
   width: 20px;
   left: 0;
   top: 2.5px;
   background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 24 24" data-name="Line Color" xmlns="http://www.w3.org/2000/svg" class="icon line-color"><path style="fill:none;stroke:%23f48120;stroke-linecap:round;stroke-linejoin:round;stroke-width:2" d="m21 5-9 9-4-4"/><path d="M20.94 11a8 8 0 0 1 .06 1 9 9 0 1 1-9-9 8.8 8.8 0 0 1 4 1" style="fill:none;stroke:%230e103b;stroke-linecap:round;stroke-linejoin:round;stroke-width:2"/></svg>');
}

.flex-callBtn {
   gap: 15px;
}

.flex-callBtn .flex-callBtnIcn {
   height: 48px;
   width: 48px;
   border: 1px solid var(--sc);
   border-radius: 50%;
}

.flex-callBtn .flex-col-callBtn span {
   color: rgba(0, 0, 0, 0.8);
   font-size: 14px;
}

.flex-callBtn .flex-col-callBtn a {
   font-weight: 600;
   font-size: 18px;
}

.speak-with-boy:after {
   background: url(https://wp.ditsolution.net/toptech-multipurpose/wp-content/uploads/2024/09/toptech-half.png) no-repeat center center / contain;
   bottom: -80px;
   right: 0;
   height: 200px;
   width: 200px;
}

.pen-circle:before {
   background: url(https://wp.ditsolution.net/toptech-multipurpose/wp-content/uploads/2024/07/goal.png) no-repeat center center / contain;
   inset: -30px;
   height: 70px;
   width: 70px;
}

/*---marquee-css----*/

.mrq-a {
   background: var(--sc);
   transform: skewX(-8deg) rotate3d(1, 1, 1, -7deg);
}

.mrq-b {
   background: var(--black);
   transform: skewX(3deg) rotate3d(1, 1, 1, 5deg);
}

.rtl {
   animation: marqueeRTL 10s linear infinite
}

@keyframes marqueeRTL {
   from {
      transform: translateX(0)
   }

   to {
      transform: translateX(-50%)
   }
}

.flex-mrq-item {
   color: var(--white);
   font-size: 20px;
}

/*---service-card-css----*/

.bg-texture {
   position: relative;
   z-index: 0;
}

.bg-texture:after,
.bg-texture:before {
   content: '';
   position: absolute;
}

.light-head :is(.sub-ttl, .h3, .h2, h2, p, :is(ul, ol) li, .flex-callBtn .flex-col-callBtn span) {
   color: var(--white);
}

.flex-col-service-card {
   background: var(--white);
   border: 1px solid var(--muted);
   border-radius: var(--radius);
}

.flex-col-service-card:hover a{
    text-decoration: underline ;
}

.flex-col-service-card:after {
   background: url(https://wp.ditsolution.net/toptech-multipurpose/wp-content/uploads/2024/09/about-shape.jpg) no-repeat center center / cover;
   height: 250px;
   width: 250px;
   right: 0;
   top: 0;
   z-index: -11;
}

.flex-col-service-card:before {
   height: 0%;
   width: 100%;
   inset: 0;
   transition: all 0.3s;
   background: var(--sc);
   z-index: -1;
}

.flex-col-service-card:hover {
   border: 1px solid var(--sc);
}

.flex-col-service-card:hover:before {
   transition: all 0.3s;
   height: 100%;
}

.flex-col-service-card:hover :is(p, a, .h4) {
   transition: all 0.3s;
   color: var(--white);
}

.read_more_btn {
   font-size: 15px;
   border-radius: 90px;
   border: 1px solid var(--muted);
   cursor: pointer;
   padding: 6px 20px;
   margin-top: 15px;
   display: block;
}

.flex-col-site-cta .cta-sub-ttl {
   background: var(--white);
   color: var(--sc);
   width: fit-content;
   padding: 7px 15px;
}

.flex-col-site-cta {
   background: var(--sc);
   border-radius: var(--radius);
}

.flex-col-site-cta [class*="flex-btn"] {
   width: fit-content;
}

.lighty-bg {
   background: rgb(245, 245, 245);
   padding-block: 50px;
}

.flex-col-icon-service-card {
   background: #f9f9f9;
   border: 1px solid var(--muted);
   border-radius: var(--radius);
}

.flex-col-icon-service-card :is(.h4, .h3) {
   color: var(--sc);
}

.flex-col-icon-service-card :is(p) {
   color: rgba(0, 0, 0, 0.8) !important;
}

.flex-link {
   border-top: 1px solid var(--muted);
   color: var(--sc);
}

.flex-link svg {
   transition: all .4s;
   transform: rotate(-45deg);
}

.flex-link:hover svg {
   transition: all .4s;
   transform: rotate(0deg);
}

.flex-col-icon-service-card .flex-card-icon {
   border-radius: 50%;
   background: var(--white);
   box-shadow: 0px 1px 120px 0px rgba(35, 31, 32, 0.17);
}

.flex-col-icon-service-card:hover .flex-card-icon :is(svg, img) {
   animation: zoomInDown2 0.7s;
}

@keyframes zoomInDown2 {
   from {
      opacity: 0;
      -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -100px, 0);
      transform: scale3d(.1, .1, .1) translate3d(0, -100px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
      animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
   }

   60% {
      opacity: 1;
      -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 20px, 0);
      transform: scale3d(.475, .475, .475) translate3d(0, 20px, 0);
      -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
      animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
   }
}

.flex-col-small-card {
   border: 1px solid var(--muted);
   border-radius: var(--radius);
   background: var(--white);
}

.flex-col-small-card:after,
.flex-col-small-card:before {
   background: rgb(14 16 59 / 3%);
   clip-path: polygon(0 0, 100% 0, 100% 100%);
   height: 20px;
   width: 20px;
   transition: all .3s ease-in-out;
}

.flex-col-small-card:after {
   right: 0;
   top: 0;
}

.flex-col-small-card:before {
   left: 0;
   bottom: 0;
   transform: scale(-1, -1);
}

.flex-col-small-card:hover:after,
.flex-col-small-card:hover:before {
   background: var(--sc);
   height: 40px;
   width: 40px;
   transition: all .3s ease-in-out;
}

.sec-texture:after {
   background: url(https://html.themexriver.com/invite/assets/img/bg/team-pattern-2.png) no-repeat center center / contain;
   height: 100%;
   width: 300px;
   right: 0;
   top: -150px;
   z-index: -1;
}

.sec-texture:before {
   background: url(https://html.themexriver.com/invite/assets/img/bg/team-pattern-2.png) no-repeat center center / contain;
   transform: scale(-1, 1);
   height: 100%;
   width: 300px;
   left: 0;
   top: -150px;
   z-index: -1;
}

.site-cta:after {
   background: #0000008a;
   height: 100%;
   width: 100%;
   inset: 0;
   z-index: -1;
}

.wcu-container::before,
.wcu-container::after {
   left: 0px;
   right: 0;
   height: 100px;
   z-index: 10;
   background-color: #fff;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.wcu-container::before {
   bottom: -1px;
}

.wcu-container::after {
   transform: scaleY(-1);
   top: -1px;
}

.wcu-container img {
   border-radius: var(--radius);
}

.icon-list li:after {
   background: url(https://html.themexriver.com/invite/assets/img/icon/check.png) no-repeat center center / contain;
   height: 20px;
   width: 20px;
   position: absolute;
   content: '';
   left: -30px;
   top: 5px;
}

.light-head .icon-list li:after {
   top: 3px !important;
}

.light-head .flex-callBtnIcn {
   background: var(--white);
}

.rope-texture:after {
   background: url(https://themexriver.com/wp/ximsa/digital-marketing/wp-content/uploads/sites/9/2022/04/line-sh1.png) no-repeat left top / cover;
   height: 670px;
   z-index: -1;
   width: 100%;
   left: 0;
   top: 0;
   opacity: 0.1;
}

.logo-wrap {
   background: var(--white);
   padding: 25px;
   border-radius: var(--radius);
   box-shadow: 0 0 4px 0 rgb(0 0 0 / 10%);
}

.logo-wrap img{
   height:50px;
   width:100%;
   object-fit:contain
}

.cs-card {
   background: #b0b0b00a;
   border-radius: 10px;
   border: 1px solid var(--muted);
}

.cs-card:after {
   content: '';
   position: absolute;
   height: 0%;
   width: 100%;
   background: #000000a6;
   inset: 0;
   transition: all .2s ease;
}

.cs-card:hover:after {
   height: 100%;
   transition: all .2s ease;
}

.cs-card .flex-col-cs-detl {
   clip-path: polygon(0 0, 100% 50%, 100% 100%, 0 100%);
   background: var(--white);
   transition: all .3s ease-in-out;
}

.cs-card:hover .flex-col-cs-detl {
   transform: translateY(0%);
   opacity: 1;
   visibility: visible;
   transition: all .3s ease-in-out;
}

.cs-card .flex-col-cs-detl span {
   color: var(--pc);
}

.cs-card .flex-col-cs-detl .h5 {
   color: var(--sc);
}

.shape-texture:after,
.shape-texture:before {
   background: url(https://themexriver.com/wp/ximsa/digital-agency/wp-content/uploads/sites/6/2022/03/side-sh1.png) no-repeat center center / contain;
   height: 100%;
   width: 200px;
   top: 0;
   z-index: -1;
}

.shape-texture:after {
   left: 0;
}

.shape-texture:before {
   transform: scaleX(-1);
   right: 0;
}

.flex-col-stats-col {
   gap: 5px;
}

.flex-col-stats-col .stats-no{
   color: var(--black);
   font-size: 40px;
   font-weight: 600;
}

.light-head .flex-col-stats-col .h5 {
   color: rgba(255, 255, 255, 80%);
}

.light-head .flex-col-stats-col :is(span, .stats-no) {
   color: var(--white);
}

.acc-header {
   position: relative;
   font-size: 16px;
   cursor: pointer;
   background: var(--sc);
   color: var(--white);
   border: none;
   outline: none;
   border-radius: var(--radius);
}

.acc-header:after {
   content: '';
   position: absolute;
   height: 20px;
   width: 20px;
   background: url('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 20v-8m0 0V4m0 8h8m-8 0H4" stroke="%23fff" stroke-width="2" stroke-linecap="round"/></svg>') no-repeat;
   right: 20px;
   top: 50%;
   transition: all .3s;
   transform: translateY(-50%);
}

.acc-header.open:after {
   transition: all .3s;
   transform: translateY(-50%) rotate(45deg);
}

.acc-body {
   transition: max-height 0.4s ease;
   background: var(--white);
   border-left: 3px solid var(--pc);
}

.flex-col-rev-Cta p {
   color: var(--pc);
   font-size: 18px;
   font-weight: 600;
}

.flex-col-rev-card {
   background: var(--white);
   border-radius: 10px;
   position: relative;
   border: 1px solid var(--muted);
}

.flex-col-rev-card:after {
   content: '';
   position: absolute;
   right: 30px;
   top: 15px;
   z-index: -1;
   background: url('data:image/svg+xml,<svg width="50" height="50" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13 10.5a3.5 3.5 0 0 0 3.5 3.5l3.5 3.5v-7a3.5 3.5 0 1 0-7 0Zm-10 0A3.5 3.5 0 0 0 6.5 14l3.5 3.5v-7a3.5 3.5 0 1 0-7 0Z" stroke="%23ccc" stroke-width="1.5" stroke-linejoin="round"/></svg>') no-repeat;
   height: 50px;
   width: 50px;
}

.flex-col-rev-card .flex-rev-smry-between {
   padding-top: 15px;
   border-top: 1px solid rgba(211, 211, 211, 0.55);
}

.flex-col-rev-card .rev-rating {
   color: var(--black);
   line-height: 1.6;
   letter-spacing: 0.5px;
   font-size: 13px;
   background: rgb(255, 202, 24);
   padding: 0px 5px;
   border-radius: 4px;
}

/*---blog-card*/

.flex-col-blog-card {
   background-color: var(--white);
   border-radius: var(--radius);
   overflow: hidden;
   border: 1px solid var(--muted);
}

.flex-col-blog-card .blog-title {
   font-size: 20px;
   font-weight: 600;
   line-height: 1.5;
   color: var(--black);
   transition: all .3s;
}

.flex-col-blog-card .blog-title:hover {
   color: var(--pc);
   transition: all .3s;
}

.flex-col-blog-card .flex-post-smry-between {
   background: var(--white);
   margin-bottom: 15px;
   border-bottom: 1px solid var(--muted);
   line-height: 1.2;
   position: relative;
   overflow: hidden;
   z-index: 0;
}

.flex-col-blog-card .flex-post-smry-between:after {
   content: '';
   position: absolute;
   height: 100%;
   width: 60%;
   background-color: var(--sc);
   left: -60px;
   top: 0;
   clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
   z-index: -1;
}

.flex-col-blog-card .flex-post-smry-between span {
   color: rgba(255, 255, 255, 90%);
   font-size: 14px;
}

.flex-col-prcs-card .number {
   background: linear-gradient(to bottom, #2121211a 0%, #00000000 90%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-size: 100px;
}

.flex-col-prcs-card:after {
   border: 1px solid #b0b0b036;
   transform: skewY(-10deg);
   height: 100%;
   width: 100%;
   border-radius: var(--radius);
   left: 0;
   top: -15px;
   z-index: -1;
   transition: all 0.3s ease-in-out;
}

.color-card-a:after {
   background: #fff5f5;
}

.color-card-b:after {
   background: #f0f2ff;
}

.color-card-c:after {
   background: #f7dbff;
}

.color-card-d:after {
   background: #e3e2f5;
}

.color-card-e:after {
   background: #d3ffda;
}

/*-------------------custom-swiper--------------*/

.swiper .swiper-pagination-bullet {
   width: 10px;
   height: 5px;
   border-radius: 90px !important;
}

.swiper .swiper-pagination-bullet-active {
   background: var(--sc);
   width: 20px;
}