html {
scroll-behavior: smooth;
}
body{
font-family: Tahoma;
margin:0;
background:#0e2a47;
color:white;
}
header{
display:flex;
justify-content:space-between;
padding:20px;
background:#274a70;
background: rgba(39, 74, 112, 0.9);
position: sticky;
top: 0;
z-index: 1000;
}
.logo{
padding:20px;
font-size:20px;
font-weight:bold;
color:#00d4ff;
transition: 0.3s;
}
.logo:hover{
transform: scale(1.55);
text-shadow: 0 0 20px #00d4ff;
}
.logo img{
padding:15px;
height:50px;
border-radius:10px;
background:#ffffff;
animation: neonGlow 1.5s infinite alternate;
transition: 0.3s;
}
.logo img:hover {
animation: neonGlow 1.5s infinite alternate;
}
@keyframes neonGlow {
0% {
filter: drop-shadow(0 0 5px #00ff88)
drop-shadow(0 0 10px #00ff88);
}
50% {
filter: drop-shadow(0 0 15px #00ff88)
drop-shadow(0 0 25px #00ff88);
}
100% {
filter: drop-shadow(0 0 25px #00ff88)
drop-shadow(0 0 40px #00ff88);
}
}
nav a{
color:white;
margin:10px;
text-decoration:none;
}
.aa{
display:inline-block;
transition: 0.3s;
}
.aa:hover{
transform: scale(1.35);
text-shadow: 0 0 20px white;
}
.btn{
background:#1f8f6a;
padding:10px 15px;
border-radius:5px;
display:inline-block;
transition: 0.3s;
}
.btn:hover{
background:#28a745;
box-shadow:0 0 20px #28a745;
transform: scale(1.35);
}
.wordwllecom{
display: inline-block;
text-shadow: 0 0 20px #00d4ff;
padding:20px;
font-size:20px;
font-weight:bold;
color:#00d4ff;
animation: neonGloww 1.5s infinite alternate;
transition: 0.3s;
}
.wordwllecom:hover{
text-shadow: 0 0 20px #00d4ff;
transform: scale(1.45);
animation: neonGloww 1.5s infinite alternate;
}
@keyframes neonGloww {
0% {
filter: drop-shadow(0 0 5px #00d4ff)
drop-shadow(0 0 10px #00d4ff);
}
50% {
filter: drop-shadow(0 0 15px #00d4ff)
drop-shadow(0 0 25px #00d4ff);
}
100% {
filter: drop-shadow(0 0 25px #00d4ff)
drop-shadow(0 0 40px #00d4ff);
}
}
.hero{
min-height:500px;
background-size:cover;
background-position:center;
display:flex;
flex-direction:row-reverse;
align-items:center;
padding:60px;
transition:background-image 1s ease-in-out;
}
.hero-text{
max-width:500px;
color:white;
text-align:left;
animation:fadeIn 1s;
}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(20px);
}
to{
opacity:1;
transform:translateY(0);
}
}
.hero-text h1{
font-size:45px;
margin-bottom:20px;
}
.hero-text p{
font-size:20px;
margin-bottom:25px;
}
.neon-btn {
color: #28a745; /* لون النص ثابت */
padding: 14px 30px;
text-decoration: none;
border: 2px solid #28a745;
border-radius: 6px;
font-weight: bold;
display: inline-block;
background-color: white; /* الأرضية بيضاء */
position: relative;
z-index: 0;
font-size: 18px;
text-align: center;
transition: all 0.3s ease;
}
/* وهج نيون متدرج حول الزر */
.neon-btn::before {
content: '';
position: absolute;
top: -6px; left: -6px; right: -6px; bottom: -6px;
border-radius: 8px;
background: transparent;
z-index: -1;
box-shadow: 0 0 10px #28a745, 0 0 20px #28a745, 0 0 30px #28a745;
animation: gradient-glow 2s infinite alternate;
}
@keyframes gradient-glow {
0% {
box-shadow: 0 0 10px #28a745, 0 0 20px #28a745, 0 0 30px #28a745;
}
25% {
box-shadow: 0 0 10px #28a745, 0 0 20px #00f0ff, 0 0 30px #28a745;
}
50% {
box-shadow: 0 0 15px #00f0ff, 0 0 25px #28a745, 0 0 35px #ffff00;
}
75% {
box-shadow: 0 0 15px #ffff00, 0 0 25px #00f0ff, 0 0 35px #28a745;
}
100% {
box-shadow: 0 0 20px #28a745, 0 0 30px #ffff00, 0 0 40px #00f0ff;
}
}
.neon-btn:hover{
background:#28a745;
color:white;
box-shadow:
0 0 10px #28a745,
0 0 20px #28a745,
0 0 40px #28a745;
transform: scale(1.2);
}
.features{
display:flex;
justify-content:space-around;
padding:40px;
gap:20px;
}
.box{
display:flex;
background:#1f4e75;
align-items:center;
gap:10px;
padding:15px;
border-radius:10px;
width:170px;
transition:0.3s;
}
.box:hover{
transform:translateY(-5px);
background:#7fd9ea;
box-shadow:0 0 20px #7fd9ea;
}
.box img{
width:60px;
}
.box p{
font-size:18px;
}
.plans{
text-align:center;
padding:40px;
}
#investment-plans {
scroll-margin-top: 190px;
}
.investmentplans{
text-decoration:none;
display: inline-block;
text-shadow: 0 0 20px #00d4ff;
font-size:40px;
font-weight:bold;
color:#ffffff;
animation: neoninvestmentplans 1.5s infinite alternate;
transition: 0.3s;
}
.investmentplans:hover{
text-shadow: 0 0 20px #00d4ff;
transform: scale(1.45);
animation: neonGloww 1.5s infinite alternate;
}
@keyframes neoninvestmentplans {
0% {
filter: drop-shadow(0 0 5px #00d4ff)
drop-shadow(0 0 10px #00d4ff);
}
50% {
filter: drop-shadow(0 0 15px #00d4ff)
drop-shadow(0 0 25px #00d4ff);
}
100% {
filter: drop-shadow(0 0 25px #00d4ff)
drop-shadow(0 0 40px #00d4ff);
}
}
.planss{
display: flex;
justify-content: center;
}
.plan{
display:inline-block;
background:#163a5c;
padding:30px;
margin:20px;
border-radius:10px;
width:250px;
transform-origin: center;
transition: 0.3s ease;
}
.plan:hover{
transform: translateY(-3px);
box-shadow:0 0 20px #7fd9ea;
}
.plan h3{
font-size:22px;
font-weight:bold;
}
/* أنواع الزراير */
/* زر البورصة (السهم الصاعد) 3 */
.stock-btn{
background:#fff;
color:#28a745;
border:2px solid #28a745;
padding:14px 34px;
border-radius:8px;
text-decoration:none;
display:inline-flex;
gap:10px;
align-items:center;
font-weight:bold;
transition: 0.3s;
}
.stock-btn span{
animation:up 1s infinite;
}
@keyframes up{
0%{transform:translateY(0);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0);}
}
/* تأثير عند المرور */
.stock-btn:hover{
background:#28a745;
color:#fff;
border:2px solid #fff;
transform: scale(1.1);
box-shadow:0 0 25px #28a745;
}
/* زر الضوء المتحرك (Shine Effect) 1 */
.shine-btn{
background:#28a745;
color:#fff;
padding:14px 34px;
border-radius:8px;
text-decoration:none;
font-weight:bold;
position:relative;
overflow:hidden;
display:inline-block;
transition: 0.3s;
}
.shine-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:50%;
height:100%;
background:rgba(255,255,255,0.5);
transform:skewX(-25deg);
animation:shine 2s infinite ;
}
@keyframes shine{
0%{left:-100%;}
100%{left:120%;}
}
.shine-btn span{
display:inline-block;
animation:up 1s infinite;
}
@keyframes up{
0%{transform:translateY(0);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0);}
}
/* تأثير عند المرور */
.shine-btn:hover{
box-shadow:0 0 20px #28a745;
}
/* زر الحدود الليزر (Laser Border) 2 */
.laser-btn{
padding:14px 34px;
background:#ffffff;
color:#28a745;
border:2px solid #28a745;
font-weight:bold;
text-decoration:none;
position:relative;
display:inline-block;
border-radius:6px;
overflow:hidden;
}
/* خط الليزر */
.laser-btn::before{
content:"";
position:absolute;
top:0;
left:-100%;
width:100%;
height:2px;
background:#28a745;
animation:laser 2s linear infinite;
}
/* أيقونات التحريك */
.laser-btn::after{
content:" \1F441 \1F44D \1F381 \1F4E2 ";
position:absolute;
left:-100%;
top:50%;
transform:translateY(-50%);
opacity:0.2;
font-size:22px;
animation:chartMove 5s linear infinite;
}
@keyframes laser{
0%{left:-100%;}
100%{left:100%;}
}
@keyframes chartMove{
0%{left:-100%;}
100%{left:100%;}
}
.laser-btn span{
display:inline-block;
}
.laser-btn:hover{
background:#28a745;
color:#fff;
box-shadow:0 0 20px #28a745;
}
footer{
background:#081b30;
text-align:center;
padding:20px;
}
/* تحسين الصور */
img{
max-width:100%;
height:auto;
display:block;
}
/* Mobile Responsive */
@media (max-width:768px){
header{
flex-direction:column;
text-align:center;
}
.logo img{
left: 50%;
transform: translateX(-60%);
}
nav{
margin-top:10px;
}
nav a{
margin:10px 20px 10px 20px;
}
nav .btn{
display:block;
width:80%;
text-align:center;
margin-top:20px;
}
.hero{
padding:30px;
height:auto;
text-align:center;
}
.hero h1{
font-size:28px;
}
.start-btn{
padding:12px 25px;
font-size:14px;
}
.features{
flex-direction:column;
align-items:center;
gap:20px;
padding:20px;
}
.box{
width:45%;
}
.planss{
flex-direction:column;
align-items:center;
}
.plan{
width:90%;
margin:auto;
margin-bottom:20px;
}
}