/* ----------------------------------------------------------------------------------------
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Header css
04. Hero css
05. About Us css
06. Our Services css
07. Our Expertise css
08. Why Choose Us css
09. Our Case Study css
10. How It work css
11. Our Pricing css
12. Our Testimonials css
13. Our FAQs css
14. Our Book Appintment css
15. Our Blog css
16. Footer css
17. About Us Page css
18. Services Page css
19. Service Single css
20. Blog Archive css
21. Blog Single css
22. Case Study Page css
23. Case Study Single css
24. Team Page css
25. Team Single css
26. Pricing Page css
27. Testimonials Page css
28. Image Gallery css
29. Video Gallery css
30. FAQ's Page css
31. Contact Us Page css
32.	Book Appointment css
33. 404 Error Page css
34. Responsive css
35. Home - Version 2 css
36. Home - Version 3 css
-------------------------------------------------------------------------------------- */



/* #### Generated By: http://font.download #### */

@font-face {
    font-family: 'Dubai Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Dubai Regular'), url('../fonts/Dubai-Regular.woff') format('woff');
}


@font-face {
    font-family: 'Dubai Light';
    font-style: normal;
    font-weight: normal;
    src: local('Dubai Light'), url('../fonts/Dubai-Light.woff') format('woff');
}


@font-face {
    font-family: 'Dubai Medium';
    font-style: normal;
    font-weight: normal;
    src: local('Dubai Medium'), url('../fonts/Dubai-Medium.woff') format('woff');
}


@font-face {
    font-family: 'Dubai Bold';
    font-style: normal;
    font-weight: normal;
    src: local('Dubai Bold'), url('../fonts/Dubai-Bold.woff') format('woff');
}


/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root {
    --primary-color: #114c5c;
    --secondary-color: #dfc8af;
    --bg-color: #F7F3F1;
    --text-color: #555555;
    --accent-color: #114c5c;
    --accent-secondary-color: #15999b;
    --white-color: #FFFFFF;
    --divider-color: #2222221A;
    --dark-divider-color: #FFFFFF1A;
    --error-color: rgb(230, 87, 87);
    --default-font: 'Dubai Regular';
    --accent-font: 'Dubai Medium';
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

html,
body {
    width: 100%;
    overflow-x: clip;
}

body {
    font-family: var(--default-font);
    font-size: 18px;
    font-weight: 400;
    line-height: 1em;
    color: var(--text-color);
    background: linear-gradient( 270deg, #ffffff 0%, #ffffff 100%);
}

::-webkit-scrollbar-track {
    background-color: var(--primary-color);
    border-left: 1px solid var(--primary-color);
}

::-webkit-scrollbar {
    width: 7px;
    background-color: var(--primary-color);
}

::-webkit-scrollbar-thumb {
    background: var(--accent-secondary-color);
}

::selection {
    color: var(--white-color);
    background-color: var(--accent-secondary-color);
    filter: invert(1);
}

p {
    line-height: 1.6em;
    margin-bottom: 1.5em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--accent-font);
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary-color);
    margin: 0;
}

figure {
    margin: 0;
}

img {
    max-width: 100%;
}

a {
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
        outline: 0;
    }

    a:focus {
        text-decoration: none;
        outline: 0;
    }

.container {
    max-width: 93%;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime {
    position: relative;
    overflow: hidden;
}

    .image-anime:after {
        content: "";
        position: absolute;
        width: 200%;
        height: 0%;
        left: 50%;
        top: 50%;
        background-color: #ecf8fb;
        transform: translate(-50%,-50%) rotate(-45deg);
        z-index: 1;
    }

    .image-anime:hover:after {
        height: 250%;
        transition: all 600ms linear;
        background-color: transparent;
    }

.reveal {
    position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

    .reveal img {
        height: 100%;
        width: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        -webkit-transform-origin: left;
        transform-origin: left;
    }

.row {
    margin-right: -15px;
    margin-left: -15px;
}

    .row > * {
        padding-right: 15px;
        padding-left: 15px;
    }

    .row.no-gutters {
        margin-right: 0px;
        margin-left: 0px;
    }

        .row.no-gutters > * {
            padding-right: 0px;
            padding-left: 0px;
        }

.btn-default {
    position: relative;
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--white-color);
    background: var(--accent-color);
    border-radius: 8px;
    padding: 17px 30px;
    border: none;
    overflow: hidden;
    transition: all 0.4s ease-in-out;
    z-index: 1;
    background: linear-gradient(135deg, #0d6477, #18a7b8);
}

    .btn-default::before {
        content: '';
        position:;
        top: 50%;
        right: 5px;
        width: 40px;
        height: 40px;
        background-color: var(--accent-secondary-color);
        background-image: url('../images/arrow-white.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 14px auto;
        border-radius: 5px;
        transform: translateY(-50%);
        transition: all 0.4s ease-in-out;
    }

    .btn-default:hover::before {
        background-color: var(--accent-color);
    }

    .btn-default::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 0;
        height: 100%;
        background: var(--accent-secondary-color);
        transition: all 0.4s ease-in-out;
        z-index: -1;
    }

    .btn-default:hover::after {
        right: auto;
        left: 0;
        width: 100%;
    }

    .btn-default.btn-highlighted {
        background: var(--white-color);
        color: var(--primary-color);
    }

        .btn-default.btn-highlighted:hover {
            color: var(--white-color);
        }

.readmore-btn {
    position: relative;
    display: inline-block;
    font-family: var(--accent-font);
    font-weight: 500;
    line-height: 1em;
    text-transform: capitalize;
    color: var(--white-color);
    padding-right: 22px;
}

    .readmore-btn::before {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 12px;
        height: 12px;
        transform: translateY(-50%);
        background-image: url('../images/arrow-white.svg');
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 12px auto;
        transition: all 0.4s ease-in-out;
    }

    .readmore-btn:hover::before {
        transform: translateY(-50%) rotate(45deg);
    }

.cb-cursor:before {
    background: var(--accent-color);
}

.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loading-container,
.loading {
    height: 100px;
    position: relative;
    width: 100px;
    border-radius: 100%;
}

.loading-container {
    margin: 40px auto;
}

.loading {
    border: 1px solid transparent;
    border-color: transparent var(--white-color) transparent var(--white-color);
    animation: rotate-loading 1.5s linear 0s infinite normal;
    transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading {
    transition: all 0.5s ease-in-out;
}

#loading-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    max-width: 66px;
    transform: translate(-50%, -50%);
}

@keyframes rotate-loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
    /* Quick Donation mobile layout fixes */
    @media (max-width: 991px) {
        .quk-dnt

{
    padding: 18px 0 28px;
}

.quk-dnt .container {
    max-width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.quk-dnt .apply-info__wrap,
.quk-dnt .apply-info__card {
    width: 100%;
}

.quk-dnt .apply-info__card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    border-radius: 16px;
    overflow: hidden;
}

.quk-dnt .apply-info__left,
.quk-dnt .apply-info__right {
    width: 100%;
    min-width: 0;
}

.quk-dnt .apply-info__left {
    min-height: 240px;
    padding: 22px 18px;
}

.quk-dnt .apply-info__hero h1 {
    font-size: 24px;
    line-height: 1.15;
}

.quk-dnt .apply-info__hero p {
    font-size: 15px;
    line-height: 1.45;
    margin-bottom: 0;
}

.quk-dnt .apply-info__right {
    padding: 18px 14px 20px;
}

.quk-dnt .top-right {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-bottom: 14px;
}

.quk-dnt .category-grid {
    grid-template-columns: 1fr;
    gap: 9px;
}

.quk-dnt .amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    padding: 8px 0;
}

.quk-dnt .card-option {
    min-width: 0;
    min-height: 58px;
    padding: 10px;
    align-items: center;
}

.quk-dnt .amount-card {
    min-height: 66px;
}

.quk-dnt .custom-input {
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
    padding: 8px 10px;
    text-align: center;
}

.quk-stlbn {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.quk-dnt .select-box {
    margin-bottom: 0;
}

.quk-dnt .secure-note {
    align-items: flex-start;
    padding: 12px;
    font-size: 14px;
    line-height: 1.35;
}

.quk-dnt .quick-donate-row {
    grid-template-columns: 1fr;
    gap: 10px;
}

    .quk-dnt .quick-donate-row button {
        width: 100%;
        min-height: 54px;
        font-size: 17px;
    }

.quk-dnt .quick-other-ways .project-sms-grid,
.quk-dnt .project-sms-grid {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.quk-dnt .project-provider-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .quk-dnt .project-provider-row button {
        width: 100%;
    }

}

@media (max-width: 420px) {
    .quk-dnt .amount-grid,
    .quk-dnt .quick-other-ways .project-sms-grid,
    .quk-dnt .project-sms-grid,
    .quk-dnt .project-provider-row {
        grid-template-columns: 1fr;
    }

    .quk-dnt .apply-info__left {
        min-height: 210px;
    }
}

}

.bg-section {
    width: 100%;
    max-width: 100%;
    background-color: var(--white-color);
    border-radius: 0;
    margin: 0 auto;
}

    .bg-section .container-fluid {
        padding: 0;
    }

.dark-section {
    background-color: #fff;
    background-image: url('../images/dark-section-bg-image.png');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.section-row {
    margin-bottom: 40px;
}

    .section-row .section-title {
        margin-bottom: 0;
    }

        .section-row .section-title.section-title-center {
            width: 100%;
            max-width: 700px;
            margin: 0 auto;
            text-align: center;
        }

.section-btn {
    text-align: right;
}

.section-content-btn .section-btn {
    margin-top: 30px;
    text-align: left;
}

.section-title-content p {
    margin-bottom: 20px;
}

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

.section-title {
    margin-bottom: 36px;
}

    .section-sub-heading,
    .section-title .section-sub-title {
        position: relative;
        display: inline-block;
        font-size: 14px;
        font-weight: 500;
        text-transform: capitalize;
        line-height: 1em;
        color: var(--primary-color);
        background: #F6F6F6;
        border-radius: 100px;
        padding: 10px 16px 10px 32px;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

        .section-sub-heading::before,
        .section-title .section-sub-title::before {
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 6px;
            height: 6px;
        }

    .section-title h1 {
        font-size: 50px;
        line-height: 1.1em;
        letter-spacing: -0.02em;
        margin-bottom: 0;
        cursor: none;
    }

    .section-title h2 {
        font-size: 30px;
        letter-spacing: 0;
        margin-bottom: 0;
        cursor: none;
        text-align: left;
    }

    .section-title p {
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 18px;
        line-height: 25px;
        letter-spacing: .5px;
        font-weight: 500;
    }

.dark-section .section-sub-heading,
.bg-section .section-title .section-sub-title {
    background: var(--bg-color);
}

.dark-section .section-sub-heading,
.dark-section .section-title .section-sub-title {
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: var(--white-color);
}

.dark-section .section-title h1,
.dark-section .section-title h2,
.dark-section .section-title p,
.dark-section .section-title-content p {
    color: var(--white-color);
}

.help-block.with-errors ul {
    margin: 0;
    text-align: left;
}

    .help-block.with-errors ul li {
        color: var(--error-color);
        font-weight: 500;
        font-size: 14px;
    }

/************************************/
/*** 	    03. Header css		  ***/
/************************************/

header.main-header {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    z-index: 100;
}

    header.main-header .header-sticky {
        position: relative;
        top: 0px;
        border-bottom: 1px solid var(--dark-divider-color);
        z-index: 100;
    }

        header.main-header .header-sticky.hide {
            transform: translateY(-100%);
            transition: transform 0.3s ease-in-out;
        }

        header.main-header .header-sticky.active {
            position: fixed;
            top: 0;
            left: 15px;
            right: 15px;
            transform: translateY(0);
            background: var(--primary-color);
            border: 1px solid var(--dark-divider-color);
            border-top: none;
            border-radius: 0 0 20px 20px;
        }

.navbar {
    padding: 30px 0px;
    align-items: center;
}

.navbar-brand {
    padding: 0;
    margin: 0;
}

.main-menu .nav-menu-wrapper {
    flex: 1;
    text-align: center;
    margin: 0 1.042vw;
}

    .main-menu .nav-menu-wrapper > ul {
        align-items: center;
        display: inline-flex;
    }

.main-menu ul li {
    margin: 0 10px;
    position: relative;
}

    .main-menu ul li a {
        font-size: 16px;
        font-weight: 500;
        line-height: 1.25em;
        padding: 12px 10px !important;
        color: var(--white-color);
        background: transparent;
        border-radius: 0px;
        text-transform: capitalize;
        transition: all 0.3s ease-in-out;
    }

    .main-menu ul li.submenu > a:after {
        content: '\f107';
        font-family: 'FontAwesome';
        font-weight: 900;
        font-size: 14px;
        margin-left: 8px;
    }

    .main-menu ul li a:hover,
    .main-menu ul li a:focus {
        color: var(--accent-secondary-color);
    }

.main-menu ul ul {
    position: absolute;
    left: 0;
    top: 100%;
    transform: scale(1,0.8);
    transform-origin: top;
    width: 235px;
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-radius: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    text-align: left;
}

.main-menu ul li.submenu:first-child ul {
    width: 235px;
}

.main-menu ul ul ul {
    left: 100%;
    top: 0;
    text-align: left;
}

.main-menu ul li:hover > ul {
    visibility: visible;
    opacity: 1;
    transform: scale(1,1);
    padding: 5px 0;
}

.main-menu ul li.submenu ul li.submenu > a:after {
    content: '\f105';
    float: right;
}

.main-menu ul ul li {
    margin: 0;
    padding: 0;
}

    .main-menu ul ul li a {
        color: var(--primary-color);
        padding: 8px 20px !important;
        transition: all 0.3s ease-in-out;
    }

        .main-menu ul ul li a:hover,
        .main-menu ul ul li a:focus {
            color: var(--accent-secondary-color);
            background-color: transparent;
            padding: 8px 20px 8px 23px !important;
        }

.main-menu ul li.highlighted-menu {
    display: none;
}

.responsive-menu,
.navbar-toggle {
    display: none;
}

.responsive-menu {
    position: relative;
    top: 0;
}

.slicknav_btn {
    background: var(--accent-color);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    border-radius: 6px;
}

.slicknav_icon .slicknav_icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    width: 22px;
    background-color: var(--white-color);
    border-radius: 6px;
    margin: 4px auto !important;
    transition: all 0.1s ease-in-out;
}

    .slicknav_icon .slicknav_icon-bar:first-child {
        margin-top: 0 !important;
    }

    .slicknav_icon .slicknav_icon-bar:last-child {
        margin-bottom: 0 !important;
    }

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu {
    position: absolute;
    width: 100%;
    padding: 0;
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-bottom: 1px solid var(--divider-color);
}

    .slicknav_menu ul {
        margin: 5px 0;
    }

        .slicknav_menu ul ul {
            margin: 0;
        }

.slicknav_nav .slicknav_row,
.slicknav_nav li a {
    position: relative;
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    padding: 7px 20px;
    color: var(--primary-color);
    line-height: normal;
    margin: 0;
    border-radius: 0 !important;
    transition: all 0.3s ease-in-out;
}

    .slicknav_nav a:hover,
    .slicknav_nav a:focus,
    .slicknav_nav .slicknav_row:hover {
        background-color: transparent;
        color: var(--accent-secondary-color);
    }

.slicknav_menu ul ul li a {
    padding: 7px 20px 7px 30px;
}

.slicknav_arrow {
    font-size: 0 !important;
}

    .slicknav_arrow:after {
        content: '\f107';
        position: absolute;
        font-family: 'FontAwesome';
        font-weight: 900;
        font-size: 12px;
        margin-left: 8px;
        color: var(--primary-color);
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease-out;
    }

.slicknav_open > a .slicknav_arrow:after {
    transform: translateY(-50%) rotate(-180deg);
    color: var(--accent-secondary-color);
}

/************************************/
/*** 	    04. Hero css	      ***/
/************************************/

.hero {
    position: relative;
    align-content: end;
    background-image: url('../images/hero-bg-image.jpg');
    border-radius: 20px;
    height: 100vh;
    min-height: 850px;
    align-content: end;
    padding: 230px 0 120px;
    margin: 15px 15px 0 15px;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, rgba(34, 34, 34, 0.70) 12%, transparent 40.63%), linear-gradient(180deg, transparent 29.87%, rgba(34, 34, 34, 0.80) 81.81%);
        width: 100%;
        height: 100%;
        z-index: 1;
    }

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

.hero-content-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
}

.hero-client-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

.satisfy-client-images {
    display: flex;
    align-items: center;
}

.satisfy-client-image {
    position: relative;
    display: inline-block;
    margin-left: -14px;
    border: 1px solid var(--white-color);
    border-radius: 50%;
    overflow: hidden;
    z-index: 1;
}

    .satisfy-client-image:first-child {
        margin: 0;
    }

    .satisfy-client-image figure {
        display: block;
    }

        .satisfy-client-image figure img {
            width: 100%;
            max-width: 40px;
            border-radius: 50%;
        }

    .satisfy-client-image.add-more {
        width: 42px;
        height: 42px;
        background-color: var(--accent-color);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: all 0.3s ease-in-out;
    }

        .satisfy-client-image.add-more i {
            font-size: 20px;
            color: var(--white-color);
        }

        .satisfy-client-image.add-more h2 {
            font-size: 14px;
            line-height: 1em;
            color: var(--white-color);
        }

        .satisfy-client-image.add-more img {
            width: 100%;
            max-width: 16px;
        }

.hero-client-content h2 {
    font-size: 20px;
    color: var(--white-color);
}

.hero-client-content p {
    color: var(--white-color);
    line-height: normal;
    margin: 5px 0 0;
}

.hero-info-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    border: 1px solid var(--dark-divider-color);
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    min-height: 320px;
    max-width: 330px;
    margin-left: auto;
    padding: 30px;
}

.hero-info-box-header p {
    color: var(--white-color);
    font-weight: 500;
    margin: 0;
}

.hero-info-client-review-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

    .hero-info-client-review-box .satisfy-client-image figure img {
        max-width: 28px;
    }

    .hero-info-client-review-box .satisfy-client-image.add-more {
        height: 30px;
        width: 30px;
    }

        .hero-info-client-review-box .satisfy-client-image.add-more i {
            font-size: 16px;
        }

    .hero-info-client-review-box .satisfy-client-content {
        width: calc(100% - 98px);
    }

        .hero-info-client-review-box .satisfy-client-content p {
            color: var(--white-color);
            margin: 0;
            line-height: normal;
        }

.hero-info-box-rating {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

    .hero-info-box-rating h2 {
        color: var(--white-color);
        font-size: 20px;
    }

.hero-info-rating-star i {
    color: var(--accent-secondary-color);
    font-size: 16px;
}

/************************************/
/*** 	  05.  About Us css 	  ***/
/************************************/

.about-us {
    padding: 50px 0 80px 0;
}

.about-us-image-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-right: 15px;
}

.about-us-image-box-1 {
    width: calc(44% - 15px);
    display: flex;
    flex-direction: column;
}

.about-us-image-box-2 {
    width: calc(56% - 15px);
}

.happy-customer-review-box {
    position: relative;
    background: var(--secondary-color);
    padding: 0 30px 30px 0;
    border-radius: 20px 0 20px 0;
    margin-right: -100px;
    z-index: 2;
}

    .happy-customer-review-box::before,
    .happy-customer-review-box::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        mask: url('../images/image-corner-bg-shape.svg');
        -webkit-mask: url('../images/image-corner-bg-shape.svg');
        background-color: var(--secondary-color);
        mask-repeat: no-repeat;
        mask-size: cover;
        z-index: 1;
    }

    .happy-customer-review-box::before {
        right: -20px;
        left: auto;
    }

    .happy-customer-review-box::after {
        left: auto;
        right: 50px;
        bottom: -20px;
    }

.happy-customer-review-item {
    background-color: #8d7051;
    border-radius: 20px;
    padding: 30px;
}

    .happy-customer-review-item .hero-info-rating-star i {
        font-size: 20px;
    }

.happy-customer-review-content {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 20px;
    padding-top: 20px;
}

    .happy-customer-review-content p {
        color: var(--white-color);
        margin: 0;
    }

.happy-customer-review-item .satisfy-client-images {
    margin-top: 20px;
}

.happy-customer-review-item .satisfy-client-image {
    border-color: var(--primary-color);
}

    .happy-customer-review-item .satisfy-client-image.add-more {
        background-color: var(--accent-secondary-color);
    }

        .happy-customer-review-item .satisfy-client-image.add-more i {
            color: var(--white-color);
        }

.about-us-image {
    height: 100%;
}

    .about-us-image figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

    .about-us-image img {
        width: 100%;
        height: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

.about-us-image-box-1 .about-us-image img {
    aspect-ratio: 1 / 1.515;
}

.about-us-image-box-2 .about-us-image img {
    aspect-ratio: 1 / 1.971;
}

.about-us-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.about-us-item {
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background-color: #d2feff;
    padding: 16px;
    border-radius: 11px;
    overflow: hidden;
    align-items: center;
    gap: 20px;
    padding: 17px;
    border-radius: 15px;
    background: #ecf8fb;
    border: 1px solid #c7e4ea;
    margin-bottom: 24px;
}

    .about-us-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .about-us-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .about-us-item:hover .icon-box::before {
        transform: scale(1);
    }

    .about-us-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.about-us-item-content {
    width: calc(100% - 65px);
}

    .about-us-item-content h3 {
        font-size: 20px;
    }

    .about-us-item-content p {
        margin: 10px 0 0;
    }

.about-us-body {
    margin-top: 40px;
}

.about-us-body-item {
    background-color: var(--white-color);
    border-left: 4px solid var(--accent-color);
    border-radius: 20px;
    margin-bottom: 30px;
    padding: 30px;
}

    .about-us-body-item:last-child {
        margin-bottom: 0;
    }

    .about-us-body-item h3 {
        font-size: 16px;
        line-height: 1.6em;
    }

.about-us-btn {
    margin-top: 0;
}

/************************************/
/*** 	 06.  Our Services css 	  ***/
/************************************/

.our-services {
    background-image: url('../images/our-services-bg-image.png');
    background-position: bottom center;
    background-size: auto;
    padding: 120px 0;
}

.service-item {
    background: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 12px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    height: calc(100% - 30px);
    margin-bottom: 27px;
    padding: 20px;
    transition: all 0.4s ease-in-out;
}

    .service-item:hover {
        transform: translateY(-5px);
    }

.service-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

    .service-item-header .icon-box {
        position: relative;
        width: 60px;
        height: 60px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .service-item-header .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.service-item:hover .service-item-header .icon-box::before {
    transform: scale(1);
}

.service-item-header .icon-box img {
    position: relative;
    width: 100%;
    max-width: 28px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item:hover .service-item-header .icon-box img {
    filter: brightness(0) invert(0);
}

.service-item-title {
    width: calc(100% - 75px);
}

    .service-item-title h2 {
        font-size: 19px;
        line-height: 1.3em;
        color: var(--white-color);
        font-weight: 500;
    }

        .service-item-title h2 a {
            color: inherit;
        }

.service-item-content p {
    color: var(--white-color);
    margin: 0;
}

.service-item-btn {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.section-footer-text {
    margin-top: 30px;
    text-align: center;
}

    .section-footer-text p {
        color: var(--primary-color);
        margin-bottom: 0;
    }

        .section-footer-text p span {
            display: inline-block;
            font-size: 14px;
            color: var(--white-color);
            background: var(--accent-secondary-color);
            line-height: 1em;
            padding: 4px 10px;
            border-radius: 20px;
            margin-right: 10px;
        }

        .section-footer-text p a {
            color: var(--accent-secondary-color);
            font-weight: 500;
            text-transform: capitalize;
            text-decoration: underline;
            text-underline-offset: 3px;
            transition: all 0.3s ease-in-out;
        }

            .section-footer-text p a:hover {
                color: var(--primary-color);
            }

    .section-footer-text ul {
        width: 100%;
        padding: 0;
        margin: 20px 0 0;
        list-style: none;
    }

        .section-footer-text ul li {
            display: inline-block;
            font-family: var(--accent-font);
            font-weight: 500;
            line-height: normal;
            color: var(--primary-color);
            margin-right: 10px;
        }

            .section-footer-text ul li:last-child {
                margin: 0;
            }

            .section-footer-text ul li i {
                color: var(--accent-secondary-color);
            }

    .section-footer-text.section-footer-contact {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px 20px;
    }

        .section-footer-text.section-footer-contact span {
            width: 30px;
            height: 30px;
            padding: 0;
            display: inline-flex;
            justify-content: center;
            align-items: center;
            margin-right: 10px;
        }

            .section-footer-text.section-footer-contact span img {
                width: 100%;
                max-width: 16px;
            }

    .section-footer-text.section-satisfy-img {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }

        .section-footer-text.section-satisfy-img .satisfy-client-image figure img {
            max-width: 30px;
        }

        .section-footer-text.section-satisfy-img .satisfy-client-image.add-more {
            width: 32px;
            height: 32px;
            margin-left: -10px;
            background: var(--accent-secondary-color);
        }

            .section-footer-text.section-satisfy-img .satisfy-client-image.add-more img {
                max-width: 18px;
            }

        .section-footer-text.section-satisfy-img ul {
            margin: 5px 0 0;
        }

.dark-section .section-footer-text.section-satisfy-img .satisfy-client-image {
    border-color: var(--white-color);
}

.dark-section .section-footer-text p,
.dark-section .section-footer-text ul li {
    color: var(--white-color);
}

    .dark-section .section-footer-text p a:hover {
        color: var(--white-color);
    }

/************************************/
/*** 	 07. Our Expertise css 	  ***/
/************************************/

.our-expertise {
    padding: 120px 0;
}

.expertise-body {
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
}

.skills-progress-bar {
    margin-bottom: 30px;
}

    .skills-progress-bar:last-child {
        margin-bottom: 0;
    }

.skillbar .skill-data {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.skill-data .skill-title,
.skill-data .skill-no {
    font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
    color: var(--primary-color);
}

.skill-progress {
    position: relative;
    background: var(--white-color);
    border-radius: 10px;
    width: 100%;
    height: 6px;
}

    .skill-progress .count-bar {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        background-color: var(--accent-secondary-color);
        border-radius: 10px;
    }

.expertise-btn {
    margin-top: 40px;
}

.expertise-image-box {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-left: 15px;
}

.expertise-image-box-1 {
    width: 40%;
    padding-bottom: 100px;
}

.expertise-image-box-2 {
    position: relative;
    width: 60%;
    z-index: 2;
}

.expertise-image figure {
    display: block;
    border-radius: 20px;
}

.expertise-image img {
    width: 100%;
    border-radius: 20px;
    object-fit: cover;
}

.expertise-image-box-1 figure {
    margin-right: -250px;
}

.expertise-image-box-1 .expertise-image img {
    aspect-ratio: 1 / 1.045;
}

.expertise-image-box-2 .expertise-image img {
    aspect-ratio: 1 / 0.91;
}

.experience-circle {
    position: relative;
    transform: translate(-65px, 65px);
    z-index: 2;
}

    .experience-circle img {
        width: 100%;
        max-width: 130px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
        animation: infiniterotate 20s infinite linear;
    }

@keyframes infiniterotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/************************************/
/***     08. Why Choose Us css    ***/
/************************************/

.why-choose-us {
    padding: 120px 0;
}

.why-choose-item {
    position: relative;
    border-radius: 20px;
    align-content: end;
    min-height: 450px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 25px;
    overflow: hidden;
}

.why-choose-item-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

    .why-choose-item-image figure {
        display: block;
        width: 100%;
        height: 100%;
    }

    .why-choose-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.why-choose-item-content {
    position: relative;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 30px;
    z-index: 1;
}

    .why-choose-item-content h3 {
        font-size: 18px;
        margin-bottom: 20px;
    }

.why-choose-content-image img {
    width: 100%;
    max-width: 260px;
    aspect-ratio: 1 / 0.57;
    object-fit: cover;
    border-radius: 10px;
}

.why-choose-image {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

    .why-choose-image figure {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 20px;
    }

    .why-choose-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1.116;
        object-fit: cover;
        border-radius: 20px;
    }

.why-choose-cta-item {
    position: relative;
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.why-choose-cta-item-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

    .why-choose-cta-item-image figure {
        position: relative;
        display: block;
        height: 100%;
    }

        .why-choose-cta-item-image figure:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: var(--primary-color);
            opacity: 60%;
            width: 100%;
            height: 100%;
        }

    .why-choose-cta-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.why-choose-cta-body {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    gap: 40px;
    height: 100%;
    z-index: 1;
}

    .why-choose-cta-body .icon-box img {
        width: 100%;
        max-width: 60px;
    }

.why-choose-cta-content p {
    font-size: 14px;
    font-weight: 500;
    color: var(--white-color);
    margin: 0 0 10px;
}

.why-choose-cta-content h2 {
    font-size: 24px;
    color: var(--white-color);
}

.why-choose-cta-btn {
    margin-top: 40px;
}

.why-choose-slider-box {
    margin-top: 30px;
}

.why-choose-slider-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
    text-align: center;
}

    .why-choose-slider-content hr {
        height: 2px;
        flex-grow: 1;
        color: var(--divider-color);
        opacity: 1;
        margin: 0;
    }

    .why-choose-slider-content p {
        font-family: var(--accent-font);
        color: var(--primary-color);
        margin-bottom: 0;
    }

.why-choose-logo-slider {
    max-width: 750px;
    margin: 0 auto;
}

.why-choose-logo {
    text-align: center;
}

    .why-choose-logo img {
        width: 100%;
        max-width: 162px;
        height: 40px;
    }

/************************************/
/***    09. Our Case Study css    ***/
/************************************/

.our-case-study {
    padding: 120px 0;
}

.case-study-item {
    position: relative;
    min-height: 500px;
    border-radius: 20px;
    align-content: end;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    overflow: hidden;
}

.case-study-item-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .case-study-item-image a {
        display: block;
        height: 100%;
        cursor: none;
    }

        .case-study-item-image a figure {
            position: relative;
            display: block;
            height: 100%;
            overflow: hidden;
        }

            .case-study-item-image a figure::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 86.7%);
                z-index: 1;
            }

            .case-study-item-image a figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                transition: all 0.6s ease-in-out;
            }

.case-study-item:hover .case-study-item-image a figure img {
    transform: scale(1.06);
}

.case-study-item-contant {
    position: relative;
    z-index: 1;
}

    .case-study-item-contant ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 15px;
        list-style: none;
        margin: 0 0 20px;
        padding: 0;
    }

        .case-study-item-contant ul li a {
            display: block;
            color: var(--white-color);
            background-color: var(--dark-divider-color);
            border-radius: 100px;
            padding: 9px 16px;
            transition: all 0.4s ease-in-out;
        }

            .case-study-item-contant ul li a:hover {
                background-color: var(--accent-secondary-color);
            }

    .case-study-item-contant h2 {
        font-size: 20px;
        line-height: 1.4em;
        color: var(--white-color);
    }

        .case-study-item-contant h2 a {
            color: inherit;
        }

/************************************/
/***      10. How It work css     ***/
/************************************/

.how-it-work {
    padding: 0 0 50px 0;
}

.how-it-work-image {
    height: 100%;
    margin-left: 15px;
}

    .how-it-work-image figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

    .how-it-work-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 0.526;
        object-fit: cover;
        border-radius: 20px;
    }

.how-work-item-list {
    /*! display: flex; */
    flex-wrap: wrap;
    gap: 40px 60px;
    margin-top: 50px;
    text-align: center;
}

.how-work-item {
    position: relative;
    width: calc(25% - 15px);
}

    .how-work-item:before {
        content: '';
        position: absolute;
        top: 0;
        right: -30px;
        bottom: 0;
        width: 1px;
        height: 100%;
        background-color: var(--dark-divider-color);
    }

    .how-work-item:nth-child(3n + 3):before,
    .how-work-item:last-child:before {
        display: none;
    }

.how-work-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border: solid 1px #ffffff21;
    padding: 15px;
    border-radius: 13px;
    text-align: center;
}

    .how-work-item-header .icon-box {
        position: relative;
        width: 60px;
        height: 60px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .how-work-item-header .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.how-work-item:hover .how-work-item-header .icon-box::before {
    transform: scale(1);
}

.how-work-item-header .icon-box img {
    position: relative;
    width: 100%;
    max-width: 28px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.how-work-item:hover .how-work-item-header .icon-box img {
    filter: brightness(0) invert(0);
}

.how-work-item-title {
    width: calc(100% );
    text-align: center;
}

    .how-work-item-title p {
        color: var(--white-color);
        font-weight: 500;
        text-transform: uppercase;
        line-height: normal;
        margin-bottom: 10px;
    }

    .how-work-item-title h3 {
        font-size: 20px;
        color: var(--white-color);
    }

.how-work-item-body {
    margin-top: 40px;
}

    .how-work-item-body p {
        color: var(--white-color);
        margin: 0;
    }

/************************************/
/***     11. Our pricing css      ***/
/************************************/

.our-pricing {
    padding: 120px 0;
}

.pricing-item {
    background-color: var(--white-color);
    border-radius: 14px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
}

.pricing-item-content {
    padding: 30px;
    margin-bottom: 10px;
}

    .pricing-item-content h2 {
        font-size: 20px;
    }

    .pricing-item-content p {
        margin: 10px 0 0;
    }

.pricing-item-body {
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-radius: 14px;
    text-align: center;
    padding: 40px;
}

.pricing-item-price h2 {
    font-size: 40px;
}

.pricing-item-price p {
    margin: 10px 0 0;
}

.pricing-item-btn {
    margin-top: 30px;
}

    .pricing-item-btn .btn-default {
        width: 100%;
        padding: 17px 24px;
    }

        .pricing-item-btn .btn-default:before {
            display: none;
        }

.pricing-item-list {
    margin-top: 10px;
    padding: 30px;
}

    .pricing-item-list h3 {
        font-size: 16px;
        border-bottom: 1px solid var(--divider-color);
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

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

        .pricing-item-list ul li {
            position: relative;
            line-height: 1.5em;
            padding-left: 25px;
            margin-bottom: 15px;
        }

            .pricing-item-list ul li:last-child {
                margin-bottom: 0;
            }

            .pricing-item-list ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-color);
                top: 0;
                left: 0;
            }

.pricing-benefit-list {
    margin-top: 30px;
}

    .pricing-benefit-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 50px;
    }

        .pricing-benefit-list ul li {
            color: var(--primary-color);
            display: inline-flex;
            align-items: center;
        }

            .pricing-benefit-list ul li img {
                width: 100%;
                max-width: 20px;
                margin-right: 15px;
            }

/************************************/
/***   12. Our Testimonials css   ***/
/************************************/

.our-testimonials {
    padding: 120px 0;
}

.testimonials-image-box {
    position: relative;
    height: 100%;
}

.testimonials-image {
    height: 100%;
}

    .testimonials-image figure {
        display: block;
        height: 100%;
        border-radius: 14px;
    }

    .testimonials-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 0.905;
        object-fit: cover;
        border-radius: 14px;
    }

.testimonials-review-box {
    position: absolute;
    bottom: 20px;
    left: 20px;
    width: 100%;
    max-width: 280px;
    background-color: var(--white-color);
    border-radius: 14px;
    padding: 15px;
    z-index: 1;
}

.testimonials-review-box-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

    .testimonials-review-box-header .icon-box img {
        width: 100%;
        max-width: 40px;
    }

.testimonials-review-header-content {
    width: calc(100% - 55px);
    display: flex;
    align-items: center;
}

    .testimonials-review-header-content h2 {
        font-size: 26px;
        min-width: 70px;
        line-height: 1em;
    }

.google-rating-star {
    line-height: normal;
}

    .google-rating-star i {
        font-size: 18px;
        color: var(--accent-secondary-color);
    }

.testimonials-review-body {
    margin-top: 15px;
}

    .testimonials-review-body p {
        margin: 0;
    }

.testimonial-slider,
.testimonial-slider .swiper,
.testimonial-item {
    height: 100%;
}

    .testimonial-slider .swiper-wrapper {
        cursor: none;
    }

.testimonial-item {
    min-height: 375px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-radius: 14px;
    padding: 40px;
}

.testimonial-item-rating i {
    color: var(--accent-secondary-color);
    font-size: 16px;
}

.testimonial-item-content {
    margin-top: 20px;
}

    .testimonial-item-content p {
        font-family: var(--accent-font);
        font-size: 16px;
        font-weight: 500;
        line-height: 1.4em;
        color: var(--primary-color);
        margin: 0;
    }

.testimonial-item-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
}

.testimonial-item-author-image figure {
    display: block;
    border-radius: 50%;
}

    .testimonial-item-author-image figure img {
        width: 100%;
        max-width: 50px;
        border-radius: 50%;
    }

.testimonial-item-author-content {
    width: calc(100% - 65px);
}

    .testimonial-item-author-content h2 {
        font-size: 20px;
    }

    .testimonial-item-author-content p {
        line-height: normal;
        margin: 5px 0 0;
    }

.our-testimonials .section-footer-text {
    margin-top: 60px;
}

/************************************/
/***   		13. Our Faqs css      ***/
/************************************/

.our-faqs {
    padding: 120px 0;
}

.faqs-content {
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

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

    .faqs-content-list ul li {
        position: relative;
        line-height: 1.5em;
        padding-left: 25px;
        margin-bottom: 15px;
    }

        .faqs-content-list ul li:last-child {
            margin-bottom: 0;
        }

        .faqs-content-list ul li::before {
            content: '\f058';
            position: absolute;
            font-family: 'Font Awesome 7 Free';
            font-size: 18px;
            font-weight: 900;
            color: var(--accent-color);
            top: 0;
            left: 0;
        }

.faqs-content-btn {
    margin-top: 40px;
}

.faq-accordion .accordion-item {
    position: relative;
    background: var(--white-color);
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

    .faq-accordion .accordion-item:last-child {
        margin-bottom: 0;
    }

.faq-accordion .accordion-header .accordion-button {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 20px 50px 20px 24px;
    transition: all 0.4s ease-in-out;
    background-color: #f5f4ef;
    border-radius: 7px !important;
}

.faq-accordion .accordion-item .accordion-button::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after {
    content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--accent-color);
    line-height: normal;
    transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed)::after {
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion .accordion-item .accordion-body {
    border-top: 1px solid var(--divider-color);
    padding: 24px;
}

    .faq-accordion .accordion-item .accordion-body p:last-child {
        margin: 0;
    }

/************************************/
/*** 14. Our Book Appintment css  ***/
/************************************/

.our-book-appointment {
    position: relative;
    padding: 120px 0;
    overflow: hidden;
}

.book-appointment-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
}

    .book-appointment-image figure {
        position: relative;
        display: block;
        height: 100%;
    }

        .book-appointment-image figure:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(270deg, var(--primary-color) 0%, transparent 68.93%);
            height: 100%;
            width: 100%;
        }

    .book-appointment-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

.book-appointment-form-box {
    position: relative;
    width: 100%;
    max-width: 640px;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-radius: 20px;
    padding: 50px;
    margin-left: auto;
    z-index: 1;
}

.book-appointment-form .form-control {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--white-color);
    background-color: var(--dark-divider-color);
    border: none;
    border-radius: 12px;
    padding: 18px 20px;
    box-shadow: none;
    outline: none;
}

    .book-appointment-form .form-control::placeholder {
        color: var(--white-color);
        opacity: 100%;
    }

.book-appointment-form select.form-control {
    padding: 18px 30px 18px 20px;
}

.book-appointment-form select option {
    color: var(--text-color);
}

.appointment-form-btn {
    margin-top: 20px;
}

    .appointment-form-btn .btn-default {
        width: 100%;
        text-align: center;
        padding: 17px 24px;
    }

        .appointment-form-btn .btn-default:before {
            display: none;
        }

/************************************/
/***       15. Our Blog css       ***/
/************************************/

.our-blog {
    padding: 0px 0 50px;
}

.post-item {
    position: relative;
    min-height: 430px;
    border-radius: 20px;
    align-content: end;
    height: calc(100% - 30px);
    margin-bottom: 0;
    padding: 40px;
    overflow: hidden;
}

    .post-item .post-featured-image {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

        .post-item .post-featured-image a,
        .post-item .post-featured-image figure {
            position: relative;
            display: block;
            width: 100%;
            height: 100%;
            border-radius: 20px;
            overflow: hidden;
            cursor: none;
        }

            .post-item .post-featured-image figure::before {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 100%);
                height: 100%;
                width: 100%;
                z-index: 1;
            }

            .post-item .post-featured-image figure img {
                width: 100%;
                height: 100%;
                object-fit: cover;
                border-radius: 20px;
                transition: all 0.6s ease-in-out;
            }

    .post-item:hover .post-featured-image img {
        transform: scale(1.06);
    }

    .post-item .post-item-body {
        position: relative;
        z-index: 1;
    }

    .post-item .post-item-content h2 {
        font-size: 22px;
        color: var(--white-color);
        line-height: -0.6em;
    }

        .post-item .post-item-content h2 a {
            color: inherit;
        }

    .post-item .post-item-btn {
        border-top: 1px solid var(--dark-divider-color);
        padding-top: 15px;
        margin-top: 15px;
    }

/************************************/
/***        16. Footer css        ***/
/************************************/

.main-footer {
    padding: 120px 0 0;
    margin-bottom: 15px;
}

.footer-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 80px;
    padding-bottom: 80px;
}

    .footer-header .section-title {
        margin-bottom: 0;
    }

.footer-newsletter-form {
    width: 100%;
    max-width: 415px;
}

    .footer-newsletter-form .form-group {
        display: flex;
        background-color: var(--dark-divider-color);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border-radius: 10px;
        padding: 10px;
    }

        .footer-newsletter-form .form-group .form-control {
            width: calc(100% - 40px);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.5em;
            color: var(--white-color);
            background: transparent;
            border: none;
            border-radius: 0;
            outline: none;
            box-shadow: none;
            padding: 5px 10px;
        }

            .footer-newsletter-form .form-group .form-control::placeholder {
                color: var(--white-color);
            }

        .footer-newsletter-form .form-group .newsletter-btn {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--accent-secondary-color);
            border: none;
            border-radius: 5px;
            transition: all 0.4s ease-in-out;
        }

            .footer-newsletter-form .form-group .newsletter-btn:hover {
                background-color: var(--white-color);
            }

            .footer-newsletter-form .form-group .newsletter-btn img {
                width: 100%;
                max-width: 12px;
                transition: all 0.4s ease-in-out;
            }

            .footer-newsletter-form .form-group .newsletter-btn:hover img {
                transform: rotate(45deg);
                filter: brightness(0) invert(0);
            }

.about-footer {
    background: var(--dark-divider-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 10px;
    padding: 40px;
}

.footer-logo img {
    width: 100%;
    max-width: 147px;
}

.about-footer-content {
    margin-top: 30px;
}

    .about-footer-content p {
        color: var(--white-color);
        margin-bottom: 0;
    }

.footer-social-links {
    margin-top: 30px;
}

    .footer-social-links ul {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .footer-social-links ul li a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            border: 1px solid var(--dark-divider-color);
            border-radius: 50%;
            color: var(--white-color);
            transition: all 0.3s ease-in-out;
        }

        .footer-social-links ul li:hover a {
            background: var(--accent-secondary-color);
            color: var(--primary-color);
        }

        .footer-social-links ul li i {
            font-size: 18px;
            color: inherit;
        }

.footer-links-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-left: 4.167vw;
}

.footer-links {
    max-width: 38%;
}

    .footer-links h2 {
        font-size: 20px;
        color: var(--white-color);
        margin-bottom: 25px;
    }

    .footer-links ul {
        list-style: disc;
        margin: 0;
        padding: 0 0 0 20px;
    }

        .footer-links ul li {
            text-transform: capitalize;
            color: var(--white-color);
            line-height: 1.5em;
            margin-bottom: 15px;
        }

            .footer-links ul li:last-child {
                margin-bottom: 0;
            }

            .footer-links ul li::marker {
                color: var(--accent-secondary-color);
            }

            .footer-links ul li a {
                color: inherit;
                transition: all 0.3s ease-in-out;
            }

                .footer-links ul li a:hover {
                    color: var(--accent-secondary-color);
                }

.footer-copyright-text {
    border-top: 1px solid var(--dark-divider-color);
    text-align: center;
    padding: 60px 0;
    margin-top: 80px;
}

    .footer-copyright-text p {
        color: var(--white-color);
        margin-bottom: 0;
    }

/************************************/
/***    17. About Us Page css     ***/
/************************************/

.page-header {
    position: relative;
    /*! background-image: url('../images/page-header-bg.jpg'); */
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    border-radius: 20px;
    padding: 50px 0 50px;
    margin: 15px 15px 0;
    overflow: hidden;
}

    .page-header:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        z-index: 1;
    }

.page-header-box {
    position: relative;
    z-index: 2;
}

    .page-header-box h1 {
        display: inline-block;
        font-size: 30px;
        letter-spacing: -0.02em;
        color: #8A6F52;
        margin-bottom: 10px;
        cursor: none;
    }

    .page-header-box ol {
        margin: 0;
        padding: 0;
    }

        .page-header-box ol li.breadcrumb-item {
            font-size: 16px;
            line-height: 1.6em;
            text-transform: capitalize;
            color: #313131;
        }

            .page-header-box ol li.breadcrumb-item a {
                color: inherit;
            }

        .page-header-box ol .breadcrumb-item + .breadcrumb-item::before {
            color: #333;
        }

.our-approach {
    padding: 120px 0 0;
    margin-bottom: 250px;
}

.approach-content-box {
    position: relative;
    border-radius: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: end;
    gap: 30px;
    padding: 50px;
    margin-bottom: -250px;
    overflow: hidden;
}

.approach-image {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

    .approach-image figure {
        display: block;
        border-radius: 20px;
        height: 100%;
    }

    .approach-image img {
        height: 100%;
        width: 100%;
        border-radius: 20px;
        object-fit: cover;
    }

.approach-item-list {
    width: 100%;
    max-width: 500px;
    position: relative;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
}

.approach-item {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

    .approach-item:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .approach-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .approach-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .approach-item:hover .icon-box::before {
        transform: scale(1);
    }

    .approach-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.approach-item-content {
    width: calc(100% - 65px);
}

    .approach-item-content h3 {
        font-size: 20px;
    }

    .approach-item-content p {
        margin: 10px 0 0;
    }

.our-benefit {
    padding: 120px 0;
}

.benefits-item {
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    background-color: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
}

    .benefits-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
        overflow: hidden;
    }

        .benefits-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .benefits-item:hover .icon-box::before {
        transform: scale(1);
    }

    .benefits-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.benefit-item-content h2 {
    font-size: 20px;
}

.benefit-item-content p {
    margin: 10px 0 0;
}

.benefit-item-list {
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
}

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

        .benefit-item-list ul li {
            position: relative;
            line-height: 1.5em;
            padding-left: 25px;
            margin-bottom: 15px;
        }

            .benefit-item-list ul li:last-child {
                margin: 0;
            }

            .benefit-item-list ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-color);
                top: 0;
                left: 0;
            }

.intro-video {
    position: relative;
    background-image: url('../images/intro-video-bg-image.jpg');
    background-position: center center;
    overflow: hidden;
}

    .intro-video:before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: var(--primary-color);
        opacity: 50%;
    }

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

.intro-video-body {
    max-width: 700px;
    text-align: center;
    margin: 0 auto;
    padding: 180px 0;
}

.video-play-button a {
    position: relative;
    width: 80px;
    height: 80px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: none;
    transition: all 0.4s ease-in-out;
}

    .video-play-button a.bg-effect:before,
    .video-play-button a.bg-effect:after {
        content: '';
        position: absolute;
        width: 160%;
        height: 160%;
        border: 24px solid var(--white-color);
        opacity: 50%;
        border-radius: 50%;
        transform: scale(0.6);
        z-index: -1;
        animation: border-zooming 1.2s infinite linear;
    }

    .video-play-button a.bg-effect:after {
        animation-delay: .3s;
    }

@keyframes border-zooming {
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.video-play-button a:hover {
    background: var(--white-color);
}

.video-play-button a i {
    position: relative;
    font-size: 30px;
    color: var(--white-color);
    margin-left: 2px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.video-play-button a:hover i {
    color: var(--primary-color);
}

.intro-video-content {
    margin-top: 70px;
}

.intro-video-contact-box {
    background-color: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 25px 0;
}

.intro-video-contact-content-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.intro-video-contact-title {
    max-width: 49%;
}

    .intro-video-contact-title h2 {
        color: var(--white-color);
        font-size: 30px;
    }

.intro-video-contact-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px 60px;
    max-width: 49%;
    overflow: hidden;
}

.intro-video-contact-item {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

    .intro-video-contact-item::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: -30px;
        background: var(--dark-divider-color);
        width: 1px;
        height: 100%;
    }

    .intro-video-contact-item:last-child:before {
        display: none;
    }

    .intro-video-contact-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .intro-video-contact-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .intro-video-contact-item:hover .icon-box::before {
        transform: scale(1);
    }

    .intro-video-contact-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

    .intro-video-contact-item:hover .icon-box img {
        filter: brightness(0) invert(0);
    }

.intro-video-contact-content {
    width: calc(100% - 65px);
}

    .intro-video-contact-content p {
        color: var(--white-color);
        line-height: normal;
        margin-bottom: 5px;
    }

    .intro-video-contact-content h3 {
        color: var(--white-color);
        font-size: 20px;
    }

        .intro-video-contact-content h3 a {
            color: inherit;
            transition: all 0.4s ease-in-out;
        }

            .intro-video-contact-content h3 a:hover {
                color: var(--accent-secondary-color);
            }

.our-team {
    padding: 120px 0;
}

.team-item {
    /*! position: relative; */
    /*! border-radius: 20px; */
    /*! align-content: end; */
    /*! min-height: 480px; */
    /*! height: calc(100% - 30px); */
    /*! margin-bottom: 30px; */
    padding: 10px 0;
    /*! overflow: hidden; */
}

.team-item-image {
    /*! position: absolute; */
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    margin-bottom: 25px;
    border-radius: 25px;
}

    .team-item-image figure,
    .team-item-image a {
        position: relative;
        height: 100%;
        display: block;
        cursor: none;
        overflow: hidden;
        border-radius: 15px;
    }

        .team-item-image figure:before {
            content: '';
            /*! position: absolute; */
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            border-radius: 20px;
            /*! background: linear-gradient(180deg, transparent 61.46%, rgba(34, 34, 34, 0.80) 100%); */
            z-index: 1;
        }

    .team-item-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.6s ease-in-out;
        margin-bottom: 0;
    }

.team-item:hover .team-item-image img {
    transform: scale(1.06);
}

.team-item-body {
    position: relative;
    text-align: center;
    z-index: 1;
    margin-bottom: 15px;
}

.team-item-content h2 {
    font-size: 20px;
    color: #114c5c;
}

    .team-item-content h2 a {
        color: inherit;
    }

.team-item-content p {
    color: #000 !important;
    margin: 4px 0 0;
    \30: block;
}

.team-social-list {
    height: 0;
    opacity: 0;
    visibility: hidden;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 0.4s ease-in-out;
}

.team-item:hover .team-social-list {
    height: 36px;
    opacity: 1;
    visibility: visible;
    transform: scaleY(1);
    margin-bottom: 30px;
}

.team-social-list ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .team-social-list ul li a {
        width: 36px;
        height: 36px;
        color: var(--primary-color);
        background-color: var(--white-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

        .team-social-list ul li a:hover {
            background: var(--accent-color);
            color: var(--white-color);
        }

        .team-social-list ul li a i {
            font-size: 18px;
            color: inherit;
        }

/************************************/
/***    18. Services Page css     ***/
/************************************/

.page-services {
    padding: 80px 0 80px;
}

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

    .page-services .service-item-header .icon-box::before {
        background: var(--primary-color);
    }

    .page-services .service-item:hover .service-item-header .icon-box img {
        filter: none;
    }

    .page-services .service-item-title h2,
    .page-services .readmore-btn {
        color: var(--primary-color);
    }

    .page-services .service-item-content p {
        color: var(--text-color);
    }

    .page-services .service-item-btn {
        border-color: var(--divider-color);
    }

        .page-services .service-item-btn .readmore-btn::before {
            background-image: url('../images/arrow-primary.svg');
        }

/************************************/
/***    19. Service Single css    ***/
/************************************/

.page-service-single {
    padding: 50px 0 50px;
    /*! background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%); */
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

.page-single-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.page-category-list {
    background: var(--white-color);
    border-radius: 10px;
    /*! margin-bottom: 60px; */
    overflow: hidden;
    padding: 25px;
    background-color: #f5f4ef;
    min-height: calc(100vh - 52px);
    border-radius: 18px;
    padding: 25px;
    background: linear-gradient(180deg, #15999b 0%, #114c5c 100%);
    color: #fff;
    box-shadow: 0 24px 65px rgba(15, 117, 136, 0.22);
    position: sticky;
    top: 26px;
    overflow: hidden;
    min-height: calc(100vh - 52px);
    border-radius: 20px;
    padding: 30px;
    background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
    color: #fff;
    box-shadow: 0 24px 65px rgba(15, 117, 136, 0.22);
    position: sticky;
    top: 26px;
    overflow: hidden;
}

    .page-category-list .page-category-list-title {
        font-size: 22px;
        line-height: normal;
        color: var(--white-color);
        /*! background: #114c5c; */
        padding: 16px 0px;
        border-radius: 8px;
    }

    .page-category-list ul {
        list-style: none;
        margin: 0;
        padding: 0;
        background-color: transparent;
    }

        .page-category-list ul li {
            line-height: 1.5em;
            border-bottom: 0;
        }

            .page-category-list ul li:last-child {
                border-bottom: none;
                margin: 0;
                padding: 0;
            }

            .page-category-list ul li a {
                position: relative;
                display: block;
                text-transform: capitalize;
                color: inherit;
                padding-right: 25px;
                transition: all 0.4s ease-in-out;
                padding: 15px;
                margin: 10px 0;
                background-color: #fff;
                border-radius: 8px;
                font-size: 19px;
                color: #333;
                width: 100%;
                border: 0;
                cursor: pointer;
                min-height: 56px;
                border-radius: 9px;
                padding: 0 18px;
                background: rgba(255,255,255,0.10);
                color: rgba(255,255,255,0.92);
                display: flex;
                align-items: center;
                gap: 13px;
                font-size: 18px;
                font-weight: 500;
                text-align: left;
                transition: 0.3s ease;
            }

                .page-category-list ul li a:hover {
                    color: #ffffff;
                    background-color: #15999b;
                }

                .page-category-list ul li a::before {
                    content: '';
                    position: absolute;
                    top: 50%;
                    right: 13px;
                    /* background: url('../images/arrow-primary.svg') no-repeat; */
                    background-position: center center;
                    background-size: cover;
                    width: 12px;
                    height: 12px;
                    transform: translateY(-50%);
                    transition: all 0.4s ease-in-out;
                }

                .page-category-list ul li a:hover::before {
                    transform: translateY(-50%) rotate(45deg);
                }

.sidebar-cta-box {
    position: relative;
    border-radius: 20px;
    min-height: 460px;
    align-content: end;
    padding: 10px;
    overflow: hidden;
}

.sidebar-cta-box-image {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}

    .sidebar-cta-box-image figure {
        display: block;
        height: 100%;
    }

    .sidebar-cta-box-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.sidebar-cta-contact-item-list {
    position: relative;
    background: #FFFFFFBF;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 20px;
    z-index: 2;
}

.sidebar-cta-contact-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 2px;
    padding-bottom: 25px;
}

    .sidebar-cta-contact-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding: 0;
    }

    .sidebar-cta-contact-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .sidebar-cta-contact-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: var(--white-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .sidebar-cta-contact-item:hover .icon-box:before {
        transform: scale(1);
    }

    .sidebar-cta-contact-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

    .sidebar-cta-contact-item:hover .icon-box img {
        filter: brightness(1) invert(1);
    }

.sidebar-cta-contact-item-content {
    width: calc(100% - 65px);
}

    .sidebar-cta-contact-item-content p {
        color: #114C5C;
        margin: 0;
    }

    .sidebar-cta-contact-item-content h2 {
        font-size: 20px;
        color: #114c5c;
        margin: 5px 0 0;
    }

        .sidebar-cta-contact-item-content h2 a {
            color: inherit;
            transition: all 0.4s ease-in-out;
        }

            .sidebar-cta-contact-item-content h2 a:hover {
                color: var(--accent-secondary-color);
            }

.page-single-image {
    margin-bottom: 40px;
}

    .page-single-image figure {
        display: block;
        border-radius: 20px;
    }

    .page-single-image img {
        width: 100%;
        aspect-ratio: 1 / 0.6;
        object-fit: cover;
        border-radius: 20px;
    }

.service-entry {
    margin-bottom: 60px;
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(202, 230, 236, 0.95);
    border-radius: 20px;
    padding: 34px;
    min-height: calc(100vh - 52px);
    box-shadow: 0 24px 65px rgba(13, 64, 84, 0.08);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

    .service-entry p {
        margin-bottom: 20px;
    }

    .service-entry h2 {
        font-size: 48px;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
    }

    .service-entry h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

        .service-entry p:last-child,
        .service-entry h2:last-child,
        .service-entry h3:last-child {
            margin: 0;
        }

    .service-entry ul {
        display: block;
        flex-wrap: inherit;
        gap: 15px 20px;
        list-style:;
        padding: 0;
        margin: 0;
        margin-left: 15px;
    }

        .service-entry ul li {
            position: relative;
            width: 100%;
            line-height: 1.5em;
            padding-left: 7px;
            margin-bottom: 10px;
        }

            .service-entry ul li::before {
                /*! content: '\f058'; */
                /*! position: absolute; */
                /*! font-family: 'Font Awesome 7 Free'; */
                /*! font-size: 18px; */
                /*! font-weight: 900; */
                /*! color: var(--accent-color); */
                /*! top: 0; */
                /*! left: 0; */
            }

.service-entry-info-box,
.service-focus-box,
.service-process-box {
    margin-top: 60px;
}

.service-benefit-box {
    margin-top: 40px;
}

    .service-benefit-box h3 {
        font-size: 30px;
    }

.service-focus-item-list {
    margin-top: 40px;
}

.service-focus-item {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 30px;
}

    .service-focus-item:last-child {
        margin-bottom: 0;
    }

.service-focus-image {
    width: calc(39% - 15px);
}

    .service-focus-image figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

    .service-focus-image img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 0.68;
        object-fit: cover;
        border-radius: 20px;
    }

.service-focus-content-box {
    width: calc(61% - 15px);
    background: var(--white-color);
    align-content: center;
    border-radius: 20px;
    padding: 2.083vw;
}

.service-focus-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 30px;
}

    .service-focus-item-header .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: var(--accent-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .service-focus-item-header .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.service-focus-content-box:hover .service-focus-item-header .icon-box:before {
    transform: scale(1);
}

.service-focus-item-header .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.service-focus-item-title {
    width: calc(100% - 65px);
}

.service-process-body-box {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 50px;
    margin-top: 40px;
}

.service-process-item-list {
    width: calc(51% - 25px);
    align-content: center;
}

.service-process-item {
    display: flex;
    flex-wrap: wrap;
    gap: 15px 20px;
    margin-bottom: 40px;
}

    .service-process-item:last-child {
        margin-bottom: 0;
    }

.service-process-item-no {
    position: relative;
    width: 60px;
    height: 60px;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .service-process-item-no::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background: var(--primary-color);
        border-radius: 50%;
        width: 100%;
        height: 100%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.service-process-item:hover .service-process-item-no:before {
    transform: scale(1);
}

.service-process-item-no span {
    position: relative;
    font-family: var(--accent-font);
    font-size: 24px;
    font-weight: 500;
    color: var(--white-color);
    z-index: 1;
}

.service-process-item-content {
    width: calc(100% - 80px);
}

.service-process-video-image {
    position: relative;
    width: calc(49% - 25px);
    border-radius: 20px;
    overflow: hidden;
}

    .service-process-video-image figure {
        display: block;
        height: 100%;
    }

        .service-process-video-image figure::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: var(--primary-color);
            opacity: 30%;
            width: 100%;
            height: 100%;
        }

        .service-process-video-image figure img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 0.925;
            object-fit: cover;
        }

    .service-process-video-image .video-play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1;
    }

        .service-process-video-image .video-play-button a {
            width: 55px;
            height: 55px;
        }

            .service-process-video-image .video-play-button a i {
                font-size: 18px;
            }

/************************************/
/***     20. Blog Archive css     ***/
/************************************/

.page-blog {
    padding: 120px 0;
}

.page-pagination {
    margin-top: 30px;
    text-align: center;
}

    .page-pagination ul {
        justify-content: center;
        padding: 0;
        margin: 0;
    }

        .page-pagination ul li a,
        .page-pagination ul li span {
            display: flex;
            text-decoration: none;
            justify-content: center;
            align-items: center;
            background: var(--white-color);
            color: var(--primary-color);
            border-radius: 10px;
            width: 40px;
            height: 40px;
            margin: 0 5px;
            font-family: var(--accent-font);
            font-weight: 500;
            line-height: 1em;
            transition: all 0.3s ease-in-out;
        }

            .page-pagination ul li.active a,
            .page-pagination ul li a:hover {
                background: var(--accent-color);
                color: var(--white-color);
            }

/************************************/
/***      21. Blog Single css     ***/
/************************************/

.page-single-post {
    padding: 50px 0;
}

.post-single-meta ol li {
    font-size: 18px;
    color: var(--white-color);
    margin-right: 15px;
}

    .post-single-meta ol li:last-child {
        margin-right: 0;
    }

    .post-single-meta ol li i {
        font-size: 18px;
        color: var(--white-color);
        margin-right: 5px;
    }

.post-image {
    position: relative;
    margin-bottom: 30px;
}

    .post-image figure {
        display: block;
        border-radius: 20px;
        overflow: hidden;
    }

    .post-image img {
        width: 100%;
        aspect-ratio: 1 / 0.50;
        object-fit: cover;
        border-radius: 20px;
    }

.post-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.post-entry {
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

    .post-entry:after {
        content: '';
        display: block;
        clear: both;
    }

    .post-entry a {
        color: var(--accent-color);
    }

    .post-entry h1,
    .post-entry h2,
    .post-entry h3,
    .post-entry h4,
    .post-entry h5,
    .post-entry h6 {
        font-family: var(--accent-font);
        font-weight: 500;
        line-height: 1.2em;
        margin: 0 0 0.42em;
    }

    .post-entry h1 {
        font-size: 60px;
    }

    .post-entry h2 {
        font-size: 48px;
    }

    .post-entry h3 {
        font-size: 40px;
    }

    .post-entry h4 {
        font-size: 30px;
    }

    .post-entry h5 {
        font-size: 24px;
    }

    .post-entry h6 {
        font-size: 20px;
    }

    .post-entry p {
        margin-bottom: 20px;
    }

        .post-entry p:last-child {
            margin-bottom: 0;
        }

        .post-entry p strong {
            color: var(--primary-color);
            font-size: 18px;
            font-weight: 500;
        }

    .post-entry ol {
        margin: 0 0 30px;
    }

    .post-entry ul {
        padding: 0;
        margin: 20px 0 20px;
        padding-left: 20px;
    }

        .post-entry ol li,
        .post-entry ul li {
            position: relative;
            font-size: 18px;
            font-weight: 400;
            line-height: 1.5em;
            color: var(--text-color);
            margin-bottom: 15px;
        }

            .post-entry ul li:last-child {
                margin-bottom: 0;
            }

        .post-entry ul ul,
        .post-entry ul ol,
        .post-entry ol ol,
        .post-entry ol ul {
            margin-top: 20px;
            margin-bottom: 0;
        }

            .post-entry ul ul li:last-child,
            .post-entry ul ol li:last-child,
            .post-entry ol ol li:last-child,
            .post-entry ol ul li:last-child {
                margin-bottom: 0;
            }

    .post-entry blockquote {
        background: var(--accent-color) url('../images/icon-blockquote.svg');
        background-repeat: no-repeat;
        background-position: 30px 30px;
        background-size: 45px;
        border-radius: 20px;
        padding: 30px 30px 30px 90px;
        margin-bottom: 30px;
    }

        .post-entry blockquote p {
            font-family: var(--accent-font);
            font-size: 20px;
            font-weight: 500;
            line-height: 1.4em;
            color: var(--white-color);
        }

            .post-entry blockquote p:last-child {
                margin-bottom: 0;
            }

.tag-links {
    font-family: var(--accent-font);
    font-size: 20px;
    font-weight: 500;
    text-transform: capitalize;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.post-tags .tag-links a {
    display: inline-block;
    font-family: var(--accent-font);
    font-size: 16px;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1em;
    background: var(--accent-color);
    color: var(--white-color);
    border-radius: 5px;
    padding: 12px 20px;
    transition: all 0.4s ease-in-out;
}

    .post-tags .tag-links a:hover {
        background: var(--accent-secondary-color);
    }

.post-social-sharing {
    text-align: right;
}

    .post-social-sharing ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .post-social-sharing ul li {
            display: inline-block;
            margin-right: 10px;
        }

            .post-social-sharing ul li:last-child {
                margin-right: 0;
            }

            .post-social-sharing ul li a {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                background: var(--accent-color);
                color: var(--white-color);
                border-radius: 5px;
                width: 40px;
                height: 40px;
                transition: all 0.4s ease-in-out;
            }

            .post-social-sharing ul li:hover a {
                background: var(--accent-secondary-color);
            }

            .post-social-sharing ul li a i {
                font-size: 18px;
                color: inherit;
            }

/************************************/
/***   22. Case Study Page css    ***/
/************************************/

.page-case-study {
    padding: 120px 0 90px;
}

/************************************/
/***  23. Case Study Single css   ***/
/************************************/

.page-case-study-single {
    padding: 120px 0;
}

.case-study-category-list ul li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
}

.case-study-entry {
    margin-bottom: 60px;
}

    .case-study-entry p {
        margin-bottom: 20px;
    }

    .case-study-entry h2 {
        font-size: 48px;
        letter-spacing: -0.02em;
        margin-bottom: 20px;
    }

    .case-study-entry h3 {
        font-size: 20px;
        margin-bottom: 10px;
    }

        .case-study-entry p:last-child,
        .case-study-entry h2:last-child,
        .case-study-entry h3:last-child {
            margin: 0;
        }

    .case-study-entry ul {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .case-study-entry ul li {
            position: relative;
            width: calc(50% - 15px);
            line-height: 1.5em;
            padding-left: 25px;
        }

            .case-study-entry ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-color);
                top: 0;
                left: 0;
            }

.case-study-approach-box,
.case-study-results-box,
.case-study-challenge-box {
    margin-top: 60px;
}

.case-study-approach-list {
    margin-top: 40px;
}

    .case-study-approach-list ul li {
        border: 1px solid var(--divider-color);
        border-radius: 10px;
        padding: 15px 15px 15px 45px;
    }

        .case-study-approach-list ul li::before {
            left: 15px;
            top: 15px;
        }

.case-study-results-body {
    background: var(--white-color);
    border-radius: 20px;
    margin-top: 40px;
    padding: 40px;
}

.case-study-result-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.case-study-result-item {
    width: calc(33.33% - 20px);
}

    .case-study-result-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background-color: var(--accent-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 25px;
    }

        .case-study-result-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .case-study-result-item:hover .icon-box:before {
        transform: scale(1);
    }

    .case-study-result-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.case-study-result-list {
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

    .case-study-result-list ul {
        gap: 20px;
    }

        .case-study-result-list ul li {
            width: calc(33.33% - 13.33px);
        }

.case-study-challenge-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 40px;
}

.case-study-challenge-item {
    position: relative;
    width: calc(50% - 15px);
    min-height: 325px;
    align-content: end;
    border-radius: 20px;
    padding: 30px;
    overflow: hidden;
}

.case-study-challenge-image {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

    .case-study-challenge-image::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, transparent 48.45%, rgba(34, 34, 34, 0.80) 100%);
        width: 100%;
        height: 100%;
    }

    .case-study-challenge-image figure {
        display: block;
        height: 100%;
    }

    .case-study-challenge-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.case-study-challenge-item-content {
    position: relative;
    z-index: 1;
}

    .case-study-challenge-item-content h3,
    .case-study-challenge-item-content p {
        color: var(--white-color);
    }

/************************************/
/***      24. Team Page css       ***/
/************************************/

.page-team {
    padding: 50px 0 50px;
}

/************************************/
/***     25. Team Single css      ***/
/************************************/

.page-team-single {
    padding: 120px 0;
}

.page-single-sidebar {
    position: sticky;
    top: 30px;
    margin-right: 15px;
}

.team-single-image {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 60px;
}

    .team-single-image figure {
        position: relative;
        display: block;
    }

    .team-single-image img {
        width: 100%;
        aspect-ratio: 1 / 1.2;
        object-fit: cover;
    }

.member-social-list {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    z-index: 1;
}

    .member-social-list ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin: 0;
    }

        .member-social-list ul li a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 40px;
            height: 40px;
            background: var(--white-color);
            border-radius: 50%;
            color: var(--primary-color);
            transition: all 0.3s ease-in-out;
        }

        .member-social-list ul li:hover a {
            background: var(--accent-secondary-color);
            color: var(--white-color);
        }

        .member-social-list ul li i {
            font-size: 18px;
            color: inherit;
        }

.team-member-about,
.team-member-expertise,
.team-member-experience {
    margin-bottom: 60px;
}

.team-contact-list-box {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 50px;
}

.team-contact-list-box-title {
    margin-bottom: 40px;
}

    .team-contact-list-box-title h3 {
        font-size: 30px;
    }

.team-contact-list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 40px;
    padding-bottom: 40px;
}

    .team-contact-list-item:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

.team-contact-item {
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

    .team-contact-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        background: var(--accent-color);
        border-radius: 100px;
        overflow: hidden;
    }

        .team-contact-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: var(--accent-secondary-color);
            border-radius: 100px;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .team-contact-item:hover .icon-box::before {
        transform: scale(1);
    }

    .team-contact-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.team-contact-item-content {
    width: calc(100% - 65px);
}

    .team-contact-item-content h3 {
        font-size: 20px;
    }

    .team-contact-item-content p {
        margin: 5px 0 0;
    }

.member-skill-list .skill-data .skill-title,
.member-skill-list .skill-data .skill-no {
    font-size: 18px;
}

.member-skill-list .skill-progress {
    height: 14px;
}

    .member-skill-list .skill-progress .count-bar {
        background-color: var(--accent-color);
    }

.member-experience-item-list {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.member-experience-item {
    width: calc(50% - 15px);
    border: 1px solid var(--divider-color);
    border-radius: 10px;
    padding: 30px;
}

    .member-experience-item h3 {
        font-size: 20px;
    }

    .member-experience-item p {
        margin: 10px 0 0;
    }

/************************************/
/***     26. Pricing Page css     ***/
/************************************/

.page-pricing {
    padding: 120px 0;
}

/************************************/
/***   27. Testimonials Page css  ***/
/************************************/

.page-testimonials {
    padding: 120px 0 90px;
}

    .page-testimonials .testimonial-item {
        background: var(--white-color);
        height: calc(100% - 30px);
        margin-bottom: 30px;
    }

/************************************/
/***     28. Image Gallery css    ***/
/************************************/

.page-gallery {
    padding: 120px 0 90px;
}

.page-gallery-box .photo-gallery {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

    .page-gallery-box .photo-gallery a {
        cursor: none;
    }

    .page-gallery-box .photo-gallery figure {
        display: block;
        border-radius: 20px;
    }

    .page-gallery-box .photo-gallery img {
        width: 100%;
        aspect-ratio: 1 / 0.87;
        object-fit: cover;
        border-radius: 20px;
    }

/************************************/
/***    29. Video Gallery css     ***/
/************************************/

.page-video-gallery {
    padding: 120px 0 90px;
}

.video-gallery-image {
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

    .video-gallery-image a {
        position: relative;
        display: block;
        cursor: none;
    }

        .video-gallery-image a::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--primary-color);
            border-radius: 20px;
            opacity: 0%;
            visibility: hidden;
            width: 100%;
            height: 100%;
            z-index: 1;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
        }

    .video-gallery-image:hover a::before {
        opacity: 50%;
        visibility: visible;
        transform: scale(1);
    }

    .video-gallery-image a::after {
        content: '\f04b';
        font-family: 'FontAwesome';
        position: absolute;
        top: 50%;
        left: 50%;
        right: 0;
        transform: translate(-50%, -50%);
        font-size: 20px;
        background: var(--accent-secondary-color);
        color: var(--white-color);
        border-radius: 50%;
        height: 60px;
        width: 60px;
        cursor: none;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease-in-out;
        z-index: 1;
    }

    .video-gallery-image:hover a::after {
        opacity: 1;
        visibility: visible;
    }

    .video-gallery-image img {
        width: 100%;
        aspect-ratio: 1 / 0.87;
        object-fit: cover;
        border-radius: 20px;
    }

/************************************/
/***      30. FAQ's Page css      ***/
/************************************/

.page-faqs {
    padding: 80px 0;
}

    .page-faqs .page-single-faqs {
        margin-bottom: 60px;
    }

        .page-faqs .page-single-faqs:last-child {
            margin-bottom: 0px;
        }

/************************************/
/***   31. Contact Us Page css    ***/
/************************************/

.page-contact-us {
    padding: 60px 0 60px;
}

.contact-us-content {
    margin-right: 15px;
}

.contact-info-list-title {
    margin-bottom: 50px;
}

    .contact-info-list-title h3 {
        font-size: 23px;
    }

.contact-info-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 30px;
    margin-bottom: 30px;
}

    .contact-info-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .contact-info-item .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }

        .contact-info-item .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            bottom: 0;
            right: 0;
            left: 0;
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
        }

    .contact-info-item:hover .icon-box::before {
        transform: scale(1);
    }

    .contact-info-item .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.contact-info-item-content {
    width: calc(100% - 65px);
}

    .contact-info-item-content h3 {
        font-size: 20px;
    }

    .contact-info-item-content p {
        line-height: normal;
        margin: 5px 0 0;
    }

        .contact-info-item-content p a {
            color: inherit;
            transition: all 0.4s ease-in-out;
        }

            .contact-info-item-content p a:hover {
                color: var(--primary-color);
            }

.contact-us-form {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 50px;
}

.contact-form .form-control {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background: #F5F4EF;
    border: none;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: none;
    outline: none;
}

    .contact-form .form-control::placeholder {
        color: var(--text-color);
    }

.google-map {
    padding: 20px 0 50px;
}

.google-map-iframe {
    width: 100%;
    height: 600px;
}

    .google-map-iframe iframe {
        width: 100%;
        height: 100%;
        filter: grayscale(100%);
        border-radius: 20px;
        transition: all 0.4s ease-in-out;
    }

        .google-map-iframe iframe:hover {
            filter: grayscale(0%);
        }

/************************************/
/***   32. Book Appointment css   ***/
/************************************/

.page-book-appointment {
    padding: 120px 0;
}

.book-appointment-content {
    margin-right: 15px;
}

.working-hour-box {
    max-width: 550px;
}

    .working-hour-box h3 {
        font-size: 30px;
        margin-bottom: 50px;
    }

    .working-hour-box ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .working-hour-box ul li {
            width: 100%;
            display: flex;
            justify-content: space-between;
            gap: 10px;
            line-height: 1.5em;
            border-bottom: 1px solid var(--divider-color);
            margin-bottom: 25px;
            padding-bottom: 25px;
        }

            .working-hour-box ul li:last-child {
                margin-bottom: 0px;
                padding-bottom: 0px;
                border-bottom: none;
            }

            .working-hour-box ul li span {
                font-family: var(--accent-font);
                font-size: 20px;
                font-weight: 500;
                color: var(--primary-color);
            }

.page-book-appointment .book-appointment-form-box {
    background-color: var(--white-color);
    max-width: 100%;
}

.book-appointment-form-content {
    margin-bottom: 40px;
}

    .book-appointment-form-content p {
        margin: 0;
    }

.page-book-appointment .book-appointment-form .form-control {
    background-color: var(--bg-color);
    color: var(--primary-color);
}

    .page-book-appointment .book-appointment-form .form-control::placeholder {
        color: var(--text-color);
    }

/************************************/
/***    33. 404 Error Page css    ***/
/************************************/

.error-page {
    padding: 120px 0;
}

.error-page-image {
    text-align: center;
    margin-bottom: 30px;
}

    .error-page-image img {
        width: 100%;
        max-width: 660px;
    }

.error-page-content {
    text-align: center;
}

    .error-page-content .section-title {
        margin-bottom: 15px;
    }

/************************************/
/***      34. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1850px) {

    .bg-section {
        /*! width: calc(100% - 30px); */
    }
}

@media only screen and (max-width: 1024px) {

    .main-menu ul li {
        margin: 0;
    }

    .section-content-btn .section-btn {
        margin-top: 20px;
    }

    .section-title-content {
        margin-top: 10px;
    }

    .section-btn {
        text-align: left;
        margin-top: 15px;
    }

    .hero {
        height: auto;
    }

    .hero-content {
        margin-bottom: 30px;
    }

    .hero-info-box {
        margin-left: 0;
        min-height: auto;
        padding: 20px;
    }

    .about-us-image-box {
        max-width: 740px;
        margin: 0 auto 30px;
    }

    .about-us-image-box-2 .about-us-image img {
        aspect-ratio: 1 / 1.8;
    }

    .service-item {
        gap: 30px;
        padding: 30px;
        min-height: 350px;
    }

    .service-item-btn {
        margin-top: 30px;
        padding-top: 30px;
    }

    .expertise-content {
        margin-bottom: 30px;
    }

    .expertise-image-box {
        max-width: 740px;
        margin: 0 auto;
    }

    .why-choose-cta-item {
        padding: 30px;
    }

    .why-choose-cta-body {
        gap: 30px;
    }

    .why-choose-cta-btn {
        margin-top: 30px;
    }

    .why-choose-slider-box {
        margin-top: 10px;
    }

    .why-choose-slider-content {
        margin-bottom: 30px;
    }

    .case-study-item {
        min-height: 420px;
        padding: 30px;
    }

    .how-work-content {
        margin-bottom: 30px;
    }

    .how-it-work-image {
        margin: 0;
        height: auto;
    }

        .how-it-work-image figure,
        .how-it-work-image img {
            height: auto;
        }

    .how-work-item-list {
        gap: 40px;
        margin-top: 60px;
    }

    .how-work-item {
        width: calc(50% - 20px);
    }

        .how-work-item:before {
            right: -20px;
        }

        .how-work-item:nth-child(3n + 3):before {
            display: block;
        }

        .how-work-item:nth-child(2n + 2):before,
        .how-work-item:last-child:before {
            display: none;
        }

    .how-work-item-body {
        margin-top: 20px;
    }

    .pricing-item-content,
    .pricing-item-list {
        padding: 20px;
    }

    .pricing-item-body {
        padding: 30px;
    }

    .pricing-item-list h3 {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .testimonial-item {
        padding: 30px;
    }

    .faqs-content {
        position: initial;
        margin: 0 0 30px;
    }

    .faqs-content-btn {
        margin-top: 30px;
    }

    .book-appointment-form-box {
        padding: 30px;
    }

    .post-item {
        padding: 30px;
    }

    .footer-header {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .about-footer {
        padding: 30px;
        margin-bottom: 30px;
    }

    .about-footer-content {
        margin-top: 15px;
    }

    .footer-social-links {
        margin-top: 20px;
    }

    .footer-links-box {
        margin: 0;
    }

    .footer-copyright-text {
        margin-top: 30px;
        padding: 30px 0;
    }

    .approach-content-box,
    .approach-item-list {
        padding: 30px;
    }

    .approach-item {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .benefits-item {
        padding: 30px;
        min-height: auto;
    }

        .benefits-item .icon-box {
            margin-bottom: 30px;
        }

    .intro-video-body {
        padding: 120px 0;
    }

    .intro-video-content {
        margin-top: 50px;
    }

    .intro-video-contact-title {
        max-width: 34%;
    }

    .intro-video-contact-list {
        max-width: 63%;
    }

    .page-single-sidebar {
        margin: 0;
    }

    .page-category-list .page-category-list-title {
        padding: 15px 20px;
    }

    .page-category-list ul {
        padding: 20px;
    }

        .page-category-list ul li {
            margin-bottom: 15px;
            padding-bottom: 15px;
        }

    .sidebar-cta-contact-item-list {
        padding: 15px;
    }

    .sidebar-cta-contact-item {
        gap: 10px;
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

        .sidebar-cta-contact-item .icon-box {
            width: 40px;
            height: 40px;
        }

            .sidebar-cta-contact-item .icon-box img {
                max-width: 20px;
            }

    .sidebar-cta-contact-item-content {
        width: calc(100% - 50px);
    }

        .sidebar-cta-contact-item-content h2 {
            font-size: 18px;
        }

    .page-single-image {
        margin-bottom: 30px;
    }

    .service-entry {
        margin-bottom: 40px;
    }

        .service-entry ul {
            margin-top: 30px;
        }

    .service-entry-info-box,
    .service-focus-box,
    .service-process-box {
        margin-top: 40px;
    }

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

    .service-focus-item-list {
        margin-top: 30px;
    }

    .service-process-body-box {
        gap: 30px;
        margin-top: 30px;
    }

    .service-process-item-list {
        width: calc(54% - 15px);
    }

    .service-process-item {
        margin-bottom: 30px;
    }

    .service-process-video-image {
        width: calc(46% - 15px);
    }

    .case-study-approach-box,
    .case-study-results-box,
    .case-study-challenge-box {
        margin-top: 40px;
    }

    .case-study-approach-list {
        margin-top: 30px;
    }

    .case-study-entry ul {
        gap: 15px;
    }

    .case-study-approach-list ul li {
        width: calc(50% - 7.5px);
        padding: 10px 10px 10px 33px;
    }

        .case-study-approach-list ul li::before {
            left: 10px;
            top: 10px;
        }

    .case-study-results-body {
        margin-top: 30px;
        padding: 30px;
    }

    .case-study-result-item-content h3 {
        font-size: 18px;
    }

    .case-study-result-list {
        margin-top: 30px;
        padding-top: 30px;
    }

        .case-study-result-list ul li {
            width: calc(50% - 7.5px);
        }

    .case-study-challenge-item-list {
        margin-top: 30px;
    }

    .team-member-about,
    .team-member-expertise,
    .team-member-experience {
        margin-bottom: 40px;
    }

    .team-contact-list-box {
        padding: 30px;
    }

    .team-contact-list-box-title {
        margin-bottom: 30px;
    }

        .team-contact-list-box-title h3 {
            font-size: 26px;
        }

    .team-contact-list-item {
        gap: 30px 20px;
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .team-contact-item {
        width: calc(50% - 10px);
    }

    .member-experience-item-list {
        gap: 20px;
    }

    .member-experience-item {
        width: calc(50% - 10px);
        padding: 20px;
    }

    .contact-us-content {
        margin: 0 0 30px;
    }

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

    .contact-us-form {
        padding: 30px;
    }

    .book-appointment-content {
        margin: 0 0 30px;
    }

    .working-hour-box h3 {
        margin-bottom: 30px;
    }
}

@media only screen and (max-width: 991px) {

    .bg-section {
        border-radius: 0;
    }

    .btn-default {
        padding: 15px 50px 15px 15px;
    }

        .btn-default::before {
            width: 36px;
            height: 36px;
            background-size: 11px auto;
        }

    header.main-header {
        top: 0px;
        right: 0px;
        left: 0px;
    }

        header.main-header .header-sticky {
            width: 100%;
            border-radius: 0;
        }

            header.main-header .header-sticky.active {
                width: 100%;
                top: 0;
                left: 0;
                right: 0;
                border-right: none;
                border-left: none;
                border-radius: 0;
            }

    .navbar {
        padding: 20px 0;
    }

    .responsive-menu,
    .navbar-toggle {
        display: block;
    }

    .slicknav_nav li,
    .slicknav_nav ul {
        display: block;
    }

    .header-btn {
        display: none;
    }

    .bg-section {
        width: 100%;
        border-radius: 0;
        margin: 0;
    }

        .bg-section .container-fluid {
            padding: 0 15px;
        }

    .section-row {
        margin-bottom: 40px;
    }

    .section-title {
        margin-bottom: 30px;
    }

        .section-title .section-sub-title {
            padding: 7px 12px 7px 27px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

            .section-title .section-sub-title::before {
                left: 12px;
            }

        .section-title h1 {
            font-size: 44px;
        }

        .section-title h2 {
            font-size: 38px;
        }

        .section-title p {
            margin-top: 10px;
        }

    .hero {
        padding: 150px 0 60px;
        margin: 0;
        border-radius: 0;
    }

    .hero-content-body {
        gap: 20px;
    }

    .hero-client-content h2 {
        font-size: 18px;
    }

    .about-us {
        padding: 60px 0;
    }

    .about-us-body,
    .about-us-btn {
        margin-top: 30px;
    }

    .about-us-body-item {
        padding: 20px;
    }

    .our-services {
        padding: 60px 0;
        background-size: 100% auto;
    }

    .service-item-header .icon-box {
        height: 50px;
        width: 50px;
    }

        .service-item-header .icon-box img {
            max-width: 24px;
        }

    .service-item-title {
        width: calc(100% - 65px);
    }

    .section-footer-text {
        margin-top: 10px;
    }

    .our-expertise {
        padding: 60px 0;
    }

    .expertise-body {
        padding-top: 30px;
    }

    .skillbar .skill-data {
        margin-bottom: 15px;
    }

    .expertise-btn {
        margin-top: 30px;
    }

    .experience-circle {
        transform: translate(-55px, 55px);
    }

        .experience-circle img {
            max-width: 110px;
        }

    .why-choose-us {
        padding: 60px 0;
    }

    .why-choose-item {
        min-height: 350px;
        padding: 15px;
    }

    .why-choose-item-content {
        padding: 20px;
    }

    .why-choose-content-image img {
        max-width: 200px;
    }

    .why-choose-cta-body .icon-box img {
        max-width: 50px;
    }

    .why-choose-cta-content h2 {
        font-size: 22px;
    }

    .our-case-study {
        padding: 60px 0;
    }

    .how-it-work {
        padding: 60px 0;
    }

    .how-work-item-header .icon-box {
        width: 50px;
        height: 50px;
    }

        .how-work-item-header .icon-box img {
            max-width: 24px;
        }

    .how-work-item-title {
        width: calc(100% - 65px);
    }

        .how-work-item-title p {
            margin-bottom: 5px;
        }

    .our-pricing {
        padding: 60px 0;
    }

    .pricing-item-price h2 {
        font-size: 34px;
    }

    .pricing-item-btn .btn-default {
        padding: 15px;
    }

    .pricing-item-list ul li {
        margin-bottom: 10px;
    }

        .pricing-item-list ul li::before {
            font-size: 16px;
        }

    .pricing-benefit-list {
        margin-top: 10px;
    }

        .pricing-benefit-list ul {
            gap: 15px 30px;
        }

            .pricing-benefit-list ul li img {
                max-width: 18px;
            }

    .our-testimonials {
        padding: 60px 0;
    }

    .testimonials-review-header-content h2 {
        font-size: 22px;
        min-width: 60px;
    }

    .google-rating-star i {
        font-size: 16px;
    }

    .our-testimonials .section-footer-text {
        margin-top: 40px;
    }

    .our-faqs {
        padding: 60px 0;
    }

    .faqs-content-list ul li {
        margin-bottom: 10px;
    }

        .faqs-content-list ul li:before {
            font-size: 16px;
        }

    .faq-accordion .accordion-item {
        margin-bottom: 20px;
    }

    .faq-accordion .accordion-header .accordion-button {
        padding: 18px 44px 18px 20px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        right: 20px;
        font-size: 18px;
    }

    .faq-accordion .accordion-item .accordion-body {
        padding: 18px 20px;
    }

    .our-book-appointment {
        padding: 60px 0;
    }

    .book-appointment-image {
        position: initial;
        height: auto;
        margin-bottom: 30px;
    }

        .book-appointment-image figure,
        .book-appointment-image img {
            height: auto;
        }

        .book-appointment-image img {
            aspect-ratio: 1 / 0.667;
        }

    .book-appointment-form-box {
        max-width: 100%;
    }

    .book-appointment-form .form-control {
        padding: 13px 15px;
    }

    .book-appointment-form select.form-control {
        padding: 13px 30px 13px 15px;
    }

    .appointment-form-btn {
        margin-top: 0;
    }

        .appointment-form-btn .btn-default {
            padding: 15px;
        }

    .our-blog {
        padding: 60px 0 30px;
    }

    .post-item {
        min-height: 380px;
    }

        .post-item .post-item-btn {
            margin-top: 20px;
            padding-top: 20px;
        }

    .main-footer {
        padding: 60px 0 0;
    }

    .footer-newsletter-form {
        max-width: 100%;
    }

        .footer-newsletter-form .form-group {
            padding: 5px;
        }

    .footer-links h2 {
        margin-bottom: 20px;
    }

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

    .page-header {
        border-radius: 0;
        padding: 170px 0 80px;
        margin: 0;
    }

    .page-header-box h1 {
        font-size: 44px;
    }

    .our-approach {
        padding: 60px 0 0;
        margin-bottom: 150px;
    }

    .approach-content-box {
        padding: 0;
    }

    .approach-image {
        position: initial;
        height: auto;
    }

        .approach-image figure,
        .approach-image img {
            height: auto;
        }

        .approach-image img {
            aspect-ratio: 1 / 0.43;
        }

    .approach-item-list {
        max-width: 100%;
    }

    .approach-content-box {
        margin-bottom: -150px;
    }

    .our-benefit {
        padding: 60px 0;
    }

    .benefit-item-list ul li {
        margin-bottom: 10px;
    }

        .benefit-item-list ul li:before {
            font-size: 16px;
        }

    .video-play-button a {
        height: 65px;
        width: 65px;
    }

        .video-play-button a i {
            font-size: 24px;
        }

    .intro-video-contact-box {
        padding: 20px 0;
    }

    .intro-video-contact-list,
    .intro-video-contact-title {
        max-width: 100%;
    }

        .intro-video-contact-title h2 {
            font-size: 26px;
        }

    .our-team {
        padding: 60px 0;
    }

    .team-item {
        min-height: 440px;
    }

    .page-services {
        padding: 60px 0 30px;
    }

    .page-service-single {
        padding: 60px 0;
    }

    .page-single-sidebar {
        position: initial;
        margin-bottom: 30px;
    }

    .page-category-list {
        margin-bottom: 30px;
    }

    .service-entry p {
        margin-bottom: 15px;
    }

    .service-entry h2 {
        font-size: 38px;
        margin-bottom: 15px;
    }

    .service-entry ul li::before {
        font-size: 16px;
    }

    .service-benefit-box h3 {
        font-size: 26px;
    }

    .service-focus-content-box {
        padding: 20px;
    }

    .service-focus-item-header {
        margin-bottom: 20px;
    }

    .service-process-item {
        gap: 15px;
    }

    .service-process-item-no {
        width: 50px;
        height: 50px;
    }

        .service-process-item-no span {
            font-size: 20px;
        }

    .service-process-item-content {
        width: calc(100% - 65px);
    }

    .page-blog {
        padding: 60px 0;
    }

    .page-pagination {
        margin-top: 10px;
    }

    .page-single-post {
        padding: 15px 0;
    }

    .post-image {
        margin-bottom: 20px;
    }

    .post-entry h2 {
        font-size: 38px;
    }

    .post-entry p {
        margin-bottom: 15px;
    }

    .post-entry ol li,
    .post-entry ul li {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .post-entry blockquote {
        background-position: 20px 20px;
        background-size: 40px;
        padding: 20px 20px 20px 70px;
        margin-bottom: 20px;
    }

        .post-entry blockquote p {
            font-size: 18px;
        }

    .post-tags {
        margin-bottom: 20px;
    }

        .post-tags .tag-links a {
            padding: 12px 15px;
        }

    .post-social-sharing ul {
        text-align: left;
    }

    .page-case-study {
        padding: 60px 0 30px;
    }

    .page-case-study-single {
        padding: 60px 0;
    }

    .case-study-entry p {
        margin-bottom: 15px;
    }

    .case-study-entry h2 {
        font-size: 38px;
        margin-bottom: 15px;
    }

    .case-study-entry ul li::before {
        font-size: 16px;
    }

    .case-study-challenge-item {
        padding: 20px;
    }

    .case-study-result-item .icon-box {
        margin-bottom: 20px;
    }

    .page-team {
        padding: 20px 0 20px;
    }

    .page-team-single {
        padding: 60px 0;
    }

    .team-single-image img {
        aspect-ratio: 1 / 0.8;
    }

    .page-pricing {
        padding: 60px 0;
    }

    .page-testimonials {
        padding: 60px 0 30px;
    }

    .page-gallery {
        padding: 60px 0 30px;
    }

    .page-video-gallery {
        padding: 60px 0 30px;
    }

    .page-faqs {
        padding: 60px 0;
    }

        .page-faqs .page-single-faqs {
            margin-bottom: 40px;
        }

    .page-contact-us {
        padding: 60px 0 30px;
    }

    .contact-info-list-title h3 {
        font-size: 26px;
    }

    .contact-form .form-control {
        padding: 13px 15px;
    }

    .google-map {
        padding: 30px 0 60px;
    }

    .google-map-iframe {
        height: 450px;
    }

    .page-book-appointment {
        padding: 60px 0;
    }

    .working-hour-box h3 {
        font-size: 26px;
    }

    .working-hour-box ul li {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

        .working-hour-box ul li span {
            font-size: 18px;
        }

    .error-page {
        padding: 60px 0px;
    }

    .error-page-image {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {

    .section-row {
        margin-bottom: 30px;
    }

    .section-title h1 {
        font-size: 28px;
    }

    .section-title h2 {
        font-size: 26px;
    }

    .hero-client-content h2 {
        font-size: 16px;
    }

    .hero-info-box {
        max-width: 100%;
        gap: 20px;
    }

    .hero-info-box-rating {
        margin-top: 20px;
        padding-top: 20px;
    }

        .hero-info-box-rating h2 {
            font-size: 18px;
        }

    .about-us-image-box {
        gap: 15px;
    }

    .about-us-image-box-1 {
        width: calc(44% - 7.5px);
    }

    .happy-customer-review-box {
        padding: 0 15px 15px 0;
        margin-right: -55px;
    }

        .happy-customer-review-box::after {
            right: 20px;
            bottom: -20px;
        }

    .happy-customer-review-item {
        padding: 15px;
    }

        .happy-customer-review-item .hero-info-rating-star i {
            font-size: 16px;
        }

    .happy-customer-review-content {
        margin-top: 10px;
        padding-top: 10px;
    }

        .happy-customer-review-content p {
            font-size: 14px;
        }

    .happy-customer-review-item .satisfy-client-images {
        margin-top: 10px;
    }

    .about-us-image-box-2 {
        width: calc(56% - 7.5px);
    }

    .about-us-item-list {
        gap: 20px;
    }

    .about-us-item {
        width: 100%;
    }

    .about-us-item-content h3 {
        font-size: 18px;
    }

    .about-us-body-item {
        padding: 15px;
    }

    .service-item {
        gap: 20px;
        padding: 20px;
        min-height: auto;
    }

    .service-item-title h2 {
        font-size: 18px;
    }

    .service-item-btn {
        margin-top: 20px;
        padding-top: 20px;
    }

    .skillbar .skill-data {
        margin-bottom: 10px;
    }

    .expertise-image-box-1 {
        padding-bottom: 50px;
    }

        .expertise-image-box-1 figure {
            margin-right: -150px;
        }

    .experience-circle {
        transform: translate(-45px, 45px);
    }

        .experience-circle img {
            max-width: 90px;
        }

    .why-choose-item-content {
        padding: 15px;
    }

    .why-choose-image img {
        aspect-ratio: 1 / 0.9;
    }

    .why-choose-cta-item {
        padding: 20px;
    }

    .why-choose-cta-content h2 {
        font-size: 20px;
    }

    .why-choose-slider-content {
        gap: 10px;
        margin-bottom: 20px;
    }

    .why-choose-logo img {
        max-width: 145px;
        height: 35px;
    }

    .case-study-item {
        min-height: 360px;
        padding: 20px;
    }

    .case-study-item-contant ul {
        margin-bottom: 10px;
    }

        .case-study-item-contant ul li a {
            padding: 6px 12px;
        }

    .case-study-item-contant h2 {
        font-size: 18px;
    }

    .how-work-item-list {
        margin-top: 0;
    }

    .how-work-item {
        width: 100%;
    }

        .how-work-item:before {
            top: auto;
            bottom: -20px;
            left: 0;
            right: 0;
            height: 1px;
            width: 100%;
        }

        .how-work-item:nth-child(2n + 2):before {
            display: block;
        }

        .how-work-item:last-child:before {
            display: none;
        }

    .how-work-item-title h3 {
        font-size: 18px;
    }

    .pricing-item-content,
    .pricing-item-list {
        padding: 10px;
    }

        .pricing-item-content h2 {
            font-size: 18px;
        }

    .pricing-item-body {
        padding: 20px;
    }

    .pricing-item-price h2 {
        font-size: 28px;
    }

    .pricing-item-price p {
        margin-top: 5px;
    }

    .pricing-item-btn {
        margin-top: 20px;
    }

    .pricing-item-list h3 {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .pricing-benefit-list {
        margin-top: 5px;
    }

        .pricing-benefit-list ul {
            gap: 10px 20px;
        }

            .pricing-benefit-list ul li {
                font-size: 14px;
            }

                .pricing-benefit-list ul li img {
                    max-width: 16px;
                    margin-right: 5px;
                }

    .testimonials-image-box {
        margin-bottom: 30px;
    }

    .testimonials-image-box,
    .testimonials-image,
    .testimonials-image figure {
        height: auto;
    }

        .testimonials-image img {
            height: auto;
            aspect-ratio: 1 / 1.05;
        }

    .testimonials-review-box {
        max-width: 235px;
    }

    .testimonials-review-box-header .icon-box img {
        max-width: 30px;
    }

    .testimonials-review-header-content h2 {
        font-size: 18px;
        min-width: 50px;
    }

    .testimonials-review-body {
        margin-top: 10px;
    }

    .testimonial-item {
        height: auto;
        min-height: auto;
        gap: 20px;
        padding: 20px;
    }

    .testimonial-item-author {
        padding-top: 20px;
    }

    .testimonial-item-author-content h2 {
        font-size: 18px;
    }

    .faq-accordion .accordion-header .accordion-button {
        padding: 12px 35px 12px 15px;
        font-size: 16px;
    }

    .faq-accordion .accordion-item .accordion-body {
        padding: 12px 15px;
    }

    .faq-accordion .accordion-item .accordion-button::after,
    .faq-accordion .accordion-item .accordion-button.collapsed::after {
        font-size: 16px;
        right: 15px;
    }

    .book-appointment-form-box {
        padding: 30px 20px;
    }

    .post-item {
        padding: 20px;
    }

        .post-item .post-item-btn {
            margin-top: 15px;
            padding-top: 15px;
        }

        .post-item .post-item-content h2 {
            font-size: 18px;
        }

    .about-footer {
        padding: 20px;
    }

    .footer-links {
        max-width: 100%;
    }

    .footer-service-links {
        order: 3;
    }

    .footer-support-links {
        order: 2;
    }

    .footer-links h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-copyright-text {
        padding: 15px 0;
    }

    .page-header-box h1 {
        font-size: 28px;
    }

    .approach-image img {
        aspect-ratio: 1 / 0.6;
    }

    .approach-item-list {
        padding: 20px;
    }

    .approach-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .approach-item-content {
        width: 100%;
    }

        .approach-item-content h3 {
            font-size: 18px;
        }

    .benefits-item {
        gap: 20px;
        padding: 20px;
    }

        .benefits-item .icon-box {
            margin-bottom: 20px;
        }

    .benefit-item-content h2 {
        font-size: 18px;
    }

    .benefit-item-list {
        padding-top: 20px;
    }

    .intro-video-body {
        padding: 80px 0 60px;
    }

    .intro-video-content {
        margin-top: 30px;
    }

    .intro-video-contact-list {
        gap: 20px;
    }

    .intro-video-contact-title h2 {
        font-size: 22px;
    }

    .intro-video-contact-item {
        width: 100%;
    }

        .intro-video-contact-item::before {
            display: none;
        }

    .intro-video-contact-content h3 {
        font-size: 18px;
    }

    .team-item {
        min-height: auto;
        padding: 0;
    }

    .team-item-content h2 {
        font-size: 18px;
    }

    .team-item:hover .team-social-list {
        margin-bottom: 20px;
    }

    .page-category-list .page-category-list-title {
        font-size: 18px;
    }

    .sidebar-cta-box {
        min-height: 380px;
    }

    .sidebar-cta-contact-item {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .sidebar-cta-contact-item-content h2 {
        font-size: 16px;
    }

    .page-single-image img {
        aspect-ratio: 1 / 0.68;
    }

    .page-single-image {
        margin-bottom: 20px;
    }

    .service-entry h2 {
        font-size: 26px;
    }

    .service-entry h3 {
        font-size: 18px;
    }

    .service-entry ul {
        gap: 10px;
        margin-top: 20px;
    }

        .service-entry ul li {
            width: 100%;
        }

    .service-benefit-box h3 {
        font-size: 22px;
    }

    .service-focus-item {
        gap: 20px;
    }

    .service-focus-image,
    .service-focus-content-box {
        width: 100%;
    }

    .service-process-item-list,
    .service-process-video-image {
        width: 100%;
    }

    .service-process-item {
        margin-bottom: 20px;
    }

    .service-process-video-image figure,
    .service-process-video-image figure img {
        height: auto;
    }

    .post-single-meta ol li,
    .post-single-meta ol li i {
        font-size: 16px;
    }

    .post-image img {
        aspect-ratio: 1 / 0.7;
    }

    .post-entry blockquote {
        padding: 65px 20px 20px 20px;
    }

        .post-entry blockquote p {
            font-size: 16px;
        }

    .post-entry h2 {
        font-size: 26px;
    }

    .tag-links {
        font-size: 18px;
    }

    .case-study-entry h2 {
        font-size: 26px;
    }

    .case-study-entry h3 {
        font-size: 18px;
    }

    .case-study-entry ul {
        gap: 10px;
    }

        .case-study-entry ul li {
            width: 100%;
        }

    .case-study-approach-list ul {
        gap: 15px;
    }

    .case-study-results-body {
        padding: 20px;
    }

    .case-study-result-item {
        width: 100%;
    }

    .case-study-result-list {
        margin-top: 20px;
        padding-top: 20px;
    }

    .case-study-challenge-item {
        width: 100%;
    }

    .team-single-image img {
        aspect-ratio: 1 / 1.1;
    }

    .team-contact-list-box {
        padding: 20px;
    }

    .team-contact-list-box-title {
        margin-bottom: 20px;
    }

        .team-contact-list-box-title h3 {
            font-size: 22px;
        }

    .team-contact-list-item {
        gap: 20px;
    }

    .team-contact-item {
        width: 100%;
    }

    .team-contact-item-content h3 {
        font-size: 18px;
    }

    .member-skill-list .skill-progress {
        height: 10px;
    }

    .member-experience-item {
        width: 100%;
        padding: 15px;
    }

        .member-experience-item h3 {
            font-size: 18px;
        }

    .contact-info-list-title {
        margin-bottom: 20px;
    }

        .contact-info-list-title h3 {
            font-size: 22px;
        }

    .contact-info-item {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .contact-info-item-content h3 {
        font-size: 18px;
    }

    .contact-us-form {
        padding: 20px;
    }

    .google-map-iframe {
        height: 350px;
    }

    .working-hour-box h3 {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .working-hour-box ul li {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

        .working-hour-box ul li span {
            font-size: 16px;
        }
}

/************************************/
/***   35. Home - Version 2 css   ***/
/************************************/

header.main-header.main-header-gold .header-sticky {
    border-bottom: none;
}

header.main-header.main-header-gold .main-menu .nav-menu-wrapper > ul {
    background: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 5px;
    padding: 0px 15px;
}

    header.main-header.main-header-gold .main-menu .nav-menu-wrapper > ul > li > a {
        padding: 20px 10px !important;
    }

header.main-header.main-header-gold .main-menu ul ul {
    border-radius: 0 0 20px 20px;
}

.hero-gold {
    position: relative;
    align-content: center;
    border-radius: 20px;
    margin: 0 15px;
    overflow: hidden;
    padding: 0;
}

    .hero-gold::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(270deg, transparent 26.4%, rgba(39, 69, 67, 0.85) 62.54%);
        width: 100%;
        height: 100%;
        z-index: 1;
        background: linear-gradient(180deg, rgba(34, 34, 34, 0.58) 12%, #00000069 40.63%), linear-gradient(180deg, transparent 29.87%, rgba(34, 34, 34, 0.5) 81.81%);
    }

    .hero-gold.hero-video-gold .hero-bg-video-gold {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }

        .hero-gold.hero-video-gold .hero-bg-video-gold video {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

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

.hero-box-gold {
    min-height: 100vh;
    align-content: center;
    padding: 240px 0 0px;
}

.hero-info-box-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.hero-item-list-gold {
    width: calc(50% - 15px);
}

.hero-item-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .hero-item-gold:last-child {
        margin-bottom: 0;
    }

    .hero-item-gold .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .hero-item-gold .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .hero-item-gold:hover .icon-box::before {
        transform: scale(1);
    }

    .hero-item-gold .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

    .hero-item-gold:hover .icon-box img {
        filter: brightness(0) invert(0);
    }

.hero-item-content-gold {
    width: calc(100% - 65px);
}

    .hero-item-content-gold h2 {
        font-size: 20px;
        line-height: 1.4em;
        color: var(--white-color);
    }

.hero-info-list-gold {
    width: calc(50% - 15px);
    border-left: 1px solid var(--dark-divider-color);
    padding-left: 30px;
}

    .hero-info-list-gold ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .hero-info-list-gold ul li {
            position: relative;
            color: var(--white-color);
            font-weight: 500;
            line-height: 1.5em;
            margin-bottom: 15px;
            padding-left: 25px;
        }

            .hero-info-list-gold ul li:last-child {
                margin-bottom: 0;
            }

            .hero-info-list-gold ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-secondary-color);
                top: 0;
                left: 0;
            }

.hero-btn-gold {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.our-scrolling-ticker-gold {
    position: relative;
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 30px 0;
    z-index: 1;
}

.scrolling-ticker-box-gold {
    --gap: 30px;
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
}

.scrolling-content-gold {
    flex-shrink: 0;
    display: flex;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll 80s linear infinite;
}

    .scrolling-content-gold span {
        display: inline-flex;
        align-items: center;
        gap: var(--gap);
        font-family: var(--accent-font);
        font-size: 30px;
        font-weight: 500;
        line-height: 1.1em;
        color: var(--white-color);
        text-transform: capitalize;
    }

        .scrolling-content-gold span img {
            width: 100%;
            max-width: 30px;
            animation: infiniterotate 30s infinite linear;
        }

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.about-us-gold {
    padding: 120px 0;
}

.about-us-image-box-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
}

.about-us-image-box-1-gold {
    position: relative;
    width: 65%;
    padding: 80px 0 30px 0;
    background-image: url('../images/about-us-bg-image-gold.png');
    background-position: top left 70px;
    background-repeat: no-repeat;
    background-size: auto;
}

.about-us-image-1-gold {
    position: relative;
    padding: 6px 6px 0 0;
    background: var(--secondary-color);
    clip-path: polygon(0 0, 75% 0, 100% 20%, 100% 100%, 0 100%);
    border-radius: 20px;
    margin-left: auto;
    z-index: 2;
}

    .about-us-image-1-gold figure {
        display: block;
        clip-path: polygon(0 0, 75% 0, 100% 20%, 100% 100%, 0 100%);
    }

        .about-us-image-1-gold figure img {
            width: 100%;
            aspect-ratio: 1 / 1.121;
            object-fit: cover;
            border-radius: 10px;
        }

.about-us-image-box-2-gold {
    width: 35%;
}

.about-us-image-2-gold {
    margin-left: -230px;
}

    .about-us-image-2-gold figure {
        display: block;
        border-radius: 20px;
    }

        .about-us-image-2-gold figure img {
            width: 100%;
            aspect-ratio: 1 / 1.246;
            object-fit: cover;
            border-radius: 20px;
        }

.about-us-counter-box-gold {
    background: var(--accent-color);
    border-radius: 20px;
    margin: 20px 0 0 10px;
    padding: 80px 20px 20px;
}

    .about-us-counter-box-gold h2 {
        font-size: 34px;
        color: var(--white-color);
    }

    .about-us-counter-box-gold p {
        font-size: 20px;
        font-weight: 500;
        color: var(--white-color);
        margin: 5px 0 0;
    }

.about-us-body-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.about-us-item-gold {
    width: calc(68% - 15px);
    background: var(--white-color);
    border-radius: 20px;
    padding: 30px;
}

.about-us-item-header-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .about-us-item-header-gold .icon-box {
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

        .about-us-item-header-gold .icon-box img {
            width: 100%;
            max-width: 24px;
        }

.about-us-item-title-gold {
    width: calc(100% - 65px);
}

    .about-us-item-title-gold h3 {
        font-size: 20px;
    }

.about-us-item-content-gold p {
    margin: 0;
}

.about-us-item-content-gold ul {
    list-style: none;
    border-top: 1px solid var(--divider-color);
    margin: 30px 0 0 0;
    padding: 30px 0 0 0;
}

    .about-us-item-content-gold ul li {
        position: relative;
        line-height: 1.5em;
        padding-left: 25px;
        margin-bottom: 15px;
    }

        .about-us-item-content-gold ul li:last-child {
            margin-bottom: 0;
        }

        .about-us-item-content-gold ul li::before {
            content: '\f058';
            position: absolute;
            font-family: 'Font Awesome 7 Free';
            top: 0;
            left: 0;
            font-size: 18px;
            font-weight: 900;
            color: var(--accent-color);
        }

.experience-circle-gold img {
    width: 100%;
    max-width: 130px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0;
    animation: infiniterotate-gold 20s infinite linear;
}

@keyframes infiniterotate-gold {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.about-us-body-gold .experience-circle-gold {
    width: calc(32% - 15px);
    text-align: center;
}

.about-us-footer-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
    border-top: 1px solid var(--divider-color);
    padding-top: 40px;
    margin-top: 40px;
}

.about-client-box-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

    .about-client-box-gold .satisfy-client-image.add-more {
        background-color: var(--accent-secondary-color);
    }

.about-client-content-gold {
    max-width: 175px;
}

    .about-client-content-gold p {
        margin: 0;
    }

.our-services-gold {
    /*! background-image: url(../images/our-services-bg-image.png); */
    /*! background-position: bottom center; */
    background-size: auto;
    padding: 0px 0;
    background-color: #ffff;
}

.service-item-gold {
    position: relative;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    transition: all 0.5s ease-in-out;
}

    .service-item-gold:hover {
        transform: translateY(-5px);
    }

.service-item-header-gold .icon-box {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 30px;
}

    .service-item-header-gold .icon-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white-color);
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.service-item-gold:hover .service-item-header-gold .icon-box::before {
    transform: scale(1);
}

.service-item-header-gold .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.service-item-gold:hover .service-item-header-gold .icon-box img {
    filter: brightness(0) invert(0);
}

.service-item-content-gold h2 {
    color: var(--white-color);
    font-size: 20px;
}

    .service-item-content-gold h2 a {
        color: inherit;
    }

.service-item-content-gold p {
    color: var(--white-color);
    margin: 10px 0 0 0;
}

.service-item-btn-gold {
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 30px;
}

.why-choose-us-gold {
    padding: 120px 0;
}

.why-choose-image-box-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
}

.why-choose-image-box-1-gold {
    position: relative;
    width: 73%;
    padding-bottom: 50px;
}

.why-choose-image-gold figure {
    display: block;
    border-radius: 20px;
}

    .why-choose-image-gold figure img {
        width: 100%;
        object-fit: cover;
        border-radius: 20px;
    }

.why-choose-image-box-1-gold .why-choose-image-gold figure img {
    aspect-ratio: 1 / 1.36;
}

.why-choose-image-box-gold .experience-circle-gold {
    position: absolute;
    top: 10px;
    right: 0;
    transform: translateX(50%);
    border: 6px solid var(--secondary-color);
    border-radius: 50%;
    z-index: 1;
}

.why-choose-image-box-2-gold {
    width: 27%;
    z-index: 1;
}

    .why-choose-image-box-2-gold .why-choose-image-gold {
        margin-left: -220px;
    }

        .why-choose-image-box-2-gold .why-choose-image-gold figure {
            border: 6px solid #15999b8c;
        }

            .why-choose-image-box-2-gold .why-choose-image-gold figure img {
                aspect-ratio: 1 / 1.08;
                border-radius: 10px;
            }

.why-choose-content-box-gold {
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 40px;
}

.why-choose-body-content-gold {
    width: calc(51% - 15px);
    align-content: center;
}

.why-choose-item-gold {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 30px;
}

    .why-choose-item-gold:last-child {
        margin-bottom: 0;
    }

    .why-choose-item-gold .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .why-choose-item-gold .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .why-choose-item-gold:hover .icon-box::before {
        transform: scale(1);
    }

    .why-choose-item-gold .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.why-choose-item-content-gold {
    width: calc(100% - 65px);
}

    .why-choose-item-content-gold h3 {
        font-size: 20px;
    }

    .why-choose-item-content-gold p {
        margin: 10px 0 0 0;
    }

.why-choose-body-gold {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
    margin-top: 30px;
}

.why-choose-skills-bar-gold .skill-progress {
    background-color: var(--bg-color);
}

.google-rating-box-gold {
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.google-rating-header-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .google-rating-header-gold .icon-box img {
        width: 100%;
        max-width: 40px;
    }

.google-rating-info-gold {
    width: calc(100% - 55px);
}

    .google-rating-info-gold h3 {
        font-size: 26px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

.google-review-star-gold {
    display: flex;
    margin-left: 10px;
}

    .google-review-star-gold i {
        font-size: 20px;
        color: var(--accent-secondary-color);
    }

.google-rating-content-gold p {
    margin: 0;
}

.why-choose-body-image-gold {
    width: calc(49% - 15px);
}

    .why-choose-body-image-gold figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

        .why-choose-body-image-gold figure img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1.06;
            object-fit: cover;
            border-radius: 20px;
        }

.interactive-process-layout-gold {
    overflow: hidden;
}

    .interactive-process-layout-gold .interactive-process-item-gold {
        position: relative;
        width: 25%;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        border-right: 1px solid var(--dark-divider-color);
        -ms-transition: all .5s ease;
        -o-transition: all .5s ease;
        -moz-transition: all .5s ease;
        -webkit-transition: all .5s ease;
        transition: all .5s ease;
        overflow: hidden;
        z-index: 1;
    }

    .interactive-process-layout-gold .interactive-inner-process-gold {
        position: relative;
        height: 100%;
        padding: 585px 0 0;
        transition: all 0.4s ease-in-out;
        z-index: 3;
    }

    .interactive-process-layout-gold .interactive-process-item-gold:nth-child(4n + 4) .interactive-inner-process-gold {
        border-right: none;
    }

.process-content-wap-gold {
    position: relative;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.interactive-process-item-wap-gold {
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transform: translateY(65px);
    padding: 40px;
    transition: all 0.4s ease-in-out;
}

.interactive-process-layout-gold .interactive-inner-process-gold.activate .interactive-process-item-wap-gold,
.interactive-process-layout-gold .interactive-process-item-gold:hover .interactive-process-item-wap-gold {
    transform: translateY(0px);
}

.interactive-process-item-wap-gold .icon-box {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    overflow: hidden;
}

    .interactive-process-item-wap-gold .icon-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--white-color);
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.interactive-inner-process-gold.activate .interactive-process-item-wap-gold .icon-box::before {
    transform: scale(1);
}

.interactive-process-item-wap-gold .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.interactive-inner-process-gold.activate .interactive-process-item-wap-gold .icon-box img {
    filter: brightness(0) invert(0);
}

.interactive-process-item-content-wap-gold h3 {
    font-size: 20px;
    color: var(--white-color);
    line-height: 1.4em
}

    .interactive-process-item-content-wap-gold h3 a {
        color: inherit;
    }

.interactive-process-item-btn-gold {
    opacity: 0;
    visibility: hidden;
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 25px;
    margin-top: 25px;
    transition: all 0.4s ease-in-out;
}

    .interactive-process-item-btn-gold .readmore-btn {
        color: var(--white-color);
    }

        .interactive-process-item-btn-gold .readmore-btn::before {
            filter: brightness(0) invert(1);
        }

.interactive-process-layout-gold .interactive-inner-process-gold.activate .interactive-process-item-btn-gold,
.interactive-process-layout-gold .interactive-process-item-gold:hover .interactive-process-item-btn-gold {
    opacity: 1;
    visibility: visible;
}

.interactive-process-layout-gold .interactive-con {
    position: relative;
    padding-bottom: 0 !important;
    z-index: 1;
}

.interactive-process-layout-gold .interactive-con-inner {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    z-index: 2;
}

    .interactive-process-layout-gold .interactive-con-inner:before {
        content: "";
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
        z-index: 1;
    }

.interactive-process-layout-gold .interactive-process-list-image-gold {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden;
}

    .interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        opacity: 0;
        z-index: -1;
        -ms-transition: all .7s ease;
        -o-transition: all .7s ease;
        -moz-transition: all .7s ease;
        -webkit-transition: all .7s ease;
        transition: all .7s ease
    }

        .interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold:first-child {
            z-index: 1
        }

        .interactive-process-layout-gold .interactive-process-list-image-gold .interactive-process-image-gold.show {
            opacity: 1;
            z-index: 2;
            -ms-transform: scale(1.05);
            -o-transform: scale(1.05);
            -moz-transform: scale(1.05);
            -webkit-transform: scale(1.05);
            transform: scale(1.05)
        }

.our-features-gold {
    padding: 0 0 50px 0;
    background-color: #fff;
}

    .our-features-gold .section-row .section-title.section-title-center {
        max-width: 855px;
    }

.core-feature-title-image-gold img {
    width: 100px;
    height: 44px;
    border-radius: 100px;
}

.feature-item-gold {
    background: #ecf8fb;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 40px;
    border: 1px solid #c7e4ea;
}

.feature-item-content-gold h3 {
    font-size: 20px;
    line-height: 1.4em;
}

.feature-item-counter-content-gold h2 {
    font-size: 48px;
}

.feature-item-counter-content-gold p {
    margin: 0px 0 0;
}

.feature-box-image-gold {
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

    .feature-box-image-gold figure {
        display: block;
        height: 100%;
    }

        .feature-box-image-gold figure img {
            width: 100%;
            height: 100%;
            aspect-ratio: 1 / 1.116;
            object-fit: cover;
        }

.feature-item-header-gold .icon-box {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 30px;
}

    .feature-item-header-gold .icon-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--primary-color);
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.feature-item-gold:hover .feature-item-header-gold .icon-box::before {
    transform: scale(1);
}

.feature-item-header-gold .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.feature-item-content-gold h3 {
    font-size: 20px;
}

.feature-item-content-gold p {
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
    margin: 20px 0 0;
}

.feature-item-list-gold {
    border-top: 1px solid var(--divider-color);
    padding-top: 30px;
}

    .feature-item-list-gold ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
    }

        .feature-item-list-gold ul li {
            display: inline-block;
            border: 1px solid var(--divider-color);
            font-size: 14px;
            font-weight: 500;
            color: var(--primary-color);
            border-radius: 100px;
            line-height: normal;
            padding: 7px 15px;
            transition: all 0.4s ease-in-out;
        }

.feature-footer-box-gold {
    margin-top: 30px;
}

.feature-benefit-list-gold ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px 30px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

    .feature-benefit-list-gold ul li {
        position: relative;
        font-weight: 500;
        background: var(--white-color);
        color: var(--primary-color);
        padding: 12px 16px 12px 32px;
        border-radius: 100px;
        transition: all 0.4s ease-in-out;
    }

        .feature-benefit-list-gold ul li:hover {
            background: var(--primary-color);
            color: var(--white-color);
        }

        .feature-benefit-list-gold ul li::before {
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 6px;
            height: 6px;
        }

.how-we-work-gold {
    padding: 120px 0;
}

.how-work-item-list-gold {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.how-work-item-gold {
    width: calc(33.33% - 20px);
    transition: all 0.5s ease-in-out;
}

    .how-work-item-gold:hover {
        transform: translateY(-5px);
    }

.how-work-item-no-gold {
    position: relative;
    text-align: center;
    margin-bottom: 65px;
}

    .how-work-item-no-gold h2 {
        position: relative;
        font-size: 16px;
        line-height: normal;
        display: inline-block;
        border: 1px solid var(--divider-color);
        border-radius: 100px;
        padding: 8px 30px;
        z-index: 1;
        transition: all 0.4s ease-in-out;
    }

        .how-work-item-no-gold h2:before {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            background: var(--divider-color);
            width: 1px;
            height: 100%;
            transform: translate(-50%, 100%);
        }

.how-work-item-content-box-gold {
    position: relative;
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 50%, var(--bg-color) 100%);
    background-size: 200% auto;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 25px;
    padding: 40px;
    min-height: 420px;
    transition: all 0.4s ease-in-out;
}

.how-work-item-gold:hover .how-work-item-content-box-gold {
    background-position: right center;
}

.how-work-item-content-box-gold:before {
    content: '';
    position: absolute;
    background-color: var(--accent-secondary-color);
    border: 18px solid var(--white-color);
    border-radius: 50%;
    height: 50px;
    width: 50px;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

.how-work-item-header-gold .icon-box {
    position: relative;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-secondary-color);
    border-radius: 50%;
    margin-bottom: 30px;
    z-index: 1;
}

    .how-work-item-header-gold .icon-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--primary-color);
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.how-work-item-content-box-gold:hover .icon-box::before {
    transform: scale(1);
}

.how-work-item-header-gold .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.how-work-item-content-gold h2 {
    font-size: 20px;
}

.how-work-item-content-gold p {
    margin: 10px 0 0;
}

.how-work-item-content-list-gold {
    border-top: 1px solid var(--divider-color);
    padding-top: 25px;
}

    .how-work-item-content-list-gold ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .how-work-item-content-list-gold ul li {
            position: relative;
            line-height: 1.5em;
            padding-left: 25px;
            margin-bottom: 15px;
        }

            .how-work-item-content-list-gold ul li:last-child {
                margin-bottom: 0;
            }

            .how-work-item-content-list-gold ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-color);
                top: 0;
                left: 0;
            }

.how-we-work-gold .section-footer-text {
    margin-top: 60px;
}

.our-benefits-gold {
    padding: 120px 0;
}

.benefit-content-gold {
    margin-right: 15px;
}

.benefit-image-gold figure {
    display: block;
    border-radius: 20px;
}

.benefit-image-gold img {
    width: 100%;
    aspect-ratio: 1 / 0.497;
    object-fit: cover;
    border-radius: 20px;
}

.benefit-body-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

    .benefit-body-gold h2 {
        font-size: 48px;
        width: 140px;
    }

    .benefit-body-gold p {
        width: calc(100% - 160px);
        margin: 0;
    }

.benefit-satisfaction-box-gold {
    position: relative;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 60px;
    overflow: hidden;
}

    .benefit-satisfaction-box-gold:before {
        content: '';
        position: absolute;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 300px;
        background: linear-gradient(180deg, transparent 0%, var(--white-color) 43.86%);
        border-radius: 20px;
        z-index: 1;
    }

.benefit-satisfaction-body-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

.benefit-satisfaction-content-gold {
    width: 48%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 265px;
}

.benefit-satisfaction-title-gold h3 {
    font-size: 20px;
}

.benefit-satisfaction-counter-gold h2 {
    font-size: 52px;
}

.benefit-satisfaction-counter-gold p {
    margin: 10px 0 0;
}

.benefit-satisfaction-image-gold {
    width: 52%;
}

    .benefit-satisfaction-image-gold figure {
        display: block;
        text-align: right;
        border-radius: 20px;
        margin: 0px -60px -60px 0px;
    }

    .benefit-satisfaction-image-gold img {
        width: 100%;
        max-width: 320px;
        aspect-ratio: 1 / 1.3;
        object-fit: cover;
        border-radius: 20px;
    }

.benefit-scrolling-ticker-box-gold {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
    z-index: 1;
}

.benefit-scrolling-ticker-item-gold {
    --gap: 25px;
    position: relative;
    display: flex;
    overflow: hidden;
    user-select: none;
    gap: var(--gap);
    align-items: center;
    width: calc(100% + 120px);
    left: -60px;
    transition: all 0.4s ease-in-out;
}

.benefit-scrolling-ticker-content-gold {
    flex-shrink: 0;
    display: flex;
    gap: var(--gap);
    min-width: 100%;
    animation: scroll 60s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-100% - var(--gap)));
    }
}

.benefit-scrolling-ticker-item-gold.scroll-reverse .benefit-scrolling-ticker-content-gold {
    animation-direction: reverse;
}

.benefit-scrolling-ticker-content-gold span {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5em;
    text-transform: capitalize;
    color: var(--primary-color);
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 8px 16px 8px 32px;
    transition: all 0.4s ease-in-out;
}

    .benefit-scrolling-ticker-content-gold span:before {
        content: '';
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: 16px;
        background-color: var(--accent-secondary-color);
        border-radius: 50%;
        height: 6px;
        width: 6px;
    }

    .benefit-scrolling-ticker-content-gold span:hover {
        background-color: var(--primary-color);
        color: var(--white-color);
    }

.benefit-scrolling-ticker-item-gold:hover .benefit-scrolling-ticker-content-gold {
    animation-play-state: paused;
}

.our-testimonials-gold {
    padding: 120px 0;
}

.testimonial-slider-gold {
    height: 100%;
}

    .testimonial-slider-gold .swiper {
        padding-bottom: 50px;
        height: 100%;
    }

    .testimonial-slider-gold .swiper-wrapper {
        height: 100%;
        cursor: none;
    }

        .testimonial-slider-gold .swiper-wrapper .swiper-slide .testimonial-item-gold {
            transform: scale(0.95);
            transition: all 0.6s ease-in-out;
        }

        .testimonial-slider-gold .swiper-wrapper .swiper-slide.swiper-slide-next .testimonial-item-gold {
            transform: scale(1);
        }

.testimonial-item-gold {
    position: relative;
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-radius: 20px;
    min-height: 490px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 40px;
    height: 100%;
}

.testimonial-quote-gold {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

    .testimonial-quote-gold img {
        width: 100%;
        max-width: 100px;
    }

.testimonial-item-rating-gold {
    margin-bottom: 20px;
}

    .testimonial-item-rating-gold i {
        color: var(--accent-secondary-color);
    }

.testimonial-item-content-gold p {
    color: var(--white-color);
    font-family: var(--accent-font);
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}

.testimonial-author-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--dark-divider-color);
    padding-top: 40px;
}

.testimonial-author-image-gold figure {
    display: block;
    border-radius: 50%;
}

    .testimonial-author-image-gold figure img {
        width: 100%;
        max-width: 50px;
        border-radius: 50%;
    }

.testimonial-author-content-gold {
    width: calc(100% - 65px);
}

    .testimonial-author-content-gold h2 {
        color: var(--white-color);
        font-size: 20px;
    }

    .testimonial-author-content-gold p {
        color: var(--white-color);
        line-height: normal;
        margin: 5px 0 0;
    }

.testimonial-slider-gold .testimonials-pagination-gold {
    position: absolute;
    bottom: 0px;
    text-align: center;
}

    .testimonial-slider-gold .testimonials-pagination-gold .swiper-pagination-bullet {
        position: relative;
        height: 10px;
        width: 10px;
        background: #0000003d;
        margin: 0 4px;
        opacity: 1;
        transition: all 0.3s ease-in-out;
    }

    .testimonial-slider-gold .testimonials-pagination-gold .swiper-pagination-bullet-active {
        background: #15999b;
        width: 34px;
        border-radius: 100px;
    }

.our-testimonials-gold .section-footer-text {
    margin-top: 40px;
}

.our-pricing-gold {
    padding: 120px 0;
}

.our-pricing-swich-gold {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 60px;
    padding: 0;
}

    .our-pricing-swich-gold .form-check-label {
        color: var(--primary-color);
        font-family: var(--accent-font);
        font-size: 20px;
        font-weight: 500;
        cursor: pointer;
    }

    .our-pricing-swich-gold.form-switch .form-check-input {
        width: 80px;
        height: 40px;
        --bs-form-check-bg: var(--accent-secondary-color);
        --bs-form-switch-bg: url('../images/pricing-swich-circle.svg');
        background-size: 28px auto;
        background-position: left 5px center;
        border-radius: 100px;
        border: none;
        outline: none;
        box-shadow: none;
        cursor: pointer;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }

.form-switch .form-check-input:checked {
    background-color: var(--accent-color);
    background-position: right 5px center;
}

.pricing-item-gold {
    background-color: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
}

.pricing-item-header-gold {
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-radius: 14px;
    padding: 30px;
}

.pricing-item-content-gold h2 {
    display: inline-block;
    font-size: 16px;
    line-height: normal;
    border: 1px solid var(--divider-color);
    border-radius: 100px;
    padding: 6px 20px;
    margin-bottom: 15px;
}

.pricing-item-content-gold p {
    margin: 0;
}

.pricing-item-price-gold {
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

    .pricing-item-price-gold h2 {
        font-size: 34px;
    }

    .pricing-item-price-gold sub {
        font-size: 16px;
        bottom: 0;
    }

.pricing-item-body-gold {
    padding: 30px;
}

.pricing-item-list-gold h3 {
    font-size: 16px;
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}


.pricing-item-list-gold ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .pricing-item-list-gold ul li {
        position: relative;
        line-height: 1.5em;
        padding-left: 25px;
        margin-bottom: 15px;
    }

        .pricing-item-list-gold ul li:last-child {
            margin-bottom: 0;
        }

        .pricing-item-list-gold ul li::before {
            content: '\f058';
            position: absolute;
            font-family: 'Font Awesome 7 Free';
            top: 0;
            left: 0;
            font-size: 18px;
            font-weight: 900;
            color: var(--accent-color);
        }

.pricing-item-btn-gold {
    margin-top: 30px;
}

.pricing-benefit-list-gold {
    margin-top: 30px;
}

    .pricing-benefit-list-gold ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 20px 40px;
    }

        .pricing-benefit-list-gold ul li {
            display: inline-flex;
            align-items: center;
            color: var(--primary-color);
        }

            .pricing-benefit-list-gold ul li img {
                width: 100%;
                max-width: 20px;
                margin-right: 15px;
            }

.our-faqs-gold {
    position: relative;
    background-image: url('../images/faqs-bg-image-gold.png');
    background-color: var(--primary-color);
    padding: 120px 0;
}

    .our-faqs-gold:before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background: url('../images/faqs-bg-image-1-gold.png');
        background-repeat: no-repeat;
        background-position: center center;
        width: 720px;
        height: 370px;
        background-size: cover;
    }

    .our-faqs-gold .container {
        position: relative;
        z-index: 1;
    }

.faqs-content-gold {
    position: sticky;
    top: 30px;
}

.faq-accordion-gold {
    background: var(--dark-divider-color);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border-radius: 20px;
    padding: 20px;
}

    .faq-accordion-gold .accordion-item {
        position: relative;
        background: var(--dark-divider-color);
        border-radius: 14px;
        margin-bottom: 25px;
        overflow: hidden;
    }

        .faq-accordion-gold .accordion-item:last-child {
            margin-bottom: 0;
        }

    .faq-accordion-gold .accordion-header .accordion-button {
        font-size: 18px;
        font-weight: 500;
        line-height: 1.333em;
        background: transparent;
        color: var(--white-color);
        padding: 24px 55px 24px 24px;
        transition: all 0.4s ease-in-out;
    }

    .faq-accordion-gold .accordion-item .accordion-button::after,
    .faq-accordion-gold .accordion-item .accordion-button.collapsed::after {
        content: '\f078';
        font-family: 'FontAwesome';
        position: absolute;
        right: 24px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 20px;
        color: var(--white-color);
        line-height: normal;
        transition: all 0.3s ease-in-out;
    }

    .faq-accordion-gold .accordion-button:not(.collapsed)::after {
        transform: translateY(-50%) rotate(180deg);
    }

    .faq-accordion-gold .accordion-item .accordion-body {
        border-top: 1px solid var(--dark-divider-color);
        padding: 24px;
    }

        .faq-accordion-gold .accordion-item .accordion-body p {
            color: var(--white-color);
            margin-bottom: 15px;
        }

            .faq-accordion-gold .accordion-item .accordion-body p:last-child {
                margin: 0;
            }

.main-footer-gold {
    padding: 50px 0 0px 0;
    margin-bottom: 0;
    background-color: #eef7f7;
    background: linear-gradient(135deg, #15999b, #114c5c);
    border-top: solid 1px #15999b63;
}

.footer-logo-gold img {
    width: 100%;
    max-width: 297px;
}

.about-footer-content-gold {
    margin-top: 20px;
}

    .about-footer-content-gold p {
        color: #fff;
        margin-bottom: 0;
    }

.footer-working-hour-box-gold {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

    .footer-working-hour-box-gold h2 {
        color: var(--white-color);
        font-size: 20px;
        margin-bottom: 30px;
    }

    .footer-working-hour-box-gold ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .footer-working-hour-box-gold ul li {
            color: var(--white-color);
            line-height: 1.4em;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 20px;
        }

            .footer-working-hour-box-gold ul li:last-child {
                margin-bottom: 0;
            }

            .footer-working-hour-box-gold ul li span {
                font-weight: 500;
            }

.footer-links-box-gold {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    margin-left: 40px;
}

.footer-links-gold {
    max-width: 38%;
}

    .footer-links-gold h2 {
        font-size: 20px;
        color: #fff;
        margin-bottom: 30px;
    }

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

        .footer-links-gold ul li {
            color: var(--white-color);
            text-transform: capitalize;
            line-height: 1.5em;
            margin-bottom: 8px;
        }

            .footer-links-gold ul li::marker {
                color: #114c5c;
                list-style: none;
            }

            .footer-links-gold ul li:last-child {
                margin-bottom: 0;
            }

            .footer-links-gold ul li a {
                color: inherit;
                transition: all 0.3s ease-in-out;
                color: #fff;
            }

                .footer-links-gold ul li a:hover {
                    color: var(--accent-secondary-color);
                }

            .footer-links-gold ul li.footer-policy-view-all {
                margin-top: 14px;
            }

                .footer-links-gold ul li.footer-policy-view-all a {
                    display: inline-flex;
                    align-items: center;
                    justify-content: center;
                    min-height: 38px;
                    padding: 8px 16px;
                    border: 1px solid rgba(255,255,255,.35);
                    border-radius: 8px;
                    font-weight: 600;
                    text-transform: none;
                }

                    .footer-links-gold ul li.footer-policy-view-all a:hover {
                        background: #fff;
                        color: #114c5c;
                    }

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

        .footer-links-gold.footer-contact-list-gold ul li {
            display: flex;
            align-items: center;
            gap: 5px 10px;
            border-bottom: 1px solid var(--dark-divider-color);
            margin-bottom: 20px;
            padding-bottom: 20px;
        }

            .footer-links-gold.footer-contact-list-gold ul li:last-child {
                margin-bottom: 0;
                padding-bottom: 0;
                border-bottom: none;
            }

            .footer-links-gold.footer-contact-list-gold ul li img {
                width: 100%;
                max-width: 24px;
            }

.footer-copyright-gold {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--dark-divider-color);
    padding: 40px 0;
    margin-top: 50px;
}

.footer-copyright-text p {
    color: var(--white-color);
    margin: 0;
}

.footer-copyright-text-gold p {
    color: #fff;
    margin-bottom: 0;
}

.footer-social-links-gold {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
}

    .footer-social-links-gold h2 {
        font-size: 16px;
        color: #fff;
    }

    .footer-social-links-gold ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 20px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .footer-social-links-gold ul li a {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 500;
            color: #fff;
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-radius: 5px;
            padding: 10px 16px;
            transition: all 0.4s ease-in-out;
            background: linear-gradient(135deg, #0d6477, #18a7b8);
            color: #fff;
            box-shadow: 0 16px 32px rgba(24, 167, 184, 0.25);
        }

            .footer-social-links-gold ul li a:hover {
                background: var(--accent-secondary-color);
            }

            .footer-social-links-gold ul li a i {
                font-size: 20px;
                line-height: normal;
                color: inherit;
            }

@media only screen and (max-width: 1366px) {

    .interactive-process-layout-gold .interactive-inner-process-gold {
        padding: 485px 0 0;
    }
}

@media only screen and (max-width: 1024px) {

    .hero-box-gold {
        min-height: 750px;
    }

    .hero-btn-gold {
        margin-top: 30px;
        padding-top: 30px;
    }

    .about-us-image-box-gold {
        max-width: 615px;
        margin: 0 auto 30px;
    }

    .service-item-gold {
        min-height: auto;
        padding: 30px;
    }

    .why-choose-image-box-gold {
        max-width: 615px;
        margin: 0 auto 30px;
    }

    .why-choose-body-content-gold {
        width: calc(60% - 15px);
    }

    .why-choose-body-image-gold {
        width: calc(40% - 15px);
    }

    .interactive-process-layout-gold .interactive-process-item-gold {
        border-bottom: 1px solid var(--dark-divider-color);
        width: 50%;
    }

    .interactive-process-layout-gold .interactive-inner-process-gold {
        padding: 200px 0 0;
        height: auto;
    }

    .interactive-process-item-wap-gold {
        padding: 30px;
    }

        .interactive-process-item-wap-gold .icon-box {
            margin-bottom: 20px;
        }

    .interactive-process-item-btn-gold {
        margin-top: 20px;
        padding-top: 20px;
    }

    .interactive-process-layout-gold .interactive-con-inner-gold:before {
        background-color: var(--primary-color);
        opacity: 50%;
    }

    .feature-box-image-gold figure img {
        aspect-ratio: auto;
    }

    .feature-footer-box-gold {
        margin-top: 10px;
    }

    .how-work-item-gold {
        width: calc(50% - 15px);
    }

    .how-work-item-content-box-gold::before {
        border-width: 15px;
        height: 40px;
        width: 40px;
    }

    .benefit-content-gold {
        margin: 0 0 30px;
    }

    .benefit-body-gold {
        margin-top: 30px;
        padding-top: 30px;
    }

    .benefit-satisfaction-box-gold {
        padding: 30px;
    }

    .benefit-satisfaction-image-gold figure {
        margin: 0px -30px -30px 0px;
    }

    .benefit-scrolling-ticker-box-gold {
        gap: 20px;
    }

    .testimonial-slider-gold .swiper-wrapper .swiper-slide .testimonial-item-gold {
        transform: scale(1);
    }

    .testimonial-item-gold {
        padding: 30px;
        gap: 30px;
        min-height: 390px;
    }

    .testimonial-author-gold {
        padding-top: 30px;
    }

    .faqs-content-gold {
        position: initial;
        margin-bottom: 30px;
    }

    .about-footer-gold {
        margin-bottom: 30px;
    }

    .footer-links-box-gold {
        margin: 0;
    }

    .footer-copyright-gold {
        flex-direction: column-reverse;
        justify-content: center;
        margin-top: 30px;
        padding: 30px 0;
    }
}

@media only screen and (max-width: 991px) {

    .hero-gold {
        margin: 0;
        border-radius: 0;
    }

    .hero-box-gold {
        padding: 150px 0 60px;
    }

    .hero-info-list-gold ul li::before {
        font-size: 16px;
    }

    .our-scrolling-ticker-gold {
        padding: 20px 0;
    }

    .scrolling-ticker-box-gold {
        --gap: 20px;
    }

    .scrolling-content-gold span img {
        max-width: 25px;
    }

    .scrolling-content-gold span {
        font-size: 26px;
    }

    .about-us-gold {
        padding: 60px 0;
    }

    .about-us-item-gold {
        padding: 20px;
    }

    .about-us-counter-box-gold h2 {
        font-size: 30px;
    }

    .about-us-item-content-gold ul {
        margin: 20px 0 0 0;
        padding: 20px 0 0 0;
    }

        .about-us-item-content-gold ul li::before {
            font-size: 16px;
        }

    .experience-circle-gold img {
        max-width: 110px;
    }

    .about-us-footer-gold {
        padding-top: 30px;
        margin-top: 30px;
    }

    .our-services-gold {
        padding: 60px 0;
        background-size: 100% auto;
    }

    .why-choose-us-gold {
        padding: 60px 0;
    }

    .why-choose-content-box-gold {
        padding: 30px;
    }

    .google-rating-info-gold h3 {
        font-size: 22px;
    }

    .google-review-star-gold i {
        font-size: 18px;
    }

    .our-features-gold {
        padding: 60px 0;
    }

    .core-feature-title-image-gold img {
        width: 88px;
        height: 36px;
    }

    .feature-item-gold {
        padding: 30px;
    }

    .feature-item-counter-content-gold h2 {
        font-size: 38px;
    }

    .feature-benefit-list-gold ul {
        gap: 15px;
    }

        .feature-benefit-list-gold ul li {
            font-size: 14px;
            padding: 10px 12px 10px 26px;
        }

            .feature-benefit-list-gold ul li::before {
                left: 12px;
            }

    .our-features-gold .section-footer-text {
        margin-top: 20px;
    }

    .how-we-work-gold {
        padding: 60px 0;
    }

    .how-work-item-no-gold {
        margin-bottom: 35px;
    }

        .how-work-item-no-gold h2 {
            font-size: 14px;
            padding: 5px 20px;
        }

    .how-work-item-content-box-gold {
        min-height: auto;
        padding: 30px;
    }

    .how-work-item-content-list-gold ul li::before {
        font-size: 16px;
    }

    .how-we-work-gold .section-footer-text {
        margin-top: 40px;
    }

    .our-benefits-gold {
        padding: 60px 0;
    }

    .benefit-body-gold h2 {
        font-size: 38px;
        width: 110px;
    }

    .benefit-body-gold p {
        width: calc(100% - 130px);
    }

    .benefit-satisfaction-counter-gold h2 {
        font-size: 40px;
    }

    .benefit-scrolling-ticker-content-gold span {
        padding: 6px 12px 6px 28px;
    }

        .benefit-scrolling-ticker-content-gold span:before {
            left: 12px;
        }

    .our-testimonials-gold {
        padding: 60px 0;
    }

    .testimonial-slider-gold .swiper {
        padding-bottom: 0px;
    }

    .testimonial-item-content-gold p {
        font-size: 18px;
    }

    .our-testimonials-gold .section-footer-text {
        margin-top: 30px;
    }

    .our-pricing-gold {
        padding: 60px 0;
    }

    .our-pricing-swich-gold {
        margin-bottom: 30px;
    }

        .our-pricing-swich-gold.form-switch .form-check-input {
            width: 60px;
            height: 32px;
            background-size: 22px auto;
        }

    .pricing-item-header-gold,
    .pricing-item-body-gold {
        padding: 20px;
    }

    .pricing-item-price-gold {
        margin-top: 20px;
        padding-top: 20px;
    }

        .pricing-item-price-gold h2 {
            font-size: 30px;
        }

    .pricing-item-list-gold ul li {
        margin-bottom: 10px;
    }

        .pricing-item-list-gold ul li:before {
            font-size: 16px;
        }

    .pricing-benefit-list-gold {
        margin-top: 10px;
    }

        .pricing-benefit-list-gold ul {
            gap: 20px 30px;
        }

            .pricing-benefit-list-gold ul li img {
                max-width: 18px;
                margin-right: 10px;
            }

    .our-faqs-gold {
        padding: 60px 0;
    }

        .our-faqs-gold:before {
            right: 0;
            width: 620px;
            height: 270px;
            margin: 0 auto;
        }

    .faq-accordion-gold .accordion-item {
        margin-bottom: 20px;
    }

    .faq-accordion-gold .accordion-header .accordion-button {
        padding: 18px 44px 18px 20px;
    }

    .faq-accordion-gold .accordion-item .accordion-button::after,
    .faq-accordion-gold .accordion-item .accordion-button.collapsed::after {
        right: 20px;
        font-size: 18px;
    }

    .faq-accordion-gold .accordion-item .accordion-body {
        padding: 18px 20px;
    }

    .main-footer-gold {
        padding: 20px 0 0;
        margin: 0;
    }

    .about-footer-content-gold {
        margin-top: 15px;
    }

    .footer-working-hour-box-gold h2,
    .footer-links-gold h2 {
        margin-bottom: 20px;
    }

    .footer-social-links-gold ul li a {
        gap: 5px;
        padding: 10px;
    }

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

    .footer-working-hour-box-gold ul li {
        margin-bottom: 15px;
    }

    .footer-links-gold.footer-contact-list-gold ul li {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }
}

@media only screen and (max-width: 767px) {

    .hero-item-list-gold,
    .hero-item-gold {
        width: 100%;
    }

    .hero-item-content-gold h2 {
        font-size: 18px;
    }

    .hero-info-list-gold {
        width: 100%;
        padding: 30px 0 0;
        border-top: 1px solid var(--dark-divider-color);
        border-left: none;
    }

    .our-scrolling-ticker-gold {
        padding: 15px 0;
    }

    .scrolling-ticker-box-gold {
        --gap: 15px;
    }

    .scrolling-content-gold span img {
        max-width: 20px;
    }

    .scrolling-content-gold span {
        font-size: 22px;
    }

    .about-us-image-box-1-gold {
        width: 60%;
        background-position: top 0px left 45px;
        background-size: 40% auto;
        padding: 50px 0 20px 0;
    }

    .about-us-image-box-2-gold {
        width: 40%;
    }

    .about-us-image-1-gold {
        padding: 3px 3px 0 0;
    }

    .about-us-image-2-gold {
        margin-left: -100px;
    }

    .about-us-counter-box-gold {
        border-radius: 14px;
        margin: 10px 0 0 7px;
        padding: 10px;
    }

        .about-us-counter-box-gold h2 {
            font-size: 26px;
        }

        .about-us-counter-box-gold p {
            font-size: 16px;
        }

    .about-us-item-gold {
        width: 100%;
    }

    .about-us-item-title-gold h3 {
        font-size: 18px;
    }

    .about-us-body-gold .experience-circle-gold {
        display: none;
    }

    .experience-circle-gold img {
        max-width: 90px;
    }

    .service-item-gold {
        padding: 20px;
        gap: 20px;
    }

    .service-item-header-gold .icon-box {
        margin-bottom: 20px;
    }

    .service-item-content-gold h2 {
        font-size: 18px;
    }

    .service-item-btn-gold {
        padding-top: 20px;
    }

    .why-choose-image-box-1-gold {
        padding-bottom: 0;
    }

    .why-choose-image-box-gold .experience-circle-gold {
        top: 30px;
        border-width: 3px;
    }

    .why-choose-image-box-2-gold .why-choose-image-gold {
        margin-left: -130px;
    }

    .why-choose-content-box-gold {
        padding: 20px;
    }

    .why-choose-item-content-gold {
        width: 100%;
    }

        .why-choose-item-content-gold h3 {
            font-size: 18px;
        }

    .why-choose-body-gold {
        padding-top: 20px;
        margin-top: 20px;
    }

    .why-choose-body-content-gold {
        width: 100%;
    }

    .google-rating-box-gold {
        margin-top: 20px;
        padding-top: 20px
    }

    .google-rating-header-gold {
        margin-bottom: 10px;
    }

        .google-rating-header-gold .icon-box img {
            max-width: 32px;
        }

    .google-rating-info-gold {
        width: calc(100% - 47px);
    }

        .google-rating-info-gold h3 {
            font-size: 18px;
        }

    .google-review-star-gold i {
        font-size: 16px;
    }

    .why-choose-body-image-gold {
        width: 100%;
    }

        .why-choose-body-image-gold figure,
        .why-choose-body-image-gold figure img {
            height: auto;
        }

    .interactive-process-layout-gold .interactive-process-item-gold {
        width: 100%;
    }

    .interactive-process-layout-gold .interactive-inner-process-gold {
        padding: 100px 0 0;
    }

    .interactive-process-item-wap-gold {
        padding: 20px;
        transform: translateY(60px);
        background-color: transparent;
        backdrop-filter: initial;
        -webkit-backdrop-filter: initial;
    }

    .interactive-process-item-content-wap-gold h3 {
        font-size: 18px;
    }

    .core-feature-title-image-gold img {
        width: 78px;
        height: 30px;
    }

    .feature-item-gold {
        padding: 20px;
        gap: 20px;
    }

    .feature-item-content-gold h3 {
        font-size: 18px;
    }

    .feature-item-counter-content-gold h2 {
        font-size: 26px;
    }

    .feature-item-header-gold .icon-box {
        margin-bottom: 20px;
    }

    .feature-item-content-gold h3 {
        font-size: 18px;
    }

    .feature-item-list-gold {
        padding-top: 20px;
    }

    .feature-benefit-list-gold ul {
        gap: 10px;
    }

        .feature-benefit-list-gold ul li {
            padding: 8px 10px 8px 24px;
        }

            .feature-benefit-list-gold ul li::before {
                left: 10px;
            }

    .how-work-item-gold {
        width: 100%;
    }

    .how-work-item-content-box-gold {
        padding: 20px;
    }

    .how-work-item-header-gold .icon-box {
        margin-bottom: 20px;
    }

    .how-work-item-content-gold h2 {
        font-size: 18px;
    }

    .benefit-body-gold {
        gap: 10px;
    }

        .benefit-body-gold h2 {
            font-size: 28px;
            width: 100%;
        }

        .benefit-body-gold p {
            width: 100%;
        }

    .benefit-satisfaction-box-gold {
        padding: 20px;
    }

    .benefit-satisfaction-content-gold {
        min-height: auto;
    }

    .benefit-satisfaction-content-gold,
    .benefit-satisfaction-image-gold {
        width: 100%;
    }

    .benefit-satisfaction-content-gold {
        gap: 20px;
        margin-bottom: 30px;
    }

    .benefit-satisfaction-title-gold h2 {
        font-size: 18px;
    }

    .benefit-satisfaction-counter-gold h2 {
        font-size: 28px;
    }

    .benefit-satisfaction-box-gold:before {
        background: linear-gradient(180deg, transparent 0%, var(--white-color) 61.86%);
    }

    .benefit-satisfaction-image-gold figure {
        max-width: 280px;
        margin: 0 auto;
        text-align: center;
    }

    .benefit-scrolling-ticker-item-gold {
        --gap: 15px;
    }

    .benefit-scrolling-ticker-content-gold span {
        padding: 4px 8px 4px 26px;
    }

        .benefit-scrolling-ticker-content-gold span:before {
            left: 10px;
        }

    .testimonial-item-gold {
        min-height: auto;
        gap: 20px;
        padding: 20px;
    }

    .testimonial-quote-gold img {
        max-width: 70px;
    }

    .testimonial-item-rating-gold {
        margin-bottom: 15px;
    }

    .testimonial-item-content-gold p {
        font-size: 16px;
    }

    .testimonial-author-gold {
        padding-top: 20px;
    }

    .testimonial-author-content-gold h2 {
        font-size: 18px;
    }

    .our-pricing-swich-gold .form-check-label {
        font-size: 18px;
    }

    .pricing-item-content-gold h2 {
        font-size: 14px;
        padding: 4px 15px;
    }

    .pricing-item-price-gold h2 {
        font-size: 26px;
    }

    .pricing-item-price-gold sub {
        font-size: 14px;
    }

    .pricing-item-list-gold h3 {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .pricing-benefit-list-gold {
        margin-top: 5px;
    }

        .pricing-benefit-list-gold ul {
            gap: 10px;
        }

            .pricing-benefit-list-gold ul li {
                font-size: 14px;
            }

                .pricing-benefit-list-gold ul li img {
                    max-width: 16px;
                    margin-right: 5px;
                }

    .our-faqs-gold:before {
        width: 450px;
        height: 100px;
    }

    .faq-accordion-gold {
        padding: 15px;
    }

        .faq-accordion-gold .accordion-header .accordion-button {
            padding: 12px 40px 12px 15px;
            font-size: 16px;
        }

        .faq-accordion-gold .accordion-item .accordion-body {
            padding: 12px 15px;
        }

        .faq-accordion-gold .accordion-item .accordion-button::after,
        .faq-accordion-gold .accordion-item .accordion-button.collapsed::after {
            font-size: 16px;
            right: 15px;
        }

    .footer-working-hour-box-gold h2,
    .footer-links-gold h2 {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .footer-links-gold {
        max-width: 100%;
    }

    .footer-working-hour-box-gold ul li {
        margin-bottom: 10px;
    }

    .footer-copyright-gold {
        padding: 15px 0;
    }

    .footer-social-links-gold ul {
        gap: 10px;
    }

        .footer-social-links-gold ul li a {
            font-size: 14px;
        }

            .footer-social-links-gold ul li a i {
                font-size: 18px;
            }
}

/************************************/
/***   36. Home - Version 3 css   ***/
/************************************/

.hero-silver {
    position: relative;
    align-content: end;
    background-image: url('../images/hero-bg-image-silver.jpg');
    border-radius: 20px;
    height: auto;
    min-height: 100vh;
    align-content: center;
    padding: 230px 0 120px;
    margin: 15px 15px 0 15px;
    overflow: hidden;
}

    .hero-silver::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: var(--primary-color);
        opacity: 50%;
        width: 100%;
        height: 100%;
        z-index: 1;
    }

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

.hero-content-silver {
    margin-right: 4.688vw;
}

.hero-content-body-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 40px;
}

.video-play-button-silver {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 20px;
    z-index: 1;
}

    .video-play-button-silver a {
        position: relative;
        height: 50px;
        width: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        color: var(--white-color);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: none;
        transition: all 0.3s ease-in-out;
    }

        .video-play-button-silver a:hover {
            background: var(--white-color);
            color: var(--primary-color);
        }


        .video-play-button-silver a.bg-effect:before,
        .video-play-button-silver a.bg-effect:after {
            content: '';
            position: absolute;
            width: 160%;
            height: 160%;
            border: 35px solid var(--white-color);
            opacity: 50%;
            border-radius: 50%;
            transform: scale(0.6);
            z-index: -1;
            animation: border-zooming 1.2s infinite linear;
        }

        .video-play-button-silver a.bg-effect:after {
            animation-delay: .3s;
        }

@keyframes border-zooming {
    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.video-play-button-silver a i {
    font-size: 20px;
    color: inherit;
    margin-left: 2px;
}

.video-play-button-silver p {
    font-family: var(--accent-font);
    font-weight: 500;
    color: var(--white-color);
    margin: 0;
}

.hero-content-footer-silver {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
    padding-top: 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 30px;
}

.hero-footer-item-list-silver {
    width: calc(50% - 15px);
}

.hero-footer-item-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

    .hero-footer-item-silver:last-child {
        margin-bottom: 0;
    }

    .hero-footer-item-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .hero-footer-item-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: var(--white-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .hero-footer-item-silver:hover .icon-box::before {
        transform: scale(1);
    }

    .hero-footer-item-silver .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

    .hero-footer-item-silver:hover .icon-box img {
        filter: brightness(0) invert(0);
    }

.hero-footer-item-content-silver {
    width: calc(100% - 65px);
}

    .hero-footer-item-content-silver h2 {
        color: var(--white-color);
        font-size: 20px;
    }

.google-review-box-silver {
    width: calc(50% - 15px);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-left: 1px solid var(--dark-divider-color);
    padding-left: 30px;
}

    .google-review-box-silver .icon-box img {
        width: 100%;
        max-width: 50px;
    }

.google-review-box-body-silver {
    width: calc(100% - 65px);
}

.google-review-box-header-silver {
    width: calc(100% - 55px);
    display: flex;
    align-items: center;
}

    .google-review-box-header-silver h2 {
        color: var(--white-color);
        font-size: 26px;
        min-width: 70px;
        line-height: 1em;
    }

.google-rating-star-silver {
    display: flex;
    line-height: normal;
}

    .google-rating-star-silver i {
        font-size: 18px;
        color: var(--accent-secondary-color);
    }

.google-review-box-content-silver p {
    color: var(--white-color);
    margin: 5px 0 0;
}

.hero-experience-circle-silver {
    text-align: center;
}

    .hero-experience-circle-silver img {
        width: 100%;
        max-width: 130px;
        background-color: var(--divider-color);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid var(--dark-divider-color);
        border-radius: 50%;
        animation: infiniterotate 20s infinite linear;
    }

.about-us-silver {
    padding: 120px 0;
}

.about-us-item-silver {
    background-color: var(--accent-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
    min-height: 445px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

    .about-us-item-silver.box-1 {
        background-image: url('../images/about-us-item-bg-silver.png');
        background-position: bottom right;
        background-repeat: no-repeat;
        background-size: auto;
    }

.about-us-header-silver {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
}

.about-us-header-title-silver p {
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    color: var(--white-color);
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 100px;
    padding: 8px 20px;
    margin: 0;
}

.about-us-body-content-silver h3 {
    font-size: 20px;
    line-height: 1.6em;
    color: var(--white-color);
}

.about-us-body-list-silver {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

    .about-us-body-list-silver ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .about-us-body-list-silver li {
        position: relative;
        color: var(--white-color);
        line-height: 1.5em;
        padding-left: 25px;
        margin-bottom: 15px;
    }

    .about-us-body-list-silver ul li:last-child {
        margin-bottom: 0;
    }

    .about-us-body-list-silver ul li::before {
        content: '\f058';
        position: absolute;
        font-family: 'Font Awesome 7 Free';
        top: 0;
        left: 0;
        font-size: 18px;
        font-weight: 900;
        color: var(--accent-secondary-color);
    }

.about-us-image-silver {
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

    .about-us-image-silver figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

    .about-us-image-silver img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 1.1;
        object-fit: cover;
        border-radius: 20px;
    }

.about-us-item-silver.box-2 {
    background-color: var(--white-color);
}

.about-counter-item-silver {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .about-counter-item-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .about-counter-item-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background: var(--primary-color);
            border-radius: 50%;
            width: 100%;
            height: 100%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.about-us-item-silver:hover .about-counter-item-silver .icon-box::before {
    transform: scale(1);
}

.about-counter-item-silver .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.about-counter-item-content-silver {
    width: calc(100% - 65px);
}

    .about-counter-item-content-silver h2 {
        font-size: 48px;
        line-height: 1em;
    }

    .about-counter-item-content-silver p {
        margin: 10px 0 0;
    }

.about-us-header-content-silver {
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
}

    .about-us-header-content-silver p {
        margin: 0;
    }

.about-us-body-silver .skill-progress {
    background-color: var(--divider-color);
}

.about-us-footer-silver {
    margin-top: 30px;
}

.about-us-footer-list-silver ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    max-width: 900px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
}

    .about-us-footer-list-silver ul li {
        position: relative;
        background: transparent;
        background-color: var(--white-color);
        font-size: 16px;
        color: var(--primary-color);
        padding: 13px 20px 13px 36px;
        border-radius: 100px;
        transition: all 0.4s ease-in-out;
    }

        .about-us-footer-list-silver ul li::before {
            content: '';
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            background: var(--accent-secondary-color);
            border-radius: 50%;
            width: 6px;
            height: 6px;
        }

        .about-us-footer-list-silver ul li:hover {
            background: var(--primary-color);
            color: var(--white-color);
        }

.benefits-footer .section-footer-text {
    margin-top: 30px;
}

.our-services-silver {
    padding: 120px 0;
}

.service-item-silver {
    position: relative;
    min-height: 480px;
    align-content: end;
    border-radius: 20px;
    padding: 10px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.service-item-image-silver {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

    .service-item-image-silver figure,
    .service-item-image-silver figure a {
        display: block;
        height: 100%;
        cursor: none;
    }

    .service-item-image-silver img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.6s ease-in-out;
    }

.service-item-silver:hover .service-item-image-silver img {
    transform: scale(1.06);
}

.service-item-body-silver {
    position: relative;
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    z-index: 1;
}

.service-item-content-silver h2 {
    color: var(--white-color);
    font-size: 20px;
}

    .service-item-content-silver h2 a {
        color: inherit;
    }

.service-item-content-silver p {
    color: var(--white-color);
    margin: 10px 0 0;
}

.service-item-btn-silver {
    height: 0;
    border-top: 1px solid var(--dark-divider-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.service-item-silver:hover .service-item-btn-silver {
    height: 37px;
    margin-top: 20px;
    padding-top: 20px;
    opacity: 1;
    visibility: visible;
}

.why-choose-us-silver {
    padding: 120px 0;
}

.why-choose-image-box-silver {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: end;
}

.why-choose-image-box-1-silver {
    width: 58%;
    padding-left: 80px;
    padding-bottom: 120px;
}

.why-choose-author-box-silver {
    position: absolute;
    max-width: 280px;
    top: 70px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 30px;
    animation: Movestylesilver 2s infinite alternate linear;
    z-index: 1;
}

@keyframes Movestylesilver {
    50% {
        transform: translateX(20px);
    }
}

.why-choose-author-image-silver figure {
    display: block;
    border-radius: 50%;
}

.why-choose-author-image-silver img {
    width: 100%;
    max-width: 50px;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.why-choose-author-content-silver {
    width: calc(100% - 65px);
}

    .why-choose-author-content-silver h2 {
        font-size: 20px;
    }

    .why-choose-author-content-silver p {
        margin: 5px 0 0;
    }

.why-choose-image-silver figure {
    margin-right: -150px;
    display: block;
    border-radius: 20px;
}

.why-choose-image-silver img {
    width: 100%;
    aspect-ratio: 1 / 1.231;
    object-fit: cover;
    border-radius: 20px;
}

.why-choose-expert-box-silver {
    width: 42%;
    position: relative;
    background-color: var(--accent-color);
    border: 6px solid var(--bg-color);
    border-radius: 20px;
    padding: 30px 30px 0;
    overflow: hidden;
}

    .why-choose-expert-box-silver:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: -100px;
        left: -30px;
        height: 300px;
        width: calc(100% + 60px);
        background-color: var(--dark-divider-color);
        border-radius: 50%;
    }

.why-choose-expert-content-silver {
    text-align: center;
    margin-bottom: 20px;
}

    .why-choose-expert-content-silver h2 {
        color: var(--white-color);
        font-size: 30px;
    }

    .why-choose-expert-content-silver p {
        color: var(--white-color);
        margin: 5px 0 0;
    }

.why-choose-expert-image-silver {
    position: relative;
    z-index: 1;
}

    .why-choose-expert-image-silver figure {
        display: block;
        border-radius: 14px 14px 0 0;
    }

    .why-choose-expert-image-silver img {
        width: 100%;
        aspect-ratio: 1 / 1.31;
        object-fit: cover;
        border-radius: 14px 14px 0 0;
    }

.why-choose-content-silver {
    margin-left: 15px;
}

.why-choose-items-list-silver {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.why-choose-item-silver {
    width: calc(50% - 15px);
    display: flex;
    align-items: center;
    gap: 15px;
}

    .why-choose-item-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .why-choose-item-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .why-choose-item-silver:hover .icon-box::before {
        transform: scale(1);
    }

    .why-choose-item-silver .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
    }

.why-choose-item-content-silver {
    width: calc(100% - 65px);
}

    .why-choose-item-content-silver h3 {
        font-size: 20px;
        line-height: 1.4em;
    }

.why-choose-body-list-silver {
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

    .why-choose-body-list-silver ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .why-choose-body-list-silver ul li {
            position: relative;
            line-height: 1.5em;
            padding-left: 25px;
            margin-bottom: 15px;
        }

            .why-choose-body-list-silver ul li:last-child {
                margin-bottom: 0;
            }

            .why-choose-body-list-silver ul li::before {
                content: '\f058';
                position: absolute;
                font-family: 'Font Awesome 7 Free';
                top: 0;
                left: 0;
                font-size: 18px;
                font-weight: 900;
                color: var(--accent-secondary-color);
            }

.why-chooose-btn-silver {
    margin-top: 40px;
}

.our-benefit-silver {
    padding: 120px 0;
}

.benefit-image-box-silver {
    position: relative;
    background-image: url('../images/benefit-image-box-bg-silver.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
}

    .benefit-image-box-silver:before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient(180deg, transparent 0%, var(--accent-color) 88.75%);
        height: 180px;
        width: 100%;
    }

.benefit-image-silver {
    text-align: center;
}

    .benefit-image-silver figure {
        display: block;
        max-width: 370px;
        margin: 0 auto;
        border-radius: 20px;
    }

    .benefit-image-silver img {
        width: 100%;
        aspect-ratio: 1 / 1.7;
        object-fit: cover;
        border-radius: 20px;
    }

.benefit-satisfaction-box-silver {
    position: absolute;
    bottom: 70px;
    left: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    background-color: var(--white-color);
    border-radius: 20px;
    padding: 20px;
    animation: benefitboxmove 3s infinite linear alternate;
}

@keyframes benefitboxmove {
    50% {
        transform: translateX(20px);
    }
}

.benefit-satisfaction-box-silver .icon-box {
    position: relative;
    width: 50px;
    height: 50px;
    background: var(--accent-secondary-color);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

    .benefit-satisfaction-box-silver .icon-box::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: var(--primary-color);
        border-radius: 50%;
        transform: scale(0);
        transition: all 0.4s ease-in-out;
        z-index: 0;
    }

.benefit-satisfaction-box-silver:hover .icon-box::before {
    transform: scale(1);
}

.benefit-satisfaction-box-silver .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.benefit-satisfaction-content-silver {
    width: calc(100% - 65px);
}

    .benefit-satisfaction-content-silver h2 {
        font-size: 40px;
        line-height: 1em;
    }

    .benefit-satisfaction-content-silver p {
        margin: 5px 0 0;
    }

.benefit-content-silver {
    margin-left: 15px;
}

.benefit-item-list-silver {
    background-color: var(--dark-divider-color);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 20px;
    padding: 40px;
}

.benefit-item-silver {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    border-bottom: 1px solid var(--dark-divider-color);
    margin-bottom: 30px;
    padding-bottom: 30px;
}

    .benefit-item-silver:last-child {
        margin-bottom: 0;
        padding-bottom: 0;
        border-bottom: none;
    }

    .benefit-item-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .benefit-item-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .benefit-item-silver:hover .icon-box::before {
        transform: scale(1);
    }

    .benefit-item-silver .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        z-index: 1;
        transition: all 0.4s ease-in-out;
    }

    .benefit-item-silver:hover .icon-box img {
        filter: brightness(0) invert(0);
    }

.benefit-item-content-silver {
    width: calc(100% - 65px);
}

    .benefit-item-content-silver h2 {
        font-size: 20px;
        line-height: 1.4em;
        color: var(--white-color);
    }

    .benefit-item-content-silver p {
        color: var(--white-color);
        margin: 10px 0 0;
    }

.benefit-btn-silver {
    margin-top: 40px;
}

.our-core-features-silver {
    padding: 120px 0;
}

.core-features-image-box-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    margin-right: 15px;
}

.core-features-image-box-1-silver {
    width: 35%;
    padding-bottom: 160px;
}

.core-features-image-silver {
    position: relative;
    z-index: 0;
}

    .core-features-image-silver figure {
        border-radius: 20px;
        overflow: hidden;
    }

        .core-features-image-silver figure img {
            width: 100%;
            object-fit: cover;
            border-radius: 20px;
        }

.core-features-image-box-1-silver .core-features-image-silver {
    position: relative;
    margin-right: -260px;
    z-index: 1;
}

    .core-features-image-box-1-silver .core-features-image-silver figure img {
        aspect-ratio: 1 / 1.32;
    }

.core-features-image-box-2-silver {
    position: relative;
    width: 65%;
    text-align: right;
    z-index: 2;
}

    .core-features-image-box-2-silver .core-features-image-silver figure {
        border: 6px solid var(--secondary-color);
    }

        .core-features-image-box-2-silver .core-features-image-silver figure img {
            aspect-ratio: 1 / 1.272;
            border-radius: 14px;
        }

.experience-circle-silver {
    position: relative;
    display: inline-block;
    border-radius: 50%;
    border: 6px solid var(--secondary-color);
    text-align: right;
    margin-bottom: -71px;
    margin-right: 60px;
    z-index: 2;
}

    .experience-circle-silver img {
        width: 100%;
        max-width: 130px;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        border-radius: 50%;
        animation: infiniterotate 20s infinite linear;
    }

.core-features-content-silver {
    margin-left: 15px;
}

.core-features-item-list-silver {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.core-features-item-silver {
    width: calc(50% - 15px);
    background-color: var(--white-color);
    border-radius: 20px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 30px;
    padding: 30px;
}

    .core-features-item-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .core-features-item-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--primary-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

    .core-features-item-silver:hover .icon-box::before {
        transform: scale(1);
    }

    .core-features-item-silver .icon-box img {
        position: relative;
        width: 100%;
        max-width: 24px;
        transition: all 0.4s ease-in-out;
        z-index: 1;
    }

.core-features-item-content-silver h2 {
    font-size: 20px;
}

.core-features-item-content-silver p {
    border-top: 1px solid var(--divider-color);
    padding-top: 20px;
    margin: 20px 0 0;
}

.core-features-skill-list-silver {
    border-top: 1px solid var(--divider-color);
    margin-top: 30px;
    padding-top: 30px;
}

.core-features-btn-silver {
    margin-top: 40px;
}

.our-team-silver {
    padding: 120px 0;
}

.team-item-silver {
    position: relative;
    border-radius: 20px;
    align-content: end;
    min-height: 480px;
    padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    overflow: hidden;
}

.team-item-image-silver {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

    .team-item-image-silver figure,
    .team-item-image-silver a {
        position: relative;
        display: block;
        height: 100%;
        cursor: none;
    }

        .team-item-image-silver figure:before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background: linear-gradient(180deg, transparent 50%, rgba(34, 34, 34, 0.90) 90%);
            z-index: 1;
        }

    .team-item-image-silver img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: all 0.6s ease-in-out;
    }

.team-item-silver:hover .team-item-image-silver img {
    transform: scale(1.06);
}

.team-item-body-silver {
    position: relative;
    transform: translateY(60%);
    text-align: center;
    transition: all 0.4s ease-in-out;
    z-index: 2;
}

.team-item-silver:hover .team-item-body-silver {
    transform: translateY(0%);
}

.team-item-content-silver h2 {
    font-size: 20px;
    color: var(--white-color);
}

    .team-item-content-silver h2 a {
        color: inherit;
    }

.team-item-content-silver p {
    color: var(--white-color);
    margin: 10px 0 0;
}

.team-social-list-silver {
    margin-top: 30px;
    padding-top: 30px;
    border-top: 1px solid var(--dark-divider-color);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
}

.team-item-silver:hover .team-social-list-silver {
    opacity: 1;
    visibility: visible;
}

.team-social-list-silver ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    list-style: none;
    margin: 0;
    padding: 0;
}

    .team-social-list-silver ul li a {
        color: var(--white-color);
        width: 40px;
        height: 40px;
        background: transparent;
        border: 1px solid var(--dark-divider-color);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease-in-out;
    }

        .team-social-list-silver ul li a:hover {
            background: var(--accent-secondary-color);
        }

        .team-social-list-silver ul li a i {
            font-size: 18px;
            color: inherit;
        }

.our-pricing-silver {
    padding: 120px 0;
}

.pricing-item-silver {
    background-color: var(--white-color);
    border-radius: 20px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
    padding: 10px;
}

.pricing-item-header-silver {
    padding: 30px;
}

    .pricing-item-header-silver .icon-box {
        position: relative;
        width: 50px;
        height: 50px;
        background: var(--accent-secondary-color);
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        margin-bottom: 25px;
    }

        .pricing-item-header-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: var(--primary-color);
            border-radius: 100px;
            transform: scale(0);
            width: 100%;
            height: 100%;
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.pricing-item-silver:hover .pricing-item-header-silver .icon-box::before {
    transform: scale(1);
}

.pricing-item-header-silver .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    z-index: 1;
}

.pricing-item-content-silver .pricing-item-title-silver {
    display: block;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2em;
    color: var(--primary-color);
    border-bottom: 1px solid var(--divider-color);
    margin-bottom: 20px;
    padding-bottom: 20px;
}

.pricing-item-content-silver p {
    margin-bottom: 30px;
}

.pricing-item-content-silver h2 {
    font-size: 34px;
}

    .pricing-item-content-silver h2 sub {
        font-size: 16px;
        bottom: 0;
    }

.pricing-item-body-silver {
    background: linear-gradient(270deg, var(--bg-color) 0%, var(--secondary-color) 100%);
    border-radius: 14px;
    padding: 30px;
}

.pricing-item-list-silver h3 {
    font-size: 16px;
}

.pricing-item-list-silver ul {
    list-style: none;
    border-top: 1px solid var(--divider-color);
    margin: 20px 0 0;
    padding: 20px 0 0;
}

    .pricing-item-list-silver ul li {
        position: relative;
        color: var(--primary-color);
        line-height: 1.5em;
        padding-left: 25px;
        margin-bottom: 15px;
    }

        .pricing-item-list-silver ul li:last-child {
            margin-bottom: 0;
        }

        .pricing-item-list-silver ul li:before {
            content: '\f058';
            position: absolute;
            font-family: 'Font Awesome 7 Free';
            font-size: 18px;
            font-weight: 900;
            color: var(--primary-color);
            top: 0;
            left: 0;
        }

.pricing-item-btn-silver {
    margin-top: 30px;
}

.pricing-benefit-list-silver {
    margin-top: 30px;
}

    .pricing-benefit-list-silver ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        list-style: none;
        margin: 0;
        padding: 0;
        gap: 20px 40px;
    }

        .pricing-benefit-list-silver ul li {
            display: inline-flex;
            align-items: center;
            color: var(--primary-color);
        }

            .pricing-benefit-list-silver ul li img {
                width: 100%;
                max-width: 20px;
                margin-right: 10px;
            }

.how-it-work-silver {
    padding: 120px 0;
}

.how-work-item-list-silver {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

.how-work-item-silver {
    width: calc(33.33% - 20px);
    text-align: center;
}

.how-work-item-no-silver {
    position: relative;
    margin-bottom: 176px;
}

    .how-work-item-no-silver::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: calc(100% + 30px);
        height: 1px;
        transform: translateY(-50%);
        background: var(--dark-divider-color);
    }

.how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before,
.how-work-item-silver:last-child .how-work-item-no-silver::before {
    width: 100%;
}

.how-work-item-no-silver::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translate(-50%, 100%);
    background: url('../images/how-work-item-arrow-silver.svg') no-repeat;
    background-position: center center;
    background-size: cover;
    width: 12px;
    height: 52px;
    transition: all 0.3s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-no-silver::after {
    transform: translate(-50%, 110%);
}

.how-work-item-no-silver span {
    display: inline-block;
    color: var(--white-color);
    font-weight: 500;
    line-height: 1.25em;
    background: var(--dark-divider-color);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 100px;
    padding: 10px 30px;
    transition: all 0.4s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-no-silver span {
    background: var(--white-color);
    color: var(--primary-color);
}

.how-work-item-content-box-silver {
    position: relative;
    background: var(--dark-divider-color);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 0 40px 40px;
    transition: all 0.4s ease-in-out;
}

.how-work-item-silver:hover .how-work-item-content-box-silver {
    background: var(--accent-secondary-color);
}

.how-work-item-image-silver figure {
    display: inline-block;
    max-width: 172px;
    border: 6px solid var(--accent-color);
    border-radius: 50%;
    margin: -86px auto 0;
}

.how-work-item-image-silver img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

.how-work-item-content-silver {
    margin-top: 30px;
}

    .how-work-item-content-silver h3 {
        font-size: 20px;
        color: var(--white-color);
        border-bottom: 1px solid var(--dark-divider-color);
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .how-work-item-content-silver p {
        color: var(--white-color);
        margin-bottom: 10px;
    }

        .how-work-item-content-silver p:last-child {
            margin: 0;
        }

.our-testimonials-silver {
    padding: 120px 0;
}

.testimonial-slider-silver {
    height: 100%;
}

    .testimonial-slider-silver .swiper {
        padding-bottom: 60px;
        height: 100%;
    }

    .testimonial-slider-silver .swiper-wrapper {
        height: 100%;
        cursor: none;
    }

.testimonial-item-silver {
    background: var(--white-color) url('../images/testimonial-quote-silver.svg') no-repeat;
    background-position: center center;
    background-size: 80px auto;
    min-height: 480px;
    border-radius: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding: 40px;
}

.testimonial-item-rating-silver i {
    font-size: 20px;
    color: var(--accent-secondary-color);
}

.testimonial-item-content-silver p {
    font-size: 20px;
    font-weight: 500;
    color: var(--primary-color);
}

    .testimonial-item-content-silver p:last-child {
        margin-bottom: 0;
    }

.testimonial-author-box-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    border-top: 1px solid var(--divider-color);
    margin-top: 40px;
    padding-top: 40px;
}

.testimonial-author-image-silver figure {
    display: block;
    border-radius: 50%;
}

.testimonial-author-image-silver img {
    width: 100%;
    max-width: 50px;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-author-content-silver {
    width: calc(100% - 65px);
}

    .testimonial-author-content-silver h2 {
        font-size: 20px;
    }

    .testimonial-author-content-silver p {
        line-height: normal;
        margin: 5px 0 0;
    }

.testimonial-slider-silver .testimonials-pagination-silver {
    position: absolute;
    bottom: 0px;
    display: flex;
    text-align: center;
}

    .testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet {
        position: relative;
        height: 2px;
        width: 100%;
        background: var(--divider-color);
        border-radius: 0;
        opacity: 1;
        margin: 0;
        transition: all 0.3s ease-in-out;
    }

        .testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet:before {
            content: '';
            display: block;
            position: absolute;
            top: 0px;
            left: auto;
            right: 0;
            background: var(--accent-secondary-color);
            border-radius: 0;
            width: 0;
            height: 4px;
            transition: all 0.4s ease-in-out;
        }

        .testimonial-slider-silver .testimonials-pagination-silver .swiper-pagination-bullet.swiper-pagination-bullet-active:before {
            width: 100%;
            right: auto;
            left: 0;
        }

.testimonial-cta-box-silver {
    background: var(--white-color);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: calc(100% - 60px);
    margin-bottom: 60px;
    padding: 10px;
}

.testimonial-cta-image-silver {
    height: 100%;
}

    .testimonial-cta-image-silver figure {
        display: block;
        height: 100%;
        border-radius: 14px;
    }

    .testimonial-cta-image-silver img {
        width: 100%;
        height: 100%;
        aspect-ratio: 1 / 0.67;
        object-fit: cover;
        border-radius: 14px;
    }

.testimonial-cta-client-box-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    padding: 20px;
}

    .testimonial-cta-client-box-silver .satisfy-client-images {
        width: calc(52% - 10px);
    }

    .testimonial-cta-client-box-silver .satisfy-client-image figure img {
        max-width: 50px;
    }

.testimonial-cta-client-content-silver {
    width: calc(48% - 10px);
    border-left: 1px solid var(--divider-color);
    padding-left: 20px;
}

    .testimonial-cta-client-content-silver h2 {
        font-size: 40px;
        line-height: 1.1em;
        display: flex;
        align-items: center;
    }

        .testimonial-cta-client-content-silver h2 span {
            min-width: 65px;
        }

        .testimonial-cta-client-content-silver h2 i {
            font-size: 24px;
            color: var(--accent-secondary-color);
        }

    .testimonial-cta-client-content-silver p {
        margin: 5px 0 0;
    }

        .testimonial-cta-client-content-silver p span {
            color: var(--primary-color);
            font-weight: 500;
        }

.our-testimonials-silver .section-footer-text {
    margin-top: 60px;
}

.our-faqs-silver {
    padding: 120px 0;
}

.faqs-image-box-silver {
    position: relative;
    height: 100%;
    margin-right: 15px;
}

.faqs-image-silver {
    height: 100%;
}

    .faqs-image-silver figure {
        display: block;
        height: 100%;
        border-radius: 20px;
    }

    .faqs-image-silver img {
        width: 100%;
        aspect-ratio: 1 / 1.24;
        object-fit: cover;
        border-radius: 20px;
    }

.faqs-cta-box-silver {
    position: absolute;
    bottom: 30px;
    left: 30px;
    right: 30px;
    max-width: 325px;
    background: var(--divider-color);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 30px;
    z-index: 2;
}

    .faqs-cta-box-silver .icon-box {
        position: relative;
        height: 50px;
        width: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: var(--accent-secondary-color);
        border-radius: 50%;
        margin-bottom: 25px;
        z-index: 1;
    }

        .faqs-cta-box-silver .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.faqs-image-box-silver:hover .faqs-cta-box-silver .icon-box::before {
    transform: scale(1);
}

.faqs-cta-box-silver .icon-box img {
    position: relative;
    width: 100%;
    max-width: 24px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.faqs-image-box-silver:hover .faqs-cta-box-silver .icon-box img {
    filter: brightness(0) invert(0);
}

.faqs-cta-content-silver h2 {
    font-size: 20px;
    color: var(--white-color);
}

.faqs-cta-content-silver p {
    color: var(--white-color);
    margin: 10px 0 0;
}

.faqs-content-silver {
    height: 100%;
    align-content: center;
}

.faq-accordion-silver .accordion-item {
    position: relative;
    background: var(--bg-color);
    border-radius: 14px;
    margin-bottom: 25px;
    overflow: hidden;
}

    .faq-accordion-silver .accordion-item:last-child {
        margin-bottom: 0;
    }

.faq-accordion-silver .accordion-header .accordion-button {
    font-size: 18px;
    font-weight: 500;
    line-height: 1.333em;
    background: transparent;
    color: var(--primary-color);
    padding: 22px 55px 22px 24px;
    transition: all 0.4s ease-in-out;
}

.faq-accordion-silver .accordion-item .accordion-button::after,
.faq-accordion-silver .accordion-item .accordion-button.collapsed::after {
    content: '\f078';
    font-family: 'FontAwesome';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: var(--accent-secondary-color);
    line-height: normal;
    transition: all 0.3s ease-in-out;
}

.faq-accordion-silver .accordion-button:not(.collapsed)::after {
    color: var(--primary-color);
    transform: translateY(-50%) rotate(180deg);
}

.faq-accordion-silver .accordion-item .accordion-body {
    border-top: 1px solid var(--divider-color);
    padding: 22px 24px;
}

    .faq-accordion-silver .accordion-item .accordion-body p:last-child {
        margin: 0;
    }

.main-footer-silver {
    position: relative;
    padding: 120px 0 60px;
    margin-bottom: 15px;
    overflow: hidden;
}

    .main-footer-silver::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        background: url('../images/footer-bg-image-silver.png') no-repeat;
        background-position: center center;
        background-size: cover;
        width: 360px;
        height: 325px;
        z-index: 0;
    }

    .main-footer-silver .container {
        position: relative;
        z-index: 1;
    }

.footer-logo-silver img {
    width: 100%;
    max-width: 147px;
}

.footer-newsletter-box-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px 30px;
}

.footer-newsletter-box-title-silver {
    width: calc(54% - 15px);
}

    .footer-newsletter-box-title-silver h2 {
        font-size: 40px;
        letter-spacing: -0.02em;
        color: var(--white-color);
    }

.footer-newsletter-form-silver {
    width: calc(46% - 15px);
}

    .footer-newsletter-form-silver .form-group {
        display: flex;
        background: var(--dark-divider-color);
        border-radius: 10px;
        backdrop-filter: blur(30px);
        -webkit-backdrop-filter: blur(30px);
        padding: 8px;
    }

        .footer-newsletter-form-silver .form-group .form-control {
            width: calc(100% - 44px);
            font-size: 16px;
            font-weight: 400;
            line-height: 1.2em;
            color: var(--white-color);
            background: transparent;
            border: none;
            border-radius: 0;
            outline: none;
            box-shadow: none;
            padding: 6px 16px;
        }

            .footer-newsletter-form-silver .form-group .form-control::placeholder {
                color: var(--white-color);
                opacity: 50%;
            }

        .footer-newsletter-form-silver .form-group .newsletter-btn-silver {
            width: 44px;
            height: 44px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--accent-secondary-color);
            border: none;
            border-radius: 6px;
            transition: all 0.3s ease-in-out;
        }

            .footer-newsletter-form-silver .form-group .newsletter-btn-silver:hover {
                background-color: var(--white-color);
            }

            .footer-newsletter-form-silver .form-group .newsletter-btn-silver img {
                width: 100%;
                max-width: 14px;
                transition: all 0.4s ease-in-out;
            }

            .footer-newsletter-form-silver .form-group .newsletter-btn-silver:hover img {
                transform: rotate(45deg);
                filter: brightness(0) invert(0);
            }

.footer-links-box-silver,
.footer-copyright-silver {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 60px;
    padding-top: 60px;
}

.footer-links-box-silver {
    display: flex;
    flex-wrap: wrap;
    gap: 30px 4.167vw;
}

.footer-links-silver {
    position: relative;
    width: calc(33.33% - 2.778vw);
}

    .footer-links-silver::before {
        content: '';
        position: absolute;
        top: 50%;
        right: -2.083vw;
        transform: translateY(-50%);
        background: var(--dark-divider-color);
        width: 1px;
        height: 80%;
    }

    .footer-links-silver:nth-child(3n + 3)::before,
    .footer-links-silver:last-child::before {
        display: none;
    }

    .footer-links-silver h2 {
        font-size: 20px;
        color: var(--white-color);
        margin-bottom: 30px;
    }

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

        .footer-links-silver ul li {
            line-height: 1.5em;
            color: var(--white-color);
            margin-bottom: 10px;
        }

            .footer-links-silver ul li:last-child {
                margin-bottom: 0;
            }

            .footer-links-silver ul li a {
                color: inherit;
                transition: all 0.4s ease-in-out;
            }

                .footer-links-silver ul li a:hover {
                    color: var(--accent-secondary-color);
                }

.footer-service-links-silver ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
}

.footer-links-silver.footer-service-links-silver ul li {
    margin: 0;
}

.footer-service-links-silver ul li a {
    width: 40px;
    height: 40px;
    border: 1px solid var(--dark-divider-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease-in-out;
}

    .footer-service-links-silver ul li a:hover {
        background-color: var(--accent-secondary-color);
        color: var(--white-color);
    }

    .footer-service-links-silver ul li a i {
        font-size: 18px;
        color: inherit;
    }

.footer-copyright-silver {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.footer-copyright-text-silver p {
    color: var(--white-color);
    margin: 0;
}

.footer-menu-silver ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 30px;
    margin: 0;
    padding: 0;
    list-style: none;
}

    .footer-menu-silver ul li {
        position: relative;
    }

        .footer-menu-silver ul li::before {
            content: '';
            position: absolute;
            top: 50%;
            right: -18px;
            background: var(--accent-secondary-color);
            border-radius: 100px;
            transform: translateY(-50%);
            width: 5px;
            height: 5px;
        }

        .footer-menu-silver ul li:last-child:before {
            display: none;
        }

        .footer-menu-silver ul li a {
            text-transform: capitalize;
            color: var(--white-color);
            transition: all 0.4s ease-in-out;
        }

            .footer-menu-silver ul li a:hover {
                color: var(--accent-secondary-color);
            }

@media only screen and (max-width: 1024px) {

    .hero-silver {
        height: auto;
    }

    .hero-content-silver {
        margin: 0;
    }

    .hero-content-footer-silver {
        margin-top: 30px;
        padding-top: 30px;
    }

    .hero-experience-circle-silver {
        display: none;
    }

    .about-us-image-silver img {
        aspect-ratio: 1 / 0.8;
    }

    .why-choose-image-box-silver {
        max-width: 650px;
        margin: 0 auto 30px;
    }

    .why-choose-content-silver {
        margin: 0;
    }

    .why-choose-body-list-silver {
        margin-top: 30px;
        padding-top: 30px;
    }

    .why-chooose-btn-silver {
        margin-top: 30px;
    }

    .benefit-image-box-silver {
        max-width: 620px;
        margin: 0 auto 30px;
    }

    .benefit-content-silver {
        margin: 0;
    }

    .benefit-item-list-silver {
        padding: 30px;
    }

    .core-features-image-box-silver {
        max-width: 610px;
        margin: 0 auto 30px;
    }

    .core-features-image-box-1-silver {
        padding-bottom: 110px;
    }

        .core-features-image-box-1-silver .core-features-image-silver figure img {
            aspect-ratio: 1 / 1.2;
        }

    .core-features-image-box-2-silver .core-features-image-silver figure img {
        aspect-ratio: 1 / 1.1;
    }

    .core-features-content-silver {
        margin: 0;
    }

    .core-features-btn-silver {
        margin-top: 30px;
    }

    .team-item-silver {
        padding: 30px;
    }

    .how-work-item-content-box-silver {
        padding: 0 30px 30px;
    }

    .faqs-image-box-silver {
        max-width: 740px;
        height: auto;
        margin: 0 auto 30px;
    }

    .faqs-image-silver,
    .faqs-image-silver figure,
    .faqs-image-silver img,
    .faqs-content-silver {
        height: auto;
    }

        .faqs-image-silver img {
            aspect-ratio: 1 / 1.1;
        }

    .main-footer-silver {
        padding-bottom: 30px;
    }

        .main-footer-silver::before {
            width: 240px;
            height: 215px;
            opacity: 55%;
        }

    .footer-logo-silver {
        margin-bottom: 20px;
    }

    .footer-links-box-silver,
    .footer-copyright-silver {
        margin-top: 30px;
        padding-top: 30px;
    }
}

@media only screen and (max-width: 991px) {

    .hero-silver {
        padding: 150px 0 60px;
        margin: 0;
        border-radius: 0;
    }

    .google-review-box-header-silver h2 {
        font-size: 22px;
        min-width: 60px;
    }

    .about-us-silver {
        padding: 60px 0;
    }

    .about-us-item-silver {
        min-height: auto;
        padding: 20px;
    }

    .about-us-body-content-silver h3 {
        font-size: 18px;
    }

    .about-us-body-list-silver li {
        margin-bottom: 10px;
    }

        .about-us-body-list-silver li:before {
            font-size: 16px;
        }

    .about-counter-item-content-silver h2 {
        font-size: 38px;
    }

    .about-us-footer-silver {
        margin-top: 10px;
    }

    .about-us-footer-list-silver ul {
        gap: 15px;
    }

        .about-us-footer-list-silver ul li {
            padding: 10px 10px 10px 26px;
        }

            .about-us-footer-list-silver ul li::before {
                left: 10px;
            }

    .our-services-silver {
        padding: 60px 0;
    }

    .service-item-silver {
        min-height: 400px;
    }

    .service-item-body-silver {
        padding: 20px;
    }

    .why-choose-us-silver {
        padding: 60px 0;
    }

    .why-choose-image-box-1-silver {
        padding-bottom: 80px;
    }

    .why-choose-author-box-silver {
        padding: 20px;
    }

    .why-choose-expert-content-silver h2 {
        font-size: 28px;
    }

    .why-choose-body-list-silver ul li {
        margin-bottom: 10px;
    }

        .why-choose-body-list-silver ul li::before {
            font-size: 16px;
        }

    .our-benefit-silver {
        padding: 60px 0;
    }

    .benefit-satisfaction-content-silver h2 {
        font-size: 34px;
    }

    .benefit-btn-silver {
        margin-top: 30px;
    }

    .our-core-features-silver {
        padding: 60px 0;
    }

    .experience-circle-silver {
        margin-bottom: -61px;
        margin-right: 70px;
    }

        .experience-circle-silver img {
            max-width: 110px;
        }

    .our-team-silver {
        padding: 60px 0;
    }

    .team-item-silver {
        min-height: 400px;
    }

    .our-pricing-silver {
        padding: 60px 0;
    }

    .pricing-item-header-silver {
        padding: 20px 20px 30px;
    }

    .pricing-item-content-silver .pricing-item-title-silver {
        margin-bottom: 15px;
        padding-bottom: 15px;
    }

    .pricing-item-content-silver p {
        margin-bottom: 15px;
    }

    .pricing-item-body-silver {
        padding: 20px;
    }

    .pricing-item-content-silver h2 {
        font-size: 30px;
    }

    .pricing-item-list-silver ul {
        margin: 15px 0 0;
        padding: 15px 0 0;
    }

        .pricing-item-list-silver ul li {
            margin-bottom: 10px;
        }

            .pricing-item-list-silver ul li:before {
                font-size: 16px;
            }

    .pricing-benefit-list-silver {
        margin-top: 10px;
    }

        .pricing-benefit-list-silver ul {
            gap: 15px 30px;
        }

    .how-it-work-silver {
        padding: 60px 0;
    }

    .how-work-item-silver {
        width: calc(50% - 15px);
    }

        .how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before {
            width: calc(100% + 30px);
        }

        .how-work-item-silver:nth-child(2n + 2) .how-work-item-no-silver::before,
        .how-work-item-silver:last-child .how-work-item-no-silver::before {
            width: 100%;
        }

    .how-work-item-no-silver span {
        padding: 8px 20px;
    }

    .how-work-item-no-silver {
        margin-bottom: 146px;
    }

        .how-work-item-no-silver::after {
            bottom: -10px;
            width: 9px;
            height: 38px;
        }

    .our-testimonials-silver {
        padding: 60px 0;
    }

    .testimonial-slider-silver .swiper {
        padding-bottom: 30px;
    }

    .testimonial-item-silver {
        padding: 30px;
        gap: 30px;
        min-height: 390px;
    }

    .testimonial-item-content-silver p,
    .testimonial-item-rating-silver i {
        font-size: 18px;
    }

    .testimonial-author-box-silver {
        margin-top: 30px;
        padding-top: 30px;
    }

    .testimonial-cta-box-silver {
        height: calc(100% - 30px);
        margin-bottom: 30px;
    }

    .testimonial-cta-client-box-silver {
        padding: 10px;
    }

        .testimonial-cta-client-box-silver .satisfy-client-images {
            width: calc(46% - 10px);
        }

        .testimonial-cta-client-box-silver .satisfy-client-image figure img {
            max-width: 40px;
        }

    .testimonial-cta-client-content-silver {
        width: calc(54% - 10px);
    }

        .testimonial-cta-client-content-silver h2 {
            font-size: 34px;
        }

            .testimonial-cta-client-content-silver h2 span {
                min-width: 55px;
            }

            .testimonial-cta-client-content-silver h2 i {
                font-size: 18px;
            }

    .our-testimonials-silver .section-footer-text {
        margin-top: 30px;
    }

    .our-faqs-silver {
        padding: 60px 0;
    }

    .faqs-cta-box-silver {
        bottom: 20px;
        left: 20px;
        right: 20px;
    }

    .faq-accordion-silver .accordion-item {
        margin-bottom: 20px;
    }

    .faq-accordion-silver .accordion-header .accordion-button {
        padding: 18px 44px 18px 20px;
    }

    .faq-accordion-silver .accordion-item .accordion-button::after,
    .faq-accordion-silver .accordion-item .accordion-button.collapsed::after {
        right: 20px;
        font-size: 18px;
    }

    .faq-accordion-silver .accordion-item .accordion-body {
        padding: 18px 20px;
    }

    .main-footer-silver {
        padding: 60px 0 30px;
        margin-bottom: 0;
    }

    .footer-newsletter-box-title-silver h2 {
        font-size: 34px;
    }

    .footer-newsletter-form-silver .form-group {
        padding: 5px;
    }

        .footer-newsletter-form-silver .form-group .form-control {
            width: calc(100% - 36px);
        }

        .footer-newsletter-form-silver .form-group .newsletter-btn-silver {
            width: 36px;
            height: 36px;
        }

            .footer-newsletter-form-silver .form-group .newsletter-btn-silver img {
                max-width: 12px;
            }

    .footer-links-silver h2 {
        margin-bottom: 20px;
    }
}

@media only screen and (max-width: 767px) {

    .hero-content-body-silver {
        gap: 30px 20px;
    }

        .hero-content-body-silver .video-play-button-silver {
            margin-left: 10px;
        }

    .hero-footer-item-list-silver {
        width: 100%;
    }

    .hero-footer-item-content-silver h2 {
        font-size: 18px;
    }

    .google-review-box-silver {
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--dark-divider-color);
        padding: 30px 0 0;
    }

        .google-review-box-silver .icon-box img {
            max-width: 40px;
        }

    .google-review-box-body-silver {
        width: calc(100% - 55px);
    }

    .google-review-box-header-silver h2 {
        font-size: 18px;
        min-width: 50px;
    }

    .google-rating-star-silver i {
        font-size: 16px;
    }

    .about-us-item-silver {
        padding: 20px;
        gap: 20px;
        min-height: auto;
    }

    .about-us-body-content-silver h3 {
        font-size: 16px;
    }

    .about-us-body-list-silver {
        margin-top: 20px;
        padding-top: 20px;
    }

    .about-us-image-silver figure,
    .about-us-image-silver img {
        height: auto;
    }

    .about-counter-item-content-silver h2 {
        font-size: 26px;
    }

    .about-counter-item-content-silver p {
        margin: 5px 0 0;
    }

    .about-us-footer-list-silver ul li {
        font-size: 14px;
        padding: 8px 10px 8px 26px;
    }

    .service-item-content-silver h2 {
        font-size: 18px;
    }

    .service-item-silver:hover .service-item-btn-silver {
        height: 32px;
        margin-top: 15px;
        padding-top: 15px;
    }

    .why-choose-image-box-silver {
        padding-left: 20px;
    }

    .why-choose-image-box-1-silver {
        width: 48%;
        padding: 0 0 80px;
    }

    .why-choose-author-box-silver {
        border-radius: 10px;
        top: 20px;
        gap: 10px;
        padding: 12px;
    }

    .why-choose-author-image-silver img {
        max-width: 44px;
    }

    .why-choose-author-content-silver {
        width: calc(100% - 54px);
    }

        .why-choose-author-content-silver h2 {
            font-size: 16px;
        }

    .why-choose-image-silver figure {
        margin-right: -80px;
    }

    .why-choose-expert-box-silver {
        width: 52%;
        border-width: 3px;
        padding: 15px 15px 0;
    }

        .why-choose-expert-box-silver:before {
            height: 200px;
        }

    .why-choose-expert-content-silver {
        margin-bottom: 10px;
    }

        .why-choose-expert-content-silver h2 {
            font-size: 26px;
        }

        .why-choose-expert-content-silver p {
            font-size: 14px;
        }

    .why-choose-expert-image-silver figure {
        max-width: 110px;
        margin: 0 auto;
    }

    .why-choose-items-list-silver {
        gap: 20px;
    }

    .why-choose-item-silver {
        width: 100%;
    }

    .why-choose-item-content-silver h3 {
        font-size: 18px;
    }

    .benefit-image-silver figure {
        max-width: 280px;
    }

    .benefit-satisfaction-box-silver {
        padding: 15px;
        bottom: 30px;
    }

    .benefit-satisfaction-content-silver h2 {
        font-size: 28px;
    }

    .benefit-satisfaction-content-silver p {
        font-size: 14px;
    }

    .benefit-item-list-silver {
        padding: 20px;
    }

    .benefit-item-silver {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

    .benefit-item-content-silver h2 {
        font-size: 18px;
    }

    .core-features-image-box-1-silver {
        padding-bottom: 100px;
    }

        .core-features-image-box-1-silver .core-features-image-silver {
            margin-right: -120px;
        }

    .experience-circle-silver {
        margin-bottom: -51px;
        margin-right: 55px;
    }

        .experience-circle-silver img {
            max-width: 90px;
        }

    .core-features-item-silver {
        width: 100%;
        padding: 20px;
        gap: 20px;
        min-height: auto;
    }

    .core-features-item-content-silver h2 {
        font-size: 18px;
    }

    .core-features-item-content-silver p {
        margin-top: 15px;
        padding-top: 15px;
    }

    .team-item-silver {
        min-height: 360px;
        padding: 20px;
    }

    .team-item-content-silver h2 {
        font-size: 18px;
    }

    .team-social-list-silver {
        margin-top: 20px;
        padding-top: 20px;
    }

    .pricing-item-header-silver {
        padding: 15px 15px 20px;
    }

    .pricing-item-content-silver .pricing-item-title-silver {
        font-size: 18px;
    }

    .pricing-item-content-silver h2 {
        font-size: 26px;
    }

        .pricing-item-content-silver h2 sub {
            font-size: 14px;
        }

    .pricing-benefit-list-silver {
        margin-top: 5px;
    }

        .pricing-benefit-list-silver ul {
            gap: 10px;
        }

            .pricing-benefit-list-silver ul li {
                font-size: 14px;
            }

                .pricing-benefit-list-silver ul li img {
                    max-width: 16px;
                    margin-right: 5px;
                }

    .how-work-item-silver {
        width: 100%;
    }

        .how-work-item-silver:nth-child(3n + 3) .how-work-item-no-silver::before {
            width: 100%;
        }

    .how-work-item-no-silver span {
        font-size: 14px;
        padding: 6px 16px;
    }

    .how-work-item-content-box-silver {
        padding: 0 20px 20px;
    }

    .how-work-item-content-silver {
        margin-top: 20px;
    }

        .how-work-item-content-silver h3 {
            font-size: 18px;
        }

    .testimonial-slider-silver,
    .testimonial-slider-silver .swiper,
    .testimonial-slider-silver .swiper-wrapper {
        height: auto;
    }

        .testimonial-slider-silver .swiper {
            padding-bottom: 30px;
        }

    .testimonial-item-silver {
        gap: 20px;
        min-height: auto;
        padding: 20px;
    }

    .testimonial-item-content-silver p {
        font-size: 16px;
    }

    .testimonial-author-box-silver {
        margin-top: 20px;
        padding-top: 20px;
    }

    .testimonial-author-content-silver h2 {
        font-size: 18px;
    }

    .testimonial-cta-box-silver {
        height: auto;
        margin: 30px 0 0 0;
    }

    .testimonial-cta-client-content-silver h2 {
        font-size: 28px;
    }

        .testimonial-cta-client-content-silver h2 span {
            min-width: 45px;
        }

    .faqs-cta-box-silver {
        bottom: 10px;
        left: 10px;
        right: 10px;
        padding: 15px;
    }

        .faqs-cta-box-silver .icon-box {
            margin-bottom: 15px;
        }

    .faqs-cta-content-silver h2 {
        font-size: 18px;
    }

    .faq-accordion-silver .accordion-header .accordion-button {
        font-size: 16px;
        padding: 12px 40px 12px 15px;
    }

    .faq-accordion-silver .accordion-item .accordion-button::after,
    .faq-accordion-silver .accordion-item .accordion-button.collapsed::after {
        font-size: 16px;
        right: 15px;
    }

    .faq-accordion-silver .accordion-item .accordion-body {
        padding: 12px 15px;
    }

    .main-footer-silver {
        padding-bottom: 15px;
    }

    .footer-newsletter-box-title-silver,
    .footer-newsletter-form-silver {
        width: 100%;
    }

        .footer-newsletter-box-title-silver h2 {
            font-size: 28px;
        }

    .footer-links-silver {
        width: 100%;
    }

        .footer-links-silver::before {
            display: none;
        }

        .footer-links-silver h2 {
            font-size: 18px;
            margin-bottom: 15px;
        }

    .footer-copyright-silver {
        flex-direction: column-reverse;
        gap: 15px;
        padding-top: 15px;
    }

    .footer-menu-silver ul {
        gap: 10px 20px;
    }

        .footer-menu-silver ul li {
            font-size: 14px;
        }

            .footer-menu-silver ul li::before {
                right: -12px;
            }
}


.navbar-brand img {
    width: 250px;
}
























/* Header Wrapper */
.header-new {
    background: rgba(0, 0, 0, 0.4); /* Transparent dark overlay as per image */
    backdrop-filter: blur(10px); /* Modern blur effect */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 1050;
}

    /* Sticky Class (Applied automatically by Bootstrap sticky-top) */
    .header-new.sticky-top {
        position: relative;
        top: 0;
        background-color:;
        padding: 2px 0;
    }

    /* Logo Sizing */
    .header-new .logo-main img {
        max-height: 79px;
    }

    .header-new .uae-logo-wrap img {
        max-height: 50px;
        filter: brightness(0) invert(1); /* Ensure UAE logo is white */
    }

    /* Button Styling (Exact colors from image) */
    .header-new .btn-login {
        background-color: #3b4a75; /* Deep Blue */
        color: white;
        border: none;
        padding: 8px 10px;
        border-radius: 6px;
        font-weight: 500;
    }

    .header-new .btn-lang {
        background-color: #8d7051; /* Bronze/Brown */
        color: white;
        border: none;
        padding: 8px 20px;
        border-radius: 6px;
        font-weight: 500;
    }

    .header-new .btn-menu-toggle {
        background-color: #3b4a75;
        border: 1.5px solid #ffffff;
        color: white;
        padding: 4px 7px;
        border-radius: 7px;
    }

/* Offcanvas Custom Design */
.header-new-menu {
    background-color: #fff;
    color: white;
    width: 300px !important;
    z-index: 10000;
}

    .header-new-menu .side-nav-links li a {
        color: #000;
        text-decoration: none;
        padding: 12px 0;
        display: block;
        border-bottom: 1px solid rgba(255,255,255,0.05);
        font-size: 1.05rem;
        transition: 0.3s;
    }

        .header-new-menu .side-nav-links li a:hover {
            color: #8d7051;
            padding-left: 10px;
        }

/* Responsive adjustments */
@media (max-width: 768px) {
    .header-new .logo-main img {
        max-height: 45px;
    }
}



/* Navigation Links */
.header-new .main-nav-links li {
    position: relative;
    padding: 10px 20px;
}

    .header-new .main-nav-links li a {
        color: #ffffff;
        text-decoration: none;
        font-weight: 500;
        font-size: 0.95rem;
        transition: 0.3s;
        display: block;
    }

        .header-new .main-nav-links li a:hover {
            color: #8d7051;
        }

/* Dropdown Logic */
.header-new .dropdown-menu-custom {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: rgba(26, 26, 26, 0.95);
    backdrop-filter: blur(15px);
    min-width: 220px;
    padding: 15px 0;
    list-style: none;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Show Dropdown on Hover */
.header-new .dropdown-item-wrap:hover .dropdown-menu-custom {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.header-new .dropdown-menu-custom li {
    padding: 0;
}

    .header-new .dropdown-menu-custom li a {
        padding: 10px 25px;
        font-size: 0.85rem;
        color: rgba(255, 255, 255, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

        .header-new .dropdown-menu-custom li a:hover {
            background: rgba(141, 112, 81, 0.2);
            color: #ffffff;
            padding-left: 30px; /* Subtle slide effect */
        }

    .header-new .dropdown-menu-custom li:last-child a {
        border-bottom: none;
    }

/* Arrow indicator styling */
.header-new .fa-chevron-down {
    font-size: 0.7rem;
    transition: 0.3s;
}

.header-new .dropdown-item-wrap:hover .fa-chevron-down {
    transform: rotate(180deg);
}



/* Ensure the parent link highlights when the menu is open */
.header-new-menu .side-nav-links li a:not(.collapsed) {
    color: #8d7051 !important; /* Brand Bronze */
    background: rgba(141, 112, 81, 0.05);
}

/* Smooth arrow rotation for the active dropdown */
.header-new-menu .side-nav-links li a i {
    transition: transform 0.3s ease;
}

.header-new-menu .side-nav-links li a:not(.collapsed) i {
    transform: rotate(180deg);
}

/* Subtle animation for the sub-menu appearance */
.collapse {
    transition: height 0.3s ease-out;
}

.header-new-menu .sub-menu {
    padding-bottom: 10px;
    border-left: 2px solid rgba(141, 112, 81, 0.3);
    margin-left: 10px;
}


/* 1. Initial State (Static at top) */
.header-new {
    background: #ffffff;
    backdrop-filter: none;
    border-bottom: transparent;
    transition: all 0.4s ease-in-out;
    z-index: 20;
    width: 100%;
    position: absolute; /* Sits on top of the hero image */
    top: 0;
    left: 0;
}

    /* 2. Sticky State (Triggered by JS on scroll) */
    .header-new.is-sticky {
        position: fixed; /* Fixes to viewport */
        background: rgba(255, 255, 255, 0.88); /* Slightly darker for readability on white content */
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
        animation: slideDown 0.4s ease; /* Smooth entrance animation */
        top: 0;
        padding: 0px 0;
    }

@keyframes slideDown {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}


.btn-menu-toggle img {
    width: 30px;
}

.emirates-logos {
    margin-left: 15px;
}

    .emirates-logos img {
        width: 180px;
    }


.offcanvas-header img {
    width: 210px;
}

.wdth {
    width: 356px;
    height: 557px;
}

/* Rest of your existing CSS remains the same... */










/* Overlay */
.cookie-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s ease;
    z-index: 999999999999;
}

    /* Show class */
    .cookie-overlay.show {
        opacity: 1;
        visibility: visible;
    }

/* Popup box */
.cookie-popup {
    background: #fff;
    width: 90%;
    max-width: 420px;
    padding: 25px;
    border-radius: 14px;
    text-align: center;
    transform: translateY(40px);
    opacity: 0;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

/* Animate popup */
.cookie-overlay.show .cookie-popup {
    transform: translateY(0);
    opacity: 1;
}

/* Title */
.cookie-popup h3 {
    margin-bottom: 10px;
}

/* Text */
.cookie-popup p {
    font-size: 14px;
    color: #555;
    margin-bottom: 20px;
}

/* Buttons */
.cookie-buttons {
    display: flex;
    gap: 10px;
}

    .cookie-buttons button {
        flex: 1;
        padding: 10px;
        border: none;
        border-radius: -11px;
        cursor: pointer;
        font-weight: 500;
    }

/* Button styles */
.accept {
    background: #22315a;
    color: white;
}

.reject {
    background: #927556;
    color: white;
}

.accept:hover {
    background: #795548;
}

.reject:hover {
    background: #8d7051;
}













.donation-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    padding: 20px;
    align-items: center;
    gap: 20px;
    transition: 0.3s;
}

/* IMAGE */
.img-box {
    position: relative;
    overflow: hidden;
    border-radius: 15px;
    min-width: 200px;
}

    .img-box img {
        width: 100%;
        height: 220px;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    /* 🔥 HOVER ZOOM */
    .img-box:hover img {
        transform: scale(1.1);
    }

/* BADGE */
.badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: #114c5c;
    color: #fff;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 2;
}

    .badge.orange {
        background: #f4a300;
    }

/* CONTENT */
.content {
    flex: 1;
}

    .content h3 {
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 6px;
        line-height: 22px;
        color: #114c5c;
    }

    .content p {
        color: #777;
        font-size: 16px;
    }

/* PROGRESS BAR */
.progress-bar-wrap {
    height: 9px;
    background: #eee;
    border-radius: 10px;
    margin: 6px 0 15px 0;
    overflow: hidden;
}

.progress-bar-fill {
    width: 75%;
    height: 100%;
    background: #f4a300;
}

/* AMOUNT */
.amount small {
    color: #777;
}

.amount h6 {
    font-weight: 500;
}

/* BUTTON */
.donate-btn {
    display: inline-block;
    margin-top: 15px;
    background: #1f6f5f;
    color: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

    .donate-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 40px rgba(24, 167, 184, 0.32);
    }

/* RESPONSIVE */
@media (max-width: 768px) {
    .donation-card {
        flex-direction: column;
        text-align: center;
    }

    .img-box img {
        height: 200px;
    }

    .amount {
        justify-content: center !important;
        gap: 40px;
    }
}


.progress-bar-fill {
    width: 0;
    height: 100%;
    background: #b69673;
    transition: width 1.5s ease-in-out;
}

/* CARD FULL HEIGHT */
.donation-card {
    /*! background: #fff; */
    border-radius: 15px;
    overflow: hidden;
    padding: 20px;
    gap: 20px;
    align-items: stretch; /* 🔥 KEY */
}

/* IMAGE FULL HEIGHT */
.img-box {
    position: relative;
    overflow: hidden;
    border-radius: 9px;
    width: 100%;
    height: 230px;
    display: flex;
    margin-bottom: 15px;
}

    .img-box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* 🔥 IMPORTANT */
        transition: transform 0.5s ease;
    }

/* CONTENT TAKE FULL SPACE */
.content {
    /*! width: 60%; */
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* RESPONSIVE FIX */
@media (max-width: 768px) {
    .donation-card {
        flex-direction: column;
    }

    .img-box {
        width: 100%;
        height: 220px;
    }

    .content {
        width: 100%;
    }
}


.prog-cntnt {
    min-height: 63px;
}

.donation-card .prog-cntnt p {
    margin-bottom: 5px;
}

.donation-card .prog-cntnt .cas {
    background-color: #fff;
    padding: 1px 10px;
    border-radius: 5px;
    display: inline-block;
    color: #000;
    margin-bottom: 9px;
    border: solid 1px #ccc;
}

.progrs-br-wrap {
    padding: 8px;
    border-radius: 5px;
    background-color: #fff;
    border: solid 1px #dfc8af;
    margin-top: 9px;
    margin-bottom: 28px;
}

.donation-card .about-us-btn {
    margin-top: 0;
}





/* MAIN WRAPPER */
.p-tabs {
    width: 100%;
}

    /* TAB MENU */
    .p-tabs .tab-menu {
        display: flex;
        gap: 15px;
        list-style: none;
        padding: 0;
        margin-bottom: 25px;
        flex-wrap: wrap;
        justify-items: end;
        float: right;
    }

        .p-tabs .tab-menu li {
            padding: 10px 20px;
            background: #8d7051;
            border-radius: 30px;
            cursor: pointer;
            transition: 0.3s;
            font-weight: 500;
            font-size: 16px;
            font-weight: 500;
            line-height: 1em;
            text-transform: capitalize;
            color: var(--white-color);
            background: #15999b;
            border-radius: 5px;
            padding: 17px 24px 17px 24px;
            background: linear-gradient(135deg, #0d6477, #18a7b8);
        }

            /* ACTIVE TAB */
            .p-tabs .tab-menu li.active {
                background: #114c5c;
                color: #fff;
                background: rgba(255,255,255,.88);
                color: #15999b;
                border: 1.5px solid #15999ba6;
            }

            /* HOVER */
            .p-tabs .tab-menu li:hover {
                background: #22315a;
                color: #fff;
            }

    /* TAB CONTENT */
    .p-tabs .tab-content {
        display: none;
        animation: fadeIn 0.4s ease;
    }

        .p-tabs .tab-content.active {
            display: block;
        }

/* ANIMATION */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .p-tabs .tab-menu {
        justify-content: center;
    }
}


.post-item-body .about-us-btn {
    margin-top: 0;
}

.feature-item-counter-content-gold h2 {
    color: #fff
}

.cnt-bx {
    text-align: center;
    border: solid 1px #cccccc36;
    padding: 20px 15px;
    border-radius: 8px;
    background-color: #15999b;
    background: linear-gradient(135deg, #0d6477, #18a7b8);
}

    .cnt-bx p {
        color: #fff;
        font-size: 21px;
    }

.section-content-btn {
    float: right;
    text-align: right;
}

.section-btn {
    float: right;
}

.iso-wrap {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

    .iso-wrap img {
        width: 80px;
    }

.mt-20 {
    margin-top: 20px;
}







/* MAIN */
.p-chatbot {
    position: fixed;
    bottom: 75px;
    right: 75px;
    z-index: 9999999;
    font-family: var(--default-font);
}

/* BUTTON */
.chat-toggle {
    width: 55px;
    height: 55px;
    background: #15999b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 22px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* CHAT BOX */
.chat-box {
    width: 320px;
    height: 420px;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    display: none;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 10px;
}

/* HEADER */
.chat-header {
    background: #128092;
    color: #fff !important;
    padding: 12px;
    display: flex;
    justify-content: space-between;
}

.close-chat {
    cursor: pointer;
}

/* BODY */
.chat-body {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    background: #f5f5f5;
}

/* MESSAGE */
.msg {
    padding: 8px 12px;
    margin: 6px 0;
    border-radius: 10px;
    max-width: 75%;
    font-size: 14px;
}

    .msg.bot {
        background: #e0e0e0;
    }

    .msg.user {
        background: #1f6f5f;
        color: #fff;
        margin-left: auto;
    }

/* FOOTER */
.chat-footer {
    display: flex;
    border-top: 1px solid #ddd;
}

    .chat-footer input {
        flex: 1;
        border: none;
        padding: 10px;
        outline: none;
    }

    .chat-footer button {
        background: #0d6679;
        color: #fff;
        border: none;
        padding: 0 15px;
        cursor: pointer;
    }

/* RESPONSIVE */
@media (max-width: 480px) {
    .chat-box {
        width: 100%;
        height: 100vh;
        position: fixed;
        bottom: 0;
        right: 0;
        border-radius: 0;
    }
}



.chat-toggle {
    transition: 0.3s;
}

    .chat-toggle.hide {
        opacity: 0;
        visibility: hidden;
    }

.chat-header h2 {
    color: #fff !important;
    font-size: 22px;
}




/* MAIN WRAPPER */
.p-float-icons {
    position: fixed;
    right: 25px;
    bottom: 87px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9;
}

/* BUTTON */
.float-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #1f6f5f;
    color: #fff;
    padding: 13px 0px 13px 10px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 17px;
    transition: 0.3s;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
}

    /* ICON */
    .float-btn i {
        font-size: 33px;
    }

    /* HOVER EXPAND */
    .float-btn span {
        max-width: 0;
        overflow: hidden;
        transition: 0.3s;
    }

    .float-btn:hover span {
        max-width: 120px;
    }

    /* COLORS */
    .float-btn.whatsapp {
        background: #25D366;
    }

    .float-btn.donate {
        background: #15999b;
    }

    .float-btn.zakat {
        background: #114c5c;
    }

    /* HOVER EFFECT */
    .float-btn:hover {
        transform: translateX(-5px);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        padding-right: 15px;
    }

/* MOBILE */
@media (max-width: 768px) {
    .p-float-icons {
        right: 10px;
        bottom: 80px;
    }

    .float-btn {
        padding: 10px;
    }

        .float-btn span {
            display: none; /* only icons on mobile */
        }
}




.whatsapp-h {
    bottom: 83px;
}

.donat-i {
    bottom: 47x;
}

.zakat-i {
    bottom: 150px;
}


.btn-close-white {
    background-color: #000;
}

.cr-btns a {
    background-color: #15999b;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    font-size: 18px;
}

    .cr-btns a:hover {
        background-color: #786149;
    }








.icn-slider .swiper-slide {
    text-align: center;
}

/* CARD DESIGN */
.icn-card {
    background: #ecf8fb;
    border-radius: 12px 12px 0 0;
    padding: 30px 20px;
    transition: 0.3s ease;
    border: solid 1px #bbced3;
}

    .icn-card img {
        width: 100px;
        height: 100px;
        object-fit: contain;
        margin-bottom: 15px;
        border-radius: 50%;
        background-color: #fff;
        padding: 7px;
        border: dashed 1px #15999b;
    }

    /* TEXT */
    .icn-card h4 {
        font-size: 20px;
        color: #114c5c;
        margin: 0;
        line-height: 1.2;
    }

    /* HOVER EFFECT */
    .icn-card:hover {
        transform: translateY(0px);
        background: #3b4a7526;
    }

/* RESPONSIVE */
@media (max-width: 768px) {
    .icn-card {
        padding: 20px 15px;
    }

        .icn-card h4 {
            font-size: 14px;
        }
}



.icn-slider {
    position: relative;
}

    /* NAV BUTTONS */
    .icn-slider .swiper-button-next,
    .icn-slider .swiper-button-prev {
        background: #fff;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        box-shadow: 0 3px 10px rgba(0,0,0,0.1);
        color: #000;
    }

        .icn-slider .swiper-button-next::after,
        .icn-slider .swiper-button-prev::after {
            font-size: 16px;
            font-weight: 500;
        }

    /* POSITION */
    .icn-slider .swiper-button-next {
        right: 0;
    }

    .icn-slider .swiper-button-prev {
        left: 0;
    }

    /* PAGINATION DOTS */
    .icn-slider .swiper-pagination {
        margin-top: 20px;
        position: relative;
    }

    .icn-slider .swiper-pagination-bullet {
        background: #ccc;
        opacity: 1;
    }

    .icn-slider .swiper-pagination-bullet-active {
        background: #8d7051;
        width: 50px;
        border-radius: 79px;
    }



.thmb-wrap {
    padding: 50px 0 50px 0;
}

.icn-card h4 {
    min-height: 50px;
}

.ttls .section-sub-title {
    background: #F6F6F6 !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    color: #333 !important;
}


.ttls .text-anime-style-3 {
    color: #114c5c !important;
}




/* CARD */
.donation-card {
    /*! width: 380px; */
    /*! background: #fff; */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    border: solid 1px #cccccc82;
    overflow: hidden;
}

/* PROGRESS BAR */
.progress {
    background: #d4e5e9;
    height: 25px;
    position: relative;
    margin-bottom: 5px;
    border: solid 1px #15999b47;
}

.progress-bar {
    width: 76%;
    background: #15999b;
    height: 100%;
    color: #fff;
    font-weight: 500;
    text-align: center;
    line-height: 37px;
}

/* CONTENT */
.content {
    padding:;
}

/* AMOUNTS */
.amounts {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

    .amounts p {
        margin: 0;
        color: #636363;
        font-weight: 500;
    }

    .amounts span {
        display: block;
        margin-top: 5px;
        font-weight: 500;
        font-size: 18px;
        color: #114c5c;
        letter-spacing: .2px;
    }

/* INPUT + BUTTON */
.donate-row {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

    .donate-row input {
        flex: 1;
        padding: 12px;
        border: 1px solid #d4d4d4;
        border-radius: 6px;
        font-size: 14px;
        outline: none;
    }

    .donate-row button {
        background: #114c5c;
        color: #fff;
        border: none;
        padding: 0 20px;
        border-radius: 6px;
        font-size: 18px;
        cursor: pointer;
        background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
        color: rgb(255, 255, 255);
        box-shadow: rgba(13, 111, 104, 0.24) 0px 16px 36px;
    }

/* BUTTON ROW */
.btn-row {
    display: flex;
    gap: 10px;
}

.btn-outline {
    flex: 1;
    cursor: pointer;
    font-size: 16px;
    cursor: pointer;
    background: rgba(255,255,255,.88);
    color: #15999b;
    border: 1.5px solid #15999ba6;
    padding: 0;
    border-radius: 8px;
    font-weight: 500;
}

/* CART BUTTON */
.cart-btn {
    width: auto;
    border: 1.5px solid #22315a;
    border-radius: 6px;
    background: transparent;
    color: #22315a;
    font-size: 16px;
    cursor: pointer;
    padding: 0px 20px;
    font-size: 16px;
    cursor: pointer;
    background: rgba(255,255,255,.88);
    color: #15999b;
    border: 1.5px solid #15999ba6;
    font-weight: 500;
}


.btn-outline:hover {
    background-color: bisque;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 22px 40px rgba(24, 167, 184, 0.32);
    background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
    color: rgb(255, 255, 255);
}

.cart-btn img {
    width: 19px;
    margin-left: 8px;
}




/* MAIN */
.new-menu {
    background: transparent;
    color: #0e0e0e;
}

    .new-menu .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px 20px;
    }

    /* LOGO */
    .new-menu .logo {
        font-size: 20px;
        font-weight: 500;
    }

    /* MENU */
    .new-menu .menu {
        display: flex;
        list-style: none;
        gap: 16px;
        margin: 0;
        padding: 0;
    }

        .new-menu .menu li {
            position: relative;
            list-style: none;
        }

        .new-menu .menu a {
            color: #262626;
            text-decoration: none;
            padding: 9px 0;
            display: flex;
            align-items: center;
            gap: 0px;
            font-size: 18px;
        }

    /* ARROW */
    .new-menu .arrow {
        transition: 0.3s;
    }

    /* DROPDOWN */
    .new-menu .dropdown {
        position: absolute;
        top: 60px;
        left: 0;
        background: #fff;
        min-width: 180px;
        border-radius: 8px;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: 0.3s;
        margin-left: 0;
        left: 0;
        padding-left: 0px;
    }

        .new-menu .dropdown a {
            color: #333;
            padding: 14px 11px;
        }

            .new-menu .dropdown a:hover {
                background: #f5f5f5;
            }

    /* HOVER (DESKTOP) */
    .new-menu .has-dropdown:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .new-menu .has-dropdown:hover .arrow {
        transform: rotate(180deg);
    }

/* TOGGLE BUTTON */
.menu-toggle {
    display: none;
    font-size: 24px;
    cursor: pointer;
}


@media (max-width: 768px) {

    .menu-toggle {
        display: none;
    }

    .new-menu .menu {
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #1f6f5f;
        flex-direction: column;
        display: none;
    }

        .new-menu .menu.active {
            display: flex;
        }

        .new-menu .menu li {
            border-top: 1px solid rgba(255,255,255,0.2);
        }

    .new-menu .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        display: none;
        transform: none;
        background: #155a4d;
    }

        .new-menu .dropdown a {
            color: #fff;
        }

        .new-menu .dropdown.show {
            display: block;
        }
}



.dont-btns a {
    background-color: #15999b;
    color: #fff;
    padding: 15px;
    width: 100%;
    display: block;
    border-radius: 0 0 10px 10px;
    font-size: 19px;
}



.d-mt {
    font-size: 17px;
    margin-bottom: 9px;
    color: #444;
}

.cart-btn:hover {
    background-color: #516fc221;
    background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
    color: rgb(255, 255, 255);
    color: #fff;
    transform: translateY(-3px);
}

.btn-lang img {
    width: 20px;
    margin-right: 5px;
}

.btn-login img {
    width: 18px;
    margin-right: 5px;
}

.btn:hover {
    opacity: .9
}

.catgory-w:hover .dont-btns a {
    background-color: #114c5c;
}

.catgory-w:hover .icn-card {
    background-color: #fff6ed;
}






















/* MAIN */
.m-banner {
    width: 100%;
    /*! height: 600px; */
    padding: 0;
    border-radius: 0;
}

    /* SLIDE */
    .m-banner .swiper-slide {
        position: relative;
    }

    /* IMAGE */
    .m-banner .banner-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* OVERLAY */
    .m-banner .banner-item::after {
        content: "";
        /*! position: absolute; */
        inset: 0;
        /*! background: rgba(0,0,0,0.3); */
    }

    /* CONTENT */
    .m-banner .banner-content {
        position: absolute;
        top: 50%;
        left: 5%;
        transform: translateY(-50%);
        color: #fff;
        max-width: 500px;
        z-index: 2;
        text-align: left;
    }

    /* ARABIC */
    .m-banner .arabic {
        font-size: 50px;
        font-weight: 500;
        margin-bottom: 10px;
        color: #114c5c;
    }

    /* ENGLISH HIGHLIGHT */
    .m-banner .highlight {
        display: inline-block;
        background: transparent;
        padding: 8px 15px;
        font-size: 56px;
    }

    /* BUTTON */
    .m-banner .donate-btn {
        display: inline-block;
        margin-top: 20px;
        background: #fff;
        color: #333;
        padding: 10px 20px;
        border-radius: 30px;
        text-decoration: none;
    }

    /* ARROWS */
    .m-banner .swiper-button-prev,
    .m-banner .swiper-button-next {
        color: red;
    }

/* RESPONSIVE */
@media (max-width: 768px) {
    .m-banner {
        height: 400px;
    }

        .m-banner .banner-content {
            right: 5%;
            left: 5%;
            text-align: center;
        }

        .m-banner .arabic {
            font-size: 21px;
        }

        .m-banner .highlight {
            font-size: 18px;
        }
}

.m-banner .banner-item {
    border-radius: 0;
    overflow: hidden;
}


























.new-header-wrap {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
}



    /* Top Header */
    .new-header-wrap .top-header {
        padding: 2px 0 10px 0;
    }

    .new-header-wrap .logo-section {
        width: 284px;
    }

    .new-header-wrap .main-logo {
        height: 60px;
    }

    .new-header-wrap .star-logo {
        height: 50px;
    }

    .new-header-wrap .search-box {
        position: relative;
        border: 1.5px solid #c5a059; /* Gold border */
        border-radius: 8px;
        padding: 5px 15px;
        display: flex;
        width: 300px;
    }

        .new-header-wrap .search-box input {
            border: none;
            outline: none;
            width: 100%;
            padding: 8px 0;
            color: #666;
        }

    .new-header-wrap .search-btn {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 18px;
        color: #333;
    }

    /* Nav Bar */
    .new-header-wrap .nav-bar {
        background: #15999b21;
        padding: 0;
    }

    .new-header-wrap .nav-links {
        list-style: none;
        display: flex;
        margin: 0;
        padding: 0;
    }

        .new-header-wrap .nav-links li {
            position: relative;
        }

        .new-header-wrap .nav-links a {
            text-decoration: none;
            color: #114c5c;
            font-weight: 500;
            padding: 15px 19px 15px 0px;
            display: block;
            font-size: 18px;
            transition: 0.3s;
        }

            .new-header-wrap .nav-links a:hover,
            .new-header-wrap .nav-links a.active {
                color: #114c5c;
            }

    /* Dropdown Logic */
    .new-header-wrap .dropdown-menu {
        position: absolute;
        top: 100%;
        left: 0;
        background: #fff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        list-style: none;
        min-width: 200px;
        display: none;
        z-index: 1000;
    }

    .new-header-wrap .dropdown:hover .dropdown-menu {
        display: block;
    }

    .new-header-wrap .header-icons {
        display: flex;
        gap: 20px;
        font-size: 20px;
        color: #c5a059;
    }

    .new-header-wrap .mobile-toggle {
        display: none;
        font-size: 30px;
        background: none;
        border: none;
        cursor: pointer;
    }

/* Responsive Mobile Styles */
@media (max-width: 991px) {
    .new-header-wrap .mobile-toggle {
        display: block;
    }

    .new-header-wrap .search-container {
        display: none;
    }
    /* Hide search on small mobile */

    .new-header-wrap .nav-bar {
        position: fixed;
        right: -100%; /* Start hidden on right */
        top: 0;
        height: 100vh;
        width: 280px;
        background: #fff;
        z-index: 2000;
        transition: 0.4s;
        box-shadow: -5px 0 15px rgba(0,0,0,0.1);
        display: block;
    }

        .new-header-wrap .nav-bar.active {
            right: 0;
        }

    .new-header-wrap .nav-links {
        flex-direction: column;
        padding-top: 60px;
    }

    .new-header-wrap .dropdown-menu {
        position: static;
        box-shadow: none;
        background: #f9f9f9;
        padding-left: 20px;
    }

    .new-header-wrap .menu-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.5);
        z-index: 1500;
    }

        .new-header-wrap .menu-overlay.active {
            display: block;
        }
}





.top-header-logos-w {
    display: flex;
    justify-content: space-between;
    align-items: center;
}








.uae-logo-s img {
    width: 80px;
}

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

.dropdown-menu li a {
    padding: 10px 15px !important;
    font-size: 17px !important;
}

    .dropdown-menu li a:hover {
        background-color: #f8f8f8;
    }





/* Tooltip Container */
.new-header-wrap .tooltip-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

    /* Tooltip Bubble */
    .new-header-wrap .tooltip-trigger::before {
        content: attr(data-tooltip);
        position: absolute;
        top: 140%; /* Position below the icon */
        left: 50%;
        transform: translateX(-50%) translateY(10px);
        background-color: #1a1c1e; /* Dark grey/black */
        color: #fff;
        padding: 8px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 500;
        white-space: nowrap;
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease-in-out;
        z-index: 999;
    }

    /* Tooltip Arrow (The triangle) */
    .new-header-wrap .tooltip-trigger::after {
        content: "";
        position: absolute;
        top: 140%;
        left: 50%;
        transform: translateX(-50%) translateY(0);
        border-width: 6px;
        border-style: solid;
        border-color: transparent transparent #1a1c1e transparent; /* Points up */
        opacity: 0;
        visibility: hidden;
        transition: all 0.2s ease-in-out;
        z-index: 999;
        margin-top: -11px; /* Adjust to sit perfectly on top of bubble */
    }

    /* Hover State */
    .new-header-wrap .tooltip-trigger:hover::before,
    .new-header-wrap .tooltip-trigger:hover::after {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0);
    }

/* Ensure SVG icons match the gold color */
.new-header-wrap .header-icons svg {
    transition: transform 0.2s;
}

.new-header-wrap .header-icons a:hover svg {
    transform: scale(1.1);
}

.hero-video-gold {
    margin-top: 15px;
}

.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: "/";
}

.pt-6 {
    padding-top: 15px;
}

.service-entry h6 {
    margin-bottom: 10px;
}

.p-lft {
    padding: 0 20px 0 0;
}







.don-wi {
    background: #f5f4ef;
    padding: 35px;
    border-radius: 15px;
}

    /* Title */
    .don-wi .title {
        font-weight: 500;
        font-size: 14px;
        margin-bottom: 33px;
    }

        .don-wi .title span {
            color: red;
        }

    /* Checkbox Grid */
    .don-wi .checkbox-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px 60px;
        margin-bottom: 30px;
    }

    .don-wi .check-item {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        font-size: 16px;
        color: #333;
    }

        /* Custom Checkbox */
        .don-wi .check-item input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            background-color: aqua;
        }

    /* Description Label */
    .don-wi .desc-label {
        font-weight: 500;
        margin-bottom: 10px;
    }

    /* Textarea */
    .don-wi textarea {
        width: 100%;
        height: 200px;
        border-radius: 20px;
        border: none;
        background: #fff;
        padding: 20px;
        resize: none;
        font-size: 15px;
    }

/* Responsive */
@media (max-width: 768px) {
    .don-wi .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .don-wi .checkbox-grid {
        grid-template-columns: 1fr;
    }
}




.dnt-fms select {
    word-wrap: normal;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background: #F5F4EF;
    border: none;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: none;
    outline: none;
    width: 100%;
}


.mt-30 {
    margin-top: 30px;
}

.imp-nts h6 {
    margin-bottom: 10px;
}

.imp-nts ul {
    padding-left: 15px;
}

.imp-nts li {
    line-height: 25px;
}


.Critical-Cases-w {
    padding: 20px 0 50px 0;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .Critical-Cases-w .donation-card {
        margin: 15px 0
    }




.dn-details-p {
    background: #f5f4ef;
    padding: 30px;
    max-width: 100%;
    margin: auto;
    border-radius: 15px;
    padding: 22px;
    border-radius: 15px;
    background: #f6fbfc;
    border: 1px solid #dceef2;
    margin-bottom: 24px;
    box-shadow: rgba(15, 58, 47, 0.06) 0px 12px 35px;
    transition: 0.35s;
    border: 1px solid rgba(21, 153, 155, 0.49);
}

    /* Title */
    .dn-details-p h1 {
        font-size: 21px;
        margin-bottom: 10px;
    }

    /* Description */
    .dn-details-p .desc {
        color: #444;
        line-height: 1.6;
        margin-bottom: 20px;
        font-weight: 500;
    }

    /* Info Row */
    .dn-details-p .info-row {
        display: flex;
        justify-content: space-between;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        padding: 15px 0;
        margin-bottom: 20px;
    }

    .dn-details-p .info-box {
        flex: 1;
    }

        .dn-details-p .info-box strong {
            display: block;
            margin-bottom: 5px;
        }

    /* Form Row */
    .dn-details-p .form-row {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 20px;
    }

    .dn-details-p .input-box {
        flex: 1;
    }

    .dn-details-p input {
        width: 100%;
        padding: 7px;
        border-radius: 8px;
        border: 1px solid #158e96cf;
        font-size: 16px;
    }

    /* Quantity */
    .dn-details-p .qty-box {
        display: inline-block;
        align-items: center;
        border: 1px #ccc solid;
        border-radius: 8px;
        overflow: hidden;
    }

        .dn-details-p .qty-box button {
            width: 43px;
            height: 43px;
            border: none;
            background: #15999b;
            font-size: 18px;
            cursor: pointer;
            color: #fff;
        }

        .dn-details-p .qty-box input {
            width: 50px;
            text-align: center;
            border: none;
            border-radius: 0;
        }

    /* Buttons */
    .dn-details-p .btn-row {
        display: flex;
        gap: 15px;
        margin-top: 20px;
    }

    .dn-details-p .btn {
        flex: 1;
        padding: 15px;
        border-radius: 8px;
        border: none;
        font-size: 17px;
        cursor: pointer;
        background-color: #114c5c;
        color: #fff;
        font-weight: 500;
        background: linear-gradient(135deg, rgb(13, 100, 119), rgb(24, 167, 184));
        color: rgb(255, 255, 255);
        box-shadow: rgba(24, 167, 184, 0.25) 0px 16px 32px;
    }

    .dn-details-p .cart {
        background: rgba(255,255,255,.88);
        color: #15999b;
        border: 1.5px solid #15999ba6;
    }

    .dn-details-p .donate {
        background: transparent;
        border: 2px solid #3aa0b2;
        color: #3aa0b2;
    }

.sr-imgs img {
    border-radius: 15px;
    width: 100%
}

.case-detail-badge {
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 5;
    background: linear-gradient(135deg, #159aa3, #087489);
    color: #fff;
    border-radius: 11px;
    padding: 10px 16px;
    font-size: 16px;
    font-weight: 500;
    box-shadow: 0 12px 28px rgba(8,116,137,0.25);
}

.fs-13 {
    font-size: 13px !important;
}

.input-box label {
    margin-bottom: 9px;
    width: 100%;
    font-size: 16px;
}

.news-w {
    padding: 50px 0 50px 0;
}

    .news-w .news-date {
        display: inline-flex;
        align-items: center;
        margin-bottom: 8px;
        color: #15999b;
        font-size: 14px;
        font-weight: 700;
    }

/* Responsive */
@media(max-width:600px) {
    .dn-details-p .info-row {
        flex-direction: inherit;
        gap: 10px;
    }

    .dn-details-p .btn-row {
        flex-direction: column;
    }
}





.shar-pop-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 999;
}

    /* Main Button */
    .shar-pop-btn .main-btn {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: #15999b;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: pointer;
    }

    /* Popup */
    .shar-pop-btn .share-box {
        position: absolute;
        bottom: 47px;
        right: 0;
        width: 45px;
        background: #114c5c;
        border-radius: 30px;
        padding: 10px 0;
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* Show */
    .shar-pop-btn.active .share-box {
        display: flex;
    }

    /* Icons */
    .shar-pop-btn .share-box a {
        color: #fff;
        font-size: 16px;
        text-decoration: none;
    }

    /* Divider */
    .shar-pop-btn .divider {
        width: 30px;
        height: 1px;
        background: rgba(255,255,255,0.3);
    }


.page-services .service-item {
    background-color: #F5F4EF;
}


.service-item {
    min-height: auto;
}



/* MAIN WRAPPER */
.submit-wraps {
    max-width: 100;
    margin: 0px auto;
    padding: 0;
    line-height: 1.6;
    color: #333;
}

    /* CARD STYLE */
    .submit-wraps .card {
        background: #fff;
        border-radius: 12px;
        padding: 10px 25px;
        margin-bottom: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0);
    }

    /* HEADINGS */
    .submit-wraps h2 {
        font-size: 22px;
        margin-bottom: 15px;
        color: #222;
        border-left: 4px solid #15999b;
        padding-left: 10px;
        margin-top: 18px;
    }

    .submit-wraps h3 {
        font-size: 20px;
        margin: 15px 0 10px;
        color: #114c5c;
    }

    /* LIST STYLE */
    .submit-wraps ul {
        padding-left: 20px;
    }

        .submit-wraps ul li {
            margin-bottom: 6px;
        }

            .submit-wraps ul li strong {
                color: #4d4d4d;
            }

    /* NOTICE BOX */
    .submit-wraps .notice {
        background: #f5f4ef;
        padding: 15px;
        border-left: 5px solid #15999b;
        border-radius: 8px;
        font-size: 17px;
    }

    /* AGREEMENT */
    .submit-wraps .agreement {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        margin-top: 20px;
        font-size: 17px;
    }

    .submit-wraps input[type="checkbox"] {
        width: 18px;
        height: 18px;
        margin-top: 4px;
    }

    /* BUTTON */
    .submit-wraps .btn {
        margin-top: 13px;
        padding: 12px 25px;
        background: #15999b;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 17px;
        transition: 0.3s;
    }

        .submit-wraps .btn:hover {
            background: #114c5c;
        }

/* RESPONSIVE */
@media (max-width: 768px) {
    .submit-wraps {
        padding: 0;
    }
}










/* MAIN WRAPPER */
.track-wrap {
    margin: 0px auto;
    padding: 0px 20px;
    text-align: center;
}

    /* HEADING */
    .track-wrap .title {
        font-size: 20px;
        color: #333;
        margin-bottom: 30px;
    }

    /* FORM BOX */
    .track-wrap .track-box {
        background: #fff;
        max-width: 800px;
        margin: auto;
        padding: 30px 25px;
        border-radius: 15px;
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    }

    /* LABEL */
    .track-wrap label {
        display: block;
        text-align: left;
        font-weight: 500;
        margin-bottom: 10px;
        color: #444;
        font-size: 15px;
    }

        .track-wrap label span {
            color: red;
        }

    /* INPUT */
    .track-wrap input {
        width: 100%;
        padding: 18px 20px;
        border-radius: 8px;
        border: 1px solid #ddd;
        background: #f5f4ef00;
        font-size: 15px;
        outline: none;
        transition: 0.3s;
        margin-top: 10px;
    }

        .track-wrap input:focus {
            border-color: #007bff;
            background: #fff;
            box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
        }

    /* BUTTON */
    .track-wrap .btn-track {
        margin-top: 25px;
        padding: 12px 35px;
        border-radius: 6px;
        border:;
        background: #15999b;
        color: #fff;
        font-size: 17px;
        cursor: pointer;
        transition: 0.3s;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 12px 24px rgba(21,154,163,.18);
    }

        .track-wrap .btn-track:hover {
            color: #fff;
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(7, 156, 161, .28);
        }

/* RESPONSIVE */
@media (max-width: 600px) {
    .track-wrap .track-box {
        padding: 20px;
    }
}








/* MAIN WRAPPER */
.magazine-wrap {
    max-width: 100%;
    margin: 0px auto;
    padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(260px, 2fr));
    gap: 30px;
}

    /* CARD */
    .magazine-wrap .mag-card {
        background: #f5f4ef;
        border-radius: 10px;
        padding: 8px;
        text-align: center;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.05);
        margin-bottom: 10px;
        background: #ffffff;
        border: 1px solid #dceef2;
        border-radius: 10px;
        padding: 18px;
        box-shadow: 0 12px 28px rgba(13, 64, 84, 0.04);
        transition: 0.3s ease;
    }

        .magazine-wrap .mag-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 15px 30px rgba(0,0,0,0.1);
        }

    /* IMAGE */
    .magazine-wrap .mag-img {
        width: 100%;
        height: 220px;
        background: #ddd;
        border-radius: 10px;
        margin-bottom: 15px;
        overflow: hidden;
    }

        .magazine-wrap .mag-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    /* TITLE */
    .magazine-wrap .mag-title {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
        line-height: 25px;
    }

    /* BUTTON */
    .magazine-wrap .mag-btn {
        display: inline-block;
        width: 100%;
        padding: 12px;
        background: #15999b;
        color: #fff;
        border-radius: 6px;
        text-decoration: none;
        font-weight: 500;
        transition: 0.3s;
        background: linear-gradient(135deg, #0d6477, #18a7b8);
        color: #fff;
        box-shadow: 0 16px 32px rgba(24, 167, 184, 0.25);
    }

        .magazine-wrap .mag-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 14px 30px rgba(7, 156, 161, .28);
        }

    /* OPTIONAL BADGE */
    .magazine-wrap .badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: #176b43;
        color: #fff;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 20px;
    }

    /* CARD RELATIVE */
    .magazine-wrap .mag-card {
        position: relative;
    }

.mag-title p {
    margin-bottom: 5px;
    font-size: 16px;
}





/* MAIN WRAPPER */
.banks-s--wrap {
    max-width: 800px;
    margin: 0px auto 20px auto;
    padding: 20px 0px;
    text-align: center;
}

    /* LOGO */
    .banks-s--wrap .bank-logo img {
        max-width: 260px;
        margin-bottom: 20px;
    }

    /* TITLE */
    .banks-s--wrap .bank-title {
        font-size: 24px;
        font-weight: 500;
        color: #333;
        margin-bottom: 15px;
    }

    /* DIVIDER */
    .banks-s--wrap .divider {
        width: 120px;
        height: 3px;
        background: #6b4b2a;
        margin: 10px auto 25px;
        border-radius: 5px;
    }

    /* DETAILS BOX */
    .banks-s--wrap .bank-box {
        background: #f5f4ef;
        padding: 25px;
        border-radius: 10px;
        /*! box-shadow: 0 8px 20px rgba(0,0,0,0.05); */
    }

    /* ROW */
    .banks-s--wrap .bank-row {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #ddd;
    }

        .banks-s--wrap .bank-row:last-child {
            border-bottom: none;
        }

    /* LABEL & VALUE */
    .banks-s--wrap .label {
        font-weight: 500;
        color: #555;
    }

    .banks-s--wrap .value {
        font-weight: 500;
        color: #222;
        letter-spacing: .5px;
    }

    /* BUTTON WRAP */
    .banks-s--wrap .btn-wrap {
        display: flex;
        justify-content: center;
        gap: 20px;
        margin-top: 25px;
    }

    /* BUTTON */
    .banks-s--wrap .bank-btn {
        padding: 12px 25px;
        background: #15999b;
        color: #fff;
        border-radius: 7px;
        text-decoration: none;
        transition: 0.3s;
        font-weight: 500;
    }

        .banks-s--wrap .bank-btn:hover {
            background: #0f4d31;
        }

/* RESPONSIVE */
@media (max-width: 600px) {
    .banks-s--wrap .bank-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 5px;
    }

    .banks-s--wrap .btn-wrap {
        flex-direction: column;
    }
}



.open-datas h5 {
    margin-bottom: 10px;
}

.open-datas ul {
    padding-left: 15px;
    margin-bottom: 25px;
}

    .open-datas ul li {
        margin-bottom: 5px;
    }

.dd-wrp {
    display: flex;
    gap: 10px;
}

.open-datas .mag-title {
    font-size: 18px;
    font-weight: 500;
    color: #333;
    margin-bottom: 6px;
    line-height: 25px;
}

.open-datas h6 {
    margin-bottom: 10px;
}




.abt-msg-wrap {
    padding: 0;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 40px;
}

.content-inner {
    max-width: 80%;
    width: 100%;
    text-align: center;
    margin: 0 auto;
    background-color: #f5f4ef;
    padding: 50px 35px;
    border-radius: 15px;
    box-shadow: 0 15px 45px rgba(0,0,0,0.03);
}

.header-group {
    margin-bottom: 20px;
}

.subtitle {
    display: block;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-size: 0.8rem;
    color: #a18262; /* Subtle gold/bronze accent */
    margin-bottom: 10px;
}

.main-title {
    /* Or any elegant serif font */
}

.accent-line {
    width: 60px;
    height: 3px;
    background: #2c3e50;
    margin: 20px auto 0;
}

.message-body {
    position: relative;
    padding: 0;
    background: transparent;
    border-radius: 4px;
}

.quote-icon {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 80px;
    font-family: var(--default-font);
    color: #e0e6ed;
    line-height: 1;
    background: #f9fbfd;
    padding: 0 15px;
}

.message-body p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #546e7a;
    margin-bottom: 25px;
}

.message-body strong {
    color: #2c3e50;
}

.closing-statement {
    border-top: 1px solid #e0e6ed;
    padding-top: 20px;
    font-style: italic;
    color: #2c3e50;
    font-weight: 500;
}

/* Responsive adjustment */
@media (max-width: 768px) {
    .main-title {
        font-size: 2rem;
    }

    .message-body {
        padding: 30px 20px;
    }
}








abt-stage-wrap {
    max-width: 1200px;
    margin: 50px auto;
    padding: 20px;
    font-family: var(--default-font);
    color: #333;
}

.header-content {
    text-align: center;
    margin-bottom: 60px;
}

.title {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
}

.separator {
    width: 80px;
    height: 3px;
    background: #8e735b;
    margin: 0 auto 20px;
}

.intro-text {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: #666;
    line-height: 1.6;
}

.activities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.activity-card {
    background: #fff;
    border-radius: 15px;
    padding: 40px 30px;
    position: relative;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease;
}


/* Make Financial Aid span full width or larger area */
.financial {
    grid-column: span 2;
    background: linear-gradient(to bottom right, #ffffff, #fdfbf9);
}

.card-badge {
    position: absolute;
    top: -15px;
    left: 30px;
    background: #8e735b;
    color: white;
    padding: 5px 20px;
    border-radius: 20px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: 500;
}

.activity-card h3 {
    margin-top: 10px;
    margin-bottom: 25px;
    color: #2c3e50;
    font-size: 1.5rem;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.benefit-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    font-size:;
}

    .benefit-list li {
        padding-left: 20px;
        position: relative;
        font-size: 18px;
        color: #555;
    }

        .benefit-list li::before {
            content:;
            color: #8e735b;
            font-weight: 500;
            position: absolute;
            left: 0;
        }

.auth-tag {
    display: inline-block;
    margin-top: 20px;
    font-size: 0.8rem;
    background: #f5f4ef;
    color: #15999b;
    padding: 4px 12px;
    border-radius: 4px;
    font-weight: 500;
}

@media (max-width: 768px) {
    .activities-grid {
        grid-template-columns: 1fr;
    }

    .financial {
        grid-column: span 1;
    }
}

.pdg-80 {
    padding: 80px 0;
}


.ptoject-wr .donate-row {
    margin-bottom: 0;
}

.ptoject-wr .amounts {
    margin-bottom: 0;
    padding: 15px 10px;
    border-radius: 10px;
    background: rgb(246, 251, 252);
    border: 1px solid rgb(193, 218, 224);
    margin-bottom: 0;
    margin-bottom: 15px;
}

.prog-cntnt p {
    min-height: 78px;
}



.dnt-1-wrap {
    padding: 0;
    display: flex;
    justify-content: center;
    background: transparent;
    margin-top: 25px;
}

.selection-card {
    background: #f5f4ef;
    padding: 30px;
    border-radius: 15px;
    max-width: 100%;
    width: 100%;
    padding: 22px;
    border-radius: 15px;
    background: #e9f6f68f;
    border: 1px solid #dceef2;
    margin-bottom: 24px;
    box-shadow: rgba(15, 58, 47, 0.06) 0px 12px 35px;
    transition: 0.35s;
    border: 1px solid rgba(21, 153, 155, 0.49);
}

/* Provider Toggle Styles */
.provider-toggle {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 8px;
}

.provider-option input {
    display: none; /* Hide actual radio button */
}

.provider-box {
    padding: 0;
    border: 2px solid #fff;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    filter:;
    opacity: 10;
    overflow: hidden;
}

    .provider-box img {
        height: 44px;
        display: block;
    }

/* Selected Provider State */
.provider-option input:checked + .provider-box {
    border-color: #15999b; /* Accent color */
    filter: grayscale(0);
    opacity: 1;
    background: #15999b17;
    transform: translateY(-3px);
}

.divider {
    height: 1px;
    background: #eee;
    margin: 20px 0;
}

/* Amount Grid Styles */
.amount-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.amount-item input {
    display: none;
}

.amount-item span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 49px;
    border: 1px solid #15999b9c;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 500;
    color: #114c5c;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: white;
}

/* Hover & Selected Amount State */
.amount-item:hover span {
    background: #f9f9f9;
    border-color: #ccc;
}

.amount-item input:checked + span {
    background: #15999b;
    color: #fff;
    border-color: #15999b;
    box-shadow: 0 4px 12px rgba(21, 153, 155, 0);
}

@media (max-width: 480px) {
    .amount-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
        margin-bottom: 0;
    }
}






.cart-wrp {
    background-color: transparent;
    padding: 0;
}

.cart-container {
    max-width: 100%;
    margin: 0 auto;
    /*! display: grid; */
    grid-template-columns: 1fr 340px;
    gap: 30px;
    align-items: start;
}

/* Item Card Design */
.cart-item {
    background: #f5f4ef;
    padding: 24px;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

.item-icon-box {
    width: 60px;
    height: 60px;
    background: #e0f2fe;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0ea5e9;
}

.item-details h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #1e293b;
}

.category-tag {
    font-size: 0.85rem;
    color: #64748b;
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    background: #f1f5f9;
    border-radius: 50px;
    padding: 4px;
    margin-left: auto;
}

.qty-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.quantity-controls input {
    width: 40px;
    border: none;
    background: transparent;
    text-align: center;
    font-weight: 500;
}

/* Price & Remove */
.price-display {
    text-align: right;
    min-width: 120px;
    /*! display: flex; */
    /*! gap: 5px; */
}

    .price-display .amount {
        font-weight: 500;
        color: #0f172a;
    }

.remove-item {
    background: #fee2e2;
    color: #ef4444;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0.8rem;
}

/* Sidebar Styling */
.cart-summary {
    background: #38b2ac;
    border-radius: 10px;
    overflow: hidden;
    /*! box-shadow: 0 10px 25px rgba(0,0,0,0.05); */
    border: solid 1px #ccc;
}

.summary-header {
    background: #114c5c;
    color: white;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.action-buttons {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn {
    padding: 14px;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.btn-primary {
    background: #1e293b;
    color: white;
}

.btn-secondary {
    background: #334155;
    color: white;
}

.btn-dark {
    background: #0f172a;
    color: white;
}

.btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.payment-partners {
    padding: 20px;
    border-top: 1px solid #f1f5f9;
    text-align: center;
}

.partner-logos {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

/* Responsive adjustment */
@media (max-width: 900px) {
    .cart-container {
        grid-template-columns: 1fr;
    }

    .cart-item {
        flex-wrap: wrap;
    }
}










/* ... Previous styles included ... */

.select-btn {
    padding: 14px;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    background: white;
    color: #1e293b;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: center;
}

    /* The Active Select State */
    .select-btn.active {
        background: #114c5c;
        color: white;
        border-color: #1e293b;
        transform: scale(1.02);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

.logo-box {
    width: 45px;
    height: 35px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.2s;
}

    .logo-box.selected {
        border-color: #38b2ac;
        background: #e6fffa;
        transform: translateY(-3px);
    }

.qty-btn:active {
    transform: scale(0.9);
    background: #e2e8f0;
}






.login01-wrap {
    min-height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    padding: 0;
}

.login-card {
    display: flex;
    background: white;
    width: 100%;
    max-width: 500px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow:;
    border: solid 1px #d0cdbe;
}

/* Brand Side Styling */
.brand-side {
    flex: 1;
    background: #ff8a3d; /* Vibrant Orange */
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

    .brand-side h1 {
        color: white;
        font-size: 2.5rem;
        line-height: 1.2;
        margin-bottom: 20px;
    }

        .brand-side h1 span {
            text-decoration: underline;
        }

    .brand-side p {
        color: rgba(255,255,255,0.9);
        max-width: 300px;
    }

.illustration-box img {
    width: 100%;
    height: auto;
    margin-top: 40px;
}

/* Form Side Styling */
.form-side {
    flex: 1;
    padding: 37px;
    display: flex;
    align-items: center;
    background-color: #f5f4ef;
}

.form-inner {
    width: 100%;
}

    .form-inner h2 {
        font-size: 24px;
        color: #114c5c;
        margin-bottom: 1px;
        letter-spacing: 0.5px;
    }

    .form-inner p {
        color: #666;
        margin-bottom: 20px;
        font-size: 17px;
    }

.input-group {
    margin-bottom: 20px;
    position: relative;
}

    .input-group input {
        width: 100%;
        padding: 15px 20px;
        background: #fff;
        border: 1px solid transparent;
        border-radius: 9px;
        outline: none;
        transition: 0.3s;
        font-size: 16px;
    }

        .input-group input:focus {
            border-color: #ff8a3d;
            background: white;
        }

.password-group .toggle-eye {
    position: absolute;
    right: 15px;
    top: 15px;
    border: none;
    background: none;
    cursor: pointer;
    opacity: 0.5;
}

.forgot-link {
    display: block;
    text-align: right;
    margin-top: 8px;
    color: #999;
    font-size: 0.85rem;
    text-decoration: none;
}

.login-submit {
    width: 100%;
    padding: 20px;
    background: #15999b;
    color: white;
    border: none;
    border-radius: 10px;
    font-weight: 500;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 0px;
    transition: 0.3s;
}

    .login-submit:hover {
        background: #114c5c;
        transform: translateY(-2px);
    }

/* Social Login */
.social-divider {
    display: flex;
    align-items: center;
    margin: 30px 0;
    color: #0b0b0b;
    font-size: 0.85rem;
}

    .social-divider::before, .social-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #114c5c;
    }

    .social-divider span {
        padding: 0 15px;
    }

.social-grid {
    display: flex;
    gap: 15px;
}

.social-btn {
    flex: 1;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
}

    .social-btn:hover {
        background: #f8f8f8;
    }

.form-footer {
    text-align: center;
    margin-top: 28px;
    color: #666;
    font-size: 15px;
}

    .form-footer a {
        color: #15999b;
        font-weight: 500;
        text-decoration: none;
    }

/* Mobile Responsiveness */
@media (max-width: 850px) {
    .login-card {
        flex-direction: column;
    }

    .brand-side {
        display: none;
    }
    /* Hide illustration on small screens */
}


.btn-row a {
    display: block;
    color: #15999b;
    padding: 15px;
}

.btn-row .btn-outline a:hover {
    color: #fff
}

.donate-row button a {
    color: #fff;
    display: block;
}

.action-buttons .select-btn a {
    color: #fff;
    display: block;
}





.section-empty {
    padding: 80px 0;
}

    .section-empty .input_form {
        margin-top: 16px;
    }

.cart_img_content {
    display: flex;
    justify-content: space-between;
}

.billing_text {
    font-weight: 500;
    margin: 0;
    font-size: 22px !important;
    color: #114c5c !important;
}

.yourCart_div {
}

.cart_img_content {
}

.food_img_price_des {
    display: flex;
    margin-bottom: 1rem;
}

    .food_img_price_des .cart_food_img {
        width: 85px;
        height: 51px;
        overflow: hidden;
        border: 1px solid #d4d4d491;
        padding: 4px;
    }

        .food_img_price_des .cart_food_img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .food_img_price_des .food_dec_flex {
        margin-left: 2rem;
    }

        .food_img_price_des .food_dec_flex p {
            color: #737373;
            margin: 0;
            font-weight: 500;
            font-size: 14px;
        }

            .food_img_price_des .food_dec_flex p:last-child {
                color: red;
            }

.yourCart_div {
    border: 1px solid #d4d4d491;
    padding: 19px;
    margin-top: 16px;
    border-radius: 11px;
}

.cart_total {
}

    .cart_total .price_total {
        display: flex;
        margin-bottom: 5px;
        justify-content: space-between;
    }

        .cart_total .price_total p {
            color: #737373;
            margin: 0;
            font-family: var(--default-font);
            font-weight: 500;
            font-size: 14px;
        }

.total_btn_cart {
    width: 100%;
    background: #15999b !important;
    border-color: #15999b !important;
    padding: 16px 19px !important;
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-weight: 500;
    border-style: unset;
    border-radius: 0 0 10px 10px;
}

    .total_btn_cart:hover {
        background-color: #114c5c !important;
        border-color: #114c5c !important;
    }

.cart_total {
    border: 1px solid #d4d4d491;
    padding: 8px 19px;
    border-top: 1px solid #ccc;
    border-radius: 10px 10px 0 0;
    margin-top: 15px;
}

.section-empty .input_form .form-group input,
.section-empty .input_form .form-group textarea {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background: #F5F4EF;
    border: none;
    border-radius: 10px;
    padding: 18px 20px;
    box-shadow: none;
    outline: none;
}

.input_form .input_box_cart {
    margin-bottom: 15px;
}

.mb_23px {
    margin-bottom: 20px !important;
}

.text_center_button {
    justify-content: center;
}



.footer-parallax-container {
    margin-bottom: 0 !important;
    box-shadow: none;
    min-height: auto !important;
}

.footer-parallax {
    height: auto !important;
    position: relative !important;
    background-color: #f5f5f5 !important;
    z-index: 1;
}

.section-bg-image_full_height {
    background-image: url(../images/hd-8.png);
    background-attachment: fixed;
}



.bg_green {
    background-color: #4caf50 !important;
    border-color: #4caf50 !important;
}

    .bg_green:hover {
        background-color: #4caf50 !important;
        border-color: #4caf50 !important;
    }


.slts {
    background: #f5f4ef;
    padding: 20px 0;
}




.popup-donation {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    justify-content: center;
    align-items: center;
    background: linear-gradient(120deg, rgba(0,0,0,0.6), rgba(0,0,0,0.4));
    backdrop-filter: blur(6px);
    z-index: 999;
}

    /* Modal */
    .popup-donation .donation-modal {
        width: 90%;
        max-width: 720px;
        background: #fff;
        border-radius: 15px;
        padding: 25px;
        box-shadow: 0 20px 50px rgba(0,0,0,0.2);
        position: relative;
        animation: popFade 0.3s ease;
        overflow: scroll;
    }

@keyframes popFade {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Header */
.popup-donation h2 {
    text-align: center;
    font-weight: 500;
    font-size: 22px;
}

.popup-donation .case-id {
    text-align: center;
    background: #ffe9e1;
    color: #873c00;
    display: inline-block;
    padding: 9px 21px 7px 21px;
    border-radius: 6px;
    margin: 7px auto;
    font-weight: 500;
    line-height: 20px;
    display: inline-block;
    text-align: center;
}

.popup-donation .sub-text {
    text-align: center;
    margin: 15px 0 22px;
    color: #555;
}

/* Layout */
.donation-grid {
    display: flex;
    gap: 30px;
}

.left, .right {
    flex: 1;
}

/* Input */
.popup-donation input[type="number"] {
    width: 100%;
    padding: 14px;
    border-radius: 30px;
    border: none;
    background: #e0e0e0;
    box-shadow: inset 3px 3px 6px #cfcfcf, inset -3px -3px 6px #ffffff;
    margin: 10px 0 20px;
    text-align:;
    font-size: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5em;
    color: var(--primary-color);
    background: #F5F4EF;
    border: none;
    border-radius: 7px;
    padding: 11px 20px;
    box-shadow: none;
    outline: none;
    border: solid 1px #aea88c;
    width: 100%;
    min-height: 54px;
    border: 1px solid #b2c2cb;
    border-radius: 9px;
    background: #fff;
    padding: 13px 15px;
    color: #394b58;
    font-size: 15px;
    outline: none;
    transition: 0.3s;
}

/* Divider */
.divider {
    height: 1px;
    background: #ccc;
    margin: 20px 0;
}

/* Radios */
.radio-row {
    display: flex;
    gap: 20px;
}

    .pay-list label,
    .radio-row label {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        cursor: pointer;
        background-color: transparent;
        padding: 13px;
        border: solid 1px #15999b;
        border-radius: 6px;
        margin-top: 12px;
        font-size: 16px;
        color: #454545;
    }

.popup-donation input[type="radio"] {
    margin-right: 8px;
}

/* Button */
.donate-btn {
    margin-top: 15px;
    width: 100%;
    padding: 18px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(45deg, #15999b, #15999b);
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    background: linear-gradient(135deg, #0d6477, #18a7b8);
    color: #fff;
    box-shadow: 0 16px 32px rgba(24, 167, 184, 0.25);
}

    .donate-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.2);
    }

/* Close button bottom */
.close-btn {
    display: block;
    margin: 25px auto 0;
    padding: 10px 25px;
    background: #d9534f;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
}

/* Top close */
.close-x {
    position: absolute;
    right: 20px;
    top: 15px;
    font-size: 22px;
    cursor: pointer;
    background-color: #15999b;
    padding: 1px 8px 5px 8px;
    border-radius: 50%;
    color: #fff;
    font-size: 31px;
    line-height: 28px;
}

/* Open btn */
.open-btn {
    padding: 10px 20px;
    border: none;
    background: #6b4f3b;
    color: #fff;
    border-radius: 20px;
    cursor: pointer;
}

/* Responsive */
@media(max-width: 700px) {
    .donation-grid {
        flex-direction: column;
    }
}






.popup-donation {
    z-index: 9999;
}

    .popup-donation .donation-modal {
        position: relative;
        z-index: 10000;
    }

.popup-donation {
    pointer-events: auto;
    overflow: inherit;
}


    .popup-donation .pp1 {
        width: 90%;
        max-width: 420px;
    }







.regi-wrap {
    background: #f5f4ef;
    padding: 60px 20px;
    text-align: center;
    border-radius: 20px;
}

    /* Title */
    .regi-wrap h1 {
        font-size: 25px;
        color: #114c5c;
        margin-bottom: 6px;
    }

    .regi-wrap p {
        color: #333;
        margin-bottom: 42px;
    }

/* Options */
.regi-options {
    display: flex;
    justify-content: center;
    max-width: fit-content;
    margin: auto;
    gap: 20px;
}

.regi-card {
    width: 48%;
    padding: 40px 20px 20px 20px;
    border-radius: 11px;
    cursor: pointer;
    transition: 0.3s;
    background-color: #fff;
    width: auto;
    border: solid 1px #d7cabc;
}

    .regi-card:hover {
        background: #f0ebe5;
    }

    /* Active selection */
    .regi-card.active {
        border: 2px solid #8a6f52;
        background: #fffcf8;
    }

/* Icon */
.regi-icon {
    font-size: 9px;
    color: #6bbf8a;
    margin-bottom: 0;
    width: auto;
    height: auto;
    /*! background-color: #2aa5a7; */
    padding: 0 15px;
    border-radius: 999px;
    display: initial;
    /*! border: solid 1px #fff; */
}

/* Label */
.regi-card h3 {
    font-size: 20px;
    color: #8a6f52;
    display: block;
    margin-top: 20px;
}

/* Button */
.regi-btn {
    margin-top: 40px;
}

    .regi-btn button {
        padding: 12px 40px;
        border-radius: 6px;
        border: 2px solid #114c5c;
        background: #114c5c;
        font-size: 18px;
        cursor: pointer;
        transition: 0.3s;
        color: #fff;
    }

        .regi-btn button:hover {
            background: #5a3d1e;
            color: #fff;
        }


/* Mobile */
@media(max-width:768px) {
    .regi-options {
        flex-direction: column;
        gap: 20px;
    }

    .regi-card {
        width: 100%;
    }
}




.regi-card.active .regi-icon svg {
    color: #fff;
}

.regi-card.active h3 {
    color: #8a6f52;
}


/* Default SVG color */
.regi-svg {
    width: 40px;
    height: 40px;
    stroke: #6bbf8a; /* green */
    transition: 0.3s;
}

/* Active state color change */
.regi-card.active .regi-svg {
    stroke: #5a3d1e; /* brown (same as theme) */
}

/* Optional: hover effect */
.regi-card:hover .regi-svg {
    stroke: #3e2a14;
}

.regi-btn .btn {
    background-color: #114c5c;
    color: #fff;
    padding: 12px 33px;
    font-size: 18px;
}


@media(max-width: 700px) {

    .new-header-wrap .top-header {
        padding: 0px 0 0px 0;
    }
}





/* MAIN WRAPPER */
.form-mn {
    background: #f4f4f4;
    padding: 20px;
}

    /* CONTAINER */
    .form-mn .form-box {
        max-width: 100%;
        margin: auto;
        background: #f5f4ef;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0;
    }

    /* TITLE */
    .form-mn h2 {
        text-align: center;
        margin-bottom: 10px;
        color: #333;
    }

    .form-mn p {
        font-size: 16px;
        color: #5b5b5b;
        text-align: center;
        margin-bottom: 20px;
    }

    /* INPUT */
    .form-mn input,
    .form-mn select,
    .form-mn textarea {
        width: 100%;
        padding: 12px;
        margin-bottom: 15px;
        border-radius: 30px;
        border: none;
        background: #eee;
        font-size: 14px;
    }

.case-detail-modern {
    padding: 34px 0 42px;
    background: linear-gradient(180deg, #f6fbfd 0%, #ffffff 100%);
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.case-detail-modern-container {
    max-width: 1440px;
}

.case-detail-modern-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.78fr) minmax(520px, 1.22fr);
    gap: 22px;
    align-items: stretch;
}

.case-story-card,
.case-donation-panel {
    background: #fff;
    border: 1px solid rgba(9, 105, 121, 0.1);
    border-radius: 18px;
    box-shadow: 0 18px 45px rgba(15, 73, 89, 0.08);
}

.case-story-card {
    padding: 14px;
}

.case-story-image {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    min-height: 330px;
    background: #eaf5f7;
}

    .case-story-image img {
        width: 100%;
        height: 330px;
        object-fit: cover;
        display: block;
    }

.case-story-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 13px;
    border-radius: 10px;
    background: linear-gradient(135deg, #07828a, #00666f);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(0, 102, 111, 0.24);
}

.case-story-share {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: #007780;
    color: #fff;
    box-shadow: 0 12px 26px rgba(0, 119, 128, 0.28);
}

.case-story-share-list {
    position: absolute;
    right: 18px;
    bottom: 72px;
    display: grid;
    gap: 8px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: 0.2s ease;
}

    .case-story-share-list.active {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .case-story-share-list a {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #fff;
        color: #007780;
        box-shadow: 0 8px 20px rgba(15, 73, 89, 0.14);
    }

.case-story-body {
    padding: 28px 12px 18px;
}

    .case-story-body h1 {
        margin: 0 0 18px;
        color: #06465b;
        font-size: 23px;
        line-height: 1.2;
        font-weight: 500;
    }

    .case-story-body p {
        color: #29333f;
        font-size: 15px;
        line-height: 1.85;
    }

.case-story-divider,
.case-panel-divider {
    height: 1px;
    background: rgba(11, 91, 105, 0.12);
    margin: 20px 0;
}

.case-benefits {
    display: grid;
    gap: 14px;
}

.case-benefit-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    align-items: center;
    gap: 16px;
}

    .case-benefit-item span {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        border: 1px solid rgba(0, 119, 128, 0.18);
        color: #007780;
        background: #f8ffff;
        font-size: 22px;
    }

    .case-benefit-item p {
        margin: 0;
        line-height: 1.55;
        font-weight: 600;
    }

.case-donation-panel {
    padding: 34px 38px;
}

    .case-donation-panel h2,
    .case-amount-title {
        display: block;
        color: #06465b;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 500;
        margin: 0 0 18px;
    }

.case-progress-track {
    height: 34px;
    overflow: hidden;
    border-radius: 9px;
    background: #e9f1f5;
}

.case-progress-fill {
    min-width: 72px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(135deg, #07828a, #00666f);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
}

.case-amount-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 24px;
}

    .case-amount-summary div:last-child {
        text-align: right;
    }

    .case-amount-summary span {
        display: block;
        color: #29333f;
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 8px;
    }

    .case-amount-summary strong {
        color: #007780;
        font-size: 22px;
        font-weight: 900;
    }

.case-donate-box {
    display: grid;
    grid-template-columns: 1fr 160px;
    border: 1px solid rgba(0, 119, 128, 0.42);
    border-radius: 10px;
    overflow: hidden;
    min-height: 60px;
}

.case-donate-input-wrap {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    background: #fff;
}

    .case-donate-input-wrap span {
        padding-left: 26px;
        color: #5f6770;
        font-size: 16px;
        font-weight: 600;
    }

    .case-donate-input-wrap input {
        width: 100%;
        border: 0;
        outline: 0;
        color: #007780;
        font-size: 40px;
        line-height: 1;
        font-weight: 400;
        text-align: center;
        background: transparent;
    }

.case-donate-box button {
    border: 0;
    background: linear-gradient(135deg, #07828a, #00666f);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

    .case-donate-box button strong {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 18px;
        line-height: 1;
        font-weight: 600;
    }

    .case-donate-box button small {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 11px;
        font-weight: 500;
    }

.case-quick-divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 20px;
    align-items: center;
    margin: 28px 0 20px;
    color: #00666f;
    font-size: 15px;
    font-weight: 700;
}

    .case-quick-divider::before,
    .case-quick-divider::after {
        content: "";
        height: 1px;
        background: rgba(11, 91, 105, 0.14);
    }

.case-provider-row {
    display: flex;
    justify-content: center;
    gap: 36px;
    margin-bottom: 22px;
}

    .case-provider-row button {
        width: 190px;
        height: 78px;
        border: 1px solid rgba(10, 97, 115, 0.12);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(10, 97, 115, 0.07);
    }

    .case-provider-row img {
        max-width: 116px;
        max-height: 52px;
        object-fit: contain;
    }

.case-sms-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px 28px;
}

    .case-sms-grid button {
        min-height: 60px;
        border: 1px solid rgba(21, 153, 155, 0.26);
        border-radius: 8px;
        background: #fff;
        color: #06465b;
        display: grid;
        grid-template-columns: 36px 1fr;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        text-align: left;
        padding: 10px 14px;
        column-gap: 10px;
    }

        .case-sms-grid button span {
            grid-row: 1 / span 2;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #fff;
            color: rgb(30, 80, 40);
            border: 1px solid rgba(30, 80, 40, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
        }

        .case-sms-grid button small {
            color: #333947;
            font-size: 13px;
            font-weight: 500;
        }

        .case-sms-grid button strong {
            color: #06465b;
            font-size: 16px;
            line-height: 1;
        }

.case-secure-banner {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 16px;
    margin-top: 26px;
    padding: 18px 22px;
    border: 1px solid rgba(17, 178, 117, 0.15);
    border-radius: 9px;
    background: #f2fbfb;
    color: #007064;
}

    .case-secure-banner i {
        color: #13a672;
        font-size: 34px;
    }

    .case-secure-banner p {
        margin: 0;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 700;
    }

@media (max-width: 1100px) {
    .case-detail-modern-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .case-detail-modern {
        padding: 18px 0 28px;
    }

    .case-donation-panel {
        padding: 22px 16px;
    }

    .case-story-body h1 {
        font-size: 24px;
    }

    .case-amount-summary,
    .case-donate-box,
    .case-sms-grid {
        grid-template-columns: 1fr;
    }

        .case-amount-summary div:last-child {
            text-align: left;
        }

    .case-donate-input-wrap input {
        font-size: 58px;
    }

    .case-donate-box button {
        min-height: 86px;
    }

    .case-provider-row {
        gap: 12px;
    }

        .case-provider-row button {
            flex: 1 1 0;
            width: auto;
        }
}

/* TEXTAREA */
.form-mn textarea {
    border-radius: 12px;
    height: 100px;
    margin-bottom: 10px;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    border-top-left-radius: 9px;
    border-bottom-left-radius: 9px;
    outline: none;
    transition: 0.3s;
    font-size: 16px;
}

/* RADIO */
.form-mn .radio-group {
    display: flex;
    gap: 20px;
    margin-bottom: 15px;
}

/* FILE */
.form-mn .file-box {
    background: transparent;
    padding: 0;
    border-radius: 10px;
    margin-bottom: 5px;
    margin-top: 15px;
}

/* BUTTON */
.form-mn button {
    width: 100%;
    padding: 12px;
    border-radius: 30px;
    border: none;
    background: #b89c6d;
    color: #fff;
    font-size: 16px;
    cursor: pointer;
}

/* SUCCESS MESSAGE */
.form-mn .success-msg {
    display: none;
    background: #d4edda;
    color: #155724;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 15px;
    text-align: center;
}






/* MAIN */
.form-mn {
    background: transparent;
    padding: 0;
}

/* BOX */
.form-box {
    max-width: 500px;
    margin: auto;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
}

/* INPUT */
.form-mn input, .form-mn button {
    width: 100%;
    padding: 12px;
    margin-bottom: 0px;
    width: 100%;
    padding: 12px 9px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none;
    transition: 0.3s;
    font-size: 16px;
}

/* BUTTON */
.form-mn button {
    background: #b89c6d;
    color: #fff;
    border: none;
    padding: 15px 10px;
    border-radius: 5px;
    font-size: 18px;
    margin-top: 9px;
    padding: 15px 25px;
    background: #15999b;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: 0.3s;
}

/* POPUP */
.popup {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #28a745;
    color: #fff;
    padding: 12px 20px;
    border-radius: 5px;
    display: none;
    z-index: 999;
}



.mb-10 {
    margin-bottom: 10px;
}


.input-group label {
    margin-bottom: 10px;
}

.input-group select {
    margin-bottom: 0px;
    width: 100%;
    padding: 14px 20px;
    background: #fff;
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none;
    transition: 0.3s;
    font-size: 16px;
}

.input-group textarea {
    margin-bottom: 0px;
    width: 100%;
    padding: 14px 20px;
    background: #fff !important;
    border: 1px solid transparent;
    border-radius: 9px;
    outline: none;
    transition: 0.3s;
    font-size: 16px;
}


::file-selector-button {
    font: inherit;
    -webkit-appearance: button;
    background-color: #e9f6f6;
    color: #2c2c2c;
    border: 0;
    padding: 4px 4px;
    border: solid 1px #15999b;
    border-radius: 3px;
}

.fm-pw {
    text-align: left !important;
    margin-top: 5px;
    line-height: 19px;
    font-size: 16px
}

.form-mn-p {
    font-size: 18px !important;
    margin-bottom: 30px;
}





/* QUESTION */
.form-mn .question {
    display: block;
    font-size: 15px;
    color: #333;
    margin-bottom: 10px;
}

/* CONTAINER */
.form-mn .radio-box {
    display: flex;
    gap: 20px;
}

/* CARD STYLE */
.form-mn .radio-card {
    display: flex;
    align-items: center;
    gap: 9px;
    background: #fff;
    padding: 3px 18px 3px 9px;
    border-radius: 30px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 14px;
    border: solid 1px #c4c4c4;
}

    /* HIDE DEFAULT */
    .form-mn .radio-card input {
        display: none;
    }

/* CUSTOM RADIO */
.form-mn .radio-ui {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #999;
    position: relative;
}

    /* INNER DOT */
    .form-mn .radio-ui::after {
        content: '';
        width: 10px;
        height: 10px;
        background: #b89c6d;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0);
        transition: 0.3s;
    }

/* ACTIVE STATE */
.form-mn .radio-card input:checked + .radio-ui::after {
    transform: translate(-50%, -50%) scale(1);
}

/* ACTIVE CARD */
.form-mn .radio-card input:checked ~ .text {
    font-weight: 500;
    color: #b89c6d;
}

.form-mn .radio-card input:checked {
}

.form-mn .radio-card:hover {
    background: #e0e0e0;
}














/************************************/
/*** 	 06.  Our Services css 	  ***/
/************************************/

.srv-snt .our-services {
    background-image: url('../images/our-services-bg-image.png');
    background-position: bottom center;
    background-size: auto;
    padding: 120px 0;
}

.srv-snt .service-item {
    /* background: var(--dark-divider-color); */
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    border-radius: 12px;
    min-height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 34px;
    height: auto;
    margin-bottom: 27px;
    padding: 30px 10px;
    transition: all 0.4s ease-in-out;
}

    .srv-snt .service-item:hover {
        transform: translateY(-5px);
    }

.srv-snt .service-item-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    flex-direction: column;
    justify-content: center;
}

    .srv-snt .service-item-header .icon-box {
        position: relative;
        width: 100px;
        height: 100px;
        background: var(--accent-secondary-color);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

        .srv-snt .service-item-header .icon-box::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-color);
            border-radius: 50%;
            transform: scale(0);
            transition: all 0.4s ease-in-out;
            z-index: 0;
        }

.srv-snt .service-item:hover .service-item-header .icon-box::before {
    transform: scale(1);
}

.srv-snt .service-item-header .icon-box img {
    position: relative;
    width: 100%;
    max-width: 50px;
    transition: all 0.4s ease-in-out;
    z-index: 1;
}

.srv-snt .service-item:hover .service-item-header .icon-box img {
    filter: brightness(0) invert(0);
}

.service-item-title {
    width: 100%;
    text-align: center;
}

.srv-snt .service-item-title h2 {
    font-size: 20px;
    line-height: 1.3em;
    color: var(--white-color);
    font-weight: 500;
    min-height: 53px;
}

    .srv-snt .service-item-title h2 a {
        color: #114c5c;
        font-size: 19px;
    }

.srv-snt .service-item-content p {
    color: var(--white-color);
    margin: 0;
}

.srv-snt .service-item-btn {
    border-top: 1px solid var(--dark-divider-color);
    margin-top: 40px;
    padding-top: 40px;
}



.regi-icon img {
    width: 80px;
}




























.book-wrap-12 {
    background-color: #fff;
    border: solid 1px #cccccc78;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
}

.bw-container {
    display: flex;
    height: 100vh;
}

/* Sidebar */
.bw-sidebar {
    width: 299px;
    background: #f5f4ef;
    padding: 20px;
}

    .bw-sidebar h3 {
        margin-bottom: 20px;
    }

    .bw-sidebar ul {
        list-style: none;
        padding: 0;
    }

    .bw-sidebar li {
        padding: 21px 10px 21px 0px;
        margin-bottom: 8px;
        border-left: 0px solid transparent;
        cursor: pointer;
        color: #414141;
    }

        .bw-sidebar li.active {
            color: #fff;
            /* border-left: 3px solid #c89b3c; */
            font-weight: 500;
            background-color: #15999b;
            border-radius: 6px;
            padding: 17px 10px;
        }

/* Content */
.bw-content {
    flex: 1;
    padding: 25px 40px 40px 40px;
}

/* Steps */
.bw-step {
    display: none;
}

    .bw-step.active {
        display: block;
    }

/* Form */
.bw-form-group {
    margin-bottom: 20px;
}

    .bw-form-group label {
        display: block;
        margin-bottom: 5px;
    }

    .bw-form-group input,
    .bw-form-group select {
        width: 100%;
        padding: 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

/* Buttons */
.bw-buttons {
    margin-top: 0;
    display: flex;
    gap: 10px;
}

.bw-back {
    background: #fff;
    border: 1px solid #15999b;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    color: #15999b;
}

.bw-next {
    background: #15999b;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

    .bw-next:hover {
        background: #114c5c;
    }

/* Responsive */
@media (max-width: 768px) {
    .bw-container {
        flex-direction: column;
    }

    .bw-sidebar {
        width: 100%;
    }
}


.bokking-wrap {
    padding: 50px 0;
}

.bw-sidebar ul li {
    list-style: none;
    background-color: #fff;
    padding: 17px 10px;
    border-radius: 6px;
}



.bokking-wrap .form-mn .form-box {
    max-width: 100%;
    margin: auto;
    background: transparent;
    padding: 10px 0;
    border-radius: 12px;
    box-shadow: 0;
}

.bokking-wrap .form-mn input {
    border: solid 1px #ccc;
    border: solid 1px #ccc;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}



.bokking-wrap .form-mn input, .bokking-wrap .form-mn select, .bokking-wrap .form-mn textarea {
    border: solid 1px #ccc;
    border: solid 1px #ccc;
    border-top-left-radius: 8px !important;
    border-bottom-left-radius: 8px !important;
}


.bokking-wrap label {
    line-height: 24px;
    color: #444;
}


.bw-container {
    display: flex;
    height: auto;
}

.book-wrap-12 h4 {
    margin-bottom: 20px;
}

/* Completed step */
.bw-sidebar li.completed {
    color: #fff;
    background-color: #15999b;
    font-weight: 500;
    display: flex;
    justify-content: space-between;
}

    /* Optional tick */
    .bw-sidebar li.completed::after {
        content: "";
        display: initial;
        width: 14px;
        height: 8px;
        border: 3px solid #fff;
        border-top: none;
        border-right: none;
        transform: rotate(-45deg);
        margin-left: 10px;
        margin-top: 2px;
        justify-content:;
    }

.bw-buttons.hide {
    display: none;
}



.header-new.is-sticky {
    position: relative;
}


.page-category-list ul li.active a {
    color: #fff;
    font-weight: 500;
    background-color: #15999b;
    background: linear-gradient(45deg, #114c5c, #15999b);
    background: rgba(255,255,255,0.22);
    transform: translateX(4px);
    color: #fff;
}

.page-category-list ul li.active {
    border-left: 0;
    padding-left: 0;
}


.page-category-list ul li::before {
    transform: translateY(-50%) rotate(45deg);
}





/* dashboard */


.dashboard-wrps {
    background: transparent;
    padding: 0;
}

    .dashboard-wrps .dw-container {
        display: flex;
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
    }

    /* Sidebar */
    .dashboard-wrps .dw-sidebar {
        width: 300px;
        background: #f5f4ef;
        padding: 20px;
    }

        .dashboard-wrps .dw-sidebar ul {
            list-style: none;
            padding: 0;
        }

        .dashboard-wrps .dw-sidebar li {
            background: #e9e9e9;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 10px;
            color: #333;
        }

            .dashboard-wrps .dw-sidebar li.active {
                background: #1f8f8b;
                color: #fff;
                font-weight: 500;
            }

    /* Content */
    .dashboard-wrps .dw-content {
        flex: 1;
        padding: 30px;
        background-color: #fff;
    }

        .dashboard-wrps .dw-content h2 {
            margin-bottom: 20px;
        }

    /* Form Grid */
    .dashboard-wrps .dw-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .dashboard-wrps .dw-form-group {
        display: flex;
        flex-direction: column;
    }

        .dashboard-wrps .dw-form-group.full {
            grid-column: span 2;
        }

        .dashboard-wrps .dw-form-group label {
            margin-bottom: 5px;
        }

        .dashboard-wrps .dw-form-group input {
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }

    /* Buttons */
    .dashboard-wrps .dw-buttons {
        margin-top: 30px;
    }

    .dashboard-wrps .dw-back {
        padding: 10px 20px;
        border: 1px solid #1f8f8b;
        background: #fff;
        color: #1f8f8b;
        border-radius: 6px;
        margin-right: 10px;
    }

    .dashboard-wrps .dw-next {
        padding: 10px 20px;
        background: #1f8f8b;
        color: #fff;
        border: none;
        border-radius: 6px;
    }

/* Responsive */
@media (max-width: 768px) {
    .dashboard-wrps .dw-container {
        flex-direction: column;
    }

    .dashboard-wrps .dw-sidebar {
        width: 100%;
    }

    .dashboard-wrps .dw-form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-wrps .dw-form-group.full {
        grid-column: span 1;
    }
}











.bw-infographic {
    font-family: var(--default-font);
}

/* STEP CONTAINER */
.bw-step {
    opacity: 0;
    transform: translateX(40px) scale(0.95);
    transition: all 0.5s ease;
    position: absolute;
    width: 100%;
    pointer-events: none;
}

    .bw-step.active {
        opacity: 1;
        transform: translateX(0) scale(1);
        position: relative;
        pointer-events: auto;
    }

    /* EXIT ANIMATION */
    .bw-step.exit-left {
        transform: translateX(-40px);
        opacity: 0;
    }

    .bw-step.exit-right {
        transform: translateX(40px);
        opacity: 0;
    }

/* SIDEBAR */
.bw-sidebar li {
    transition: all 0.3s ease;
    position: relative;
}

    /* ACTIVE STEP */
    .bw-sidebar li.active {
        color: #fff;
        background: linear-gradient(45deg, #3a7f92, #15999b);
        transform: scale(1.01);
    }


/* BUTTONS */
.bw-buttons {
    transition: opacity 0.3s ease;
}

    .bw-buttons.hide {
        opacity: 0;
        pointer-events: none;
    }






.faq-accordion ul li {
    padding: 0;
    list-style: none;
    margin: 0px 0;
}


.faq-accordion .accordion-item .accordion-body {
    padding: 25px 0px 0;
}

.faq-accordion .grd-2 ul {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns */
    gap: 10px;
}


    .faq-accordion .grd-2 ul li img {
        filter: brightness(0) invert(0);
        width: 20px;
        margin-right: 10px;
    }

    .faq-accordion .grd-2 ul li {
        padding: 0;
        list-style: none;
        margin: 0px 0;
        background-color: #f7f7f7;
        padding: 15px 15px;
        border-radius: 5px;
        border: solid 1px #b0b0b0;
        line-height: 24px;
        color: #385e68;
    }


.faq-accordion .grd-3 ul {
    padding-left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr) !important; /* 2 columns */
    gap: 10px;
}



.faq-accordion .dflx-li img {
    filter: brightness(0) invert(0);
    width: 20px;
    margin-right: 10px;
}

.mb-20 {
    margin-bottom: 20px;
}

.faq-accordion .grd-3 ul li {
    padding: 0;
    list-style: none;
    margin: 3px 0;
    background-color: #f7f7f7;
    padding: 15px 15px;
    border-radius: 5px;
    border: solid 1px #e8e8e8;
    line-height: 24px;
    color: #385e68;
}












.dflx-li {
    display: flex;
    line-height: 18px;
}





.faq-accordion .notice {
    background: #f5f4ef;
    padding: 15px;
    border-left: 5px solid #15999b;
    border-radius: 8px;
    font-size: 14px;
}






































.ne-tab-step-form {
    max-width: 1420px;
    margin: 0 auto;
}

    .ne-tab-step-form .ne-tsf-box {
        display: grid;
        grid-template-columns: 370px 1fr;
        background: #fff;
        border-radius: 18px;
        overflow: hidden;
        min-height: 720px;
        box-shadow: var(--ne-shadow);
        border: 1px solid #e8f0f2;
    }

    /* SIDEBAR */
    .ne-tab-step-form .ne-tsf-sidebar {
        background: #fff;
        border-right: 1px solid #eef3f5;
        padding: 28px 18px;
        display: flex;
        flex-direction: column;
        gap: 22px;
        position: relative;
    }

    .ne-tab-step-form .ne-tsf-steps {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 38px;
        padding: 0;
    }

        .ne-tab-step-form .ne-tsf-steps::before {
            content: "";
            position: absolute;
            left: 30px;
            top: 30px;
            bottom: 18px;
            width: 3px;
            background: #e2ebef;
            z-index: 0;
        }

        .ne-tab-step-form .ne-tsf-steps::after {
            content: "";
            position: absolute;
            left: 30px;
            top: 30px;
            width: 3px;
            height: var(--step-progress-height, 0px);
            background: var(--ne-primary);
            z-index: 1;
            transition: height .35s ease;
        }

    .ne-tab-step-form .ne-tsf-step {
        position: relative;
        display: grid;
        grid-template-columns: 38px 24px 1fr;
        gap: 14px;
        align-items: center;
        border: none;
        background: transparent;
        text-align: left;
        padding: 16px 14px;
        border-radius: 12px;
        cursor: pointer;
        transition: all .25s ease;
        z-index: 2;
        width: 100%;
    }

        .ne-tab-step-form .ne-tsf-step:hover {
            background: #f5fbfb;
        }

        .ne-tab-step-form .ne-tsf-step.is-active {
            background: linear-gradient(90deg,#ebffff 0%,#c0e7e9 100%);
            color: #fff;
        }

    .ne-tab-step-form .ne-tsf-step-badge {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: #e7eef1;
        color: #263f4d;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        font-size: 14px;
        position: relative;
        z-index: 3;
        border: none;
        box-shadow: 0 3px 10px rgba(22,45,60,.08);
        transition: all .25s ease;
    }

    .ne-tab-step-form .ne-tsf-step.is-active .ne-tsf-step-badge {
        background: linear-gradient(180deg,var(--ne-primary-2) 0%, var(--ne-primary) 100%);
        color: #fff;
        box-shadow: 0 8px 18px rgba(8,127,134,.25);
    }

    .ne-tab-step-form .ne-tsf-step.is-completed .ne-tsf-step-badge {
        background: linear-gradient(180deg,var(--ne-primary-2) 0%, var(--ne-primary) 100%);
        color: #fff;
        font-size: 0;
        box-shadow: 0 8px 18px rgba(8,127,134,.25);
    }

        .ne-tab-step-form .ne-tsf-step.is-completed .ne-tsf-step-badge::before {
            content: "";
            font-size: 35px;
            font-weight: 500;
            background-image: url(../images/img/tick.svg);
            background-size: cover;
            background-repeat: no-repeat;
            width: 14px;
            height: 14px;
        }

    .ne-tab-step-form .ne-tsf-step-icon {
        width: 20px;
        height: 20px;
        color: #7e97a5;
        transition: all .25s ease;
    }

    .ne-tab-step-form .ne-tsf-step.is-active .ne-tsf-step-icon,
    .ne-tab-step-form .ne-tsf-step.is-completed .ne-tsf-step-icon {
        color: var(--ne-primary);
    }

    .ne-tab-step-form .ne-tsf-step-title {
        display: block;
        font-size: 18px;
        font-weight: 500;
        color: #17384b;
        line-height: 1.3;
        margin: 0 0 0px;
    }

    .ne-tab-step-form .ne-tsf-step-desc {
        display: block;
        font-size: 15px;
        color: #6f8491;
        line-height: 1.35;
        margin: 0;
    }

    .ne-tab-step-form .ne-tsf-step.is-active .ne-tsf-step-title {
        color: var(--ne-primary);
    }

    .ne-tab-step-form .ne-tsf-security {
        margin-top: auto;
        background: linear-gradient(180deg,#f4fbfb 0%,#eff8f8 100%);
        border: 1px solid #a4c2c6;
        border-radius: 14px;
        padding: 18px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
    }

    .ne-tab-step-form .ne-tsf-security-icon {
        width: 40px;
        height: 40px;
        color: var(--ne-primary);
        flex: 0 0 40px;
    }

    .ne-tab-step-form .ne-tsf-security h4 {
        margin: 0 0 6px;
        font-size: 18px;
        font-weight: 500;
        color: var(--ne-dark);
    }

    .ne-tab-step-form .ne-tsf-security p {
        margin: 0;
        font-size: 16px;
        color: var(--ne-muted);
        line-height: 1.25;
    }

    /* MAIN CONTENT */
    .ne-tab-step-form .ne-tsf-main {
        padding: 26px 34px;
        background: #fff;
    }

    .ne-tab-step-form .ne-tsf-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 20px;
        margin-bottom: 16px;
    }

    .ne-tab-step-form .ne-tsf-heading h2 {
        margin: 0 0 6px;
        font-size: 24px;
        color: #114c5c;
        font-weight: 500;
    }

    .ne-tab-step-form .ne-tsf-heading p {
        margin: 0;
        color: var(--ne-muted);
        font-size: 17px;
    }

    .ne-tab-step-form .ne-tsf-pass {
        border: 2px solid rgba(7,156,161,.35);
        border-radius: 9px;
        padding: 14px 16px;
        min-width: 231px;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        background: #fbffff;
        margin-bottom: 25px;
    }

        .ne-tab-step-form .ne-tsf-pass svg {
            width: 28px;
            height: 28px;
            color: var(--ne-primary);
            flex: 0 0 28px;
        }

        .ne-tab-step-form .ne-tsf-pass strong {
            display: block;
            color: var(--ne-primary);
            font-size: 16px;
            margin-bottom: 4px;
        }

        .ne-tab-step-form .ne-tsf-pass span {
            display: block;
            font-size: 16px;
            color: var(--ne-muted);
        }

    .ne-tab-step-form .ne-tsf-progress-row {
        /*! max-width:520px; */
        margin-bottom: 26px;
    }

    .ne-tab-step-form .ne-tsf-progress-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        color: #5d7887;
        font-size: 14px;
        font-weight: 500;
    }

    .ne-tab-step-form .ne-tsf-progress-bar {
        height: 8px;
        width: 100%;
        background: #edf3f4;
        border-radius: 30px;
        overflow: hidden;
    }

        .ne-tab-step-form .ne-tsf-progress-bar span {
            display: block;
            width: 25%;
            height: 100%;
            background: linear-gradient(90deg,var(--ne-primary-2),var(--ne-primary));
            border-radius: 30px;
            transition: width .35s ease;
        }

    .ne-tab-step-form .ne-tsf-divider {
        border: none;
        border-top: 1px solid #edf2f4;
        margin: 0 0 24px;
    }

    .ne-tab-step-form .ne-tsf-panel {
        display: none;
        animation: fadeIn .25s ease;
    }

        .ne-tab-step-form .ne-tsf-panel.is-active {
            display: block;
        }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ne-tab-step-form .ne-tsf-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 26px;
}

.ne-tab-step-form .ne-tsf-col-full {
    grid-column: 1 / -1;
}

.ne-tab-step-form label {
    display: block;
    margin-bottom: 9px;
    font-size: 17px;
    font-weight: 500;
    color: #17384b;
}

.ne-tab-step-form .ne-tsf-required {
    color: #ef4444;
}

.ne-tab-step-form .ne-tsf-input-wrap {
    position: relative;
}

.ne-tab-step-form .ne-tsf-input-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #7d919d;
    pointer-events: none;
}

.ne-tab-step-form input,
.ne-tab-step-form select,
.ne-tab-step-form textarea {
    width: 100%;
    border: 1.5px solid #c8c8c8;
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    font-size: 17px;
    color: #17384b;
    outline: none;
    transition: .25s ease;
    font-family: inherit;
    width: 100%;
}

    .ne-tab-step-form input.has-icon,
    .ne-tab-step-form select.has-icon {
        padding-left: 42px;
    }

    .ne-tab-step-form input:focus,
    .ne-tab-step-form select:focus,
    .ne-tab-step-form textarea:focus {
        border-color: var(--ne-primary);
        box-shadow: 0 0 0 4px rgba(7,156,161,.10);
    }

.ne-tab-step-form select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7f8b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
}

.ne-tab-step-form textarea {
    min-height: 130px;
    resize: vertical;
}

.ne-tab-step-form .ne-tsf-help {
    margin-top: 8px;
    color: var(--ne-muted);
    font-size: 14px;
}

.ne-tab-step-form .ne-tsf-radio-options {
    display: flex;
    gap: 24px;
    align-items: center;
    padding-top: 9px;
    min-height: 48px;
}

.ne-tab-step-form .ne-tsf-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    margin: 0;
    font-weight: 500;
    color: #28485a;
}

    .ne-tab-step-form .ne-tsf-radio input {
        width: 18px;
        height: 18px;
        padding: 0;
        margin: 0;
        accent-color: var(--ne-primary);
    }

.ne-tab-step-form .ne-tsf-char-count {
    text-align: right;
    font-size: 12px;
    color: #8296a1;
    margin-top: 8px;
}

.ne-tab-step-form .ne-tsf-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.ne-tab-step-form .ne-tsf-upload {
    border: 1.5px dashed #9bbdc5;
    background: #f9f9f9;
    border-radius: 11px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ne-tab-step-form .ne-tsf-upload-icon {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #e6fcfd;
    color: var(--ne-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
}

.ne-tab-step-form .ne-tsf-upload h4 {
    margin: 0 0 10px;
    font-size: 16px;
    color: #212121;
    font-weight: 500;
}

.ne-tab-step-form .ne-tsf-upload p {
    margin: 9px 0 0;
    color: #61676b;
    font-size: 15px;
    line-height: 1.25;
}

.ne-tab-step-form .ne-tsf-review {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.ne-tab-step-form .ne-tsf-review-card {
    background: #fbfefe;
    border: 1px solid #e6eef1;
    border-radius: 14px;
    padding: 16px;
}

    .ne-tab-step-form .ne-tsf-review-card h4 {
        margin: 0 0 12px;
        font-size: 16px;
        color: #124058;
    }

.ne-tab-step-form .ne-tsf-review-item {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px dashed #e5edf0;
    font-size: 17px;
}

    .ne-tab-step-form .ne-tsf-review-item:last-child {
        border-bottom: none;
    }

    .ne-tab-step-form .ne-tsf-review-item span:first-child {
        color: #696969;
    }

    .ne-tab-step-form .ne-tsf-review-item span:last-child {
        font-weight: 500;
        text-align: right;
        word-break: break-word;
    }

.ne-tab-step-form .ne-tsf-actions {
    margin-top: 30px;
    padding-top: 18px;
    border-top: 1px solid #edf2f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.ne-tab-step-form .ne-tsf-actions-left,
.ne-tab-step-form .ne-tsf-actions-right {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ne-tab-step-form .ne-tsf-save-note {
    text-align: center;
    font-size: 12px;
    color: var(--ne-muted);
    line-height: 1.4;
}

    .ne-tab-step-form .ne-tsf-save-note strong {
        display: block;
        color: var(--ne-primary);
        font-size: 13px;
        margin-bottom: 2px;
    }

.ne-tab-step-form .ne-tsf-btn {
    border: none;
    border-radius: 10px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 140px;
    transition: .25s ease;
}

    .ne-tab-step-form .ne-tsf-btn svg {
        width: 18px;
        height: 18px;
    }

.ne-tab-step-form .ne-tsf-btn-outline {
    background: #fff;
    color: var(--ne-primary);
    border: 1.5px solid rgba(7,156,161,.6);
}

    .ne-tab-step-form .ne-tsf-btn-outline:hover {
        background: #f4fbfb;
    }

.ne-tab-step-form .ne-tsf-btn-primary {
    background: linear-gradient(90deg,var(--ne-primary-2),var(--ne-primary));
    color: #fff;
    box-shadow: 0 10px 25px rgba(7,156,161,.22);
}

    .ne-tab-step-form .ne-tsf-btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 14px 30px rgba(7,156,161,.28);
    }

.ne-tab-step-form .ne-tsf-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* RESPONSIVE */
@media(max-width:1100px) {
    .ne-tab-step-form .ne-tsf-box {
        grid-template-columns: 270px 1fr;
    }

    .ne-tab-step-form .ne-tsf-form-grid,
    .ne-tab-step-form .ne-tsf-upload-grid,
    .ne-tab-step-form .ne-tsf-review {
        grid-template-columns: 1fr;
    }

    .ne-tab-step-form .ne-tsf-head {
        flex-direction: column;
    }

    .ne-tab-step-form .ne-tsf-pass {
        width: 100%;
    }
}

@media(max-width:860px) {
    body {
        padding: 10px;
    }

    .ne-tab-step-form .ne-tsf-box {
        grid-template-columns: 1fr;
    }

    .ne-tab-step-form .ne-tsf-sidebar {
        border-right: none;
        border-bottom: 1px solid #eef3f5;
    }

    .ne-tab-step-form .ne-tsf-steps {
        gap: 12px;
    }

        .ne-tab-step-form .ne-tsf-steps::before,
        .ne-tab-step-form .ne-tsf-steps::after {
            display: none;
        }

    .ne-tab-step-form .ne-tsf-step {
        background: #fbfefe;
        border: 1px solid #edf3f5;
    }

    .ne-tab-step-form .ne-tsf-main {
        padding: 20px 16px;
    }

    .ne-tab-step-form .ne-tsf-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .ne-tab-step-form .ne-tsf-actions-left,
    .ne-tab-step-form .ne-tsf-actions-right {
        width: 100%;
    }

    .ne-tab-step-form .ne-tsf-btn {
        width: 100%;
    }

    .ne-tab-step-form .ne-tsf-save-note {
        width: 100%;
        order: -1;
    }
}



:root {
    --ne-primary: #15999b;
    --ne-primary-2: #15999b;
    --ne-dark: #114c5c;
    --ne-muted: #6f8491;
    --ne-border: #dfe9ec;
    --ne-soft: #f4fbfb;
    --ne-card: #ffffff;
    --ne-shadow: 0 10px 35px rgba(9,55,79,.08);
}


.sts {
    width: 100%;
}



.ne-success-popup {
    position: fixed;
    inset: 0;
    background: rgba(12,34,45,.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

    .ne-success-popup.active {
        display: flex;
    }

.ne-success-box {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 11px;
    padding: 35px 28px;
    text-align: center;
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
    animation: nePopup .3s ease;
}

.ne-success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: linear-gradient(180deg,#11b7b8,#079ca1);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 44px;
    font-weight: 500;
}

.ne-success-box h3 {
    margin: 0 0 10px;
    color: #17384b;
    font-size: 26px;
    font-weight: 500;
}

.ne-success-box p {
    margin: 0 0 25px;
    color: #6f8491;
    font-size: 15px;
}

.ne-success-box button {
    border: none;
    border-radius: 12px;
    padding: 14px 36px;
    background: linear-gradient(90deg,#11b7b8,#079ca1);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
}

@keyframes nePopup {
    from {
        opacity: 0;
        transform: scale(.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


















.ne-lang-btn {
    border: 0;
    /*! background:#fff; */
    color: #114c5c;
    border-radius: 999px;
    /*! padding:8px 9px; */
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    transition: .25s ease;
}

    .ne-lang-btn:hover {
        background: #f4fbfb;
    }

.ne-lang-popup {
    position: fixed;
    inset: 0;
    background: rgba(12,34,45,.55);
    backdrop-filter: blur(6px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    padding: 20px;
}

    .ne-lang-popup.active {
        display: flex;
    }

.ne-lang-box {
    width: 100%;
    max-width: 430px;
    background: #fff;
    border-radius: 10px;
    padding: 32px 28px;
    text-align: center;
    position: relative;
    box-shadow: 0 25px 70px rgba(0,0,0,.25);
    animation: neLangPopup .28s ease;
}

.ne-lang-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: #f1f6f7;
    color: #17384b;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.ne-lang-box h3 {
    margin: 0 0 4px;
    color: #17384b;
    font-size: 22px;
    font-weight: 500;
}

.ne-lang-box p {
    margin: 0 0 24px;
    color: #6f8491;
    font-size: 16px;
}

.ne-lang-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.ne-lang-option {
    border: 1.5px solid #dce8ec;
    background: #fff;
    color: #17384b;
    border-radius: 10px;
    padding: 18px 14px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: .25s ease;
}

    .ne-lang-option span {
        display: block;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .ne-lang-option:hover,
    .ne-lang-option.active {
        border-color: #079ca1;
        background: linear-gradient(180deg,#f4fbfb,#eefafa);
        color: #000;
        box-shadow: 0 10px 25px rgba(7,156,161,.12);
    }

@keyframes neLangPopup {
    from {
        opacity: 0;
        transform: scale(.9) translateY(10px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media(max-width:480px) {
    .ne-lang-options {
        grid-template-columns: 1fr;
    }
}


.new-header-wrap .tooltip-trigger a {
    color: #222 !important
}




























.sad-wrap {
    width: 100%;
    /*! min-height: 100vh; */
    /*! background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.14), transparent 34%), linear-gradient(180deg, #f7fbfa 0%, #fff 100%); */
}

    .sad-wrap a {
        text-decoration: none;
    }

.sad-header {
    width: 100%;
    background: rgba(255,255,255,0.88);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid #e1eeeb;
    position: sticky;
    top: 0;
    z-index: 99;
}

.sad-container {
    /*! width: min(1180px, calc(100% - 32px)); */
    margin: 0 auto;
}

.sad-nav {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.sad-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #0d5a58;
    font-weight: 500;
    font-size: 20px;
}

.sad-logo-mark {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: linear-gradient(135deg, #12a89d, #0d6f68);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    box-shadow: 0 12px 28px rgba(13, 111, 104, 0.25);
}

.sad-menu {
    display: flex;
    gap: 22px;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sad-menu a {
        color: #315360;
        font-size: 14px;
        font-weight: 500;
    }

        .sad-menu a:hover {
            color: #0d9187;
        }

.sad-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sad-lang {
    border: 1px solid #d6e7e4;
    background: #fff;
    color: #0d6f68;
    border-radius: 999px;
    padding: 11px 15px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}

.sad-donate {
    border: none;
    background: linear-gradient(90deg, #12a89d, #0d6f68);
    color: #fff;
    border-radius: 999px;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(13, 111, 104, 0.23);
}

.sad-mobile-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid #d6e7e4;
    background: #fff;
    border-radius: 12px;
    font-size: 22px;
    cursor: pointer;
    color: #0d6f68;
}

.sad-hero {
    padding: 64px 0 46px;
}

.sad-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 34px;
    align-items: center;
}

.sad-breadcrumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid #deebe8;
    color: #66808a;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 22px;
}

.sad-hero h1 {
    margin: 0;
    color: #073f4f;
    font-size: clamp(36px, 5vw, 62px);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -1.5px;
}

    .sad-hero h1 span {
        color: #0d9187;
    }

.sad-hero p {
    margin: 22px 0 0;
    color: #657f89;
    font-size: 17px;
    line-height: 1.75;
    max-width: 620px;
}

.sad-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.sad-btn {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: 0.25s ease;
}

.sad-btn-primary {
    background: linear-gradient(90deg, #12a89d, #0d6f68);
    color: #fff;
    box-shadow: 0 14px 34px rgba(13, 111, 104, 0.24);
}

    .sad-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 18px 42px rgba(13, 111, 104, 0.3);
    }

.sad-btn-outline {
    background: #fff;
    color: #0d6f68;
    border: 1.5px solid #bcded8;
}

    .sad-btn-outline:hover {
        background: #eef9f7;
    }

.sad-hero-card {
    background: #fff;
    border: 1px solid #deebe8;
    border-radius: 17px;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(18, 56, 74, 0.12);
}

.sad-hero-img {
    height: 330px;
    background: linear-gradient(rgba(13, 111, 104, 0.18), rgba(7, 63, 79, 0.46)), url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1200&q=80");
    background-size: cover;
    background-position: center;
}

.sad-contact-strip {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    padding: 18px;
}

.sad-contact-box {
    border-radius: 9px;
    background: #f3faf8;
    padding: 18px;
    border: 1px solid #dcebe8;
}

    .sad-contact-box span {
        display: block;
        color: #29434e;
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .sad-contact-box strong {
        display: block;
        color: #073f4f;
        font-size: 20px;
        word-break: break-word;
        font-weight: 500;
    }

.sad-section {
    padding: 34px 0;
}

.sad-section-head {
    text-align: center;
    margin-bottom: 34px;
}

    .sad-section-head small {
        display: inline-block;
        color: #0d9187;
        font-weight: 500;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .sad-section-head h2 {
        margin: 0;
        font-size: clamp(28px, 2.1vw, 44px);
        color: #114c5c;
        line-height: 1.15;
        font-weight: 500;
    }

    .sad-section-head p {
        margin: 14px auto 0;
        color: #657f89;
        line-height: 1.7;
        max-width: 720px;
    }

.sad-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 34px;
}

.sad-info-card {
    background: #fff;
    border: 1px solid #deebe8;
    border-radius: 15px;
    padding: 24px;
    box-shadow: 0 14px 40px rgba(18, 56, 74, 0.06);
}

.sad-info-icon {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    /*! background: linear-gradient(135deg, #e8f8f5, #d8f1ed); */
    color: #0d9187;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 47px;
    margin-bottom: 18px;
}

.sad-info-card h3 {
    margin: 0 0 10px;
    color: #073f4f;
    font-size: 18px;
}

.sad-info-card p {
    margin: 0;
    color: #657f89;
    line-height: 1.65;
    font-size: 14px;
}

.sad-doc-layout {
    display: grid;
    grid-template-columns: 310px 1fr;
    gap: 24px;
    align-items: start;
}

.sad-side-card {
    background: linear-gradient(180deg, #15999b, #114c5c);
    color: #fff;
    border-radius: 15px;
    padding: 28px;
    position: sticky;
    top: 30px;
    box-shadow: 0 20px 50px rgba(13, 111, 104, 0.24);
}

    .sad-side-card h3 {
        margin: 0 0 12px;
        font-size: 24px;
        line-height: 1.2;
        color: #fff;
    }

    .sad-side-card p {
        margin: 0 0 22px;
        color: rgba(255,255,255,0.82);
        line-height: 1.45;
        font-size: 17px;
    }

.sad-side-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

    .sad-side-list li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255,255,255,0.95);
        font-weight: 500;
        font-size: 15px;
    }

        .sad-side-list li::before {
            content: "";
            width: 22px;
            height: 21px;
            border-radius: 0;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 15px;
            background-image: url(../images/img/tick.svg);
            background-size: 100%;
            background-repeat: no-repeat;
        }

.sad-docs {
    display: grid;
    gap: 22px;
}

.sad-doc-group {
    background: #fff;
    border: 1px solid #deebe8;
    border-radius: 15px;
    padding: 26px;
    box-shadow: 0 14px 40px rgba(18, 56, 74, 0.06);
}

.sad-doc-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8f1ef;
}

    .sad-doc-title h3 {
        margin: 0;
        color: #073f4f;
        font-size: 22px;
        font-weight: 500;
    }

    .sad-doc-title span {
        color: #15999b;
        font-weight: 500;
        background: #15999b1f;
        padding: 8px 21px;
        border-radius: 999px;
        font-size: 17px;
    }

.sad-doc-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    list-style: none;
    padding: 0;
    margin: 0;
}

    .sad-doc-list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: #15999b0a;
        border: 1px solid #15999b59;
        border-radius: 9px;
        padding: 16px;
        color: #315360;
        line-height: 1.5;
        font-size: 18px;
        font-weight: 500;
    }

        .sad-doc-list li::before {
            content: "";
            width: 34px;
            height: 34px;
            border-radius: 999px;
            background: transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 0 0 34px;
            font-size: 33px;
            background-image: url(../images/img/file-2.svg);
            background-size: cover;
            border-radius: 0;
        }

.sad-notice {
    margin-top: 28px;
    background: #fff8e8;
    border: 1px solid #f3dfaa;
    border-radius: 13px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.sad-notice-icon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
    background: #ffe7a3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 46px;
    font-size: 22px;
}

.sad-notice h3 {
    margin: 0 0 8px;
    color: #7a5312;
    font-size: 20px;
}

.sad-notice p {
    margin: 0;
    color: #745c2c;
    line-height: 1.65;
    font-weight: 650;
    font-size: 15px;
}

.sad-apply-box {
    margin-top: 26px;
    background: #fff;
    border: 1px solid #deebe8;
    border-radius: 13px;
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    box-shadow: 0 16px 44px rgba(18, 56, 74, 0.08);
}

.sad-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    color: #315360;
    line-height: 1.6;
    font-weight: 650;
}

    .sad-check input {
        width: 20px;
        height: 20px;
        margin-top: 3px;
        accent-color: #0d9187;
        flex: 0 0 20px;
    }

.sad-footer {
    margin-top: 40px;
    background: #073f4f;
    color: #fff;
    padding: 44px 0;
}

.sad-footer-grid {
    display: grid;
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
    gap: 28px;
}

.sad-footer h4 {
    margin: 0 0 14px;
    font-size: 18px;
}

.sad-footer p,
.sad-footer a {
    color: rgba(255,255,255,0.72);
    line-height: 1.7;
    font-size: 14px;
}

.sad-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.sad-copy {
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 30px;
    padding-top: 20px;
    color: rgba(255,255,255,0.65);
    font-size: 14px;
}

.sad-floating {
    position: fixed;
    right: 22px;
    bottom: 22px;
    display: grid;
    gap: 12px;
    z-index: 80;
}

    .sad-floating a {
        width: 54px;
        height: 54px;
        border-radius: 50%;
        background: linear-gradient(135deg, #12a89d, #0d6f68);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        box-shadow: 0 14px 34px rgba(13, 111, 104, 0.3);
    }

@media (max-width: 1024px) {
    .sad-menu,
    .sad-nav-actions {
        display: none;
    }

    .sad-mobile-btn {
        display: block;
    }

    .sad-hero-grid,
    .sad-doc-layout {
        grid-template-columns: 1fr;
    }

    .sad-side-card {
        position: relative;
        top: 0;
    }

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

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

@media (max-width: 640px) {
    .sad-container {
        width: min(100% - 22px, 1180px);
    }

    .sad-hero {
        padding: 42px 0 28px;
    }

    .sad-hero-img {
        height: 245px;
    }

    .sad-contact-strip,
    .sad-info-grid,
    .sad-doc-list,
    .sad-apply-box,
    .sad-footer-grid {
        grid-template-columns: 1fr;
    }

    .sad-doc-group {
        padding: 20px;
        border-radius: 22px;
    }

    .sad-doc-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .sad-apply-box {
        padding: 22px;
    }

    .sad-btn {
        width: 100%;
    }

    .sad-floating {
        right: 14px;
        bottom: 14px;
    }

        .sad-floating a {
            width: 48px;
            height: 48px;
            font-size: 20px;
        }
}










.sad-hero-new {
    position: relative;
    padding: 78px 0 68px;
    overflow: hidden;
    background: radial-gradient(circle at 12% 10%, rgba(18,168,157,.16), transparent 34%), radial-gradient(circle at 92% 22%, rgba(13,111,104,.12), transparent 32%), linear-gradient(135deg, #f8fcfb 0%, #eef8f6 100%);
}

    .sad-hero-new::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        right: -180px;
        top: -190px;
        border-radius: 50%;
        background: rgba(18,168,157,.10);
        filter: blur(4px);
    }

    .sad-hero-new::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        left: -90px;
        bottom: -110px;
        border-radius: 50%;
        background: rgba(13,111,104,.08);
    }

.sad-hero-new-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1fr 0.95fr;
    gap: 56px;
    align-items: center;
}

.sad-hero-new-content {
    max-width: 700px;
}

.sad-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(255,255,255,.9);
    border: 1px solid #dcece8;
    color: #0d9187;
    border-radius: 999px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 22px;
    box-shadow: 0 10px 28px rgba(18,56,74,.06);
}

    .sad-hero-badge span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #0d9187;
        box-shadow: 0 0 0 6px rgba(13,145,135,.12);
    }

.sad-hero-new h1 {
    margin: 0;
    color: #073f4f;
    font-size: clamp(42px, 2.0vw, 69px);
    line-height: 46px;
    font-weight: 500;
    letter-spacing: 0;
}

    .sad-hero-new h1 span {
        color: #15999b;
        position: relative;
    }

        .sad-hero-new h1 span::after {
            content: "";
            position: absolute;
            left: 4px;
            right: 4px;
            bottom: 5px;
            height: 12px;
            /*! background: rgba(18,168,157,.16); */
            z-index: -1;
            border-radius: 999px;
        }

.sad-hero-new p {
    margin: 24px 0 0;
    color: #5f7983;
    font-size: 18px;
    line-height: 1.85;
    max-width: 620px;
}

.sad-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 32px;
    max-width: 620px;
}

    .sad-hero-stats div {
        background: rgba(255,255,255,.86);
        border: 1px solid #dcece8;
        border-radius: 10px;
        padding: 18px 16px;
        box-shadow: 0 14px 34px rgba(18,56,74,.06);
    }

    .sad-hero-stats strong {
        display: block;
        color: #15999b;
        font-size: 28px;
        font-weight: 500;
        line-height: 1;
        margin-bottom: 7px;
    }

    .sad-hero-stats span {
        display: block;
        color: #434343;
        font-size: 18px;
        font-weight: 500;
    }

.sad-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 32px;
}

.sad-btn {
    min-height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 15px 26px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: .25s ease;
}

.sad-btn-primary {
    background: linear-gradient(90deg, #15999b, #146f87);
    color: #fff;
    box-shadow: 0 16px 36px rgba(13,111,104,.24);
}

    .sad-btn-primary:hover {
        transform: translateY(-2px);
        box-shadow: 0 20px 44px rgba(13,111,104,.32);
    }

.sad-btn-outline {
    background: rgba(255,255,255,.88);
    color: #15999b;
    border: 1.5px solid #15999ba6;
}

    .sad-btn-outline:hover {
        background: #eef9f7;
    }

.sad-hero-new-visual {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    border: solid 8px #ffffff29;
}

.sad-hero-img-card {
    position: relative;
    border-radius: 34px;
    overflow: hidden;
    background: #fff;
    padding: 14px;
    border: 1px solid #dcece8;
    /*! box-shadow: 0 34px 90px rgba(18,56,74,.16); */
}

    .sad-hero-img-card::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 26px;
        background: linear-gradient(180deg, transparent 38%, rgba(7,63,79,.72));
        z-index: 2;
        pointer-events: none;
    }

    .sad-hero-img-card img {
        width: 100%;
        height: 470px;
        object-fit: cover;
        display: block;
        border-radius: 26px;
    }

.sad-floating-card {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 10px;
    padding: 15px 16px;
    box-shadow: 0 18px 44px rgba(18,56,74,.16);
    animation: sadHeroFloat 3.4s ease-in-out infinite;
}

.sad-card-top {
    top: 36px;
    left: -26px;
}

.sad-card-bottom {
    right: 36px;
    bottom: 36px;
    animation-delay: .6s;
}

.sad-floating-icon {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: linear-gradient(135deg, #12a89d, #0d6f68);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    font-weight: 500;
    flex: 0 0 42px;
}

.sad-floating-card strong {
    display: block;
    color: #073f4f;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 2px;
}

.sad-floating-card span {
    display: block;
    color: #657f89;
    font-size: 12px;
    font-weight: 500;
}

.sad-contact-modern {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-top: 16px;
}

.sad-contact-modern-box {
    background: rgba(255,255,255,.88);
    border: 1px solid #dcece8;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 14px 34px rgba(18,56,74,.07);
}

    .sad-contact-modern-box span {
        display: block;
        color: #718b95;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 8px;
    }

    .sad-contact-modern-box strong {
        display: block;
        color: #073f4f;
        font-size: 17px;
        line-height: 1.25;
        word-break: break-word;
    }

@keyframes sadHeroFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 1024px) {
    .sad-hero-new {
        padding: 56px 0;
    }

    .sad-hero-new-grid {
        grid-template-columns: 1fr;
        gap: 38px;
    }

    .sad-hero-new-content {
        max-width: 100%;
    }

    .sad-hero-img-card img {
        height: 390px;
    }

    .sad-card-top {
        left: 24px;
    }

    .sad-card-bottom {
        right: 24px;
    }
}

@media (max-width: 640px) {
    .sad-hero-new {
        padding: 42px 0 38px;
    }

        .sad-hero-new h1 {
            font-size: 42px;
            letter-spacing: -1.3px;
        }

        .sad-hero-new p {
            font-size: 16px;
            line-height: 1.7;
        }

    .sad-hero-stats {
        grid-template-columns: 1fr;
    }

    .sad-hero-actions {
        flex-direction: column;
    }

    .sad-btn {
        width: 100%;
    }

    .sad-hero-img-card {
        border-radius: 24px;
        padding: 10px;
    }

        .sad-hero-img-card img {
            height: 300px;
            border-radius: 18px;
        }

        .sad-hero-img-card::before {
            inset: 10px;
            border-radius: 18px;
        }

    .sad-floating-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        margin-top: 12px;
        animation: none;
    }

    .sad-contact-modern {
        grid-template-columns: 1fr;
    }

    .sad-contact-modern-box strong {
        font-size: 18px;
    }
}









.services-wrap-new {
    width: 100%;
    padding: 50px 0;
    /*! background: #f7faf8; */
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .services-wrap-new *,
    .services-wrap-new *::before,
    .services-wrap-new *::after {
        box-sizing: border-box;
    }

    .services-wrap-new::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(rgba(15, 115, 96, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 115, 96, 0.045) 1px, transparent 1px);
        background-size: 42px 42px;
        pointer-events: none;
    }

.services-new-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.services-new-heading {
    max-width: 680px;
    margin: 0 auto 48px;
    text-align: center;
}

    .services-new-heading span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 8px 18px;
        border-radius: 100px;
        background: #e8f4ef;
        color: #0d765c;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 16px;
    }

    .services-new-heading h2 {
        margin: 0;
        color: #102b24;
        font-size: 46px;
        line-height: 1.12;
        font-weight: 500;
        letter-spacing: -1.4px;
    }

    .services-new-heading p {
        margin: 18px auto 0;
        color: #657771;
        font-size: 16px;
        line-height: 1.8;
    }

.services-new-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.services-new-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 235px;
    padding: 24px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid rgba(19, 83, 68, 0.08);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(15, 58, 47, 0.06);
    transition: 0.35s ease;
    border: solid 1px #15999b7d;
}

    .services-new-card::before {
        content: "";
        position: absolute;
        width: 160px;
        height: 160px;
        right: -85px;
        bottom: -85px;
        border-radius: 50%;
        background: #15999b21;
        transition: 0.35s ease;
    }

    .services-new-card::after {
        content: "";
        position: absolute;
        left: 24px;
        bottom: 0;
        width: 0;
        height: 4px;
        border-radius: inherit;
        background: #15999b;
        transition: 0.35s ease;
    }

    .services-new-card:hover {
        transform: translateY(-8px);
        border-color: rgb(21 153 155 / 18%);
        box-shadow: 0 24px 55px rgba(15, 58, 47, 0.13);
    }

        .services-new-card:hover::before {
            width: 220px;
            height: 220px;
            background: #15999b1f;
        }

        .services-new-card:hover::after {
            width: calc(100% - 48px);
        }

.card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
    position: relative;
    z-index: 2;
}

.card-icon {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #15999b1f;
    border: 1px solid rgba(21, 153, 155, 0.32);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s ease;
}

    .card-icon i {
        font-style: normal;
        color: #ffffff;
        font-size: 20px;
        font-weight: 500;
    }

.card-arrow {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #f6faf8;
    color: #0d765c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transform: rotate(-35deg);
    transition: 0.35s ease;
}

.services-new-card:hover .card-icon {
    background: #15999b;
}

    .services-new-card:hover .card-icon i {
        color: #ffffff;
    }

.services-new-card:hover .card-arrow {
    background: #0d765c;
    color: #ffffff;
    transform: rotate(0deg);
}

.services-new-card h3 {
    margin: 0 0 12px;
    color: #114c5c;
    font-size: 22px;
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: -0.4px;
    position: relative;
    z-index: 2;
}

.services-new-card p {
    margin: 0;
    color: #6a7b75;
    font-size: 16.5px;
    line-height: 1.5;
    position: relative;
    z-index: 2;
}

.services-featured-card {
    grid-column: span 2;
    border: none;
    background: linear-gradient(135deg, #114c5c, #15999b);
}

    .services-featured-card::before {
        background: rgba(255, 255, 255, 0.17);
    }

    .services-featured-card::after {
        background: #ffffff;
    }

    .services-featured-card .card-icon {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.22);
    }

        .services-featured-card .card-icon i,
        .services-featured-card h3,
        .services-featured-card p {
            color: #ffffff;
        }

    .services-featured-card .card-arrow {
        background: rgba(255, 255, 255, 0.14);
        color: #ffffff;
    }

    .services-featured-card:hover .card-icon,
    .services-featured-card:hover .card-arrow {
        background: #ffffff;
    }

        .services-featured-card:hover .card-icon i,
        .services-featured-card:hover .card-arrow {
            color: #0d765c;
        }

@media (max-width: 1100px) {
    .services-new-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .services-featured-card {
        grid-column: span 1;
    }
}

@media (max-width: 768px) {
    .services-wrap-new {
        padding: 70px 16px;
    }

    .services-new-heading {
        margin-bottom: 34px;
    }

        .services-new-heading h2 {
            font-size: 34px;
        }

        .services-new-heading p {
            font-size: 15px;
        }

    .services-new-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .services-new-card {
        min-height: 220px;
        padding: 22px;
    }
}

@media (max-width: 520px) {
    .services-wrap-new {
        padding: 15px 0;
    }

    .services-new-heading h2 {
        font-size: 29px;
    }

    .services-new-grid {
        grid-template-columns: 1fr;
    }

    .services-new-card {
        min-height: auto;
        border-radius: 20px;
    }

    .card-top {
        margin-bottom: 26px;
    }
}














.services-details-wrap-new {
    --primary: #114c5c;
    --primary-2: #15999b;
    --dark: #142f29;
    --text: #5f716b;
    --line: #dcebe6;
    --soft: #eef8f4;
    --white: #ffffff;
    width: 100%;
    padding: 50px 0px;
    background: radial-gradient(circle at 10% 5%, rgba(18, 164, 127, 0.09), transparent 28%), radial-gradient(circle at 90% 35%, rgba(11, 114, 92, 0.08), transparent 26%), linear-gradient(135deg, #f7fbf9 0%, #15999b0f 55%, #fff 100%);
    overflow: hidden;
    position: relative;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

bo {
    box-sizing: border-box;
}

.services-details-wrap-new::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(11, 114, 92, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 114, 92, 0.035) 1px, transparent 1px);
    background-size: 46px 46px;
    pointer-events: none;
}

.sdn-container {
    max-width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Hero */
.sdn-hero-modern {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 26px;
    align-items: center;
    padding: 42px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgb(17, 76, 92), rgb(21, 153, 155)), radial-gradient(circle at top right, rgba(255,255,255,0.25), transparent 35%);
    position: relative;
    overflow: hidden;
    box-shadow: 0 30px 80px rgba(11, 84, 68, 0.18);
    margin-bottom: 22px;
}

    .sdn-hero-modern::before {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -170px;
        top: -160px;
        border-radius: 50%;
        background: rgba(255,255,255,0.12);
        animation: sdnFloat 7s ease-in-out infinite;
    }

    .sdn-hero-modern::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        left: 48%;
        bottom: -120px;
        border-radius: 50%;
        background: rgba(255,255,255,0.09);
        animation: sdnFloat 6s ease-in-out infinite reverse;
    }

.sdn-hero-left,
.sdn-hero-right {
    position: relative;
    z-index: 2;
}

.sdn-pill {
    display: inline-flex;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.18);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.sdn-hero-modern h1 {
    margin: 0;
    max-width: 720px;
    color: #ffffff;
    font-size: 40px;
    line-height: 1.1;
    font-weight: 500;
    letter-spacing: -1.4px;
}

.sdn-hero-modern p {
    margin: 18px 0 0;
    max-width: 650px;
    color: rgba(255,255,255,0.86);
    font-size: 16px;
    line-height: 1.85;
}

.sdn-action-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.sdn-primary-btn,
.sdn-secondary-btn,
.sdn-support-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 24px;
    border-radius: 8px;
    text-decoration: none;
    font-size: 17px;
    font-weight: 500;
    transition: 0.35s ease;
}

.sdn-primary-btn {
    background: #ffffff;
    color: var(--primary);
    box-shadow: 0 18px 35px rgba(0,0,0,0.14);
}

.sdn-secondary-btn {
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.24);
    background: rgba(255,255,255,0.11);
}

    .sdn-primary-btn:hover,
    .sdn-secondary-btn:hover {
        transform: translateY(-5px);
    }

.sdn-orbit-card {
    width: 340px;
    height: 340px;
    margin-left: auto;
    border-radius: 50%;
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.17);
    backdrop-filter: blur(12px);
    position: relative;
    animation: sdnFloat 6s ease-in-out infinite;
}

    .sdn-orbit-card::before,
    .sdn-orbit-card::after {
        content: "";
        position: absolute;
        inset: 35px;
        border-radius: 50%;
        border: 1px dashed rgba(255,255,255,0.35);
    }

    .sdn-orbit-card::after {
        inset: 76px;
        border-style: solid;
        opacity: 0.32;
    }

.sdn-orbit-circle {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--primary);
    position: absolute;
    left: 95px;
    top: 95px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    box-shadow: 0 18px 45px rgba(0,0,0,0.16);
}

    .sdn-orbit-circle span {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        margin-bottom: 10px;
        position: relative;
    }

        .sdn-orbit-circle span::before {
            content: "✓";
            position: absolute;
            inset: 0;
            color: #ffffff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
        }

    .sdn-orbit-circle strong {
        font-size: 22px;
    }

.sdn-mini-card {
    position: absolute;
    min-width: 126px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 18px 40px rgba(0,0,0,0.13);
    transition: 0.35s ease;
}

    .sdn-mini-card:hover {
        transform: translateY(-6px) scale(1.03);
    }

    .sdn-mini-card b {
        display: block;
        color: var(--dark);
        font-size: 18px;
        margin-bottom: 4px;
    }

    .sdn-mini-card small {
        color: var(--text);
        font-size: 12px;
    }

.sdn-mini-one {
    left: -18px;
    top: 52px;
}

.sdn-mini-two {
    right: -12px;
    top: 190px;
}

.sdn-mini-three {
    left: 50px;
    bottom: -10px;
}

/* Summary */
.sdn-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.sdn-summary-card {
    padding: 22px;
    border-radius: 15px;
    background: rgba(255,255,255,0.92);
    border: 1px solid rgba(11,114,92,0.10);
    box-shadow: 0 16px 42px rgba(12, 58, 47, 0.07);
    transition: 0.35s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 29px;
    align-items: center;
}

    .sdn-summary-card::before {
        content: "";
        position: absolute;
        width: 110px;
        height: 110px;
        right: -58px;
        top: -58px;
        border-radius: 50%;
        background: var(--soft);
        transition: 0.35s ease;
    }

    .sdn-summary-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 24px 58px rgba(12, 58, 47, 0.12);
    }

        .sdn-summary-card:hover::before {
            width: 150px;
            height: 150px;
            background: rgba(18,164,127,0.13);
        }

.sdn-summary-icon {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background: #e8f6f6;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 0;
    position: relative;
    z-index: 2;
    transition: 0.35s ease;
    border: dashed 2px #15999b75;
    padding: 11px;
}

.sdn-summary-card:hover .sdn-summary-icon {
    background: transparent;
    color: #ffffff;
    transform: rotate(-5deg);
}

.sdn-summary-card span {
    display: block;
    color: var(--text);
    font-size: 17px;
    margin-bottom: 6px;
    position: relative;
    z-index: 2;
}

.sdn-summary-card h3 {
    margin: 0;
    color: #114c5c;
    font-size: 18px;
    font-weight: 500;
    position: relative;
    z-index: 2;
}

/* Layout */
.sdn-main-layout {
    display: grid;
    grid-template-columns: 1fr 355px;
    gap: 24px;
    align-items: start;
}

.sdn-content-area {
    min-width: 0;
}

/* Tabs */
.sdn-modern-tabs {
    display: flex;
    gap: 10px;
    padding: 10px;
    overflow-x: auto;
    border-radius: 15px;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(11,114,92,0.09);
    box-shadow: 0 16px 40px rgba(12, 58, 47, 0.06);
    margin-bottom: 20px;
    position: sticky;
    top: 10px;
    z-index: 8;
    backdrop-filter: blur(14px);
}

    .sdn-modern-tabs a {
        text-decoration: none;
        white-space: nowrap;
        color: var(--text);
        font-size: 16px;
        font-weight: 500;
        padding: 13px 18px;
        border-radius: 6px;
        transition: 0.3s ease;
    }

        .sdn-modern-tabs a:hover,
        .sdn-modern-tabs a.active {
            background: linear-gradient(135deg, #114c5c, #15999b);
            color: #ffffff;
        }

/* Content Cards */
.sdn-section-card {
    padding: 20px;
    border-radius: 16px;
    /*! background: rgba(255,255,255,0.96); */
    border: 1px solid rgba(11, 114, 92, 0.15);
    /*! box-shadow: 0 18px 48px rgba(12, 58, 47, 0.07); */
    /*! margin-bottom: 20px; */
    transition: 0.35s ease;
    position: relative;
    overflow: hidden;
    background-color: #ffff;
}

    .sdn-section-card::before {
        content: "";
        position: absolute;
        width: 140px;
        height: 140px;
        right: -75px;
        top: -75px;
        border-radius: 50%;
        background: #fff;
        transition: 0.35s ease;
    }

    .sdn-section-card:hover {
        /* transform: translateY(-6px); */
        /* box-shadow: 0 26px 64px rgba(12, 58, 47, 0.12); */
    }

        .sdn-section-card:hover::before {
            width: 210px;
            height: 210px;
        }

.sdn-section-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.sdn-title-mark {
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: var(--soft);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 500;
    flex: 0 0 auto;
    padding: 8px;
    border: dashed 1px #15999b;
}

.sdn-section-head h2 {
    margin: 0 0 1px;
    color: var(--dark);
    font-size: 23px;
    font-weight: 500;
    letter-spacing: .5px;
}

.sdn-section-head p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
}

/* Overview */
.sdn-overview-box {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.sdn-overview-copy > p {
    margin: 0 0 20px;
    color: var(--text);
    font-size: 15px;
    line-height: 1.85;
}

.sdn-check-list {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
}

    .sdn-check-list div {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: 10px;
        background: #f8fcfa;
        border: 1px solid #e6f1ed;
        transition: 0.3s ease;
    }

        .sdn-check-list div:hover {
            transform: translateX(6px);
            background: var(--soft);
        }

    .sdn-check-list span {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 500;
        flex: 0 0 auto;
    }

    .sdn-check-list p {
        margin: 0;
        color: var(--dark);
        font-size: 17px;
        font-weight: 500;
    }

.sdn-data-visual {
    padding: 24px;
    border-radius: 26px;
    background: linear-gradient(180deg, #f8fcfa 0%, #eef8f4 100%);
    border: 1px solid #deeee8;
}

.sdn-visual-top {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 24px;
}

    .sdn-visual-top h4 {
        margin: 0;
        color: var(--dark);
        font-size: 19px;
        font-weight: 500;
    }

    .sdn-visual-top small {
        color: var(--text);
        font-size: 12px;
    }

.sdn-progress-lines {
    display: grid;
    gap: 18px;
}

    .sdn-progress-lines div span {
        display: block;
        color: var(--text);
        font-size: 13px;
        margin-bottom: 8px;
    }

    .sdn-progress-lines div {
        position: relative;
    }

        .sdn-progress-lines div::after {
            content: "";
            display: block;
            height: 10px;
            border-radius: 999px;
            background: #ffffff;
            border: 1px solid #deeee8;
        }

    .sdn-progress-lines b {
        position: absolute;
        left: 0;
        bottom: 0;
        height: 10px;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--primary), var(--primary-2));
        animation: sdnProgress 1.2s ease both;
    }

/* Requirements */
.sdn-modern-requirements {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 18px;
    position: relative;
    z-index: 2;
}

.sdn-requirement-box {
    padding: 24px;
    border-radius: 26px;
    background: #f8fcfa;
    border: 1px solid #e1eee9;
    transition: 0.35s ease;
}

    .sdn-requirement-box:hover {
        background: #ffffff;
        transform: translateY(-8px);
        box-shadow: 0 20px 45px rgba(12, 58, 47, 0.10);
    }

.sdn-req-number {
    width: 54px;
    height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 18px;
}

.sdn-requirement-box h4 {
    margin: 0 0 10px;
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
}

.sdn-requirement-box p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
}

/* Timeline */
.sdn-timeline-modern {
    position: relative;
    display: grid;
    gap: 18px;
    z-index: 2;
}

    .sdn-timeline-modern::before {
        content: "";
        position: absolute;
        left: 25px;
        top: 24px;
        bottom: 24px;
        width: 2px;
        background: linear-gradient(180deg, var(--primary), var(--primary-2));
        opacity: 0.35;
    }

.sdn-timeline-item {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 16px;
    padding: 18px;
    border-radius: 24px;
    background: #f8fcfa;
    border: 1px solid #e1eee9;
    transition: 0.35s ease;
    position: relative;
}

    .sdn-timeline-item:hover {
        background: #ffffff;
        transform: translateX(6px);
        box-shadow: 0 18px 42px rgba(12, 58, 47, 0.09);
    }

.sdn-dot {
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 500;
    z-index: 2;
}

.sdn-timeline-item h4 {
    margin: 0 0 8px;
    color: var(--dark);
    font-size: 18px;
    font-weight: 500;
}

.sdn-timeline-item p {
    margin: 0;
    color: var(--text);
    font-size: 14px;
    line-height: 1.75;
}

/* Attachments */
.sdn-empty-modern {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 24px;
    border-radius: 24px;
    background: #f8fcfa;
    border: 1px dashed #cfe2dc;
    position: relative;
    z-index: 2;
}

.sdn-empty-circle {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(12, 58, 47, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    flex: 0 0 auto;
}

.sdn-empty-modern h4 {
    margin: 0 0 8px;
    color: var(--dark);
    font-size: 21px;
    font-weight: 500;
}

.sdn-empty-modern p {
    margin: 0;
    color: #585a59;
    font-size: 16px;
    line-height: 1.7;
}

/* Terms */
.sdn-modern-checkbox {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 10px;
    background: #f2f9f9;
    border: 1px solid #c5e2e2;
    cursor: pointer;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
    font-size: 18px;
}

    .sdn-modern-checkbox input {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
    }

    .sdn-modern-checkbox span {
        color: var(--dark);
        font-size: 17px;
        line-height: 1.6;
    }

.sdn-confirm-modern {
    min-height: 52px;
    padding: 0 26px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: 0.35s ease;
    position: relative;
    z-index: 2;
}

    .sdn-confirm-modern:hover {
        transform: translateY(-5px);
        box-shadow: 0 18px 36px rgba(11, 114, 92, 0.25);
    }

/* Sidebar */
.sdn-sidebar-modern {
    position: sticky;
    top: 20px;
    display: grid;
    gap: 18px;
}

.sdn-side-panel,
.sdn-support-panel {
    padding: 24px;
    border-radius: 14px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(11,114,92,0.10);
    box-shadow: 0 18px 45px rgba(12, 58, 47, 0.07);
    transition: 0.35s ease;
}

    .sdn-side-panel:hover,
    .sdn-support-panel:hover {
        /* transform: translateY(-5px); */
    }

    .sdn-side-panel h3,
    .sdn-support-panel h3 {
        margin: 0 0 18px;
        color: var(--dark);
        font-size: 21px;
        font-weight: 500;
    }

.sdn-info-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
}

    .sdn-info-line:last-child {
        border-bottom: none;
    }

    .sdn-info-line span {
        color: var(--text);
        font-size: 14px;
    }

    .sdn-info-line strong {
        color: var(--dark);
        font-size: 14px;
        text-align: right;
    }

.sdn-related-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--dark);
    padding: 15px;
    border-radius: 18px;
    background: #f8fcfa;
    border: 1px solid #e1eee9;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 500;
    transition: 0.35s ease;
}

    .sdn-related-modern:last-child {
        margin-bottom: 0;
    }

    .sdn-related-modern:hover {
        background: linear-gradient(135deg, var(--primary), var(--primary-2));
        color: #ffffff;
        transform: translateX(6px);
    }

.sdn-support-panel {
    background: linear-gradient(135deg, var(--primary), var(--primary-2));
    color: #ffffff;
    overflow: hidden;
    position: relative;
}

    .sdn-support-panel::before {
        content: "";
        position: absolute;
        width: 170px;
        height: 170px;
        right: -80px;
        top: -80px;
        border-radius: 50%;
        background: rgba(255,255,255,0.13);
    }

    .sdn-support-panel > * {
        position: relative;
        z-index: 2;
    }

    .sdn-support-panel span {
        display: inline-flex;
        padding: 7px 13px;
        border-radius: 999px;
        background: rgba(255,255,255,0.15);
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 14px;
    }

    .sdn-support-panel h3 {
        color: #ffffff;
        margin-bottom: 10px;
    }

    .sdn-support-panel p {
        margin: 0 0 18px;
        color: rgba(255,255,255,0.82);
        font-size: 16px;
        line-height: 1.55;
    }

.sdn-support-item {
    padding: 14px;
    border-radius: 10px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
    margin-bottom: 12px;
}

    .sdn-support-item small {
        display: block;
        color: rgba(255,255,255,0.72);
        font-size: 12px;
        margin-bottom: 5px;
    }

    .sdn-support-item strong {
        color: #ffffff;
        font-size: 19px;
        word-break: break-word;
        font-weight: 500;
    }

.sdn-support-btn {
    width: 100%;
    background: #ffffff;
    color: var(--primary);
    margin-top: 4px;
}

    .sdn-support-btn:hover {
        transform: translateY(-4px);
    }

/* Animations */
@keyframes sdnFloat {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-12px);
    }
}

@keyframes sdnProgress {
    from {
        width: 0;
    }
}

/* Responsive */
@media (max-width: 1100px) {
    .sdn-hero-modern {
        grid-template-columns: 1fr;
    }

    .sdn-orbit-card {
        margin: 20px auto 0;
    }

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

    .sdn-main-layout {
        grid-template-columns: 1fr;
    }

    .sdn-sidebar-modern {
        position: static;
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 860px) {
    .services-details-wrap-new {
        padding: 55px 14px;
    }

    .sdn-hero-modern {
        padding: 30px;
        border-radius: 28px;
    }

        .sdn-hero-modern h1 {
            font-size: 36px;
        }

    .sdn-overview-box,
    .sdn-modern-requirements {
        grid-template-columns: 1fr;
    }

    .sdn-sidebar-modern {
        grid-template-columns: 1fr;
    }

    .sdn-modern-tabs {
        position: relative;
        top: auto;
    }
}

@media (max-width: 620px) {
    .sdn-summary-grid {
        grid-template-columns: 1fr;
    }

    .sdn-hero-modern h1 {
        font-size: 29px;
    }

    .sdn-hero-modern p {
        font-size: 14px;
    }

    .sdn-action-row {
        flex-direction: column;
    }

    .sdn-primary-btn,
    .sdn-secondary-btn,
    .sdn-confirm-modern {
        width: 100%;
    }

    .sdn-orbit-card {
        width: 280px;
        height: 280px;
    }

    .sdn-orbit-circle {
        width: 124px;
        height: 124px;
        left: 78px;
        top: 78px;
    }

    .sdn-mini-card {
        position: static;
        margin: 12px auto 0;
        width: 180px;
    }

    .sdn-section-card {
        padding: 22px;
        border-radius: 24px;
    }

    .sdn-section-head {
        align-items: flex-start;
    }

        .sdn-section-head h2 {
            font-size: 22px;
        }

    .sdn-empty-modern {
        flex-direction: column;
        text-align: center;
    }
}



















.sad-wrap {
    width: 100%;
}

.ne-tab-menu {
    width: 100%;
    display: flex;
    gap: 6px;
    align-items: center;
    background: #fff;
    padding: 12px;
    border-radius: 11px;
    margin-bottom: 28px;
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.04);
    overflow-x: auto;
    border: solid 1px #cccccc80;
}

.ne-tab-btn {
    position: relative;
    border: 0;
    outline: none;
    background: transparent;
    padding: 16px 26px;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 500;
    color: #0e727b;
    cursor: pointer;
    transition: color 0.35s ease, transform 0.35s ease;
    overflow: hidden;
    z-index: 1;
    white-space: nowrap;
}

    .ne-tab-btn::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #0d6f78, #15979d);
        border-radius: inherit;
        opacity: 0;
        transform: scale(0.75);
        transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.25s ease;
        z-index: -1;
    }

    .ne-tab-btn::after {
        content: "";
        position: absolute;
        width: 35px;
        height: 80px;
        top: -18px;
        left: -50px;
        background: rgba(255, 255, 255, 0.35);
        transform: rotate(25deg);
        opacity: 0;
        transition: 0.45s ease;
        z-index: -1;
    }

    .ne-tab-btn:hover {
        color: #0d7f86;
        transform: translateY(-2px);
    }

        .ne-tab-btn:hover::before {
            opacity: 0.08;
            transform: scale(1);
        }

    .ne-tab-btn.active {
        color: #ffffff;
        transform: translateY(-2px);
        animation: tabPop 0.38s ease;
        box-shadow: 0 10px 24px rgba(13, 111, 120, 0.28);
    }

        .ne-tab-btn.active::before {
            opacity: 1;
            transform: scale(1);
        }

        .ne-tab-btn.active::after {
            opacity: 1;
            left: 120%;
        }

.ne-tab-content {
    display: none;
    background: transparent;
    padding: 0;
    border-radius: 0;
    border: 0;
    box-shadow: 0;
}

    .ne-tab-content.active {
        display: block;
        animation: contentFadeSlide 0.45s ease both;
    }

@keyframes tabPop {
    0% {
        transform: translateY(0) scale(0.96);
    }

    60% {
        transform: translateY(-3px) scale(1.04);
    }

    100% {
        transform: translateY(-2px) scale(1);
    }
}

@keyframes contentFadeSlide {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (max-width: 768px) {
    .ne-tab-menu {
        gap: 10px;
        padding: 10px;
    }

    .ne-tab-btn {
        padding: 13px 18px;
        font-size: 14px;
    }

    .ne-tab-content {
        padding: 24px;
        border-radius: 20px;
    }
}



.sdn-side-panel {
    text-align: center;
}

    .sdn-side-panel img {
        width: 120px;
    }

.sdn-check-list-1 {
    display: block;
}

    .sdn-check-list-1 li {
        margin-bottom: 5px;
    }





.services-new-card .card-icon {
    width: 100px;
    height: 100px;
    border-radius: 999px;
    background: #15999b0d;
    border: 2px dashed rgba(21, 153, 155, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s ease;
    padding: 12px;
}


.services-new-card .card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    position: relative;
    z-index: 2;
}





.services-new-card:hover .card-icon img {
    filter: brightness(0) invert(1);
}

.services-featured-card .card-icon img {
    filter: brightness(0) invert(1);
}

.services-featured-card:hover .card-icon img {
    filter: inherit;
}




.services-details-wrap-new ul {
    margin-left: 0;
    padding-left: 15px;
}




.login-mdn {
    min-height: auto;
    width: 100%;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    /*! background:
        radial-gradient(circle at 8% 18%, rgba(32, 164, 167, 0.22), transparent 28%),
        radial-gradient(circle at 92% 85%, rgba(5, 52, 72, 0.22), transparent 30%),
        linear-gradient(135deg, #f8fcfc 0%, #edf7f7 48%, #ffffff 100%); */
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .login-mdn::before {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        /*! background: linear-gradient(135deg, rgba(31, 166, 167, 0.24), rgba(0, 55, 77, 0.08)); */
        left: -210px;
        top: -160px;
        animation: mdnFloat 9s ease-in-out infinite;
        /*! background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%); */
    }

    .login-mdn::after {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        border-radius: 50%;
        /*! background: linear-gradient(135deg, rgba(0, 55, 77, 0.16), rgba(31, 166, 167, 0.18)); */
        right: -170px;
        bottom: -150px;
        animation: mdnFloat 8s ease-in-out infinite reverse;
    }

@keyframes mdnFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-28px) scale(1.04);
    }
}

.login-mdn-shape {
    position: absolute;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(20, 158, 159, 0.18);
    backdrop-filter: blur(12px);
    box-shadow: 0 20px 60px rgba(0, 55, 77, 0.08);
    z-index: 1;
}

    .login-mdn-shape.one {
        width: 84px;
        height: 84px;
        left: 14%;
        bottom: 18%;
        animation: mdnDrift 7s ease-in-out infinite;
    }

    .login-mdn-shape.two {
        width: 58px;
        height: 58px;
        right: 16%;
        top: 14%;
        animation: mdnDrift 6s ease-in-out infinite reverse;
    }

    .login-mdn-shape.three {
        width: 18px;
        height: 18px;
        left: 22%;
        top: 22%;
        background: #0d5a6f;
        box-shadow: 0 0 0 12px rgba(13, 90, 111, 0.08);
        animation: mdnPulse 2.5s ease-in-out infinite;
    }

@keyframes mdnDrift {
    0%, 100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-24px);
    }
}

@keyframes mdnPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.55;
    }
}

.login-mdn-card {
    width: 100%;
    max-width: 100%;
    min-height: auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    position: relative;
    z-index: 2;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(197, 197, 197, 0.88);
    backdrop-filter: blur(24px);
    /*! box-shadow: 0 35px 100px rgba(0, 55, 77, 0.16); */
}

.login-mdn-left {
    padding: 46px;
    position: relative;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.01)), url("../images/img/logins.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .login-mdn-left::before {
        content: "";
        position: absolute;
        inset: 0;
        /*! background:
        linear-gradient(135deg, rgba(0, 42, 59, 0.88), rgba(19, 157, 159, 0.54)),
        radial-gradient(circle at 70% 25%, rgba(255,255,255,0.18), transparent 26%); */
        z-index: 0;
    }

    .login-mdn-left::after {
        content: "";
        position: absolute;
        width: 520px;
        height: 520px;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 50%;
        right: -180px;
        bottom: -180px;
        z-index: 0;
    }

.login-mdn-brand,
.login-mdn-hero,
.login-mdn-mini {
    position: relative;
    z-index: 1;
}

.login-mdn-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.login-mdn-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.6px;
}

    .login-mdn-logo span {
        width: 46px;
        height: 46px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: rgba(255, 255, 255, 0.16);
        border: 1px solid rgba(255, 255, 255, 0.24);
        backdrop-filter: blur(10px);
        font-size: 22px;
    }

.login-mdn-secure {
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.88);
}

.login-mdn-hero {
    max-width: 540px;
}

    .login-mdn-hero .tag {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.14);
        border: 1px solid rgba(255, 255, 255, 0.22);
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 20px;
    }

        .login-mdn-hero .tag i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.14);
        }

    .login-mdn-hero h1 {
        font-size: clamp(38px, 5.4vw, 66px);
        line-height: 0.98;
        letter-spacing: -2.8px;
        margin-bottom: 20px;
    }

    .login-mdn-hero p {
        max-width: 475px;
        font-size: 16px;
        line-height: 1.75;
        color: rgba(255, 255, 255, 0.84);
    }

.login-mdn-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.login-mdn-mini-box {
    padding: 17px;
    border-radius: 9px;
    background: rgba(0, 0, 0, 0.21);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(14px);
    transition: 0.35s ease;
}

    .login-mdn-mini-box:hover {
        transform: translateY(-6px);
        background: rgba(255, 255, 255, 0.2);
    }

    .login-mdn-mini-box strong {
        display: block;
        font-size: 24px;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .login-mdn-mini-box span {
        display: block;
        font-size: 12px;
        color: rgba(255, 255, 255, 0.78);
        line-height: 1.4;
    }

.login-mdn-right {
    padding: 54px 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(247,251,251,0.86));
    position: relative;
}

.login-mdn-form {
    width: 100%;
    /*! max-width: 430px; */
    position: relative;
    z-index: 1;
}

.login-mdn-title-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: 999px;
    background: rgba(20, 158, 159, 0.1);
    color: #149e9f;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 18px;
}

    .login-mdn-title-badge span {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: #149e9f;
        box-shadow: 0 0 0 7px rgba(20, 158, 159, 0.12);
    }

.login-mdn-form h2 {
    font-size: 29px;
    line-height: 1.1;
    color: #00374d;
    letter-spacing: 0;
    margin-bottom: 10px;
}

.login-mdn-form .desc {
    color: #667085;
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px;
}

.uae-pass-btn {
    width: 100%;
    height: 75px;
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    /*! background: linear-gradient(135deg, #101828, #00374d); */
    color: #464646;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: 18px;
    font-weight: 500;
    /*! box-shadow: 0 18px 38px rgba(0, 55, 77, 0.24); */
    transition: 0.32s ease;
    margin-bottom: 24px;
    background-color: #e7e7e759;
    border: solid 1px #ccc;
    letter-spacing: .5px;
    font-weight: 500;
    text-transform: uppercase;
}

    .uae-pass-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 46px rgba(0, 55, 77, 0.32);
    }

.uae-pass-icon {
    width: 36px;
    height: auto;
    border-radius: 9px;
    background: transparent;
    display: grid;
    place-items: center;
    color: #00374d;
    font-size: 18px;
    font-weight: 500;
}

.login-mdn-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 4px 0 24px;
    color: #8a96a8;
    font-size: 13px;
    font-weight: 500;
}

    .login-mdn-divider::before,
    .login-mdn-divider::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #dce7e8;
    }

.login-mdn-group {
    margin-bottom: 18px;
}

    .login-mdn-group label {
        display: block;
        font-size: 17px;
        font-weight: 500;
        color: #344054;
        margin-bottom: 8px;
    }

.login-mdn-input {
    position: relative;
}

    .login-mdn-input input {
        width: 100%;
        height: 63px;
        border-radius: 9px;
        border: 1px solid #dce7e8;
        background: #fff;
        outline: none;
        padding: 0 54px 0 18px;
        color: #00374d;
        font-size: 17px;
        font-weight: 500;
        transition: 0.3s ease;
        box-shadow: 0 10px 28px rgba(0, 55, 77, 0.04);
    }

        .login-mdn-input input::placeholder {
            color: #98a2b3;
            font-weight: 500;
        }

        .login-mdn-input input:focus {
            border-color: #149e9f;
            box-shadow: 0 0 0 5px rgba(20, 158, 159, 0.12);
        }

    .login-mdn-input .icon {
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #149e9f;
        font-size: 18px;
        cursor: pointer;
        user-select: none;
    }

.login-mdn-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 2px 0 24px;
}

.login-mdn-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #667085;
    font-size: 14px;
    font-weight: 500;
}

    .login-mdn-check input {
        accent-color: #149e9f;
        width: 15px;
        height: 15px;
    }

.login-mdn-options a {
    color: #149e9f;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.login-mdn-submit {
    width: 100%;
    height: 60px;
    border: 0;
    border-radius: 8px;
    background: linear-gradient(135deg, #1fa6a7, #007f86);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 18px 36px rgba(31, 166, 167, 0.3);
    transition: 0.32s ease;
    background: linear-gradient(90deg, #15999b, #146f87);
}

    .login-mdn-submit:hover {
        transform: translateY(-3px);
        box-shadow: 0 24px 44px rgba(31, 166, 167, 0.38);
    }

.login-mdn-social {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 24px;
}

    .login-mdn-social button {
        height: 54px;
        border-radius: 10px;
        border: 1px solid #8ac2c4;
        background: #fff;
        color: #101828;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s ease;
        box-shadow: 0 10px 24px rgba(0, 55, 77, 0.04);
    }

        .login-mdn-social button:hover {
            border-color: #149e9f;
            color: #149e9f;
            transform: translateY(-2px);
        }

.login-mdn-signup {
    margin-top: 28px;
    text-align: center;
    color: #667085;
    font-size: 14px;
    font-weight: 500;
}

    .login-mdn-signup a {
        color: #149e9f;
        font-weight: 500;
        text-decoration: none;
    }

@media (max-width: 980px) {
    .login-mdn-card {
        grid-template-columns: 1fr;
        max-width: 620px;
    }

    .login-mdn-left {
        min-height: 430px;
    }

    .login-mdn-right {
        padding: 48px 34px;
    }
}

@media (max-width: 620px) {
    .login-mdn {
        padding: 15px 0;
        align-items: flex-start;
    }

    .login-mdn-card {
        border-radius: 15px;
    }

    .login-mdn-left {
        padding: 28px;
        min-height: 240px;
    }

    .login-mdn-brand {
        align-items: flex-start;
    }

    .login-mdn-secure {
        display: none;
    }

    .login-mdn-hero h1 {
        font-size: 38px;
        letter-spacing: -1.6px;
    }

    .login-mdn-mini {
        grid-template-columns: repeat(3, 1fr);
        display: none;
    }

    .login-mdn-mini-box {
        padding: 14px 16px;
    }

    .login-mdn-right {
        padding: 18px 20px;
    }

    .login-mdn-form h2 {
        font-size: 18px;
    }

    .login-mdn-options {
        flex-direction: column;
        align-items: flex-start;
    }

    .login-mdn-social {
        grid-template-columns: 1fr;
    }

    .uae-pass-btn,
    .login-mdn-submit,
    .login-mdn-input input {
        height: 56px;
    }
}

@media (max-width: 390px) {
    .login-mdn-left {
        padding: 24px;
    }

    .login-mdn-right {
        padding: 30px 16px;
    }

    .login-mdn-logo {
        font-size: 17px;
    }

    .login-mdn-hero h1 {
        font-size: 34px;
    }
}











.tabs-min-srv {
    max-width: 1100px;
    margin: 0 auto;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid #e6edf3;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(12, 38, 65, 0.08);
    overflow: hidden;
}

.tabs-min-srv__top {
    padding: 28px 28px 10px;
    background: linear-gradient(135deg, #ffffff 0%, #f8fbfd 100%);
}

.tabs-min-srv__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #eaf7fb;
    color: #0f6c8d;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}

.tabs-min-srv__title {
    font-size: 34px;
    line-height: 1.15;
    font-weight: 500;
    color: #0f172a;
    margin-bottom: 10px;
}

.tabs-min-srv__desc {
    font-size: 15px;
    line-height: 1.7;
    color: #64748b;
    max-width: 760px;
    margin-bottom: 22px;
}

.tabs-min-srv__nav {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 30px;
}

.tabs-min-srv__btn {
    border: 1px solid #d9e5ef;
    background: #fff;
    color: #15999b;
    padding: 14px 20px;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    padding: 12px 10px;
    width: 227px;
    letter-spacing: 0;
    font-weight: 500;
}

    .tabs-min-srv__btn i {
        font-size: 28px;
        color:;
    }

    .tabs-min-srv__btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(15, 108, 141, 0.08);
        border-color: #b9d6e4;
    }

    .tabs-min-srv__btn.active {
        background: linear-gradient(135deg, #114c5c, #15999b);
        color: #fff;
        border-color: transparent;
        box-shadow: 0 14px 28px rgba(25, 167, 199, 0.25);
    }

.tabs-min-srv__body {
    padding: 28px;
}

.tabs-min-srv__panel {
    display: none;
    animation: fadeTab 0.35s ease;
}

    .tabs-min-srv__panel.active {
        display: block;
    }

@keyframes fadeTab {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tabs-min-srv__content {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: stretch;
}

.tabs-min-srv__card {
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
    border: 1px solid #e7eef5;
    border-radius: 24px;
    padding: 26px;
    box-shadow: 0 12px 35px rgba(15, 23, 42, 0.04);
}

.tabs-min-srv__head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.tabs-min-srv__icon {
    width: 62px;
    height: 62px;
    border-radius: 18px;
    background: linear-gradient(135deg, #0f6c8d, #19a7c7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 14px 30px rgba(25, 167, 199, 0.25);
    flex-shrink: 0;
}

.tabs-min-srv__head h3 {
    font-size: 28px;
    line-height: 1.2;
    color: #0f172a;
    font-weight: 500;
    margin-bottom: 6px;
}

.tabs-min-srv__head p {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
}

.tabs-min-srv__list {
    list-style: none;
    display: grid;
    gap: 14px;
    margin-top: 20px;
}

    .tabs-min-srv__list li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        padding: 14px 16px;
        border-radius: 16px;
        background: #f8fbfd;
        border: 1px solid #ecf2f7;
        transition: 0.3s ease;
    }

        .tabs-min-srv__list li:hover {
            background: #f1f8fc;
            transform: translateX(3px);
        }

        .tabs-min-srv__list li i {
            color: #0f6c8d;
            font-size: 15px;
            margin-top: 4px;
            min-width: 18px;
        }

        .tabs-min-srv__list li span {
            font-size: 15px;
            line-height: 1.65;
            color: #334155;
            font-weight: 500;
        }

.tabs-min-srv__side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.tabs-min-srv__mini {
    background: linear-gradient(135deg, #0f6c8d, #19a7c7);
    color: #fff;
    border-radius: 24px;
    padding: 24px;
    min-height: 180px;
    position: relative;
    overflow: hidden;
}

    .tabs-min-srv__mini::before {
        content: "";
        position: absolute;
        width: 150px;
        height: 150px;
        background: rgba(255,255,255,0.09);
        border-radius: 50%;
        right: -45px;
        top: -45px;
    }

    .tabs-min-srv__mini i {
        font-size: 28px;
        margin-bottom: 16px;
        display: inline-block;
    }

    .tabs-min-srv__mini h4 {
        font-size: 22px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 10px;
        position: relative;
        z-index: 1;
    }

    .tabs-min-srv__mini p {
        font-size: 14px;
        line-height: 1.7;
        color: rgba(255,255,255,0.9);
        position: relative;
        z-index: 1;
    }

.tabs-min-srv__info {
    background: #ffffff;
    border: 1px solid #e7eef5;
    border-radius: 24px;
    padding: 22px;
}

    .tabs-min-srv__info h5 {
        font-size: 18px;
        font-weight: 500;
        color: #0f172a;
        margin-bottom: 14px;
    }

    .tabs-min-srv__info ul {
        list-style: none;
        display: grid;
        gap: 12px;
    }

        .tabs-min-srv__info ul li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
            color: #475569;
            font-size: 14px;
            line-height: 1.6;
        }

            .tabs-min-srv__info ul li i {
                color: #19a7c7;
                margin-top: 3px;
            }

@media (max-width: 900px) {
    .tabs-min-srv__content {
        grid-template-columns: 1fr;
    }

    .tabs-min-srv__title {
        font-size: 28px;
    }
}

@media (max-width: 640px) {
    .tabs-min-srv__top,
    .tabs-min-srv__body {
        padding: 20px;
    }

    .tabs-min-srv__btn {
        width: 100%;
        justify-content: center;
    }

    .tabs-min-srv__head {
        align-items: flex-start;
    }

        .tabs-min-srv__head h3 {
            font-size: 24px;
        }

    .tabs-min-srv__icon {
        width: 54px;
        height: 54px;
        font-size: 20px;
    }

    .tabs-min-srv__title {
        font-size: 24px;
    }
}











.tabs-min-srv__panel {
    display: none;
}

    .tabs-min-srv__panel.active {
        display: block;
    }


.mt-30 {
    margin-top: 30px
}

.mb-30 {
    margin-bottom: 30px
}

.mb-20 {
    margin-bottom: 20px
}













.apply-info {
    min-height: auto;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .apply-info::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(17, 145, 165, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 145, 165, 0.055) 1px, transparent 1px);
        background-size: 34px 34px;
        pointer-events: none;
    }

.apply-info__wrap {
    width: 100%;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.apply-info__card {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 30px;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.86);
    border: 1px solid rgba(198, 229, 236, 0.95);
    border-radius: 26px;
    padding: 15px;
    box-shadow: 0 30px 80px rgba(13, 64, 84, 0.1);
    overflow: hidden;
    position: relative;
}

    .apply-info__card::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        right: -110px;
        bottom: -110px;
        background: rgba(20, 158, 159, 0.08);
    }

.apply-info__left {
    position: relative;
    z-index: 1;
    border-radius: 18px;
    padding: 30px;
    color: #fff;
    background: linear-gradient(135deg, rgba(7, 84, 103, 0.01), rgba(23, 164, 181, 0)), url("../images/img/arabic.webp");
    background-size: cover;
    background-position: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: auto;
}

    .apply-info__left::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(4, 56, 74, 0.92), rgba(22, 156, 173, 0.68));
        z-index: 0;
    }

    .apply-info__left::after {
        content: "";
        position: absolute;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.24);
        right: -90px;
        bottom: -90px;
        z-index: 0;
    }

.apply-info__badge,
.apply-info__hero,
.apply-info__status {
    position: relative;
    z-index: 1;
}

.apply-info__badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 15px;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.22);
    font-size: 13px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.apply-info__hero h1 {
    font-size: clamp(34px, 2vw, 30px);
    line-height: 1.04;
    letter-spacing: 0;
    margin-bottom: 16px;
    font-weight: 500;
    color: #fff;
}

.apply-info__hero p {
    color: rgba(255,255,255,0.86);
    font-size: 15px;
    line-height: 1.8;
    max-width: 430px;
}

.apply-info__status {
    display: grid;
    gap: 12px;
}

.apply-info__status-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0, 0, 0, 0.19);
    border: 1px solid rgba(255,255,255,0.2);
    backdrop-filter: blur(12px);
}

    .apply-info__status-item i {
        width: 38px;
        height: 38px;
        border-radius: 13px;
        background: rgba(255,255,255,0.18);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .apply-info__status-item strong {
        display: block;
        font-size: 14px;
        margin-bottom: 3px;
    }

    .apply-info__status-item span {
        display: block;
        font-size: 12px;
        color: rgba(255,255,255,0.75);
        line-height: 1.4;
    }

.apply-info__right {
    position: relative;
    z-index: 1;
    padding: 14px 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.apply-info__top {
    margin-bottom: 24px;
}

.apply-info__step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    border-radius: 999px;
    background: #e8f8fb;
    color: #108da0;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}

.apply-info__top h2 {
    font-size: clamp(28px, 2vw, 38px);
    color: #07384b;
    font-weight: 500;
    letter-spacing: 0;
    margin-bottom: -1px;
}

.apply-info__top p {
    font-size: 15px;
    line-height: 1.8;
    color: #647985;
    max-width: 650px;
}

.apply-info__fetch {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 22px;
    border-radius: 15px;
    background: #f6fbfc;
    border: 1px solid #dceef2;
    margin-bottom: 24px;
}

.apply-info__loader {
    width: 78px;
    height: 78px;
    border-radius: 50%;
    border: 7px solid #dff4f7;
    border-top-color: #18a7b8;
    animation: applySpin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes applySpin {
    to {
        transform: rotate(360deg);
    }
}

.apply-info__fetch h3 {
    font-size: 20px;
    color: #07384b;
    margin-bottom: 7px;
    font-weight: 500;
}

.apply-info__fetch p {
    font-size: 14px;
    color: #647985;
    line-height: 1.7;
}

.apply-info__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.apply-info__item {
    background: #ffffff;
    border: 1px solid #dceef2;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 12px 28px rgba(13, 64, 84, 0.04);
    transition: 0.3s ease;
    display: flex;
}

    .apply-info__item:hover {
        transform: translateY(-4px);
        border-color: #18a7b8;
        box-shadow: 0 18px 34px rgba(13, 64, 84, 0.08);
    }

.apply-info__item-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #e8f8fb;
    color: #1093a6;
    display: grid;
    place-items: center;
    font-size: 17px;
    margin-bottom: 0;
    margin-right: 18px;
    border: dashed 1px #15999b;
}

.apply-info__item small {
    display: block;
    color: #51595d;
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.apply-info__item strong {
    display: block;
    color: #07384b;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.5;
    word-break: break-word;
}

.apply-info__actions {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.apply-info__btn {
    min-height: 54px;
    padding: 0 24px;
    border-radius: 9px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: 0.3s ease;
    text-decoration: none;
}

.apply-info__btn--light {
    background: #fff;
    color: #12384a;
    border: 1px solid #92c5d5;
}

    .apply-info__btn--light:hover {
        color: #108da0;
        border-color: #18a7b8;
    }

.apply-info__btn--primary {
    background: linear-gradient(135deg, #0d6477, #18a7b8);
    color: #fff;
    box-shadow: 0 16px 32px rgba(24, 167, 184, 0.25);
}

    .apply-info__btn--primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 40px rgba(24, 167, 184, 0.32);
    }

@media (max-width: 980px) {
    .apply-info__card {
        grid-template-columns: 1fr;
    }

    .apply-info__left {
        min-height: 420px;
    }
}

@media (max-width: 650px) {
    .apply-info {
        padding: 15px 0px;
        align-items: flex-start;
    }

    .apply-info__card {
        padding: 0;
        border-radius: 15px;
    }

    .apply-info__left {
        min-height: 330px;
        padding: 15px;
        border-radius: 15px;
    }

    .apply-info__grid {
        grid-template-columns: 1fr;
    }

    .apply-info__fetch {
        align-items: flex-start;
        flex-direction: column;
    }

    .apply-info__actions {
        flex-direction: column-reverse;
    }

    .apply-info__btn {
        width: 100%;
    }
}












.dashbord-wrp-1 {
    min-height: 100vh;
    padding: 50px 0;
    position: relative;
    overflow: hidden;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .dashbord-wrp-1::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(18, 136, 156, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 136, 156, 0.045) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }

.db1-layout {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 28px;
    align-items: stretch;
}

.db1-sidebar {
    min-height: calc(100vh - 52px);
    border-radius: 20px;
    padding: 25px;
    background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
    color: #fff;
    box-shadow: 0 24px 65px rgba(15, 117, 136, 0.22);
    position: sticky;
    top: 26px;
    overflow: hidden;
}

    .db1-sidebar::before {
        content: "";
        position: absolute;
        width: 240px;
        height: 240px;
        border-radius: 50%;
        background: rgba(255,255,255,0.08);
        right: -90px;
        bottom: -90px;
    }

.db1-profile {
    position: relative;
    z-index: 1;
    margin-bottom: 34px;
}

.db1-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.18);
    display: grid;
    place-items: center;
    font-size: 51px;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
}

.db1-profile h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 0;
    color: #fff;
}

.db1-profile p {
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.5;
}

.db1-menu {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
}

.db1-tab-btn {
    width: 100%;
    border: 0;
    cursor: pointer;
    min-height: 56px;
    border-radius: 9px;
    padding: 0 18px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    gap: 13px;
    font-size: 16px;
    font-weight: 500;
    text-align: left;
    transition: 0.3s ease;
}

    .db1-tab-btn i {
        width: 22px;
        text-align: center;
        font-size: 16px;
    }

    .db1-tab-btn:hover,
    .db1-tab-btn.active {
        background: rgba(255,255,255,0.22);
        transform: translateX(4px);
        color: #fff;
    }

.db1-main {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(202, 230, 236, 0.95);
    border-radius: 20px;
    padding: 25px;
    min-height: calc(100vh - 52px);
    box-shadow: 0 24px 65px rgba(13, 64, 84, 0.08);
    backdrop-filter: blur(16px);
    overflow: hidden;
}

.db1-panel {
    display: none;
    animation: db1Fade 0.35s ease;
}

    .db1-panel.active {
        display: block;
    }

@keyframes db1Fade {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.db1-head {
    margin-bottom: 34px;
}

    .db1-head h1 {
        font-size: clamp(20px, 2vw, 25px);
        line-height: 1.08;
        letter-spacing: 0;
        color: #023b53;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .db1-head p {
        color: #5d7482;
        font-size: 17px;
        line-height: 1.7;
        margin-bottom: 0;
    }

.db1-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 26px;
}

.db1-stat-card {
    background: rgba(255,255,255,0.9);
    border: 1px solid #d6eaf0;
    border-radius: 20px;
    padding: 28px;
    min-height: 205px;
    box-shadow: 0 18px 45px rgba(13, 64, 84, 0.06);
    transition: 0.3s ease;
    position: relative;
    overflow: hidden;
}

    .db1-stat-card::after {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(24, 167, 184, 0.08);
        right: -50px;
        bottom: -50px;
    }

    .db1-stat-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 55px rgba(13, 64, 84, 0.1);
        border-color: #9ed8e2;
    }

.db1-stat-icon {
    width: 70px;
    height: 70px;
    border-radius: 999px;
    background: #e7f8fb;
    color: #1198aa;
    display: grid;
    place-items: center;
    font-size: 32px;
    margin-bottom: 15px;
    border: dashed 1px #15999bc7;
}

.db1-stat-card h2 {
    font-size: 38px;
    font-weight: 500;
    color: #023b53;
    margin-bottom: 2px;
    letter-spacing: -1px;
}

.db1-stat-card p {
    color: #5d7482;
    font-weight: 500;
    font-size: 15px;
    margin: 0;
}

.db1-card {
    background: rgba(255,255,255,0.92);
    border: 1px solid #d6eaf0;
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 18px 45px rgba(13, 64, 84, 0.06);
}

.db1-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
}

    .db1-card-title h2 {
        font-size: 22px;
        color: #023b53;
        font-weight: 500;
        letter-spacing: 0;
    }

.db1-action-btn {
    min-height: 38px;
    padding: 0px 14px;
    border-radius: 6px;
    border: 0;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: 0.3s ease;
    box-shadow: 0 14px 28px rgba(24,167,184,0.22);
    margin-top: 15px;
}

    .db1-action-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 35px rgba(24,167,184,0.3);
    }

.db1-list {
    display: grid;
    gap: 16px;
}

.db1-list-item {
    display: block;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 15px;
    border-radius: 11px;
    background: #f6fbfc;
    border: 1px solid #dceef2;
    transition: 0.3s ease;
}

    .db1-list-item:hover {
        background: #eef9fb;
        transform: translateX(4px);
    }

.db1-list-left {
    display: flex;
    align-items: initial;
    gap: 14px;
}

.db1-list-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e7f8fb;
    color: #1198aa;
    display: grid;
    place-items: center;
    font-size: 23px;
    flex-shrink: 0;
    border: dashed 1px #15999bbf;
}

.db1-list-item h3 {
    font-size: 18px;
    color: #023b53;
    font-weight: 500;
    margin-bottom: 6px;
}

.db1-list-item p {
    color: #5f7683;
    font-size: 14px;
    line-height: 1.5;
}

.db1-status {
    padding: 9px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

    .db1-status.approved {
        background: #e8f8ef;
        color: #078345;
        float: right;
    }

    .db1-status.pending {
        background: #fff4d9;
        color: #a86500;
        float: right;
    }

    .db1-status.notification {
        background: #e6f7fb;
        color: #07839b;
        float: right;
    }

    .db1-status.rejected {
        background: #ffe9e9;
        color: #c83232;
    }

.db1-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.db1-info-box {
    background: #f6fbfc;
    border: 1px solid #dceef2;
    border-radius: 22px;
    padding: 22px;
    transition: 0.3s ease;
}

    .db1-info-box:hover {
        background: #eef9fb;
        transform: translateY(-4px);
    }

    .db1-info-box i {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: #e7f8fb;
        color: #1198aa;
        display: grid;
        place-items: center;
        font-size: 18px;
        margin-bottom: 15px;
    }

    .db1-info-box small {
        display: block;
        font-size: 13px;
        color: #6b808a;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .db1-info-box strong {
        color: #023b53;
        font-size: 17px;
        line-height: 1.5;
        word-break: break-word;
    }

.db1-empty {
    text-align: center;
    padding: 50px 20px;
    color: #5f7683;
}

    .db1-empty i {
        width: 78px;
        height: 78px;
        border-radius: 24px;
        background: #e7f8fb;
        color: #1198aa;
        display: grid;
        place-items: center;
        margin: 0 auto 18px;
        font-size: 30px;
    }

    .db1-empty h3 {
        color: #023b53;
        font-size: 24px;
        margin-bottom: 8px;
    }

@media (max-width: 1100px) {
    .db1-layout {
        grid-template-columns: 1fr;
    }

    .db1-sidebar {
        position: relative;
        top: auto;
        min-height: auto;
    }

    .db1-menu {
        grid-template-columns: repeat(4, 1fr);
    }

    .db1-tab-btn {
        justify-content: center;
    }

    .db1-profile {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .db1-avatar {
        margin-bottom: 0;
    }
}

@media (max-width: 850px) {
    .dashbord-wrp-1 {
        padding: 16px;
    }

    .db1-main,
    .db1-sidebar {
        border-radius: 14px;
        padding: 22px;
    }

    .db1-stats,
    .db1-grid-2 {
        grid-template-columns: 1fr;
    }

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

    .db1-card-title {
        align-items: flex-start;
        flex-direction: column;
    }

    .db1-list-item {
        align-items: flex-start;
        flex-direction: column;
    }

    .db1-status {
        align-self: flex-start;
    }
}

@media (max-width: 520px) {
    .db1-profile {
        align-items: flex-start;
        flex-direction: column;
    }

    .db1-menu {
        grid-template-columns: 1fr;
    }

    .db1-tab-btn {
        justify-content: flex-start;
    }

    .db1-main,
    .db1-sidebar {
        padding: 9px;
    }

    .db1-stat-card {
        min-height: auto;
        padding: 22px;
    }

    .db1-card {
        padding: 20px;
    }

    .db1-list-left {
        align-items: flex-start;
    }
}
























.user-profile-page {
    /*! min-height: 100vh; */
    /*! padding: 40px 18px; */
    /*! background:
        radial-gradient(circle at 8% 12%, rgba(20, 158, 159, 0.16), transparent 28%),
        radial-gradient(circle at 90% 85%, rgba(0, 55, 77, 0.13), transparent 32%),
        linear-gradient(135deg, #f8fcfd 0%, #eef8fa 100%); */
    /*! position: relative; */
    /*! overflow: hidden; */
}

    .user-profile-page::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(18, 136, 156, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(18, 136, 156, 0.045) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }

.user-profile-page__wrap {
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.user-profile-page__header {
    margin-bottom: 28px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.user-profile-page__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 15px;
    border-radius: 999px;
    background: #e7f8fb;
    color: #0f8798;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
}

.user-profile-page__header h1 {
    font-size: clamp(32px, 2vw, 28px);
    line-height: 1.08;
    color: #023b53;
    font-weight: 500;
    letter-spacing: -1.4px;
    margin-bottom: 8px;
}

.user-profile-page__header p {
    color: #5d7482;
    font-size: 16px;
    line-height: 1.7;
}

.user-profile-page__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.up-btn {
    min-height: 50px;
    padding: 0 20px;
    border-radius: 7px;
    border: 0;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: 0.3s ease;
    text-decoration: none;
}

.up-btn--primary {
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    box-shadow: 0 16px 32px rgba(24, 167, 184, 0.24);
}

    .up-btn--primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 22px 42px rgba(24, 167, 184, 0.32);
    }

.up-btn--light {
    background: #fff;
    color: #07384b;
    border: 1px solid #d7eaf0;
}

    .up-btn--light:hover {
        color: #0f8798;
        border-color: #18a7b8;
    }

.user-profile-page__layout {
    display: block;
}

.up-sidebar {
    background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
    border-radius: 32px;
    padding: 28px;
    color: #fff;
    box-shadow: 0 24px 65px rgba(15, 117, 136, 0.22);
    position: sticky;
    top: 24px;
    overflow: hidden;
}

    .up-sidebar::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -100px;
        bottom: -90px;
        background: rgba(255,255,255,0.08);
    }

.up-avatar {
    position: relative;
    z-index: 1;
    width: 96px;
    height: 96px;
    border-radius: 28px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.2);
    display: grid;
    place-items: center;
    font-size: 42px;
    margin-bottom: 22px;
    backdrop-filter: blur(12px);
}

.up-sidebar h2 {
    position: relative;
    z-index: 1;
    font-size: 26px;
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 8px;
}

.up-sidebar p {
    position: relative;
    z-index: 1;
    color: rgba(255,255,255,0.82);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 22px;
}

.up-side-info {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 12px;
    margin-top: 20px;
}

.up-side-info__item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.12);
}

    .up-side-info__item i {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        background: rgba(255,255,255,0.15);
        display: grid;
        place-items: center;
        flex-shrink: 0;
    }

    .up-side-info__item small {
        display: block;
        color: rgba(255,255,255,0.72);
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .up-side-info__item strong {
        display: block;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        word-break: break-word;
    }

.up-card {
    /*! background: rgba(255,255,255,0.86); */
    /*! border: 1px solid rgba(204, 230, 236, 0.95); */
    border-radius: 0;
    padding: 0;
    /*! box-shadow: 0 25px 70px rgba(13, 64, 84, 0.09); */
    position: relative;
    overflow: hidden;
}

    .up-card::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -100px;
        bottom: -100px;
        background: rgba(20, 158, 159, 0.08);
        pointer-events: none;
    }

.up-section-title {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid #dceef2;
}

    .up-section-title h3 {
        font-size: 21px;
        color: #023b53;
        font-weight: 500;
        letter-spacing: -0.5px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .up-section-title h3 i {
            width: 44px;
            height: 44px;
            border-radius: 15px;
            background: #e7f8fb;
            color: #1198aa;
            display: grid;
            place-items: center;
            font-size: 18px;
        }

.up-form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.up-form-group {
    display: grid;
    gap: 8px;
}

    .up-form-group.full {
        grid-column: 1 / -1;
    }

    .up-form-group label {
        color: #12384a;
        font-size: 16px;
        font-weight: 500;
    }

.up-input {
    position: relative;
}

    .up-input i {
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        color: #1198aa;
        font-size: 15px;
        z-index: 1;
    }

    .up-input input,
    .up-input select {
        width: 100%;
        min-height: 56px;
        border: 1px solid #d7eaf0;
        border-radius: 8px;
        background: #fff;
        color: #07384b;
        font-size: 17px;
        font-weight: 500;
        padding: 0 16px 0 46px;
        outline: none;
        transition: 0.3s ease;
        font-family: inherit;
    }

        .up-input input::placeholder {
            color: #94a8b2;
            font-weight: 500;
        }

        .up-input input:focus,
        .up-input select:focus {
            border-color: #18a7b8;
            box-shadow: 0 0 0 5px rgba(24, 167, 184, 0.1);
        }

        .up-input input[readonly] {
            background: #f6fbfc;
            color: #526c78;
        }

.up-password-note {
    grid-column: 1 / -1;
    padding: 15px 16px;
    border-radius: 11px;
    background: #e7f8fb;
    color: #0f6476;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

    .up-password-note i {
        margin-top: 2px;
    }

.up-form-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 12px;
    flex-wrap: wrap;
    border-radius: 0;
}

@media (max-width: 1050px) {
    .user-profile-page__layout {
        grid-template-columns: 1fr;
    }

    .up-sidebar {
        position: relative;
        top: auto;
    }

    .up-side-info {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 760px) {
    .user-profile-page {
        padding: 24px 14px;
    }

    .user-profile-page__header {
        align-items: flex-start;
        flex-direction: column;
    }

    .user-profile-page__actions,
    .up-form-actions {
        width: 100%;
    }

    .up-btn {
        width: 100%;
    }

    .up-card,
    .up-sidebar {
        border-radius: 26px;
        padding: 22px;
    }

    .up-form {
        grid-template-columns: 1fr;
    }

    .up-side-info {
        grid-template-columns: 1fr;
    }

    .up-section-title {
        align-items: flex-start;
        flex-direction: column;
    }

        .up-section-title h3 {
            font-size: 22px;
        }
}


















.my-donation-wrp {
}

    .my-donation-wrp::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: linear-gradient(rgba(17, 145, 165, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 145, 165, 0.045) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }

.my-donation-wrp__container {
    max-width: 1360px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.my-donation-wrp__title {
    text-align: center;
    margin-bottom: 42px;
}

    .my-donation-wrp__title h1 {
        font-size: clamp(30px, 4vw, 42px);
        color: #302417;
        font-weight: 500;
        letter-spacing: -0.8px;
        margin-bottom: 18px;
    }

.my-donation-wrp__line {
    width: 330px;
    height: 1px;
    background: #b8b8b8;
    margin: 0 auto;
    position: relative;
}

    .my-donation-wrp__line::after {
        content: "";
        position: absolute;
        width: 130px;
        height: 3px;
        background: #46331f;
        left: 50%;
        top: -1px;
        transform: translateX(-50%);
        border-radius: 999px;
    }

.donation-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1);
    /*! overflow: hidden; */
    border: 0;
    position: relative;
    flex-direction: column;
    padding: 16px;
    border-radius: 15px;
    background: #ffffff;
    border: 1px solid rgba(19, 83, 68, 0.08);
    text-decoration: none;
    overflow: hidden;
    box-shadow: 0 12px 35px rgba(15, 58, 47, 0.06);
    transition: 0.35s ease;
    border: solid 1px #c4dcdc;
}

.donation-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.donation-card__group-text {
    font-size: 16px;
    color: #343434;
    font-weight: 500;
    line-height: 1.5;
}

.donation-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
}

.donation-tool-btn {
    width: 38px;
    height: 38px;
    border-radius: 6px;
    border: 1px solid #cfe0e6;
    background: #fff;
    color: #6f8998;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s ease;
}

    .donation-tool-btn:hover {
        transform: translateY(-2px);
        color: #0f8798;
        border-color: #18a7b8;
        box-shadow: 0 12px 26px rgba(13, 64, 84, 0.08);
    }

    .donation-tool-btn.active {
        background: #15999b;
        color: #fff;
        border-color: #15999b;
    }

.donation-search {
    position: relative;
    min-width: 320px;
}

    .donation-search i {
        position: absolute;
        left: 15px;
        top: 50%;
        transform: translateY(-50%);
        color: #607986;
        font-size: 16px;
    }

    .donation-search input {
        width: 100%;
        height: 44px;
        border: 1px solid #d8e7ec;
        border-radius: 8px;
        background: #fff;
        padding: 0 15px 0 44px;
        font-size: 15px;
        color: #07384b;
        outline: none;
        transition: 0.3s ease;
        font-family: inherit;
    }

        .donation-search input:focus {
            border-color: #18a7b8;
            box-shadow: 0 0 0 5px rgba(24, 167, 184, 0.1);
        }

.donation-table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #cfd8dd;
    border-radius: 9px;
    background: #fff;
}

.donation-table {
    width: 100%;
    min-width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

    .donation-table th,
    .donation-table td {
        border-right: 1px solid #d7dee2;
        border-bottom: 1px solid #d7dee2;
        padding: 13px 10px;
        text-align: left;
        vertical-align: middle;
        font-size: 14px;
    }

        .donation-table th:last-child,
        .donation-table td:last-child {
            border-right: 0;
        }

    .donation-table thead th {
        background: #fbfdfe;
        color: #111827;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
    }

    .donation-table tbody tr:hover {
        background: #f7fbfc;
    }

.check-col {
    width: 70px;
    text-align: center !important;
}

.type-col {
    width: 150px;
}

.ref-col {
    width: 170px;
}

.date-col {
    width: 160px;
}

.value-col {
    width: 160px;
}

.status-col {
    width: 130px;
    text-align: center !important;
}

.details-col {
    width: 95px;
    text-align: center !important;
}

.notes-col {
    width: 330px;
}

.donation-th-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

    .donation-th-inner span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .donation-th-inner .sort-icon {
        margin-left: auto;
        color: #0a3447;
        font-size: 12px;
    }

    .donation-th-inner .filter-icon {
        color: #8b8b8b;
        font-size: 15px;
    }

.donation-filter-row td {
    height: 42px;
    background: #fff;
}

.donation-filter-field {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0a5570;
    font-size: 16px;
    min-height: 24px;
}

    .donation-filter-field input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 14px;
        font-family: inherit;
        color: #07384b;
    }

.donation-checkbox {
    width: 18px;
    height: 18px;
    accent-color: #18a7b8;
}

.donation-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    border-radius: 5pz;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

    .donation-status.completed {
        background: #e8f8ef;
        color: #078345;
    }

    .donation-status.pending {
        background: #fff4d9;
        color: #a86500;
    }

    .donation-status.failed {
        background: #ffe9e9;
        color: #c83232;
    }

.donation-detail-btn {
    width: 38px;
    height: 38px;
    border-radius: 5px;
    border: 0;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 10px 22px rgba(24, 167, 184, 0.22);
    transition: 0.3s ease;
}

    .donation-detail-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(24, 167, 184, 0.32);
    }

.donation-mobile-note {
    display: none;
    margin-top: 12px;
    color: #607986;
    font-size: 13px;
    line-height: 1.6;
    text-align: center;
}

.donation-details-popup {
    position: fixed;
    inset: 0;
    background: rgba(4, 31, 42, 0.58);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    z-index: 9999;
}

    .donation-details-popup.active {
        display: flex;
    }

.donation-details-box {
    width: 100%;
    max-width: 620px;
    background: #ffffff;
    border-radius: 15px;
    padding: 28px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.22);
    position: relative;
    animation: donationPopup 0.3s ease;
}

@keyframes donationPopup {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.donation-details-close {
    position: absolute;
    right: 18px;
    top: 18px;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    border: 0;
    background: #f1f7f9;
    color: #07384b;
    cursor: pointer;
    font-size: 16px;
}

.donation-details-head {
    margin-bottom: 24px;
    padding-right: 45px;
}

    .donation-details-head .icon {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: #e7f8fb;
        color: #1198aa;
        display: grid;
        place-items: center;
        font-size: 23px;
        margin-bottom: 14px;
        border: dashed 1px #3a9dac;
    }

    .donation-details-head h3 {
        font-size: 26px;
        color: #023b53;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .donation-details-head p {
        color: #607986;
        font-size: 15px;
        line-height: 1.6;
    }

.donation-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.donation-detail-item {
    padding: 10px 16px;
    border-radius: 10px;
    background: #f6fbfc;
    border: 1px solid #dceef2;
}

    .donation-detail-item small {
        display: block;
        color: #6c8290;
        font-size: 12px;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .donation-detail-item strong {
        display: block;
        color: #07384b;
        font-size: 15px;
        line-height: 1.5;
        word-break: break-word;
    }

    .donation-detail-item.full {
        grid-column: 1 / -1;
    }

.donation-details-actions {
    margin-top: 22px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.donation-details-btn {
    min-height: 41px;
    padding: 0 18px;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
}

@media (max-width: 900px) {
    .donation-card {
        padding: 20px;
        border-radius: 20px;
    }

    .donation-card__top {
        align-items: flex-start;
        flex-direction: column;
    }

    .donation-toolbar {
        width: 100%;
        justify-content: flex-start;
    }

    .donation-search {
        min-width: 100%;
        flex: 1;
    }

    .donation-mobile-note {
        display: block;
    }
}

@media (max-width: 560px) {
    .my-donation-wrp {
        padding: 28px 12px;
    }

    .my-donation-wrp__line {
        width: 240px;
    }

        .my-donation-wrp__line::after {
            width: 100px;
        }

    .donation-card {
        padding: 10px;
    }

    .donation-card__group-text {
        font-size: 14px;
    }

    .donation-tool-btn {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .donation-details-box {
        padding: 22px;
        border-radius: 22px;
    }

    .donation-details-grid {
        grid-template-columns: 1fr;
    }

    .donation-details-head h3 {
        font-size: 22px;
    }

    .donation-details-actions {
        flex-direction: column;
    }

    .donation-details-btn {
        width: 100%;
    }
}























.donation-timeline-wrp {
    width: 100%;
    padding: 20px 18px;
}

.dt-page {
    display: grid;
    grid-template-columns: 438px 1fr;
    gap: 34px;
    max-width: 1760px;
    margin: auto;
}

/* Sidebar */
.dt-sidebar {
    min-height: calc(100vh - 40px);
    background: linear-gradient(180deg, #116c7a, #1fa7ad);
    border-radius: 22px;
    padding: 36px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(10, 93, 110, 0.22);
}

    .dt-sidebar::after {
        content: "";
        position: absolute;
        right: -110px;
        bottom: -110px;
        width: 295px;
        height: 295px;
        background: rgba(255,255,255,0.14);
        border-radius: 50%;
    }

.dt-user-icon {
    width: 125px;
    height: 125px;
    border-radius: 14px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.22);
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    box-shadow: inset 0 0 30px rgba(255,255,255,0.07);
}

    .dt-user-icon i {
        font-size: 64px;
        color: #fff;
    }

.dt-user-name {
    font-size: 29px;
    font-weight: 500;
    margin-bottom: 14px;
}

.dt-user-status {
    font-size: 17px;
    opacity: 0.95;
    margin-bottom: 47px;
}

.dt-menu {
    display: grid;
    gap: 15px;
    position: relative;
    z-index: 2;
}

    .dt-menu a {
        display: flex;
        align-items: center;
        gap: 20px;
        min-height: 70px;
        padding: 18px 26px;
        text-decoration: none;
        color: #fff;
        background: rgba(255,255,255,0.13);
        border-radius: 10px;
        font-size: 18px;
        font-weight: 500;
        transition: 0.3s;
    }

        .dt-menu a:hover,
        .dt-menu a.active {
            background: rgba(255,255,255,0.24);
            transform: translateX(4px);
        }

    .dt-menu i {
        width: 20px;
        text-align: center;
        font-size: 18px;
    }

/* Main Content */
.dt-main {
    background: rgba(255,255,255,0.76);
    border: 0;
    border-radius: 22px;
    padding: 0;
    min-height: calc(100vh - 40px);
    box-shadow: none;
    overflow:;
}

.dt-header {
    margin-bottom: 30px;
}

    .dt-header h1 {
        font-size: 36px;
        line-height: 1.2;
        font-weight: 500;
        color: #0b425a;
        margin-bottom: 8px;
    }

    .dt-header p {
        font-size: 19px;
        color: #587083;
        font-weight: 500;
    }

.dt-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
    margin-bottom: 30px;
}

.dt-stat-card {
    background: #ffffff;
    border: 1px solid #cfdde5;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 8px 22px rgba(13, 78, 98, 0.06);
}

.dt-stat-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #e8f7f8;
    color: #087489;
    font-size: 20px;
    flex-shrink: 0;
    border: dashed 1px #15999bc9;
}

.dt-stat-info span {
    display: block;
    color: #617383;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 5px;
}

.dt-stat-info strong {
    color: #0b425a;
    font-size: 18px;
    font-weight: 500;
}

.dt-content-grid {
    display: grid;
    grid-template-columns: auto-fill;
    gap: 25px;
    align-items: flex-start;
}

.dt-card {
    background: #fff;
    border: 1px solid #cfdde5;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(13, 78, 98, 0.06);
}

.dt-card-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 20px 22px;
    border-bottom: 1px solid #d4e0e7;
    background: #fbfdfe;
}

    .dt-card-title h2 {
        font-size: 20px;
        color: #101828;
        font-weight: 500;
    }

.dt-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 13px;
    border-radius: 8px;
    background: #e8f7f8;
    color: #087489;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.dt-timeline {
    padding: 26px 26px 26px 65px;
    position: relative;
}

    .dt-timeline::before {
        content: "";
        position: absolute;
        left: 34px;
        top: 34px;
        width: 3px;
        height: calc(100% - 68px);
        background: #d5e4ea;
        border-radius: 20px;
    }

.dt-step {
    position: relative;
    padding-bottom: 25px;
}

    .dt-step:last-child {
        padding-bottom: 0;
    }

.dt-dot {
    position: absolute;
    left: -41px;
    top: 5px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background: #c8d6de;
    border: 5px solid #fff;
    box-shadow: 0 0 0 2px #c8d6de;
    z-index: 2;
}

.dt-step.done .dt-dot {
    background: #1fa7ad;
    box-shadow: 0 0 0 2px #1fa7ad;
}

.dt-step.active .dt-dot {
    background: #087489;
    box-shadow: 0 0 0 7px rgba(8,116,137,0.16);
    animation: dtPulse 1.5s infinite;
}

@keyframes dtPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(8,116,137,0.35);
    }

    70% {
        box-shadow: 0 0 0 12px rgba(8,116,137,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(8,116,137,0);
    }
}

.dt-step-box {
    border: 1px solid #d5e4ea;
    border-radius: 10px;
    padding: 18px;
    background: #ffffff;
    transition: 0.3s;
}

    .dt-step-box:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(11, 82, 100, 0.09);
    }

.dt-step-head {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 8px;
}

    .dt-step-head h3 {
        color: #101828;
        font-size: 17px;
        font-weight: 500;
    }

.dt-date {
    color: #6a7784;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
}

.dt-step-box p {
    color: #5a5a5a;
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.dt-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
}

    .dt-status.success {
        background: #e6f8f4;
        color: #05815e;
    }

    .dt-status.process {
        background: #e8f7f8;
        color: #087489;
    }

    .dt-status.pending {
        background: #fff4df;
        color: #b56a00;
    }

.dt-details {
    padding: 22px;
}

.dt-detail-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid #e2eaf0;
    padding: 14px 0;
}

    .dt-detail-row:first-child {
        padding-top: 0;
    }

    .dt-detail-row:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .dt-detail-row span {
        color: #657789;
        font-size: 14px;
        font-weight: 500;
    }

    .dt-detail-row strong {
        color: #333;
        font-size: 15px;
        font-weight: 500;
        text-align: right;
    }

.dt-progress-wrap {
    margin-top: 22px;
    padding: 18px;
    background: #f4fbfc;
    border: 1px solid #d7e8ee;
    border-radius: 12px;
}

.dt-progress-top {
    display: flex;
    justify-content: space-between;
    color: #0b425a;
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 10px;
}

.dt-progress {
    width: 100%;
    height: 11px;
    background: #d3e5eb;
    border-radius: 20px;
    overflow: hidden;
}

    .dt-progress span {
        display: block;
        width: 75%;
        height: 100%;
        background: linear-gradient(90deg, #116c7a, #1fa7ad);
        border-radius: 20px;
    }

.dt-btn-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 20px;
}

.dt-btn {
    min-height: 48px;
    border: 0;
    border-radius: 10px;
    padding: 13px 18px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: 0.3s;
}

.dt-btn-primary {
    background: #159aa3;
    color: #fff;
}

    .dt-btn-primary:hover {
        background: #087489;
        transform: translateY(-2px);
    }

.dt-btn-light {
    background: #eef8fa;
    color: #087489;
    border: 1px solid #cce4eb;
}

    .dt-btn-light:hover {
        background: #dff3f6;
        transform: translateY(-2px);
    }

.dt-note {
    margin-top: 18px;
    padding: 15px;
    border-radius: 10px;
    background: #fff8e8;
    border: 1px solid #f1d79b;
    color: #8a5a00;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 500;
}

@media (max-width: 1200px) {
    .dt-page {
        grid-template-columns: 320px 1fr;
        gap: 24px;
    }

    .dt-sidebar {
        padding: 28px;
    }

    .dt-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .dt-page {
        grid-template-columns: 1fr;
    }

    .dt-sidebar {
        min-height: auto;
    }

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

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

@media (max-width: 650px) {
    .donation-timeline-wrp {
        padding: 12px;
    }

    .dt-main {
        padding: 26px 18px;
    }

    .dt-header h1 {
        font-size: 28px;
    }

    .dt-header p {
        font-size: 16px;
    }

    .dt-menu {
        grid-template-columns: 1fr;
    }

    .dt-stats {
        grid-template-columns: 1fr;
    }

    .dt-card-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .dt-step-head {
        flex-direction: column;
        gap: 5px;
    }

    .dt-date {
        white-space: normal;
    }

    .dt-timeline {
        padding-left: 42px;
    }

        .dt-timeline::before {
            left: 30px;
        }

    .dt-dot {
        left: -23px;
    }

    .dt-detail-row {
        flex-direction: column;
        align-items: flex-start;
    }

        .dt-detail-row strong {
            text-align: left;
        }
}



.dd-btns {
    margin-top: 15px;
    float: right;
    width: 100%
}





























.abt-re-new {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .abt-re-new .abt-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .abt-re-new .abt-hero {
        position: relative;
        min-height: 420px;
        border-radius: 0;
        overflow: hidden;
        background: linear-gradient(110deg, rgba(10, 99, 113, 0.96), rgba(31, 167, 173, 0.86)), url("https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?auto=format&fit=crop&w=1600&q=80");
        background-size: cover;
        background-position: center;
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        align-items: center;
        padding: 56px;
        color: #fff;
        box-shadow: 0 22px 55px rgba(8, 88, 105, 0.22);
        margin-bottom: 34px;
    }

        .abt-re-new .abt-hero::after {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -120px;
            width: 350px;
            height: 350px;
            border-radius: 50%;
            background: rgba(255,255,255,0.15);
        }

    .abt-re-new .abt-hero-content {
        position: relative;
        z-index: 2;
    }

    .abt-re-new .abt-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        padding: 10px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 18px;
        backdrop-filter: blur(8px);
    }

    .abt-re-new .abt-hero h1 {
        font-size: 35px;
        line-height: 1.08;
        margin-bottom: 18px;
        font-weight: 500;
        letter-spacing: -1px;
        color: #fff;
    }

    .abt-re-new .abt-hero p {
        font-size: 18px;
        line-height: 1.8;
        max-width: 720px;
        color: rgba(255,255,255,0.92);
        margin-bottom: 28px;
    }

    .abt-re-new .abt-hero-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 14px;
    }

    .abt-re-new .abt-btn {
        min-height: 50px;
        padding: 14px 22px;
        border-radius: 9px;
        border: 0;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s;
    }

    .abt-re-new .abt-btn-primary {
        background: #ffffff;
        color: #087489;
    }

        .abt-re-new .abt-btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 28px rgba(0,0,0,0.18);
        }

    .abt-re-new .abt-btn-outline {
        background: rgba(255,255,255,0.12);
        color: #fff;
        border: 1px solid rgba(255,255,255,0.35);
    }

        .abt-re-new .abt-btn-outline:hover {
            background: rgba(255,255,255,0.2);
            transform: translateY(-3px);
        }

    .abt-re-new .abt-hero-card {
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,0.14);
        border: 1px solid rgba(255,255,255,0.22);
        border-radius: 20px;
        padding: 28px;
        backdrop-filter: blur(12px);
        box-shadow: 0 18px 40px rgba(0,0,0,0.14);
    }

    .abt-re-new .abt-hero-card-icon {
        width: 76px;
        height: 76px;
        border-radius: 999px;
        background: rgba(255,255,255,0.2);
        display: grid;
        place-items: center;
        font-size: 34px;
        margin-bottom: 22px;
        border: dashed 2px #abcbcb;
    }

    .abt-re-new .abt-hero-card h3 {
        font-size: 26px;
        margin-bottom: 12px;
        color: #fff;
    }

    .abt-re-new .abt-hero-card p {
        font-size: 17px;
        margin: 0;
        line-height: 1.5;
    }

    .abt-re-new .abt-stats {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 18px;
        margin-bottom: 34px;
    }

    .abt-re-new .abt-stat {
        background: rgba(255,255,255,0.86);
        border: 1px solid #cbe5ed;
        border-radius: 18px;
        padding: 24px;
        display: flex;
        gap: 16px;
        align-items: center;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        transition: 0.3s;
    }

        .abt-re-new .abt-stat:hover {
            transform: translateY(-5px);
            box-shadow: 0 18px 40px rgba(11, 82, 100, 0.12);
        }

        .abt-re-new .abt-stat i {
            width: 54px;
            height: 54px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            color: #087489;
            background: #e8f7f8;
            font-size: 22px;
            flex-shrink: 0;
            border: dashed 1px #15999b;
        }

        .abt-re-new .abt-stat span {
            display: block;
            color: #627685;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 4px;
        }

        .abt-re-new .abt-stat strong {
            color: #0b425a;
            font-size: 21px;
            font-weight: 500;
        }

    .abt-re-new .abt-section {
        margin-bottom: 34px;
    }

    .abt-re-new .abt-section-head {
        margin-bottom: 22px;
        display: flex;
        justify-content: space-between;
        gap: 20px;
        align-items: flex-end;
    }

    .abt-re-new .abt-title-small {
        color: #159aa3;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 8px;
    }

    .abt-re-new .abt-section-head h2 {
        color: #0b425a;
        font-size: 25px;
        line-height: 1.2;
        font-weight: 500;
    }

    .abt-re-new .abt-section-head p {
        max-width: 520px;
        color: #5c7180;
        font-size: 16px;
        line-height: 1.7;
    }

    .abt-re-new .abt-brief-card {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 28px;
        background: rgba(255,255,255,0.86);
        border: 1px solid #cbe5ed;
        border-radius: 20px;
        padding: 28px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        overflow: hidden;
    }

    .abt-re-new .abt-brief-img {
        min-height: 360px;
        border-radius: 20px;
        background: linear-gradient(rgba(8,116,137,0.1), rgba(8,116,137,0.1)), url("../images/img/abt-s.webp");
        background-size: cover;
        background-position: center;
        position: relative;
        overflow: hidden;
    }

        .abt-re-new .abt-brief-img::after {
            content: "Since 2012";
            position: absolute;
            left: 20px;
            bottom: 20px;
            background: #fff;
            color: #087489;
            padding: 12px 18px;
            border-radius: 12px;
            font-size: 18px;
            font-weight: 500;
            box-shadow: 0 12px 25px rgba(0,0,0,0.12);
        }

    .abt-re-new .abt-brief-content {
        padding: 12px 4px;
    }

        .abt-re-new .abt-brief-content h3 {
            font-size: 28px;
            color: #0b425a;
            margin-bottom: 14px;
            font-weight: 500;
        }

        .abt-re-new .abt-brief-content p {
            color: #556875;
            font-size: 17px;
            line-height: 1.9;
            margin-bottom: 20px;
        }

    .abt-re-new .abt-info-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .abt-re-new .abt-info-card {
        background: #fff;
        border: 1px solid #cfdde5;
        border-radius: 10px;
        padding: 24px;
        box-shadow: 0 10px 26px rgba(13, 78, 98, 0.06);
        transition: 0.3s;
        position: relative;
        overflow: hidden;
    }

        .abt-re-new .abt-info-card::after {
            content: "";
            position: absolute;
            right: -45px;
            top: -45px;
            width: 110px;
            height: 110px;
            border-radius: 50%;
            background: #e8f7f8;
        }

        .abt-re-new .abt-info-card:hover {
            transform: translateY(-5px);
        }

    .abt-re-new .abt-info-icon {
        width: 56px;
        height: 56px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        color: #fff;
        font-size: 22px;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
        border: dashed 1px #deffff;
    }

    .abt-re-new .abt-info-card h3 {
        color: #0b425a;
        font-size: 22px;
        margin-bottom: 10px;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }

    .abt-re-new .abt-info-card p {
        color: #5a6f7d;
        font-size: 17px;
        line-height: 1.5;
        position: relative;
        z-index: 2;
    }

    .abt-re-new .abt-message {
        background: linear-gradient(135deg, #0f6f7c, #20a9ad);
        border-radius: 20px;
        padding: 34px;
        color: #fff;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 22px;
        box-shadow: 0 20px 45px rgba(8, 88, 105, 0.18);
    }

        .abt-re-new .abt-message i {
            width: 70px;
            height: 70px;
            border-radius: 999px;
            background: rgba(255,255,255,0.18);
            display: grid;
            place-items: center;
            font-size: 30px;
            border: dashed 2px #5cc3c7;
        }

        .abt-re-new .abt-message h2 {
            font-size: 22px;
            margin-bottom: 10px;
            color: #fff;
        }

        .abt-re-new .abt-message p {
            line-height: 1.55;
            color: rgba(255,255,255,0.92);
            font-size: 18px;
            margin-bottom: 0;
        }

    .abt-re-new .abt-activity-grid {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 22px;
    }

    .abt-re-new .abt-activity-card {
        background: #fff;
        border: 1px solid #cfdde5;
        border-radius: 20px;
        padding: 26px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
    }

    .abt-re-new .abt-card-top {
        display: flex;
        align-items: center;
        gap: 16px;
        margin-bottom: 18px;
    }

    .abt-re-new .abt-card-icon {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: #e8f7f8;
        color: #087489;
        font-size: 23px;
        flex-shrink: 0;
        border: dashed 1px #15999b;
    }

    .abt-re-new .abt-card-top span {
        color: #159aa3;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
    }

    .abt-re-new .abt-card-top h3 {
        color: #0b425a;
        font-size: 23px;
        font-weight: 500;
    }

    .abt-re-new .abt-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        list-style: none;
        padding-left: 0;
    }

        .abt-re-new .abt-list li {
            display: flex;
            gap: 9px;
            align-items: flex-start;
            color: #556875;
            font-size: 17px;
            line-height: 1.45;
            background: #f7fbfc;
            border: 1px solid #e1edf1;
            padding: 11px 12px;
            border-radius: 12px;
        }

            .abt-re-new .abt-list li i {
                color: #159aa3;
                margin-top: 3px;
                flex-shrink: 0;
            }

    .abt-re-new .abt-project-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
    }

    .abt-re-new .abt-project-card {
        background: #fff;
        border: 1px solid #cfdde5;
        border-radius: 20px;
        padding: 24px;
        box-shadow: 0 10px 26px rgba(13, 78, 98, 0.06);
        transition: 0.3s;
    }

        .abt-re-new .abt-project-card:hover {
            transform: translateY(-5px);
        }

        .abt-re-new .abt-project-card .num {
            width: 42px;
            height: 42px;
            border-radius: 999px;
            display: grid;
            place-items: center;
            background: #159aa3;
            color: #fff;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .abt-re-new .abt-project-card h3 {
            color: #0b425a;
            font-size: 20px;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .abt-re-new .abt-project-card p {
            color: #5a6f7d;
            font-size: 18px;
            line-height: 1.55;
        }

    .abt-re-new .abt-cta {
        background: linear-gradient(100deg, rgba(10, 99, 113, 0.95), rgba(31, 167, 173, 0.92)), url("../images/img/abt-s.webp");
        background-size: cover;
        background-position: center;
        color: #fff;
        border-radius: 20px;
        padding: 38px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 28px;
        box-shadow: 0 20px 45px rgba(8, 88, 105, 0.2);
    }

        .abt-re-new .abt-cta h2 {
            font-size: 25px;
            margin-bottom: 4px;
            font-weight: 500;
            color: #fff;
        }

        .abt-re-new .abt-cta p {
            color: rgba(255,255,255,0.9);
            font-size: 16px;
            line-height: 1.7;
            max-width: 720px;
        }

@media (max-width: 1100px) {
    .abt-re-new .abt-hero {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .abt-re-new .abt-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-re-new .abt-brief-card {
        grid-template-columns: 1fr;
    }

    .abt-re-new .abt-info-grid,
    .abt-re-new .abt-project-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .abt-re-new .abt-content-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 800px) {
    .abt-re-new {
        padding: 0;
    }

        .abt-re-new .abt-hero {
            padding: 34px 22px;
            min-height: auto;
            border-radius: 22px;
        }

            .abt-re-new .abt-hero h1 {
                font-size: 38px;
            }

            .abt-re-new .abt-hero p {
                font-size: 16px;
            }

        .abt-re-new .abt-section-head {
            flex-direction: column;
            align-items: flex-start;
        }

            .abt-re-new .abt-section-head h2 {
                font-size: 20px;
            }

        .abt-re-new .abt-info-grid,
        .abt-re-new .abt-activity-grid,
        .abt-re-new .abt-project-grid,
        .abt-re-new .abt-stats {
            grid-template-columns: 1fr;
        }

        .abt-re-new .abt-list {
            grid-template-columns: 1fr;
        }

        .abt-re-new .abt-message {
            grid-template-columns: 1fr;
            padding: 26px;
        }

        .abt-re-new .abt-cta {
            flex-direction: column;
            align-items: flex-start;
            padding: 28px;
        }

            .abt-re-new .abt-cta h2 {
                font-size: 27px;
            }
}

@media (max-width: 480px) {
    .abt-re-new .abt-hero h1 {
        font-size: 32px;
    }

    .abt-re-new .abt-hero-actions {
        flex-direction: column;
    }

    .abt-re-new .abt-btn {
        width: 100%;
    }

    .abt-re-new .abt-stat {
        align-items: flex-start;
    }

    .abt-re-new .abt-brief-img {
        min-height: 260px;
    }
}

















.stry-srv-w {
    width: 100%;
    padding: 0;
    position: relative;
    overflow: hidden;
}

    .stry-srv-w .stry-container {
        width: 100%;
        margin: 0 auto;
        position: relative;
    }

    .stry-srv-w .swiper {
        width: 100%;
        padding: 0 0 22px;
        overflow: hidden;
    }

    .stry-srv-w .swiper-slide {
        height: auto;
    }

    .stry-srv-w .stry-card {
        height: auto;
        background: #eaf8fb8f;
        border: 1px solid #bddde4;
        border-radius: 10px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-align: center;
        transition: 0.35s ease;
    }

        .stry-srv-w .stry-card:hover {
            transform: translateY(0px);
            box-shadow: 0 16px 34px rgba(9, 106, 120, 0.16);
            border-color: #179ca0;
        }

    .stry-srv-w .stry-card-body {
        padding: 20px 10px 10px;
        min-height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .stry-srv-w .stry-icon-wrap {
        width: 110px;
        height: 110px;
        border: 1.5px dashed #16a7ad;
        border-radius: 50%;
        background: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 22px;
        position: relative;
    }

        .stry-srv-w .stry-icon-wrap img {
            max-width: 70px;
            max-height: 70px;
            object-fit: contain;
        }

    .stry-srv-w .stry-icon-fallback {
        font-size: 58px;
        color: #907456;
        line-height: 1;
    }

    .stry-srv-w .stry-title {
        color: #0a4a5d;
        font-size: 20px;
        line-height: 1.15;
        font-weight: 500;
        max-width: inherit;
        margin: 0 auto;
        min-height: 35px;
    }

    .stry-srv-w .stry-btn {
        width: 100%;
        min-height: 53px;
        border: 0;
        background: #179ca0;
        color: #ffffff;
        font-size: 19px;
        font-weight: 500;
        text-decoration: none;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s ease;
        background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
    }

        .stry-srv-w .stry-btn:hover {
            background: #0f7f88;
        }

    .stry-srv-w .stry-nav {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: #ffffff;
        color: #000000;
        box-shadow: 0 10px 25px rgba(20, 60, 70, 0.18);
        top: 50%;
        transform: translateY(-50%);
        margin: 0;
        transition: 0.3s ease;
    }

        .stry-srv-w .stry-nav::after {
            font-size: 17px;
            font-weight: 500;
        }

        .stry-srv-w .stry-nav:hover {
            background: #179ca0;
            color: #ffffff;
        }

    .stry-srv-w .swiper-button-prev {
        left: 0;
    }

    .stry-srv-w .swiper-button-next {
        right: 0;
    }

    .stry-srv-w .swiper-pagination {
        position: relative;
        margin-top: 10px;
    }

    .stry-srv-w .swiper-pagination-bullet {
        width: 10px;
        height: 10px;
        background: #0a4a5d;
        opacity: 0.25;
    }

    .stry-srv-w .swiper-pagination-bullet-active {
        opacity: 1;
        background: #179ca0;
    }

@media (max-width: 1199px) {
    .stry-srv-w {
        padding: 45px 36px 36px;
    }

        .stry-srv-w .stry-card {
            height: 330px;
        }

        .stry-srv-w .stry-title {
            font-size: 22px;
        }

        .stry-srv-w .stry-btn {
            font-size: 20px;
        }
}

@media (max-width: 767px) {
    .stry-srv-w {
        padding: 35px 18px 30px;
    }

        .stry-srv-w .stry-card {
            height: 315px;
        }

        .stry-srv-w .stry-card-body {
            padding: 34px 16px 20px;
            min-height: 255px;
        }

        .stry-srv-w .stry-icon-wrap {
            width: 118px;
            height: 118px;
        }

            .stry-srv-w .stry-icon-wrap img {
                max-width: 78px;
                max-height: 78px;
            }

        .stry-srv-w .stry-title {
            font-size: 21px;
        }

        .stry-srv-w .stry-btn {
            min-height: 58px;
            font-size: 19px;
        }

        .stry-srv-w .stry-nav {
            width: 44px;
            height: 44px;
        }

        .stry-srv-w .swiper-button-prev {
            left: 2px;
        }

        .stry-srv-w .swiper-button-next {
            right: 2px;
        }
}

@media (max-width: 480px) {
    .stry-srv-w {
        padding: 28px 14px;
    }

        .stry-srv-w .stry-card {
            height: 300px;
        }

        .stry-srv-w .stry-card-body {
            min-height: 242px;
        }

        .stry-srv-w .stry-icon-wrap {
            width: 108px;
            height: 108px;
            margin-bottom: 18px;
        }

            .stry-srv-w .stry-icon-wrap img {
                max-width: 70px;
                max-height: 70px;
            }

        .stry-srv-w .stry-title {
            font-size: 20px;
        }

        .stry-srv-w .stry-btn {
            min-height: 56px;
            font-size: 18px;
        }
}






















.policy-list--wrt {
    width: 100%;
    padding: 0;
    overflow: hidden;
}

    .policy-list--wrt .policy-container {
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .policy-list--wrt .policy-hero {
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        border-radius: 0;
        padding: 54px;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 22px 55px rgba(8, 88, 105, 0.22);
        margin-bottom: 34px;
    }

        .policy-list--wrt .policy-hero::after {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -120px;
            width: 340px;
            height: 340px;
            background: rgba(255,255,255,0.14);
            border-radius: 50%;
        }

        .policy-list--wrt .policy-hero::before {
            content: "";
            position: absolute;
            right: 160px;
            top: 40px;
            width: 90px;
            height: 90px;
            border: 1px solid rgba(255,255,255,0.22);
            border-radius: 10px;
            transform: rotate(18deg);
        }

    .policy-list--wrt .policy-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        padding: 10px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .policy-list--wrt .policy-hero h1 {
        font-size: 36px;
        line-height: 1.08;
        margin-bottom: 18px;
        font-weight: 500;
        letter-spacing: -1px;
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .policy-list--wrt .policy-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        position: relative;
        z-index: 2;
        padding-left: 0;
    }

        .policy-list--wrt .policy-breadcrumb li,
        .policy-list--wrt .policy-breadcrumb a {
            color: rgba(255,255,255,0.9);
            font-size: 16px;
            text-decoration: none;
            font-weight: 500;
        }

    .policy-list--wrt .policy-layout {
        display: grid;
        grid-template-columns: 000001fr;
        gap: 26px;
        align-items: flex-start;
    }

    .policy-list--wrt .policy-side {
        background: rgba(255,255,255,0.92);
        border: 1px solid #cbe5ed;
        border-radius: 24px;
        padding: 24px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        position: sticky;
        top: 20px;
    }

        .policy-list--wrt .policy-side h3 {
            color: #0b425a;
            font-size: 22px;
            font-weight: 500;
            margin-bottom: 16px;
        }

        .policy-list--wrt .policy-side ul {
            list-style: none;
            display: grid;
            gap: 10px;
        }

        .policy-list--wrt .policy-side a {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 44px;
            padding: 10px 12px;
            border-radius: 12px;
            text-decoration: none;
            background: #f7fbfc;
            border: 1px solid #e1edf1;
            color: #526979;
            font-size: 14px;
            font-weight: 500;
            transition: 0.3s;
        }

            .policy-list--wrt .policy-side a:hover {
                background: #e8f7f8;
                color: #087489;
                transform: translateX(4px);
            }

            .policy-list--wrt .policy-side a i {
                color: #159aa3;
                width: 18px;
                text-align: center;
                flex-shrink: 0;
            }

    .policy-list--wrt .policy-main {
        min-width: 0;
    }

    .policy-list--wrt .policy-intro {
        background: rgba(255,255,255,0.92);
        border: 1px solid #cbe5ed;
        border-radius: 24px;
        padding: 30px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        margin-bottom: 24px;
        display: grid;
        grid-template-columns: 76px 1fr;
        gap: 20px;
        align-items: flex-start;
    }

    .policy-list--wrt .policy-intro-icon {
        width: 76px;
        height: 76px;
        border-radius: 20px;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 32px;
        box-shadow: 0 14px 28px rgba(17,108,122,0.18);
    }

    .policy-list--wrt .policy-intro h2 {
        color: #0b425a;
        font-size: 30px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .policy-list--wrt .policy-intro p {
        color: #5c7180;
        font-size: 16px;
        line-height: 1.8;
    }

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

    .policy-list--wrt .policy-card {
        background: #fff;
        border: 1px solid #cfdde5;
        border-radius: 15px;
        padding: 25px;
        min-height: 210px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        position: relative;
        overflow: hidden;
        transition: 0.35s ease;
    }

        .policy-list--wrt .policy-card::after {
            content: "";
            position: absolute;
            right: -55px;
            top: -55px;
            width: 140px;
            height: 140px;
            background: #e8f7f8;
            border-radius: 50%;
            z-index: 1;
        }

        .policy-list--wrt .policy-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 46px rgba(11, 82, 100, 0.13);
            border-color: #1fa7ad;
        }

    .policy-list--wrt .policy-card-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 18px;
        position: relative;
        z-index: 2;
        margin-bottom: 18px;
    }

    .policy-list--wrt .policy-icon {
        width: 70px;
        height: 70px;
        border-radius: 999px;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 25px;
        flex-shrink: 0;
        box-shadow: 0 12px 24px rgba(17,108,122,0.16);
        border: dashed 1px #fff;
    }

    .policy-list--wrt .policy-number {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #e8f7f8;
        color: #bad3d5;
        font-size: 23px;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }

    .policy-list--wrt .policy-card h3 {
        color: #0b425a;
        font-size: 22px;
        line-height: 1.3;
        font-weight: 500;
        margin-bottom: 12px;
        position: relative;
        z-index: 2;
    }

    .policy-list--wrt .policy-card p {
        color: #5a6f7d;
        font-size: 17px;
        line-height: 1.45;
        margin-bottom: 20px;
        position: relative;
        z-index: 2;
    }

    .policy-list--wrt .policy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 44px;
        padding: 11px 16px;
        border-radius: 9px;
        background: #e8f7f8;
        color: #087489;
        text-decoration: none;
        font-size: 17px;
        font-weight: 500;
        transition: 0.3s;
        position: relative;
        z-index: 2;
        border: solid 1px #9dcdd1;
    }

        .policy-list--wrt .policy-btn:hover {
            background: #159aa3;
            color: #fff;
            transform: translateY(-2px);
        }

    .policy-list--wrt .policy-card.featured {
        grid-column: span 2;
        background: linear-gradient(135deg, #0f6f7c, #20a9ad);
        color: #fff;
        display: grid;
        grid-template-columns: 76px 1fr auto;
        gap: 20px;
        align-items: center;
        min-height: auto;
    }

        .policy-list--wrt .policy-card.featured::after {
            background: rgba(255,255,255,0.13);
            width: 210px;
            height: 210px;
            right: -80px;
            top: -80px;
        }

        .policy-list--wrt .policy-card.featured .policy-icon {
            background: rgba(255,255,255,0.18);
            box-shadow: none;
        }

        .policy-list--wrt .policy-card.featured h3,
        .policy-list--wrt .policy-card.featured p {
            color: #fff;
            margin-bottom: 6px;
        }

        .policy-list--wrt .policy-card.featured .policy-btn {
            background: #fff;
            color: #087489;
            white-space: nowrap;
        }

            .policy-list--wrt .policy-card.featured .policy-btn:hover {
                background: rgba(255,255,255,0.85);
            }

    .policy-list--wrt .policy-footer-note {
        margin-top: 24px;
        background: rgba(255,255,255,0.92);
        border: 1px solid #cbe5ed;
        border-radius: 24px;
        padding: 26px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        display: flex;
        align-items: flex-start;
        gap: 16px;
    }

        .policy-list--wrt .policy-footer-note i {
            width: 48px;
            height: 48px;
            border-radius: 14px;
            background: #e8f7f8;
            color: #087489;
            display: grid;
            place-items: center;
            font-size: 20px;
            flex-shrink: 0;
        }

        .policy-list--wrt .policy-footer-note p {
            color: #556875;
            font-size: 15px;
            line-height: 1.8;
        }

@media (max-width: 1100px) {
    .policy-list--wrt .policy-layout {
        grid-template-columns: 1fr;
    }

    .policy-list--wrt .policy-side {
        position: relative;
        top: auto;
    }

        .policy-list--wrt .policy-side ul {
            grid-template-columns: repeat(2, 1fr);
        }
}

@media (max-width: 850px) {
    .policy-list--wrt {
        padding: 0;
        border-radius: 0;
    }

        .policy-list--wrt .policy-hero {
            padding: 15px;
            border-radius: 0;
        }

            .policy-list--wrt .policy-hero h1 {
                font-size: 38px;
            }

        .policy-list--wrt .policy-grid {
            grid-template-columns: 1fr;
        }

        .policy-list--wrt .policy-card.featured {
            grid-column: span 1;
            grid-template-columns: 1fr;
        }

            .policy-list--wrt .policy-card.featured .policy-btn {
                width: fit-content;
            }

        .policy-list--wrt .policy-intro {
            grid-template-columns: 1fr;
            padding: 24px;
        }

            .policy-list--wrt .policy-intro h2 {
                font-size: 25px;
            }
}

@media (max-width: 560px) {
    .policy-list--wrt .policy-hero h1 {
        font-size: 21px;
        margin-bottom: 9px;
    }

    .policy-list--wrt .policy-side ul {
        grid-template-columns: 1fr;
    }

    .policy-list--wrt .policy-card {
        padding: 15px;
        border-radius: 15px;
    }

        .policy-list--wrt .policy-card h3 {
            font-size: 20px;
        }

    .policy-list--wrt .policy-footer-note {
        flex-direction: column;
    }
}



.policy-layout {
    padding: 50px 0;
}






.kid-d-wrp {
    width: 100%;
    padding: 0;
    /*! overflow: hidden; */
    padding-bottom: 50px;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .kid-d-wrp .kid-container {
        max-width: 100%;
        margin: 0 auto;
        /*! padding: 15px; */
        border: 0;
    }

    .kid-d-wrp .kid-hero {
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        border-radius: 0;
        padding: 54px;
        color: #fff;
        position: relative;
        overflow: hidden;
        box-shadow: 0 22px 55px rgba(8, 88, 105, 0.22);
        margin-bottom: 0;
    }

        .kid-d-wrp .kid-hero::after {
            content: "";
            position: absolute;
            right: -120px;
            bottom: -120px;
            width: 340px;
            height: 340px;
            background: rgba(255,255,255,0.14);
            border-radius: 50%;
        }

        .kid-d-wrp .kid-hero::before {
            content: "";
            position: absolute;
            right: 150px;
            top: 42px;
            width: 90px;
            height: 90px;
            border: 1px solid rgba(255,255,255,0.24);
            border-radius: 0;
            transform: rotate(18deg);
        }

    .kid-d-wrp .kid-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.22);
        padding: 10px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .kid-d-wrp .kid-hero h1 {
        font-size: 33px;
        line-height: 1.08;
        margin-bottom: 9px;
        font-weight: 500;
        letter-spacing: 0;
        position: relative;
        z-index: 2;
        color: #fff;
    }

    .kid-d-wrp .kid-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        position: relative;
        z-index: 2;
        padding-left: 0;
        text-transform: capitalize;
    }

        .kid-d-wrp .kid-breadcrumb li,
        .kid-d-wrp .kid-breadcrumb a {
            color: rgba(255,255,255,0.9);
            font-size: 16px;
            text-decoration: none;
            font-weight: 500;
        }

    .kid-d-wrp .kid-layout {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 26px;
        align-items: flex-start;
        padding-top: 50px;
    }

    .kid-d-wrp .kid-main-card,
    .kid-d-wrp .kid-side-card {
        background: rgba(255,255,255,0.92);
        border: 1px solid #cbe5ed;
        border-radius: 19px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        overflow: hidden;
    }

    .kid-d-wrp .kid-card-head {
        padding: 26px 28px;
        background: #fbfdfe;
        border-bottom: 1px solid #d8e8ee;
        display: flex;
        align-items: normal;
        gap: 16px;
    }

    .kid-d-wrp .kid-card-icon {
        width: 58px;
        height: 58px;
        border-radius: 999px;
        display: grid;
        place-items: center;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        color: #fff;
        font-size: 24px;
        flex-shrink: 0;
        box-shadow: 0 12px 24px rgba(17,108,122,0.16);
    }

    .kid-d-wrp .kid-card-head h2 {
        color: #0b425a;
        font-size: 23px;
        line-height: 1.2;
        font-weight: 500;
    }

    .kid-d-wrp .kid-card-head p {
        color: #5c7180;
        font-size: 15px;
        line-height: 1.6;
        margin-top: 4px;
        margin-bottom: 0;
    }

    .kid-d-wrp .kid-info {
        padding: 0;
    }

    .kid-d-wrp .kid-alert {
        background: linear-gradient(135deg, #e8f7f8, #f7fbfc);
        border: 1px solid #cde9ef;
        border-radius: 10px;
        padding: 22px;
        margin-bottom: 24px;
        display: grid;
        grid-template-columns: 54px 1fr;
        gap: 16px;
        align-items: flex-start;
    }

        .kid-d-wrp .kid-alert i {
            width: 54px;
            height: 54px;
            border-radius: 9px;
            display: grid;
            place-items: center;
            background: #159aa3;
            color: #fff;
            font-size: 22px;
        }

        .kid-d-wrp .kid-alert p {
            color: #526979;
            font-size: 16px;
            line-height: 1.8;
            margin-bottom: 0;
        }

    .kid-d-wrp .kid-work-time {
        background: #fff8e8;
        border: 1px solid #f1d79b;
        border-radius: 10px;
        padding: 18px;
        margin-bottom: 24px;
        display: flex;
        gap: 14px;
        align-items: flex-start;
        color: #8a5a00;
        font-weight: 500;
        line-height: 1.7;
    }

        .kid-d-wrp .kid-work-time i {
            margin-top: 3px;
            font-size: 20px;
            color: #b56a00;
        }

    .kid-d-wrp .kid-form-note {
        color: #556875;
        font-size: 16px;
        line-height: 1.8;
        margin-bottom: 24px;
    }

    .kid-d-wrp .kid-form {
        display: grid;
        gap: 22px;
    }

    .kid-d-wrp .kid-form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 18px;
    }

    .kid-d-wrp .kid-field {
        display: grid;
        gap: 8px;
    }

        .kid-d-wrp .kid-field label {
            color: #0b425a;
            font-size: 18px;
            font-weight: 500;
        }

        .kid-d-wrp .kid-field input,
        .kid-d-wrp .kid-field select,
        .kid-d-wrp .kid-field textarea {
            width: 100%;
            min-height: 54px;
            border: 1px solid #b2c2cb;
            border-radius: 9px;
            background: #fff;
            padding: 13px 15px;
            color: #394b58;
            font-size: 15px;
            outline: none;
            transition: 0.3s;
        }

        .kid-d-wrp .kid-field textarea {
            min-height: 135px;
            resize: vertical;
        }

            .kid-d-wrp .kid-field input:focus,
            .kid-d-wrp .kid-field select:focus,
            .kid-d-wrp .kid-field textarea:focus {
                border-color: #159aa3;
                box-shadow: 0 0 0 4px rgba(21,154,163,0.12);
            }

    .kid-d-wrp .kid-types {
        background: #f7fbfc;
        border: 1px solid #e1edf1;
        border-radius: 18px;
        padding: 20px;
    }

    .kid-d-wrp .kid-types-title {
        color: #0b425a;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 16px;
    }

    .kid-d-wrp .kid-type-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .kid-d-wrp .kid-check {
        position: relative;
    }

        .kid-d-wrp .kid-check input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .kid-d-wrp .kid-check span {
            min-height: 50px;
            padding: 12px 13px;
            border-radius: 8px;
            border: 1px solid #d7e8ee;
            background: #fff;
            color: #526979;
            font-size: 17px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 9px;
            cursor: pointer;
            transition: 0.3s;
        }

            .kid-d-wrp .kid-check span::before {
                content: "";
                width: 18px;
                height: 18px;
                border-radius: 4px;
                border: 2px solid #b8cbd3;
                flex-shrink: 0;
                transition: 0.3s;
            }

        .kid-d-wrp .kid-check input:checked + span {
            background: #e8f7f8;
            border-color: #159aa3;
            color: #087489;
        }

            .kid-d-wrp .kid-check input:checked + span::before {
                background: #159aa3;
                border-color: #159aa3;
                box-shadow: inset 0 0 0 3px #fff;
            }

    .kid-d-wrp .kid-submit {
        width: fit-content;
        min-height: 49px;
        padding: 12px 30px;
        border: 0;
        border-radius: 9px;
        background: #159aa3;
        color: #fff;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: 0.3s;
        box-shadow: 0 14px 28px rgba(21,154,163,0.18);
    }

        .kid-d-wrp .kid-submit:hover {
            background: #087489;
            transform: translateY(-3px);
        }

    .kid-d-wrp .kid-side-card {
        position: sticky;
        top: 20px;
    }

    .kid-d-wrp .kid-side-content {
        padding: 24px;
    }

    .kid-d-wrp .kid-side-box {
        margin-bottom: 22px;
    }

        .kid-d-wrp .kid-side-box:last-child {
            margin-bottom: 0;
        }

        .kid-d-wrp .kid-side-box h3 {
            color: #0b425a;
            font-size: 18px;
            font-weight: 500;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            gap: 10px;
        }

            .kid-d-wrp .kid-side-box h3 i {
                color: #159aa3;
            }

    .kid-d-wrp .kid-list {
        list-style: none;
        display: grid;
        gap: 12px;
        padding-left: 0;
    }

        .kid-d-wrp .kid-list li {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            color: #556875;
            font-size: 16px;
            line-height: 1.55;
            background: #f7fbfc;
            border: 1px solid #d7e0e3;
            border-radius: 9px;
            padding: 12px;
        }

            .kid-d-wrp .kid-list li i {
                color: #159aa3;
                margin-top: 3px;
                flex-shrink: 0;
            }

    .kid-d-wrp .kid-note {
        background: #fff8e8;
        border: 1px solid #f1d79b;
        border-radius: 16px;
        padding: 16px;
        color: #8a5a00;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 500;
        margin-bottom: 0;
    }

    .kid-d-wrp .kid-footer-brief {
        margin-top: 28px;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        border-radius: 20px;
        padding: 30px;
        color: #fff;
        box-shadow: 0 20px 45px rgba(8, 88, 105, 0.18);
    }

        .kid-d-wrp .kid-footer-brief p {
            color: rgba(255,255,255,0.92);
            font-size: 17px;
            line-height: 1.5;
            margin-bottom: 0;
        }

@media (max-width: 1100px) {
    .kid-d-wrp .kid-layout {
        grid-template-columns: 1fr;
    }

    .kid-d-wrp .kid-side-card {
        position: relative;
        top: auto;
    }

    .kid-d-wrp .kid-type-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 850px) {
    .kid-d-wrp {
        padding: 14px 12px 40px;
    }

        .kid-d-wrp .kid-hero {
            padding: 15px 15px;
            border-radius: 15px;
        }

            .kid-d-wrp .kid-hero h1 {
                font-size: 38px;
            }

        .kid-d-wrp .kid-card-head {
            padding: 22px;
            align-items: flex-start;
        }

            .kid-d-wrp .kid-card-head h2 {
                font-size: 25px;
            }

        .kid-d-wrp .kid-info {
            padding: 22px;
        }

        .kid-d-wrp .kid-form-grid {
            grid-template-columns: 1fr;
        }

        .kid-d-wrp .kid-type-grid {
            grid-template-columns: repeat(2, 1fr);
        }

        .kid-d-wrp .kid-alert {
            grid-template-columns: 1fr;
        }
}

@media (max-width: 520px) {
    .kid-d-wrp .kid-hero h1 {
        font-size: 21px;
    }

    .kid-d-wrp .kid-card-head {
        flex-direction: column;
    }

    .kid-d-wrp .kid-type-grid {
        grid-template-columns: 1fr;
    }

    .kid-d-wrp .kid-submit {
        width: 100%;
    }
}

.cart-btn a {
    display: block;
}

.cart-btn:hover a {
    color: #fff;
}

    .cart-btn:hover a img {
        filter: brightness(0) invert(1);
    }



.pay-list labe input:checked + span::before {
    background: #159aa3;
    border-color: #159aa3;
    box-shadow: inset 0 0 0 3px #fff;
}

.crtic {
    width: 100%;
    max-width: 100%;
    padding: 15px 0;
}

    .crtic .crtic-card {
        background: rgba(255,255,255,0.94);
        border: 1px solid #cbe5ed;
        border-radius: 20px;
        padding: 18px;
        box-shadow: 0 24px 55px rgba(11, 82, 100, 0.12);
        overflow: hidden;
        position: relative;
    }

        .crtic .crtic-card::after {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            right: -95px;
            bottom: -95px;
            border-radius: 50%;
            background: rgba(31, 167, 173, 0.08);
            pointer-events: none;
        }

    .crtic .crtic-img-wrap {
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        height: 260px;
        background: #e8f7f8;
    }

        .crtic .crtic-img-wrap img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: 0.45s ease;
        }

    .crtic .crtic-card:hover .crtic-img-wrap img {
        transform: scale(1.05);
    }

    .crtic .crtic-img-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0,0,0,0.18), transparent 45%, rgba(0,0,0,0.08));
        pointer-events: none;
    }

    .crtic .crtic-case {
        position: absolute;
        left: 16px;
        top: 16px;
        z-index: 2;
        background: linear-gradient(135deg, #159aa3, #087489);
        color: #fff;
        border-radius: 11px;
        padding: 10px 16px;
        font-size: 16px;
        font-weight: 500;
        box-shadow: 0 12px 28px rgba(8,116,137,0.25);
    }

    .crtic .crtic-category {
        position: absolute;
        right: 16px;
        top: 16px;
        z-index: 2;
        width: 46px;
        height: 46px;
        border-radius: 50%;
        background: rgba(255,255,255,0.92);
        color: #087489;
        display: grid;
        place-items: center;
        font-size: 20px;
        box-shadow: 0 10px 24px rgba(0,0,0,0.13);
    }

    .crtic .crtic-body {
        position: relative;
        z-index: 2;
        padding: 22px 2px 0;
    }

    .crtic .crtic-title {
        color: #064760;
        font-size: 19px;
        line-height: 1.15;
        font-weight: 500;
        margin-bottom: 15px;
    }

    .crtic .crtic-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 14px;
    }

    .crtic .crtic-chip {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background: #e8f7f8;
        color: #087489;
        border: 1px solid #cde9ef;
        padding: 9px 12px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 500;
    }

    .crtic .crtic-amount-head {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-items:;
        margin-bottom: 12px;
    }

        .crtic .crtic-amount-head h3 {
            color: #1c2f3a;
            font-size: 17px;
            font-weight: 500;
        }

    .crtic .crtic-percent {
        color: #087489;
        background: #e8f7f8;
        border: 1px solid #cde9ef;
        padding: 4px 12px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 500;
    }

    .crtic .crtic-progress {
        width: 100%;
        height: 16px;
        border-radius: 50px;
        overflow: hidden;
        background: #e8f7f8;
        border: 1px solid #aee0e7;
        margin-bottom: 14px;
    }

        .crtic .crtic-progress span {
            display: block;
            height: 100%;
            width: 78%;
            background: linear-gradient(90deg, #159aa3, #087489);
            border-radius: 50px;
            position: relative;
            overflow: hidden;
        }

            .crtic .crtic-progress span::after {
                content: "";
                position: absolute;
                inset: 0;
                background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
                animation: crticShine 1.9s infinite;
            }

@keyframes crticShine {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}

.crtic .crtic-amount-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 24px;
}

.crtic .crtic-amount-box {
    background: #f7fbfc;
    border: 1px solid #d7e8ee;
    border-radius: 10px;
    padding: 11px;
}

    .crtic .crtic-amount-box span {
        display: block;
        color: #5c7180;
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 7px;
    }

    .crtic .crtic-amount-box strong {
        color: #064760;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 500;
    }

.crtic .crtic-form {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    margin-bottom: 16px;
}

.crtic .crtic-input-wrap {
    position: relative;
}

    .crtic .crtic-input-wrap input {
        width: 100%;
        min-height: 50px;
        border: 1px solid #6cc9d0;
        border-radius: 9px;
        padding: 9px 52px 9px 16px;
        color: #394b58;
        font-size: 16px;
        outline: none;
        transition: 0.3s;
        background: #fff;
    }

        .crtic .crtic-input-wrap input:focus {
            border-color: #087489;
            box-shadow: 0 0 0 4px rgba(21,154,163,0.12);
        }

        .crtic .crtic-input-wrap input.is-invalid {
            border-color: #d64242;
            box-shadow: 0 0 0 4px rgba(214,66,66,0.12);
        }

.crtic .crtic-cart-message {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid rgba(214,66,66,0.22);
    border-radius: 9px;
    background: #fff5f5;
    color: #9f2c2c;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
}

    .crtic .crtic-cart-message i {
        color: #d64242;
        font-size: 14px;
    }

.crtic .crtic-input-wrap span {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #087489;
    font-weight: 500;
    font-size: 14px;
}

.crtic .crtic-btn {
    min-height: 50px;
    border-radius: 9px;
    border: 0;
    cursor: pointer;
    font-size: 17px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    text-decoration: none;
    transition: 0.3s;
}

.crtic .crtic-btn-primary {
    background: linear-gradient(135deg, #159aa3, #087489);
    color: #fff;
    box-shadow: 0 14px 28px rgba(21,154,163,0.2);
}

    .crtic .crtic-btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 34px rgba(21,154,163,0.28);
    }

.crtic .crtic-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.crtic .crtic-btn-outline {
    background: #fff;
    color: #087489;
    border: 1px solid #55c0ca;
}

    .crtic .crtic-btn-outline:hover {
        background: #e8f7f8;
        transform: translateY(-3px);
    }

@media (max-width: 640px) {
    body {
        padding: 14px;
    }

    .crtic .crtic-card {
        border-radius: 22px;
        padding: 15px;
    }

    .crtic .crtic-img-wrap {
        height: 245px;
        border-radius: 17px;
    }

    .crtic .crtic-title {
        font-size: 22px;
    }

    .crtic .crtic-amount-grid {
        grid-template-columns: 1fr;
    }

    .crtic .crtic-form {
        grid-template-columns: 1fr;
    }

    .crtic .crtic-actions {
        grid-template-columns: 1fr;
    }

    .crtic .crtic-btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .crtic .crtic-img-wrap {
        height: 215px;
    }

    .crtic .crtic-case {
        font-size: 14px;
        padding: 9px 12px;
    }

    .crtic .crtic-title {
        font-size: 20px;
    }

    .crtic .crtic-amount-box strong {
        font-size: 17px;
    }
}














.contact-wrap {
    width: 100%;
    padding: 50px 0 50px 0;
    overflow: hidden;
}

    .contact-wrap .contact-container {
        max-width: 100%;
        margin: 0 auto;
    }

    .contact-wrap .contact-box {
        display: grid;
        grid-template-columns: 0.9fr 1.1fr;
        gap: 34px;
        align-items: stretch;
    }

    .contact-wrap .contact-info-panel,
    .contact-wrap .contact-form-panel {
        background: rgba(255,255,255,0.92);
        border: 1px solid #cbe5ed;
        border-radius: 20px;
        padding: 30px;
        box-shadow: 0 18px 45px rgba(11, 82, 100, 0.08);
        position: relative;
        overflow: hidden;
    }

        .contact-wrap .contact-info-panel::after,
        .contact-wrap .contact-form-panel::after {
            content: "";
            position: absolute;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            background: rgba(31,167,173,0.08);
            right: -95px;
            bottom: -95px;
            pointer-events: none;
        }

    .contact-wrap .contact-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background: #f4f7f6;
        border: 1px solid #e7eeee;
        color: #064760;
        padding: 11px 18px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        margin-bottom: 24px;
        position: relative;
        z-index: 2;
    }

        .contact-wrap .contact-badge span {
            width: 8px;
            height: 8px;
            background: #159aa3;
            border-radius: 50%;
            display: inline-block;
        }

    .contact-wrap .contact-info-panel h2,
    .contact-wrap .contact-form-panel h2 {
        color: #064760;
        font-size: 22px;
        line-height: 1.15;
        font-weight: 500;
        margin-bottom: 16px;
        position: relative;
        z-index: 2;
    }

    .contact-wrap .contact-desc {
        color: #4f5f6d;
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 32px;
        max-width: 720px;
        position: relative;
        z-index: 2;
    }

    .contact-wrap .contact-sub-title {
        color: #064760;
        font-size: 22px;
        font-weight: 500;
        margin-bottom: 22px;
        position: relative;
        z-index: 2;
    }

    .contact-wrap .contact-list {
        position: relative;
        z-index: 2;
    }

    .contact-wrap .contact-item {
        display: grid;
        grid-template-columns: 64px 1fr;
        gap: 20px;
        align-items: center;
        padding: 22px 0;
        border-bottom: 1px solid #e2ecef;
    }

        .contact-wrap .contact-item:last-child {
            border-bottom: 0;
        }

    .contact-wrap .contact-icon {
        width: 64px;
        height: 64px;
        border-radius: 50%;
        background: linear-gradient(135deg, #064f60, #087489);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 24px;
        box-shadow: 0 14px 28px rgba(8,116,137,0.18);
    }

    .contact-wrap .contact-item h3 {
        color: #064760;
        font-size: 17px;
        font-weight: 500;
        margin-bottom: 3px;
    }

    .contact-wrap .contact-item a,
    .contact-wrap .contact-item p {
        color: #4f5f6d;
        font-size: 18px;
        line-height: 1.5;
        text-decoration: none;
        word-break: break-word;
    }

        .contact-wrap .contact-item a:hover {
            color: #159aa3;
        }

    .contact-wrap .contact-form-panel {
        background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(247,252,253,0.94));
    }

    .contact-wrap .contact-form {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 22px;
    }

    .contact-wrap .contact-form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .contact-wrap .contact-field {
        position: relative;
    }

        .contact-wrap .contact-field input,
        .contact-wrap .contact-field textarea {
            width: 100%;
            min-height: 50px;
            border: 1px solid transparent;
            background: #f3f2ef;
            border-radius: 16px;
            padding: 15px 18px;
            font-size: 16px;
            color: #273642;
            outline: none;
            transition: 0.3s;
            border: 1.5px solid #c8c8c8;
            background: #fff;
            border-radius: 10px;
        }

        .contact-wrap .contact-field textarea {
            min-height: 190px;
            resize: vertical;
            display: block;
        }

            .contact-wrap .contact-field input::placeholder,
            .contact-wrap .contact-field textarea::placeholder {
                color: #4f5f6d;
                opacity: 0.95;
            }

            .contact-wrap .contact-field input:focus,
            .contact-wrap .contact-field textarea:focus {
                background: #fff;
                border-color: #159aa3;
                box-shadow: 0 0 0 4px rgba(21,154,163,0.12);
            }

    .contact-wrap .contact-submit {
        width: fit-content;
        min-height: 58px;
        border: none;
        border-radius: 10px;
        background: #064f60;
        color: #fff;
        padding: 20px;
        display: inline-flex;
        align-items: center;
        gap: 18px;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 14px 28px rgba(6,79,96,0.18);
        background: linear-gradient(90deg, #15999b, #146f87);
        color: #fff;
        box-shadow: 0 16px 36px rgba(13,111,104,.24);
    }

        .contact-wrap .contact-submit:hover {
            background: #087489;
            transform: translateY(-3px);
            box-shadow: 0 18px 35px rgba(8,116,137,0.24);
        }

        .contact-wrap .contact-submit i {
            width: 48px;
            height: 48px;
            border-radius: 7px;
            background: #159aa3;
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 20px;
            transition: 0.3s;
        }

        .contact-wrap .contact-submit:hover i {
            background: #fff;
            color: #087489;
            transform: translateX(3px);
        }

    .contact-wrap .contact-note {
        margin-top: 26px;
        background: #e8f7f8;
        border: 1px solid #cde9ef;
        border-radius: 11px;
        padding: 18px;
        color: #087489;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }

@media (max-width: 1100px) {
    .contact-wrap .contact-box {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .contact-wrap {
        padding: 45px 14px;
    }

        .contact-wrap .contact-info-panel,
        .contact-wrap .contact-form-panel {
            padding: 28px 22px;
            border-radius: 22px;
        }

            .contact-wrap .contact-info-panel h2,
            .contact-wrap .contact-form-panel h2 {
                font-size: 30px;
            }

        .contact-wrap .contact-desc {
            font-size: 16px;
        }

        .contact-wrap .contact-form-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .contact-wrap .contact-item {
            grid-template-columns: 56px 1fr;
            gap: 16px;
        }

        .contact-wrap .contact-icon {
            width: 56px;
            height: 56px;
            font-size: 21px;
        }
}

@media (max-width: 480px) {
    .contact-wrap .contact-info-panel,
    .contact-wrap .contact-form-panel {
        padding: 24px 18px;
    }

        .contact-wrap .contact-info-panel h2,
        .contact-wrap .contact-form-panel h2 {
            font-size: 27px;
        }

    .contact-wrap .contact-sub-title {
        font-size: 19px;
        margin-bottom: 0;
    }

    .contact-wrap .contact-item {
        grid-template-columns: 1fr;
    }

        .contact-wrap .contact-item a,
        .contact-wrap .contact-item p {
            font-size: 16px;
        }

    .contact-wrap .contact-submit {
        width: 100%;
        justify-content: space-between;
        padding-left: 20px;
    }
}












.cart-wrap-1 {
    width: 100%;
    /*! min-height: 100vh; */
    padding: 50px 18px;
    background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), linear-gradient(90deg, rgba(14,118,132,.08) 1px, transparent 1px), linear-gradient(rgba(14,118,132,.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    overflow: hidden;
}

    .cart-wrap-1 .cart-container {
        /*! max-width: 1450px; */
        margin: 0 auto;
    }

    .cart-wrap-1 .cart-head {
        margin-bottom: 28px;
    }

        .cart-wrap-1 .cart-head span {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #e9f8f9;
            color: #087489;
            border: 1px solid #cce8ec;
            padding: 9px 15px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 12px;
        }

        .cart-wrap-1 .cart-head h2 {
            color: #073f54;
            font-size: 23px;
            line-height: 1.15;
            font-weight: 500;
            margin-bottom: 1px;
        }

        .cart-wrap-1 .cart-head p {
            color: #5d7180;
            font-size: 16px;
            line-height: 1.6;
        }

    .cart-wrap-1 .cart-layout {
        display: grid;
        grid-template-columns: 1fr 390px;
        gap: 28px;
        align-items: flex-start;
    }

    .cart-wrap-1 .cart-items {
        display: grid;
        gap: 18px;
    }

    .cart-wrap-1 .cart-item {
        background: rgba(255,255,255,.95);
        border: 1px solid #d1e7ed;
        border-radius: 14px;
        padding: 22px;
        display: grid;
        grid-template-columns: 74px 1fr auto auto 44px;
        gap: 20px;
        align-items: center;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        position: relative;
        overflow: hidden;
        transition: 0.3s ease;
    }

        .cart-wrap-1 .cart-item:hover {
            transform: translateY(-4px);
            box-shadow: 0 24px 55px rgba(11,82,100,.12);
            border-color: #a9dce4;
        }

        .cart-wrap-1 .cart-item:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(120deg, rgba(21,154,163,.08), transparent 45%);
            pointer-events: none;
        }

        .cart-wrap-1 .cart-item:after {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            right: -80px;
            bottom: -80px;
            border-radius: 50%;
            background: rgba(21,154,163,.08);
            pointer-events: none;
        }

    .cart-wrap-1 .cart-icon {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 24px;
        position: relative;
        z-index: 2;
        box-shadow: 0 14px 28px rgba(21,154,163,.22);
    }

    .cart-wrap-1 .cart-info,
    .cart-wrap-1 .cart-qty,
    .cart-wrap-1 .cart-price,
    .cart-wrap-1 .cart-delete {
        position: relative;
        z-index: 2;
    }

        .cart-wrap-1 .cart-info h3 {
            color: #071f3d;
            font-size: 19px;
            font-weight: 500;
            margin-bottom: 1px;
        }

        .cart-wrap-1 .cart-info p {
            color: #526b8a;
            font-size: 16px;
            font-weight: 500;
            padding-bottom: 0;
            margin-bottom: 0;
        }

    .cart-wrap-1 .cart-qty {
        display: inline-flex;
        align-items: center;
        background: #f7fbfc;
        border: 1px solid #d7e8ee;
        border-radius: 8px;
        padding: 5px;
        box-shadow: 0 8px 20px rgba(11,82,100,.06);
    }

        .cart-wrap-1 .cart-qty button {
            width: 36px;
            height: 36px;
            border: 0;
            border-radius: 6px;
            background: #fff;
            color: #073f54;
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: .3s ease;
        }

            .cart-wrap-1 .cart-qty button:hover {
                background: #159aa3;
                color: #fff;
            }

        .cart-wrap-1 .cart-qty input {
            width: 44px;
            height: 36px;
            border: 0;
            background: transparent;
            text-align: center;
            color: #071f3d;
            font-size: 18px;
            font-weight: 500;
            outline: none;
        }

    .cart-wrap-1 .cart-price {
        text-align: right;
        min-width: 150px;
    }

        .cart-wrap-1 .cart-price strong {
            display: block;
            color: #071f3d;
            font-size: 22px;
            line-height: 1;
            font-weight: 500;
            white-space: nowrap;
        }

        .cart-wrap-1 .cart-price span {
            color: #526b8a;
            font-size: 14px;
            font-weight: 500;
        }

    .cart-wrap-1 .cart-delete {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 15px;
        background: #fff0f0;
        color: #ef4444;
        cursor: pointer;
        font-size: 17px;
        transition: .3s ease;
    }

        .cart-wrap-1 .cart-delete:hover {
            background: #ef4444;
            color: #fff;
            transform: rotate(90deg);
        }

    .cart-wrap-1 .cart-summary {
        background: linear-gradient(160deg, #0d5262, #18a4a7);
        border-radius: 15px;
        padding: 26px;
        color: #fff;
        box-shadow: 0 22px 50px rgba(11,82,100,.2);
        position: sticky;
        top: 24px;
        overflow: hidden;
    }

    .cart-wrap-1 .summary-glow {
        position: absolute;
        width: 220px;
        height: 220px;
        border-radius: 50%;
        right: -90px;
        top: -90px;
        background: rgba(255,255,255,.16);
        pointer-events: none;
    }

        .cart-wrap-1 .summary-glow.two {
            width: 140px;
            height: 140px;
            left: -70px;
            bottom: -70px;
            top: auto;
            right: auto;
            background: rgba(255,255,255,.09);
        }

    .cart-wrap-1 .summary-title {
        position: relative;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24px;
    }

        .cart-wrap-1 .summary-title span {
            font-size: 22px;
            font-weight: 500;
        }

        .cart-wrap-1 .summary-title i {
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: rgba(255,255,255,.15);
            display: grid;
            place-items: center;
            font-size: 20px;
        }

    .cart-wrap-1 .summary-row {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: space-between;
        gap: 15px;
        padding: 15px 15px;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }

        .cart-wrap-1 .summary-row span {
            color: rgba(255,255,255,.75);
            font-weight: 500;
        }

        .cart-wrap-1 .summary-row strong {
            color: #fff;
            font-weight: 500;
            text-align: right;
        }

    .cart-wrap-1 .summary-total {
        position: relative;
        z-index: 2;
        background: rgba(255,255,255,.14);
        border: 1px solid rgba(255,255,255,.18);
        border-radius: 12px;
        padding: 15px;
        margin: 22px 0;
    }

        .cart-wrap-1 .summary-total span {
            display: block;
            color: rgba(255,255,255,.78);
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .cart-wrap-1 .summary-total strong {
            display: block;
            font-size: 23px;
            line-height: 1.1;
            font-weight: 500;
        }

        .cart-wrap-1 .summary-total small {
            font-size: 15px;
            font-weight: 500;
        }

    .cart-wrap-1 .summary-actions {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 12px;
    }

    .cart-wrap-1 .cart-btn {
        min-height: 56px;
        border-radius: 10px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 500;
        transition: .3s ease;
    }

    .cart-wrap-1 .cart-btn-light {
        background: #fff;
        color: #073f54;
    }

    .cart-wrap-1 .cart-btn-dark {
        background: #073f54;
        color: #fff;
    }

    .cart-wrap-1 .cart-btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 14px 26px rgba(0,0,0,.16);
    }

    .cart-wrap-1 .payment-partners {
        position: relative;
        z-index: 2;
        margin-top: 24px;
        padding-top: 22px;
        border-top: 1px solid rgba(255,255,255,.18);
    }

        .cart-wrap-1 .payment-partners h4 {
            font-size: 17px;
            font-weight: 500;
            text-align: center;
            margin-bottom: 14px;
            color: #fff;
        }

    .cart-wrap-1 .payment-logos {
        background: #fff;
        border-radius: 9px;
        padding: 11px;
        /*! display: grid; */
        grid-template-columns: repeat(4, 1fr);
        gap: 9px;
    }

    .cart-wrap-1 .pay-logo {
        min-height: 38px;
        border-radius: 5px;
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 500;
        overflow: hidden;
    }

    .cart-wrap-1 .visa {
        background: #1a1f71;
        font-size: 20px;
        letter-spacing: 1px;
    }

    .cart-wrap-1 .apple,
    .cart-wrap-1 .gpay {
        background: #000;
        font-size: 15px;
    }

    .cart-wrap-1 .master {
        background: #111;
        position: relative;
    }

        .cart-wrap-1 .master span {
            width: 21px;
            height: 21px;
            border-radius: 50%;
            position: absolute;
        }

            .cart-wrap-1 .master span:first-child {
                background: #eb001b;
                left: 18px;
            }

            .cart-wrap-1 .master span:last-child {
                background: #f79e1b;
                right: 18px;
                opacity: .9;
            }

@media (max-width: 1100px) {
    .cart-wrap-1 .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-wrap-1 .cart-summary {
        position: relative;
        top: auto;
    }
}

@media (max-width: 850px) {
    .cart-wrap-1 {
        padding: 35px 14px;
    }

        .cart-wrap-1 .cart-head h2 {
            font-size: 30px;
        }

        .cart-wrap-1 .cart-item {
            grid-template-columns: 64px 1fr 44px;
            gap: 16px;
        }

        .cart-wrap-1 .cart-icon {
            width: 64px;
            height: 64px;
            border-radius: 20px;
            font-size: 26px;
        }

        .cart-wrap-1 .cart-qty {
            grid-column: 1 / 3;
            width: fit-content;
        }

        .cart-wrap-1 .cart-price {
            grid-column: 1 / 4;
            text-align: left;
        }

        .cart-wrap-1 .cart-delete {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
        }
}

@media (max-width: 520px) {
    .cart-wrap-1 .cart-item {
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .cart-wrap-1 .cart-icon {
        width: 58px;
        height: 58px;
        border-radius: 18px;
        font-size: 24px;
    }

    .cart-wrap-1 .cart-delete {
        position: absolute;
        right: 18px;
        top: 18px;
    }

    .cart-wrap-1 .cart-info {
        padding-right: 52px;
    }

        .cart-wrap-1 .cart-info h3 {
            font-size: 20px;
        }

    .cart-wrap-1 .cart-qty,
    .cart-wrap-1 .cart-price {
        grid-column: auto;
    }

        .cart-wrap-1 .cart-price strong {
            font-size: 21px;
        }

    .cart-wrap-1 .cart-summary {
        padding: 22px;
        border-radius: 24px;
    }

    .cart-wrap-1 .summary-total strong {
        font-size: 24px;
    }

    .cart-wrap-1 .payment-logos {
        grid-template-columns: repeat(2, 1fr);
    }
}



























.checkout-wrap-1 {
    width: 100%;
    min-height: 100vh;
    padding: 50px 18px;
    background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), linear-gradient(90deg, rgba(14,118,132,.08) 1px, transparent 1px), linear-gradient(rgba(14,118,132,.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    overflow: hidden;
    position: relative;
}

    .checkout-wrap-1::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(21,154,163,.08);
        top: -160px;
        left: -160px;
        pointer-events: none;
    }

    .checkout-wrap-1::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(13,82,98,.06);
        right: -180px;
        bottom: -180px;
        pointer-events: none;
    }

    .checkout-wrap-1 .checkout-container {
        max-width: 1450px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .checkout-wrap-1 .checkout-head {
        margin-bottom: 32px;
    }

        .checkout-wrap-1 .checkout-head span {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            background: #e9f8f9;
            color: #087489;
            border: 1px solid #cce8ec;
            padding: 9px 15px;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 500;
            margin-bottom: 12px;
        }

        .checkout-wrap-1 .checkout-head h1 {
            color: #073f54;
            font-size: 24px;
            line-height: 1.15;
            font-weight: 500;
            margin-bottom: 8px;
        }

        .checkout-wrap-1 .checkout-head p {
            color: #5d7180;
            font-size: 16px;
            line-height: 1.7;
            max-width: 720px;
        }

    .checkout-wrap-1 .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 430px;
        gap: 30px;
        align-items: flex-start;
    }

    .checkout-wrap-1 .billing-card,
    .checkout-wrap-1 .cart-card,
    .checkout-wrap-1 .payment-card {
        background: rgba(255,255,255,.95);
        border: 1px solid #d1e7ed;
        border-radius: 15px;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        position: relative;
        overflow: hidden;
    }

        .checkout-wrap-1 .billing-card::after,
        .checkout-wrap-1 .cart-card::after,
        .checkout-wrap-1 .payment-card::after {
            content: "";
            position: absolute;
            right: -75px;
            bottom: -75px;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(21,154,163,.07);
            pointer-events: none;
        }

    .checkout-wrap-1 .card-head {
        padding: 26px 28px;
        border-bottom: 1px solid #dbeaf0;
        background: linear-gradient(120deg, rgba(21,154,163,.08), transparent 55%);
        display: flex;
        align-items: center;
        gap: 16px;
        position: relative;
        z-index: 2;
    }

    .checkout-wrap-1 .card-icon {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 24px;
        box-shadow: 0 14px 28px rgba(21,154,163,.22);
        flex-shrink: 0;
    }

    .checkout-wrap-1 .card-head h2 {
        color: #073f54;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 4px;
    }

    .checkout-wrap-1 .card-head p {
        color: #5d7180;
        font-size: 16px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .checkout-wrap-1 .billing-body {
        padding: 28px;
        position: relative;
        z-index: 2;
    }

    .checkout-wrap-1 .billing-form {
        display: grid;
        gap: 22px;
    }

    .checkout-wrap-1 .form-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }

    .checkout-wrap-1 .field {
        position: relative;
    }

        .checkout-wrap-1 .field input,
        .checkout-wrap-1 .field textarea {
            width: 100%;
            min-height: 66px;
            border: 1px solid transparent;
            background: #f3f2ef;
            border-radius: 18px;
            padding: 20px 18px 10px;
            font-size: 16px;
            color: #273642;
            outline: none;
            transition: 0.3s;
            border: 1.5px solid #c8c8c8;
            background: #fff;
            border-radius: 10px;
            padding: 18px 16px 14px 16px;
            font-size: 17px;
            color: #17384b;
            outline: none;
            transition: .25s ease;
            width: 100%;
        }

        .checkout-wrap-1 .field textarea {
            min-height: 190px;
            resize: vertical;
            display: block;
            padding-top: 22px;
        }

        .checkout-wrap-1 .field label {
            position: absolute;
            top: 21px;
            left: 18px;
            color: #4f5f6d;
            font-size: 16px;
            pointer-events: none;
            transition: 0.25s;
        }

        .checkout-wrap-1 .field input:focus,
        .checkout-wrap-1 .field textarea:focus,
        .checkout-wrap-1 .field input:not(:placeholder-shown),
        .checkout-wrap-1 .field textarea:not(:placeholder-shown) {
            background: #fff;
            border-color: #159aa3;
            box-shadow: 0 0 0 4px rgba(21,154,163,.12);
        }

            .checkout-wrap-1 .field input:focus + label,
            .checkout-wrap-1 .field textarea:focus + label,
            .checkout-wrap-1 .field input:not(:placeholder-shown) + label,
            .checkout-wrap-1 .field textarea:not(:placeholder-shown) + label {
                top: 4px;
                font-size: 13px;
                color: #087489;
                font-weight: 500;
            }

    .checkout-wrap-1 .secure-note {
        margin-top: 24px;
        background: #e9f8f9;
        border: 1px solid #cce8ec;
        border-radius: 15px;
        padding: 16px 18px;
        color: #087489;
        font-size: 15px;
        line-height: 1.7;
        font-weight: 500;
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

        .checkout-wrap-1 .secure-note i {
            margin-top: 4px;
            flex-shrink: 0;
        }

    .checkout-wrap-1 .checkout-side {
        display: grid;
        gap: 22px;
        position: sticky;
        top: 24px;
    }

    .checkout-wrap-1 .cart-card {
        padding: 0;
    }

    .checkout-wrap-1 .cart-body {
        padding: 24px;
        position: relative;
        z-index: 2;
    }

    .checkout-wrap-1 .cart-item {
        background: #fff;
        border: 1px solid #dbeaf0;
        border-radius: 10px;
        padding: 18px;
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        align-items: center;
        margin-bottom: 19px;
        box-shadow: 0 10px 25px rgba(11,82,100,.06);
    }

    .checkout-wrap-1 .cart-item-icon {
        width: 56px;
        height: 56px;
        border-radius: 17px;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 23px;
    }

    .checkout-wrap-1 .cart-item-info {
        min-width: 0;
    }

    .checkout-wrap-1 .cart-item-top {
        display: flex;
        justify-content: space-between;
        gap: 15px;
        align-items: flex-start;
        margin-bottom: 0px;
    }

    .checkout-wrap-1 .cart-item h3 {
        color: #071f3d;
        font-size: 17px;
        line-height: 1.25;
        font-weight: 500;
    }

    .checkout-wrap-1 .cart-item strong {
        color: #071f3d;
        font-size: 17px;
        font-weight: 500;
        white-space: nowrap;
    }

        .checkout-wrap-1 .cart-item strong span {
            font-size: 13px;
            font-weight: 500;
            color: #526b8a;
        }

    .checkout-wrap-1 .cart-item p {
        color: #526b8a;
        font-size: 15px;
        font-weight: 500;
    }

    .checkout-wrap-1 .price-lines {
        display: grid;
        gap: 13px;
        margin-bottom: 18px;
    }

    .checkout-wrap-1 .price-line {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        color: #5d7180;
        font-size: 16px;
        font-weight: 500;
    }

        .checkout-wrap-1 .price-line strong {
            color: #071f3d;
            font-weight: 500;
            text-align: right;
        }

        .checkout-wrap-1 .price-line .free {
            color: #159aa3;
        }

    .checkout-wrap-1 .total-box {
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        border-radius: 8px;
        padding: 18px;
        color: #fff;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        align-items: center;
        box-shadow: 0 16px 34px rgba(21,154,163,.22);
    }

        .checkout-wrap-1 .total-box span {
            font-size: 16px;
            font-weight: 500;
            opacity: 0.88;
        }

        .checkout-wrap-1 .total-box strong {
            font-size: 24px;
            font-weight: 500;
            text-align: right;
        }

        .checkout-wrap-1 .total-box small {
            font-size: 14px;
            font-weight: 500;
        }

    .checkout-wrap-1 .payment-card {
        padding: 24px;
        position: relative;
        z-index: 2;
    }

        .checkout-wrap-1 .payment-card h3 {
            color: #073f54;
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            position: relative;
            z-index: 2;
        }

            .checkout-wrap-1 .payment-card h3 i {
                color: #159aa3;
            }

    .checkout-wrap-1 .payment-logos {
        position: relative;
        z-index: 2;
        display:;
        grid-template-columns: repeat(5, 1fr);
        gap: 12px;
    }

    .checkout-wrap-1 .pay-logo {
        min-height: 52px;
        border-radius: 15px;
        background: #fff;
        border: 1px solid #dbeaf0;
        box-shadow: 0 8px 18px rgba(11,82,100,.06);
        display: grid;
        place-items: center;
        font-weight: 500;
        overflow: hidden;
    }

    .checkout-wrap-1 .apple {
        color: #000;
        font-size: 21px;
    }

    .checkout-wrap-1 .master {
        position: relative;
        background: #fff;
    }

        .checkout-wrap-1 .master span {
            width: 28px;
            height: 28px;
            border-radius: 50%;
            position: absolute;
        }

            .checkout-wrap-1 .master span:first-child {
                background: #eb001b;
                left: calc(50% - 24px);
            }

            .checkout-wrap-1 .master span:last-child {
                background: #f79e1b;
                right: calc(50% - 24px);
                opacity: 0.9;
            }

    .checkout-wrap-1 .visa {
        color: #1a1f71;
        font-size: 27px;
        letter-spacing: 1px;
        font-style: italic;
    }

    .checkout-wrap-1 .etisalat {
        color: #77a900;
        font-size: 14px;
    }

    .checkout-wrap-1 .du {
        color: #00a9d6;
        font-size: 30px;
        font-weight: 500;
    }

    .checkout-wrap-1 .pay-btn {
        width: 100%;
        min-height: 62px;
        margin-top: 22px;
        border: 0;
        border-radius: 10px;
        background: #073f54;
        color: #fff;
        padding: 8px 8px 8px 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s;
        box-shadow: 0 16px 34px rgba(7,63,84,.22);
        position: relative;
        z-index: 2;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
    }

        .checkout-wrap-1 .pay-btn:hover {
            background: #087489;
            transform: translateY(-3px);
            box-shadow: 0 20px 42px rgba(8,116,137,.25);
        }

        .checkout-wrap-1 .pay-btn i {
            width: 36px;
            height: 36px;
            border-radius: 5px;
            background: #159aa3;
            display: grid;
            place-items: center;
            font-size: 16px;
            transition: 0.3s;
        }

        .checkout-wrap-1 .pay-btn:hover i {
            background: #fff;
            color: #087489;
            transform: translateX(3px);
        }

@media (max-width: 1150px) {
    .checkout-wrap-1 .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-wrap-1 .checkout-side {
        position: relative;
        top: auto;
    }
}

@media (max-width: 768px) {
    .checkout-wrap-1 {
        padding: 36px 14px;
    }

        .checkout-wrap-1 .checkout-head h1 {
            font-size: 31px;
        }

        .checkout-wrap-1 .card-head {
            padding: 22px;
            align-items: flex-start;
        }

            .checkout-wrap-1 .card-head h2 {
                font-size: 22px;
            }

        .checkout-wrap-1 .billing-body {
            padding: 22px;
        }

        .checkout-wrap-1 .form-grid {
            grid-template-columns: 1fr;
            gap: 18px;
        }

        .checkout-wrap-1 .cart-item-top {
            flex-direction: column;
            gap: 7px;
        }

        .checkout-wrap-1 .payment-logos {
            grid-template-columns: repeat(3, 1fr);
        }
}

@media (max-width: 520px) {
    .checkout-wrap-1 .checkout-head h1 {
        font-size: 28px;
    }

    .checkout-wrap-1 .billing-card,
    .checkout-wrap-1 .cart-card,
    .checkout-wrap-1 .payment-card {
        border-radius: 22px;
    }

    .checkout-wrap-1 .card-head {
        flex-direction: column;
    }

    .checkout-wrap-1 .field input,
    .checkout-wrap-1 .field textarea {
        border-radius: 15px;
    }

    .checkout-wrap-1 .cart-body,
    .checkout-wrap-1 .payment-card {
        padding: 20px;
    }

    .checkout-wrap-1 .cart-item {
        grid-template-columns: 1fr;
    }

    .checkout-wrap-1 .total-box {
        flex-direction: column;
        align-items: flex-start;
    }

        .checkout-wrap-1 .total-box strong {
            text-align: left;
            font-size: 22px;
        }

    .checkout-wrap-1 .payment-logos {
        grid-template-columns: repeat(2, 1fr);
    }

    .checkout-wrap-1 .pay-btn {
        font-size: 16px;
    }
}













.bakacnt-wrap-1 {
    width: 100%;
    min-height: inherit;
    padding: 50px 0px;
    background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), linear-gradient(90deg, rgba(14,118,132,.08) 1px, transparent 1px), linear-gradient(rgba(14,118,132,.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    overflow: hidden;
    position: relative;
}

    .bakacnt-wrap-1::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(21,154,163,.08);
        top: -160px;
        left: -160px;
        pointer-events: none;
    }

    .bakacnt-wrap-1::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(13,82,98,.06);
        right: -180px;
        bottom: -180px;
        pointer-events: none;
    }

    .bakacnt-wrap-1 .bank-container {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-hero {
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        border-radius: 30px;
        padding: 48px;
        color: #fff;
        margin-bottom: 34px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 55px rgba(11,82,100,.18);
    }

        .bakacnt-wrap-1 .bank-hero::before {
            content: "";
            position: absolute;
            right: -110px;
            top: -110px;
            width: 310px;
            height: 310px;
            background: rgba(255,255,255,.14);
            border-radius: 50%;
        }

        .bakacnt-wrap-1 .bank-hero::after {
            content: "";
            position: absolute;
            right: 160px;
            bottom: 38px;
            width: 86px;
            height: 86px;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 24px;
            transform: rotate(18deg);
        }

    .bakacnt-wrap-1 .bank-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,.16);
        color: #fff;
        border: 1px solid rgba(255,255,255,.24);
        padding: 10px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-hero h1 {
        font-size: 48px;
        line-height: 1.12;
        font-weight: 500;
        margin-bottom: 14px;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        position: relative;
        z-index: 2;
    }

        .bakacnt-wrap-1 .bank-breadcrumb li,
        .bakacnt-wrap-1 .bank-breadcrumb a {
            color: rgba(255,255,255,.9);
            font-size: 16px;
            text-decoration: none;
            font-weight: 500;
        }

    .bakacnt-wrap-1 .bank-intro {
        background: rgba(255,255,255,.95);
        border: 1px solid #d1e7ed;
        border-radius: 18px;
        padding: 26px;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        margin-bottom: 26px;
        display: grid;
        grid-template-columns: 70px 1fr;
        gap: 18px;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }

        .bakacnt-wrap-1 .bank-intro::after {
            content: "";
            position: absolute;
            width: 170px;
            height: 170px;
            right: -75px;
            bottom: -75px;
            border-radius: 50%;
            background: rgba(21,154,163,.07);
        }

    .bakacnt-wrap-1 .bank-intro-icon {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 30px;
        box-shadow: 0 14px 28px rgba(21,154,163,.22);
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-intro h2 {
        color: #073f54;
        font-size: 23px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 2px;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-intro p {
        color: #5d7180;
        font-size: 14px;
        line-height: 1.5;
        position: relative;
        z-index: 2;
        margin-bottom: 0;
    }

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

    .bakacnt-wrap-1 .bank-card {
        background: rgba(255,255,255,.96);
        border: 1px solid #d1e7ed;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        position: relative;
        transition: 0.35s ease;
    }

        .bakacnt-wrap-1 .bank-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 26px 60px rgba(11,82,100,.14);
            border-color: #9dd9e2;
        }

    .bakacnt-wrap-1 .bank-card-top {
        padding: 28px;
        background: linear-gradient(120deg, rgba(21,154,163,.1), transparent 65%);
        border-bottom: 1px solid #dbeaf0;
        position: relative;
        overflow: hidden;
    }

        .bakacnt-wrap-1 .bank-card-top::after {
            content: "";
            position: absolute;
            right: -52px;
            top: -52px;
            width: 135px;
            height: 135px;
            border-radius: 50%;
            background: rgba(21,154,163,.1);
        }

    .bakacnt-wrap-1 .bank-logo {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #dbeaf0;
        display: grid;
        place-items: center;
        color: #087489;
        font-size: 31px;
        margin-bottom: 20px;
        box-shadow: 0 12px 26px rgba(11,82,100,.08);
        position: relative;
        z-index: 2;
        border: dashed 1px #15999b;
    }

    .bakacnt-wrap-1 .bank-card h3 {
        color: #073f54;
        font-size: 20px;
        line-height: 1.35;
        font-weight: 500;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-type {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        background: #e9f8f9;
        color: #087489;
        border: 1px solid #cce8ec;
        padding: 8px 12px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 500;
        margin-top: 14px;
        position: relative;
        z-index: 2;
    }

    .bakacnt-wrap-1 .bank-card-body {
        padding: 26px;
        display: grid;
        gap: 16px;
    }

    .bakacnt-wrap-1 .bank-detail {
        background: #f7fbfc;
        border: 1px solid #dbeaf0;
        border-radius: 15px;
        padding: 16px;
        display: grid;
        gap: 8px;
    }

    .bakacnt-wrap-1 .bank-detail-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .bakacnt-wrap-1 .bank-detail label {
        color: #5d7180;
        font-size: 14px;
        font-weight: 500;
    }

    .bakacnt-wrap-1 .copy-btn {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 10px;
        background: #e9f8f9;
        color: #087489;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: 0.3s;
        flex-shrink: 0;
    }

        .bakacnt-wrap-1 .copy-btn:hover {
            background: #159aa3;
            color: #fff;
            transform: translateY(-2px);
        }

    .bakacnt-wrap-1 .bank-detail strong {
        color: #071f3d;
        font-size: 17px;
        line-height: 1.5;
        font-weight: 500;
        word-break: break-all;
    }

    .bakacnt-wrap-1 .donate-action {
        width: 100%;
        min-height: 60px;
        border-radius: 11px;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 4px;
        transition: 0.3s;
        box-shadow: 0 14px 28px rgba(21,154,163,.2);
    }

        .bakacnt-wrap-1 .donate-action:hover {
            transform: translateY(-3px);
            box-shadow: 0 18px 36px rgba(21,154,163,.28);
        }

    .bakacnt-wrap-1 .bank-note {
        margin-top: 28px;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        border-radius: 20px;
        padding: 30px;
        color: #fff;
        box-shadow: 0 22px 50px rgba(11,82,100,.18);
        display: grid;
        grid-template-columns: 62px 1fr;
        gap: 18px;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }

        .bakacnt-wrap-1 .bank-note::after {
            content: "";
            position: absolute;
            width: 210px;
            height: 210px;
            right: -90px;
            bottom: -90px;
            border-radius: 50%;
            background: rgba(255,255,255,.14);
        }

        .bakacnt-wrap-1 .bank-note i {
            width: 62px;
            height: 62px;
            border-radius: 50%;
            background: rgba(255,255,255,.16);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 26px;
            position: relative;
            z-index: 2;
        }

        .bakacnt-wrap-1 .bank-note h3 {
            font-size: 20px;
            font-weight: 500;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
            color: #fff;
        }

        .bakacnt-wrap-1 .bank-note p {
            color: rgba(255,255,255,.92);
            font-size: 16px;
            line-height: 1.8;
            position: relative;
            z-index: 2;
            margin-bottom: 0;
        }

@media (max-width: 1150px) {
    .bakacnt-wrap-1 .bank-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .bakacnt-wrap-1 {
        padding: 15px 0;
    }

        .bakacnt-wrap-1 .bank-hero {
            padding: 36px 24px;
            border-radius: 24px;
        }

            .bakacnt-wrap-1 .bank-hero h1 {
                font-size: 36px;
            }

        .bakacnt-wrap-1 .bank-intro {
            grid-template-columns: 1fr;
            padding: 22px;
        }

            .bakacnt-wrap-1 .bank-intro h2 {
                font-size: 19px;
            }

        .bakacnt-wrap-1 .bank-grid {
            grid-template-columns: 1fr;
        }

        .bakacnt-wrap-1 .bank-card-top,
        .bakacnt-wrap-1 .bank-card-body {
            padding: 15px;
        }

        .bakacnt-wrap-1 .bank-note {
            grid-template-columns: 1fr;
            padding: 24px;
        }
}

@media (max-width: 480px) {
    .bakacnt-wrap-1 .bank-hero h1 {
        font-size: 30px;
    }

    .bakacnt-wrap-1 .bank-card {
        border-radius: 22px;
    }

        .bakacnt-wrap-1 .bank-card h3 {
            font-size: 19px;
        }

    .bakacnt-wrap-1 .bank-detail strong {
        font-size: 15px;
    }
}










.open-d-w-1 {
    width: 100%;
    min-height: 100vh;
    padding: 50px 0px;
    background: linear-gradient(rgba(255,255,255,.94), rgba(255,255,255,.94)), linear-gradient(90deg, rgba(14,118,132,.08) 1px, transparent 1px), linear-gradient(rgba(14,118,132,.08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
    overflow: hidden;
    position: relative;
}

    .open-d-w-1::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: rgba(21,154,163,.08);
        top: -160px;
        left: -160px;
        pointer-events: none;
    }

    .open-d-w-1::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        border-radius: 50%;
        background: rgba(13,82,98,.06);
        right: -180px;
        bottom: -180px;
        pointer-events: none;
    }

    .open-d-w-1 .open-container {
        max-width: 100%;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    .open-d-w-1 .open-hero {
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        border-radius: 30px;
        padding: 48px;
        color: #fff;
        margin-bottom: 34px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 24px 55px rgba(11,82,100,.18);
    }

        .open-d-w-1 .open-hero::before {
            content: "";
            position: absolute;
            right: -110px;
            top: -110px;
            width: 310px;
            height: 310px;
            background: rgba(255,255,255,.14);
            border-radius: 50%;
        }

        .open-d-w-1 .open-hero::after {
            content: "";
            position: absolute;
            right: 160px;
            bottom: 38px;
            width: 86px;
            height: 86px;
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 24px;
            transform: rotate(18deg);
        }

    .open-d-w-1 .open-badge {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        background: rgba(255,255,255,.16);
        color: #fff;
        border: 1px solid rgba(255,255,255,.24);
        padding: 10px 16px;
        border-radius: 50px;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .open-d-w-1 .open-hero h1 {
        font-size: 48px;
        line-height: 1.12;
        font-weight: 500;
        margin-bottom: 14px;
        position: relative;
        z-index: 2;
    }

    .open-d-w-1 .open-breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        list-style: none;
        position: relative;
        z-index: 2;
    }

        .open-d-w-1 .open-breadcrumb li,
        .open-d-w-1 .open-breadcrumb a {
            color: rgba(255,255,255,.9);
            font-size: 16px;
            text-decoration: none;
            font-weight: 500;
        }

    .open-d-w-1 .open-intro {
        background: rgba(255,255,255,.95);
        border: 1px solid #d1e7ed;
        border-radius: 19px;
        padding: 30px;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        margin-bottom: 28px;
        display: grid;
        grid-template-columns: 82px 1fr;
        gap: 22px;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }

        .open-d-w-1 .open-intro::after {
            content: "";
            position: absolute;
            width: 190px;
            height: 190px;
            right: -85px;
            bottom: -85px;
            border-radius: 50%;
            background: rgba(21,154,163,.07);
        }

    .open-d-w-1 .open-intro-icon {
        width: 82px;
        height: 82px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 34px;
        box-shadow: 0 14px 28px rgba(21,154,163,.22);
        position: relative;
        z-index: 2;
    }

    .open-d-w-1 .open-intro h2 {
        color: #073f54;
        font-size: 23px;
        line-height: 1.2;
        font-weight: 500;
        margin-bottom: 4px;
        position: relative;
        z-index: 2;
    }

    .open-d-w-1 .open-intro p {
        color: #5d7180;
        font-size: 17px;
        line-height: 1.5;
        position: relative;
        z-index: 2;
        margin-bottom: 0;
    }

    .open-d-w-1 .open-points {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        margin-bottom: 34px;
    }

    .open-d-w-1 .open-point {
        background: rgba(255,255,255,.95);
        border: 1px solid #d1e7ed;
        border-radius: 15px;
        padding: 22px;
        box-shadow: 0 14px 34px rgba(11,82,100,.07);
        display: flex;
        gap: 15px;
        align-items: flex-start;
        transition: 0.3s ease;
    }

        .open-d-w-1 .open-point:hover {
            transform: translateY(-5px);
            border-color: #9dd9e2;
            box-shadow: 0 22px 45px rgba(11,82,100,.12);
        }

        .open-d-w-1 .open-point i {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #e9f8f9;
            color: #087489;
            display: grid;
            place-items: center;
            font-size: 24px;
            flex-shrink: 0;
            border: dashed 1px #15999bc2;
        }

        .open-d-w-1 .open-point h3 {
            color: #073f54;
            font-size: 18px;
            line-height: 1.35;
            font-weight: 500;
            margin-bottom: 6px;
        }

        .open-d-w-1 .open-point p {
            color: #5d7180;
            font-size: 16px;
            line-height: 1.3;
            font-weight: 500;
            margin-bottom: 0;
        }

    .open-d-w-1 .open-section-head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 22px;
        margin-bottom: 24px;
    }

    .open-d-w-1 .open-title-small {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #087489;
        background: #e9f8f9;
        border: 1px solid #cce8ec;
        padding: 8px 13px;
        border-radius: 50px;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .open-d-w-1 .open-section-head h2 {
        color: #073f54;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 500;
    }

    .open-d-w-1 .open-section-head p {
        color: #5d7180;
        font-size: 16px;
        line-height: 1.7;
        max-width: 560px;
    }

    .open-d-w-1 .open-doc-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .open-d-w-1 .open-doc-card {
        background: rgba(255,255,255,.96);
        border: 1px solid #d1e7ed;
        border-radius: 15px;
        overflow: hidden;
        box-shadow: 0 18px 45px rgba(11,82,100,.08);
        position: relative;
        transition: 0.35s ease;
    }

        .open-d-w-1 .open-doc-card:hover {
            transform: translateY(-7px);
            box-shadow: 0 26px 60px rgba(11,82,100,.14);
            border-color: #9dd9e2;
        }

    .open-d-w-1 .open-doc-visual {
        min-height: 190px;
        background: linear-gradient(135deg, #e9f8f9, #ffffff);
        border-bottom: 1px solid #dbeaf0;
        display: grid;
        place-items: center;
        position: relative;
        overflow: hidden;
    }

        .open-d-w-1 .open-doc-visual::before {
            content: "";
            position: absolute;
            width: 180px;
            height: 180px;
            border-radius: 50%;
            background: rgba(21,154,163,.08);
            right: -70px;
            top: -70px;
        }

        .open-d-w-1 .open-doc-visual::after {
            content: "";
            position: absolute;
            width: 86px;
            height: 86px;
            border: 1px dashed rgba(21,154,163,.4);
            border-radius: 24px;
            left: 24px;
            bottom: 22px;
            transform: rotate(15deg);
        }

    .open-d-w-1 .open-doc-icon {
        width: 96px;
        height: 116px;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #dbeaf0;
        box-shadow: 0 18px 36px rgba(11,82,100,.10);
        display: grid;
        place-items: center;
        color: #087489;
        font-size: 42px;
        position: relative;
        z-index: 2;
    }

        .open-d-w-1 .open-doc-icon span {
            position: absolute;
            right: -10px;
            bottom: -10px;
            width: 38px;
            height: 38px;
            border-radius: 13px;
            background: linear-gradient(135deg, #0d5262, #19a4a9);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 15px;
            font-weight: 500;
        }

    .open-d-w-1 .open-doc-body {
        padding: 19px;
    }

        .open-d-w-1 .open-doc-body h3 {
            color: #073f54;
            font-size: 19px;
            line-height: 1.35;
            font-weight: 500;
            margin-bottom: 14px;
            min-height: 60px;
        }

    .open-d-w-1 .open-download-label {
        display: flex;
        align-items: center;
        gap: 9px;
        color: #5d7180;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 14px;
    }

        .open-d-w-1 .open-download-label i {
            color: #159aa3;
        }

    .open-d-w-1 .open-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .open-d-w-1 .open-btn {
        min-height: 48px;
        border-radius: 9px;
        text-decoration: none;
        border: 1px solid #cce8ec;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        font-size: 15px;
        font-weight: 500;
        transition: 0.3s;
    }

        .open-d-w-1 .open-btn.ar {
            background: #e9f8f9;
            color: #087489;
        }

        .open-d-w-1 .open-btn.en {
            background: linear-gradient(135deg, #0d5262, #19a4a9);
            color: #fff;
            border-color: transparent;
            box-shadow: 0 12px 24px rgba(21,154,163,.18);
        }

        .open-d-w-1 .open-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 14px 28px rgba(11,82,100,.14);
        }

    .open-d-w-1 .open-footer-note {
        margin-top: 30px;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        border-radius: 26px;
        padding: 30px;
        color: #fff;
        box-shadow: 0 22px 50px rgba(11,82,100,.18);
        display: grid;
        grid-template-columns: 62px 1fr;
        gap: 18px;
        align-items: flex-start;
        position: relative;
        overflow: hidden;
    }

        .open-d-w-1 .open-footer-note::after {
            content: "";
            position: absolute;
            width: 210px;
            height: 210px;
            right: -90px;
            bottom: -90px;
            border-radius: 50%;
            background: rgba(255,255,255,.14);
        }

        .open-d-w-1 .open-footer-note i {
            width: 62px;
            height: 62px;
            border-radius: 18px;
            background: rgba(255,255,255,.16);
            color: #fff;
            display: grid;
            place-items: center;
            font-size: 26px;
            position: relative;
            z-index: 2;
        }

        .open-d-w-1 .open-footer-note h3 {
            font-size: 24px;
            font-weight: 500;
            margin-bottom: 8px;
            position: relative;
            z-index: 2;
        }

        .open-d-w-1 .open-footer-note p {
            color: rgba(255,255,255,.92);
            font-size: 16px;
            line-height: 1.8;
            position: relative;
            z-index: 2;
        }

@media (max-width: 1150px) {
    .open-d-w-1 .open-doc-grid,
    .open-d-w-1 .open-points {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .open-d-w-1 {
        padding: 36px 14px;
    }

        .open-d-w-1 .open-hero {
            padding: 36px 24px;
            border-radius: 24px;
        }

            .open-d-w-1 .open-hero h1 {
                font-size: 36px;
            }

        .open-d-w-1 .open-intro {
            grid-template-columns: 1fr;
            padding: 24px;
        }

            .open-d-w-1 .open-intro h2 {
                font-size: 25px;
            }

        .open-d-w-1 .open-section-head {
            flex-direction: column;
            align-items: flex-start;
        }

            .open-d-w-1 .open-section-head h2 {
                font-size: 28px;
            }

        .open-d-w-1 .open-doc-grid,
        .open-d-w-1 .open-points {
            grid-template-columns: 1fr;
        }

        .open-d-w-1 .open-doc-body h3 {
            min-height: auto;
        }

        .open-d-w-1 .open-footer-note {
            grid-template-columns: 1fr;
            padding: 24px;
        }
}

@media (max-width: 480px) {
    .open-d-w-1 .open-hero h1 {
        font-size: 30px;
    }

    .open-d-w-1 .open-doc-card {
        border-radius: 22px;
    }

    .open-d-w-1 .open-doc-body {
        padding: 22px;
    }

    .open-d-w-1 .open-actions {
        grid-template-columns: 1fr;
    }

    .open-d-w-1 .open-point {
        flex-direction: column;
    }
}



.pb-50 {
    padding-bottom: 50px;
}


.pt-80 {
    padding-top: 80px
}

.pb-0 {
    padding-bottom: 0
}


#mainNav {
    display: none; /* Initially hide the menu */
    /* Other styles */
}

    #mainNav.active {
        display: block; /* Show the menu when the 'active' class is added */
    }



@media only screen and (max-width: 991px) {
    .container {
        max-width: 100%;
    }

    body {
        padding: 0;
    }

    .thmb-wrap {
        padding: 0px 0 0px 0;
    }

    .our-services-gold {
        padding: 0px 0;
        background-size: 100% auto;
    }

    .section-title h2 {
        font-size: 20px;
    }

    .section-row {
        margin-bottom: 00px;
    }

        .section-row .section-title {
            margin-bottom: 0;
            text-align: center;
        }

    .section-title p {
        margin-top: 20px;
        margin-bottom: 0;
        font-size: 16px;
        line-height: 24px;
        letter-spacing: 0;
        font-weight: 500;
    }

    .about-us-item {
        margin-bottom: 0
    }

    .about-us {
        padding: 0px 0;
    }

    .feature-item-gold {
        padding: 20px;
        gap: 83px;
    }


    .feature-item-gold {
        height: calc(100% - 14px);
    }

    .our-features-gold {
        padding: 20px 0 0;
    }




    .cnt-bx {
        margin-bottom: 0px;
    }

        .cnt-bx p {
            color: #fff;
            font-size: 13px;
        }

    .how-it-work {
        padding: 0px 0 0;
    }

    .our-blog {
        padding: 20px 0 0px;
    }

    .float-btn {
        padding: 13px 10px;
    }

    .p-chatbot {
        right: 55px;
        bottom: 70px;
    }

    .feature-item-gold {
        padding: 20px;
        gap: 10px;
    }

    .section-title-content {
        margin-top: 0;
    }

    .section-btn {
        float: left;
    }

    .section-row .section-title {
        margin-bottom: 0;
        text-align: left;
    }

    .section-content-btn {
        float: none;
        text-align: left;
    }

        .section-content-btn .section-btn {
            margin-top: 5px;
            margin-bottom: 10px;
        }



    .section-row .section-title.section-title-center {
        margin-bottom: 0;
    }


    .p-tabs .tab-menu {
        float: left;
        margin-top: 15px;
    }


        .p-tabs .tab-menu li {
            padding: 10px 20px 10px 20px;
        }

    .pt-80 {
        padding-top: 20px
    }


    .about-us-item-list {
        display: flex;
        flex-wrap: wrap;
    }

    .about-us-item-content {
        width: 100%;
    }

        .about-us-item-content p {
            margin: 3px 0 0;
            font-size: 15px;
            line-height: 19px;
        }

    .about-us-body, .about-us-btn {
        margin-top: 15px;
    }

    .wdth {
        width: 364px;
        height: 500px;
    }

    .post-item {
        min-height: 300px;
        margin-bottom: 15px;
    }

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

    body {
        font-size: 16px;
    }

    .iso-wrap img {
        width: 65px;
    }

    .stry-srv-w .stry-btn {
        min-height: 44px;
        font-size: 16px;
    }

    .stry-srv-w .stry-card {
        height: 250px;
    }

    .stry-srv-w .stry-title {
        font-size: 15px;
    }

    .abt-re-new .abt-hero {
        padding: 20px 15px;
        min-height: auto;
        border-radius: 22px;
    }
}


@media (max-width: 480px) {
    .stry-srv-w {
        padding: 0;
    }
}














/* =========================
   MAIN WRAPPER
========================= */

.nw-wrp-mnu {
    width: 100%;
    background: #dfe9e9;
    border-bottom: 1px solid #d4dddd;
    position: relative;
    z-index: 9999;
}

    /* =========================
   NAVBAR
========================= */

    .nw-wrp-mnu .nw-nav {
        max-width: 1400px;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 20px;
    }

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

.nw-left {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nw-logo-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #0d5468;
}

/* =========================
   DESKTOP MENU
========================= */

.nw-menu {
    display: flex;
    align-items: center;
    list-style: none;
    gap: 34px;
}

    .nw-menu li {
        position: relative;
    }

        .nw-menu li a {
            text-decoration: none;
            color: #0d5468;
            font-size: 16px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
            transition: .3s;
        }

            .nw-menu li a:hover {
                color: #000;
            }

/* =========================
   DROPDOWN
========================= */

.nw-dropdown {
    position: absolute;
    top: 45px;
    left: 0;
    background: #fff;
    min-width: 230px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: .3s;
    padding: 12px 0;
}

    .nw-dropdown li {
        list-style: none;
    }

        .nw-dropdown li a {
            padding: 12px 20px;
            display: block;
            font-size: 15px;
        }

.nw-menu li:hover .nw-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================
   RIGHT ICONS
========================= */

.nw-icons {
    display: flex;
    align-items: center;
    gap: 18px;
}

    .nw-icons svg {
        width: 25px;
        height: 25px;
        stroke: #0d5468;
        cursor: pointer;
    }

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

.nw-mobile-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
}

    .nw-mobile-btn span {
        width: 28px;
        height: 3px;
        background: #0d5468;
        display: block;
        margin: 5px 0;
        border-radius: 10px;
    }

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

.nw-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 320px;
    height: 100vh;
    background: #fff;
    z-index: 99999;
    transition: .4s ease;
    overflow-y: auto;
    box-shadow: -10px 0 30px rgba(0,0,0,0.1);
    padding: 30px 25px;
}

    .nw-mobile-menu.active {
        right: 0;
        z-index: 10000000000;
    }

.nw-mobile-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 9px;
}

.nw-close {
    font-size: 32px;
    cursor: pointer;
    color: #0d5468;
    background-color: #dcf3f8;
    width: 35px;
    height: 35px;
    text-align: center;
    padding-top: 8px;
    border-radius: 50%;
    border: dashed 1px #83b6c4;
}

.nw-mobile-links {
    list-style: none;
    padding-left: 0;
}

    .nw-mobile-links li {
        border-bottom: 1px solid #eee;
    }

        .nw-mobile-links li a {
            text-decoration: none;
            color: #0d5468;
            font-size: 16px;
            font-weight: 500;
            padding: 16px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

/* MOBILE DROPDOWN */

.nw-mobile-dropdown {
    display: none;
    padding-bottom: 15px;
}

    .nw-mobile-dropdown a {
        padding: 10px 0 10px 15px !important;
        font-size: 14px !important;
        color: #5d7075 !important;
    }

.nw-mobile-item.active .nw-mobile-dropdown {
    display: block;
}

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

.nw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    opacity: 0;
    visibility: hidden;
    transition: .3s;
    z-index: 9999;
}

    .nw-overlay.active {
        opacity: 1;
        visibility: visible;
    }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:991px) {

    .nw-menu,
    .nw-icons {
        display: none;
    }

    .nw-mobile-btn {
        display: block;
    }

    .nw-left {
        gap: 16px;
    }
}





















.h-d-wrp {
    padding: 0;
    position: relative;
}

/* Hero Section */
.hero {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

    .hero h1 {
        font-size: clamp(36px, 5vw, 62px);
        color: #0d4358;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 16px;
    }

        .hero h1 span {
            color: #0d9187;
        }

    .hero p {
        color: #657f89;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 30px;
    }

.cta-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

    .cta-buttons a {
        display: inline-block;
        padding: 16px 28px;
        border-radius: 24px;
        background: linear-gradient(90deg, #11b7b8, #0d9187);
        color: #fff;
        font-weight: 500;
        text-align: center;
        text-decoration: none;
        font-size: 16px;
        transition: 0.3s ease;
    }

        .cta-buttons a:hover {
            background: linear-gradient(90deg, #079ca1, #11b7b8);
        }

        .cta-buttons a.secondary {
            background: #f0f8f8;
            color: #079ca1;
            border: 2px solid #079ca1;
        }

            .cta-buttons a.secondary:hover {
                background: #eef9f7;
            }

/* Category Selection */
.category-selection {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 0;
}

.category-card {
    background: #fff;
    border-radius: 20px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(18, 56, 74, 0.06);
    transition: 0.3s ease;
    cursor: pointer;
    background: #f7fbfc;
    border: 1px solid #d7e0e3;
    border-radius: 9px;
}

    .category-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 50px rgba(18, 56, 74, 0.12);
    }

    .category-card .icon {
        font-size: 40px;
        margin-bottom: 20px;
        color: #079ca1;
        width: 80px;
        height: 80px;
        background-color: #fff;
        padding: 30px 0;
        margin-bottom: 15px;
        display: inline-block;
        border-radius: 999px;
        border: dashed 2px #15999b6b;
    }

    .category-card h3 {
        color: #0d4358;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .category-card p {
        color: #657f89;
        font-size: 14px;
        line-height: 1.7;
    }

    .category-card input[type="checkbox"] {
        display: none;
    }

        .category-card input[type="checkbox"]:checked + label {
            background-color: #12a89d;
            color: #fff;
            background: linear-gradient(135deg, #116c7a, #1fa7ad);
        }

    .category-card label {
        display: block;
        padding: 15px;
        background-color: #eef9f7;
        color: #079ca1;
        border-radius: 8px;
        font-size: 18px;
        cursor: pointer;
        transition: 0.3s ease;
        background: #fff;
        border: 1px solid #a4b9c0;
        margin-top: 15px;
    }

/* Upload Section */
.upload-section {
    display: none;
    margin-top: 40px;
    background: #fff;
}

    .upload-section.active {
        display: block;
    }

.upload-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    margin-bottom: 20px;
    box-shadow: 0 6px 20px rgba(18, 56, 74, 0.06);
    transition: all 0.3s ease;
    border: 1px solid #d7e0e3;
}

    .upload-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 40px rgba(18, 56, 74, 0.12);
    }

    .upload-card h3 {
        font-size: 18px;
        color: #0d4358;
        margin-bottom: 4px;
    }

    .upload-card p {
        color: #657f89;
        font-size: 14px;
        margin-bottom: 20px;
    }

    .upload-card input[type="file"] {
        display: block;
        margin: 20px auto 0;
        padding: 10px;
        border: 2px solid #eef9f7;
        border-radius: 8px;
        color: #15999b;
        background-color: #eef9f7;
        font-size: 14px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        border: solid 1px #15999b91;
        width: 100%;
    }

        .upload-card input[type="file"]:hover {
            background-color: #15999b;
            color: #fff;
        }

/* Additional Fields */
.additional-fields {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.additional-field {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: 100%;
    max-width: 280px;
    box-shadow: 0 6px 20px rgba(18, 56, 74, 0.06);
}

    .additional-field label {
        font-size: 16px;
        color: #0d4358;
        display: block;
        margin-bottom: 8px;
    }

    .additional-field input,
    .additional-field select {
        width: 100%;
        padding: 10px;
        border-radius: 12px;
        border: 1px solid #e1eeeb;
        font-size: 14px;
        color: #657f89;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .category-selection {
        grid-template-columns: repeat(2, 1fr);
    }

    .upload-card {
        margin-bottom: 30px;
    }
}


.aplos-s {
    display: block;
    grid-template-columns: repeat(1, 1fr);
    gap: 0;
}

/* Additional Fields */
.additional-fields {
    display: grid;
    margin-top: 30px;
    grid-template-columns: repeat(3, 1fr);
    gap: 13px;
}

.additional-field {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    box-shadow: 0 10px 40px rgba(18, 56, 74, 0.06);
    border: solid 1px #9bbdbd63;
}

    .additional-field label {
        font-size: 16px;
        color: #0d4358;
        display: block;
        margin-bottom: 8px;
    }

    .additional-field input,
    .additional-field select {
        width: 100%;
        padding: 10px;
        border-radius: 10px;
        border: 1px solid #e1eeeb;
        font-size: 15px;
        color: #535a5c;
        border: 1.5px solid #c8c8c8;
        background: #fff;
        border-radius: 5px;
    }

/* Confirmation Section */
.confirmation-screen {
    margin-top: 80px;
    background: #f0f8f8;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(18, 56, 74, 0.06);
}

    .confirmation-screen h3 {
        color: #0d4358;
        font-size: 22px;
        font-weight: 500;
        margin-bottom: 20px;
    }

    .confirmation-screen p {
        color: #657f89;
        font-size: 16px;
        line-height: 1.7;
        margin-bottom: 20px;
    }

/* Responsive Design */
@media (max-width: 1024px) {
    .category-selection {
        grid-template-columns: repeat(2, 1fr);
    }

    .upload-section {
        margin-top: 40px;
    }

    .pickup-details {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .category-selection {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
    }

        .cta-buttons a {
            width: 100%;
            text-align: center;
        }
}




.h-d-wrp .upload-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: #fff;
    border-radius: 0;
    box-shadow: none;
}

.h-d-wrp .upload-card {
    text-align: center;
    padding: 30px;
    /*! background: #f9fafa; */
    border-radius: 12px;
}

    .h-d-wrp .upload-card h3 {
        font-size: 20px;
        color: #0d4358;
        margin-bottom: 6px;
    }

    .h-d-wrp .upload-card p {
        color: #657f89;
        margin-bottom: 20px;
    }

/* Drag & Drop Zone */
.h-d-wrp .drop-zone {
    background-color: #f7fbfc;
    border: 2px dashed #15999b85;
    border-radius: 12px;
    padding: 40px 20px;
    text-align: center;
    cursor: pointer;
    margin-top: 20px;
    transition: 0.3s ease;
}

    .h-d-wrp .drop-zone:hover {
        background-color: #ffffff;
        border-color: #079ca1;
    }

    .h-d-wrp .drop-zone p {
        font-size: 16px;
        color: #657f89;
    }

/* Image Preview Section */
.h-d-wrp #image-preview {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
}

    .h-d-wrp #image-preview img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

/* File Input (Hidden) */
.h-d-wrp #fileInput {
    display: none;
}

/* Mobile-Friendly */
@media (max-width: 640px) {
    .h-d-wrp .upload-card {
        padding: 15px;
    }

    .h-d-wrp .drop-zone {
        padding: 11px 13px 13px;
    }
}

.h-d-wrp .upload-section {
    display: block;
}


.h-d-wrp #fileInput {
    display: block;
}


.category-selection {
    margin-bottom: 30px;
}




.upload-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(18, 56, 74, 0.08);
}

.upload-card {
    text-align: center;
    padding: 30px;
    background: #f9fafa;
    border-radius: 12px;
}

    .upload-card h3 {
        font-size: 22px;
        color: #0d4358;
        margin-bottom: 15px;
    }

    .upload-card p {
        color: #657f89;
        margin-bottom: 20px;
    }

/* Camera Button */
.camera-btn {
    background-color: #079ca1;
    color: white;
    padding: 15px 25px;
    font-size: 18px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

    .camera-btn:hover {
        background-color: #12a89d;
    }

/* File Input (Hidden) */
#cameraInput {
    display: none;
}

/* Preview Area */
#image-preview {
    margin-top: 20px;
    text-align: center;
}

    #image-preview img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }





.lb-b {
    width: 100%
}


    .lb-b label {
        font-size: 16px;
        color: #0d4358;
        margin-bottom: 8px;
        width: 100%;
    }







.kid-submit {
    margin-top: 5px;
}




.pickup-section {
    padding-right: 30px !important;
    max-width: 100%;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(18, 56, 74, 0.08);
}

.pickup-card {
    padding: 30px;
    background: #f9fafa;
    border-radius: 12px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    width: 100%;
    max-width: 100%;
    margin-top: 0;
    /*! box-shadow: 0 6px 20px rgba(18, 56, 74, 0.06); */
    transition: all 0.3s ease;
    border: 1px solid #d7e0e3;
}

    .pickup-card h3 {
        font-size: 21px;
        color: #0d4358;
        margin-bottom: 3px;
    }

    .pickup-card p {
        color: #657f89;
        margin-bottom: 20px;
        font-size: 20px;
    }

/* Input fields */
.input-field {
    width: 100%;
    padding: 12px 20px;
    font-size: 17px;
    border-radius: 10px;
    border: 1px solid #e1eeeb;
    margin-bottom: 20px;
    background-color: #f9fafa;
    color: #4a4f51;
    border: 1.5px solid #c8c8c8;
    background: #fff;
}

    .input-field:focus {
        border-color: #079ca1;
        outline: none;
    }

/* Date & Time Slot Picker */
.picker-container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 0;
}

.time-slot {
    width: 100%;
    padding: 12px 20px;
    border-radius: 7px;
    border: 1px solid #e1eeeb;
    font-size: 17px;
    background-color: #f9fafa;
    color: #657f89;
    height: 53px;
    border: 1.5px solid #c8c8c8;
    background: #fff;
}

/* Contact Number */
.contact-number {
    width: 100%;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #e1eeeb;
    font-size: 16px;
    margin-bottom: 20px;
    background-color: #f9fafa;
    color: #657f89;
    border: 1.5px solid #c8c8c8;
    background: #fff;
}

    .contact-number:focus {
        border-color: #079ca1;
        outline: none;
    }

/* Confirm Button */
.btn {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #079ca1;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    .btn:hover {
        background-color: #12a89d;
    }

/* Mobile-Friendly */
@media (max-width: 640px) {
    .picker-container {
        flex-direction: column;
    }

    .time-slot {
        width: 100%;
        margin-bottom: 20px;
    }
}









/* Modal Overlay */
.k-d-w-pop-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Confirmation Modal */
.k-d-w-pop {
    background: #fff;
    padding: 30px;
    border-radius: 20px;
    max-width: 900px;
    width: 100%;
    text-align: center;
    box-shadow: 0 10px 30px rgba(18, 56, 74, 0.08);
    animation: fadeIn 0.3s ease-out;
}

/* Fade In Animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Close Button */
.close-btn {
    background: transparent;
    border: none;
    font-size: 24px;
    color: #079ca1;
    cursor: pointer;
    margin-top: 20px;
    transition: color 0.3s;
}

    .close-btn:hover {
        color: #12a89d;
    }

/* Donation Reference */
.donation-reference {
    font-weight: 500;
    color: #079ca1;
    font-size: 18px;
    margin-bottom: 15px;
}

/* Summary Items */
.summary-item {
    margin-bottom: 15px;
    font-size: 16px;
}

    .summary-item span {
        font-weight: 500;
    }

/* Uploaded Images */
.uploaded-images {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

    .uploaded-images img {
        max-width: 100px;
        max-height: 100px;
        border-radius: 8px;
        object-fit: cover;
    }

/* Button Styling */
.btn {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #079ca1;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

    .btn:hover {
        background-color: #12a89d;
    }

/* Submit Button */
.submit-btn {
    padding: 15px 30px;
    font-size: 18px;
    background-color: #079ca1;
    color: white;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
    color: rgb(255, 255, 255);
    box-shadow: rgba(13, 111, 104, 0.24) 0px 16px 36px;
}

    .submit-btn:hover {
        background-color: #12a89d;
    }

    .submit-btn i {
        margin-left: 10px;
    }














.donation-options {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, 2fr);
}

.donation-option {
    background-color: white;
    border-radius: 15px;
    padding: 17px 30px;
    width: 100%;
    text-align: center;
    box-shadow: none;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border: solid #e0e0e0 2px;
}

    .donation-option:hover {
        transform: translateY(-5px);
    }

    .donation-option.selected {
        background-color: #fff;
        color: white;
        border: solid 2px #15999b;
    }

    .donation-option i {
        font-size: 16px;
        color: #079ca1;
        margin-bottom: 0;
        width: 18px;
        height: 12px;
        padding: 0;
    }

    .donation-option.selected i {
        color: white;
    }

    .donation-option .checkmark {
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: #079ca1;
        border-radius: 50%;
        padding: 3px;
        font-size: 18px;
        color: white;
        display: none;
    }

    .donation-option.selected .checkmark {
        display: block;
    }

    .donation-option p {
        font-weight: 500;
        color: #114c5c;
        margin-bottom: 0;
    }

    .donation-option .description {
        font-size: 14px;
        color: #555;
    }



.h-d-wrp h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

.h-d-wrp {
    margin-bottom: 30px;
}

.sdm-s {
    margin-bottom: 15px;
    background-color: #e5f6fa70;
    display: inline-block;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: dashed 1px #16808bc4;
    padding: 14px;
}





















.quk-dnt .left-panel,
.quk-dnt .right-panel {
    background: #ffffff;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}

.quk-dnt .logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 45px;
}

.quk-dnt .logo-box {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: linear-gradient(135deg, #0d5b72, #d5a84d);
}

.quk-dnt .logo h4 {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.quk-dnt .hero-title {
    font-size: 68px;
    line-height: 1;
    font-weight: 500;
    color: #083344;
    margin-bottom: 20px;
}

.quk-dnt .hero-subtitle {
    font-size: 24px;
    color: #64748b;
    margin-bottom: 28px;
}

.quk-dnt .tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 16px 22px;
    border-radius: 18px;
    background: #f8fafc;
    color: #334155;
    margin-bottom: 35px;
    font-size: 15px;
}

.quk-dnt .hero-image {
    width: 100%;
    height: 350px;
    border-radius: 24px;
    background: url('https://images.unsplash.com/photo-1488521787991-ed7bbaae773c?q=80&w=1400&auto=format&fit=crop') center/cover;
    margin-bottom: 28px;
}

.quk-dnt .stats-box {
    background: linear-gradient(135deg, #169bac5e, #0a4d5bab);
    /*! border-radius: 17px; */
    padding: 30px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 28px;
    color: white;
}

.quk-dnt .stat {
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.2);
}

    .quk-dnt .stat:last-child {
        border-right: none;
    }

    .quk-dnt .stat h2 {
        font-size: 31px;
        margin-bottom: 0px;
        color: #fff;
    }

    .quk-dnt .stat p {
        font-size: 15px;
        opacity: 0.85;
        margin-bottom: 0;
    }

.quk-dnt .support-box {
    padding: 26px;
    border-radius: 22px;
    background: #f8fafc;
    display: flex;
    align-items: center;
    gap: 18px;
}

.quk-dnt .support-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.quk-dnt .support-box h4 {
    font-size: 22px;
    margin-bottom: 6px;
    color: #0f172a;
}

.quk-dnt .support-box p {
    color: #64748b;
    line-height: 1.6;
}

.quk-dnt .top-right {
    display: flex;
    justify-content: flex-end;
    gap: 30px;
    margin-bottom: 30px;
    color: #334155;
    font-size: 14px;
}

.quk-dnt .quick-title {
    font-size: 30px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #083344;
}

.quk-dnt .section-title {
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 18px;
    color: #114c5c;
    margin-top: 15px;
}

.quk-dnt .amount-grid,
.quk-dnt .category-grid,
.quk-dnt .payment-grid {
    display: grid;
    gap: 16px;
    margin-bottom: 15px;
}

.quk-dnt .amount-grid {
    grid-template-columns: repeat(5, 1fr);
}

.quk-dnt .category-grid {
    grid-template-columns: repeat(3, 1fr);
}

.quk-dnt .payment-grid {
    grid-template-columns: repeat(6, 1fr);
}

.quk-dnt .card-option {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 14px 11px;
    text-align: left;
    font-weight: 500;
    transition: 0.3s ease;
    cursor: pointer;
    background: white;
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 10px;
    align-items: anchor-center;
    align-items: center;
}

.quk-dnt .amount-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: auto;
}

    .quk-dnt .amount-card span {
        font-size: 14px;
        font-weight: 500;
        opacity: 0.7;
        margin-bottom: -5px;
        letter-spacing: 1px;
    }

    .quk-dnt .amount-card strong {
        font-size: 20px;
        font-weight: 500;
    }

    .quk-dnt .amount-card.active::after {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 24px;
        height: 24px;
        background: white;
        color: #114c5c;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 500;
        background-image: url(../images/img/tick-s.svg);
        background-size: cover;
        background-repeat: no-repeat;
        width: 18px;
        height: 18px;
    }

.quk-dnt .payment-card {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    min-height: 95px;
}

    .quk-dnt .payment-card .payment-logo {
        font-size: 28px;
        font-weight: 500;
    }

    .quk-dnt .payment-card small {
        font-size: 12px;
        color: #64748b;
        margin-top: 0;
    }

.quk-dnt .card-option:hover {
    transform: translateY(-3px);
    border-color: #15999b;
}

.card-option.active {
    background: #15999b;
    color: white;
    border-color: #15999b;
}

.quk-dnt .card-option small {
    display: block;
    font-size: 13px;
    margin-top: 2px;
    opacity: 0.75;
    font-weight: 500;
}

.quk-dnt .custom-input {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 17px;
    outline: none;
    margin-bottom: 18px;
    background-color: #fff;
}

.quk-dnt .select-box {
    width: 100%;
    border: 1px solid #15999b3b;
    border-radius: 10px;
    padding: 13px 20px;
    font-size: 17px;
    outline: none;
    margin-bottom: 18px;
    background-color: #15999b12;
}

.quk-dnt .secure-note {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #15999b17;
    border-radius: 9px;
    padding: 18px;
    margin-top: 15px;
    margin-bottom: 20px;
    color: #475569;
    font-size: 15px;
}

.quk-dnt .donate-btn {
    width: 100%;
    background: linear-gradient(135deg, #0d6679, #17a0b1);
    color: white;
    border: none;
    border-radius: 11px;
    padding: 22px;
    font-size: 22px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s ease;
}

    .quk-dnt .donate-btn:hover {
        transform: translateY(-2px);
        opacity: 0.95;
    }

.quk-dnt.footer-features {
    max-width: 1450px;
    margin: 25px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.quk-dnt .feature-card {
    background: white;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

    .quk-dnt .feature-card h5 {
        font-size: 18px;
        margin-bottom: 6px;
    }

    .quk-dnt .feature-card p {
        font-size: 14px;
        color: #64748b;
        line-height: 1.5;
    }

.quk-stlbn {
    display: flex;
    gap: 20px
}

.quk-dnt .dwn-w h4 {
    color: #fff
}


.quk-dnt .pay-otn .card-option.active {
    background: #fff;
    color: white;
    border-color: #15999b;
}

.quk-dnt .pay-otn .card-option small {
    display: block;
    font-size: 13px;
    margin-top: -2px;
    opacity: 10;
    font-weight: 500;
    text-align: center;
    line-height: 14px;
}

.quk-dnt .pay-otn .payment-card {
    gap: 8px;
    min-height: 80px;
}

.quk-dnt .pay-otn .card-option {
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0px 14px;
}

.quk-dnt .pay-otn .payment-card .payment-logo {
    font-size: 28px;
    font-weight: 500;
    width: 50px;
}



.quk-dnt .apply-info__left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(4, 56, 74, 0.52), rgba(22, 156, 173, 0.39));
    z-index: 0;
}


.quk-dnt .apply-info__hero h1 {
    margin-bottom: 0;
}

.apply-info__left {
    background: linear-gradient(135deg, rgba(7, 84, 103, 0.01), rgba(23, 164, 181, 0)), url("../images/img/ssa.jpg");
    background-size: cover;
}

@media(max-width: 1200px) {
    .quk-dnt .container {
        grid-template-columns: 1fr;
    }

    .quk-dnt .hero-title {
        font-size: 52px;
    }
}

@media(max-width: 768px) {

    .quk-dnt .left-panel,
    .quk-dnt .right-panel {
        padding: 24px;
    }

    .quk-dnt .hero-title {
        font-size: 42px;
    }

    .quk-dnt .amount-grid,
    .quk-dnt .category-grid,
    .quk-dnt .payment-grid,
    .quk-dnt .footer-features,
    .quk-dnt .stats-box {
        border-radius: 15px;
        padding: 20px 0;
        margin-bottom: 0px;
    }

    .quk-dnt .stat {
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,0.2);
        padding-bottom: 0;
    }

        .quk-dnt .stat:last-child {
            border-bottom: none;
        }

    .quk-dnt .top-right {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}





















.pay-afrer-wrap {
    max-width: 100%px;
    margin: auto;
    padding: 50px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

/* Left Column */
.success-left {
    flex: 2;
    background: #fff;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    border: solid 1px #f1f1f1;
}

    .success-left h1 {
        font-size: 2rem;
        margin-bottom: 5px;
    }

    .success-left p {
        font-size: 1rem;
        margin-bottom: 15px;
        color: #5b6770;
    }

    .success-left .icon-circle {
        width: 65px;
        height: 65px;
        background: #15999b;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
        color: #fff;
        margin: auto;
    }

.amount-row {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin: 20px 0;
}

.amount-box {
    flex: 1;
    background: #edfbfc;
    border-radius: 9px;
    padding: 15px;
    text-align: center;
    min-width: 120px;
}

    .amount-box h3 {
        margin: 0;
        font-size: 0.95rem;
        color: #5b6770;
    }

    .amount-box p {
        margin: 5px 0 0;
        font-weight: 500;
        font-size: 1.1rem;
    }

.transaction-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.transaction-box {
    flex: 1;
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px;
    font-size: 0.95rem;
    text-align: center;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    background: #edfbfc;
}

    .transaction-box svg {
        width: 20px;
        height: 20px;
        color: #0f9464;
    }

    .transaction-box strong {
        font-weight: 500;
        color: #0f172a;
    }

.message-box {
    background: #e6f0ee;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottsssom: 20px;
}

    .action-buttons button {
        flex: 1;
        padding: 18px 15px;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-size: 1rem;
        font-weight: 500;
    }

    .action-buttons .primary {
        background: #0f9464;
        color: white;
        background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
        color: rgb(255, 255, 255);
        box-shadow: rgba(13, 111, 104, 0.24) 0px 16px 36px;
    }

    .action-buttons .secondary {
        background: #fff;
        border: 1px solid #15999b;
        color: #0f172a;
    }

.secure-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0f6f5;
    padding: 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}

/* Right Column */
.success-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.option-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

    .option-box h3 {
        margin-bottom: 10px;
        font-size: 1.2rem;
    }

.option-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

    .option-buttons button {
        flex: 1;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid #c7c8c8;
        background: #fff;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 20px 15px;
    }

        .option-buttons button.active {
            background: #fff;
            color: #114c5c;
            border: none;
            border: solid 2px #15999b;
        }

.impact-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.impact-stats {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.impact-stat {
    flex: 1;
    text-align: center;
    min-width: 80px;
    padding: 15px 8px;
    border: solid 1px #d4e6e6;
    border-radius: 10px;
}

    .impact-stat h4 {
        margin: 0;
        font-size: 1.2rem;
    }

    .impact-stat p {
        margin: 4px 0 0;
        font-size: 0.9rem;
        color: #5b6770;
        line-height: 17px;
    }

.impact-quote {
    font-size: 0.85rem;
    color: #5b6770;
    background: #f0f6f5;
    padding: 10px;
    border-radius: 8px;
}

.pay-afrer-wrap .icon-circle img {
    width: 33px;
}

.pay-afrer-wrap .icon-circle {
    margin-bottom: 10px
}


.pay-afrer-wrap .contnu-wrap {
    margin-top: 10px;
    padding: 17px 15px;
    border-radius: 8px;
    border: none;
    background: #0f9464;
    color: white;
    width: 100%;
    background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
    margin-top: 15px;
}

.impact-box h3 {
    margin-bottom: 10px;
    font-size: 1.2rem;
}

.action-buttons {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    flex-direction: initial;
}


/* Responsive */
@media(max-width:900px) {
    .pay-afrer-wrap {
        flex-direction: column;
    }

    .success-left, .success-right {
        width: 100%;
    }
}

.ic-b-1 {
    width: 75px;
    height: 75px;
    border-radius: 50px;
    background-color: #15999b21;
    padding: 12px;
    margin-bottom: 15px;
}

.impact-stat img {
    width: 49px;
    margin-bottom: 8px;
    background-color: #15999b1c;
    padding: 9px;
    border-radius: 50%;
}

.card-option {
}

.crd-imgs-op {
    width: 47px;
    background: #ecf7f7;
    border-radius: 50%;
    padding: 9px;
    border: dashed 1px #11b2b5;
}

.card-option.active .crd-imgs-op img { /*! filter: brightness(0) invert(1); */
}


.donation-summary {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.summary-row {
    display: flex;
    justify-content: space-between;
    background: #0e5b6a;
    padding: 18px 15px;
    border-radius: 8px;
    font-size: 0.95rem;
}

    .summary-row strong {
        color: #0f172a;
    }

.uploaded-images {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
    justify-content: flex-start;
}

    .uploaded-images img {
        width: 80px;
        height: 80px;
        object-fit: cover;
        border-radius: 8px;
        border: 1px solid #ddd;
    }

.summary-row span {
    font-size: 17px;
    color: #363636;
}









.zakat-demo-wrap {
    text-align: center;
}

.zakat-open-btn {
    background: linear-gradient(135deg, #6b4d2f, #8c6a45);
    color: #fff;
    border: none;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(107, 77, 47, 0.18);
    transition: 0.3s ease;
}

    .zakat-open-btn:hover {
        transform: translateY(-2px);
        box-shadow: 0 16px 35px rgba(107, 77, 47, 0.22);
    }

.zakat-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(19, 17, 14, 0.55);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
    z-index: 999;
}

    .zakat-popup-overlay.active {
        opacity: 1;
        visibility: visible;
    }

.zakat-popup-card {
    width: 100%;
    max-width: 560px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18);
    transform: translateY(20px) scale(0.96);
    transition: 0.3s ease;
    position: relative;
}

.zakat-popup-overlay.active .zakat-popup-card {
    transform: translateY(0) scale(1);
}

.zakat-popup-head {
    background: linear-gradient(135deg, #0e5666, #17999f);
    color: #fff;
    padding: 32px 28px 26px;
    text-align: center;
    position: relative;
}

.zakat-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    transition: 0.25s ease;
}

    .zakat-close-btn:hover {
        background: rgba(255,255,255,0.24);
        transform: rotate(90deg);
    }

.zakat-icon-box {
    width: 74px;
    height: 74px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: rgba(255,255,255,0.16);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .zakat-icon-box svg {
        width: 38px;
        height: 38px;
        stroke: #fff;
    }

.zakat-popup-head h2 {
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2;
    margin-bottom: 2px;
    color: #fff;
}

.zakat-popup-head p {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255,255,255,0.88);
    max-width: 420px;
    margin: 0 auto;
}

.zakat-popup-body {
    padding: 30px 28px 28px;
}

.zakat-field {
    margin-bottom: 18px;
}

    .zakat-field label {
        display: block;
        margin-bottom: 10px;
        font-size: 15px;
        font-weight: 500;
        color: #362c23;
    }

.zakat-input-wrap {
    position: relative;
}

.zakat-currency {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 500;
    color: #0f616f;
    pointer-events: none;
}

.zakat-input,
.zakat-result-box {
    width: 100%;
    min-height: 58px;
    border-radius: 11px;
    border: 1px solid #70707052;
    background: #fff;
    padding: 0 18px 0 56px;
    font-size: 16px;
    color: #000;
    outline: none;
    transition: 0.25s ease;
}

    .zakat-input:focus {
        border-color: #8c6a45;
        background: #fff;
        box-shadow: 0 0 0 4px rgba(140, 106, 69, 0.10);
    }

.zakat-result-box {
    display: flex;
    align-items: center;
    font-weight: 500;
    color: #6b4d2f;
    background: #fff;
}

.zakat-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.zakat-calc-btn,
.zakat-reset-btn {
    flex: 1;
    min-width: 140px;
    border: none;
    min-height: 56px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s ease;
}

.zakat-calc-btn {
    background: linear-gradient(135deg, #6b4d2f, #8f6a45);
    color: #fff;
    box-shadow: 0 12px 24px rgba(107, 77, 47, 0.18);
    transition: 0.3s;
    background: linear-gradient(135deg, #0d5262, #19a4a9);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 24px rgba(21,154,163,.18);
}

    .zakat-calc-btn:hover {
        transform: translateY(-2px);
    }

.zakat-reset-btn {
    background: #fff;
    color: #0e5c6b;
    border: 1px solid #169299;
}

    .zakat-reset-btn:hover {
        background: #efe6dd;
    }

.zakat-note {
    margin-top: 18px;
    background: #fcf8f3;
    border: 1px solid #eee3d7;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.7;
    color: #6b5b4c;
}

@media (max-width: 640px) {
    .zakat-popup-head {
        padding: 28px 20px 24px;
    }

    .zakat-popup-body {
        padding: 24px 20px 22px;
    }

    .zakat-popup-head h2 {
        font-size: 26px;
    }

    .zakat-actions {
        flex-direction: column;
    }

    .zakat-calc-btn,
    .zakat-reset-btn {
        width: 100%;
    }
}






.donation-summary .summary-row {
    background: #15969a14;
}





.pickup-location-wrap {
    width: 100%;
    margin-bottom: 20px;
}

.pickup-label {
    display: block;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 8px;
    color: #263544;
    font-size: 16px;
    color: #0d4358;
    margin-bottom: 8px;
    width: 100%;
}

    .pickup-label span {
        color: #e3342f;
    }

.pickup-input {
    height: 54px;
    border: 2px solid #0f8b8d;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 15px;
}

    .pickup-input input {
        flex: 1;
        border: 0;
        outline: 0;
        font-size: 14px;
    }

.pickup-help {
    font-size: 13px;
    color: #64748b;
    margin: 8px 0 13px;
}

.pickup-card {
    background: #fff;
    border: 1px solid #dfe6ec;
    border-radius: 8px;
    overflow: hidden;
}

.pickup-map-area {
    height: 300px;
    position: relative;
}

#pickupMap {
    width: 100%;
    height: 100%;
}

#pickupMapSearch {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 260px;
    height: 44px;
    z-index: 9;
    border: 0;
    outline: 0;
    border-radius: 7px;
    padding: 0 14px;
    font-size: 13px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.18);
}

.pickup-selected {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
    border-top: 1px solid #e5e7eb;
}

.pickup-pin {
    width: 34px;
    height: 34px;
    border: 2px solid #0f8b8d;
    color: #0f8b8d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pickup-text {
    flex: 1;
}

    .pickup-text h4 {
        margin: 0 0 6px;
        font-size: 15px;
        color: #263544;
    }

    .pickup-text p {
        margin: 0;
        font-size: 13px;
        color: #64748b;
        line-height: 1.4;
    }

#changePickupBtn {
    border: 0;
    background: transparent;
    color: #0f8b8d;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
    margin-top: 6px;
}

@media(max-width: 767px) {
    #pickupMapSearch {
        width: calc(100% - 32px);
    }

    .pickup-map-area {
        height: 340px;
    }

    .pickup-selected {
        flex-wrap: wrap;
    }

    #changePickupBtn {
        margin-left: 48px;
    }
}
















.bn-profile-wrap {
    margin-top: 35px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.bn-profile-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.bn-profile-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

    .bn-profile-head h2 {
        font-size: 34px;
        font-weight: 500;
        color: #083344;
        margin-bottom: 8px;
    }

    .bn-profile-head p {
        color: #64748b;
        font-size: 16px;
    }

/* PROFILE TOP */

.bn-profile-top {
    display: flex;
    align-items: center;
    gap: 24px;
    background: linear-gradient(135deg,#f2fbfc,#f7fdff);
    border: 1px solid #e2f2f5;
    border-radius: 30px;
    padding: 30px;
    margin-bottom: 35px;
}

.bn-profile-avatar {
    width: 120px;
    height: 120px;
    border-radius: 30px;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 52px;
    box-shadow: 0 14px 30px rgba(20,184,166,.20);
}

.bn-profile-user h3 {
    font-size: 34px;
    color: #083344;
    margin-bottom: 12px;
}

.bn-profile-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.bn-profile-tag {
    padding: 12px 20px;
    border-radius: 50px;
    background: #ecfdf3;
    color: #15803d;
    font-weight: 500;
    font-size: 14px;
}

/* SECTION */

.bn-profile-section {
    margin-bottom: 35px;
}

    .bn-profile-section:last-child {
        margin-bottom: 0;
    }

.bn-profile-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
}

.bn-profile-title-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg,#15999b21,#15999b1c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    font-size: 15px;
    border: dashed 1px;
}

.bn-profile-title h4 {
    font-size: 18px;
    color: #083344;
    font-weight: 500;
}

/* GRID */

.bn-profile-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 19px;
}

.bn-profile-card {
    background: transparent;
    border: 0;
    border-radius: 24px;
    padding: 0;
    transition: .3s;
}

    .bn-profile-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(20,184,166,.08);
    }

    .bn-profile-card span {
        display: block;
        color: #64748b;
        margin-bottom: 10px;
        font-size: 15px;
        margin-bottom: 10px;
        color: #114c5c;
        font-weight: 500;
    }

    .bn-profile-card h5 {
        color: #083344;
        font-size: 22px;
        font-weight: 500;
        line-height: 1.5;
    }


    .bn-profile-card input, .bn-profile-card select {
        height: 56px;
        width: 100%;
        min-height: 56px;
        border: 1px solid #d7eaf0;
        border-radius: 8px;
        background: #fff;
        color: #505c61;
        font-size: 17px;
        font-weight: 500;
        padding: 0 16px 0 16px;
        outline: none;
        transition: 0.3s ease;
        font-family: inherit;
        padding: 12px;
    }

/* RESPONSIVE */

@media(max-width:991px) {

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

@media(max-width:768px) {

    .bn-profile-box {
        padding: 0;
    }

    .bn-profile-top {
        flex-direction: column;
        text-align: center;
    }

    .bn-profile-grid {
        grid-template-columns: 1fr;
    }

    .bn-profile-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

        .bn-profile-head h2 {
            font-size: 28px;
        }

    .bn-profile-user h3 {
        font-size: 28px;
    }

    .bn-profile-title h4 {
        font-size: 17px;
    }

    .bn-profile-card h5 {
        font-size: 20px;
    }
}



















.pickup-page-wrap {
    max-width: 1480px;
    margin: auto;
    background: #fff;
    border: 1px solid #e9eef2;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.pickup-header {
    padding: 28px 34px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf1f4;
    gap: 20px;
}

.pickup-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #113b7a;
    font-weight: 500;
    line-height: 1.3;
}

    .pickup-logo .logo-icon {
        width: 46px;
        height: 46px;
        border: 2px dashed #113b7a;
        display: grid;
        place-items: center;
        font-size: 18px;
        border-radius: 4px;
    }

    .pickup-logo small {
        display: block;
        font-size: 13px;
        color: #113b7a;
        letter-spacing: .4px;
        margin-top: 4px;
    }

/* Timeline */
.pickup-timeline {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 520px;
}

.timeline-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #4c5f70;
    font-size: 16px;
    white-space: nowrap;
}

.timeline-number {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid #d7e0e8;
    display: grid;
    place-items: center;
    font-weight: 500;
    background: #fff;
    color: #142f43;
}

.timeline-item.active .timeline-number {
    background: #006f7c;
    color: #fff;
    border-color: #006f7c;
}

.timeline-item.active {
    color: #006f7c;
    font-weight: 500;
}

.timeline-line {
    width: 58px;
    height: 2px;
    background: #dce5eb;
}

.pickup-content {
    padding: 30px 34px;
}

.pickup-card {
    border: 1px solid #edf1f4;
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.pickup-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 42px;
    align-items: flex-start;
}

.main-title {
    font-size: 31px;
    color: #0d3044;
    margin-bottom: 8px;
    font-weight: 500;
}

.subtitle {
    color: #6a7c8d;
    font-size: 16px;
    margin-bottom: 30px;
}

label {
    display: block;
    margin-bottom: 10px;
    color: #0d3044;
    font-weight: 500;
    font-size: 16px;
}

.required {
    color: #e14b4b;
}

.field {
    width: 100%;
    height: 54px;
    border: 1.5px solid #007b83;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    color: #6f7f8c;
    background: #fff;
}

    .field i {
        color: #007b83;
        font-size: 18px;
    }

    .field input,
    .field select {
        border: none;
        outline: none;
        width: 100%;
        font-size: 15px;
        color: #4e6170;
        background: transparent;
    }

.hint {
    color: #687b89;
    margin: 10px 0 18px;
    font-size: 14px;
}

.map-box {
    border: 1px solid #e2e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #f6f8fa;
    margin-bottom: 30px;
}

.map-area {
    height: 285px;
    position: relative;
    background-size: cover;
    background-position: center;
}

    .map-area::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(242, 248, 250, 0.25);
    }

.map-search {
    position: absolute;
    top: 18px;
    left: 18px;
    background: #fff;
    width: 250px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    color: #667785;
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    z-index: 2;
    font-size: 14px;
}

.map-pin {
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: #007b83;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: 3;
    box-shadow: 0 7px 18px rgba(0, 123, 131, .35);
}

    .map-pin i {
        transform: rotate(45deg);
        font-size: 20px;
    }

.map-controls {
    position: absolute;
    right: 18px;
    top: 142px;
    z-index: 3;
    display: grid;
    gap: 8px;
}

.map-btn {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.1);
    color: #16374a;
    font-size: 17px;
}

.map-footer {
    background: #fff;
    padding: 20px 26px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

.map-footer-left {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.map-footer i {
    font-size: 27px;
    color: #007b83;
    margin-top: 4px;
}

.map-footer h4 {
    color: #16374a;
    margin-bottom: 7px;
    font-size: 16px;
}

.map-footer p {
    color: #6c7c88;
    font-size: 14px;
}

.change-location {
    color: #006f7c;
    font-weight: 500;
    font-size: 14px;
    text-decoration: underline;
    white-space: nowrap;
    cursor: pointer;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    margin-bottom: 36px;
}

    .form-row .field {
        border-color: #dfe7ec;
    }

.submit-btn {
    border: none;
    background: linear-gradient(135deg, #007b83, #005c66);
    color: #fff;
    height: 58px;
    padding: 0 34px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    box-shadow: 0 10px 18px rgba(0, 111, 124, .2);
}

    .submit-btn i {
        font-size: 19px;
    }

.summary-card,
.help-card {
    border: 1px solid #e9eef2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.035);
}

.summary-head {
    background: linear-gradient(135deg, #006f7c, #005762);
    color: #fff;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
}

    .summary-head i {
        font-size: 28px;
    }

.summary-body {
    padding: 28px 25px;
}

.summary-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    margin-bottom: 31px;
}

    .summary-item:last-child {
        margin-bottom: 0;
    }

    .summary-item i {
        color: #007b83;
        font-size: 22px;
        margin-top: 3px;
    }

    .summary-item span {
        display: block;
        color: #18384d;
        font-size: 15px;
        margin-bottom: 8px;
    }

    .summary-item strong {
        color: #112e42;
        font-size: 15px;
        line-height: 1.45;
    }

.help-card {
    margin-top: 30px;
    padding: 25px;
}

.help-title {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #17364b;
    font-weight: 500;
    font-size: 17px;
    margin-bottom: 15px;
}

    .help-title i {
        color: #007b83;
        font-size: 30px;
    }

.help-card p {
    color: #6b7b88;
    font-size: 14px;
    margin-bottom: 28px;
}

.help-divider {
    height: 1px;
    background: #e9eef2;
    margin-bottom: 25px;
}

.contact-info {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #16374a;
    font-size: 15px;
    line-height: 1.6;
}

    .contact-info i {
        color: #007b83;
        font-size: 21px;
    }

/* Mobile Timeline */
.mobile-timeline {
    display: none;
    padding: 18px;
    background: #f9fcfd;
    border-bottom: 1px solid #edf1f4;
}

    .mobile-timeline .timeline-step {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 12px;
        position: relative;
        padding-bottom: 20px;
    }

        .mobile-timeline .timeline-step:last-child {
            padding-bottom: 0;
        }

        .mobile-timeline .timeline-step::after {
            content: "";
            position: absolute;
            left: 16px;
            top: 36px;
            width: 2px;
            height: calc(100% - 30px);
            background: #dce5eb;
        }

        .mobile-timeline .timeline-step:last-child::after {
            display: none;
        }

    .mobile-timeline .circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #d7e0e8;
        display: grid;
        place-items: center;
        background: #fff;
        font-weight: 500;
        z-index: 2;
    }

    .mobile-timeline .timeline-step.active .circle {
        background: #006f7c;
        border-color: #006f7c;
        color: #fff;
    }

    .mobile-timeline h4 {
        font-size: 15px;
        color: #17364b;
        margin-bottom: 4px;
    }

    .mobile-timeline p {
        color: #687b89;
        font-size: 13px;
    }

@media (max-width: 1180px) {
    .pickup-layout {
        grid-template-columns: 1fr;
    }

    .sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .help-card {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    body {
        padding: 10px;
    }

    .pickup-header {
        padding: 22px;
    }

    .pickup-timeline {
        display: none;
    }

    .mobile-timeline {
        display: block;
    }

    .pickup-content {
        padding: 18px;
    }

    .pickup-card {
        padding: 20px;
    }

    .main-title {
        font-size: 24px;
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .sidebar {
        grid-template-columns: 1fr;
    }

    .map-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .map-search {
        width: calc(100% - 36px);
    }
}

@media (max-width: 520px) {
    .pickup-logo {
        font-size: 13px;
    }

        .pickup-logo .logo-icon {
            width: 38px;
            height: 38px;
        }

    .pickup-header {
        padding: 18px 15px;
    }

    .pickup-content {
        padding: 14px;
    }

    .pickup-card {
        padding: 16px;
    }

    .main-title {
        font-size: 22px;
    }

    .subtitle {
        font-size: 14px;
    }

    .map-area {
        height: 250px;
    }

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

    .summary-body,
    .help-card {
        padding: 22px 18px;
    }
}























.k-wraps {
    max-width: 1480px;
    margin: auto;
    background: #fff;
    border: 1px solid #e9eef2;
    border-radius: 18px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

    .k-wraps .pickup-header {
        padding: 28px 34px 22px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #edf1f4;
        gap: 20px;
    }

    .k-wraps .pickup-logo {
        display: flex;
        align-items: center;
        gap: 12px;
        color: #113b7a;
        font-weight: 500;
        line-height: 1.3;
    }

        .k-wraps .pickup-logo small {
            display: block;
            font-size: 13px;
            color: #113b7a;
            letter-spacing: 0.4px;
            margin-top: 4px;
        }

    .k-wraps .logo-icon {
        width: 46px;
        height: 46px;
        border: 2px dashed #113b7a;
        display: grid;
        place-items: center;
        font-size: 18px;
        border-radius: 4px;
    }

    .k-wraps .pickup-timeline {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 520px;
    }

    .k-wraps .timeline-item {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #4c5f70;
        font-size: 14px;
        white-space: nowrap;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .k-wraps .timeline-number {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #d7e0e8;
        display: grid;
        place-items: center;
        font-weight: 500;
        background: #fff;
        color: #142f43;
        transition: 0.3s ease;
    }

    .k-wraps .timeline-item.active {
        color: #006f7c;
        font-weight: 500;
    }

        .k-wraps .timeline-item.active .timeline-number {
            background: #006f7c;
            color: #fff;
            border-color: #006f7c;
        }

    .k-wraps .timeline-item.completed {
        color: #15999b;
        font-weight: 500;
    }

        .k-wraps .timeline-item.completed .timeline-number {
            background: #15999b;
            color: #fff;
            border-color: #15999b;
        }

    .k-wraps .timeline-line {
        width: 58px;
        height: 2px;
        background: #dce5eb;
        transition: 0.3s ease;
    }

        .k-wraps .timeline-line.completed {
            background: #15999b;
        }

    .k-wraps .mobile-timeline {
        display: none;
        padding: 18px;
        background: #f9fcfd;
        border-bottom: 1px solid #edf1f4;
    }

    .k-wraps .mobile-step {
        display: grid;
        grid-template-columns: 34px 1fr;
        gap: 12px;
        position: relative;
        padding-bottom: 20px;
        cursor: pointer;
    }

        .k-wraps .mobile-step:last-child {
            padding-bottom: 0;
        }

        .k-wraps .mobile-step::after {
            content: "";
            position: absolute;
            left: 16px;
            top: 36px;
            width: 2px;
            height: calc(100% - 30px);
            background: #dce5eb;
        }

        .k-wraps .mobile-step:last-child::after {
            display: none;
        }

        .k-wraps .mobile-step.completed::after {
            background: #0e8f78;
        }

    .k-wraps .mobile-circle {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: 1px solid #d7e0e8;
        display: grid;
        place-items: center;
        background: #fff;
        font-weight: 500;
        z-index: 2;
        transition: 0.3s ease;
    }

    .k-wraps .mobile-step.active .mobile-circle {
        background: #006f7c;
        border-color: #006f7c;
        color: #fff;
    }

    .k-wraps .mobile-step.completed .mobile-circle {
        background: #0e8f78;
        border-color: #0e8f78;
        color: #fff;
    }

    .k-wraps .mobile-step h4 {
        font-size: 15px;
        color: #17364b;
        margin-bottom: 4px;
    }

    .k-wraps .mobile-step p {
        color: #687b89;
        font-size: 13px;
    }

    .k-wraps .pickup-content {
        padding: 30px 34px;
    }

    .k-wraps .pickup-card {
        border: 0;
        border-radius: 0;
        padding: 0;
        box-shadow: none;
    }

    .k-wraps .pickup-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 42px;
        align-items: flex-start;
    }

    .k-wraps .main-title {
        font-size: 25px;
        color: #0d3044;
        margin-bottom: 0;
        font-weight: 500;
    }

    .k-wraps .subtitle {
        color: #6a7c8d;
        font-size: 15px;
        margin-bottom: 30px;
        text-transform: none;
        letter-spacing: 0;
    }

    .k-wraps label {
        display: block;
        margin-bottom: 10px;
        color: #0d3044;
        font-weight: 500;
        font-size: 16px;
    }

    .k-wraps .required {
        color: #e14b4b;
    }

    .k-wraps .field {
        width: 100%;
        height: 54px;
        border: 1.5px solid #dfe7ec;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 16px;
        color: #6f7f8c;
        background: #fff;
    }

        .k-wraps .field.focus-field {
            border-color: #007b83;
        }

        .k-wraps .field i {
            color: #007b83;
            font-size: 18px;
            flex-shrink: 0;
        }

        .k-wraps .field input,
        .k-wraps .field select,
        .k-wraps .field textarea {
            border: none;
            outline: none;
            width: 100%;
            font-size: 15px;
            color: #4e6170;
            background: transparent;
        }

        .k-wraps .field textarea {
            resize: none;
            height: 75px;
            padding-top: 2px;
        }

    .k-wraps .textarea-field {
        height: 110px;
        align-items: flex-start;
        padding-top: 15px;
    }

    .k-wraps .hint {
        color: #687b89;
        margin: 10px 0 18px;
        font-size: 14px;
    }

    .k-wraps .form-row {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 22px;
        margin-bottom: 30px;
    }

        .k-wraps .form-row.two-col {
            grid-template-columns: repeat(2, 1fr);
        }

    .k-wraps .map-box {
        border: 1px solid #e2e7eb;
        border-radius: 10px;
        overflow: hidden;
        background: #f6f8fa;
        margin-bottom: 30px;
    }

    .k-wraps .map-area {
        height: 285px;
        position: relative;
        background-size: cover;
        background-position: center;
    }

        .k-wraps .map-area::before {
            content: "";
            position: absolute;
            inset: 0;
            background: rgba(242, 248, 250, 0.25);
        }

    .k-wraps .map-search {
        position: absolute;
        top: 18px;
        left: 18px;
        background: #fff;
        width: 250px;
        height: 48px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 16px;
        color: #667785;
        box-shadow: 0 6px 18px rgba(0,0,0,.08);
        z-index: 2;
        font-size: 14px;
    }

    .k-wraps .map-pin {
        position: absolute;
        left: 50%;
        top: 47%;
        width: 44px;
        height: 44px;
        background: #007b83;
        color: #fff;
        display: grid;
        place-items: center;
        border-radius: 50% 50% 50% 0;
        transform: translate(-50%, -50%) rotate(-45deg);
        z-index: 3;
        box-shadow: 0 7px 18px rgba(0, 123, 131, .35);
    }

        .k-wraps .map-pin i {
            transform: rotate(45deg);
            color: #fff;
            font-size: 20px;
        }

    .k-wraps .map-controls {
        position: absolute;
        right: 18px;
        top: 142px;
        z-index: 3;
        display: grid;
        gap: 8px;
    }

    .k-wraps .map-btn {
        width: 42px;
        height: 42px;
        border-radius: 8px;
        background: #fff;
        display: grid;
        place-items: center;
        box-shadow: 0 6px 16px rgba(0,0,0,.1);
        color: #16374a;
        font-size: 17px;
    }

    .k-wraps .map-footer {
        background: #fff;
        padding: 20px 26px;
        display: flex;
        gap: 16px;
        align-items: center;
        justify-content: space-between;
    }

    .k-wraps .map-footer-left {
        display: flex;
        gap: 16px;
        align-items: flex-start;
    }

    .k-wraps .map-footer i {
        font-size: 27px;
        color: #007b83;
        margin-top: 4px;
    }

    .k-wraps .map-footer h4 {
        color: #16374a;
        margin-bottom: 7px;
        font-size: 16px;
    }

    .k-wraps .map-footer p {
        color: #6c7c88;
        font-size: 14px;
    }

    .k-wraps .change-location {
        color: #006f7c;
        font-weight: 500;
        font-size: 14px;
        text-decoration: underline;
        white-space: nowrap;
        cursor: pointer;
    }

    .k-wraps .step-content {
        display: none;
        animation: fadeUp 0.35s ease;
    }

        .k-wraps .step-content.active {
            display: block;
        }

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.k-wraps .step-actions {
    display: flex;
    gap: 14px;
    margin-top: 35px;
    flex-wrap: wrap;
}

.k-wraps .step-btn {
    border: none;
    height: 52px;
    padding: 0 28px;
    border-radius: 9px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.k-wraps .next-btn,
.k-wraps .submit-final-btn {
    background: linear-gradient(135deg, #007b83, #005c66);
    color: #fff;
    box-shadow: 0 10px 18px rgba(0, 111, 124, .2);
}

    .k-wraps .next-btn:hover,
    .k-wraps .submit-final-btn:hover {
        transform: translateY(-2px);
    }

.k-wraps .back-btn {
    background: #eef5f6;
    color: #005c66;
}

.k-wraps .summary-card,
.k-wraps .help-card {
    border: 1px solid #e9eef2;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.035);
}

.k-wraps .summary-head {
    background: linear-gradient(135deg, #006f7c, #005762);
    color: #fff;
    padding: 20px;
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 17px;
    font-weight: 500;
}

    .k-wraps .summary-head i {
        font-size: 28px;
        color: #fff;
    }

.k-wraps .summary-body {
    padding: 28px 25px;
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, 2fr);
}

.k-wraps .summary-item {
    display: grid;
    grid-template-columns: 34px 1fr;
    gap: 14px;
    margin-bottom: 11px;
    background-color: #f7fbfc;
    padding: 15px;
    border: solid 1px #e2e2e2;
    border-radius: 10px;
}

    .k-wraps .summary-item:last-child {
        margin-bottom: 0;
    }

    .k-wraps .summary-item i {
        color: #007b83;
        font-size: 22px;
        margin-top: 3px;
    }

    .k-wraps .summary-item span {
        display: block;
        color: #18384d;
        font-size: 15px;
        margin-bottom: 1px;
        font-weight: 500;
    }

    .k-wraps .summary-item strong {
        color: #112e42;
        font-size: 16px;
        line-height: 1.45;
        font-weight: 500;
    }

.k-wraps .help-card {
    margin-top: 30px;
    padding: 25px;
}

.k-wraps .help-title {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #17364b;
    font-weight: 500;
    font-size: 17px;
    margin-bottom: 15px;
}

    .k-wraps .help-title i {
        color: #007b83;
        font-size: 30px;
    }

.k-wraps .help-card p {
    color: #6b7b88;
    font-size: 14px;
    margin-bottom: 28px;
}

.k-wraps .help-divider {
    height: 1px;
    background: #e9eef2;
    margin-bottom: 25px;
}

.k-wraps .contact-info {
    display: flex;
    gap: 14px;
    align-items: center;
    color: #16374a;
    font-size: 15px;
    line-height: 1.6;
}

    .k-wraps .contact-info i {
        color: #007b83;
        font-size: 21px;
    }

.k-wraps .success-screen {
    display: none;
    text-align: center;
    padding: 45px 25px;
}

    .k-wraps .success-screen.active {
        display: block;
        animation: fadeUp 0.35s ease;
    }

.k-wraps .success-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #e8f8f5;
    color: #0e8f78;
    display: grid;
    place-items: center;
    font-size: 42px;
}

.k-wraps .success-screen h2 {
    color: #0d3044;
    font-size: 30px;
    margin-bottom: 12px;
}

.k-wraps .success-screen p {
    color: #6a7c8d;
    max-width: 620px;
    margin: 0 auto 25px;
    line-height: 1.7;
}

.k-wraps .success-info {
    max-width: 620px;
    margin: auto;
    background: #f8fbfc;
    border: 1px solid #e9eef2;
    border-radius: 14px;
    padding: 22px;
    text-align: left;
}

    .k-wraps .success-info div {
        display: flex;
        justify-content: space-between;
        gap: 20px;
        border-bottom: 1px solid #e5ecef;
        padding: 12px 0;
        color: #17364b;
    }

        .k-wraps .success-info div:last-child {
            border-bottom: none;
        }

    .k-wraps .success-info span {
        color: #6a7c8d;
    }

    .k-wraps .success-info strong {
        text-align: right;
    }

@media (max-width: 1180px) {
    .k-wraps .pickup-layout {
        grid-template-columns: 1fr;
    }

    .k-wraps .sidebar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .k-wraps .help-card {
        margin-top: 0;
    }
}

@media (max-width: 900px) {
    body {
        padding: 0;
    }

    .k-wraps .pickup-header {
        padding: 22px;
    }

    .k-wraps .pickup-timeline {
        display: none;
    }

    .k-wraps .mobile-timeline {
        display: block;
    }

    .k-wraps .pickup-content {
        padding: 18px;
    }

    .k-wraps .pickup-card {
        padding: 20px;
    }

    .k-wraps .main-title {
        font-size: 24px;
    }

    .k-wraps .form-row,
    .k-wraps .form-row.two-col {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .k-wraps .sidebar {
        grid-template-columns: 1fr;
    }

    .k-wraps .map-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .k-wraps .map-search {
        width: calc(100% - 36px);
    }
}

@media (max-width: 520px) {
    .k-wraps .pickup-logo {
        font-size: 13px;
    }

    .k-wraps .logo-icon {
        width: 38px;
        height: 38px;
    }

    .k-wraps .pickup-header {
        padding: 18px 15px;
    }

    .k-wraps .pickup-content {
        padding: 14px;
    }

    .k-wraps .pickup-card {
        padding: 16px;
    }

    .k-wraps .main-title {
        font-size: 19px;
    }

    .k-wraps .subtitle {
        font-size: 14px;
    }

    .k-wraps .map-area {
        height: 250px;
    }

    .k-wraps .step-actions {
        flex-direction: column;
    }

    .k-wraps .step-btn {
        width: 100%;
    }

    .k-wraps .summary-body,
    .k-wraps .help-card {
        padding: 22px 18px;
    }

    .k-wraps .success-info div {
        flex-direction: column;
        gap: 4px;
    }

    .k-wraps .success-info strong {
        text-align: left;
    }
}






.sms-dn .amount-grid {
    grid-template-columns: repeat(6, 1fr) !important;
    margin-bottom: 0;
}










.dntpopups {
    --teal: #006b73;
    --dark: #073f47;
    --light: #effafa;
    --border: #d8e1e3;
    --text: #17333b;
    --muted: #65777d;
}

    .dntpopups .open-donation-btn {
        border: none;
        background: linear-gradient(90deg, #005b64, #009ca8);
        color: #fff;
        padding: 15px 34px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        box-shadow: 0 12px 25px rgba(0, 107, 115, 0.25);
    }

    .dntpopups .donation-overlay {
        position: fixed;
        inset: 0;
        background: rgba(3, 24, 30, 0.72);
        backdrop-filter: blur(7px);
        display: none;
        align-items: center;
        justify-content: center;
        padding: 25px;
        z-index: 9999;
    }

    .dntpopups.active .donation-overlay {
        display: flex;
    }

    .dntpopups .donation-modal {
        width: min(980px, 100%);
        background: #fff;
        border-radius: 18px;
        padding: 25px 30px 20px;
        box-shadow: 0 30px 80px rgba(0,0,0,0.35);
        position: relative;
        animation: popIn 0.3s ease;
    }

@keyframes popIn {
    from {
        opacity: 0;
        transform: translateY(18px) scale(0.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.dntpopups .close-popup {
    position: absolute;
    right: 28px;
    top: 15px;
    width: 46px;
    height: 46px;
    border: 1.5px solid var(--teal);
    border-radius: 50%;
    background: #fff;
    color: var(--teal);
    font-size: 31px;
    line-height: 1;
    cursor: pointer;
    z-index: 15000;
}

.dntpopups .modal-header {
    display: grid;
    grid-template-columns: 260px 1fr 60px;
    align-items: start;
    border-bottom: 1px solid #dfe6e8;
    padding-bottom: 28px;
    gap: 20px;
}

.dntpopups .brand {
    font-weight: 500;
    color: #1a2b6f;
    line-height: 1.2;
}

.dntpopups .brand-ar {
    font-size: 20px;
    margin-bottom: 5px;
}

.dntpopups .brand-en {
    font-size: 13px;
    letter-spacing: 0.3px;
}

.dntpopups .header-title {
    text-align: left;
}

    .dntpopups .header-title h2 {
        margin: 0 0 14px;
        font-size: 22px;
        color: var(--dark);
        font-weight: 500;
    }

.dntpopups .case-no {
    display: inline-block;
    background: #edfbfc;
    padding: 8px 24px;
    border-radius: 24px;
    font-size: 20px;
    font-weight: 500;
    text-align: left;
}

    .dntpopups .case-no span {
        color: var(--teal);
        margin-left: 6px;
    }

.dntpopups .modal-body {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: 38px;
    padding-top: 32px;
}

.dntpopups .left-col {
    padding-right: 36px;
    border-right: 1px solid #e3e8ea;
}

.dntpopups .field-title {
    margin: 0 0 14px;
    color: var(--dark);
    font-size: 19px;
    font-weight: 500;
    margin-bottom: 10px;
}

.dntpopups .amount-box {
    height: 50px;
    border: 1px solid #a6ced0b8;
    border-radius: 9px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0;
}

.dntpopups .currency {
    width: 94px;
    height: 100%;
    display: grid;
    place-items: center;
    color: #525252;
    font-size: 18px;
    background: #15999b08;
}

.dntpopups .amount-box input {
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    padding: 0 22px;
    font-size: 20px;
    color: #0f2530;
}

.dntpopups .help-text {
    margin: 6px 0 42px;
    color: #5e737a;
    font-size: 16px;
}

.dntpopups .type-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.dntpopups .type-card {
    position: relative;
    min-height: 160px;
    border: 1.5px solid var(--border);
    border-radius: 9px;
    background: #fff;
    cursor: pointer;
    text-align: center;
    padding: 30px 18px 20px;
    transition: 0.25s ease;
}

    .dntpopups .type-card.active {
        border-color: var(--teal);
        box-shadow: 0 0 0 1px var(--teal);
    }

.dntpopups .radio {
    position: absolute;
    left: 26px;
    top: 34px;
    width: 20px;
    height: 20px;
    border: 1.5px solid #b8c2c5;
    border-radius: 50%;
}

.dntpopups .type-card.active .radio,
.dntpopups .method-card.active .radio {
    border-color: var(--teal);
}

    .dntpopups .type-card.active .radio::after,
    .dntpopups .method-card.active .radio::after {
        content: "";
        position: absolute;
        inset: 5px;
        background: var(--teal);
        border-radius: 50%;
    }

.dntpopups .type-icon {
    font-size: 42px;
    color: var(--teal);
    margin-bottom: 8px;
}

.dntpopups .type-name {
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 8px;
}

.dntpopups .type-desc {
    color: #4f6066;
    font-size: 18px;
}

.dntpopups .secure-box {
    margin-top: 30px;
    background: #edfbfc;
    border-radius: 8px;
    padding: 22px 25px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.dntpopups .secure-icon {
    font-size: 43px;
    color: var(--teal);
}

.dntpopups .secure-box p {
    margin: 0;
    color: #183a43;
    font-size: 17px;
    line-height: 1.45;
}

.dntpopups .user-info-section {
    margin-bottom: 22px;
}

.dntpopups .user-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
}

.dntpopups .user-info-field:first-child {
    grid-column: 1 / -1;
}

.dntpopups .user-info-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .dntpopups .user-info-field label {
        color: #24464e;
        font-size: 14px;
        font-weight: 500;
    }

    .dntpopups .user-info-field input {
        width: 100%;
        height: 46px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: #fff;
        color: #0f2530;
        font-size: 16px;
        outline: none;
        padding: 0 14px;
        transition: 0.25s ease;
    }

        .dntpopups .user-info-field input:focus {
            border-color: var(--teal);
            box-shadow: 0 0 0 1px var(--teal);
        }

        .dntpopups .user-info-field input::placeholder {
            color: #8a999d;
        }

.dntpopups .method-list {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.dntpopups .method-card {
    position: relative;
    min-height: 50px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding: 0 10px 0 45px;
    transition: 0.25s ease;
}

    .dntpopups .method-card.active {
        border-color: var(--teal);
        box-shadow: 0 0 0 1px var(--teal);
    }

    .dntpopups .method-card .radio {
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
    }

.dntpopups .method-name {
    font-size: 17px;
    flex: 1;
}

.dntpopups .logos {
    display: flex;
    align-items: center;
    gap: 13px;
    font-weight: 500;
    color: #00509d;
}

.dntpopups .mada {
    color: #2e918e;
    font-size: 15px;
}

.dntpopups .visa {
    color: #123da4;
    font-size: 19px;
}

.dntpopups .master {
    width: 41px;
    height: 25px;
    display: inline-block;
    position: relative;
}

    .dntpopups .master::before,
    .dntpopups .master::after {
        content: "";
        position: absolute;
        top: 2px;
        width: 23px;
        height: 23px;
        border-radius: 50%;
    }

    .dntpopups .master::before {
        left: 0;
        background: #eb001b;
    }

    .dntpopups .master::after {
        right: 0;
        background: #f79e1b;
        opacity: 0.9;
    }

.dntpopups .method-icon {
    color: var(--teal);
    font-size: 30px;
    font-weight: 500;
    width: 40px;
}

.dntpopups .bank-details {
    display: none;
    margin-top: 12px;
    padding: 16px 18px;
    background: #f4fbfc;
    border: 1px dashed var(--teal);
    border-radius: 9px;
    color: #24464e;
    line-height: 1.6;
}

    .dntpopups .bank-details.show {
        display: block;
    }

.dntpopups .donate-now {
    margin-top: 32px;
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(90deg, #005964, #0099a4);
    color: #fff;
    font-size: 21px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    transition: 0.25s ease;
}

    .dntpopups .donate-now:disabled {
        cursor: not-allowed;
        opacity: 0.72;
        transform: none;
    }

    .dntpopups .donate-now:hover {
        transform: translateY(-2px);
        box-shadow: 0 15px 25px rgba(0, 107, 115, 0.25);
    }

.dntpopups .donation-error {
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid #f0b8b8;
    border-radius: 8px;
    background: #fff3f3;
    color: #a33131;
    font-size: 15px;
    line-height: 1.4;
}

.dntpopups .bottom-secure {
    margin-top: 16px;
    text-align: center;
    color: #6b7477;
    font-size: 17px;
}

.dntpopups .success-screen {
    display: none;
    text-align: center;
    padding: 45px 20px 20px;
}

.dntpopups .success-icon {
    width: 88px;
    height: 88px;
    background: #e9fbf4;
    color: #0b8f6b;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    font-size: 48px;
}

.dntpopups .success-screen h3 {
    margin: 0 0 12px;
    font-size: 32px;
    color: var(--dark);
}

.dntpopups .success-screen p {
    margin: 0 0 25px;
    color: #5d7076;
    font-size: 18px;
}

.dntpopups .summary-box {
    max-width: 520px;
    margin: 0 auto 25px;
    background: #f5fbfc;
    border: 1px solid #dcebec;
    border-radius: 12px;
    padding: 20px;
    text-align: left;
}

    .dntpopups .summary-box div {
        display: flex;
        justify-content: space-between;
        padding: 8px 0;
        border-bottom: 1px solid #e1eded;
    }

        .dntpopups .summary-box div:last-child {
            border-bottom: none;
        }

    .dntpopups .summary-box strong {
        color: var(--dark);
    }

.dntpopups .done-btn {
    border: none;
    background: var(--teal);
    color: #fff;
    padding: 13px 35px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
}

.dntpopups.is-success .main-form {
    display: none;
}

.dntpopups.is-success .success-screen {
    display: block;
}


.cse-nom {
    text-align: left;
    margin-top: 0;
    margin-bottom: 15px;
    background-color: #edfbfc;
    border-radius: 5px;
    padding: 8px;
    display: table;
    border: solid 1px #8cd9da;
}

@media (max-width: 900px) {
    .dntpopups .donation-modal {
        padding: 28px 20px 20px;
        max-height: 92vh;
        overflow-y: auto;
    }

    .dntpopups .modal-header {
        grid-template-columns: 1fr;
        text-align: center;
        padding-right: 40px;
    }

    .dntpopups .header-title h2 {
        font-size: 26px;
    }

    .dntpopups .modal-body {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .dntpopups .user-info-grid {
        grid-template-columns: 1fr;
    }

    .dntpopups .left-col {
        border-right: none;
        padding-right: 0;
    }

    .dntpopups .type-grid {
        grid-template-columns: 1fr;
    }

    .dntpopups .method-card {
        padding-right: 14px;
    }

    .dntpopups .logos {
        gap: 8px;
    }

    .after-payment-layout {
        flex-direction: column;
    }
}

@media (max-width: 520px) {
    .dntpopups .donation-overlay {
        padding: 12px;
    }

    .dntpopups .donation-modal {
        border-radius: 16px;
    }

    .dntpopups .close-popup {
        right: 15px;
        top: 15px;
        width: 38px;
        height: 38px;
        font-size: 25px;
    }

    .dntpopups .header-title h2 {
        font-size: 19px;
    }

    .dntpopups .case-no {
        font-size: 16px;
    }

    .dntpopups .amount-box {
        height: 43px;
    }

    .dntpopups .currency {
        width: 72px;
        font-size: 18px;
    }

    .dntpopups .amount-box input {
        font-size: 17px;
    }

    .dntpopups .method-name {
        font-size: 16px;
    }

    .dntpopups .method-icon {
        font-size: 25px;
    }

    .dntpopups .donate-now {
        height: 45px;
        font-size: 18px;
    }
}










/* MAIN CLASS */
.reg-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .reg-page .reg-wrap {
        width: 100%;
        max-width: 950px;
        background: #ffffff;
        border-radius: 30px;
        padding: 70px 50px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.05);
        position: relative;
        overflow: hidden;
        border: solid 1px #a2a2a230;
    }

        /* decorative blur */
        .reg-page .reg-wrap::before {
            content: '';
            position: absolute;
            width: 300px;
            height: 300px;
            background: #15999b0f;
            border-radius: 50%;
            top: -120px;
            right: -120px;
        }

        .reg-page .reg-wrap::after {
            content: '';
            position: absolute;
            width: 250px;
            height: 250px;
            background: #17b26a10;
            border-radius: 50%;
            bottom: -120px;
            left: -120px;
        }

    .reg-page .top-badge {
        width: 70px;
        height: 70px;
        background: linear-gradient(135deg,#0d5668,#16859b);
        border-radius: 50%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 10px 25px rgba(13,86,104,0.25);
        margin-bottom: 14px;
    }

        .reg-page .top-badge svg {
            width: 34px;
            fill: #fff;
        }

    .reg-page h1 {
        text-align: center;
        font-size: 27px;
        color: #0d5668;
        font-weight: 500;
        margin-bottom: 0px;
    }

    .reg-page .sub-text {
        text-align: center;
        color: #6b7280;
        font-size: 17px;
        max-width: 600px;
        margin: auto;
        line-height: 1.7;
    }

    .reg-page .account-grid {
        margin-top: 55px;
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 30px;
        max-width: 520px;
        margin-inline: auto;
    }

    .reg-page .account-card {
        background: #fff;
        border: 2px solid #edf1f4;
        border-radius: 15px;
        padding: 30px 25px 15px 25px;
        text-align: center;
        cursor: pointer;
        transition: 0.35s ease;
        position: relative;
        overflow: hidden;
    }

        .reg-page .account-card:hover {
            transform: translateY(-8px);
            border-color: #0d5668;
            box-shadow: 0 20px 35px rgba(13,86,104,0.12);
        }

        .reg-page .account-card.active {
            border-color: #0d5668;
            background: linear-gradient(180deg,#ffffff 0%,#f4fbfd 100%);
            box-shadow: 0 15px 30px rgba(13,86,104,0.15);
        }

            .reg-page .account-card.active::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background: linear-gradient(90deg,#0d5668,#18a2bb);
            }

    .reg-page .icon-box {
        width: 95px;
        height: 95px;
        border-radius: 50%;
        background: #f6fafb;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        margin-bottom: 25px;
        transition: 0.3s;
        border: dashed 1px #15999b;
    }

    .reg-page .account-card:hover .icon-box {
        transform: scale(1.08);
    }

    .reg-page .icon-box img {
        width: 62px;
    }

    .reg-page .account-card h3 {
        font-size: 23px;
        color: #1f2937;
        margin-bottom: 10px;
    }

    .reg-page .account-card p {
        font-size: 14px;
        color: #6b7280;
        line-height: 1.4;
    }

    .reg-page .btn-wrap {
        margin-top: 55px;
        text-align: center;
    }

    .reg-page .create-btn {
        border: none;
        outline: none;
        background: linear-gradient(135deg,#0d5668,#16859b);
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        padding: 14px 55px;
        border-radius: 9px;
        cursor: pointer;
        transition: 0.35s;
        box-shadow: 0 15px 30px rgba(13,86,104,0.25);
    }

        .reg-page .create-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px rgba(13,86,104,0.3);
        }

        .reg-page .create-btn:disabled {
            opacity: .5;
            cursor: not-allowed;
            transform: none;
        }

/* Responsive */

@media(max-width:768px) {

    .reg-page .reg-wrap {
        padding: 15px;
        border-radius: 24px;
    }

    .reg-page h1 {
        font-size: 32px;
    }

    .reg-page .account-grid {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    .reg-page .account-card {
        padding: 30px 20px;
    }
}











/* MAIN CLASS */
.Merited-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    .Merited-wrap .register-card {
        width: 100%;
        max-width: 1100px;
        background: #ffffff;
        border-radius: 35px;
        overflow: hidden;
        box-shadow: 0 15px 50px rgba(0,0,0,0.07);
        position: relative;
    }

    /* top section */

    .Merited-wrap .top-section {
        background: linear-gradient(135deg,#8b6b47,#b18a5f);
        padding: 60px 40px 120px;
        position: relative;
        overflow: hidden;
    }

        .Merited-wrap .top-section::before {
            content: '';
            position: absolute;
            width: 320px;
            height: 320px;
            background: rgba(255,255,255,0.08);
            border-radius: 50%;
            top: -120px;
            right: -80px;
        }

        .Merited-wrap .top-section::after {
            content: '';
            position: absolute;
            width: 250px;
            height: 250px;
            background: rgba(255,255,255,0.05);
            border-radius: 50%;
            bottom: -120px;
            left: -100px;
        }

    .Merited-wrap .small-text {
        color: rgba(255,255,255,0.8);
        text-transform: uppercase;
        letter-spacing: 2px;
        font-size: 13px;
        margin-bottom: 15px;
        position: relative;
        z-index: 2;
    }

    .Merited-wrap h1 {
        color: #fff;
        font-size: 42px;
        font-weight: 500;
        margin-bottom: 18px;
        position: relative;
        z-index: 2;
    }

    .Merited-wrap .sub-text {
        color: rgba(255,255,255,0.88);
        line-height: 1.8;
        max-width: 650px;
        font-size: 16px;
        position: relative;
        z-index: 2;
    }

    /* form section */

    .Merited-wrap .form-area {
        margin-top: -70px;
        position: relative;
        z-index: 5;
        padding: 0 40px 45px;
    }

    .Merited-wrap .form-box {
        background: #fff;
        border-radius: 30px;
        padding: 45px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    }

    .Merited-wrap .form-title {
        font-size: 28px;
        color: #222;
        margin-bottom: 10px;
        font-weight: 500;
    }

    .Merited-wrap .form-desc {
        color: #6b7280;
        margin-bottom: 35px;
        line-height: 1.7;
    }

    .Merited-wrap form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .Merited-wrap .form-group {
        display: flex;
        flex-direction: column;
    }

    .Merited-wrap .full-width {
        grid-column: span 2;
    }

    .Merited-wrap label {
        font-size: 14px;
        color: #374151;
        font-weight: 500;
        margin-bottom: 10px;
    }

    .Merited-wrap .input-box {
        position: relative;
    }

    .Merited-wrap input {
        width: 100%;
        height: 58px;
        border: none;
        outline: none;
        border-radius: 18px;
        background: #f3f5f7;
        padding: 0 20px;
        font-size: 15px;
        transition: 0.3s ease;
        border: 2px solid transparent;
    }

        .Merited-wrap input:focus {
            background: #fff;
            border-color: #a78359;
            box-shadow: 0 0 0 4px rgba(167,131,89,0.12);
        }

        .Merited-wrap input::placeholder {
            color: #9ca3af;
        }

    .Merited-wrap .submit-wrap {
        grid-column: span 2;
        text-align: center;
        margin-top: 10px;
    }

    .Merited-wrap .submit-btn {
        border: none;
        outline: none;
        background: linear-gradient(135deg,#8b6b47,#b18a5f);
        color: #fff;
        padding: 18px 65px;
        border-radius: 18px;
        font-size: 17px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.35s;
        box-shadow: 0 12px 30px rgba(139,107,71,0.25);
    }

        .Merited-wrap .submit-btn:hover {
            transform: translateY(-4px);
            box-shadow: 0 18px 35px rgba(139,107,71,0.3);
        }

/* responsive */

@media(max-width:768px) {

    .Merited-wrap {
        padding: 25px 15px;
    }

        .Merited-wrap .top-section {
            padding: 40px 25px 100px;
        }

        .Merited-wrap h1 {
            font-size: 32px;
        }

        .Merited-wrap .form-area {
            padding: 0 20px 25px;
        }

        .Merited-wrap .form-box {
            padding: 30px 22px;
            border-radius: 25px;
        }

        .Merited-wrap form {
            grid-template-columns: 1fr;
        }

        .Merited-wrap .full-width {
            grid-column: span 1;
        }

        .Merited-wrap .submit-wrap {
            grid-column: span 1;
        }
}














/* MAIN CLASS */
.Merited-wrap {
    min-height: auto;
    padding: 50px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* MAIN CONTAINER */

    .Merited-wrap .register-box {
        width: 100%;
        max-width: 100%;
        background: #fff;
        border-radius: 15px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 45% 55%;
        box-shadow: 0 10px 40px rgba(0,0,0,0.08);
    }

    /* LEFT SIDE */

    .Merited-wrap .left-side {
        position: relative;
        min-height: auto;
        overflow: hidden;
    }

        .Merited-wrap .left-side img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .Merited-wrap .image-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0.05));
    }

    .Merited-wrap .secure-badge {
        position: absolute;
        top: 40px;
        left: 40px;
        z-index: 5;
        padding: 10px 18px;
        border-radius: 50px;
        backdrop-filter: blur(12px);
        background: rgba(255,255,255,0.18);
        border: 1px solid rgba(255,255,255,0.25);
        color: #fff;
        font-size: 13px;
        font-weight: 500;
    }

    .Merited-wrap .left-content {
        position: absolute;
        bottom: 45px;
        left: 40px;
        right: 40px;
        z-index: 5;
    }

        .Merited-wrap .left-content h1 {
            color: #fff;
            font-size: 30px;
            line-height: 1.2;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .Merited-wrap .left-content p {
            color: rgba(255,255,255,0.88);
            font-size: 16px;
            line-height: 1.5;
            max-width: 700px;
        }

    .Merited-wrap .info-grid {
        margin-top: 40px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 18px;
    }

    .Merited-wrap .info-card {
        padding: 15px;
        border-radius: 20px;
        backdrop-filter: blur(15px);
        background: rgba(255,255,255,0.16);
        border: 1px solid rgba(255,255,255,0.18);
    }

        .Merited-wrap .info-card h3 {
            color: #fff;
            font-size: 30px;
            margin-bottom: 8px;
        }

        .Merited-wrap .info-card p {
            font-size: 13px;
            line-height: 1.4;
        }

    /* RIGHT SIDE */

    .Merited-wrap .right-side {
        padding: 36px 50px;
        display: flex;
        align-items: center;
    }

    .Merited-wrap .form-wrapper {
        width: 100%;
    }

    .Merited-wrap .welcome-badge {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 10px 18px;
        border-radius: 50px;
        background: #e9f8f8;
        color: #13949d;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 25px;
    }

        .Merited-wrap .welcome-badge span {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #13949d;
        }

    .Merited-wrap .form-title {
        font-size: 30px;
        color: #0f172a;
        margin-bottom: 0;
        font-weight: 500;
    }

    .Merited-wrap .form-subtitle {
        color: #64748b;
        line-height: 1.8;
        margin-bottom: 20px;
        font-size: 15px;
    }

    /* FORM */

    .Merited-wrap form {
        display: flex;
        flex-direction: column;
        gap: 22px;
    }

    .Merited-wrap .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        margin-bottom: 0;
    }

    .Merited-wrap .input-group {
        display: block;
        margin-bottom: 0;
    }

        .Merited-wrap .input-group label {
            display: block;
            margin-bottom: 9px;
            color: #114c5c;
            font-size: 16px;
            font-weight: 500;
        }

    .Merited-wrap .input-box {
        position: relative;
    }

        .Merited-wrap .input-box input {
            width: 100%;
            height: 55px;
            border-radius: 10px;
            border: 1px solid #dbe5ea;
            background: #f8fbfc;
            padding: 0 20px;
            outline: none;
            font-size: 15px;
            transition: 0.3s ease;
        }

            .Merited-wrap .input-box input:focus {
                background: #fff;
                border-color: #13949d;
                box-shadow: 0 0 0 4px rgba(19,148,157,0.12);
            }

        .Merited-wrap .input-box i {
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%);
            color: #13949d;
            font-size: 18px;
        }

    /* BUTTON */

    .Merited-wrap .register-btn {
        width: 100%;
        height: 65px;
        border: none;
        border-radius: 11px;
        background: linear-gradient(135deg,#16939d,#0f6e83);
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s ease;
        margin-top: 10px;
        box-shadow: 0 15px 30px rgba(15,110,131,0.22);
    }

        .Merited-wrap .register-btn:hover {
            transform: translateY(-3px);
        }

    /* BOTTOM */

    .Merited-wrap .bottom-text {
        margin-top: 28px;
        text-align: center;
        color: #64748b;
        font-size: 14px;
    }

        .Merited-wrap .bottom-text a {
            color: #13949d;
            text-decoration: none;
            font-weight: 500;
        }

/* RESPONSIVE */

@media(max-width:1200px) {

    .Merited-wrap .register-box {
        grid-template-columns: 1fr;
    }

    .Merited-wrap .left-side {
        min-height: 650px;
    }
}

@media(max-width:768px) {

    .Merited-wrap {
        padding: 15px 0;
    }

        .Merited-wrap .right-side {
            padding: 20px 20px;
        }

        .Merited-wrap .left-content {
            left: 20px;
            right: 20px;
            bottom: 20px;
        }

        .Merited-wrap .secure-badge {
            left: 20px;
            top: 20px;
        }

        .Merited-wrap .left-content h1 {
            font-size: 20px;
            margin-bottom: 5px;
        }

        .Merited-wrap .form-title {
            font-size: 19px;
        }

        .Merited-wrap .info-grid {
            grid-template-columns: repeat(3,1fr);
            margin-top: 20px;
            display: none;
        }

        .Merited-wrap .form-row {
            grid-template-columns: 1fr;
        }
}











/* =========================
   PAYMENT TIMELINE
========================= */

.Payment-time-line-wrap {
    width: 100%;
    background: #fff;
    border-radius: 24px;
    padding: 0;
    box-shadow: none;
}

    .Payment-time-line-wrap .payment-header {
        margin-bottom: 25px;
    }

        .Payment-time-line-wrap .payment-header h2 {
            font-size: 28px;
            font-weight: 500;
            color: #111827;
            margin-bottom: 6px;
        }

        .Payment-time-line-wrap .payment-header p {
            color: #6b7280;
            font-size: 15px;
        }

    .Payment-time-line-wrap .payment-timeline {
        position: relative;
    }

        .Payment-time-line-wrap .payment-timeline::before {
            content: '';
            position: absolute;
            left: 17px;
            top: 0;
            width: 2px;
            height: 100%;
            background: #e5e7eb;
        }

    .Payment-time-line-wrap .payment-item {
        position: relative;
        display: flex;
        gap: 20px;
        margin-bottom: 25px;
    }

    .Payment-time-line-wrap .payment-icon {
        min-width: 35px;
        height: 35px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        position: relative;
        z-index: 2;
    }

    .Payment-time-line-wrap .success .payment-icon {
        background: linear-gradient(135deg,#27798f,#00afb1);
    }

    .Payment-time-line-wrap .pending .payment-icon {
        background: linear-gradient(135deg,#27798f,#00afb1);
    }

    .Payment-time-line-wrap .failed .payment-icon {
        background: linear-gradient(135deg,#27798f,#00afb1);
    }

    .Payment-time-line-wrap .payment-content {
        flex: 1;
        background: #15999b12;
        border-radius: 10px;
        padding: 18px;
        transition: 0.3s ease;
    }

        .Payment-time-line-wrap .payment-content:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.06);
        }

    .Payment-time-line-wrap .payment-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 4px;
        gap: 15px;
    }

        .Payment-time-line-wrap .payment-top h4 {
            font-size: 17px;
            color: #114c5c;
            font-weight: 500;
        }

        .Payment-time-line-wrap .payment-top span {
            font-size: 20px;
            font-weight: 500;
            color: #114c5c;
        }

    .Payment-time-line-wrap .payment-content p {
        color: #6b7280;
        font-size: 14px;
        line-height: 1.5;
        margin-bottom: 15px;
    }

    .Payment-time-line-wrap .payment-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 15px;
        flex-wrap: wrap;
    }

        .Payment-time-line-wrap .payment-bottom small {
            color: #9ca3af;
            font-size: 14px;
        }

    .Payment-time-line-wrap .status {
        padding: 7px 14px;
        border-radius: 30px;
        font-size: 12px;
        font-weight: 500;
    }

        .Payment-time-line-wrap .status.success {
            background: #dcfce7;
            color: #15803d;
        }

        .Payment-time-line-wrap .status.pending {
            background: #fef3c7;
            color: #b45309;
        }

        .Payment-time-line-wrap .status.failed {
            background: #fee2e2;
            color: #b91c1c;
        }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {

    .Payment-time-line-wrap {
        padding: 20px;
    }

        .Payment-time-line-wrap .payment-header h2 {
            font-size: 22px;
        }

        .Payment-time-line-wrap .payment-top {
            flex-direction: column;
            align-items: flex-start;
        }

        .Payment-time-line-wrap .payment-bottom {
            flex-direction: column;
            align-items: flex-start;
        }
}















/* =========================
   PAYMENT OPTION SELECT
========================= */

.paynt-opt-slct-chckout {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: -3px;
}

    .paynt-opt-slct-chckout .payment-option {
        width: 100%;
        cursor: pointer;
    }

        .paynt-opt-slct-chckout .payment-option input {
            display: none;
        }

    .paynt-opt-slct-chckout .payment-card {
        background: #fff;
        border: 2px solid #edf0f5;
        border-radius: 10px;
        padding: 2px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        transition: 0.3s ease;
        position: relative;
    }

        .paynt-opt-slct-chckout .payment-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(0,0,0,0.06);
        }

    .paynt-opt-slct-chckout .payment-left {
        display: flex;
        align-items: center;
        gap: 16px;
    }

        .paynt-opt-slct-chckout .payment-left img {
            width: 55px;
            height: 55px;
            object-fit: contain;
            background: #f8fafc;
            padding: 7px;
            border-radius: 50%;
        }

    .paynt-opt-slct-chckout .payment-text h4 {
        font-size: 17px;
        font-weight: 500;
        color: #111827;
        margin-bottom: 0;
    }

    .paynt-opt-slct-chckout .payment-text p {
        font-size: 14px;
        color: #9c9ea2;
        margin-bottom: 0;
        font-weight: 500;
    }

    .paynt-opt-slct-chckout .check-mark {
        width: 28px;
        height: 27px;
        border-radius: 50%;
        border: 2px solid #d1d5db;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        color: #fff;
        transition: 0.3s ease;
    }

    .paynt-opt-slct-chckout .payment-option input:checked + .payment-card {
        border-color: #15999b;
        background: #15999b03;
    }

        .paynt-opt-slct-chckout .payment-option input:checked + .payment-card .check-mark {
            background: #15999b;
            border-color: #15999b;
        }

        .paynt-opt-slct-chckout .payment-option input:checked + .payment-card .payment-text h4 {
            color: #15999b;
        }

/* =========================
   RESPONSIVE
========================= */

@media(max-width:768px) {

    .paynt-opt-slct-chckout .payment-card {
        padding: 16px;
    }

    .paynt-opt-slct-chckout .payment-left {
        gap: 12px;
    }

        .paynt-opt-slct-chckout .payment-left img {
            width: 48px;
            height: 48px;
        }

    .paynt-opt-slct-chckout .payment-text h4 {
        font-size: 15px;
    }

    .paynt-opt-slct-chckout .payment-text p {
        font-size: 13px;
    }
}


.paynt-opt-slct-chckout .payment-card::after {
    display: none;
}














.print-screens-wrp {
    padding: 50px 0;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}



.print-screens {
    max-width: 100%;
    margin: auto;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #dfe8ec;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    padding: 0px 0;
    width: 84%
}

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

    .print-screens .ps-header {
        padding: 30px 40px;
        border-bottom: 1px solid #dfe8ec;
    }

    .print-screens .top-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .print-screens .brand {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .print-screens .brand-logo {
        width: 65px;
        height: 65px;
        border-radius: 12px;
        background: #f3f6f8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 28px;
    }

    .print-screens .brand h4 {
        font-size: 14px;
        color: #0c3b4b;
        margin-bottom: 5px;
    }

    .print-screens .brand h2 {
        font-size: 26px;
        font-weight: 500;
        color: #083747;
    }

    .print-screens .print-btn {
        background: #083d4d;
        color: #fff;
        border: none;
        padding: 14px 24px;
        border-radius: 9px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s;
        background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
        color: rgb(255, 255, 255);
        box-shadow: rgba(13, 111, 104, 0.24) 0px 16px 36px;
    }

        .print-screens .print-btn:hover {
            background: #0d5266;
        }

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

    .print-screens .ps-body {
        padding: 40px;
    }

    .print-screens .receipt-top {
        display: flex;
        justify-content: space-between;
        gap: 30px;
        margin-bottom: 13px;
        flex-wrap: wrap;
    }

    .print-screens .receipt-title h1 {
        font-size: 26px;
        font-weight: 500;
        color: #083747;
        margin-bottom: 5px;
    }

    .print-screens .receipt-title p {
        color: #56707b;
        line-height: 1.3;
        font-size: 17px;
        margin-bottom: 0;
    }

    .print-screens .receipt-info {
        text-align: right;
    }

        .print-screens .receipt-info .info-box {
            margin-bottom: 25px;
        }

        .print-screens .receipt-info span {
            display: block;
            font-size: 17px;
            color: #708792;
            margin-bottom: 8px;
        }

        .print-screens .receipt-info strong {
            font-size: 17px;
            color: #114c5c;
            font-weight: 500;
        }

    /* =========================
INFO CARDS
========================= */

    .print-screens .info-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        border: 1px solid #bae2f1;
        border-radius: 18px;
        overflow: hidden;
        margin-bottom: 30px;
    }

    .print-screens .info-card {
        padding: 35px 25px;
        border-right: 1px solid #bae2f1;
        text-align: center;
    }

        .print-screens .info-card:last-child {
            border-right: none;
        }

    .print-screens .info-icon {
        width: 70px;
        height: 70px;
        margin: auto;
        border-radius: 50%;
        background: #f1f7f8;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        margin-bottom: 18px;
    }

    .print-screens .info-card h5 {
        color: #6f838d;
        font-size: 17px;
        margin-bottom: 5px;
        font-weight: 500;
    }

    .print-screens .info-card h3 {
        font-size: 17px;
        color: #083747;
        font-weight: 500;
    }

    /* =========================
PAYMENT BAR
========================= */

    .print-screens .payment-bar {
        border: 1px solid #bae2f1;
        border-radius: 18px;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        margin-bottom: 30px;
        overflow: hidden;
    }

    .print-screens .payment-item {
        padding: 28px;
        border-right: 1px solid #bae2f1;
    }

        .print-screens .payment-item:last-child {
            border-right: none;
        }

        .print-screens .payment-item h6 {
            font-size: 16px;
            color: #728892;
            margin-bottom: 10px;
            font-weight: 500;
        }

        .print-screens .payment-item strong {
            font-size: 17px;
            color: #083747;
        }

    .print-screens .status {
        display: inline-flex;
        align-items: center;
        gap: 1px;
        background: #e8f8f1;
        color: #159a63;
        padding: 10px 18px;
        border-radius: 7px;
        font-weight: 500;
    }

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

    .print-screens .content-grid {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 25px;
        margin-bottom: 30px;
    }

    .print-screens .box {
        border: 1px solid #bae2f1;
        border-radius: 18px;
        padding: 35px;
    }

    .print-screens .box-title {
        font-size: 22px;
        font-weight: 500;
        color: #114c5c;
        margin-bottom: 22px;
        position: relative;
        padding-bottom: -4px;
    }

        .print-screens .box-title:after {
            position:;
            left: 0;
            bottom: 0;
            width: 70px;
            height: 3px;
            background: #0c7d8d;
            border-radius: 10px;
        }

    .print-screens .box p {
        color: #5f7480;
        line-height: 1.4;
        font-size: 16px;
        margin-bottom: 0;
    }

    .print-screens .signature {
        margin-top: 30px;
        font-size: 24px;
        color: #15999b;
    }

    .print-screens .chairman {
        margin-top: 10px;
        font-size: 17px;
        font-weight: 500;
    }

    .print-screens .breakdown-row {
        display: flex;
        justify-content: space-between;
        margin-bottom: 13px;
        font-size: 18px;
        color: #425a66;
    }

    .print-screens .total-row {
        margin-top: 30px;
        padding-top: 25px;
        border-top: 1px solid #e3ebee;
        display: flex;
        justify-content: space-between;
        font-size: 20px;
        font-weight: 500;
        color: #0a887f;
    }

    /* =========================
SECURE BOX
========================= */

    .print-screens .secure-box {
        background: 1px solid #bae2f1;
        border-radius: 18px;
        padding: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        margin-bottom: 30px;
        flex-wrap: wrap;
        background-color: #15999b17;
    }

    .print-screens .secure-left {
        display: flex;
        align-items: center;
        gap: 18px;
    }

    .print-screens .shield {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
    }

    .print-screens .secure-left h3 {
        font-size: 21px;
        margin-bottom: 6px;
    }

    .print-screens .secure-left p {
        color: #607784;
        line-height: 1.4;
    }

    .print-screens .mail-text {
        text-align: right;
        color: #607784;
        line-height: 1.8;
    }

        .print-screens .mail-text strong {
            color: #083747;
        }

    /* =========================
BOTTOM INFO
========================= */

    .print-screens .bottom-grid {
        display: grid;
        grid-template-columns: 1fr 0.7fr;
        gap: 25px;
        padding: 10px 0 40px;
    }

    .print-screens .quote-box,
    .print-screens .contact-box {
        border-top: 1px solid #e3ebee;
        padding-top: 30px;
    }

        .print-screens .quote-box p {
            line-height: 1.4;
            color: #4d6671;
            margin-bottom: 22px;
        }

        .print-screens .contact-box ul {
            list-style: none;
        }

        .print-screens .contact-box li {
            margin-bottom: 16px;
            font-size: 17px;
            color: #4d6671;
        }

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

    .print-screens .footer-bar {
        background: #15999b;
        color: #fff;
        padding: 25px 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

    .print-screens .footer-actions {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
    }

    .print-screens .footer-btn {
        background: rgba(255,255,255,0.12);
        border: 1px solid rgba(255,255,255,0.15);
        color: #fff;
        padding: 12px 20px;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
    }

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px) {

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

    .print-screens .content-grid {
        grid-template-columns: 1fr;
    }

    .print-screens .bottom-grid {
        grid-template-columns: 1fr;
    }

    .print-screens .payment-bar {
        grid-template-columns: 1fr;
    }

    .print-screens .payment-item {
        border-right: none;
        border-bottom: 1px solid #e3ebee;
    }

        .print-screens .payment-item:last-child {
            border-bottom: none;
        }
}

@media(max-width:768px) {



    .print-screens .ps-header,
    .print-screens .ps-body {
        padding: 22px;
    }

    .print-screens .top-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .print-screens .receipt-title h1 {
        font-size: 34px;
    }

    .print-screens .receipt-info {
        text-align: left;
    }

    .print-screens .info-grid {
        grid-template-columns: 1fr;
    }

    .print-screens .info-card {
        border-right: none;
        border-bottom: 1px solid #e3ebee;
    }

        .print-screens .info-card:last-child {
            border-bottom: none;
        }

    .print-screens .box-title {
        font-size: 24px;
    }

    .print-screens .total-row {
        font-size: 24px;
    }

    .print-screens .footer-bar {
        flex-direction: column;
        align-items: flex-start;
    }
}


.print-screens .info-card img {
    padding: 10px;
}

.openDonation:hover {
    cursor: pointer;
}














:root {
    --primary: #15999b;
    --primary-light: #15999b17;
    --green: #15999b;
    --green-light: #15999b17;
    --orange: #15999b;
    --orange-light: #15999b17;
    --red: #15999b;
    --red-light: #15999b17;
    --text: #114c5c;
    --text-light: #64748b;
    --border: #edf0f7;
    --white: #ffffff;
    --bg: #f5f7fb;
}












/* =========================
MONTHLY GIVING SUCCESS POPUP
========================= */

.monthly-success-popup {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.monthly-success-overlay {
    position: absolute;
    inset: 0;
    background: rgba(5, 25, 35, 0.75);
    backdrop-filter: blur(5px);
}

.monthly-success-box {
    position: relative;
    width: 100%;
    max-width: 560px;
    background: #fff;
    border-radius: 15px;
    padding: 23px 23px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
    animation: popupScale 0.4s ease;
}

@keyframes popupScale {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.monthly-success-icon {
    width: 45px;
    height: 45px;
    margin: auto;
    border-radius: 50%;
    background: linear-gradient(135deg,#12b981,#0f766e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    font-weight: 500;
    margin-bottom: 18px;
    box-shadow: 0 10px 30px rgba(16,185,129,0.35);
}

.monthly-success-box h2 {
    font-size: 21px;
    color: #073b4c;
    margin-bottom: 6px;
    font-weight: 500;
}

.monthly-success-box p {
    color: #607784;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 22px;
}

.monthly-success-details {
    background: #f5fafb;
    border-radius: 15px;
    padding: 10px 19px;
    margin-bottom: 21px;
}

.monthly-detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid #dde9ed;
    gap: 20px;
}

    .monthly-detail-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

    .monthly-detail-item span {
        color: #69808b;
        font-size: 15px;
    }

    .monthly-detail-item strong {
        color: #083747;
        font-size: 17px;
    }

.monthly-success-message {
    background: #15999b17;
    color: #15999b;
    border-radius: 7px;
    padding: 14px;
    font-weight: 500;
    margin-bottom: 15px;
    font-size: 15px;
}

.monthly-success-actions {
    display: flex;
    gap: 15px;
}

.monthly-btn {
    flex: 1;
    border: none;
    padding: 16px;
    border-radius: 9px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
}

.primary-btn {
    background: #15999b;
    color: #fff;
}

    .primary-btn:hover {
        background: #0b5268;
    }

.secondary-btn {
    background: #eef5f7;
    color: #083747;
}

    .secondary-btn:hover {
        background: #ddebef;
    }

@media(max-width:576px) {

    .monthly-success-box {
        padding: 15px;
        border-radius: 15px;
    }

        .monthly-success-box h2 {
            font-size: 19px;
        }

    .monthly-success-actions {
        flex-direction: column;
    }

    .monthly-detail-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
}






/* OPEN POPUP BUTTON */

.open-monthly-popup-btn {
    background: linear-gradient(135deg,#0f766e,#083d4d);
    color: #fff;
    border: none;
    padding: 16px 28px;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0 10px 25px rgba(8,61,77,0.18);
}

    .open-monthly-popup-btn:hover {
        transform: translateY(-2px);
        background: linear-gradient(135deg,#11998e,#0b5268);
    }


.monthly-success-popup {
    display: none;
}









/* =========================
TRACK RESULT PAGE
========================= */

.track-result-page {
    background: transparent;
    min-height: 100vh;
    padding: 0;
}

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

    .track-result-page .track-result-header {
        max-width: 900px;
        margin: auto;
        text-align: center;
        margin-bottom: 35px;
    }

    .track-result-page .track-success-icon {
        width: 95px;
        height: 95px;
        margin: auto;
        border-radius: 50%;
        background: linear-gradient(135deg,#14b86f,#0d8b57);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 42px;
        font-weight: 500;
        margin-bottom: 25px;
        box-shadow: 0 12px 35px rgba(20,184,111,0.25);
    }

    .track-result-page h1 {
        font-size: 48px;
        color: #073b4c;
        margin-bottom: 18px;
        font-weight: 500;
    }

    .track-result-page .track-result-header p {
        color: #607985;
        line-height: 1.9;
        font-size: 17px;
    }

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

    .track-result-page .track-result-card {
        margin: auto;
        background: #fff;
        border-radius: 28px;
        padding: 40px;
        box-shadow: 0 12px 40px rgba(0,0,0,0.05);
        border: 1px solid #e3ecef;
    }

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

    .track-result-page .result-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        margin-bottom: 35px;
    }

    .track-result-page .small-title {
        display: block;
        color: #70848e;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .track-result-page .result-top h2 {
        font-size: 20px;
        color: #073b4c;
    }

    .track-result-page .approved-status {
        background: #eafbf3;
        color: #0ea565;
        padding: 14px 24px;
        border-radius: 40px;
        font-size: 16px;
        font-weight: 500;
    }

    /* =========================
INFO GRID
========================= */

    .track-result-page .track-info-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
        margin-bottom: 40px;
    }

    .track-result-page .track-info-box {
        background: #f7fbfc;
        padding: 25px;
        border-radius: 18px;
    }

        .track-result-page .track-info-box span {
            display: block;
            color: #6f838d;
            font-size: 14px;
            margin-bottom: 6px;
        }

        .track-result-page .track-info-box strong {
            color: #073b4c;
            font-size: 17px;
        }

    /* =========================
TIMELINE
========================= */

    .track-result-page .track-time-line-wrap h3 {
        font-size: 21px;
        color: #073b4c;
        margin-bottom: 30px;
    }

    .track-result-page .timeline-wrap {
        position: relative;
        padding-left: 45px;
    }

        .track-result-page .timeline-wrap:before {
            content: '';
            position: absolute;
            left: 13px;
            top: 0;
            width: 3px;
            height: 100%;
            background: #dce8ed;
        }

    .track-result-page .timeline-item {
        position: relative;
        padding-bottom: 35px;
    }

        .track-result-page .timeline-item:last-child {
            padding-bottom: 0;
        }

    .track-result-page .timeline-dot {
        position: absolute;
        left: -45px;
        top: 0;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        background: #d6e7ec;
        border: 5px solid #eef7fa;
    }

    .track-result-page .timeline-item.completed .timeline-dot {
        background: #15999b;
    }

    .track-result-page .timeline-item.active .timeline-dot {
        background: #f59e0b;
    }

    .track-result-page .timeline-content {
        background: #15999b0f;
        padding: 24px;
        border-radius: 18px;
        width: 100%;
    }

        .track-result-page .timeline-content h4 {
            color: #073b4c;
            font-size: 18px;
            margin-bottom: 3px;
        }

        .track-result-page .timeline-content p {
            color: #627783;
            line-height: 1.8;
            margin-bottom: 10px;
        }

        .track-result-page .timeline-content span {
            color: #0c7d8d;
            font-size: 14px;
            font-weight: 500;
        }

    /* =========================
SUPPORT BOX
========================= */

    .track-result-page .support-message-box {
        margin-top: 40px;
        background: linear-gradient(135deg,#f0fbff,#f7fdff);
        border-radius: 24px;
        padding: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
    }

        .track-result-page .support-message-box h4 {
            font-size: 20px;
            color: #073b4c;
            margin-bottom: 2px;
        }

        .track-result-page .support-message-box p {
            color: #617a86;
            line-height: 1.5;
            font-size: 14px;
        }

    .track-result-page .support-btn {
        border: none;
        background: #073b4c;
        color: #fff;
        padding: 16px 28px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        background: linear-gradient(90deg, rgb(21, 153, 155), rgb(20, 111, 135));
        color: rgb(255, 255, 255);
        box-shadow: rgba(13, 111, 104, 0.24) 0px 16px 36px;
    }

/* =========================
RESPONSIVE
========================= */

@media(max-width:992px) {

    .track-result-page .track-info-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .track-result-page {
        padding: 0;
    }

        .track-result-page h1 {
            font-size: 34px;
        }

        .track-result-page .track-result-card {
            padding: 15px;
            border-radius: 15px;
        }

        .track-result-page .track-info-grid {
            grid-template-columns: 1fr;
        }

        .track-result-page .result-top h2 {
            font-size: 18px;
        }

        .track-result-page .track-time-line-wrap h3 {
            font-size: 18px;
        }

        .track-result-page .support-message-box {
            flex-direction: column;
            align-items: flex-start;
            padding: 15px;
        }
}








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

.benifi-dash-bord {
    display: flex;
    gap: 24px;
    background: #edf4f7;
    padding: 0;
    min-height: 100vh;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

    /* =========================================
SIDEBAR
========================================= */

    .benifi-dash-bord .beni-sidebar {
        height: fit-content;
        min-height: calc(100vh - 58px);
        border-radius: 20px;
        padding: 19px;
        background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
        color: #fff;
        box-shadow: 0 24px 65px rgba(15, 117, 136, 0.22);
        position: sticky;
        top: 26px;
        overflow: hidden;
        width: 320px;
    }

    .benifi-dash-bord .beni-profile {
        text-align: center;
        margin-bottom: 35px;
    }

    .benifi-dash-bord .beni-profile-img {
        width: 110px;
        height: 110px;
        border-radius: 20px;
        overflow: hidden;
        margin: 0 0 15px 0;
        border: 4px solid rgba(255,255,255,0.15);
    }

        .benifi-dash-bord .beni-profile-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .benifi-dash-bord .beni-profile h2 {
        font-size: 20px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 0;
        color: #fff;
    }

    .benifi-dash-bord .beni-profile p {
        margin-bottom: 18px;
        color: rgba(255,255,255,0.82);
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .benifi-dash-bord .verify-tag {
        background: #12c357ad;
        padding: 6px 10px;
        border-radius: 40px;
        font-size: 14px;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: #fff;
        font-weight: 500;
    }

        .benifi-dash-bord .verify-tag.unverified {
            background: #ffeac8;
        }

    .benifi-dash-bord .beneficiary-uae-pass-verify {
        width: 100%;
        margin-top: 12px;
        border: 1px solid rgba(255,255,255,0.72);
        border-radius: 10px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        background: #fff;
        color: #07566a;
        font-size: 14px;
        font-weight: 700;
        cursor: pointer;
        transition: transform .2s ease, box-shadow .2s ease;
    }

        .benifi-dash-bord .beneficiary-uae-pass-verify:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0,0,0,0.14);
        }

        .benifi-dash-bord .beneficiary-uae-pass-verify:disabled {
            cursor: wait;
            opacity: .72;
        }

        .benifi-dash-bord .beneficiary-uae-pass-verify img {
            width: 28px;
            height: 28px;
            object-fit: contain;
        }

    .benifi-dash-bord .beni-menu-wrap {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .benifi-dash-bord .beni-menu {
        border: none;
        height: 51px;
        border-radius: 9px;
        background: rgba(255,255,255,0.08);
        color: #fff;
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 16px;
        transition: 0.3s;
        text-align: left;
        font-weight: 500;
    }

        .benifi-dash-bord .beni-menu:hover {
            background: rgba(255,255,255,0.16);
        }

        .benifi-dash-bord .beni-menu.active {
            background: #0a5964;
        }

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

    .benifi-dash-bord .beni-main {
        flex: 1;
    }

    .benifi-dash-bord .beni-tab-content {
        display: none;
    }

        .benifi-dash-bord .beni-tab-content.active {
            display: block;
            background: #ffffffb0;
            border: 0;
            border-radius: 20px;
            padding: 0;
            min-height: calc(100vh - 52px);
            box-shadow: 0 24px 65px rgba(13, 64, 84, 0.08);
            backdrop-filter: blur(16px);
            overflow: hidden;
            height: 100%;
            padding: 30px;
            background: rgba(255,255,255,0.72);
            border: 1px solid rgba(202, 230, 236, 0.95);
            border-radius: 20px;
            padding: 25px;
            min-height: calc(100vh - 100%);
            box-shadow: 0 24px 65px rgba(13, 64, 84, 0.08);
            backdrop-filter: blur(16px);
            overflow: hidden;
            height: 100%;
        }

    .benifi-dash-bord .page-title {
        margin-bottom: 25px;
    }

        .benifi-dash-bord .page-title h1 {
            font-size: clamp(27px, 1.5vw, 24px);
            line-height: 1.08;
            letter-spacing: 0;
            color: #023b53;
            font-weight: 500;
            margin-bottom: 3px;
        }

        .benifi-dash-bord .page-title p {
            color: #7b8c94;
            font-weight: 500;
        }

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

    .benifi-dash-bord .stats-grid {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 20px;
    }

    .benifi-dash-bord .stat-card {
        background: #fff;
        border-radius: 24px;
        padding: 30px;
        text-align: center;
        text-align: left;
        background: rgba(255,255,255,0.9);
        border: 1px solid #d6eaf0;
        border-radius: 16px;
        padding: 28px;
        min-height: 205px;
        box-shadow: 0 18px 45px rgba(13, 64, 84, 0.06);
        transition: 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
        padding-bottom: 0;
    }

        .benifi-dash-bord .stat-card i {
            font-size: 34px;
            color: #1493a2;
            margin-bottom: 18px;
            width: 70px;
            height: 70px;
            border-radius: 999px;
            background: #e7f8fb;
            color: #1198aa;
            display: grid;
            place-items: center;
            font-size: 32px;
            margin-bottom: 15px;
            border: dashed 1px #15999bc7;
        }

        .benifi-dash-bord .stat-card h2 {
            font-size: 27px;
            color: #073b4c;
            margin-bottom: 2px;
        }

        .benifi-dash-bord .stat-card p {
            color: #6d838d;
        }

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

    .benifi-dash-bord .content-card {
        background: #fff;
        border-radius: 28px;
        padding: 30px;
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0;
        min-height: calc(100vh - 100%);
        box-shadow: none;
        overflow: hidden;
        height: 100%;
    }

    .benifi-dash-bord .card-title {
        margin-bottom: 28px;
    }

        .benifi-dash-bord .card-title h2 {
            font-size: clamp(27px, 1.5vw, 24px);
            line-height: 1.08;
            letter-spacing: 0;
            color: #023b53;
            font-weight: 500;
            margin-bottom: 3px;
        }

    /* =========================================
FORM
========================================= */

    .benifi-dash-bord .form-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 22px;
        background: transparent;
    }

    .benifi-dash-bord .form-group {
        display: flex;
        flex-direction: column;
    }

        .benifi-dash-bord .form-group label {
            margin-bottom: 10px;
            color: #114c5c;
            font-weight: 500;
        }

        .benifi-dash-bord .form-group input,
        .benifi-dash-bord .form-group textarea,
        .benifi-dash-bord .form-group select {
            height: 56px;
            width: 100%;
            min-height: 56px;
            border: 1px solid #d7eaf0;
            border-radius: 8px;
            background: #fff;
            color: #505c61;
            font-size: 17px;
            font-weight: 500;
            padding: 0 16px 0 16px;
            outline: none;
            transition: 0.3s ease;
            font-family: inherit;
            padding: 12px;
        }

        .benifi-dash-bord .form-group textarea {
            height: 130px;
            padding-top: 18px;
            resize: none;
        }

    .benifi-dash-bord .full-width {
        grid-column: 1/-1;
    }

    .benifi-dash-bord .submit-btn {
        height: 51px;
        margin-top: 25px;
        min-height: 46px;
        padding: 0 40px;
        border-radius: 6px;
        border: 0;
        background: linear-gradient(135deg, #0d6879, #1ca3af);
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        transition: 0.3s ease;
        box-shadow: 0 14px 28px rgba(24,167,184,0.22);
    }

    /* =========================================
DOCUMENTS
========================================= */

    .benifi-dash-bord .doc-grid {
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: 20px;
        align-items: center;
        justify-content: center;
    }

    .benifi-dash-bord .doc-card {
        background: #f7fbfc;
        border-radius: 20px;
        padding: 30px 20px;
        text-align: center;
        text-align: center;
        background: rgba(255,255,255,0.9);
        border: 1px solid #d6eaf0;
        border-radius: 16px;
        padding-bottom: 28px;
        min-height: auto;
        box-shadow: 0 18px 45px rgba(13, 64, 84, 0.06);
        transition: 0.3s ease;
        position: relative;
        overflow: hidden;
        margin-bottom: 0;
        padding-bottom: 0;
        padding: 20px;
        text-align: center;
    }

        .benifi-dash-bord .doc-card i {
            font-size: 43px;
            color: #1493a2;
            margin-bottom: 18px;
        }

        .benifi-dash-bord .doc-card h4 {
            color: #073b4c;
            font-size: 18px;
        }

    /* =========================================
TIMELINE
========================================= */

    .benifi-dash-bord .timeline {
        position: relative;
        padding-left: 35px;
    }

        .benifi-dash-bord .timeline:before {
            content: '';
            position: absolute;
            left: 10px;
            top: 0;
            width: 3px;
            height: 100%;
            background: #dce7ec;
        }

    .benifi-dash-bord .timeline-item {
        position: relative;
        margin-bottom: 30px;
    }

    .benifi-dash-bord .dot {
        position: absolute;
        left: -34px;
        width: 21px;
        height: 20px;
        border-radius: 50%;
        background: #cfdde2;
        top: 0;
    }

    .benifi-dash-bord .timeline-item.done .dot {
        background: #0ea565;
    }

    .benifi-dash-bord .timeline-item.active .dot {
        background: #f59e0b;
    }

    .benifi-dash-bord .timeline-content-box {
        background: #15999b12;
        border-radius: 15px;
        padding: 22px;
        width: 100%;
    }

        .benifi-dash-bord .timeline-content-box h4 {
            margin-bottom: 6px;
            color: #073b4c;
            font-size: 19px;
        }

    /* =========================================
NOTIFICATION
========================================= */

    .benifi-dash-bord .notify-item {
        background: #15999b0f;
        border-radius: 15px;
        padding: 22px;
        margin-bottom: 18px;
    }

        .benifi-dash-bord .notify-item h4 {
            color: #073b4c;
            margin-bottom: 6px;
            font-size: 19px;
        }

    /* =========================================
TABLE
========================================= */

    .benifi-dash-bord .history-table {
        width: 100%;
    }

    .benifi-dash-bord .table-head,
    .benifi-dash-bord .table-row {
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 15px;
        padding: 18px;
        align-items: center;
    }

    .benifi-dash-bord .table-head {
        background: #0d6f7d;
        color: #fff;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .benifi-dash-bord .table-row {
        background: #15999b0f;
        border-radius: 10px;
        margin-bottom: 12px;
    }

    .benifi-dash-bord .badge {
        padding: 8px 14px;
        border-radius: 30px;
        font-size: 13px;
        font-weight: 500;
    }

        .benifi-dash-bord .badge.green {
            background: #e9fbf1;
            color: #0ea565;
        }

        .benifi-dash-bord .badge.orange {
            background: #fff5e2;
            color: #f59e0b;
        }

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px) {

    .benifi-dash-bord {
        flex-direction: column;
    }

        .benifi-dash-bord .beni-sidebar {
            width: 100%;
            position: relative;
            top: auto;
        }

        .benifi-dash-bord .stats-grid {
            grid-template-columns: repeat(2,1fr);
        }

        .benifi-dash-bord .doc-grid {
            grid-template-columns: repeat(2,1fr);
        }
}

@media(max-width:768px) {

    .benifi-dash-bord {
        padding: 0;
    }

        .benifi-dash-bord .stats-grid {
            grid-template-columns: 1fr;
        }

        .benifi-dash-bord .form-grid {
            grid-template-columns: 1fr;
        }

        .benifi-dash-bord .doc-grid {
            grid-template-columns: 1fr;
        }

        .benifi-dash-bord .table-head,
        .benifi-dash-bord .table-row {
            grid-template-columns: 1fr;
        }

        .benifi-dash-bord .page-title h1 {
            font-size: 32px;
        }

        .benifi-dash-bord .card-title h2 {
            font-size: 19px;
        }
}




.benifi-dash-bord .stat-card::after {
    content: "";
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: rgba(24, 167, 184, 0.08);
    right: -50px;
    bottom: -50px;
}




.benifi-dash-bord .beni-sidebar::before {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    right: -90px;
    bottom: -90px;
}


.benifi-dash-bord-wrap {
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
    padding: 50px 0;
}

    .benifi-dash-bord-wrap .green {
        background-color: #d1ffeb;
        padding: 2px 18px;
        border-radius: 999px;
        font-size: 16px;
        color: #444;
        text-align: right;
    }

    .benifi-dash-bord-wrap .orange {
        background-color: #ffe7d1;
        padding: 2px 18px;
        border-radius: 999px;
        font-size: 16px;
        color: #444;
        text-align: right;
    }


    .benifi-dash-bord-wrap .doc-card i {
        width: 70px;
        height: 70px;
        border-radius: 999px;
        background: #e7f8fb;
        color: #1198aa;
        display: grid;
        place-items: center;
        font-size: 33px;
        margin-bottom: 15px;
        border: dashed 1px #15999bc7;
        justify-content: center;
        align-items: center;
        margin: 0 auto 20px auto;
    }








.beneficiary-dashboard {
    padding: 0;
}

/* HEADER */

.beneficiary-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    gap: 20px;
}

.beneficiary-title h2 {
    font-size: 25px;
    color: #114c5c;
    font-weight: 500;
    margin-bottom: 4px;
}

.beneficiary-title p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 0;
}

.beneficiary-actions {
    display: flex;
    gap: 15px;
    align-items: center;
}

.beneficiary-action-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid #15999b40;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    font-size: 18px;
    cursor: pointer;
    box-shadow: 0 5px 18px rgba(0,0,0,.04);
}

/* MAIN GRID */

.beneficiary-main-grid {
    display: grid;
    grid-template-columns: 1fr 310px;
    gap: 15px;
}

/* LEFT CONTENT */

.beneficiary-left {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* STAT CARDS */

.beneficiary-stat-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.beneficiary-stat-card {
    background: #fff;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #e3eafb;
    box-shadow: 0 8px 30px rgba(0,0,0,.04);
    transition: .3s;
    display: flex;
    gap: 15px;
    align-items: start;
}

    .beneficiary-stat-card:hover {
        transform: translateY(-5px);
    }

.stat-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
    text-align: left;
    overflow: hidden;
    padding-bottom: 0;
    width: auto;
}

.stat-icon {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    border: dashed 1px #15999b;
}

.blue-bg {
    background: var(--primary-light);
    color: var(--primary);
}

.green-bg {
    background: var(--green-light);
    color: var(--green);
}

.orange-bg {
    background: var(--orange-light);
    color: var(--orange);
}

.red-bg {
    background: var(--red-light);
    color: var(--red);
}

.beneficiary-stat-card h3 {
    font-size: 27px;
    margin-bottom: 0px;
    color: var(--text);
}

.beneficiary-stat-card p {
    color: var(--text-light);
    font-size: 15px;
    margin-bottom: 5px;
    line-height: 19px;
}

.view-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 9px;
    color: #114c5cf2;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
}

/* TABLE */

.dashboard-card {
    background: #fff;
    border-radius: 15px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,.04);
    overflow: hidden;
}

.dashboard-card-header {
    padding: 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border);
}

    .dashboard-card-header h3 {
        font-size: 22px;
        color: var(--text);
    }

    .dashboard-card-header a {
        text-decoration: none;
        color: #15999b;
        font-weight: 500;
        font-size: 14px;
    }

.application-table-wrap {
    overflow: auto;
    padding: 0 20px;
}

.application-table {
    width: 100%;
    border-collapse: collapse;
}

    .application-table th {
        text-align: left;
        padding: 11px 2px;
        color: #64748b;
        font-size: 14px;
        font-weight: 500;
        border-bottom: 1px solid var(--border);
    }

    .application-table td {
        padding: 12px 2px;
        border-bottom: 1px solid #c4ebec;
        color: #1e293b;
        font-size: 14px;
        background-color: #15999b00;
    }

.application-id {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    font-size: 15px;
}

    .application-id i {
        color: #b1b1b1;
    }

.status-badge {
    padding: 3px 9px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
}

.status-review {
    background: #eaf2ff;
    color: #2563eb;
}

.status-approved {
    background: #ecfdf3;
    color: #16a34a;
}

.status-pending {
    background: #fff7e8;
    color: #d97706;
}

.status-rejected {
    background: #fef2f2;
    color: #dc2626;
}

/* DOCUMENTS */

.document-grid {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 14px;
    padding: 20px;
}

.document-box {
    border: 1px solid var(--border);
    border-radius: 15px;
    padding: 18px;
    transition: .3s;
    background: #fff;
}

    .document-box:hover {
        transform: translateY(-4px);
    }

.document-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: #eaf6f6;
    color: #15999b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-bottom: 20px;
    margin-bottom: 15px;
    border: dashed 1px #15999bc7;
}

.document-box h4 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #1e293b;
}

.document-box p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 18px;
    line-height: 24px;
}

.doc-status {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 50px;
    background: #ecfdf3;
    color: #16a34a;
    font-size: 12px;
    font-weight: 500;
}

/* RIGHT SIDEBAR */

.beneficiary-sidebar {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.profile-card {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,.04);
}

.profile-top {
    display: flex;
    gap: 18px;
    align-items: center;
    margin-bottom: 25px;
}

    .profile-top img {
        width: 75px;
        height: 75px;
        border-radius: 50%;
        object-fit: cover;
        object-position: top;
        background-color: #e3e3e3;
    }

    .profile-top h3 {
        font-size: 18px;
        margin-bottom: -1px;
        color: #114c5c;
    }

    .profile-top p {
        color: #64748b;
        font-size: 14px;
        margin-bottom: 0;
    }

.verify-tag {
    margin-top: 10px;
    display: inline-block;
    background: #ecfdf3;
    color: #16a34a;
    padding: 9px 14px;
    border-radius: 40px;
    font-size: 12px;
    font-weight: 500;
}

    .verify-tag.unverified {
        background: #fff7ed;
        color: #c2410c;
    }

.beneficiary-family-form {
    margin-top: 24px;
}

.family-dependents-selector {
    max-width: 360px;
    padding: 20px;
    border: 1px solid #d7e8eb;
    border-radius: 14px;
    background: #f7fbfc;
}

    .family-dependents-selector label,
    .family-member-grid label {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: #123f4d;
        font-size: 14px;
        font-weight: 700;
    }

    .family-dependents-selector select,
    .family-member-grid input,
    .family-member-grid select {
        width: 100%;
        min-height: 46px;
        border: 1px solid #cddfe3;
        border-radius: 9px;
        padding: 10px 12px;
        background: #fff;
        color: #173f4b;
        font: inherit;
        outline: none;
    }

        .family-member-grid input:focus,
        .family-member-grid select:focus,
        .family-dependents-selector select:focus {
            border-color: #0f9da7;
            box-shadow: 0 0 0 3px rgba(15,157,167,.12);
        }

        .family-member-grid input[aria-invalid="true"],
        .family-member-grid select[aria-invalid="true"],
        .aid-dependent-form-grid input[aria-invalid="true"],
        .aid-dependent-form-grid select[aria-invalid="true"] {
            border-color: #d84d4d;
            background: #fff8f8;
            box-shadow: 0 0 0 3px rgba(216,77,77,.12);
        }

.family-member-block.has-validation-error {
    border-color: rgba(216,77,77,.55);
}

.aid-dependent-form-grid .is-validation-error {
    color: #b42318;
    font-weight: 700;
}

.family-member-grid input[readonly] {
    background: #edf5f6;
    color: #52717a;
}

.family-member-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 24px;
}

.family-member-block {
    padding: 22px;
    border: 1px solid #d7e8eb;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(11,75,88,.06);
}

.family-member-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

    .family-member-heading > span {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #0f9da7;
        color: #fff;
        font-weight: 800;
    }

    .family-member-heading h4,
    .family-member-heading p {
        margin: 0;
    }

.family-member-delete {
    margin-left: auto;
    border: 1px solid #f3b7b7;
    border-radius: 8px;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #fff5f5;
    color: #b42318;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

    .family-member-delete:hover {
        background: #fee4e2;
    }

.family-member-heading p {
    margin-top: 3px;
    color: #6c838a;
    font-size: 13px;
}

.family-member-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 18px;
}

.beneficiary-family-message {
    margin-bottom: 18px;
    padding: 12px 14px;
    border-radius: 9px;
    font-weight: 600;
}

    .beneficiary-family-message.success {
        background: #eafaf0;
        color: #15733b;
    }

    .beneficiary-family-message.error {
        background: #fff0f0;
        color: #b42318;
    }

.family-details-loading {
    margin-top: 24px;
    padding: 22px;
    border-radius: 12px;
    background: #f7fbfc;
    color: #52717a;
}

.family-details-save {
    margin-top: 22px;
}

@media (max-width: 767px) {
    .family-member-grid {
        grid-template-columns: 1fr;
    }

    .family-member-block {
        padding: 16px;
    }

    .family-member-heading {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .family-member-delete {
        width: 100%;
        margin-left: 0;
        justify-content: center;
    }
}

.profile-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.profile-info-item {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    color: #475569;
    font-size: 14px;
}

    .profile-info-item i {
        color: #15999b;
        margin-top: 4px;
    }

.profile-btn {
    justify-content: center;
    text-decoration: none;
    height: 45px;
    margin-top: 25px;
    min-height: 46px;
    padding: 0 22px;
    border-radius: 6px;
    border: 0;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: 0.3s ease;
    box-shadow: 0 14px 28px rgba(24, 167, 184, 0.22);
}

/* NOTIFICATIONS */

.notification-list {
    padding: 10px 30px 30px;
}

.notification-item {
    display: flex;
    gap: 15px;
    padding: 11px 0;
    border-bottom: 1px solid #15999b4d;
}

    .notification-item:last-child {
        border-bottom: none;
    }

.notification-icon {
    width: 52px;
    height: 52px;
    min-width: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    border: dashed 1px #15999b;
}

.notification-content h5 {
    font-size: 15px;
    line-height: 19px;
    color: #1e293b;
    margin-bottom: 4px;
    font-weight: 500;
}

.notification-content p {
    color: #64748b;
    font-size: 13px;
    margin-bottom: 0;
}

/* RESPONSIVE */

@media(max-width:1200px) {

    .beneficiary-main-grid {
        grid-template-columns: 1fr;
    }

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

@media(max-width:992px) {

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

@media(max-width:768px) {

    .beneficiary-dashboard {
        padding: 18px;
    }

    .beneficiary-topbar {
        flex-direction: column;
        align-items: flex-start;
    }

    .beneficiary-stat-grid {
        grid-template-columns: 1fr;
    }

    .document-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-card-header {
        padding: 20px;
    }

    .application-table th,
    .application-table td {
        padding: 16px;
    }

    .profile-card,
    .dashboard-card {
        border-radius: 22px;
    }
}

@media(max-width:768px) {
    .beneficiary-main-grid {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .beneficiary-left {
        order: 1;
    }

    .beneficiary-sidebar {
        display: contents;
    }

        .beneficiary-sidebar .profile-card {
            order: -1;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 36px;
            border-radius: 10px !important;
            background: #fff;
            border: 1px solid #dceef2;
            box-shadow: 0 18px 45px rgba(13,64,84,0.08);
        }

        .beneficiary-sidebar .dashboard-card {
            order: 2;
        }

    .profile-top {
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 18px;
        align-items: center;
        margin-bottom: 28px;
    }

        .profile-top img {
            width: 90px;
            height: 90px;
            border-radius: 50% !important;
        }

        .profile-top h3 {
            font-size: 22px;
            line-height: 1.22;
            margin-bottom: 3px;
        }

        .profile-top p {
            font-size: 14px;
            line-height: 1.3;
            margin-bottom: 0px;
        }

        .profile-top .verify-tag {
            font-size: 14px;
            line-height: 1.15;
            padding: 5px 18px;
            border-radius: 999px !important;
            background: #58d37e;
            color: #fff;
        }

    .profile-info {
        gap: 12px;
        margin-bottom: 28px;
    }

    .profile-info-item {
        gap: 9px;
        font-size: 16px;
        line-height: 1.25;
        color: #2f4662;
    }

        .profile-info-item i {
            width: 18px;
            font-size: 18px;
            color: #15999b;
            text-align: center;
        }

    .profile-btn {
        min-height: 46px;
        width: 100%;
        justify-content: center;
        margin-top: 0;
        border-radius: 8px !important;
        font-size: 15px;
    }
}

@media(max-width:420px) {
    .beneficiary-sidebar .profile-card {
        padding: 16px 19px;
    }

    .profile-top {
        grid-template-columns: 80px 1fr;
        gap: 14px;
    }

        .profile-top img {
            width: 80px;
            height: 80px;
        }

        .profile-top h3 {
            font-size: 17px;
        }
}







.beneficiary-stat-card {
    overflow: hidden;
}



    .beneficiary-stat-card::before {
        content: "";
        position: absolute;
        width: 120px;
        height: 120px;
        border-radius: 50%;
        background: rgba(24, 167, 184, 0.08);
        right: -50px;
        bottom: -50px;
    }



.timeline-content-box p {
    margin-bottom: 0
}

.notify-itemp {
    margin-bottom: 0
}


.pro-p {
    border-radius: 50%;
    overflow: hidden;
    border: solid 3px #1895a2;
    width: 80px;
    height: 80px;
    margin-bottom: 11px;
    margin: 0 auto;
    margin-bottom: 15px;
}





.app-sts {
    background: transparent;
    border-radius: 30px;
    border: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(15,23,42,.04);
}

/* HEADER */

.app-sts-head {
    padding: 28px 30px;
    border-bottom: 1px solid #edf0f7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.app-sts-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.app-sts-title-icon {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    background: #eef4ff;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.app-sts-title h3 {
    font-size: 24px;
    color: #0f172a;
    margin-bottom: 5px;
    font-weight: 500;
}

.app-sts-title p {
    color: #64748b;
    font-size: 14px;
}

.app-sts-head-link {
    text-decoration: none;
    color: #2563eb;
    font-size: 14px;
    font-weight: 500;
}

/* BODY */

.app-sts-body {
    padding: 20px 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
    background:;
}

/* ITEM */

.app-sts-item {
    border: 1px solid #15999b36;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
    transition: .3s;
    background: #fff;
    position: relative;
    overflow: hidden;
}

    .app-sts-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 35px rgba(15,23,42,.06);
    }

    .app-sts-item::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
    }

.app-sts-confirmed::before {
    background: #22c55e;
}

.app-sts-pending::before {
    background: #f59e0b;
}

.app-sts-cancelled::before {
    background: #ef4444;
}

/* ICON */

.app-sts-icon {
    width: 65px;
    height: 65px;
    min-width: 65px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    border: dashed 1px;
}

.app-sts-confirmed .app-sts-icon {
    background: #ecfdf3;
    color: #16a34a;
}

.app-sts-pending .app-sts-icon {
    background: #fff7e8;
    color: #d97706;
}

.app-sts-cancelled .app-sts-icon {
    background: #fef2f2;
    color: #dc2626;
}

/* CONTENT */

.app-sts-content {
    width: 100%;
}

.app-sts-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 0;
}

    .app-sts-top h4 {
        font-size: 19px;
        color: #0f172a;
        margin-bottom: 2px;
        font-weight: 500;
    }

    .app-sts-top p {
        color: #64748b;
        font-size: 14px;
    }

/* BADGES */

.app-sts-badge {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: .3px;
}

.app-sts-confirmed .app-sts-badge {
    background: #ecfdf3;
    color: #16a34a;
}

.app-sts-pending .app-sts-badge {
    background: #fff7e8;
    color: #d97706;
}

.app-sts-cancelled .app-sts-badge {
    background: #fef2f2;
    color: #dc2626;
}

/* META */

.app-sts-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 0;
}

.app-sts-meta-box {
    background: #15999b1a;
    border-radius: 7px;
    padding: 13px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #475569;
    font-size: 14px;
}

    .app-sts-meta-box i {
        color: #15999b;
    }

/* FOOTER */

.app-sts-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.app-sts-doctor {
    display: flex;
    align-items: center;
    gap: 14px;
}

    .app-sts-doctor img {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        object-fit: cover;
    }

    .app-sts-doctor h5 {
        font-size: 15px;
        color: #0f172a;
        margin-bottom: 4px;
    }

    .app-sts-doctor span {
        color: #64748b;
        font-size: 13px;
    }

.app-sts-btns {
    display: flex;
    gap: 12px;
}

.app-sts-btn {
    height: 46px;
    padding: 0 22px;
    border: none;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
}

.app-sts-btn-primary {
    background: #2563eb;
    color: #fff;
}

.app-sts-btn-secondary {
    background: #eff6ff;
    color: #2563eb;
}

.app-sts-btn:hover {
    transform: translateY(-2px);
}

/* RESPONSIVE */

@media(max-width:768px) {

    .app-sts-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-sts-item {
        flex-direction: column;
    }

    .app-sts-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-sts-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .app-sts-meta {
        flex-direction: column;
    }

    .app-sts-btns {
        width: 100%;
        flex-direction: column;
    }

    .app-sts-btn {
        width: 100%;
    }
}


.aplsns {
    margin-bottom: 10px !important;
    margin-top: 15px;
}

    .aplsns p {
        margin-bottom: 0;
    }


.notify-item p {
    margin-bottom: 0
}

.notify-item p {
    font-size: 18px;
}















.applictho-trk-wrap {
    max-width: 100%;
    margin: auto;
    padding: 0;
    background: #f7fbfc;
    border-radius: 17px;
}

.trk-header h2 {
    font-size: 28px;
    color: #114c5c;
    margin-bottom: 8px;
}

.trk-header p {
    color: #6c7b88;
    font-size: 16px;
    margin-bottom: 24px;
}

.trk-search-card {
    display: block;
    gap: 15px;
    margin-bottom: 0;
    flex-wrap: wrap;
}

.trk-input-group {
    flex: 1;
    position: relative;
}

    .trk-input-group i {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #1b8d99;
    }

    .trk-input-group input {
        width: 100%;
        padding: 14px 14px 14px 40px;
        border-radius: 12px;
        border: 1px solid #d6e3e4;
        outline: none;
        font-size: 15px;
    }

.trk-btn {
    background: linear-gradient(135deg, #114c5c, #1fa3b0);
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    display:;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
}










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

/* Swiper container full width */
.m-banner {
    width: 100%;
    position: relative;
}

.banner-slider {
    position: relative;
    z-index: 10;
}

    /* Each slide full height */
    .banner-slider .swiper-slide {
        position: relative;
        height: 500px; /* desktop height */
    }

    /* Images */
    .banner-slider .banner-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

/* Mirror the banner artwork in Arabic so its visual subject appears on the left. */
html[dir="rtl"] .banner-slider .banner-images img {
    transform: scaleX(-1);
}

/* Content overlay */
.banner-slider .banner-content {
    position: absolute;
    top: 50%;
    left: auto;
    transform: translateY(-50%);
    color: #fff;
    max-width: 490px;
    z-index: 10;
    background: #e9e9e9d1;
    padding: 20px 20px;
    border-radius: 10px;
}

    /* Headline */
    .banner-slider .banner-content h2 {
        font-size: 30px;
        margin-bottom: 3px;
        line-height: 1.2;
        font-weight: 600;
    }

    /* Paragraph */
    .banner-slider .banner-content p {
        font-size: 18px;
        line-height: 1.5;
        margin-bottom: 25px;
        color: #424242;
    }

    /* Button */
    .banner-slider .banner-content button {
        padding: 15px 35px;
        font-size: 18px;
        border: none;
        cursor: pointer;
        background-color: #e74c3c;
        color: #fff;
        border-radius: 6px;
        transition: 0.3s ease;
    }

        .banner-slider .banner-content button:hover {
            background-color: #c0392b;
        }

/* Tablet */
@media (max-width: 992px) {
    .banner-slider .swiper-slide {
        height: 550px;
    }

    .banner-slider .banner-content {
        left: 7%;
        max-width: 450px;
    }

        .banner-slider .banner-content h2 {
            font-size: 40px;
        }

        .banner-slider .banner-content p {
            font-size: 20px;
        }

        .banner-slider .banner-content button {
            font-size: 16px;
            padding: 12px 28px;
        }
}

/* Mobile */
@media (max-width: 576px) {
    .banner-slider .swiper-slide {
        height: 500px;
    }

    .banner-slider .banner-content {
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        max-width: 45%;
    }

        .banner-slider .banner-content h2 {
            font-size: 22px;
        }

        .banner-slider .banner-content p {
            font-size: 15px;
            line-height: 19px;
        }

        .banner-slider .banner-content button {
            font-size: 14px;
            padding: 10px 25px;
            display: none;
        }
}

.mob-menu-show {
    display: none !important;
}














/* ===== SAME COLOR COMBINATION STYLE ===== */

.track-bn-extra {
    margin-top: 0;
    display: flex;
    gap: 30px;
    flex-direction: column;
}

.track-bn-box {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.track-bn-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

    .track-bn-head h3 {
        font-size: 22px;
        font-weight: 500;
        color: #083344;
    }

    .track-bn-head p {
        color: #64748b;
        margin-top: 6px;
    }

/* TOP CARDS */

.track-bn-cards {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.track-bn-card {
    background: #f9fcfd;
    border-radius: 15px;
    padding: 20px;
    transition: .3s;
    position: relative;
    overflow: hidden;
    border: 1px solid #e9e9e9;
}

    .track-bn-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 30px rgba(14,165,183,.08);
    }

.track-bn-card-icon {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 20px;
}

/* SAME COLORS */

.track-clr-green {
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-clr-blue {
    background: #eaf6ff;
    color: #2563eb;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-clr-orange {
    background: #fff7ed;
    color: #ea580c;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-clr-purple {
    background: #f4ebff;
    color: #7c3aed;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-bn-card span {
    display: block;
    font-size: 15px;
    color: #64748b;
    margin-bottom: 10px;
}

.track-bn-card h4 {
    font-size: 20px;
    color: #114c5c;
    margin-bottom: 8px;
    font-weight: 500;
}

.track-bn-card p {
    color: #626a6c;
    line-height: 1.3;
    margin-bottom: 0;
    font-weight: 500;
}

/* ELIGIBILITY */

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

.track-bn-eligibility-item {
    background: #f9fcfd;
    border: 1px solid #e5f0f2;
    border-radius: 28px;
    padding: 32px;
    text-align: center;
    transition: .3s;
    background: #f9fcfd;
    border-radius: 15px;
    padding: 12px;
    transition: .3s;
    position: relative;
    overflow: hidden;
    border: 1px solid #e9e9e9;
    font-size: 12px;
}

    .track-bn-eligibility-item:hover {
        transform: translateY(-3px);
    }

    .track-bn-eligibility-item i {
        width: 70px;
        height: 70px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        margin-bottom: 22px;
        font-size: 34px;
    }

.track-ok i {
    background: #ecfdf3;
    color: #16a34a;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-no i {
    background: #fef2f2;
    color: #dc2626;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-review i {
    background: #fff7ed;
    color: #d97706;
    background: #15999b12;
    color: #15999b;
    border: dashed 1px;
}

.track-bn-eligibility-item h4 {
    font-size: 20px;
    margin-bottom: 9px;
    color: #083344;
    font-weight: 500;
}

.track-bn-eligibility-item p {
    color: #626a6c;
    line-height: 1.2;
    margin-bottom: 0;
    font-weight: 500;
    font-size: 17px;
}

/* QUICK ACTION */

.track-bn-actions {
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 15px;
}

.track-bn-action-btn {
    height: 65px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    color: #fff;
    font-size: 18px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
    transition: .3s;
    box-shadow: 0 10px 25px rgba(20,184,166,.18);
    background: linear-gradient(135deg, #0d6879, #1ca3af);
}

    .track-bn-action-btn:hover {
        transform: translateY(-4px);
    }

/* ALERTS */

.track-bn-alerts {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.track-bn-alert {
    background: #fff;
    border: 1px solid #f1d6d6;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: inherit;
    gap: 15px;
}

    .track-bn-alert i {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        color: #ff7474;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 6px 20px rgba(162, 162, 162, 0.28);
        border: solid 1px #ffcaca;
    }

    .track-bn-alert h5 {
        font-size: 18px;
        color: #ff5151;
        margin-bottom: 00;
        font-weight: 500;
    }

    .track-bn-alert p {
        color: #6c6c6c;
        margin-bottom: 0;
        font-size: 16px;
    }

/* TIMELINE */

.track-bn-timeline {
    position: relative;
    padding-left: 32px;
}

    .track-bn-timeline::before {
        content: '';
        position: absolute;
        left: 7px;
        top: 0;
        width: 3px;
        height: 100%;
        background: #d8ebef;
    }

.track-bn-timeline-item {
    position: relative;
    padding-bottom: 010px;
}

.track-bn-timeline-dot {
    position: absolute;
    left: -35px;
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #15999b;
    border: 5px solid #dff8f5;
}

.track-bn-timeline-card {
    background: #f9fcfd;
    border-radius: 15px;
    padding: 17px;
    border: 1px solid #e9e9e9;
}

    .track-bn-timeline-card h4 {
        font-size: 18px;
        color: #083344;
        margin-bottom: 0px;
    }

    .track-bn-timeline-card p {
        color: #5f6e6e;
        line-height: 1.5;
        margin-bottom: 12px;
        font-size: 18px;
    }

.track-bn-time {
    color: #0f766e;
    font-weight: 500;
    font-size: 16px;
}

/* RESPONSIVE */

@media(max-width:991px) {

    .track-bn-cards,
    .track-bn-eligibility,
    .track-bn-actions {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:768px) {

    .track-bn-box {
        padding: 0;
    }

    .track-bn-cards,
    .track-bn-eligibility,
    .track-bn-actions {
        grid-template-columns: repeat(2,1fr);
    }

    .track-bn-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 15px;
    }

        .track-bn-head h3 {
            font-size: 18px;
        }

    .track-bn-card h4 {
        font-size: 19px;
    }

    .track-bn-action-btn {
        height: 50px;
        font-size: 15px;
    }

    .track-bn-alert {
        flex-direction: column;
        align-items: flex-start;
    }
}






























@media (max-width: 768px) {
    .banner-slider .banner-content {
        left: auto;
        transform: translate(-0%, -50%);
        text-align: left;
        max-width: 45%;
    }

    .banner-slider .banner-content {
        position: absolute;
        top: 50%;
    }

    .banner-slider .swiper-slide {
        height: auto;
        margin-bottom: 30px;
    }


    .new-header-wrap .logo-section {
        width: 224px;
    }


    .stry-srv-w .stry-card-body {
        min-height: auto;
    }


    .stry-srv-w .stry-icon-wrap img {
        max-width: 50px;
        max-height: 50px;
    }

    .stry-srv-w .stry-icon-wrap {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
    }


    .stry-srv-w .stry-card-body {
        padding: 20px 10px 15px;
    }


    stry-srv-w .stry-card {
        height: fit-content;
    }


    .donate-row input {
        flex: 1;
        padding: 6px;
    }


    .btn-row a {
        display: block;
        color: #15999b;
        padding: 8px;
    }

    .content h3 {
        font-size: 17px;
    }

    .prog-cntnt {
        min-height: auto;
    }

    .btn-default {
        padding: 12px 25px;
    }


    .stry-srv-w .stry-card {
        height: 220px;
    }


    .d-mt {
        font-size: 14px;
        margin-bottom: 6px;
        color: #444;
        text-align: left;
        margin-top: 13px;
    }

    .content h3 {
        font-size: 18px;
        text-align: left;
    }

    .section-row .section-title {
        margin-bottom: 15px;
        text-align: left;
    }


    .new-header-wrap .header-icons {
        display: flex;
        gap: 2px;
        font-size: 20px;
        color: #c5a059;
    }

    .mob-menu-show {
        display: block !important;
    }

    .mob-mnu-incs-st {
        display: flex;
        gap: 15px;
    }


    .login-mdn-form .desc {
        color: #667085;
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .uae-pass-btn, .login-mdn-submit, .login-mdn-input input {
        height: 45px;
    }


    .login-mdn-mini-box strong {
        display: block;
        font-size: 20px;
        font-weight: 500;
        margin-bottom: 5px;
    }

    .login-mdn-mini-box {
        padding: 11px 8px;
    }

    .reg-page {
        min-height: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 15px 15px;
        background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
    }

        .reg-page h1 {
            font-size: 19px;
        }

        .reg-page .sub-text {
            text-align: center;
            color: #6b7280;
            font-size: 16px;
            max-width: 600px;
            margin: auto;
            line-height: 1.4;
        }

        .reg-page .account-card {
            padding: 15px 8px;
        }


            .reg-page .account-card h3 {
                font-size: 18px;
                color: #1f2937;
                margin-bottom: 4px;
            }

        .reg-page .icon-box img {
            width: 45px;
        }

        .reg-page .icon-box {
            width: 75px;
            height: 75px;
            border-radius: 50%;
            background: #f6fafb;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
            margin-bottom: auto;
            margin-bottom: 7px;
            transition: 0.3s;
            border: dashed 1px #15999b;
        }

        .reg-page .account-card p {
            margin-bottom: 0;
        }

        .reg-page .btn-wrap {
            margin-top: 20px;
            text-align: center;
        }


        .reg-page .account-grid {
            grid-template-columns: repeat(2,1fr);
            max-width: 100%;
            margin-top: 20px;
            gap: 15px;
        }


    .Merited-wrap .info-card h3 {
        color: #fff;
        font-size: 20px;
        margin-bottom: 3px;
    }

    .Merited-wrap .left-content p {
        color: rgba(255,255,255,0.88);
        font-size: 14px;
        line-height: 1.2;
        max-width: 700px;
    }


    .Merited-wrap .left-side {
        min-height: 90px;
    }

    .Merited-wrap .input-box input {
        width: 100%;
        height: 45px;
        border-radius: 9px;
        border: 1px solid #dbe5ea;
        background: #f8fbfc;
        padding: 0px 15px;
        outline: none;
        font-size: 15px;
        transition: 0.3s ease;
    }

    .Merited-wrap .register-btn {
        width: 100%;
        height: 50px;
        border: none;
        border-radius: 9px;
    }


    .Merited-wrap .info-card {
        padding: 11px;
        border-radius: 15px;
    }

    .Merited-wrap .left-content p {
        color: rgba(255,255,255,0.88);
        font-size: 14px;
        line-height: 1.2;
        max-width: 700px;
        margin-bottom: 0;
    }
}




















/* =========================================
UPLOAD CENTER
========================================= */

.doc-upload-center {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 15px;
}

.doc-upload-box {
    background: linear-gradient(135deg,#f2fbfc,#f8feff);
    border: 2px dashed #bfe8eb;
    border-radius: 20px;
    padding: 30px 15px;
    text-align: center;
}

    .doc-upload-box i {
        font-size: 39px;
        color: #14b8a6;
        margin-bottom: 5px;
    }

    .doc-upload-box h5 {
        font-size: 20px;
        color: #083344;
        margin-bottom: 0px;
        font-weight: 500;
    }

    .doc-upload-box p {
        color: #64748b;
        margin-bottom: 10px;
        line-height: 1.7;
        font-size: 15px;
    }

    .doc-upload-box button {
        height: 45px;
        padding: 0 30px;
        border: none;
        border-radius: 10px;
        background: linear-gradient(135deg,#14b8a6,#0f766e);
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: .3s;
    }

        .doc-upload-box button:hover {
            transform: translateY(-3px);
        }

.doc-upload-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.doc-feature-card {
    background: #f9fcfd;
    border: 1px solid #cfe2e5;
    border-radius: 12px;
    padding: 19px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
}

.doc-feature-icon {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    flex-shrink: 0;
}

.doc-feature-card h6 {
    font-size: 17px;
    color: #083344;
    margin-bottom: 2px;
    font-weight: 500;
}

.doc-feature-card p {
    color: #64748b;
    line-height: 1.5;
    font-size: 15px;
    margin-bottom: 0;
}

/* =========================================
INPUT STYLE
========================================= */

.bn-profile-card input,
.bn-profile-card select {
    width: 100%;
    height: 55px;
    border: 1px solid #dbecef;
    border-radius: 10px;
    padding: 0 18px;
    background: #fff;
    font-size: 15px;
    color: #083344;
    outline: none;
}

    .bn-profile-card input[type="file"] {
        padding: 15px;
    }

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px) {

    .doc-upload-center {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .doc-upload-box {
        padding: 35px 20px;
    }

        .doc-upload-box h5 {
            font-size: 24px;
        }

    .doc-feature-card {
        flex-direction: column;
    }
}














/* =====================================
DRAG & DROP UPLOAD
===================================== */

.doc-drag-upload {
    width: 100%;
}

.doc-drag-box {
    background: linear-gradient(135deg,#f2fbfc,#f8feff);
    border: 2px dashed #bfe8eb;
    border-radius: 15px;
    padding: 15px 20px;
    text-align: center;
    transition: .3s;
    position: relative;
    overflow: hidden;
}

    .doc-drag-box.active {
        border-color: #14b8a6;
        background: #ecfeff;
        transform: scale(1.01);
    }

.doc-drag-icon {
    width: auto;
    height: auto;
    border-radius: 20px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
    margin-bottom: 10px;
    box-shadow: none;
    color: #000;
}

    .doc-drag-icon i {
        color: #8ccccd;
        font-size: 39px;
    }

.doc-drag-box h4 {
    font-size: 20px;
    color: #083344;
    margin-bottom: 1px;
    font-weight: 500;
}

.doc-drag-box p {
    color: #64748b;
    font-size: 14px;
    margin-bottom: 21px;
    line-height: 1.7;
}

.doc-drag-box button {
    height: 45px;
    padding: 0 34px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg,#215a6a,#15999b);
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: .3s;
    margin-bottom: 11px;
    box-shadow: 0 10px 25px rgba(20,184,166,.18);
}

    .doc-drag-box button:hover {
        transform: translateY(-3px);
    }

.doc-upload-note {
    display: block;
    color: #1f6472;
    font-weight: 500;
    font-size: 14px;
}

/* FILE LIST */

.doc-upload-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.doc-file-item {
    background: #f9fcfd;
    border: 1px solid #e5f1f3;
    border-radius: 22px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.doc-file-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.doc-file-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: #e0f7fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    font-size: 22px;
    border: dashed 1px;
}

.doc-file-info h5 {
    font-size: 18px;
    color: #083344;
    margin-bottom: 5px;
}

.doc-file-info span {
    color: #64748b;
    font-size: 14px;
}

.doc-remove {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 14px;
    background: #fef2f2;
    color: #dc2626;
    cursor: pointer;
    font-size: 16px;
}

/* RESPONSIVE */

@media(max-width:768px) {

    .doc-drag-box {
        padding: 40px 20px;
    }

        .doc-drag-box h4 {
            font-size: 26px;
        }

    .doc-file-item {
        flex-direction: column;
        align-items: flex-start;
    }
}










/* =========================================
VERIFY GRID
========================================= */

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

.verify-card {
    background: #f9fcfd;
    border-radius: 28px;
    padding: 28px;
    border: 1px solid #e4f1f3;
    transition: .3s;
}

    .verify-card:hover {
        transform: translateY(-4px);
    }

.verify-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.verify-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.verify-status {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

.verify-card h5 {
    font-size: 26px;
    color: #083344;
    margin-bottom: 12px;
    font-weight: 500;
}

.verify-card p {
    color: #64748b;
    line-height: 1.8;
}

/* SUCCESS */

.verify-card.success .verify-icon {
    background: #ecfdf3;
    color: #16a34a;
}

.verify-card.success .verify-status {
    background: #dcfce7;
    color: #15803d;
}

/* WARNING */

.verify-card.warning .verify-icon {
    background: #fff7ed;
    color: #ea580c;
}

.verify-card.warning .verify-status {
    background: #ffedd5;
    color: #c2410c;
}

/* PENDING */

.verify-card.pending .verify-icon {
    background: #eff6ff;
    color: #2563eb;
}

.verify-card.pending .verify-status {
    background: #dbeafe;
    color: #1d4ed8;
}

/* =========================================
ELIGIBILITY ENGINE
========================================= */

.eligibility-engine {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eligibility-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 26px;
    border-radius: 26px;
    border: 1px solid #e5f1f3;
    background: #f9fcfd;
}

.eligibility-icon {
    width: 70px;
    height: 70px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

.eligibility-card h5 {
    font-size: 24px;
    color: #083344;
    margin-bottom: 10px;
    font-weight: 500;
}

.eligibility-card p {
    color: #64748b;
    line-height: 1.8;
}

/* DANGER */

.eligibility-card.danger .eligibility-icon {
    background: #fef2f2;
    color: #dc2626;
}

/* WARNING */

.eligibility-card.warning .eligibility-icon {
    background: #fff7ed;
    color: #ea580c;
}

/* PENDING */

.eligibility-card.pending .eligibility-icon {
    background: #eff6ff;
    color: #2563eb;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px) {

    .verify-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .verify-card {
        padding: 22px;
    }

        .verify-card h5 {
            font-size: 22px;
        }

    .eligibility-card {
        flex-direction: column;
    }
}











/* =========================================
VERIFY GRID
========================================= */

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

.verify-card {
    background: #f6fdff;
    border-radius: 15px;
    padding: 20px;
    border: 1px solid #e4f1f3;
    transition: .3s;
}

    .verify-card:hover {
        transform: translateY(-4px);
    }

.verify-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.verify-icon {
    width: 68px;
    height: 68px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

.verify-status {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

.verify-card h5 {
    font-size: 18px;
    color: #083344;
    margin-bottom: 1px;
    font-weight: 500;
}

.verify-card p {
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0;
    font-size: 17px;
}

/* SUCCESS */

.verify-card.success .verify-icon {
    background: #ecfdf3;
    color: #16a34a;
    background: linear-gradient(135deg,#ffffff21,#ffffff1c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    border: dashed 1px #238190;
    border-radius: 50%;
}

.verify-card.success .verify-status {
    background: #dcfce7;
    color: #15803d;
}

/* WARNING */

.verify-card.warning .verify-icon {
    background: #fff7ed;
    color: #ea580c;
    background: linear-gradient(135deg,#ffffff21,#ffffff1c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    border: dashed 1px #238190;
    border-radius: 50%;
}

.verify-card.warning .verify-status {
    background: #ffedd5;
    color: #c2410c;
}

/* PENDING */

.verify-card.pending .verify-icon {
    background: #eff6ff;
    color: #2563eb;
    background: linear-gradient(135deg,#ffffff21,#ffffff1c);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b;
    border: dashed 1px #238190;
    border-radius: 50%;
}

.verify-card.pending .verify-status {
    background: #dbeafe;
    color: #1d4ed8;
}

/* =========================================
ELIGIBILITY ENGINE
========================================= */

.eligibility-engine {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.eligibility-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 15px;
    border: 1px solid #e5f1f3;
    background: #f9fcfd;
}

.eligibility-icon {
    width: 60px;
    height: 60px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.eligibility-card h5 {
    font-size: 18px;
    color: #083344;
    margin-bottom: 2px;
    font-weight: 500;
}

.eligibility-card p {
    color: #64748b;
    line-height: 1.5;
    margin-bottom: 0px;
    font-size: 16px;
}

/* DANGER */

.eligibility-card.danger .eligibility-icon {
    background: #fef2f2;
    color: #dc2626;
    border: dashed 1px;
    border-radius: 50%;
    opacity: .8;
}

/* WARNING */

.eligibility-card.warning .eligibility-icon {
    background: #fff7ed;
    color: #ea580c;
    border: dashed 1px;
    border-radius: 50%;
    opacity: .8;
}

/* PENDING */

.eligibility-card.pending .eligibility-icon {
    background: #eff6ff;
    color: #2563eb;
    border: dashed 1px;
    border-radius: 50%;
    opacity: .8;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px) {

    .verify-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .verify-card {
        padding: 22px;
    }

        .verify-card h5 {
            font-size: 22px;
        }

    .eligibility-card {
        flex-direction: column;
    }
}




































/* =========================================
TEXTAREA
========================================= */

.bn-profile-card textarea {
    width: 100%;
    min-height: 140px;
    border: 1px solid #dbecef;
    border-radius: 18px;
    padding: 18px;
    background: #fff;
    font-size: 15px;
    color: #083344;
    outline: none;
    resize: none;
}

.bn-full-width {
    grid-column: span 2;
}

/* =========================================
AID CATEGORY
========================================= */

.aid-category-grid {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 20px;
}

.aid-category-card {
    background: #f9fcfd;
    border: 1px solid #e5f1f3;
    border-radius: 15px;
    padding: 21px 12px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
}

    .aid-category-card:hover {
        transform: translateY(-4px);
    }

    .aid-category-card.active {
        background: linear-gradient(135deg,#15999b,#114c5c);
    }

    .aid-category-card i {
        font-size: 27px;
        color: #14b8a6;
        margin-bottom: 18px;
    }

    .aid-category-card.active i,
    .aid-category-card.active h5 {
        color: #fff;
    }

    .aid-category-card h5 {
        font-size: 16px;
        color: #083344;
        font-weight: 500;
    }

.donate-swiper-shell .swiper-slide {
    height: auto;
}

.donate-swiper-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 314px;
    border: 1px solid #b9e3ee;
    border-radius: 18px;
    overflow: hidden;
    background: #edf9fe;
    box-shadow: 0 18px 36px rgba(17,76,92,0.06);
    transition: transform .25s ease, box-shadow .25s ease;
}

    .donate-swiper-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 48px rgba(17,76,92,0.12);
    }

.donate-swiper-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 26px 24px 22px;
}

.donate-swiper-icon {
    width: 138px;
    height: 138px;
    border: 1.5px dashed #18b1c5;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 28px;
}

    .donate-swiper-icon img {
        max-width: 72px;
        width: 100%;
        height: auto;
    }

.donate-swiper-title {
    margin: 0;
    color: #0b4f6f;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
}

.donate-swiper-btn {
    width: 100%;
    min-height: 66px;
    border: 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(135deg,#1b9aa0,#177d95);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    transition: background .2s ease, letter-spacing .2s ease;
}

    .donate-swiper-btn:hover {
        background: linear-gradient(135deg,#168f97,#136d84);
        letter-spacing: .01em;
    }

/* =========================================
ATTACHMENTS
========================================= */

.attachment-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.attachment-card {
    background: #f9fcfd;
    border: 1px solid #e5f1f3;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
}

.attachment-icon {
    width: 60px;
    height: 60px;
    border-radius: 22px;
    background: linear-gradient(135deg,#15999b,#0d697a);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    border-radius: 50%;
}

.attachment-info {
    flex: 1;
}

    .attachment-info h5 {
        font-size: 17px;
        color: #083344;
        margin-bottom: 0px;
    }

    .attachment-info p {
        color: #64748b;
        margin-bottom: 0;
        font-size: 17px;
    }

.attachment-card button {
    height: 36px;
    padding: 0 16px;
    border: none;
    border-radius: 8px;
    background: #138b9217;
    color: #0f766e;
    font-weight: 500;
    cursor: pointer;
    font-size: 15px;
}

/* =========================================
REQUEST STATUS
========================================= */

.request-status-wrap {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 18px;
}

.request-status-card {
    background: #13a9991c;
    border: 1px solid #e5f1f3;
    border-radius: 10px;
    padding: 17px 20px;
    text-align: center;
    transition: .3s;
}

    .request-status-card i {
        font-size: 20px;
        margin-bottom: 12px;
    }

    .request-status-card h5 {
        font-size: 15px;
        font-weight: 500;
    }

/* COLORS */

.draft i {
    color: #64748b;
}

.submitted i {
    color: #2563eb;
}

.review i {
    color: #ea580c;
}

.approved i {
    color: #16a34a;
}

.rejected i {
    color: #dc2626;
}

.request-status-card.active {
    background: linear-gradient(135deg,#14b8a6,#0f766e);
}

    .request-status-card.active i,
    .request-status-card.active h5 {
        color: #fff;
    }

/* =========================================
COMMITTEE
========================================= */

.committee-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.committee-card {
    background: #f9fcfd;
    border: 1px solid #e5f1f3;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.committee-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    flex-shrink: 0;
}

.committee-card span {
    color: #64748b;
    font-size: 15px;
    display: block;
    margin-bottom: 8px;
}

.committee-card h3 {
    font-size: 20px;
    color: #083344;
    font-weight: 500;
}

.committee-card p {
    color: #64748b;
    line-height: 1.3;
    font-size: 16px;
    margin-bottom: 0;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px) {

    .aid-category-grid {
        grid-template-columns: repeat(3,1fr);
    }

    .request-status-wrap {
        grid-template-columns: repeat(3,1fr);
    }
}

@media(max-width:991px) {

    .committee-wrap {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .bn-full-width {
        grid-column: span 1;
    }

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

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

    .attachment-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .committee-card {
        flex-direction: column;
    }
}















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

.app-track-wrap {
    position: relative;
}

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

.app-track-item {
    display: flex;
    gap: 24px;
    margin-bottom: 30px;
}

.app-track-left {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.app-track-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    position: relative;
    z-index: 2;
}

.app-track-line {
    width: 4px;
    flex: 1;
    background: #d9ecef;
    margin-top: 10px;
    border-radius: 10px;
}

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

.app-track-card {
    flex: 1;
    background: #ecf7f7;
    border: 1px solid #addae2;
    border-radius: 16px;
    padding: 20px;
    transition: .3s;
}

    .app-track-card:hover {
        transform: translateY(-3px);
    }

.app-track-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 13px;
}

.track-status {
    padding: 7px 18px;
    border-radius: 49px;
    font-size: 13px;
    font-weight: 500;
}

.track-date {
    color: #64748b;
    font-size: 15px;
    font-weight: 500;
}

.app-track-card h4 {
    font-size: 19px;
    color: #083344;
    margin-bottom: 7px;
    font-weight: 500;
}

/* =========================================
INFO GRID
========================================= */

.track-info-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
}

.track-info-box {
    background: #fff;
    border-radius: 10px;
    padding: 16px;
    border: 1px solid #edf4f5;
}

    .track-info-box span {
        display: block;
        color: #64748b;
        font-size: 15px;
        margin-bottom: 4px;
        font-weight: 500;
    }

    .track-info-box h5 {
        color: #083344;
        font-size: 17px;
        font-weight: 500;
    }

    .track-info-box p {
        color: #64748b;
        line-height: 1.8;
        margin-bottom: 0;
    }

/* =========================================
COMPLETED
========================================= */

.app-track-item.completed .app-track-icon {
    background: #15999b1c;
    color: #15999b;
}

.app-track-item.completed .track-status {
    background: #dcfce7;
    color: #15803d;
}

/* =========================================
ACTIVE
========================================= */

.app-track-item.active .app-track-icon {
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    color: #fff;
    box-shadow: 0 15px 35px rgba(20,184,166,.18);
}

.app-track-item.active .track-status {
    background: #ccfbf1;
    color: #0f766e;
}

/* =========================================
PENDING
========================================= */

.app-track-item.pending .app-track-icon {
    background: #f1f5f9;
    color: #64748b;
}

.app-track-item.pending .track-status {
    background: #fff;
    color: #475569;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px) {

    .track-info-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .app-track-item {
        gap: 16px;
    }

    .app-track-icon {
        width: 50px;
        height: 50px;
        font-size: 16px;
        border-radius: 50%;
    }

    .app-track-card {
        padding: 13px;
        border-radius: 10px;
    }

        .app-track-card h4 {
            font-size: 18px;
        }

    .app-track-top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}
























/* =========================================
MAIN WRAP
========================================= */

.appoint-main-wrap {
    padding: 40px 0;
    border-radius: 40px;
    background: transparent;
}

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

.appoint-head-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 10px;
}

.appoint-mini-title {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.appoint-head-wrap h2 {
    font-size: 19px;
    color: #083344;
    margin-bottom: 1px;
    font-weight: 500;
    font-size: clamp(27px, 1.5vw, 24px);
    line-height: 1.08;
}

.appoint-head-wrap p {
    color: #64748b;
    line-height: 1.8;
    max-width: max-content;
    font-size: 16px;
}

.appoint-book-btn {
    height: 50px;
    border: none;
    padding: 0 27px;
    border-radius: 10px;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(20,184,166,.18);
}

/* =========================================
TOP CARDS
========================================= */

.appoint-top-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-bottom: 35px;
}

.appoint-top-card {
    background: #ddf4f166;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #d8edf1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.appoint-top-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #15999b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

    .appoint-top-icon.orange {
        background: #fff7ed;
        color: #ea580c;
        background: #15999b;
        color: #fff;
    }

    .appoint-top-icon.blue {
        background: #eff6ff;
        color: #2563eb;
        background: #15999b;
        color: #fff;
    }

    .appoint-top-icon.green {
        background: #dcfce7;
        color: #16a34a;
        background: #15999b;
        color: #fff;
    }

.appoint-top-card span {
    display: block;
    color: #64748b;
    margin-bottom: 1px;
    font-size: 14px;
}

.appoint-top-card h3 {
    color: #083344;
    font-size: 16px;
    font-weight: 500;
}

/* =========================================
MAIN GRID
========================================= */

.appoint-main-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 28px;
}

/* =========================================
COMMON BOX
========================================= */

.appoint-box,
.appoint-queue-box,
.appoint-history-box {
    background: #fff;
    border-radius: 15px;
    border: 1px solid #e5f1f3;
    padding: 20px;
    margin-bottom: 28px;
}

.appoint-active-box {
    background: linear-gradient(135deg,#28acae,#114c5c);
}

/* =========================================
TOP SECTION
========================================= */

.appoint-box-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 30px;
}

.appoint-title-wrap {
    display: flex;
    gap: 20px;
}

.appoint-main-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #ecfeff;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 27px;
}

.appoint-active-box .appoint-main-icon {
    background: rgba(255,255,255,.14);
    color: #fff;
}

.appoint-title-wrap span {
    display: block;
    color: #64748b;
    margin-bottom: 3px;
    font-size: 15px;
}

.appoint-title-wrap h3 {
    color: #083344;
    font-size: 20px;
    font-weight: 500;
}

.appoint-active-box .appoint-title-wrap span,
.appoint-active-box .appoint-title-wrap h3 {
    color: #fff;
}

.appoint-status-badge {
    background: #dcfce7e8;
    color: #15803d;
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
}

/* =========================================
INFO GRID
========================================= */

.appoint-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.appoint-info-card {
    background: #f9fcfd;
    border-radius: 10px;
    padding: 15px;
}

.appoint-active-box .appoint-info-card {
    background: rgba(255,255,255,.10);
}

.appoint-info-card span {
    display: block;
    color: #64748b;
    margin-bottom: 5px;
    font-size: 16px;
}

.appoint-info-card h5 {
    color: #083344;
    font-size: 18px;
    font-weight: 500;
}

.appoint-active-box .appoint-info-card span,
.appoint-active-box .appoint-info-card h5 {
    color: #fff;
}

/* =========================================
SECTION HEAD
========================================= */

.appoint-section-head {
    margin-bottom: 25px;
}

    .appoint-section-head h4 {
        color: #083344;
        font-size: 21px;
        margin-bottom: 3px;
        font-weight: 500;
    }

    .appoint-section-head p {
        color: #64748b;
        font-size: 16px;
    }

/* =========================================
BOOKING
========================================= */

.appoint-booking-grid {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.appoint-booking-card {
    border: 1px solid #cce5e9;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
}

    .appoint-booking-card.active {
        border-color: #14b8a6;
        box-shadow: 0 15px 35px rgba(20,184,166,.10);
    }

.appoint-booking-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ccfbf1;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

    .appoint-booking-icon.blue {
        background: #eff6ff;
        color: #2563eb;
    }

.appoint-booking-content h5 {
    font-size: 16px;
    color: #083344;
    margin-bottom: 4px;
    font-weight: 500;
}

.appoint-booking-content p {
    color: #64748b;
    line-height: 1.4;
    font-size: 15px;
    margin-bottom: 0;
}

.appoint-check {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #14b8a6;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
QUEUE
========================================= */

.appoint-queue-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 28px;
}

.appoint-queue-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 29px;
}

.appoint-queue-top span {
    display: block;
    color: #64748b;
    margin-bottom: 4px;
    font-size: 16px;
}

.appoint-queue-top h3 {
    color: #083344;
    font-size: 18px;
    font-weight: 500;
}

.appoint-queue-number {
    background: #f5fbfc;
    border-radius: 20px;
    padding: 15px;
    text-align: center;
    margin-bottom: 18px;
}

    .appoint-queue-number span {
        color: #64748b;
    }

    .appoint-queue-number h1 {
        font-size: 50px;
        color: #14b8a6;
        line-height: 1;
        margin-top: 12px;
        font-weight: 500;
    }

.appoint-progress-bar {
    height: 10px;
    background: #e2e8f0;
    border-radius: 30px;
    overflow: hidden;
    margin-bottom: 18px;
}

.appoint-progress-fill {
    width: 75%;
    height: 100%;
    border-radius: 30px;
    background: linear-gradient(135deg,#14b8a6,#0f766e);
}

.appoint-queue-footer {
    display: flex;
    justify-content: space-between;
    color: #64748b;
    font-size: 15px;
}

    .appoint-queue-footer strong {
        color: #083344;
    }

/* =========================================
HISTORY
========================================= */

.appoint-history-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.appoint-history-item {
    display: flex;
    gap: 18px;
}

.appoint-history-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #14b8a6;
    margin-top: 0;
    position: relative;
    flex-shrink: 0;
}

    .appoint-history-dot.green {
        background: #14b8a6;
        padding: 0;
    }

    .appoint-history-dot.blue {
        background: #2563eb;
    }

    .appoint-history-dot::after {
        content: '';
        position: absolute;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 85px;
        background: #dbecec;
    }

.appoint-history-item:last-child .appoint-history-dot::after {
    display: none;
}

.appoint-history-top {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 1px;
}

    .appoint-history-top h5 {
        font-size: 16px;
        color: #083344;
        font-weight: 500;
    }

    .appoint-history-top span {
        color: #64748b;
        font-size: 13px;
    }

.appoint-history-content p {
    color: #64748b;
    line-height: 1.5;
    font-size: 15px;
    margin-bottom: 10px;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px) {

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

@media(max-width:991px) {

    .appoint-main-grid {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .appoint-main-wrap {
        padding: 22px 0;
    }

    .appoint-head-wrap {
        flex-direction: column;
        align-items: flex-start;
    }

    .appoint-top-grid {
        grid-template-columns: 1fr;
    }

    .appoint-info-grid {
        grid-template-columns: 1fr;
    }

    .appoint-box-top {
        flex-direction: column;
    }

    .appoint-title-wrap {
        flex-direction: column;
    }

    .appoint-history-top {
        flex-direction: column;
    }

    .appoint-head-wrap h2 {
        font-size: 19px;
        line-height: inherit;
    }

    .appoint-title-wrap h3,
    .appoint-section-head h4,
    .appoint-queue-top h3 {
        font-size: 18px;
    }

    .appoint-queue-number h1 {
        font-size: 52px;
    }
}






















/* =========================================
MAIN WRAP
========================================= */

.notify-sec-wrap {
    padding: 0;
    border-radius: 40px;
    background: transparent;
}

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

.notify-sec-head {
    margin-bottom: 30px;
}

.notify-sec-tag {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.notify-sec-head h2 {
    font-size: 42px;
    font-weight: 500;
    color: #083344;
    margin-bottom: 12px;
}

.notify-sec-head p {
    color: #64748b;
    line-height: 1.8;
    max-width: 700px;
}

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

.notify-purpose-card {
    background: linear-gradient(135deg,#14b8a6,#0f766e);
    border-radius: 30px;
    padding: 30px;
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 35px;
}

.notify-purpose-icon {
    width: 85px;
    height: 85px;
    border-radius: 26px;
    background: rgba(255,255,255,.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    flex-shrink: 0;
}

.notify-purpose-card span {
    display: block;
    color: #d1fae5;
    margin-bottom: 8px;
    font-size: 14px;
}

.notify-purpose-card h4 {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
}

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

.notify-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

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

.notify-box-card {
    background: transparent;
    border-radius: 32px;
    padding: 0;
    border: 0;
}

.notify-box-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 30px;
}

.notify-box-icon {
    width: 75px;
    height: 75px;
    border-radius: 24px;
    background: #ecfeff;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
}

    .notify-box-icon.teal-bg {
        background: #ccfbf1;
    }

.notify-box-head h3 {
    font-size: 22px;
    color: #083344;
    font-weight: 500;
    margin-bottom: 2px;
}

.notify-box-head p {
    color: #64748b;
}

/* =========================================
LIST ITEM
========================================= */

.notify-list-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 20px;
    border-radius: 15px;
    background: #cfe3e54f;
    margin-bottom: 18px;
    border: 1px solid #edf4f5;
}

    .notify-list-item:last-child {
        margin-bottom: 0;
    }

.notify-list-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #ecfeff;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

    .notify-list-icon.green {
        background: #fff;
        color: #15999b;
        border: dashed 1px;
        font-size: 20px;
    }

    .notify-list-icon.orange {
        background: #fff;
        color: #15999b;
        border: dashed 1px;
        font-size: 20px;
    }

    .notify-list-icon.blue {
        background: #fff;
        color: #15999b;
        border: dashed 1px;
        font-size: 20px;
    }

    .notify-list-icon.teal {
        background: #fff;
        color: #15999b;
        border: dashed 1px;
        font-size: 20px;
    }

.notify-list-content h5 {
    font-size: 20px;
    color: #083344;
    margin-bottom: 8px;
    font-weight: 500;
}

.notify-list-content span {
    color: #64748b;
    line-height: 1.7;
    font-size: 14px;
}

/* =========================================
CHANNELS
========================================= */

.notify-channel-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.notify-channel-card {
    padding: 24px;
    border-radius: 15px;
    border: 1px solid #d9dbdb;
    text-align: center;
    background: #f9fcfd;
    transition: .3s;
}

    .notify-channel-card.active {
        border-color: #14b8a6;
        box-shadow: 0 12px 30px rgba(20,184,166,.08);
    }

.notify-channel-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #ecfeff;
    color: #14b8a6;
    margin: auto;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    background: #fff;
    color: #15999b;
    border: dashed 1px;
    font-size: 27px;
}

    .notify-channel-icon.blue {
        background: #eff6ff;
        color: #2563eb;
    }

    .notify-channel-icon.orange {
        background: #fff7ed;
        color: #ea580c;
        font-size: 24px;
    }

    .notify-channel-icon.whatsapp {
        background: #dcfce7;
        color: #22c55e;
    }

.notify-channel-card h5 {
    color: #083344;
    font-size: 17px;
    font-weight: 500;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px) {

    .notify-grid-wrap {
        grid-template-columns: 1fr;
    }
}

@media(max-width:768px) {

    .notify-sec-wrap {
        padding: 22px;
    }

    .notify-sec-head h2 {
        font-size: 34px;
    }

    .notify-purpose-card {
        flex-direction: column;
        align-items: flex-start;
    }

        .notify-purpose-card h4 {
            font-size: 24px;
        }

    .notify-box-head {
        flex-direction: column;
        align-items: flex-start;
    }

        .notify-box-head h3 {
            font-size: 24px;
        }

    .notify-channel-grid {
        grid-template-columns: 1fr;
    }

    .notify-list-item {
        flex-direction: column;
    }
}





















/* =========================================
MAIN WRAP
========================================= */

.aidhis-main-wrap {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

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

.aidhis-head-wrap {
    margin-bottom: 35px;
}

.aidhis-mini-tag {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.aidhis-head-wrap h2 {
    font-size: 44px;
    font-weight: 500;
    color: #083344;
    margin-bottom: 12px;
}

.aidhis-head-wrap p {
    color: #64748b;
    line-height: 1.8;
    max-width: 700px;
}

/* =========================================
SUMMARY GRID
========================================= */

.aidhis-summary-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-bottom: 35px;
}

.aidhis-summary-card {
    background: #eaf6f694;
    border-radius: 10px;
    padding: 10px;
    border: 1px solid #dde9ea;
    display: flex;
    align-items: center;
    gap: 18px;
}

.aidhis-summary-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #fff0;
    color: #31b5b6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    border: dashed 1px;
}

    .aidhis-summary-icon.blue {
        background: #f3fafa;
        color: #15999b;
        font-size: 28px;
        border: dashed 1px;
    }

    .aidhis-summary-icon.orange {
        background: #fff7ed;
        color: #ea580c;
        background: #f3fafa;
        color: #15999b;
        font-size: 28px;
        border: dashed 1px;
    }

    .aidhis-summary-icon.green {
        background: #f3fafa;
        color: #15999b;
        font-size: 28px;
        border: dashed 1px;
    }

.aidhis-summary-card span {
    display: block;
    color: #64748b;
    margin-bottom: 8px;
    font-size: 14px;
}

.aidhis-summary-card h3 {
    color: #083344;
    font-size: 16px;
    font-weight: 500;
}

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

.aidhis-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

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

.aidhis-box-card {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid #e5f1f3;
}

    .aidhis-box-card.full-width {
        grid-column: span 2;
    }

.aidhis-box-head {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 28px;
}

.aidhis-box-icon {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: #ecfeff;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: #f3fafa;
    color: #15999b;
    font-size: 28px;
    border: dashed 1px;
}

    .aidhis-box-icon.blue {
        background: #f3fafa;
        color: #42abae;
    }

    .aidhis-box-icon.orange {
        background: #fff7ed;
        color: #ea580c;
    }

    .aidhis-box-icon.green {
        background: #dcfce7;
        color: #16a34a;
    }

    .aidhis-box-icon.teal {
        background: #ccfbf1;
        color: #0f766e;
    }

.aidhis-box-head h3 {
    font-size: 22px;
    color: #083344;
    font-weight: 500;
    margin-bottom: 2px;
}

.aidhis-box-head p {
    color: #64748b;
}

/* =========================================
DETAIL LIST
========================================= */

.aidhis-detail-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.aidhis-detail-item {
    background: #f3fafa;
    border-radius: 10px;
    padding: 21px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border: 1px solid #c7e7ec;
}

    .aidhis-detail-item span {
        color: #64748b;
        font-size: 16px;
    }

    .aidhis-detail-item strong {
        color: #083344;
        font-size: 17px;
        font-weight: 500;
    }

/* STATUS */

.aidhis-status {
    padding: 10px 18px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

    .aidhis-status.green {
        background: #dcfce7;
        color: #15803d;
        font-weight: 500;
    }

/* =========================================
SPONSOR GRID
========================================= */

.aidhis-sponsor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.aidhis-sponsor-card {
    background: #f9fcfd;
    border-radius: 24px;
    padding: 24px;
    border: 1px solid #edf4f5;
}

    .aidhis-sponsor-card span {
        display: block;
        color: #64748b;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .aidhis-sponsor-card h5 {
        color: #083344;
        font-size: 17px;
        font-weight: 500;
    }

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px) {

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

@media(max-width:991px) {

    .aidhis-grid-wrap {
        grid-template-columns: 1fr;
    }

    .aidhis-box-card.full-width {
        grid-column: span 1;
    }
}

@media(max-width:768px) {

    .aidhis-main-wrap {
        padding: 22px;
    }

    .aidhis-summary-grid {
        grid-template-columns: 1fr;
    }

    .aidhis-head-wrap h2 {
        font-size: 34px;
    }

    .aidhis-box-head {
        flex-direction: column;
        align-items: flex-start;
    }

        .aidhis-box-head h3 {
            font-size: 24px;
        }

    .aidhis-detail-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .aidhis-sponsor-grid {
        grid-template-columns: 1fr;
    }
}







/* =========================================
MAIN WRAP
========================================= */

.setng-main-wrap {
    padding: 0;
    border-radius: 0;
    background: transparent;
}

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

.setng-head-wrap {
    margin-bottom: 35px;
}

.setng-mini-tag {
    display: inline-block;
    padding: 10px 18px;
    border-radius: 50px;
    background: #ccfbf1;
    color: #0f766e;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
}

.setng-head-wrap h2 {
    font-size: 44px;
    font-weight: 500;
    color: #083344;
    margin-bottom: 12px;
}

.setng-head-wrap p {
    color: #64748b;
    line-height: 1.8;
    max-width: 700px;
}

/* =========================================
TOP GRID
========================================= */

.setng-top-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 24px;
    margin-bottom: 35px;
}

.setng-top-card {
    background: #fff;
    border-radius: 15px;
    padding: 10px;
    border: 1px solid #dfeef1;
    display: flex;
    align-items: center;
    gap: 18px;
}

.setng-top-icon {
    width: 56px;
    height: 55px;
    border-radius: 50%;
    background: #15999b;
    color: #ebf4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 25px;
    border: dashed 1px;
}

    .setng-top-icon.blue {
        background: #eff6ff;
        color: #2563eb;
        border-radius: 50%;
        background: #ecfeff;
        color: #15999b;
        background: #15999b;
        color: #ebf4f6;
    }

    .setng-top-icon.orange {
        background: #fff7ed;
        color: #ea580c;
        border-radius: 50%;
        background: #ecfeff;
        color: #15999b;
        background: #15999b;
        color: #ebf4f6;
    }

    .setng-top-icon.green {
        background: #dcfce7;
        color: #16a34a;
        border-radius: 50%;
        background: #ecfeff;
        color: #15999b;
        background: #15999b;
        color: #ebf4f6;
    }

.setng-top-card span {
    display: block;
    color: #64748b;
    margin-bottom: 2px;
    font-size: 14px;
}

.setng-top-card h4 {
    color: #083344;
    font-size: 16px;
    font-weight: 500;
}

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

.setng-grid-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

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

.setng-box-card {
    background: #fff;
    border-radius: 15px;
    padding: 17px;
    border: 1px solid #d9e8ea;
}

    .setng-box-card.full-width {
        grid-column: span 2;
    }

.setng-box-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 25px;
}

.setng-box-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ecfeff;
    color: #15999b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    border: dashed 1px;
    color: #15999b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    border: dashed 1px;
}

    .setng-box-icon.blue {
        background: #eff6ff;
        color: #15999b;
    }

    .setng-box-icon.green {
        background: #dcfce7;
        color: #16a34a;
    }

.setng-box-head h3 {
    font-size: 22px;
    color: #083344;
    font-weight: 500;
    margin-bottom: 0;
}

.setng-box-head p {
    color: #64748b;
    margin-bottom: 0;
    font-size: 17px;
}

/* =========================================
OPTION ITEM
========================================= */

.setng-option-item {
    background: #edf8f8;
    border-radius: 15px;
    padding: 20px 22px;
    border: 1px solid #daecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
}

    .setng-option-item:last-child {
        margin-bottom: 0;
    }

.setng-option-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.setng-option-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #ecfeff;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    color: #15999b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    border: dashed 1px;
}

    .setng-option-icon.green {
        background: #dcfce7;
        color: #16a34a;
    }

    .setng-option-icon.blue {
        background: #eff6ff;
        color: #2563eb;
    }

    .setng-option-icon.orange {
        background: #fff7ed;
        color: #ea580c;
    }

.setng-option-left h5 {
    color: #083344;
    font-size: 17px;
    font-weight: 500;
    margin-bottom: 3px;
}

.setng-option-left span {
    color: #64748b;
    line-height: 1.4;
    font-size: 14px;
}

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

.setng-btn {
    border: none;
    background: #15999b;
    color: #fff;
    padding: 12px 22px;
    border-radius: 9px;
    font-weight: 500;
    cursor: pointer;
}

/* =========================================
SELECT
========================================= */

.setng-select {
    border: 1px solid #9eefef;
    border-radius: 9px;
    padding: 4px 20px;
    outline: none;
    min-width: 140px;
    font-weight: 200;
    background-color: #fff;
}

/* =========================================
PRIVACY GRID
========================================= */

.setng-privacy-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.setng-privacy-card {
    background: #edf8f8;
    border-radius: 15px;
    padding: 19px;
    border: 1px solid #edf4f5;
}

.setng-privacy-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #ccfbf1;
    color: #14b8a6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 22px;
    color: #15999b;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    border: dashed 1px;
}

    .setng-privacy-icon.orange {
        background: #fff7ed;
        color: #ea580c;
    }

.setng-privacy-card h5 {
    color: #083344;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 7px;
}

.setng-privacy-card p {
    color: #64748b;
    line-height: 1.3;
    margin-bottom: 16px;
    font-size: 16px;
}

/* =========================================
SWITCH
========================================= */

.setng-switch {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 32px;
}

    .setng-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.setng-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #cbd5e1;
    transition: .4s;
    border-radius: 50px;
}

    .setng-slider:before {
        position: absolute;
        content: "";
        height: 24px;
        width: 24px;
        left: 4px;
        bottom: 4px;
        background: white;
        transition: .4s;
        border-radius: 50%;
    }

.setng-switch input:checked + .setng-slider {
    background: #15999b;
}

    .setng-switch input:checked + .setng-slider:before {
        transform: translateX(28px);
    }

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:1200px) {

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

@media(max-width:991px) {

    .setng-grid-wrap {
        grid-template-columns: 1fr;
    }

    .setng-box-card.full-width {
        grid-column: span 1;
    }
}

@media(max-width:768px) {

    .setng-main-wrap {
        padding: 22px;
    }

    .setng-top-grid {
        grid-template-columns: 1fr;
    }

    .setng-head-wrap h2 {
        font-size: 34px;
    }

    .setng-box-head {
        flex-direction: column;
        align-items: flex-start;
    }

        .setng-box-head h3 {
            font-size: 24px;
        }

    .setng-option-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .setng-option-left {
        align-items: flex-start;
    }

    .setng-privacy-grid {
        grid-template-columns: 1fr;
    }
}

/* Donor portal refresh */
.dashbord-wrp-1 {
    background: radial-gradient(circle at 5% 8%, rgba(21, 153, 155, 0.12), transparent 28%), radial-gradient(circle at 92% 22%, rgba(223, 200, 175, 0.22), transparent 30%), linear-gradient(135deg, #f8fcfd 0%, #f4f8f6 100%);
    padding: 50px 0 48px;
}

.dp-sidebar {
    background: linear-gradient(180deg, rgba(8, 73, 89, 0.98) 0%, rgba(18, 123, 136, 0.98) 100%), url("../images/dark-section-bg-image.png");
    background-size: cover;
    background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
}

.dp-profile {
    margin-bottom: 18px;
}

.dp-photo-avatar {
    overflow: hidden;
    padding: 0;
    background: rgba(255,255,255,0.16);
}

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

.dp-donor-score {
    position: relative;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 22px;
    backdrop-filter: blur(10px);
}

    .dp-donor-score span,
    .dp-donor-score small {
        display: block;
        color: rgba(255, 255, 255, 0.78);
        font-size: 13px;
        line-height: 1.5;
    }

    .dp-donor-score strong {
        display: block;
        color: #fff;
        font-size: 20px;
        line-height: 1.2;
        margin: 3px 0;
    }

.dp-sidebar .db1-tab-btn {
    min-height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 17px;
}

.dp-main {
    background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.76)), linear-gradient(135deg, rgba(21,153,155,0.07), rgba(223,200,175,0.12));
}

.dp-mobile-menu-toggle,
.dp-mobile-menu-backdrop {
    display: none;
}

.dp-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 24px;
    background: linear-gradient(135deg, rgba(17,76,92,0.96), rgba(21,153,155,0.9)), url("../images/img/banners.jpg") center / cover;
    overflow: hidden;
    position: relative;
}

    .dp-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, rgb(13, 105, 121), rgb(25, 151, 164));
    }

    .dp-hero > * {
        position: relative;
        z-index: 1;
    }

.dp-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    color: #114c5c;
    background: #dfc8af;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.dp-hero h1 {
    color: #fff;
    font-size: clamp(20px, 2vw, 30px);
    line-height: 1.1;
    margin-bottom: 8px;
}

.dp-hero p {
    max-width: 720px;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.35;
    margin: 0;
}

.dp-hero .db1-action-btn {
    background: #fff;
    color: #114c5c;
    box-shadow: 0 14px 28px rgba(0,0,0,0.18);
    flex-shrink: 0;
}

.dp-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

    .dp-stats .db1-stat-card {
        min-height: 178px;
        border-radius: 16px;
        padding: 22px;
    }

        .dp-stats .db1-stat-card h2 {
            font-size: 19px;
            letter-spacing: 0;
        }

.dp-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
    gap: 22px;
    align-items: start;
}

.dp-wide-card,
.dp-side-summary {
    height: 100%;
}

.dp-dashboard-side-stack {
    display: grid;
    gap: 22px;
}

.dp-head-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.dp-section-grid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 16px;
}

.dp-feature-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: flex-start;
    gap: 14px;
    min-height: auto;
    padding: 18px;
    border: 1px solid #dceef2;
    border-radius: 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
    transition: 0.25s ease;
}

    .dp-feature-card:hover {
        transform: translateY(-4px);
        border-color: rgba(21, 153, 155, 0.45);
        box-shadow: 0 16px 34px rgba(13, 64, 84, 0.08);
    }

.dp-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: #e7f8fb;
    color: #1198aa;
    border: 1px dashed rgba(21, 153, 155, 0.55);
    font-size: 18px;
    flex-shrink: 0;
}

.dp-feature-card h3 {
    color: #023b53;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.25;
    margin-bottom: 6px;
}

.dp-feature-card p {
    color: #607785;
    font-size: 14px;
    line-height: 1.55;
    margin: 0;
}

.dp-feature-card span {
    align-self: flex-start;
    white-space: nowrap;
    color: #8a6f52;
    background: #fff7ec;
    border: 1px solid rgba(223, 200, 175, 0.8);
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 500;
}

.dp-hidden-search {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.dp-profile-edit-grid {
    display: grid;
    gap: 18px;
}

.dp-profile-summary-card {
    position: relative;
    border: 1px solid #dceef2;
    border-radius: 16px;
    background: #fff;
    padding: 36px 38px 38px;
    min-height: 382px;
    box-shadow: 0 18px 42px rgba(13, 64, 84, 0.07);
}

.dp-profile-summary-dot {
    position: absolute;
    top: 14px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #0d6879;
}

.dp-profile-summary-top {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 24px;
    align-items: center;
    margin-bottom: 28px;
}

    .dp-profile-summary-top img {
        width: 92px;
        height: 92px;
        border-radius: 50%;
        object-fit: cover;
        background: #e7eef0;
        object-position: top;
    }

    .dp-profile-summary-top h3 {
        color: #0d5566;
        font-size: 21px;
        font-weight: 500;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .dp-profile-summary-top p {
        color: #536a86;
        font-size: 16px;
        line-height: 1.3;
        margin: 0 0 14px;
    }

    .dp-profile-summary-top strong {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        padding: 0 15px;
        border-radius: 999px;
        background: #58d37e;
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        white-space: nowrap;
    }

.dp-profile-summary-contact {
    display: grid;
    gap: 12px;
    margin-bottom: 30px;
}

    .dp-profile-summary-contact p {
        display: flex;
        align-items: center;
        gap: 14px;
        color: #2f4662;
        font-size: 16px;
        line-height: 1.35;
        margin: 0;
    }

    .dp-profile-summary-contact i {
        width: 18px;
        color: #15999b;
        font-size: 18px;
        text-align: center;
    }

.dp-profile-view-btn {
    min-height: 58px;
    width: 192px;
    border: 0;
    border-radius: 6px;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 500;
    box-shadow: 0 18px 34px rgba(21, 153, 155, 0.22);
    cursor: pointer;
    transition: 0.25s ease;
}

    .dp-profile-view-btn:hover {
        transform: translateY(-3px);
    }

.dp-profile-edit-card {
    border: 1px solid #dceef2;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%);
    padding: 20px;
    box-shadow: 0 14px 32px rgba(13, 64, 84, 0.05);
}

.dp-profile-edit-head,
.dp-profile-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.dp-profile-edit-head {
    margin-bottom: 16px;
}

    .dp-profile-edit-head > div {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .dp-profile-edit-head span {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        display: grid;
        place-items: center;
        background: #e7f8fb;
        color: #1198aa;
        border: 1px dashed rgba(21, 153, 155, 0.55);
    }

    .dp-profile-edit-head h3 {
        color: #023b53;
        font-size: 21px;
        font-weight: 500;
    }

.dp-edit-btn,
.dp-save-btn {
    min-height: 40px;
    border-radius: 7px;
    padding: 0 14px;
    border: 1px solid #d6eaf0;
    background: #fff;
    color: #114c5c;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.25s ease;
}

    .dp-edit-btn:hover,
    .dp-save-btn:hover {
        transform: translateY(-2px);
        border-color: rgba(21, 153, 155, 0.5);
    }

.dp-profile-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .dp-profile-fields label {
        display: grid;
        gap: 8px;
        margin: 0;
    }

    .dp-profile-fields small {
        color: #607785;
        font-size: 15px;
        font-weight: 500;
    }

    .dp-profile-fields input {
        width: 100%;
        min-height: 48px;
        border-radius: 8px;
        border: 1px solid #dceef2;
        background: #f6fbfc;
        color: #023b53;
        padding: 0 14px;
        font-size: 16px;
        font-weight: 500;
        outline: none;
    }

.dp-profile-edit-card.is-editing {
    border-color: rgba(21, 153, 155, 0.65);
    box-shadow: 0 18px 38px rgba(13, 64, 84, 0.09);
}

    .dp-profile-edit-card.is-editing input {
        background: #fff;
        border-color: rgba(21, 153, 155, 0.55);
    }

.dp-profile-card-foot {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid #e7f1f4;
}

    .dp-profile-card-foot span {
        color: #078345;
        background: #e8f8ef;
        border-radius: 999px;
        padding: 8px 12px;
        font-size: 13px;
        font-weight: 500;
    }

.dp-save-btn {
    display: none;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    border-color: transparent;
}

.dp-profile-edit-card.is-editing .dp-save-btn {
    display: inline-flex;
}

@media (max-width: 1280px) {
    .dp-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dp-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dp-profile-summary-card {
        max-width: none;
    }
}

@media (max-width: 1100px) {
    .db1-layout {
        display: block;
    }

    .dp-mobile-menu-toggle {
        position: sticky;
        top: 12px;
        z-index: 90;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 41px;
        padding: 0 11px;
        margin-bottom: 24px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, #0d6879, #1ca3af);
        color: #fff;
        font-size: 16px;
        font-weight: 500;
        box-shadow: 0 14px 28px rgba(24, 167, 184, 0.22);
    }

    .dp-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 94;
        background: rgba(4, 44, 58, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: 0.25s ease;
    }

    .dp-menu-open .dp-mobile-menu-backdrop {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .dp-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 95;
        width: min(360px, 88vw);
        height: 100vh;
        min-height: 100vh;
        overflow-y: auto;
        border-radius: 0;
        transform: translateX(-105%);
        transition: transform 0.3s ease;
    }

    .dp-menu-open .dp-sidebar {
        transform: translateX(0);
    }

    .dp-main {
        min-height: auto;
    }

    .dp-sidebar .db1-menu {
        grid-template-columns: 1fr;
    }

    .dp-sidebar .db1-tab-btn {
        justify-content: flex-start;
    }
}

@media (max-width: 850px) {
    .dp-hero,
    .dp-head-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .dp-section-grid,
    .dp-stats,
    .dp-profile-fields {
    }

    .dp-profile-edit-head,
    .dp-profile-card-foot {
        align-items: flex-start;
        flex-direction: column;
    }

    .dp-profile-summary-card {
        width: 100%;
        max-width: none;
        padding: 32px 24px;
    }

    .dp-profile-summary-top {
        grid-template-columns: 80px 1fr;
        gap: 16px;
    }

        .dp-profile-summary-top img {
            width: 80px;
            height: 80px;
        }

    .dp-feature-card {
        grid-template-columns: repeat;
    }

        .dp-feature-card span {
            grid-column: 2;
        }

    .dashbord-wrp-1 {
        min-height: auto;
    }

    .dashbord-wrp-1 {
        padding: 0px 0 28px;
        z-index: 0;
    }
}

@media (max-width: 620px) {
    .dp-sidebar .db1-menu {
        grid-template-columns: 1fr;
    }

    .dp-hero {
        padding: 22px;
    }

    .dp-feature-card {
    }

        .dp-feature-card span {
            grid-column: auto;
        }

    .dp-profile-summary-top {
        grid-template-columns: 1fr;
        text-align: center;
    }

        .dp-profile-summary-top img {
            margin: 0 auto;
        }

    .dp-profile-view-btn {
        width: 100%;
    }
}

/* Site-wide responsive safety layer */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    max-width: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

.preloader {
    animation: tarahumPreloaderFallback 0.01s linear 1.2s forwards;
}

@keyframes tarahumPreloaderFallback {
    to {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }
}

table {
    max-width: 100%;
}

.container {
    width: 100%;
}

@media (max-width: 1199px) {
    .container {
        max-width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }

    .new-header-wrap .nav-links a {
        font-size: 15px;
        padding-right: 12px;
    }

    .new-header-wrap .header-icons {
        gap: 12px;
    }
}

@media (max-width: 991px) {
    .new-header-wrap .top-header {
        padding: 8px 0;
    }

    .top-header-logos-w {
        gap: 12px;
    }

    .new-header-wrap .logo-section {
        width: auto;
        max-width: 170px;
        flex: 0 1 170px;
    }

        .new-header-wrap .logo-section img {
            width: 100%;
            height: auto;
        }

    .uae-logo-s {
        max-width: 110px;
    }

    .new-header-wrap .nav-bar {
        display: none !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
        transform: none !important;
    }

    .nw-mobile-btn {
        display: block;
        flex: 0 0 auto;
    }

    .nw-mobile-menu {
        width: min(320px, 88vw);
    }

    .mob-menu-show {
        display: block;
    }

    .banner-slider .swiper-slide,
    .banner-slider .banner-item {
        min-height: 420px;
        height: 420px;
    }

    .banner-slider .banner-content {
        left: 20px;
        right: 20px;
        max-width: min(460px, calc(100vw - 40px));
    }

        .banner-slider .banner-content h2 {
            font-size: clamp(30px, 8vw, 42px);
            line-height: 1.1;
        }

        .banner-slider .banner-content p {
            font-size: 16px;
            line-height: 1.5;
        }

    .section-title h2,
    .section-title-center h2 {
        font-size: clamp(28px, 6vw, 42px);
        line-height: 1.1;
    }

    .donation-card,
    .activity-card,
    .services-new-card,
    .policy-list--wrt .policy-card,
    .checkout-wrap-1 .billing-card,
    .checkout-wrap-1 .cart-card,
    .checkout-wrap-1 .payment-card,
    .bakacnt-wrap-1 .bank-card,
    .dashboard-card,
    .profile-card,
    .up-card,
    .db1-card {
        max-width: 100%;
    }

    .donation-table-wrap,
    .table-responsive,
    .cart-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .donation-table {
        min-width: 780px;
    }

    .main-footer-gold .row,
    .footer-copyright-gold,
    .footer-links-box-gold {
        row-gap: 24px;
    }

    .p-float-icons {
        right: 14px;
    }
}

@media (max-width: 767px) {
    body {
        font-size: 16px;
    }

    .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .top-header-logos-w {
        align-items: center;
    }

    .uae-logo-s {
        display: none;
    }

    .new-header-wrap .logo-section {
        max-width: 145px;
        flex-basis: 145px;
    }

    .mob-mnu-incs-st {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mob-menu-show .header-icons {
        display: flex;
        gap: 2px;
    }

        .mob-menu-show .header-icons a {
            width: 34px;
            height: 34px;
            display: grid;
            place-items: center;
        }

    .banner-slider .swiper-slide,
    .banner-slider .banner-item {
        min-height: 360px;
        height: 360px;
    }

    .banner-slider .banner-content {
        top: 77%;
        transform: translateY(-50%);
    }
.banner-slider.banner-fx-ready .kb-counter{
    display: none;
}
.banner-slider.banner-fx-ready .kb-dots{
    display: none !important;
}
        .banner-slider .banner-content button,
        .btn-default,
        .db1-action-btn,
        .donate-now {
            min-height: 38px;
            max-width: 100%;
            white-space: normal;
        }

    .section-row {
        margin-bottom: 15px;
    }

    .row {
        row-gap: 20px;
    }

    .form-control,
    input,
    select,
    textarea {
        max-width: 100%;
    }

    .dntpopups .donation-modal,
    .zakat-popup-card,
    .cookie-popup {
        width: min(94vw, 520px);
        max-height: 90vh;
        overflow-y: auto;
    }

    .dntpopups .modal-body,
    .checkout-wrap-1 .card-head,
    .db1-card-title {
        flex-direction: column;
        align-items: flex-start;
    }

    .p-float-icons {
        right: 10px;
    }

        .p-float-icons .float-btn {
            width: 46px;
            height: 46px;
        }

            .p-float-icons .float-btn span {
                display: none;
            }


    .Critical-Cases-w .donation-card {
        margin: 0px 0;
        border-radius: 8px;
    }

    .kid-d-wrp .kid-breadcrumb a {
        color: rgba(255,255,255,0.9);
        font-size: 14px;
        text-decoration: none;
        font-weight: 500;
    }

    .apply-info__hero h1 {
        font-size: clamp(21px, 2vw, 29px);
    }

    .quk-dnt .quick-title {
        font-size: 21px;
        font-weight: 500;
        margin-bottom: 0;
        color: #083344;
    }

    .quk-dnt .section-title {
        font-size: 16px;
        font-weight: 300;
        margin-bottom: 0;
        color: #114c5c;
        margin-top: 8px;
    }

    .quk-dnt .amount-grid {
        border-radius: 15px;
        padding: 15px 0;
        margin-bottom: 0px;
    }

    .quk-dnt .amount-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .quk-dnt .amount-card strong {
        font-size: 17px;
        font-weight: 500;
    }

    .quk-dnt .category-grid {
        grid-template-columns: repeat(1, 1fr);
    }

    .quk-dnt .select-box {
        width: 100%;
        border: 1px solid #15999b3b;
        border-radius: 7px;
        padding: 7px 13px;
        font-size: 16px;
        outline: none;
        margin-bottom: 10px;
        background-color: #15999b12;
    }

    .quk-dnt .payment-grid {
        grid-template-columns: repeat(3, 1fr);
    }


    .quk-dnt .donate-btn {
        width: 100%;
        background: linear-gradient(135deg, #0d6679, #17a0b1);
        color: white;
        border: none;
        border-radius: 7px;
        padding: 14px;
        font-size: 18px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s ease;
        margin-top: 0;
    }

    .selection-card {
        background: #f5f4ef;
        padding: 30px;
        border-radius: 15px;
        max-width: 100%;
        width: 100%;
        padding: 15px 10px 0 10px;
        border-radius: 15px;
        background: #e9f6f68f;
        background-color: rgba(233, 246, 246, 0.56);
        border: 1px solid #dceef2;
        margin-bottom: 0;
        box-shadow: rgba(15, 58, 47, 0.06) 0px 12px 35px;
        transition: 0.35s;
        border: 1px solid rgba(21, 153, 155, 0.49);
        margin-top: 15px;
    }

    .quk-dnt .amount-grid {
        border-radius: 15px;
        padding: 9px 0;
    }

    .quk-dnt .stat h2 {
        font-size: 21px;
    }

    .quk-dnt .stats-box {
        border-radius: 15px;
        padding: 10px;
        display: none;
    }


    .quk-dnt .stat p {
        font-size: 15px;
        opacity: 0.85;
        margin-bottom: 0;
        line-height: 14.5px;
        margin-bottom: 0;
    }

    .dwn-w p {
        margin-bottom: 0
    }

    .Critical-Cases-w {
        padding: 20px 0 20px 0;
    }

    .crtic {
        padding: 0px 0;
    }
}

@media (max-width: 640px) {
    .crtic .crtic-amount-grid {
        grid-template-columns: 1fr 1fr;
    }

    .crtic .crtic-title {
        font-size: 19px;
    }

    .crtic .crtic-actions {
        grid-template-columns: 1fr 1fr;
    }

    .crtic .crtic-btn {
        min-height: 40px;
        border-radius: 8px;
        border: 0;
        cursor: pointer;
        font-size: 15px;
        font-weight: 500;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-decoration: none;
        transition: 0.3s;
        border: solid 1px #118d9a6b;
    }

    .abt-re-new {
        padding: 15px;
    }

        .abt-re-new .abt-hero h1 {
            font-size: 22px;
            margin-bottom: 0px;
        }

        .abt-re-new .abt-hero p {
            font-size: 15px;
            line-height: 1.3;
            margin-top: 10px;
            margin-bottom: 10px;
        }


    .k-wraps .pickup-header {
        padding: 0;
        border: 0;
    }


    .abt-re-new .abt-hero {
        padding: 20px 15px;
        min-height: auto;
        border-radius: 22px;
        margin: 15px;
    }

    .k-wraps .pickup-content {
        padding: 0;
    }

    .kid-d-wrp .kid-info {
        padding: 0;
    }

    .h-d-wrp h3 {
        font-size: 17px;
        margin-bottom: 13px;
    }

    .donation-option {
        background-color: white;
        border-radius: 10px;
        padding: 10px 10px;
        border: solid #c8c5c5 1px;
    }


    .donation-options {
        display: grid;
        gap: 8px;
    }



    .donation-option p {
        font-weight: 500;
        color: #114c5c;
        margin-bottom: 3px;
        line-height: 10px;
        font-size: 16px;
    }


    .h-d-wrp .upload-card h3 {
        font-size: 18px;
        color: #0d4358;
        margin-bottom: 0px;
    }

    .additional-fields {
        display: grid;
        margin-top: 19px;
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }

    .kid-d-wrp {
        padding: 0;
    }

    .abt-re-new {
        padding: 0;
    }

    .kid-d-wrp .kid-card-head h2 {
        font-size: 19px;
    }

    .kid-d-wrp .kid-side-content {
        padding: 10px;
    }

    .k-wraps .pickup-card {
        padding: 10px;
    }


    .footer-logo-gold img {
        width: 100%;
        max-width: 230px;
    }

    .page-service-single {
        padding: 20px 0;
    }


    .kid-d-wrp .kid-hero {
        padding: 20px 15px 0;
        border-radius: 0;
    }

        .kid-d-wrp .kid-hero h1 {
            font-size: 20px;
        }

    .kid-d-wrp .kid-breadcrumb li, .kid-d-wrp .kid-breadcrumb a {
        color: rgba(255,255,255,0.9);
        font-size: 15px;
        text-decoration: none;
        font-weight: 500;
    }

    .page-category-list .page-category-list-title {
        padding: 0;
    }


    .service-entry {
        padding: 15px;
    }
}

@media (max-width: 575px) {
    .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .new-header-wrap .logo-section {
        max-width: 200px;
        flex-basis: 200px;
    }

    .banner-slider .swiper-slide,
    .banner-slider .banner-item {
        min-height: auto;
        height: auto;
    }

    .banner-slider .banner-content {
        left: 0px;
        right: 0px;
        max-width: calc(100vw - 28px);
        width: 315px;
    }

        .banner-slider .banner-content h2 {
            font-size: 18px;
            font-weight: 600;
        }

        .banner-slider .banner-content p {
            font-size: 13px;
            margin-bottom: 10px;
            display: none !important;
        }

    .nw-mobile-menu {
        width: 86vw;
        padding: 24px 18px;
    }

    .section-title h2,
    .section-title-center h2 {
        font-size: 20px;
    }

    .footer-copyright-gold,
    .footer-social-links-gold ul,
    .iso-wrap,
    .amounts,
    .donate-row,
    .btn-row {
        flex-wrap: wrap;
    }
}

/* Social Responsibility policy mobile sidebar */
.preloader.policy-loader-hide {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

.policy-mobile-toggle,
.policy-mobile-backdrop {
    display: none;
}

.policy-sidebar-close {
    display: none;
}

@media (max-width: 991px) {
    .policy-mobile-toggle {
        position: sticky;
        top: 78px;
        z-index: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 18px;
        margin: 0 0 18px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, #0d6879, #1ca3af);
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        box-shadow: 0 14px 28px rgba(24, 167, 184, 0.22);
    }

    .policy-mobile-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(4, 44, 58, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: 0.25s ease;
    }

    body.policy-menu-open .policy-mobile-backdrop {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .page-single-sidebar.policy-mobile-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: min(340px, 88vw);
        height: 100vh;
        overflow-y: auto;
        padding: 24px 18px;
        border-radius: 0 18px 18px 0;
        background: #fff;
        box-shadow: 14px 0 35px rgba(13, 64, 84, 0.18);
        transform: translateX(-105%);
        transition: transform 0.3s ease;
        background-color: #9ac6cf;
    }

        .page-single-sidebar.policy-mobile-sidebar.policy-sidebar-open,
        body.policy-menu-open .page-single-sidebar.policy-mobile-sidebar {
            transform: translateX(0) !important;
        }

        .page-single-sidebar.policy-mobile-sidebar .page-category-list {
            margin: 0;
        }

    .policy-sidebar-close {
        position: absolute;
        top: 17px;
        margin-left: auto;
        margin-bottom: 14px;
        width: 33px;
        height: 33px;
        border: 0;
        border-radius: 50%;
        background: #35aaba;
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 18px;
        cursor: pointer;
        box-shadow: 0 10px 22px rgba(13, 64, 84, 0.12);
        right: 5px;
        z-index: 10;
    }

    .service-single-content,
    .service-entry {
        max-width: 100%;
    }

    .page-category-list ul {
        padding: 0;
    }

        .page-category-list ul li {
            margin-bottom: 0;
            padding-bottom: 0;
        }



    .page-category-list {
        border-radius: 9px;
        padding: 13px;
    }


    .page-single-sidebar.policy-mobile-sidebar {
        padding: 26px 8px;
        border-radius: 0;
    }

    .page-category-list ul li a {
        font-size: 15px;
        min-height: 48px;
    }

    .policy-mobile-toggle {
        margin-bottom: 0
    }

    .service-entry {
        margin-bottom: 0;
    }
}

@media (max-width: 575px) {
    .policy-mobile-toggle {
        width: auto;
    }

    .kid-hero h1 {
        font-size: 30px;
        line-height: 1.2;
    }

    .kid-breadcrumb {
        flex-wrap: wrap;
        row-gap: 6px;
    }
}

/* Beneficiary dashboard mobile menu drawer */
.beni-mobile-menu-toggle,
.beni-mobile-menu-backdrop {
    display: none;
}

@media (max-width: 991px) {
    .benifi-dash-bord {
        position: relative;
        display: block;
    }

    .beni-mobile-menu-toggle {
        position: sticky;
        top: 76px;
        z-index: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 46px;
        padding: 0 18px;
        margin: 10px 0 0px;
        border: 0;
        border-radius: 8px;
        background: linear-gradient(135deg, #0d6879, #1ca3af);
        color: #fff;
        font-size: 15px;
        font-weight: 500;
        box-shadow: 0 14px 28px rgba(24, 167, 184, 0.22);
    }

    .beni-mobile-menu-backdrop {
        position: fixed;
        inset: 0;
        z-index: 99990;
        background: rgba(4, 44, 58, 0.45);
        opacity: 0;
        visibility: hidden;
        transition: 0.25s ease;
    }

    .benifi-dash-bord.beni-menu-open .beni-mobile-menu-backdrop {
        display: block;
        opacity: 1;
        visibility: visible;
    }

    .benifi-dash-bord .beni-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        width: min(360px, 88vw);
        height: 100vh;
        min-height: 100vh;
        overflow-y: auto;
        border-radius: 0 8px 8px 0 !important;
        transform: translateX(-105%);
        transition: transform 0.3s ease;
    }

    .benifi-dash-bord.beni-menu-open .beni-sidebar {
        transform: translateX(0);
    }

    .benifi-dash-bord .beni-main {
        width: 100%;
    }


    .benifi-dash-bord-wrap {
        padding: 0px 0;
    }



    .beneficiary-dashboard {
        padding: 15px 0;
    }

    .beneficiary-title h2 {
        font-size: 20px;
        color: #114c5c;
        font-weight: 500;
        margin-bottom: -2px;
    }

    .beneficiary-actions {
        display: none;
    }

    .track-bn-timeline-card h4 {
        font-size: 16px;
        color: #083344;
        margin-bottom: 0px;
    }


    .track-bn-timeline-card p {
        color: #5f6e6e;
        line-height: 1.2;
        margin-bottom: 6px;
        font-size: 15px;
    }

    .dashboard-card-header h3 {
        font-size: 17px;
    }

    #dashboard-tab {
        padding: 0px;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0px;
        padding: 0;
        min-height: calc(100vh - 100%);
        box-shadow: none !important;
        backdrop-filter: none !important;
        overflow: hidden;
        height: 100%;
    }

    .benifi-dash-bord .content-card {
        padding: 15px;
        border-radius: 9px !important;
    }

    .benifi-dash-bord .beni-tab-content.active {
        margin: 15px 0;
        border-radius: 9px !important;
    }

    .bn-profile-title {
        margin-bottom: 15px;
    }
}

@media (max-width: 575px) {
    .beni-mobile-menu-toggle {
        width: auto;
    }
}

/* Dubai font enforcement */
body,
button,
input,
select,
textarea,
a,
p,
span,
li,
label {
    font-family: var(--default-font);
}

h1,
h2,
h3,
h4,
h5,
h6,
strong,
b,
.btn-default,
button {
    font-family: var(--accent-font);
    font-weight: 500;
}

.language-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 30, 38, 0.42);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    z-index: 99999;
}

    .language-popup-overlay.active {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.language-popup {
    position: relative;
    width: min(420px, 100%);
    background: #ffffff;
    border: 1px solid rgba(17, 76, 92, 0.12);
    border-radius: 12px;
    box-shadow: 0 24px 70px rgba(17, 76, 92, 0.22);
    padding: 13px;
    transform: translateY(14px) scale(0.98);
    transition: transform 0.25s ease;
}

.language-popup-overlay.active .language-popup {
    transform: translateY(0) scale(1);
}

.language-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: #eef7f8;
    color: #114c5c;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.language-popup-head {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 22px;
    padding-right: 28px;
}

.language-popup-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #114c5c, #15999b);
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.language-popup-head h3 {
    margin: 0 0 0px;
    color: #114c5c;
    font-size: 18px;
}

.language-popup-head p {
    margin: 0;
    color: #65757b;
    font-size: 15px;
    line-height: 1.35;
}

.language-options {
    display: grid;
    gap: 9px;
    grid-template-columns: repeat(2, 1fr);
}

.language-option {
    width: 100%;
    border: 1px solid rgba(17, 76, 92, 0.14);
    background: #f8fcfc;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    text-align: left;
    color: #114c5c;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

    .language-option:hover {
        border-color: #15999b;
        background: #eefafa;
        transform: translateY(-1px);
    }

.language-flag {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(17, 76, 92, 0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex: 0 0 auto;
}

.language-flag-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.aid-app-page {
    padding: 54px 0;
    background: linear-gradient(0deg, #fff 0%, rgba(159, 206, 207, 0.18) 50%, #fff 100%);
}

.aid-app-hero {
    max-width: 820px;
    margin: 0;
    text-align: left;
}

.aid-app-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0d697a;
    background: #eefafa;
    border: 1px solid #cde8ec;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 14px;
    margin-bottom: 12px;
}

.aid-app-hero h1 {
    color: #0d4358;
    font-size: 30px;
    margin-bottom: 1px;
}

.aid-app-hero p {
    color: #607785;
    font-size: 16px;
    line-height: 1.6;
}

.aid-app-shell {
    display: grid;
    grid-template-columns: 330px 1fr;
    gap: 22px;
    align-items: start;
}

.aid-app-steps,
.aid-app-form {
    background: #fff;
    border: 1px solid #dceef2;
    border-radius: 16px;
    box-shadow: 0 18px 42px rgba(13, 64, 84, 0.07);
}

.aid-app-steps {
    display: grid;
    gap: 10px;
    padding: 16px;
    position: sticky;
    top: 100px;
    background: linear-gradient(180deg, #0d6879 0%, #1ca3af 100%);
}

.aid-app-step {
    border: 0px solid #e3eff2;
    border-radius: 12px;
    background: #f8fcfd;
    padding: 13px;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    text-align: left;
    cursor: pointer;
    color: #244d5f;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.92);
}

    .aid-app-step span {
        width: 29px;
        height: 29px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        background: #e8f6f8;
        color: #0d697a;
        font-weight: 500;
        grid-row: span 2;
        font-size: 14px;
    }

    .aid-app-step strong,
    .aid-app-step small {
        display: block;
    }

    .aid-app-step small {
        color: #fff;
        font-size: 12px;
        line-height: 1.35;
    }

    .aid-app-step.active {
        border-color: transparent;
        background: rgba(255,255,255,0.22);
        color: #fff;
    }

        .aid-app-step.active span {
            background: rgb(255, 255, 255);
            color: #0e6a7b;
        }

        .aid-app-step.active small {
            color: rgba(255,255,255,0.78);
        }

.aid-app-form {
    padding: 24px;
}

.aid-app-panel {
    display: none;
}

    .aid-app-panel.active {
        display: block;
    }

.aid-app-panel-head {
    margin-bottom: 20px;
    border-bottom: 1px solid #e4eff2;
    padding-bottom: 14px;
}

    .aid-app-panel-head h2 {
        color: #0d4358;
        font-size: 24px;
        margin-bottom: 4px;
    }

    .aid-app-panel-head p {
        color: #607785;
        margin: 0;
        font-size: 17px;
    }

.aid-uae-pass-warning {
    color: #7a4b00;
    background: #fff7df;
    border: 1px solid #f0c36a;
}

    .aid-uae-pass-warning svg {
        color: #a86400;
    }

.ne-tab-step-form .ne-tsf-pass.aid-uae-pass-warning strong {
    color: #7a4b00;
}

.ne-tab-step-form .ne-tsf-pass.aid-uae-pass-warning span {
    color: #8d651f;
}

.aid-uae-pass-button {
    border: 0;
    border-radius: 7px;
    background: #b66b00;
    color: #fff;
    padding: 8px 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: auto;
}

    .aid-uae-pass-button:hover {
        background: #925500;
    }

    .aid-uae-pass-button:disabled {
        opacity: .7;
        cursor: wait;
    }

    .aid-uae-pass-button img {
        width: 21px;
        height: 21px;
        object-fit: contain;
    }

.aid-saved-details {
    margin-bottom: 22px;
    border: 1px solid #cfe5e9;
    border-radius: 12px;
    overflow: hidden;
    background: #fbfeff;
}

.aid-saved-details-head {
    padding: 16px 18px;
    background: #edf8fa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

    .aid-saved-details-head h3 {
        margin: 0 0 3px;
        color: #0d4358;
        font-size: 18px;
    }

        .aid-saved-details-head h3 i {
            color: #0d8897;
            margin-right: 6px;
        }

    .aid-saved-details-head p {
        margin: 0;
        color: #607785;
        font-size: 13px;
    }

.aid-saved-details-edit {
    color: #0d697a;
    font-weight: 700;
    white-space: nowrap;
}

.aid-saved-details-groups {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.aid-saved-details details {
    border: 1px solid #dceef2;
    border-radius: 9px;
    background: #fff;
}

.aid-saved-details summary {
    cursor: pointer;
    padding: 12px 14px;
    color: #0d4358;
    font-weight: 700;
}

    .aid-saved-details summary i {
        color: #0d8897;
        margin-right: 7px;
    }

.aid-saved-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    padding: 0 12px 12px;
}

.aid-saved-detail {
    min-width: 0;
    padding: 9px 10px;
    border-radius: 7px;
    background: #f6fafb;
}

    .aid-saved-detail span, .aid-saved-detail strong {
        display: block;
        overflow-wrap: anywhere;
    }

    .aid-saved-detail span {
        color: #6d818c;
        font-size: 11px;
        margin-bottom: 3px;
    }

    .aid-saved-detail strong {
        color: #244d5f;
        font-size: 13px;
        font-weight: 600;
    }

.aid-saved-family {
    margin: 0 12px 12px;
    padding-top: 10px;
    border-top: 1px solid #e6f0f2;
}

    .aid-saved-family h4 {
        margin: 0 0 8px;
        color: #0d697a;
        font-size: 14px;
    }

.aid-saved-empty {
    margin: 0 12px 12px;
    color: #607785;
    font-size: 13px;
}

@media (max-width: 767px) {
    .aid-uae-pass-warning {
        align-items: flex-start;
    }

    .aid-uae-pass-button {
        width: 100%;
        justify-content: center;
        margin-left: 0;
    }

    .aid-saved-details-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .aid-saved-detail-grid {
        grid-template-columns: 1fr;
    }
}

.aid-app-section {
    margin-bottom: 20px;
}

.aid-app-grid.aid-assistance-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.aid-assistance-grid .aid-app-full {
    grid-column: 1 / -1;
}

@media (max-width: 991px) {
    .aid-app-grid.aid-assistance-grid {
        grid-template-columns: 1fr;
    }
}

.aid-eligibility-card {
    border: 1px solid #dceef2;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fcfd 0%, #eff9fb 100%);
    padding: 18px;
}

.aid-eligibility-label {
    display: block;
    margin-bottom: 10px;
    color: #0d4358;
    font-size: 17px;
    font-weight: 700;
}

.aid-eligibility-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

    .aid-eligibility-choice label {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: auto;
        cursor: pointer;
        padding: 14px 18px;
        border: 1px solid #d4e5ea;
        border-radius: 16px;
        background: #fff;
        color: #0d4358;
        font-weight: 500;
        transition: 0.2s ease;
        box-shadow: 0 10px 24px rgba(17, 76, 92, 0.04);
    }

    .aid-eligibility-choice input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .aid-eligibility-choice label:hover {
        border-color: #9bd5d8;
        background: #f5fbfb;
    }

    .aid-eligibility-choice input:checked + span,
    .aid-eligibility-choice label.is-active {
        color: #fff;
    }

    .aid-eligibility-choice label.is-active {
        border-color: #15999b;
        background: linear-gradient(135deg, #15999b, #114c5c);
        box-shadow: 0 14px 32px rgba(21, 153, 155, 0.28);
    }

    .aid-eligibility-choice label span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
    }

.aid-eligibility-help {
    margin: 1px 0 0;
    color: #607785;
    line-height: 1.6;
    font-size: 16px;
}

.aid-dependent-fields {
    display: grid;
    gap: 10px;
    margin-top: 16px;
    position: relative;
    padding-top: 42px;
}

.aid-dependent-label {
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    color: #0d4358;
    font-size: 14px;
    font-weight: 700;
}

.aid-dependent-list {
    display: grid;
    gap: 12px;
}

.aid-dependent-item {
    position: relative;
    min-width: 0;
    padding: 13px;
    border: 1px solid #dceef2;
    border-radius: 9px;
    background: #fff;
}

    .aid-dependent-item.selected {
        border-color: #8bced3;
        background: #fbffff;
    }

    .aid-dependent-item > div:first-child {
        display: none;
    }

    .aid-dependent-item h4 {
        display: flex;
        align-items: center;
        min-height: 34px;
        margin: 0 92px 10px 0;
        color: #0d4358;
        font-size: 15px;
        font-weight: 700;
        text-transform: capitalize;
    }

.aid-dependent-details-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
}

    .aid-dependent-details-grid .aid-saved-detail {
        padding: 12px 11px;
        background: #f4f8f9;
    }

        .aid-dependent-details-grid .aid-saved-detail span {
            color: #52738b;
            font-size: 12px;
        }

        .aid-dependent-details-grid .aid-saved-detail strong {
            color: #104d76;
            font-size: 14px;
            font-weight: 700;
        }

.aid-dependent-item button {
    position: absolute;
    top: 13px;
    right: 13px;
    min-width: 76px;
    min-height: 34px;
    border: 1px solid #b9dce0;
    border-radius: 7px;
    padding: 6px 11px;
    color: #0d697a;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
}

.aid-dependent-item.selected button {
    color: #fff;
    border-color: #15999b;
    background: #15999b;
}

.aid-dependent-item button:hover {
    color: #fff;
    background: #0d697a;
}

.aid-dependent-modal-backdrop {
    position: fixed;
    z-index: 10050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(5, 35, 45, .58);
}

.aid-dependent-modal {
    width: min(700px, 100%);
    max-height: calc(100vh - 40px);
    overflow: auto;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 68px rgba(0, 0, 0, .28);
}

.aid-dependent-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid #dceef2;
}

    .aid-dependent-modal-head h3 {
        margin: 0;
        color: #0d4358;
        font-size: 20px;
    }

    .aid-dependent-modal-head button {
        border: 0;
        padding: 5px;
        color: #607785;
        background: transparent;
        font-size: 22px;
    }

.aid-dependent-modal-form {
    padding: 20px;
}

.aid-dependent-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .aid-dependent-form-grid label {
        display: grid;
        gap: 6px;
        color: #0d4358;
        font-size: 13px;
        font-weight: 700;
    }

    .aid-dependent-form-grid input, .aid-dependent-form-grid select {
        width: 100%;
        min-height: 43px;
        padding: 9px 11px;
        border: 1px solid #cfe2e7;
        border-radius: 8px;
        color: #244d5f;
        background: #fff;
    }

.aid-dependent-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.aid-saved-details-groups details > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .aid-saved-details-groups details > summary > span {
        min-width: 0;
    }

.aid-saved-details-edit {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    border: 1px solid #15999b;
    border-radius: 7px;
    padding: 6px 11px;
    color: #0d697a;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

    .aid-saved-details-edit:hover {
        color: #fff;
        background: #15999b;
    }

.aid-record-modal-backdrop {
    position: fixed;
    z-index: 10040;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 22px;
    background: rgba(5, 35, 45, .65);
}

.aid-record-modal {
    width: min(1040px, 100%);
    max-height: calc(100vh - 44px);
    overflow: hidden;
    border-radius: 15px;
    background: #f7fafb;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

.aid-record-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding: 18px 22px;
    border-bottom: 1px solid #dce8eb;
    background: #fff;
}

    .aid-record-modal-head h3 {
        margin: 0;
        color: #0d4358;
        font-size: 21px;
    }

        .aid-record-modal-head h3 i {
            margin-right: 7px;
            color: #15999b;
        }

    .aid-record-modal-head p {
        margin: 5px 0 0;
        color: #607785;
        font-size: 13px;
    }

    .aid-record-modal-head > button {
        border: 0;
        padding: 4px;
        color: #607785;
        background: transparent;
        font-size: 23px;
        cursor: pointer;
    }

.aid-record-modal-body {
    max-height: calc(100vh - 140px);
    overflow: auto;
    padding: 20px;
}

    .aid-record-modal-body .content-card {
        margin: 0;
    }

.aid-saved-detail.is-missing {
    border: 1px solid #dc3545;
    background: #fff5f6;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08);
}

    .aid-saved-detail.is-missing > span {
        color: #a61e2b;
    }

    .aid-saved-detail.is-missing > strong {
        color: #a61e2b;
    }

    .aid-saved-detail.is-missing > small {
        display: flex;
        align-items: center;
        gap: 5px;
        margin-top: 6px;
        color: #c62838;
        font-size: 11px;
        font-weight: 700;
    }

.aid-record-modal-body input:required:invalid,
.aid-record-modal-body select:required:invalid,
.aid-record-modal-body textarea:required:invalid {
    border-color: #dc3545 !important;
    background-color: #fff5f6 !important;
    box-shadow: 0 0 0 2px rgba(220, 53, 69, .08);
}

.aid-record-modal-body input:required:valid,
.aid-record-modal-body select:required:valid,
.aid-record-modal-body textarea:required:valid {
    border-color: #72b9a5;
}

@media (max-width: 575px) {
    .aid-saved-details-groups details > summary {
        align-items: flex-start;
    }

    .aid-saved-details-edit {
        padding: 5px 8px;
        font-size: 11px;
    }

    .aid-record-modal-backdrop {
        padding: 10px;
    }

    .aid-record-modal {
        max-height: calc(100vh - 20px);
    }

    .aid-record-modal-head {
        padding: 15px;
    }

    .aid-record-modal-body {
        max-height: calc(100vh - 115px);
        padding: 12px;
    }
}

.aid-add-dependent-button {
    position: absolute;
    top: 0;
    right: 0;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 7px;
    color: #fff;
    border: 1px solid #0d7c8a;
    background: #0d7c8a;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
}

    .aid-add-dependent-button:hover {
        color: #fff;
        border-color: #0a5864;
        background: #0a5864;
    }

.aid-dependent-fields[hidden],
.aid-app-message[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .aid-dependent-details-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .aid-dependent-form-grid {
        grid-template-columns: 1fr;
    }

    .aid-dependent-details-grid {
        grid-template-columns: 1fr;
    }

    .aid-dependent-fields {
        padding-top: 84px;
    }

    .aid-add-dependent-button {
        left: 0;
        right: auto;
    }
}

.aid-app-message {
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 14px 16px;
    font-weight: 500;
    line-height: 1.6;
}

    .aid-app-message.is-info {
        background: #eef7fb;
        border-color: #cfe4ef;
        color: #1f5d75;
        font-size: 16px;
    }

    .aid-app-message.is-success {
        background: #edf8f4;
        border-color: #cce9dc;
        color: #0c6f47;
    }

    .aid-app-message.is-warning {
        background: #fff7e8;
        border-color: #f4dfb2;
        color: #8c5b00;
    }

    .aid-app-message.is-error {
        background: #fff0f2;
        border-color: #f1c7cf;
        color: #b3223d;
    }

.aid-app-section h3 {
    color: #0d4358;
    font-size: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
}

    .aid-app-section h3 i {
        color: #15999b;
    }

.aid-app-grid,
.aid-upload-grid,
.aid-review-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

    .aid-app-grid label,
    .aid-upload-grid label,
    .aid-review-grid div {
        border: 1px solid #dceef2;
        border-radius: 12px;
        background: #f8fcfd;
        padding: 14px;
        color: #315568;
        font-size: 16px;
    }

    .aid-app-grid input,
    .aid-app-grid select,
    .aid-app-grid textarea {
        width: 100%;
        border: 1px solid #cde2e8;
        border-radius: 8px;
        background: #fff;
        color: #0d4358;
        padding: 10px 12px;
        margin-top: 8px;
    }

        .aid-app-grid input[aria-invalid="true"],
        .aid-app-grid select[aria-invalid="true"],
        .aid-app-grid textarea[aria-invalid="true"] {
            border-color: #d84d4d;
            background: #fff8f8;
            box-shadow: 0 0 0 3px rgba(216, 77, 77, 0.12);
        }

.aid-dependent-fields.has-error .aid-dependent-list {
    padding: 8px;
    border: 1px solid #d84d4d;
    border-radius: 10px;
    background: #fff8f8;
}

.aid-app-grid textarea {
    min-height: 92px;
    resize: vertical;
}

.aid-reason-label > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.aid-generate-reason-button {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #0d8f9d;
    border-radius: 7px;
    padding: 6px 10px;
    color: #0d697a;
    background: #edf9fa;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

    .aid-generate-reason-button:hover {
        color: #fff;
        background: #0d7c8a;
    }

    .aid-generate-reason-button:disabled {
        cursor: wait;
        opacity: .72;
    }

.aid-ai-reason-error {
    display: block;
    margin-top: 7px;
    color: #c23535;
    font-size: 12px;
}

.aid-app-full {
    grid-column: 1 / -1;
}

.aid-upload-grid label {
    cursor: pointer;
    transition: 0.25s ease;
}

    .aid-upload-grid label:hover {
        border-color: #15999b;
        background: #effafa;
    }

.aid-upload-grid i {
    font-size: 24px;
    color: #15999b;
    margin-bottom: 10px;
}

.aid-upload-grid strong,
.aid-upload-grid small,
.aid-review-grid strong,
.aid-review-grid span {
    display: block;
}

.aid-upload-grid small,
.aid-review-grid span {
    color: #607785;
    margin-top: 4px;
}

.aid-upload-grid input {
    margin-top: 12px;
    width: 100%;
}

.aid-upload-group-title {
    grid-column: 1 / -1;
    margin: 22px 0 0;
    padding: 14px 0 8px;
    border-bottom: 1px solid rgba(17, 76, 92, 0.18);
    color: #114c5c;
    font-size: 20px;
    line-height: 1.3;
}

    .aid-upload-group-title:first-child {
        margin-top: 0;
    }

.aid-terms-box,
.aid-reference-card {
    border: 1px solid #dceef2;
    border-radius: 14px;
    background: #f8fcfd;
    padding: 18px;
    color: #315568;
    line-height: 1.65;
}

.aid-app-check {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
    color: #244d5f;
}

.aid-reference-card {
    text-align: center;
}

    .aid-reference-card span,
    .aid-reference-card strong {
        display: block;
    }

    .aid-reference-card strong {
        color: #0d4358;
        font-size: 26px;
        margin: 3px 0 0;
    }

.aid-app-actions {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #e4eff2;
    margin-top: 22px;
    padding-top: 18px;
}

.aid-app-primary,
.aid-app-secondary {
    min-height: 44px;
    border-radius: 8px;
    padding: 0 20px;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
}

.aid-app-primary {
    background: linear-gradient(135deg, #15999b, #114c5c);
    color: #fff;
}

.aid-app-secondary {
    background: #eef6f8;
    color: #0d697a;
}

    .aid-app-primary:disabled,
    .aid-app-secondary:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

@media (max-width: 991px) {
    .aid-app-shell {
        grid-template-columns: 1fr;
    }

    .aid-app-steps {
        position: static;
    }
}

@media (max-width: 575px) {
    .aid-app-page {
        padding: 32px 0;
    }

    .aid-app-hero h1 {
        font-size: 28px;
    }

    .aid-app-form {
        padding: 16px;
    }

    .aid-app-grid,
    .aid-upload-grid,
    .aid-review-grid {
        grid-template-columns: 1fr;
    }

    .aid-eligibility-choice {
        flex-direction: column;
    }

    .aid-app-actions {
        flex-direction: column;
    }
}

.language-option strong,
.language-option small {
    display: block;
}

.language-option strong {
    color: #114c5c;
    font-size: 17px;
    line-height: 1.2;
}

.language-option small {
    color: #65757b;
    font-size: 11px;
    line-height: 1.35;
    margin-top: 3px;
}

@media (max-width: 575px) {
    .language-popup {
        border-radius: 8px;
        padding: 20px;
    }

    .language-option {
        border-radius: 8px;
    }
}


@media (max-width: 768px) {
    .abt-re-new .abt-hero-card h3 {
        font-size: 20px;
        margin-bottom: 7px;
        color: #fff;
    }

    .abt-re-new .abt-hero-card {
        padding: 15px;
    }

    .abt-re-new .abt-hero-card-icon {
        width: 65px;
        height: 65px;
        border-radius: 999px;
        background: rgba(255,255,255,0.2);
        display: grid;
        place-items: center;
        font-size: 27px;
        margin-bottom: 8px;
        border: dashed 2px #abcbcb;
    }



    .abt-re-new .abt-stat {
        align-items: anchor-center;
    }

    .abt-re-new .abt-stat {
        background: rgba(255,255,255,0.86);
        border: 1px solid #cbe5ed;
        border-radius: 12px;
        padding: 13px;
        display: flex;
        gap: 17px;
        box-shadow: 0 12px 30px rgba(11, 82, 100, 0.07);
        transition: 0.3s;
    }

    .abt-re-new .abt-title-small {
        color: #159aa3;
        font-size: 13px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 4px;
    }

    .abt-re-new .abt-brief-card {
        border-radius: 13px;
    }


    .abt-re-new .abt-brief-card {
        padding: 10px;
        gap: 0px;
    }


    .abt-re-new .abt-brief-content h3 {
        font-size: 20px;
        color: #0b425a;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .abt-re-new .abt-brief-content p {
        color: #556875;
        font-size: 17px;
        line-height: 1.4;
        margin-bottom: 20px;
    }

    .abt-re-new .abt-info-card {
        border-radius: 10px;
        padding: 17px;
    }


        .abt-re-new .abt-info-card p {
            color: #5a6f7d;
            font-size: 16px;
            line-height: 1.2;
            position: relative;
            z-index: 2;
            margin-bottom: 0;
        }

    .abt-re-new .abt-info-icon {
        font-size: 23px;
        margin-bottom: 7px;
    }

    .abt-re-new .abt-section-head p {
        font-size: 16px;
        line-height: 1.3;
    }

    .abt-re-new .abt-section-head p {
        margin-bottom: 0;
    }

    .abt-re-new .abt-activity-card {
        padding: 15px;
    }

    .abt-re-new .abt-list li {
        padding: 6px 12px;
        border-radius: 6px;
    }

    .abt-re-new .abt-card-top h3 {
        color: #0b425a;
        font-size: 19px;
        font-weight: 500;
    }

    .abt-re-new .abt-project-card {
        padding: 15px;
    }

        .abt-re-new .abt-project-card p {
            color: #5a6f7d;
            font-size: 17px;
            line-height: 1.35;
            margin-bottom: 0;
        }

    .policy-list--wrt .policy-breadcrumb {
        margin-bottom: 5px;
    }

    .policy-layout {
        padding: 0px 0 20px 0;
    }


        .policy-layout h3 {
            font-size: 19px;
        }

        .policy-layout p {
            font-size: 15px;
            line-height: 20px;
            margin-top: 10px;
        }

    .policy-list--wrt .policy-icon {
        width: 60px;
        height: 60px;
        border-radius: 999px;
        background: linear-gradient(135deg, #116c7a, #1fa7ad);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 25px;
        flex-shrink: 0;
        box-shadow: 0 12px 24px rgba(17,108,122,0.16);
        border: dashed 1px #fff;
    }

    .policy-list--wrt .policy-card h3 {
        font-size: 18px;
    }

    .policy-list--wrt .policy-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 39px;
        padding: 10px 16px;
        border-radius: 7px;
        background: #e8f7f8;
        color: #087489;
        text-decoration: none;
        font-size: 16px;
        font-weight: 500;
        transition: 0.3s;
        position: relative;
        z-index: 2;
        border: solid 1px #9dcdd1;
    }

    .policy-list--wrt .policy-card p {
        color: #5a6f7d;
        font-size: 16px;
        line-height: 1.25;
        margin-bottom: 14px;
        position: relative;
        z-index: 2;
    }

    .mb-30 {
        margin-bottom: 10px;
    }

    .quk-dnt .top-right {
        margin-bottom: 15px;
        color: #334155;
        font-size: 14px;
    }

    .apply-info__card {
        gap: 5px;
    }


    .apply-info__right {
        position: relative;
        z-index: 1;
        padding: 14px 15px;
    }


    .quk-dnt .custom-input {
        padding: 10px 20px;
        font-size: 16px;
        outline: none;
        margin-bottom: 13px;
    }

    .quk-dnt .card-option {
        padding: 9px 9px;
    }

    .crd-imgs-op {
        width: 37px;
        background: #ecf7f7;
        border-radius: 50%;
        padding: 7px;
        border: dashed 1px #11b2b5;
        height: 37px;
    }

    .quk-dnt .category-grid, .quk-dnt .payment-grid {
        gap: 8px;
    }

    .quk-dnt .amount-grid, .quk-dnt .category-grid, .quk-dnt .payment-grid {
        gap: 11px;
    }


    .amount-item span {
        height: 38px;
    }


    .provider-toggle {
        margin-bottom: 0;
    }

    .quk-dnt .card-option {
        border: 1px solid #c4c4c4;
        border-radius: 7px;
    }



    .abt-re-new .abt-btn {
        min-height: 50px;
        padding: 7px 22px;
        border-radius: 9px;
        border: 0;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        transition: 0.3s;
    }


    .k-wraps .mobile-timeline {
        padding: 15px 10px;
        background: #f9fcfd;
        border-bottom: 1px solid #edf1f4;
    }

    .k-wraps .mobile-step p {
        color: #687b89;
        font-size: 13px;
        margin-bottom: 0;
    }

    .k-wraps .subtitle {
        font-size: 15px;
        margin-bottom: 15px;
    }


    .donation-options {
        grid-template-columns: repeat(2, 2fr);
    }


    .sdm-s {
        margin-bottom: 9px;
        background-color: #e5f6fa70;
        display: inline-block;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: dashed 1px #16808bc4;
        padding: 14px;
    }

    .donation-option .description {
        font-size: 13px;
        color: #555;
    }

    .h-d-wrp .upload-card p {
        color: #657f89;
        margin-bottom: 14px;
        font-size: 14px;
    }

    .h-d-wrp #image-preview {
        margin-top: 0;
    }

    .camera-btn {
        background-color: #079ca1;
        color: white;
        padding: 11px 20px;
        font-size: 16px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: 0.3s ease;
    }

    .upload-card {
        margin-bottom: 15px;
    }


    .additional-field {
        padding: 15px;
    }

    .k-wraps .step-actions {
        margin-top: 12px;
    }



    .k-wraps .summary-head {
        background: linear-gradient(135deg, #006f7c, #005762);
        color: #fff;
        padding: 12px;
        display: flex;
        gap: 7px;
        align-items: center;
        font-size: 16px;
        font-weight: 500;
    }



    .k-wraps .summary-body {
        padding: 13px 10px;
        display: grid;
        gap: 0px;
        grid-template-columns: repeat(1, 2fr);
    }
}

/* In-kind after-payment responsive */
.pay-afrer-wrap {
    max-width: 100%;
    overflow-x: hidden;
}

    .pay-afrer-wrap .container {
        width: 100%;
    }

.after-payment-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.after-payment-message {
    margin-top: 14px;
    padding: 10px 14px;
    border: 1px solid #b7e0de;
    border-radius: 8px;
    background: #edfbfc;
    color: #114c5c;
    font-size: 15px;
    line-height: 1.4;
}

.receipt-popup {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.receipt-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(3, 24, 30, 0.72);
    backdrop-filter: blur(7px);
}

.receipt-popup__dialog {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: 92vh;
    overflow: hidden;
    border-radius: 14px;
    background: #f7fbfc;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
}

.receipt-popup__close {
    position: absolute;
    right: 14px;
    top: 12px;
    z-index: 4;
    width: 38px;
    height: 38px;
    border: 1.5px solid #0d7880;
    border-radius: 50%;
    background: #fff;
    color: #0d7880;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
}

.receipt-popup__scroll {
    max-height: 92vh;
    overflow-y: auto;
    padding: 24px 0;
}

.receipt-popup .print-screens-wrp {
    background: transparent;
}

    .receipt-popup .print-screens-wrp .container {
        max-width: 1040px;
    }

.print-screens.is-exporting-receipt .print-btn,
.print-screens.is-exporting-receipt .footer-actions {
    display: none !important;
}

.pay-afrer-wrap .donation-summary,
.pay-afrer-wrap .option-box,
.pay-afrer-wrap .impact-box,
.pay-afrer-wrap .secure-box {
    min-width: 0;
}

.pay-afrer-wrap .summary-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

    .pay-afrer-wrap .summary-row strong {
        overflow-wrap: anywhere;
        text-align: right;
    }

.pay-afrer-wrap .uploaded-images {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

    .pay-afrer-wrap .uploaded-images img {
        width: 92px;
        height: 92px;
        object-fit: cover;
        border-radius: 8px;
    }

.pay-afrer-wrap .action-buttons button,
.pay-afrer-wrap .option-buttons button,
.pay-afrer-wrap .contnu-wrap {
    min-height: 52px;
}

@media (max-width: 991px) {
    .pay-afrer-wrap {
        padding: 32px 0;
    }

    .after-payment-layout {
        flex-direction: column;
    }

    .success-left,
    .success-right {
        width: 100%;
        flex: none;
    }
}

@media (max-width: 575px) {
    .pay-afrer-wrap {
        padding: 22px 0;
    }

        .pay-afrer-wrap .container {
            padding-left: 14px;
            padding-right: 14px;
        }

    .success-left,
    .success-right .option-box,
    .success-right .impact-box {
        border-radius: 8px;
        padding: 16px;
    }

        .success-left h1 {
            font-size: 20px;
            line-height: 1.2;
        }

        .success-left p,
        .option-box p,
        .secure-box {
            font-size: 14px;
            line-height: 1.45;
        }

    .pay-afrer-wrap .summary-row {
        display: block;
        padding: 12px 15px;
    }

        .pay-afrer-wrap .summary-row span,
        .pay-afrer-wrap .summary-row strong {
            display: block;
            text-align: left;
        }

        .pay-afrer-wrap .summary-row strong {
            margin-top: 5px;
        }

    .pay-afrer-wrap .uploaded-images {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

        .pay-afrer-wrap .uploaded-images img {
            width: 100%;
            height: auto;
            aspect-ratio: 1;
        }

    .action-buttons,
    .option-buttons,
    .secure-box {
        flex-direction: inherit;
    }

    .action-buttons {
        flex-direction: column;
    }

    .option-buttons button,
    .pay-afrer-wrap .contnu-wrap {
        width: 100%;
    }

    .impact-stats {
        display: grid;
        grid-template-columns: 1fr;
    }

    .impact-stat {
        width: 100%;
    }

    .donation-card .content h3 {
        font-size: 18px;
        text-align: center;
    }

    .donation-card .prog-cntnt p {
        min-height: auto;
        line-height: 19px;
        margin-bottom: 13px;
    }

    .ptoject-wr .amounts {
        margin-bottom: 11px;
        padding: 10px 10px;
    }

    .donate-row button {
        height: 39px;
    }



    .dn-details-p {
        padding: 16px;
        border-radius: 10px;
    }



    .sr-imgs img {
        border-radius: 10px;
        width: 100%;
    }

    .page-single-sidebar {
        position: initial;
        margin-bottom: 0;
    }

    .dn-details-p .form-row {
        display: flex;
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        flex-direction: column;
    }


    .dn-details-p .btn-row {
        flex-direction: column;
        gap: 0px;
        margin-top: 0;
    }

    .dn-details-p .desc {
        color: #444;
        line-height: 1.3;
        margin-bottom: 17px;
        font-weight: 500;
    }



    .dn-details-p h1 {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .dn-details-p .qty-box button {
        width: 33px;
        height: 38px;
    }



    .amounts {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0;
    }

    .provider-toggle {
        display: grid;
        justify-content: center;
        gap: 9px;
        margin-bottom: 8px;
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Submit Aid Request professional responsive */
.sad-hero-new,
.sad-section {
    overflow-x: hidden;
}

.sad-hero-new {
    border-radius: 12px !important;
    margin: 0 auto;
}

    .sad-hero-new .container,
    .sad-section .container {
        width: 100%;
    }

.sad-hero-new-grid {
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    gap: 42px;
}

.sad-hero-new h1 {
    font-size: 40px;
    line-height: 1.08;
}

.sad-hero-new p,
.sad-section-head p,
.sad-doc-list li,
.sad-notice p,
.sad-check {
    line-height: 1.55;
}

.sad-hero-stats,
.sad-info-grid,
.sad-doc-layout,
.sad-doc-list,
.sad-contact-modern,
.sad-apply-box {
    min-width: 0;
}

.sad-hero-img-card {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

    .sad-hero-img-card img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        display: block;
    }

.sad-floating-card {
    max-width: calc(100% - 28px);
}

.sad-contact-modern {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.sad-contact-modern-box,
.sad-info-card,
.sad-doc-group,
.sad-side-card,
.sad-notice,
.sad-apply-box {
    border-radius: 12px;
}

    .sad-contact-modern-box strong,
    .sad-doc-list li,
    .sad-check span {
        overflow-wrap: anywhere;
    }

.sad-info-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sad-doc-layout {
    grid-template-columns: minmax(260px, 310px) minmax(0, 1fr);
}

.sad-doc-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sad-apply-box {
    grid-template-columns: minmax(0, 1fr) auto;
}

    .sad-btn,
    .sad-apply-box .sad-btn {
        text-align: center;
        white-space: normal;
    }

@media (max-width: 1199px) {
    .sad-hero-new-grid {
        grid-template-columns: 1fr;
    }

    .sad-hero-new-content {
        max-width: 100%;
    }

    .sad-hero-new-visual {
        max-width: 720px;
        width: 100%;
    }
}

@media (max-width: 991px) {
    .sad-hero-new {
        padding: 44px 0 38px;
    }

    .sad-info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sad-doc-layout,
    .sad-apply-box {
        grid-template-columns: 1fr;
    }

    .sad-side-card {
        position: relative;
        top: auto;
    }

    .sad-apply-box .sad-btn {
        width: 100%;
    }
}

@media (max-width: 575px) {
    section:has(.sad-hero-new) {
        padding: 8px !important;
    }

    .sad-hero-new {
        padding: 28px 0 24px;
        border-radius: 8px !important;
    }

        .sad-hero-new .container,
        .sad-section .container {
            padding-left: 14px;
            padding-right: 14px;
        }

    .sad-container {
        width: 100%;
    }

    .sad-hero-badge {
        max-width: 100%;
        border-radius: 999px;
        font-size: 12px;
        padding: 8px 12px;
    }

    .sad-hero-new h1 {
        font-size: 22px;
        line-height: 1.33;
        letter-spacing: 0;
    }

    .sad-hero-new p {
        font-size: 15px;
        margin-top: 14px;
    }

    .sad-hero-stats {
        grid-template-columns: 3f 1fr;
        gap: 10px;
        margin-top: 20px;
    }

        .sad-hero-stats div,
        .sad-info-card,
        .sad-doc-group,
        .sad-side-card,
        .sad-notice,
        .sad-apply-box,
        .sad-contact-modern-box {
            border-radius: 8px;
        }

    .sad-hero-actions,
    .sad-contact-modern,
    .sad-notice {
        display: grid;
        grid-template-columns: 1fr;
    }

        .sad-hero-actions .sad-btn,
        .sad-btn {
            width: 100%;
        }

    .sad-floating-card {
        position: static;
        margin: 10px 0 0;
        display: none;
    }

    .sad-info-grid,
    .sad-doc-list {
        grid-template-columns: 1fr;
    }

    .sad-section {
        padding: 24px 0;
    }

    .sad-section-head {
        text-align: left;
        margin-bottom: 22px;
    }

        .sad-section-head h2 {
            font-size: 21px;
        }

    .sad-info-card,
    .sad-doc-group,
    .sad-side-card,
    .sad-notice,
    .sad-apply-box {
        padding: 16px;
    }

    .sad-info-icon {
        width: 42px;
        height: 42px;
        font-size: 34px;
        margin-bottom: 12px;
    }

    .sad-doc-title {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

        .sad-doc-title h3 {
            font-size: 20px;
        }

        .sad-doc-title span {
            width: fit-content;
            font-size: 14px;
            padding: 7px 12px;
        }

    .sad-doc-list li {
        font-size: 15px;
        padding: 12px;
    }

    .sad-notice-icon {
        width: 40px;
        height: 40px;
        flex-basis: 40px;
    }

    .sad-check {
        font-size: 15px;
    }

    .sad-hero-new-visual {
        position: relative;
        border-radius: 20px;
        overflow: hidden;
        border: 00;
    }
}



@media (max-width: 768px) {

    .tabs-min-srv__nav {
        display: grid;
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 15px;
        grid-template-columns: repeat(2, 2fr);
    }

    .tabs-min-srv__btn i {
        font-size: 17px;
    }



    .services-new-card .card-icon {
        width: 70px;
        height: 70px;
        padding: 9px;
    }

    .services-new-card h3 {
        margin: 0 0 4px;
        color: #114c5c;
        font-size: 18px;
        line-height: 1.35;
        font-weight: 500;
        letter-spacing: 0;
        position: relative;
        z-index: 2;
    }

    .services-new-card p {
        margin: 0;
        color: #6a7b75;
        font-size: 15px;
        line-height: 19px;
        position: relative;
        z-index: 2;
    }


    .Merited-wrap .form-subtitle {
        color: #64748b;
        line-height: 1.18;
        margin-bottom: 20px;
        font-size: 15px;
        margin-top: 10px;
    }

    .apply-info__badge {
        padding: 6px 15px;
        margin-bottom: 15px;
    }

    .apply-info__hero p {
        color: rgba(255,255,255,0.86);
        font-size: 15px;
        line-height: 1.38;
    }

    .apply-info__top h2 {
        font-size: clamp(21px, 2vw, 38px);
        color: #07384b;
        font-weight: 500;
        letter-spacing: 0;
        margin-bottom: 0px;
    }

    .apply-info__top p {
        font-size: 15px;
        line-height: 1.2;
        color: #647985;
        max-width: 650px;
        margin-top: 10px;
    }

    .apply-info__top {
        margin-bottom: 0;
    }


    .apply-info__fetch p {
        font-size: 14px;
        color: #647985;
        line-height: 1.3;
        margin-bottom: 0;
    }


    .dp-profile-view-btn {
        min-height: 48px;
    }


    .db1-avatar {
        width: 80px;
        height: 80px;
    }

    .db1-profile h3 {
        font-size: 20px;
    }


    .db1-profile p {
        color: rgba(255,255,255,0.82);
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 0;
    }

    .benifi-dash-bord .beni-tab-content.active {
        padding: 5px
    }

    .track-wrap .title {
        font-size: 14px;
        color: #333;
        margin-bottom: 15px;
        line-height: 20px;
    }

    .track-wrap {
        padding: 0px 0px;
        text-align: center;
    }

    .post-entry h5 {
        font-size: 19px;
    }

    .post-entry {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }

    .post-image figure {
        border-radius: 10px;
    }


    .bakacnt-wrap-1 .bank-intro-icon {
        width: 55px;
        height: 55px;
        border-radius: 50%;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        display: grid;
        place-items: center;
        font-size: 24px;
    }

    .bakacnt-wrap-1 .bank-logo {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #dbeaf0;
        display: grid;
        place-items: center;
        color: #087489;
        font-size: 25px;
        margin-bottom: 7px;
    }


    .bakacnt-wrap-1 .bank-detail {
        background: #f7fbfc;
        border: 1px solid #dbeaf0;
        border-radius: 11px;
        padding: 5px 15px;
        display: grid;
        gap: 0px;
    }


    .bakacnt-wrap-1 .donate-action {
        width: 100%;
        min-height: 48px;
        border-radius: 7px;
        background: linear-gradient(135deg, #0d5262, #19a4a9);
        color: #fff;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        font-size: 16px;
        font-weight: 500;
        margin-top: 0px;
        transition: 0.3s;
        box-shadow: 0 14px 28px rgba(21,154,163,.2);
    }
}

/* Open data responsive polish */
.open-d-w-1 {
    padding: 44px 0;
    overflow-x: hidden;
}

    .open-d-w-1 .container {
        width: 100%;
    }

    .open-d-w-1 .open-container {
        width: 100%;
    }

    .open-d-w-1 .open-intro {
        display: grid;
        grid-template-columns: 74px minmax(0, 1fr);
        gap: 22px;
        align-items: start;
        padding: 28px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid rgba(13, 82, 98, .12);
        box-shadow: 0 14px 34px rgba(13, 82, 98, .08);
    }

    .open-d-w-1 .open-intro-icon {
        width: 74px;
        height: 74px;
        border-radius: 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .open-d-w-1 .open-intro h2,
    .open-d-w-1 .open-section-head h2 {
        overflow-wrap: anywhere;
    }

    .open-d-w-1 .open-intro p,
    .open-d-w-1 .open-point p,
    .open-d-w-1 .open-doc-body p {
        line-height: 1.65;
    }

    .open-d-w-1 .open-points {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
        margin-top: 22px;
    }

    .open-d-w-1 .open-point {
        height: 100%;
        min-width: 0;
        border-radius: 14px;
    }

    .open-d-w-1 .open-section-head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 20px;
        margin-top: 34px;
    }

    .open-d-w-1 .open-doc-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 20px;
        align-items: stretch;
    }

    .open-d-w-1 .open-doc-card {
        display: flex;
        min-width: 0;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
        border-radius: 14px;
    }

        .open-d-w-1 .open-doc-card > div:first-child {
            aspect-ratio: 16 / 10;
            background: #f2fbfb;
            overflow: hidden;
        }

        .open-d-w-1 .open-doc-card img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

    .open-d-w-1 .open-doc-body {
        display: flex;
        min-width: 0;
        flex: 1;
        flex-direction: column;
    }

        .open-d-w-1 .open-doc-body h3 {
            min-height: 0;
            overflow-wrap: anywhere;
        }

    .open-d-w-1 .open-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
        margin-top: auto;
    }

    .open-d-w-1 .open-btn {
        width: 100%;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        font-family: inherit;
        cursor: pointer;
    }

    .open-d-w-1 .open-data-api-icon {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

@media (max-width: 991px) {
    .open-d-w-1 {
        padding: 38px 0;
    }

        .open-d-w-1 .open-points,
        .open-d-w-1 .open-doc-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 767px) {
    .open-d-w-1 {
        padding: 30px 0;
    }

        .open-d-w-1 .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .open-d-w-1 .open-intro {
            grid-template-columns: 58px minmax(0, 1fr);
            gap: 16px;
            padding: 20px;
            border-radius: 8px;
        }

        .open-d-w-1 .open-intro-icon {
            width: 58px;
            height: 58px;
            border-radius: 8px;
        }

        .open-d-w-1 .open-intro h2,
        .open-d-w-1 .open-section-head h2 {
            font-size: 24px;
            line-height: 1.25;
        }

        .open-d-w-1 .open-section-head {
            align-items: flex-start;
            margin-top: 26px;
        }

        .open-d-w-1 .open-point,
        .open-d-w-1 .open-doc-card {
            border-radius: 8px;
        }
}

@media (max-width: 575px) {
    .open-d-w-1 {
        padding: 24px 0;
        background-size: 100% 100%, 22px 22px, 22px 22px;
    }

        .open-d-w-1 .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .open-d-w-1 .open-intro {
            grid-template-columns: 1fr;
            gap: 14px;
            padding: 18px;
        }

        .open-d-w-1 .open-intro-icon {
            width: 52px;
            height: 52px;
        }

        .open-d-w-1 .open-intro h2,
        .open-d-w-1 .open-section-head h2 {
            font-size: 22px;
        }

        .open-d-w-1 .open-intro p,
        .open-d-w-1 .open-point p,
        .open-d-w-1 .open-doc-body p {
            font-size: 14px;
        }

        .open-d-w-1 .open-points,
        .open-d-w-1 .open-doc-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .open-d-w-1 .open-point {
            padding: 18px;
        }

        .open-d-w-1 .open-section-head {
            display: block;
        }

        .open-d-w-1 .open-doc-body {
            padding: 18px;
        }

        .open-d-w-1 .open-actions {
            grid-template-columns: 1fr;
        }

        .open-d-w-1 .open-btn {
            min-height: 44px;
        }
}

/* Contact page responsive polish */
.contact-wrap {
    padding: 46px 0;
    overflow-x: hidden;
}

    .contact-wrap .container,
    .google-map .container {
        width: 100%;
    }

    .contact-wrap .contact-container {
        width: 100%;
    }

    .contact-wrap .contact-box {
        display: grid;
        grid-template-columns: minmax(300px, .9fr) minmax(0, 1.1fr);
        gap: 26px;
        align-items: stretch;
    }

    .contact-wrap .contact-info-panel,
    .contact-wrap .contact-form-panel {
        min-width: 0;
        border-radius: 14px;
        padding: 28px;
    }

    .contact-wrap .contact-info-panel {
        display: flex;
        flex-direction: column;
    }

        .contact-wrap .contact-info-panel h2,
        .contact-wrap .contact-form-panel h2,
        .contact-wrap .contact-sub-title {
            overflow-wrap: anywhere;
        }

    .contact-wrap .contact-desc {
        max-width: 680px;
        line-height: 1.65;
    }

    .contact-wrap .contact-list {
        display: grid;
        gap: 16px;
        margin-top: 18px;
    }

    .contact-wrap .contact-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
        align-items: center;
        min-width: 0;
        padding: 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .72);
        border: 1px solid rgba(13, 82, 98, .10);
    }

    .contact-wrap .contact-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .contact-wrap .contact-item a,
    .contact-wrap .contact-item p {
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .contact-wrap .contact-form {
        width: 100%;
    }

    .contact-wrap .contact-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .contact-wrap .contact-field,
    .contact-wrap .contact-field input,
    .contact-wrap .contact-field textarea {
        min-width: 0;
    }

        .contact-wrap .contact-field input,
        .contact-wrap .contact-field textarea {
            border-radius: 10px;
            font-size: 15px;
        }

    .contact-wrap .contact-submit {
        width: fit-content;
        min-width: 190px;
        max-width: 100%;
        min-height: 50px;
        border-radius: 10px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .contact-wrap .contact-note {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.55;
        border-radius: 10px;
    }

    .contact-wrap .contact-form-message {
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.4;
        padding: 12px 14px;
    }

        .contact-wrap .contact-form-message.is-success {
            background: #e9f8f2;
            border: 1px solid #bfe9d7;
            color: #157347;
        }

        .contact-wrap .contact-form-message.is-error {
            background: #fff1f1;
            border: 1px solid #ffd0d0;
            color: #b42318;
        }

    .contact-wrap .contact-submit:disabled {
        cursor: not-allowed;
        opacity: .72;
    }

    .contact-wrap .contact-api-icon {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

.google-map {
    padding: 8px 0 50px;
    overflow-x: hidden;
}

.google-map-iframe {
    height: clamp(320px, 48vw, 560px);
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(13, 82, 98, .12);
    box-shadow: 0 16px 34px rgba(13, 82, 98, .09);
}

    .google-map-iframe iframe {
        display: block;
        border-radius: 14px;
    }

@media (max-width: 991px) {
    .contact-wrap {
        padding: 38px 0;
    }

        .contact-wrap .contact-box {
            grid-template-columns: 1fr;
            gap: 20px;
        }

        .contact-wrap .contact-list {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .contact-wrap .contact-item {
            grid-template-columns: 1fr;
            align-content: start;
        }
}

@media (max-width: 767px) {
    .contact-wrap {
        padding: 30px 0;
    }

        .contact-wrap .container,
        .google-map .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .contact-wrap .contact-info-panel,
        .contact-wrap .contact-form-panel {
            padding: 22px;
            border-radius: 8px;
        }

            .contact-wrap .contact-info-panel h2,
            .contact-wrap .contact-form-panel h2 {
                font-size: 26px;
                line-height: 1.25;
            }

        .contact-wrap .contact-list {
            grid-template-columns: 1fr;
            gap: 12px;
        }

        .contact-wrap .contact-item {
            grid-template-columns: 46px minmax(0, 1fr);
            padding: 14px;
            border-radius: 8px;
        }

        .contact-wrap .contact-icon {
            width: 46px;
            height: 46px;
            border-radius: 50%;
        }

        .contact-wrap .contact-form-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .contact-wrap .contact-field input,
        .contact-wrap .contact-field textarea,
        .contact-wrap .contact-submit,
        .contact-wrap .contact-note,
        .google-map-iframe,
        .google-map-iframe iframe {
            border-radius: 8px;
        }

        .contact-wrap .contact-field textarea {
            min-height: 150px;
        }

    .google-map {
        padding: 0 0 34px;
    }

    .google-map-iframe {
        height: 340px;
    }
}

@media (max-width: 480px) {
    .contact-wrap .container,
    .google-map .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .contact-wrap .contact-info-panel,
    .contact-wrap .contact-form-panel {
        padding: 18px;
    }

    .contact-wrap .contact-badge {
        max-width: 100%;
        white-space: normal;
    }

    .contact-wrap .contact-info-panel h2,
    .contact-wrap .contact-form-panel h2 {
        font-size: 19px;
        margin-bottom: 5px;
    }

    .contact-wrap .contact-desc,
    .contact-wrap .contact-item a,
    .contact-wrap .contact-item p,
    .contact-wrap .contact-note {
        font-size: 14px;
        line-height: 20px;
        margin-bottom: 15px;
    }

    .contact-wrap .contact-submit {
        width: 100%;
    }

    .google-map-iframe {
        height: 300px;
    }

    .contact-wrap .contact-submit {
        padding: 15px;
    }

    .pb-50 {
        padding-bottom: 20px;
    }
}

/* About page responsive polish */
.abt-re-new,
.abt-section,
.pb-50 {
    overflow-x: hidden;
}

    .abt-re-new .abt-container,
    .abt-section .container,
    .pb-50 .container {
        width: 100%;
    }

    .abt-re-new .abt-hero {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
        gap: 28px;
    }

    .abt-re-new .abt-hero-content,
    .abt-re-new .abt-hero-card,
    .abt-brief-card,
    .abt-brief-content,
    .abt-info-card,
    .abt-activity-card,
    .abt-project-card,
    .abt-message,
    .abt-cta {
        min-width: 0;
    }

.abt-section {
    margin-bottom: 34px;
}

.abt-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
}

    .abt-section-head h2,
    .abt-brief-content h3,
    .abt-info-card h3,
    .abt-message h2,
    .abt-card-top h3,
    .abt-project-card h3,
    .abt-cta h2,
    .abt-hero-card h3 {
        font-size: 19px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .abt-hero h1,
    .abt-section-head p,
    .abt-brief-content p,
    .abt-info-card p,
    .abt-message p,
    .abt-project-card p,
    .abt-cta p,
    .abt-list li {
        overflow-wrap: anywhere;
    }

.abt-brief-card {
    display: grid;
    grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
    gap: 24px;
}

.abt-brief-img {
    min-height: 320px;
}

.abt-info-grid,
.abt-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.abt-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

    .abt-list li {
        min-width: 0;
    }

.abt-message {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 20px;
}

.abt-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.abt-btn {
    max-width: 100%;
    min-width: 0;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

@media (max-width: 1100px) {
    .abt-re-new .abt-hero,
    .abt-brief-card {
        grid-template-columns: 1fr;
    }

    .abt-re-new .abt-hero-card {
        max-width: 620px;
    }

    .abt-brief-img {
        min-height: 300px;
    }
}

@media (max-width: 800px) {
    .abt-re-new .abt-hero {
        padding: 32px 20px;
        min-height: auto;
    }

        .abt-re-new .abt-hero h1 {
            font-size: 28px;
            line-height: 1.2;
        }

    .abt-re-new .abt-hero-card,
    .abt-brief-card,
    .abt-info-card,
    .abt-message,
    .abt-activity-card,
    .abt-project-card,
    .abt-cta {
        border-radius: 8px;
    }

    .abt-section .container,
    .pb-50 .container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .abt-section-head {
        display: block;
        margin-bottom: 18px;
    }

        .abt-section-head p {
            max-width: none;
            margin-top: 10px;
            font-size: 14px;
            line-height: 1.65;
        }

    .abt-brief-card,
    .abt-message,
    .abt-activity-card,
    .abt-project-card,
    .abt-cta {
        padding: 20px;
    }

    .abt-brief-img {
        min-height: 240px;
        border-radius: 8px;
    }

    .abt-info-grid,
    .abt-project-grid {
        grid-template-columns: 1fr;
    }

    .abt-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .abt-message {
        grid-template-columns: 52px minmax(0, 1fr);
        gap: 14px;
    }

        .abt-message i,
        .abt-card-icon,
        .abt-info-icon {
            width: 52px;
            height: 52px;
            font-size: 20px;
        }

    .abt-cta {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 575px) {
    .abt-re-new .abt-hero {
        padding: 28px 14px;
        gap: 18px;
    }

    .abt-re-new .abt-badge,
    .abt-title-small {
        font-size: 12px;
    }

    .abt-re-new .abt-hero h1 {
        font-size: 24px;
    }

    .abt-re-new .abt-hero p,
    .abt-brief-content p,
    .abt-info-card p,
    .abt-message p,
    .abt-project-card p,
    .abt-cta p,
    .abt-list li {
        font-size: 14px;
        line-height: 1.6;
    }

    .abt-section {
        margin-bottom: 24px;
    }

        .abt-section .container,
        .pb-50 .container {
            padding-left: 12px;
            padding-right: 12px;
        }

    .abt-hero-actions,
    .abt-cta .abt-btn {
        width: 100%;
    }

    .abt-btn {
        width: 100%;
        min-height: 44px;
    }

    .abt-brief-card,
    .abt-info-card,
    .abt-message,
    .abt-activity-card,
    .abt-project-card,
    .abt-cta {
        padding: 18px;
    }

    .abt-brief-img {
        min-height: 210px;
    }

        .abt-brief-img::after {
            left: 12px;
            bottom: 12px;
            padding: 9px 12px;
            border-radius: 8px;
            font-size: 14px;
        }

    .abt-list {
        grid-template-columns: 1fr;
    }

    .abt-message {
        grid-template-columns: 1fr;
    }

    .abt-card-top {
        align-items: flex-start;
    }
}

/* Directors page modern redesign */
.directors-modern {
    position: relative;
    padding: 50px 0 50px;
    overflow: hidden;
    background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .96)), linear-gradient(90deg, rgba(21, 154, 163, .08) 1px, transparent 1px), linear-gradient(rgba(21, 154, 163, .08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
}

    .directors-modern::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        left: -180px;
        top: 40px;
        border-radius: 50%;
        background: rgba(31, 167, 173, .08);
        pointer-events: none;
    }

    .directors-modern::after {
        content: "";
        position: absolute;
        width: 420px;
        height: 420px;
        right: -210px;
        bottom: -180px;
        border-radius: 50%;
        background: rgba(13, 82, 98, .07);
        pointer-events: none;
    }

    .directors-modern .container {
        position: relative;
        z-index: 2;
        width: 100%;
        /*!  */
    }

.directors-intro {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 28px;
}

.directors-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #159aa3;
    background: #eefafa;
    border: 1px solid rgba(21, 154, 163, .18);
    border-radius: 999px;
    padding: 9px 15px;
    font-size: 13px;
    font-weight: 500;
    text-transform: uppercase;
}

    .directors-eyebrow::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #159aa3;
    }

.directors-intro h2 {
    margin: 12px 0 0;
    color: #0b425a;
    font-size: 30px;
    line-height: 1.22;
    font-weight: 500;
    max-width: 620px;
}

.directors-intro p {
    max-width: 470px;
    margin: 0;
    color: #5a6f7d;
    font-size: 16px;
    line-height: 1.7;
}

.directors-modern .row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-left: 0;
    margin-right: 0;
}

    .directors-modern .row > [class*="col-"] {
        width: auto;
        max-width: none;
        flex: none;
        padding: 0;
    }

.directors-modern .team-item {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(13, 82, 98, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 14px 34px rgba(13, 82, 98, .08);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

    .directors-modern .team-item:hover {
        transform: translateY(-5px);
        border-color: rgba(21, 154, 163, .35);
        box-shadow: 0 18px 42px rgba(13, 82, 98, .13);
    }

.directors-modern .team-item-image {
    position: relative;
    width: 100%;
    height: auto;
    margin: 0;
    padding: 18px 18px 0;
    border-radius: 0;
}

    .directors-modern .team-item-image a,
    .directors-modern .team-item-image figure {
        height: auto;
        margin: 0;
        overflow: hidden;
        border-radius: 12px;
        background: linear-gradient(135deg, #edfafa, #f8fbfb);
    }

        .directors-modern .team-item-image figure::before {
            display: none;
        }

    .directors-modern .team-item-image img {
        display: block;
        width: 100%;
        aspect-ratio: 4 / 3;
        height: auto;
        object-fit: cover;
        object-position: center top;
    }

.directors-modern .team-item-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    margin: 0;
    padding: 20px;
    text-align: left;
}

.directors-modern .team-item-content {
    display: flex;
    height: 100%;
    min-width: 0;
    flex-direction: column;
}

    .directors-modern .team-item-content h2 {
        margin: 0 0 10px;
        color: #0b425a;
        font-size: 19px;
        line-height: 1.35;
        font-weight: 500;
        overflow-wrap: anywhere;
    }

        .directors-modern .team-item-content h2 a {
            color: inherit;
        }

    .directors-modern .team-item-content p {
        margin: 0;
        color: #5a6f7d !important;
        font-size: 15px;
        line-height: 1.6;
        overflow-wrap: anywhere;
    }

@media (max-width: 991px) {
    .directors-modern {
        padding: 40px 0 48px;
    }

    .directors-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
    }

        .directors-intro h2 {
            font-size: 26px;
        }

        .directors-intro p {
            max-width: 760px;
        }

    .directors-modern .row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }
}

@media (max-width: 767px) {
    .directors-modern {
        padding: 32px 0 40px;
    }

        .directors-modern .container {
            padding-left: 16px;
            padding-right: 16px;
        }

    .directors-intro {
        margin-bottom: 20px;
    }

        .directors-intro h2 {
            font-size: 23px;
        }

        .directors-intro p,
        .directors-modern .team-item-content p {
            font-size: 14px;
        }

    .directors-modern .team-item {
        border-radius: 8px;
    }

    .directors-modern .team-item-image {
        padding: 14px 14px 0;
    }

        .directors-modern .team-item-image a,
        .directors-modern .team-item-image figure {
            border-radius: 8px;
        }

    .directors-modern .team-item-body {
        padding: 16px;
    }
}

@media (max-width: 575px) {
    .directors-modern {
        padding: 26px 0 34px;
        background-size: 100% 100%, 22px 22px, 22px 22px;
    }

        .directors-modern .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .directors-modern .row {
            grid-template-columns: 1fr;
            gap: 14px;
        }

    .directors-eyebrow {
        font-size: 12px;
        padding: 8px 13px;
    }

    .directors-intro h2 {
        font-size: 21px;
    }

    .directors-modern .team-item-image img {
        aspect-ratio: 16 / 11;
    }

    .directors-modern .team-item-content h2 {
        margin: 0 0 1px;
    }


    .nw-mobile-dropdown a {
        padding: 6px 0 6px 0px !important;
    }

    .nw-mobile-top h3 {
        font-size: 20px;
    }
}

/* Cart page modern redesign */
.cart-wrap-1 {
    position: relative;
    padding: 50px 0 60px;
    overflow: hidden;
    background: linear-gradient(rgba(255, 255, 255, .94), rgba(255, 255, 255, .96)), linear-gradient(90deg, rgba(21, 154, 163, .08) 1px, transparent 1px), linear-gradient(rgba(21, 154, 163, .08) 1px, transparent 1px);
    background-size: 100% 100%, 28px 28px, 28px 28px;
}

    .cart-wrap-1::before {
        content: "";
        position: absolute;
        width: 360px;
        height: 360px;
        left: -180px;
        top: 30px;
        border-radius: 50%;
        background: rgba(31, 167, 173, .08);
        pointer-events: none;
    }

    .cart-wrap-1::after {
        content: "";
        position: absolute;
        width: 430px;
        height: 430px;
        right: -210px;
        bottom: -190px;
        border-radius: 50%;
        background: rgba(13, 82, 98, .07);
        pointer-events: none;
    }

    .cart-wrap-1 .container {
        position: relative;
        z-index: 2;
        width: 100%;
    }

    .cart-wrap-1 .cart-container {
        width: 100%;
    }

    .cart-wrap-1 .cart-head {
        max-width: 720px;
        margin-bottom: 28px;
    }

        .cart-wrap-1 .cart-head span {
            border-radius: 999px;
            font-size: 13px;
            text-transform: uppercase;
        }

        .cart-wrap-1 .cart-head h2 {
            font-size: 30px;
            line-height: 1.2;
        }

        .cart-wrap-1 .cart-head p {
            max-width: 620px;
        }

    .cart-wrap-1 .cart-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 390px);
        gap: 24px;
        align-items: start;
    }

    .cart-wrap-1 .cart-items,
    .cart-wrap-1 .cart-item,
    .cart-wrap-1 .cart-info,
    .cart-wrap-1 .cart-summary {
        min-width: 0;
    }

    .cart-wrap-1 .cart-item {
        grid-template-columns: 72px minmax(0, 1fr) auto minmax(130px, auto) 44px;
        gap: 18px;
        padding: 22px;
        border-radius: 14px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid rgba(13, 82, 98, .13);
        box-shadow: 0 14px 34px rgba(13, 82, 98, .08);
    }

    .cart-wrap-1 .cart-icon {
        width: 64px;
        height: 64px;
        border-radius: 14px;
    }

    .cart-wrap-1 .cart-info h3 {
        font-size: 19px;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }

    .cart-wrap-1 .cart-info p {
        font-size: 15px;
        line-height: 1.5;
        overflow-wrap: anywhere;
    }

    .cart-wrap-1 .cart-qty {
        border-radius: 10px;
    }

        .cart-wrap-1 .cart-qty button {
            border-radius: 8px;
        }

    .cart-wrap-1 .cart-price {
        min-width: 130px;
    }

        .cart-wrap-1 .cart-price strong {
            font-size: 20px;
        }

    .cart-wrap-1 .cart-delete {
        border-radius: 10px;
    }

    .cart-wrap-1 .cart-summary {
        position: sticky;
        top: 20px;
        padding: 26px;
        border-radius: 14px;
    }

    .cart-wrap-1 .summary-row,
    .cart-wrap-1 .summary-title,
    .cart-wrap-1 .summary-total,
    .cart-wrap-1 .summary-actions,
    .cart-wrap-1 .payment-partners {
        min-width: 0;
    }

        .cart-wrap-1 .summary-row strong,
        .cart-wrap-1 .summary-total strong {
            overflow-wrap: anywhere;
        }

    .cart-wrap-1 .summary-total {
        border-radius: 12px;
    }

    .cart-wrap-1 .summary-actions {
        grid-template-columns: 1fr;
    }

    .cart-wrap-1 .cart-btn {
        width: 100%;
        min-width: 0;
        border-radius: 10px;
        white-space: normal;
        text-align: center;
    }

    .cart-wrap-1 .payment-logos {
        overflow: hidden;
        border-radius: 10px;
    }

        .cart-wrap-1 .payment-logos img {
            display: block;
            width: 100%;
            height: auto;
            border-radius: 10px !important;
        }

@media (max-width: 1100px) {
    .cart-wrap-1 .cart-layout {
        grid-template-columns: 1fr;
    }

    .cart-wrap-1 .cart-summary {
        position: relative;
        top: auto;
    }
}

@media (max-width: 767px) {
    .cart-wrap-1 {
        padding: 34px 0 42px;
    }

        .cart-wrap-1 .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .cart-wrap-1 .cart-head {
            margin-bottom: 20px;
        }

            .cart-wrap-1 .cart-head h2 {
                font-size: 20px;
            }

            .cart-wrap-1 .cart-head p {
                font-size: 14px;
            }

        .cart-wrap-1 .cart-item {
            grid-template-columns: 58px minmax(0, 1fr) 40px;
            gap: 14px;
            padding: 18px;
            border-radius: 8px;
        }

        .cart-wrap-1 .cart-icon {
            width: 54px;
            height: 54px;
            border-radius: 8px;
            font-size: 22px;
        }

        .cart-wrap-1 .cart-info {
            padding-right: 0;
        }

            .cart-wrap-1 .cart-info h3 {
                font-size: 17px;
            }

            .cart-wrap-1 .cart-info p,
            .cart-wrap-1 .cart-price span,
            .cart-wrap-1 .summary-row span,
            .cart-wrap-1 .summary-row strong {
                font-size: 14px;
            }

        .cart-wrap-1 .cart-delete {
            width: 40px;
            height: 40px;
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            border-radius: 8px;
        }

        .cart-wrap-1 .cart-qty {
            grid-column: 1 / 3;
            width: max-content;
            max-width: 100%;
            border-radius: 8px;
        }

            .cart-wrap-1 .cart-qty button,
            .cart-wrap-1 .cart-delete,
            .cart-wrap-1 .summary-total,
            .cart-wrap-1 .cart-btn,
            .cart-wrap-1 .payment-logos,
            .cart-wrap-1 .payment-logos img {
                border-radius: 8px !important;
            }

        .cart-wrap-1 .cart-price {
            grid-column: 1 / 4;
            min-width: 0;
            text-align: left;
        }

            .cart-wrap-1 .cart-price strong {
                font-size: 19px;
            }

        .cart-wrap-1 .cart-summary {
            padding: 20px;
            border-radius: 8px;
        }

        .cart-wrap-1 .summary-title span {
            font-size: 19px;
        }
}

@media (max-width: 480px) {
    .cart-wrap-1 {
        padding: 26px 0 34px;
        background-size: 100% 100%, 22px 22px, 22px 22px;
    }

        .cart-wrap-1 .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .cart-wrap-1 .cart-item {
            grid-template-columns: 1fr;
        }

        .cart-wrap-1 .cart-delete {
            position: absolute;
            right: 14px;
            top: 14px;
        }

        .cart-wrap-1 .cart-info {
            padding-right: 48px;
        }

        .cart-wrap-1 .cart-qty,
        .cart-wrap-1 .cart-price {
            grid-column: auto;
        }

        .cart-wrap-1 .cart-qty {
            width: 100%;
            justify-content: space-between;
        }

            .cart-wrap-1 .cart-qty input {
                flex: 1;
            }

        .cart-wrap-1 .summary-row {
            padding: 17px;
        }
}

/* Checkout page responsive polish */
.checkout-wrap-1 {
    padding: 50px 0 60px;
    overflow-x: hidden;
}

    .checkout-wrap-1 .container {
        width: 100%;
        position: relative;
        z-index: 2;
    }

    .checkout-wrap-1 .checkout-container {
        width: 100%;
        max-width: none;
    }

    .checkout-wrap-1 .checkout-head {
        max-width: 760px;
        margin-bottom: 28px;
    }

        .checkout-wrap-1 .checkout-head span {
            border-radius: 999px;
            font-size: 13px;
            text-transform: uppercase;
        }

        .checkout-wrap-1 .checkout-head h1 {
            font-size: 30px;
            line-height: 1.2;
        }

    .checkout-wrap-1 .checkout-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
        gap: 24px;
    }

    .checkout-wrap-1 .billing-card,
    .checkout-wrap-1 .cart-card,
    .checkout-wrap-1 .payment-card,
    .checkout-wrap-1 .checkout-side,
    .checkout-wrap-1 .billing-body,
    .checkout-wrap-1 .cart-body,
    .checkout-wrap-1 .contact-field,
    .checkout-wrap-1 .payment-option,
    .checkout-wrap-1 .payment-left,
    .checkout-wrap-1 .payment-text {
        min-width: 0;
    }

        .checkout-wrap-1 .billing-card,
        .checkout-wrap-1 .cart-card,
        .checkout-wrap-1 > .payment-card,
        .checkout-wrap-1 .checkout-side > .payment-card {
            border-radius: 14px;
            border-color: rgba(13, 82, 98, .13);
            box-shadow: 0 14px 34px rgba(13, 82, 98, .08);
        }

    .checkout-wrap-1 .card-head {
        padding: 22px;
        gap: 14px;
    }

    .checkout-wrap-1 .card-icon {
        width: 52px;
        height: 52px;
        border-radius: 12px;
        font-size: 21px;
    }

    .checkout-wrap-1 .card-head h2 {
        font-size: 18px;
        overflow-wrap: anywhere;
    }

    .checkout-wrap-1 .card-head p,
    .checkout-wrap-1 .secure-note p,
    .checkout-wrap-1 .cart-item h3,
    .checkout-wrap-1 .cart-item p,
    .checkout-wrap-1 .payment-text h4,
    .checkout-wrap-1 .payment-text p {
        overflow-wrap: anywhere;
    }

    .checkout-wrap-1 .billing-body,
    .checkout-wrap-1 .cart-body,
    .checkout-wrap-1 .checkout-side > .payment-card {
        padding: 22px;
    }

        .checkout-wrap-1 .billing-body.contact-wrap {
            width: 100%;
            overflow: visible;
        }

    .checkout-wrap-1 .contact-form-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    .checkout-wrap-1 .contact-field input,
    .checkout-wrap-1 .contact-field textarea {
        width: 100%;
        min-width: 0;
        border-radius: 10px;
        font-size: 15px;
    }

    .checkout-wrap-1 .contact-field textarea {
        min-height: 150px;
    }

    .checkout-wrap-1 .secure-note {
        border-radius: 10px;
        align-items: flex-start;
    }

    .checkout-wrap-1 .checkout-side {
        position: sticky;
        top: 20px;
        display: grid;
        gap: 20px;
    }

    .checkout-wrap-1 .cart-item {
        border-radius: 10px;
        padding: 16px;
    }

    .checkout-wrap-1 .cart-item-top,
    .checkout-wrap-1 .price-line {
        display: flex;
        gap: 14px;
        justify-content: space-between;
    }

        .checkout-wrap-1 .cart-item strong,
        .checkout-wrap-1 .price-line strong,
        .checkout-wrap-1 .total-box strong {
            text-align: right;
            overflow-wrap: anywhere;
        }

    .checkout-wrap-1 .total-box {
        border-radius: 12px;
    }

    .checkout-wrap-1 .checkout-side > .payment-card h3 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 16px;
        color: #073f54;
        font-size: 19px;
    }

    .checkout-wrap-1 .paynt-opt-slct-chckout {
        display: grid;
        gap: 12px;
    }

    .checkout-wrap-1 .payment-option {
        display: block;
        margin: 0;
    }

        .checkout-wrap-1 .payment-option > .payment-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding: 10px;
            border-radius: 10px;
        }

    .checkout-wrap-1 .payment-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .checkout-wrap-1 .payment-left img {
            width: 55px;
            height: 55px;
            flex: 0 0 auto;
            object-fit: contain;
        }

    .checkout-wrap-1 .pay-btn {
        width: 100%;
        min-height: 50px;
        border-radius: 8px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        text-align: center;
    }

@media (max-width: 1100px) {
    .checkout-wrap-1 .checkout-layout {
        grid-template-columns: 1fr;
    }

    .checkout-wrap-1 .checkout-side {
        position: relative;
        top: auto;
    }
}

@media (max-width: 767px) {
    .checkout-wrap-1 {
        padding: 34px 0 42px;
    }

        .checkout-wrap-1 .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .checkout-wrap-1 .checkout-head {
            margin-bottom: 20px;
        }

            .checkout-wrap-1 .checkout-head h1 {
                font-size: 20px;
            }

            .checkout-wrap-1 .checkout-head p,
            .checkout-wrap-1 .card-head p,
            .checkout-wrap-1 .secure-note,
            .checkout-wrap-1 .cart-item p,
            .checkout-wrap-1 .price-line,
            .checkout-wrap-1 .payment-text p {
                font-size: 14px;
            }

        .checkout-wrap-1 .billing-card,
        .checkout-wrap-1 .cart-card,
        .checkout-wrap-1 .checkout-side > .payment-card,
        .checkout-wrap-1 .card-icon,
        .checkout-wrap-1 .secure-note,
        .checkout-wrap-1 .cart-item,
        .checkout-wrap-1 .total-box,
        .checkout-wrap-1 .payment-option > .payment-card,
        .checkout-wrap-1 .pay-btn,
        .checkout-wrap-1 .contact-field input,
        .checkout-wrap-1 .contact-field textarea {
            border-radius: 8px;
        }

        .checkout-wrap-1 .card-head {
            padding: 18px;
            align-items: flex-start;
        }

        .checkout-wrap-1 .card-icon {
            width: 46px;
            height: 46px;
            font-size: 19px;
            border-radius: 50%;
        }

        .checkout-wrap-1 .billing-body,
        .checkout-wrap-1 .cart-body,
        .checkout-wrap-1 .checkout-side > .payment-card {
            padding: 18px;
        }

        .checkout-wrap-1 .contact-form-grid {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .checkout-wrap-1 .cart-item-top,
        .checkout-wrap-1 .price-line {
            align-items: flex-start;
        }

        .checkout-wrap-1 .payment-option > .payment-card {
            padding: 2px 12px;
        }
}

@media (max-width: 480px) {
    .checkout-wrap-1 {
        padding: 26px 0 34px;
        background-size: 100% 100%, 22px 22px, 22px 22px;
    }

        .checkout-wrap-1 .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .checkout-wrap-1 .card-head {
            display: grid;
            grid-template-columns: 46px minmax(0, 1fr);
        }

        .checkout-wrap-1 .cart-item-top,
        .checkout-wrap-1 .price-line,
        .checkout-wrap-1 .payment-option > .payment-card {
            flex-direction: column;
        }

            .checkout-wrap-1 .cart-item strong,
            .checkout-wrap-1 .price-line strong,
            .checkout-wrap-1 .total-box strong {
                text-align: left;
            }

        .checkout-wrap-1 .payment-left {
            width: 100%;
        }

        .checkout-wrap-1 .check-mark {
            align-self: initial;
            width: 28px;
            height: 27px;
        }

        .checkout-wrap-1 .cart-item p {
            margin-bottom: 0;
        }


        .checkout-wrap-1 .payment-option > .payment-card {
            flex-direction: inherit;
        }
}

/* Booking / aid request responsive polish */
.bokking-wrap {
    padding: 46px 0 58px !important;
    overflow-x: hidden;
}

    .bokking-wrap .container {
        width: 100%;
    }

    .bokking-wrap .form-mn-p {
        max-width: initial;
        margin: 0 auto 26px;
        padding: 20px 22px;
        border: 1px solid rgba(13, 82, 98, .12);
        border-radius: 14px;
        background: rgba(255, 255, 255, .92);
        box-shadow: 0 12px 30px rgba(13, 82, 98, .07);
        color: #4f6472;
        font-size: 16px !important;
        line-height: 1.75;
    }

    .bokking-wrap .ne-tab-step-form {
        width: 100%;
    }

        .bokking-wrap .ne-tab-step-form .ne-tsf-box {
            grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
            min-height: 0;
            border-radius: 14px;
            box-shadow: 0 16px 38px rgba(13, 82, 98, .09);
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-sidebar,
        .bokking-wrap .ne-tab-step-form .ne-tsf-main,
        .bokking-wrap .ne-tab-step-form .ne-tsf-panel,
        .bokking-wrap .ne-tab-step-form .ne-tsf-form-grid,
        .bokking-wrap .ne-tab-step-form .ne-tsf-upload-grid,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review,
        .bokking-wrap .ne-tab-step-form .ne-tsf-upload,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review-card {
            min-width: 0;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-sidebar {
            padding: 22px 16px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-steps {
            gap: 22px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step {
            grid-template-columns: 34px 22px minmax(0, 1fr);
            gap: 12px;
            padding: 13px 12px;
            border-radius: 10px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step-title,
        .bokking-wrap .ne-tab-step-form .ne-tsf-step-desc,
        .bokking-wrap .ne-tab-step-form label,
        .bokking-wrap .ne-tab-step-form .ne-tsf-upload h4,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review-item span {
            overflow-wrap: anywhere;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step-title {
            font-size: 18px;
            line-height: 1.25;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step-desc {
            font-size: 12px;
            line-height: 1.35;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-form-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .bokking-wrap .ne-tab-step-form label {
            font-size: 15px;
            line-height: 1.45;
        }

        .bokking-wrap .ne-tab-step-form input,
        .bokking-wrap .ne-tab-step-form select,
        .bokking-wrap .ne-tab-step-form textarea {
            min-width: 0;
            border-radius: 10px !important;
            font-size: 15px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-radio-options {
            flex-wrap: wrap;
            gap: 10px 16px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-upload-grid,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review {
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 16px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-upload {
            border-radius: 10px;
        }

            .bokking-wrap .ne-tab-step-form .ne-tsf-upload input[type="file"] {
                max-width: 100%;
                font-size: 13px;
            }

        .bokking-wrap .ne-tab-step-form .ne-tsf-review-card {
            border-radius: 12px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-actions {
            gap: 14px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-left,
        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-right {
            min-width: 0;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-btn {
            max-width: 100%;
            border-radius: 10px;
            white-space: normal;
            text-align: center;
        }

@media (max-width: 1100px) {
    .bokking-wrap .ne-tab-step-form .ne-tsf-box {
        grid-template-columns: 1fr;
    }

    .bokking-wrap .ne-tab-step-form .ne-tsf-sidebar {
        border-right: 0;
        border-bottom: 1px solid #eef3f5;
    }

    .bokking-wrap .ne-tab-step-form .ne-tsf-steps {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
    }

        .bokking-wrap .ne-tab-step-form .ne-tsf-steps::before,
        .bokking-wrap .ne-tab-step-form .ne-tsf-steps::after {
            display: none;
        }

    .bokking-wrap .ne-tab-step-form .ne-tsf-step {
        grid-template-columns: 34px minmax(0, 1fr);
    }

    .bokking-wrap .ne-tab-step-form .ne-tsf-step-icon {
        display: none;
    }
}

@media (max-width: 767px) {
    .bokking-wrap {
        padding: 30px 0 40px !important;
    }

        .bokking-wrap .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .bokking-wrap .form-mn-p {
            padding: 18px;
            border-radius: 8px;
            font-size: 14px !important;
            line-height: 1.65;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-box {
            border-radius: 8px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-sidebar {
            padding: 14px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-steps {
            display: flex;
            gap: 10px;
            overflow-x: auto;
            padding-bottom: 4px;
            scroll-snap-type: x proximity;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step {
            min-width: 210px;
            scroll-snap-align: start;
            border-radius: 8px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-form-grid,
        .bokking-wrap .ne-tab-step-form .ne-tsf-upload-grid,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        .bokking-wrap .ne-tab-step-form input,
        .bokking-wrap .ne-tab-step-form select,
        .bokking-wrap .ne-tab-step-form textarea,
        .bokking-wrap .ne-tab-step-form .ne-tsf-upload,
        .bokking-wrap .ne-tab-step-form .ne-tsf-review-card,
        .bokking-wrap .ne-tab-step-form .ne-tsf-btn {
            border-radius: 8px !important;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-upload {
            padding: 15px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-review-item {
            display: grid;
            grid-template-columns: 1fr;
            gap: 4px;
            font-size: 14px;
        }

            .bokking-wrap .ne-tab-step-form .ne-tsf-review-item span:last-child {
                text-align: left;
            }

        .bokking-wrap .ne-tab-step-form .ne-tsf-actions,
        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-left,
        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-right {
            width: 100%;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-actions {
            align-items: stretch;
            flex-direction: column;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-btn,
        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-left,
        .bokking-wrap .ne-tab-step-form .ne-tsf-actions-right {
            justify-content: center;
        }
}

@media (max-width: 480px) {
    .bokking-wrap {
        padding: 24px 0 34px !important;
    }

        .bokking-wrap .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .bokking-wrap .form-mn-p {
            margin-bottom: 18px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-step {
            min-width: 190px;
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-upload {
            display: grid;
            grid-template-columns: 42px minmax(0, 1fr);
        }

        .bokking-wrap .ne-tab-step-form .ne-tsf-btn {
            width: 100%;
            min-height: 44px;
            padding-left: 14px;
            padding-right: 14px;
        }

    .ne-tab-step-form .ne-tsf-heading h2 {
        margin: 0 0 6px;
        font-size: 19px;
    }

    .bokking-wrap .ne-tab-step-form .ne-tsf-steps {
        display: none;
    }

    .submit-wraps .card {
        padding: 10px 15px;
    }


    .submit-wraps p {
        margin-bottom: 0;
    }

    .about-footer-gold {
        margin-bottom: 0;
    }
}

/* Service details responsive polish */
.services-details-wrap-new {
    padding: 46px 0 58px;
    overflow-x: hidden;
}

    .services-details-wrap-new .container {
        width: 100%;
    }

    .services-details-wrap-new .sdn-container,
    .services-details-wrap-new .sdn-hero-modern,
    .services-details-wrap-new .sdn-hero-left,
    .services-details-wrap-new .sdn-hero-right,
    .services-details-wrap-new .sdn-summary-card,
    .services-details-wrap-new .sdn-content-area,
    .services-details-wrap-new .sdn-sidebar-modern,
    .services-details-wrap-new .sdn-section-card,
    .services-details-wrap-new .sdn-support-panel,
    .services-details-wrap-new .sdn-side-panel,
    .services-details-wrap-new .ne-tab-menu,
    .services-details-wrap-new .ne-tab-btn {
        min-width: 0;
    }

    .services-details-wrap-new .sdn-hero-modern {
        grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr);
        gap: 26px;
        padding: 34px;
        border-radius: 14px;
    }

        .services-details-wrap-new .sdn-hero-modern h1 {
            font-size: 34px;
            line-height: 1.18;
            letter-spacing: 0;
            overflow-wrap: anywhere;
        }

        .services-details-wrap-new .sdn-hero-modern p,
        .services-details-wrap-new .sdn-summary-card span,
        .services-details-wrap-new .sdn-summary-card h3,
        .services-details-wrap-new .sdn-section-head h2,
        .services-details-wrap-new .sdn-section-head p,
        .services-details-wrap-new .sdn-check-list p,
        .services-details-wrap-new .sdn-support-panel p,
        .services-details-wrap-new .sdn-support-item strong {
            overflow-wrap: anywhere;
        }

    .services-details-wrap-new .sad-hero-new-visual {
        width: 100%;
        overflow: hidden;
        border-radius: 12px;
    }

        .services-details-wrap-new .sad-hero-new-visual img {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            height: auto;
            object-fit: cover;
        }

    .services-details-wrap-new .sdn-action-row {
        gap: 12px;
    }

    .services-details-wrap-new .sdn-primary-btn,
    .services-details-wrap-new .sdn-secondary-btn,
    .services-details-wrap-new .sdn-support-btn,
    .services-details-wrap-new .sdn-confirm-modern {
        max-width: 100%;
        min-width: 0;
        border-radius: 10px;
        text-align: center;
        white-space: normal;
    }

    .services-details-wrap-new > .container > .sdn-container > h4,
    .services-details-wrap-new .mb-20 {
        color: #0b425a;
        font-size: 19px;
        font-weight: 500;
    }

    .services-details-wrap-new .sdn-summary-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .services-details-wrap-new .sdn-summary-card {
        padding: 18px;
        border-radius: 14px;
        gap: 16px;
    }

    .services-details-wrap-new .sdn-summary-icon {
        width: 64px;
        height: 64px;
        flex: 0 0 64px;
    }

        .services-details-wrap-new .sdn-summary-icon img,
        .services-details-wrap-new .sdn-title-mark img,
        .services-details-wrap-new .sdn-side-panel img {
            display: block;
            max-width: 100%;
            height: auto;
        }

    .services-details-wrap-new .sdn-main-layout {
        grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
        gap: 22px;
    }

    .services-details-wrap-new .ne-tab-menu {
        align-items: stretch;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x proximity;
    }

    .services-details-wrap-new .ne-tab-btn {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 13px 18px;
        border-radius: 8px;
    }

    .services-details-wrap-new .ne-tab-content {
        padding: 0;
    }

    .services-details-wrap-new .sdn-section-card {
        padding: 22px;
        border-radius: 14px;
        box-shadow: 0 14px 34px rgba(13, 82, 98, .07);
    }

    .services-details-wrap-new .sdn-section-head {
        align-items: flex-start;
        gap: 14px;
    }

    .services-details-wrap-new .sdn-title-mark {
        width: 48px;
        height: 48px;
        flex-basis: 48px;
    }

    .services-details-wrap-new .sdn-section-head h2 {
        font-size: 21px;
        line-height: 1.25;
    }

    .services-details-wrap-new .sdn-check-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

        .services-details-wrap-new .sdn-check-list div {
            align-items: flex-start;
            border-radius: 10px;
        }

        .services-details-wrap-new .sdn-check-list p {
            font-size: 15px;
            line-height: 1.5;
        }

    .services-details-wrap-new .sdn-sidebar-modern {
        position: sticky;
        top: 20px;
    }

    .services-details-wrap-new .sdn-side-panel,
    .services-details-wrap-new .sdn-support-panel {
        padding: 20px;
        border-radius: 14px;
    }

        .services-details-wrap-new .sdn-side-panel img {
            margin: 0 auto;
        }

    .services-details-wrap-new .sdn-support-item {
        border-radius: 10px;
    }

@media (max-width: 991px) {
    .services-details-wrap-new {
        padding: 38px 0 48px;
    }

        .services-details-wrap-new .sdn-hero-modern,
        .services-details-wrap-new .sdn-main-layout {
            grid-template-columns: 1fr;
        }

        .services-details-wrap-new .sdn-sidebar-modern {
            position: relative;
            top: auto;
            grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
        }

        .services-details-wrap-new .sdn-summary-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
}

@media (max-width: 767px) {
    .services-details-wrap-new {
        padding: 30px 0 40px;
    }

        .services-details-wrap-new .container {
            padding-left: 16px;
            padding-right: 16px;
        }

        .services-details-wrap-new .sdn-hero-modern {
            padding: 22px;
            border-radius: 8px;
        }

            .services-details-wrap-new .sdn-hero-modern h1 {
                font-size: 26px;
            }

            .services-details-wrap-new .sdn-hero-modern p,
            .services-details-wrap-new .sdn-check-list p,
            .services-details-wrap-new .sdn-support-panel p {
                font-size: 14px;
                line-height: 1.6;
            }

        .services-details-wrap-new .sad-hero-new-visual,
        .services-details-wrap-new .sdn-primary-btn,
        .services-details-wrap-new .sdn-secondary-btn,
        .services-details-wrap-new .sdn-support-btn,
        .services-details-wrap-new .sdn-confirm-modern,
        .services-details-wrap-new .sdn-summary-card,
        .services-details-wrap-new .ne-tab-menu,
        .services-details-wrap-new .ne-tab-btn,
        .services-details-wrap-new .sdn-section-card,
        .services-details-wrap-new .sdn-check-list div,
        .services-details-wrap-new .sdn-side-panel,
        .services-details-wrap-new .sdn-support-panel,
        .services-details-wrap-new .sdn-support-item {
            border-radius: 8px;
        }

        .services-details-wrap-new .sdn-action-row {
            display: grid;
            grid-template-columns: 1fr;
        }

        .services-details-wrap-new .sdn-primary-btn,
        .services-details-wrap-new .sdn-secondary-btn,
        .services-details-wrap-new .sdn-confirm-modern {
            width: 100%;
            min-height: 44px;
        }

        .services-details-wrap-new .sdn-summary-grid,
        .services-details-wrap-new .sdn-check-list,
        .services-details-wrap-new .sdn-sidebar-modern {
            grid-template-columns: 1fr;
        }

        .services-details-wrap-new .sdn-summary-card {
            padding: 16px;
        }

        .services-details-wrap-new .sdn-summary-icon {
            width: 54px;
            height: 54px;
            flex-basis: 54px;
        }

        .services-details-wrap-new .ne-tab-menu {
            padding: 8px;
            margin-bottom: 18px;
        }

        .services-details-wrap-new .ne-tab-btn {
            padding: 11px 14px;
            font-size: 14px;
        }

        .services-details-wrap-new .sdn-section-card,
        .services-details-wrap-new .sdn-side-panel,
        .services-details-wrap-new .sdn-support-panel {
            padding: 18px;
        }

        .services-details-wrap-new .sdn-section-head h2 {
            font-size: 19px;
        }
}

@media (max-width: 480px) {
    .services-details-wrap-new {
        padding: 24px 0 34px;
    }

        .services-details-wrap-new .container {
            padding-left: 12px;
            padding-right: 12px;
        }

        .services-details-wrap-new .sdn-hero-modern,
        .services-details-wrap-new .sdn-section-card,
        .services-details-wrap-new .sdn-side-panel,
        .services-details-wrap-new .sdn-support-panel {
            padding: 16px;
        }

        .services-details-wrap-new .sdn-section-head {
            display: grid;
            grid-template-columns: 44px minmax(0, 1fr);
        }

        .services-details-wrap-new .sdn-title-mark {
            width: 44px;
            height: 44px;
            flex-basis: 44px;
        }

        .services-details-wrap-new .sdn-summary-card {
            align-items: flex-start;
        }

    .dntpopups .field-title {
        margin-bottom: 14px;
        font-size: 16px;
    }


    .dntpopups .secure-box {
        margin-top: 11px;
        background: #edfbfc;
        border-radius: 8px;
        padding: 9px 18px;
        display: flex;
        align-items: center;
        gap: 19px;
    }

    .dntpopups .help-text {
        margin: 6px 0 20px;
        color: #5e737a;
        font-size: 14px;
    }


    .dntpopups .secure-box p {
        margin: 0;
        color: #494c4d;
        font-size: 14px;
        line-height: 1.35;
    }

    .dntpopups .donation-modal {
        padding: 13px;
    }


    .dntpopups .close-popup {
        right: 4px;
        top: 4px;
        width: 34px;
        height: 34px;
        font-size: 29px;
    }

    .dntpopups .donate-now {
        margin-top: 13px;
    }

    .crtic .crtic-amount-box span {
        display: block;
        color: #5c7180;
        font-size: 14px;
        font-weight: 500;
        margin-bottom: 6px;
    }

    .crtic .crtic-amount-grid {
        margin-bottom: 14px;
    }
}

/* Home page mobile radius adjustment */
@media (max-width: 767px) {
    .home-page :where( .stry-card, .crtic-card, .crtic-img-wrap, .post-item, .post-featured-image a, .post-featured-image figure, .post-featured-image figure img, .about-us-image-gold, .about-us-image-gold figure, .about-us-image-gold img, .why-choose-image-gold, .why-choose-image-gold figure, .why-choose-image-gold img, .feature-item-gold, .feature-box-image-gold, .feature-box-image-gold figure, .feature-box-image-gold img, .how-it-work-image, .how-it-work-image figure, .how-it-work-image img, .cnt-bx, .donation-modal, .main-form, .method-card, .zakat-popup-card, .cookie-popup, .chat-box ) {
        border-radius: 13px !important;
    }

    .feature-box-image-gold {
        height: calc(100% - 00px);
        margin-bottom: 0;
        overflow: hidden;
    }

    .how-work-content {
        margin-bottom: 0;
    }
}

/* Receipt page responsive polish */
.print-screens-wrp {
    padding: 46px 0 58px;
    overflow-x: hidden;
}

    .print-screens-wrp .container {
        width: 100%;
        max-width: 1180px;
    }

.print-screens {
    width: 100%;
    max-width: 1000px;
    border-radius: 14px;
    overflow: hidden;
}

    .print-screens .ps-header,
    .print-screens .ps-body,
    .print-screens .top-head,
    .print-screens .receipt-top,
    .print-screens .receipt-title,
    .print-screens .receipt-info,
    .print-screens .info-grid,
    .print-screens .info-card,
    .print-screens .payment-bar,
    .print-screens .payment-item,
    .print-screens .content-grid,
    .print-screens .box,
    .print-screens .total-row,
    .print-screens .footer-bar,
    .print-screens .footer-actions,
    .print-screens .footer-btn,
    .Payment-time-line-wrap,
    .Payment-time-line-wrap .payment-content {
        min-width: 0;
    }

    .print-screens .ps-header {
        padding: 24px 28px;
    }

    .print-screens .ps-body {
        padding: 30px;
    }

    .print-screens .top-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .print-screens .print-btn,
    .print-screens .footer-btn {
        max-width: 100%;
        border-radius: 10px;
        white-space: normal;
        text-align: center;
    }

    .print-screens .receipt-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(260px, auto);
        gap: 24px;
        align-items: start;
    }

    .print-screens .receipt-title h1 {
        font-size: 28px;
        line-height: 1.2;
        overflow-wrap: anywhere;
    }

    .print-screens .receipt-title p,
    .print-screens .receipt-info strong,
    .print-screens .info-card h3,
    .print-screens .payment-item strong,
    .print-screens .box,
    .print-screens .total-row,
    .Payment-time-line-wrap .payment-top h4,
    .Payment-time-line-wrap .payment-top span,
    .Payment-time-line-wrap .payment-content p {
        overflow-wrap: anywhere;
    }

    .print-screens .receipt-info .info-box {
        margin-bottom: 16px;
    }

    .print-screens .info-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        border-radius: 14px;
    }

    .print-screens .info-card {
        padding: 24px 18px;
    }

    .print-screens .info-icon {
        width: 60px;
        height: 60px;
        margin-bottom: 14px;
    }

        .print-screens .info-icon img {
            display: block;
            max-width: 100%;
            height: auto;
        }

    .print-screens .payment-bar {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        border-radius: 14px;
    }

    .print-screens .payment-item {
        padding: 22px;
    }

    .print-screens .content-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
        gap: 20px;
    }

    .print-screens .box {
        border-radius: 14px;
        padding: 24px;
    }

    .print-screens .box-title {
        line-height: 1.25;
    }

    .print-screens .total-row {
        border-radius: 14px;
        gap: 16px;
    }

    .print-screens .footer-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 18px;
    }

    .print-screens .footer-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

.Payment-time-line-wrap {
    border-radius: 14px;
}

    .Payment-time-line-wrap .payment-top,
    .Payment-time-line-wrap .payment-bottom {
        gap: 12px;
    }

@media (max-width: 991px) {
    .print-screens-wrp {
        padding: 38px 0 48px;
    }

    .print-screens .info-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .print-screens .info-card:nth-child(2) {
        border-right: none;
    }

    .print-screens .info-card:nth-child(-n+2) {
        border-bottom: 1px solid #bae2f1;
    }

    .print-screens .payment-bar,
    .print-screens .content-grid {
        grid-template-columns: 1fr;
    }

    .print-screens .payment-item {
        border-right: none;
        border-bottom: 1px solid #bae2f1;
    }

        .print-screens .payment-item:last-child {
            border-bottom: none;
        }
}

@media (max-width: 767px) {
    .print-screens-wrp {
        padding: 30px 0 40px;
    }

        .print-screens-wrp .container {
            padding-left: 16px;
            padding-right: 16px;
        }

    .print-screens,
    .print-screens .info-grid,
    .print-screens .payment-bar,
    .print-screens .box,
    .print-screens .total-row,
    .print-screens .print-btn,
    .print-screens .footer-btn,
    .Payment-time-line-wrap,
    .Payment-time-line-wrap .payment-content {
        border-radius: 8px;
    }

        .print-screens .ps-header,
        .print-screens .ps-body {
            padding: 20px;
        }

        .print-screens .top-head,
        .print-screens .receipt-top,
        .print-screens .footer-bar {
            display: grid;
            grid-template-columns: 1fr;
            text-align: left;
        }

        .print-screens .receipt-info {
            text-align: left;
        }

        .print-screens .receipt-title h1 {
            font-size: 24px;
        }

        .print-screens .receipt-title p,
        .print-screens .receipt-info span,
        .print-screens .receipt-info strong,
        .print-screens .info-card h5,
        .print-screens .payment-item h6,
        .print-screens .payment-item strong,
        .Payment-time-line-wrap .payment-content p {
            font-size: 14px;
        }

        .print-screens .info-grid {
            grid-template-columns: 1fr;
        }

        .print-screens .info-card {
            border-right: none;
            border-bottom: 1px solid #bae2f1;
            padding: 20px;
        }

            .print-screens .info-card:last-child {
                border-bottom: none;
            }

            .print-screens .info-card h3,
            .Payment-time-line-wrap .payment-top h4,
            .Payment-time-line-wrap .payment-top span {
                font-size: 16px;
            }

        .print-screens .box {
            padding: 20px;
        }

        .print-screens .total-row {
            align-items: flex-start;
            flex-direction: column;
        }

        .print-screens .footer-actions,
        .print-screens .print-btn,
        .print-screens .footer-btn {
            width: 100%;
        }

        .print-screens .footer-btn,
        .print-screens .print-btn {
            min-height: 44px;
        }

        .Payment-time-line-wrap .payment-item {
            gap: 14px;
        }

        .Payment-time-line-wrap .payment-top,
        .Payment-time-line-wrap .payment-bottom {
            align-items: flex-start;
            flex-direction: column;
        }
}

@media (max-width: 480px) {
    .print-screens-wrp {
        padding: 24px 0 34px;
    }

        .print-screens-wrp .container {
            padding-left: 12px;
            padding-right: 12px;
        }

    .print-screens .ps-header,
    .print-screens .ps-body,
    .print-screens .box {
        padding: 16px;
    }

    .print-screens .info-icon {
        width: 52px;
        height: 52px;
    }
}

/* Donor dashboard mobile drawer header offset */
@media (max-width: 991px) {
    .dashbord-wrp-1 .dp-mobile-menu-backdrop {
        inset: 0 !important;
        height: 100dvh !important;
        z-index: 99998 !important;
    }

    .dashbord-wrp-1 .dp-sidebar {
        top: 0 !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        z-index: 99999 !important;
        border-radius: 0 8px 8px 0 !important;
    }
}

/* Donor dashboard full mobile drawer */
.dp-mobile-menu-close {
    display: none;
}

@media (max-width: 991px) {
    body.dp-menu-open-body {
        overflow: hidden !important;
    }

    .dashbord-wrp-1 .dp-mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        width: 100vw !important;
        height: 100dvh !important;
        z-index: 99998 !important;
        background: rgba(4, 44, 58, 0.45) !important;
    }

    .dashbord-wrp-1 .dp-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        bottom: auto !important;
        z-index: 99999 !important;
        width: min(420px, 100vw) !important;
        height: 100dvh !important;
        min-height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        padding: 58px 16px 22px !important;
        border-radius: 0 !important;
        transform: translateX(-105%) !important;
        box-shadow: 18px 0 45px rgba(3, 42, 54, 0.26) !important;
        -webkit-overflow-scrolling: touch;
    }

    .dashbord-wrp-1.dp-menu-open .dp-sidebar {
        transform: translateX(0) !important;
    }

    .dashbord-wrp-1 .dp-mobile-menu-close {
        position: fixed;
        top: 14px;
        right: 14px;
        z-index: 100000;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border: 1px solid rgba(255, 255, 255, 0.32);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.16);
        color: #fff;
        font-size: 18px;
        cursor: pointer;
        backdrop-filter: blur(8px);
    }

    .dashbord-wrp-1 .dp-profile {
        padding-right: 44px;
    }
}

@media (max-width: 575px) {
    .dashbord-wrp-1 .dp-sidebar {
        width: 100vw !important;
    }
}

/* Donor dashboard linked cards */
a.dp-dashboard-link {
    color: inherit;
    cursor: pointer;
    text-decoration: none;
}

    a.dp-dashboard-link:hover,
    a.dp-dashboard-link:focus {
        color: inherit;
        text-decoration: none;
    }

.dp-dashboard-link:focus-visible {
    outline: 3px solid rgba(21, 153, 155, 0.28);
    outline-offset: 3px;
}



.news-w .post-item {
    margin-bottom: 35px;
}


.dp-wallet-panel h3 {
    font-size: 19px;
}


.dp-wallet-panel p {
    font-size: 15px;
}

.dashbord-wrp-1 .dp-bank-details-grid strong {
    color: #173f45;
    font-size: 17px;
}



@media (max-width: 768px) {
    .news-w .post-item {
        margin-bottom: 0px;
    }

    .our-blog {
        padding: 20px 0 20px;
    }

    .why-choose-image-box-2-gold {
        display: none;
    }

    .track-result-page .track-info-box {
        background: #f7fbfc;
        padding: 15px;
        border-radius: 13px;
    }

    .track-result-page .timeline-content p {
        color: #627783;
        line-height: 1.2;
        margin-bottom: 8px;
        white-space: initial;
    }

    .track-result-page .timeline-content {
        background: #15999b0f;
        padding: 15px;
        border-radius: 12px;
        width: 100%;
    }

    .track-result-page .support-message-box p {
        color: #617a86;
        line-height: 1.5;
        font-size: 14px;
        margin-bottom: 0;
    }

    .why-choose-image-box-1-gold {
        width: 100%;
    }

    .wdth {
        width: 100%;
        height: 480px;
    }

    .verify-icon {
        width: 40px;
        height: 40px;
    }

    .track-bn-card-icon {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        margin-bottom: 20px;
    }

    .notify-sec-wrap {
        padding: 0;
    }
}

/* Dashboard detail sections
   Used only by dashboard.html for card drill-down content. */

/* Interactive cards and detail container */
.dashbord-wrp-1 .dp-clickable-card {
    cursor: pointer;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

    .dashbord-wrp-1 .dp-clickable-card:hover,
    .dashbord-wrp-1 .dp-clickable-card:focus-visible,
    .dashbord-wrp-1 .dp-clickable-card.active {
        border-color: #8fd0da;
        box-shadow: 0 12px 30px rgba(70, 50, 22, 0.12);
        outline: none;
        transform: translateY(-2px);
    }

.dashbord-wrp-1 .dp-card-detail {
    display: none;
    margin-top: 24px;
    padding: 20px;
    border: 1px solid #a7d1d7;
    border-radius: 15px;
    background: #f4fbfc;
}

    .dashbord-wrp-1 .dp-card-detail.active {
        display: block;
    }

.dashbord-wrp-1 .dp-detail-head {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

    .dashbord-wrp-1 .dp-detail-head > div:nth-child(2) {
        flex: 1;
    }

    .dashbord-wrp-1 .dp-detail-head h2,
    .dashbord-wrp-1 .dp-detail-head p {
        margin: 0;
    }

.dashbord-wrp-1 .dp-detail-status {
    padding: 7px 12px;
    border-radius: 999px;
    background: #148492;
    color: #fff;
    font-weight: 400;
    font-size: 15px;
}

.dashbord-wrp-1 .dp-detail-grid,
.dashbord-wrp-1 .dp-upload-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-detail-field {
    display: grid;
    gap: 8px;
    color: #312a20;
    font-weight: 700;
}

    .dashbord-wrp-1 .dp-detail-field input,
    .dashbord-wrp-1 .dp-detail-field select,
    .dashbord-wrp-1 .dp-detail-field textarea {
        width: 100%;
        padding: 12px 14px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

.dashbord-wrp-1 .dp-detail-check {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px;
    border: 1px solid #e7dcc5;
    border-radius: 10px;
    background: #fff;
}

.dashbord-wrp-1 .dp-upload-card {
    display: grid;
    place-items: center;
    min-height: 145px;
    padding: 19px;
    border: 2px dashed #6bbbc4;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: center;
}

    .dashbord-wrp-1 .dp-upload-card i {
        margin-bottom: 8px;
        color: #2e9ba7;
        font-size: 28px;
    }

.dashbord-wrp-1 .dp-detail-save {
    margin-top: 4px;
}

.dashbord-wrp-1 .dp-donation-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

    .dashbord-wrp-1 .dp-donation-summary > div {
        display: grid;
        gap: 3px;
        padding: 15px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-donation-summary strong {
        color: #173f45;
        font-size: 20px;
    }

    .dashbord-wrp-1 .dp-donation-summary span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-donation-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 16px;
}

.dashbord-wrp-1 .dp-donation-search {
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(100%, 330px);
    padding: 0 14px;
    border: 1px solid #c3e0e4;
    border-radius: 10px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-donation-search input {
        width: 100%;
        padding: 11px 0;
        border: 0;
        outline: 0;
    }

.dashbord-wrp-1 .dp-donation-table-wrap {
    overflow-x: auto;
    border: 1px solid #c3e0e4;
    border-radius: 8px;
    background: #fff;
}

.dashbord-wrp-1 .dp-donation-detail-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

    .dashbord-wrp-1 .dp-donation-detail-table th,
    .dashbord-wrp-1 .dp-donation-detail-table td {
        padding: 10px 16px;
        border-bottom: 1px solid #e1eff1;
        color: #465153;
        text-align: left;
        font-size: 16px;
    }

    .dashbord-wrp-1 .dp-donation-detail-table th {
        background: #e8f5f7;
        color: #173f45;
        font-size: 16px;
        font-weight: 800;
    }

    .dashbord-wrp-1 .dp-donation-detail-table tbody tr:last-child td {
        border-bottom: 0;
    }

    .dashbord-wrp-1 .dp-donation-detail-table tbody tr.is-selected {
        background: #edf9fa;
    }

.dashbord-wrp-1 .dp-record-status {
    display: inline-flex;
    padding: 2px 10px;
    border-radius: 999px;
    background: #e3f5ed;
    color: #287054;
    font-size: 12px;
    font-weight: 500;
}

.dashbord-wrp-1 .dp-record-view {
    padding: 4px 11px;
    border: 1px solid #62b2bc;
    border-radius: 4px;
    background: transparent;
    color: #148492;
    font-weight: 500;
    font-size: 15px;
}

.dashbord-wrp-1 .dp-campaign-progress-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashbord-wrp-1 .dp-campaign-progress-card {
    padding: 18px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-campaign-progress-card > div:first-child {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

        .dashbord-wrp-1 .dp-campaign-progress-card > div:first-child span,
        .dashbord-wrp-1 .dp-campaign-progress-card small {
            color: #688087;
        }

        .dashbord-wrp-1 .dp-campaign-progress-card > div:first-child strong {
            color: #148492;
        }

    .dashbord-wrp-1 .dp-campaign-progress-card h3 {
        margin: 5px 0 4px;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-campaign-progress-card p {
        margin-bottom: 7px;
        font-size: 17px;
    }

.dashbord-wrp-1 .dp-campaign-progress {
    height: 8px;
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: #e1eff1;
}

    .dashbord-wrp-1 .dp-campaign-progress i {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #20a4b2;
    }

.dashbord-wrp-1 .dp-campaign-view {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid #62b2bc;
    border-radius: 6px;
    background: #edf9fa;
    color: #148492;
    font-weight: 500;
    font-size: 17px;
}

.dashbord-wrp-1 .dp-campaign-updates {
    display: grid;
    gap: 12px;
}

    .dashbord-wrp-1 .dp-campaign-updates article {
        display: flex;
        gap: 14px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 12px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-campaign-updates h3,
    .dashbord-wrp-1 .dp-campaign-updates p {
        margin: 0 0 5px;
    }

    .dashbord-wrp-1 .dp-campaign-updates small {
        color: #688087;
    }

.dashbord-wrp-1 .dp-sponsorship-case-grid,
.dashbord-wrp-1 .dp-sponsorship-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashbord-wrp-1 .dp-sponsorship-case,
.dashbord-wrp-1 .dp-sponsorship-plan {
    padding: 18px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

.dashbord-wrp-1 .dp-sponsorship-case-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .dashbord-wrp-1 .dp-sponsorship-case-top span,
    .dashbord-wrp-1 .dp-sponsorship-case small,
    .dashbord-wrp-1 .dp-sponsorship-plan span {
        color: #688087;
    }

    .dashbord-wrp-1 .dp-sponsorship-case-top b {
        padding: 4px 8px;
        border-radius: 999px;
        background: #e3f5ed;
        color: #287054;
        font-size: 12px;
    }

.dashbord-wrp-1 .dp-sponsorship-case h3,
.dashbord-wrp-1 .dp-sponsorship-plan h3 {
    margin: 14px 0 0px;
    font-size: 18px;
}

.dashbord-wrp-1 .dp-sponsorship-case > strong,
.dashbord-wrp-1 .dp-sponsorship-plan > strong {
    display: block;
    margin-bottom: 10px;
    color: #148492;
    font-size: 18px;
}

.dashbord-wrp-1 .dp-sponsorship-plan ul {
    display: grid;
    gap: 8px;
    margin: 18px 0;
    padding: 0;
    list-style: none;
}

.dashbord-wrp-1 .dp-sponsorship-plan li {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #425a60;
}

    .dashbord-wrp-1 .dp-sponsorship-plan li i {
        color: #20a4b2;
    }

.dashbord-wrp-1 .dp-sponsorship-view {
    padding: 12px 12px;
    border: 1px solid #62b2bc;
    border-radius: 6px;
    background: #edf9fa;
    color: #148492;
    font-weight: 500;
    font-size: 16px;
}

.dashbord-wrp-1 .dp-sponsorship-case .dp-sponsorship-view,
.dashbord-wrp-1 .dp-sponsorship-plan .dp-sponsorship-view {
    width: 100%;
    margin-top: 14px;
}

.dashbord-wrp-1 .dp-sponsorship-renewals {
    display: grid;
    gap: 12px;
}

    .dashbord-wrp-1 .dp-sponsorship-renewals article {
        display: grid;
        grid-template-columns: minmax(220px, 1fr) auto auto auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 12px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-sponsorship-renewals h3,
    .dashbord-wrp-1 .dp-sponsorship-renewals p {
        margin: 0;
    }

.dashbord-wrp-1 .dp-zakat-calculator {
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-zakat-calculator h3 {
        margin-bottom: 4px;
        color: #173f45;
        font-size: 22px;
    }

    .dashbord-wrp-1 .dp-zakat-calculator p {
        margin-bottom: 20px;
        color: #688087;
    }

.dashbord-wrp-1 .dp-zakat-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.dashbord-wrp-1 .dp-zakat-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 20px 0;
    padding: 18px;
    border-radius: 12px;
    background: #e8f5f7;
    color: #173f45;
}

    .dashbord-wrp-1 .dp-zakat-result strong {
        color: #148492;
        font-size: 25px;
    }

.dashbord-wrp-1 .dp-receipt-tools {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 225px auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

    .dashbord-wrp-1 .dp-receipt-tools .dp-donation-search {
        width: 100%;
        min-height: 54px;
    }

        .dashbord-wrp-1 .dp-receipt-tools .dp-donation-search input {
            height: 52px;
            padding: 0;
        }

.dashbord-wrp-1 .dp-receipt-filter {
    display: block;
}

    .dashbord-wrp-1 .dp-receipt-filter > span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .dashbord-wrp-1 .dp-receipt-filter select {
        width: 100%;
        height: 54px;
        padding: 0 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
        color: #425a60;
    }

.dashbord-wrp-1 .dp-receipt-tools .dp-receipt-action,
.dashbord-wrp-1 .dp-receipt-tools .dp-static-action {
    min-height: 54px;
    margin: 0;
    white-space: nowrap;
}

.dashbord-wrp-1 .dp-receipt-download {
    padding: 4px 11px;
    border: 1px solid #62b2bc;
    border-radius: 6px;
    background: #edf9fa;
    color: #148492;
    font-weight: 500;
    font-size: 15px;
}

.dashbord-wrp-1 .dp-receipt-select,
.dashbord-wrp-1 .dp-receipt-select-all {
    width: 16px;
    height: 16px;
    accent-color: #148492;
}

/* Payment methods */
.dashbord-wrp-1 .dp-payment-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-payment-summary > div,
    .dashbord-wrp-1 .dp-bank-details-grid > div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-payment-summary strong,
    .dashbord-wrp-1 .dp-bank-details-grid strong {
        color: #173f45;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-payment-summary span,
    .dashbord-wrp-1 .dp-bank-details-grid span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-saved-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-saved-card {
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 14px;
    background: linear-gradient(135deg, #173f45, #148492);
    color: #fff;
}

    .dashbord-wrp-1 .dp-saved-card.is-default {
        background: linear-gradient(135deg, #116d78, #1aa6b4);
    }

.dashbord-wrp-1 .dp-saved-card-top,
.dashbord-wrp-1 .dp-payment-actions,
.dashbord-wrp-1 .dp-wallet-panel,
.dashbord-wrp-1 .dp-payment-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

    .dashbord-wrp-1 .dp-saved-card-top i {
        font-size: 30px;
    }

    .dashbord-wrp-1 .dp-saved-card-top span {
        padding: 4px 8px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.18);
        font-size: 12px;
    }

.dashbord-wrp-1 .dp-saved-card > strong {
    display: block;
    margin-top: 28px;
    font-size: 20px;
    letter-spacing: 1px;
}

.dashbord-wrp-1 .dp-saved-card p {
    color: rgba(255, 255, 255, 0.75);
}

.dashbord-wrp-1 .dp-payment-actions button {
    padding: 6px 10px;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 6px;
    background: transparent;
    color: #fff;
    font-size: 16px;
}

.dashbord-wrp-1 .dp-wallet-panel,
.dashbord-wrp-1 .dp-auto-debit-panel,
.dashbord-wrp-1 .dp-bank-transfer-form {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

.dashbord-wrp-1 .dp-wallet-icon {
    display: grid;
    flex: 0 0 76px;
    width: 76px;
    height: 58px;
    place-items: center;
    border-radius: 10px;
    background: #111;
    color: #fff;
    font-size: 38px;
}

.dashbord-wrp-1 .dp-wallet-panel > div:nth-child(2) {
    flex: 1;
}

.dashbord-wrp-1 .dp-wallet-panel h3,
.dashbord-wrp-1 .dp-wallet-panel p {
    margin: 0;
}

.dashbord-wrp-1 .dp-payment-toggle {
    position: relative;
    display: inline-flex;
    flex: 0 0 48px;
    width: 48px;
    height: 26px;
}

    .dashbord-wrp-1 .dp-payment-toggle input {
        position: absolute;
        opacity: 0;
    }

    .dashbord-wrp-1 .dp-payment-toggle > span {
        width: 100%;
        border-radius: 999px;
        background: #c8d9dc;
        cursor: pointer;
        transition: background 0.2s ease;
    }

        .dashbord-wrp-1 .dp-payment-toggle > span::after {
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #fff;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            content: "";
            transition: transform 0.2s ease;
        }

    .dashbord-wrp-1 .dp-payment-toggle input:checked + span {
        background: #1596a5;
    }

        .dashbord-wrp-1 .dp-payment-toggle input:checked + span::after {
            transform: translateX(22px);
        }

.dashbord-wrp-1 .dp-bank-details-grid,
.dashbord-wrp-1 .dp-auto-debit-panel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.dashbord-wrp-1 .dp-bank-details-grid {
    margin-bottom: 16px;
}

.dashbord-wrp-1 .dp-bank-transfer-form {
    display: grid;
    grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
    align-items: stretch;
    gap: 16px;
}

    .dashbord-wrp-1 .dp-bank-transfer-form .dp-upload-card {
        min-height: 120px;
    }

.dashbord-wrp-1 .dp-payment-toggle-row {
    padding: 14px;
    border: 1px solid #c3e0e4;
    border-radius: 10px;
}

    .dashbord-wrp-1 .dp-payment-toggle-row > span:first-child {
        display: grid;
        gap: 3px;
    }

    .dashbord-wrp-1 .dp-payment-toggle-row small {
        color: #688087;
    }

/* Notification preferences */
.dashbord-wrp-1 .dp-notification-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-notification-summary > div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-notification-summary strong {
        color: #173f45;
        font-size: 20px;
    }

    .dashbord-wrp-1 .dp-notification-summary span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-notification-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-notification-settings,
.dashbord-wrp-1 .dp-notification-preview,
.dashbord-wrp-1 .dp-notification-controls {
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-notification-settings h3,
    .dashbord-wrp-1 .dp-notification-preview h3 {
        margin-bottom: 14px;
        color: #173f45;
        font-size: 18px;
    }

.dashbord-wrp-1 .dp-notification-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e1eff1;
}

    .dashbord-wrp-1 .dp-notification-option:last-child {
        border-bottom: 0;
    }

    .dashbord-wrp-1 .dp-notification-option > span:first-child {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 2px 8px;
    }

    .dashbord-wrp-1 .dp-notification-option i {
        grid-row: span 2;
        color: #1596a5;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-notification-option strong {
        color: #173f45;
    }

    .dashbord-wrp-1 .dp-notification-option small,
    .dashbord-wrp-1 .dp-notification-preview small {
        color: #688087;
    }

.dashbord-wrp-1 .dp-notification-preview {
    display: grid;
    align-content: start;
    gap: 12px;
}

    .dashbord-wrp-1 .dp-notification-preview article {
        display: flex;
        gap: 12px;
        padding: 14px;
        border-radius: 10px;
        background: #edf9fa;
    }

        .dashbord-wrp-1 .dp-notification-preview article > i {
            color: #1596a5;
            font-size: 20px;
        }

    .dashbord-wrp-1 .dp-notification-preview strong,
    .dashbord-wrp-1 .dp-notification-preview p {
        display: block;
        margin: 0 0 4px;
    }

.dashbord-wrp-1 .dp-notification-controls {
    display: grid;
    align-content: start;
    gap: 16px;
}

/* Impact reports */
.dashbord-wrp-1 .dp-impact-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-impact-summary > div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-impact-summary strong {
        color: #173f45;
        font-size: 21px;
    }

    .dashbord-wrp-1 .dp-impact-summary span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-impact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(250px, 0.7fr);
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-impact-breakdown,
.dashbord-wrp-1 .dp-impact-story {
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-impact-breakdown h3,
    .dashbord-wrp-1 .dp-impact-story h3 {
        margin-bottom: 16px;
        color: #173f45;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-impact-breakdown > div {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 7px 14px;
        margin-bottom: 14px;
    }

        .dashbord-wrp-1 .dp-impact-breakdown > div:last-child {
            margin-bottom: 0;
        }

    .dashbord-wrp-1 .dp-impact-breakdown i {
        grid-column: 1 / -1;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #e1eff1;
    }

    .dashbord-wrp-1 .dp-impact-breakdown b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #20a4b2;
    }

.dashbord-wrp-1 .dp-impact-story {
    display: grid;
    align-content: center;
    text-align: left;
}

    .dashbord-wrp-1 .dp-impact-story > i {
        margin-bottom: 12px;
        color: #1596a5;
        font-size: 42px;
    }

    .dashbord-wrp-1 .dp-impact-story p,
    .dashbord-wrp-1 .dp-impact-story small {
        color: #688087;
    }

.dashbord-wrp-1 .dp-education-impact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-education-impact-grid article {
        padding: 20px;
        border: 1px solid #c3e0e4;
        border-radius: 12px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-education-impact-grid i {
        color: #1596a5;
        font-size: 26px;
    }

    .dashbord-wrp-1 .dp-education-impact-grid strong {
        display: block;
        margin-top: 14px;
        color: #173f45;
        font-size: 25px;
    }

    .dashbord-wrp-1 .dp-education-impact-grid h3 {
        margin: 3px 0;
        font-size: 17px;
    }

    .dashbord-wrp-1 .dp-education-impact-grid p {
        margin: 0;
        color: #688087;
    }

.dashbord-wrp-1 .dp-media-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    padding: 14px 16px;
    border: 1px solid #c3e0e4;
    border-radius: 10px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-media-toolbar > div {
        display: grid;
    }

    .dashbord-wrp-1 .dp-media-toolbar strong {
        color: #173f45;
        font-size: 20px;
    }

    .dashbord-wrp-1 .dp-media-toolbar span {
        color: #688087;
    }

    .dashbord-wrp-1 .dp-media-toolbar select {
        min-width: 190px;
        padding: 10px 12px;
        border: 1px solid #c3e0e4;
        border-radius: 8px;
        background: #fff;
    }

.dashbord-wrp-1 .dp-impact-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-impact-gallery article {
        overflow: hidden;
        border: 1px solid #c3e0e4;
        border-radius: 12px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-impact-gallery img {
        width: 100%;
        height: 180px;
        object-fit: cover;
    }

    .dashbord-wrp-1 .dp-impact-gallery article > div {
        display: grid;
        gap: 3px;
        padding: 14px;
    }

    .dashbord-wrp-1 .dp-impact-gallery span {
        color: #688087;
        font-size: 13px;
    }

/* Loyalty and rewards */
.dashbord-wrp-1 .dp-loyalty-hero {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    padding: 22px;
    border-radius: 14px;
    background: linear-gradient(135deg, #173f45, #1596a5);
    color: #fff;
}

.dashbord-wrp-1 .dp-loyalty-rank-icon {
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.16);
    color: #ffd979;
    font-size: 28px;
}

.dashbord-wrp-1 .dp-loyalty-hero h3,
.dashbord-wrp-1 .dp-loyalty-hero p {
    margin: 0;
    color: #fff;
}

.dashbord-wrp-1 .dp-loyalty-hero > strong {
    padding: 7px 12px;
    border-radius: 999px;
    background: #ffd979;
    color: #624c12;
}

.dashbord-wrp-1 .dp-rank-progress,
.dashbord-wrp-1 .dp-rank-benefits,
.dashbord-wrp-1 .dp-vip-levels {
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-rank-progress {
    padding: 18px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-rank-progress > div {
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .dashbord-wrp-1 .dp-rank-progress > i {
        display: block;
        height: 9px;
        margin: 12px 0 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #e1eff1;
    }

    .dashbord-wrp-1 .dp-rank-progress b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #d6a629, #ffd979);
    }

.dashbord-wrp-1 .dp-rank-labels {
    color: #688087;
    font-size: 12px;
}

.dashbord-wrp-1 .dp-rank-benefits {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

    .dashbord-wrp-1 .dp-rank-benefits article,
    .dashbord-wrp-1 .dp-vip-next-step {
        display: flex;
        gap: 12px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

        .dashbord-wrp-1 .dp-rank-benefits i,
        .dashbord-wrp-1 .dp-vip-next-step > i {
            color: #1596a5;
            font-size: 21px;
        }

    .dashbord-wrp-1 .dp-rank-benefits div {
        display: grid;
        gap: 3px;
    }

    .dashbord-wrp-1 .dp-rank-benefits span,
    .dashbord-wrp-1 .dp-vip-next-step p {
        margin: 0;
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-vip-summary,
.dashbord-wrp-1 .dp-badge-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-vip-summary > div,
    .dashbord-wrp-1 .dp-badge-summary > div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-vip-summary strong,
    .dashbord-wrp-1 .dp-badge-summary strong {
        color: #173f45;
        font-size: 20px;
    }

    .dashbord-wrp-1 .dp-vip-summary span,
    .dashbord-wrp-1 .dp-badge-summary span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-vip-levels {
    display: grid;
    gap: 12px;
}

    .dashbord-wrp-1 .dp-vip-levels article {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 14px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

        .dashbord-wrp-1 .dp-vip-levels article > span {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border-radius: 50%;
            background: #e1eff1;
            color: #173f45;
            font-weight: 800;
        }

        .dashbord-wrp-1 .dp-vip-levels article.active {
            border-color: #d6a629;
            background: #fffaf0;
        }

            .dashbord-wrp-1 .dp-vip-levels article.completed > span,
            .dashbord-wrp-1 .dp-vip-levels article.active > span {
                background: #1596a5;
                color: #fff;
            }

    .dashbord-wrp-1 .dp-vip-levels h3,
    .dashbord-wrp-1 .dp-vip-levels p,
    .dashbord-wrp-1 .dp-vip-next-step p {
        margin: 0;
    }

.dashbord-wrp-1 .dp-vip-next-step {
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-badge-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-badge-grid article {
        display: grid;
        justify-items: center;
        gap: 6px;
        padding: 20px;
        border: 1px solid #c3e0e4;
        border-radius: 12px;
        background: #fff;
        text-align: center;
    }

        .dashbord-wrp-1 .dp-badge-grid article > i {
            display: grid;
            width: 62px;
            height: 62px;
            place-items: center;
            border-radius: 50%;
            background: #e8f5f7;
            color: #1596a5;
            font-size: 25px;
        }

    .dashbord-wrp-1 .dp-badge-grid .earned {
        border-color: #e0c067;
        background: #fffdf6;
    }

        .dashbord-wrp-1 .dp-badge-grid .earned > i {
            background: #ffefbd;
            color: #9a7312;
        }

    .dashbord-wrp-1 .dp-badge-grid .locked {
        opacity: 0.65;
    }

    .dashbord-wrp-1 .dp-badge-grid span,
    .dashbord-wrp-1 .dp-badge-grid small {
        color: #688087;
    }

/* Account settings */
.dashbord-wrp-1 .dp-settings-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-settings-summary > div {
        display: grid;
        gap: 4px;
        padding: 16px;
        border: 1px solid #c3e0e4;
        border-radius: 10px;
        background: #fff;
    }

    .dashbord-wrp-1 .dp-settings-summary strong {
        color: #173f45;
        font-size: 20px;
    }

    .dashbord-wrp-1 .dp-settings-summary span {
        color: #688087;
        font-size: 13px;
    }

.dashbord-wrp-1 .dp-settings-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-settings-card,
.dashbord-wrp-1 .dp-trusted-devices {
    padding: 20px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
}

    .dashbord-wrp-1 .dp-settings-card h3,
    .dashbord-wrp-1 .dp-trusted-devices h3 {
        margin-bottom: 16px;
        color: #173f45;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-settings-card .dp-detail-grid {
        grid-template-columns: 1fr;
    }

.dashbord-wrp-1 .dp-settings-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #e1eff1;
}

    .dashbord-wrp-1 .dp-settings-toggle:last-child {
        border-bottom: 0;
    }

    .dashbord-wrp-1 .dp-settings-toggle > span:first-child {
        display: grid;
        grid-template-columns: 28px 1fr;
        gap: 2px 8px;
    }

    .dashbord-wrp-1 .dp-settings-toggle i {
        grid-row: span 2;
        color: #1596a5;
        font-size: 18px;
    }

    .dashbord-wrp-1 .dp-settings-toggle small,
    .dashbord-wrp-1 .dp-trusted-devices span {
        color: #688087;
    }

.dashbord-wrp-1 .dp-password-strength {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 7px 14px;
    color: #425a60;
    font-size: 13px;
}

    .dashbord-wrp-1 .dp-password-strength i {
        grid-column: 1 / -1;
        height: 7px;
        overflow: hidden;
        border-radius: 999px;
        background: #e1eff1;
    }

    .dashbord-wrp-1 .dp-password-strength b {
        display: block;
        height: 100%;
        border-radius: inherit;
        background: #2aaf79;
    }

    .dashbord-wrp-1 .dp-password-strength strong {
        color: #287054;
    }

.dashbord-wrp-1 .dp-trusted-devices {
    display: grid;
    gap: 10px;
    margin-bottom: 20px;
}

    .dashbord-wrp-1 .dp-trusted-devices article {
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 12px;
        padding: 12px;
        border: 1px solid #e1eff1;
        border-radius: 9px;
    }

        .dashbord-wrp-1 .dp-trusted-devices article > i {
            color: #1596a5;
            font-size: 21px;
        }

        .dashbord-wrp-1 .dp-trusted-devices article > div {
            display: grid;
            gap: 3px;
        }

    .dashbord-wrp-1 .dp-trusted-devices button,
    .dashbord-wrp-1 .dp-settings-link {
        padding: 7px 11px;
        border: 1px solid #62b2bc;
        border-radius: 6px;
        background: #edf9fa;
        color: #148492;
        font-weight: 500;
        font-size: 15px;
    }

.dashbord-wrp-1 .dp-settings-link {
    margin-top: 16px;
}

.dashbord-wrp-1 .dp-language-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.dashbord-wrp-1 .dp-language-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px solid #c3e0e4;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
}

    .dashbord-wrp-1 .dp-language-card.active {
        border-color: #1596a5;
        background: #edf9fa;
    }

    .dashbord-wrp-1 .dp-language-card input {
        position: absolute;
        opacity: 0;
    }

    .dashbord-wrp-1 .dp-language-card > span {
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border-radius: 50%;
        background: #1596a5;
        color: #fff;
        font-weight: 800;
    }

    .dashbord-wrp-1 .dp-language-card > div {
        display: grid;
        gap: 3px;
    }

    .dashbord-wrp-1 .dp-language-card small {
        color: #688087;
    }

    .dashbord-wrp-1 .dp-language-card > i {
        color: #1596a5;
        font-size: 20px;
    }

/* Detail typography */
.dp-detail-head h2 {
    font-size: 22px;
}

.dp-detail-head p {
    font-size: 16px;
}

.dp-campaign-updates h3 {
    font-size: 18px;
}

.dp-campaign-updates p {
    font-size: 15px;
}

.dp-campaign-progress-card span {
    font-size: 15px;
}


.dp-sponsorship-renewals h3 {
    font-size: 18px;
}

.dp-sponsorship-renewals p {
    font-size: 15px;
}


.dp-sponsorship-case p {
    font-size: 16px;
    margin-bottom: 10px;
}

.dp-sponsorship-case-top span {
    font-size: 15px;
}

.dp-notification-preview p {
    font-size: 15px;
}

.dp-impact-story p {
    font-size: 15px;
    line-height: 18px;
    margin-bottom: 11px;
}

.dp-impact-story small {
    font-size: 14px;
    line-height: 16px;
}

.dp-impact-breakdown strong {
    font-size: 18px;
}

.dp-loyalty-hero h3 {
    font-size: 19px;
}

.dp-loyalty-hero span {
    font-size: 15px;
}

.dp-detail-field span {
    font-weight: 500;
}


@media (max-width: 767px) {
    .dashbord-wrp-1 .dp-detail-grid,
    .dashbord-wrp-1 .dp-upload-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-detail-head {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashbord-wrp-1 .dp-donation-summary {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-donation-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .dashbord-wrp-1 .dp-campaign-progress-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-sponsorship-case-grid,
    .dashbord-wrp-1 .dp-sponsorship-plan-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-sponsorship-renewals article {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-zakat-fields {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-receipt-tools {
        grid-template-columns: 1fr;
    }

        .dashbord-wrp-1 .dp-receipt-tools .dp-receipt-action,
        .dashbord-wrp-1 .dp-receipt-tools .dp-static-action {
            width: 100%;
        }

    .dashbord-wrp-1 .dp-payment-summary,
    .dashbord-wrp-1 .dp-saved-card-grid,
    .dashbord-wrp-1 .dp-bank-details-grid,
    .dashbord-wrp-1 .dp-bank-transfer-form,
    .dashbord-wrp-1 .dp-auto-debit-panel {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-wallet-panel {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .dashbord-wrp-1 .dp-notification-summary,
    .dashbord-wrp-1 .dp-notification-layout {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-impact-summary,
    .dashbord-wrp-1 .dp-impact-layout,
    .dashbord-wrp-1 .dp-education-impact-grid,
    .dashbord-wrp-1 .dp-impact-gallery {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-media-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

        .dashbord-wrp-1 .dp-media-toolbar select {
            width: 100%;
        }

    .dashbord-wrp-1 .dp-loyalty-hero {
        grid-template-columns: auto 1fr;
    }

        .dashbord-wrp-1 .dp-loyalty-hero > strong {
            grid-column: 1 / -1;
            justify-self: start;
        }

    .dashbord-wrp-1 .dp-rank-benefits,
    .dashbord-wrp-1 .dp-vip-summary,
    .dashbord-wrp-1 .dp-badge-summary,
    .dashbord-wrp-1 .dp-badge-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-settings-summary,
    .dashbord-wrp-1 .dp-settings-layout,
    .dashbord-wrp-1 .dp-language-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-trusted-devices article {
        grid-template-columns: auto 1fr;
    }

    .dashbord-wrp-1 .dp-trusted-devices button {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* Dashboard responsive layout overrides */
.dashbord-wrp-1,
.dashbord-wrp-1 .db1-layout,
.dashbord-wrp-1 .dp-main,
.dashbord-wrp-1 .db1-panel,
.dashbord-wrp-1 .dp-card-detail {
    min-width: 0;
}

    .dashbord-wrp-1 .dp-main {
        overflow: hidden;
    }

    .dashbord-wrp-1 .dp-card-detail,
    .dashbord-wrp-1 .dp-settings-card,
    .dashbord-wrp-1 .dp-notification-settings,
    .dashbord-wrp-1 .dp-notification-preview,
    .dashbord-wrp-1 .dp-impact-breakdown,
    .dashbord-wrp-1 .dp-impact-story {
        max-width: 100%;
    }

    .dashbord-wrp-1 img {
        max-width: 100%;
    }

@media (max-width: 1280px) {
    .dashbord-wrp-1 .db1-layout {
        grid-template-columns: minmax(240px, 280px) minmax(0, 1fr);
        gap: 20px;
    }

    .dashbord-wrp-1 .dp-main {
        padding: 22px;
    }

    .dashbord-wrp-1 .dp-section-grid,
    .dashbord-wrp-1 .dp-profile-edit-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1100px) {
    .dashbord-wrp-1 .db1-layout {
        display: block;
    }

    .dashbord-wrp-1 .dp-main {
        width: 100%;
    }

    .dashbord-wrp-1 .dp-mobile-menu-toggle {
        display: inline-flex;
    }

    .dashbord-wrp-1 .dp-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        z-index: 99999 !important;
        width: min(380px, 90vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        visibility: hidden !important;
        transform: translate3d(-105%, 0, 0) !important;
        transition: transform 0.28s ease, visibility 0.28s ease !important;
    }

    .dashbord-wrp-1.dp-menu-open .dp-sidebar {
        visibility: visible !important;
        transform: translate3d(0, 0, 0) !important;
    }

    .dashbord-wrp-1 .dp-mobile-menu-backdrop {
        position: fixed !important;
        inset: 0 !important;
        z-index: 99998 !important;
        display: block !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .dashbord-wrp-1.dp-menu-open .dp-mobile-menu-backdrop {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 900px) {
    .dashbord-wrp-1 .dp-main {
        padding: 18px;
    }

    .dashbord-wrp-1 .dp-hero,
    .dashbord-wrp-1 .dp-head-row,
    .dashbord-wrp-1 .dp-detail-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashbord-wrp-1 .dp-stats,
    .dashbord-wrp-1 .dp-section-grid,
    .dashbord-wrp-1 .dp-profile-edit-grid,
    .dashbord-wrp-1 .dp-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-detail-status {
        align-self: flex-start;
    }

    .dashbord-wrp-1 .dp-donation-table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767px) {
    .dashbord-wrp-1 .dp-main,
    .dashbord-wrp-1 .dp-card-detail,
    .dashbord-wrp-1 .dp-settings-card,
    .dashbord-wrp-1 .dp-notification-settings,
    .dashbord-wrp-1 .dp-notification-preview,
    .dashbord-wrp-1 .dp-notification-controls,
    .dashbord-wrp-1 .dp-impact-breakdown,
    .dashbord-wrp-1 .dp-impact-story,
    .dashbord-wrp-1 .dp-zakat-calculator {
        padding: 16px;
    }

    .dashbord-wrp-1 .dp-mobile-menu-toggle {
        top: 8px;
        width: 100%;
        margin-bottom: 16px;
    }

    .dashbord-wrp-1 .dp-feature-card {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
    }

        .dashbord-wrp-1 .dp-feature-card > span {
            grid-column: 2;
            justify-self: start;
        }

    .dashbord-wrp-1 .dp-detail-grid,
    .dashbord-wrp-1 .dp-upload-grid,
    .dashbord-wrp-1 .dp-donation-summary,
    .dashbord-wrp-1 .dp-payment-summary,
    .dashbord-wrp-1 .dp-notification-summary,
    .dashbord-wrp-1 .dp-impact-summary,
    .dashbord-wrp-1 .dp-settings-summary,
    .dashbord-wrp-1 .dp-rank-benefits,
    .dashbord-wrp-1 .dp-vip-summary,
    .dashbord-wrp-1 .dp-badge-summary,
    .dashbord-wrp-1 .dp-badge-grid,
    .dashbord-wrp-1 .dp-campaign-progress-grid,
    .dashbord-wrp-1 .dp-sponsorship-case-grid,
    .dashbord-wrp-1 .dp-sponsorship-plan-grid,
    .dashbord-wrp-1 .dp-education-impact-grid,
    .dashbord-wrp-1 .dp-impact-gallery,
    .dashbord-wrp-1 .dp-settings-layout,
    .dashbord-wrp-1 .dp-language-grid,
    .dashbord-wrp-1 .dp-zakat-fields,
    .dashbord-wrp-1 .dp-saved-card-grid,
    .dashbord-wrp-1 .dp-bank-details-grid,
    .dashbord-wrp-1 .dp-bank-transfer-form,
    .dashbord-wrp-1 .dp-auto-debit-panel {
        grid-template-columns: 1fr;
    }

    .dashbord-wrp-1 .dp-notification-layout,
    .dashbord-wrp-1 .dp-impact-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .dashbord-wrp-1 .dp-donation-toolbar,
    .dashbord-wrp-1 .dp-receipt-tools,
    .dashbord-wrp-1 .dp-media-toolbar {
        display: grid;
        grid-template-columns: 1fr;
        align-items: stretch;
    }

        .dashbord-wrp-1 .dp-donation-search,
        .dashbord-wrp-1 .dp-receipt-filter,
        .dashbord-wrp-1 .dp-receipt-tools .db1-action-btn,
        .dashbord-wrp-1 .dp-donation-toolbar .db1-action-btn,
        .dashbord-wrp-1 .dp-media-toolbar select {
            width: 100%;
            max-width: none;
        }

    .dashbord-wrp-1 .dp-sponsorship-renewals article,
    .dashbord-wrp-1 .dp-vip-levels article {
        grid-template-columns: 1fr;
        justify-items: start;
    }
}

@media (max-width: 575px) {
    .dashbord-wrp-1 .dp-main {
        padding: 12px;
        border-radius: 12px;
    }

    .dashbord-wrp-1 .dp-hero,
    .dashbord-wrp-1 .dp-card-detail {
        padding: 14px;
    }

        .dashbord-wrp-1 .dp-hero h1,
        .dashbord-wrp-1 .db1-head h1 {
            font-size: clamp(21px, 5.5vw, 32px);
        }

    .dashbord-wrp-1 .dp-feature-card {
        padding: 14px;
    }

    .dashbord-wrp-1 .dp-feature-icon {
        width: 42px;
        height: 42px;
    }

    .dashbord-wrp-1 .dp-detail-head {
        gap: 12px;
    }

    .dashbord-wrp-1 .dp-loyalty-hero,
    .dashbord-wrp-1 .dp-wallet-panel,
    .dashbord-wrp-1 .dp-payment-toggle-row {
        display: grid;
        grid-template-columns: 1fr;
        justify-items: start;
    }

    .dashbord-wrp-1 .dp-rank-progress > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashbord-wrp-1 .dp-language-card,
    .dashbord-wrp-1 .dp-trusted-devices article {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .dashbord-wrp-1 .db1-action-btn,
    .dashbord-wrp-1 .dp-static-action {
        width: 100%;
        justify-content: center;
        white-space: normal;
    }

    .dashbord-wrp-1 .dp-donation-detail-table {
        min-width: 680px;
    }

    .db1-head p {
        color: #5d7482;
        font-size: 15px;
        line-height: 1.2;
        margin-bottom: 0;
    }
}
/* Policy drawer final state */
.aid-ai-upload-grid .aid-upload-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 1px solid rgba(17, 76, 92, 0.12);
    background: #fff;
    transition: 0.25s ease;
    cursor: pointer;
}

    .aid-ai-upload-grid .aid-upload-card.is-upload-missing {
        border-color: #d92d20;
        background: #fff5f5;
        box-shadow: 0 0 0 3px rgba(217, 45, 32, 0.12);
    }

        .aid-ai-upload-grid .aid-upload-card.is-upload-missing .aid-upload-badge {
            background: #fee4e2;
            color: #b42318;
        }

.aid-upload-required-error {
    color: #b42318;
    font-size: 13px;
    font-weight: 600;
}

.aid-upload-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.aid-upload-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(13, 104, 121, 0.1);
    color: #0d6879;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

.aid-upload-file-name {
    display: block;
    margin-top: 4px;
    padding: 10px 12px;
    border: 1px dashed rgba(17, 76, 92, 0.16);
    border-radius: 10px;
    color: #536a72;
    font-size: 13px;
    background: rgba(245, 250, 251, 0.85);
}

.aid-upload-card.is-ai-loading {
    opacity: 0.78;
}

.aid-upload-card.is-ai-accepted {
    border-color: rgba(0, 166, 90, 0.35);
    background: rgba(0, 166, 90, 0.06);
}

    .aid-upload-card.is-ai-accepted .aid-upload-badge {
        background: #dcf8e8;
        color: #059457;
    }

.aid-upload-card.is-ai-review {
    border-color: rgba(238, 148, 0, 0.38);
    background: rgba(255, 180, 42, 0.08);
}

    .aid-upload-card.is-ai-review .aid-upload-badge {
        background: #fff0d4;
        color: #c97900;
    }

.aid-upload-card.is-ai-rejected {
    border-color: rgba(227, 48, 65, 0.34);
    background: rgba(227, 48, 65, 0.06);
}

    .aid-upload-card.is-ai-rejected .aid-upload-badge {
        background: #ffe1e5;
        color: #d32035;
    }

.aid-required-docs,
.aid-specific-docs {
    margin-top: 28px;
    padding: 20px;
    border: 1px solid rgba(17, 76, 92, 0.1);
    border-radius: 22px;
    background: linear-gradient(180deg, #ffffff 0%, #f5fbfc 100%);
}

.aid-required-docs {
    background: linear-gradient(180deg, #fff 0%, #f2ffff 100%);
}

.aid-required-grid .aid-specific-card {
    border-color: rgb(209, 238, 243);
}

.aid-requirement-note {
    background: #fffdf5;
}

.aid-specific-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

    .aid-specific-head > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 14px;
        background: linear-gradient(135deg, #0d6879, #1ca3af);
        color: #fff;
    }

    .aid-specific-head h3 {
        margin: 0 0 4px;
        color: #114c5c;
        font-size: 22px;
    }

    .aid-specific-head p {
        margin: 0;
        color: #667b84;
    }

.aid-specific-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.aid-specific-card {
    padding: 20px;
    border: 1px solid rgba(17, 76, 92, 0.1);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 14px 35px rgba(17, 76, 92, 0.06);
}

    .aid-specific-card h4 {
        display: flex;
        align-items: center;
        gap: 10px;
        margin: 0 0 16px;
        color: #0d6879;
        font-size: 18px;
    }

.aid-specific-card-icon {
    width: 24px;
    height: 24px;
    object-fit: contain;
    flex: 0 0 24px;
}

.aid-specific-card h5 {
    margin: 18px 0 8px;
    color: #114c5c;
    font-size: 17px;
}

    .aid-specific-card h5:first-of-type {
        margin-top: 0;
    }

.aid-specific-card ul {
    margin: 0;
    padding-left: 18px;
    color: #526a73;
}

.aid-specific-card li {
    margin-bottom: 7px;
    line-height: 1.5;
}

.aid-ai-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 45, 58, 0.56);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.25s ease;
}

    .aid-ai-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.aid-ai-modal-card {
    position: relative;
    width: min(520px, 100%);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    padding: 34px 19px;
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfefe 100%);
    text-align: center;
    box-shadow: 0 32px 90px rgba(5, 45, 58, 0.28);
}

.aid-ai-close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: #eaf4f6;
    color: #0d6879;
    font-size: 18px;
    transition: 0.2s ease;
}

    .aid-ai-close:hover {
        background: #dceff2;
        transform: translateY(-1px);
    }

.aid-ai-robot {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 75px !important;
    height: 75px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    font-size: 39px;
    box-shadow: none;
    outline: solid 8px #e4f5f6;
}

.aid-ai-status-mark {
    position: absolute;
    right: -13px;
    bottom: -11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #37d477;
    color: #fff;
    font-size: 18px;
    box-shadow: 0 5px 12px rgba(12, 111, 80, 0.18);
}

    .aid-ai-status-mark.is-rejected {
        background: #ef3047;
    }

    .aid-ai-status-mark.is-review {
        background: #ee9400;
    }

.aid-ai-modal h3 {
    margin: 0 0 -2px;
    color: #114c5c;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 500;
}

.aid-ai-modal p {
    margin: 0;
    color: #4f6670;
    font-size: 17px;
}

.aid-ai-loader {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border: 4px solid rgba(28, 163, 175, 0.18);
    border-top-color: #1ca3af;
    border-radius: 50%;
    animation: aidAiSpin 0.9s linear infinite;
}

.aid-ai-checks {
    margin: 26px 0 0;
    padding: 18px 15px;
    list-style: none;
    text-align: left;
    border: 1px solid rgba(17, 76, 92, 0.08);
    border-radius: 15px;
    background: #f8fcfd;
}

    .aid-ai-checks li {
        position: relative;
        display: flex;
        align-items: flex-start;
        margin-bottom: 8px;
        padding-left: 36px;
        color: #3f5963;
        font-weight: 500;
        line-height: 1.45;
    }

        .aid-ai-checks li::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0px;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: #149091;
            box-shadow: 0 6px 14px rgba(10, 168, 95, 0.18);
        }

        .aid-ai-checks li::after {
            content: "";
            position: absolute;
            left: 7px;
            top: 7px;
            width: 8px;
            height: 5px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(-45deg);
        }

        .aid-ai-checks li:last-child {
            margin-bottom: 0;
        }

.aid-ai-notice {
    margin-top: 22px;
    padding: 11px 20px;
    border: 1px solid rgba(13, 104, 121, 0.08);
    border-radius: 12px;
    background: #edf8f4;
    color: #114c5c;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
}

.aid-ai-actions {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.aid-ai-primary,
.aid-ai-secondary {
    flex: 1;
    min-height: 56px;
    border-radius: 12px;
    font-weight: 800;
    font-size: 16px;
}

.aid-ai-primary {
    border: 0;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    box-shadow: 0 14px 26px rgba(28, 163, 175, 0.22);
}

.aid-ai-secondary {
    border: 1px solid rgba(17, 76, 92, 0.18);
    background: #fff;
    color: #114c5c;
}

.aid-ai-modal.is-loading .aid-ai-close,
.aid-ai-modal.is-loading .aid-ai-actions {
    display: none;
}

.aid-ai-modal.is-accepted .aid-ai-robot {
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    outline-color: #e4f5f6;
}

.aid-ai-modal.is-accepted .aid-ai-notice {
    background: #e7f9ef;
    border-color: rgba(9, 169, 106, 0.14);
    color: #067744;
}

.aid-ai-modal.is-review .aid-ai-robot {
    background: linear-gradient(135deg, #ee9400, #ffc04b);
    outline-color: rgba(238, 148, 0, 0.12);
}

.aid-ai-modal.is-review .aid-ai-notice {
    background: #fff4db;
    border-color: rgba(238, 148, 0, 0.18);
    color: #9b6200;
}

.aid-ai-modal.is-rejected .aid-ai-robot {
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    outline-color: #e4f5f6;
}

.aid-ai-modal.is-rejected .aid-ai-checks {
    background: #fff9fa;
    border-color: rgba(211, 32, 53, 0.12);
}

    .aid-ai-modal.is-rejected .aid-ai-checks li::before {
        background: #d32035;
        box-shadow: 0 6px 14px rgba(211, 32, 53, 0.18);
    }

    .aid-ai-modal.is-rejected .aid-ai-checks li::after {
        left: 6px;
        top: 6px;
        width: 10px;
        height: 10px;
        border: 0;
        background: linear-gradient(45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%), linear-gradient(-45deg, transparent 43%, #fff 43%, #fff 57%, transparent 57%);
        transform: none;
    }

    /* A rejected document can still have successful individual checks. */
    .aid-ai-modal.is-rejected .aid-ai-checks li.is-passed::before {
        background: #149091;
        box-shadow: 0 6px 14px rgba(10, 168, 95, 0.18);
    }

    .aid-ai-modal.is-rejected .aid-ai-checks li.is-passed::after {
        left: 7px;
        top: 7px;
        width: 8px;
        height: 5px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        background: none;
        transform: rotate(-45deg);
    }

.aid-ai-modal.is-rejected .aid-ai-notice {
    background: #ffe9ec;
    border-color: rgba(211, 32, 53, 0.16);
    color: #b51d2d;
}

.aid-ai-modal.is-rejected .aid-ai-primary {
    background: linear-gradient(135deg, #d32035, #ff6876);
}

@keyframes aidAiSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 991px) {
    .aid-specific-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .aid-specific-docs {
        padding: 18px;
    }

    .aid-ai-modal-card {
        padding: 30px 20px 24px;
        border-radius: 20px;
    }

    .aid-ai-actions {
        flex-direction: column;
    }
}

.ai-doc-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 45, 58, 0.58);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: 0.25s ease;
}

    .ai-doc-modal.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

.ai-doc-modal-box {
    position: relative;
    width: min(430px, 100%);
    padding: 34px 28px 28px;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 28px 80px rgba(5, 45, 58, 0.26);
    text-align: center;
}

.ai-doc-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(13, 104, 121, 0.1);
    color: #0d6879;
}

.ai-doc-modal-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 16px;
    border-radius: 24px;
    background: linear-gradient(135deg, #0d6879, #1ca3af);
    color: #fff;
    font-size: 32px;
    overflow: hidden;
}

.ai-doc-modal-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.ai-doc-modal h3 {
    margin: 0 0 8px;
    color: #114c5c;
    font-size: 24px;
    line-height: 1.25;
}

.ai-doc-modal p {
    margin: 0;
    color: #4f6670;
    font-size: 16px;
}

.ai-doc-modal small {
    display: block;
    margin-top: 10px;
    color: #667b84;
    line-height: 1.5;
}

.ai-doc-loader {
    width: 42px;
    height: 42px;
    margin: 0 auto 16px;
    border: 4px solid rgba(28, 163, 175, 0.18);
    border-top-color: #1ca3af;
    border-radius: 50%;
    animation: aiDocSpin 0.9s linear infinite;
}

.ai-doc-modal-ok {
    margin-top: 22px;
    min-width: 120px;
}

.ai-doc-modal.is-loading .ai-doc-modal-ok,
.ai-doc-modal.is-loading .ai-doc-modal-close {
    display: none;
}

.ai-doc-modal.is-success .ai-doc-modal-icon {
    background: linear-gradient(135deg, #0c9f75, #22c18b);
}

.ai-doc-modal.is-review .ai-doc-modal-icon {
    background: linear-gradient(135deg, #c8810b, #f1b84a);
}

.ai-doc-modal.is-error .ai-doc-modal-icon {
    background: linear-gradient(135deg, #b83232, #e85f5f);
}

.dp-upload-card {
    position: relative;
}

    .dp-upload-card.is-validating {
        opacity: 0.78;
    }

    .dp-upload-card.is-validated {
        border-color: rgba(12, 159, 117, 0.45);
        background: rgba(12, 159, 117, 0.08);
    }

    .dp-upload-card.is-review {
        border-color: rgba(200, 129, 11, 0.45);
        background: rgba(200, 129, 11, 0.08);
    }

    .dp-upload-card.is-rejected {
        border-color: rgba(184, 50, 50, 0.45);
        background: rgba(184, 50, 50, 0.08);
    }

.dp-upload-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(13, 104, 121, 0.1);
    color: #0d6879;
    font-size: 12px;
    font-weight: 700;
}

@keyframes aiDocSpin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 575px) {
    .ai-doc-modal-box {
        padding: 30px 20px 24px;
        border-radius: 20px;
    }

    .ai-doc-modal h3 {
        font-size: 21px;
    }
}

.policy-mobile-toggle,
.policy-mobile-backdrop {
    display: none !important;
}

.page-single-sidebar.policy-mobile-sidebar {
    transform: none !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

@media (max-width: 991px) {
    .policy-mobile-toggle {
        display: inline-flex !important;
    }

    .policy-mobile-backdrop {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body.policy-menu-open .policy-mobile-backdrop {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .page-single-sidebar.policy-mobile-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: min(340px, 88vw) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translate3d(calc(-100% - 32px), 0, 0) !important;
        transition: transform 0.3s ease, visibility 0.3s ease !important;
    }

        .page-single-sidebar.policy-mobile-sidebar.policy-sidebar-open,
        body.policy-menu-open .page-single-sidebar.policy-mobile-sidebar {
            visibility: visible !important;
            pointer-events: auto !important;
            transform: translate3d(0, 0, 0) !important;
        }

    html[dir="rtl"] .page-single-sidebar.policy-mobile-sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translate3d(calc(100% + 32px), 0, 0) !important;
        box-shadow: -14px 0 35px rgba(13, 64, 84, 0.18) !important;
    }

        html[dir="rtl"] .page-single-sidebar.policy-mobile-sidebar.policy-sidebar-open,
        html[dir="rtl"] body.policy-menu-open .page-single-sidebar.policy-mobile-sidebar {
            transform: translate3d(0, 0, 0) !important;
        }
}










.services-section {
    max-width: 100%;
    margin: 0 auto;
    padding: 40px 0px;
    background: linear-gradient(0deg,rgb(255, 255, 255) 0%, rgba(159, 206, 207, 0.2) 50%, rgb(255, 255, 255) 100%);
}

.section-title {
    text-align:;
    font-size: 32px;
    font-weight: 700;
    color: #1a1a2e;
    margin-bottom: 8px;
}

.section-subtitle {
    text-align: center;
    color: #666;
    font-size: 15px;
    margin-bottom: 36px;
}

/* Tabs */
.tabs-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

input[type="radio"] {
    display: none;
}

.tab-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 11px;
    cursor: pointer;
    font-size: 18px;
    font-weight: 500;
    background: #fff;
    border: 1px solid #15999b4f;
    color: #114c5c;
    transition: all 0.2s ease;
    background-color: #fff;
}

button.tab-label {
    font: inherit;
    appearance: none;
}

.tab-label:hover {
    border-color: #15999b;
    color: #15999b;
}

.tab-label svg {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* Active tab styles */
#tab-all:checked ~ .tabs-container label[for="tab-all"],
#tab-housing:checked ~ .tabs-container label[for="tab-housing"],
#tab-health:checked ~ .tabs-container label[for="tab-health"],
#tab-education:checked ~ .tabs-container label[for="tab-education"],
#tab-executive:checked ~ .tabs-container label[for="tab-executive"] {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(25, 167, 199, 0.25);
    background: linear-gradient(135deg, #0d6477, #18a7b8);
    border: 0;
}

.tabs-container .tab-label.active {
    color: #fff;
    border-color: transparent;
    box-shadow: 0 14px 28px rgba(25, 167, 199, 0.25);
    background: linear-gradient(135deg, #0d6477, #18a7b8);
    border: 0;
}

/* Content panels */
.tab-content {
    display: none;
}

#tab-all:checked ~ .content-area .content-all,
#tab-housing:checked ~ .content-area .content-housing,
#tab-health:checked ~ .content-area .content-health,
#tab-education:checked ~ .content-area .content-education,
#tab-executive:checked ~ .content-area .content-executive {
    display: block;
}

/* Category header */
.category-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    margin-top: 32px;
    padding-bottom: 12px;
}

    .category-header:first-child {
        margin-top: 0;
    }

.category-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #115563, #159295);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

    .category-icon svg {
        width: 22px;
        height: 22px;
        fill: #fff;
    }

.category-title {
    font-size: 24px;
    font-weight: 500;
    color: #114c5c;
}

/* Service cards */
.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
    margin-bottom: 16px;
}

.service-card {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e8e8e8;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

    .service-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(0,0,0,0.08);
        border-color: #0d7c5f;
    }

    .service-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        background: 0;
        border-radius: 4px 0 0 4px;
    }

.service-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.service-icon {
    width: 58px;
    height: 36px;
    background: rgba(13, 124, 95, 0.1);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 70px;
    height: 70px;
    border-radius: 999px;
    background: #15999b0d;
    border: 2px dashed rgba(21, 153, 155, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.35s ease;
    padding: 12px;
}

    .service-icon svg {
        width: 38px;
        height: 38px;
        fill: #15999b;
    }

.service-name {
    font-size: 20px;
    font-weight: 500;
    color: #414143;
}

.requirements-title {
    font-size: 16px !important;
    font-weight: 600;
    text-transform: initial;
    letter-spacing: 0;
    color: #086c6e !important;
    margin-bottom: 10px !important;
}

.services-new-card ul {
    list-style: none;
    padding: 0;
}

    .services-new-card ul li {
        padding-inline-start: 20px;
        color: #6a7b75;
        font-size: 16.5px;
        line-height: 1.5;
        position: relative;
    }

        .services-new-card ul li::before {
            content: '';
            position: absolute;
            inset-inline-start: 0;
            top: 10px;
            width: 8px;
            height: 8px;
            background: #15999b;
            border-radius: 50%;
            opacity: 0.7;
        }

.txt-cnter {
    text-align: center;
}

.aid-app-page .ne-tab-step-form {
    max-width: inherit;
    margin: 0;
}

.ne-tsf-pass-flx {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

    .tabs-container {
        gap: 6px;
    }

    .tab-label {
        padding: 10px 16px;
        font-size: 13px;
    }

    .donate-swiper-card {
        min-height: 200px;
    }
}






.rm-bx {
    background-color: #e5f5f6;
    padding: 15px;
    border-radius: 15px;
    border: solid 1px #a1dfe2;
    margin-bottom: 25px;
    margin-top: 15px;
}



.page-header {
    text-align: center;
    margin-bottom: 32px;
}

    .page-header h1 {
        font-size: 24px;
        font-weight: 700;
        color: #1e293b;
        margin: 0 0 8px 0;
    }

    .page-header p {
        font-size: 14px;
        color: #64748b;
        margin: 0;
    }

.form-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #e2e8f0;
}

.section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.section-icon {
    width: 45px;
    height: 45px;
    background: #15999b14;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #15999b !important;
}

.section-header h2 {
    font-size: 18px;
    font-weight: 500;
    margin: 0;
    color: #114c5c;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .form-group.full-width {
        grid-column: 1 / -1;
    }

    .form-group label {
        font-size: 15px;
        font-weight: 500;
        color: #475569;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 10px 12px;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        font-size: 16px;
        color: #1e293b;
        background: #fff;
        font-family: inherit;
        transition: border-color 0.15s ease;
    }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: #0d9488;
            box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.1);
        }

    .form-group textarea {
        resize: vertical;
        min-height: 100px;
    }

/* RAHMA AI Assistant Box */
.rahma-box-1 {
    background: linear-gradient(135deg, #15999b14 0%, #15999b12 100%);
    border: 1.5px solid #15999b3d;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

    .rahma-box-1::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 120px;
        height: 120px;
        background: radial-gradient(circle, rgba(13, 148, 136, 0.08) 0%, transparent 70%);
        border-radius: 50%;
    }

    .rahma-box-1::after {
        content: '';
        position: absolute;
        bottom: -30px;
        left: -30px;
        width: 100px;
        height: 100px;
        background: radial-gradient(circle, rgba(14, 165, 233, 0.06) 0%, transparent 70%);
        border-radius: 50%;
    }

.rahma-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    position: relative;
    z-index: 1;
}

.rahma-icon {
    width: 50px;
    height: 50px;
    /*! background: linear-gradient(135deg, #0d9488, #0891b2); */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    /*! box-shadow: 0 4px 12px rgba(13, 148, 136, 0.25); */
}

.rahma-title {
    font-size: 19px;
    font-weight: 500;
    color: #0f766e;
    margin: 0;
}

.rahma-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #ccfbf1;
    color: #0d9488;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 20px;
    margin-left: auto;
}

.rahma-description {
    font-size: 17px;
    color: #475569;
    line-height: 1.4;
    margin: 0 0 18px 0;
    position: relative;
    z-index: 1;
}

.rahma-box-1 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #15999b, #0891b2);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 16px 22px;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
}

    .rahma-box-1:hover {
        transform: translateY(-1px);
        box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
    }

    .rahma-box-1 .sparkle {
        font-size: 16px;
    }

    .rahma-box-1:disabled {
        cursor: not-allowed;
        opacity: .65;
        transform: none;
        box-shadow: none;
    }

.aid-rahma-workspace {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    align-items: stretch;
}

    .aid-rahma-workspace.has-response {
    }

.aid-rahma-card {
    background: linear-gradient(135deg, #f4fbfb 0%, #eef8fa 100%);
    border: 1px solid #d7ecef;
    border-radius: 16px;
    padding: 24px;
    min-width: 0;
    box-shadow: 0 12px 32px rgba(17, 76, 92, .06);
}

    .aid-rahma-card .section-header {
        align-items: center;
        gap: 14px;
        margin-bottom: 16px;
    }

        .aid-rahma-card .section-header h2 {
            color: #114c5c;
            font-size: 20px;
            margin: 0;
        }

.aid-rahma-textbox {
    position: relative;
    margin-bottom: 18px;
}

    .aid-rahma-textbox textarea {
        min-height: 230px;
        padding: 18px 18px 34px;
        resize: vertical;
    }

    .aid-rahma-textbox span,
    .aid-rahma-draft-box > span {
        bottom: 12px;
        color: #64748b;
        font-size: 12px;
        font-weight: 600;
        position: absolute;
        right: 14px;
    }

.aid-rahma-suggestions {
    margin-bottom: 18px;
}

    .aid-rahma-suggestions strong {
        color: #0f766e;
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .aid-rahma-suggestions > div {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    .aid-rahma-suggestions button {
        background: #fff;
        border: 1px solid #dbecef;
        border-radius: 8px;
        color: #114c5c;
        cursor: pointer;
        font-family: inherit;
        font-weight: 600;
        padding: 10px 14px;
    }

        .aid-rahma-suggestions button:hover {
            border-color: #15999b;
            color: #087489;
        }

.aid-rahma-question-bubble {
    align-items: flex-start;
    background: #fff;
    border: 1px solid #d7ecef;
    border-radius: 14px 14px 14px 4px;
    box-shadow: 0 10px 24px rgba(17, 76, 92, .07);
    display: flex;
    gap: 12px;
    margin-bottom: 18px;
    padding: 14px;
}

    .aid-rahma-question-bubble .rahma-icon {
        flex: 0 0 42px;
        height: 42px;
        width: 42px;
    }

    .aid-rahma-question-bubble strong {
        color: #0f766e;
        display: block;
        font-size: 13px;
        margin-bottom: 5px;
    }

    .aid-rahma-question-bubble p {
        color: #263f47;
        font-size: 15px;
        line-height: 1.5;
        margin: 0;
    }

.aid-rahma-flow-icon {
    color: #15999b;
    display: grid;
    font-size: 24px;
    place-items: center;
}

.aid-rahma-output-card {
    display: flex;
    flex-direction: column;
}

.aid-rahma-draft-box {
    background: #fff;
    border: 1px solid #e3eef1;
    border-radius: 12px;
    margin: 12px 0 18px;
    min-height: 258px;
    padding: 20px;
    position: relative;
}

    .aid-rahma-draft-box h3 {
        align-items: center;
        border-bottom: 1px solid #eef2f4;
        color: #114c5c;
        display: flex;
        font-size: 18px;
        gap: 10px;
        margin: 0 0 16px;
        padding-bottom: 14px;
    }

.aid-rahma-draft-content {
    color: #7a8791;
    font-size: 15px;
    line-height: 1.7;
    max-height: 420px;
    overflow: auto;
    padding-bottom: 26px;
    white-space: pre-wrap;
}

    .aid-rahma-draft-content.has-content {
        color: #263f47;
    }

.aid-rahma-draft-editor {
    border: 1px solid #d8e7ea;
    border-radius: 10px;
    color: #263f47;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.7;
    min-height: 330px;
    padding: 14px;
    resize: vertical;
    width: 100%;
}

    .aid-rahma-draft-editor:focus {
        border-color: #15999b;
        box-shadow: 0 0 0 3px rgba(21,153,155,.12);
        outline: none;
    }

.aid-rahma-status {
    align-items: center;
    background: rgba(255,255,255,.72);
    border-radius: 12px;
    display: flex;
    gap: 14px;
    margin-top: auto;
    padding: 14px;
}

    .aid-rahma-status .rahma-icon {
        height: 42px;
        width: 42px;
    }

    .aid-rahma-status p {
        color: #52636b;
        font-size: 14px;
        line-height: 1.45;
        margin: 0;
    }

.aid-rahma-output-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}

.aid-rahma-use-btn,
.aid-rahma-edit-btn,
.aid-rahma-reset-btn {
    align-self: center;
    align-items: center;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    gap: 9px;
    justify-content: center;
    min-height: 52px;
    min-width: 180px;
    padding: 12px 20px;
    transition: .2s ease;
}

.aid-rahma-use-btn {
    background: linear-gradient(135deg, #15999b, #087489);
    color: #fff;
}

.aid-rahma-edit-btn {
    background: #fff;
    border: 1px solid #cfe5e9;
    color: #114c5c;
}

.aid-rahma-reset-btn {
    background: #fff5f5;
    border: 1px solid #ffd0d0;
    color: #b42318;
}

    .aid-rahma-use-btn:disabled,
    .aid-rahma-edit-btn:disabled,
    .aid-rahma-reset-btn:disabled {
        background: #d6e0e3;
        border-color: transparent;
        color: #9aa8ad;
        cursor: not-allowed;
    }

    .aid-rahma-use-btn:not(:disabled):hover,
    .aid-rahma-edit-btn:not(:disabled):hover,
    .aid-rahma-reset-btn:not(:disabled):hover {
        box-shadow: 0 14px 28px rgba(8,116,137,.2);
        transform: translateY(-2px);
    }

.aid-app-message.is-error {
    background: #fff1f1;
    border: 1px solid #ffd0d0;
    color: #b42318;
}

@media (max-width: 1199px) {
    .aid-rahma-workspace,
    .aid-rahma-workspace.has-response {
        grid-template-columns: 1fr;
    }

    .aid-rahma-flow-icon {
        transform: rotate(90deg);
    }
}

@media (max-width: 575px) {
    .aid-rahma-card {
        padding: 18px;
    }

        .aid-rahma-card .rahma-header {
            align-items: flex-start;
            flex-wrap: wrap;
        }

        .aid-rahma-card .rahma-badge {
            margin-left: 0;
        }
}

/* Assistance Details Section */
.assistance-section {
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

@media (prefers-reduced-motion: no-preference) {
    .rahma-box-1 {
        animation: fadeInUp 0.5s ease-out both;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

        to {
            opacity: 1;
            transform: none;
        }
    }

    .rahma-box-1 {
        animation: pulse 2s ease-in-out infinite;
        animation-delay: 1s;
    }

    @keyframes pulse {
        0%, 100% {
            box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
        }

        50% {
            box-shadow: 0 4px 20px rgba(13, 148, 136, 0.5);
        }
    }
}





.floating-action {
    position: fixed;
    right: 25px;
    bottom: 182px;
    transform: translateY(-50%);
    z-index: 9;
}

.robot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #1297A3;
    border-radius: 50%;
    text-decoration: none;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,.15);
    width: 60px;
    height: 60px;
    padding: 3px;
}

    .robot-btn i {
        color: #fff;
        font-size: 27px;
    }

    .robot-btn:hover {
        transform: scale(1.08);
    }

.chat-header h5 {
    color: #fff;
}





.rahma-btn {
    position: fixed;
    right: 20px;
    bottom: 30px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #18a3a7;
    color: #fff;
    font-size: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,.2);
    z-index: 9999;
}

.rahma-chat {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 350px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0,0,0,.15);
    overflow: hidden;
    display: none;
    z-index: 9999999;
}

.chat-body h4 {
    font-size: 18px;
    margin-bottom: 10px
}

.chat-body p {
    font-size: 16px;
    margin-bottom: 5px;
    line-height: 1.2;
}

.rahma-chat.show {
    display: block;
}

.chat-header {
    background: #18a3a7;
    color: #fff;
    padding: 15px 20px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
}

.robot-btn:hover {
    cursor: pointer;
}

.chat-body {
    padding: 20px;
    line-height: 1.2;
}

    .chat-body ul {
        padding-left: 18px;
    }

    .chat-body li {
        font-size: 15px;
    }

.tagline {
    margin-top: 9px;
    font-weight: 700;
    color: #18a3a7;
    font-size: 16px;
    margin-bottom: 15px;
}

.chat-header span:hover {
    cursor: pointer;
}

.chat-header img {
    width: 35px;
}

.rahma-chat-body {
    padding: 0;
    background: #f6fbfb;
}

.rahma-intro {
    padding: 18px 18px 12px;
    border-bottom: 1px solid rgba(24, 163, 167, .12);
}

    .rahma-intro h4 {
        color: #122b2d;
        font-weight: 700;
    }

    .rahma-intro p {
        color: #617375;
        margin-bottom: 0;
    }

.rahma-messages {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 320px;
    overflow-y: auto;
    padding: 16px 18px;
}

.rahma-message {
    max-width: 88%;
    border-radius: 14px;
    padding: 10px 12px;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

    .rahma-message.bot {
        align-self: flex-start;
        background: #fff;
        color: #20383a;
        border: 1px solid rgba(24, 163, 167, .14);
        box-shadow: 0 6px 18px rgba(18, 43, 45, .06);
    }

    .rahma-message.user {
        align-self: flex-end;
        background: #18a3a7;
        color: #fff;
    }

    .rahma-message.error {
        border-color: rgba(194, 67, 67, .22);
        color: #a63f3f;
        background: #fff8f8;
    }

    .rahma-message.typing {
        color: #6b7f81;
        font-style: italic;
    }

.rahma-chat-form {
    display: flex;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid rgba(24, 163, 167, .12);
    background: #fff;
}

    .rahma-chat-form input {
        flex: 1;
        min-width: 0;
        height: 42px;
        border: 1px solid rgba(24, 163, 167, .22);
        border-radius: 10px;
        padding: 0 12px;
        font-size: 14px;
        outline: none;
    }

        .rahma-chat-form input:focus {
            border-color: #18a3a7;
            box-shadow: 0 0 0 3px rgba(24, 163, 167, .12);
        }

    .rahma-chat-form button {
        height: 42px;
        border: 0;
        border-radius: 10px;
        padding: 0 16px;
        background: #18a3a7;
        color: #fff;
        font-weight: 700;
    }

        .rahma-chat-form button:disabled {
            cursor: not-allowed;
            opacity: .55;
        }

.aid-eligibility-card .aid-app-grid label {
    border: 1px solid #159497;
    border-radius: 8px;
}

/* Aid Application mobile layout */
@media (max-width: 991px) {
    .aid-app-page {
        padding: 30px 0;
    }

        .aid-app-page .container {
            max-width: 100%;
            padding-left: 14px;
            padding-right: 14px;
        }

    .ne-tsf-pass-flx {
        display: block !important;
    }

    .aid-app-hero {
        max-width: none;
        margin-bottom: 16px;
        text-align: center;
    }

        .aid-app-hero h1 {
            font-size: 30px;
            line-height: 1.2;
        }

        .aid-app-hero p {
            font-size: 15px;
            line-height: 19px;
        }

    .aid-app-page .ne-tab-step-form {
        width: 100%;
    }

    .ne-tab-step-form .ne-tsf-pass {
        width: 100%;
        justify-content: flex-start;
    }

    .aid-app-shell {
        display: block;
    }

    .aid-app-steps {
        position: static;
        display: flex;
        gap: 10px;
        overflow-x: auto;
        padding: 12px;
        margin-bottom: 16px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .aid-app-step {
        min-width: 215px;
        grid-template-columns: 34px 1fr;
        padding: 12px;
        scroll-snap-align: start;
    }

        .aid-app-step span {
            width: 28px;
            height: 28px;
        }

        .aid-app-step strong {
            font-size: 15px;
            line-height: 1.25;
        }

        .aid-app-step small {
            font-size: 11px;
        }

    .aid-app-steps .ne-tab-step-form {
        display: none;
    }

    .aid-app-form {
        padding: 18px;
        border-radius: 14px;
    }

    .aid-app-grid,
    .aid-upload-grid,
    .aid-review-grid,
    .aid-dependent-fields .aid-app-grid {
        grid-template-columns: 1fr;
    }

    .aid-app-panel-head h2 {
        font-size: 18px;
    }

    .aid-app-panel-head p,
    .aid-app-grid label,
    .aid-upload-grid label,
    .aid-review-grid div {
        font-size: 15px;
    }

    .aid-eligibility-choice {
        grid-template-columns: 1fr;
    }

    .rahma-header {
        flex-wrap: wrap;
    }

    .rahma-badge {
        margin-left: 0;
    }

    .aid-ai-modal-card {
        width: min(100%, calc(100vw - 24px));
    }
}

@media (max-width: 575px) {
    .aid-app-page {
        padding: 22px 0;
    }

    .aid-app-hero h1 {
        font-size: 20px;
    }

    .ne-tab-step-form .ne-tsf-pass {
        padding: 12px;
        align-items: flex-start;
    }

        .ne-tab-step-form .ne-tsf-pass strong,
        .ne-tab-step-form .ne-tsf-pass span {
            font-size: 14px;
        }

    .aid-app-steps {
        margin-left: -14px;
        margin-right: -14px;
        border-radius: 0;
    }

    .aid-app-step {
        min-width: 188px;
    }

    .aid-app-form {
        padding: 14px;
    }

    .aid-app-section h3 {
        font-size: 17px;
        line-height: 1.3;
    }

    .aid-app-grid label,
    .aid-upload-grid label,
    .aid-review-grid div,
    .aid-terms-box,
    .aid-reference-card,
    .rahma-box {
        padding: 12px;
    }

    .aid-upload-top {
        align-items: flex-start;
        gap: 8px;
    }

    .aid-upload-badge {
        white-space: normal;
        text-align: center;
    }

    .aid-app-actions {
        flex-direction: column;
    }

        .aid-app-actions button,
        .aid-app-primary,
        .aid-app-secondary,
        .rahma-box-1 {
            width: 100%;
        }
}

html[dir="rtl"] .aid-app-hero {
    text-align: right;
}

html[dir="rtl"] .aid-app-step {
    text-align: right;
}

.section-title-center h2 {
    text-align: center !important;
}

.how-work-content .section-title-center h2 {
    text-align: left !important;
}

@media (max-width: 991px) {
    html[dir="rtl"] .aid-app-hero {
        text-align: center;
    }

    html[dir="rtl"] .aid-app-steps {
        direction: rtl;
    }


    .robot-btn {
        width: 47px;
        height: 47px;
    }


    .floating-action {
        right: 8px;
    }



    .chat-toggle {
        width: 47px;
        height: 47px;
    }

    .zakat-icon-box {
        width: 57px;
        height: 57px;
    }

    .aid-reference-card strong {
        font-size: 19px;
    }
}


@media (max-width: 640px) {
    .zakat-popup-head h2 {
        font-size: 21px;
    }
}

.post-entry div {
    padding-top: 10px;
    padding-bottom: 10px;
}

.content-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(336px, 1fr));
    gap: 14px;
    margin-top: 0px;
    margin-bottom: 0px;
    padding: 0px !important;
}

.content-gallery-inline {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(348px, 320px));
    margin: 5px 0 5px;
}

.content-gallery-item {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(17, 76, 92, 0.12);
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(17, 76, 92, 0.08);
}

.post-entry p .content-gallery-inline {
    margin: 18px 0;
}

.content-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.content-gallery-item:hover img {
    transform: scale(1.04);
}

.content-gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
}

.content-gallery-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 25, 31, 0.78);
    cursor: zoom-out;
}

.content-gallery-modal {
    position: relative;
    z-index: 1;
    max-width: min(1080px, 94vw);
    max-height: 88vh;
    border-radius: 14px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
}

    .content-gallery-modal img {
        display: block;
        max-width: 100%;
        max-height: calc(88vh - 20px);
        object-fit: contain;
        border-radius: 10px;
    }

.content-gallery-close {
    position: absolute;
    right: -14px;
    top: -14px;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 50%;
    background: #15999b;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.content-gallery-nav {
    position: absolute;
    top: 50%;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(21, 153, 155, 0.94);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: translateY(-50%);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.content-gallery-prev {
    left: -22px;
}

.content-gallery-next {
    right: -22px;
}

.content-gallery-nav:hover,
.content-gallery-close:hover {
    background: #087489;
}

@media (max-width: 575px) {
    .content-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .content-gallery-lightbox {
        padding: 14px;
    }

    .content-gallery-close {
        right: 6px;
        top: 6px;
    }

    .content-gallery-prev {
        left: 8px;
    }

    .content-gallery-next {
        right: 8px;
    }
}

.mag-card .mag-btn {
    width: 100%;
    border: 0;
    text-align: center;
}

.mag-pdf-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mag-pdf-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(3, 25, 31, 0.78);
}

.mag-pdf-dialog {
    position: relative;
    z-index: 1;
    width: min(1100px, 96vw);
    height: min(860px, 92vh);
    background: #fff;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
}

.mag-pdf-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 18px;
    background: #f6fbfb;
    border-bottom: 1px solid rgba(17, 76, 92, 0.1);
}

    .mag-pdf-head h3 {
        margin: 0;
        color: #0b425a;
        font-size: 20px;
    }

    .mag-pdf-head p {
        margin: 4px 0 0;
        color: #5a6f7d;
    }

.mag-pdf-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

    .mag-pdf-actions a,
    .mag-pdf-actions button {
        border: 0;
        border-radius: 8px;
        background: #15999b;
        color: #fff;
        min-height: 40px;
        padding: 0 14px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        font-weight: 600;
    }

    .mag-pdf-actions button {
        width: 40px;
        padding: 0;
    }

.mag-pdf-dialog iframe {
    width: 100%;
    flex: 1;
    border: 0;
    background: #f5f5f5;
}

.project-detail-page {
    min-height: 100vh;
    background: radial-gradient(circle at 8% 18%, rgba(21, 153, 155, 0.12), transparent 26%), linear-gradient(180deg, #f7fbfb 0%, #f3faf9 100%);
    padding: 0 0 54px;
}

.project-detail-accent {
    height: 24px;
    background: linear-gradient(90deg, #0a6173, #0ba1a4);
    margin-bottom: 40px;
}

.project-detail-container {
    max-width: 1510px;
}

.project-detail-grid {
    display: grid;
    grid-template-columns: minmax(420px, 0.96fr) minmax(520px, 1fr);
    gap: 22px;
    align-items: stretch;
}

.project-visual-card,
.project-donation-card {
    position: relative;
    background: rgba(255, 255, 255, 0.88);
    border: 1px solid rgba(13, 100, 119, 0.14);
    border-radius: 22px;
    box-shadow: 0 24px 70px rgba(18, 72, 82, 0.12);
    overflow: hidden;
}

.project-visual-card {
    min-height: 640px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 58px;
}

    .project-visual-card img {
        width: min(78%, 560px);
        max-height: 430px;
        object-fit: contain;
        position: relative;
        z-index: 2;
        filter: drop-shadow(0 30px 40px rgba(7, 68, 79, 0.14));
    }

.project-dot-pattern {
    position: absolute;
    left: 36px;
    top: 42px;
    width: 94px;
    height: 94px;
    background-image: radial-gradient(circle, rgba(21, 153, 155, 0.28) 2.5px, transparent 3px);
    background-size: 18px 18px;
    z-index: 9;
}

.project-line-pattern {
    position: absolute;
    inset: 0;
}

.project-permit {
    position: absolute;
    left: 54px;
    bottom: 68px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 18px;
    color: #111;
}

.project-permit-mark {
    width: 76px;
    height: 76px;
    border-radius: 20px;
    background: linear-gradient(135deg, #15999b, #0c596b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    box-shadow: 0 16px 36px rgba(21, 153, 155, 0.24);
    transform: rotate(-10deg);
}

.project-permit span,
.project-permit strong,
.project-permit small {
    display: block;
    line-height: 1.05;
}

.project-permit span {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0;
}

.project-permit strong {
    font-size: 42px;
    letter-spacing: 8px;
    margin-top: 3px;
}

.project-permit small {
    font-size: 17px;
    margin-top: 10px;
}

.project-share-main {
    position: absolute;
    right: 22px;
    bottom: 24px;
    z-index: 4;
    width: 54px;
    height: 54px;
    border: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #15999b, #0a6173);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 16px 30px rgba(10, 97, 115, 0.24);
}

.project-share-list {
    position: absolute;
    right: 24px;
    bottom: 88px;
    z-index: 4;
    display: none;
    flex-direction: column;
    gap: 8px;
}

    .project-share-list.active {
        display: flex;
    }

    .project-share-list a {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #0a6173;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
    }

.project-donation-card {
    padding: 34px 36px 28px;
}

.project-title-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 18px;
    align-items: flex-start;
}

.project-title-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, #0a6173, #15999b);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 0 0 12px #fff, 0 14px 30px rgba(10, 97, 115, 0.18);
}

.project-title-row h1 {
    margin: 0 0 14px;
    color: #06465b;
    font-size: 29px;
    font-weight: 800;
}

.project-title-row p {
    margin: 0;
    color: #333947;
    font-size: 15.8px;
    line-height: 1.72;
}

.project-divider {
    height: 1px;
    background: rgba(10, 97, 115, 0.18);
    margin: 24px 0 16px;
}

.project-amount-label {
    display: block;
    color: #06465b;
    font-weight: 800;
    margin-bottom: 10px;
}

.project-donate-row {
    display: grid;
    grid-template-columns: 1fr 212px;
    gap: 22px;
    align-items: stretch;
}

.quk-dnt .quick-donate-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

    .quk-dnt .quick-donate-row button {
        padding: 10px;
    }

.quk-dnt .quick-donation-alert {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    padding: 12px 14px;
    border: 1px solid rgba(213, 92, 92, 0.24);
    border-left: 4px solid #d55c5c;
    border-radius: 9px;
    background: #fff6f3;
    color: #8d2f2a;
    font-size: 14px;
    font-weight: 700;
}

    .quk-dnt .quick-donation-alert i {
        color: #d55c5c;
        font-size: 18px;
    }

.quk-dnt .quick-other-ways {
    margin-top: 15px;
}

    .quk-dnt .quick-other-ways .project-sms-grid {
        grid-template-columns: repeat(3, 1fr);
    }

.project-donate-row input {
    min-height: 58px;
    border: 1px solid rgba(21, 153, 155, 0.45);
    border-radius: 9px;
    padding: 0 18px;
    color: #24303d;
    font-size: 20px;
    outline: 0;
    background: #fff;
}

.project-donate-row button {
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #20aa91, #075b72);
    color: #fff;
    font-size: 21px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    box-shadow: 0 16px 34px rgba(10, 97, 115, 0.22);
}

    .project-donate-row button span {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        background: #fff;
        color: #15999b;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

.project-secure-note {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 9px 0 18px;
    color: #475867;
    font-size: 14px;
}

    .project-secure-note i {
        color: #15999b;
    }

.project-sms-box {
    border: 1px solid rgba(21, 153, 155, 0.28);
    border-radius: 14px;
    padding: 17px 16px 22px;
    background: rgba(255, 255, 255, 0.62);
}

    .project-sms-box h2 {
        margin: 0 0 14px;
        color: #06465b;
        font-size: 17px;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 10px;
    }

        .project-sms-box h2 i {
            color: #15999b;
        }

.project-provider-row {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
}

    .project-provider-row button {
        width: 188px;
        height: 52px;
        border: 1px solid rgba(10, 97, 115, 0.12);
        border-radius: 8px;
        background: #fff;
        box-shadow: 0 8px 18px rgba(10, 97, 115, 0.07);
    }

    .project-provider-row img {
        max-height: 36px;
        max-width: 110px;
        object-fit: contain;
    }

.project-sms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px 28px;
}

    .project-sms-grid button {
        min-height: 60px;
        border: 1px solid rgba(21, 153, 155, 0.26);
        border-radius: 8px;
        background: #fff;
        color: #06465b;
        display: grid;
        grid-template-columns: 36px 1fr;
        grid-template-rows: 1fr 1fr;
        column-gap: 10px;
        align-items: center;
        text-align: left;
        padding: 8px 14px;
    }

        .project-sms-grid button span {
            grid-row: 1 / span 2;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: #fff;
            color: rgb(30, 80, 40);
            border: 1px solid rgba(30, 80, 40, 0.18);
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project-sms-grid button strong {
            font-size: 16px;
            line-height: 1;
        }

        .project-sms-grid button small {
            color: #333947;
            font-size: 13px;
        }

.project-trust-strip {
    width: min(980px, calc(100% - 160px));
    margin: 16px auto 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.82);
    border: 1px solid rgba(10, 97, 115, 0.1);
    border-radius: 14px;
    box-shadow: 0 16px 42px rgba(18, 72, 82, 0.1);
    overflow: hidden;
}

.project-trust-item {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 12px;
    align-items: center;
    padding: 16px 22px;
    color: #06465b;
}

    .project-trust-item:not(:last-child) {
        border-right: 1px solid rgba(10, 97, 115, 0.1);
    }

    .project-trust-item span {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
        color: #15999b;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 25px;
        box-shadow: 0 8px 22px rgba(10, 97, 115, 0.12);
    }

    .project-trust-item strong {
        display: block;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .project-trust-item p {
        margin: 0;
        color: #333947;
        font-size: 13px;
        line-height: 1.45;
    }

@media (max-width: 575px) {
    .mag-pdf-modal {
        padding: 10px;
    }

    .mag-pdf-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .mag-pdf-actions {
        width: 100%;
    }

        .mag-pdf-actions a {
            flex: 1;
        }
}

@media (max-width: 1199px) {
    .project-detail-grid {
        grid-template-columns: 1fr;
    }

    .project-visual-card {
        min-height: 520px;
    }

    .project-trust-strip {
        width: 100%;
        grid-template-columns: repeat(2, 1fr);
    }

    .project-trust-item:nth-child(2) {
        border-right: 0;
    }
}

@media (max-width: 767px) {
    .project-detail-accent {
        margin-bottom: 20px;
    }

    .project-visual-card {
        min-height: 420px;
        padding: 32px;
    }

        .project-visual-card img {
            width: 82%;
        }

    .project-permit {
        left: 26px;
        bottom: 34px;
        transform: scale(0.78);
        transform-origin: left bottom;
    }

    .project-donation-card {
        padding: 24px 18px;
    }

    .project-title-row {
        grid-template-columns: 1fr;
    }

    .project-donate-row {
        grid-template-columns: 1fr;
        gap: 12px;
    }

        .project-donate-row button {
            min-height: 58px;
        }

    .project-provider-row {
        flex-wrap: wrap;
    }

        .project-provider-row button {
            flex: 1 1 130px;
        }

    .project-sms-grid,
    .project-trust-strip {
        grid-template-columns: 1fr;
    }

    .project-trust-item,
    .project-trust-item:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid rgba(10, 97, 115, 0.1);
    }
}

.pickup-map-picker {
    margin: 18px 0 8px;
    border: 1px solid rgba(21, 153, 155, 0.18);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(10, 97, 115, 0.08);
}

.pickup-map-search {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 0;
    border-bottom: 1px solid rgba(21, 153, 155, 0.16);
    background: #f7fbfc;
    color: #0d6679;
}

    .pickup-map-search input {
        width: 100%;
        border: 0;
        outline: 0;
        background: transparent;
        color: #24303d;
        font-size: 15px;
    }

        .pickup-map-search input::placeholder {
            color: #7e8b96;
        }

.pickup-map-canvas {
    min-height: 300px;
    position: relative;
    background: #eaf5f7;
}

.pickup-map-placeholder {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 8px;
    padding: 24px;
    text-align: center;
    color: #0d6679;
    font-weight: 600;
}

    .pickup-map-placeholder i {
        font-size: 30px;
    }

.pickup-map-meta {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    padding: 11px 14px;
    border-top: 1px solid rgba(21, 153, 155, 0.16);
    background: #fff;
    color: #06465b;
    font-size: 13px;
}

    .pickup-map-meta span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-weight: 700;
    }

    .pickup-map-meta strong {
        color: #15999b;
        font-weight: 700;
    }

@media (max-width: 640px) {
    .pickup-map-canvas {
        min-height: 240px;
    }

    .pickup-map-meta {
        align-items: flex-start;
        flex-direction: column;
    }
}

.in-kind-alert {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: center;
    margin: 0 0 22px;
    padding: 14px 16px;
    border: 1px solid rgba(219, 128, 30, 0.26);
    border-left: 4px solid #db801e;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(255, 248, 239, 0.98), rgba(255, 255, 255, 0.98));
    box-shadow: 0 12px 28px rgba(96, 63, 21, 0.08);
    color: #57350f;
}

.in-kind-alert-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(219, 128, 30, 0.12);
    color: #db801e;
    font-size: 18px;
}

.in-kind-alert strong,
.in-kind-alert small {
    display: block;
}

.in-kind-alert strong {
    margin-bottom: 3px;
    color: #06465b;
    font-size: 15px;
    font-weight: 800;
}

.in-kind-alert small {
    color: #57350f;
    font-size: 14px;
    line-height: 1.45;
}

@media (max-width: 575px) {
    .in-kind-alert {
        grid-template-columns: 36px 1fr;
        padding: 12px;
    }

    .in-kind-alert-icon {
        width: 36px;
        height: 36px;
    }
}

/* Quick Donation final mobile layout overrides */
@media (max-width: 991px) {
    .quk-dnt {
        padding: 18px 0 28px;
    }

        .quk-dnt .container {
            max-width: 100%;
            padding-left: 12px;
            padding-right: 12px;
        }

        .quk-dnt .apply-info__wrap,
        .quk-dnt .apply-info__card {
            width: 100%;
        }

        .quk-dnt .apply-info__card {
            display: grid;
            grid-template-columns: 1fr;
            gap: 0;
            border-radius: 16px;
            overflow: hidden;
        }

        .quk-dnt .apply-info__left,
        .quk-dnt .apply-info__right {
            width: 100%;
            min-width: 0;
        }

        .quk-dnt .apply-info__left {
            min-height: 240px;
            padding: 22px 18px;
        }

        .quk-dnt .apply-info__hero h1 {
            font-size: 24px;
            line-height: 1.15;
        }

        .quk-dnt .apply-info__hero p {
            font-size: 15px;
            line-height: 1.45;
            margin-bottom: 0;
        }

        .quk-dnt .apply-info__right {
            padding: 18px 14px 20px;
        }

        .quk-dnt .top-right {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 14px;
        }

        .quk-dnt .category-grid {
            grid-template-columns: 1fr !important;
            gap: 9px;
        }

        .quk-dnt .amount-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 9px;
            padding: 8px 0;
        }

        .quk-dnt .card-option {
            min-width: 0;
            min-height: 58px;
            padding: 10px;
            align-items: center;
        }

        .quk-dnt .amount-card {
            min-height: 66px;
        }

        .quk-dnt .custom-input {
            width: 100%;
            min-width: 0;
            margin-bottom: 0;
            padding: 8px 10px;
            text-align: center;
        }

    .quk-stlbn {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .quk-dnt .select-box {
        margin-bottom: 0;
    }

    .quk-dnt .secure-note {
        align-items: flex-start;
        padding: 12px;
        font-size: 14px;
        line-height: 1.35;
    }

    .quk-dnt .quick-donate-row {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }

        .quk-dnt .quick-donate-row button {
            width: 100%;
            min-height: 54px;
            font-size: 17px;
        }

    .quk-dnt .quick-other-ways .project-sms-grid,
    .quk-dnt .project-sms-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 10px;
    }

    .quk-dnt .project-provider-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

        .quk-dnt .project-provider-row button {
            width: 100%;
        }
}

@media (max-width: 420px) {
    .quk-dnt .amount-grid,
    .quk-dnt .quick-other-ways .project-sms-grid,
    .quk-dnt .project-sms-grid,
    .quk-dnt .project-provider-row {
        grid-template-columns: 1fr !important;
    }

    .quk-dnt .apply-info__left {
        min-height: 210px;
    }
}
/* Submitted aid requests list and filters */
.aid-requests-list-section {
    background: #f8fbfa;
    border: 1px solid #e2ece8;
}

.aid-requests-list-title {
    align-items: flex-start;
}

    .aid-requests-list-title p {
        color: #66736e;
        font-size: 14px;
        line-height: 1.5;
        margin: 4px 0 0;
    }

.aid-request-filters {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) repeat(3, minmax(145px, 1fr));
    gap: 14px;
    margin-top: 22px;
}

    .aid-request-filters > label {
        display: flex;
        flex-direction: column;
        gap: 7px;
        margin: 0;
    }

        .aid-request-filters > label > span:not(.sr-only) {
            color: #46534e;
            font-size: 13px;
            font-weight: 700;
        }

    .aid-request-filters input, .aid-request-filters select {
        width: 100%;
        min-height: 47px;
        padding: 10px 13px;
        background: #fff;
        border: 1px solid #d7e2de;
        border-radius: 10px;
        color: #25332e;
        font: inherit;
        outline: none;
    }

        .aid-request-filters input:focus, .aid-request-filters select:focus {
            border-color: #078f63;
            box-shadow: 0 0 0 3px rgba(7, 143, 99, 0.12);
        }

.aid-request-search {
    position: relative;
    align-self: end;
}

    .aid-request-search i {
        position: absolute;
        inset-inline-start: 15px;
        bottom: 16px;
        color: #6f7c77;
    }

    .aid-request-search input {
        padding-inline-start: 42px;
    }

.aid-request-results-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0 12px;
}

    .aid-request-results-bar p {
        color: #66736e;
        font-size: 14px;
        margin: 0;
    }

    .aid-request-results-bar button {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 7px 10px;
        background: transparent;
        border: 0;
        color: #078f63;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
    }

.aid-request-list {
    display: grid;
    gap: 12px;
}

.aid-request-list-card {
    padding: 18px;
    background: #fff;
    border: 1px solid #e0e9e6;
    border-radius: 13px;
    box-shadow: 0 5px 18px rgba(28, 67, 53, 0.05);
    transition: border-color 0.2s ease, transform 0.2s ease;
}

    .aid-request-list-card:hover {
        border-color: #9bcdbb;
        transform: translateY(-1px);
    }

.aid-request-list-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    padding-bottom: 14px;
    border-bottom: 1px solid #edf2f0;
}

.aid-request-number span, .aid-request-list-details span {
    display: block;
    color: #75817d;
    font-size: 12px;
    line-height: 1.35;
}

.aid-request-number h5 {
    margin: 3px 0 0;
    color: #1f302a;
    font-size: 17px;
    overflow-wrap: anywhere;
}

.aid-request-status {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 11px;
    border-radius: 999px;
    background: #e9f1ff;
    color: #326cb4;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}

    .aid-request-status.review, .aid-request-status.progress {
        background: #fff4dc;
        color: #9a6500;
    }

    .aid-request-status.audit {
        background: #f1f4f7;
        color: #5d6e80;
        border: 1px solid #d9e0e7;
    }

    .aid-request-status.social {
        background: #edf4ff;
        color: #2862b6;
        border: 1px solid #c9dcff;
    }

    .aid-request-status.approved, .aid-request-status.completed {
        background: #e3f7ed;
        color: #087a51;
    }

    .aid-request-status.rejected {
        background: #fde9e9;
        color: #b33434;
    }

.aid-request-list-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding-top: 15px;
}

    .aid-request-list-details > div {
        position: relative;
        min-width: 0;
        padding-inline-start: 27px;
    }

    .aid-request-list-details i {
        position: absolute;
        inset-inline-start: 0;
        top: 3px;
        color: #078f63;
    }

    .aid-request-list-details strong {
        display: block;
        margin-top: 4px;
        color: #273630;
        font-size: 14px;
        font-weight: 700;
        overflow-wrap: anywhere;
    }

.aid-request-empty {
    display: flex;
    min-height: 190px;
    padding: 30px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border: 1px dashed #cbdad5;
    border-radius: 13px;
}

    .aid-request-empty > i {
        margin-bottom: 12px;
        color: #86a79b;
        font-size: 30px;
    }

    .aid-request-empty h5 {
        margin: 0;
        color: #33453e;
        font-size: 16px;
    }

    .aid-request-empty p {
        margin: 6px 0 0;
        color: #77827e;
        font-size: 13px;
    }

.aid-request-list-error {
    margin-top: 12px;
}

.aid-request-list-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid #edf2f0;
}

.aid-request-details-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 9px;
    background: #078f63;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s ease, transform .2s ease;
}

    .aid-request-details-link:hover {
        background: #066f50;
        color: #fff;
        transform: translateY(-1px);
    }

@media (max-width: 1100px) {
    .aid-request-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 680px) {
    .aid-request-filters {
        grid-template-columns: 1fr;
    }

    .aid-request-search {
        align-self: stretch;
    }

    .aid-request-results-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .aid-request-list-details {
        grid-template-columns: 1fr;
        gap: 13px;
    }

    .aid-request-list-card {
        padding: 15px;
    }
}