:root{
  --default-color: #425466;
  --heading-color: #07111F;
  --accent-color: #2072B9;
}

.value-proposition-section{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fbfb 100%
  );
  overflow: hidden;
}

.value-wrapper{
  max-width: 920px;
  margin: auto;
  text-align: center;
}

/* Label */

.section-label{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  background: rgba(18,207,200,0.10);
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Heading */

.main-heading{
  margin-top: 22px;
  margin-bottom: 30px;
  font-size: 3.4rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--heading-color);
}

/* Intro */

.intro-content{
  max-width: 760px;
  margin: auto;
}

.intro-content p{
  font-size: 1.15rem;
  line-height: 2;
  color: var(--default-color);
  margin-bottom: 18px;
}

/* Philosophy Box */

.philosophy-box{
  margin-top: 60px;
  background: #ffffff;
  border-radius: 30px;
  padding: 60px;
  border: 1px solid rgba(7,17,31,0.06);
  box-shadow: 0 20px 60px rgba(7,17,31,0.06);
  position: relative;
}

.quote-icon{
  position: absolute;
  top: 25px;
  left: 40px;
  font-size: 5rem;
  line-height: 1;
  color: rgba(18,207,200,0.15);
  font-weight: 700;
}

.philosophy-box h3{
  font-size: 2rem;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 25px;
}

.conviction-text{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}

.conviction-text span{
  padding: 14px 24px;
  border-radius: 50px;
  background: rgba(18,207,200,0.08);
  color: var(--heading-color);
  font-size: 1rem;
  font-weight: 600;
}

.philosophy-box p{
  /* font-size: 1.08rem; */
  line-height: 2;
  color: var(--default-color);
  margin-bottom: 22px;
}

.divider-line{
  width: 90px;
  height: 4px;
  background: var(--accent-color);
  border-radius: 30px;
  margin: 35px auto;
}

/* Responsive */

@media (max-width: 991px){

  .main-heading{
    font-size: 2.8rem;
  }

  .philosophy-box{
    padding: 45px 35px;
  }
}

@media (max-width: 767px){

  .value-proposition-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .main-heading{
    font-size: 2.1rem;
  }

  .intro-content p,
  .philosophy-box p{
    font-size: 15.5px;
    line-height: 1.9;
  }

  .philosophy-box{
    padding: 40px 24px;
    border-radius: 24px;
  }

  .philosophy-box h3{
    font-size: 1.6rem;
  }

  .conviction-text{
    flex-direction: column;
    gap: 12px;
  }

  .conviction-text span{
    width: 100%;
    text-align: center;
  }

  .quote-icon{
    left: 20px;
    top: 15px;
    font-size: 4rem;
  }
}

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

.top-label{
    display: inline-block;
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 16px;
  }
  
  .main-title{
    font-size: 2.1rem;
    line-height: 1.2;
    font-weight: 700;
    color: var(--heading-color);
    max-width: 760px;
    margin: auto;
  }
  
  /* Triangle Layout */
  
  .triangle-container{
    position: relative;
    width: 100%;
    max-width: 620px;
    height: 420px;
    margin: auto;
  }
  
  /* Triangle */
  
  .triangle{
    position: absolute;
    left: 50%;
    top: 60px;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 180px solid transparent;
    border-right: 180px solid transparent;
    border-top: 300px solid rgba(66,84,102,0.18);
    filter: drop-shadow(0 20px 30px rgba(7,17,31,0.08));
  }
  
  /* Top Edge */
  
  .triangle::before{
    content: "";
    position: absolute;
    top: -302px;
    left: -182px;
    width: 365px;
    height: 10px;
    background: rgba(255,255,255,0.9);
    transform: rotate(-12deg);
    border-radius: 30px;
  }
  
  /* Labels */
  
  .label{
    position: absolute;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--heading-color);
  }
  
  .left-label{
    left: 0;
    top: 135px;
  }
  
  .right-label{
    right: 0;
    top: 20px;
  }
  
  .bottom-label{
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
  }
  
  /* Responsive */
  
  @media (max-width: 767px){
  
    .asset-class-section{
      padding-top: 60px !important;
      padding-bottom: 60px !important;
    }
  
    .main-title{
      font-size: 2rem;
    }
  
    .triangle-container{
      height: 300px;
      max-width: 100%;
    }
  
    .triangle{
      top: 50px;
      border-left: 110px solid transparent;
      border-right: 110px solid transparent;
      border-top: 190px solid rgba(66,84,102,0.18);
    }
  
    .triangle::before{
      width: 225px;
      left: -112px;
      top: -192px;
      height: 8px;
    }
  
    .label{
      font-size: 14px;
    }
  
    .left-label{
      top: 100px;
      left: 10px;
    }
  
    .right-label{
      right: 10px;
      top: 15px;
    }
  
    .bottom-label{
      bottom: 10px;
    }
  }

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


