@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Julius+Sans+One&family=Kaushan+Script&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

:root {
    --primary-color: #76449a;
    --primary-dark-color: #331751;

    --container-padding: 8svw;
    --main-font: "Rubik", sans-serif;
    --heading-font: "Rubik", sans-serif;
    --heading-font-2: "Kaushan Script", cursive;
}

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

a,
span {
    display: inline-block;
}

a,
button {
    text-decoration: none;
    outline: none;
    border: none;
    background: transparent;
    cursor: pointer;
    color: currentColor;
}

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

html {
    scroll-behavior: smooth;
    font-size: 18px;

    @media (width <= 1550px) {
        font-size: 16px;
    }
}
.footer {
    background: #1c1c1c;
    color: #ccc;
    font-family: "Rubik", sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    padding: 50px 8%;
}

.footer-col h4 {
    font-size: 16px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: 2px solid #dfcaa4;
    display: inline-block;
    padding-bottom: 5px;
}

.footer-col p {
    line-height: 1.6;
}

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

.footer-col ul li {
    margin: 10px 0;
}

.footer-col a {
    color: #ccc;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-col a:hover {
    color: #76449a;
}

/* Social icons */
.footer-col.social ul {
    display: flex;
    justify-content:center;
    gap: 12px;
    padding: 0;
}

.footer-col.social a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #dfcaa4;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: all 0.3s ease;
    font-size: 16px;
}

.footer-col.social a:hover {
    background: #76449a;
    color: #fff;
}

/* Footer bottom */
.footer-bottom {
    text-align: center;
    padding: 15px 0;
    border-top: 1px solid #333;
    font-size: 14px;
    color:#fff;
}

/* ✅ Responsive */
@media (max-width: 992px) {
    .footer-container {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 40px 5%;
    }
}

@media (max-width: 600px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-col.social ul {
        justify-content: center;
    }

    .footer-col h4 {
        border: none;
    }
}


body {
    width: 100svw;
    overflow-x: hidden;
    font-family: "Rubik", sans-serif;
    background-color: #fefefe;
}

.svgify {
    translate: 0 3px;
}

