@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Oswald:wght@300;400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Geom:ital,wght@0,300..900;1,300..900&family=Libertinus+Math&display=swap');
/* <link href="https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap" rel="stylesheet"> */

* {
    margin: 0;
    /* padding:0; */
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Open Sans", sans-serif;
    overflow-x: hidden;
    line-height: 1.7;
    /* background:#322720; */
    ;
}

a {
    text-decoration: none;
}

ul {
    list-style: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 10px 0;
}

h1 {}

h2 {}

h3 {
    font-size: 25px;
}

h4 {}

.f35 {
    font-size: 35px;
}

.cwhite {
    color: #fff;
}


/* =========================================================
   LAW LAB
========================================================= */

.law-site {
    --law-gold: #d3a15d;
    --law-gold-light: #e5bc7d;
    --law-dark: #080d17;
    --law-white: #ffffff;

    color: #ffffff;
}


.law-site *,
.law-site *::before,
.law-site *::after {
    box-sizing: border-box;
}


/* =========================================================
   FIXED HEADER
========================================================= */

.law-main-header {
    position: fixed;

    top: 0;
    left: 0;
    right: 0;

    z-index: 9999;

    padding: 18px 30px;

    transition:
        padding 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease;
}


.law-main-header.scrolled {
    padding-top: 9px;
    padding-bottom: 9px;

    background: rgba(7, 12, 20, 0.90);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 10px 35px rgba(0, 0, 0, 0.20);
}


.law-header-inner {
    width: 100%;
    max-width: 1450px;

    height: 68px;

    margin: auto;

    display: flex;
    align-items: center;

    padding: 0 8px 0 20px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    border-radius: 17px;

    background: rgba(7, 12, 21, 0.42);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


/* =========================================================
   LOGO
========================================================= */

.law-logo {
    display: flex;
    align-items: center;

    gap: 10px;

    color: #ffffff;

    text-decoration: none;

    flex-shrink: 0;
}


.law-logo-icon {
    /* width: 42px; */
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    /* border: 1px solid rgba(211, 161, 93, 0.75);

    border-radius: 50%; */

    color: var(--law-gold);

    font-size: 17px;
}


.law-logo-text {

    font-size: 28px;

    font-weight: 700;
}


.law-logo-text span {
    color: var(--law-gold);
}


/* =========================================================
   DESKTOP NAV
========================================================= */

.law-nav {
    display: flex;
    align-items: center;

    gap: 3px;

    margin-left: auto;
    margin-right: 28px;
}


.law-nav a {
    padding: 11px 15px;

    border-radius: 9px;

    color: rgba(255, 255, 255, 0.76);

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    transition: 0.3s ease;
}


.law-nav a:hover,
.law-nav a.active {
    color: #ffffff;

    background: rgba(255, 255, 255, 0.09);
}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.law-header-actions {
    display: flex;
    align-items: center;

    gap: 10px;
}


.law-appointment {
    padding: 11px 9px;

    color: #ffffff;

    text-decoration: none;

    font-size: 13px;

    font-weight: 600;

    white-space: nowrap;
}


.law-lawyer-btn {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    padding: 13px 18px;

    border-radius: 11px;

    background: var(--law-gold);

    color: #10151e;

    text-decoration: none;

    font-size: 13px;

    font-weight: 700;

    white-space: nowrap;

    transition: 0.3s ease;
}


.law-lawyer-btn:hover {
    background: var(--law-gold-light);

    transform: translateY(-1px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.law-menu-btn {
    display: none;

    width: 43px;
    height: 43px;

    margin-left: auto;

    border: 1px solid rgba(255, 255, 255, 0.17);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    cursor: pointer;

    font-size: 17px;
}


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

.law-hero {
    position: relative;

    width: calc(100% - 24px);

    min-height: 790px;

    margin: 0 12px;

    overflow: hidden;

    border-radius: 0 0 34px 34px;

    background: var(--law-dark);
}


/* =========================================================
   SLIDES
========================================================= */

.law-slides {
    position: absolute;

    inset: 0;

    overflow: hidden;
}


.law-slide {
    position: absolute;

    inset: 0;

    opacity: 0;

    visibility: hidden;

    background-size: cover;

    background-position: center;

    transform: scale(1.05);

    transition:
        opacity 0.8s ease,
        visibility 0.8s ease,
        transform 6s ease;
}


.law-slide.active {
    opacity: 1;

    visibility: visible;

    transform: scale(1);
}


/* =========================================================
   IMAGES
========================================================= */
/* 
.law-slide:nth-child(1) {
    background-image:
        url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?auto=format&fit=crop&w=2200&q=85");
}


.law-slide:nth-child(2) {
    background-image:
        url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?auto=format&fit=crop&w=2200&q=85");
}


.law-slide:nth-child(3) {
    background-image:
        url("https://images.unsplash.com/photo-1505664194779-8beaceb93744?auto=format&fit=crop&w=2200&q=85");
}
 */

/* =========================================================
   DESKTOP OVERLAY
========================================================= */

.law-slide::before {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(90deg,
            rgba(5, 9, 18, 0.97) 0%,
            rgba(5, 9, 18, 0.82) 35%,
            rgba(5, 9, 18, 0.45) 68%,
            rgba(5, 9, 18, 0.70) 100%);
}


.law-slide::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(180deg,
            rgba(5, 8, 16, 0.48),
            transparent 38%,
            rgba(5, 8, 16, 0.55));
}


/* =========================================================
   HERO CONTENT
========================================================= */

.law-hero-content {
    position: relative;

    z-index: 5;

    min-height: 790px;

    max-width: 1450px;

    margin: auto;

    padding:
        175px 7% 110px;

    display: flex;

    align-items: center;
}


.law-content-inner {
    width: 100%;

    max-width: 740px;
}


/* =========================================================
   EYEBROW
========================================================= */

.law-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 19px;

    color: var(--law-gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 2px;

    text-transform: uppercase;
}


.law-eyebrow::before {
    content: "";

    width: 32px;

    height: 1px;

    background: var(--law-gold);
}


/* =========================================================
   HEADING
========================================================= */

.law-heading {
    margin: 0;

    font-size: clamp(54px, 5.5vw, 84px);

    line-height: 0.98;

    font-weight: 600;

    letter-spacing: -3px;
}


.law-heading span {
    display: block;

    margin-top: 7px;

    color: var(--law-gold);

    font-style: italic;

    font-weight: 500;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.law-description {
    max-width: 600px;

    margin: 25px 0 0;

    color: rgba(255, 255, 255, 0.72);

    font-size: 15px;

    line-height: 1.75;
}


/* =========================================================
   SEARCH
========================================================= */

.law-search-box {
    width: 100%;

    max-width: 710px;

    margin-top: 30px;

    display: flex;

    align-items: center;

    padding: 7px;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 15px;

    background: rgba(255, 255, 255, 0.08);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}


.law-search-field {
    flex: 1;

    min-width: 0;

    display: flex;

    align-items: center;
}


.law-search-field i {
    margin-left: 13px;
    margin-right: 10px;

    color: var(--law-gold);

    font-size: 14px;
}


.law-search-field input {
    width: 100%;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;


    font-size: 13px;
}


.law-search-field input::placeholder {
    color: rgba(255, 255, 255, 0.48);
}


.law-search-select {
    position: relative;

    border-left: 1px solid rgba(255, 255, 255, 0.14);

    padding-left: 8px;
}


.law-search-select select {
    appearance: none;

    width: 150px;

    border: 0;

    outline: 0;

    background: transparent;

    color: #ffffff;


    font-size: 12px;

    font-weight: 600;

    padding: 12px 28px 12px 5px;

    cursor: pointer;
}


.law-search-select select option {
    color: #111827;

    background: #ffffff;
}


.law-search-select::after {
    content: "\f107";

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    color: var(--law-gold);


    font-weight: 900;

    pointer-events: none;
}


.law-search-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 135px;

    border: 0;

    padding: 14px 18px;

    border-radius: 11px;

    background: var(--law-gold);

    color: #10151e;


    font-size: 12px;

    font-weight: 700;

    white-space: nowrap;

    cursor: pointer;

    transition: 0.3s ease;
}


.law-search-btn:hover {
    background: var(--law-gold-light);
}


/* =========================================================
   TRUST
========================================================= */

.law-trust-row {
    display: flex;

    align-items: center;

    gap: 17px;

    margin-top: 20px;
}


.law-trust-item {
    display: flex;

    align-items: center;

    gap: 7px;

    color: rgba(255, 255, 255, 0.72);

    font-size: 11px;

    font-weight: 600;
}


.law-trust-item i {
    color: var(--law-gold);
}


.law-trust-divider {
    width: 1px;

    height: 15px;

    background: rgba(255, 255, 255, 0.18);
}


/* =========================================================
   COUNTER
========================================================= */

.law-slider-counter {
    position: absolute;

    z-index: 10;

    left: 7%;

    bottom: 28px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.law-current-number {
    color: var(--law-gold);

    font-size: 18px;

    font-weight: 600;
}


.law-counter-line {
    position: relative;

    width: 65px;

    height: 1px;

    background: rgba(255, 255, 255, 0.22);
}


.law-counter-line span {
    position: absolute;

    left: 0;
    top: 0;

    width: 33%;

    height: 1px;

    background: var(--law-gold);

    transition: width 0.4s ease;
}


.law-total-number {
    color: rgba(255, 255, 255, 0.45);

    font-size: 11px;
}


/* =========================================================
   SLIDER ARROWS
========================================================= */

.law-slider-arrows {
    position: absolute;

    z-index: 10;

    right: 5%;

    bottom: 18px;

    display: flex;

    gap: 8px;
}


.law-slider-arrow {
    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    border: 1px solid rgba(255, 255, 255, 0.22);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.07);

    color: #ffffff;

    cursor: pointer;

    transition: 0.3s ease;
}


.law-slider-arrow:hover {
    background: var(--law-gold);

    border-color: var(--law-gold);

    color: #111722;
}


/* =========================================================
   MOBILE MENU
========================================================= */

.law-menu-overlay {
    position: fixed;

    z-index: 10000;

    inset: 0;

    background: rgba(0, 0, 0, 0.65);

    opacity: 0;

    visibility: hidden;

    transition: 0.3s ease;
}


.law-menu-overlay.active {
    opacity: 1;

    visibility: visible;
}


.law-mobile-nav {
    position: fixed;

    z-index: 10001;

    top: 0;

    right: -100%;

    width: min(350px, 88%);

    height: 100vh;

    height: 100dvh;

    padding: 88px 26px 30px;

    overflow-y: auto;

    background: #0c1320;

    box-shadow:
        -20px 0 50px rgba(0, 0, 0, 0.4);

    transition: right 0.4s ease;
}


.law-mobile-nav.open {
    right: 0;
}


.law-mobile-close {
    position: absolute;

    top: 21px;
    right: 21px;

    width: 42px;
    height: 42px;

    border: 1px solid rgba(255, 255, 255, 0.13);

    border-radius: 10px;

    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    cursor: pointer;
}


.law-mobile-nav>a {
    display: block;

    padding: 15px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    color: rgba(255, 255, 255, 0.83);

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;
}


.law-mobile-actions {
    margin-top: 25px;
}


.law-mobile-actions a {
    display: block;

    padding: 13px 0;

    color: var(--law-gold);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .law-nav a {
        padding-left: 9px;
        padding-right: 9px;
    }


    .law-appointment {
        display: none;
    }

}


/* =========================================================
   SMALL LAPTOP / TABLET
========================================================= */

@media (max-width: 850px) {

    .law-main-header {
        padding:
            12px 16px;
    }


    .law-header-inner {
        height: 62px;

        padding-left: 14px;

        border-radius: 14px;
    }


    .law-nav,
    .law-header-actions {
        display: none;
    }


    .law-menu-btn {
        display: flex;

        align-items: center;
        justify-content: center;
    }


    .law-hero {
        min-height: 700px;
    }


    .law-hero-content {
        min-height: 700px;

        padding:
            145px 8% 95px;
    }


    .law-heading {
        font-size:
            clamp(48px, 8vw, 68px);
    }

}


/* =========================================================
   MOBILE 600PX
========================================================= */
@media (max-width: 600px) {

    .law-main-header {
        padding: 8px 7px;
    }

    .law-main-header.scrolled {
        padding: 6px 7px;
    }

    .law-header-inner {
        height: 55px;
        padding-left: 10px;
        padding-right: 6px;
        border-radius: 12px;
    }

    .law-logo {
        gap: 7px;
    }

    .law-logo-icon {
        width: 34px;
        height: 34px;
        font-size: 13px;
    }

    .law-logo-text {
        font-size: 21px;
    }

    .law-menu-btn {
        width: 39px;
        height: 39px;
        font-size: 15px;
    }

    /* =================================================
       MOBILE SLIDER HEIGHT
       Reduced from 640px → 600px
    ================================================= */

    .law-hero {
        width: calc(100% - 8px);
        margin-left: 4px;
        margin-right: 4px;

        height: 600px;
        min-height: 600px;
        max-height: 600px;

        border-radius: 0 0 21px 21px;
    }

    .law-slide {
        background-size: cover;
        background-position: 66% center;
    }

    .law-slide:nth-child(1) {
        background-position: 68% center;
    }

    .law-slide:nth-child(2) {
        background-position: 62% center;
    }

    .law-slide:nth-child(3) {
        background-position: 60% center;
    }

    /* =================================================
       MOBILE OVERLAY
    ================================================= */

    .law-slide::before {
        background:
            linear-gradient(180deg,
                rgba(5, 9, 18, 0.91) 0%,
                rgba(5, 9, 18, 0.70) 28%,
                rgba(5, 9, 18, 0.76) 58%,
                rgba(5, 9, 18, 0.94) 100%);
    }

    .law-slide::after {
        background:
            linear-gradient(180deg,
                rgba(5, 8, 16, 0.25),
                transparent 45%,
                rgba(5, 8, 16, 0.30));
    }

    /* =================================================
       CONTENT
       Same 600px height as slider
    ================================================= */

    .law-hero-content {
        min-height: 600px;
        height: 600px;

        padding: 100px 7% 72px;

        align-items: flex-start;
    }

    .law-content-inner {
        max-width: 100%;
        padding-top: 55px;
    }

    /* =================================================
       EYEBROW
    ================================================= */

    .law-eyebrow {
        margin-bottom: 12px;
        gap: 7px;
        font-size: 8px;
        letter-spacing: 1.35px;
    }

    .law-eyebrow::before {
        width: 21px;
    }

    /* =================================================
       HEADING
    ================================================= */

    .law-heading {
        font-size: 43px;
        line-height: 0.99;
        letter-spacing: -1.6px;
    }

    .law-heading span {
        margin-top: 5px;
        font-size: 39px;
        white-space: nowrap;
    }

    /* =================================================
       DESCRIPTION
    ================================================= */

    .law-description {
        margin-top: 15px;
        font-size: 11px;
        line-height: 1.58;
        max-width: 100%;
    }

    /* =================================================
       SEARCH BOX
    ================================================= */

    .law-search-box {
        display: block;
        width: 100%;
        margin-top: 18px;
        padding: 6px;
        border-radius: 12px;
    }

    .law-search-field {
        width: 100%;
        height: 38px;
    }

    .law-search-field i {
        margin-left: 7px;
        margin-right: 8px;
        font-size: 12px;
    }

    .law-search-field input {
        font-size: 11px;
    }

    .law-search-select {
        width: 100%;
        border-left: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.12);
        padding: 3px 0 0;
    }

    .law-search-select select {
        width: 100%;
        height: 36px;
        padding: 7px 30px 7px 7px;
        font-size: 10px;
    }

    .law-search-btn {
        width: 100%;
        height: 39px;
        margin-top: 4px;
        padding: 8px;
        font-size: 10px;
    }

    /* =================================================
       TRUST
    ================================================= */

    .law-trust-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 7px 14px;
        margin-top: 13px;
    }

    .law-trust-item {
        font-size: 8px;
        gap: 4px;
        white-space: nowrap;
    }

    .law-trust-item i {
        font-size: 8px;
    }

    .law-trust-divider {
        display: none;
    }

    /* =================================================
       BOTTOM CONTROLS
    ================================================= */

    .law-slider-counter {
        left: 7%;
        bottom: 11px;
        gap: 7px;
    }

    .law-current-number {
        font-size: 14px;
    }

    .law-counter-line {
        width: 38px;
    }

    .law-total-number {
        font-size: 8px;
    }

    .law-slider-arrows {
        right: 7%;
        bottom: 5px;
        gap: 5px;
    }

    .law-slider-arrow {
        width: 36px;
        height: 36px;
        font-size: 10px;
    }
}


/* =====================================================
   SMALL MOBILE
   390px → 580px
===================================================== */

@media (max-width: 390px) {

    .law-hero {
        height: 580px;
        min-height: 580px;
        max-height: 580px;
    }

    .law-hero-content {
        min-height: 580px;
        height: 580px;
        padding: 98px 7% 70px;
    }

    .law-content-inner {
        padding-top: 50px;
    }

    .law-heading {
        font-size: 39px;
    }

    .law-heading span {
        font-size: 35px;
    }

    .law-description {
        font-size: 10px;
        line-height: 1.55;
    }

    .law-search-box {
        margin-top: 15px;
    }

    .law-trust-row {
        margin-top: 10px;
        gap: 6px 11px;
    }

    .law-trust-item {
        font-size: 7.5px;
    }

    .law-slider-counter {
        bottom: 9px;
    }

    .law-slider-arrows {
        bottom: 4px;
    }
}


/* =====================================================
   VERY SMALL MOBILE
   350px → 560px
===================================================== */

@media (max-width: 350px) {

    .law-logo-text {
        font-size: 19px;
    }

    .law-logo-icon {
        width: 32px;
        height: 32px;
    }

    .law-hero {
        height: 560px;
        min-height: 560px;
        max-height: 560px;
    }

    .law-hero-content {
        min-height: 560px;
        height: 560px;
        padding-top: 95px;
    }

    .law-content-inner {
        padding-top: 45px;
    }

    .law-heading {
        font-size: 36px;
    }

    .law-heading span {
        font-size: 32px;
    }

    .law-description {
        font-size: 9.5px;
    }

    .law-search-field {
        height: 35px;
    }

    .law-search-select select {
        height: 34px;
    }

    .law-search-btn {
        height: 36px;
    }

    .law-trust-item {
        font-size: 7px;
    }
}

/* second seciton */
/* =========================================
   MODERN ABOUT / SECOND SECTION
========================================= */

.about-modern {
    width: 100%;
    padding: 50px 0;
    background: #ffffff;
    overflow: hidden;
}

.about-modern-container {
    width: min(1200px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    align-items: center;
    gap: 80px;
}


/* =========================================
   LEFT CONTENT
========================================= */

.about-modern-content {
    position: relative;
    z-index: 2;
}

.about-modern-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 2px;
}

.about-modern-tag::before {
    content: "";
    width: 38px;
    height: 2px;
    background: #b88a4a;
}

.about-modern-title {
    margin: 0 0 22px;
    line-height: 1.12;
    color: #172033;
    max-width: 600px;
}

.about-modern-title span {
    display: block;
    color: #b88a4a;
    font-style: italic;
}

.about-modern-description {
    max-width: 610px;
    margin: 0 0 16px;
    color: #6d727b;
    line-height: 1.8;
}


/* =========================================
   FEATURES
========================================= */

.about-modern-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 28px;
    margin: 30px 0;
}

.about-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
}

.about-feature-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #b88a4a;
    color: #ffffff;
}

.about-feature-icon i {
    font-size: 12px;
}

.about-feature-item h4 {
    margin: 0 0 4px;
    color: #172033;
}

.about-feature-item p {
    margin: 0;
    color: #858991;
}


/* =========================================
   BUTTON
========================================= */

.about-modern-btn {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    padding: 14px 20px 14px 25px;
    background: #172033;
    color: #ffffff;
    text-decoration: none;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.about-modern-btn span {
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #b88a4a;
    transition: all 0.3s ease;
}

.about-modern-btn:hover {
    background: #b88a4a;
    color: #ffffff;
    transform: translateY(-3px);
}

.about-modern-btn:hover span {
    background: #172033;
}


/* =========================================
   RIGHT IMAGE AREA
========================================= */

.about-modern-visual {
    position: relative;
    min-height: 560px;
}

.about-main-image {
    position: absolute;
    top: 0;
    right: 0;
    width: 88%;
    height: 490px;
    overflow: hidden;
    border-radius: 0 35px 0 35px;
    z-index: 2;
}

.about-main-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.about-modern-visual:hover .about-main-image img {
    transform: scale(1.04);
}


/* =========================================
   EXPERIENCE CARD
========================================= */

.about-experience-card {
    position: absolute;
    top: 45px;
    left: 0;
    z-index: 5;
    width: 145px;
    padding: 24px 18px;
    background: #b88a4a;
    color: #ffffff;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.about-experience-card strong {
    display: block;
    line-height: 1;
    margin-bottom: 8px;
}

.about-experience-card span {
    display: block;
    line-height: 1.3;
}


/* =========================================
   SMALL IMAGE
========================================= */

.about-small-image {
    position: absolute;
    bottom: 0;
    left: 45px;
    width: 190px;
    height: 160px;
    padding: 7px;
    background: #ffffff;
    z-index: 5;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
}

.about-small-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* =========================================
   DECORATIVE CIRCLE
========================================= */

.about-circle-shape {
    position: absolute;
    width: 260px;
    height: 260px;
    right: -100px;
    bottom: -100px;
    border: 45px solid rgba(184, 138, 74, 0.10);
    border-radius: 50%;
    z-index: 1;
}


/* =========================================
   BOTTOM STATS
========================================= */

.about-modern-stats {
    width: min(1200px, 92%);
    margin: 80px auto 0;
    padding: 25px 35px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    background: #f7f5f1;
    border-radius: 12px;
}

.about-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    padding: 10px;
    border-right: 1px solid #dedbd5;
}

.about-stat:last-child {
    border-right: 0;
}

.about-stat-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #b88a4a;
}

.about-stat strong {
    display: block;
    color: #172033;
}

.about-stat span {
    display: block;
    margin-top: 3px;
    color: #7c8088;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .about-modern {
        padding: 80px 0;
    }

    .about-modern-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .about-modern-content {
        max-width: 750px;
        margin: 0 auto;
        width: 100%;
    }

    .about-modern-visual {
        width: min(700px, 100%);
        margin: 0 auto;
    }

    .about-modern-stats {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 60px;
    }

    .about-stat:nth-child(2) {
        border-right: 0;
    }

    .about-stat:nth-child(1),
    .about-stat:nth-child(2) {
        border-bottom: 1px solid #dedbd5;
        padding-bottom: 20px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .about-modern {
        padding: 40px 0;
    }

    .about-modern-container {
        width: 90%;
        gap: 45px;
    }

    .about-modern-title {
        line-height: 1.2;
    }

    .about-modern-description {
        line-height: 1.7;
    }

    .about-modern-features {
        grid-template-columns: 1fr;
        gap: 18px;
        margin: 25px 0;
    }

    .about-modern-visual {
        min-height: 460px;
    }

    .about-main-image {
        width: 88%;
        height: 400px;
    }

    .about-experience-card {
        top: 25px;
        left: 0;
        width: 125px;
        padding: 18px 12px;
    }

    .about-small-image {
        width: 150px;
        height: 125px;
        left: 25px;
    }

    .about-circle-shape {
        width: 180px;
        height: 180px;
        right: -80px;
        bottom: -70px;
        border-width: 30px;
    }

    .about-modern-stats {
        width: 90%;
        grid-template-columns: 1fr 1fr;
        padding: 20px 10px;
        margin-top: 45px;
        gap: 0;
    }

    .about-stat {
        justify-content: flex-start;
        padding: 15px 10px;
    }

    .about-stat:nth-child(2) {
        border-right: 0;
    }

    .about-stat:nth-child(3),
    .about-stat:nth-child(4) {
        border-top: 1px solid #dedbd5;
        border-bottom: 0;
    }

    .about-stat:nth-child(3) {
        border-right: 1px solid #dedbd5;
    }

    .about-stat-icon {
        width: 42px;
        height: 42px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .about-modern {
        padding: 50px 0;
    }

    .about-modern-container {
        width: 92%;
    }

    .about-modern-tag {
        letter-spacing: 1.5px;
    }

    .about-modern-visual {
        min-height: 380px;
    }

    .about-main-image {
        width: 90%;
        height: 330px;
        border-radius: 0 25px 0 25px;
    }

    .about-experience-card {
        width: 105px;
        top: 20px;
        padding: 15px 8px;
    }

    .about-small-image {
        width: 125px;
        height: 105px;
        left: 15px;
        bottom: 0;
    }

    .about-modern-stats {
        width: 92%;
        border-radius: 8px;
    }

    .about-stat {
        gap: 9px;
        padding: 14px 7px;
    }

    .about-stat-icon {
        width: 36px;
        height: 36px;
    }
}


/* third seciton */
/* =========================================
   LA WLAB PRACTICE AREAS
========================================= */

.lawlab-practice {
    position: relative;
    width: 100%;
    padding: 40px 0 100px;
    background: #f7f5f1;
    overflow: hidden;
}

.lawlab-practice::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -180px;
    right: -160px;
    border: 1px solid rgba(184, 138, 74, 0.15);
    border-radius: 50%;
}

.lawlab-practice::after {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    bottom: -150px;
    left: -130px;
    border: 1px solid rgba(184, 138, 74, 0.12);
    border-radius: 50%;
}

.lawlab-practice-wrap {
    position: relative;
    z-index: 2;
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.lawlab-practice-head {
    margin-bottom: 55px;
}

.lawlab-practice-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 18px;
    color: #b88a4a;
    letter-spacing: 2px;
    font-weight: 700;
}

.lawlab-practice-label span {
    width: 35px;
    height: 1px;
    background: #b88a4a;
}

.lawlab-practice-heading-row {
    display: grid;
    grid-template-columns: 1fr 0.75fr;
    align-items: end;
    gap: 70px;
}

.lawlab-practice-heading-row h2 {
    margin: 0;
    color: #111827;
    line-height: 1.08;
}

.lawlab-practice-heading-row h2 em {
    display: block;
    color: #b88a4a;
    font-style: italic;
}

.lawlab-practice-heading-row p {
    margin: 0;
    color: #6d717a;
    line-height: 1.8;
    max-width: 500px;
}


/* =========================================
   PRACTICE GRID
========================================= */

.lawlab-practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* =========================================
   PRACTICE CARD
========================================= */

.lawlab-practice-card {
    position: relative;
    min-height: 305px;
    padding: 30px;
    background: #ffffff;
    border: 1px solid #ebe7df;
    border-radius: 4px;
    overflow: hidden;
    transition: transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.lawlab-practice-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 3px;
    background: #b88a4a;
    transition: width 0.4s ease;
}

.lawlab-practice-card:hover {
    transform: translateY(-8px);
    border-color: rgba(184, 138, 74, 0.35);
    box-shadow: 0 20px 45px rgba(25, 30, 40, 0.09);
}

.lawlab-practice-card:hover::after {
    width: 100%;
}


/* =========================================
   CARD TOP
========================================= */

.lawlab-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

.lawlab-card-number {
    color: #c9c6bf;
    line-height: 1;
    font-weight: 700;
}

.lawlab-card-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ded8ce;
    border-radius: 50%;
    color: #b88a4a;
    background: #faf9f6;
    transition: all 0.35s ease;
}

.lawlab-card-icon i {
    transition: transform 0.35s ease;
}

.lawlab-card-icon img {
    transition: transform 0.35s ease;
    height: 70%;
    width: 70%;
}

.lawlab-practice-card:hover .lawlab-card-icon {
    background: #b88a4a;
    color: #ffffff;
    border-color: #b88a4a;
}

.lawlab-practice-card:hover .lawlab-card-icon i {
    transform: scale(1.1);
}


/* =========================================
   CARD CONTENT
========================================= */

.lawlab-card-content h3 {
    margin: 0 0 12px;
    color: #151a28;
}

.lawlab-card-content p {
    margin: 0 0 24px;
    color: #71757d;
    line-height: 1.7;
    max-width: 330px;
}

.lawlab-card-content a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #b88a4a;
    text-decoration: none;
    font-weight: 600;
    transition: gap 0.3s ease;
}

.lawlab-card-content a i {
    transition: transform 0.3s ease;
}

.lawlab-card-content a:hover {
    gap: 14px;
}

.lawlab-card-content a:hover i {
    transform: translateX(3px);
}


/* =========================================
   BOTTOM CTA
========================================= */

.lawlab-practice-bottom {
    margin-top: 55px;
    padding: 28px 35px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    background: #171d2a;
    border-radius: 5px;
}

.lawlab-practice-bottom span {
    display: block;
    margin-bottom: 7px;
    color: #b88a4a;
    letter-spacing: 1.5px;
    font-weight: 700;
}

.lawlab-practice-bottom h3 {
    margin: 0;
    color: #ffffff;
}

.lawlab-practice-button {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 13px;
    padding: 15px 21px;
    background: #b88a4a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.lawlab-practice-button i {
    transition: transform 0.3s ease;
}

.lawlab-practice-button:hover {
    background: #ffffff;
    color: #171d2a;
}

.lawlab-practice-button:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .lawlab-practice {
        padding: 80px 0;
    }

    .lawlab-practice-heading-row {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lawlab-practice-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lawlab-practice-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .lawlab-practice {
        padding: 65px 0;
    }

    .lawlab-practice-wrap {
        width: 90%;
    }

    .lawlab-practice-head {
        margin-bottom: 38px;
    }

    .lawlab-practice-label {
        gap: 8px;
        letter-spacing: 1.5px;
    }

    .lawlab-practice-label span {
        width: 25px;
    }

    .lawlab-practice-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .lawlab-practice-card {
        min-height: auto;
        padding: 25px;
    }

    .lawlab-card-top {
        margin-bottom: 25px;
    }

    .lawlab-card-icon {
        width: 52px;
        height: 52px;
    }

    .lawlab-practice-bottom {
        margin-top: 35px;
        padding: 25px 22px;
    }

    .lawlab-practice-button {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .lawlab-practice {
        padding: 55px 0;
    }

    .lawlab-practice-wrap {
        width: 92%;
    }

    .lawlab-practice-card {
        padding: 22px;
    }

    .lawlab-card-top {
        margin-bottom: 22px;
    }

    .lawlab-practice-bottom {
        padding: 22px 18px;
    }
}

/* forth section */
/* =========================================
   LEGAL TEAM SECTION
========================================= */

.legal-team-section {
    position: relative;
    overflow: hidden;
    padding: 40px 0 110px;
    background: #efe9da;
}

.legal-team-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: -300px;
    right: -130px;
    border: 1px solid rgba(184, 138, 74, 0.13);
    border-radius: 50%;
}

.legal-team-section::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    bottom: -250px;
    left: -190px;
    border: 1px solid rgba(184, 138, 74, 0.10);
    border-radius: 50%;
}

.legal-team-container {
    position: relative;
    z-index: 2;
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.legal-team-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.legal-team-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 14px;
    color: #b4874b;
    font-weight: 700;
    letter-spacing: 1.7px;
}

.legal-team-eyebrow span {
    width: 26px;
    height: 1px;
    background: #b4874b;
}

.legal-team-heading h2 {
    margin: 0 0 15px;
    color: #101827;
    line-height: 1.15;
}

.legal-team-heading h2 em {
    color: #b4874b;
    font-style: italic;
}

.legal-team-heading p {
    max-width: 610px;
    margin: 0 auto;
    color: #777d86;
    line-height: 1.75;
}


/* =========================================
   LAWYER GRID
========================================= */

.legal-team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}


/* =========================================
   CARD
========================================= */

.legal-lawyer-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e8e3dc;
    border-radius: 10px;
    box-shadow: 0 8px 25px rgba(20, 27, 40, 0.035);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.legal-lawyer-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(20, 27, 40, 0.10);
}


