*,
*: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:     80px 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;
    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);
}

.brand-area {
    position: relative;
    padding-top: 20px;
}

.close_menu {
    position: absolute;
    top: 0;
    left: 0px;
    font-size: 24px;
    cursor: pointer;
    color: #363636;
    width: 35px;
    height: 35px;
    text-align: center;
    line-height: 35px;
    background-color: #fff;
    -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: #767676;
    color: #fff;
}

.brand-area a {
    width: 90%;
    height: auto;
    display: block;
    background-size: contain;
    margin: 0px auto 0 auto;
    margin-top: 10px;
    text-align: center;
    margin-bottom: 20px;
}

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

.mmenu > ul {
    list-style: none;
    padding: 0px;
    margin: 0px;
    text-align: center;
}

.mmenu > ul li a {
    display: block;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    color: #000;
    padding: 10px;
    transition: all .3s;
    font-size: 16px;
    text-transform: capitalize;
}

.mmenu > ul li a > i {
    margin-left: 5px;
}

.mmenu > ul li a:hover {
    background: #434242;
    color: #fff;
    border-color: #434242;
}

.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 .menu-mobile {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);

}

.menu-toggle .main-wrapper {
    -webkit-transform: translate3d(-250px, 0, 0);
    -moz-transform: translate3d(-250px, 0, 0);
    -ms-transform: translate3d(-250px, 0, 0);
    -o-transform: translate3d(-250px, 0, 0);
    transform: translate3d(-250px, 0, 0);

}

html.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;
}

/* ══════════════════════════════════════
   Header Notification Bell
══════════════════════════════════════ */
.hdr-notif-bell {
    position: relative;
    display: inline-flex;
    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: 14px;
    text-decoration: none;
    transition: background .2s, border-color .2s;
    flex-shrink: 0;
}
.hdr-notif-bell:hover {
    background: rgba(255,255,255,.3);
    border-color: rgba(255,255,255,.6);
    color: #fff;
    text-decoration: none;
}
.hdr-notif-bell__badge {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    line-height: 1;
}

/* ══════════════════════════════════════
   Client Area — trigger button
══════════════════════════════════════ */
.hdr-client {
    position: relative;
}
.hdr-client__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    border: 1.5px solid rgba(255,255,255,.45);
    border-radius: 50px;
    padding: 7px 16px 7px 8px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(255,255,255,.08);
    font-family: inherit;
    transition: background .2s, border-color .2s, box-shadow .2s;
    line-height: 1;
    backdrop-filter: blur(4px);
}
.hdr-client__btn:hover,
.hdr-client.open .hdr-client__btn {
    background: rgba(255,255,255,.18);
    border-color: rgba(255,255,255,.85);
    color: #fff;
    box-shadow: 0 0 0 3px rgba(255,255,255,.1);
    text-decoration: none;
}

/* Avatar circle */
.hdr-client__avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.22);
    border: 1.5px solid rgba(255,255,255,.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
}

.hdr-client__caret {
    font-size: 9px;
    opacity: .65;
    transition: transform .25s;
    margin-inline-start: 2px;
}
.hdr-client.open .hdr-client__caret {
    transform: rotate(180deg);
}

/* ══════════════════════════════════════
   Dropdown panel
══════════════════════════════════════ */
.hdr-client__dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 14px);
    inset-inline-end: 0;
    width: 340px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.18), 0 4px 12px rgba(0,0,0,.08);
    overflow: hidden;
    z-index: 9999;
    transform-origin: top right;
    animation: ddPop .2s cubic-bezier(.34,1.56,.64,1);
}
[dir=rtl] .hdr-client__dropdown {
    transform-origin: top left;
}
@keyframes ddPop {
    from { opacity:0; transform: scale(.92) translateY(-8px); }
    to   { opacity:1; transform: scale(1)  translateY(0); }
}
/* small arrow pointer */
.hdr-client__dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    inset-inline-end: 22px;
    width: 14px;
    height: 14px;
    background: var(--default-color);
    transform: rotate(45deg);
    border-radius: 2px;
    z-index: -1;
}

.hdr-client:hover .hdr-client__dropdown,
.hdr-client.open  .hdr-client__dropdown {
    display: block;
}

