/* ----------------------------------------------
   style_modern.css | Money Maker Premium Theme
   الإصدار 2.0 - تأثيرات 3D، تحسينات الفورم والأكورديون
   الألوان: #FFE800, #E59200, #D45900, #380E87, #850E95, #D60EA4
------------------------------------------------- */
:root {
  --gold: #FFE800;
  --gold-dark: #E5C100;
  --orange-bright: #E59200;
  --orange-deep: #D45900;
  --purple-deep: #380E87;
  --purple-magenta: #850E95;
  --pink-vibrant: #D60EA4;
  --grad-gold: linear-gradient(135deg, #FFE800 0%, #E59200 100%);
  --grad-purple: linear-gradient(135deg, #380E87 0%, #850E95 100%);
  --grad-magenta: linear-gradient(135deg, #850E95, #D60EA4);
  --grad-dark: linear-gradient(145deg, #1e0b2e, #0e051c);
  --shadow-3d: 0 20px 35px -12px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.1);
  --shadow-3d-hover: 0 25px 40px -15px rgba(0,0,0,0.4), 0 0 0 2px rgba(255,232,0,0.3);
  --shadow-inset: inset 0 2px 5px rgba(0,0,0,0.05);
  --transition-smooth: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

body {
  font-family: 'Quicksand', sans-serif;
  overflow-x: hidden;
  background: #fef9f0;
}

/* Custom Scrollbar 3D */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #f1e8e0;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #E59200, #D45900);
  border-radius: 10px;
  box-shadow: inset 0 0 3px rgba(0,0,0,0.2);
}

/* ========== Navbar 3D ========== */
.site-navbar {
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px -8px rgba(0,0,0,0.15);
  transition: var(--transition-smooth);
  border-bottom: 1px solid rgba(255,232,0,0.3);
}
.site-navbar .site-logo img {
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
  transition: transform 0.2s;
}
.site-navbar .site-logo:hover img {
  transform: scale(1.03) translateY(-2px);
}
.site-menu .nav-link {
  font-weight: 600;
  color: #2d2a2e !important;
  transition: var(--transition-smooth);
  position: relative;
}
.site-menu .nav-link:after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  background: var(--grad-gold);
  border-radius: 10px;
  transition: 0.3s;
}
.site-menu .nav-link:hover:after,
.site-menu .active .nav-link:after {
  width: 100%;
}
.site-menu .nav-link:hover {
  color: #E59200 !important;
  transform: translateY(-2px);
}

/* ========== Hero Section 3D ========== */
.site-blocks-cover {
  position: relative;
  background-size: cover;
  background-position: center 30%;
  overflow: hidden;
}
.site-blocks-cover:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 10% 30%, rgba(56,14,135,0.7), rgba(13, 5, 45, 0.85));
  z-index: 1;
}
.site-blocks-cover > .container-fluid {
  position: relative;
  z-index: 2;
}
.site-blocks-cover h1 {
  font-size: 3.4rem;
  font-weight: 800;
  text-shadow: 3px 3px 15px rgba(0,0,0,0.5);
  background: linear-gradient(135deg, #FFF8D6, #FFE800, #FFBB33);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: textGlow 3s infinite alternate;
}
@keyframes textGlow {
  0% { text-shadow: 0 0 5px rgba(255,232,0,0.3); }
  100% { text-shadow: 0 0 20px rgba(255,232,0,0.8); }
}
.btn-primary {
  background: var(--grad-gold);
  border: none;
  padding: 14px 38px;
  border-radius: 50px;
  font-weight: 700;
  color: #2c1a2e !important;
  box-shadow: var(--shadow-3d);
  transition: var(--transition-smooth);
  letter-spacing: 0.5px;
  position: relative;
  overflow: hidden;
}
.btn-primary:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  transition: 0.5s;
}
.btn-primary:hover:before {
  left: 100%;
}
.btn-primary:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 30px -12px rgba(229,146,0,0.6);
  background: linear-gradient(135deg, #FFD600, #FFB347);
}
.mockup-slider {
  filter: drop-shadow(0 30px 25px rgba(0,0,0,0.3));
  animation: floatImage 3s ease-in-out infinite;
  max-width: 25%;
  transform-style: preserve-3d;
}
@keyframes floatImage {
  0% { transform: translateY(0px) rotateX(0deg); }
  50% { transform: translateY(-15px) rotateX(2deg); }
  100% { transform: translateY(0px) rotateX(0deg); }
}

