:root {
  --primary-navy: #06284b;
  --secondary-blue: #0c4a79;
  --accent-cyan: #3fa9f5;
  --light-cyan: #eaf5fc;
  --text-dark: #212529;
  --text-muted: #6c757d;
  --color-white: #ffffff;
  --color-black: #000000;
  --color-placeholder: #a6a6a6;
  --color-grey: #747474;
  --color-grey-light: var(--color-grey);
  --color-cyan-bright: #00cfff;
  --color-cyan-hover: #00d9ff;
  --color-blue-dark: #1d2330;
  --color-blue-darker: #032b5c;
  --color-blue-footer: #161c28;
  --color-footer-link-hover: #56b5dc;
  --color-social: #0077b6;
  --color-line-dark: #1f2430;
  --color-card-bg-1: #045f9c;
  --color-card-bg-2: #02497b;
  --color-card-bg-3: #013a66;
  --color-card-bg-4: #012f57;
  --color-card-border: rgba(0, 200, 255, 0.45);
  --color-white-rgb: 255, 255, 255;
  --color-black-rgb: 0, 0, 0;
  --primary-navy-rgb: 6, 40, 75;
  --accent-cyan-rgb: 63, 169, 245;
  --color-blue-rgb: 0, 140, 255;
  --color-blue-dark-rgb: 0, 132, 255;
  --color-blue-darkest-rgb: 0, 55, 110;
  --color-cyan-light-rgb: 0, 207, 255;

  /* Theme Colors */
  --sawaco-dark: #0A2540;
  --sawaco-mid: #1A6FA8;
  --sawaco-accent: #00B4D8;
  --sawaco-gold: #C9A84C;
  --sawaco-foam: var(--light-cyan);

  /* Consolidated & Merged Colors */
  --color-charcoal: #111111;
  --color-black-soft: var(--text-dark);
  --color-grey-dark: #555555;
  --color-grey-medium: #666666;
  --color-grey-muted: var(--text-muted);
  --color-charcoal-light: #444444;
  --color-text-navy: #2e3b55;

  --color-border-light: #d9d9d9;
  --color-border-grey: var(--color-border-light);
  --color-border-input: var(--color-border-light);

  --color-cyan-bg-light: #dff2f9;
  --color-bg-note: #f6fbff;

  --color-sky-blue: #13a0eb;
  --color-btn-blue: var(--color-sky-blue);
  --color-btn-blue-hover: #0b73b4;
  --color-icon-blue: #0b72b9;
  --color-icon-bg-blue: var(--color-sky-blue);
  --color-arrow-blue: #0078e7;
  --color-badge-blue: #0098ff;
  --color-icon-bright-blue: #0077ff;
  --color-title-blue: var(--color-sky-blue);
  --color-cta-hover: #00ccf0;
  --color-sawaco-label: #6B8BA4;

  --color-gallery-grad-1: #0a7fd3;
  --color-gallery-grad-2: #0ba4ef;
  --color-table-grad-1: #0076e7;
  --color-table-grad-2: #00a6ff;
  --color-register-overlay-1: rgba(0, 33, 99, 0.88);
  --color-register-overlay-2: rgba(0, 33, 99, 0.90);
  --color-register-glow: rgba(0, 183, 255, 0.10);
  --color-grad-blue-start: #0066ff;
  --color-grad-blue-end: #00bfff;
  --color-grad-teal-start: #00b894;
  --color-grad-teal-end: #00cec9;

  /* Slider & Secondary Layout Colors */
  --color-slider-overlay: rgba(0, 33, 71, 0.4);
  /* Scrim for sub-banners that carry a real photo (the hero slide image reused on the
     page its "Read More" leads to). Heavier than the slider overlay because the
     sub-banner heading is centred over the middle of the image, not the darker edge. */
  --color-sub-banner-scrim: rgba(3, 43, 92, 0.55);
  --color-light-sky-blue: #7fdcff;
  --color-slider-cyan-line: #2bbcff;
  --color-grey-lightest: #d6d6d6;
  --color-btn-cyan: #38c5f4;
  --color-btn-cyan-hover: #23b6e7;
  --color-slider-info-bg: rgba(0, 20, 45, 0.1);
}

body {
  font-family: "robotoregular";
  color: var(--text-dark);
  overflow-x: hidden;
}

h2,
.awards-section h2 {
  font-size: 40px;
}

/* Titles carry the emphasis site-wide; the detail copy under them stays at body weight.
   Bootstrap's default heading weight is 500, which left any heading written without an
   explicit fw-bold reading as medium rather than as a title. Element-level, so the
   .fw-* utilities and the named title classes (.slider-title, .cta-title, ...) still win.
   h5/h6 are left alone - they double as subtitle/metadata lines (dates, attributions)
   that are meant to read as detail, and the ones that are titles already carry fw-bold. */
h1,
h2,
h3,
h4 {
  font-weight: 700;
}

.dropdown-item {
  padding: 7px 20px !important;
    font-size: 14px;
}
.form-control::placeholder {
  color: var(--color-placeholder);
  opacity: 1;
  font-size: 14px;
}
/* Top Utilities Bar */
.top-bar {
  background-color: var(--primary-navy);
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(var(--color-white-rgb), 0.1);
}
/* Main Navbar Override */
.custom-nav {
  background-color: var(--primary-navy);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}
