/* =========================================================
   HOMEPAGE (index.html) SECTIONS
   Hero slider, customers marquee, about/services/gallery
   previews, and why-choose-us. Used on index.html only.
========================================================= */


/* ---------- HERO BANNER / SLIDER ---------- */

.hero-section {
      position: relative;
      color: white;
      min-height: 750px;
      height: 750px;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      background-color: rgba(53, 49, 44, 0.9);
      background-blend-mode: overlay;
      transition: background-image 1s ease-in-out, background-size 0.5s ease;
      padding: 40px 15px;
      margin-top: -60px;
    }

.hero-decorations {
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
    }

.floating-shape {
      position: absolute;
      border-radius: 50%;
      opacity: 0.1;
      animation: floatShape 8s ease-in-out infinite;
    }

.shape-1 {
      width: 300px;
      height: 300px;
      background: linear-gradient(135deg, #ffa600, #ff6b35);
      top: 10%;
      left: -5%;
      animation-delay: 0s;
    }

.shape-2 {
      width: 200px;
      height: 200px;
      background: linear-gradient(135deg, #fff, #ffd89b);
      top: 60%;
      right: -3%;
      animation-delay: 2s;
    }

.shape-3 {
      width: 150px;
      height: 150px;
      background: linear-gradient(135deg, #ffa600, #ffd89b);
      bottom: 10%;
      left: 10%;
      animation-delay: 4s;
    }

.shape-4 {
      width: 100px;
      height: 100px;
      background: #fff;
      top: 20%;
      right: 15%;
      animation-delay: 1s;
    }

@keyframes floatShape {

      0%,
      100% {
        transform: translateY(0) rotate(0deg);
      }

      50% {
        transform: translateY(-30px) rotate(10deg);
      }
    }

.hero-container {
      max-width: 1200px;
      margin: 0 auto;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      z-index: 5;
    }

.arrow-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(255, 255, 255, 0.15);
      border: 2px solid #ffffff4d;
      color: white;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      transition: all 0.3s ease;
      z-index: 10;
      backdrop-filter: blur(10px);
    }

.arrow-btn:hover {
      background: rgba(255, 255, 255, 0.25);
      transform: translateY(-50%) scale(1.1);
      border-color: rgba(255, 255, 255, 0.5);
    }

.arrow-left {
      left: 20px;
    }

.arrow-right {
      right: 20px;
    }

.hero-content {
      flex: 1;
      margin-left: 80px;
      margin-right: 80px;
      z-index: 5;
      text-align: center;
    }

.hero-badge {
      display: inline-block;
      font-size: 11px;
      letter-spacing: 2px;
      text-transform: uppercase;
      opacity: 0.9;
      margin-bottom: 8px;
    }

.hero-content h1 {
      font-size: 48px;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 20px;
      text-align: center;
      color: #ffffff;
    }

.hero-content .subheading {
      font-size: 18px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 15px;
      text-align: center;
      color: #ffffff;
    }

.hero-content p {
      font-size: 16px;
      line-height: 1.6;
      margin-bottom: 30px;
      text-align: center;
      opacity: 0.95;
      color: #ffffff;
    }

.hero-cta-button {
      background: #ffe1aa80;
      color: white;
      border: 2px solid rgba(255, 165, 0, 0.5);
      padding: 10px 24px;
      font-size: 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 600;
      backdrop-filter: blur(10px);
    }

.hero-cta-button:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px #ffa50080;
    }

.hero-stats {
      display: flex;
      justify-content: center;
      gap: 40px;
      margin-top: 40px;
      flex-wrap: wrap;
    }

.hero-stat-item {
      text-align: center;
      padding: 18px 28px;
      background: rgba(255, 166, 0, 0.25);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255, 166, 0, 0.4);
      border-radius: 12px;
      min-width: 130px;
      transition: all 0.3s ease;
      color: #fff;
    }

.hero-stat-item:hover {
      background: rgba(255, 166, 0, 0.4);
      transform: translateY(-5px);
      border-color: rgba(255, 166, 0, 0.6);
      box-shadow: 0 10px 30px rgba(255, 166, 0, 0.3);
    }

.hero-stat-number {
      font-size: 32px;
      font-weight: 700;
      color: #fff;
      display: block;
      line-height: 1;
    }

.hero-stat-label {
      font-size: 12px;
      color: rgba(255, 255, 255, 0.95);
      text-transform: uppercase;
      letter-spacing: 1px;
      margin-top: 8px;
    }

.hero-cert-highlight {
      margin-top: 16px;
      font-weight: 800;
      color: #eff4fd;
      font-size: 20px;
    }

.hero-trust-badges {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 25px;
      margin-top: 30px;
      flex-wrap: wrap;
    }

.trust-badge {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 16px;
      color: rgba(255, 255, 255, 0.9);
    }

