body
 {
    background-color: #f5f5f5;
 }
 header{
    background-image: url(./img/hero-bg.jpg);
    background-position: center;
    background-size: cover;
    height: 100vh;
}
.icon-l
{
    font-size: 50px;
}
.Servies
{
    background-color: #fff;
    padding: 2.5rem 1.3rem;
    border-radius: 1rem;
    margin-bottom: 3rem;
}
.se-bt{
    background-image:url(./img/post-3.jpg)   ;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    height: 75vh;
   
  
}

.over   
{
    height: 75vh;
}
.over-imglayer
{
    background-image: url(./img/overlay-bg.jpg);
}
.width-30{
    width: 30px;
}
.icon-con
{
    letter-spacing: 3px;
}
.n-ivon:hover{
    color: #007aff;
}



/* ====== General ====== */
html, body {
  scroll-behavior: smooth;
}
header {
  height: 100vh;
  background: url("img/hero-bg.jpg") center/cover no-repeat;
  position: relative;
}
header::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
}
header h1 {
  position: relative;
  z-index: 2;
  font-size: 3rem;
  animation: fadeDown 1.5s ease-in-out;
}

/* ====== Navbar ====== */
.navbar {
  transition: all 0.4s ease-in-out;
}
.navbar.scrolled {
  background: rgba(0,0,0,0.8) !important;
}

/* ====== Services Cards Hover ====== */
.servies {
  background: #fff;
  border-radius: 15px;
  transition: transform .4s, box-shadow .4s;
  padding: 20px;
}
.servies:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
}

/* ====== Portfolio Hover ====== */
.inner img {
  border-radius: 10px;
  transition: transform .5s ease;
}
.inner:hover img {
  transform: scale(1.1);
}
.n-ivon {
  cursor: pointer;
  transition: transform .3s ease;
}
.inner:hover .n-ivon {
  transform: rotate(90deg) scale(1.2);
  color: #0d6efd;
}

/* ====== Blog cards ====== */
.po {
  transition: transform .4s, box-shadow .4s;
}
.po:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* ====== Contact icons hover ====== */
.icon-con a i {
  transition: transform .3s, color .3s;
}
.icon-con a:hover i {
  transform: scale(1.2);
  color: #0d6efd;
}

/* ====== Animations ====== */
@keyframes fadeDown {
  0% {opacity: 0; transform: translateY(-50px);}
  100% {opacity: 1; transform: translateY(0);}
}

/* ====== Responsive Fix ====== */
@media (max-width: 992px) {
  header h1 {
    font-size: 2rem;
    text-align: center;
  }
  .servies {
    margin-bottom: 20px;
  }
  .inner {
    margin-bottom: 20px;
  }
  #contact .row {
    flex-direction: column;
  }
}

@media (max-width: 576px) {
  header h1 {
    font-size: 1.6rem;
  }
}



.animated-text::after {
  content: "Morgan Freeman"; /* النص الأول */
  animation: changeText 5s infinite; /* يتغير كل 12 ثانية */
  font-weight: bold;
  color: #fff;
}

/* الأنيميشن */
@keyframes changeText {
  0%   { content: "Morgan Freeman"; }
  25%  { content: "Software Developer"; }
  50%  { content: "Full Stack Engineer"; }
  75%  { content: "UI/UX Designer"; }
  100% { content: "Morgan Freeman"; }
}