/*=========================================================================
    DukanCenter Design System
    Version : 1.0
    Bootstrap : 5.3
=========================================================================*/

:root{

/*=========================================================
  APPLICATION COLORS
  (Universal - Never Business Specific)
=========================================================*/

--app-bg:               #F5F5F5;

--app-surface:          #FFFFFF;

--app-card:             #FFFFFF;

--app-border:           #E5E7EB;

--app-heading:          #1F2937;

--app-text:             #374151;

--app-muted:            #6B7280;


/*=========================================================
  STATUS COLORS
=========================================================*/

--success:              #22C55E;

--warning:              #F59E0B;

--danger:               #DC2626;

--info:                 #0EA5E9;


/*=========================================================
  TYPOGRAPHY
=========================================================*/

--font-family:
"Manrope",
system-ui,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;

--font-size-xs:          .75rem;

--font-size-sm:          .875rem;

--font-size-md:          1rem;

--font-size-lg:          1.125rem;

--font-size-xl:          1.25rem;

--font-size-2xl:         1.5rem;

--font-size-3xl:         2rem;

--font-size-4xl:         2.5rem;


/*=========================================================
  BORDER RADIUS
=========================================================*/

--radius-sm:             .5rem;

--radius-md:             .75rem;

--radius-lg:             1rem;

--radius-xl:             1.5rem;


/*=========================================================
  SHADOWS
=========================================================*/

--shadow-sm:
0 .125rem .25rem rgba(0,0,0,.05);

--shadow-md:
0 .5rem 1rem rgba(0,0,0,.08);

--shadow-lg:
0 1rem 2rem rgba(0,0,0,.10);


/*=========================================================
  SPACING
=========================================================*/

--space-1:.25rem;

--space-2:.5rem;

--space-3:.75rem;

--space-4:1rem;

--space-5:1.5rem;

--space-6:2rem;

--space-7:3rem;

--space-8:4rem;


/*=========================================================
  TRANSITIONS
=========================================================*/

--transition-fast:.20s;

--transition-normal:.30s;

--transition-slow:.45s;

}
/*=========================================================================
    Bootstrap Overrides
=========================================================================*/

:root{

/*----------------------------------------------------------
Brand
----------------------------------------------------------*/

--bs-primary:var(--brand-primary);

--bs-secondary:var(--brand-secondary);


/*----------------------------------------------------------
Body
----------------------------------------------------------*/

--bs-body-bg:var(--app-bg);

--bs-body-color:var(--app-text);


/*----------------------------------------------------------
Typography
----------------------------------------------------------*/

--bs-font-sans-serif:var(--font-family);

--bs-heading-color:var(--app-heading);


/*----------------------------------------------------------
Borders
----------------------------------------------------------*/

--bs-border-color:var(--app-border);

--bs-border-radius:var(--radius-md);

--bs-border-radius-sm:var(--radius-sm);

--bs-border-radius-lg:var(--radius-lg);


/*----------------------------------------------------------
Links
----------------------------------------------------------*/

--bs-link-color:var(--brand-primary);

--bs-link-hover-color:var(--brand-primary-hover);

}


/*----------------------------------------------------------
Body
----------------------------------------------------------*/

body{

font-family:var(--font-family);

background:var(--app-bg);

color:var(--app-text);

font-size:var(--font-size-md);

line-height:1.6;

-webkit-font-smoothing:antialiased;

}


/*----------------------------------------------------------
Selection
----------------------------------------------------------*/

::selection{

background:var(--brand-primary);

color:#fff;

}
/*=========================================================================
    Typography
=========================================================================*/

/*----------------------------------------------------------
Base
----------------------------------------------------------*/

html{
    scroll-behavior:smooth;
}

body{
    font-family:var(--font-family);
    font-size:var(--font-size-md);
    font-weight:400;
    color:var(--app-text);
    background:var(--app-bg);
    line-height:1.6;
}

/*----------------------------------------------------------
Headings
----------------------------------------------------------*/

h1,h2,h3,h4,h5,h6{
    color:var(--app-heading);
    font-weight:700;
    line-height:1.25;
    margin-bottom:.75rem;
}

h1{
    font-size:clamp(2.5rem,5vw,3.5rem);
    font-weight:800;
}

h2{
    font-size:clamp(2rem,4vw,2.75rem);
}

h3{
    font-size:1.75rem;
}

h4{
    font-size:1.50rem;
}

h5{
    font-size:1.25rem;
}

h6{
    font-size:1rem;
}

/*----------------------------------------------------------
Paragraphs
----------------------------------------------------------*/

p{
    color:var(--app-text);
    margin-bottom:1rem;
}

/*----------------------------------------------------------
Small Text
----------------------------------------------------------*/

small,
.small{
    color:var(--app-muted);
    font-size:.875rem;
}

/*----------------------------------------------------------
Links
----------------------------------------------------------*/

a{
    color:var(--brand-primary);
    text-decoration:none;
    transition:color var(--transition-fast);
}

a:hover{
    color:var(--brand-primary-hover);
}

/*----------------------------------------------------------
Lists
----------------------------------------------------------*/

ul,
ol{
    margin-bottom:1rem;
}

li{
    margin-bottom:.35rem;
}

/*----------------------------------------------------------
Lead Text
----------------------------------------------------------*/

.lead{
    font-size:1.125rem;
    color:var(--app-muted);
    font-weight:400;
}

/*----------------------------------------------------------
Display Titles
----------------------------------------------------------*/

.dc-display-title{
    font-size:clamp(2.8rem,6vw,4rem);
    font-weight:800;
    color:var(--app-heading);
    line-height:1.15;
}

.dc-display-subtitle{
    font-size:1.2rem;
    color:var(--app-muted);
    max-width:720px;
    margin:auto;
}

/*----------------------------------------------------------
Section Titles
----------------------------------------------------------*/

.dc-section-title{
    font-size:2rem;
    font-weight:700;
    color:var(--app-heading);
    margin-bottom:.75rem;
}

.dc-section-subtitle{
    font-size:1rem;
    color:var(--app-muted);
    max-width:700px;
    margin:auto;
}

/*----------------------------------------------------------
Section Labels
----------------------------------------------------------*/

.dc-section-label{
    display:inline-block;
    padding:.35rem .90rem;
    border-radius:50rem;
    background:var(--brand-primary-light);
    color:var(--brand-primary);
    font-size:.80rem;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    margin-bottom:1rem;
}

/*----------------------------------------------------------
Text Utilities
----------------------------------------------------------*/

