body {
  margin: 0;
   background: #213AD9;
}

header {
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.121);
}

.nav {
  
    width: 100%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  
    background: #213AD9;
}

.nav_inner {
    align-items: center;
     display: flex;
    justify-content: space-between;
    max-width: 1300px;
    width: 100%;
  margin: 0 auto;
    gap: 0;

}

.nav_logo svg {
    height: 50px;
    width: auto;
    color: #FB2597;
}

.nav_links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
}

.nav_links a {
    text-decoration: none;
    /* color:#D5962B; */
    color:#f5e6cf;
  font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 250;
}

.nav_links a:hover { text-decoration: underline; }

.nav_contact {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.nav_contact a {
    text-decoration: none;
    color: #f5e6cf;
  font-family: 'Outfit', sans-serif;
    font-size: 19px;
    font-weight: 250;
      background: #d5972b00;
      border: 3px solid #D5962B;
      padding: 6px 16px;
      border-radius: 23px;
}

/* ── HERO ─────────────────────────────────────────────────── */


main {
  background-color: #213AD9;
}

.hero_inner {
    /* min-height: inherit; */
  max-width: 1300px;
  margin: 0 auto;
  /* padding: 20px 24px 0px; */
  display: flex;
  flex-direction: column;
  gap: 80px;
  background-color: #ffffff11;
  border-radius: 18px;
  /* border: 4px solid #ffffffd2; */
  box-shadow: 0 0 22px rgba(0, 0, 0, 0.074), 
  inset 0 0 24px rgba(245, 230, 207, 0);
}

#main-hero {
  background-color: #213AD9;
  margin-top: 60px;
}

.main-hero_layout {
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  aspect-ratio: 2284 / 806;
  padding: 24px;
  background-image: linear-gradient(90deg, rgba(33, 58, 217, 0.82) 0%, rgba(33, 58, 217, 0.38) 42%, rgba(33, 58, 217, 0) 62%), url("../images/aviation-hero2.png");
  background-position: left top, right center;
  background-repeat: no-repeat;
  background-size: auto, contain;
}

.hero_text {
  flex: 0 1 auto;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

#main-hero .project-title {
  font-size: clamp(1.1rem, 5.2vw, 4.5rem);
}

/* =============================================
   PROJECT PAGE 
   ============================================= */

.project-main {
  padding: 0;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
  gap: 80px;
  background-color: #213AD9;
}

.project-main2 {
  padding: 0;
  display: flex;
  margin-top: 30px;
  flex-direction: column;
  gap: 80px;
  background-color: #ffffff;
}

.project-title {
  font-family: "outfit", sans-serif;
  font-size: clamp(2rem, 6vw, 4.5rem);
  font-weight: 700;
  line-height: 0.84;
  color: #F5E6CF;
   /* color:  #1a2eb1; */
  margin: 0;
  letter-spacing: -0.01em;
}



.hero-videos-section {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid #f5e6cf;
  padding-top: 32px;
}

.hero-videos-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5e6cf;
  margin: 0 0 20px;
}

.hero-videos-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

.hero-video-card {
  /* border: 1px solid #e0e0e0; */
  background: #efefef00;
  border-radius: 18px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}

.hero-video-card video {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 18px 18px 0 0;
 
}

.hero-video-note {
  margin: 0;
  padding: 14px 16px 16px;
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  line-height: 1.7;
  color: #F5E6CF;
  /* border-top: 1px solid #e0e0e0; */
  
}

/* Tools Used */
.tools-section {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid #f5e6cf;
  padding-top: 32px;
}

.tools-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5e6cf;
  margin: 0 0 20px;
}

.tools-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tools-list li {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 500;
  /* border: 1px solid #000; */
  background: #d5972b00;
  border: 3.5px solid #D5962B;
  padding: 6px 16px;
  color: #f5e6cf;
  letter-spacing: 0.05em;
  border-radius: 20px;
}

.tools-list li:nth-child(-n+2),
.tools-list li:nth-child(4) {
  background: #fb259700;
  border: 3.5px solid #FB2597;
}

/* Overview */
.overview-section {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid #f5e6cf;
  padding-top: 32px;
}

.overview-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #f5e6cf;
  margin: 0 0 20px;
}

.overview-section p {
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  line-height: 1.5;
  color: #f5e6cf;
  max-width: 920px;
  margin: 0;
}





/* Process Process Process Process Process Process Process */
.process-section {
  /* max-width: 1300px; */
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  /* border-top: 1px solid #f5e6cf; */
  padding-top: 32px;
  background-color: white;
}

.process-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin: 0 0 20px;
}

.process-section p {
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  line-height: 1.5;
  color: #747474;
  max-width: 920px;
}

.process-section-inner {
  max-width: 1300px;
  margin: 0 auto;
}


/* Image Showcase */

.showcase-section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin: 0 0 20px;
}

