/* =====================================================================
   custom.css - Faiz Al Arabia brand overrides (must be linked LAST)

   1. Colors and variables      6. About Us
   2. Fonts                     7. Products
   3. Header, logo, mobile menu 8. Partners page
   4. Home page                 9. Utilities (borders, social icons)
   5. GO-TO top BUTTON          10. Reduced motion
   ===================================================================== */


/* =====================================================================
   1. COLORS AND VARIABLES
   ===================================================================== */
:root {
  --brand-primary: #0c8c8c;     /* teal: main buttons, headings, highlights */
  --brand-secondary: #0B1A30;   /* web black / navy: secondary blocks */
  --brand-bwhite: #f4f6f7;      /* page background, bone white */
  --brand-blacktxt: #1A2733;    /* text black */
  --brand-fagrey: #D9DADB;      /* text grey */
  --brand-dark1: #002633;       /* background of sections and divisions */
}

.background-dark1 { background-color: var(--brand-dark1) !important; }

body.background-bwhite,
.background-bwhite { background-color: var(--brand-bwhite) !important; }

.background-secondary { background-color: var(--brand-secondary); }

.background-primary,
.background-aqua { background-color: var(--brand-primary) !important; }

.text-primary,
.text-primary-hover:hover { color: var(--brand-primary) !important; }
.text-dark { color: var(--brand-blacktxt) !important; }


/* =====================================================================
   2. FONTS - Barlow (self-hosted)
   ===================================================================== */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url('../font/barlow-v13-latin-100.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../font/barlow-v13-latin-300.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../font/barlow-v13-latin-regular.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../font/barlow-v13-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../font/barlow-v13-latin-800.woff2') format('woff2');
}


/* =====================================================================
   3. HEADER, LOGO AND MOBILE MENU
   ===================================================================== */
.brand {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 14px;
  padding: 12px 16px;
}

.brand img {
  display: block !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  margin: 0 !important;
}

.brand-logo {
  height: 64px !important;
  width: 64px !important;
  border-radius: 50%;
  object-fit: cover;
}

.brand-text {
  display: flex !important;
  flex-direction: column !important;   /* tagline sits below the name */
  flex: 0 1 auto;
  white-space: nowrap;
  color: #fff;
  font-size: 24px;                     /* size of the company name */
  line-height: 1.1;
}