.trust-badge .badge-icon {
      font-size: 18px;
      color: #ffd89b;
    }

.carousel-indicators {
      display: flex;
      gap: 10px;
      margin-top: 25px;
      justify-content: center;
    }

.indicator {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.4);
      cursor: pointer;
      transition: all 0.3s ease;
    }

.indicator.active {
      background: #ffffff;
      transform: scale(1.2);
    }


/* ---------- CUSTOMERS MARQUEE ---------- */

.customers-marquee {
      background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
      padding: 50px 0;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      border-top: 1px solid #e2e8f0;
      border-bottom: 1px solid #e2e8f0;
    }

.customers-marquee::before,
    .customers-marquee::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 150px;
      z-index: 2;
      pointer-events: none;
    }

.customers-marquee::before {
      left: 0;
      background: linear-gradient(90deg, #ffffff 0%, transparent 100%);
    }

.customers-marquee::after {
      right: 0;
      background: linear-gradient(-90deg, #f8f9fa 0%, transparent 100%);
    }

.customers-header {
      text-align: center;
      padding: 0 20px 30px;
    }

.customers-header h3 {
      color: #64748b;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 3px;
      margin: 0;
    }

.marquee-wrapper {
      display: flex;
      animation: scrollMarquee 35s linear infinite;
    }

.customers-marquee:hover .marquee-wrapper {
      animation-play-state: paused;
    }

.marquee-content {
      display: flex;
      gap: 25px;
      flex-shrink: 0;
      align-items: center;
      padding: 0 15px;
    }

.customer-item {
      display: flex;
      align-items: center;
      gap: 12px;
      color: #1e293b;
      padding: 12px 24px;
      background: #ffffff;
      border: 1px solid #e2e8f0;
      border-radius: 12px;
      transition: all 0.3s ease;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

.customer-item::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(234, 88, 12, 0.05) 0%, rgba(251, 146, 60, 0.05) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      border-radius: 12px;
    }

.customer-item:hover::before {
      opacity: 1;
    }

.customer-item:hover {
      transform: translateY(-2px);
      border-color: #ea580c;
      box-shadow: 0 8px 25px rgba(234, 88, 12, 0.12);
    }

.customer-icon {
      width: 36px;
      height: 36px;
      background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      font-size: 14px;
      color: #fff;
      position: relative;
      z-index: 1;
      box-shadow: 0 2px 8px rgba(234, 88, 12, 0.25);
      transition: all 0.3s ease;
    }

.customer-item:hover .customer-icon {
      transform: scale(1.05);
      box-shadow: 0 4px 12px rgba(234, 88, 12, 0.35);
    }

.customer-name {
      font-size: 14px;
      font-weight: 600;
      letter-spacing: 0.3px;
      color: #334155;
      position: relative;
      z-index: 1;
      transition: color 0.3s ease;
    }

.customer-item:hover .customer-name {
      color: #ea580c;
    }

@keyframes scrollMarquee {
      0% {
        transform: translateX(0);
      }

      100% {
        transform: translateX(-50%);
      }
    }


/* ---------- ABOUT PREVIEW SECTION ---------- */

.about-section {
      background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
      padding: 100px 40px;
      text-align: center;
    }

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

.about-header {
      margin-bottom: 60px;
    }

.about-header h2 {
      font-size: var(--h2-size);
      color: var(--primary);
      margin-bottom: 15px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }

.about-header p {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 700px;
      margin: 0 auto;
      line-height: 1.7;
    }

.about-preview-cert-highlight {
      margin-top: 15px;
      font-weight: 800;
      color: #0d1929;
      font-size: 20px;
    }

.about-stats {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-bottom: 60px;
      align-items: start;
    }

.stats-left {
      text-align: left;
    }

.stats-left h3 {
      font-size: 24px;
      color: var(--primary);
      margin-bottom: 20px;
      font-weight: 700;
    }

.stats-left p {
      font-size: 16px;
      color: var(--primary-light);
      line-height: 1.8;
      margin-bottom: 20px;
    }

.about-highlights {
      display: flex;
      flex-direction: column;
      gap: 15px;
    }

.highlight-item {
      display: flex;
      align-items: flex-start;
      gap: 15px;
      padding: 15px;
      background: rgba(255, 165, 0, 0.08);
      border-left: 4px solid #bcc1ff;
      border-radius: 8px;
      transition: all 0.3s ease;
    }

.highlight-item:hover {
      background: rgba(255, 255, 255, 0.95);
      transform: translateX(5px);
      border-color: rgba(255, 165, 0, 0.6);
      box-shadow: var(--card-shadow-hover);
    }

.highlight-icon {
      font-size: 24px;
      min-width: 30px;
      color: #ffa600;
    }

.highlight-text {
      text-align: left;
    }

.highlight-text strong {
      color: var(--primary);
      display: block;
      margin-bottom: 5px;
      font-size: 16px;
    }

.highlight-text span {
      color: var(--primary-light);
      font-size: 14px;
    }

.stats-right {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

.stat-card {
      background: rgba(255, 255, 255, 0.8);
      border: 1px solid #d1d5ff;
      border-radius: 16px;
      padding: 30px 20px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
      text-align: center;
      box-shadow: var(--card-shadow);
    }

.stat-card:hover {
      border-color: rgba(255, 165, 0, 0.6);
      transform: translateY(-8px);
      box-shadow: var(--card-shadow-hover);
      background: rgba(255, 255, 255, 0.95);
    }

.stat-card .stat-number {
      font-size: 32px;
      font-weight: 700;
      color: var(--primary);
      margin-bottom: 10px;
    }

.stat-card .stat-label {
      font-size: 14px;
      color: var(--primary);
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

.about-cta {
      display: flex;
      justify-content: center;
      gap: 20px;
    }

.learn-more-btn,
    .ht-sample-btn,
    .gallery-btn {
      background: linear-gradient(135deg, #346bbc, #1e3f5a);
      color: #ffffff;
      border: none;
      padding: 10px 24px;
      font-size: 14px;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
      text-decoration: none;
      display: inline-block;
    }

.learn-more-btn:hover,
    .ht-sample-btn:hover,
    .gallery-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(44, 90, 160, 0.4);
    }


/* ---------- SERVICES PREVIEW SECTION (redesigned) ---------- */

.what-we-do {
      background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
      padding: 90px 30px;
    }

.section-eyebrow {
      display: block;
      text-align: center;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 3px;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 14px;
    }

.what-we-do h2 {
      font-size: 36px;
      color: var(--primary);
      text-align: center;
      margin-bottom: 14px;
      font-weight: 800;
      letter-spacing: -0.4px;
      letter-spacing: -0.5px;
    }

.what-we-do-description {
      max-width: 700px;
      margin: 0 auto 60px;
      font-size: 16px;
      color: var(--text-muted);
      line-height: 1.7;
      text-align: center;
    }

.services-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      counter-reset: service-counter;
    }

.service-card {
      position: relative;
      background: #ffffff;
      padding: 44px 32px 36px;
      border-radius: 20px;
      text-align: center;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease;
      border: 1px solid rgba(26, 58, 82, 0.08);
      box-shadow: 0 2px 10px rgba(26, 58, 82, 0.06);
      overflow: hidden;
      counter-increment: service-counter;
    }

.service-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--accent), var(--primary-light));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

.service-card::after {
      content: counter(service-counter, decimal-leading-zero);
      position: absolute;
      top: 20px;
      right: 24px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1px;
      color: rgba(26, 58, 82, 0.18);
    }

.service-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(26, 58, 82, 0.12);
      border-color: rgba(255, 154, 60, 0.35);
    }