.showcase-section-inner {
  max-width: 1300px;
  margin: 0 auto;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "spread spread"
    "stack facebook";
  gap: 16px;
  align-items: start;
}

.showcase-item--spread {
  grid-area: spread;
}

.showcase-stack {
  grid-area: stack;
  display: grid;
  gap: 16px;
}

.showcase-item img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}

.showcase-item--stacked img {
  object-fit: contain;
}

.showcase-item--facebook img {
  object-fit: contain;
}

.showcase-item--facebook {
  grid-area: facebook;
}

/* logo */

.logo-section {
  /* max-width: 1300px; */
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  
  padding-top: 32px;
  background-color: white;
}

.logo-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin: 0 0 20px;
}

.logo-section-inner {
  max-width: 1300px;
  margin: 0 auto;
  border-top: 9px solid transparent;
  border-image: linear-gradient(to right, rgba(33, 58, 217, 0) 0%, rgba(33, 58, 217, 0.78) 9%, #213AD9 50%, rgba(33, 58, 217, 0.78) 91%, rgba(33, 58, 217, 0) 100%) 1;
  padding-top: 40px;

}

.logo-layout {
  display: grid;
  grid-template-columns: minmax(180px, 320px) 1fr;
  grid-template-areas: "image text";
  gap: 28px;
  align-items: center;
  
}

.logo-layout_image {
  grid-area: image;
}

.logo-layout_text {
  grid-area: text;
}

.logo-layout_image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 7px;
  background-color: white;
  padding: 11px; 
   /* box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3); */
  }



.logo-layout_text p {
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  line-height: 1.8;
  color: #747474;
  margin: 0;
}

.instagram-section {
  /* max-width: 1300px; */
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  padding-top: 32px;
  background-color: white;
}

.instagram-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin: 0 0 20px;
}

.instagram-section-inner {
  max-width: 1300px;
  margin: 0 auto;
  border-top: 9px solid transparent;
  /* border-image: linear-gradient(to right, rgba(33, 58, 217, 0) 0%, rgba(33, 58, 217, 0.78) 9%, #213AD9 50%, rgba(33, 58, 217, 0.78) 91%, rgba(33, 58, 217, 0) 100%) 1; */
  /* justify-content: center; */
  padding-top: 40px;
}

.instagram-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.instagram-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.205);
}


/* Impact & Outcomes Impact & Outcomes Impact & Outcomes  */
.impact-section {
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  padding-left: 24px;
  padding-right: 24px;
  padding-bottom: 100px;
  border-top: 1px solid #f5e6cf;
  padding-top: 32px;
}

.impact-section p {
  font-family: "Montserrat", sans-serif;
  font-size: 21px;
  line-height: 1.5;
color: #747474;
  max-width: 920px;
  margin: 0;
}



.impact-section .section-label {
  font-family: 'Outfit', sans-serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #b7b7b7;
  margin: 0 0 20px;
}

/* Responsive — stack single column on mobile */
@media (max-width: 600px) {
  .main-hero_layout {
    min-height: 180px;
    padding: 40px 16px 32px;
    background-size: auto, 58%;
  }

  .hero_text {
    max-width: 62%;
  }

  .project-title {
    font-size: clamp(1.35rem, 6vw, 2.6rem);
  }

  .showcase-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "spread"
      "stack"
      "facebook";
  }

  .instagram-grid {
    grid-template-columns: 1fr;
  }

  .logo-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "image"
      "text";
    align-items: start;
  }

  .project-main {
    gap: 48px;
    padding: 0;
  }

    .project-main2 {
    gap: 48px;
    padding: 0;
  }

  .tools-section,
  .overview-section,
  .hero-videos-section,
  .process-section,
  .showcase-section,
  .logo-section,
  .instagram-section,
  .impact-section {
    padding-left: 16px;
    padding-right: 16px;
  }

  .impact-section {
    padding-bottom: 80px;
  }
}

/* FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER */
footer {
  min-height: 120px;
  background-color: #213AD9;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.12);
  padding-top: 30px;
  display: flex;
  padding-bottom: 30px;
}

.footer_inner {
  max-width: 1300px;
   justify-content: space-between;
    max-width: 1300px;
    width: 100%;
  margin: 0 auto;
    gap: 0;
  display: flex;
  
}

@media (min-width: 1200px) {
  footer.grid-con {
    width: 100%;
    max-width: none;
    padding-left: max(15px, calc((100vw - min(90vw, 1200px)) / 2));
    padding-right: max(15px, calc((100vw - min(90vw, 1200px)) / 2));
  }
}




#insta-icon {
  width: 60px;
  
}

#linkedin-icon {
  width: 62px;
}

#socials {
  display: flex;
  /* flex-direction: row; */
  margin-top: 20px;
}

#socials img {
  margin-right: 20px;
}

#rights-reserved{
  color: #F5E6CF;
  font-family: 'outfit', sans-serif;
  text-align: center;
  font-weight: 20;
}