@charset "UTF-8";

/* @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@100..800&display=swap"); */

.container {
  max-width: 1280px !important;
  width: 100%;
  margin: 0 auto !important;
  padding: 0 42px;
}

#testimonial_pagination, #pdt_pagination{
  position: relative !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

body {
  font-family: "Figtree", sans-serif;
}

.sora_font {
  font-family: "Sora", sans-serif;
}

h2 {
  margin-bottom: 0;
}

.list-disc ul {
  padding-left: 20px;
  list-style: disc;
}

.list-disc ol {
  padding-left: 20px;
  list-style-type: decimal;
}

.gradient_footer {
  background: linear-gradient(360deg, #04afe6 0%, #f79f33 50%, #e73472 100%);
}

.common_btn {
  background-color: #ee0000;
  border-radius: 8px;
  padding: 15px 30px;
  font-size: 16px;
  font-weight: 500;
  color: white;
}

.location_section .container {
  padding-right: 0 !important;
}

.tab-btn {
  border-radius: 6px;
  border: 1px solid #ffffff33;
  padding: 10px;
  width: 100%;
  cursor: pointer;
}

.tab-btn.active {
  background: #04afe6;
}

.account-menu {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 10;
  transform: translateY(-50%) scale(0.95);
  width: 300px;
  border-radius: 16px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.account-menu.show {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) scale(1);
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.wpcf7-form .border-black label {
  display: flex;
  gap: 10px;
}

/*  */
/* .card-group:has(.card:hover) .card:not(:hover) {
  flex: 1;
}

.card-group:has(.card:hover) .card:hover {
  flex: 2;
}

.card-group:not(:has(.card:hover)) .card:first-child {
  flex: 2;
}

.card-group:not(:has(.card:hover)) .card:not(:first-child) {
  flex: 1;
}

.card-group:has(.card:hover) .card:not(:hover) .card-heading {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.25rem;
}

.card-group:has(.card:hover) .card:hover .card-heading {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  font-size: 1.875rem;
}

.card-group:not(:has(.card:hover)) .card:first-child .card-heading {
  writing-mode: horizontal-tb;
  transform: rotate(0deg);
  font-size: 1.875rem;
}

.card-group:not(:has(.card:hover)) .card:not(:first-child) .card-heading {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: 1.25rem;
}

.card-group:has(.card:hover) .card:not(:hover) .card-content {
  opacity: 0;
  visibility: hidden;
}

.card-group:has(.card:hover) .card:hover .card-content {
  opacity: 1;
  visibility: visible;
}

.card-group:not(:has(.card:hover)) .card:first-child .card-content {
  opacity: 1;
  visibility: visible;
}

.card-group:not(:has(.card:hover)) .card:not(:first-child) .card-content {
  opacity: 0;
  visibility: hidden;
} */

/* home service animation */

.card-group {
  display: flex;
  gap: 0;
}

.card {
  flex: 1;
  transition: flex 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
}

/* First card is expanded by default */
.card.active {
  flex: 3;
}

/* When hovering any card, it expands */
.card:hover {
  flex: 3;
}

/* Content container with perspective for 3D rotation */
.card > div:last-child {
  transform-style: preserve-3d;
  perspective: 1200px;
}

/* Vertical title for collapsed cards */
.card-heading {
  transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center center;
}

.card:not(.active):not(:hover) .card-heading {
  /* writing-mode: vertical-rl; */
  text-orientation: mixed;
  /* transform: rotate(-180deg); */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 1.75rem;
  margin: 0;
  white-space: nowrap;
}

.card-group:has(.card:hover) .card.active:not(:hover) .card-heading {
  /* transform: rotate(-90deg); */
  /* writing-mode: vertical-rl;
    text-orientation: mixed; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  font-size: 1.75rem;
  margin: 0;
  white-space: nowrap;
  transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hide content when card is collapsed - rotate to the right side */
.card:not(.active):not(:hover) .card-content {
  opacity: 0;
  transform: rotateY(0deg);
  transform-origin: right center;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

/* Show content when card is active or hovered - rotate from right side */
/* .card.active .card-content,
  .card:hover .card-content {
    opacity: 1;
    transform: rotateY(0deg);
    transform-origin: left center;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
  } */

/* Heading animation - rotates into position */
.card.active .card-heading,
.card:hover .card-heading {
  transform: rotateY(0deg);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
}

/* .card:not(.active):not(:hover) .card-heading {
    transform: translate(-50%, -50%) rotate(180deg);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  } */

/* Overlay transition */
.card-overlay {
  transition: background 0.5s ease;
}

.card:hover .card-overlay {
  background: rgba(0, 0, 0, 0.65) !important;
}

/* Reset active state when hovering another card */
.card-group:has(.card:hover) .card.active:not(:hover) {
  flex: 1;
}

/* When closing - content rotates to the right side (90deg) */
.card-group:has(.card:hover) .card.active:not(:hover) .card-content {
  opacity: 0;
  transform: rotateY(-90deg);
  transform-origin: left center;
  transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

@media (max-width: 768px) {
  .common_btn {
    padding: 15px 25px;
  }

  .common-ul h2 {
    font-size: 30px !important;
    margin-bottom: 15px !important;
  }

  .wysiwyg-content p {
    font-size: 20px !important;
    margin-bottom: 15px !important;
  }

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

.career_section:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(
      90deg,
      rgba(231, 52, 114, 0.9) -0.74%,
      rgba(247, 159, 51, 0.9) 49.63%,
      rgba(4, 175, 230, 0.9) 100%
    ),
    linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1));
}

#news_pagination {
  position: relative !important;
  bottom: unset !important;
  left: unset !important;
  right: unset !important;
  width: fit-content !important;
  margin: 0 auto !important;
}

#news_pagination .swiper-pagination-bullet {
  border-color: #202020 !important;
}

#testimonial_pagination .swiper-pagination-bullet, 
#pdt_pagination .swiper-pagination-bullet {
  border-color: #202020 !important;
}

