@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@100;200;300;400;500;600;700;800;900&display=swap');


* {
  margin: 0;
  padding: 0;
  margin-left: 15px;
  font-family: "Poppins", sans-serif;
}

a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 5px;
  text-decoration: none;
  color: black;
  
}

img {
  margin-top: 6%;
  margin-bottom: 10%;
}

nav {
  display: flex;
  padding: 10;
  margin: 0 5px;
  text-align: center;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  transition: border 0.3s ease;
  margin-right: 85px;
}

nav .logo {
  display: flex;
  align-items: center;
  justify-content: right;
}

nav .logo img {
  display: flex;
  width: 50px;
  height: 50px;
  align-items: center;
  justify-content: left;
  border-radius: 200px;
}

nav .logo a {
  color: #000;
}

nav .nav-links {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

nav .nav-links a:hover,
nav .nav-links a.selected {
  border: 2px solid black;
  border-radius: 25px;
  padding: 8px;
}

.main {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: calc(100vh -80px);
}

.main .info h1 {
  color: black;
  font-size: 50px;
  font-weight: 900;
}

.main .info p {
  color: #454545;
  font-weight: 700;
  font-size: 15px;
}

.main .info button {
  background-color: #2418B4;
  border-radius: 5px;
  border: none;
  padding: 7px;
  color: white;
  transition: border, border-radius, padding 1s ease;

}

.main .info button:hover {
  border: 3px solid black;
  border-radius: 20px;
  padding: 10px;
}

.main img {
  display: flex;
  width: 350px;
  height: 350px;
  border-radius: 139px;
  margin-right: 85px;
  margin-top: 5%;
  padding: 20px;
}




/*---------------------------------------------------------------------------------------------------------------------------------*/




.recent {
  /* display: flex;
  justify-content: space-between;
  align-items: flex-start; */
  background: rgba(0, 156, 255, 0.18);
  padding: 50px;
}

.recent .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
}

.header{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.recent .header h4,
.separator h4 {
  margin-left: 20px;
  position: absolute;
  padding: 10px 10px 60px;
  margin-top: 10px;
  
}

.recent .header a {
  right: 30px;
  position: absolute;
  padding: 10px 10px 60px;
  margin-top: 10px;
  color: blue;
}

.recent .posts {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.recent .posts:first {
  position: relative;
  left: 50%;
  
}


.recent .posts .post-item {
  width: 35%;
  background-color: #FFF;
  padding: 20px;
  border-radius: 10px;
  gap: 1rem;
}

.recent .posts .post-item h3 {
  font-weight: 900;
  font-size: 20px;
}

.recent .posts .post-item .info {
  display: flex;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
}

.recent .posts .post-item .info h5 {
  font-weight: 700;
  font-size: 14px;
}

.separator {
  border: 2px solid black;
  border-radius: 25px;
}

.separator h4 {
  font-size: 20px;
  font-weight: 100;
  font-style: normal;
}

.featured {
  margin: auto;
  margin-right: 85px;
  margin-left: 85px;
}

.featured .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.featured .item img {
  width: 220px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}


.featured .item img .item-info{
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.featured .item .details h3 {
  font-size: 30px;
  font-weight: 700;
}

.featured .item .details .item-info {
  display: flex;
  justify-content: space-between;
  gap: 0.65rem;
  margin-bottom: 0.65rem;
  width: 1%;
  color: #2418B4;
  align-items: center;
}

.featured .item .details .item-info .year-badge {
  background-color: #2418B4;
  border-radius: 20px;
  padding: 5px;
  color: white;
  margin-right: 95.3%;
  
}


.hr{
  border: 2px solid black;
  height: 0.00000001px;
  width: 100%;
}

footer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}


footer .socials i {
  font-size: 40px;
  transition: color 0.3s ease-in-out;
  transition: border 0.3s ease-in-out;
}

footer .socials i:hover {
  color: #2418B4;
  border: 2px solid black;
  border-radius: 25px;
}

footer p {
  font-size: 10px;
  font-weight: 500;
}