:root {
    --purple: #4f46e5; /* text-indigo-500 */
    --green: #10b981; /* text-indigo-500 */
}

.antialiased {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

*, ::after, ::before {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: #e5e7eb;
}

body, html {
    direction: rtl;
}

html {
    font-size: 16px; /* 1rem = 16px */
}

body {
    background: #f9fafb;
    color: #111827;
    font-family: "YekanBakh", serif;
}

body::selection {
    background-color: #e0e7ff;
    color: #312e81;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border: none;
}

/* colors */
.purple {
    color: var(--purple)
}

.green {
    color: var(--green)
}

.min-h-screen {
    min-height: 100vh;
}

.flex {
    display: flex;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

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

/* font-weight */
.font-bold {
    font-weight: bold;
}

header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px); /* blur-md equivalent */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid #f3f4f6; /* border-gray-100 */
    padding-left: 1rem; /* px-4 = 16px */
    padding-right: 1rem; /* px-4 = 16px */
    height: 5rem; /* h-20 = 80px (5 * 16px) */
}

header .header-content-wrapper {
    width: 100%;
}

header .header-right {
    column-gap: 2rem;
}

header .search-wrapper {
    position: relative;
    width: 25rem;
    display: flex;
    align-items: center;
    background-color: #f9fafb; /* bg-gray-50 */
    border: 1px solid #e5e7eb; /* border border-gray-200 */
    border-radius: 1rem; /* rounded-2xl = 16px */
    /* px-5 = 20px */
    /* py-2.5 = 10px */
    padding: 0.625rem 1.25rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
}

header .search-wrapper label,
header .search-wrapper input {
    width: 100%;
}

header .search-wrapper input {
    background-color: transparent;
    border: none;
    width: 100%;
    margin-right: 0.75rem; /* ml-3 = 12px */
    font-size: 0.875rem; /* text-sm = 14px */
    line-height: 1.25rem;
    color: #111827; /* text-gray-900 */
    font-weight: 400; /* font-bold */
}

header .search-wrapper input :focus {
    outline: none;
    ring-width: 0px;
}

header .search-wrapper input ::placeholder {
    color: #9ca3af; /* placeholder:text-gray-400 */
    font-weight: 500; /* placeholder:font-medium */
}

header .header-left {
    column-gap: 0.5rem;
}

header .header-left .mini-cart-btn {
    padding: 0.75rem; /* p-2.5 = 10px (2.5 * 0.25rem) */
    color: #4b5563; /* text-gray-600 */
    border-radius: 0.75rem; /* rounded-xl */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
}

header .header-left .mini-cart-btn:hover {
    color: #4f46e5; /* hover:text-indigo-600 */
    background-color: #eef2ff; /* hover:bg-indigo-50 */
}

header .mini-cart-btn-indicator {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1.25rem;
    height: 1.25rem;
    background-color: #10b981;
    color: #ffffff;
    font-size: 10px;
    padding: 0.625rem;
    font-weight: 900;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 2px #ffffff;
}

/* Alternative ring implementation using outline */
header .mini-cart-btn-indicator::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 9999px;
    border: 2px solid #ffffff; /* ring-2 ring-white */
}

header .my-account-btn {
    gap: 0.625rem; /* gap-2.5 = 10px */
    /* px-5 = 20px */
    /* py-3 = 12px */
    padding: 0.75rem 1.25rem;
    border-radius: 1rem; /* rounded-2xl = 16px */
    font-weight: 600; /* font-black */
    font-size: 0.75rem; /* text-xs = 12px */
    line-height: 1rem;
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
    color: #4b5563; /* text-gray-600 */
}

header .my-account-btn:hover {
    color: #4f46e5; /* hover:text-indigo-600 */
    background-color: #eef2ff; /* hover:bg-indigo-50 */
}
header .my-account-btn span {
    font-size: 0.875rem; /* text-sm = 14px */
    line-height: 1.25rem;
    font-weight: 700; /* font-bold */
}

