.hero-slider {
           position: relative;
           height: 100dvh;
           overflow: hidden;
       }

       .swiper {
           width: 100%;
           height: 100%;
       }

       .swiper-slide {
           position: relative;
           display: flex;
           align-items: center;
           justify-content: center;
           background-size: cover;
           background-position: center;
       }

       .slide-overlay {
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           background: linear-gradient(to left, rgba(47, 53, 66, 0.85), rgba(47, 53, 66, 0.7));
       }

       .slide-content {
           position: relative;
           z-index: 10;
           text-align: center;
           color: white;
           max-width: 800px;
           padding: 0 2rem;
           opacity: 0;
           transform: translateY(50px);
           transition: all 0.8s ease 0.3s;
       }

       .swiper-slide-active .slide-content {
           opacity: 1;
           transform: translateY(0);
       }

       .slide-title {
           font-size: 3.5rem;
           font-weight: 800;
           margin-bottom: 1.5rem;
           text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
           opacity: 0;
           transform: translateY(30px);
           transition: all 0.8s ease 0.5s;
       }

       .swiper-slide-active .slide-title {
           opacity: 1;
           transform: translateY(0);
       }

       .slide-description {
           font-size: 1.3rem;
           margin-bottom: 2.5rem;
           line-height: 1.8;
           color: #f1f2f6;
           opacity: 0;
           transform: translateY(30px);
           transition: all 0.8s ease 0.7s;
       }

       .swiper-slide-active .slide-description {
           opacity: 1;
           transform: translateY(0);
       }

       .buttons-container {
           display: flex;
           gap: 1.5rem;
           justify-content: center;
           flex-wrap: wrap;
           opacity: 0;
           transform: translateY(30px);
           transition: all 0.8s ease 0.9s;
       }

       .swiper-slide-active .buttons-container {
           opacity: 1;
           transform: translateY(0);
       }

       .btn {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           border: none;
           border-radius: 50px;
           padding: 1.2rem 2.5rem;
           font-size: 1.1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           text-decoration: none;
           box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
       }

       .btn-primary {
           background: linear-gradient(135deg, #ff4757, #ff3742);
           color: white;
       }

       .btn-primary:hover {
           background: linear-gradient(135deg, #ff3742, #ff2732);
           transform: translateY(-3px);
           box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
       }

       .btn-outline {
           background-color: transparent;
           border: 2px solid white;
           color: white;
       }

       .btn-outline:hover {
           background-color: var(--secondary-color);
           color: var(--white-color);
           transform: translateY(-3px);
       }

       /* کنترل‌های Swiper */
       .swiper-button-next,
       .swiper-button-prev {
           width: 50px;
           height: 50px;
           background-color: rgba(255, 255, 255, 0.2);
           border-radius: 50%;
           backdrop-filter: blur(5px);
           transition: all 0.3s ease;
       }

       .swiper-button-next:after,
       .swiper-button-prev:after {
           font-size: 1.2rem;
           color: white;
           font-weight: bold;
       }

       .swiper-button-next:hover,
       .swiper-button-prev:hover {
           background-color: rgba(255, 255, 255, 0.3);
           transform: scale(1.1);
       }

       .swiper-pagination {
           bottom: 2rem !important;
       }

       .swiper-pagination-bullet {
           width: 12px;
           height: 12px;
           background-color: rgba(255, 255, 255, 0.5);
           opacity: 1;
           transition: all 0.3s ease;
       }

       .swiper-pagination-bullet-active {
           background-color: white;
           transform: scale(1.2);
       }

       /* scroll-indicator*/
       .scroll-indicator {
           position: absolute;
           bottom: 6rem;
           left: 50%;
           transform: translateX(-50%);
           z-index: 20;
           cursor: pointer;
       }

       .scroll-indicator-inner {
           width: 30px;
           height: 50px;
           border: 2px solid rgba(255, 255, 255, 0.7);
           border-radius: 15px;
           display: flex;
           align-items: flex-start;
           justify-content: center;
           padding: 8px;
       }

       .scroll-indicator-dot {
           width: 4px;
           height: 10px;
           background-color: rgba(255, 255, 255, 0.7);
           border-radius: 2px;
           animation: scrollBounce 2s infinite;
       }

       @keyframes scrollBounce {

           0%,
           20%,
           50%,
           80%,
           100% {
               transform: translateY(0);
           }

           40% {
               transform: translateY(10px);
           }

           60% {
               transform: translateY(5px);
           }
       }

       /* افکت پارالکس برای تصاویر */
       .parallax-bg {
           position: absolute;
           left: 0;
           top: 0;
           width: 130%;
           height: 100%;
           -webkit-background-size: cover;
           background-size: cover;
           background-position: center;
       }

       /* رسپانسیو بودن */
       @media (max-width: 768px) {
           .slide-title {
               font-size: 2.5rem;
           }

           .slide-description {
               font-size: 1.1rem;
           }

           .btn {
               padding: 1rem 2rem;
               font-size: 1rem;
           }

           .swiper-button-next,
           .swiper-button-prev {
               width: 40px;
               height: 40px;
           }

           .swiper-button-next:after,
           .swiper-button-prev:after {
               font-size: 1rem;
           }
       }

       @media (max-width: 480px) {
           .slide-title {
               font-size: 2rem;
           }

           .slide-description {
               font-size: 1rem;
           }

           .buttons-container {
               flex-direction: column;
               align-items: center;
           }

           .btn {
               width: 100%;
               max-width: 250px;
           }

           .swiper-button-next,
           .swiper-button-prev {
               display: none;
           }
       }


       /* استایل‌های بخش درباره ما */
       .about-section {
           padding: 6rem 0;
           background: linear-gradient(to bottom, #ffffff, #f1f2f6);
           overflow: hidden;
       }

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

       .about-grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: 4rem;
           align-items: center;
       }

       @media (min-width: 1024px) {
           .about-grid {
               grid-template-columns: 1fr 1fr;
           }

           .about-video {
               order: 2;
           }

           .about-content {
               order: 1;
           }
       }

       /* استایل بخش ویدیو */
       .video-container {
           position: relative;
           border-radius: 1.5rem;
           overflow: hidden;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
           height: 500px;
           background-image: url('../images/about-us/about-us.webp');
           background-size: cover;
           background-position: center;
       }

       .video-overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(to top, rgba(47, 53, 66, 0.8), transparent);
       }

       .play-button {
           position: absolute;
           top: 50%;
           left: 50%;
           transform: translate(-50%, -50%);
           width: 6rem;
           height: 6rem;
           border-radius: 50%;
           background-color: #ff4757;
           display: flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           box-shadow: 0 0 0 20px rgba(255, 71, 87, 0.3);
           transition: all 0.3s ease;
       }

       .play-button:hover {
           transform: translate(-50%, -50%) scale(1.1);
       }

       .play-button i {
           color: white;
           font-size: 2rem;
           margin-right: -4px;
       }

       .decorative-element {
           position: absolute;
           bottom: -1.5rem;
           right: -1.5rem;
           width: 8rem;
           height: 8rem;
           background-color: #ff4757;
           border-radius: 50%;
           filter: blur(3rem);
           opacity: 0.2;
       }

       /* استایل بخش محتوا */
       .content-line {
           width: 0;
           height: 4px;
           background-color: #ff4757;
           margin-bottom: 1.5rem;
           transition: width 0.8s ease;
       }

       .content-line.animated {
           width: 5rem;
       }

       .about-title {
           color: #2f3542;
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1.5rem;
           line-height: 1.2;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .about-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .about-text {
           color: #6b7280;
           margin-bottom: 1.5rem;
           line-height: 1.8;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .about-text.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .about-text.delay-1 {
           transition-delay: 0.1s;
       }

       .about-text.delay-2 {
           transition-delay: 0.2s;
       }

       /* استایل آمارها */
       .stats-grid {
           display: grid;
           grid-template-columns: repeat(3, 1fr);
           gap: 2rem;
           margin-top: 2.5rem;
       }

       .stat-item {
           text-align: center;
           opacity: 0;
           transform: translateY(30px);
           transition: all 0.8s ease;
       }

       .stat-item.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .stat-item.delay-0 {
           transition-delay: 0.3s;
       }

       .stat-item.delay-1 {
           transition-delay: 0.4s;
       }

       .stat-item.delay-2 {
           transition-delay: 0.5s;
       }

       .stat-icon {
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 4rem;
           height: 4rem;
           background: linear-gradient(135deg, #ff4757, #ff6b7a);
           border-radius: 1rem;
           margin-bottom: 1rem;
           color: white;
           font-size: 1.75rem;
           box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
           transition: all 0.6s ease;
       }

       .stat-item:hover .stat-icon {
           transform: rotate(360deg);
       }

       .stat-item:hover {
           transform: translateY(-5px);
       }

       .stat-value {
           color: #2f3542;
           font-size: 1.75rem;
           font-weight: 700;
           margin-bottom: 0.25rem;
       }

       .stat-label {
           color: #6b7280;
           font-size: 0.9rem;
       }

       /* انیمیشن‌های سفارشی */
       @keyframes pulse {

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

           50% {
               transform: scale(1.1);
               opacity: 1;
           }
       }

       @keyframes decorativePulse {

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

           50% {
               transform: scale(1.2);
               opacity: 0.3;
           }
       }

       .pulse-animation {
           animation: pulse 2s infinite;
       }

       .decorative-pulse {
           animation: decorativePulse 3s infinite;
       }

       /* رسپانسیو بودن */
       @media (max-width: 768px) {
           .about-section {
               padding: 4rem 0;
           }

           .about-title {
               font-size: 2rem;
           }

           .stats-grid {
               grid-template-columns: 1fr;
               gap: 1.5rem;
           }

           .video-container {
               height: 350px;
           }

           .play-button {
               width: 5rem;
               height: 5rem;
           }

           .play-button i {
               font-size: 1.5rem;
           }
       }

       @media (max-width: 480px) {
           .about-title {
               font-size: 1.75rem;
           }

           .about-text {
               font-size: 0.95rem;
           }
       }



       /* استایل‌های بخش خدمات */
       .services-section {
           padding: 6rem 0;
           background-color: #fff;
           overflow: hidden;
       }

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

       /*  header section */
       .services-header {
           text-align: center;
           margin-bottom: 5rem;
       }

       .services-badge {
           display: inline-block;
           background: linear-gradient(to right, #ff4757, #ff6b7a);
           color: white;
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
       }

       .services-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .services-title {
           color: #2f3542;
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .services-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .services-subtitle {
           color: #6b7280;
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .services-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }

       /* گرید خدمات */
       .services-grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: 2rem;
       }

       @media (min-width: 768px) {
           .services-grid {
               grid-template-columns: repeat(2, 1fr);
           }
       }

       @media (min-width: 1024px) {
           .services-grid {
               grid-template-columns: repeat(3, 1fr);
           }
       }

       /* کارت خدمات */
       .service-card {
           position: relative;
           background: white;
           border-radius: 1.5rem;
           padding: 2rem;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
           border: 2px solid transparent;
           overflow: hidden;
           opacity: 0;
           transform: translateY(50px);
       }

       .service-card.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .service-card:hover {
           transform: translateY(-10px) scale(1.02);
           box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
           border-color: rgba(255, 71, 87, 0.2);
       }

       .service-card::before {
           content: '';
           position: absolute;
           inset: 0;
           background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
           opacity: 0;
           transition: opacity 0.3s ease;
       }

       .service-card:hover::before {
           opacity: 0.05;
       }

       /* آیکون خدمات */
       .service-icon {
           position: relative;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           width: 5rem;
           height: 5rem;
           border-radius: 1rem;
           margin-bottom: 1.5rem;
           background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
           box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
           transition: box-shadow 0.3s ease;
       }

       .service-card:hover .service-icon {
           box-shadow: 0 15px 30px rgba(255, 71, 87, 0.4);
       }

       .service-icon i {
           color: white;
           font-size: 2rem;
       }

       .service-icon::after {
           content: '';
           position: absolute;
           top: 0;
           right: 0;
           width: 100%;
           height: 100%;
           border-radius: 1rem;
           background: linear-gradient(135deg, var(--gradient-from), var(--gradient-to));
           opacity: 0;
           animation: pulse 1.5s infinite;
       }

       .service-card:hover .service-icon::after {
           opacity: 0.3;
       }

       /* محتوای کارت */
       .service-content h3 {
           color: #2f3542;
           font-size: 1.5rem;
           font-weight: 700;
           margin-bottom: 0.75rem;
           transition: color 0.3s ease;
       }

       .service-card:hover .service-content h3 {
           color: #ff4757;
       }

       .service-content p {
           color: #6b7280;
           line-height: 1.7;
       }

       /* فلش پایین کارت */
       .service-arrow {
           position: absolute;
           bottom: 2rem;
           left: 2rem;
           color: #ff4757;
           opacity: 0;
           transform: translateX(-10px);
           transition: all 0.3s ease;
       }

       .service-card:hover .service-arrow {
           opacity: 1;
           transform: translateX(0);
       }

       /* انیمیشن‌ها */
       @keyframes pulse {

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

           50% {
               transform: scale(1.5);
               opacity: 0;
           }
       }

       @keyframes rotate {
           0% {
               transform: rotate(0deg);
           }

           25% {
               transform: rotate(-10deg);
           }

           50% {
               transform: rotate(10deg);
           }

           75% {
               transform: rotate(-10deg);
           }

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

       .service-card:hover .service-icon i {
           animation: rotate 0.5s ease;
       }

       /* رسپانسیو بودن */
       @media (max-width: 768px) {
           .services-section {
               padding: 4rem 0;
           }

           .services-title {
               font-size: 2rem;
           }

           .service-card {
               padding: 1.5rem;
           }

           .service-icon {
               width: 4rem;
               height: 4rem;
           }

           .service-icon i {
               font-size: 1.5rem;
           }
       }

       @media (max-width: 480px) {
           .services-title {
               font-size: 1.75rem;
           }

           .services-subtitle {
               font-size: 0.95rem;
           }

           .service-content h3 {
               font-size: 1.25rem;
           }

           .service-content p {
               font-size: 0.9rem;
           }
       }


       /* هدر بخش */
       .trainers-header {
           text-align: center;
           margin-bottom: 5rem;
       }

       .trainers-badge {
           display: inline-block;
           background: linear-gradient(to right, #ff4757, #ff6b7a);
           color: white;
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
       }

       .trainers-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .trainers-title {
           color: #2f3542;
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .trainers-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .trainers-subtitle {
           color: #6b7280;
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .trainers-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }

       /* استایل‌های Swiper */
       .trainers-swiper {
           padding: 2rem 0;
           overflow: visible;
       }

       .swiper-slide {
           height: auto;
           opacity: 0;
           transform: translateY(50px);
           transition: all 0.8s ease;
       }

       .swiper-slide-active {
           opacity: 1;
           transform: translateY(0);
       }

       .trainer-slide-content {
           display: grid;
           grid-template-columns: 1fr;
           gap: 3rem;
           align-items: center;
           height: 100%;
       }

       @media (min-width: 768px) {
           .trainer-slide-content {
               grid-template-columns: 1fr 1fr;
           }
       }

       /* بخش تصویر مربی */
       .trainer-image-container {
           position: relative;
           border-radius: 1.5rem;
           overflow: hidden;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
       }

       .trainer-image {
           width: 100%;
           height: 600px;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .trainer-image-container:hover .trainer-image {
           transform: scale(1.05);
       }

       .image-overlay {
           position: absolute;
           inset: 0;
           background: linear-gradient(to top, #2f3542, transparent, transparent);
           opacity: 0.6;
       }

       .social-icons {
           position: absolute;
           bottom: 2rem;
           right: 2rem;
           left: 2rem;
           display: flex;
           gap: 1rem;
           justify-content: center;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.3s ease;
       }

       .trainer-image-container:hover .social-icons {
           opacity: 1;
           transform: translateY(0);
       }

       .social-icon {
           width: 3rem;
           height: 3rem;
           background: rgba(255, 255, 255, 0.2);
           backdrop-filter: blur(10px);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           color: white;
           text-decoration: none;
           transition: all 0.3s ease;
       }

       .social-icon:hover {
           background: #ff4757;
           transform: scale(1.2) translateY(-5px);
       }

       .decorative-element {
           position: absolute;
           bottom: -1.5rem;
           right: -1.5rem;
           width: 10rem;
           height: 10rem;
           background: #ff4757;
           border-radius: 50%;
           filter: blur(3rem);
           opacity: 0.2;
           animation: decorativePulse 3s infinite;
       }

       /* بخش اطلاعات مربی */
       .trainer-info {
           padding: 1rem;
       }

       .info-line {
           width: 0;
           height: 4px;
           background: #ff4757;
           margin-bottom: 2rem;
           transition: width 0.8s ease 0.5s;
       }

       .swiper-slide-active .info-line {
           width: 5rem;
       }

       .trainer-name {
           color: #2f3542;
           font-size: 2rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease 0.6s;
       }

       .swiper-slide-active .trainer-name {
           opacity: 1;
           transform: translateY(0);
       }

       .trainer-specialty {
           color: #ff4757;
           font-size: 1.25rem;
           margin-bottom: 0.75rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease 0.7s;
       }

       .swiper-slide-active .trainer-specialty {
           opacity: 1;
           transform: translateY(0);
       }

       .trainer-experience {
           color: #6b7280;
           margin-bottom: 2rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease 0.8s;
       }

       .swiper-slide-active .trainer-experience {
           opacity: 1;
           transform: translateY(0);
       }

       .trainer-description {
           color: #6b7280;
           line-height: 1.8;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease 0.9s;
       }

       .swiper-slide-active .trainer-description {
           opacity: 1;
           transform: translateY(0);
       }

       /* ناوبری Swiper */
       .swiper-button-next,
       .swiper-button-prev {
           width: 3.5rem;
           height: 3.5rem;
           background: linear-gradient(to right, #ff4757, #ff6b7a);
           border-radius: 50%;
           box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
           transition: all 0.3s ease;
       }

       .swiper-button-next:after,
       .swiper-button-prev:after {
           font-size: 1.25rem;
           color: white;
           font-weight: bold;
       }

       .swiper-button-next:hover,
       .swiper-button-prev:hover {
           transform: scale(1.1);
           box-shadow: 0 15px 30px rgba(255, 71, 87, 0.4);
       }

       .swiper-pagination {
           position: relative;
           margin-top: 3rem;
       }

       .swiper-pagination-bullet {
           width: 2rem;
           height: 8px;
           border-radius: 4px;
           background: #d1d5db;
           opacity: 1;
           transition: all 0.3s ease;
       }

       .swiper-pagination-bullet-active {
           background: #ff4757;
           width: 3rem;
       }

       @keyframes decorativePulse {

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

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

       @media (max-width: 768px) {
           .trainers-section {
               padding: 4rem 0;
           }

           .trainers-title {
               font-size: 2rem;
           }

           .trainer-image {
               height: 400px;
           }

           .trainer-name {
               font-size: 1.75rem;
           }

           .trainer-specialty {
               font-size: 1.125rem;
           }

           .social-icons {
               opacity: 1;
               transform: translateY(0);
           }

           .swiper-button-next,
           .swiper-button-prev {
               display: none;
           }
       }

       @media (max-width: 480px) {
           .trainers-title {
               font-size: 1.75rem;
           }

           .trainers-subtitle {
               font-size: 0.95rem;
           }

           .trainer-image {
               height: 300px;
           }
       }

       /* ===================================== pricing ========================================== */

       .pricing-section {
           padding: 6rem 0;
           background: linear-gradient(to bottom, var(--white-color), var(--light-color));
           overflow: hidden;
       }

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

       /* هدر بخش */
       .pricing-header {
           text-align: center;
           margin-bottom: 5rem;
       }

       .pricing-badge {
           display: inline-block;
           background: var(--primary-gradient);
           color: var(--white-color);
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
       }

       .pricing-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .pricing-title {
           color: var(--secondary-color);
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .pricing-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .pricing-subtitle {
           color: var(--text-gray);
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .pricing-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }

       /* کارت‌های قیمت‌گذاری */
       .pricing-grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: 3rem;
           max-width: 72rem;
           margin: 0 auto;
       }

       @media (min-width: 768px) {
           .pricing-grid {
               grid-template-columns: repeat(3, 1fr);
               gap: 2rem;
           }
       }

       .pricing-card {
           position: relative;
           background: var(--white-color);
           border-radius: 1.5rem;
           padding: 2rem;
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
           border: 2px solid #e5e7eb;
           overflow: visible;
           /* تغییر به visible */
           opacity: 0;
           transform: translateY(50px);
       }

       .pricing-card.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .pricing-card:hover {
           transform: translateY(-10px);
           box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
       }

       .pricing-card.popular {
           border-color: var(--primary-color);
           transform: translateY(0);
           position: relative;
           z-index: 1;
           margin-top: 1.5rem;
       }

       @media (min-width: 768px) {
           .pricing-card.popular {
               margin-top: 0.5rem;
               padding-top: 3rem;
               padding-bottom: 3rem;
           }
       }

       .pricing-card.popular:hover {
           transform: translateY(-10px) scale(1.05);
       }

       .popular-badge {
           position: absolute;
           top: -1.25rem;
           left: 50%;
           transform: translateX(-50%) translateY(-20px);
           z-index: 100;
           background: var(--primary-gradient);
           color: var(--white-color);
           padding: 0.75rem 2rem;
           border-radius: 9999px;
           box-shadow: 0 15px 30px rgba(255, 71, 87, 0.4);
           display: flex;
           align-items: center;
           gap: 0.5rem;
           opacity: 0;
           font-weight: 700;
           font-size: 0.95rem;
           white-space: nowrap;
           border: 3px solid var(--white-color);
       }

       .popular-badge.animated {
           opacity: 1;
           transform: translateX(-50%) translateY(0);
       }

       /* پس‌زمینه گرادیانت برای پلن محبوب */
       .popular-gradient {
           position: absolute;
           inset: 0;
           background: linear-gradient(135deg, rgba(255, 71, 87, 0.05), transparent);
           opacity: 0;
           animation: gradientPulse 3s infinite;
           border-radius: 1.5rem;
       }

       @keyframes gradientPulse {

           0%,
           100% {
               opacity: 0.05;
           }

           50% {
               opacity: 0.1;
           }
       }

       /* محتوای کارت */
       .card-content {
           position: relative;
           z-index: 10;
       }

       .plan-name {
           color: var(--secondary-color);
           font-size: 1.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           text-align: center;
       }

       .price-section {
           text-align: center;
           margin-bottom: 2rem;
       }

       .price-amount {
           color: var(--secondary-color);
           font-size: 2rem;
           font-weight: 700;
           display: inline-block;
           transform: scale(0);
       }

       .price-amount.animated {
           transform: scale(1);
       }

       .price-currency {
           color: var(--text-gray);
       }

       .price-period {
           color: var(--text-gray);
           margin-top: 0.5rem;
       }

       .features-list {
           list-style: none;
           margin-bottom: 2rem;
       }

       .feature-item {
           display: flex;
           align-items: flex-start;
           gap: 0.75rem;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateX(-20px);
       }

       .feature-item.animated {
           opacity: 1;
           transform: translateX(0);
       }

       .feature-icon {
           flex-shrink: 0;
           width: 1.25rem;
           height: 1.25rem;
           background: var(--primary-gradient);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin-top: 0.25rem;
           transition: all 0.3s ease;
       }

       .feature-item:hover .feature-icon {
           transform: scale(1.2) rotate(360deg);
       }

       .feature-icon i {
           color: var(--white-color);
           font-size: 0.7rem;
       }

       .feature-text {
           color: var(--text-gray);
           line-height: 1.5;
       }

       /* دکمه ثبت‌نام */
       .pricing-button {
           width: 100%;
           padding: 1.5rem;
           border: none;
           border-radius: 9999px;
           font-size: 1.1rem;
           font-weight: 600;
           cursor: pointer;
           transition: all 0.3s ease;
           transform: scale(1);
       }

       .pricing-button:hover {
           transform: scale(1.05);
       }

       .pricing-button:active {
           transform: scale(0.95);
       }

       .pricing-button.primary {
           background: var(--primary-gradient);
           color: var(--white-color);
           box-shadow: 0 10px 25px rgba(255, 71, 87, 0.3);
       }

       .pricing-button.primary:hover {
           background: linear-gradient(135deg, #ff6b7a, #ff4757);
       }

       .pricing-button.secondary {
           background: var(--light-color);
           color: var(--secondary-color);
       }

       .pricing-button.secondary:hover {
           background: var(--secondary-color);
           color: var(--white-color);
       }

       /* المان تزئینی */
       .decorative-circle {
           position: absolute;
           bottom: -5rem;
           left: -5rem;
           width: 10rem;
           height: 10rem;
           background: var(--primary-color);
           border-radius: 50%;
           filter: blur(3rem);
           opacity: 0.1;
           animation: circlePulse 3s infinite;
       }

       @keyframes circlePulse {

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

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

       @media (max-width: 768px) {
           .pricing-section {
               padding: 4rem 0;
           }

           .pricing-title {
               font-size: 2rem;
           }

           .pricing-card.popular {
               margin-top: 1.5rem;
               padding: 2rem;
           }

           .popular-badge {
               top: -1rem;
               padding: 0.6rem 1.5rem;
               font-size: 0.85rem;
           }
       }

       @media (max-width: 480px) {
           .pricing-title {
               font-size: 1.75rem;
           }

           .pricing-subtitle {
               font-size: 0.95rem;
           }

           .price-amount {
               font-size: 1.75rem;
           }

           .popular-badge {
               top: -0.8rem;
               padding: 0.5rem 1.2rem;
               font-size: 0.8rem;
           }
       }


       /* ===================================== testimonial  ========================================== */
           .testimonials-header {
           text-align: center;
           margin-bottom: 5rem;
           margin-top: 4rem;
       }

       .testimonials-badge {
           display: inline-block;
           background: var(--primary-gradient);
           color: var(--white-color);
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
       }

       .testimonials-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .testimonials-title {
           color: var(--secondary-color);
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .testimonials-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .testimonials-subtitle {
           color: #6b7280;
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .testimonials-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }

       /* استایل بخش نظرات */
       .testimonials-section {
           text-align: center;
           margin-bottom: 40px;
       }

       .testimonials-section h2 {
           font-size: 2.5rem;
           color: #2c3e50;
           margin-bottom: 10px;
       }

       .testimonials-section p {
           font-size: 1.1rem;
           color: #7f8c8d;
           max-width: 600px;
           margin: 0 auto 30px;
       }

       /* استایل کارت‌های نظرات */
       .testimonials-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: center;
           gap: 30px;
       }

       .testimonial-card {
           background: var(--white-color);
           border-radius: 10px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
           padding: 25px;
           max-width: 350px;
           transition: transform 0.3s ease;
       }

       .testimonial-card:hover {
           transform: translateY(-10px);
       }

       .customer-info {
           display: flex;
           align-items: center;
           margin-bottom: 15px;
       }

       .customer-avatar {
           width: 60px;
           height: 60px;
           border-radius: 50%;
           object-fit: cover;
           margin-left: 15px;
           border: 3px solid var(--primary-color);
       }

       .customer-details h3 {
           font-size: 1.2rem;
           margin-bottom: 5px;
           color: #2c3e50;
       }

       .customer-details p {
           font-size: 0.9rem;
           color: #7f8c8d;
       }

       .testimonial-text {
           font-style: italic;
           margin-bottom: 15px;
           color: #555;
           line-height: 1.8;
       }

       .rating {
           color: #f39c12;
           font-size: 1.2rem;
           margin-bottom: 10px;
       }

       /* استایل دکمه‌ها */
       .controls {
           display: flex;
           justify-content: center;
           gap: 15px;
           margin-top: 30px;
       }

       .btn {
           background: var(--primary-color);
           color: var(--white-color);
           border: none;
           padding: 10px 20px;
           border-radius: 5px;
           cursor: pointer;
           font-size: 1rem;
           transition: background 0.3s ease;
       }

       .btn:hover {
           background: var(--secondary-color);
       }

       /* استایل فرم نظر جدید */
       .add-testimonial {
           background: var(--white-color);
           border-radius: 10px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
           padding: 25px;
           max-width: 500px;
           margin: 40px auto;
       }

       .add-testimonial h3 {
           margin-bottom: 20px;
           color: #2c3e50;
           text-align: center;
       }

       .form-group {
           margin-bottom: 15px;
           text-align: right;
       }

       .form-group label {
           display: block;
           margin-bottom: 5px;
           font-weight: 500;
       }

       .form-group input,
       .form-group textarea {
           width: 100%;
           padding: 10px;
           border: 1px solid #ddd;
           border-radius: 5px;
           font-size: 1rem;
       }

       .form-group textarea {
           height: 120px;
           resize: vertical;
       }

       .rating-input {
           display: flex;
           gap: 5px;
           direction: ltr;
       }

       .rating-input span {
           font-size: 1.5rem;
           cursor: pointer;
           color: #ddd;
           transition: color 0.2s;
       }

       .rating-input span.active {
           color: #f39c12;
       }

       /* رسپانسیو */

       @media (max-width: 768px) {
           .testimonials-container {
               flex-direction: column;
               align-items: center;
           }

           .testimonial-card {
               max-width: 100%;
           }
       }


        .add-testimonial-btn {
            background:  var(--primary-gradient);
            color: var(--white-color);
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            transition: transform 0.3s, box-shadow 0.3s;
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 2rem auto 40px;
        }
        
        .add-testimonial-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* استایل مودال */
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            display: none;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            padding: 20px;
        }
        
        .modal-overlay.active {
            display: flex;
        }
        
        .testimonial-modal {
            background: white;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
            overflow: hidden;
            width: 100%;
            max-width: 600px;
            max-height: 90vh;
            overflow-y: auto;
            animation: modalAppear 0.3s ease-out;
        }
        
        @keyframes modalAppear {
            from {
                opacity: 0;
                transform: translateY(-50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }
          /* استایل بولت‌های ناوبری */
        .testimonial-bullets {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin: 30px 0;
        }
        
        .bullet {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .bullet.active {
            background: #3498db;
            transform: scale(1.2);
        }
        .modal-header {
            background:  var(--primary-gradient);
            color: white;
            padding: 25px;
            text-align: center;
            position: relative;
        }
        
        .modal-header h2 {
            font-size: 1.8rem;
            margin-bottom: 10px;
        }
          
        .modal-header p {
          
            color: var(--white-color);
        }
        
        
        .close-modal {
            position: absolute;
            top: 15px;
            left: 20px;
            background: none;
            border: none;
            color: white;
            font-size: 1.5rem;
            cursor: pointer;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.3s;
        }
        
        .close-modal:hover {
            background: rgba(255, 255, 255, 0.2);
        }
        
        .modal-content {
            padding: 30px;
        }
        
        .form-row {
            display: flex;
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .form-group {
            flex: 1;
            margin-bottom: 25px;
        }
        
        .form-group label {
            display: block;
            margin-bottom: 8px;
            font-weight: 600;
            color: #2c3e50;
        }
        
        .form-group input,
        .form-group textarea {
            width: 100%;
            padding: 12px 15px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 1rem;
            transition: border 0.3s;
        }
        
        .form-group input:focus,
        .form-group textarea:focus {
            border-color: #3498db;
            outline: none;
        }
        
        .form-group textarea {
            height: 150px;
            resize: vertical;
        }
        
        .rating-group {
            display: flex;
            gap: 10px;
            direction: ltr;
            margin-top: 10px;
            justify-content: center;
        }
        
        .rating-star {
            font-size: 2.5rem;
            cursor: pointer;
            color: #ddd;
            transition: all 0.2s;
        }
        
        .rating-star:hover,
        .rating-star.active {
            color: #f39c12;
            transform: scale(1.1);
        }
        
        .rating-label {
            display: flex;
            justify-content: space-between;
            margin-top: 5px;
            font-size: 0.9rem;
            color: #7f8c8d;
        }
        
        .submit-btn {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 1.1rem;
            font-weight: 600;
            width: 100%;
            transition: transform 0.3s, box-shadow 0.3s;
            margin-top: 10px;
        }
        
        .submit-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .form-note {
            text-align: center;
            margin-top: 20px;
            color: #7f8c8d;
            font-size: 0.9rem;
        }

       /* ===================================== blog section ========================================== */
       .blog-section {
           background-color: var(--light-color);
       }

       .blog-header {
           text-align: center;
           margin-bottom: 5rem;
           margin-top: 4rem;
       }

       .blog-badge {
           display: inline-block;
           background: var(--primary-gradient);
           color: var(--white-color);
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
           margin-top: 4rem;

       }

       .blog-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .blog-title {
           color: #2f3542;
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .blog-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .blog-subtitle {
           color: #6b7280;
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .blog-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }


       .blog-grid {
           display: grid;
           grid-template-columns: 1fr;
           gap: 2rem;
       }

       .blog-card {
           background: var(--white);
           border-radius: 1rem;
           box-shadow: var(--shadow-large);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           overflow: hidden;
           height: 100%;
           border: none;
       }

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

       .blog-image {
           position: relative;
           height: 14rem;
           overflow: hidden;
       }

       .blog-image img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           transition: transform 0.5s ease;
       }

       .blog-card:hover .blog-image img {
           transform: scale(1.1);
       }

       .blog-category-badge {
           position: absolute;
           top: 1rem;
           right: 1rem;
           background-color: var(--primary-color);
           color: var(--white);
           padding: 0.5rem 1rem;
           border-radius: 1rem;
           font-size: 0.75rem;
           font-weight: 600;
           z-index: 10;
       }

       .blog-content {
           padding: 1.5rem;
           display: flex;
           flex-direction: column;
           height: calc(100% - 14rem);
       }

       .blog-meta {
           display: flex;
           gap: 1.5rem;
           margin-bottom: 1rem;
           flex-wrap: wrap;
       }

       .meta-item {
           display: flex;
           align-items: center;
           gap: 0.5rem;
           color: var(--text-muted);
           font-size: 0.875rem;
       }

       .meta-item i {
           color: var(--primary-color);
           font-size: 0.75rem;
       }

       .blog-post-title {
           font-size: 1.25rem;
           font-weight: 600;
           margin-bottom: 1rem;
           line-height: 1.5;
           color: var(--text-dark);
           transition: color 0.3s ease;
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
       }

       .blog-card:hover .blog-post-title {
           color: var(--primary-color);
       }

       .blog-excerpt {
           color: var(--text-muted);
           line-height: 1.7;
           margin-bottom: 1.5rem;
           flex: 1;
           display: -webkit-box;
           -webkit-line-clamp: 3;
           -webkit-box-orient: vertical;
           overflow: hidden;
       }

       .blog-read-more {
           background: none;
           border: none;
           padding: 0;
           display: flex;
           align-items: center;
           gap: 0.5rem;
           color: var(--text-dark);
           cursor: pointer;
           transition: color 0.3s ease;
           font-size: 0.875rem;
           font-weight: 500;
           align-self: flex-start;
           font-family: var(--ff-primary);
       }

       .blog-read-more:hover {
           color: var(--primary-color);
       }

       .blog-read-more:hover i {
           transform: translateX(-0.25rem);
       }

       .blog-read-more i {
           font-size: 0.75rem;
           transition: transform 0.3s ease;
       }

       .blog-actions {
           text-align: center;
           margin-top: 3rem;
       }

       .view-all-btn {
           padding: 1rem 2rem;
           font-size: 1.125rem;
           font-weight: 600;
           margin-bottom: 2rem;
       }

       @media (min-width: 640px) {
           .blog-grid {
               grid-template-columns: repeat(2, 1fr);
           }

           .blog-image {
               height: 16rem;
           }

           .blog-content {
               height: calc(100% - 16rem);
           }
       }

       @media (min-width: 1024px) {
           .blog-grid {
               grid-template-columns: repeat(3, 1fr);
           }

           .blog-image {
               height: 14rem;
           }

           .blog-content {
               height: calc(100% - 14rem);
           }
       }

       @media (min-width: 1280px) {
           .blog-image {
               height: 16rem;
           }

           .blog-content {
               height: calc(100% - 16rem);
           }
       }


       /* ===================================== contact section ========================================== */
          .contact-header {
           text-align: center;
           margin-bottom: 5rem;
       }

       .contact-badge {
           display: inline-block;
           background: linear-gradient(to right, #ff4757, #ff6b7a);
           color: white;
           padding: 0.5rem 1.5rem;
           border-radius: 9999px;
           margin-bottom: 1.5rem;
           font-weight: 600;
           opacity: 0;
           transform: scale(0);
           transition: all 0.5s ease;
       }

       .contact-badge.animated {
           opacity: 1;
           transform: scale(1);
       }

       .contact-title {
           color: #2f3542;
           font-size: 2.5rem;
           font-weight: 700;
           margin-bottom: 1rem;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .contact-title.animated {
           opacity: 1;
           transform: translateY(0);
       }

       .contact-subtitle {
           color: #6b7280;
           max-width: 42rem;
           margin: 0 auto;
           opacity: 0;
           transform: translateY(20px);
           transition: all 0.8s ease;
       }

       .contact-subtitle.animated {
           opacity: 1;
           transform: translateY(0);
       }
       .contact-content {
           display: grid;
           grid-template-columns: 1fr;
           gap: 3rem;
           max-width: 76rem;
           margin: 0 auto;
       }

       /* Contact Form */
       .contact-form-card {
           background: var(--white);
           border-radius: 1rem;
           box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
           border: none;
       }

       .contact-form-content {
           padding: 2rem;
       }

       .form-title {
           font-size: 1.5rem;
           font-weight: 600;
           margin-bottom: 1.5rem;
           color: var(--text-dark);
       }

       .contact-form {
           display: flex;
           flex-direction: column;
           gap: 1.5rem;
       }

       .form-group {
           display: flex;
           flex-direction: column;
       }

       .form-label {
           font-weight: 500;
           margin-bottom: 0.5rem;
           color: var(--text-dark);
       }

       .form-input,
       .form-textarea {
           padding: 0.75rem 1rem;
           border: 1px solid rgba(0, 0, 0, 0.2);
           border-radius: 0.5rem;
           font-size: 1rem;
           transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
           background-color: rgba(0, 0, 0, 0.02);
           font-family: inherit;
           text-align: right;

       }

       .form-input:focus,
       .form-textarea:focus {
           outline: none;
           border-color: var(--primary-color);
           background-color: var(--white);
           box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
       }

       .form-textarea {
           resize: vertical;
           min-height: 120px;
           line-height: 1.5;
       }

       .submit-btn {
           width: 100%;
           padding: 1rem 2rem;
           font-size: 1.125rem;
           font-weight: 600;
           margin-top: 0.5rem;
       }

       /* Contact Info */
       .contact-info-section {
           display: flex;
           flex-direction: column;
           gap: 1.5rem;
       }

       .contact-info-cards {
           display: flex;
           flex-direction: column;
           gap: 1rem;
       }

       .contact-info-card {
           background: var(--white);
           border-radius: 1rem;
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
           border: none;
           transition: box-shadow 0.3s ease, transform 0.3s ease;
       }

       .contact-info-card:hover {
           box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
           transform: translateY(-2px);
       }

       .contact-info-content {
           padding: 1.5rem;
           display: flex;
           align-items: flex-start;
           gap: 1rem;
       }

       .contact-icon {
           width: 3.5rem;
           height: 3.5rem;
           background-color: rgba(59, 130, 246, 0.1);
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           flex-shrink: 0;
       }

       .contact-icon i {
           color: var(--primary-color);
           font-size: 1.5rem;
       }

       .contact-details {
           flex: 1;
       }

       .contact-info-title {
           font-size: 1.25rem;
           font-weight: 600;
           margin-bottom: 0.5rem;
           color: var(--text-dark);
       }

       .contact-info-text {
           color: var(--text-muted);
           line-height: 1.6;
       }

       /* Map */
       .contact-map {
           background: var(--white);
           border-radius: 1rem;
           box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
           overflow: hidden;
           border: none;
       }

       .map-placeholder {
           height: 16rem;
           background-color: rgba(0, 0, 0, 0.05);
           display: flex;
           flex-direction: column;
           align-items: center;
           justify-content: center;
           color: var(--text-muted);
       }

       .map-placeholder i {
           font-size: 3rem;
           margin-bottom: 1rem;
       }

       .map-placeholder p {
           font-size: 1.125rem;
           margin: 0;
       }

       /* Form Validation Styles */
       .form-input:invalid:not(:focus):not(:placeholder-shown),
       .form-textarea:invalid:not(:focus):not(:placeholder-shown) {
           border-color: #ef4444;
           background-color: rgba(239, 68, 68, 0.05);
       }

       .form-input:valid:not(:focus):not(:placeholder-shown),
       .form-textarea:valid:not(:focus):not(:placeholder-shown) {
           border-color: #10b981;
           background-color: rgba(16, 185, 129, 0.05);
       }

       @media (min-width: 768px) {
           .contact-form-content {
               padding: 2.5rem;
           }

           .contact-info-content {
               padding: 2rem;
           }
       }

       @media (min-width: 1024px) {
           .contact-content {
               grid-template-columns: 1fr 1fr;
               gap: 4rem;
           }

           .contact-form-content {
               padding: 3rem;
           }
       }