/* ==========================================================================
   FlexNet theme — light "smarthand-style" refresh, loaded LAST so it wins.
   Brand colours are sampled from the logo (public/logo.jpg):
     blue #366EB8  (FLEX / primary accent)   ·   navy #172C4B  (NET Co. / dark)
   This layer: light chrome, clean cards, calmer decoration, justified copy.
   No markup or data is changed here — colours/spacing only.
   ========================================================================== */

:root {
  --fx-blue: #366EB8;
  --fx-blue-dark: #2C5B99;
  --fx-navy: #172C4B;
  --fx-ink: #172C4B;      /* headings                */
  --fx-body: #5B6472;     /* body copy               */
  --fx-muted: #8A93A3;    /* captions / faint text   */
  --fx-line: #E3E8EF;     /* hairlines / borders     */
  --fx-surface: #ffffff;  /* card surface            */
  --fx-soft: #F4F7FB;     /* soft band / input fill  */
  --fx-chip: #EEF2F8;     /* pill / tag background   */
  --fx-shadow: 0 10px 30px rgba(23, 44, 75, 0.06);
  --fx-shadow-lg: 0 18px 45px rgba(23, 44, 75, 0.12);

  /* keep the template variables locked to the brand, belt-and-suspenders */
  --ienet-base: #366EB8;
  --ienet-base-rgb: 54, 110, 184;
  --ienet-black: #172C4B;
  --ienet-black-rgb: 23, 44, 75;
}

/* --------------------------------------------------------------------------
   1. Base — clean light page, slightly cooler body text
   -------------------------------------------------------------------------- */
body {
  background-color: #ffffff;
  color: var(--fx-body);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--fx-ink);
}

/* --------------------------------------------------------------------------
   2. Header + topbar sit over the dark hero image → keep their text white
      (nav links default to navy in the template, which would be unreadable)
   -------------------------------------------------------------------------- */
