:root {
--indigo: #6366F1;
--dark-blue: #0F172A;
}

.web-page-bg {
background-color: #F8FAFC;
}

/* Hero Section */
.web-hero {
padding: 160px 0 100px;
background: radial-gradient(circle at 0% 0%, rgba(99, 102, 241, 0.08) 0%, transparent 40%);
}

.badge-tech {
display: inline-block;
padding: 8px 20px;
background: rgba(99, 102, 241, 0.1);
color: var(--indigo);
border-radius: 50px;
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}

/* Quote Box */
.quote-box {
border-right: 4px solid var(--indigo);
padding: 10px 25px;
background: rgba(99, 102, 241, 0.03);
border-radius: 0 15px 15px 0;
}

/* Package Cards */
.package-card {
background: white;
border-radius: 25px;
border: 1px solid #E2E8F0;
transition: all 0.4s ease;
}

.package-card:hover {
transform: translateY(-10px);
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.08);
}

.featured-web {
border: 2px solid var(--indigo);
transform: scale(1.05);
}

.space-y-3 li {
margin-bottom: 15px;
}

/* Experience Section (Tech Pattern) */
.tech-pattern {
background: linear-gradient(135deg, var(--dark-blue) 0%, #1E293B 100%);
position: relative;
overflow: hidden;
}

.tech-pattern::before {
content: "";
position: absolute;
width: 100%; height: 100%;
background-image: url("https://www.transparenttextures.com/patterns/carbon-fibre.png");
opacity: 0.1;
top: 0; left: 0;
}

/* Form Controls */
.form-control:focus, .form-select:focus {
border-color: var(--indigo);
box-shadow: 0 0 0 0.25rem rgba(99, 102, 241, 0.1);
}

/* Container for the logos */
.logos-wrapper {
overflow: hidden;
position: relative;
width: 100%;
padding: 20px 0;
}

/* The track that moves */
.logos-track {
display: flex;
width: calc(250px * 14); /* تعداد کل لوگوها ضربدر عرض هر کدام */
animation: scrollLogos 30s linear infinite;
}

.logo-item {
width: 250px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
filter: grayscale(100%);
opacity: 0.6;
transition: 0.4s;
}

.logo-item:hover {
filter: grayscale(0%);
opacity: 1;
}

.logo-item img {
height: 40px;
width: auto;
}

.logo-item span {
font-weight: 600;
color: #475569;
font-size: 0.9rem;
}

/* Keyframes for the animation */
@keyframes scrollLogos {
0% { transform: translateX(0); }
100% { transform: translateX(calc(-250px * 7)); } /* نصف طول تراک برای لوپ بی‌نهایت */
}

/* ریورز کردن انیمیشن برای زبان فارسی (چپ به راست در RTL) */
[dir="rtl"] .logos-track {
animation: scrollLogosRTL 30s linear infinite;
}

@keyframes scrollLogosRTL {
0% { transform: translateX(0); }
100% { transform: translateX(calc(250px * 7)); }
}

/* Security Section Styling */
.bg-dark-blue {
background-color: #050b1a !important;
}

.security-card {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 40px 30px;
border-radius: 30px;
transition: all 0.4s ease;
height: 100%;
}

.security-card:hover {
background: rgba(99, 102, 241, 0.05);
border-color: var(--indigo);
transform: translateY(-5px);
}

.security-icon-sm {
width: 45px;
height: 45px;
background: var(--indigo);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}

/* افکت نور ملایم پشت بخش امنیت */
.security-layers-wrapper {
position: relative;
}

.security-layers-wrapper::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
background: var(--indigo);
filter: blur(150px);
opacity: 0.1;
z-index: 0;
pointer-events: none;
}

.price-tag{
	background: linear-gradient(135deg, #6366f1, #ec4899);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}