@import "https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Roboto:wght@300;400;500;700&display=swap";

#case-studies {
background-color:var(--white)
}

#contact {
align-items:center;
background-image:linear-gradient(135deg,#1e3a5fcc,#2a507acc),url(../img/background.webp);
color:var(--white);
display:flex;
height:100vh;
justify-content:center;
text-align:center
}

#contact a {
color:var(--secondary-color);
font-weight:500;
transition:color .3s ease
}

#contact a:hover {
color:var(--accent-color)
}

#contact h2 {
font-size:3rem;
margin-bottom:20px
}

#contact p,#contact .location,#contact .separator {
color:var(--white);
font-size:1.5rem;
margin-bottom:15px
}

/* Hero Section */
#hero {
  align-items: center;
  background-image: linear-gradient(135deg, #1e3a5fcc, #2a507acc),
    url(../img/background.webp);
  background-position: center;
  background-size: cover;
  color: var(--white);
  display: flex;
  flex-direction: column;
  height: calc(100vh - 80px);
  justify-content: center;
  position: relative;
  text-align: center;
}

#hero .container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 1140px;
  text-align: center;
}

#hero h1 {
  color: var(--secondary-color);
  font-size: 3.5rem;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  text-shadow: 0 2px 4px #0006;
}

#hero p {
  color: var(--white);
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

#hero svg {
  max-width: 800px;
  height: auto;
  margin: 0 auto 2rem;
  width: 100%;
}

#hero text {
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
}

#leadership {
background-image:linear-gradient(135deg,#1e3a5fcc,#2a507acc),url(../img/background.webp);
color:var(--white)
}

#leadership h2,#leadership h3,#leadership h4,#leadership p,#leadership .position,#leadership .member-bio,#leadership .member-details li {
color:inherit
}

#process {
background-color:var(--background-color);
padding:80px 0
}

.action-cards {
display:flex;
flex-wrap:wrap;
gap:20px;
margin-bottom:40px
}

.back-to-top {
align-items:center;
background-color:var(--secondary-color);
border:none;
border-radius:50%;
bottom:20px;
color:var(--white);
cursor:pointer;
display:none;
font-size:24px;
height:50px;
justify-content:center;
position:fixed;
right:20px;
transition:background-color .3s ease;
width:50px;
z-index:100
}

.back-to-top:hover {
background-color:var(--accent-color)
}

.card {
background-color:var(--white);
border-radius:8px;
box-shadow:0 2px 5px #0000001a;
flex:1 1 300px;
overflow:hidden;
padding:20px;
position:relative;
transition:all .3s ease
}

.card-content {
text-align:left
}

.card-content h3 {
margin-bottom:10px
}

.card-icon {
font-size:3em;
margin-bottom:15px;
text-align:center
}

.card:hover {
box-shadow:0 5px 15px #0000001a;
transform:translateY(-5px)
}

.case-study {
background-color:var(--background-color);
border-radius:8px;
box-shadow:0 4px 15px #0000001a;
margin-bottom:30px;
padding:40px;
transition:all .3s ease
}

.case-study-tabs {
display:flex;
justify-content:center;
margin-bottom:30px
}

.case-study-tabs button {
background-color:#f8f8f8;
border:none;
cursor:pointer;
margin:0 5px;
padding:10px 20px;
transition:all .3s ease
}

.case-study-tabs button.active {
background-color:var(--primary-color);
color:var(--white)
}

.case-study:hover {
box-shadow:0 15px 30px #00000026;
transform:translateY(-10px)
}

.contact-content {
align-items:center;
background-color:#ffffff1a;
border-radius:8px;
box-shadow:0 15px 35px #00000026;
display:flex;
flex-direction:column;
justify-content:center;
max-width:600px;
padding:60px;
transition:all .3s ease;
width:90%
}

.container {
margin:0 auto;
max-width:1140px;
padding:0 20px
}

