/* =====================================================
   PUBLIC WEBSITE ROOT VARIABLES
====================================================== */

:root {

    --public-primary: #0b2c5f;
    --public-primary-dark: #061d40;
    --public-primary-light: #174a8b;

    --public-secondary: #d62828;
    --public-secondary-dark: #a91515;

    --public-accent: #ffffff;

    --public-text-dark: #1d2433;
    --public-text-muted: #6c757d;
    --public-text-light: #ffffff;

    --public-background: #ffffff;
    --public-background-light: #f5f7fb;
    --public-background-dark: #07172e;

    --public-border: #dfe5ee;

    --public-shadow-small:
        0 6px 18px
        rgba(0, 0, 0, 0.08);

    --public-shadow-medium:
        0 12px 35px
        rgba(0, 0, 0, 0.12);

    --public-shadow-large:
        0 24px 60px
        rgba(0, 0, 0, 0.18);

    --public-transition:
        all 0.3s ease;

}


/* =====================================================
   GLOBAL PUBLIC WEBSITE STYLES
====================================================== */

html {

    scroll-behavior: smooth;

}


body {

    margin: 0;

    padding: 0;

    font-family:
        "Roboto",
        sans-serif;

    color:
        var(
            --public-text-dark
        );

    background-color:
        var(
            --public-background
        );

    line-height: 1.7;

    overflow-x: hidden;

}


h1,
h2,
h3,
h4,
h5,
h6 {

    margin-top: 0;

    font-family:
        "Montserrat",
        sans-serif;

    font-weight: 700;

    color:
        var(
            --public-text-dark
        );

}


p {

    margin-top: 0;

}


a {

    color: inherit;

    text-decoration: none;

    transition:
        var(
            --public-transition
        );

}


img {

    max-width: 100%;

    height: auto;

}


button,
input,
textarea,
select {

    font: inherit;

}


.public-main {

    min-height: 100vh;

}


/* =====================================================
   ACCESSIBILITY
====================================================== */

.skip-link {

    position: fixed;

    top: -100px;

    left: 20px;

    z-index: 99999;

    padding:
        12px
        18px;

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border-radius: 6px;

    font-weight: 700;

    transition:
        top 0.3s ease;

}


.skip-link:focus {

    top: 20px;

}


a:focus-visible,
button:focus-visible {

    outline:
        3px solid
        rgba(
            214,
            40,
            40,
            0.45
        );

    outline-offset: 3px;

}


/* =====================================================
   PUBLIC ALERTS
====================================================== */

.public-alerts {

    position: fixed;

    top: 90px;

    left: 0;

    right: 0;

    z-index: 1045;

    pointer-events: none;

}


.public-alerts .alert {

    pointer-events: auto;

    box-shadow:
        var(
            --public-shadow-small
        );

}


/* =====================================================
   HEADER AND NAVBAR
====================================================== */

.public-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    z-index: 1050;

}


.public-navbar {

    min-height: 82px;

    padding:
        12px
        0;

    background-color:
        rgba(
            6,
            29,
            64,
            0.96
        );

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

    transition:
        var(
            --public-transition
        );

}


.public-navbar.navbar-scrolled {

    min-height: 72px;

    padding:
        8px
        0;

    background-color:
        rgba(
            6,
            29,
            64,
            0.99
        );

    box-shadow:
        var(
            --public-shadow-small
        );

}


.public-navbar-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 0;

    margin: 0;

}


.public-brand-logo {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 48px;

    height: 48px;

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border:
        3px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 50%;

    font-size: 22px;

    box-shadow:
        0 8px 20px
        rgba(
            214,
            40,
            40,
            0.25
        );

}