.brand-name {
  font-size: 1em;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.brand-tagline {
  font-size: 0.5em;                    /* 50% of the name */
  font-weight: 400;
  letter-spacing: 1px;
  margin-top: 4px;
  opacity: 0.85;
}

.brand-badge {
  height: 64px !important;
  width: auto !important;
}

/* Mobile menu button: hidden on desktop */
.menu-toggle { display: none; }
@keyframes menu-drop {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* Desktop: keep the menu as wide as its content */
@media (min-width: 769px) {
  nav .top-nav { flex: 0 0 auto !important; width: auto !important; }
}

/* Phones and small tablets */
@media (max-width: 768px) {
  nav { height: auto; position: relative; }
  nav.grid { flex-wrap: wrap !important; }

  /* Logo row: right padding keeps the name clear of the button */
  .brand { padding: 10px 70px 10px 16px; }
  .brand img,
  .brand-logo { height: 48px !important; width: 48px !important; }
  .brand-text { font-size: 18px; }
  .brand-badge, .header-badge { display: none !important; }   /* badge hidden on mobile */
  .nav-text { display: none !important; }                     /* template's own button is not used */

  /* Menu is hidden until the button is tapped */
  nav .top-nav { display: none !important; position: static !important; }
  body.menu-open .top-nav { display: block !important; }

  /* Menu panel: full width, directly under the logo row */
  body.menu-open .top-nav ul {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    background: var(--brand-secondary);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
    z-index: 15;
  }

  body.menu-open .top-nav ul { animation: menu-drop 0.2s ease-out; }

  body.menu-open .top-nav li {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  body.menu-open .top-nav li a {
    display: block;
    padding: 16px 20px;
    background: transparent !important;
    color: #fff !important;
    font-size: 16px;
    text-align: left;
  }

  body.menu-open .top-nav li a:hover,
  body.menu-open .top-nav .active-item > a {
    background: var(--brand-primary) !important;
  }

  /* Three-line button, top right */
  .menu-toggle {
    display: block;
    position: absolute;
    top: 12px;
    right: 14px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--brand-primary);
    cursor: pointer;
    z-index: 20;
  }

  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    width: 24px;
    height: 3px;
    margin-left: -12px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s, background 0.2s;
  }
  .menu-toggle span { top: 50%; margin-top: -1.5px; }
  .menu-toggle span::before { top: -8px; }
  .menu-toggle span::after { top: 8px; }

  /* The button becomes an X when the menu is open */
  body.menu-open .menu-toggle span { background: transparent; }
  body.menu-open .menu-toggle span::before { transform: translateY(8px) rotate(45deg); }
  body.menu-open .menu-toggle span::after { transform: translateY(-8px) rotate(-45deg); }
}

@media (max-width: 400px) {
  .brand-text { font-size: 15px; }
}



/* =====================================================================
   4. HOME PAGE
   ===================================================================== */

/* ----- Hero carousel ----- */
.carousel-main .item.background-image {
  aspect-ratio: 1920 / 700;
  min-height: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Arrows (Owl 2). Class-only selectors work for both div and button arrows */
.carousel-fade-transition .owl-nav .owl-prev,
.carousel-fade-transition .owl-nav .owl-next {
  background: transparent !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.carousel-fade-transition .owl-nav .owl-prev:hover,
.carousel-fade-transition .owl-nav .owl-next:hover {
  background: transparent !important;
  opacity: 1;
}

.owl-arrow-svg {
  width: 28px;
  height: 28px;
  display: block;
  margin: 0 auto;
}

/* Desktop carousel (8 slides) and mobile carousel (3 slides).
   Only the one that matches the screen is started by template-scripts.js */
.carousel-mobile.owl-carousel { display: none !important; }

@media (max-width: 768px) {
  .carousel-desktop.owl-carousel { display: none !important; }
  .carousel-mobile.owl-carousel.owl-loaded { display: block !important; }

  .carousel-mobile .item.background-image {
    padding: 0;                          /* removes the template's 190px padding */
    aspect-ratio: 4 / 5;                 /* change to match your mobile images */
    background-size: cover;
    background-position: center;
  }
}

/* ----- Tiles and bullet lists ----- */
.service-icon {
  display: block;
  height: 200px;          /* badge images (ISO / ICV). Change to resize all of them */
  width: auto;
  max-width: 100%;
  margin: 0 auto 15px auto;
}

.icon-list1,
.icon-list2 {
  list-style: none;
  padding-left: 0;
  margin-bottom: 50px;    /* space after the list ends */
}

.icon-list1 li,
.icon-list2 li {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
  padding-left: 45px;
  font-size: 25px;        /* text size */
  line-height: 1.5;       /* spacing between lines */
  margin-bottom: 10px;
}

.icon-list1 li { background-image: url("../img/icons/bullet1.jpeg"); }
.icon-list2 li { background-image: url("../img/icons/bullet2.jpeg"); }

.icon-list3 li {
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 25px 25px;
  padding-left: 5px;
  font-size: 15px;        /* text size */
  line-height: 1;       /* spacing between lines */
  margin-bottom: 10px;
}



/* ----- Section spacing and moving heading ----- */
.section-slim1 {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-bottom: 0 !important;
}

.section-slim2 {
  padding-top: 60px !important;
  padding-bottom: 40px !important;
}

.marquee-text {
  animation: slide-bounce 7s ease-in-out infinite alternate;
}

@keyframes slide-bounce {
  from { transform: translateX(-20%); }
  to   { transform: translateX(40%); }
}

/* ----- Partner logo strip (scrolls right to left) ----- */
.logo-strip {
  overflow: hidden;                                  /* hides logos outside the strip */
  background: var(--brand-bwhite);
  border-top: 3px solid var(--brand-primary);
  border-bottom: 3px solid var(--brand-primary);
  padding: 15px 0;
}

.logo-track {
  display: flex;
  align-items: center;
  width: max-content;                                /* as wide as all logos */
  animation: logo-scroll 25s linear infinite;
}

.logo-item {
  flex: 0 0 auto;
  padding: 0 20px;                                   /* space between logos */
}

.logo-item img {
  width: 200px;
  height: 80px;
  display: block;
}

@keyframes logo-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }              /* moves left by one full set */
}

.logo-strip:hover .logo-track { animation-play-state: paused; }

@media (max-width: 600px) {
  .logo-item { padding: 0 10px; }
  .logo-item img {
    width: 140px;
    height: 56px;                                    /* keeps the 5:2 ratio */
  }
}

/* ----- Industries We Serve ----- */
.industries {
  background: var(--brand-bwhite);
  padding: 40px 20px;
}

.industries-title { margin-bottom: 5px; }
.industries-subtitle { margin-bottom: 30px; }

.industry-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;                           /* centers the last row */
  gap: 25px;
  max-width: 1100px;
  margin: 0 auto;
}

