@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap');

/* FORCE FONT – ENTIRE SITE */
* {
    font-family: 'Poppins', sans-serif;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
}


/* =====================================
   DIGITAL MARKETING – RADIAL GRADIENT
===================================== */




/* ===============================
   SECTION BACKGROUND
================================ */
.vistas-hover-section{
  padding:1px 6% !important;
  background:
    radial-gradient(circle at top right, #002a52f2 0%, #00000000 35%),
    #000000 !important;
  color:#ffffff !important;
  font-family: Montserrat, Arial, sans-serif !important;
}

/* ===============================
   TEXT
================================ */
.vistas-heading{
    font-weight: 400 !important;
  text-align:center !important;
  font-size:40px !important;
  color: #ffffff;
  margin-bottom:14px !important;
}

.vistas-intro{
    font-family: 'Poppins', sans-serif;
color:white!important;
  text-align:center !important;
  max-width:820px !important;
  margin:0 auto 60px !important;
  font-size:16px !important;
  opacity:.9 !important;
}

.vistas-footer{
  text-align:center !important;
  max-width:900px !important;
  margin:30px auto 0 !important;
  font-size:16px !important;
  opacity:.85 !important;
  color:white;
}

/* ===============================
   GRID
================================ */
.vistas-cards{
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:32px !important;
  max-width:1200px !important;
  margin:auto !important;
}

.vistas-card:nth-child(4){
  grid-column:1/2 !important;
}

.vistas-card:nth-child(5){
  grid-column:2/3 !important;
}

/* ===============================
   CARD BASE
================================ */
.vistas-card{
  position:relative !important;
  padding:36px 28px !important;
  background:#0c0c0c !important;
  border-radius:16px !important;
  text-align:center !important;
  overflow:hidden !important;
}

/* ===============================
   MIXED GRADIENT BORDER (ALWAYS MOVING)
================================ */
.vistas-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  padding:2px !important;
  border-radius:16px !important;
  background:linear-gradient(
    270deg,
    #ff0033,
    #ffcc00,
    #1e90ff,
    #ff0033
  ) !important;
  background-size:400% 400% !important;
  animation:borderFlow 6s linear infinite !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
}

@keyframes borderFlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ===============================
   HOVER GLOW – CURSOR FOLLOW
================================ */
.vistas-card::after{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  padding:2px !important;
  border-radius:16px !important;
  background:
    radial-gradient(
      160px circle at var(--x,50%) var(--y,50%),
      #ff0033,
      #ffcc00,
      #1e90ff,
      transparent 65%
    ) !important;
  opacity:0 !important;
  transition:opacity .25s ease !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;
  pointer-events:none !important;
}

.vistas-card:hover::after{
  opacity:1 !important;
}