header .sign-up-btn {
    padding: 0.75rem 1.75rem;
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff; /* text-white */
    font-size: 0.75rem; /* text-xs = 12px */
    line-height: 1rem;
    font-weight: 600; /* font-black */
    border-radius: 1rem; /* rounded-2xl = 16px */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
    display: flex; /* flex */
    align-items: center; /* items-center */
    gap: 0.5rem; /* gap-2 = 8px */
}


header .sign-up-btn:hover {
    background-color: #4338ca;
}

header .sign-up-btn:active {
    transform: scale(0.95);
}

header .sign-up-btn:focus {
    outline: 2px solid #4f46e5;
    outline-offset: 2px;
}

/* intro section */
section.intro {
    padding-top: 75px;
    row-gap: 1rem;
}

.intro-blur-circle-1 {
    position: absolute;
    top: -20%; /* top-[-20%] */
    left: -15%; /* left-[5%] */
    width: 500px; /* w-[500px] */
    height: 500px; /* h-[500px] */
    background-color: rgba(199, 210, 254, 0.2); /* bg-indigo-200/20 */
    border-radius: 9999px; /* rounded-full */
    mix-blend-mode: multiply; /* mix-blend-multiply */
    filter: blur(100px); /* filter blur-[100px] */
    z-index: -1;

    /* animate-pulse */
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.intro-blur-circle-2 {
    position: absolute;
    bottom: -10%; /* bottom-[-10%] */
    right: -25%; /* right-[5%] */
    width: 600px; /* w-[600px] */
    height: 600px; /* h-[600px] */
    background-color: rgba(209, 250, 229, 0.3); /* bg-emerald-100/30 */
    border-radius: 9999px; /* rounded-full */
    mix-blend-mode: multiply; /* mix-blend-multiply */
    filter: blur(120px); /* filter blur-[120px] */
    z-index: -1;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.intro-slogan {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem; /* gap-3 = 12px */
    /* px-4 = 16px */
    /* py-2 = 8px */
    padding: 0.5rem 1rem;
    border-radius: 1rem; /* rounded-2xl = 16px */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    color: #4338ca; /* text-indigo-700 */
    font-size: 0.75rem; /* text-xs = 12px */
    line-height: 1rem;
    font-weight: 500; /* font-black */
    margin-bottom: 1rem; /* mb-4 = 16px */
}

.intro-heading {
    font-size: 4rem; /* text-5xl = 48px */
    font-weight: 900; /* font-black */
    color: #111827; /* text-gray-900 */
    line-height: 1.1;
}

.intro-heading span {
    background-image: linear-gradient(to right, #4f46e5, #6366f1, #10b981); /* from-indigo-600 via-indigo-500 to-emerald-500 */
    -webkit-background-clip: text; /* bg-clip-text */
    background-clip: text; /* bg-clip-text */
    color: transparent; /* text-transparent */
}

section.intro .subheading {
    font-size: 1.1rem;
    line-height: 1.75rem;
    color: #6b7280;
    max-width: 38rem;
    margin-left: auto;
    margin-right: auto;
    font-weight: 300;
}

.intro-search-form {
    margin-top: 2.5rem; /* mt-10 = 40px */
    max-width: 42rem; /* max-w-2xl = 672px */
    position: relative; /* relative */
}

.intro-search-form .blur-background {
    position: absolute;
    top: -0.25rem; /* -inset-1 = -4px در همه جهات */
    right: -0.25rem;
    bottom: -0.25rem;
    left: -0.25rem;
    background-image: linear-gradient(to right, #4f46e5, #10b981); /* from-indigo-600 to-emerald-500 */
    border-radius: 28px; /* rounded-[28px] - مقدار سفارشی */
    filter: blur(20px); /* blur = 4px */
    opacity: 0.1; /* opacity-20 */
    transition: opacity 1s ease; /* transition duration-1000 */
    animation: pulse-glow 2s ease-in-out infinite;
    transition-duration: 0.2s;
}

@keyframes pulse-glow {
    0%, 100% {
        opacity: 0.2;
    }
    50% {
        opacity: 0.3;
    }
}

.intro-search-form .form-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 35rem;
    padding: 0.625rem; /* p-2.5 = 10px (2.5 × 0.25rem) */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    border-radius: 24px; /* rounded-[24px] - مقدار سفارشی */
    box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.25); /* shadow-2xl shadow-indigo-100/50 */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
}

.intro-search-form .form-wrapper input {
    flex: 1 1 0%; /* flex-1 */
    background-color: transparent; /* bg-transparent */
    border: none; /* border-none */
    color: #1f2937; /* text-gray-800 */
    padding-left: 1rem; /* px-4 = 16px */
    padding-right: 1rem;
    height: 3.5rem; /* h-14 = 56px (14 × 0.25rem = 3.5rem) */
    font-size: 1.125rem; /* text-lg = 18px */
    line-height: 1.75rem;
    font-weight: 300; /* font-medium */
}


.intro-search-form button {
    align-items: center;
    gap: 0.5rem; /* gap-2 = 8px */
    /* px-8 = 32px */
    /* py-4 = 16px */
    padding: 1rem 2rem;
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff; /* text-white */
    font-weight: 600; /* font-black */
    border-radius: 18px; /* rounded-[18px] - مقدار سفارشی */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
    transform: scale(1); /* برای transition transform */
}

.intro-trust-section {
    gap: 0.5rem; /* gap-2 = 8px */
    font-weight: 700; /* font-black */
    color: #9ca3af; /* text-gray-400 */
    font-size: 0.875rem; /* text-sm = 14px */
    line-height: 1.25rem;
    opacity: 0.5;
    margin: 3rem 1rem;
}

/*  service-list */
.service-list {
    width: 100%;
    row-gap: 1.5rem;
}

.service-list .service-list-header {
    gap: 1.5rem;
}

.service-list .service-list-header .service-list-icon {
    width: 2.75rem; /* w-11 = 44px */
    height: 2.75rem; /* h-11 = 44px */
    border-radius: 1rem; /* rounded-2xl = 16px */
    background-color: #ffffff; /* bg-white */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
}

.service-list-header .service-list-title h2 {
    font-size: 1.25rem; /* text-xl = 20px */
    line-height: 1.75rem;
    font-weight: 700; /* font-black */
    color: #111827; /* text-gray-900 */
}

.service-list-header .service-list-title p {
    font-size: 10px; /* text-[10px] */
    color: #9ca3af; /* text-gray-400 */
    font-weight: 500; /* font-black */
    line-height: 1; /* leading-none */
    margin-top: 0.25rem; /* mt-1 = 4px */
}

.service-list-bar {
    overflow-x: auto; /* overflow-x-auto */
    padding-top: 0.25rem; /* py-1 = 4px */
    padding-bottom: 0.25rem;
}

.service-list-bar::-webkit-scrollbar {
    display: none; /* برای مرورگرهای وبکیت */
}

.service-list-bar {
    -ms-overflow-style: none; /* برای IE و Edge */
    scrollbar-width: none; /* برای Firefox */
}

.service-list-bar .service-list-bar-ml {
    position: absolute; /* absolute */
    top: 0; /* top-0 */
    right: 0; /* right-0 */
    height: 100%; /* h-full */
    width: 3rem; /* w-12 = 48px */
    background-image: linear-gradient(to left, #F9FAFB, transparent); /* bg-gradient-to-l from-[#F9FAFB] to-transparent */
    pointer-events: none; /* pointer-events-none */
}

.service-list-bar .service-list-items {
    gap: 0.75rem; /* gap-3 = 12px */
    width: max-content; /* w-max */
}

.service-list-bar .service-list-items .service-list-item {
    flex-shrink: 0; /* flex-shrink-0 */
    display: flex; /* flex */
    align-items: center; /* items-center */
    gap: 0.5rem; /* gap-2 = 8px */
    /* px-6 = 24px */
    /* py-3.5 = 14px */
    padding: 0.875rem 1.5rem;
    border-radius: 1rem; /* rounded-2xl = 16px */
    font-size: 0.875rem; /* text-sm = 14px */
    line-height: 1.25rem;
    font-weight: 700; /* font-bold */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
    border-width: 2px; /* border-2 */
    background-color: #ffffff; /* bg-white */
    color: #4b5563; /* text-gray-600 */
    border-color: #f3f4f6; /* border-gray-100 */
}

.service-list-bar .service-list-items .service-list-item:hover {
    border-color: #e0e7ff; /* hover:border-indigo-100 */
    background-color: #f9fafb; /* hover:bg-gray-50 */
}

.service-list-bar .service-list-items .service-list-item.active {
    background-color: #4f46e5; /* bg-indigo-600 */
    color: #ffffff; /* text-white */
    border-color: #4f46e5; /* border-indigo-600 */
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.1), 0 4px 6px -4px rgba(79, 70, 229, 0.1); /* shadow-lg shadow-indigo-100 */
    transform: scale(1.02); /* scale-[1.02] */
}

.service-list-bar .service-list-items .service-list-item span.service-item-icon {
    white-space: nowrap;
}

.service-list-bar .service-list-items .service-list-item span.service-item-icon {
    font-size: 1.125rem; /* text-lg = 18px */
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr)); /* grid-cols-5 */
    gap: 1rem;
    padding-bottom: 3rem; /* pb-12 = 48px */
}