.custom-nav.nav-scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}
.nav-scrolled img.img-fluid {
  max-width: 69%;
}
.custom-nav .nav-link {
  color: rgba(var(--color-white-rgb), 0.9) !important;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 0.8rem 1.2rem !important;
  position: relative;
  transition: color 0.3s ease;
}

.custom-nav .nav-link::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background-color: var(--color-cyan-bright);
  transition: width 0.3s ease;
  border-radius: 2px;
}

.custom-nav .nav-link:hover,
.custom-nav .nav-link.active {
  color: var(--color-white) !important;
}

.custom-nav .nav-link:hover::before,
.custom-nav .nav-link.active::before {
  width: 70%;
}

/* Hero Section Styling */
.hero-section {
  background:
    linear-gradient(rgba(var(--primary-navy-rgb), 0.85),
      rgba(var(--primary-navy-rgb), 0.85)),
    url("https://images.unsplash.com/photo-1541888946425-d81bb19240f5?auto=format&fit=crop&w=1920&q=80") center/cover no-repeat;
  padding: 120px 0;
  color: var(--color-white);
}

.hero-section h1 {
  font-weight: 800;
  letter-spacing: -0.5px;
  line-height: 1.2;
}

/* Ticker Blue Bar */
.ticker-bar {
  background-color: var(--accent-cyan);
  color: var(--color-white);
  font-weight: 500;
  font-size: 0.9rem;
}

/* Styled Section Sub-headers */
.section-tag {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--text-dark);
  font-weight: 700;
  position: relative;
  display: inline-block;
  margin-bottom: 0.75rem;
  width: auto;
}

.section-tag::after {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: var(--text-dark);
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.two-line .section-tag::before {
  content: "";
  position: absolute;
  width: 30px;
  height: 2px;
  background-color: var(--text-dark);
  left: -40px;
  top: 50%;
  transform: translateY(-50%);
}

.innovation-section .two-line .section-tag {
  color: var(--color-white);
}

.innovation-section .two-line .section-tag::after,
.innovation-section .two-line .section-tag::before {
  background-color: var(--color-white);
}

.bg-white .section-tag {
  color: var(--color-black);
}

.bg-white .section-tag::after {
  background-color: var(--color-black);
}

/* Mid-Section Dark Block */
.dark-services-section .section-tag {
  color: var(--color-white);
}

.dark-services-section .section-tag::after {
  background-color: var(--color-white);
}

.dark-services-section {
  background-image: url(../img/bg-1.jpg);
  background: linear-gradient(135deg,
      var(--primary-navy) 0%,
      var(--secondary-blue) 100%);
  color: var(--color-white);
}

/* Grid Cards Image Section */
.plant-card {
  position: relative;
  overflow: hidden;
  border-radius: 4px;
}

.plant-card img {
  transition: transform 0.3s ease;
  width: 100%;
  object-fit: cover;
}

.plant-card:hover img {
  transform: scale(1.05);
}

.plant-title-tag {
  background-color: var(--accent-cyan);
  color: white;
  text-align: center;
  padding: 10px;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  /*new*/
      position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    text-align: center;
    min-height: 60px;
}

/* SGS certification line under each plant card. It lives in .plant-slide, a
   wrapper outside .plant-card, because that card hides its overflow for the
   hover zoom and its title tag is absolutely positioned over the image. */
.plant-certifications {
  margin-top: 10px;
  /* Brand blue rather than the red of the marked-up mock - accent-cyan is too pale
     for small bold text on the light section behind it. */
  color: var(--secondary-blue);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.35;
  text-transform: uppercase;
}

/* Video Section Overlay styling */
.video-container {
  position: relative;
  background:
    linear-gradient(rgba(var(--color-black-rgb), 0.4),
      rgba(var(--color-black-rgb), 0.4)),
    url("../img/bg-video.jpg") center/cover no-repeat;
  height: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-btn {
  width: 75px;
  height: 75px;
  background: var(--accent-cyan);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.8rem;
  cursor: pointer;
  box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.5);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(var(--accent-cyan-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--accent-cyan-rgb), 0);
  }
}

/* Form Card Element */
.contact-form-card {
  background-color: var(--primary-navy);
  border-radius: 20px;
  color: white;
}

.lang-drop,
.sign-in-drop {
  z-index: 9999;
}

.vido-link {
  text-decoration: underline;
  color: var(--light-cyan);
}

/*-------------------------*/

.news-sec .col:last-child hr {
  display: none;
}

.cat-news {
  color: var(--color-grey);
  font-size: 12.366px;
  text-transform: capitalize;
}

.date-news {
  color: var(--color-grey);
  font-size: 12.366px;
  text-transform: capitalize;
}

.date-news-right {
  color: var(--color-grey);
  font-size: 14px;
  text-transform: capitalize;
}

/*-----------------*/
.box-service {
  position: relative;
}

.box-service::before,
.box-service::after {
  height: 1px;
  width: 100%;
  content: "";
  position: absolute;
  background: linear-gradient(90deg,
      transparent 0%,
      var(--color-cyan-bright) 50%,
      transparent 100%);
  opacity: 0.5;
}

.box-service::before {
  top: 0;
}

.box-service::after {
  bottom: 0;
}