/* ── Header section inside dropdown ── */
.hdr-client__header {
    background: linear-gradient(135deg, var(--default-color) 0%, #2876AB 100%);
    padding: 20px 22px 18px;
    color: #fff;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.hdr-client__hdr-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    border: 2px solid rgba(255,255,255,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 800;
    flex-shrink: 0;
    color: #fff;
    text-decoration: none;
}
.hdr-client__hdr-info { flex: 1; min-width: 0; }
.hdr-client__name  {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hdr-client__email {
    font-size: 11px;
    opacity: .75;
    margin-top: 3px;
    word-break: break-all;
    direction: ltr;
    text-align: end;
}
.hdr-client__badge {
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    letter-spacing: .04em;
    flex-shrink: 0;
}

/* ── Menu grid ── */
.hdr-client__menu {
    padding: 14px 14px 6px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.hdr-client__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    text-decoration: none;
    background: transparent;
    border: 1.5px solid #e8edf2;
    transition: all .2s;
    text-align: center;
    line-height: 1.3;
}
.hdr-client__item:hover {
    border-color: transparent;
    color: var(--default-color);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(27,86,126,.13);
}
.hdr-client__item-icon {
    width: 42px;
    height: 42px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: transform .2s;
}
.hdr-client__item:hover .hdr-client__item-icon {
    transform: scale(1.12);
}
/* icon colour variants */
.hdr-client__item-icon--blue   { background: #dbeafe; color: #1d4ed8; }
.hdr-client__item-icon--purple { background: #ede9fe; color: #7c3aed; }
.hdr-client__item-icon--teal   { background: #ccfbf1; color: #0f766e; }
.hdr-client__item-icon--orange { background: #ffedd5; color: #c2410c; }
/* hover bg matches icon colour */
.hdr-client__item:hover .hdr-client__item-icon--blue   { background: #bfdbfe; }
.hdr-client__item:hover .hdr-client__item-icon--purple { background: #ddd6fe; }
.hdr-client__item:hover .hdr-client__item-icon--teal   { background: #99f6e4; }
.hdr-client__item:hover .hdr-client__item-icon--orange { background: #fed7aa; }

/* ── Footer (logout) ── */
.hdr-client__footer {
    padding: 10px 14px 14px;
}
.hdr-client__divider {
    height: 1px;
    background: #e2e8f0;
    margin: 0 0 10px;
}
.hdr-client__logout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 600;
    color: #c53030;
    cursor: pointer;
    width: 100%;
    text-align: center;
    background: #fff5f5;
    border: 1.5px solid #fed7d7;
    border-radius: 10px;
    font-family: inherit;
    transition: all .18s;
}
.hdr-client__logout:hover {
    background: #fed7d7;
    border-color: #fc8181;
    color: #9b2c2c;
}
.hdr-client__logout i { font-size: 13px; }

.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-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;
}



.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: 420px;
    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);
    font-weight: 500;
    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);
}

/*section_portfolio*/

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

.item-port {
    position: relative;
    overflow: hidden;
}

.item-port > a {
    margin-bottom: 0;
    overflow: hidden;
    transition: .5s;
    height: 400px;
    display:block;
}
.item-port > a img {
    width:100% !important;
    height:100% !important;
}

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

.txt-port {
    background:var(--bg-color);
    padding: 15px;
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -100%;
    transition: .5s;
}

.item-port:hover .txt-port {
    bottom: 0;
}

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

.txt-port span {
    color: var(--default-color);
    font-size: 15px;
}

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

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

.list-filter li {
    margin: 0 10px;
}

#button-all{
    text-align: center;
    margin-top: 30px;
}
.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;
    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:hover span {
    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;
}


/*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 h5 {
    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-contact-item a:hover {
    color: rgba(255,255,255,.7) !important;
}

.footer-office-lbl {
    font-size: 11px;
    color: rgba(255,255,255,.45);
    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 {
    color: var(--default-color);
    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;
}

/* ═══════════════════════════════════════════════
   HEADER PAGES — shared across all inner pages
═══════════════════════════════════════════════ */
.header-pages {
    position: relative;
    background: linear-gradient(135deg, #3a4154 0%, #555f72 55%, #6b7590 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-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:linear-gradient(135deg,#0d3b5c 0%,#1e6fa0 100%);
}
.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:24px; }

/* ── Hero Banner ── */
.cpd-hero {
    position:relative; overflow:hidden;
    background:linear-gradient(135deg,#0d3b5c 0%,#1b6fa0 55%,#2a9fd6 100%);
    border-radius:20px;
    padding:22px 28px 18px;
    color:#fff;
    box-shadow:0 8px 32px rgba(13,59,92,.28);
}
.cpd-hero__greeting { font-size:12px; color:rgba(255,255,255,.65); margin-bottom:8px; position:relative; z-index:1; }
.cpd-hero__mainrow {
    display:flex; align-items:center;
    justify-content:space-between;
    flex-wrap:wrap; gap:10px;
    position:relative; z-index:1; margin-bottom:8px;
}
.cpd-hero__name-wrap { display:flex; align-items:center; gap:10px; }
.cpd-hero__chips-group { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cpd-hero__name { font-size:1.3rem; font-weight:800; margin:0; line-height:1; white-space:nowrap; }
.cpd-hero__date { font-size:11.5px; color:rgba(255,255,255,.6); position:relative; z-index:1; }
.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:200px; height:200px; top:-50px; inset-inline-end:-30px; }
.cpd-hero__deco--2 { width:120px; height:120px; bottom:-35px; inset-inline-start:20px; }

/* ── 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:16px;
    overflow:hidden;
    box-shadow:0 2px 16px rgba(0,0,0,.07);
    transition:transform .2s,box-shadow .2s;
}
.cpd-stat:hover { transform:translateY(-3px); box-shadow:0 6px 24px rgba(0,0,0,.1); }
.cpd-stat__strip { height:4px; }
.cpd-stat__body  { display:flex; align-items:center; gap:12px; padding:14px 18px; }
.cpd-stat__icon  { width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:17px; flex-shrink:0; }
.cpd-stat__num   { font-size:1.35rem; font-weight:800; line-height:1; color:#1a202c; }
.cpd-stat__lbl   { font-size:11px; color:#718096; margin-top:3px; }

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

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

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

/* ── Panel card ── */
.cpd-panel {
    background:#fff; border-radius:16px;
    box-shadow:0 2px 16px rgba(0,0,0,.07);
    overflow:hidden;
}
.cpd-panel--wide { min-height:260px; }
.cpd-panel__head {
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 22px;
    border-bottom:1px solid #f0f4f8;
}
.cpd-panel__title { display:flex; align-items:center; gap:10px; font-size:15px; font-weight:700; color:#1a202c; }
.cpd-panel__title-icon {
    width:30px; height:30px; border-radius:8px;
    display:flex; align-items:center; justify-content:center; font-size:13px;
}
.cpd-panel__title-icon--blue   { background:#ebf8ff; color:#1b6fa0; }
.cpd-panel__title-icon--teal   { background:#e6fffa; color:#0d9488; }
.cpd-panel__title-icon--purple { background:#f3e8ff; color:#7c3aed; }

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

/* ── Ticket list rows ── */
.cpd-ticket-list { padding:6px 0; }
.cpd-ticket-row {
    display:flex; align-items:center; gap:12px;
    padding:11px 20px;
    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:#f7faff; text-decoration:none; }
.cpd-ticket-row__dot {
    width:10px; height:10px; 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:12.5px; font-weight:600; 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:6px 0; }
.cpd-proj-row {
    display:flex; align-items:center; gap:10px;
    padding:10px 18px;
    border-bottom:1px solid #f7fafc;
}
.cpd-proj-row:last-child { border-bottom:none; }
.cpd-proj-row__icon {
    width:36px; height:36px; border-radius:10px;
    background:#e6fffa; color:#0d9488;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
}
.cpd-proj-row__info { flex:1; min-width:0; }
.cpd-proj-row__title { font-size:12px; font-weight:600; color:#1a202c; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cpd-proj-row__sub { font-size:10.5px; color:#a0aec0; margin-top:2px; }
.cpd-proj-row__sep { margin:0 4px; }

/* ── Invoice rows ── */
.cpd-inv-list { padding:6px 0; }
.cpd-inv-row {
    display:flex; align-items:center; gap:12px;
    padding:12px 20px;
    border-bottom:1px solid #f7fafc;
}
.cpd-inv-row:last-child { border-bottom:none; }
.cpd-inv-row__icon {
    width:36px; height:36px; border-radius:10px;
    background:#f3e8ff; color:#7c3aed;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; flex-shrink:0;
}
.cpd-inv-row__info { flex:1; min-width:0; }
.cpd-inv-row__num    { font-size:13px; font-weight:700; color:#1a202c; }
.cpd-inv-row__amount { font-size:12px; 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:700; 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; }
@media(max-width:640px){ .cpd-actions { grid-template-columns:repeat(2,1fr); } }

.cpd-action {
    background:#fff; border-radius:16px;
    padding:24px 16px; text-align:center;
    display:flex; flex-direction:column; align-items:center; gap:12px;
    text-decoration:none; color:#1a202c;
    box-shadow:0 2px 12px rgba(0,0,0,.07);
    border:1px solid #f0f4f8;
    transition:all .2s;
}
.cpd-action:hover { transform:translateY(-4px); box-shadow:0 8px 28px rgba(0,0,0,.1); text-decoration:none; color:#1a202c; }
.cpd-action__icon {
    width:52px; height:52px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px;
}
.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:13px; font-weight:600; color:#4a5568; }
/* ─────────────────────────────────────────────────────────────── */

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