/* The .page-wrapper or other ancestors likely have overflow:hidden which breaks sticky */
    .page-wrapper,
    main.page-wrapper,
    .page-wrapper > *,
    body,
    html {
        overflow: visible !important;
        overflow-x: clip !important;
    }
    
    /* Ensure the stacking section and all its parents allow sticky */
    .wbs-stack-section,
    .wbs-stack-container,
    .wbs-stack-layout,
    .wbs-stack-content {
        overflow: visible !important;
    }
    
    /* Reinforce sticky sidebar */
    .wbs-stack-sidebar {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: 100px !important;
        align-self: flex-start !important;
        height: fit-content !important;
    }
    
    .wbs-stack-layout {
        align-items: flex-start !important;
    }
    
    /* =====================================================
       STACKING CARDS - CLEAN SOLID CARDS
       ===================================================== */
    .wbs-stack-cards {
        position: relative;
    }
    
    .wbs-stack-card {
        position: sticky;
        top: 0;
        background: #000;
    }
    
    /* CRITICAL: Ensure cards are SOLID and don't show through */
    .wbs-stack-card-inner {
        /*background: #ffffff !important;*/ /* Solid white background */
        transform-origin: center top;
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
        border-radius: 20px;
        overflow: hidden;
        /*background: radial-gradient(40% 40% at 10% 30%, #5A450F, transparent 40%), radial-gradient(40% 40% at 80% 40%, #50164A, transparent 40%), radial-gradient(40% 40% at 50% 80%, #663B42, transparent 40%);
        background-size: 200% 200%;*/
        background: linear-gradient(120deg, #5A450F, #50164A, #000000, #663B42);
        background-size: 200% 200%;
        animation: waveColors 5s ease-in-out infinite alternate;
    }
    
    /* Ensure the visual section is also solid */
    .wbs-stack-card-visual {
        /*background: linear-gradient(135deg, #d33568 0%, #8b1e4a 100%) !important;*/
        position: relative;
    }
    
    /* Ensure body section has solid background */
    .wbs-stack-card-body {
        /*background: #ffffff !important;*/
    }
    
    /* =====================================================
       TEMPLATE THUMBNAIL STYLES - FIX
       ===================================================== */
    .template-thumb {
        cursor: pointer;
        transition: all 0.3s ease;
        border: 2px solid transparent;
        border-radius: 8px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.1);
        min-height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .template-thumb:hover {
        border-color: rgba(255, 0, 110, 0.5);
        background: rgba(255, 255, 255, 0.15);
        transform: translateY(-2px);
    }
    
    .template-thumb.active {
        border-color: #ff006e;
        background: rgba(255, 0, 110, 0.2);
        box-shadow: 0 0 15px rgba(255, 0, 110, 0.3);
    }
    
    .template-thumb::after {
        content: attr(data-template);
        display: block;
        text-align: center;
        font-size: 12px;
        color: #fff;
        font-weight: 500;
    }
    
    /* Preview image transition */
    #templatePreviewImg {
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
    #templatePreviewImg:hover {
        position: relative;
        z-index: 8;
    }
    
    #bigPreview {
        transition: opacity 0.2s ease;
    }
    
    /* =====================================================
       BILLING TOGGLE STYLES - FIX
       ===================================================== */
    .billing-btn {
        cursor: pointer;
        transition: all 0.3s ease;
        padding: 10px 20px;
        border: none;
        background: transparent;
        color: #666;
        font-weight: 500;
        border-radius: 25px;
    }
    
    .billing-btn:hover {
        color: #333;
    }
    
    .billing-btn.active {
        background: linear-gradient(135deg, #ff006e, #ff2e7b);
        color: #fff;
        box-shadow: 0 4px 15px rgba(255, 0, 110, 0.3);
    }
    
    .billing-switch {
        display: flex;
        gap: 5px;
        background: #f0f0f0;
        padding: 5px;
        border-radius: 30px;
    }
    
    /* Price animation */
    .plan-price {
        transition: opacity 0.15s ease, transform 0.15s ease;
    }
    
    .plan-period {
        transition: opacity 0.15s ease;
    }   
    /*.apispagesectionone .gst-section .apis-section3{
    content: "";
    position: absolute;
    inset-inline: -15%;
    top: -70% !important;
    height: 100%;
    background: linear-gradient(135deg, #f6f6fb 0%, #ffffff 35%, #ddddf0 100%);
    transform: skewY(0deg);
    transform-origin: top left;
    z-index: -1;
    opacity: 0.96;
}*/
/*.apispagesectionone .apis-section::after{
    content: "";
  position: absolute;
  inset-inline: -15%;
  top: -70%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #f6f6fb 0%,
    #ffffff 35%,
    #ddddf0 100%
  );
  transform: skewY(0deg);
  transform-origin: top left;
  z-index: -1;
  opacity: 0.96;
}*/

/*.apispagesectionone.gst-section.apis-section::after{
    content: "";
  position: absolute;
  inset-inline: -15%;
  top: -70%;
  height: 100%;
  background: linear-gradient(
    135deg,
    #f6f6fb 0%,
    #ffffff 35%,
    #ddddf0 100%
  );
  transform: skewY(0deg);
  transform-origin: top left;
  z-index: -1;
  opacity: 0.96;
}*/
.tools-stack-path1{
    position:absolute;
    top:0%; 
    right:0%;
}
.tools-stack-path2{
    position: absolute;
    top: 50%;
    right: 0%;
}
@media(max-width: 768px){
    .tools-stack-path1{
        position:absolute;
        bottom:0%; 
        left:10%;
        transform: skewX(90deg);
    }
    .tools-stack-path2{
        position: absolute;
        bottom: 10%;
        right: 10%;
        transform: skewX(90deg);
    }
}
@media(max-width: 1200px)
{
    .tools-stack-path1 ,.tools-stack-path2{
        display: none;
    }
}
.apispagesectionone.apispagesectionblack .gst-section::after{
    background: #000000;
}
.apispagesectionone.apispagesectioncompliant .gst-section::after{
    background: #000000;
    /*background: radial-gradient(circle, rgba(211, 53, 104, 1) 0%, rgba(79, 31, 46, 0) 50%);*/
    opacity: 0;

}
.stack-img.img3.apis-stack-img3{
    box-shadow: none !important;
}
.apispagesectionone .gst-compliant-card-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 20px;
}
.gst-left.apis-first-section{
    padding-bottom: 35px;
}
.apispagesectionone .gst-compliant-card{
  position: relative;
  border-radius: var(--card-radius);
  background:
    linear-gradient(
      135deg,
      rgba(232, 59, 123, 0.15),
      rgba(232, 59, 123, 0) 45%
    ),
    radial-gradient(
      140% 140% at 10% 0%,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0)
    ),
    #05040a;
  border: 1px solid #d33568;
  border-radius: 8px;
  padding: 0;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*justify-content: space-between;*/
  min-width: fit-content;
  min-height: 80px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.55);
  overflow: hidden;
  transition: transform 220ms ease-out,
    box-shadow 220ms ease-out,
    border-color 220ms ease-out;
}
.apispagesectionone .gst-compliant-card:hover {
  transform: translateY(-9px);
  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.75);
  border-color: rgba(232, 59, 123, 0.65);
}
.apispagesectionone .integration-section-page::after{
    background: var(--color-dark);
    border-radius: var(--radius-3xl);
    padding: 40px 40px 32px;
    color: var(--color-white);
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.9fr);
    column-gap: 32px;
    position: relative;
    overflow: hidden;
}
.integration-section-heading{
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  color: var(--accent-soft);
  margin-bottom: 4px;
  background: linear-gradient(90deg, var(--color-primary),#B29482);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}
.integration-section-desc{
  /*max-width: px?;*/
  font-size: 20px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 28px;
}
.apispagesectionone .integrations-talktosales-section{
    height: 50px;
    width: 100%;
    margin-top: 6rem;
}
.apispagesectionone .integrations-talktosales-section .talk-sales-btn{
    position: absolute; 
    right: 10%;
    bottom: 15%;
}

.apispagesectionone .apis-faq-wrapper{
    width: 100% !important;
}
.apispagesectionone .apis-faq-wrapper .apis-faqs{
    display: flex;
    align-items: center;
    justify-content: space-between;
    /*background: linear-gradient(180deg,#000000,#d33568);*/
    /*font-family: switzer;*/
    font-size: 14px;
    color:white;
    min-height: 60px;
    background: #3C3135;
    border: none;
    min-width: 100%;
    padding:0px 20px;
    margin-bottom: 20px;
}
.apispagesectionone .apis-faq-wrapper .apis-faqs.active,.apispagesectionone .apis-faq-wrapper .apis-faqs:hover{
    background: linear-gradient(90deg,#d33568,#000000);
}


.waves{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.10;
  filter: blur(1px);
}

.wave{
  fill: none;
  stroke: #ffffff;
  stroke-width: 1.2;
  opacity: 0.35;
}

.content{
  position: relative;
  z-index: 2;
}

/*.apispagesectionone .apis-faq-wrapper .button.apis-faqs{
    width: 60%;
} */
.apispagesectionone .gst-desc.inte-faq-desc{
    max-width: 100%;
    color: white;
    font-size:16px;
    font-weight: lighter;
}


.apispagesectionone .faq-container{
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
    gap: 40px;
    align-items: center;

}
.apispagesectionone .faq-tabs-content .tab-panel {
    display: none;
    opacity: 0;
    transition: opacity .4s ease;
}

.apispagesectionone .faq-tabs-content .tab-panel.active {
    display: block;
    opacity: 1;
}
.apispagesectionone.apispagesectioncompliant .gst-inner::after{
    opacity: 0 !important;
}



.enterprise-wrap {
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
}
.circle-wrap {
  display: flex;
  flex-direction: column;
  z-index: 1;
  position: relative;
}

/* Row behavior */
.enterprise-row {
  display: flex;
  gap: 24px;
}
.circle-row {
  display: flex;
  /*gap: 24px;*/
}


/* First row → centered (bootstrap justify-content-center) */
.enterprise-row.center {
  justify-content: center;
}

/* Second row → space between (bootstrap justify-content-between) */
.enterprise-row.space-between {
  margin-top: -18%;
  justify-content: space-between;
}
.circle-row {
  justify-content: center;
}
.circle-row.below-circles{
  margin-top:-18%;
}
.below-circle-card.circle-card1,.below-circle-card.circle-card3{
    background: linear-gradient(180deg,#ffe5ec 0%,#ffffff 55%,#ffffff 80%,#ffffff 100%);
}
.below-circle-card.circle-card2{
    background: linear-gradient(180deg,#e6e6e6 0%,#ffffff 55%, #ffffff 80%,#ffffff 100%);
}



/* Cards take fixed width similar to col-4 */
.enterprise-card {
  width: 32%;
  background: linear-gradient(180deg, #d33568, #ffffff);
  border-radius: 8px;
  padding: 25px;
  overflow: hidden;
  min-height: 160px;
  /*position: relative;*/
  display: table;
}

.circle-card {
    width: 45%;
    padding: 20px;
    min-height: 266px;
    border-radius: 50%;
    position: relative;
    background: linear-gradient(180deg, #cfb3a6 0%,#ffffff 55%,#ffffff 80%, #ffffff 100%);
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.circle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* border thickness */
  background: linear-gradient(180deg, #B29482, #ffffff);

  /* This line creates the border effect */
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}
.below-circle-card {
    width: 37%;
    padding: 32px;
    min-height: 160px;
  border-radius: 50%;
  position: relative;
  background: #ffffff;   /* inner background */
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

}

.below-circle-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  padding: 2px; /* border thickness */
  background: linear-gradient(180deg, #B29482, #ffffff);

  /* This line creates the border effect */
  -webkit-mask: 
      linear-gradient(#fff 0 0) content-box, 
      linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
}



/* Title styling from you */
.enterprise-card-title {
  font-size: 16px;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
  display: table-row;
}
.circle-card-title {
  font-size: 20px;
  font-weight: 600;
  background: linear-gradient(90deg, #000000, #d33568);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; /* Important! Makes the text show the background */
  margin-bottom: 5px;
}

.enterprise-card .gst-card-icon{
    display: table-row;
    vertical-align: bottom;
}
 
.circle-card .gst-card-icon{
    display: flex;
    justify-content: space-between;
}


.apispagesectionone.apispagesectionblack .gst-left{
    padding-bottom: 10rem;
}

.enterprise-platform-grid {
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      45deg,
      #e5e5e5 0px,
      #e5e5e5 3px,
      transparent 3px,
      transparent 50px
    ),
    repeating-linear-gradient(
      -45deg,
      #e5e5e5 0px,
      #e5e5e5 3px,
      transparent 3px,
      transparent 50px
    );
  opacity: 0.4;
  transform: perspective(800px) rotateX(75deg) scale(2.0);
  transform-origin: bottom;
  z-index: -1;
}


/*Image wrapper*/
.arrow-image-wrapper{
    display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: -13%;
    z-index: 1;
}
.rectangle-wrapper{
        display: flex;
    align-items: center;
    justify-content: space-around;
    margin-top: 3%;
    z-index: 3;
}
.rectangle-box1{
    background: #D33568;
    width: 25%;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
     position: relative;
    z-index: 3;

}


/* Top curved border */
.rectangle-box1::before{
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #D33568;
    border-radius: 50% 50% 0 0;
    z-index: -1;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Bottom curved border */
.rectangle-box1::after{
       content: "";
    position: absolute;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 50px;
    background: #D33568;
    border-radius: 0 0 50% 50%;
    z-index: -1;
}

.platform-wrapper {
    position: relative;
    margin-top: 80px;
    padding: 60px 0;
    margin-left: 0%;
}
.platform {
    width: 100%;
    margin: auto;
    background: #d9d9d9;
    border-radius: 0;
    padding: 31px 20px;
    position: relative;
    z-index: 2;
    margin-top: -17%;
}
.platform-wrapper::before {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 90px;
    background: #d9d9d9;
    border-radius: 50%;
    z-index: 2;
    top: -88%;
}

.platform-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 75%;
    background: #d9d9d9;
    border-radius: 50%;
    z-index: 1;
    top: 10%;
}
.brand{
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 36px;
    font-weight: 600;
    color: #444;
    margin-bottom: 0 !important;
    padding: 0 40px;
}
.logo-img-wrapper{
    position: absolute;
    top: 75%;
    z-index: 3;
    left: 43%;
    /*box-shadow:
    0 -10px 20px rgba(255, 255, 255, 0.6),
    0 10px 20px rgba(255, 255, 255, 0.6), 
    -10px 0 20px rgba(255, 255, 255, 0.6),
    10px 0 20px rgba(255, 255, 255, 0.6); */
}

.platform-base {
    background: #cccccc;
    width: 106%;
    height: 110px;
    position: absolute;
    top: 83%;
    left: -3%;
    border-radius: 50%;
}

/* PLATFORM BASE */
.enterprise-platform-base {
    position: absolute;
    width: 565px;
    height: 265px;
    background: rgba(255, 255, 255, 0.6);
    border: 2px solid #d33568;
    border-top: none;
    border-radius: 40px;
    bottom: -50px;
    filter: blur(0.4px);
    backdrop-filter: blur(3px);
    transform: perspective(800px) rotateX(55deg) scale(1.15);
    left: -5px;
    z-index: -1;

}
.enterprise-left.gst-left{
    z-index: 1;
    margin-left: 80px !important;
}
@media (max-width: 768px) {

  .enterprise-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }
  .enterprise-wrap{
    order:2;
  }
  .enterprise-left{
    order: 1;
  }
  .enterprise-left.gst-left{
    /*z-index: 1;*/
        margin-left: 0px !important;
    }
  .enterprise-card-title {
      font-size: 14px;
      /*font-weight: 600;*/
    }
  /* Row 1 */
  .enterprise-row.center .enterprise-card {
    flex: 0 0 calc(50% - 12px);
  }

  /* Row 2 */
  .enterprise-row.space-between .enterprise-card {
    flex: 0 0 calc(33.33% - 10px);
  }

  /* force equal heights */
  .enterprise-row .enterprise-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .apispagesectionone.apispagesectionblack .gst-left{
        padding-bottom: 0rem;
    }
}
@media (max-width: 768px) {

  .enterprise-row {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
  }

  /* Row 1 */
  .enterprise-row.center .enterprise-card {
    flex: 0 0 calc(33.33% - 12px);
    padding: 10px;
  }

  /* Row 2 */
  .enterprise-row.space-between .enterprise-card {
    flex: 0 0 calc(33.33% - 8px);
    padding: 10px;
  }

  /* force equal heights */
  .enterprise-row .enterprise-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
  .enterprise-platform-base {
    width: 90vw;
    height: 160px;
    left: 49%;
    transform: perspective(5000px) rotateX(59deg) translateX(-49%) scale(1);
    bottom: -47px;
    border-radius: 24px;            /* softer curve on mobile */
  }

  .enterprise-platform-grid {
    transform: perspective(600px) rotateX(70deg) scale(1.3);
    transform-origin: bottom;
  }
}

/*.enterprise-card .gst-card-icon{
    position: relative;
}
.enterprise-card .gst-card-icon img{
    position: absolute;
    bottom:0;
}*/
.integration-section-page .gst-left.integrations-section-left {
  background: #000;
  position: relative;
  overflow: hidden;
  top: 2rem;
  left: 0rem;
  border-radius: 30rem 0rem;
}

/* Stripes */
.integration-section-page .gst-left.integrations-section-left::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.10) 0px,
    rgba(255,255,255,0.10) 2px,
    rgba(0,0,0,0.50) 2px,
    rgba(0,0,0,0.50) 16px
  );
  opacity: 0.85;
  z-index: -1;
  transform: rotateY(180deg);
}
@media(max-width: 768px){
    .integration-section-page .gst-left.integrations-section-left {
        border-radius: 10rem 0rem;
    }
    a.btn-default.btn-medium {
        height: 50px;
        line-height: 53px;
        padding: 0 40px;
        font-weight: 500;
        font-size: 16px;
        /*display: inline-table;*/
    }
    .apispagesectionone .integrations-talktosales-section{
        /*height: 50px;*/
        width: 100%;
        margin-top: 5rem;
        }
    .apispagesectionone .integrations-talktosales-section .talk-sales-btn {
        position: absolute;
        right: 15%;
        bottom: 10%;
   }
   /*.integration-section-page .gst-left.integrations-section-left {
        background: #000;
        position: relative;
        overflow: hidden;
        top: 2rem;
        left: 0rem;
        border-radius: 10rem 0rem;
    }*/
    .apispagesectionone.apispagesectionthree .gst-left{
        order: 2;
    }
    .apispagesectionone.apispagesectionthree .gst-card-grid{
        order: 1;
    }
    .form-input-group .form-control{
        width: 100%;
        padding: 7px 15px;
    } 
    .apis-faq-wrapper .apis-faqs span{
        font-size: 14px;
    }
    .cta-section h2{
        font-size: 28px;
    }
    .cta-section{
        padding: 60px 0px;
    }
}
@media(max-width: 576px)
{
    
   .apispagesectionone .integrations-talktosales-section .talk-sales-btn {
        position: absolute;
        right: 0%;
        bottom: 2%;
        width: 70%;
    }

    .apispagesectionfour .gst-card-icon br {
        display: none;
    }
    .apispagesectionone.apispagesectionfour .container.integration-section-page, .container-sm {
        max-width: 670px;
    }
    .section-padding-medium {
        padding: 5px 10px !important;
    }
   /* .apispagesectionone .integrations-talktosales-section{
        margin-top: 0rem !important;
    }*/
    


}
@media(min-width: 768px) and (max-width: 900px) {
    .enterprise-platform-base {
        width: 85vw;
        height: 268px;
        left: 49%;
        transform: perspective(12000px) rotateX(65deg) translateX(-49%) scale(1);
        bottom: -93px;
        border-radius: 24px;
    }
    .apispagesectionone .integrations-talktosales-section .talk-sales-btn {
        position: absolute;
        right: 14%;
        bottom: 11%;
    }
    .form-input-group {
        display: flex;
        gap: 12px;
        margin-bottom: 16px;
        flex-wrap: wrap;
    }
    .form-input-group .form-control {
        width: 100%;
        padding: 10px 0px;
    }
    /*.stay-in-touch-form a.btn-default.btn-medium {
        width: 65%;
    }*/
    .form-input-group {
        flex-direction: column;
        align-items: center;
    }
    .enterprise-wrap{
        order: 1;
    }
    .enterprise-card{
        order: 2;
    }
    .enterprise-left.gst-left {
        z-index: 1;
        margin-left: 80px !important;
        margin-bottom: 50px;
    }
    .apispagesectionone.apispagesectiontwo .gst-section::after {
        top: -90%;
        transform: skewY(0deg);
        transform-origin: top left;
    }
    .apispagesectionone.apispagesectionthree .gst-section::after {
        content: "";
        position: absolute;
        inset-inline: -15%;
        bottom: -80%;
        height: 90%;
        background: linear-gradient(
            160deg,
            #ddddf0 0%,
            #ffffff 80%,
            #f6f6fb 100%
        );
      transform: skewY(0deg);
      transform-origin: bottom left;
      z-index: -1;
      opacity: 0.96;
    }
    .apispagesectionone.apispagesectionthree .gst-left{
        order: 2;
    }
    .apispagesectionone.apispagesectionthree .gst-card-grid{
        order: 1;
    }
    .enterprise-wrap{
        width: 80%;
        left: 70px;
    }
    /* align-items: center; 
    /* justify-content: center; */
    
}
.stay-in-touch-form a.btn-default.btn-medium {
    width: 30%;
    padding: 9px 9px !important;
}
@media(min-width: 900px) and (max-width: 1199px){
    .integration-section-page .gst-left.integrations-section-left {
        border-radius: 10rem 0rem;
    }
    .integration-section-page a.btn-default.btn-medium{
        margin-bottom: 5px;
    }
    a.btn-default.btn-medium{
        font-size: 18px !important;
        height: 55px;
        line-height: 54px;
    }
    /*.stay-in-touch-form a.btn-default.btn-medium {
        width: 40%;
        padding: 9px 9px !important;
        font-size: 16px !important;
        height: 52px;
    }*/
    .apispagesectionone.apispagesectioncompliant a.btn-default.btn-medium,.apispagesectionone.apispagesectionblack a.btn-default.btn-medium,
    .apispagesectionone.apispagesectionthree a.btn-default.btn-medium{
        font-size: 14px !important;
    }
    .apispagesectionone.apispagesectionblack .gst-inner .gst-left{
        transform: translateY(-5rem) !important;
    }
    .apispagesectionone.apispagesectionblack .gst-inner .gst-card-inner span, .apispagesectionone.apispagesectionblack .gst-inner .gst-card-inner{
        font-size: 14px !important;
        padding: 10px !important;
    }
    .enterprise-card {
        width: 32%;
        padding: 10px;
    }
    .enterprise-platform-base {
        width: 100%;
        height: 196px;
    }
    .enterprise-row{
        gap: 5px;
    }
    .enterprise-wrap{
        left: 20px;
    }
    .stay-in-touch-form a.btn-default.btn-medium {
    width: 50%;
    padding: 9px 9px !important;
}

}
@media(min-width: 1199px) and (max-width: 1400px){
    .apispagesectionone.apispagesectionblack .gst-inner .gst-left{
        transform: translateY(-3rem) !important;
    }
    .enterprise-platform-base {
        width: 470px;
        height: 230px;
        bottom: -84px;
        transform: perspective(8000px) rotateX(68deg) scale(1.15);
        left: 5px;
    }
    .enterprise-row{
        gap: 10px;
    }

}
@media(min-width: 1400px) and (max-width: 1499px){
    .enterprise-wrap{
        left: 30px;
    }
}
@media(min-width: 360px) and (max-width:390px)
{
    .apispagesectionone.apispagesectionthree a.btn-default.btn-medium {
        font-size: 12px;
        height: 40px;
    }
}

@media(min-width: 320px) and (max-width: 375px){
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    .circle-row.below-circles {
        margin-top: -35%;
    }
    .circle-card-title {
        font-size: 9px !important;
        word-break: break-word;
    }
    .circle-card {
        width: 45%;
        padding: 17px;
        min-height: 160px;;
   }
   .below-circle-card {
        width: 37%;
        padding: 9px;
        min-height: 160px;
    }
    .rect-box-content{
        font-size: 10px;
    }
    .arrow-img {
        height: 45px;
        width: 20px;
    }
    .rectangle-box1::before {
        top: -15px;
        left: -5px;
        width: 121%;
        height: 32px;
    }
    .rectangle-box1::after {
        
        bottom: -20px;
        left: -5px;
        width: 121%;
        height: 50px;
    }
    .arrow-image-wrapper {
        margin-top: -29%;
    }
    .platform {
        width: 112%;
        margin: auto;
        border-radius: 0;
        padding: 10% 0px;
        margin-top: -50%;
        left: -3%;
    }
    .platform-wrapper::before {
        left: 53%;
        width: 112%;
        height: 55%;
        top: -80%;
    }
    .platform-wrapper::after {
        left: 53%;
        width: 112%;
        top: -25%;
    }
    .brand{
        font-size: 16px;
        padding: 0 10px;
    }
    .rectangle-wrapper{
        margin-top: 0%;
    }
    .logo-img{
        height: 45px;
        width: 45px;
    }
    .logo-img-wrapper {
        top: 65%;
    }
    .platform-base {
    width: 128%;
    height:23%;
    top: 68%;
    left: -13%;
}
}
@media(min-width: 345px) and (max-width: 375px)
{
    .platform-wrapper::before {
        left: 53%;
        width: 112%;
        height: 66%;
        top: -87%;
    }
     .platform {
        width: 112%;
        margin: auto;
        border-radius: 0;
        padding: 10% 0px;
        margin-top: -44%;
        left: -3%;
    }.platform-wrapper::after {
        left: 53%;
        width: 112%;
        top: -20%;
    }
    .platform-base {
        width: 123%;
        height: 23%;
        top: 68%;
        left: -9%;
    }
}
@media(min-width: 375px) and (max-width: 425px)
{
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    .circle-card-title {
        font-size: 11px !important;
        word-break: break-word;
    }
    .circle-card {
        width: 45%;
        padding: 17px;
        min-height: 195px;;
   }
   .below-circle-card {
        width: 37%;
        padding: 12px;
        min-height: 175px;
    }
    .circle-row.below-circles {
        margin-top: -30%;
    }
    .arrow-image-wrapper {
        margin-top: -23%;
    }
    .arrow-img {
        height: 45px;
        width: 25px;
    }
    .rect-box-content{
        font-size: 12px;
    }
     .platform {
        width: 112%;
        margin-top: -42%;
        left: -3%;
    }
    .platform-wrapper::before {
        left: 53%;
        width: 112%;
        height: 55%;
        border-radius: 50%;
        top: -80%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 53%;
        width: 112%;
        top: -16%;
    }
    .rectangle-box1::before {
        top: -15px;
        left: -5px;
        width: 121%;
        height: 32px;
    }
    .rectangle-box1::after {
        
        bottom: -20px;
        left: -5px;
        width: 121%;
        height: 50px;
    }
    .brand{
        font-size: 18px;
        padding: 0px;
    }
    .logo-img{
        height: 60px;
        width: 60px;
    }
    .platform-base {
        width: 120%;
        height: 110px;
        top: 71%;
        left: -8%;
        border-radius: 50%;
    }
    .logo-img-wrapper {
        top: 70%;
        left: 40%;
    }
}
@media(min-width: 390px) and (max-width: 425px){
    .platform {
        margin-top: -39%;
    }
}

@media(min-width: 425px) and (max-width: 767px){
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    .circle-card-title {
        font-size: 14px !important;
        word-break: break-word;
    }
    .circle-card {
        width: 45%;
        padding: 17px;
        min-height: 210px;;
   }
   .platform-wrapper {
        position: relative;
        margin-top: 64px;
        padding: 60px 0;
        margin-left: 0%;
    }
   .below-circle-card {
        width: 37%;
        padding: 15px;
        min-height: 195px;
    }
    .circle-row.below-circles {
        margin-top: -25%;
    }
     .arrow-image-wrapper {
        margin-top: -23%;
    }
    .arrow-img {
        height: 45px;
        width: 25px;
    }
    .rect-box-content{
        font-size: 14px;
    }
        .platform {
        width: 106%;
        margin-top: -34%;
        left: 0%;
    }
        .platform-wrapper::before {
        left: 53%;
        width: 106%;
        height: 55%;
        border-radius: 50%;
        top: -77%;
    }
    .rectangle-box1::before {
        top: -15px;
        left: -8px;
        width: 120%;
        height: 35px;
    }
    .rectangle-box1::after {
        
        bottom: -20px;
        left: -8px;
        width: 120%;
        height: 50px;
    }
    .rectangle-wrapper{
        margin-top: 2%;
    }
    .brand{
        font-size: 20px;
        padding: 0px;
    }
        .platform {
        width: 106%;
        margin-top: -34%;
        left: 0%;
    }
        .platform-wrapper::after {
        bottom: 0;
        left: 53%;
        width: 106%;
        top: -11%;
    }
    .logo-img{
        height: 75px;
        width: 75px;
    }
    .logo-img-wrapper {
        top: 70%;
        left: 40%;
    }
    .platform-base {
        width: 113%;
        height: 110px;
        top: 74%;
        left: -4%;
    }
}
@media(min-width: 450px) and (max-width: 475px){
    .platform {
        margin-top: -31%;
    }

}

@media(min-width: 475px) and (max-width: 500px){
    .platform-wrapper::before {
        left: 52%;
        width: 104%;
        height: 43%;
        border-radius: 50%;
        top: -74%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 52%;
        width: 104%;
        top: -11%;
    }
    .platform {
        width: 104%;
        margin-top: -29%;
        left: 0%;
    }
    .platform-base {
        width: 117%;
        height: 100px;
        top: 75%;
        left: -9%;
        border-radius: 50%;
    }

}
@media(min-width: 500px) and (max-width: 535px){
    .platform-wrapper::before {
        left: 52%;
        width: 108%;
        height: 55%;
        border-radius: 50%;
        top: -79%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 52%;
        width: 108%;
        top: -11%;
    }
    .platform {
        width: 108%;
        margin-top: -27%;
        left: -2%;
    }
   .platform-base {
        width: 120%;
        height: 110px;
        top: 72%;
        left: -10%;
    }

}
@media(min-width: 535px) and (max-width:560px ){
        .platform-base {
        width: 117%;
        height: 110px;
        top: 70%;
        left: -8%;
    }
        .platform {
        width: 106%;
        margin-top: -26%;
        left: 0%;
    }
    .platform-wrapper {
        margin-top: 80px;
        padding: 60px 0;
        margin-left: -5%;
    }
    .platform-wrapper::before {
        left: 53%;
        width: 106%;
        height: 55%;
        top: -82%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 53%;
        width: 106%;
        top: -16%;
    }
}
@media(min-width: 560px) and (max-width:600px ){
        .platform-base {
        background: #cccccc;
        width: 117%;
        height: 110px;
        position: absolute;
        top: 70%;
        left: -8%;
        border-radius: 50%;
    }
        .platform {
        width: 106%;
        margin-top: -24%;
        left: 0%;
    }
    .platform-wrapper {
        position: relative;
        margin-top: 80px;
        padding: 60px 0;
        margin-left: -5%;
    }
    .platform-wrapper::before {
        left: 53%;
        width: 106%;
        height: 55%;
        border-radius: 50%;
        top: -82%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 53%;
        width: 106%;
        top: -12%;
    }
}
@media (min-width: 600px) and (max-width: 640px) {
    .platform {
        width: 106%;
        margin-top: -25%;
        left: 0%;
    }
    .arrow-image-wrapper {
        margin-top: -21%;
    }
    .platform-base {
        width: 112%;
        height: 110px;
        top: 72%;
        left: -3%;
    }
}
@media(min-width: 640px ) and (max-width: 767px){
        .platform {
        width: 106%;
        margin-top: -23%;
        left: 0%;
    }
      .circle-row.below-circles {
        margin-top: -22%;
    }
    .arrow-image-wrapper {
        margin-top: -20%;
    }
}
@media(min-width: 899px) and (max-width: 992px){
    .circle-card {
        width: 50%;
        padding: 20px;
        min-height: 220px;
    }
    .circle-card-title {
        font-size: 13px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .circle-row.below-circles {
        margin-top: -26%;
    }
    .below-circle-card {
        width: 51%;
        padding: 19px;
        min-height: 202px;
    }
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    .rect-box-content{
        font-size: 12px;
    }
    .rectangle-box1::before {
        top: -25px;
        left: 0px;
        width: 100%;
        height: 50px;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 75%;
        top: -13%;
    }
    .arrow-image-wrapper {
        margin-top: -21%;
    }
    .arrow-img {
        height: 45px;
        width: 25px;
    }

    .platform-wrapper::before {
        left: 50%;
        width: 100%;
        height: 90px;
        top: -96%;
    }
    .platform {
        width: 100%;
        margin: auto;
        padding: 31px 20px;
        z-index: 2;
        margin-top: -35%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 75%;
        top: -13%;
    }
    .brand {
        font-size: 20px;
        margin-bottom: 0 !important;
        padding: 0px 0px;
    }
    .platform-base {
        width: 106%;
        height: 110px;
        top: 75%;
        left: -3%;
    }
    .logo-img{
        height: 75px;
        width: 75px;
    }
    .logo-img-wrapper {
        top: 71%;
        z-index: 3;
        left: 41%;
    }
}
@media(min-width: 993px) and (max-width: 1199px){
    .circle-card {
        width: 44%;
        padding: 20px;
        min-height: 220px;
    }
    .circle-card-title {
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 5px;
    }
    .circle-row.below-circles {
        margin-top: -21%;
    }
    .below-circle-card {
        width: 51%;
        padding: 19px;
        min-height: 202px;
    }
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    
    .rect-box-content{
        font-size: 12px;
    }
    .rectangle-box1::before {
        top: -25px;
        left: 0px;
        width: 100%;
        height: 50px;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 75%;
        top: -13%;
    }
    .arrow-image-wrapper {
        margin-top: -16%;
    }
    .arrow-img {
        height: 45px;
        width: 25px;
    }
    .platform-wrapper::before {
        left: 50%;
        width: 100%;
        height: 90px;
        top: -96%;
    }
    .platform {
        width: 100%;
        margin: auto;
        padding: 31px 20px;
        z-index: 2;
        margin-top: -26%;
    }
    .platform-wrapper::after {
        bottom: 0;
        left: 50%;
        width: 100%;
        height: 75%;
        top: -13%;
    }
    .brand {
        font-size: 20px;
        margin-bottom: 0 !important;
        padding: 0px 0px;
    }
    .platform-base {
        width: 106%;
        height: 110px;
        top: 75%;
        left: -3%;
    }
    .logo-img{
        height: 75px;
        width: 75px;
    }
    .logo-img-wrapper {
        top: 71%;
        z-index: 3;
        left: 41%;
    }
}
@media(min-width: 1200px) and (max-width: 1399px){
    .gst-card-icon .grid-img-mob{
        display: none;
    }
    .platform {
        width: 100%;
        margin: auto;
        background: #d9d9d9;
        border-radius: 0;
        padding: 31px 20px;
        position: relative;
        z-index: 2;
        margin-top: -20%;
    }
    .brand {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 24px;
        font-weight: 600;
        color: #444;
        margin-bottom: 0 !important;
        padding: 0 40px;
    }
    .platform-wrapper::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: 75%;
        background: #d9d9d9;
        border-radius: 50%;
        z-index: 1;
        top: 0%;
    }
    .below-circle-card{
        padding: 30px;
    }
    .platform-wrapper{
        margin-top: 70px;
    }
    .platform-base{
        top: 81%;
    }
}
.below-circle-card.circle-card1::before,
.below-circle-card.circle-card3::before{
    background: linear-gradient(180deg, #d33568, #ffffff) !important;
}


@media(max-width: 767px){
    .top-two-section .pill-row.apispage-pill {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    /*.apis-pill1{
        order:1;
    }
    .apis-pill2{
        order:2;
    }
    .apis-pill3{
        order:5;
    }
    .apis-pill4{
        order:3;
    }
    .apis-pill5{
        order:4;
    }*/
    .top-two-section .cert-list {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        align-items: center;
        justify-content: center;
    }
}

.api-suite-header-section{
    display: flex;
    flex-direction: row;
}
.api-suite-header{
    font-size:48px;
    font-weight: 700;
    background: linear-gradient(90deg, #ffffff, #d33568);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    margin-left: 10px;
}
.api-suite-container{
    max-width: 75%;
    padding: 50px 0px 0px 0px;
}
.gst-suite-section .container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.dark-hexagon-wrapper {
  position: relative;
  width: 130px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hex-static {
  stroke: #ffffff;
  stroke-width: 2;
}

/* Pink leads the sweep — large dash, small gap */
.hex-sweep-pink {
  stroke-dasharray: 450 450;
  stroke-dashoffset: 0;
  animation: sweepRotate 3s linear infinite;
}

.hex-sweep-white {
  stroke-dasharray: 450 450;
  stroke-dashoffset: -450;
  animation: sweepRotateWhite 3s linear infinite;
}

@keyframes sweepRotate {
  from { stroke-dashoffset: 0;    }
  to   { stroke-dashoffset: -900; }
}

@keyframes sweepRotateWhite {
  from { stroke-dashoffset: -450;  }
  to   { stroke-dashoffset: -1350; }
}

/* White starts offset so it's always opposite pink */
.hex-sweep-white {
  stroke-dasharray: 450 450;
  stroke-dashoffset: -450;
  animation: sweepRotateWhite 3s linear infinite;
}

@keyframes sweepRotateWhite {
  from { stroke-dashoffset: -450; }
  to   { stroke-dashoffset: -1350; }
}

.api-suite-logo {
  position: relative;
  z-index: 1;
  width: 55%;
}
.api-suite-leftHeader{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 600;
    color: #ffffff;
    border-top: 1px solid #8A8A8A;
    margin-top: 10px;
}
.pink-hexagon-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 260 / 296;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hex-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hex-static {
  stroke: #ffffff;
  stroke-width: 2;
}
.api-suite-blockContent {
  position: absolute;
  z-index: 1;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  width: 70%;
  line-height: 1.4;
}
.gst-suite-section .check-circle{
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-top: 20px;
}
.cta-hero {
  background:radial-gradient(ellipse 50% 130% at 50% 100%,
    #d33568 -45%,
    #3a0f28 45%,
    #000000 60%,
    #000000 100%);
  position: relative;
  overflow: hidden;
  padding: 60px 20px 70px;
  text-align: center;
}

.rings {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 340px;
  pointer-events: none;
}

.cta-content { position: relative; z-index: 2; }

.cta-sub {
  font-size: 48px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
  margin: 0 0 28px;
      background: linear-gradient(90deg, #ffffff, #d33568);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-heading {
  font-size: 44px;
  font-weight: 700;
  /*color: #fff;*/
  margin: 0 0 28px;
  background: linear-gradient(90deg, #D33568, #FFC4A0);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* ─── Mobile Responsiveness ─── */

@media (max-width: 991px) {
  .api-suite-container {
    max-width: 95%;
    padding: 30px 0px 0px 0px;
  }

  .api-suite-header-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    margin-bottom: 20px;
  }

  .api-suite-header {
    font-size: 32px;
    text-align: center;
  }

  .dark-hexagon-wrapper {
    width: 100px;
    height: 115px;
  }

  .api-suite-leftHeader {
    font-size: 18px;
    justify-content: flex-start;
    padding: 15px 10px;
    border-top: 1px solid lightgray;
    margin-top: 10px;
    text-align: center;
  }

  .pink-hexagon-wrapper {
    max-width: 160px;
    margin: 0 auto;
  }

  .api-suite-blockContent {
    font-size: 12px;
  }
}

@media (max-width: 767px) {
  .api-suite-container {
    max-width: 100%;
    padding: 20px 15px 0px;
  }

  .api-suite-header {
    font-size: 26px;
  }

  /* Stack hex grid: 2 columns on small screens */
  .col-lg-3.col-sm-12 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .api-suite-leftHeader {
    width: 100%;
    flex: 0 0 100%;
    max-width: 100%;
    font-size: 17px;
    padding: 12px 10px;
    justify-content: center;
    text-align: center;
  }

  .pink-hexagon-wrapper {
    max-width: 130px;
    margin: 8px auto;
  }

  .api-suite-blockContent {
    font-size: 11px;
    width: 75%;
  }

  /* CTA section */
  .cta-hero {
    padding: 40px 15px 0px 15px;
  }

  .cta-sub {
    font-size: 28px;
    margin: 0 0 16px;
  }

  .cta-heading {
    font-size: 26px;
    margin: 0 0 20px;
  }

  .rings {
    width: 138%;
    height: 279px;
    bottom: -50px;
  }

  .cta-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
  }

  .cta-buttons .btn-default {
    width: 80%;
    justify-content: center;
    margin-right: 0 !important;
  }
  .cta-hero{
    background:radial-gradient(ellipse 60% 80% at 50% 100%,
    #d33568 -45%,
    #3a0f28 45%,
    #000000 60%,
    #000000 100%);
  }
}

@media (max-width: 480px) {
  .api-suite-header {
    font-size: 22px;
  }

  .cta-sub {
    font-size: 22px;
  }

  .cta-heading {
    font-size: 21px;
  }

  /* Single column hex grid on very small screens */
  .col-lg-3.col-sm-12 {
    width: 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }

  .pink-hexagon-wrapper {
    max-width: 110px;
  }

  .api-suite-blockContent {
    font-size: 10px;
    width: 78%;
  }

  .cta-buttons .btn-default {
    width: 90%;
  }
}