/**
* Template Name: Avilon
* Template URL: https://bootstrapmade.com/avilon-bootstrap-landing-page-template/
* Updated: Aug 07 2024 with Bootstrap v5.3.3
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
    --default-font: "Inter", system-ui, -apple-system, "Segoe UI", Robotod, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Manrope", "Inter", sans-serif;
    --nav-font: "Manrope", "Inter", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root {
    --background-color: #ffffff; /* Background color for the entire website, including individual sections */
    --default-color: #26303e; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #010038; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #2574dd; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --accent-color-2: #50e1b8; /* Secondary brand accent (teal) */
    --accent-color-3: #8f49ee; /* Tertiary brand accent (violet) */
    --accent-color-4: #ee6749; /* Warm brand accent (coral) */
    --info-color: #88ea1b; /* Information color */
    --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
    --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
    --nav-color: rgba(255, 255, 255, 0.7); /* The default color of the main navmenu links */
    --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
    --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
    --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
    --nav-dropdown-color: #26303e; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #2574dd; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
    --background-color: #f3f7fe;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #010038;
    --default-color: #ffffff;
    --heading-color: #ffffff;
    --surface-color: #0a1258;
    --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
    scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# Bootstrap Variable Overrides (IdentityCore embedded auth pages)
# Login/Register/TotpSetup/etc. (IdentityCore/Pages/Account/*) use plain Bootstrap
# utility classes (btn-primary, bg-primary, text-primary) rather than this site's own
# --accent-color system, since that page markup is shared with FOF. .bg-primary/
# .text-primary reference Bootstrap's own --bs-primary CSS variable at runtime, so
# overriding it is enough for those. .btn-primary does NOT — Bootstrap bakes its own
# --bs-btn-bg/--bs-btn-hover-bg etc. as hardcoded hex values directly into that rule at
# build time, so it needs its own explicit override, with color-mix() standing in for
# Bootstrap's compile-time hover/active shade darkening.
--------------------------------------------------------------*/
.bg-primary {
    background-color: var(--accent-color) !important;
}

.text-primary {
    color: var(--accent-color) !important;
}

.btn-primary {
    --bs-btn-bg: var(--accent-color);
    --bs-btn-border-color: var(--accent-color);
    --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color) 80%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--accent-color) 80%, black);
    --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color) 75%, black);
    --bs-btn-disabled-bg: var(--accent-color);
    --bs-btn-disabled-border-color: var(--accent-color);
}

/* Login/Register/TotpSetup/etc. are short, single-card pages — without this the footer
   sits right under the card instead of at the bottom of the viewport on anything taller
   than the content. .main grows to fill the remaining space, pushing the footer down;
   the footer itself is excluded from the flex-grow so it keeps its natural height. */
.account-page {
    background-color: var(--heading-color) !important;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.account-page {
    flex: 1 0 auto;
}

.account-page {
    .main {
        margin-top: 5em;
    }

    .fw-semibold {
        color: white;
    }
}

.account-page {
    .main {
        .row {
            margin: 0;
            padding: 0;
        }
    }
}

.account-page .footer {
    flex-shrink: 0;
}

.account-page {
    .footer-aurora {
        display: none;
    }
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
    color: var(--default-color);
    background-color: var(--background-color);
    font-family: var(--default-font);
}

a {
    color: var(--accent-color);
    text-decoration: none;
    transition: 0.3s;
}

a:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--heading-color);
    font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
    display: none;
    background: #df1529;
    color: #ffffff;
    text-align: left;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .sent-message {
    display: none;
    color: #ffffff;
    background: #059652;
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
    font-weight: 600;
}

.php-email-form .loading {
    display: none;
    background: var(--surface-color);
    text-align: center;
    padding: 15px;
    margin-bottom: 24px;
}

.php-email-form .loading:before {
    content: "";
    display: inline-block;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    margin: 0 10px -6px 0;
    border: 3px solid var(--accent-color);
    border-top-color: var(--surface-color);
    animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
    --background-color: rgba(255, 255, 255, 0);
    --default-color: #ffffff;
    --heading-color: #ffffff;
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 15px 0;
    transition: all 0.5s;
    z-index: 997;
}

.header .logo {
    line-height: 1;
}

.header .logo img {
    height: 38px;
    width: auto;
    content: url("../img/logo-white.svg");
}

.header .logo i {
    font-size: 28px;
    color: var(--heading-color);
    margin-right: 8px;
    line-height: 1;
}

.header .logo h1 {
    font-size: 26px;
    margin: 0;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--heading-color);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
    --background-color: #ffffff;
    --default-color: #26303e;
    --heading-color: #010038;
    --nav-color: rgba(38, 48, 62, 0.7);
    --nav-hover-color: #2574dd;
    box-shadow: 0 2px 20px rgba(1, 0, 56, 0.08);
}

