/* Base */
html { scroll-behavior: smooth; }
body {
  font-family: "Cairo", sans-serif;
  direction: rtl;
  text-align: right;
  background-color: #f9f9f9;
  overflow-x: hidden;
}

/* Theme vars */
:root {
  --primary-color: #288be6;
  --secondry-color: #05111d;
  --footer-img-opacity: 0.99; 
}

/* ===== HERO surface ===== */
.hero-surface{
  background: radial-gradient(140% 100% at 0% 0%, #0f2236 0%, #0a1726 60%, #08131f 100%);
}

/* ===== Generic media card ===== */
.media-card{
  border-radius: 24px;
  padding: 16px;
}

/* Phone / image exact sizes */
.hero-phone{ width: clamp(220px, 60vw, 420px); }
.problem-img{ width: 100%; height: auto; }
.give-phone,
.phone-img{ width: clamp(220px, 38vw, 380px); height: auto; display:block; margin-inline:auto; }

/* خلفية رمادية خلف الهاتف في سكشن "اعط بدون شئ" */
.back-plate{
  position: absolute;
  inset-inline: 0;
  bottom: -14px;
  margin-inline: auto;
  width: min(680px, 88%);
  height: clamp(220px, 35vw, 320px);
  background: #EEF2F6;
  border-radius: 24px;
  z-index: 0;
}

.nav-container{ width:90%; margin:auto; }
.navbar-brand{ text-align:end; }
.download-btn button{
  border-radius: 30px; padding: 12px; width: 190px;
  background-color: var(--primary-color) !important;
}
.header-section{
  background-color: var(--secondry-color) !important;
  color: #fff; width: 90%; margin: auto; border-radius: 30px;
}
.header-text{ font-size: 64px; }
.header-text-container{ justify-content: center; flex-direction: column; height: 100%; gap: 50px; }
.header-section .app-store-buttons img{ border-radius: 30px; }

/* Feature / About */
.feature-section{ max-width: 90%; }
.feature-section .row{ justify-content: space-around; }
.feature-section img{ width:100%; }
.feature-section .row h2{ color: var(--primary-color); }
.feature-section p{ line-height: 50px; }

.about-section{ max-width: 90%; }
.about-section h2{ color: var(--primary-color); }

/* زخرفة قبل العنوان */
.about-section h2::before{
  content: "";
  background-image: url("../images/_Path_.png");
  background-size: 30px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: right;
  width: 50px; height: 70px;
}

/* دائرة UZEX الصغيرة */
.uzex-component{ align-self: center; position: relative; margin-right: 15px; }
.uzex-border{ width: 80px; }
.uzex-image{
  position: absolute; width: 40px; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* Video shell */
.background-section {
    background-color: #ebebeb;
    padding: 10px;
    width: 65%;
    border-radius: 10px;
    display: inline-block;
}

.video-player-container {
    width: 80%;
    background-color: #021331;
    border-radius: 10px;
    overflow: hidden;
    color: white;
    transform: translateX(-50%);
}

.video-player {
    width: 100%;
    height: 360px;
    display: block;
}

/* ========= GIVE SECTION  ========= */

/* عمود الموبايل */
.give-visual { position: relative; }

/* حجم الموبايل بالضبط كما في التصميم */
.give-phone{
  width: clamp(240px, 36vw, 420px);
  height: auto;
  display: block;
  margin-inline: auto;
}

/* كارت الهاتف بلا ظل/خلفية */
.give-phone-card{
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  overflow: visible;
}

/* البلايت الرمادي خلف الهاتف */
.back-plate{
  position: absolute;
  inset-inline: 0;
  margin-inline: auto;
  bottom: 18px; /* يقرّب البلايت أسفل الهاتف */
  width: clamp(340px, 42vw, 560px);
  height: clamp(200px, 28vw, 320px);
  background: #EBEBEB;
  border-radius: 24px;
  z-index: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}

/* الزخرفة العلوية (_Group_.png) فوق يمين الهاتف */
.give-doodle-top{
  position: absolute;
  top: -28px;
  right: 74px;        /* اضبطه لو عايز تتحكم في مكانها */
  width: clamp(56px, 7vw, 86px);
  height: auto;
  z-index: 2;         /* أعلى من البلايت وأسفل من الهاتف بخيط بسيط */
  opacity: .9;
}

/* الزخرفة السفلية (_Path_.png) يمين البلايت */
.give-doodle-bottom{
  position: absolute;
  right: -12px;       /* تظهر يمين البلايت */
  bottom: 22px;
  width: clamp(46px, 6vw, 72px);
  height: auto;
  z-index: 1;
  opacity: .9;
}

/* عمود النصوص: أحجام وخطوط مطابقة */
.give-title{
  font-size: clamp(24px, 2.2vw, 36px);
  line-height: 1.25;
}
.give-paragraph{
  font-size: clamp(14px, 1.1vw, 18px);
  line-height: 2.1;
  max-width: 58ch;          /* عرض مريح للنص */
}

/* ترتيب البادجز */
.give-stores img{
  border-radius: 16px;
}

/* Responsiveness */
@media (max-width: 1024px){
  .give-doodle-top{ right: 48px; top: -22px; }
  .give-doodle-bottom{ right: -8px; bottom: 18px; }
}
@media (max-width: 768px){
  .give-visual{ margin-top: 10px; }
  .back-plate{
    width: clamp(320px, 78vw, 520px);
    height: clamp(180px, 42vw, 280px);
  }
      .background-section {
        width: 80%;
    }
  .give-doodle-top{ right: 36px; top: -18px; }
  .give-doodle-bottom{ right: -6px; bottom: 16px; }
  .give-title{ text-align: center; }
  .give-paragraph{ text-align: center; margin-inline: auto; }
  .give-stores{ justify-content: center; }
}


/* Why section */
.why-section{ width: 90%; margin-top: 70px !important; }
.why-section .image-section img{ width: 300px; }
.why-section .row{ justify-content: space-evenly; align-items: center; }
.why-section h2{ color: var(--primary-color); }
.why-section p{ line-height: 50px; }

.why-section .right-section::before{
  content: "";
  background-image: url("../images/_Group_.png");
  background-repeat: no-repeat;
  position: absolute; top: -40px; left: 0; right: 0; bottom: 0;
  background-size: 80px;
}
.why-section .image-section::before{
  content: "";
  position: absolute; bottom: 0; right: 50%;
  transform: translateX(50%);
  height: 50%; background-color: #ebebeb;
  border-radius: 30px; z-index: -1; width: 100%;
}
.why-section .image-section::after{
  content: "";
  position: absolute;
  background-image: url("../images/_Path_.png");
  background-repeat: no-repeat;
  background-size: 35px; background-position: center;
  bottom: 0; right: 0%; height: 30%; width: 20%;
}

/* ===== FAQ ===== */
.faq-header h2{ color:#1a1a2e; margin:0; font-size:24px; text-align:right; }
.faq-section h1{ font-weight:bolder; line-height:130px; }
.email-text{ color:#7bdd26; }

.faq-item{ border-bottom:1px solid #e0e0e0; padding: 10px 0; }
.faq-question{
  background:none; border:none; color:#1a1a2e; font-size:18px; width:100%;
  text-align:right; cursor:pointer; display:flex; justify-content:space-between; align-items:center; padding:0; outline:none;
}
.arrow{ font-size:18px; transition: transform .25s ease; }
.faq-answer{
  max-height:0; overflow:hidden; transition: max-height .35s ease, padding .3s ease;
  padding: 0 0; color:#475569; line-height:1.9;
}
.faq-item.active .faq-answer{ max-height: 260px; padding: .5rem 0 .75rem 0; }
.faq-item.active .arrow{ transform: rotate(180deg); }

/* ====== FOOTER (new styles to match design) ====== */
.footer-wrap{
  background: #0B1722; /* ink */
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* نضمن إن محتوى الفوتر فوق صورة الخلفية */
.footer-wrap > * { position: relative; z-index: 1; }

/* background image on the left */
.footer-wrap::before{
  content: "";
  position: absolute;
  left: 0px;
  bottom: 10px;
  width: 620px;
  height: 100%;
  background-image: url("../images/uzexBg.png"); 
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: contain;
  opacity: var(--footer-img-opacity); 
  pointer-events: none;
  z-index: 0; 
}

/* links hover */
.footer-link{ position: relative; }
.footer-link:hover{ text-decoration: underline; }

/* ===== Responsive polish ===== */
@media (max-width: 992px){
  .give-phone{ width: clamp(220px, 50vw, 360px); }
  .back-plate{ height: clamp(200px, 42vw, 300px); width: min(640px, 92%); }
  .footer-wrap::before{ width: 520px; }
}
@media (max-width: 768px){
      .video-player-container {
        width: 100%;
        transform: translateX(-20%);
    }

    .video-player {
        width: 100%;
        height: 200px;
    }
  .why-section .image-section img{ width: 250px; }
  .footer-wrap::before{ width: 440px; left:-60px; }
}
@media (max-width: 576px){
  .why-section .image-section img{ width: 180px; }
  .footer-wrap::before{ width: 360px; left:-80px; }
  
    .background-section {
        width: 85%;
    }
    
        .video-player-container {
        width: 100%;
        transform: translateX(-20%);
    }

    .video-player {
        width: 100%;
        height: 170px;
    }

}

@media (max-width: 450px) {
    .background-section {
        width: 85%;
    }

    .video-player-container {
        width: 100%;
        transform: translateX(-20%);
    }

    .video-player {
        width: 100%;
        height: 170px;
    }
}