/*
Theme Name: BookBi Accounting
Theme URI: https://bookbi.com/
Author: HOGI Marketing agency in Dubai
Description: Accounting That Speaks Your Language.
Version: 1.0.0
*/

* {
    scroll-behavior: smooth;
    box-sizing: border-box;
}

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

html, body {
    width: 100%;
    max-width: 1920px;
    min-width: 320px;
    padding: 0;
}

html {
    margin: 0 auto 0 !important;
}

body {
    word-break: break-word;
    overflow-x: hidden;
    text-align: left;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    margin: 0 auto 0;
}

h1, h2, h3, h4, h5, h6, p, blockquote {
    margin: 0;
}

a {
    color: currentColor;
    text-decoration: none;
}

a:hover, a:focus, a:active {
    text-decoration: none;
}

ul {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

.neutral-0 {
    color: var(--v3-neutral-0);
}

.neutral-100 {
    color: var(--v3-neutral-100);
}

.neutral-200 {
    color: var(--v3-neutral-200);
}

.neutral-300 {
    color: var(--v3-neutral-300);
}

.neutral-400 {
    color: var(--v3-neutral-400);
}

.neutral-500 {
    color: var(--v3-neutral-500);
}

.alpha-300 {
    color: var(--v3-alpha-300);
}

.alpha-200 {
    color: var(--v3-alpha-200);
}

.alpha-100 {
    color: var(--v3-alpha-100);
}

.alpha-50 {
    color: var(--v3-alpha-50);
}

.mint-100 {
    color: var(--v3-mint-100);
}

.primary-100 {
    color: var(--v3-primary-100);
}

.primary-200 {
    color: var(--v3-primary-200);
}

.primary-300 {
    color: var(--v3-primary-300);
}

.text-50 {
    font: var(--text-50);
}

.text-100 {
    font: var(--text-100);
}

.text-200 {
    font: var(--text-200);
}

.text-300 {
    font: var(--text-300);
}

.title-100 {
    font: var(--title-100);
}

.title-200 {
    font: var(--title-200);
}

.title-300 {
    font: var(--title-300);
}

.title-400 {
    font: var(--title-400);
}

.title-500 {
    font: var(--title-500);
}

.d-block {
    display: block;
}

.d-flex {
    display: flex;
}

.italic {
    font-style: italic;
}

.w-full {
    width: 100%;
}

.w-max {
    width: max-content;
}

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

.margin-inline {
    margin-inline: auto;
}

.column-wide {
    grid-column: 1 / -1;
}

.subtitle {
    font: 600 14px / 1.5 var(--stage-grotesk);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.not-post {
    color: var(--v3-neutral-500);
    font: var(--text-100);
    letter-spacing: .5px;
}

.head {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 768px;
    text-align: center;
    margin-inline: auto;
}

.thumbnail {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: top center;
}

.glow {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.heading-gradient {
    display: block;
    color: transparent;
    background: var(--gradient-160);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-top: clamp(8px, 1.2vw, 12px);
}

.badge {
    display: flex;
    align-items: center;
    column-gap: 12px;
    width: max-content;
    font: var(--text-50);
    border-radius: 40px;
    padding: 4px 18px;
}

.badge-widget {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.badge-lime {
    color: #d0febe;
    background: #d0febe1a;
    border: 1px solid #d0febeb3;
}

.badge-info {
    color: #75bfff;
    background: #07152cbf;
    border: 1px solid #0184ee40;
    backdrop-filter: blur(24px);
}

.badge-primary {
    color: var(--v3-primary-200);
    border: 1px solid #2b43d938;
    background: #2b43d91a;
}

.icon-cover {
    width: clamp(40px, 4.5vw, 48px);
    height: clamp(40px, 4.5vw, 48px);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.icon-cover-primary {
    color: var(--v3-primary-200);
    background: #2b43d924;
    border: 1px solid #2b43d93d;
}

.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    column-gap: 16px;
    font: 500 16px / 1 var(--stage-grotesk);
    letter-spacing: .5px;
    border-radius: 40px;
    padding-block: clamp(14px, 1.8vw, 18px);
    padding-inline: clamp(20px, 3.2vw, 32px);
    cursor: pointer;
    transition: color 300ms ease, background 300ms ease;
}

.btn-gradient {
    color: var(--v3-alpha-50);
    background: var(--gradient-70);
    border: none;
}

.btn-gradient:hover {
    background: var(--gradient-110);
}

.btn-secondary {
    color: var(--v3-alpha-50);
    border: 1px solid var(--v3-alpha-300);
    background: var(--v3-alpha-300);
}

.btn-success {
    color: var(--v3-neutral-500);
    background: var(--v3-mint-100);
    border: 1px solid var(--v3-mint-100);
}

.btn-primary-outline {
    color: var(--v3-primary-200);
    background: #ffffff66;
    border: 1px solid var(--v3-primary-200);
    backdrop-filter: blur(15px);
}

.btn-primary-outline:hover {
    color: var(--v3-neutral-0);
    background: var(--v3-primary-200);
    backdrop-filter: none;
}

textarea {
    max-height: 131px;
    min-height: 131px;
    height: 131px;
}

.field-label {
    display: block;
}

.field-input {
    width: 100%;
    color: var(--v3-alpha-200);
    font: var(--text-50);
    background: #ffffff0a;
    border: 1px solid var(--v3-alpha-300);
    border-radius: 8px;
    padding: 13px 16px;
    outline: none;
    transition: color 300ms ease, box-shadow 300ms ease, border 300ms ease;
}

.field-input::placeholder {
    color: var(--v3-alpha-200);
    font: var(--text-50);
}

.field-input:focus {
    border-color: #2b43d973;
}

.wpcf7-form {
    display: grid;
    gap: 24px;
}

:is(.wpcf7-response-output, .wpcf7-spinner) {
    display: none;
}

.wpcf7-not-valid-tip {
    color: #dc3232;
    font: 400 14px / 1.5 var(--stage-grotesk);
    margin-top: 8px;
}

#wpadminbar {
    display: none;
}

@media only screen and (min-width: 768px) {
    .wpcf7-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}