.main-header {
    position: fixed;
    top: 0;
    inset-inline: 0;
    z-index: 1000;

    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr) minmax(0, 1fr);
    align-items: center;
    gap: 2rem;
    min-height: 10svh;
    padding-inline: var(--container-padding);
    color: #fff;
    transition: 0.3s all ease-in-out;

    @media (width <= 1000px) {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    &.scrolled {
        background: var(--primary-dark-color);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    > div,
    > nav {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .logo-wrapper {
        justify-content: flex-start;
        img {
            width: 100px;
        }
    }

    .nav-links {
        display: flex;
        justify-content: center;
        align-items: center;
        white-space: nowrap;
        height: 100%;
        width: 100%;

        li {
            height: 100%;
        }

        a {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            padding: 1rem 1.5rem;

            &.active:after {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 5px;
                background-color: #fff;
                border-radius: 0 0 20px 20px;
            }
        }

        @media (width <= 1000px) {
            position: fixed;
            inset-inline-end: 0;
            top: 0;
            z-index: 10;
            translate: 100% 0;
            height: 100svh;
            overflow-y: auto;
            width: 50svw;
            background-color: #fff;

            flex-direction: column;
            justify-content: flex-start;
            padding-block: 5svh;
            color: #000;
            transition: 0.3s all ease-in-out;

            &.show-nav {
                translate: 0 0;
            }

            li {
                height: auto;
                width: 100%;

                &:not(:last-child) {
                    border-bottom: 1px solid #e0e0e0;
                }
            }

            a {
                height: auto;
                padding: 0.5rem;
                width: 100%;

                &.active:after {
                    content: none;
                }
            }
        }
    }

    .side-overlay {
        display: none;
    }

    @media (width <= 1000px) {
        &:has(.show-nav) .side-overlay {
            display: block;
            position: fixed;
            inset: 0;
            background-color: #7f3ab150;
        }
    }

    .user-profile {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        .user {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;

            @media (width <= 500px) {
                gap: 0rem;
            }
        }

        .user-avatar {
            width: 50px;
            aspect-ratio: 1/1;
            border-radius: 5px;
            background-color: var(--primary-color);
            padding: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .user-name {
            font-weight: 700;
            white-space: nowrap;
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;

            @media (width <= 500px) {
                display: none;
            }
        }

        .user-title {
            font-weight: 200;
            font-size: 0.8rem;
            white-space: nowrap;
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;

            @media (width <= 500px) {
                display: none;
            }
        }

        img {
            width: 100%;
            object-fit: contain;
        }

        .actions-list {
            pointer-events: none;
            position: absolute;
            top: 80%;
            inset-inline-end: 0;
            opacity: 0;
            white-space: nowrap;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            color: #000;
            display: flex;
            flex-direction: column;
            width: fit-content;
            min-width: 100%;
            border-radius: 5px;
            overflow: hidden;
            transition: 0.3s all ease-in-out;

            @media (width <= 500px) {
                width: auto;
            }

            a {
                padding: 0.7rem 1rem;
                border-bottom: 2px solid #e0e0e0;
                width: 100%;
                transition: 0.2s all ease-in-out;

                &:hover {
                    background-color: var(--primary-color);
                    color: #fff;
                }
            }

            .svgify {
                margin-inline-end: 5px;
            }

            & li:last-child a {
                border-bottom: none;
            }
        }

        &:hover {
            .actions-list {
                pointer-events: all;
                top: 100%;
                opacity: 1;
            }
        }
    }

    .nav-toggle {
        font-size: 2rem;
        display: none;
        margin-inline-start: 1.5rem;

        @media (width <= 1000px) {
            display: inline-block;
        }
    }
}

main {
    min-height: 65svh;
}

.container {
    padding-inline: var(--container-padding);
}

.landing-sec {
    height: 100svh;
    width: 100svw;

    background-size: cover;
    background-position: 100%;
    padding-inline: var(--container-padding);

    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    color: #fff;

    .hero {
        font-size: 1.5rem;
        margin-bottom: 15vh;

        @media (width <= 1000px) {
            font-size: 1rem;
            margin-bottom: 5vh;
        }

        @media (width <= 500px) {
            margin-bottom: 2svh;
        }

        > p {
            font-size: 7rem;

            @media (width <= 1550px) {
                font-size: 5rem;
            }

            @media (width <= 620px) {
                font-size: 3rem;
            }
        }

        .hero-1 {
            font-weight: 600;
        }

        .hero-2 {
            font-family: var(--heading-font);
        }

        .controls {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 2rem;
            margin-top: 2rem;
            text-align: center;

            a:first-child {
                background-color: var(--primary-color);
                border-radius: 50px;
                padding: 1rem 2rem;

                @media (width <= 500px) {
                    padding: 0.5rem 1rem;
                }
            }
        }

        .about {
            font-size: 1.5rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 2rem;
            margin-top: 8svh;

            @media (width <= 620px) {
                font-size: 1rem;
                margin-top: 4svh;
            }

            @media (width <= 500px) {
                margin-top: 2svh;
            }

            .logo {
                padding-inline-end: 2rem;
                border-inline-end: 3px solid #fff;
                img {
                    width: 150px;

                    @media (width <= 500px) {
                        width: 80px;
                    }
                }
            }

            p {
                max-width: 40svw;
                font-weight: 200;

                @media (width <= 1000px) {
                    max-width: 100%;
                }
            }
        }
    }
}

.connect-sec {
    margin-block: 10svh;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 2rem;

    @media (width <= 620px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }

    .cta {
        font-weight: 700;
        font-size: 3rem;

        @media (width <= 1200px) {
            font-size: 2rem;
        }
    }

    .controls {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-top: 2rem;
        gap: 2rem;
    }
}

.theme-btn {
    background-color: var(--primary-color);
    color: #fff !important;
    padding: 1rem 2rem;
}

.min-theme-btn {
    background-color: var(--primary-color);
    color: #fff !important;
    padding: 0.5rem 1rem;
}

.min-light-btn {
    background-color: #fff;
    color: var(--primary-color) !important;
    padding: 0.5rem 1rem;
}

.secondary-btn {
    border-inline-start: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);
    color: #fff;
    padding: 1rem 2rem;
    color: var(--primary-color);
}

.red-btn {
    background-color: #e31b53;
    color: #fff !important;
    padding: 0.5rem 1rem;
}
.green-btn {
    background-color: #0bbb57;
    color: #fff !important;
    padding: 0.5rem 1rem;
}

.title-box {
    text-align: center;
    font-size: 4rem;
    margin-bottom: 10svh;

    @media (width <= 500px) {
        font-size: 2rem;
    }

    .behind {
        font-family: var(--heading-font-2);
        font-size: 0.9em;
        color: var(--primary-color);
        line-height: 0px;

        @media (width <= 500px) {
            font-size: 0.7em;
            line-height: 3rem;
            translate: 0 50%;
        }
    }
}

.offers-sec {
    margin-block: 10svh;

    .offers-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;

        @media (width <= 1000px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        @media (width <= 620px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }
}

.explore-tail {
    margin-top: 2rem;
    text-align: center;
}

.offer-card,
.request-info {
    padding: 1.5rem;
    border: 1px solid #e0e0e0;
    border-radius: 0.5rem;

    .head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 1rem;

        .info {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 15px;

            .icon {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 50px;
                aspect-ratio: 1/1;
                border-radius: 5px;
                background-color: var(--primary-color);
                color: #fff;
            }

            .company {
                p:first-child {
                    font-weight: 700;
                }

                p:last-child {
                    font-weight: 400;
                    font-size: 0.8rem;
                }
            }
        }

        .actions {
            position: relative;

            .actions-list {
                pointer-events: none;
                position: absolute;
                top: 80%;
                inset-inline-end: 0;
                opacity: 0;
                z-index: 10;
                white-space: nowrap;
                background-color: #fff;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                color: #000;
                display: flex;
                flex-direction: column;
                border-radius: 5px;
                overflow: hidden;
                transition: 0.3s all ease-in-out;

                a {
                    padding: 0.7rem 1rem;
                    border-bottom: 2px solid #e0e0e0;
                    width: 100%;
                    transition: 0.2s all ease-in-out;

                    &:hover {
                        background-color: var(--primary-color);
                        color: #fff;
                    }
                }

                .svgify {
                    margin-inline-end: 5px;
                }

                & li:last-child a {
                    border-bottom: none;
                }
            }

            &:hover {
                .actions-list {
                    pointer-events: all;
                    top: 100%;
                    opacity: 1;
                }
            }
        }
    }

    .props {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 1rem;

        span {
            font-size: 0.9rem;
            font-weight: 300;
        }

        div {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }
    }

    .description {
        line-height: 1.7rem;
        font-weight: 300;
        margin-bottom: 1rem;
    }

    .tags {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1rem;

        .tag {
            background-color: #ebebeb;
            color: #000;
            padding: 0.5rem 1rem;
            border-radius: 50px;
            white-space: nowrap;
            max-width: 100%;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;

        .controls {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;

            a {
                padding: 0.5rem 1rem;
            }
        }
    }
}

.request-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.newsletter-sec {
    margin-block: 10vh;

    .newsletter-form {
        padding: 3rem;
        border-radius: 1rem;
        color: #fff;

        @media (width <= 500px) {
            padding: 2rem;
        }

        p {
            font-size: 4rem;
            margin-bottom: 2rem;
            text-transform: capitalize;
            font-weight: 600;
            text-align: center;

            @media (width <= 620px) {
                font-size: 2.5rem;
            }

            @media (width <= 500px) {
                font-size: 1.5rem;
            }
        }

        .input-container {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-radius: 0.5rem;
            overflow: hidden;

            input {
                border: none;
                outline: none;
                background: linear-gradient(90deg, #fff4, #fff0);
                width: 100%;
                font-size: 2rem;
                color: #fff;
                padding: 1rem;

                @media (width <= 620px) {
                    font-size: 1rem;
                }

                &::placeholder {
                    color: #fff7;
                }
            }

            button {
                font-size: 2rem;
                white-space: nowrap;

                @media (width <= 620px) {
                    font-size: 1rem;
                }
            }
        }
    }
}


.fancy-bg {
    background-image: url("/assets/pattern/dots.png"),
        linear-gradient(45deg, var(--primary-color), var(--primary-dark-color));
    background-size: auto, cover;
    background-repeat: repeat, no-repeat;
    background-position: center, center;
}

.newsletter{
        background-image: url('/assets/images/newsletter.png');
        background-size:  auto;
    background-position: bottom, center;
}
.footer{
    background-image: url('/assets/images/footer.png');
        background-size:  cover;

}

.page-footer {
    padding: 2rem var(--container-padding) 1rem;
    color: #fff;
    text-align: center;

    .info {
        font-size: 1.5rem;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        margin-block: 10svh;

        @media (width <= 500px) {
            flex-direction: column;
        }

        .logo {
            padding-inline-end: 2rem;
            border-inline-end: 3px solid #fff;

            @media (width <= 500px) {
                padding-inline-end: 0;
                border-inline-end: none;

                padding-block-end: 1rem;
                border-block-end: 3px solid #fff;
            }

            img {
                width: 150px;
            }
        }

        p {
            max-width: 50svw;
            text-align: start;
            font-weight: 300;

            @media (width <= 620px) {
                max-width: 100%;
                font-size: 1rem;
            }

            @media (width <= 500px) {
                text-align: center;
            }
        }
    }
}

.dashboard-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 2rem;
    padding-inline: var(--container-padding);

    @media (width <= 1300px) {
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    }

    @media (width <= 1000px) {
        grid-template-columns: minmax(0, 1fr);
    }
}

.dashboard-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    & > h3,
    & > .title-controlled {
        margin-bottom: -1rem;
    }

    .title-controlled {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
            font-size: 0.8rem;
            font-weight: 300;
            color: var(--primary-color);
        }
    }

    .user-info {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .user-avatar {
            position: relative;
            width: 40%;
            margin-bottom: 0.8rem;

            &.unverified:after {
                content: "Unverified";
                position: absolute;
                bottom: 0%;
                inset-inline-start: 50%;
                translate: -50% 0%;
                background-color: #bb220b;
                color: #fff;
                font-size: 0.8rem;
                font-weight: 700;
                padding: 0.5rem;
                border-radius: 50px;
                white-space: nowrap;
            }

            &.verified:after {
                content: "Verified";
                position: absolute;
                bottom: 0%;
                inset-inline-start: 50%;
                translate: -50% 0%;
                background-color: #0bbb57;
                color: #fff;
                font-size: 0.8rem;
                font-weight: 700;
                padding: 0.5rem;
                border-radius: 50px;
                white-space: nowrap;
            }

            img {
                background-color: var(--primary-color);
                border-radius: 50%;
                padding: 0.5rem;
                box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                width: 100%;
                object-fit: contain;
                margin-bottom: 0.5rem;
            }
        }

        .name {
            font-weight: 700;
            font-size: 1.5rem;
        }

        .title {
            font-weight: 300;
            font-size: 1rem;
        }
    }

    .state-cards {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
        text-align: center;

        .full-width {
            grid-column: -1/1;
        }

        .state-card {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 1rem 0.5rem;
        }

        .number {
            font-weight: 700;
            font-size: 2rem;

            &.low {
                color: #e23115;
            }

            &.high {
                color: #0bbb57;
            }
        }

        .label {
            font-weight: 300;
            font-size: 0.8rem;
            text-transform: capitalize;
        }
    }

    .jobs-list {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;

        .min-job-card {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            padding: 1rem;
            font-size: 0.8rem;
            flex: 1 1 calc(50% - 0.5rem); /* Two cards side by side with gap */
            & > div {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .name {
                font-weight: 700;
            }

            .view-btn {
                text-align: center;
                padding: 10px;
                border-radius: 5px;
                text-transform: capitalize;
            }
        }
    }
}

.provider-dashboard .dashboard-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);

    /* div:has(.state-cards) {
        display: flex;
        flex-direction: column;
        white-space: nowrap;
        .state-cards {
            height: 100%;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: repeat(4, minmax(0, 1fr));

            > div {
                height: 100%;
            }
        }
    } */

    .state-cards {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin-top: 1rem;

        @media (width <= 1300px) {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (width <= 860px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        & > div:first-child {
            grid-column: -1/1;
        }

        /* & > div:last-child {
            grid-column: -1/2;
        } */

        /* .jobs-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: flex-start;
        } */
    }

    @media (width < 800px) {
        grid-template-columns: repeat(1, minmax(0, 1fr));

        & > div:first-child {
            grid-column: -1/1;
        }

        & > div:last-child {
            grid-column: -1/1;
        }

        /* .jobs-list {
            grid-template-columns: repeat(1, minmax(0, 1fr));
        } */
    }

    & > div > h3,
    & > div > .title-controlled {
        margin-bottom: 1rem;
    }
}

.dashboard {
    display: flex;
    flex-direction: column;
    gap: 2rem;

    & > h3,
    & > .title-controlled {
        margin-bottom: -1rem;
    }

    .title-controlled {
        display: flex;
        justify-content: space-between;
        align-items: center;

        a {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 0.8rem;
            font-weight: 300;
            color: var(--primary-color);

            .svgify {
                translate: 0 2px;
            }
        }
    }

    .requests-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;

        @media (width <= 1000px) {
            grid-template-columns: minmax(0, 1fr);
        }
    }

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

    .service-request-form {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .input-splitter {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: inherit;

            @media (width <= 600px) {
                grid-template-columns: minmax(0, 1fr);
            }
        }

        .form-control-input {
            width: 100%;
            height: 100%;
            padding: 0.5rem 1rem;
            border-radius: 5px;
            border: 1px solid #ccc;
            font-size: 1rem;
            font-weight: 300;
            color: #666;

            &:focus {
                outline: none;
                border-color: var(--primary-color);
            }
        }

        .text-muted {
            font-size: 11px;
            font-weight: 300;
            color: #666;
        }
    }
}

.client-requests-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
}