/* =========================================
   IMAGE
========================================= */

.legal-lawyer-photo {
    position: relative;
    height: 325px;
    overflow: hidden;
    background: #e9e6df;
}

.legal-lawyer-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.legal-lawyer-card:hover .legal-lawyer-photo img {
    transform: scale(1.045);
}


/* =========================================
   SOCIAL ICONS
========================================= */

.legal-lawyer-social {
    position: absolute;
    right: 16px;
    bottom: 16px;

    display: flex;
    flex-direction: column;
    gap: 7px;

    opacity: 0;
    transform: translateX(15px);
    transition: all 0.35s ease;
}

.legal-lawyer-card:hover .legal-lawyer-social {
    opacity: 1;
    transform: translateX(0);
}

.legal-lawyer-social a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    background: #ffffff;
    color: #b4874b;
    border-radius: 50%;
    text-decoration: none;

    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.13);

    transition: all 0.25s ease;
}

.legal-lawyer-social a:hover {
    background: #b4874b;
    color: #ffffff;
}


/* =========================================
   LAWYER INFO
========================================= */

.legal-lawyer-info {
    padding: 22px 22px 20px;
}

.legal-lawyer-info h3 {
    margin: 0 0 5px;
    color: #111827;
    line-height: 1.25;
}

.legal-lawyer-info p {
    margin: 0;
    color: #858b94;
}


/* =========================================
   BOTTOM INFORMATION
========================================= */

.legal-lawyer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-top: 18px;
    padding-top: 15px;

    border-top: 1px solid #eeeae4;
}

.legal-lawyer-bottom strong {
    color: #111827;
}

.legal-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #737983;
    white-space: nowrap;
}

.legal-rating i {
    color: #e5ad25;
}


/* =========================================
   VIEW ALL BUTTON
========================================= */

.legal-team-button {
    display: flex;
    justify-content: center;
    margin-top: 43px;
}

.legal-team-button a {
    display: inline-flex;
    align-items: center;
    gap: 11px;

    padding: 13px 24px;

    background: #b4874b;
    border: 1px solid #b4874b;
    border-radius: 4px;

    color: #ffffff;
    text-decoration: none;

    transition: all 0.3s ease;
}

.legal-team-button a i {
    transition: transform 0.3s ease;
}

.legal-team-button a:hover {
    background: transparent;
    color: #b4874b;
}

.legal-team-button a:hover i {
    transform: translateX(5px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .legal-team-section {
        padding: 80px 0 85px;
    }

    .legal-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .legal-lawyer-photo {
        height: 330px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .legal-team-section {
        padding: 30px 0 70px;
    }

    .legal-team-container {
        width: 90%;
    }

    .legal-team-heading {
        margin-bottom: 38px;
    }

    .legal-team-eyebrow {
        gap: 7px;
        letter-spacing: 1.2px;
    }

    .legal-team-eyebrow span {
        width: 21px;
    }

    .legal-team-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .legal-lawyer-photo {
        height: 340px;
    }

    /* Mobile par social icons permanently subtle visible */
    .legal-lawyer-social {
        opacity: 1;
        transform: translateX(0);
        right: 13px;
        bottom: 13px;
    }

    .legal-lawyer-social a {
        width: 34px;
        height: 34px;
    }

    .legal-lawyer-info {
        padding: 20px;
    }

    .legal-lawyer-bottom {
        margin-top: 15px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .legal-team-section {
        padding: 55px 0 60px;
    }

    .legal-team-container {
        width: 92%;
    }

    .legal-lawyer-photo {
        height: 300px;
    }

    .legal-lawyer-info {
        padding: 18px;
    }

    .legal-lawyer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .legal-team-button {
        margin-top: 30px;
    }

    .legal-team-button a {
        width: 100%;
        justify-content: center;
    }

}

/* five section */
/* =========================================
   LAWLAB - WHY CHOOSE US
========================================= */

.ll-why-section {
    position: relative;
    width: 100%;
    padding: 40px 0 90px;
    background: #171d2a;
    overflow: hidden;
}

.ll-why-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -260px;
    right: -190px;
    border: 1px solid rgba(184, 138, 74, 0.18);
    border-radius: 50%;
}

.ll-why-section::after {
    content: "";
    position: absolute;
    width: 330px;
    height: 330px;
    bottom: -210px;
    left: -170px;
    border: 1px solid rgba(184, 138, 74, 0.12);
    border-radius: 50%;
}

.ll-why-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 92%);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 85px;
    align-items: center;
}


/* =========================================
   LEFT CONTENT
========================================= */

.ll-why-intro {
    position: relative;
}

.ll-why-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    color: #c79a5c;
    font-weight: 700;
    letter-spacing: 2px;
}

.ll-why-label span {
    width: 38px;
    height: 1px;
    background: #c79a5c;
}

.ll-why-intro h2 {
    margin: 0 0 25px;
    color: #ffffff;
    line-height: 1.08;
}

.ll-why-intro h2 em {
    display: block;
    color: #c79a5c;
    font-style: italic;
}

.ll-why-main-text {
    margin: 0;
    max-width: 500px;
    color: rgba(255, 255, 255, 0.67);
    line-height: 1.85;
}


/* =========================================
   QUOTE
========================================= */

.ll-why-quote {
    position: relative;
    margin: 35px 0;
    padding: 24px 25px 23px 62px;
    border-left: 2px solid #b88a4a;
    background: rgba(255, 255, 255, 0.045);
}

.ll-why-quote-mark {
    position: absolute;
    left: 22px;
    top: 23px;
    color: #b88a4a;
}

.ll-why-quote p {
    margin: 0 0 10px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
}

.ll-why-quote span {
    color: #c79a5c;
}


/* =========================================
   BUTTON
========================================= */

.ll-why-button {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 15px 22px 15px 25px;
    background: #b88a4a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.ll-why-button i {
    transition: transform 0.3s ease;
}

.ll-why-button:hover {
    background: #ffffff;
    color: #171d2a;
}

.ll-why-button:hover i {
    transform: translateX(4px);
}


/* =========================================
   BENEFITS
========================================= */

.ll-why-benefits {
    display: flex;
    flex-direction: column;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.ll-why-benefit {
    position: relative;
    display: grid;
    grid-template-columns: 40px 62px 1fr 35px;
    align-items: center;
    gap: 20px;
    min-height: 140px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
    transition: all 0.35s ease;
}

.ll-why-benefit::before {
    content: "";
    position: absolute;
    left: -25px;
    right: -25px;
    top: 8px;
    bottom: 8px;
    background: rgba(184, 138, 74, 0.07);
    border-left: 2px solid #b88a4a;
    opacity: 0;
    transform: translateX(10px);
    transition: all 0.35s ease;
    pointer-events: none;
}

.ll-why-benefit:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.ll-why-benefit>* {
    position: relative;
    z-index: 2;
}

.ll-why-benefit-number {
    color: rgba(255, 255, 255, 0.30);
    font-weight: 700;
}

.ll-why-benefit-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 138, 74, 0.45);
    border-radius: 50%;
    color: #c79a5c;
    background: rgba(184, 138, 74, 0.06);
    transition: all 0.35s ease;
}

.ll-why-benefit:hover .ll-why-benefit-icon {
    background: #b88a4a;
    color: #ffffff;
    border-color: #b88a4a;
    transform: rotate(-5deg);
}

.ll-why-benefit-content h3 {
    margin: 0 0 7px;
    color: #ffffff;
}

.ll-why-benefit-content p {
    margin: 0;
    max-width: 480px;
    color: rgba(255, 255, 255, 0.57);
    line-height: 1.65;
}

.ll-why-arrow {
    color: rgba(255, 255, 255, 0.35);
    transition: all 0.35s ease;
}

.ll-why-benefit:hover .ll-why-arrow {
    color: #c79a5c;
    transform: translate(3px, -3px);
}


/* =========================================
   STATISTICS
========================================= */

.ll-why-stats-wrap {
    position: relative;
    z-index: 2;
    width: min(1200px, 92%);
    margin: 75px auto 0;
    padding: 25px 30px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #ffffff;
    border-radius: 4px;
}

.ll-why-stat {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 20px;
    border-right: 1px solid #e4e0d9;
}

.ll-why-stat:last-child {
    border-right: 0;
}

.ll-why-stat-icon {
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b88a4a;
    background: #f7f5f1;
    border-radius: 50%;
}

.ll-why-stat strong {
    display: block;
    color: #171d2a;
}

.ll-why-stat span {
    display: block;
    margin-top: 3px;
    color: #777b82;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .ll-why-section {
        padding: 80px 0;
    }

    .ll-why-container {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .ll-why-intro {
        max-width: 700px;
    }

    .ll-why-benefit {
        min-height: 125px;
    }

    .ll-why-stats-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 0;
    }

    .ll-why-stat:nth-child(2) {
        border-right: 0;
    }

    .ll-why-stat:nth-child(1),
    .ll-why-stat:nth-child(2) {
        border-bottom: 1px solid #e4e0d9;
        padding-bottom: 20px;
    }

    .ll-why-stat:nth-child(3),
    .ll-why-stat:nth-child(4) {
        padding-top: 20px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .ll-why-section {
        padding: 15px 0;
    }

    .ll-why-container {
        width: 90%;
        gap: 45px;
    }

    .ll-why-label {
        gap: 8px;
        letter-spacing: 1.5px;
    }

    .ll-why-label span {
        width: 25px;
    }

    .ll-why-quote {
        margin: 28px 0;
        padding: 21px 20px 21px 55px;
    }

    .ll-why-quote-mark {
        left: 18px;
        top: 20px;
    }

    .ll-why-benefit {
        grid-template-columns: 32px 52px 1fr;
        gap: 14px;
        min-height: auto;
        padding: 22px 0;
    }

    .ll-why-benefit::before {
        left: -12px;
        right: -12px;
    }

    .ll-why-benefit-icon {
        width: 50px;
        height: 50px;
    }

    .ll-why-arrow {
        display: none;
    }

    .ll-why-benefit-content p {
        line-height: 1.6;
    }

    .ll-why-stats-wrap {
        width: 90%;
        margin-top: 45px;
        padding: 15px 10px;
    }

    .ll-why-stat {
        justify-content: flex-start;
        padding: 15px 9px;
        gap: 9px;
    }

    .ll-why-stat-icon {
        width: 40px;
        height: 40px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .ll-why-section {
        padding: 55px 0;
    }

    .ll-why-container {
        width: 92%;
    }

    .ll-why-main-text {
        line-height: 1.7;
    }

    .ll-why-benefit {
        grid-template-columns: 28px 48px 1fr;
        gap: 11px;
    }

    .ll-why-benefit-icon {
        width: 46px;
        height: 46px;
    }

    .ll-why-benefit-number {
        align-self: start;
        padding-top: 14px;
    }

    .ll-why-stats-wrap {
        width: 92%;
        grid-template-columns: 1fr;
    }

    .ll-why-stat,
    .ll-why-stat:nth-child(1),
    .ll-why-stat:nth-child(2),
    .ll-why-stat:nth-child(3) {
        border-right: 0;
        border-bottom: 1px solid #e4e0d9;
        padding: 15px 8px;
    }

    .ll-why-stat:last-child {
        border-bottom: 0;
    }
}

/* six section */
/* =========================================
   LAWLAB - PRICING SECTION
========================================= */
/* =========================================
   LAWLAB - LEGAL PACKAGES
========================================= */

.lawlab-package-section {
    position: relative;
    width: 100%;
    padding: 25px 0 100px;
    background: #ffffff;
    overflow: hidden;
}

.lawlab-package-section::before {
    content: "";
    position: absolute;
    width: 430px;
    height: 430px;
    top: -230px;
    right: -170px;
    border: 1px solid rgba(184, 138, 74, 0.12);
    border-radius: 50%;
}

.lawlab-package-section::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    bottom: -170px;
    left: -150px;
    border: 1px solid rgba(184, 138, 74, 0.10);
    border-radius: 50%;
}

.lawlab-package-container {
    position: relative;
    z-index: 2;
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.lawlab-package-heading {
    max-width: 730px;
    margin: 0 auto 58px;
    text-align: center;
}

.lawlab-package-eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    margin-bottom: 18px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 2px;
}

.lawlab-package-eyebrow span {
    width: 30px;
    height: 1px;
    background: #b88a4a;
}

.lawlab-package-heading h2 {
    margin: 0 0 17px;
    color: #101827;
    line-height: 1.1;
}

.lawlab-package-heading h2 em {
    color: #b88a4a;
    font-style: italic;
}

.lawlab-package-heading p {
    max-width: 650px;
    margin: auto;
    color: #737780;
    line-height: 1.8;
}


/* =========================================
   PACKAGE GRID
========================================= */

.lawlab-package-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}


/* =========================================
   CARD
========================================= */

.lawlab-package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 38px 31px 30px;
    background: #f8f7f4;
    border: 1px solid #e9e5dc;
    border-radius: 5px;
    overflow: hidden;
    transition: transform 0.35s ease,
        box-shadow 0.35s ease;
}

.lawlab-package-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 22px 45px rgba(18, 25, 38, 0.09);
}


/* =========================================
   CARD NUMBER
========================================= */

.lawlab-package-number {
    position: absolute;
    top: 23px;
    right: 25px;
    color: rgba(16, 24, 39, 0.08);
    font-weight: 800;
}


/* =========================================
   ICON
========================================= */

.lawlab-package-icon {
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 27px;
    border: 1px solid #d5b88d;
    border-radius: 50%;
    background: #ffffff;
    color: #b88a4a;
    transition: all 0.3s ease;
}

.lawlab-package-card:hover .lawlab-package-icon {
    background: #b88a4a;
    color: #ffffff;
    transform: rotate(-5deg);
}


/* =========================================
   CONTENT
========================================= */

.lawlab-package-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.lawlab-package-tag {
    display: block;
    margin-bottom: 10px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 1.3px;
}

.lawlab-package-content h3 {
    margin: 0 0 12px;
    color: #111827;
}

.lawlab-package-content>p {
    min-height: 83px;
    margin: 0;
    color: #727780;
    line-height: 1.7;
}


/* =========================================
   PRICE
========================================= */

.lawlab-package-price {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-top: 23px;
    color: #b88a4a;
}

.lawlab-package-price span {
    align-self: flex-start;
    margin-top: 7px;
}

.lawlab-package-price strong {
    line-height: 1;
}

.lawlab-package-price small {
    margin-left: 4px;
    color: #777b82;
}


/* =========================================
   DIVIDER
========================================= */

.lawlab-package-line {
    width: 100%;
    height: 1px;
    margin: 24px 0 22px;
    background: #dedbd4;
}


/* =========================================
   FEATURES
========================================= */

.lawlab-package-content ul {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lawlab-package-content li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #555b64;
    line-height: 1.5;
}

.lawlab-package-content li i {
    flex-shrink: 0;
    width: 19px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    border-radius: 50%;
    background: #eee4d4;
    color: #a97839;
}


/* =========================================
   CARD LINK
========================================= */

.lawlab-package-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 27px;
    color: #a97839;
    text-decoration: none;
    font-weight: 700;
    transition: color 0.3s ease;
}

.lawlab-package-link i {
    transition: transform 0.3s ease;
}

.lawlab-package-link:hover {
    color: #171d2a;
}

.lawlab-package-link:hover i {
    transform: translateX(5px);
}


/* =========================================
   FEATURED CARD
========================================= */

.lawlab-package-main {
    background: #171d2a;
    border-color: #171d2a;
    transform: translateY(-14px);
    box-shadow: 0 25px 55px rgba(23, 29, 42, 0.16);
}

.lawlab-package-main:hover {
    transform: translateY(-20px);
}

.lawlab-package-main .lawlab-package-number {
    color: rgba(255, 255, 255, 0.10);
}

.lawlab-package-main .lawlab-package-icon {
    background: #b88a4a;
    color: #ffffff;
    border-color: #b88a4a;
}

.lawlab-package-main .lawlab-package-tag {
    color: #d0a66c;
}

.lawlab-package-main h3 {
    color: #ffffff;
}

.lawlab-package-main .lawlab-package-content>p {
    color: rgba(255, 255, 255, 0.62);
}

.lawlab-package-main .lawlab-package-price {
    color: #d0a66c;
}

.lawlab-package-main .lawlab-package-price small {
    color: rgba(255, 255, 255, 0.50);
}

.lawlab-package-main .lawlab-package-line {
    background: rgba(255, 255, 255, 0.12);
}

.lawlab-package-main .lawlab-package-content li {
    color: rgba(255, 255, 255, 0.75);
}

.lawlab-package-main .lawlab-package-content li i {
    background: rgba(184, 138, 74, 0.18);
    color: #d0a66c;
}

.lawlab-package-main .lawlab-package-link {
    color: #d0a66c;
}


/* =========================================
   RECOMMENDED RIBBON
========================================= */

.lawlab-package-ribbon {
    position: absolute;
    top: 0;
    right: 28px;
    padding: 9px 13px;
    background: #b88a4a;
    color: #ffffff;
    border-radius: 0 0 4px 4px;
    font-weight: 700;
    letter-spacing: 1px;
}


/* =========================================
   BOTTOM CTA
========================================= */

.lawlab-package-bottom {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-top: 55px;
    padding: 22px 25px;
    background: #f8f7f4;
    border: 1px solid #e9e5dc;
    border-radius: 5px;
}

.lawlab-package-bottom-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    color: #b88a4a;
    border: 1px solid #e1d0b7;
}

.lawlab-package-bottom-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.lawlab-package-bottom-text strong {
    color: #171d2a;
}

.lawlab-package-bottom-text span {
    color: #777b82;
}

.lawlab-package-bottom-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 13px 19px;
    background: #171d2a;
    color: #ffffff;
    text-decoration: none;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.lawlab-package-bottom-btn:hover {
    background: #b88a4a;
}

.lawlab-package-bottom-btn i {
    transition: transform 0.3s ease;
}

.lawlab-package-bottom-btn:hover i {
    transform: translateX(4px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .lawlab-package-section {
        padding: 80px 0;
    }

    .lawlab-package-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lawlab-package-main {
        transform: none;
    }

    .lawlab-package-main:hover {
        transform: translateY(-7px);
    }

    .lawlab-package-card:last-child {
        grid-column: 1 / -1;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
    }

    .lawlab-package-bottom {
        flex-wrap: wrap;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .lawlab-package-section {
        padding: 25px 0;
    }

    .lawlab-package-container {
        width: 90%;
    }

    .lawlab-package-heading {
        margin-bottom: 40px;
    }

    .lawlab-package-eyebrow {
        gap: 7px;
        letter-spacing: 1.4px;
    }

    .lawlab-package-eyebrow span {
        width: 22px;
    }

    .lawlab-package-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lawlab-package-card,
    .lawlab-package-card:last-child {
        grid-column: auto;
        max-width: none;
        width: 100%;
        padding: 30px 24px 27px;
    }

    .lawlab-package-main {
        transform: none;
    }

    .lawlab-package-main:hover {
        transform: translateY(-5px);
    }

    .lawlab-package-content>p {
        min-height: auto;
    }

    .lawlab-package-bottom {
        align-items: flex-start;
        flex-direction: column;
        margin-top: 35px;
        padding: 20px;
    }

    .lawlab-package-bottom-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .lawlab-package-section {
        padding: 55px 0;
    }

    .lawlab-package-container {
        width: 92%;
    }

    .lawlab-package-card {
        padding: 27px 20px 24px;
    }

    .lawlab-package-number {
        top: 18px;
        right: 18px;
    }

    .lawlab-package-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 22px;
    }

    .lawlab-package-ribbon {
        right: 18px;
        padding: 8px 10px;
    }

    .lawlab-package-price {
        margin-top: 20px;
    }

    .lawlab-package-bottom {
        padding: 18px;
    }
}

/* seven section */
/* =========================================
   LAWLАB TESTIMONIAL SECTION
========================================= */

.lawlab-review-section {
    position: relative;
    width: 100%;
    padding: 30px 0 95px;
    background: #f7f6f3;
    overflow: hidden;
}

.lawlab-review-section::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    top: -330px;
    right: -180px;
    border: 1px solid rgba(184, 138, 74, 0.13);
    border-radius: 50%;
}

.lawlab-review-section::after {
    content: "";
    position: absolute;
    width: 340px;
    height: 340px;
    bottom: -240px;
    left: -160px;
    border: 1px solid rgba(184, 138, 74, 0.10);
    border-radius: 50%;
}

.lawlab-review-container {
    position: relative;
    z-index: 2;
    width: min(1200px, 92%);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.lawlab-review-heading {
    max-width: 720px;
    margin: 0 auto 52px;
    text-align: center;
}

.lawlab-review-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 11px;
    margin-bottom: 17px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 2px;
}

.lawlab-review-eyebrow span {
    width: 30px;
    height: 1px;
    background: #b88a4a;
}

.lawlab-review-heading h2 {
    margin: 0 0 16px;
    color: #111827;
    line-height: 1.1;
}

.lawlab-review-heading h2 em {
    color: #b88a4a;
    font-style: italic;
}

.lawlab-review-heading p {
    max-width: 620px;
    margin: 0 auto;
    color: #747982;
    line-height: 1.8;
}


/* =========================================
   SLIDER
========================================= */

.lawlab-review-slider {
    position: relative;
    padding: 0 52px;
}

.lawlab-review-slider::before,
.lawlab-review-slider::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70px;
    z-index: 4;
    pointer-events: none;
}

.lawlab-review-slider::before {
    left: 0;
    background: linear-gradient(to right,
            #f7f6f3,
            transparent);
}

.lawlab-review-slider::after {
    right: 0;
    background: linear-gradient(to left,
            #f7f6f3,
            transparent);
}


/* =========================================
   TRACK
========================================= */

.lawlab-review-track {
    display: flex;
    gap: 20px;
    overflow: hidden;
    scroll-behavior: smooth;
}


/* =========================================
   REVIEW CARD
========================================= */

.lawlab-review-card {
    position: relative;
    flex: 0 0 calc((100% - 40px) / 3);
    min-width: 0;
    min-height: 290px;
    display: flex;
    flex-direction: column;
    padding: 28px 27px 25px;
    background: #ffffff;
    border: 1px solid #e8e4dc;
    border-radius: 6px;
    box-shadow: 0 12px 35px rgba(25, 31, 42, 0.045);
    transition: transform 0.3s ease,
        box-shadow 0.3s ease;
}

.lawlab-review-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 45px rgba(25, 31, 42, 0.09);
}


/* =========================================
   CARD TOP
========================================= */

.lawlab-review-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 21px;
}

.lawlab-review-stars {
    display: flex;
    gap: 4px;
    color: #c4934e;
}

.lawlab-review-quote {
    position: absolute;
    top: 14px;
    right: 23px;
    color: rgba(184, 138, 74, 0.10);
    line-height: 1;
}


/* =========================================
   REVIEW TEXT
========================================= */

.lawlab-review-text {
    flex: 1;
    margin: 0 0 28px;
    color: #424957;
    line-height: 1.75;
}


/* =========================================
   AUTHOR
========================================= */

.lawlab-review-author {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 18px;
    border-top: 1px solid #eeeae2;
}

.lawlab-review-avatar {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 50%;
    background: #eeeae1;
    border: 2px solid #eee5d7;
}

.lawlab-review-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.lawlab-review-author h3 {
    margin: 0 0 4px;
    color: #171d2a;
}

.lawlab-review-author span {
    color: #858990;
}


/* =========================================
   ARROWS
========================================= */

.lawlab-review-arrow {
    position: absolute;
    top: 50%;
    z-index: 8;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 1px solid #d8c3a5;
    border-radius: 50%;
    background: #ffffff;
    color: #a8793d;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lawlab-review-arrow:hover {
    background: #b88a4a;
    border-color: #b88a4a;
    color: #ffffff;
}

.lawlab-review-prev {
    left: 0;
}

.lawlab-review-next {
    right: 0;
}


/* =========================================
   DOTS
========================================= */

.lawlab-review-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 34px;
}

.lawlab-review-dot {
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d7d3cb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.lawlab-review-dot.active {
    width: 26px;
    border-radius: 10px;
    background: #b88a4a;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .lawlab-review-section {
        padding: 80px 0;
    }

    .lawlab-review-card {
        flex-basis: calc((100% - 20px) / 2);
    }

    .lawlab-review-slider {
        padding: 0 48px;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .lawlab-review-section {
        padding: 20px 0 60px;
    }

    .lawlab-review-container {
        width: 90%;
    }

    .lawlab-review-heading {
        margin-bottom: 38px;
    }

    .lawlab-review-eyebrow {
        gap: 7px;
        letter-spacing: 1.4px;
    }

    .lawlab-review-eyebrow span {
        width: 22px;
    }

    .lawlab-review-slider {
        padding: 0 38px;
    }

    .lawlab-review-slider::before,
    .lawlab-review-slider::after {
        width: 42px;
    }

    .lawlab-review-card {
        flex-basis: 100%;
        min-height: 275px;
        padding: 25px 22px 23px;
    }

    .lawlab-review-arrow {
        width: 38px;
        height: 38px;
    }

    .lawlab-review-prev {
        left: -2px;
    }

    .lawlab-review-next {
        right: -2px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .lawlab-review-section {
        padding: 55px 0;
    }

    .lawlab-review-container {
        width: 92%;
    }

    .lawlab-review-slider {
        padding: 0 31px;
    }

    .lawlab-review-card {
        padding: 23px 19px 21px;
    }

    .lawlab-review-stars {
        gap: 3px;
    }

    .lawlab-review-slider::before,
    .lawlab-review-slider::after {
        width: 34px;
    }

    .lawlab-review-arrow {
        width: 34px;
        height: 34px;
    }

    .lawlab-review-prev {
        left: -3px;
    }

    .lawlab-review-next {
        right: -3px;
    }

    .lawlab-review-avatar {
        width: 44px;
        height: 44px;
    }
}

/* faq section */
/* =========================================
   LAWFАQ - FAQ SECTION
========================================= */

.lawfaq-section {
    position: relative;
    overflow: hidden;
    padding: 30px 0 110px;
    background: #efe6cc;
}

.lawfaq-section::before {
    content: "";
    position: absolute;
    top: -190px;
    right: -170px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(184, 138, 74, 0.14);
    border-radius: 50%;
}

.lawfaq-section::after {
    content: "";
    position: absolute;
    bottom: -260px;
    left: -160px;
    width: 440px;
    height: 440px;
    border: 1px solid rgba(184, 138, 74, 0.09);
    border-radius: 50%;
}

.lawfaq-wrap {
    position: relative;
    z-index: 2;
    width: min(1180px, 92%);
    margin: auto;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 75px;
    align-items: center;
}


/* =========================================
   LEFT SIDE
========================================= */

.lawfaq-intro {
    position: relative;
}

.lawfaq-label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 17px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.lawfaq-label span {
    display: inline-block;
    width: 32px;
    height: 1px;
    background: #b88a4a;
}

.lawfaq-intro h2 {
    margin: 0 0 19px;
    color: #101727;
    line-height: 1.12;
}

.lawfaq-intro h2 em {
    display: block;
    color: #b88a4a;
    font-style: italic;
}

.lawfaq-intro-text {
    max-width: 500px;
    margin: 0 0 32px;
    color: #707681;
    line-height: 1.8;
}


/* =========================================
   IMAGE
========================================= */

.lawfaq-visual {
    position: relative;
    width: 100%;
    max-width: 520px;
}

.lawfaq-visual::before {
    content: "";
    position: absolute;
    left: -12px;
    bottom: -12px;
    width: 75px;
    height: 75px;
    border-left: 2px solid #b88a4a;
    border-bottom: 2px solid #b88a4a;
    z-index: 1;
}

.lawfaq-visual img {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    aspect-ratio: 1.12 / 1;
    object-fit: cover;
    border-radius: 4px;
}


/* =========================================
   TRUST BADGE
========================================= */

.lawfaq-badge {
    position: absolute;
    right: -25px;
    bottom: 25px;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 13px;
    max-width: 280px;
    padding: 15px 19px;
    background: #ffffff;
    border-left: 3px solid #b88a4a;
    box-shadow: 0 15px 40px rgba(20, 27, 40, 0.13);
}

.lawfaq-badge-icon {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5ede1;
    color: #b88a4a;
}

.lawfaq-badge strong {
    display: block;
    margin-bottom: 4px;
    color: #151b29;
}

.lawfaq-badge span {
    display: block;
    color: #858a92;
    line-height: 1.4;
}


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

.lawfaq-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.lawfaq-item {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #ebe7df;
    border-radius: 5px;
    box-shadow: 0 7px 25px rgba(20, 27, 40, 0.035);
    transition: border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.lawfaq-item.active {
    border-color: #d7c0a0;
    box-shadow: 0 12px 32px rgba(20, 27, 40, 0.07);
}


/* =========================================
   QUESTION
========================================= */

.lawfaq-question {
    width: 100%;
    min-height: 76px;
    padding: 18px 20px 18px 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 0;
    outline: 0;
    background: transparent;
    color: #151b29;
    text-align: left;
    cursor: pointer;
}

.lawfaq-question span {
    line-height: 1.4;
}

.lawfaq-question i {
    width: 35px;
    height: 35px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #b88a4a;
    color: #ffffff;
    transition: transform 0.3s ease,
        background 0.3s ease;
}

.lawfaq-item.active .lawfaq-question i {
    transform: rotate(45deg);
    background: #151b29;
}


/* =========================================
   ANSWER
========================================= */

.lawfaq-answer {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
}

.lawfaq-answer p {
    overflow: hidden;
    max-width: 90%;
    margin: 0;
    padding: 0 25px;
    color: #707681;
    line-height: 1.75;
}

.lawfaq-item.active .lawfaq-answer {
    grid-template-rows: 1fr;
}

.lawfaq-item.active .lawfaq-answer p {
    padding-bottom: 24px;
}


/* =========================================
   HOVER
========================================= */

.lawfaq-question:hover {
    color: #b88a4a;
}

.lawfaq-question:hover i {
    background: #a8793e;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .lawfaq-section {
        padding: 80px 0 85px;
    }

    .lawfaq-wrap {
        grid-template-columns: 1fr;
        gap: 55px;
        max-width: 760px;
    }

    .lawfaq-intro {
        text-align: center;
    }

    .lawfaq-label {
        justify-content: center;
    }

    .lawfaq-intro-text {
        margin-left: auto;
        margin-right: auto;
    }

    .lawfaq-visual {
        margin: 0 auto;
        max-width: 600px;
    }

    .lawfaq-list {
        width: 100%;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .lawfaq-section {
        padding: 20px 0 70px;
    }

    .lawfaq-wrap {
        width: 90%;
        gap: 42px;
    }

    .lawfaq-label {
        gap: 7px;
        letter-spacing: 1.3px;
    }

    .lawfaq-label span {
        width: 23px;
    }

    .lawfaq-intro h2 em {
        display: inline;
    }

    .lawfaq-intro-text {
        line-height: 1.7;
    }

    .lawfaq-visual {
        width: calc(100% - 10px);
    }

    .lawfaq-badge {
        right: -8px;
        bottom: 15px;
        max-width: 250px;
        padding: 12px 14px;
    }

    .lawfaq-badge-icon {
        width: 37px;
        height: 37px;
    }

    .lawfaq-question {
        min-height: 70px;
        padding: 16px 15px 16px 18px;
        gap: 12px;
    }

    .lawfaq-question i {
        width: 32px;
        height: 32px;
    }

    .lawfaq-answer p {
        max-width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .lawfaq-item.active .lawfaq-answer p {
        padding-bottom: 20px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .lawfaq-section {
        padding: 55px 0 60px;
    }

    .lawfaq-wrap {
        width: 92%;
    }

    .lawfaq-visual {
        width: 100%;
    }

    .lawfaq-visual::before {
        left: -7px;
        bottom: -7px;
        width: 55px;
        height: 55px;
    }

    .lawfaq-badge {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 12px;
        max-width: 100%;
        border-left-width: 2px;
    }

    .lawfaq-question {
        min-height: 65px;
    }
}

/* blog seciton */
/* =========================================
   LAWBLOGX SECTION
========================================= */

.lawblogx-section {
    position: relative;
    overflow: hidden;
    padding: 30px 0 105px;
    background: #f7f6f3;
}

.lawblogx-section::before {
    content: "";
    position: absolute;
    width: 420px;
    height: 420px;
    top: -290px;
    right: -160px;
    border: 1px solid rgba(184, 138, 74, 0.14);
    border-radius: 50%;
}

.lawblogx-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    left: -210px;
    bottom: -190px;
    border: 1px solid rgba(184, 138, 74, 0.10);
    border-radius: 50%;
}

.lawblogx-container {
    position: relative;
    z-index: 2;
    width: min(1180px, 92%);
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.lawblogx-heading {
    max-width: 700px;
    margin: 0 auto 55px;
    text-align: center;
}

.lawblogx-label {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: #b88a4a;
    font-weight: 700;
    letter-spacing: 1.8px;
}

.lawblogx-label span {
    width: 28px;
    height: 1px;
    background: #b88a4a;
}

.lawblogx-heading h2 {
    margin: 0 0 17px;
    color: #111827;
    line-height: 1.12;
}

.lawblogx-heading h2 em {
    color: #b88a4a;
    font-style: italic;
}

.lawblogx-heading p {
    max-width: 600px;
    margin: 0 auto;
    color: #747a84;
    line-height: 1.8;
}


/* =========================================
   BLOG GRID
========================================= */

.lawblogx-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* =========================================
   BLOG CARD
========================================= */

.lawblogx-card {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e7e3dc;
    border-radius: 7px;
    box-shadow: 0 8px 28px rgba(20, 27, 40, 0.035);
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.lawblogx-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px rgba(20, 27, 40, 0.10);
}


/* =========================================
   IMAGE
========================================= */

.lawblogx-image {
    position: relative;
    display: block;
    height: 245px;
    overflow: hidden;
    background: #ebe8e1;
}

.lawblogx-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.lawblogx-card:hover .lawblogx-image img {
    transform: scale(1.07);
}


/* =========================================
   CATEGORY TAG
========================================= */

.lawblogx-tag {
    position: absolute;
    left: 17px;
    bottom: 16px;
    padding: 7px 13px;
    background: #ffffff;
    color: #a9783e;
    border-radius: 3px;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   CONTENT
========================================= */

.lawblogx-content {
    padding: 24px 24px 27px;
}

.lawblogx-info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 14px;
    color: #858a91;
}

.lawblogx-info span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.lawblogx-info i {
    color: #b88a4a;
}

.lawblogx-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #c6a476;
}


.lawblogx-content h3 {
    min-height: 66px;
    margin: 0 0 12px;
    color: #121927;
    line-height: 1.35;
}

.lawblogx-content p {
    min-height: 82px;
    margin: 0 0 20px;
    color: #747a84;
    line-height: 1.7;
}


/* =========================================
   READ MORE
========================================= */

.lawblogx-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #aa793f;
    text-decoration: none;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease;
}

.lawblogx-link i {
    transition: transform 0.3s ease;
}

.lawblogx-link:hover {
    color: #111827;
    border-color: #b88a4a;
}

.lawblogx-link:hover i {
    transform: translateX(5px);
}


/* =========================================
   BOTTOM BUTTON
========================================= */

.lawblogx-bottom {
    display: flex;
    justify-content: center;
    margin-top: 42px;
}

.lawblogx-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 13px 23px;
    border: 1px solid #b88a4a;
    border-radius: 3px;
    color: #a9783e;
    background: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.lawblogx-all-btn i {
    transition: transform 0.3s ease;
}

.lawblogx-all-btn:hover {
    background: #b88a4a;
    color: #ffffff;
}

.lawblogx-all-btn:hover i {
    transform: translateX(5px);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .lawblogx-section {
        padding: 80px 0 85px;
    }

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

    .lawblogx-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 12px);
        width: 100%;
        margin: 0 auto;
    }
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 767px) {

    .lawblogx-section {
        padding: 20px 0 70px;
    }

    .lawblogx-container {
        width: 90%;
    }

    .lawblogx-heading {
        margin-bottom: 38px;
    }

    .lawblogx-label {
        gap: 7px;
        letter-spacing: 1.3px;
    }

    .lawblogx-label span {
        width: 22px;
    }

    .lawblogx-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lawblogx-card:last-child {
        grid-column: auto;
        max-width: none;
        margin: 0;
    }

    .lawblogx-image {
        height: 235px;
    }

    .lawblogx-content {
        padding: 21px 20px 24px;
    }

    .lawblogx-content h3 {
        min-height: auto;
        margin-bottom: 11px;
    }

    .lawblogx-content p {
        min-height: auto;
        margin-bottom: 18px;
    }
}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 480px) {

    .lawblogx-section {
        padding: 55px 0 60px;
    }

    .lawblogx-container {
        width: 92%;
    }

    .lawblogx-image {
        height: 220px;
    }

    .lawblogx-content {
        padding: 19px 18px 22px;
    }

    .lawblogx-info {
        gap: 7px;
    }

    .lawblogx-bottom {
        margin-top: 30px;
    }

    .lawblogx-all-btn {
        width: 100%;
        justify-content: center;
    }
}