.industry-card {
  flex: 0 1 calc(33.333% - 17px);                    /* 3 per row */
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-top: 6px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-secondary);      /* 3D look */
  padding: 25px 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.industry-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-secondary);
}

.industry-icon {
  width: 60px;
  height: 60px;
  display: block;
  margin: 0 auto 15px;
}

.industry-name {
  color: var(--brand-secondary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 10px;
  text-transform: uppercase;
}

.industry-text {
  color: var(--brand-blacktxt);
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) { .industry-card { flex: 0 1 calc(50% - 13px); } }   /* tablets: 2 per row */
@media (max-width: 600px) { .industry-card { flex: 0 1 100%; } }                /* phones: 1 per row */

/* ----- Why Faiz Al Arabia (trust) ----- */
.trust {
  background: var(--brand-secondary);
  padding: 50px 20px;
}

.trust-title {
  color: #fff;
  margin: 0 0 35px;
  position: relative;
  padding-bottom: 15px;
}

.trust-title::after {                                /* short teal line under the title */
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 12px auto 0;
}

.trust-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  max-width: 1100px;
  margin: 0 auto;
}

.trust-item {
  flex: 0 1 calc(33.333% - 20px);                    /* 3 per row */
  box-sizing: border-box;
  text-align: center;
  padding: 25px 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
  transition: background 0.2s, border-color 0.2s;
}

.trust-item:hover {
  background: rgba(15, 139, 141, 0.2);               /* soft teal tint */
  border-color: var(--brand-primary);
}

.trust-badge {
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin: 0 auto 15px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.trust-name {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 10px;
}

.trust-text {
  color: #d7e3ee;
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
}

@media (max-width: 992px) { .trust-item { flex: 0 1 calc(50% - 15px); } }
@media (max-width: 600px) { .trust-item { flex: 0 1 100%; } }

/* ----- Application / product visual band ----- */
.visual-band {
  background: url("../img/application-pipeline.png") center / cover no-repeat;
  background-attachment: fixed;                      /* parallax */
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
}

.visual-overlay {                                    /* navy gradient keeps the text readable */
  width: 100%;
  min-height: 520px;
  box-sizing: border-box;
  padding: 70px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: linear-gradient(
    180deg,
    rgba(19, 41, 75, 0.85) 0%,
    rgba(11, 26, 48, 0.70) 50%,
    rgba(11, 26, 48, 0.90) 100%
  );
}

.visual-kicker {
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 15px;
}

.visual-title {
  color: #fff;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.15;
  text-transform: uppercase;
  margin: 0;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.visual-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 22px auto 40px;
}

.visual-points {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
  margin-bottom: 40px;
}

.visual-point {
  width: 200px;
  padding: 25px 15px;
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.10);             /* glass effect */
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 20px;
  backdrop-filter: blur(4px);
  transition: background 0.2s, transform 0.2s;
}

.visual-point:hover {
  background: rgba(15, 139, 141, 0.55);
  transform: translateY(-4px);
}