input[type="file"] {
    cursor: pointer;
    background: none;
    padding: 0;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
}

input[type="file"]::-webkit-file-upload-button {
    cursor: pointer;
    order: -1;
    margin-inline-end: 1rem;
    border: 1px solid var(--primary-color);
    background: var(--primary-color);
    color: #fff;
    padding: 0.7rem 1rem;
    border-radius: 0;
}

.form-inputs,
.filter-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;

    @media (width <= 1000px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    @media (width <= 500px) {
        grid-template-columns: minmax(0, 1fr);
    }

    .field {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;

        label {
            font-size: 0.8rem;
            font-weight: 300;
            text-transform: capitalize;
        }
    }

    .controls {
        grid-column: -1/1;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 1rem;

        button[type="submit"] {
            background-color: var(--primary-color);
            color: #fff;
            padding: 0.5rem 1rem;
            border-radius: 5px;
        }
    }
}

.list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);
    gap: 2rem;
    padding-inline: var(--container-padding);

    @media (width <= 1000px) {
        grid-template-columns: minmax(0, 1fr);
    }

    .list-filter {
        position: sticky;
        top: 12svh;
        display: flex;
        flex-direction: column;
        gap: 2rem;

        @media (width <= 1000px) {
            position: static;
        }

        h3,
        .title-controlled {
            margin-bottom: -1rem;
        }

        .title-controlled {
            display: flex;
            justify-content: space-between;
            align-items: center;

            a {
                display: inline-flex;
                align-items: center;
                gap: 5px;
                font-size: 0.8rem;
                font-weight: 300;
                color: var(--primary-color);

                .svgify {
                    translate: 0 2px;
                }
            }

            button[type="submit"] {
                background-color: var(--primary-color);
                color: #fff;
                padding: 0.5rem 1rem;
                border-radius: 5px;
                margin-inline-start: 1rem;
            }
        }

        .filter-box {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .list-view {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        .list-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;

            @media (width <= 650px) {
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;

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

            .list-search {
                min-width: 100px;
            }

            .actions {
                display: inline-flex;
                gap: 1rem;
                justify-content: center;
                align-items: center;

                p {
                    white-space: nowrap;
                }
            }
        }

        .list-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 1rem;

            @media (width <= 620px) {
                grid-template-columns: minmax(0, 1fr);
            }
        }

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

.card-box {
    background-color: #fff;
    padding: 2rem;
    border-radius: 0.7rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    border: 1px solid #f0f0f0;
    width: 100%;
}

.badge {
    padding: 0.25rem 0.75rem;
    border-radius: 5px;
    font-size: 11px;
    text-transform: capitalize;
    background-color: #e0e0e0;
    border: 1px solid currentColor;

    &.success {
        background-color: #0bbb5740;
        color: #0d532b;
    }

    &.info {
        background-color: #0b51bb40;
        color: #0d1653;
    }

    &.danger {
        background-color: #e2311540;
        color: #701d10;
    }

    &.warning {
        background-color: #ecb71640;
        color: #92710e;
    }
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    a,
    span {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 40px;
        aspect-ratio: 1/1;
        border-radius: 50%;

        &:is(span) {
            width: 20px;
            letter-spacing: 0.2rem;
        }

        &.active {
            background-color: var(--primary-color);
            color: #fff;
        }
    }
}

.modal-container {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: auto;
    transition: 0.3s all ease-in-out;

    &.hidden {
        translate: 0 50%;
        opacity: 0;
        pointer-events: none;
    }

    .modal-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
        border-bottom: 1px solid #e0e0e0;
        text-transform: capitalize;

        .close-btn {
            color: red;
            font-size: 1rem;
        }
    }

    modal {
        max-width: min(95svw, 500px);
    }

    .modal-footer {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        gap: 0.5rem;
        margin-top: 1rem;
    }
}

.applications-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    .offer-message {
        display: flex;
        flex-direction: column;
        gap: 1rem;

        &.selected {
            border: 2px solid var(--primary-color);
        }

        .head {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 1rem;
        }

        .provider {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            gap: 1rem;

            img {
                width: 60px;
                aspect-ratio: 1/1;
                object-fit: cover;
                border-radius: 50%;
            }

            .name {
                font-weight: 600;
            }

            .title {
                font-size: 0.8rem;
                font-weight: 300;
                color: #666;
            }
        }

        .controls {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 0.5rem;
        }
    }
}