@media (max-width: 1280px) {
  /* xl breakpoint */
  .container {
    padding: 0 30px;
  }
}

@media (max-width: 992px) {
  /* lg breakpoint */
  .container {
    padding: 0 20px;
  }
}

@media (max-width: 576px) {
  /* sm breakpoint */
  .container {
    padding: 0 16px;
  }

  .home .certificate_swiper.no-swiper .swiper-slide {
    width: 48% !important;
    flex-shrink: 0;
  }
  .home .certificate_swiper.no-swiper .swiper-wrapper{
    gap: 10px;
  }
}

.max-w-160 {
  max-width: 160px;
}

/* .swiper-slide-active .card {
  background-color: #FDECF1;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
} */

.swiper-pagination-bullets-dynamic {
  font-size: 0px;
  overflow: hidden;
  bottom: 136px !important;
  right: 43px !important;
  left: unset !important;
}

.swiper-pagination-bullet {
  background-color: transparent !important;
  width: 9px !important;
  border: 1px solid white !important;
  height: 9px !important;
  opacity: 1 !important;
  margin: 0 !important;
}

.swiper-pagination-bullet-active {
  background-color: #e73472 !important;
  width: 9px !important;
  border: none !important;
  height: 9px !important;
}

.swiper-pagination {
  display: flex;
  justify-content: center;
  gap: 20px;
  bottom: 150px !important;
  right: 40px !important;
  left: unset !important;
  width: fit-content !important;
}

.banner-flex {
  position: absolute;
  right: 0;
  bottom: 18%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  height: 50px;
  width: fit-content;
}

/* Lay the arrows and bullets out as flex items instead of Swiper's absolute defaults */
.banner-flex .swiper-button-prev,
.banner-flex .swiper-button-next,
.banner-flex .swiper-pagination {
  position: static !important;
  inset: auto !important;
  margin: 0 !important;
  transform: none !important;
}

/* Swiper's dynamicBullets writes inline left offsets sized for gap-less bullets,
   which pushes the dots over the arrows once our 20px gap is applied */
.banner-flex .swiper-pagination-bullet {
  left: 0 !important;
  right: auto !important;
  transform: none !important;
}