.public-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.public-brand-name {

    color:
        var(
            --public-text-light
        );

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 22px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.public-brand-subtitle {

    margin-top: 4px;

    color:
        rgba(
            255,
            255,
            255,
            0.75
        );

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.public-navbar-toggler {

    padding:
        8px
        10px;

    border-color:
        rgba(
            255,
            255,
            255,
            0.35
        );

}


.public-navbar-toggler:focus {

    box-shadow: none;

}


.public-nav-link {

    position: relative;

    margin:
        0
        4px;

    padding:
        12px
        10px
        !important;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        )
        !important;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 14px;

    font-weight: 600;

}


.public-nav-link::after {

    content: "";

    position: absolute;

    left: 10px;

    right: 10px;

    bottom: 5px;

    height: 2px;

    background-color:
        var(
            --public-secondary
        );

    transform:
        scaleX(
            0
        );

    transform-origin: center;

    transition:
        transform 0.3s ease;

}


.public-nav-link:hover,
.public-nav-link:focus,
.public-nav-link.active {

    color:
        var(
            --public-text-light
        )
        !important;

}


.public-nav-link:hover::after,
.public-nav-link:focus::after,
.public-nav-link.active::after {

    transform:
        scaleX(
            1
        );

}


.public-nav-access {

    margin-left: 12px;

}


.public-login-button,
.public-dashboard-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 44px;

    padding:
        10px
        18px;

    color:
        var(
            --public-text-light
        );

    border-radius: 7px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

}


.public-login-button {

    background-color:
        var(
            --public-secondary
        );

    border:
        1px solid
        var(
            --public-secondary
        );

}


.public-login-button:hover,
.public-login-button:focus {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary-dark
        );

    border-color:
        var(
            --public-secondary-dark
        );

    transform:
        translateY(
            -2px
        );

}


.public-dashboard-button {

    background-color:
        var(
            --public-primary-light
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.25
        );

}


.public-dashboard-button:hover,
.public-dashboard-button:focus {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border-color:
        var(
            --public-secondary
        );

    transform:
        translateY(
            -2px
        );

}


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

.hero-section {

    position: relative;

    min-height: 100vh;

    display: flex;

    align-items: center;

    padding-top: 82px;

    color:
        var(
            --public-text-light
        );

    background:
        linear-gradient(
            110deg,
            rgba(
                6,
                29,
                64,
                0.98
            )
            0%,
            rgba(
                11,
                44,
                95,
                0.92
            )
            50%,
            rgba(
                6,
                29,
                64,
                0.9
            )
            100%
        );

    overflow: hidden;

}


.hero-section::before {

    content: "";

    position: absolute;

    top: -140px;

    right: -120px;

    width: 520px;

    height: 520px;

    background-color:
        rgba(
            214,
            40,
            40,
            0.16
        );

    border-radius: 50%;

}


.hero-section::after {

    content: "";

    position: absolute;

    bottom: -180px;

    left: -150px;

    width: 460px;

    height: 460px;

    background-color:
        rgba(
            255,
            255,
            255,
            0.05
        );

    border-radius: 50%;

}


.hero-overlay {

    position: absolute;

    inset: 0;

    background-image:
        linear-gradient(
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(
                255,
                255,
                255,
                0.025
            )
            1px,
            transparent 1px
        );

    background-size:
        42px
        42px;

    pointer-events: none;

}


.hero-section .container {

    position: relative;

    z-index: 2;

}


.hero-content {

    max-width: 760px;

    padding:
        70px
        0;

}


.hero-badge {

    display: inline-flex;

    align-items: center;

    margin-bottom: 24px;

    padding:
        9px
        16px;

    color:
        var(
            --public-text-light
        );

    background-color:
        rgba(
            214,
            40,
            40,
            0.18
        );

    border:
        1px solid
        rgba(
            214,
            40,
            40,
            0.45
        );

    border-radius: 30px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.4px;

}


.hero-title {

    max-width: 800px;

    margin-bottom: 24px;

    color:
        var(
            --public-text-light
        );

    font-size:
        clamp(
            42px,
            6vw,
            76px
        );

    font-weight: 800;

    line-height: 1.05;

}


.hero-title-highlight {

    display: block;

    color:
        var(
            --public-secondary
        );

}


.hero-description {

    max-width: 720px;

    margin-bottom: 34px;

    color:
        rgba(
            255,
            255,
            255,
            0.8
        );

    font-size: 18px;

    line-height: 1.8;

}


.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    margin-bottom: 42px;

}


.hero-primary-button,
.hero-secondary-button {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 52px;

    padding:
        13px
        24px;

    border-radius: 8px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 14px;

    font-weight: 700;

    transition:
        var(
            --public-transition
        );

}