.box-service div {
  position: relative;
}

.box-service div::before,
.box-service div::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  height: 100%;
}

.box-service div::before,
.box-service div::after {
  background: linear-gradient(to bottom,
      transparent 0%,
      rgba(var(--color-white-rgb), 0.25) 50%,
      transparent 100%);
}

.box-service div::before {
  left: 0;
}

.box-service div::after {
  right: 0;
}

/* Core Offerings thumbnails. Admins upload ordinary photographs here, of whatever size and
   aspect ratio they happen to have. The markup previously just capped them at 64px tall, so
   every column ended up a differently-sized letterboxed strip and the subject was too small
   to read. A fixed box with cover cropping squares the four up and keeps them legible. */
.service-thumb {
  display: block;
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-radius: 10px;
}

@media (max-width: 767.98px) {
  /* One column on phones, so there is room to show the photo larger. */
  .service-thumb { height: 190px; }
}

.box-service h5 {
  min-height: 65px;
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
}

.box-service p {
  color: var(--color-white);
  font-size: 16px;
  font-weight: 400;
  line-height: 30px;
  /* 187.5% */
}

.dark-services-section h2 {
  color: var(--color-white);
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  max-width: 800px;
  /* 48px */
}

.dark-services-section {
  position: relative;
  overflow: hidden;
}

/* animated circles */
.dark-services-section::before,
.dark-services-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(var(--color-blue-rgb), 0.08);
  animation: floatCircle 8s ease-in-out infinite;
}

/* big circle */
.dark-services-section::before {
  width: 350px;
  height: 350px;
  top: -80px;
  left: -120px;
}

/* small circle */
.dark-services-section::after {
  width: 250px;
  height: 250px;
  top: 110px;
  left: -60px;

  animation-delay: 2s;
}

/* animation */
@keyframes floatCircle {
  0% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-20px) scale(1.05);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

/*----------plants-------------------*/
.plant-section h2 {
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
  max-width: 800px;
}

.slider-nav {
  display: flex;
  gap: 20px;
}

.slider-nav button {
  border: none;
  background: none;
  font-size: 25px;
  cursor: pointer;
}

.why-section {
  text-align: center;
}

/* top */
.section-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 35px;
}

.section-top h6 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--color-blue-dark);
}

/* lines */
.section-top .line {
  width: 110px;
  height: 1px;
  background: var(--color-blue-dark);
  opacity: 0.7;
}

/* title */
.why-section h2 {
  max-width: 900px;
  margin: auto auto 40px;
  font-size: 40px;
  line-height: 1.2;
  font-weight: 700;
  color: var(--color-blue-dark);
}

/* description */
.why-section p {
  max-width: 1150px;
  margin: auto;
  font-size: 19px;
  line-height: 2;
  color: var(--color-grey);
}



.innovation-section {
  background: var(--color-blue-darker);
}

.innovation-section h2 {
  font-size: 40px;
}

/* letter spacing */
.letter-space {
  letter-spacing: 4px;
}

/* card */
.innovation-card {
  position: relative;

  border-radius: 10px 45px 10px 10px;
  overflow: hidden;

  transition: 0.4s;
}

/* hover */
.innovation-card:hover {
  transform: translateY(-8px);
  border-color: var(--color-cyan-hover) !important;
}

/* icon */
.icon-box {
  width: 60px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 18px;

  font-size: 28px;

  background: rgba(var(--color-cyan-light-rgb), 0.12);
}

/*-------awar--------------*/

.letter-space {
  letter-spacing: 2px;
}

.awards-section .slider-btn {
  width: 50px;
  height: 50px;
}

.awards-section .card {
  transition: 0.3s;
}

.awards-section .card:hover {
  transform: translateY(-6px);
}

.awards-section .owl-carousel .owl-item img {
  display: block;
  width: auto;
  max-height: 145px;
  margin: 0 auto;
}

.awards-section .owl-carousel .owl-item h5 {
  font-size: 12px;
  /* Two lines' worth, always. The names are admin data and most are short ("HACCP"), but a longer
     one ("Digital with Purpose") wraps - and owl sizes each item on its own, so one taller card
     would leave the row of cards ending at different heights. */
  min-height: 30px;
}

.client-feedback .form-control,
.client-feedback .btn-submit {
  padding: 15px;
  border-radius: 10px !important;
}

.client-feedback .btn-submit {
  font-size: 16px;
}

/* Reviewer initial, used instead of a photo - the testimonials are real customers
   and we hold no pictures of them. */
.review-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  background: var(--primary-navy);
  color: var(--color-white);
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

/* Member-body logos sit on a common height so wordmarks and roundels read as one row,
   whatever their aspect ratio. */
.membership-logo {
  height: 60px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.footer-section {
  background: var(--color-blue-footer);
}

/* logo */
.footer-logo {
  max-width: 320px;
}

/* links */
.footer-link {
  color: rgba(var(--color-white-rgb), 0.85);

  text-decoration: none;

  transition: 0.3s;

  text-transform: uppercase;

  font-size: 14px;
}

.footer-link:hover {
  color: var(--color-footer-link-hover);
}

/* social */
.social-icon {
  width: 40px;
  height: 40px;

  border-radius: 12px;

  background: var(--color-white);

  color: var(--color-social);

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;

  text-decoration: none;

  transition: 0.3s;
}

.social-icon:hover {
  transform: translateY(-4px);
}

/* bottom */
.footer-bottom {
  border-color: rgba(var(--color-white-rgb), 0.08) !important;
}

/* Multi-level Dropdown */
.dropdown-menu li {
  position: relative;
}

.dropdown-menu .dropdown-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: 0;
  margin-top: -1px;
}