.banner-flex .swiper-button-prev,
.banner-flex .swiper-button-next {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.banner-flex .swiper-button-prev::after,
.banner-flex .swiper-button-next::after,
.banner-flex .swiper-navigation-icon {
  display: none;
}

.testimonial-flex {
  align-items: center;
  gap: 25px;
  justify-content: center;
}

/* @media (max-width: 768px) {
  .banner_swiper .swiper-pagination {
    bottom: 300px !important;
    right: 20px !important;
  }
} */

.clients_swiper {
  width: 100%;
  overflow: visible;
}

.clients_swiper .swiper-wrapper {
  transition-timing-function: linear;
}

.clients_swiper .swiper-slide {
  width: auto;
}

.clients_swiper2 {
  width: 100%;
  overflow: visible;
  direction: rtl;
}

.clients_swiper2 .swiper-wrapper {
  transition-timing-function: linear;
}

.clients_swiper2 .swiper-slide {
  width: auto;
}

.common-ul h2 {
  font-size: 48px;
  font-weight: 600;
  font-family: "Sora", sans-serif;
  color: #111111;
  line-height: normal;
  margin-bottom: 50px;
}

.single-service .wysiwyg-content h3{
  font-size: 20px;
  font-weight: 600;
  font-family: "Sora", sans-serif;
  color: #111111;
  line-height: normal;
  margin-bottom: 12px;
}

.single-service h2 {
  font-size: 32px;
  font-weight: 600;
}

.single-service .wysiwyg-content p {
  font-size: 16px;
  font-weight: 400;
  font-family: 'Figtree', sans-serif;
  color: #111111;
  line-height: normal;
  margin-bottom: 20px;
}

.wysiwyg-content p {
  font-size: 30px;
  font-weight: 600;
  font-family: "Sora", sans-serif;
  color: #111111;
  line-height: normal;
  margin-bottom: 20px;
}

.common-ul li {
  font-size: 16px;
  font-weight: 400;
  color: #111111;
  font-family: "Figtree", sans-serif;
  line-height: normal;
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
}

.common-ul li::before {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 100%;
  background: #e73472;
  left: 0;
  top: 6px;
}

.career-bg .container {
  padding: 0;
}

.red {
  width: 7px;
  height: 7px;
  border-radius: 100%;
  background: #e73472;
}

.career_postsection:last-child {
  border-bottom: none !important;
}

.wpcf7-form-control-wrap input:focus-visible {
  outline: none;
}

.wpcf7-form-control-wrap textarea:focus-visible {
  outline: none;
}

.wpcf7-form-control-wrap input[type="file"] {
  opacity: 0;
}

.text-editor h4 {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 20px;
}

.text-editor a {
  color: #04afe6;
}

.text-editor p {
  font-size: 16px;
  font-weight: 400;
  margin-bottom: 20px;
}

.text-editor ul {
  padding-left: 20px;
}

.text-editor ul li {
  list-style: disc;
  font-size: 16px;
  font-weight: 400;
}

.text-editor ol {
  padding-left: 20px;
}

.text-editor ol li {
  font-size: 16px;
  font-weight: 400;
}

.noptin-form-fields {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 20px;
}

#menu-mobile-menu .menu-linkactive {
  color: #04afe6;
}

.quicklink_grids ul li {
  font-size: 16px;
  font-weight: 400;
  color: white;
}

header .menu-linkactive a {
  color: #04afe6;
}

.header_socialmedialinks img:hover {
  filter: brightness(0) saturate(100%) invert(57%) sepia(91%) saturate(747%)
    hue-rotate(150deg) brightness(97%) contrast(95%);
}

/* Social icons (inline SVG, see postiefsInlineSvgIcon()): white glyph by default,
   original brand colours on hover/focus. */
.social_svgicons svg {
  display: block;
  width: auto;
  height: 24px;
}

.social_svgicons svg :is(path, rect, circle, ellipse, polygon),
.social_svgicons .svgi-original,
.social_svgicons .svgi-glyph {
  transition: fill 0.3s ease, opacity 0.3s ease;
}

/* Icons with a white/knocked-out glyph (Facebook, X, LinkedIn): show the masked
   white glyph, hide the original until hover */
.social_svgicons .svgi-original {
  opacity: 0;
}

.social_svgicons a:is(:hover, :focus-visible) .svgi-original {
  opacity: 1;
}

.social_svgicons a:is(:hover, :focus-visible) .svgi-glyph {
  opacity: 0;
}

/* Mask: near-white shapes let the glyph through, every other shape blocks it.
   !important beats fills set in inline style="" attributes. */
.social_svgicons .svgi-mask :is(path, rect, circle, ellipse, polygon) {
  fill: #000 !important;
  stroke: none !important;
}

.social_svgicons .svgi-mask .svgi-light {
  fill: #fff !important;
}

.mobile-social-links.social_svgicons svg {
  height: 20px;
}

