/* --- General Setup & Variables --- */
:root { /* Dark Theme Defaults */
    --primary-color: #8A2BE2; --secondary-color: #4A00E0; --primary-rgb: 138, 43, 226; --background-color: #0f0f1a;
    --text-color: #e0e0e0; --card-bg-color: rgba(23, 23, 33, 0.7); --border-color: rgba(255, 255, 255, 0.1);
    --header-bg: rgba(15, 15, 26, 0.6); --aurora-1: #4a00e0; --aurora-2: #8e2de2;
}
[data-theme="light"] {
    --primary-color: #6D28D9; --secondary-color: #4F46E5; --primary-rgb: 109, 40, 217; --background-color: #f9f9fd;
    --text-color: #212121; --card-bg-color: rgba(255, 255, 255, 0.7); --border-color: rgba(0, 0, 0, 0.1);
    --header-bg: rgba(249, 249, 253, 0.6); --aurora-1: #A855F7; --aurora-2: #6366F1;
}

/* --- Base & Aurora Background --- */
@keyframes aurora { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at top, var(--aurora-1), transparent), radial-gradient(ellipse at bottom, var(--aurora-2), transparent); background-size: 200% 200%; opacity: 0.3; z-index: -1; animation: aurora 15s ease infinite; transition: background 0.5s; }
* { margin: 0; padding: 0; box-sizing: border-box; scroll-behavior: smooth; }
body { font-family: 'Vazirmatn', sans-serif; background-color: var(--background-color); color: var(--text-color); line-height: 1.7; transition: background-color 0.5s, color 0.5s; cursor: none; overflow-x: hidden; }

/* --- Inverted Custom Cursor --- */
.cursor-dot, .cursor-outline { position: fixed; top: 0; left: 0; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: difference; }
.cursor-dot { width: 8px; height: 8px; background-color: white; }
.cursor-outline { width: 40px; height: 40px; border: 2px solid white; transition: transform 0.2s ease-out, width 0.3s ease, height 0.3s ease, border-width 0.3s ease; }
.cursor-outline.hovered { transform: translate(-50%, -50%) scale(1.3); border-width: 1px; }

/* --- Header & Theme Toggle --- */
/* --- Header & Theme Toggle (with NEW Hover Effect) --- */
header {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    background-color: var(--header-bg);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid var(--border-color);
}
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 2rem;
}
.logo {
    font-size: 1.6rem;
    font-weight: 900;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-links {
    display: flex;
    list-style: none;
    gap: 15px; /* Adjust gap for the new design */
}

/* NEW Hover Effect Styling */
.nav-links a {
    position: relative;
    z-index: 1; /* Keep text on top */
    text-decoration: none;
    color: var(--text-color);
    font-weight: 400;
    padding: 8px 20px; /* Add padding for the background shape */
    border-radius: 50px; /* Make it a pill shape */
    transition: color 0.4s ease-in-out;
}
.nav-links a::before {
    content: '';
    position: absolute;
    inset: 0; /* Cover the entire link */
    background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 50px;
    z-index: -1; /* Place background behind the text */
    
    /* Animation setup */
    transform: scaleX(0);
    transform-origin: right; /* Animate from right to left (for RTL) */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover {
    color: #fff; /* Ensure text is readable on hover */
}
.nav-links a:hover::before {
    transform: scaleX(1); /* Animate to full width on hover */
}

/* Theme Toggle Button Styling */
.theme-toggle {
    background: var(--card-bg-color);
    border: 1px solid var(--border-color);
    width: 80px;
    height: 40px;
    border-radius: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px;
    position: relative;
    
}
.theme-toggle i {
    font-size: 1.5rem;
    z-index: 1;
    transition: color 0.4s ease;
    color: var(--text-color);
}
.theme-toggle::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 4px;
    width: 32px;
    height: 32px;
    background: var(--primary-color);
    border-radius: 50%;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
[data-theme="light"] .theme-toggle::after {
    transform: translateX(38px);
}

/* --- Sections & General Styles --- */
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.spline-container { position: absolute; inset: 0; z-index: 1; }
spline-viewer { outline: none; }
.hero-content { position: relative; z-index: 2; text-align: center; }
h1 { font-size: clamp(2rem, 6vw, 4.5rem); font-weight: 900; line-height: 1.2; text-shadow: 0 5px 20px rgba(0,0,0,0.3); }
.container { max-width: 1100px; margin: 0 auto; padding: 80px 2rem; }
h2 { font-size: clamp(2rem, 5vw, 3rem); text-align: center; margin-bottom: 40px; font-weight: 700; }
.cta-button { background-image: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); color: white; padding: 14px 30px; border-radius: 50px; text-decoration: none; font-weight: bold; border: none; cursor: pointer; transition: all 0.4s ease; box-shadow: 0 5px 15px rgba(var(--primary-rgb), 0.4); display: inline-block;font-family: Vazirmatn;font-size: medium; }
.cta-button:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(var(--primary-rgb), 0.5); }