.dropdown-submenu-container:hover>.dropdown-submenu,
.dropdown-submenu-container.show-submenu>.dropdown-submenu {
  display: block;
}



/* Stylish Dropdown */
.dropdown-menu {
  border: none;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  padding: 12px 0;
  animation: fadeInDown 0.3s ease forwards;
  min-width: 220px;
}

.dropdown-item {
  padding: 10px 20px;
  font-weight: 500;
  color: var(--primary-navy);
  transition: all 0.2s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(var(--color-cyan-bright-rgb), 0.1);
  color: var(--accent-cyan);
  transform: translateX(5px);
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.card-bg {
  background:
    radial-gradient(circle at center,
      var(--color-card-bg-1) 0%,
      var(--color-card-bg-2) 35%,
      var(--color-card-bg-3) 60%,
      var(--color-card-bg-4) 100%);

  border: 2px solid var(--color-card-border);

  /*box-shadow:
    inset 0 0 40px rgba(0, 180, 255, .08),
    0 10px 30px rgba(0, 0, 0, .35);*/
}

.owl-dots {
  display: none !important;
}

/*---------------sub-page----------------*/
.sub-banner{
    position:relative;
    width:100%;
    min-height:300px;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px;
    background:
    linear-gradient(var(--color-blue-darker), var(--color-blue-darker)),
    url('../img/sub-banner-bg.jpg') center center/cover no-repeat;
}
/* Content */
.content{
    position:relative;
    z-index:2;
    max-width:900px;
}
.sub-title{
    color:var(--accent-cyan);
    letter-spacing:4px;
    /* Matches .section-tag, the equivalent eyebrow label on the home page, which is 700.
       Without this it inherited body weight and read lighter than its own page title. */
    font-weight:700;
    font-size:13px;
    margin-bottom:20px;
    text-transform:uppercase;
    position:relative;
    display:inline-block;
}
.sub-title::before,
.sub-title::after{
    content:"";
    position:absolute;
    top:50%;
    width:80px;
    height:1px;
    background:var(--color-card-bg-1);
}
.sub-title::before{
    right:115%;
}
.sub-title::after{
    left:115%;
}
.sub-banner h1{
    font-size:28px;
      color:var(--color-white);
    font-weight:700;
    margin-bottom:25px;
    line-height:1.2;
}
.sub-banner p{
    color:var(--color-white);
    font-size:18px;
    line-height:1.8;
    font-weight:300;
}
.corner{
    position:absolute;
    width:40px;
    height:40px;
    border:1px solid rgba(255,255,255,0.25);
}
.corner.top-left{
    top:40px;
    left:40px;
    border-right:none;
    border-bottom:none;
}
.corner.top-right{
    top:40px;
    right:40px;
    border-left:none;
    border-bottom:none;
}
.corner.bottom-left{
    bottom:40px;
    left:40px;
    border-right:none;
    border-top:none;
}
.corner.bottom-right{
    bottom:40px;
    right:40px;
    border-left:none;
    border-top:none;
}
/*---------company--details---------------------*/
/* Main Card */
.company-card{
    border:1px solid var(--light-cyan);
    border-radius:14px;
    overflow:hidden;
    margin-bottom: 50px;
}
.company-card:last-child{
  margin-bottom: 0;
}
/* Image */
.company-image{
    position:relative;
    overflow:hidden;
    border-radius:14px;
}
.company-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:14px;
}
/* Heading */

.company-details h2 {
    font-size:25px;
    font-weight:700;
    line-height:1.1;
    color:var(--color-black);
}

.company-details h6{
    color:var(--color-cyan-bright);
    letter-spacing:3px;
    font-size:16px;
    font-weight:700;
    text-transform: uppercase;
}

/* Description */

.company-details p{
    color:var(--color-gray);
    font-size:16px;
    line-height:2;
}

/* Bottom Area */

.company-footer{
    background:var(--light-cyan);
}

.footer-item{
    min-height:110px;
}

.footer-border{
    border-right:1px solid var(--color-sky-blue);
}

/* Icons */

.footer-icon{
    font-size:18px;
    color:var(--color-social);
    min-width:28px;
}

/* Text */

.footer-text{
    font-size:15px;
    line-height:1.8;
    color:var(--color-charcoal);
}

/* Website Button */

.website-btn{
    background: var(--color-cyan-bright);
    color: var(--color-white);
    border-radius: 50px;
    margin: 0 auto;
    padding: 16px 12px;
    text-decoration: none;
    transition: .3s;
    font-size: 15px;
    font-weight: 700;
}

.website-btn:hover{
    background:var(--color-social);
    color:var(--color-white);
}

/* Main Wrapper */

.plant-wrapper{
    border:1px solid var(--color-border-light);
    border-radius:10px;
    overflow:hidden;
    background:var(--color-white);
}

/* Top Features */

