@font-face {
    font-family: 'Rostack';
    src: url('../fonts/Rostack.woff') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Thedus Condensed Light';
    src: url('../fonts/FontsFree-Net-Thedus-CondensedLight.woff') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'Asterone';
    src: url('../fonts/Asterone DEMO.woff') format('truetype');
    font-display: swap;
}
a {
  text-decoration: none;
  color: #007bff;
}
*{
    margin: 0;  
}
/*-----------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
/* ----------------------------------  🧠 header 🧠  ---------------------------*/                     
  
  body {
    font-family: sans-serif;
    background: linear-gradient(to top, #191c1f, #111214) no-repeat;
    height: auto;
  }
  main{
    z-index: 1;
    background-image: url(../image/غلاف-صفحة.png);
    background-position: center;
    background-size: 0.3vw;
  }

  header{
 
    background-position: center;
    background-size: 0.3vw;
    z-index: 2;
    transition: background-color 0.3s ease;
    z-index: 1000;
  }
  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4vw;
    width: 100%;
    color: white;
    position: relative;
    background-color: rgba(0, 0, 0, 0); /* شفاف */
    transition: background-color 0.3s ease;
    position: fixed;
  }
  .navbar.scrolled {
  background-color: rgba(0, 0, 0, 0.8); /* يتبدل اللون كي تنزل */
  backdrop-filter: blur(5px); /* تأثير ضبابي خفيف */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* ظل */
}
  .logo {
    margin-left: 3vw;
  }
  
  .nav-links {
    list-style: none;
    display: flex;
    gap: 1.2rem;
    margin-right: 5vw;
    transform: translate(-6vw, 0vw);
    align-items: center;
  }

  .A01 {
    color: white;
    text-decoration: none;
    font-size: 2vw;
    font-weight: 200;
    font-family: 'Rostack';
    transition: 0.3s;
  }
.A01:hover {
    color: #2A7DD8;
    transition: 0.3s;
} 
.A01.not-hovered {
    color: #ffffff36;
  }
  
  .menu-toggle {
    display: none;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 9999;
  }

.logo_Next_horizon{
    height: 2vw;
}

/* ------------- خدمات ---------------*/
.services-menu {
  position: relative;
}
  
.dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0vw;
  border-radius: 3px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  width: 10%;
  background-color: #292e3267;
  width: 20vw;
  transition: 0.5s;
  transform: translate(-0.5vw ,0.5vw);
}
.dropdown.show {
  display: block;
}
.dropdown li {
    padding: 6px 12px;
    cursor: pointer;
    list-style: none;
    font-family: 'Rostack';
    font-size: 1.7vw;
    transition: 0.2s;
    width: 100%;
    font-weight: 100;
    overflow: hidden;
  }
  .dropdown li a{
    color: #ffffff;
    list-style: none;
    font-family: 'Rostack';
    padding: 0 20vw 0 0;
    font-size: 1.7vw;
    transition: 0.2s;
    width: 100%;
    font-weight: 100;
  }
  
  .dropdown li a:hover {
    background: #292e32;
    color: #007bff;
    transition: 0.2s;
  }
  