.main-header .main-menu__list > li > a {
  color: #ffffff;
}
.main-header .main-menu__list > li > a:hover,
.main-header .main-menu__list > li.current > a {
  color: var(--fx-blue);
}
.main-header__call__title,
.main-header__call__text {
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Section-title (tagline / heading) — navy heading, blue highlight word
   -------------------------------------------------------------------------- */
.sec-title__title {
  color: var(--fx-ink);
}
.sec-title__title span {
  color: var(--fx-blue);
}
.sec-title__tagline {
  color: var(--fx-blue);
}

/* --------------------------------------------------------------------------
   4. Services = navy accent band (bg image + rgba(navy,.9) overlay).
      Everything sitting over it must read white.
   -------------------------------------------------------------------------- */
.packages-one .sec-title__title,
.packages-one .sec-title__tagline,
.packages-one__list.tab-buttons,
.packages-one__list.tab-buttons li,
.packages-one__list .tab-btn {
  color: #ffffff;
}
/* the light card holding the three service pillars */
.packages-one__wrapper {
  background-color: var(--fx-surface);
  box-shadow: var(--fx-shadow-lg);
  border-radius: 20px;
}
.packages-one__item__title {
  color: var(--fx-ink);
}
.packages-one__item__list li {
  color: var(--fx-body);
}

/* --------------------------------------------------------------------------
   5. Card refresh — feature boxes as clean light cards
   -------------------------------------------------------------------------- */
.feature-one__box {
  background: var(--fx-surface);
  border: 1px solid var(--fx-line);
  border-radius: 14px;
  padding: 30px 28px;
  margin-bottom: 24px;
  box-shadow: var(--fx-shadow);
  transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}
.feature-one__box + .feature-one__box {
  border-top: 1px solid var(--fx-line); /* override template's single hairline */
}
.feature-one__box:hover {
  transform: translateY(-6px);
  border-color: rgba(54, 110, 184, 0.45);
  box-shadow: var(--fx-shadow-lg);
}
.feature-one__box__title {
  color: var(--fx-ink);
}
.feature-one__box__text {
  color: var(--fx-body);
}
.feature-one__box__icon {
  color: var(--fx-blue);
}

/* --------------------------------------------------------------------------
   6. Calmer decoration — soften the busy floating shapes/overlays so the
      light layout reads clean like the reference site.
   -------------------------------------------------------------------------- */
.about-one__shape,
.testimonials-one__bg,
.testimonials-one__image,
.testimonials-one__left-color,
.main-footer__shape-one,
.main-footer__shape-two,
.mail-one__bg,
.mail-one__overlay,
.mail-one__shape-left,
.mail-one__shape-right,
.cta-one__image__shape {
  opacity: 0.06;
}
/* the mission section background texture — keep it barely there */
.about-one {
  background-image: none !important;
  background-color: var(--fx-surface);
}
/* raster decoration PNGs that still carry the old red accent — drop them */
.feature-one__image__border,
.about-one__image__border {
  display: none;
}

/* --------------------------------------------------------------------------
   7. Justify the main paragraph copy (explicit request).
      Direction-agnostic: works for both LTR (en) and RTL (ar / ckb).
      Applied to real multi-line prose only — not tight clamped card blurbs.
   -------------------------------------------------------------------------- */
.main-slider-one__text,
.about-one__content__text,
.about-one__content__text p,
.cta-one__content__text,
.cta-one__content__text p,
.feature-one__box__text,
.testimonials-one__content__text,
.footer-widget__text,
.footer-widget__text p,
.blog-detail__rich-text,
.blog-detail__rich-text p,
.project-detail__description,
.project-detail__description p {
  text-align: justify;
  text-justify: inter-word;
}

/* --------------------------------------------------------------------------
   8. Footer — stays navy (background-black → --ienet-black = navy).
      Keep links/copy legible on navy.
   -------------------------------------------------------------------------- */
.main-footer .footer-widget__title {
  color: #ffffff;
}
.main-footer .footer-widget__links li,
.main-footer .footer-widget__links li a,
.main-footer__copyright {
  color: rgba(255, 255, 255, 0.72);
}
.main-footer .footer-widget__links li a:hover {
  color: var(--fx-blue);
}

/* --------------------------------------------------------------------------
   9. Buttons — blue primary, readable on any background
   -------------------------------------------------------------------------- */
.ienet-btn {
  color: #ffffff;
}

/* Hero buttons: the first one is a *white* pill, so it must keep its blue
   label — the blanket white above would render it invisible on white. */
.main-slider-one__btn .ienet-btn.main-slider-one__btn__first {
  background-color: #ffffff;
  color: var(--fx-blue);
}
.main-slider-one__btn .ienet-btn.main-slider-one__btn__first:hover {
  color: #ffffff;
}
/* the outlined twin keeps a white label on the dark hero, blue once filled */
.main-slider-one__btn .ienet-btn.main-slider-one__btn__last {
  background-color: transparent;
  border: 2px solid #ffffff;
  color: #ffffff;
}
.main-slider-one__btn .ienet-btn.main-slider-one__btn__last:hover {
  color: var(--fx-blue);
}

/* --------------------------------------------------------------------------
   10. Feature cards — icon back in the flow.
       The template pins the icon absolutely and reserves 98px of padding for
       it; card padding is re-declared in §5, which removed that reservation
       and let the copy run underneath the icon. Put the icon in normal flow
       instead so it can never collide with the text, in LTR or RTL.
   -------------------------------------------------------------------------- */
.feature-one__box {
  padding: 30px 28px;
  min-height: 0;
}
.feature-one__box__icon {
  position: relative;
  inset: auto;
  width: 58px;
  height: 58px;
  font-size: 30px;
  border-radius: 16px;
  margin: 0 0 18px;
}
.feature-one__box__icon::after {
  border-radius: 16px;
}

/* --------------------------------------------------------------------------
   11. Projects — light section that sits flush with the white page instead
       of the navy + photo band the template shipped.
   -------------------------------------------------------------------------- */
.projects-one.movie-one {
  background-color: var(--fx-surface);
}
.projects-one .sec-title__tagline {
  color: var(--fx-blue);
}
.projects-one .sec-title__title {
  color: var(--fx-ink);
}
.projects-one .sec-title__title span {
  color: var(--fx-blue);
}

/* --------------------------------------------------------------------------
   LTR — button chevrons are authored for RTL (pointing left); point them forward
   -------------------------------------------------------------------------- */
[dir="ltr"] .ienet-btn__icon .fa-chevron-left {
  transform: scaleX(-1);
}