*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

* {
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
}

:root {
    /* ── Brand colors: injected by layout from config('app.brand_color') / config('app.secondary_color') ── */
    --bg-color:        #f5f7fc;
    --sec-padding: 60px 0;

    /* ── Typography ── */
    --font-main:    'Alexandria', sans-serif;
    --fw-light:     300;
    --fw-regular:   400;
    --fw-medium:    500;
    --fw-semibold:  600;
    --fw-bold:      700;

    /* override Bootstrap's font stack */
    --bs-font-sans-serif: 'Alexandria', sans-serif;
}

body {
    font-family: var(--font-main);
    background-color: #fff;
    font-size: 16px;
    font-weight: var(--fw-regular);
    line-height: 1.75;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-main);
    font-weight: var(--fw-semibold);
    font-style: normal;
    margin: 0;
    line-height: 1.4;
}

p {
    margin: 0;
}

html,
button,
input,
select,
textarea {
    color: #222;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

img {
    vertical-align: middle;

}

fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}

textarea {
    resize: vertical;
}


a,
button {
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

p {
    margin: 0;
}

a {
    cursor: pointer !important;
    text-decoration: none !important;
}

a:hover,
a:active,
a:focus,
a:visited {
    text-decoration: none !important;
}

input,
textarea,
a,
button {
    outline: none !important;
    text-decoration: none;
}

img {
    max-width: 100%;
}

.main-wrapper {
    position: relative;
    min-height: 100%;
    overflow: hidden;
}



.menu-toggle .main-wrapper {
    -webkit-transition: -webkit-transform .0s ease;
    transition: -webkit-transform .0s ease;
    transition: transform .0s ease;
    transition: transform .0s ease,
        -webkit-transform .0s ease;
}

.text-height{
height:60px;
}
.bg-1{
    background: var(--bg-color);
}
.my-6{
    padding:50px 0;
}
.hamburger {
    width: 35px;
    height: 35px;
    border: none;
    position: absolute;
    z-index: 9;
    right: 10px;
    top: 15px;
    -webkit-transition: background-color .2s linear;
    -ms-transition: background-color .2s linear;
    transition: background-color .2s linear;
    display: none;
    margin-right: 0px;
    background-color: transparent;
}

.hamburger span {
    width: 20px;
    height: 2px;
    border-radius: 0px;
    background-color: #404199;
    display: block;
    margin-bottom: 4px;
    -webkit-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    -ms-transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.hamburger span:nth-child(2) {
    width: 15px;
}

.hamburger span:last-child {
    margin-bottom: 0;
    width: 9px;
}

/*mobile menu*/

.menu-mobile {
    position: fixed;
    right: 0px;
    left: auto;
    top: 0px;
    bottom: 0;
    height: 100%;
    width: 250px;
    background: #fff;
    z-index: 1001;
    overflow-y: auto;
    -webkit-transform: translateX(265px);
    -moz-transform: translateX(265px);
    -ms-transform: translateX(265px);
    -o-transform: translateX(265px);
    transform: translateX(265px);
    -webkit-transition: -webkit-transform .4s ease;
    transition: -webkit-transform .4s ease;
    transition: transform .4s ease;
    transition: transform .4s ease, -webkit-transform .4s ease;
    -webkit-box-shadow: -2px 0 20px 0 rgba(33, 23, 23, 0.68);
    box-shadow: -2px 0 20px 0 rgba(33, 23, 23, 0.68);
}

html[dir="ltr"] .menu-mobile {
    left: 0px;
    right: auto;
    -webkit-transform: translateX(-265px);
    -moz-transform: translateX(-265px);
    -ms-transform: translateX(-265px);
    -o-transform: translateX(-265px);
    transform: translateX(-265px);
    -webkit-box-shadow: 2px 0 20px 0 rgba(33, 23, 23, 0.68);
    box-shadow: 2px 0 20px 0 rgba(33, 23, 23, 0.68);
}

.brand-area {
    position: relative;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(29, 91, 124, .1);
    min-height: 66px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    direction: ltr;
}

.close_menu {
    position: static;
    order: 1;
    transform: none;
    font-size: 17px;
    cursor: pointer;
    color: var(--default-color);
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(29, 91, 124, .08);
    border-radius: 50%;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

.close_menu:hover {
    background-color: var(--default-color);
    color: #fff;
}

.brand-area a {
    order: 2;
    width: auto;
    max-width: calc(100% - 56px);
    height: auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    background-size: contain;
    margin: 0;
    text-align: center;
}

.brand-area a > img {
    max-height: 34px;
}

html[dir="ltr"] .brand-area {
    direction: ltr;
}

html[dir="ltr"] .close_menu { order: 2; }

html[dir="ltr"] .brand-area a {
    order: 1;
    justify-content: flex-start;
}

.mmenu > ul {
    list-style: none;
    padding: 14px 18px 24px;
    margin: 0px;
    text-align: start;
}

.mmenu > ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #132334;
    padding: 11px 12px;
    transition: all .3s;
    font-size: 15px;
    font-weight: 500;
    text-transform: capitalize;
    border-radius: 8px;
}

.mmenu > ul li a > i {
    width: 20px;
    color: var(--default-color);
    font-size: 18px;
    text-align: center;
}

.mmenu > ul li a:hover {
    background: rgba(29, 91, 124, .08);
    color: var(--default-color);
}

.mmenu-separator {
    border-top: 1px solid rgba(29, 91, 124, .1);
    margin-top: 8px;
    padding-top: 8px;
}

.mmenu-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 11px 12px;
    background: none;
    color: #132334;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    text-align: start;
    cursor: pointer;
    border-radius: 8px;
}

.mmenu-logout i {
    width: 20px;
    color: #dc2626;
    font-size: 18px;
    text-align: center;
}

.mmenu-logout:hover {
    background: #fee2e2;
    color: #991b1b;
}

.register-mobile {
    margin-top: 0 !important;
}

.register-mobile li:last-child > a {
    border-bottom: 0;
}

.plusIcon {
    font-size: 14px;
    margin-left: 5px;
}

.m-overlay {
    position: fixed;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: #333;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.menu-toggle {
    overflow: hidden;
}

.menu-toggle .m-overlay {
    opacity: 0.6;
    visibility: visible;
}

.menu-toggle .mobile-nav-drawer .menu-mobile,
.account-menu-toggle .mobile-account-menu .menu-mobile {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);

}

.account-overlay {
    position: fixed;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    background: #333;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
}

.account-menu-toggle .account-overlay {
    opacity: 0.6;
    visibility: visible;
}

.mobile-header-icon {
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    border: 1.5px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 18px;
    text-decoration: none;
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-header-icon:hover {
    background: rgba(255,255,255,.28);
    border-color: rgba(255,255,255,.55);
    color: #fff;
}

.mobile-nav-drawer .menu-mobile,
.mobile-account-menu .menu-mobile {
    top: auto;
    right: 14px;
    left: auto;
    bottom: 74px;
    width: min(320px, calc(100vw - 28px));
    height: auto;
    max-height: calc(100vh - 110px);
    border-radius: 10px;
    opacity: 0;
    pointer-events: none;
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    -ms-transform: translateY(12px);
    -o-transform: translateY(12px);
    transform: translateY(12px);
    -webkit-box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
    box-shadow: 0 18px 45px rgba(15, 23, 42, .28);
}

html[dir="ltr"] .mobile-nav-drawer .menu-mobile,
html[dir="ltr"] .mobile-account-menu .menu-mobile {
    left: 14px;
    right: auto;
    -webkit-transform: translateY(12px);
    -moz-transform: translateY(12px);
    -ms-transform: translateY(12px);
    -o-transform: translateY(12px);
    transform: translateY(12px);
}

.header-is-fixed .mobile-nav-drawer .menu-mobile,
.header-is-fixed .mobile-account-menu .menu-mobile {
    top: 74px;
    bottom: auto;
}

.menu-toggle .mobile-nav-drawer .menu-mobile,
.account-menu-toggle .mobile-account-menu .menu-mobile,
html[dir="ltr"].menu-toggle .mobile-nav-drawer .menu-mobile,
html[dir="ltr"].account-menu-toggle .mobile-account-menu .menu-mobile {
    opacity: 1;
    pointer-events: auto;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
}

.menu-toggle .m-overlay,
.account-menu-toggle .account-overlay {
    opacity: 0;
    visibility: visible;
}

.menu-toggle .main-wrapper {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;

}

html[dir="ltr"].menu-toggle .main-wrapper {
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    -o-transform: none;
    transform: none;
}

html.menu-toggle,
html.account-menu-toggle {
    overflow: hidden;
}

/*header*/

/* ── Default (inner pages): header sits above content with brand bg ── */
#header {
    width: 100%;
    padding: 16px 0;
    background: var(--default-color);
    z-index: 10;
    position: relative;
}

#header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo icon (right in RTL, left in LTR) */
.header-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex: 1;
}

.header-logo-icon {
    width: 55px;
    height: auto;
    filter: brightness(0) invert(1);
    display: block;
}

/* Center: nav links */
.main_menu {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}

.main_menu > li {
    float: none;
    margin: 0;
}

.main_menu > li > a {
    display: block;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    font-weight: 400;
    padding: 6px 8px 10px;
    white-space: nowrap;
    text-decoration: none;
    position: relative;
    transition: color .2s;
}

.main_menu > li:hover > a {
    color: #fff;
}

.main_menu > li.active > a {
    color: #fff;
}

.main_menu > li.active > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 55%;
    height: 2px;
    background: var(--default-color);
    border-radius: 1px;
    filter: brightness(1.8);
}

/* Left: client area btn + lang + hamburger */
.header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    justify-content: flex-end;
}

.header-contact-btn {
    display: inline-block;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.5);
    border-radius: 50px;
    padding: 7px 20px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, border-color .2s;
}

.header-contact-btn:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
    text-decoration: none;
}


.btn-lang a {
    color: rgba(255,255,255,.78);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: color .2s;
}

.btn-lang a:hover {
    color: #fff;
    text-decoration: none;
}

/* Hamburger (mobile only) */
.hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: none;
    flex-direction: column;
    gap: 5px;
    outline: none;
}

.hamb-top,
.hamb-middle,
.hamb-bottom {
    display: block;
    background: rgba(255,255,255,.85);
    border-radius: 1px;
    height: 2px;
}
.hamb-top    { width: 22px; }
.hamb-middle { width: 15px; }
.hamb-bottom { width: 22px; }

/* ── Home page: header sits at the bottom of the hero section ── */
.hero-wrap {
    position: relative;
}
.hero-wrap > #header {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: transparent;
    z-index: 100;
}

/* ── Scrolled / fixed state (JS adds .fixed-header) ── */
#header.fixed-header {
    position: fixed !important;
    top: 0;
    bottom: auto !important;
    left: 0;
    right: 0;
    background: var(--default-color) !important;
    box-shadow: 0 2px 20px rgba(0,0,0,.25);
    z-index: 9999;
}

.btn-contact {
    cursor: pointer;
}

/*aside-contact*/

.aside-contact {
    position: fixed;
    top: 0;
    right: -400px;
    width: 400px;
    background: var(--default-color);
    padding: 100px 40px 40px;
    z-index: 99;
    min-height: 100vh;
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all
}

.show-aside {
    -webkit-transform: translateX(-400px);
    transform: translateX(-400px);
    -webkit-transform: translate3d(-400px, 0, 0);
    transform: translate3d(-400px, 0, 0);
    -webkit-transition: 300ms ease all;
    transition: 300ms ease all;
}

.over-hidden-body {
    overflow: hidden;
}

.logo-contact {
    margin-bottom: 40px;
}

.list-contact p,
.list-contact span {
    color: #fff;
    display: block;
}

.list-contact li {
    margin-bottom: 30px;
}

.list-contact p {
    font-size: 21px
}

.social-contact li {
    display: inline-block;
    margin-right: 10px;
}

.social-contact li a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-contact li a:hover {
    background: #fff;
    color: var(--default-color)
}

.follUS {
    color: #fff;
    margin-bottom: 5px;
    display: block;
}

.close-aside {
    width: 35px;
    height: 35px;
    background: #fff;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
    border-radius: 5px;
    position: absolute;
    top: 30px;
    left: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*section_home*/

.section_home {
    position: relative;
    z-index: 1;
    background-color: var(--default-color);
    background-image: url('/images/poly-bg-white-01.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height:100vh !important;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 40px;
}

/* Blue duplicate layer — same SVG shifted & tinted, creates the Seven Agency depth effect */
.section_home::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image: url('/images/poly-bg-white-01.svg');
    background-size: cover;
    background-position: 28% 40%;
    filter: brightness(0) invert(60%) sepia(80%) saturate(800%) hue-rotate(190deg) brightness(1.1);
    opacity: 0.5;
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px;
    gap: 24px;
}

/* header already has z-index:100 via .main-wrapper > #header above */

.hero-logo-icon {
    width: 130px;
    height: auto;
    filter: brightness(0) invert(1) drop-shadow(0 0 30px rgba(255,255,255,.15));
    margin-bottom: 36px;
}

.hero-logo-txt {
    width: 320px;
    max-width: 80vw;
    height: auto;
}

.hero-tagline {
    color: rgba(255,255,255,.9);
    font-size: 2rem;
    max-width: 640px;
    line-height: 1.6;
    margin: 0;
    font-weight: var(--fw-semibold);
    letter-spacing: .01em;
}


.option-site {
    display: flex;
    align-items: center;
}

.option-site li:first-child {
    margin-right: 25px;
}

.section_projects {
    padding: 55px 0 66px;
    position: relative;
    overflow: hidden;
}

.section_projects::before {
    content: '';
    position: absolute;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    border: 56px solid rgba(40,118,171,.05);
    top: -210px;
    inset-inline-start: -120px;
    pointer-events: none;
}

.section_projects .container {
    position: relative;
    z-index: 1;
}

.home-project-card {
    position: relative;
    display: grid;
    grid-template-columns: 132px minmax(0, 1fr);
    align-items: center;
    min-height: 174px;
    padding: 22px 24px;
    gap: 24px;
    background: #fff;
    border: 1px solid rgba(40,118,171,.12);
    border-radius: 18px;
    box-shadow: 0 12px 34px rgba(18, 51, 75, .08);
    color: #17283a;
    text-decoration: none !important;
    overflow: hidden;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.home-project-card:hover {
    color: #17283a;
    border-color: rgba(40,118,171,.28);
    box-shadow: 0 18px 44px rgba(18, 51, 75, .14);
    transform: translateY(-6px);
}

.home-project-card__shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(40,118,171,.08), transparent 42%),
        radial-gradient(circle at 92% 14%, rgba(40,118,171,.12), transparent 34%);
    opacity: .7;
}

.home-project-card__icon {
    position: relative;
    width: 132px;
    aspect-ratio: 1;
    border-radius: 16px;
    background: #f7faff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    box-shadow: inset 0 0 0 1px rgba(40,118,171,.07);
}

.home-project-card__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .22s ease;
}

.home-project-card:hover .home-project-card__icon img {
    transform: scale(1.06);
}

.home-project-card__body {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.home-project-card__title {
    color: var(--secondary-color);
    font-size: 1.35rem;
    font-weight: var(--fw-bold);
    line-height: 1.45;
}

.home-project-card__desc {
    color: #334155;
    font-size: .9rem;
    line-height: 1.8;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    color: var(--default-color);
    font-size: .78rem;
    font-weight: var(--fw-semibold);
}

.home-project-card__cta i {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(40,118,171,.1);
    transition: transform .22s ease, background .22s ease, color .22s ease;
}

.home-project-card:hover .home-project-card__cta i {
    background: var(--default-color);
    color: #fff;
    transform: translate(-2px, -2px);
}



.btn-view {
    display: flex;
    align-items: center;
    color: var(--secondary-color);
}

.btn-view i {
    background: #ffff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    color: var(--default-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    transition: .4s
}

.btn-view:hover i {
    background: var(--default-color);
    color: #fff
}

.btn-view:hover {
    color: var(--default-color)
}

/*section_about*/

.section_about {
    background: #fff;
    padding: var(--sec-padding);
    position: relative;
    overflow: hidden;
}

.section_about::before {
    content: '';
    position: absolute;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    border: 60px solid rgba(40,118,171,.05);
    top: -160px;
    inset-inline-end: -120px;
    pointer-events: none;
}

.section_about::after {
    content: '';
    position: absolute;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: rgba(40,118,171,.04);
    bottom: -80px;
    inset-inline-start: -60px;
    pointer-events: none;
}

/* ── photo card ── */
.about-photo-wrap {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    max-height: 420px;
}

.about-illus {
    width: 100%;
    height: 550px;
    display: block;
    object-fit: cover;
    object-position: center top;
}


/* ── bottom row: button (right in RTL) + stats (left) ── */
.about-bottom-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
    padding-top: 22px;
    border-top: 1px solid rgba(40,118,171,.12);
}

.about-bottom-row .about-stats {
    border: none;
    padding: 0;
    margin: 0;
    flex: 1;
    min-width: 0;
}

/* ── text column ── */
.about-badge {
    display: inline-block;
    background: rgba(40,118,171,.10);
    color: var(--default-color);
    border: 1px solid rgba(40,118,171,.22);
    border-radius: 30px;
    padding: 5px 20px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .5px;
    margin-bottom: 18px;
}

.about-title {
    color: #1a2535;
    font-size: clamp(22px, 2.6vw, 32px);
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 18px;
}

.about-title strong {
    color: var(--default-color);
    font-size: 1.6em;
    font-weight: 900;
    line-height: 1;
}

.about-text {
    color: var(--secondary-color);
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 14px;
}

.about-vision {
    color: var(--secondary-color);
    font-size: 15px;
    border-inline-start: 3px solid var(--default-color);
    padding-inline-start: 14px;
    margin-bottom: 28px;
    font-style: italic;
}

.about-stats {
    display: flex;
    gap: 0;
}

.about-stat {
    flex: 1;
    text-align: center;
    padding: 0 16px;
    transition: transform .25s;
}

.about-stat:hover {
    transform: translateY(-3px);
}

.about-stat:not(:last-child) {
    border-inline-end: 1px solid rgba(40,118,171,.15);
}

.about-stat__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(40,118,171,.10);
    color: var(--default-color);
    font-size: 18px;
    margin: 0 auto 10px;
    transition: background .25s, color .25s;
}

.about-stat:hover .about-stat__icon {
    background: var(--default-color);
    color: #fff;
}

.about-stat__num {
    display: block;
    font-size: 34px;
    font-weight: 900;
    color: var(--default-color);
    line-height: 1;
    margin-bottom: 5px;
}

.about-stat__label {
    display: block;
    font-size: 12px;
    color: var(--secondary-color);
    font-weight: 500;
}

.about-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--default-color);
    color: #fff;
    padding: 13px 32px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: background .3s, transform .2s;
}

.about-btn:hover {
    background: #1e6599;
    color: #fff;
    transform: translateY(-2px);
}


/*sec_head*/

.sec_head {
    text-align: center;
    margin-bottom:60px;
    position: relative
}

.sec_head h2 {
    color: var(--default-color);
    margin-bottom: 35px;
    position: relative;
}

.sec_head h2:before {
    content: "";
    width: 120px;
    height: 3px;
    background: var(--default-color);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
}

