/**
* Template Name: Lumia
* Template URL: https://bootstrapmade.com/lumia-bootstrap-business-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: "Poppins",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --heading-font: "Inter",  sans-serif;
    --nav-font: "Poppins",  sans-serif;
    --stat-font: "Roboto",  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: #f2f2e8; /* Warm off-white page background, matches the new marketing site (--base-2) */
    --default-color: #444444; /* Default color used for the majority of the text content across the entire website */
    --heading-color: #384046; /* Color for headings, subheadings and title throughout the website */
    --accent-color: #3498db; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
    --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. */
    --button-color: #a4004d;
}

/* 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: #444444;  /* The default color of the main navmenu links */
    --nav-hover-color: #a4004d; /* 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: #444444; /* Used for navigation links of the dropdown items in the navigation menu. */
    --nav-dropdown-hover-color: #3498db; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

.fluent-button.neutral {
    background-color: var(--heading-color);
}
/* 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: #f7fbfe;
    --surface-color: #ffffff;
}

.dark-background {
    --background-color: #ebebeb;
    --default-color: #000;
    --heading-color: #000;
    --surface-color: #ebebeb;
    --contrast-color: #000;
}

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

/*--------------------------------------------------------------
# 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);
    }
}

/*--------------------------------------------------------------
# FTRI Brand Colors (matches devftri.evokad.com)
--------------------------------------------------------------*/
:root {
    --ftri-primary: #911744;
    --ftri-primary-2: #741236;
    --ftri-accent: #4abdac;
    --ftri-gold: #ffbd1e;
    --ftri-white: #ffffff;
    --ftri-font: "Poppins", sans-serif;
}

/*--------------------------------------------------------------
# Header / Navbar
--------------------------------------------------------------*/
.ftri-header {
    background-color: var(--ftri-primary);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    z-index: 1000;
}

.ftri-header .navbar {
    padding: 16px 30px;
}

.ftri-logo img {
    width: 330px;
    max-width: 62vw;
    height: auto;
}

/* Right side stacks into two rows (buttons over nav) to match the live header height */
.ftri-nav-right {
    row-gap: 18px;
}

.ftri-header .navbar-nav .nav-link {
    color: var(--ftri-white);
    font-family: var(--ftri-font);
    font-weight: 500;
    font-size: 1.25rem;
    padding: 6px 14px;
    transition: color 0.25s ease;
}

.ftri-header .navbar-nav .nav-link:hover,
.ftri-header .navbar-nav .nav-link:focus,
.ftri-header .navbar-nav .nav-link.active,
.ftri-header .navbar-nav .show > .nav-link {
    color: var(--ftri-gold);
}

.ftri-header .dropdown-toggle::after {
    vertical-align: middle;
}

/* CTA buttons */
.ftri-header-cta .btn {
    border-radius: 50px;
    padding: 8px 22px;
    font-family: var(--ftri-font);
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ftri-btn-outline {
    background-color: transparent;
    color: var(--ftri-white);
    border: 1px solid var(--ftri-white);
    transition: background-color 0.35s ease, color 0.35s ease;
}

.ftri-btn-outline:hover,
.ftri-btn-outline:focus {
    background-color: var(--ftri-white);
    color: var(--ftri-primary);
}

/* Maroon -> teal gradient pill, turns solid teal on hover (matches live .gradient_btn) */
.ftri-btn-solid {
    color: var(--ftri-white);
    border: 1px solid var(--ftri-primary);
    background: linear-gradient(104deg, var(--ftri-primary) 33.17%, var(--ftri-accent) 87.02%);
    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
    transition: background 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.45s ease;
}

.ftri-btn-solid:hover,
.ftri-btn-solid:focus {
    color: var(--ftri-white);
    background: var(--ftri-accent);
    border-color: var(--ftri-accent);
}

/* Mega menu ("More") */
.ftri-mega-menu {
    background-color: var(--ftri-primary-2);
    border: 0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    padding: 24px;
    margin-top: 10px;
}

.ftri-mega-cols {
    display: flex;
    gap: 32px;
}

.ftri-mega-col {
    flex: 1;
    min-width: 220px;
}

.ftri-mega-label {
    font-family: var(--ftri-font);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ftri-white);
    margin-bottom: 8px;
}