/* ===============================
   CARD TEXT
================================ */
.vistas-card p{
  font-family: 'Poppins', sans-serif;
  margin:0 !important;
  font-size:16px !important;
  line-height:1.6 !important;
  color:#ffffff !important;
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:900px){
  .vistas-cards{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:600px){
  .vistas-cards{
    grid-template-columns:1fr !important;
  }

  .vistas-card:nth-child(4),
  .vistas-card:nth-child(5){
    grid-column:auto !important;
  }

  .vistas-heading{
    font-size:28px !important;
  }
}


/* ===============================
   SECTION BASE
================================ */
.vistas-services-section{
  padding:90px 6% !important;
  background:#000000 !important;
  color:#ffffff !important;
  font-family: Montserrat, Arial, sans-serif !important;
}
.vistas-red{
  color: #ff2a2a !important;
}
.vistas-service-card h4 a{
    color: inherit !important;      /* same h4 color */
    text-decoration: none !important;
    display: inline-block;
}

.vistas-service-card h4 a:hover{
    text-decoration: underline;     /* or remove if not needed */
}

.vistas-services-header{
  max-width:900px !important;
  margin:0 auto 60px !important;
  font-weight: 400;
  text-align:center !important;
}

.vistas-services-header h2{
  font-size:40px !important;
  font-weight:400 !important;
  margin-bottom:10px !important;
  color:#ffffff !important;
}

.vistas-services-header h3{
    padding-top:10px;
  font-size:20px !important;
  font-weight:500 !important;
  opacity:.9 !important;
  color:#ffffff !important;
}

.vistas-services-header p{
  font-size:15px !important;
  opacity:.85 !important;
  line-height:1.7 !important;
  color:#ffffff !important;
}

/* ===============================
   GRID
================================ */
.vistas-services-grid{
  max-width:1200px !important;
  margin:auto !important;
  display:grid !important;
  grid-template-columns:repeat(3,1fr) !important;
  gap:28px !important;
}

/* ===============================
   CARD BASE
================================ */
.vistas-service-card{
  position:relative !important;
  padding:36px 28px !important;
  background:#0b0b0b !important;
  border-radius:18px !important;
  min-height:380px !important; /* SAME HEIGHT */
  display:flex !important;
  flex-direction:column !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

/* ===============================
   GRADIENT BORDER (DEFAULT)
================================ */
.vistas-service-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  padding:1px !important;
  border-radius:18px !important;
  background:linear-gradient(
    135deg,
    #ff0033,
    #ffcc00,
    #1e90ff
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  opacity:.6 !important;
  transition:opacity .3s ease !important;
  pointer-events:none !important;
}

.vistas-service-card:hover::before{
  opacity:1 !important;
}

/* ===============================
   CURSOR FOLLOW GLOW
================================ */


.vistas-service-card:hover::after{
  opacity:1 !important;
}

/* ===============================
   TEXT
================================ */
.vistas-service-card h4{
    font-family: 'Montserrat', sans-serif;
    font-weight:600!important;
  font-size:20px !important;
  margin-bottom:10px !important;
  color:#ffffff !important;
}

.vistas-service-card p{
  font-size:14px !important;
  opacity:.9 !important;
  margin-bottom:12px !important;
  color:#ffffff !important;
}

.vistas-service-card ul{
  padding-left:18px !important;
  margin-bottom:12px !important;
}

.vistas-service-card ul li{
     font-family: 'Poppins', sans-serif!important;
  font-size:14px !important;
  margin-bottom:6px !important;
  opacity:.85 !important;
  color:#ffffff !important;
}

.service-note{
  font-size:13px !important;
  opacity:.75 !important;
  color:#ffffff !important;
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:1024px){
  .vistas-services-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:600px){
  .vistas-services-grid{
    grid-template-columns:1fr !important;
  }

  .vistas-services-header h2{
    font-size:28px !important;
  }
}


/* ===============================
   SECTION BASE
================================ */
.vistas-process-section{
  padding:30px 6% !important;
  background:#000000 !important;
  color:#ffffff !important;
  font-family: Montserrat, Arial, sans-serif !important;
}

.vistas-process-header{
  max-width:850px !important;
  margin:0 auto 70px !important;
  text-align:center !important;
}

.vistas-process-header h2{
  font-size:40px !important;
  margin-bottom:10px !important;
  font-weight: 400!important;
  color:#ffffff !important;
}

/* 🔥 ONLY THIS WORD RED */
.process-red{
    font-weight: 500;
  color:#ff0033 !important;
}

.vistas-process-header h3{
  font-size:20px !important;
  font-weight:500 !important;
  opacity:.9 !important;
  margin-bottom:12px !important;
  color:#ffffff !important;
}

.vistas-process-header p{
  font-size:15px !important;
  opacity:.85 !important;
  line-height:1.7 !important;
  color:#ffffff !important;
}

/* ===============================
   GRID
================================ */
.vistas-process-grid{
  max-width:1200px !important;
  margin:auto !important;
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:30px !important;
}

/* ===============================
   CARD
================================ */
.vistas-process-card{
 font-family: 'Montserrat', sans-serif;
  position:relative !important;
  background:#0b0b0b !important;
  padding:42px 30px !important;
  border-radius:18px !important;
  min-height:250px !important;
  overflow:hidden !important;
  transition:transform .3s ease !important;
}

/* ===============================
   GRADIENT BORDER ONLY
================================ */
.vistas-process-card::before{
  content:"" !important;
  position:absolute !important;
  inset:0 !important;
  padding:1px !important;
  border-radius:18px !important;
  background:linear-gradient(
    135deg,
    #ff0033,
    #ffcc00,
    #1e90ff
  ) !important;

  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0) !important;
  -webkit-mask-composite:xor !important;
  mask-composite:exclude !important;

  opacity:.7 !important;
  pointer-events:none !important;
}

/* ===============================
   STEP NUMBER
================================ */
.step-number{
  font-size:32px !important;
  font-weight:700 !important;
  margin-bottom:12px !important;
  display:block !important;
  background:linear-gradient(
    135deg,
    #ff0033,
    #ffcc00,
    #1e90ff
  ) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

/* ===============================
   TEXT
================================ */
.vistas-process-card h4{
  font-size:18px !important;
  margin-bottom:10px !important;
  color:#ffffff !important;
}

.vistas-process-card p{
  font-size:14px !important;
  opacity:.85 !important;
  line-height:1.6 !important;
  color:#ffffff !important;
}

/* ===============================
   HOVER
================================ */
.vistas-process-card:hover{
  transform:translateY(-6px) !important;
}

/* ===============================
   RESPONSIVE
================================ */
@media(max-width:1024px){
  .vistas-process-grid{
    grid-template-columns:repeat(2,1fr) !important;
  }
}

@media(max-width:600px){
  .vistas-process-grid{
    grid-template-columns:1fr !important;
  }

  .vistas-process-header h2{
    font-size:28px !important;
  }
}

/* =============================
   SECTION
============================= */
.vistas-battle-section{
  background:#000000 !important;
  padding:100px 8% !important;
  font-family: Montserrat, Arial, sans-serif !important;
  color:#ffffff !important;
}

.battle-title{
  text-align:center !important;
  font-size:36px !important;
  margin-bottom:70px !important;
  color:#ffffff !important;
}
.battle-title .highlight-red {
    color: red; /* or #e63946 */
    font-weight: 500;
}

/* =============================
   GRID
============================= */
.battle-grid{
  max-width:1100px !important;
  margin:auto !important;
  display:grid !important;
  grid-template-columns:repeat(2,1fr) !important;
  gap:30px !important;
}

/* =============================
   CARD
============================= */
.battle-card{
  position:relative !important;
  padding:36px 30px 30px !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
  border-radius:18px !important;
  transition:all .4s ease !important;
}

.battle-card:hover{
  transform:translateY(-6px) !important;
  border-color:#2f7cff !important;
  box-shadow:0 25px 60px rgba(47,124,255,.18) !important;
}

/* =============================
   TAG
============================= */
.battle-tag{
  position:absolute !important;
  top:-12px !important;
  left:30px !important;
  background:#000000 !important;
  padding:6px 14px !important;
  font-size:13px !important;
  letter-spacing:1px !important;
  border-radius:20px !important;
  border:1px solid rgba(255,255,255,.25) !important;
  color:#ffffff !important;
}

/* =============================
   COLUMNS
============================= */
.battle-cols{
  display:grid !important;
  grid-template-columns:1fr 1fr !important;
  gap:25px !important;
  margin-top:15px !important;
}

.battle-generic p{
  color:#ffffff !important;
  font-size:16px !important;
  opacity:.85 !important;
}

.battle-vistas p{
  font-size:18px !important;
  font-weight:600 !important;
  background:linear-gradient(
    90deg,
    #ff003c,
    #5b6cff,
    #00aaff
  ) !important;
  -webkit-background-clip:text !important;
  -webkit-text-fill-color:transparent !important;
}

.battle-cols small{
  display:block !important;
  font-size:11px !important;
  opacity:.7 !important;
  margin-bottom:6px !important;
  color:#ffffff !important;
}

/* =============================
   MOBILE
============================= */
@media(max-width:900px){
  .battle-grid{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:600px){
  .battle-cols{
    grid-template-columns:1fr !important;
  }

  .battle-title{
    font-size:26px !important;
  }
}

/* 🔒 FULLY UNIQUE & SCOPED */
.industry-section{
    background:#000000 !important;
    color:#ffffff !important;
    text-align:center !important;
    padding:10px 15% !important;
    font-family:Poppins,sans-serif !important;
}

/* ===============================
   HEADINGS
================================ */
.industry-section .industry-title{
    font-family:"Montserrat", sans-serif !important;
    font-size:40px !important;
    font-weight:400 !important;
    color:#ffffff !important;
}

.industry-section .industry-subtext{
    opacity:.75 !important;
    font-family:"Poppins", sans-serif !important;
    width:100% !important;
    margin:0 auto 70px !important;
    font-size:18px !important;
    line-height:28px !important;
    color:#ffffff !important;
}

/* ===============================
   ROW LAYOUT
================================ */
.industry-section .industry-item{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:60px !important;
    margin:80px 0 !important;
}

.industry-section .industry-reverse{
    flex-direction:row-reverse !important;
}

/* ===============================
   TEXT COLUMN
================================ */
.industry-section .industry-text{
    width:40% !important;
}

.industry-section .industry-text h3{
    color:#7a86ff !important;
    font-family:"Montserrat", sans-serif !important;
    font-size:30px !important;
    text-align:center !important;
    margin-bottom:10px !important;
}

.industry-section .industry-text p{
    opacity:.85 !important;
    font-family:"Poppins", sans-serif !important;
    text-align:center !important;
    font-size:25px !important;
    line-height:32px !important;
    color:#ffffff !important;
}

/* ===============================
   IMAGE WRAPPER
================================ */
.industry-section .industry-img{
    width:400px !important;
    min-height:300px !important;
    background:#111111 !important;
    border-radius:22px !important;
    padding:5px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    overflow:hidden !important;
    --x:50% !important;
    --y:50% !important;
}

.industry-section .industry-img img{
    width:90% !important;
    object-fit:contain !important;
}

/* ===============================
   GRADIENT BORDER
================================ */
.industry-section .industry-img::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    border-radius:inherit !important;
    padding:2px !important;
    background:linear-gradient(
        135deg,
        #5d7eff,
        #ffb84a,
        #ff5353
    ) !important;

    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0) !important;
    -webkit-mask-composite:xor !important;
    mask-composite:exclude !important;

    opacity:.45 !important;
    transition:all .3s ease !important;
}

.industry-section .industry-img:hover::before{
    background:radial-gradient(
        circle at var(--x) var(--y),
        #ffcf00,
        #ff4d00,
        #000000 70%
    ) !important;
    opacity:1 !important;
}

/* ===============================
   MOBILE FIX
================================ */
@media(max-width:950px){

    .industry-section .industry-item,
    .industry-section .industry-reverse{
        flex-direction:column !important;
        gap:30px !important;
    }

    .industry-section .industry-title{
        padding:20px !important;
        font-family:"Montserrat", sans-serif !important;
        font-size:30px !important;
        font-weight:700 !important;
    }

    .industry-section .industry-text{
        width:100% !important;
        text-align:center !important;
    }

    .industry-section .industry-text h3{
        font-size:15px !important;
        padding:30px !important;
        text-align:center !important;
    }

    .industry-section .industry-text p{
        font-size:15px !important;
        line-height:26px !important;
    }

    .industry-section .industry-img{
        width:100% !important;
    }

    .industry-section .industry-subtext{
        width:90% !important;
    }
}


/* ===============================
   FAQ SECTION
================================ */
.vistas-faq-section{
  background:#000000 !important;
  padding:80px 8% !important;
  font-family: Montserrat, Arial, sans-serif !important;
  color:#ffffff !important;
}

.faq-title{
  text-align:center !important;
  font-size:36px !important;
  margin-bottom:60px !important;
  color:#ffffff !important;
}

/* ===============================
   FAQ WRAPPER
================================ */
.faq-wrapper{
  max-width:900px !important;
  margin:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:20px !important;
}

/* ===============================
   FAQ ITEM
================================ */
.faq-item{
  border-radius:16px !important;
  overflow:hidden !important;
  background:rgba(255,255,255,0.03) !important;
  border:1px solid rgba(255,255,255,0.12) !important;
}

/* Question */
.faq-question{
  width:100% !important;
  background:none !important;
  border:none !important;
  padding:22px 26px !important;
  font-size:18px !important;
  font-weight:500 !important;
  color:#ffffff !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  cursor:pointer !important;
  text-align:left !important;
}

/* Icon */
.faq-icon{
  font-size:22px !important;
  transition:transform .3s ease !important;
  color:#ffffff !important;
}

/* Answer */
.faq-answer{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .4s ease !important;
  padding:0 26px !important;
}

.faq-answer p{
  font-size:15px !important;
  line-height:1.7 !important;
  color:#d9d9d9 !important;
  padding-bottom:22px !important;
}

/* Active state */
.faq-item.active .faq-answer{
  max-height:300px !important;
}

.faq-item.active .faq-icon{
  transform:rotate(45deg) !important;
}

/* ===============================
   MOBILE
================================ */
@media(max-width:768px){
  .faq-title{
    font-size:26px !important;
  }

  .faq-question{
    font-size:16px !important;
  }
}



/* ===============================
   SECTION BASE
================================ */
.vistas-qa-section{
  background:#000000 !important;
  padding:80px 8% !important;
  font-family: Montserrat, Arial, sans-serif !important;
  color:#ffffff !important;
}

.qa-title{
  text-align:center !important;
  font-size:36px !important;
  margin-bottom:60px !important;
  color:#ffffff !important;
}

/* ===============================
   WRAPPER
================================ */
.qa-wrapper{
  max-width:900px !important;
  margin:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:16px !important;
}

/* ===============================
   ITEM
================================ */
.qa-item{
  border:1px solid rgba(255,255,255,.15) !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.02) !important;
  overflow:hidden !important;
}