.visual-icon {
  width: 56px;
  height: 56px;
  display: block;
  margin: 0 auto 12px;
}

.visual-point h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0;
}

.visual-btn {
  display: inline-block;
  padding: 14px 34px;
  background: #d32f2f;                               /* red */
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s;
}

.visual-btn:hover {
  background: #b71c1c;
  color: #fff;
}

@media (max-width: 992px) {
  .visual-title { font-size: 36px; }
}

@media (max-width: 600px) {                          /* parallax is unreliable on phones */
  .visual-band { background-attachment: scroll; min-height: 0; }
  .visual-overlay { padding: 50px 15px; min-height: 0; }
  .visual-title { font-size: 28px; }
  .visual-point { width: 100%; max-width: 280px; }
}

/* ----- Global Reach (image band) ----- */
.global-band {
  background: url("../img/global-reach.jpeg") center / cover no-repeat;
}

.global-band-overlay {
  padding: 90px 20px;
  text-align: center;
  background: rgba(11, 26, 48, 0.78);
}

.global-band .global-line { margin: 20px auto 25px; }   /* CHECK: .global-line has no size or color */

.global-band-title {
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  margin: 0;
}

.global-band-text {
  color: #e3ecf4;
  font-size: 18px;
  line-height: 1.7;
  max-width: 750px;
  margin: 0 auto;
}

@media (max-width: 600px) {
  .global-band-title { font-size: 28px; }
}

/* =====================================================================
   5. GO-TO top BUTTON
   ===================================================================== */
/*-------GO TO TOP BUTTON-------*/
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Back button */
.go-top,
.go-top:link,
.go-top:visited {
  display: block;
  width: max-content;
  margin: 40px auto 0;
  padding: 12px 28px;
  color: var(--brand-secondary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--brand-primary);
  border-radius: 30px;
  transition: background 0.2s, color 0.2s;
}

.go-top:hover {
  background: var(--brand-primary);
  color: #fff;
}

/* =====================================================================
   6. ABOUT US
   ===================================================================== */

/* ----- Hero (static image) ----- */
.about-hero {
  width: 100%;
  line-height: 0;                 /* removes the small gap under the image */
}

.about-hero img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 700;
  object-fit: cover;
}

.about-hero picture { display: block; }

@media (max-width: 768px) {
  .about-hero img { aspect-ratio: 941 / 1176; }    /* 4:5, same shape as the mobile image */
} 

/* ----- Our Story ----- */
.our-story {
  background: var(--brand-bwhite);
  padding: 70px 20px;
}

.story-inner {
  display: flex;
  align-items: flex-start;
  gap: 60px;
  max-width: 1100px;
  margin: 0 auto;
}

.story-head {
  flex: 0 0 35%;
  position: sticky;               /* stays in view while the long text scrolls */
  top: 30px;
}

.story-kicker {
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.story-title {
  color: var(--brand-secondary);
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
}

.story-line {
  width: 80px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 22px 0 28px;
}

.story-badge {
  display: inline-block;
  padding: 14px 24px;
  background: var(--brand-secondary);
  border-radius: 16px;
  box-shadow: 5px 5px 0 var(--brand-primary);
}

.story-badge-small {
  display: block;
  color: #d7e3ee;
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
}

.story-badge-big {
  display: block;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
}

.story-body {
  flex: 1 1 0;
  min-width: 0;
}

.story-body p {
  color: var(--brand-blacktxt);
  font-size: 18px;
  line-height: 1.8;
  margin: 0 0 22px;
}

.story-body .story-lead {
  font-size: 21px;
  font-weight: 600;
  color: var(--brand-secondary);
  line-height: 1.6;
}

.story-closing {
  margin-top: 30px;
  padding: 28px 30px;
  background: var(--brand-secondary);
  color: #fff;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
  border-left: 8px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-primary);
}