.feature-box{
    background:var(--color-cyan-bg-light);
}

.feature-item{
    font-size:14px;
    color:var(--text-dark);
    font-weight:500;
}

.feature-icon{
    width:18px;
    height:18px;
    border-radius:50%;
    background:var(--color-sky-blue);
    color:var(--color-white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    flex-shrink:0;
}

/* Accordion */

.custom-accordion .accordion-item{
    border:none;
    border-bottom:1px solid var(--color-border-light);
}

.custom-accordion .accordion-button{
    background:var(--color-white);
    font-size:16px;
    font-weight:700;
    color:var(--color-charcoal);
    padding:25px 30px;
    box-shadow:none !important;
}

.custom-accordion .accordion-button:not(.collapsed){
    background:var(--color-white);
    color:var(--color-charcoal);
}

/* Custom Icon */

.custom-accordion .accordion-button::after{
    display:none;
}

.accordion-icon{
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--color-sky-blue);
    color:var(--color-white);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    margin-left:auto;
    transition:.3s;
}

.custom-accordion .accordion-button:not(.collapsed) .accordion-icon{
    transform:rotate(180deg);
}

/* Content */

.accordion-body{
    padding:0 30px 35px;
}

.accordion-body p{
    color:var(--text-dark);
    font-size:15px;
    line-height:2;
}

.plant-list{
    padding-left:18px;
    margin-top:20px;
}

.plant-list li{
    color:var(--color-grey-dark);
    font-size:15px;
    line-height:2;
    margin-bottom:5px;
}

/* Normalize CMS-authored headings rendered inside the accordion body so the
   editor's headings (h4/h5 etc.) match the page design instead of rendering oversized */
.accordion-body h1,
.accordion-body h2,
.accordion-body h3,
.accordion-body h4{
    font-size:20px;
    font-weight:700;
    color:var(--primary-navy);
    line-height:1.5;
    margin:0 0 14px;
}
.accordion-body h5,
.accordion-body h6{
    font-size:17px;
    font-weight:700;
    color:var(--primary-navy);
    line-height:1.6;
    margin:20px 0 10px;
}
/* hide empty image placeholders left in old CMS markup (page images show in the bottom gallery only) */
.accordion-body .deslination_thumb,
.accordion-body .desalination_thumb{
    display:none;
}

/*----galary---*/
.gallery-section{
    position:relative;
    padding:80px 0;
    overflow:hidden;
    background:
    linear-gradient(135deg,var(--color-gallery-grad-1) 0%,var(--color-gallery-grad-2) 100%);
}

/* Background Circle */

.gallery-section::before{
    content:"";
    position:absolute;
    top:-200px;
    left:-200px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(255,255,255,0.05);
    animation:leftCircle 12s ease-in-out infinite;
}

/* Wave Lines */

.gallery-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-radial-gradient(
        circle at left bottom,
        rgba(255,255,255,0.09) 0px,
        rgba(255,255,255,0.09) 1px,
        transparent 1px,
        transparent 20px
    );
    opacity:.4;
     animation:rotateWave 20s linear infinite;
}

/* LEFT ANIMATION */

@keyframes leftCircle{

    0%{
        transform:scale(1) translate(0,0);
    }

    50%{
        transform:scale(1.1) translate(40px,20px);
    }

    100%{
        transform:scale(1) translate(0,0);
    }

}

/* RIGHT ROTATE */

@keyframes rotateWave{

    0%{
        transform:rotate(0deg);
    }

    100%{
        transform:rotate(360deg);
    }

}

/* Carousel */

.gallery-slider{
    position:relative;
    z-index:2;
}

/* Item */

.gallery-item{
    overflow:hidden;
    border-radius:18px;
}

/* The photographs are not all the same shape - most are 3:2, but some are 5:3 or 4:3 - and
   object-fit:cover cannot crop while the height is auto, so every tile used to take its own
   image's proportions and the row came out ragged. Pinning the ratio gives cover a box to crop
   into, so the tiles match whatever the source images happen to be.

   Ratio rather than a fixed height so the tiles keep their shape as the carousel goes from four
   items to two; below 768px the height IS pinned (see viewport.css) and takes over from this. */
.gallery-item img{
    width:100%;
    height:auto;
    aspect-ratio:3 / 2;
    object-fit:cover;
    border-radius:18px;
    transition:.4s;
}

.gallery-item:hover img{
    transform:scale(1.05);
}

/* Navigation */

.gallery-section .owl-nav{
    margin-top:0 !important;
}

.gallery-section .owl-prev,
.gallery-section .owl-next{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:56px;
    height:56px;
    border-radius:50% !important;
    background:var(--color-white) !important;
    color:var(--color-cyan-hover) !important;
    font-size:24px !important;
    transition:.3s;
}

.gallery-section .owl-prev{
    left:-80px;
}

.gallery-section .owl-next{
    right:-80px;
}

.gallery-section .owl-prev:hover,
.gallery-section .owl-next:hover{
    background:var(--color-cyan-hover) !important;
    color:var(--color-white)  !important;
}

/* Dots */

.gallery-section .owl-dots{
    margin-top:25px !important;
    display: flex !important;
    justify-content: center;
    gap: 5px;
}