.text-muted{
    color:var(--app-muted)!important;
}

.text-heading{
    color:var(--app-heading)!important;
}

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

.bg-brand-light{
    background:var(--brand-primary-light)!important;
}
/*=========================================================================
    Layout
=========================================================================*/

/*----------------------------------------------------------
Page
----------------------------------------------------------*/

.dc-page-wrapper{
    min-height:100vh;
    background:var(--app-bg);
}

.dc-page-content{
    padding:2rem 0;
}

/*----------------------------------------------------------
Containers
----------------------------------------------------------*/

.dc-container-xs{
    max-width:540px;
    margin:auto;
}

.dc-container-sm{
    max-width:720px;
    margin:auto;
}

.dc-container-md{
    max-width:960px;
    margin:auto;
}

.dc-container-lg{
    max-width:1140px;
    margin:auto;
}

.dc-container-xl{
    max-width:1320px;
    margin:auto;
}

/*----------------------------------------------------------
Sections
----------------------------------------------------------*/

.dc-section{
    padding:5rem 0;
}

.dc-section-sm{
    padding:3rem 0;
}

.dc-section-lg{
    padding:7rem 0;
}

/*----------------------------------------------------------
Section Backgrounds
----------------------------------------------------------*/

.dc-section-white{
    background:#ffffff;
}

.dc-section-light{
    background:var(--app-bg);
}

.dc-section-brand-light{
    background:var(--brand-primary-light);
}

/*----------------------------------------------------------
Rows
----------------------------------------------------------*/

.dc-row-gap{
    row-gap:2rem;
}

/*----------------------------------------------------------
Grid Helpers
----------------------------------------------------------*/

.dc-grid-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:1.5rem;
}

.dc-grid-3{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.5rem;
}

.dc-grid-4{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
}

/*----------------------------------------------------------
Flex Helpers
----------------------------------------------------------*/

.dc-flex-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

