/* ==========================================================================
   INDUSTRIES COMMON STYLESHEET - Amrux Tech
   Shared styling for all 12 Industry vertical pages
   ========================================================================== */

/* 1. Global / Reset Utilities for Industry Pages */
.ind-page-wrapper {
  overflow-x: hidden;
  font-family: 'Inter', sans-serif;
}

/* 2. Hero Section (Dark Gradient with Glassmorphic Elements) */
.ind-hero {
  position: relative;
  background: linear-gradient(135deg,#0d3551,#176b9d);
  color: #ffffff;
  padding: 70px 0;
  overflow: hidden;
}
.ind-hero::before {
  content: "";
  position: absolute;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 182, 255, 0.15), transparent 70%);
  top: -150px;
  right: -100px;
  pointer-events: none;
}
.ind-hero::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 217, 87, 0.12), transparent 70%);
  bottom: -100px;
  left: -50px;
  pointer-events: none;
}
.ind-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue, #38b6ff);
  background: rgba(56, 182, 255, 0.12);
  border: 1px solid rgba(56, 182, 255, 0.3);
  padding: 6px 16px;
  border-radius: 99px;
  margin-bottom: 20px;
}
.ind-hero-title {
  font-size: clamp(34px, 4.5vw, 54px);
  font-weight: 800;
  line-height: 1.15;
  color: #ffffff;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.ind-hero-title span {
  background: linear-gradient(135deg, var(--blue, #38b6ff), #7ed957);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ind-hero-lead {
  font-size: clamp(16px, 1.3vw, 20px);
  color: #b3cde0;
  line-height: 1.7;
  max-width: 680px;
  margin-bottom: 32px;
}
.ind-hero-img-box {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ind-hero-img-box img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.ind-hero-card-float {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  background: rgba(8, 40, 63, 0.88);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  padding: 18px 22px;
  color: #ffffff;
}

/* 3. Section Headers */
.ind-section-title-wrap {
  margin-bottom: 48px;
}
.ind-subtitle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue-2, #159bd8);
  margin-bottom: 12px;
}
.ind-subtitle i {
  color: var(--green, #7ed957);
}
.ind-title-light {
  color: var(--navy-2, #08283f);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.ind-title-dark {
  color: #ffffff;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
}
.ind-desc-light {
  color: #526b7e;
  font-size: 17px;
  line-height: 1.7;
}
.ind-desc-dark {
  color: #9cbcd1;
  font-size: 17px;
  line-height: 1.7;
}

/* 4. Section Themes (Light & Dark Combinations) */
.ind-sec-light {
  background-color: #ffffff;
  padding: 70px 0;
  position: relative;
}
.ind-sec-alt {
  background-color: #f2f7fa;
  padding: 70px 0;
  position: relative;
  border-top: 1px solid #e1ebf0;
  border-bottom: 1px solid #e1ebf0;
}
.ind-sec-dark {
  background: linear-gradient(135deg,#0d3551,#176b9d);
  color: #ffffff;
  padding: 70px 0;
  position: relative;
}
.ind-sec-dark-alt {
  background-color: #0c263b;
  color: #ffffff;
  padding: 70px 0;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* 5. Stats Strip (Metrics Row) */
.ind-stats-strip {
  background: linear-gradient(135deg,#0d3551,#176b9d);
  padding: 40px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.ind-stat-item {
  text-align: center;
  padding: 15px;
  border: 1px solid #31b1f7;
  border-radius: 12px;
  box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
}
.ind-stat-num {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 8px;
  font-family: 'Manrope', sans-serif;
}
.ind-stat-label {
  font-size: 14px;
  color: #a8c8dc;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* 6. Card System - Light Sections */
.ind-card-light {
  background: #ffffff;
  border: 1px solid #dce8f0;
  border-radius: 20px;
  padding: 32px 28px;
  height: 100%;
  transition: all 0.35s ease;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
}
.ind-card-light:hover {
  top: -8px;
  border-color: var(--blue, #38b6ff);
  box-shadow: 0 20px 45px rgba(13, 53, 81, 0.12);
}
.ind-card-light .ind-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--blue-2));
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: all 0.3s ease;
}
.ind-card-light:hover .ind-icon-box {
  transform: scale(1.08);
}
.ind-card-light h4 {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy-2, #08283f);
  margin-bottom: 12px;
}
.ind-card-light p {
  color: #5c7487;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.ind-list-light {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
}
.ind-list-light li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #3b5366;
  font-weight: 500;
}
.ind-list-light li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--green, #7ed957);
  font-size: 14px;
}

/* 7. Card System - Dark Sections */
.ind-card-dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid #34b3fb;
  border-radius: 20px;
  padding: 32px 28px;
  height: 100%;
  transition: all 0.35s ease;
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
}
.ind-card-dark:hover {
  top: -8px;
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(56, 182, 255, 0.4);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4);
}
.ind-card-dark .ind-icon-box {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--blue, #38b6ff), var(--green, #7ed957));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-bottom: 22px;
  transition: all 0.3s ease;
}
.ind-card-dark:hover .ind-icon-box {
  transform: scale(1.08);
}
.ind-card-dark h4 {
  font-size: 20px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 12px;
}
.ind-card-dark p {
  color: #a2c1d6;
  font-size: 15px;
  line-height: 1.65;
  margin-bottom: 18px;
}
.ind-list-dark {
  list-style: none;
  padding: 0;
  margin: auto 0 0;
}
.ind-list-dark li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #c4dbe9;
  font-weight: 500;
}
.ind-list-dark li i {
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--blue, #38b6ff);
  font-size: 14px;
}

/* 8. Split Image & Text Row (Feature Row) */
.ind-feature-img {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(13, 53, 81, 0.15);
  border: 1px solid rgba(13, 53, 81, 0.08);
  height: 490px;
}
.ind-feature-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 9. Process / Roadmap Steps Component */
.ind-step-card {
  position: relative;
  background: #ffffff;
  border-radius: 20px;
  padding: 28px 24px;
  border: 1px solid #dce8f0;
  box-shadow: 0 10px 25px rgba(13, 53, 81, 0.05);
  height: 100%;
  transition: all 0.3s ease;
}
.ind-step-card:hover {
  transform: translateY(-5px);
  border-color: var(--blue);
  box-shadow: 0 18px 35px rgba(13, 53, 81, 0.1);
}
.ind-step-num {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-2), var(--blue-2));
  color: #ffffff;
  font-weight: 800;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

/* 10. Compliance Tags & Badges */
.ind-compliance-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: rgba(56, 182, 255, 0.08);
  border: 1px solid rgba(56, 182, 255, 0.25);
  color: var(--navy-2);
  font-size: 13px;
  font-weight: 700;
  margin: 4px;
}

