* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
        }

        /* Page Loader */
        .pex-loader{ position:fixed; inset:0; background:#112349; display:grid; place-items:center; z-index:2000; transition:opacity .45s ease, visibility .45s ease; }
        .pex-loader.is-hidden{ opacity:0; visibility:hidden; pointer-events:none; }
        .pex-loader__inner{ text-align:center; }
        .pex-loader__logo{ width:240px; max-width:60vw; height:auto; display:block; margin:0 auto 18px; filter:drop-shadow(0 4px 20px rgba(0,0,0,.25)); }
        .pex-loader__spinner{ width:48px; height:48px; margin:0 auto; border-radius:50%; border:3px solid rgba(255,255,255,.25); border-top-color:#4a9fd8; animation:pex-spin 1s linear infinite; }
        @keyframes pex-spin{ to{ transform:rotate(360deg); } }


      
	  /* ========================================
   HEADER COMPONENT (BLOCK: pex-header)
   ======================================== */
					
	.pex-header {
	  position: absolute !important;
	  top: 0;
	  left: 0;
	  right: 0;
	  z-index: 1000;
	  padding: 22px 0;
	  border-bottom: 0;
	  background: linear-gradient(180deg, rgba(17, 35, 73, 0.95), rgba(17, 35, 73, 0.75));  
	  box-shadow: none;
	  transition: background 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
	}

	/* Added BEM modifier for sticky header state */
	.pex-header--stuck {
	  position: fixed !important;
	  background: #112349 !important;
	  padding: 10px 0;
	  box-shadow: 0 6px 16px rgba(17, 35, 73, 0.15);
	}


	.pex-header__container {
	  display: flex;
	  align-items: center;
	  justify-content: space-between; /* logo left, nav/burger right */
	  max-width: 100%;
	  margin: 0 auto;
	  padding: 0 30px;
	  position: relative;
	  z-index: 1000;
	}

	/* =========================
	   DESKTOP NAV
	   ========================= */
	.pex-header__nav {
	  display: flex;
	  align-items: center;
	  margin-left: auto; /* push nav to the extreme right */
	}

	.pex-header__nav-list {
	  display: flex;
	  list-style: none;
	  gap: 2rem;
	}

	/* Hide burger on desktop */
	.menu-toggle {
	  display: none;
	}


	.pex-header__logo-section {
	  display: flex;
	  align-items: center;
	  gap: 1rem;
	}

	.pex-header__brand-mark {
	  /*eight: 96px;
	  width: auto;*/
	  width:175px;height:70px;
	  display: block;
	  object-fit: contain;
	  transition: height 0.25s ease, transform 0.25s ease, filter 0.25s ease;
	}

	/* Updated selector to use BEM modifier on parent */
	.pex-header--stuck .pex-header__brand-mark {
	  height: 56px;
	}

	.pex-header__nav {
	  display: flex;
	  list-style: none;
	  gap: 2rem;
	  align-items: center;
	}

	.pex-header__nav-list {
	  display: flex;
	  list-style: none;
	  gap: 2rem;
	  align-items: center;
	}


	.pex-header__nav-list a {
	  color: white;
	  text-decoration: none;
	  font-size: 1rem;
	  font-weight: 500;
	  transition: opacity 0.3s;
	  display: flex;
	  align-items: center;
	  gap: 0.5rem;
	}

	.pex-header__nav-list a:hover {
	  opacity: 0.8;
	}

	/* Index-like hover underline for header nav */
	.pex-header__nav-list a{ position: relative; }
	.pex-header__nav-list a::after{
	  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#fff; transition:width .3s ease;
	}
	.pex-header__nav-list a:hover::after{ width:100%; }

	/* Updated active link indicator to use BEM modifier */
	.pex-header__nav-link--active {
	  position: relative;
	}

	.pex-header__nav-link--active::after {
	  content: "";
	  position: absolute;
	  left: 0;
	  right: 0;
	  bottom: -18px;
	  height: 3px;
	  width: 44px;
	  margin: auto;
	  background: #ffffff;
	  border-radius: 2px;
	}


	/* ========== CLEAN MOBILE MENU (RIGHT-SIDE DRAWER) ========== */


	/* Burger icon */
	.menu-toggle {
	  display: none;
	  font-size: 25px;
	  cursor: pointer;
	  padding: 0px 5px 0px;
	  border: 1px solid #fff;
	  border-radius: 6px;
	  color: #fff;
	  z-index: 2001;
	}

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

	  .pex-header__container {
		display: flex;
		justify-content: space-between; /* Logo left, burger right */
		align-items: center;
	  }

	  .menu-toggle {
		display: block;
	  }
	  
	  /* Hide desktop nav list */
	  .pex-header__nav-list {
		display: flex; /* hidden initially via right:-260px */
		flex-direction: column;
		align-items: flex-start;
		position: fixed;
		top: 0;
		right: -260px; /* hidden offscreen */
		height: calc(100% - 5px);
		width: 240px;
		background: rgba(17,35,73,0.6);
		padding: 24px; /* top padding for header height */
		gap: 18px;
		transition: right 0.4s ease;
		z-index: 2000;
	  }

	  .pex-header__nav-list.show {
		right: 0; /* slide in from right */
	  }

	  /* Show burger icon */
	  .menu-toggle {
		display: block;
		z-index: 3000	; /* above nav drawer */
		font-size: 23px;
		cursor: pointer;
	  }

	  /* Optional: overlay behind drawer */
	  .nav-overlay {
		display: none;
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,0.4);
		z-index: 1999; /* below burger, above content */
	  }

	  .pex-header__nav-list li a {
		color: #fff;
		font-size: 1.1rem;
	  }

	}



	/* Hero section with platform banner image */
	.hero-section {
		background-image: url(../images/platform/banner-platform.png);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		position: relative;
		padding: 80px 20px;
		text-align: left;
		margin-top: 100px;
	}

	.hero-section::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: linear-gradient(135deg, rgba(61, 90, 128, 0.95) 0%, rgba(74, 111, 165, 0.85) 100%);
	}

	.hero-content {
		position: relative;
		z-index: 1;
		max-width: 100%;
		margin: 5px;
		padding: 0 80px;
	}

	.hero-content h1 {
		font-size: 50px;
		font-weight: 700;
		color: white;
		margin-bottom: 15px;
	}

	/* Platform content sections */
	.platform-section {
		max-width: 1280px;
		margin: 60px auto;
		background: white;
		box-shadow: 0 0 74px rgba(10, 10, 10, 0.07);
	}

	.platform-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		min-height: 500px;
	}

	.platform-column {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 80px 60px;
	}

	

	

	.platform-column.purple-bg {
		background: #313787;
	}

	.platform-column.green-bg {

		background: rgba(0,0,0,0.85); 
	   /* background: #5ec145;*/
	}

	.platform-column.yellow-bg {
		background: #eace15;
	}