.scrolled .header .logo img {
    content: url("../img/logo-blue.svg");
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
    .navmenu {
        padding: 0;
    }

    .navmenu ul {
        margin: 0;
        padding: 0;
        display: flex;
        list-style: none;
        align-items: center;
    }

    .navmenu li {
        position: relative;
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-color);
        padding: 18px 15px;
        font-size: 16px;
        font-family: var(--nav-font);
        font-weight: 400;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        transition: 0.3s;
    }

    .navmenu li:last-child a {
        padding-right: 0;
    }

    .navmenu li:hover > a,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-hover-color);
    }

    .navmenu .dropdown ul {
        margin: 0;
        padding: 10px 0;
        background: var(--nav-dropdown-background-color);
        display: block;
        position: absolute;
        visibility: hidden;
        left: 14px;
        top: 130%;
        opacity: 0;
        transition: 0.3s;
        border-radius: 4px;
        z-index: 99;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu .dropdown ul li {
        min-width: 200px;
    }

    .navmenu .dropdown ul a {
        padding: 10px 20px;
        font-size: 15px;
        text-transform: none;
        color: var(--nav-dropdown-color);
    }

    .navmenu .dropdown ul a i {
        font-size: 12px;
    }

    .navmenu .dropdown ul a:hover,
    .navmenu .dropdown ul .active:hover,
    .navmenu .dropdown ul li:hover > a {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .dropdown:hover > ul {
        opacity: 1;
        top: 100%;
        visibility: visible;
    }

    .navmenu .dropdown .dropdown ul {
        top: 0;
        left: -90%;
        visibility: hidden;
    }

    .navmenu .dropdown .dropdown:hover > ul {
        opacity: 1;
        top: 0;
        left: -100%;
        visibility: visible;
    }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
    .mobile-nav-toggle {
        color: var(--nav-color);
        font-size: 28px;
        line-height: 0;
        margin-right: 10px;
        cursor: pointer;
        transition: color 0.3s;
    }

    .navmenu {
        padding: 0;
        z-index: 9997;
    }

    .navmenu ul {
        display: none;
        list-style: none;
        position: absolute;
        inset: 60px 20px 20px 20px;
        padding: 10px 0;
        margin: 0;
        border-radius: 6px;
        background-color: var(--nav-mobile-background-color);
        overflow-y: auto;
        transition: 0.3s;
        z-index: 9998;
        box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
    }

    .navmenu a,
    .navmenu a:focus {
        color: var(--nav-dropdown-color);
        padding: 10px 20px;
        font-family: var(--nav-font);
        font-size: 17px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: space-between;
        white-space: nowrap;
        transition: 0.3s;
    }

    .navmenu a i,
    .navmenu a:focus i {
        font-size: 12px;
        line-height: 0;
        margin-left: 5px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        transition: 0.3s;
        background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
    }

    .navmenu a i:hover,
    .navmenu a:focus i:hover {
        background-color: var(--accent-color);
        color: var(--contrast-color);
    }

    .navmenu a:hover,
    .navmenu .active,
    .navmenu .active:focus {
        color: var(--nav-dropdown-hover-color);
    }

    .navmenu .active i,
    .navmenu .active:focus i {
        background-color: var(--accent-color);
        color: var(--contrast-color);
        transform: rotate(180deg);
    }

    .navmenu .dropdown ul {
        position: static;
        display: none;
        z-index: 99;
        padding: 10px 0;
        margin: 10px 20px;
        background-color: var(--nav-dropdown-background-color);
        border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
        box-shadow: none;
        transition: all 0.5s ease-in-out;
    }

    .navmenu .dropdown ul ul {
        background-color: rgba(33, 37, 41, 0.1);
    }

    .navmenu .dropdown > .dropdown-active {
        display: block;
        background-color: rgba(33, 37, 41, 0.03);
    }

    .mobile-nav-active {
        overflow: hidden;
    }

    .mobile-nav-active .mobile-nav-toggle {
        color: #fff;
        position: absolute;
        font-size: 32px;
        top: 15px;
        right: 15px;
        margin-right: 0;
        z-index: 9999;
    }

    .mobile-nav-active .navmenu {
        position: fixed;
        overflow: hidden;
        inset: 0;
        background: rgba(33, 37, 41, 0.8);
        transition: 0.3s;
    }

    .mobile-nav-active .navmenu > ul {
        display: block;
    }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
    color: var(--default-color);
    background-color: var(--background-color);
    font-size: 14px;
    text-align: center;
    padding: 50px 0 30px 0;
    position: relative;
    overflow: hidden;
}

.footer > .container {
    position: relative;
    z-index: 2;
}

.footer .footer-logo {
    height: 40px;
    width: auto;
    margin: 0 0 15px 0;
}

.footer h3 {
    font-size: 36px;
    font-weight: 700;
    position: relative;
    padding: 0;
    margin: 0 0 15px 0;
}

.footer p {
    font-size: 15px;
    font-style: italic;
    padding: 0;
    margin: 0 auto 30px auto;
    max-width: 560px;
}

.footer .social-links {
    margin: 0 0 30px 0;
}

.footer .social-links a {
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(37, 116, 221, 0.9);
    color: #ffffff;
    line-height: 1;
    margin: 0 4px;
    border-radius: 50%;
    text-align: center;
    width: 40px;
    height: 40px;
    transition: 0.3s;
}

.footer .social-links a:hover {
    background: #50e1b8;
    color: #010038;
    text-decoration: none;
    transform: translateY(-2px);
}

.footer .copyright {
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.footer .credits {
    font-size: 13px;
    padding-top: 5px;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    overflow: hidden;
    background: var(--background-color);
    transition: all 0.6s ease-out;
}

#preloader:before {
    content: "";
    position: fixed;
    top: calc(50% - 30px);
    left: calc(50% - 30px);
    border: 6px solid #ffffff;
    border-color: var(--accent-color) transparent var(--accent-color) transparent;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 99999;
    background-color: var(--accent-color);
    width: 40px;
    height: 40px;
    border-radius: 4px;
    transition: all 0.4s;
}

.scroll-top i {
    font-size: 24px;
    color: var(--contrast-color);
    line-height: 0;
}

.scroll-top:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
    color: var(--contrast-color);
}

.scroll-top.active {
    visibility: visible;
    opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
    [data-aos-delay] {
        transition-delay: 0 !important;
    }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
}

.page-title:before {
    content: "";
    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
    position: absolute;
    inset: 0;
}

.page-title h1 {
    font-size: 42px;
    font-weight: 700;
    margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    justify-content: center;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: 400;
}

.page-title .breadcrumbs ol li + li {
    padding-left: 10px;
}

.page-title .breadcrumbs ol li + li::before {
    content: "/";
    display: inline-block;
    padding-right: 10px;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
    color: var(--default-color);
    background-color: var(--background-color);
    padding: 60px 0;
    scroll-margin-top: 90px;
    overflow: clip;
}