.service-box {
    position: relative; /* relative */
    background-color: #ffffff; /* bg-white */
    border-radius: 32px; /* rounded-[32px] - مقدار سفارشی */
    padding: 0.25rem; /* p-1 = 4px */
    transition: all 0.5s ease; /* transition-all duration-500 */
    cursor: pointer; /* cursor-pointer */
}

.service-box:hover {
    transform: scale(1.01); /* hover:scale-[1.01] */
}

.service-box:focus-visible {
    outline: none; /* focus-visible:outline-none */
    box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.3); /* focus-visible:ring-4 focus-visible:ring-indigo-500/30 */
}

.service-box::before {
    content: "";
    position: absolute; /* absolute */
    top: 0; /* inset-0 */
    right: 0;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(
            to bottom right,
            rgba(79, 70, 229, 0.1), /* from-indigo-500/10 */ transparent, /* via-transparent */ rgba(16, 185, 129, 0.1) /* to-emerald-500/10 */
    );
    border-radius: 32px; /* rounded-[32px] */
    opacity: 0; /* opacity-0 */
    filter: blur(24px); /* blur-xl */
    -webkit-filter: blur(24px); /* برای سافاری */
    transition: opacity 0.7s ease; /* transition-opacity duration-700 */
}

.service-box:hover::before {
    opacity: 1;
}

