/* =====================================================
   AARAVI ELECTRICAL PRODUCTS PAGE
   Theme: #000E38 / #0b3c6f / #FFD532
   ===================================================== */

.eps-page-intro {
  position: relative;
  padding: 5vw 0 3vw;
  background: #fff;
  overflow: hidden;
}

.eps-page-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 213, 50, 0.11), transparent 32%),
    radial-gradient(circle at 88% 50%, rgba(11, 60, 111, 0.07), transparent 38%);
  pointer-events: none;
}

.eps-page-intro .container {
  position: relative;
  z-index: 1;
}

.eps-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(18vw, 0.65fr);
  gap: 4vw;
  align-items: end;
  padding-bottom: 3vw;
  border-bottom: 0.08vw solid rgba(11, 60, 111, 0.14);
}

.eps-eyebrow,
.eps-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55vw;
  padding: 0.45vw 1.15vw;
  border-radius: 10vw;
  background: rgba(255, 213, 50, 0.16);
  border: 0.08vw solid rgba(255, 213, 50, 0.75);
  color: #0b3c6f;
  font-size: 0.78vw;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08vw;
  width: fit-content;
}

.eps-eyebrow i,
.eps-section-label i {
  color: #FFD532;
  font-size: 0.9vw;
}

.eps-page-intro {
  padding: 2vw 0vw 0vw;
}

.eps-intro-title {
  max-width: 48vw;
  margin: 1.2vw 0 0;
  color: #0b3c6f;
  font-size: 3vw;
  font-weight: 800;
  line-height: 1.18;
}

.eps-intro-title span {
  color: #FFD532;
}

.eps-intro-text {
  margin: 0;
  color: #212121;
  font-size: 1.05vw;
  line-height: 1.75;
  font-weight: 500;
}

.eps-product-section {
  position: relative;
  padding: 2vw 0;
  overflow: hidden;
  background: #fff;
}

.eps-product-section:nth-of-type(even) {
  background: #f7f9fc;
}

.eps-product-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 14, 56, 0.035), transparent 28%, transparent 72%, rgba(255, 213, 50, 0.045)),
    radial-gradient(circle at 92% 18%, rgba(11, 60, 111, 0.05), transparent 34%);
  pointer-events: none;
}

.eps-product-section .container {
  position: relative;
  z-index: 1;
}

.eps-product-section .row.mb-5 {
  margin-bottom: 2.2vw !important;
}

.eps-main-title {
  position: relative;
  margin: 0 0 1vw;
  padding-bottom: 1vw;
  color: #0b3c6f;
  font-size: 2.15vw;
  font-weight: 800;
  line-height: 1.22;
  text-transform: none;
}

.eps-main-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 3.4vw;
  height: 0.18vw;
  background: #FFD532;
  border-radius: 10vw;
}

.eps-main-title.right::after {
  right: 0;
  left: auto;
}

.col-lg-6.ms-auto .eps-main-title::after {
  right: 0;
  left: auto;
}

.col-lg-6.ms-auto {
  text-align: right;
}

.eps-desc {
  max-width: 44vw;
  margin: 0.9vw 0 0;
  color: #212529;
  font-size: 1.02vw;
  line-height: 1.75;
  font-weight: 500;
}

.col-lg-6.ms-auto .eps-desc {
  margin-left: auto;
}

.eps-img-wrap,
.eps-content,
.card-item {
  isolation: isolate;
}

.eps-img-wrap {
  position: relative;
  min-height: 24vw;
  padding: 2.4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 1.2vw;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.82), rgba(223, 235, 248, 0.86)),
    #eef3f9;
  border: 0.08vw solid rgba(11, 60, 111, 0.11);
  box-shadow: 0 1vw 2.5vw rgba(0, 14, 56, 0.08);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.eps-img-wrap::before {
  content: "";
  position: absolute;
  inset: 1vw;
  border: 0.08vw solid rgba(255, 213, 50, 0.34);
  border-radius: 0.9vw;
  pointer-events: none;
}

