/* ===== FORCE RESET ===== */
html, body {
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
/* ===== SMOOTH SCROLL ===== */
html {
  scroll-behavior: smooth;
}
/* GLOBAL RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}
/* =========================== 
   RESET AND BASE STYLES
=========================== */
:root {--amethyst: #7e22ce;--orange: #ffcc99;}
/* ===========================
   HEADER
=========================== */
header {
  background: var(--amethyst);  /* purple */
  width: 100%; 
  position: fixed;   /* important */
  top: 0;
  left: 0;
  z-index: 9999; /*  always above video */
}
body {
  padding-top: 80px; /* adjust to your header height */
}
.navbar {
  max-width: 1200px;
  margin: auto;
  padding: 25px 30px;   /* ⬅increased from 15px */
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 🚫 STOP ALL LINK UNDERLINES EVERYWHERE */
a,
a:hover,
a:focus,
a:active,
a:visited {
  text-decoration: none !important;
}
/* LOGO */
.logo img {height: 48px;}
/* ===========================
   NAVIGATION
=========================== */
.nav-links,
.nav-links ul,
.dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}
.nav-links {
  display: flex;
  gap: 15px;
   margin-left: 20px;   /*  creates space from logo */
}
.nav-links li {
  position: relative;
}
.nav-links a {
  color: white;
  text-decoration: none;
  padding: 8px;
  transition: color 0.3s ease;
  font-weight: bold;
}
.nav-links a:hover {
  color: #FF6600;
}
/* ===========================
   DESKTOP DROPDOWN
=========================== */
@media (min-width: 901px) {
  .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #0b2f4a;
    min-width: 250px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    padding: 10px 0;
    z-index: 1000;
  }
  .dropdown-menu li a {
    display: block;
    padding: 14px 20px;
    font-size: 15px;
    color: #ffffff;
    border-bottom: 1px solid #ff6600;
  }
  .dropdown-menu li a:hover {
    background: #ffffff;
  }
  .dropdown:hover .dropdown-menu {
    display: block;
  }
  .dropdown > a {
    position: relative;
    padding-right: 22px;
  }
  .dropdown > a::after {
    content: "▼";
    font-size: 11px;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease;
  }
  .dropdown:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
  }
}
/* ===========================
   MOBILE MENU 
=========================== */
@media (max-width: 900px) {
  .nav-links {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    background: #0b2f4a;
    display: flex;
    flex-direction: column;
    transition: left 0.3s ease;
    z-index: 10000;
    padding-top: 0; /* correct fix */
     margin-left: 0;   /*VERY IMPORTANT */
  }
  .nav-links.active {
    left: 0;
  }
  .nav-links li {
    width: 100%;
    border-bottom: 1px solid #ff6600;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 16px;
    color: #fff;
    line-height: 1.2;
  }
  .dropdown {
    width: 100%;
  }
  .dropdown-menu {
    display: none;
    width: 100%;
    background: #0d3e63;
    position: static;
  }
  .dropdown.active .dropdown-menu {
    display: block;
  }
  .dropdown > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .dropdown > a::after {
    content: "▼";
    font-size: 12px;
  }
}
/* ===========================
   HAMBURGER MENU (MOBILE)
=========================== */
/* HAMBURGER */
.hamburger {
  display: none;
}
@media (max-width: 900px) {
  .hamburger {
    display: flex !important;
    width: 30px;
    height: 22px;
    position: relative;
    cursor: pointer;
    z-index: 10001;
    flex-direction: column;
     right: -40px;   /*stick to edge */
  }
}
.hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #fff;
  left: 0;
  transition: all 0.3s ease;
}
/* Lines position */
.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 9px; }
.hamburger span:nth-child(3) { top: 18px; }
/* ANIMATION → X */
.hamburger.active span:nth-child(1) {
  transform: rotate(45deg);
  top: 9px;
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: 9px;
}
/* ===========================
  CLOSE BUTTON X IN MOBILE PAGE
=========================== */
.menu-close {
  display: none;
  position: fixed;
  top: 18px;   /* adjust spacing * /* align inside bar */
  right: 20px;
  font-size: 28px;
  color: #fff;
  cursor: pointer;
  z-index: 10002;
}
/* SHOW ONLY ON MOBILE */
@media (max-width: 900px) {
  .menu-close {
    display: block;
  }
}
/* =================================================================================
   /* ===== HOME LOGO + TEXT (BOLD NAME NEXT TO LOGO) ===== / HOME*
================================================================================= */
.logo-container {
  display: flex;
  align-items: center;
  gap: 10px;              /* space between logo and text */
  text-decoration: none;
}
.logo-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;          /* EXTRA BOLD */
  font-size: 30px;           /* BIGGER */
  color: #ffffff;
  letter-spacing: 0.5px;     /* clean spacing */
   white-space: nowrap;     /* prevents breaking into multiple lines */
}
/* REMOVE LOGO UNDERLINE COMPLETELY */
.logo-container,
.logo-container:hover,
.logo-container:focus,
.logo-container:active {
  text-decoration: none !important;
}

/* ALSO PROTECT THE TEXT INSIDE */
.logo-container .logo-text {
  text-decoration: none !important;
  color: #ffffff;
}
/* Responsive tweak */
@media (max-width: 768px) {
  .logo-text {
    font-size: 20px;
  }
}
/* This is the letter R on top of the logo*/
.logo-r {
  font-size: 10px;          /* small size */
  vertical-align: super;    /* pushes it up */
  margin-left: 2px;         /* tiny spacing */
}
.logo-r {
  color: #ffcc99;  /* matches your theme */
}
/* =================================================================================
   /* ===== GHANA AND UK LOGO ON HOME PAGE =====  / HOME*  #7e22ce;
================================================================================= */
.office-location-link {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;   /* THIS pushes it fully right */
}
/* ===== FLAGS CONTAINER ===== */
.country-flags {
  display: flex;
  gap: 6px;
  align-items: center;
}
/* ===== ROUND FLAGS ===== */
.country-flags img {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #fff;
  box-shadow: 0 0 0 1px #ccc;
  cursor: pointer;
  transition: all 0.25s ease;
   opacity: 0.6;  /* faded by default */
   transition: all 0.3s ease;
}
/* ===== HOVER EFFECT ===== */
.country-flags img:hover {
  opacity: 1;                /*  fully visible */
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #7e22ce;
}
/* ================================================================================
   /* ===== / CONTACT  ===== / 
================================================================================= */
/* Dropdown (Select) Styling */   
.contact-form select {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* Custom dropdown arrow */
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}
/* Focus state */
.contact-form select:focus {
  border-color: #9966cc; /* Amethyst */
  outline: none;
  box-shadow: 0 0 0 2px rgba(153, 102, 204, 0.2);
}
/* Disabled option (placeholder) */
.contact-form select option:disabled {
  color: #999;
}
/* =================================================================================
                    SECTION HEADINGS
================================================================================= */
h1, h2, h3, h4, h5, h6 {
  color: var(--amethyst);
}
section {
  padding: 60px 20px;
  max-width: 1200px;
  margin: auto;
}
 /* try or copy this style*/