.dc-flex-between{
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.dc-flex-start{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.dc-flex-end{
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

/*----------------------------------------------------------
Page Banner
----------------------------------------------------------*/

.dc-page-banner{

    background:var(--brand-gradient);

    color:#fff;

    padding:4rem 0;

    position:relative;

    overflow:hidden;
}

.dc-page-banner h1{

    color:#fff;

    margin-bottom:1rem;
}

.dc-page-banner p{

    color:rgba(255,255,255,.90);

    max-width:700px;
}

/*----------------------------------------------------------
Hero
----------------------------------------------------------*/

.dc-hero{

    padding:6rem 0;

    background:var(--brand-gradient);

    color:#fff;

    overflow:hidden;
}

.dc-hero h1{

    color:#fff;
}

.dc-hero p{

    color:rgba(255,255,255,.90);

    font-size:1.15rem;
}

/*----------------------------------------------------------
Content Width
----------------------------------------------------------*/

.dc-content-width{

    max-width:720px;
}

.dc-content-center{

    max-width:760px;

    margin:auto;

    text-align:center;
}

/*----------------------------------------------------------
Sticky
----------------------------------------------------------*/

.dc-sticky-top-lg{

    position:sticky;

    top:90px;
}

/*----------------------------------------------------------
Dividers
----------------------------------------------------------*/

.dc-section-divider{

    width:80px;

    height:4px;

    background:var(--brand-primary);

    border-radius:50px;

    margin:1rem auto 2rem;
}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:991.98px){

    .section{

        padding:4rem 0;
    }

    .section-lg{

        padding:5rem 0;
    }

    .hero{

        padding:4rem 0;
    }

    .page-banner{

        padding:3rem 0;
    }

    .grid-4{

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

    .grid-3{

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

    .sticky-top-lg{

        position:relative;

        top:auto;
    }

}

@media(max-width:767.98px){

    .section{

        padding:3rem 0;
    }

    .hero{

        padding:3rem 0;
    }

    .page-banner{

        padding:2.5rem 0;
    }

    .grid-2,
    .grid-3,
    .grid-4{

        grid-template-columns:1fr;
    }

    .content-center{

        text-align:left;
    }

}
/*=========================================================================
    Header & Navigation
=========================================================================*/

/*----------------------------------------------------------
Navbar
----------------------------------------------------------*/

.navbar{
    background:#ffffff;
    border-bottom:1px solid var(--app-border);
    padding:.85rem 0;
    transition:all var(--transition-normal);
    z-index:1030;
}

.navbar.fixed-top{
    box-shadow:var(--shadow-sm);
}

.navbar-brand{
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:700;
    color:var(--app-heading);
}

.navbar-brand img{
    height:42px;
    width:auto;
}

.navbar-nav{
    align-items:center;
}

.navbar-nav .nav-link{
    color:var(--app-text);
    font-weight:500;
    padding:.60rem 1rem;
    transition:all var(--transition-fast);
}

.navbar-nav .nav-link:hover{
    color:var(--brand-primary);
}

.navbar-nav .nav-link.active{
    color:var(--brand-primary);
    font-weight:700;
}

/*----------------------------------------------------------
Navbar Dropdown
----------------------------------------------------------*/

.dropdown-menu{
    border:none;
    border-radius:var(--radius-md);
    box-shadow:var(--shadow-md);
    padding:.5rem;
}

.dropdown-item{
    border-radius:.5rem;
    padding:.60rem .85rem;
    color:var(--app-text);
}

.dropdown-item:hover{
    background:var(--brand-primary-light);
    color:var(--brand-primary);
}

/*----------------------------------------------------------
Business Top Header
----------------------------------------------------------*/

.dc-topbar{

    background:#ffffff;

    border-bottom:1px solid var(--app-border);

    min-height:68px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 1.5rem;

    position:sticky;

    top:0;

    z-index:1025;
}

.dc-topbar-left{

    display:flex;

    align-items:center;

    gap:1rem;
}

.dc-topbar-right{

    display:flex;

    align-items:center;

    gap:1rem;
}

/*----------------------------------------------------------
Brand
----------------------------------------------------------*/

.dc-brand{

    display:flex;

    align-items:center;

    gap:.75rem;
}

.dc-brand img{

    width:42px;

    height:42px;

    object-fit:contain;
}

.dc-brand-name{

    font-size:1rem;

    font-weight:700;

    color:var(--app-heading);
}

.dc-brand-subtitle{

    font-size:.80rem;

    color:var(--app-muted);
}

/*----------------------------------------------------------
Search
----------------------------------------------------------*/

.dc-search{

    position:relative;
}

.dc-search input{

    width:280px;

    padding:.60rem 1rem;

    border-radius:50rem;

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

    background:#fff;
}

.dc-search input:focus{

    border-color:var(--brand-primary);

    box-shadow:none;
}

/*----------------------------------------------------------
Header Icons
----------------------------------------------------------*/

.header-icon{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    cursor:pointer;

    color:var(--app-text);

    transition:all var(--transition-fast);
}

.header-icon:hover{

    background:var(--brand-primary-light);

    color:var(--brand-primary);
}

/*----------------------------------------------------------
Notification Badge
----------------------------------------------------------*/

.notification-badge{

    position:absolute;

    top:2px;

    right:2px;

    min-width:18px;

    height:18px;

    border-radius:50%;

    background:var(--danger);

    color:#fff;

    font-size:.65rem;

    display:flex;

    align-items:center;

    justify-content:center;
}

/*----------------------------------------------------------
User Menu
----------------------------------------------------------*/

.user-menu{

    display:flex;

    align-items:center;

    gap:.75rem;

    cursor:pointer;
}

.user-avatar{

    width:42px;

    height:42px;

    border-radius:50%;

    object-fit:cover;

    border:2px solid var(--app-border);
}

.user-name{

    font-size:.95rem;

    font-weight:600;

    color:var(--app-heading);
}

/*----------------------------------------------------------
Breadcrumb
----------------------------------------------------------*/

.breadcrumb{

    margin:0;

    background:none;

}

.breadcrumb-item{

    font-size:.90rem;
}

.breadcrumb-item a{

    color:var(--brand-primary);
}

.breadcrumb-item.active{

    color:var(--app-muted);
}

/*----------------------------------------------------------
Mobile
----------------------------------------------------------*/

@media(max-width:991.98px){

    .dc-search{
        display:none;
    }

    .navbar-nav{
        margin-top:1rem;
        align-items:flex-start;
    }

    .navbar-nav .nav-link{
        padding:.75rem 0;
    }

    .dc-topbar{
        padding:0 1rem;
    }

}

@media(max-width:767.98px){

    .user-name{
        display:none;
    }

    .dc-brand-subtitle{
        display:none;
    }

    .dc-brand img{
        width:36px;
        height:36px;
    }

}
/*=========================================================================
    Business Sidebar
=========================================================================*/

/*----------------------------------------------------------
Sidebar
----------------------------------------------------------*/

.dc-sidebar{

    position:fixed;

    top:0;

    left:0;

    width:270px;

    height:100vh;

    background:#ffffff;

    border-right:1px solid var(--app-border);

    overflow-y:auto;

    transition:all var(--transition-normal);

    z-index:1040;
}

/*----------------------------------------------------------
Brand Area
----------------------------------------------------------*/

.dc-sidebar-brand{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:1.5rem;

    border-bottom:1px solid var(--app-border);
}

.dc-sidebar-brand img{

    width:48px;

    height:48px;

    object-fit:contain;
}

.dc-sidebar-business{

    font-weight:700;

    color:var(--app-heading);

    margin-bottom:.20rem;
}

.dc-sidebar-tagline{

    font-size:.80rem;

    color:var(--app-muted);
}

/*----------------------------------------------------------
Navigation
----------------------------------------------------------*/

.dc-sidebar-nav{

    padding:1rem 0;
}

.dc-sidebar-title{

    padding:.75rem 1.5rem;

    font-size:.75rem;

    text-transform:uppercase;

    letter-spacing:.08em;

    color:var(--app-muted);

    font-weight:700;
}

.dc-sidebar-nav a{

    display:flex;

    align-items:center;

    gap:.85rem;

    padding:.80rem 1.5rem;

    color:var(--app-text);

    text-decoration:none;

    transition:all var(--transition-fast);

    border-left:4px solid transparent;
}

.dc-sidebar-nav a i{

    width:22px;

    text-align:center;

    font-size:1rem;
}

.dc-sidebar-nav a:hover{

    background:var(--brand-primary-light);

    color:var(--brand-primary);
}

.dc-sidebar-nav a.active{

    background:var(--brand-primary-light);

    color:var(--brand-primary);

    border-left-color:var(--brand-primary);

    font-weight:700;
}

/*----------------------------------------------------------
Footer
----------------------------------------------------------*/

.dc-sidebar-footer{

    margin-top:auto;

    padding:1rem 1.5rem;

    border-top:1px solid var(--app-border);

    font-size:.85rem;

    color:var(--app-muted);
}

/*----------------------------------------------------------
Content
----------------------------------------------------------*/

.dc-main{

    margin-left:270px;

    min-height:100vh;

    display:flex;

    flex-direction:column;

    background:var(--app-bg);
}

.dc-main-content{

    flex:1;

    padding:2rem;
}

/*----------------------------------------------------------
Collapse
----------------------------------------------------------*/

.dc-sidebar-collapsed{

    width:78px;
}

.dc-sidebar-collapsed .dc-sidebar-business,

.dc-sidebar-collapsed .dc-sidebar-tagline,

.dc-sidebar-collapsed .dc-sidebar-title,

.dc-sidebar-collapsed .dc-sidebar-nav span,

.dc-sidebar-collapsed .dc-sidebar-footer{

    display:none;
}

.dc-sidebar-collapsed + .dc-main{

    margin-left:78px;
}

/*----------------------------------------------------------
Mobile
----------------------------------------------------------*/

@media(max-width:991.98px){

.dc-sidebar{

    transform:translateX(-100%);

}

.dc-sidebar.show{

    transform:translateX(0);

}

.dc-main{

    margin-left:0;

}

.dc-main-content{

    padding:1.25rem;

}

}
/*=========================================================================
    Buttons
=========================================================================*/

/*----------------------------------------------------------
Bootstrap Primary
----------------------------------------------------------*/

.dc-btn-primary{
    background:#0F766E !important;
    color:#FFFFFF !important;
    border:1px solid #0F766E !important;
}

.dc-btn-primary:hover{
    background:#115E59 !important;
    border-color:#115E59 !important;
    color:#FFFFFF !important;
}

primary:focus,
.dc-btn-primary:active{
    background:#134E4A !important;
    border-color:#134E4A !important;
    color:#FFFFFF !important;
}

/* Bootstrap Primary Override */

.btn-primary{
    background:#0F766E !important;
    border-color:#0F766E !important;
    color:#FFFFFF !important;
}

.btn-primary:hover{
    background:#115E59 !important;
    border-color:#115E59 !important;
    color:#FFFFFF !important;
}

.btn-primary:focus,
.btn-primary:active{
    background:#134E4A !important;
    border-color:#134E4A !important;
    color:#FFFFFF !important;
}

/*
.btn-primary{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

    color:#fff;

    font-weight:600;

    transition:all var(--transition-fast);

}

.btn-primary:hover{

    background:var(--brand-primary-hover);

    border-color:var(--brand-primary-hover);

    color:#fff;

}

.btn-primary:focus,
.btn-primary:active{

    background:var(--brand-primary-active)!important;

    border-color:var(--brand-primary-active)!important;

    box-shadow:0 0 0 .20rem color-mix(in srgb, var(--brand-primary) 20%, transparent);

}

/*----------------------------------------------------------
Bootstrap Secondary
----------------------------------------------------------*/

.btn-secondary{

    background:var(--brand-secondary);

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

    color:#fff;

    font-weight:600;

}

.btn-secondary:hover{

    background:var(--brand-secondary-hover);

    border-color:var(--brand-secondary-hover);

    color:#fff;

}

/*----------------------------------------------------------
Outline Primary
----------------------------------------------------------*/

.btn-outline-primary{

    color:var(--brand-primary);

    border-color:var(--brand-primary);

}

.btn-outline-primary:hover{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

    color:#fff;

}

/*----------------------------------------------------------
Light Button
----------------------------------------------------------*/

.dc-btn-light{

    background:var(--brand-primary-light);

    color:var(--brand-primary);

    border:1px solid var(--brand-primary-light);

}

.dc-btn-light:hover{

    background:var(--brand-primary);

    color:#fff;

}

/*----------------------------------------------------------
Icon Button
----------------------------------------------------------*/

.dc-btn-icon{

    width:42px;

    height:42px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    padding:0;

}

/*----------------------------------------------------------
Button Sizes
----------------------------------------------------------*/

.btn{

    border-radius:var(--radius-md);

    font-weight:600;

    transition:all var(--transition-fast);

}

.btn-sm{

    padding:.40rem .85rem;

}

.btn-lg{

    padding:.85rem 1.75rem;

}

/*----------------------------------------------------------
Rounded Button
----------------------------------------------------------*/

.dc-btn-rounded{

    border-radius:50rem;

}

/*----------------------------------------------------------
Button Group
----------------------------------------------------------*/

.dc-btn-group{

    display:flex;

    gap:.75rem;

    flex-wrap:wrap;

}

/*----------------------------------------------------------
Hero Buttons
----------------------------------------------------------*/

.dc-hero-buttons{

    display:flex;

    gap:1rem;

    margin-top:2rem;

    flex-wrap:wrap;

}

/*----------------------------------------------------------
Floating Action Button
----------------------------------------------------------*/

.dc-fab{

    width:56px;

    height:56px;

    border-radius:50%;

    background:var(--brand-primary);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:var(--shadow-md);

    position:fixed;

    right:24px;

    bottom:24px;

    z-index:1050;

    transition:all var(--transition-fast);

}

.dc-fab:hover{

    background:var(--brand-primary-hover);

    color:#fff;

    transform:translateY(-2px);

}

/*----------------------------------------------------------
Disabled
----------------------------------------------------------*/

.btn:disabled{

    opacity:.65;

    cursor:not-allowed;

}
/*=========================================================================
    Cards
=========================================================================*/

/*----------------------------------------------------------
Bootstrap Card
----------------------------------------------------------*/

.card{

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

    border-radius:var(--radius-lg);

    background:var(--brand-card-bg);

    box-shadow:var(--shadow-sm);

    transition:all var(--transition-fast);

}

.card:hover{

    box-shadow:var(--shadow-md);

}

.card-header{

    background:transparent;

    border-bottom:1px solid var(--app-border);

    padding:1rem 1.25rem;

    font-weight:700;

    color:var(--app-heading);

}

.card-body{

    padding:1.25rem;

}

.card-footer{

    background:transparent;

    border-top:1px solid var(--app-border);

    padding:1rem 1.25rem;

}

/*----------------------------------------------------------
Card Title
----------------------------------------------------------*/

.card-title{

    margin-bottom:.75rem;

    font-weight:700;

    color:var(--app-heading);

}

.card-subtitle{

    color:var(--app-muted);

    margin-bottom:1rem;

}

/*----------------------------------------------------------
Card Variants
----------------------------------------------------------*/

.dc-card{

    border-radius:var(--radius-lg);

}

.dc-card-flat{

    box-shadow:none;

}

.dc-card-hover:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-lg);

}

.dc-card-bordered{

    border-left:4px solid var(--brand-primary);

}

.dc-card-gradient{

    background:var(--brand-gradient);

    color:#ffffff;

}

.dc-card-gradient h1,
.dc-card-gradient h2,
.dc-card-gradient h3,
.dc-card-gradient h4,
.dc-card-gradient h5,
.dc-card-gradient h6,
.dc-card-gradient p{

    color:#ffffff;

}

/*----------------------------------------------------------
Stat Card
----------------------------------------------------------*/

.dc-stat-card{

    position:relative;

    overflow:hidden;

}

.dc-stat-card-value{

    font-size:2rem;

    font-weight:700;

    color:var(--app-heading);

}

.dc-stat-card-title{

    color:var(--app-muted);

    margin-bottom:.5rem;

}

.dc-stat-card-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:var(--brand-primary-light);

    color:var(--brand-primary);

    font-size:1.4rem;

}

/*----------------------------------------------------------
Feature Card
----------------------------------------------------------*/

.dc-feature-card{

    text-align:center;

    height:100%;

}

.dc-feature-icon{

    width:70px;

    height:70px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto auto 1rem;

    background:var(--brand-primary-light);

    color:var(--brand-primary);

    font-size:1.75rem;

}

/*----------------------------------------------------------
Widget Card
----------------------------------------------------------*/

.dc-widget{

    height:100%;

}

.dc-widget-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:1rem;

}

