:root {
     --text-color: #ffffff;
     --text-stroke: 1px rgba(0, 0, 0, 0.7);
     --transition-time: 0.8s;
 }

 .full-width-slider {
     width: 100%;
     height: 80vh;
     position: relative;
     overflow: hidden;
     margin: 3rem 0;
 }

 .slide {
     position: absolute;
     width: 100%;
     height: 100%;
     opacity: 0;
     transition: opacity var(--transition-time) ease;
     background-size: cover;
     background-position: center;
 }

 .slide.active {
     opacity: 1;
     z-index: 2;
 }

 .slide-content {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     width: 80%;
     left: 10%;
     right: 10%;
     padding: 2rem;
     text-align: center;
 }

 .slide-content h2 {
     color: var(--text-color);
     font-size: 3.5rem;
     font-weight: 900;
     line-height: 1.3;
     margin: 0 auto 1.5rem;
     text-shadow: 
         var(--text-stroke),
         0 0 15px rgba(0,0,0,0.5);
     max-width: 1200px;
     letter-spacing: -1px;
 }

 .optional-text {
     color: var(--text-color);
     font-size: 1.8rem;
     line-height: 1.6;
     text-shadow: 
         var(--text-stroke),
         0 0 10px rgba(0,0,0,0.4);
     margin: 0 auto;
     max-width: 1000px;
 }

 /* تصميم الجوال */
 @media (max-width: 768px) {
     .full-width-slider {
         height: 60vh;
     }
     
     .slide-content {
         width: 90%;
         left: 5%;
         padding: 1rem;
     }
     
     .slide-content h2 {
         font-size: 2.2rem;
         margin-bottom: 1rem;
     }
     
     .optional-text {
         font-size: 1.2rem;
     }
 }

 .slider-controls {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
     display: flex;
     gap: 12px;
 }

 .slider-dot {
     width: 14px;
     height: 14px;
     border-radius: 50%;
     background: rgba(255,255,255,0.4);
     cursor: pointer;
     transition: all 0.3s;
     border: 1px solid rgba(0,0,0,0.3);
 }

 .slider-dot.active {
     background: rgba(255,255,255,0.9);
     transform: scale(1.4);
 }

 /* أنيميشن بسيط */
 @keyframes fadeIn {
     from { opacity: 0; transform: translateY(20px); }
     to { opacity: 1; transform: translateY(0); }
 }

 .slide.active .slide-content {
     animation: fadeIn var(--transition-time) ease;
 }

 .cards-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
padding: 4rem 5%;
background: #f9f9f9;
}

 .card-item {
     text-align: center;
     padding: 2rem;
     background: white;
     border-radius: 10px;
     box-shadow: 0 3px 15px rgba(0,0,0,0.1);
     margin-bottom: 2rem;
 }

 .card-icon {
     font-size: 3.5rem;
     color: #2c3e50;
     margin-bottom: 1rem;
 }

 .card-title {
     font-size: 1.5rem;
     font-weight: 700;
     color: #333;
     margin-bottom: 1rem;
 }

 .card-content {
     font-size: 1.1rem;
     line-height: 1.6;
     color: #666;
 }

 .quality-image {
     width: 120px;
     height: 120px;
     border-radius: 50%;
     object-fit: cover;
     margin: 1rem auto;
     border: 3px solid #e74c3c;
 }

 @media (max-width: 768px) {
     .cards-container {
         grid-template-columns: 1fr;
         padding: 2rem 5%;
     }
     
     .card-item {
         margin-bottom: 1.5rem;
     }
     
     .card-title {
         font-size: 1.3rem;
     }
 }
/* بطاقة خاصة لـ "خيارك الأنسب" */
.special-card {
position: relative;
text-align: center;
padding: 2rem;
background: white;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
animation: cardEntry 0.8s ease forwards;
}

.special-card .card-title {
font-size: 2.2rem;
color: #2c3e50;
margin-bottom: 0.5rem; /* تقليل المسافة */
}

.special-card .special-icon {
font-size: 2.5rem;
color: #e74c3c;
margin-top: 0.5rem; /* إضافة مسافة فوق الأيقونة */
display: block;
}

/* بطاقات عادية */
.normal-card {
background: white;
border-radius: 15px;
padding: 2rem;
text-align: center;
animation: cardEntry 0.8s ease forwards;
opacity: 0;
transform: translateY(20px);
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
transition: all 0.3s;
}

.normal-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 15px rgba(230, 151, 3, 0.55);
}