/* footer */

/* ================= FOOTER ================= */

.law-footer {
    position: relative;
    overflow: hidden;
    background: #222222;
    color: #ffffff;
    border-radius: 40px 40px 0 0;
    margin-top: 50px;
}


.law-footer-inner {
    position: relative;
    z-index: 2;
    max-width: 1320px;
    margin: 0 auto;
    padding: 110px 40px 55px;
}


/* ================= DECORATIVE IMAGES ================= */

.footer-gavel {
    position: absolute;
    left: -20px;
    bottom: 110px;
    width: 250px;
    height: 190px;
    opacity: .25;
    background-image: url("assets/images/gavel.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    pointer-events: none;
}


.footer-justice {
    position: absolute;
    right: 15px;
    top: 0;
    width: 260px;
    height: 430px;
    opacity: .12;
    background-image: url("assets/images/lady-justice.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: contain;
    pointer-events: none;
}


/* ================= MAIN FOOTER ================= */

.footer-main {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1.4fr;
    gap: 65px;
    align-items: start;
}


/* ================= ABOUT ================= */

.footer-about {
    max-width: 390px;
}


.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    text-decoration: none;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    margin-bottom: 30px;
}

.footer-logo img {
    width: 100%;
    height: 100%;
}


.footer-logo>span:last-child {
    color: #ffffff;
}


.footer-logo>span:last-child span {
    color: #bd8d4b;
}


.logo-icon {
    width: 39px;
    height: 39px;
    /* border: 2px solid #bd8d4b; */
    /* border-radius: 50%; */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #bd8d4b;
    font-size: 18px;
}


.footer-about-text {
    color: #e0e0e0;
    font-size: 16px;
    line-height: 1.55;
    margin: 0 0 27px;
    max-width: 390px;
}


/* ================= SOCIAL ================= */

.footer-social {
    display: flex;
    align-items: center;
    gap: 10px;
}


.footer-social a {
    width: 41px;
    height: 41px;
    border-radius: 50%;
    background: #414141;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 17px;
    transition: all .3s ease;
}


.footer-social a:hover {
    background: #bd8d4b;
    transform: translateY(-3px);
}


/* ================= HEADINGS ================= */

.footer-links h3,
.footer-contact h3 {
    position: relative;
    display: inline-block;
    margin: 5px 0 10px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 700;
}


.footer-title-line {
    display: block;
    width: 30px;
    height: 3px;
    background: #bd8d4b;
    margin-bottom: 20px;
}


/* ================= LINKS ================= */

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


.footer-links ul li {
    margin-bottom: 17px;
}


.footer-links ul li a {
    color: #eeeeee;
    text-decoration: none;
    font-size: 16px;
    transition: all .3s ease;
}


.footer-links ul li a:hover {
    color: #bd8d4b;
    padding-left: 5px;
}


/* ================= CONTACT ================= */

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    margin-bottom: 19px;
}


.contact-icon {
    width: 20px;
    min-width: 20px;
    color: #bd8d4b;
    font-size: 18px;
    padding-top: 2px;
}


.contact-item p {
    margin: 0;
    color: #eeeeee;
    font-size: 16px;
    line-height: 1.45;
}


/* ================= BOTTOM ================= */

.footer-bottom {
    position: relative;
    z-index: 3;
    border-top: 1px solid rgba(255, 255, 255, .10);
}


.footer-bottom-inner {
    max-width: 1320px;
    margin: 0 auto;
    min-height: 60px;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.copyright {
    color: #eeeeee;
    font-size: 15px;
    font-weight: 600;
}


.copyright span {
    color: #bd8d4b;
}


.footer-language {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #eeeeee;
    font-size: 15px;
    font-weight: 600;
}


.language-globe {
    width: 29px;
    height: 29px;
    border-radius: 50%;
    background: #414141;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}


.footer-language .fa-chevron-down {
    font-size: 11px;
    margin-left: 2px;
    color: #aaaaaa;
}



/* =====================================================
       TABLET
    ===================================================== */

@media (max-width: 1100px) {

    .law-footer-inner {
        padding: 80px 35px 45px;
    }


    .footer-main {
        grid-template-columns: 1.5fr 1fr 1fr;
        gap: 45px;
    }


    .footer-about {
        grid-column: span 3;
        max-width: 600px;
    }


    .footer-about-text {
        max-width: 600px;
    }


    .footer-justice {
        width: 200px;
        height: 330px;
    }

}



/* =====================================================
       MOBILE
    ===================================================== */

@media (max-width: 767px) {

    .law-footer {
        border-radius: 25px 25px 0 0;
        margin-top: 30px;
    }


    .law-footer-inner {
        padding: 55px 25px 40px;
    }


    .footer-main {
        display: flex;
        flex-direction: column;
        gap: 38px;
    }


    .footer-about {
        width: 100%;
        max-width: 100%;
    }


    .footer-logo {
        font-size: 32px;
        margin-bottom: 22px;
    }


    .logo-icon {
        width: 35px;
        height: 35px;
        font-size: 16px;
    }


    .footer-about-text {
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 23px;
        max-width: 100%;
    }


    .footer-social {
        gap: 9px;
    }


    .footer-social a {
        width: 39px;
        height: 39px;
        font-size: 16px;
    }


    .footer-links,
    .footer-contact {
        width: 100%;
    }


    .footer-links h3,
    .footer-contact h3 {
        font-size: 20px;
        margin-top: 0;
    }


    .footer-title-line {
        margin-bottom: 17px;
    }


    .footer-links ul li {
        margin-bottom: 14px;
    }


    .footer-links ul li a {
        font-size: 15px;
    }


    .contact-item {
        margin-bottom: 16px;
    }


    .contact-item p {
        font-size: 15px;
    }


    .footer-gavel {
        left: -70px;
        bottom: 170px;
        width: 180px;
        height: 140px;
        opacity: .12;
    }


    .footer-justice {
        right: -30px;
        top: 0;
        width: 150px;
        height: 250px;
        opacity: .07;
    }


    .footer-bottom-inner {
        min-height: auto;
        padding: 20px 25px;
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }


    .copyright {
        font-size: 13px;
        line-height: 1.5;
    }


    .footer-language {
        font-size: 14px;
    }

}



/* =====================================================
       SMALL MOBILE
    ===================================================== */

@media (max-width: 480px) {

    .law-footer-inner {
        padding: 45px 20px 35px;
    }


    .footer-logo {
        font-size: 29px;
    }


    .footer-logo .logo-icon {
        width: 33px;
        height: 33px;
    }


    .footer-about-text {
        font-size: 14px;
    }


    .footer-social a {
        width: 37px;
        height: 37px;
    }


    .footer-links h3,
    .footer-contact h3 {
        font-size: 19px;
    }


    .footer-links ul li a,
    .contact-item p {
        font-size: 14px;
    }


    .footer-bottom-inner {
        padding: 18px 20px;
    }


    .copyright {
        font-size: 12px;
    }

}

/* pricing page  */

/* ================= PRICING BANNER ================= */

.pricing-banner {
    position: relative;
    width: 100%;
    min-height: 300px;

    display: flex;
    align-items: center;
    justify-content: center;

    background-image: url("image/pricing-banner.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    overflow: hidden;
}


/* Dark Overlay */

.pricing-banner-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.62);

    z-index: 1;
}


/* Content */

.pricing-banner-content {
    position: relative;
    z-index: 2;

    width: 100%;
    text-align: center;

    padding: 40px 20px;
}


.pricing-banner-content h1 {
    color: #ffffff;
    margin: 0 0 12px;
    font-weight: 700;
}


/* Breadcrumb */

.pricing-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    color: #bd8d4b;
}


.pricing-breadcrumb a {
    color: #ffffff;
    text-decoration: none;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}


.pricing-breadcrumb a i {
    font-size: 13px;
}


.breadcrumb-arrow {
    color: #ffffff;

    display: inline-flex;
    align-items: center;
}


.breadcrumb-arrow i {
    font-size: 12px;
}


.pricing-breadcrumb>span:last-child {
    color: #bd8d4b;
}


/* ================= TABLET ================= */

@media (max-width: 991px) {

    .pricing-banner {
        min-height: 270px;
    }

    .pricing-banner-content {
        padding: 35px 20px;
    }

}


/* ================= MOBILE ================= */

@media (max-width: 767px) {

    .pricing-banner {
        min-height: 240px;

        background-position: center center;
    }


    .pricing-banner-overlay {
        background: rgba(0, 0, 0, 0.65);
    }


    .pricing-banner-content {
        padding: 30px 20px;
    }


    .pricing-banner-content h1 {
        margin-bottom: 10px;
    }


    .pricing-breadcrumb {
        gap: 8px;
    }

}


/* ================= SMALL MOBILE ================= */

@media (max-width: 480px) {

    .pricing-banner {
        min-height: 210px;
    }


    .pricing-banner-content {
        padding: 25px 15px;
    }


    .pricing-breadcrumb {
        gap: 7px;
    }

}

/* second section */
/* ================================
   PRICING SECTION
================================ */

.pricing-section {
    position: relative;
    overflow: hidden;
    padding: 40px 20px 100px;
    background: #f8f7f4;
    isolation: isolate;
}

.pricing-container {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    margin: 0 auto;
}


/* ================================
   BACKGROUND SHAPES
================================ */

.pricing-bg-shape {
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    border: 1px solid rgba(180, 139, 75, 0.12);
    z-index: 0;
}

.pricing-bg-shape::before,
.pricing-bg-shape::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(180, 139, 75, 0.08);
}

.pricing-bg-shape::before {
    inset: 35px;
}

.pricing-bg-shape::after {
    inset: 75px;
}

.pricing-shape-left {
    left: -280px;
    bottom: -180px;
}

.pricing-shape-right {
    right: -280px;
    top: -180px;
}


/* ================================
   HEADING
================================ */

.pricing-heading {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 55px;
}

.pricing-small-title {
    display: inline-block;
    position: relative;
    margin-bottom: 12px;
    color: #b4864d;
    letter-spacing: 2px;
    font-weight: 700;
}

.pricing-small-title::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 8px auto 0;
    background: #b4864d;
}

.pricing-heading h2 {
    margin: 0;
    line-height: 1.15;
    color: #171a27;
    font-weight: 700;
}

.pricing-heading h2 span {
    color: #b4864d;
}

.pricing-heading p {
    margin: 15px auto 28px;
    max-width: 550px;
    color: #777b85;
    line-height: 1.7;
}


/* ================================
   BILLING SWITCH
================================ */

.pricing-switch-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
}

.billing-label {
    color: #777b85;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s ease;
}

.billing-label.active {
    color: #171a27;
}

.billing-switch {
    width: 55px;
    height: 28px;
    padding: 3px;
    border: 0;
    border-radius: 30px;
    background: #d8d9dd;
    cursor: pointer;
    transition: 0.3s ease;
}

.billing-switch span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(0, 0, 0, 0.15);
    transition: 0.3s ease;
}

.billing-switch.active {
    background: #b4864d;
}

.billing-switch.active span {
    transform: translateX(27px);
}

.save-badge {
    position: absolute;
    margin-left: 270px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #f0e4d2;
    color: #a57436;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}


/* ================================
   PRICING GRID
================================ */

.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: stretch;
}


/* ================================
   CARD
================================ */

.pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 570px;
    padding: 34px 28px 28px;
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 18px;
    box-shadow: 0 15px 45px rgba(30, 30, 30, 0.07);
    transition: 0.35s ease;
}

.pricing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 22px 55px rgba(30, 30, 30, 0.11);
}


/* ================================
   FEATURED CARD
================================ */

.featured-card {
    border: 1px solid #c89a60;
    box-shadow: 0 20px 55px rgba(180, 134, 77, 0.16);
}

.featured-card:hover {
    box-shadow: 0 25px 65px rgba(180, 134, 77, 0.22);
}

.popular-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    padding: 7px 18px;
    border-radius: 30px;
    background: #b4864d;
    color: #ffffff;
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: 0.5px;
}


/* ================================
   PLAN ICON
================================ */

.plan-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 20px;
    border-radius: 12px;
    background: #f6eee4;
    color: #b4864d;
}

.plan-icon i {
    font-size: 19px;
}


/* ================================
   PLAN CONTENT
================================ */

.pricing-card h3 {
    margin: 0 0 12px;
    color: #181b27;
    font-weight: 700;
}

.plan-description {
    min-height: 54px;
    margin: 0;
    color: #777b85;
    line-height: 1.6;
}


/* ================================
   PRICE
================================ */

.price-box {
    display: flex;
    align-items: baseline;
    margin-top: 24px;
    color: #b4864d;
}

.currency {
    font-weight: 700;
}

.price {
    font-weight: 800;
    line-height: 1;
}

.yearly-price {
    display: none;
}

.price-duration {
    margin-left: 5px;
    color: #85858a;
}

.yearly-note {
    display: none;
    margin-top: 7px;
    color: #9b6f3d;
}


/* ================================
   DIVIDER
================================ */

.plan-divider {
    width: 100%;
    height: 1px;
    margin: 25px 0;
    background: #ededed;
}


/* ================================
   FEATURES
================================ */

.plan-features {
    display: flex;
    flex-direction: column;
    gap: 17px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    color: #4d505b;
    line-height: 1.5;
}

.feature-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 19px;
    height: 19px;
    margin-top: 1px;
    border: 1px solid #ddc5a3;
    border-radius: 50%;
    color: #b4864d;
}

.feature-icon i {
    font-size: 9px;
}


/* ================================
   BUTTON
================================ */

.pricing-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
    padding: 13px 20px;
    border: 1px solid #c89555;
    border-radius: 30px;
    background: transparent;
    color: #ad7d42;
    text-decoration: none;
    font-weight: 700;
    transition: 0.3s ease;
}

.pricing-btn:hover {
    background: #b4864d;
    color: #ffffff;
}

.pricing-btn-filled {
    background: #b4864d;
    color: #ffffff;
}

.pricing-btn-filled:hover {
    background: #946a38;
}


/* ================================
   YEARLY MODE
================================ */

.pricing-section.yearly-mode .monthly-price {
    display: none;
}

.pricing-section.yearly-mode .yearly-price {
    display: inline;
}

.pricing-section.yearly-mode .yearly-note {
    display: block;
}


/* ================================
   TABLET
================================ */

@media (max-width: 991px) {

    .pricing-section {
        padding: 75px 18px 80px;
    }

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

    .pricing-card:last-child {
        grid-column: 1 / -1;
        max-width: 50%;
        width: 100%;
        margin: 0 auto;
    }

    .save-badge {
        display: none;
    }
}


/* ================================
   MOBILE
================================ */

@media (max-width: 767px) {

    .pricing-section {
        padding: 30px 15px 65px;
    }

    .pricing-heading {
        margin-bottom: 45px;
    }

    .pricing-heading h2 {
        line-height: 1.25;
    }

    .pricing-heading p {
        line-height: 1.6;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .pricing-card {
        grid-column: auto !important;
        max-width: none !important;
        min-height: auto;
        padding: 30px 22px 24px;
    }

    .pricing-card:last-child {
        margin: 0;
    }

    .plan-description {
        min-height: auto;
    }

    .pricing-switch-wrap {
        gap: 9px;
    }

    .pricing-bg-shape {
        width: 260px;
        height: 260px;
    }

    .pricing-shape-left {
        left: -190px;
        bottom: -100px;
    }

    .pricing-shape-right {
        right: -190px;
        top: -100px;
    }
}


/* ================================
   SMALL MOBILE
================================ */

@media (max-width: 420px) {

    .pricing-section {
        padding-left: 12px;
        padding-right: 12px;
    }

    .pricing-card {
        padding: 27px 19px 22px;
        border-radius: 15px;
    }

    .pricing-heading {
        margin-bottom: 40px;
    }

    .popular-badge {
        top: -12px;
        padding: 6px 14px;
    }

    .plan-features {
        gap: 14px;
    }

    .pricing-btn {
        padding: 12px 15px;
    }
}

/* third section */
/* ==========================================
   PRACTICE AREA SECTION
========================================== */

.practice-section {
    position: relative;
    overflow: hidden;
    padding: 30px 20px 105px;
    background: #fbfaf8;
    isolation: isolate;
}

.practice-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}


/* ==========================================
   BACKGROUND DECORATION
========================================== */

.practice-decor {
    position: absolute;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(182, 137, 76, 0.10);
    border-radius: 50%;
    z-index: 0;
}

.practice-decor::before,
.practice-decor::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(182, 137, 76, 0.07);
    border-radius: 50%;
}

.practice-decor::before {
    inset: 45px;
}

.practice-decor::after {
    inset: 95px;
}

.practice-decor-left {
    left: -320px;
    top: 220px;
}

.practice-decor-right {
    right: -320px;
    bottom: 100px;
}


/* ==========================================
   HEADING
========================================== */

.practice-heading {
    max-width: 750px;
    margin: 0 auto 55px;
    text-align: center;
}

.practice-label {
    display: inline-block;
    position: relative;
    margin-bottom: 15px;
    color: #b3844b;
    font-weight: 700;
    letter-spacing: 2px;
}

.practice-label::after {
    content: "";
    display: block;
    width: 45px;
    height: 2px;
    margin: 9px auto 0;
    background: #b3844b;
}

.practice-heading h2 {
    margin: 0;
    color: #111522;
    line-height: 1.18;
    font-weight: 700;
}

.practice-heading h2 span {
    color: #b3844b;
}

.practice-heading p {
    max-width: 620px;
    margin: 17px auto 0;
    color: #777b84;
    line-height: 1.7;
}


/* ==========================================
   GRID
========================================== */

.practice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}


/* ==========================================
   CARD
========================================== */

.practice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 355px;
    padding: 32px 30px 28px;
    overflow: hidden;

    background: rgba(255, 255, 255, 0.94);
    border: 1px solid #ebe8e2;
    border-radius: 18px;

    box-shadow:
        0 12px 35px rgba(25, 25, 25, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.practice-card:hover {
    transform: translateY(-8px);

    border-color: rgba(179, 132, 75, 0.45);

    box-shadow:
        0 20px 50px rgba(25, 25, 25, 0.10);
}


/* ==========================================
   CARD TOP GOLD LINE
========================================== */

.practice-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: #b3844b;
    transition: width 0.4s ease;
}

.practice-card:hover::before {
    width: 100%;
}


/* ==========================================
   NUMBER
========================================== */

.practice-card-number {
    position: absolute;
    top: 24px;
    right: 27px;

    color: #eeeae4;

    font-weight: 700;
    line-height: 1;

    transition: color 0.3s ease;
}

.practice-card:hover .practice-card-number {
    color: #e5d7c5;
}


/* ==========================================
   ICON
========================================== */

.practice-icon {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 25px;

    border: 1px solid #e7d6bd;
    border-radius: 14px;

    background: #faf6ef;

    color: #b3844b;

    transition:
        background 0.3s ease,
        color 0.3s ease,
        transform 0.3s ease;
}

.practice-icon i {
    font-size: 21px;
}

.practice-card:hover .practice-icon {
    background: #b3844b;
    color: #ffffff;
    transform: rotate(-4deg);
}


/* ==========================================
   CONTENT
========================================== */

.practice-content {
    position: relative;
    z-index: 2;
}

.practice-content h3 {
    margin: 0 0 13px;
    color: #121522;
    font-weight: 700;
}

.practice-content p {
    margin: 0;
    color: #6e727c;
    line-height: 1.7;
}


/* ==========================================
   LINK
========================================== */

.practice-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: 25px;

    color: #b3844b;
    text-decoration: none;
    font-weight: 700;

    transition: gap 0.3s ease, color 0.3s ease;
}

.practice-link i {
    font-size: 12px;
    transition: transform 0.3s ease;
}

.practice-link:hover {
    color: #8e6535;
    gap: 13px;
}

.practice-link:hover i {
    transform: translateX(3px);
}


/* ==========================================
   SUBTLE CARD BACKGROUND ICON
========================================== */

.practice-card::after {
    content: "";
    position: absolute;

    right: -35px;
    bottom: -45px;

    width: 150px;
    height: 150px;

    border: 1px solid rgba(179, 132, 75, 0.07);
    border-radius: 50%;

    box-shadow:
        0 0 0 25px rgba(179, 132, 75, 0.025),
        0 0 0 50px rgba(179, 132, 75, 0.018);

    transition: transform 0.5s ease;
}

.practice-card:hover::after {
    transform: scale(1.15);
}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 991px) {

    .practice-section {
        padding: 75px 18px 85px;
    }

    .practice-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .practice-card {
        min-height: 340px;
    }

    .practice-heading {
        margin-bottom: 45px;
    }
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 767px) {

    .practice-section {
        padding: 60px 15px 70px;
    }

    .practice-heading {
        margin-bottom: 38px;
    }

    .practice-heading h2 {
        line-height: 1.3;
    }

    .practice-heading p {
        margin-top: 14px;
        line-height: 1.65;
    }

    .practice-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .practice-card {
        min-height: auto;
        padding: 28px 23px 25px;
        border-radius: 15px;
    }

    .practice-icon {
        width: 54px;
        height: 54px;
        margin-bottom: 21px;
    }

    .practice-card-number {
        top: 22px;
        right: 22px;
    }

    .practice-link {
        margin-top: 20px;
    }

    .practice-decor {
        width: 280px;
        height: 280px;
    }

    .practice-decor-left {
        left: -210px;
        top: 280px;
    }

    .practice-decor-right {
        right: -210px;
        bottom: 80px;
    }
}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 420px) {

    .practice-section {
        padding: 50px 12px 60px;
    }

    .practice-card {
        padding: 25px 20px 23px;
    }

    .practice-heading {
        margin-bottom: 32px;
    }

    .practice-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 19px;
    }

    .practice-icon i {
        font-size: 18px;
    }

    .practice-content p {
        line-height: 1.6;
    }
}


/* lawyers seciton */
/* =====================================================
   LAWYER DIRECTORY
===================================================== */

.lawyer-directory {
    position: relative;
    padding: 75px 20px 90px;
    background: #f7f6f3;
    overflow: hidden;
}

.lawyer-directory-container {
    max-width: 1280px;
    margin: 0 auto;

    display: grid;
    grid-template-columns: 275px minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}


/* =====================================================
   SIDEBAR
===================================================== */

.lawyer-sidebar {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lawyer-filter-box {
    padding: 24px 22px;
    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 15px;
    box-shadow: 0 7px 25px rgba(25, 25, 25, 0.035);
}


/* FILTER TITLE */

.filter-title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 15px;
    margin-bottom: 18px;

    border-bottom: 1px solid #e9e6df;
}

.filter-title h3 {
    margin: 0;
    color: #171a25;
    font-weight: 700;
}

.filter-title span {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 30px;
    height: 30px;

    border-radius: 8px;

    background: #faf5ed;
    color: #b38349;
}

.filter-title span i {
    font-size: 12px;
}


/* =====================================================
   SEARCH
===================================================== */

.lawyer-search {
    position: relative;
    display: flex;
    align-items: center;
}

.lawyer-search input {
    width: 100%;
    height: 46px;

    padding: 0 48px 0 14px;

    border: 1px solid #dedbd5;
    border-radius: 9px;

    outline: none;
    background: #ffffff;
    color: #20222b;

    transition: border-color 0.3s ease;
}

.lawyer-search input:focus {
    border-color: #b38349;
}

.lawyer-search button {
    position: absolute;
    right: 0;

    width: 45px;
    height: 46px;

    border: 0;
    border-left: 1px solid #e4e1db;

    background: transparent;
    color: #b38349;

    cursor: pointer;
}


/* =====================================================
   CHECKBOX
===================================================== */

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.filter-checkbox,
.filter-radio {
    position: relative;

    display: flex;
    align-items: center;
    gap: 9px;

    color: #59606b;
    cursor: pointer;

    transition: color 0.25s ease;
}

.filter-checkbox:hover,
.filter-radio:hover {
    color: #b38349;
}

.filter-checkbox input,
.filter-radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.custom-check {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    border: 1px solid #d9d5ce;
    border-radius: 4px;

    background: #ffffff;

    transition: 0.25s ease;
}

.filter-checkbox input:checked+.custom-check {
    border-color: #b38349;
    background: #b38349;
}

.filter-checkbox input:checked+.custom-check::after {
    content: "\f00c";

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    color: #ffffff;

    font-size: 8px;
    font-weight: 900;
}

.filter-checkbox small {
    margin-left: auto;
    color: #a2a4a9;
}


/* =====================================================
   RADIO
===================================================== */

.sort-options {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.custom-radio {
    flex: 0 0 auto;

    width: 15px;
    height: 15px;

    border: 1px solid #d4d1cb;
    border-radius: 50%;

    background: #ffffff;

    transition: 0.25s ease;
}

.filter-radio input:checked+.custom-radio {
    border: 4px solid #b38349;
}


/* =====================================================
   SHOW MORE
===================================================== */

.show-more-filter {
    display: flex;
    align-items: center;
    gap: 8px;

    margin-top: 18px;

    padding: 0;

    border: 0;
    background: transparent;

    color: #b38349;
    font-weight: 700;

    cursor: pointer;
}

.show-more-filter i {
    font-size: 10px;
}


/* =====================================================
   MAIN RESULTS
===================================================== */

.lawyer-results {
    min-width: 0;
}


/* =====================================================
   RESULTS HEADER
===================================================== */

.lawyer-results-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 20px;
    margin-bottom: 27px;
}

.results-heading>span {
    display: inline-block;

    margin-bottom: 8px;

    color: #b38349;

    font-weight: 700;
    letter-spacing: 1.8px;
}

.results-heading h1 {
    margin: 0;

    color: #171a25;
    line-height: 1.2;
    font-weight: 700;
}

.results-heading h1 strong {
    color: #b38349;
}

.results-heading p {
    max-width: 650px;

    margin: 10px 0 0;

    color: #777c85;
    line-height: 1.6;
}

.results-count {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    white-space: nowrap;
}

.results-count strong {
    color: #171a25;
    font-weight: 700;
}

.results-count span {
    color: #8a8d93;
}


/* =====================================================
   TOOLBAR
===================================================== */

.lawyer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 13px 17px;
    margin-bottom: 20px;

    background: #ffffff;
    border: 1px solid #ebe8e2;
    border-radius: 10px;
}

.toolbar-result {
    color: #777c85;
}

.toolbar-result strong {
    color: #22252d;
}

.toolbar-sort {
    display: flex;
    align-items: center;
    gap: 8px;

    color: #777c85;
}