.eps-img-wrap::after {
  content: "";
  position: absolute;
  width: 8vw;
  height: 8vw;
  right: -3vw;
  bottom: -3vw;
  border-radius: 50%;
  background: rgba(255, 213, 50, 0.18);
  pointer-events: none;
}

.eps-img-wrap:hover {
  transform: translateY(-0.35vw);
  border-color: rgba(255, 213, 50, 0.58);
  box-shadow: 0 1.5vw 3.2vw rgba(0, 14, 56, 0.13);
}

.eps-img-wrap img {
  position: relative;
  z-index: 1;
  max-width: 100%;
  max-height: 18.5vw;
  object-fit: contain;
  filter: drop-shadow(0 0.9vw 1.6vw rgba(0, 14, 56, 0.14));
  transition: transform 0.45s ease, filter 0.45s ease;
}

.eps-img-wrap:hover img {
  transform: scale(1.045);
  filter: drop-shadow(0 1.2vw 2.2vw rgba(0, 14, 56, 0.18));
}

.eps-content {
  min-height: 24vw;
  padding: 2.4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 1.2vw;
  background: #fff;
  border: 0.08vw solid rgba(11, 60, 111, 0.11);
  border-left: 0.35vw solid #FFD532;
  box-shadow: 0 1vw 2.4vw rgba(0, 14, 56, 0.07);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.eps-content:hover {
  transform: translateY(-0.35vw);
  border-color: rgba(11, 60, 111, 0.2);
  border-left-color: #FFD532;
  box-shadow: 0 1.45vw 3vw rgba(0, 14, 56, 0.12);
}

.eps-features {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.eps-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.8vw;
  padding-left: 0;
  text-align: left;
}

/* Icon styling */
.eps-features li::before {
  position: relative;
  left: auto;
  top: 0.15vw;
  flex-shrink: 0;
  margin-bottom: 0;
}
.eps-features > p {
  display: inline-flex;
  align-items: center;
  gap: 0.5vw;
  margin: 0 0 1.15vw;
  padding: 0.45vw 1vw;
  border-radius: 10vw;
  background: rgba(11, 60, 111, 0.06);
  color: #0b3c6f;
  font-size: 0.78vw;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08vw;
}

.eps-features li {
  position: relative;
  margin-bottom: 0.85vw;
  text-align: left;
  padding-left: 2vw;
  color: #212121;
  font-size: 0.98vw;
  line-height: 1.62;
  font-weight: 500;
}

.eps-features li:last-child {
  margin-bottom: 0;
}

.eps-features li::before {
  content: "verified";
  position: absolute;
  left: 0;
  top: 0.15vw;
  color: #FFD532;
  font-family: "Material Symbols Outlined";
  font-size: 1vw;
  line-height: 1;
  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 24;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.8vw;
}

.card-item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  border-radius: 1.05vw;
  background: #fff;
  border: 0.08vw solid rgba(11, 60, 111, 0.14);
  box-shadow: 0 0.8vw 2vw rgba(0, 14, 56, 0.07);
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease;
}

.card-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.28vw;
  background: linear-gradient(90deg, #FFD532, #0b3c6f);
  z-index: 2;
}

.card-item:hover {
  transform: translateY(-0.45vw);
  border-color: rgba(255, 213, 50, 0.75);
  box-shadow: 0 1.4vw 3vw rgba(0, 14, 56, 0.12);
}

.card-img {
  height: 13.5vw;
  padding: 1.7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    linear-gradient(145deg, rgba(238, 243, 249, 0.95), rgba(216, 232, 247, 0.92));
}

.card-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0.6vw 1.1vw rgba(0, 14, 56, 0.12));
  transition: transform 0.45s ease;
}

.card-item:hover .card-img img {
  transform: scale(1.055);
}

.card-content {
  padding: 1.45vw;
  display: flex;
  flex: 1;
  flex-direction: column;
}

.card-content h4 {
  min-height: 2.8vw;
  margin: 0 0 0.75vw;
  color: #0b3c6f;
  font-size: 1.02vw;
  font-weight: 800;
  line-height: 1.35;
  text-transform: uppercase;
}

.card-content p {
  margin: 0 0 0.65vw;
  color: #303742;
  font-size: 0.95vw;
  line-height: 1.65;
  font-weight: 500;
}

