html{
    scroll-behavior: smooth;
}
body{
    height: 100%;
    margin: 0;
    font-family: sans-serif;
}

.container{
    height: 100vh;
    background-image: linear-gradient(to right,rgba(0, 0, 0, 0.581),rgba(0, 0, 0, 0.362)),url(images/QI8zZc-8SyRwDcDvzktOaiJBz52X0UN7Sri3aY_UO18.webp);
    background-size: cover;
    background-position: center; 
    width: auto;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    
}
.navbar{
    display: flex;
    justify-content: center;
    position: relative;
    
 }
 .navbar .co{
    color: rgb(196, 59, 82) ;
    position: absolute;
    top: 30px;
    left: 10px;
    transform: translate(50%,-50%);
    font-size: 22px;
    font-weight:900;
    position: fixed;
 }



.container-fluid{
    display: flex;
    justify-content:space-between ;
    flex-direction: row;
    gap: 30px;
    font-size: 18px;
    margin-top: 30px;
    position: fixed;
    
}
.container-fluid a{

    text-decoration: none;
    color: rgb(196, 59, 82);


}


.navbar-nav a {
    
    justify-content: space-between;
    text-decoration: none;
    color: white;
    font-size: 18px;
   
}


.navbar-nav a:hover {
    color: rgb(196, 59, 82) ;
   
}
.navbar-nav .nav-link {
    margin-right: 20px;
}

.navbar-nav .nav-link:last-child {
    margin-right: 0; 
}
.bg-body-tertiary .nav-link {
  color: white !important; 
  transition: color 0.3s ease;
  z-index: 1;
}

.bg-body-tertiary.scrolled .nav-link {
  color: black !important; 
}

.text {
    
    position: absolute;
    top: 50%;
    left:13%;
    transform: translate(50%,-50%);
    text-align: center;
     ;

}
#p1{

    font-size: 24px;
    font-weight: 600;
    color: white;
}

#h1{
    font-size: 70px;
    font-weight: 900;
    color: rgb(196, 59, 82)
}

#p2{
    font-size: 20px;
    font-weight: 600;
    color: white;
}

#p2
     {
  color: #fff;
  font-family: sans-serif;
  overflow: hidden; 
  border-right: .15em solid  rgb(196, 59, 82) ; 
  white-space: nowrap; 
  margin: 0 auto; 
  letter-spacing: .15em; 
  animation: 
    typing 3.5s steps(30, end),
    blink-caret .5s step-end infinite;
}


@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}


@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color:transparent }
}

.seco{
    height: 100vh;
    position: relative;

}

.border{
    width: 300px;
    height: 300px;
    border: 6px solid gray ; 
    position: absolute;
    top: 10%;
    left: 10%;

}


.cont img{

    height: 300px;
    width: 300px;
    margin: 0;
     position: absolute;
    top: 13%;
    left: 12%;

}
 .uu ul{

    background-color: black;
    height: 300px;
    width: 260px;
    margin: 0;
    position: absolute;
    top: 13%;
    left: 12%;
    opacity: 1;
    list-style: none;
    display: flex;              
    justify-content: center;    
    align-items: center;        
    gap: 10px; 
    transform: translateY(100%); 
    opacity: 0;                  
    transition: all 1s ease-out;
}
.cont:hover .uu ul {
    transform: translateY(0);
    opacity: 0.4;
    pointer-events: auto; 
}



.uu ul li{

    color: white;
  
  
}

.uu ul li a{

    color: white;
    text-decoration: none;
  
  
}
.tex{
    position:absolute ;
    top: 10%;
    left: 40%;

}
.tex h2{
    font-size: 40px;
    gap: 10px;
}

.tex h2::before{
    content: "";
    display: inline-block;
    height: 36px;
   
    width: 4px;
    background-color:rgb(196, 59, 82) ;
    align-items: center;
    position: absolute;
    top: 16%;
    left: -2%;
    
}

.tex p{
    font-size: 16px;
    line-height: 1.4;
    margin-top: 0;
}

.br{
    height: 5px;
    width: 600px;
    position:absolute ;
    top: 47%;
    left: 40%;
    border-top: 2px dotted black;
    
}

.info{
     position:absolute ;
    top: 46%;
    left: 40%;


}
.info p span{
    font-weight: 700;
}

.info-2 p span{
    font-weight: 700;
}

.info-2{
     position:absolute ;
    top: 46%;
    left: 60%;


}
.table tr{
    padding: 0;
}

.buttons{

      position:absolute ;
    top: 65%;
    left: 40%;
    
    

}

.buttons a{

    text-decoration: none;
    color:white;
    background-color: #FF305B;
    padding: 10px;
    border-radius: 16px ;
}

.btn-h{

   margin-left:50px ;
}

.sectwo{
    height: 100vh;
    position: relative;
    background-color: white;
    margin: 0;
}

.sectwo h3{
    text-align: center;
    font-size: 50px;
}



.sectwo h3::after{
    content: "";
    width: 150px;
    height: 1px;
    background-color: gray;
    display: inline-block;
    position: absolute;
    top: 10%;
    left: 45%;


}


.first span{
    font-size: 40px;
    font-weight: 700;
    position: absolute;
    top: 35%;
    left: 13%;

}

.first i{
    font-size: 100px;
    position: absolute;
    top: 20%;
    left: 15%;
}



.second span{
    font-size: 40px;
    position: absolute;
    top: 35%;
    left: 27%;
    font-weight: 700;

}

.second i{
    font-size: 100px;
    
    position: absolute;
    top: 20%;
    left: 28%;
}


.third span{
    font-size: 40px;
    position: absolute;
    top: 35%;
    left: 42%;
    font-weight: 700;

}