.toolbar-sort select {
    min-width: 145px;

    padding: 8px 10px;

    border: 1px solid #dedbd5;
    border-radius: 7px;

    outline: none;
    background: #ffffff;
    color: #363941;

    cursor: pointer;
}


/* =====================================================
   LAWYER GRID
===================================================== */

.lawyer-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}


/* =====================================================
   LAWYER CARD
===================================================== */

.lawyer-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e9e6df;
    border-radius: 17px;

    box-shadow: 0 9px 28px rgba(30, 30, 30, 0.045);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.lawyer-card:hover {
    transform: translateY(-6px);

    border-color: rgba(179, 131, 73, 0.4);

    box-shadow: 0 18px 40px rgba(30, 30, 30, 0.09);
}


/* =====================================================
   LAWYER IMAGE
===================================================== */

.lawyer-image {
    position: relative;

    height: 230px;

    margin: 7px 7px 0;

    overflow: hidden;

    border-radius: 13px;

    background: #eee;
}

.lawyer-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.lawyer-card:hover .lawyer-image img {
    transform: scale(1.045);
}


/* VERIFIED */

.lawyer-verified {
    position: absolute;

    top: 12px;
    left: 12px;

    display: flex;
    align-items: center;
    gap: 5px;

    padding: 6px 9px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.94);

    color: #317a53;

    font-weight: 700;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.lawyer-verified i {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #317a53;
    color: #ffffff;

    font-size: 7px;
}


/* FAVORITE */

.lawyer-favorite {
    position: absolute;

    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.94);

    color: #6c7077;

    cursor: pointer;

    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.lawyer-favorite:hover {
    background: #b38349;
    color: #ffffff;
}


/* =====================================================
   CARD CONTENT
===================================================== */

.lawyer-card-content {
    padding: 20px 18px 18px;
}


/* NAME */

.lawyer-name-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.lawyer-name-row h2 {
    margin: 0 0 4px;

    color: #181b26;
    font-weight: 700;
}

.lawyer-name-row>div:first-child span {
    color: #858993;
}


/* RATING */

.lawyer-rating {
    display: flex;
    align-items: center;
    gap: 4px;

    color: #50545d;

    white-space: nowrap;
}

.lawyer-rating i {
    color: #e3a83d;
}


/* =====================================================
   META
===================================================== */

.lawyer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 13px;

    margin-top: 14px;

    color: #737781;
}

.lawyer-meta span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lawyer-meta i {
    color: #b38349;
}


/* =====================================================
   SPECIALTY
===================================================== */

.lawyer-specialty {
    display: inline-flex;

    margin-top: 15px;
    padding: 6px 10px;

    border-radius: 6px;

    background: #faf4eb;

    color: #a2733d;

    font-weight: 700;
}


/* =====================================================
   BOTTOM
===================================================== */

.lawyer-bottom {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    padding-top: 17px;
    margin-top: 17px;

    border-top: 1px solid #eeeae4;
}

.lawyer-price {
    display: flex;
    flex-direction: column;
}

.lawyer-price small {
    margin-bottom: 3px;
    color: #9699a0;
}

.lawyer-price strong {
    color: #171a25;
    font-weight: 700;
}

.lawyer-price strong span {
    color: #898c93;
    font-weight: 500;
}


/* =====================================================
   PROFILE BUTTON
===================================================== */

.lawyer-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 9px 12px;

    border: 1px solid #cda26d;
    border-radius: 7px;

    color: #aa783e;

    text-decoration: none;
    font-weight: 700;

    transition: 0.3s ease;
}

.lawyer-profile-btn i {
    font-size: 10px;
    transition: transform 0.3s ease;
}

.lawyer-profile-btn:hover {
    background: #b38349;
    color: #ffffff;
}

.lawyer-profile-btn:hover i {
    transform: translateX(3px);
}


/* =====================================================
   PAGINATION
===================================================== */

.lawyer-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    margin-top: 35px;
}

.lawyer-pagination button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid #e0ddd7;
    border-radius: 8px;

    background: #ffffff;

    color: #6c7078;

    cursor: pointer;

    transition: 0.3s ease;
}

.lawyer-pagination button:hover,
.lawyer-pagination button.active {
    border-color: #b38349;
    background: #b38349;
    color: #ffffff;
}

.lawyer-pagination span {
    color: #999ca2;
}


/* =====================================================
   MOBILE FILTER BAR
===================================================== */

.mobile-filter-bar {
    display: none;
}

.mobile-filter-header {
    display: none;
}

.lawyer-filter-overlay {
    display: none;
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1100px) {

    .lawyer-directory-container {
        grid-template-columns: 245px minmax(0, 1fr);
        gap: 20px;
    }

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

    .lawyer-image {
        height: 220px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .lawyer-directory {
        padding: 45px 14px 60px;
    }

    .lawyer-directory-container {
        display: block;
    }


    /* MOBILE FILTER BUTTON */

    .mobile-filter-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 15px;

        padding: 15px 16px;
        margin-bottom: 20px;

        background: #ffffff;

        border: 1px solid #ebe8e2;
        border-radius: 12px;

        box-shadow: 0 7px 22px rgba(25, 25, 25, 0.04);
    }

    .mobile-filter-bar>div {
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

    .mobile-filter-bar strong {
        color: #171a25;
    }

    .mobile-filter-bar span {
        color: #8a8d94;
    }

    .mobile-filter-bar button {
        display: flex;
        align-items: center;
        gap: 7px;

        padding: 10px 13px;

        border: 1px solid #cda26d;
        border-radius: 8px;

        background: #faf5ed;
        color: #a2733d;

        cursor: pointer;
    }


    /* SIDEBAR DRAWER */

    .lawyer-sidebar {
        position: fixed;

        top: 0;
        left: -100%;

        z-index: 9999;

        width: min(330px, 88%);

        height: 100vh;

        padding: 0 14px 30px;

        overflow-y: auto;

        background: #f7f6f3;

        box-shadow: 8px 0 35px rgba(0, 0, 0, 0.13);

        transition: left 0.35s ease;
    }

    .lawyer-sidebar.active {
        left: 0;
    }

    .mobile-filter-header {
        position: sticky;
        top: 0;
        z-index: 5;

        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 17px 5px;
        margin-bottom: 15px;

        background: #f7f6f3;

        border-bottom: 1px solid #e4e0d9;
    }

    .mobile-filter-header strong {
        color: #171a25;
    }

    .mobile-filter-header button {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 35px;
        height: 35px;

        border: 0;
        border-radius: 50%;

        background: #ffffff;
        color: #555a63;

        cursor: pointer;
    }


    /* OVERLAY */

    .lawyer-filter-overlay {
        position: fixed;

        inset: 0;

        z-index: 9998;

        display: block;

        background: rgba(18, 20, 27, 0.45);

        opacity: 0;
        visibility: hidden;

        transition: 0.3s ease;
    }

    .lawyer-filter-overlay.active {
        opacity: 1;
        visibility: visible;
    }


    /* RESULT HEADER */

    .lawyer-results-header {
        align-items: flex-start;
        margin-bottom: 22px;
    }

    .results-count {
        display: none;
    }

    .results-heading h1 {
        line-height: 1.3;
    }

    .results-heading p {
        margin-top: 8px;
    }


    /* TOOLBAR */

    .lawyer-toolbar {
        flex-direction: column;
        align-items: stretch;

        gap: 12px;

        padding: 12px 14px;
    }

    .toolbar-sort {
        justify-content: space-between;
    }

    .toolbar-sort select {
        flex: 1;
    }


    /* GRID */

    .lawyer-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .lawyer-image {
        height: 260px;
    }

    .lawyer-card-content {
        padding: 18px 16px 17px;
    }
}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .lawyer-directory {
        padding: 35px 11px 50px;
    }

    .mobile-filter-bar {
        padding: 13px;
    }

    .lawyer-image {
        height: 235px;
    }

    .lawyer-name-row {
        flex-direction: column;
        gap: 8px;
    }

    .lawyer-rating {
        align-self: flex-start;
    }

    .lawyer-bottom {
        align-items: stretch;
        flex-direction: column;
    }

    .lawyer-profile-btn {
        justify-content: center;
    }
}

/* service page  */
/* =========================================================
   LEGAL SERVICES SECTION
========================================================= */

.legal-services-section {
    position: relative;
    overflow: hidden;
    padding: 85px 20px 100px;
    background: #faf9f7;
}

.legal-services-container {
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.legal-services-heading {
    max-width: 760px;
    margin: 0 auto 42px;
    text-align: center;
}

.legal-services-label {
    display: inline-block;
    position: relative;
    margin-bottom: 13px;
    color: #b4874e;
    font-weight: 700;
    letter-spacing: 2px;
}

.legal-services-label::after {
    content: "";
    display: block;
    width: 42px;
    height: 2px;
    margin: 8px auto 0;
    background: #b4874e;
}

.legal-services-heading h1 {
    margin: 0;
    color: #111522;
    line-height: 1.2;
    font-weight: 700;
}

.legal-services-heading h1 span {
    color: #b4874e;
}

.legal-services-heading p {
    max-width: 610px;
    margin: 13px auto 25px;
    color: #777b84;
    line-height: 1.7;
}


/* =========================================================
   SEARCH
========================================================= */

.legal-service-search {
    position: relative;

    display: flex;
    align-items: center;

    max-width: 670px;
    height: 54px;

    margin: 0 auto;

    background: #ffffff;

    border: 1px solid #dedbd5;
    border-radius: 30px;

    box-shadow: 0 8px 25px rgba(30, 30, 30, 0.045);

    overflow: hidden;
}

.legal-service-search>i {
    margin-left: 19px;
    color: #b4874e;
}

.legal-service-search input {
    flex: 1;

    min-width: 0;

    height: 100%;

    padding: 0 15px;

    border: 0;
    outline: 0;

    background: transparent;

    color: #30333b;
}

.legal-service-search button {
    align-self: stretch;

    padding: 0 30px;

    border: 0;

    background: #b4874e;
    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition: background 0.3s ease;
}

.legal-service-search button:hover {
    background: #956b39;
}


/* =========================================================
   CATEGORY NAV
========================================================= */

.service-category-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 9px;

    margin-bottom: 40px;

    overflow-x: auto;

    scrollbar-width: none;
}

.service-category-wrapper::-webkit-scrollbar {
    display: none;
}

.service-category {
    flex: 0 0 auto;

    padding: 10px 16px;

    border: 1px solid #e3dfd8;
    border-radius: 25px;

    background: #ffffff;

    color: #676b74;

    cursor: pointer;

    transition: 0.3s ease;
}

.service-category:hover,
.service-category.active {
    border-color: #b4874e;
    background: #b4874e;
    color: #ffffff;
}


/* =========================================================
   RESULT BAR
========================================================= */

.services-result-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 18px;
}

.services-result-bar>div:first-child {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.services-result-bar strong {
    color: #171a25;
}

.services-result-bar span {
    color: #898d94;
}

.service-sort {
    display: flex;
    align-items: center;
    gap: 9px;

    color: #7c8088;
}

.service-sort select {
    padding: 9px 12px;

    border: 1px solid #dedbd5;
    border-radius: 8px;

    outline: none;

    background: #ffffff;
    color: #42464e;

    cursor: pointer;
}


/* =========================================================
   SERVICE GRID
========================================================= */

.legal-services-grid {
    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 23px;
}


/* =========================================================
   SERVICE CARD
========================================================= */

.legal-service-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #e8e5df;
    border-radius: 20px;

    box-shadow: 0 12px 35px rgba(25, 25, 25, 0.055);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.legal-service-card:hover {
    transform: translateY(-7px);

    border-color: rgba(180, 135, 77, 0.35);

    box-shadow: 0 20px 50px rgba(25, 25, 25, 0.10);
}


/* =========================================================
   IMAGE
========================================================= */

.service-card-image {
    position: relative;

    height: 245px;

    margin: 7px 7px 0;

    overflow: hidden;

    border-radius: 15px;

    background: #ddd;
}

.service-card-image>img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.legal-service-card:hover .service-card-image>img {
    transform: scale(1.055);
}


/* =========================================================
   CATEGORY BADGE
========================================================= */

.service-category-badge {
    position: absolute;

    top: 13px;
    left: 13px;

    padding: 6px 11px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 20px;

    background: rgba(30, 30, 30, 0.46);

    color: #ffffff;

    backdrop-filter: blur(5px);
}


/* =========================================================
   HEART
========================================================= */

.service-heart {
    position: absolute;

    top: 12px;
    right: 12px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.92);

    color: #666a72;

    cursor: pointer;

    transition: 0.3s ease;
}

.service-heart:hover,
.service-heart.active {
    background: #b4874e;
    color: #ffffff;
}


/* =========================================================
   LAWYER OVERLAY
========================================================= */

.service-lawyer {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 38px 15px 13px;

    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.88),
            rgba(0, 0, 0, 0.52),
            transparent);

    color: #ffffff;
}

.service-lawyer img {
    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    border: 2px solid #ffffff;
    border-radius: 50%;

    object-fit: cover;
}

.service-lawyer>div {
    min-width: 0;

    display: flex;
    flex-direction: column;
}

.service-lawyer strong {
    color: #ffffff;
    font-weight: 700;
}

.service-lawyer>div>span {
    color: rgba(255, 255, 255, 0.76);
}

.service-rating {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-top: 3px;

    color: #ffffff;
}

.service-rating i {
    color: #f3bd48;
}

.service-rating small {
    color: rgba(255, 255, 255, 0.72);
}


/* =========================================================
   CONTENT
========================================================= */

.service-card-content {
    padding: 20px 18px 17px;
}

.service-card-content h2 {
    margin: 0 0 9px;

    color: #151823;
    line-height: 1.3;
    font-weight: 700;
}

.service-card-content>p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;

    overflow: hidden;

    min-height: 44px;

    margin: 0;

    color: #777b84;
    line-height: 1.55;
}


/* =========================================================
   INFO BOXES
========================================================= */

.service-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    gap: 8px;

    margin-top: 17px;
}

.service-info>div {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 59px;

    padding: 7px 5px;

    border-radius: 11px;

    background: #faf7f2;

    text-align: center;
}

.service-info>div:nth-child(2) {
    background: #f1faf4;
}

.service-info>div:nth-child(3) {
    background: #fff9e9;
}

.service-info span {
    margin-bottom: 4px;

    color: #858990;
}

.service-info strong {
    color: #22252d;
    font-weight: 700;
}


/* =========================================================
   FOOTER
========================================================= */

.service-card-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 12px;

    padding-top: 16px;
    margin-top: 15px;

    border-top: 1px solid #ece9e3;
}

.service-price {
    display: flex;
    flex-direction: column;
}

.service-price>span {
    margin-bottom: 4px;

    color: #8d9198;

    letter-spacing: 0.5px;
}

.service-price strong {
    color: #151821;
    font-weight: 800;
}

.service-price strong small {
    color: #858991;
    font-weight: 500;
}


/* =========================================================
   DETAILS BUTTON
========================================================= */

.service-details-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    min-width: 91px;

    padding: 10px 14px;

    border-radius: 25px;

    background: #171717;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;

    transition: 0.3s ease;
}

.service-details-btn i {
    transition: transform 0.3s ease;
}

.service-details-btn:hover {
    background: #b4874e;
}

.service-details-btn:hover i {
    transform: translateX(4px);
}


/* =========================================================
   PAGINATION
========================================================= */

.legal-services-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 40px;
}

.legal-services-pagination button {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 38px;
    height: 38px;

    border: 1px solid #dedbd5;
    border-radius: 8px;

    background: #ffffff;

    color: #696d75;

    cursor: pointer;

    transition: 0.3s ease;
}

.legal-services-pagination button:hover,
.legal-services-pagination button.active {
    border-color: #b4874e;
    background: #b4874e;
    color: #ffffff;
}

.legal-services-pagination span {
    color: #999ca2;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .legal-services-section {
        padding: 70px 18px 85px;
    }

    .legal-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .legal-services-section {
        padding: 55px 14px 65px;
    }

    .legal-services-heading {
        margin-bottom: 30px;
    }

    .legal-services-heading h1 {
        line-height: 1.3;
    }

    .legal-services-heading p {
        line-height: 1.6;
    }


    /* SEARCH */

    .legal-service-search {
        height: 50px;
    }

    .legal-service-search>i {
        margin-left: 15px;
    }

    .legal-service-search button {
        padding: 0 20px;
    }


    /* CATEGORIES */

    .service-category-wrapper {
        justify-content: flex-start;

        margin-right: -14px;
        margin-left: -14px;

        padding: 3px 14px 8px;
    }


    /* RESULT */

    .services-result-bar {
        align-items: flex-start;
        flex-direction: column;

        gap: 13px;

        margin-bottom: 18px;
    }

    .service-sort {
        width: 100%;

        justify-content: space-between;
    }

    .service-sort select {
        flex: 1;
    }


    /* GRID */

    .legal-services-grid {
        grid-template-columns: 1fr;

        gap: 19px;
    }


    /* IMAGE */

    .service-card-image {
        height: 250px;
    }


    /* CARD */

    .service-card-content {
        padding: 19px 16px 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .legal-services-section {
        padding: 45px 11px 55px;
    }

    .legal-services-heading {
        margin-bottom: 25px;
    }

    .legal-service-search button {
        padding: 0 15px;
    }

    .service-category {
        padding: 9px 13px;
    }

    .service-card-image {
        height: 225px;
    }

    .service-lawyer {
        padding-right: 11px;
        padding-left: 11px;
    }

    .service-lawyer img {
        width: 43px;
        height: 43px;
    }

    .service-card-footer {
        align-items: stretch;
        flex-direction: column;
    }

    .service-details-btn {
        width: 100%;
    }

    .service-price {
        align-items: flex-start;
    }

}

/* service detail */
/* =========================================================
   SERVICE DETAIL PAGE
========================================================= */

.service-detail-page {
    width: 100%;
    padding: 55px 20px 90px;
    background: #fafafa;
    overflow: hidden;
}

.service-detail-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   LAWYER HERO
========================================================= */

.service-lawyer-hero {
    position: relative;
    min-height: 140px;

    padding: 25px 30px;

    border-radius: 17px;

    background:
        radial-gradient(circle at 100% 0%,
            rgba(28, 52, 104, 0.95) 0,
            rgba(28, 52, 104, 0.95) 25%,
            transparent 25.1%),
        linear-gradient(105deg,
            #11313a,
            #071722);

    overflow: hidden;

    box-shadow: 0 12px 35px rgba(15, 25, 35, 0.09);
}

.service-lawyer-hero::after {
    content: "";

    position: absolute;

    right: -100px;
    top: -120px;

    width: 380px;
    height: 380px;

    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
}

.lawyer-hero-profile {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;

    gap: 18px;
}

.lawyer-hero-image {
    flex: 0 0 auto;

    width: 80px;
    height: 80px;

    padding: 3px;

    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
}

.lawyer-hero-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}

.lawyer-hero-info {
    min-width: 0;
}

.lawyer-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;

    margin-bottom: 6px;
}

.lawyer-badges span {
    padding: 5px 10px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;

    background: rgba(255, 255, 255, 0.07);

    color: #ffffff;
}

.lawyer-badges span:last-child {
    background: rgba(33, 151, 101, 0.18);
    border-color: rgba(49, 180, 123, 0.35);
}

.lawyer-hero-info h1 {
    margin: 0 0 4px;

    color: #ffffff;

    line-height: 1.15;
}

.lawyer-meta {
    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(255, 255, 255, 0.82);
}

.lawyer-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: 9px;

    color: #ffffff;
}

.lawyer-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lawyer-stars i {
    color: #65727a;
}

.lawyer-stars strong {
    margin-left: 5px;
}

.lawyer-stars span {
    color: rgba(255, 255, 255, 0.75);
}

.stat-divider {
    color: #718087;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.service-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 313px;

    gap: 18px;

    margin-top: 18px;

    align-items: start;
}


/* =========================================================
   COMMON CARD
========================================================= */

.service-detail-card {
    padding: 21px 18px;

    margin-bottom: 17px;

    background: #ffffff;

    border: 1px solid #f0efed;

    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(25, 25, 25, 0.045);
}

.detail-label {
    display: block;

    margin-bottom: 8px;

    color: #a57942;

    font-weight: 700;

    letter-spacing: 1px;
}


/* =========================================================
   OVERVIEW
========================================================= */

.overview-card h2 {
    margin: 0 0 8px;

    color: #111522;

    line-height: 1.3;
}

.overview-card p {
    margin: 0;

    color: #656b76;

    line-height: 1.65;
}


/* =========================================================
   INCLUDED
========================================================= */

.included-list {
    display: flex;
    flex-direction: column;

    gap: 13px;
}

.included-item {
    display: flex;
    align-items: flex-start;

    gap: 10px;
}

.included-icon {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 50%;

    background: #f6f1e9;

    color: #c08c4e;
}

.included-item>div:last-child {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.included-item strong {
    color: #161922;
}

.included-item span {
    color: #777c85;
}


/* =========================================================
   TAGS
========================================================= */

.tags-card {
    padding-top: 20px;
    padding-bottom: 20px;
}

.service-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;
}

.service-tags span {
    padding: 7px 12px;

    border: 1px solid #e4d8c8;
    border-radius: 20px;

    background: #fffdf9;

    color: #454951;
}


/* =========================================================
   TAKE SERVICE
========================================================= */

.take-service-card {
    padding-bottom: 18px;
}

.take-service-profile {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 17px;
}

.take-service-profile>img {
    width: 42px;
    height: 42px;

    object-fit: cover;

    border-radius: 50%;
}

.take-service-info {
    display: flex;
    flex-direction: column;

    min-width: 0;
}

.take-service-info strong {
    color: #161922;
}

.take-service-info span {
    color: #727781;
}

.view-profile-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-left: 5px;

    padding: 8px 14px;

    border: 1px solid #bd8d53;
    border-radius: 20px;

    color: #a67840;

    text-decoration: none;

    transition: 0.3s ease;
}

.view-profile-btn:hover {
    background: #bd8d53;
    color: #ffffff;
}

.login-continue-btn {
    width: 100%;

    height: 38px;

    border: 0;
    border-radius: 20px;

    background: #bd9158;

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}

.login-continue-btn:hover {
    background: #a87940;
}


/* =========================================================
   SIDEBAR
========================================================= */

.booking-card {
    padding: 20px 18px;

    background: #ffffff;

    border: 1px solid #f0efed;

    border-radius: 15px;

    box-shadow: 0 8px 25px rgba(25, 25, 25, 0.05);

    position: sticky;
    top: 20px;
}

.booking-price-section {
    padding-bottom: 17px;
}

.booking-price {
    color: #0f1118;

    font-weight: 800;
    line-height: 1.2;
}

.booking-price small {
    color: #70757e;
    font-weight: 500;
}

.booking-price-section p {
    margin: 6px 0 0;

    color: #737881;
}


/* =========================================================
   BOOKING BUTTONS
========================================================= */

.booking-buttons {
    display: flex;
    flex-direction: column;

    gap: 8px;

    padding-bottom: 15px;

    border-bottom: 1px solid #e4e6e8;
}

.book-consultation-btn,
.send-message-btn {
    width: 100%;

    min-height: 38px;

    border-radius: 22px;

    cursor: pointer;

    font-weight: 700;

    transition: 0.3s ease;
}

.book-consultation-btn {
    border: 1px solid #000;

    background: #000000;

    color: #ffffff;
}

.book-consultation-btn:hover {
    background: #bd9158;
    border-color: #bd9158;
}

.send-message-btn {
    border: 1px solid #bd9158;

    background: #ffffff;

    color: #bd9158;
}

.send-message-btn:hover {
    background: #bd9158;
    color: #ffffff;
}

.booking-buttons i {
    margin-left: 7px;

    transition: transform 0.3s ease;
}

.booking-buttons button:hover i {
    transform: translateX(4px);
}


/* =========================================================
   SIDEBAR INFORMATION
========================================================= */

.sidebar-info-block {
    padding: 15px 0;

    border-bottom: 1px solid #e3e5e7;
}

.sidebar-info-block:last-child {
    border-bottom: 0;

    padding-bottom: 0;
}

.sidebar-heading {
    display: block;

    margin-bottom: 10px;

    color: #151821;

    font-weight: 800;

    letter-spacing: 0.8px;
}

.sidebar-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 6px 0;
}

.sidebar-info-row span {
    color: #777c84;
}