.ftri-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--ftri-white);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.ftri-mega-item:hover,
.ftri-mega-item:focus {
    background-color: rgba(255, 255, 255, 0.12);
    color: var(--ftri-white);
}

.ftri-mega-item i {
    font-size: 1.3rem;
    line-height: 1.5;
    flex-shrink: 0;
}

.ftri-mega-item .mega-title {
    display: block;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.4;
}

.ftri-mega-item .mega-sub {
    display: block;
    font-size: 0.875rem;
    line-height: 1.3;
    opacity: 0.85;
}

/* Hamburger toggler (white) */
.ftri-header .navbar-toggler {
    border-color: rgba(255, 255, 255, 0.5);
    padding: 6px 10px;
}

.ftri-header .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.25);
}

.ftri-header .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Desktop: keep the nav row tight under the buttons */
@media (min-width: 1200px) {
    .ftri-primary-menu {
        column-gap: 12px;
    }
}

/* Mobile: stack everything, full-width CTAs, flatten the mega menu */
@media (max-width: 1199.98px) {
    .ftri-logo img {
        width: 200px;
    }

    .ftri-nav-right {
        align-items: stretch !important;
        margin-top: 12px;
    }

    .ftri-header-cta .btn {
        width: 100%;
    }

    .ftri-mega-menu {
        margin-top: 0;
        padding: 12px;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.06);
    }

    .ftri-mega-cols {
        flex-direction: column;
        gap: 16px;
    }
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.ftri-footer {
    background-color: var(--ftri-accent);
    color: #000000;
    font-family: var(--ftri-font);
    font-size: 16px;
}

/* Link columns: compact and pushed toward the right */
.ftri-footer-cols {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
}

@media (min-width: 992px) {
    .ftri-footer-cols {
        justify-content: flex-end;
        gap: 56px;
    }
}

.ftri-footer-col {
    flex: 0 0 auto;
    min-width: 140px;
}

.ftri-footer-top {
    padding-top: 64px;
    padding-bottom: 16px;
}

.ftri-footer-logo {
    width: 100%;
    max-width: 480px;
    height: auto;
}

.ftri-footer-heading {
    display: inline-block;
    font-size: clamp(1.15rem, 5vw, 1.25rem);
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 16px;
    color: #000000;
}

.ftri-footer-heading:not(.no-arrow)::after {
    content: " >";
}

.ftri-footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
}

.ftri-footer-links a {
    color: #000000;
    text-decoration: none;
}

.ftri-footer-links a:hover {
    color: #000000;
    text-decoration: underline;
}

.ftri-footer-social {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
}

.ftri-footer-social a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #000000;
    text-decoration: none;
}

.ftri-footer-social a:hover {
    color: #000000;
    text-decoration: underline;
}

.ftri-footer-social a i {
    color: var(--ftri-primary);
    font-size: 1.25rem;
    line-height: 1;
}

.ftri-footer-bottom {
    margin-top: 48px;
    padding-top: 28px;
    padding-bottom: 28px;
    border-top: 1px solid rgba(0, 0, 0, 0.85);
    font-size: 0.95rem;
}

.ftri-footer-bottom p {
    margin-bottom: 0;
}

.ftri-footer-privacy a {
    color: #000000;
    text-decoration: none;
}

.ftri-footer-privacy a:hover {
    color: #000000;
    text-decoration: underline;
}

/*--------------------------------------------------------------
# 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: 25px 0;
    position: relative;
}

.page-title h1 {
    font-size: 24px;
    font-weight: 700;
}

.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 14px;
    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 70%);
}

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

@media (max-width: 1199px) {

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

/*--------------------------------------------------------------
# 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:before {
    content: "";
    position: absolute;
    display: block;
    width: 160px;
    height: 1px;
    background: color-mix(in srgb, var(--default-color), transparent 60%);
    left: 0;
    right: 0;
    bottom: 1px;
    margin: auto;
}

.section-title h2::after {
    content: "";
    position: absolute;
    display: block;
    width: 60px;
    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%;
    min-height: 60vh;
    position: relative;
    padding: 80px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

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

.hero:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    inset: 0;
    z-index: 2;
}

.hero .container {
    position: relative;
    z-index: 3;
}

.hero h2 {
    margin: 0;
    font-size: 48px;
    font-weight: 700;
}

.hero p {
    margin: 10px 0 0 0;
    font-size: 24px;
    color: var(--heading-color);
}

.hero .btn-get-started {
    background-color: var(--accent-color);
    color: var(--default-color);
    font-weight: 400;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
    padding: 10px 40px;
    margin: 30px 0 0 0;
    border-radius: 4px;
    transition: 0.5s;
}

.hero .btn-get-started:hover {
    background: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

@media (max-width: 768px) {
    .hero h2 {
        font-size: 32px;
    }

    .hero p {
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# What We Do Section
--------------------------------------------------------------*/
.what-we-do .why-box {
    color: var(--contrast-color);
    background: var(--accent-color);
    padding: 30px;
}