.request-details {
    .request-info {
        align-items: center;

        .head {
            width: 100%;
            margin: 0;
        }
    }

    .table-data {
        overflow-x: auto;

        table td {
            min-width: 70vw;
        }
    }

    .attachements {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 1rem;
        flex-wrap: wrap;

        .attachement {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
            border: 1px solid #e0e0e0;
            width: min(calc(25% - 3rem), 300px);
            border-radius: 0.5rem;
            overflow: hidden;

            > * {
                width: 100%;
            }

            .icon {
                height: 150px;
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .details {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.5rem 1rem;
                border-top: 1px solid #e0e0e0;

                .name {
                    width: 100%;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 500;
                    font-size: 0.8rem;
                }

                .size {
                    font-size: 0.8rem;
                    font-weight: 300;
                    opacity: 0.7;
                }
            }
        }
    }

    > .description {
        p:not(:last-child) {
            margin-bottom: 1rem;
        }
    }

    > .controls {
        button {
            width: 100%;
            text-align: center;
            font-size: 1rem;
        }
    }
}

.table-data table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #e0e0e0;

    th,
    td {
        padding: 1rem;
        border: 1px solid #e0e0e0;
    }

    th {
        background-color: #fefefe;
        font-weight: 500;
        text-transform: capitalize;
    }

    td {
        font-weight: 300;
        padding-inline: 2rem;
    }
}

