@import "./tallcraftui.css";
@source '../../vendor/developermithu/tallcraftui/src/**/*.php';

@import "tailwindcss";
@import "animate.css";

@import "../../vendor/livewire/flux/dist/flux.css";
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@import "../../public/fonts/averta/font.css";
@source "../views";
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lexend:wght@100..900&display=swap");

@theme {
    --color-primary: var(--color-primary);
    --color-primary-light: var(--color-primary-light);
    --font-lexend: var(--lexend);
    --font-inter: var(--inter);
    --font-averta: "Averta", sans-serif;
    --color-info: var(--color-info);
    --color-success: var(--color-success);
}

:root {
    --color-primary: #f66d2f;
    --color-primary-light: #ff914d;
    --color-primary-dark: #9a4b1f;
    --color-info: #005C8A;
    --color-success: #22C55E;


    --color-primary-100: #f9b8a0;
    --color-primary-200: #f88a73;
    --color-primary-300: #f76b4e;
    --color-primary-400: #f66d2f; /* Original Color */
    --color-primary-500: #e65c24;
    --color-primary-600: #d2541f;
    --color-primary-700: #b7431b;
    --color-primary-800: #9a4b1f;
    --color-primary-900: #7a3917;

    --color-primary-light-100: #ffb782;
    --color-primary-light-200: #ff9e6f;
    --color-primary-light-300: #ff8b5c;
    --color-primary-light-400: #ff914d; /* Original Color */
    --color-primary-light-500: #e67e3e;
    --color-primary-light-600: #d6692f;
    --color-primary-light-700: #b65726;
    --color-primary-light-800: #9b4a1f;
    --color-primary-light-900: #7f3b14;

    --color-primary-dark-100: #d79f6c;
    --color-primary-dark-200: #c58f5e;
    --color-primary-dark-300: #b67f51;
    --color-primary-dark-400: #9a4b1f; /* Original Color */
    --color-primary-dark-500: #853c1a;
    --color-primary-dark-600: #6f2f16;
    --color-primary-dark-700: #59241a;
    --color-primary-dark-800: #4c1c1c;
    --color-primary-dark-900: #3a1313;

    --lexend: "Lexend", sans-serif;
    --inter: "Inter", sans-serif;
    --shadow-button: 0 2px 0 var(--color-primary);
}

[x-cloak] {
    display: none !important;
}

.box_fixRight {
    position: fixed;
    top: 40%;
    right: -150px;
    width: auto;
    transition: all 0.2s ease-in-out 0s;
    z-index: 999;
}

.box_fixRight .box_content {
    background: #fff;
    padding: 10px;
    box-shadow: 10px 0px 30px #888888;
    border-radius: 10px 0 0 10px;
}

.box_fixRight .box_content a {
    text-decoration: none;
}

.box_fixRight .box_content .item {
    display: block;
    padding: 13px 10px 13px 47px;
    color: #111;
}

.box_fixRight .box_content .item:hover {
    color: red;
}



.box_fixRight .box_content .item.item_2 {
    background: url(/images/messengericon.png)
        no-repeat left;
}

.box_fixRight .box_content .item.item_3 {
    background: url(/images/rsz_phone.png)
        no-repeat left;
}

.box_fixRight .box_content .item.item_4 {
    background: url(/images/profile-1.png)
        no-repeat left;
}

.box_fixRight:hover {
    right: 0;
    transition: all 0.2s ease-in-out 0s;
}

@media (max-width: 549px) {
    .box_fixRight {
        display: none;
    }
}