.card-content p:last-child {
  margin-bottom: 0;
}

.section-title {
  margin-bottom: 3vw;
  color: #0b3c6f;
  font-size: 2.4vw;
  font-weight: 800;
  text-align: center;
}

.section-title::after {
  content: "";
  display: block;
  width: 3.5vw;
  height: 0.18vw;
  margin: 0.8vw auto 0;
  border-radius: 10vw;
  background: #FFD532;
}

@media (max-width: 960px) {
      .breadcrumb {
        font-size: 4vw;
        flex-wrap: wrap;
        gap: 2vw;
    }
  .eps-page-intro {
    padding: 8vw 0 4vw;
  }

  .eps-intro-grid {
    grid-template-columns: 1fr;
    gap: 2.5vw;
    padding-bottom: 5vw;
  }

  .eps-eyebrow,
  .eps-section-label {
    gap: 1vw;
    padding: 1vw 2.8vw;
    font-size: 1.8vw;
  }

  .eps-eyebrow i,
  .eps-section-label i {
    font-size: 2vw;
  }

  .eps-intro-title {
    max-width: 78vw;
    font-size: 5vw;
  }

  .eps-intro-text {
    max-width: 78vw;
    font-size: 2.2vw;
  }

  .eps-product-section {
    padding: 8vw 0;
  }

  .col-lg-6.ms-auto {
    text-align: left;
  }

  .col-lg-6.ms-auto .eps-main-title::after {
    right: auto;
    left: 0;
  }

  .col-lg-6.ms-auto .eps-desc {
    margin-left: 0;
  }

  .eps-product-section .row.mb-5 {
    margin-bottom: 4vw !important;
  }

  .eps-main-title {
    font-size: 4vw;
    padding-bottom: 1.8vw;
  }

  .eps-main-title::after {
    width: 7vw;
    height: 0.35vw;
  }

  .eps-desc {
    max-width: 82vw;
    font-size: 2.25vw;
  }

  .eps-img-wrap,
  .eps-content {
    min-height: auto;
    padding: 4vw;
    border-radius: 2vw;
  }

  .eps-img-wrap::before {
    inset: 1.7vw;
    border-radius: 1.4vw;
  }

  .eps-img-wrap img {
    max-height: 30vw;
  }

  .eps-content {
    border-left-width: 0.55vw;
  }

  .eps-features > p {
    font-size: 1.8vw;
    padding: 0.9vw 2.2vw;
  }

  .eps-features li {
    padding-left: 4vw;
    font-size: 2.05vw;
  }

  .eps-features li::before {
    font-size: 2.2vw;
    top: 0.3vw;
  }

  .card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3vw;
  }

  .card-item {
    border-radius: 2vw;
  }

  .card-img {
    height: 24vw;
    padding: 3vw;
  }

  .card-content {
    padding: 3vw;
  }

  .card-content h4 {
    min-height: auto;
    font-size: 2.25vw;
  }

  .card-content p {
    font-size: 1.95vw;
  }

  .section-title {
    font-size: 4.5vw;
  }
}