@media (max-width: 992px) {
  .story-inner { flex-direction: column; gap: 35px; }
  .story-head {
    flex: none;
    position: static;
    text-align: center;
    width: 100%;
  }
  .story-line { margin-left: auto; margin-right: auto; }
  .story-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .our-story { padding: 45px 15px; }
  .story-title { font-size: 26px; }
  .story-body p { font-size: 16px; }
  .story-body .story-lead { font-size: 18px; }
  .story-closing { font-size: 18px; padding: 22px 20px; }
}

/* ----- What We Promise ----- */
.promise {
  background: var(--brand-secondary);
  padding: 70px 20px;
}

.promise-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.promise-title {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.promise-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 20px auto 30px;
}

.promise-intro {
  color: #d7e3ee;
  font-size: 19px;
  line-height: 1.8;
  max-width: 850px;
  margin: 0 auto 50px;
}

.promise-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 25px;
}

.promise-card {
  flex: 0 1 calc(25% - 19px);                   /* 4 per row */
  box-sizing: border-box;
  background: #fff;
  border-top: 6px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-primary);   /* 3D look */
  padding: 30px 20px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.promise-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-primary);
}

.promise-card-title {
  color: var(--brand-secondary);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.promise-card-text {
  color: var(--brand-blacktxt);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 992px) {
  .promise-card { flex: 0 1 calc(50% - 13px); }
  .promise-title { font-size: 32px; }
}

@media (max-width: 600px) {
  .promise { padding: 45px 15px; }
  .promise-title { font-size: 26px; }
  .promise-intro { font-size: 16px; margin-bottom: 35px; }
  .promise-card { flex: 0 1 100%; }
}

/* ----- Certifications (ISO and ICV) ----- */
.certs {
  background: var(--brand-bwhite);
  padding: 70px 20px;
}

.certs-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.certs-kicker {
  color: var(--brand-primary);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  margin: 0 0 12px;
}

.certs-title {
  color: var(--brand-secondary);
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0;
}

.certs-line {
  width: 90px;
  height: 4px;
  background: var(--brand-primary);
  border-radius: 2px;
  margin: 20px auto 25px;
}

.certs-intro {
  color: var(--brand-blacktxt);
  font-size: 19px;
  line-height: 1.8;
  max-width: 800px;
  margin: 0 auto 45px;
}

.certs-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
}

.cert-card {
  flex: 0 1 380px;
  box-sizing: border-box;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-top: 6px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 6px 6px 0 var(--brand-secondary);
  padding: 30px 25px;
  transition: transform 0.2s, box-shadow 0.2s;
}

.cert-card:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-secondary);
}

.cert-img {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: contain;
  margin: 0 auto 18px;
}

.cert-name {
  color: var(--brand-secondary);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.cert-text {
  color: var(--brand-blacktxt);
  font-size: 17px;
  line-height: 1.6;
  margin: 0;
}

/* Option B: image beside text */
.certs-split {
  display: flex;
  align-items: center;
  gap: 50px;
  max-width: 1000px;
  margin: 0 auto;
}

.certs-split-img { flex: 0 0 38%; }

.certs-split-img img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 8px 8px 0 var(--brand-secondary);
  padding: 20px;
  box-sizing: border-box;
}

.certs-split-text { flex: 1 1 0; text-align: left; }
.certs-line-left { margin-left: 0; }

.certs-intro-left {
  color: var(--brand-blacktxt);
  font-size: 19px;
  line-height: 1.8;
  margin: 0;
}

@media (max-width: 992px) {
  .certs-title { font-size: 32px; }
  .certs-split { flex-direction: column; gap: 35px; }
  .certs-split-img { flex: none; width: 70%; }
  .certs-split-text { text-align: center; }
  .certs-line-left { margin-left: auto; }
}

@media (max-width: 600px) {
  .certs { padding: 45px 15px; }
  .certs-title { font-size: 26px; }
  .certs-intro, .certs-intro-left { font-size: 16px; }
  .cert-card { flex: 0 1 100%; }
  .certs-split-img { width: 100%; }
}

/* =====================================================================
   7. PRODUCTS - Product Categories (tabs)   [page not built yet]
   ===================================================================== */
/* ===== Products page: vertical tabs ===== */