.what-we-do .why-box h3 {
    color: var(--contrast-color);
    font-weight: 700;
    font-size: 34px;
    margin-bottom: 30px;
}

.what-we-do .why-box p {
    margin-bottom: 30px;
}

.what-we-do .why-box .more-btn {
    display: inline-block;
    background: color-mix(in srgb, var(--contrast-color), transparent 85%);
    padding: 8px 40px 10px 40px;
    color: var(--contrast-color);
    transition: all ease-in-out 0.4s;
    border-radius: 50px;
}

.what-we-do .why-box .more-btn i {
    font-size: 14px;
}

.what-we-do .why-box .more-btn:hover {
    color: var(--accent-color);
    background: var(--surface-color);
}

.what-we-do .icon-box {
    background-color: var(--surface-color);
    text-align: center;
    padding: 40px 30px;
    width: 100%;
    height: 100%;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.what-we-do .icon-box i {
    color: var(--accent-color);
    margin-bottom: 30px;
    font-size: 32px;
    margin-bottom: 30px;
    background: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    transition: 0.3s;
}

.what-we-do .icon-box h4 {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 30px 0;
}

.what-we-do .icon-box p {
    font-size: 15px;
    color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.what-we-do .icon-box:hover i {
    color: var(--contrast-color);
    background: var(--accent-color);
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .about-content h3 {
    font-weight: 700;
    font-size: 26px;
}

.about .about-content ul {
    list-style: none;
    padding: 0;
}

.about .about-content ul li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 35px;
}

.about .about-content ul li:first-child {
    margin-top: 35px;
}

.about .about-content ul i {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 64px;
    height: 64px;
    font-size: 32px;
    color: #fff;
    background: var(--accent-color);
    margin-right: 15px;
    line-height: 0;
    border-radius: 5px;
}

.about .about-content ul h4 {
    font-size: 18px;
    font-weight: 600;
}

.about .about-content ul p {
    font-size: 15px;
}

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

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
    height: 60px;
    display: block;
    background: none;
    border-radius: 0;
}

.skills .progress .skill {
    color: var(--heading-color);
    padding: 0;
    margin: 0 0 6px 0;
    text-transform: uppercase;
    display: block;
    font-weight: 600;
    font-family: var(--heading-font);
}

.skills .progress .skill .val {
    float: right;
    font-style: normal;
}

.skills .progress-bar-wrap {
    background: color-mix(in srgb, var(--default-color), transparent 90%);
    height: 10px;
}

.skills .progress-bar {
    width: 1px;
    height: 10px;
    transition: 0.9s;
    background-color: var(--accent-color);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats {
    padding: 10px 0;
}

.stats .stats-item {
    padding: 30px;
    width: 100%;
}

.stats .stats-item span {
    color: var(--heading-color);
    font-family: var(--stat-font);
    font-size: 48px;
    display: block;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.stats .stats-item span:after {
    content: "";
    position: absolute;
    display: block;
    width: 25px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.stats .stats-item p {
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    padding: 0;
    margin: 0;
    font-family: var(--heading-font);
    font-weight: 500;
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
    background-color: var(--surface-color);
    padding: 50px 30px;
    margin-top: 36px;
    transition: all ease-in-out 0.3s;
    position: relative;
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    text-align: center;
}

.services .service-item .icon {
    background: var(--accent-color);
    color: var(--contrast-color);
    margin: 0;
    width: 72px;
    height: 72px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 28px;
    transition: ease-in-out 0.3s;
    position: absolute;
    top: -36px;
    left: calc(50% - 36px);
    border: 6px solid var(--background-color);
}

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

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

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

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

.services .service-item:hover .icon {
    background: var(--surface-color);
    border: 2px solid var(--accent-color);
}

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

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

.portfolio .portfolio-filters li {
    cursor: pointer;
    display: inline-block;
    padding: 0;
    font-size: 16px;
    font-weight: 600;
    margin: 0 10px;
    line-height: 1;
    text-transform: uppercase;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
}

.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
    color: var(--accent-color);
}

.portfolio .portfolio-filters li:first-child {
    margin-left: 0;
}

.portfolio .portfolio-filters li:last-child {
    margin-right: 0;
}

@media (max-width: 575px) {
    .portfolio .portfolio-filters li {
        font-size: 14px;
        margin: 0 5px;
    }
}

.portfolio .portfolio-item {
    position: relative;
}

.portfolio .portfolio-item .portfolio-info {
    background-color: color-mix(in srgb, var(--surface-color), transparent 10%);
    opacity: 0;
    position: absolute;
    left: 30px;
    right: 30px;
    bottom: 0;
    z-index: 3;
    transition: all ease-in-out 0.3s;
    padding: 15px;
}

.portfolio .portfolio-item .portfolio-info h4 {
    font-size: 18px;
    font-weight: 600;
    padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info p {
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    font-size: 14px;
    margin-bottom: 0;
    padding-right: 50px;
}

.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
    position: absolute;
    right: 50px;
    font-size: 24px;
    top: calc(50% - 14px);
    color: color-mix(in srgb, var(--default-color), transparent 30%);
    transition: 0.3s;
    line-height: 0;
}

.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
    color: var(--accent-color);
}

.portfolio .portfolio-item .portfolio-info .details-link {
    right: 14px;
    font-size: 28px;
}

.portfolio .portfolio-item:hover .portfolio-info {
    opacity: 1;
    bottom: 20px;
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-item {
    background-color: var(--surface-color);
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    box-sizing: content-box;
    padding: 30px;
    margin: 30px 15px;
    position: relative;
    height: 100%;
}

.testimonials .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50px;
    margin-right: 15px;
}

.testimonials .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 10px 0 5px 0;
}

.testimonials .testimonial-item h4 {
    font-size: 14px;
    color: color-mix(in srgb, var(--default-color), transparent 40%);
    margin: 0;
}

.testimonials .testimonial-item .stars {
    margin: 10px 0;
}

.testimonials .testimonial-item .stars i {
    color: #ffc107;
    margin: 0 1px;
}

.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--accent-color), transparent 50%);
    font-size: 26px;
    line-height: 0;
}