@media (max-width: 1199px) {

    section,
    .section {
        scroll-margin-top: 66px;
    }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
    text-align: center;
    padding-bottom: 60px;
    position: relative;
}

.section-title h2 {
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.section-title h2:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.section-title p {
    margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: radial-gradient(1200px 500px at 85% -10%, rgba(37, 116, 221, 0.45) 0%, transparent 60%),
    radial-gradient(1000px 600px at 0% 20%, rgba(80, 225, 184, 0.18) 0%, transparent 55%),
    linear-gradient(180deg, #010038 0%, #04064d 100%);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding-bottom: 80px;
}

.hero .hero-container {
    position: relative;
    z-index: 2;
    padding: 140px 0 0 0;
}

.hero .hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.4px;
    color: #50e1b8;
    background: rgba(80, 225, 184, 0.12);
    border: 1px solid rgba(80, 225, 184, 0.35);
    margin-bottom: 24px;
    text-transform: uppercase;
}

.hero h1 {
    margin-bottom: 24px;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
}

.hero h1 span {
    background: linear-gradient(90deg, #50e1b8 0%, #2574dd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero .hero-sub {
    max-width: 640px;
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
    margin: 0 auto 36px auto;
}

.hero .hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 60px;
}

.hero .btn-get-started {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.3px;
    display: inline-block;
    padding: 14px 34px;
    border-radius: 50px;
    transition: 0.4s;
    line-height: 1;
    color: #ffffff;
    background: #2574dd;
    border: 2px solid #2574dd;
    box-shadow: 0 8px 24px rgba(37, 116, 221, 0.35);
}

.hero .btn-get-started:hover {
    background: color-mix(in srgb, #2574dd, #50e1b8 20%);
    border-color: color-mix(in srgb, #2574dd, #50e1b8 20%);
    color: #ffffff;
    transform: translateY(-2px);
    text-decoration: none;
}

.hero .btn-get-started.btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
}

.hero .btn-get-started.btn-outline:hover {
    background: #50e1b8;
    border-color: #50e1b8;
    color: #010038;
}

.hero .hero-stats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 24px 56px;
}

.hero .stat {
    text-align: center;
}

.hero .stat .stat-value {
    display: block;
    font-family: var(--heading-font);
    font-size: 34px;
    font-weight: 800;
    color: #50e1b8;
    line-height: 1;
    margin-bottom: 6px;
}

.hero .stat .stat-label {
    font-size: 13px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 768px) {
    .hero {
        min-height: 90vh;
        padding-bottom: 60px;
    }

    .hero .hero-container {
        padding: 120px 0 0 0;
    }

    .hero h1 {
        font-size: 32px;
    }

    .hero .hero-sub {
        font-size: 16px;
    }
}

.hero .hero-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 1;
}

.hero .hero-particles i {
    position: absolute;
    bottom: -10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #50e1b8;
    box-shadow: 0 0 8px rgba(80, 225, 184, 0.9);
    opacity: 0;
    animation: hero-particles-rise linear infinite;
}

.hero .hero-particles i:nth-child(1) {
    left: 7%;
    animation-duration: 7s;
    animation-delay: 0s;
}

.hero .hero-particles i:nth-child(2) {
    left: 18%;
    animation-duration: 9s;
    animation-delay: 1.2s;
}

.hero .hero-particles i:nth-child(3) {
    left: 29%;
    animation-duration: 6.4s;
    animation-delay: 2.1s;
}

.hero .hero-particles i:nth-child(4) {
    left: 41%;
    animation-duration: 8.2s;
    animation-delay: 0.6s;
}

.hero .hero-particles i:nth-child(5) {
    left: 53%;
    animation-duration: 7.6s;
    animation-delay: 3.4s;
}

.hero .hero-particles i:nth-child(6) {
    left: 64%;
    animation-duration: 6s;
    animation-delay: 1.8s;
}

.hero .hero-particles i:nth-child(7) {
    left: 76%;
    animation-duration: 8.8s;
    animation-delay: 0.2s;
}

.hero .hero-particles i:nth-child(8) {
    left: 88%;
    animation-duration: 6.8s;
    animation-delay: 2.8s;
}

@keyframes hero-particles-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }

    14% {
        opacity: 0.85;
    }

    100% {
        transform: translateY(-100vh);
        opacity: 0;
    }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .inner-title {
    font-size: 2.75rem;
    font-weight: 700;
    margin: 30px 0;
}

@media (min-width: 991px) {
    .about .inner-title {
        max-width: 65%;
        margin: 0 0 80px 0;
    }
}

.about .our-story {
    padding: 40px;
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
}

@media (min-width: 991px) {
    .about .our-story {
        padding-right: 35%;
    }
}

.about .our-story h4 {
    text-transform: uppercase;
    font-size: 1.1rem;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.about .our-story h3 {
    font-size: 2.25rem;
    font-weight: 700;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .our-story p:last-child {
    margin-bottom: 0;
}

.about ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.about ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.about ul i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    line-height: 1.2;
    color: var(--accent-color);
}

.about .watch-video i {
    font-size: 2rem;
    transition: 0.3s;
    color: var(--accent-color);
}

.about .watch-video a {
    font-weight: 600;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-left: 8px;
    transition: 0.3s;
}

.about .watch-video:hover a {
    color: var(--accent-color);
}

.about .about-img {
    min-height: 400px;
    position: relative;
}

@media (min-width: 992px) {
    .about .about-img {
        position: absolute;
        top: 0;
        right: 0;
        min-height: 600px;
    }
}

.about .about-img img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
}

/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
    padding: 20px 0;
}

.clients .client-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.clients .client-logo img {
    padding: 20px 40px;
    max-width: 90%;
    transition: 0.3s;
    opacity: 0.5;
    filter: grayscale(100);
}

