* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --premierColor: #71308F;
    --desiemeColor: #EB2127;
    --troisemeColor: #EC008C;
    --quateriemeColor: #00AEEF;
    --cinquiemeColor: #fff200;
    --neutreColor: #736d6d;
    --whithColor: #FFFFFF;
    --blackColor: #1C1D1D;
    --verColor: #34d10d;
    --goldencolor-1: #B8860B;
    --goldencolor-2: #CC9900;
    --goldencolor-3: #ECBD00;
    --goldencolor-4: #FFCC00;
    --goldencolor-5: #FFDF00;
    --goldencolor-bck: #FAF6E8;
    --drop_Shadow: rgba(90, 90, 90, 0.6);
    --red-Shadow:rgba(235, 33, 39, 0.6);
    --viole-Shadow:rgba(113, 48, 143, 0.6);
    --padding: 5%;

}
html {
    font-size: 16px;
    scroll-behavior: smooth;
    height: 100vh;
}
body{
    font-family: "zain", sans-serif;
    position: relative;
    margin: 0;
    height: 100%;
    background-image:linear-gradient(rgba(255,255,255,0.98),
                                    rgba(255,255,255,0.98)),
                                     url(../images/Back.svg);
    background-size:cover;
    /* background-size:cover; */
    background-position: center;
}


@keyframes appear {
    from {
        opacity: 0;
        scale: 0;
    }
    to{
        opacity: 1;
        scale: 1;
    }
}
.target, .content-purpose, .par-pour, .summary, .img-pourqoui,
 .stat .titel, .numb, .Partenaires .titel, .parte{
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0% ; 
}
::-webkit-scrollbar{
    width: 1vw;
}
::-webkit-scrollbar-track{
    background: var(--cinquiemeColor);
    /* border-radius: 20px; */
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(var(--premierColor), 
    var(--desiemeColor));
    border-radius: 20px;
    
    border: solid 0.25vw var(--cinquiemeColor);
}
/* ----->>>>-- Default Text Style --->>>>---- */
h1{
    color:var(--desiemeColor);
    font-weight:900;
    font-size: 50px;
}
h1::selection{
    background-color: var(--quateriemeColor);
    color: var(--cinquiemeColor);
    
 }
 h2{
    color:var(--quateriemeColor);
    font-weight:900;
    font-size: 35px;
}
h2::selection{
    background-color: var(--desiemeColor);
    color: var(--cinquiemeColor);
 }
h3{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 20px;
    /* margin-bottom: 5px; */
}
h3::selection{
    background-color: var(--quateriemeColor);
    color: var(--cinquiemeColor);
 }
 h5{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 15px;
}
h5::selection{
    background-color: var(--quateriemeColor);
    color: var(--cinquiemeColor);
 }
  h6{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 15px;
}
h6::selection{
    background-color: var(--quateriemeColor);
    color: var(--cinquiemeColor);
 }
p{
    color:var(--premierColor);
    font-weight:600;
    font-size: 18px;
    line-height: 28px;
    }
p::selection{
    background-color: var(--cinquiemeColor);
    color: var(--troisemeColor);
 }
/* *\ >>>>>>>>> *sections-class* <<<<<<<<<<<  /* */
 .sections-class{
    display: flex ;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 1300px;
 }
/* ----->>>>-- Star Acceil --->>>>---- */

.home{
    width: 100%;
    display: flex;
    flex-direction: column;
}
a{
    text-decoration: none;
}
/* >>>>>>>>> Menu */
#menu span{
    display: block;
    width: 25px;
    height: 4px;
    background-color: var(--premierColor);
    border-radius: 30px;
    transform-origin: 0 0;
    transition: 0.5s;
    margin-bottom: 6px;
}
#menu.is-active span:nth-child(1){
   transform: translate(0px, -2px) rotate(55deg);
}
#menu.is-active span:nth-child(2){
    opacity: 0;
    transform: translateX(15px);
 }
 #menu.is-active span:nth-child(3){
    transform: translate(-3px, 1px) rotate(-55deg);
 }
 #menu.is-active span{
    background-color: var(--desiemeColor);
 }