/*   زر في صفحة services         */
.down {
    height: 1vw;
    transition: transform 0.3s ease scale(1.0);
    transition: 0.3s;
  }
  
  .down.scaled {
    transform: scale(1.2);
    transition: 0.3s;
  }
  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
  
  /* ----------------------------------  🧠 header 🧠  ---------------------------*/   

  /* -----------------------------  👔 main: page home 👔 ------------------------*/
  .home{
    padding-top: 3vw;
  }
  .Rules{
    padding: 5vw 0;
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;

  }
  .main_page_home{
    height: 40vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .address{
    height: 35vw;
    width: 40%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .image_page_home{
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .image01{
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    object-fit: contain;
    height: 100%;
    width: 21vw;
    border-radius: 1vw;
    margin: auto;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 00%);
   -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 90%);
  }
  .address_Video_creation{
    width: 100%;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .address_Let_me{
    width: 100%;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
.address_who_i_am{
    position: relative;
    width: 100%;
    height: 4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1vw;
}
/* ------------- عنوان ---------------*/
.address .address_Video_creation h1 {
    color: rgb(255, 255, 255);
    font-family: 'Rostack';
    font-size: 3.5vw;
    text-shadow: 2px 2px 5px #0000007a;
    font-weight: 200;
    margin: 0.3vw;
}
.address_Video_creation h1 b{
    color: #007bff;
}
.address_Let_me h2 {
    color: #ffffff;
    font-family: 'Rostack';
    font-size: 2.5vw;
    text-shadow: 2px 2px 5px #0000007a;
    font-weight: 200;
    margin: 0.3vw 0vw 1vw 0;
}
.address .address_who_i_am .who_i_am {
    background: linear-gradient(30deg, #c0e6ff, #ffffff) no-repeat;
    height: 3vw;
    width: 7vw;
    border-radius: 5vw;
    transition: 0.3s;
    color: #007BFF;
    font-size: 2vw;
    font-weight: 100;
    font-family: 'Thedus Condensed Light';
    border: 0 solid;
    transform: translateY(0vw);
    cursor: pointer;
}
.address .address_who_i_am .who_i_am:hover{
    filter: brightness(1.2);
    transform: translateY(-0.5vw);
    transition: 0.3s;
    color: #00264e;

}
.who_i_am h5{
  color: white;
  font-size: 2vw;
  font-weight: 100;
}
.cv_actions{
  width: 12vw;
  height: 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5vw 0 ;
  flex-direction: column;
  visibility: hidden;
  
  position: absolute;
  top: calc(100% + 5px); /* تحت الزر CV بشوية */
  left: 19.9vw;
  z-index: 10;

  opacity: 0;                       /* تبدأ مخفية */
  visibility: hidden;
  pointer-events: none;            /* ما تقدرش تضغط عليها وهي مخفية */
  transition: opacity 0.4s ease, transform 0.4s ease; /* أنيميشن ناعم */
}
.cv_actions.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
  visibility: visible; /* تولي ظاهرة */
}
.cv_actions .cv_button {
  font-size: 1.2vw;
  color: #00264e;
}

.cv_button {
  background: linear-gradient(30deg, #c0e6ff, #ffffff) no-repeat;
    height: 3vw;
    width: 7vw;
    border-radius: 5vw;
    transition: 0.3s;
    font-weight: 100;
    font-family: 'Thedus Condensed Light';
    border: 0 solid;
    transform: translateY(0vw);
    margin: 0 2vw;
    font-size: 10vw;
    transition: 0.3 ease-in-out;
}
.cv_button:hover {
  background: linear-gradient(30deg, #94b1c5, #dbdbdb) no-repeat;
  transition: 0.3 ease-in-out;
}
.cv_button:focus,
.cv_button:active {
  outline: none;
  background: linear-gradient(30deg, #135caa, #2A7DD8);
}
.address_who_i_am a  {
    font-family: 'Thedus Condensed Light';
    text-decoration: none;
    color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2vw;
}

.whatsapp{
    height: 3vw;
    scale: 1;
    transition: 0.3s ;
}
.whatsapp:hover{
    height: 3vw;
    scale: 1.2;
    transition: 0.3s ;
}

/*----------------------  🧧 brands 🧧 ----------------*/
.brands{
  background-color: #121516;
  width: 100%;
  height: 5vw;
  display: flex;
  justify-content: space-evenly;
}
.brands div{
  width: 10vw;
  height: 5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.brands div .brands01 {
  height: 100%;
  width: 100%;
  background-image:url(../image/DNHwS3g8Row8GAyLfdmUuG40XSb0IvXefRnzzMAQ.webp) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 6vw; 
}
.brands div .brands02 {
  height: 100%;
  width: 100%;
  background-image:url(../image/JustMarkets-Logo.webp) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 10vw;
}
.brands div .brands03 {
  height: 100%;
  width: 100%;
  background-image:url(../image/axi_logo.webp) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5vw;
}
.brands div .brands04 {
  height: 100%;
  width: 100%;
  background-image:url(../image/dhFCoXJdcBAC71gpIOOrv59J4bcbT31D2R8zmMGz.webp) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 5vw;
}
.brands div .brands05 {
  height: 100%;
  width: 100%;
  background-image:url(../image/cropped-LOGO-CASBAH-PROPRE-3d-Converted-01-copy-1.webp) ;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 7vw;
}
/*------------------------- 📍 Whether you are 📍 ------------------*/
.WYa{
  width: 100%;
  height: 35vw;
}
.Whether_you_are  {
  width: 100%;
  height: 8vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Whether_you_are h2{
  color: #ffffff;
  font-size: 3vw;
  font-family: 'Rostack';
  font-weight: 100;
}
.imgcre02{
  width: 100%;
  height: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url(../image/C\ H\ W\ 001.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 50vw;
}

/*---------------------------------------------------------------------*/
/*-------------------------- 🛡️ dervice 🛡️ ---------------------------*/
.swiper {
      width: 100%;
      height: auto;
      background-color: #111111;
    }

    .swiper-slide {
      text-align: center;
      font-size: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
      height: auto;
       
    }
    .swiper.mySwiper{
      color:  #007BFF;
      font-family: 'Asterone';
      font-size: 1vw;
    }

    .swiper-slide01, .swiper-slide02 ,.swiper-slide03 , .swiper-slide04 img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
.swiper-slide01 , .swiper-slide02 , .swiper-slide03 , .swiper-slide04 {
 
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  filter: brightness(0.5);
  transition: 0.3s ease;
  width: 100%;
  height: 100%;
    filter: brightness(0.5);
  transition: 0.3s ease-in-out;
}
.swiper-slide01:hover , .swiper-slide02:hover{
  filter: brightness(0.9);
  transition: 0.3s ease-in-out;
}
a .swiper-slide01, .swiper-slide02 , .swiper-slide03 , .swiper-slide04 {
  width: 100vw;
  height: 25vw;
}

.Service01 {
  background-color: #0e10117e;
  width: 100%;
  height: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Service01mbl{
  display: none;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90%;
  height: 20vw;
  position: relative;
}
.box-container {
  display: flex;
  overflow: hidden;
  width: auto;
  height: 20vw;
  position: relative;
  align-items: center;

}
.box-track {
  display: flex;
  transition: transform 0.5s ease;
  will-change: transform;
  box-sizing: content-box;
}

.box {
  width: 40vw;
  height: 20vw;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  margin: 0 2px;
  cursor: pointer;
  transform: skew(-2deg) translateX(00px);
}
.box::after {
  content: attr(data-title);
  position: absolute;
  bottom: 10px;
  left: 10px;
  color: white;
  font-size: 1.2vw;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 5px 10px;
  border-radius: 5px;
}
.btn {
  padding: 1vw 1vw;
  margin: 0 10px;
  background-color: #D9D9D9;
  color: rgb(0, 0, 0);
  cursor: pointer;
  border: none;
  border-radius: 50%;
  font-size: 20px;
  transition: 0.3s ease-in-out;
}
.btn:hover {
  background-color: #797979;
  transition: 0.3s ease-in-out;
}
.container button i{
  color: #007bff;
  height: 1.5vw;
  width: 1.5vw;
  font-size: 1.5vw;
  transition: 0.3s ease-in-out;
}
.container button:hover i{
  color: #71b6ff;
  transition: 0.3s ease-in-out;
}
.service-card {
    filter: brightness(0.7); /* تخفيف الإضاءة قليلاً */
    transition: all 0.3s ease; /* تأثير سلس عند hover */
}

.service-card:hover {
    filter: brightness(1); /* يزيد الإضاءة عند المرور بالفأرة */
    cursor: pointer;
}


.road{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 2vw;
}
.road div {
  height: 25vw;
  width: 60vw;
  margin: 0.2vw;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(10vw);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.road div.animate {
  opacity: 1;
  transform: translateY(0);
}
.road div.show {
  opacity: 1;
  transform: translateY(0);
}
.road div .road01{
  width: 30vw;
  height: 20vw;
  margin: 0vw 1vw;
  background-image: url("../image/v-02.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(0);
  transition: 0.5s ease-in-out;
  z-index: 1;
  filter: grayscale(1); 
  transition: 0.3s ease-in-out;
  box-shadow: 0 0 10px 5px #16191b;
  border-top: 0.3vw solid #007BFF;
  border-left: 0.3vw solid #007BFF;
  border-bottom: 0.3vw solid #0252a8;
  border-right: 0.3vw solid #0252a8;
  border-style: double;
}
.road div:hover .road01{
  filter: grayscale(0); 
  transition: 0.3s ease-in-out;
}
.road div .road02{
  width: 30vw;
  height: 20vw;
  margin: 0vw 1vw;
  background-image: url("../image/I\ PH\ 02.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  filter: grayscale(1); 
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 10px 5px #16191b;
  border-top: 0.3vw solid #007BFF;
  border-left: 0.3vw solid #007BFF;
  border-bottom: 0.3vw solid #0252a8;
  border-right: 0.3vw solid #0252a8;
  border-style: double;
}
.road div:hover .road02{
  filter: grayscale(0); 
  transition: 0.3s ease-in-out;
}
.road div .road03{
  width: 30vw;
  height: 20vw;
  margin: 0vw 1vw;
  background-image: url(../image/I\ PH\ 003.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1); 
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 10px 5px #16191b;
  border-top: 0.3vw solid #007BFF;
  border-left: 0.3vw solid #007BFF;
  border-bottom: 0.3vw solid #0252a8;
  border-right: 0.3vw solid #0252a8;
  border-style: double;
}
.road div:hover .road03{
  filter: grayscale(0); 
  transition: 0.3s ease-in-out;
}
.road div .road04{
  width: 30vw;
  height: 20vw;
  margin: 0vw 1vw;
  background-image: url(../image/I\ PH\ 004.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: auto;
  filter: grayscale(1); 
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 10px 5px #16191b;
  border-top: 0.3vw solid #007BFF;
  border-left: 0.3vw solid #007BFF;
  border-bottom: 0.3vw solid #0252a8;
  border-right: 0.3vw solid #0252a8;
  border-style: double;
}
.road div:hover .road04{
  filter: grayscale(0); 
  transition: 0.3s ease-in-out;
}
.road div .road05{
  width: 30vw;
  height: 20vw;
  margin: 0vw 1vw;
  background-image: url(../image/I\ PH\ 005.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: grayscale(1); 
  transition: 0.5s ease-in-out;
  box-shadow: 0 0 10px 5px #16191b;
  border-top: 0.3vw solid #007BFF;
  border-left: 0.3vw solid #007BFF;
  border-bottom: 0.3vw solid #0252a8;
  border-right: 0.3vw solid #0252a8;
  border-style: double;
}
.road div:hover .road05{
  filter: grayscale(0); 
  transition: 0.3s ease-in-out;
}
.road .road01 h2{
  color: #ffffff;
  font-family: 'Rostack';
  font-size: 2.0vw;
  letter-spacing: 0.1vw;
  transform: translateX(25vw) translateY(6vw);
  transition: 0.5s ease-in-out;
  filter: blur(2px);
  text-shadow: 0 5px 5px #16191b;
  z-index: 2;
  font-weight: 100;
}
.road div .road01:hover h2{
  transition: 0.3s ease-in-out;
  transform: translateX(27vw) translateY(6vw);
  filter: blur(0px);
  text-shadow: 0 0 30px #007BFF;
  color: #dfeeff;
}
.road .road02 h2{
  color: #ffffff;
  font-family: 'Rostack';
  font-size: 2.0vw;
  letter-spacing: 0.1vw;
  transform: translateX(-25vw) translateY(6vw);
  transition: 0.5s ease-in-out;
  filter: blur(2px);
  text-shadow: 0 5px 5px #16191b;
  font-weight: 100;
}
.road div .road02:hover h2{
  transition: 0.3s ease-in-out;
  transform: translateX(-27vw) translateY(6vw);
  filter: blur(0px);
  text-shadow: 0 0 30px #007BFF;
  color: #dfeeff;
}
.road .road03 h2{
  color: #ffffff;
  font-family: 'Rostack';
  font-size: 2.0vw;
  letter-spacing: 0.1vw;
  transform: translateX(25vw) translateY(6vw);
  transition: 0.5s ease-in-out;
  filter: blur(2px);
  text-shadow: 0 5px 5px #16191b;
  font-weight: 100;
}
.road div .road03:hover h2{
  transition: 0.3s ease-in-out;
  transform: translateX(27vw) translateY(6vw);
  filter: blur(0px);
  text-shadow: 0 0 30px #007BFF;
  color: #dfeeff;
}
.road .road04 h2{
  color: #ffffff;
  font-family: 'Rostack';
  font-size: 2.0vw;
  letter-spacing: 0.1vw;
  transform: translateX(-25vw) translateY(6vw);
  transition: 0.5s ease-in-out;
  filter: blur(2px);
  text-shadow: 0 5px 5px #16191b;
  font-weight: 100;
}
.road div .road04:hover h2{
  transition: 0.3s ease-in-out;
  transform: translateX(-27vw) translateY(6vw);
  filter: blur(0px);
    text-shadow: 0 0 30px #007BFF;
  color: #dfeeff;
}
.road .road05 h2{
  color: #ffffff;
  font-family: 'Rostack';
  font-size: 2.0vw;
  letter-spacing: 0.1vw;
  transform: translateX(25vw) translateY(6vw);
  transition: 0.5s ease-in-out;
  filter: blur(2px);
  text-shadow: 0 5px 5px #16191b;
  font-weight: 100;
}
.road div .road05:hover h2{
  transition: 0.3s ease-in-out;
  transform: translateX(27vw) translateY(6vw);
  filter: blur(0px);
  text-shadow: 0 0 30px #007BFF;
  color: #dfeeff;
}
.Here_are_opinions{
  height: 50vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.text_Here_are_opinions{
  height: 8vw;
  width: 30%;
  margin-right: 4vw;
}
.image_Here_are_opinions {
  width: 30%;
  height: 50vw;
  overflow: hidden;
  position: relative;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
}
/*-------------------------- 01 ------------------------*/
.box01 .M1{
  width: 100%;
  height: 4vw;
  display: flex;
  align-items: center;
  transform: translateY(1vw);
}
.box01 .p1{
  border-radius: 0;
  width: 100%;
  height: 8vw;
  transform: translateY(1vw);
}
.box01 .p1 p{
  text-indent: 1vw;
  font-weight: 600;
  width: 95%;
  margin: auto;
  color: #111111;
  font-size: 1vw;
}
.box01 .M1 .img{
  width: 4vw;
  border-radius: 50%;
  height: 4vw;
  transform: translateX(1vw);
  background-image: url(../image/omarturkay.jpg) ;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.box01 .M1 .t1{
  width: 20vw;
  height: 100%;
  transform: translateX(2vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.n1 h5{
  color: #141414;
  font-family: 'Rostack';
  font-size: 1.8vw;
  letter-spacing: 0.5px;
  font-weight: 200;
}
.box01 .M1 .t1 .n1{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
.s1 img {
  height: 1vw;
}
.box01 .M1 .t1 .s1{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
/*-----------------------------------------------------------------------*/
/*-------------------------- 02 ------------------------*/
.box02 .M2{
  width: 100%;
  height: 4vw;
  display: flex;
  align-items: center;
  transform: translateY(1vw);
}
.box02 .p2{
  border-radius: 0;
  width: 100%;
  height: 8vw;
  transform: translateY(1vw);
}
.box02 .p2 p{
  text-indent: 1vw;
  font-weight: 600;
  width: 95%;
  margin: auto;
  color: #111111;
  font-size: 1vw;
}
.box02 .M2 .img{
  width: 4vw;
  border-radius: 50%;
  height: 4vw;
  transform: translateX(1vw);
  background-image: url(../image/jacklayn.jpg) ;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.box02 .M2 .t2{
  width: 20vw;
  height: 100%;
  transform: translateX(2vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.n2 h5{
  color: #141414;
  font-family: 'Rostack';
  font-size: 1.8vw;
  letter-spacing: 0.5px;
  font-weight: 200;
}
.box02 .M2 .t2 .n2{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
.s2 img {
  height: 1vw;
}
.box02 .M2 .t2 .s2{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
/*-----------------------------------------------------------------------*/
/*-------------------------- 03 ------------------------*/
.box03 .M3{
  width: 100%;
  height: 4vw;
  display: flex;
  align-items: center;
  transform: translateY(1vw);
}
.box03 .p3{
  border-radius: 0;
  width: 100%;
  height: 8vw;
  transform: translateY(1vw);
}
.box03 .p3 p{
  text-indent: 1vw;
  font-weight: 600;
  width: 95%;
  margin: auto;
  color: #111111;
  font-size: 1vw;
}
.box03 .M3 .img{
  width: 4vw;
  border-radius: 50%;
  height: 4vw;
  transform: translateX(1vw);
  background-image: url(../image/Katsune.jpg) ;
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
}
.box03 .M3 .t3{
  width: 20vw;
  height: 100%;
  transform: translateX(2vw);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.n3 h5{
  color: #141414;
  font-family: 'Rostack';
  font-size: 1.8vw;
  letter-spacing: 0.5px;
  font-weight: 200;
}
.box03 .M3 .t3 .n3{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
.s3 img {
  height: 1vw;
}
.box03 .M3 .t3 .s3{
  width: 100%;
  height: 30%;
  margin: 0;
  border-radius: 0;
}
/*-----------------------------------------------------------------------*/
.opinions_wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  animation: scrollUp 10s linear infinite;
}
/*   background: linear-gradient(90deg, #b6b6b6, #D9D9D9);
*/
.image_Here_are_opinions div {
  height: 15vw;
  width: 100%;
  margin: 1vw 0;
  border-radius: 20px;
}

/* مستطيلات بلون إضافي */
.box01 {
  background: linear-gradient(90deg ,#818181 ,#ffffff);
  box-shadow: 0 0 10px 3px #222222 ;
}
.box02 {
  background: linear-gradient(90deg ,#818181 ,#ffffff);
  box-shadow: 0 0 10px 3px #222222 ;
}
.box03 {
  background: linear-gradient(90deg ,#818181 ,#ffffff);
  box-shadow: 0 0 10px 3px #222222 ;
}

/* الأنيميشن لي يحرك كامل المستطيلات */


@keyframes scrollUp {
  0% {
    top: 0;
  }
  100% {
    top: -48vw; 
  }
}
.text_Here_are_opinions img {
  height: 2vw;
  filter: saturate(0);
  scale: 1;
  transition: 0.3s ease;
}
.logo_trustpilot:hover {
  height: 2vw;
  filter: saturate(1);
  scale: 1.1;
  transition: 0.3s ease;
}
.text_Here_are_opinions h1{
  font-family: 'Rostack';
  color: #ffffff;
  font-size: 2vw;
  letter-spacing: 1px;
}
.text_Here_are_opinions .OPClints{
  font-family: 'Thedus Condensed Light';
  color: #008EFF;
  font-size: 1.5vw;
  letter-spacing: 1px;
}
.text_Here_are_opinions .OPClintsP{
  color: #9C9C9C;
  font-size: 0.7vw;
  letter-spacing: 1px;
}
.img_end{
  height: 35vw;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.img_end div{
  background-color: rgb(60, 50, 205);
  height: 22vw;
  width: 20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  word-wrap: break-word;
  box-shadow: 0 0 8px 4px #16191b; 
  background-image: url(../image/صورتي\ فالجاردان\ 002.webp);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  overflow: visible;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 00%);
   -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 90%);
   z-index: 1;
   position: relative;
   transform: translateX(-20vw) translateY(0vw);  
   transition: 0.5s ease-in-out;
   filter: grayscale(1);
}
.img_end1:hover {
  filter: grayscale(0);
  transition: 0.3s ease-in-out;
}
.img_end h1{
  font-size: 2vw;
  transform: translateX(20vw) translateY(5vw);  
  color: #ffffff;
  text-shadow: 0 0 5px #16191b;
  font-family: 'Rostack';
  line-height: 1;
  width: 30vw;
  z-index: 2;
  position: relative;
  transition: 0.5s ease-in-out;
  scale: 1.;
  font-weight: 100;
}
.img_end h1 b {
  color: #008EFF;
}

/*---------------- 👣 footer 👣 -------------------*/
@keyframes float {
     0%, 100%{
              transform: translate(0, 0) scale(1);
     }
     50% {
         transform: translate(30px, -30px) scale(1.1);
     }
}

footer {
     width: 100%;
     background: linear-gradient(0deg , #00152cff , #00264e);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-top: 1px solid rgba(255, 255, 255, 0.3);
     box-shadow: 0 -8px 32px 0 rgba(31, 38, 135, 0.37);
     padding: 60px 20px 20px;
     position: relative;
     z-index: 10;
}

footer::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 3px;
     background: linear-gradient(90deg, 
         transparent 0%,
         #007BFF 25%,
         #65afffff 50%,
         #007bff 75%,
         transparent 100%
     );
     animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
     0%, 100% {
         opacity: 0.5;
     }
     50% {
         opacity: 1;
     }
}

.web_services {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 20px;
     margin-bottom: 50px;
     position: relative;
}

.web_services a {
     text-decoration: none;
     color: #fff;
     padding: 15px 35px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.3);
     transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
     position: relative;
     overflow: hidden;
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

.web_services a::before {
     content: '';
     position: absolute;
     top: 0;
     left: -100%;
     width: 100%;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
     transition: left 0.6s ease;
}

.web_services a::after {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     width: 0;
     height: 0;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.3);
     transform: translate(-50%, -50%);
     transition: width 0.6s ease, height 0.6s ease;
}

.web_services a:hover::before {
     left: 100%;
}

.web_services a:hover::after {
     width: 300px;
     height: 300px;
}

.web_services a:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-8px) scale(1.05);
     box-shadow: 0 15px 40px rgba(0, 212, 255, 0.4),
                 0 0 20px rgba(255, 255, 255, 0.3);
     border-color: rgba(255, 255, 255, 0.5);
}

.web_services h1 {
     font-size: 16px;
     font-weight: 600;
     letter-spacing: 1.5px;
     text-transform: uppercase;
     position: relative;
     z-index: 1;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.strok {
     width: 70%;
     height: 1px;
     background: linear-gradient(90deg, 
         transparent 0%,
         rgba(255, 255, 255, 0.6) 50%,
         transparent 100%
     );
     margin: 45px auto;
     position: relative;
}

.strok::before {
     content: '';
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 8px;
     height: 8px;
     background: rgba(255, 255, 255, 0.8);
     border-radius: 50%;
     box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
     animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
     0%, 100% {
         transform: translate(-50%, -50%) scale(1);
         opacity: 1;
     }
     50% {
         transform: translate(-50%, -50%) scale(1.5);
         opacity: 0.5;
     }
}

.contact {
     text-align: center;
     margin-bottom: 45px;
     position: relative;
}

.contact > a {
     display: inline-block;
     text-decoration: none;
     color: #fff;
     margin-bottom: 35px;
     font-size: 28px;
     font-weight: bold;
     text-transform: uppercase;
     letter-spacing: 3px;
     position: relative;
     padding: 10px 30px;
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
     border-radius: 50px;
     transition: all 0.4s ease;
     text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.contact > a::before {
     content: '';
     position: absolute;
     inset: -2px;
     background: linear-gradient(45deg, #007bff, #49a1ffff, #49a1ffff, #007bff);
     border-radius: 50px;
     opacity: 0;
     transition: opacity 0.4s ease;
     z-index: -1;
     animation: gradient-rotate 3s linear infinite;
     background-size: 200% 200%;
}

@keyframes gradient-rotate {
     0% {
         background-position: 0% 50%;
     }
     50% {
         background-position: 100% 50%;
     }
     100% {
         background-position: 0% 50%;
     }
}

.contact > a:hover::before {
     opacity: 1;
}

.contact > a:hover {
     transform: scale(1.1);
     background: rgba(255, 255, 255, 0.2);
     box-shadow: 0 10px 40px rgba(0, 212, 255, 0.5);
}

.acounts {
     display: flex;
     justify-content: center;
     gap: 25px;
     flex-wrap: wrap;
}

.acounts a {
     width: 60px;
     height: 60px;
     background: rgba(255, 255, 255, 0.15);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
     border: 2px solid rgba(255, 255, 255, 0.3);
     position: relative;
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.2);
}

.acounts a::before {
     content: '';
     position: absolute;
     inset: -5px;
     border-radius: 50%;
     background: linear-gradient(45deg, #00346cff, #00264e);
     opacity: 0;
     transition: all 0.4s ease;
     z-index: -1;
     filter: blur(10px);
}

.acounts a::after {
     content: '';
     position: absolute;
     width: 100%;
     height: 100%;
     border-radius: 50%;
     border: 2px solid transparent;
     transition: all 0.5s ease;
}

.acounts a:hover::before {
     opacity: 1;
     inset: -8px;
}

.acounts a:hover::after {
     border-color: rgba(255, 255, 255, 0.6);
     transform: scale(1.3);
}

.acounts a:hover {
     background: rgba(255, 255, 255, 0.25);
     transform: translateY(-10px) rotate(360deg);
     box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6);
}

.acounts svg {
     width: 28px;
     height: 28px;
     color: #fff;
     transition: all 0.3s ease;
     filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.3));
}

.acounts a:hover svg {
     color: #007bff;
     transform: scale(1.1);
}

.email {
     display: flex;
     justify-content: center;
     flex-wrap: wrap;
     gap: 25px;
     margin-bottom: 40px;
     position: relative;
}

.email a {
     text-decoration: none;
     color: #fff;
     font-size: 15px;
     padding: 12px 25px;
     background: rgba(255, 255, 255, 0.12);
     backdrop-filter: blur(10px);
     -webkit-backdrop-filter: blur(10px);
     border-radius: 30px;
     border: 1px solid rgba(255, 255, 255, 0.25);
     transition: all 0.4s ease;
     box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
     position: relative;
     overflow: hidden;
}

.email a::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 0;
     height: 100%;
     background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     transition: width 0.6s ease;
}

.email a:hover::before {
     width: 100%;
}

.email a:hover {
     background: rgba(255, 255, 255, 0.2);
     transform: translateY(-5px);
     box-shadow: 0 12px 35px #007bff41;
     border-color: rgba(255, 255, 255, 0.4);
}

.email h1 {
     font-size: 15px;
     font-weight: 500;
     position: relative;
     z-index: 1;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.footer_bottom {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     padding: 30px 50px;
     background: rgba(0, 0, 0, 0.15);
     backdrop-filter: blur(10px);
     border-top: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 20px 20px 0 0;
     gap: 30px;
     position: relative;
     margin-top: 20px;
}

.footer_left,
.footer_center,
.footer_right {
     display: flex;
     flex-direction: column;
     gap: 10px;
}

.footer_center {
     align-items: center;
     justify-content: center;
}

.footer_right {
     align-items: flex-end;
}

.footer_bottom::before {
     content: '';
     position: absolute;
     top: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 60px;
     height: 3px;
     background: linear-gradient(90deg, transparent, #00d4ff, transparent);
     border-radius: 0 0 5px 5px;
}

.copyright {
     color: rgba(255, 255, 255, 0.9);
     font-size: 15px;
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
     padding: 8px 20px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px);
     border-radius: 20px;
     transition: all 0.3s ease;
     border: 1px solid rgba(255, 255, 255, 0.15);
}

.copyright:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateX(5px);
}

.copyright span {
     background: linear-gradient(45deg, #007bff, #FF4081);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     font-weight: bold;
     font-size: 16px;
}

.company_name {
     color: rgba(255, 255, 255, 0.95);
     font-size: 16px;
     font-weight: bold;
     padding: 8px 20px;
     background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 255, 136, 0.15) 100%);
     backdrop-filter: blur(5px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.2);
     transition: all 0.3s ease;
     text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.company_name:hover {
     background: linear-gradient(135deg, rgba(0, 212, 255, 0.25) 0%, rgba(0, 255, 136, 0.25) 100%);
     transform: translateX(5px);
}

.license {
     color: rgba(255, 255, 255, 0.75);
     font-size: 12px;
     padding: 6px 15px;
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(5px);
     border-radius: 15px;
     border: 1px solid rgba(255, 255, 255, 0.1);
     transition: all 0.3s ease;
}

.license:hover {
     background: rgba(255, 255, 255, 0.1);
     transform: translateX(5px);
}

.version {
     background: linear-gradient(135deg, #007BFF 0%, #FF4081 100%);
     backdrop-filter: blur(10px);
     color: #fff;
     padding: 12px 25px;
     border-radius: 25px;
     font-weight: bold;
     font-size: 15px;
     box-shadow: 0 8px 25px rgba(0, 212, 255, 0.4);
     border: 1px solid rgba(255, 255, 255, 0.3);
     position: relative;
     overflow: hidden;
     transition: all 0.4s ease;
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
}

.version::before {
     content: '';
     position: absolute;
     top: -50%;
     left: -50%;
     width: 200%;
     height: 200%;
     background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent);
     animation: shine 3s ease-in-out infinite;
}

.version_label {
     font-size: 12px;
     opacity: 0.9;
}

.version_number {
     font-size: 18px;
     font-weight: 900;
     letter-spacing: 1px;
}

.version:hover {
     transform: translateX(-5px) scale(1.05);
     box-shadow: 0 15px 40px rgba(0, 212, 255, 0.6);
}

.update_date {
     color: rgba(255, 255, 255, 0.8);
     font-size: 13px;
     padding: 8px 20px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     transition: all 0.3s ease;
     font-weight: 500;
}

.update_date:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateX(-5px);
}

.status {
     color: rgba(255, 255, 255, 0.85);
     font-size: 12px;
     padding: 6px 15px;
     background: rgba(0, 255, 136, 0.1);
     backdrop-filter: blur(5px);
     border-radius: 15px;
     border: 1px solid rgba(0, 255, 136, 0.3);
     transition: all 0.3s ease;
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 500;
}

.status:hover {
     background: rgba(0, 255, 136, 0.15);
     transform: translateX(-5px);
}

.status_dot {
     width: 8px;
     height: 8px;
     background: #00ff88;
     border-radius: 50%;
     animation: pulse-status 2s ease-in-out infinite;
     box-shadow: 0 0 10px #00ff88;
}

@keyframes pulse-status {
     0%, 100% {
         opacity: 1;
         transform: scale(1);
     }
     50% {
         opacity: 0.6;
         transform: scale(1.3);
     }
}

.footer_info {
     display: flex;
     flex-direction: column;
     gap: 8px;
     align-items: center;
}

.made_with,
.powered_by {
     color: rgba(255, 255, 255, 0.85);
     font-size: 13px;
     font-weight: 500;
     padding: 8px 20px;
     background: rgba(255, 255, 255, 0.08);
     backdrop-filter: blur(5px);
     border-radius: 20px;
     border: 1px solid rgba(255, 255, 255, 0.15);
     transition: all 0.3s ease;
     text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.made_with:hover,
.powered_by:hover {
     background: rgba(255, 255, 255, 0.15);
     transform: translateY(-3px);
     border-color: rgba(255, 255, 255, 0.25);
}

.heart {
     color: #ff4757;
     display: inline-block;
     animation: heartbeat 1.5s ease-in-out infinite;
     font-size: 14px;
}

@keyframes heartbeat {
     0%, 100% {
         transform: scale(1);
     }
     10%, 30% {
         transform: scale(1.2);
     }
     20%, 40% {
         transform: scale(1);
     }
}

.made_with span.heart {
     filter: drop-shadow(0 0 8px rgba(255, 71, 87, 0.6));
}

.powered_by {
     background: linear-gradient(90deg, 
         rgba(0, 212, 255, 0.1) 0%, 
         rgba(0, 255, 136, 0.1) 100%
     );
}

@keyframes shine {
     0% {
         transform: rotate(0deg);
     }
     100% {
         transform: rotate(360deg);
     }
}

.particles {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     overflow: hidden;
     pointer-events: none;
     z-index: 1;
}

.particle {
     position: absolute;
     width: 4px;
     height: 4px;
     background: rgba(255, 255, 255, 0.6);
     border-radius: 50%;
     animation: float-particle 15s ease-in-out infinite;
     box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

@keyframes float-particle {
     0%, 100% {
         transform: translateY(0) translateX(0);
         opacity: 0;
     }
     10% {
         opacity: 1;
     }
     90% {
         opacity: 1;
     }
     100% {
         transform: translateY(-100vh) translateX(50px);
         opacity: 0;
     }
}

.particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.particle:nth-child(2) { left: 20%; animation-delay: 2s; }
.particle:nth-child(3) { left: 30%; animation-delay: 4s; }
.particle:nth-child(4) { left: 40%; animation-delay: 1s; }
.particle:nth-child(5) { left: 50%; animation-delay: 3s; }
.particle:nth-child(6) { left: 60%; animation-delay: 5s; }
.particle:nth-child(7) { left: 70%; animation-delay: 2.5s; }
.particle:nth-child(8) { left: 80%; animation-delay: 4.5s; }
.particle:nth-child(9) { left: 90%; animation-delay: 1.5s; }


/*---------------🔵----------🔵----------🔵 Services 🔵-----------🔵------------🔵---------------------------*/
.Services{
  height: auto;
  padding-top: 4vw;
  
}
.services02{
  width: 100%;
  height: 50vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 4vw 0;
}
.services02 h2{
  color: white;
  font-family: 'Rostack';
  font-weight: 200;
  font-size: 2vw;
  margin: 2vw 0;
}
.services02 .services_box {
  width: 90vw;
  height: 45vw;
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 2vw;
  justify-items: center;
  background-color: #141414;
  padding: 1vw;
}

.services_box div{
  background-color: #007bff ;
  width: 35vw;
  height: 20vw;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  scale: 1;
  transition: 0.3s ease-in-out;
  filter: brightness(0.5);
  border-radius: 0.5vw;
}
.box001:hover{
  scale: 1.07;
  transition: 0.3s ease-in-out;
  filter: brightness(1);
}
.box002:hover{
  scale: 1.1;
  transition: 0.3s ease-in-out;
}
.box003:hover{
  scale: 1.1;
  transition: 0.3s ease-in-out;
}
.box004:hover{
  scale: 1.1;
  transition: 0.3s ease-in-out;
}
.services_box div .text_box{
  color: white;
  font-size: 1.5vw;
  transform: translate( 0vw , 7vw);
  transition: 0.5s ease-in-out;
  text-shadow: 0 0 1vw #111111;
  text-align: left;
}
.box001:hover .text_box{
  color: #007bff;
  transition: 0.3s ease-in-out;
}
/*---------------🔵----------🔵--------------🔵 Services 🔵-------------🔵------------🔵---------------------------*/

/*---------------🔴----------🔴----------🔴 Services ditels 🔴-----------🔴------------🔴---------------------------*/
.header_youtube_video{
  width: 100%;
  height: 45vw;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 8vw;
}
.youtube_video_box01{
  width: 60%;
  height: 100%;
  flex-direction: column;
}
.youtube_video_box02{
  background: linear-gradient(45deg ,#fff , #fff);  
  width: 35%;
  height: auto;
  border-radius: 0.5vw;
  margin: auto 10vw auto 1vw;
  box-shadow: -0.2vw 0.2vw 0vw 0.2vw #007bff;
  transform: translateY(2vw);
  padding: 2vw;
}
.address01{
  width: 45vw;
  height: 8vw;
  margin: 1vw 0vw 1vw 11vw;
}
.address_service{
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}
.Seller_information{
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
}
.videoS01 {
  box-shadow: 0 0 6px 1px;
  width: 40vw;
  height: 25vw;
  border-radius: 1vw;
  overflow: hidden;
  margin-left: 11vw ;
}

.videoS01 .videoFull {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.Seller_information img {
  height: 100%;
  border-radius: 50%;
}
.Seller_information h2 {
  color: #007bff;
  margin: 0 1vw;
  font-weight: 100;
  font-size: 1.3vw;
}
.Seller_information h2 b {
  color: whitesmoke;
  font-size: 1.5vw;
}
.address_service h1 {
  color: white;
  font-family: 'Rostack';
  font-weight: 200;
  font-size: 2.5vw;
}
.Service_details{
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 3vw 0;
}
.Hplan_and_video{
  width: 100vw;
  background-color: #111214;
  text-align: center;
  color: white;
  font-weight: 100;
  font-size: 3vw;
  font-family: 'Rostack';
  padding: 1vw 0;
}
.Hplan_and_video b{
  color: #007bff;
}
.plan_and_video{
  height: auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vw 0;
  flex-wrap: wrap;
}
/*------------------ جدول ------------------*/
.pricing-table {
  border-collapse: collapse;
  width: 28vw;
  background-color: #1e1f1c;
  border-radius: 1vw;
  overflow: hidden;
  direction: rtl;
  margin: 0 2vw;
  box-shadow: 0 0 5px 3px #111111;
}
.pricing-table th,
.pricing-table td {
  padding: 10px 15px;
  text-align: left;
  border-bottom: 1px solid #444;
  color: white;
}
.pricing-table .tfoot_Price .tfoot_Price_tr .footer01,
.pricing-table .tfoot_Price .tfoot_Price_tr .footer02,
.pricing-table .tfoot_Price .tfoot_Price_tr .footer03{
  padding: 0;
  text-align: left;
  border-bottom: 1px solid #444;
  color: white;
}
.pricing-table th {
  background-color: #2b2c29;
  font-size: 1vw;
}
.blue-header {
  background-color: #1e90ff;
  color: white;
  font-weight: bold;
}
.check {
  width: auto;
  height: auto;
  display: inline-block;
  border-radius: 3px;transform: translateX(7vw);
}
.footer01 {
  background-color: #8f8f8f;
  box-shadow: 0 0 10vw 1vw #8f8f8f;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1vw;
  border-top: 1px solid #444;
  animation: footerPlan1 3s ease-in-out infinite;
}
.footer_content {
  display: flex;
  justify-content: space-between; /* buy يسار و $50 يمين */
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
.button_buy01 ,.button_buy02 ,.button_buy03{
  height: 2.5vw;
  width: 7vw;
  border: 0;
  color: #00264e;
  font-size: 1vw;
  font-weight: 600;
  cursor: pointer;
  transition: 0.3s ease;
}
.button_buy01{
  background: linear-gradient(90deg , #8f8f8f  , #fff);
}
.button_buy02{
  background: linear-gradient(90deg , #dfb709  , #fff);
}
.button_buy03{
  background: linear-gradient(90deg , #1e90ff  , #fff);
}
.button_buy01:hover ,.button_buy02:hover ,.button_buy03:hover{
  color: #0058b6;
  transition: 0.3s ease;
}
.footer_content p{
  color: white;
  font-size: 1vw;
  transform: translateX(1vw);
}
@keyframes footerPlan1 {
  0% {
    box-shadow: 0 0 10vw 1vw #8f8f8f;
  }
  50% {
    box-shadow: 0 0 10vw 1vw #8f8f8f00;
  }
  100% {
    box-shadow: 0 0 10vw 1vw #8f8f8f;
  }
}
.footer02 {
  background-color: #dfb709;
  box-shadow: 0 0 10vw 1vw #dfb709;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1vw;
  padding: 0;
  border-top: 1px solid #444;
  animation: footerPlan2 3s ease-in-out infinite ;
}
@keyframes footerPlan2 {
  0% {
    box-shadow: 0 0 10vw 1vw #dfb709;
  }
  50% {
    box-shadow: 0 0 10vw 1vw #dfb80900;
  }
  100% {
    box-shadow: 0 0 10vw 1vw #dfb709;
  }
}
.footer03 {
  background-color: #1e90ff;
  box-shadow: 0 0 10vw 1vw #1e90ff;
  color: white;
  font-weight: bold;
  text-align: center;
  font-size: 1vw;
  padding: 0;
  border-top: 1px solid #444;
  animation: footerPlan3 3s ease-in-out infinite ;
}
@keyframes footerPlan3 {
  0% {
    box-shadow: 0 0 10vw 1vw #1e90ff;
  }
  50% {
    box-shadow: 0 0 10vw 1vw #1e8fff00;
  }
  100% {
    box-shadow: 0 0 10vw 1vw #1e90ff;
  }
}

.check img {
  width: 1.2vw;
  height: 1.2vw;
}
.check_delete{
  background-color: rgba(73, 1, 1, 0.308);
}

/*---------------🔴----------🔴----------🔴 Services ditels 🔴-----------🔴------------🔴---------------------------*/

/*---------------🟣----------🟣---------------🟣 works 🟣----------------🟣------------🟣---------------------------*/
.works{
  height: auto;
  padding: 5vw 0;
}
.text_works{
  width: 100%;
  height: auto;
  margin: 0vw 0;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}
.text_works h1{
  color: #008EFF;
  font-family: 'Rostack';
  margin: auto;
  font-size: 3vw;
  font-weight: 200;
  text-shadow: 0 0 2px ; 
}
.text_works h3{
  color: #ffffff2a;
  max-width: 40vw;
  margin: auto;
  text-align: center;
  font-weight: 100;
  font-size: 1.1vw;
  margin: 1vw 0;
  font-family: 'Asterone';
}

/*--------------------------------------------------------------*/
.buttons_works button {
  margin: 1vw 0.2vw;
  padding: 10px 20px;
  border: none;
  background-color: #105bac;
  color: white;
  cursor: pointer;
  border-radius: 0.5vw;
  height: 3.5vw;
  opacity: 0.25;
  transition: opacity 0.3s;
}

.buttons_works button:hover {
  background-color: #2A7DD8;
}
.buttons_works button.active {
  opacity: 1;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.project-box {
  width: 23vw;
  height: 15vw;
  background-color: #007bff;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 10px;
  color: white;
  font-weight: bold;
}
.buttons_works{
  background-color: #191c1f86;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
/*------------------------- reel ------------------*/
.reel1-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 001.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel1-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5);
  color: gold;
}
.reel2-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 002.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel2-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5);
  color: gold;
}
.reel3-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 003.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel3-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5);
  color: gold;
}
.reel4-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 004.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel4-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
.reel5-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 005.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
    filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel5-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
.reel6-bg {
  background-color: #ffcc00;
  background-image: url(../image/C\ R\ 006.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.reel6-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
/*------------------------- reel ------------------*/
/*------------------------- YT ------------------*/
.yt1-bg { 
  background-color: #ffcc00;
  background-image: url(../image/C\ Y\ 001.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.yt1-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
.yt2-bg { 
  background-color: #ffcc00;
  background-image: url(../image/C\ Y\ 002.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.yt2-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
.yt3-bg { 
  background-color: #ffcc00;
  background-image: url(../image/C\ Y\ 003.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1) grayscale(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.yt3-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.5) grayscale(1);
  color: gold;
}
.yt4-bg { 
  background-color: #ff5c8d; 
}
.yt5-bg { 
  background-color: #ff5c8d; 
}
.yt6-bg { 
  background-color: #ff5c8d; 
}
/*------------------------- YT ------------------*/
/*------------------------- Motion ------------------*/
.motion1-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 02.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(0.8);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion1-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
.motion2-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 02.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(0.8);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion2-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
.motion3-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 04.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(0.7);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion3-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.1);
  color: gold;
}
.motion4-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 02_1.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(0.7);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion4-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.1);
  color: gold;
}
.motion5-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 03.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion5-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
.motion6-bg {
  background-color: #ffcc00;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 03.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 10px 3px #111111;
}
.motion6-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
/*------------------------- Motion ------------------*/
/*------------------------- Camera ------------------*/
.camera1-bg { 
  background-color: #ffcc00;
  background-image: url(../image/C\ C\ 001.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15); 
}
.camera1-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
.camera2-bg { 
  background-color: #2d6a4f; 
}
.camera3-bg { 
  background-color: #2d6a4f; 
}
.camera4-bg { 
  background-color: #2d6a4f; 
}
.camera5-bg { 
  background-color: #2d6a4f; 
}
.camera6-bg { 
  background-color: #2d6a4f; 
}
/*------------------------- Camera ------------------*/
/*------------------------- Ad ------------------*/
.ad1-bg { 
  background-color: #ffcc00;
  background-image: url(../image/C\ P\ 001.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  scale: 1;
  transition: 0.3s ease;
  filter: brightness(1);
  color: rgba(255, 255, 255, 0.15);
}
.ad1-bg:hover{
  scale: 1.05;
  transition: 0.3s ease;
  filter: brightness(1.2);
  color: gold;
}
.ad2-bg { 
  background-color: #f77f00; 
}
.ad3-bg { 
  background-color: #f77f00; 
}
.ad4-bg { 
  background-color: #f77f00; 
}
.ad5-bg { 
  background-color: #f77f00; 
}
.ad6-bg { 
  background-color: #f77f00; 
}
/*------------------------- Ad ------------------*/


/*---------------🟣----------🟣---------------🟣 works 🟣----------------🟣------------🟣---------------------------*/
/*---------------🟢----------🟢----------🟢 Project details 🟢-----------🟢------------🟢---------------------------*/
.Project_details{
  height: 45vw;
  padding-top: 5vw;
  padding-bottom: 43vw;
}
.Project_details_box{
  width: 100%;
  height: 40vw;
  display: flex;
  align-items: center;
  justify-items: center;
  margin: 0vw 0;
}
.Project_details_video{
  width: 50%;
  height: 39vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.Project_details_Description{
  width: 50%;
  height: 32vw;
}
.address_project{
  width: 100%;
  height: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}
.Description{
  background-color: #161616;
  border-radius: 0.5vw;
  width: auto;
  height: auto;
  margin: 0 2vw;
  padding: 2vw;
  box-shadow: 0.3vw 0.3vw 0vw 0 #008EFF; 
  font-family: 'Rostack';
  font-weight: 100;
}
.Description h1 {
  font-size: 2vw;
  width: auto;
  height: auto;
  font-weight: 100;
  color: #008EFF;
}
.Description p {
  font-size: 1.5vw;
  width: auto;
  height: auto;
  font-weight: 100;
  line-height: 1.5vw ;
  color: white;
  
}
.Description ul li {
  font-size: 1.5vw;
  margin: 0.5vw 0;
  width: auto;
  height: auto;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.678);
}
.Client{
  background-color: #1E2225;
  width: 32vw;
  height: 9vw;
  border-radius: 0.5vw;
  display: flex;
  align-items: center;
  justify-content: center;
}
.Project_details_video .video{
  border-radius: 0.2vw;
  width: 40vw;
  height: 23vw;
  margin: 1vw;
  overflow: hidden;
  display: flex;
  justify-items: center;
  align-items: center;
  display: block;
  border: none;

}
.Project_details_video .video iframe{
  width: 100%;
  height: 100%;
  border-top: 0.4vw solid #007bff;
  border-left: 0.4vw solid #007bff;
  border-right: 0.4vw solid #014b9b;
  border-bottom: 0.4vw solid #014b9b;
  border-style: double;
}
.img_clients{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/alhlk-10-11734845855.png);
  background-position: center;
  background-size: 7vw;
  background-repeat: no-repeat;
}
.img_clients02{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 02.png);
  background-position: center;
  background-size: 12vw;
  background-repeat: no-repeat;
}
.img_clients03{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 02_1.png);
  background-position: center;
  background-size: 12vw;
  background-repeat: no-repeat;
}
.img_clients04{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/غلاف\ لي\ موقع\ مستقل\ رقم\ 04.png);
  background-position: center;
  background-size: 12vw;
  background-repeat: no-repeat;
}
.img_clients05{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/channels4_profile.jpg);
  background-position: center;
  background-size: 6vw;
  background-repeat: no-repeat;
}
.img_clients06{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/428457008_3662591910651859_7173538564016387609_n.jpg);
  background-position: center;
  background-size: 6vw;
  background-repeat: no-repeat;
}
.img_clients07{
  background-color: #007bff;
  width: 6vw;
  height: 6vw;
  border-radius: 50%;
  background-image: url(../image/Mp01.webp);
  background-position: center;
  background-size: 6vw;
  background-repeat: no-repeat;
}
.dc{
  width: 20vw;
  height: 5vw;
}
.ic{
  width: 7vw;
  height: 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vw;
}
.dc h1{
  color: white;
  font-size: 1.5vw;
  font-weight: 700;
}
.dc h2{
  color: rgba(255, 255, 255, 0.651);
  font-size: 1vw;
  font-weight: 100;
}
.address h1{
  color: white;
  font-size: 2vw;
}
.bullet-list {
  list-style-type: disc; 
  padding-left: 20px;
  margin: 0;
}

.bullet-list li {
  margin-bottom: 5px;     
  font-size: 16px;        
}


/*---------------🟢----------🟢----------🟢 Project details 🟢-----------🟢------------🟢---------------------------*/
/*---------------🔵----------🔵-------------🔵 About Me 🔵---------------🔵------------🔵---------------------------*/
.about_me{
  height: 98vw;
  margin: 0;
  padding-top: 3vw;
  padding-bottom: 98vw;
}
.Information_about_me{
  width: 100%;
  height: 43vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.Information_about_img_address{
  width: 50%;
  height: 41vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Information_about_Details_about_me{
  width: 50%;
  height: 41vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Information_about_address{
  width: 100%;
  height: 5vw;
  margin: 0vw 0;
}
.Information_about_img{
  width: 30vw;
  height: 33vw;
  border-radius: 1vw;
  mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 00%);
   -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 90%);
  background-image: url(../image/photo1.jpg);
  background-position: center;
  background-size: 45vw;
  background-repeat: no-repeat;
}
.My_accounts{
  width: 100%;
  height: 7vw;
  margin: 0.5vw 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.Who_am_I{
  background-color: #1E2225;
  width: 43vw;
  height: 20vw;
  border-radius: 1vw;
  margin: 1vw 0;
}
.instagram{
  width: 4vw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin: 0 1vw;
  
}
.Followers{
  width: 100%;
  height: 1.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.Followers h3{
  color: white;
  font-family: 'Rostack';
  font-weight: 200;
  font-size: 1.5vw;
}
.Followers_icon{
  background-image: url(../image/subscribe.png);
  height: 2.5vw;
  width: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 2.7vw;
  animation: AIs 2s infinite;
}
@keyframes AIs {
  0% { transform: translateY(0); }
  50% { transform: translateY(-0.2vw); }
  100% { transform: translateY(0); }
}
.icon_instagram{
  background-image: url(../image/instagram1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.icon_facebook{
  background-image: url(../image/facebook1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.icon_tiktok{
  background-image: url(../image/tiktok1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.icon_youtube{
  background-image: url(../image/youtube1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.icon_linkedin{
  background-image: url(../image/linkedin1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.icon_x{
  background-image: url(../image/twitter1.png) ;
  width: 3vw;
  height: 3vw;
  background-position: center;
  background-size: 2.7vw;
  background-repeat: no-repeat;
}
.Who_am_I h1{
  color: #008EFF;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw;
}
.Who_am_I p{
  color: #ffffff;
  font-weight: 100;
  font-size: 1vw;
  margin: 1vw;
  text-indent: 1vw;
}
.Information_about_address h1{
  color: #ffffff;
  font-weight: 100;
  font-size: 2vw;
  margin: 0 10vw;
  font-family: 'Rostack';
  display: flex;
  align-items: center;
  width: 100%;
}
.Information_about_address h2{
  color: #ffffff;
  font-weight: 100;
  font-size: 1.5vw;
  margin: 0 10vw;
  font-family: 'Rostack';
  width: 100%;
}
.correct_about_me{
  width: 2.5vw;
  height: 2.5vw;
  background-image: url(../image/correct.png);
  background-position: center;
  background-size: 2.3vw;
  background-repeat: no-repeat;
  transform: translateY(-1vw) translateX(-1vw);
}
.My_accounts_on_freelancing_websites{
  background-color: #16191b;
  width: 100%;
  height: 22vw;
  margin: 1vw 0;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.mostaql{
  background: linear-gradient(0deg, #0ab4da40, rgba(5, 96, 116, 0.25));
  width: 14vw;
  height: 18vw;
  border-radius: 1vw;
  display: flex;
  align-items: center ;
  justify-content: center;
  flex-direction: column;
  transition: 0.3s ease;
  scale: 1;
}
.mostaql:hover{
  scale: 1.1;
  transition: 0.3s ease;
}
.mostaql h1{
  margin: 1vw 0 0 0;
  color: #0ab4da ;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw 0 0.4vw 0;
}
.photoprofile{
  background-color: #D9D9D9;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  background-image: url(../image/Mp01.jpeg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.star01{
  width: 1.5vw;
  height: 1.5vw;
  margin: 0 0.5vw;
  transform: translateY(-0.2vw);
  background-image: url(../image/star.png) ;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.star {
  display: flex;
  margin: 0 0 1vw 0;
  color: white;
}
.Browse_mostaql{
  height: 2vw;
  width: 5.5vw;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  color: #0AB4DA;
  font-size: 0.7vw;
  transition: 0.3s ease;
}
.Browse_mostaql:hover{
  background-color: #39dbff;
  transition: 0.3s ease;
}

.khamsat{
  background: linear-gradient(0deg, #ddc40c40, rgba(119, 106, 6, 0.25));
  width: 14vw;
  height: 18vw;
  border-radius: 1vw;
  display: flex;
  align-items: center ;
  justify-content: center;
  flex-direction: column;
  transition: 0.5s ease;
  scale: 1;
}
.khamsat:hover{
  scale: 1.1;
  transition: 0.3s ease;
}
.Browse_khamsat {
  height: 2vw;
  width: 5.5vw;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  color: #DDC40C;
  font-size: 0.7vw;
  transition: 0.3s ease;
}
.Browse_khamsat:hover{
  color: #ffe838;
  background-color: #ddc50c;
  transition: 0.3s ease;
}
.khamsat h1{
  margin: 1vw 0 0 0;
  color: #ddc50c;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw 0 0.4vw 0;
}


.fiverr{
  background: linear-gradient(0deg, rgba(6, 184, 65, 0.25), rgba(3, 82, 29, 0.25));
  width: 14vw;
  height: 18vw;
  border-radius: 1vw;
  display: flex;
  align-items: center ;
  justify-content: center;
  flex-direction: column;
  scale: 1;
  transition: 0.5s ease;
}
.fiverr:hover{
  scale: 1.1;
  transition: 0.3s ease;
}
.fiverr h1{
  margin: 1vw 0 0 0;
  color: white;
}
.Browse_fiverr{
  height: 2vw;
  width: 5.5vw;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  color: #06B841;
  font-size: 0.7vw;
  transition: 0.3s ease;
}
.Browse_fiverr a h1 , .Browse_khamsat a h1 , .Browse_mostaql a h1 
,.Browse_freelancer a h1 ,.Browse_upwork a h1 {
  color: #1e1e1e;
  font-size: 1.5vw;
  margin: auto;
}
.Browse_fiverr:hover{
  background-color: #15ff63;
  transition: 0.3s ease;
}
.fiverr h1{
  margin: 1vw 0 0 0;
  color: #15ff63;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw 0 0.4vw 0;
}
.photoprofile_fiverr{
  background-color: #D9D9D9;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  background-image: url(../image/صورتي\ في\ لاماكطا\ 01.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.freelancer{
  background: linear-gradient(0deg, #0aa3da40, rgba(6, 87, 116, 0.25));
  width: 14vw;
  height: 18vw;
  border-radius: 1vw;
  display: flex;
  align-items: center ;
  justify-content: center;
  flex-direction: column;
  scale: 1;
  transition: 0.5s ease;
}
.freelancer:hover{
  scale: 1.1;
  transition: 0.3s ease;
}
.freelancer h1{
  margin: 1vw 0 0 0;
  color: #ffffff;
}
.Browse_freelancer{
  height: 2vw;
  width: 5.5vw;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  color: #0AA3DA;
  font-size: 0.7vw;
  transition: 0.3s ease;
}
.Browse_freelancer:hover{
  color: #62d5ff;
  background-color: #0AA3DA;
  transition: 0.3s ease;
}
.freelancer h1{
  margin: 1vw 0 0 0;
  color: #ffffff;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw 0 0.4vw 0;
}
.photoprofile_freelancer{
  background-color: #D9D9D9;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  background-image: url(../image/صورتي\ في\ لاماكطا\ 01.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}


.upwork{
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.25), rgba(70, 70, 70, 0.25));
  width: 14vw;
  height: 18vw;
  border-radius: 1vw;
  display: flex;
  align-items: center ;
  justify-content: center;
  flex-direction: column;
  scale: 1;
  transition: 0.5s ease;
}
.upwork:hover{
  scale: 1.1;
  transition: 0.3s ease;
}
.upwork h1{
  margin: 1vw 0 0 0;
  color: #ffffff;
}
.Browse_upwork{
  height: 2vw;
  width: 5.5vw;
  border-radius: 0.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #FFFFFF;
  color: #3a3a3a;
  font-size: 0.7vw;
  transition: 0.3s ease;
}
.Browse_upwork:hover{
  color: #ffffff;
  background-color: #808080;
  transition: 0.3s ease;
}
.upwork h1{
  margin: 1vw 0 0 0;
  color: #ffffff;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2vw;
  margin: 1vw 0 0.4vw 0;
}
.photoprofile_upwork{
  background-color: #D9D9D9;
  width: 7.5vw;
  height: 7.5vw;
  border-radius: 50%;
  background-image: url(../image/Mp01.jpeg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

/*--------------------------------- دائرة نسبة -------------------------------*/
.My_lvl{
  width: 80%;
  height: 25vw;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;
  justify-content: center;
  margin: 2vw auto 10vw auto;

}
.skill {
  text-align: center;
  width: 10vw;
  height: 10vw;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
}
.skill_div{
  width: 6.1vw;
  height: 8vw;
}
.circle-container {
  position: relative;
  width: 6vw;
  height: 6vw;
}
.circle {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(#007BFF 0% 70%, transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* هذا هو الفراغ وسط الدائرة */
.circle::before {
  content: '';
  position: absolute;
  width: 5vw;
  height: 5vw;
  background: #1e1e1e;
  border-radius: 50%;
  z-index: 1;
}
.icon-box_PS {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #007BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/photoshop.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-box_AE {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #007BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/after\ effects.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-box_PR {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #007BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/premiere\ pro.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-box_IL {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #007BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/illustrator.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-box_FG {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/figma.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.icon-box_BD {
  position: absolute;
  width: 3vw;
  height: 3vw;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5vw;
  color: white;
  font-weight: bold;
  z-index: 2;
  background-image: url(../image/blender.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.percent {
  margin-top: 10px;
  font-size: 1vw;
  font-weight: bold;
  color: white;
}

.HMy_lvl{
  width: 100%;
  height: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.HMy_lvl h1 {
  color: white;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 2.5vw;
  margin: 3vw 0 0 0;
}


/*---------------🔵----------🔵-------------🔵 About Me 🔵---------------🔵------------🔵---------------------------*/

/*---------------🟣----------🟣----------🟣 Subscriptions 🟣-------------🟣------------🟣---------------------------*/
.Subscriptions{
  width: 100%;
  height: auto;
padding: 7vw 0 0 0;
}
.Subscriptions_box{
  width: 100%;
  height: 50vw;
  margin: 0.5vw 0;
}


/*----------------------------------- أزرار إشتراكات -----------------------------------*/
.button-container {
  display: flex;
  justify-content: space-between;
  background-color: #16191b;
  width: 100%;
  height: 3.5vw;
  font-weight: 100;
}
.main-button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}
.green-button {
  background-color: #008EFF;
  font-family: 'Rostack';
  color: white;
  font-weight: 100;
  font-size: 2vw;
  border-radius: 0.3vw;
  margin: auto;
  width: 49.5%;
  height: 3.5vw;
}
.red-button {
  background-color: #008EFF;
  font-family: 'Rostack';
  color: white;
  font-weight: 100;
  font-size: 2vw;
  border-radius: 0.3vw;
  margin: auto;
  width: 49.5%;
  height: 3.5vw;
}
.sub-buttons {
  display: none;
  margin: 0.3vw 0;
  height: 3.5vw;
  width: 100%;
  background-color: #16191b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sub-buttons button {
  margin-right: 10px;
  padding: 8px 16px;
  background-color: #008EFF;
  border: none;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  height: 3.5vw;
  width: 19.5vw;
  margin:   auto;
  font-family: 'Rostack';
  color: white;
  font-weight: 100;
  font-size: 1.5vw;
}
.packages {
  display: none;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 2vw 0 0 0;
}

.packageBest_h1{
  position: absolute;
  transform: translateY(-1.9vw);
  font-family: 'Rostack';
  color: white;
  font-weight: 100;
}
.packages03 {
  display: none;
  gap: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.package ,.packageBest {
  background: linear-gradient(0deg , #fff ,  #fff ,#74b7ff);
  border-radius: 1.5vw;
  width: 20vw;
  height: auto;
  margin: 2vw 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 0.14vw solid #007bff;
  overflow: hidden;
}
.package:nth-of-type(1) {
  order: 1;
}
.package:nth-of-type(2) {
  order: 3;
}
.packageBest {
  box-shadow: 0 -2vw 0 0 #007bff;
  order: 2;
}
.discount{
  width: 100%;
  height: 3vw;
  padding: auto;
  font-size: 1vw;
  display: flex;
  align-items: center;
  justify-content: end;
  transform: translateX(-0.7vw);
}
.discount h1{
  background-color: #007bff;
  width: auto;
  height: auto;
  padding: 0.2vw 0.5vw;
  border-radius: 1vw;
  color: white;
  font-size: 1vw;
}
.Typecart{
  width: 100%;
  height: auto;
  padding: 0.2vw 0vw 0.2vw 0.8vw;
  color: rgb(17, 17, 17);
  display: flex;
}
.Type_P{
  width: 100%;
  min-height: 1vw;
  padding: 0.2vw 0.8vw 0.2vw 0.8vw;
  color: rgba(17, 17, 17, 0.596);
  display: flex;
  font-weight: 500;
  padding-bottom: 2vw;
}
.price{
  width: 100%;
  text-align: start;
  padding: 0.5vw 0 0.5vw 1vw;
  font-size: 1.2vw;
  font-weight: 600;
  color: #00264e;
}
.price span{
  width: 100%;
  padding: 0.5vw 0 0.5vw 1vw;
  font-size: 0.8vw;
  font-weight: 600;
}
.select-btn ,.select-btn-next-horizon {
  background-color: #007bff38;
  border-radius: 0.5vw;
  border: 0.15vw solid #2A7DD8;
  height: 2.5vw;
  padding: 0.2vw 0.5vw;
  transition: 0.3s ease-in-out;
  color: rgb(34, 34, 34);
  font-size: 1vw;
  margin: 0.3vw 0;
  font-weight: 700;
}
.select-btn-next-horizon{
  width: 8vw;
}
.select-btn:hover ,.select-btn-next-horizon:hover{
  background-color: #007bff7c;
  border: 0.15vw solid #2A7DD8;
  transition: 0.3s ease-in-out;
  color: #00264e;
  cursor: pointer;
}
.details{
  width: 100%;
  text-align: start;
  padding: 0.5vw 1vw 0.5vw 1vw;
  font-size: 0.7vw;
  font-weight: 600;
  color: #000000a6;
}
.package ul ,.packageBest ul{
  width: 100%;
  text-align: start;
  padding: 1vw 1vw 1vw 2vw;
  font-size: 0.7vw;
  font-weight: 600;
  height:  auto;
}
.package ul li ,.packageBest ul li{
  margin-bottom: 0.5vw;
  list-style: none;
  position: relative;
  padding: 0 0 0 1vw;
}
.package ul .O:before  ,.packageBest ul .O::before{
  content: "✔";
  color: green;
  position: absolute;
  transform:  translate(-1vw , -0.1vw);
}
.package ul .X:before  ,.packageBest ul .X::before{
  content: "⭕️";
  color: green;
  position: absolute;
  transform:  translate(-1.2vw , -0.1vw);
}
.stok_cart{
  background-color: #007BFF;
  width: 90%;
  height: 0.07vw;
  border-radius: 50%;
}
.package02 {
  background-color: #00264e;
  padding: 2vw;
  border-radius: 10px;
  width: 30vw;
  height: 28vw;
  margin: 2vw 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: white;
  border: 1px solid #007BFF;
  box-shadow: 5px 5px 0px 0px #007BFF;
  overflow: hidden;
}
.visible {
  display: flex;
}

.active-button {
  opacity: 1 !important;
}

.inactive-button {
  opacity: 0.25;
}

.package h3 {
  text-align: center;
  font-size: 2.3vw;
  font-family: 'Thedus Condensed Light';
  color: #007bff;
  background-color: #141414;
  width: 25.7vw;
  height: auto;
  transform: translateY(-2vw);
  border-radius: 10px 10px 0 0;
}
.package02 h3 {
  text-align: center;
  font-size: 2.3vw;
  font-family: 'Thedus Condensed Light';
  color: #007bff;
  background-color: #141414;
  width: 30vw;
  height: auto;
  transform: translateY(-2vw);
  border-radius: 10px 10px 0 0;
}
.package p b{
  text-align: center;
  font-size: 1.5vw;
  font-family: 'Thedus Condensed Light';
  color: #ffffff;
  text-align: center;
  background-color: #007BFF;
  width: 100%;
  border-radius: 0 0 5vw 5vw;
  margin: 0vw;
  font-weight: 100;
}
.package02 p b{
  text-align: center;
  font-size: 1.5vw;
  font-family: 'Thedus Condensed Light';
  color: #ffffff;
  text-align: center;
  background-color: #007BFF;
  width: 100%;
  border-radius: 0 0 5vw 5vw;
  margin: 0vw;
  font-weight: 100;
}

.package02 p{
  width: 100%;
  text-align: center;
  font-size: 1.2vw;
  font-family: 'Thedus Condensed Light';
  color: #ffffff;
  text-align: center;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0;
  transform: translateY(-2vw);
}
.package02 .TGS{
  background-color: #012144;
  width: 30vw;
  text-align: center;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  cursor: default;
}
.package02 .TWS{
  background-color: #00264e;
  width: 30vw;
  text-align: center;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  cursor: default;
}
.TGS{
  background-color: #012144;
  width: 25.8vw;
  text-align: center;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  cursor: default;
  color: white;
  transition: 0.1s ease;
}
.TGS:hover{
  transition: 0.1s ease;
  color: #ffd700;
}
.TWS:hover{
  transition: 0.1s ease;
  color: gold;
}
.TWS{
  background-color: #00264e;
  width: 25.8vw;
  text-align: center;
  margin: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1vw;
  cursor: default;
  transition: 0.1s ease;
}
br{
  margin: 0;
  padding: 0;
}
.package .gold{
  background-color: #ffd700;
  background: linear-gradient(90deg ,#008EFF , #014b88);
  box-shadow: 0 5px 10px 3px #008EFF;
}
.package02 .gold{
  background-color: #ffd700;
  background: linear-gradient(90deg ,#008EFF , #014b88);
  box-shadow: 0 5px 10px 3px #008EFF;
}
.package .silver{
  background-color: #888888;
  background: linear-gradient(90deg ,#887401 , #c9ab02);
  box-shadow: 0 5px 10px 3px #c9ab02;
}
.package .bronz{
  background-color: #af4803;
  background: linear-gradient(90deg ,#535353 , #888888);
  box-shadow: 0 5px 10px 3px #888888;
}
#Gold{
  scale: 1.03;
  overflow: hidden;
}

.Info{
  background-color: #1E2225;
  width: 100%;
  height: 10vw;
  margin: 1vw 0 1vw 0;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 10px 10px 3px rgba(0, 0, 0, 0.514);
}
.Info h1{
  font-size: 2vw;
  font-weight: 100;
  cursor: default;
  font-family: 'Thedus Condensed Light';
}
.Info p{
  font-size: 1vw;
  font-weight: 100;
  color: rgba(255, 255, 255, 0.418);
  cursor: default;
  font-family: 'Thedus Condensed Light';
}

/*---------------🟣----------🟣----------🟣 Subscriptions 🟣-------------🟣------------🟣---------------------------*/

/*---------------🟠----------🟠----------🟠 BLOG 🟠-------------🟠------------🟠---------------------------*/
.blog{
  min-height: 48vw;
  padding: 10vw 0 10vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.J25{
  width: 90%;
  height: 2vw;
  background-color: #121516;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vw 0 0 0;
}
.J25 h2{
  color: white;
  font-weight: 100;
  font-size: 1vw;
  font-family: 'Asterone';

}
.Boxs_Blog{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3vw;
  padding: 3vw 0;
}
.Boxs_Blog_P{
  padding: 0;
  margin: 0 auto;
  width: fit-content;
  width: 50%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: white;
  word-wrap: break-word;     /* يكسر الكلمات الطويلة */
  overflow-wrap: break-word; /* متوافق مع المتصفحات الحديثة */
  white-space: normal;       /* يخلي النص ينزل للسطر التالي */
  text-indent: 0.8vw;
  padding: 0 5vw;

}
.Boxs_Blog_R{
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-content: center;
  padding: 4vw;
  margin: auto;
}
.Boxs_Blog_R h1{
  color: #008EFF;
  font-size: 2vw;
  font-weight: 100;
  font-family: 'Rostack';
  margin: 1vw;
}
.Boxs_Blog_R p{
  color: white;
  font-size: 1.5vw;
  font-weight: 100;
  font-family: 'Rostack';
  text-indent: 0vw;
  line-height: 1.5vw;
}
.Boxs_Blog_I{
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  max-width: 50vw;
}
.Boxs_Blog_P h1{
  color: #008EFF;
  font-size: 2vw;
  font-weight: 100;
  font-family: 'Rostack';
  margin: 1vw;
}
.Boxs_Blog_P p{
  color: white;
  font-size: 1.5vw;
  font-weight: 100;
  font-family: 'Rostack';
  text-indent: 1vw;
  line-height: 1.5vw;
  white-space: normal;    
  word-wrap: break-word;  
  overflow-wrap: break-word; 
  margin-left: 2vw;
}
.Boxs_Blog_P img {
  display: block;
  width: 100%;
  height: 100%;
  margin: auto ;
  object-fit: contain;
  border-radius: 20vw;
}
.Blog_P_I{
  width: 100%;
  display: flex;
  
}
.inputsave_blog{
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 0.4vw;
  padding: 0.2vw 0.5vw;
  font-size: 1vw;
  height: 2vw;
  width: 20vw;
  color: white;
  font-weight: 100;
  font-size: 1vw;
}


.textareasave_blog {
  width: 100%;
  height: 30vw;
  font-size: 16px;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #ffffff;
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 10px;
  resize: vertical;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.textareasave_blog:focus {
  background-color: #ffffff07;
  border: 0.15vw solid #007BFF;
  outline: none;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-box {
    width: 300px;
    background-color: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s ease;
}

.blog-box:hover {
    transform: translateY(-0px);
}

.blog-title {
    font-size: 20px;
    margin-bottom: 10px;
    color: #222;
}

.blog-date {
    font-size: 12px;
    color: #999;
    margin-bottom: 10px;
}

.blog-summary {
    font-size: 14px;
    color: #444;
    line-height: 1.5;
}

.read-more {
    display: inline-block;
    margin-top: 15px;
    color: #007BFF;
    text-decoration: none;
    font-weight: bold;
}

.read-more:hover {
    text-decoration: underline;
}
.BoxsBlogs{
  background-color: #262E33;
}

.boxHigh{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  height: auto;
  width: auto;
  }
.BoxsBlogCard {
  width: 25vw;
  height: 14vw;
  border: 0.15vw solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s ease;
  background-color: #262E33;
  filter: brightness(50%);
  transition: 0.3s ease-in-out;
}

.BoxsBlogCard:hover {
  transform: scale(1.02);
  z-index: 1;
  filter: brightness(100%);
  transition: 0.3s ease-in-out;
  border: 0.5vw solid  #007bff;
    
}

.BoxsBlogCard img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.BoxsBlogCard .content {
  padding: 15px;
}

.BoxsBlogCard h3 {
  margin: 0 0 10px;
  font-size: 18px;
  color: #ffffff;
}

.BoxsBlogCard p {
  margin: 0;
  color: #ffffff85;
  font-size: 14px;
}

.BoxsBlogCard a {
  text-decoration: none;
  color: inherit;
  display: block;
}
.card-box {
  background: #262E33;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 15vw;
  margin: 10px;
  filter: brightness(40%);
  transition: 0.3s ease;
}
.card-box:hover {
  filter: brightness(100%);
  transition: 0.3s ease;
}
.card-boxH4_P{
  padding: 0.5vw;
}
.card-boxH4_P h4{
  margin:0; color:#ffffff;
}
.card-boxH4_P p{
  font-size:13px; color:#ffffff6c;
}
.Boxs_Blog_Pimg {
  width: 100%;
  height: 23vw;
  overflow: hidden;
  padding: 1vw;
  display: flex;
  align-items: center;      /* تمركز عمودي */
  justify-content: center;  /* تمركز أفقي */
}
/*---------------🟠----------🟠----------🟠 BLOG 🟠-------------🟠------------🟠---------------------------*/
/*---------------🟢----------🟢----------🟢 whatsapp 🟢-----------🟢------------🟢---------------------------*/
/* زر واتساب */
.whatsapp-btn {
  position: fixed;
  bottom: 2vw;
  right: 2vw;
  background-color: #008EFF;
  color: white;
  font-size: 3vw;
  width: 4.8vw;
  height: 4.8vw;
  border-radius: 50%;
  text-align: center;
  line-height: 5vw;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
  z-index: 10000;
}

.whatsapp-btn.show {
  opacity: 1;
  pointer-events: auto;
}
.whatsapp-btn i{
  height: 50vw;
}

/*---------------🟢----------🟢----------🟢 whatsapp 🟢-----------🟢------------🟢---------------------------*/
/*---------------🟠----------🟠----------🟠 عرض فيديو في صفحة رئيسية 🟠-------------🟠------------🟠---------------------------*/
.overlay {
  display: none; /* مخبي من الأول */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.overlay.active {
  display: flex; /* يولي يبان */
}

.video-container {
  max-width: 90%;
  max-height: 90%;
}
.video-container video {
  width: 80vw; /* عرض الفيديو 80% من عرض الشاشة */
  height: auto; /* الارتفاع يتغير حسب العرض ليحافظ على الأبعاد */
  max-width: 100%; /* ما يزيدش على حجم الشاشة */
  border-radius: 10px; /* اختياري: حواف دائرية */
}


/*---------------🟠----------🟠----------🟠 عرض فيديو في صفحة رئيسية 🟠-------------🟠------------🟠---------------------------*/
/*---------------🔵----------🔵----------🔵 فيديوهات خدمات 🔵-------------🔵------------🔵---------------------------*/
.VSNH{
  width: 40vw;
  height: 25vw;
  border-radius: 1vw;
}

/*---------------🔵----------🔵----------🔵 فيديوهات خدمات 🔵-------------🔵------------🔵---------------------------*/

.RulesBox{
  background-color: rgba(255, 255, 255, 0.048);
  width: 80vw;
  height: auto;
  margin-top: 5vw;
}
.youtube_video_box02 h1{
  color: #008EFF;
  font-size: 1.7vw;
  padding: 1vw;
  font-family: 'Rostack';
  font-weight: 100;
}
.youtube_video_box02 p{
  color: #ffffff;
  padding: 1vw;
  font-size: 1vw;
  text-indent: 1vw;
  font-weight: 700;
  text-shadow: 0.07vw 0.07vw 0vw  #007bff56;
  
}
/*--------------------------------- CSS Button ---------------------------------*/
.wrap {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video01 {
  width: 7vw;
  height: 3vw;
  display: inline-flex;
  font-family: 'Nunito', sans-serif;
  font-size: 1.2vw;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1.3px;
  font-weight: 700;
  color: #ececf5;
  background: #008EFF;
  background: linear-gradient(90deg, #2A7DD8 0%, #135caa 100%);
  border: none;
  border-radius: 5vw;
  box-shadow: 0 0 24px #008cff7e;
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 10px;
  }

.video01::before {
  content: '';
  width: 7.5vw;
  height: 3.5vw;
  border-radius: 1000px;
  border: 6px solid #008EFF;
  box-shadow: 0 0 60px #008EFF;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: all .3s ease-in-out 0s;
}

.video01:hover, 
.video01:focus {
  color: #313133;
  transform: translateY(-0.5vw);
}

.video01:hover::before, 
.video01:focus::before {
  opacity: 1;
}

.video01::after {
  content: '';
  width: 30px; height: 30px;
  border-radius: 100%;
  border: 6px solid #008EFF;
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: ring 1.5s infinite;
}

.video01:hover::after, 
.video01:focus::after {
  animation: none;
  display: none;
}

@keyframes ring {
  0% {
    width: 30px;
    height: 30px;
    opacity: 1;
  }
  100% {
    width: 300px;
    height: 300px;
    opacity: 0;
  }
}

/*--------------------------------- CSS Button ---------------------------------*/
/*----------------------------- Rgister -------------------------------*/


.Register {
  background-image: url(../image/غلاف-صفحة.png), linear-gradient(to top, #023055, #111214);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
   justify-content: space-between;
  margin: 0;
}

.Register-all {
  width: 100%;
  max-width: 100%;
  min-height: 100%;
  display: flex;
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  background-image: url(../image/v-01.png), linear-gradient(to top, #023055, #111214);
  background-position: -16vw 0vw;
  background-size: 80vw;
  justify-content: flex-end;
}
.Register-container {
  background-color: #222222; 
  width: 50%;
  padding: clamp(1rem, 2vw, 3rem);
  overflow-y: auto;
  height: 100vh; 
  border-radius: 0; 
  position: relative;
  border-radius:  2vw 0 0 2vw ;
}
.Register-container form {
  display: flex;
  flex-direction: column;
  gap: 0; 
}

.Register-container::-webkit-scrollbar {
  width: 8px;
}

.Register-container::-webkit-scrollbar-track {
  background: #1a1a1a;
}

.Register-container::-webkit-scrollbar-thumb {
  background: #007bff;
  border-radius: 4px;
}

.Register-img {
  width: 45%;
  min-height: 100%;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}



.Register-container form {
  display: flex;
  flex-direction: column;
  gap: 0.1vw;
}

.form-group {
  margin-bottom: 0; /* إزالة المسافة من form-group لأن form-row يتحكم فيها */
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
}

.form-group .labelEmail {
  font-size: clamp(0.9rem, 1.5vw, 1.5vw);
  color: white;
  font-weight: 100;
  font-family: 'Rostack';
  margin-bottom: 0.5vw;
}


.inputemail, .inputfullname, .inputusername, .inputphone,
.selectgender, .inputbirthdate, .selectcountry, .inputPassword {
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 0.4vw;
  padding: clamp(0.5rem, 1vw, 1.2rem);
  font-size: clamp(0.9rem, 1vw, 1vw);
  width: 100%; /* 100% من العمود */
  max-width: 100%;
  color: white;
  font-weight: 100;
  transition: all 0.3s ease;
  box-sizing: border-box;
  height: 2.5vw; /* ارتفاع موحد */
  min-height: 35px; /* ارتفاع أدنى */
  margin-bottom: 0; /* إزالة المسافة السفلية */
}
.password-strength-wrapper {
  width: 100%;
  margin-bottom: 1.2vw; /* نفس المسافة مع باقي الصفوف */
}

.inputemail:focus, .inputfullname:focus, .inputusername:focus, 
.inputphone:focus, .selectgender:focus, .inputbirthdate:focus, 
.selectcountry:focus, .inputPassword:focus {
  border-color: #007bff;
  outline: none;
  background-color: #ffffff2e;
}

.selectcountry option, .selectgender option {
  background-color: #141414;
  padding: 0.5rem;
}

/* زر التسجيل */
.submit {
  background-color: #007bff38;
  border-radius: 0.5vw;
  border: 0.15vw solid #2A7DD8;
  padding: 0.5vw ;
  width: 100%;
  max-width: 8vw;
  margin: 0 auto; /* إزالة المسافة العلوية */
  transition: 0.3s ease-in-out;
  color: white;
  font-size: 1.3vw;
  cursor: pointer;
}

.submit:hover {
  background-color: #007bff8a;
  border: 0.2vw solid #48a0ff;
}

.Register-container p {
  color: white;
  font-weight: 100;
  font-size: clamp(0.8rem, 1vw, 1.2vw);
  text-align: center;
  margin-top: 1rem;
}

.Register-container p a {
  color: #007bff;
  text-decoration: none;
  transition: 0.3s ease;
}

.Register-container p a:hover {
  color: #48a0ff;
}

/* رسائل الأخطاء */
.error-message, .success-message, .form-errors {
  padding: 1vw;
  border-radius: 8px;
  font-size: clamp(0.8rem, 0.9vw, 1vw);
  margin-bottom: 1vw;
}

.error-message {
  color: #ff4d4d;
  font-size: clamp(0.75rem, 0.9em, 1em);
  margin-top: 5px;
}

.success-message {
  background-color: #024605;
  border: 1px solid #4dff65;
  color: #ffffff;
}

.form-errors {
  background-color: #460202;
  border: 1px solid #ff4d4d;
  color: #cc0000;
}

/* Password strength indicator */
.Pass_box {
  padding: 0.5vw 1vw;
  font-size: clamp(0.75rem, 0.9vw, 1vw);
}

#strength-bar-container {
  height: 8px;
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 4px;
  margin-top: 0.5vw;
}

#strength-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease, background-color 0.3s ease;
}
.head-page-Up {
    width: 90%;
    height: 5vw;
    display: flex;
    align-items: center;          /* وسط عمودياً */
    justify-content: space-between; /* العنصر الأول يسار، الثاني يمين */
    padding: 0 1vw;               /* مسافة صغيرة من الحواف */
    margin-bottom: 5vw ;
    margin-left: 2vw ;
}


.icon-logo{
  height: 5vw;
  width: 5vw;
  background-image: url(../image/icon.png);
  background-position: center;
  background-size: 5vw;
  background-repeat: no-repeat;
}
.Register-container h1 {
  color: white;
  font-weight: 100;
  font-size: 2vh;
  text-align: center;
  text-align: center;

}
.text-policy p {
    font-size: 10vh;
    background-color: red;
}
.Register-container .text-Sign-In{
    margin-bottom: 0vw ;
    text-align: left;
    padding-left: 2.5vw ;
    padding-bottom: 1vw ;
  font-size: 5vh;
}
.Register-container .form-Sign-Up{
    width: 100%;
    height: auto;
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.2vw; /* مسافة موحدة */
}
/* Checkbox مع النص */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  font-size: clamp(0.85rem, 1vw, 1.1vw);
  cursor: pointer;
  font-family: 'Rostack';
  margin-bottom: 1.2vw;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  cursor: pointer;
  accent-color: #007bff;
  margin: 0;
}

.text-policy {
  color: white;
  font-size: 3vh;
  font-weight: 100;
  line-height: 1.5;
  margin: 0;
  color: ;
}

.text-policy a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s;
  font-weight: 400;
}

.text-policy a:hover {
  color: #48a0ff;
}
/* Password Strength Bar - نسخة محسنة */
.password-strength {
  width: 100% !important;
  height: 6px !important;
  background: rgba(255, 255, 255, 0.15) !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.strength-bar {
  height: 100% !important;
  width: 0% !important;
  transition: width 0.5s ease, background-color 0.5s ease !important;
  border-radius: 4px !important;
  display: block !important;
}

.strength-bar.strength-weak {
  width: 33% !important;
  background: linear-gradient(90deg, #ff4444, #ff6666) !important;
  box-shadow: 0 0 15px rgba(255, 68, 68, 0.6) !important;
}
.strength-bar.strength-medium {
  width: 66% !important;
  background: linear-gradient(90deg, #ffaa00, #ffcc00) !important;
  box-shadow: 0 0 15px rgba(255, 170, 0, 0.6) !important;
}

.strength-bar.strength-strong {
  width: 100% !important;
  background: linear-gradient(90deg, #00ff00, #00cc00) !important;
  box-shadow: 0 0 15px rgba(0, 255, 0, 0.6) !important;
}

/*----------------------------- Rgister -------------------------------*/


/*------------------------------- Log-in -------------------*/
.Log-in {
  background-image: url(../image/غلاف-صفحة.png), linear-gradient(to top, #023055, #111214);  
  min-height: 100vh;
  width: 100%;
  padding: 6vw 0;
  display: flex;
  align-content: center;
  justify-content: center;
}
.Log-in-container {
  background-color: #222222;
  width: 55%;
  padding: 2vw;
}

.Log-in-container form {
  display: flex;
  flex-direction: column;
}

.Log-in-container h1  {
  color: white;
  font-weight: 100;
  font-size: 2.5vw;
  font-family: 'Rostack';
  padding: 0 0 2vw 0;
}
.Log-in-container p {
  color: white;
  font-weight: 100;
  font-size: 1vw;
  font-family: 'Rostack';
  padding: 0 0 2vw 0;
}
.labelEmail , .labelPassword{
  font-size: 1.5vw;
  color: white;
  font-weight: 100;
  font-family: 'Rostack';
} 
.Log-in-img {
  width: 45%;
  height: 40vw;
  background-image: url(../image/Texturelabs_LensFX_161L2.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
.Log-in-container .inputemail,
.Log-in-container .inputPassword {
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 0.4vw;
  padding: 0.8vw 1vw;
  font-size: 1vw;
  width: 20vw;
  max-width: 100%;
  color: white;
  font-weight: 100;
  box-sizing: border-box;
}
.Log-in-all {
  width: 50vw;
  max-width: 100%;
  height: auto;
  display: flex;
  border-radius: 0.5vw;
  overflow: hidden;
}

.Log-in-all p {
  font-size: 1.2vw;
  margin-top: 1vw ;
  height: auto;
  width: auto;
  
}

.inputPassword ,.inputfullname ,.inputemail
, .inputusername ,.inputphone ,.selectgender ,.inputbirthdate
,.selectcountry{
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 0.4vw;
  padding: 0.2vw 0.5vw;
  font-size: 1vw;
  height: 2vw;
  width: 20vw;
  color: white;
  font-weight: 100;
  font-size: 1vw;
  margin-bottom: 0.5vw;
}

.iti__flag-container {
  z-index: 100 !important;
}
.selectcountry option ,.selectgender option{
  background-color: #141414;
}


.form-group label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1vw;
  width: auto;
  font-family: 'Rostack';
  margin-bottom: 1.2vw;
}
.form-group label input{
  color: white;
  margin-right: 1vw;
}
.error-message {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
  display: block;
}
.success-message{
  background-color: #024605; /* خلفية حمراء فاتحة */
  border: 1px solid #4dff65; /* حدود حمراء */
  padding: 1vw;
  border-radius: 8px;
  font-size: 14px;
  color: #ffffff; /* لون نص */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  height: auto;
  font-family: 'Rostack';
  font-size: 1vw;
  font-weight: 100;
}

input.error, .form-input.error ,
select.error ,.inputemail.error ,input.error ,input.invalid{
  border: 2px solid red;
}

input.valid ,.inputemail.success
,input.success , .form-input.success {
  border: 2px solid green !important;
}
.error-text {
  color: #e74c3c;
  margin-top: 5px;
  display: block;
  font-size: 0.9em;
}
.error {
  color: red;
  font-size: 0.9em;
  margin-top: 2px;
}
.valid {
  color: green;
  font-weight: bold;
}
.invalid {
  color: gray;
}
#strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 4px;
  transition: width 0.4s ease, background-color 0.3s ease;
}

#strength-bar.weak {
  background-color: red;
}
#strength-bar.medium {
  background-color: orange;
}
#strength-bar.strong {
  background-color: green;
}
.Pass{
  font-family: 'Rostack';
  font-size: 1vw;
}
.Pass_box{
  height: auto;
  width: 100%;
  padding: 0 2vw;
}
.Pass_box p{
  height: 0.2vw;
  width: auto;
  font-size: 1vw;
}

#submit-button {
  background-color: gray;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 6px;
  transition: background-color 0.4s ease, transform 0.3s ease;
  cursor: not-allowed;
}

#submit-button.valid {
  background-color: #28a745;
  transform: scale(1.05);
  cursor: pointer;
}
form .text-activated{
  color: wheat;
}




/*---------------------------------Errors----------------------------*/
.form-errors {
  background-color: #460202; /* خلفية حمراء فاتحة */
  border: 1px solid #ff4d4d; /* حدود حمراء */
  padding: 1vw;
  border-radius: 8px;
  font-size: 14px;
  color: #cc0000; /* لون نص */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  width: 100%;
  height: auto;
  font-family: 'Rostack';
  font-size: 1vw;
  font-weight: 100;
}

.form-errors p {
    padding-left: 1vw;
    position: relative;
    font-size: 1vw;
    margin: 0;
    height: 0.8vw;
}

.form-errors p::before {
    content: "⚠️";
    position: absolute;
    left: 0;
}

/*---------------------------------Errors----------------------------*/
/*---------------------------------photo profil----------------------------*/
.Box_photo_clinet{
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vw 0;
}
.profile-dropdown {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-dropdown_admins {
  position: relative;
  display: inline-block;
  transform: translateY(0.5vw);
  display: flex;
  align-self: center;
  justify-content: center;
}
.avatar {
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s ease;
  
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  min-width: 14vw;
  box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 8px;
  overflow: hidden;
  transform: translateY(8vw) translateX(-5vw);
  background-color: #ffffffbf;
}

.dropdown-content a {
  color: #191c1f;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: background-color 0.2s;
  font-family: 'Rostack';
  font-weight: 100;
  font-size: 1.3vw;
  transition: 0.2s ease;
}

.dropdown-content a:hover {
  background-color: #007bffb4;
  color: white;
  transition: 0.2s ease;
}

.photo_clinet{
  background-color: yellowgreen;
  width: 7vw;
  height: 7vw;
  border-radius: 50%;
  object-fit: cover;
  overflow: hidden;
}
.photo_clinet_Edit{
  width: 7vw;
  height: 7vw;
  object-fit: cover;
  overflow: hidden;
}
.btnS{
    padding: 0.4vw 0.9vw;
    font-size: 1.5vw;
    font-weight: 100;
    background-color: #007bff50;
    border:0.15vw solid #007BFF ;
    color: #007bff;
    border-radius: 0.5vw;
    font-family: 'Rostack';
    transform: translateY(-0.2vw);
    transition: 0.2s ease;
    scale: 1;
    box-shadow: 0 0 0 0 #007BFF;
  }
.btnS:hover{
  background-color: #007bff75;
  border:0.15vw solid #83bfff ;
  color: #ffffff;
  transition: 0.2s ease;
  scale: 1.05;
  box-shadow: 0 0 10vw 0 #007BFF;
}
.online-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 12px;
    height: 12px;
    background-color: #00ff00;
    border-radius: 50%;
    border: 2px solid white;
}
.offline-dot {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 12px;
  height: 12px;
  background-color: #aaa ;
  border-radius: 50%;
  border: 2px solid white;
}



/*---------------------------------photo profil----------------------------*/
/*----------------------------------- edit ---------------------------*/
.settings-container {
  display: flex;
  height: 45vw;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.settings-container02 {
  display: flex;
  height: auto;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
  padding: 2vw;
}
.sidebar {
  width: 250px;
  background: #f5f5f5;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
}

.tab-button {
  padding: 15px;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
  font-size: 16px;
  border-bottom: 1px solid #ddd;
  transition: background 0.2s;
}

.tab-button:hover,
.tab-button.active {
  background: #e0e0e0;
  font-weight: bold;
}

.tab-content {
  flex: 1;
  padding: 20px;
}

.tab-section {
  display: none;
}
.tab-section form h2{
  color: white;
  font-family: 'Asterone';
  padding: 1vw 0;
  text-align: center;
}

.tab-section.active {
  display: block;
}
.account-edits{
  background-image:  url(../image/غلاف-صفحة.png) , linear-gradient(to top, #023055, #111214);  
  width: 100%;
  height: auto;
  padding: 8vw 0;
  display: flex;
  align-content: center;
  justify-items: center;
  
}
.box-account-edits{
  background-color: #16191b67;
  width: 50vw;
  height: auto;
  padding: 2vw;
  border-radius: 1vw;
  margin:   auto;
}
/*----------------------------------- edit ---------------------------*/
/*----------------------------------- Account Information ---------------------------*/
.form-group {
  margin-bottom: 0.2vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.form-group .form-label {
  font-family: 'Rostack';
  width: auto;
  height: auto;
  font-size: 1.5vw;
  padding: 0.2vw;
  

}
.form-input {
  background-color: #ffffff1e;
  border: 0.15vw solid #ffffff;
  border-radius: 0.4vw;
  padding: 0.2vw 0.5vw;
  font-size: 1vw;
  height: 2vw;
  width: 20vw;
  color: white;
  font-weight: 100;
}

/*----------------------------------- Account Information ---------------------------*/

/*----------------------------------- ستايل مدونت و عناصر خانات .. ---------------------------*/








/*----------------------------------- ستايل مدونت و عناصر خانات .. ---------------------------*/
/*----------------------------------- صفحة أدمن admin ---------------------------*/
.pages_admins{
  min-height: 48vw;
  padding: 2vw 0 10vw 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sidebar {
  min-height: 100vh; 
  background-color: #e3f2fd; 
  padding: 15px; 
}
.sidebar button { 
  text-align: right; 
  margin-bottom: 5px; 
}
.topbar { 
  background: #0058b6; 
  color: white; padding: 10px; 
  font-weight: bold; 
}
.drag-container { 
  display: flex; 
  overflow-x: auto; 
  gap: 10px; padding: 10px; 
  white-space: nowrap; 
}
.drag-item { 
  background: white; 
  padding: 8px 15px; 
  border-radius: 8px; 
  border: 1px solid #ccc;
  cursor: pointer; 
}
.drag-item:hover {
  background: #f1f1f1; 
}
#content { 
  padding: 20px; 
  background-color: #00264e; 
  min-height: 400px; 
  border-radius: 10px; 
  margin-top: 10px; 
  color: white;
}

/*----------------------------------- صفحة أدمن admin ---------------------------*/
/*----------------------------------- صفخة ملخص الطلبات متعلقة بالصفحة admin ----------------------*/
/* ✅ الحاوية الرئيسية للبطاقات */
#ordersSummaryRow .card {
    border-radius: 1vw;
    padding: 2vw 1vw;
    text-align: center;
    color: #fff;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    transition: transform 0.25s, box-shadow 0.25s;
}

/* تأثير عند المرور */
#ordersSummaryRow .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.35);
}

/* 🎨 ألوان مخصصة لكل حالة */
#ordersSummaryRow .card-new {
    background: linear-gradient(135deg, #007bff, #0056b3); /* أزرق */
}

#ordersSummaryRow .card-progress {
    background: linear-gradient(135deg, #f39c12, #d35400); /* برتقالي */
}

#ordersSummaryRow .card-completed {
    background: linear-gradient(135deg, #28a745, #1e7e34); /* أخضر */
}

#ordersSummaryRow .card-rejected {
    background: linear-gradient(135deg, #dc3545, #a71d2a); /* أحمر */
}

/* تنسيق النصوص */
#ordersSummaryRow h5 {
    margin-bottom: 0.8vw;
    font-size: 1.2em;
    font-weight: 500;
}

#ordersSummaryRow h2 {
    font-size: 2em;
    font-weight: bold;
}

/* ⚡ البطاقة اللي فيها جدول الطلبات */
.card.orders-list {
    border-radius: 1vw;
    background-color: #111214;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

.card.orders-list .card-header {
    background-color: #191c1f;
    border-bottom: 1px solid #333;
    font-weight: bold;
    font-size: 1.1em;
}

.card.orders-list .btn-outline-light {
    border-radius: 0.4vw;
    border: 1px solid #888;
    color: #fff;
    transition: 0.3s;
}

.card.orders-list .btn-outline-light:hover {
    background-color: yellowgreen;
    color: #111;
    border-color: yellowgreen;
}


/*----------------------------------- صفخة ملخص الطلبات متعلقة بالصفحة admin ----------------------*/
/*------------------------- إشعارات -----------------------*/
.notifications {
  position: relative;
  list-style: none;
  height: auto;
  width: 2vw;
  display: flex;
  align-self: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.notif-wrapper {
  position: relative;
  display: inline-block;
}

.notif-wrapper i {
  font-size: 2vw;
  cursor: pointer;
  color: #0058b6;
  transition: color 0.3s ease;
}

.notif-wrapper i:hover {
  color: #003d80;
}

.notif-count {
  position: absolute;
  top: -8px;
  right: -10px;
  background-color: #ff0000;
  color: white;
  font-size: 11px;
  font-weight: bold;
  border-radius: 50%;
  padding: 3px 7px;
  min-width: 18px;
  text-align: center;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(255, 0, 0, 0.3);
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* إخفاء العداد بشكل كامل */
.notif-count[style*="display: none"],
.notif-count:empty {
  display: none !important;
}

.notif-dropdown {
  display: none;
  position: absolute;
  top: 35px;
  right: -10px;
  width: 280px;
  max-height: 350px;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  padding: 5px 0;
  border: 1px solid #e0e0e0;
}

/* سكرول بار مخصص */
.notif-dropdown::-webkit-scrollbar {
  width: 6px;
}

.notif-dropdown::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.notif-dropdown::-webkit-scrollbar-thumb {
  background: #0058b6;
  border-radius: 10px;
}

.notif-dropdown::-webkit-scrollbar-thumb:hover {
  background: #003d80;
}

.notif-dropdown li {
  padding: 12px 15px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px;
  transition: background-color 0.2s ease;
  cursor: pointer;
  list-style: none;
}

.notif-dropdown li:last-child {
  border-bottom: none;
}

.notif-dropdown li:hover {
  background-color: #f8f9fa;
}

/* الإشعارات غير المقروءة */
.notif-dropdown li.unread {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  font-weight: 600;
  border-left: 4px solid #0058b6;
}

.notif-dropdown li.unread a {
  color: #000000;
}

/* الإشعارات المقروءة */
.notif-dropdown li.read {
  background: #ffffff;
  font-weight: normal;
  opacity: 0.85;
}

.notif-dropdown li.read a {
  color: #666666;
}

.notif-dropdown li a {
  text-decoration: none;
  color: inherit;
  display: block;
  line-height: 1.4;
}

.notif-dropdown li a strong {
  display: block;
  margin-bottom: 4px;
  font-size: 14px;
  color: #0058b6;
}

.notif-dropdown li.read a strong {
  color: #555555;
}

.notif-dropdown li a small {
  display: block;
  font-size: 12px;
  line-height: 1.3;
  margin-top: 3px;
}

/* رسالة "لا توجد إشعارات" */
.notif-dropdown li em {
  color: #999999;
  font-style: normal;
  display: block;
  text-align: center;
  padding: 20px 10px;
}

/* تأثير الفتح */
.notif-dropdown.show {
  display: block;
  animation: slideDown 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* استجابة للشاشات الصغيرة */
@media (max-width: 768px) {
  .notifications {
    width: auto;
    min-width: 40px;
  }

  .notif-wrapper i {
    font-size: 24px;
  }

  .notif-dropdown {
    width: 90vw;
    max-width: 300px;
    right: -100px;
  }

  .notif-count {
    top: -5px;
    right: -8px;
    font-size: 10px;
    padding: 2px 5px;
  }
}

/*------------------------- نهاية إشعارات -----------------------*/
/*------------------------- صفحة إرسال لي تفعيل حساب ----------------*/
.box_Activation{
  width: 100%;
  height: 100%;
  min-height: 30vw;
  display: flex;
  justify-content: center;
  padding-top: 5vw;
}
.container-Activation {
    background: white;
    padding: 4vw;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    height: 20vw;
}
h2 {
    margin-top: 0;
    color: #333;
}
.alert {
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 5px;
    color: white;
}
.alert-danger {
    background: #fee;
    color: #c33;
    border: 1px solid #fcc;
}
.alert-success {
    background: #efe;
    color: #3c3;
    border: 1px solid #cfc;
}
input[type="email"] {
    width: 20vw;
    padding: 12px;
    margin-bottom: 0.2vw;
    border: 1px solid #ddd;
    border-radius: 5px;
    box-sizing: border-box;
}
.button-Activation {
    width: 100%;
    padding: 12px;
    background: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s ease;
}
.button-Activation:hover {
    background: #0058b6;
    transition: 0.3s ease;
}
a {
    color: #007bff;
}






/*------------------------- صفحة إرسال لي تفعيل حساب ----------------*/




@media (min-width: 1025px) {
     .footer_bottom {
         max-width: 1200px;
         margin-left: auto;
         margin-right: auto;
     }

     .web_services {
         max-width: 1100px;
         margin-left: auto;
         margin-right: auto;
     }

     .email {
         max-width: 900px;
         margin-left: auto;
         margin-right: auto;
     }
     
}
/* تابلت */
@media (min-width: 768px) and (max-width: 1024px) {
  body {

  }
  .home{
    padding-top: 5vw;
  }
  .navbar{
    padding-top: 4vw;
    padding-bottom: 3vw;
  }
  .nav-links {
    list-style: none;
    display: flex;
    gap: 1.2rem;
    margin-right: 5vw;
    transform: translate(-0vw, 0vw);
  }
  .logo{
    width: auto;
    height: auto;
    margin: 0;
    transform: translate(3vw ,0vw) ;
  }
  .logo_Next_horizon{
    height: 3vw;
    margin: 0;
  }
  .main_page_home{
    height: 60vw;
  }
  .dropdown li{
    font-size: 2.5vw;
    width: 100%;
  }
  .dropdown {
    transform: translate(-1.5vw ,0.5vw);
  }
  .A01{
    font-size: 3vw;
  }
  .address .address_Video_creation h1{
    font-size: 4vw;
  }
  .address_Let_me h2{
    font-size: 3vw;
  }
  .whatsapp{
    height: 3.5vw;
  }
  .image_page_home{
    height: 100%;
    width: 40%;
  }
  .image01{
    height: 60vw;
    width: 30vw;
  }
  .address .address_who_i_am .who_i_am{
    height: 4vw;
    font-size: 3vw;
    box-shadow: 2px 2px 0px 1px;
    border-radius: 1vw;
  }
  .cv_button{
    height: 4vw;
    border-radius: 0.7vw;
    box-shadow: 2px 2px 0px 1px;
  }
  .cv_actions{
    transform: translate(0.5vw, 1vw);
    height: 10vw;
  }
  .cv_actions.active {
    transform: translate(0.5vw, 0vw);
  }
  .brands{
    height: 7vw;
  }
  .brands div{
    width: 15vw;
    height: auto;
  }
  .brands div .brands01 {
    background-size: 7vw; 
  }
  .brands div .brands02 {
    background-size: 13vw; 
  }
  .brands div .brands03 {
    background-size: 6vw; 
  }
  .brands div .brands04 {
    background-size: 6vw; 
  }
  .brands div .brands05 {
    background-size: 10vw; 
  }
  .Whether_you_are h2{
  font-size: 4vw;
  }
  .WYa{
    padding-top: 1vw;
    height: 40vw;
  }
  .imgcre02{
    width: 100%;
    height: 30vw;
    background-size: 60vw;
  }
  .Service01 {
  width: 100%;
  height: 28vw;
  }
  .container {
    width: 90%;
    height: 100%;
    
  }
  .road .road01 h2{
    font-size: 3.0vw;
  }
  .road .road02 h2{
    font-size: 3.0vw;
  }
  .road .road03 h2{
    font-size: 3.0vw;
  }
  .road .road04 h2{
    font-size: 3.0vw;
  }
  .road .road05 h2{
    font-size: 3.0vw;
  }
  .box-container {
    height: 28vw;
  }
  .box {
    width: 50vw;
    height: 28vw;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    margin: 0 0.1vw;
    cursor: pointer;
    transform: skew(-2deg) translateX(00px);
  }
  .road div{
    margin: 2vw 0;
  }
  .road div .road01{
    width: 40vw;
    height: 25vw;
  }
  .road div .road02{
    width: 40vw;
    height: 25vw;
  }
  .road div .road03{
    width: 40vw;
    height: 25vw;
  }
  .road div .road04{
    width: 40vw;
    height: 25vw;
  }
  .road div .road05{
    width: 40vw;
    height: 25vw;
  }
  .text_Here_are_opinions{
    width: 30%;
    height: 13vw;
  }
  .text_Here_are_opinions h1{
    font-size: 3vw;
    font-weight: 100;
  }
  .text_Here_are_opinions .OPClints{
    font-size: 2vw;
    font-weight: 100;
  }
  .text_Here_are_opinions .OPClintsP{
    font-size: 1vw;
    font-weight: 100;
  }
  .text_Here_are_opinions img {
    height: 3vw;
  }
  .img_end h1{
    font-size: 3vw;
    font-weight: 100;
    width: 40vw;
    transform: translate(30vw, 10vw);
  }
  .img_end{
    height: 48vw;
    width: 100%;
  }
  .img_end div{
    height: 34vw;
    width: 30vw;
  }
  footer {
         padding: 50px 25px 20px;
     }

     .web_services {
         gap: 16px;
         margin-bottom: 40px;
     }

     .web_services a {
         padding: 13px 30px;
     }

     .web_services h1 {
         font-size: 15px;
         letter-spacing: 1.2px;
     }

     .strok {
         width: 75%;
         margin: 35px auto;
     }

     .contact {
         margin-bottom: 40px;
     }

     .contact > a {
         font-size: 24px;
         letter-spacing: 2.5px;
         padding: 10px 28px;
         margin-bottom: 30px;
     }

     .acounts {
         gap: 20px;
     }

     .acounts a {
         width: 56px;
         height: 56px;
     }

     .acounts svg {
         width: 26px;
         height: 26px;
     }

     .email {
         gap: 18px;
         margin-bottom: 35px;
     }

     .email a {
         padding: 12px 22px;
         font-size: 14px;
     }

     .email h1 {
         font-size: 14px;
     }

     .footer_bottom {
         grid-template-columns: repeat(2, 1fr);
         padding: 25px 30px;
         gap: 25px;
     }

     .footer_center {
         order: 3;
         grid-column: 1 / -1;
     }

     .footer_left {
         order: 1;
         align-items: flex-start;
     }

     .footer_right {
         order: 2;
         align-items: flex-end;
     }

     .copyright {
         font-size: 14px;
         padding: 8px 18px;
     }

     .copyright span {
         font-size: 15px;
     }

     .version {
         padding: 11px 22px;
         font-size: 14px;
     }

     .company_name {
         font-size: 15px;
         padding: 8px 18px;
     }

     .license {
         font-size: 11px;
         padding: 6px 13px;
     }

     .update_date {
         font-size: 12px;
         padding: 7px 18px;
     }

     .status {
         font-size: 11px;
         padding: 6px 13px;
     }

     .made_with,
     .powered_by {
         font-size: 12px;
         padding: 7px 18px;
     }

     /*-------------------- log-in.php ----------------------*/
    .Log-in-all{
        flex-direction: column;
        width: 80%;
        margin-top: 5vw;
        overflow: hidden;
        border-radius: 2vw;
        
    }
    .Log-in-img {
      width: 100%;
      height: 15vw;
    }
    .form-group{
        margin-bottom: 2vw ;
    }
    .Log-in-container {
      background-color: #222222;
      width: 100%;
      text-align: center;
      height: auto;
    }
    .Log-in-container h1  {
      font-size: 6vw;
      display: none;
    }
    .Log-in-container p {
      font-size: 3vw;
      padding: 0 0 2vw 0;
    }
    .form-group .labelEmail ,.form-group  .labelPassword {
      font-size: 4vw;
      color: white;
      margin: 0.1vw;
      padding: 0;
    }
    .Log-in-container .inputemail,
    .Log-in-container .inputPassword {
      font-size:  2.5vw;
      height: 4vw;
      width: 35vw;
      max-width: 100%;
      text-align: center;
    }
    .submit{
      background-color: #007bff38;
      border-radius: 0.5vw;
      border: 0.15vw solid #2A7DD8;
      height: 4vw;
      width: 20vw;
      padding: 0.2vw 0.5vw;
      transition: 0.3s ease-in-out;
      color: white;
      font-size: 2.5vw;
    }

   
     
     
     /*-------------------- log-in.php ----------------------*/
  
}
@media (min-width: 350px) and (max-width: 767px) {
  body {
    

  }
    main{
    z-index: 1;
    background-image: url(../image/غلاف-صفحة.png);
    background-position: center;
    background-size: 0.9vw;
  }
  .home{
    padding-top: 5vw;
  }
  .navbar{
    padding-top: 5vw;
    padding-bottom: 10vw;
  }

  .logo{
    width: auto;
    height: auto;
    margin: 0;
    transform: translate(5vw ,3vw) ;
  }
  .youtube_video_box02 h1{
    color: #008EFF;
    font-size: 5vw;
    padding: 1vw;
    font-weight: 100;
  }
  .youtube_video_box02 p{
    color: #ffffff;
    padding: 1vw;
    font-size: 3vw;
    text-indent: 1vw;
    font-weight: 700;
    text-shadow: 0.07vw 0.07vw 0vw  #007bff56;
    
  }
  .logo_Next_horizon{
    height: 6vw;
    margin: 0;
  }
  .main_page_home{
    height: 100vw;
  }
  .dropdown li{
    font-size: 5vw;
    width: 100%;
  }

  .A01{
    font-size: 6vw;
    width: auto;
  }
  .address_Video_creation{
    height: auto;
    margin-bottom: 2vw;
  }
  .address .address_Video_creation h1{
    font-size: 7vw;
  }
   .address_Let_me{
    margin-bottom: 2vw;
   }
  .address_Let_me h2{
    font-size: 8vw;
  }
  .whatsapp{
    height:8vw;
    margin: 0 2vw 0 2vw;
  }
  .image_page_home{
    height: auto;
    width: 100%;
    position: absolute;
    z-index: 2;
    overflow: hidden;
  }
  .address{
    z-index: 3;
    background-color: #23272bbb;
    width: 100%;
    height: auto;
    padding: 3vw 0;
  }
  .image01{
    height: 177vw;
    width: 100%;
    background-position-y: -30vw;
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 00%);
   -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 20%, rgba(0, 0, 0, 0) 73%);
   filter: blur(0.3vw) grayscale(0.5);
  }
  .address_who_i_am{
    height: auto;
  }
  .address .address_who_i_am .who_i_am{
    height: 7vw;
    width: 18vw;
    font-size: 5vw;
    margin: 0 0 0 2vw;
  }
  .cv_button{
    height: 7vw;
    width: 18vw;
  }
  .cv_actions .cv_button {
    font-size: 3vw;
    color: #00264e;
  }
  .cv_actions{
    transform: translate(39.5vw, 1vw);
    height:   auto;
  }
  .cv_actions.active {
    transform: translate(39.5vw, 0vw);
  }
  .brands{
    height: 45vw;
    background-color: #121516;
    display: flex;
    flex-wrap: wrap;
    gap: 0vw 5vw ;
    padding: 2vw;
  }
  .brands div{
    width: 35vw;
    height: auto;
  }
  .brands div .brands01 {
    background-size: 18vw; 
  }
  .brands div .brands02 {
    background-size: 35vw; 
  }
  .brands div .brands03 {
    background-size: 15vw; 
  }
  .brands div .brands04 {
    background-size: 18vw; 
    margin-top: 1vw;
  }
  .brands div .brands05 {
    background-size: 20vw; 
  }
  .Whether_you_are h2{
  font-size: 10vw;
  }
  .WYa{
    padding-top: 1vw;
    height: 60vw;
  }
  .imgcre02{
    width: 100%;
    height: 50vw;
    background-size: 90vw;
  }
  .Service01 {
    display: none;
  }
  .Service01mbl{
    background-color: #121516;
    width: 100%;
    height: auto;
    display: flex;
    align-content: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10vw 0;
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
  .Box.service1MBL{
    background-color: #007bff;
    width: 80vw ;
    height: 45vw;
    border-radius: 0vw 5vw 0 5vw;
    background-image: url("../image/C\ S\ R\ 01.webp");
    background-position: center;
    background-size: 80vw 45vw;
    background-repeat: no-repeat;
    display: flex;
    filter: grayscale(0);
    transition: 0.3s ease-in-out;
    box-shadow: 5px 5px 3px 2px #007bff;
  }
  .Box.service1MBL:hover{
    filter: grayscale(1);
    transition: 0.3s ease-in-out;
    box-shadow: -5px -5px 3px 2px #ffffff;
    
  }
  .Box.service1MBL h2{
    width: auto;
    height: 5vw;
    color: white;
    transform: translate(5vw, 40vw);
    font-family: 'Asterone';
    font-size: 3vw;
    opacity: 0;
    transition: 0.3s ease-in-out;
  }
  .Box.service1MBL:hover h2{
    transform: translate(5vw, 37vw);
    opacity: 1;
    transition: 0.3s ease-in-out;
    position: absolute;
    z-index: 3;
  }
  .Box.service2MBL{
    background-color: #007bff;
    width: 80vw ;
    height: 45vw;
    border-radius: 0vw 5vw 0 5vw;
    background-image: url("../image/C\ S\ Y\ 01.webp");
    background-position: center;
    background-size: 80vw 45vw;
    background-repeat: no-repeat;
    display: flex;
    filter: grayscale(0);
    transition: 0.3s ease-in-out;
    box-shadow: 5px 5px 3px 2px #007bff;
  }
  .Box.service2MBL:hover{
    filter: grayscale(1);
    transition: 0.3s ease-in-out;
    box-shadow: -5px -5px 3px 2px #ffffff;
  }
  .Box.service2MBL h2{
    width: auto;
    height: 5vw;
    color: white;
    transform: translate(5vw, 40vw);
    font-family: 'Asterone';
    font-size: 3vw;
    opacity: 0;
    transition: 0.3s ease-in-out;
  }
  .Box.service2MBL:hover h2{
    transform: translate(5vw, 37vw);
    opacity: 1;
    transition: 0.3s ease-in-out;
    position: absolute;
    z-index: 3;
  }
  .container {
    width: 100%;
    height: 100%;
    background-color: rgb(169, 180, 70);
    display: flex;
    justify-content: center;
    align-content: center;
  }
  .box-track {
    background-color: rgb(90, 220, 20);
    height: 100%;
    width: 300vw;
    margin: 0;
  }  
  .box.service1 {
    background-size: 40vw;
    background-color: #e5ff00;
  }
  .box.service2 {
    background-size: 40vw;
    background-color: #0b68cc;
  }
  .box.service3 {
    background-size: 40vw;
    background-color: #007bff;
  }
  .road .road01 h2{
    font-size: 5vw;
    letter-spacing: 0.1vw;
    transform: translateX(0vw) translateY(25vw);
    text-align: center;
    opacity: 0;
  }
  .road div .road01:hover h2{
    transform: translateX(0vw) translateY(20vw);
    opacity: 1;
  }
  .road .road02 h2{
    font-size: 5vw;
    letter-spacing: 0.1vw;
    transform: translateX(0vw) translateY(25vw);
    text-align: center;
    opacity: 0;
  }
  .road div .road02:hover h2{
    transform: translateX(0vw) translateY(20vw);
    opacity: 1;
  }
  .road .road03 h2{
    font-size: 5vw;
    letter-spacing: 0.1vw;
    transform: translateX(0vw) translateY(25vw);
    text-align: center;
    opacity: 0;
  }
  .road div .road03:hover h2{
    transform: translateX(0vw) translateY(20vw);
    opacity: 1;
  }
  .road .road04 h2{
    font-size: 5vw;
    letter-spacing: 0.1vw;
    transform: translateX(0vw) translateY(25vw);
    text-align: center;
    opacity: 0;
  }
  .road div .road04:hover h2{
    transform: translateX(0vw) translateY(20vw);
    opacity: 1;
  }
  .road .road05 h2{
    font-size: 5vw;
    letter-spacing: 0.1vw;
    transform: translateX(0vw) translateY(25vw);
    text-align: center;
    opacity: 0;
  }
  .road div .road05:hover h2{
    transform: translateX(0vw) translateY(20vw);
    opacity: 1;
  }
  .box-container {
    height: 100%;
    width: 100%;
    background-color: rgb(139, 107, 0);
    display: flex;
    align-content: center;
    justify-content: center;
  }
  .service1{
    height: 60vw;
  }
  .box.service1.service2.service3 {
    width: 20vw;
    height: 20vw;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    margin: 0 0.1vw;
    cursor: pointer;
    transform: skew(-2deg) translateX(00px);
  }
  .btn.left {
    display: none;
  }
  .btn.right {
    display: none;
  }
  .road div{
    margin: 5vw 0;
    width: auto;
    height: auto;
  }
  .road div .road01{
    width: 80vw;
    height: 57vw;
  }
  .road div .road02{
    width: 80vw;
    height: 57vw;
  }
  .road div .road03{
    width: 80vw;
    height: 57vw;
  }
  .road div .road04{
    width: 80vw;
    height: 57vw;
  }
  .road div .road05{
    width: 80vw;
    height: 57vw;
  }
  .Hplan_and_video{
    width: 100vw;
    font-weight: 100;
    font-size: 6vw;
  }
  .text_Here_are_opinions{
    width: 55%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    text-align: center;
  }
  .text_Here_are_opinions h1{
    font-size: 7vw;
    font-weight: 100;
  }
  .text_Here_are_opinions .OPClints{
    font-size: 5.5vw;
    font-weight: 100;
  }
  .text_Here_are_opinions .OPClintsP{
    font-size: 3vw;
    font-weight: 100;
  }
  .text_Here_are_opinions img {
    height: 7vw;
  }
  .image_Here_are_opinions{
    width: 35%;
  }
  .image_Here_are_opinions div {
    height: 15vw;
    width: 100%;
    margin: 1vw 0;
    border-radius: 2vw;
  }
  .n1 h5{
    font-size: 2vw;
  }
  .s1 img {
    height: 1.5vw;
    transform: translateY(-1.5vw);
  }
  .n2 h5{
  font-size: 2vw;
  }
  .s2 img {
    height: 1.5vw;
    transform: translateY(-1.5vw);
  }
  .n3 h5{
  font-size: 2vw;
  }
  .s3 img {
    height: 1.5vw;
    transform: translateY(-1.5vw);
  }
  .img_end h1{
    font-size: 4vw;
    font-weight: 100;
    width: 50vw;
    transform: translate(10vw, 10vw);
  }
  .img_end{
    height: auto;
    width: 100%;
    background-color: #121516;
    padding-top: 5vw;
    padding-bottom: 5vw;
  }
  .img_end div{
    height: 50vw;
    width: 50vw;
  }
  footer {
         padding: 40px 15px 15px;
     }

     .web_services {
         gap: 12px;
         margin-bottom: 35px;
     }

     .web_services a {
         padding: 12px 25px;
         border-radius: 12px;
     }

     .web_services h1 {
         font-size: 13px;
         letter-spacing: 1px;
     }

     .strok {
         width: 85%;
         margin: 30px auto;
     }

     .contact {
         margin-bottom: 35px;
     }

     .contact > a {
         font-size: 20px;
         letter-spacing: 2px;
         padding: 10px 25px;
         margin-bottom: 25px;
     }

     .acounts {
         gap: 18px;
     }

     .acounts a {
         width: 52px;
         height: 52px;
     }

     .acounts svg {
         width: 24px;
         height: 24px;
     }

     .email {
         flex-direction: column;
         align-items: center;
         gap: 15px;
         margin-bottom: 30px;
     }

     .email a {
         width: 100%;
         max-width: 320px;
         text-align: center;
         padding: 12px 20px;
         font-size: 14px;
     }

     .email h1 {
         font-size: 14px;
     }

     .footer_bottom {
         grid-template-columns: 1fr;
         padding: 20px 15px;
         gap: 20px;
         text-align: center;
     }

     .footer_left,
     .footer_center,
     .footer_right {
         align-items: center;
     }

     .footer_center {
         order: 2;
     }

     .footer_left {
         order: 1;
     }

     .footer_right {
         order: 3;
     }

     .copyright {
         font-size: 13px;
         padding: 8px 16px;
         justify-content: center;
     }

     .copyright span {
         font-size: 14px;
     }

     .version {
         padding: 10px 20px;
         font-size: 14px;
     }

     .company_name {
         font-size: 14px;
         padding: 8px 16px;
     }

     .license {
         font-size: 11px;
         padding: 6px 12px;
     }

     .update_date {
         font-size: 12px;
         padding: 7px 16px;
     }

     .status {
         font-size: 11px;
         padding: 6px 12px;
     }

     .made_with,
     .powered_by {
         font-size: 12px;
         padding: 7px 16px;
     }

     /* إلغاء التحويلات على الهوفر للشاشات الصغيرة */
     .copyright:hover,
     .company_name:hover,
     .license:hover,
     .update_date:hover,
     .status:hover {
         transform: translateY(-3px);
     }

     .version:hover {
         transform: translateY(-3px) scale(1.02);
     }

     .acounts a:hover {
         transform: translateY(-8px) rotate(180deg);
     } 
  
    
  
    /* زر القائمة (الهامبرغر) */
  .menu-toggle {
    display: block;
    transform: translate(-6vw, 3vw);
    font-size: 8vw;
    z-index: 2;
    cursor: pointer;
  }
  
  /* القائمة الرئيسية - مخفية في البداية */
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 0;
    left: 0;
    width: 108vw;
    padding-top: 15vw;
    padding-bottom: 2vw;
    background-color: #292e32ec;
    border-bottom-left-radius: 2vw;
    align-items: center;
    z-index: 1;
  }
  
  /* عرض القائمة عند تفعيلها */
  .nav-links.active {
    display: flex;
    flex-direction: column;
  }
  
  /* عناصر القائمة */
  .nav-links li {
    margin: 10px 0;
  }
  
  /* الروابط داخل القائمة */
  .nav-links li .A01 {
    padding: 0;
    margin: 0;
    color: white;
    text-decoration: none;
    transform: translateX(4vw);
  }
  
  /* السهم الصغير لأسفل - يظهر فقط في الموبايل */
  .down {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 5px;
    transition: transform 0.3s ease;
  }
  
  /* دوران السهم عند الفتح */
  .down.rotated {
    transform: rotate(180deg);
  }
  
  /* قائمة الخدمات المنسدلة - مخفية في البداية */
  .dropdown {
    display: none;
    position: relative;
    width: 100%;
    background-color: #292e325d;
    box-shadow: 0 2px 10px #00000033;
    border-radius: 1vw;
    padding: 1vw ;
    z-index: 2;
    margin: 2vw 0;
  }
  .down {
    height: 4vw;
    margin: auto;
    width:  auto;
  }
  /* عند تفعيلها */
  .dropdown.show {
    display: block;
  }
  
  /* عناصر القائمة المنسدلة */
  .dropdown li {
    padding: 6px 12px;
    margin: 10px;
    color: white;
    cursor: pointer;
  }
  
  .dropdown li:hover {
    background-color: #23272b;
  }
  
  /* تنسيق خاص بقائمة الخدمات */
  .services-menu {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    transform: translateX(-2vw);
  }
  .whatsapp-btn {
  font-size: 7vw;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12vw;
  height: 12vw;
  right: 8vw;
  bottom: 8vw;
  }
  .whatsapp-btn i{
    height: auto;
  }
  /*---------------🟣----------🟣---------------🟣 works 🟣----------------🟣------------🟣---------------------------*/
  .works{
    height: auto;
    padding: 5vw 0 0 0;
    padding-bottom: 20vw;
  }
  .text_works{
    width: 100%;
    height: auto;
    padding-top: 20vw;
    padding-bottom: 5vw;
  }
  .Boxs_Blog{
    width: 100%;
    height: auto;
    padding: 5vw 0;
    display: flex;
    flex-direction: column;    
  }
  .Boxs_Blog div{
    transition: 0.3s ease;
    height: 50vw;
    width: 90vw;
    margin: 2vw 0;
    background-size: 100%;
  }
  .Blog_P_I{
    display: flex;
    flex-direction: column;
  }
  .Boxs_Blog_P{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-content: center;
  }
  .Boxs_Blog_P p{
    color: white;
    font-size: 3.5vw;
    font-weight: 100;
    padding: 2vw;
    line-height: 3vw;
  }
  .Boxs_Blog_P h1{
    color: #008EFF;
    font-size: 4vw;
    font-weight: 100;
    font-family: 'Rostack';
    margin: 1vw;
  }
  .Boxs_Blog div:hover{
    scale: 1.05;
    transition: 0.3s ease;
  }
  .J25{
    width: 100%;
    padding: 3vw 8vw;
    height: auto;
    background-color: #121516;
  }
  .J25 h2{
    font-size: 4vw;
    text-align: center;
  }
  .text_works h1{
    color: #008EFF;
    font-family: 'Rostack';
    margin: auto;
    font-size: 8vw;
    text-align: center;
    font-weight: 200;
    text-shadow: 0 0 5px ;
  }
  .text_works h3{
    max-width: 90%;
    font-size: 3vw;
    margin: 2vw 0;
  }
  .buttons_works{
    height: auto;
    padding-top: 3vw;
    padding-bottom: 3vw;
  }
  .buttons_works button {
    margin: 1vw 0.2vw;
    padding: 3vw 2vw;
    height: auto;
    font-size: 3.3vw;
  }
  .reel1-bg, .reel2-bg, .reel3-bg, .reel4-bg, .reel5-bg, .reel6-bg, .yt1-bg, .yt2-bg, .yt3-bg, .motion1-bg, .motion2-bg, .motion3-bg, .motion4-bg, .motion5-bg, .motion6-bg     {
    height: 50vw;
    width: 80vw;
  }
  
/*--------------------------------------------------------------*/

  .swiper{
    display: none;
  }
  /*---------------🟣----------🟣----------🟣 Subscriptions 🟣-------------🟣------------🟣---------------------------*/
  .Subscriptions{
    padding: 7vw 0 43vw 0;
    height: auto;
  }
  .Subscriptions_box{
    height: auto;
    padding-bottom: 50vw;
    margin: 2vw 0;
  }
  .button-container {
    width: 100%;
    height: auto;
    padding-bottom: 3vw;
    padding-top: 3vw;
  }
  .main-button.red-button{
    height: auto;
    font-size: 5vw;
    padding: 3vw 1vw;
    font-weight: 900vw;
  }
  .main-button.green-button{
    height: auto;
    font-size: 5vw;
    padding: 3vw 1vw;
  }
  .sub-buttons button {
    padding: 1vw 9.5vw;
    border-radius: 0.3vw;
    height: auto;
    width: auto;
    font-size: 6vw;
  }
  .packages03 {
    gap: 20px;
    height: auto;
    width:  auto;
    padding-top: 5vw;
  }
  .package02 {
    background-color: #00264e;
    padding: 2vw;
    border-radius: 10px;
    width: 90vw;
    height: 80vw;
  }
  .package02 h3 {
    font-size: 8vw;
    width: 90vw;
    padding: 1vw 2vw;
    height: auto;
  }
  .package02 p b{
    font-size: 6vw;
    width: 90vw;
  }
  .package02 .TGS{
    background-color: #012144;
    width: 90vw;
    padding: 0vw 5vw ;
    text-align: center;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    cursor: default;
  }
  .package02 .TWS{
    background-color: #00264e;
    width: 90vw;
    text-align: center;
    margin: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3vw;
    cursor: default;
  }
  .package02 .gold{
    box-shadow: 0 1vw 1vw 0.2vw #008EFF;
  }
  .Info{
    background-color: #121516;
    width: 100%;
    height: auto;
    padding: 2vw 0;
    box-shadow: 0 1vw 2vw 0.5vw rgba(0, 0, 0, 0.514);
  }
  .Info h1{
    font-size: 6vw;
  }
  .Info p{
    font-size: 2.5vw;
    padding: 0.2vw 2vw;
  }
  .packages {
    gap: 5vw;
    display: flex;
    flex-direction: column;
    padding-top: 10vw ;
  }
  .package{
    width: 90vw;
    height: 80vw;
    padding: 0;
  }
  .package h3 {
    font-size: 8vw;
    width: 90vw;
    height: 80vw;
    padding-top: 3vw ;
  }
  .package p b{
    text-align: center;
    font-size: 5vw;
  }
  .TGS{
    width: 100%;
    font-size: 4vw;
    color: white;
  }
  .TWS{
    width: 100%;
    font-size: 4vw;
    color: rgb(153, 153, 153);
 }
 .Information_about_me{
    width: 100%;
    height: 235vw;
    padding: 0;
    flex-direction: column;
  }
  .Information_about_img_address{
    width: 100%;
    height:   100%;
    z-index: 2;
  }
  .Information_about_Details_about_me{
    width: 100%;
    height: auto;
    padding: 5vw 0;
    z-index: 3;
    position: relative;
  }
  .My_accounts{
    width: 100%;
    height: auto;
    padding: 2vw 0;
    margin: auto;
    background-color: #121516;
    margin-top: 5vw;
  }
  .instagram{
    width: 14vw;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 0 1vw;
    padding: 1vw;
  }
  .Followers{
    width: auto;
    height: auto;
  }
  .Followers h3{
    font-size: 8vw;
    text-align: center;
  }
  .Followers_icon{
    height: 8vw;
    width: 8vw;
    background-size: 8vw;
  }
  .icon_instagram, .icon_facebook, .icon_tiktok, .icon_youtube, .icon_linkedin, .icon_x{
    width: 8vw;
    height: 8vw;
    background-position: center;
    background-size: 8vw;
    background-repeat: no-repeat;
  }
  .Who_am_I{
    background-color: #1E2225;
    width: 90%;
    height: auto;
    border-radius: 1vw;
    margin: 4vw 0;
  }
  .Who_am_I h1{
    font-size: 8vw;
    margin: auto;
    padding: 1vw;
    text-align: center;
    background-color: #121516;
    border-radius: 1vw 1vw 0 0;
  }
  .Who_am_I p{
    color: #ffffff;
    font-weight: 100;
    font-size: 3vw;
    margin: 2vw;
    text-indent: 1vw;
  }
  .Information_about_img{
    width: 100%;
    height:100%;
     -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 10%, rgba(0, 0, 0, 0) 70% ) ;
    background-image: url(../image/photo1.jpg);
    background-size: 100%;
  }
  .about_me{
    height: auto;
    width: 100%;
    position: relative;
    padding-top: 0vw;
    padding-bottom: 9vw;
  }
  .Information_about_address h1{
    font-size:7vw;
    z-index: 1;
    text-align: center;
    margin: auto;
    width: 100%;
    padding: 2vw;
  }
  .Information_about_address h2{
    color: #007bff;
    font-weight: 100;
    font-size: 6vw;
    margin: auto;
    width: auto;
    text-align: center;
  }
  .Information_about_address{
    width: 100%;
    height: auto;
    background-color: #121516;
    padding: 2vw;
    flex-direction: column;
    transform: translateY(95vw );
    z-index: 1 ;
    position: relative;
  }
  .correct_about_me{
    width: 10vw;
    height: 10vw;
    position: absolute;
    background-size: 4.5vw;
    transform: translateY(3vw) translateX(57vw);
  }
  .My_accounts_on_freelancing_websites{
    background-color: #16191b;
    width: 100%;
    height: auto;
    padding: 2vw 0;
    flex-wrap: wrap;
    gap: 4vw ;
  }
  .mostaql ,.khamsat, .fiverr, .freelancer, .upwork{
    width: 40vw;
    height: 50vw;
    margin: 0 3vw;
  }
  .photoprofile , .photoprofile_fiverr, .photoprofile_freelancer , .photoprofile_upwork{
    width: 20vw;
    height: 20vw;
  }
  .mostaql h1 ,.khamsat h1 , .fiverr h1 , .freelancer h1, .upwork h1 {
    font-size: 7vw;
    font-weight: 100;
  }
  .star {
    margin: 0 0 1vw 0;
    font-size: 5vw;
  }
  .star01{
    width: 3vw;
    height: 3vw;
  }
  .Browse_mostaql ,.Browse_khamsat ,.Browse_fiverr ,.Browse_freelancer ,.Browse_upwork{
    height: auto;
    width: 20vw;
    font-size: 2vw;
    background-color: #16191b;
  }
  .HMy_lvl{
    width: 100%;
    height: auto;
    padding: 3vw 0;
    background-color: #16191b;
  }
  .HMy_lvl h1 {
    font-size: 7vw;
    margin: auto;
    text-align: center;
    padding: 2vw 0;
  }
  .My_lvl{
    width: 100%;
    height: auto;
    padding: 5vw 0;
    background-color: #16191b;
  }
  .skill {
    width: auto;
    height: auto;
    margin: auto;
  }
  .skill_div{
    width: auto;
    height: auto;
  }
  .circle-container {
    position: relative;
    width: 30vw;
    height: 30vw;
  }
  .circle::before {
    width: 25vw;
    height: 25vw;
  }
  .icon-box_PS ,.icon-box_AE ,.icon-box_PR ,.icon-box_IL ,.icon-box_FG ,.icon-box_BD {
    width: 12vw;
    height: 12vw;
    padding: 2vw;
    background-color: #007bff00;
  }

  .percent {
    margin-top: 10px;
    font-size: 0vw;
    font-weight: bold;
  }
  .header_youtube_video{
    height: auto;
    padding-top: 8vw;
    padding-top: 20vw;
    flex-direction: column;
  }
  .youtube_video_box01{
    width: 100%;
    height: auto;
    padding: 3vw 0;
    flex-direction: column;
    background-color: #16191b;
    display: flex;
    justify-content: center;
  }
  .youtube_video_box02{
    width: 90vw;
    height: 60vw;
    margin: auto;
    box-shadow: 1vw 1vw 0vw 0.2vw #007bff;
    margin: 5vw 1vw;
  }
  .address01{
    width: 100%;
    height: 40vw;
    margin: 4vw 0;
    padding: 5vw 0;
    display: flex;
    flex-direction: column;
  }
  .address_service{
    text-align: center;
  }
  .address_service h1 {
    font-size: 7vw;
    padding: 2vw;
    text-align: center;
    margin: 1.5vw 0;
  }
  .Seller_information{
    width: 100%;
    height: 70%;
    justify-content: center;
    margin: auto;
  }
  .Seller_information img {
    height: 100%;
    border-radius: 50%;
  }
  .Seller_information h2 {
    color: #007bff;
    margin: 0 1vw;
    font-weight: 100;
    font-size: 3.8vw;
  }
  .Seller_information h2 b {
    color: whitesmoke;
    font-size: 4vw;
  }
  .videoS01{
    background-color: #D9D9D9;
    box-shadow: 0 0 6px 1px;
    width: 90vw;
    height: 52vw;
    border-radius: 1vw;
    overflow: hidden;
    margin: auto  ;
  }
  .VSNH{
    width: 90vw;
    height: 52vw;
    border-radius: 1vw;
  }
  .Project_details_video .video{
    width: 90vw;
    height: 52vw;
    margin: 1vw 0;
  
  }
  .Service_details{
    margin: 3vw 0;
    padding: 5vw 0;
    flex-direction: column;
  }
  .Client{
    width: 90vw;
    height: 22vw;
    border-radius: 0vw  0 10vw 10vw;
    box-shadow: 0vw 1vw 0 0.5vw #007bff;
  }
  .ic{
    width: 20vw;
    height: 20vw;
  }
  .img_clients02 , .img_clients , .img_clients03 , .img_clients04{
    width: 18vw;
    height: 18vw;
    background-size: 37vw;
  }
  .img_clients{
    width: 18vw;
    height: 18vw;
    background-size: 20vw;
  }
  .dc{
    width: 70vw;
    height: 22vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .dc h1{
    color: white;
    font-size: 5vw;
  }
  .dc h2{
    font-size: 4vw;
  }
  .img_clients07{
    background-color: #007bff;
    width: 17vw;
    height: 17vw;
    background-size: 17vw;
  }
  .img_clients06{
    background-color: #007bff;
    width: 17vw;
    height: 17vw;
    background-size: 17vw;
  }
  .img_clients05{
    background-color: #007bff;
    width: 17vw;
    height: 17vw;
    background-size: 17vw;
  }
  .Description{
    width: 90vw;
    height: auto;
    margin: auto;
  }
  .Project_details_Description{
    width: 100%;
    height: auto;
    padding: 5vw 0;
  }
  /*------------------ جدول ------------------*/
  .pricing-table {
    width: 90vw;
    margin: 5vw 0;
    box-shadow: -1vw -1vw 0vw 1vw #D9D9D9;
  }

  .pricing-table th,
  .pricing-table td {
    font-size: 3.5vw;
  }
  .check img {
    width:   5vw;
    height:  5vw;
  }
  .blog{
    height: auto;
    padding: 15vw 0;
  }
  .Project_details{
    height: auto;
    padding: 20vw 0;
  }
  .Project_details_video{
    width: 100%;
    padding: 3vw 0;
    height: auto;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .Project_details_box{
    width: 100%;
    height: auto;
    padding: 4vw 0;
    justify-items: center;
    flex-direction: column;
  }
  .address_project{
    display: none;
  }
  .swiper.mySwiper{
    display: none;
  }
  .Here_are_opinions{
    height: auto;
    padding: 15vw 1vw;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .Description h1 {
    font-size: 5vw;
    font-weight: 100;
  }
  .Description p {
    font-size: 4vw;
    font-weight: 100;
    line-height: 3.2vw ;
  }
  .Description ul li {
    font-size: 3.3vw;
    margin: 0.5vw 0;
    width: auto;
    height: auto;
    font-weight: 100;
  }
  .video01 {
    width: 17vw;
    height: 8vw;
    font-size: 2.5vw;
  }
   /*-------------------- log-in.php ----------------------*/
    .Log-in-all{
        flex-direction: column;
        width: 80%;
        margin-top: 5vw;
        overflow: hidden;
        border-radius: 2vw;
        
    }
    .Log-in-img {
      width: 100%;
      height: 15vw;
    }
    .form-group{
        margin-bottom: 2vw ;
    }
    .Log-in-container {
      background-color: #222222;
      width: 100%;
      text-align: center;
      height: auto;
    }
    .Log-in-container h1  {
      font-size: 6vw;
      display: none;
    }
    .Log-in-container p {
      font-size: 3vw;
      padding: 0 0 2vw 0;
    }
    .form-group .labelEmail ,.form-group  .labelPassword {
      font-size: 4vw;
      color: white;
      margin: 0.1vw;
      padding: 0;
    }
    .Log-in-container .inputemail,
    .Log-in-container .inputPassword {
      font-size:  2.5vw;
      height: 4vw;
      width: 35vw;
      max-width: 100%;
      text-align: center;
    }
    .submit{
      background-color: #007bff38;
      border-radius: 0.5vw;
      border: 0.15vw solid #2A7DD8;
      height: 4vw;
      width: 20vw;
      padding: 0.2vw 0.5vw;
      transition: 0.3s ease-in-out;
      color: white;
      font-size: 2.5vw;
    }

   
     
     
     /*-------------------- log-in.php ----------------------*/
  



}