.hero-primary-button {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border:
        1px solid
        var(
            --public-secondary
        );

    box-shadow:
        0 10px 25px
        rgba(
            214,
            40,
            40,
            0.25
        );

}


.hero-primary-button:hover,
.hero-primary-button:focus {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary-dark
        );

    border-color:
        var(
            --public-secondary-dark
        );

    transform:
        translateY(
            -3px
        );

}


.hero-secondary-button {

    color:
        var(
            --public-text-light
        );

    background-color: transparent;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

}


.hero-secondary-button:hover,
.hero-secondary-button:focus {

    color:
        var(
            --public-primary-dark
        );

    background-color:
        var(
            --public-text-light
        );

    border-color:
        var(
            --public-text-light
        );

    transform:
        translateY(
            -3px
        );

}


.hero-statistics {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

}


.hero-stat-card {

    min-width: 130px;

    padding:
        17px
        20px;

    background-color:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 10px;

    backdrop-filter:
        blur(
            8px
        );

}


.hero-stat-card h2 {

    margin-bottom: 2px;

    color:
        var(
            --public-text-light
        );

    font-size: 28px;

    font-weight: 800;

}


.hero-stat-card p {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

    font-size: 13px;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.7px;

}


/* =====================================================
   HERO VISUAL WRAPPER
====================================================== */

.hero-image-wrapper {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    width: 100%;

    min-height: 650px;

    padding:
        40px
        0;

}


.hero-image-card {

    position: relative;

    width: 360px;

    min-height: 360px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    flex-shrink: 0;

    padding: 40px;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            rgba(
                255,
                255,
                255,
                0.14
            ),
            rgba(
                255,
                255,
                255,
                0.04
            )
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 50%;

    box-shadow:
        var(
            --public-shadow-large
        );

    backdrop-filter:
        blur(
            12px
        );

}


.hero-image-card::before {

    content: "";

    position: absolute;

    inset: 22px;

    border:
        2px dashed
        rgba(
            255,
            255,
            255,
            0.2
        );

    border-radius: 50%;

    animation:
        heroRotate
        28s
        linear
        infinite;

}


.hero-image-icon {

    position: relative;

    z-index: 2;

    margin-bottom: 25px;

    color:
        var(
            --public-text-light
        );

    font-size: 120px;

    filter:
        drop-shadow(
            0 15px 25px
            rgba(
                0,
                0,
                0,
                0.3
            )
        );

}


.hero-image-card h3 {

    position: relative;

    z-index: 2;

    margin-bottom: 8px;

    color:
        var(
            --public-text-light
        );

    font-size: 30px;

    font-weight: 800;

}


.hero-image-card p {

    position: relative;

    z-index: 2;

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 13px;

    font-weight: 600;

    letter-spacing: 0.8px;

    text-transform: uppercase;

}


/* =====================================================
   HERO REGISTRATION ACTIONS
====================================================== */

.hero-registration-actions {

    width: 100%;

    max-width: 360px;

    display: flex;

    flex-direction: column;

    align-items: stretch;

    gap: 14px;

    margin-top: 28px;

}


.hero-registration-button {

    width: 100%;

    min-height: 54px;

    white-space: normal;

    text-align: center;

}


.hero-registration-actions .btn-success {

    color:
        var(
            --public-text-light
        );

    background-color: #198754;

    border-color: #198754;

}


.hero-registration-actions .btn-success:hover,
.hero-registration-actions .btn-success:focus {

    color:
        var(
            --public-text-light
        );

    background-color: #157347;

    border-color: #146c43;

    transform:
        translateY(
            -3px
        );

}


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

.hero-scroll {

    position: absolute;

    left: 50%;

    bottom: 28px;

    z-index: 3;

    transform:
        translateX(
            -50%
        );

}


.hero-scroll a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 42px;

    height: 42px;

    color:
        var(
            --public-text-light
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.45
        );

    border-radius: 50%;

    animation:
        heroBounce
        2s
        infinite;

}


.hero-scroll a:hover {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border-color:
        var(
            --public-secondary
        );

}

/* =====================================================
   INNER PAGE HERO SECTION
====================================================== */