.gallery-section .owl-dot{
    width:18px !important;
    height:10px !important;
    border-radius:30px !important;
    background:rgba(255,255,255,0.5) !important;
    transition:.3s;
}

.gallery-section .owl-dot.active{
    width:35px !important;
    background:var(--color-white)!important;
}


/* Section */

.register-section{
    position:relative;
    padding:70px 0 100px;
    overflow:hidden;
    background:
    linear-gradient(var(--color-register-overlay-1),var(--color-register-overlay-2)),
    url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?q=80&w=1920&auto=format&fit=crop')
    center/cover no-repeat;
}

/* Background Circle */

.register-section::before{
    content:"";
    position:absolute;
    left:-250px;
    top:-200px;
    width:600px;
    height:600px;
    border-radius:50%;
    background:var(--color-register-glow);
}

/* Wave Line */

.register-section::after{
    content:"";
    position:absolute;
    inset:0;
    background:
    repeating-radial-gradient(
        circle at right top,
        rgba(255,255,255,0.06) 0px,
        rgba(255,255,255,0.06) 1px,
        transparent 1px,
        transparent 18px
    );
    opacity:.4;
}

/* Title */

.register-title{
    position:relative;
    z-index:2;
    text-align:center;
    color:var(--color-white);
}

.register-title h1{
    font-size:68px;
    font-weight:800;
    margin-bottom:10px;
}

.register-title h2{
    font-size:42px;
    font-weight:700;
    color:var(--color-sky-blue);
}

/* Form Card */

.register-card{
    position:relative;
    z-index:5;
    max-width: 1050px;
    background:var(--color-white);
    border-radius:18px;
    margin-top: -90px;
    padding:45px;
    box-shadow:0 10px 30px rgba(0,0,0,0.15);
}

/* Input Group */

.form-block{
    margin-bottom:30px;
}

.input-wrapper{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.icon-box-reg{
    width:72px;
    height:72px;
    min-width:72px;
    border-radius:14px;
    background:var(--color-cyan-bg-light);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:var(--color-icon-blue);
}

/* Field icon inside a form row: match the height of the control and drop it by
   the label's height so the tile and the input share a top and bottom edge.
   Without this the 72px tile starts level with the label and ends halfway down
   the field, which reads as misaligned. */
.input-wrapper > .icon-box-reg{
    width:55px;
    min-width:55px;
    height:55px;
    font-size:24px;
    margin-top:39px; /* .form-label -> 18px x 1.5 line-height + 12px margin */
}

.form-label{
    font-size:18px;
    font-weight:600;
    line-height:1.5;
    color:var(--color-label-purple);
    margin-bottom:12px;
}

/* Inputs */

.custom-input,
.custom-select{
    height:55px;
    border-radius:14px;
    border:1px solid var(--color-border-light);
    font-size:16px;
    padding:10px 18px;
    line-height:1.4;
    box-shadow:none !important;
}

/* Native select: keep the selected option (e.g. "SAUDI ARABIA - 966") fully
   visible. Reserve room for the dropdown arrow and ellipsize on narrow
   screens instead of hard-clipping the country code/name. */
.custom-select{
    padding-inline-end:38px;
    text-overflow:ellipsis;
}

.custom-input:focus,
.custom-select:focus{
    border-color:var(--color-sky-blue);
}

/* OTP Button */

/* The login button is an <a>, so the link underline/colour have to be cleared. The
   longer "Resend Code" / "Resend OTP" label must stay on one line and keep the same
   55px height as the field next to it, hence nowrap and the tighter side padding. */
.otp-btn{
    height:55px;
    border:none;
    border-radius:14px;
    background:var(--color-sky-blue);
    color:var(--color-white);
    font-size:16px;
    font-weight:600;
    padding:0 16px;
    white-space:nowrap;
    text-decoration:none;
    transition:.3s;
}

.otp-btn:hover,
.otp-btn:focus{
    background:var(--color-btn-blue-hover);
    color:var(--color-white);
    text-decoration:none;
}

/* Submit */

.submit-btn{
    border:none;
    background:var(--color-sky-blue);
    color:var(--color-white);
    height:55px;
    min-width:250px;
    border-radius:60px;
    font-size:18px;
    font-weight:600;
    transition:.3s;
}

.submit-btn:hover{
    background:var(--color-btn-blue-hover);
}

/* Small Text */

.form-note{
    margin-top:5px;
    color:var(--text-muted);
    font-size:14px;
}

/*--img---*/
.org-chart-card img
{    object-fit: cover;
    transition: .5s;}

.org-chart-card:hover img{
    transform:scale(1.01);
}

/* Modal */

.image-modal .modal-content{
    background:transparent;
    border:none;
}

/* Modal Image */

.modal-image{
    width:100%;
    border-radius:18px;
}

/* Close Button */

.btn-close{
    position:absolute;
    top:-10px;
    right:-10px;
    background-color:var(--color-white);
    opacity:1;
    border-radius:50%;
    padding:12px;
}

/* OVERLAY */

.glightbox{
    position:relative;
    display: block;
}
.glightbox:hover .gallery-overlay
 {
    opacity: 1;
}
.gallery-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.75),
        rgba(0,0,0,.15)
    );

    opacity:0;
    transition:.4s;

    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-card:hover .gallery-overlay{
    opacity:1;
}

/* ICON */

