*{
    margin: 0%;
    padding: 0%;
    border: 0;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif
}
body{
    height: 100vh;
    width: 100vw;
   display: grid;
   grid-template-columns: 20% 80%;
   grid-template-rows: 300px 1fr;
 grid-template-areas:
  "sidebar header"
  "sidebar main";
   box-sizing: border-box;
}
svg{
    width: 1.8rem;
    height: 1.8rem;
    fill:currentColor;
    margin-right: 8px;
}
img{
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    margin-right: 5px;
    border: 2px solid blue;
}
.sidebar{
    grid-area: sidebar;
    padding: 20px;
    display: grid;
    grid-template-rows: 10% 40% 20%;
    background-color: rgb(72, 72, 165);
    color: #eee;
    font-size:1.5rem;
    gap: 10px;

}
.sidebar a{
    text-decoration: none;
    color: #eee;
     transition: background 0.3s ease, color 0.3s ease;
     display: inline-block;
     padding: 10px 75px 10px 10px;
     border-radius: 5px

}
a:hover{
    background: rgb(171, 176, 220);           
  color: #171338;  
}
#title {
    font-size: 2rem;
    font-weight: bold;
}
#firstlinks ,.lastlinks{
    display: flex;
    flex-direction: column;
    gap: 20px;

}
.lastlinks{
    margin-top: 75px;
}
.header{
    grid-area: header;
    padding: 40px;
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-rows: auto 1fr ;
    background-color: rgb(253, 253, 253);
    box-sizing: border-box;
}
.input{
    display: flex;
    gap: 8px;
}
input{
    height: 15px;
    width: 500px;
    border-radius: 40px;
    background-color: #d1e1eb;
    border: 2px solid transparent;
     transition: border-color 0.3s ease;
     padding: 10px;
     color: #171338;
     font-size: medium;
}
input:focus{
    border: 2px solid #847cda;
}
.pfp{
    display: flex;
    align-items: center;
    justify-content: center;
    gap:20px;
    box-sizing: border-box;
}
#acc{
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 20px;
    font-weight: 500;

}
#bell{
    display: inline-block;
    transition: transform 0.3s ease;
    cursor: pointer;
}
#ball:hover{
    transform: scale(1.05);
}
.greeting{
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 35px;
}
#logo{
    height: 85px;
    width: 85px;
    border-radius: 50%;
    top: 100%;
}
.geetingtext{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
#name{
    font-weight: bold;
    font-size: 25px;
}
.Headerbtn{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-items: center;
    gap: 10px;
    margin-left: 119px;
}
.btn {
  background-color: rgb(72, 72, 165);   /* لون الخلفية */
  color: #fff;                 /* لون النص */
  border: none;                /* بدون حدود */
  padding: 12px 24px;          /* حجم الزر */
  border-radius: 8px;          /* زوايا مدورة */
  font-size: 1rem;             /* حجم الخط */
  cursor: pointer;             /* شكل المؤشر */
  transition: transform 0.2s ease, box-shadow 0.2s ease; /* انتقال للتكبير والظل */
  display: inline-block;       /* يخلي الزر ياخذ المحتوى بس */
}

.btn:hover {
  transform: scale(1.05);      /* يكبر الزر شوي */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* يضيف ظل */
}
.main{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background-color: rgb(215, 234, 250);
    color: #171338;
}
.second{
    height: 100%;
    width:25% ;
    display: flex;
    flex-direction: column;
}
.container{
   
     display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
}
.projects{
    height: 100%;
    width: 75%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 25px;
}
.card {
  background: #fbfcfc;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: scale(1.02);
}
h3{
    font-size: 1rem;
   margin-bottom: 7px;
}
.card p{
    margin-bottom: 15px;
    opacity: 0.8;
}
.card .cardbtn{
    display: flex;
    justify-content: end;
    gap: 10px;
}
.card button{
    background-color: transparent;
    cursor: pointer;
    transition: transform 0.3s ease;
}
.card button:hover {
  transform: scale(1.02);
}
.second{
    margin: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
    justify-content: center;
}
.annous{
     background: #fbfcfc;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.trending{
    min-width: 85%;
     background: #fbfcfc;
  padding: 1.5rem;
  border-radius: 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.annouslist {
  list-style: none; /* يشيل الدوتات */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* مسافة بين العناصر */
}

.annouslist li {
  background: transparent; /* لون الخلفية */
  border-radius: 8px; /* حواف ناعمة */
  padding: 1rem 1.5rem; /* مسافة داخلية */
  border-bottom: 2px solid #3333337e;

}


.annouslist h3 {
  margin: 0 0 0.5rem 0; /* مسافة تحت العنوان */
  font-size: 1.2rem; /* حجم الخط */
  color: #333; /* لون العنوان */
}

.annouslist p {
  margin: 0;
  font-size: 0.95rem; /* حجم الخط */
  color: #555; /* لون الوصف */
  line-height: 1.4; /* تباعد الاسطر */
}
.trendlist {
  list-style: none; /* يشيل الدوتات */
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* مسافة بين العناصر */
}

.trendlist li {
    display: flex;
    flex-direction: row;
    gap: 5px;
  background: transparent; /* لون الخلفية */
  border-radius: 8px; /* حواف ناعمة */
  padding: 1rem 1.5rem; /* مسافة داخلية */

}


.trendlist h4 {
  margin: 0 0 0.3rem 0; /* مسافة تحت العنوان */
  font-size: 1.4rem; /* حجم الخط */
  color: #333; /* لون العنوان */
}

.trendlist p {
  margin: 0;
  font-size: 0.95rem; /* حجم الخط */
  color: #555; /* لون الوصف */
  line-height: 1.4; /* تباعد الاسطر */

}
.acctext{
    display: flex;
    flex-direction: column;
    gap:0.5px;
}