/*
    File: main.scss
    Description: Primary stylesheet file written in CSS that contains the core styling rules, variables, and mixins for the website, ensuring a consistent design aesthetic across all pages and components.
    Author(s): James <james@aimg.io>
    Copyright: (c) AIMG Corp.
*/

/*
    Table of Contents

    01 - Global Variables
    02 - Global Styles
    03 - About Styles
*/

/* 01 - Global Variables */

:root {
    --theme-color: #6a5b97;
    --background-color-primary: #fbfbfb;
    --background-color-secondary: #f1f1f1;
    --color-primary: #151515;
}

/* 02 - Global Styles */

@font-face{
    font-family: "Syne";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../../fonts/syne/bold.woff2") format("woff2")
}

@font-face{
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../../fonts/inter/regular.woff2") format("woff2")
}

* {
    font-family: "Inter", sans-serif;
}

*,
*::after,
*::before  {
    box-sizing: border-box;
    scrollbar-width: auto;
    scrollbar-color: var(--theme-color) var(--background-color-primary);
}

*::-webkit-scrollbar {
    width: 5.333333333px;
}

*::-webkit-scrollbar-track {
    background-color: var(--background-color-primary);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--theme-color);
    border-radius: 1.5em;
}

::selection {
    background-color: var(--theme-color);
    color: var(--color-primary);
}

::marker {
    background-color: var(--color-primary);
    color: var(--color-primary);
}

html.is-changing .transition-main {
    transition: transform 400ms ease-in-out;
}

html.is-animating.is-leaving .transition-main {
    transform: translateY(calc(1 * 5vh * var(--overlay-direction, 1)));
}

html.is-animating.is-rendering .transition-main {
    transform: translateY(calc(-1 * 5vh * var(--overlay-direction, 1)));
}

.transition-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999999;
    background-color: var(--background-color-secondary);
    opacity: 0;
    pointer-events: none;
    transform: translate3d(0, calc(-1 * 100% * var(--overlay-direction, 1)), 0);
}
  
html.is-changing .transition-overlay {
    opacity: 1;
    transition: transform 400ms ease-in-out;
}
  
html.is-animating .transition-overlay {
    transform: translate3d(0, 0, 0);
}
  
html.is-rendering .transition-overlay {
    transform: translate3d(0, calc(var(--overlay-direction, 1) * 100%), 0);
}

.darkmode--activated h1,
.darkmode--activated h2,
.darkmode--activated h3,
.darkmode--activated h4,
.darkmode--activated h5,
.darkmode--activated h6,
.darkmode--activated p,
.darkmode--activated span {
    color: var(--background-color-primary);
}

.darkmode--activated a span,
.darkmode--activated a:hover span {
    color: var(--background-color-primary) !important;
}

.darkmode--activated .transition-overlay,
.darkmode--activated .bg-surface-secondary {
    background-color: var(--color-primary) !important;
}

.darkmode--activated .navbar-toggler i::before {
    color: var(--background-color-primary);
}

.darkmode--activated ::marker {
    background-color: var(--background-color-primary);
    color: var(--background-color-primary);
}

.darkmode-toggle {
    z-index: 999;
}

.navbar-collapse::before {
    border: none;
}

.font-primary {
    font-family: "Syne", sans-serif !important;
    line-height: 125%;
    transform: scaleY(1.25);
}

.marquee h2 {
    white-space: nowrap;
}

.marquee i {
    line-height: 100%;
    transform: scaleY(1);
}

.marquee i:nth-child(2) {
    margin-right: 16px;
}

/* 03 - About Styles */

.darkmode--activated .about-us i {
    color: var(--background-color-primary) !important;
}

.milestones {
    position: relative;
    overflow: hidden;
    z-index: 0;
}
  
.milestones::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-image: url("../../images/illustrations/1.svg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.15;
}