/* ========== الخطوط والمتغيرات الأساسية ========== */
@import url('font.css');
:root {
--main-color: #ffd700;
--secondary-color: #0F0F0F;
--white-color: #ffffff;
--light-bg: #fffbe0;
--gray-bg: #f4f4f4;
--card-bg: #fff;
--text-dark: #0F0F0F;
--text-light: #666;
--text-red: #dd0000;
--primary-gold: #F5B800;
--dark-gold: #D4A017;
--light-gold: #FFF9E6;
--accent-gold: #FFE066;
--black: #0F0F0F;
--charcoal: #2C2C2C;
--dark-gray: #404040;
--medium-gray: #6B7280;
--light-gray: #F8FAFC;
--soft-gray: #F1F5F9;
--white: #FFFFFF;
--cream: #FEFEFE;
--green: #3cb371;
--shadow-soft: 0 4px 20px rgba(245, 184, 0, 0.08);
--shadow-medium: 0 8px 40px rgba(15, 15, 15, 0.06);
--shadow-strong: 0 20px 60px rgba(15, 15, 15, 0.12);
--shadow-gold: 0 8px 32px rgba(245, 184, 0, 0.15);
--transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
--transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
--transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
--gradient-gold: linear-gradient(135deg, #F5B800 0%, #D4A017 100%);
--gradient-soft: linear-gradient(135deg, #FFF9E6 0%, #FFFFFF 100%);
--gradient-dark: linear-gradient(135deg, #2C2C2C 0%, #0F0F0F 100%);
}
* {
margin: 0;
box-sizing: border-box;
}
body {
font-family: 'Tajawal', sans-serif;
line-height: 1.6;
color: var(--text-dark);
scroll-behavior: smooth;
}
a {
color:#000;
text-decoration: none;
}
a:hover {
color:#000;
}
a:active {
color:#000;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.section-title {
text-align: center;
margin-bottom: 50px;
color: var(--secondary-color);
font-size: 2.5em;
font-weight: 800;
position: relative;
opacity: 0;
transform: translateY(30px);
animation: fadeUp 1s cubic-bezier(0.77, 0.2, 0.18, 1) 0.1s forwards;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--main-color), var(--light-bg));
border-radius: 2px;
}
.section-description {
text-align: center;
max-width: 700px;
margin: 0 auto 40px;
color: #555;
font-size: 1.15em;
}
#plans p.link-more{
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
}
#plans p.link-more a{
color: var(--main-color);
}
#features  p.link-more, #faq p.link-more{
margin-top: 30px;
font-size: 22px;
text-align:left;
}
#faq p.link-more a{
color: var(--secondary-color);
}
/* ========== القائمة العلوية ========== */
.main-nav {
background: var(--card-bg);
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
position: fixed;
width: 100%;
top: 0;
z-index: 1000;
}
.main-nav .container {
display: flex;
justify-content: space-between;
align-items: center;
height: 80px;
}
.logo img {
height: 50px;
}
.nav-links {
display: flex;
list-style: none;
gap: 2.5rem;
}
.nav-links a {
text-decoration: none;
color: var(--medium-gray);
font-weight: 500;
transition: var(--transition-fast);
position: relative;
padding: 0.5rem 0;
}
.nav-links a.active {
color: var(--secondary-color);
font-weight: bold;
}
.nav-links a:hover {
color: var(--primary-gold);
transform: translateY(-1px);
}
.nav-links a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--gradient-gold);
transition: var(--transition-fast);
transform: translateX(-50%);
border-radius: 2px;
}
.nav-links a:hover::after {
width: 100%;
}
.nav-toggle {
display: none;
background: none;
border: none;
font-size: 1.8em;
color: var(--main-color);
cursor: pointer;
}
/* ========== القسم الرئيسي (Hero) ========== */
.hero {
padding: 130px 0 0;
background: linear-gradient(180deg, var(--main-color) 0%, var(--card-bg) 90%);
position: relative;
overflow: hidden;
}
.hero-content h1 {
font-size: 3em;
margin-bottom: 30px;
color: var(--secondary-color);
}
.hero-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 320px;
  min-height: 320px;
  z-index:0;
}
.dashboard-preview {
position: absolute;
    max-width: 100%;
    z-index: 1;
    bottom: -30px;
    opacity: 0.3;
}
.floating-elements {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
}
.floating-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  box-shadow: 0 4px 18px rgba(0,0,0,0.08);
  border-radius: 16px;
  padding: 12px 22px;
  font-size: 1.1em;
  white-space: nowrap;
  color: #222;
  z-index: 2;
  opacity: 0.95;
  animation: floatCard 4s ease-in-out infinite alternate;
}
.floating-card.card-1 { top: 10%; left: 0%; }
.floating-card.card-2 { top: 70%; left: 8%; }
.floating-card.card-3 { top: 40%; left: 50%; }
.floating-card.card-4 { top: 0%; left: 65%; }
.floating-card.card-5 { top: 65%; left: 80%; }
@media (max-width: 700px) {
.hero-image {
  display: none;
}

.floating-card.card-1 { top: 10%; left: 0%; }
.floating-card.card-2 { top: 70%; left: 8%; }
.floating-card.card-3 { top: 40%; left: 45%; }
.floating-card.card-4 { top: 0%; left: 65%; }
.floating-card.card-5 { top: 65%; left: 60%; }
}
.floating-card i {
  font-size: 1.5em;
  color: #ffd700;
  margin-left: 6px;
}
.cta-buttons {
gap: 15px;
flex-wrap: wrap;
}
.btn {
background: var(--light-bg);
padding: 12px 30px;
border-radius: 30px;
text-decoration: none;
font-weight: 500;
color: var(--main-color);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.77, 0.2, 0.18, 1);
will-change: transform;
}
.primary-btn {
background: var(--main-color);
color: var(--secondary-color);
border: 2px solid var(--main-color);
}
.secondary-btn {
background: transparent;
color: var(--secondary-color);
border: 2px solid var(--main-color);
}
.btn:hover {
background: var(--secondary-color);
color: var(--main-color);
border: 2px solid var(--secondary-color);
}
.btn.active {
background: var(--secondary-color);
color: var(--main-color);
border: 2px solid var(--secondary-color);
}
/* ========== ظهور العناصر عند النزول بالصفحة ========== */
.reveal {
opacity: 0;
transform: translateY(40px);
transition: opacity 0.8s cubic-bezier(.77,.2,.18,1), transform 0.8s cubic-bezier(.77,.2,.18,1);
}
.reveal.visible {
opacity: 1;
transform: translateY(0);
}
.services {
padding: 80px 0;
background: var(--light-bg);
}
.carousel-container {
position: relative;
max-width: 100%;
margin: 0 auto;
display: flex;
align-items: center;
}
.carousel {
width: 100%;
min-width: 0;
border-radius: 20px;
height: 150px;
position: relative;
overflow: hidden;
}
.carousel-track {
display: flex;
transition: transform 0.5s ease;
height: 100%;
direction: ltr;
}
.carousel-slide {
min-width: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0px 20px 0px 20px;
text-align: center;
}
.carousel-slide i {
font-size: 2.5em;
color: var(--main-color);
margin-bottom: 15px;
}
.carousel-slide h3 {
font-size: 1.5em;
color: var(--secondary-color);
margin-bottom: 10px;
}
.carousel-slide p {
color: var(--text-light);
font-size: 1em;
line-height: 1.5;
}
.carousel-btn {
background: rgba(255, 255, 255, 0.7);
border: none;
border-radius: 50%;
width: 40px;
height: 40px;
font-size: 1.2em;
color: var(--secondary-color);
cursor: pointer;
transition: all 0.3s;
}
.carousel-btn:hover {
background: var(--main-color);
color: var(--secondary-color);
}
.carousel-dots {
text-align: center;
margin-top: 10px;
position: relative;
z-index: 2;
pointer-events: auto;
}
.dot {
display: inline-block;
width: 10px;
height: 10px;
background: #ccc;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
transition: background 0.3s;
}
.dot.active {
background: var(--main-color);
}
/* ========== قسم لماذا يومي ========== */
.why {
padding: 180px 0 80px;
background: var(--card-bg);
}
.why-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.why-card {
padding: 32px 28px;
text-align: center;
border-radius: 16px;
text-align: center;
opacity: 0;
transform: translateY(40px);
transition: opacity 0.6s cubic-bezier(.4,0,.2,1) var(--delay), transform 0.6s cubic-bezier(.4,0,.2,1) var(--delay);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.why-card.in-view {
opacity: 1;
transform: translateY(0);
}
.why-card h3 {
font-size: 1.3em;
margin-bottom: 15px;
color: var(--secondary-color);
}
.why-card i {
font-size: 2.2em;
color: var(--main-color);
margin-bottom: 20px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-bounce);
}
/* ========== قسم المميزات ========== */
.features {
  padding: 80px 0;
  background: var(--light-gold);
}
.features-page-section {
  padding: 60px 0 80px 0;
}
.features-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 40px;
}
.feature-block {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0,0,0,0.07);
  padding: 32px 22px 28px 22px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.feature-block:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 10px 32px rgba(255, 215, 0, 0.13);
}
.feature-block i {
  font-size: 2.2em;
  color: var(--main-color);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
}
.feature-block h3 {
  font-size: 1.18em;
  color: #222;
  margin-bottom: 12px;
  font-weight: 700;
}
.feature-block p {
  color: #555;
  font-size: 1em;
  line-height: 1.7;
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}
.feature-card {
  background: var(--card-bg);
  padding: 32px 28px;
  text-align: center;
  border-radius: 16px;
  transition: var(--transition-smooth);
  border: 1px solid rgba(245, 184, 0, 0.08);
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-gold);
  transform: scaleX(0);
  transition: var(--transition-smooth);
  transform-origin: left;
}
.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
}
.feature-card:hover i {
  transform: scale(1.1) rotate(5deg);
  filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}