.service-box-content {
    position: relative; /* relative */
    background-color: #ffffff; /* bg-white */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    border-radius: 31px; /* rounded-[31px] - مقدار سفارشی */
    padding: 1.25rem; /* p-5 = 20px */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: all 0.5s ease; /* transition-all duration-500 */
    overflow: hidden; /* overflow-hidden */
}

.service-box:hover .service-box-content {
    box-shadow: 0 25px 50px -12px rgba(79, 70, 229, 0.1); /* group-hover:shadow-2xl group-hover:shadow-indigo-500/10 */
    border-color: #e0e7ff; /* group-hover:border-indigo-100 */
}

.service-box-inset-shadow {
    position: absolute; /* absolute */
    top: -2.5rem; /* -top-10 = -40px */
    right: -2.5rem; /* -right-10 = -40px */
    width: 8rem; /* w-32 = 128px */
    height: 8rem; /* h-32 = 128px */
    background-color: #eef2ff; /* bg-indigo-50 */
    border-radius: 9999px; /* rounded-full */
    filter: blur(48px); /* blur-3xl */
    -webkit-filter: blur(48px); /* برای سافاری */
    opacity: 0; /* opacity-0 */
    transition: opacity 0.7s ease; /* transition-opacity duration-700 */
}

.service-box:hover .service-box-inset-shadow {
    opacity: 1; /* group-hover:opacity-100 */
}