.fade-in {
opacity:0;
transform:translateY(20px);
transition:opacity .5s ease,transform .5s ease
}

.fade-in.visible {
opacity:1;
transform:translateY(0)
}

.hamburger {
background:none;
border:none;
cursor:pointer;
display:none;
flex-direction:column;
height:18px;
justify-content:space-between;
margin:0;
padding:0;
width:24px;
z-index:1001
}

.hamburger-line {
background-color:var(--primary-color);
height:2px;
transition:all .3s ease;
width:100%
}

.header-content {
align-items:center;
display:flex;
justify-content:space-between;
padding:20px 0
}

.location {
font-weight:500
}

.member-bio {
font-size:.95rem;
line-height:1.6;
margin-bottom:20px
}

.member-details li,.team-category ul li {
margin-bottom:10px;
padding-left:20px;
position:relative
}

.member-details li::before {
color:var(--secondary-color);
content:"•";
left:0;
position:absolute
}

.member-details,.team-category ul {
list-style-type:none;
padding-left:0
}

.member-info {
flex:1
}

.member-info h3 {
margin-bottom:10px;
margin-top:0
}

.parallax-bg {
background-attachment:fixed;
background-position:center;
background-repeat:no-repeat;
background-size:cover;
position:relative
}

.parallax-bg .container {
position:relative;
z-index:2
}

