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

body{
font-family: 'Poppins', sans-serif;
background-color: #f5f5f5;
}

/* Header Styles */
header {
background-color: #131424;
width: 100%;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.header-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 100px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 60px;
}

/* Logo Section (Left Side) */
.logo-section {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
}

.logo-link {
display: flex;       /* Keep logo and text side by side */
align-items: center; /* Vertically center the text with the logo */
text-decoration: none; /* Remove underline */
color: inherit;      /* Keep text color same as original */
cursor: pointer;     /* Show pointer on hover */
}


.logo {
width: 60px;
height: 40px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
}




.company-name {
color: #D5D6DB;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.5px;
}

/* Navigation Styles */
nav {
display: flex;
align-items: center;
}

.nav-menu {
display: flex;
list-style: none;
gap: 0px;
align-items: center;
}

.nav-item {
position: relative;
}

/* Regular Menu Links */
.nav-link {
color: #D5D6DB;
text-decoration: none;
padding: 20px 8px;
display: flex;
align-items: center;
gap: 5px;
font-weight: 600;
font-size: 0.8rem;
border-radius: 4px;
transition: all 0.3s ease;
cursor: pointer;
}

.nav-link:hover {
background-color: #D5D6DB;
color: #131424;
}

/* Dropdown Arrow */
.dropdown-arrow {
font-size: 0.7rem;
transition: transform 0.3s ease;
}

.nav-item:hover .dropdown-arrow {
transform: rotate(180deg);
}

/* Dropdown Menu */
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background-color: #131424;
min-width: 220px;
border-radius: 0 0 8px 8px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
border-top: 2px solid #D5D6DB;
}

.nav-item:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.dropdown-item {
color: #D5D6DB;
text-decoration: none;
padding: 12px 20px;
display: block;
font-weight: 600;
font-size: 0.8rem;
transition: all 0.3s ease;
}

.dropdown-item:hover {
background-color: #D5D6DB;
color: #131424;
border-left-color: #131424;
padding-left: 25px;
}

/* Open BO Account Button */
.btn-account {
background-color: #D2A034;
color: #131424 /*!important*/;
padding: 12px 24px /*!important*/;
border-radius: 6px;
font-weight: 600;
margin-left: 10px;
border: 2px solid #D2A034;
transition: all 0.3s ease;
}

.btn-account:hover {
background-color: #FEECB2 /*!important*/;
border-color: #FEECB2;
color: #131424 /*!important*/;
}

/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
padding: 5px;
z-index: 1001;
}

.hamburger span {
width: 28px;
height: 3px;
background-color: #D5D6DB;
margin: 3px 0;
transition: all 0.3s ease;
border-radius: 2px;
}

.hamburger.active span:nth-child(1) {
transform: rotate(45deg) translate(6px, 6px);
}

.hamburger.active span:nth-child(2) {
opacity: 0;
}

.hamburger.active span:nth-child(3) {
transform: rotate(-45deg) translate(6px, -6px);
}

/* Mobile Styles */
@media screen and (max-width: 768px) {
.header-container {
height: 70px;
padding: 0 12px;
}

.company-name {
font-size: 1.2rem;
}

.hamburger {
display: flex;
}

nav {
position: fixed;
top: 70px;
left: -100%;
width: 100%;
height: calc(100vh - 70px);
background-color: #131424;
transition: left 0.3s ease;
overflow-y: auto;
}

nav.active {
left: 0;
}

.nav-menu {
flex-direction: column;
align-items: stretch;
padding: 20px;
gap: 5px;
width: 100%;
}

.nav-item {
width: 100%;
}

.nav-link {
width: 100%;
padding: 15px;
font-size: 1rem;
justify-content: space-between;
border-bottom: 1px solid rgba(210, 160, 52, 0.2);
}

/* Mobile Dropdown */
.dropdown-menu {
position: static;
opacity: 1;
visibility: visible;
transform: none;
display: none;
box-shadow: none;
border: none;
border-left: 3px solid #D5D6DB;
margin: 5px 0 5px 15px;
background-color: rgba(210, 160, 52, 0.05);
border-radius: 0 8px 8px 0;
}

.nav-item.active .dropdown-menu {
display: block;
}

.dropdown-item {
padding: 12px 20px;
border-left: none;
}

.dropdown-item:hover {
padding-left: 25px;
}

/* Mobile Button */
.btn-account {
margin: 10px 0 0 0;
text-align: center;
justify-content: center;
}

.dropdown-arrow {
transition: transform 0.3s ease;
}

.nav-item.active .dropdown-arrow {
transform: rotate(180deg);
}

}

/* Demo Content */
.content {
padding: 40px 20px;
max-width: 1400px;
margin: 0 auto;
color: #333;
}

.invisible {
visibility: hidden;
}



.hero {
font-family: 'Poppins', sans-serif;
display: flex;
align-items: center;
max-width: 1400px;
margin: 0 auto;
padding: 60px 100px;
gap: 60px;
}

.hero-left {
flex: 1 1 500px;
}

.hero-right {
flex: 1 1 500px;
}

.hero-right svg {
width: 100%;
height: auto;
}

.welcome{
font-size: 1.5rem;
color: #475363;
margin-bottom: 24px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s .3s forwards;
font-weight:600;
}