.zoom-btn{
    width:85px;
    height:85px;
    border-radius:50%;
    background:rgba(255,255,255,.20);
    backdrop-filter:blur(8px);

    display:flex;
    align-items:center;
    justify-content:center;

    color:var(--color-white);
    font-size:34px;

    transform:scale(.7);
    transition:.4s;
}

.gallery-card:hover .zoom-btn{
    transform:scale(1);
}

/* FILTER */

.filter-wrapper{
    margin-top:-40px;
    position:relative;
    z-index:10;
}

.filter-box{
    background:var(--color-white);
    border-radius:24px 24px 0 0;
    padding:18px;
    border:1px solid var(--light-cyan);
}

.filter-btn{
    border:none;
    background:transparent;
    padding:14px 24px;
    border-radius:14px;
    font-weight:600;
    color:var(--color-charcoal-light);
    transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{
    background:var(--color-blue-darker);
    color:var(--color-white);
}
/* NEWS CARD */

.news-card{
    background:var(--color-white);
    border-radius:0px;
    overflow:hidden;
    margin-bottom:0px;
    transition:.3s;
    border: 1px solid var(--light-cyan);
}
.news-card:first-child
{
    border-radius: 28px 28px 0 0 !important;
}
.news-card:last-child
{
    border-radius: 0 0 28px 28px !important;
}


.news-card:hover{
    transform:translateY(-5px);
}

.news-header{
    padding:30px;
    cursor:pointer;
}

.news-date{
      text-align: center;
    font-size: 13px;
    color: var(--color-grey);
    font-weight: 700;
}
.news-category{
    display:inline-block;
    padding:7px 16px;
     background:var(--light-cyan);
    color:var(--color-social);
    font-size:12px;
    font-weight:700;
    border-radius: 30px;
    margin-bottom:15px;
    text-transform: uppercase;
}

.news-header h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
    line-height:1.3;
}

.news-header p{
    color:var(--color-grey-medium);
    line-height:1.9;
    margin-bottom:15px;
}

.read-more{
    color:var(--color-social);
    text-decoration:none;
    font-weight:700;
    display: none;
}
.news-header.collapsed .read-more
{display: block;}

.news-image{
    position:relative;
    overflow:hidden;
    border-radius:20px;
}

.news-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.4s;
}

.news-card:hover img{
    transform:scale(1.06);
}

.arrow-btn{
    position:absolute;
    right:20px;
    bottom:20px;
    width:60px;
    height:60px;
    border-radius:50%;
    background:var(--color-white);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-arrow-blue);
    font-size:22px;
    box-shadow:0 10px 20px rgba(0,0,0,0.12);
}

/* COLLAPSE */

p{
    color:var(--color-grey-dark);
    line-height:2;
    font-size:15px;
}

/* TABLE */

.table-card{
    background:var(--color-white);
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,0.05);
}

.table thead{
    background:linear-gradient(90deg,var(--color-table-grad-1),var(--color-table-grad-2));
    color:var(--color-white);
}

.table th{
    padding:18px;
    border:none;
    font-weight:600;
}

.table td{
    padding:16px 18px;
    vertical-align:middle;
}

.table tbody tr:hover{
    background:var(--color-bg-note);
}

.type-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-weight:600;
}

.type-badge i{
    color:var(--color-badge-blue);
}

/*--------envoinment----------------*/
.image-wrapper{
    position:relative;
    z-index:2;
}

.main-image{
    border-radius:35px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.12);
}

.main-image img{
    width:100%;
    height:auto;
    object-fit:cover;
}

.small-image{
    position:absolute;
    left:-30px;
    bottom:-40px;
    width:55%;
    border-radius:28px;
    overflow:hidden;
    border:10px solid var(--color-white);
    box-shadow:0 15px 40px rgba(0,0,0,.15);
}

.small-image img{
    width:100%;
    height:auto;
    object-fit:cover;
}
.bottom-note{
    background:var(--color-bg-note);
    border-radius:30px;
    padding:35px;
    margin-top:40px;
    position:relative;
    z-index:2;
}

.bottom-note i{
    width:80px;
    height:80px;
    border-radius:50%;
    background:var(--color-white);
    display:flex;
    align-items:center;
    justify-content:center;
    color:var(--color-icon-bright-blue);
    font-size:34px;
    margin-bottom:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.06);
}

.bottom-note p{
    color:var(--color-text-navy);
    font-size:16px;
    line-height:2;
    margin:0;
}
/**/
.press-clips-box, .press-clips-box a
{ min-height: 275px; max-height: 275px; overflow: hidden;}

/* CARDS */
.mission-card{
    border-radius:25px;  padding:30px;
    height:100%; position:relative;  overflow:hidden;  transition:.4s;  box-shadow:0 10px 35px rgba(0,0,0,.08);
}
.mission-card:hover{ transform:translateY(-10px);}
.vision-icon{
    background:linear-gradient(135deg,var(--color-grad-blue-start),var(--color-grad-blue-end));}
.mission-icon2{
    background:linear-gradient(135deg,var(--color-grad-teal-start),var(--color-grad-teal-end));}
.mission-card h3{ font-size:25px;  font-weight:700;  margin-bottom:5px; }
.mission-card p{  line-height:1.9;  font-size:17px;}
/* WATER BG */
.water-bg{  position:absolute;  bottom:-40px; right:-40px; font-size:220px;  color:var(--accent-cyan);  opacity: 0.1;}