.dc-widget-title{

    font-weight:700;

    color:var(--app-heading);

}

.dc-widget-action{

    color:var(--brand-primary);

    font-size:.875rem;

}

/*----------------------------------------------------------
Quick Action Card
----------------------------------------------------------*/

.dc-action-card{

    display:flex;

    align-items:center;

    gap:1rem;

    cursor:pointer;

}

.dc-action-card:hover{

    background:var(--brand-primary-light);

}

.dc-action-icon{

    width:48px;

    height:48px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

    background:var(--brand-primary-light);

    color:var(--brand-primary);

    font-size:1.25rem;

}

/*----------------------------------------------------------
Empty Card
----------------------------------------------------------*/

.dc-empty-card{

    text-align:center;

    padding:3rem 2rem;

}

.dc-empty-icon{

    font-size:3rem;

    color:var(--brand-primary);

    margin-bottom:1rem;

}

.dc-empty-title{

    font-weight:700;

    color:var(--app-heading);

    margin-bottom:.5rem;

}

.dc-empty-text{

    color:var(--app-muted);

}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:767.98px){

.card-body{

    padding:1rem;

}

.card-header{

    padding:1rem;

}

.card-footer{

    padding:1rem;

}

.dc-stat-card-value{

    font-size:1.5rem;

}

.dc-feature-icon{

    width:60px;

    height:60px;

}

}
/*=========================================================================
    Forms
=========================================================================*/