.sec_head h2:after {
    position: absolute;
    content: "";
    width: 35px;
    height: 3px;
    left: 44%;
    transform: translateX(0%);
    bottom: -20px;
    border-left: 10px solid #fff;
    border-right: 10px solid #fff;
    -webkit-animation: animborder 2s linear infinite;
    animation: animborder 2s linear infinite;
}

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

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

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

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

.sec_head p {
    font-size: 17px;
    color: var(--secondary-color)
}


/**/





/*Features*/

.section_features {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background:
        radial-gradient(circle at 0% 100%, transparent 219px, rgba(255,255,255,.08) 220px, rgba(255,255,255,.08) 221px, transparent 222px),
        radial-gradient(circle at 0% 100%, transparent 339px, rgba(255,255,255,.06) 340px, rgba(255,255,255,.06) 341px, transparent 342px),
        radial-gradient(circle at 0% 100%, transparent 469px, rgba(255,255,255,.045) 470px, rgba(255,255,255,.045) 471px, transparent 472px),
        radial-gradient(circle at 100% 0%, transparent 279px, rgba(255,255,255,.06) 280px, rgba(255,255,255,.06) 281px, transparent 282px),
        radial-gradient(circle at 100% 0%, transparent 419px, rgba(255,255,255,.045) 420px, rgba(255,255,255,.045) 421px, transparent 422px),
        var(--default-color);
}

.section_features .sec_head h2 {
    color: #fff;
}

.section_features .sec_head p {
    color: rgba(255,255,255,.65);
}

/* ── Feature Cards ── */
.feat-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 4px 24px rgba(0,0,0,.12);
    padding: 38px 24px 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    height: 100%;
    transition: background .35s, transform .3s, box-shadow .3s;
}

.feat-card::before {
    content: attr(data-num);
    position: absolute;
    top: 10px;
    inset-inline-start: 14px;
    font-size: 38px;
    font-weight: 900;
    color: rgba(40,118,171,.08);
    line-height: 1;
    transition: color .35s;
}

.feat-card:hover {
    background: var(--default-color);
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(40,118,171,.35);
    border-color: transparent;
}

.feat-card:hover::before {
    color: rgba(255,255,255,.10);
}

.feat-card__icon {
    width: 86px;
    height: 86px;
    background: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
    transition: background .35s, box-shadow .35s;
    box-shadow: 0 0 0 8px rgba(219,234,254,.15);
}

.feat-card:hover .feat-card__icon {
    background: rgba(255,255,255,.22);
    box-shadow: 0 0 0 8px rgba(255,255,255,.08);
}

.feat-card__icon img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    filter: brightness(0) saturate(100%) invert(35%) sepia(60%) saturate(500%) hue-rotate(185deg);
    transition: filter .35s;
}

.feat-card:hover .feat-card__icon img {
    filter: brightness(0) invert(1);
}

.feat-card__name {
    font-size: 16px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 0;
    line-height: 1.55;
    transition: color .35s;
}

.feat-card:hover .feat-card__name {
    color: #fff;
}

/*section_services*/


.section_services {
    padding: var(--sec-padding);
    position: relative;
    background:var(--bg-color);
}

/* ── Service Cards ── */
.serv-card {
    position: relative;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(40,118,171,.15);
    box-shadow: 0 3px 20px rgba(40,118,171,.07);
    padding: 36px 24px 28px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    overflow: hidden;
    transition: background .35s, transform .3s, box-shadow .3s;
}

.serv-card:hover {
    background: var(--default-color);
    transform: translateY(-6px);
    box-shadow: 0 18px 45px rgba(40,118,171,.30);
}

.serv-card__img {
    width: 100%;
    height: 160px;
    background: rgba(40,118,171,.06);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    overflow: hidden;
    flex-shrink: 0;
    transition: background .35s;
}

.serv-card:hover .serv-card__img {
    background: rgba(255,255,255,.14);
}

.serv-card__img img {
    max-width: 78%;
    max-height: 130px;
    object-fit: contain;
    transition: transform .4s;
}

.serv-card:hover .serv-card__img img {
    transform: scale(1.06);
}

.serv-card__name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
}

.serv-card__name a {
    color: var(--default-color);
    text-decoration: none;
    transition: color .35s;
}

.serv-card:hover .serv-card__name a {
    color: #fff;
}

.serv-card__desc {
    color: var(--secondary-color);
    font-size: 14px;
    line-height: 1.75;
    flex: 1;
    margin-bottom: 20px;
    transition: color .35s;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.serv-card:hover .serv-card__desc {
    color: rgba(255,255,255,.80);
}

.serv-card__link {
    font-size: 14px;
    font-weight: 700;
    color: var(--default-color);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
    border-top: 1px solid rgba(40,118,171,.12);
    width: 100%;
    justify-content: center;
    padding-top: 16px;
    margin-top: auto;
    transition: color .35s, border-color .35s;
}

.serv-card:hover .serv-card__link {
    color: #fff;
    border-top-color: rgba(255,255,255,.18);
}

.serv-card--suggestion {
    background:
        radial-gradient(circle at 12% 18%, rgba(40,118,171,.10), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(39,167,225,.12), transparent 30%),
        #fff;
}

.serv-card--suggestion:hover {
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,255,255,.12), transparent 30%),
        var(--default-color);
}

.serv-card__img--suggestion {
    gap: 14px;
}

.serv-card__img--suggestion i {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #fff;
    color: var(--default-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    box-shadow: 0 8px 22px rgba(40,118,171,.12);
    transition: transform .35s, background .35s, color .35s;
}

.serv-card--suggestion:hover .serv-card__img--suggestion i {
    background: rgba(255,255,255,.18);
    color: #fff;
    transform: translateY(-4px);
}

/*section_portfolio*/

.section_portfolio {
    padding: var(--sec-padding);
    position: relative;
    background: #f7fbff;
    overflow: hidden;
}

.section_portfolio:before {
    content: "";
    position: absolute;
    inset-inline-start: -120px;
    top: 80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    border: 42px solid rgba(40,118,171,.05);
    pointer-events: none;
}

.tz-works-nav {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 3;
}

.tz-works-nav__btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e8f2;
    background: #fff;
    color: var(--default-color);
    box-shadow: 0 10px 24px rgba(15, 85, 131, .10);
    transition: all .2s ease;
}

.tz-works-nav__btn i {
    font-size: 17px;
    line-height: 1;
}

.tz-works-nav__btn:hover {
    background: var(--default-color);
    border-color: var(--default-color);
    color: #fff;
    transform: translateY(-2px);
}

.tz-works-slider {
    max-width: min(96vw, 1620px);
    margin: 0 auto;
}

.tz-works-slider .owl-stage {
    display: flex;
}

.tz-works-slider .owl-item {
    display: flex;
}

.tz-works-slider .owl-item > .tz-work-card {
    width: 100%;
}

.tz-work-card {
    width: 100%;
    min-width: 0;
}

.tz-work-card__link {
    position: relative;
    display: block;
    border-radius: 14px;
    overflow: hidden;
    background: #f6fbff;
    border: 1px solid #dbe8f2;
    box-shadow: 0 10px 28px rgba(15, 85, 131, .08);
    text-decoration: none;
    transition: box-shadow .22s ease, border-color .22s ease;
}

.tz-work-card__link:hover {
    border-color: rgba(40,118,171,.36);
    box-shadow: 0 18px 42px rgba(15, 85, 131, .14);
}

.tz-work-card__media {
    position: relative;
    display: block;
    line-height: 0;
}

.tz-work-card__image {
    display: block;
    width: 100%;
    height: auto;
}

.tz-work-card__shade {
    position: absolute;
    inset: 0;
    display: block;
    background: rgba(8, 49, 82, .78);
    opacity: 0;
    z-index: 2;
    transition: opacity .22s ease;
}

.tz-work-card__link:hover .tz-work-card__shade {
    opacity: 1;
}

.tz-work-card__content {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(86%, 360px);
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
}

.tz-work-card__title {
    width: 100%;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.45;
}

.tz-work-card__action {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 8px;
    color: var(--default-color);
    background: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
}

.tz-work-card__action i {
    font-size: 13px;
}

.public-works-page {
    background: #fff;
}

.public-works-filter {
    max-width: min(96vw, 1620px);
    margin: 0 auto 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.public-works-filter__btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 18px;
    border: 1px solid rgba(40,118,171,.28);
    border-radius: 999px;
    background: #fff;
    color: var(--default-color);
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: all .2s ease;
}

.public-works-filter__btn i {
    font-size: 16px;
}

.public-works-filter__btn small {
    min-width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(40,118,171,.08);
    color: inherit;
    font-size: 11px;
    font-weight: 800;
}

.public-works-filter__btn:hover,
.public-works-filter__btn.active {
    background: var(--default-color);
    border-color: var(--default-color);
    color: #fff;
    box-shadow: 0 10px 24px rgba(40,118,171,.20);
}

.public-works-filter__btn:hover small,
.public-works-filter__btn.active small {
    background: rgba(255,255,255,.18);
}

.public-works-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    max-width: min(96vw, 1620px);
    margin: 0 auto;
}

#public-works-results {
    transition: opacity .18s ease;
}

#public-works-results.is-loading {
    opacity: .45;
    pointer-events: none;
}

.public-works-empty {
    grid-column: 1 / -1;
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border: 1px dashed #cfe1ec;
    border-radius: 16px;
    background: #f8fcff;
    color: #7a8ca0;
}

.public-works-empty i {
    font-size: 42px;
    color: var(--default-color);
}

.public-works-empty p {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
}

.public-works-pagination {
    max-width: min(96vw, 1620px);
    margin: 34px auto 0;
    border: 1px solid #edf4f8;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 85, 131, .06);
}

@media (max-width: 1199.98px) {
    .public-works-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .filter-port__inner {
        padding-top: 54px;
    }

    .tz-works-nav {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .public-works-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }
}

@media (max-width: 575.98px) {
    .tz-work-card__title {
        font-size: 20px;
    }
}

.filter-port {
    position: relative;
    text-align: center;
    margin-bottom: 28px;
}

.filter-port__inner {
    position: relative;
    max-width: min(96vw, 1620px);
    margin: 0 auto;
    min-height: 48px;
}

.portfolio-nav-buttons {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.portfolio-nav-btn {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d8e8f2;
    background: #fff;
    color: var(--default-color);
    box-shadow: 0 10px 24px rgba(15, 85, 131, .10);
    transition: all .2s ease;
}

.portfolio-nav-btn i {
    font-size: 17px;
    line-height: 1;
}

.portfolio-nav-btn:hover {
    background: var(--default-color);
    border-color: var(--default-color);
    color: #fff;
    transform: translateY(-2px);
}

#button-all{
    text-align: left;
    margin-top: 34px;
}
.nav-tabs li {
    margin-bottom:5px;
}
.nav-tabs {
    border: 0;
    text-align: center;
    justify-content: center;
    gap: 10px;
}

.nav-tabs li {
    margin-bottom: 5px;
}

.nav-tabs .nav-link {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(40,118,171,.35);
    border-radius: 30px !important;
    position: relative;
    padding: 10px 28px;
    overflow: hidden;
    background: transparent;
    transition: background .3s, border-color .3s, box-shadow .3s;
}

.nav-tabs .nav-link:before {
    background: var(--default-color);
    position: absolute;
    content: "";
    top: 0;
    height: 100%;
    inset-inline-start: -10px;
    width: 0%;
    transform: skew(-10deg);
    transition: width .4s;
    z-index: 0;
}

.nav-tabs .nav-link:hover:before {
    width: 120%;
}

.nav-tabs .nav-link span {
    position: relative;
    font-weight: 600;
    font-size: 15px;
    color: var(--default-color);
    transition: color .3s;
    z-index: 1;
}

.nav-tabs .nav-link i {
    position: relative;
    color: var(--default-color);
    font-size: 17px;
    z-index: 1;
    transition: color .3s;
}

.nav-tabs .nav-link:hover span {
    color: #fff;
}

.nav-tabs .nav-link:hover i,
.nav-tabs .nav-link.active i,
.nav-tabs .nav-item.show .nav-link i {
    color: #fff;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    background: var(--default-color);
    border-color: transparent;
    box-shadow: 0 6px 20px rgba(40,118,171,.30);
}

.nav-tabs .nav-link.active span,
.nav-tabs .nav-item.show .nav-link span {
    color: #fff;
}

.portfolio-slider--home {
    position: relative;
    padding: 0;
    max-width: min(96vw, 1620px);
    margin: 0 auto;
}

.portfolio-slider--home .owl-stage {
    display: flex;
}

.portfolio-slider--home .owl-item {
    display: flex;
}

.portfolio-slider--home .owl-item .portfolio-card {
    width: 100%;
}

.portfolio-slider--home .owl-nav {
    display: none;
}

.portfolio-slider--home .owl-nav button.owl-prev,
.portfolio-slider--home .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff !important;
    color: var(--default-color) !important;
    border: 1px solid #dbe8f2 !important;
    box-shadow: 0 10px 26px rgba(15, 85, 131, .14);
    transition: background .25s ease, color .25s ease, transform .25s ease;
    z-index: 3;
}

.portfolio-slider--home .owl-nav button.owl-prev {
    right: 0;
}

.portfolio-slider--home .owl-nav button.owl-next {
    left: 0;
}

.portfolio-slider--home .owl-nav button.owl-prev:hover,
.portfolio-slider--home .owl-nav button.owl-next:hover {
    background: var(--default-color) !important;
    color: #fff !important;
    transform: translateY(-50%) scale(1.05);
}

.portfolio-slider--home .owl-nav button span {
    font-size: 30px;
    line-height: 1;
    margin-top: -3px;
}

.portfolio-slider--home .owl-dots {
    margin-top: 22px;
}

.portfolio-card {
    background: #fff;
    border: 1px solid #dbe8f2;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(15, 85, 131, .08);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.portfolio-card:hover {
    transform: translateY(-6px);
    border-color: rgba(40,118,171,.36);
    box-shadow: 0 18px 42px rgba(15, 85, 131, .14);
}

.portfolio-card__image {
    position: relative;
    display: block;
    aspect-ratio: 16 / 12;
    min-height: 410px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fbfe 0%, #edf5fa 100%);
    padding: 0;
}

.portfolio-card__photo {
    position: absolute;
    inset: 22px;
    display: block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: transform .35s ease;
}

.portfolio-card:hover .portfolio-card__photo {
    transform: scale(.985);
}

.portfolio-card__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background: rgba(8, 49, 82, .76);
    opacity: 0;
    transition: opacity .25s ease;
    z-index: 2;
}

.portfolio-card__overlay-content {
    width: min(86%, 340px);
    min-height: 128px;
    position: absolute;
    left: 50%;
    top: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    text-align: center;
    transform: translate(-50%, calc(-50% + 12px));
    transition: transform .25s ease;
}

.portfolio-card:hover .portfolio-card__overlay {
    opacity: 1;
}

.portfolio-card__name {
    color: #fff;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.45;
    width: 100%;
    text-align: center;
}

.portfolio-card__open {
    display: inline-flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 8px;
    color: var(--default-color);
    background: #fff;
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12px;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(0,0,0,.16);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.portfolio-card__open:hover {
    background: var(--secondary-color);
    color: #fff;
}

.portfolio-card:hover .portfolio-card__overlay-content {
    transform: translate(-50%, -50%);
}

.portfolio-more {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1620px);
    margin-inline: auto;
}

.portfolio-more .btn-viewmore {
    font-size: 14px;
    padding: 11px 22px;
}

@media (min-width: 1400px) {
    .portfolio-card__image {
        min-height: 460px;
    }
}

@media (min-width: 1700px) {
    .portfolio-card__image {
        min-height: 510px;
    }
}

@media (max-width: 1199.98px) {
    .portfolio-card__image {
        min-height: 360px;
    }
}

@media (max-width: 767.98px) {
    .filter-port__inner {
        padding-top: 54px;
    }

    .portfolio-nav-buttons {
        left: 50%;
        top: 0;
        transform: translateX(-50%);
    }

    .portfolio-card__image {
        min-height: 340px;
    }
}

@media (max-width: 575.98px) {
    .portfolio-card__image {
        aspect-ratio: 4 / 3;
        min-height: 280px;
    }

    .portfolio-card__name {
        font-size: 20px;
    }
}


/*section_philosophy*/

.section_philosophy {
    position: relative;
    background: #fff;
    padding: var(--sec-padding);
}

.section_philosophy .sec_head h2:after {
    background: var(--default-color)
}

.about-box h5 {
    font-weight: bold;
}

.white-box {
    background-color: #FFF;
    border: 1px dashed #FFF;
}

.white-color h5,
.white-color p {
    color: #fff;
}

.trans-box {
    background: none;
    border: 1px dashed var(--secondary-color);
}

.blue-color {
    color: var(--default-color)
}

.about-box,
.about-analysis {
    width: 225px;
    height: 190px;
}

.r-arrow:before {
    background: url(../images/Shape.svg) no-repeat;
    position: absolute;
    width: 55px;
    height: 10px;
    top: 45%;
    right: -58px;
    content: '';
    transform: scale(-1, 1)
}

.l-arrow:before {
    background: url(../images/Shape.svg) no-repeat;
    position: absolute;
    width: 36px;
    height: 10px;
    top: 45%;
    left: -36px;
    content: '';
    transform: rotate(180deg) scale(-1, 1);
}

.about-analysis:after {
    content: '';
    position: absolute;
    width: 83px;
    height: 205px;
    bottom: -205px;
    right: 86px;
    background: url(../images/Shape-analysis.svg) no-repeat;
    transform: scale(-1, 1)
}

.lay-bottom {
    padding-top: 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*section_testimonials*/

.section_testimonials {
    position: relative;
    padding: var(--sec-padding);
    background:var(--bg-color);
}

.section_testimonials .sec_head {
    width: 25%;
    text-align: start;
}



.section_testimonials .sec_head h2:after {
    left: 0;
}

.section_testimonials .owl-carousel {
    width: calc(100% - 25%);
    position: relative;
    padding-top: 50px;
    padding-left: 0;
    padding-right:30px;
}

.section_testimonials .owl-carousel:before {
    content: "";
    background:var(--secondary-color);
    width: 100%;
    height: 60%;
    position: absolute;
    right: 0;
    top: 0;
    z-index: -1
}

#testi-slider .owl-stage {
    padding-left: 0 !important;
}

.content-testi {
    display: flex;
    align-items: center;
    padding-left: 10%;
}

#testi-slider .item {
    padding: 10px 5px;
}

.item-testi {
    padding: 30px 15px;
    box-shadow: 0 1px 7px rgb(0 0 0/ 16%);
    background: #fff
}

.item-testi .data-testi {
    display: flex;
    align-items: center;
    margin-top: 15px;
}

.item-testi figure {
    width: 80px;
    align-items: center;
    margin-bottom: 0;
    margin-right: 15px;
}

.item-testi figure img {
    width: 70px !important;
    height: 70px;
    border-radius: 50%;
}

.item-testi .txt-test {
    width: calc(100% - 100px);
}

.item-testi > p {
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 300;
}

.txt-test h3 {
    font-weight: 500;
    color: var(--secondary-color);
    font-size: 16px;
}

.txt-test p {
    color: var(--secondary-color);
    font-size: 14px
}

/*section_blogs*/

.section_blogs {
    position: relative;
    padding: var(--sec-padding);
}

.item-blog {
    background: #fff;
    transition: .5s;
}

.item-blog figure {
    overflow: hidden;
    transition: .5s;
}

.item-blog:hover img {
    transform: scale(1.2) rotate(5deg);
    transition: .5s;
}