.sidebar-info-row strong {
    color: #151821;

    text-align: right;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .service-detail-page {
        padding: 45px 16px 70px;
    }

    .service-detail-layout {
        grid-template-columns: 1fr;
    }

    .service-detail-sidebar {
        order: -1;
    }

    .booking-card {
        position: static;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .service-detail-page {
        padding: 30px 12px 55px;
    }

    .service-lawyer-hero {
        padding: 20px 16px;

        border-radius: 14px;
    }

    .lawyer-hero-profile {
        align-items: flex-start;

        gap: 13px;
    }

    .lawyer-hero-image {
        width: 65px;
        height: 65px;
    }

    .lawyer-badges {
        margin-bottom: 5px;
    }

    .lawyer-meta {
        align-items: flex-start;
        flex-direction: column;

        gap: 2px;
    }

    .lawyer-meta b {
        display: none;
    }

    .lawyer-stats {
        align-items: flex-start;
        flex-direction: column;

        gap: 4px;

        margin-top: 8px;
    }

    .stat-divider {
        display: none;
    }


    /* SIDEBAR */

    .service-detail-sidebar {
        order: 0;
    }

    .booking-card {
        padding: 18px 15px;

        border-radius: 14px;
    }


    /* CARDS */

    .service-detail-card {
        padding: 18px 15px;

        margin-bottom: 13px;

        border-radius: 13px;
    }


    /* PROFILE */

    .take-service-profile {
        align-items: flex-start;

        flex-wrap: wrap;
    }

    .view-profile-btn {
        margin-left: 52px;
        margin-top: -5px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .service-detail-page {
        padding-right: 9px;
        padding-left: 9px;
    }

    .lawyer-hero-profile {
        align-items: center;
        flex-direction: column;

        text-align: center;
    }

    .lawyer-hero-info {
        width: 100%;
    }

    .lawyer-badges,
    .lawyer-stats,
    .lawyer-meta {
        justify-content: center;
    }

    .lawyer-stats {
        align-items: center;
    }

    .take-service-profile {
        display: grid;

        grid-template-columns: auto 1fr;

        align-items: center;
    }

    .view-profile-btn {
        grid-column: 1 / -1;

        width: 100%;

        margin: 5px 0 0;
    }

}

/* blog section */
/* =========================================================
   LEGAL BLOG PAGE
========================================================= */

.legal-blog-page {
    width: 100%;
    padding: 55px 20px 90px;
    background: #fafafa;
    overflow: hidden;
}

.legal-blog-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


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

.legal-blog-hero {
    position: relative;

    min-height: 330px;

    display: flex;
    align-items: center;

    padding: 55px 60px;

    overflow: hidden;

    border-radius: 22px;

    background:
        radial-gradient(circle at 90% 50%,
            rgba(190, 145, 87, 0.15),
            transparent 34%),
        linear-gradient(110deg,
            #071923,
            #112f38);

    box-shadow: 0 15px 45px rgba(15, 28, 35, 0.10);
}

.legal-blog-hero-content {
    position: relative;
    z-index: 2;

    width: 650px;
    max-width: 100%;
}

.legal-blog-eyebrow {
    display: inline-block;

    margin-bottom: 12px;

    color: #c39760;

    font-weight: 700;
    letter-spacing: 2px;
}

.legal-blog-hero h1 {
    margin: 0;

    color: #ffffff;

    line-height: 1.13;
}

.legal-blog-hero h1 em {
    color: #c69a62;

    font-style: italic;
}

.legal-blog-hero p {
    max-width: 600px;

    margin: 17px 0 25px;

    color: rgba(255, 255, 255, 0.74);

    line-height: 1.7;
}


/* SEARCH */

.legal-blog-search {
    display: flex;
    align-items: center;

    width: 100%;
    max-width: 600px;
    height: 52px;

    padding-left: 17px;

    background: #ffffff;

    border: 1px solid #eeeeee;
    border-radius: 28px;

    overflow: hidden;
}

.legal-blog-search>i {
    color: #a4a8ae;
}

.legal-blog-search input {
    flex: 1;

    min-width: 0;

    height: 100%;

    padding: 0 12px;

    border: 0;
    outline: none;

    color: #222;
}

.legal-blog-search button {
    height: 100%;

    padding: 0 28px;

    border: 0;

    background: #bd9057;

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition: 0.3s ease;
}

.legal-blog-search button:hover {
    background: #a97b43;
}


/* HERO SHAPE */

.legal-blog-hero-shape {
    position: absolute;

    right: 60px;
    top: 50%;

    width: 240px;
    height: 240px;

    transform: translateY(-50%);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.legal-blog-hero-shape::before,
.legal-blog-hero-shape::after {
    content: "";

    position: absolute;

    inset: 20px;

    border: 1px solid rgba(255, 255, 255, 0.06);

    border-radius: 50%;
}

.legal-blog-hero-shape::after {
    inset: 55px;
}

.legal-blog-hero-shape span {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color: rgba(198, 154, 98, 0.28);

    font-size: 130px;
}


/* =========================================================
   CATEGORY BAR
========================================================= */

.legal-blog-categories {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 22px 0;

    overflow-x: auto;

    padding-bottom: 3px;

    scrollbar-width: none;
}

.legal-blog-categories::-webkit-scrollbar {
    display: none;
}

.blog-category-btn {
    flex: 0 0 auto;

    padding: 9px 16px;

    border: 1px solid #e4e0da;
    border-radius: 22px;

    background: #ffffff;

    color: #656a73;

    cursor: pointer;

    transition: 0.3s ease;
}

.blog-category-btn:hover,
.blog-category-btn.active {
    border-color: #bd9057;

    background: #bd9057;

    color: #ffffff;
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.legal-blog-featured {
    display: grid;

    grid-template-columns: 1fr 1fr;

    min-height: 360px;

    margin-bottom: 45px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eeeae4;

    border-radius: 18px;

    box-shadow: 0 10px 35px rgba(20, 20, 20, 0.05);
}

.legal-blog-featured-image {
    position: relative;

    min-height: 350px;
}

.legal-blog-featured-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.blog-image-category {
    position: absolute;

    top: 18px;
    left: 18px;

    padding: 7px 13px;

    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 20px;

    background: rgba(0, 0, 0, 0.48);

    color: #ffffff;

    backdrop-filter: blur(5px);
}

.legal-blog-featured-content {
    display: flex;
    flex-direction: column;

    justify-content: center;

    padding: 35px 38px;
}

.blog-meta,
.blog-card-meta {
    display: flex;
    align-items: center;

    gap: 15px;

    color: #898d94;
}

.blog-meta i {
    margin-right: 4px;

    color: #bd9057;
}

.legal-blog-featured-content h2 {
    margin: 14px 0 12px;

    color: #10141d;

    line-height: 1.25;
}

.legal-blog-featured-content>p {
    margin: 0;

    color: #70757e;

    line-height: 1.7;
}

.blog-author {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-top: 25px;

    padding-top: 18px;

    border-top: 1px solid #eeeeee;
}

.blog-author img {
    width: 44px;
    height: 44px;

    object-fit: cover;

    border-radius: 50%;
}

.blog-author div {
    display: flex;
    flex-direction: column;

    gap: 2px;
}

.blog-author strong {
    color: #181b23;
}

.blog-author span {
    color: #888d95;
}

.blog-author a {
    margin-left: auto;

    color: #b68145;

    text-decoration: none;

    font-weight: 700;
}

.blog-author a i {
    margin-left: 5px;

    transition: 0.3s ease;
}

.blog-author a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   CONTENT LAYOUT
========================================================= */

.legal-blog-content-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 300px;

    gap: 25px;

    align-items: start;
}


/* =========================================================
   SECTION HEADING
========================================================= */

.legal-blog-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    margin-bottom: 22px;
}

.legal-blog-section-heading>div:first-child>span {
    color: #b58148;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.legal-blog-section-heading h2 {
    margin: 5px 0 0;

    color: #11151d;
}

.blog-sort-box select {
    height: 38px;

    padding: 0 12px;

    border: 1px solid #e3ded7;
    border-radius: 20px;

    outline: none;

    background: #ffffff;

    color: #50555d;

    cursor: pointer;
}


/* =========================================================
   BLOG GRID
========================================================= */

.legal-blog-grid {
    display: grid;

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

    gap: 20px;
}

.legal-blog-card {
    overflow: hidden;

    background: #ffffff;

    border: 1px solid #eeeae4;

    border-radius: 15px;

    box-shadow: 0 7px 25px rgba(20, 20, 20, 0.045);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.legal-blog-card:hover {
    transform: translateY(-5px);

    box-shadow: 0 15px 35px rgba(20, 20, 20, 0.09);
}

.legal-blog-card-image {
    position: relative;

    height: 205px;

    overflow: hidden;
}

.legal-blog-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.legal-blog-card:hover .legal-blog-card-image img {
    transform: scale(1.05);
}

.legal-blog-card-image span {
    position: absolute;

    top: 13px;
    left: 13px;

    padding: 6px 11px;

    border-radius: 18px;

    background: rgba(255, 255, 255, 0.92);

    color: #a8753e;

    font-weight: 700;
}

.legal-blog-card-body {
    padding: 18px;
}

.blog-card-meta {
    justify-content: space-between;

    margin-bottom: 10px;
}

.legal-blog-card h3 {
    margin: 0 0 9px;

    color: #151923;

    line-height: 1.35;
}

.legal-blog-card p {
    margin: 0;

    color: #747982;

    line-height: 1.6;
}

.blog-read-more {
    display: inline-flex;
    align-items: center;

    margin-top: 15px;

    color: #b27f46;

    text-decoration: none;

    font-weight: 700;
}

.blog-read-more i {
    margin-left: 7px;

    transition: 0.3s ease;
}

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


/* =========================================================
   SIDEBAR
========================================================= */

.blog-sidebar-card {
    padding: 20px;

    margin-bottom: 18px;

    background: #ffffff;

    border: 1px solid #eeeae4;

    border-radius: 15px;

    box-shadow: 0 7px 25px rgba(20, 20, 20, 0.045);
}

.blog-sidebar-title>span {
    color: #b58148;

    font-weight: 700;

    letter-spacing: 1.3px;
}

.blog-sidebar-title h3 {
    margin: 4px 0 17px;

    color: #151923;
}


/* POPULAR */

.popular-blog-item {
    display: flex;

    gap: 12px;

    padding: 13px 0;

    border-top: 1px solid #eeeeee;

    color: inherit;

    text-decoration: none;
}

.popular-blog-number {
    flex: 0 0 auto;

    color: #c69a62;

    font-weight: 800;
}

.popular-blog-item strong {
    display: block;

    color: #252932;

    line-height: 1.4;
}

.popular-blog-item span {
    display: block;

    margin-top: 5px;

    color: #92969d;
}


/* =========================================================
   NEWSLETTER
========================================================= */

.blog-newsletter-card {
    padding: 25px 20px;

    margin-bottom: 18px;

    border-radius: 15px;

    background:
        linear-gradient(145deg,
            #112f38,
            #071821);

    color: #ffffff;
}

.newsletter-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    margin-bottom: 15px;

    border-radius: 50%;

    background: rgba(198, 154, 98, 0.14);

    color: #c69a62;
}

.blog-newsletter-card>span {
    color: #c69a62;

    font-weight: 700;

    letter-spacing: 1px;
}

.blog-newsletter-card h3 {
    margin: 8px 0;

    color: #ffffff;

    line-height: 1.35;
}

.blog-newsletter-card p {
    margin: 0 0 17px;

    color: rgba(255, 255, 255, 0.68);

    line-height: 1.55;
}

.blog-newsletter-card form {
    display: flex;
    flex-direction: column;

    gap: 8px;
}

.blog-newsletter-card input {
    width: 100%;

    height: 42px;

    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 22px;

    outline: none;

    background: rgba(255, 255, 255, 0.08);

    color: #ffffff;
}

.blog-newsletter-card input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.blog-newsletter-card button {
    height: 42px;

    border: 0;
    border-radius: 22px;

    background: #bd9057;

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;
}


/* =========================================================
   CATEGORY SIDEBAR
========================================================= */

.sidebar-category-list {
    display: flex;
    flex-direction: column;
}

.sidebar-category-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 10px 0;

    border-top: 1px solid #eeeeee;

    color: #626770;

    text-decoration: none;

    transition: 0.25s ease;
}

.sidebar-category-list a:hover {
    padding-left: 4px;

    color: #b17d45;
}

.sidebar-category-list span {
    color: #a4a7ad;
}


/* =========================================================
   PAGINATION
========================================================= */

.legal-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    margin-top: 35px;
}

.legal-blog-pagination button {
    width: 37px;
    height: 37px;

    border: 1px solid #e2ddd6;
    border-radius: 50%;

    background: #ffffff;

    color: #626770;

    cursor: pointer;

    transition: 0.3s ease;
}

.legal-blog-pagination button:hover,
.legal-blog-pagination button.active {
    border-color: #bd9057;

    background: #bd9057;

    color: #ffffff;
}


/* =========================================================
   NO RESULT
========================================================= */

.legal-blog-no-result {
    display: none;

    padding: 55px 20px;

    text-align: center;

    background: #ffffff;

    border: 1px solid #eeeae4;

    border-radius: 15px;
}

.legal-blog-no-result i {
    color: #bd9057;

    font-size: 35px;
}

.legal-blog-no-result h3 {
    margin: 10px 0 5px;
}

.legal-blog-no-result p {
    margin: 0;

    color: #858990;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .legal-blog-page {
        padding: 40px 16px 70px;
    }

    .legal-blog-content-layout {
        grid-template-columns: 1fr;
    }

    .legal-blog-sidebar {
        display: grid;

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

        gap: 18px;
    }

    .blog-sidebar-card,
    .blog-newsletter-card {
        margin-bottom: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .legal-blog-page {
        padding: 28px 12px 55px;
    }


    /* HERO */

    .legal-blog-hero {
        min-height: auto;

        padding: 38px 20px;

        border-radius: 17px;
    }

    .legal-blog-hero h1 {
        line-height: 1.2;
    }

    .legal-blog-hero p {
        margin-top: 14px;
    }

    .legal-blog-hero-shape {
        right: -100px;
        top: 10px;

        width: 250px;
        height: 250px;

        opacity: 0.6;
    }


    /* SEARCH */

    .legal-blog-search {
        height: auto;

        flex-wrap: wrap;

        padding: 6px;
    }

    .legal-blog-search>i {
        margin-left: 8px;
    }

    .legal-blog-search input {
        height: 40px;
    }

    .legal-blog-search button {
        width: 100%;

        height: 40px;

        border-radius: 22px;
    }


    /* CATEGORIES */

    .legal-blog-categories {
        margin: 16px 0;

        padding-bottom: 5px;
    }


    /* FEATURED */

    .legal-blog-featured {
        grid-template-columns: 1fr;

        margin-bottom: 32px;
    }

    .legal-blog-featured-image {
        min-height: 230px;

        height: 230px;
    }

    .legal-blog-featured-content {
        padding: 22px 18px;
    }

    .blog-author {
        align-items: center;

        flex-wrap: wrap;
    }

    .blog-author a {
        width: 100%;

        margin: 8px 0 0;

        padding-top: 12px;

        border-top: 1px solid #eeeeee;
    }


    /* HEADING */

    .legal-blog-section-heading {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }

    .blog-sort-box {
        width: 100%;
    }

    .blog-sort-box select {
        width: 100%;
    }


    /* GRID */

    .legal-blog-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }

    .legal-blog-card-image {
        height: 220px;
    }


    /* SIDEBAR */

    .legal-blog-sidebar {
        display: flex;

        flex-direction: column;

        gap: 0;
    }

    .blog-sidebar-card,
    .blog-newsletter-card {
        margin-bottom: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .legal-blog-page {
        padding-right: 9px;
        padding-left: 9px;
    }

    .legal-blog-hero {
        padding: 30px 16px;
    }

    .legal-blog-card-image {
        height: 195px;
    }

    .legal-blog-card-body {
        padding: 16px;
    }

    .blog-meta,
    .blog-card-meta {
        gap: 8px;
    }

}

/* blog detail */
/* =========================================================
   BLOG DETAIL SECTION
========================================================= */

.blog-detail-section {
    width: 100%;
    padding: 35px 20px 80px;
    background: #ffffff;
}

.blog-detail-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.blog-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 290px;

    gap: 24px;

    align-items: start;
}


/* =========================================================
   MAIN BLOG
========================================================= */

.blog-detail-main {
    min-width: 0;

    overflow: hidden;

    border-radius: 14px;

    background: #ffffff;

    box-shadow:
        0 8px 30px rgba(20, 25, 30, 0.06);

    border: 1px solid #f0eeeb;
}


/* =========================================================
   BLOG IMAGE
========================================================= */

.blog-detail-image {
    width: 100%;
    height: 450px;

    overflow: hidden;
}

.blog-detail-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.blog-detail-main:hover .blog-detail-image img {
    transform: scale(1.015);
}


/* =========================================================
   ARTICLE
========================================================= */

.blog-detail-article {
    padding: 35px 25px 40px;
}

.blog-detail-date {
    display: flex;
    align-items: center;

    gap: 7px;

    margin-bottom: 18px;

    color: #53677a;
}

.blog-detail-date i {
    color: #bd9057;
}

.blog-detail-article h1 {
    margin: 0 0 17px;

    color: #0b1520;

    line-height: 1.2;
}

.blog-detail-article h2 {
    margin: 30px 0 11px;

    color: #111923;

    line-height: 1.3;
}

.blog-detail-article p {
    margin: 0 0 15px;

    color: #536171;

    line-height: 1.75;
}


/* =========================================================
   HIGHLIGHT / QUOTE
========================================================= */

.blog-detail-highlight {
    position: relative;

    display: flex;

    gap: 15px;

    margin: 25px 0;

    padding: 22px;

    border-left: 3px solid #bd9057;

    border-radius: 0 10px 10px 0;

    background: #faf7f2;
}

.blog-detail-highlight i {
    flex: 0 0 auto;

    margin-top: 4px;

    color: #bd9057;
}

.blog-detail-highlight p {
    margin: 0;

    color: #364250;

    font-weight: 600;
}


/* =========================================================
   POINTS
========================================================= */

.blog-detail-points {
    display: flex;
    flex-direction: column;

    gap: 16px;

    margin: 24px 0;
}

.blog-detail-point {
    display: flex;

    gap: 12px;

    align-items: flex-start;
}

.blog-detail-point>span {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 31px;
    height: 31px;

    border-radius: 50%;

    background: #f7f0e6;

    color: #bd9057;
}

.blog-detail-point h3 {
    margin: 0 0 3px;

    color: #18202a;
}

.blog-detail-point p {
    margin: 0;

    color: #6e7781;
}


/* =========================================================
   TAGS
========================================================= */

.blog-detail-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 7px;

    margin-top: 35px;
    padding-top: 22px;

    border-top: 1px solid #ece9e5;
}

.blog-detail-tags strong {
    margin-right: 5px;

    color: #252c35;
}

.blog-detail-tags a {
    padding: 6px 11px;

    border: 1px solid #e7d9c8;
    border-radius: 18px;

    background: #fffdf9;

    color: #a97742;

    text-decoration: none;

    transition: 0.25s ease;
}

.blog-detail-tags a:hover {
    background: #bd9057;

    border-color: #bd9057;

    color: #ffffff;
}


/* =========================================================
   SHARE
========================================================= */

.blog-detail-share {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-top: 22px;
    padding-top: 20px;

    border-top: 1px solid #ece9e5;
}

.blog-detail-share>span {
    color: #5b6470;

    font-weight: 700;
}

.blog-detail-share>div {
    display: flex;

    gap: 7px;
}

.blog-detail-share a {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid #e3ddd5;
    border-radius: 50%;

    color: #65707b;

    text-decoration: none;

    transition: 0.3s ease;
}

.blog-detail-share a:hover {
    background: #bd9057;

    border-color: #bd9057;

    color: #ffffff;
}


/* =========================================================
   SIDEBAR
========================================================= */

.blog-detail-sidebar {
    min-width: 0;
}


/* =========================================================
   LATEST BLOG
========================================================= */

.blog-latest-card {
    padding: 20px;

    border-radius: 14px;

    background: #f8f8f7;

    box-shadow:
        0 7px 25px rgba(20, 20, 20, 0.04);
}

.blog-latest-heading {
    padding-bottom: 14px;

    border-bottom: 1px solid #dfdfdc;
}

.blog-latest-heading span {
    color: #b5824b;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.blog-latest-heading h2 {
    margin: 4px 0 0;

    color: #111823;
}


/* =========================================================
   LATEST ITEM
========================================================= */

.blog-latest-item {
    display: flex;

    gap: 13px;

    padding: 15px 0;

    border-bottom: 1px solid #ddddda;

    text-decoration: none;

    transition: 0.25s ease;
}

.blog-latest-item:last-child {
    border-bottom: 0;
}

.blog-latest-item:hover {
    transform: translateX(3px);
}

.blog-latest-image {
    flex: 0 0 80px;

    width: 80px;
    height: 76px;

    overflow: hidden;

    border-radius: 6px;
}

.blog-latest-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.4s ease;
}

.blog-latest-item:hover .blog-latest-image img {
    transform: scale(1.07);
}

.blog-latest-info {
    min-width: 0;
}

.blog-latest-info h3 {
    display: -webkit-box;

    margin: 0 0 8px;

    overflow: hidden;

    color: #131b25;

    line-height: 1.3;

    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-latest-info span {
    color: #68727d;
}


/* =========================================================
   SIDEBAR CTA
========================================================= */

.blog-detail-cta {
    position: relative;

    margin-top: 18px;

    padding: 24px 20px;

    overflow: hidden;

    border-radius: 14px;

    background:
        linear-gradient(145deg,
            #112f38,
            #071923);
}

.blog-detail-cta::after {
    content: "§";

    position: absolute;

    right: -15px;
    bottom: -35px;

    color: rgba(255, 255, 255, 0.06);

    font-size: 130px;
}

.blog-detail-cta>span {
    color: #c69a62;

    font-weight: 700;

    letter-spacing: 1.2px;
}

.blog-detail-cta h3 {
    position: relative;
    z-index: 1;

    margin: 8px 0;

    color: #ffffff;

    line-height: 1.35;
}

.blog-detail-cta p {
    position: relative;
    z-index: 1;

    margin: 0 0 17px;

    color: rgba(255, 255, 255, 0.68);

    line-height: 1.55;
}

.blog-detail-cta a {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    padding: 10px 15px;

    border-radius: 22px;

    background: #bd9057;

    color: #ffffff;

    text-decoration: none;

    font-weight: 700;
}

.blog-detail-cta a i {
    transition: 0.25s ease;
}

.blog-detail-cta a:hover i {
    transform: translateX(4px);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .blog-detail-layout {
        grid-template-columns: 1fr;
    }

    .blog-detail-sidebar {
        display: grid;

        grid-template-columns:
            minmax(0, 1fr) minmax(260px, 0.7fr);

        gap: 18px;

        align-items: start;
    }

    .blog-detail-cta {
        margin-top: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .blog-detail-section {
        padding: 22px 12px 55px;
    }

    .blog-detail-container {
        width: 100%;
    }


    /* MAIN */

    .blog-detail-main {
        border-radius: 11px;
    }


    /* IMAGE */

    .blog-detail-image {
        height: 240px;
    }


    /* ARTICLE */

    .blog-detail-article {
        padding: 23px 17px 30px;
    }

    .blog-detail-article h1 {
        line-height: 1.25;
    }

    .blog-detail-article h2 {
        margin-top: 26px;
    }

    .blog-detail-article p {
        line-height: 1.7;
    }


    /* QUOTE */

    .blog-detail-highlight {
        padding: 17px;

        gap: 10px;
    }


    /* TAGS */

    .blog-detail-tags {
        align-items: flex-start;

        flex-direction: column;
    }

    .blog-detail-tags strong {
        margin-bottom: 2px;
    }


    /* SHARE */

    .blog-detail-share {
        align-items: flex-start;

        flex-direction: column;

        gap: 12px;
    }


    /* SIDEBAR */

    .blog-detail-sidebar {
        display: flex;

        flex-direction: column;

        gap: 0;
    }

    .blog-detail-cta {
        margin-top: 15px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .blog-detail-section {
        padding-right: 9px;
        padding-left: 9px;
    }

    .blog-detail-image {
        height: 210px;
    }

    .blog-detail-article {
        padding: 20px 14px 25px;
    }

    .blog-latest-card {
        padding: 16px;
    }

    .blog-latest-image {
        flex-basis: 72px;

        width: 72px;
        height: 70px;
    }

}

/* contatc us */
/* =========================================================
   CONTACT PAGE
========================================================= */

.contact-page {
    width: 100%;
    padding: 70px 20px 90px;
    background: #ffffff;
}

.contact-container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.contact-heading {
    max-width: 720px;
    margin: 0 auto 50px;
    text-align: center;
}

.contact-small-title {
    display: inline-block;

    margin-bottom: 10px;

    color: #bd9057;

    font-weight: 700;
    letter-spacing: 1.8px;
}

.contact-heading h1 {
    margin: 0 0 15px;

    color: #0b1520;

    line-height: 1.2;
}

.contact-heading h1 em {
    color: #bd9057;
}

.contact-heading p {
    max-width: 650px;
    margin: 0 auto;

    color: #687482;

    line-height: 1.7;
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.contact-layout {
    display: grid;

    grid-template-columns:
        minmax(320px, 0.82fr) minmax(0, 1.35fr);

    gap: 25px;

    align-items: stretch;
}


/* =========================================================
   LEFT CONTACT CARD
========================================================= */

.contact-info-card {
    position: relative;

    height: 100%;

    padding: 35px 30px;

    overflow: hidden;

    border-radius: 18px;

    background:
        linear-gradient(145deg,
            #102f38,
            #071a23);

    box-shadow:
        0 15px 40px rgba(8, 25, 33, 0.12);
}

.contact-info-card::before {
    content: "";

    position: absolute;

    width: 230px;
    height: 230px;

    top: -120px;
    right: -100px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;
}

.contact-info-card::after {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    bottom: -110px;
    left: -90px;

    border: 1px solid rgba(189, 144, 87, 0.15);

    border-radius: 50%;
}


/* =========================================================
   INFO HEADER
========================================================= */

.contact-info-header {
    position: relative;
    z-index: 1;

    padding-bottom: 22px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.contact-info-header span {
    color: #c69a62;

    font-weight: 700;

    letter-spacing: 1.4px;
}

.contact-info-header h2 {
    margin: 8px 0 8px;

    color: #ffffff;

    line-height: 1.3;
}

.contact-info-header p {
    margin: 0;

    color: rgba(255, 255, 255, 0.67);

    line-height: 1.65;
}


/* =========================================================
   CONTACT ITEMS
========================================================= */

.contact-info-item {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;

    gap: 14px;

    padding: 17px 0;

    border-bottom: 1px solid rgba(255, 255, 255, 0.09);

    text-decoration: none;
}

.contact-icon {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 44px;
    height: 44px;

    border: 1px solid rgba(198, 154, 98, 0.35);

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.04);

    color: #c69a62;
}

.contact-info-text {
    display: flex;
    flex-direction: column;

    gap: 3px;

    min-width: 0;
}

.contact-info-text small {
    color: rgba(255, 255, 255, 0.52);
}

.contact-info-text strong {
    color: #ffffff;

    line-height: 1.45;
}


/* =========================================================
   SOCIAL
========================================================= */

.contact-social {
    position: relative;
    z-index: 1;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding-top: 22px;
}

.contact-social>span {
    color: rgba(255, 255, 255, 0.65);
}

.contact-social>div {
    display: flex;

    gap: 7px;
}

.contact-social a {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid rgba(255, 255, 255, 0.16);

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    transition: 0.3s ease;
}

.contact-social a:hover {
    background: #bd9057;

    border-color: #bd9057;

    transform: translateY(-2px);
}


/* =========================================================
   FORM CARD
========================================================= */

.contact-form-card {
    padding: 35px 34px;

    border: 1px solid #eeeae4;

    border-radius: 18px;

    background: #ffffff;

    box-shadow:
        0 12px 35px rgba(20, 25, 30, 0.06);
}


/* =========================================================
   FORM HEADING
========================================================= */

.contact-form-heading {
    margin-bottom: 27px;
}

.contact-form-heading span {
    color: #bd9057;

    font-weight: 700;

    letter-spacing: 1.5px;
}

.contact-form-heading h2 {
    margin: 7px 0 7px;

    color: #0d1722;

    line-height: 1.3;
}

.contact-form-heading p {
    margin: 0;

    color: #687482;

    line-height: 1.6;
}


/* =========================================================
   FORM
========================================================= */

.contact-form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 16px;
}

.contact-form-group {
    display: flex;
    flex-direction: column;

    gap: 7px;

    margin-bottom: 17px;
}

.contact-form-group label {
    color: #27323d;

    font-weight: 600;
}

.contact-form-group input,
.contact-form-group select,
.contact-form-group textarea {
    width: 100%;

    padding: 13px 14px;

    outline: none;

    border: 1px solid #e0ddd8;

    border-radius: 8px;

    background: #ffffff;

    color: #1d2731;

    transition:
        border-color 0.25s ease,
        box-shadow 0.25s ease;
}

.contact-form-group input,
.contact-form-group select {
    height: 48px;
}

.contact-form-group textarea {
    min-height: 140px;

    resize: vertical;
}

.contact-form-group input::placeholder,
.contact-form-group textarea::placeholder {
    color: #9ba3aa;
}

.contact-form-group input:focus,
.contact-form-group select:focus,
.contact-form-group textarea:focus {
    border-color: #bd9057;

    box-shadow:
        0 0 0 3px rgba(189, 144, 87, 0.09);
}


/* =========================================================
   CHECKBOX
========================================================= */

.contact-checkbox {
    display: flex;

    align-items: flex-start;

    gap: 9px;

    margin: 3px 0 20px;

    color: #687482;

    cursor: pointer;
}

.contact-checkbox input {
    width: 16px;
    height: 16px;

    margin-top: 2px;

    accent-color: #bd9057;
}


/* =========================================================
   SUBMIT
========================================================= */

.contact-submit {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 51px;

    padding: 12px 20px;

    border: 1px solid #bd9057;

    border-radius: 28px;

    background: #bd9057;

    color: #ffffff;

    cursor: pointer;

    font-weight: 700;

    transition: 0.3s ease;
}

.contact-submit i {
    transition: 0.3s ease;
}

.contact-submit:hover {
    background: #a97d48;

    border-color: #a97d48;
}

.contact-submit:hover i {
    transform: translateX(5px);
}


/* =========================================================
   BOTTOM FEATURES
========================================================= */

.contact-features {
    display: grid;

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

    gap: 18px;

    margin-top: 25px;
}

.contact-feature {
    display: flex;

    align-items: center;

    gap: 13px;

    padding: 20px;

    border: 1px solid #eeeae4;

    border-radius: 13px;

    background: #faf9f7;

    transition: 0.3s ease;
}

.contact-feature:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 25px rgba(20, 25, 30, 0.06);
}

.contact-feature>span {
    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 43px;
    height: 43px;

    border-radius: 50%;

    background: #f5ede2;

    color: #bd9057;
}

.contact-feature h3 {
    margin: 0 0 3px;

    color: #18222c;
}

.contact-feature p {
    margin: 0;

    color: #737c85;

    line-height: 1.45;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 950px) {

    .contact-page {
        padding-top: 55px;
    }

    .contact-layout {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        height: auto;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .contact-page {
        padding: 40px 13px 60px;
    }

    .contact-heading {
        margin-bottom: 30px;
    }

    .contact-heading h1 {
        line-height: 1.25;
    }

    .contact-heading p {
        line-height: 1.6;
    }


    /* CONTACT CARD */

    .contact-info-card {
        padding: 26px 20px;

        border-radius: 14px;
    }

    .contact-info-header {
        padding-bottom: 18px;
    }

    .contact-info-item {
        padding: 14px 0;
    }

    .contact-icon {
        width: 40px;
        height: 40px;
    }


    /* FORM */

    .contact-form-card {
        padding: 25px 18px;

        border-radius: 14px;
    }

    .contact-form-row {
        grid-template-columns: 1fr;

        gap: 0;
    }

    .contact-form-heading {
        margin-bottom: 22px;
    }

    .contact-form-group {
        margin-bottom: 15px;
    }

    .contact-form-group textarea {
        min-height: 125px;
    }


    /* FEATURES */

    .contact-features {
        grid-template-columns: 1fr;

        gap: 12px;

        margin-top: 15px;
    }

    .contact-feature {
        padding: 16px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .contact-page {
        padding-right: 9px;
        padding-left: 9px;
    }

    .contact-info-card {
        padding: 23px 16px;
    }

    .contact-form-card {
        padding: 22px 15px;
    }

    .contact-social {
        align-items: flex-start;

        flex-direction: column;

        gap: 10px;
    }

    .contact-info-text strong {
        overflow-wrap: anywhere;
    }

}

.contact-map-only {
    width: 100%;
    padding: 0 20px 70px;
    background: #fff;
}

.contact-map-only__container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
}

.contact-map-only__map {
    width: 100%;
    height: 420px;
    overflow: hidden;

    border-radius: 18px;
    border: 1px solid #eee8df;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.07);
}

.contact-map-only__map iframe {
    width: 100%;
    height: 100%;
    display: block;

    border: 0;
}


/* Tablet */
@media (max-width: 768px) {

    .contact-map-only {
        padding: 0 15px 50px;
    }

    .contact-map-only__map {
        height: 350px;
        border-radius: 14px;
    }

}


/* Mobile */
@media (max-width: 480px) {

    .contact-map-only {
        padding: 0 10px 40px;
    }

    .contact-map-only__map {
        height: 280px;
        border-radius: 12px;
    }

}

/* profile page */
/* Profile Section */
.profile-section {
    width: 100%;
    padding: 20px;
    box-sizing: border-box;

    font-size: 15px;
}

.profile-section .profile-box {
    width: 100%;
    max-width: 526px;
    margin: 0 auto;
    border: 1px solid #dce3eb;
    border-radius: 11px;
    background: #ffffff;
    overflow: hidden;
    box-sizing: border-box;
}

/* Header */
.profile-section .profile-header {
    padding: 17px 25px;
    border-bottom: 1px solid #dce3eb;
    background: #fafbfd;
}

.profile-section .profile-header h2 {
    margin: 0;

    font-size: 20px;
    line-height: 1.4;
    font-weight: 700;
    color: #080808;
}

/* Form */
.profile-section .profile-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
    row-gap: 18px;
    padding: 27px 25px 23px;
    box-sizing: border-box;
}

.profile-section .form-group {
    min-width: 0;
}

.profile-section .full-width {
    grid-column: 1 / -1;
}

/* Labels */
.profile-section .form-group label {
    display: block;
    margin: 0 0 8px;

    font-size: 15px;
    line-height: 1.3;
    font-weight: 500;
    color: #526b88;
}

.profile-section .form-group label span {
    color: #e53935;
}

/* Inputs */
.profile-section .form-group input,
.profile-section .select-wrap select {
    width: 100%;
    height: 49px;
    padding: 0 17px;
    border: 1px solid #d9e1eb;
    border-radius: 25px;
    outline: none;
    background: #ffffff;
    box-sizing: border-box;

    font-size: 14px;
    font-weight: 400;
    color: #17283d;

    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.profile-section .form-group input:focus,
.profile-section .select-wrap select:focus {
    border-color: #bd8e52;
    box-shadow: 0 0 0 2px rgba(189, 142, 82, 0.08);
}

/* Username */
.profile-section #username {
    border-color: #bd7f2d;
    text-decoration: underline;
    text-decoration-color: #d94141;
    text-decoration-style: wavy;
    text-underline-offset: 3px;
}

/* Select */
.profile-section .select-wrap {
    position: relative;
}

.profile-section .select-wrap::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 19px;
    width: 8px;
    height: 8px;
    border-right: 1px solid #8da0b6;
    border-bottom: 1px solid #8da0b6;
    transform: translateY(-65%) rotate(45deg);
    pointer-events: none;
}

.profile-section .select-wrap select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 45px;
    cursor: pointer;
}

/* Mobile */
.profile-section .mobile-input {
    display: flex;
    width: 100%;
    height: 49px;
    border: 1px solid #d9e1eb;
    border-radius: 25px;
    overflow: hidden;
    box-sizing: border-box;
    background: #ffffff;
}

.profile-section .country-code {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 56px;
    padding: 0 12px;
    background: #e9edf2;
    border-right: 1px solid #d4dbe4;


    font-size: 14px;
    font-weight: 400;
    color: #17283d;
}

.profile-section .mobile-input input {
    flex: 1;
    width: auto;
    height: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 14px;
    box-shadow: none;
}

.profile-section .mobile-input input:focus {
    border: 0;
    box-shadow: none;
}

/* Submit */
.profile-section .form-submit {
    grid-column: 1 / -1;
    margin-top: -1px;
}

.profile-section .form-submit button {
    width: 100%;
    height: 49px;
    padding: 0 20px;
    border: 0;
    border-radius: 25px;
    background: #bd9157;
    color: #ffffff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.profile-section .form-submit button:hover {
    background: #ad8148;
}

.profile-section .form-submit button:active {
    transform: translateY(1px);
}


/* =========================
   Tablet
========================= */
@media (max-width: 600px) {

    .profile-section {
        padding: 15px;
    }

    .profile-section .profile-header {
        padding: 16px 20px;
    }

    .profile-section .profile-header h2 {
        font-size: 19px;
    }

    .profile-section .profile-form {
        padding: 23px 20px 20px;
        column-gap: 15px;
    }
}


/* =========================
   Mobile
========================= */
@media (max-width: 480px) {

    .profile-section {
        padding: 10px;
    }

    .profile-section .profile-box {
        border-radius: 9px;
    }

    .profile-section .profile-header {
        padding: 15px 17px;
    }

    .profile-section .profile-header h2 {
        font-size: 18px;
    }

    .profile-section .profile-form {
        display: grid;
        grid-template-columns: 1fr;
        row-gap: 16px;
        padding: 21px 17px 18px;
    }

    .profile-section .form-group {
        grid-column: 1 / -1;
    }

    .profile-section .form-group label {
        font-size: 14px;
        margin-bottom: 7px;
    }

    .profile-section .form-group input,
    .profile-section .select-wrap select,
    .profile-section .mobile-input,
    .profile-section .form-submit button {
        height: 47px;
    }
}


/* =========================
   Small Mobile
========================= */
@media (max-width: 360px) {

    .profile-section {
        padding: 7px;
    }

    .profile-section .profile-header {
        padding: 14px;
    }

    .profile-section .profile-form {
        padding: 19px 14px 16px;
    }

    .profile-section .profile-header h2 {
        font-size: 17px;
    }

    .profile-section .form-group input,
    .profile-section .select-wrap select,
    .profile-section .mobile-input,
    .profile-section .form-submit button {
        height: 45px;
    }
}

/* lawyersDetail */

/* =========================================
   Lawyer Profile Section
========================================= */

.lawyer-profile-section {
    width: 100%;
    padding: 35px 20px 50px;
    box-sizing: border-box;

    font-size: 15px;
    color: #152f4d;
}

.lawyer-profile-container {
    width: 100%;
    max-width: 1285px;
    margin: 0 auto;
    position: relative;
}


/* =========================================
   Cover
========================================= */

.lawyer-profile-section .lawyer-cover {
    width: 100%;
    height: 278px;
    border-radius: 19px;
    overflow: hidden;
    background: #080604;
}

.lawyer-profile-section .lawyer-cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================
   Main Content
========================================= */

.lawyer-profile-section .lawyer-profile-content {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    column-gap: 22px;
    position: relative;
}


/* =========================================
   Left Profile
========================================= */

.lawyer-profile-section .lawyer-profile-left {
    position: relative;
    z-index: 2;
    margin-top: -104px;
    padding-left: 20px;
}

.lawyer-profile-section .lawyer-image {
    width: 265px;
    height: 255px;
    border-radius: 18px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.lawyer-profile-section .lawyer-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================
   Social Icons
========================================= */

.lawyer-profile-section .lawyer-socials {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 22px;
    padding-left: 30px;
}

.lawyer-profile-section .lawyer-socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: #ffffff;
    color: #111111;
    text-decoration: none;
    font-size: 17px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.lawyer-profile-section .lawyer-socials a:hover {
    transform: translateY(-2px);
    box-shadow: 0 7px 18px rgba(0, 0, 0, 0.12);
}


/* =========================================
   Right Details
========================================= */

.lawyer-profile-section .lawyer-profile-right {
    min-width: 0;
    padding-top: 17px;
    padding-right: 0;
}

.lawyer-profile-section .lawyer-name {
    margin: 0;

    font-size: 27px;
    line-height: 1.25;
    font-weight: 700;
    color: #050505;
}

.lawyer-profile-section .lawyer-designation {
    margin-top: 5px;

    font-size: 15px;
    line-height: 1.5;
    font-weight: 400;
    color: #1d3a5a;
}


/* =========================================
   Price + Rating
========================================= */

.lawyer-profile-section .lawyer-price-rating {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-top: 12px;
}

.lawyer-profile-section .lawyer-price {

    font-size: 19px;
    line-height: 1.4;
    font-weight: 700;
    color: #050505;
}

.lawyer-profile-section .lawyer-rating {
    display: flex;
    align-items: center;
    gap: 5px;

    font-size: 14px;
    color: #1b2f48;
}

.lawyer-profile-section .lawyer-rating i {
    color: #ffbf00;
    font-size: 17px;
}


/* =========================================
   Description
========================================= */

.lawyer-profile-section .lawyer-description {
    max-width: 960px;
    margin: 13px 0 0;

    font-size: 14px;
    line-height: 1.7;
    font-weight: 400;
    color: #173452;
}


/* =========================================
   Divider
========================================= */

.lawyer-profile-section .lawyer-divider {
    width: 100%;
    height: 1px;
    margin: 18px 0 20px;
    background: #dce3e9;
}


/* =========================================
   Contact Information
========================================= */

.lawyer-profile-section .lawyer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-bottom: 22px;
}

.lawyer-profile-section .lawyer-contact-icon {
    flex: 0 0 14px;
    width: 14px;
    padding-top: 2px;
    color: #1d3b5d;
    font-size: 15px;
    text-align: center;
}

.lawyer-profile-section .lawyer-contact-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.lawyer-profile-section .lawyer-contact-content span {

    font-size: 14px;
    line-height: 1.4;
    font-weight: 400;
    color: #243e5c;
}

.lawyer-profile-section .lawyer-contact-content strong {

    font-size: 17px;
    line-height: 1.35;
    font-weight: 700;
    color: #050505;
}


/* =========================================
   Action Buttons
========================================= */

.lawyer-profile-section .lawyer-action-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 3px;
}

.lawyer-profile-section .lawyer-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 19px;
    border-radius: 23px;
    box-sizing: border-box;


    font-size: 13px;
    line-height: 1;
    font-weight: 500;
    text-decoration: none;

    transition: all 0.2s ease;
}