.service-box .service-box-content .service-box-content-header {
    display: flex;
    justify-content: space-between; /* justify-between */
    align-items: flex-start; /* items-start */
    margin-bottom: 1rem; /* mb-4 = 16px */
}

.service-box .service-box-content .service-box-content-header .service-thumbnail {
    width: 3.5rem; /* w-14 = 56px */
    height: 3.5rem; /* h-14 = 56px */
    background-image: linear-gradient(
            to bottom right,
            #f9fafb, /* from-gray-50 */ #ffffff /* to-white */
    );
    border-radius: 20px; /* rounded-[20px] */
    display: flex; /* flex */
    align-items: center; /* items-center */
    justify-content: center; /* justify-center */
    padding: 0.75rem; /* p-3 = 12px */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
    transition: all 0.5s ease; /* transition-all duration-500 */
}

.service-box :hover .service-box-content .service-box-content-header .service-thumbnail {
    border-color: #c7d2fe; /* group-hover:border-indigo-200 */
    background-color: #eef2ff; /* group-hover:bg-indigo-50 */
    background-image: none; /* گرادیان در hover غیرفعال می‌شود */
    transition: all 0.7s ease;
}

.service-box-content .service-box-content-header .service-thumbnail img.service-thumbnail-img {
    width: 100%; /* w-full */
    height: 100%; /* h-full */
    object-fit: contain; /* object-contain */
    transition: transform 0.5s ease; /* transition-transform duration-500 */
    z-index: 1;
}

.service-box-content .service-box-content-header .service-thumbnail .service-thumbnail-backdrop {
    z-index: 0;
    position: absolute;
    width: 60%;
    height: 60%;
    opacity: 0.2;
    filter: blur(10px);
    transition: all 0.7s ease;
}

.service-box:hover .service-box-content .service-box-content-header .service-thumbnail .service-thumbnail-backdrop {
    width: 60%;
    height: 60%;
    opacity: 0.8;
    filter: blur(10px);
}

.service-box:hover .service-box-content .service-box-content-header .service-thumbnail img {
    transform: scale(1.1); /* group-hover:scale-110 */
}
.service-box .service-box-content .service-box-content-header .service-thumbnail:hover .service-thumbnail-backdrop{
    opacity: 1;
    transform: scale(1.2);
    filter: blur(8px);
}

.service-box .service-box-content .service-box-content-header .service-thumbnail .certificate-badge {
    bottom: -0.25rem; /* -bottom-1 = -4px */
    left: -0.25rem; /* -right-1 = -4px */
    width: 1.25rem; /* w-5 = 20px */
    height: 1.25rem; /* h-5 = 20px */
    background-color: #ffffff; /* bg-white */
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); /* shadow-md */
    border: 1px solid #f9fafb; /* border border-gray-50 */
}

.service-box-badge-list {
    display: flex;
    flex-direction: column; /* flex-col */
    align-items: flex-end; /* items-end */
    gap: 0.375rem; /* gap-1.5 = 6px */
}