.clients .client-logo img:hover {
    filter: none;
    opacity: 1;
}

@media (max-width: 640px) {
    .clients .client-logo img {
        padding: 20px;
    }
}

/*--------------------------------------------------------------
# Features 2 Section
--------------------------------------------------------------*/
.features-2 .features-image {
    position: relative;
}

.features-2 .features-item h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 5px 0;
}

.features-2 .features-item i {
    font-size: 48px;
    color: var(--accent-color);
    margin-right: 20px;
    line-height: 0;
}

.features-2 .features-item p {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 0;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
    background-color: var(--surface-color);
    text-align: center;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    padding: 80px 20px;
    transition: border ease-in-out 0.3s;
    height: 100%;
}

.services .service-item .icon {
    margin: 0 auto;
    width: 64px;
    height: 64px;
    background: var(--accent-color);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: 0.3s;
}

.services .service-item .icon i {
    color: var(--contrast-color);
    font-size: 28px;
    transition: ease-in-out 0.3s;
}

.services .service-item h3 {
    font-weight: 700;
    margin: 10px 0 15px 0;
    font-size: 22px;
    transition: 0.3s;
}

.services .service-item p {
    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
}

.services .service-item:hover {
    border-color: var(--accent-color);
}

.services .service-item:hover h3 {
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    background: radial-gradient(900px 400px at 15% 120%, rgba(80, 225, 184, 0.25) 0%, transparent 60%),
    radial-gradient(900px 500px at 90% -20%, rgba(37, 116, 221, 0.5) 0%, transparent 60%),
    #010038;
}

.call-to-action .container {
    position: relative;
    z-index: 3;
}

.call-to-action h3 {
    font-size: 32px;
    font-weight: 800;
    color: var(--default-color);
}

.call-to-action p {
    color: var(--default-color);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    opacity: 0.85;
}

.call-to-action .cta-btn {
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.3px;
    display: inline-block;
    padding: 14px 44px;
    border-radius: 50px;
    transition: 0.4s;
    margin: 10px;
    border: 2px solid #50e1b8;
    color: #010038;
    background: #50e1b8;
}

.call-to-action .cta-btn:hover {
    background: transparent;
    color: #50e1b8;
    text-decoration: none;
}

.cta-grid {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(circle at 1px 1px, rgba(80, 225, 184, 0.4) 1px, transparent 1.7px);
    background-size: 26px 26px;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 80%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 80%);
}

.cta-shafts {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 1;
}

.cta-shafts i {
    position: absolute;
    top: -15%;
    width: 2px;
    height: 70%;
    background: linear-gradient(to top, transparent, #50e1b8);
    opacity: 0;
    animation: cta-shafts-fall 2.4s ease-in infinite;
}

.cta-shafts i:nth-child(1) {
    left: 10%;
    animation-delay: 0s;
}

.cta-shafts i:nth-child(2) {
    left: 28%;
    animation-delay: 0.7s;
}

.cta-shafts i:nth-child(3) {
    left: 46%;
    animation-delay: 1.3s;
}

.cta-shafts i:nth-child(4) {
    left: 64%;
    animation-delay: 0.35s;
}

.cta-shafts i:nth-child(5) {
    left: 82%;
    animation-delay: 1.8s;
}

@keyframes cta-shafts-fall {
    0% {
        top: -15%;
        opacity: 0;
    }

    12% {
        opacity: 0.9;
    }

    88% {
        opacity: 0.9;
    }

    100% {
        top: 115%;
        opacity: 0;
    }
}


/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing {
    padding: 60px 0 120px 0;
}

.pricing .section-title {
    margin-bottom: 40px;
}

.pricing .pricing-item {
    background-color: var(--surface-color);
    box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1);
    padding: 60px 40px;
    height: 100%;
    position: relative;
    border-radius: 15px;
}

.pricing h3 {
    font-weight: 600;
    margin-bottom: 15px;
    font-size: 20px;
    text-align: center;
}

.pricing .icon {
    margin: 30px auto 20px auto;
    width: 70px;
    height: 70px;
    background: var(--accent-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    transform-style: preserve-3d;
}

.pricing .icon i {
    color: var(--background-color);
    font-size: 28px;
    transition: ease-in-out 0.3s;
    line-height: 0;
}

.pricing .icon::before {
    position: absolute;
    content: "";
    height: 86px;
    width: 86px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color), transparent 80%);
    transition: all 0.3s ease-out 0s;
    transform: translateZ(-1px);
}

.pricing .icon::after {
    position: absolute;
    content: "";
    height: 102px;
    width: 102px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    transition: all 0.3s ease-out 0s;
    transform: translateZ(-2px);
}

.pricing h4 {
    font-size: 48px;
    color: var(--accent-color);
    font-weight: 700;
    font-family: var(--heading-font);
    margin-bottom: 25px;
    text-align: center;
}

.pricing h4 sup {
    font-size: 28px;
}

.pricing h4 span {
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 18px;
    font-weight: 400;
}

.pricing ul {
    padding: 20px 0;
    list-style: none;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    text-align: left;
    line-height: 20px;
}

.pricing ul li {
    padding: 10px 0;
    display: flex;
    align-items: center;
}

.pricing ul i {
    color: #059652;
    font-size: 24px;
    padding-right: 3px;
}