/* animated title (letter-by-letter) */
.hero-title {
font-size: clamp(1.8rem, 4vw, 2.6rem);
font-weight: 700;
color: #131424;
line-height: 1.2;
margin-bottom: 24px;
overflow: hidden;
letter-spacing: -0.02em;
text-shadow: 0 4px 8px rgba(19, 20, 36, 0.12);
}

.hero-title .word {
display: inline-block;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 0.6s forwards;
margin-right: 0.2em;
}

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

/* description + cta */
.hero-desc {
font-size: 1rem;
color: #475363;
margin-bottom: 24px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s .3s forwards;
}

.hero-cta {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
background: #D2A034;
color: #06030C;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s .45s forwards;
}

.hero-cta-2{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 28px;
background: #B9B8BD;
color: #06030C;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: background 0.3s;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s .45s forwards;
border: 1px solid #06030C;
}

.hero-cta:hover {
background: #FEECB2;
}

/* stats */
.hero-stats {
display: flex;
gap: 32px;
margin-top: 40px;
opacity: 0;
transform: translateY(20px);
animation: fadeUp 0.6s .6s forwards;
}

.stat {
display: flex;
flex-direction: column;
align-items: center;
}

.stat-num {
font-size: 1.8rem;
font-weight: 700;
color: #131424;
}

.stat-label {
font-size: .85rem;
color: #555;
}

/* mobile */
@media (max-width: 768px) {
.hero {
flex-direction: column;
text-align: center;
padding: 20px;
}

.hero-stats {
justify-content: center;
flex-wrap: wrap;
gap: 20px;
}

.hero-right {
flex: 1 1 200px;
}
}

/* Container-aware styling for your hero column (Right Side) */
#animation-hero-container {
width: 100%;
aspect-ratio: 16 / 10; 
max-width: 1000px;
margin: 0 auto;
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent; 
}

#animation-hero-container svg {
width: 100%;
height: 100%;
display: block;
}

.svg-text {
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
fill: white;
user-select: none;
}

