.navbar-brand img{
    width: 35%;
}
.classbgDark{
    background: rgba(26, 26, 26, 0.9);
}
.navbar-expand-lg .navbar-nav .nav-link {
    color: #fff;
    font-size: 14px;
}.navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: rgb(255 255 255);
}

.calliconsheaDer {
    background: #1E73FF;           /* Professional blue shade */
    border-radius: 44px;
    
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    cursor: pointer;

    /* Smooth animation */
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Hover Effect */
.calliconsheaDer:hover {
    background: #1558CC;           /* Darker blue on hover */
    transform: translateY(-3px);   /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

.whatSapp {
    background: #25D366;           /* Professional blue shade */
    border-radius: 44px;
    padding: 0px 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 600;
    cursor: pointer;

    /* Smooth animation */
    transition: all 0.3s ease;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

/* Hover Effect */
.whatSapp:hover {
    background: #25D366;           /* Darker blue on hover */
    transform: translateY(-3px);   /* Lift effect */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);
}

/* Sirf yeh CSS apne stylesheet mein ya <style> tag mein daal do */
.mini-faq-section {
  max-width: 800px;
  width: 50%;
  margin: 0px auto;
  font-family: system-ui, -apple-system, sans-serif;
}
.bgdark0099{
    background: #000;
    padding: 40px 0px;
}
.mini-faq-section h2 {
  text-align: center;
  font-size: 1.9rem;
  font-weight: 700;
  background: linear-gradient(90deg, #8b5cf6, #3b82f6);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 36px;
}

.mini-faq-section .faq {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 12px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.mini-faq-section .faq:hover {
  border-color: #a78bfa;
}

.mini-faq-section .q {
  padding: 14px 20px;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #e0e0ff;
}

.mini-faq-section .q::after {
  content: "+";
  font-size: 1.5rem;
  font-weight: 300;
  transition: 0.3s;
}

.mini-faq-section .faq.active .q::after {
  transform: rotate(45deg);
  color: #a78bfa;
}

.mini-faq-section .a {
  max-height: 0;
  overflow: hidden;
  padding: 0 20px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: #b8c0ff;
  transition: all 0.35s ease;
}

.mini-faq-section .faq.active .a {
  max-height: 90px;
  padding: 10px 20px 20px;
}

/* Color Backgrounds */
.bg-blue{background: #E8F5FF;}
.bg-green{background: #E5F9EF;}
.bg-orange{background: #FFEEDB;}
.bg-lightorange{background: #FFF3E4;}
.bg-lightgreen{background: #EAFBF2;}


/* ------------------------
   RESPONSIVE BEHAVIOR
   ------------------------ */
@media (max-width: 992px){
    .menu-section{
        justify-content: center;
        padding: 20px;
    }

    .menu-item{
        width: 45%;
        justify-content: center;
    }
}

@media (max-width: 600px){
    .menu-section{
        flex-direction: column;
        gap: 20px;
    }

    .menu-item{
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    .menu-item .text{
        font-size: 18px;
    }

    .menu-item .icon{
        width: 52px;
        height: 52px;
    }
}

/* Ultra Professional Footer CSS */

.pro-footer {
  background: #0f172a;
  color: #cbd5e1;
  font-family: 'Inter', 'Segoe UI', sans-serif;
  line-height: 1.7;
}

.footer-main {
  padding: 90px 0 60px;
  border-bottom: 1px solid #1e293b;
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 60px;
}

.footer-brand .brand-logo {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.footer-brand .logo {
  width: 56px;
  height: 56px;
  border-radius: 12px;
}

.footer-brand h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.tagline {
  font-size: 1.1rem;
  color: #60a5fa;
  font-weight: 600;
  margin: 12px 0 16px;
}

.desc {
  font-size: 0.95rem;
  color: #94a3b8;
  max-width: 320px;
}

.footer-links h5 {
  color: #ffffff;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 24px;
  position: relative;
}

.footer-links h5::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 32px;
  height: 3px;
  background: #60a5fa;
  border-radius: 2px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links ul li {
  margin-bottom: 14px;
}

.footer-links a {
  color: #94a3b8;
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  display: inline-block;
}

.footer-links a:hover {
  color: #60a5fa;
  transform: translateX(6px);
}

/* Bottom Bar */
.footer-bottom-bar {
  background: #0a0e17;
  padding: 20px 16px;
  font-size: 0.875rem;
  color: #64748b;
  text-align: center;        /* Center all text */
}

.bottom-flex {
  display: flex;
  flex-direction: column;    /* Stack items for perfect centering */
  justify-content: center;
  align-items: center;
  gap: 12px;                 /* Balanced spacing */
  width: 100%;
  margin: 0 auto;
}

/* Optional: for larger screens you can re-enable row layout */
@media (min-width: 768px) {
  .bottom-flex {
    flex-direction: row;
    text-align: center;
    justify-content: center; /* Still centered */
    gap: 20px;
  }
}


.legal-note {
  font-size: 0.8rem;
  color: #475569;
}

/* Responsive */
@media (max-width: 1024px) {
  .footer-grid {
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
  }
  .footer-links:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  .brand-logo {
    justify-content: center;
  }
  .footer-links h5::after {
    left: 50%;
    transform: translateX(-50%);
  }
  .bottom-flex {
    flex-direction: column;
    text-align: center;
  }
}


.connect-advanced{
  background: var(--bg);
  padding:50px 20px;
  border-top:1px solid #e8e8e8;
}

.connect-inner{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 320px;
  gap:30px;
  align-items:flex-start;
}

.connect-left h2{
  color: var(--text);
  font-size:1.75rem;
  margin-bottom:10px;
}

.lead{
  color: var(--muted);
  margin-bottom:25px;
  font-size:1rem;
}

.contact-row{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
}

.contact-card{
  display:flex;
  align-items:center;
  gap:16px;
  background: var(--card);
  padding:16px 20px;
  border-radius:14px;
  text-decoration:none;
  color: var(--text);
  min-width:230px;
  box-shadow:0 4px 16px rgba(0,0,0,0.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.contact-card:hover{
  transform: translateY(-5px);
  box-shadow:0 12px 28px rgba(0,0,0,0.12);
}

.contact-card .contact-icon{
  width:50px;
  height:50px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
  background: linear-gradient(135deg, var(--accent), #19b27e);
  flex:0 0 50px;
  color:#fff;
}

.contact-card .contact-info{
  display:flex;
  flex-direction:column;
}
.contact-card .title{
  font-weight:700;
}
.contact-card .meta{
  font-size:0.9rem;
  color: var(--muted);
}
.contact-card .contact-action{
  margin-left:auto;
  background:#e9e9e9;
  padding:6px 12px;
  border-radius:8px;
  font-weight:700;
  font-size:0.9rem;
  color:#000;
}
.contact-card.whatsapp .contact-icon{
  background:linear-gradient(135deg,#25D366,#16B364);
}

.connect-right{
  display:flex;
  justify-content:center;
}

.card-stats{
  background:#fafafa;
  padding:20px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:12px;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
}

.stat{
  padding:10px 16px;
  text-align:center;
}
.stat .num{
  font-weight:800;
  color: var(--text);
  font-size:1.2rem;
}
.stat .label{
  font-size:0.85rem;
  color: var(--muted);
}
.divider{
  width:1px;
  height:36px;
  background:#e0e0e0;
}

/* Responsive */
@media (max-width:1100px){
  .connect-inner{
    grid-template-columns:1fr 280px;
    gap:20px;
  }
  .contact-card{
    min-width:200px;
  }
}

@media (max-width:820px){
  .connect-inner{
    grid-template-columns:1fr;
  }
  .connect-right{
    order:2;
    margin-top:20px;
  }
  .contact-row{
    justify-content:center;
  }
  .contact-card{
    width:100%;
    max-width:520px;
    justify-content:flex-start;
  }
}

@media (max-width:520px){
  .contact-card{
    flex-direction:row;
    gap:12px;
    padding:12px 14px;
    border-radius:12px;
  }
  .contact-card .contact-icon{
    width:44px;
    height:44px;
    flex:0 0 44px;
    font-size:1.4rem;
  }
  .contact-card .title{
    font-size:0.98rem;
  }
  .contact-card .meta{
    font-size:0.88rem;
  }
  .contact-card .contact-action{
    padding:6px 10px;
    font-size:0.88rem;
  }
  .connect-left h2{
    font-size:1.35rem;
  }
  .lead{
    font-size:0.95rem;
  }
}

.about-mini {
  padding: 80px 20px;
  background: #0f172a;
  color: white;
}

.about-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 60px;
  align-items: center;
}

.about-left h3 {
  font-size: 16px;
  color: #60a5fa;
  font-weight: 600;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.about-left h2 {
  font-size: 36px;
  line-height: 1.3;
  margin: 0 0 20px 0;
  font-weight: 700;
}

.about-left p {
  font-size: 17px;
  line-height: 1.7;
  color: #cbd5e1;
  margin-bottom: 32px;
}

.mini-stats {
  display: flex;
  gap: 40px;
  font-size: 15px;
}

.mini-stats div strong {
  display: block;
  font-size: 28px;
  color: #60a5fa;
  font-weight: 700;
}

.about-right img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.4);
}

/* Mobile */
@media (max-width: 868px) {
  .about-wrapper {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
  
  .about-left h2 { font-size: 30px; }
  .mini-stats { justify-content: center; }
  .about-right img { height: 300px; }
}
.fixed-buttons {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fab-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0,0,0,0.25);
  transition: all 0.3s ease;
  transform: translateY(0);
}

.fab-btn:hover {
  transform: translateY(-6px) scale(1.08);
  box-shadow: 0 16px 32px rgba(0,0,0,0.35);
}

.whatsapp {
  background: #25d366;
  color: white;
}

.call {
  background: #3b82f6;
  color: white;
}

/* Mobile pe thoda chhota kar do (optional) */
@media (max-width: 640px) {
  .fixed-buttons {
    bottom: 16px;
    right: 16px;
  }
  .fab-btn {
    width: 52px;
    height: 52px;
  }
}

.features-four {
  padding: 80px 20px;
  background: #0f172a;
}

.features-container {
  max-width: 1200px;
  margin: 0 auto;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.feature-box {
  background: rgba(30, 41, 59, 0.6);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  transition: all 0.4s ease;
  height: 100%;
}

.feature-box:hover {
  transform: translateY(-12px);
  background: rgba(79, 70, 229, 0.15);
  border-color: #6366f1;
  box-shadow: 0 20px 40px rgba(79, 70, 229, 0.2);
}

.icon {
  font-size: 42px;
  margin-bottom: 20px;
}

.feature-box h3 {
  font-size: 20px;
  color: #e2e8f0;
  margin: 0 0 16px 0;
  font-weight: 700;
}

.feature-box p {
  font-size: 15px;
  color: #94a3b8;
  line-height: 1.6;
  margin: 0;
}

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

@media (max-width: 576px) {
  .features-grid {
    grid-template-columns: 1fr;
  }
  .features-four {
    padding: 60px 20px;
  }
  .feature-box {
    padding: 28px 20px;
  }
}

.tiger-mini-guide {
  padding: 60px 20px;
  background: #0b0e17;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #c9d1d9;
}

.tmini-container { max-width: 1000px; margin: 0 auto; }

/* Header */
.tmini-header {
  display: flex; align-items: center; gap: 16px;
  margin-bottom: 40px;
}
.tmini-logo {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: bold; color: white;
  box-shadow: 0 6px 20px rgba(249,115,22,0.4);
}
.tmini-title h2 { font-size: 26px; color: white; margin: 0 0 4px 0; font-weight: 600; }
.tmini-title p { margin: 0; font-size: 14.5px; color: #8b949e; }

/* Ultra Compact Grid */
.tmini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.tmini-card {
  background: rgba(33,38,45,0.9);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(88,101,118,0.2);
  border-radius: 20px;
  padding: 20px 22px;
  display: flex; align-items: flex-start; gap: 16px;
  text-decoration: none; color: inherit;
  transition: all 0.3s ease;
}
.tmini-card:hover {
  transform: translateY(-5px);
  border-color: #f97316;
  box-shadow: 0 12px 25px rgba(249,115,22,0.15);
}
.tmini-num {
  font-size: 42px; font-weight: 800;
  background: linear-gradient(135deg, #fb923c, #f97316);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}
.tmini-card h3 {
  font-size: 16.5px; color: white;
  margin: 0 0 6px 0; font-weight: 600;
}
.tmini-card p {
  margin: 0; font-size: 13.8px;
  color: #cbd5e1; line-height: 1.5;
}
/* Sirf yeh CSS add karo – white/light bg ke liye perfect */
.full-marquee {
  width: 100%;
  background: #f8f9ff;
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.marquee-track {
  display: flex;
  gap: 60px;
  animation: marquee 35s linear infinite;
  white-space: nowrap;
}

.full-marquee span {
  font-size: 1.05rem;
  font-weight: 600;
  color: #4c1d95;
  background: linear-gradient(135deg, #ddd6fe, #c4b5fd);
  padding: 12px 28px;
  border-radius: 50px;
  flex-shrink: 0;
  box-shadow: 0 4px 15px rgba(139, 92, 246, 0.15);
}

/* Infinite smooth scroll */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Hover pe pause (user-friendly) */
.full-marquee:hover .marquee-track {
  animation-play-state: paused;
}
/* Sirf yeh CSS daal do – white bg pe perfect */
.modern-marquee {
  width: 100%;
  padding: 14px 0;
  background: #ffffff;
  overflow: hidden;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.track {
  display: flex;
  gap: 32px;
  animation: slide 32s linear infinite;
  white-space: nowrap;
}

.track span {
  font-size: 0.88rem;
  font-weight: 600;
  color: #581c87;
  background: #f3e8ff;
  padding: 7px 20px;
  border-radius: 30px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(139, 92, 246, 0.12);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Optional: chhota star icon */
.track span::before {
  content: "★";
  font-size: 0.9em;
  color: #a855f7;
}

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

.modern-marquee:hover .track {
  animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
  .tmini-grid { grid-template-columns: 1fr; gap: 16px; }
  .tmini-header { flex-direction: column; text-align: center; }
  .tmini-card { padding: 18px 20px; }
}


@media screen and (min-width: 200px) and (max-width: 480px){
 .navbar-brand {
    width: 70%;
}
.navbar-brand img {
    width: 64%;
}
 .mini-faq-section {
    width: 90%;
}  
}

.skyline-section {
    width: 100%;
    padding: 60px 15px;
    background: linear-gradient(135deg, #0d0e14, #1a1c26);
    display: flex;
    justify-content: center;

}

.skyline-container {
    width: 100%;
    max-width: 900px;
    background: #ffffff0d;
    backdrop-filter: blur(12px);
    padding: 40px;
    border-radius: 20px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
    line-height: 1.7;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
    border: 1px solid rgba(255,255,255,0.15);
}

.skyline-container h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-weight: 600;
    color: #4fc3f7;
    text-align: left;
}

.skyline-container p {
    font-size: 17px;
    text-align: left;
    color: #e6e6e6;
}

.skyline-container p strong {
    color: #4fc3f7;
    font-weight: 600;
}
.hero-skyline{
    width: 100%;
    padding: 120px 20px;
    background: linear-gradient(135deg, #0d0e14, #10121a);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: left;
}

.hero-content {
    max-width: 900px;
    color: #ffffff;
    font-family: "Poppins", sans-serif;
}

.hero-content h1 {
    font-size: 50px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.2;
}

.hero-content h1 span {
    color: #4fc3f7;
}

.hero-content p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
    color: #dcdcdc;
}

.hero-btn {
    display: inline-block;
    padding: 14px 34px;
    background: #4fc3f7;
    color: #0d0e14;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

.hero-btn:hover {
    background: #3ab3e8;
    transform: translateY(-3px);
}


/* Skyline Premium App Section - Clean & Unique CSS */
.skyline-section {
    background-color: #121212;
    color: #e0e0e0;
    padding: 80px 0;
    min-height: 100vh;
}

.skyline-title {
    color: #FFC107;
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 2rem;
}

.skyline-text {
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.8rem;
    color: #e0e0e0;
}

.skyline-highlight {
    color: #FFC107;
    font-weight: bold;
}

.skyline-card {
    background-color: #1e1e1e;
    padding: 28px;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
    text-align: center;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    height: 100%;
}

.skyline-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6);
}

.skyline-card p {
    color: #ffffff;
    font-weight: 500;
    font-size: 1.05rem;
    margin: 0;
}

/* WhatsApp Button */
.skyline-wa-btn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: #25D366;
    color: white;
    padding: 16px 28px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 1rem;
    text-decoration: none;
    box-shadow: 0 0 8px 20px rgba(0, 0, 0, 0.5);
    z-index: 9999;
    transition: all 0.3s ease;
}

.skyline-wa-btn:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.6);
    color: white;
}

/* Responsive */
@media (max-width: 768px) {
    .skyline-title {
        font-size: 2rem;
    }
    .skyline-text {
        font-size: 1rem;
    }
    .skyline-wa-btn {
        padding: 14px 22px;
        font-size: 0.95rem;
        bottom: 20px;
        right: 20px;
    }
}
@media (max-width: 520px) {
    .contact-card {
        width: 100%;
    }
    .lead {
        width: 80%;
    }
        .connect-right {
         display: none;
    }
}
}


/*====================hero section==============*/

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

.hero {
  height: 100vh;
  background: linear-gradient(to right, rgba(0,0,0,0.78), rgba(0,0,0,0.20)),
              url('https://jade-clafoutis-929aae.netlify.app/images/cricket.webp') 
              center/cover no-repeat fixed;
  display: flex;
  align-items: center;
  padding-left: 7%;
  color: white;
  font-family: 'Satoshi', 'Inter', sans-serif;
}

.content {
  max-width: 680px;
  animation: fadeSlide 1.3s ease-out;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

h1 {
  font-size: 68px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -2.5px;
  margin-bottom: 16px;
}

.highlight {
  background: linear-gradient(95deg, #00f5ff, #39ff14);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

p {
  font-size: 20px;
  line-height: 1.6;
  color: #e0f8ff;
  margin-bottom: 40px;
  font-weight: 400;
}

.btn {
  padding: 16px 48px;
  font-size: 18px;
  font-weight: 700;
  background: rgba(0, 212, 255, 0.18);
  color: white;
  border: 1.5px solid rgba(0, 212, 255, 0.5);
  border-radius: 50px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-decoration: none;
  display: inline-block;
  transition: all 0.4s ease;
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.15);
}

.btn:hover {
  background: rgba(0, 212, 255, 0.3);
  border-color: #00d4ff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px rgba(0, 212, 255, 0.25);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .hero { padding-left: 6%; padding-top: 20vh; align-items: flex-start; }
  h1 { font-size: 48px; letter-spacing: -1.5px; }
  p { font-size: 18px; margin-bottom: 35px; }
  .btn { padding: 14px 40px; font-size: 17px; }
}

@media (max-width: 480px) {
  h1 { font-size: 40px; }
      .hero {
        text-align: center;
        padding: 0 5%;
        justify-content: center;
        height: 100%;
        padding: 40px 10px;
    }
  .content { margin: 0 auto; }
}

/*====================tigerexch===================*/
.luxury-step-card {
    background: linear-gradient(145deg, #ffffff 0%, #f8f9ff 100%);
    border-radius: 24px;
    padding: 40px 35px;
    position: relative;
    border: 1.5px solid #e6e8ff;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
  }
  .luxury-step-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    border-radius: 24px 24px 0 0;
  }
  .luxury-step-card:hover {
    transform: translateY(-15px) scale(1.02);
    box-shadow: 0 30px 80px rgba(102, 126, 234, 0.18) !important;
    border-color: #667eea44;
  }
  .luxury-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    box-shadow: 0 15px 35px rgba(102, 126, 234, 0.4);
  }
  .luxury-number {
    font-size: 2.2rem;
    font-weight: 900;
    color: white;
  }
  .elegant-tag {
    background: linear-gradient(135deg, #667eea22, #764ba222);
    color: #5a67d8;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
    border: 1px solid #e0e7ff;
  }
  .luxury-check {
    width: 28px;
    height: 28px;
    background: #10b981;
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 0.9rem;
  }
  .luxury-password-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: #f1f5f9;
    padding: 20px;
    border-radius: 16px;
    font-size: 0.95rem;
  }
  .luxury-line {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60%;
    height: 4px;
    background: linear-gradient(90deg, transparent, #667eea44, transparent);
    border-radius: 2px;
  }

    /* Unique prefix: aqbx3- */
    .aqbx3-wrap{
      font-family: "Inter", system-ui, sans-serif;
      padding: 40px 16px;
      background: #f9fafb;
      width: 100%;
      position: relative;
      z-index: 1;
    }

    .aqbx3-grid{
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
      max-width: 900px;
      margin: 20px auto 0; /* FIXED: grid starts below heading fully */
      position: relative;
      z-index: 2;
    }

    @media(min-width:900px){
      .aqbx3-grid{ grid-template-columns: repeat(4, 1fr); }
    }

    /* Ultra-modern floating cards */
    .aqbx3-card{
      position: relative;
      background: #fff;
      padding: 28px 14px;
      border-radius: 18px;
      text-align: center;
      font-size: 0.95rem;
      font-weight: 600;
      color: #0f172a;
      letter-spacing: 0.3px;
      overflow: hidden;
      cursor: pointer;
      isolation: isolate;
      transition: all .35s ease;
      border: 1px solid rgba(0,0,0,0.04);
    }

    /* Neon soft glow border */
    .aqbx3-card::before{
      content: "";
      position: absolute;
      inset: 0;
      background: #eef2ff;
      opacity: 0;
      transition: .25s ease;
      z-index: -1;
      border-radius: 18px;
    }

    .aqbx3-card:hover{
      transform: translateY(-4px);
      background: #eef2ff;
    }

    .aqbx3-card:hover::before{
      opacity: 1;
    }

    /* Mini underline animation */
    .aqbx3-title{
      display: inline-block;
      position: relative;
      padding-bottom: 4px;
    }

    .aqbx3-title::after{
      content:"";
      position:absolute;
      left:0; bottom:0;
      width:0%; height:2px;
      background:#6366f1;
      transition:.32s ease;
      border-radius:3px;
    }

    .aqbx3-card:hover .aqbx3-title::after{
      width:100%;
    }  

    /* Header styles (moved from inline) */
    .aqbx3-header{ max-width:900px; margin:auto; margin-bottom:22px; text-align:left; }
    .aqbx3-heading{ font-size:1.6rem; font-weight:700; color:#0f172a; margin:0 0 6px; }
    .aqbx3-sub{ font-size:0.95rem; color:#475569; margin:0; }


/*================== Customer Support Css ==================*/

/*========Text Box========*/

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

/* ================= Section ================= */
.features-section {
    background-color: #f1f1f1;
    padding: 40px 5%;
    font-family: Arial, sans-serif;
    color: #333;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ================= Main Heading ================= */
.features-section h3 {
    grid-column: 1 / -1;
    font-size: 26px;
    font-weight: 700;
    color: #007bff;
    text-align: center;
    margin-bottom: 20px;
}

/* ================= Cards ================= */
.content-wrapper {
    background-color: #fff;
    padding: 22px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Hover (Desktop only friendly) */
@media (hover: hover) {
    .content-wrapper:hover {
        transform: translateY(-6px);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        background-color: #fafafa;
    }
}

/* ================= Card Heading ================= */
.features-section h5 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: #333;
}

/* ================= Text ================= */
.features-section p {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
}

/* ================= Link ================= */
.home-link {
    color: #007bff;
    text-decoration: none;
    font-weight: 500;
}

.home-link:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* ================= Tablet ================= */
@media (max-width: 1024px) {
    .features-section {
        grid-template-columns: repeat(2, 1fr);
        padding: 40px 6%;
    }

    .features-section h3 {
        font-size: 24px;
    }
}

/* ================= Mobile ================= */
@media (max-width: 768px) {
    .features-section {
        grid-template-columns: 1fr;
        padding: 30px 5%;
    }

    .features-section h3 {
        font-size: 22px;
    }

    .features-section h5 {
        font-size: 16px;
    }

    .features-section p {
        font-size: 13px;
    }
}

/* ================= Small Phones ================= */
@media (max-width: 480px) {
    .features-section {
        padding: 25px 15px;
    }

    .content-wrapper {
        padding: 18px;
    }

    .features-section h3 {
        font-size: 20px;
    }
}


/*========Text Box========*/
/*================== Customer Support Css ==================*/

.center-btn-section {
  width: 100%;
  padding: 20px;
}

.btn-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.center-width-btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  text-align: center;
  background-color: #1e90ff; /* Primary color */
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 8px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Hover Effect */
.center-width-btn:hover {
  background-color: #0b5ed7; /* Hover color */
  transform: translateY(-2px);
}

/* Active Click Effect */
.center-width-btn:active {
  transform: translateY(0);
}