:root {
       --flora-primary: #10b981;
       --flora-primary-dark: #059669;
       --flora-primary-light: #a7f3d0;
       --flora-secondary: #8b5cf6;
       --flora-accent: #f59e0b;
       --flora-text: #1e293b;
       --flora-text-light: #64748b;
       --flora-background: #f0fdf4;
       --flora-white: #ffffff;
       --flora-shadow: 0 25px 50px -12px rgba(16, 185, 129, 0.25);
       --flora-radius: 20px;
       --flora-transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
       --flora-gradient: linear-gradient(135deg, var(--flora-primary) 0%, var(--flora-secondary) 100%);
   }

   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       font-family: 'Vazirmatn', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       background: var(--flora-background);
       color: var(--flora-text);
       line-height: 1.6;
       min-height: 100vh;
       overflow-x: hidden;
       position: relative;
   }

   .container {
       max-width: 1400px;
       margin: 0 auto;
       padding: 1rem;
   }

   .header {
       text-align: center;
       margin-bottom: 2rem;
       position: relative;
       padding: 2rem 1rem;
       overflow: hidden;
   }

   .header::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background: var(--flora-gradient);
       clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
       z-index: -1;
       opacity: 0.9;
   }

   .flora-badge {
       display: inline-block;
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(10px);
       padding: 0.5rem 1.5rem;
       border-radius: 50px;
       margin-bottom: 1.5rem;
       font-weight: 600;
       color: var(--flora-white);
       border: 1px solid rgba(255, 255, 255, 0.3);
       font-size: 0.9rem;
   }

   .name {
       font-size: 2rem;
       font-weight: 800;
       margin-bottom: 0.5rem;
       color: var(--flora-white);
       text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
       letter-spacing: -1px;
   }

   .title {
       font-size: 1.1rem;
       color: var(--flora-white);
       margin-bottom: 1.5rem;
       opacity: 0.9;
   }

   .tagline {
       font-size: 0.95rem;
       color: var(--flora-white);
       max-width: 600px;
       margin: 0 auto;
       font-weight: 300;
       line-height: 1.8;
   }

   .main-card {
       background: rgba(255, 255, 255, 0.8);
       backdrop-filter: blur(15px);
       border-radius: var(--flora-radius);
       box-shadow: var(--flora-shadow);
       overflow: hidden;
       margin-bottom: 2rem;
       transition: var(--flora-transition);
       border: 1px solid rgba(255, 255, 255, 0.3);
   }

   .main-card:hover {
       transform: translateY(-5px);
       box-shadow: 0 30px 60px -12px rgba(16, 185, 129, 0.3);
   }

   .card-content {
       padding: 1.5rem;
   }

   .intro-text {
       font-size: 1rem;
       margin-bottom: 2rem;
       text-align: center;
       position: relative;
       padding: 0 1rem;
       line-height: 1.8;
   }

   .intro-text::before,
   .intro-text::after {
       content: "❝";
       font-size: 1.5rem;
       color: var(--flora-primary-light);
       position: absolute;
       top: -0.5rem;
       right: 0;
       opacity: 0.7;
   }

   .intro-text::after {
       content: "❞";
       right: auto;
       left: 0;
   }

   .flora-section {
       background: var(--flora-gradient);
       border-radius: var(--flora-radius);
       padding: 1.5rem;
       margin: 2rem 0;
       color: var(--flora-white);
       position: relative;
       overflow: hidden;
   }

   .flora-section::before {
       content: '';
       position: absolute;
       top: -50%;
       right: -50%;
       width: 100%;
       height: 100%;
       background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
       animation: float 20s linear infinite;
   }

   .flora-logo {
       font-size: 1.5rem;
       font-weight: 800;
       margin-bottom: 1rem;
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.5rem;
       flex-wrap: wrap;
   }

   .flora-description {
       font-size: 1rem;
       text-align: center;
       margin: 0 auto 1.5rem;
       line-height: 1.8;
       max-width: 800px;
   }

   .flora-features {
       display: grid;
       grid-template-columns: 1fr;
       gap: 1rem;
       margin-top: 1.5rem;
   }

   .flora-feature {
       background: rgba(255, 255, 255, 0.2);
       backdrop-filter: blur(10px);
       border-radius: var(--flora-radius);
       padding: 1.2rem;
       text-align: center;
       border: 1px solid rgba(255, 255, 255, 0.3);
       transition: var(--flora-transition);
   }

   .flora-feature:hover {
       transform: translateY(-5px);
       background: rgba(255, 255, 255, 0.3);
   }

   .feature-icon {
       font-size: 1.8rem;
       margin-bottom: 0.8rem;
   }

   .feature-title {
       font-size: 1rem;
       margin-bottom: 0.5rem;
       font-weight: 600;
   }

   .feature-description {
       font-size: 0.85rem;
       opacity: 0.9;
   }

   .skills-section {
       margin: 2rem 0;
       width: 100%;
   }

   .section-title {
       font-size: 1.5rem;
       margin-bottom: 1.5rem;
       color: var(--flora-primary-dark);
       text-align: center;
       position: relative;
       display: block;
       width: 100%;
       padding: 0 1rem;
   }

   .section-title::after {
       content: '';
       position: absolute;
       bottom: -8px;
       right: 50%;
       transform: translateX(50%);
       width: 80px;
       height: 3px;
       background: var(--flora-gradient);
       border-radius: 2px;
   }

   .skills-container {
       display: flex;
       flex-direction: column;
       gap: 1rem;
       width: 100%;
   }

   .skill-category {
       background: var(--flora-white);
       border-radius: var(--flora-radius);
       padding: 1.5rem;
       box-shadow: 0 10px 20px rgba(16, 185, 129, 0.1);
       transition: var(--flora-transition);
       border: 1px solid var(--flora-primary-light);
       width: 100%;
   }

   .skill-category:hover {
       transform: translateY(-5px);
       box-shadow: 0 15px 30px rgba(16, 185, 129, 0.15);
   }

   .category-title {
       font-size: 1.3rem;
       margin-bottom: 1rem;
       color: var(--flora-primary);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       justify-content: flex-start;
   }

   .skills-list {
       list-style: none;
       width: 100%;
   }

   .skill-item {
       padding: 0.8rem 0;
       border-bottom: 1px solid rgba(16, 185, 129, 0.1);
       display: flex;
       align-items: center;
       gap: 0.5rem;
       transition: var(--flora-transition);
       width: 100%;
   }

   .skill-item:last-child {
       border-bottom: none;
   }

   .skill-item:hover {
       padding-right: 0.5rem;
       color: var(--flora-primary);
   }

   .skill-item::before {
       content: '🌱';
       color: var(--flora-primary);
       flex-shrink: 0;
   }

   .contact-section {
       display: grid;
       grid-template-columns: 1fr;
       gap: 1.5rem;
       margin-top: 2rem;
   }

   .contact-info {
       background: var(--flora-white);
       border-radius: var(--flora-radius);
       padding: 1.2rem;
       box-shadow: 0 10px 20px rgba(16, 185, 129, 0.1);
       border: 1px solid var(--flora-primary-light);
       position: relative;
       overflow: hidden;
   }

   .contact-header {
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 1.5rem;
       position: relative;
   }

   .contact-title {
       font-size: 1.3rem;
       color: var(--flora-primary-dark);
       text-align: center;
       position: relative;
       padding: 0 1rem;
   }

   .contact-title::after {
       content: '';
       position: absolute;
       bottom: -8px;
       right: 0;
       width: 100%;
       height: 3px;
       background: var(--flora-gradient);
       border-radius: 2px;
   }

   .contact-methods {
       display: flex;
       flex-direction: column;
       gap: 0.8rem;
   }

   .contact-item {
       display: flex;
       align-items: center;
       gap: 0.8rem;
       padding: 1rem;
       background: var(--flora-primary-light);
       border-radius: var(--flora-radius);
       transition: var(--flora-transition);
       color: var(--flora-primary-dark);
       text-decoration: none;
   }

   .contact-item:hover {
       background: var(--flora-primary);
       color: var(--flora-white);
       transform: translateX(-5px);
   }

   .contact-icon {
       width: 20px;
       height: 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1.1rem;
   }

   .phone-section {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       background: var(--flora-gradient);
       border-radius: var(--flora-radius);
       padding: 1.5rem;
       color: var(--flora-white);
       text-align: center;
       box-shadow: var(--flora-shadow);
       transition: var(--flora-transition);
       position: relative;
       overflow: hidden;
   }

   .phone-section::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
       animation: float 15s linear infinite;
   }

   .phone-section:hover {
       transform: scale(1.02);
       box-shadow: 0 20px 40px -12px rgba(16, 185, 129, 0.4);
   }

   .phone-title {
       font-size: 1.1rem;
       margin-bottom: 0.8rem;
       position: relative;
   }

   .phone-number {
       font-size: 1.5rem;
       font-weight: 700;
       direction: ltr;
       margin: 0.8rem 0;
       text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
       position: relative;
   }

   .phone-description {
       opacity: 0.9;
       margin-top: 0.8rem;
       position: relative;
       font-size: 0.9rem;
   }

   /* استایل شبکه‌های اجتماعی */
   .social-section {
       margin-top: 2rem;
       text-align: center;
   }

   .social-title {
       font-size: 1.2rem;
       margin-bottom: 1.2rem;
       color: var(--flora-primary-dark);
   }

   .social-links {
       display: flex;
       justify-content: center;
       gap: 0.8rem;
       flex-wrap: wrap;
   }

   .social-link {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       width: 60px;
       height: 60px;
       border-radius: 50%;
       background: var(--flora-white);
       color: var(--flora-primary);
       transition: var(--flora-transition);
       box-shadow: 0 8px 16px rgba(16, 185, 129, 0.1);
       text-decoration: none;
       position: relative;
       overflow: hidden;
       border: 1px solid var(--flora-primary-light);
   }

   .social-link::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background: var(--flora-gradient);
       opacity: 0;
       transition: var(--flora-transition);
       z-index: 0;
   }

   .social-link:hover::before {
       opacity: 1;
   }

   .social-link:hover {
       transform: translateY(-8px) scale(1.05);
       color: var(--flora-white);
   }

   .social-icon {
       font-size: 1.2rem;
       z-index: 1;
   }

   .social-name {
       font-size: 0.65rem;
       margin-top: 0.3rem;
       z-index: 1;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0) rotate(0deg);
       }

       50% {
           transform: translateY(-15px) rotate(180deg);
       }
   }

   .floating {
       animation: float 8s ease-in-out infinite;
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(20px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .fade-in-up {
       animation: fadeInUp 0.8s ease-out forwards;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: scale(1);
       }

       50% {
           transform: scale(1.03);
       }
   }

   .pulse {
       animation: pulse 3s ease-in-out infinite;
   }

   .floating-shapes {
       position: fixed;
       width: 100%;
       height: 100%;
       top: 0;
       right: 0;
       z-index: -1;
       overflow: hidden;
   }

   .shape {
       position: absolute;
       border-radius: 50%;
       opacity: 0.1;
       filter: blur(30px);
   }

   .shape-1 {
       width: 150px;
       height: 150px;
       background: var(--flora-primary);
       top: 10%;
       right: 10%;
       animation: float 15s ease-in-out infinite;
   }

   .shape-2 {
       width: 200px;
       height: 200px;
       background: var(--flora-secondary);
       bottom: 10%;
       left: 10%;
       animation: float 18s ease-in-out infinite reverse;
   }

   .shape-3 {
       width: 120px;
       height: 120px;
       background: var(--flora-accent);
       top: 50%;
       left: 20%;
       animation: float 12s ease-in-out infinite;
   }

   .cta-button {
       display: inline-block;
       padding: 0.8rem 1.5rem;
       background: rgba(255, 255, 255, 0.2);
       color: var(--flora-white);
       border-radius: 50px;
       text-decoration: none;
       font-weight: 600;
       margin-top: 1.5rem;
       box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
       transition: var(--flora-transition);
       position: relative;
       overflow: hidden;
       border: 1px solid rgba(255, 255, 255, 0.3);
       backdrop-filter: blur(10px);
       font-size: 0.9rem;
   }

   .cta-button::before {
       content: '';
       position: absolute;
       top: 0;
       right: 0;
       width: 100%;
       height: 100%;
       background: rgba(255, 255, 255, 0.3);
       opacity: 0;
       transition: var(--flora-transition);
   }

   .cta-button:hover {
       transform: translateY(-3px);
       box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);
   }

   .cta-button:hover::before {
       opacity: 1;
   }

   .cta-button span {
       position: relative;
       z-index: 1;
   }

   @media (min-width: 768px) {
       .container {
           padding: 1.5rem;
       }

       .header {
           padding: 4rem 2rem;
           margin-bottom: 3rem;
       }

       .name {
           font-size: 3rem;
       }

       .title {
           font-size: 1.3rem;
       }

       .tagline {
           font-size: 1.1rem;
       }

       .card-content {
           padding: 2.5rem;
       }

       .intro-text {
           font-size: 1.2rem;
           padding: 0 2rem;
       }

       .flora-section {
           padding: 2.5rem;
       }

       .flora-logo {
           font-size: 2.2rem;
       }

       .flora-description {
           font-size: 1.2rem;
       }

       .flora-features {
           grid-template-columns: repeat(2, 1fr);
       }

       .contact-section {
           grid-template-columns: 1fr 1fr;
           gap: 2rem;
       }

       .phone-number {
           font-size: 2.2rem;
       }

       .skills-container {
           flex-direction: row;
           flex-wrap: wrap;
       }

       .skill-category {
           flex: 1;
           min-width: 280px;
       }
   }

   @media (min-width: 1024px) {
       .container {
           padding: 2rem;
       }

       .header {
           padding: 5rem 2rem;
           margin-bottom: 4rem;
       }

       .name {
           font-size: 3.5rem;
       }

       .title {
           font-size: 1.5rem;
       }

       .tagline {
           font-size: 1.25rem;
       }

       .card-content {
           padding: 3rem;
       }

       .intro-text {
           font-size: 1.25rem;
       }

       .flora-section {
           padding: 3rem;
       }

       .flora-logo {
           font-size: 2.5rem;
       }

       .flora-features {
           grid-template-columns: repeat(4, 1fr);
       }

       .phone-number {
           font-size: 2.5rem;
       }

       .skills-container {
           gap: 1.5rem;
       }

       .skill-category {
           padding: 2rem;
       }
   }

   .magnetic-effect {
       transition: var(--flora-transition);
   }

   .magnetic-effect:hover {
       transform: scale(1.03);
   }

   .gradient-text {
       background: var(--flora-gradient);
       -webkit-background-clip: text;
       background-clip: text;
       color: transparent;
       background-size: 200% 200%;
       animation: gradientShift 5s ease infinite;
   }

   @keyframes gradientShift {
       0% {
           background-position: 0% 50%;
       }

       50% {
           background-position: 100% 50%;
       }

       100% {
           background-position: 0% 50%;
       }
   }