/* ===============================
   QUESTION
================================ */
.qa-question{
  width:100% !important;
  background:none !important;
  border:none !important;
  padding:20px 24px !important;
  font-size:17px !important;
  color:#ffffff !important;
  text-align:left !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  cursor:pointer !important;
}

/* ===============================
   TOGGLE ICON
================================ */
.qa-toggle{
  font-size:22px !important;
  transition:transform .3s ease !important;
  color:#ffffff !important;
}

/* ===============================
   ANSWER
================================ */
.qa-answer{
  max-height:0 !important;
  overflow:hidden !important;
  transition:max-height .4s ease !important;
  padding:0 24px !important;
}

.qa-answer p,
.qa-answer li{
  font-size:15px !important;
  line-height:1.7 !important;
  color:#dcdcdc !important;
}

.qa-answer ul,
.qa-answer ol{
  padding-left:20px !important;
  margin-bottom:20px !important;
}

/* ===============================
   ACTIVE STATE
================================ */
.qa-item.active .qa-answer{
  max-height:500px !important;
}

.qa-item.active .qa-toggle{
  transform:rotate(45deg) !important;
}

/* ===============================
   MOBILE
================================ */
@media(max-width:768px){
  .qa-title{
    font-size:26px !important;
  }

  .qa-question{
    font-size:15px !important;
  }
}