.lawyer-profile-section .lawyer-btn i {
    font-size: 13px;
}

.lawyer-profile-section .lawyer-btn-appointment {
    color: #c28b4d;
    border: 1px solid #c28b4d;
    background: #ffffff;
}

.lawyer-profile-section .lawyer-btn-message {
    color: #0798ed;
    border: 1px solid #0798ed;
    background: #ffffff;
}

.lawyer-profile-section .lawyer-btn-appointment:hover {
    color: #ffffff;
    background: #c28b4d;
}

.lawyer-profile-section .lawyer-btn-message:hover {
    color: #ffffff;
    background: #0798ed;
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 900px) {

    .lawyer-profile-section {
        padding: 25px 15px 40px;
    }

    .lawyer-profile-section .lawyer-cover {
        height: 230px;
        border-radius: 16px;
    }

    .lawyer-profile-section .lawyer-profile-content {
        grid-template-columns: 220px minmax(0, 1fr);
        column-gap: 20px;
    }

    .lawyer-profile-section .lawyer-profile-left {
        margin-top: -75px;
        padding-left: 10px;
    }

    .lawyer-profile-section .lawyer-image {
        width: 200px;
        height: 205px;
    }

    .lawyer-profile-section .lawyer-socials {
        padding-left: 15px;
        margin-top: 17px;
    }

    .lawyer-profile-section .lawyer-socials a {
        width: 40px;
        height: 40px;
        border-radius: 10px;
        font-size: 15px;
    }

    .lawyer-profile-section .lawyer-name {
        font-size: 24px;
    }

    .lawyer-profile-section .lawyer-description {
        font-size: 13px;
    }
}


/* =========================================
   Mobile
========================================= */

@media (max-width: 650px) {

    .lawyer-profile-section {
        padding: 15px 12px 35px;
    }

    .lawyer-profile-section .lawyer-cover {
        height: 190px;
        border-radius: 14px;
    }

    .lawyer-profile-section .lawyer-profile-content {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .lawyer-profile-section .lawyer-profile-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: -65px;
        padding-left: 0;
    }

    .lawyer-profile-section .lawyer-image {
        width: 190px;
        height: 190px;
        border-radius: 16px;
    }

    .lawyer-profile-section .lawyer-socials {
        justify-content: center;
        padding-left: 0;
        margin-top: 16px;
    }

    .lawyer-profile-section .lawyer-socials a {
        width: 43px;
        height: 43px;
        border-radius: 10px;
    }

    .lawyer-profile-section .lawyer-profile-right {
        padding-top: 25px;
        text-align: left;
    }

    .lawyer-profile-section .lawyer-name {
        font-size: 24px;
    }

    .lawyer-profile-section .lawyer-designation {
        font-size: 14px;
    }

    .lawyer-profile-section .lawyer-price-rating {
        gap: 16px;
        margin-top: 11px;
    }

    .lawyer-profile-section .lawyer-price {
        font-size: 17px;
    }

    .lawyer-profile-section .lawyer-rating {
        font-size: 13px;
    }

    .lawyer-profile-section .lawyer-description {
        font-size: 13px;
        line-height: 1.7;
        margin-top: 12px;
    }

    .lawyer-profile-section .lawyer-divider {
        margin: 17px 0 19px;
    }

    .lawyer-profile-section .lawyer-contact-item {
        margin-bottom: 20px;
    }

    .lawyer-profile-section .lawyer-contact-content strong {
        font-size: 16px;
    }

    .lawyer-profile-section .lawyer-action-buttons {
        gap: 10px;
        margin-top: 4px;
    }

    .lawyer-profile-section .lawyer-btn {
        min-height: 42px;
        padding: 0 16px;
        font-size: 12px;
    }
}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 400px) {

    .lawyer-profile-section {
        padding: 10px 8px 30px;
    }

    .lawyer-profile-section .lawyer-cover {
        height: 160px;
        border-radius: 12px;
    }

    .lawyer-profile-section .lawyer-profile-left {
        margin-top: -55px;
    }

    .lawyer-profile-section .lawyer-image {
        width: 165px;
        height: 165px;
        border-radius: 14px;
    }

    .lawyer-profile-section .lawyer-socials {
        gap: 6px;
        margin-top: 13px;
    }

    .lawyer-profile-section .lawyer-socials a {
        width: 39px;
        height: 39px;
        font-size: 14px;
    }

    .lawyer-profile-section .lawyer-profile-right {
        padding-top: 21px;
    }

    .lawyer-profile-section .lawyer-name {
        font-size: 21px;
    }

    .lawyer-profile-section .lawyer-price-rating {
        flex-wrap: wrap;
        gap: 8px 15px;
    }

    .lawyer-profile-section .lawyer-description {
        font-size: 12.5px;
    }

    .lawyer-profile-section .lawyer-btn {
        flex: 1;
        min-width: 0;
        padding: 0 10px;
        font-size: 11px;
    }

}

/* second seciton */

/* =========================================
   Lawyer Fixed Price Services
========================================= */

.lawyer-services-section {
    width: 100%;
    padding: 20px 20px 60px;
    box-sizing: border-box;

    font-size: 15px;
    color: #142f4c;
}

.lawyer-services-container {
    width: 100%;
    max-width: 1285px;
    margin: 0 auto;
}


/* =========================================
   Header
========================================= */

.lawyer-services-section .lawyer-services-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 17px;
}

.lawyer-services-section .lawyer-services-header h2 {
    margin: 0;

    font-size: 27px;
    line-height: 1.3;
    font-weight: 700;
    color: #050505;
}

.lawyer-services-section .lawyer-view-services {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 48px;
    padding: 0 24px;
    border-radius: 26px;

    background: #bd9056;
    color: #ffffff;


    font-size: 13px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;
    box-sizing: border-box;

    transition: all 0.2s ease;
}

.lawyer-services-section .lawyer-view-services i {
    font-size: 13px;
}

.lawyer-services-section .lawyer-view-services:hover {
    background: #aa7d46;
    transform: translateY(-1px);
}


/* =========================================
   Services Grid
========================================= */

.lawyer-services-section .lawyer-services-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
}


/* =========================================
   Service Card
========================================= */

.lawyer-services-section .lawyer-service-card {
    min-width: 0;
    overflow: hidden;

    border-radius: 25px;
    background: #ffffff;

    box-shadow: 0 17px 35px rgba(24, 49, 72, 0.13);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.lawyer-services-section .lawyer-service-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(24, 49, 72, 0.16);
}


/* =========================================
   Service Image
========================================= */

.lawyer-services-section .lawyer-service-image {
    position: relative;
    height: 220px;
    overflow: hidden;
    background: #1b1b1b;
}

.lawyer-services-section .lawyer-service-image>img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;

    transition: transform 0.35s ease;
}

.lawyer-services-section .lawyer-service-card:hover .lawyer-service-image>img {
    transform: scale(1.03);
}


/* =========================================
   Dark Overlay
========================================= */

.lawyer-services-section .lawyer-service-overlay {
    position: absolute;
    inset: 0;

    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.03) 20%,
            rgba(0, 0, 0, 0.18) 42%,
            rgba(0, 0, 0, 0.92) 100%);

    pointer-events: none;
}


/* =========================================
   Category
========================================= */

.lawyer-services-section .lawyer-service-category {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;

    display: inline-flex;
    align-items: center;

    min-height: 30px;
    padding: 0 13px;

    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 18px;

    background: rgba(90, 90, 90, 0.65);
    color: #ffffff;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;

    backdrop-filter: blur(3px);
}


/* =========================================
   Lawyer Information on Image
========================================= */

.lawyer-services-section .lawyer-card-lawyer {
    position: absolute;
    left: 18px;
    right: 14px;
    bottom: 17px;
    z-index: 3;

    display: flex;
    align-items: center;
    gap: 12px;
}

.lawyer-services-section .lawyer-card-avatar {
    flex: 0 0 62px;
    width: 62px;
    height: 62px;

    padding: 4px;
    box-sizing: border-box;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #ffffff;
    overflow: hidden;
}

.lawyer-services-section .lawyer-card-avatar img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.lawyer-services-section .lawyer-card-info {
    min-width: 0;
}

.lawyer-services-section .lawyer-card-info h3 {
    margin: 0 0 1px;

    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
    color: #ffffff;
}

.lawyer-services-section .lawyer-card-info>span {
    display: block;

    font-size: 11px;
    line-height: 1.3;
    font-weight: 500;
    color: #ffffff;
}


/* =========================================
   Rating
========================================= */

.lawyer-services-section .lawyer-card-rating {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 5px;
}

.lawyer-services-section .lawyer-stars {
    display: flex;
    align-items: center;
    gap: 2px;
}

.lawyer-services-section .lawyer-stars i {
    font-size: 12px;
    color: #777f87;
}

.lawyer-services-section .lawyer-card-rating strong {
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
    color: #ffffff;
}


/* =========================================
   Card Body
========================================= */

.lawyer-services-section .lawyer-service-body {
    padding: 21px 22px 20px;
}

.lawyer-services-section .lawyer-service-body>h3 {
    margin: 0;

    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    color: #050505;
}

.lawyer-services-section .lawyer-service-body>p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;

    min-height: 44px;
    margin: 8px 0 16px;

    font-size: 13px;
    line-height: 1.65;
    font-weight: 400;
    color: #58708c;
}


/* =========================================
   Stats
========================================= */

.lawyer-services-section .lawyer-service-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.lawyer-services-section .lawyer-stat {
    min-width: 0;
    min-height: 70px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 8px 5px;
    box-sizing: border-box;

    border-radius: 14px;
    text-align: center;
}

.lawyer-services-section .lawyer-stat-duration {
    background: #f8f4f0;
}

.lawyer-services-section .lawyer-stat-orders {
    background: #eef9f2;
}

.lawyer-services-section .lawyer-stat-experience {
    background: #fff9e9;
}

.lawyer-services-section .lawyer-stat span {
    margin-bottom: 7px;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    color: #25415f;
}

.lawyer-services-section .lawyer-stat strong {
    font-size: 13px;
    line-height: 1.2;
    font-weight: 600;
    color: #071a30;
}


/* =========================================
   Footer
========================================= */

.lawyer-services-section .lawyer-service-footer {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;

    margin-top: 17px;
    padding-top: 17px;

    border-top: 1px solid #e1e5e9;
}

.lawyer-services-section .lawyer-service-price {
    min-width: 0;
}

.lawyer-services-section .lawyer-service-price>span {
    display: block;
    margin-bottom: 7px;

    font-size: 10px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: #74879a;
}

.lawyer-services-section .lawyer-service-price>div {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.lawyer-services-section .lawyer-service-price strong {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    color: #061a30;
    white-space: nowrap;
}

.lawyer-services-section .lawyer-service-price small {
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    color: #65788c;
}


/* =========================================
   Details Button
========================================= */

.lawyer-services-section .lawyer-details-btn {
    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-width: 105px;
    height: 42px;
    padding: 0 16px;

    border-radius: 23px;
    background: #000000;
    color: #ffffff;

    font-size: 12px;
    line-height: 1;
    font-weight: 600;

    text-decoration: none;
    box-sizing: border-box;

    transition: all 0.2s ease;
}

.lawyer-services-section .lawyer-details-btn i {
    font-size: 12px;
}

.lawyer-services-section .lawyer-details-btn:hover {
    background: #bd9056;
    transform: translateX(2px);
}


/* =========================================
   Tablet
========================================= */

@media (max-width: 1000px) {

    .lawyer-services-section {
        padding: 20px 15px 50px;
    }

    .lawyer-services-section .lawyer-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }

    .lawyer-services-section .lawyer-service-card:last-child {
        grid-column: 1 / -1;
        max-width: calc(50% - 10px);
    }

}


/* =========================================
   Mobile
========================================= */

@media (max-width: 650px) {

    .lawyer-services-section {
        padding: 15px 12px 40px;
    }

    .lawyer-services-section .lawyer-services-header {
        align-items: flex-start;
        margin-bottom: 15px;
    }

    .lawyer-services-section .lawyer-services-header h2 {
        font-size: 23px;
    }

    .lawyer-services-section .lawyer-view-services {
        min-height: 42px;
        padding: 0 16px;
        font-size: 11px;
        gap: 7px;
        white-space: nowrap;
    }

    .lawyer-services-section .lawyer-services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .lawyer-services-section .lawyer-service-card:last-child {
        grid-column: auto;
        max-width: none;
    }

    .lawyer-services-section .lawyer-service-image {
        height: 215px;
    }

    .lawyer-services-section .lawyer-service-body {
        padding: 20px 18px 19px;
    }

}


/* =========================================
   Small Mobile
========================================= */

@media (max-width: 420px) {

    .lawyer-services-section {
        padding: 12px 9px 35px;
    }

    .lawyer-services-section .lawyer-services-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .lawyer-services-section .lawyer-services-header h2 {
        font-size: 22px;
    }

    .lawyer-services-section .lawyer-view-services {
        min-height: 40px;
        padding: 0 17px;
    }

    .lawyer-services-section .lawyer-service-image {
        height: 200px;
    }

    .lawyer-services-section .lawyer-service-category {
        top: 13px;
        left: 13px;
        min-height: 28px;
        padding: 0 11px;
        font-size: 10px;
    }

    .lawyer-services-section .lawyer-card-lawyer {
        left: 14px;
        right: 12px;
        bottom: 14px;
        gap: 9px;
    }

    .lawyer-services-section .lawyer-card-avatar {
        flex-basis: 55px;
        width: 55px;
        height: 55px;
        padding: 3px;
        border-width: 2px;
    }

    .lawyer-services-section .lawyer-card-info h3 {
        font-size: 18px;
    }

    .lawyer-services-section .lawyer-card-rating {
        gap: 5px;
    }

    .lawyer-services-section .lawyer-stars i {
        font-size: 10px;
    }

    .lawyer-services-section .lawyer-card-rating strong {
        font-size: 9px;
    }

    .lawyer-services-section .lawyer-service-body>h3 {
        font-size: 17px;
    }

    .lawyer-services-section .lawyer-service-body>p {
        font-size: 12px;
    }

    .lawyer-services-section .lawyer-service-stats {
        gap: 7px;
    }

    .lawyer-services-section .lawyer-stat {
        min-height: 65px;
        border-radius: 12px;
    }

    .lawyer-services-section .lawyer-stat span {
        font-size: 9px;
    }

    .lawyer-services-section .lawyer-stat strong {
        font-size: 12px;
    }

    .lawyer-services-section .lawyer-service-footer {
        align-items: center;
    }

    .lawyer-services-section .lawyer-service-price strong {
        font-size: 16px;
    }

    .lawyer-services-section .lawyer-details-btn {
        min-width: 90px;
        height: 39px;
        padding: 0 13px;
        font-size: 11px;
    }

}


/* =========================================
   Very Small Mobile
========================================= */

@media (max-width: 340px) {

    .lawyer-services-section .lawyer-service-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .lawyer-services-section .lawyer-details-btn {
        width: 100%;
    }

    .lawyer-services-section .lawyer-service-price>div {
        justify-content: flex-start;
    }

}

/*  detail lawyer page */

/* =========================================
   LAWYER OVERVIEW SECTION
========================================= */

.lawyer-overview-section {
    width: 100%;
    padding: 0 20px 60px;
    box-sizing: border-box;

    font-size: 15px;
    color: #142f4c;
}

.lawyer-overview-container {
    width: 100%;
    max-width: 1285px;
    margin: 0 auto;
}


/* =========================================
   TABS
========================================= */

.lawyer-overview-section .lawyer-overview-tabs {
    display: flex;
    align-items: center;
    gap: 3px;

    min-height: 48px;

    border-bottom: 1px solid #dce2e8;
}

.lawyer-overview-section .lawyer-overview-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 34px;
    padding: 0 18px;

    border: 1px solid transparent;
    border-radius: 4px 4px 0 0;

    background: transparent;
    color: #142f4c;

    font-size: 12px;
    line-height: 1;
    font-weight: 600;

    cursor: pointer;
    box-sizing: border-box;

    transition: all 0.2s ease;
}

.lawyer-overview-section .lawyer-overview-tab.active {
    border-color: #151515;
    border-bottom-color: #ffffff;
    background: #ffffff;
    color: #b98243;
}

.lawyer-overview-section .lawyer-overview-tab:hover {
    color: #b98243;
}


/* =========================================
   TAB CONTENT
========================================= */

.lawyer-overview-section .lawyer-tab-content {
    display: none;
}

.lawyer-overview-section .lawyer-tab-content.active {
    display: block;
}


/* =========================================
   MAIN CARD
========================================= */

.lawyer-overview-section .lawyer-overview-card {
    width: 100%;
    margin-top: 22px;
    padding: 30px 30px 38px;

    border-radius: 17px;
    background: #ffffff;

    box-shadow: 0 7px 25px rgba(32, 55, 75, 0.06);

    box-sizing: border-box;
}


/* =========================================
   COMMON HEADING
========================================= */

.lawyer-overview-section .lawyer-overview-heading {
    display: flex;
    align-items: center;
    gap: 9px;
}

.lawyer-overview-section .lawyer-overview-icon {
    flex: 0 0 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;

    border: 1px solid #ead9c3;
    border-radius: 10px;

    background: #faf7f2;
    color: #bd8b50;

    font-size: 13px;
}

.lawyer-overview-section .lawyer-overview-heading h2 {
    margin: 0;

    font-size: 21px;
    line-height: 1.2;
    font-weight: 700;
    color: #090909;
}

.lawyer-overview-section .lawyer-overview-heading h2 em {
    color: #bd8b50;
    font-style: italic;
}

.lawyer-overview-section .lawyer-overview-heading span {
    display: block;
    margin-top: 4px;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 500;
    color: #304c68;
}


/* =========================================
   BIOGRAPHY
========================================= */

.lawyer-overview-section .lawyer-biography-block {
    margin-bottom: 37px;
}

.lawyer-overview-section .lawyer-biography-text {
    margin: 21px 0 0;

    font-size: 12px;
    line-height: 1.65;
    font-weight: 400;
    color: #183653;
}


/* =========================================
   EDUCATION
========================================= */

.lawyer-overview-section .lawyer-education-block {
    margin-bottom: 38px;
}

.lawyer-overview-section .lawyer-education-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 18px;
}

.lawyer-overview-section .lawyer-education-card,
.lawyer-overview-section .lawyer-skill-card {
    position: relative;
    min-width: 0;
    overflow: hidden;

    border: 1px solid #e0e6ec;
    border-radius: 13px;

    background: #fbfbfb;
    box-sizing: border-box;
}

.lawyer-overview-section .lawyer-education-card {
    min-height: 97px;
    padding: 13px 14px;
}

.lawyer-overview-section .lawyer-education-year {
    display: flex;
    align-items: center;
    gap: 7px;

    margin-bottom: 8px;

    font-size: 11px;
    line-height: 1;
    font-weight: 600;
    color: #bd8b50;
}

.lawyer-overview-section .lawyer-education-year i {
    font-size: 11px;
}

.lawyer-overview-section .lawyer-education-card h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 14px;
    line-height: 1.3;
    font-weight: 700;
    color: #080808;
}

.lawyer-overview-section .lawyer-education-card p {
    position: relative;
    z-index: 2;

    margin: 6px 0 0;

    font-size: 10px;
    line-height: 1.3;
    color: #36536f;
}


/* =========================================
   DOT PATTERN
========================================= */

.lawyer-overview-section .lawyer-dot-pattern {
    position: absolute;
    top: 12px;
    right: 14px;

    width: 43px;
    height: 43px;

    opacity: 0.55;

    background-image: radial-gradient(circle,
            #d5a56c 1.2px,
            transparent 1.5px);

    background-size: 7px 7px;

    pointer-events: none;
}


/* =========================================
   SKILLS
========================================= */

.lawyer-overview-section .lawyer-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;

    margin-top: 18px;
}

.lawyer-overview-section .lawyer-skill-card {
    min-height: 105px;
    padding: 13px 14px;
}

.lawyer-overview-section .lawyer-skill-number {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    margin-bottom: 8px;

    border-radius: 8px;
    background: #f2eee8;
    color: #bd8b50;

    font-size: 10px;
    font-weight: 700;
}

.lawyer-overview-section .lawyer-skill-card h3 {
    position: relative;
    z-index: 2;

    margin: 0;

    font-size: 14px;
    line-height: 1.3;
    color: #080808;
}

.lawyer-overview-section .lawyer-skill-card p {
    position: relative;
    z-index: 2;

    margin: 7px 0 0;

    font-size: 10px;
    color: #183653;
}

.lawyer-overview-section .lawyer-skill-card p strong {
    color: #071a30;
}

.lawyer-overview-section .lawyer-skill-card p span {
    color: #b98243;
}


/* =========================================
   REVIEWS
========================================= */

.lawyer-overview-section .lawyer-reviews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    padding-bottom: 22px;
    border-bottom: 1px solid #e2e7eb;
}

.lawyer-overview-section .lawyer-total-rating {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.lawyer-overview-section .lawyer-total-rating>strong {

    font-size: 25px;
    line-height: 1;
    color: #071a30;
}

.lawyer-overview-section .lawyer-rating-stars {
    display: flex;
    gap: 3px;
    margin-top: 7px;
}

.lawyer-overview-section .lawyer-rating-stars i {
    color: #bd8b50;
    font-size: 13px;
}

.lawyer-overview-section .lawyer-total-rating>span {
    margin-top: 4px;

    font-size: 10px;
    color: #718398;
}

.lawyer-overview-section .lawyer-review-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;

    margin-top: 22px;
}

.lawyer-overview-section .lawyer-review-card {
    padding: 18px;

    border: 1px solid #e0e6ec;
    border-radius: 13px;
    background: #fbfbfb;

    box-sizing: border-box;
}

.lawyer-overview-section .lawyer-review-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.lawyer-overview-section .lawyer-review-user {
    display: flex;
    align-items: center;
    gap: 10px;
}

.lawyer-overview-section .lawyer-review-avatar {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 40px;
    height: 40px;
    flex: 0 0 40px;

    border-radius: 50%;
    background: #f1e7da;
    color: #b98243;

    font-size: 13px;
    font-weight: 700;
}

.lawyer-overview-section .lawyer-review-user h3 {
    margin: 0;

    font-size: 14px;
    color: #080808;
}

.lawyer-overview-section .lawyer-review-user span {
    display: block;
    margin-top: 3px;

    font-size: 9px;
    color: #718398;
}

.lawyer-overview-section .lawyer-review-date {

    font-size: 9px;
    color: #8a98a7;
}

.lawyer-overview-section .lawyer-review-stars {
    display: flex;
    gap: 3px;
    margin-top: 13px;
}

.lawyer-overview-section .lawyer-review-stars i {
    color: #bd8b50;
    font-size: 12px;
}

.lawyer-overview-section .lawyer-review-card>p {
    margin: 11px 0 0;

    font-size: 11px;
    line-height: 1.6;
    color: #49647e;
}


/* =========================================
   CONTACT
========================================= */

.lawyer-overview-section .lawyer-contact-layout {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 45px;

    margin-top: 28px;
}

.lawyer-overview-section .lawyer-contact-info h3 {
    margin: 0;

    font-size: 20px;
    line-height: 1.3;
    color: #080808;
}

.lawyer-overview-section .lawyer-contact-info>p {
    margin: 10px 0 22px;

    font-size: 11px;
    line-height: 1.7;
    color: #49647e;
}

.lawyer-overview-section .lawyer-contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 11px;

    margin-bottom: 17px;
}

.lawyer-overview-section .lawyer-contact-detail-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 34px;
    height: 34px;
    flex: 0 0 34px;

    border: 1px solid #ead9c3;
    border-radius: 9px;

    background: #faf7f2;
    color: #bd8b50;

    font-size: 12px;
}

.lawyer-overview-section .lawyer-contact-detail div:last-child {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.lawyer-overview-section .lawyer-contact-detail span {

    font-size: 10px;
    color: #718398;
}

.lawyer-overview-section .lawyer-contact-detail strong {

    font-size: 11px;
    font-weight: 500;
    color: #193651;
}


/* =========================================
   CONTACT FORM
========================================= */

.lawyer-overview-section .lawyer-contact-form-wrap {
    width: 100%;
}

.lawyer-overview-section .lawyer-contact-form {
    width: 100%;
}

.lawyer-overview-section .lawyer-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
}

.lawyer-overview-section .lawyer-form-group {
    margin-bottom: 15px;
}

.lawyer-overview-section .lawyer-form-group label {
    display: block;
    margin-bottom: 7px;


    font-size: 11px;
    line-height: 1.3;
    font-weight: 600;
    color: #193651;
}

.lawyer-overview-section .lawyer-form-group label span {
    color: #d14b42;
}

