body {
    /* font-family: 'Nunito', sans-serif; */
    font-family: 'Lato', sans-serif;
    color: #363636;
    /* margin: 0;
    padding: 0; */
}

html {
    scroll-behavior: smooth;
}

.has-text-primary {
    color: #425b72 !important;
}

.is-primary,
.is-primary:link,
.is-primary:visited {
    background-color: #425b72 !important;
    border-color: #425b72 !important;
    border: 1px solid transparent !important;
    /* Bulma’s default primary color */
    /* color: #fff !important; */
    /* White text to contrast the background */
    /* Optionally set a border color if needed: */
    /* border-color: transparent; */
}

.is-primary:hover,
.is-primary:focus,
.is-primary:active {
    background-color: #17212a !important;
    /* Darker shade or however you want */
    border-color: #425b72 !important;
}


.is-primary.is-light {
    /* A lighter shade of #00d1b2; feel free to pick your own light shade */
    background-color: #e8f9f6 !important;
    /* Text color matches the primary color so it stands out on the light background */
    color: #584294 !important;
    border: 1px solid #584294 !important;
}

.is-primary.is-light:hover {
    background-color: #dbd4ec !important;
}

.is-primary.is-light:focus,
.is-primary.is-light:active {
    background-color: #cdc5e4 !important;
    outline: none !important;
    /* Usually removed in Bulma */
}



#home-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height: 100vh;
    object-fit: cover;
    z-index: -3;
}

/* SLIGHT TRANSPARENT OVERLAY ON TOP OF VIDEO */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* height: 100%; */
    height: 100vh;
    background-color: rgba(134, 138, 139, 0.8);
    /* Adjust alpha for more/less transparency */
    z-index: -2;
}

.special-button {
    background-color:  rgba(16, 40, 49, 0.8);
    border: 1px solid transparent;
    color: white;
}

.special-button:hover {
    background-color: rgba(16, 40, 49, 0.95);
    border: 1px solid transparent;
    color: white;
}

/* 
   Container that holds all messages in the center.
   We do the absolute centering on the PARENT (.hero-messages).
*/
.hero-messages {
    position: absolute;
    /* Hero is 100% width/height (from your existing code).
       We place .hero-messages in the exact center. */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
    width: 100%;
    top: 0;
    left: 0;
    color: #111;
    /* max-width: 1000px; */
    /* an optional limit if you prefer */
    /* height: 0; */
    /* We'll let each .msg-wrapper stack absolutely */
    /* text-align: center;

    z-index: 5; */
    /* Above overlay, video, etc. */
}

/* 
     Each message is in a .msg-wrapper so that 
     the .msg can move around due to animation 
     WITHOUT changing the parent's center anchor.
  */
.msg-wrapper {
    /* position: absolute; */
    /* top: 0;
    left: 0; */
    /* width: 100%; */
    /* 
      All .msg-wrapper start at the same top-left corner 
      of .hero-messages (which is itself centered in the screen).
    */
}

/* The .msg itself can remain 'position: relative' or 'static' 
     (the animation transforms are in your keyframes).
     We do NOT change your keyframes or transform in any way.
  */
  .msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #111;
    
    /* Start fully transparent */
    opacity: 0;
    /* By default, no pointer events unless visible */
    pointer-events: none;
    
    /* optional if you want texts center-aligned, etc. */
    text-align: center; 
  }

  .scroll-margin-top-section {
    scroll-margin-top: 92px;
  }

  /* mobile view */
    @media screen and (max-width: 768px) {
        .main-title-mobile-fit {
            height: 164px;
        }
        .scroll-margin-top-section {
            scroll-margin-top: 108px;
        }
    }
    /* tablet view */
    @media screen and (min-width: 768px) and (max-width: 1024px) {
        .scroll-margin-top-section {
            scroll-margin-top: 108px;
        }
    }
    /* desktop view */
    @media screen and (min-width: 1024px) {
        .timeline-container {
            max-width: 900px;  /* Adjust to the desired width */
            margin: 0 auto;    /* Center the container */
        }
    }

/* 
   YOUR EXACT ANIMATIONS (unchanged):
   fadeInOut, scaleInOut, slideInOut
*/
.fadeInOut {
    animation: fadeInOut 4s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        display: none;
    }

    10% {
        opacity: 1;
        display: block;
    }

    50% {
        opacity: 1;
        display: block;
    }

    90% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.scaleInOut {
    animation: scaleInOut 4s ease-in-out forwards;
    animation-delay: 4s;
}

@keyframes scaleInOut {
    0% {
        opacity: 0;
        display: none;
    }

    10% {
        opacity: 1;
        display: block;
    }

    50% {
        opacity: 1;
        display: block;
    }

    90% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.slideInOut {
    animation: slideInOut 4s ease-in-out forwards;
    animation-delay: 8s;
}

@keyframes slideInOut {
    0% {
        opacity: 0;
        display: none;
    }

    10% {
        opacity: 1;
        display: block;
    }

    50% {
        opacity: 1;
        display: block;
    }

    90% {
        opacity: 1;
        display: block;
    }

    100% {
        opacity: 1;
        display: block;
    }
}

/* TIMELINE CONTAINER */
.timeline-container {
  position: relative;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 10;
}

/* The dashed line <svg> behind the steps */
.timeline-svg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;         /* The container for the path. Adjust as needed. */
  height: 2000px;     /* Adjust the height to accommodate your steps. */
  z-index: 0;         /* behind the step boxes */
  overflow: visible;
}
.timeline-path {
  fill: none;
  stroke: #9a9a9a;        /* color of the dashed line */
  stroke-width: 2;
  stroke-dasharray: 5,5;  /* 5px dash, 5px gap */
}

/* Make all images in .timeline-container circle */
.timeline-container img {
  border-radius: 50% !important; 
}

/* Step fade-in (box by box) */
.fade-step {
  opacity: 0;               /* hidden at start */
  transition: opacity 1s ease;
  z-index: 1;               /* above the .timeline-svg (z-index:0) */
}
.fade-step.visible {
  opacity: 1; 
}


/* 


.fadeInOut {
    animation: fadeInOut 4s ease-in-out forwards;
}

@keyframes fadeInOut {
    0% {
        opacity: 0;
        display: none;
    }

    10% {
        opacity: 1;
        display: block;
    }

    50% {
        opacity: 1;
        display: block;
    }

    90% {
        opacity: 0;
        display: none;
    }

    100% {
        opacity: 0;
        display: none;
    }
}

.scaleInOut {
    animation: scaleInOut 4s ease-in-out forwards;
    animation-delay: 4s;
}

@keyframes scaleInOut {
    0% {
        transform: scale(0.5);
        opacity: 0;
        display: none;
    }

    10% {
        transform: scale(1);
        opacity: 1;
        display: block;
    }

    50% {
        transform: scale(1);
        opacity: 1;
        display: block;
    }

    90% {
        transform: scale(1.5);
        opacity: 0;
        display: none;
    }

    100% {
        transform: scale(1.5);
        opacity: 0;
        display: none;
    }
}

.slideInOut {
    animation: slideInOut 4s ease-in-out forwards;
    animation-delay: 8s;
}

@keyframes slideInOut {
    0% {
        transform: translateY(50px);
        opacity: 0;
        display: none;
    }

    10% {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }

    50% {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }

    90% {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }

    100% {
        transform: translateY(0);
        opacity: 1;
        display: block;
    }
}
    */