@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;700;900&family=Inter:wght@400;700;900&display=swap');

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  font-family: 'Cairo';
      font-weight: 700; /* نتخن الخط شوية في العربي عشان يبان */
  
}
/* ===== Colours ===== */
:root{
    --body-color: #E4E9F7;
    --nav-color: #4070F4;
    --side-nav: #010718;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
    --text-color2: rgb(0, 0, 0);
    --color-secura:#ff4500;
    --color-tech: rgb(37, 37, 34);
    --color-mix: #e20de9;
    --color-sun:#110673;
    --text-color4:#000;
     
    
}
body.dark{
    --body-color: #18191A;
    --nav-color: #242526;
    --side-nav: #242526;
    --text-color: #CCC;
    --search-bar: #242526;
    --text-color2: yellow;
    --color-secura:rgb(253, 253, 253);
    --color-tech: orangered;
    --color-mix: #1fe90d;
    --color-sun:#0f0e0e;
    --text-color4:#fff;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Cairo';
      font-weight: 700; /* نتخن الخط شوية في العربي عشان يبان */
}
body.dark{
    height: max-content;
    background: url(../images/Starry-Night.jpg) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Cairo';
      font-weight: 700; /* نتخن الخط شوية في العربي عشان يبان */
}
body {
height: max-content;
    background: url(../images/Sky.jpg) no-repeat center;
    background-attachment: fixed;
    background-size: cover;
    font-family: 'Cairo';
    margin-top: 110px;
      font-weight: 700; /* نتخن الخط شوية في العربي عشان يبان */
}
nav .nav-bar.site-logo {
    display:flex;
    align-items:center;
    gap:8px; /* مسافة بينهم */
    font-size:28px;
    font-weight:900;
}

img .sicura,img .tech{ transition: opacity 1.8s ease-in-out;}
body.dark .sicura { width: 230px; display: block; height: 45px;  } /* ازرق */
body.dark .tech {  display: none; } /* برتقالي */
body .sicura {  display: none;  } /* ازرق */
body .tech { width: 230px; display: block; } /* برتقالي */
nav .site-logo:hover{margin-top: -10px;}
nav .nav-bar.flag-icon { font-size:24px; margin-left:5px; }

.image-generator {
  height: 65vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url("../images/domotica-1024x683.jpg");
  background-size: cover;
  background-position: center;
}
.image-generator::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.5;
  background: #121212;
}
.image-generator .content {
  position: relative;
  color: #fff;
  padding: 0 15px;
  max-width: 760px;
  text-align: center;
}
.image-generator h1 {
  font-size: 2.5rem;
  font-weight: 700;
}
.image-generator p {
  margin-top: 10px;
  font-size: 1.35rem;
}
.image-generator .generate-form {
  height: 56px;
  padding: 6px;
  display: flex;
  margin-bottom: 15px;
  background: #fff;
  align-items: center;
  border-radius: 30px;
  margin-top: 45px;
  justify-content: space-between;
  color: var(--nav-color);
}
.generate-form .prompt-input {
  width: 100%;
  height: 100%;
  outline: none;
  padding: 0 17px;
  border: none;
  background: none;
  font-size: 1rem;
  border-radius: 30px;
  margin-left: 25px;
 

}
.generate-form .controls {
  display: flex;
  height: 100%;
  gap: 15px;
}
.generate-form .img-quantity {
  outline: none;
  border: none;
  height: 44px;
  background: none;
  font-size: 1rem;
}
.generate-form .generate-btn {
  font-size: 1rem;
  outline: none;
  border: none;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  height: 100%;
  padding: 0 25px;
  border-radius: 30px;
  background: #4949E7;
}
.generate-form .generate-btn[disabled] {
  opacity: 0.6;
  pointer-events: none;
}
.generate-form button:hover {
  background: #1d1de2;
}
.image-gallery {
  display: flex;
  gap: 15px;
  padding: 0 15px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 50px auto;
  max-width: 1250px;
}
.image-gallery .img-card {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  background: #f2f2f2;
  border-radius: 4px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  width: 285px;
}
.image-gallery .img-card img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.image-gallery .img-card.loading img {
  width: 80px;
  height: 80px;
}
.image-gallery .img-card .download-btn {
  bottom: 15px;
  right: 15px;
  height: 36px;
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s ease;
}
.image-gallery .img-card .download-btn img {
  width: 14px;
  height: 14px;
}
.image-gallery .img-card:not(.loading):hover .download-btn {
  opacity: 1;
  pointer-events: auto;
}
@media screen and (max-width: 760px) {
  .image-generator {
    height: 45vh;
    padding-top: 30px;
    align-items: flex-start;
  }
  .image-generator h1 {
    font-size: 1.8rem;
  }
  .image-generator p {
    font-size: 1rem;
  }
  .image-generator .generate-form {
    margin-top: 30px;
    height: 52px;
    display: block;
    color: var(--nav-color);
  }
  .generate-form .controls {
    height: 40px;
    margin-top: 15px;
    justify-content: end;
    align-items: center;
  }
  .generate-form .generate-btn[disabled] {
    opacity: 1;
  }
  .generate-form .img-quantity {
    color: #fff;
  }
  .generate-form .img-quantity option {
    color: #000;
  }
  .image-gallery {
    margin-top: 20px;
  }
  .image-gallery .img-card:not(.loading) .download-btn {
    opacity: 1;
    pointer-events: auto;
  }
body.dark .sicura { width: 200px; display: block; height: 38px;  } /* ازرق */
body.dark .tech {  display: none; } /* برتقالي */
body .sicura {  display: none;  } /* ازرق */
body .tech { width: 200px; display: block; } /* برتقالي */
nav .nav-bar.flag-icon { font-size:24px; margin-left:5px; }
}
@media screen and (max-width: 500px) {
  .image-gallery .img-card {
    width: 100%;
  }
   body.dark .sicura { width: 160px; display: block; height: 32px;  } /* ازرق */
body.dark .tech {  display: none; } /* برتقالي */
body .sicura {  display: none;  } /* ازرق */
body .tech { width: 160px; display: block; } /* برتقالي */
  
}
@media screen and (max-width: 460px) {
body.dark .sicura { width: 140px; display: block; height: 28px;  } /* ازرق */
body.dark .tech {  display: none; } /* برتقالي */
body .sicura {  display: none;  } /* ازرق */
body .tech { width: 140px; display: block; } /* برتقالي */
nav .nav-bar.flag-icon { font-size:24px; margin-left:5px; }
}
@media screen and (max-width: 380px) {
 body.dark .sicura { display: none;   } /* ازرق */
body.dark .tech {  display: none; } /* برتقالي */
body .sicura {  display: none;  } /* ازرق */
body .tech {  display: none; } /* برتقالي */
nav .nav-bar.flag-icon { font-size:24px; margin-left:5px; }
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'cairo';
    transition: all 0.4s ease;
}
/* ===== Colours ===== */
:root{
    --body-color: #E4E9F7;
    --nav-color: #4070F4;
    --side-nav: #010718;
    --text-color: #FFF;
    --search-bar: #F2F2F2;
    --search-text: #010718;
    --text-color2: rgb(0, 0, 0);
    --text-color3: rgb(0, 0, 0);
    --card-color:#4070f4;
    --text-dark:#000000;

    
}