.lawyer-overview-section .lawyer-form-group input,
.lawyer-overview-section .lawyer-form-group textarea {
    width: 100%;
    padding: 0 13px;

    border: 1px solid #dce4eb;
    border-radius: 9px;
    outline: none;

    background: #ffffff;


    font-size: 11px;
    color: #193651;

    box-sizing: border-box;

    transition: border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.lawyer-overview-section .lawyer-form-group input {
    height: 43px;
}

.lawyer-overview-section .lawyer-form-group textarea {
    display: block;

    min-height: 120px;
    padding-top: 12px;
    padding-bottom: 12px;

    resize: vertical;
}

.lawyer-overview-section .lawyer-form-group input::placeholder,
.lawyer-overview-section .lawyer-form-group textarea::placeholder {
    color: #9aa8b5;
}

.lawyer-overview-section .lawyer-form-group input:focus,
.lawyer-overview-section .lawyer-form-group textarea:focus {
    border-color: #bd8b50;
    box-shadow: 0 0 0 2px rgba(189, 139, 80, 0.08);
}


/* =========================================
   SEND BUTTON
========================================= */

.lawyer-overview-section .lawyer-send-message {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    min-height: 43px;
    padding: 0 21px;

    border: 0;
    border-radius: 23px;

    background: #bd8b50;
    color: #ffffff;


    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition: all 0.2s ease;
}

.lawyer-overview-section .lawyer-send-message:hover {
    background: #aa773f;
    transform: translateY(-1px);
}

.lawyer-overview-section .lawyer-send-message i {
    font-size: 11px;
}


/* =========================================
   SUCCESS MESSAGE
========================================= */

.lawyer-overview-section .lawyer-form-success {
    display: none;

    align-items: center;
    gap: 7px;

    margin-top: 13px;
    padding: 10px 13px;

    border-radius: 8px;

    background: #eef9f2;
    color: #28754a;


    font-size: 10px;
}

.lawyer-overview-section .lawyer-form-success.show {
    display: flex;
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 900px) {

    .lawyer-overview-section {
        padding-left: 15px;
        padding-right: 15px;
    }

    .lawyer-overview-section .lawyer-overview-card {
        padding: 27px 25px 32px;
    }

    .lawyer-overview-section .lawyer-contact-layout {
        grid-template-columns: 1fr 1.3fr;
        gap: 30px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    .lawyer-overview-section {
        padding: 0 12px 40px;
    }

    .lawyer-overview-section .lawyer-overview-tabs {
        overflow-x: auto;
        min-height: 45px;

        scrollbar-width: none;
    }

    .lawyer-overview-section .lawyer-overview-tabs::-webkit-scrollbar {
        display: none;
    }

    .lawyer-overview-section .lawyer-overview-tab {
        flex: 0 0 auto;
        padding: 0 15px;
        font-size: 11px;
    }

    .lawyer-overview-section .lawyer-overview-card {
        margin-top: 15px;
        padding: 22px 17px 28px;
        border-radius: 14px;
    }

    .lawyer-overview-section .lawyer-overview-heading h2 {
        font-size: 18px;
    }

    .lawyer-overview-section .lawyer-overview-heading span {
        font-size: 9px;
    }

    .lawyer-overview-section .lawyer-biography-text {
        margin-top: 17px;
        font-size: 10px;
        line-height: 1.7;
    }

    .lawyer-overview-section .lawyer-education-grid,
    .lawyer-overview-section .lawyer-skills-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .lawyer-overview-section .lawyer-review-list {
        grid-template-columns: 1fr;
    }

    .lawyer-overview-section .lawyer-reviews-header {
        align-items: flex-start;
    }

    .lawyer-overview-section .lawyer-contact-layout {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .lawyer-overview-section .lawyer-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 400px) {

    .lawyer-overview-section {
        padding-left: 9px;
        padding-right: 9px;
    }

    .lawyer-overview-section .lawyer-overview-card {
        padding: 20px 14px 25px;
    }

    .lawyer-overview-section .lawyer-overview-heading h2 {
        font-size: 17px;
    }

    .lawyer-overview-section .lawyer-overview-heading span {
        font-size: 8.5px;
    }

    .lawyer-overview-section .lawyer-total-rating>strong {
        font-size: 21px;
    }

    .lawyer-overview-section .lawyer-review-card {
        padding: 14px;
    }

    .lawyer-overview-section .lawyer-contact-info h3 {
        font-size: 18px;
    }

}

/* footer for bg image from backend */
.law-footer {
    position: relative;
    overflow: hidden;
}

.footer-gavel {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 220px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.footer-justice {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 250px;
    height: 320px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    opacity: 0.15;
    z-index: 0;
    pointer-events: none;
}

.law-footer-inner {
    position: relative;
    z-index: 1;
}

/* service order or booking page */

/* =========================
                   BOOKING WRAPPER
                ========================= */

.booking-wrapper {
    width: 100%;
    padding: 22px 18px;
    box-sizing: border-box;
}


/* =========================
                   FILTER BOX
                ========================= */

.filter-box {
    width: 100%;
    padding: 25px 24px;

    background: #ffffff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;

    display: grid;
    grid-template-columns: 1fr 1fr 0.75fr;
    gap: 16px;
    align-items: end;

    box-sizing: border-box;
}

.form-group {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    color: #0d1b3e;
}

.input-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.form-input {
    display: block;
    width: 100%;
    height: 48px;

    padding: 0 18px;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 25px;

    outline: none;
    color: #27334f;

    box-sizing: border-box;
}

.form-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.form-input:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}


/* =========================
                   DATE
                ========================= */

.date-input {
    padding-right: 45px;
}

.calendar-icon {
    position: absolute;
    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    color: #8d9ab5;
    pointer-events: none;
}


/* =========================
                   FILTER BUTTON
                ========================= */

.filter-action {
    width: 100%;
    min-width: 0;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    height: 48px;

    padding: 0 15px;

    border: 0;
    border-radius: 25px;

    background: #b98d54;
    color: #ffffff;

    cursor: pointer;

    box-sizing: border-box;
}

.filter-btn:hover {
    background: #a77b45;
}


/* =========================
                   TABLE BOX
                ========================= */

.table-box {
    width: 100%;
    margin-top: 24px;

    background: #ffffff;
    border: 1px solid #dfe4ec;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.booking-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}

.booking-table thead {
    background: #fbfcfd;
}

.booking-table th {
    height: 55px;
    padding: 0 12px;

    text-align: left;

    color: #050505;

    border-bottom: 1px solid #dfe4ec;

    white-space: nowrap;
}

.booking-table td {
    height: 53px;
    padding: 0 12px;

    color: #4d5b76;

    border-bottom: 1px solid #edf0f4;
}

.booking-table th:first-child,
.booking-table td:first-child {
    padding-left: 12px;
}

.booking-table th:last-child,
.booking-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
                   EMPTY DATA
                ========================= */

.empty-row td {
    height: 53px;

    text-align: center !important;

    color: #59657c;

    border-bottom: none;
}


/* =========================
                   TABLET
                ========================= */

@media (max-width: 1000px) {

    .filter-box {
        grid-template-columns: 1fr 1fr;
    }

    .filter-action {
        grid-column: span 2;
    }
}


/* =========================
                   MOBILE
                ========================= */

@media (max-width: 700px) {

    .booking-wrapper {
        padding: 15px 12px;
    }

    .filter-box {
        padding: 18px 16px;

        grid-template-columns: 1fr;
        gap: 15px;

        border-radius: 14px;
    }

    .filter-action {
        grid-column: auto;
    }

    .form-input,
    .filter-btn {
        height: 46px;
    }

    .table-box {
        margin-top: 16px;
        border-radius: 14px;
    }

    .booking-table {
        min-width: 850px;
    }
}


/* =========================
                   SMALL MOBILE
                ========================= */

@media (max-width: 420px) {

    .booking-wrapper {
        padding: 10px;
    }

    .filter-box {
        padding: 15px 13px;
    }

    .form-input {
        padding-left: 15px;
    }
}

.status-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pending {
    background: #fdf1e0;
    color: #b98d54;
}

.status-ongoing {
    background: #e6f3fb;
    color: #2a5f8f;
}

.status-completed {
    background: #e6f7ed;
    color: #1f9d55;
}

.status-cancelled {
    background: #fde8e8;
    color: #d14b42;
}

.status-reported,
.status-dispute {
    background: #f5e6fb;
    color: #7c3aed;
}

.payment-paid {
    background: #e6f7ed;
    color: #1f9d55;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.payment-pending {
    background: #fde8e8;
    color: #d14b42;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.action-btn-outline,
.action-btn-chat {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
    text-decoration: none;
    margin-left: 6px;
}

.action-btn-outline {
    border: 1px solid #b98d54;
    color: #b98d54;
}

.action-btn-chat {
    border: 1px solid #2a5f8f;
    color: #2a5f8f;
}

/* chat room */

.cr-card {
    margin: 22px 18px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 170px);
    min-height: 480px;
}

.cr-head {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 22px;
    background: #f8f9fb;
    border-bottom: 1px solid #e6eaf0;
}

.cr-back {
    width: 52px;
    height: 40px;
    border: 1px solid #2b3a55;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2b3a55;
    text-decoration: none;
    flex: 0 0 auto;
}

.cr-back:hover {
    background: #eef1f6;
}

.cr-name {
    font-weight: 700;
    font-size: 20px;
    color: #07132e;
    margin: 0;
}

.cr-sub {
    font-size: 13px;
    color: #6b7a99;
    margin-top: 2px;
}

.cr-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}

.cr-msg {
    max-width: 65%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    background: #f1f3f7;
    color: #27334f;
    align-self: flex-start;
    word-wrap: break-word;
}

.cr-msg.mine {
    align-self: flex-end;
    background: #b98d54;
    color: #fff;
}

.cr-msg small {
    display: block;
    font-size: 11px;
    opacity: .7;
    margin-top: 4px;
}

.cr-msg a {
    color: inherit;
    text-decoration: underline;
}

.cr-empty {
    margin: auto;
    text-align: center;
    color: #8d9ab5;
}

.cr-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid #e6eaf0;
    background: #fff;
}

.cr-attach {
    cursor: pointer;
    color: #8d9ab5;
    font-size: 16px;
}

.cr-attach input {
    display: none;
}

.cr-input {
    flex: 1;
    height: 46px;
    padding: 0 16px;
    border: 1px solid #dce2eb;
    border-radius: 8px;
    outline: 0;
    color: #27334f;
}

.cr-input:focus {
    border-color: #b98b52;
}

.cr-send {
    border: 0;
    background: none;
    cursor: pointer;
    color: #27334f;
    font-size: 17px;
    padding: 0 8px;
}

.cr-file {
    font-size: 12px;
    color: #b98d54;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*booking detail  */
.details-wrapper {
    width: 100%;
    padding: 22px 18px;
    box-sizing: border-box;
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.info-card {
    flex: 2;
    min-width: 320px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 26px;
}

.info-card h2 {
    color: #0d1b3e;
    margin: 0 0 20px;
}

.info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #edf0f4;
}

.info-row:last-child {
    border-bottom: none;
}

.info-row span {
    color: #4d5b76;
}

.info-row strong {
    color: #0d1b3e;
    text-align: right;
}

.status-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pending {
    background: #fdf1e0;
    color: #b98d54;
}

.status-ongoing {
    background: #e6f3fb;
    color: #2a5f8f;
}

.status-completed {
    background: #e6f7ed;
    color: #1f9d55;
}

.status-cancelled {
    background: #fde8e8;
    color: #d14b42;
}

.status-reported,
.status-dispute {
    background: #f5e6fb;
    color: #7c3aed;
}

.payment-paid {
    background: #e6f7ed;
    color: #1f9d55;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.payment-pending {
    background: #fde8e8;
    color: #d14b42;
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.action-card {
    flex: 1;
    min-width: 240px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    height: fit-content;
}

.action-card h2 {
    color: #0d1b3e;
    margin: 0 0 6px;
}

.btn-chat {
    padding: 13px;
    border: 1px solid #2a5f8f;
    border-radius: 25px;
    background: #fff;
    color: #2a5f8f;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
}

.btn-cancel {
    padding: 13px;
    border: 0;
    border-radius: 25px;
    background: #f2c94c;
    color: #1a1a1a;
    font-weight: 700;
    cursor: pointer;
}

.status-quoted {
    background: #e6efff;
    color: #3b6fd8;
}

.btn-accept {
    padding: 13px;
    border: 0;
    border-radius: 25px;
    background: #34c759;
    color: #fff;
    text-align: center;
    text-decoration: none;
    font-weight: 700;
}

.btn-accept:hover {
    background: #2bb04f;
    color: #fff;
}

.quote-hint {
    font-size: 14px;
    color: #4d5b76;
    line-height: 1.6;
    margin: 0;
}

.quote-label {
    display: block;
    margin: 10px 0 6px;
    color: #6b7a99;
    font-size: 14px;
}

.quote-input-row {
    display: flex;
    border: 1px solid #dce2eb;
    border-radius: 25px;
    overflow: hidden;
}

.quote-input-row input {
    flex: 1;
    border: 0;
    outline: 0;
    padding: 12px 18px;
    min-width: 0;
}

.quote-input-row span {
    background: #e9edf2;
    padding: 12px 18px;
    color: #27334f;
}

.quote-textarea {
    width: 100%;
    min-height: 140px;
    border: 1px solid #dce2eb;
    border-radius: 18px;
    padding: 14px 16px;
    box-sizing: border-box;
    outline: 0;
}

.btn-quote {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    margin-top: 12px;
}

.attach-link {
    display: block;
    padding: 11px 16px;
    border: 1px solid #b98d54;
    border-radius: 25px;
    color: #b98d54;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*  */
.so-card {
    margin: 22px 18px;
    max-width: 700px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 26px;
}

.so-card h2 {
    color: #0d1b3e;
    margin: 0 0 18px;
}

.so-table {
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    overflow: hidden;
}

.so-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-bottom: 1px solid #edf0f4;
}

.so-row:last-child {
    border-bottom: none;
}

.so-row span {
    color: #4d5b76;
}

.so-row strong {
    color: #0d1b3e;
    text-align: right;
}

.so-req {
    padding: 13px 16px;
}

.so-req span {
    display: block;
    color: #0d1b3e;
    font-weight: 600;
    margin-bottom: 6px;
}

.badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.b-pending {
    background: #fdf1e0;
    color: #b98d54
}

.b-ongoing {
    background: #e6f3fb;
    color: #2a5f8f
}

.b-completed,
.b-paid {
    background: #e6f7ed;
    color: #1f9d55
}

.b-cancelled,
.b-unpaid {
    background: #fde8e8;
    color: #d14b42
}

.so-actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.btn-pay {
    padding: 13px 26px;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
}

.btn-chat-o {
    padding: 12px 24px;
    border-radius: 25px;
    border: 1px solid #149fe6;
    color: #149fe6;
    text-decoration: none;
    font-weight: 600;
    background: #fff;
}

.btn-reject {
    padding: 12px 24px;
    border-radius: 25px;
    border: 1px solid #e0463d;
    color: #e0463d;
    background: #fff;
    font-weight: 600;
    cursor: pointer;
}

.btn-reject:hover {
    background: #fde8e8;
}

.alert-ok {
    background: #e7f8ee;
    border: 1px solid #b7e4c7;
    color: #1c7c4a;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 16px;
    font-size: 14px;
}

.rj-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.rj-overlay.show {
    display: flex;
}

.rj-box {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    width: 90%;
    max-width: 400px;
    text-align: center;
}

.rj-box h3 {
    margin: 0 0 8px;
    color: #0d1b3e;
}

.rj-box p {
    color: #4d5b76;
    margin: 0 0 22px;
    font-size: 14px;
}

.rj-btns {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.rj-ok {
    padding: 11px 26px;
    border: 0;
    border-radius: 22px;
    background: #e0463d;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
}

.rj-no {
    padding: 11px 26px;
    border: 1px solid #dfe4ec;
    border-radius: 22px;
    background: #fff;
    color: #4d5b76;
    cursor: pointer;
}

/* booking request */

.booking-page-wrapper {
    max-width: 1100px;
    margin: 70px auto;
    padding: 0 18px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.booking-form-card {
    flex: 2;
    min-width: 320px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 28px;
}

.booking-form-card h1 {
    color: #0d1b3e;
    margin: 0 0 10px;
    font-size: 26px;
}

.booking-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #d14b42;
    font-size: 14px;
    margin-bottom: 24px;
}

.booking-row {
    display: flex;
    gap: 18px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.booking-group {
    flex: 1;
    min-width: 220px;
}

.booking-group label {
    display: block;
    margin-bottom: 8px;
    color: #4d5b76;
    font-size: 14px;
}

.booking-group label .required {
    color: #d14b42;
}

.booking-group input[type="text"],
.booking-group input[type="datetime-local"] {
    width: 100%;
    padding: 13px 18px;
    border: 1px solid #dce2eb;
    border-radius: 25px;
    outline: none;
    color: #27334f;
    box-sizing: border-box;
}

.booking-group input:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}

.desc-editor {
    border: 1px solid #dce2eb;
    border-radius: 12px;
    overflow: hidden;
}

.upload-row {
    display: flex;
    align-items: center;
    gap: 0;
    margin-top: 8px;
    margin-bottom: 16px;
    border: 1px solid #dce2eb;
    border-radius: 25px;
    overflow: hidden;
}

.upload-btn-label {
    background: #b98d54;
    color: #fff;
    padding: 13px 24px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.upload-btn-label input {
    display: none;
}

.upload-filename {
    padding: 13px 18px;
    color: #8d9ab5;
    flex: 1;
}

.booking-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: #8d9ab5;
    margin-bottom: 10px;
}

.booking-hint.warn {
    color: #b98d54;
}

.btn-send-request {
    width: 100%;
    padding: 15px;
    margin-top: 16px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
}

.btn-send-request:hover {
    background: #a77b45;
}

.lawyer-info-card {
    flex: 1;
    min-width: 280px;
}

.lawyer-info-label {
    color: #b98d54;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    display: block;
    margin-bottom: 8px;
    position: relative;
    padding-bottom: 8px;
}

.lawyer-info-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: #b98d54;
}

.lawyer-info-card h2 {
    color: #0d1b3e;
    font-size: 24px;
    margin: 0 0 10px;
}

.lawyer-info-card>p {
    color: #4d5b76;
    font-size: 14px;
    margin-bottom: 20px;
}

.info-item-box {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 14px;
}

.info-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #f5f6f8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b98d54;
    flex: 0 0 auto;
}

.info-item-box span {
    display: block;
    font-size: 12px;
    color: #8d9ab5;
    margin-bottom: 3px;
}

.info-item-box strong {
    color: #0d1b3e;
    font-size: 15px;
}

/* boost page */

/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}

/* chat */
.chat-wrap {
    display: flex;
    height: calc(100vh - 190px);
    min-height: 520px;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #dfe4ec;
}

.chat-left {
    width: 400px;
    max-width: 40%;
    border-right: 1px solid #e6eaf0;
    display: flex;
    flex-direction: column;
}

.chat-left h3 {
    margin: 0;
    padding: 26px 16px 10px;
    color: #07132e;
}

.chat-search {
    margin: 0 16px 14px;
    display: flex;
    align-items: center;
    background: #f2f4f7;
    border-radius: 28px;
    padding: 0 16px;
    height: 48px;
}

.chat-search input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    color: #27334f;
}

.chat-search button {
    border: 0;
    background: none;
    cursor: pointer;
    color: #071b3d;
}

.chat-list {
    overflow-y: auto;
    flex: 1;
    padding: 10px;
    border-top: 1px solid #e6eaf0;
}

.chat-item {
    display: flex;
    gap: 12px;
    padding: 10px;
    border: 1px solid #edf0f4;
    border-radius: 10px;
    margin-bottom: 8px;
    text-decoration: none;
    color: inherit;
    position: relative;
}

.chat-item.active {
    background: #f0e6dc;
    border-color: #f0e6dc;
}

.chat-item img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
    flex: 0 0 auto;
}

.chat-item .info {
    flex: 1;
    min-width: 0;
}

.chat-item .top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.chat-item .nm {
    font-weight: 700;
    color: #07132e;
}

.chat-item .tm {
    color: #53617b;
    font-size: 13px;
    white-space: nowrap;
}

.chat-item .ls {
    color: #53617b;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 26px;
}

.chat-badge {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #000;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: #f5f6f8;
}

.chat-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #e6eaf0;
}

.chat-head img {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    object-fit: cover;
}

.chat-head .nm {
    font-size: 20px;
    font-weight: 700;
    color: #07132e;
}

.chat-head .bk {
    font-size: 12px;
    color: #b98d54;
    display: flex;
    align-items: center;
    gap: 6px;
}

.chat-head .bk::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #b98d54;
}

.chat-refresh {
    margin-left: auto;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 0;
    background: #b98d54;
    color: #fff;
    cursor: pointer;
}

.chat-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.msg {
    max-width: 65%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    word-wrap: break-word;
    background: #fff;
    color: #27334f;
    align-self: flex-start;
}

.msg.mine {
    align-self: flex-end;
    background: #b98d54;
    color: #fff;
}

.msg small {
    display: block;
    font-size: 11px;
    opacity: .7;
    margin-top: 4px;
}

.msg a {
    color: inherit;
    text-decoration: underline;
}

.chat-empty {
    margin: auto;
    color: #8d9ab5;
}

.chat-form {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 14px;
    padding: 8px 14px;
    background: #fff;
    border: 3px solid #e6eaf0;
    border-radius: 14px;
}

.chat-form input[type=text] {
    flex: 1;
    border: 0;
    outline: 0;
    height: 40px;
    color: #27334f;
}

.chat-form button,
.chat-form label {
    border: 0;
    background: none;
    cursor: pointer;
    color: #071b3d;
    font-size: 16px;
}

.chat-form .sep {
    width: 2px;
    height: 28px;
    background: #e6eaf0;
}

.chat-form input[type=file] {
    display: none;
}

#fileHint {
    font-size: 12px;
    color: #b98d54;
}

@media (max-width:800px) {
    .chat-wrap {
        flex-direction: column;
        height: auto;
    }

    .chat-left {
        width: 100%;
        max-width: 100%;
        max-height: 280px;
    }

    .chat-right {
        min-height: 480px;
    }
}

/* with drawal */

/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}

/* =========================
           MAIN PROFILE WRAPPER
        ========================= */

.profile-wrapper {
    width: 100%;
    padding: 18px;
    box-sizing: border-box;
}


/* =========================
           PROFILE CARD
        ========================= */

.profile-card {
    width: 100%;
    max-width: 1010px;
    margin: 0 auto;

    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 12px;

    overflow: hidden;
    box-sizing: border-box;
}


/* =========================
           CARD HEADER
        ========================= */

.profile-card-header {
    width: 100%;
    padding: 16px 24px;

    background: #fafbfc;
    border-bottom: 1px solid #dce3ec;

    box-sizing: border-box;
}

.profile-card-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           CARD BODY
        ========================= */

.profile-card-body {
    width: 100%;
    padding: 24px;

    box-sizing: border-box;
}


/* =========================
           PROFILE PHOTO SECTION
        ========================= */

.profile-photo-section {
    width: 100%;
    margin-bottom: 27px;
}

.profile-section-title {
    margin: 0 0 5px;
    color: #07132e;
}

.profile-section-description {
    margin: 0;
    color: #07132e;
}


/* =========================
           PHOTO UPLOAD
        ========================= */

.profile-photo-upload {
    margin-top: 26px;

    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-photo-preview {
    width: 80px;
    height: 80px;

    border: 1px solid #dce3ec;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #69758a;

    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.change-picture-btn {
    height: 42px;

    padding: 0 18px;

    background: #ffffff;
    border: 1px solid #bf8b4c;
    border-radius: 22px;

    color: #b77e39;

    cursor: pointer;

    box-sizing: border-box;
}

.change-picture-btn:hover {
    background: #bf8b4c;
    color: #ffffff;
}


/* =========================
           FORM GRID
        ========================= */

.profile-form {
    width: 100%;
}

.profile-form-row {
    width: 100%;
    margin-bottom: 17px;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    box-sizing: border-box;
}

.profile-form-row.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}


/* =========================
           FORM GROUP
        ========================= */

.profile-form-group {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-form-label {
    display: block;
    margin-bottom: 8px;

    color: #53617b;
}

.required-star {
    color: #ed4b4b;
}


/* =========================
           INPUT
        ========================= */

.profile-form-input {
    display: block;

    width: 100%;
    height: 48px;

    padding: 0 17px;

    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 25px;

    outline: none;

    color: #07132e;

    box-sizing: border-box;
}

.profile-form-input:focus {
    border-color: #bc8a50;
    box-shadow: 0 0 0 3px rgba(188, 138, 80, 0.08);
}

.profile-form-input::placeholder {
    color: #8c99b1;
    opacity: 1;
}

.profile-form-input:disabled {
    background: #ffffff;
    color: #657087;
    cursor: not-allowed;
}


/* =========================
           SUBMIT BUTTON
        ========================= */

.profile-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 48px;

    margin-top: 1px;

    border: 0;
    border-radius: 25px;

    background: #bc8d52;
    color: #ffffff;

    cursor: pointer;

    box-sizing: border-box;
}

.profile-submit-btn:hover {
    background: #a9793f;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 768px) {

    .profile-wrapper {
        padding: 15px;
    }

    .profile-card-body {
        padding: 20px;
    }

    .profile-form-row,
    .profile-form-row.three-columns {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }

}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .profile-wrapper {
        padding: 10px;
    }

    .profile-card {
        border-radius: 10px;
    }

    .profile-card-header {
        padding: 15px 16px;
    }

    .profile-card-body {
        padding: 18px 16px;
    }


    /* Photo */

    .profile-photo-upload {
        margin-top: 20px;
    }

    .profile-photo-preview {
        width: 75px;
        height: 75px;
    }


    /* Form */

    .profile-form-row,
    .profile-form-row.three-columns {
        grid-template-columns: 1fr;
        gap: 15px;

        margin-bottom: 15px;
    }

    .profile-form-input {
        height: 46px;
    }

    .profile-submit-btn {
        height: 46px;
    }

}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .profile-wrapper {
        padding: 8px;
    }

    .profile-card-body {
        padding: 16px 13px;
    }

    .profile-card-header {
        padding: 14px 13px;
    }

    .profile-photo-upload {
        gap: 10px;
    }

    .profile-photo-preview {
        width: 70px;
        height: 70px;
    }

    .change-picture-btn {
        padding: 0 14px;
    }

    .profile-form-input {
        padding: 0 15px;
    }

}

/* tranasaxtion */

/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}

/* support toicket */
/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}

/* service order */
/* =========================
           BOOKING WRAPPER
        ========================= */

.booking-wrapper {
    width: 100%;
    padding: 22px 18px;
    box-sizing: border-box;
}


/* =========================
           FILTER BOX
        ========================= */

.filter-box {
    width: 100%;
    padding: 25px 24px;

    background: #ffffff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;

    display: grid;
    grid-template-columns: 1fr 1fr 0.75fr;
    gap: 16px;
    align-items: end;

    box-sizing: border-box;
}

.form-group {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    color: #0d1b3e;
}

.input-wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.form-input {
    display: block;
    width: 100%;
    height: 48px;

    padding: 0 18px;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 25px;

    outline: none;
    color: #27334f;

    box-sizing: border-box;
}

.form-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.form-input:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}


/* =========================
           DATE
        ========================= */

.date-input {
    padding-right: 45px;
}

.calendar-icon {
    position: absolute;
    right: 18px;
    top: 50%;

    transform: translateY(-50%);

    color: #8d9ab5;
    pointer-events: none;
}


/* =========================
           FILTER BUTTON
        ========================= */

.filter-action {
    width: 100%;
    min-width: 0;
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    height: 48px;

    padding: 0 15px;

    border: 0;
    border-radius: 25px;

    background: #b98d54;
    color: #ffffff;

    cursor: pointer;

    box-sizing: border-box;
}

.filter-btn:hover {
    background: #a77b45;
}


/* =========================
           TABLE BOX
        ========================= */

.table-box {
    width: 100%;
    margin-top: 24px;

    background: #ffffff;
    border: 1px solid #dfe4ec;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.booking-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;
}

.booking-table thead {
    background: #fbfcfd;
}

.booking-table th {
    height: 55px;
    padding: 0 12px;

    text-align: left;

    color: #050505;

    border-bottom: 1px solid #dfe4ec;

    white-space: nowrap;
}

.booking-table td {
    height: 53px;
    padding: 0 12px;

    color: #4d5b76;

    border-bottom: 1px solid #edf0f4;
}

.booking-table th:first-child,
.booking-table td:first-child {
    padding-left: 12px;
}

.booking-table th:last-child,
.booking-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.empty-row td {
    height: 53px;

    text-align: center !important;

    color: #59657c;

    border-bottom: none;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 1000px) {

    .filter-box {
        grid-template-columns: 1fr 1fr;
    }

    .filter-action {
        grid-column: span 2;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 700px) {

    .booking-wrapper {
        padding: 15px 12px;
    }

    .filter-box {
        padding: 18px 16px;

        grid-template-columns: 1fr;
        gap: 15px;

        border-radius: 14px;
    }

    .filter-action {
        grid-column: auto;
    }

    .form-input,
    .filter-btn {
        height: 46px;
    }

    .table-box {
        margin-top: 16px;
        border-radius: 14px;
    }

    .booking-table {
        min-width: 850px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 420px) {

    .booking-wrapper {
        padding: 10px;
    }

    .filter-box {
        padding: 15px 13px;
    }

    .form-input {
        padding-left: 15px;
    }
}


/* service managment */

.service-wrapper {
    width: 100%;
    padding: 22px 18px;
    box-sizing: border-box;
}

.service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.service-header h2 {
    color: #0d1b3e;
    margin: 0;
}

.btn-add {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 12px 22px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    cursor: pointer;
    text-decoration: none;
}

.btn-add:hover {
    background: #a77b45;
    color: #fff;
}

.filter-box {
    width: 100%;
    padding: 25px 24px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 0.75fr;
    gap: 16px;
    align-items: end;
    box-sizing: border-box;
}

.form-group {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.form-label {
    display: block;
    margin-bottom: 9px;
    color: #0d1b3e;
}

.form-input,
.form-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 18px;
    background: #fff;
    border: 1px solid #dce2eb;
    border-radius: 25px;
    outline: none;
    color: #27334f;
    box-sizing: border-box;
}

.form-input::placeholder {
    color: #8d9ab5;
}

.form-input:focus,
.form-select:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}

.filter-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    cursor: pointer;
}

.filter-btn:hover {
    background: #a77b45;
}

.table-box {
    width: 100%;
    margin-top: 24px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 17px;
    overflow: hidden;
    box-sizing: border-box;
}

.table-scroll {
    width: 100%;
    overflow-x: auto;
}

.service-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
}

.service-table thead {
    background: #fbfcfd;
}

.service-table th {
    height: 55px;
    padding: 0 12px;
    text-align: left;
    color: #050505;
    border-bottom: 1px solid #dfe4ec;
    white-space: nowrap;
}

.service-table td {
    height: 53px;
    padding: 0 12px;
    color: #4d5b76;
    border-bottom: 1px solid #edf0f4;
}

.service-table th:last-child,
.service-table td:last-child {
    text-align: right;
    padding-right: 14px;
}

.empty-row td {
    height: 53px;
    text-align: center !important;
    color: #59657c;
    border-bottom: none;
}

.status-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.status-pending {
    background: #fdf1e0;
    color: #b98d54;
}

.status-approved {
    background: #e6f7ed;
    color: #1f9d55;
}

.status-rejected {
    background: #fde8e8;
    color: #d14b42;
}

.action-icon {
    color: #8d9ab5;
    margin-left: 10px;
    text-decoration: none;
}

.action-icon:hover {
    color: #b98d54;
}

@media (max-width: 1000px) {
    .filter-box {
        grid-template-columns: 1fr 1fr;
    }

    .filter-box .filter-action {
        grid-column: span 2;
    }
}

@media (max-width: 700px) {
    .filter-box {
        grid-template-columns: 1fr;
    }
}


/* service edit */
.add-service-wrapper {
    width: 100%;
    max-width: 900px;
    padding: 22px 18px;
    box-sizing: border-box;
}

.add-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.add-service-header h2 {
    color: #b98d54;
    margin: 0;
}

.btn-back {
    padding: 10px 20px;
    border: 1px solid #dfe4ec;
    border-radius: 25px;
    background: #fff;
    color: #4d5b76;
    text-decoration: none;
}

.form-card {
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 26px;
}

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

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #0d1b3e;
    font-weight: 600;
    font-size: 14px;
}

.form-label .required {
    color: #d14b42;
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    outline: none;
    color: #27334f;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: #d14b42;
}

.invalid-feedback {
    display: block;
    color: #d14b42;
    font-size: 12px;
    margin-top: 6px;
}

.form-textarea {
    resize: vertical;
    min-height: 90px;
}

.price-group {
    display: flex;
    align-items: center;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    overflow: hidden;
}

.price-group.is-invalid {
    border-color: #d14b42;
}

.price-prefix {
    padding: 13px 16px;
    background: #f5f6f8;
    color: #4d5b76;
}

.price-group input {
    border: 0;
    flex: 1;
    padding: 13px 18px;
    outline: none;
}

.delivery-group {
    display: flex;
    align-items: center;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    overflow: hidden;
}

.delivery-group.is-invalid {
    border-color: #d14b42;
}

.delivery-group input {
    border: 0;
    flex: 1;
    padding: 13px 18px;
    outline: none;
}

.delivery-suffix {
    padding: 13px 16px;
    background: #f5f6f8;
    color: #4d5b76;
    border-left: 1px solid #dce2eb;
}