.parallax-bg::before {
background:linear-gradient(135deg,#1e3a5fcc,#4a7c7bcc);
bottom:0;
content:'';
left:0;
position:absolute;
right:0;
top:0;
z-index:1
}

.phase {
flex:1 1 300px;
margin-bottom:40px
}

.phase-container {
display:flex;
flex-wrap:wrap;
gap:40px;
justify-content:center
}

.position {
font-size:1rem;
font-weight:600;
margin-bottom:15px
}

.progress-bar {
background-color:var(--secondary-color);
height:4px;
left:0;
position:fixed;
top:0;
transition:width .3s ease;
z-index:1001
}

.separator {
color:var(--accent-color);
margin:0 15px
}

.service-box {
background-color:var(--white);
border-radius:8px;
box-shadow:0 4px 15px #0000001a;
margin-bottom:30px;
padding:30px;
transition:all .3s ease
}

.service-box h4 {
color:var(--secondary-color);
margin-bottom:15px
}

.service-box ul {
list-style-type:disc;
margin-bottom:0;
padding-left:20px
}

.service-box ul li {
color:var(--text-color);
margin-bottom:10px
}

.service-box:hover {
box-shadow:0 10px 25px #00000026;
transform:translateY(-5px)
}

.site-name {
color:var(--primary-color);
font:700 28px 'Playfair Display',serif;
transition:color .3s ease
}

.team {
display:flex;
flex-direction:column;
gap:30px
}

.team-category {
background-color:#ffffff1a;
border-radius:8px;
margin-bottom:30px;
padding:30px;
transition:all .3s ease
}

.team-category h4 {
color:var(--secondary-color);
margin-bottom:20px
}

.team-category ul li::before {
color:var(--secondary-color);
content:"\2022";
display:inline-block;
font-weight:700;
left:0;
margin-left:-1em;
position:absolute;
top:0;
width:1em
}

.team-category:hover {
background-color:#fff3;
transform:translateY(-5px)
}

.team-member {
background-color:#ffffff1a;
border-radius:8px;
box-shadow:0 4px 15px #0000001a;
padding:20px;
transition:all .3s ease
}

.team-member-header {
display:flex;
gap:20px;
margin-bottom:20px
}

.team-member-image {
border-radius:4px;
height:auto;
object-fit:cover;
width:200px
}

.team-member:hover {
box-shadow:0 15px 30px #00000026;
transform:translateY(-5px)
}

.team-subsection {
margin-top:60px
}

::-webkit-scrollbar {
width:10px
}

::-webkit-scrollbar-thumb {
background:var(--secondary-color);
border-radius:5px
}

::-webkit-scrollbar-track {
background:#f1f1f1
}

:root {
--accent-color:#4A7C7B;
--background-color:#F5F5F5;
--primary-color:#1E3A5F;
--secondary-color:#C9A66B;
--text-color:#333;
--white:#FFF
}

a {
text-decoration:none;
transition:color .3s ease
}

a:hover,.site-name:hover,.site-name span {
color:var(--secondary-color)
}

body {
background-color:var(--background-color);
color:var(--text-color);
font:1rem/1.6 Roboto,sans-serif;
margin:0;
overflow-x:hidden;
padding:0
}

footer {
background-color:var(--primary-color);
color:var(--white);
padding:40px 0;
text-align:center
}

footer a {
color:var(--secondary-color);
margin:0 15px;
transition:all .3s ease
}

footer a:hover {
color:var(--white)
}

h1 {
font-size:3.5rem;
margin-bottom:30px
}

h1,h2,h3,h4 {
color:var(--primary-color);
font-family:'Playfair Display',serif;
line-height:1.3
}

h2 {
border-bottom:2px solid var(--secondary-color);
display:inline-block;
font-size:2.8rem;
margin-bottom:40px;
padding-bottom:10px
}

h3 {
font-size:2.2rem;
margin-bottom:25px
}

h4 {
font-size:1.8rem;
margin-bottom:20px
}

header {
background-color:#fffffff2;
box-shadow:0 2px 10px #0000001a;
left:0;
position:fixed;
top:0;
transition:all .3s ease;
width:100%;
z-index:1000
}

header.sticky {
background-color:#fffffff2;
box-shadow:0 2px 10px #0000001a
}

main {
padding-top:80px
}

nav ul {
display:flex;
list-style:none;
margin:0;
padding:0
}

nav ul li {
margin-left:40px
}

nav ul li a {
color:var(--primary-color);
font-weight:500;
position:relative;
transition:all .3s ease
}

nav ul li a::after {
background-color:var(--secondary-color);
bottom:-5px;
content:'';
height:2px;
left:0;
position:absolute;
transition:width .3s ease;
width:0
}

nav ul li a:hover::after {
width:100%
}

section {
padding:80px 0
}

@keyframes subtleWave {
0%,100% {
transform:translateY(0)
}

50% {
transform:translateY(-10px)
}
}

.card::before {
animation:subtleWave 8s ease-in-out infinite;
background:linear-gradient(45deg,#1e3a5f1a 0%,#c9a66b1a 100%);
bottom:0;
content:'';
left:0;
opacity:.5;
position:absolute;
right:0;
top:0;
z-index:-1
}

.card:nth-child(2)::before {
animation-delay:-2s
}

.card:nth-child(3)::before {
animation-delay:-4s
}

@media (max-width: 768px) {
#contact {
height:auto;
min-height:100vh
}

#contact p,#contact .location,#contact .separator {
font-size:1.2rem
}

#hero {
height:calc(100vh - 100px);
padding-top:100px
}

.back-to-top {
left:50%;
transform:translateX(-50%)
}

.card {
flex:1 1 100%
}

.contact-content {
padding:40px 20px
}

.container {
padding:0 15px
}

.hamburger {
display:flex
}

.team-member-header,nav.show ul,.phase-container,.action-cards {
flex-direction:column
}

.team-member-image {
margin:0 auto 20px;
max-width:300px;
width:100%
}

h1,#contact h2 {
font-size:2.5rem
}

h2 {
font-size:2rem
}

h3 {
font-size:1.8rem
}

h4 {
font-size:1.5rem
}

nav {
display:none
}

nav.show {
background-color:var(--white);
box-shadow:0 2px 10px #0000001a;
display:block;
left:0;
position:absolute;
top:100%;
width:100%
}

nav.show ul li {
margin:0;
text-align:center
}

nav.show ul li a {
display:block;
padding:15px 0
}
}

