/* ------------- Animations ------------- */

@keyframes fadeInFast {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

@keyframes fadeInSlow {
  0% {
    transform: translateY(5%);
    opacity: 0;
  }
  50% {
    transform: translateY(5%);
    opacity: 0;
  }  
  100% {
    transform: translateY(0%);
    opacity: 1;
  }
}

.fadeInFast {
  animation: 1.0s fadeInFast;
}

.fadeInSlow {
  animation: 1.0s fadeInSlow;
}

.fadeOut{
  display: none !important;
}

.fadeIn{
  display: block !important;
}

/* ------------- Backgrounds ------------- */

.bkg-black {
  background-color: black;
}

.bkg-white {
  background-color: white;
}


.bkg-black-2 {
  background-color: var(--black-2);
}

.bkg-blue-1 {
  background-color: var(--blue-1);
}

.bkg-grey-1 {
  background-color: #F8F9FA;
}

.bkg-red-1 {
  background-color: var(--red-1);
}

/* ------------- Buttons ------------- */

.blue-btn {
  background-color: var(--blue-2);
  color: white;
}

.blue-btn:active {
  background-color: var(--blue-1);
  color: white;
}

.blue-btn:hover {
  background-color: var(--blue-1);
  color: white;
}

.blue-btn-active {
  background-color: var(--blue-1);
  color: white;
}

/* ------------- Colours ------------- */

:root {
  --red-1: #aa131f;
  --red-2: #E3555F;
  --blue-1: #1b1464;
  --blue-2: #453E8F;
  --black-2: #1f1b1b;
}

.blue-1 {
  color: var(--blue-1);
}

.greyscale {
  filter: grayscale(100%);
}

.red-1 {
  color: var(--red-1);
}

/* ------------- Components ------------- */

.arrow-circle {
  height: 4rem;
}

@media (max-width: 576px) {
  .arrow-circle {
    height: 2rem;
  }
}

blockquote{
  font-size: 1.4em;
  font-style:italic;
  color: #555555;
  padding:1.2em 30px 1.2em 75px;
  border-left:8px solid var(--blue-1) ;
  line-height:1.6;
  position: relative;
}

blockquote::before{
  content: "\201C";
  color: var(--blue-1);
  font-size:4em;
  position: absolute;
  left: 10px;
  top:-10px;
}

blockquote::after{
  content: '';
}

blockquote span{
  display:block;
  color:#333333;
  font-style: normal;
  font-weight: bold;
  margin-top:1em;
}

.blockquote-carousel{
  height: 220px;
}

@media (max-width: 576px) {
  .blockquote-carousel {
     height: 400px;
  }
}

.card {
  border: 0px;
  box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.card-fund-badge {
  max-height: 350px;
}

@media (max-width: 767px) {
  .cio-banner {
    /* shift the background to the left on mobile */
    background-position: 70% center !important;
  }
}

.cio-banner {
  background-size: cover;
  min-height: 500px;
}

.headshot {
  border-radius: 2em 20px 2.5em 0.2in;
}

.insight-card-body {
  min-height: 100px;
}

.platform-logo {
  width: 100%;
  filter: grayscale(100%);
}

.murmuration {
  background: linear-gradient(rgba(255,255,255,0.7), rgb(255, 255, 255)), url('../png/murmuration-smallest.png') no-repeat top center;
  background-size: contain;
  width: 100%;
}

.podcast-card {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3e%3cg mask='url(%26quot%3b%23SvgjsMask1041%26quot%3b)' fill='none'%3e%3crect width='1440' height='560' x='0' y='0' fill='rgba(250%2c 75%2c 91%2c 1)'%3e%3c/rect%3e%3cpath d='M0%2c300.331C60.744%2c302.977%2c126.068%2c308.625%2c176.957%2c275.35C227.732%2c242.15%2c238.975%2c175.375%2c270.432%2c123.502C306.963%2c63.261%2c386.572%2c15.595%2c376.787%2c-54.174C367.009%2c-123.895%2c280.523%2c-151.405%2c225.685%2c-195.557C180.882%2c-231.629%2c136.71%2c-264.172%2c84.909%2c-289.173C23.59%2c-318.768%2c-36.407%2c-361.435%2c-104.165%2c-354.754C-176.328%2c-347.639%2c-255.762%2c-315.514%2c-290.955%2c-252.114C-326.022%2c-188.94%2c-270.468%2c-111.858%2c-278.831%2c-40.09C-286.844%2c28.68%2c-362.429%2c89.606%2c-338.338%2c154.514C-314.528%2c218.664%2c-230.157%2c233.272%2c-167.319%2c260.354C-113.57%2c283.519%2c-58.473%2c297.784%2c0%2c300.331' fill='%23fa3d4f'%3e%3c/path%3e%3cpath d='M1440 1089.571C1535.649 1066.2640000000001 1611.165 1004.1379999999999 1703.5230000000001 970.049 1829.768 923.453 2017.21 971.2 2081.3 852.8720000000001 2143.848 737.391 2015.603 606.141 1966.629 484.282 1929.179 391.098 1885.701 305.93399999999997 1828.355 223.48899999999998 1764.249 131.325 1714.112 20.93399999999997 1611.955-25.625 1504.806-74.46000000000004 1373.951-79.71000000000004 1265.925-32.846000000000004 1161.662 12.384999999999991 1122.004 134.07600000000002 1047 219.46300000000002 971.336 305.602 860.215 362.829 823.086 471.301 782.897 588.711 790.681 720.309 836.024 835.827 882.691 954.7180000000001 960.8679999999999 1072.848 1078.62 1122.318 1192.437 1170.135 1320.055 1118.798 1440 1089.571' fill='%23ff5d6c'%3e%3c/path%3e%3c/g%3e%3cdefs%3e%3cmask id='SvgjsMask1041'%3e%3crect width='1440' height='560' fill='white'%3e%3c/rect%3e%3c/mask%3e%3c/defs%3e%3c/svg%3e");
  background-size: cover;
  border-radius: 10px;
}

.red-dot::after {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: var(--red-1);
  border-radius: 50%;
  margin-left: 5px; 
}

.team-member {
  border-bottom: 2px solid var(--blue-1);
}

/* ------------- Core ------------- */

a {
  color: var(--blue-1)
}

body {
  font-family: "Poppins";
  scroll-behavior: smooth;
}

.mh-75 {
  min-height: 75px;
}

.full-width {
  max-width: 100%;
  height: auto;
}

/* ------------- Fonts ------------- */

@font-face {
  font-family: "Poppins";
  src: url('../fonts/Poppins-Light.ttf');
  src: url('../fonts/Poppins-Light.ttf') format('truetype');
  font-display: swap;
}

@font-face {
  font-family: "AlexBrush";
  src: url('../fonts/AlexBrush-Regular.ttf');
  font-display: swap;
}

@font-face {
  font-family: "Satisfy";
  src: url('../fonts/Satisfy-Regular.ttf');
  font-display: swap;
}

.alex-brush {
  font-family: "AlexBrush";
}

.satisfy {
  font-family: "Satisfy";
}

/* ------------- Links ------------- */

.card-link:hover {
  box-shadow: rgba(0, 0, 0, 0.22) 0px 19px 43px;
  transform: translate3d(0px, -4px, 0px);
  transition: 0.3s ease-in-out;
  cursor: pointer;
}

.cta-link {
  text-decoration-color: transparent;
  transition: 0.4s ease-in-out;
  color: inherit;
}

.cta-link:hover {
  text-decoration-color: inherit;
}

.footer-link {
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

.social-link {
  text-decoration: none;
}

/* ------------- Marquee ------------- */

/* marquee container */
#trading-platforms .platform-marquee { overflow: hidden; position: relative; width: 100%; }

/* scroller holds two identical tracks to create an infinite loop */
#trading-platforms .platform-scroller {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: marquee var(--marquee-duration, 90s) linear infinite;
}

/* each track is a horizontal flex row of logo columns */
#trading-platforms .platform-track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
}

/* ensure each original column stays its intrinsic width and doesn't wrap */
#trading-platforms .platform-track > * { flex: 0 0 auto; }

/* logo sizing - adjust to taste */
#trading-platforms img.platform-logo { max-height: 120px; width: auto; display: block; }

/* animate by moving left one track width (scroller contains two identical tracks) */
@keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ------------- Navbar ------------- */

.navbar {
  height: 65px;
}

.navbar-collapse {
    padding: 10px;
    background-color: white;
    border-radius: 5px;
}

.nav-item {
  margin-right: 15px;
  border-bottom: 3px solid transparent;
}

.nav-item:hover, .nav-item-active {
  border-bottom: 3px solid var(--red-1);
  transition: 0.3s ease-in-out;
}

.scrolled {
  background-color: white;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

/* ------------- Timeline ------------- */

.circle {
  padding: 13px 20px;
  border-radius: 50%;
  background-color: var(--blue-1);
  color: #fff;
  max-height: 50px;
  z-index: 2;
}

.timeline div {
  padding: 0;
  height: 40px;
}
.timeline hr {
  border-top: 3px solid var(--blue-1);
  margin: 0;
  top: 17px;
  position: relative;
}
.timeline .col-2 {
  display: flex;
  overflow: hidden;
}
.timeline .corner {
  border: 3px solid var(--blue-1);
  width: 100%;
  position: relative;
  border-radius: 15px;
}
.timeline .top-right {
  left: 50%;
  top: -50%;
}
.timeline .left-bottom {
  left: -50%;
  top: calc(50% - 3px);
}
.timeline .top-left {
  left: -50%;
  top: -50%;
}
.timeline .right-bottom {
  left: 50%;
  top: calc(50% - 3px);
}

/* ------------- Videos (embedded) ------------- */

.responsive-object {
    position: relative;
}

.responsive-object iframe,
.responsive-object object,
.responsive-object embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}