.pricing ul .na {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na i {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.pricing ul .na span {
    text-decoration: line-through;
}

.pricing .buy-btn {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    display: inline-block;
    padding: 8px 40px 10px 40px;
    border-radius: 50px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
    transition: none;
    font-size: 16px;
    font-weight: 600;
    font-family: var(--heading-font);
    transition: 0.3s;
}

.pricing .buy-btn:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
}

.pricing .featured {
    z-index: 10;
    border: 3px solid var(--accent-color);
}

@media (min-width: 992px) {
    .pricing .featured {
        transform: scale(1.15);
    }
}

/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
    background-color: var(--surface-color);
    position: relative;
    padding: 20px;
    margin-bottom: 15px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-radius: 5px;
    overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
    margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    margin: 0 30px 0 0;
    transition: 0.3s;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.faq .faq-container .faq-item h3 .num {
    color: var(--accent-color);
    padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
    color: var(--accent-color);
}

.faq .faq-container .faq-item .faq-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: 0.3s ease-in-out;
    visibility: hidden;
    opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
    margin-bottom: 0;
    overflow: hidden;
}

.faq .faq-container .faq-item .faq-toggle {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 16px;
    line-height: 0;
    transition: 0.3s;
    cursor: pointer;
}

.faq .faq-container .faq-item .faq-toggle:hover {
    color: var(--accent-color);
}