.asset-classes-section{
  /* background:#f8fafc; */
  overflow:hidden;
}

/* Heading */

.section-tag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 18px;
  border-radius:50px;
  background:rgba(18,207,200,0.10);
  color:var(--accent-color);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.4px;
}

/* .section-title{
  font-size:2.1rem;
  line-height:1.2;
  font-weight:700;
  color:var(--heading-color);
  margin-bottom:0;
} */

/* Cards */

.asset-card{
  position:relative;
  background:#b0d2f94f;
  border-radius:28px;
  padding:35px 30px;
  border:1px solid rgba(7,17,31,0.05);
  transition:all 0.35s ease;
  overflow:hidden;
}

.asset-card:hover{
  transform:translateY(-8px);
  box-shadow:0 20px 50px rgba(7,17,31,0.08);
}

.card-top-line{
  width:70px;
  height:4px;
  background:var(--accent-color);
  border-radius:30px;
  margin-bottom:12px;
}

.asset-card h3{
  /* font-size:2.5rem; */
  font-weight:700;
  color:var(--heading-color);
  margin-bottom:30px;
}

/* List */

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

.asset-list li{
  position:relative;
  padding-left:26px;
  margin-bottom:14px;
  /* font-size:1.1rem; */
  line-height:1.7;
  color:var(--default-color);
  transition:0.3s ease;
}

.asset-list li:last-child{
  margin-bottom:0;
}

.asset-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:12px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--accent-color);
}

.asset-list li:hover{
  transform:translateX(6px);
  color:var(--heading-color);
}

/* Mobile */

@media(max-width:767px){

  .asset-classes-section{
    padding-top:60px !important;
    padding-bottom:60px !important;
  }

  .section-title{
    font-size:2rem;
  }

  .asset-card{
    padding:30px 24px;
    border-radius:22px;
  }

  .asset-card h3{
    font-size:2rem;
    margin-bottom:24px;
  }

  .asset-list li{
    font-size:15.5px;
    margin-bottom:16px;
  }
}

/* Tablet */

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

  .section-title{
    font-size:2.5rem;
  }

  .asset-card h3{
    font-size:2.2rem;
  }
}

.partner-note{
max-width: 980px;
margin: 70px auto 0;
text-align: center;
padding: 0 15px;
}

.partner-note p{
/* font-size: 2rem; */
line-height: 1.7;
font-weight: 400;
color: var(--heading-color);
letter-spacing: -0.5px;
margin: 0;
}

/* Responsive */

@media (max-width: 991px){

.partner-note p{
font-size: 1.6rem;
}
}

@media (max-width: 767px){

.partner-note{
margin-top: 50px;
}

.partner-note p{
font-size: 1.15rem;
line-height: 1.9;
}
}

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


.wealth-journey-section{
  /* background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fbfb 100%
  ); */
  overflow: hidden;
}

/* Left Side */

.section-label{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  background: rgba(18,207,200,0.10);
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.main-heading{
  margin-top: 22px;
  margin-bottom: 24px;
  font-size: 3.2rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--heading-color);
}

.intro-text{
  font-size: 1.12rem;
  line-height: 2;
  color: var(--default-color);
  margin-bottom: 40px;
}

/* Quote Card */

.quote-card{
  position: relative;
  background: #ffffff;
  border-radius: 28px;
  padding: 45px;
  border: 1px solid rgba(7,17,31,0.06);
  box-shadow: 0 20px 60px rgba(7,17,31,0.06);
}

.quote-mark{
  position: absolute;
  top: 15px;
  left: 25px;
  font-size: 5rem;
  line-height: 1;
  color: rgba(18,207,200,0.15);
  font-weight: 700;
}

.quote-card h3{
  font-size: 1.8rem;
  line-height: 1.4;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 700;
}

.quote-card p{
  margin: 0;
  font-size: 1.02rem;
  line-height: 2;
  color: var(--default-color);
}

/* Right Side */