@media (min-width: 769px) {
.phase-container {
flex-direction:row
}
}

@media (min-width: 992px) {
.phase {
flex:0 1 30%;
max-width:30%
}

.phase-container {
flex-direction:row;
justify-content:space-between
}
}

.back-to-top {
align-items:center;
background-color:var(--secondary-color);
border:none;
border-radius:50%;
bottom:20px;
color:var(--white);
cursor:pointer;
display:none;
font-size:24px;
height:50px;
justify-content:center;
opacity:.7;
position:fixed;
right:20px;
transition:background-color .3s ease,opacity .3s ease;
width:50px;
z-index:1000
}

.back-to-top:hover {
background-color:var(--accent-color);
opacity:1
}

.case-study {
display:block;
margin-bottom:30px
}

.case-study-tabs {
display:flex;
justify-content:center;
margin-bottom:30px
}

.case-study-tabs button {
background-color:#f8f8f8;
border:none;
cursor:pointer;
margin:0 5px;
padding:10px 20px;
transition:all .3s ease
}

.case-study-tabs button.active {
background-color:var(--primary-color);
color:var(--white)
}

@media (max-width: 768px) {
.back-to-top {
bottom:15px;
font-size:20px;
height:40px;
right:15px;
width:40px
}
}

.back-to-top {
align-items:center;
background-color:var(--secondary-color);
border:none;
border-radius:50%;
bottom:20px;
color:var(--white);
cursor:pointer;
display:flex;
font-size:24px;
height:50px;
justify-content:center;
opacity:.7;
position:fixed;
right:20px;
transition:background-color .3s ease,opacity .3s ease;
width:50px;
z-index:1000
}

.back-to-top:hover {
background-color:var(--accent-color);
opacity:1
}

@media (max-width: 768px) {
.back-to-top {
bottom:15px;
font-size:20px;
height:40px;
right:15px;
width:40px
}
}

.phase-content {
display:flex;
flex-wrap:wrap;
gap:20px;
margin-top:30px
}

.service-box {
flex:1 1 300px
}

@media (max-width: 768px) {
.phase-content {
flex-direction:column
}
}

.phase-content {
display:none;
margin-top:30px
}

.phase-content.active {
display:block
}

.phase.active {
outline:none
}

.phase.active .phase-bg {
fill:#C9A66B;
fill:#C9A66B
}

.service-box {
background-color:#fff;
border-radius:8px;
box-shadow:0 4px 6px #0000001a;
flex:1 1 calc(33.333% - 20px);
padding:20px
}

.service-list {
display:flex;
flex-wrap:wrap;
gap:20px
}

@media (max-width: 768px) {
.service-box {
flex:1 1 100%
}

.service-list {
flex-direction:column
}
}

.case-study {
display:none
}

.case-study-tab {
align-items:center;
background-color:#f8f8f8;
border:none;
border-radius:8px;
cursor:pointer;
display:flex;
flex-direction:column;
padding:10px 20px;
transition:all .3s ease
}

.case-study-tab i {
font-size:24px;
margin-bottom:5px
}

.case-study-tab.active {
background-color:var(--primary-color);
color:#fff
}

.case-study-tabs {
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:center;
margin-bottom:30px
}

.case-study.active {
display:block
}

@media (max-width: 768px) {
.case-study-tab {
flex:1 1 calc(50% - 10px)
}
}

.mermaid {
align-items:center;
background-color:var(--background-color);
background-color:var(--background-color);
border-radius:8px;
border-radius:8px;
box-shadow:0 4px 15px #0000001a;
box-shadow:0 4px 15px #0000001a;
display:flex;
font-family:'Roboto',sans-serif;
justify-content:center;
margin:2rem auto;
margin:2rem auto;
max-width:100%;
max-width:90%;
padding:20px;
padding:20px;
text-align:center
}