/* 11. CTA Banner Section */
.ind-cta-box {
  background: linear-gradient(135deg,#0d3551,#176b9d);
  border-radius: 28px;
  padding: 60px 40px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(56, 182, 255, 0.2);
  box-shadow: 0 25px 60px rgba(8, 40, 63, 0.4);
}
.ind-cta-box::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 217, 87, 0.2), transparent 70%);
  right: -80px;
  bottom: -80px;
  pointer-events: none;
}

/* Responsive fixes */
@media (max-width: 991px) {
  .ind-hero-img-box img {
    height: 320px;
  }
  .ind-sec-light, .ind-sec-alt, .ind-sec-dark, .ind-sec-dark-alt {
    padding: 60px 0;
  }
  .ind-cta-box {
    padding: 40px 24px;
  }
}

/* 12. Interactive Tabs Section Component */
.ind-tabs-nav {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.ind-tabs-nav .nav-link {
  background: #ffffff;
  border: 1px solid #dce8f0;
  border-radius: 12px;
  padding: 34px 12px;
  color: var(--navy-2, #08283f);
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 4px 15px rgba(13, 53, 81, 0.03);
}
.ind-tabs-nav .nav-link i {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(56, 182, 255, 0.1);
  color: var(--blue, #38b6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: all 0.3s ease;
}
.ind-tabs-nav .nav-link.active,
.ind-tabs-nav .nav-link:hover {
  background: linear-gradient(135deg,#0d3551,#176b9d);
  color: #ffffff;
  border-color: var(--blue);
  box-shadow: 0 10px 25px rgba(8, 40, 63, 0.2);
}
.ind-tabs-nav .nav-link.active i,
.ind-tabs-nav .nav-link:hover i {
  background: var(--blue);
  color: #ffffff;
}

/* Tabs Content Pane Box */
.ind-tab-pane-card {
  background: #ffffff;
  border: 1px solid #dce8f0;
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 15px 40px rgba(13, 53, 81, 0.08);
}
.ind-tab-img {
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
  height: 350px;
  width: 100%;
}
.ind-tab-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Dark variant tabs */
.ind-tabs-nav-dark .nav-link {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
}
.ind-tabs-nav-dark .nav-link.active,
.ind-tabs-nav-dark .nav-link:hover {
  background: linear-gradient(135deg, var(--blue, #38b6ff), var(--navy-2));
  border-color: #38b6ff;
}

/* 13. FAQ Accordion Component */
.ind-faq-accordion .accordion-item {
  background: #ffffff;
  border: 1px solid #dce8f0;
  border-radius: 16px !important;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(13, 53, 81, 0.04);
  transition: all 0.3s ease;
}
.ind-faq-accordion .accordion-item:hover {
  border-color: var(--blue);
}
.ind-faq-accordion .accordion-button {
  background: #ffffff;
  color: var(--navy-2, #08283f);
  font-weight: 700;
  font-size: 17px;
  padding: 20px 24px;
  box-shadow: none !important;
}
.ind-faq-accordion .accordion-button:not(.collapsed) {
  background: rgba(56, 182, 255, 0.06);
  color: var(--navy-2);
}
.ind-faq-accordion .accordion-body {
  padding: 0 24px 24px;
  color: #526b7e;
  font-size: 15px;
  line-height: 1.7;
}

/* Dark Accordion */
.ind-faq-dark .accordion-item {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.ind-faq-dark .accordion-button {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
}
.ind-faq-dark .accordion-button:not(.collapsed) {
  background: rgba(56, 182, 255, 0.15);
  color: #fff;
}
.ind-faq-dark .accordion-body {
  color: #b0c9db;
}

/* 14. Premium Introduction Light Section (Below Hero) */
.ind-sec-intro {
  background: linear-gradient(180deg, #ffffff 0%, #f4f8fb 100%);
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #e2edf3;
}
.ind-sec-intro::before {
  content: "";
  position: absolute;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56, 182, 255, 0.08), transparent 70%);
  top: -100px;
  left: -100px;
  pointer-events: none;
}
.ind-sec-intro::after {
  content: "";
  position: absolute;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(126, 217, 87, 0.08), transparent 70%);
  bottom: -80px;
  right: -80px;
  pointer-events: none;
}
.ind-intro-img-wrapper {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(13, 53, 81, 0.12);
  border: 5px solid #ffffff;
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}
.ind-intro-img-wrapper:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 65px rgba(13, 53, 81, 0.18);
}
.ind-intro-img-wrapper img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
  transition: transform 0.7s ease;
}
.ind-intro-img-wrapper:hover img {
  transform: scale(1.05);
}
.ind-intro-float-card {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(56, 182, 255, 0.3);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 15px 35px rgba(13, 53, 81, 0.15);
  animation: indFloatAnim 4s ease-in-out infinite alternate;
}
@keyframes indFloatAnim {
  0% { transform: translateY(0); }
  100% { transform: translateY(-10px); }
}

.ind-intro-bullet-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 32px;
}
.ind-intro-bullet-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 7px;
  font-size: 15px;    align-items: center;
  color: var(--navy-2, #08283f);
  font-weight: 600;
}
.ind-intro-bullet-list li i {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(126, 217, 87, 0.2);
  color: var(--green-2, #63be42);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}