:root {
    --font-family-Lato: "Lato", sans-serif;
    --font-family-Lato-bold: "Lato-bold", sans-serif;
    /* ===== Base Colors ===== */
    --color-white: #ffffff;
    --color-black: #161616;
    --color-dark: #101822;

    /* ===== Backgrounds ===== */
    --bg-primary: #f6f6f8;
    --bg-secondary: #ededf1;
    --bg-tertiary: #ecf5ff;
    --bg-surface: #f9fafb;

    /* ===== Surface / Cards ===== */
    --surface-main: #ffffff;
    --surface-muted: #f6f6f8;
    --surface-border: #dcdae2;

    /* ===== Text Colors ===== */
    --text-primary: #161616;
    --text-secondary: #222529;
    --text-muted: #868a94;
    --text-light: #b2aebf;
    --text-grey: #5d6370;

    /* ===== Brand / Primary ===== */
    --primary: #1c6a9b;
    --primary-light: #9dc6de;
    --primary-light-bg: #d4ecfa;
    --primary-bg: #ecf5ff;

    /* ===== Success ===== */
    --success: #22b675;
    --success-bg: #e0faf0;
    --success-secondary-bg: #e2faf0;

    /* ===== Warning ===== */
    --warning: #e28e05;
    --warning-bg: #feefdd;

    /* ===== Error / Danger ===== */
    --danger: #dd3535;
    --danger-bg: #fde1e1;
    --danger-secondary-bg: #fef2f2;

    /* ===== Borders ===== */
    --border-light: #ededf1;
    --border-default: #dcdae2;

    /* ===== Sidebar ===== */
    --sidebar-bg: #101822;
    --sidebar-text: #b2aebf;
    --sidebar-active: #1c6a9b;

    /* ===== Header ===== */
    --header-bg: #ffffff;
    --header-border: #ededf1;
}
/* padding */
.py-20 {
    padding-block: 20px;
}
/* width */
.w-auto {
    width: auto;
}
/* settings */
.form-switch .form-check-input {
    padding: 9px 17px;
}
.form-switch .form-check-input:checked {
    color: var(--primary);
    background-color: var(--sidebar-active);
}
.font-bold {
    font-weight: 600;
    font-family: var(--font-family-Lato-bold);
}
.dashboard {
    display: flex;
    height: 100vh;
}
.cmn--checkbox label.btn {
    border-radius: 42px;
    border: 1px solid transparent;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-color: var(--border-light);
    background-color: var(--bg-primary);
    width: max-content;
    font-weight: 500;
    font-size: 14px;
    color: var(--text-muted);
}
.cmn--checkbox label.btn:hover {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--color-white);
}
.cmn--checkbox .btn-check:checked + .btn {
    border-color: var(--primary);
    background-color: var(--primary);
    color: var(--color-white);
}
/* Sidebar */
.sidebar {
    width: 280px;
    height: 100vh;
    background: var(--color-white);
    border-right: 1px solid var(--bg-secondary);
    transition: width 0.3s ease;
    overflow: hidden;
    position: fixed;
    left: 0;
    top: 0;
}
.sidebar .icons--sidebar {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("../images/icons-sat.png");
    background-repeat: no-repeat;
    background-size: 40px auto;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.dashboard-icon {
    background-position: -22px 0px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.dashboard-icon {
    background-position: -22px 0px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.listing {
    background-position: 0px -22px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.listing {
    background-position: -22px -22px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.listing {
    background-position: -22px -22px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.addcar {
    background-position: -0px -46px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.addcar {
    background-position: -22px -46px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.addcar {
    background-position: -22px -46px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.bulkupload {
    background-position: -0px -69px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.bulkupload {
    background-position: -22px -69px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.bulkupload {
    background-position: -22px -69px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.orders {
    background-position: -0px -91px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.orders {
    background-position: -22px -91px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.orders {
    background-position: -22px -91px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.earnings {
    background-position: -0px -114px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.earnings {
    background-position: -22px -114px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.earnings {
    background-position: -22px -114px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.settings {
    background-position: -0px -137px;
}
.sidebar .sidebar-nav ul li:hover .icons--sidebar.settings {
    background-position: -22px -137px;
}
.sidebar .sidebar-nav ul li.active .icons--sidebar.settings {
    background-position: -22px -137px;
}
.sidebar .sidebar-nav ul li .icons--sidebar.logout {
    background-position: -0px -161px;
}

.sidebar.closed {
    width: 80px;
}
.sidebar.closed .logo--title,
.sidebar.closed .sidebar-nav .title,
.sidebar.closed .sidebar-nav ul li a span:not(.icons--sidebar) {
    display: none;
}
.sidebar.closed .menu-text,
.sidebar.closed .logo--title,
.sidebar.closed .sidebar-nav .title {
    display: none;
}
.sidebar.closed .sidebar-nav ul li a {
    justify-content: center;
    padding: 12px 0;
}
.sidebar.closed .user--logo {
    justify-content: center;
}
.menu-text,
.logo--title,
.sidebar-nav .title {
    transition: opacity 0.2s ease;
}

.sidebar.closed .menu-text,
.sidebar.closed .logo--title,
.sidebar.closed .sidebar-nav .title {
    opacity: 0;
    pointer-events: none;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: calc(100vh - 28px - 44px - 20px);
    padding: 16px;
    padding-top: 0px;
    scrollbar-width: thin;
    overflow-y: auto;
}
.user--logo {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
}
.user--logo .logo--title {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 30px;
    color: var(--color-black);
}
.sidebar-header {
    padding: 20px 16px 34px;
}
.sidebar-nav .anchor--list .title {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    line-height: 24px;
    color: var(--text-light);
    margin-bottom: 6px;
}
.sidebar-nav ul {
    margin-bottom: 0px;
}
.sidebar-nav ul li {
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-grey);
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--color-white);
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}
.sidebar-nav ul li a {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
}
.sidebar-nav ul li.active {
    background-color: var(--primary-light-bg);
    border-color: var(--primary-light);
    color: var(--primary);
    font-weight: 600;
    font-family: "Lato-bold";
}
.sidebar-nav ul li:hover {
    background-color: var(--primary-light-bg);
    border-color: var(--primary-light);
    color: var(--primary);
}
/* Main */
.main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-left: 280px;
    transition: margin-left 0.2s ease;
}
.main.closed {
    margin-left: 79px;
}
/* Header */
.header {
    height: 68px;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 28px;
    gap: 10px;
    border-bottom: 1px solid var(--bg-secondary);
}
.header .icon--bell {
    height: 32px;
    width: 32px;
    padding: 4px;
    background-color: var(--bg-primary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.header .header--user-name {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    color: var(--color-white);
    height: 32px;
    width: 32px;
    padding: 9px;
    background-color: var(--primary);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.action--icon-header {
    display: flex;
    align-items: center;
    gap: 14px;
}
.search--header {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}
.search--field {
    position: relative;
    width: 100%;
}
.search--field img {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
}
.search--field input {
    padding: 10px 10px;
    padding-left: 40px;
    border: 1px solid var(--bg-primary);
    background-color: var(--bg-primary);
    border-radius: 16px;
    font-weight: 400;
    font-size: 14px;
    line-height: 24px;
    color: var(--text-grey);
    width: 100%;
    max-width: 429px;
    outline: 0;
}
/* Main Content */
/* Content animation*/
.content {
    animation: fadeSlide 0.5s ease;
}
.elastic-entry {
    animation: elasticSlide 0.7s ease;
}
.flip-in-card {
    animation: flipIn 0.6s ease;
    transform-origin: center;
}
.bounce-in-box {
    animation: bounceIn 0.6s ease;
}
.rotate-fade-card {
    animation: rotateFade 0.5s ease;
}
.blur-fade-view {
    animation: blurFade 0.5s ease;
}
.slide-left-card {
    animation: slideLeft 0.5s ease;
}
.slide-right-card {
    animation: slideRight 0.5s ease;
}
.slide-up-panel {
    animation: slideUp 0.5s ease;
}
.fade-scale-box {
    animation: fadeScale 0.4s ease;
}
/* title */
.title--dashboard .title {
    font-family: "Lato-bold";
    font-size: 22px;
    margin-bottom: 3px;
    font-weight: 600;
    color: var(--text-secondary);
}
.title--dashboard .subtitle {
    font-weight: 400;
    font-size: 16px;
    margin-bottom: 0;
    color: var(--text-muted);
}
.table--title .title {
    color: var(--text-secondary);
    font-family: "Lato-bold";
    text-transform: none !important;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 3px;
}
.table--title .subtitle {
    font-weight: 400;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 0;
}
/* cards */
.valut--card {
    background-color: var(--color-white);
    padding: 18px 16px;
    border-radius: 12px;
}
.valut--card .title {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    margin-bottom: 0px;
}
.valut--card .value {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 26px;
    margin-bottom: 0px;
}
.valut--card .predict {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 12px;
    color: var(--primary);
}
.dash--icon {
    display: flex;
    align-items: start;
    justify-content: center;
}
.card--icon {
    height: 32px;
    width: 32px;
    border-radius: 50%;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--bg-primary);
    padding: 7px;
    display: block;
}
/* border */
.border--card {
    border: 1px solid var(--bg-secondary);
}
/* grid */
.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
/* status */
.sat--status {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    font-weight: 600;
    font-size: 12px;
    font-family: "Lato-bold";
    border-radius: 20px;
    border: 1px solid transparent;
    width: max-content;
}
.sat--status.success {
    background-color: var(--success-bg);
    color: var(--success);
}
.sat--status.success.border-status {
    border-color: var(--success);
}
.sat--status.warning {
    background-color: var(--warning-bg);
    color: var(--warning);
}
.sat--status.danger {
    background-color: var(--danger-bg);
    color: var(--danger);
}
.sat--status.light {
    background-color: var(--bg-secondary);
    color: var(--text-grey);
}
.sat--status.primary {
    background-color: var(--primary-light-bg);
    color: var(--primary);
}
.status--dots {
    height: 6px;
    width: 6px;
    border-radius: 50%;
    display: block;
}
.result {
    height: 42px;
    width: 42px;
    border-radius: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.result.success {
    background-color: var(--success-secondary-bg);
}
.result.danger {
    background-color: var(--danger-secondary-bg);
}
.status--dots.warning {
    background-color: var(--warning);
}
.status--dots.danger {
    background-color: var(--danger);
}
/* texts */
.text--primary {
    color: #161616 !important;
}
.text--secondary {
    color: #222529 !important;
}
.text--muted {
    color: #868a94 !important;
}
.text--light {
    color: #b2aebf !important;
}
.text--grey {
    color: #5d6370 !important;
}
.text--danger {
    color: var(--danger) !important;
}
.text--green {
    color: var(--success) !important;
}
/* fonts */
.fs-12 {
    font-size: 12px;
}
.fs-14 {
    font-size: 14px;
}
.fs-16 {
    font-size: 16px;
}
.fs-18 {
    font-size: 18px;
}
/* tabs */
.sell--tabs {
    margin-block: 10px 20px;
}
.sell--tabs .nav-tabs {
    gap: 8px;
}
.sell--tabs .nav-tabs .nav-link {
    border-color: var(--border-light);
    background-color: var(--color-white);
    padding: 7px 14px;
    border-radius: 20px;
    color: var(--text-grey);
    font-weight: 400;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.sell--tabs .nav-tabs .nav-link.active {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--color-white);
}
.sell--tabs .nav-link .count {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    width: 18px;
    background-color: var(--bg-primary);
    border-radius: 50%;
    font-size: 9px;
}
.sell--tabs .nav-link.done {
    background-color: var(--success-bg);
    border-color: var(--success-bg);
    color: var(--success);
}
.sell--tabs .nav-link.done .count {
    background-color: var(--success);
    color: var(--color-white);
    font-size: 0;
    position: relative;
}
.sell--tabs .nav-link.done .count::after {
    content: "✓";
    font-size: 12px;
    font-weight: bold;
}

.sell--tabs .nav-link.active .count {
    background-color: #d4ecfa;
    color: #1c6a9b;
    font-size: 9px;
}
.sell--tabs .nav-link.active .count::after {
    display: none;
}

/* table */
.table--dashboard-sell {
    margin-top: 20px;
    max-height: 405px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.table--dashboard-sell table th {
    padding: 10px;
    background-color: var(--bg-primary);
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
}
.table--dashboard-sell table td {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    padding: 10px;
}
.quick--action {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 8px;
    border-radius: 12px;
    background-color: var(--primary);
    padding: 10px;
    color: var(--color-white);
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    line-height: 20px;
}
.recent--activity--list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    scrollbar-width: thin;
    max-height: 207px;
}
.recent--activity {
    display: flex;
    align-items: start;
    justify-content: start;
    gap: 8px;
    padding: 10px;
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 14px;
    line-height: 20px;
}
.search--filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.search--filters select {
    max-width: 168px;
    font-weight: 400;
    font-size: 14px;
    padding-block: 10px;
}
.listing--cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}
.listing--cards .valut--card {
    display: flex;
    align-items: center;
    gap: 12px;
}
.listing--cards .valut--card .title--car {
    font-weight: 600;
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary);
    font-family: "Lato-bold";
    margin-bottom: 0px;
}
.listing--cards .valut--card .value {
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 16px;
    line-height: 24px;
    color: var(--text-secondary);
    width: 141px;
}
.specs--lisitng {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 400;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-black);
}

.listing--cards .valut--card .dots {
    cursor: pointer;
}
.listing--cards .valut--card .dots .dropdown-menu {
    min-width: 109px;
    max-width: 109px;
    padding: 0px;
    border-radius: 8px;
    border: none;
    box-shadow: 0px 0px 8px 0px #2f2b4333;
}
.listing--cards .valut--card .dots .dropdown-menu li {
    padding: 9px;
}
.listing--cards .valut--card .dots .dropdown-menu li:hover {
    background-color: var(--primary-bg);
}
.listing--cards .valut--card .dots .dropdown-menu li.active,
.listing--cards .valut--card .dots .dropdown-menu li:active {
    background-color: var(--primary-light-bg);
}
.chat--link {
    background-color: var(--bg-primary);
    color: var(--color-dark);
    border-radius: 8px;
    padding: 7px 8px;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.container.mw-760 {
    max-width: 760px !important;
}
.settings .form-control {
    background-color: var(--bg-primary);
    color: var(--color-dark);
    border-color: var(--bg-secondary);
    padding: 8px 12px;
}
.settings .form-select {
    background-color: var(--bg-primary);
    color: var(--color-dark);
    border-color: var(--bg-secondary);
    padding: 8px 12px;
}
.settings label {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-dark);
    margin-bottom: 6px;
}
.settings .form-control:focus {
    outline: none;
    box-shadow: none;
}
.profile--seller {
    display: flex;
    align-items: center;
    gap: 10px;
}
.profile--seller .static--profile {
    height: 64px;
    width: 64px;
    border-radius: 129px;
    padding: 14px;
    font-weight: 600;
    font-family: "Lato-bold";
    font-size: 25px;
    line-height: 36px;
    color: var(--color-white);
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile--image img {
    display: none;
    border-radius: 128px;
    object-fit: cover;
}
.require--item {
    padding: 10px 12px;
    background-color: var(--bg-primary);
    color: var(--color-dark);
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    text-transform: capitalize;
}
.upload-box {
    border: 2px dashed #d6d6d6;
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    background: #fafafa;
    transition: 0.3s;
    cursor: pointer;
}

.upload-box.dragover {
    border-color: #2d6cdf;
    background: #f0f6ff;
}

.upload-icon {
    font-size: 28px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-link {
    color: var(--primary);
    font-weight: 600;
    cursor: pointer;
    font-size: 14px;
    line-height: 20px;
}

.upload-content p {
    margin: 12px 0 4px;
    color: var(--text-grey);
}

.upload-content small {
    color: var(--text-muted);
}

.browse-btn {
    margin-top: 15px;
    padding: 10px 20px;
    border: none;
    border-radius: 25px;
    background: #2d6cdf;
    color: white;
    cursor: pointer;
}
.pricing--tips {
    list-style: disc;
    padding-left: 20px;
    font-weight: 500;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-dark);
    margin-bottom: 0px;
}
.photos--addcar {
    gap: 16px;
}
.photos--addcar img {
    border-radius: 16px;
    object-fit: cover;
    width: 165px;
    height: 165px;
}
/* login page */
.login-container {
    width: 500px;
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.login-container h2 {
    text-align: center;
    font-size: 30px;
    line-height: 26px;
}

.login-container img {
    width: 120px;
    margin-bottom: 25px;
}

.input-group {
    margin-bottom: 20px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
    color: #333;
}

.input-group input {
    width: 100%;
    padding: 14px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
}

.login-btn {
    width: 100%;
    padding: 14px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: 0.3s;
}

.login-btn:hover {
    background: #0056b3;
}

.login--container-wrapper {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.cmn-drp .select-input-cmn {
    background-color: var(--bg-primary);
    border-color: var(--bg-secondary);
}
.cmn-drp .select-input-cmn span {
    font-weight: 500;
    font-size: 14px;
}
/* Animation */
@keyframes fadeSlide {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes elasticSlide {
    0% {
        transform: translateY(40px);
        opacity: 0;
    }
    60% {
        transform: translateY(-10px);
    }
    80% {
        transform: translateY(5px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
@keyframes fadeScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
@keyframes slideLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes slideRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes blurFade {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}
@keyframes rotateFade {
    from {
        opacity: 0;
        transform: rotate(-5deg) scale(0.95);
    }
    to {
        opacity: 1;
        transform: rotate(0deg) scale(1);
    }
}
@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    60% {
        opacity: 1;
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes flipIn {
    from {
        opacity: 0;
        transform: rotateY(90deg);
    }
    to {
        opacity: 1;
        transform: rotateY(0);
    }
}