.platform-column.icon-column {
		/* Smaller, centered icons like live */
		background-size: clamp(160px, 45%, 360px) auto;
		background-repeat: no-repeat;
		background-position: center;
		will-change: transform;
		transition: transform .25s ease-out; /* subtle smoothing */
}
/* Specific icon backgrounds */
.platform-column.icon-column.icon-lock{ background-image: url(../images/platform/icon-lock.png); }
.platform-column.icon-column.icon-box{ background-image: url(../images/platform/icon-box.png); }
.platform-column.icon-column.icon-shield{ background-image: url(../images/platform/icon-shield.png); }
.platform-column.icon-column.icon-handshake{
  background-image: url(../images/platform/icon-handshake.jpg);
  /* Avoid aggressive cropping; scale to fit with generous padding */
  background-size: clamp(220px, 80%, 520px) auto;
}

@media (max-width: 968px){
  .platform-column.icon-column.icon-handshake{ background-size: clamp(200px, 85%, 460px) auto; }
}

@media (max-width: 968px){
  .platform-column.icon-column{ background-size: clamp(140px, 55%, 320px) auto; min-height: 360px; }
}

/* Placeholder visual columns (swap background in markup when ready) */
.placeholder {
	background:
	  linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06)),
	  url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><rect fill="%23f5f5f5" width="200" height="200"/><path fill="%23ddd" d="M40 120h120v20H40zM40 90h120v18H40zM40 60h120v16H40z"/></svg>');
	background-size: cover, contain;
	background-position: center;
}