/*----------------------------------------------------------
Labels
----------------------------------------------------------*/

.form-label{

    font-weight:600;

    color:var(--app-heading);

    margin-bottom:.45rem;

}

/*----------------------------------------------------------
Bootstrap Controls
----------------------------------------------------------*/

.form-control,
.form-select{

    background:#ffffff;

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

    border-radius:var(--radius-md);

    color:var(--app-text);

    padding:.70rem .95rem;

    transition:all var(--transition-fast);

    box-shadow:none;

}

/*----------------------------------------------------------
Placeholder
----------------------------------------------------------*/

.form-control::placeholder{

    color:var(--app-muted);

}

/*----------------------------------------------------------
Focus
----------------------------------------------------------*/

.form-control:focus,
.form-select:focus{

    border-color:var(--brand-primary);

    box-shadow:
        0 0 0 .20rem
        color-mix(in srgb,
        var(--brand-primary) 18%,
        transparent);

}

/*----------------------------------------------------------
Textarea
----------------------------------------------------------*/

textarea.form-control{

    resize:vertical;

}

/*----------------------------------------------------------
Readonly
----------------------------------------------------------*/

.form-control:read-only{

    background:#f8f9fa;

}

/*----------------------------------------------------------
Disabled
----------------------------------------------------------*/

.form-control:disabled,
.form-select:disabled{

    background:#f1f3f5;

    opacity:.8;

}

/*----------------------------------------------------------
Input Group
----------------------------------------------------------*/

.input-group-text{

    background:#ffffff;

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

    color:var(--app-muted);

}

/*----------------------------------------------------------
Checkbox
----------------------------------------------------------*/

.form-check-input{

    border-color:var(--app-border);

}

.form-check-input:checked{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

}

.form-check-input:focus{

    box-shadow:none;

}

/*----------------------------------------------------------
Switch
----------------------------------------------------------*/

.form-switch .form-check-input:checked{

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

    border-color:var(--brand-primary);

}

/*----------------------------------------------------------
Validation
----------------------------------------------------------*/

.is-valid{

    border-color:var(--success)!important;

}

.is-invalid{

    border-color:var(--danger)!important;

}

.valid-feedback{

    color:var(--success);

}

.invalid-feedback{

    color:var(--danger);

}

/*----------------------------------------------------------
Help Text
----------------------------------------------------------*/

.form-text{

    color:var(--app-muted);

    font-size:.85rem;

}

/*----------------------------------------------------------
Required
----------------------------------------------------------*/

.dc-required{

    color:var(--danger);

    margin-left:2px;

}

/*----------------------------------------------------------
Form Section
----------------------------------------------------------*/

.dc-form-section{

    margin-bottom:2rem;

}

.dc-form-section-title{

    font-size:1.15rem;

    font-weight:700;

    color:var(--app-heading);

    margin-bottom:1rem;

}

/*----------------------------------------------------------
Wizard Steps
----------------------------------------------------------*/

.dc-stepper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:2rem;

}

.dc-step{

    flex:1;

    text-align:center;

    position:relative;

}

.dc-step:not(:last-child)::after{

    content:"";

    position:absolute;

    top:18px;

    left:55%;

    width:90%;

    height:2px;

    background:var(--app-border);

}

.dc-step-number{

    width:36px;

    height:36px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#ffffff;

    border:2px solid var(--app-border);

    color:var(--app-muted);

    font-weight:700;

    margin-bottom:.5rem;

    position:relative;

    z-index:2;

}

.dc-step.active .dc-step-number{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

    color:#ffffff;

}

.dc-step.completed .dc-step-number{

    background:var(--success);

    border-color:var(--success);

    color:#ffffff;

}

.dc-step-title{

    font-size:.85rem;

    color:var(--app-muted);

}

.dc-step.active .dc-step-title{

    color:var(--brand-primary);

    font-weight:600;

}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:767.98px){

.dc-step-title{

    display:none;

}

.dc-step:not(:last-child)::after{

    top:18px;

}

}
/*=========================================================================
    Tables
=========================================================================*/

/*----------------------------------------------------------
Bootstrap Table
----------------------------------------------------------*/

.table{

    margin-bottom:0;

    color:var(--app-text);

    vertical-align:middle;

}

.table thead{

    background:var(--brand-primary-light);

}

.table thead th{

    border-bottom:2px solid var(--app-border);

    color:var(--app-heading);

    font-size:.90rem;

    font-weight:700;

    padding:.90rem 1rem;

    white-space:nowrap;

}

.table tbody td{

    padding:.90rem 1rem;

    border-color:var(--app-border);

}

.table tbody tr{

    transition:background var(--transition-fast);

}

.table tbody tr:hover{

    background:var(--brand-primary-light);

}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

.table-responsive{

    border-radius:var(--radius-lg);

}

/*----------------------------------------------------------
Borderless
----------------------------------------------------------*/

.dc-table-borderless tbody td{

    border:none;

}

/*----------------------------------------------------------
Compact
----------------------------------------------------------*/

.dc-table-sm td,
.dc-table-sm th{

    padding:.60rem .75rem;

}

/*----------------------------------------------------------
Large
----------------------------------------------------------*/

.dc-table-lg td,
.dc-table-lg th{

    padding:1.20rem 1.25rem;

}

/*----------------------------------------------------------
Striped
----------------------------------------------------------*/

.dc-table-striped tbody tr:nth-child(even){

    background:rgba(0,0,0,.015);

}

/*----------------------------------------------------------
Hover
----------------------------------------------------------*/

.dc-table-hover tbody tr:hover{

    background:var(--brand-primary-light);

}

