﻿.heading-gap{margin-bottom: clamp(2rem, 4vw, 3.75rem);}
.section-hero-creative{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(110% 110% at 50% -28.65%, #1C02A5 0%, #070135 100%);
}
.section-hero-creative .ambient{
  position: absolute;
  inset: -200px;
  z-index: 1;
  pointer-events: none;
  filter: saturate(1.1);
  background:
    radial-gradient(600px 600px at var(--mx, 30%) var(--my, 20%), rgba(59, 38, 255, 0.28), transparent 60%),
    radial-gradient(700px 700px at calc(100% - var(--mx, 30%)) calc(100% - var(--my, 20%)), rgba(156, 59, 216, 0.18), transparent 60%),
    radial-gradient(900px 900px at 50% 110%, rgba(15, 184, 194, 0.14), transparent 60%);
  transition: background-position 0.2s;
}
.section-hero-creative .container,
.section-hero-creative .icon-badge{
  position: relative;
  z-index: 2;
}
.caption-title{color:#4EA1FF; letter-spacing: 1px;}
.section-hero-creative p{max-width:50%;}


.hero-left-icon{width:7rem; bottom: 30%; transform: translateY(-30%); animation: float 9s infinite ease-in-out; animation-delay: 0s; animation-duration: 6s; transform: translateZ(-2px);}
.hero-right-icon{width:9rem; bottom: 30%; transform: translateY(-30%); right: 0px; animation: float 3s infinite ease-in-out; animation-delay: 0s;animation-duration: 6s;transform: translateZ(2px);}
.hero-left-icon1{width:6rem; bottom: -40px; left:20%;   animation: zoom 3s ease-in-out infinite;}
.hero-right-icon1{width:7rem; bottom: -40px; left:70%;   animation: zoom 10s ease-in-out infinite;}

.bg-video-cta {
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
}
.cdp-nav .swiper-button-prev {
  transform: scaleX(-1) scaleY(1);
  right: 0;
}

.swiper-button-next, .swiper-button-prev {
  ::slotted(svg), svg {
      height: 50%;
      object-fit: contain;
      transform-origin: center;
      width: 100%;
      fill: currentColor;
      pointer-events: none;
  }
}

.creative-top-slides .creative-top-nav {
  width: fit-content;
  margin: 18px auto 0;
  margin-top: 40px !important;
}

@keyframes float {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-40px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}
@keyframes zoom {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  100% {
    transform: scale(1);
  }
}



/* tab css  */
.section-capabilities li button{color:#323556;}
.section-capabilities li button.active,
.section-capabilities li button:hover{color: #192eff !important;;}
.section-capabilities .nav-pills{border-bottom:solid 2px #E5E5FF!important; margin-bottom: var(--section-gap-large)!important;max-width:600px}
.section-capabilities .nav-link:before{content: ''; left: 50%; transform: translateX(-50%); width:0%; height: 4px; background: #192EFF; position: absolute; bottom:-19px; transition: all 0.6s ease;}
.section-capabilities .nav-link.active:before{width: 100%;}

.tab-pane {position: absolute; inset: 0; transform: translateX(100%); opacity: 0; transition: transform 0.5s ease, opacity 0.5s ease;}
.tab-pane  .caption-title{color:#666BFF}
.tab-pane.active {transform: translateX(0); opacity: 1; position: relative; z-index: 2;}


/* .creative-top-slides{background: #070135;} */
.creative-top-swipper {
    margin-right: calc(-50vw + 50%);
}
.creative-top-swipper h3{color:#282626;}
.creative-top-swipper p{font-size:13px; line-height: 160%;}
.creative-top-slides .creative-top-nav{
  width: fit-content;
  margin: 18px auto 0;
}
.creative-top-slides .creative-top-nav .swiper-button-prev,
.creative-top-slides .creative-top-nav .swiper-button-next,
.industries-nav .swiper-button-prev,
.industries-nav .swiper-button-next{
  --size:40px;
  width:var(--size);
  height:var(--size);
  border-color:#CCCCFFA3!important;
  background:transparent;
  color:#8B89C1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:static;
  margin:0;
  inset:auto;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
}
.creative-top-slides .creative-top-nav .swiper-button-prev:after,
.creative-top-slides .creative-top-nav .swiper-button-next:after{
  font-size:10px;
  font-weight:700;
}

.creative-top-slides .creative-top-nav .swiper-button-prev svg,
.creative-top-slides .creative-top-nav .swiper-button-next svg,
.industries-nav .swiper-button-prev svg,
.industries-nav .swiper-button-next svg{height: 14px;}


.orange-bg{background: radial-gradient(119.47% 73.51% at 47.76% 26.49%, #FB886E 0%, #FB886E 55%, #E4694D 61.06%, #FB886E 74.04%)}
.purple-bg{background: radial-gradient(139.44% 77.29% at 48.2% 4.58%, #B996FB 0%, #B996FB 34.62%, #A888E4 76.92%, #B996FB 83.17%)}
.green-bg{background: radial-gradient(109% 67.13% at 50% 11.95%, #14B5B4 0%, #14B5B4 69.41%, #0D9B9A 80.29%, #14B5B4 97.12%, #14B5B4 100%);}
.parrot-bg{background: radial-gradient(117.05% 78.88% at 51.29% 6.18%, #86C881 0%, #86C881 67.31%, #86C881 73.56%, #77B572 79.81%, #86C881 100%);}

.capabilities-Swiper ,.two-col-slider, .push-two-col-slider{margin-top: var(--section-gap-large);}
.capabilities-card{background: #F8F9FF; border-color: #CCCCFF!important; border-radius:var(--BorderRadius); overflow: hidden; transition: all 0.6s ease;}
.capabilities-card:hover{box-shadow: 0px 4px 12px rgba(204, 204, 255, 0.8);}

.capabilities-card h3{line-height:24px;}
.capabilities-card p{font-size: 13px; line-height: 21px; letter-spacing: 0.3px;}
.capabilities-card .slide-item-media{max-height:0; margin-top:0!important; margin-bottom:0!important; opacity:0; overflow:hidden; transition:max-height 0.6s ease, opacity 0.4s ease, margin 0.6s ease;}
.capabilities-card img{transition: all 0.6s ease; visibility:hidden; opacity:0; max-height:100%; object-fit:contain; object-position:center bottom;}
.capabilities-card:hover .slide-item-media,
.capabilities-card.active .slide-item-media{max-height:380px; margin-top:1.5rem!important; margin-bottom:.5rem!important; opacity:1;}
.capabilities-card:hover img,
.capabilities-Swiper .swiper-slide .capabilities-card.active img,
.two-col-slider .swiper-slide .capabilities-card.active img,
.push-two-col-slider .swiper-slide .capabilities-card.active img{visibility:visible; opacity:1; height:auto; }

.capabilities-counters-swipper{margin-top: var(--section-gap-medium);}
.capabilities-counters-swipper .swiper-slide{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.08) -2.94%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.02);
  box-shadow: inset 0px 3px 3px rgba(255, 255, 255, 0.16), inset 0px 108px 132px #1241FF;
  backdrop-filter: blur(24px);box-shadow:none !important; color:#3238DE;}
.capabilities-counters-swipper .swiper-slide .counter{font-size: var(--HeadingTwo);}
.capabilities-counters-swipper .swiper-slide p{font-size: 13px;}



.powerdbyTab.resp-vtabs .resp-tabs-list li.resp-tab-active p{display: block!important;}
.powerdbyTab.resp-vtabs .resp-tabs-list li:after{content: ''; width: 0%; background: linear-gradient(90deg, #016DFF 0%, #09D0FD 54.11%, #DAFF74 97.99%, #F9FFEB 152.1%); position: absolute; left: 0px; bottom: -2px; height: 3px; border-radius: 30px; transition:all 0.7s ease;}
.powerdbyTab.resp-vtabs .resp-tabs-list li.resp-tab-active:after{width:100%; animation: tabProgress 7s linear forwards;}

.glance-right{padding: 47px 36px; background: #FAFBFF; border-radius: var(--BorderRadius);}
.glance-right .caption-title{color: #6C71F1;}
.glance-right:before,
.glance-right:after{content: ''; z-index: -1; position: absolute; left:0px;  width: 100%; height: 100px; background: linear-gradient(180deg, rgba(101, 106, 230, 0.15) 0%, rgba(58, 55, 208, 0.15) 100%);}

.glance-right:before{top: -6px; border-radius: 22px 22px 0px 0px;}
.glance-right:after{bottom: -6px; border-radius: 0px 0px 22px 22px;}

.glance-info{border-color: #BAC9FF!important;}
.glance-info strong{color: #6C71F1;}

.sections-forms{background:#02043A;}

/* .industries-nav div svg{display: none;}
.industries-nav div{--size:40px; width:var(--size); height: var(--size); border-color:var(--WhiteClr); background: var(--WhiteClr);}
.industries-nav div img{max-width: 14px;}
.industries-nav .swiper-button-prev{transform: scaleX(-1) scaleY(1);} */


/* li.tab-switch-ct {
  font-size: 1.4rem;
}
.section-hero-creative{
  padding-bottom: 200px;
} */

@media all and (min-width:1024px){
  .section-hero-creative p{font-size: 18px; line-height: 180%;}

  .capabilities-card.active .slide-item-media{height:var(--cap-media-height, auto); max-height:var(--cap-media-height, 380px);}

  .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 .swiper-slide .capabilities-card{height:var(--cap-card-height, auto);}
  .capabilities-Swiper .swiper-slide .capabilities-card.active{height:var(--cap-card-active-height, auto);}

  .two-col-slider .swiper-wrapper, .push-two-col-slider .swiper-wrapper{--size:32px; row-gap:var(--size); column-gap:var(--size);}
  .two-col-slider .slide-col, .push-two-col-slider .slide-col{width: calc((100% - 64px) / 2) !important; gap: 32px;}
  .two-col-slider .swiper-slide .capabilities-card, .push-two-col-slider .swiper-slide .capabilities-card{height:var(--cap-card-height, auto);}
  .two-col-slider .swiper-slide .capabilities-card.active, .push-two-col-slider .swiper-slide .capabilities-card.active{height:var(--cap-card-active-height, auto);}

  .grid-col{display: grid!important; grid-template-columns: 1fr 1fr; column-gap: 1rem;}
}
@media all and (min-width:1440px){
  .capabilities-Swiper .swiper-slide .slide-item-media{height:380px;}

  .two-col-slider .swiper-slide .slide-item-media, .push-two-col-slider .swiper-slide .slide-item-media{height:400px;}
  .two-col-slider .capabilities-card:hover .slide-item-media,
  .two-col-slider .capabilities-card.active .slide-item-media,
  .push-two-col-slider .capabilities-card:hover .slide-item-media,
  .push-two-col-slider .capabilities-card.active .slide-item-media{max-height:400px;}
}

@media all and (min-width:960px){
  .powerdbyTab{display:grid!important; grid-template-columns: 500px 1fr; column-gap: 4rem;}
}

@media all and (max-width:960px){
  .capabilities-Swiper .swiper-slide, .two-col-slider .swiper-slide, .push-two-col-slider .swiper-slide{height: auto;}
  .capabilities-card{height: 100%; display: flex; flex-direction: column;}
  .capabilities-card .slide-item-media{max-height:none; margin-top:1.5rem!important; margin-bottom:.5rem!important; opacity:1;}
  .capabilities-card img{visibility:visible; opacity:1; height:auto;}
  .mobile-bottom-padding{padding-bottom: 80px;}
}

@media all and (max-width:767px){
  .icon-badge{max-width: 90%;}
  .hero-left-icon{width:3rem; bottom: 30%; transform: translateY(-30%); }
  .hero-right-icon{width:3rem; bottom:50%; transform: translateY(-10%); right:10px; }
  .hero-left-icon1{width:3rem; bottom:-40px; left:20%;}
  .hero-right-icon1{width:3rem; bottom:-40px; left:70%;}
  .section-hero-creative p {max-width: 65%}

  .nav-pills{width: 100%;}
  .section-capabilities li button{font-size: 13px;}
}





/* TAB new CSS */
.work-tab{border-bottom: solid 1px #A68CFF29; padding:25px 0px; cursor: pointer;}
.work-tab.active h3{color:#666BFF!important;}
.work-tabs-grid{grid-template-columns: 540px 1fr; column-gap: 80px;}

.work-tab p,
.work-tab .text-link{display:none;}
.work-tab.active p, .work-tab.active .text-link{display:block; animation:fadeIn .4s ease;}
.wt-info{display:none;}
.wt-info.active{display:block; animation:fadeIn .4s ease;}

.work-tabs-content{min-height:500px; background: url('../images/email/why-resule-bg.jpg') no-repeat center; background-size: cover; border-radius: var(--BorderRadius);}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(10px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:991px){
  .work-tabs-grid{display:block;}
  .work-tabs-content{display:none!important;}
  .work-tabs-grid{grid-template-columns: 1fr;}
  .mobile-tab-image{margin-top:1rem; padding:1.4rem; background: url('../images/email/why-resule-bg.jpg') no-repeat center; background-size: cover; border-radius: var(--BorderRadius);}
}