* {
    margin: 0%;
 }

 .body {
    background-color: #fcfcfc;
 }
 
 /* SECTION HEADER */

.section-header {
    display: flex;
    justify-content: center;
    padding: 0 128px;
 }
 
 .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%;
 }

/* NAVIGATION PANE */

.navigation-bar-container {
    background-color: #101a31;
    display: flex;
    flex-direction: column;
    justify-content: start;
    padding: 16px 128px;
 }
 
 .top-bar {
    display: flex;
    min-height: 100px;
    width: 100%;
    align-items: center;
    justify-content: end;
    justify-content: space-between;
    justify-content: end;
    flex-wrap: wrap;
    
 }
 
 .logo-wrapper {
    align-self: stretch;
    display: flex;
    min-width: 240px;
    min-height: 80px;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
 }
 
 .company-logo {
    aspect-ratio: 1.88;
    object-fit: cover;
    object-position: center;
    width: 150px;
    max-width: 150px;
 }
 
 .nav-contact-info-row {
    display: flex;
    flex-direction: row;
 }
 
 .nav-contact-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
 }
 
 .nav-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 3px;
 }
 
 .nav-contact-icon img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 24px;
 }
 
 .nav-contact-text {
    flex: 1;
    min-width: 80px;
    color: white;
    font: 600 15px/1.2 "Montserrat", sans-serif;
 }
 
 
 .navigation-links-container {
    display: flex;
    justify-content: space-between;
    justify-content: center;
    justify-items: center;
    margin-top: 16px;
    margin-bottom: 16px;
 }
 
 .navigation-bar {
    /* background-color: chartreuse; */
    display: flex;
    width: 100%;   
    gap: 8px;
    
 }
 
 .nav-button {
    display: flex;
    justify-content: center;
    border-radius: 24px;
    /* height: 40px; */
    width: 160px;
    font: 600 15px/1.2 "Montserrat", sans-serif;
    text-align: center;
    color: white;
    border: 2.5px solid white;
    text-align: center;
 }

 .nav-button:hover {
   background-color: white;
   color: black;
 }
 
 .navigation-bar a {
    padding: 8px 0;
    text-decoration: none;
 }

 .nav-button-highlight {
   background-color: #fca31f;
   border: none;
 }
 
 /* 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;
 }


/* ARTICLE HEADER */

.featured-article-section {
  padding: 40px 128px;
}

.article-header-content {
   display: flex;
   max-width: 100%;
   flex-direction: column;
   line-height: 1.2;
   justify-content: start;
}

.article-featured-tag {
   align-self: center;
   text-align: center;
   border-radius: 24px;
   background-color: #fca31f;
   color: white;
   padding: 16px 0;
   width: 160px;
   font: 700 12px "Montserrat", sans-serif; 
}

.article-content-wrapper {
   display: flex;
}

.content-title {
   align-self: center;
   text-align: center;
   margin-top: 24px;
   flex: 1;
   width: 100%;
   font: 700 23px "Montserrat", sans-serif;
}

.content-date {
   align-self: center;
   text-align: center;
   margin-top: 16px;
   width: 100%;
   font: 400 15px "Lora", sans-serif;
}

.feature-image-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  margin: 40px 0;
}

.featured-image {
   aspect-ratio: 2.72;
   object-fit: cover;
   object-position: center;
   height: 480px;
   width: 100%;
   border-radius: 24px;
   max-width: 1472px;
}

/* LATEST UPDATES CARD */

.sidebar-and-article-cintent {
   display: flex;
}

.overall-container {
   display: flex;
}

.latest-updates-container {
   border-radius: 24px;
   background-color: #101a31;
   display: flex;
   max-width: 480px;
   width: 40%;
   flex-direction: column;
   padding: 40px 40px;
   height: fit-content;
}

.latest-updates-title {
   color: white;
   font: 700 29px/1.2 "Montserrat", sans-serif;
   margin-bottom: 40px;
}

.updates-grid {
   display: flex;
   flex-direction: column;
   gap: 40px;
}

.update-item {
   display: flex;
   min-height: 200px;
   gap: 24px;
   flex-wrap: wrap;
}

.update-image-wrapper {
   display: flex;
   min-width: 200px;
   flex: 1;
   padding: 16px;
}