.hero-section.page-hero-section {

    min-height: auto;

    padding-top: 132px;

    padding-bottom: 50px;

}


.page-hero-section .hero-content {

    max-width: 760px;

    padding-top: 45px;

    padding-bottom: 45px;

}


.page-hero-section .hero-badge {

    margin-bottom: 18px;

}


.page-hero-section .hero-title {

    margin-bottom: 18px;

    font-size:
        clamp(
            38px,
            5vw,
            58px
        );

    line-height: 1.08;

}


.page-hero-section .hero-description {

    margin-bottom: 26px;

    font-size: 17px;

    line-height: 1.7;

}


.page-hero-section .hero-actions {

    margin-bottom: 0;

}


.page-hero-section .hero-image-wrapper {

    min-height: 330px;

    padding-top: 25px;

    padding-bottom: 25px;

}


.page-hero-section .hero-image-card {

    width: 275px;

    min-height: 275px;

    padding: 32px;

}


.page-hero-section .hero-image-card::before {

    inset: 18px;

}


.page-hero-section .hero-image-icon {

    margin-bottom: 18px;

    font-size: 82px;

}


.page-hero-section .hero-image-card h3 {

    margin-bottom: 6px;

    font-size: 24px;

}


.page-hero-section .hero-image-card p {

    font-size: 11px;

    line-height: 1.5;

}


/* =====================================================
   PUBLIC SECTIONS
====================================================== */

.public-section {

    position: relative;

    padding:
        100px
        0;

}


.public-section.bg-light {

    background-color:
        var(
            --public-background-light
        )
        !important;

}


.section-badge {

    display: inline-block;

    margin-bottom: 15px;

    padding:
        7px
        14px;

    color:
        var(
            --public-secondary
        );

    background-color:
        rgba(
            214,
            40,
            40,
            0.08
        );

    border-radius: 25px;

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 12px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

}


.section-title {

    max-width: 850px;

    margin-right: auto;

    margin-bottom: 20px;

    margin-left: auto;

    color:
        var(
            --public-primary-dark
        );

    font-size:
        clamp(
            30px,
            4vw,
            46px
        );

    font-weight: 800;

    line-height: 1.2;

}


.section-description {

    max-width: 780px;

    margin-right: auto;

    margin-bottom: 0;

    margin-left: auto;

    color:
        var(
            --public-text-muted
        );

    font-size: 17px;

    line-height: 1.8;

}


/* =====================================================
   PUBLIC CARDS
====================================================== */

.public-card {

    height: 100%;

    padding: 32px;

    background-color:
        var(
            --public-background
        );

    border:
        1px solid
        var(
            --public-border
        );

    border-radius: 12px;

    box-shadow:
        var(
            --public-shadow-small
        );

    transition:
        var(
            --public-transition
        );

}


.public-card:hover {

    border-color:
        rgba(
            214,
            40,
            40,
            0.28
        );

    box-shadow:
        var(
            --public-shadow-medium
        );

    transform:
        translateY(
            -7px
        );

}


.public-card-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 64px;

    height: 64px;

    margin-bottom: 22px;

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-primary
        );

    border-radius: 12px;

    font-size: 27px;

    box-shadow:
        0 10px 22px
        rgba(
            11,
            44,
            95,
            0.2
        );

}


.public-card h3,
.public-card h4 {

    margin-bottom: 14px;

    color:
        var(
            --public-primary-dark
        );

}


.public-card h3 {

    font-size: 22px;

}


.public-card h4 {

    font-size: 19px;

}


.public-card p {

    margin-bottom: 0;

    color:
        var(
            --public-text-muted
        );

}


/* =====================================================
   FOOTER
====================================================== */

.public-footer {

    color:
        rgba(
            255,
            255,
            255,
            0.78
        );

    background-color:
        var(
            --public-background-dark
        );

}


.public-footer-main {

    padding:
        75px
        0
        55px;

}


.public-footer-section {

    height: 100%;

}


.public-footer-brand {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;

}


.public-footer-logo {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 50px;

    height: 50px;

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border-radius: 50%;

    font-size: 22px;

}


.public-footer-brand-text {

    display: flex;

    flex-direction: column;

    line-height: 1.1;

}


