/* GLOBAL */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

html{
  scroll-behavior: smooth;
}


.hubunicon-section{
  background: radial-gradient(circle at top right,rgba(90,15,74,0.6),transparent 40%),
  radial-gradient(circle at bottom left,rgba(42,27,111,0.6),transparent 45%),
  linear-gradient(180deg,#0a1f44,#1b1f4a,#3b0a45);
}

/* .hubunicon-section{
  background:linear-gradient(135deg,#6b54ff,#f051ff);
  font: #ff6ddd
} */

/* might delete */
.container{
  max-width: 1200px;
  margin:auto;
  padding:0 20px;
}

/* ============ TOPBAR ============ */

.topbar {
  background: #8e2574;
  border-bottom: 1px solid #eee;
  padding: 6px 0;
  font-size: 14px;
  width: 100%;
}

.topbar-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #eee;
}

/* LEFT TEXT */
.top-left span {
  margin-right: 20px;
  color: #eee;
  white-space: nowrap;
}

/* RIGHT ICONS */
.top-right {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* SOCIAL ICONS */
.socials i {
  margin-right: 8px;
  color: #eee;
  cursor: pointer;
}

.socials i:hover {
  color: #6f43ff;
}

.span i {
  margin-left: 16px;
  color: #eee;
  cursor: pointer;
}

.span i:hover {
  color: #6f43ff;
}

@media (max-width: 768px) {
  .topbar-content {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }

  .top-left span {
    font-size: 12px;
    margin-right: 10px;
  }

  .top-right {
    gap: 12px;
  }
}
/* ============ NAVBAR ============ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.navbar {
    width: 100%;
    border-bottom: 1px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 999;
}

.nav-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%;
}

/* --- Logo --- */
.logo {
    height: 55px;
    display: block;
    margin-left: 35px;
    cursor: pointer;
}

/* --- Desktop Menu --- */
.menu {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 15px;
}

.menu li {
    position: relative;
}

.menu a {
    text-decoration: none;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    padding: 10px 5px;
    /* display: flex; */
    align-items: center;
    gap: 5px;
    transition: 0.3s;
}

.menu a:hover {
    color: #3498db;
}

/* --- Dropdowns (General) --- */
.dropdown-menu,
.dropdown-menu-sub {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    min-width: 250px;
    list-style: none;
    display: none; /* Hidden by default */
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    padding: 10px 0;
    border-radius: 4px;
}

.dropdown-menu li {
    width: 100%;
}

.dropdown-menu a,
.dropdown-menu-sub a {
    color: #333 !important;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    border-bottom: 1px solid #f0f0f0;
}

.dropdown-menu a:hover {
    background-color: #f8f9fa;
    color: #3498db !important;
}

/* --- Sub-Dropdown (Level 2) --- */
.dropdown-sub {
    position: relative;
}

.dropdown-menu-sub {
    top: 0;
    left: 100%; /* Opens to the right on desktop */
}

/* --- Desktop Hover Logic --- */
@media (min-width: 992px) {
    .dropdown:hover > .dropdown-menu {
        display: block;
    }

    .dropdown-sub:hover > .dropdown-menu-sub {
        display: block;
    }
}

/* --- Right Side (Search & Button) --- */
.nav-middle-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 50px;
}

/* .nav-middle-right input {
    padding: 8px;
    border-radius: 4px;
    border: 1px solid #ccc;
    outline: none;
} */