.icon-circle {
width: 120px;
height: 120px;
border-radius: 50%;
background: #e74c3c;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}

.icon-circle i {
font-size: 3rem;
color: white;
}

.icon-circle:hover {
background: #c0392b;
transform: scale(1.05);
}

@keyframes cardEntry {
from {
 opacity: 0;
 transform: translateY(30px);
}
to {
 opacity: 1;
 transform: translateY(0);
}
}

/* تعديلات الجوال */
@media (max-width: 768px) {
.cards-container {
 grid-template-columns: 1fr;
 padding: 2rem;
}

.special-card .card-title {
 font-size: 1.8rem;
}

.icon-circle {
 width: 100px;
 height: 100px;
}
}
/* أنماط الحركة */
@keyframes cardEntrance {
0% {
 opacity: 0;
 transform: translateY(50px);
}
100% {
 opacity: 1;
 transform: translateY(0);
}
}

/* تأثيرات ال hover */
.icon-circle {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-circle:hover {
background: #2c3e50 !important;
transform: rotate(15deg) scale(1.1);
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

.icon-circle:hover i {
color: #fff !important;
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}

/* حركة البطاقات عند التحميل */
.cards-container {
perspective: 1000px;
}

.card-item {
animation: cardEntrance 0.8s ease-out forwards;
opacity: 0;
}

/* تأخير حركة البطاقات */
<?php foreach($cards as $index => $card): ?>
.card-item:nth-child(<?= $index + 1 ?>) {
animation-delay: <?= $index * 0.2 ?>s;
}
<?php endforeach; ?>

/* تصميم خاص للبطاقة الأولى */
.special-card {
animation: cardEntrance 0.8s ease-out forwards;
animation-delay: 0.1s;
}

.special-icon {
transition: all 0.3s;
}

.special-icon:hover {
color: #e74c3c !important;
transform: rotate(-15deg) scale(1.2);
}
/* أنماط زر عن الشركة */
.about-company-btn {
display: block;
width: 200px;
margin: 40px auto;
padding: 15px 30px;
background: #e74c3c;
color: white;
text-align: center;
border-radius: 30px;
font-size: 1.2rem;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
box-shadow: 0 4px 15px rgba(231, 76, 60, 0.2);
border: none;
position: relative;
overflow: hidden;
}

.about-company-btn:hover {
background: #c0392b;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.4);}

.about-company-btn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255,255,255,0.1);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: width 0.3s, height 0.3s;
}

.about-company-btn:hover::after {
width: 300px;
height: 300px;
}

/* قسم عن الشركة (سيتم التمرير إليه) */
.company-section {
padding: 80px 20%;
background: #f9f9f9;
margin-top: 50px;
}
.company-section {
padding: 6rem 5%;
background: #f9f9f9;
}

.company-card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
background: white;
border-radius: 15px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
overflow: hidden;
max-width: 1200px;
margin: 0 auto;
}

/* تنسيق الصورة */
.company-image {
padding: 2rem;
display: flex;
align-items: center;
}

.company-logo {
width: 100%;
height: auto;
border-radius: 10px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* تنسيق المحتوى النصي */
.company-content {
padding: 3rem 2rem;
display: flex;
flex-direction: column;
gap: 1.5rem;
}

.company-heading {
font-size: 2.5rem;
color: #2c3e50;
margin: 0;
font-weight: 700;
}

.company-subtext {
font-size: 1.1rem;
color: #666;
line-height: 1.8;
margin: 0;
}

/* تنسيق قائمة الإنجازات */
.achievements-list {
list-style: none;
padding: 0;
margin: 1rem 0;
display: flex;
flex-direction: column;
gap: 0.8rem;
}

.achievement-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.8rem;
background: #f8f9fa;
border-radius: 8px;
}

.achievement-item i {
color: #27ae60;
font-size: 1.2rem;
}

/* زر التواصل */
.contact-btn {
align-self: flex-start;
background: #e74c3c;
color: white;
padding: 12px 35px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s;
margin-top: 1.5rem;
border: none;
cursor: pointer;
}

.contact-btn:hover {
background: #c0392b;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(231,76,60,0.3);
}

/* التنسيق للجوال */
@media (max-width: 768px) {
.company-card {
grid-template-columns: 1fr;
}

.company-image {
order: -1;
padding: 2rem 2rem 0;
}

.company-content {
padding: 2rem;
}

.company-heading {
font-size: 2rem;
}

.contact-btn {
align-self: center;
width: 100%;
text-align: center;
}
}