#menu{
    display: none;
    position: relative;
    appearance: none;
    border: none;
    outline: none;
    background: none;
    cursor: pointer;
    user-select: none;
    
}
/* >>>>>>>>> nav */
nav {
  position: relative; /* غير ضروري هنا لأن fixed أصلاً تعطي نفس الأثر، لكنها موجودة بالخاصية fixed */
  background-color: #f9f6f4;
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  padding-left: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}
nav::after {
    z-index: 1;
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: linear-gradient(
    to left,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F
  );
  background-size: 200% 100%;
  animation: moveGradient 5s linear infinite;
}
@keyframes moveGradient {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
nav ul{
    height: 50px;
    display: flex;
    justify-content:space-between;
    align-items: center;
    z-index: 1;
}
nav ul li {
    list-style-type: none;
    display: inline-block;
}
nav ul li a{
    margin-left:10px;
    color:  var(--premierColor);
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    padding: 5px 7px 9px 7px;
    transition: .6s ease;
    border-radius: 10px 10px 0px 0px;

}
nav ul li a:hover{
    background-color:  var(--cinquiemeColor);
    color: var(--desiemeColor);
 }
 nav ul li a.active{
    background-color:  var(--cinquiemeColor);
    color: var(--desiemeColor);
 }
.logo {
    height: 30px;
    margin-right: 400px;
    display: flex;
    justify-content: end;
}
.logo img {
    height: 100%;
}

 /* >>>>>>>>>  update  */
 .loading{
    margin: 50px;
    height: 200px;
    padding-bottom: 100px;
}
.update{
  border: 3px solid var(--desiemeColor);
  border-radius: 10px;
    display: flex;
    flex-wrap: wrap;
    margin: 40px 0;
    padding: 5px;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.update img{
    height: 40px;
}
.update p{
    color:var(--desiemeColor);
    font-weight:500;
    font-size: 25px;
    margin:10px;
    padding-bottom: 5px;
}
 /* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Acceil - الرئيسية* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

 /* >>>>>>>>> Star section intervace  */
/* >>>>>>>>> content-intervace  */
.intervace{
    padding: 80px 30px;
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 20px;
    background-color: var(--premierColor);
 }
 .content-intervace{
    width: 500px;
    display: flex;
    flex-direction: column;
    gap: 30px;
 }
.arc-media h1{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 35px;
 }
.arc-media p{
    color:var(--whithColor);
    line-height: 45px;
    font-weight:700;
    font-size: 38px;
 }
.qui-nou h1{
    color:var(--cinquiemeColor);
    font-weight:900;
    font-size: 35px;
    margin-bottom: 3px;
 }
.qui-nou p{
    color:var(--whithColor);
    font-weight:500;
    font-size: 20px;
    line-height: 30px;
    text-align: justify;
 }
 /* >>>>>>>>> motion-intervace  */
.motion-intervace{
    margin-right: 10px;
    width: 700px;
    overflow: hidden;
}
svg {
    width: 100%;
  }
p.hint {
    color: #999;
    font-size: 13px;
}
  /* مدة اختفاء/ظهور اللوجو والدوائر موحّدة حتى تختفي كل العناصر معًا بانسجام */
  #finallogo,
  #redSwoosh,
  #whiteHighlight,
  #circlesGroup {
    transition: opacity 1.4s ease;
  }

  #finallogo { opacity: 0; }
  #finallogo.reveal { opacity: 1; }

  #redSwoosh { opacity: 0; }
  #redSwoosh.reveal { opacity: .29; } /* نفس شفافية التصميم الأصلي */

  #whiteHighlight { opacity: 0; }
  #whiteHighlight.reveal { opacity: .5; }

  #circlesGroup { opacity: 1; }
  #circlesGroup.dim { opacity: .55; }   /* تخفيف الدوائر بعد ظهور اللوجو */
  #circlesGroup.hidden { opacity: 0; }  /* اختفاء كامل قبل إعادة البدء */

/* >>>>>>>>> End section intervace  */
/* >>>>>>>>> div-waves  */
.waves-top {
    position: relative;
    width: 100%;
    height: 8vh;
    margin-bottom: -5px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
    rotate: 180deg;
}
/* >>>>>>>>> End div-waves  */

/* >>>>>>>>> Star section contents  */
.contents{
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 10px  0;
    gap: 30px;
 } 
 .div-contents{
    width: 840px;
}
.img-contents{
    display: flex ;
    justify-content: center;
    align-items: center;
    height: 250px;
}
.img-contents img{
    height: 85%;
}
.par-contents{
    margin-bottom: 10px;
}
.contents-type{
    display: flex ;
    gap: 30px;
    flex-wrap: wrap;
}
.par-type{
    margin-top: 10px;
    width: 145px;
    text-align: start;
 }
 .contents-icon{
    height: 50px;
    text-align: start;
}
.par-type i{
    display: flex ;
     font-size: 50px;
     margin-bottom: 5px;
    text-align: start;
    color: var(--quateriemeColor)
 }
 .par-type p{
    font-size: 16px;
    line-height: 20px;
    font-weight: 600;
    text-align: start;
    color: var(--premierColor);
 }
.icon-self{
    width: 155px;
}
.icon-self i{
    display: flex ;
     font-size: 150px;
     margin-bottom: 5px;
    text-align: start;
    color: var(--premierColor);
}
/* >>>>>>>>> End section contents  */

/* >>>>>>>>> Star section purpose  */
.purpose{
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin: 30px;
    margin-bottom: 60px;
    gap: 35px;
 }
.content-purpose{
    display: flex ;
    flex-direction: column;
    justify-content: start;
    padding: 20px ;
    text-align: center;
    width: 350px;
    background-color: var(--troisemeColor);
    border-radius: 20px;
    align-items: center;
}
.icon-purpose{
    height: 100px;
    margin-bottom: 10px;
}
.content-purpose p{
    color:var(--whithColor);
    font-weight:600;
    font-size: 20px;
    text-align: justify;
 }
/* >>>>>>>>> End section purpose  */

/* *\ >>>>>>>>> * Star contents-services* <<<<<<<<<<<  /* */
.contents-services{
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 0 0 10px  0;
    gap: 30px;
}
.img-services{
    display: flex ;
    justify-content: center;
    align-items: center;
    height: 200px;
}
.img-services img{
    height: 100%;
}
.icon-titel{
    display:none
}
.par-contents h1{
    font-weight:900;
    font-size: 40px;
    display: flex;
    gap: 10px;
     align-items: baseline;
    justify-content: start;
    text-align: start;
}
.contents-services .div-contents{
    width: 930px;
}
.contents-services p{
    color: var(--premierColor);
    font-weight: 700;
    font-size: 22px;
    line-height: 30px;   
}
/* *\ >>>>>>>>> * End contents-services* <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>> * Star box-sections* <<<<<<<<<<<  /* */
.box-sections{
    width: 100%;
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}
.div-boxes-services{
    gap: 20px;
    width: 1200px;
    display: flex ;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.box-services{
    padding: 15px;          
    width: 30%;
    display: flex ;
    flex-wrap: wrap;
    background-color: var(--whithColor);
    box-shadow: 0 0 10px 0px  rgba(113, 48, 143, .2);
    border-radius: 10px;
    border-bottom: solid 6px var(--quateriemeColor);
    text-align: -webkit-center;
    justify-content: center;
    align-items: center;
    transition: .9s ease;
    cursor: pointer;
}
.box-services:hover{
    background-color: var(--cinquiemeColor);
    box-shadow: 0 0 10px 0px  rgba(113, 48, 143, .5);
    scale: 1.01;
}
.box-services img{
    margin-left: 15px;
    width: 70px;
    height: 70px;
}
.box-services h3{
    width: 70%;
    font-size: 25px;
    display: flex;
    text-align: start;
    font-weight: 900;
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * End Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

/* *\ >>>>>>>>>  >>>>>>>>> *plane-section* <<<<<<<<<<< الباقات والعروض <<<<<<<<<<<  /* */
.plane-section{
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 
.par-contents .plane-titel{
    font-weight:900;
    font-size: 50px;
    background: linear-gradient(to left,
    #71308F, #EB2127,#EC008C, #00AEEF, #fff200, #71308F );
    background-size: 200%;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    animation: animate-gradient 5s linear infinite;
    /* animation: gradientFlow 5s linear infinite; */
}
@keyframes animate-gradient {
  to   { background-position: 200%; }
}
 /* الباقات */
.div-options{
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 20px;
     width: 1200px;
}
.plane-options{
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
     width: 235px;   
}
.titel-options{
   width: 100%;
   gap: 15px;
   display: flex ;
    flex-wrap: wrap;
    align-items: center;
    text-align: start;
    justify-content: center;
    border-radius: 10px;
    margin-bottom: 5px;
    background-color: var(--cinquiemeColor);
}
.titel-options img{
    height: 30px;
    width: 30px;
    text-align: center;
    margin: 0;
}
.titel-options h1{
    color:var(--desiemeColor);
    font-weight:900;
    font-size: 25px;
    padding-top: 5px;
}
.plane-options p{
    color:var(--premierColor);
    font-weight:800;
    font-size: 13px;
    text-align: start;
}
/* جدوال الباقات */
.div-plane{
    width: 1200px;
    display: none;              /* بدل flex */
    flex-wrap: wrap;
    margin-top: 10px;
    text-align: center;
    justify-content: center;
    margin-bottom: 30px;
    gap: 35px;
}
/* الباقة الظاهرة فقط */
.div-plane.active{
    display: flex;
    animation: fade-plane 0.5s ease;
}
@keyframes fade-plane{
    from { opacity: 0; transform: translateY(15px); }
    to   { opacity: 1; transform: translateY(0); }
}
 .plane-table{
    width: 25%;
    background-color: var(--goldencolor-bck);
    text-align: center;
    border-radius: 18px;
    /* margin: 20px; */
    align-items: center;
    position: relative;
 }
 @property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
 .plane-table::after, .plane-table::before{
    --angle: 0deg;
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    background-image: conic-gradient(from var(--angle),
                     #71308F, #EB2127,#EC008C, #00AEEF, #fff200, #71308F );
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 3px;
    border-radius: 20px;
    animation: 3s spin linear infinite;
}
.golden-plane::after, .golden-plane::before{
    background-image: conic-gradient(from var(--angle),
                     #ffdf2b, #ffd220, #f8c807, 
                     #b68903, #FFD700);
}
.plane-table::before{
    filter: blur(6px);
    opacity: 0.8;
}
@keyframes spin{
    from{
        --angle: 0deg;
    }
    to{
        --angle: -360deg;  
    }
}
.plane-heder{
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    padding: 10px;
    gap: 10px;
 }
.plane-heder img{
    height: 50px;
}
hr{
    border: solid 0.5px #c8acd1;
    margin: 0 5px;
    justify-content: center;
    text-align: center;
}
.plane-heder h1{
    color:var(--desiemeColor);
    font-weight:900;
    font-size: 18px;
    line-height: 25px;
     width: 70%;
     text-align: start;
}
.plane-ligne{
    display: flex ;
    flex-wrap: wrap;
    margin: 1px;
    text-align: center;
    align-items: center;
    justify-content: start;
    padding-right: 20px;
    gap: 10px;
}
.plane-table .icon-plane{
    height: 16px;
    width: 16px;
    text-align: center;
    margin: 0;
}
.plane-table h2{
    color:var(--premierColor);
    font-weight:700;
    font-size: 12px;
}
.price{
    margin-top: 20px; 
    display: flex;
    align-items: center;
    justify-content: center;
}
.price p{
    color:var(--desiemeColor);
    font-weight:800;
    font-size: 35px;  
}
.price span{
    color:var(--premierColor);
    font-weight:700;
    font-size: 15px;
    margin-right: 10px;
}
.price-bttn{
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.price-bttn h3{
    width: 100px;
    padding: 10px;
    color: var(--whithColor);
    background-color :var(--desiemeColor);
    font-weight:800;
    font-size: 15px;
    border-radius: 10px;
    margin:5px 0;
    transition: 0.7s;
}
.price-bttn h3:hover{
    width: 200px;
    background: linear-gradient(to left,
   #71308F, #EB2127,#EC008C, #71308F );
    background-size: 200%;
    animation: animate-gradient 3s linear infinite;  
}
.golden-price-bttn{
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.golden-price-bttn h3{
    width: 100px;
    padding: 10px;
    color: var(--whithColor);
    background-color :var(--desiemeColor);
    font-weight:800;
    font-size: 15px;
    border-radius: 10px;
    margin:5px 0;
    transition: 0.7s;
}
.golden-price-bttn h3:hover{
    width: 200px;
    background: linear-gradient(to left,
   #ffdf2b, #ffd220, #f8c807, 
                     #b68903, #FFD700);
    background-size: 200%;
    animation: animate-gradient 3s linear infinite;  
}
.plane-options{
    cursor: pointer;
    border-radius: 12px;
    transition: 0.4s;
    opacity: 0.55;
    user-select: none;
}
.plane-options:hover{
    opacity: 1;
    transform: translateY(-3px);
}
.plane-options.active{
    opacity: 1;
}
.plane-options.active .titel-options{
    background: linear-gradient(to left,
    #71308F, #EB2127, #EC008C, #00AEEF, #71308F);
    background-size: 200%;
    animation: animate-gradient 4s linear infinite;
}
.plane-options.active .titel-options h1{
    color: var(--whithColor);
}
.golden-option.active .titel-options{
    background: linear-gradient(to left,
    #ffdf2b, #ffd220, #f8c807, 
                     #b68903, #FFD700);
    background-size: 200%;
    animation: animate-gradient 4s linear infinite;
}

/* -----<<<<-- End plane ---<<<<---- */

/* >>>>>>>>>  Star section stat   */
.stat{
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 30px;
}
 .box-count{
    width: 1200px;
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
 }
.cart{
    display: flex ;
    flex-direction: column;
    width: 21%;
    text-align: center;
    align-items: center;
    justify-content: space-evenly;
    background: var(--quateriemeColor);
    padding: 20px;
    border-radius: 20px;
    transition: .7s ease;
    cursor: pointer;
}
.cart:hover{
    scale: 102%;
}
.cart img{
    width: 100px;
    margin-bottom: 10px;
}

.cart i{
    margin-bottom: 15px;
    color: var(--whithColor);
    font-size: 90px;
}
.cart p{
    color: var(--whithColor);
    font-weight:700;
    font-size: 27px;
}
.div-count{
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.num{
    display: flex ;
    color:var(--whithColor);
    font-weight:800;
    font-size: 70px;
    text-align: center;
}
.symbol-plus{
    display: flex ;
    color:var(--whithColor);
    font-weight:800;
    font-size: 70px;
    margin: 3px;
}
/* >>>>>>>>>  End section stat   */

/* >>>>>>>>> Star section Partenaires   */
.Partenaires{
    padding: 0 10%;
    margin-bottom: 40px;
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
}
.div-parte{
    width: 1100px;
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
.parte{
    text-align: center;
    position: relative;
    /* margin: 20px; */
}
.parte img{
    height: 60px;
    filter: grayscale(1);
}
.parte img:hover{
    filter: grayscale(0);
    transition: 0.5s all ease;
}
/* >>>>>>>>> End section Partenaires   */

/* *\ >>>>>>>>> *classe-main* <<<<<<<<<<<  /* */
.classe-main{
    padding-top: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
} 
.head{
    width: 1000px;
    text-align: center;
    margin-bottom: 20px;
}
.head p{
    text-align: center;
} 
.head i{
    margin-top: 40px;
    font-size: 100px;
     margin-bottom: 100px;
    text-align: start;
    color: var(--quateriemeColor)
} 

/* >>>>>>>>> Start Box Projet   */
.div-boxes-projet{
    gap: 20px;
    width: 1200px;
    display: flex ;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.div-boxes-projet a{
    width: 30%;
    transition: .9s ease;
}
.box-projet{
    padding: 15px;          
    display: flex ;
    flex-wrap: wrap;
    background-color: var(--whithColor);
    box-shadow: 0 0 10px 0px  rgba(113, 48, 143, .2);
    border-radius: 10px;
    border-bottom: solid 6px var(--desiemeColor);
    text-align: -webkit-center;
    justify-content: center;
    align-items: center;
    transition: .9s ease;
    cursor: pointer;
}
.box-projet:hover{
    background-color: var(--cinquiemeColor);
    box-shadow: 0 0 10px 0px  rgba(113, 48, 143, .5);
    scale: 1.01;
}
.box-projet img{
    margin-left: 15px;
    width: 80px;
    height: 80px;
}
.box-projet h3{
    width: 70%;
    font-size: 25px;
    display: flex;
    text-align: start;
}
/* >>>>>>>>> End Box Projet   */

/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star projects - أعمالنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>> *brand-projects* <<<<<<<<<<<  /* */
.brands{
    width: 1200px;
    display: flex ;
    justify-content: space-evenly;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.brand-box{
    width: 350px;
    border-radius: 15px;
    text-align: -webkit-center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    margin: 20px ;
    text-decoration: none;
    background-color: var(--whithColor);
    transition: 1s ease;
    position: relative;
    box-shadow:  0 0 10px 0px  var(--drop_Shadow);
}
.brand-box:hover{
    scale: 1.02;
    box-shadow:  0 0 10px 0px  var(--viole-Shadow);
}
.brand-box img{
    height: 90px;
    margin-bottom: 10px;
}
.div-down{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 20px 10px;
}
.div-down h2{
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 16px;
    text-align: start;
}
.div-down i{
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 25px;
}
.logos-classe i{
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 25px;
}
.card-logos{
    width: 100%;
    height: 140px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    border-radius: 10px;
}
.logo-primary{
    width: 60%;
    height: 100%;
    margin: 0;
    border-radius: 0 10px 10px 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.logo-primary img{
    height: 100%;
    padding: 20px;
    margin-bottom: 0;
}
.logo-sub{
    width: 40%;
    height: 100%;
    margin: 0;
    display: flex;
    flex-wrap: wrap
}
.logo-sub img{
    height: 100%;
    padding: 10px;
    margin-bottom: 0;
}
.sub-withe, .sub-black{
    width: 100%;
    height:50%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.images-BW{
    width: 100%;
    height: 100px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 10px;
    border-radius: 10px;
}
.images-one, .images-two{
    width: calc(100% / 2);
    height: 100%;
    margin: 0;
    align-items: center;
    justify-content: center;
    display: flex;
}
.images-BW .images-logo{
    height: 90%;
    padding: 10px;
    margin-bottom: 0;
}
.brand-color{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    border-radius: 20px;
    margin: 10px 0 0 0;
    border-radius: 0 20px 20px 0;
}
.brand-color p{
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
}
.color-primary, .color-sub-one, .color-sub-two{
    width: calc(100% / 3);
    height: 100%;
    margin: 0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}
.color-primary-1, .color-second{
    width: calc(100% / 2);
    height: 100%;
    margin: 0;
    display: flex;
    text-align: center;
    align-items: center;
    justify-content: center;
}

/* *\ >>>>>>>>> *print-projet* 
                *posts-projet* <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *box-element* <<<<<<<<<<<  /* */
.box-element {
    width: 1250px;
    margin: 20px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
    padding: 10px;
    align-items: center;
    transition: .6s ease;
}
.box-element img{
    padding: 10px;
    height: 222px;
    transition: .5s linear;
    border-radius: 20px;
}
.box-element img:hover{
    background-color: rgb(248, 248, 248);
    box-shadow:  0 0 20px 0px  #c0c0c0;
}
.popup-image{
    position: fixed;
    top: 0; left: 0;
    background: rgba(243, 243, 243, 0.5);
    height: 100%; width: 100%;
    z-index: 99;
    display: none;
}
 .popup-image span{
    position: absolute;
    top: 80px; right: 60px;
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 25px;
    cursor: pointer;
    z-index: 100;
}
 .popup-image img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    height: 450px;
}
/* *\ >>>>>>>>> *videos-projet* <<<<<<<<<<<  /* */
.videos-box{
    width: 1200px;
    display: flex ;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.div-videos{
    width: 350px;
    border-radius: 20px;
    text-align: -webkit-center;
    justify-content: center;
    transition: 0.7s;
    margin: 20px ;
}
.div-videos img{
    border-radius: 20px;
    width: 100%;
    transition: 0.7s;
}
.div-videos img:hover{
    scale:1.02 ;
     box-shadow:  0 0 20px 1px  #cfcfcf;
}
.div-videos h2{
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 20px;
    margin-bottom: 10px;
}
/* *\ >>>>>>>>> *site-projet* <<<<<<<<<<<  /* */
.site-box{
    width: 1200px;
    display: flex ;
    flex-wrap: wrap;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.div-site{
    width: 330px;
    border-radius: 20px;
    text-align: -webkit-center;
    justify-content: center;
    transition: 0.7s;
}
.div-site img{
    border-radius: 20px;
    margin-bottom: 10px;
    width: 90%;
    transition: 0.7s;
}
.div-site img:hover{
    scale:1.05 ;
}
.div-site h2{
    color:var(--desiemeColor);
    font-weight:600;
    font-size: 20px;
    margin-bottom: 10px;
}
/* -----------------------------------------------------------------
----------------------------- contact ------------------------------ 
----------------------------------------------------------------- */
/* ----->>>>-- Star contact --->>>>---- */

.contact-us{
    padding-top: 80px;
    align-items: center;
    justify-content: center;
} 
.contact-us-titel{
    text-align:center;
    font-size: 25px;
    color: var(--desiemeColor);
    margin-bottom: 10px;
}  
.content-contact-us{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 10px;
    
}
.ditails-contact-us{
    width: 80%;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
}
.content-contact-us i{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--premierColor);
    color: var(--whithColor);
    width: 60px;
    height: 60px;
    font-size: 35px;
    /* padding: 10px; */
    border-radius: 10px;
    transition: 1s;
}
.content-contact-us i:hover{
    transform: scale(1.1);
}
.ph i:hover{background-color: #0c7c24;}
.wt i:hover{background-color: #25d366;}
.gm i:hover{background-color: #c71610;}
.fb i:hover{background-color: #1877F2;}
.in i:hover{background-color: #C13584;}
.th i:hover{background-color: #000000;}
.tw i:hover{background-color: #000000;}
.tk i:hover{background-color: #000000;}
.ln i:hover{background-color: #0077B5;}
.bh i:hover{background-color: #053eff;}
.sn i:hover{background-color: #FFFC00;}
.yt i:hover{background-color: #FF0000;}
.pn i:hover{background-color: #E60023;}

.Right-Reserved{
    width: 100%;
    padding-top: 60px;
}
.Reserved-by{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
.Reserved-logo {
width: 100%;
text-align: center;
padding: 20px;
}
.Reserved-logo img{
    margin-right: 20px;
    height: 50px;
}
.Reserved-by p{
    color:var(--premierColor);
    font-weight:600;
    font-size: 30px;
    text-align: center;
    line-height: 35px;
}
.Reserved-by span{
    color:var(--desiemeColor);
    font-weight:800;
    font-size: 35px;
}
.Reserved-par{
    text-align: center;
}

/* -----<<<<-- End contact ---<<<<---- */
/* -----------------------------------------------------------------
----------------------------- Footer ------------------------------ 
----------------------------------------------------------------- */

/* ----->>>>-- Star Footer --->>>>---- */
footer{
    position: relative;
    padding: 0;
    z-index: 1000;
    width: 100%;  
}
.waves {
    position: relative;
    width: 100%;
    height: 10vh;
    margin-bottom: -10px;
    /*Fix for safari gap*/
    min-height: 100px;
    max-height: 150px;
}

  /* Animation */ 
  .parallax > use {
    animation: move-forever 25s 
    cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
  } 
  .parallax > use:nth-child(1) {
    animation-delay: -2s;
    animation-duration: 7s;
  }
  .parallax > use:nth-child(2) {
    animation-delay: -3s;
    animation-duration: 10s;
  } 
  .parallax > use:nth-child(3) {
    animation-delay: -4s;
    animation-duration: 13s;
  } 
  .parallax > use:nth-child(4) {
    animation-delay: -5s;
    animation-duration: 20s;
  } 
  @keyframes move-forever {
    0% {
      transform: translate3d(-90px, 0, 0);
    }
  
    100% {
      transform: translate3d(85px, 0, 0);
    }
  }
  
/* >>>>>>>>> section footer-top   */
.footer-top{
    padding:  5px 0 15px 0;
    width: 100%;
    background-color: var(--troisemeColor);
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15%;
}
.para-footer{
    display: flex ;
    flex-direction: column;
    width: 25%;
    gap: 5px;
}
.para-footer img{
   height: 60px;
}
.para-footer p{
    color: var(--cinquiemeColor);
    font-weight:600;
    font-size: 20px;
    line-height: 30px;
 }
 .link h1{
    color: var(--quateriemeColor);
    font-weight:900;
    font-size: 22px;
 }
 .link ul li{
    list-style-type: none;
 }
 .link ul li a{  
    color: var(--cinquiemeColor);
    font-weight:400;
    font-size: 15px;
    opacity: 0.5;
    transition: 1s;
 }
 .link ul li a:hover{
    font-weight:400;
    opacity: 1;
    font-size: 16px;
    transform: scale(1.2);
 }
 .contact-footer{
    display: flex;
    flex-direction: column;
    text-align: start;
    gap: 10px;
 }
 .social{
    width: 100%;
 }
 .social-titel h3{
    color: var(--quateriemeColor);
    font-weight:900;
    font-size: 22px;
 }
 .social-icon{
    display: flex;
    flex-wrap: wrap;
    gap: 12px; 
}
 .social-icon i{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    background: var(--cinquiemeColor);
    border-radius: 4px;
    font-size: 15px;
    padding: 5px;
    color: var(--premierColor);
    opacity: 0.5;
    transition: 0.7s;
}
.social-icon i:hover{
   opacity: 1;
    scale: 1.1;
}
 /* >>>>>>>>> section footer-bottom   */
 .footer-bottom{
    padding: 0;
    width: 100%;
    height: 50px;
    background-color: var(--quateriemeColor);
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.footer-bottom p{
    color: var(--whithColor);
    font-weight:300;
    font-size: 20px;
}
.footer-bottom img{
    height: 20px;
    margin-left: 10px;
    margin-right: 2px;
}
.reserved{
    align-items: center;
}
/* ----->>>>-- End Footer --->>>>---- */

  /* -----------------------------------------------------------------
----------------------------- media-quiry ------------------------------- 
----------------------------------------------------------------- */

@media screen and (max-width: 480px) {
:root {
    --padding: 4%;

}
body{
    background-image:linear-gradient(rgba(255,255,255,0.96),
                                    rgba(255,255,255,0.96)),
                                     url(../images/Back-480px.svg);
    background-size:contain;
}
html {
    font-size: 11px;
}
 .waves {
      height: 40px;
      min-height: 40px;
    }
  
    .content {
      height: 30vh;
    }
/* ----->>>>-- Default Text Style --->>>>---- */
h1{
    font-weight:900;
    font-size: 25px;
}
 h2{
    font-weight:900;
    font-size: 20px;
}

h3{
    font-weight:900;
    font-size: 10px;
}
 h5{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 10px;
}
 h6{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 10px;
}
p{
    font-weight:600;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    }

    /* *\ >>>>>>>>> *sections-class* <<<<<<<<<<<  /* */
 .sections-class{
    margin-top: 0px;
    width: 90%;
    justify-content: space-evenly;
 }
 /* -----<<<<-- update ---<<<<---- */
.loading{
    height: 200px;
    margin-bottom: 180px;
}
.update{
    border: 2px solid var(--desiemeColor);
    border-radius: 10px;
    margin:20px 0 0  0;
  }
  .update img{
    height: 40px;
    padding: 0;
}  
.update p{
    font-size: 15px;
    margin:2px 10px;
    padding-bottom: 5px;
}   
/* ----->>>>-- Star Home --->>>>---- */

.home{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}
/* ----->-- nav */       
nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 7%;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
}

nav > a{
    display: block;
    z-index: 100;
}
nav ul {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 220px;
    background-color: var(--whithColor);
    padding: 20px 20% 0 0;
    z-index: 100;
}
nav ul::after {
    z-index: 1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(
    to left,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F
  );
  background-size: 200% 100%;
  animation: moveGradient 5s linear infinite;
}
@keyframes moveGradient {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
nav ul li a{
    text-decoration: none;
    font-size: 17px;
    padding: 5px 10px;
    border-radius: 10px;
}
nav ul.is-active{
    display: block;
}
nav ul li {
    display: block;
    text-align: start;
    margin: 8px;
    width: 200px;
}
.logo {
    padding-top: 0;
    padding-right: 0;
    width: 25%;
    height: 45%;
    margin-right: 0;
    z-index:100;
    display: flex;
    justify-content: end;
}
.logo img {
    height: 100%;
    margin-bottom: 0;
}
#menu{
    display: flex;
    align-items: start;
    justify-content: end;
    padding-right: 0;
    display: block;
    z-index: 1100;
}
#menu span{
    display: block;
    width: 25px;
    height: 4px;
    background-color: var(--premierColor);
    margin: 5px 0;
}

 /* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Acceil - الرئيسية* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

 /* >>>>>>>>> Star section intervace  */
/* >>>>>>>>> content-intervace  */
.intervace{
    padding: 15% 7% 7% 7%;
 }
 .content-intervace{
    width: 100%;
 }
.arc-media p{
    line-height: 35px;
    font-weight:700;
    font-size: 23px;
    text-align: start;
 }
.qui-nou h1{
    font-size: 35px;
    margin-bottom: 3px;
 }
.qui-nou p{
    font-weight:500;
    font-size: 15px;
    line-height: 25px;
 }
 /* >>>>>>>>> motion-intervace  */
 .motion-intervace{
    display: none;
}
/* >>>>>>>>> End section intervace  */
/* >>>>>>>>> div-waves  */
.waves-top {
    min-height: 40px;
    max-height: 40px;
  }
/* >>>>>>>>> End div-waves  */

/* >>>>>>>>> Star section contents  */
.contents{
    padding: 0;
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
 } 
.img-contents{
    margin:0 ;
    width: 100%;
    height: 80px;
}
.img-contents img{
    height: 85%;
}
.div-contents{
    width: 100%;
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
}
.par-contents{
    width: 85%;
    margin-bottom: 10px;
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
}
.contents-type{
    width: 95%;
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin-top:0;
    gap: 5px;
}
.par-type{
    margin: 0;
    width: 22%;
    padding: 5px;
    text-align: center;
 }
 .contents-icon{
    height: 30px;
    width: auto;
}
 .par-type p{
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
 }
  .img-contents{
   display: none;
}
.icon-self{
    display: none;
}
/* >>>>>>>>> End section contents  */
/* ----->>>>-- Star purpose --->>>>---- */
.purpose{
    justify-content: space-between;
    margin: 20px;
    gap: 20px;
    width: 90%;
 }
.content-purpose{
    align-items: start;
    padding: 10px ;
    text-align: right;
    flex-grow: 1;
    flex-basis: 160px;
    /* width: 100%; */
    border-radius: 10px;
}
.icon-purpose{
    height: 30px;
}
.content-purpose p{
    line-height: 20px;
    font-weight:600;
    font-size: 11px;
    margin-bottom: 10px;
    text-align: justify;
 }
/* -----<<<<-- End purpose ---<<<<---- */
/* *\ >>>>>>>>> *contents-services* <<<<<<<<<<<  /* */
.contents-services{
    margin: 0 0 10px  0;
    gap: 20px;
}
.par-contents h1{
    font-size: 25px;
    gap: 10px;
     align-items: baseline;
}
.img-services{
    display: none; 
}
.icon-titel{
    display:block;
    height: 35px;
    width: auto;
}
.contents-services .div-contents{
    width: 100%;
}

.contents-services p{
    font-size: 15px;
    line-height: 20px; 
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
.box-sections{
    width: 100%;
    margin-top: 0px;
}
.div-boxes-services{
    gap: 10px;
    width: 90%;
    margin-top: 10px;
    margin-bottom: 20px;
}
.box-services{
    padding: 10px;          
    width: 30%;
}
.box-services img{
    margin-left: 0;
    width: auto;
    height: 60px;
    margin-bottom: 15px;
}
.box-services h3{
    width: 100%;
    font-size: 11px;
    text-align: center;
    line-height: 15px;
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * End Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>>  >>>>>>>>> 
               *plane-section* 
                 <<<<<<<<<<< الباقات والعروض <<<<<<<<<<<  /* */
.plane-section{
    padding-top: 10px;
} 
.par-contents .plane-titel{
    font-weight:900;
    font-size: 25px;
}
 /* الباقات */
.div-options{
    padding: 5px;
    gap: 5px;
     width: 100%;
}
.plane-options{
    padding: 5px;
     width: 30%;   
}
.titel-options{
   width: 100%;
   gap: 5px;
   padding: 5px;
       border-radius: 7px;
}
.titel-options img{
    height: 20px;
    width: 20px;
}
.titel-options h1{
    font-weight:900;
    font-size: 15px;
    display: flex;
    padding-top: 3px;
}
.plane-options p{
    line-height: 15px;
    font-weight:900;
    font-size: 10px;
    text-align: center;
}
/* جدوال الباقات */
.div-plane{
    width: 90%;
    margin-top: 10px;
    margin-bottom: 30px;
    gap: 20px;
    justify-content:start;
 }
  /* الباقة الظاهرة فقط */
.div-plane.active{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: 100%;
    margin:0;
    padding: 2px 20px ;
    gap: 2px;
    /* إخفاء شريط التمرير */
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: fade-plane 0.5s ease;

}
.div-plane.active::-webkit-scrollbar {
    display: none;
}
 .plane-table{
    /* width: 200px; */
    border-radius: 10px;
    margin: 10px;
    flex: 0 0 160px;  /* 3 بطاقات ظاهرة بالضبط */
    min-width: 160px;
    /* scroll-snap-align: start; */
    scroll-snap-stop: always;
 }
.plane-table::after, .plane-table::before{
    border-radius: 10px;
}
.plane-heder{
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 0 8px;
    gap: 10px;
 }
.plane-heder img{
    width: 30px;
    padding: 0px;
}
.titel-heder{
    width: 75%;
    align-items: center;
    text-align: start;
}
.plane-table h1{
    font-size: 12px;
    line-height: 16px;
    font-weight:900;
    padding:   0;
}
.plane-table p{
    font-size: 10px;
    line-height: 14px;
    margin: 0px;
}
.plane-ligne{
    padding-right: 10px;
    gap: 10px;
}
.div-plane .icon-plane{
    height: 12px;
    width: 12px;
}
.plane-table h2{
    font-size: 9px;
    margin: 0 ;
}
.price p{
    font-size: 25px;  
}
.price span{
    font-size: 12px;
    margin: 0 2px;
}
.price-bttn{
    padding: 2px;
}
.price-bttn h3{
    width: 70px;
    padding:3px 7px;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.7s;
}
.price-bttn h3:hover{
        width: 120px;
}
.golden-price-bttn{
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.golden-price-bttn h3{
    width: 70px;
    padding:3px 7px;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.7s;
}
.golden-price-bttn h3:hover{
    width: 120px;
}
         /* ******** End Plan********* */
/* >>>>>>>>> section stat   */
.stat{
    margin-bottom: 30px;
}
 .box-count{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 4%;
 }
.cart{
    width: 22%;
    height: 160px;
    padding: 3px;
    border-radius: 10px;
    margin: 0;
    justify-content: center;
    align-items: center;
}
.cart img{
    /* height: 40%; */
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
}
.cart p{
    font-weight:600;
    font-size: 80%;
    text-align: center;
}
.div-count{
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.num{
    color:var(--whithColor);
    font-weight:800;
    font-size: 40px;
    text-align: center; 
}
.symbol-plus{
    color:var(--whithColor);
    font-weight:800;
    font-size: 30px;
    margin: 0;
}
/* >>>>>>>>>  End section stat   */
/* ----->>>>-- Star Partenaires --->>>>---- */
.Partenaires{
    padding: 0 4%;
    margin-bottom: 40px;
    
}
.div-parte{
    width: 100%;
    gap: 20px;
}
.parte img{
    height: 35px;
    filter: grayscale(0);
}
/* >>>>>>>>> End section Partenaires   */
/* *\ >>>>>>>>> *classe-main* <<<<<<<<<<<  /* */
.classe-main{
    padding-top: 20%;
} 
.head{
    width: 85%;
    margin-bottom: 0px;
}
.head p{
    text-align: justify;
} 
/* -----<<<<-- End classe-main ---<<<<---- */
/* >>>>>>>>> Start Box Projet   */
.div-boxes-projet{
    gap: 15px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 40px;
}
.div-boxes-projet a{
    width: 26%;
}.box-projet{
    padding: 5px; 
    padding-top: 10px;         
}
.box-projet img{
    margin-left: 0;
    margin-bottom: 10px;
    width: 60px;
    height: 60px;
}
.box-projet h3{
    width: 95%;
    font-size: 10px;
    display: flex;
    text-align: center;
} 
/* >>>>>>>>> End Box Projet   */
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star projects - أعمالنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *brand-projects* <<<<<<<<<<<  /* */
.brands{
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
}
.brand-box{
    width: 90%;
    border-radius: 10px;
    padding: 15px;
    margin: 20px ;
}
.brand-box:hover{
    scale: 1;
    box-shadow:none;
}
.div-down{
    width: 100%;
    padding: 0 10px 20px 10px;
}
.div-down i{
    font-size: 15px;
}
/* -----<<<<-- End brand-section ---<<<<---- */
/* *\ >>>>>>>>> *print-projet* 
                *posts-projet* <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *box-element* <<<<<<<<<<<  /* */
.box-element {
    width: 85%;
    margin-top: 20px;
    gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}
.box-element img{
    padding: 0px;
    height: 80px;
    border-radius: 0;
}
.box-element img:hover{
    background-color: none;
    box-shadow:  none;
}
.popup-image{
    z-index: 100;
    display: none;
}
.popup-image img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:90% ;
    height:auto;
    padding-bottom: 50px;
}
         /* ***************** */
/* *\ >>>>>>>>> *videos-projet* <<<<<<<<<<<  /* */
.videos-box{
    width:90%;
    margin:0 0;
    gap: 10px;
}
.div-videos{
    width: 45%;
    border-radius: 7px;
    margin: 0  ;
}

.div-videos img{
    border-radius: 15px;
    width: 100%;
    transition: 0.7s;
}
.div-videos img:hover{
    scale:1 ;
     box-shadow:  none;
}
.div-videos h2{
    font-size: 14px;
    margin-bottom: 0;
}
/* -----<<<<-- End videos ---<<<<---- */
/* *\ >>>>>>>>> *site-projet* <<<<<<<<<<<  /* */
.site-box{
    width: 90%;
    margin-top: 10px;
    margin-bottom: 40px;
}
.div-site{
    width: 45%;
    border-radius: 7px;
    margin: 0  ;
}
.div-site img{
    border-radius: 20px;
    margin-bottom: 0px;
    width: 90%;
    transition: 0.7s;
}
.div-site img:hover{
    scale:1;
}
.div-site h2{
    font-size: 14px;
    margin-bottom: 0;
}
/* *\ >>>>>>>>> *End site-projet* <<<<<<<<<<<  /* */
/* -----------------------------------------------------------------
----------------------------- contact ------------------------------ 
----------------------------------------------------------------- */
/* ----->>>>-- Star contact --->>>>---- */
.contact-us{
    padding-top: 80px;
    align-items: center;
    justify-content: center;
} 
.contact-us-titel{
    text-align:center;
    font-size: 25px;
    margin-bottom: 0px;
}
.ditails-contact-us{
    /* width: 90%; */
    margin-bottom: 10px;
    gap: 20px;
}
.content-contact-us i{
    color: var(--whithColor);
    font-size: 35px;
    padding: 0;
}
.content-contact-us i:hover{
    transform: scale(1);
}
.ph i:hover{background-color: #0c7c24;}
.wt i:hover{background-color: #25d366;}
.gm i:hover{background-color: #c71610;}
.fb i:hover{background-color: #1877F2;}
.in i:hover{background-color: #C13584;}
.th i:hover{background-color: #000000;}
.tw i:hover{background-color: #000000;}
.tk i:hover{background-color: #000000;}
.ln i:hover{background-color: #0077B5;}
.bh i:hover{background-color: #053eff;}
.sn i:hover{background-color: #FFFC00;}
.yt i:hover{background-color: #FF0000;}
.pn i:hover{background-color: #E60023;}

.Right-Reserved{
    padding-top: 30px;
    width: 100%;
}

.Reserved-logo {
    height: 100px;
    text-align: center;
    padding: 20px;
 }
 .Reserved-logo img{
    margin-right: 0;
    height: 80%; 
}
.Reserved-by p{
    font-size: 22px;
}
.Reserved-by span{
    font-size: 25px;
}
/* -----<<<<-- End contact ---<<<<---- */

         /* ***************** */

/* ----->>>>-- Star footer --->>>>---- */
.footer-top{
    justify-content: center;
    
}
.para-footer{
    align-items: center;
    margin-bottom: 20px;
    width: 70%;
}
.para-footer a{
    height: 30px;
    margin:0;
 }
 .para-footer img{
    height: 100%;
    margin:0;
}
.para-footer p{
    text-align: center;
    font-size: 15px;
    line-height: 25px;
    width: 90%;

 }
 .link {
    margin: 0;
    width: 20%; 
 }
 .link h1{
    font-size: 13px;
    margin-bottom:5px;
 }
 .link ul li{
    margin: 0;
    list-style-type: none;
 }
 .link ul li a{  
    font-size: 12px;
    margin-bottom: 2px;
 }
 .link ul li a:hover{
    font-size: 12px;
 }
 .contact-footer{
    margin: 0;
    text-align: start;
 }
 .social{
    margin-bottom: 0;
 }
 .social-titel h3{
    font-size: 13px;
    margin-bottom: 5px;
 }
.social-icon i{
    padding: 3px;
    font-size: 15px;
    margin: 0 ;
    color: var(--premierColor);
    opacity: 1;
    transition: 0.7s;
}
.footer-bottom{
    height: 50px;
}
.footer-bottom p{
    color: var(--whithColor);
    font-weight:300;
    font-size: 15px;
}
.footer-bottom img{
    padding-top: 3px;
    height: 20px;
    margin-left: 5px;
    margin-right: 2px;
}
/* -----<<<<-- End footer ---<<<<---- */

} 

@media screen and (min-width: 481px) and (max-width: 768px) {
:root {
    --padding: 4%;

}
body{
    background-image:linear-gradient(rgba(255,255,255,0.96),
                                    rgba(255,255,255,0.96)),
                                     url(../images/Back-480px.svg);
    background-size:contain;
}
html {
    font-size: 11px;
}
 .waves {
      height: 40px;
      min-height: 40px;
    }
  
    .content {
      height: 30vh;
    }
/* ----->>>>-- Default Text Style --->>>>---- */
h1{
    font-weight:900;
    font-size: 25px;
}
 h2{
    font-weight:900;
    font-size: 20px;
}

h3{
    font-weight:900;
    font-size: 10px;
}
 h5{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 10px;
}
 h6{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 10px;
}
p{
    font-weight:600;
    font-size: 14px;
    line-height: 20px;
    text-align: justify;
    }

    /* *\ >>>>>>>>> *sections-class* <<<<<<<<<<<  /* */
 .sections-class{
    margin-top: 0px;
    width: 90%;
    justify-content: space-evenly;
 }
 /* -----<<<<-- update ---<<<<---- */
.loading{
    height: 200px;
    margin-bottom: 180px;
}
.update{
    border: 2px solid var(--desiemeColor);
    border-radius: 10px;
    margin:20px 0 0  0;
  }
  .update img{
    height: 40px;
    padding: 0;
}  
.update p{
    font-size: 15px;
    margin:2px 10px;
    padding-bottom: 5px;
}   
/* ----->>>>-- Star Home --->>>>---- */

.home{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

/* ----->-- nav */
        
nav{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 7%;
    width: 100%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7%;
}

nav > a{
    display: block;
    z-index: 100;
}
nav ul {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 220px;
    background-color: var(--whithColor);
    padding: 20px 20% 0 0;
    z-index: 100;
}
nav ul::after {
    z-index: 1;
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: linear-gradient(
    to left,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F,
    #71308F, #EB2127, #EC008C, #00AEEF, #FFF200, #71308F
  );
  background-size: 200% 100%;
  animation: moveGradient 5s linear infinite;
}
@keyframes moveGradient {
  0%   { background-position: 0% 0%; }
  100% { background-position: 100% 0%; }
}
nav ul li a{
    text-decoration: none;
    font-size: 17px;
    padding: 5px 10px;
    border-radius: 10px;
}
nav ul.is-active{
    display: block;
}
nav ul li {
    display: block;
    text-align: start;
    margin: 8px;
    width: 200px;
}
.logo {
    padding-top: 0;
    padding-right: 0;
    width: 25%;
    height: 45%;
    margin-right: 0;
    z-index:100;
    display: flex;
    justify-content: end;
}
.logo img {
    height: 100%;
    margin-bottom: 0;
}
#menu{
    display: flex;
    align-items: start;
    justify-content: end;
    padding-right: 0;
    display: block;
    z-index: 1100;
}
#menu span{
    display: block;
    width: 25px;
    height: 4px;
    background-color: var(--premierColor);
    margin: 5px 0;
}

 /* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Acceil - الرئيسية* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

 /* >>>>>>>>> Star section intervace  */
/* >>>>>>>>> content-intervace  */
.intervace{
    padding: 15% 7% 7% 7%;
 }
 .content-intervace{
    width: 100%;
 }
.arc-media p{
    line-height: 35px;
    font-weight:700;
    font-size: 23px;
    text-align: start;
 }
.qui-nou h1{
    font-size: 35px;
    margin-bottom: 3px;
 }
.qui-nou p{
    font-weight:500;
    font-size: 15px;
    line-height: 25px;
 }
 /* >>>>>>>>> motion-intervace  */
 .motion-intervace{
    display: none;
}
/* >>>>>>>>> End section intervace  */
/* >>>>>>>>> div-waves  */
.waves-top {
    min-height: 40px;
    max-height: 40px;
  }
/* >>>>>>>>> End div-waves  */

/* >>>>>>>>> Star section contents  */
.contents{
    padding: 0;
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 10px 0;
 } 
.img-contents{
    margin:0 ;
    width: 100%;
    height: 80px;
}
.img-contents img{
    height: 85%;
}
.div-contents{
    width: 100%;
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
}
.par-contents{
    width: 85%;
    margin-bottom: 0;
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
}
.contents-type{
    width: 95%;
    display: flex ;
    justify-content: center;
    flex-wrap: wrap;
    margin-top:0;
    gap: 5px;
}
.par-type{
    margin: 0;
    width: 22%;
    padding: 5px;
    text-align: start;
 }
 .contents-icon{
    height: 30px;
    width: auto;
}
 .par-type p{
    font-size: 10px;
    line-height: 15px;
    font-weight: 600;
 }
  .img-contents{
   display: none;
}
.icon-self{
    display: none;
}
/* >>>>>>>>> End section contents  */
/* ----->>>>-- Star purpose --->>>>---- */
.purpose{
    justify-content: center;
    margin: 20px;
    gap: 20px;
 }
.content-purpose{
    align-items: start;
    padding: 10px ;
    text-align: right;
    width: 28%;
    border-radius: 10px;
}
.icon-purpose{
    height: 30px;
}
.content-purpose p{
    line-height: 20px;
    font-weight:600;
    font-size: 11px;
    margin-bottom: 10px;
    text-align: justify;
 }
/* -----<<<<-- End purpose ---<<<<---- */
/* *\ >>>>>>>>> *contents-services* <<<<<<<<<<<  /* */
.contents-services{
    margin: 0 0 10px  0;
    gap: 20px;
}
.par-contents h1{
    font-size: 25px;
    gap: 10px;
     align-items: baseline;
}

.img-services{
    display: none; 
}
.icon-titel{
    display:block;
    height: 35px;
    width: auto;
}
.contents-services .div-contents{
    width: 100%;
}

.contents-services p{
    font-size: 15px;
    line-height: 20px; 
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
.box-sections{
    width: 100%;
    margin-top: 0px;
}
.div-boxes-services{
    gap: 15px;
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
}
.box-services{
    padding: 10px;          
    width: 30%;
    gap: 10px;
    justify-content: start;
}
.box-services img{
    margin-left: 0;
    width: auto;
    height: 40px;

}
.box-services h3{
    width: 60%;
    font-size: 13px;
    text-align: start;
    line-height: 20px;
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * End Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>>  >>>>>>>>> 
               *plane-section* 
                 <<<<<<<<<<< الباقات والعروض <<<<<<<<<<<  /* */
.plane-section{
    padding-top: 10px;
} 
.par-contents .plane-titel{
    font-weight:900;
    font-size: 30px;
}
 /* الباقات */
.div-options{
    padding: 5px;
    gap: 5px;
     width: 100%;
}
.plane-options{
    padding: 5px;
     width: 30%;   
}
.titel-options{
   width: 100%;
   gap: 5px;
   padding: 5px;
       border-radius: 7px;
}
.titel-options img{
    height: 20px;
    width: 20px;
}
.titel-options h1{
    font-weight:900;
    font-size: 15px;
    display: flex;
    padding-top: 3px;
}
.plane-options p{
    line-height: 15px;
    font-weight:900;
    font-size: 10px;
    text-align: center;
}
/* جدوال الباقات */
.div-plane{
    width: 90%;
    /* height: 100px; */
    margin-top: 10px;
    padding: 30px;
    gap: 20px;
      justify-content:start;
 }
 /* الباقة الظاهرة فقط */
.div-plane.active{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: 100%;
    margin:0;
    padding: 10px 30px ;
    gap: 7px;
    /* إخفاء شريط التمرير */
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: fade-plane 0.5s ease;

}
.div-plane.active::-webkit-scrollbar {
    display: none;
}
 .plane-table{
    /* width: 200px; */
    border-radius: 10px;
    margin: 10px;
    flex: 0 0 200px;  /* 3 بطاقات ظاهرة بالضبط */
    min-width: 200px;
    /* scroll-snap-align: start; */
    scroll-snap-stop: always;
 }
.plane-table::after, .plane-table::before{
    border-radius: 10px;
}
.plane-heder{
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 0 8px;
    gap: 10px;
 }
.plane-heder img{
    width: 30px;
    padding: 0px;
}
.titel-heder{
    width: 75%;
    align-items: center;
    text-align: start;
}
.plane-table h1{
    font-size: 12px;
    line-height: 16px;
    font-weight:900;
    padding:   0;
}
.plane-table p{
    font-size: 10px;
    line-height: 14px;
    margin: 0px;
}
.plane-ligne{
    padding-right: 10px;
    gap: 10px;
}
.div-plane .icon-plane{
    height: 13px;
    width: 13px;
}
.plane-table h2{
    font-size: 10px;
    margin: 0 ;
}
.price p{
    font-size: 25px;  
}
.price span{
    font-size: 12px;
    margin: 0 2px;
}
.price-bttn{
    padding: 2px;
}
.price-bttn h3{
    width: 70px;
    padding:3px 7px;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.7s;
}
.price-bttn h3:hover{
        width: 120px;
}
.golden-price-bttn{
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.golden-price-bttn h3{
    width: 70px;
    padding:3px 7px;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.7s;
}
.golden-price-bttn h3:hover{
    width: 120px;
}
         /* ******** End Plan********* */

/* >>>>>>>>> section stat   */
.stat{
    margin-bottom: 30px;
}

 .box-count{
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
    gap: 4%;
 }
.cart{
    width: 22%;
    /* height: 160px; */
    padding: 3px;
    border-radius: 20px;
    margin: 0;
    justify-content: center;
    align-items: center;
}
.cart img{
    height: 80px;
    width: 100%;
    padding: 10px;
    margin-bottom: 0px;
}
.cart p{
    font-weight:600;
    font-size: 15px;
    text-align: center;
}
.div-count{
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 5px;
}
.num{
    color:var(--whithColor);
    font-weight:900;
    font-size: 50px;
    text-align: center; 
}
.symbol-plus{
    color:var(--whithColor);
    font-weight:800;
    font-size: 40px;
    margin: 0;
}
/* >>>>>>>>>  End section stat   */
/* ----->>>>-- Star Partenaires --->>>>---- */
.Partenaires{
    padding: 0 4%;
    margin-bottom: 40px;
    
}
.div-parte{
    width: 100%;
    gap: 20px;
}
.parte img{
    height: 40px;
    filter: grayscale(0);
}
/* >>>>>>>>> End section Partenaires   */
/* *\ >>>>>>>>> *classe-main* <<<<<<<<<<<  /* */
.classe-main{
    padding-top: 13%;
} 
.head{
    width: 85%;
    margin-bottom: 0px;
}
.head p{
    text-align: justify;
} 
/* -----<<<<-- End classe-main ---<<<<---- */
/* >>>>>>>>> Start Box Projet   */
.div-boxes-projet{
    gap: 15px;
    width: 100%;
    margin-top: 10px;
    margin-bottom: 40px;
}
.div-boxes-projet a{
    width: 28%;
}
.box-projet{
    padding: 20px; 
            
}
.box-projet img{
    margin-left: 0;
    margin-bottom: 20px;
    width: 80px;
    height: 80px;
}
.box-projet h3{
    width: 95%;
    font-size: 15px;
    display: flex;
    text-align: center;
} 
/* >>>>>>>>> End Box Projet   */
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star projects - أعمالنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *brand-projects* <<<<<<<<<<<  /* */
.brands{
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
}
.brand-box{
    width: 90%;
    border-radius: 10px;
    padding: 15px;
    margin: 20px ;
}
.brand-box:hover{
    scale: 1;
    box-shadow:none;
}
.div-down{
    width: 100%;
    padding: 0 10px 20px 10px;
}
.div-down i{
    font-size: 15px;
}
/* -----<<<<-- End brand-section ---<<<<---- */
/* *\ >>>>>>>>> *print-projet* 
                *posts-projet* <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *box-element* <<<<<<<<<<<  /* */
.box-element {
    width: 85%;
    margin-top: 20px;
    gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}
.box-element img{
    padding: 0px;
    height: 80px;
    border-radius: 0;
}
.box-element img:hover{
    background-color: none;
    box-shadow:  none;
}
.popup-image{
    z-index: 100;
    display: none;
}
.popup-image img{
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width:90% ;
    height:auto;
    padding-bottom: 50px;
}
         /* ***************** */
/* *\ >>>>>>>>> *videos-projet* <<<<<<<<<<<  /* */
.videos-box{
    width:90%;
    margin:0 0;
    gap: 10px;
}
.div-videos{
    width: 45%;
    border-radius: 7px;
    margin: 0  ;
}

.div-videos img{
    border-radius: 15px;
    width: 100%;
    transition: 0.7s;
}
.div-videos img:hover{
    scale:1 ;
     box-shadow:  none;
}
.div-videos h2{
    font-size: 14px;
    margin-bottom: 0;
}
/* -----<<<<-- End videos ---<<<<---- */
/* *\ >>>>>>>>> *site-projet* <<<<<<<<<<<  /* */
.site-box{
    width: 90%;
    margin-top: 10px;
    margin-bottom: 40px;
}
.div-site{
    width: 45%;
    border-radius: 7px;
    margin: 0  ;
}
.div-site img{
    border-radius: 20px;
    margin-bottom: 0px;
    width: 90%;
    transition: 0.7s;
}
.div-site img:hover{
    scale:1;
}
.div-site h2{
    font-size: 14px;
    margin-bottom: 0;
}
/* *\ >>>>>>>>> *End site-projet* <<<<<<<<<<<  /* */
/* -----------------------------------------------------------------
----------------------------- contact ------------------------------ 
----------------------------------------------------------------- */
/* ----->>>>-- Star contact --->>>>---- */
.contact-us{
    padding-top: 80px;
    align-items: center;
    justify-content: center;
} 
.contact-us-titel{
    text-align:center;
    font-size: 25px;
    margin-bottom: 0px;
}
.content-contact-us i{
        color: var(--whithColor);
    font-size: 35px;
    padding: 0;
}
.content-contact-us i:hover{
    transform: scale(1);
}
.ph i:hover{background-color: #0c7c24;}
.wt i:hover{background-color: #25d366;}
.gm i:hover{background-color: #c71610;}
.fb i:hover{background-color: #1877F2;}
.in i:hover{background-color: #C13584;}
.th i:hover{background-color: #000000;}
.tw i:hover{background-color: #000000;}
.tk i:hover{background-color: #000000;}
.ln i:hover{background-color: #0077B5;}
.bh i:hover{background-color: #053eff;}
.sn i:hover{background-color: #FFFC00;}
.yt i:hover{background-color: #FF0000;}
.pn i:hover{background-color: #E60023;}

.Right-Reserved{
    padding-top: 30px;
    width: 100%;
}
.Reserved-logo {
    height: 100px;
    text-align: center;
    padding: 20px;
 }
 .Reserved-logo img{
    margin-right: 0;
    height: 80%; 
}
.Reserved-by p{
    font-size: 22px;
}
.Reserved-by span{
    font-size: 25px;
}
/* -----<<<<-- End contact ---<<<<---- */

         /* ***************** */

/* ----->>>>-- Star footer --->>>>---- */
.footer-top{
    justify-content: center;
    gap: 5%;
    padding: 10px 4% 20px 4%;
}
.para-footer{
    align-items: start;
    margin-bottom: 20px;
    width: 40%;
}
.para-footer a{
    height: 40px;
        margin-bottom: 10px;
 }
 .para-footer img{
    height: 40px;
    margin:0;
    
}
.para-footer p{
    text-align: start;
    font-size: 15px;
    line-height: 25px;
    width: 90%;

 }
 .link {
    margin: 0;
    width: 15%; 
 }
 .link h1{
    font-size: 13px;
    margin-bottom:5px;
 }
 .link ul li{
    margin: 0;
    list-style-type: none;
 }
 .link ul li a{  
    font-size: 12px;
    margin-bottom: 2px;
 }
 .link ul li a:hover{
    font-size: 12px;
 }
 .contact-footer{
    margin: 0;
    text-align: start;
    width: 30%;
 }
 .social{
    margin-bottom: 0;
 }
 .social-titel h3{
    font-size: 13px;
    margin-bottom: 5px;
 }
.social-icon i{
    padding: 3px;
    font-size: 15px;
    margin: 0 ;
    color: var(--premierColor);
    opacity: 1;
    transition: 0.7s;
}
.footer-bottom{
    height: 50px;
}
.footer-bottom p{
    color: var(--whithColor);
    font-weight:300;
    font-size: 15px;
}
.footer-bottom img{
    padding-top: 3px;
    height: 20px;
    margin-left: 5px;
    margin-right: 2px;
}
/* -----<<<<-- End footer ---<<<<---- */




} 

@media screen and (min-width: 769px) and (max-width: 1270px) {

:root { 
    --padding: 4%;
}
body{
    background-image:linear-gradient(rgba(255,255,255,0.96),
                                    rgba(255,255,255,0.96)),
                                     url(../images/Back-480px.svg);
    background-size:contain;
}
html {
    font-size: 11px;
}
.waves {
      height: 40px;
      min-height: 40px;
    }
  
.content {
      height: 30vh;
    }
/* ----->>>>-- Default Text Style --->>>>---- */
h1{
    font-weight:900;
    font-size: 30px;
}
 h2{
    font-weight:900;
    font-size: 20px;
}

h3{
    font-weight:900;
    font-size: 15px;
}
h5{
    color:var(--troisemeColor);
    font-weight:900;
    font-size: 15px;
}
p{
    font-weight:600;
    font-size: 15px;
    line-height: 23px;
    text-align: justify;
    }

    /* -----<<<<-- update ---<<<<---- */
.loading{
    height: 200px;
    margin-bottom: 180px;
}
.update{
    border: 2px solid var(--desiemeColor);
    border-radius: 10px;
    margin:20px 0 0  0;
  }
  .update img{
    height: 40px;
    padding: 0;
}  
.update p{
    font-size: 15px;
    margin:2px 10px;
    padding-bottom: 5px;
}   
/* ----->>>>-- Star Home --->>>>---- */

.home{
    
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 2px;
}

/* ----->-- nav */
        
nav{
    position: relative; /* غير ضروري هنا لأن fixed أصلاً تعطي نفس الأثر، لكنها موجودة بالخاصية fixed */
    background-color: #f9f6f4;
    width: 100%;
    height: 50px;
    position: fixed;
    top: 0;
    padding-left: 2%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

nav ul{
    height: 40px;
    display: flex;
    justify-content:space-between;
    align-items:end;
    z-index: 1;
    padding-bottom: 4px;
}
nav ul li {
    list-style-type: none;
    display: inline-block;
}
nav ul li a{
    margin-left:10px;
    color:  var(--premierColor);
    text-decoration: none;
    font-size: 13px;
    font-weight: 800;
    padding: 6px ;
    padding-bottom: 8px;
    transition: .6s ease;
    border-radius: 8px 8px 0px 0px;

}
.logo {
    height: 25px;
    margin-right: 30%;
    display: flex;
    justify-content: end;
}
.logo img {
    height: 100%;
}

 /* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Acceil - الرئيسية* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

 /* >>>>>>>>> Star section intervace  */
/* >>>>>>>>> content-intervace  */
.intervace{
    padding:2% 4% 2% 3%;
    padding-top: 6%;
    
 }
 .content-intervace{
    width: 45%;
    gap: 10px;
 }
.arc-media p{
    line-height: 40px;
    font-weight:700;
    font-size: 25px;
    text-align: start;
 }
.qui-nou p{
    font-weight:500;
    font-size: 15px;
    line-height: 25px;
 }
 /* >>>>>>>>> motion-intervace  */
 .motion-intervace{
    width: 52%;
    display: flex;
}
/* >>>>>>>>> End section intervace  */
/* >>>>>>>>> div-waves  */
.waves-top {
    min-height: 40px;
    max-height: 40px;
  }
/* >>>>>>>>> End div-waves  */

/* >>>>>>>>> Star section contents  */
.contents{
    width: 100%;
    padding: 0 4%;
    display: flex ;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    margin-bottom: 20px;
    gap: 20px;
 } 
.img-contents{
    margin:0;
    width: 210px;
    height: 210px;
}
.img-contents img{
    width: auto;
}
.div-contents{
    width: 65%;
    display: flex ;
    flex-wrap: wrap;
    justify-content: center;
}
.par-contents{
    width: 100%;
    margin-bottom: 20px;
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
}
.contents-type{
         width: 100%;
        display: flex;
        justify-content: start;
        flex-wrap: wrap;
        gap: 20px;
        margin-top: 0;
}
.par-type{
    margin: 0;
    width: 20%;
    padding: 0px;
    text-align: start;
 }
 .contents-icon{
    height: 40px;
    width: auto;
}
 .par-type p{
    font-size: 10px;
    line-height: 15px;
    font-weight: 800;
    text-align: start;
 }

.icon-self{
    display: flex;
}
/* ----->>>>-- Star purpose --->>>>---- */
.purpose{
    justify-content: center;
    margin-bottom: 30px;
    gap: 30px;
 }

.content-purpose{
    padding: 14px ;
    text-align: right;
    /* flex-grow: 1; */
    /* flex-basis: 130px; */
    width: 30%;
    border-radius: 10px;
}
.icon-purpose{
    height: 80px;
}
.content-purpose p{
    line-height: 22px;
    font-weight:600;
    font-size: 14px;
    margin-bottom: 10px;
    text-align: justify;
 }
/* -----<<<<-- End purpose ---<<<<---- */
 .contents-services{
    justify-content: center;
    align-items: center;
    margin: 0 0 10px  0;
    gap: 20px;
    width: 100%;
    padding: 0 4%;
}
.img-services{
    display: flex ;
    justify-content: center;
    align-items: center;
    height: 180px;
    width: 180px;
}
.contents-services .div-contents{
    width: 65%;
}
.contents-services p{
    font-size: 15px;
    line-height: 23px;   
}
/* *\ >>>>>>>>> * End contents-services* <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>> * Star box-sections* <<<<<<<<<<<  /* */
.box-sections{
    margin-top: 10px;
}
.div-boxes-services{
    gap: 20px;
    width: 95%;
    margin-top: 10px;
    margin-bottom: 40px;
    text-align: center;
    justify-content: center;
}
.box-services{
    padding: 15px;          
    width: 30%;
}
.box-services img{
    margin-left: 15px;
    width: 50px;
    height: 50px;
}
.box-services h3{
    font-size: 15px;
    width: 60%;
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * End Services - خدماتنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */
/* *\ >>>>>>>>>  >>>>>>>>> 
               *plane-section* 
                 <<<<<<<<<<< الباقات والعروض <<<<<<<<<<<  /* */
.plane-section{
    padding-top: 10px;
} 
.par-contents .plane-titel{
    font-weight:900;
    font-size: 35px;
}
 /* الباقات */
.div-options{
    padding: 0;
     width: 100%;
}
.div-plane{
    width: 90%;
    /* height: 100px; */
    margin-top: 10px;
    padding: 30px;
    gap: 20px;
      justify-content:center;
 }
 .plane-options {
    padding: 2px 10px;
}
 /* الباقة الظاهرة فقط */
.div-plane.active{
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    width: 100%;
    margin:0;
    padding: 5px 10px ;
    gap: 7px;
    /* إخفاء شريط التمرير */
    scrollbar-width: none;
    -ms-overflow-style: none;
    animation: fade-plane 0.5s ease;

}
.div-plane.active::-webkit-scrollbar {
    display: none;
}
 .plane-table{
    /* width: 200px; */
    border-radius: 10px;
    margin: 10px;
    flex: 0 0 210px;  /* 3 بطاقات ظاهرة بالضبط */
    min-width: 210px;
    /* scroll-snap-align: start; */
    scroll-snap-stop: always;
 }
.plane-table::after, .plane-table::before{
    border-radius: 10px;
}
.plane-heder{
    display: flex ;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    padding: 10px;
    padding-bottom: 6px;
    gap: 10px;
 }
 .plane-heder img{
    width: auto;
    height: 40px;
    /* margin: 10px; */
    padding: 0px;
}
.titel-heder{
    width: 70%;
    align-items: center;
    text-align: start;
}
.plane-table h1{
    font-size: 16px;
    font-weight:900;
    padding:   0;
}
.plane-table p{
font-size: 100%;
        font-weight: 800;
        line-height: 15px;
        margin: 0px;
}
.plane-ligne, .hide{
   
    padding-right: 10px;
    gap: 10px;
}
.div-plane .icon-plane{
    height: 15px;
    width: 15px;
}
.plane-table h2{
    font-size: 12px;
    margin: 0 ;
}
.plane-table h3{
    /* width: 100%; */
    font-weight:900;
    font-size: 120%;
    padding-top: 0;
    line-height: 18px;
}
.observ{
    width: 46%;
    gap: 4px;
}
.price p{
    font-size: 25px;  
}
.price span{
    font-size: 12px;
    margin: 0 2px;
}
.price-bttn{
    padding: 2px;
}
.price-bttn h3{
    width: 70px;
    padding:0 7px;
    font-size: 10px;
    border-radius: 5px;
    transition: 0.7s;
}
.price-bttn h3:hover{
        width: 120px;
    background-color :none;
}
.golden-price-bttn{
    padding: 0 10px 10px 10px;
    display: flex;
    justify-content: center;
}
.golden-price-bttn h3{
    width: 70px;
    padding:3px 7px;
    font-size: 12px;
    border-radius: 5px;
    transition: 0.7s;
}
.golden-price-bttn h3:hover{
    width: 120px;
}
/* -----<<<<-- End plane ---<<<<---- */

/* >>>>>>>>> section stat   */

.stat{
    margin-bottom: 30px;
}
 .box-count{
    width: 95%;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
 }
.cart{
    width: 22%;
    padding: 10px;
    border-radius: 10px;
    margin: 0;
    justify-content: center;
    align-items: center;
}
.cart img{
    width: 100px;
    padding: 10px;
        margin-bottom: 10px;

}
.cart p{
    font-weight:600;
    font-size: 20px;
    text-align: center;
}
.div-count{
    height: 25%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.num{
    color:var(--whithColor);
    font-weight:800;
    font-size: 50px;
}
.symbol-plus{
    color:var(--whithColor);
    font-weight:800;
    font-size: 40px;
    margin: 0;
}
/* >>>>>>>>>  End section stat   */
/* ----->>>>-- Star Partenaires --->>>>---- */
.Partenaires{
    margin-bottom: 40px;
    padding: 0 4%;
}
.div-parte{
    width: 100%;
    gap: 20px;
}
.parte img{
    height: 40px;
    filter: grayscale(0);
}
/* >>>>>>>>> End section Partenaires   */
/* *\ >>>>>>>>> *classe-main* <<<<<<<<<<<  /* */
.classe-main{
    padding-top: 80px;
} 
.head{
    width: 85%;
}
/* -----<<<<-- End classe-main ---<<<<---- */

/* >>>>>>>>> Start Box Projet   */
.div-boxes-projet{
    width: 85%;
    gap: 15px;
}
.div-boxes-projet a{
    width: 30%;
    transition: .9s ease;
}
.box-projet{
    /* width: 23%; */
    margin: 0;
    padding: 8px;
    border-radius: 10px;
}
.box-projet img{
    margin-left: 0;
    height: 100px;
    padding: 10px 0;
}
/* .box-projet-img img{
    padding: 5px;
    height: 90%;
} */
.box-projet h3{
    width: 100%;
    font-size: 20px;
    margin-top: 10px;
    line-height: 27px;
    display: flex;
    text-align: center;
}
/* *\ >>>>>>>>> *sections-class* <<<<<<<<<<<  /* */
 .sections-class{
    margin-top: 20px;
    width: 95%;
    justify-content: space-evenly;
 }
.sections-type{
    gap: 15px;
    margin-bottom: 20px;
    margin-top: 5px;
}
.class-type{
    padding: 2px;
    border-radius: 20px;
    width: 130px;
}
.class-type:hover{
    scale: 1;
}
.class-type img{
    height: 60px;
    width: 60px;
    margin-bottom: 0px;
}
.class-type span{
    font-size: 11px;
    margin-bottom: 5px;
}
/* *\ >>>>>>>>> >>>>>>> >>>>>>> >>>>>>> >>>>>>>
           * Star projects - أعمالنا* 
     <<<<<<<  <<<<<<<  <<<<<<< <<<<<<<<<<<  /* */

/* *\ >>>>>>>>> *brand-projects* <<<<<<<<<<<  /* */
.brands{
    width: 95%;
    margin-top: 10px;
    margin-bottom: 20px;
    gap: 30px;
    justify-content: center;
}
.brand-box{
    width: 30%;
    border-radius: 10px;
    padding: 15px;
    margin: 0 ;
}
.brand-box:hover{
    scale: 1;
    box-shadow:none;
}
.div-down{
    width: 100%;
    padding: 0 10px 20px 10px;
}
.div-down h2{
    font-size: 12px;
    text-align: start;
}
.div-down i{
    font-size: 15px;
}
.card-logos{
    height: 100px;
}
.logo-primary img{
    height: 65%;
    padding: 2%;
    margin-bottom: 0;
}
.logo-sub img{
    height: 65%;
    padding: 2%;
    margin-bottom: 0;
}
.images-BW{
    height: 90px;
}
.images-BW .images-logo{
    height: 50%;
    padding: 2%;
    margin-bottom: 0;
}
/* -----<<<<-- End brand-section ---<<<<---- */

/* *\ >>>>>>>>> *box-element* <<<<<<<<<<<  /* */
.box-element {
    width: 90%;
    margin-top: 20px;
    gap: 10px;
    padding: 0px;
    justify-content: space-evenly;
}
.box-element img{
    padding: 0px;
    height: 140px;
    border-radius: 0;
}
.box-element img:hover{
    background-color: none;
    box-shadow:  none;
}
.popup-image{
    z-index: 100;
    display: none;
}
.popup-image img{
    position: absolute;
    top: 60%; left: 50%;
    transform: translate(-50%, -50%);
    height:80% ;
    width:auto;
    padding-bottom: 50px;
}
         /* ***************** */
/* *\ >>>>>>>>> *videos-projet* <<<<<<<<<<<  /* */
.videos-box{
    width:90%;
    margin:0 0;
    gap: 20px;
}
.div-videos{
    width: 30%;
    border-radius: 7px;
    margin: 0  ;
}
.div-videos img{
    border-radius: 15px;
    width: 100%;
    transition: 0.7s;
}
.div-videos img:hover{
    scale:1 ;
     box-shadow:  none;
}
.div-videos h2{
    font-size: 14px;
    margin-bottom: 0;
}
/* -----<<<<-- End videos ---<<<<---- */
/* *\ >>>>>>>>> *site-projet* <<<<<<<<<<<  /* */
.site-box{
    width: 90%;
    margin-top: 10px;
    margin-bottom: 40px;
}
.div-site{
    width: 30%;
    border-radius: 7px;
    margin: 0  ;
}
.div-site img{
    border-radius: 20px;
    margin-bottom: 0px;
    width: 90%;
    transition: 0.7s;
}
.div-site img:hover{
    scale:1;
}
.div-site h2{
    font-size: 14px;
    margin-bottom: 0;
}

/* ----->>>>-- Star contact --->>>>---- */
.contact-us{
    padding-top: 60px;
    align-items: center;
    justify-content: center;
} 
.ontact-us-titel{
    text-align:center;
    font-size: 25px;
    margin-bottom: 0px;
}
.content-ontact-us i{
    color: var(--whithColor);
    font-size: 35px;
    padding: 0;
}
.content-ontact-us i:hover{
    transform: scale(1);
}
.ph i{background-color: #0c7c24;}
.wt i{background-color: #25d366;}
.gm i{background-color: #c71610;}
.fb i{background-color: #1877F2;}
.in i{background-color: #C13584;}
.th i{background-color: #000000;}
.tw i{background-color: #000000;}
.tk i{background-color: #000000;}
.ln i{background-color: #0077B5;}
.bh i{background-color: #053eff;}
.sn i{background-color: #FFFC00;}
.yt i{background-color: #FF0000;}
.pn i{background-color: #E60023;}

.Right-Reserved{
    padding-top: 30px;
    width: 100%;
}
.Reserved-logo {
    height: 100px;
    text-align: center;
    padding: 20px;
}
 .Reserved-logo img{
    margin-right: 0;
    height: 80%; 
}
.Reserved-by p{
    font-size: 22px;
}
.Reserved-by span{
    font-size: 25px;
}
/* -----<<<<-- End contact ---<<<<---- */

         /* ***************** */

/* ----->>>>-- Star footer --->>>>---- */
.footer-top{
    padding: 2% 4%;
    justify-content: center;
    gap: 10%;
}
.para-footer{
    display: flex ;
    flex-wrap: wrap;
    width: 30%;
    justify-content: start;
    margin-bottom: 0;
    align-items: start;
    padding: 0;
}
.para-footer a{
    height: 40px;
    margin:0;
 }
 .para-footer img{
    height: 100%;
    margin:0;
}
.para-footer p{
    text-align: start;
    font-size: 17px;
    line-height: 21px;
    width: 100%;
 }
 link {
    margin: 0;
    padding: 0;
    /* width: 20%;  */
 }
 .link h1{
    font-size: 13px;
    margin-bottom:0;
 }
 .link ul li{
    margin: 0;
    list-style-type: none;
 }
 .link ul li a{  
    font-size: 12px;
    font-weight:600;
    opacity:1;
    margin-bottom: 0;
 }
 .link ul li a:hover{
    font-size: 12px;
    transform: none;
 }
 .contact-footer{
    margin: 0;
    padding: 0;
    width: 30%;
    text-align: start;
 }
 .social{
    width: 95%;
    margin-bottom: 0;
 }

 .social-titel h3{
    font-size: 13px;
    margin-bottom: 5px;
 }
  .social-icon {
    gap: 3%;
}
.social-icon i{
    padding: 3px;
    font-size: 15px;
    margin: 0 ;
    color: var(--premierColor);
    opacity: 1;
    transition: 0.7s;
}
.footer-bottom{
    height: 50px;
}
.footer-bottom p{
    color: var(--whithColor);
    font-weight:300;
    font-size: 15px;
}
.footer-bottom img{
    padding-top: 3px;
    height: 20px;
    margin-left: 5px;
    margin-right: 2px;
}
/* -----<<<<-- End footer ---<<<<---- */

}