/* Smooth scrolling for the back button and the mobile jump */
html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
 
.pv {
  background: var(--brand-bwhite);
  padding: 20px 20px 80px;
}
 
.pv-title {
  background: var(--brand-secondary);   /* dark navy background */
  color: #fff;                          /* white text */
  font-size: 40px;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  padding: 18px 20px;
  border-radius: 14px;
  margin: 18px auto 45px;
}
 

 
.pv, .pv * { box-sizing: border-box; }
.pv { width: 100%; overflow-x: hidden; }
 
/* Desktop: 3 columns = buttons | grey line | details (details take the rest) */
.pv-layout {
  display: grid;
  grid-template-columns: 230px 2px minmax(0, 1fr);
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  /* margin: 20px ; */
}
 
/* ----- Left: category buttons (small) ----- */
.pv-tabs {
  align-self: start;
  width: auto;
  float: none;
  margin: 0;
  position: sticky;                       /* stays in view while the details scroll */
  top: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 24px;
}
 
.pv-tab {
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  background: transparent;
  color: var(--brand-secondary);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  border: 0;
  border-left: 4px solid transparent;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
 
.pv-tab:hover { background: rgba(12, 140, 140, 0.12); }
 
.pv-tab.active {
  background: var(--brand-primary);
  color: #fff;
  border-left-color: var(--brand-secondary);
}
 
.pv-tab:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}
 
/* ----- Grey vertical line ----- */
.pv-divider {
  width: 2px;
  background: var(--brand-fagrey);
}
 
/* ----- Right: product details ----- */
.pv-panels {
  width: 100%;
  min-width: 0;
  float: none;
  margin: 0;
  padding: 0 0 0 40px;
}
 
.pv-panel { width: 100%; float: none; margin: 0; padding: 0; }
.pv-panels img { max-width: 100%; }
 
.pv-panel { display: none; }
 
.pv-panel.active {
  display: block;
  animation: pv-fade 0.3s ease-out;
}
 
@keyframes pv-fade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
 
/* Category heading above the 3 columns */
.pv-name {
  background: var(--brand-primary);   /* dark navy background */
  color: #fff;                          /* white text */
  /* color: var(--brand-primary); */
  font-size: 30px;
  font-weight: 400;
  line-height: 1.0;
  text-transform: capitalize;
  

  padding: 12px 15px 15px 15px;
  border-radius: 14px;

  margin: 0 0 25px;
}

/* Column 3 split into 3 equal columns */
.pv-3items {
  display: grid;
  background: #fff;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border: 2px solid var(--brand-fagrey);
  border-radius: 10px;
  gap: 20px;
}

/* Column 2 split into 2 equal columns */
.pv-2items {
  display: grid;
  background: #fff;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 2px solid var(--brand-fagrey);
  border-radius: 10px;
  gap: 10px;
}



/* One row = image | text (2 equal columns on desktop) */
      .pv-2nitems {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
        margin-bottom: 20px;      /* space between one row and the next */
      }

      .pv-2nitems-border {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        background: #fff;
        border: 2px solid var(--brand-fagrey);
        border-radius: 10px;
        gap: 20px;
        margin-bottom: 20px;      /* space between one row and the next */
      }
      /* Phones and small tablets: one item under the other */
      @media (max-width: 768px) {
        .pv-2nitems, .pv-2nitems-border {
          grid-template-columns: minmax(0, 1fr);   /* single column */
        }
      }

/* One row = Column1 | Column2 | Column3 (3 equal columns on desktop) */
      .pv-3nitems {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        margin-bottom: 20px;      /* space between one row and the next */
      }

      .pv-3nitems-border {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        background: #fff;
        border: 2px solid var(--brand-fagrey);
        border-radius: 10px;
        gap: 20px;
        margin-bottom: 20px;      /* space between one row and the next */
      }
      /* Phones and small tablets: one item under the other */
      @media (max-width: 768px) {
        .pv-3nitems, .pv-3nitems-border {
          grid-template-columns: minmax(0, 1fr);   /* single column */
        }
      }