.send-proposal-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: min(95vw, 700px);
}

.auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    padding: 5vh;
    height: 100svh;
    gap: 5vh;

    .viewer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-height: 100%;
        overflow-y: auto;

        .logo-wrapper {
            margin-bottom: 2rem;
            background-color: var(--primary-color);
            padding: 1rem 2rem;
            border-radius: 1rem;

            img {
                width: 100px;
            }

            @media (width <= 1000px) {
                background-color: transparent;
            }
        }
    }

    .hero {
        height: 100%;
        /* background-color: var(--primary-color); */
        color: #fff;

        background-image: url("/assets/images/auth.png");
        /* url("/assets/pattern/dots.png"),
            linear-gradient(120deg, #5d2288, #8a33c9, #5d2288); */
        background-size: 100%;
        /* auto, cover, cover; */
        background-repeat: no-repeat;
        /* repeat, no-repeat; */
        background-position: 100% 100%;
        /* center; */

        p {
            font-weight: 700;
            font-size: 1.5rem;

            background: linear-gradient(45deg, #9c5bd621, #9c5bd6, #9c5bd621);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;

            &.cta-text {
                font-size: 4rem;
                max-width: 70%;
            }
        }
    }

    @media (width <= 1000px) {
        grid-template-columns: minmax(0, 1fr);
        background-image: url("/assets/pattern/dots.png"),
            linear-gradient(120deg, #5d2288, #8a33c9, #5d2288);
        background-size: cover, cover;
        background-repeat: repeat, no-repeat;
        background-position: center;

        .hero {
            display: none;
        }
    }
}

.auth-form {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;

    .form-title {
        font-size: 1.5rem;
        font-weight: 700;
    }

    .controls {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

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

        .form-controls {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 1rem;

            button,
            a {
                color: currentColor;
                font-size: 1rem;
                text-align: end;
            }
        }
    }
}

.map-controller {
    #map {
        height: min(400px, 70svh);
        width: 100%;
    }

    #autocomplete {
        width: 100%;
        font-size: 16px;
    }

    .info {
        padding: 10px;
        background: #f7f7f7;
        border-top: 1px solid #ccc;
    }
}

