.hero_sec h2 {
   font-size: clamp(3.25rem, 5vw, 5.25rem);
   letter-spacing: -1px;
}
.hero_sec h2 span {
   background: linear-gradient(to bottom, #fff 35%, #fff0 95%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero_sec::before,
.hero_sec::after {
   content: "";
   position: absolute;
   width: 20rem;
   aspect-ratio: 1/1;
   background: linear-gradient(var(--shape-color, #0861d4), transparent);
   filter: blur(100px);
   z-index: -1;
}
.hero_sec::before{
   --shape-color: #f00a;
   top: 5%;
   right: 15%;
}
.hero_sec::after{
   top: 15%;
   left: 20%;
}

.hero_sec .grid_box {
   --box-size: 8rem;
   position: absolute;
   inset: 0;

   display: grid;
   grid-template-columns: repeat(auto-fill, calc(var(--box-size) + 0.5rem));
   grid-auto-rows: var(--box-size);
   /* background-image: linear-gradient(#ffffff15 2px, transparent 4px), linear-gradient(90deg, #ffffff18 2px, transparent 4px); */
   /* background-size: 8rem 8rem; */
   mask-image: radial-gradient(ellipse, black 50%, transparent);
   user-select: none;
}
.hero_sec .grid_box span {
   border-bottom: 2px solid #ffffff08;
   border-right: 2px solid #ffffff10;
   transition: 4s;
}

.hero_sec .grid_box span:hover {
   transition: 0.4s;
   background: #6366f125;
}

.hero_sec .grid_box span:nth-child(13n + 9),
.hero_sec .grid_box span:nth-child(17n + 5) {
   background: #6366f125;
   animation: 8s hero_bg infinite linear alternate;
}
.hero_sec .grid_box span:nth-child(13n + 9) {
   animation-delay: 4s;
}

@keyframes hero_bg {
   0% {
      background: transparent;
   }
   40%,
   100% {
      background: #6366f125;
   }
}

.hero_sec .hero_img img {
   /* position: absolute; */
   /* width: 68%;
   max-width: 700px; */
   bottom: -5%;
   left: 50%;
   transform: translateX(-50%);
   max-height:90%;
   max-width: 860px;
   width: 100%;
   pointer-events: none;
}
.hero_sec .hero_img::before,
.hero_sec .hero_img::after {
   content: "";
   position: absolute;
   pointer-events: none;
}
.hero_sec .hero_img::before {
   height: 100px;
   width: 100%;
   bottom: 0;
   left: 0;
   background: linear-gradient(to bottom, transparent, #00041b);
   z-index: 10;
}
.hero_sec .hero_img::after {
   width: 20rem;
   aspect-ratio: 1/1;
   background: linear-gradient(#f00, #0861d4);
   bottom: 5%;
   left: 20%;
   border-radius: 50%;
   filter: blur(100px);
}

.hero_sec .service_capsule {
   display: flex;
   gap: 0.25rem;
   align-items: center;
   height: min-content;
   padding: 10px 20px 10px 16px;
   background-color: #fff3;
   border-radius: 36px;
}
.hero_sec .service_capsule svg {
   height: 1.25rem;
   stroke-dasharray: 50;
   stroke-dashoffset: 50;
   animation: hero_icondrow 2.5s infinite alternate;
}

@keyframes hero_icondrow {
   75%,
   100% {
      stroke-dashoffset: 0;
   }
}

/* ==============  Hero Video Styling  ============ */

.hero_vid .herovid_wrap {
   position: relative;
   /* max-width: 75%; */
   margin-inline: auto;

   aspect-ratio: 16/9;
   max-height: 100vh;
   border-radius: 15px;
   overflow: hidden;

   animation: image-scale linear both;
   animation-timeline: view();
   animation-range: entry 0% cover 50%;
}
.hero_vid .herovid_wrap video {
   display: block;
   /* width: 60%; */
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 15px;
}

@keyframes image-scale {
   from {
      transform: scale(0.65);
   }

   to {
      transform: scale(1);
   }
}
.hero_vid .herovid_wrap .play_btn {
   position: absolute;
   left: 50%;
   top: 50%;
   width: 4rem;
   aspect-ratio: 1/1;
   color: #222;
   background: #fff;
   z-index: 9;
   transform: translate(-50%, -50%);
   place-items: center;
   place-content: center;
   cursor: pointer;
}

/* ==============  Hero About Sec Styling  ============ */

.about_sec .about_achive > div {
   position: relative;
   padding: 1.5rem 1.5rem;
   min-height: 300px;
   border-radius: 10px;
   overflow: hidden;
}
.about_sec .about_achive:not(:last-of-type) > div {
   color: #000;
   background: #fff;
   border: 1px solid var(--foreground);
}

.about_sec .about_achive .big_b {
   flex-direction: column;
   justify-content: space-between;
   min-height: 18rem;
}
.about_sec .about_achive:not(:last-of-type) > div:not(.big_b) {
   min-height: 74px;
   padding-block: 1rem;
}
.about_sec .about_achive h3 {
   font-size: clamp(1.5rem, 4vw, 2.75rem);
   line-height: 1.15;
}
.about_sec .about_achive p {
   font-size: 1.125rem;
   font-weight: 500;
}
.about_sec .about_achive .green_dot::before {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: 50%;
   box-shadow: 0 0 6px #0f0;
}
.about_sec .about_achive .star_rating {
   --star-size: 1rem;
   /* display: inline-block; */
   width: calc(var(--star-size) * var(--star-rating));
   height: var(--star-size);
   --starsvg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024'%3E%3Cpath d='m908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5c-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 0 0 .6 45.3l183.7 179.1l-43.4 252.9a31.95 31.95 0 0 0 46.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2c17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9l183.7-179.1c5-4.9 8.3-11.3 9.3-18.3c2.7-17.5-9.5-33.7-27-36.3'/%3E%3C/svg%3E");
   background-color: #f93;
   -webkit-mask-image: var(--starsvg);
   mask-image: var(--starsvg);
}

@media (min-width: 991px) {
   .hero_sec {
      min-height: calc(108vh - 2rem);
   }
}

.serv_canvas_sec {
   position: relative;
   overflow: hidden;
}

.serv_canvas_sec .industries_canvas {
   /* display: block; */
   position: relative;
   width: 100%;
   min-height: 22.5rem;
   height: 100%;
   max-height: 500px;
   overflow: hidden;
   touch-action: pan-y;
   /* pointer-events: none; */

   user-select: none;
   -webkit-user-select: none;
}
/* .serv_canvas_sec .industries_canvas::after{
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: all;
   z-index: 2;
   touch-action: pan-y;
} */

.serv_canvas_sec .industries_canvas .industries_pill {
   z-index: 4;
   display: inline-block;
   position: absolute;
   top: 0;
   left: 0;
   padding: 0.75rem 1.25rem;
   color: #000;
   background: #fffb;
   backdrop-filter: blur(2px);
   border-radius: 25px;
   white-space: nowrap;
   transition: box-shadow 0.3s;
   user-select: none;
   -webkit-user-select: none;
   cursor: grab;
   /* touch-action: pan-y; */

   will-change: transform;
   /* pointer-events: none; */
}
.serv_canvas_sec .industries_pill:hover {
   background: #fff;
   box-shadow: 0 0px  24px 4px rgba(var(--accent-rgbcolor), 0.05);
}

/* =============  Review Section ============ */

.testimonial_track {
   --slide-size: 25%;
   --slide-spacing: 20px;
   margin-left: calc(var(--slide-spacing) * -1);
}
.testimonial_slide {
   flex: 0 0 var(--slide-size);
   padding-left: var(--slide-spacing);
}

.testimonial_review .testreview_card {
   height: 100%;
   padding: 2rem 1.5rem 1.25rem;
   background: var(--primary);
   color: #fff;
   border: 1px solid #333;
   border-bottom-width: 2px;
   border-radius: 10px;
}
.testimonial_review .testreview_card p {
   font-size: 0.94rem;
}

/* =========== Brand Section  ===========  */

.brand_wrapper::before,
.brand_wrapper::after {
   content: "";
   position: absolute;
   inset: 0;
   width: 5rem;
   z-index: 2;
   pointer-events: none;
}

.brand_wrapper::before {
   right: auto;
   background: linear-gradient(to right, var(--shadow-color, #2d5cbe), transparent);
}
.brand_wrapper::after {
   left: auto;
   background: linear-gradient(to left, var(--shadow-color, #2d5cbe), transparent);
}

.brand_wrapper img {
   filter: brightness(0) invert(1);
   transition: 0.3s;
}
.brand_wrapper .brand_item:hover img {
   filter: none;
   opacity: 1;
}

/* ===========  Service Sec  =========== */

.service_sec .service_card {
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   border: 1px solid #ddd6;
   transition: 0.4s;
}
.service_sec .service_card:hover {
   transform: translateY(-4px);
}
.service_sec .service_card a {
   text-transform: capitalize;
   text-decoration: underline;
   text-underline-offset: 4px;
   text-decoration-thickness: 1px;
   text-decoration-color: #0008;
   transition: 0.3s;
}
.service_sec .service_card a:hover {
   text-decoration: none;
}
.service_sec .service_card h4 {
   font-size: clamp(1.25rem, 4vw, 1.4rem);
}
.service_sec .service_card .service_card_num {
   position: absolute;
   top: 0%;
   right: 5%;
   font-size: 4rem;
   font-weight: 700;
   background: linear-gradient(to bottom, #2953ad 35%, #fff 80%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   opacity: 0.1;
   /* mix-blend-mode: difference; */
}
.service_sec .service_card .meta_service {
   display: flex;
   flex-wrap: wrap;
   gap: 0.5rem;
}
.service_sec .service_card .meta_service li {
   font-size: 0.8rem;
   opacity: 0.75;
   padding: 0.4rem 0.75rem;
   border-radius: 50px;
   border: 1px solid#ddd;
}

/* ===========  Case Study  =========== */

.cs_wrap {
   /* display: flex; */
   /* flex-direction: column;
   gap: 2.5rem; */
}
.cs_pin > div {
   position: relative;
   top: 50%;
   transform: translateY(-50%);
}
.cs-viewport {
   overflow-x: auto;
   scrollbar-width: none;
}
.cs-viewport::-webkit-scrollbar {
   display: none;
}
.cs-track {
   display: flex;
   gap: 1.25rem;
   width: max-content;
   margin: 0;
   padding: 0 max(1.5rem, calc((100cqw - 80rem) / 2));
   list-style: none;
}
.cs-card {
   flex: none;
   width: min(85vw, 360px);
}
.cs-bar-wrap {
   display: none;
}

@keyframes cs-move {
   to {
      transform: translateX(min(0px, calc(100cqw - 100%)));
   }
}
@keyframes cs-fill {
   from {
      transform: scaleX(0);
   }
   to {
      transform: scaleX(1);
   }
}

@supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
      .cs_wrap {
         --cs-scroll-length: 300svh;
         height: var(--cs-scroll-length);
         view-timeline: --cs block;
      }
      .cs_pin {
         position: sticky;
         top: 0vh;
         height: 100svh;
         /* min-height: 900px; */
         /* overflow: clip; */
         container-type: inline-size;
      }
      .cs-viewport {
         overflow: clip;
      }
      .cs-track,
      .cs-bar {
         animation-timing-function: linear;
         animation-fill-mode: both;
         animation-timeline: --cs;
         /* "contain" = from the moment the section's top hits the viewport top
            until its bottom hits the viewport bottom, i.e. exactly while pinned. */
         animation-range: contain 0% contain 100%;
      }
      .cs-track {
         animation-name: cs-move;
      }
      .cs-bar {
         animation-name: cs-fill;
         transform-origin: left center;
      }
      .cs-bar-wrap {
         display: block;
      }
   }
}

@media (max-width: 1200px) {
   .testimonial_track {
      --slide-size: 33.3%;
   }
}
@media (max-width: 991px) {
   .testimonial_track {
      --slide-size: 45%;
      --slide-spacing: 15px;
   }
}

@media (max-width: 764px) {
   .testimonial_track {
      --slide-size: 50%;
   }

   .serv_canvas_sec .industries_canvas .industries_pill.mobile_hidden {
      display: none;
   }
}
@media (max-width: 564px) {
   .testimonial_track {
      --slide-size: 100%;
   }
}