body.dark{
    --body-color: #18191A;
    --nav-color: #242526;
    --side-nav: #242526;
    --text-color: #CCC;
    --search-bar: #242526;
    --text-color2: yellow;
    --text-color3: rgb(167, 167, 163);
    --card-color:rgba(255, 255, 255, 0.05);
    --text-dark:#fff;
}
nav{
    position: fixed;
    top: 0;
    left: 0;
    height: 70px;
    width: 100%;
    background-color: var(--nav-color);
    z-index: 100;
    border-radius: 2px 2px 30px 2px;
    transition: all 0.8s ease-in-out;
    
}
body.dark nav{
    border: 1px solid #393838;
    border-radius: 2px 2px 2px 30px;
    transition: all 0.8s ease-in-out;
}
nav .nav-bar{
    position: relative;
    height: 100%;
    max-width: 1100px;
    width: 100%;
    background-color: var(--nav-color);
    margin: 0 auto;
    padding: 0 30px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.8s ease-in-out;
}
nav .nav-bar .sidebarOpen{
    color: var(--text-color);
    font-size: 25px;
    padding: 5px;
    cursor: pointer;
    display: none;
}
nav .nav-bar .logo a{
    font-size: 25px;
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
}
nav .nav-bar .logo a span{
    color:yellow;

}
.menu .logo-toggle{
    display: none;
}
.nav-bar .nav-links{
    display: flex;
    align-items: center;
}
.nav-bar .nav-links li{
    margin: 0 5px;
    list-style: none;
}
.nav-links li a{
    position: relative;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-color);
    text-decoration: none;
    padding: 10px;
}
.nav-links li a:hover{
    color: var(--text-color2);
    font-weight: 500;
    transition: 0.5s ease-in-out;
}
.nav-links li a::before{
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    height: 6px;
    width: 6px;
    border-radius: 50%;
    background-color: var(--text-color);
    opacity: 0;
    transition: all 0.3s ease;
}
.nav-links li:hover a::before{
    opacity: 1;
}
.nav-bar .darkLight-searchBox{
    display: flex;
    align-items: center;
}
.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle,
.darkLight-searchBox .login{
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}
.dark-light i,
.searchToggle i,
.login a{
    position: absolute;
    color: var(--text-color);
    font-size: 22px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.darkLight-searchBox .lang-dropdown ul .img-quantity{
text-decoration: auto;
    font-size: 20px;
    color: var(--text-color);
    transition: all 0.3s ease;
    background: none;
    border: none;
    font-size: 18px;
}
.darkLight-searchBox .lang-dropdown ul .img-quantity a{
    color:var(--nav-color);
    cursor: pointer;
}

.darkLight-searchBox .lang-dropdown ul .img-quantity{
  display: flex;
}
.darkLight-searchBox .lang-dropdown ul .img-quantity li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
.darkLight-searchBox .lang-dropdown ul .img-quantity li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}


.dark-light i.sun{
    opacity: 0;
    pointer-events: none;
}
.dark-light.active i.sun{
    opacity: 1;
    pointer-events: auto;
}
.dark-light.active i.moon{
    opacity: 0;
    pointer-events: none;
}
.searchToggle i.cancel{
    opacity: 0;
    pointer-events: none;
}
.searchToggle.active i.cancel{
    opacity: 1;
    pointer-events: auto;
}
.searchToggle.active i.search{
    opacity: 0;
    pointer-events: none;
}
.searchBox{
    position: relative;
}
.searchBox .search-field{
    position: absolute;
    bottom: -85px;
    right: 5px;
    height: 50px;
    width: 300px;
    display: flex;
    align-items: center;
    background-color: var(--nav-color);
    padding: 3px;
    border-radius: 6px;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}
.searchToggle.active ~ .search-field{
    bottom: -74px;
    opacity: 1;
    pointer-events: auto;
}
.search-field::before{
    content: '';
    position: absolute;
    right: 14px;
    top: -4px;
    height: 12px;
    width: 12px;
    background-color: var(--nav-color);
    transform: rotate(-45deg);
    z-index: -1;
}
.search-field input{
    height: 100%;
    width: 100%;
    padding: 0 45px 0 15px;
    outline: none;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    color: var(--search-text);
    background-color: var(--search-bar);
}
body.dark .search-field input{
    color: var(--text-color);
}
.search-field i{
    position: absolute;
    color: var(--nav-color);
    right: 15px;
    font-size: 22px;
    cursor: pointer;
}
body.dark .search-field i{
    color: var(--text-color);
}
@media (max-width: 790px) {
    nav .nav-bar .sidebarOpen{
        display: block;
    }
    .menu{
        position: fixed;
        height: 100%;
        width: 320px;
        left: -100%;
        top: 0;
        padding: 20px;
        background-color: var(--side-nav);
        z-index: 100;
        transition: all 0.4s ease;
    }
    nav.active .menu{
        left: -0%;
    }
    nav.active .nav-bar .navLogo a{
        opacity: 0;
        transition: all 0.3s ease;
    }
    .menu .logo-toggle{
        display: block;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .logo-toggle .siderbarClose{
        color: var(--text-color);
        font-size: 24px;
        cursor: pointer;
    }
    .nav-bar .nav-links{
        flex-direction: column;
        padding-top: 30px;
    }
    .nav-links li a{
        display: block;
        margin-top: 20px;
    }
}


/*-------*/
.lang-switcher {
position: relative;
display: inline-block;
font-family: 'Inter', sans-serif;
}

.lang-btn {
display: flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: white;
padding: 8px 14px;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
font-size: 14px;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}

.lang-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: #3b82f6;
transform: translateY(-2px);
}