.feature-card h3 {
  font-size: 1.3em;
  margin-bottom: 15px;
  color: var(--secondary-color);
}
.feature-card:hover::before {
  transform: scaleX(1);
}
.feature-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: rgba(245, 184, 0, 0.2);
}
.feature-card i {
  font-size: 2.2em;
  color: var(--main-color);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition-bounce);
}
.feature-card i::after {
  content: '';
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border-radius: 24px;
  opacity: 0;
  transition: var(--transition-smooth);
  z-index: -1;
}
.feature-card i:hover .feature-icon {
  transform: rotate(5deg) scale(1.1);
}
.feature-card i:hover .feature-icon::after {
  opacity: 0.2;
  transform: rotate(-5deg);
}
/* قسم المميزات */
.features {
padding: 80px 0;
}
.features-page-section {
padding: 60px 0 80px 0;
}
.features-list-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 32px;
margin-top: 40px;
}
.feature-block {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 18px rgba(0,0,0,0.07);
padding: 32px 22px 28px 22px;
text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
}
.feature-block:hover {
transform: translateY(-6px) scale(1.03);
box-shadow: 0 10px 32px rgba(255, 215, 0, 0.13);
}
.feature-block i {
font-size: 2.2em;
color: var(--main-color);
margin-bottom: 20px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.feature-block h3 {
font-size: 1.18em;
color: #222;
margin-bottom: 12px;
font-weight: 700;
}
.feature-block p {
color: #555;
font-size: 1em;
line-height: 1.7;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
}
.feature-card {
background: var(--card-bg);
padding: 32px 28px;
text-align: center;
border-radius: 16px;
text-align: center;
transition: var(--transition-smooth);
border: 1px solid rgba(245, 184, 0, 0.08);
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
position: relative;
overflow: hidden;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-gold);
transform: scaleX(0);
transition: var(--transition-smooth);
transform-origin: left;
}
.feature-card:hover {
transform: translateY(-8px) scale(1.02);
}
.feature-card:hover i {
transform: scale(1.1) rotate(5deg);
filter: drop-shadow(0 4px 8px rgba(255, 215, 0, 0.3));
}
.feature-card h3 {
font-size: 1.3em;
margin-bottom: 15px;
color: var(--secondary-color);
}
.feature-card:hover::before {
transform: scaleX(1);
}
.feature-card:hover {
transform: translateY(-12px) scale(1.02);
border-color: rgba(245, 184, 0, 0.2);
}
.feature-card i {
font-size: 2.2em;
color: var(--main-color);
margin-bottom: 20px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition-bounce);
}
.feature-card i::after {
content: '';
position: absolute;
top: -4px;
left: -4px;
right: -4px;
bottom: -4px;
border-radius: 24px;
opacity: 0;
transition: var(--transition-smooth);
z-index: -1;
}
.feature-card i:hover .feature-icon {
transform: rotate(5deg) scale(1.1);
}
.feature-card i:hover .feature-icon::after {
opacity: 0.2;
transform: rotate(-5deg);
}
/* ========== قسم الأسعار ========== */
.pricing {
padding: 80px 0;
background: var(--secondary-color);
animation: pricing-bg-move 8s linear infinite alternate;
}
.pricing .section-title {
color: var(--white-color);
}
.pricing .section-description {
color: var(--soft-gray);
}
@keyframes pricing-bg-move {
0% { background-position: 0% 50%; }
100% { background-position: 100% 50%; }
}
@keyframes fadeUpStagger {
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.pricing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
margin-top: 50px;
}
.pricing-card {
background: var(--card-bg);
border-radius: 15px;
padding: 40px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
transition: all 0.3s;
opacity: 0;
transform: translateY(40px);
animation: fadeUpStagger 1s cubic-bezier(0.77, 0.2, 0.18, 1) forwards;
}
.pricing-card:nth-child(1) { animation-delay: 0.3s; }
.pricing-card:nth-child(2) { animation-delay: 0.6s; }
.pricing-card:nth-child(3) { animation-delay: 0.9s; }
.pricing-card:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.2);
}
.pricing-card.featured {
transform: scale(1.05);
border: 2px solid var(--main-color);
}
.featured-label {
position: absolute;
top: -20px;
right: 0;
left: 0;
margin: auto;
width: 100px;
background: var(--accent-gold);
color: var(--dark-gold);
padding: 5px 15px;
border-radius: 20px;
font-size: 0.9em;
}
.plan-price {
font-size: 2em;
color: var(--secondary-color);
font-weight: 700;
margin: 10px 0;
}
.old-price {
color:#d32f2f;
text-decoration:line-through;
font-size: 1.5em;
}
.plan-discount {
color: #f5b800;
font-weight:bold;
font-size: 15px;
display:inline-block;
position: absolute;
top: 15px;left: 15px;
background: rgba(245, 184, 0, 0.2);
border-radius: 50%;
width: 45px;
height: 45px;
line-height: 45px;
}
.plan-span {
display:block;
margin-top:4px;
}
.plan-features {
list-style: none;
margin: 10px 0;
text-align: right;
padding: 0;
}
.plan-features li {
margin: 15px 0;
display: flex;
align-items: center;
gap: 10px;
}
.plan-features i {
color: var(--main-color);
}
.pricing-card .btn {
margin-top: auto;
}
/* ========== قسم اراء العملاء (Review) ========== */
.reviews-section {
padding: 80px 0 5px;
background: linear-gradient(0deg, #f4f4f4 0%, #fff 100%);
position: relative;
}
.reviews-slider {
position: relative;
overflow: hidden;
margin-bottom: 50px;
}
.reviews-container {
display: flex;
transition: transform 0.5s ease;
gap: 20px;
}
.review-slide {
min-width: 360px;
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
border: 1px solid #e2e8f0;
position: relative;
}
.customer-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 20px;
}
.customer-info {
display: flex;
align-items: center;
gap: 12px;
}
.customer-details h4 {
color: #1a202c;
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
}
.stars {
display: flex;
gap: 2px;
}
.star {
color: #fbbf24;
font-size: 1.125rem;
}
.review-text {
font-size: 0.95rem;
line-height: 1.6;
color: #4a5568;
margin-top: 12px;
}
.slider-controls {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
margin-top: 30px;
}
.slider-btn {
background: white;
border: 2px solid #ccc;
border-radius: 50%;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #ccc;
font-size: 1.2rem;
font-weight: bold;
}
.slider-btn:hover {
border-color: #999;
color: #999;
transform: scale(1.1);
}
.slider-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
#prevBtn::before {
content: '‹';
}
#nextBtn::before {
content: '›';
}
.slider-dots {
display: flex;
gap: 8px;
}
.dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #ccc;
cursor: pointer;
transition: all 0.3s ease;
}
.dot.active {
background: #999;
transform: scale(1.2);
}
@media (max-width: 768px) {
.section-title {
font-size: 1.875rem;
}
.review-slide {
min-width: 300px;
padding: 20px;
}
.customer-header {
flex-direction: column;
align-items: flex-start;
gap: 12px;
}
.stars {
align-self: flex-end;
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.review-slide {
animation: slideIn 0.5s ease forwards;
}
/* ========== قسم الأسئلة الشائعة (FAQ) ========== */
.faq {
padding: 80px 0;
background: linear-gradient(180deg, #f4f4f4 0%, #fff 100%);
position: relative;
}
.faq-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-top: 40px;
align-items: stretch;
}
.faq-item {
background: var(--white);
border: 1px solid rgba(245, 184, 0, 0.1);
border-radius: 16px;
margin-bottom: 1.5rem;
overflow: hidden;
box-shadow: var(--shadow-soft);
transition: var(--transition-smooth);
position: relative;
padding: 1.5rem;
}
.faq-item::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: var(--gradient-gold);
transform: scaleY(0);
transition: var(--transition-smooth);
transform-origin: bottom;
}
.faq-item.active::before {
transform: scaleY(1);
}
.faq-question {
background: var(--white);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition-smooth);
position: relative;
overflow: hidden;
}
.faq-question::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(245, 184, 0, 0.05), transparent);
transition: var(--transition-smooth);
}
.faq-question h3 {
font-size: 1.2rem;
margin: 0;
color: var(--charcoal);
font-weight: 500;
transition: var(--transition-fast);
}
.faq-item.active .faq-question h3 {
color: var(--dark-gold);
}
.faq-question i {
color: var(--primary-gold);
font-size: 1.3rem;
transition: var(--transition-smooth);
background: rgba(245, 184, 0, 0.1);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.faq-item.active .faq-question i {
background: var(--primary-gold);
color: var(--black);
transform: rotate(45deg);
}
.faq-answer {
overflow: hidden;
transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
background: rgba(245, 184, 0, 0.01);
}
.faq-answer p {
color: var(--medium-gray);
line-height: 1.8;
font-size: 1rem;
margin: 0;
}
/* ========== قسم التواصل ========== */
.request {
padding: 80px 0;
background: var(--card-bg);
}
/* ========== الفوتر ========== */
footer {
background: var(--secondary-color);
color: var(--card-bg);
padding: 60px 0 30px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 40px;
}
.footer-col h4 {
color: var(--white-color);
margin-bottom: 20px;
}
.footer-col ul {
list-style: none;
padding: 0;
}
.footer-col li {
margin-bottom: 15px;
}
.footer-col a {
color: #ecf0f1;
text-decoration: none;
transition: color 0.3s;
}
.footer-col a:hover {
color: var(--main-color);
}
.footer-contact-list li {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 15px;
}
.footer-contact-list i {
color: var(--gray-bg);
width: 20px;
}
.footer-contact-list a span {
margin-right: 5px;
}
/* ========== الاستجابة للشاشات ========== */
@media (max-width: 768px) {
.nav-links {
display: none;
}
.hero-content h1 {
font-size: 2.2em;
}
.faq-container {
grid-template-columns: 1fr;
}
.header-grid {
grid-template-columns: 1fr;
}
.pricing-card.featured {
transform: scale(1);
}
.carousel-container {
flex-direction: column;
gap: 15px;
}
.carousel-slide {
min-width: 100%;
}
}
/* ========== الهيدر ========== */
.header {
display: block;
margin-top: 40px;
text-align: center;
}
.header-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-top: 40px;
align-items: stretch;
}
.header-item {
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
min-width: 0;
}
.header-text {
flex: 1;
}
.header-text h1 {
font-size: 2.9rem;
color: var(--secondary-color);
margin-bottom: 20px;
line-height: 1.3;
opacity: 0;
transform: translateY(40px);
animation: fadeUp 1.2s cubic-bezier(0.77, 0.2, 0.18, 1) 0.3s forwards;
position: relative;
z-index: 1;
}
.header-text p {
font-size: 1.45rem;
color: var(--text-light);
margin-bottom: 30px;
opacity: 0;
transform: translateY(40px);
animation: fadeUp 1.2s cubic-bezier(0.77, 0.2, 0.18, 1) 0.6s forwards;
position: relative;
z-index: 1;
}
.cta-buttons {
display: flex;
gap: 15px;
opacity: 0;
transform: translateY(40px);
animation: fadeUp 1.2s cubic-bezier(0.77, 0.2, 0.18, 1) 0.9s forwards;
position: relative;
z-index: 1;
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 900px) {
.nav-toggle {
display: block;
}
.nav-links {
position: fixed;
top: 80px;
right: 0;
background: var(--card-bg);
width: 220px;
height: 100vh;
flex-direction: column;
align-items: flex-start;
padding: 30px 20px;
gap: 18px;
box-shadow: -2px 0 12px rgba(0,0,0,0.07);
transform: translateX(100%);
transition: transform 0.3s;
z-index: 2000;
display: flex;
}
.nav-links.open {
transform: translateX(0);
}
.header-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.header-item {
width: 100%;
margin: auto;
text-align: center;
}
.header-item a{
margin: auto;
}
.carousel-container {
margin-top: 18px;
width: 100%;
min-width: 0;
margin: 0 auto;
box-sizing: border-box;
}
.carousel {
height: 200px;
}
.carousel-dots {
margin-top: 0;
}
.features {
padding: 100px 0 80px;
}
.why {
padding: 100px 0 80px;
}
.header-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.faq-list-grid {
grid-template-columns: 1fr;
gap: 18px;
}
}
.success-message {
background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
border-radius: 12px;
padding: 20px 15px;
margin: 15px 0;
text-align: center;
}
.success-message h4 {
color: #2e7d32;
font-size: 1.3em;
margin-bottom: 10px;
}
.success-message p {
color: #2e7d32;
font-size: 1.1em;
}
.error-messages {
background: linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%);
border-radius: 12px;
padding: 20px 15px;
margin: 15px 0;
}
.error-messages h4 {
color: #c62828;
margin-bottom: 15px;
}
.error-messages ul {
padding-right: 25px;
}
.error-messages li {
color: #c62828;
margin-bottom: 8px;
font-weight: 500;
}
#contactForm .form-group {
margin-bottom: 25px;
}
#contactForm .form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #333;
font-size: 1.1em;
}
#contactForm .form-group input,
#contactForm .form-group select,
#contactForm .form-group textarea {
width: 100%;
padding: 15px;
border: 2px solid #e1e5e9;
border-radius: 10px;
font-size: 16px;
font-family: inherit;
}
#contactForm .form-group input:focus,
#contactForm .form-group select:focus,
#contactForm .form-group textarea:focus {
outline: none;
border-color: #000;
}
#contactForm .form-group textarea {
min-height: 120px;
resize: vertical;
}
#contactForm .form-group label::before {
content: '\f621';
font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free', Arial, sans-serif;
color: #e53935;
font-weight: 900;
font-size: 5px;
vertical-align: middle;
margin-left: 5px;
display: inline-block;
}
#contactForm .submit-btn {
background: var(--main-color);
padding: 12px 30px;
text-decoration: none;
font-family: inherit;
font-weight: 500;
color: var(--secondary-color);
cursor: pointer;
border: none;
border-radius: 10px;
}
#contactForm .submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
.cta-free-demo {
background: linear-gradient(88deg, #ffef97 0%, #fff 100%);
padding: 50px 0 30px 0;
position: relative;
z-index: 1;
overflow: hidden;
}
.cta-free-demo-box.global-flex-cta {
margin: 0 auto;
border-radius: 18px;
padding: 40px 0;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
overflow: hidden;
min-height: 160px;
}
.cta-free-demo-content {
text-align: right;
flex: 1 1 60%;
z-index: 2;
}
.cta-title {
font-size: 2em;
color: var(--secondary-color, #222);
font-weight: 800;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 12px;
}
.cta-title .cta-icon {
color: #ffd700;
font-size: 1.3em;
margin-left: 8px;
}
.cta-desc {
color: #555;
font-size: 1.15em;
margin-bottom: 0;
}
.cta-free-demo-action {
flex: 0 0 auto;
z-index: 2;
}
.cta-btn {
background: #fffbe0;
border: none;
font-size: 1.1em;
padding: 16px 38px;
border-radius: 30px;
font-weight: 700;
transition: all 0.2s;
display: flex;
align-items: center;
gap: 10px;
}
.cta-btn i {
font-size: 1.1em;
}
.cta-btn:hover {
background: #fffbe0;
color: var(--secondary-color, #ffd700);
border: none;
}
.cta-bg-svg {
position: absolute;
left: -40px;
bottom: -40px;
z-index: 1;
opacity: 0.5;
pointer-events: none;
}
@media (max-width: 900px) {
.cta-free-demo-box.global-flex-cta {
flex-direction: column;
align-items: stretch;
padding: 25px 10px 20px 10px;
min-height: unset;
}
.cta-free-demo-content {
text-align: center;
margin-bottom: 18px;
}
.cta-free-demo-action {
text-align: center;
}
.cta-bg-svg {
left: 0;
bottom: 0;
width: 120px;
height: 120px;
}
.cta-title {
font-size: 1.2em;
justify-content: center;
}
.cta-desc {
font-size: 1em;
}
}
/* ========== قسم خطط يومي plans ========== */
.plans-page-section {
padding: 60px 0 80px 0;
}
.plans-page-section .plan-header i {
font-size: 2.2em;
color: var(--main-color);
margin-bottom: 20px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.plans-page-section .plans-note {
margin-top: 32px;
color: #888;
font-size: 1em;
text-align: center;
background: #fffbe0;
border-radius: 12px;
padding: 14px 10px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.plans-comparison-table {
width: 100%;
border-collapse: collapse;
text-align: center;
background: #fff;
margin: 2rem 0;
box-shadow: 0 2px 8px #eee;
border-radius: 8px;
overflow: hidden;
font-size: 1rem;
}
.plans-comparison-table thead{
background: #f7f7f7;
}
.plans-comparison-table th, .plans-comparison-table td {
padding: 12px 8px;
border-bottom: 1px solid #eee;
}
.plans-comparison-table th {
background: #f7f7f7;
font-weight: bold;
color: #333;
}
.plans-comparison-table tr:last-child td {
border-bottom: none;
}
.plans-comparison-table td {
color: #222;
}
.plans-comparison-table td:nth-child(2),
.plans-comparison-table td:nth-child(3),
.plans-comparison-table td:nth-child(4) {
font-weight: bold;
}
.plans-comparison-table td {
font-size: 1.05em;
}
.plans-comparison-table td.yes {
color: #1a7f37;
font-size: 1.2em;
}
.plans-comparison-table td.no {
color: #d32f2f;
font-size: 1.2em;
}
.plans-comparison-section {
margin: 2rem 0 0;
}
.plans-comparison-section h2 {
margin: 2rem 0 1rem;
}

.plans-faq-section {
margin: 2rem 0 0;
}
.plans-faq-section h2 {
margin: 2rem 0 1rem;
}
.faq-list {
background:#f9f9f9;
padding:1.5rem 1.5rem 0.5rem;
border-radius:8px;
box-shadow:0 1px 4px #eee
}
.faq-list ul {
list-style: none;
padding: 0;
margin: 0;
}
.faq-list li {
margin-bottom: 1rem;
font-size: 1.05em;
color: #333;
}
.faq-list strong {
color: #000;
}
.faq-list div {
margin-top: 1.5rem;
font-weight: bold;
color: #000;
font-size: 1.08em;
text-align: center;
}
/* ========== قسم الأسئلة الشائعة faq ========== */
.faq-page-section {
padding: 60px 0 80px 0;
}
.faq-list-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
gap: 30px;
margin-top: 40px;
}
.faq-block {
background: #fff;
border-radius: 16px;
box-shadow: 0 4px 18px rgba(0,0,0,0.07);
padding: 28px 22px 22px 22px;
transition: transform 0.2s, box-shadow 0.2s;
position: relative;
border: 1px solid #ffd700;
}
.faq-block h3 {
font-size: 1.1em;
color: #222;
margin-bottom: 12px;
font-weight: 700;
display: flex;
align-items: center;
gap: 8px;
}
.faq-block h3 i {
color: #ffd700;
font-size: 1.2em;
}
.faq-block p {
color: #555;
font-size: 1em;
line-height: 1.7;
margin: 0;
}
@media (max-width: 700px) {
.faq-list-grid {
grid-template-columns: 1fr;
gap: 18px;
}
.faq-block {
padding: 18px 10px 14px 10px;
}
}
/* ========== قسم تواصل معنا contactus ========== */
.contactus-page-section {
padding: 60px 0 80px 0;
align-items: center;
justify-content: center;
text-align: center;
}