.service-box-badge-list .service-box-badge-list-item-new {
    background-color: rgba(254, 243, 199, 0.8); /* bg-amber-100/80 */
    color: #b45309; /* text-amber-700 */
    font-size: 10px; /* text-[8px] */
    font-weight: 500; /* font-black */
    /* px-2.5 = 10px */
    /* py-1 = 4px */
    padding: 0.25rem 0.625rem;
    border-radius: 9999px; /* rounded-full */

    gap: 0.25rem; /* gap-1 = 4px */
    backdrop-filter: blur(4px); /* backdrop-blur-sm */
    -webkit-backdrop-filter: blur(4px); /* برای سافاری */
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; /* animate-pulse */
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.service-box-badge-list .service-box-badge-list-item-success {
    background-color: #eef2ff; /* bg-indigo-50 */
    color: #4f46e5; /* text-indigo-600 */
    font-size: 10px; /* text-[8px] */
    font-weight: 500; /* font-black */
    /* px-2.5 = 10px */
    /* py-1 = 4px */
    padding: 0.25rem 0.625rem;
    border-radius: 9999px; /* rounded-full */
    gap: 0.25rem; /* gap-1 = 4px */
}

.service-box-title-wrapper .service-box-title {
    font-size: 1.125rem; /* text-lg = 18px */
    line-height: 1.75rem;
    font-weight: 900; /* font-black */
    color: #111827; /* text-gray-900 */
    transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-colors */
}

.service-box:hover .service-box-title-wrapper .service-box-title {
    color: #4f46e5; /* group-hover:text-indigo-600 */
}

.service-box-title-wrapper {
    margin-bottom: 1.5rem;
}

.service-box-title-wrapper .service-box-subtitle-wrapper {
    margin-top: 0.125rem; /* mt-0.5 = 2px */
    column-gap: 0.5rem;
}

.service-box-title-wrapper .service-box-subtitle-wrapper .service-box-category-name {
    font-size: 10px; /* text-[9px] */
    font-weight: 600; /* font-black */
    color: #9ca3af; /* text-gray-400 */
}

.service-box-title-wrapper .service-box-subtitle-wrapper .service-box-stat {
    gap: 0.25rem; /* gap-1 = 4px */
    font-size: 10px; /* text-[9px] */
    font-weight: 600; /* font-bold */
    color: #9ca3af; /* text-gray-400 */
}

.dot {
    width: 0.25rem; /* w-1 = 4px */
    height: 0.25rem; /* h-1 = 4px */
    border-radius: 9999px; /* rounded-full */
    background-color: #e5e7eb; /* bg-gray-200 */
}

.service-box .service-box-meta-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* grid-cols-2 */
    gap: 0.5rem; /* gap-2 = 8px */
    margin-bottom: 1.5rem; /* mb-6 = 24px */
}

.service-box .service-box-meta-list-item {
    background-color: rgba(249, 250, 251, 0.5); /* bg-gray-50/50 */
    border-radius: 0.75rem; /* rounded-xl = 12px */
    padding: 0.625rem; /* p-2.5 = 10px */
    border: 1px solid #f3f4f6; /* border border-gray-100 */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
}

.service-box:hover .service-box-meta-list-item {
    background-color: #ffffff; /* group-hover:bg-white */
    border-color: rgba(224, 231, 255, 0.5); /* group-hover:border-indigo-100/50 */
}

.service-box .service-box-meta-list-item .service-box-meta-list-item-title {
    font-size: 8px; /* text-[8px] */
    font-weight: 900; /* font-black */
    color: #9ca3af; /* text-gray-400 */
    text-transform: uppercase; /* uppercase */
    margin-bottom: 0.125rem; /* mb-0.5 = 2px */
}

.service-box .service-box-meta-list-item .service-box-meta-list-item-number {
    font-size: 1.1rem; /* text-base = 16px */
    line-height: 1.5rem;
    font-weight: 600; /* font-black */
    color: #111827; /* text-gray-900 */
}

.service-box .service-box-meta-list-item .service-box-meta-list-item-text {
    font-size: 9px; /* text-[8px] */
    font-weight: 600; /* font-black */
}