.lang-btn svg {
transition: transform 0.3s ease;
}

.lang-switcher.active .lang-btn svg {
transform: rotate(180deg);
}

.lang-dropdown {
position: absolute;
top: 45px;
right: 0;
 background-color: var(--nav-color);
  margin-top: 15px;
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 6px;
min-width: 160px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}

.lang-switcher.active .lang-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}

.lang-option {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
color: #e5e7eb;
cursor: pointer;
font-size: 14px;
transition: all 0.2s ease;
}
.lang-option img{
    width: 20px;
    height: 15px;
}

.lang-option:hover {
background: #3b82f6; /* الازرق متاعك */
color: white;
}

.lang-option span {
font-size: 18px;
}

/* للنسخة الفاتحة */
body.light .lang-btn {
background: rgba(0, 0, 0, 0.05);
border: 1px solid rgba(0, 0, 0, 0.1);
color: #111827;
}
body.light .lang-dropdown {
background: white;
border: 1px solid #e5e7eb;
}
body.light .lang-option {
color: #374151;
}
body.light .lang-option:hover {
background: #3b82f6;
color: white;
}

/* about */ 

.about-hero{
position: relative;
height: 60vh;
background: linear-gradient(135deg, #0ea5e9 0%, #6366f1 100%),
url('https://images.unsplash.com/photo-1557804506-669a67965ba0?q=80&w=2070') center/cover;
background-blend-mode: overlay;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #fff;
margin-top: 30px;
}
.about-overlay{
position: absolute;
inset: 0;
background: rgba(2,6,23,0.6);
}
.about-content{ position: relative; z-index: 2; }
.about-content h1{ font-size: 48px; margin-bottom: 10px; }
.about-content p{ font-size: 20px; opacity: 0.9; }

.about-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
padding: 80px 20px;
}
.about-card{
backdrop-filter: blur(10px);
border: 1px solid rgba(255,255,255,0.1);
padding: 40px 30px;
border-radius: 20px;
text-align: center;
transition: 0.3s;
color: var(--text-color3);
}
.about-card:hover{ transform: translateY(-10px); border-color: #0ea5e9; }
.about-card .icon{ font-size: 40px; margin-bottom: 15px; }


.about-stats{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 80px 20px;
background: #0f172a;
}
.stat-card{
background: rgba(14, 165, 233, 0.1);
backdrop-filter: blur(10px);
border: 1px solid rgba(14, 165, 233, 0.3);
border-radius: 20px;
padding: 40px 20px;
text-align: center;
color: #fff;
transition: 0.3s;
}
.stat-card:hover{ transform: scale(1.05); border-color: #0ea5e9; }
.stat-card .icon{ font-size: 50px; margin-bottom: 15px; }
.stat-card h2{ font-size: 48px; color: #0ea5e9; margin: 10px 0; }

.sCarde{
  display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 20px 20px; 
    
}









stats-section{
padding: 80px 20px;
background: #0f172a;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 30px;
}

.stat-card{
background: rgba(255,255,255,0.05);
backdrop-filter: blur(12px);
border: 1px solid rgba(14,165,233,0.3);
border-radius: 24px;
padding: 40px 30px;
text-align: center;
color: var(--text-color3);
transition: 0.4s;
position: relative;
overflow: hidden;
}
.stat-card::before{
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: conic-gradient(from 0deg, transparent, #0ea5e9, transparent);
animation: rotate 4s linear infinite;
opacity: 0;
transition: 0.4s;
}
.stat-card:hover::before{ opacity: 0.3; }
.stat-card:hover{ transform: translateY(-10px); border-color: #0ea5e9; }

.stat-icon{ font-size: 50px; margin-bottom: 15px; }
.stat-number{ font-size: 52px; font-weight: 800; color: #0ea5e9; margin: 10px 0; }
.stat-label{ font-size: 16px; opacity: 0.8; }

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


/* لوردر لتغير اللغة */


#page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a0f1ece; /* نفس لون الخلفية بتاعت Sicura Tech */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

#page-loader.active {
    opacity: 1;
    visibility: visible;
}

/* الدايرة اللي بتلف */
.spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(0, 212, 255, 0.2); /* ازرق خفيف */
    border-top: 4px solid #00d4ff; /* ازرق Sicura Tech */
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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



#page-loader {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: var(--body-color);
    z-index: 999999999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}
#page-loader.active {
    opacity: 1;
    visibility: visible;
}



/* خلفية سودا للتحميل */
body.dark #preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
     background: url(../images/Starry-Night.jpg) no-repeat center;
     background-size: cover;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999999;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    overflow: hidden;
     background: url(../images/Sky.jpg) no-repeat center;
     background-size: cover;
}


/* النجوم اللي بتدور */
.stars, .stars2, .stars3 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(2px 2px at 40px 70px, #fff, transparent),
        radial-gradient(2px 2px at 50px 160px, #d4eff5, transparent),
        radial-gradient(3px 3px at 130px 40px, #fff, transparent),
        radial-gradient(2px 2px at 200px 200px, #c7dee2, transparent);
    background-size: 300px 300px;
    animation: animStar 50s linear infinite;
}

.stars2 {
    background-size: 500px 500px;
    animation: animStar 100s linear infinite;
    opacity: 0.5;
}

.stars3 {
    background-size: 700px 700px;
    animation: animStar 150s linear infinite;
    opacity: 0.3;
}

@keyframes animStar {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
/* نص SicuraTech */
body.dark .loader-text {
    color: var(--color-secura);
    width: 400px;
    font-weight: 800;
    z-index: 10;
    animation: pulse 1.5s ease-in-out infinite;
    letter-spacing: 3px;
}

.loader-text {
    color: var(--color-secura);
    width: 400px;
    font-weight: 800;
    z-index: 10;
    animation: pulse 1.5s ease-in-out infinite;
    letter-spacing: 3px;
}

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

/* اخفاء البريلودر بعد التحميل */
#preloader.hide {
    opacity: 0;
    visibility: hidden;
    transition: 1s;
}


/*تحريك الوايفاي للشعار */

.logo-container {
  position: relative;
  margin: 0 auto;
}

body .logo-img {
  width: 302px;
  display: block;
}
body.dark .logo-img {
  display: none;
}
body.dark .logo-imgb{
  width: 302px;
  display: block;
}
body .logo-imgb{
  display: none;
}

/* مكان الواي فاي - ظبط top و left حسب مكان البيت في الصورة بتاعتك */
body .wifi {
  position: absolute;
  border: 3px solid #ff8c00; /* لون برتقالي */
  border-color: #ff8c00 transparent transparent transparent;
  border-radius: 50%;
  opacity: 0;
  animation: wifiMove 2s infinite;
}
body.dark .wifi {
  position: absolute;
  border: 3px solid #5a5cf3; /* لون برتقالي */
  border-color: #1279ee transparent transparent transparent;
  border-radius: 50%;
  opacity: 0;
  animation: wifiMove 2s infinite;
}

/* الشرطة الصغيرة */
.wifi1 {
      width: 40px;
    height: 60px;
    top: 20%;
    left: 43.7%;
    animation-delay: 0.1s;
}

/* الشرطة المتوسطة */
.wifi2 {
      width: 55px;
    height: 75px;
    top: 8%;
    left: 41%;
    animation-delay: 0.3s;
}

/* الشرطة الكبيرة */
.wifi3 {
         width: 80px;
    height: 110px;
    top: -5px;
    left: 36.7%;
    animation-delay: 1.5s;
    
}
body .yourhomeh3{
      font-size: 24px;
      color: #000;
}
body.dark .yourhomeh3{
      font-size: 24px;
      color: #f8f4f4;
}

/* الحركة */
@keyframes wifiMove {
  0% { opacity: 0; transform: translateY(5px); }
  30% { opacity: 1; transform: translateY(0); }
  70% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-5px); }
}


/* اللغة */
#lang-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(10, 15, 30, 0.9);
    backdrop-filter: blur(5px);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
}
#lang-overlay.active {
    opacity: 1;
    visibility: visible;
}
.lang-box { text-align: center;display:contents; }
.lang-box.spinner {
    width: 50px; height: 50px;
    border: 4px solid rgba(0,212,255,0.2);
    border-top: 4px solid #00d4ff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px;
    
}
.lang-box p { color: #fff; font-size: 20px; font-family: 'Cairo'; margin: 0 25px;}
@keyframes spin { to { transform: rotate(360deg); } }

/*كود الشات*/

.typing { font-size: 20px; letter-spacing: 3px; animation: blink 1.4s infinite; }
@keyframes blink { 0%, 60%, 100% {opacity:1;} 20% {opacity:0;} }

.product-link {
    display: inline-block;
    margin-top: 5px;
    padding: 6px 12px;
    background: #007bff;
    color: #fff !important;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}
.product-link:hover {
    text-decoration: none;
    color: #ddaedf;
}
    .product-title-link {
    color: #fff;
    text-decoration: none;
}
.product-title-link:hover {
    color: #90c0f3;
    text-decoration: none;
}

/*الصفحة الرئيسية index*/

.features { padding: 0 10%; text-align: center; }
.features h2 { font-size: 36px; margin-bottom: 50px; color: var(--text-dark);}
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
.feature-card { 
  background: rgba(255,255,255,0.05); 
  backdrop-filter: blur(10px);
  padding: 30px; 
  border-radius: 15px; 
  border: 1px solid rgba(255,255,255,0.1);
  transition: 0.3s;
  color: var(--text-dark);
}
.feature-card:hover { transform: translateY(-10px); background: rgba(0,170,255,0.1); }
.feature-card .icon { font-size: 40px; margin-bottom: 15px; }

/* الموبايل */
@media (max-width: 920px) {
  .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
}
@media (max-width: 768px) {
  .features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
}
@media (max-width: 538px) {
  .features-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 30px; }
}

/*الضل البداية*/
.section-fade {
  height: 150px; /* طول التلاشي */
  background: linear-gradient(
    to bottom, 
    rgba(135, 206, 235, 0) 0%,   /* شفاف من فوق - لون السما */
    rgb(9, 9, 25, 75%) 100%     /* غامق من تحت - لون القسم الازرق */
  );
  margin-top: -1px; /* عشان يلزق في اللي بعده */
}

.features-sky {
 /* background: url('images/sky-bg.jpg') no-repeat center/cover;*/
  padding-bottom: 0; /* نشيل البادنج عشان الفاصل يلزق */
}

.about-dark {
  background: #0a0a1abf; /* نفس اللون الغامق بتاعك */
  padding-top: 0;
}
/* الضل النهاية*/




/*فيديو*/

.bg-video{
  width: 100%;
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.5);
}
/*اكمال على الصفحة الرئيسية */

.what-we-do {
  padding: -5px 5%;
    background: #0a0a1abf;
}

.what-container {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap;
  margin-top: 15px;
  font-variant: inherit;
  transform: translateY(20px); /* ينزل من تحت شوية */
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; /* نص ثانية */
}

.what-container.active {
  opacity: 1;
  transform: translateY(0); /* يطلع لمكانه */
  display: flex; /* نظهره */
}

.what-image, .what-text {
  flex: 1;
  min-width: 320px;
  text-align: justify;
}

.what-image img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.5); /* وهج ازرق */
}