.public-footer-brand-name {

    color:
        var(
            --public-text-light
        );

    font-family:
        "Montserrat",
        sans-serif;

    font-size: 23px;

    font-weight: 800;

    letter-spacing: 1.5px;

}


.public-footer-brand-subtitle {

    margin-top: 4px;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 11px;

    font-weight: 600;

    letter-spacing: 0.9px;

    text-transform: uppercase;

}


.public-footer-description {

    max-width: 410px;

    margin-bottom: 22px;

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

}


.public-footer-social {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}


.public-social-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    color:
        var(
            --public-text-light
        );

    background-color:
        rgba(
            255,
            255,
            255,
            0.08
        );

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

    border-radius: 50%;

}


.public-social-link:hover,
.public-social-link:focus {

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border-color:
        var(
            --public-secondary
        );

    transform:
        translateY(
            -3px
        );

}


.public-footer-heading {

    position: relative;

    margin-bottom: 24px;

    padding-bottom: 12px;

    color:
        var(
            --public-text-light
        );

    font-size: 18px;

    font-weight: 700;

}


.public-footer-heading::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: 0;

    width: 42px;

    height: 3px;

    background-color:
        var(
            --public-secondary
        );

    border-radius: 2px;

}


.public-footer-links,
.public-footer-contact {

    margin: 0;

    padding: 0;

    list-style: none;

}


.public-footer-links li {

    margin-bottom: 11px;

}


.public-footer-links a {

    color:
        rgba(
            255,
            255,
            255,
            0.68
        );

}


.public-footer-links a:hover,
.public-footer-links a:focus {

    color:
        var(
            --public-text-light
        );

    padding-left: 5px;

}


.public-footer-contact li {

    display: flex;

    align-items: flex-start;

    gap: 12px;

    margin-bottom: 15px;

}


.public-footer-contact a {

    color:
        rgba(
            255,
            255,
            255,
            0.7
        );

}


.public-footer-contact a:hover,
.public-footer-contact a:focus {

    color:
        var(
            --public-text-light
        );

}


.public-contact-icon {

    flex:
        0
        0
        34px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 34px;

    height: 34px;

    color:
        var(
            --public-text-light
        );

    background-color:
        rgba(
            214,
            40,
            40,
            0.18
        );

    border-radius: 7px;

}


.public-footer-bottom {

    padding:
        20px
        0;

    background-color:
        rgba(
            0,
            0,
            0,
            0.18
        );

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.08
        );

}


.public-footer-copyright {

    margin: 0;

    color:
        rgba(
            255,
            255,
            255,
            0.62
        );

    font-size: 14px;

}


.public-footer-system-link {

    text-align: right;

}


.public-footer-system-link a {

    color:
        rgba(
            255,
            255,
            255,
            0.72
        );

    font-size: 14px;

    font-weight: 600;

}


.public-footer-system-link a:hover,
.public-footer-system-link a:focus {

    color:
        var(
            --public-text-light
        );

}


/* =====================================================
   BACK TO TOP BUTTON
====================================================== */

.back-to-top {

    position: fixed;

    right: 24px;

    bottom: 24px;

    z-index: 1030;

    width: 46px;

    height: 46px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color:
        var(
            --public-text-light
        );

    background-color:
        var(
            --public-secondary
        );

    border: 0;

    border-radius: 50%;

    box-shadow:
        var(
            --public-shadow-medium
        );

    opacity: 0;

    visibility: hidden;

    transform:
        translateY(
            15px
        );

    transition:
        var(
            --public-transition
        );

}


.back-to-top.is-visible {

    opacity: 1;

    visibility: visible;

    transform:
        translateY(
            0
        );

}


.back-to-top:hover,
.back-to-top:focus {

    background-color:
        var(
            --public-secondary-dark
        );

    transform:
        translateY(
            -3px
        );

}


/* =====================================================
   SCROLL REVEAL
====================================================== */

.public-reveal {

    opacity: 0;

    transform:
        translateY(
            28px
        );

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;

}


.public-reveal.is-visible {

    opacity: 1;

    transform:
        translateY(
            0
        );

}


/* =====================================================
   ANIMATIONS
====================================================== */