.get-started-btn {
    background: #ff5ec4;
    color: rgb(250, 246, 246) !important;
    padding: 15px 15px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

/* --- Hamburger Icon --- */
.menu-toggle {
    display: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

/* --- MOBILE & TABLET RESPONSIVE (Critical Fixes) --- */
@media (max-width: 991px) {
    .menu-toggle {
        display: block;
    }

    .nav-middle-right {
        display: none; /* Hide search/button on small screens or move inside menu */
    }

    .menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #ffffff;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        display: none; /* Toggle via JS */
        max-height: 85vh; /* Prevents menu from going off screen */
        overflow-y: auto; /* Scrollable menu */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    .menu.active {
        display: flex;
    }

    .menu li {
        width: 100%;
    }

    .menu a {
        color: #333;
        padding: 15px 20px;
        width: 100%;
        border-bottom: 1px solid #eee;
    }

    /* Reset Dropdown Positions for Mobile */
    .dropdown-menu,
    .dropdown-menu-sub {
        position: static;
        width: 100%;
        box-shadow: none;
        background: #fdfdfd;
        padding-left: 15px; /* Indent sub-menus */
    }

    /* Nested Sub-menu Indentation */
    .dropdown-menu-sub {
        background: #f1f1f1;
        padding-left: 20px;
    }

    /* This class is toggled by your JavaScript */
    .dropdown-menu.active,
    .dropdown-menu-sub.active {
        display: block !important;
    }

    /* Icon Rotation (Optional Enhancement) */
    .dropdown.active > a i, 
    .dropdown-sub.active > a i {
        transform: rotate(180deg);
    }
}
/* ========Hero========*/
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  padding: 0 80px;
  height: 600px;
  width: 100%;
  position: relative;
  /* background:linear-gradient(#6b54ff,#f051ff); */

}

.hero-text {
  flex: 1;
}

.hero-text h1 {
  font-size: 70px;
  line-height: 1.2;
  margin-left: 49px;
  color: #fff;
}

.hero-text span {
  color: #ff5ec4;
}

.tagline {
  margin: 40px 0 0 50px;
  color: #ff8bd8;
  margin-bottom: 30px;
}

.btn {
  padding: 12px 25px;
  background: linear-gradient(45deg, #ff5ec4, #9b5cff);
  border: none;
  color: #fff;
  border-radius: 25px;
  cursor: pointer;
  margin-left: 50px;
}

.hero-image {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.hero-image::before {
  content: "";
  position: absolute;
  width: 85%;
  height: 85%;
  background: linear-gradient(135deg, #5945fe, #ff6ddd);
  filter: blur(120px);
  opacity: 0.45;
  z-index: -1;
}

.hero-image img {
  width: 815px;
  height: 600px;
  margin-left: 260px;
  margin-top: 20px;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.7));
  mask-image: radial-gradient(circle, black 55%, transparent 85%);
  -webkit-mask-image: radial-gradient(circle, black 55%, transparent 85%);
}

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
  .hero {
    flex-direction: column;
    text-align: center;
    height: auto;
    padding: 40px 50px;
  }

  .hero-text h1 {
    font-size: 50px;
    margin-left: 0;
  }

  .tagline {
    margin-left: 0;
  }

  .btn {
    margin-left: 0;
    margin-top: 20px;
  }

  .hero-image img {
    width: 500px;
    height: auto;
    margin-left: 0;
    margin-top: 30px;
  }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {
  .hero {
    flex-direction: column;
    text-align: center;
    padding: 20px;
    height: auto;
  }

  .hero-text h1 {
    font-size: 34px;
    margin-left: 0;
  }

  .tagline {
    margin: 20px 0;
  }

  .btn {
    margin-left: 0;
    margin-top: 15px;
  }

  .hero-image img {
    max-width: 320px;
    height: auto;
    margin-left: 0;
    margin-top: 20px;
  }
}

.hero-separator {
  width: 100%;
  margin: 10px auto;
  border-bottom: 2px dashed rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}


/* hubunicon globally */

  * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Poppins', sans-serif;
  /* background: #0a0118; Dark background like the image */
  background-image: 
    radial-gradient(circle at 20% 30%, rgba(124, 76, 255, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 80% 70%, rgba(255, 79, 216, 0.15) 0%, transparent 40%);
  color: #ffffff;
  overflow-x: hidden;
  position: relative;
}

/* Background Stars Effect */
.stars-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: url('https://www.transparenttextures.com/patterns/stardust.png');
  opacity: 0.3;
  pointer-events: none;
}

.cms-hero {
  padding: 60px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 1500px;
  margin-left: 250px;
}

/* MAIN TITLE */
.cms-main-title {
  text-align: center;
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 800;
  margin-bottom: 60px;
  letter-spacing: -1px;
}

.cms-main-title span {
  display: block;
  font-size: clamp(20px, 3vw, 38px);
  background: linear-gradient(90deg, #ff6ae3, #a48fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 600;
}

.cms-container-full {
  max-width: 1500px;
  width: 100%;
}

.top-row-full {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 40px;
  margin-bottom: 50px;
  flex-wrap: wrap;

}

/* LEFT CARD - GLASSMORPHISM */
.left-card {
  flex: 1;
  /* min-width: 320px; */
  width: 400px;
  height: 600px;
  padding: 40px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 40px rgba(138, 43, 226, 0.3);
}

.price {
  color: #ffee58;
  font-size: 42px;
  font-weight: 800;
  margin-right: 10px;
  text-shadow: 0 0 15px rgba(255, 238, 88, 0.5);
}

.subtext {
  color: #ccc;
  font-size: 38px;
  margin: 10px 0 30px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 10px;
}

.left-card ul {
   list-style: none;  
}
.left-card li {
  margin-bottom: 15px;
  font-size: 26px;
  display: flex;
  align-items: center;
  color: #e0e0e0;
     margin-top: 40px; 


}

.left-card li::before {
  content: "✔";
  background: #ff4fd8;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-right: 12px;
  font-size: 12px;
  color: white;
  flex-shrink: 0;
}

/* RIGHT CARD - NEON GLOW */
.right-card-wrapper {
  flex: 1;
  /* min-width: 320px; */
  width: 700px;
  height: 600px;
  position: relative;
}

.right-card {
  height: 100%;
  padding: 8px;
  border-radius: 30px;
  background: linear-gradient(45deg, #ff00ff, #7000ff);
  box-shadow: 0 0 50px rgba(255, 0, 255, 0.5);
}

.card-inner-content {
  background: #120129;
  border-radius: 25px;
  height: 100%;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.card-inner-content img {
  width: 100%;
  height: auto;
  opacity: 0.8;
}

.image-overlay-text {
  padding: 20px;
  background: linear-gradient(transparent, #120129);
  position: absolute;
  bottom: 0; width: 100%;
}

/* FEATURE BOXES */
.center-title {
  text-align: center;
  color: #7cffcb;
  margin: 40px 0;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.feature-row-full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
}

.feature-box {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 20px;
  border-radius: 15px;
  text-align: center;
  transition: 0.3s;
}

.feature-box:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 20px rgba(255, 0, 255, 0.4);
  transform: translateY(-5px);
}

.icon { font-size: 24px; margin-bottom: 10px; }

/* PINK PILL BUTTON */
.cta-btn {
  display: block;
  margin: 50px auto;
  padding: 18px 40px;
  border-radius: 50px;
  border: none;
  background: linear-gradient(90deg, #ff36c0, #ff73f1);
  color: white;
  font-weight: 700;
  font-size: 18px;
  box-shadow: 0 10px 30px rgba(255, 54, 192, 0.5);
  cursor: pointer;
}

/* mobile tablet */

/* ===================== LARGE DESKTOP (1440px+) ===================== */
@media (min-width: 1440px) {
  .cms-hero {
    width: 100%;
    margin-left: 0;
    padding: 80px 60px;
  }
}

/* ===================== DESKTOP (1024px – 1439px) ===================== */
@media (max-width: 1439px) {
  .cms-hero {
    width: 100%;
    margin-left: 0;
    padding: 70px 40px;
  }

  .left-card {
    height: auto;
  }

  .right-card-wrapper {
    height: auto;
  }
}

/* ===================== TABLET (768px – 1023px) ===================== */
@media (max-width: 1023px) {

  .cms-hero {
    width: 100%;
    margin-left: 0;
    padding: 60px 30px;
  }

  .top-row-full {
    gap: 30px;
  }

  .left-card,
  .right-card-wrapper {
    width: 100%;
    height: auto;
  }

  .price {
    font-size: 34px;
  }

  .subtext {
    font-size: 28px;
  }

  .left-card li {
    font-size: 20px;
  }
}

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

  body {
    overflow-x: hidden;
  }

  .cms-hero {
    width: 100%;
    margin-left: 0;
    padding: 50px 18px;
  }

  .cms-main-title {
    font-size: 36px;
    margin-bottom: 40px;
  }

  .cms-main-title span {
    font-size: 22px;
  }

  .top-row-full {
    flex-direction: column;
    gap: 25px;
  }

  .left-card,
  .right-card-wrapper {
    width: 100%;
    height: auto;
    padding: 25px;
  }

  .price {
    font-size: 32px;
  }

  .subtext {
    font-size: 22px;
  }

  .left-card li {
    font-size: 18px;
    margin-top: 20px;
  }

  .right-card {
    border-radius: 22px;
  }

  .card-inner-content img {
    width: 100%;
    height: auto;
  }

  .center-title {
    font-size: 18px;
    margin: 30px 0;
  }

  .feature-row-full {
    grid-template-columns: 1fr;
  }

  .cta-btn {
    width: 100%;
    font-size: 16px;
    padding: 16px;
  }
}

/* SAAS SOFTWARE */

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

/* ================= SECTION ================= */
.hub-products-section{
  width:100%;
  padding:80px 20px;
  font-family:'Poppins',sans-serif;
  margin-top: -100px;
}

/* ================= TITLE ================= */
.hub-main-title{
  text-align:center;
  font-size:32px;
  color:#fff;
  font-weight:600;
  margin-bottom:60px;
  letter-spacing:0.5px;
}

/* ================= CONTAINER ================= */
.hub-products{
  max-width:1400px;
  margin:auto;
  display:flex;
  gap:80px;
}

/* ================= CARD (IMAGE COVER) ================= */
.hub-card{
  flex:1;
  height:360px;
  border-radius:26px;
  position:relative;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  display:flex;
  align-items:flex-end;
  box-shadow:0 25px 70px rgba(0,0,0,0.65);
  transition:0.4s ease;
}

.hub-card:hover{
  transform:translateY(-8px);
}

/* ================= BACKGROUND IMAGES ================= */
.hubflow-bg{
  background-image:url("/static/images/37700.jpg");
}

.hubmail-bg{
  background-image:url("/static/images/5391575.jpg");
}

.hubbank-bg{
  background-image:url("/static/images/38436.jpg");
}

/* ================= OVERLAY ================= */
.hub-overlay{
  width:100%;
  padding:35px;
  background:linear-gradient(
    to top,
    rgba(0,0,0,0.88),
    rgba(0,0,0,0.45),
    rgba(0,0,0,0)
  );
}

/* ================= TEXT ================= */
.hub-text{
  color:#fff;
}

.hub-text h5{
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#b6bbc1;
  margin-bottom:8px;
}

.hub-text h3{
  font-size:22px;
  font-weight:600;
  line-height:1.35;
  margin-bottom:10px;
}

.hub-text p{
  font-size:14px;
  color:#d4d8dc;
  margin-bottom:20px;
  line-height:1.6;
}

/* ================= BUTTON ================= */
.hub-text button{
  background:linear-gradient(135deg,#ab237b,#6e1234);
  color:#000;
  border:none;
  padding:11px 26px;
  border-radius:30px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:0.3s ease;
}

.hub-text button:hover{
  transform:scale(1.06);
  box-shadow:0 0 30px rgba(90,219,216,0.6);
}

/* ================= TABLET ================= */
@media(max-width:991px){

  .hub-main-title{
    font-size:26px;
    margin-bottom:45px;
  }

  .hub-products{
    flex-wrap:wrap;
  }

  .hub-card{
    flex:0 0 48%;
    height:320px;
  }

  .hub-overlay{
    padding:28px;
  }

  .hub-text h3{
    font-size:21px;
  }
}

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

  .hub-products-section{
    padding:60px 15px;
  }

  .hub-main-title{
    font-size:22px;
    margin-bottom:35px;
  }

  .hub-products{
    flex-direction:column;
    gap:25px;
  }

  .hub-card{
    flex:1;
    height:280px;
  }

  .hub-overlay{
    padding:22px;
  }

  .hub-text h3{
    font-size:19px;
  }

  .hub-text p{
    font-size:13px;
  }
}

/*=================== 2026 inovation=============== */

/* Section Reset */
.hub-slider-section {
    padding: 60px 0;
    width: 100%;
    /* margin-bottom: 400px; */
}

.hub-slider-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}

/* Card Styling */
.hub-card1 {
    height: 450px;
    border-radius: 26px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
    transition: 0.4s ease;
    border: 1px solid #eee;
}

.hub-card1:hover {
    transform: translateY(-10px);
}

/* Image Styling */
.hub-image-content img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    display: block;
}

/* Content Styling */
.hub-card-content {
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.hub-label {
    font-size: 13px;
    font-weight: 600;
    color: #0e0d0d;
    margin-bottom: 10px;
}

.hub-card-content h3 {
    font-size: 20px;
    line-height: 1.4;
    color: #111111;
    margin: 0 0 20px 0;
}

/* Color Variants */
.hub-gradient-bg { background: linear-gradient(135deg, #8e2574, #ff5ec4); border: none; }
.hub-dark-bg { background: #1a1a1a; border: none; }
.hub-white-text h3, .hub-white-text .hub-label { color: #111010 !important; }

/* Slider Buttons */
.hub-slider-btn {
    align-self: flex-start;
    padding: 10px 22px;
    border-radius: 30px;
    border: 2px solid #0b0b0b;
    /* background: transparent; */
    background: #8e2574;
    color: #f9f6f6;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.hub-btn-outline {
    border-color: #040404 !important;
    color: #faf8f8 !important;
}

.hub-slider-btn:hover {
    background: #a0889a;
    color: #fff;
}

/* Swiper Controls Customization */
.hub-nav-btn {
    color: #ff5ec4 !important;
    background: white;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.hub-nav-btn:after {
    font-size: 18px !important;
}

.hub-dots {
    bottom: -40px !important; 
}

.hub-dots .swiper-pagination-bullet-active {
    background: #ff5ec4 !important;
}

/*=========SOLUTIONS=========== */

/* =================== BASE STYLES =================== */
.our-solutions {
  max-width: 100%;
  width: 100%;
  color: #fff;
  text-align: center;
  margin-bottom: 40px;
}

.our-solutions h2 {
  font-size: clamp(40px,5vw,64);
  margin-bottom: 80px;
  letter-spacing: -1;
  font-weight: 800;
  font-size: 60px;
}

.solutions-grid {
  width: 100%;
  max-width: 100%;
  margin: auto;
  margin-top: 50px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px 30px;
}

.solution-item p {
  margin-top: 18px;
  font-size: 15px;
  letter-spacing: 1px;
}

.icon-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: linear-gradient(180deg, #ff74d4, #1e1b4b);
  border: 2px solid rgba(255,255,255,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  font-weight: bold;
}

.icon-circle i {
  font-size: 38px;
  color: #fff;
}

.solution-item h4 {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.solution-desc {
  margin-top: 6px;
  font-size: 14px;
  color: #fff;
  line-height: 1.5;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto;
}

/* Center Highlight */
.center-highlight {
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-highlight p {
  font-size: 16px;
  line-height: 1.6;
  font-weight: 500;
  margin-top: 70px;
}

.center-col-2 {
  grid-column: 2/3;
}

.center-col-3 {
  grid-column: 3/4;
}

/* =================== TABLET (768px - 1024px) =================== */
@media (max-width: 1024px) {
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 20px;
  }

  .our-solutions h2 {
    font-size: 32px;
    margin-bottom: 50px;
  }

  .icon-circle {
    width: 80px;
    height: 80px;
  }

  .icon-circle i {
    font-size: 32px;
  }

  .solution-item h4 {
    font-size: 15px;
  }

  .solution-desc {
    max-width: 200px;
    font-size: 13px;
  }

  .center-highlight p {
    font-size: 15px;
    margin-top: 50px;
  }
}

/* =================== MOBILE (max-width: 768px) =================== */
@media (max-width: 768px) {
  .solutions-grid {
    grid-template-columns: 1fr;
    gap: 30px 15px;
  }

  .our-solutions h2 {
    font-size: 28px;
    margin-bottom: 40px;
  }

  .icon-circle {
    width: 70px;
    height: 70px;
  }

  .icon-circle i {
    font-size: 28px;
  }

  .solution-item h4 {
    font-size: 14px;
  }

  .solution-desc {
    max-width: 180px;
    font-size: 12px;
  }

  .center-highlight p {
    font-size: 14px;
    margin-top: 40px;
    padding: 0 20px;
    text-align: center;
  }

  .center-col-2,
  .center-col-3 {
    grid-column: auto;
  }
}

/* =====100x solution====== */
.hub-main-wrapper {
  /* background: #080115; */
  color: #ffffff;
  padding: 80px 20px;
  font-family: 'Poppins', sans-serif;
  position: relative;
  overflow: hidden;
}

.hub-particle-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  /* background: radial-gradient(circle at 50% 10%, rgba(124, 76, 255, 0.15), transparent); */
  pointer-events: none;
}

/* Header Titles */
.hub-header-group { text-align: center; margin-bottom: 50px; }
.hub-title-main { font-size: 60px; font-weight: 800; margin: 0; }
.hub-title-sub { 
  font-size: 35px; 
  background: linear-gradient(90deg, #ff4fd8, #7c7cff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  margin-top: -10px;
}

.hub-layout-container { max-width: 1500px; 
  margin: 0 auto;
  width: 100%;
 }

/* Main Flex Layout */
.hub-flex-row {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.hub-text-block { flex: 1.2; 
  /* width: 30px; */
  /* min-width: 320px; */
 }
.hub-image-block { flex: 0.8; 
  /* min-width: 320px; */
 }

/* Left Glass Panel */
.hub-glass-panel {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(12px);
  padding: 45px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
  width: 700px;
  height: 600px;
}

.hub-amount {
  color: #ffee58;
  font-size: 50px;
  font-weight: 800;
  text-shadow: 0 0 15px rgba(255, 238, 88, 0.4);
}

.hub-service-name { font-size: 44px; font-weight: 600; display: block; margin-top: 5px; }
.hub-tagline-list { color: #aaa; margin: 15px 0 25px; font-size: 25px; }

.hub-checklist { list-style: none; padding: 0; }
.hub-checklist li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  font-size: 25px;
}
.hub-checklist li::before {
  content: "✔";
  margin-right: 15px;
  background: #ff4fd8;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 10px;
  color: #fff;
}

.hub-promo-badge {
  color: #ff4fd8;
  font-weight: 700;
  margin-top: 30px;
  letter-spacing: 1px;
}

/* Right Neon Image */
.hub-neon-frame {
  background: linear-gradient(45deg, #ff4fd8, #7c7cff);
  padding: 8px;
  border-radius: 30px;
  box-shadow: 0 0 50px rgba(255, 79, 216, 0.4);
  width: 700px;
  height: 600px;
}

.hub-image-inner {
  background: #0d0221;
  border-radius: 22px;
  overflow: hidden;
  position: relative;
}

.hub-image-inner img { width: 100%;
   display: block;
    opacity: 0.8;
    height: 580px;
   }

.hub-image-caption {
  position: absolute;
  bottom: 0; width: 100%;
  padding: 30px 20px;
  background: linear-gradient(transparent, #0d0221);
  text-align: center;
}

/* Solutions Grid */
.hub-section-divider {
  text-align: center;
  margin: 70px 0 40px;
  color: #9aff9a;
  font-size: 26px;
}

.hub-solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 20px;
}

.hub-mini-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 25px;
  border-radius: 15px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: 0.3s ease;
}

.hub-mini-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 20px rgba(124, 76, 255, 0.4);
  background: rgba(255, 255, 255, 0.1);
}

/* Button */
.hub-action-area { text-align: center; margin-top: 60px; }
.hub-glow-button {
  background: linear-gradient(90deg, #ff36c0, #ff73f1);
  color: #fff;
  border: none;
  padding: 20px 50px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(255, 54, 192, 0.5);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hub-title-main { font-size: 45px; }
  .hub-flex-row { flex-direction: column-reverse; } /* Image moves to top on mobile */
  .hub-text-block, .hub-image-block { width: 100%; }
}

/* ==========================
   LARGE DESKTOP (1440px+)
========================== */
@media (min-width: 1440px) {
  .hub-layout-container {
    max-width: 1500px;
  }
}

/* ==========================
   DESKTOP (1024px – 1439px)
========================== */
@media (max-width: 1439px) {

  .hub-glass-panel,
  .hub-neon-frame {
    width: 100%;
    height: auto;
  }

  .hub-image-inner img {
    height: auto;
  }

  .hub-service-name {
    font-size: 38px;
  }

  .hub-checklist li {
    font-size: 22px;
  }
}

/* ==========================
   TABLET (768px – 1023px)
========================== */
@media (max-width: 1023px) {

  .hub-title-main {
    font-size: 48px;
  }

  .hub-title-sub {
    font-size: 28px;
  }

  .hub-flex-row {
    gap: 30px;
  }

  .hub-text-block,
  .hub-image-block {
    width: 100%;
  }

  .hub-glass-panel,
  .hub-neon-frame {
    width: 100%;
    height: auto;
    padding: 35px;
  }

  .hub-amount {
    font-size: 42px;
  }

  .hub-service-name {
    font-size: 34px;
  }

  .hub-tagline-list {
    font-size: 22px;
  }

  .hub-checklist li {
    font-size: 20px;
  }

  .hub-image-inner img {
    height: auto;
  }
}

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

  .hub-main-wrapper {
    padding: 60px 16px;
  }

  .hub-title-main {
    font-size: 36px;
  }

  .hub-title-sub {
    font-size: 22px;
    margin-top: 5px;
  }

  .hub-flex-row {
    flex-direction: column-reverse; /* image top */
    gap: 25px;
  }

  .hub-glass-panel,
  .hub-neon-frame {
    width: 100%;
    height: auto;
    padding: 25px;
  }

  .hub-amount {
    font-size: 34px;
  }

  .hub-service-name {
    font-size: 26px;
  }

  .hub-tagline-list {
    font-size: 18px;
  }

  .hub-checklist li {
    font-size: 18px;
  }

  .hub-checklist li::before {
    width: 18px;
    height: 18px;
    font-size: 9px;
  }

  .hub-image-inner img {
    height: auto;
  }

  .hub-section-divider {
    font-size: 20px;
    margin: 50px 0 30px;
  }

  .hub-solutions-grid {
    grid-template-columns: 1fr;
  }

  .hub-action-area {
    margin-top: 40px;
  }

  .hub-glow-button {
    width: 100%;
    padding: 16px;
    font-size: 16px;
  }
}

/* ================= WHY CHOOSE US SECTION ================= */
/* ================= WHY CHOOSE US SECTION ================= */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #0f172a; /* Dark background example ke liye */
}

/* ================= SECTION ================= */

.why-choose {
    /* min-height hata diya taaki empty space na bane */
    padding: 60px 0; 
    color: #fff;
    overflow: hidden; /* Zig zag cards ko handle karne ke liye */
}

.container {
    max-width: 1700px; /* Width fix ki taaki desktop pe bahut wide na ho */
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

/* ================= HEADING ================= */

.badge {
    display: inline-block;
    padding: 5px 20px;
    font-weight: 800;
    font-size: clamp(24px, 5vw, 40px); /* Responsive font size */
    letter-spacing: -1px;
    margin-bottom: 10px;
}

.main-title {
    display: block;
    font-size: clamp(18px, 3vw, 32px);
    background: linear-gradient(90deg, #ff6ae3, #a48fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
    margin-bottom: 40px; /* Space kam kiya */
}

/* ================= GRID ================= */

.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 40px 0; /* Padding adjust ki */
}

/* ================= CARD ================= */

.card {
    position: relative;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 20px;
    border: 1px dashed rgba(255, 255, 255, 0.4);
    text-align: left;
    transition: all 0.3s ease;
}

/* ZIG ZAG EFFECT - Desktop Only */
@media (min-width: 992px) {
    .card:nth-child(even) {
        top: 30px;
    }
    .card:nth-child(odd) {
        top: -15px;
    }
}

.card:hover {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.12);
    border-style: solid; /* Hover pe border solid ho jayegi */
}

.card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-radius: 14px;
    margin-bottom: 15px;
}

.card h3 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.card p {
    font-size: 14px;
    line-height: 1.5;
    opacity: 0.85;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 255, 255, 0.4);
}

/* =========================
    Responsive Fixes
========================= */

/* Tablet & Large Mobile */
@media (max-width: 992px) {
    .why-choose {
        padding: 40px 0; /* Upar ka extra space yahan kam kiya */
    }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        padding: 20px;
    }

    .card {
        top: 0 !important; /* Zig zag hata diya mobile/tablet pe */
        margin-bottom: 10px;
    }
}

/* Small Mobile */
@media (max-width: 576px) {
    .why-choose {
        padding: 30px 0;
    }

    .cards-grid {
        grid-template-columns: 1fr; /* Single column */
        padding: 10px 20px;
    }

    .main-title {
        margin-bottom: 30px;
    }

    .card img {
        height: 200px; /* Mobile pe image thodi badi dikhegi */
    }
}

/* ================= HUB SECTION ================= */



/* trusted technologies */

.partner-section {
    padding: 100px 6%;
    margin-bottom: -100px;
}

.partner-container {
    margin-top: 40px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1600px;
    margin: auto;
}

/* LEFT CONTENT – MAIN FOCUS */
.partner-content {
    flex: 1.3;
}

.section-title {
    font-size: clamp(40px,5vw,64px);
    letter-spacing: -1px;
    font-weight: 800;
    margin-bottom: 40px;
    display: flex;
    margin-left: 520px;
}


/* BIG PARAGRAPH */
.partner-content p {
    font-size: 24px;
    line-height: 1.9;
    color: #fbf8f8;
    max-width: 700px;
}

.partner-content strong {
    font-weight: 700;
    color: rgb(255, 79, 154);
}

.highlight {
    color: #cc6df2;
    font-weight: 800;
}

/* RIGHT IMAGE – SMALL & CLEAN */
.partner-image {
    flex: 0.7;   /* image smaller */
}

.partner-image img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}

/* =========================
   Responsive Partner Section
========================= */

/* Large Laptop */
@media (max-width: 1200px) {
  .section-title {
    margin-left: 200px;
  }

  .partner-content p {
    font-size: 22px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .partner-container {
    gap: 40px;
  }

  .section-title {
    margin-left: 0;
    justify-content: center;
    text-align: center;
  }

  .partner-content {
    flex: 1;
  }

  .partner-content p {
    font-size: 20px;
    max-width: 100%;
  }
}

/* Tablet / Mobile */
@media (max-width: 768px) {
  .partner-section {
    padding: 70px 6%;
    margin-bottom: 0;
  }

  .partner-container {
    flex-direction: column;
    text-align: center;
  }

  .section-title {
    font-size: clamp(32px, 6vw, 42px);
    margin-bottom: 30px;
  }

  .partner-content p {
    font-size: 18px;
    line-height: 1.7;
  }

  .partner-image {
    width: 100%;
    max-width: 420px;
    margin: auto;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .partner-section {
    padding: 60px 5%;
  }

  .section-title {
    font-size: 28px;
  }

  .partner-content p {
    font-size: 16px;
  }
}

/* ================= TECHNOLOGY SECTION (FIXED) ================= */

.hub-section {
    width: 100%;
    /* Pehle yahan min-height 100vh tha, jise hata diya gaya hai space kam karne ke liye */
    padding: 60px 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    color: #f1f0f0;
    margin-bottom: 50px; /* Neeche ka gap sahi kiya */
}

/* ================= FULL WIDTH CONTAINER ================= */
.hub-container {
    width: 100%;
    max-width: 1700px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
    /* Yahan margin-top: 180px ko hata kar 0 kar diya gaya hai */
    margin-top: 0; 
}

/* ================= TECHNOLOGIES TITLE ================= */
.tech-title {
    font-size: clamp(28px, 6vw, 50px); /* Mobile pe apne aap chota hoga */
    font-weight: 700;
    margin-bottom: 50px;
}

.tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    margin-bottom: 50px;
}

.tech {
    flex: 1 1 150px;
    max-width: 180px;
    padding: 14px 26px;
    font-size: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(140, 70, 255, 0.2);
    transition: 0.3s ease;
}

.tech:hover {
    transform: translateY(-6px) scale(1.05);
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 0 35px rgba(255, 100, 255, 0.6);
}

/* ================= PROCESS TEXT ================= */
.process {
    font-size: clamp(16px, 2vw, 22px);
    margin: 40px 0 30px;
    opacity: 0.9;
}

/* ================= CTA (Call to Action) ================= */
.cta-title {
    font-size: clamp(24px, 5vw, 42px);
    font-weight: 700;
    margin-bottom: 25px;
    background: linear-gradient(90deg, #ff4fd8, #6a7bff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.cta-btn-t {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 45px;
    font-size: 18px;
    border-radius: 50px;
    background: linear-gradient(90deg, #ff36c0, #ff73f1);
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(255, 54, 192, 0.4);
    transition: 0.3s ease;
    margin-top: 30px;
    font-weight: 700;
}

.cta-btn-t:hover {
    transform: scale(1.08);
    box-shadow: 0 0 50px rgba(255, 120, 255, 0.8);
}

/* =========================================
    Responsive Fixes for Tablet & Mobile
========================================= */

@media (max-width: 992px) {
    .hub-section {
        padding: 40px 0;
        margin-bottom: 30px;
    }
    
    .tech-list {
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .hub-section {
        padding: 30px 0;
    }

    .tech {
        flex: 1 1 120px; /* Mobile par 2 icons ek line mein aayenge */
        padding: 12px;
        font-size: 14px;
    }

    .cta-btn-t {
        padding: 14px 30px;
        font-size: 15px;
        width: 100%; /* Mobile par full width button */
        justify-content: center;
    }
}
/* ================= TESTIMONIAL SECTION ================= */
.testimonial-section {
  width: 100%;
  padding: 100px 100px;
  text-align: center;
  color: #fff;
  margin-top: -150px;
}

.testimonial-section h2 {
  font-size: clamp(40px,5vw,64px);
  font-weight: 800;
  letter-spacing: -1;
  margin-bottom: 20px;
}

.subtitle {
  opacity: 0.8;
  max-width: 700px;
  margin: auto;
  font-size: 16px;
  height: 50px;
}

/* Slider wrapper */
.testimonial-wrapper {
  width: 100%;
  overflow: hidden;
  /* max-width: 100%; */
  margin: 60px auto 30px;
  padding: 0 40px;
}

.testimonial-track {
  display: flex;
  transition: transform 0.6s ease;
  width: 100%;
}

/* Card */
.testimonial-card {
  flex: 0 0 33.3333%;
  max-width:33.3333%;
  box-sizing: border-box;
  padding: 30px;
  border-radius: 20px;
  margin: 0 10px;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  border: 2px solid #ff9de2;
}

/* Client */
.client-info {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.client-info img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: #fff;
  border: 3px solid #ff9de2;
  object-fit: cover;
}

.client-info h4 {
  margin: 0;
  font-size: 16px;
}

.client-info span {
  font-size: 13px;
  opacity: 0.8;
}

.client-info small {
  display: block;
  font-size: 12px;
  color: #ff9de2;
}

.testimonial-card p {
  font-size: 14px;
  line-height: 1.7;
  opacity: 0.9;
}

/* Stars */
.stars {
  margin-top: 15px;
  color: gold;
  font-size: 18px;
}

/* Dots */
.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #aaa;
  cursor: pointer;
}

.dot.active {
  background: #ff9de2;
}

/* =========================
   Responsive Testimonials
========================= */

/* Large Laptop */
@media (max-width: 1200px) {
  .testimonial-section {
    padding: 90px 60px;
    margin-top: 0;
  }

  .testimonial-card {
    padding: 26px;
  }
}

/* Tablet */
@media (max-width: 992px) {
  .testimonial-section {
    padding: 80px 40px;
    margin-top: -180px;
  }

  .testimonial-wrapper {
    padding: 0 20px;
  }

  .testimonial-card {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .testimonial-section h2 {
    font-size: clamp(34px, 6vw, 48px);
  }
}

/* Tablet / Mobile */
@media (max-width: 768px) {
  .testimonial-section {
    padding: 70px 25px;
    margin-top: 0; /* remove negative overlap */
  }

  .testimonial-wrapper {
    padding: 0;
    margin: 40px auto 20px;
  }

  .testimonial-track {
    gap: 20px;
  }

  .testimonial-card {
    flex: 0 0 100%;
    max-width: 100%;
    margin: 0;
  }

  .client-info img {
    width: 70px;
    height: 70px;
  }

  .testimonial-card p {
    font-size: 13px;
  }
}

/* Mobile */
@media (max-width: 480px) {
  .testimonial-section {
    padding: 0 15px;
  }

  .subtitle {
    font-size: 14px;
    height: auto;
  }

  .client-info h4 {
    font-size: 15px;
  }

  .stars {
    font-size: 16px;
  }
}


/* Separator */
.tm-separator {
  width: 100%;
  margin: 40px auto;
  border-bottom: 4px dashed rgba(255,255,255,0.6);
  box-shadow: 0 0 10px rgba(255,255,255,0.2);
}


/* Arrows */

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

body {
  margin: 0;
  font-family: 'Poppins', sans-serif;
}

/* ================= SLIDER ARROWS ================= */
.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.9);
  border: none;
  font-size: 22px;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 15px rgba(0,0,0,0.25);
  transition: 0.3s;
}

/* Hover */
.arrow:hover {
  transform: translateY(-50%) scale(1.1);
}

/* Positions */
.arrow.left {
  left: 10px;
}

.arrow.right {
  right: 10px;
}

/* ================= TABLET ================= */
@media (max-width: 1024px) {
  .arrow {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }
}

/* ================= MOBILE ================= */
@media (max-width: 768px) {
  .arrow {
    width: 36px;
    height: 36px;
    font-size: 18px;
  }

  .arrow.left {
    left: 5px;
  }

  .arrow.right {
    right: 5px;
  }
}

/* ================= SMALL MOBILE ================= */
@media (max-width: 480px) {
  .arrow {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/*======================= why Section=====================*/

/* .why-choose-us {
  width: 100%;
  padding: 120px 0;
}

.why-container {
  max-width: 1400px;
  margin: auto;
  display: flex;
  align-items: center;
  gap: 120px;
  padding: 0 6%;
}

/* LEFT IMAGE */
/* .why-image {
  flex: 1;
  display: flex;
  justify-content: center;
} */

/* .why-image img {
  width: 420px;
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.55);
} */

/* RIGHT CONTENT */
/* .why-content {
  flex: 1;
  max-width: 620px; */
/* } */

/* TAG */
/* .why-tag {
  color: #ff4f9a;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
 */
/* HEADING
.why-heading {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 30px;
}

.why-heading span {
  color: #ff4f9a;
}

/* TEXT */
/* .why-text {
  font-size: 16.8px;
  line-height: 1.85;
  color: #cfd4ff;
  margin-bottom: 22px;
} */ */

/* ========== TABLET ========== */
/* @media (max-width: 992px) {
  .why-container {
    flex-direction: column;
    text-align: center;
    gap: 70px;
  }

  .why-image img {
    width: 380px;
  }

  .why-content {
    max-width: 100%;
  }

  .why-heading {
    font-size: 36px;
  }
} */

/* ========== MOBILE ========== */
/* @media (max-width: 576px) {
  .why-choose-us {
    padding: 80px 20px;
  }

  .why-image img {
    width: 300px;
  }

  .why-heading {
    font-size: 28px;
  }

  .why-text {
    font-size: 15px;
  }
} */ */


/* ============================================================
   RESPONSIVE OVERRIDES (Paste this at the very end of your CSS)
   ============================================================ */

/* --- Tablet & Desktop Small (Max 1200px) --- */
/* @media (max-width: 1200px) {
    .hero-text h1 { font-size: 55px; }
    .hero-image img { width: 100%; margin-left: 0; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .why-content { margin-left: 0; margin-top: 50px; text-align: center; }
} */

/* --- Tablet Portrait (Max 992px) --- */
/* @media (max-width: 992px) {
    .hero { flex-direction: column; height: auto; padding: 40px 20px; text-align: center; }
    .hero-text h1, .tagline, .btn { margin-left: 0; }
    .hero-image img { margin-left: 0; height: auto; }
    
    .why-container { flex-direction: column; text-align: center; }
    .why-content { margin-left: 0; margin-top: 0; max-width: 100%; }
    .why-tag h1, .why-heading, .why-text { width: 100% !important; margin-left: 0 !important; }
    
    .solutions-grid { grid-template-columns: repeat(2, 1fr); }
    .topbar-content { margin-right: 0; justify-content: center; gap: 15px; }
} */

/* --- Mobile Landscape & Large Phones (Max 768px) --- */
/* @media (max-width: 768px) {
    .nav-content { flex-direction: column; gap: 15px; }
    .menu { gap: 15px; flex-wrap: wrap; justify-content: center; }
    .nav-middle-right { margin-right: 0; }
    
    .cms-title { font-size: 36px; }
    .cms-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    
    .hubunicon-hero-new, .hero-content-new { margin-right: 0; padding: 40px 20px; }
    .why-box ul { grid-template-columns: 1fr; }
    
    .testimonial-card { min-width: 100%; margin: 10px 0; }
    .testimonial-section { margin-top: 0; }
}
 */
/* --- Small Mobile (Max 576px) --- */
/* @media (max-width: 576px) {
    .hero-text h1 { font-size: 34px; }
    .top-left span { display: block; margin-right: 0; margin-bottom: 5px; }
    .top-right { flex-direction: column; margin-right: 0; }
    
    .why-heading { font-size: 28px; }
    .why-tag h1 { font-size: 24px; }
    
    .solutions-grid { grid-template-columns: 1fr; }
    .services-grid { grid-template-columns: 1fr; }
    
    .logo-hub { font-size: 32px; }
    .cta-btn { width: 100%; justify-content: center; }
} */