.item-blog .txt-blog {
    position: relative;
    padding: 0 15px 15px 80px;
}

.item-blog .txt-blog span {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 10px;
    background: var(--default-color);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
}

.item-blog .txt-blog:before {
    content: "";
    background: var(--default-color);
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 35px;
}

.item-blog .txt-blog:after {
    content: "";
    background: var(--default-color);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    position: absolute;
    bottom: 0;
    left: 30px;
}

.item-blog .txt-blog h5 a {
    color: #242529;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    display: block;
}

.item-blog .txt-blog h5 a:hover {
    color: var(--default-color)
}

.item-blog .txt-blog p {
    color: #A3ABB2;
}

/*section_orderProject*/

.section_orderProject {
    position: relative;
    padding: var(--sec-padding);
    background-position: center;
    background: var(--default-color);
}

.content-proj {
    position: relative;
    z-index: 3;
    text-align: center
}

.content-proj h5 {
    color: #fff;
    font-weight: 500;
}



.hover:hover{
    color: var(--default-color) !important;
}

/* ══════════════════════════════════════
   FOOTER  —  pixel-matched to Seven AI
   ══════════════════════════════════════ */
.site-footer {
    color: rgba(255,255,255,.75);
    font-family: var(--font-main);
    position: relative;
    overflow: hidden;
    /* Dark bg + arc rings at bottom-left and top-right corners */
    background:
        /* bottom-left arcs */
        radial-gradient(circle at 0% 100%, transparent 219px, rgba(255,255,255,.08) 220px, rgba(255,255,255,.08) 221px, transparent 222px),
        radial-gradient(circle at 0% 100%, transparent 339px, rgba(255,255,255,.06) 340px, rgba(255,255,255,.06) 341px, transparent 342px),
        radial-gradient(circle at 0% 100%, transparent 469px, rgba(255,255,255,.045) 470px, rgba(255,255,255,.045) 471px, transparent 472px),
        /* top-right arcs */
        radial-gradient(circle at 100% 0%, transparent 279px, rgba(255,255,255,.06) 280px, rgba(255,255,255,.06) 281px, transparent 282px),
        radial-gradient(circle at 100% 0%, transparent 419px, rgba(255,255,255,.045) 420px, rgba(255,255,255,.045) 421px, transparent 422px),
        /* base color */
        var(--default-color);
}

/* Ensure footer content sits above decorative arcs */
.footer-main,
.footer-bottom {
    position: relative;
    z-index: 1;
}

.footer-main {
    padding: 80px 0 68px;
}

/* ── Col 1: Brand ── */
.footer-logo {
    height: 48px;
    width: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.footer-desc {
    color: rgba(255,255,255,.8);
    font-size: .9rem;
    font-weight: var(--fw-regular);
    line-height: 1.9;
    margin: 20px 0 0;
    max-width: 320px;
}

/* Social icons — plain SVG, no circle borders */
.footer-social {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 28px;
}

.footer-social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.55) !important;
    text-decoration: none;
    transition: color .3s, transform .25s;
    line-height: 1;
}

.footer-social__link svg {
    display: block;
    width: 28px;
    height: 28px;
}

.footer-social__link:hover {
    color: #fff !important;
    transform: translateY(-3px);
}

/* ── Col 2 TOP: Contact items ── */
.footer-contact-top {
    margin-bottom: 40px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.footer-contact-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.65);
    flex-shrink: 0;
    line-height: 1;
}

.footer-contact-svg svg {
    display: block;
    width: 28px;
    height: 28px;
}

.footer-contact-item a {
    color: #fff !important;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: var(--fw-regular);
    transition: color .2s;
    line-height: 1.3;
}

.footer-contact-item--lg a {
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: var(--fw-semibold);
    letter-spacing: -.01em;
    line-height: 1.2;
}

.footer-office-phone__line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    line-height: 1.2;
}

.footer-office-phone__line a {
    min-width: 112px;
    text-align: start;
}

.footer-contact-item a:hover {
    color: rgba(255,255,255,.7) !important;
}

.footer-office-lbl {
    font-size: 10px;
    color: rgba(255,255,255,.45);
    font-weight: var(--fw-medium);
    line-height: 1.2;
    min-width: 76px;
    text-align: end;
    white-space: nowrap;
}

/* ── Col 2 BOTTOM: Two-column links ── */
.footer-links-grid {
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 32px;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer-links a {
    color: rgba(255,255,255,.8) !important;
    font-size: .9rem;
    font-weight: var(--fw-regular);
    text-decoration: none;
    transition: color .2s;
    display: inline-block;
}

.footer-links a:hover {
    color: #fff !important;
}

/* ── Col 3: CTA card ── */
.footer-cta {
    background: url(https://the7.io/elementor-ai/wp-content/uploads/sites/132/2017/04/art-ai-bottom-3.webp);
    /* border: 1px solid rgba(255, 255, 255, .1); */
    border-radius: 20px;
    padding: 32px 28px 120px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: 100%;
    text-align: center;
    background-size: 54% auto;
    background-position: bottom right;
    background-repeat: no-repeat;
    background-color: #04234a;
}
.footer-cta__title {
    font-weight: var(--fw-bold);
    font-size: 1.4rem;
    margin: 0;
    position: relative;
    z-index: 2;
}

.footer-cta__text {
    color: #fff;
    font-size: .875rem;
    line-height: 1.85;
    margin: 0;
    position: relative;
    z-index: 2;
}

.footer-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--default-color);
    color: #fff !important;
    padding: 11px 28px;
    border-radius: 50px;
    font-weight: var(--fw-semibold);
    font-size: .9rem;
    text-decoration: none !important;
    transition: background .25s, transform .2s;
    align-self: flex-end;
    margin-top: 8px;
    position: relative;
    z-index: 2;
}

.footer-cta__btn:hover {
    background: rgba(40,118,171,.75);
    transform: translateY(-2px);
}

/* 3D image — full-width banner at bottom of card */
.footer-cta__media {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 210px;
    z-index: 1;
    pointer-events: none;
}

.footer-cta__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    opacity: .92;
}

/* ── Bottom bar ── */
.footer-bottom {
    padding: 18px 0;
    border-top: 1px solid rgba(255,255,255,.07);
}

.footer-bottom__copy {
    text-align: center;
    margin: 0;
    font-size: .8125rem;
    color: rgba(255,255,255,.3);
}

.footer-bottom__copy a {
    color: rgba(255,255,255,.3) !important;
    text-decoration: none;
    transition: color .2s;
}

.footer-bottom__copy a:hover {
    color: rgba(255,255,255,.6) !important;
}