.service-card:hover::before {
      transform: scaleX(1);
    }

.service-card h3 {
      font-size: 19px;
      color: var(--primary);
      margin-bottom: 14px;
      font-weight: 700;
    }

.service-card p {
      font-size: 14.5px;
      color: var(--text-muted);
      line-height: 1.75;
    }

.services-btn-wrapper {
      text-align: center;
      margin-top: 48px;
    }

.ht-sample-strip {
      background: linear-gradient(180deg, #f8f9fa 0%, #e8f4f8 100%);
      padding: 80px 20px;
      text-align: center;
    }

.ht-title {
      font-size: var(--h2-size);
      color: var(--primary);
      margin-bottom: 12px;
      font-weight: 700;
    }

.ht-sub {
      font-size: 16px;
      color: var(--primary-light);
      margin-bottom: 50px;
      max-width: 600px;
      margin: 0 auto 50px;
      line-height: 1.6;
    }

.ht-sample-wrapper {
      max-width: 1400px;
      margin: 0 auto 45px;
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 25px;
      padding: 0 20px;
    }

.ht-sample-wrapper img {
      width: 100%;
      height: 280px;
      object-fit: contain;
      display: block;
      background: #ffffff;
      border-radius: 16px;
      padding: 20px;
      box-shadow: var(--card-shadow);
      transition: all 0.35s ease;
      border: 1.5px solid #d1d5ff;
    }

.ht-sample-wrapper img:hover {
      transform: translateY(-10px) scale(1.02);
      box-shadow: var(--card-shadow-hover);
      border-color: rgba(255, 165, 0, 0.6);
    }

.service-icon,
    .benefit-icon {
      width: 76px;
      height: 76px;
      font-size: 34px;
      margin: 0 auto 22px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: linear-gradient(135deg, #fff1d8, #ffe0b3);
      border: 1px solid rgba(255, 154, 60, 0.3);
      transition: transform 0.3s ease, background 0.3s ease;
    }

.service-card:hover .service-icon,
    .benefit-card:hover .benefit-icon {
      transform: scale(1.08) rotate(-4deg);
      background: linear-gradient(135deg, #ffe0b3, #ffd089);
    }


/* ---------- GALLERY PREVIEW SECTION ---------- */

.gallery-section {
      padding: 80px 40px;
      background: #f8f9fa;
    }

.gallery-section h2 {
      font-size: var(--h2-size);
      color: var(--primary);
      font-weight: 800;
      letter-spacing: -0.4px;
      margin-bottom: 50px;
      text-align: center;
    }

.gallery-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 25px;
    }

.gallery-card {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1.5px solid #d1d5ff;
      box-shadow: var(--card-shadow);
      transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.25s ease;
    }

.gallery-card:hover {
      transform: translateY(-10px);
      box-shadow: var(--card-shadow-hover);
      border-color: rgba(255, 165, 0, 0.6);
    }

.gallery-card .media {
      height: 200px;
      background-size: cover;
      background-position: center;
      position: relative;
    }

.gallery-card .media-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 15px;
      background: linear-gradient(0deg, rgba(26, 58, 82, 0.9) 0%, transparent 100%);
    }

.gallery-card .media-label {
      color: #ffffff;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      background: rgba(255, 165, 0, 0.3);
      padding: 4px 10px;
      border-radius: 4px;
    }

.gallery-card .card-body {
      padding: 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
    }

.gallery-card h3 {
      font-size: 18px;
      color: var(--primary);
      margin-bottom: 10px;
      font-weight: 700;
    }

.gallery-card .card-desc {
      font-size: 14px;
      color: var(--primary-light);
      line-height: 1.6;
      margin-bottom: 20px;
      flex: 1;
    }

.gallery-card .card-btn {
      display: inline-block;
      text-align: center;
      background: linear-gradient(135deg, #346bbc, #1e3f5a);
      color: #ffffff;
      text-decoration: none;
      border: none;
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 600;
      border-radius: 8px;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 4px 15px rgba(44, 90, 160, 0.3);
    }

.gallery-card .card-btn:hover {
      transform: translateY(-3px);
      box-shadow: 0 8px 25px rgba(44, 90, 160, 0.4);
    }


/* ---------- WHY CHOOSE US SECTION (redesigned) ---------- */

.why-choose-us {
      padding: 90px 40px;
      background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
      position: relative;
    }

.section-header {
      text-align: center;
      margin-bottom: 56px;
    }

.section-header h2 {
      font-size: 36px;
      color: var(--primary);
      margin-bottom: 16px;
      font-weight: 800;
      letter-spacing: -0.4px;
    }

.section-header p {
      font-size: 16px;
      color: var(--text-muted);
      max-width: 620px;
      margin: 0 auto;
      line-height: 1.7;
    }

.benefits-grid {
      max-width: 1200px;
      margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
    }

.benefit-card {
      position: relative;
      background: #ffffff;
      border: 1px solid rgba(26, 58, 82, 0.08);
      border-radius: 20px;
      padding: 44px 32px 36px;
      text-align: center;
      transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.35s ease, border-color 0.3s ease;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      box-shadow: 0 2px 10px rgba(26, 58, 82, 0.06);
      overflow: hidden;
    }

.benefit-card::before {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary-light), var(--accent));
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.4s ease;
    }