/*--------------*/
.sub-page-content ul{margin: 0; padding: 0;}
.sub-page-content ul li{padding-left: 40px;
    color: var(--text-dark); list-style: none;
    background-image: url(../img/ul-li.svg);  background-repeat: no-repeat;
    background-position: 7px 4px; margin-bottom: 10px; background-size: 18px; }
 .sub-page-content p a{ font-size: 16px; font-weight: 700; color: var(--primary-navy); text-decoration: none;}   
 .order-now-btn{min-width:110px;}
  /* SECTION */
   /* CARDS */
  .location-card {
    border-radius: 18px !important;
    border: 1px solid rgba(10,37,64,0.07) !important;
    box-shadow: 0 4px 20px rgba(10,37,64,0.07) !important;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    height: 100%;
  }
  .location-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 40px rgba(10,37,64,0.14) !important;
  }
  .card-top {
    background: var(--color-card-bg-2);
    padding: 22px 24px 20px;
    position: relative;
    overflow: hidden;
  }
  .card-top::after {
    content: '';
    position: absolute; top: -30px; right: -30px;
    width: 110px; height: 110px; border-radius: 50%;
    background: rgba(0,180,216,0.1);
  }
  .card-top::before {
    content: '';
    position: absolute; bottom: -20px; right: 40px;
    width: 65px; height: 65px; border-radius: 50%;
    background: rgba(36,150,212,0.07);
  }
  .card-num {
    font-size: 10px; font-weight: 700; letter-spacing: 0.18em;
    color: var(--sawaco-accent); text-transform: uppercase;
    margin-bottom: 6px; position: relative;
  }
  .card-title-text {
    font-size: 19px; font-weight: 700; color: var(--color-white);
    line-height: 1.25; position: relative;
  }
  .card-badge-hq {
    display: inline-block; margin-top: 9px;
    background: rgba(201,168,76,0.22); color: var(--sawaco-gold);
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 3px 11px; border-radius: 10px;
    position: relative;
  }
  .card-badge-plant {
    display: inline-block; margin-top: 9px;
    background: rgba(0,180,216,0.18); color: var(--sawaco-accent);
    font-size: 9px; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 3px 11px; border-radius: 10px;
    position: relative;
  }
  .info-icon-wrap {
    width: 36px; height: 36px; min-width: 36px;
    background: var(--light-cyan); border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--sawaco-mid); font-size: 16px;
  }
  .info-label { font-size: 10px; font-weight: 700; color: var(--color-sawaco-label); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2px; }
  .info-value { font-size: 13.5px; color: var(--sawaco-dark); line-height: 1.55; }
  .info-value a { color: var(--sawaco-mid); text-decoration: none; }
  .info-value a:hover { color: var(--sawaco-accent); }
   /* CTA STRIP */
  .cta-strip {
    background: var(--sawaco-dark);
    border-radius: 22px;
    padding: 52px 60px;
    position: relative;
    overflow: hidden;
  }
  .cta-strip::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 300px; height: 300px; border-radius: 50%;
    background: rgba(0,180,216,0.07);
  }
  .cta-title { font-size: 34px; font-weight: 700; color: var(--color-white); line-height: 1.2; }
  .cta-sub { font-size: 14.5px; color: rgba(255,255,255,0.5); font-weight: 300; }
  .btn-cta-primary {
    background: var(--sawaco-accent);
    color: var(--color-white); border: none;
    padding: 13px 28px; border-radius: 50px;
    font-size: 14px; font-weight: 600;
    box-shadow: 0 8px 24px rgba(0,180,216,0.3);
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-cta-primary:hover { background: var(--color-cta-hover); color: var(--color-white); transform: translateY(-1px); }
  .btn-cta-outline {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.8);
    border: 1px solid rgba(255,255,255,0.15);
    padding: 13px 28px; border-radius: 50px;
    font-size: 14px; font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
  }
  .btn-cta-outline:hover { background: rgba(255,255,255,0.12); color: var(--color-white); }
    /*--09JUN2026------*/
  .owl-carousel.owl-drag .owl-item{margin-bottom:10px !important;}
.plant-title-tag { text-decoration: underline;text-decoration-color: #3fa9f5;}
.news-section-home .card img{width: 100%;}

 /* Error Message */
 .ErrorMsgCls {
    color: #ff0000 !important;
    display: block;
    margin-top: 5px;
    background-color: #ffb2b2;
    border: 1px solid red;
    padding: 10px;
    border-radius: 10px;
}
.news-card .news-body a
{    color: var(--color-social);
    text-decoration: none;
    font-weight: 700;}

/* Order status palette */
.status-badge {
    color: #fff;
}

.status-ordered {
    background-color: #29ABE2;
}

/* Kept distinct from Ordered (#29ABE2) so the two dashboard cards don't read as the same tile */
.status-assigned {
    background-color: #6F42C1;
}

.status-scheduled {
    background-color: #4D8CA6;
}

.status-ontheway,
.status-rescheduled {
    background-color: #F5A642;
}

.status-delivered {
    background-color: #006400;
}

.status-cancelled {
    background-color: #FF3B30;
}