.elementor-8959 .elementor-element.elementor-element-eab1696{--display:flex;}.elementor-8959 .elementor-element.elementor-element-0446dbf{text-align:center;}.elementor-8959 .elementor-element.elementor-element-0446dbf .elementor-heading-title{font-size:59px;line-height:100px;-webkit-text-stroke-color:#000;stroke:#000;text-shadow:0px 0px 10px rgba(0,0,0,0.3);color:#083482;}.elementor-8959 .elementor-element.elementor-element-f193c65{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8959 .elementor-element.elementor-element-b864629{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-8959 .elementor-element.elementor-element-5e5b957{text-align:center;}/* Start custom CSS for heading, class: .elementor-element-5e5b957 */.pof-page {
  font-family: Arial, sans-serif;
  background: linear-gradient(180deg, #f5fbff, #eefaff);
  color: #16324f;
  overflow: hidden;
}

.pof-hero {
  background: linear-gradient(135deg, #004b85, #00a6d6, #2ecc71);
  padding: 100px 20px;
  color: #fff;
  text-align: center;
  position: relative;
}

.pof-hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  right: -110px;
  top: -110px;
}

.hero-content {
  max-width: 950px;
  margin: auto;
  position: relative;
  z-index: 2;
}

.tagline {
  background: rgba(255,255,255,0.18);
  padding: 9px 22px;
  border-radius: 40px;
  display: inline-block;
  margin-bottom: 20px;
  font-weight: 600;
}

.pof-hero h1 {
  font-size: 48px;
  font-weight: 900;
  margin-bottom: 18px;
  background: linear-gradient(90deg, #ffffff, #dff6ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.pof-hero p {
  font-size: 18px;
  line-height: 1.8;
  max-width: 820px;
  margin: auto;
}

.hero-btn,
.quote-btn {
  display: inline-block;
  margin-top: 28px;
  background: #ffffff;
  color: #005b96;
  padding: 14px 34px;
  border-radius: 40px;
  text-decoration: none;
  font-weight: 800;
  transition: 0.4s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.hero-btn:hover,
.quote-btn:hover {
  background: #2ecc71;
  color: #fff;
  transform: translateY(-5px) scale(1.04);
}

.pof-container {
  max-width: 1200px;
  margin: auto;
  padding: 65px 20px;
}

.intro-card,
.seo-section,
.why-section,
.quote-box {
  background: #ffffff;
  padding: 38px;
  border-radius: 24px;
  margin-bottom: 45px;
  box-shadow: 0 12px 35px rgba(0, 91, 150, 0.12);
  transition: 0.4s ease;
  text-align: center;
}

.intro-card:hover,
.seo-section:hover,
.why-section:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 45px rgba(0, 91, 150, 0.18);
}

.fancy-heading {
  font-size: 34px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 22px;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
  background: linear-gradient(90deg, #004b85, #00a6d6, #2ecc71);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.fancy-heading::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 70px;
  height: 4px;
  background: linear-gradient(90deg, #00a6d6, #2ecc71);
  border-radius: 10px;
  transform: translateX(-50%);
  transition: 0.4s ease;
}

.fancy-heading:hover::after {
  width: 140px;
}

.section-title {
  text-align: center;
  margin: 60px 0 30px;
}

.section-title p {
  color: #5f7f99;
  font-size: 17px;
  margin-top: -5px;
}

.intro-card p,
.seo-section p,
.quote-box p {
  font-size: 17px;
  line-height: 1.8;
}

.grid-box,
.feature-grid,
.application-grid,
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

.info-card,
.feature-card,
.application-grid div,
.why-grid div {
  background: #ffffff;
  padding: 26px;
  border-radius: 20px;
  text-align: center;
  border-bottom: 5px solid #00a6d6;
  box-shadow: 0 10px 28px rgba(0, 91, 150, 0.1);
  transition: 0.4s ease;
  font-size: 17px;
  font-weight: 700;
}

.info-card {
  font-size: 40px;
}

.info-card h3 {
  font-size: 18px;
  color: #16324f;
  margin-top: 12px;
}

.info-card:hover,
.feature-card:hover,
.application-grid div:hover,
.why-grid div:hover {
  transform: translateY(-10px) scale(1.03);
  border-bottom-color: #2ecc71;
  box-shadow: 0 18px 40px rgba(0, 91, 150, 0.2);
}

.spec-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 12px 35px rgba(0, 91, 150, 0.12);
  margin-bottom: 45px;
}

.spec-table th {
  background: linear-gradient(90deg, #004b85, #00a6d6);
  color: #fff;
  padding: 19px;
  font-size: 18px;
}

.spec-table td {
  padding: 17px;
  border-bottom: 1px solid #e1eef7;
  font-size: 16px;
}

.spec-table tr:hover td {
  background: #eefaff;
}

.keyword-box {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 25px;
}

.keyword-box span {
  background: #eefaff;
  color: #005b96;
  padding: 11px 17px;
  border-radius: 40px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid #ccefff;
  transition: 0.35s ease;
}

.keyword-box span:hover {
  background: #2ecc71;
  color: #fff;
  transform: translateY(-4px);
}

.faq-item {
  background: #ffffff;
  padding: 24px 28px;
  border-radius: 18px;
  margin-bottom: 18px;
  box-shadow: 0 8px 25px rgba(0, 91, 150, 0.1);
  border-left: 5px solid #00a6d6;
  transition: 0.35s ease;
}

.faq-item:hover {
  transform: translateX(8px);
  border-left-color: #2ecc71;
  box-shadow: 0 14px 35px rgba(0, 91, 150, 0.18);
}

.faq-item h3 {
  color: #005b96;
  font-size: 19px;
  margin-bottom: 10px;
}

.faq-item h3::before {
  content: "❓ ";
}

.faq-item p {
  font-size: 16px;
  line-height: 1.7;
}

.quote-box {
  text-align: center;
  background: linear-gradient(135deg, #004b85, #00a6d6);
  color: #fff;
}

.quote-box h2,
.quote-box p {
  color: #fff;
}

/* WOW ANIMATIONS */
.wow {
  opacity: 0;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  animation-timeline: view();
  animation-range: entry 10% cover 30%;
}

.fade-up {
  animation-name: fadeUp;
}

.fade-left {
  animation-name: fadeLeft;
}

.fade-right {
  animation-name: fadeRight;
}

.zoom-in {
  animation-name: zoomIn;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(45px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeLeft {
  from {
    opacity: 0;
    transform: translateX(-45px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeRight {
  from {
    opacity: 0;
    transform: translateX(45px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.88);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* MOBILE */
@media (max-width: 768px) {
  .pof-hero {
    padding: 75px 18px;
  }

  .pof-hero h1 {
    font-size: 32px;
  }

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

  .fancy-heading {
    font-size: 26px;
  }

  .intro-card,
  .seo-section,
  .why-section,
  .quote-box {
    padding: 26px 18px;
  }

  .spec-table th,
  .spec-table td {
    font-size: 14px;
    padding: 13px;
  }
}/* End custom CSS */