.benefit-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(26, 58, 82, 0.12);
      border-color: rgba(44, 90, 160, 0.3);
    }

.benefit-card:hover::before {
      transform: scaleX(1);
    }

.benefit-card h4 {
      font-size: 18.5px;
      color: var(--primary);
      margin-bottom: 14px;
      font-weight: 700;
      line-height: 1.3;
    }

.benefit-card p {
      font-size: 14.5px;
      color: var(--text-muted);
      line-height: 1.75;
      margin: 0;
    }


/* ---------- HERO SLIDER BOTTOM INDICATORS ---------- */

.hero-bottom-indicators {
      background: linear-gradient(180deg, rgba(79, 73, 63, 0.9) 0%, var(--primary) 100%);
      padding: 20px 0 25px;
      display: flex;
      justify-content: center;
      margin-top: -1px;
    }

.hero-bottom-indicators .carousel-indicators {
      display: flex;
      gap: 12px;
      margin: 0;
    }

.hero-bottom-indicators .indicator {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.3);
      cursor: pointer;
      transition: all 0.3s ease;
      border: 2px solid rgba(255, 255, 255, 0.2);
    }

.hero-bottom-indicators .indicator:hover {
      background: rgba(255, 255, 255, 0.5);
    }

.hero-bottom-indicators .indicator.active {
      background: #ffffff;
      transform: scale(1.3);
      border-color: rgba(255, 165, 0, 0.5);
    }