/* Reset */
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family: Arial, sans-serif;
}

/* Body */

body{
background:#0f172a;
color:white;
line-height:1.6;
}

/* Header */

header{
background:#020617;
padding:20px;
text-align:center;
}

header h1{
font-size:32px;
color:rgb(159, 11, 11);
}

header p{
margin-top:5px;
color: crimson;
}

/* Navigation */

nav{
margin-top:15px;
}

nav a{
color:white;
text-decoration:none;
margin:0 10px;
font-weight:bold;
}

nav a:hover{
color:#38bdf8;
}

/* Sections */

section{
padding:60px 10%;
}

h2{
 color: #ba1515;
text-align:center;
margin-bottom:30px;
font-size:50px;
}

/* Home */

#home{
text-align:center;
padding-top:80px;
}

button{
padding:10px 20px;
background:#38bdf8;
border:none;
border-radius:5px;
font-weight:bold;
cursor:pointer;
}

button:hover{
background:#0ea5e9;
}

/* Projects */

#projects article{
background:#0bd63e;
padding:20px;
margin:15px 0;
border-radius:10px;
transition:0.3s;
}

#projects article:hover{
transform:translateY(-5px);
}



/* Contact */

form{
max-width:400px;
margin:auto;
}

input, textarea{
width:100%;
padding:10px;
margin:10px 0;
border:none;
border-radius:5px;
}

/* Footer */

footer{
    color: #ba1515;
text-align:center;
padding:20px;
background:#020617;
margin-top:40px;
}

/* Responsive */

@media (max-width:768px){

section{
padding:40px 5%;
}

header h1{
font-size:26px;
}

}
video {
    border: 2px solid black;
    border-radius: 10px;
    width: 300px;
    height: 350px;
    max-width:500px;
    display: block;
    margin: 10px auto;
}
.video-table {
    width: 300px;              /* table width */
    max-width: 900px;        /* limit size */
    margin: auto;            /* center table */
    border-collapse: collapse;
}

.video-table td {
    width: 33%;              /* equal columns */
    padding: 10px;
}

.video-table video {
    width: 100%;             /* video fills cell */
    height: auto;            /* keep aspect ratio */
    display: block;
}
.about body{
    background-image: url("sasa1.jpg");
}
#home{
   background-image: url("Navy.jpg"); 
   background-size: cover;
   width: 100%;
   height: 100vh;
   min-height:100vh ;

}
#home p{
    font-size: 30px;
    color: hsl(0, 17%, 68%);
text-align:center;
    
}

#about{
   background-image: url("Navy.jpg"); 
   background-size: cover;
   width: 100%;
   height: 100vh;
   min-height:100vh ;

}

#about p{
    font-size: 25px;
    color: hsl(0, 17%, 68%);
text-align:center;
    
}
#projects{
   background-image: url("Navy.jpg"); 
   background-size: cover;
   width: 100%;
   height: 78vh;
   min-height:78vh ;
}
#contacts{
   background-image: url("Navy.jpg"); 
   background-size: cover;
   width: 100%;
   height: 100vh;
   min-height:100vh ;
}
.me img{
    width: 250px;
    height: 250px;
    border-radius: 50%;
}
/* Container for social icons */
.social-media {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}

.social i {
  font-size: 40px;   /* size of the icon */
  color: #333;
  transition: transform 0.3s, color 0.3s;
  cursor: pointer;
}

.social i:hover {
  transform: scale(1.2);
  color: #007bff;  /* change color on hover */
}