.upload-box {
    width: 90px;
    height: 90px;
    border: 1px dashed #dce2eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d9ab5;
    font-size: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-hint {
    font-size: 12px;
    color: #8d9ab5;
    margin-bottom: 10px;
}

.btn-change {
    padding: 8px 16px;
    border: 1px solid #b98d54;
    border-radius: 20px;
    background: #fff;
    color: #b98d54;
    cursor: pointer;
    font-size: 13px;
}

.features-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.btn-add-feature {
    padding: 8px 16px;
    border: 1px solid #b98d54;
    border-radius: 20px;
    background: #fff;
    color: #b98d54;
    cursor: pointer;
    font-size: 13px;
}

.feature-card {
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
}

.feature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.feature-card-header strong {
    color: #b98d54;
}

.btn-remove-feature {
    border: 1px solid #d14b42;
    color: #d14b42;
    background: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.btn-submit {
    padding: 13px 34px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    cursor: pointer;
}

.btn-submit:hover {
    background: #a77b45;
}

.btn-cancel {
    padding: 13px 30px;
    border: 1px solid #dfe4ec;
    border-radius: 25px;
    background: #fff;
    color: #4d5b76;
    cursor: pointer;
    text-decoration: none;
}

.alert-success {
    background: #e7f8ee;
    border: 1px solid #b7e4c7;
    color: #1c7c4a;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
}

.tag-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.tag-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: #f5f6f8;
    border-radius: 20px;
    font-size: 13px;
    color: #27334f;
}

.tag-chip .remove-chip {
    cursor: pointer;
    color: #8d9ab5;
}

.tag-dropdown {
    position: absolute;
    z-index: 10;
    width: 100%;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 10px;
    max-height: 160px;
    overflow-y: auto;
    display: none;
}

.tag-dropdown div {
    padding: 10px 16px;
    cursor: pointer;
    font-size: 13px;
}

.tag-dropdown div:hover {
    background: #f5f6f8;
}

/* service add */

.add-service-wrapper {
    width: 100%;
    max-width: 900px;
    padding: 22px 18px;
    box-sizing: border-box;
}

.add-service-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.add-service-header h2 {
    color: #b98d54;
    margin: 0;
}

.btn-back {
    padding: 10px 20px;
    border: 1px solid #dfe4ec;
    border-radius: 25px;
    background: #fff;
    color: #4d5b76;
    text-decoration: none;
}

.plan-banner {
    background: #eaf4ff;
    border: 1px solid #cfe4fb;
    border-radius: 10px;
    padding: 12px 18px;
    margin-bottom: 20px;
    color: #2a5f8f;
    font-size: 14px;
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.form-card {
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 26px;
}

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

.form-label {
    display: block;
    margin-bottom: 8px;
    color: #0d1b3e;
    font-weight: 600;
    font-size: 14px;
}

.form-label .required {
    color: #d14b42;
}

.form-input,
.form-select,
.form-textarea {
    display: block;
    width: 100%;
    padding: 13px 18px;
    background: #fff;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    outline: none;
    color: #27334f;
    box-sizing: border-box;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}

.form-input.is-invalid,
.form-select.is-invalid,
.form-textarea.is-invalid {
    border-color: #d14b42;
}

.invalid-feedback {
    display: block;
    color: #d14b42;
    font-size: 12px;
    margin-top: 6px;
}

.form-textarea {
    resize: vertical;
    min-height: 90px;
}

.price-group {
    display: flex;
    align-items: center;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    overflow: hidden;
}

.price-group.is-invalid {
    border-color: #d14b42;
}

.price-prefix {
    padding: 13px 16px;
    background: #f5f6f8;
    color: #4d5b76;
}

.price-group input {
    border: 0;
    flex: 1;
    padding: 13px 18px;
    outline: none;
}

.delivery-group {
    display: flex;
    align-items: center;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    overflow: hidden;
}

.delivery-group.is-invalid {
    border-color: #d14b42;
}

.delivery-group input {
    border: 0;
    flex: 1;
    padding: 13px 18px;
    outline: none;
}

.delivery-suffix {
    padding: 13px 16px;
    background: #f5f6f8;
    color: #4d5b76;
    border-left: 1px solid #dce2eb;
}

.upload-box {
    width: 90px;
    height: 90px;
    border: 1px dashed #dce2eb;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8d9ab5;
    font-size: 12px;
    margin-bottom: 10px;
    overflow: hidden;
}

.upload-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.upload-hint {
    font-size: 12px;
    color: #8d9ab5;
    margin-bottom: 10px;
}

.btn-change {
    padding: 8px 16px;
    border: 1px solid #b98d54;
    border-radius: 20px;
    background: #fff;
    color: #b98d54;
    cursor: pointer;
    font-size: 13px;
}

.features-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.btn-add-feature {
    padding: 8px 16px;
    border: 1px solid #b98d54;
    border-radius: 20px;
    background: #fff;
    color: #b98d54;
    cursor: pointer;
    font-size: 13px;
}

.feature-card {
    border: 1px solid #dfe4ec;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
    position: relative;
}

.feature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.feature-card-header strong {
    color: #b98d54;
}

.btn-remove-feature {
    border: 1px solid #d14b42;
    color: #d14b42;
    background: #fff;
    padding: 5px 12px;
    border-radius: 15px;
    font-size: 12px;
    cursor: pointer;
}

.form-actions {
    display: flex;
    gap: 12px;
    margin-top: 10px;
}

.btn-submit {
    padding: 13px 34px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    cursor: pointer;
}

.btn-submit:hover {
    background: #a77b45;
}

.btn-cancel {
    padding: 13px 30px;
    border: 1px solid #dfe4ec;
    border-radius: 25px;
    background: #fff;
    color: #4d5b76;
    cursor: pointer;
    text-decoration: none;
}

.alert-success {
    background: #e7f8ee;
    border: 1px solid #b7e4c7;
    color: #1c7c4a;
    padding: 12px 18px;
    border-radius: 10px;
    margin-bottom: 18px;
    font-size: 14px;
}


/* service detail */
.booking-form-group {
    margin-top: 18px;
    margin-bottom: 18px;
}

.booking-form-group label {
    display: block;
    margin-bottom: 10px;
    color: #0d1b3e;
    font-weight: 600;
    font-size: 15px;
}

.booking-form-group label .required {
    color: #d14b42;
}

.booking-form-group textarea {
    display: block;
    width: 100%;
    min-height: 150px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid #dce2eb;
    border-radius: 12px;
    outline: none;
    color: #27334f;
    font-size: 14px;
    box-sizing: border-box;
    resize: vertical;
}

.booking-form-group textarea:focus {
    border-color: #b98b52;
    box-shadow: 0 0 0 3px rgba(185, 139, 82, 0.08);
}

/* profile setting */

/* ===== existing styles same rakho (profile-wrapper, profile-card, forms, inputs) ===== */

.profile-wrapper {
    width: 100%;
    padding: 18px;
    box-sizing: border-box;
}

.profile-card {
    width: 100%;
    max-width: 1010px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
}

.profile-card-header {
    width: 100%;
    padding: 16px 24px;
    background: #fafbfc;
    border-bottom: 1px solid #dce3ec;
    box-sizing: border-box;
}

.profile-card-title {
    margin: 0;
    color: #07132e;
}

.profile-card-body {
    width: 100%;
    padding: 24px;
    box-sizing: border-box;
}

/* ===== TABS ===== */
.profile-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e9ef;
    margin-bottom: 24px;
}

.profile-tab-btn {
    background: none;
    border: none;
    padding: 10px 4px 14px;
    color: #53617b;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-weight: 600;
}

.profile-tab-btn.active {
    color: #bc8d52;
    border-bottom-color: #bc8d52;
}

.profile-tab-content {
    display: none;
}

.profile-tab-content.active {
    display: block;
}

/* ===== PHOTO SECTION - 2 COLUMNS ===== */
.photo-section-row {
    width: 100%;
    margin-bottom: 27px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.photo-section-box {
    background: #f4f5f7;
    border-radius: 10px;
    padding: 20px;
    box-sizing: border-box;
}

.profile-section-title {
    margin: 0 0 5px;
    color: #07132e;
}

.profile-section-description {
    margin: 0;
    color: #53617b;
}

.profile-photo-upload {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-photo-preview,
.cover-photo-preview {
    width: 80px;
    height: 80px;
    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #69758a;
    flex-shrink: 0;
    box-sizing: border-box;
    font-size: 13px;
    text-align: center;
    overflow: hidden;
}

.change-picture-btn {
    height: 42px;
    padding: 0 18px;
    background: #ffffff;
    border: 1px solid #bf8b4c;
    border-radius: 22px;
    color: #b77e39;
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
}

.change-picture-btn:hover {
    background: #bf8b4c;
    color: #ffffff;
}

/* ===== FORM GRID ===== */
.profile-form-row {
    width: 100%;
    margin-bottom: 17px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    box-sizing: border-box;
}

.profile-form-row.three-columns {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
}

.profile-form-group {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.profile-form-label {
    display: block;
    margin-bottom: 8px;
    color: #53617b;
}

.required-star {
    color: #ed4b4b;
}

.profile-form-input,
.profile-form-textarea,
.profile-form-select {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 17px;
    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 25px;
    outline: none;
    color: #07132e;
    box-sizing: border-box;
}

.profile-form-textarea {
    height: auto;
    min-height: 120px;
    padding: 14px 17px;
    border-radius: 16px;
    resize: vertical;
}

.profile-form-input:focus,
.profile-form-textarea:focus,
.profile-form-select:focus {
    border-color: #bc8a50;
    box-shadow: 0 0 0 3px rgba(188, 138, 80, 0.08);
}

.profile-form-input:disabled {
    background: #ffffff;
    color: #657087;
    cursor: not-allowed;
}

/* ===== SECTION BOX (Basic Info, Professional Details, etc) ===== */
.profile-section-box {
    background: #f4f5f7;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
    box-sizing: border-box;
}

.profile-section-box-title {
    margin: 0 0 16px;
    color: #07132e;
}

/* ===== SUBMIT BUTTON ===== */
.profile-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin-top: 10px;
    border: 0;
    border-radius: 25px;
    background: #bc8d52;
    color: #ffffff;
    cursor: pointer;
    box-sizing: border-box;
}

.profile-submit-btn:hover {
    background: #a9793f;
}

/* ===== DYNAMIC ROWS (Education / Skill) ===== */
.dynamic-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.add-row-btn {
    background: #ffffff;
    border: 1px solid #bf8b4c;
    color: #b77e39;
    border-radius: 22px;
    padding: 8px 16px;
    cursor: pointer;
}

.add-row-btn:hover {
    background: #bf8b4c;
    color: #ffffff;
}

.dynamic-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr auto;
    gap: 16px;
    margin-bottom: 14px;
    align-items: end;
}

.remove-row-btn {
    width: 44px;
    height: 44px;
    border: 1px solid #f04c43;
    color: #f04c43;
    background: #ffffff;
    border-radius: 50%;
    cursor: pointer;
}

.remove-row-btn:hover {
    background: #f04c43;
    color: #ffffff;
}

@media (max-width: 768px) {
    .profile-card-body {
        padding: 20px;
    }

    .profile-form-row,
    .profile-form-row.three-columns,
    .dynamic-row {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
}

@media (max-width: 600px) {
    .profile-wrapper {
        padding: 10px;
    }

    .profile-card-body {
        padding: 18px 16px;
    }

    .photo-section-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .profile-form-row,
    .profile-form-row.three-columns,
    .dynamic-row {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 15px;
    }

    .profile-tabs {
        gap: 14px;
        overflow-x: auto;
    }
}

.category-select {
    position: relative;
    width: 100%;
}

.category-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    padding: 0 17px;
    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 25px;
    color: #07132e;
    cursor: pointer;
    box-sizing: border-box;
}

.category-trigger:hover {
    border-color: #bc8a50;
}

.category-trigger i {
    color: #69758a;
    transition: transform 0.2s ease;
}

.category-select.open .category-trigger i {
    transform: rotate(180deg);
}

.category-search-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 17px;
    background: #ffffff;
    border: 1px solid #bc8a50;
    border-radius: 25px;
    outline: none;
    color: #07132e;
    box-sizing: border-box;
    margin-bottom: 6px;
}

.category-options {
    width: 100%;
    max-height: 220px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid #dce3ec;
    border-radius: 12px;
    margin-bottom: 6px;
    box-sizing: border-box;
}

.category-option {
    padding: 12px 18px;
    color: #07132e;
    cursor: pointer;
    border-bottom: 1px solid #f0f2f5;
}

.category-option:last-child {
    border-bottom: none;
}

.category-option:hover,
.category-option.highlighted {
    background: #f4f5f7;
}

.category-option.selected {
    background: #bc8d52;
    color: #ffffff;
}

.category-option-empty {
    padding: 12px 18px;
    color: #9aa4b5;
}

/* secutity page */

/* =========================
           MAIN WRAPPER
        ========================= */

.twofa-wrapper {
    width: 100%;
    padding: 16px 20px;

    box-sizing: border-box;
}


/* =========================
           TWO COLUMN LAYOUT
        ========================= */

.twofa-grid {
    width: 100%;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;

    align-items: start;

    box-sizing: border-box;
}


/* =========================
           CARD
        ========================= */

.twofa-card {
    width: 100%;

    background: #ffffff;

    border: 1px solid #dce3ec;
    border-radius: 12px;

    overflow: hidden;

    box-sizing: border-box;
}


/* =========================
           CARD HEADER
        ========================= */

.twofa-card-header {
    width: 100%;

    padding: 16px 24px;

    background: #fafbfc;

    border-bottom: 1px solid #dce3ec;

    box-sizing: border-box;
}

.twofa-card-title {
    margin: 0;

    color: #07132e;
}


/* =========================
           CARD BODY
        ========================= */

.twofa-card-body {
    width: 100%;

    padding: 24px;

    box-sizing: border-box;
}


/* =========================
           LEFT CARD CONTENT
        ========================= */

.twofa-instruction {
    margin: 0 0 17px;

    color: #07132e;
}


/* =========================
           QR CODE
        ========================= */

.twofa-qr-wrapper {
    width: 100%;

    display: flex;
    justify-content: center;
    align-items: center;

    margin-bottom: 18px;

    box-sizing: border-box;
}

.twofa-qr {
    width: 250px;
    height: 250px;

    display: block;

    object-fit: contain;

    box-sizing: border-box;
}


/* =========================
           SETUP KEY LABEL
        ========================= */

.twofa-label {
    display: block;

    margin-bottom: 8px;

    color: #07132e;
}


/* =========================
           SETUP KEY BOX
        ========================= */

.twofa-key-box {
    width: 100%;
    height: 48px;

    display: flex;
    align-items: stretch;

    border: 1px solid #dce3ec;
    border-radius: 25px;

    overflow: hidden;

    box-sizing: border-box;
}

.twofa-key {
    flex: 1;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 17px;

    background: #ffffff;
    color: #07132e;

    box-sizing: border-box;
}

.twofa-copy-btn {
    width: 48px;
    min-width: 48px;

    border: 0;
    border-left: 1px solid #dce3ec;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.twofa-copy-btn:hover {
    background: #e4e7eb;
}


/* =========================
           HELP TEXT
        ========================= */

.twofa-help {
    margin-top: 17px;

    color: #07132e;

    line-height: 1.65;
}

.twofa-help-title {
    display: flex;
    align-items: center;
    gap: 5px;

    margin-bottom: 2px;
}

.twofa-help-title i {
    color: #344a6b;
}

.twofa-download {
    color: #bd8950;
    text-decoration: none;
}

.twofa-download:hover {
    text-decoration: underline;
}


/* =========================
           RIGHT CARD
        ========================= */

.twofa-form-group {
    width: 100%;

    box-sizing: border-box;
}

.twofa-input {
    display: block;

    width: 100%;
    height: 48px;

    padding: 0 17px;

    border: 1px solid #dce3ec;
    border-radius: 25px;

    background: #ffffff;

    outline: none;

    color: #07132e;

    box-sizing: border-box;
}

.twofa-input:focus {
    border-color: #bc8a50;

    box-shadow:
        0 0 0 3px rgba(188, 138, 80, 0.08);
}


/* =========================
           SUBMIT
        ========================= */

.twofa-submit {
    width: 100%;
    height: 48px;

    margin-top: 16px;

    border: 0;
    border-radius: 25px;

    background: #bc8d52;
    color: #ffffff;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
}

.twofa-submit:hover {
    background: #a9793f;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .twofa-wrapper {
        padding: 15px;
    }

    .twofa-grid {
        gap: 18px;
    }

    .twofa-card-body {
        padding: 20px;
    }

    .twofa-qr {
        width: 220px;
        height: 220px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 700px) {

    .twofa-wrapper {
        padding: 10px;
    }

    .twofa-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .twofa-card {
        border-radius: 10px;
    }

    .twofa-card-header {
        padding: 14px 16px;
    }

    .twofa-card-body {
        padding: 18px 16px;
    }

    .twofa-qr {
        width: 220px;
        height: 220px;
        max-width: 100%;
    }

    .twofa-input,
    .twofa-submit {
        height: 46px;
    }

    .twofa-key-box {
        height: 46px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .twofa-wrapper {
        padding: 8px;
    }

    .twofa-card-header {
        padding: 13px;
    }

    .twofa-card-body {
        padding: 16px 13px;
    }

    .twofa-qr {
        width: 190px;
        height: 190px;
    }

    .twofa-key {
        padding: 0 14px;
    }

    .twofa-copy-btn {
        width: 45px;
        min-width: 45px;
    }
}

/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}

/* lawyer detail */

.lawyer-rating-breakdown {
    margin-bottom: 20px;
}

.lawyer-rating-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.lawyer-rating-star-label {
    width: 45px;
    font-weight: 600;
}

.lawyer-rating-bar {
    flex: 1;
    height: 8px;
    background: #eee;
    border-radius: 4px;
    overflow: hidden;
}

.lawyer-rating-bar-fill {
    height: 100%;
    background: #f5a623;
}

.lawyer-rating-percentage {
    width: 40px;
    text-align: right;
    font-size: 13px;
    color: #666;
}


/* index */
.ll-why-section {
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background-image 0.4s ease-in-out;
}

/* halka overlay taaki left side ka text (heading, paragraph) readable rahe */
/* .ll-why-section::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(10, 15, 30, 0.6);
        z-index: 0;
     } */

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

.ll-why-benefit {
    cursor: pointer;
    padding: 20px;
    border-radius: 8px;
    background: transparent;
    transition: background 0.3s ease, color 0.3s ease;
}

.ll-why-benefit h3,
.ll-why-benefit p,
.ll-why-benefit .ll-why-benefit-number,
.ll-why-benefit .ll-why-arrow {
    color: #fff;
}

.ll-why-benefit.active {
    background: #fff;
    border-left: 3px solid #c9a35d;
}

.ll-why-benefit.active h3,
.ll-why-benefit.active p,
.ll-why-benefit.active .ll-why-benefit-number,
.ll-why-benefit.active .ll-why-arrow {
    color: #1a1a2e;
}

.ll-why-benefit.active .ll-why-benefit-icon {
    background: #1a1a2e;
}

.ll-why-benefit.active .ll-why-benefit-icon i {
    color: #c9a35d;
}


/* deposit */
.payment-wrapper {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.payment-method-box {
    flex: 2;
    min-width: 320px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    overflow: hidden;
}

.payment-method-header {
    background: #b98d54;
    color: #fff;
    padding: 18px 24px;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
}

.payment-method-list {
    padding: 0;
    margin: 0;
    list-style: none;
}

.payment-method-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 24px;
    border-bottom: 1px solid #edf0f4;
    cursor: pointer;
}

.payment-method-item.active {
    border-left: 4px solid #b98d54;
    background: #fdf9f3;
}

.payment-method-item input[type="radio"] {
    accent-color: #b98d54;
}

.payment-method-item span.pm-name {
    flex: 1;
    color: #27334f;
}

.payment-method-item .pm-logo {
    color: #8d9ab5;
    font-size: 13px;
    font-weight: 600;
}

.show-all-btn {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px;
    background: none;
    border: 0;
    color: #b98d54;
    cursor: pointer;
    font-weight: 600;
}

.payment-summary-box {
    flex: 1;
    min-width: 280px;
    background: #fff;
    border: 1px solid #dfe4ec;
    border-radius: 16px;
    padding: 24px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #4d5b76;
}

.summary-row strong {
    color: #0d1b3e;
}

.btn-confirm-payment {
    width: 100%;
    padding: 14px;
    border: 0;
    border-radius: 25px;
    background: #b98d54;
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    margin: 10px 0;
}

.btn-confirm-payment:hover {
    background: #a77b45;
}

.summary-hint {
    font-size: 13px;
    color: #8d9ab5;
    text-align: center;
}

.payment-method-item.extra {
    display: none;
}

.payment-method-list.expanded .payment-method-item.extra {
    display: flex;
}

.pm-logo img {
    height: 24px;
    max-width: 90px;
    object-fit: contain;
}


/* dahsborad */
.dashboard {
    /* margin-left: 30%; */
    width: 100%;
    padding: 24px
}

.notice {
    width: 100%;
    min-height: 78px;
    background: #d9f1ff;
    border: 1px solid #addcf4;
    border-radius: 14px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 22px;
    margin-bottom: 24px
}

.notice-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #c5eaff;
    color: #149fe6;
    flex: 0 0 auto
}

.notice h3 {
    font-size: 18px;
    color: #171b25;
    margin-bottom: 4px
}

.notice p {
    font-size: 14px;
    color: #555f6d
}

.stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 26px
}

.stat-card {
    position: relative;
    min-height: 144px;
    background: #fff;
    border: 1px solid #dce2e9;
    border-radius: 16px;
    padding: 22px 24px;
    overflow: hidden
}

.stat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px
}

.stat-title {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 16px;
    font-weight: 600
}

.icon-box {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #f2eadf;
    color: #bf8d4b;
    display: grid;
    place-items: center;
    font-size: 13px
}

.go-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #aeb4bd;
    border-radius: 5px;
    background: #fff;
    color: #8a9098;
    display: grid;
    place-items: center;
    cursor: pointer
}

.stat-value {
    position: relative;
    z-index: 2;
    margin-top: 26px;
    font-size: 24px;
    font-weight: 700
}

.watermark {
    position: absolute;
    right: -4px;
    bottom: -14px;
    font-size: 82px;
    color: #faf6f0
}

.analytics-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 20px;
    margin: 4px 0 20px
}

.analytics-head h2 {
    font-size: 21px;
    color: #10131a;
    margin-bottom: 4px
}

.analytics-head p {
    font-size: 14px;
    color: #63758a
}

.period {
    display: flex;
    border: 1px solid #bf8d4b;
    border-radius: 28px;
    overflow: hidden;
    background: #fff
}

.period button {
    border: 0;
    background: #fff;
    padding: 12px 24px;
    color: #ae7d3d;
    font-weight: 600;
    cursor: pointer
}

.period button.active {
    background: #bc8d50;
    color: #fff
}

.charts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
    margin-bottom: 24px
}

.chart-card {
    background: #fff;
    border: 1px solid #dce2e9;
    border-radius: 15px;
    overflow: hidden
}

.chart-title {
    padding: 17px 24px;
    border-bottom: 1px solid #e0e5eb;
    font-size: 19px;
    color: #10131a
}

.chart-area {
    height: 194px;
    padding: 22px 24px 18px;
    position: relative
}

.grid {
    height: 130px;
    margin: 4px 22px 0 34px;
    border-bottom: 1px solid #aeb4bc;
    border-left: 1px solid #aeb4bc;
    background-image: linear-gradient(#e2e5e9 1px, transparent 1px), linear-gradient(90deg, #e2e5e9 1px, transparent 1px);
    background-size: 16.66% 20%;
    position: relative
}

.line {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 3px;
    background: #2677ef;
    border-radius: 10px
}

.points {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    display: flex;
    justify-content: space-between
}

.points span {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #2677ef
}

.x-labels {
    margin-left: 34px;
    margin-right: 22px;
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #646b73;
    padding-top: 6px
}

.y-labels {
    position: absolute;
    left: 0;
    top: 25px;
    height: 130px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 10px;
    color: #666
}

.legend {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 7px;
    align-items: center;
    font-size: 12px;
    color: #555;
    white-space: nowrap
}

.legend-box {
    width: 38px;
    height: 13px;
    border: 3px solid #2677ef
}

.activity-legend {
    top: 7px
}

.activity-legend .yellow {
    background: #f7c52b;
    width: 43px;
    height: 13px
}

.activity-legend .green {
    background: #42a274;
    width: 43px;
    height: 13px
}

.tables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px
}

.table-card {
    background: #fff;
    border: 1px solid #dce2e9;
    border-radius: 15px;
    overflow: hidden
}

.table-head {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 24px
}

.table-head h2 {
    font-size: 19px;
    color: #10131a
}

.view-all {
    border: 1px solid #c48d4a;
    color: #b47d3d;
    background: #fff;
    border-radius: 22px;
    padding: 9px 17px;
    cursor: pointer;
    font-weight: 600
}

.table-wrap {
    overflow-x: auto
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 540px
}

th {
    text-align: left;
    background: #f7f9fb;
    padding: 15px 12px;
    font-size: 14px;
    color: #11151d;
    border-top: 1px solid #e1e6eb;
    border-bottom: 1px solid #dce2e9
}

td {
    padding: 23px 12px;
    font-size: 13px;
    color: #78818d;
    border-bottom: 1px solid #edf0f3
}

.empty {
    text-align: center !important
}

@media(max-width:1100px) {
    .stats {
        grid-template-columns: repeat(2, 1fr)
    }

    .charts,
    .tables {
        grid-template-columns: 1fr
    }
}

@media(max-width:700px) {
    .dashboard {
        padding: 14px
    }

    .notice {
        align-items: flex-start;
        padding: 14px
    }

    .notice h3 {
        font-size: 16px
    }

    .notice p {
        font-size: 13px;
        line-height: 1.5
    }

    .stats {
        grid-template-columns: 1fr;
        gap: 14px
    }

    .stat-card {
        min-height: 132px;
        padding: 18px 19px
    }

    .analytics-head {
        flex-direction: column;
        align-items: flex-start;
        margin-top: 10px
    }

    .period {
        width: 100%
    }

    .period button {
        flex: 1;
        padding: 11px 10px
    }

    .charts,
    .tables {
        gap: 14px
    }

    .chart-title,
    .table-head {
        padding-left: 18px;
        padding-right: 18px
    }

    .chart-area {
        padding-left: 14px;
        padding-right: 14px
    }

    .table-head {
        min-height: 65px
    }
}

@media(max-width:420px) {
    .notice {
        gap: 10px
    }

    .notice-icon {
        width: 34px;
        height: 34px
    }

    .stat-title {
        font-size: 15px
    }

    .stat-value {
        font-size: 22px
    }

    .analytics-head h2 {
        font-size: 19px
    }

    .chart-area {
        height: 175px
    }

    .grid {
        height: 115px
    }

    .y-labels {
        height: 115px
    }
}

/* change password */

/* =========================
           MAIN WRAPPER
        ========================= */

.change-password-wrapper {
    width: 100%;
    padding: 15px 18px;

    box-sizing: border-box;
}


/* =========================
           PASSWORD CARD
        ========================= */

.change-password-card {
    width: 100%;
    max-width: 1010px;

    margin: 0 auto;

    padding: 24px;

    background: #ffffff;

    border: 1px solid #dce3ec;
    border-radius: 12px;

    box-sizing: border-box;
}


/* =========================
           FORM GROUP
        ========================= */

.change-password-group {
    width: 100%;
    margin-bottom: 18px;

    box-sizing: border-box;
}

.change-password-label {
    display: block;

    margin-bottom: 9px;

    color: #53617b;
}

.change-password-required {
    color: #ed4b4b;
}


/* =========================
           INPUT
        ========================= */

.change-password-input {
    display: block;

    width: 100%;
    height: 48px;

    padding: 0 17px;

    background: #ffffff;

    border: 1px solid #dce3ec;
    border-radius: 25px;

    outline: none;

    color: #07132e;

    box-sizing: border-box;
}

.change-password-input:focus {
    border-color: #bc8a50;

    box-shadow:
        0 0 0 3px rgba(188, 138, 80, 0.08);
}

.change-password-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}


/* =========================
           SUBMIT BUTTON
        ========================= */

.change-password-submit {
    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 48px;

    margin-top: 1px;

    padding: 0;

    border: 0;
    border-radius: 25px;

    background: #bc8d52;
    color: #ffffff;

    cursor: pointer;

    box-sizing: border-box;
}

.change-password-submit:hover {
    background: #a9793f;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 768px) {

    .change-password-wrapper {
        padding: 15px;
    }

    .change-password-card {
        padding: 20px;
    }

}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .change-password-wrapper {
        padding: 10px;
    }

    .change-password-card {
        padding: 18px 16px;

        border-radius: 10px;
    }

    .change-password-group {
        margin-bottom: 15px;
    }

    .change-password-input,
    .change-password-submit {
        height: 46px;
    }

}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .change-password-wrapper {
        padding: 8px;
    }

    .change-password-card {
        padding: 16px 13px;
    }

    .change-password-input {
        padding: 0 15px;
    }

}

/* payment -log */

/* =========================
           MAIN WRAPPER
        ========================= */

.reviews-wrapper {
    width: 100%;
    padding: 20px 18px;
    box-sizing: border-box;
}


/* =========================
           TOP SECTION
        ========================= */

.reviews-header {
    width: 100%;
    margin-bottom: 24px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    box-sizing: border-box;
}

.reviews-title {
    margin: 0;
    color: #07132e;
}


/* =========================
           SEARCH
        ========================= */

.reviews-search {
    width: 340px;
    height: 48px;

    display: flex;
    align-items: stretch;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 28px;

    overflow: hidden;
    box-sizing: border-box;
}

.reviews-search-input {
    width: 100%;
    min-width: 0;

    border: 0;
    outline: 0;

    padding: 0 18px;

    background: transparent;
    color: #27334f;

    box-sizing: border-box;
}

.reviews-search-input::placeholder {
    color: #8d9ab5;
    opacity: 1;
}

.reviews-search-btn {
    width: 50px;
    min-width: 50px;

    border: 0;
    border-left: 1px solid #dce2eb;

    background: #eef0f3;
    color: #071b3d;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;
}

.reviews-search-btn:hover {
    background: #e5e8ec;
}


/* =========================
           TABLE CONTAINER
        ========================= */

.reviews-table-box {
    width: 100%;

    background: #ffffff;
    border: 1px solid #dce2eb;
    border-radius: 17px;

    overflow: hidden;

    box-sizing: border-box;
}

.reviews-table-scroll {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}


/* =========================
           TABLE
        ========================= */

.reviews-table {
    width: 100%;
    min-width: 850px;

    border-collapse: collapse;
    border-spacing: 0;
}

.reviews-table thead {
    background: #fafbfc;
}

.reviews-table th {
    height: 56px;

    padding: 0 12px;

    text-align: left;
    vertical-align: middle;

    color: #050505;

    border-bottom: 1px solid #dce2eb;

    white-space: nowrap;
}

.reviews-table td {
    height: 53px;

    padding: 0 12px;

    color: #53617b;

    border-bottom: 1px solid #edf0f4;

    vertical-align: middle;
}


/* =========================
           TABLE COLUMN WIDTHS
        ========================= */

.reviews-table th:nth-child(1),
.reviews-table td:nth-child(1) {
    width: 13%;
}

.reviews-table th:nth-child(2),
.reviews-table td:nth-child(2) {
    width: 17%;
}

.reviews-table th:nth-child(3),
.reviews-table td:nth-child(3) {
    width: 26%;
}

.reviews-table th:nth-child(4),
.reviews-table td:nth-child(4) {
    width: 15%;
}

.reviews-table th:nth-child(5),
.reviews-table td:nth-child(5) {
    width: 15%;
}

.reviews-table th:nth-child(6),
.reviews-table td:nth-child(6) {
    width: 14%;
}


/* =========================
           ACTION
        ========================= */

.reviews-table th:last-child,
.reviews-table td:last-child {
    text-align: right;
    padding-right: 14px;
}


/* =========================
           EMPTY DATA
        ========================= */

.reviews-empty td {
    height: 52px;

    text-align: center !important;

    color: #59657c;

    border-bottom: 0;
}


/* =========================
           TABLET
        ========================= */

@media (max-width: 900px) {

    .reviews-header {
        align-items: flex-start;
    }

    .reviews-search {
        width: 300px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           MOBILE
        ========================= */

@media (max-width: 600px) {

    .reviews-wrapper {
        padding: 15px 12px;
    }

    .reviews-header {
        flex-direction: column;
        align-items: stretch;
        gap: 15px;

        margin-bottom: 16px;
    }

    .reviews-search {
        width: 100%;
        height: 46px;
    }

    .reviews-search-btn {
        width: 48px;
        min-width: 48px;
    }

    .reviews-table-box {
        border-radius: 14px;
    }

    .reviews-table {
        min-width: 820px;
    }
}


/* =========================
           SMALL MOBILE
        ========================= */

@media (max-width: 400px) {

    .reviews-wrapper {
        padding: 12px 10px;
    }

    .reviews-header {
        gap: 12px;
    }

    .reviews-search {
        height: 44px;
    }

    .reviews-search-input {
        padding: 0 14px;
    }

    .reviews-table {
        min-width: 800px;
    }
}