@media (max-width: 576px) {
  .eps-page-intro {
    padding: 5vw 0 5vw;
  }

  .eps-intro-grid {
    gap: 5vw;
    padding-bottom: 8vw;
  }

  .eps-eyebrow,
  .eps-section-label {
    gap: 2vw;
    padding: 1.5vw 4vw;
    font-size: 2.7vw;
    letter-spacing: 0.16vw;
  }

  .eps-eyebrow i,
  .eps-section-label i {
    font-size: 3vw;
  }

  .eps-intro-title {
    max-width: 100%;
    margin-top: 3vw;
    font-size: 8vw;
  }

  .eps-intro-text {
    max-width: 100%;
    font-size: 3.7vw;
    line-height: 1.8;
  }

  .eps-product-section {
    padding: 1vw 0;
  }

  .eps-product-section .row.mb-5 {
    margin-bottom: 6vw !important;
  }

  .eps-main-title {
    font-size: 6.7vw;
    padding-bottom: 3vw;
  }

  .eps-main-title::after {
    width: 13vw;
    height: 0.6vw;
  }

  .eps-desc {
    max-width: 100%;
    font-size: 3.55vw;
    line-height: 1.85;
  }

  .eps-img-wrap,
  .eps-content {
    padding: 5vw;
    border-radius: 4vw;
  }

  .eps-img-wrap::before {
    inset: 2.5vw;
    border-radius: 3vw;
  }

  .eps-img-wrap::after {
    width: 22vw;
    height: 22vw;
    right: -8vw;
    bottom: -8vw;
  }

  .eps-img-wrap img {
    max-height: 48vw;
  }

  .eps-content {
    border-left-width: 1vw;
  }

  .eps-features > p {
    margin-bottom: 3vw;
    padding: 1.6vw 4vw;
    font-size: 3vw;
  }

  .eps-features li {
    margin-bottom: 3vw;
    padding-left: 7vw;
    font-size: 3.55vw;
    line-height: 1.75;
  }

  .eps-features li::before {
    top: 0.8vw;
    font-size: 4vw;
  }

  .card-grid {
    grid-template-columns: 1fr;
    gap: 6vw;
  }

  .card-item {
    border-radius: 4vw;
  }

  .card-item::before {
    height: 1vw;
  }

  .card-img {
    height: 48vw;
    padding: 5vw;
  }

  .card-content {
    padding: 5vw;
  }

  .card-content h4 {
    margin-bottom: 2vw;
    font-size: 4.6vw;
  }

  .card-content p {
    margin-bottom: 2vw;
    font-size: 3.55vw;
    line-height: 1.8;
  }

  .section-title {
    margin-bottom: 8vw;
    font-size: 6.5vw;
  }

  .section-title::after {
    width: 14vw;
    height: 0.6vw;
  }
}


/* =========================================
   CENTER ALIGN ALL PRODUCT SECTION CONTENT
========================================= */

.eps-product-section {
  border-bottom: 0.08vw solid rgb(11, 59, 111);
}

.eps-product-section:last-child {
  border-bottom: none;
}

/* Center heading rows */
.eps-product-section .row.mb-5,
.eps-product-section .col-lg-6,
.eps-product-section .col-lg-6.ms-auto {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Title */
.eps-main-title {
  text-align: center;
}

/* Yellow underline center */
.eps-main-title::after,
.col-lg-6.ms-auto .eps-main-title::after {
  left: 50% !important;
  transform: translateX(-50%);
  right: auto !important;
}

/* Description */
.eps-desc {
  max-width: 70vw;
  margin: 1vw auto 0;
  text-align: center;
}

/* Feature box */
.eps-content {
  text-align: center;
  border-left: none;
  border-top: 0.35vw solid #FFD532;
}



/* Cards */
.card-content {
  text-align: center;
}

.card-content h4 {
  text-align: center;
}

.card-content p {
  text-align: center;
}

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

@media (max-width: 960px) {

  .eps-product-section {
    border-bottom: 0.2vw solid rgba(11, 60, 111, 0.15);
  }

  .eps-desc {
    max-width: 90%;
    font-size: 2.3vw;
  }

  .eps-content {
    border-top-width: 0.6vw;
  }

  .eps-features li::before {
    margin-bottom: 1vw;
  }
}

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

@media (max-width: 576px) {

  .eps-product-section {
    border-bottom: 0.4vw solid rgba(11, 60, 111, 0.15);
  }

  .eps-desc {
    max-width: 100%;
    margin-top: 3vw;
    font-size: 3.7vw;
    line-height: 1.9;
  }

  .eps-content {
    border-top-width: 1vw;
    border-radius: 4vw;
  }

  .eps-features li {
    font-size: 3.6vw;
    line-height: 1.9;
  }

  .eps-features li::before {
    font-size: 4.2vw;
    margin-bottom: 1.5vw;
  }

  .card-content h4 {
    font-size: 4.7vw;
  }

  .card-content p {
    font-size: 3.6vw;
    line-height: 1.9;
  }

  .eps-features li {
    gap: 2vw;
  }

  .eps-features li::before {
    top: 0.8vw;
  }
}