/* Plain icons with no white parts (Instagram): just recolour every shape white */
.social_svgicons a:not(:hover):not(:focus-visible) svg:not(:has(.svgi-glyph)) :is(path, rect, circle, ellipse, polygon) {
  fill: #fff !important;
}

.description {
  max-height: 4.5em;
  /* ~3 lines */
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.description.expanded {
  max-height: 1000px;
  /* large enough for content */
}

.testimonial_box {
  height: 100%;
}

.scrollable_list ul {
  height: 100%;
}

.testimonial_swiper .swiper-slide {
  height: auto;
  display: flex;
}

.common_btn:hover {
  background: #e73472;
}

.read_morebtn:hover {
  background: #e73472;
}

.wpcf7-submit:hover {
  background: #e73472;
}

.contact-submit {
  position: relative;
}

.wpcf7-spinner {
  position: relative;
  left: 30%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.apply_nowwrapper .read_morebtn {
  width: 160px;
}
/* service detail section */

@media (min-width: 768px) {
  .service_detailsection .container {
    padding-right: 0;
  }

  footer a:hover {
    color: #04afe6;
  }

  header a:not(.cta):hover {
    color: #04afe6;
  }

  .mail_wrapper span:hover {
    color: #04afe6;
  }

  .news_prev-next a:hover {
    color: #04afe6;
    text-decoration: none;
  }
}

@media (max-width: 1024px) {
  /* sm breakpoint */
  .service_detailsection .container {
    padding: 0;
  }

  .service_detailsection .space-y-6 {
    padding: 0 16px;
  }

  .service_detailsection {
    padding-bottom: 0;
  }
}

@media (max-width: 767px) {
  .banner-flex {
    right: 50%;
    transform: translateX(50%);
    bottom: 28%;
    z-index: 2;
  }

  .content_area p {
    text-align: center;
  }

  .banner_contents .common_btn {
    display: flex;
    justify-content: center;
    margin: 0 auto;
    width: fit-content;
  }
}

.location_box {
  min-height: 160px !important;
}

.text-\[\#B00000\] {
  color: #b00000;
}

.text-\[\#595959\] {
  color: #595959;
}

.text-\[\#0077B6\] {
  color: #0077b6;
}

.video_wrapper .icon {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: -20px;
  left: -20px;
}

.video_wrapper {
  margin-top: 100px;
}

@media (max-width: 768px) {
  .video_wrapper {
    margin-top: 60px;
  }

  .video_wrapper .icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    top: -20px;
    left: -20px;
  }

  .video_wrapper .icon svg {
    width: 60px;
    height: 60px;
  }
}

.logo_cardbox img {
  filter: grayscale(1);
  transition: 0.3s ease-in-out;
  width: 170px;
  object-fit: contain;
  height: 90px;
}

.logo_cardbox:hover img {
  filter: grayscale(0);
  transition: 0.3s ease-in-out;
}

.scroll_wrapper {
  overflow-x: auto;
}

.scroll_wrapper .tab-btn {
  width: max-content;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .account-menu {
    max-height: 70vh;
    height: auto;
    overflow-y: auto;
    width: 308px;
  }
}

.swiper-navigation-icon {
  display: none;
}

.swiper-navigation-icon {
  display: none;
}

.apply_nowwrapper .w-full.border-b-2.border-black {
  border-bottom: 1px solid rgba(0, 0, 0, 0.342);
}

.apply_nowwrapper .w-full.border-b-2.border-black {
  border-bottom: 1px solid rgba(0, 0, 0, 0.342);
}

section.w-full.py-10.lg\:py-14.relative .particle_image {
  right: unset;
  left: 0;
  top: 0;
}

section.w-full.py-10.lg\:py-14.relative.bg-\[\#F8F8F8\] .particle_image {
  right: 0;
  left: unset;
  bottom: 0 !important;
  top: unset !important;
}

section.w-full.py-10.lg\:py-14.relative.bg-\[\#F8F8F8\] .particle_image img {
  position: relative;
  z-index: 9;
}

.benefit_wrapper
  .flex.flex-col.md\:flex-row.items-center.gap-10.md\:gap-\[92px\] {
  position: relative;
  z-index: 2;
}

section.w-full.py-10.lg\:py-14.relative.bg-\[\#F8F8F8\]
  .flex.flex-col.md\:flex-row.items-center.gap-10.md\:gap-\[92px\] {
  position: relative;
  z-index: 9;
}

.benefit_wrapper .particle_image {
  display: block !important;
  right: 0 !important;
  left: unset !important;
  bottom: 0 !important;
  top: unset !important;
}

.flex.flex-col-reverse.md\:flex-row.items-center.gap-10.md\:gap-\[92px\] {
  position: relative;
  z-index: 2;
}

.bg_overlay {
  background: linear-gradient(to bottom, #000000, rgb(0 0 0 / 96%), #00000000);
  height: 650px;
}

/* Black fades above and below the service cards */
.service_fade {
  position: absolute;
  left: 0;
  width: 100%;
  height: 140px;
  z-index: 20;
  pointer-events: none;
}

.service_fade-top {
  top: 0;
  background: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 70%) 40%, transparent 100%);
}

.service_fade-bottom {
  bottom: 0;
  background: linear-gradient(to top, #000 0%, rgb(0 0 0 / 70%) 40%, transparent 100%);
}

/* Thin dark dividers between cards */
.home_service-cards .card + .card {
  border-left: 2px solid rgb(0 0 0 / 85%);
}

/* Keep the active card's text clear of the bottom fade */
.home_service-cards .card > .relative {
  padding-bottom: 90px;
}

/* Collapsed titles read bottom-to-top and sit near the bottom of the card */
.home_service-cards .card:not(.active):not(:hover) .card-heading,
.home_service-cards .card-group:has(.card:hover) .card.active:not(:hover) .card-heading {
  top: auto;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 1.375rem;
}

.home_serviceflex {
  position: relative;
  z-index: 99;
}

@media (max-width: 768px) {
  .bg_overlay {
    display: none;
  }
}

.home .certificate_swiper.no-swiper .swiper-wrapper {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
}

.home .certificate_swiper.no-swiper .swiper-slide {
    width: 280px !important;
    flex-shrink: 0;
}

@media (max-width:1023px){
    .home .certificate_swiper.no-swiper .swiper-wrapper{
        gap:20px;
    }
}

@media (min-width:1024px){
  .header_socialmedialinks.max-lg\:hidden img{
    width: 2.2rem;
  }

  .main_header .social_svgicons svg{
    height: 26px;
  }
}

/* Small desktops: tighten the header so menu labels stay on one line */
@media (min-width:1024px) and (max-width:1279px){
  .logo_menuwrapper {
    gap: 24px;
  }

  .main_header .logo {
    max-width: 160px;
    flex-shrink: 0;
  }

  .main_menus > ul {
    gap: 14px;
  }

  .main_menus > ul > li > a {
    font-size: 14px;
    white-space: nowrap;
  }

  .header_socialmedialinks ul {
    gap: 10px;
  }

  .header_socialmedialinks.max-lg\:hidden img{
    width: 1.6rem;
  }

  .main_header .social_svgicons svg{
    height: 22px;
  }
}

.single_adress.active img{
  filter: brightness(0) saturate(100%) invert(91%) sepia(12%) saturate(700%) hue-rotate(350deg) brightness(105%) contrast(100%);
}

.grecaptcha-badge { z-index: 999;}

.single-post .wp-block-buttons>.wp-block-button.has-custom-width .wp-block-button__link{
  border: 0;
  text-align: inherit;
  padding: 0;
}

.page-template-contact .sub_header .mail_wrapper a{display: none;}
.wpcf7-form span.required { color: #b00000; }
/* Service detail: supported platform logos */
.platforms_label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6b6b6b;
}

.platforms_label::before {
  content: "";
  width: 28px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e73472, #f79f33, #04afe6);
}

.platform_card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 76px;
  padding: 14px 20px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgb(17 17 17 / 4%);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Brand gradient accent that draws in along the bottom edge on hover */
.platform_card::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #e73472, #f79f33, #04afe6);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s ease;
}

.platform_card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* blends the logos' baked-in white backgrounds into the card */
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.platform_card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: 0 12px 28px -10px rgb(17 17 17 / 18%);
}

.platform_card:hover::after {
  transform: scaleX(1);
}

.platform_card:hover img {
  filter: none;
  opacity: 1;
  transform: scale(1.04);
}

@media (hover: none) {
  /* touch devices can't hover, so show logos in full colour */
  .platform_card img {
    filter: none;
    opacity: 1;
  }
}

@media (max-width: 767px) {
  .platform_card {
    width: 130px;
    height: 68px;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform_card,
  .platform_card::after,
  .platform_card img {
    transition: none;
  }
}