.what-text .tag {
  color: #00aaff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
}

.what-text h2 {
  font-size: 36px;
  font-weight: 900;
  margin: 15px 0;
  line-height: 1.3;
  color: cadetblue;
}

.what-text p {
  font-size: 16px;
  color: #bbb;
  line-height: 1.8;
  margin-bottom: 25px;
}

.what-list {
  list-style: none;
  padding: 0;
  margin-bottom: 30px;
}
.what-list li {
  margin-bottom: 12px;
  font-size: 16px;
  color: #CCC;
}

.btn-what {
  background: linear-gradient(90deg, #00aaff, #0077ff);
  color: white;
  padding: 14px 35px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  display: inline-block;
  transition: 0.3s;
}
.btn-what:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 170, 255, 0.3);
}

/* الموبايل */
@media (max-width: 768px) {
  .what-container { flex-direction: column; }
}


/*اكمال الصفحة الرئيسية*/

.home-slider { 
  padding: 25px;
  width: -webkit-fill-available;
     }
.slider-container { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.slider-text,.slider-image { flex: 1; min-width: 550px; color: darkcyan;text-align: justify;}

#slide-img {
  width: 100%;
  height: 350px;
  border-radius: 20px;
  box-shadow: 0 0 40px rgba(0, 170, 255, 0.5);
  transition: opacity 0.5s ease-in-out; /* حركة التلاشي */
}

#slide-title, #slide-desc, #slide-list {
  transition: opacity 0.5s ease-in-out;
}