/*----------------------------------------------------------
Action Column
----------------------------------------------------------*/

.dc-table-actions{

    display:flex;

    align-items:center;

    gap:.40rem;

    justify-content:flex-end;

}

/*----------------------------------------------------------
Status Cell
----------------------------------------------------------*/

.dc-table-status{

    white-space:nowrap;

}

/*----------------------------------------------------------
Image Cell
----------------------------------------------------------*/

.dc-table-image{

    width:44px;

    height:44px;

    border-radius:.5rem;

    object-fit:cover;

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

}

/*----------------------------------------------------------
Avatar Cell
----------------------------------------------------------*/

.dc-table-avatar{

    width:40px;

    height:40px;

    border-radius:50%;

    object-fit:cover;

}

/*----------------------------------------------------------
Number
----------------------------------------------------------*/

.dc-table-number{

    text-align:right;

    font-variant-numeric:tabular-nums;

}

/*----------------------------------------------------------
Empty Table
----------------------------------------------------------*/

.dc-table-empty{

    padding:4rem 2rem;

    text-align:center;

    color:var(--app-muted);

}

/*----------------------------------------------------------
Pagination
----------------------------------------------------------*/

.pagination{

    margin-bottom:0;

}

.page-link{

    color:var(--brand-primary);

    border-color:var(--app-border);

}

.page-link:hover{

    color:#ffffff;

    background:var(--brand-primary);

    border-color:var(--brand-primary);

}

.page-item.active .page-link{

    background:var(--brand-primary);

    border-color:var(--brand-primary);

}

/*----------------------------------------------------------
Responsive
----------------------------------------------------------*/

@media(max-width:767.98px){

.table{

    font-size:.90rem;

}

.table thead th{

    white-space:nowrap;

}

.dc-table-actions{

    flex-wrap:wrap;

}

}
/*=========================================================================
    Alerts
=========================================================================*/

/*----------------------------------------------------------
Bootstrap Alerts
----------------------------------------------------------*/

.alert{

    border:none;

    border-radius:var(--radius-lg);

    padding:1rem 1.25rem;

    display:flex;

    align-items:flex-start;

    gap:.85rem;

    box-shadow:var(--shadow-sm);

}

.alert i{

    font-size:1.2rem;

    margin-top:2px;

}

/*----------------------------------------------------------
Primary
----------------------------------------------------------*/

.alert-primary{

    background:var(--brand-primary-light);

    color:var(--brand-primary);

}

/*----------------------------------------------------------
Success
----------------------------------------------------------*/

.alert-success{

    background:rgba(34,197,94,.10);

    color:var(--success);

}

/*----------------------------------------------------------
Warning
----------------------------------------------------------*/

.alert-warning{

    background:rgba(245,158,11,.10);

    color:var(--warning);

}

/*----------------------------------------------------------
Danger
----------------------------------------------------------*/

.alert-danger{

    background:rgba(220,38,38,.10);

    color:var(--danger);

}

/*----------------------------------------------------------
Info
----------------------------------------------------------*/

.alert-info{

    background:rgba(14,165,233,.10);

    color:var(--info);

}

/*----------------------------------------------------------
Alert Title
----------------------------------------------------------*/

.dc-alert-title{

    font-weight:700;

    margin-bottom:.35rem;

}

/*----------------------------------------------------------
Alert Content
----------------------------------------------------------*/

.dc-alert-text{

    margin:0;

    color:inherit;

}

/*----------------------------------------------------------
Dismiss Button
----------------------------------------------------------*/

.alert .btn-close{

    margin-left:auto;

    box-shadow:none;

}

/*----------------------------------------------------------
Inline Alert
----------------------------------------------------------*/

.dc-inline-alert{

    display:flex;

    align-items:center;

    gap:.5rem;

    padding:.75rem 1rem;

    border-radius:var(--radius-md);

    background:var(--brand-primary-light);

    color:var(--brand-primary);

}

/*----------------------------------------------------------
Notification Alert
----------------------------------------------------------*/

.dc-notification{

    border-left:4px solid var(--brand-primary);

}

/*----------------------------------------------------------
Banner Alert
----------------------------------------------------------*/

.dc-banner-alert{

    border-radius:0;

    margin:0;

    justify-content:center;

    text-align:center;

}

/*----------------------------------------------------------
Toast
----------------------------------------------------------*/

.toast{

    border:none;

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow-md);

}

.toast-header{

    border-bottom:1px solid var(--app-border);

    background:#ffffff;

    font-weight:600;

}

.toast-body{

    color:var(--app-text);

}
/*=========================================================================
    Badges
=========================================================================*/

/*----------------------------------------------------------
Bootstrap Badge
----------------------------------------------------------*/

.badge{

    font-weight:600;

    padding:.45rem .70rem;

    border-radius:50rem;

    font-size:.75rem;

    letter-spacing:.02em;

}

/*----------------------------------------------------------
Primary
----------------------------------------------------------*/

.bg-primary{

    background:var(--brand-primary)!important;

}

/*----------------------------------------------------------
Secondary
----------------------------------------------------------*/

.bg-secondary{

    background:var(--brand-secondary)!important;

}

/*----------------------------------------------------------
Success
----------------------------------------------------------*/

.bg-success{

    background:var(--success)!important;

}

/*----------------------------------------------------------
Warning
----------------------------------------------------------*/

.bg-warning{

    background:var(--warning)!important;

    color:#ffffff!important;

}

/*----------------------------------------------------------
Danger
----------------------------------------------------------*/

.bg-danger{

    background:var(--danger)!important;

}

/*----------------------------------------------------------
Info
----------------------------------------------------------*/

.bg-info{

    background:var(--info)!important;

}

/*----------------------------------------------------------
Light Brand Badge
----------------------------------------------------------*/

.dc-badge-light{

    background:var(--brand-primary-light);

    color:var(--brand-primary);

}

/*----------------------------------------------------------
Outline Badge
----------------------------------------------------------*/

.dc-badge-outline{

    background:transparent;

    color:var(--brand-primary);

    border:1px solid var(--brand-primary);

}

/*----------------------------------------------------------
Soft Success
----------------------------------------------------------*/

.dc-badge-success{

    background:rgba(34,197,94,.12);

    color:var(--success);

}

/*----------------------------------------------------------
Soft Warning
----------------------------------------------------------*/

.dc-badge-warning{

    background:rgba(245,158,11,.12);

    color:var(--warning);

}