/* h1, h2, h3,
h4, h5, h6 {
    color: #333;
	margin:0;
    font-weight: normal;
}

h1 { font-size: 28px;}
h2 { font-size: 24px;}
h3 { font-size: 18px;}
h5 { font-size: 16px;}
h6 { font-size: 14px;}

strong {
  letter-spacing: 1px;
}/* 
/* =================================================================================
                      BUTTONS 
================================================================================= */
.btn {
  padding: 12px 25px;
  background: #FF6600;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  transition: 0.3s;
  border: 2px solid #ffffff;   /*  white border added */
  width: fit-content;
}
.btn:hover {
  background: #c91f1f;
}
.btn-outline {
  border: 2px solid #FF6600;
  color: #FF6600;
  padding: 10px 20px;
  border-radius: 5px;
  text-decoration: none;
  transition: 0.3s;
}
.btn-outline:hover {
  background: #FF6600;
  color: #fff;
}
/* =================================================================================
                     BUTTONS MAIN
================================================================================= */
.btn-main {
  padding: 10px 15px;
  background: #FF6600;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  transition: 0.3s;
  border: 1px solid #ffffff;
  width: fit-content;
}
.btn-main:hover {
  background: #c91f1f;
}
/* =================================================================================
  /* ===== CONTACT SECTION ===== *
================================================================================= */
.contact-section {
  max-width: 650px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: 'Montserrat', sans-serif;
}
.contact-form {
  background: #D9D9D9;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border: 5px solid #7e22ce;
}
.contact-form h2 {
  color: #7e22ce;
  margin-bottom: 10px;
}
.contact-form h4 {
  margin-bottom: 25px;
  font-weight: 400;
}
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 18px;
  border: 2px solid #ccb2b2;
  border-radius: 6px;
}
.contact-form button {
  background: #7e22ce;
  color: #fff;
  padding: 14px 28px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
/* Dropdown (Select) Styling */
.contact-form select {
  width: 100%;
  padding: 12px 15px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  background-color: #fff;
  color: #333;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}
/* contact Custom dropdown arrow */
.contact-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
}
/* contact Focus state */
.contact-form select:focus {
  border-color: #9966cc; /* Amethyst */
  outline: none;
  box-shadow: 0 0 0 2px rgba(153, 102, 204, 0.2);
}
/* Disabled option (placeholder) */
.contact-form select option:disabled {
  color: #999;
}
/* ===== MOBILE VERSION ===== */
@media (max-width: 768px) {
  .contact-section {
    margin: 40px auto;       /* ↓ reduce top/bottom spacing */
    padding: 0 15px;
  }
  .contact-form {
    padding: 25px 20px;      /* ↓ less padding */
    border-width: 3px;       /* ↓ thinner border */
  }
  .contact-form h2 {
    font-size: 22px;
  }
  .contact-form h4 {
    font-size: 14px;
    margin-bottom: 15px;
  }
  .contact-form input,
  .contact-form textarea,
  .contact-form select {
    padding: 10px;
    font-size: 14px;
  }
  .contact-form button {
    width: 100%;             /*  full-width button */
    padding: 12px;
    font-size: 14px;
  }
}
/* =================================================================================
   DIRECTORS IMAGE SECTION =====/ Leadership Team*
================================================================================= */
/* TEAM SECTION*/
.team-section {
  background: #ffffff;
  padding: 30px 20px 60px;
  text-align: center;
}
/* TITLE */
.team-title {
  font-size: 36px;
  color: #7e22ce;
  margin-bottom: 40px;
  font-weight: 700;
}
/*GRID*/
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, 350px);
  justify-content: center;   /*  centers the whole grid */
  align-content: center;
  gap: 15px;
}
/*CARD*/
.team-card {
  width: 100%;
 max-width: 350px; /* slightly smaller = tighter layout */
}
/*IMAGE WRAPPER*/
.image-wrapper {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
/* IMAGE (STATIC — NO HOVER EFFECT) */
.image-wrapper img {
  width: 100%;
  height: 370px;
  object-fit: cover;
  display: block;
  border-radius: 0;
  /*  force no movement */
  transform: none !important;
  transition: none !important;
}
/* OVERLAY */
.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(178, 141, 255, 0.9);
  color: #fff;
  padding: 20px;
  font-size: 16px;
  line-height: 1.6;
  border-radius: 0;
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.4s ease;
}
/* SHOW OVERLAY ONLY */
.image-wrapper:hover .overlay {
  transform: translateY(0);
  opacity: 1;
}
/* TEXT BELOW IMAGE */
.team-info {
  margin-top: 15px;
  text-align: left;
}
/* NAME */
.team-info h3 {
  color: #7e22ce;
  font-size: 22px;
  letter-spacing: 1px;
  margin-bottom: 5px;
  text-transform: uppercase;
  font-weight: 700;
    text-align: left;
}
/* ROLE */
.team-info span {
  display: block;
  font-size: 14px;
  color: #333;
  letter-spacing: 1px;
  text-transform: uppercase;
}
/* MOBILE */
@media (max-width: 768px) {
  .team-title {
    font-size: 28px;
  }
  .overlay {
    font-size: 14px;
    padding: 15px;
  }
}
/* =================================================================================
 /* =====  DISCOVER OUR STORY TEXT SECTION =====/ ABOUT
================================================================================= */
.discover-story-section {
  padding: 30px 20px 15px;
  background: #ffffff;
  max-width: 100% !important;   /* FULL WIDTH */
  margin: 0 !important;
  width: 100%;
}
/* CONTAINER */
.discover-story-container {
  max-width: 100% !important;   /* remove width restriction */
  margin: 0 !important;
  padding: 0 20px;              /* keeps side spacing */
}
/* HEADING */
.discover-story-heading {
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
  color: #7e22ce;
}
/* TEXT */
.discover-story-text {
  font-size: 16px;
  line-height: 1.7;
  color: #333;
  margin: 0;
}
/* MOBILE */
@media (max-width: 768px) {
  .discover-story-heading {
    font-size: 26px;
  }
  .discover-story-text {
    font-size: 15px;
  }
}
/* =================================================================================
------------/* Sections *    / about  Leadership Team
================================================================================= */
section { padding: 60px 20px; max-width: 1200px; margin: auto; }
h2 { font-size: 2rem; color:#9063CD; margin-bottom: 30px; text-align: center; }
h3 { font-size: 2rem; color:white; margin-bottom: 3px; text-align: center; }
/* Sections   H5 h6*/
h5 { font-size: 18px; color:#C724B1; margin-bottom: 30px; text-align:center; }
h6 { font-size: 30px; color:#c6ccda; margin-bottom: 30px; text-align:center; }
/* Full Text section*//* Full Text section*//* Full Text section*//* Full Text section*/
.full-text {
  width: 100%;
  margin: 0;
  padding: 5px;
  font-family:  'Montserrat','Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  color: #374151;
}
/* =================================================================================
    LEADERSHIP TEAM TEXT SECTION   /ABOUT / LEADERSHIP TEAM SECTION 
================================================================================= */
/* SECTION */
.about-leadership-section {
  padding: 30px 20px 15px;
  background: #ffffff;
  max-width: 100% !important;
  margin: 0 !important;
  width: 100%;
}
/* CONTAINER (handles LEFT & RIGHT spacing) */
.about-leadership-container {
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 20px;  /*  THIS creates the side spacing */
}
/* KEEP THIS EXACTLY AS YOU WROTE */
.about-leadership-text {
  width: 100%;
  margin: 0;
  padding: 5px;
  font-family: 'Montserrat', 'Segoe UI', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.8;
  color: #374151;
}
/* HEADING */
.about-leadership-heading {
  text-align: center;
  width: 100%;
  font-size: 32px;
  font-weight: 700;
}
/* ==================================================================================== 
   OUR CORE MISSION TEXT SECTION ///////////////  CORE VALUE  
======================================================================================= */
.our-core-mission {
  background: #072c44;
  padding: 25px 15px;
  max-width: 100% !important;   /* FULL WIDTH */
  margin: 0 !important;
  width: 100%;
}
/* CONTAINER */
.core-mission-container {
  max-width: 100% !important;   /* remove 900px limit */
  margin: 0 !important;
  padding: 0 20px;              /* keeps spacing inside */
  text-align: left;
}
/* BLOCK */
.core-block {
  margin-bottom: 20px;
  /* border-left removed */
  padding-left: 0;
}
/* HEADINGS */
.core-block h2 {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff; /* changed to white */
  margin-bottom: 8px;
}
/* TEXT */
.core-block p {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: #ffffff;
}
/* BUTTON */
.core-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  background: #5b1aa3;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 600;
}
.core-btn:hover {
  background: #3d0f73;
}
/* =================================================================================
      /* Services *
================================================================================= */
/* Why Choose Us */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.why-card { background: #C724B1; color: #fff; padding: 20px; border-radius: 10px; text-align: center; }

/* Projects */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-bottom: 20px;  }
.project-card { background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 3px 15px rgba(0,0,0,0.1); transition: 0.3s; }
.project-card img { width: 100%; height: 200px; object-fit: cover; }
.project-card:hover { transform: translateY(-5px); }

/* =================================================================================
  /* THIS FOR LOWER MOVING IMAGES PAGE (Partnership)  --> *
================================================================================= */
.bottom.partnership {background: #f5f5f5; padding: 40px 20px; text-align: center;}
.section-title { font-size: 22px; margin-bottom: 25px; letter-spacing: 2px;}
/* Slider container */
.slider-container { overflow: hidden; width: 100%}
/* Moving track */
.slider-track { display: flex; gap: 40px; animation: scroll-horizontal 20s linear infinite;}
/* Individual item */
.partnership-item { min-width: 200px; text-align: center;}
.partnership-item img { width: 120px; height: auto;margin-bottom: 10px;}
.partnership-item p { font-size: 14px; font-weight: bold;}
/* Animation */
@keyframes scroll-horizontal {0% {transform: translateX(0);} 100% {transform: translateX(-50%);}}
/* =================================================================================
  FADE-IN ANIMATION /  HOME PAGE
================================================================================= */
.fade-in-section {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease-out;
}
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: all 1s ease-out;
  color: white; /* black */
}
.fade-in.delay-1 { transition-delay: 0.3s; }
.fade-in.delay-2 { transition-delay: 0.6s; }
.visible { opacity: 1; transform: translateY(0);}
/* =================================================================================
  /* ===== MAP SECTION ===== *
================================================================================= */
.map-section {
  width: 100%;       /* full viewport width */
  height: 55vh;      /* full viewport height */
  position: relative;
  margin: 0;          /* remove any default margin */
  padding: 0;         /* remove padding */
   max-width: 100%;             /* override global max-width */
}
#map {
  width: 100%;
  height: 100%;       /* fill the map-section completely */
  background-color: #7e22ce;
}
/* Loader */
.map-loader {
  position: absolute;
  inset: 0;
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
}
.map-loader .loader {
  border: 4px solid #e5e7eb;
  border-top: 4px solid #7e22ce;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1.2s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
/* Leaflet popup purple theme */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: #7e22ce;
  color: white;
}
/* =================================================================================
  /* ===== CONTACT AND MAP ===== /OFFICE LOCATION*
================================================================================= */
.contact-section-full {
  width: 100%;                /* full viewport width */
  min-height: 55vh;
  margin: 0;                   /* remove centering margin */
  padding: 60px 10px;          /* optional padding */
  background-color: #C5B4E3;   /* your desired color */
  box-sizing: border-box;
  max-width: 100%;             /* override global max-width */
}
/* Wrapper to center content */
.contact-wrapper {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 50px;
  max-width: 1200px;  /* content width */
  margin: 0 auto;
  flex-wrap: wrap;    /* wrap on smaller screens */
}
/* Contact info box */
.contact-us {
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
  flex: 1 1 400px; /* responsive width */
  min-width: 300px;
}
/* Contact info headings */
.contact-us h5 {
  font-size: 24px;
  color: #7e22ce;
  margin-bottom: 20px;
  text-align: center;
}
.contact-us p {
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Map box */
.map-box {
  flex: 1 1 500px; /* responsive width */
  min-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}
/* Responsive adjustments */
@media (max-width: 900px) {
  .contact-wrapper {
    flex-direction: column;
    align-items: center;
    padding: 40px 10px;
  }
  .contact-us,
  .map-box {
    width: 100%;
    max-width: 400px;
  }
}
/* =================================================================================
/* ===== HERO VIDEO FULL SCREEN ===== *HOME
================================================================================= */
.hero-video {
  position: relative;
  width: 100%;
  height: 100vh;
  max-width: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
/* Video fills entire screen */
.hero-video-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1; /* push video behind everything */
}
/* Text */
.hero-text {
  max-width: 900px;
  padding: 20px;
}
.hero-text h6 {
  font-size: 32px;
  margin-bottom: 25px;
  color: #ffffff;
}

/* =================================================================================
  /* ===== HERO IMAGE FULL SCREEN (FINAL) ===== *
================================================================================= */
.hero-image {
  position: relative;
  width: 100%;
  height: 100vh;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
}
.hero-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
      z-index: 10;        /*  above video */
      color: #fff;        /* text color */
}
.hero-text {
  color: #ffffff;/* ===== texts colour inHERO FULL SCREEN ===== */
  max-width: 900px;/* ===== texts size inHERO FULL SCREEN ===== */
}
/* ======================================================================================================================
  /* ===== HERO IMAGE FULL SCREEN =Services ////AI SERVICES AND SOLUTIONS//CONSTRUCTION MANAGEMENT SERVICES//DATA SERVICES//
======================================================================================================================== */
.hero-banner {
  position: relative;
  width: 100%;
  height: 80vh;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
}
.hero-banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
      z-index: 10;        /*  above video */
      color: #fff;        /* text color */
}
.hero-text {
  color: #ffffff;/* ===== texts colour inHERO FULL SCREEN ===== */
  max-width: 900px;/* ===== texts size inHERO FULL SCREEN ===== */
}
/* =================================================================================
  /* ===== HERO IMAGE FULL SCREEN =Services //BLOGS
================================================================================= */
.hero-blogs {
  position: relative;
  width: 100%;
  height: 83vh;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
}
.hero-blogs img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
}
/* Overlay */
.hero-overlay {
  position: absolute;
  inset: 0;
    display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 20px;
      z-index: 10;        /*  above video */
      color: #fff;        /* text color */
}
.hero-text {
  color: #ffffff;/* ===== texts colour inHERO FULL SCREEN ===== */
  max-width: 900px;/* ===== texts size inHERO FULL SCREEN ===== */
}
/* =================================================================================
   ===== HERO IMAGE FULL SCREEN = PRIVACY & COOKIES POLICY
================================================================================= */