.service-box .service-box-select-btn-wrapper .service-box-select-btn-glow {
    top: -0.125rem; /* -inset-0.5 = -2px در همه جهات */
    right: -0.125rem;
    bottom: -0.125rem;
    left: -0.125rem;
    background-image: linear-gradient(to right, #4f46e5, #10b981); /* from-indigo-600 to-emerald-500 */
    border-radius: 1rem; /* rounded-2xl = 16px */
    filter: blur(4px); /* blur */
    -webkit-filter: blur(4px); /* برای سافاری */
    opacity: 0; /* opacity-0 */
    transition: opacity 0.5s ease; /* transition duration-500 */
}

/* هنگام hover روی group/btn */
.service-box .service-box-select-btn-wrapper:hover .service-box-select-btn-glow {
    opacity: 0.3; /* group-hover/btn:opacity-30 */
}

.service-box .service-box-select-btn-wrapper .select-btn {
    position: relative; /* relative */
    width: 100%; /* w-full */
    height: 3rem; /* h-12 = 48px */
    background-color: #111827; /* bg-gray-900 */
    color: #ffffff; /* text-white */
    border-radius: 1rem; /* rounded-2xl = 16px */
    font-weight: 600; /* font-black */
    font-size: 12px; /* text-[10px] */
    gap: 0.625rem; /* gap-2.5 = 10px */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-all */
}

.service-box .service-box-select-btn-wrapper:hover .select-btn {
    background-color: var(--purple); /* group-hover/btn:bg-indigo-600 */
}

.service-box .service-box-select-btn-wrapper .select-btn-icon {
    width: 1.25rem; /* w-5 = 20px */
    height: 1.25rem; /* h-5 = 20px */
    background-color: rgba(255, 255, 255, 0.1); /* bg-white/10 */
    border-radius: 0.5rem; /* rounded-lg = 8px */
    transform: rotate(180deg);
    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1); /* transition-transform */
}

.service-box .service-box-select-btn-wrapper:hover .select-btn-icon {
    transform: translateX(-0.25rem) rotate(180deg); /* group-hover/btn:translate-x-1 */
}

.service-box .service-box-delivery-time {
    margin-top: 1rem; /* mt-4 = 16px */
    gap: 0.5rem; /* gap-2 = 8px */
}

.service-box .service-box-delivery-time span {
    font-size: 11px; /* text-[8px] */
    font-weight: 500; /* font-black */
    color: #9ca3af; /* text-gray-400 */
}

/* trust section */
.trust-section {
    padding-top: 6rem; /* py-24 = 96px */
    padding-bottom: 6rem;
    position: relative; /* relative */
}

.trust-section .blob-wrapper {
    position: absolute; /* absolute */
    top: 50%; /* top-1/2 */
    left: 50%; /* left-1/2 */
    transform: translate(-50%, -50%); /* -translate-x-1/2 -translate-y-1/2 */
    width: 100%; /* w-full */
    height: 100%; /* h-full */
    z-index: -10; /* -z-10 */
}

.trust-section .blob-1 {
    position: absolute; /* absolute */
    top: 0; /* top-0 */
    right: 0; /* right-0 */
    width: 400px; /* w-[400px] */
    height: 400px; /* h-[400px] */
    background-color: rgba(238, 242, 255, 0.9); /* bg-indigo-50/30 */
    border-radius: 9999px; /* rounded-full */
    filter: blur(120px); /* blur-[120px] */
    -webkit-filter: blur(120px); /* برای سافاری */
}

.trust-section .blob-2 {
    position: absolute; /* absolute */
    bottom: 0; /* bottom-0 */
    left: 0; /* left-0 */
    width: 400px; /* w-[400px] */
    height: 400px; /* h-[400px] */
    background-color: rgba(209, 250, 229, 0.3); /* bg-emerald-50/30 */
    border-radius: 9999px; /* rounded-full */
    filter: blur(120px); /* blur-[120px] */
    -webkit-filter: blur(120px); /* برای سافاری */
}

/* footer */
footer {
    background-color: #ffffff; /* bg-white */
    border-top: 1px solid #f9fafb; /* border-t border-gray-50 */
    padding-top: 5rem; /* py-20 = 80px */
    padding-bottom: 1.5rem;
}
.developer-section{
    margin-top: 3rem;
}
.developer-section p {
    font-size: 10px;
    text-align: left;
    margin-left: 5px;
}
.developer-section span {
    line-height: 1;
}
.developer-section span:last-child {
    color:#9ca3af
}
.developer-section img {
    width: 30px;
    height: auto;
    /*filter: brightness(0) saturate(100%) invert(15%) sepia(100%) saturate(5000%) hue-rotate(220deg) brightness(0.8) contrast(1.2);*/
}