@import url('https://fonts.googleapis.com/css2?family=Almarai:wght@300;400;700;800&family=Cairo:wght@200..1000&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');



*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    font-family: 'Almarai' , sans-serif;
}


.header-banner {
   position: relative;
   height: 180px;
   background-image: url('../media/intro.jpg'); 
   background-size: cover;
   background-position: center;
   overflow: hidden;
   direction: rtl;
}

.arrow-left {
   transform: rotate(90deg); 
   display: inline-block;
 }

.header-banner::before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.5); 
   z-index: 1;
}

.header-banner .overlay {
   position: relative;
   z-index: 2;
   color: #fff;
   text-align: center;
   padding: 30px;

}

.header-banner h1 {
   font-size: 35px;
   display: flex;
   font-weight:bold;
  
}

.header-banner p {
   margin-top: 10px;
   font-size: 20px;
   color: #f2c64d;
   display: flex;
   font-weight: bold;


}

    

.header-banner a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight:normal;
    transition: color 0.3s ease;
 
}
.header-banner a:hover {
   color: #c2c2c2;
 }


 .content {
    margin: 50px;
    display: flex;
    flex-direction: column;      
    justify-content: center;
    align-items: center;
    gap: 20px;                  
  }
  
  .content img {
    max-width: 100%;             
    height: auto;
  }
  
  .name {
    text-align: center;          
  } 
  .posted-date{
   color: #777777;
   opacity: 70%;
  }
  .content-list{
   font-size: large;
   font-weight: 400;
   margin:10px 0px;
   color: #777777;
  }
/*footer

.footer {
   background: #0a1128;
   color: #fff;
   padding: 40px 0;
}
.footer a {
   color: #fff;
   text-decoration: none;

}
.footer a:hover {
   text-decoration: underline;
color: rgb(145, 145, 208);
}
.footer .icon {
   font-size: 20px;
   margin-left: 10px;
}
.footer-logo {
   display: flex;
   align-items: center;
}
.footer-logo img {
   width: 80px;
   margin-left: 10px;
}
.text-light{align-items: center;
   border: 1px solid white;
   border-radius: 50%;
   margin-left: 5px;
   padding: 5px 9px 6px 1px;
   
}
.text-light:hover{
   background-color: rgba(255, 255, 255, 0.236);
}