.hero .hero-content .hero-stats {
   justify-content: center;
}

/* Section */
.stats-section-ux {
  padding: 40px 20px;
  /*background: #ffffff;*/
}

/* Wrapper */
.stats-wrapper-ux {
  max-width: 1100px;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Card */
.stats-card-ux {
  background: #ffffff;
  border-radius: 14px;
  padding: 30px 20px;
  text-align: center;
  border: 1px solid #eef0f4;
  transition: all 0.35s ease;
}

/* Icon */
.stats-icon-ux {
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 10px;
  background: #f2f4ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Value */
.stats-value-ux {
  font-size: 26px;
  font-weight: 700;
  margin: 6px 0;
  color: #111;
}

/* Text */
.stats-text-ux {
  font-size: 14px;
  color: #6b7280;
}

/* First Card (Active + Hover Animation) */
.stats-card-active-ux {
    background: #4cade3 !important;
    color: #ffffff;
    border: none;
    box-shadow: 0 10px 30px rgba(0, 139, 154, 0.35);
}

.stats-card-active-ux .stats-value-ux,
.stats-card-active-ux .stats-text-ux {
  color: #ffffff;
}

.stats-card-active-ux .stats-icon-ux {
  background: rgba(255, 255, 255, 0.15);
}

/* Hover Animation */
.stats-card-active-ux:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 16px 40px rgba(0, 139, 154, 0.5);
}

/* Responsive */
@media (max-width: 900px) {
  .stats-wrapper-ux {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-wrapper-ux {
    grid-template-columns: 1fr;
  }
}


.excel-section-ui {
  padding: 80px 20px;
  background: #ffffff;
}

.excel-container-ui {
  max-width: 1100px;
  margin: auto;
  text-align: center;
}

/* Headings */
.excel-title-ui {
  font-size: 36px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.excel-subtitle-ui {
  font-size: 15px;
  color: #6b7280;
  margin-bottom: 50px;
  line-height: 1.6;
}

/* Grid */
.excel-grid-ui {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.excel-card-ui {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 18px;
  padding: 40px 25px;
  transition: all 0.3s ease;
}

.excel-card-ui h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 16px 0 8px;
  color: #111827;
}

.excel-card-ui p {
  font-size: 14px;
  color: #6b7280;
}

/* Icon */
.excel-icon-ui {
  width: 56px;
  height: 56px;
  margin: auto;
  border-radius: 14px;
  background: #f4f6ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  color: #3758f9;
}

/* Active Card */
.excel-card-active-ui {
  background: #eaf2ff;
  border-color: #bcd6ff;
}

.excel-card-active-ui .excel-icon-ui {
  background: #ffffff;
}

/* Hover */
.excel-card-ui:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 900px) {
  .excel-grid-ui {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .excel-grid-ui {
    grid-template-columns: 1fr;
  }

  .excel-title-ui {
    font-size: 28px;
  }
}


.howworks-sec-ui {
  padding: 90px 20px;
  background: #ffffff;
}

.howworks-container-ui {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* LEFT */
.howworks-title-ui {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #111827;
}

.howworks-step-ui {
  display: flex;
  align-items: flex-start;
  margin-bottom: 28px;
}

.howworks-number-ui {
  font-size: 48px;
  font-weight: 700;
  color: #e5e7eb;
  width: 70px;
}

.howworks-box-ui {
  background: #ffffff;
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transition: all 0.3s ease;
}

.howworks-box-ui:hover {
  transform: translateY(-5px);
}

.howworks-box-ui h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.howworks-box-ui p {
  font-size: 14px;
  color: #6b7280;
}

/* Icons */
.howworks-icon-ui {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

.icon-blue-ui {
  background: #eaf2ff;
  color: #2563eb;
}

.icon-orange-ui {
  background: #fff4e5;
  color: #f97316;
}

.icon-purple-ui {
  background: #f3e8ff;
  color: #7c3aed;
}

/* RIGHT */
.howworks-right-ui {
  position: relative;
}

.howworks-img-large-ui img {
  width: 100%;
  border-radius: 22px;
}

.howworks-img-small-ui {
  position: absolute;
  top: 40px;
  left: -40px;
  width: 200px;
}

.howworks-img-small-ui img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Badge */
.howworks-badge-ui {
  position: absolute;
  bottom: -25px;
  left: -30px;
  background: #ffffff;
  padding: 14px 18px;
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  display: flex;
  gap: 12px;
  align-items: center;
}

.howworks-avatars-ui img {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -10px;
}

.howworks-avatars-ui img:first-child {
  margin-left: 0;
}

/* Responsive */
@media (max-width: 900px) {
  .howworks-container-ui {
    grid-template-columns: 1fr;
  }

  .howworks-img-small-ui,
  .howworks-badge-ui {
    position: static;
    margin-top: 20px;
  }
}

.faq-section-ui {
  padding: 80px 20px;
  background: #ffffff;
}

.faq-container-ui {
    max-width: 1200px;
    margin: auto;
    background: #e8ebff;
    padding: 40px;
    border-radius: 30px;
}

.faq-title-ui {
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 40px;
  color: #111827;
}

.faq-grid-ui {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.faq-column-ui {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.faq-item-ui {
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 20px;
  background: #ffffff;
  transition: all 0.3s ease;
}

.faq-item-ui.active-ui {
  background: #eaf2ff;
  border-color: #bcd6ff;
}

.faq-question-ui {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}

.faq-number-ui {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #f1f5f9;
    color: #3469aa;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.faq-question-ui h4 {
  flex: 1;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
}

.faq-toggle-ui {
    font-size: 20px;
    font-weight: 600;
    color: #e8b947;
}

.faq-answer-ui {
  display: none;
  margin-top: 12px;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.faq-item-ui.active-ui .faq-answer-ui {
  display: block;
}

/* Responsive */
@media (max-width: 900px) {
  .faq-grid-ui {
    grid-template-columns: 1fr;
  }
}

.masters-section-ui {
  padding: 90px 20px;
  background: #ffffff;
}

.masters-container-ui {
  max-width: 1200px;
  margin: auto;
  text-align: center;
}

/* Headings */
.masters-title-ui {
  font-size: 36px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 12px;
}

.masters-subtitle-ui {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 50px;
}

/* Grid */
.masters-grid-ui {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Card */
.masters-card-ui {
  background: #ffffff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  padding: 36px 28px;
  text-align: left;
  transition: all 0.3s ease;
}

.masters-card-ui:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

/* Quote */
.masters-quote-ui {
  font-size: 42px;
  color: #d1d5db;
  margin-bottom: 10px;
  line-height: 1;
}

/* Text */
.masters-text-ui {
  font-size: 14px;
  color: #374151;
  line-height: 1.7;
  margin-bottom: 24px;
}

/* Author */
.masters-author-ui strong {
  display: block;
  font-size: 14px;
  color: #111827;
}

.masters-author-ui span {
  font-size: 13px;
  color: #6b7280;
}

/* Responsive */
@media (max-width: 900px) {
  .masters-grid-ui {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 520px) {
  .masters-grid-ui {
    grid-template-columns: 1fr;
  }

  .masters-title-ui {
    font-size: 28px;
  }
}

.cta-section-ui {
  padding: 80px 20px;
  /*background: #ffffff;*/
}

.cta-container-ui {
    max-width: 1100px;
    margin: auto;
    padding: 60px 40px;
    border-radius: 22px;
    text-align: center;
    background: #4cade3;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

/* Title */
.cta-title-ui {
  font-size: 32px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 14px;
}

/* Subtitle */
.cta-subtitle-ui {
    font-size: 14px;
    color: #e8e8e8;
    max-width: 700px;
    margin: 0 auto 36px;
    line-height: 1.6;
}

/* Form */
.cta-form-ui {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* Input */
.cta-input-ui {
  display: flex;
  align-items: center;
  background: #ffffff;
  border-radius: 50px;
  padding: 12px 18px;
  border: 1px solid #e5e7eb;
  min-width: 280px;
}

.cta-input-ui input {
  border: none;
  outline: none;
  font-size: 14px;
  flex: 1;
}

.cta-icon-ui {
  margin-right: 10px;
  font-size: 16px;
  color: #0ea5e9;
}

/* Button */
.cta-btn-ui {
    background: #e8b947;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 26px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cta-btn-ui:hover {
  background: #0284c7;
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 600px) {
  .cta-title-ui {
    font-size: 26px;
  }

  .cta-container-ui {
    padding: 40px 20px;
  }
}

.hq-footer-ui {
    background: linear-gradient(135deg, #3164a6, #3164a6);
    padding: 70px 20px 30px;
    color: #ffffff;
}

.hq-footer-container-ui {
  max-width: 1200px;
  margin: auto;
}

/* TOP */
.hq-footer-top-ui {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
}

/* Brand */
.hq-logo-ui {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
}

.hq-newsletter-ui {
  display: flex;
  gap: 10px;
}

.hq-newsletter-ui input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 30px;
  border: 1px solid #2c3e50;
  background: transparent;
  color: #ffffff;
  outline: none;
}

.hq-newsletter-ui input::placeholder {
  color: #9ca3af;
}

.hq-newsletter-ui button {
  padding: 12px 22px;
  border-radius: 30px;
  border: none;
  background: #ffffff;
  color: #0f1c26;
  font-weight: 600;
  cursor: pointer;
}

/* Columns */
.hq-footer-col-ui h4 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 14px;
}

.hq-footer-col-ui ul {
  list-style: none;
  padding: 0;
}

.hq-footer-col-ui li {
  margin-bottom: 10px;
}

.hq-footer-col-ui a {
  color: #cbd5e1;
  font-size: 14px;
  text-decoration: none;
}

.hq-footer-col-ui a:hover {
  color: #ffffff;
}

/* App buttons */
.hq-app-buttons-ui {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hq-app-btn-ui {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000000;
  color: #ffffff;
  padding: 12px;
  border-radius: 10px;
  font-size: 14px;
  text-decoration: none;
}

/* Divider */
.hq-footer-divider-ui {
  height: 1px;
  background: rgba(255,255,255,0.1);
  margin: 40px 0 20px;
}

/* Bottom */
.hq-footer-bottom-ui {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}

.hq-footer-bottom-ui p {
  font-size: 13px;
  color: #9ca3af;
}

/* Social */
.hq-social-ui {
  display: flex;
  gap: 12px;
}

.hq-social-ui a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 14px;
}

.hq-social-ui a:hover {
  background: #ffffff;
  color: #0f1c26;
}

/* Responsive */
@media (max-width: 900px) {
  .hq-footer-top-ui {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 520px) {
  .hq-footer-top-ui {
    grid-template-columns: 1fr;
  }
}

.highlight-img img{
    position: absolute;
    bottom: 0;
}

.user-img-cust{
    width: 120px;
    object-fit: contain;
}

.hero .hero-content .hero-stats .stat-item h3 {
    font-size: 18px !important;
    font-weight: 300 !important;
    color: #191919 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

img.star-img-left {
    position: absolute;
    top: 40%;
}

img.star-img-right {
    position: absolute;
    top: 55%;
    right: 0;
}


.bg-icon-cust {
    background-image: url(../img/bg-icon-diff.svg) !important;
    background-repeat: no-repeat !important;
    object-fit: contain !important;
}

.user-img-cust-2{
  width: 70px;
  object-fit: contain;
}
.hero {
    /*padding: 220px;*/
}
.hero::before {
    opacity: 0.06;
}

/* Custom Styles for How It Works Section */
.hw-main-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #1a2b3c;
}

.hw-step-number {
    font-size: 4rem;
    font-weight: 800;
    color: #e9ecef; /* Light gray for the large background numbers */
    line-height: 1;
}

.hw-step-card {
    background: #fff;
    padding: 20px 25px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid rgba(0,0,0,0.02);
    width: 100%;
}

.hw-step-indent {
    /*padding-left: 50px;*/
}

.hw-icon-box {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

/* Specific Icon Backgrounds */
.hw-bg-blue { background-color: #e7f0ff; color: #007bff; }
.hw-bg-orange { background-color: #fff3e6; color: #ff9800; }
.hw-bg-purple { background-color: #f5ebff; color: #9c27b0; }

/* Image Grid Styling */
.hw-img-wrapper {
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.hw-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hw-img-short { height: 350px; }
.hw-img-tall { height: 450px; }

/* Stats Badge Styling */
.hw-stats-badge {
    background: #fff;
    padding: 15px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    position: relative;
    z-index: 2;
    margin-top: -30px;
    width: fit-content;
}

.hw-avatar-group {
    display: flex;
}

.hw-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid #fff;
    margin-left: -10px;
}

.hw-avatar:first-child { margin-left: 0; }

/* Responsive adjustments */
@media (max-width: 991px) {
    .hw-step-indent { padding-left: 0; }

    .custom-tabs {
    border: none;
    display: flex;
    gap: 0;
    margin-bottom: -1px;
    flex-flow: nowrap;
    overflow-x: scroll;
    overflow-y: hidden;
}

.gup-demo-wrapper {
    padding: 20px;
}

.faq-container-ui {
    padding: 10px;
 }
}


body.ux-hero-body {
    font-family: 'Inter', sans-serif;
    background: var(--ux-bg-gradient);
    overflow-x: hidden;
}

.ux-hero-wrapper {
    padding-top: 80px;
    position: relative;
    min-height: 70vh;
}

/* Floating Badges */
.ux-badge {
    position: absolute;
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    background: white;
    z-index: 1;
}

.ux-sql-badge { top: 15%; left: 5%; color: #818cf8; border: 1px solid #e0e7ff; }
.ux-dash-badge { top: 45%; left: 8%; color: #38bdf8; border: 1px solid #e0f2fe; }
.ux-site-badge { top: 20%; right: 5%; color: #fb7185; border: 1px solid #ffe4e6; }
.ux-play-badge { top: 48%; right: 10%; color: #fbbf24; border: 1px solid #fef3c7; }

/* Top Pill */
.ux-pill {
    background: #f0ecff;
    /* border: 1px solid #e8b947; */
    padding: 10px 12px;
    border-radius: 100px;
    font-size: 14px;
    color: #3ab3bd;
    font-weight: 400;
    /* box-shadow: 0 2px 10px rgba(0,0,0,0.03); */
}

.ux-sparkle { color: #f472b6; margin-right: 8px; }

/* Typography */
.ux-main-title {
    font-weight: 800;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #1e293b;
    letter-spacing: -1px;
    line-height: 1.2;
}

.ux-hero-subtitle {
    color: var(--ux-text-muted);
    font-size: 1.1rem;
    max-width: 700px;
    line-height: 1.6;
}

/* Buttons */
.ux-btn-primary {
    background-color: var(--ux-primary);
    color: white;
    padding: 12px 35px;
    border-radius: 12px;
    font-weight: 600;
    transition: transform 0.2s;
}

.ux-btn-primary:hover {
    background-color: #7c3aed;
    color: white;
    transform: translateY(-2px);
}

.ux-btn-outline {
    background: white;
    border: 1px solid #e2e8f0;
    padding: 12px 25px;
    border-radius: 100px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ux-play-icon {
    background: var(--ux-primary);
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

/* Dashboard Mockup Container */
.ux-dashboard-preview {
     max-width: 900px; 
    margin: 0 auto;
    /* perspective: 1000px; */
    border: 2px solid #5da7dd2e;
    border-radius: 40px;
    overflow: hidden;
}

.ux-dashboard-preview img {
    box-shadow: 0 50px 100px -20px rgba(50, 50, 93, 0.25), 
                0 30px 60px -30px rgba(0, 0, 0, 0.3);
}

.ux-parallax-layer {
    position: absolute;
    z-index: 1;
    pointer-events: none; /* Taaki buttons click karne me masla na ho */
    transition: transform 0.1s ease-out; /* Smooth movement ke liye */
}

/* Positioning the images exactly like the design */
.ux-sql-img  { top: 29%; left: 5%; width: 120px; }
.ux-dash-img { top: 65%; left: 8%; width: 140px; }
.ux-site-img { top: 35%; right: 5%; width: 130px; }
.ux-play-img { top: 30%; right: 10%; width: 120px; }

.ux-parallax-layer img {
    width: 100%;
    height: auto;
    filter: drop-shadow(0 10px 20px rgba(0,0,0,0.1));
} 


.ux-hero-wrapper {
    background: #f2efff;
}

header#header {
    /*box-shadow: none;*/
    /*border-bottom: 1px solid #fdfdfd;*/
}

.border-img-cust {
    /* border-radius: 20px !important; */
    border: 1px solid #0000000a;
    box-shadow: none !important;
}

h2.cta-title-ui {
    color: #ffffff;
}

.ux-btn-cust-1 {
    background: #4cade3;
    border-radius: 70px;
    padding: 10px 25px !important;
    color: #fff;
    border: none;
}

.header .logo img {
    max-height: 50px;
    margin-left: 20px;
}

.text-light-cust-1{
  opacity: 0.8;
  font-weight: lighter;
}

button.btn.ux-btn-cust-1.header-btn-login {
    width: min-content !important;
    padding: 7px 20px !important;
}

.unstyled-cust li{
  list-style: none;
}


.unstyled-cust{
  margin: 0;
  padding: 0;
}

@media (max-width: 767px) {
  /* Your mobile-specific CSS here */

  .ux-parallax-layer {
    display: none;
}

}

.video-bg {
    /* position: fixed; */
    top: 0;
    left: 0;
    width: 100%;
    height: 80%;
    overflow: hidden;
    z-index: -1;
    border: 6px solid greeen;
}

.video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* fills screen perfectly */
}

/* Optional dark overlay */
/*.video-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
*/
.content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 80px 40px;
}


/*.ux-slider-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    max-width: 900px;
    margin: auto;
}

.ux-slider-track {
    display: flex;
    align-items: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-logo-item {
    min-width: 14.285%;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #000000;
    transition: all 0.6s ease;
    filter: grayscale(100%);
    opacity: 0.3;
}

.ux-logo-item.is-active {
    color: #4cade3;
    transform: scale(1.6);
    filter: grayscale(0%);
    opacity: 1;
}
*/

.ux-slider-window {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 10px 0;
    background: #f8fafc;
}

.ux-slider-track {
    display: flex;
    align-items: center;
    /* transition must be smooth for the 'pop' effect */
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.ux-logo-item {
    /* 100% / 5 items = 20% each */
    min-width: 20%; 
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    color: #cbd5e1;
    transition: all 0.5s ease;
    filter: grayscale(100%);
    opacity: 0.4;
}

/* THE 3rd ITEM HIGHLIGHT */
.ux-logo-item.is-active {
    color: #8B5CF6;
    transform: scale(1.5); /* Makes the 3rd item pop out */
    filter: grayscale(0%);
    opacity: 1;
}


.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1320px !important;
}

.cate-cust h3{
    color: #fff;
    font-size: 18px;
    margin-top: 30px;
}

.cate-cust ul {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 18px 8px;
    padding: 0;
    margin-top: 20px;
}

.cate-cust ul li{

}

.cate-cust ul li a {
    color: #fff;
    background: #ffffff1a;
    padding: 5px 18px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.2s;
}


.cate-cust ul li a:hover {
    color: #fff;
    background: #ffffff42;
    padding: 5px 18px;
    border-radius: 30px;
    text-decoration: none;
}


/*###############################################################  HiQuest Cloud CSS ###############################################################*/

.u-feature-card-wrapper {
    background-color: #ffffff;
    border-radius: 20px;
    padding: 40px 30px;
    height: 100%;
    border: 1px solid #f0f0f0; /* Very subtle border */
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); /* Soft, spread out shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.u-feature-card-wrapper:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.08);
}

/* 2. Icon Circle Styling */
.u-icon-gradient-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    
    /* The specific purple gradient from the image */
    background: linear-gradient(135deg, #ace1ff 0%, #4cade3 100%);

    /* Subtle glow behind the icon */
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.3); 
}

.u-icon-gradient-circle i {
    color: #ffffff;
    font-size: 28px;
}

/* 3. Typography Styling */
.u-card-heading {
    font-size: 20px;
    font-weight: 700;
    color: #1a1a2e; /* Dark navy/black text */
    margin-bottom: 15px;
    line-height: 1.4;
}

.u-card-description {
    font-size: 15px;
    color: #6c757d; /* Muted grey text */
    line-height: 1.6;
    margin-bottom: 0;
    font-weight: 400;
}

/* Helper to ensure equal height columns */
.row-gap-custom {
    --bs-gutter-x: 2rem;
    --bs-gutter-y: 2rem;
}


/* General Setup */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8fbfe; /* Very light subtle blue-grey background */
    /*padding: 60px 0;*/
}

/* --- UNIQUE CUSTOM CLASSES --- */

/* 1. Left Side Text Styling */
.hq-section-title {
    font-size: 36px;
    font-weight: 700;
    color: #1f2937; /* Dark charcoal */
    line-height: 1.2;
    margin-bottom: 25px;
}

.hq-text-highlight {
    color: #2ab7f1; /* The specific light blue/cyan from the image */
    display: block; /* Forces it to a new line (optional, based on screen width) */
}

.hq-description-text {
    color: #6b7280; /* Muted grey text */
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 25px;
}

/* 2. Card Styling */
.hq-feature-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb; /* Light clean border */
    border-radius: 12px;
    padding: 30px 25px;
    height: 100%;
    transition: all 0.3s ease;
}

.hq-feature-card:hover {
    box-shadow: 0 10px 25px rgba(42, 183, 241, 0.1);
    border-color: #2ab7f1;
    transform: translateY(-3px);
}

/* 3. Icon Styling */
.hq-card-icon {
    font-size: 28px;
    color: #2ab7f1; /* Matching the cyan highlight */
    margin-bottom: 20px;
    display: inline-block;
}

/* 4. Card Typography */
.hq-card-title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 12px;
}

.hq-card-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Responsive spacing adjustments */
@media (min-width: 992px) {
    .hq-content-col {
        padding-right: 50px; /* Space between text and cards on desktop */
    }
}

img.logo-cust-4{
  max-width: 60%;
}

img.icon-cust-1{
  max-width: 60px;
}

/*.header .branding {
    background: #ffffff00;
     background: rgba(255, 255, 255, 0.15); 
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}*/
.ux-features-section {
    padding: 80px 0;
    background: linear-gradient(180deg, #f8faff 0%, #ffffff 100%);
    font-family: 'Inter', sans-serif;
}

.ux-feature-item {
    padding: 20px;
    transition: transform 0.3s ease;
}

.ux-icon-box {
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ux-feature-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: #2d3748;
    margin-bottom: 5px;
    letter-spacing: -1px;
}

.ux-feature-tagline {
    font-size: 1.1rem;
    color: #718096;
    font-weight: 500;
}

/* Animations */

/* 1. Floating Animation (Cloud) */
@keyframes uxFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.ux-animate-float {
    animation: uxFloat 3s ease-in-out infinite;
}

/* 2. Soft Pulse Animation (AI) */
@keyframes uxPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.7; }
    100% { transform: scale(1); opacity: 1; }
}
.ux-animate-pulse {
    animation: uxPulse 2s ease-in-out infinite;
}

/* 3. Fast Shake/Vibration (Fast) */
@keyframes uxShake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}
.ux-animate-shake {
    animation: uxShake 0.5s ease-in-out infinite;
    animation-play-state: paused; /* Default paused */
}

/* Hover effect on entire item */
.ux-feature-item:hover .ux-animate-shake {
    animation-play-state: running;
}


.ux-footer-dark {
    background-color: #102a3b;
    color: #ffffff;
    padding: 80px 0 40px;
    font-family: 'Inter', sans-serif;
}

/* Brand Styling */
.ux-footer-logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

.ux-brand-name {
    font-size: 28px;
    font-weight: 800;
    margin: 0;
    line-height: 1;
}

.ux-brand-tag {
    font-size: 10px;
    letter-spacing: 2px;
    color: #94A3B8;
    display: block;
    margin-top: 5px;
}

.ux-footer-about {
    color: #94A3B8;
    line-height: 1.7;
    margin-top: 25px;
    max-width: 320px;
}

/* Links Styling */
.ux-footer-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 25px;
}

.ux-footer-list {
    list-style: none;
    padding: 0;
}

.ux-footer-list li {
    margin-bottom: 12px;
}

.ux-footer-list a {
    color: #94A3B8;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ux-footer-list a:hover {
    color: #ffffff;
    padding-left: 5px;
}

/* Bottom Bar */
.ux-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 30px;
}

.ux-social-links {
    display: flex;
    gap: 20px;
}

.ux-social-links a {
    color: #ffffff;
    font-size: 18px;
    transition: color 0.3s;
}

.ux-social-links a:hover {
    color: #FACC15; /* Yellow hover */
}

.ux-copyright {
    margin: 0;
    color: #94A3B8;
    font-size: 14px;
}

.ux-copyright strong {
    color: #ffffff;
}

.footer-logo-cust{
  width: 200px;
}

.ux-footer-title {
    color: aliceblue;
}

/* Hero Section Setup */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgb(0 0 0) 0%, rgba(0, 0, 0, 1) 100%);
}

/* Background Video */
.back-video {
    position: absolute;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: ;
    object-fit: cover;
    /* background: aquamarine; */
    overflow: overlay;
    opacity: .5;
}

/* Dark Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(0,0,0,0.8) 30%, rgba(0,0,0,0.2) 100%);
    z-index: -1;
}

.hero-content {
    flex-grow: 1;
    display: flex;
    align-items: center;
    position: relative;
}

/* Text Highlights */
.text-warning {
    color: #4cade3 !important;
}

.btn-warning {
    background-color: #4cade3;
    border: none;
}

/* Logo Scroller Animation */
.logo-scroller {
    background: rgba(0, 0, 0, 0.5);
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.logos {
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    width: 100%;
}

.logos-slide {
    display: inline-block;
    animation: 20s slide infinite linear;
}

.logos-slide img {
    height: 30px;
    margin: 0 40px;
    filter: brightness(0) invert(1); /* Makes logos white */
    opacity: 0.7;
}

@keyframes slide {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .display-3 { font-size: 2.5rem; }
    .hero-section { height: auto; padding-bottom: 50px; }
}

.header::before {
    background: #ffffff;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(255 255 255 / 90%);
    /* backdrop-filter: blur(10px); */
    -webkit-backdrop-filter: blur(10px);
    z-index: -1;
}

.header .topbar {
    display: none;
}

.header {
    border-radius: 80px;
    /*overflow: hidden;*/
    margin: 10px;
}

.header::before {
    border-radius: 80px;
}


/* Ensure the active tab and the content box share the same white background */
.custom-tabs .nav-link.active {
    background-color: #ffffff !important;
    border-bottom: 2px solid #ffffff; /* This hides the join line */
    position: relative;
    z-index: 5;
    transform: translateY(2px); /* Pushes the button slightly into the box */
}

/* Add a smooth fade-in for content */
.tab-pane.fade {
    transition: opacity 0.4s ease-in-out;
}

/* Image styling for the content box */
.custom-content-box img {
    width: 100%;
    max-height: 350px;
    object-fit: cover;
    border-radius: 20px;
}

/* Italic quote style */
.italic-text {
    font-size: 1.25rem;
    font-weight: 400;
    color: #444;
    line-height: 1.5;
    margin-bottom: 20px;
}

.testimonial-section {
    background-color: #f0f4ff; /* Light blueish background */
}

.custom-tab-wrapper {
    /*max-width: 1100px;*/
    margin: 0 auto;
}

/* Tab Header Layout */
.custom-tabs {
    border: none;
    display: flex;
    gap: 0;
    margin-bottom: -1px; /* Overlaps content box slightly to merge */
}

.custom-tabs .nav-link {
    border: none;
    height: 57px;
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px 30px 0 0; /* Rounded top only */
    transition: all 0.3s ease;
    padding: 20px;
}

.custom-tabs .nav-link img {
    max-width: 130px;
    max-height: 50px;
    filter: brightness(1) invert(.5);
}

/* Specific Colors */
.tab-vipdesk { background-color: var(--vipdesk-color) !important; }
.tab-lion { background-color: var(--lion-color) !important; }
.tab-waste { background-color: var(--waste-color) !important; }
.tab-airasia { background-color: var(--airasia-color) !important; }

/* Active State Logic */
.custom-tabs .nav-link.active {
    height: 73px;
    margin-top: -19px;
    z-index: 2;
    background-color: #2d5bae !important;
    color: #ffffff !important;
    border-bottom: 5px solid #346aab;
}
.custom-tabs .nav-link.active img {
    filter: none; /* Show original logo colors when active */
}

/* Content Box */
.custom-content-box {
    background: #ffffff;
    border-radius: 0 40px 40px 40px; /* Top left is sharp to match active tab */
    box-shadow: 0 20px 40px rgba(0,0,0,0.05);
    position: relative;
    z-index: 1;
}

/* Testimonial Styling */
.italic-text {
    font-style: italic;
    color: #333;
    line-height: 1.6;
}

.btn:hover {
    color: #ffffff;
    background-color: #107ab5;
    border-color: #288ac0;
}

.custom-cta-wrapper {
    background-color: #f8f9fa; /* Light background to make the card pop */
}

/* Main Purple Card */
.cta-purple-card {
    background-color: #4cade3;
    border-radius: 40px;
    padding: 80px 40px;
    overflow: visible;
}

/* The White Notch at the top */
.cta-top-notch {
    position: absolute;
    top: -1px; /* Align perfectly with top edge */
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 120px;
    height: 40px;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cta-notch-dots {
    color: blue;
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 0;
    margin-top: -10px;
}

/* Typography & Content */
.cta-description {
    max-width: 600px;
    font-size: 1.1rem;
    opacity: 0.9;
    line-height: 1.6;
}

/* Pill Button Styling */
.cta-btn-white {
    background-color: #ffffff;
    color: #000000;
    font-weight: 600;
    padding: 12px 28px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.cta-btn-white i {
    font-size: 1.4rem;
    color: #4cade3;
}

.cta-btn-white:hover {
    background-color: #f0f0f0;
    transform: translateY(-2px);
    color: var(--cta-purple-hover);
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cta-purple-card {
        padding: 60px 20px;
        border-radius: 30px;
    }
    
    .cta-purple-card h2 {
        font-size: 1.75rem;
    }
}

/* Container for the dots */
.cta-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px; /* Space between dots */
    margin-top: -5px;
}

/* Individual Dot Styling */
.cta-loader span {
    width: 6px;
    height: 6px;
    background-color: #4cade3;
    border-radius: 50%;
    display: inline-block;
    animation: cta-dots-pulse 1.4s infinite ease-in-out both;
}

/* Staggered Delay for the 'Loader' effect */
.cta-loader span:nth-child(1) {
    animation-delay: -0.32s;
}

.cta-loader span:nth-child(2) {
    animation-delay: -0.16s;
}

/* Animation Keyframes */
@keyframes cta-dots-pulse {
    0%, 80%, 100% { 
        transform: scale(0);
        opacity: 0.4;
    } 
    40% { 
        transform: scale(1);
        opacity: 1;
    }
}

.agentic-hero-section {
    padding: 80px 0;
}

.hero-main-title {
    font-size: 2rem;
    font-weight: 500;
}

.text-highlight-blue {
    color: var(--text-blue);
}

/* Main Display Card */
.hero-video-card {
    max-width: 950px;
    height: 480px;
    border-radius: 30px;
    overflow: hidden;
    background-image: url('https://via.placeholder.com/950x480'); /* Replace with your actual hero image */
    background-size: cover;
    background-position: center;
    border: 1px solid rgba(255,255,255,0.1);
}

/* Purple/Blue Gradient Overlay for the left side text */
.hero-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--card-gradient);
    z-index: 1;
}

.hero-card-body {
    position: relative;
    z-index: 2;
    height: 100%;
}

/* Left Side Text Styling */
.hero-card-text p {
    font-size: 2.2rem;
    font-weight: 300;
    margin-bottom: 0;
}

/* Play Button */
.hero-play-container {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.hero-play-btn {
    width: 60px;
    height: 60px;
    background: var(--play-btn-bg);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: 0.3s ease;
    border: 1px solid rgba(255,255,255,0.2);
}

.hero-play-btn:hover {
    transform: scale(1.1);
    background: rgba(63, 91, 246, 0.8);
}

/* Avatar with Glow Effect */
.hero-avatar-wrapper {
    position: relative;
    width: 150px;
    height: 150px;
    margin-top: 20px;
}

.hero-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    position: relative;
    z-index: 2;
}

.avatar-glow {
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border-radius: 50%;
    background: conic-gradient(#7cb8ff, #9b51e0, #7cb8ff);
    filter: blur(8px);
    z-index: 1;
    animation: rotateGlow 4s linear infinite;
}

@keyframes rotateGlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .hero-video-card {
        height: auto;
        min-height: 400px;
    }
    .hero-card-text p {
        font-size: 1.5rem;
    }
    .hero-avatar-wrapper {
        width: 100px;
        height: 100px;
    }
}

/* Section Wrapper */
        .ts-about-section {
            padding: 80px 0;
            overflow-x: hidden; /* Prevent scrollbar from absolute images */
        }

        /* --- Left Side: Image Collage --- */
        .ts-image-gallery {
            position: relative;
            min-height: 500px;
            width: 100%;
        }

        .ts-img-card {
            position: absolute;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            object-fit: cover;
            border: 5px solid #fff;
        }

        /* Top Left Small Image */
        .ts-img-1 {
            width: 200px;
            height: 250px;
            top: 0;
            left: 0;
            z-index: 1;
        }

        /* Main Center Image */
        .ts-img-main {
            width: 380px;
            height: 420px;
            top: 60px; /* Push down */
            left: 120px; /* Push right */
            z-index: 2;
        }

        /* Bottom Left Medium Image */
        .ts-img-2 {
            width: 240px;
            height: 200px;
            bottom: -20px;
            left: 20px;
            z-index: 3;
        }

        /* --- Right Side: Content --- */
        .ts-content-wrapper {
            padding-left: 20px;
        }

        /* "About Us" Tag */
        .ts-subtitle {
            font-weight: 600;
            color: #2b4dff; /* Blue color */
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
            display: flex;
            align-items: center;
            margin-bottom: 15px;
        }

        .ts-subtitle::before {
            content: '';
            display: inline-block;
            width: 40px;
            height: 3px;
            background-color: #2b4dff;
            margin-right: 10px;
        }

        .ts-main-heading {
            font-size: 38px;
            font-weight: 700;
            color: #1a1a1a;
            line-height: 1.3;
            margin-bottom: 20px;
        }

        .ts-desc-text {
            color: #666;
            font-size: 16px;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        /* --- Progress Bars --- */
        .ts-skill-item {
            margin-bottom: 20px;
        }

        .ts-skill-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 8px;
            font-weight: 600;
            color: #333;
            font-size: 14px;
        }

        .ts-progress-bg {
            height: 8px;
            background-color: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
        }

        .ts-progress-fill {
    height: 100%;
    background-color: #4cade3;
    background-image: linear-gradient(90deg, #185adb, #4cade3);
    border-radius: 4px;
    width: 0;
    transition: width 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

        /* --- Button --- */
.ts-btn-learn {
    margin-top: 30px;
    background: linear-gradient(90deg, #4cade3, #2b4dff);
    color: white;
    padding: 12px 35px;
    border-radius: 50px;
    border: none;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(43, 77, 255, 0.3);
    transition: transform 0.3s ease;
}
        .ts-btn-learn:hover {
            transform: translateY(-3px);
            color: white;
            box-shadow: 0 8px 20px rgba(43, 77, 255, 0.4);
        }

        /* Responsive Tweaks */
        @media (max-width: 991px) {
            .ts-image-gallery {
                margin-bottom: 50px;
                min-height: 450px; /* Adjust for tablet */
                display: flex;
                justify-content: center;
            }
            .ts-img-main { left: 50%; transform: translateX(-50%); width: 70%; }
          }
            

        h6.text-uppercase.fw-bold.mb-3 {
    color: #b0b0b0;
}

.navmenu a, .navmenu a:focus {
    color: #000000;
}

.navmenu li:hover>a, .navmenu .active, .navmenu .active:focus {
    color: #68b3dd;
}

.ai-section-wrapper {
            padding: 80px 0;
        }

        /* --- Left Side: Video Container --- */
        .ai-media-container {
            position: relative;
            border-radius: 30px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.1);
            /* Gradient background similar to design */
            background: linear-gradient(135deg, #a8c0ff 0%, #3f2b96 100%); 
            aspect-ratio: 1 / 1; /* Keep it square-ish */
            max-width: 590px;
            margin: 0 auto;
        }

        .ai-video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* --- Overlay Elements (Chat Bubbles) --- */
        .ai-overlay-bubble {
            position: absolute;
            background: rgba(255, 255, 255, 0.95);
            padding: 12px 20px;
            border-radius: 12px;
            font-size: 13px;
            font-weight: 500;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            opacity: 0; /* Hidden initially for animation */
            transform: translateY(20px);
            transition: all 0.5s ease;
        }

        .ai-bubble-1 {
            bottom: 30%;
            right: 10%;
            border-bottom-right-radius: 2px;
        }

        .ai-bubble-2 {
            bottom: 20%;
            right: 10%;
            background-color: #3b82f6;
            color: white;
            border-bottom-right-radius: 12px;
            border-top-right-radius: 2px;
        }
        
        /* The Checkmark Circle */
        .ai-status-icon {
            position: absolute;
            top: 45%;
            right: 20%;
            width: 50px;
            height: 50px;
            background-color: #4ade80; /* Green */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 24px;
            box-shadow: 0 4px 10px rgba(74, 222, 128, 0.4);
            z-index: 2;
        }

        /* Animation class to be added by JS */
        .ai-animate-in {
            opacity: 1;
            transform: translateY(0);
        }

        /* --- Right Side: Content --- */
        .ai-heading {
            font-size: 2.5rem;
            font-weight: 700;
            color: #1e293b;
            line-height: 1.2;
            margin-bottom: 40px;
        }

.ai-highlight-text {
    color: #4cade3;
}

.ai-feature-title {
    color: #565657;
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

        .ai-feature-desc {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.6;
            margin-bottom: 30px;
        }

        .ai-btn-dark {
            background-color: #111827;
            color: #fff;
            padding: 12px 30px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: 500;
            transition: background 0.3s;
            display: inline-block;
        }

        .ai-btn-dark:hover {
            background-color: #333;
            color: #fff;
        }

        /* Responsive adjustments */
        @media (max-width: 991px) {
            .ai-media-container {
                margin-bottom: 50px;
            }
            .ai-heading {
                font-size: 2rem;
            }
        }

        /* Section Background - Light Beige */
        .nc-news-section {
            background-color: #f3f3f1; /* Light beige tone from image */
            padding: 80px 0;
        }

        /* Section Heading */
        .nc-section-title {
            text-align: center;
            font-size: 2rem;
            font-weight: 500;
            color: #111827;
            margin-bottom: 50px;
        }

        /* --- Card Styling --- */
        .nc-news-card {
            background-color: #ffffff;
            border-radius: 24px; /* Highly rounded corners */
            overflow: hidden;
            border: none;
            height: 100%; /* Equal height */
            box-shadow: 0 4px 6px rgba(0,0,0,0.02); /* Very subtle shadow */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            display: flex;
            flex-direction: column;
        }

        .nc-news-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

        /* Image Wrapper */
        .nc-img-wrapper {
            position: relative;
            padding: 12px 12px 0 12px; /* Slight padding so image doesn't touch edge if desired, or remove for full bleed */
        }

        .nc-card-img {
            width: 100%;
            height: 220px;
            object-fit: cover;
            border-radius: 20px 20px 0 0; /* Round top corners only */
            display: block;
        }

        /* Card Body */
        .nc-card-body {
            padding: 24px;
            flex-grow: 1;
            display: flex;
            flex-direction: column;
        }

        .nc-card-title {
            font-size: 1.25rem;
            font-weight: 600;
            color: #1e293b;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .nc-card-text {
            color: #64748b;
            font-size: 0.9rem;
            line-height: 1.5;
            margin-bottom: 24px;
            flex-grow: 1; /* Pushes button to bottom */
        }

        /* Button Styling */
        .nc-btn-learn {
            background-color: #1e293b; /* Dark Navy/Black */
            color: #ffffff;
            padding: 10px 24px;
            border-radius: 50px;
            font-size: 0.85rem;
            font-weight: 500;
            text-decoration: none;
            align-self: flex-start; /* Align left */
            transition: background-color 0.2s;
        }

        .nc-btn-learn:hover {
            background-color: #000;
            color: #fff;
        }

        /* Responsive */
        @media (max-width: 991px) {
            .nc-news-card {
                margin-bottom: 30px;
            }
        }

.ai-video-1 {
    border-radius: 20px;
    min-height: 400px;
}

/* Main Container Wrapper */
.gup-demo-wrapper {
    background: #e4e4e4;
    border-radius: 24px;
    padding: 40px;
    color: #fff;
    /* box-shadow: 0 15px 35px rgba(82, 42, 211, 0.2); */
    position: relative;
    overflow: hidden;
}

        /* Decorative background lines (optional to match bottom right corner detail) */
        .gup-demo-wrapper::after {
            content: '';
            position: absolute;
            bottom: -50px;
            right: -50px;
            width: 150px;
            height: 150px;
            border: 1px solid rgba(255,255,255,0.1);
            border-radius: 50%;
            pointer-events: none;
        }

        /* Typography */
        .gup-title {
            font-weight: 600;
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

.gup-subtitle {
    font-size: 1rem;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
    color: #4c4c4c;
}
        /* Left Section Video */
        .gup-video-container {
            border-radius: 20px;
            overflow: hidden;
            background-color: rgba(255, 255, 255, 0.1); /* Fallback */
            /*box-shadow: 0 10px 20px rgba(0,0,0,0.2);*/
            aspect-ratio: 4/3; /* Keeps the rectangular shape */
            position: relative;
        }

        .gup-video-element {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

        /* Form Styling */
.gup-form-label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 6px;
    display: block;
    color: #000;
}

        .gup-form-input {
            border-radius: 12px;
            border: none;
            padding: 12px 15px;
            font-size: 0.95rem;
            background-color: #fff;
            color: #333;
            transition: all 0.3s ease;
        }

        .gup-form-input:focus {
            box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.3);
            background-color: #fff;
        }

        .gup-form-input::placeholder {
            color: #adb5bd;
            font-size: 0.9rem;
        }

        /* Custom Phone Input Group styling */
        .gup-phone-group .input-group-text {
            background-color: #fff;
            border: none;
            border-radius: 12px 0 0 12px;
            padding-right: 5px;
        }
        .gup-phone-group .gup-form-input {
            border-radius: 0 12px 12px 0;
            border-left: 1px solid #eee;
        }

        /* Checkbox Styling */
        .gup-check-label {
            font-size: 0.8rem;
            opacity: 0.9;
            color: #000;
        }
        .gup-check-label a {
            color: #000;
            text-decoration: underline;
        }
        
        /* Submit Button */
        .gup-submit-btn {
    background-color: #4cade3;
    color: #ffffff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 30px;
    border: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s;
}

        .gup-submit-btn:hover {
            transform: translateY(-2px);
            background-color: #4cade3;
            color: #fff;
        }
        
        /* Layout Adjustments */
        .gup-right-section {
            padding-left: 20px;
        }

        @media (max-width: 991px) {
            .gup-right-section {
                padding-left: 0;
                margin-top: 40px;
            }
        }

        .gup-video-container {
    max-height: 410px;
}

@media (max-width: 768px) {
 /*Your mobile-specific CSS here */*/

.gup-demo-wrapper {
    padding: 20px;
}

.hero-section{
  min-height: 100vh !important;
}

.mobile-nav-active .navmenu {
    position: fixed;
    overflow: visible;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
    min-height: 60vh;
}
}

.tab-h-cust{
  font-size: larger;

}

.down-part-footer {
    background: #0b212f;
}