body{

  margin: 0;

  font-family: Arial, sans-serif;

  background: white;
}
/* HEADER */

.header{

position: fixed;

top: 0;

left: 0;

width: 100%;

z-index: 1000;

display: flex;


align-items: center;

padding: 18px 50px;

background-color: #F8FAFC;

border-bottom: 1px solid #EAEAEA;

box-shadow: 0 2px 15px rgba(0,0,0,0.08);

box-sizing: border-box;

}

/* عشان المحتوى ما يختفي تحت الهيدر */

body{

padding-top: 90px;

}
/* LOGO */

.brand{

  display: flex;

  align-items: center;

  gap: 10px;
}

.logo{

  width: 50px;

  height: 50px;
}

/* NAME */

.text{

  display: flex;

  flex-direction: column;

  align-items: center;
}

.text h1{

  margin: 0;

  font-size: 28px;
}

.text p{

  margin: 0;

  font-size: 14px;

  color: gray;

  text-align: center;
}

/* NAVBAR */

nav{

display:flex;

align-items:center;

gap:25px;
margin: 0 0 0 30px;

}

nav a{

  text-decoration: none;

  color: #666;

  font-size: 16px;

  transition: 0.3s;
}

nav a:hover{

  color: black;
}

/* LANGUAGE BUTTON */
.lang-btn{

display:flex;

align-items:center;

gap:6px;

padding:8px 12px;

background:#e5e7eb;

border:1px solid #e5e5e5;

border-radius:10px;

cursor:pointer;

}

.lang-btn:hover{

  background: #f5f5f5;
}

/* TRANSLATE ICON */

.translate-icon{

  font-size: 18px;

  font-weight: bold;

  color: #666;
}

/* REQUEST A DEMO BUTTON */

#demo-btn{

  border: none;

  border-radius: 20px;

  padding: 10px 18px;

  background: #27d4d4;

  color: white;

  cursor: pointer;

  font-size: 15px;

  transition: 0.3s;
}

#demo-btn:hover{

  opacity: 0.9;
}

/* HERO SECTION */

.hero{

  background: linear-gradient(135deg,#0B2450,#163B74);

  border-radius: 30px;

  margin: 50px;

  padding: 60px;

  display: flex;

  justify-content: space-between;

  align-items: center;

  color: white;
}

.hero-left{

  width: 50%;
}

/* TAG */

.tag{

  display: inline-block;

  border: 1px solid #0DBEDE;

  border-radius: 20px;

  padding: 10px 18px;

  color: #0DBEDE;

  margin-bottom: 25px;
}

/* HERO TITLE */

.hero h2{

  font-size: 60px;

  line-height: 1.2;

  margin: 0 0 25px 0;
}

/* HERO DESCRIPTION */

.hero p{

  font-size: 20px;

  color: #D1D5DB;

  line-height: 1.8;
}

/* HERO BUTTONS */

.hero-buttons{

  display: flex;

  gap: 20px;

  margin-top: 35px;
}

/* PRIMARY BUTTON */

.primary-btn{

  text-decoration: none;

  display: inline-block;

  background: #0DBEDE;

  color: white;

  border-radius: 25px;

  padding: 14px 25px;

  transition: 0.3s;
}

.primary-btn:hover{

  background: #09AAC8;
}

/* SECONDARY BUTTON */

.secondary-btn{

  text-decoration: none;

  display: inline-block;

  background: transparent;

  color: white;

  border: 1px solid white;

  border-radius: 25px;

  padding: 14px 25px;

  transition: 0.3s;
}

.secondary-btn:hover{

  background: rgba(255,255,255,0.12);
}

/* DASHBOARD */

.dashboard{

  width: 500px;

  height: 500px;

  border-radius: 25px;

  background: rgba(255,255,255,0.08);

  display: flex;

  justify-content: center;

  align-items: center;

  font-size: 30px;
}
/* SERVICES */

#services{

padding:120px 8%;

background:#F8FAFC;

text-align:center;

}

#services h2{

font-size:52px;

margin-bottom:70px;

color:#0B2450;

}

.services-container{

display:grid;

grid-template-columns:repeat(2,380px);

gap:35px;

justify-content:center;

margin:0 auto;

}

.service-card{

background:#FFFFFF;

min-height:300px;

padding:40px;

border-radius:25px;

box-shadow:0 15px 35px rgba(0,0,0,0.08);

display:flex;

flex-direction:column;

justify-content:center;

transition:0.3s;

}

.service-card:hover{

transform:translateY(-10px);

box-shadow:0 20px 40px rgba(0,0,0,0.15);

}

.service-card h3{

font-size:30px;

margin-bottom:18px;

color:#0B2450;

}

.service-card p{

font-size:18px;

line-height:1.8;

color:#666;

}

.customized-box{

max-width:800px;

margin:60px auto 0;

padding:50px;

background:#0B2450;

border-radius:30px;

color:white;

text-align:center;

}

.customized-box h3{

font-size:36px;

margin-bottom:20px;

}

.customized-box p{

font-size:18px;

line-height:1.8;

margin-bottom:30px;

}