/* Reveal animations */
.reveal{ opacity:0; transform:translateY(12px); transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
.reveal.is-in{ opacity:1; transform:none; }

.platform-caption {
	font-size: 15px;
	font-style: normal;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #8085ca;
	margin-bottom: 15px;
}

.platform-caption.white {
	color: rgba(255, 255, 255, 0.8);
}

.platform-caption.black {
	color: #000000;
}

.platform-title {
	font-size: 42px;
	font-weight: 600;
	letter-spacing: 0px;
	text-transform: none;
	color: #4b5091;
	margin-bottom: 25px;
	line-height: 1.2;
}

.platform-title.white {
	color: #ffffff;
}

.platform-text {
	font-size: 16px;
	color: #8285b3;
	margin-bottom: 25px;
	line-height: 1.8;
}

.platform-text.large {
	font-size: 19px;
}

.platform-text.white {
	color: #ffffff;
}

.platform-text.cyan {
	color: #93ecf9;
}

.platform-button {
	display: inline-block;
	padding: 14px 38px 19px 38px;
	font-size: 16px;
	text-transform: none;
	border-radius: 33px;
	border: 2px solid;
	text-decoration: none;
	transition: all 0.3s;
	font-weight: 500;
}

.platform-button.blue {
	color: #3740b0;
	border-color: #3740b0;
	background: transparent;
}

.platform-button.blue:hover {
	background: #3740b0;
	color: white;
}

.platform-button.white {
	color: #ffffff;
	border-color: #ffffff;
	background: transparent;
}

.platform-button.white:hover {
	background: white;
	color: #313787;
}

/* Footer Styles */
.pex-footer {
	background: #2b2b2b;
	color: white;
	padding: 60px 0 0;
}

.pex-footer-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 40px;
	margin-bottom: 40px;
}

.pex-footer-column h3 {
	font-size: 18px;
	margin-bottom: 20px;
	color: white;
}

.pex-footer-logo {
	width: 230px;
	margin-bottom: 20px;
}

.pex-footer-info {
	display: flex;
	flex-direction: column;
	gap: 15px;
	font-size: 14px;
	line-height: 1.8;
}

.pex-footer-info-item {
	display: flex;
	gap: 10px;
}

.pex-footer-info-item i {
	margin-top: 3px;
	flex-shrink: 0;
}

.pex-footer a {
	color: white;
	text-decoration: none;
	transition: opacity 0.3s;
}

.pex-footer a:hover {
	opacity: 0.8;
}