@keyframes heroRotate {

    from {

        transform:
            rotate(
                0deg
            );

    }

    to {

        transform:
            rotate(
                360deg
            );

    }

}


@keyframes heroBounce {

    0%,
    20%,
    50%,
    80%,
    100% {

        transform:
            translateY(
                0
            );

    }

    40% {

        transform:
            translateY(
                -9px
            );

    }

    60% {

        transform:
            translateY(
                -5px
            );

    }

}

/* =====================================================
   TABLET RESPONSIVE STYLES
====================================================== */

@media (
    max-width: 991.98px
) {

    .public-navbar {

        background-color:
            rgba(
                6,
                29,
                64,
                0.99
            );

    }


    .public-navbar .navbar-collapse {

        margin-top: 14px;

        padding: 18px;

        background-color:
            var(
                --public-primary-dark
            );

        border:
            1px solid
            rgba(
                255,
                255,
                255,
                0.08
            );

        border-radius: 10px;

        box-shadow:
            var(
                --public-shadow-medium
            );

    }


    .public-nav-link {

        margin:
            2px
            0;

        padding:
            11px
            4px
            !important;

    }


    .public-nav-link::after {

        left: 4px;

        right: auto;

        width: 42px;

        transform-origin: left;

    }


    .public-nav-access {

        margin-top: 12px;

        margin-left: 0;

    }


    .public-login-button,
    .public-dashboard-button {

        width: 100%;

    }


    .hero-section {

        min-height: auto;

        padding-top: 100px;

        padding-bottom: 70px;

    }


    .hero-content {

        padding-top: 50px;

        padding-bottom: 25px;

        text-align: center;

    }


    .hero-description {

        margin-right: auto;

        margin-left: auto;

    }


    .hero-actions,
    .hero-statistics {

        justify-content: center;

    }


    .hero-image-wrapper {

        min-height: 540px;

        padding-top: 30px;

        padding-bottom: 30px;

        flex-direction: column;

    }


    .hero-image-card {

        width: 300px;

        min-height: 300px;

    }


    .hero-image-icon {

        font-size: 95px;

    }


    .hero-registration-actions {

        max-width: 360px;

        margin-top: 26px;

    }


    .hero-scroll {

        display: none;

    }


    /* =================================================
       INNER PAGE HERO TABLET OVERRIDES
    ================================================== */

    .hero-section.page-hero-section {

        min-height: auto;

        padding-top: 110px;

        padding-bottom: 45px;

    }


    .page-hero-section .hero-content {

        padding-top: 35px;

        padding-bottom: 20px;

        text-align: center;

    }


    .page-hero-section .hero-description {

        margin-right: auto;

        margin-left: auto;

    }


    .page-hero-section .hero-actions {

        justify-content: center;

    }


    .page-hero-section .hero-image-wrapper {

        min-height: 290px;

        padding-top: 20px;

        padding-bottom: 15px;

    }


    .page-hero-section .hero-image-card {

        width: 250px;

        min-height: 250px;

    }


    .page-hero-section .hero-image-icon {

        font-size: 72px;

    }

}


/* =====================================================
   MOBILE RESPONSIVE STYLES
====================================================== */

