*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Cairo',sans-serif;
}

body{
background:#f4f8ff;
color:#103a7d;
overflow-x:hidden;
}

.container{
width:90%;
max-width:1400px;
margin:auto;
}

.header {
    background: white;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 15px rgba(0,0,0,.08);
    
}

.navbar {
    height: 80px; /* تقليل الارتفاع من 95px إلى 80px ليصبح أنحف وأرتب */
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img {
    height: 75px; /* تصغير اللوجو قليلاً ليتناسق مع الهيدر */
}

.menu{
display:flex;
gap:35px;
}

.menu a{
text-decoration:none;
color:#123f8d;
font-weight:700;
position:relative;
}

.menu a.active::after{
content:"";
position:absolute;
bottom:-12px;
right:0;
width:100%;
height:3px;
background:#0b59df;
border-radius:20px;
}

.order-btn{
background:linear-gradient(180deg,#1970ff,#0b59df);
padding:15px 28px;
color:#fff;
text-decoration:none;
border-radius:12px;
font-weight:700;
display:flex;
gap:10px;
align-items:center;
}

.hero{
    padding-top:80px;
    min-height:auto;
    display:flex;
    align-items:center;
    background:url(image/bg.png);
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
        padding-bottom:8px;

}
/* --- ترتيب كتل المحتوى الثلاثة (اليمين والوسط واليسار) --- */
.hero-content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
}

.hero-left img{
width:160%;
max-width:none;
margin-right:-180px;
}

/* تصغير وتنسيق النصوص في المنتصف حتى لا تفرش وتأخذ مساحة طولية */
.hero-center {
    text-align: center;
    width: 34%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hero-center h1 {
    font-size: 48px; /* تقليله من 65px لأن الخط الكبير جداً يدفع العناصر لأسفل */
    line-height: 1.2;
    font-weight: 800;
    color: #0d49b8;
}

.hero-center h2 {
    font-size: 28px; /* تقليله من 38px */
    margin-top: 10px;
}

.hero-center span{
color:#0b59df;
font-weight:800;
}

.center-icons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin:35px 0;
}

.center-icons div{
display:flex;
flex-direction:column;
align-items:center;
}

.center-icons i{
font-size:30px;
color:#0b59df;
margin-bottom:10px;
}

.hero-btn{
display:inline-flex;
align-items:center;
gap:12px;
background:linear-gradient(180deg,#1970ff,#0b59df);
color:white;
padding: 15px 60px; /* تقليل الـ padding الرأسي قليلاً مقارنة بـ 90px التي كتبتها */
font-size: 28px; /* 42px رقم ضخم جداً قد يخرب التصميم */
font-weight:700;
text-decoration:none;
border-radius: 50px; /* دائري الأطراف تماماً مثل الصورة */
box-shadow:0 15px 30px rgba(11,89,223,.3);
}

.hero-right{
text-align:center;
width:33%;
}

.hero-logo{
width:260px;
margin-bottom:20px;
}

.product{
width:650px;
margin-top:-20px;}
/* ضبط العناصر الجانبية الطائرة لتبدأ من مكان صحيح ومرفوع */
.hero-features {
    width: 320px;
    z-index: 10;
    position: absolute;
    right: 20px;
    top: 140px; /* رفع الكروت الجانبية لتتماشى مع الهيدر الجديد */
    display: flex;
    flex-direction: column;
    gap: 12px;

}


.side-card{
background: rgba(151, 176, 205, 0.85); /* خلفية زرقاء فاتحة جداً ناعمة */
backdrop-filter: blur(5px);
border-radius: 30px; /* حواف دائرية بالكامل كالكبسولة */
width:320px;
height: auto;
padding: 10px 20px;
display:flex;
align-items:center;
gap:15px;
box-shadow:0 5px 15px rgba(0,0,0,.08);
border: 1px solid rgba(11, 89, 223, 0.1);

}

.side-card i{
width:45px;
height:45px;
background:#0b59df;
color:white;
display:flex;
align-items:center;
justify-content:center;
border-radius: 50%; /* الأيقونة دائرية تماماً */}


@media(max-width:992px){

.hero-content-wrap{
flex-direction:column;
}
.side-card span {
    color: #103a7d;
    font-weight: 700;
}
.hero-features{
display:none;
}

.menu{
display:none;
}

.hero-center h1{
font-size:45px;
}

.hero-left img,
.product{
width:100%;
}

}
.hero-left{
position:relative;
z-index:1;
width:33%;
}

.mini-features{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
margin-bottom:30px;
}

.mini-features div{
display:flex;
flex-direction:column;
align-items:center;
gap:10px;
min-width:120px;
}

.feature-box{
display:flex;
align-items:center;
gap:15px;
width:260px;
}

.feature-box i{
width:45px;
height:45px;
background:#0b59df;
color:white;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
}

.hero-side{
position:absolute;
right:20px;
top:120px;
display:flex;
flex-direction:column;
gap:12px;
}

.feature-box{
background:white;
padding:14px;
border-radius:12px;
box-shadow:0 5px 15px rgba(0,0,0,.05);
}

section{
padding:80px 0;
}

h2{
text-align:center;
margin-bottom:40px;
font-size:40px;
}
.hero-content h2 span{
color:#0b59df;
font-weight:800;
}

.cards{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;

}

.life-card{
background:#fff;
padding:20px;
border-radius:20px;
text-align:center;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.life-card img{
width:130px;
height:130px;
border-radius:50%;
object-fit:cover;
margin-bottom:15px;
}
.section-title{
position: relative;
    text-align: center;
    margin-bottom: 50px;
}

.section-title span{
width:120px;
height:2px;
background:#0b59df;
}

.section-title h2{
display: inline-block;
    padding: 0 30px;
    position: relative;
}
.section-title h2::before, .section-title h2::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 80px;
    height: 3px;
    background: #0b59df;
}
.section-title h2::before { right: -90px; }
.section-title h2::after { left: -90px; }

.lifestyle-wrapper{
display:flex;
gap:20px;
align-items:flex-start;
}

.cards{
flex:1;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
border-radius: 24px;
background: #fff;
}

.life-card{
background:white;
border-radius:18px;
padding:12px;
text-align:center;
box-shadow:0 5px 20px rgba(0,0,0,.08);
}

.life-card img{
width:140px;
height:140px;
border-radius:50%;
object-fit:cover;
border:4px solid #f3f6fb;
margin-bottom:10px;
}

.life-card i{
font-size:30px;
color:#0b59df;
margin:10px 0;
}

.life-card h3{
font-size:20px;
line-height:1.5;
color:#1c2f57;
}

.promo-side{
width:300px;
background:
linear-gradient(
rgba(255,255,255,.25),
rgba(255,255,255,.25)
),
url(image/bg.png);

background-size:cover;
background-position:center;

border-radius:20px;
padding:25px;
text-align:center;
overflow:hidden;
}

.promo-side h3{
font-size:42px;
line-height:1.2;
color:#0b59df;
margin-bottom:15px;
font-weight:800;
}

.promo-side p{
font-size:20px;
margin-bottom:15px;
}

.promo-side img{
width:100%;
margin-top:10px;
}

.how-wrapper{
display:flex;
flex-direction:row-reverse;
gap:30px;
align-items:flex-start;
}

.steps{
flex:1;
display:flex;
justify-content:space-between;
gap:20px;
}

.step{
text-align:center;
position:relative;
}

.step-number{
position:absolute;
top:-10px;
right:50%;
transform:translateX(50%);
width:40px;
height:40px;
background:#0b59df;
color:white;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-weight:800;
z-index:5;
}

.step img{
width:160px;
height:160px;
border-radius:50%;
border:3px solid #dfe7f7;
background:white;
padding:10px;
object-fit:cover;
}

.step h4{
margin-top:15px;
font-size:26px;
color:#123f8d;
}

.step p{
font-size:18px;
color:#444;
}

.how-banner{
width:520px;
background:
linear-gradient(
rgba(255,255,255,.25),
rgba(255,255,255,.25)
),
url(image/bg.png);

background-size:cover;
background-position:center;

border-radius:20px;
overflow:hidden;
}

.banner-content{
display:flex;
align-items:center;
justify-content:space-between;
padding:20px;
}

.banner-text h3{
font-size:42px;
color:#123f8d;
margin-bottom:10px;
}

.banner-text p{
margin-bottom:15px;
color:#0b59df;
font-weight:700;
}

.banner-text ul{
list-style:none;
}

.banner-text li{
margin-bottom:10px;
font-size:22px;
}

.banner-content img{
width:300px;
}

.promo{
background:#eef7ff;
}

.promo-box{
display:flex;
justify-content:space-between;
align-items:center;
}

.promo-box img{
width:350px;
}

.colors-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
}

.colors-images{
display:flex;
gap:20px;
justify-content:center;
}

.colors-images img{
width:260px;
}

footer{
background:#08295f;
color:white;
}

.footer-top{
display:grid;
grid-template-columns:repeat(4,1fr);
text-align:center;
background:#0b59df;
padding:20px;
}

footer .container{
padding:40px;
text-align:center;
}

footer img{
height:90px;
margin-bottom:20px;
}

@media(max-width:992px){

.hero-grid{
grid-template-columns:1fr;
}

.cards{
grid-template-columns:repeat(2,1fr);
}

.steps{
grid-template-columns:1fr;
}

.colors-grid{
grid-template-columns:1fr;
}

nav{
display:none;
}

.hero-side{
display:none;
}

.hero-content h1{
font-size:45px;
}

}
.btn i{
margin-right:8px;
}

.trust-elite{
  padding:120px 0;
  background:linear-gradient(180deg,#f7fbff,#ffffff);
}

.trust-title{
  text-align:center;
  margin-bottom:60px;
}

.trust-title h2{
  font-size:44px;
  font-weight:800;
  color:#0f2f6b;
}

.trust-title p{
  color:#6b7a99;
  font-size:18px;
  margin-top:10px;
}

.trust-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:25px;
}

.trust-glass{
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(15px);
  border-radius:26px;
  padding:40px 20px;
  text-align:center;
  box-shadow:0 10px 30px rgba(0,0,0,0.06);
  transition:0.35s ease;
}

.trust-glass:hover{
  transform:translateY(-10px);
}

.icon{
  font-size:34px;
  margin-bottom:15px;
}

.trust-glass h3{
  font-size:48px;
  color:#0b59df;
  font-weight:900;
}

.trust-glass span{
  font-size:16px;
  color:#5c6f8f;
}

/* mobile */
@media(max-width:992px){
  .trust-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
/* تعديل الكارت الجانبي ليكون أقصر طولاً */
.promo-side {
  width: 320px;
  /* إزالة أي ارتفاع ثابت أو استخدام max-height إذا أردت حده */
  background: linear-gradient(180deg, rgba(212, 233, 255, 0.8) 0%, rgba(255, 255, 255, 0.9) 100%);
  border: 1px solid rgba(11, 89, 239, 0.15);
  border-radius: 24px;
  padding: 15px 20px; /* تقليل الـ padding العلوي والسفلي من 30px إلى 15px */
  text-align: center;
  box-shadow: 0 15px 35px rgba(11, 89, 239, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* تقليل حجم الخط لتوفير مساحة رأسية */
.promo-side h3 {
  font-size: 24px; /* تقليله من 32px ليصبح متناسقاً ولا يأخذ مساحة كبيرة */
  line-height: 1.2;
  color: #0d49b8;
  margin-bottom: 5px;
  font-weight: 800;
}

.promo-side p {
  font-size: 14px; /* تقليله من 16px */
  color: #5c6f8f;
  margin-bottom: 10px; /* تقليل المسافة السفلية */
  font-weight: 600;
}

/* تصغير حجم صورة المنشفة داخل الكارت لأنها المسبب الرئيسي للطول */
.promo-side img, .promo-img {
  width: 80%;
  max-width: 160px; /* تحديد الحد الأقصى للعرض بـ 160px بدلاً من 220px ليقل الطول تلقائياً */
  margin-top: 5px;
  margin-bottom: 15px; /* تقليل المسافة السفلية */
  filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

/* تنسيق خط الأيقونات السفلي */
.promo-features-bottom {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  border-top: 1px dashed rgba(11, 89, 239, 0.2);
  padding-top: 10px; /* تقليله من 20px */
}
.p-feature {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.p-icon-circle {
  width: 42px;
  height: 42px;
  background: rgba(11, 89, 239, 0.1);
  border: 1px solid rgba(11, 89, 239, 0.2);
  color: #0b59df;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: all 0.3s ease;
}

.p-feature:hover .p-icon-circle {
  background: #0b59df;
  color: #fff;
  transform: translateY(-3px);
}

.p-feature span {
  font-size: 11px;
  font-weight: 700;
  color: #103a7d;
  line-height: 1.3;
}


.video-section{
    padding:80px 0;
    background:
    linear-gradient(
    rgba(240,248,255,.95),
    rgba(225,240,255,.95)),
    url("image/bg.png");
    
    background-size:cover;
    background-position:center;
}

.video-box{
    max-width:900px;
    margin:auto;
    overflow:hidden;
    border-radius:25px;
       width:350px;
    margin:auto;
}
.video-box video{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    border-radius:25px;
}

/* قبل وبعد */

.before-after{
padding:90px 0;
background:#eef8ff;
}

.compare-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:30px;
}

.compare-card{
background:white;
border-radius:25px;
overflow:hidden;
text-align:center;
box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.compare-card img{
width:100%;
height:350px;
object-fit:contain;
background:#f3f6fb;
}
.compare-card h3{
margin:20px 0 10px;
font-size:28px;
}

.compare-card p{
padding-bottom:20px;
font-size:18px;
}


/* التقييمات */

.reviews{
padding:90px 0;
background:white;
}

.reviews-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.review-card{
background:#f7fbff;
padding:30px;
border-radius:20px;
box-shadow:0 8px 25px rgba(0,0,0,.06);
}

.stars{
font-size:24px;
margin-bottom:15px;
}

.review-card p{
font-size:18px;
line-height:1.8;
margin-bottom:15px;
}

.review-card span{
font-weight:700;
color:#0b59df;
}



#countdown{
font-size:60px;
font-weight:900;
margin-bottom:30px;
}

.offer-btn{
display:inline-block;
padding:18px 50px;
background:white;
color:#0b59df;
border-radius:50px;
text-decoration:none;
font-weight:800;
}


/* واتساب */

.whatsapp{
position:fixed;
bottom:25px;
left:25px;
width:70px;
height:70px;
background:#25D366;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:34px;
color:white;
text-decoration:none;
box-shadow:0 10px 25px rgba(0,0,0,.2);
z-index:9999;
}
.footer{
background:#08295f;
color:white;
margin-top:0;
}

.footer-content{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:50px;
padding:60px 0;
}

.footer-logo img{
height:90px;
margin-bottom:15px;
}

.footer-logo p{
line-height:1.8;
color:#dbe7ff;
}

.footer-contact h3,
.footer-info h3{
margin-bottom:20px;
font-size:22px;
}

.footer-contact{
display:flex;
flex-direction:column;
}

.footer-contact a{
color:white;
text-decoration:none;
margin-bottom:15px;
transition:.3s;
}

.footer-contact a:hover{
transform:translateX(-5px);
color:#79b4ff;
}

.footer-contact i{
margin-left:10px;
width:20px;
}

.footer-info p{
margin-bottom:15px;
color:#dbe7ff;
}

.footer-info i{
margin-left:10px;
color:#79b4ff;
}

.copyright{
text-align:center;
padding:20px;
border-top:1px solid rgba(255,255,255,.15);
color:#dbe7ff;
}