/* ============================================================
           GLOBAL / RESET
        ============================================================ */
 *,
 *::before,
 *::after {
   box-sizing: border-box;
 }

 :root {
   --ink: #2b2620;
   --muted: #6f6a63;
   --cream: #f3f1ee;
   --panel: #ffffff;
   --blob: #eae5dc;
   --gold: #b28a56;
   --gold-dark: #96713f;
   --star: #f0a93a;
   --radius-card: 26px 26px 96px 26px;
   --dark-bg: #3c322b;
   --accent-gold: #ee4727;
   --primary-dark: #2c241d;
 }

 body {
   margin: 0;
   font-family: 'Inter', sans-serif;
   background: #ffffff;
   color: #1a0a0a;
   line-height: 1.6;
   overflow-x: hidden;
 }

 a {
   color: inherit;
   text-decoration: none;

   html {
     overflow-x: hidden;
   }
 }

 img {
   max-width: 100%;
   height: auto;
   display: block;
 }



 /* ------------------- */
 /* Home page styling */
 /* --------------------- */

 /* section-1 */
 /* =========================
   HERO / BANNER SECTION
========================= */

 .banner-area {
   position: relative;
   background: linear-gradient(160deg, #fff1f1 0%, #fff8f8 60%, #ffffff 100%);
   padding: 180px 60px 120px;
   overflow: hidden;
 }

 /* Bottom Shape */
 .banner-shape {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   line-height: 0;
 }

 .banner-shape img {
   width: 100%;
   opacity: 0.15;
 }

 /* Left Content */
 .banner-content {
   height: 100%;
 }

 .banner-content .d-table {
   width: 100%;
   height: 100%;
 }

 .banner-content .d-table-cell {
   vertical-align: middle;
 }

 /* Heading */
 .banner-content h1 {
   font-size: 68px;
   line-height: 1.1;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 30px;
   max-width: 750px;
 }

 /* Paragraph */
 .banner-content p {
   font-size: 19px;
   line-height: 1.9;
   color: #6b7280;
   max-width: 700px;
   margin-bottom: 40px;
 }

 /* Buttons */
 .main-buttons {
   display: flex;
   gap: 18px;
   flex-wrap: wrap;
 }

 .main-buttons button {
   border: none;
   background: transparent;
   padding: 0;
 }

 /* First Button */
 .main-buttons button:first-child a {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #fff;
   box-shadow: 0 10px 25px rgba(185, 28, 28, 0.35);
 }

 /* Second Button */
 .main-buttons button:last-child a {
   background: #ffffff;
   color: #b91c1c;
   border: 2px solid #b91c1c;
   box-shadow: 0 4px 15px rgba(185, 28, 28, 0.2);
 }

 .main-buttons button a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 16px 34px;
   border-radius: 14px;
   font-size: 17px;
   font-weight: 600;
   text-decoration: none;
   transition: 0.4s ease;
 }

 .main-buttons button a:hover {
   transform: translateY(-3px);
 }

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

 .stats-grid {
   max-width: 500px;
   margin: auto;
 }

 .place {
   margin-top: 50px;
 }

 /* Card */
 .stat-card {
   background: rgba(185, 28, 28, 0.06);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, 0.4);
   border-radius: 24px;
   padding: 40px 25px;
   text-align: center;
   transition: 0.4s ease;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
   height: 100%;
 }

 .stat-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(185, 28, 28, 0.15);
 }

 /* Number */
 .stat-number {
   font-size: 42px;
   font-weight: 700;
   color: #b91c1c;
   margin-bottom: 12px;
 }

 /* Label */
 .stat-label {
   font-size: 16px;
   line-height: 1.6;
   color: #6b7280;
   margin: 0;
 }

 /* =========================
   RESPONSIVE
========================= */

 @media only screen and (max-width: 991px) {

   .banner-area {
     padding: 140px 20px 80px;
     text-align: center;
   }

   .banner-content h1 {
     font-size: 44px;
     max-width: 100%;
   }

   .banner-content p {
     font-size: 17px;
     max-width: 100%;
   }

   .main-buttons {
     justify-content: center;
   }

   .stats-grid {
     margin-top: 50px;
   }

   .place {
     margin-top: 0;
   }

   .stat-card {
     padding: 30px 20px;
   }

   .stat-number {
     font-size: 34px;
   }
 }

 @media only screen and (max-width: 576px) {

   .banner-content h1 {
     font-size: 36px;
   }

   .main-buttons button a {
     width: 100%;
     padding: 14px 24px;
   }

   .main-buttons {
     flex-direction: column;
   }
 }

 /* section-2 */

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

 .services-section {
   background: #ffffff;
   position: relative;
 }

 .what-we-do {
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 .services-section h1 {
   font-size: 52px;
   font-weight: 700;
   color: #f7caca;
   margin-bottom: 15px;
 }

 .services-section .lead {
   color: #dfdfdf;
   max-width: 650px;
   margin: auto;
   font-size: 18px;
 }

 /* Service Card */
 .service-card {
   border: 1px solid #fecaca;
   border-radius: 24px;
   padding: 35px 28px;
   transition: 0.4s ease;
   overflow: hidden;
   position: relative;
   background: #ffffff;
   box-shadow: 0 4px 20px rgba(185, 28, 28, 0.06);
 }

 .service-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 18px 45px rgba(185, 28, 28, 0.15);
 }

 /* Top Borders */
 .card-it-staffing {
   border-top: 5px solid #b91c1c;
 }

 .card-non-it {
   border-top: 5px solid #dc2626;
 }

 .card-payroll {
   border-top: 5px solid #991b1b;
 }

 .card-tax {
   border-top: 5px solid #ef4444;
 }

 .card-training {
   border-top: 5px solid #fecaca;
 }

 /* Icon */
 .card-icon {
   width: 70px;
   height: 70px;
   border-radius: 18px;
   background: linear-gradient(135deg, #fee2e2, #ede0ff);
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 25px;
 }

 .card-icon i {
   font-size: 30px;
   color: #b91c1c;
 }

 /* Card Text */
 .service-card .card-title {
   font-size: 28px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 18px;
 }

 .service-card .card-text {
   color: #6b7280;
   line-height: 1.9;
   font-size: 16px;
   margin-bottom: 25px;
 }

 /* Learn More */
 .learn-more {
   color: #b91c1c;
   text-decoration: none;
   font-weight: 600;
   font-size: 16px;
   transition: 0.3s;
 }

 .learn-more:hover {
   color: #000;
   padding-left: 5px;
 }

 /* ===============================
   FEATURED JOBS SECTION
================================== */

 .featured-jobs-section {
   background: #fff5f5;
   position: relative;
 }

 .open-roles {
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 .section-title {
   font-size: 50px;
   font-weight: 700;
   color: #1a0a0a;
 }

 /* View All Button */
 .featured-jobs-section .btn-primary {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   border: none;
   padding: 14px 30px;
   font-weight: 600;
   transition: 0.3s;
   box-shadow: 0 8px 20px rgba(185, 28, 28, 0.3);
 }

 .featured-jobs-section .btn-primary:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   transform: translateY(-3px);
 }

 /* Job Card */
 .job-card {
   background: #fff5f5;
   border-radius: 24px;
   padding: 30px;
   border: 1px solid #fecaca;
   transition: 0.4s ease;
   height: 100%;
   box-shadow: 0 8px 20px rgba(185, 28, 28, 0.06);
 }

 .job-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 45px rgba(185, 28, 28, 0.15);
   border-color: #b91c1c;
 }

 /* Tags */
 .job-tags {
   display: flex;
   gap: 10px;
   margin-bottom: 20px;
 }

 .job-tags .badge {
   padding: 10px 16px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 600;
 }

 /* Badge Colors */
 .it-badge {
   background: #fee2e2;
   color: #b91c1c;
 }

 .nonit-badge {
   background: #ffffff;
   color: #0d0012;
 }

 .fulltime-badge {
   background: #fee2e2;
   color: #b91c1c;
 }

 .contract-badge {
   background: #ffffff;
   color: #dc2626;
 }

 /* Job Title */
 .job-title {
   font-size: 26px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 15px;
 }

 /* Location */
 .location {
   color: #6b7280;
   font-size: 15px;
   margin-bottom: 20px;
 }

 .location i {
   color: #b91c1c;
   margin-right: 5px;
 }

 /* Tech Tags */
 .tech-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 28px;
 }

 .tech-tags .tag {
   background: #ffffff;
   padding: 9px 15px;
   border-radius: 50px;
   font-size: 13px;
   font-weight: 500;
   color: #0d0012;
   border: 1px solid #fecaca;
 }

 /* Apply Button */
 .btn-apply {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #fff;
   border-radius: 14px;
   padding: 14px;
   font-weight: 600;
   transition: 0.3s;
   border: none;
   box-shadow: 0 6px 16px rgba(185, 28, 28, 0.3);
 }

 .btn-apply:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   color: #fff;

   transform: translateY(-2px);
 }

 /* ===============================
   RESPONSIVE
================================== */

 @media only screen and (max-width: 991px) {

   .services-section h1,
   .section-title {
     font-size: 38px;
   }

   .service-card .card-title,
   .job-title {
     font-size: 22px;
   }

   .featured-jobs-section .btn-primary {
     margin-top: 20px;
   }
 }

 @media only screen and (max-width: 767px) {

   .services-section h1,
   .section-title {
     font-size: 30px;
   }

   .service-card,
   .job-card {
     padding: 24px;
   }
 }

 /* ============================================================
           HERO / CONNECT SECTION
        ============================================================ */
 .connect-hero {
   background: linear-gradient(135deg,
       #0d0012 0%,
       #b91c1c 40%,
       #dc2626 75%,
       #0a000e 100%);
   padding: 140px 0 100px;
   text-align: center;
   position: relative;
   overflow: hidden;
 }

 .connect-hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background: radial-gradient(ellipse 70% 60% at 50% 120%, rgba(255, 200, 180, 0.2) 0%, transparent 70%);
   pointer-events: none;
 }

 .connect-hero .hero-content {
   position: relative;
   z-index: 1;
 }

 .connect-hero h1 {
   color: #fff;
   font-size: clamp(2.5rem, 6vw, 4rem);
   font-weight: 800;
   line-height: 1.1;
   margin-bottom: 20px;
 }

 .connect-hero h1 .text-warning {
   color: #fff !important;
 }

 .connect-hero p.lead {
   color: rgba(255, 255, 255, 0.85);
   font-size: clamp(1rem, 2vw, 1.25rem);
   max-width: 650px;
   margin: 0 auto;
 }

 .connect-hero .btn-light {
   font-weight: 600;
   letter-spacing: 0.5px;
 }

 /* ============================================================
           SECTION SHARED UTILITIES
      ============================================================ */
 .section-subtitle {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: #b91c1c;
   margin-bottom: 14px;
   background: #fee2e2;
 }

 .section-heading {
   font-size: clamp(2rem, 4vw, 3rem);
   font-weight: 800;
   color: #1a0a0a;
   margin-bottom: 18px;
   line-height: 1.15;
 }

 .section-lead {
   font-size: clamp(1rem, 2vw, 1.2rem);
   line-height: 1.8;
   color: #6b7280;
   max-width: 680px;
   margin: 0 auto;
 }

 /* ============================================================
           ABOUT-1  – Our Story
        ============================================================ */
 .about-1-section {
   background: #ffffff;
   padding: 100px 0 80px;
 }

 /* Left content */
 .about-story-subtitle {
   display: inline-block;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   color: #b91c1c;
   margin-bottom: 12px;
 }

 .about-story-title {
   font-size: clamp(2.2rem, 4vw, 3.2rem);
   font-weight: 800;
   color: #1a0a0a;
   line-height: 1.1;
   margin-bottom: 28px;
 }

 .about-story-body p {
   font-size: 1.05rem;
   line-height: 1.9;
   color: #6b7280;
   margin-bottom: 22px;
 }

 .about-cta-btn {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #fff5f5;
   color: #ee4728;
   padding: 15px 32px;
   border-radius: 12px;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 600;
   transition: background 0.3s, transform 0.3s;
 }

 .about-cta-btn:hover {
   background: #ee4728;
   color: #fff;
   transform: translateY(-3px);
 }

 /* Mission / Vision cards */
 .mission-card {
   background: #fff5f5;
   padding: 40px;
   border-radius: 24px;
   border: 1px solid #fecaca;
   box-shadow: 0 8px 24px rgba(185, 28, 28, 0.06);
   margin-bottom: 24px;
   transition: all 0.35s ease;
   position: relative;
   overflow: hidden;
 }

 /* Top Accent Border */
 .mission-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 5px;
   background: linear-gradient(90deg, #b91c1c, #dc2626);
 }

 .mission-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 40px rgba(185, 28, 28, 0.12);
   background: #fffafa;
 }

 /* Vision Card Variant */
 .vision-card {
   background: #ffffff;
   border-color: #fecaca;
 }

 .vision-card::before {
   background: linear-gradient(90deg, #0d0012, #b91c1c);
 }

 .vision-card:hover {
   background: #ffffff;
   box-shadow: 0 18px 40px rgba(229, 57, 53, 0.14);
 }

 .icon-box {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 24px;
   flex-shrink: 0;
 }

 .icon-box i {
   font-size: 28px;
   color: #fff;
 }

 .icon-box.blue {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
 }

 .icon-box.yellow {
   background: #f4b400;
 }

 .mission-card h3 {
   font-size: 1.6rem;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 14px;
 }

 .mission-card p {
   font-size: 1rem;
   line-height: 1.8;
   color: #6b7280;
   margin-bottom: 0;
 }

 /* ============================================================
           ABOUT-2  – Core Values
        ============================================================ */
 .values-section {
   background: #fff5f5;
   padding: 100px 0;
 }

 /* ============================================================
           ABOUT-3  – Leadership Team
        ============================================================ */
 .leadership-section {
   background: #ffffff;
   padding: 100px 0;
 }

 /* ============================================================
           ABOUT-4  – Industries
        ============================================================ */
 .industries-section {
   background: #ffffff;
   padding: 100px 0;
 }

 /* ============================================================
           SHARED VALUE / FEATURE CARD
           (used in Core Values, Leadership, Industries)
        ============================================================ */
 .value-card {
   background: #fff5f5;
   padding: 32px;
   border-radius: 18px;
   border: 2px solid #e5e7eb;
   box-shadow: 0 4px 5px rgb(237 70 39);
   height: 100%;
   transition: transform 0.35s, box-shadow 0.35s, border-color 0.35s;
   display: flex;
   flex-direction: column;
 }

 /* Alternate background for leadership section cards */
 .leadership-section .value-card {
   background: #ffdadb;
   border-color: #c7d2fe;
 }

 /* Alternate background for industries section cards */
 .industries-section .value-card {
   background: #ffffff;
   border-color: #e2e8f0;
   text-align: center;
 }

 .value-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 48px rgba(185, 28, 28, 0.13);
   border-color: #ee4627;
 }

 .value-icon {
   font-size: 2.4rem;
   margin-bottom: 18px;
   line-height: 1;
 }

 /* Color-coded icons per card */
 .value-card:nth-child(1) .value-icon {
   color: #ed4627;
 }

 .value-card:nth-child(2) .value-icon {
   color: #dc2626;
 }

 .value-card:nth-child(3) .value-icon {
   color: #f4b400;
 }

 .value-card:nth-child(4) .value-icon {
   color: #16a34a;
 }

 .value-card:nth-child(5) .value-icon {
   color: #b91c1c;
 }

 .value-card:nth-child(6) .value-icon {
   color: #0891b2;
 }

 .value-card h3 {
   font-size: 1.3rem;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 12px;
 }

 .value-card p {
   font-size: 0.97rem;
   line-height: 1.8;
   color: #6b7280;
   margin-bottom: 0;
   flex: 1;
 }

 /* Industries — just title, no body text */
 .industries-section .value-card h3 {
   font-size: 1rem;
   font-weight: 600;
   color: #ed4627;
   margin-bottom: 0;
 }

 /* ============================================================
           NAVBAR / BRAND LOGO
        ============================================================ */
 .brand-logo-container {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
 }

 .logo-icon-box {
   width: 46px;
   height: 46px;
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }

 .logo-letter {
   color: #ffffff;
   font-size: 1.5rem;
   font-weight: 900;
   line-height: 1;
 }

 .logo-title {
   font-size: 1.1rem;
   font-weight: 700;
   color: #1a0a0a;
   margin: 0;
   line-height: 1.2;
 }

 .logo-subtitle {
   font-size: 0.72rem;
   color: #6b7280;
   margin: 0;
   line-height: 1;
 }

 /* ============================================================
   Responsive logo image and tweaks
   ============================================================ */
 .navbar-brand,
 .mobile-logo {
   display: flex;
   align-items: center;
   gap: 12px;
   text-decoration: none;
 }

 .logo-img {
   height: 54px;
   width: auto;
   display: block;
   object-fit: contain;
   /* border-radius: 6px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08); */
 }

 .brand-logo-container .logo-text-box {
   display: flex;
   flex-direction: column;
   line-height: 1;
 }

 @media (max-width: 575.98px) {

   /* Hide text on very small screens to save space */
   .brand-logo-container .logo-text-box {
     display: none;
   }

   .logo-img {
     height: 59px;
   }
 }

 @media (min-width:576px) and (max-width:991.98px) {
   .logo-img {
     height: 48px;
   }

   .logo-title {
     font-size: 1rem;
   }
 }

 @media (min-width:992px) {
   .logo-img {
     height: 65px;
   }

   .logo-title {
     font-size: 1.1rem;
   }
 }

 /* ============================================================
           FOOTER
        ============================================================ */
 .footer-area {
   background: #000;
   color: #fff;
   padding: 80px 0 0;
 }

 .footer-area h3 {
   color: #ee4627;
   font-size: 1rem;
   font-weight: 800;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   margin-bottom: 20px;
 }

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

 .footer-area ul li {
   margin-bottom: 10px;
 }

 .footer-area ul li a {
   color: #fff;
   text-decoration: none;
   font-size: 1rem;
   font-weight: 600;
   transition: color 0.3s;
 }

 .footer-area ul li a:hover {
   color: #dc2626;
 }

 .footer-area .description {
   color: #fff;
   font-size: 1rem;
   line-height: 1.8;
 }


 .footer-area,
 .footer-area .company-name {
   font-size: 1.25rem;
   font-weight: 800;
   color: #fff;
   margin: 4px 0 2px;
 }

 .footer-area .tagline {
   font-size: 0.95rem;
   color: #4b5563;
   margin: 0;
 }

 .contact-info li {
   display: flex;
   align-items: flex-start;
   gap: 10px;
   margin-bottom: 14px;
 }

 .contact-info li i {
   color: #ee4728;
   margin-top: 3px;
   flex-shrink: 0;
 }

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

 .social-icon {
   width: 38px;
   height: 38px;
   border-radius: 10px;
   background: #ffffff;
   border: 1px solid #111827;
   color: #111827;
   display: flex;
   align-items: center;
   justify-content: center;
   text-decoration: none;
   transition: background 0.3s, color 0.3s;
 }

 .social-icon:hover {
   background: #ee4728;
   color: #fff;
   border-color: #fff;
 }

 .footer-bottom {
   margin-top: 60px;
   border-top: 1px solid #e5e7eb;
   padding: 22px 0;
 }

 .footer-bottom p,
 .footer-bottom a {
   font-size: 0.95rem;
   color: #fff;
   text-decoration: none;
 }

 /* ============================================================
    MOBILE NAV / MEANMENU FIXES
 ============================================================ */



 .footer-bottom a:hover {
   color: #94a3b8;
 }

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

   .about-1-section,
   .values-section,
   .leadership-section,
   .industries-section {
     padding: 35px 0;
   }

   .mission-card {
     padding: 30px;
   }
 }

 @media (max-width: 576px) {
   .mission-card {
     padding: 24px;
   }

   .value-card {
     padding: 24px;
   }

   .about-cta-btn {
     padding: 13px 24px;
     font-size: 0.95rem;
   }
 }


 /* page-input */

 .page-input {
   top: 20px;
   right: 20px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
 }

 .page-input input {
   width: 60px;
   padding: 8px;
   top: 8px;
   border: 2px solid #dc2626;
   border-radius: 8px;
   text-align: center;
   font-size: 14px;
   font-weight: 600;
 }


 /* job page  */

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

 .career-section {
   padding: 80px 50px;
   background: #ffffff;
   font-family: 'Segoe UI', sans-serif;
 }

 .career-top {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 40px;
   flex-wrap: wrap;
   gap: 15px;
 }

 .career-top h2 {
   font-size: 38px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 8px;
 }

 .career-top p {
   color: #9ca3af;
   font-size: 16px;
 }

 .job-count {
   background: #b91c1c;
   color: #fff;
   padding: 10px 22px;
   border-radius: 50px;
   font-size: 14px;
   font-weight: 600;
 }

 .job-wrapper {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
 }

 .job-card {
   background: #fff5f5;
   border-radius: 18px;
   padding: 28px;
   border: 1px solid #fecaca;
   transition: 0.3s ease;
 }

 .job-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 15px 35px rgba(185, 28, 28, 0.12);
   border-color: #b91c1c;
 }

 .job-head {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 18px;
   gap: 10px;
 }

 .left-tags {
   display: flex;
   gap: 8px;
   flex-wrap: wrap;
 }

 .job-tag {
   background: #f1f5f9;
   color: #334155;
   padding: 6px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
 }

 .job-type {
   background: #fee2e2;
   color: #b91c1c;
   padding: 6px 14px;
   border-radius: 30px;
   font-size: 13px;
   font-weight: 600;
 }

 .job-time {
   font-size: 13px;
   color: #9ca3af;
 }

 .job-card h3 {
   font-size: 24px;
   color: #1a0a0a;
   margin-bottom: 14px;
   line-height: 1.4;
 }

 .job-location {
   color: #9ca3af;
   margin-bottom: 22px;
   font-size: 15px;
 }

 .skill-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 25px;
 }

 .skill-tags span {
   background: #ffffff;
   border: 1px solid #fecaca;
   padding: 8px 14px;
   border-radius: 30px;
   font-size: 13px;
   color: #475569;
 }

 .apply-btn {
   display: inline-block;
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #fff;
   text-decoration: none;
   padding: 12px 28px;
   border-radius: 50px;
   font-weight: 600;
   transition: 0.3s ease;
   box-shadow: 0 6px 16px rgba(185, 28, 28, 0.3);
 }

 .apply-btn:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   color: #fff;
   transform: translateY(-2px);
 }

 /* ================= RESPONSIVE ================= */

 @media(max-width:992px) {

   .job-wrapper {
     grid-template-columns: 1fr 1fr;
   }

 }

 @media(max-width:768px) {

   .career-top {
     flex-direction: column;
     align-items: flex-start;
   }

   .career-top h2 {
     font-size: 30px;
   }

   .job-wrapper {
     grid-template-columns: 1fr;
   }

 }


 /* ============================================================
   CONTACT PAGE STYLING
 ============================================================ */

 /* Hero Section */
 .connect-hero {
   background: linear-gradient(135deg,
       #0d0012 0%,
       #b91c1c 40%,
       #dc2626 75%,
       #0a000e 100%);
   padding: 120px 0;
   position: relative;
   overflow: hidden;
 }

 .connect-hero::before {
   content: '';
   position: absolute;
   top: -50%;
   right: -10%;
   width: 500px;
   height: 500px;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
 }

 .connect-hero::after {
   content: '';
   position: absolute;
   bottom: -30%;
   left: -5%;
   width: 400px;
   height: 400px;
   background: rgba(255, 255, 255, 0.08);
   border-radius: 50%;
 }

 .hero-content {
   position: relative;
   z-index: 1;
   text-align: center;
 }

 .hero-content h1 {
   color: white;
   font-size: 60px;
   font-weight: 700;
   line-height: 1.2;
   margin-bottom: 20px;
 }

 .hero-content h1 .text-warning {
   color: #ffc107;
 }

 .hero-content p {
   color: rgba(255, 255, 255, 0.9);
   font-size: 18px;
   line-height: 1.6;
   margin-bottom: 0;
 }

 /* Contact Info Section */
 .contact-info-section {
   background: #fff5f5;
   position: relative;
 }

 .section-title {
   font-size: 36px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 10px;
 }

 /* Info Card */
 .info-card {
   background: #fff5f5;
   border: 1px solid #fecaca;
   border-radius: 12px;
   padding: 35px 25px;
   transition: all 0.3s ease;
   text-align: center;
   display: flex;
   flex-direction: column;
   height: 100%;
 }

 .info-card:hover {
   border-color: #b91c1c;
   box-shadow: 0 10px 40px rgba(185, 28, 28, 0.15) !important;
   transform: translateY(-5px);
 }

 .icon-wrapper {
   width: 70px;
   height: 70px;
   background: #ee4627;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   margin: 0 auto 20px;
   font-size: 32px;
   color: white;
 }

 .info-card h4 {
   font-size: 22px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 12px;
 }

 .info-card .address {
   font-size: 15px;
   color: #6b7280;
   line-height: 1.6;
   margin-bottom: 20px;
   flex-grow: 1;
 }

 .contact-details {
   list-style: none;
   padding: 0;
   margin: 0;
   text-align: left;
 }

 .contact-details li {
   display: flex;
   align-items: center;
   margin-bottom: 12px;
   font-size: 14px;
 }

 .contact-details li:last-child {
   margin-bottom: 0;
 }

 .contact-details .label {
   font-weight: 600;
   color: #333333;
   margin-right: 8px;
   min-width: 60px;
 }

 .contact-details a {
   color: #b91c1c;
   text-decoration: none;
   transition: color 0.3s ease;
   word-break: break-word;
 }

 .contact-details a:hover {
   color: #0d0012;
   text-decoration: underline;
 }

 /* Contact Form Section */
 .contact-form-section {
   background: #ffffff;
   position: relative;
 }

 .form-wrapper {
   background: #fff5f5;
   border-radius: 12px;
   padding: 40px;
   box-shadow: 0 5px 30px rgba(0, 0, 0, 0.08);
 }

 .form-header {
   text-align: center;
 }

 .contact-form {
   margin-top: 30px;
 }

 /* Form Group */
 .form-group {
   margin-bottom: 0;
 }

 .form-label {
   font-weight: 600;
   color: #333333;
   margin-bottom: 8px;
   font-size: 15px;
 }

 .form-control {
   border: 1px solid #fecaca;
   border-radius: 6px;
   padding: 12px 15px;
   font-size: 14px;
   transition: all 0.3s ease;
   background-color: #fff;
   color: #333333;
 }

 .form-control:focus {
   border-color: #b91c1c;
   box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
   background-color: #fff;
   color: #333333;
 }

 .form-control::placeholder {
   color: #999999;
 }

 .form-control:disabled,
 .form-control[readonly] {
   background-color: #f0f0f0;
   opacity: 1;
 }

 /* Textarea */
 textarea.form-control {
   resize: vertical;
   min-height: 150px;
   font-family: 'Inter', sans-serif;
 }

 textarea.form-control:focus {
   border-color: #b91c1c;
   box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
 }

 /* Checkbox */
 .form-check {
   padding-left: 0;
   margin-bottom: 0;
 }

 .form-check-input {
   width: 20px;
   height: 20px;
   margin-top: 3px;
   margin-right: 10px;
   border: 2px solid #e0e0e0;
   border-radius: 4px;
   cursor: pointer;
   transition: all 0.3s ease;
   background-color: white;
 }

 .form-check-input:checked {
   background-color: #b91c1c;
   border-color: #b91c1c;
 }

 .form-check-input:focus {
   border-color: #b91c1c;
   box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.1);
 }

 .form-check-label {
   font-size: 14px;
   color: #6b7280;
   margin-bottom: 0;
   cursor: pointer;
   padding-top: 2px;
 }

 .form-check-label a {
   color: #b91c1c;
   text-decoration: none;
   transition: color 0.3s ease;
 }

 .form-check-label a:hover {
   color: #0d0012;
   text-decoration: underline;
 }

 /* Submit Button */
 .btn-primary {
   background: #ee4627;
   border-color: #b91c1c;
   color: white;
   font-weight: 600;
   padding: 12px 30px;
   border-radius: 6px;
   transition: all 0.3s ease;
   cursor: pointer;
 }

 .btn-primary:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   border-color: #0d0012;
   transform: translateY(-2px);
   box-shadow: 0 8px 20px rgba(185, 28, 28, 0.35);
 }

 .btn-primary:focus {
   box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.25);
 }

 .btn-primary:active {
   transform: translateY(0);
 }

 .btn-lg {
   padding: 15px 30px;
   font-size: 16px;
 }

 /* Map Section */
 .map-section {
   width: 100%;
   overflow: hidden;
 }

 .map-section iframe {
   display: block;
   width: 100%;
 }

 /* Success Message */
 #msgSubmit {
   display: none;
   padding: 15px;
   border-radius: 6px;
   margin-top: 20px;
   text-align: center;
   font-weight: 600;
 }

 #msgSubmit.success {
   display: block;
   background-color: #d4edda;
   color: #155724;
   border: 1px solid #c3e6cb;
 }

 #msgSubmit.error {
   display: block;
   background-color: #f8d7da;
   color: #721c24;
   border: 1px solid #f5c6cb;
 }

 /* Responsive Adjustments */
 @media (max-width: 991px) {
   .connect-hero {
     padding: 80px 0;
   }

   .hero-content h1 {
     font-size: 42px;
   }

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

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

   .form-wrapper {
     padding: 30px 25px;
   }

   .info-card {
     padding: 25px 20px;
   }
 }

 @media (max-width: 767px) {
   .connect-hero {
     padding: 60px 0;
   }

   .hero-content h1 {
     font-size: 32px;
     margin-bottom: 15px;
   }

   .hero-content p {
     font-size: 14px;
   }

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

   .info-card {
     padding: 20px 15px;
     margin-bottom: 15px;
   }

   .icon-wrapper {
     width: 60px;
     height: 60px;
     font-size: 26px;
   }

   .info-card h4 {
     font-size: 18px;
   }

   .contact-details {
     text-align: center;
   }

   .contact-details li {
     justify-content: center;
     flex-wrap: wrap;
   }

   .form-wrapper {
     padding: 20px 15px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
   }

   .form-label {
     font-size: 14px;
   }

   .form-control {
     padding: 10px 12px;
     font-size: 13px;
   }

   textarea.form-control {
     min-height: 120px;
   }

   .btn-lg {
     padding: 12px 20px;
     font-size: 14px;
   }

   .map-section iframe {
     height: 300px !important;
   }
 }

 @media (max-width: 576px) {
   .connect-hero {
     padding: 40px 0;
   }

   .connect-hero::before {
     width: 300px;
     height: 300px;
     top: -30%;
     right: -20%;
   }

   .connect-hero::after {
     width: 250px;
     height: 250px;
     bottom: -20%;
     left: -15%;
   }

   .hero-content h1 {
     font-size: 26px;
     margin-bottom: 10px;
   }

   .hero-content p {
     font-size: 13px;
   }

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

   .info-card {
     padding: 18px 12px;
   }

   .icon-wrapper {
     width: 50px;
     height: 50px;
     font-size: 22px;
   }

   .info-card h4 {
     font-size: 16px;
     margin-bottom: 10px;
   }

   .info-card .address {
     font-size: 13px;
     margin-bottom: 15px;
   }

   .contact-details li {
     font-size: 12px;
     margin-bottom: 8px;
   }

   .contact-details .label {
     min-width: 50px;
   }

   .form-wrapper {
     padding: 15px 12px;
     border-radius: 8px;
   }

   .form-label {
     font-size: 13px;
   }

   .form-control {
     padding: 9px 10px;
     font-size: 12px;
   }

   .form-check-input {
     width: 18px;
     height: 18px;
   }

   .form-check-label {
     font-size: 12px;
   }

   .btn-lg {
     padding: 11px 15px;
     font-size: 13px;
   }

   .map-section iframe {
     height: 250px !important;
   }
 }




 /* ------------- */
 /* hire talent */
 /* ----------------------- */

 /* ==============================
   Hiring Process Section
================================= */

 .hiring-process-section {
   background: #ffffff;
 }

 .process-subtitle {
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 .process-title {
   font-size: 48px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 15px;
 }

 .process-desc {
   font-size: 18px;
   color: #6b7280;
   max-width: 700px;
   margin: auto;
 }

 /* Cards */

 .process-card {
   position: relative;
   background: #fff5f5;
   padding: 35px 30px;
   border-radius: 18px;
   overflow: hidden;
   height: 100%;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
   transition: all 0.3s ease;
 }

 .process-card:hover {
   transform: translateY(-5px);
 }

 .step-number {
   font-size: 48px;
   font-weight: 800;
   color: #ed4627;
   line-height: 1;
   margin-bottom: 20px;
 }


 .process-card h4 {
   font-size: 28px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 15px;
 }

 .process-card p {
   font-size: 18px;
   line-height: 1.8;
   color: #6b7280;
   margin-bottom: 0;
 }

 /* Large faded number */

 .bg-number {
   position: absolute;
   top: 10px;
   right: 20px;
   font-size: 120px;
   font-weight: 800;
   color: rgba(17, 24, 39, 0.03);
   line-height: 1;
   pointer-events: none;
 }

 /* Responsive */

 @media(max-width: 991px) {

   .process-title {
     font-size: 38px;
   }

   .process-card h4 {
     font-size: 24px;
   }

   .process-card p {
     font-size: 16px;
   }
 }

 @media(max-width: 767px) {

   .process-title {
     font-size: 32px;
   }

   .process-desc {
     font-size: 16px;
   }

   .process-card {
     padding: 28px 22px;
   }

   .step-number {
     font-size: 40px;
   }

   .bg-number {
     font-size: 90px;
   }
 }








 /* =================================
   Payroll & Tax Services Section
==================================== */

 .payroll-services-section {
   background: #ffffff;
 }

 /* Heading */

 .service-subtitle {
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
 }

 .service-title {
   font-size: 48px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 15px;
 }

 .service-desc {
   font-size: 18px;
   color: #6b7280;
   max-width: 700px;
   margin: auto;
   line-height: 1.7;
 }

 /* Cards */

 .service-card {
   background: #fff5f5;
   border: 1px solid #fecaca;
   border-radius: 20px;
   padding: 35px 30px;
   height: 100%;
   transition: all 0.3s ease;
   box-shadow: 0 4px 15px rgba(185, 28, 28, 0.06);
 }

 .service-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 12px 30px rgba(185, 28, 28, 0.15);
   border-color: #b91c1c;
 }

 /* Icon */

 .service-icon {
   width: 65px;
   height: 65px;
   border-radius: 16px;
   background: linear-gradient(135deg, #fee2e2, #ede0ff);
   color: #b91c1c;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 32px;
   margin-bottom: 25px;
 }

 /* Title */

 .service-card h4 {
   font-size: 28px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 15px;
 }

 /* Paragraph */

 .service-card p {
   font-size: 17px;
   line-height: 1.8;
   color: #6b7280;
   margin-bottom: 20px;
 }

 /* List */

 .service-card ul {
   padding-left: 0;
   margin: 0;
   list-style: none;
 }

 .service-card ul li {
   position: relative;
   padding-left: 28px;
   margin-bottom: 12px;
   color: #6b7280;
   font-size: 16px;
 }

 .service-card ul li::before {
   content: "✓";
   position: absolute;
   left: 0;
   top: 0;
   color: #b91c1c;
   font-weight: bold;
 }

 /* Responsive */

 @media(max-width: 991px) {

   .service-title {
     font-size: 38px;
   }

   .service-card h4 {
     font-size: 24px;
   }
 }

 @media(max-width: 767px) {

   .service-title {
     font-size: 32px;
   }

   .service-desc {
     font-size: 16px;
   }

   .service-card {
     padding: 28px 22px;
   }

   .service-icon {
     width: 58px;
     height: 58px;
     font-size: 28px;
   }

   .service-card h4 {
     font-size: 22px;
   }

   .service-card p {
     font-size: 15px;
   }

   .service-card ul li {
     font-size: 15px;
   }
 }


 /* section-2 */

 /* =================================
   Regulation / Compliance Section
==================================== */

 .regulation {
   background: #ffffff;
   padding: 100px 0;
   position: relative;
   overflow: hidden;
 }

 /* Optional soft background glow */

 .regulation::before {
   content: "";
   position: absolute;
   width: 500px;
   height: 500px;
   background: rgba(185, 28, 28, 0.05);
   border-radius: 50%;
   top: -200px;
   right: -150px;
 }

 /* Subtitle */

 .regulation-subtitle {
   display: inline-block;
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 15px;
 }

 /* Heading */

 .regulation-heading {
   font-size: 52px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 25px;
   line-height: 1.2;
 }

 /* Description */

 .regulation-description {
   font-size: 18px;
   line-height: 1.9;
   color: #6b7280;
   margin-bottom: 35px;
 }

 /* Features */

 .regulation-features {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 15px;
 }

 /* Feature Tags */

 .regulation-features span {
   background: #fff5f5;
   border: 1px solid #fecaca;
   color: #b91c1c;
   padding: 12px 20px;
   border-radius: 50px;
   font-size: 15px;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 4px 10px rgba(185, 28, 28, 0.05);
 }

 .regulation-features span:hover {
   background: #b91c1c;
   color: #ffffff;
   transform: translateY(-3px);
 }

 /* Responsive */

 @media(max-width: 991px) {

   .regulation {
     padding: 80px 0;
   }

   .regulation-heading {
     font-size: 40px;
   }

   .regulation-description {
     font-size: 17px;
   }
 }

 @media(max-width: 767px) {

   .regulation {
     padding: 70px 0;
   }

   .regulation-heading {
     font-size: 32px;
   }

   .regulation-description {
     font-size: 16px;
     line-height: 1.8;
   }

   .regulation-features {
     gap: 10px;
   }

   .regulation-features span {
     width: 100%;
     text-align: center;
     font-size: 14px;
     padding: 10px 16px;
   }
 }

 /* footer-logo */
 .footer-logo .image {
   display: flex;
   align-items: center;
   justify-content: center;
   height: auto;
   width: 180px
 }

 /* form- section */

 /* =================================
   Request Payroll Section
==================================== */

 .request-payroll-section {
   background: #ffffff;
 }

 /* Heading */

 .request-subtitle {
   display: inline-block;
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 15px;
 }

 .request-title {
   font-size: 52px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 20px;
 }

 .request-description {
   font-size: 20px;
   line-height: 1.8;
   color: #6b7280;
 }

 /* Form Wrapper */

 .request-form-wrapper {
   background: #fff5f5;
   padding: 45px;
   border-radius: 24px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
   border: 1px solid #fecaca;
 }

 /* Labels */

 .request-form-wrapper label {
   display: block;
   font-size: 16px;
   font-weight: 600;
   color: #1a0a0a;
   margin-bottom: 10px;
 }

 /* Inputs */

 .request-form-wrapper .form-control,
 .request-form-wrapper .form-select {
   height: 58px;
   border-radius: 14px;
   border: 1px solid #fecaca;
   padding: 12px 18px;
   font-size: 16px;
   color: #fff;
   box-shadow: none;
   transition: all 0.3s ease;
 }

 /* Textarea */

 .request-form-wrapper textarea.form-control {
   height: auto;
   resize: none;
   padding-top: 18px;
 }

 /* Focus */

 .request-form-wrapper .form-control:focus,
 .request-form-wrapper .form-select:focus {
   border-color: #b91c1c;
   box-shadow: 0 0 0 4px rgba(185, 28, 28, 0.12);
 }

 /* Placeholder */

 .request-form-wrapper .form-control::placeholder {
   color: #9ca3af;
 }

 /* Button */

 .request-btn {
   width: 100%;
   height: 62px;
   border: none;
   border-radius: 14px;
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #ffffff;
   font-size: 18px;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 8px 20px rgba(185, 28, 28, 0.3);
 }

 .request-btn span {
   margin-left: 10px;
   transition: 0.3s ease;
 }

 .request-btn:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   transform: translateY(-2px);
 }

 .request-btn:hover span {
   margin-left: 16px;
 }

 /* Responsive */

 @media(max-width: 991px) {

   .request-title {
     font-size: 42px;
   }

   .request-description {
     font-size: 18px;
   }
 }




 /* ---------------- */

 /* =================================
   Training Courses Section
==================================== */

 .training-courses-section {
   background: #ffffff;
 }

 /* Heading */

 .course-subtitle {
   display: inline-block;
   color: #b91c1c;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   margin-bottom: 15px;
 }

 .course-title {
   font-size: 54px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 20px;
 }

 .course-description {
   font-size: 20px;
   line-height: 1.8;
   color: #6b7280;
 }

 /* Card */

 .course-card {
   background: #fff5f5;
   border-radius: 24px;
   padding: 30px;
   height: 100%;
   border: 1px solid #fecaca;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
   transition: all 0.3s ease;
 }

 .course-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 15px 35px rgba(185, 28, 28, 0.12);
   border-color: #dc2626;
 }

 /* Icons */

 .course-icon {
   width: 65px;
   height: 65px;
   border-radius: 18px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 30px;
   margin-bottom: 22px;
 }

 .blue-icon {
   background: #fee2e2;
   color: #b91c1c;
 }

 .green-icon {
   background: #dcfce7;
   color: #16a34a;
 }

 .yellow-icon {
   background: #fef9c3;
   color: #ca8a04;
 }

 /* Tags */

 .course-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   margin-bottom: 22px;
 }

 .course-tags span {
   background: #f3f4f6;
   color: #6b7280;
   padding: 8px 14px;
   border-radius: 40px;
   font-size: 14px;
   font-weight: 500;
 }

 /* Title */

 .course-card h3 {
   font-size: 32px;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 18px;
   line-height: 1.3;
 }

 /* Description */

 .course-card p {
   font-size: 17px;
   line-height: 1.9;
   color: #6b7280;
   margin-bottom: 25px;
 }

 /* Topics */

 .course-topics h6 {
   font-size: 15px;
   font-weight: 700;
   color: #6b7280;
   margin-bottom: 15px;
   letter-spacing: 1px;
 }

 .topics-list {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
 }

 .topics-list span {
   background: #f3f4f6;
   color: #6b7280;
   padding: 7px 12px;
   border-radius: 10px;
   font-size: 14px;
 }

 /* Placement */

 .placement {
   margin-top: 28px;
   color: #16a34a;
   font-size: 17px;
   font-weight: 600;
 }

 /* Button */

 .course-btn {
   display: block;
   width: 100%;
   height: 58px;
   line-height: 58px;
   text-align: center;
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #ffffff;
   border-radius: 14px;
   margin-top: 28px;
   text-decoration: none;
   font-size: 18px;
   font-weight: 600;
   transition: all 0.3s ease;
   box-shadow: 0 6px 16px rgba(185, 28, 28, 0.3);
 }

 .course-btn:hover {
   background: linear-gradient(135deg, #0d0012, #b91c1c);
   color: #ffffff;
   transform: translateY(-2px);
 }

 /* Responsive */

 @media(max-width: 991px) {

   .course-title {
     font-size: 42px;
   }

   .course-description {
     font-size: 18px;
   }

   .course-card h3 {
     font-size: 28px;
   }
 }

 @media(max-width: 767px) {

   .training-courses-section {
     padding: 70px 0;
   }

   .course-title {
     font-size: 34px;
   }

   .course-description {
     font-size: 16px;
   }

   .course-card {
     padding: 24px;
   }

   .course-card h3 {
     font-size: 24px;
   }

   .course-card p {
     font-size: 15px;
   }

   .placement {
     font-size: 15px;
   }

   .course-btn {
     height: 54px;
     line-height: 54px;
     font-size: 16px;
   }
 }


 /* ============================================================
    STATS SECTION
 ============================================================ */
 .stats-section {
   background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 45%, #ef4444 100%);
   padding: 80px 0;
   position: relative;
   overflow: hidden;
 }

 .stats-section::before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 600px;
   height: 300px;
   background: radial-gradient(ellipse, rgba(255, 200, 220, 0.4) 0%, transparent 70%);
   pointer-events: none;
 }

 .section-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.15);
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2.5px;
   text-transform: uppercase;
   padding: 6px 18px;
   border-radius: 50px;
   border: 1px solid rgba(255, 255, 255, 0.25);
 }

 .stats-heading {
   font-size: clamp(1.8rem, 3.5vw, 2.6rem);
   font-weight: 800;
   color: #ffffff;
   margin-bottom: 12px;
 }

 .stats-subtext {
   font-size: 1.05rem;
   color: rgba(255, 255, 255, 0.7);
   max-width: 580px;
   margin: 0 auto;
 }

 .stat-highlight-card {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 20px;
   padding: 40px 28px;
   text-align: center;
   transition: 0.35s ease;
   height: 100%;
 }

 .stat-highlight-card.accent {
   background: rgba(255, 255, 255, 0.14);
   border-color: rgba(255, 255, 255, 0.3);
 }

 .stat-highlight-card:hover {
   transform: translateY(-8px);
   background: rgba(255, 255, 255, 0.18);
 }

 .stat-icon {
   font-size: 2rem;
   color: #fca5a5;
   margin-bottom: 18px;
 }

 .stat-big {
   font-size: 3rem;
   font-weight: 800;
   color: #ffffff;
   line-height: 1;
   margin-bottom: 12px;
 }

 .stat-desc {
   font-size: 0.95rem;
   color: rgba(255, 255, 255, 0.72);
   line-height: 1.6;
 }

 /* ============================================================
    CORE VALUES SECTION
 ============================================================ */
 .values-highlight-section {
   background: #ffffff;
   padding: 90px 0;
   position: relative;
   overflow: hidden;
 }

 .values-highlight-section::before {
   display: none;
 }

 .values-highlight-section .section-badge {
   background: #fee2e2;
   color: #b91c1c;
   border-color: #fca5a5;
 }

 .values-highlight-section .stats-heading {
   color: #1a0a0a;
 }

 .values-highlight-section .stats-subtext {
   color: #6b7280;
 }

 .value-highlight-card {
   background: #ffffff;
   border: 1px solid #fecaca;
   border-radius: 20px;
   padding: 40px 32px;
   height: 100%;
   transition: 0.35s ease;
   position: relative;
   overflow: hidden;
   box-shadow: 0 4px 20px rgba(185, 28, 28, 0.07);
 }

 .value-highlight-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, #b91c1c, #dc2626);
 }

 .value-highlight-card.featured {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   border: none;
 }

 .value-highlight-card.featured::before {
   background: rgba(255, 255, 255, 0.3);
 }

 .value-highlight-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 45px rgba(185, 28, 28, 0.15);
 }

 .value-hl-icon {
   width: 64px;
   height: 64px;
   border-radius: 16px;
   background: #fee2e2;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.6rem;
   color: #b91c1c;
   margin-bottom: 24px;
 }

 .value-highlight-card.featured .value-hl-icon {
   background: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }

 .value-highlight-card h3 {
   font-size: 1.5rem;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 14px;
 }

 .value-highlight-card.featured h3 {
   color: #ffffff;
 }

 .value-highlight-card p {
   font-size: 0.97rem;
   line-height: 1.8;
   color: #6b7280;
   margin-bottom: 20px;
 }

 .value-highlight-card.featured p {
   color: rgba(255, 255, 255, 0.85);
 }

 .value-tag {
   display: inline-block;
   background: #fee2e2;
   color: #b91c1c;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   padding: 5px 14px;
   border-radius: 50px;
 }

 .value-highlight-card.featured .value-tag {
   background: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }

 /* ============================================================
    CTA BANNER SECTION
 ============================================================ */
 .cta-banner-section {
   padding: 60px 0;
   background: #ffffff;
 }

 .cta-banner-inner {
   background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 50%, #ef4444 100%);
   border-radius: 28px;
   padding: 60px 56px;
   position: relative;
   overflow: hidden;
 }

 .cta-banner-inner::before {
   content: "";
   position: absolute;
   top: -80px;
   right: -80px;
   width: 320px;
   height: 320px;
   background: rgba(255, 255, 255, 0.05);
   border-radius: 50%;
 }

 .cta-banner-inner::after {
   content: "";
   position: absolute;
   bottom: -60px;
   left: -60px;
   width: 240px;
   height: 240px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 50%;
 }

 .cta-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.15);
   color: #fca5a5;
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 5px 16px;
   border-radius: 50px;
   border: 1px solid rgba(147, 197, 253, 0.3);
   margin-bottom: 16px;
 }

 .cta-heading {
   font-size: clamp(1.8rem, 3vw, 2.4rem);
   font-weight: 800;
   color: #ffffff;
   line-height: 1.2;
   margin-bottom: 14px;
 }


 @media (max-width: 991px) {
   .cta-banner-inner {
     padding: 40px 28px;
   }
 }

 /* ============================================================
    TESTIMONIALS SECTION
 ============================================================ */
 .testimonials-section {
   background: #ffffff;
 }

 .testimonials-section .section-badge {
   background: #fee2e2;
   color: #b91c1c;
   border-color: #fca5a5;
 }

 .testimonials-section .stats-heading {
   color: #b91c1c;
 }

 .testimonial-card {
   background: #fff5f5;
   border: 1px solid #fecaca;
   border-radius: 20px;
   padding: 36px 30px;
   height: 100%;
   transition: 0.35s ease;
   position: relative;
   box-shadow: 0 4px 20px rgba(185, 28, 28, 0.06);
 }

 .testimonial-card::before {
   content: "\201C";
   position: absolute;
   top: 16px;
   right: 24px;
   font-size: 5rem;
   color: #fca5a5;
   line-height: 1;
   font-family: Georgia, serif;
 }

 .testimonial-card.featured-testimonial {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   border: none;
 }

 .testimonial-card.featured-testimonial::before {
   color: rgba(255, 255, 255, 0.1);
 }

 .testimonial-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 45px rgba(185, 28, 28, 0.12);
 }

 .testimonial-stars {
   color: #dc2626;
   font-size: 1.1rem;
   letter-spacing: 2px;
   margin-bottom: 18px;
 }

 .testimonial-text {
   font-size: 0.97rem;
   line-height: 1.85;
   color: #6b7280;
   margin-bottom: 28px;
   font-style: italic;
 }

 .testimonial-card.featured-testimonial .testimonial-text {
   color: rgba(255, 255, 255, 0.82);
 }

 .testimonial-author {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .author-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #ffffff;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 0.85rem;
   font-weight: 700;
   flex-shrink: 0;
 }

 .testimonial-card.featured-testimonial .author-avatar {
   background: rgba(255, 255, 255, 0.2);
 }

 .author-name {
   font-size: 0.97rem;
   font-weight: 700;
   color: #1a0a0a;
 }

 .testimonial-card.featured-testimonial .author-name {
   color: #ffffff;
 }

 .author-role {
   font-size: 0.83rem;
   color: #6b7280;
 }

 .testimonial-card.featured-testimonial .author-role {
   color: rgba(255, 255, 255, 0.6);
 }

 @media (max-width: 767px) {
   .stat-big {
     font-size: 2.2rem;
   }

   .value-highlight-card {
     padding: 28px 22px;
   }

   .testimonial-card {
     padding: 28px 22px;
   }
 }


 /* ============================================================
   DELTA-STYLE REDESIGN (Navbar + Hero + Categories + Services)
   Added without removing any existing styles---------------
============================================================ */

 /* ---------- NAVBAR ---------- */
 .dl-navbar {
   background: transparent !important;
   box-shadow: none !important;
   transition: background 0.3s ease, box-shadow 0.3s ease;
 }

 .main-nav.menu-shrink {
   background: #ffffff !important;
   box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
 }

 @media only screen and (min-width: 768px) and (max-width: 991px) {
   .dl-navbar .main-nav.menu-shrink {
     background: #ffffff !important;
     box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08) !important;
   }
 }

 .dl-navbar .main-nav {
   padding: 5px 0;
 }

 .dl-navbar .navbar-nav .nav-link {
   font-size: 15px;
   font-weight: 500;
   color: #ffffff !important;
   padding: 10px 16px !important;
   position: relative;
   transition: color 0.3s ease;
 }

 .dl-navbar .navbar-nav .nav-link:hover,
 .dl-navbar .navbar-nav .nav-link.active {
   color: #b91c1c !important;
 }

 /* .dl-navbar .navbar-nav .nav-link::after {
   content: '';
   position: absolute;
   width: 0;
   height: 2px;
   bottom: 6px;
   left: 50%;
   background: #b91c1c;
   transition: all 0.3s ease;
   transform: translateX(-50%);
 } */


 .navbar-nav .dropdown-toggle-split {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   color: inherit;
   text-decoration: none;
 }

 .navbar-nav .dropdown-toggle-split i {
   font-size: 0.8rem;
 }

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

 .navbar-nav .dropdown-menu {
   min-width: 220px;
   z-index: 1000;
 }

 .navbar-nav .dropdown-menu .dropdown-item {
   color: #333;
 }

 .navbar-nav .dropdown-menu .dropdown-item:hover,
 .navbar-nav .dropdown-menu .dropdown-item:focus {
   background: #ee4627;
   color: #fff;
 }

 .dl-navbar .navbar-toggler span {
   display: block;
   width: 24px;
   height: 3px;
   margin: 5px 0;
   background: #ee4627;
   transition: background 0.3s ease;
 }

 .main-nav.menu-shrink .navbar-nav .nav-link,
 .main-nav.menu-shrink .navbar-toggler span {
   color: #1a0a0a !important;
 }


 .dl-cta-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   background: #ee4627;
   color: #ffffff !important;
   font-size: 14px;
   font-weight: 600;
   padding: 12px 26px;
   border-radius: 10px;
   text-decoration: none;
   transition: all 0.3s ease;
   box-shadow: 0 6px 18px rgba(185, 28, 28, 0.3);
   border: none;
 }



 /* ---------- HERO / BANNER ---------- */
 .dl-hero .carousel-inner {
   position: relative;
   width: 100%;
   min-height: 90vh;
   overflow: hidden;
   /* top: 8px; */
 }

 .dl-hero {
   position: relative;
   min-height: 50vh;
   display: flex;
   align-items: center;
   overflow: visible;
   clip-path: url(#dlHeroClip);
   -webkit-clip-path: url(#dlHeroClip);
 }

 .dl-hero-carousel {
   width: 100%;
   /* border-radius: 20px; */
 }

 /* Smooth crossfade instead of the old fighting position/opacity rules */
 .dl-hero .carousel-item {
   position: absolute;
   /* top: 10px; */
   /* left: 23px; */
   /* right: 23px; */
   min-height: 90vh;
   width: 100%;
   padding: 0;
   background-size: cover;
   background-position: center center;
   background-repeat: no-repeat;
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
   z-index: 1;
   transition: opacity 1.1s cubic-bezier(0.45, 0, 0.15, 1), transform 1.1s cubic-bezier(0.45, 0, 0.15, 1);
   transform: scale(1.02);
 }




 .dl-hero .carousel-item.active {
   opacity: 1;
   visibility: visible;
   pointer-events: auto;
   /* border-radius: 0 20px 0 20px; */
   position: relative;
   z-index: 2;
   transform: scale(1);
 }

 /* Let Bootstrap's fade class drive the crossfade smoothly */
 .dl-hero .carousel-item.active,
 .dl-hero .carousel-item-next.carousel-item-start,
 .dl-hero .carousel-item-prev.carousel-item-end {
   opacity: 1;
 }

 .dl-hero .carousel-item-next,
 .dl-hero .carousel-item-prev,
 .dl-hero .active.carousel-item-start,
 .dl-hero .active.carousel-item-end {
   opacity: 0.5;
 }

 .dl-hero .carousel-item .container {
   position: relative;
   /* border-radius: 20px; */
   z-index: 2;
   height: 100%;
   display: flex;
   align-items: center;
 }

 .dl-hero .carousel-item .row {
   width: 100%;
   min-height: 90vh;
   align-items: center;
   /* border-radius: 20px; */
 }

 .dl-hero .carousel-item .col-lg-12 {
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .dl-hero .dl-hero-content {
   display: flex;
   flex-direction: column;
   justify-content: center;
   max-width: 680px;
   width: 100%;
   /* border-radius: 20px; */
 }

 .dl-hero-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(180deg, rgba(122, 130, 147, 0.3), rgba(11, 14, 21, 0.35));
   pointer-events: none;
   /* border-radius: 20px; */
 }

 .dl-hero-overlay::after {
   content: "";
   position: absolute;
   inset: 0;
   background: rgba(0, 0, 0, 0.48);
   border-radius: inherit;
   animation: dlHeroGlow 1.2s ease-out forwards;
 }

 @keyframes dlHeroGlow {
   from {
     opacity: 1;
   }

   to {
     opacity: 0;
   }
 }

 @media (prefers-reduced-motion: reduce) {
   .dl-hero-overlay::after {
     animation: none;
     opacity: 0;
   }
 }

 .dl-hero-content,
 .dl-hero-stats {
   position: relative;
   z-index: 2;
 }

 .dl-hero .container {
   position: relative;
   z-index: 2;
   border-radius: 20px;
 }

 .dl-hero .carousel-control-prev,
 .dl-hero .carousel-control-next {
   display: none;
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background: #fff;
   border: 1px solid rgba(255, 255, 255, 0.3);
   box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
   top: auto;
   bottom: 85px;
   transform: none;
   position: absolute;
   z-index: 9999;
   pointer-events: auto;
   transition: transform 0.3s ease, background 0.3s ease;
 }

 .dl-hero .carousel-control-prev:hover,
 .dl-hero .carousel-control-next:hover {
   transform: scale(1.08);
   background: rgba(153, 21, 21, 1);
 }

 .dl-hero .carousel-control-prev {
   right: 92px;
   left: auto;
 }

 .dl-hero .carousel-control-next {
   right: 30px;
   left: auto;
 }

 .dl-hero .carousel-control-prev-icon,
 .dl-hero .carousel-control-next-icon {
   filter: invert(1);
 }

 .dl-hero .carousel-indicators [data-bs-target] {
   width: 12px;
   height: 12px;
   border-radius: 50%;
   background-color: rgba(255, 255, 255, 0.45);
   transition: background-color 0.3s ease, transform 0.3s ease;
 }

 .dl-hero .carousel-indicators .active {
   background-color: #ee4627;
   ;
   transform: scale(1.15);
 }

 .dl-hero .dl-hero-desc {
   color: rgba(255, 255, 255, 0.85);
 }

 /* ============================================================
   LED Section (custom section under hero)
   ============================================================ */
 .led-section {
   position: relative;
   background: linear-gradient(180deg, #ffffff 0%, #fff7f7 60%);
   padding: 80px 0 90px;
   overflow: hidden;
 }

 .led-section::after {
   /* decorative diagonal accent on the right */
   content: "";
   position: absolute;
   right: 0;
   top: 10%;
   width: 45%;
   height: 80%;
   background: linear-gradient(180deg, rgba(185, 28, 28, 0.02), rgba(239, 68, 68, 0.02));
   transform: skewX(-12deg);
   pointer-events: none;
 }

 .led-section .image-wrapper {
   position: relative;
 }

 .led-section .main-img {
   width: 100%;
   height: 100%;
   max-height: 480px;
   object-fit: cover;
   border-radius: 16px;
   display: block;
   box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
 }

 .led-section .customize-badge {
   position: absolute;
   top: 0px;
   left: 24px;
   background: #ee4627;
   width: 128px;
   height: 128px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   box-shadow: 0 20px 40px rgba(185, 28, 28, 0.16);
   color: #fff;
   text-align: center;
 }

 .led-section .customize-badge-2 {
   position: absolute;
   bottom: 0px;
   right: 24px;
   background: #ee4627;
   width: 128px;
   height: 128px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: 14px;
   box-shadow: 0 20px 40px rgba(185, 28, 28, 0.16);
   color: #fff;
   text-align: center;
 }

 .led-section .customize-badge i {
   font-size: 30px;
   display: block;
 }

 .led-section .customize-badge-2 i {
   font-size: 30px;
   display: block;
 }

 .led-section .customize-badge h6 {
   font-size: 0.95rem;
   margin: 6px 0 0;
   line-height: 1.05;
 }

 .led-section .customize-badge-2 h6 {
   font-size: 0.95rem;
   margin: 6px 0 0;
   line-height: 1.05;
 }

 .led-section .section-subtitle {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   color: #ee4627;
   font-size: 0.85rem;
   margin-bottom: 12px !important;
 }

 .led-section .badge-dot {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: #b91c1c;
   display: inline-block;
 }

 .led-section .section-title {
   font-size: clamp(1.6rem, 2.4vw, 2.6rem);
   color: #0d0012;
   margin-bottom: 12px;
 }

 .led-section .section-desc {
   color: #6b7280;
   max-width: 640px;
 }

 .led-section .option-card {
   background: #ffffff;
   border: 1px solid #f3f4f6;
   transition: transform 0.32s ease, box-shadow 0.32s ease;
   padding: 0 !important;
 }

 .led-section .option-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 18px 40px rgba(16, 24, 40, 0.06);
 }

 .led-section .option-card .icon-box {
   width: 40px;
   height: 40px;
   display: flex;
   margin-top: 20px;
   align-items: center;
   justify-content: center;
   background: #ee4728;
   border-radius: 50%;
   color: #ffffff;
 }

 .led-section .option-card span {
   font-weight: 600;
   color: #0d0012;
 }

 .led-section .led-cta {
   margin-top: 22px;
 }

 .led-section .led-cta .btn {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   color: #fff;
   border-radius: 14px;
   padding: 12px 26px;
   font-weight: 700;
   box-shadow: 0 10px 30px rgba(185, 28, 28, 0.18);
 }

 .led-section .led-cta .btn:focus {
   outline: none;
   box-shadow: 0 10px 30px rgba(185, 28, 28, 0.28);
 }

 .led-section .counter-item {
   padding: 8px 12px;
 }

 .led-section .counter-item p {
   font-size: 1.4rem;
   line-height: 1.4;
   color: #b91c1c !important;
 }

 .led-section .counter-number {
   font-size: 6.5rem;
   color: #0d0012;
   font-weight: 800;
   line-height: 1;
 }

 .led-section .accent-color {
   color: #ee4728;
 }

 @media (max-width: 991px) {
   .led-section {
     padding: 56px 0 64px;
   }

   .led-section .customize-badge {
     top: 0;
     left: 23px;
     width: 104px;
     height: 104px;
   }

   .led-section .customize-badge-2 {
     bottom: 0;
     right: 23px;
     width: 104px;
     height: 104px;
   }

   .led-section::after {
     display: none;
   }

   .led-section .counter-number {
     font-size: 5rem;
   }
 }

 @media (max-width: 767px) {
   .led-section {
     padding: 36px 0;
   }

   .led-section .customize-badge {
     position: absolute;
     margin: 0 auto 18px;
     width: 120px;
     height: 120px;
   }

   .led-section .customize-badge-2 {
     position: absolute;
     margin: 0 auto 18px;
     width: 120px;
     height: 120px;
   }

   .led-section .image-wrapper {
     margin-bottom: 14px;
   }

   .led-section .led-cta {
     text-align: center;
   }
 }


 /*  */



 .aarika-home-products {
   padding: 70px 0;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #fff7f7 0%, #ffffff 100%);
 }

 .aarika-home-products__intro {
   margin-bottom: 28px;
   text-align: center;
 }

 .aarika-home-products__eyebrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(185, 28, 28, 0.1);
   color: #b91c1c;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   margin-bottom: 12px;
 }

 .aarika-home-products__title {
   font-size: clamp(1.9rem, 3vw, 2.7rem);
   font-weight: 800;
   color: #0d0012;
   margin-bottom: 12px;
 }

 .aarika-home-products__description {
   color: #6b7280;
   max-width: 700px;
   margin: 0 auto;
   line-height: 1.75;
 }

 .aarika-home-products__grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
   align-items: stretch;
 }

 .aarika-home-products__grid>.swiper-slide {
   min-width: 0;
   width: auto;
   height: auto;
 }

 .aarika-home-products__grid>.swiper-slide>.product-card {
   background: #ffffff;
   border: none;
   border-radius: 1.25rem;
   overflow: hidden;
   background-clip: padding-box;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .aarika-home-products__grid>.swiper-slide .product-media {
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background: #fff8f8;
 }

 .aarika-home-products__grid>.swiper-slide .product-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 .aarika-home-products__grid>.swiper-slide .product-media .product-img {
   top: 50%;
   left: 50%;
   width: auto !important;
   height: auto !important;
   max-width: 65%;
   max-height: 88%;
   margin: 0;
   object-fit: contain;
   transform: translate(-50%, -50%);
   transition: none;
 }

 .aarika-home-products__grid>.swiper-slide>.product-card:hover,
 .aarika-home-products__grid>.swiper-slide>.product-card:hover .product-media .product-bg {
   transform: none;
 }

 .aarika-home-products__grid>.swiper-slide>.product-card,
 .aarika-home-products__grid>.swiper-slide>.product-card:hover {
   transition: none;
   transform: none;
 }

 .aarika-home-products__grid>.swiper-slide .card-body {
   display: flex;
   flex: 1;
   flex-direction: column;
   padding: 1.5rem;
 }

 .aarika-home-products__grid>.swiper-slide .card-title {
   color: #1a1a1a;
   font-size: 1.15rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
 }

 .aarika-home-products__grid>.swiper-slide .p-code {
   color: #ee4728;
   font-size: 0.76rem;
   letter-spacing: 0.12em;
 }

 .aarika-home-products__grid>.swiper-slide .card-text {
   color: #6c757d;
   font-size: 0.9rem;
   line-height: 1.6;
   flex-grow: 1;
   margin-bottom: 1.25rem;
 }

 .aarika-home-products__grid>.swiper-slide .btn-group-card {
   display: flex;
   width: 100%;
   align-items: stretch;
   gap: 8px;
   margin-top: auto;
 }

 .aarika-home-products__grid>.swiper-slide .btn-group-card>button {
   flex: 1;
   min-width: 0;
   min-height: 42px;
   padding: 0;
   border-radius: 0.75rem;
   font-size: 0.85rem;
   font-weight: 600;
   line-height: 1.3;
   white-space: nowrap;
   display: flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   overflow: hidden;
   transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
 }

 .aarika-home-products__grid .btn-group-card>button:first-child {
   border: none;
   background: #ee4728;
   color: #ffffff;
   box-shadow: none;
 }

 .aarika-home-products__grid .btn-group-card>button:first-child:hover {
   background: #ee4728;
   color: #ffffff;
   transform: translateY(-2px);
   box-shadow: none;
 }

 .aarika-home-products__grid .btn-group-card>button:last-child {
   border: 2px solid #ee4728 !important;
   background: transparent;
   color: #ee4728 !important;
 }

 .aarika-home-products__grid .btn-group-card>button:last-child:hover {
   border-color: #ee4728;
   background: #ee4728;
   color: #ffffff;
   transform: translateY(-2px);
 }

 .aarika-home-products__grid .btn-group-card>button:last-child a {
   display: flex !important;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   padding: 0.65rem 0.8rem !important;
   border: 0 !important;
   background: transparent !important;
   color: inherit !important;
   font-weight: inherit;
   line-height: inherit;
   text-align: center;
   box-sizing: border-box;
 }

 @media (max-width: 1199px) {
   .aarika-home-products__grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

 @media (max-width: 767px) {
   .aarika-home-products {
     padding: 45px 0;
   }

   .aarika-home-products__grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 14px;
   }

   .aarika-home-products__grid>.swiper-slide .card-body {
     padding: 1rem;
   }

   .aarika-home-products__grid>.swiper-slide .btn-group-card {
     gap: 6px;
   }

   .aarika-home-products__grid>.swiper-slide .btn-group-card>button {
     padding: 0;
     font-size: 0.7rem;
   }

   .aarika-home-products__grid .btn-group-card>button:last-child a {
     padding: 0.55rem 0.45rem !important;
     font-size: 0.62rem;
   }

   .aarika-home-products__grid>.swiper-slide .card-text {
     font-size: 0.78rem;
   }

   .aarika-home-products__grid>.swiper-slide .product-media .product-img {
     top: 50%;
     left: 48%;
     width: auto;
     height: auto;
     max-width: 65%;
     max-height: 65%;
     margin: 0;
     object-fit: contain;
     transform: translate(-50%, -50%);
   }
 }

 .products-showcase-section {
   padding: 70px 0;
   position: relative;
   overflow: hidden;
   background: linear-gradient(135deg, #fff7f7 0%, #ffffff 100%);
 }

 .products-showcase-section::before {
   content: '';
   position: absolute;
   inset: 0;
   background: radial-gradient(circle at top right, rgba(185, 28, 28, 0.08), transparent 42%);
   pointer-events: none;
 }

 .products-showcase-section .section-badge {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 8px 14px;
   border-radius: 999px;
   background: rgba(185, 28, 28, 0.1);
   color: #b91c1c;
   font-size: 0.8rem;
   font-weight: 700;
   letter-spacing: 0.16em;
   text-transform: uppercase;
   margin-bottom: 12px;
 }

 .products-showcase-section h2 {
   font-size: clamp(1.9rem, 3vw, 2.7rem);
   font-weight: 800;
   color: #0d0012;
   margin-bottom: 12px;
 }

 .products-showcase-section p {
   color: #6b7280;
   max-width: 700px;
   margin: 0 auto 28px;
   line-height: 1.75;
 }

 .products-grid {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 20px;
 }

 .products-grid .product-card {
   background: #ffffff;
   border-radius: 18px;
   overflow: hidden;
   border: 1px solid #f3f4f6;
   box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
 }

 .products-grid .product-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 24px 55px rgba(185, 28, 28, 0.14);
 }

 .products-grid .product-media {
   position: relative;
   aspect-ratio: 4 / 3;
   overflow: hidden;
   background: #f8fafc;
   max-height: 190px;
 }

 .products-showcase-section .product-media {
   position: relative;
 }

 .products-showcase-section .product-media .product-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .products-showcase-section .product-media .product-img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: auto;
   height: auto;
   max-width: 65%;
   max-height: 88%;
   margin: 0;
   object-fit: contain;
   transform: translate(-50%, -50%);
   z-index: 2;
 }

 .products-grid .product-media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform 0.45s ease;
 }

 .products-grid .product-card:hover .product-media img {
   transform: scale(1.06);
 }

 .products-grid .product-body {
   padding: 16px 16px 18px;
 }

 .products-grid .product-tag {
   display: inline-flex;
   align-items: center;
   padding: 5px 8px;
   border-radius: 999px;
   background: rgba(185, 28, 28, 0.1);
   color: #b91c1c;
   font-size: 0.68rem;
   font-weight: 700;
   letter-spacing: 0.12em;
   text-transform: uppercase;
   margin-bottom: 8px;
 }

 .products-grid h3 {
   font-size: 1rem;
   font-weight: 700;
   color: #0d0012;
   margin-bottom: 8px;
 }

 .products-grid p {
   margin: 0 0 12px;
   color: #6b7280;
   font-size: 0.84rem;
   line-height: 1.6;
 }

 .products-grid .product-link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   color: #b91c1c;
   font-weight: 700;
   text-decoration: none;
   font-size: 0.82rem;
 }

 .products-grid .product-link i {
   transition: transform 0.3s ease;
 }

 .products-grid .product-card:hover .product-link i {
   transform: translateX(4px);
 }

 @media (max-width: 991px) {
   .products-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }

 @media (max-width: 767px) {
   .products-showcase-section {
     padding: 40px 0;
   }

   .products-grid {
     grid-template-columns: 1fr;
   }

   .products-showcase-section .product-carousel .swiper-slide {
     display: flex;
     justify-content: center;
   }
 }

 .dl-hero .dl-hero-badge {
   background: rgba(255, 255, 255, 0.12);
   color: #f8fafc;
 }

 .dl-hero .dl-btn-primary {
   background: #ffffff;
   color: #b91c1c;
 }

 .dl-hero .dl-btn-outline {
   color: #ffffff;
   border-color: rgba(255, 255, 255, 0.8);
 }

 .dl-hero .dl-btn-outline :hover {
   color: #ffffff;
   background: #ee4627;
 }

 .dl-hero .dl-hero-stats {
   margin-top: 40px;
 }

 .dl-stat-item {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.13);
 }

 .dl-stat-num,
 .dl-stat-label {
   color: #ffffff;
 }

 .dl-hero-content {
   position: relative;
   z-index: 2;
 }

 .dl-hero-badge {
   display: inline-block;
   background: rgba(255, 255, 255, 0.12);
   color: #fca5a5;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 8px 18px;
   border-radius: 50px;
   border: 1px solid rgba(255, 255, 255, 0.2);
   margin-bottom: 24px;
 }

 .dl-hero-title {
   font-size: 3rem;
   font-weight: 800;
   color: #ffffff;
   line-height: 1.1;
   margin-bottom: 24px;
   text-align: center;
 }

 .dl-hero-desc {
   font-size: 1.15rem;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.8);
   max-width: 560px;
   margin-bottom: 36px;
 }

 .dl-hero-btns {
   display: flex;
   flex-wrap: wrap;
   gap: 16px;
   align-items: center;
   justify-content: center;
 }

 .dl-btn-primary {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   background: #ffffff;
   color: #b91c1c;
   font-size: 16px;
   font-weight: 700;
   padding: 16px 32px;
   border-radius: 12px;
   text-decoration: none;
   transition: all 0.3s ease;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
 }

 .dl-btn-primary:hover {
   background: #ee4627;
   color: #fff;
   transform: translateY(-3px);
 }

 .dl-btn-outline {
   display: inline-flex;
   align-items: center;
   background: transparent;
   color: #ffffff;
   font-size: 16px;
   font-weight: 600;
   padding: 16px 32px;
   border-radius: 12px;
   border: 2px solid rgba(255, 255, 255, 0.5);
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .dl-btn-outline:hover {
   background: rgba(255, 255, 255, 0.12);
   border-color: #ffffff;
   color: #ffffff;
   transform: translateY(-3px);
 }

 /* Hero Stats */
 .dl-hero-stats {
   position: relative;
   z-index: 2;
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 18px;
 }

 .dl-stat-item {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.15);
   border-radius: 18px;
   padding: 28px 20px;
   text-align: center;
   backdrop-filter: blur(10px);
   transition: all 0.35s ease;
 }

 .dl-stat-item:hover {
   background: rgba(255, 255, 255, 0.14);
   transform: translateY(-6px);
   border-color: rgba(255, 255, 255, 0.3);
 }

 .dl-stat-num {
   display: block;
   font-size: 2.2rem;
   font-weight: 800;
   color: #ffffff;
   line-height: 1.1;
   margin-bottom: 6px;
 }

 .dl-stat-label {
   display: block;
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.7);
   font-weight: 500;
 }

 /* ---------- CATEGORY CARDS ---------- */
 .dl-categories {
   background: #ffffff;
   padding: 0 0 80px;
   margin-top: -50px;
   position: relative;
   z-index: 5;
 }

 .dl-cat-card {
   background: #ffffff;
   border: 1px solid #fecaca;
   border-radius: 20px;
   padding: 36px 28px 32px;
   height: 100%;
   position: relative;
   overflow: hidden;
   transition: all 0.35s ease;
   box-shadow: 0 8px 30px rgba(185, 28, 28, 0.06);
 }

 .dl-cat-card::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg, #b91c1c, #ef4444);
   opacity: 0;
   transition: opacity 0.3s ease;
 }

 .dl-cat-card:hover {
   transform: translateY(-10px);
   box-shadow: 0 20px 45px rgba(185, 28, 28, 0.14);
   border-color: #b91c1c;
 }

 .dl-cat-card:hover::before {
   opacity: 1;
 }

 .dl-cat-num {
   font-size: 13px;
   font-weight: 800;
   color: #b91c1c;
   letter-spacing: 1px;
   margin-bottom: 18px;
 }

 .dl-cat-icon {
   width: 60px;
   height: 60px;
   border-radius: 16px;
   background: linear-gradient(135deg, #fee2e2, #fecaca);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 24px;
   color: #b91c1c;
   margin-bottom: 22px;
 }

 .dl-cat-card h3 {
   font-size: 1.35rem;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 12px;
 }

 .dl-cat-card p {
   font-size: 0.95rem;
   line-height: 1.7;
   color: #6b7280;
   margin-bottom: 20px;
 }

 .dl-cat-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 14px;
   font-weight: 600;
   color: #b91c1c;
   text-decoration: none;
   transition: all 0.3s ease;
 }



 /* banner text */
 .theme {
   color: #ee4627;
 }



 .dl-cat-link:hover {
   gap: 12px;
   color: #991b1b;
 }

 /* ---------- SERVICES SECTION ---------- */
 .dl-services-section {
   background: #fff5f5;
   padding: 100px 0 90px;
 }

 .dl-section-badge {
   display: inline-block;
   background: #fee2e2;
   color: #b91c1c;
   font-size: 13px;
   font-weight: 700;
   letter-spacing: 2px;
   text-transform: uppercase;
   padding: 6px 16px;
   border-radius: 50px;
   margin-bottom: 16px;
 }

 .dl-section-title {
   font-size: clamp(2rem, 4vw, 2.8rem);
   font-weight: 800;
   color: #1a0a0a;
   margin-bottom: 14px;
 }

 .dl-section-lead {
   font-size: 1.1rem;
   color: #6b7280;
   max-width: 600px;
   margin: 0 auto;
 }

 .dl-service-card {
   background: #ffffff;
   border: 1px solid #fecaca;
   border-radius: 24px;
   padding: 40px 32px;
   min-height: 320px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   transition: all 0.35s ease;
   box-shadow: 0 8px 30px rgba(185, 28, 28, 0.08);
 }

 .dl-service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 22px 48px rgba(185, 28, 28, 0.16);
   border-color: #b91c1c;
 }

 .dl-service-card-cta {
   background: linear-gradient(135deg, #b91c1c, #ef4444);
   border: none;
 }

 .dl-service-card-cta h3,
 .dl-service-card-cta p {
   color: #ffffff !important;
 }

 .dl-service-card-cta .dl-service-icon {
   background: rgba(255, 255, 255, 0.2);
   color: #ffffff;
 }

 .dl-service-card-cta .dl-service-link {
   color: #ffffff !important;
 }

 .dl-service-icon {
   width: 68px;
   height: 68px;
   border-radius: 18px;
   background: linear-gradient(135deg, #fee2e2, #fecaca);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 28px;
   color: #b91c1c;
   margin-bottom: 26px;
 }

 .dl-service-card h3 {
   font-size: 1.45rem;
   font-weight: 700;
   color: #1a0a0a;
   margin-bottom: 14px;
 }

 .dl-service-card p {
   font-size: 1rem;
   line-height: 1.85;
   color: #4f4f4f;
   margin-bottom: 22px;
   flex-grow: 1;
 }

 .dl-service-link {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 600;
   color: #b91c1c;
   text-decoration: none;
   transition: all 0.3s ease;
 }

 .dl-service-link:hover {
   gap: 12px;
   color: #991b1b;
 }




 /* Responsive adjustments for new sections */
 @media (max-width: 991px) {
   .dl-hero {
     min-height: auto;
     /* padding: 90px 0 80px; */
     text-align: center;
   }

   .dl-hero-desc {
     margin-left: auto;
     margin-right: auto;
   }

   .dl-hero-btns {
     justify-content: center;
   }

   .dl-hero-stats {
     margin-top: 40px;
   }

   .dl-categories {
     margin-top: -30px;
     padding-bottom: 60px;
   }
 }

 @media (max-width: 767px) {
   .dl-hero {
     padding: 120px 0 60px;
   }

   .dl-hero-title {
     font-size: 2.2rem;
   }

   .dl-hero-btns {
     /* flex-direction: column; */
     align-items: stretch;
   }

   .dl-btn-primary,
   .dl-btn-outline {
     justify-content: center;
     text-align: center;
   }

   .dl-stat-num {
     font-size: 1.7rem;
   }

   .dl-categories {
     margin-top: 0;
     padding-top: 40px;
   }

   .dl-services-section {
     padding: 70px 0;
   }

   .dl-cat-card,
   .dl-service-card {
     padding: 28px 22px;
   }
 }

 @media (max-width: 575px) {
   .dl-hero-stats {
     grid-template-columns: 1fr 1fr;
     gap: 12px;
   }

   .dl-stat-item {
     padding: 20px 14px;
   }
 }



 /* new css for new sections */



 /* Section Background */
 .services-section {
   background-color: var(--dark-bg);
   overflow: hidden;
 }

 /* Top Call Button styling */
 .phone-icon-box {
   width: 35px;
   height: 35px;
   background-color: #28a745;
   color: #fff;
   font-size: 0.85rem;
 }

 /* Background Watermark Heading */
 .bg-watermark {
   font-size: 7rem;
   font-weight: 900;
   color: rgba(255, 255, 255, 0.06);
   letter-spacing: 5px;
   white-space: nowrap;
   user-select: none;
   pointer-events: none;
 }

 /* Header Elements */
 .section-subtitle {
   color: var(--accent-gold);
   font-size: 0.8rem;
   letter-spacing: 1px;
   margin-bottom: 12px !important;
 }

 .badge-dot {
   display: inline-block;
   width: 8px;
   height: 8px;
   background-color: var(--accent-gold);
   border-radius: 50%;
 }

 .section-main-title {
   font-size: 2.5rem;
 }

 /* Service Cards */
 .service-card {
   background-color: #ffffff;
   height: 420px;
 }

 .service-img-wrapper {
   height: 100%;
 }

 .service-img-wrapper img {
   height: 100%;
   object-fit: cover;
   border-radius: 16px;
 }

 /* Gradient Overlay inside Card */
 .card-gradient-overlay {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 60%;
   background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0) 100%);
   z-index: 1;
 }

 /* Card Title and Arrow Button Positioning */
 .service-title {
   position: absolute;
   bottom: 25px;
   left: 25px;
   z-index: 2;
   font-size: 1.5rem;
 }

 .arrow-btn {
   position: absolute;
   bottom: 20px;
   right: 20px;
   width: 45px;
   height: 45px;
   z-index: 2;
   transition: all 0.3s ease-in-out;
 }

 .arrow-btn:hover {
   background-color: var(--accent-gold) !important;
   color: #fff !important;
   transform: scale(1.05);
 }

 /* Bottom Text Styling */
 .bottom-contact-text a {
   transition: opacity 0.2s;
 }

 .bottom-contact-text a:hover {
   opacity: 0.8;
 }



 /* Feature Icon Circles Style */
 .feature-icon {
   width: 70px;
   height: 70px;
   background-color: var(--accent-gold);
   font-size: 1.35rem;
   box-shadow: 0 4px 10px rgba(194, 155, 97, 0.3);
   transition: transform 0.3s ease;
 }

 .feature-icon:hover {
   transform: scale(1.08);
 }

 /* Typography elements */
 .features-section h5 {
   color: var(--primary-dark);
   font-size: 1.6rem;
 }

 .features-section p {
   line-height: 1.8;
 }

 /* 3D Perspective Tilt Effect for Center Image */
 .perspective-container {
   perspective: 1000px;
   padding: 10px;
 }

 .angled-image-wrapper {
   transform: rotateY(-12deg) rotateX(4deg);
   transition: transform 0.5s ease-in-out;
   background: #fff;
 }

 .angled-image-wrapper:hover {
   transform: rotateY(0deg) rotateX(0deg);
 }

 .angled-image-wrapper img {
   height: 320px;
   object-fit: cover;
 }

 /* Responsive adjustment for mobile screens */
 @media (max-width: 991.98px) {
   .angled-image-wrapper {
     transform: rotateY(0deg) rotateX(0deg);
     max-width: 80%;
     margin: 0 auto;
   }
 }


 /* marquee */

 /* Marquee Wrapper & Animation */
 .marquee-wrapper {
   display: flex;
   width: 100%;
   max-width: 100%;
   overflow: hidden;
   user-select: none;
   white-space: nowrap;
   position: relative;
 }

 .marquee-track {
   display: inline-flex;
   align-items: center;
   gap: clamp(1rem, 2vw, 2.5rem);
   width: max-content;
   min-width: max-content;
   animation: scrollText 50s linear infinite;
 }

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

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

 /* Individual Marquee Text Styling with Smooth Fill Effect */
 .marquee-item {
   font-size: 4.4rem;
   font-weight: 900;
   text-transform: uppercase;
   letter-spacing: 2px;
   position: relative;
   cursor: pointer;
   /* Base outline/stroke or text color */
   color: transparent;
   -webkit-text-stroke: 2px rgba(0, 0, 0, 0.3);
   /* Background gradient/color that will fill from left to right */
   background-image: linear-gradient(90deg, #ed4627, #ed4627);
   background-repeat: no-repeat;
   /* Starts with 0 width (unfilled) */
   background-size: 0% 100%;
   -webkit-background-clip: text;
   background-clip: text;
   /* Smooth transition for the background size expansion */
   transition: background-size 0.5s cubic-bezier(0.4, 0, 0.2, 1), -webkit-text-stroke-color 0.5s ease;
 }

 /* Hover effect: Fills smoothly from start to end (left to right) */
 .marquee-item:hover {
   background-size: 100% 100%;
   -webkit-text-stroke: 2px #c29b61;
 }

 .marquee-icon {
   font-size: 5rem;
   color: #ed4627;
   display: flex;
   align-items: center;
   opacity: 0.8;
 }

 .product-carousel {
   max-width: 1100px;
   margin: 0 auto;
   padding: 20px 0 80px;
   position: relative;
 }

 .product-carousel .swiper {
   width: 100%;
   padding: 12px 0 40px;
 }

 .product-carousel .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: flex-start;
 }

 /* Card styles */
 .product-carousel .product-card {
   background: #fff;
   border: none;
   border-radius: 1.25rem;
   overflow: hidden;
   background-clip: padding-box;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
   transition: all 0.35s ease;
   height: 100%;
   max-width: 340px;
   width: 100%;
   margin: 0 auto;
 }

 .product-carousel .product-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
 }

 .product-carousel .product-card>a {
   display: block;
   overflow: hidden;
   border-radius: 1.25rem 1.25rem 0 0;
 }

 .product-carousel .product-card .card-img-top {
   height: 260px;
   object-fit: cover;
   transition: transform 0.5s ease;
 }

 .product-carousel .product-card:hover .card-img-top {
   transform: scale(1.05);
 }

 .product-carousel .product-card .card-body {
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
 }

 .product-carousel .product-card .card-title {
   font-weight: 700;
   font-size: 1.15rem;
   margin-bottom: 0.5rem;
   color: #1a1a1a;
 }

 .product-carousel .product-card .card-text {
   color: #6c757d;
   font-size: 0.9rem;
   flex-grow: 1;
   margin-bottom: 1.25rem;
 }

 .product-carousel .price {
   font-size: 1.3rem;
   font-weight: 700;
   color: #0d6efd;
   margin-bottom: 1.25rem;
 }

 .product-carousel .btn-group-card {
   display: flex;
   gap: 0.75rem;
 }

 .product-carousel .btn-group-card .btn {
   flex: 1;
   border-radius: 0.75rem;
   font-weight: 600;
   padding: 0.65rem 0.8rem;
   font-size: 0.85rem;
   white-space: nowrap;
   transition: all 0.25s ease;
 }

 .product-carousel .btn-group-card .btn-outline-custom a {
   display: block !important;
   white-space: nowrap;
 }

 .product-carousel .btn-primary-custom {
   background: #ee4728;
   border: none;
   color: #fff;
 }

 .product-carousel .btn-primary-custom:hover {
   background: #ee4728;
   transform: translateY(-2px);
   color: #fff;
 }

 .product-carousel .btn-outline-custom {
   border: 2px solid #ee4728;
   color: #ee4728;
   background: transparent;
 }

 .product-carousel .btn-outline-custom:hover {
   background: #ee4728;
   color: white;
   transform: translateY(-2px);
 }

 /* Swiper Navigation Buttons */
 .product-carousel .swiper-button-next,
 .product-carousel .swiper-button-prev {
   width: 44px;
   height: 44px;
   background: #ffffff;
   box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
   border-radius: 50%;
   top: auto;
   bottom: 15px;
 }

 .product-carousel .swiper-button-prev {
   left: 50%;
   transform: translateX(-70px);
   display: none;
 }

 .product-carousel .swiper-button-next {
   right: auto;
   left: 50%;
   transform: translateX(20px);
   display: none;
 }

 .product-carousel .swiper-button-next::after,
 .product-carousel .swiper-button-prev::after {
   font-size: 18px;
   color: #ee4728;
   font-weight: bold;
 }

 .product-carousel .swiper-button-next:hover,
 .product-carousel .swiper-button-prev:hover {
   background: #ee4728;
 }

 .product-carousel .swiper-button-next:hover::after,
 .product-carousel .swiper-button-prev:hover::after {
   color: #ffffff;
 }

 /* Swiper Pagination */
 .product-carousel .swiper-pagination {
   bottom: 0;
   left: 0;
   right: 0;
 }

 .product-carousel .swiper-pagination-bullet {
   background-color: #ee4728;
   opacity: 0.5;
   width: 10px;
   height: 10px;
 }

 .product-carousel .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background-color: #ee4728;
   opacity: 1;
   width: 28px;
   border-radius: 10px;
 }

 /* Product media area */
 .product-card .product-media {
   position: relative;
   height: 260px;
   width: 100%;
   overflow: hidden;
   background: #1a1a1a;
   border-radius: 1.25rem 1.25rem 0 0;
 }

 .product-card .product-bg {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   filter: brightness(0.55);
   z-index: 1;
 }

 .product-card .product-img {
   position: absolute;
   /* top: 50%;
   left: 50%; */
   /* transform: translate(-50%, -50%); */
   max-width: 65%;
   max-height: 88%;
   margin-left: 25px;
   width: auto;
   height: auto;
   object-fit: contain;
   z-index: 2;
   /* transition: transform 0.35s ease; */
 }

 /* .product-card:hover .product-img {
   transform: translate(-50%, -50%) scale(1.08);
 } */

 /* Responsive styles for Swiper */
 @media (max-width: 767.98px) {
   .product-carousel {
     padding: 20px 0 20px;
   }

   .product-carousel .product-card {
     max-width: 100%;
   }

   .product-carousel .product-card .card-img-top {
     height: 200px;
   }

   .product-carousel .swiper-button-prev,
   .product-carousel .swiper-button-next {
     width: 40px;
     height: 40px;
     bottom: 60px;
   }

   .product-carousel .swiper-button-prev {
     left: 50%;
     transform: translateX(-60px);
   }

   .product-carousel .swiper-button-next {
     left: 50%;
     transform: translateX(20px);
   }
 }

 /* reviews */

 .reviews-section {
   padding: 6.5rem 0;
   background: var(--cream);
   overflow: hidden;
 }

 /* ---------- Left column ---------- */
 .reviews-intro {
   position: relative;
   padding-right: 1rem;
 }

 .quote-mark {
   position: absolute;
   top: -2.4rem;
   left: -0.6rem;
   font-family: 'Fraunces', serif;
   font-size: 11rem;
   line-height: 1;
   color: #e4e0d8;
   z-index: 0;
   user-select: none;
   pointer-events: none;
 }

 .reviews-eyebrow {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   font-size: .8rem;
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--gold);
   margin-bottom: 12px;

 }

 .reviews-eyebrow::before {
   content: "";
   width: 8px;
   height: 14px;
   border-radius: 0 8px 8px 0;
   background: var(--gold);
   display: inline-block;
 }

 .reviews-title {
   position: relative;
   z-index: 1;
   font-family: 'Fraunces', serif;
   font-weight: 600;
   font-size: clamp(2.3rem, 3.4vw, 3rem);
   line-height: 1.12;
   color: var(--ink);
   margin-bottom: 2.6rem;
 }

 .reviews-score {
   position: relative;
   z-index: 1;
   display: flex;
   align-items: center;
   gap: 1.1rem;
   flex-wrap: wrap;
 }

 .reviews-score .score-number {
   font-family: 'Fraunces', serif;
   font-weight: 600;
   font-size: 3rem;
   color: var(--ink);
   line-height: 1;
 }

 .score-badge {
   background: #ee4627;
   color: #fff;
   border-radius: 14px;
   padding: .5rem .9rem .55rem;
   text-align: center;
   line-height: 1.3;
 }

 .score-badge .stars {
   font-size: .72rem;
   letter-spacing: 2px;
   color: #fff;
 }

 .score-badge small {
   display: block;
   font-size: .72rem;
   font-weight: 600;
   opacity: .95;
 }

 /* ---------- Cards track ---------- */
 .reviews-track-wrap {
   position: relative;
   width: 100%;
   overflow: hidden;
 }

 .reviews-track {
   display: flex;
   gap: 1.6rem;
   overflow-x: hidden;
   scroll-snap-type: x mandatory;
   padding: 1.2rem .4rem 1.6rem;
   margin: -1.2rem -.4rem 0;
   scrollbar-width: none;
   display: flex;
 }

 .reviews-track::-webkit-scrollbar {
   display: none;
 }

 .review-card-wrap {
   position: relative;
   flex: 0 0 auto;
   width: 320px;
   scroll-snap-align: start;
 }

 .review-card-blob {
   position: absolute;
   inset: 0;
   background: var(--blob);
   border-radius: var(--radius-card);
   transform: translate(12px, 14px);
   transition: transform .35s ease;
 }

 .review-card {
   position: relative;
   background: var(--panel);
   border-radius: var(--radius-card);
   padding: 2.4rem 2.1rem 2.2rem;
   min-height: 300px;
   display: flex;
   flex-direction: column;
   box-shadow: 0 24px 44px -28px rgba(43, 38, 32, .22);
   transition: transform .35s ease, box-shadow .35s ease;
 }

 .review-card-wrap:hover .review-card {
   transform: translateY(-6px);
   box-shadow: 0 30px 54px -26px rgba(43, 38, 32, .28);
 }

 .review-card-wrap:hover .review-card-blob {
   transform: translate(16px, 18px);
 }

 .review-stars {
   color: var(--star);
   font-size: 1rem;
   letter-spacing: .2rem;
   margin-bottom: 1.3rem;
 }

 .review-text {
   color: var(--muted);
   font-size: .98rem;
   line-height: 1.75;
   flex-grow: 1;
 }

 .review-name {
   margin-top: 1.7rem;
   font-weight: 700;
   color: var(--gold-dark);
   font-size: 1.02rem;
   letter-spacing: .01em;
 }

 /* ---------- Nav arrows ---------- */
 .reviews-nav {
   display: flex;
   gap: .9rem;
   margin-top: 2.6rem;
 }

 .reviews-nav button {
   width: 52px;
   height: 52px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   border: 1px solid #e3ddd2;
   background: #fff;
   color: var(--ink);
   transition: all .25s ease;
 }

 .reviews-nav button.is-primary {
   background: #ee4727;
   border-color: #ee4727;
   color: #fff;
 }

 .reviews-nav button:hover {
   background: #ee4727;
   border-color: #ee4727;
   color: #fff;
   transform: translateY(-2px);
 }

 .reviews-nav button:disabled {
   opacity: .4;
   cursor: default;
   transform: none;
 }

 .reviews-nav svg {
   width: 18px;
   height: 18px;
 }

 /* Swiper Styles for Reviews Section */
 .reviews-swiper-container {
   position: relative;
 }

 .reviewsSwiper {
   width: 100%;
   padding: 0 0 80px 0;
   position: relative;
 }

 .reviewsSwiper .swiper-slide {
   display: flex;
   justify-content: center;
   align-items: flex-start;
   height: auto;
 }

 .reviewsSwiper .review-card-wrap {
   width: 100%;
   max-width: 380px;
   flex: 0 0 auto;
   scroll-snap-align: start;
 }

 /* Swiper Pagination for Reviews */
 .reviews-pagination {
   bottom: 30px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 8px;
 }

 .reviews-pagination .swiper-pagination-bullet {
   width: 10px;
   height: 10px;
   background-color: #e3ddd2;
   opacity: 1;
   border-radius: 50%;
   transition: all 0.3s ease;
 }

 .reviews-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
   background-color: #ee4727;
   width: 28px;
   border-radius: 10px;
 }

 /* Swiper Navigation Buttons for Reviews */
 .reviewsSwiper .swiper-button-next,
 .reviewsSwiper .swiper-button-prev {
   position: absolute;
   bottom: 15px;
   width: 52px;
   height: 52px;
   background: #fff;
   border: 1px solid #e3ddd2;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--ink);
   transition: all 0.25s ease;
   top: auto;
 }

 .reviewsSwiper .swiper-button-prev {
   left: auto;
   right: 70px;
 }

 .reviewsSwiper .swiper-button-next {
   left: auto;
   right: 10px;
 }

 .reviewsSwiper .swiper-button-next::after,
 .reviewsSwiper .swiper-button-prev::after {
   display: none;
 }

 .reviewsSwiper .swiper-button-next svg,
 .reviewsSwiper .swiper-button-prev svg {
   width: 18px;
   height: 18px;
   stroke: currentColor;
 }

 .reviewsSwiper .swiper-button-next.is-primary,
 .reviews-next.is-primary {
   background: #ee4727;
   border-color: #ee4727;
   color: #fff;
 }

 .reviewsSwiper .swiper-button-next:hover,
 .reviewsSwiper .swiper-button-prev:hover {
   background: #ee4727;
   border-color: #ee4727;
   color: #fff;
   transform: translateY(-2px);
 }

 .reviewsSwiper .swiper-button-next:disabled,
 .reviewsSwiper .swiper-button-prev:disabled {
   opacity: 0.4;
   cursor: default;
   transform: none;
 }

 /* Responsive styles for Reviews Swiper */
 @media (max-width: 767.98px) {
   .reviewsSwiper {
     padding: 0 0 120px 0;
   }

   .reviewsSwiper .swiper-slide {
     padding: 0 15px;
   }

   .reviewsSwiper .review-card-wrap {
     max-width: 100%;
     width: 100%;
   }

   .reviewsSwiper .swiper-button-prev {
     right: 60px;
   }

   .reviewsSwiper .swiper-button-next,
   .reviewsSwiper .swiper-button-prev {
     width: 44px;
     height: 44px;
     bottom: 28px;
   }

   .reviews-pagination {
     bottom: 60px;
   }
 }

 @media (min-width: 768px) and (max-width: 991.98px) {
   .reviewsSwiper {
     padding: 0 0 80px 0;
   }

   .reviewsSwiper .swiper-slide {
     padding: 0 10px;
   }

   .reviewsSwiper .review-card-wrap {
     max-width: 100%;
   }
 }

 @media (min-width: 992px) {
   .reviewsSwiper .swiper-button-prev {
     right: 70px;
   }

   .reviewsSwiper .swiper-button-next {
     right: 10px;
   }
 }

 @media (max-width: 991px) {
   .reviews-intro {
     margin-bottom: 3rem;
     text-align: left;
     margin-left: 26px;
   }

   .quote-mark {
     font-size: 8rem;
     top: -1.8rem;
   }
 }

 @media (max-width: 575px) {
   .review-card-wrap {
     width: 86vw;
   }

   .reviews-title {
     font-size: 2rem;
   }
 }

 /* Sets the banner height to 50vh and applies your original clip-path */
 .dl-hero-single {
   position: relative;
   height: 52vh;
   width: 100%;
   min-height: 550px;
   /* top: 20px; */
   background-size: cover;
   background-position: center;
   clip-path: url(#dlHeroClip);
   -webkit-clip-path: url(#dlHeroClip);
 }




 /* product detail */

 /* ===================== PRODUCT DETAIL SECTION ===================== */

 .product-detail-section {
   background: #f8f9fa;
 }

 /* Main Product Card */
 .product-main-card {
   background: #fff;
   border-radius: 12px;
   margin-top: 2rem;
   overflow: hidden;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
   position: relative;
   border: 1px solid #eee;
 }

 /* Left Image Box */
 .product-image-box {
   background-image: url("../img/products/9.jpg");
   background-size: cover;
   background-position: center;
   height: 100%;
   min-height: 420px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 30px 20px;
   position: relative;
   overflow: hidden;
 }

 .product-image-box::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background:
     linear-gradient(135deg, transparent 40%, rgba(255, 200, 50, 0.08) 50%, transparent 60%),
     radial-gradient(circle at 70% 30%, rgba(255, 180, 0, 0.1) 0%, transparent 50%);
   pointer-events: none;
   z-index: 1;
 }

 /* Ensure brand logo and swiper sit above the background overlay */
 .product-image-box .brand-logo,
 .product-image-box .product-swiper,
 .product-image-box .custom-swiper-btn {
   z-index: 2;
 }

 /* Ensure images scale correctly inside slides */
 .main-product-img {
   max-height: 320px;
   object-fit: contain;
 }

 /* Custom styling for Left/Right Swiper buttons */
 .custom-swiper-btn {
   color: #fff !important;
   background: rgba(0, 0, 0, 0.3);
   border-radius: 50%;
   width: 40px;
   height: 40px;
   transition: background 0.3s ease;
 }

 .custom-swiper-btn:hover {
   background: rgba(0, 0, 0, 0.6);
 }

 .custom-swiper-btn::after {
   font-size: 16px !important;
   font-weight: bold;
 }

 .brand-logo {
   position: absolute;
   top: 20px;
   left: 20px;
   display: flex;
   align-items: center;
   gap: 10px;
   color: #fff;
   z-index: 2;
 }

 .brand-logo img {
   height: 36px;
   width: auto;
 }

 .brand-logo span {
   font-size: 15px;
   font-weight: 700;
   line-height: 1.2;
 }

 .brand-logo small {
   display: block;
   font-size: 10px;
   font-weight: 500;
   letter-spacing: 1px;
   opacity: 0.85;
 }

 .main-product-img {
   max-width: 85%;
   max-height: 320px;
   object-fit: contain;
   position: relative;
   margin-left: 145px;
   z-index: 2;
   filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
 }

 /* Right Info Box */
 .product-info-box {
   padding: 35px 40px;
   height: 100%;
   display: flex;
   flex-direction: column;
 }

 .badge-all-new {
   display: inline-block;
   background: #ee4627;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   padding: 5px 14px;
   border-radius: 4px;
   letter-spacing: 0.5px;
   margin-bottom: 12px;
   width: fit-content;
 }

 .product-category {
   font-size: 15px;
   color: #666;
   margin-bottom: 4px;
   font-weight: 500;
 }

 .product-title {
   font-size: 52px;
   font-weight: 800;
   color: #ee4627;
   margin: 0 0 25px 0;
   line-height: 1;
   letter-spacing: -1px;
 }

 /* Specs Grid */
 .specs-grid {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   margin-bottom: 25px;
 }

 .spec-item {
   background: #f1f3f5;
   border-radius: 8px;
   padding: 12px 16px;
   min-width: 130px;
   text-align: center;
 }

 .spec-item.wattage {
   background: #1a1a2e;
   color: #fff;
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 12px 18px;
   min-width: auto;
 }

 .spec-icon {
   font-size: 22px;
   color: #ffc107;
 }

 .spec-text {
   text-align: left;
   line-height: 1.2;
 }

 .spec-text strong {
   display: block;
   font-size: 18px;
   font-weight: 700;
 }

 .spec-text span {
   font-size: 12px;
   opacity: 0.85;
 }

 .spec-label {
   font-size: 11px;
   font-weight: 700;
   color: #fff;
   background: #1a1a2e;
   padding: 3px 10px;
   border-radius: 4px;
   display: inline-block;
   margin-bottom: 6px;
 }

 .spec-value {
   font-size: 15px;
   font-weight: 700;
   color: #1a1a1a;
 }

 /* Dimension + QR */
 .dimension-qr-row {
   display: flex;
   align-items: center;
   gap: 25px;
   margin-top: auto;
 }

 .dimension-qr-row .btn-group-card {
   display: flex;
   gap: 0.75rem;
   width: 100%;
   max-width: 420px;
 }

 .dimension-qr-row .btn-group-card .btn {
   flex: 1;
   border-radius: 0.75rem;
   font-weight: 600;
   padding: 0.8rem 1rem;
   font-size: 0.9rem;
   line-height: 1.2;
   transition: all 0.25s ease;
 }

 .dimension-qr-row .btn-primary-custom {
   background: #ee4625;
   border: 1px solid #ee4728;
   color: #fff;
 }

 .dimension-qr-row .btn-primary-custom:hover {
   background: #d83a1d;
   border-color: #d83a1d;
   color: #fff;
   transform: translateY(-2px);
 }

 .dimension-qr-row .btn-outline-custom {
   border: 2px solid #ee4728;
   color: #ee4728;
   background: transparent;
 }

 .dimension-qr-row .btn-outline-custom:hover {
   background: #ee4728;
   color: white;
   transform: translateY(-2px);
 }

 .dimension-box {
   background: #fff;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   padding: 10px;
   max-width: 180px;
 }

 .dimension-box img {
   max-width: 100%;
 }

 /* Vertical Label */
 .vertical-label {
   position: absolute;
   right: 0;
   top: 50%;
   transform: translateY(-50%) rotate(180deg);
   writing-mode: vertical-rl;
   background: #ee4727;
   color: #fff;
   font-size: 13px;
   font-weight: 700;
   padding: 18px 10px;
   letter-spacing: 1px;
   border-radius: 6px 0 0 6px;
 }

 /* ===================== MACHINE FEATURES ===================== */

 .machine-features {
   background: #fff;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
   border: 1px solid #eee;
 }

 .features-header {
   background: #1a1a2e;
   padding: 14px 25px;
   position: relative;
 }

 .features-header h3 {
   color: #fff;
   font-size: 16px;
   font-weight: 700;
   margin: 0;
   letter-spacing: 0.5px;
 }

 .features-header::after {
   content: '';
   position: absolute;
   right: 0;
   top: 0;
   bottom: 0;
   width: 80px;
   background: linear-gradient(90deg, transparent, rgba(225, 24, 24, 0.3));
 }

 .features-table {
   padding: 0px 0;
 }

 .feature-row {
   display: flex;
   border-bottom: 1px solid #f0f0f0;
   transition: background 0.2s ease;
 }

 .feature-row:last-child {
   border-bottom: none;
 }

 .feature-row:hover {
   background: #fafafa;
 }

 .feature-label {
   width: 40%;
   padding: 13px 25px;
   font-size: 14px;
   font-weight: 600;
   color: #444;
   background: #f8f9fa;
 }

 .feature-value {
   width: 60%;
   padding: 13px 25px;
   font-size: 14px;
   color: #1a1a1a;
   font-weight: 500;
 }

 /* Material Note */
 .material-note {
   background: #f1f5f9;
   padding: 18px 25px;
   font-size: 13.5px;
   color: #444;
   line-height: 1.6;
   border-top: 1px solid #e5e7eb;
 }

 .material-note strong {
   color: #1a1a1a;
 }

 /* ===================== RESPONSIVE ===================== */

 @media (max-width: 991px) {
   .product-image-box {
     min-height: 340px;
   }

   .product-info-box {
     padding: 30px 25px;
   }

   .product-title {
     font-size: 42px;
   }

   .vertical-label {
     display: none;
   }

   .feature-label {
     width: 45%;
   }

   .feature-value {
     width: 55%;
   }
 }

 @media (max-width: 767px) {
   .product-image-box {
     min-height: 300px;
     padding: 25px 15px;
   }

   .product-image-box .product-swiper .swiper-slide {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .main-product-img {
     max-height: 240px;
     margin-left: 0;
     margin-right: 0;
   }

   .product-info-box {
     padding: 25px 20px;
   }

   .product-title {
     font-size: 36px;
     margin-bottom: 20px;
   }

   .specs-grid {
     gap: 10px;
   }

   .spec-item {
     min-width: 110px;
     padding: 10px 12px;
   }

   .dimension-qr-row {
     flex-direction: column;
     align-items: stretch;
     gap: 15px;
   }

   .dimension-qr-row .btn-group-card {
     max-width: 100%;
     width: 100%;
   }

   .dimension-qr-row .btn-group-card .btn {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .feature-row {
     flex-direction: column;
   }

   .feature-label,
   .feature-value {
     width: 100%;
     padding: 10px 20px;
   }

   .feature-label {
     background: #f1f3f5;
     font-size: 13px;
     padding-bottom: 4px;
   }

   .feature-value {
     padding-top: 5px;
     padding-bottom: 12px;
   }

   .material-note {
     padding: 15px 20px;
     font-size: 13px;
   }
 }

 @media (max-width: 480px) {
   .product-title {
     font-size: 32px;
   }

   .badge-all-new {
     font-size: 11px;
   }

   .brand-logo span {
     font-size: 13px;
   }
 }

 /* responsive styling */

 @media (max-width: 767px) {

   /* .dl-hero {
		padding: 0px 0 60px;
	} */

   .led-section .section-subtitle {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .led-section .section-desc {
     color: #6b7280;
     max-width: 640px;
     font-size: 19px;
     text-align: center;
   }

   .led-section .counter-number {
     font-size: 2.1rem;

   }

   .features-section p {
     line-height: 1.8;
     font-size: 1rem;
   }

   .dl-hero {
     position: relative;
     min-height: auto;
     padding: 0;
     margin-top: 0px;
   }

   .marquee-item {
     font-size: 2.4rem;
     -webkit-text-stroke: 1px rgba(0, 0, 0, 0.3);
   }

   .marquee-icon {
     font-size: 3rem;
   }
 }

 @media (min-width: 768px) and (max-width: 991.98px) {
   .dl-hero-single {
     position: relative !important;
     height: auto !important;
     min-height: 250px;
     top: 60px;
     width: 100%;
     background-size: cover;
     background-position: center;
     clip-path: none;
     -webkit-clip-path: none;
   }

   .dl-hero {
     min-height: auto;
     padding: 0 0 0;
     text-align: center;
   }

   .led-section .section-subtitle {
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .led-section .section-desc {
     color: #6b7280;
     max-width: 640px;
     text-align: center;
   }

   .dl-hero .carousel-inner {
     position: relative;
     width: 100%;
     min-height: 90vh;
     /* margin-top: 67px; */
   }



 }
.footer-cnt{
  font-size: 16px;
}

 /* reva-graphics */
 .reva_tag_color {
   color: #f04393 !important;
   background: -webkit-linear-gradient(145deg, #f04393, #f9c449);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   font-weight: 600;
 }

 .p-code {
   color: #ed4627;
   font-weight: 700;
 }

 .text-white.my-page-title-div {
   position: relative;
   bottom: auto;
 }

 .form-check .form-check-input {
   float: left;
   margin-left: 0;
 }

 @media only screen and (max-width: 767.99px) {
   .led-section .option-card .icon-box {
     margin-top: 10px;
     margin-bottom: 10px;
   }

   .mobile-mt0 {
     margin-top: 0 !important;
   }

   .led-section .counter-item {
     padding: 8px 2px;
   }

   .section-main-title {
     font-size: 2.0rem;
   }

   .bg-watermark {
     font-size: 4.3rem;
   }

   .product-card .product-img {
     position: absolute;
     max-width: 60%;
     max-height: 100%;
     margin-left: 120px;
     width: auto;
     height: auto;
     object-fit: contain;
     z-index: 2;
   }

 }

 @media only screen and (max-width: 480px) {
   .service-card {
     height: 320px;
   }

   .arrow-btn {
     position: absolute;
     bottom: 20px;
     right: 20px;
     width: 35px;
     height: 35px;
     z-index: 2;
     transition: all 0.3s ease-in-out;
   }

   .process-card {
     padding: 10px 8px;
   }

   .process-card h4 {
     font-size: 18px;
   }

   .service-card {
     padding: 0px 0px;
   }

   .process-card p {
     font-size: 14px;
   }

   .service-card .card-text {
     font-size: 14px;
   }

   .service-card .card-title,
   .job-title {
     font-size: 18px;
   }


 }

 @media (max-width: 370px) {
   .service-card {
     padding: 18px 12px;
   }

   .arrow-btn {
     position: absolute;
     bottom: 20px;
     right: 20px;
     width: 25px;
     height: 25px;
     z-index: 2;
     transition: all 0.3s ease-in-out;
   }

   .service-card h4 {
     font-size: 14px;
   }

   .service-card {
     height: 220px;
   }

   .product-card .product-img {
     position: absolute;
     max-width: 44%;
     max-height: 57%;
     margin-top: 40px;
     width: auto;
     height: auto;
     object-fit: contain;
     z-index: 2;
   }
 }

 .indicators {
   z-index: 9;
   color: #ee4627;
 }

 /* go-to-top */

 /* -----------------------------------------
  Go Top CSS
----------------------------------------- */
 .go-top {
   position: fixed;
   bottom: 5%;
   left: -5%;
   opacity: 0;
   cursor: pointer;
   text-decoration: none;
   color: #ffffff;
   font-size: 24px;
   font-weight: bold;
   text-align: center;
   background: #fc5a34;
   padding: 8px 13px;
   border: 0;
   border-radius: 50%;
   z-index: 100;
   transition: 0.5s;
 }

 .go-top i {
   transition: 0.5s;
 }

 .go-top:hover i {
   transform: translateY(-5px);
 }

 @media only screen and (max-width:767px) {
   .go-top {
     font-size: 18px;
   }
 }

 .go-top.active {
   left: 3%;
   opacity: 1;
   visibility: visible;
 }

 /* Fixed contact buttons */
 .floating-contact-buttons {
   position: fixed;
   right: 22px;
   bottom: 24px;
   display: flex;
   flex-direction: column;
   gap: 12px;
   z-index: 1000;
 }

 .floating-contact-btn {
   width: 50px;
   height: 50px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: #ffffff;
   font-size: 24px;
   line-height: 1;
   text-decoration: none;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
   transition: transform 0.2s ease, box-shadow 0.2s ease;
 }

 .floating-contact-btn:hover,
 .floating-contact-btn:focus-visible {
   color: #ffffff;
   transform: translateY(-3px);
   box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
 }

 .floating-call-btn {
   background: #ee4627;
 }

 .floating-whatsapp-btn {
   background: #16a34a;
 }

 @media only screen and (max-width: 767px) {
   .floating-contact-buttons {
     right: 14px;
     bottom: 16px;
     gap: 10px;
   }

   .floating-contact-btn {
     width: 46px;
     height: 46px;
     font-size: 21px;
   }

   .aarika-home-products__grid>.swiper-slide .btn-group-card>button {
     padding: 0;
     font-size: 0.6rem;
   }

   .aarika-home-products__grid>.swiper-slide .card-body {
     padding: 0.6rem;
   }
 }


 @media (min-width: 359px) and (max-width: 480px) {

   /* .product-card .product-img {
     margin-left: 30%;
   } */

   .main-product-img {
     max-height: 220px;
     margin-left: 0;
     margin-right: 0;
   }

   .dimension-qr-row .btn-group-card .btn {
     padding: 0.8rem 0.2rem;

   }

   .aarika-home-products__grid>.swiper-slide .btn-group-card>button {
     padding: 0;
     font-size: 0.6rem;
   }

   .aarika-home-products__grid>.swiper-slide .card-body {
     padding: 0.6rem;
   }



 }

 /* to be styled */

 @media (min-width: 970px) and (max-width: 1200px) {

   .main-product-img {
     max-width: 78%;
     max-height: 320px;
     object-fit: cover;
     position: relative;
     margin-left: 54px;
     z-index: 2;
     filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.4));
   }
 }



 @media (min-width: 480px) and (max-width: 768px) {

   .aarika-home-products__grid>.swiper-slide .product-media .product-img {
     top: 50%;
     left: 48%;
     width: auto;
     height: auto;
     max-width: 65%;
     max-height: 65%;
     margin: 0;
     object-fit: contain;
     transform: translate(-50%, -50%);
   }
 }