* {
   margin: 0%;
}

.body {
   background-color: #f5f5f5;
}

/* SECTION HEADER */

.section-heading {
    align-self: stretch;
    width: 100%;
    color: black;
    font: 700 29px/1.2 "Montserrat", sans-serif;

}

.header-underline-container {
    display: flex;
    margin-top: 8px;
    width: 80px;
    flex-direction: column;
    justify-content: center;
}

.header-underline {
    background-color: #FCA311;
    min-height: 8px;
    width: 100%;
}



/* RETURN BUTTON */

.back-to-home-page {
   display: flex;
   flex-direction: row;
   padding: 16px 128px;
   gap: 8px;
   align-items: center;
   /* margin-bottom: 40px; */
}



.back-icon img{
   object-fit: contain;
   width: 24px;
   /* height: 24px; */
}

.back-to-home-page-text {
   flex: 1;
   min-width: 240px;
   color: black;
   font: 400 15px/1.2 "Lora", sans-serif;
}


/* UPDADTES SECTION */

.news-and-updates-section {
   padding: 40px 128px;
}

.enlarged-update-container {
   display: flex;
   flex-direction: column;
   margin-bottom: 40px;
}

.latest-article-image {
   object-fit: cover;
   object-position: center;
   height: 560px;
   width: 100%;
   border-radius: 24px;
}

.enlarged-update-content-container {
   background-color: #101a31;
   /* background-color: #FCA311; */
   color: white;
   opacity: 85%;
   border-radius: 16px;
   height: 140px;
   margin-left: 16px;
   margin-right: 16px;
   margin-top: -200px;
   margin-bottom: 40px;
   padding: 16px 16px;
}

.enlarged-update-content-heading {
   font: 600 23px/1.2 "Montserrat", sans-serif;
   opacity: 100%;
}

.enlarged-update-content-text {
   font: 400 19px/1.2 "Lora", sans-serif;
   margin-top: 8px;
}


.main-update-container {
   background-color: black;
   max-width: 0 !important;
   border-radius: 24px;
   display: flex;
   flex-direction: column;
   color: white;
   padding: 480px 24px 24px;

}

.main-update-content {
   border-radius: 16px;
   display: flex;
   width: 100%;
   flex-direction: column;
   padding: 40px;
   border: 2px solid rgba(16, 26, 48, 1);
}

.main-update-title {
   align-self: stretch;
   flex: 1;
   width: 100%;
   font: 700 29px/1.2 "Montserrat", sans-serif;
}

.main-update-text {
   align-self: stretch;
   flex: 1;
   margin-top: 24px;
   width: 100%;
   font: 600 15px/1.2 "Lora", sans-serif;
}

.updates-blog-row-container {
   margin-top: 40px;
   margin-bottom: 40px;
   display: flex;
   gap: 24px;
   
}

.update-blog-card {
   border-radius: 24px;
   background-color: #101a31;
   display: flex;
   width: 33%;
   flex-direction: column;
   color: white;
   padding: 40px;
}

.update-blog-image {
   aspect-ratio: 1.37;
   object-fit: cover;
   width: 100%;
   border-radius: 16px;
}

.update-blog-content {
   display: flex;
   margin-top: 24px;
   width: 100%;
   flex-direction: column;
}

.update-blog-title {
   font: 700 23px/28px "Montserrat", sans-serif;
}

.update-blog-container {
   display: flex;
   margin-top: 24px;
   width: 100%;
   flex-direction: column;
}

.update-excerpt {
   font: 400 15px/18px "Lora", sans-serif;
}

.update-blog-meta {
   display: flex;
   margin-top: 24px;
   width: 100%;
   align-items: center;
   gap: 8px;
   font: 700 15/1.2 "Montserrat", sans-serif;
}

.meta-item {
   display: flex;
   align-items: center;
   gap: 8px;
}

.meta-separator {
   background-color: #FCA311;
   width: 4px;
   height: 16px;
}

.visually-hidden {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border: 0;
}

.update-load-button {
   display: flex;
   justify-content: center;
   margin-bottom: 40px;
}

.load-more {
   background-color: #FCA311;
   color: white;
   height: 40px;
   width: 160px;
   border-radius: 24px;
   font: 700 15px/1.2 "Montserrat", sans-serif;
}


/**MEDIA QUERY **/
@media (max-width: 720px) {
  
   /* UPDATES SECTION */
   .news-and-updates-section {
      padding: 10px 12px; 
  }

  .enlarged-update-container {
      display: flex;
      flex-direction: column;
      margin-bottom:60px; 
  }

  .latest-article-image {
      object-fit: cover;
      object-position: center;
      height: 400px; 
      width: 100%;
      border-radius: 16px; 
  }

  .enlarged-update-content-container {
      background-color: #101a31;
      color: white;
      opacity: 85%;
      border-radius: 16px;
      height: 120px; 
      margin-left: 8px; 
      margin-right: 8px;
      margin-top: -145px; 
      padding: 12px;
  }

  .enlarged-update-content-heading {
      font: 600 18px/1.2 "Montserrat", sans-serif; 
  }

  .enlarged-update-content-text {
      font: 400 16px/1.2 "Lora", sans-serif; 
      margin-top: 8px;
  }

  .main-update-container {
      background-color: black;
      border-radius: 16px; 
      display: flex;
      flex-direction: column;
      color: white;
      padding: 24px;
  }

  .main-update-content {
      border-radius: 16px;
      display: flex;
      width: 100%;
      flex-direction: column;
      padding: 24px;
  }

  .main-update-title {
      font: 700 23px/1.2 "Montserrat", sans-serif; 
  }

  .main-update-text {
      font: 600 14px/1.2 "Lora", sans-serif;
      margin-top: 16px;
  }

  .updates-blog-row-container {
      margin-top: 24px;
      margin-bottom: 24px; 
      display: flex;
      gap: 16px; 
      flex-direction: column; 
  }

  .update-blog-card {
      border-radius: 16px;
      background-color: #101a31;
      display: flex;
      width: 86%;
      flex-direction: column;
      color: white;
      padding: 24px;
      margin-bottom: 16px;
  }

  .update-blog-image {
      aspect-ratio: 1.37;
      object-fit: cover;
      width: 100%;
      border-radius: 16px;
  }

  .update-blog-content {
      display: flex;
      margin-top: 16px;
      width: 100%;
      flex-direction: column;
  }

  .update-blog-title {
      font: 700 18px/22px "Montserrat", sans-serif; 
  }

  .update-excerpt {
      font: 400 14px/18px "Lora", sans-serif;
  }

  .update-blog-meta {
      display: flex;
      margin-top: 16px;
      width: 100%;
      align-items: center;
      gap: 8px;
      font: 700 14px/1.2 "Montserrat", sans-serif; 
  
  }
  .meta-item {
      display: flex;
      align-items: center;
      gap: 8px;
  }

  .meta-separator {
      background-color: #FCA311;
      width: 4px;
      height: 12px;
  }

  .update-load-button {
      display: flex;
      justify-content: center;
      margin-bottom: 24px; 
  }

  .load-more {
      background-color: #FCA311;
      color: white;
      height: 40px;
      width: 160px;
      border-radius: 24px;
      font: 700 14px/1.2 "Montserrat", sans-serif; 
  }
}