/* Column 1 split into 1 equal columns */
.pv-1items {
  display: grid;
  background: #fff;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  border: 2px solid var(--brand-fagrey);
  border-radius: 10px;
  gap: 20px;
}

/* ITEM w/o BORDER: Under each Column this is the item class. You can put as may items as you want */
.pv-item {
  padding: 16px;
  text-align: left;
}

/* ITEM with BORDER: Under each Column this is the item class. You can put as may items as you want */
.pv-item-border {
  background: #fff;
  border: 2px solid var(--brand-fagrey);
  border-radius: 10px;
  /* box-shadow: 6px 6px 0 var(--brand-secondary); 
  */
  padding: 16px;
  text-align: left;
}

.pv-item img,
.pv-item-border img {
  display: block;
  width: 100%;  max-width: 400px;         /* medium image */
  height: auto;
  margin: 10px auto 10px;
}

.pv-item h3, 
.pv-item-border h3 {
  color: var(--brand-primary);
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
  text-align: left;
}

.pv-item p, 
.pv-item-border p {
  color: var(--brand-blacktxt);
  font-size: 15px;
  line-height: 1.6;
  margin-top: 5px;
  text-align: left;
}


/* Tablet: 2 columns. Put this inside your existing @media (max-width: 992px) if you prefer. */
@media (max-width: 992px) {
  .pv-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Phone: 1 column. Add this inside your existing @media (max-width: 768px) block. */
@media (max-width: 768px) {
  .pv-items { grid-template-columns: minmax(0, 1fr); }
  .pv-name { font-size: 26px; }
}
 
/* ----- Back to Products button (bottom of the details) ----- */
.pv-top,
.pv-top:link,
.pv-top:visited {
  display: block;
  width: max-content;
  margin: 40px auto 0;
  padding: 12px 28px;
  color: var(--brand-secondary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid var(--brand-primary);
  border-radius: 30px;
  transition: background 0.2s, color 0.2s;
}
 
.pv-top:hover {
  background: var(--brand-primary);
  color: #fff;
}
 
/* ----- Floating back-to-top button (optional) ----- */
.to-top {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-primary);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 25;
}
 
.to-top.show {
  opacity: 1;
  pointer-events: auto;
}
 
/* ----- Phones and small tablets: buttons in a 2-column grid on top ----- */
@media (max-width: 768px) {
  .pv { padding: 35px 15px 60px; }
  .pv-title { font-size: 28px; }
 
  .pv-layout { grid-template-columns: minmax(0, 1fr); }
 
  .pv-tabs {
    position: static;
    align-self: stretch;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0 0 20px;
  }
 
  .pv-tab {
    width: 100%;
    padding: 12px 10px;
    text-align: center;
    white-space: normal;                  /* long names wrap inside the button */
    font-size: 14px;
    border: 2px solid var(--brand-primary);
    border-radius: 12px;
  }
  .pv-tab.active { border-color: var(--brand-primary); }
 
  /* An odd last button takes the full row */
  .pv-tab:last-child:nth-child(odd) { grid-column: 1 / -1; }
 
  .pv-divider { width: 100%; height: 2px; }
 
  .pv-panels {
    padding: 28px 0 0;
    scroll-margin-top: 12px;
  }
  .pv-name { font-size: 26px; }
  .pv-desc { font-size: 16px; }
}
 
/* ----- Reduced motion: add these lines to section 10 of custom.css, or keep here ----- */
@media (prefers-reduced-motion: reduce) {
  .pv-tab,
  .pv-top,
  .to-top { transition: none; }
  .pv-panel.active { animation: none; }
}

/* =====================================================================
   PRODUCTS - sub-category buttons INSIDE the right details area.
   The left buttons and their script stay exactly as they were.
   Paste at the end of the Products section in custom.css.
   (If you applied products-accordion.css, delete it first.)
   ===================================================================== */

/* Row of small pill buttons under the category heading */
.pv-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 25px;
}

