@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

:root {
    --webnexon-dark-bg: #030712;
    --webnexon-card-bg: rgba(255, 255, 255, 0.03);
    --webnexon-card-border: rgba(255, 255, 255, 0.08);
    --webnexon-card-hover-border: rgba(59, 130, 246, 0.4);
    --webnexon-primary-blue: #3b82f6; 
    --webnexon-light-blue: #60a5fa; 
    --webnexon-text-gray: #9ca3af; 
    --webnexon-header-shadow: 0 0 8px rgba(59, 130, 246, 0.8);
    --webnexon-header-dot-shadow: 0 0 12px 4px rgba(96, 165, 250, 0.8);
    --webnexon-gradient-line: linear-gradient(90deg, transparent, var(--webnexon-primary-blue), var(--webnexon-light-blue), var(--webnexon-primary-blue), transparent);
    --webnexon-card-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
    --webnexon-font-family: 'Vazirmatn', Tahoma, sans-serif;
}

.why-webnexon-section {
    background-color: var(--webnexon-dark-bg);
    padding: 100px 20px;
    direction: rtl;
    font-family: var(--webnexon-font-family);
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    position: relative; 
    overflow: hidden; 
}

.why-webnexon-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 70% 20%, rgba(16, 185, 129, 0.05) 0%, transparent 50%);
    z-index: 1;
}

.why-header {
    margin-bottom: 60px;
    position: relative; 
    z-index: 2;
    padding: 0 15px; 
}

.why-title {
    color: #ffffff;
    font-size: 3.2rem; 
    font-weight: 700;
    margin-bottom: 15px;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
}

.webnexon-title-glow-line { 
    width: 160px; 
    height: 3px; 
    background: var(--webnexon-gradient-line); 
    margin: 0 auto; 
    position: relative; 
    box-shadow: var(--webnexon-header-shadow);
    border-radius: 2px;
}

.webnexon-title-glow-line::after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
    right: -15px; 
    width: 12px; 
    height: 12px; 
    background-color: #93c5fd; 
    box-shadow: var(--webnexon-header-dot-shadow);
    border-radius: 50%;
}

.why-grid {
    display: grid;
    /* این خط تضمین می‌کند که ۴ کارت در مانیتورهای دسکتاپ همیشه در یک ردیف باشند */
    grid-template-columns: repeat(4, 1fr); 
    gap: 25px; 
    max-width: 1400px; /* تنظیم شده برای قرارگیری یکپارچه در مانیتورهای مدرن */
    margin: 0 auto;
    padding: 0 20px; 
    box-sizing: border-box;
    position: relative; 
    z-index: 2;
}

.why-card {
    background: var(--webnexon-card-bg);
    border: 1px solid var(--webnexon-card-border);
    border-radius: 24px; 
    padding: 40px 20px; 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), border-color 0.4s ease-in-out, background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--webnexon-card-shadow);
    box-sizing: border-box;
}

.why-card:hover {
    transform: translateY(-12px); 
    border-color: var(--webnexon-card-hover-border);
    background: rgba(255, 255, 255, 0.06); 
    box-shadow: 0 0 35px rgba(59, 130, 246, 0.5), var(--webnexon-card-shadow); 
}

.why-icon-box {
    width: 90px; 
    height: 90px; 
    margin-bottom: 25px; 
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6)); 
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    position: relative;
    z-index: 3; 
}

.why-card:hover .why-icon-box {
    transform: scale(1.15) rotate(5deg); 
}

.why-svg-icon {
    max-width: 80%; 
    max-height: 80%;
    display: block;
}

.why-svg-icon path, .why-svg-icon circle, .why-svg-icon text {
    stroke: var(--webnexon-primary-blue); 
    fill: rgba(59, 130, 246, 0.2); 
}
.why-svg-icon circle[cx="12"] { fill: rgba(96, 165, 250, 0.3); } 
.why-svg-icon path[d="M9 12L11 14L15 10"] { stroke: #ffffff; } 
.why-svg-icon path[d="M17 21V19..."], .why-svg-icon circle[cx="9"] { 
    stroke: var(--webnexon-primary-blue); 
    fill: rgba(59, 130, 246, 0.2); 
}
.why-svg-icon path[d="M23 21V19..."], .why-svg-icon path[d="M16 3.13..."] { 
    stroke: var(--webnexon-light-blue); 
}
.why-svg-icon path[d="M13 2L3 14..."] { 
    stroke: var(--webnexon-primary-blue); 
}


.why-card-title {
    color: #ffffff;
    font-size: 20px; 
    font-weight: 700;
    margin-bottom: 15px; 
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
}

.why-card-desc {
    color: var(--webnexon-text-gray);
    font-size: 14.5px; 
    line-height: 1.9; 
    margin: 0;
}

/* Responsive Adjustments */
@media (max-width: 1400px) {
    .why-title { font-size: 3rem; }
    .why-grid { gap: 20px; }
    .why-card { padding: 35px 15px; }
    .why-icon-box { width: 80px; height: 80px; }
    .why-card-title { font-size: 19px; }
    .why-card-desc { font-size: 13.5px; }
}

@media (max-width: 1024px) {
    .why-title { font-size: 2.8rem; }
    .why-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .why-card-title { font-size: 18px; }
}

@media (max-width: 768px) {
    .why-webnexon-section { padding: 60px 15px; }
    .why-header { margin-bottom: 40px; }
    .why-title { font-size: 2.5rem; }
    .webnexon-title-glow-line { width: 120px; height: 2px; }
    .webnexon-title-glow-line::after { width: 10px; height: 10px; right: -10px; }
    .why-grid { grid-template-columns: 1fr; gap: 15px; }
    .why-card { padding: 30px 15px; }
    .why-icon-box { width: 70px; height: 70px; margin-bottom: 20px; }
    .why-card-title { font-size: 17px; }
    .why-card-desc { font-size: 13px; line-height: 1.7; }
}