/* legacy helpers */
.tech-color { color: var(--default-color); }
.white-color { color: #fff; }
.b-mail { width: 100%; }
.border-bo { border-bottom: 1px solid rgba(255,255,255,.08); }

.button-tech{
    background:var(--default-color);
}

.button-tech:hover{
    background:var(--secondary-color);
}

.button-tech2{
    background:#fff;
    color:var(--default-color);
}

.button-tech2:hover{
    background:var(--secondary-color);
    color: white;
}


/*section_page_site*/

.section_page_site {
    position: relative;
}


/* ── Hero ── */
.bh-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #0b1523;
}
.bh-hero__bg {
    position: absolute;
    inset: 0;
    background-image: var(--bh-bg);
    background-size: cover;
    background-position: center;
    transform: scale(1.06);
    transition: transform 8s ease;
    filter: brightness(.45) saturate(.9);
}
.bh-hero:hover .bh-hero__bg { transform: scale(1); }
.bh-hero__vignette {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(11,21,35,.35) 0%, rgba(11,21,35,.1) 40%, rgba(11,21,35,.65) 100%);
}
.bh-hero__inner {
    position: relative;
    z-index: 2;
    padding-top: 110px;
    padding-bottom: 80px;
}
.bh-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.55);
    margin-bottom: 48px;
    flex-wrap: wrap;
}
.bh-crumb a { color: rgba(255,255,255,.7); }
.bh-crumb a:hover { color: #fff; }
.bh-crumb i { font-size: 10px; opacity: .5; }
.bh-hero__content { max-width: 720px; }
.bh-kicker {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,.2);
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.9);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    margin-bottom: 20px;
}
.bh-hero__title {
    color: #fff;
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 900;
    line-height: 1.08;
    margin: 0 0 20px;
    text-shadow: 0 4px 24px rgba(0,0,0,.3);
}
.bh-hero__desc {
    color: rgba(255,255,255,.72);
    font-size: 17px;
    line-height: 1.85;
    max-width: 580px;
    margin: 0 0 32px;
}
.bh-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }
.bh-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 48px;
    padding: 11px 26px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    transition: all .2s ease;
    cursor: pointer;
}
.bh-btn--primary { background: #fff; color: #0b1523; box-shadow: 0 8px 28px rgba(0,0,0,.25); }
.bh-btn--primary:hover { background: var(--default-color); color: #fff; }
.bh-btn--ghost {
    background: rgba(255,255,255,.1);
    color: rgba(255,255,255,.85);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(6px);
}
.bh-btn--ghost:hover { background: rgba(255,255,255,.18); color: #fff; }
.bh-hero__stats { margin-top: 40px; display: flex; gap: 20px; }
.bh-hero__stats span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: rgba(255,255,255,.55);
}
.bh-scroll-hint {
    position: absolute;
    bottom: 36px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.4);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}
.bh-scroll-hint__line {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, rgba(255,255,255,.4), transparent);
    animation: bh-scroll-line 1.8s ease infinite;
}
@keyframes bh-scroll-line {
    0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
    50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
    100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* ── Gallery ── */
.bh-gallery { background: #0f1a28; padding: 70px 0 100px; }
.bh-gallery__label {
    display: flex;
    align-items: center;
    gap: 18px;
    max-width: 1280px;
    margin: 0 auto 40px;
    padding: 0 24px;
}
.bh-gallery__label span {
    color: rgba(255,255,255,.4);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.bh-gallery__line { flex: 1; height: 1px; background: rgba(255,255,255,.08); }
.bh-gallery__count {
    width: 36px; height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.12);
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.45);
    font-size: 12px; font-weight: 800; font-family: monospace;
    flex-shrink: 0;
}
.bh-feed {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 6px;
}
.bh-frame--slot0,
.bh-frame--slot3,
.bh-frame--slot4 { grid-column: 1 / -1; }
.bh-frame {
    position: relative;
    overflow: hidden;
    background: #1a2535;
    cursor: zoom-in;
}
.bh-frame img {
    width: 100%; display: block;
    transition: transform .5s ease;
}
.bh-frame--slot0 img,
.bh-frame--slot3 img { aspect-ratio: 16 / 7; object-fit: cover; max-height: 680px; }
.bh-frame--slot1 img,
.bh-frame--slot2 img { aspect-ratio: 4 / 3; object-fit: cover; }
.bh-frame--slot4 img { aspect-ratio: 16 / 9; object-fit: cover; max-height: 520px; }
.bh-frame:hover img  { transform: scale(1.03); }
.bh-frame__hover {
    position: absolute; inset: 0;
    background: rgba(11,21,35,.55);
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 20px 22px;
    opacity: 0; transition: opacity .25s ease;
}
.bh-frame:hover .bh-frame__hover { opacity: 1; }
.bh-frame__num {
    font-size: 11px; font-weight: 800; letter-spacing: .1em;
    color: rgba(255,255,255,.55); font-family: monospace;
}
.bh-frame__zoom {
    font-size: 22px; color: #fff;
    background: rgba(255,255,255,.15);
    width: 42px; height: 42px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    backdrop-filter: blur(6px); transition: background .2s;
}
.bh-frame:hover .bh-frame__zoom { background: var(--default-color); }

/* ── Related Works ── */
.bh-related { background: #f5f8fb; padding: 80px 0 90px; }
.bh-related__hd {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 36px; flex-wrap: wrap; gap: 12px;
}
.bh-related__hd h2 { font-size: 28px; font-weight: 900; color: #0f1e30; margin: 0; }
.bh-related__more {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13px; font-weight: 800; color: var(--default-color);
}
.bh-related__more:hover { color: var(--secondary-color); }
.bh-related__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.bh-rel-card {
    display: flex; flex-direction: column;
    border-radius: 16px; overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 20px rgba(15,30,50,.07);
    transition: transform .25s ease, box-shadow .25s ease;
    text-decoration: none;
}
.bh-rel-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(15,30,50,.13); }
.bh-rel-card__thumb { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #e8f0f8; }
.bh-rel-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.bh-rel-card:hover .bh-rel-card__thumb img { transform: scale(1.06); }
.bh-rel-card__overlay {
    position: absolute; inset: 0;
    background: rgba(11,21,35,.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .25s;
    font-size: 28px; color: #fff;
}
.bh-rel-card:hover .bh-rel-card__overlay { opacity: 1; }
.bh-rel-card__info { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.bh-rel-card__cat { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--default-color); }
.bh-rel-card__title { font-size: 15px; font-weight: 800; color: #0f1e30; line-height: 1.4; }

/* ── Lightbox ── */
.bh-lb {
    position: fixed; inset: 0; z-index: 9000;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none; opacity: 0; transition: opacity .22s ease;
}
.bh-lb--open { opacity: 1; pointer-events: auto; }
.bh-lb__backdrop {
    position: fixed; inset: 0; z-index: 8999;
    background: rgba(5,12,22,.94);
    pointer-events: none; opacity: 0; transition: opacity .22s ease;
    backdrop-filter: blur(3px);
}
.bh-lb__backdrop.bh-lb--open { opacity: 1; pointer-events: auto; }
.bh-lb__stage {
    position: relative; z-index: 9001;
    max-width: 96vw; max-height: 90vh;
    display: flex; align-items: center; justify-content: center;
}
.bh-lb__stage img {
    max-width: 96vw; max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 32px 80px rgba(0,0,0,.5);
}
.bh-lb__close,
.bh-lb__nav {
    position: fixed; z-index: 9002;
    border: 0; border-radius: 50%;
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.1); color: #fff;
    font-size: 20px; cursor: pointer; transition: background .2s;
    backdrop-filter: blur(6px);
}
.bh-lb__close:hover, .bh-lb__nav:hover { background: rgba(255,255,255,.22); }
.bh-lb__close { top: 22px; inset-inline-end: 22px; }
.bh-lb__nav--prev { top: 50%; transform: translateY(-50%); inset-inline-start: 22px; }
.bh-lb__nav--next { top: 50%; transform: translateY(-50%); inset-inline-end: 22px; }
.bh-lb__counter {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    z-index: 9002;
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.1); backdrop-filter: blur(8px);
    padding: 7px 18px; border-radius: 999px;
    font-size: 13px; font-weight: 700; color: rgba(255,255,255,.8); font-family: monospace;
}
.bh-lb__counter em { color: rgba(255,255,255,.3); font-style: normal; }

/* ── Responsive ── */
@media (max-width: 991.98px) {
    .bh-hero { min-height: 85vh; }
    .bh-related__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767.98px) {
    .bh-feed { grid-template-columns: 1fr; gap: 4px; }
    .bh-frame--slot1 img, .bh-frame--slot2 img { aspect-ratio: 16/9; }
    .bh-related__grid { grid-template-columns: 1fr; }
    .bh-hero__title { font-size: clamp(30px, 8vw, 48px); }
}
@media (max-width: 575.98px) {
    .bh-hero { min-height: 75vh; }
    .bh-hero__inner { padding-top: 80px; padding-bottom: 60px; }
    .bh-lb__nav--prev { inset-inline-start: 8px; }
    .bh-lb__nav--next { inset-inline-end: 8px; }
}

/* ═══════════════════════════════════════════════
   HEADER PAGES — shared across all inner pages
═══════════════════════════════════════════════ */
.header-pages {
    position: relative;
    background:var(--secondary-color) 100%;
    padding: 70px 0 60px;
    text-align: center;
    overflow: hidden;
}
.header-pages::before,
.header-pages::after { display: none; }
/* Hex canvas injected by JS */
.hp-hex-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Brand logo deco elements */
.header-pages .container { position: relative; z-index: 2; }

.header-pages h1 {
    color: #fff;
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 800;
    margin-bottom: 20px;
    text-shadow: 0 2px 20px rgba(0,0,0,.35);
    letter-spacing: -.3px;
}
.header-pages .breadcrumb {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 30px;
    display: inline-flex;
    padding: 7px 22px;
    margin: 0;
    justify-content: center;
}
.header-pages .breadcrumb-item,
.header-pages .breadcrumb a,
.header-pages .breadcrumb li {
    color: rgba(255,255,255,.75);
    font-size: 13px;
    font-weight: 500;
    padding: 0;
    text-decoration: none;
}
.header-pages .breadcrumb-item.active {
    color: rgba(255,255,255,.45);
}
.header-pages .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.3);
}
.header-pages .breadcrumb a:hover { color: #fff; }
.header-pages .breadcrumb .fa { margin-inline-end: 5px; }

.breadcrumb > li + li:before {
    content: "\e138" !important;
    content: "";
    font-family: "Phosphor-Bold" !important;
    font-size: 12px;
    color: #000;
    padding:0 0.5rem !important;
}

.ds-fx {
    align-items: center;
}

.img-services {
    text-align: center;
}

.img-services img {
    width: auto;
    max-width: 100%;
}

.txt-page h5 {
    color: #1B1B1B;
    margin-bottom: 20px;
    font-weight: 500;
    font-size: 23px;
}

.txt-page p {
    color: var(--secondary-color);
}

/*sec-feat-serv*/

.sec-feat-serv {
    position: relative;
}

.box-serv-one {
    border-radius: 15px;
    text-align: center;
    background: #fff;
}

.mb-6{
    margin-bottom: 6rem !important;   
}

.box-serv-one figure {
    width: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:auto;
    background: #fff;
}

.box-serv-one h5 {
    color: var(--secondary-color);
    font-weight: 500;
    margin-bottom: 15px;
}

.box-serv-one p {
    color: var(--secondary-color)
}

.box-serv-tow {
    padding: 50px 25px;
    background:var(--bg-color);
    border-radius: 15px;
    text-align: center;
    margin-bottom: 20px;
}

.box-serv-tow figure {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.box-serv-tow h5,
.box-serv-tow p {
    color: #fff;
}

.box-serv-three {
    border-radius: 15px;
    text-align: center;
    margin-bottom: 30px;
}

.box-serv-6 {
    text-align: center;
    margin-bottom: 30px;
}


.box-serv-6 figure {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}


.box-serv-three figure {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px;
}

.box-serv-three h5,
.box-serv-three p {
    color: var(--secondary-color);
    font-size:1.05rem;
    font-weight: normal;
}

.box-serv-four {
    background:var(--bg-color);
    padding: 20px;
    display: flex;
    align-items: center;
    border-radius: 10px;
}

.box-serv-four figure {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: var(--default-color);
    padding: 25px;
    margin:0 15px 0 0 !important;
}

.box-serv-four .txt-feat-serv {
    width: calc(100% - 100px);
}

.form-order {
    padding: 20px;
}

.form-order .form-group {
    margin-bottom: 20px;
}

.form-order .form-group .form-control {
    border: 1px solid #eee;
    height: 45px;
}

.modal-title {
    text-align: center;
    padding: 30px 0;
}

.modal-title h4 {
    color: var(--default-color);
}

.modal-title small {
    color: #555
}

.btnClose {
    color: var(--default-color);
    background: transparent;
    position: absolute;
    top: 15px;
    left: 15px;
}


/*pakc*/

.section_pack {
    position: relative;
    padding: var(--sec-padding);
}

.pric-box-top {
    text-align: center;
    background: #ffffff;
    position: relative;
    z-index: 1;
    box-shadow: 1px 4px 20px -2px rgb(0 0 0 / 10%);
}

.configuration div{
    padding:3px 0;
}

.pric-box-top .button {
bottom: 25px;

}

.pric-box-top .pric-box {
    color:var(--default-color)
}

.pric-box-top .pric-box .usd {
    font-size:60px;
    display: block;
    font-weight: bold
}

.pric-box-top .pric-box .usd span {
    font-size: 40px
}

.pric-box-top .pric-box .te {
    color: #7a7a7a;
    font-style: italic
}

.pric-box-top .configuration li {
    color: #86878b;
    padding: 10px;
    border-bottom: 1px solid #f5f5f5;
}

.pric-box-top .most {
    background-color: var(--default-color);
    padding: 5px 0 10px;
    color: #fff;
    margin-bottom: 0
}

.color-d{
    color: var(--secondary-color) !important;
}

.txt-page a{
    color:#ffffff;
    border-radius: 50rem !important;
    background:var(--default-color);
    padding: 10px 20px;
}

.txt-page a:hover{
    background:var(--secondary-color);

}

/* ══════════════════════════════════════
   cp-* — Client portal shared components
   (used on login, register, and portal pages)
══════════════════════════════════════ */
:root {
    --cp-primary: var(--default-color);
    --cp-accent:  #2876AB;
}
.cp-card { background:#fff; border-radius:16px; box-shadow:0 2px 16px rgba(0,0,0,.07); overflow:hidden; margin-bottom:24px; border:1px solid #f0f4f8; }
.cp-card__header {
    padding:16px 22px;
    border-bottom:1px solid #f0f4f8;
    display:flex; align-items:center; justify-content:space-between;
    background:#fafbfc;
}
.cp-card__title  {
    font-size:.95rem; font-weight:700; color:#1a202c;
    display:flex; align-items:center; gap:10px;
}
.cp-card__title i {
    width:32px; height:32px; border-radius:9px;
    display:inline-flex !important; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0;
    background:#ebf8ff; color:#1b6fa0;
    margin:0 !important;
}
.cp-card__body   { padding:24px 26px; }

.cp-form-group { margin-bottom:20px; }
.cp-form-group label { display:block; font-size:13px; font-weight:600; color:#4a5568; margin-bottom:7px; }
.cp-form-control {
    width:100%; padding:11px 14px;
    border:1.5px solid #e2e8f0; border-radius:8px;
    font-family:inherit; font-size:14px; color:#2d3748;
    background:#f7fafc; transition:border-color .2s, background .2s;
    outline:none;
}
.cp-form-control:focus { border-color:#2876AB; background:#fff; }
.cp-form-control.is-invalid { border-color:#e53e3e; }
.cp-invalid-feedback { font-size:12px; color:#e53e3e; margin-top:5px; }

.cp-btn {
    display:inline-flex; align-items:center; justify-content:center; gap:7px;
    padding:10px 22px; border-radius:8px;
    font-size:14px; font-weight:600; cursor:pointer;
    text-decoration:none; border:none; transition:all .2s;
    font-family:inherit;
}
.cp-btn--primary { background:var(--default-color); color:#fff; }
.cp-btn--primary:hover { background:#134056; color:#fff; }
.cp-btn--outline { background:transparent; border:1.5px solid var(--default-color); color:var(--default-color); }
.cp-btn--outline:hover { background:var(--default-color); color:#fff; }
.cp-btn--sm { padding:7px 16px; font-size:12px; }
.cp-btn.w-100 { width:100%; }

.cp-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:600; }
.cp-badge--new     { background:#ebf8ff; color:#2b6cb0; }
.cp-badge--process { background:#fffaf0; color:#c05621; }
.cp-badge--waiting { background:#faf5ff; color:#6b46c1; }
.cp-badge--solved  { background:#e6fffa; color:#1bc5bd; }
.cp-badge--paid    { background:#f0fff4; color:#276749; }
.cp-badge--unpaid  { background:#fff5f5; color:#c53030; }

.cp-table { width:100%; border-collapse:collapse; }
.cp-table th { padding:11px 14px; font-size:11px; font-weight:700; color:#718096; text-transform:uppercase; letter-spacing:.06em; background:#f7fafc; border-bottom:1px solid #e2e8f0; }
.cp-table td { padding:13px 14px; font-size:13px; color:#2d3748; border-bottom:1px solid #f0f4f8; vertical-align:middle; }
.cp-table tr:last-child td { border-bottom:none; }
.cp-table tr:hover td { background:#fafbff; }

.cp-pagination-wrap {
    padding:20px 22px;
    border-top:1px solid #f0f4f8;
    background:linear-gradient(180deg, #fff 0%, #fbfdff 100%);
}
.cp-pagination-wrap nav {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    direction:rtl;
}
.cp-pagination-wrap nav > div:first-child {
    display:none;
}
.cp-pagination-wrap nav > div:last-child {
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.cp-pagination-wrap nav > div:last-child > div:first-child {
    order:2;
}
.cp-pagination-wrap nav > div:last-child > div:last-child {
    order:1;
}
.cp-pagination-wrap p {
    margin:0;
    color:#718096 !important;
    font-size:12px;
    font-weight:700;
    background:#f8fbfe;
    border:1px solid #e7eef6;
    border-radius:999px;
    padding:8px 13px;
    line-height:1.3;
}
.cp-pagination-wrap .pagination {
    margin:0;
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
    padding:0;
    list-style:none;
    direction:rtl;
}
.cp-pagination-wrap .page-item {
    margin:0;
}
.cp-pagination-wrap .page-link,
.cp-pagination-wrap .page-item > span.page-link {
    min-width:40px;
    height:40px;
    padding:0 14px;
    border:1px solid #d9e7f1;
    border-radius:12px;
    color:var(--default-color);
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:700;
    text-decoration:none;
    line-height:1;
    box-shadow:0 8px 20px rgba(20, 68, 91, .07);
    transition:all .2s ease;
    overflow:hidden;
}
.cp-pagination-wrap .page-link svg,
.cp-pagination-wrap .page-item > span.page-link svg {
    width:15px !important;
    height:15px !important;
    display:block;
    flex:0 0 auto;
    stroke-width:3;
}
.cp-pagination-wrap .page-item:first-child .page-link,
.cp-pagination-wrap .page-item:last-child .page-link,
.cp-pagination-wrap .page-item:first-child > span.page-link,
.cp-pagination-wrap .page-item:last-child > span.page-link {
    min-width:92px;
}
.cp-pagination-wrap .cp-page-nav {
    gap:8px;
    font-size:12px;
    align-items:center;
    line-height:1;
}
.cp-pagination-wrap .cp-page-nav__icon {
    width:auto;
    height:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:900;
    line-height:1;
    position:relative;
    top:1px;
    flex:0 0 auto;
}
.cp-pagination-wrap .page-link:hover {
    background:var(--default-color);
    border-color:var(--default-color);
    color:#fff;
    transform:translateY(-2px);
    box-shadow:0 12px 24px rgba(20, 68, 91, .14);
}
.cp-pagination-wrap .page-item.active .page-link,
.cp-pagination-wrap .page-item.active > span.page-link {
    background:var(--default-color);
    border-color:var(--default-color);
    color:#fff;
    box-shadow:0 12px 24px rgba(20, 68, 91, .16);
}
.cp-pagination-wrap .page-item.disabled .page-link,
.cp-pagination-wrap .page-item.disabled > span.page-link {
    background:#f7fafc;
    border-color:#edf2f7;
    color:#a0aec0;
    cursor:not-allowed;
    box-shadow:none;
    transform:none;
}
@media (max-width:575.98px) {
    .cp-pagination-wrap {
        padding:14px;
    }
    .cp-pagination-wrap nav > div:last-child {
        justify-content:center;
        text-align:center;
    }
    .cp-pagination-wrap nav > div:last-child > div:first-child,
    .cp-pagination-wrap nav > div:last-child > div:last-child {
        order:unset;
    }
    .cp-pagination-wrap p {
        width:100%;
        order:2;
        justify-content:center;
    }
    .cp-pagination-wrap .pagination {
        justify-content:center;
        order:1;
    }
    .cp-pagination-wrap .page-link,
    .cp-pagination-wrap .page-item > span.page-link {
        min-width:36px;
        height:36px;
        padding:0 11px;
        border-radius:10px;
    }
    .cp-pagination-wrap .page-item:first-child .page-link,
    .cp-pagination-wrap .page-item:last-child .page-link,
    .cp-pagination-wrap .page-item:first-child > span.page-link,
    .cp-pagination-wrap .page-item:last-child > span.page-link {
        min-width:78px;
    }
}

.cp-stat { background:#fff; border-radius:14px; padding:22px; display:flex; align-items:center; gap:16px; box-shadow:0 2px 12px rgba(0,0,0,.07); margin-bottom:20px; }
.cp-stat__icon { width:52px; height:52px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; }
.cp-stat__num   { font-size:1.6rem; font-weight:700; line-height:1; color:#1a202c; }
.cp-stat__label { font-size:12px; color:#718096; margin-top:4px; }

.cp-empty { text-align:center; padding:48px 24px; }
.cp-empty i { font-size:40px; color:#cbd5e0; margin-bottom:12px; display:block; }
.cp-empty p { color:#a0aec0; font-size:14px; }

.cp-msg { display:flex; gap:12px; margin-bottom:20px; }
.cp-msg--admin { flex-direction:row-reverse; }
.cp-msg__avatar { width:38px; height:38px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; }
.cp-msg__avatar--client { background:#ebf8ff; color:var(--default-color); }
.cp-msg__avatar--admin  { background:var(--default-color); color:#fff; }
.cp-msg__bubble { max-width:75%; padding:12px 16px; border-radius:12px; font-size:14px; line-height:1.7; }
.cp-msg__bubble--client { background:#ebf8ff; color:#2d3748; border-start-start-radius:2px; }
.cp-msg__bubble--admin  { background:var(--default-color); color:#fff; border-start-end-radius:2px; }
.cp-msg__time { font-size:11px; color:#a0aec0; margin-top:5px; }

.cp-wrap { padding:48px 0 64px; }
.cp-sidebar { position:sticky; top:80px; }

.cp-side-card {
    background:var(--default-color); border-radius:18px; overflow:hidden;
    box-shadow:0 6px 28px rgba(13,59,92,.28);
}
.cp-side-user {
    padding:20px 16px 16px;
    border-bottom:1px solid rgba(255,255,255,.1);
    display:flex; align-items:center; gap:12px;
    background:#0000003d;;
}
.cp-side-avatar {
    width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.3);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; font-weight:800; color:#fff; flex-shrink:0; overflow:hidden;
}
.cp-side-avatar img { width:100%; height:100%; object-fit:cover; }
.cp-side-name  { font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cp-side-email { font-size:10.5px; color:rgba(255,255,255,.58); margin-top:2px; word-break:break-all; }
.cp-side-nav   { padding:8px 10px 4px; }
.cp-side-item  {
    display:flex; align-items:center; gap:12px;
    padding:9px 12px; border-radius:10px;
    color:rgba(255,255,255,.78); font-size:13.5px; font-weight:500;
    text-decoration:none; transition:all .18s; margin-bottom:2px;
}
.cp-side-item:hover { color:#fff; background:rgba(255,255,255,.1); text-decoration:none; }
.cp-side-item.active { color:#fff; background:rgba(255,255,255,.16); font-weight:600; }

.cp-side-item i {
    width:30px; height:30px; border-radius:8px;
    background:rgba(255,255,255,.12);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0; transition:background .18s;
}
.cp-side-item:hover i  { background:rgba(255,255,255,.22); }
.cp-side-item.active i { background:rgba(255,255,255,.28); }

.cp-side-divider { height:1px; background:rgba(255,255,255,.1); margin:8px 2px; }

.cp-side-logout {
    display:flex; align-items:center; gap:12px;
    padding:10px 12px; width:100%; text-align:start;
    border:none; border-radius:10px; font-family:inherit;
    font-size:13.5px; font-weight:600; cursor:pointer; transition:all .18s;
    background:rgba(239,68,68,.15); color:#fca5a5;
    margin-top:4px; margin-bottom:8px;
}
.cp-side-logout:hover { background:rgba(239,68,68,.3); color:#fff; }
.cp-side-logout i {
    width:30px; height:30px; border-radius:8px;
    background:rgba(239,68,68,.25);
    display:inline-flex; align-items:center; justify-content:center;
    font-size:13px; flex-shrink:0; transition:background .18s;
}
.cp-side-logout:hover i { background:rgba(239,68,68,.5); }

.cp-side-badge {
    margin-inline-start:auto; font-size:10px; font-weight:700;
    padding:2px 8px; border-radius:20px; flex-shrink:0;
}
.cp-side-badge--red   { background:rgba(239,68,68,.85); color:#fff; }
.cp-side-badge--white { background:rgba(255,255,255,.2); color:#fff; }
.cp-content { min-height:60vh; }

/* Page section header used across all client portal pages */
.cp-page-hd { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:22px; }
.cp-page-hd__left { display:flex; align-items:center; gap:13px; }
.cp-page-hd__icon {
    width:42px; height:42px; border-radius:11px;
    background:#ebf8ff; color:var(--default-color);
    display:flex; align-items:center; justify-content:center;
    font-size:17px; flex-shrink:0;
}
.cp-page-hd__title { font-size:1.05rem; font-weight:700; color:#1a202c; line-height:1.3; }
.cp-page-hd__sub   { font-size:12px; color:#718096; margin-top:2px; }

/* ═══════════════════════════════════════════════════════════════
   CPS — Client Portal Sidebar  (prefix: cps-*)
═══════════════════════════════════════════════════════════════ */

.cps-card {
    background:#fff;
    border-radius:18px;
    border:1px solid #e8edf5;
    box-shadow:0 4px 24px rgba(0,0,0,.08);
    overflow:hidden;
}

/* User header strip */
.cps-user {
    background:linear-gradient(135deg,#0d3b5c 0%,#1b6fa0 100%);
    padding:20px 16px 18px;
    display:flex; align-items:center; gap:11px;
    position:relative; overflow:hidden;
}
.cps-user::after {
    content:''; position:absolute; width:120px; height:120px; border-radius:50%;
    background:rgba(255,255,255,.06); top:-30px; inset-inline-end:-30px; pointer-events:none;
}
.cps-avatar {
    width:44px; height:44px; border-radius:50%; flex-shrink:0;
    background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.35);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; font-weight:800; color:#fff; overflow:hidden;
}
.cps-avatar img { width:100%; height:100%; object-fit:cover; }
.cps-user__info { flex:1; min-width:0; }
.cps-user__name  { font-size:13.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cps-user__email { font-size:10.5px; color:rgba(255,255,255,.62); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cps-user__badge {
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px;
    background:rgba(255,255,255,.18); color:#fff; white-space:nowrap; flex-shrink:0;
}

/* Nav area */
.cps-nav { padding:10px 10px 12px; }

.cps-sep {
    font-size:10px; font-weight:700; color:#a0aec0;
    text-transform:uppercase; letter-spacing:.07em;
    padding:14px 10px 6px;
}

.cps-item {
    display:flex; align-items:center; gap:10px;
    padding:9px 10px; border-radius:10px;
    color:#4a5568; font-size:13.5px; font-weight:500;
    text-decoration:none; transition:all .18s;
    margin-bottom:2px; cursor:pointer;
}
.cps-item:hover { background:#f0f7ff; color:#1b6fa0; text-decoration:none; }
.cps-item--active { background:linear-gradient(135deg,#e8f4fd,#dbeafe); color:#1b6fa0; font-weight:700; }
.cps-item--active .cps-item__icon { opacity:1; }

.cps-item__icon {
    width:32px; height:32px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; transition:all .18s;
}
.cps-item__text { flex:1; }

/* Icon color variants */
.cps-item__icon--blue   { background:#dbeafe; color:#1d4ed8; }
.cps-item__icon--teal   { background:#ccfbf1; color:#0d9488; }
.cps-item__icon--orange { background:#fef3c7; color:#d97706; }
.cps-item__icon--purple { background:#ede9fe; color:#7c3aed; }
.cps-item__icon--green  { background:#d1fae5; color:#059669; }
.cps-item__icon--red    { background:#fee2e2; color:#dc2626; }
.cps-item__icon--slate  { background:#f1f5f9; color:#64748b; }

.cps-item:hover .cps-item__icon--blue   { background:#1d4ed8; color:#fff; }
.cps-item:hover .cps-item__icon--teal   { background:#0d9488; color:#fff; }
.cps-item:hover .cps-item__icon--orange { background:#d97706; color:#fff; }
.cps-item:hover .cps-item__icon--purple { background:#7c3aed; color:#fff; }
.cps-item:hover .cps-item__icon--green  { background:#059669; color:#fff; }
.cps-item:hover .cps-item__icon--red    { background:#dc2626; color:#fff; }
.cps-item:hover .cps-item__icon--slate  { background:#64748b; color:#fff; }

.cps-item--active .cps-item__icon--blue   { background:#1d4ed8; color:#fff; }
.cps-item--active .cps-item__icon--teal   { background:#0d9488; color:#fff; }
.cps-item--active .cps-item__icon--orange { background:#d97706; color:#fff; }
.cps-item--active .cps-item__icon--purple { background:#7c3aed; color:#fff; }
.cps-item--active .cps-item__icon--green  { background:#059669; color:#fff; }
.cps-item--active .cps-item__icon--red    { background:#dc2626; color:#fff; }

/* Badges inside nav items */
.cps-badge {
    margin-inline-start:auto; font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:20px;
}
.cps-badge--red  { background:#fee2e2; color:#dc2626; }
.cps-badge--teal { background:#ccfbf1; color:#0d9488; }

/* Divider */
.cps-divider { height:1px; background:#f0f4f8; margin:8px 0; }

/* Logout button */
.cps-logout {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:9px 10px; border-radius:10px;
    background:none; border:none; font-family:inherit;
    font-size:13.5px; font-weight:500; color:#dc2626;
    cursor:pointer; transition:all .18s; text-align:start;
}
.cps-logout:hover { background:#fee2e2; }
.cps-logout .cps-item__icon { background:#fee2e2; color:#dc2626; }
.cps-logout:hover .cps-item__icon { background:#dc2626; color:#fff; }

/* ═══════════════════════════════════════════════════════════════════
   CPD — Client Portal Dashboard (premium redesign)
   prefix: cpd-*   (does NOT override existing cp-* rules)
═══════════════════════════════════════════════════════════════════ */

/* Root wrapper */
.cpd-root { display:flex; flex-direction:column; gap:26px; }

/* ─── Entrance animations ─── */
@keyframes cpd-fadein {
    from { opacity:0; transform:translateY(18px); }
    to   { opacity:1; transform:translateY(0); }
}
.cpd-hero    { animation:cpd-fadein .5s ease both; }
.cpd-stats   { animation:cpd-fadein .5s .08s ease both; }
.cpd-alert   { animation:cpd-fadein .5s .13s ease both; }
.cpd-actions { animation:cpd-fadein .5s .18s ease both; }
.cpd-grid    { animation:cpd-fadein .5s .26s ease both; }

/* ── Hero Banner ── */
.cpd-hero {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#08253e 0%,#145e96 48%,#1c82cc 100%);
    border-radius:22px;
    padding:34px 38px 30px;
    color:#fff;
    box-shadow:0 16px 48px rgba(8,37,62,.38);
}
.cpd-hero::before {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-size: 30px 30px;
}
.cpd-hero::after {
    content:''; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
        radial-gradient(ellipse 55% 80% at 82% 35%, rgba(42,183,247,.22) 0%, transparent 65%),
        radial-gradient(ellipse 40% 60% at 5%  90%, rgba(255,255,255,.07) 0%, transparent 55%);
}
.cpd-hero__greeting { font-size:13px; color:rgba(255,255,255,.68); margin-bottom:12px; position:relative; z-index:1; letter-spacing:.35px; }
.cpd-hero__mainrow {
    display:flex; align-items:center;
    justify-content:space-between;
    gap:16px;
    position:relative; z-index:1; margin-bottom:14px;
}
.cpd-hero__name-wrap { display:flex; align-items:center; gap:10px; }
.cpd-hero__name { font-size:1.65rem; font-weight:800; margin:0; line-height:1.1; letter-spacing:-.3px; text-shadow:0 2px 14px rgba(0,0,0,.2); }
.cpd-hero__date { font-size:12px; color:rgba(255,255,255,.52); position:relative; z-index:1; letter-spacing:.25px; }
.cpd-hero__actions {
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    position:relative;
    z-index:1;
}
.cpd-hero__btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:rgba(255,255,255,.15);
    border:1.5px solid rgba(255,255,255,.3);
    border-radius:50px;
    padding:9px 20px;
    color:#fff;
    font-size:13px;
    font-weight:700;
    line-height:1;
    text-decoration:none;
    transition:background .2s,border-color .2s,transform .2s;
    backdrop-filter:blur(4px);
}
.cpd-hero__btn:hover {
    background:rgba(255,255,255,.25);
    border-color:rgba(255,255,255,.5);
    color:#fff;
    text-decoration:none;
    transform:translateY(-1px);
}
.cpd-chip {
    display:flex; align-items:center; gap:6px;
    background:rgba(255,255,255,.13);
    border:1px solid rgba(255,255,255,.22);
    border-radius:10px;
    padding:5px 10px;
}
.cpd-chip i { font-size:11px; opacity:.85; }
.cpd-chip__num { font-size:.78rem; font-weight:800; line-height:1; display:block; }
.cpd-chip__lbl { font-size:9px; color:rgba(255,255,255,.7); display:block; margin-top:1px; }
/* Notification bell in hero */
.cpd-hero__bell {
    position:relative; display:inline-flex; align-items:center; justify-content:center;
    width:36px; height:36px; border-radius:50%;
    background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.3);
    color:#fff; font-size:15px; text-decoration:none;
    transition:background .2s; flex-shrink:0;
}
.cpd-hero__bell:hover { background:rgba(255,255,255,.35); color:#fff; text-decoration:none; }
.cpd-hero__bell-badge {
    position:absolute; top:-5px; inset-inline-end:-5px;
    min-width:18px; height:18px; border-radius:20px;
    background:#e53e3e; color:#fff;
    font-size:10px; font-weight:700; line-height:18px;
    text-align:center; padding:0 4px;
    border:2px solid #1b6fa0;
}
/* deco circles */
.cpd-hero__deco {
    position:absolute; border-radius:50%;
    background:rgba(255,255,255,.06); pointer-events:none;
}
.cpd-hero__deco--1 { width:300px; height:300px; top:-90px; inset-inline-end:-65px; background:rgba(255,255,255,.04); border:1.5px solid rgba(255,255,255,.09); }
.cpd-hero__deco--2 { width:180px; height:180px; bottom:-65px; inset-inline-start:-30px; background:rgba(255,255,255,.03); border:1.5px solid rgba(255,255,255,.07); }

/* ── Stat Cards ── */
.cpd-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
@media(max-width:900px){ .cpd-stats { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cpd-stats { grid-template-columns:1fr 1fr; } }

.cpd-stat {
    background:#fff; border-radius:18px;
    overflow:hidden;
    box-shadow:0 2px 14px rgba(0,0,0,.07);
    border:1.5px solid #eef2f8;
    transition:transform .22s,box-shadow .22s,border-color .22s;
}
.cpd-stat:hover { transform:translateY(-4px); box-shadow:0 10px 32px rgba(0,0,0,.12); border-color:transparent; }
.cpd-stat__strip { height:3px; }
.cpd-stat__body  { display:flex; align-items:center; gap:14px; padding:18px 20px; }
.cpd-stat__icon  { width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center; font-size:20px; flex-shrink:0; }
.cpd-stat__num   { font-size:1.6rem; font-weight:800; line-height:1; color:#1a202c; }
.cpd-stat__lbl   { font-size:11px; color:#718096; margin-top:4px; font-weight:500; }

.cpd-stat--blue   .cpd-stat__strip { background:linear-gradient(90deg,#1b6fa0,#2ab7f7); }
.cpd-stat--blue   .cpd-stat__icon  { background:linear-gradient(135deg,#ebf8ff,#dbeafe); color:#1b6fa0; }
.cpd-stat--orange .cpd-stat__strip { background:linear-gradient(90deg,#c97316,#f59e0b); }
.cpd-stat--orange .cpd-stat__icon  { background:linear-gradient(135deg,#fffbeb,#fef3c7); color:#c97316; }
.cpd-stat--green  .cpd-stat__strip { background:linear-gradient(90deg,#16a34a,#4ade80); }
.cpd-stat--green  .cpd-stat__icon  { background:linear-gradient(135deg,#f0fdf4,#dcfce7); color:#16a34a; }
.cpd-stat--red    .cpd-stat__strip { background:linear-gradient(90deg,#dc2626,#f87171); }
.cpd-stat--red    .cpd-stat__icon  { background:linear-gradient(135deg,#fff5f5,#fee2e2); color:#dc2626; }
.cpd-stat--purple .cpd-stat__strip { background:linear-gradient(90deg,#7c3aed,#a78bfa); }
.cpd-stat--purple .cpd-stat__icon  { background:linear-gradient(135deg,#f5f3ff,#ede9fe); color:#7c3aed; }

/* ── Main grid ── */
.cpd-grid { display:grid; grid-template-columns:1fr 370px; gap:22px; align-items:start; }
@media(max-width:1050px){ .cpd-grid { grid-template-columns:1fr; } }

.cpd-side { display:flex; flex-direction:column; gap:20px; }

/* ── Panel card ── */
.cpd-panel {
    background:#fff; border-radius:18px;
    box-shadow:0 2px 18px rgba(0,0,0,.07);
    border:1.5px solid #eef2f8;
    overflow:hidden;
}
.cpd-panel--wide { min-height:260px; }
.cpd-panel__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 22px;
    background:#fafbfc;
    border-bottom:1px solid #eef2f7;
}
.cpd-panel__title { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color:#0d3b5c; }
.cpd-panel__title-icon {
    width:32px; height:32px; border-radius:9px;
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.cpd-panel__title-icon--blue   { background:linear-gradient(135deg,#ebf8ff,#dbeafe); color:#1b6fa0; }
.cpd-panel__title-icon--teal   { background:linear-gradient(135deg,#e6fffa,#ccfbf1); color:#0d9488; }
.cpd-panel__title-icon--purple { background:linear-gradient(135deg,#f3e8ff,#ede9fe); color:#7c3aed; }

.cpd-link-btn {
    font-size:11.5px; font-weight:600; color:#1b6fa0;
    text-decoration:none; display:flex; align-items:center; gap:5px;
    padding:5px 12px; border-radius:20px; border:1.5px solid #ededed;
     transition:all .2s;
}
.cpd-link-btn:hover { background:#1b6fa0; color:#fff; border-color:#1b6fa0; text-decoration:none; }

/* ── Ticket list rows ── */
.cpd-ticket-list { padding:4px 0; }
.cpd-ticket-row {
    display:flex; align-items:center; gap:13px;
    padding:12px 22px;
    border-bottom:1px solid #f7fafc;
    text-decoration:none; color:inherit;
    transition:background .15s;
}
.cpd-ticket-row:last-child { border-bottom:none; }
.cpd-ticket-row:hover { background:#f8faff; text-decoration:none; }
.cpd-ticket-row__dot {
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
}
.cpd-ticket-row__dot--new     { background:#3b82f6; box-shadow:0 0 0 3px #dbeafe; }
.cpd-ticket-row__dot--process { background:#f59e0b; box-shadow:0 0 0 3px #fef3c7; }
.cpd-ticket-row__dot--solved  { background:#22c55e; box-shadow:0 0 0 3px #dcfce7; }
.cpd-ticket-row__main { flex:1; min-width:0; }
.cpd-ticket-row__title { font-size:12px; font-weight:500; color:#1a202c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpd-ticket-row__meta  { font-size:11px; color:#a0aec0; margin-top:2px; }
.cpd-ticket-row__sep   { margin:0 5px; }

/* ── Project rows ── */
.cpd-proj-list { padding:4px 0; }
.cpd-proj-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 20px;
    border-bottom:1px solid #f7fafc;
    transition:background .15s;
}
.cpd-proj-row:last-child { border-bottom:none; }
.cpd-proj-row:hover { background:#f8faff; }
.cpd-proj-row__icon {
    width:22px;
    display:flex; align-items:center; justify-content:center;
    color:#9aa8b7; font-size:16px; flex-shrink:0;
    opacity:1;
}
.cpd-proj-row__info { flex:1; min-width:0; }
.cpd-proj-row__title { font-size:12px; font-weight:500; color:#1a202c; }
.cpd-proj-row__sub { font-size:11px; color:#a0aec0; margin-top:2px; }

/* ── Invoice rows ── */
.cpd-inv-list { padding:4px 0; }
.cpd-inv-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 20px;
    border-bottom:1px solid #f7fafc;
    text-decoration:none; color:inherit;
    transition:background .15s;
}
.cpd-inv-row:last-child { border-bottom:none; }
.cpd-inv-row:hover { background:#f8faff; text-decoration:none; }
.cpd-inv-row__icon {
    width:22px;
    display:flex; align-items:center; justify-content:center;
    color:#9aa8b7; font-size:16px; flex-shrink:0;
    opacity:1;
}
.cpd-inv-row__info { flex:1; min-width:0; }
.cpd-inv-row__num    { font-size:12px; font-weight:500; color:#1a202c; }
.cpd-inv-row__amount { font-size:11px; color:#718096; margin-top:2px; }

/* ── Badges (cpd-badge) ── */
.cpd-badge {
    display:inline-flex; align-items:center;
    padding:3px 10px; border-radius:20px;
    font-size:11px; font-weight:500; white-space:nowrap;
}
.cpd-badge--new      { background:#dbeafe; color:#1d4ed8; }
.cpd-badge--process  { background:#fef3c7; color:#b45309; }
.cpd-badge--solved   { background:#dcfce7; color:#15803d; }
.cpd-badge--paid     { background:#dcfce7; color:#15803d; }
.cpd-badge--unpaid   { background:#fee2e2; color:#b91c1c; }
.cpd-badge--warning  { background:#fef3c7; color:#b45309; }
.cpd-badge--primary  { background:#dbeafe; color:#1d4ed8; }
.cpd-badge--info     { background:#e0f2fe; color:#0369a1; }
.cpd-badge--success  { background:#dcfce7; color:#15803d; }
.cpd-badge--danger   { background:#fee2e2; color:#b91c1c; }
.cpd-badge--secondary{ background:#f1f5f9; color:#64748b; }

/* ── Empty states ── */
.cpd-empty { text-align:center; padding:48px 24px; }
.cpd-empty--sm { padding:28px 16px; }
.cpd-empty__icon { font-size:36px; color:#cbd5e0; margin-bottom:10px; }
.cpd-empty p { color:#a0aec0; font-size:13px; margin:0 0 14px; }

.cpd-action-pill {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 18px; border-radius:30px;
    font-size:13px; font-weight:600;
    text-decoration:none; transition:all .2s;
}
.cpd-action-pill--blue { background:#1b6fa0; color:#fff; }
.cpd-action-pill--blue:hover { background:#155a82; color:#fff; text-decoration:none; }

/* ── Quick Actions bar ── */
.cpd-actions { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.cpd-actions--3 { grid-template-columns:repeat(3,1fr); }
@media(max-width:700px){ .cpd-actions { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cpd-actions--3 { grid-template-columns:repeat(3,1fr); } }

.cpd-action {
    background:#fff; border-radius:18px;
    padding:22px 14px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    text-decoration:none; color:#1a202c;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    border:1.5px solid #eef2f8;
    transition:all .22s cubic-bezier(.34,1.56,.64,1);
}
.cpd-action:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,.12); border-color:transparent; text-decoration:none; color:#1a202c; }
.cpd-action__icon {
    width:52px; height:52px; border-radius:15px;
    display:flex; align-items:center; justify-content:center;
    font-size:21px;
}
.cpd-action__icon--blue   { background:linear-gradient(135deg,#1b6fa0,#2ab7f7); color:#fff; }
.cpd-action__icon--teal   { background:linear-gradient(135deg,#0d9488,#34d399); color:#fff; }
.cpd-action__icon--purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; }
.cpd-action__icon--orange { background:linear-gradient(135deg,#c97316,#fbbf24); color:#fff; }
.cpd-action__lbl { font-size:12.5px; font-weight:600; color:#4a5568; }

/* ─── Alert strip ─── */
.cpd-alert {
    display:flex; align-items:center; gap:12px;
    padding:14px 22px; border-radius:16px;
    background:linear-gradient(135deg,#fff5f5,#fee2e2);
    border:1.5px solid #fecaca;
    color:#b91c1c;
}
.cpd-alert__icon { font-size:20px; flex-shrink:0; }
.cpd-alert__msg  { flex:1; font-size:13px; font-weight:600; }
.cpd-alert__sub  { font-size:11.5px; font-weight:400; color:#dc2626; margin-top:2px; }
.cpd-alert__btn  {
    display:inline-flex; align-items:center; gap:6px;
    padding:7px 16px; border-radius:20px;
    background:#dc2626; color:#fff;
    font-size:12px; font-weight:700;
    text-decoration:none; flex-shrink:0;
    transition:background .2s;
}
.cpd-alert__btn:hover { background:#b91c1c; color:#fff; text-decoration:none; }

/* ─── Mobile tweaks ─── */
@media(max-width:640px){
    .cpd-hero { padding:24px 22px 20px; border-radius:18px; }
    .cpd-hero__name { font-size:1.35rem; }
    .cpd-stats { gap:12px; }
    .cpd-stat__body { padding:14px 14px; gap:10px; }
    .cpd-stat__icon { width:40px; height:40px; font-size:17px; }
    .cpd-stat__num  { font-size:1.3rem; }
}
/* ─────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════════
   CPX — Client Portal Full Redesign  (prefix: cpx-*  cpd2-*)
   Inspired by modern SaaS dashboards (light lavender bg, clean sidebar)
═══════════════════════════════════════════════════════════════════ */

/* ── Layout wrapper ── */
.cpx-wrap {
    background:#eef1f8;
    padding:36px 0 72px;
    min-height:70vh;
}
.cpx-layout {
    display:grid;
    grid-template-columns:260px 1fr;
    gap:28px;
    align-items:start;
}
@media(max-width:991px){ .cpx-layout { grid-template-columns:1fr; } }

/* ── Sidebar ── */
.cpx-sidebar { position:sticky; top:80px; }
.cpx-scard {
    background:#fff;
    border-radius:20px;
    box-shadow:0 4px 28px rgba(0,0,0,.08);
    overflow:hidden;
}

/* Brand area */
.cpx-brand {
    display:flex; align-items:center; gap:10px;
    padding:22px 18px 18px;
    border-bottom:1px solid #f0f3f8;
}
.cpx-brand__logo {
    width:38px; height:38px; border-radius:10px;
    background:linear-gradient(135deg,#0d3b5c,#2ab7f7);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:#fff; flex-shrink:0;
}
.cpx-brand__name { font-size:15px; font-weight:800; color:#1a202c; flex:1; }
.cpx-brand__badge {
    font-size:10px; font-weight:700; padding:2px 8px; border-radius:20px;
    background:#eef1f8; color:#64748b;
}

/* Nav */
.cpx-nav { padding:10px 12px 6px; }
.cpx-nav__label {
    font-size:10px; font-weight:700; color:#a0aec0;
    text-transform:uppercase; letter-spacing:.08em;
    padding:12px 8px 5px;
}

.cpx-item {
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:12px;
    color:#4a5568; font-size:13.5px; font-weight:500;
    text-decoration:none; transition:all .18s;
    margin-bottom:3px; cursor:pointer; width:100%;
}
.cpx-item:hover { background:#f0f7ff; color:#1b6fa0; text-decoration:none; }

/* Active — gradient pill like reference */
.cpx-item--on {
    background:linear-gradient(135deg,#0d3b5c 0%,#1b6fa0 100%);
    color:#fff;
    font-weight:700;
    box-shadow:0 4px 14px rgba(27,111,160,.35);
    text-decoration:none;
}
.cpx-item--on:hover { color:#fff; background:linear-gradient(135deg,#0d3b5c,#1b6fa0); }
.cpx-item--on .cpx-item__ic { background:rgba(255,255,255,.2); color:#fff; }

.cpx-item__ic {
    width:30px; height:30px; border-radius:8px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    font-size:13px;
    background:#f0f3f8; color:#718096;
    transition:all .18s;
}
.cpx-item:hover .cpx-item__ic { background:#dbeafe; color:#1b6fa0; }

/* Pill badges */
.cpx-pill {
    margin-inline-start:auto; font-size:10px; font-weight:700;
    padding:2px 7px; border-radius:20px;
}
.cpx-pill--red   { background:#fee2e2; color:#dc2626; }
.cpx-pill--green { background:#d1fae5; color:#059669; }

/* Promo card */
.cpx-promo {
    margin:4px 12px 10px;
    background:linear-gradient(135deg,#0d3b5c 0%,#1b6fa0 100%);
    border-radius:16px; padding:20px 16px;
    text-align:center; position:relative; overflow:hidden;
}
.cpx-promo::before {
    content:''; position:absolute; width:100px; height:100px;
    border-radius:50%; background:rgba(255,255,255,.07);
    top:-30px; inset-inline-end:-20px; pointer-events:none;
}
.cpx-promo__icon { font-size:26px; color:rgba(255,255,255,.8); margin-bottom:8px; }
.cpx-promo__title { font-size:13.5px; font-weight:800; color:#fff; margin-bottom:5px; }
.cpx-promo__text { font-size:11.5px; color:rgba(255,255,255,.7); margin-bottom:14px; line-height:1.5; }
.cpx-promo__btn {
    display:inline-block; padding:8px 18px; border-radius:30px;
    background:#fff; color:#0d3b5c; font-size:12px; font-weight:700;
    text-decoration:none; transition:all .2s;
}
.cpx-promo__btn:hover { background:#ebf8ff; color:#0d3b5c; text-decoration:none; }

/* Logout */
.cpx-logout {
    display:flex; align-items:center; gap:10px;
    width:100%; padding:10px 12px; border-radius:12px;
    background:none; border:none; font-family:inherit;
    font-size:13.5px; font-weight:500; color:#718096;
    cursor:pointer; transition:all .18s; text-align:start;
    margin-bottom:4px;
}
.cpx-logout:hover { background:#fee2e2; color:#dc2626; }
.cpx-logout:hover .cpx-item__ic { background:#dc2626; color:#fff; }

/* Main content */
.cpx-main { min-width:0; }

/* ── Dashboard v2 (cpd2-*) ── */

.cpd2-root { display:flex; flex-direction:column; gap:22px; }

/* Title row */
.cpd2-toprow {
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:12px;
}
.cpd2-page-title { font-size:1.6rem; font-weight:800; color:#1a202c; margin:0 0 3px; }
.cpd2-page-date  { font-size:12.5px; color:#94a3b8; }

/* New ticket button */
.cpd2-new-btn {
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 20px; border-radius:30px;
    background:linear-gradient(135deg,#0d3b5c,#1b6fa0);
    color:#fff; font-size:13px; font-weight:700;
    text-decoration:none; box-shadow:0 4px 14px rgba(27,111,160,.35);
    transition:all .2s;
}
.cpd2-new-btn:hover { opacity:.9; color:#fff; text-decoration:none; transform:translateY(-1px); }
.cpd2-new-btn--sm { padding:8px 16px; font-size:12px; }

/* Stat cards */
.cpd2-stats {
    display:grid; grid-template-columns:repeat(4,1fr); gap:16px;
}
@media(max-width:900px){ .cpd2-stats { grid-template-columns:repeat(2,1fr); } }
@media(max-width:480px){ .cpd2-stats { grid-template-columns:1fr 1fr; } }

.cpd2-stat {
    background:#fff; border-radius:18px;
    padding:20px 22px;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
    border:1px solid #f0f3f8;
    transition:transform .2s, box-shadow .2s;
}
.cpd2-stat:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.1); }
.cpd2-stat__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.cpd2-stat__label { font-size:12px; font-weight:600; color:#94a3b8; }
.cpd2-stat__ico {
    width:34px; height:34px; border-radius:10px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px;
}
.cpd2-stat__ico--blue   { background:#dbeafe; color:#1d4ed8; }
.cpd2-stat__ico--orange { background:#fef3c7; color:#d97706; }
.cpd2-stat__ico--green  { background:#d1fae5; color:#059669; }
.cpd2-stat__ico--red    { background:#fee2e2; color:#dc2626; }
.cpd2-stat__num  { font-size:2rem; font-weight:800; color:#1a202c; line-height:1; margin-bottom:8px; }
.cpd2-stat__sub  { font-size:11.5px; color:#94a3b8; }
.cpd2-stat__sub--warn { color:#d97706; }
.cpd2-stat__sub--good { color:#059669; }

/* Main grid */
.cpd2-grid {
    display:grid;
    grid-template-columns:1fr 340px;
    gap:20px; align-items:start;
}
@media(max-width:1100px){ .cpd2-grid { grid-template-columns:1fr; } }
.cpd2-aside { display:flex; flex-direction:column; gap:20px; }

/* Card */
.cpd2-card {
    background:#fff; border-radius:18px;
    box-shadow:0 2px 16px rgba(0,0,0,.06);
    border:1px solid #f0f3f8;
    overflow:hidden;
}
.cpd2-card--wide { min-height:240px; }
.cpd2-card__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px; border-bottom:1px solid #f5f7fb;
}
.cpd2-card__htitle {
    display:flex; align-items:center; gap:9px;
    font-size:14.5px; font-weight:700; color:#1a202c;
}
.cpd2-card__hico {
    width:28px; height:28px; border-radius:7px;
    display:flex; align-items:center; justify-content:center; font-size:12px;
}
.cpd2-card__hico--blue   { background:#dbeafe; color:#1d4ed8; }
.cpd2-card__hico--teal   { background:#ccfbf1; color:#0d9488; }
.cpd2-card__hico--purple { background:#ede9fe; color:#7c3aed; }
.cpd2-count {
    font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px;
    background:#f0f3f8; color:#64748b;
}
.cpd2-viewall {
    font-size:12px; font-weight:600; color:#1b6fa0;
    text-decoration:none; display:flex; align-items:center; gap:4px;
    padding:5px 10px; border-radius:20px; border:1px solid #dbeafe;
    background:#f0f7ff; transition:all .18s;
}
.cpd2-viewall:hover { background:#1b6fa0; color:#fff; border-color:#1b6fa0; text-decoration:none; }

/* Ticket list */
.cpd2-tlist {}
.cpd2-trow {
    display:flex; align-items:center; gap:12px;
    padding:13px 20px; border-bottom:1px solid #f8fafb;
    text-decoration:none; color:inherit; transition:background .15s;
}
.cpd2-trow:last-child { border-bottom:none; }
.cpd2-trow:hover { background:#f8fbff; text-decoration:none; }
.cpd2-trow__dot {
    width:9px; height:9px; border-radius:50%; flex-shrink:0;
}
.cpd2-trow__dot--blue   { background:#3b82f6; box-shadow:0 0 0 3px #dbeafe; }
.cpd2-trow__dot--orange { background:#f59e0b; box-shadow:0 0 0 3px #fef3c7; }
.cpd2-trow__dot--green  { background:#22c55e; box-shadow:0 0 0 3px #dcfce7; }
.cpd2-trow__body { flex:1; min-width:0; }
.cpd2-trow__title { font-size:13.5px; font-weight:600; color:#1a202c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpd2-trow__meta  { font-size:11.5px; color:#94a3b8; margin-top:2px; }

/* Project list */
.cpd2-plist {}
.cpd2-prow {
    display:flex; align-items:center; gap:11px;
    padding:12px 18px; border-bottom:1px solid #f8fafb;
}
.cpd2-prow:last-child { border-bottom:none; }
.cpd2-prow__ico {
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:#ccfbf1; color:#0d9488;
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.cpd2-prow__info { flex:1; min-width:0; }
.cpd2-prow__name { font-size:13px; font-weight:600; color:#1a202c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpd2-prow__sub  { font-size:11px; color:#94a3b8; margin-top:1px; }

/* Invoice list */
.cpd2-ilist {}
.cpd2-irow {
    display:flex; align-items:center; gap:11px;
    padding:12px 18px; border-bottom:1px solid #f8fafb;
}
.cpd2-irow:last-child { border-bottom:none; }
.cpd2-irow__ico {
    width:34px; height:34px; border-radius:9px; flex-shrink:0;
    background:#ede9fe; color:#7c3aed;
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.cpd2-irow__info { flex:1; min-width:0; }
.cpd2-irow__num  { font-size:13px; font-weight:700; color:#1a202c; }
.cpd2-irow__amt  { font-size:11px; color:#94a3b8; margin-top:1px; }

/* Badges */
.cpd2-badge {
    display:inline-flex; align-items:center;
    padding:3px 10px; border-radius:20px;
    font-size:11px; font-weight:700; white-space:nowrap;
}
.cpd2-badge--blue     { background:#dbeafe; color:#1d4ed8; }
.cpd2-badge--orange   { background:#fef3c7; color:#b45309; }
.cpd2-badge--green    { background:#d1fae5; color:#059669; }
.cpd2-badge--red      { background:#fee2e2; color:#b91c1c; }
.cpd2-badge--warning  { background:#fef3c7; color:#b45309; }
.cpd2-badge--primary  { background:#dbeafe; color:#1d4ed8; }
.cpd2-badge--info     { background:#e0f2fe; color:#0369a1; }
.cpd2-badge--success  { background:#d1fae5; color:#059669; }
.cpd2-badge--danger   { background:#fee2e2; color:#b91c1c; }
.cpd2-badge--secondary{ background:#f1f5f9; color:#64748b; }

/* Empty state */
.cpd2-empty { text-align:center; padding:44px 20px; }
.cpd2-empty--sm { padding:24px 16px; }
.cpd2-empty__ico { font-size:32px; color:#cbd5e0; margin-bottom:10px; }
.cpd2-empty p { color:#94a3b8; font-size:13px; margin:0 0 14px; }

/* Quick actions */
.cpd2-actions {
    display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
}
@media(max-width:640px){ .cpd2-actions { grid-template-columns:repeat(2,1fr); } }
.cpd2-act {
    background:#fff; border-radius:18px;
    padding:22px 14px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:11px;
    text-decoration:none; color:#1a202c;
    box-shadow:0 2px 12px rgba(0,0,0,.06);
    border:1px solid #f0f3f8;
    transition:all .2s;
}
.cpd2-act:hover { transform:translateY(-4px); box-shadow:0 10px 30px rgba(0,0,0,.1); text-decoration:none; color:#1a202c; }
.cpd2-act__ico {
    width:50px; height:50px; border-radius:14px;
    display:flex; align-items:center; justify-content:center; font-size:20px;
}
.cpd2-act__ico--blue   { background:linear-gradient(135deg,#1b6fa0,#2ab7f7); color:#fff; }
.cpd2-act__ico--teal   { background:linear-gradient(135deg,#0d9488,#34d399); color:#fff; }
.cpd2-act__ico--purple { background:linear-gradient(135deg,#7c3aed,#a78bfa); color:#fff; }
.cpd2-act__ico--orange { background:linear-gradient(135deg,#c97316,#fbbf24); color:#fff; }
.cpd2-act__lbl { font-size:13px; font-weight:600; color:#4a5568; }
/* ════════════════════════════════════════════════════════════════ */

/* â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ
   Web Page Custom Styles — extracted from blade templates
   â•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گâ•گ */

/* ── Blog cards (welcome & blogs listing) ── */
.bcard{background:#fff;border-radius:10px;border:1px solid rgba(40,118,171,.15);box-shadow:0 2px 16px rgba(40,118,171,.07);overflow:hidden;display:flex;flex-direction:column;transition:box-shadow .3s,transform .3s}
.bcard:hover{box-shadow:0 10px 32px rgba(40,118,171,.25);transform:translateY(-6px)}
.bcard__img{display:block;width:100%;height:220px;overflow:hidden}
.bcard__img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.bcard:hover .bcard__img img{transform:scale(1.07)}
.bcard__body{padding:24px 22px 20px;flex:1;display:flex;flex-direction:column;text-align:center;background:#fff;transition:background .35s}
.bcard:hover .bcard__body{background:var(--default-color)}
.bcard__title{font-size:17px;font-weight:700;color:var(--default-color);line-height:1.45;margin-bottom:12px}
.bcard__title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .35s}
.bcard:hover .bcard__title a{color:#fff}
.bcard__short{color:var(--secondary-color);font-size:14px;line-height:1.75;flex:1;margin-bottom:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;transition:color .35s}
.bcard:hover .bcard__short{color:rgba(255,255,255,.80)}
.bcard__foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px;padding-top:16px;border-top:1px solid rgba(40,118,171,.12);transition:border-color .35s}
.bcard:hover .bcard__foot{border-top-color:rgba(255,255,255,.18)}
.bcard__readmore{font-size:14px;font-weight:700;color:var(--secondary-color);transition:color .35s}
.bcard:hover .bcard__readmore{color:#fff}
.bcard__arrow{display:flex;align-items:center;justify-content:center;width:36px;height:36px;background:var(--default-color);color:#fff;border-radius:6px;text-decoration:none;flex-shrink:0;transition:background .35s,color .35s}
.bcard:hover .bcard__arrow{background:#fff;color:var(--default-color)}

/* ── View More button ── */
.btn-viewmore{display:inline-flex;align-items:center;gap:8px;padding:10px 28px;background:var(--default-color);color:#fff;border-radius:50px;font-size:15px;font-weight:600;text-decoration:none;border:2px solid var(--default-color);transition:background .3s,color .3s,box-shadow .3s}
.btn-viewmore:hover{background:transparent;color:var(--default-color);box-shadow:0 4px 18px rgba(40,118,171,.25)}
.btn-viewmore i{font-size:13px;transition:transform .3s}
.btn-viewmore:hover i{transform:rotate(90deg)}

/* ── Blog detail page ── */
#rdProgress{position:fixed;top:0;inset-inline-start:0;height:3px;width:0%;background:linear-gradient(90deg,#2876AB,#5bb8f5);z-index:9999;transition:width .1s linear}
.bpg{background:#eef2f7;padding:44px 0 90px;min-height:60vh}
.bgrid{display:grid;grid-template-columns:4fr 1fr;gap:26px;align-items:start}
.ba{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 30px rgba(0,0,0,.08)}
.ba-img{position:relative;height:460px;overflow:hidden}
.ba-img img{width:100%;object-fit:cover;transition:transform 8s ease;display:block}
.ba:hover .ba-img img{transform:scale(1.04)}
.ba-img::after{content:'';position:absolute;inset:auto 0 0;height:160px;background:linear-gradient(to top,#fff,transparent)}
.ba-badge{position:absolute;top:20px;inset-inline-start:20px;background:#2876AB;color:#fff;font-size:12px;font-weight:700;padding:6px 14px;border-radius:20px;letter-spacing:.4px;box-shadow:0 4px 14px rgba(40,118,171,.45);display:inline-flex;align-items:center;gap:6px}
.ba-body{padding:30px 38px 44px}
.ba-title{font-size:clamp(20px,2.4vw,27px);font-weight:800;color:#111827;line-height:1.45;margin:0 0 20px}
.ba-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;background:linear-gradient(135deg,#f0f7ff,#f8faff);border:1px solid #dbeafe;border-radius:12px;padding:14px 20px;margin-bottom:30px}
.ba-meta-item{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b}
.ba-meta-icon{width:30px;height:30px;border-radius:8px;background:#dbeafe;color:#2876AB;display:flex;align-items:center;justify-content:center;font-size:12px;flex-shrink:0}
.ba-meta-sep{color:#cbd5e1;font-size:20px;font-weight:300}
.ba-divider{height:1px;background:linear-gradient(90deg,transparent,#e2e8f0 20%,#e2e8f0 80%,transparent);margin:0 0 30px}
.ba-content{font-size:16px;line-height:2.15;color:#374151}
.ba-content p{margin-bottom:20px}
.ba-content h2,.ba-content h3{color:#111827;font-weight:700;margin:32px 0 14px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}
.ba-content img{max-width:100%;border-radius:12px;margin:18px 0;height:auto;display:block;box-shadow:0 4px 20px rgba(0,0,0,.1)}
.ba-content a{color:#2876AB;text-decoration:underline;text-underline-offset:3px}
.ba-content ul,.ba-content ol{padding-inline-start:24px;margin-bottom:20px}
.ba-content li{margin-bottom:8px}
.ba-content blockquote{border-inline-start:4px solid #2876AB;background:linear-gradient(135deg,#f0f7ff,#f8faff);padding:18px 24px;border-radius:0 12px 12px 0;color:#4b5563;font-style:italic;margin:26px 0;font-size:16.5px;line-height:1.9}
.ba-content strong{color:#1e293b}
.ba-content code{background:#f1f5f9;padding:2px 7px;border-radius:5px;font-size:14px;color:#e11d48}
.bsb{display:flex;flex-direction:column;gap:20px}
.sbc{background:#fff;border-radius:14px;box-shadow:0 2px 16px rgba(0,0,0,.06);overflow:hidden;border:1px solid rgba(0,0,0,.04)}
.sbc-head{display:flex;align-items:center;gap:10px;padding:15px 18px;background:linear-gradient(135deg,#f8faff,#fff);border-bottom:1px solid #f0f4f9}
.sbc-head-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#2876AB,#5bb8f5);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0;box-shadow:0 3px 10px rgba(40,118,171,.3)}
.sbc-head h5{font-size:14px;font-weight:700;color:#1e293b;margin:0}
.sbc-body{padding:16px 18px}
.sb-sf{display:flex;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:.25s}
.sb-sf:focus-within{border-color:#2876AB;box-shadow:0 0 0 3px rgba(40,118,171,.12)}
.sb-sf input{flex:1;border:none;outline:none;padding:10px 14px;font-size:13.5px;color:#374151;background:transparent;min-width:0}
.sb-sf button{background:#2876AB;color:#fff;border:none;padding:0 15px;cursor:pointer;font-size:13px;transition:.2s}
.sb-sf button:hover{background:#1a5a8a}
.sb-intro{font-size:13.5px;line-height:1.95;color:#4b5563;font-style:italic;border-inline-start:3px solid #2876AB;padding-inline-start:14px;margin:0;background:linear-gradient(135deg,#f0f7ff 0%,transparent 100%);border-radius:0 8px 8px 0;padding-block:10px}
.sb-rel-list{display:flex;flex-direction:column;gap:13px}
.sb-rel-a{display:flex;gap:11px;align-items:center;text-decoration:none;color:inherit;padding:8px;border-radius:10px;transition:.22s;margin:-8px}
.sb-rel-a:hover{background:#f0f7ff;color:inherit}
.sb-rel-thumb{width:62px;height:54px;border-radius:8px;object-fit:cover;flex-shrink:0;border:2px solid #e8edf4}
.sb-rel-info{flex:1;min-width:0}
.sb-rel-title{font-size:12.5px;font-weight:600;color:#1e293b;line-height:1.4;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.sb-rel-a:hover .sb-rel-title{color:#2876AB}
.sb-rel-date{font-size:11px;color:#94a3b8;display:flex;align-items:center;gap:4px}
.sb-sg{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.sb-sbtn{display:flex;align-items:center;justify-content:center;gap:7px;padding:9px 8px;border-radius:10px;color:#fff !important;font-size:12.5px;font-weight:700;text-decoration:none !important;border:none;cursor:pointer;transition:.22s;box-shadow:0 3px 10px rgba(0,0,0,.15)}
.sb-sbtn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.2);color:#fff !important}
.sb-fb{background:linear-gradient(135deg,#1877f2,#4da3ff)}
.sb-tw{background:linear-gradient(135deg,#14171a,#3d4450)}
.sb-wa{background:linear-gradient(135deg,#25d366,#52e48a)}
.sb-li{background:linear-gradient(135deg,#0a66c2,#4da3ff)}
.sb-urlbox{display:flex;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;transition:.25s}
.sb-urlbox:focus-within{border-color:#2876AB;box-shadow:0 0 0 3px rgba(40,118,171,.12)}
.sb-urlbox input{flex:1;border:none;outline:none;padding:9px 12px;font-size:12px;color:#64748b;background:#f8fafc;min-width:0;direction:ltr}
.sb-cpbtn{background:#2876AB;color:#fff;border:none;padding:0 15px;font-size:12.5px;font-weight:700;cursor:pointer;white-space:nowrap;transition:.22s;display:flex;align-items:center;gap:5px}
.sb-cpbtn:hover{background:#1a5a8a}
.sb-cpbtn.done{background:#059669}
@media(max-width:991px){.bgrid{grid-template-columns:1fr}.ba-img{height:260px}.ba-body{padding:20px 20px 32px}.sb-sg{grid-template-columns:repeat(4,1fr)}}
@media(max-width:575px){.ba-img{height:200px}.sb-sg{grid-template-columns:1fr 1fr}}

/* ── Service page: domain search ── */
.domain-hero-search{background:radial-gradient(circle at 0% 100%,transparent 219px,rgba(255,255,255,.08) 220px,rgba(255,255,255,.08) 221px,transparent 222px),radial-gradient(circle at 0% 100%,transparent 339px,rgba(255,255,255,.06) 340px,rgba(255,255,255,.06) 341px,transparent 342px),radial-gradient(circle at 0% 100%,transparent 469px,rgba(255,255,255,.045) 470px,rgba(255,255,255,.045) 471px,transparent 472px),radial-gradient(circle at 100% 0%,transparent 279px,rgba(255,255,255,.06) 280px,rgba(255,255,255,.06) 281px,transparent 282px),radial-gradient(circle at 100% 0%,transparent 419px,rgba(255,255,255,.045) 420px,rgba(255,255,255,.045) 421px,transparent 422px),var(--default-color);padding:64px 0 56px;position:relative;overflow:hidden;color:rgba(255,255,255,.85)}
.dhs-title{color:#fff;font-size:2rem;font-weight:800;text-align:center;margin-bottom:10px;line-height:1.3}
.dhs-sub{color:rgba(255,255,255,.72);font-size:15px;text-align:center;margin-bottom:32px}
.dhs-box{background:#fff;border-radius:18px;padding:28px 28px 24px;box-shadow:0 16px 60px rgba(0,0,0,.22);max-width:840px;margin:0 auto}
.dhs-input-row{display:flex;gap:10px;align-items:stretch}
.dhs-input{flex:1;border:2px solid #e2e8f0;border-radius:12px;padding:13px 18px;font-size:15px;outline:none;transition:border-color .2s;direction:ltr;font-family:inherit}
.dhs-input:focus{border-color:var(--default-color)}
.dhs-btn{background:var(--default-color);color:#fff;border:none;border-radius:12px;padding:13px 26px;font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:7px;transition:opacity .18s,transform .18s;font-family:inherit}
.dhs-btn:hover{opacity:.88;transform:translateY(-1px)}
.dhs-btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.dhs-btn .ph-spinner{animation:spin .8s linear infinite}
.dhs-tlds{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}
.dhs-tld{font-size:12px;font-weight:600;background:#f1f5f9;color:#4a5568;border-radius:50px;padding:4px 12px;cursor:pointer;border:1.5px solid transparent;transition:all .15s;direction:ltr}
.dhs-tld:hover,.dhs-tld.active{background:var(--default-color);color:#fff;border-color:var(--default-color)}
.dhs-tld-hint{font-size:11.5px;color:#94a3b8;align-self:center;flex-shrink:0}
#dhs_results{margin-top:16px}
.dhs-result-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:18px 20px;border-radius:14px;margin-bottom:12px;border:1.5px solid #e2e8f0;background:#fff;transition:box-shadow .15s,transform .15s}
.dhs-result-row.available{border-color:#9ae6b4;background:linear-gradient(135deg,#f0fff4,#f8fffb)}
.dhs-result-row.taken{border-color:#fed7d7;background:#fff5f5}
.dhs-result-row.selected{border-color:var(--default-color);box-shadow:0 0 0 3px rgba(40,118,171,.15)}
.dhs-result-row:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(32,105,149,.08)}
.dhs-result-main{min-width:0;grid-column:1}
.dhs-result-head{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:12px;text-align:right}
.dhs-domain-name{font-weight:900;font-size:18px;color:#102033;direction:ltr}
.dhs-badge{font-size:11px;font-weight:800;border-radius:50px;padding:4px 11px;margin-inline-start:0}
.dhs-badge.avail{background:#c6f6d5;color:#276749}
.dhs-badge.taken{background:#fed7d7;color:#9b2c2c}
.dhs-badge.duration{background:#edf7ff;color:#0f5583}
.dhs-badge.premium{background:#fff3cd;color:#946200}
.dhs-price-stack{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;min-width:0;text-align:right}
.dhs-price,.dhs-renewal-price{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:900;color:var(--default-color);line-height:1.2;background:rgba(255,255,255,.72);border:1px solid rgba(39,103,73,.12);border-radius:10px;padding:8px 12px;text-align:inherit}
.dhs-price{font-size:15px;color:#0f5583;background:#fff;border-color:rgba(15,85,131,.18);box-shadow:0 6px 16px rgba(15,85,131,.07);padding:9px 15px}
.dhs-price small,.dhs-renewal-price small{font-size:10px;font-weight:800;color:#718096;white-space:nowrap}
.dhs-price small{color:#4f6f86}
.dhs-renewal-price{color:#8a9aaa;font-size:10px;font-weight:400;opacity:.82;background:transparent;border-color:transparent;padding:0;box-shadow:none}
.dhs-renewal-price small{font-size:10px;font-weight:600;color:#8a9aaa}
.dhs-result-actions{grid-column:2;justify-self:end;display:flex;align-items:center;gap:12px;flex-direction:row-reverse}
.dhs-select-btn{background:var(--default-color);color:#fff;border:none;border-radius:10px;padding:12px 28px;font-size:13px;font-weight:800;cursor:pointer;font-family:inherit;transition:opacity .15s,transform .15s;white-space:nowrap;min-width:132px}
.dhs-select-btn:hover{opacity:.85}
.dhs-select-btn.selected-state{background:#276749}
.dhs-years-mini{position:relative;color:#718096;z-index:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dhs-years-toggle{height:30px;border:1px solid rgba(15,85,131,.12);background:rgba(255,255,255,.7);color:#7890a4;border-radius:50px;font-size:11px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 15px rgba(15,85,131,.04);padding:0 11px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.dhs-years-toggle:hover,.dhs-years-mini.is-open .dhs-years-toggle{background:#fff;color:var(--default-color);border-color:rgba(15,85,131,.28)}
.dhs-years-controls{display:none;align-items:center;gap:7px;flex-wrap:wrap;direction:rtl}
.dhs-years-mini.is-open .dhs-years-controls{display:flex}
.dhs-years-select{border:1px solid #dbe7ef;border-radius:8px;padding:6px 8px;background:#fff;color:#2d3748;font-size:11px;font-weight:800;min-width:86px}
.dhs-years-total{color:#4f6f86;font-size:10px;font-weight:700;white-space:nowrap;line-height:1.5;opacity:.9}
.dhs-cta-bar{display:none;align-items:center;justify-content:space-between;gap:14px;margin-top:16px;padding:16px 20px;background:linear-gradient(135deg,#e6f4ea,#f0fff4);border:1.5px solid #9ae6b4;border-radius:14px;flex-wrap:wrap}
.dhs-cta-domain{font-weight:800;color:#276749;font-size:15px;direction:ltr}
.dhs-cta-price{font-size:18px;color:#0f5583;margin-top:4px;font-weight:900;line-height:1.2}
.dhs-cta-btn{background:var(--default-color);color:#fff;border-radius:50px;padding:11px 28px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px;transition:opacity .18s,transform .18s}
.dhs-cta-btn:hover{color:#fff;opacity:.88;transform:translateY(-1px)}
.dhs-toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);color:#fff;padding:12px 24px;border-radius:50px;font-size:14px;font-weight:600;font-family:inherit;box-shadow:0 8px 32px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center;gap:8px;z-index:99999;max-width:calc(100vw - 32px);white-space:normal;text-align:center;line-height:1.5;animation:dhsToastIn .2s ease}
.dhs-toast--error{background:#c53030}
.dhs-toast--success{background:#276749}
@keyframes dhsToastIn{from{opacity:0;transform:translateX(-50%) scale(.96)}to{opacity:1;transform:translateX(-50%) scale(1)}}
@media(max-width:600px){.dhs-title{font-size:1.4rem}.dhs-input-row{flex-direction:column}.dhs-btn{justify-content:center}}
@media(max-width:767px){.dhs-result-row{grid-template-columns:1fr;text-align:center}.dhs-result-main,.dhs-result-actions{grid-column:1}.dhs-result-head,.dhs-price-stack{justify-content:center}.dhs-result-actions{justify-self:center;flex-direction:column-reverse}.domain-result-row{grid-template-columns:1fr;text-align:center}.domain-result-row>div:first-child{justify-self:center}.dr-price-stack{justify-self:stretch;min-width:0}.domain-preselect-banner{grid-template-columns:1fr}.domain-preselect-main{justify-content:center;text-align:center;flex-direction:column}.domain-preselect-actions{align-items:center}.domain-preselect-prices{justify-content:center}.dhs-toast{top:50%;bottom:auto;width:max-content;transform:translate(-50%,-50%);border-radius:18px;padding:13px 18px}.dhs-toast i{font-size:18px}@keyframes dhsToastIn{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}}

/* ── Order page ── */
.order-page{background:#f7fafc;min-height:60vh}
.orders-closed-banner{display:flex;align-items:flex-start;gap:16px;background:linear-gradient(135deg,#fff7ed 0%,#ffedd5 100%);border:1.5px solid #fed7aa;border-inline-start:5px solid #f97316;border-radius:14px;padding:18px 20px;margin-bottom:20px}
.orders-closed-icon{flex-shrink:0;width:48px;height:48px;border-radius:50%;background:#f97316;color:#fff;display:flex;align-items:center;justify-content:center}
.orders-closed-text{display:flex;flex-direction:column;gap:4px}
.orders-closed-text strong{font-size:15px;font-weight:700;color:#9a3412}
.orders-closed-text span{font-size:13px;color:#c2410c;line-height:1.6}
.btn-submit-locked{opacity:.5 !important;cursor:not-allowed !important;pointer-events:none !important}
.order-client-card{background:#fff;border-radius:16px;padding:22px 26px;box-shadow:0 2px 12px rgba(0,0,0,.07);margin-bottom:20px;border-inline-start:4px solid var(--default-color)}
.order-client-card__label{font-size:11px;color:#a0aec0;font-weight:700;text-transform:uppercase;letter-spacing:.06em;margin-bottom:3px}
.order-client-card__val{font-weight:600;color:#2d3748;font-size:14px}
.order-form-card{background:#fff;border-radius:16px;box-shadow:0 2px 12px rgba(0,0,0,.07);overflow:hidden}
.order-form-card__header{background:var(--default-color);padding:20px 28px;color:#fff;display:flex;align-items:center;gap:12px}
.order-form-card__header i{font-size:22px;opacity:.85}
.order-form-card__header h5{margin:0;font-weight:700;font-size:1.05rem}
.order-form-card__body{padding:28px}
.pq-card{border-radius:16px;background:linear-gradient(135deg,#fffbf0 0%,#ffffff 100%);border:1.5px solid #f6d860;overflow:hidden;margin-bottom:20px;box-shadow:0 4px 20px rgba(246,179,0,.10)}
.pq-card__top{height:4px;background:linear-gradient(90deg,#f6ad55,#ed8936,#c05621)}
.pq-card__body{display:flex;align-items:flex-start;gap:18px;padding:22px 24px}
.pq-icon-wrap{width:56px;height:56px;flex-shrink:0;border-radius:16px;background:linear-gradient(135deg,#feebc8,#fbd38d);display:flex;align-items:center;justify-content:center;font-size:26px}
.pq-title{font-size:15px;font-weight:800;color:#92400e;margin:0 0 8px;line-height:1.4}
.pq-desc{font-size:13.5px;color:#4a5568;line-height:1.85;margin:0 0 14px}
.pq-steps-row{display:flex;flex-wrap:wrap;gap:7px}
.pq-step{display:inline-flex;align-items:center;gap:5px;background:rgba(255,255,255,.85);border:1px solid #fbd38d;border-radius:50px;padding:4px 12px;font-size:12px;font-weight:600;color:#744210}
.pricing-banner--package{background:#f0fff4;border:1.5px solid #9ae6b4;border-radius:12px;padding:18px 20px;margin-bottom:20px;display:flex;align-items:flex-start;gap:14px}
.pricing-banner__icon{font-size:26px;flex-shrink:0;margin-top:2px}
.pricing-banner__title{font-weight:700;font-size:14px;margin-bottom:6px}
.pricing-banner__price-tag{display:inline-flex;align-items:center;gap:6px;background:var(--default-color);color:#fff;border-radius:50px;padding:5px 16px;font-weight:700;font-size:15px;margin-top:10px}
.order-field label{font-weight:600;font-size:13px;color:#4a5568;margin-bottom:6px;display:block}
.order-field{margin-bottom:20px}
.order-field .form-control,.order-field .form-select{border-radius:10px;border:1.5px solid #e2e8f0;font-size:14px;padding:10px 14px;transition:border-color .2s}
.order-field .form-control:focus,.order-field .form-select:focus{border-color:var(--default-color);box-shadow:none}
.domain-actions{display:flex;gap:10px;flex-wrap:wrap}
.domain-action-btn{flex:1;min-width:130px;border:2px solid #e2e8f0;border-radius:12px;padding:14px 12px;cursor:pointer;text-align:center;transition:all .2s;display:flex;flex-direction:column;align-items:center;gap:4px;background:#fff}
.domain-action-btn:hover{border-color:var(--default-color);background:#f7faff}
.domain-action-btn.active{border-color:var(--default-color);background:#f0f7ff}
.da-icon{font-size:22px}
.da-title{font-size:13px;font-weight:700;color:#2d3748}
.da-sub{font-size:11px;color:#a0aec0}
.domain-result-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:22px;padding:18px 20px;border-radius:14px;margin-bottom:12px;border:1.5px solid #e2e8f0;cursor:pointer;transition:box-shadow .15s,transform .15s;background:#fff}
.domain-result-row.available{border-color:#9ae6b4;background:linear-gradient(135deg,#f0fff4,#f8fffb)}
.domain-result-row.taken{border-color:#fed7d7;background:#fff5f5;opacity:.7;cursor:default}
.domain-result-row.selected{border-color:#38a169;background:linear-gradient(135deg,#e6ffef,#f4fff8);box-shadow:0 0 0 3px rgba(56,161,105,.18)}
.domain-result-row.selected .dr-select-btn{background:#276749}
.domain-result-row:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(32,105,149,.08)}
.dr-main{min-width:0}
.dr-head{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:12px;text-align:right}
.dr-name{font-weight:900;font-size:18px;color:#102033;direction:ltr}
.dr-price-stack{display:flex;align-items:center;justify-content:flex-start;gap:10px;flex-wrap:wrap;min-width:0;text-align:right}
.dr-price{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:900;color:#0f5583;line-height:1.2;background:#fff;border:1px solid rgba(15,85,131,.18);border-radius:10px;padding:9px 15px;text-align:inherit;box-shadow:0 6px 16px rgba(15,85,131,.07)}
.dr-renewal-price{display:inline-flex;align-items:center;color:#8a9aaa;font-size:10px;font-weight:400;opacity:.82;background:transparent;border:0;padding:0;box-shadow:none}
.dr-badge{font-size:11px;font-weight:800;border-radius:50px;padding:4px 11px}
.dr-badge.avail{background:#c6f6d5;color:#276749}
.dr-badge.taken{background:#fed7d7;color:#c53030}
.dr-badge.duration{background:#edf7ff;color:#0f5583}
.dr-badge.premium{background:#fff3cd;color:#946200}
.dr-actions{justify-self:end;display:flex;align-items:center;gap:12px;flex-direction:row-reverse;flex-wrap:wrap}
.dr-select-btn{font-size:13px;font-weight:800;padding:12px 28px;border-radius:10px;border:none;cursor:pointer;background:var(--default-color);color:#fff;white-space:nowrap;min-width:132px}
.dr-years-mini{position:relative;color:#718096;z-index:2;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.dr-years-toggle{height:30px;border:1px solid rgba(15,85,131,.12);background:rgba(255,255,255,.7);color:#7890a4;border-radius:50px;font-size:11px;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 15px rgba(15,85,131,.04);padding:0 11px;white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.dr-years-toggle:hover,.dr-years-mini.is-open .dr-years-toggle{background:#fff;color:var(--default-color);border-color:rgba(15,85,131,.28)}
.dr-years-controls{display:none;align-items:center;gap:7px;flex-wrap:wrap;direction:rtl}
.dr-years-mini.is-open .dr-years-controls{display:flex}
.dr-years-select{border:1px solid #dbe7ef;border-radius:8px;padding:6px 8px;background:#fff;color:#2d3748;font-size:11px;font-weight:800;min-width:86px}
.dr-years-total{color:#4f6f86;font-size:10px;font-weight:700;white-space:nowrap;line-height:1.5;opacity:.9}
.domain-years-wrap{margin-top:12px;padding:12px 14px;border:1.5px solid #d9edf7;background:#f7fbff;border-radius:12px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.domain-years-wrap label{margin:0;color:var(--default-color);font-size:13px;font-weight:800}
.domain-years-select{border:1.5px solid #d5e3ef;border-radius:10px;padding:8px 12px;color:#1a202c;font-weight:800;background:#fff;min-width:100px}
.domain-years-total{margin-inline-start:auto;color:#1a202c;font-size:13px;font-weight:800}
.domain-preselect-banner{display:none;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:42px;padding:18px 26px;margin-bottom:20px;background:linear-gradient(135deg,#f0fff4,#f8fffb);border:1.5px solid #9ae6b4;border-radius:14px}
.domain-preselect-main{min-width:0;width:100%;justify-self:end;text-align:right}
.domain-preselect-icon-wrap{justify-self:end;grid-column:1}
.domain-preselect-main{grid-column:2;grid-row:1}
.domain-preselect-actions{grid-column:3;grid-row:1;justify-self:start}
.domain-preselect-icon{width:42px;height:42px;border-radius:12px;background:#276749;color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.domain-preselect-head{display:flex;align-items:center;justify-content:flex-start;gap:9px;flex-wrap:wrap;margin-bottom:4px}
.domain-preselect-name{font-weight:900;font-size:18px;color:#102033;direction:ltr;line-height:1.25}
.domain-preselect-duration{background:#edf7ff;color:#0f5583;border-radius:50px;padding:4px 11px;font-size:11px;font-weight:800;white-space:nowrap}
.domain-preselect-prices{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap;margin-top:0;direction:ltr}
.domain-preselect-current{display:inline-flex;align-items:center;background:transparent;border:0;border-radius:0;padding:0;color:#0f5583;font-size:17px;font-weight:900;line-height:1.1;box-shadow:none}
.domain-preselect-renewal{display:inline-flex;background:transparent;border:0;border-radius:0;padding:0;color:#8a9aaa;font-size:10px;font-weight:400;box-shadow:none}
.domain-preselect-actions{grid-column:3;grid-row:1;justify-self:start;display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:150px}
.domain-preselect-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-start}
.domain-preselect-status{background:#c6f6d5;color:#276749;border-radius:50px;padding:5px 14px;font-size:12px;font-weight:800;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.domain-preselect-change{font-size:11px;color:#0f5583;text-decoration:none;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:6px;background:#edf7ff;border:1px solid rgba(15,85,131,.12);border-radius:50px;padding:6px 14px;box-shadow:none}
.domain-preselect-change:hover{color:var(--default-color)}
.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:12px;margin-top:4px}
.pkg-card{border:2px solid #e2e8f0;border-radius:14px;padding:16px 14px;cursor:pointer;transition:all .2s;background:#fff;position:relative;text-align:center;user-select:none}
.pkg-card:hover{border-color:var(--default-color);background:#f7fbff;transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.pkg-card.selected{border-color:#38a169;background:#f0fff4;box-shadow:0 0 0 3px rgba(56,161,105,.18)}
.pkg-card.selected .pkg-card__name,.pkg-card.selected .pkg-card__currency,.pkg-card.selected .pkg-card__price{color:#276749}
.pkg-card.selected .pkg-card__check{background:#38a169}
.pkg-card__check{position:absolute;top:8px;inset-inline-end:8px;width:22px;height:22px;border-radius:50%;background:#38a169;color:#fff !important;font-size:12px;display:none;align-items:center;justify-content:center}
.pkg-card__check i{color:#fff !important}
.pkg-card.selected .pkg-card__check{display:flex}
.pkg-card__period{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.04em;padding:2px 9px;border-radius:20px;margin-bottom:8px;background:#ebf8ff;color:#2b6cb0}
.pkg-card__period.yearly{background:#ebf8ff;color:#2b6cb0}
.pkg-card__period.monthly{background:#f0fff4;color:#276749}
.pkg-card__period.one_time{background:#faf5ff;color:#553c9a}
.pkg-card__name{font-size:13px;font-weight:700;color:#2d3748;margin-bottom:10px;line-height:1.4}
.pkg-card__price-wrap{display:flex;align-items:baseline;justify-content:center;gap:2px}
.pkg-card__currency{font-size:13px;font-weight:700;color:var(--default-color)}
.pkg-card__price{font-size:24px;font-weight:800;color:var(--default-color);line-height:1}
.tz-ig{display:flex;border:1.5px solid #e2e8f0;border-radius:10px;overflow:hidden;background:#fff;transition:border-color .2s}
.tz-ig:focus-within{border-color:var(--default-color)}
.tz-ig input{flex:1;border:none;outline:none;padding:10px 14px;font-size:14px;background:transparent;min-width:0;color:#2d3748}
.tz-ig input::placeholder{color:#a0aec0}
.tz-ig .tz-addon{display:flex;align-items:center;padding:0 14px;background:#f8fafc;border-inline-start:1.5px solid #e2e8f0;font-weight:700;color:#718096;font-size:14px;flex-shrink:0}
.tz-ig .tz-btn{background:var(--default-color);color:#fff;border:none;padding:0 20px;font-weight:600;font-size:14px;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:opacity .2s;display:flex;align-items:center;gap:6px}
.tz-ig .tz-btn:hover{opacity:.9}
.order-guest-note{background:#fffaf0;border:1.5px solid #fbd38d;border-radius:14px;padding:18px 22px;margin-bottom:20px;display:flex;align-items:flex-start;gap:14px}
.order-guest-note > i{font-size:22px;color:#b7791f;flex-shrink:0;margin-top:2px}
.order-guest-note__title{font-weight:700;font-size:14px;color:#b7791f;margin-bottom:6px}
.order-guest-note__text{font-size:13px;color:#4a5568;line-height:1.6}
.order-submit{width:100%;padding:14px;border-radius:50px;border:none;background:var(--default-color);color:#fff;font-size:15px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:opacity .2s}
.order-submit:hover{opacity:.9}
.order-side-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.07);margin-bottom:20px;text-align:center}
.order-steps-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.order-step{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px solid #f0f4f8}
.order-step:last-child{border-bottom:none;padding-bottom:0}
.order-step__num{width:28px;height:28px;border-radius:50%;flex-shrink:0;background:var(--default-color);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}
.order-step__text{font-size:13px;color:#4a5568;line-height:1.5}
.order-step__text strong{color:#2d3748;display:block;margin-bottom:2px}
.order-field-err{color:#c53030;font-size:12px;margin-top:5px;display:none}
.order-field-err.show{display:block}

/* ── Hosting packages page ── */
.hosting-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:24px;margin-top:40px}
.hosting-card{background:#fff;border-radius:18px;border:2px solid #e2e8f0;padding:32px 28px;text-align:center;transition:all .25s;position:relative;overflow:hidden}
.hosting-card:hover{border-color:var(--default-color);box-shadow:0 12px 40px rgba(0,0,0,.10);transform:translateY(-4px)}
.hosting-card__top{height:4px;background:linear-gradient(90deg,var(--default-color),var(--secondary-color));position:absolute;top:0;inset-inline-start:0;inset-inline-end:0;opacity:0;transition:opacity .25s}
.hosting-card:hover .hosting-card__top{opacity:1}
.hosting-card__icon{width:64px;height:64px;border-radius:18px;background:linear-gradient(135deg,#e8f4fd,#d0eafb);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:28px}
.hosting-card__name{font-size:20px;font-weight:800;color:#1e293b;margin-bottom:10px}
.hosting-card__desc{font-size:13.5px;color:#64748b;line-height:1.8;margin-bottom:20px;min-height:60px}
.hosting-card__price{font-size:32px;font-weight:900;color:var(--default-color);margin-bottom:4px}
.hosting-card__price span{font-size:14px;font-weight:500;color:#94a3b8}
.hosting-card__btn{display:inline-block;margin-top:22px;padding:12px 36px;background:var(--default-color);color:#fff;border-radius:10px;font-weight:700;font-size:14px;text-decoration:none;transition:opacity .2s}
.hosting-card__btn:hover{opacity:.88;color:#fff}

/* ── Logout modal ── */
#logoutModal { position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; }
#logoutModal.lom-open { display:flex; }
.lom-overlay { position:absolute; inset:0; background:rgba(10,25,47,.55); backdrop-filter:blur(4px); animation:lomFade .2s ease; }
.lom-card { position:relative; z-index:1; background:#fff; border-radius:22px; padding:36px 32px 28px; width:100%; max-width:360px; margin:16px; box-shadow:0 20px 60px rgba(0,0,0,.25); text-align:center; animation:lomSlide .25s cubic-bezier(.34,1.56,.64,1); }
.lom-icon { width:64px; height:64px; border-radius:50%; margin:0 auto 18px; background:linear-gradient(135deg,#ef4444,#dc2626); display:flex; align-items:center; justify-content:center; font-size:24px; color:#fff; box-shadow:0 8px 24px rgba(220,38,38,.35); }
.lom-title { font-size:1.25rem; font-weight:800; color:#1a202c; margin:0 0 8px; }
.lom-msg   { font-size:14px; color:#718096; margin:0 0 26px; line-height:1.6; }
.lom-actions { display:flex; gap:10px; }
.lom-btn { flex:1; padding:12px 16px; border-radius:12px; border:none; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .18s; }
.lom-btn--cancel  { background:#f1f5f9; color:#64748b; }
.lom-btn--cancel:hover  { background:#e2e8f0; }
.lom-btn--confirm { background:linear-gradient(135deg,#ef4444,#dc2626); color:#fff; display:flex; align-items:center; justify-content:center; gap:7px; }
.lom-btn--confirm:hover { opacity:.88; transform:translateY(-1px); box-shadow:0 4px 14px rgba(220,38,38,.4); }
@keyframes lomFade  { from { opacity:0; } to { opacity:1; } }
@keyframes lomSlide { from { opacity:0; transform:scale(.88) translateY(20px); } to { opacity:1; transform:scale(1) translateY(0); } }
@keyframes spin { to { transform:rotate(360deg); } }
.vp-price-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    gap: 16px;
    align-items: stretch;
}

.vp-price-items {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.vp-price-items--single {
    grid-template-columns: minmax(240px, 380px);
    justify-content: end;
}

.vp-price-item {
    background: #fff;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    padding: 16px 18px;
    box-shadow: 0 8px 22px rgba(15, 85, 131, .06);
}

.vp-price-item--domain {
    background: #f0fff4;
    border-color: #c6f6d5;
}

.vp-price-label {
    font-size: 11px;
    font-weight: 800;
    color: #a0aec0;
    margin-bottom: 5px;
}

.vp-price-item--domain .vp-price-label {
    color: #276749;
}

.vp-price-name {
    font-weight: 800;
    color: #1a202c;
    margin-bottom: 8px;
    line-height: 1.5;
}

.vp-price-amount {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 7px 14px;
    border-radius: 10px;
    background: #eef7fc;
    border: 1px solid #cfe0ec;
    font-size: 20px;
    font-weight: 900;
    color: var(--cp-primary);
    direction: ltr;
}

.vp-price-amount--domain {
    color: #276749;
}

.vp-price-total {
    text-align: center;
    background: linear-gradient(135deg, var(--cp-primary), #2876AB);
    border-radius: 12px;
    padding: 14px 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 105px;
}

.vp-price-total__label {
    font-size: 11px;
    font-weight: 700;
    opacity: .75;
    margin-bottom: 6px;
}

.vp-price-total__amount {
    font-size: 28px;
    font-weight: 900;
    line-height: 1;
}

@media (max-width: 767.98px) {
    .vp-price-layout {
        grid-template-columns: 1fr;
    }

    .vp-price-items--single {
        grid-template-columns: 1fr;
    }

    .vp-price-total {
        min-height: auto;
    }
}

/* ── Work detail page (wk-*) ── */
.wk-info-row { display:flex; flex-direction:column; gap:14px; margin-bottom:44px; }
.wk-badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 15px; border-radius:999px;
    background:#e8f3ff; color:var(--default-color);
    font-size:12px; font-weight:800; width:fit-content;
}
.wk-desc { color:#5d6d7d; font-size:16px; line-height:1.9; max-width:680px; margin:0; }

.wk-gallery {
    display:flex; flex-direction:column;
    align-items:center; gap:32px;
    margin-bottom:20px;
}
.wk-shot {
    position:relative; width:80%; max-width:100%;
    border-radius:16px; overflow:hidden;
    box-shadow:0 8px 32px rgba(20,60,100,.10);
    cursor:zoom-in; margin:0;
}
.wk-shot img {
    width:100%; height:auto; display:block;
    transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
.wk-shot:hover img { transform:scale(1.06); }
.wk-shot__overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,43,70,.35);
    opacity:0; transition:opacity .28s ease;
    pointer-events:none;
}
.wk-shot__overlay i {
    width:64px; height:64px; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.95); color:var(--default-color);
    font-size:30px;
    box-shadow:0 8px 30px rgba(0,0,0,.25);
    transform:scale(.7) rotate(-10deg); transition:transform .3s cubic-bezier(.34,1.56,.64,1);
}
.wk-shot:hover .wk-shot__overlay { opacity:1; }
.wk-shot:hover .wk-shot__overlay i { transform:scale(1) rotate(0deg); }

/* ══════════════════ Lightbox ══════════════════ */
/* Full-screen overlay — covers navbar */
.wk-lb {
    position:fixed;
    top:0; left:0; right:0; bottom:0;
    z-index:99999;
    background:rgba(4,8,18,.97);
    display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none;
    transition:opacity .25s ease;
}
.wk-lb.open { opacity:1; pointer-events:auto; }

/* Unused bg div kept for JS compatibility */
.wk-lb__bg { display:none; }

/* Image area — fills space, click outside image to close */
.wk-lb__stage {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    padding:60px 80px;
    cursor:zoom-out; box-sizing:border-box;
}
.wk-lb__stage img {
    max-width:100%; max-height:100%;
    object-fit:contain;
    border-radius:8px;
    box-shadow:0 24px 64px rgba(0,0,0,.6);
    cursor:default; display:block;
    transition:none;
}

/* Controls — absolute inside .wk-lb */
.wk-lb__close,
.wk-lb__nav,
.wk-lb__counter {
    position:absolute;
    z-index:2; border:0; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
}

/* X close — top-right */
.wk-lb__close {
    top:20px; right:20px;
    width:44px; height:44px; border-radius:14px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.18) !important;
    color:#fff; font-size:18px;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.wk-lb__close:hover {
    background:rgba(255,255,255,.22);
    transform:rotate(90deg) scale(1.1);
}

/* Nav arrows */
.wk-lb__nav {
    top:50%; transform:translateY(-50%);
    width:38px; height:60px; border-radius:10px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid rgba(255,255,255,.15) !important;
    color:#fff; font-size:22px;
    box-shadow:0 8px 32px rgba(0,0,0,.4);
    transition:background .2s, transform .2s;
}
.wk-lb__nav:hover {
    background:rgba(255,255,255,.2);
    transform:translateY(-50%) scale(1.06);
}
.wk-lb__nav--prev { left:16px; }
.wk-lb__nav--next { right:16px; }

/* Counter — bottom center */
.wk-lb__counter {
    bottom:18px; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.15);
    padding:5px 16px; border-radius:100px;
    font-size:13px; font-weight:700; color:rgba(255,255,255,.9);
    font-family:monospace; gap:6px; white-space:nowrap; cursor:default;
}
.wk-lb__counter em { color:rgba(255,255,255,.35); font-style:normal; }

@media (max-width:767.98px) {
    .wk-lb { top:0; }
    .wk-lb__stage { padding:48px 60px; }
    .wk-lb__nav--prev { left:8px; }
    .wk-lb__nav--next { right:8px; }
    .wk-lb__close { top:10px; right:10px; width:40px; height:40px; }
}

/* ── Sticky project card (Behance-style) ── */
.wk-sticky-card {
    position:fixed; bottom:28px; left:50%; transform:translateX(-50%);
    z-index:500;
    display:flex; align-items:center; gap:14px;
    background:rgba(8,12,24,.88);
    backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px);
    border:1px solid rgba(255,255,255,.13);
    border-radius:100px;
    padding:9px 16px 9px 9px;
    box-shadow:0 14px 48px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.2);
    white-space:nowrap;
    transition:opacity .25s, transform .25s;
}
.wk-sticky-card__logo {
    height:40px; width:auto;
    filter:brightness(0) invert(1);
    opacity:.88; display:block;
}
.wk-sticky-card__sep {
    width:1px; height:26px;
    background:rgba(255,255,255,.18); flex-shrink:0;
}
.wk-sticky-card__name {
    color:#fff; font-weight:700; font-size:14px;
    max-width:240px; overflow:hidden; text-overflow:ellipsis;
}
.wk-sticky-card__btn {
    display:inline-flex; align-items:center; gap:7px;
    background:var(--default-color); color:#fff !important;
    padding:9px 22px; border-radius:100px;
    font-size:13px; font-weight:700; text-decoration:none;
    transition:opacity .2s;
}
.wk-sticky-card__btn:hover { opacity:.82; }
.wk-sc-hidden {
    opacity:0 !important; pointer-events:none;
    transform:translateX(-50%) translateY(16px) !important;
}
@media (max-width:767.98px) {
    .wk-sticky-card {
        bottom:16px; left:16px; right:16px;
        transform:none; border-radius:20px;
        white-space:normal; flex-wrap:wrap;
    }
    .wk-sticky-card__name { max-width:100%; }
    .wk-sc-hidden { transform:translateY(16px) !important; }
}

/* ── Work Hero ── */
.wk-hero {
    background: linear-gradient(135deg, #08253e 0%, #0d3d61 55%, #145e96 100%);
    padding: 52px 0 60px;
    position: relative;
    overflow: hidden;
}
.wk-hero::before {
    content:'';
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 24px 24px;
    pointer-events:none;
}
.wk-breadcrumb {
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
    list-style:none; margin:0 0 28px; padding:0;
    font-size:13px;
}
.wk-breadcrumb li a { color:rgba(255,255,255,.65); text-decoration:none; transition:color .18s; }
.wk-breadcrumb li a:hover { color:#fff; }
.wk-bc-sep { color:rgba(255,255,255,.3); font-size:11px; }
.wk-bc-active { color:rgba(255,255,255,.9); font-weight:600; }

.wk-hero__inner {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:48px;
    align-items:center;
}
.wk-cat-badge {
    display:inline-flex; align-items:center; gap:7px;
    padding:5px 16px; border-radius:999px;
    background:rgba(255,255,255,.12);
    backdrop-filter:blur(6px);
    color:#fff; font-size:12px; font-weight:700;
    margin-bottom:16px;
    border:1px solid rgba(255,255,255,.18);
}
.wk-hero__title {
    font-size:clamp(1.7rem, 3vw, 2.4rem);
    font-weight:800; color:#fff;
    line-height:1.25; margin:0 0 16px;
}
.wk-hero__desc {
    color:rgba(255,255,255,.75); font-size:15px;
    line-height:1.85; margin:0 0 22px;
    max-width:520px;
}
.wk-hero__meta {
    display:flex; flex-wrap:wrap; gap:10px;
    margin-bottom:18px;
}
.wk-meta-chip {
    display:inline-flex; align-items:center; gap:7px;
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.15);
    padding:6px 14px; border-radius:999px;
    color:rgba(255,255,255,.85); font-size:13px;
}
.wk-meta-chip i { font-size:15px; color:rgba(255,255,255,.6); }

.wk-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.wk-tag {
    padding:4px 13px; border-radius:999px;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:rgba(255,255,255,.8); font-size:12px; font-weight:600;
    transition:background .18s;
}
.wk-tag:hover { background:rgba(255,255,255,.16); }

.wk-visit-btn {
    display:inline-flex; align-items:center; gap:9px;
    background:var(--default-color); color:#fff;
    padding:11px 26px; border-radius:999px;
    font-size:14px; font-weight:700;
    text-decoration:none;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
    transition:opacity .18s, transform .18s;
}
.wk-visit-btn:hover { opacity:.88; transform:translateY(-2px); color:#fff; }

/* صورة الغلاف */
.wk-hero__cover {
    position:relative; border-radius:16px; overflow:hidden;
    box-shadow:0 24px 64px rgba(0,0,0,.4);
    cursor:zoom-in;
    aspect-ratio:16/10;
}
.wk-hero__cover img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .35s ease;
}
.wk-hero__cover:hover img { transform:scale(1.03); }
.wk-hero__zoom {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(8,37,62,.4);
    opacity:0; transition:opacity .22s;
}
.wk-hero__cover:hover .wk-hero__zoom { opacity:1; }
.wk-hero__zoom i {
    width:56px; height:56px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.9); color:var(--default-color);
    font-size:26px;
}

/* ── قسم المعرض ── */
.wk-gallery-section {
    padding:64px 0;
    background:#f7f9fc;
}
.wk-section-title {
    display:flex; align-items:center; gap:14px;
    font-size:1.25rem; font-weight:800; color:#0d3b5c;
    margin-bottom:36px; text-align:center; justify-content:center;
}
.wk-section-title span {
    flex:1; height:2px;
    background:linear-gradient(90deg, transparent, #d0ddf0);
}
.wk-section-title span:last-child {
    background:linear-gradient(90deg, #d0ddf0, transparent);
}

.wk-grid {
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}
.wk-grid__item {
    position:relative; border-radius:14px; overflow:hidden;
    box-shadow:0 6px 24px rgba(20,60,100,.09);
    cursor:zoom-in; aspect-ratio:16/9;
}
.wk-grid__item img {
    width:100%; height:100%; object-fit:cover; display:block;
    transition:transform .3s ease;
}
.wk-grid__item:hover img { transform:scale(1.04); }
.wk-grid__overlay {
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    background:rgba(12,43,70,.35);
    opacity:0; transition:opacity .22s;
}
.wk-grid__item:hover .wk-grid__overlay { opacity:1; }
.wk-grid__overlay i {
    width:52px; height:52px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    background:rgba(255,255,255,.92); color:var(--default-color);
    font-size:24px; box-shadow:0 6px 20px rgba(0,0,0,.15);
}

/* ── مشاريع مشابهة ── */
.wk-related-section { padding:64px 0; background:#fff; }

/* ── زر الرجوع ── */
.wk-back-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:11px 28px; border-radius:999px;
    border:2px solid #d0ddf0; color:#5d7a9a;
    font-size:14px; font-weight:600; text-decoration:none;
    transition:border-color .18s, color .18s, background .18s;
}
.wk-back-btn:hover {
    border-color:var(--default-color);
    color:var(--default-color);
    background:#f0f7ff;
}

/* ── موبايل ── */
@media (max-width:991.98px) {
    .wk-hero__inner {
        grid-template-columns:1fr;
        gap:32px;
    }
    .wk-hero__cover { order:-1; aspect-ratio:16/9; }
    .wk-hero { padding:36px 0 44px; }
}
@media (max-width:640px) {
    .wk-grid { grid-template-columns:1fr; }
    .wk-hero__title { font-size:1.5rem; }
}