/* Scoped styles — only targets .visa-tag-hero so it won't affect global html/body */
@import url('https://fonts.googleapis.com/css2?family=ABeeZee&display=swap');

@font-face {
  font-family: 'Visa Dialect';
  src: url('fonts/VisaDialect/VisaDialect-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('fonts/VisaDialect/VisaDialect-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('fonts/VisaDialect/VisaDialect-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Visa Dialect';
  src: url('fonts/VisaDialect/VisaDialect-Semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
.visa-tag-hero {
background:linear-gradient(to right, #163AC2, #10277F);
color: #ffffff;
position: relative;
overflow: hidden; /* hide overflowing decorative images */

font-family: 'Visa Dialect', Arial, sans-serif;
}
.visa-tag-hero__arrows {
  display: block;         /* ensures it flows in column */
  margin-top: 20px;       /* spacing from text above */
  break-inside: avoid;    /* prevents splitting the image */
}
.visa-tag-hero__left {
  /* no flex, just a container if needed */
  max-width: 720px;
  gap: 20px; /* optional spacing */
}

/* description + arrow multi-column layout */
.visa-tag-hero__desc-wrapper {
  max-width: 720px;
  position: relative;
}
.hero__arrows-bottom {
display: block;
 margin-top: 15px;
}

.hero__arrows-main {
    position: absolute;
    top: 10px;
    left: 640px;
}

.visa-tag-hero__cards {
    position: absolute;
    top: 94px;
    right: 0px;
    left:875px;
    height: auto;
}
.hero__arrow-bottom-wrapper {
  width: 100%;
  display: block;
  break-inside: avoid;
  margin-top: 20px;
  margin-left: -40px;   /* cancel out .container padding-left */
  margin-right: 0;
}
.hero__arrow-bottom-wrapper img {
  display: block;
       /* stretch full width */
  height: auto;
}
/* simple container - adapt to your theme container if you already have one */
.visa-tag-hero .container {
margin: 0 auto;
  position: relative;
  /* display: flex;  remove this */
  /* align-items: flex-start; remove this */
  padding: 50px 0px 0px 40px;
}
/* Top-left logos (PYMNTS + Visa vector) */
.visa-tag-hero__logos {
display: flex;
  gap: 16px;
  align-items: center;
}
.visa-tag-hero__logos img:first-child {
  padding-right: 16px;            /* space before divider */
  border-right: 2px solid #ffffff; /* white vertical line */

}

.visa-tag-hero__logos img {
display: block;
width: auto;
}
/* Main content block */
.visa-tag-hero__content {
max-width: 720px;
z-index: 15; /* always above decorative art */
position: relative;
padding: 10px 0px; /* breathing room on small screens */
font-family: 'Visa Dialect', Arial, sans-serif;
}


.visa-tag-hero__title {
max-width: 600px; 
margin: 30px 0 25px;
font-size: 48px;
line-height: 120%;
letter-spacing: 0.05em;
font-family: 'Visa Dialect', Arial, sans-serif;
font-weight: 300!important;
text-transform: none;
color:#CEEEFD;
}

.visa-tag-hero__desc{
font-family: 'ABeeZee', sans-serif;
line-height: 150%;
font-weight: 400;
font-size: 16px;
margin: 0 0 20px;
}
/* second section */
.survey-section {
  background-color: #E6F6FE;
  padding: 40px 40px;
  margin-bottom:20px;
}

.survey-container {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 1200px;
  /*margin: 0 auto;*/
  gap: 30px;
}

.survey-left {
  flex: 0 0 60%;
}

.survey-text {
  font-size: 16px;
  line-height: 1.5;
  color: #414042;
  margin-bottom: 20px;
  max-width: 90%;
  font-family: 'Visa Dialect', Arial, sans-serif;  
}

.survey-map {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
}

.survey-right {
  flex: 0 0 40%;
}

.icon-grid {
  display: grid;
  grid-template-columns: 0.5fr 0.45fr;
  gap: 30px 20px;
}

.icon-item {
  text-align: center;
}

.icon-item img {
 
  margin-bottom: 10px;
}

.icon-item span {
  display: block;
  font-size: 14px;
  color: #414042;
  text-transform: uppercase;
  font-family: 'Visa Dialect', Arial, sans-serif;  
}
.survey-line {
  width: 60px;
  height: 3px;
  background-color: #1D59D5;
  margin-bottom: 20px;
}
.na{
  position:absolute;
  top: 37%;
  left: 18%;
}
.lac{
   position:absolute;
  top: 64%;
  left: 28%;
}
.eu{
   position:absolute;
 top: 34%;
  left: 51%;
}
.cemea{
  position:absolute;
top: 59%;
  left: 54%;
}
.apac{
  position:absolute;
top: 55%;
  left: 78%;
}
/* Responsive */
@media (max-width: 991px) {
  .survey-container {
    flex-direction: column;
  }
  .survey-left, .survey-right {
    flex: 100%;
  }
  .survey-map {
    max-width: 100%;
  }
   .icon-grid {
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr; 
  }
}
@media (max-width: 820px) {
  .icon-grid {
    gap: 15px;
    grid-template-columns: 1fr 1fr; 
  }
 
}

@media (max-width: 480px) {
  .icon-grid {
    gap: 10px;
    grid-template-columns: 1fr 1fr; 
  }
  
}
@media (max-width: 1199px) and (min-width: 992px) {
  .hero__arrows-main {
     top: 104px;
     left:325px;
  }
  .visa-tag-hero__cards {
   top: 226px;
   left:543px;
  }
}
.map-container {
  position: relative;
  width: 100%;
 
}

@media (max-width: 1199px) {
  .visa-tag-hero__title,.visa-tag-hero__desc-wrapper {
    max-width: 510px; /* fits better on ~1140 screens */
  }
  .visa-tag-hero__title{
    font-size: 43px;
  }
  .visa-tag-hero__cards{
     top:227px;
  }
}
/* Mobile Medium (411px – 540px) */
@media (max-width: 539px) and (min-width: 411px) {
  .visa-tag-hero .container{
    padding: 25px 0px 0px 25px
  }
   .visa-tag-hero__desc-wrapper{
    max-width: 85%;
  }
  .hero__arrow-bottom-wrapper img{display:none;}
  .visa-tag-hero__cards{display:none;}
  .visa-tag-hero__cards{
    top:255px;
    width:67%;
    left:276px;
  }
}
@media (width:540px) {
  .visa-tag-hero .container{
    padding: 25px 0px 0px 25px
  }
   .visa-tag-hero__desc-wrapper{
    max-width: 53%;
  }
  .visa-tag-hero__title{
    font-size:35px;
    max-width: 90%;
    letter-spacing: 0.03em;
  }
.hero__arrow-bottom-wrapper img{display:none;}
 
  .visa-tag-hero__cards{
    top:157px;
    width:60%;
    left:289px;
  }
}
@media (width:1140px) {

  .hero__arrows-main{
    top:29px;
  }
  .visa-tag-hero__cards{
    top:196px;
    left:516px;
  }
  .visa-tag-hero__title{
    font-size: 40px;
  }
}

@media (max-width: 991px) {
 /*.visa-tag-hero__title,.visa-tag-hero__desc-wrapper {
    max-width: 500px;
  }*/
}

@media (max-width: 767px) {
  .visa-tag-hero__title {
    max-width: 100%; /* full width on mobile */
   
  }
  .visa-tag-hero .container{
    padding: 25px 0px 0px 25px
  }
 /* .visa-tag-hero__desc-wrapper{
    max-width: 53%;
  }*/
} 
/* Mobile Small (≤ 410px) */
@media (max-width: 410px) {
  .visa-tag-hero__desc-wrapper{
    max-width: 85%;
  }
  .hero__arrow-bottom-wrapper img{
    display:none;
  }
}
@media (min-width: 768px) and (max-width: 834px) {
  .icon-grid {
    gap: 15px;
    grid-template-columns: 1fr 1fr 1fr; 
  }
   .visa-tag-hero__desc-wrapper{
    max-width: 53%;
  }
  .visa-tag-hero__cards {
        top: 198px;
        left: 374px;
        width: 47%;
    }
}
@media (width: 1366px) {
  .hero__arrows-main{
    left:584px;
  }
  .visa-tag-hero__cards {
    
    top: 162px;
    
    left: 775px;
    height: auto;
    width: 31%;
}
}
.tag-list{
font-family: 'Visa Dialect', Arial, sans-serif;
font-weight: 600;
text-transform: none;
display: inline-block;
padding-bottom:10px;
border-bottom: solid 3px #1D59D5;
font-size: 24px;
margin-bottom: 30px;
}