/* --- Bento Grid Section --- */
.bento-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.bento-item { background-color: var(--card-bg-color); border: 1px solid var(--border-color); padding: 30px; border-radius: 20px; backdrop-filter: blur(10px); transition: transform 0.3s ease, box-shadow 0.3s ease; }
.bento-item:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(var(--primary-rgb), 0.15); }
.main-item { grid-column: span 2; }
.stat-item h4 { font-size: 3rem; font-weight: 900; background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.wide-item { grid-column: span 3; }
.tools-grid { display: flex; justify-content: space-around; align-items: center; font-size: 1.5rem; margin-top: 20px; gap: 20px; flex-wrap: wrap; }
.tools-grid span { display: flex; align-items: center; gap: 8px; }

/* --- Portfolio Slider (Simplified CSS) --- */
#portfolio { padding: 80px 0; overflow: hidden; }
#portfolio .container { padding-bottom: 0;}
.slider-container { position: relative; }
.portfolio-container { width: 100%; overflow: hidden; /* This MUST be hidden to work with JS scrollIntoView */ }
.portfolio-wrapper { display: flex; padding: 2rem; gap: 30px; scroll-behavior: smooth; /* Crucial for smooth animation */ }
.portfolio-item { flex: 0 0 70%; max-width: 70%; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 9; transform-style: preserve-3d; transition: transform 0.5s ease; }
.portfolio-item img { width: 100%; height: 100%; object-fit: cover; }
.overlay { position: absolute; inset: 0; padding: 20px; color: white; background: linear-gradient(to top, rgba(0,0,0,0.9), transparent); opacity: 0; transform: translateY(20px); transition: 0.5s; }
.portfolio-item:hover .overlay { opacity: 1; transform: translateY(0); }
.portfolio-item:hover { transform: perspective(1000px) rotateY(5deg) rotateX(5deg) scale(1.02); }
.slider-controls { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; display: flex; justify-content: space-between; padding: 0 40px; pointer-events: none; z-index: 10; }
#slide-prev, #slide-next { pointer-events: all; background-color: var(--card-bg-color); color: var(--text-color); border: 1px solid var(--border-color); width: 50px; height: 50px; border-radius: 50%; font-size: 1.2rem; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease; }
#slide-prev:hover, #slide-next:hover { background-color: var(--primary-color); color: white; transform: scale(1.1); }
#slide-prev:disabled, #slide-next:disabled { opacity: 0.4; cursor: not-allowed; transform: scale(1); }

/* --- Contact Form --- */
.content-wrapper { background-color: var(--card-bg-color); border: 1px solid var(--border-color); padding: 40px; border-radius: 20px; backdrop-filter: blur(10px); text-align: center; }
.contact-form { display: flex; flex-direction: column; gap: 15px; max-width: 600px; margin: 30px auto 0; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px 15px; border: 1px solid var(--border-color); border-radius: 8px; background-color: rgba(0,0,0,0.2); color: var(--text-color); font-family: 'Vazirmatn', sans-serif; font-size: 1rem; transition: border-color 0.3s, box-shadow 0.3s; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.3); }
.contact-form textarea { resize: vertical; }

/* --- Footer --- */
footer { text-align: center; padding: 20px; margin-top: 40px; }

/* --- Animations & Responsive --- */
.fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.burger { display: none; z-index: 1001;}
.burger div { width: 25px; height: 3px; background-color: var(--text-color); margin: 5px; transition: all 0.3s ease; }

@media (max-width: 768px) {
    body { cursor: auto; }
    .cursor-dot, .cursor-outline { display: none; }
    .nav-links { position: fixed; right: -100%; top: 0; height: 100vh; background-color: var(--background-color); width: 70%; flex-direction: column; align-items: center; justify-content: center; transition: right 0.5s ease-in-out; gap: 40px; box-shadow: -10px 0 30px rgba(0,0,0,0.2); z-index: 1000; }
    .nav-active { right: 0; }
    .burger { display: block; }
    .bento-grid { grid-template-columns: 1fr; }
    .main-item, .wide-item { grid-column: span 1; }
    .portfolio-item { flex-basis: 90%; max-width: 90%; }
    .slider-controls { padding: 0 10px; }
}
#cssicon{
    width: 24px;
    height: 24px;
    
}
#css_text{
    margin-bottom: 8px;
}
#htmlicon{
     width: 24px;
    height: 24px;
}
#htmltext{
    margin-bottom: 8px;
}
#phpicon{
     width: 24px;
    height: 24px;
}
#phptext{
    margin-bottom: 8px;
}
#jsicon{
      width: 24px;
    height: 24px;
}
#jstext{
    margin-bottom: 8px;
}
#info2{
    padding-top: 200px;
}
#info{
    padding-top: 150px;
}
.contact-bento-container {
    padding: 50px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* کارت‌ها کنار هم */
    gap: 20px;
    margin-top: 30px;
}
.contact-item.visible {
    opacity: 1;
    transform: translateY(0);
}
.contact-item {
    text-decoration: none;
    color: inherit;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        opacity: 0;
    transform: translateY(40px);
    transition: all 0.6s ease;
}

/* هاور کارت‌ها */
.contact-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.2);
}

.icon-box {
    font-size: 40px;
    margin-bottom: 15px;
}

.contact-text h3 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.contact-text span {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* اگر خواستی یکی از کارت‌ها (مثلاً اینستاگرام) دو برابر بقیه باشه */
@media (min-width: 768px) {
    .insta-card {
        grid-column: span 2; /* این کارت دو ستون رو می‌گیره */
        flex-direction: row;
        gap: 20px;
    }
}
#rohamlogo{
    height: 100px;
    width: 100px;
}
/* حالت دارک */
[data-theme="dark"] #htmlicon,
[data-theme="dark"] #cssicon,
[data-theme="dark"] #jsicon,
[data-theme="dark"] #phpicon{
    filter: brightness(0) invert(1);
}

/* حالت روشن */
[data-theme="light"] #htmlicon,
[data-theme="light"] #cssicon,
[data-theme="light"] #jsicon,
[data-theme="light"] #phpicon{
    filter: brightness(0);
}