.updates-post-image {
   aspect-ratio: 1.16;
   object-fit: cover;
   object-position: center;
   width: 240px;
   border-radius: 24px;
   flex: 1;
}

.update-content {
   display: flex;
   min-width: 200px;
   flex-direction: column;
   color: white;
   flex: 1;
   justify-content: center;
   
}

.update-title {
   font: 700 19px/23px "Montserrat", sans-serif;
   margin-bottom: 16px;
}

.update-description {
   font: 400 15px/18px "Lora", sans-serif;
   margin-bottom: 24px;
}

.read-more-link {
   font: 600 15px/1.2 "Lora", sans-serif;
   color: white;
   text-decoration: none;
}

.latest-update-article-content {
   display: flex;
   width: 50%;
}

.article-story-content {
   padding: 40px 40px;
   font: 400 19px/23px "Lora", sans-serif;
   margin-top: 24px;
   margin-bottom: 24px;
}

/* COURSES RECOMMENDATIONS SECTION */



.courses-card-container {
   display: flex;
   padding: 40px 128px;
   gap: 24px;
}

.courses-card {
   border-radius: 24px;
   background-color: #101a31;
   display: flex;
   width: 240px;
   flex-direction: column;
   color: white;
   padding: 24px;
   font: 600 12px/1.2 "Lora", sans-serif;
}

.courses-recommendation-img {
   aspect-ratio: 1.37;
   object-fit: cover;
   object-position: center;
   width: 100%;
   border-radius: 16px;
}

.courses-recommendation-details {
   display: flex;
   margin-top: 24px;
   width: 100%;
   flex-direction: column;
}

.courses-recommendation-header {
   display: flex;
   width: 100%;
   align-items: start;
   gap: 8px;
   font-family: "Montserrat", sans-serif;
}

.courses-recommendation-type,
.courses-recommendation-level {
   flex: 1;
}

.courses-recommendation-level {
   text-align: right;
}

.courses-recommendation-title {
   margin-top: 8px;
   font-size: 19px;
}

.courses-recommendation-issuer {
   margin-top: 8px;
   font-weight: 400;
} 

.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;
   border-style: none;
   text-decoration-style: none;
}



 /* FOOTER SECTION */

 .footer-content {
    display: flex;
    padding: 40px 40px;

}

.image-container{
    display: flex;
    flex-direction: column;
    width: 33%;
    justify-content: center;
    padding: 64px 16px;
}

.full-width-image {
    aspect-ratio: 1.24;
    object-fit: contain;
    object-position: center;
    width: 66%;
    border-radius: 24;
}

 .footer-content-container{
    font-display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 100%;
 }

 .social-links {
    align-self: flex-start;
    display: flex;
    align-items: flex-start;
    gap: 16px;
 }

 .social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    padding: 6px;
    overflow: hidden;
 }

 .social-icon img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 36px;
 }

 .contact-info {
    display: flex;
    margin-top: 40px;
    width: 100%;
    flex-direction: column;
    gap: 24px;
 }

 .contact-item {
    display: flex;
    width: 100%;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
 }

 .contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    padding: 3px;
 }

 .contact-icon img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 24px;
 }

 .contact-text {
    flex: 1;
    min-width: 240px;
    color: white;
    font: 400 12px/1.2 "Lora", sans-serif;
 }

 .footer-bottom {
    display: flex;
    margin-top: 120px;
    width: 100%;
    align-items: center;
    color: white;
    justify-content: center;
    flex-wrap: wrap;
    gap: 40px;
    font: 400 12px/1.2 "Lora", sans-serif;
 }

 .copyright{
    display: flex;
    min-width: 240px;
    align-items: center;
    gap: 8px;
    font-weight: 400;
 }

 .copyright img {
    aspect-ratio: 1;
    object-fit: contain;
    width: 24px;
 }

 .footer-nav {
    display: flex;
    min-width: 240px;
    align-items: center;
    gap: 24px;
    font-weight: 600;
 }

 .footer-nav a {
    color: #fff;
    text-decoration: none;
}

.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;

}

.contact-info,
.contact-item,
.footer-bottom,
.copyright,
.footer-nav {
  max-width: 100%;
}

.contact-text,
.footer-nav a {
  white-space: normal;
}


 .footer-container{
    display: flex;
    background-color: #101a31;
    width: auto;
    height: 520px;
    padding: 40px 128px;
 }