.privacy-cookies-policy{
  position: relative;
  width: 100%;
  height: 25vh;
  padding: 0;
  margin: 0;
  max-width: none;
  overflow: hidden;
}

.privacy-cookies-policy  h1{
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #7e22ce;
}
.privacy-cookies-policy img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100vh;
  object-fit: cover;
   filter: brightness(45%); /* MAKES IMAGE DARKER */
  
}

/* TEXT */
.privacy-cookies-policy .hero-text{
  color: #ffffff;
  max-width: 900px;
}

/* TITLE */
.privacy-cookies-policy .hero-text h6{
  font-size: 55px;
  font-weight: 700;
  margin-bottom: 20px;
  text-transform: uppercase;
}

/* PARAGRAPH */
.privacy-cookies-policy .hero-text p{
  font-size: 18px;
  line-height: 1.7;
  margin-bottom: 30px;
}

/* MOBILE */
@media(max-width:768px){

  .privacy-cookies-policy{
    height: 70vh;
  }

  .privacy-cookies-policy .hero-text h6{
    font-size: 34px;
  }

  .privacy-cookies-policy .hero-text p{
    font-size: 15px;
  }

}
/* =================================================================================
   ===== CAREERS SECTION =====      /////   CAREERS
================================================================================= */
/* HERO */
.careers-hero {
  background: #7e22ce;
  color: white;
  padding: 70px 20px;
  text-align: center;
  max-width: 100% !important;
  margin: 0 !important;
}
/* CAREERS SECTION  */
.careers-section {
  padding: 40px 20px;
  background: #f5f5f5;
  max-width: 1200px;
  margin: auto;
}
/* SEARCH BOX*/
.search-box {
  background: #9e9e9e;
  padding: 25px;
  border-radius: 12px;
  border: 2px solid #ff6600;
  display: flex;
  gap: 15px;
  align-items: flex-start;
  max-width: 800px;
  margin: 0 auto;
}
/* INPUT */
.search-box input {
  padding: 14px 18px;
  border-radius: 6px;
  border: none;
  font-size: 15px;
  height: 48px;
  flex: 1;
}
/* SELECT + CLEAR GROUP*/
.select-group {
  display: flex;
  flex-direction: column; /*  STACK */
  gap: 6px;
  flex: 1;
}
/* SELECT */
.select-group select {
  padding: 14px 18px;
  border-radius: 6px;
  border: none;
  font-size: 15px;
  height: 48px;
}
/* CLEAR BUTTON (FIT TO TEXT) */
.btn-clear {
  display: inline-flex;       /* better control */
  align-items: center;
  justify-content: center;
  padding: 8px 16px;          /*  controls size */
  height: auto;               /*  remove fixed height */
  background: #ff6600;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  width: fit-content;         /* ensures no stretching */
  white-space: nowrap;        /* prevents breaking */
}
/* SEARCH BUTTON */
.btn-search {
  background: #ff6600;
  color: #fff;
  border: none;
  height: 48px;
  padding: 0 22px;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  white-space: nowrap;
}
/* JOB CARD*/
.job-card {
  background: #fff;
  margin: 10px auto;
  padding: 12px 18px;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.12);
  max-width: 800px;
}
.job-card h2 {
  color: #ff6600;
  margin-bottom: 10px;
  text-align: left;
}
.apply-btn {
  display: inline-block;
  background: #ff6600;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-bottom: 10px;
  font-weight: bold;
}
.job-card p {
  font-size: 14px;
  color: #333;
}
.divider {
  margin: 0 10px;
  color: #999;
}
/*MOBILE*/
@media (max-width: 768px) {
  .search-box {
    flex-direction: column;
  }
  .select-group {
    width: 100%;
  }
  .btn-search {
    width: 100%;
  }
}
/* =================================================================================
 ========    JOB DETAIL SECTION ====//  JOB DETAIL
================================================================================= */
.job-detail{
  max-width: 850px;
  margin: 80px auto;
  padding: 50px 35px;
  background: #f0ededf6;
  border-radius: 15px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.08);
  font-family: 'Montserrat', sans-serif;
}
/* JOB TITLE */
.job-detail h1{
  font-size: 42px;
  color: #7e22ce;
  margin-bottom: 10px;
  font-weight: 700;
}
/* META TEXT */
.job-detail .meta{
  font-size: 16px;
  color: #777;
  margin-bottom: 35px;
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}
/* HEADINGS */
.job-detail h3{
  font-size: 24px;
  color: #4b0082;
  margin-top: 30px;
  margin-bottom: 15px;
  font-weight: 600;
}
/* PARAGRAPH */
.job-detail p{
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 15px;
}
/* APPLY BUTTON */
.apply-btn{
  display: inline-block;
  margin-top: 25px;
  background: #7e22ce;
  color: #ffffff;
  padding: 14px 30px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: 0.3s ease;
}
.apply-btn:hover{
  background: #5b17a0;
  color: #ffffff;
}
/* MOBILE */
@media(max-width:768px){
  .job-detail{
    margin: 40px 15px;
    padding: 35px 20px;
  }
  .job-detail h1{
    font-size: 32px;
  }
  .job-detail h3{
    font-size: 20px;
  }
  .job-detail p,
  .job-detail .meta{
    font-size: 15px;
  }
  .apply-btn{
    width: 100%;
    text-align: center;
  }
}
/* =========================================
   EQUAL OPPORTUNITY SECTION
========================================= */
.equal-opportunity{
  max-width: 850px;
  margin: 40px auto;
  padding: 5px 5px;
  background: #f8f5ff;
  border-left: 5px solid #7e22ce;
  border-radius: 10px;
}
.equal-opportunity p{
    margin: 0;
  font-style: italic;
  font-size: 16px;
  line-height: 1.8;
  color: #1f2d4d;
  font-family: Arial, sans-serif;
}
/* MOBILE */
@media(max-width:768px){
  .equal-opportunity{
    margin: 30px 15px;
    padding: 20px;
  }
  .equal-opportunity p{
    font-size: 15px;
  }
}
/* =================================================================================
 ========    APPLY FORM SECTION/////// APPLY 
================================================================================= */
.apply-form{
  max-width: 750px;
  margin: 80px auto;
  padding: 45px 35px;
  background: #f0ededf6;
  border-radius: 15px;
  box-shadow: 0 8px 50px rgba(0,0,0,0.08);
  font-family: 'Montserrat', sans-serif;
}
/* TITLE */
.apply-form h1{
  text-align: center;
  font-size: 38px;
  color: #7e22ce;
  margin-bottom: 35px;
  font-weight: 700;
}
/* FORM */
.apply-form form{
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* INPUTS & TEXTAREA */
.apply-form input,
.apply-form textarea{
  width: 100%;
  padding: 15px 18px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 16px;
  font-family: 'Montserrat', sans-serif;
  transition: 0.3s ease;
  outline: none;
}
/* FOCUS EFFECT */
.apply-form input:focus,
.apply-form textarea:focus{
  border-color: #7e22ce;
  box-shadow: 0 0 0 3px rgba(126,34,206,0.15);
}
/* FILE LABEL */
.apply-form label{
  font-size: 15px;
  font-weight: 600;
  color: #4b0082;
  margin-bottom: -10px;
}
/* FILE INPUT */
.apply-form input[type="file"]{
  padding: 12px;
  background: #f8f5ff;
  border: 1px dashed #7e22ce;
  cursor: pointer;
}
/* TEXTAREA */
.apply-form textarea{
  resize: vertical;
  min-height: 140px;
}
/* BUTTON */
.apply-form button{
  background: #7e22ce;
  color: #ffffff;
  border: none;
  padding: 16px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.3s ease;
}
/* BUTTON HOVER */
.apply-form button:hover{
  background: #5b17a0;
}
/* MOBILE */
@media(max-width:768px){
  .apply-form{
    margin: 40px 15px;
    padding: 35px 20px;
  }
  .apply-form h1{
    font-size: 30px;
  }
  .apply-form input,
  .apply-form textarea,
  .apply-form button{
    font-size: 15px;
  }
}
/* =================================================================================
WHY BISAFA INNOVATION SECTION  //// CAREERS /Why BISAFA Innovation
================================================================================= */
.why-bisafa {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
/* Override global section width ONLY inside this page */
.why-bisafa section {
  max-width: none;
  margin: 0;
}
/*
   HERO
*/
.why-hero {
  text-align: center;
  padding: 100px 20px;
  background: linear-gradient(to right, #7e22ce, #b28dff);
  color: white;
}
/* 
   STATS
*/
.why-stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  background: #fff;
  padding: 60px 20px;
  text-align: center;
}
.stat {
  flex: 1;
  min-width: 220px;
  margin: 20px;
}
.stat i {
  font-size: 40px;
  color: #7e22ce;
  margin-bottom: 10px;
}
.stat h2 {
  font-size: 32px;
  margin: 10px 0;
}
/*
   IMAGE BLOCKS (FULL WIDTH)
*/
.why-image-block {
  position: relative;
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Dark overlay */
.why-image-block::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1;
}
/* Text content */
.overlay-content {
  position: relative;
  z-index: 2;
  color: white;
  text-align: center;
  max-width: 700px;
  padding: 20px;
}
.overlay-content i {
  font-size: 40px;
  margin-bottom: 10px;
  color: #ffcc99;
}
/* 
   TESTIMONIALS (FIXED TEXT COLOR)
 */
.why-testimonials {
  padding: 60px 20px;
  text-align: center;
  background: #f9f9f9;
}
.testimonial {
  background: #fff;
  margin: 20px auto;
  max-width: 600px;
  padding: 25px;
  border-left: 5px solid #7e22ce;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/*  FORCE BLACK TEXT (fix your issue) */
.testimonial p {
  color: #000 !important;
}
/* 
   CTA
*/
.why-cta {
  text-align: center;
  padding: 60px 20px;
  background: #7e22ce;
  color: white;
}
/* 
   MOBILE OPTIMIZATION
*/
@media (max-width: 768px) {
  .why-stats {
    flex-direction: column;
  }
  .why-image-block {
    height: 300px;
  }
  .overlay-content {
    padding: 15px;
  }
}
 /* =================================================================================
/* ===== SUB FOOTER SOCIAL MEDIA ===== *
================================================================================= */
.footer-social a i {
  font-size: 40px;          /* Bigger icons */
  letter-spacing: 5px;      /* Space between icons */
  transition: transform 0.3s ease;
}
.footer-social a:hover i {
  transform: scale(1.2);    /* Grow on hover */
}
/* ===== SUB FOOTER ===== */
.sub-footer {
  background: #b28dff;      /* Light purple background */
  color: white;
  padding: 40px 20px;
}
.sub-footer-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 30px;                /* Space between columns */
  flex-wrap: wrap;           /* Wrap on small screens */
}
.sub-footer-col {
  flex: 1;                   /* Equal width columns */
  min-width: 250px;          /* Prevent columns from getting too small */
}
.sub-footer h4 {
  margin-bottom: 15px;
  font-size: 18px;
}
.sub-footer p,
.sub-footer a {
  font-size: 14px;
  color: white;
  text-decoration: none;
}

.sub-footer ul {
  list-style: none;           /* Remove bullet points */
  padding: 0;
  margin: 0;
}
.sub-footer ul li {
  margin-bottom: 8px;
}
.sub-footer a:hover {
  color: #7e22ce;             /* Orange hover */
  text-decoration: none;      /* Remove underline */
}

 /* =================================================================================
/* ===== FOOTER ===== *
================================================================================= */
footer{
  background: #7e22ce;
  color: #fff;
  padding: 25px 20px;
  text-align: center;
}
/* MAKE FOOTER LINKS WHITE */
footer a{
  color: #ffffff !important;
  text-decoration: none;
}
/* HOVER EFFECT */
footer a:hover{
  color: #da1010 !important;
}

/* =================================================================================
   BISAFA SERVICES BOX DISPLAY SECTION  /HOME
================================================================================= */

.bisafa-services {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  padding: 0 12px;
  margin-top: -95px;   /* overlap hero like Lotusworks */
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 100% !important;
  overflow: hidden;
}

/* CARD */
.service-card {
  flex: 1;
  max-width: 390px;
  min-width: 0;

  background: #f5f5f5;
  border-radius: 18px;
  padding: 0 0 35px;
  text-align: center;
  position: relative;

  border: 1px solid #d9d9d9;

  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

/* IMAGE BOX */
.card-image {
  width: calc(100% - 28px);
  height: 165px;

  margin: 18px auto 65px;
  padding: 0;

  overflow: hidden;
  border-radius: 12px;

  background: #ffffff;
}

/* IMAGE */
.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ICON CIRCLE */
.icon-circle {
  position: absolute;
  top: 155px;
  left: 50%;
  transform: translateX(-50%);

  width: 95px;
  height: 95px;

  background: #f5f5f5;
  border-radius: 50%;

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

  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* ICON */
.icon-circle i {
  color: #7e22ce;
  font-size: 42px;
}

/* TITLE */
.service-card h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;

  color: #222;

  margin: 0 15px 28px;

  white-space: normal;
  overflow: visible;
  text-overflow: unset;
}

/* BUTTON */
.btn-orange {
  display: inline-block;

  background: #ff6600;
  color: #fff;

  padding: 16px 40px;

  font-size: 16px;
  font-weight: 700;

  border-radius: 8px;
  text-decoration: none;
  border: none;
}

/* BUTTON HOVER */
.btn-orange:hover {
  background: #e65c00;
}

/* HERO FIX */
.hero-video {
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* =========================
   LARGE DESKTOP
========================= */
@media (min-width: 1400px) {

  .bisafa-services {
    gap: 22px;
    padding: 0 20px;
  }

}

/* =========================
   LAPTOP
========================= */
@media (min-width: 901px) and (max-width: 1300px) {

  .service-card h3 {
    font-size: 18px;
  }

  .btn-orange {
    padding: 14px 28px;
    font-size: 15px;
  }

}

/* =========================
   MOBILE
========================= */
@media (max-width: 900px) {

  .bisafa-services {
    display: none;
  }

}
/* =================================================================================================
   TESTIMONIAL SECTION     HOME
===================================================================================================== */
.testimonial-area .container {
  max-width: 100%;
}
.testimonial-area {
  background: #0b1a4a;
  padding: 60px 0 0px;   /* reduced bottom space */
  overflow: hidden;
  position: relative;
  z-index: 1;
}
/*  MAKE FEEDBACK VISIBLE */
.testimonial-bg-text {
  position: absolute !important;
  top: 80px !important;
  left: 60px !important;
  font-size: 180px !important;
  font-weight: 800;
  color: transparent !important;
  -webkit-text-stroke: 1px rgba(255,255,255,0.15); /*  stronger so you SEE it */
  opacity: 1 !important;        /*  REMOVE invisibility */
  z-index: 2 !important;        /*  bring ABOVE background */
  pointer-events: none;
  white-space: nowrap;
}
/*  KEEP CONTENT ABOVE */
.testimonial-area .section-tittle,
.testimonial-area .testimonial-caption,
.testimonial-area .testimonial-active {
  position: relative;
  z-index: 5 !important;
}
/* TITLE */
.testimonial-area h2 {
  font-size: 60px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 80px;
  position: relative;
  z-index: 2;
  font-family: 'Oswald', sans-serif;
}
/* CONTENT */
.testimonial-caption {
  max-width: 900px;
  margin: 0 auto;
  color: #bfc6d4;
  position: relative;
  z-index: 2;
}
/* QUOTE ICON */
.testimonial-top-cap svg {
  margin-bottom: 25px;
}
/* TEXT */
.testimonial-top-cap p {
  font-size: 18px;
  line-height: 1.9;
}
/* FOUNDER */
.testimonial-founder {
  margin-top: 50px;
  display: flex;
  align-items: center;
}
/* ORANGE LINE */
.testimonial-founder::before {
  content: "";
  width: 3px;
  height: 50px;
  background: #ff5e14;
  margin-right: 20px;
}
/* NAME */
.testimonial-founder span {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}
/* ROLE */
.testimonial-founder p {
  color: #8a93a8;
}
/* SLIDER ARROWS */
.testimonial-active .slick-arrow {
  position: absolute;
  bottom: 40px;
  right: 120px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.3);
  color: #ffffff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
.testimonial-active .slick-prev {
  right: 190px;
}
/* ===== AVATAR ===== */
.testimonial-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 15px;
  object-fit: cover;
  border: 2px solid #ff5e14;
}
/* ALIGN */
.testimonial-founder {
  display: flex;
  align-items: center;
}
/* ===== ANIMATION (ENTRANCE) ===== */
.slick-slide {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}
.slick-active {
  opacity: 1;
  transform: translateY(0);
}
/* ===== SOFT SCALE EFFECT ===== */
.single-testimonial {
  transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.slick-current .single-testimonial {
  transform: scale(1.03);
  box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}
/* ===== PARALLAX BACKGROUND ===== */
.testimonial-area {
  background: linear-gradient(135deg, #0b1a4a, #1a2a6c);
  background-size: 200% 200%;
  animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/*MOBILE RESPONSIVE TESTIMONIAL  */
@media (max-width: 768px) {
  /* TESTIMONIAL */
  .testimonial-area {
    padding: 60px 15px;
    text-align: center;
  }
  .testimonial-area h2 {
    font-size: 26px;
    margin-bottom: 40px;
    text-align: center;
  }
  .testimonial-caption {
    padding: 0 10px;
    text-align: center;
  }
  .testimonial-top-cap p {
    font-size: 15px;
    line-height: 1.6;
  }
  .testimonial-founder {
    justify-content: center;
    text-align: center;
  }
  .testimonial-founder::before {
    display: none;
  }
  .testimonial-bg-text {
    display: none;
  }
  .testimonial-active .slick-arrow {
    bottom: 10px;
    right: 10px;
    width: 35px;
    height: 35px;
  }
  /* LATEST NEWS */
  .latest-news-area {
    padding: 60px 15px;
  }
  .news-caption {
    padding: 20px;
  }
  .news-caption h2 {
    font-size: 18px;
  }
  /* SECTION TITLE */
  .section-tittle .front-text h2 {
    font-size: 36px;
    text-align: center;
  }
  .section-tittle .back-text {
    display: none;
  }
}
/* =================================================================================
   LATEST NEWS SECTION   HOME
================================================================================= */
.latest-news-area {
  padding: 120px 0;
  background: #f7f7f7;
}
/* CARD */
.single-news {
  overflow: hidden;
}
/* IMAGE */
.news-img {
  width: 100%;
  height: auto;        /*  remove fixed height */
  overflow: hidden;
}
.news-img img {
  width: 100%;
  height: auto;        /* keep full image */
  object-fit: contain; /*  show full image, no crop */
  display: block;
}
/* DATE BADGE */
.news-date {
  position: absolute;
  top: 0;
  left: 0;
  background: #ff5e14;
  color: #ffffff;
  padding: 20px;
  text-align: center;
}
.news-date span {
  font-size: 26px;
  font-weight: bold;
}
/* CONTENT BOX */
.news-caption {
  background: #0b1a4a;
  padding: 40px;
  color: #ffffff;
}
.news-caption ul {
  margin-bottom: 10px;
  padding: 0;
}
.news-caption li {
  list-style: none;
  color: #aaaaaa;
}
.news-caption h2 {
  font-size: 24px;
  margin: 15px 0;
}
.news-caption a {
  color: #ff5e14;
  text-decoration: none;
  font-weight: 600;
}
/* SECTION TITLE (LATEST NEWS HEADING STYLE)*/
.section-tittle {
  position: relative;
  margin-bottom: 80px;
}
/* MAIN TITLE */
.section-tittle .front-text h2 {
  font-size: 80px;
  font-weight: 900;
  color: #0b1a4a;
  text-transform: uppercase;
  letter-spacing: 2px;
  position: relative;
  z-index: 2;
}
/* BACKGROUND TEXT */
.section-tittle .back-text {
  position: absolute;
  top: -30px;
  left: 0;
  font-size: 140px;
  font-weight: 900;
  color: transparent;
  /*  DARKER HERE */
  -webkit-text-stroke: 1px rgba(11, 26, 74, 0.18);
  z-index: 1;
  pointer-events: none;
}
@media (max-width: 768px) {
  /* SECTION */
  .latest-news-area {
    padding: 60px 15px;
  }
  /* CARD SPACING */
  .single-news {
    margin-bottom: 25px;
    border-radius: 12px;
    overflow: hidden;
  }
  /* IMAGE */
  .news-img {
    height: 220px; /*  smaller for mobile */
  }
  /* DATE BADGE */
  .news-date {
    padding: 10px;
  }
  .news-date span {
    font-size: 18px;
  }
  .news-date p {
    font-size: 12px;
  }
  /* CONTENT */
  .news-caption {
    padding: 20px;
  }
  .news-caption h2 {
    font-size: 18px;
    line-height: 1.4;
  }
  .news-caption li {
    font-size: 13px;
  }
  .news-caption a {
    font-size: 14px;
  }
  /* TITLE */
  .section-tittle {
    margin-bottom: 40px;
    text-align: center;
  }
  .section-tittle .front-text h2 {
    font-size: 32px;
    letter-spacing: 1px;
  }
  .section-tittle .back-text {
    display: none; /* remove big background text on mobile */
  }
}
.testimonial-area,
.latest-news-area {
  width: 100%;
}
.testimonial-area .container,
.latest-news-area .container {
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/*================================================================================= 
VIEW OUR CAREERS, MEET OUR TEAM, CASE STUDIES ///HOME 
================================================================================= */ 
.cta-section { 
  background: #f2f2f2;
   padding: 35px 20px;
    font-family: 'Poppins', sans-serif;
     margin-top: -60px;
      display: flex; /* center everything */ 
      justify-content: center; 
      max-width: 100% !important;
       margin: 0 !important; 
      } 
      /* CENTERED CONTAINER */ 
      .cta-container {
         display: flex; 
         justify-content: center;
          gap: 30px; 
          flex-wrap: wrap;
           max-width: 1200px;
        
    /* KEY FIX */ 
    width: 100%; 
    margin: 0 auto; /* ensures true center */
   } 
   /* CARD */ 
   .cta-card { 
    background: #f37021; 
    color: white; 
    text-decoration: none;
     width: 360px;
      height: 65px; 
      border-radius: 10px; 
      padding: 0 25px; 
      display: flex; 
      align-items: center; 
      justify-content: space-between; 
    } 
    /* LEFT SIDE */ 
    .cta-left { 
      display: flex;
       align-items: center;
        gap: 18px;
       } 
       /* ICON */ 
       .cta-icon { 
        width: 38px;
         height: 38px; 
         stroke-linecap: round;
       stroke-linejoin: round; 
      } 
      /* TEXT */
     .cta-left span { 
      font-size: 18px; 
      font-weight: 600;
       letter-spacing: 0.5px; 
      } 
      /* ARROW */ 
      .cta-arrow { 
        width: 40px;
         height: 40px; 
         opacity: 0.9; 
        }
         /* MOBILE */ 
         @media (
          max-width: 900px
          ) 
          { .cta-card 
            { 
            width: 100%;
             max-width: 500px;
             } } 
             /* Kill ALL link hover effects inside CTA */
              .cta-card, 
              .cta-card:link,
               .cta-card:visited,
                .cta-card:hover, 
                .cta-card:active, 
                .cta-card:focus { 
                color: #fff !important;
                 text-decoration: none !important; 
                 background: #f37021 !important; 
                 outline: none !important; } 
        /* Remove underline specifically from text */ 
        .cta-card span {
         text-decoration: none !important; 
         color: #fff !important; } 
      /* Stop any hover coming from parent/global styles */ 
      .cta-card:hover span { 
        text-decoration: none !important; 
        color: #fff !important; }
       /* Remove animations */ 
       .cta-card, .cta-card * { 
        transition: none !important;
         transform: none !important; }
 
/*======================================================================================================
/* ===== BISAFA INNOVATION SERVICE'' ((WHAT WE DO)) ''SECTION SHOWCASE LIST =====  HOME ONLY
=========================================================================================================*/

/*======================================================================================================
/* ===== BISAFA INNOVATION SERVICE'' ((WHAT WE DO)) ''SECTION SHOWCASE LIST =====  HOME ONLY
=========================================================================================================*/
.what-we-do {
  display: flex;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* ===== LEFT SIDE ===== */
.what-left {
  flex: 1;
  background: #0b2f4a;
  color: #fff;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ORANGE LINE */
.what-left::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}

/* HIGHLIGHT WORDS */
.what-left span {
  color: #ff6600;
  font-weight: 700;
}


/* DOT */
.what-left::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* HEADER COLOR FIX */
.what-left h2 {
  color: #7e22ce;
}
/* ===== RIGHT SIDE IMAGE ===== */
.what-right {
  flex: 1;
}
.what-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== About BISAFA Innovation SECTION ===== HOME */
.about-section {
 display: flex;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* ===== LEFT IMAGE ===== */
.about-left {
  flex: 1;
}
.about-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== RIGHT TEXT ===== */
.about-right {
  flex: 1;
  background: #0b2f4a;
  color: #fff;
  padding: 60px;
  padding-left: 50px; /* FIXED ALIGNMENT */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ORANGE LINE */
.about-right::before {
  content: "";
  position: absolute;
  left: 20px; /* FIXED ALIGNMENT */
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.about-right::after {
  content: "";
  position: absolute;
  left: 16px; /* FIXED ALIGNMENT */
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* TEXT */
.about-right h2 {
  color: #7e22ce; /* REQUIRED COLOR */
  font-size: 36px;
  margin-bottom: 20px;
}
.about-right p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
}
.about-right span {
  color: #ff6600;
  font-weight: bold;
}

/* ===== BISAFA INNOVATION WAY SECTION ===== HOME */
.bisafa-way {
  display: flex;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* LEFT TEXT */
.bisafa-left {
  flex: 1;
  background: #0b2f4a;
  color: #fff;
  padding: 60px;
  padding-left: 50px; /* FIXED ALIGNMENT */
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ORANGE LINE */
.bisafa-left::before {
  content: "";
  position: absolute;
  left: 20px; /* FIXED ALIGNMENT */
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.bisafa-left::after {
  content: "";
  position: absolute;
  left: 16px; /* FIXED ALIGNMENT */
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* TEXT */
.bisafa-left h2 {
  color: #7e22ce; /*  REQUIRED COLOR */
  font-size: 36px;
  margin-bottom: 20px;
}
.bisafa-left p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 15px;
}
.bisafa-left span {
  color: #ff6600;
  font-weight: bold;
}
/* RIGHT IMAGE */
.bisafa-right {
  flex: 1;
}
.bisafa-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* FORCE SAME WIDTH*/
.what-left,
.what-right,
.about-left,
.about-right,
.bisafa-left,
.bisafa-right {
  flex: 0 0 50%;
  max-width: 50%;
}

/*ITLES TO LEFT + MAKE BOLD*/

/* WHAT WE DO */
.what-left h2 {
  text-align: left;
  font-weight: 600;
  font-size: 38px;
  margin-bottom: 25px;
}
/* ABOUT BISAFA INNOVATION */
.about-right h2 {
  text-align: left;
 font-weight: 600;
  font-size: 38px;
  margin-bottom: 25px;
}

/* BISAFA INNOVATION WAY */
.bisafa-left h2 {
  text-align: left;
  font-weight: 600;
  font-size: 38px;
  margin-bottom: 25px;
}

/* MOBILE (FIXED FOR ALL SECTIONS)*/
@media (max-width: 900px) {
  .what-we-do,
  .about-section,
  .bisafa-way {
    flex-direction: column;
  }
  .what-left,
  .what-right,
  .about-left,
  .about-right,
  .bisafa-left,
  .bisafa-right {
    flex: 100%;
    max-width: 100%;
  }
    /* TEXT SECTION */
  .what-left,
  .about-right,
  .bisafa-left {
    order: 1;
    padding: 35px 25px;
  }
    /* IMAGE SECTION */
  .what-right,
  .about-left,
  .bisafa-right {
    order: 2;
    height: auto;
  }
  /* LINE POSITION MOBILE */
  .what-left::before,
  .about-right::before,
  .bisafa-left::before {
    left: 10px;
  }
  .what-left::after,
  .about-right::after,
  .bisafa-left::after {
    left: 8px;
  }
}
/*REMOVE ALL GAPS */
.what-we-do,
.about-section,
.bisafa-way {
  margin: 0 !important;
  padding: 0 !important;
}
section {
  margin: 0;
  padding: 0;
}
/*  DESKTOP CENTER FIX */
@media (min-width: 901px) {
  .bisafa-services {
    justify-content: center;   /*  centers cards */
    overflow-x: visible;       /* removes scroll */
    flex-wrap: wrap;           /* allows proper centering */
  }
}
/* LARGE DESKTOP (CENTER EVERYTHING) */
@media (min-width: 1200px) {
  .bisafa-services {
    justify-content: center;   /* center cards */
    flex-wrap: wrap;           /*  allow centering */
    overflow-x: visible;       /* remove scroll */
  }
}
/* SMALL DESKTOP / LAPTOP (ONE LINE) */
@media (min-width: 901px) and (max-width: 1199px) {
  .bisafa-services {
    justify-content: center;   /* keep centered */
    flex-wrap: nowrap;         /* FORCE single row */
    overflow-x: auto;          /*  allow scroll if needed */
  }
}
/* MOBILE (KEEP YOUR ORIGINAL) */
@media (max-width: 900px) {
  .bisafa-services {
    justify-content: flex-start; /*  natural scroll */
    overflow-x: auto;
  }}
/* ==============================================================================================
/* ===== BISAFA INNOVATION ABOUT (SERVICE SHOWCASE )SERVICES AND TEXT SECTION ===== //  ABOUT 
============================================================================================= */
.About-Services {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* ===== LEFT SIDE ===== */
.About-left {
  flex: 1;
  background: #ffffff;
  color: #222;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ===== RIGHT SIDE ===== */
.About-right {
  flex: 1;
}
/* FORCE 50/50 */
.About-left,
.About-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ORANGE LINE */
.About-left::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.About-left::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* HEADER */
.About-left h2 {
  color: #7e22ce;
}
/* IMAGE */
.About-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== DOWN === ABOUT LIST SECTION ===== */
.About-List-section {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* LEFT IMAGE */
.AboutList-left {
  flex: 1;
}
.AboutList-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* RIGHT TEXT */
.AboutList-right {
  flex: 1;
  background: #ffffff;
  color: #222;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* FORCE 50/50 */
.AboutList-left,
.AboutList-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ORANGE LINE */
.AboutList-right::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.AboutList-right::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* HEADER */
.AboutList-right h2 {
  color: #7e22ce;
}
/* MOBILE SECTION */
/* MOBILE SECTION */
@media (max-width: 768px) {

  /* ABOUT SERVICES */
  .About-Services {
    flex-direction: column;
  }

  .About-left,
  .About-right {
    flex: 100%;
    max-width: 100%;
  }

  /* TEXT SECTION */
  .About-left {
    order: 1;
    padding: 35px 25px;
  }

  /* IMAGE SECTION */
  .About-right {
    order: 2;
    height: auto;
  }

  /* ABOUT LIST */
  .About-List-section {
    flex-direction: column;
  }

  .AboutList-left,
  .AboutList-right {
    flex: 100%;
    max-width: 100%;
  }

  /* TEXT SECTION */
  .AboutList-right {
    order: 1;
    padding: 35px 25px;
  }

  /* IMAGE SECTION */
  .AboutList-left {
    order: 2;
    height: auto;
  }

}
/* ============================================================================================== */
/* ===== BISAFA SERVICE DISPLAY /* ===== MAIN SECTION / SERVICES 
/* ============================================================================================== */
/* ===== MAIN SECTION ===== */
.service-display {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* ===== LEFT SIDE ===== */
.service-display-left {
  flex: 1;
  background: #0b2f4a;
  color: white;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ===== RIGHT SIDE ===== */
.service-display-right {
  flex: 1;
}
/* ===== FORCE 50/50 ===== */
.service-display-left,
.service-display-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ===== ORANGE LINE ===== */
.service-display-left::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* ===== DOT ===== */
.service-display-left::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* ===== HEADER ===== */
.service-display-left h2 {
  color: #7e22ce;
}
/* ===== IMAGE ===== */
.service-display-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== REVERSED SECTION (LIST STYLE) ===== */
.service-display-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* ===== LEFT IMAGE ===== */
.service-display-list-left {
  flex: 1;
}
.service-display-list-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== RIGHT TEXT ===== */
.service-display-list-right {
  flex: 1;
  background: #0b2f4a;
  color: white;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* ===== FORCE 50/50 ===== */
.service-display-list-left,
.service-display-list-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ===== ORANGE LINE ===== */
.service-display-list-right::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* ===== DOT ===== */
.service-display-list-right::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* ===== HEADER ===== */
.service-display-list-right h2 {
  color: #7e22ce;
}/* ===== MOBILE (TEXT UP / IMAGE DOWN) ===== */
@media (max-width: 768px) {
  /* =========================
     SERVICE DISPLAY SECTION
  ========================= */
  .service-display {
    flex-direction: column;
  }
  .service-display-left,
  .service-display-right {
    flex: 100%;
    max-width: 100%;
  }
  /* TEXT FIRST */
  .service-display-left {
    order: 1;
    padding: 35px 25px;
  }
  /* IMAGE SECOND */
  .service-display-right {
    order: 2;
    height: auto;
  }
  .service-display-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* =========================
     SERVICE LIST SECTION
  ========================= */
  .service-display-list {
    flex-direction: column;
  }
  .service-display-list-left,
  .service-display-list-right {
    flex: 100%;
    max-width: 100%;
  }
  /* TEXT FIRST */
  .service-display-list-right {
    order: 1;
    padding: 35px 25px;
  }
  /* IMAGE SECOND */
  .service-display-list-left {
    order: 2;
    height: auto;
  }
  .service-display-list-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}
/* ======================================================================================================
/* ===== BISAFA INNOVATION SERVICE SHOWCASE LIST ===== FOR ALL THE SERVICE / DROP-DOWN SECTION
=========================================================================================================*/
.service-showcase {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* LEFT TEXT */
.service-left {
  flex: 1;
  background: #ffffff;
  color: #222;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* RIGHT IMAGE */
.service-right {
  flex: 1;
}
/* FORCE 50/50 */
.service-left,
.service-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ORANGE LINE */
.service-left::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.service-left::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* HEADER */
.service-left h2 {
  color: #7e22ce;
}
/* IMAGE */
.service-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* ===== DOWN === SERVICE SHOWCASE LIST  */
.service-showcase-list {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  min-height: 500px;
  max-width: 100% !important;
  margin: 0 !important;
}
/* LEFT IMAGE */
.service-list-left {
  flex: 1;
}
.service-list-left img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* RIGHT TEXT */
.service-list-right {
  flex: 1;
  background: #ffffff;
  color: #222;
  padding: 60px;
  padding-left: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
}
/* FORCE 50/50 */
.service-list-left,
.service-list-right {
  flex: 0 0 50%;
  max-width: 50%;
}
/* ORANGE LINE */
.service-list-right::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 80px;
  bottom: 90px;
  width: 1px;
  background: #ff6600;
}
/* DOT */
.service-list-right::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 77px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* HEADER */
.service-list-right h2 {
  color: #7e22ce;
}
/* MOBILE SECTION */
/* ===== MOBILE (TEXT UP / IMAGE DOWN) ===== */
@media (max-width: 768px) {
  /* =========================
     SERVICE SHOWCASE
  ========================= */
  .service-showcase {
    flex-direction: column;
  }
  .service-left,
  .service-right {
    flex: 100%;
    max-width: 100%;
  }
  /* TEXT FIRST */
  .service-left {
    order: 1;
    padding: 35px 25px;
  }
  /* IMAGE SECOND */
  .service-right {
    order: 2;
    height: auto;
  }
  .service-right img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
  /* =========================
     SERVICE SHOWCASE LIST
  ========================= */
  .service-showcase-list {
    flex-direction: column;
  }
  .service-list-left,
  .service-list-right {
    flex: 100%;
    max-width: 100%;
  }
  /* TEXT FIRST */
  .service-list-right {
    order: 1;
    padding: 35px 25px;
  }
  /* IMAGE SECOND */
  .service-list-left {
    order: 2;
    height: auto;
  }
  .service-list-left img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
  }
}

/* =================================================================================
         /* ===== FAQ  CONSTRUCTION MANAGEMENT SERVICE ===== SERVICES
================================================================================= */
/* ===== FAQ SECTION ===== */
.faq-section {
  background: #d9d9d9;
  padding: 60px 20px;
  text-align: center;

  max-width: 100% !important;   /*  FULL WIDTH */
  margin: 0 !important;
}
/* TITLE */
.faq-title {
  color: #ff6600;
  font-size: 32px;
  margin-bottom: 20px;
  font-weight: bold;
}
/* CONTAINER */
.faq-container {
  max-width: 100% !important;   /*  FULL WIDTH */
  margin: 0 !important;
  padding: 0 40px;
}
/* ITEM */
.faq-item {
  margin-bottom: 15px;
}
/* QUESTION */
.faq-question {
  width: 100%;
  background: #ff6f2c;
  color: #fff;
  border: none;
  padding: 10px 15px;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  position: relative;
  font-weight: 600;
}
/* ARROW */
.faq-question::before {
  content: "▶";
  margin-right: 10px;
  display: inline-block;
  transition: transform 0.3s;
}
/* ACTIVE */
.faq-item.active .faq-question::before {
  transform: rotate(90deg);
}
/* ANSWER */
.faq-answer {
  max-height: 0;
  overflow: hidden;
  background: #ffffff;
  text-align: left;
  transition: max-height 0.4s ease;
  padding: 0 20px;
}
/* TEXT */
.faq-answer p {
  padding: 20px 0;
  color: #333;
  line-height: 1.6;
}
/* MOBILE */
@media (max-width: 768px) {
  .faq-container {
    padding: 0 15px;
  }
  .faq-title {
    font-size: 28px;
  }
  .faq-question {
    font-size: 16px;
  }
}
/* MOBILE FIX: remove grey circle around arrow */
@media (max-width: 768px) {
  .faq-question::before {
    background: none;     /*  removes grey background */
    padding: 0;           /*  removes spacing creating circle */
    border-radius: 0;     /* removes round shape */
  }
}
/* =================================================================================
/* ===== ABOUT YEARS TIMELINE  / ABOUT
================================================================================= */
/* SECTION BACKGROUND */
.bisafa-timeline {
  background: #072c44;
  padding: 80px 20px;
  color: #fff;
  overflow-x: auto;
  max-width: 100% !important;   /* FULL WIDTH */
  margin: 0 !important;

}
.timeline-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: center;   /*  CENTER ALL ITEMS */
  position: relative;
  gap: 60px;
  flex-wrap: wrap;           /* allows wrapping instead of stretching */
  margin: 0 auto;
}
/* LINE */
.timeline-line {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 4px;
  background: #ff7a2f;
  z-index: 1;
}
/* ITEM */
.timeline-item {
  position: relative;
  text-align: center;
  z-index: 2;
}
/* YEAR */
.timeline-year {
  font-size: 24px;
  font-weight: bold;
  color: #ff7a2f;
  margin-bottom: 10px;
}
/* CIRCLE */
.timeline-circle {
  width: 50px;
  height: 50px;
  background: #ff7a2f;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 20px;
  color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 122, 47, 0.2);
}
/* CARD */
.timeline-card {
  background: #0b3b5a;
  padding: 20px;
  border-radius: 10px;
  width: 220px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  border-top: 4px solid #ff7a2f;
}
.timeline-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #ff7a2f;
}
.timeline-card p {
  font-size: 14px;
  color: #d1dbe3;
  line-height: 1.5;
}
/* RESPONSIVE */
@media (max-width: 768px) {
  .timeline-wrapper {
    flex-direction: column;
    align-items: center;
    min-width: auto;
  }
  .timeline-line {
    display: none;
  }
  .timeline-card {
    width: 100%;
    max-width: 300px;
  }
}
/* =================================================================================
/* ===== BISAFA BLOG SECTION ====== //  BLOG
================================================================================= */
.bisafa-blog {
  background: #0b2f4a;
  padding: 20px 20px;
  max-width: 100% !important;   /* FULL WIDTH */
  margin: 0 !important;
 
}
/* CONTAINER */
.blog-container {
  display: flex;
  gap: 30px;
  max-width: 1200px;
  margin: auto;
}
/* ================= LEFT GRID ================= */
.blog-grid {
  flex: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
/* CARD */
.blog-card {
  background: #0b2f4a;
  border: 2px solid #ff6600;
  padding: 15px;
  text-align: center;
  color: #fff;
   height: 380px;
}
/* IMAGE */
.blog-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
}
/* TITLE */
.blog-card h3 {
  margin: 15px 0;
  color: #ff6600;
}
/* BLOG TITLE */
.blog-card h3 {
  font-size: 20px;        /* ↓ reduce size (try 18–22px) */
  line-height: 1.3;       /* better spacing */
  margin: 12px 0;
  color: #ff6600;
}
/* DATE */
.blog-card .date {
  margin-bottom: 15px;
  color: #ccc;
}
/* ================= SIDEBAR ================= */
.blog-sidebar {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* BOX */
.sidebar-box {
  border: 2px solid #ff6600;
  padding: 20px;
  color: #fff;
    color: #ffffff;
}
/* CATEGORY LIST */
.sidebar-box ul {
  list-style: none;
  padding: 0;
}
.sidebar-box li {
  margin: 10px 0;
  cursor: pointer;
}
/* CATEGORY LINKS */
.sidebar-box li a {
  color: #ffffff !important;   /* make text white */
  text-decoration: none;
}
/* ================= FORM ================= */
.form-box input,
.form-box textarea {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border: none;
  background: #ccc;
}
/* CHECKBOX */
.checkbox {
  display: block;
  margin: 10px 0;
}
/* ================= BUTTON ================= */
.btn-orange {
  display: inline-block;
  width: auto;              /*  removes full width */
  padding: 14px 40px;       /* keeps nice size */
  background: #ff6600;
  color: #fff;
  border-radius: 8px;
  text-align: center;
}
/* ================= MOBILE ================= */
@media (max-width: 900px) {
  .blog-container {
    flex-direction: column;
  }
  .blog-grid {
    grid-template-columns: 1fr;
  }
}
/* =================================================================================
/* =====    ====== //  TEXT SECTION, BELOW HOME PAGE ======/INDUSTRIES
================================================================================= */
.bisafa-intro {
  width: 100%;
  background: #f2f2f2;
  padding: 10px 10px;
  text-align: center;
   max-width: 100% !important;   /* FULL WIDTH */
  margin: 0 !important;
}
.bisafa-intro .container {
  max-width: 1000px;
  margin: 0 auto;
}
.bisafa-intro h2 {
  color: #7e22ce;
  font-size: 34px;
  font-weight: 700;
  margin-bottom: 20px;
}
.bisafa-intro p {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}
/* =================================================================================
/* =====   SECTOR OR INDUSTRIES  SECTION AND ALL DROP DOWN
================================================================================= */
.bisafa-sectors {
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
}
/*  ROW = */
.sector-row {
  display: flex;
  width: 100%;
  min-height: 350px;
  align-items: stretch;
}
/*IMAGE (UPDATED FOR <img>)*/
.sector-image {
  flex: 1;
  position: relative;
  overflow: hidden;
}
.sector-image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* replaces background-size */
  display: block;
}
/* TEXT BOX */
.sector-text {
  flex: 1;
   background: #ffffff;
  color: #222;
  /*background: #0b2f4a;
  color: #fff; */
  display: flex;
  align-items: center;
}
/* CONTENT */
.sector-text .content {
  padding: 50px 60px;
  max-width: 520px;
}
/* TITLE*/
.sector-text h3 {
  color: #ff6600;
  font-size: 22px;
  margin-bottom: 15px;
}
/* TEXT */
.sector-text p {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px;
}
/* LINE */
.sector-text .line {
  position: absolute;
  left: 0;
  top: 5px;
  width: 3px;
  height: 100%;
  background: #ff6600;
}
/* DOT */
.sector-text p::before {
  content: "";
  position: absolute;
  left: -4px;
  top: 5px;
  width: 10px;
  height: 10px;
  background: #ff6600;
  border-radius: 50%;
}
/* =========================
   BUTTON
========================= */
.btn-main {
  display: inline-block;
  background: #ff6600;
  color: #fff;
  padding: 10px 18px;
  border-radius: 4px;
  text-decoration: none;
  font-size: 13px;
}
/* =========================
   MOBILE
========================= */
/* MOBILE SECTOR SECTION */
@media (max-width: 900px) {

  .sector-row {
    flex-direction: column;
  }
  .sector-image,
  .sector-text {
    flex: 100%;
    max-width: 100%;
  }
  /* TEXT FIRST */
  .sector-text {
    order: 1;
  }
  .sector-text .content {
    padding: 35px 25px;
  }
  /* IMAGE SECOND */
  .sector-image {
    order: 2;
    height: auto;
  }
  .sector-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
  }
}
/* =================================================================================
/* =====  COOKIES AND PRIVACY POP-UP
================================================================================= */



/* =================================================================================
   ===== COOKIES AND PRIVACY POLICY SECTION TEXT
================================================================================= */
.privacy-page{
  padding: 60px 20px;
  background: #ffffff;
  width: 100%;
}
/* CONTAINER */
.privacy-container{
  max-width: 900px;   /* prevents text stretching across page */
  margin: 0 auto;
  padding: 0 20px;
}
/* MAIN TITLE */
.privacy-container h1{
  text-align: center;
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 30px;
  color: #7e22ce;
}
/* SECTION TITLES */
.privacy-container h2{
  font-size: 28px;
  font-weight: 700;
  margin-top: 40px;
  margin-bottom: 15px;
  color: #4b0082;
}
/* SUB TITLES */
.privacy-container h3{
  font-size: 20px;
  font-weight: 600;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #ff6600;
}
/* TEXT */
.privacy-container p{
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  margin-bottom: 18px;
}
/* LIST */
.privacy-container ul{
  padding-left: 20px;
  margin-bottom: 20px;
}
.privacy-container ul li{
  font-size: 16px;
  line-height: 1.8;
  margin-bottom: 10px;
  color: #444;
}
/* MOBILE */
@media (max-width: 768px){
  .privacy-page{
    padding: 40px 15px;
  }
  .privacy-container{
    padding: 0 10px;
  }
  .privacy-container h1{
    font-size: 32px;
  }
  .privacy-container h2{
    font-size: 24px;
  }
  .privacy-container h3{
    font-size: 18px;
  }
  .privacy-container p,
  .privacy-container ul li{
    font-size: 15px;
  }
}

/* =================================================================================
   ===== BROCHURE POP-UP PAGE 
================================================================================= */
.brochure-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
}
/* SHOW MODAL */
.brochure-modal.active {
  display: flex;
}
/* MAIN BOX */
.brochure-box {
  width: 100%;
  max-width: 980px;   /* REDUCED SIZE */
  background: #f3f3f3;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  max-height: 88vh;
  margin: auto;
}
/*LEFT IMAGE */
.brochure-image {
  width: 52%;
  flex-shrink: 0;
}
.brochure-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* RIGHT CONTENT*/
.brochure-content {
  width: 48%;
  background: #f3f3f3;
  padding: 45px 40px 35px;
  overflow-y: auto;
  position: relative;
}
/*CLOSE BUTTON */
.close-modal {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  color: #222;
  z-index: 5;
}
/* TITLE */
.brochure-content h2 {
  font-size: 20px;
  line-height: 1.45;
  margin-bottom: 32px;
  color: #111;
  font-weight: 700;
  max-width: 420px;
}
/* LABELS */
.brochure-content label {
  display: block;
  margin-bottom: 8px;
  margin-top: 14px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
}
/* RED STAR */
.brochure-content label span {
  color: red;
}
/* INPUTS*/
.brochure-content input {
  width: 100%;
  height: 62px;
  border: 2px solid #dddddd;
  background: #f8f8f8;
  padding: 0 18px;
  font-size: 17px;
  color: #333;
  outline: none;
  box-sizing: border-box;
}
/* PLACEHOLDER */
.brochure-content input::placeholder {
  color: #888;
}
/*BUTTON */
.download-btn {
  width: 100%;
  height: 62px;
  margin-top: 24px;
  border: none;
  background: #7e22ce;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2px;
  cursor: pointer;
  transition: 0.3s ease;
}
/* HOVER */
.download-btn:hover {
  background: #e95e1d;
}
/* MOBILE*/
@media (max-width: 900px) {
  .brochure-modal {
    padding: 10px;
  }
  .brochure-box {
    flex-direction: column;
    max-width: 100%;
    max-height: 95vh;
    overflow-y: auto;
  }
  /* IMAGE */
  .brochure-image {
    width: 100%;
    height: 220px;
  }
  .brochure-image img {
    height: 100%;
  }
  /* CONTENT */
  .brochure-content {
    width: 100%;
    padding: 30px 20px 22px;
  }
  /* TITLE */
  .brochure-content h2 {
    font-size: 20px;
    line-height: 1.4;
    margin-bottom: 24px;
    padding-right: 30px;
  }
  /* INPUTS */
  .brochure-content input {
    height: 56px;
    font-size: 15px;
  }
  /* BUTTON */
  .download-btn {
    height: 58px;
    font-size: 17px;
  }
  /* CLOSE */
  .close-modal {
    font-size: 40px;
    top: 10px;
    right: 14px;
    color: red;
  }
}
/* =================================================================================
   =====
================================================================================= */


   /* =================================================================================
 /* =================================================================================
   =====
================================================================================= */
/* =========================================================
COOKIE POPUP - LOTUSWORKS STYLE
========================================================= */
/* =========================================================
COOKIE POPUP - DESKTOP + MOBILE
========================================================= */
/* =========================================================
COOKIE MAIN POPUP
========================================================= */
/* =========================================
COOKIE POPUP
========================================= */
/* =========================================
COOKIE POPUP
========================================= */

.cookie-popup {

  position: fixed;

  right: 20px;
  bottom: 20px;

  width: 670px;

  background: #7e22ce;

  border-radius: 22px;

  padding: 20px;

  z-index: 999999;

  color: #fff;

  box-sizing: border-box;
}

/* =========================================
HEADER
========================================= */

.cookie-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 10px;
}

.cookie-logo,
.cookie-title {

  font-size: 20px;

  font-weight: 700;
}

.cookie-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 42px;
 font-weight: 700;
  cursor: pointer;
}

/* =========================================
TEXT
========================================= */

.cookie-text {

  font-size: 16px;


  margin-bottom: 15px;
}

/* =========================================
BUTTON ROW
========================================= */

.cookie-buttons-row {

  display: flex;

  gap: 16px;

  margin-bottom: 10px;
}

/* =========================================
COOKIE BUTTONS
========================================= */

.cookie-main-btn {

  flex: 1;

  height: 62px;

  border: none;

  border-radius: 12px;

  font-size: 20px;

  font-weight: 700;

  cursor: pointer;
    white-space: nowrap;
}

/* ACCEPT */

.cookie-accept-btn {

  background: #2d69b2;

  color: #fff;
}

/* REJECT */

.cookie-reject-btn {

  background: #efefef;

  color: #222;
}

/* PREFS */

.cookie-prefs-btn {

  background: #efefef;

  color: #222;
}

/* =========================================
LINKS
========================================= */
.cookie-links {
  text-align: center;
}
.cookie-links a {
  color: #fff;
  font-size: 18px;
   text-decoration: underline !important;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  margin: 0 14px;
  display: inline-block;
}
/* =========================================
PREFERENCES POPUP
========================================= */
.cookie-preferences {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999999;
}
.cookie-preferences.active {
  display: flex;
} 
.cookie-preferences-box {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 670px;
  background: #7e22ce;
  border-radius: 22px;
  padding: 28px;
  z-index: 999999;
  color: #fff;
  box-sizing: border-box;
}

/* =========================================
PREF HEADER
========================================= */
.prefs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 7px;
}
.prefs-logo,
.prefs-title {
  font-size: 18px;
  font-weight: 700;
}

.prefs-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 42px;
 font-weight: 700;
  cursor: pointer;
}

/* =========================================
PREF TEXT
========================================= */

.prefs-text {
  font-size: 15px;
 
  margin-bottom: 10px;
}

/* =========================================
OPTIONS
========================================= */

.prefs-option {
  background: #b28dff;
  min-height: 60px;
  border-radius: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px;
  margin-bottom: 10px;
}

.active-option {
  border: 3px solid hsl(33, 90%, 47%);
}
.prefs-left {
  font-size: 20px;
  font-weight: 700;
}

.always-active {
  color: green;

  font-weight: 700;
}

/* =========================================
ARROW BUTTON
========================================= */

.prefs-arrow-btn {

  background: none;

  border: none;

  color: #111;

  font-size: 24px;

  margin-left: 14px;

  cursor: pointer;
}

/* =========================================
FUNCTIONAL CONTENT
========================================= */

.prefs-content {

  display: none;

  background: #d35811;

  padding: 9px;

  font-size: 16px;

  line-height: 1.;

  margin-top: -10px;

  margin-bottom: 10px;
}

.prefs-content.active {

  display: block;
}

/* =========================================
SWITCH
========================================= */

.switch {

  position: relative;

  display: inline-block;

  width: 56px;

  height: 30px;
}

.switch input {

  opacity: 0;
}

.slider {

  position: absolute;

  inset: 0;

  background: #ff6b2d;

  border-radius: 50px;
}

.slider:before {

  content: "";

  position: absolute;

  width: 22px;
  height: 22px;

  left: 4px;
  top: 4px;

  background: #fff;

  border-radius: 50%;

  transition: 0.3s;
}

.switch input:checked + .slider:before {

  transform: translateX(26px);
}

/* =========================================
PREF BUTTONS
========================================= */

.prefs-buttons {

  display: flex;

  gap: 16px;

  margin-top: 24px;

  margin-bottom: 10px;
}

/* =========================================
MOBILE
========================================= */

@media screen and (max-width: 768px) {

  .cookie-popup {

    position: fixed;

    left: 6px;
    right: 6px;
    bottom: 6px;

    width: auto;

    padding: 18px 16px;

    padding-top: 12px;
    padding-bottom: 18px;

    border-radius: 18px;

    box-sizing: border-box;

    z-index: 999999;
  }

  /* =========================================
  HEADER
  ========================================= */

  .cookie-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 8px;
  }

  .cookie-logo {

    font-size: 20px;

    font-weight: 700;

    line-height: 1.1;

    max-width: 180px;

    display: block;

    margin: 0;

    padding: 0;
  }

  .logo-text {

    display: inline-block;

    white-space: nowrap;

    line-height: 1;
  }

  .logo-r {

    font-size: 10px;

    top: -0.4em;

    position: relative;
  }

  /* REMOVE TITLES */

  .cookie-title {

    display: none;
  }

  .prefs-title {

    display: none;
  }

  .cookie-close {

    font-size: 24px;

    line-height: 1;

    margin: 0;

    padding: 0;
  }

  /* =========================================
  TEXT
  ========================================= */

  .cookie-text {

    font-size: 12px;

    line-height: 1.;

    margin-top: 0;

    margin-bottom: 14px;

    color: #fff;
  }

  /* =========================================
  BUTTON AREA
  ========================================= */

  .cookie-buttons-row {

    display: flex;

    flex-direction: column;

    gap: 10px;

    margin-bottom: 12px;
  }

  /* =========================================
  BUTTONS
  ========================================= */

  .cookie-main-btn {

    width: 100%;

    height: 46px;

    min-height: 46px;

    padding: 0 18px;

    border-radius: 8px;

    font-size: 15px;

    font-weight: 700;

    display: flex;

    align-items: center;

    justify-content: center;

    box-sizing: border-box;

    white-space: nowrap;
  }

  /* =========================================
  LINKS
  ========================================= */

  .cookie-links {

    text-align: center;
  }

  .cookie-links a {

    color: #fff;

    font-size: 13px;

    font-weight: 600;

    text-decoration: underline;

    text-decoration-thickness: 1.5px;

    text-underline-offset: 3px;

    margin: 0 6px;
  }

  /* =========================================
  PREFERENCES POPUP
  ========================================= */

  .cookie-preferences-box {

    width: calc(100% - 40px);

    max-width: 360px;

    padding: 8px;

    padding-top: 4px;

    border-radius: 14px;

    box-sizing: border-box;
  }

  /* =========================================
  PREFERENCES HEADER
  ========================================= */

  .prefs-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 4px;

    padding-bottom: 0;
    
  }

  .prefs-logo {

    margin: 0;

    padding: 0;

    line-height: 1;
    
  }

  /* =========================================
  PREFERENCES TEXT
  ========================================= */

  .prefs-text {

    font-size: 12px;

    line-height: 1.;

    margin-top: 0;

    margin-bottom: 8px;
  }

  /* =========================================
  PREFERENCES OPTIONS
  ========================================= */

  .prefs-option {

    background: #b28dff;

    min-height: 45px;

    border-radius: 6px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 0 10px;

    margin-bottom: 12px;
  }

  .active-option {

    border: 3px solid hsl(33, 90%, 47%);
  }
/* =========================================
FUNCTIONAL CONTENT
========================================= */

.prefs-content {

  display: none;

  background: #df6b28;

  padding: 9px;

  font-size: 12px;

  line-height: 1.;

  margin-top: -10px;

  margin-bottom: 8px;
}

.prefs-content.active {

  display: block;
}
  /* =========================================
  PREFERENCES BUTTONS
  ========================================= */

  .prefs-buttons {

    display: flex;

    flex-direction: column;

    gap: 8px;
  }

}