#about-sections .mockup-slider{
      max-width: 55% !important;
}
.img-container img{
  max-width: 100% !important;

}

.topPaddingHeader{
  padding-top: 260px;
}
/* ========== Results Cards 3D ========== */
.results-card {
  background: rgba(255,255,245,0.9);
  backdrop-filter: blur(12px);
  border-radius: 70px;
  padding: 30px 20px;
  box-shadow: var(--shadow-3d);
  border: 1px solid rgba(255,232,0,0.5);
  margin-top: -60px;
  position: relative;
  z-index: 10;
  transition: var(--transition-smooth);
}
.results-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 45px -15px rgba(0,0,0,0.2);
}
.results-title {
  font-size: 3rem;
  font-weight: 800;
  background: var(--grad-purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.1);
}
.results-text {
  font-weight: 600;
  color: #4a2e5a;
}

/* ========== About Boxes 3D ========== */
.about-box {
  background: linear-gradient(145deg, #ffffff, #fff6e5);
  border-radius: 28px;
  padding: 18px 20px;
  text-align: center;
  font-weight: 700;
  color: #380E87;
  box-shadow: var(--shadow-3d);
  transition: var(--transition-smooth);
  border-left: 5px solid var(--gold);
  transform-style: preserve-3d;
}
.about-box:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-3d-hover);
  border-left-color: #D60EA4;
}

/* ========== Features 3D ========== */
.unit-4-icon span {
  font-size: 2.8rem;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: 0.2s;
}
.unit-4 {
  background: white;
  padding: 28px 20px;
  border-radius: 40px;
  transition: var(--transition-smooth);
  box-shadow: var(--shadow-3d);
  border: 1px solid #ffe6b3;
  transform-style: preserve-3d;
}
.unit-4:hover {
  transform: translateY(-12px) rotateX(2deg);
  box-shadow: 0 35px 40px -18px rgba(133,14,149,0.4);
  border-color: #850E95;
}
.unit-4 h3 {
  font-weight: 700;
  color: #1f1a2e;
}

