:root {
    --black : #2D3344;
    --blue : #0061AF;
    --white : #FFFFFF;
    --lightblue : #2E9BD6;
    --grey : #445671;
    --lightgrey : #666A73;

}


body {
    font-family: "Exo", sans-serif;
    background: #F3F2F2;
}

p {
    font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: var(--grey);
}

h2 {
  font-size: 2rem;
  line-height: 2.5rem;
  font-weight: 600;
  color: var(--black);
  text-transform: capitalize;
}


header {
    padding: 16px 0;
}

.logo {
    max-width: 220px;
}

.nav li a {
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.36px;
    text-transform: uppercase;
    color: var(--black);
    padding: 0;
    padding-left: 40px;
}

.nav-link:focus, .nav-link:hover {
	color: var(--blue);
}

.mySwiper {
  height: calc(100vh - 80px);
}

.bannerImg {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.bannerImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.swiper-slide {
  position: relative;
}

.mySwiper .swiper-caption {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  color: #fff;
  z-index: 2;
  text-align: center;
}

.bannerImg::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* adjust */
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 110.25%);
  z-index: 1;
}

/* .mySwiper .swiper-caption::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 110.25%);
  z-index: -1;
} */

.swiper-caption h1 {
    color: var(--white);
    font-size: 2.375rem;
    line-height: 2.8rem;
    font-weight: 700;
}


.swiper-caption p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--white);
  font-weight: 400;
  letter-spacing: 0.4px;
}


/* Pagination on image */
.mySwiper .swiper-pagination {
  position: absolute;
  bottom: 15px; /* place above caption if you want */
  left: 0;
  width: 100%;
  text-align: center;
  z-index: 11;
}


/* Custom Swiper Pagination */
.mySwiper .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mySwiper .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  background: #fff;
  opacity: 1;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.mySwiper .swiper-pagination-bullet-active {
  width: 30px; 
  height: 5px;
  border-radius: 10px;
  opacity: 1;
  background: #fff;
}

.jetInfo h4 {
  color: var(--blue);
  font-size: 1.2rem;
  font-weight: 700;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 15px;
  margin-bottom: 15px;
}

.jetInfo h4::after {
  position: absolute;
  content: "";
  width: 100%;
  height: 1px;
  left: 0;
  background-color: #CDDDE5;
  bottom: 0;
}

.aircraft-specs {
  font-family: "DM Sans", sans-serif;
 
}

.aircraft-specs dl {
  margin: 0;
  padding: 0;
  
}

.spec-item {
  display: flex;
  margin-bottom: 15px;
  align-items: center;
}

.spec-item dt {
 font-size: 1rem;
  line-height: 1.5rem;
  color: var(--black);
  font-weight: 600;
  min-width: 120px; /* align labels */
  position: relative;
}

.spec-item dt::after {
  content: ":";
  position: absolute;
  right: 15px;
  color: var(--grey);
}

.spec-item dd {
  margin: 0;
  color: var(--grey);
  flex: 1; /* allows text to wrap nicely */
  font-size: 0.975rem;
  line-height: 1.5rem;
  font-weight: 400;
}

.ctaBtn {
  background: var(--lightblue);
  color: var(--white);
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  font-family: "DM Sans", sans-serif;
  padding: 8px 20px;
  border-radius: 5px;
  text-decoration: none;
}

.gallery {
  display: grid;
  grid-template-columns: 28% 42% 28%;
  gap: 10px;
}

/* First column stacked */
.col-1, .col-2, .col-3 {
  display: grid;
  gap: 10px;
  width: 100%;
}



/* Nested grid for bottom of middle column */
.col-2 .nested {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 small columns */
  gap: 10px;
}

.gallery img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.footer {
	background: rgba(227, 216, 216, 0.1);
}

.subFooter a {
	text-decoration: none;
	font-size: 1rem;
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
	color: #f8f8f8;
	margin: 0;
}

.subFooter p {
	font-family: "DM Sans", sans-serif;
    font-size: 1rem;
    color: var(--lightgrey);
    font-weight: 400;
    margin: 0;
}

.footerLinks a {
	text-decoration: none;
	color: var(--grey);
	font-size: 1rem;
	font-family: "DM Sans", sans-serif;
	font-weight: 400;
}

@media (max-width: 767px) {
  header {
  	text-align: center;
  }

  .nav {
  	justify-content: center;
  }

  .nav li a {
  	padding-left: 20px;
  }

  .logo {
  	padding-bottom: 15px;
  }

  .swiper-caption h1 {
  	    font-size: 2rem;
    line-height: 2.2rem;
  }

  h2 {
    font-size: 1.6rem;
    line-height: 2.1rem;
}

 .footerLinks .d-flex {
    flex-direction: column;   /* keep stacked */
  }
   
   .footerLogo {
    text-align: center;   /* Center the logo */
    margin-bottom: 1rem;  /* Add spacing below if needed */
  }

  .subFooter {
  	text-align: center;
  }

  .subFooter p {
  	margin-bottom: 1rem;
  }

  .gallery {
  	overflow: hidden;
  }

}

@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .mySwiper {
    height: 40vh;
  }
}