.third i{
    font-size: 100px;
    
    position: absolute;
    top: 21%;
    left: 42%;
}


.fourth span{
    font-size: 40px;
    position: absolute;
    top: 35%;
    left: 57.5%;
    font-weight: 700;

}

.fourth i{
    font-size: 100px;
    opacity: 0.6;
    
    position: absolute;
    top: 19%;
    left: 57%;
}


.fifth span{
    font-size: 40px;
    position: absolute;
    top: 35%;
    left: 72%;
    font-weight: 700;

}

.fifth i{
    font-size: 100px;
    position: absolute;
    top: 20%;
    left: 75%;
}


.sixth span{
    font-size: 40px;
    position: absolute;
    top: 75%;
    left: 44.5%;
    font-weight: 700;

}

.sixth i{
    font-size: 100px;
    position: absolute;
    opacity: 0.7;
    top: 60%;
    left: 45%;
}


.port{
    height: 100vh;
    background-color: white;
    position: relative;

}


.port h3{
    font-size: 40px;
    text-align: center;
}
.imgs ul{
    position: absolute;
    top: 8%;
    left: 37%;
    justify-content: space-between;
    list-style: none;

}

.imgs ul li a{
    margin: 10px;
    text-decoration: none;
    color: gray;
    font-size: 16px;

}

.imgs .img1{
    width: 350px;
    
     margin-top: 40px;
    margin-left: 100px;
}

.imgs .img2{
    width: 350px;
     margin-top: 40px;
    margin-left: 100px;
    

}
.imgs .img3{
    width: 350px;
     margin-top: 40px;
    margin-left:100px;
    

}
.imgs .img4{
    width: 350px;
     margin-top: 40px;
    margin-left: 100px;
    

}
.imgs .img5{
    width: 350px;
     margin-top: 40px;
    margin-left: 100px;
    

}
.imgs .img6{
    width: 350px;
    margin-top: 40px;
    margin-left:100px;
    

}

.feedback{
    height: 600px;
    position: relative;
    
}

.feedback h2{
    text-align: center;
    position: absolute;
    top: 6%;
    left: 45%;
}

.client{
    height: 300px;
    width: 800px;
    position: absolute;
    top: 22%;
    left: 25%;
    background-color: #eee;
    padding: 20px;
    border-radius: 6px;
}
.client img{
    width: 100px;
    display: flex;
    border-radius: 50%;
}

.blog{
    height: 650px;
    background-color: #eee;
}
.blog h2{
    font-size: 40px;
    text-align: center;
    padding: 30px;
}
.blog .v-s{
    
    display: flex;
    margin: 20px;
    padding: 10px;


}
.v1 {
    background-color: white;
   padding: 10px;
    border-radius: 2px;
    
}
.v2 {
    background-color: white;
   padding: 10px;
    border-radius: 2px;
    
}
.v3 {
   background-color: white;
   padding: 10px;
    border-radius: 2px;
    
}

.cont-us{
    height: 500px;
    position: relative;
    
}

.con-text h3{
    text-align: center;
    font-size: 40px;
    margin-bottom: 15px;
}



.con-text .name{
    width: 300px;
    height: 30px;
     position:absolute ;
    top: 15%;
    left: 27%;
    padding: 5px;
}

.con-text .email{
    width: 500px;
    height: 30px;
    position:absolute ;
    top: 15%;
    left: 50%;
    padding: 5px;
}

.con-text .subject{
    width: 850px;
    height: 30px;
    position:absolute ;
    top: 28%;
    left: 27%;
    padding: 5px;
}

.con-text .ms{
    width: 850px;
    height: 60px;
    position:absolute ;
    top: 45%;
    left: 27%;
    padding: 10px;
}

.btn-send{
    position:absolute ;
    top: 70%;
    left: 27%;
    padding: 8px;
    width: 80px;
    background-color: #FF305B;
    color: white;
    border: none;
    border-radius: 4px;
}
.footer{
    background-color: #333333;
    position: relative;
    height: 100px;
}

.footer p{

    position: absolute;
    top: 35%;
    left: 37%;
    color: white;
    
}
.footer p span{
    color: #FF305B;
}

#po {
  display: none !important;
}
#bg {
  display: none !important;
}
/* ====== الموبايل (أقل من 768px) ====== */
@media (max-width: 768px) {
  /* الهيدر */
  #h1 {
    font-size: 36px;
  }
  #p1, #p2 {
    font-size: 16px;
  }

  /* الصورة والنص */
  .cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cont img {
    position: static !important;
    width: 180px;
    height: 180px;
    margin: 20px auto;
  }
  .tex {
    position: static !important;
    margin-top: 20px;
    padding: 0 15px;
    text-align: center;
  }

  /* skills section */
  .skills {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 40px;
    text-align: center;
  }
  .skills div {
    position: static !important;
  }
  .skills span, .skills i {
    position: static !important;
    display: block;
    margin: 0 auto;
  }

  /* blog section */
  .blog .v-s {
    flex-direction: column;
    align-items: center;
  }
  .blog iframe {
    width: 100% !important;
    height: auto !important;
  }

  /* contact form */
  .con-text form {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .con-text .name,
  .con-text .email,
  .con-text .subject,
  .con-text .ms {
    width: 90% !important;
    position: static !important;
    margin: 10px 0;
  }
  .btn-send {
    position: static !important;
    margin-top: 20px;
    width: 100px;
  }
}

/* ====== التابلت (768px - 1200px) ====== */
@media (min-width: 768px) and (max-width: 1200px) {
  #h1 {
    font-size: 50px;
  }
  .skills {
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* ====== الشاشات الكبيرة (أكبر من 1200px) ====== */
@media (min-width: 1200px) {
  .container {
    padding: 0 80px;
  }
}