.customized-box button{

padding:18px 35px;

font-size:18px;

font-weight:700;

border:none;

border-radius:14px;

cursor:pointer;

background:white;

color:#0B2450;

}




/* HOW IT WORKS */

#dashboard{

padding: 80px 50px;

text-align: center;
}

#dashboard h2{

font-size: 40px;

margin-bottom: 50px;
}

.steps{

display: flex;

justify-content: center;

gap: 30px;

flex-wrap: wrap;
}

.step{

width: 250px;

padding: 30px;

background: #0B2450;

color: white;

border-radius: 25px;
}


/* CONTACT */
/* CONTACT */

#contact{

padding:100px 50px;

background:#0B2450;

color:white;

text-align:center;

}

#contact h2{

font-size:48px;

margin-bottom:25px;

}

.contact-intro{

max-width:850px;

margin:0 auto 60px;

font-size:20px;

line-height:1.8;

color:#D9E4F5;

}

.contact-box{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:25px;

max-width:1100px;

margin:auto;

}

.contact-item{

background:rgba(255,255,255,0.08);

padding:35px;

border-radius:25px;

}

.contact-item h3{

font-size:28px;

margin-bottom:18px;

}

.contact-item p{

font-size:18px;

}

.contact-item a{

color:#48E1FF;

text-decoration:none;

font-weight:bold;

}

.contact-item a:hover{

color:white;

}


/* FOOTER */

.footer{

background: #0B2450;

color: white;

padding: 25px;

text-align: center;
}
/* MOBILE RESPONSIVE */

.services-section{

padding:100px 8%;

text-align:center;

}

.services-section h2{

font-size:40px;

margin-bottom:50px;

}

.services-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:30px;

}

.service-card{

background:#ffffff;

padding:35px;

border-radius:20px;

box-shadow:0 10px 25px rgba(0,0,0,0.1);

transition:0.3s;

}

.service-card:hover{

transform:translateY(-8px);

}

.service-card h3{

margin-bottom:18px;

font-size:24px;

}

.service-card p{

line-height:1.8;

color:#555;

}

.customized-container{

display:flex;

justify-content:center;

margin-top:60px;

}

.customized-card{

width:700px;

background:#0d6efd;

padding:40px;

border-radius:25px;

text-decoration:none;

color:white;

transition:0.3s;

}

.customized-card:hover{

transform:scale(1.03);

}

.customized-card h3{

font-size:32px;

margin-bottom:15px;

}

.customized-card p{

font-size:18px;

line-height:1.8;

}
@media (max-width: 768px){

.header{

flex-direction: column;

padding: 20px;

gap: 20px;

}



.hero{

flex-direction: column;

margin: 20px;

padding: 30px;

text-align: center;

}

.hero-left{

width: 100%;

}

.hero-right{

width: 100%;

margin-top: 30px;

}

.hero h2{

font-size: 40px;

}

.hero p{

font-size: 18px;

}

.dashboard{

width: 100%;

height: 250px;

font-size: 24px;

}

.hero-buttons{

justify-content: center;

flex-wrap: wrap;

}

.services-container{

flex-direction: column;

align-items: center;

}

.service-card{

width: 85%;

}

.steps{

flex-direction: column;

align-items: center;

}

.step{

width: 85%;

}

.socials{

flex-wrap: wrap;

}

}
.explore-btn{

display:inline-block;

padding:16px 32px;

border:2px solid white;

border-radius:40px;

text-decoration:none;

color:white;

font-weight:600;

transition:.3s;

}

.explore-btn:hover{

background:white;

color:#0B2450;

}
.dashboard-page{

padding:140px 8%;

text-align:center;

}

.dashboard-page h1{

font-size:48px;

margin-bottom:15px;

}

.dashboard-page p{

font-size:20px;

color:#666;

margin-bottom:50px;

}

.dashboard-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(350px,1fr));

gap:30px;

}

.dash-card{

background:white;

padding:25px;

border-radius:25px;

box-shadow:0 10px 30px rgba(0,0,0,0.1);

}

.dash-card img{

width:100%;

border-radius:20px;

}

.dash-card h3{

margin-top:20px;

}
.request-page{

min-height:100vh;

display:flex;

justify-content:center;

align-items:center;

padding:60px;

background:linear-gradient(135deg,#0B2450,#163B74);

}

.request-container{

width:700px;

background:white;

padding:50px;

border-radius:30px;

box-shadow:0 20px 40px rgba(0,0,0,.15);

}

.request-container h1{

font-size:48px;

margin-bottom:20px;

color:#0B2450;

}

.request-container p{

font-size:18px;

color:#666;

margin-bottom:35px;

}
.request-container{

position:relative;

}


#request-form{

display:flex;

flex-direction:column;

gap:20px;

}

#request-form input,

#request-form textarea{

padding:18px;

font-size:17px;

border:1px solid #ddd;

border-radius:15px;

outline:none;

}

#request-form button{

padding:18px;

border:none;

border-radius:15px;

background:#0DBEDE;

color:white;

font-size:18px;

font-weight:700;

cursor:pointer;

}

#request-form button:hover{

background:#09AAC8;

}
.dashboard-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:25px;
}