@media (
    max-width: 767.98px
) {

    .public-navbar {

        min-height: 72px;

    }


    .public-brand-logo {

        width: 42px;

        height: 42px;

        font-size: 19px;

    }


    .public-brand-name {

        font-size: 19px;

    }


    .public-brand-subtitle {

        font-size: 9px;

    }


    .hero-section {

        padding-top: 82px;

    }


    .hero-content {

        padding-top: 42px;

        padding-bottom: 15px;

    }


    .hero-title {

        font-size: 42px;

    }


    .hero-description {

        font-size: 16px;

    }


    .hero-actions {

        flex-direction: column;

    }


    .hero-primary-button,
    .hero-secondary-button {

        width: 100%;

    }


    .hero-statistics {

        display: grid;

        grid-template-columns:
            repeat(
                3,
                1fr
            );

        width: 100%;

        gap: 8px;

    }


    .hero-stat-card {

        min-width: 0;

        padding:
            14px
            8px;

    }


    .hero-stat-card h2 {

        font-size: 23px;

    }


    .hero-stat-card p {

        font-size: 10px;

    }


    .hero-image-wrapper {

        min-height: 470px;

        padding-top: 25px;

        padding-bottom: 20px;

        flex-direction: column;

    }


    .hero-image-card {

        width: 255px;

        min-height: 255px;

    }


    .hero-image-icon {

        font-size: 75px;

    }


    .hero-image-card h3 {

        font-size: 24px;

    }


    .hero-registration-actions {

        width: 100%;

        max-width: 320px;

        margin-top: 24px;

        gap: 12px;

    }


    .hero-registration-button {

        width: 100%;

        min-height: 52px;

        padding:
            12px
            18px;

        font-size: 13px;

    }


    .public-section {

        padding:
            75px
            0;

    }


    .public-card {

        padding: 25px;

    }


    .public-footer-main {

        padding-top: 60px;

    }


    .public-footer-bottom {

        text-align: center;

    }


    .public-footer-system-link {

        text-align: center;

    }


    /* =================================================
       INNER PAGE HERO MOBILE OVERRIDES
    ================================================== */

    .hero-section.page-hero-section {

        padding-top: 92px;

        padding-bottom: 40px;

    }


    .page-hero-section .hero-content {

        padding-top: 30px;

        padding-bottom: 15px;

    }


    .page-hero-section .hero-title {

        font-size: 38px;

    }


    .page-hero-section .hero-description {

        font-size: 16px;

        line-height: 1.65;

    }


    .page-hero-section .hero-actions {

        flex-direction: column;

    }


    .page-hero-section .hero-image-wrapper {

        min-height: 245px;

        padding-top: 10px;

        padding-bottom: 5px;

    }


    .page-hero-section .hero-image-card {

        width: 215px;

        min-height: 215px;

        padding: 25px;

    }


    .page-hero-section .hero-image-card::before {

        inset: 14px;

    }


    .page-hero-section .hero-image-icon {

        margin-bottom: 13px;

        font-size: 58px;

    }


    .page-hero-section .hero-image-card h3 {

        font-size: 20px;

    }

}


/* =====================================================
   SMALL MOBILE RESPONSIVE STYLES
====================================================== */

@media (
    max-width: 430px
) {

    .hero-title {

        font-size: 36px;

    }


    .hero-badge {

        font-size: 11px;

    }


    .hero-statistics {

        grid-template-columns: 1fr;

    }


    .hero-stat-card {

        width: 100%;

    }


    .hero-image-wrapper {

        min-height: 440px;

    }


    .hero-image-card {

        width: 225px;

        min-height: 225px;

        padding: 28px;

    }


    .hero-image-icon {

        margin-bottom: 18px;

        font-size: 65px;

    }


    .hero-image-card h3 {

        font-size: 22px;

    }


    .hero-image-card p {

        font-size: 10px;

        line-height: 1.5;

    }


    .hero-registration-actions {

        max-width: 280px;

        margin-top: 22px;

    }


    .hero-registration-button {

        min-height: 50px;

        padding:
            11px
            14px;

        font-size: 12px;

    }


    /* =================================================
       INNER PAGE HERO SMALL MOBILE OVERRIDES
    ================================================== */

    .hero-section.page-hero-section {

        padding-top: 86px;

        padding-bottom: 35px;

    }


    .page-hero-section .hero-content {

        padding-top: 25px;

    }


    .page-hero-section .hero-title {

        font-size: 33px;

    }


    .page-hero-section .hero-badge {

        margin-bottom: 15px;

        font-size: 11px;

    }


    .page-hero-section .hero-image-wrapper {

        min-height: 220px;

    }


    .page-hero-section .hero-image-card {

        width: 195px;

        min-height: 195px;

    }


    .page-hero-section .hero-image-icon {

        font-size: 52px;

    }

}


/* =====================================================
   REDUCED MOTION
====================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    html {

        scroll-behavior: auto;

    }


    *,
    *::before,
    *::after {

        animation-duration:
            0.01ms
            !important;

        animation-iteration-count:
            1
            !important;

        scroll-behavior:
            auto
            !important;

        transition-duration:
            0.01ms
            !important;

    }

}