.elementor-42 .elementor-element.elementor-element-5556d7d{--display:flex;--min-height:0px;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:stretch;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-42 .elementor-element.elementor-element-a6bb2df{width:100%;max-width:100%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-42 .elementor-element.elementor-element-5556d7d{--width:100%;}}/* Start custom CSS for html, class: .elementor-element-92814bd */.nunn-services {
  padding: 90px 20px;
  font-family: 'Montserrat', sans-serif;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 35px;
}

.service-card {
  perspective: 1200px;
}

.card-inner {
  position: relative;
  width: 100%;
  height: 380px;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.service-card:hover .card-inner {
  transform: rotateY(180deg);
}

/* FRONT */
.card-front {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  backface-visibility: hidden;
  border-radius: 14px;
  overflow: hidden;
}

.video-front iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Overlay */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
}

.overlay h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #0e2a47;
  text-align: center;
}

/* BACK */
.card-back {
  position: absolute;
  inset: 0;
  background: #0e2a47;
  color: #fff;
  border-radius: 14px;
  padding: 35px;
  transform: rotateY(180deg);
  backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-back p {
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 25px;
}

.read-more {
  align-self: flex-start;
  padding: 11px 20px;
  background: #ffffff;
  color: #0e2a47;
  font-weight: 600;
  font-size: 13px;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.read-more:hover {
  background: #e6eef6;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-5556d7d */.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none; /* important */
  background: linear-gradient(
    to right,
    rgba(255,255,255,0.60) 0%,
    rgba(255,255,255,0.45) 38%,
    rgba(255,255,255,0.28) 62%,
    rgba(255,255,255,0.10) 100%
  );
}/* End custom CSS */