.btn-slider { background: #00aaff; color: white; padding: 12px 30px;    margin: 25px; border-radius: 8px; text-decoration: none; display: inline-block;}

@media (max-width: 568px) {
  .slider-text,.slider-image { flex: 1; min-width: 350px; color: darkcyan;text-align: justify;}
  #slide-img {
  width: 100%;border-radius: 20px;box-shadow: 0 0 40px rgba(0, 170, 255, 0.5);transition: opacity 0.5s ease-in-out; /* حركة التلاشي */
}
}

/*الصفحة الرئيسية اكمال*/

.services {
  padding: 5px 20px;

  
  text-align: center;
}
.services h2 {
  color: #fff;
  font-size: 36px;
  margin-bottom: 50px;
}
.service-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  max-width: 100%;
  margin: auto;
}
.card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  transition: 0.3s;
  overflow: hidden; /* مهم جدا للقص */
  text-align: center;
  cursor: pointer;
  position: relative;
}
.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.6); /* تأثير اضاءة ازرق */
  background: rgba(0, 170, 255, 0.1);
}
html[dir="rtl"] .card-img  {
  width: 190px;
  height: 72px;
  object-fit: cover; /* تملى الكارت وتتقص الزيادة */
  clip-path: polygon(0 0, 100% 0, 100% 100%,50% 100%); /* ده بيعمل القصة المايلة من تحت */
  transition: 0.8s ease-in-out;
}

.styleimg{
  display: flex;
}

html[dir="ltr"] .card-img {
  flex-direction: row-reverse; 
   width: 190px;
  height: 72px;
  object-fit: cover; /* تملى الكارت وتتقص الزيادة */
  clip-path: polygon(0 0, 50% 0, 100% 100%,0 100%); /* ده بيعمل القصة المايلة من تحت *//* نعكس مكان الصورة والنص */
  transition: 0.8s ease-in-out;
}

.details-box {
  margin-top: 40px;
  padding: 30px;
  border-radius: 15px;
  color: #fff;
  min-height: 150px;
  transition: 0.4s;
}
.card { cursor: pointer; }
.card:hover { transform: scale(1.05); }
.btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 25px;
  background: #00aaff;
  color: #fff;
  border-radius: 8px;
  text-decoration: none;
}

/* HERO TECH */
.hero-tech{
min-height: 100vh;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
padding: 0 8%;
position: relative;
overflow: hidden;
color: #fff;
}
#particles{ position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; }

.hero-content-tech{ z-index:2; }
.badge-live{
background: rgba(239,68,68,0.2);
border: 1px solid #ef4444;
padding: 8px 16px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
}