.mermaid .cluster rect {
fill:#c9a66b1a;
rx:8px;
stroke:var(--secondary-color);
stroke-width:2px
}

.mermaid .edgeLabel .label rect {
fill:var(--background-color);
padding:5px 8px;
rx:4px;
stroke:var(--secondary-color);
stroke-width:1px
}

.mermaid .edgePath .path {
stroke:var(--primary-color);
stroke-width:2px
}

.mermaid .label {
color:var(--text-color);
font-family:'Roboto',sans-serif;
stroke:var(--secondary-color);
stroke-width:2px
}

.mermaid .node * {
transition:fill .3s ease,stroke .3s ease
}

.mermaid .node:hover rect,/* Add hover effect to nodes */
.mermaid .node:hover polygon,.mermaid .node:hover ellipse,.mermaid .node:hover circle {
fill:var(--secondary-color);
stroke:var(--primary-color)
}

.mermaid svg {
font-family:'Roboto',sans-serif;
height:auto;
height:auto;
max-width:100%;
overflow:visible;
overflow:visible;
width:100%
}

footer {
background-color:var(--primary-color);
color:var(--white);
padding:40px 0;
text-align:center
}

footer a {
color:var(--secondary-color);
margin:0 15px;
transition:all .3s ease
}

@media (max-width: 768px) {
footer a {
display:block;
margin:10px 0
}

footer nav {
text-align:center
}
}

@media (max-width: 768px) {
  #hero {
      height: calc(100vh - 100px);
      padding-top: 100px;
  }
}

footer {
  background-color: var(--primary-color);
  color: var(--white);
  padding: 40px 0;
  text-align: center;
}

footer a {
  color: var(--secondary-color);
  margin: 0 15px;
  transition: all .3s ease;
}

footer a:hover {
  color: var(--white);
}

.footer-nav {
  margin-top: 20px;
}

@media (max-width: 768px) {
  .footer-nav {
      display: flex;
      flex-direction: column;
      align-items: center;
  }

  footer a {
      margin: 10px 0;
  }
}

.linkedin-logo {
  vertical-align: middle;
  margin-left: 8px;
  width: 42px;
  height: 42px;
}

.team-member h3 {
  display: flex;
  align-items: center;
}

.team-member h3 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Process Section Specific Styles */
#process {
  font-family: Arial, sans-serif;
  color: #333;
  line-height: 1.6;
  padding: 40px 0;
}

#process .container {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 15px;
}

#process h1 {
  font-size: 2.5em;
  color: #1E3A5F;
  margin-bottom: 20px;
}

#process h2 {
  font-size: 2em;
  color: #1E3A5F;
  margin-top: 40px;
  margin-bottom: 20px;
  border-bottom: 2px solid #C9A66B;
  padding-bottom: 10px;
}

#process h3 {
  font-size: 1.75em;
  color: #4A7C7B;
  margin-top: 30px;
  margin-bottom: 15px;
}

#process h4 {
  font-size: 1.5em;
  color: #1E3A5F;
  margin-top: 25px;
  margin-bottom: 10px;
}

#process .content-box {
  background-color: #f9f9f9;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  padding: 20px;
  margin-bottom: 20px;
}

#process .content-box h5 {
  font-size: 1.1em;
  color: #4A7C7B;
  margin-top: 0;
  margin-bottom: 10px;
}

#process ul {
  padding-left: 20px;
  margin-bottom: 15px;
}

#process ul li {
  margin-bottom: 5px;
}

#process .note {
  font-style: italic;
  background-color: #fff3cd;
  border-left: 4px solid #C9A66B;
  padding: 10px 15px;
  margin-top: 15px;
}

#process .note strong {
  color: #856404;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #process h1 {
      font-size: 2em;
  }
  #process h2 {
      font-size: 1.75em;
  }
  #process h3 {
      font-size: 1.5em;
  }
  #process h4 {
      font-size: 1.25em;
  }
  #process .content-box {
      padding: 15px;
  }
}