.device-frame { fill: #131424; stroke: #475363; stroke-width: 2; }
.device-screen { fill: #D5D6DB; }
.device-stand { fill: #475363; }
.depth-screen { fill: #FEECB2; }


/* Chart Styling */
.axis { stroke: #475363; stroke-width: 2; }
.chart-label { font-size: 10px; fill: #06030C; }
.bar-label { font-size: 9px; fill: #06030C; font-weight: bold; }

/* Note: Removed .bar fill from CSS to let SVG attributes handle the gradient */

.buy-btn-bg { fill: #065f46; stroke: #10b981; stroke-width: 1; }
.sell-btn-bg { fill: #7f1d1d; stroke: #ef4444; stroke-width: 1; }
.btn-text { font-size: 9px; font-weight: bold; fill: white; pointer-events: none; }

.stock-ticker-row { fill: #D2A034; rx: 4; }
.stock-symbol { font-size: 10px; font-weight: bold; fill: #131424; }
.stock-price { font-size: 10px; font-weight: bold; fill: #131424; } 

.table-header { font-size: 8px; fill: #131424; font-weight: bold; text-transform: uppercase; }
.bid-price { font-size: 10px; fill: #065f46; font-weight: bold; }
.ask-price { font-size: 10px; fill: #7f1d1d; font-weight: bold; }
.qty-text { font-size: 9px; fill: #131424; }


.why-us{

padding:0px 100px;
max-width:1400px;
margin:30px auto;

}

.why-title{
text-align:center;
font-size:clamp(1.8rem,3vw,2.4rem);
font-weight:600;
color:#131424;
margin-bottom:48px;
position:relative;
}
.why-title::after{
content:'';
display:block;
width:60px;
height:5px;
background:#D2A034;
margin:12px auto 0;
}

/* 3x3 Grid */
.features-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:40px;
}

/* Square-ish cards */
.feature-card{
background:#D5D6DB;
border:1px solid #06030C;
border-radius:12px;
padding:18px;
display:flex;
flex-direction:column;
align-items:center;
text-align:center;
box-shadow:0 20px 40px rgba(6,3,12,0.1);
}


.feature-title{
font-size:1.2rem;
font-weight:600;
color:#06030C;
margin-bottom:16px;
}

.feature-icon{
font-size:3rem;
color:#D2A034;
margin-bottom:16px;
}

.feature-desc{
font-size:0.9rem;
color:#131424;
line-height:1.6;
}

/* Mobile: 2x2 grid */
@media(max-width:768px){
.features-grid{
grid-template-columns:repeat(1,1fr);
gap:16px;
}
.feature-card{
aspect-ratio:auto;
min-height:200px;
padding:20px 20px;
}
.feature-icon{font-size:2.5rem;}
.why-us{padding:60px 16px;}
}

.our-services{
padding:50px 24px;
}

.services-title{
text-align:center;
font-size:clamp(1.8rem,3vw,2.4rem);
font-weight:600;
color:#131424;
margin-bottom:48px;
position:relative;
}
.services-title::after{
content:'';
display:block;
width:50px;
height:5px;
background:#D2A034;
margin:16px auto 0;
border-radius:2px;
}

/* 3x3 Grid - narrower cards */
.services-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:100px;
max-width:1200px; 
margin:56px auto 0;
}

/* Narrower vertical cards with consistent padding */
.service-card{
background:#131424;
border-radius:8px;
overflow:hidden;
display:flex;
flex-direction:column;
box-shadow:0 8px 32px rgba(0,0,0,0.3);
padding:20px; /* consistent padding for all parts */
border-top: 5px solid #D2A034;
border-bottom: 5px solid #D2A034;
}


/* Part 1: Image area with same padding/margin */
.service-image{
width:100%;
aspect-ratio:4/3;
border-radius:8px;
overflow:hidden;
margin-bottom:24px;
}
.img-placeholder{
width:100%;
height:100%;
display:flex;
align-items:center;
justify-content:center;
position:relative;


}
.img-placeholder::after{
content:'';
position:absolute;
inset:0;
background:#D5D6DB;
border-top: 5px solid #D2A034;
border-bottom: 5px solid #D2A034;
}
.img-placeholder i{
font-size:4rem;
color:#131424;
z-index:1;
opacity:0.95;
}

/* Part 2: Title */
.service-name{
font-size:1.2rem;
font-weight:600;
color:#D5D6DB;
margin:0 0 8px 0;
padding:0;
text-align: center;
margin-bottom:24px;
}

/* Part 3: Description */
.service-tagline{
font-size:0.9rem;
color:#D5D6DB;
line-height:1.6;
margin-bottom:24px;
padding:0;
flex:1;
text-align: center;
}

/* Part 4: Link button - width fits content */
.service-link{
display:inline-flex;
align-items:center;
gap:6px;
padding:10px 18px;
background:#B9B8BD;
color:#06030C;
text-decoration:none;
font-size:0.8rem;
font-weight:500;
border-radius:6px;
transition:all 0.3s ease;
border:2px solid #06030C;
align-self:flex-start; /* only as wide as content */
width:auto;
margin: auto;
margin-bottom:8px;
}
.service-link i{
font-size:0.7rem;
transition:transform 0.3s ease;
}

.service-link:hover{
background:#D5D6DB;
color:#06030C;
border-color:#D5D6DB;
}
.service-link:hover i{
transform:translateX(4px);
}

/* Tablet: 2 columns */
@media(max-width:900px){
.services-grid{
grid-template-columns:repeat(2,1fr);
gap:20px;
max-width:600px;
}
}

/* Mobile: 1 column */
@media(max-width:600px){
.our-services{padding:60px 20px;}
.services-grid{
grid-template-columns:1fr;
gap:16px;
margin-top:40px;
max-width:320px;
}
.service-card{
padding:16px;
}
.service-image{
aspect-ratio:16/10;
}
}

/* Styling the Parallax Section */
.main-parallax-section{
margin-top: 50px;
}
.parallax-section {
/* Set the background image */
background-image: url('../images/parallax.jpg');

/* Create the fixed effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;

/* Set the height of the section */
height: 400px;
/* Center the text inside */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-align: center;
}


.content-box {
background: linear-gradient(135deg,rgba(6,3,12,0.9) 0%,rgba(6,3,12,0.7) 100%);/* Semi-transparent black */
padding: 3rem;
border-radius: 8px;
color:#f5f5f5;
}

.content-box .hero-cta{
margin-top: 30px;
}


.faq-section{
padding:100px 24px;
max-width:800px;
margin:0 auto;
}

.faq-title{
text-align:center;
font-size:clamp(1.8rem,3vw,2.4rem);
font-weight:600;
color:#131424;
margin-bottom:48px;
position:relative;
}
.faq-title::after{
content:'';
display:block;
width:60px;
height:5px;
background:#D2A034;
margin:12px auto 0;
}

.faq-container{
margin-top:56px;
display:flex;
flex-direction:column;
gap:5px;

}

.faq-item{
border:1px solid #D2A034;
border-radius:12px;
overflow:hidden;
transition:border-color 0.3s ease;
}


.faq-question{
width:100%;
padding:20px 24px;
display:flex;
justify-content:space-between;
align-items:center;
background:#D5D6DB;
border:none;
cursor:pointer;
font-family:'Poppins',sans-serif;
font-size:0.9rem;
font-weight:500;
color:#06030C;
text-align:left;
transition:background 0.3s ease;
}

.faq-question:hover{
background:rgba(210,160,52,0.04);
}

.faq-icon{
color:#D2A034;
font-size:0.9rem;
transition:transform 0.3s ease;
flex-shrink:0;
margin-left:16px;
}

.faq-item.active .faq-icon{
transform:rotate(45deg);
}

.faq-answer{
max-height:0;
overflow:hidden;
transition:max-height 0.3s ease,padding 0.3s ease;
}

.faq-answer p{
padding:20px;
margin:0;
color:#475363;
font-size:0.9rem;
line-height:1.7;
}

.faq-item.active .faq-answer{
max-height:200px;
}

/* Mobile */
@media(max-width:600px){
.faq-section{
padding:60px 20px;
}
.faq-container{
margin-top:40px;
}
.faq-question{
padding:16px 20px;
font-size:0.95rem;
}
.faq-answer p{
padding:0 20px 16px;
font-size:0.85rem;
}
}


/* Upper Footer */
.footer-upper{
background:#131424;
padding:60px 24px;
}

.footer-container{
max-width:1200px;
margin:0 auto;
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

.footer-col h4{
color:#D2A034;
font-size:1rem;
font-weight:600;
margin-bottom:20px;
letter-spacing:0.5px;
}

.footer-links{
list-style:none;
padding:0;
margin:0;
}

.footer-links li{
margin-bottom:10px;
}

.footer-links a{
color:#D5D6DB;
text-decoration:none;
font-size:0.9rem;
transition:color 0.3s ease,padding-left 0.3s ease;
display:inline-block;
}

.footer-links a:hover{
color:#D2A034;
}

.footer-contact p{
color:#D5D6DB;
font-size:0.9rem;
margin-bottom:12px;
display:flex;
align-items:flex-start;
gap:10px;
line-height:1.5;
}

.footer-contact i{
color:#D2A034;
margin-top:3px;
font-size:0.85rem;
}

/* Social Icons */
.social-icons{
display:flex;
gap:12px;
}

.social-icons a{
width:38px;
height:38px;
border-radius:50%;
background:#475363;
display:flex;
align-items:center;
justify-content:center;
color:#06030C;
text-decoration:none;
transition:all 0.3s ease;
border:1px solid #06030C;
}

.social-icons a:hover{
background:#D2A034;
color:#06030C;
}

/* App Links */
.app-links{
display:flex;
flex-direction:column;
gap:10px;
}

.app-btn{
display:flex;
align-items:center;
gap:10px;
padding:10px 16px;
background:#475363;
border:1px solid rgba(255,255,255,0.1);
border-radius:8px;
color:#06030C;
text-decoration:none;
font-size:0.9rem;
transition:all 0.3s ease;
}

.app-btn i{
font-size:1.2rem;
color:#06030C;
}

.app-btn span{
font-weight:500;
}

.app-btn:hover{
background:#D2A034;
border-color:#D2A034;
color:#06030C;
}


/* Lower Footer */
.footer-lower{
background:#06030C;
padding:20px 24px;
border-top:1px solid #D2A034;
}

.footer-container.lower{
display:flex;
justify-content:space-between;
align-items:center;
font-size:0.85rem;
color:#B9B8BD;
}




/* Tablet */
@media(max-width:900px){
.footer-container{
grid-template-columns:repeat(2,1fr);
}
}

/* Mobile */
@media(max-width:600px){
.footer-upper{
padding:40px 20px;
}

.footer-container{
grid-template-columns:1fr;
gap:32px;
}

.footer-container.lower{
flex-direction:column;
gap:8px;
text-align:center;
}

.app-links{
flex-direction:row;
}
}

.page-title{
  font-family:'Poppins',sans-serif;
  position:relative;
  min-height:220px;
  background:url('../images/parallax.jpg') center/cover no-repeat;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.page-title-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(6,3,12,0.9) 0%,rgba(6,3,12,0.7) 100%);
}

.page-title-content{
  position:relative;
  z-index:1;
  text-align:center;
  color:#fff;
  padding:0 24px;
}

.page-title-content h1{
  font-size:clamp(1.8rem,4vw,2.4rem);
  font-weight:700;
  margin-bottom:12px;
  letter-spacing:-0.5px;
}




/* Story Section */
.story-section{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  max-width:1200px;
  margin:0 auto;
  padding:60px 24px;
  align-items:center;
}

.story-title{
  font-size:2rem;
  font-weight:700;
  color:#131424;
  margin-bottom:40px;
}

.story-timeline{
  position:relative;
  padding-left:30px;
}

.story-timeline::before{
  content:'';
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(to bottom,#D2A034,transparent);
}

.timeline-item{
  position:relative;
  margin-bottom:30px;
}

.timeline-item::before{
  content:'';
  position:absolute;
  left:-34px;
  top:4px;
  width:10px;
  height:10px;
  background:#D2A034;
  border-radius:50%;
  border:2px solid #fff;
  box-shadow:0 0 0 2px #D2A034;
}

.timeline-item .year{
  display:block;
  font-size:1.2rem;
  font-weight:700;
  color:#D2A034;
  margin-bottom:6px;
}

.timeline-item p{
  color:#555;
  font-size:0.95rem;
  line-height:1.6;
}

.story-visual{
  display:flex;
  justify-content:center;
  align-items:center;
}

.visual-placeholder{
  width:300px;
  height:400px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}



/* Pillars Section */
.pillars-section{
  background:#faf9f7;
  padding:50px 24px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  max-width:1200px;
  margin:0 auto;
}

.pillar-card{
  background:#fff;
  border-radius:20px;
  padding:40px 30px;
  box-shadow:0 4px 20px rgba(0,0,0,0.05);
}


.pillar-header{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:20px;
}

.pillar-icon{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.4rem;
  flex-shrink:0;
}

.mission .pillar-icon{background:#D2A034;color:#06030C;}
.vision .pillar-icon{background:#D2A034;color:#06030C;}
.values .pillar-icon{background:#D2A034;color:#06030C;}

.pillar-card h3{
  font-size:1.4rem;
  font-weight:600;
}

.mission h3{color:#06030C;}
.vision h3{color:#06030C;}
.values h3{color:#06030C;}

.pillar-text{
  font-size:0.95rem;
  color:#555;
  line-height:1.7;
  margin-bottom:24px;
}

.pillar-points{
  list-style:none;
  padding:0;
}

.pillar-points li{
  font-size:0.85rem;
  color:#444;
  padding:8px 0;
  display:flex;
  align-items:center;
  gap:10px;
}

.pillar-points li i{
  color:#D2A034;
  font-size:0.7rem;
}

/* Team Section */
.team-section{
  padding:50px 24px;
  text-align:center;
  max-width:1000px;
  margin:0 auto;
  
}

.team-title{
  font-size:2rem;
  font-weight:700;
  margin-bottom:12px;
  color: #131424;
}

.team-subtitle{
  color:#666;
  margin-bottom:48px;
  text-align: left;
}

.office-photo{
  width: 80%;
  border-radius: 10px;
  border: 2px solid #D2A034;
}

.team-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
}

.team-member{
  text-align:center;

}

.member-avatar{
  width:60px;
  height:60px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 16px;
  color: #06030C;
  background: #D2A034;
  border-radius:50%;
  }

  .member-avatar i{
    width: 100%;
  }

.team-member h4{
  font-size:1.1rem;
  font-weight:600;
  margin-bottom:4px;
}

.team-member span{
  font-size:0.85rem;
  color:#777;
}


/* Responsive */
@media(max-width:900px){
  .story-section{grid-template-columns:1fr;}
  /*.story-visual{display:none;}*/
  .pillars-section{grid-template-columns:1fr;}
  .team-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
  .story-section,.pillars-section,.team-section{padding:60px 20px;}
  .pillar-card{padding:30px 24px;}
  .team-grid{gap:20px;}
}

.board-section{
  font-family:'Poppins',sans-serif;
  background:#faf9f7;
  padding:100px 24px;
}


/* Container */
.directors-container{
  max-width:1000px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:40px;
}

/* Director Profile */
.director-profile{
  display:grid;
  grid-template-columns:280px 1fr;
  gap:0;
  background:#D5D6DB;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(6,3,12,0.06);

}



/* Image Side */
.director-image{
  position:relative;
  background:#06030C;
  padding:24px;
  display:flex;
  height: 300px;
/*   align-items:center;
  justify-content:center; */
}

.image-frame{
  position:relative;
  width:100%;
  aspect-ratio:3/4;
  border-radius:12px;
  overflow:hidden;
  border:3px solid #D2A034;
}

.portrait-placeholder{
  width:100%;
  height:100%;
  background:#131424;
  display:flex;
  align-items:center;
  justify-content:center;
}

.portrait-placeholder img{
 width: 100%;
 height: 100%;
}

.accent-bar{
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:4px;
  background:#D2A034;
}

/* Content Side */
.director-content{
  padding:40px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.director-position{
  display:inline-block;
  font-size:1.6rem;
  font-weight:700;
  color:#131424;
  text-transform:uppercase;
  letter-spacing:1px;
  margin-bottom:8px;
}

.director-name{
  font-size:1.6rem;
  font-weight:600;
  color:#06030C;
  margin-bottom:16px;
}

.director-bio{
  font-size:0.95rem;
  color:#555;
  line-height:1.8;
  margin-bottom:24px;
}

.director-meta{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}

.director-meta span{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.85rem;
  color:#666;
  font-weight:500;
}

.director-meta i{
  color:#D2A034;
  font-size:0.8rem;
}

/* Tablet */
@media(max-width:900px){
  .director-profile{
    grid-template-columns:240px 1fr;
  }
  .director-content{
    padding:32px;
  }
  .director-name{
    font-size:1.5rem;
  }
}

/* Mobile */
@media(max-width:600px){
  .board-section{
    padding:60px 20px;
  }
  .director-profile{
    grid-template-columns:1fr;
  }
  .director-image{
    padding:20px;
    padding-bottom:0;
  }
  .image-frame{
    max-width:200px;
    margin:0 auto;
  }
  .director-content{
    padding:28px;
    text-align:center;
  }
  .director-meta{
    justify-content:center;
  }
}

.gm-section{
  font-family:'Poppins',sans-serif;
  background:#fff;
  padding:0px 24px 100px 24px;
}


/* 1x1 Grid Layout */
.gm-grid{
  max-width:800px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:60px;
}

.gm-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  background:#D5D6DB;
  padding-top: 40px;
  padding-bottom: 40px;
  border-radius: 20px;
}

/* Photo Styling */
.gm-photo{
  position:relative;
  width:60px;
  height:60px;
  margin-bottom:24px;
  
}

.photo-frame{
  position:relative;
  width:100%;
  height:100%;
  border-radius:20%;
  overflow:hidden;
  z-index:1;
}



.portrait-placeholder i{
  color: #D2A034;
  font-size: 30px;
}


/* Info Styling */
.gm-info{
  display:flex;
  flex-direction:column;
  align-items:center;
}

.gm-name{
  font-size:1.4rem;
  font-weight:700;
  color:#06030C;
  margin-bottom:6px;
}

.gm-designation{
  font-size:0.9rem;
  color:#777;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.gm-line{
  width:40px;
  height:3px;
  background:#D2A034;
  margin-top:16px;
  border-radius:2px;
}

/* Mobile */
@media(max-width:600px){
  .gm-section{
    padding:60px 20px;
  }
  .gm-grid{
    grid-template-columns:1fr;
    gap:40px;
  }
  .gm-photo{
    width:160px;
    height:160px;
  }
  .photo-ring{
    inset:-10px;
  }
  .portrait-placeholder i{
    font-size:2.5rem;
  }
}


.branches-section{
  font-family:'Poppins',sans-serif;
  background:#faf9f7;
  padding:100px 24px;
}


/* Grid Layout - 2x2 */
.branches-grid{
  max-width:1000px;
  margin:0 auto;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

/* All Branch Cards - Left Aligned */
.branch-card{
  background:#D5D6DB;
  border-radius:16px;
  padding:32px;
  position:relative;
  border:1px solid #131424;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}


.branch-icon{
  width:56px;
  height:56px;
  background:#131424;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:20px;
}


.branch-icon i{
  font-size:2rem;
  color:#D2A034;
}

.branch-card.featured .branch-icon i{
  color:#06030C;
}

.branch-name{
  font-size:1.25rem;
  font-weight:600;
  margin-bottom:12px;
  color:#131424;
}

.branch-address{
  color:#131424;
  font-size:0.9rem;
  line-height:1.6;
  margin-bottom:16px;
}

.branch-card.featured .branch-address{
  color:#aaa;
}

.branch-contact{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-bottom:16px;
}

.branch-contact span{
  color:#131424;
  font-size:0.9rem;
  display:flex;
  align-items:center;
  gap:10px;
}

.branch-card.featured .branch-contact a{
  color:#ccc;
}


.branch-contact i{
  color:#D2A034;
  font-size:0.9rem;
  width:16px;
  text-align:center;
}

.branch-hours{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:0.85rem;
  color:#131424;
  padding-top:16px;
  border-top:1px solid rgba(6,3,12,0.08);
  width:100%;
}

.branch-card.featured .branch-hours{
  color: #131424;
  border-top-color:rgba(255,255,255,0.1);
}

.branch-hours i{
  color:#D2A034;
  font-size:0.9rem;
  width:16px;
  text-align:center;
}

/* Tablet & Mobile */
@media(max-width:768px){
  .branches-grid{
    grid-template-columns:1fr;
    max-width:500px;
  }
}

@media(max-width:600px){
  .branches-section{
    padding:60px 20px;
  }
  .branch-card{
    padding:28px;
  }
  .branch-card.featured{
    padding-top:36px;
  }
  .branch-badge{
    left:28px;
  }
}

.career-section{
  font-family:'Poppins',sans-serif;
  background:#fff;
  padding:100px 24px;
  max-width:1000px;
  margin:0 auto;
}


/* Jobs Container */
.jobs-container{
  display:flex;
  flex-direction:column;
  gap:32px;
}

/* Job Card */
.job-card{
  background:#faf9f7;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(6,3,12,0.06);
  transition:box-shadow 0.3s ease;
}

.job-card:hover{
  box-shadow:0 20px 40px rgba(6,3,12,0.08);
}

/* Job Header */
.job-header{
  background:#131424;
  padding:28px 32px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
}

.job-title-wrap{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.job-title{
  font-size:1.4rem;
  font-weight:600;
  color:#fff;
  margin:0;
}

.job-dept{
  font-size:0.85rem;
  color:#D5D6DB;
  font-weight:500;
}

.job-type{
  background:#D5D6DB;
  color:#06030C;
  font-size:0.8rem;
  font-weight:600;
  padding:6px 16px;
  border-radius:20px;
  text-transform:uppercase;
}

/* Job Content */
.job-content{
  padding:32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}

.job-block h4{
  font-size:1rem;
  font-weight:600;
  color:#06030C;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:8px;
}

.job-block h4 i{
  color:#D2A034;
  font-size:0.9rem;
}

.job-block ul{
  list-style:none;
  padding:0;
  margin:0;
}

.job-block ul li{
  font-size:0.9rem;
  color:#555;
  padding:8px 0;
  padding-left:20px;
  position:relative;
  line-height:1.6;
}

.job-block ul li::before{
  content:'•';
  position:absolute;
  left:0;
  color:#D2A034;
  font-weight:bold;
}

/* Benefits */
.job-block.benefits{
  grid-column:span 2;
}

.benefits-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.benefits-tags span{
  background:#fff;
  color:#555;
  font-size:0.8rem;
  padding:8px 16px;
  border-radius:20px;
  border:1px solid rgba(6,3,12,0.08);
}

/* Apply Section */
.job-apply{
  background:#fff;
  padding:24px 32px;
  border-top:1px solid rgba(6,3,12,0.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
}

.job-apply p{
  margin:0;
  color:#666;
  font-size:0.9rem;
}

.apply-email{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#D5D6DB;
  color:#06030C;
  text-decoration:none;
  font-weight:600;
  font-size:0.95rem;
  padding:12px 24px;
  border-radius:8px;

}


.apply-email i{
  font-size:0.9rem;
}

/* Responsive */
@media(max-width:768px){
  .job-content{
    grid-template-columns:1fr;
  }
  .job-block.benefits{
    grid-column:span 1;
  }
  .job-header{
    flex-direction:column;
    align-items:flex-start;
  }
  .job-apply{
    flex-direction:column;
    text-align:center;
  }
}

@media(max-width:600px){
  .career-section{
    padding:60px 20px;
  }
  .job-header,
  .job-content,
  .job-apply{
    padding:24px;
  }
  .job-title{
    font-size:1.2rem;
  }
}

.contact-section{
  font-family:'Poppins',sans-serif;
  padding:100px 24px;
  max-width:900px;
  margin:0 auto;
}


.contact-table th{
  text-align:left;
  padding:16px 20px;
  font-weight:600;
  color:#06030C;
  font-size:0.85rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
  border-bottom:2px solid #D2A034;
}

.contact-table td{
  padding:20px;
  vertical-align:middle;
}

.contact-table tr td:first-child{
  border-radius:12px 0 0 12px;
  width:35%;
}

.contact-table tr td:last-child{
  border-radius:0 12px 12px 0;
  width:25%;
}

/* Cell Content */
.cell-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:500;
  color:#06030C;
}

.cell-label i{
  width:40px;
  height:40px;
  background: #131424;
  color:#D2A034;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1rem;
  flex-shrink:0;
}

.cell-content .main-text{
  color:#06030C;
  font-weight:500;
  margin:0 0 4px 0;
}

 
.link-text{
  color:#06030C;
  text-decoration:none;
  font-weight:500;
  transition:color 0.3s ease;
  display:flex;
  align-items:center;
  gap:8px;
}
 
.link-text:hover{
  color:#D2A034;
}


.cell-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
}




/* Responsive */
@media(max-width:768px){
  .contact-table thead{
    display:table-header-group;
  }
  
  .contact-table tr{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    margin-bottom:12px;
  }
  
  .contact-table td{
    display:flex;
    align-items:center;
    padding:16px;
  }
  
  .contact-table tr td:first-child{
    grid-column:span 2;
    border-radius:12px 12px 0 0;
    width:100%;
  }
  
  .contact-table tr td:nth-child(2){
    border-radius:0 0 0 12px;
    flex:1;
  }
  
  .contact-table tr td:last-child{
    border-radius:0 0 12px 0;
    justify-content:flex-end;
    width:auto;
  }
  
  .cell-label i{
    width:32px;
    height:32px;
    font-size:0.9rem;
  }
}

@media(max-width:600px){
  .contact-section{
    padding:60px 20px;
  }
  
  .contact-table-wrap{
    padding:4px;
  }
  
  .contact-table td{
    padding:14px;
  }
  
  .cell-label{
    font-size:0.9rem;
  }
  
  .link-text{
    font-size:0.85rem;
  }
  
  .badge{
    font-size:0.7rem;
    padding:4px 10px;
  }
}


/* ===== SHARED SERVICE SECTION STYLES ===== */
.service-section{
  font-family:'Poppins',sans-serif;
  padding:100px 24px;
  background:#fff;
}

.service-section.alt{
  background:#faf9f7;
}

.service-container{
  max-width:1000px;
  margin:0 auto;
}

/* Header */
.service-header{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:48px;
  padding-bottom:24px;
  border-bottom:2px solid #D2A034;
}

.service-title-wrap h2{
  font-size:clamp(1.2rem,2vw,1.6rem);
  font-weight:600;
  color:#131424;
  margin-bottom:6px;
}


/* Content Blocks */
.service-content{
  display:flex;
  flex-direction:column;
  gap:40px;
}

.overview-block,
.products-block,
.steps-block{
  background:#fff;
  padding:32px;
  border-radius:16px;
  border:1px solid rgba(6,3,12,0.06);
}

.service-section.alt .overview-block,
.service-section.alt .products-block,
.service-section.alt .steps-block{
  background:#fff;
}

.overview-block h3,
.products-block h3,
.steps-block h3{
  font-size:1.1rem;
  font-weight:600;
  color:#06030C;
  margin-bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
}

.overview-block h3 i,
.products-block h3 i,
.steps-block h3 i{
  color:#D2A034;
  font-size:1rem;
}

.overview-block p{
  color:#555;
  line-height:1.8;
  font-size:0.95rem;
}

/* Product Grid */
.product-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}

.product-grid.compact{
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}

.product-item{
  background:#faf9f7;
  padding:24px;
  border-radius:12px;
  border:1px solid rgba(6,3,12,0.04);
}

.product-item i{
  font-size:1.4rem;
  color:#D2A034;
  margin-bottom:12px;
  display:block;
}

.product-item h4{
  font-size:1rem;
  font-weight:600;
  color:#06030C;
  margin-bottom:8px;
}

.product-item p{
  font-size:0.85rem;
  color:#666;
  line-height:1.6;
  margin:0;
}

/* Service List */
.service-list{
  list-style:none;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.service-list.two-col{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 24px;
}

.service-list li{
  display:flex;
  align-items:center;
  gap:10px;
  color:#555;
  font-size:0.9rem;
}

.service-list li i{
  color:#D2A034;
  font-size:0.8rem;
}

/* Steps */
.steps-block h3{
  margin-bottom: 40px;
}

.steps-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.step{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.step-num{
  width:36px;
  height:36px;
  background:#D2A034;
  color:#06030C;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:0.9rem;
  flex-shrink:0;
}

.step-content{
  flex:1;
  padding-top:6px;
}

.step-content h4{
  font-size:1rem;
  font-weight:600;
  color:#06030C;
  margin-bottom:6px;
}

.step-content p{
  font-size:0.9rem;
  color:#666;
  line-height:1.7;
  margin:0;
}



/* Responsive */
@media(max-width:768px){
  .service-section{
    padding:60px 20px;
  }
  
  .service-header{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  
  .service-num{
    font-size:2rem;
  }
  
  .overview-block,
  .products-block,
  .steps-block{
    padding:24px;
  }
  
  .product-grid,
  .product-grid.compact{
    grid-template-columns:1fr;
  }
  
  .service-list.two-col{
    grid-template-columns:1fr;
  }
  
  .step{
    gap:12px;
  }
  
  .step-num{
    width:32px;
    height:32px;
    font-size:0.85rem;
  }
}


/* ===== SHARED STYLES FOR ALL 3 SECTIONS ===== */
.data-table-section{
  font-family:'Poppins',sans-serif;
  padding:100px 24px;
  background:#fff;
}

.data-table-section.alt{
  background:#faf9f7;
}

.section-container{
  max-width:900px;
  margin:0 auto;
}



/* Table Wrapper */
.table-wrapper{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(6,3,12,0.06);
  border:1px solid rgba(6,3,12,0.06);
}

.data-table-section.alt .table-wrapper{
  box-shadow:0 4px 20px rgba(6,3,12,0.04);
}

/* Table Styles */
.data-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.95rem;
}

.data-table thead{
  background:#131424;
}

.data-table th{
  color:#D5D6DB;
  font-weight:600;
  text-align:left;
  padding:20px 24px;
  font-size:0.9rem;
  text-transform:uppercase;
  letter-spacing:0.5px;
}

.data-table th:last-child{
  text-align:right;
  width:200px;
}

.data-table td{
  padding:20px 24px;
  border-bottom:1px solid rgba(6,3,12,0.06);
  vertical-align:middle;
}

.data-table tr:last-child td{
  border-bottom:none;
}

.data-table tbody tr:hover{
  background:rgba(210,160,52,0.02);
}

/* Item Info Cell */
.item-info{
  display:flex;
  align-items:center;
  gap:16px;
}

.item-info i{
  width:44px;
  height:44px;
  background:rgba(210,160,52,0.1);
  color:#D2A034;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.1rem;
  flex-shrink:0;
}

.item-info strong{
  display:block;
  color:#06030C;
  font-weight:600;
  margin-bottom:4px;
}

.item-info span{
  color:#888;
  font-size:0.85rem;
}



/* Right Column Styles */
.data-table td:last-child{
  text-align:right;
}

/* Price Tags */
.price-tag{
  display:block;
  font-size:1.3rem;
  font-weight:700;
  color:#D2A034;
  margin-bottom:4px;
}

.price-note{
  font-size:0.8rem;
  color:#888;
}

/* Download Button */
.download-btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 20px;
  background:#B9B8BD;
  color:#06030C;
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  border-radius:8px;
  transition:all 0.3s ease;
  border:2px solid #06030C;
}

.download-btn:hover{
  background:#D5D6DB;
  color:#06030C;
  border-color:#B9B8BD;
}

.download-btn i{
  font-size:0.8rem;
}

/* Date & View Link */
.date-text{
  display:block;
  font-size:0.85rem;
  color:#888;
  margin-bottom:6px;
}

.view-link{
  color:#D2A034;
  text-decoration:none;
  font-size:0.85rem;
  font-weight:500;
  transition:color 0.3s ease;
}

.view-link:hover{
  color:#06030C;
  text-decoration:underline;
}

/* Section Note */
.section-note{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-top:24px;
  padding:20px 24px;
  background:rgba(210,160,52,0.05);
  border-radius:12px;
  border:1px solid rgba(210,160,52,0.1);
}

.section-note i{
  color:#D2A034;
  font-size:1rem;
  margin-top:2px;
}

.section-note p{
  margin:0;
  color:#666;
  font-size:0.9rem;
  line-height:1.6;
}

/* Responsive */
@media(max-width:768px){
  .data-table-section{
    padding:60px 20px;
  }
  
  .data-table th,
  .data-table td{
    padding:16px;
  }
  
  .data-table th:last-child,
  .data-table td:last-child{
    text-align:left;
    width:auto;
  }
  
  .item-info{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
  
  .item-info i{
    width:36px;
    height:36px;
    font-size:1rem;
  }
  
  .price-tag{
    font-size:1.1rem;
  }
  
  .download-btn{
    padding:8px 16px;
    font-size:0.8rem;
  }
  
  .data-table tr{
    display:block;
    padding:16px;
    border-bottom:1px solid rgba(6,3,12,0.06);
  }
  
  .data-table thead{
    display:none;
  }
  
  .data-table td{
    display:block;
    padding:8px 0;
    border:none;
  }
  
  .data-table td:first-child{
    font-weight:500;
  }
  
  .data-table td:last-child{
    padding-top:12px;
    border-top:1px dashed rgba(6,3,12,0.08);
    margin-top:12px;
  }
}