/*----------------------------------------------------------
Soft Danger
----------------------------------------------------------*/

.dc-badge-danger{

    background:rgba(220,38,38,.12);

    color:var(--danger);

}

/*----------------------------------------------------------
Soft Info
----------------------------------------------------------*/

.dc-badge-info{

    background:rgba(14,165,233,.12);

    color:var(--info);

}

/*----------------------------------------------------------
Status Dot
----------------------------------------------------------*/

.dc-status-dot{

    display:inline-block;

    width:10px;

    height:10px;

    border-radius:50%;

    margin-right:.40rem;

}

.dc-status-success{

    background:var(--success);

}

.dc-status-warning{

    background:var(--warning);

}

.dc-status-danger{

    background:var(--danger);

}

.dc-status-info{

    background:var(--info);

}

/*----------------------------------------------------------
Counter Badge
----------------------------------------------------------*/

.dc-counter{

    min-width:24px;

    height:24px;

    border-radius:50%;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:var(--danger);

    color:#ffffff;

    font-size:.70rem;

    font-weight:700;

}

/*----------------------------------------------------------
Pill Badge
----------------------------------------------------------*/

.dc-pill{

    display:inline-flex;

    align-items:center;

    gap:.35rem;

    padding:.45rem .80rem;

    border-radius:50rem;

}
/*=========================================================================
    Utilities
=========================================================================*/

/*----------------------------------------------------------
Backgrounds
----------------------------------------------------------*/

.dc-bg-white{
    background:#fff;
}

.dc-bg-light{
    background:var(--app-bg);
}

.dc-bg-brand{
    background:var(--brand-primary);
}

.dc-bg-brand-light{
    background:var(--brand-primary-light);
}

/*----------------------------------------------------------
Text
----------------------------------------------------------*/

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

.dc-text-heading{
    color:var(--app-heading)!important;
}

.dc-text-muted{
    color:var(--app-muted)!important;
}

/*----------------------------------------------------------
Border Radius
----------------------------------------------------------*/

.dc-rounded-sm{
    border-radius:var(--radius-sm);
}

.dc-rounded{
    border-radius:var(--radius-md);
}

.dc-rounded-lg{
    border-radius:var(--radius-lg);
}

/*----------------------------------------------------------
Shadow
----------------------------------------------------------*/

.dc-shadow-sm{
    box-shadow:var(--shadow-sm);
}

.dc-shadow{
    box-shadow:var(--shadow-md);
}

.dc-shadow-lg{
    box-shadow:var(--shadow-lg);
}

/*----------------------------------------------------------
Cursor
----------------------------------------------------------*/

.dc-pointer{
    cursor:pointer;
}

/*----------------------------------------------------------
Overflow
----------------------------------------------------------*/

.dc-overflow-hidden{
    overflow:hidden;
}

/*----------------------------------------------------------
Width
----------------------------------------------------------*/

.dc-w-fit{
    width:fit-content;
}

/*----------------------------------------------------------
Divider
----------------------------------------------------------*/

.dc-divider{
    height:1px;
    background:var(--app-border);
    margin:1rem 0;
}

/*----------------------------------------------------------
Transition
----------------------------------------------------------*/

.dc-transition{
    transition:all var(--transition-fast);
}
/*=========================================================================
    Responsive
=========================================================================*/

/*----------------------------------------------------------
Large Devices
----------------------------------------------------------*/

@media (max-width: 1199.98px){

    .container-xl{
        max-width:1140px;
    }

}

/*----------------------------------------------------------
Medium Devices
----------------------------------------------------------*/

@media (max-width: 991.98px){

    html{
        font-size:15px;
    }

    .dc-main{
        margin-left:0;
    }

    .dc-main-content{
        padding:1.5rem;
    }

    .dc-sidebar{
        transform:translateX(-100%);
    }

    .dc-sidebar.show{
        transform:translateX(0);
    }

}

/*----------------------------------------------------------
Small Devices
----------------------------------------------------------*/