.pex-recent-news {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pex-news-item {
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.pex-news-item:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.pex-news-title {
	font-size: 14px;
	margin-bottom: 8px;
	line-height: 1.4;
}

.pex-news-date {
	font-size: 12px;
	color: rgba(255, 255, 255, 0.6);
}


.pex-partner-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
	align-items: center;
}

.pex-partner-logos img {
	height: 50px;
	width: auto;
	opacity: 0.8;
	transition: opacity 0.3s;
	object-fit: contain;

}

.pex-partner-logos img:hover {
	opacity: 1;
}

.pex-copyright {
	background: #1a1a1a;
	padding: 25px 0;
	margin-top: 40px;
}

.pex-copyright-content {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 14px;
}

.pex-social-links {
	display: flex;
	gap: 15px;
}

.pex-social-links a {
	color: white;
	font-size: 16px;
	transition: opacity 0.3s;
}

.pex-social-links a:hover {
	opacity: 0.7;
}

/* Responsive */
@media (max-width: 968px) {
	.platform-row {
		grid-template-columns: 1fr;
	}

	.platform-column {
		padding: 60px 40px;
	}

	.platform-title {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
   /* .pex-mobile-toggle { display:flex; }
	.pex-nav{ position:fixed; top:0; right:0; height:100vh; width:280px; background:#112349; padding:80px 24px 24px; flex-direction:column; gap:18px; transform:translateX(100%); transition:transform .3s ease; display:flex; }
	.pex-header.nav-open .pex-nav{ transform:translateX(0); }
*/
	.hero-content h1 {
		font-size: 36px;
	}

	.platform-section {
		margin: 30px 20px;
	}

	.platform-column {
		padding: 40px 30px;
	}

	.platform-title {
		font-size: 28px;
	}

	.platform-text {
		font-size: 15px;
	}

	.platform-text.large {
		font-size: 17px;
	}

	.pex-footer-content {
		grid-template-columns: 1fr;
	}

	.pex-copyright-content {
		flex-direction: column;
		gap: 15px;
		text-align: center;
	}
}

        /* === Overlay header on hero + big→small logo on scroll (Platform) === */

/* Tweakables */
:root{
  --header-pad: 22px;          /* padding when at top */
  --header-pad-stuck: 10px;    /* padding when shrunk */
  --logo-top: 96px;            /* big logo height at top */
  --logo-stuck: 56px;          /* logo height after shrink */
  --stuck-bg: #112349;         /* solid color when stuck */
}

/* Header over the hero image */
.pex-header{
  position: absolute !important;   /* override earlier fixed rule */
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: var(--header-pad) 0;
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(17,35,73,.55), rgba(17,35,73,0)); /* readable over photo */
  box-shadow: none;
  transition: background .25s ease, padding .25s ease, box-shadow .25s ease;
}

/* After scroll: pin & use solid #112349 */
.pex-header.is-stuck{
  position: fixed !important;
  background: var(--stuck-bg) !important;
  padding: var(--header-pad-stuck) 0;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
}

/* Big logo -> small on shrink */
.brand-mark{
 /* height: var(--logo-top);
  width: auto;*/
  width:175px;height:70px;
  display: block;
  object-fit: contain;
  transition: height .25s ease, transform .25s ease, filter .25s ease;
}
.pex-header.is-stuck .brand-mark{
  height: var(--logo-stuck);
}

/* Kill any white line and let hero start flush */
html, body { margin: 0; }
.pex-header::after{ content: none !important; }

/* Hero adjustments: remove the old fixed-header offset and add safe padding for big logo */
.hero-section{
  margin-top: 0 !important;     /* override the 100px margin defined earlier */
  padding-top: max(160px, 18vh);
}

/* Active menu underline like original */
.pex-nav a.active{ position: relative; }
.pex-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-18px;
  height:3px; width:44px; margin:auto; background:#ffffff; border-radius:2px;
}

/* Mobile tweaks */
@media (max-width: 768px){
  :root{
    --logo-top: 72px;
    --logo-stuck: 44px;
    --header-pad: 16px;
    --header-pad-stuck: 8px;
  }
  .hero-section{ padding-top: 120px; }
}




   /*MAIN SECTION */



.main-section {
    max-width: 1200px;
    margin: 70px auto;
    padding: 0 30px;
}

.main-wrapper {
    background: #ffffff;
    padding: 50px 60px;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

/* Main Image */
.main-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
    max-height: 420px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.08);
    margin-bottom: 35px;
}

/* Title */
.main-title {
    font-family: 'Montserrat', sans-serif;
    font-size: 40px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 28px;
    line-height: 1.3;
}

/* Body text */
.main-content p {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    color: #444;
    line-height: 1.9;
    margin-bottom: 20px;
}

/* Subheading */
.main-content h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 26px;
    margin: 35px 0 15px;
    color: #222;
}

/* Fade-in animation using your existing reveal system */
.main-section.reveal,
.main-section .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.main-section.reveal.is-in,
.main-section .reveal.is-in {
    opacity: 1;
    transform: translateY(0px);
}

/* Responsive layout */
@media (max-width: 768px) {
    .main-wrapper {
        padding: 30px 20px;
    }

    .main-title {
        font-size: 30px;
    }

    .main-content h3 {
        font-size: 22px;
    }

    .main-content p {
        font-size: 16px;
		text-align: justify;
    }

    .main-image img {
        max-height: 300px;
    }
}