.pv-subbtn {
  padding: 8px 18px;
  background: #fff;
  color: var(--brand-secondary);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  border: 2px solid var(--brand-primary);
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
.pv-subbtn:hover { background: rgba(12, 140, 140, 0.12); }
.pv-subbtn.active {
  background: var(--brand-primary);
  color: #fff;
}
.pv-subbtn:focus-visible {
  outline: 3px solid var(--brand-secondary);
  outline-offset: 2px;
}

/* One block of products per sub-category: only the active one shows */
.pv-subpanel { display: none; }
.pv-subpanel.active {
  display: block;
  animation: pv-fade 0.3s ease-out;
}

@media (max-width: 768px) {
  .pv-subnav { gap: 8px; margin-bottom: 20px; }
  .pv-subbtn { padding: 8px 14px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .pv-subbtn { transition: none; }
  .pv-subpanel.active { animation: none; }
}


/* =====================================================================
   8. PARTNERS PAGE - logo matrix
   ===================================================================== */
.partners-section { padding: 20px 20px 60px; }

.partners-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);        /* 3 columns */
  gap: 25px;
  max-width: 900px;                             /* keeps the matrix centered and compact */
  margin: 0 auto;
}

.partner-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  box-sizing: border-box;
  padding: 20px;
  background: #fff;
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  box-shadow: 5px 5px 0 var(--brand-secondary);
  transition: transform 0.2s, box-shadow 0.2s;
}

.partner-cell:hover {                           /* small lift, same as the other cards */
  transform: translate(-3px, -3px);
  box-shadow: 8px 8px 0 var(--brand-secondary);
}

.partner-cell img {
  display: block;
  max-width: 100%;
  max-height: 90px;                             /* logo size: lower to shrink further */
  width: auto;
  height: auto;
}

@media (max-width: 600px) {
  .partners-grid { grid-template-columns: repeat(2, 1fr); gap: 15px; }
  .partner-cell { height: 120px; padding: 15px; }
  .partner-cell img { max-height: 70px; }
}


/* =====================================================================
   9. UTILITIES
   ===================================================================== */
.text-left { text-align: left !important; }

a:focus-visible {                               /* keyboard focus visibility */
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

/* ----- Social icons (inline SVG) ----- */
.social-svg {
  width: 100px;
  height: 100px;
  display: block;
  margin: 0 auto;
  fill: #fff;
}


/* ----- Border styles (Prepared by SHARASH) -----
   Radius guide: 8px slight, 20px clearly curved, 40px very round, 50% oval or circle */
.border0 {                                      /* normal teal border */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
}

.border1 {                                      /* normal grey border */
  border: 2px solid var(--brand-fagrey);
  border-radius: 20px;
}

.border2 {                                      /* classic bevel (ridge) */
  border: 8px ridge var(--brand-primary);
  border-radius: 20px;
}

.border3 {                                      /* raised 3D box with solid shadow */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 6px 6px 0 var(--brand-secondary);
}

.border4 {                                      /* soft, realistic depth */
  border: 2px solid var(--brand-primary);
  border-radius: 20px;
  padding: 15px;
  box-shadow: 0 8px 20px rgba(11, 26, 48, 0.25);
}

.border5 {                                      /* inner and outer bevel */
  border: 2px solid var(--brand-primary);
  border-radius: 8px;
  padding: 15px;
  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.6),
    inset -2px -2px 4px rgba(0, 0, 0, 0.15),
    6px 6px 12px rgba(11, 26, 48, 0.3);
}

.border6 { transition: transform 0.2s, box-shadow 0.2s; }   /* lift on hover */

.border6:hover {
  transform: translate(-3px, -3px);
  box-shadow: 9px 9px 0 var(--brand-secondary);
}


/* =====================================================================
   10. REDUCED MOTION - for visitors who turn animations off
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .marquee-text { animation: none; transform: none; }
  .logo-track { animation: none; }
  .visual-band { background-attachment: scroll; }
  .menu-toggle span,
  .menu-toggle span::before,
  .menu-toggle span::after,
  .industry-card,
  .trust-item,
  .visual-point,
  .promise-card,
  .cats-tab,
  .partner-cell { transition: none; }
}