.value-card{
  background: #07111F;
  border-radius: 30px;
  padding: 50px;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

.mini-line{
  width: 80px;
  height: 4px;
  border-radius: 20px;
  background: var(--accent-color);
  margin-bottom: 28px;
}

.top-description{
  font-size: 1.05rem;
  line-height: 2;
  color: rgba(255,255,255,0.82);
  margin-bottom: 20px;
}

.divider{
  width: 100%;
  height: 1px;
  background: rgba(255,255,255,0.10);
  margin: 35px 0;
}

.value-title{
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 25px;
  color: #ffffff;
}

.value-card p{
  font-size: 1rem;
  line-height: 2;
  color: rgba(255,255,255,0.82);
  margin-bottom: 20px;
}

/* Highlight Box */

.highlight-box{
  margin-top: 35px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.highlight-item{
  padding: 18px 22px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}

.highlight-item span{
  font-size: 15px;
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.85);
}

.highlight-item.active{
  background: rgba(18,207,200,0.12);
  border-color: rgba(18,207,200,0.25);
}

.highlight-item.active span{
  color: #080808;
  font-weight: 600;
}

/* Responsive */

@media (max-width: 991px){

  .main-heading{
    font-size: 2.6rem;
  }

  .quote-card,
  .value-card{
    padding: 38px;
  }
}

@media (max-width: 767px){

  .wealth-journey-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .main-heading{
    font-size: 2rem;
  }

  .intro-text,
  .quote-card p,
  .value-card p,
  .top-description{
    font-size: 15.5px;
    line-height: 1.9;
  }

  .quote-card,
  .value-card{
    padding: 30px 24px;
    border-radius: 24px;
  }

  .quote-card h3,
  .value-title{
    font-size: 1.5rem;
  }

  .quote-mark{
    left: 15px;
    top: 10px;
    font-size: 4rem;
  }
}

/* ====================================== */


/* .our-process-section{
  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #f7fbfb 100%
  );
  overflow: hidden;
} */

/* Header */

.section-header{
  /* max-width: 780px; */
  margin: auto;
  margin-bottom: 70px;
}

.section-label{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  background: rgba(18,207,200,0.10);
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.section-title{
  /* margin-top: 22px; */
  /* margin-bottom: 22px; */
  /* font-size: 2.1rem; */
  /* line-height: 1.15; */
  /* font-weight: 700; */
  /* color: var(--heading-color); */
}

.section-subtitle{
  font-size: 1.08rem;
  line-height: 2;
  color: var(--default-color);
}

/* Process Layout */

.process-wrapper{
  display: flex;
  flex-direction: column;
  gap: 30px;
  /* max-width: 980px; */
  margin: auto;
}

.process-card{
  display: flex;
  /* align-items: flex-start; */
  align-items: center;
  gap: 28px;
  padding: 40px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(7,17,31,0.06);
  box-shadow: 0 20px 60px rgba(7,17,31,0.05);
  transition: all 0.3s ease;
}

.process-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 30px 70px rgba(7,17,31,0.08);
}

/* Step Number */

.step-number{
  width: 72px;
  height: 72px;
  min-width: 72px;
  border-radius: 50%;
  background: rgba(18,207,200,0.12);
  color: var(--accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  font-weight: 700;
}

.process-card > .image{
  max-width: 400px;
}

/* Content */

.process-content{
  flex: 1;
}

.mini-tag{
  display: inline-block;
  margin-bottom: 14px;
  color: var(--accent-color);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.process-content h3{
  font-size: 2rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 20px;
}

.process-content p{
  font-size: 1.02rem;
  line-height: 2;
  color: var(--default-color);
  margin-bottom: 22px;
}

.highlight-line{
  padding: 16px 22px;
  border-left: 4px solid var(--accent-color);
  background: rgba(18,207,200,0.06);
  border-radius: 0 14px 14px 0;
  color: var(--heading-color);
  font-size: 15px;
  line-height: 1.8;
  font-weight: 600;
}

/* Responsive */

@media (max-width: 991px){

  .section-title{
    font-size: 2.6rem;
  }

  .process-card{
    padding: 35px;
  }

  .process-content h3{
    font-size: 1.7rem;
  }
}

@media (max-width: 768px){

  .our-process-section{
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }

  .section-title{
    font-size: 2rem;
  }

  .section-subtitle,
  .process-content p{
    font-size: 15.5px;
    line-height: 1.9;
  }

  .process-card{
    flex-direction: column;
    gap: 20px;
    padding: 28px 22px;
    border-radius: 22px;
  }

  .step-number{
    width: 60px;
    height: 60px;
    min-width: 60px;
    font-size: 1.3rem;
  }

  .process-content h3{
    font-size: 1.45rem;
  }

  .highlight-line{
    font-size: 14px;
    padding: 14px 18px;
  }
}

 
/* formula section */
.minimal-formula-section{
    /* background: #fff; */
  }
  
  /* Heading */
  
  .top-label{
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
  }
  
  .main-heading{
    margin-top: 14px;
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.2;
  }
  
  /* Formula Layout */
  
  .formula-grid{
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 24px;
    flex-wrap: wrap;
  }
  
  .formula-box{
    flex: 1;
    min-width: 240px;
    max-width: 290px;
    padding: 35px 28px;
    border: 1px solid rgba(7,17,31,0.08);
    border-radius: 20px;
    background: #fff;
    transition: all 0.3s ease;
  }
  
  .formula-box:hover{
    transform: translateY(-5px);
    border-color: rgba(18,207,200,0.4);
  }
  
  .formula-box h3{
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-bottom: 18px;
    line-height: 1.4;
  }
  
  .formula-box p{
    margin: 0;
    font-size: 15.5px;
    line-height: 1.9;
    color: var(--default-color);
  }
  
  .formula-symbol{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 600;
    color: var(--accent-color);
  }
  
  /* Bottom */
  
  .bottom-note{
    margin-top: 50px;
  }
  
  .bottom-note p{
    color: var(--default-color);
    font-size: 1rem;
    margin: 0;
  }
  
  /* Responsive */
  
  @media (max-width: 991px){
  
    .formula-grid{
      flex-direction: column;
      align-items: center;
    }
  
    .formula-symbol{
      transform: rotate(90deg);
    }
  
    .formula-box{
      width: 100%;
      max-width: 420px;
    }
  }
  
  @media (max-width: 767px){
  
    .minimal-formula-section{
      padding-top: 60px !important;
      padding-bottom: 60px !important;
    }
  
    .main-heading{
      font-size: 2rem;
    }
  
    .formula-box{
      padding: 28px 22px;
    }
  
    .formula-box h3{
      font-size: 1rem;
    }
  
    .formula-box p{
      font-size: 15px;
    }
  }

/* ================================================== */
/* =========================
HEADER INITIAL STATE
========================= */

.header {
background: transparent;
transition: all 0.4s ease;
transform: translateY(-120%);
opacity: 0;
visibility: hidden;
padding: 18px 0;
}

/* SHOW HEADER */
.header.header-show {
transform: translateY(0);
opacity: 1;
visibility: visible;
background: rgba(255,255,255,0.98);
backdrop-filter: blur(10px);
box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

/* OPTIONAL LOGO SIZE */
.header .logo img {
max-height: 60px;
}

/* =========================
RESET
========================= */

/* =========================
HERO SECTION
========================= */

.hero-section {

position: relative;

width: 100%;

height: 100dvh;

min-height: 100svh;

overflow: hidden;

background: #000;
}

/* =========================
VIDEO
========================= */

.hero-video {

position: absolute;

top: 50%;
left: 50%;

width: 100%;
height: 100%;

object-fit: cover;

transform: translate(-50%, -50%);

z-index: 1;
}

/*
IMPORTANT:
For ultra-wide videos
*/

@media (min-aspect-ratio: 16/9) {

.hero-video {

  width: 100%;
  height: auto;

  min-height: 100%;
}
}

/*
IMPORTANT:
For mobile portrait videos
*/

@media (max-aspect-ratio: 16/9) {

.hero-video {

  width: auto;
  height: 100%;

  min-width: 100%;
}
}

/* =========================
OVERLAY
========================= */

.hero-overlay {

position: absolute;

inset: 0;

background:
  linear-gradient(
      to bottom,
      rgba(0,0,0,0.15),
      rgba(0,0,0,0.35)
  );

z-index: 2;
}

/* =========================
SCROLL INDICATOR
========================= */

.scroll-indicator {

position: absolute;

left: 50%;
bottom: 24px;

transform: translateX(-50%);

z-index: 10;

border: none;
background: transparent;

color: #fff;

font-size: 12px;

letter-spacing: 2px;

text-transform: uppercase;

cursor: pointer;

animation: bounce 2s infinite;
}

/* =========================
ANIMATION
========================= */

@keyframes bounce {

0%,20%,50%,80%,100% {
  transform: translateX(-50%) translateY(0);
}

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

60% {
  transform: translateX(-50%) translateY(-5px);
}
}

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

@media (max-width: 767px) {

.hero-section {

  /* height: 50svh; */
  min-height: 50svh;
}

.scroll-indicator {
  bottom: 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
}
}

/* =========================
TABLET
========================= */

@media (min-width: 768px) {

.scroll-indicator {
  font-size: 13px;
}
}

/* =========================
DESKTOP
========================= */

@media (min-width: 1200px) {

.scroll-indicator {

  font-size: 14px;
}
}


/* =========================
HERO SECTION
========================= */

.hero-section {

 position: relative;

 width: 100%;

 height: 100dvh;

 overflow: hidden;

 background: #000;
}

/* VIDEO */

.hero-video {

 position: absolute;

 /* inset: 0; */

 width: 100%;
 height: 100%;

 object-fit: cover;

 z-index: 1;
}

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

@media (max-width: 768px) {

 .hero-section {

     height: 55svh;
     min-height: 420px;
 }

 .hero-video {

     object-position: center center;
     object-fit: cover;
 }
}

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

@media (max-width: 480px) {

 .hero-section {

     height: 50svh;
     min-height: 360px;
 }

 .hero-video {

object-position: center center;
object-fit: contain;
}
}

/* =========================
TABLET
========================= */

@media (min-width: 769px) and (max-width: 1024px) {

 .hero-section {

     height: 75svh;
 }
}