/* .solution-hero-caption h1{font-size: clamp(2rem, 4vw, 4.375rem);}
.solution-hero-caption h1 span{color: var(--PrimaryClr);}
.solution-hero-caption p{max-width:660px; color:#626262; line-height: 160%;} */

:root{
  --bg: #040E2B;
  --card: rgba(255, 255, 255, 0.025);
  --card-border: rgba(255, 255, 255, 0.08);
}

.caption-inner{padding:clamp(1rem, 3vw, 5rem);}
.caption-inner h1{font-size:clamp(30px, 3.5vw, 60px);}
.caption-inner p{letter-spacing:0.5px; line-height:160%;}

.video-overlay:before{content:''; position:absolute; top:0px; left:0px; width:100%; height:100%; background:#00000066; mix-blend-mode:multiply; opacity:0.7; z-index:1;}
.play-btn {bottom:2rem; right:2rem; --size:50px; width:var(--size); height:var(--size); background:rgba(255,255,255,0.85); transition:all .4s ease; z-index:2;}
.play-btn::before, .play-btn::after {content:''; position:absolute; top:0; left:0; width:100%; height:100%; border-radius:50%; background:rgba(255,255,255,0.6); animation:pulse 2s infinite ease-out; z-index:-1;}
.play-btn::after {animation-delay:1s;}

@keyframes pulse {
  0%   { transform:scale(1); opacity:.7;}
  100% { transform:scale(1.8); opacity:0;}
}
.play-btn svg {width:28px; height:32px; fill:#383838;}
.play-btn:hover {background:#fff; }

.gallery {grid-template-columns: repeat(5, 1fr); gap: 15px; transform: translateY(-50px); min-height:540px;}
.box {border-radius: calc( var(--BorderRadius) + 10px);}
.box-1, .box-5 {height: 375px; }
.box-2, .box-4 {height: 425px; transform: translateY(115px); }
.box-3 {height: 370px; transform: translateY(165px); }

.hero-small-images{margin-top: -200px; grid-template-columns: repeat(5, 1fr); gap: 15px;}
.hero-sr-image-swipper{grid-column: 5;}
.sml-box{height: 150px; border-radius: calc( var(--BorderRadius) + 10px);}

.box img {position: absolute; inset: 0; width: 100%; height: 100%; object-position:top; object-fit: cover; transform: translateX(-100%); transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
will-change: transform;}
.box img.active  { transform: translateX(0); }
.box img.exit    { transform: translateX(100%); }
.box img.instant { transition: none !important; }

.group-heading h2{line-height: clamp(2.5rem, 4vw, 3.75rem);}
.group-heading h2 span{color: #1241FF;}
.group-heading p{line-height: 160%;}

.section--retails{background:#040E2B}
.adv-slider-outer{margin-top: 3rem; max-width: 1100px;}
.retails-card-outer .card{
  border-radius: 20px; 
  border-color:rgba(255, 255, 255, 0.08)!important;
  --acc: 91, 141, 239;
  padding: 30px 22px 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(var(--acc), 0.04)), var(--bg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .5s;
  transition: all 0.3s ease;
}
.retails-card-outer .card::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -30px;
    transform: translateX(-50%);
    width: 130%;
    height: 120px;
    background: radial-gradient(ellipse at center, rgba(var(--acc), 0.30), transparent 70%);
    pointer-events: none;
    transition: height .6s cubic-bezier(.2, .8, .2, 1), width .6s cubic-bezier(.2, .8, .2, 1), background .6s, bottom .6s;
}
 /* per-card accent hues — muted, low presence */
.retails-card-outer .swiper-slide:nth-child(1) .card{--acc:84,130,235}   /* blue   */
.retails-card-outer .swiper-slide:nth-child(2) .card{--acc:74,190,140}  /* violet */
.retails-card-outer .swiper-slide:nth-child(3) .card{--acc:196,178,84}   /* teal   */
.retails-card-outer .swiper-slide:nth-child(4) .card{--acc:228,128,72}   /* green  */
.retails-card-outer .swiper-slide:nth-child(5) .card{--acc:204,160,110}  /* amber  */
.retails-card-outer .swiper-slide:nth-child(6) .card{--acc:206,128,150}  /* rose   */

.retails-card-outer .card:hover{transform:translateY(-6px); background:rgba(255,255,255,0.045); border-color:rgba(var(--acc),0.45)!important;}
.retails-card-outer .card:hover::after {width: 170%; height: 320px; bottom: -60px; background: radial-gradient(ellipse at center, rgba(var(--acc), 0.45), rgba(var(--acc), 0.12) 45%, transparent 75%);}

.retails-card-outer .card figure{height:50px; margin-bottom: 22px;}
.retails-card-outer .card img{max-height:46px;}
.retails-card-outer h3{font-size: 14px; text-wrap: balance;}


.section--resul{background:#040E2B}
.section--resul .group-heading p{color:#A2A2A2; max-width:1000px;}
.section--resul_card{margin-top: var(--section-gap-medium);}

.card-inner{background: #07184C; padding:40px 30px; border-radius: 15px; row-gap:30px;transition: all 0.3s ease;}
.card-inner:hover:before{content: ''; position: absolute; width: 137px; height: 137px; left: 1.5rem; bottom: 1.5rem; background: rgba(237, 95, 232, 0.35);
filter: blur(31.05px);     transform: translate(var(--before-x, 0), var(--before-y, 0));}
.card-inner:hover:after{content: ''; position: absolute; width: 137px; height: 137px; right: 1.5rem; top: 1.5rem; background: rgba(95, 159, 237, 0.21); filter: blur(31.05px);   transform: translate(var(--after-x, 0), var(--after-y, 0));}

.section--resul_card .card{transition: all 0.3s ease; border-radius: 15px;
  --acc: 91, 141, 239;
  position: relative;
  background: var(--card);
  border: 1px solid var(--card-border)!important;
  border-radius: 20px;
  padding: 34px 32px 30px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), border-color .5s, background .5s;
}

.section--resul_card .card:hover {
    transform: translateY(-6px);
    border-color: rgba(var(--acc), 0.45)!important;
    background: rgba(255, 255, 255, 0.045);
}

.section--resul_card .card h3{color: #D5DCEE;}
.section--resul_card .card p{color: #8493B6;}
.section--resul_card .card-icon{--size:60px; width:var(--size); min-width:var(--size); height:var(--size); border-color: #142C6A!important; transition: all 0.3s ease;}
.section--resul_card .card-icon img{max-height:26px;}
.section--resul_card .card:hover .card-icon{transform: scale(1.08) rotate(4deg); border-color:rgba(var(--acc), 1)!important;}
.resul-number{font-size: 36px;color:#AFC5F3;line-height: 1;}
.resul-number-info{font-size:14px; color:#8493B6; max-width: 25ch; line-height:134%;}

.resul-footer{border-top:solid 1px #B6ABFF36; padding-top:30px;}


.section--resul_card .card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--acc), 0.16), transparent 65%);
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  z-index: 1;
}
.section--resul_card .card::after {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 170px;
  height: 170px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--acc), 0.16), transparent 70%);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
}
.card:hover::before, .card:hover::after {
    opacity: 1;
}

.section--resul_card > .col-md-4:nth-child(1) .card { --acc:91,141,239; }
.section--resul_card > .col-md-4:nth-child(2) .card { --acc:139,123,224; }
.section--resul_card > .col-md-4:nth-child(3) .card { --acc:90,170,200; }
.section--resul_card > .col-md-4:nth-child(4) .card { --acc:96,178,150; }
.section--resul_card > .col-md-4:nth-child(5) .card { --acc:204,160,110; }
.section--resul_card > .col-md-4:nth-child(6) .card { --acc:206,128,150; }
.section--resul_card .card.in{opacity:1;transform:translateY(0)}


.section--built{background: #FBFBFF;}
.section--built .group-heading p{color: #6E6E6E;}
.section--built_grid{max-width: 1147px;}
.section--built_grid{margin-top: var(--section-gap-medium);}

.section--built_grid .card{
  padding: 29px 34px;
  border-color:#CCCCFF;
  box-shadow: 0px 1px 3.7px rgba(204, 204, 255, 0.64);
  border-radius: calc(var(--BorderRadius) + 10px);
  margin-bottom: 24px;
}
.section--built_grid .card h3{color: #041527; font-size: 23px; max-width: 30ch;}
.section--built_grid .card p{color: #6B6B6B;}
.section--built_grid .card p strong{color:#5454FF; font-weight: 700;}
.built-arrow img{min-width:2.2rem; width:2.2rem;}
.built-image{margin-top:1rem;}

/* Capabilities grid (used in automotive + banking built-for section) */
.caps-grid{display: grid !important; grid-template-columns: 1fr 1fr; gap: 24px; flex-wrap: unset;}
.slide-col{display: flex; flex-direction: column; gap: 24px;}
.capabilities-card{border-color: #CCCCFF !important; border-radius: calc(var(--BorderRadius) + 10px); box-shadow: 0 1px 4px rgba(204,204,255,0.64); background: #fff;}
.capabilities-card-header h3{color: #041527; font-size: clamp(1rem, 1.4vw, 1.2rem); max-width: 28ch;}
.capabilities-card-header p{color: #6B6B6B; font-size: 14px; line-height: 1.6; margin-bottom: 0;}
.slide-item-media{overflow: hidden;}
.slide-item-media img{max-width: 100%; height: auto; display: block;}
.col-nav .swiper-button-prev,.col-nav .swiper-button-next{width: 44px; height: 44px; top: unset; margin-top: 0;}
.col-nav .swiper-button-prev::after,.col-nav .swiper-button-next::after{display: none;}

/* .section--achieved{background: url('../images/solutions/achieved-bg.webp') no-repeat center; background-size:cover;} */
.section--achieved{background: linear-gradient(252.85deg, #110A4A 38.21%, #080429 95.11%);}
.section--achieved h2{max-width: 450px;}
.section--achieved .left-content p{font-size: 20px; max-width: 80%;}

.leading-numbers{max-width: 1147px; margin: auto; position: relative; padding:6rem 2rem 4rem 2rem;}
.leading-numbers:before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: url(../images/solutions/leading-bg.svg) no-repeat center top;
  background-size: cover;
  opacity: 0.5;
  mix-blend-mode: overlay; /* blends with parent/sibling content behind it */
}

.leading-numbers .counter{font-size:  clamp(1.6rem, 3.5vw, 6rem); line-height: 1.2; color:#9FBAFF;}
.leading-numbers p{font-size: 14px;line-height: 148%;max-width: 180px;text-wrap: balance; color: #ffffff;}
.heading-gap{margin-bottom: clamp(2rem, 4vw, 3.75rem);}


.section--usecase-cta{background: url('../images/solutions/case-study-band.webp') center center / cover no-repeat, #040E2B; padding: 0;}
.usecase-cta-inner{background: transparent; border-radius: 0;}
.usecase-cta-inner p{max-width: 800px;}

/* Case-study CTA band hidden for now — delete this rule to re-enable on all pages */
.section--usecase-cta{display:none;}

/* expand cards CSS */
.capabilities-card{background: #F8F9FF; border-color: #CCCCFF!important; border-radius:var(--BorderRadius); transition: all 0.6s ease;}
.capabilities-card:hover{box-shadow: 0px 4px 12px rgba(204, 204, 255, 0.8);}
.capabilities-card p{color: #6B6B6B;}
.capabilities-card p strong{color:#363636;}
.two-col-slider{margin-top: var(--section-gap-large);}
.two-col-slider .swiper-slide .capabilities-card.active .slide-item-media img{visibility:visible; opacity:1;  object-fit: contain; object-position: center; }

.built-arrow .arrow-button a {--size:2.4rem; width:var(--size); height:var(--size);}
.arrow-button a span img{max-height: 12px;}

.capabilities-nav div svg{display:none;}
.capabilities-nav div{--size:40px; width:var(--size); height:var(--size); border-color:var(--PrimaryClr)!important;}
.capabilities-nav div img{max-width:7px; filter:invert(1);}
.capabilities-nav .swiper-button-prev{transform:scaleX(-1) scaleY(1);}

.bg-video-cta {left:50%; min-width:100%; min-height:100%; object-fit:cover;}
/* height: calc(100% - 18px); */

.col-nav div svg{display:none;}
.col-nav div{--size:40px; width:var(--size); height:var(--size); background: var(--PrimaryClr); border-color:var(--PrimaryClr)!important;}
.col-nav div img{max-width:7px; filter:invert(0);}
.col-nav .swiper-button-prev{transform:scaleX(-1) scaleY(1);right:0;}



@media all and (min-width:1024px){
   .section--retails p{max-width:905px;}
   .section--retails h2{max-width:47vw;}
   .section--resul_card .card h3{max-width:75%;}

  /* .capabilities-Swiper .swiper-wrapper{--size:32px; row-gap:var(--size); column-gap:var(--size);}
  .capabilities-Swiper .slide-col{width: calc((100% - 64px) / 3) !important; gap: 32px;}
  .capabilities-Swiper:has(.slide-col:nth-child(2):last-child) .slide-col{width: calc((100% - 32px) / 2) !important;}

  .capabilities-Swiper .swiper-slide .capabilities-card.active{height:var(--cap-card-active-height);}
  .capabilities-Swiper .swiper-slide .slide-item-media{height:var(--cap-media-height);}
  .capabilities-Swiper .swiper-slide .capabilities-card:not(.active) .slide-item-media{height:0!important; margin-top:0!important; margin-bottom:0!important; overflow:hidden;}
  .capabilities-Swiper .swiper-slide .capabilities-card{height:var(--cap-card-height, 220px); display:flex; flex-direction:column;} */

  .capabilities-Swiper .slide-col{width:100% !important; gap: 32px;}
  .capabilities-Swiper .swiper-slide{height: auto;}
  .caps-grid {display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: stretch;}
  .slide-col {gap: 16px;}
  .swiper-slide.has-image {flex: 1;background: #ffffff;}
  .swiper-slide.no-image {flex: 0 0 auto;}
  .capabilities-card, .swiper-slide{display:flex; flex-direction:column;}
  .slide-item-media{flex:1;}

}

@media all and (max-width:1300px){
  .section--built_grid .card h3{font-size: 1.2rem;}
  .section--built_grid .card {padding: 1.4rem; margin-bottom: 1.2rem;}
  .section--achieved .left-content p{font-size:18px; max-width:100%;}
}

@media all and (max-width:960px){
  .capabilities-card{height:auto; display: flex; flex-direction: column;}  
  .slide-item-media{flex:1;}
  .caps-grid{grid-template-columns: 1fr 1fr; gap: 16px;}
  .slide-col{gap: 16px;}
}

@media all and (max-width:767px){
  .caps-grid{grid-template-columns: 1fr !important; gap: 0px; display: flex!important;}
  .slide-col{gap: 16px;}
  .slide-item-media img{max-height: 200px; object-fit: contain; margin-inline: auto;}
  .capabilities-card-header h3{font-size: 1rem;}
  .col-nav{display: flex !important;}
}

@media (max-width: 768px) {
  .solution-hero{height:auto!important; min-height: 100vh;}
  .adv-slider-outer{margin-top:1rem;}

  .gallery {display: block !important; min-height: 400px; overflow: hidden; transform: none; margin-top: 2rem;}
  .gallery .box {position: absolute!important; inset: 0; height: 100% !important; transform: none !important; overflow: hidden;}
  .gallery .box img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(100%); transition: transform 0.6s ease;}
  .gallery .box.active img {transform: translateX(0); z-index: 2;}
  .gallery .box.prev img {transform: translateX(-100%);}

  .card-inner {padding:20px;}
  .leading-numbers{padding:2rem; margin-top: 2rem;}
  .footer-cta-solution {
    background-position: 25% center!important;
}

}



/* ========================================
   Three Travel Realities Tabbed Section
   ======================================== */

.section--three-realities { background: #FBFBFF; }
.tr-section-heading h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }

/* Tab navigation pills */
.tr-tab-nav {
  border-color: #D0D0E8 !important;
  background: #fff;
  gap: 4px;
}
.tr-tab-btn {
  border: none;
  background: transparent;
  border-radius: 50px;
  padding: 8px 28px;
  font-size: 15px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}
.tr-tab-btn.active {
  background: #1241FF;
  color: #fff;
}
.tr-tab-btn:hover:not(.active) { background: #f0f0ff; color: #1241FF; }

/* Tab panel visibility */
.tr-tab-panel { display: none; }
.tr-tab-panel.active { display: block; }

/* Hero area with background image */
.tr-hero {
  position: relative;
  min-height: 440px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.tr-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.7) 45%, rgba(255,255,255,0.15) 100%);
}
.tr-hero-inner { padding: 3rem 0; }
.tr-hero-left { position: relative; z-index: 1; }
.tr-hero-title {
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.2;
  color: #041527;
  margin-bottom: 1rem;
}
.tr-hero-desc {
  font-size: 14px;
  color: #555;
  max-width: 44ch;
  line-height: 1.65;
  margin-bottom: 0;
}

/* WHAT YOU CAN DO card */
.tr-wycd-card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 28px 10px;
  box-shadow: 0 4px 32px rgba(18, 65, 255, 0.08);
  position: relative;
  z-index: 1;
}
.tr-wycd-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  color: #999;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.tr-wycd-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tr-wycd-list li {
  padding: 13px 0;
  border-bottom: 1px solid #F0F0F8;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.tr-wycd-list li:last-child { border-bottom: none; }
.tr-wycd-list li strong {
  font-size: 13.5px;
  font-weight: 600;
  color: #1a1a2e;
  display: block;
}
.tr-wycd-list li span {
  font-size: 12px;
  color: #888;
  line-height: 1.5;
  display: block;
}

/* Cards grid */
.tr-cards-container { padding-top: 2.5rem; padding-bottom: 3rem; }
.tr-card {
  background: #fff;
  border: 1px solid #CCCCFF;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: 0 1px 4px rgba(204, 204, 255, 0.5);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  display: flex;
  flex-direction: column;
}
.tr-card:hover {
  box-shadow: 0 4px 18px rgba(18, 65, 255, 0.1);
  transform: translateY(-3px);
}
.tr-card-title {
  font-size: 15px;
  font-weight: 700;
  color: #041527;
  margin-bottom: 6px;
  line-height: 1.35;
}
.tr-card-desc {
  font-size: 13px;
  color: #6B6B6B;
  line-height: 1.6;
  margin-bottom: 0;
}
.tr-card-media {
  flex: 1;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
}
.tr-card-media img { max-width: 100%; height: auto; object-fit: contain; }
.tr-card-media--empty {
  background: #F5F5FF;
  min-height: 180px;
}

/* Arrow button inside tr-card — inherits gradient-ring from custom.css */
.tr-card .arrow-button a { width: 46px; height: 46px; }

@media (max-width: 768px) {
  .tr-hero { min-height: 520px; }
  .tr-hero-overlay { background: linear-gradient(180deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.75) 60%, rgba(255,255,255,0.2) 100%); }
  .tr-hero-inner { padding: 2rem 0; }
  .tr-wycd-card { padding: 20px 20px 6px; }
  .tr-card { padding: 20px 20px 18px; }
  .tr-tab-btn { padding: 7px 18px; font-size: 14px; }
}

/* ======================================== */

.footer-cta-solution{
  
 background-image: url('../images/solutions/solution-footer-cta.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 420px;
}
.footer-cta-title{
  max-width: 18ch;
}
.footer-cta-text{
  max-width: 40ch;
}