.testimonials .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.testimonials .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.testimonials .testimonial-item p {
    font-style: italic;
    margin: 15px auto 15px auto;
}

.testimonials .swiper-wrapper {
    height: auto;
}

.testimonials .swiper-pagination {
    margin-top: 20px;
    position: relative;
}

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

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

@media (max-width: 767px) {
    .testimonials .testimonial-wrap {
        padding-left: 0;
    }

    .testimonials .testimonial-item {
        padding: 30px;
        margin: 15px;
    }

    .testimonials .testimonial-item .testimonial-img {
        position: static;
        left: auto;
    }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .person {
    position: relative;
}

.team .person figure {
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
    overflow: hidden;
    margin-bottom: 30px;
}

.team .person img {
    transition: 0.3s all ease;
}

.team .person .person-contents {
    text-align: center;
}

.team .person .person-contents h3 {
    color: var(--heading-color);
    font-size: 24px;
}

.team .person .person-contents .position {
    color: var(--accent-color);
}

.team .person:hover img {
    transform: scale(1.05);
}

.team .person .social {
    position: absolute;
    bottom: 10px;
    left: 10px;
    z-index: 2;
}

.team .person .social a {
    display: block;
    margin-bottom: 10px;
    width: 40px;
    height: 40px;
    background: var(--contrast-color);
    position: relative;
}

.team .person .social a>span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.team .person .social a:hover {
    background: var(--accent-color);
    color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {
    background-image: url("../img/contact-bg.png");
    background-position: left center;
    background-repeat: no-repeat;
    position: relative;
}

@media (max-width: 640px) {
    .contact {
        background-position: center 50px;
        background-size: contain;
    }
}

.contact:before {
    content: "";
    background: color-mix(in srgb, var(--background-color), transparent 30%);
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
}

.contact .info-item+.info-item {
    margin-top: 40px;
}

.contact .info-item i {
    background: var(--accent-color);
    color: var(--contrast-color);
    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 .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 20%);
}

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

.portfolio-details .swiper-wrapper {
    height: auto;
}

.portfolio-details .swiper-button-prev,
.portfolio-details .swiper-button-next {
    width: 48px;
    height: 48px;
}

.portfolio-details .swiper-button-prev:after,
.portfolio-details .swiper-button-next:after {
    color: rgba(255, 255, 255, 0.8);
    background-color: rgba(0, 0, 0, 0.15);
    font-size: 24px;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.portfolio-details .swiper-button-prev:hover:after,
.portfolio-details .swiper-button-next:hover:after {
    background-color: rgba(0, 0, 0, 0.3);
}

@media (max-width: 575px) {

    .portfolio-details .swiper-button-prev,
    .portfolio-details .swiper-button-next {
        display: none;
    }
}

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

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

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

.portfolio-details .portfolio-info h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 20px;
    position: relative;
}

.portfolio-details .portfolio-info h3:after {
    content: "";
    position: absolute;
    display: block;
    width: 50px;
    height: 3px;
    background: var(--accent-color);
    left: 0;
    bottom: 0;
}

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

.portfolio-details .portfolio-info ul li {
    display: flex;
    flex-direction: column;
    padding-bottom: 15px;
}

.portfolio-details .portfolio-info ul strong {
    text-transform: uppercase;
    font-weight: 400;
    color: color-mix(in srgb, var(--default-color), transparent 50%);
    font-size: 14px;
}

.portfolio-details .portfolio-info .btn-visit {
    padding: 8px 40px;
    background: var(--accent-color);
    color: var(--contrast-color);
    border-radius: 50px;
    transition: 0.3s;
}

.portfolio-details .portfolio-info .btn-visit:hover {
    background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

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

.portfolio-details .portfolio-description p {
    padding: 0;
}

.portfolio-details .portfolio-description .testimonial-item {
    padding: 30px 30px 0 30px;
    position: relative;
    background: color-mix(in srgb, var(--default-color), transparent 97%);
    margin-bottom: 50px;
}

.portfolio-details .portfolio-description .testimonial-item .testimonial-img {
    width: 90px;
    border-radius: 50px;
    border: 6px solid var(--background-color);
    float: left;
    margin: 0 10px 0 0;
}

.portfolio-details .portfolio-description .testimonial-item h3 {
    font-size: 18px;
    font-weight: bold;
    margin: 15px 0 5px 0;
    padding-top: 20px;
}

.portfolio-details .portfolio-description .testimonial-item h4 {
    font-size: 14px;
    color: #6c757d;
    margin: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left,
.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
    color: color-mix(in srgb, var(--accent-color), transparent 50%);
    font-size: 26px;
    line-height: 0;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-left {
    display: inline-block;
    left: -5px;
    position: relative;
}

.portfolio-details .portfolio-description .testimonial-item .quote-icon-right {
    display: inline-block;
    right: -5px;
    position: relative;
    top: 10px;
    transform: scale(-1, -1);
}

.portfolio-details .portfolio-description .testimonial-item p {
    font-style: italic;
    margin: 0 0 15px 0 0 0;
    padding: 0;
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-box {
    background-color: var(--surface-color);
    padding: 20px;
    box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1);
}

.service-details .service-box+.service-box {
    margin-top: 30px;
}

.service-details .service-box h4 {
    font-size: 20px;
    font-weight: 700;
    border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

.service-details .services-list {
    background-color: var(--surface-color);
}

.service-details .services-list a {
    color: color-mix(in srgb, var(--default-color), transparent 20%);
    background-color: color-mix(in srgb, var(--default-color), transparent 96%);
    display: flex;
    align-items: center;
    padding: 12px 15px;
    margin-top: 15px;
    transition: 0.3s;
}

.service-details .services-list a:first-child {
    margin-top: 0;
}

.service-details .services-list a i {
    font-size: 16px;
    margin-right: 8px;
    color: var(--accent-color);
}

.service-details .services-list a.active {
    color: var(--contrast-color);
    background-color: var(--accent-color);
}

.service-details .services-list a.active i {
    color: var(--contrast-color);
}

.service-details .services-list a:hover {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    color: var(--accent-color);
}

.service-details .download-catalog a {
    color: var(--default-color);
    display: flex;
    align-items: center;
    padding: 10px 0;
    transition: 0.3s;
    border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .download-catalog a:first-child {
    border-top: 0;
    padding-top: 0;
}

.service-details .download-catalog a:last-child {
    padding-bottom: 0;
}

.service-details .download-catalog a i {
    font-size: 24px;
    margin-right: 8px;
    color: var(--accent-color);
}

.service-details .download-catalog a:hover {
    color: var(--accent-color);
}

.service-details .help-box {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    margin-top: 30px;
    padding: 30px 15px;
}

.service-details .help-box .help-icon {
    font-size: 48px;
}

.service-details .help-box h4,
.service-details .help-box a {
    color: var(--contrast-color);
}

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

.service-details h3 {
    font-size: 26px;
    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);
}

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

.location-search-box {
    background-color: #fff6dd;
    padding: 20px 0;
}

.button {
    border: 0.0625rem solid #66002C;
    font-weight: 700;
    background: linear-gradient(to bottom, #d20053 0%,  #a4004d 100%);
}

fluent-button::part(control) {
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 24px !important;
    margin-bottom: 25px !important;
}

.fluent-input-label {
    font-size: 1.6rem !important;
    font-weight: bold !important;
    color: #000 !important;
    line-height: 1.5 !important;
}

.fluent-wizard-icon svg {
    fill: var(--button-color) !important;
}

.fluent-wizard-content input {
    border: none !important;
}

.fluent-wizard {
  font-size: 1.2rem !important;
}

.fluent-wizard-title {
  font-size: 1.2rem !important;
}

/* Public application forms: wireless, free, waitlist */
.ftri-form-page {
    padding-top: 2.5rem;
}

.ftri-form-page .text-danger,
.ftri-form-page .validation-message,
.ftri-form-page .validation-errors {
    color: var(--button-color) !important;
}

.ftri-form-page .fluent-wizard-content {
    padding-top: 2rem;
}

/* Remove focus outline from splash dialog */
.splash-dialog {
    outline: none !important;
}

.splash-dialog::part(control) {
    outline: none !important;
    border: none !important;
    /* Keep the dialog within the viewport and scroll inside it, so the long
       wireless splash never slides under the sticky header */
    max-height: calc(100vh - var(--ftri-header-h, 110px) - 60px);
    overflow-y: auto;
    /* Sit above the dim backdrop so the dialog itself is never shaded */
    position: relative;
    z-index: 1102;
}

/* Sit above the sticky header (z-index 1000) so the header never covers the content.
   The dialog box must stay above the dim backdrop, so give it the higher z-index. */
.splash-dialog::part(positioning-region) {
    outline: none !important;
    border: none !important;
    z-index: 1101;
    /* Keep the dialog inside the body below the sticky header, with breathing room.
       --ftri-header-h is updated live by site.js so it tracks the actual header
       height as it grows/shrinks with the window width. */
    box-sizing: border-box;
    padding: calc(var(--ftri-header-h, 110px) + 24px) 16px 30px;
}

.splash-dialog::part(overlay) {
    outline: none !important;
    border: none !important;
    z-index: 1100;
}

/* Additional styles to remove blue outline */
fluent-dialog.splash-dialog {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

fluent-dialog.splash-dialog::after,
fluent-dialog.splash-dialog::before {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

fluent-dialog.splash-dialog:focus,
fluent-dialog.splash-dialog:focus-within,
fluent-dialog.splash-dialog:focus-visible {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}

/* Style for the dialog header */
.splash-dialog-header {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    outline: none !important;
}

/* Override FluentUI dialog styles */
:root {
    --dialog-height-header: 0 !important;
    --dialog-border-color: transparent !important;
    --dialog-border-width: 0 !important;
    --dialog-outline-width: 0 !important;
    --type-ramp-base-font-size: 1.2rem !important;
    --spacing-horizontal-m: 16px;
    --spacing-vertical-m: 16px;
}

.red-title {
  color: #a4004d;
}

/* Product card images are sized by height and are meant to spill into the
   offset column beside them at lg and up. Below that the columns stack, so
   keep the image inside its column without stretching it. */
@media (max-width: 991.98px) {
  .product-card-img {
    max-width: 100%;
    object-fit: contain;
  }
}