@media (max-width: 767.98px){

    html{
        font-size:14px;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl{
        padding-left:1rem;
        padding-right:1rem;
    }

    h1{
        font-size:2rem;
    }

    h2{
        font-size:1.75rem;
    }

    .btn{
        width:100%;
    }

    .dc-btn-group{
        flex-direction:column;
    }

    .table-responsive{
        border:none;
    }

}

/*----------------------------------------------------------
Extra Small Devices
----------------------------------------------------------*/

@media (max-width: 575.98px){

    html{
        font-size:13.5px;
    }

    .card-body{
        padding:1rem;
    }

    .card-header{
        padding:1rem;
    }

    .card-footer{
        padding:1rem;
    }

}

/* ==========================================================
   HERO VISUAL
   Keep the homepage illustration compact and balanced.
   ========================================================== */

.dc-hero-visual{
    max-width:500px;
    margin:0 auto;
    padding:1.5rem;
}

.dc-hero-visual .dc-icon-xl{
    font-size:2.25rem;
}

.dc-hero-visual h4{
    font-size:1rem;
}

.dc-hero-visual .border{
    padding:1rem !important;
    margin-bottom:1rem !important;
}

.dc-hero-visual .row{
    row-gap:1rem;
}

.dc-hero-visual .fs-2{
    font-size:1.35rem !important;
}

@media (max-width:991px){

    .dc-hero-visual{
        max-width:520px;
        margin:0 auto;
    }

}

@media (max-width:576px){

    .dc-hero-visual{
        padding:1.25rem;
    }

}

/* ==========================================================
   HOMEPAGE HERO
   ========================================================== */

.dc-hero{
    padding:1rem 0;
}

.dc-hero .container{
    position:relative;
}

.dc-hero .row{
    min-height:0;
}

.dc-hero-title{
    margin-bottom:.5rem;
}

.dc-hero-subtitle{
    max-width:620px;
}

@media (max-width:767.98px){

    .dc-hero{
        padding:2.5rem 0;
    }

}

/* ==========================================================
   DUKANCENTER HOMEPAGE HERO
   Full first-screen banner
   ========================================================== */

.dc-hero{
    height:calc(100vh - 80px);
    min-height:520px;
    max-height:700px;

    padding:1.5rem 0;

    display:flex;
    align-items:center;

    overflow:hidden;
}

.dc-hero > .container{
    height:100%;
}

.dc-hero > .container > .row{
    height:100%;
    align-items:center;
}


/* ----------------------------------------------------------
   HERO LEFT
   ---------------------------------------------------------- */

.dc-hero .col-lg-6:first-child{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.dc-hero .dc-badge{
    margin-bottom:.75rem !important;
}

.dc-hero-title{
    font-size:3rem;
    line-height:1.05;
    margin:0 0 .5rem;
}

.dc-hero h2{
    font-size:2rem;
    line-height:1.15;
    margin-bottom:.9rem !important;
}

.dc-hero-subtitle{
    max-width:600px;
    margin-bottom:1.25rem;
    line-height:1.5;
}

.dc-hero-actions{
    display:flex;
    gap:.75rem;
    flex-wrap:wrap;
}


/* ----------------------------------------------------------
   HERO RIGHT / INFOGRAPHIC
   ---------------------------------------------------------- */

.dc-hero .col-lg-6:last-child{
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.dc-hero-visual{
    width:100%;
    max-width:460px;

    padding:1rem !important;

    margin:0 auto;

    border-radius:1rem;
}


/* Globe */

.dc-hero-visual .dc-icon-xl{
    font-size:2rem;
}

.dc-hero-visual .text-center.mb-4{
    margin-bottom:.75rem !important;
}

.dc-hero-visual .text-center h4{
    font-size:1rem;
    margin-top:.5rem !important;
}


/* Website address box */

.dc-hero-visual .border.rounded-3{
    padding:.75rem !important;
    margin-bottom:.75rem !important;
}

.dc-hero-visual .form-check{
    margin-bottom:.5rem !important;
}

.dc-hero-visual .form-check:last-child{
    margin-bottom:0 !important;
}


/* Arrow */

.dc-hero-visual .bi-arrow-down{
    font-size:1.25rem !important;
}


/* Business preview */

.dc-hero-visual .p-3{
    padding:.65rem !important;
}

.dc-hero-visual .p-3 h6{
    margin-top:.35rem !important;
    margin-bottom:.25rem;
    font-size:.85rem;
}


/* Bottom four features */

.dc-hero-visual .row.text-center{
    --bs-gutter-y:.5rem;
}

.dc-hero-visual .row.text-center .fs-2{
    font-size:1.1rem !important;
}

.dc-hero-visual .row.text-center p{
    font-size:.75rem;
    margin-top:.2rem !important;
}


/* ----------------------------------------------------------
   DESKTOP HEIGHT CONTROL
   ---------------------------------------------------------- */

@media (min-width:992px) and (max-height:700px){

    .dc-hero{
        padding:1rem 0;
    }

    .dc-hero-title{
        font-size:2.65rem;
    }

    .dc-hero h2{
        font-size:1.75rem;
    }

    .dc-hero-subtitle{
        font-size:.95rem;
        margin-bottom:1rem;
    }

    .dc-hero-visual{
        transform:scale(.88);
        transform-origin:center center;
    }

}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media (max-width:991.98px){

    .dc-hero{
        height:auto;
        min-height:0;
        max-height:none;
        padding:3rem 0;
        overflow:visible;
    }

    .dc-hero > .container{
        height:auto;
    }

    .dc-hero > .container > .row{
        height:auto;
    }

    .dc-hero .col-lg-6:last-child{
        height:auto;
    }

    .dc-hero-visual{
        max-width:500px;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width:575.98px){

    .dc-hero{
        padding:2rem 0;
    }

    .dc-hero-title{
        font-size:2.25rem;
    }

    .dc-hero h2{
        font-size:1.5rem;
    }

    .dc-hero-subtitle{
        font-size:.95rem;
    }

    .dc-hero-actions{
        gap:.5rem;
    }

    .dc-hero-visual{
        padding:.85rem !important;
    }

}


/* ==========================================================
   DIGITAL JOURNEY CARDS
   ========================================================== */

.dc-journey-wrapper{
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1.5rem;
}

.dc-journey-item{
    background:#E6F4F1;
    border:1px solid #CDE9E4;
    border-radius:1rem;
    padding:1.75rem 1.5rem;
    text-align:center;
    min-height:220px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    transition:transform .2s ease, box-shadow .2s ease;
}

.dc-journey-item:hover{
    transform:translateY(-3px);
    box-shadow:0 10px 25px rgba(15,118,110,.10);
}

.dc-journey-icon{
    width:52px;
    height:52px;
    border-radius:50%;
    background:#0F766E;
    color:#FFFFFF;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:1.25rem;
    margin-bottom:1rem;
}

.dc-journey-item h5{
    font-size:1rem;
    font-weight:700;
    color:#172033;
    margin-bottom:.65rem;
}

.dc-journey-item p{
    font-size:.9rem;
    line-height:1.55;
    color:#5F6B7A;
    margin:0;
    max-width:280px;
}

.dc-journey-item strong{
    color:#0F766E;
}

/* Arrows are unnecessary once the journey is presented
   as a card grid. */

.dc-journey-arrow{
    display:none;
}

@media (max-width:991.98px){

    .dc-journey-wrapper{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

}

@media (max-width:575.98px){

    .dc-journey-wrapper{
        grid-template-columns:1fr;
    }

    .dc-journey-item{
        min-height:auto;
    }

}

/* ==========================================================
   FAQ
   ========================================================== */

.dc-faq .accordion-item{
    border:1px solid #E2E8F0;
    border-radius:.75rem !important;
    margin-bottom:.75rem;
    overflow:hidden;
}

.dc-faq .accordion-button{
    background:#FFFFFF;
    color:#172033;
    font-weight:600;
    padding:1.1rem 1.25rem;
    box-shadow:none;
}

.dc-faq .accordion-button:not(.collapsed){
    background:#E6F4F1;
    color:#0F766E;
    box-shadow:none;
}

.dc-faq .accordion-button:focus{
    box-shadow:0 0 0 .2rem rgba(15,118,110,.12);
}

.dc-faq .accordion-body{
    background:#FFFFFF;
    color:#5F6B7A;
    line-height:1.6;
}

/* ==========================================================
   FINAL CTA
   ========================================================== */

.dc-section-primary{
    background:#0F766E !important;
    color:#FFFFFF;
}

.dc-section-primary h2,
.dc-section-primary p,
.dc-section-primary .dc-section-label{
    color:#FFFFFF !important;
}

.dc-section-primary .dc-section-label{
    background:rgba(255,255,255,.15);
}

.dc-section-primary .btn-light{
    background:#FFFFFF;
    color:#0F766E;
    border-color:#FFFFFF;
}

.dc-section-primary .btn-light:hover{
    background:#E6F4F1;
    color:#0F766E;
    border-color:#E6F4F1;
}