.settings {
    .card-box {
        padding: 0;
        overflow: hidden;
    }

    .settings-table {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        @media (width <= 680px) {
            grid-template-columns: auto minmax(0, 1fr);
        }

        .row {
            display: contents;

            &:hover {
                div {
                    background: #f0f0f0;
                }
            }

            div {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                padding: 0.7rem;
                min-height: 90px;
                transition: 0.3s all ease-in-out;

                &:first-child {
                    padding-inline-start: 2rem;
                }

                &:last-child {
                    min-width: 0;
                    padding: 0;

                    padding-inline-end: 2rem;
                }
            }

            &:not(:last-child) > div {
                border-bottom: 1px solid #e0e0e0;
            }

            i {
                width: 30px;
                text-align: center;
            }

            p {
                text-align: start;
            }

            .title {
                gap: 10px;
                font-weight: 600;
                font-size: 1rem;
                padding-inline: 0 2rem;

                @media (width <= 680px) {
                    flex-direction: column;
                    justify-content: center;
                    align-items: flex-start;
                    padding-inline-end: 1rem;
                    font-size: 1rem;
                    width: 30vw;
                    gap: 5px;

                    p {
                        white-space: nowrap;
                        width: 100%;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
            }

            .description {
                flex-direction: column;
                justify-content: center;
                align-items: flex-start;
                font-size: 0.9rem;
                font-weight: 300;

                .rejection {
                    color: red;
                }
            }

            @media (width <= 680px) {
                > div:last-child {
                    display: none;
                }
            }
        }
    }
}

.preview-profile-img {
    cursor: pointer;
    aspect-ratio: 1/1;
    background-color: var(--primary-color);
    width: min(100%, 300px);
    border-radius: 10px;
    padding: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;

    img {
        border-radius: 0.5rem;
        width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

.check-status-box {
    display: inline-block;
    width: 30px;
    min-height: unset !important;
    aspect-ratio: 1/1;
    border: 1px solid #e0e0e0;
    border-radius: 5px;

    &.verified {
        background: radial-gradient(
            ellipse at 0% 100%,
            rgb(22, 226, 22),
            rgb(21, 160, 23)
        );
    }

    &.rejected {
        background: radial-gradient(
            ellipse at 0% 100%,
            rgb(226, 22, 80),
            rgb(194, 23, 32)
        );
    }

    &.submitted {
        background: radial-gradient(
            ellipse at 0% 100%,
            rgb(226, 165, 22),
            rgb(194, 131, 23)
        );
    }
}

.modal-form {
    grid-template-columns: minmax(0, 1fr);

    .preview-profile-img {
        width: min(100%, 400px);
    }
}

.verification-settings-table {
    @media (width <= 680px) {
        grid-template-columns: auto minmax(0, 1fr) auto !important;

        .row > div:last-child {
            display: inline-flex !important;
        }

        .check-status-box {
            width: 15px;
        }
    }
}

.payment-form {
    padding: 1rem;

    iframe {
        width: 100%;
        height: 70svh;
        border: none;
        outline: none;
    }
}

.chart-controls-list {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    margin-bottom: 1rem;

    > * {
        width: 100%;
    }

    .controls {
        width: auto;
        flex-shrink: 1;
        margin-inline-start: 0.5rem;

        button {
            height: 100%;
            font-size: 1.7rem;
            padding: 1rem;
        }
    }

    @media (width <= 860px) {
        flex-wrap: wrap;

        .controls {
            width: 100%;
            margin-inline-start: 0;

            button {
                width: 100%;
                text-align: center;
            }
        }
    }

    button {
        position: relative;
        border: none;
        outline: none;
        background-color: #eee;
        cursor: pointer;
        text-align: start;
        padding: 1rem 2rem;
        display: flex;
        flex-direction: column;
        text-transform: capitalize;
        border-top: 3px solid transparent;
        transition: 0.3s border-top ease-in-out;

        &:not(:last-of-type, .active, :has(+ .active)) {
            border-inline-end: 1px solid #e0e0e0;

            @media (width <= 860px) {
                border-inline-end: none;
                border-bottom: 1px solid #e0e0e0;
            }
        }

        * {
            pointer-events: none;
        }

        & > div {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 10px;
        }

        p {
            margin: 0;
            font-size: 0.8rem;
            font-weight: 200;
        }

        i {
            position: absolute;
            font-size: 1.5rem;

            inset-inline-end: 2rem;
            top: 50%;
            translate: 0 -50%;
        }

        .num {
            font-size: 1.8em;
            font-weight: 500;
        }

        &.active {
            background-color: #fff;
            border-top: 3px solid var(--color);

            i {
                color: var(--color);
            }
        }

        &.report {
            align-items: center;
            justify-content: center;
        }
    }
}

.main-new-chart {
    height: 60vh;
}

.chart-full-width {
    width: 100%;
}

.chart-static-height {
    height: 60vh;

    canvas {
        width: 100%;
        height: 60svh;
    }

    @media (width <= 860px) {
        max-height: 70svh;

        canvas {
            height: 60svh;
        }
    }
}

.contact-us-page {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
    align-items: center;

    @media (width <= 660px) {
        grid-template-columns: minmax(0, 1fr);
    }

    .contact-form {
        grid-template-columns: minmax(0, 1fr);
    }
}

.companies-list-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2rem;

    @media (width <= 1300px) {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    @media (width <= 660px) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.company-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin-top: 2rem;
    padding-top: 0;
    padding: 1.5rem 1rem;

    .logo {
        width: min(100%, 90px);
        aspect-ratio: 1/1;
        background-color: var(--primary-color);
        padding: 1rem;
        border-radius: 0.6rem;
        translate: 0 calc(-50% - 1rem);
        margin-bottom: -3rem;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    /* 
    .info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    } */

    .name {
        font-size: 1.2em;
        font-weight: 600;
        text-transform: uppercase;
    }

    .requests {
        font-size: 0.8em;
        font-weight: 300;
        text-transform: capitalize;
    }
}

.no-data-found {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: 100;
    width: 100%;
    height: 100%;
    margin-block: 2rem;
    opacity: 0.4;
}

.dashboard-tabs {
    border-bottom: 1px solid #e0e0e0;
    margin-bottom: 1rem;

    a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        white-space: nowrap;
        height: 100%;
        padding: 0.75rem 2rem;
        border-radius: 0;
        background: #f7f7f7;
        color: #888;
        font-weight: 600;
        border: 1px solid #e0e0e0;
        border-bottom: none;
        text-decoration: none;

        .active {
            color: var(--primary-color);
            background: #fff;
        }
    }

    ul {
        display: flex;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
        overflow-x: auto;
        align-items: stretch;
    }
}

.dashboard-tabs .tab-link.active {
    background: #fff !important;
    color: var(--primary-color) !important;
    border-bottom: 2px solid #fff !important;
}

.dashboard-tabs .tab-link {
    transition: background 0.2s, color 0.2s;
}

.tab-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    > div {
        width: 100%;
    }
}

.verification-alert {
    background: linear-gradient(90deg, #f3e8fa 0%, #ede7f6 100%);
    border-left: 5px solid #7f3ab1;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    padding: 1.5rem;
    border-radius: 0;

    @media (width <= 600px) {
        flex-direction: column;

        > * {
            width: 100%;
        }

        a {
            text-align: center;
        }
    }
}

.calender-container {
    --fc-button-bg-color: var(--primary-color);
    --fc-button-border-color: var(--primary-color);
    --fc-button-hover-bg-color: var(--primary-dark-color);
    --fc-button-hover-border-color: var(--primary-dark-color);
    --fc-button-active-bg-color: var(--primary-color);
    --fc-button-active-border-color: var(--primary-color);

    .fc-header-toolbar {
        flex-direction: row-reverse;

        > div:last-child {
            display: none;
        }
    }

    .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
    .fc .fc-button-primary:not(:disabled):active:focus,
    .fc .fc-button-primary:focus {
        box-shadow: #8a33c991 0px 0px 0px 0.2rem;
    }

    .fc .fc-daygrid-day.fc-day-today {
        background-color: #8a33c923;
    }

    th > div,
    td > div {
        &:not(.fc-scroller-harness) {
            padding: 10px;
        }
    }

    a:not(.fc-event) {
        cursor: default;
    }
}