body.dark .hero-content-tech h1{
font-size: 45px;
line-height: 1.1;
margin: 20px 0;
background: linear-gradient(90deg, #fff, #0ea5e9, #6366f1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 3s infinite;
}

.hero-content-tech h1{
font-size: 45px;
line-height: 1.1;
margin: 20px 0;
background: linear-gradient(90deg, #df986b, #212527, #0005dc);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: gradientMove 3s infinite;
}
@keyframes gradientMove{ 0%,100%{background-position:0%} 50%{background-position:100%} }

body.dark .btn-glow,body.dark .btn-play{
background: linear-gradient(90deg, #0ea5e9, #6366f1);
color: #fff;
padding: 16px 32px;
border-radius: 14px;
font-weight: 800;
text-decoration: none;
box-shadow: 0 0 30px rgba(14,165,233,0.5);
transition: 0.3s;
display: inline-block;
}
.btn-glow,.btn-play {
        background: linear-gradient(90deg, #141413, #042a73);
    color: #fff;
    padding: 16px 32px;
    border-radius: 14px;
    font-weight: 800;
    text-decoration: none;
    box-shadow: 0 0 30px rgb(228 166 112 / 50%);
    transition: 0.3s;
    display: inline-block;
}
.btn-glow:hover{ transform: scale(1.05); box-shadow: 0 0 50px rgba(14,165,233,0.8); }
.btn-play:hover{ transform: scale(1.05); box-shadow: 0 0 50px rgba(14,165,233,0.8); }
.hero-mockup{ position: relative; z-index:2; }
.hero-mockup img{ width: 100%; animation: float 4s ease-in-out infinite; }
@media (max-width: 600px){
  .hero-mockup{ display: none; }
}
@keyframes float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.glow{
position: absolute;
width: 400px; height: 400px;
background: radial-gradient(circle, rgba(14,165,233,0.4) 0%, transparent 70%);
top:50%; left:50%; transform:translate(-50%,-50%);
filter: blur(80px);
z-index:-1;
}

.hero-stats{ display: flex; gap: 40px; margin-top: 50px; }
body.dark .hero-stats h3{ font-size: 36px; color: #0ea5e9; }
.hero-stats h3{ font-size: 36px; color: #3e3736;; }
body.dark .hero-content-tech p{ color:#fdfdfd; }
.hero-content-tech p{ color:#000; }
.wave{ margin-top: -5px; }

/* RTL */
[dir="rtl"].hero-tech{ direction: rtl; }


@media (max-width: 568px) { 
  body.dark .hero-content-tech h1{
    font-size: 35px;
  }
  .hero-content-tech h1{
    font-size: 35px;
  }
}
/*الفوتر*/


footer{
  
  background: #140b5c8c;
  width: 100%;
  bottom: 0;
  left: 0;
  margin-top: 20px;
}
footer::before{
  content: '';
  position: relative;
  left: 0;
  top: 100px;
  height: 1px;
  width: 100%;
  background: #AFAFB6;
  display: block;
}
footer .contentfooter{
  max-width: 1250px;
  margin: auto;
  padding: 30px 40px 40px 40px;
}
footer .contentfooter .topfooter{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}
.contentfooter .topfooter .logo-details{
  color: #fff;
  font-size: 30px;
}
.contentfooter .topfooter .media-icons{
  display: flex;
}
.contentfooter .topfooter .media-icons a{
  height: 40px;
  width: 40px;
  margin: 0 8px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 17px;
  text-decoration: none;
  transition: all 0.4s ease;
}
.contentfooter .topfooter .media-icons a i{

  margin: 10px;
}
.topfooter .media-icons a:nth-child(1){
  background: #4267B2;
}
.topfooter .media-icons a:nth-child(1):hover{
  color: #4267B2;
  background: #fff;
}
.topfooter .media-icons a:nth-child(2){
  background: #1DA1F2;
}
.topfooter .media-icons a:nth-child(2):hover{
  color: #1DA1F2;
  background: #fff;
}
.topfooter .media-icons a:nth-child(3){
  background: #E1306C;
}
.topfooter .media-icons a:nth-child(3):hover{
  color: #E1306C;
  background: #fff;
}
.topfooter .media-icons a:nth-child(4){
  background: #0077B5;
}
.topfooter .media-icons a:nth-child(4):hover{
  color: #0077B5;
  background: #fff;
}
.topfooter .media-icons a:nth-child(5){
  background: #FF0000;
}
.topfooter .media-icons a:nth-child(5):hover{
  color: #FF0000;
  background: #fff;
}
footer .contentfooter .link-boxes{
  width: 100%;
  display: flex;
  justify-content: space-between;
}
footer .contentfooter .link-boxes .boxfooter{
  width: calc(100% / 5 - 10px);
}
.contentfooter .link-boxes .boxfooter .link_name{
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 10px;
  position: relative;
}
.link-boxes .boxfooter .link_name::before{
      content: '';
    position: relative;
    left: 0;
    bottom: -32px;
    height: 2px;
    width: 35px;
    background: #fff;
    display: block;
}
.contentfooter .link-boxes .boxfooter li{
  margin: 6px 0;
  list-style: none;
}
.contentfooter .link-boxes .boxfooter li a{
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  opacity: 0.8;
  transition: all 0.4s ease
}
.contentfooter .link-boxes .boxfooter li a:hover{
  opacity: 1;
  text-decoration: underline;
}
.contentfooter .link-boxes .input-box{
  margin-right: 55px;
}
.link-boxes .input-box input{
  height: 40px;
  width: calc(100% + 55px);
  outline: none;
  border: 2px solid #AFAFB6;
  background: #140B5C;
  border-radius: 4px;
  padding: 0 15px;
  font-size: 15px;
  color: #fff;
  margin-top: 5px;
}
.link-boxes .input-box input::placeholder{
  color: #AFAFB6;
  font-size: 16px;
}
.link-boxes .input-box .Subscribe{
  background: #fff;
  color: #140B5C;
  border: none;
  font-size: 18px;
  font-weight: 500;
  margin: 4px 0;
  opacity: 0.8;
  cursor: pointer;
  width: calc(100% + 55px);
  transition: all 0.4s ease;
}
.input-box .Subscribe:hover{
  opacity: 1;
}
footer .bottom-details{
  width: 100%;
  background: #0F0844;
}
footer .bottom-details .bottom_text{
  max-width: 1250px;
  margin: auto;
  padding: 20px 40px;
  display: flex;
  justify-content: space-between;
}
.bottom-details .bottom_text .imad{
    color: #007bff;
}
.bottom-details .bottom_text span,
.bottom-details .bottom_text a{
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  opacity: 0.8;
  text-decoration: none;
}
.bottom-details .bottom_text a:hover{
  opacity: 1;
  text-decoration: underline;
}
.bottom-details .bottom_text a{
  margin-right: 10px;
}
@media (max-width: 900px) {
  footer .contentfooter .link-boxes{
    flex-wrap: wrap;
  }
  footer .contentfooter .link-boxes .input-box{
    width: 40%;
    margin-top: 10px;
  }
}
@media (max-width: 700px){
  footer{
    position: relative;
  }
  .contentfooter .topfooter .logo-details{
    font-size: 26px;
  }
  .contentfooter .topfooter .media-icons a{
    height: 35px;
    width: 35px;
    font-size: 14px;
    line-height: 35px;
  }
  footer .contentfooter .link-boxes .boxfooter{
    width: calc(100% / 3 - 10px);
  }
  footer .contentfooter .link-boxes .input-box{
    width: 60%;
  }
  .bottom-details .bottom_text span,
  .bottom-details .bottom_text a{
    font-size: 12px;
  }
}
@media (max-width: 520px){
  footer::before{
    top: 145px;
  }
  footer .contentfooter .topfooter{
    flex-direction: column;
  }
  .contentfooter .topfooter .media-icons{
    margin-top: 16px;
  }
  footer .contentfooter .link-boxes .boxfooter{
    width: calc(100% / 2 - 10px);
  }
  footer .contentfooter .link-boxes .input-box{
    width: 100%;
  }
}

/*صفحة الطلب addservice*/


.order-container {
  display: flex;
  gap: 40px;
  max-width: 1300px;
  margin: 43px auto;
  align-items: center;
}
.form-box {
  flex: 1;
  padding: 40px;
  background: rgba(10, 20, 40, 0.7);
  border: 1px solid rgba(0, 170, 255, 0.3);
  border-radius: 20px;
  backdrop-filter: blur(10px);
}
.image-box {
  flex: 1;
}
.image-box img {
  width: 100%;
  border-radius: 20px;
  box-shadow: 0 0 30px rgba(0, 170, 255, 0.4);
  transition: 0.5s;
}

@media (max-width: 595px){
  .image-box img {
  display: none;
  }
.form-box{
      min-width: stretch;
}
.order-container {
    display: block;}
  }

.form-box h2 {
  text-align: center;
  color: #00aaff;
  margin-bottom: 30px;
  font-size: 28px;
}

/* الحقول */
.form-box input,
.form-box select,
.form-box textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 20px;
  background: rgba(0, 0, 0, 0.4);
  border: 1px solid rgba(0, 170, 255, 0.4);
  border-radius: 10px;
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: 0.3s;
}

.form-box input:focus,
.form-box select:focus,
.form-box textarea:focus {
  border-color: #00aaff;
  box-shadow: 0 0 15px rgba(0, 170, 255, 0.5);
}

.form-box label {
  display: block;
  margin-bottom: 8px;
  color: #aaa;
  font-size: 14px;
}

/* الزر */
.form-box button {
  width: 100%;
  padding: 15px;
  background: linear-gradient(90deg, #00aaff, #0077ff);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s;
}

.form-box button:hover {
  background: linear-gradient(90deg, #0077ff, #00aaff);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(0, 170, 255, 0.6);
}

/* اختيارات فرعية */
#sub_web {
  margin-top: -10px;
  margin-bottom: 20px;
}

.alert-success {
  background: linear-gradient(90deg, #00ff88, #00aaff);
  color: #000;
  padding: 15px;
  border-radius: 10px;
  text-align: center;
  font-weight: bold;
  margin-bottom: 20px;
  animation: fadeIn 0.5s;
}
@keyframes fadeIn {
  from {opacity: 0; transform: translateY(-20px);}
  to {opacity: 1; transform: translateY(0);}
}

/*صورة الدخول login*/
/* User Dropdown Click */
.user-dropdown1 {
  position: relative;
  display: inline-block;
  z-index: 99;
}

.user-dropbtn {
  background: rgba(59,130,246,0.15);
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: 0.3s;
}
.user-dropbtn:hover {
  background: rgba(59,130,246,0.3);
}

.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.user-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 10px); /* ينزل 10px تحت الزرار */
  background-color: var(--nav-color);
  min-width: 220px;
  border: 1px solid #334155;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.6);
  z-index: 10001; /* اعلى حاجة في الموقع */
  overflow: visible; /* مهم جدا */
      text-align: center;
    font-size: larger;
    transform: translateY(0);
    transition: all 0.6s ease-in-out;
    
}
.user-dropdown-content.show {
  display: grid; /* تظهر لما نضيف class show */
  margin-top: 15px;
      transform: translateY(0);
    transition: all 0.6s ease-in-out;
}

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

.user-dropdown-content a {
  color: #e5e7eb;
  padding: 12px 16px;
  text-decoration: none;
  display: contents;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  transition: 0.4s ease-in-out;
  
}
.user-dropdown-content a:hover {
  background: #3b82f6;
  color: #fff;
}
.accontsetting{text-align: justify;color: #e5e7eb;}
.user-divider a .logout-link { color: #f87171; }
.user-divider a .logout-link:hover { background: #ef4444; color: #fff; }
.user-divider { height: 1px; background: #334155; margin: 5px 0; }

#user-arrow.rotate {
  transform: rotate(180deg);
  transition: 0.3s;
}

/* للعربي */
[dir="rtl"].user-dropdown-content { right: auto; left: 0; }

@media (max-width: 380px) {
  .user-dropdown-content.show {
    left: 0;
}
}

/*Modal اعداداتي */

/* خلفية سودا شفافة ورا الـ Modal */
.modal {
  display: none; /* مخفي افتراضي */
  position: fixed; 
  z-index: 9999; /* يطلع فوق كل حاجة */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.6); /* شفافية */
  backdrop-filter: blur(5px); /* تأثير ازاز */
 
}

/* الصندوق الابيض بتاع الاعدادات */
.modal-content {
  /* غامق عشان SicuraTech */
  color: #fff;
  margin: 10% auto; /* ينزل في النص */
  padding: 20px;
  border-radius: 15px;
  width: 90%;
  max-width: 400px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.5);
      text-align: justify;
       transform: translateY(10px);
      transition: all 0.3s ease-in-out;
}

/* زرار الاغلاق X */
.close {
  color: #aaa;
  float: inline-end; /* عشان اللغة عربي */
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
.close:hover {
  color: #fff;
}

/* تنسيق الفورم جوه */
.modal-content select, .modal-content button {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border-radius: 8px;
    border: none;
}
.modal-content button {
    background: #007bff;
    color: white;
    cursor: pointer;
}
.modal-content button:hover {
    background: #0056b3;
}

.toggle-buttons{
  display: flex;
}

.toggle-buttons button {
  background: rgba(255,255,255,0.1);
  border: 2px solid transparent;
  color: #fff;
  padding: 10px 15px;
  border-radius: 10px;
  cursor: pointer;
  margin: 5px;
  transition: 0.3s;
}
.toggle-buttons button:hover {
  background: #007bff;
  transform: scale(1.05);
}
.toggle-buttons button.active {
  border: 2px solid #007bff;
  background: #007bff;
}
.toggle-buttons button img{width: 40px;}

/*البروفايل profile*/
.profile-new{max-width:1200px; margin:0 auto; padding:20px;}
.profile-cover{position:relative; height:250px; border-radius:20px; overflow:hidden; }
.cover-img{width:100%; height:100%; object-fit:cover; filter:brightness(0.6);}
.profile-avatar-wrap{position:absolute; bottom:15px; left:40px; display:flex; align-items:end; gap:15px;}
.profile-avatar{width:120px; height:120px; border-radius:50%; border:4px solid #fff; background:#fff;}
.btn-change-avatar{margin-left: -40px;; border:none; color:#fff; border-radius:50%; width:35px; height:35px; cursor:pointer;}

.profile-header{display:flex; justify-content:space-between; align-items:center; margin-top:10px;color: white; padding:0 20px;}
.btn-primary{background:linear-gradient(90deg, #3b82f6, #8b5cf6); color:#fff; border:none; padding:12px 25px; border-radius:12px; font-weight:bold; cursor:pointer;}
.btn-primary, .tab {
  position: relative; 
  z-index: 10; /* خليها فوق الخلفية */
  cursor: pointer;
  pointer-events: auto;
}
.profile-tabs{display:flex; gap:10px; margin:30px 0; border-bottom:1px solid #333; padding-bottom:10px;}
.tab{background:none; border:none; color:#aaa; font-size:16px; padding:10px 20px; cursor:pointer;}
.tab.active{color:#3b82f6; border-bottom:2px solid #3b82f6;}
.tab-content{display: none;}
.tab-content.active{display: block;    margin-top: -60px;padding: 0 10px;place-self: anchor-center; width: 1200px;}
@media (max-width: 1200px) {
  .tab-content.active {
        place-self: auto;
    width: auto;
}
}
.glass-card{
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 25px;
  margin-top: 20px;
  color: var(--text-dark);
}
.info-row{display:flex; justify-content:space-between; padding:15px 0; border-bottom:1px solid #333;}
.info-row:last-child{border:none;}
.profile-cover{position:relative; height:250px; border-radius:20px; overflow:hidden; background-image: url(../images/sun.png);background-repeat: round;}
.btn-change-avatar{position:absolute; bottom:10px; left:125px; background:#3b82f6; border:none; color:#fff; border-radius:50%; width:35px; height:35px; cursor:pointer; display:flex; align-items:center; justify-content:center;}
.modal{display:none; position:fixed; z-index:9999; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); backdrop-filter: blur(5px);}
.modal-content{background:#1e293b;text-align: -webkit-auto; color:#fff; margin:6% auto; padding:30px; width:90%; max-width:500px; border-radius:15px; border:1px solid #334155;}
.modal-content input{width:100%; padding:10px; margin:8px 0 15px; border-radius:8px; border:1px solid #334155; background:#0f172a; color:#fff;}
.close{ text-align: -webkit-auto; font-size:28px; cursor:pointer;}

/*المنتجات*/

.product-page{display:flex; gap:40px; padding:40px 8%; max-width:1200px; margin:auto;background: #33322e85;
    height: auto;
    border-radius: 30px;
 }
.product-gallery{width:50%;}
.product-gallery img{width:100%; border-radius:15px; box-shadow:0 5px 20px rgba(0,0,0,0.1);}
.product-info{width:50%;}
.product-info h1{font-size:32px; margin-bottom:10px;color: aliceblue;}
.product-info .price{font-size:36px; color:#00ff88; font-weight:800; margin:20px 0;}
.product-info .desc{color:#555; line-height:1.8; font-size:16px;}
.btn-add{background:linear-gradient(90deg,#007bff,#0056b3); color:#fff; padding:18px; border:none; border-radius:12px; font-size:18px; font-weight:800; width:100%; cursor:pointer; transition:0.3s;}
.btn-add:hover{transform:scale(1.02);}

.cart-float{position:fixed; top:100px; left:30px; z-index:9999;}
.cart-icon{background:#fff; padding:15px; border-radius:50%; cursor:pointer; box-shadow:0 5px 15px rgba(0,0,0,0.2); position:relative; font-size:24px;}
.cart-badge{background:#ff3d00; color:#fff; border-radius:50%; padding:3px 8px; font-size:12px; position:absolute; top:-5px; left:-5px; font-weight:bold;}
.cart-panel{display:none; position:absolute; left:70px; top:0; width:380px; background:#111827; color:#fff; padding:20px; border-radius:15px;}
.cart-item{display:flex; gap:15px; padding:12px 0; border-bottom:1px solid #333;  border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    padding: 20px;
    background: white;}
.cart-item img{width:70px; height:70px; object-fit:cover; border-radius:8px;}
/* حاوية الازرار */
.cart-qty-controls {
    display: inline-flex;;
    gap: 6px;
    align-items: center;
}

.cart-qty-controls button {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* زر الناقص */
.cart-qty-controls button:first-child {
    
    background: #10b981; /* اخضر SicuraTec */
    color: white;
}
.cart-qty-controls button:first-child:hover {
   
    background: #059669;
    transform: scale(1.1);
}

/* زر الزائد */
.cart-qty-controls button:nth-child(2) {
    background: #f1f5f9;
    color: #475569;
}
.cart-qty-controls button:nth-child(2):hover {
     background: #e2e8f0;
    transform: scale(1.1);
}

/* زر الحذف */
.cart-qty-controls button:last-child {
    background: #ef4444;
    color: white;
}
.cart-qty-controls button:last-child:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/*chickout*/

.checkout-container {
    max-width: 900px;
    margin: 0px auto;
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.checkout-steps {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
.step {
    flex: 1;
    text-align: center;
    padding: 15px;
    background: #f1f1f1;
    border-radius: 8px;
    margin: 0 5px;
    font-weight: bold;
    color: #888;
    transition: all 0.3s ease;
}
.step.active {
    background: linear-gradient(45deg, #007bff, #00c6ff);
    color: #fff;
}
.step-content { display: none; }
.step-content.active { display: block; }

.checkout-container input, .checkout-container select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}
.btn-next, .btn-submit {
    padding: 12px 30px;
    background: linear-gradient(45deg, #28a745, #20c997);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    float: inline-end;
}
.btn-back {
    padding: 12px 30px;
    background: #6c757d;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
    float: right;
}
.order-summary {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 10px;
}
.order-summary .item { display: flex; justify-content: space-between; margin-bottom: 10px; }


/*ستايل السلة*/
.cartshop{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
    font-size: 25px;
}
.cartshop a{
 color: var(--text-color);
 transition: all 0.4s ease-in-out;
}

.cart-icon { position: relative; }
#cart-count {
       /* background: red; */
    color: #fff;
    border-radius: 64;
    /* padding: 2px 6px; */
    font-size: 12px;
    position: absolute;
    top: 25px;
}
.mini-cart {
    background-color: var(--nav-color);
    border: 1px solid #393838;
    border-radius: 20px;
    overflow-y: auto;
    transform: scaleY();
    transition: all 0.8s ease-in-out;
    display: none; position: absolute; top: 77px;
    width: 300px;  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
   padding: 15px; z-index: 999;    font-size: 15px;
    text-align: center;
}

.mini-cart.show { display: block;color:var(--text-color4); transition: all 0.4s ease-in-out;}

.btn-checkout:hover{
   background: #12ee46; color: #797474;
}



/**/
.cart-item { display:flex; justify-content:space-between; margin-bottom:10px; font-size:14px; }
.btn-checkout {
    display: block; width: 100%; padding: 12px;
    background: linear-gradient(45deg, #28a745, #20c997); color: #fff; 
    text-align: center; border-radius: 8px; margin-top: 15px; font-weight:bold; text-decoration:none;
}
.empty-cart { text-align:center; color:#888; padding:20px 0; }

/*رسالة alert*/

.toast {
    position: fixed; top: 20px; right: 20px; background: #28a745; color:#fff;
    padding: 15px 20px; border-radius: 8px; z-index: 99999;
    animation: slideIn 0.5s;
}
@keyframes slideIn { from {right:-300px;} to {right:20px;} }

/*ستايل الصور في Products*/

.product-gallery {
    max-width: 500px;
}
.main-image img {
    width: 100%;
    border-radius: 12px;
    border: 2px solid #eee;
    margin-bottom: 15px;
    transition: 0.3s;
}
.thumb-images {
    display: flex;
    gap: 10px;
    justify-content: center;
}
.thumb-images .thumb {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 2px solid #ddd;
    cursor: pointer;
    transition: 0.3s;
}
.thumb-images .thumb:hover {
    border-color: #007bff;
    transform: scale(1.05);
}
.thumb-images .thumb.active {
    border-color: #007bff;
    box-shadow: 0 0 10px rgba(0,123,255,0.5);
}

/*تكبير الصورة في المعرض*/

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9);
    animation: fadeIn 0.3s;
}
.lightbox-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 900px;
    border-radius: 10px;
}
.lightbox .close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.lightbox .close:hover { color: #bbb; }
@keyframes fadeIn { from {opacity:0} to {opacity:1} }

/* خلي الماوس يبقى ايد على الصورة الكبيرة */
.main-image img { cursor: zoom-in; }

/*النجوم في products*/

.rating-stars {
    color: #ffc107; /* لون ذهبي */
    font-size: 22px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.rating-stars span {
    color: #888;
    font-size: 14px;
}

/*about*/