/* ========== Download Section 3D ========== */
.download-header h3 {
  font-size: 2.6rem;
  font-weight: 800;
  background: var(--grad-purple);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.download-btn {
  background: var(--grad-gold);
  border: none;
  padding: 14px 38px;
  border-radius: 60px;
  font-weight: bold;
  transition: 0.2s;
  box-shadow: var(--shadow-3d);
}
.download-btn:hover {
  background: linear-gradient(135deg, #F5D300, #FFB347);
  transform: scale(1.03) translateY(-3px);
  box-shadow: var(--shadow-3d-hover);
}

/* ========== FAQ Accordion - تحسين 3D وإصلاح ========== */
.accordion {
  background: white;
  cursor: pointer;
  padding: 22px 30px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 1.2rem;
  font-weight: 700;
  transition: var(--transition-smooth);
  border-radius: 60px;
  margin-bottom: 15px;
  box-shadow: var(--shadow-3d);
  color: #2d1c3a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.accordion:after {
  content: '\e9af';
  font-family: 'icomoon';
  font-size: 1.4rem;
  color: #E59200;
  transition: 0.3s;
}
.accordion.active:after {
  transform: rotate(180deg);
  color: #D60EA4;
}
.accordion:hover {
  background: #fff4e5;
  transform: translateY(-3px);
  box-shadow: var(--shadow-3d-hover);
}
.panel {
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  border-radius: 30px;
  margin-bottom: 20px;
  background: #fffdf9;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05), 0 2px 5px rgba(0,0,0,0.02);
}
.panel p {
  padding: 20px 15px;
  color: #3e2a4a;
  line-height: 1.6;
}

/* ========== Contact Form - تصميم 3D رائع ========== */
#contactForm {
  border-radius: 40px !important;
  box-shadow: var(--shadow-3d) !important;
  transition: var(--transition-smooth);
  background: white !important;
  border: 1px solid rgba(255,232,0,0.3);
}
#contactForm:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 45px -15px rgba(0,0,0,0.25) !important;
}
.form-control {
  border-radius: 60px !important;
  border: 1px solid #ffe1b3 !important;
  padding: 14px 22px !important;
  transition: var(--transition-smooth);
  background: #fffef8;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.03);
}
.form-control:focus {
  border-color: #E59200 !important;
  box-shadow: 0 0 0 4px rgba(229,146,0,0.2), inset 0 1px 2px rgba(0,0,0,0.05) !important;
  transform: scale(1.01);
}
textarea.form-control {
  border-radius: 30px !important;
}
.btn-primary.text-white {
  background: var(--grad-purple);
  color: white !important;
  box-shadow: var(--shadow-3d);
  padding: 12px 32px;
  border-radius: 60px;
}
.btn-primary.text-white:hover {
  background: linear-gradient(135deg, #4b1c9e, #a114a8);
  transform: translateY(-3px);
  box-shadow: var(--shadow-3d-hover);
}

/* ========== Contact Side Card - 3D ========== */
.bg-white.rounded-4, .p-4.mb-3.bg-white {
  border-radius: 40px !important;
  box-shadow: var(--shadow-3d) !important;
  transition: var(--transition-smooth);
  border: 1px solid rgba(255,232,0,0.2);
  background: white !important;
}
.p-4.mb-3.bg-white:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-3d-hover) !important;
}
.p-4.mb-3.bg-white p {
  margin-bottom: 12px;
}
.p-4.mb-3.bg-white .font-weight-bold {
  color: #380E87;
  font-size: 1.1rem;
}

/* ========== Footer 3D ========== */
.site-footer {
  background: var(--grad-dark);
  color: #f3e6ff;
  padding-top: 60px;
  box-shadow: 0 -10px 30px -10px rgba(0,0,0,0.2);
}
.footer-heading {
  color: #FFE800;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
.site-footer a {
  color: #ffd966;
  transition: 0.2s;
}
.site-footer a:hover {
  color: #fff0b5;
  text-decoration: none;
  transform: translateX(3px);
  display: inline-block;
}
.icon-facebook, .icon-twitter, .icon-instagram {
  font-size: 1.5rem;
  background: rgba(255,232,0,0.15);
  padding: 10px;
  border-radius: 50%;
  transition: 0.2s;
  display: inline-block;
  margin: 0 4px;
}
.icon-facebook:hover, .icon-twitter:hover, .icon-instagram:hover {
  background: #FFE800;
  color: #1f0a2e !important;
  transform: translateY(-3px);
  box-shadow: 0 5px 12px rgba(0,0,0,0.2);
}

/* ========== Animations & Responsive ========== */
[data-aos] {
  transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.typed-words {
  color: #FFE800;
  text-shadow: 0 0 12px #D45900;
  font-weight: 800;
}
.pointer {
  cursor: pointer;
}
.scale {
  transition: transform 0.2s;
}
.scale:hover {
  transform: scale(1.07) translateY(-3px);
}

@media (max-width: 768px) {
  .results-title { font-size: 2rem; }
  .site-blocks-cover h1 { font-size: 2.2rem; }
  .mockup-slider { max-width: 35%; }
  #about-sections .mockup-slider{max-width: 35%;}
  .icon-menu:before{right: 25px;}
  .results-card { margin-top: 20px; border-radius: 40px; }
  .accordion { padding: 16px 20px; font-size: 1rem; }
  .d-inline-block.d-xl-none.ml-md-0.mr-auto.py-3{
        left: 0 !important;
  }
  .img-container img{max-width: 60% !important;}
  .img-container{
    height: auto;
text-align: center;
max-width: 100%;
  }
}