.faq .faq-container .faq-active {
    background-color: color-mix(in srgb, var(--accent-color), transparent 97%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.faq .faq-container .faq-active h3 {
    color: var(--accent-color);
}

.faq .faq-container .faq-active .faq-content {
    grid-template-rows: 1fr;
    visibility: visible;
    opacity: 1;
    padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
    transform: rotate(90deg);
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .member {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    text-align: center;
    margin-bottom: 20px;
}

.team .member img {
    margin: -1px -1px 30px -1px;
}

.team .member .member-content {
    padding: 0 20px 30px 20px;
}

.team .member h4 {
    font-weight: 700;
    margin-bottom: 2px;
    font-size: 18px;
}

.team .member span {
    font-style: italic;
    display: block;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.team .member p {
    padding-top: 10px;
    font-size: 14px;
    font-style: italic;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.team .member .social {
    margin-top: 15px;
}

.team .member .social a {
    color: color-mix(in srgb, var(--default-color), transparent 60%);
    transition: 0.3s;
}

.team .member .social a:hover {
    color: var(--accent-color);
}

.team .member .social i {
    font-size: 18px;
    margin: 0 2px;
}

/*--------------------------------------------------------------
# Gallery Section
--------------------------------------------------------------*/
.gallery .gallery-item {
    overflow: hidden;
    border-right: 3px solid var(--background-color);
    border-bottom: 3px solid var(--background-color);
}

.gallery .gallery-item img {
    transition: all ease-in-out 0.4s;
}

.gallery .gallery-item:hover img {
    transform: scale(1.1);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item + .info-item {
    margin-top: 40px;
}

.contact .info-item i {
    color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    font-size: 20px;
    width: 44px;
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    transition: all 0.3s ease-in-out;
    margin-right: 15px;
}

.contact .info-item h3 {
    padding: 0;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.contact .info-item p {
    padding: 0;
    margin-bottom: 0;
    font-size: 14px;
}

.contact .info-item:hover i {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.contact .php-email-form {
    height: 100%;
}

.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
    font-size: 14px;
    padding: 10px 15px;
    box-shadow: none;
    border-radius: 0;
    color: var(--default-color);
    background-color: color-mix(in srgb, var(--background-color), transparent 50%);
    border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}

.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
    border-color: var(--accent-color);
}

.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
    color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.contact .php-email-form button[type=submit] {
    color: var(--contrast-color);
    background: var(--accent-color);
    border: 0;
    padding: 10px 30px;
    transition: 0.4s;
    border-radius: 50px;
}

.contact .php-email-form button[type=submit]:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 25%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
    width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background-color: color-mix(in srgb, var(--default-color), transparent 85%);
    opacity: 1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
    background-color: var(--surface-color);
    padding: 30px;
    box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.portfolio-details .portfolio-info ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
    margin-top: 10px;
}

.portfolio-details .portfolio-description {
    padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
    padding: 0;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
    background-color: var(--surface-color);
    padding: 10px 30px;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    margin-bottom: 20px;
}

.service-details .services-list a {
    display: block;
    line-height: 1;
    padding: 8px 0 8px 15px;
    border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
    margin: 20px 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    transition: 0.3s;
}

.service-details .services-list a.active {
    color: var(--heading-color);
    font-weight: 700;
    border-color: var(--accent-color);
}

.service-details .services-list a:hover {
    border-color: var(--accent-color);
}

.service-details .services-img {
    margin-bottom: 20px;
}

.service-details h3 {
    font-size: 26px;
    font-weight: 700;
}

.service-details h4 {
    font-size: 20px;
    font-weight: 700;
}

.service-details p {
    font-size: 15px;
}

.service-details ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.service-details ul li {
    padding: 5px 0;
    display: flex;
    align-items: center;
}

.service-details ul i {
    font-size: 20px;
    margin-right: 8px;
    color: var(--accent-color);
}

/*--------------------------------------------------------------
# Blog Section
--------------------------------------------------------------*/
.blog .blog-entry {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    margin-bottom: 30px;
    transition: 0.3s;
    overflow: hidden;
}

.blog .blog-entry:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.blog .blog-entry img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.blog .blog-entry .blog-content {
    padding: 25px 30px 30px 30px;
}

.blog .blog-entry .blog-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 12px;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog .blog-entry .blog-meta i {
    margin-right: 4px;
    color: var(--accent-color);
}

.blog .blog-entry .blog-meta a {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: 0.3s;
}

.blog .blog-entry .blog-meta a:hover {
    color: var(--accent-color);
}

.blog .blog-entry .blog-tag {
    display: inline-block;
    padding: 3px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    transition: 0.3s;
}

.blog .blog-entry .blog-tag:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
}

.blog .blog-entry h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.blog .blog-entry h3 a {
    color: var(--heading-color);
    transition: 0.3s;
}

.blog .blog-entry h3 a:hover {
    color: var(--accent-color);
}

.blog .blog-entry p {
    font-size: 15px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 15px;
}

.blog .blog-entry .read-more {
    display: inline-flex;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    color: var(--accent-color);
    transition: 0.3s;
}

.blog .blog-entry .read-more i {
    margin-left: 5px;
    transition: 0.3s;
}

.blog .blog-entry .read-more:hover {
    color: color-mix(in srgb, var(--accent-color), transparent 25%);
}

.blog .blog-entry .read-more:hover i {
    transform: translateX(4px);
}

.blog-sidebar .sidebar-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--accent-color);
}

.blog-sidebar .sidebar-item {
    padding: 12px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-sidebar .sidebar-item:last-child {
    border-bottom: none;
}

.blog-sidebar .sidebar-item a {
    color: var(--heading-color);
    font-weight: 500;
    transition: 0.3s;
}

.blog-sidebar .sidebar-item a:hover {
    color: var(--accent-color);
}

.blog-sidebar .sidebar-item .date {
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-sidebar .category-list {
    list-style: none;
    padding: 0;
}

.blog-sidebar .category-list li {
    padding: 8px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.blog-sidebar .category-list li:last-child {
    border-bottom: none;
}

.blog-sidebar .category-list li a {
    color: var(--heading-color);
    transition: 0.3s;
}

.blog-sidebar .category-list li a:hover {
    color: var(--accent-color);
}

.blog-sidebar .category-list li span {
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    padding: 2px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
}

.blog-entry-featured {
    position: relative;
}

.blog-entry-featured .blog-content {
    padding: 35px 40px 40px 40px;
}

.blog-entry-featured h3 {
    font-size: 26px;
}

.blog-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
}

.blog-pagination a,
.blog-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 14px;
    transition: 0.3s;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    color: var(--default-color);
    background: var(--surface-color);
}

.blog-pagination a:hover,
.blog-pagination span.active {
    background: var(--accent-color);
    color: var(--contrast-color);
    border-color: var(--accent-color);
}

@media (max-width: 767px) {
    .blog .blog-entry .blog-content {
        padding: 20px;
    }

    .blog .blog-entry-featured .blog-content {
        padding: 25px;
    }

    .blog .blog-entry h3 {
        font-size: 18px;
    }

    .blog .blog-entry-featured h3 {
        font-size: 20px;
    }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
    /* Add your styles here */
}

/*--------------------------------------------------------------
# CloudWolf Custom Components
--------------------------------------------------------------*/
.page-title.dark-background {
    background: radial-gradient(900px 400px at 85% -20%, rgba(37, 116, 221, 0.4) 0%, transparent 60%),
    radial-gradient(700px 400px at 5% 120%, rgba(80, 225, 184, 0.2) 0%, transparent 55%),
    #010038;
}

.page-title p {
    max-width: 640px;
    margin: 0 auto 0 auto;
    opacity: 0.85;
}

/* Consultancy About */
.about-consultancy .inner-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin: 0 0 24px 0;
    line-height: 1.15;
}

.about-consultancy .lead {
    font-size: 18px;
    line-height: 1.7;
    color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.about-consultancy ul {
    list-style: none;
    padding: 0;
    font-size: 15px;
}

.about-consultancy ul li {
    padding: 6px 0;
    display: flex;
    align-items: center;
}

.about-consultancy ul i {
    font-size: 1.25rem;
    margin-right: 0.5rem;
    line-height: 1.2;
    color: var(--accent-color);
}

.about-consultancy .consultancy-card {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 12px;
    padding: 28px;
    height: 100%;
    transition: 0.3s;
}

.about-consultancy .consultancy-card:hover {
    border-color: var(--accent-color);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(1, 0, 56, 0.08);
}

.about-consultancy .consultancy-card i {
    font-size: 32px;
    color: var(--accent-color);
    display: block;
    margin-bottom: 14px;
}

.about-consultancy .consultancy-card h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.about-consultancy .consultancy-card p {
    font-size: 14px;
    margin: 0;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about-consultancy .stat-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    height: 100%;
    background: #010038;
}

.about-consultancy .stat-card::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 190%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: conic-gradient(from 0deg, #2574dd, #50e1b8 35%, #2574dd 60%, #50e1b8 100%);
    animation: stat-spin 5s linear infinite;
}

.about-consultancy .stat-card .stat-inner {
    position: relative;
    margin: 2px;
    height: calc(100% - 4px);
    border-radius: 12px;
    background: #010038;
    padding: 26px 16px;
    text-align: center;
}

.about-consultancy .stat-card .value {
    display: block;
    font-family: var(--heading-font);
    font-size: 40px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    margin-bottom: 8px;
}

.about-consultancy .stat-card .label {
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #50e1b8;
}

@keyframes stat-spin {
    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* Case Studies */
.case-studies .case-item {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
}

.case-studies .case-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(1, 0, 56, 0.1);
    border-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.case-studies .case-cover {
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.case-studies .case-cover i {
    font-size: 44px;
}

.case-studies .case-cover.cover-1 {
    background: linear-gradient(135deg, #2574dd 0%, #010038 100%);
}

.case-studies .case-cover.cover-2 {
    background: linear-gradient(135deg, #50e1b8 0%, #2574dd 130%);
}

.case-studies .case-cover.cover-3 {
    background: linear-gradient(135deg, #8f49ee 0%, #2574dd 120%);
}

.case-studies .case-cover.cover-4 {
    background: linear-gradient(135deg, #ee6749 0%, #2574dd 130%);
}

.case-studies .case-content {
    padding: 26px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.case-studies .case-content .case-tag {
    display: inline-block;
    align-self: flex-start;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    background: color-mix(in srgb, var(--accent-color), transparent 90%);
    color: var(--accent-color);
    margin-bottom: 14px;
}

.case-studies .case-content h3 {
    font-size: 19px;
    font-weight: 700;
    margin-bottom: 10px;
}

.case-studies .case-content p {
    font-size: 14px;
    line-height: 1.6;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin-bottom: 16px;
}

.case-studies .case-content .case-meta {
    margin-top: auto;
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Testimonials */
.testimonials .testimonial-item {
    background-color: var(--surface-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 88%);
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    position: relative;
}

.testimonials .testimonial-item .quote-icon {
    font-size: 36px;
    color: color-mix(in srgb, var(--accent-color), transparent 60%);
    line-height: 1;
    margin-bottom: 14px;
}

.testimonials .testimonial-item p {
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.testimonials .testimonial-item .testimonial-author {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.testimonials .testimonial-item .testimonial-author strong {
    display: block;
    font-family: var(--heading-font);
    color: var(--heading-color);
    font-size: 15px;
}

.testimonials .testimonial-item .testimonial-author span {
    font-size: 13px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.testimonials .testimonial-placeholder {
    text-align: center;
    padding: 20px 0 0 0;
}

.testimonials .testimonial-placeholder .bi-plus-circle {
    font-size: 28px;
    color: var(--accent-color);
    display: block;
    margin-bottom: 10px;
}

.testimonials .testimonial-placeholder p {
    font-style: normal;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* Blog thumbnails (placeholder gradient blocks). Centering/color/default icon size live on
   the bare .blog-thumb selector (not scoped to .blog/.blog-details) so the icon renders
   correctly wherever IconHeaderTagHelper's output ends up — including the admin
   icon-header-picker preview and Posts list thumbnail, neither of which sits inside a
   .blog or .blog-details ancestor. The scoped rules below only override size for the
   specific public-page contexts. */
.blog-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.blog-thumb i {
    font-size: 40px;
}

.blog .blog-entry .blog-thumb,
.blog-details .blog-thumb {
    width: 100%;
    height: 250px;
}

.blog .blog-entry .blog-thumb i,
.blog-details .blog-thumb i {
    font-size: 56px;
}

.blog-thumb.t-1 {
    background: linear-gradient(135deg, #2574dd 0%, #010038 100%);
}

.blog-thumb.t-2 {
    background: linear-gradient(135deg, #50e1b8 0%, #2574dd 140%);
}

.blog-thumb.t-3 {
    background: linear-gradient(135deg, #8f49ee 0%, #2574dd 120%);
}

.blog-thumb.t-4 {
    background: linear-gradient(135deg, #ee6749 0%, #2574dd 130%);
}

.blog-thumb.t-5 {
    background: linear-gradient(135deg, #010038 0%, #2574dd 120%);
}

.blog-thumb.t-6 {
    background: linear-gradient(135deg, #2574dd 0%, #8f49ee 120%);
}

/* t-7..t-12: CWolf-specific extension of the CAW template's original 6 gradients (which
   only ever shipped t-1..t-6) — added to double the icon-header-picker's theme choices. */
.blog-thumb.t-7 {
    background: linear-gradient(135deg, #f7b733 0%, #2574dd 130%);
}

.blog-thumb.t-8 {
    background: linear-gradient(135deg, #ff5f6d 0%, #2574dd 130%);
}

.blog-thumb.t-9 {
    background: linear-gradient(135deg, #11998e 0%, #010038 120%);
}

.blog-thumb.t-10 {
    background: linear-gradient(135deg, #f107a3 0%, #8f49ee 120%);
}

.blog-thumb.t-11 {
    background: linear-gradient(135deg, #43cea2 0%, #185a9d 120%);
}

.blog-thumb.t-12 {
    background: linear-gradient(135deg, #232526 0%, #2574dd 140%);
}

/* t-13..t-27: second CWolf-specific extension batch, widening the icon-header-picker's
   theme choices from 12 to 27. Same palette as t-1..t-12, recombined, plus one new
   accent (#38ef7d) for variety. */
.blog-thumb.t-13 {
    background: linear-gradient(135deg, #f7b733 0%, #ff5f6d 130%);
}

.blog-thumb.t-14 {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 120%);
}

.blog-thumb.t-15 {
    background: linear-gradient(135deg, #8f49ee 0%, #f107a3 120%);
}

.blog-thumb.t-16 {
    background: linear-gradient(135deg, #43cea2 0%, #50e1b8 120%);
}

.blog-thumb.t-17 {
    background: linear-gradient(135deg, #232526 0%, #8f49ee 140%);
}

.blog-thumb.t-18 {
    background: linear-gradient(135deg, #2574dd 0%, #43cea2 130%);
}

.blog-thumb.t-19 {
    background: linear-gradient(135deg, #ee6749 0%, #f7b733 130%);
}

.blog-thumb.t-20 {
    background: linear-gradient(135deg, #010038 0%, #f107a3 130%);
}

.blog-thumb.t-21 {
    background: linear-gradient(135deg, #185a9d 0%, #50e1b8 120%);
}

.blog-thumb.t-22 {
    background: linear-gradient(135deg, #ff5f6d 0%, #8f49ee 130%);
}

.blog-thumb.t-23 {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 130%);
}

.blog-thumb.t-24 {
    background: linear-gradient(135deg, #f107a3 0%, #2574dd 130%);
}

.blog-thumb.t-25 {
    background: linear-gradient(135deg, #f7b733 0%, #010038 140%);
}

.blog-thumb.t-26 {
    background: linear-gradient(135deg, #50e1b8 0%, #8f49ee 130%);
}

.blog-thumb.t-27 {
    background: linear-gradient(135deg, #232526 0%, #ee6749 140%);
}

.blog-details .blog-thumb {
    height: 360px;
    border-radius: 12px;
    margin-bottom: 30px;
}

.blog-details .blog-thumb i {
    font-size: 84px;
}

.blog-details h3 {
    margin-top: 30px;
    font-weight: 700;
}

.blog-details-meta span {
    margin-right: 18px;
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.blog-details-meta i {
    color: var(--accent-color);
    margin-right: 4px;
}

/* Case Study Links */
.case-studies .case-link {
    display: block;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* Case Study Pages */
.cs-banner {
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 14px;
    margin-bottom: 30px;
}

.cs-banner i {
    font-size: 56px;
}

.cs-banner.banner-1 {
    background: linear-gradient(135deg, #2574dd 0%, #010038 100%);
}

.cs-banner.banner-2 {
    background: linear-gradient(135deg, #50e1b8 0%, #2574dd 130%);
}

.cs-banner.banner-3 {
    background: linear-gradient(135deg, #8f49ee 0%, #2574dd 120%);
}

.cs-banner.banner-4 {
    background: linear-gradient(135deg, #ee6749 0%, #2574dd 130%);
}

.cs-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.cs-meta .cs-meta-item {
    flex: 1 1 130px;
    background: #f3f7fe;
    border: 1px solid #e3ecf9;
    border-radius: 10px;
    padding: 14px 16px;
}

.cs-meta .cs-meta-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #6b7a99;
    margin-bottom: 4px;
}

.cs-meta .cs-meta-value {
    font-size: 15px;
    font-weight: 600;
    color: #010038;
}

.cs-meta .cs-meta-value a {
    color: #2574dd;
    text-decoration: none;
}

.cs-meta .cs-meta-value a:hover {
    text-decoration: underline;
}

.cs-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 34px;
}

.cs-stat {
    flex: 1 1 130px;
    text-align: center;
    background: #010038;
    border-radius: 12px;
    padding: 20px 16px;
}

.cs-stat .cs-stat-value {
    display: block;
    font-family: var(--heading-font);
    font-size: 30px;
    font-weight: 800;
    color: #50e1b8;
    line-height: 1;
    margin-bottom: 6px;
}

.cs-stat .cs-stat-label {
    display: block;
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.cs-body h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 32px 0 12px 0;
}

.cs-body p {
    line-height: 1.75;
    color: color-mix(in srgb, var(--default-color), transparent 10%);
}

.cs-body ul {
    list-style: none;
    padding: 0;
}

.cs-body ul li {
    padding: 4px 0;
    display: flex;
    gap: 10px;
}

.cs-body ul li::before {
    content: "\2713";
    color: #50e1b8;
    font-weight: 700;
}

.cs-quote {
    border-left: 3px solid #50e1b8;
    background: #f3f7fe;
    padding: 22px 24px;
    border-radius: 0 12px 12px 0;
    margin: 34px 0;
}

.cs-quote p {
    font-size: 17px;
    font-style: italic;
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    margin: 0 0 8px 0;
}

.cs-quote cite {
    font-size: 13px;
    color: #6b7a99;
    font-style: normal;
}

.cs-note {
    font-size: 13px;
    color: #6b7a99;
    margin-top: 30px;
}

.cs-sidebox {
    background: #f3f7fe;
    border: 1px solid #e3ecf9;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.cs-sidebox h5 {
    font-weight: 700;
    margin-bottom: 12px;
}

.cs-sidebox p {
    font-size: 14px;
}

.cs-sidebox ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.cs-sidebox ul li {
    padding: 6px 0;
    display: flex;
    gap: 10px;
    align-items: baseline;
}

.cs-sidebox ul li i {
    color: #50e1b8;
    font-size: 14px;
}

.cs-sidebox a {
    color: #2574dd;
    text-decoration: none;
}

.cs-sidebox a:hover {
    text-decoration: underline;
}

.cs-sidebox .cs-cta {
    display: block;
    text-align: center;
    padding: 13px 24px;
    border-radius: 50px;
    background: #2574dd;
    color: #ffffff;
    font-weight: 600;
    font-size: 15px;
    transition: 0.3s;
}

.cs-sidebox .cs-cta:hover {
    background: #50e1b8;
    color: #010038;
    text-decoration: none;
}

/* Testimonial case-study reference */
.testimonials .testimonial-item .case-ref {
    display: inline-block;
    margin-top: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2574dd;
    text-decoration: none;
}

.testimonials .testimonial-item .case-ref:hover {
    text-decoration: underline;
}

/*--------------------------------------------------------------
# Page Title — content above background effects
-------------------------------------------------------------*/
.page-title .container {
    position: relative;
    z-index: 2;
}

/*--------------------------------------------------------------
# Aurora Blobs effect (page titles + footer)
-------------------------------------------------------------*/
.page-title .page-aurora,
.footer .footer-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    filter: blur(50px);
    mix-blend-mode: screen;
    pointer-events: none;
}

.page-title .page-aurora .blob,
.footer .footer-aurora .blob {
    position: absolute;
    width: 840px;
    height: 840px;
    border-radius: 50%;
}

.page-title .page-aurora .blob-1,
.footer .footer-aurora .blob-1 {
    left: -8%;
    top: 6%;
    background: radial-gradient(circle, rgba(37, 116, 221, 0.8), transparent 65%);
    animation: page-blob-float 3s ease-in-out infinite alternate;
}

.page-title .page-aurora .blob-2,
.footer .footer-aurora .blob-2 {
    right: -10%;
    top: -6%;
    background: radial-gradient(circle, rgba(80, 225, 184, 0.6), transparent 65%);
    animation: page-blob-float 4s ease-in-out infinite alternate-reverse;
}

.page-title .page-aurora .blob-3,
.footer .footer-aurora .blob-3 {
    left: 32%;
    bottom: -22%;
    background: radial-gradient(circle, rgba(37, 116, 221, 0.55), transparent 65%);
    animation: page-blob-float 3.5s ease-in-out infinite alternate;
}

@keyframes page-blob-float {
    0% {
        transform: translate(0, 0) scale(1);
    }
    100% {
        transform: translate(60px, -30px) scale(1.15);
    }
}