html {
    scroll-behavior: smooth;
}

/* Custom Utility for Orilogic */
.app-para {
    padding-top: 75px !important;
    padding-bottom: 75px !important;
}

/* Optional: Adjust for mobile if you want it even tighter on phones */
@media (max-width: 767px) {
    .app-para {
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }
}

.typewrite > .wrap {
    border-right: 0.08em solid transparent;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none; /* This is the most important line */
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

/* Container for the loading progress */
.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    /* The background and animated circles */
    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0; /* Background circle color */
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #3498db; /* The actual blue progress color */
            stroke-dasharray: calc(3.141 * 0.8 * 100%); /* Math for the circle circumference */
            stroke-dashoffset: 0;
            transition: stroke-dashoffset 0.1s ease-in-out;
        }

.loading-progress-text {
    display: block !important;
    color: var(--bs-dark) !important;
}

    /* This allows Blazor to inject the percentage number */
    .loading-progress-text::after {
        content: " " attr(data-progress);
        color: var(--bs-primary) !important;
    }

.title-heading h1 {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Home */
.hero-bold {
    font-weight: 900 !important; /* Extra bold */
    color: #ffffff; /* Pure white contrast against the blue */
    text-shadow: 0px 0px 10px rgba(0, 183, 255, 0.5); /* Subtle cyan glow to match your bubbles */
}

.brand-logic {
    color: #00f2ff !important; /* Brighter neon cyan */
    font-weight: 800 !important;
    text-shadow: 0 0 10px rgba(0, 242, 255, 0.5); /* Adds a "glow" for readability */
}

.para-justify {
    text-align: justify;
    text-justify: inter-word; /* Ensures even spacing between words */
    /*max-width: 600px;*/ /* Prevents lines from becoming too long and hard to read */
}

.error-500 .title {
    font-size: 250px;
}

.error-500 .error-500-img {
    position: absolute;
    top: 57px;
    right: 0;
    left: 0;
    margin: 0 auto;
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .error-500 .title {
        font-size: 150px;
    }

    .error-500 .error-500-img {
        width: 20% !important;
        top: 43px;
    }
}

@media (max-width: 767.98px) {
    .error-500 .title {
        font-size: 68px;
        margin-top: 35px;
    }

    .error-500 .error-500-img {
        position: relative;
        top: 0px;
    }
}

@-webkit-keyframes errorAnimation {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -webkit-transform: translateX(25%) rotate(5deg);
        transform: translateX(25%) rotate(5deg);
    }

    30% {
        -webkit-transform: translateX(-20%) rotate(-3deg);
        transform: translateX(-20%) rotate(-3deg);
    }

    45% {
        -webkit-transform: translateX(15%) rotate(3deg);
        transform: translateX(15%) rotate(3deg);
    }

    60% {
        -webkit-transform: translateX(-10%) rotate(-2deg);
        transform: translateX(-10%) rotate(-2deg);
    }

    75% {
        -webkit-transform: translateX(5%) rotate(1deg);
        transform: translateX(5%) rotate(1deg);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

@keyframes errorAnimation {
    0% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }

    15% {
        -webkit-transform: translateX(25%) rotate(5deg);
        transform: translateX(25%) rotate(5deg);
    }

    30% {
        -webkit-transform: translateX(-20%) rotate(-3deg);
        transform: translateX(-20%) rotate(-3deg);
    }

    45% {
        -webkit-transform: translateX(15%) rotate(3deg);
        transform: translateX(15%) rotate(3deg);
    }

    60% {
        -webkit-transform: translateX(-10%) rotate(-2deg);
        transform: translateX(-10%) rotate(-2deg);
    }

    75% {
        -webkit-transform: translateX(5%) rotate(1deg);
        transform: translateX(5%) rotate(1deg);
    }

    100% {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
}

.error-img {
    -webkit-animation: errorAnimation 20s infinite;
    animation: errorAnimation 20s infinite;
}

/* Mimicking the Landrick / Boutique icon wrap */
/* Custom Styling for the Boutique Look */
.icon-wrapper {
    height: 80px;
    width: 80px;
    background: rgba(47, 85, 212, 0.05); /* Soft Orilogic Blue Tint */
    color: #2f55d4;
    display: flex; /* Flexbox for perfect centering */
    align-items: center; /* Vertical centering */
    justify-content: center; /* Horizontal centering */
    margin: 0 auto;
    border-radius: 16px; /* Modern "Squircle" shape */
    transition: all 0.3s ease;
}

.industry-card:hover .icon-wrapper {
    background: #2f55d4; /* Brand blue on hover */
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(47, 85, 212, 0.15);
}

.industry-card h6 {
    font-weight: 600;
    font-size: 15px;
}