/* GENERAL SETTINGS */
@import url('https://fonts.googleapis.com/css2?family=Lora:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  color: #0b0b45;
  line-height: 1.7;
  font-size: 16px;
  background: #ffffff;
}

a {
  color: #000080;
  text-decoration: none;
}

a:visited {
  color: #000080;
}

/* CONTAINER */
.container {
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

/* HEADER */
header {
  background: #ffffff;
  padding: 15px 20px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.nav {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo img {
  height: 50px;
  margin-right: 12px;
}

.company-name {
  font-family: 'Lora', serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: #000080;
  letter-spacing: 0.5px;
}

/* HERO SECTION */
.hero {
  padding: 110px 20px;
  color: #ffffff;
  text-align: center;
  background: #0b0b45;
}

.hero {
  max-height: 420px;
}

.hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 18px;
  color: #ffffff;
  line-height: 1.2;
}

/* Gold divider under hero headline */
.hero-divider {
  width: 70px;
  height: 4px;
  background: #FFD700;
  margin: 0 auto 28px;
  border-radius: 2px;
}

.hero p {
  font-size: 1.1rem;
  margin-bottom: 20px;
  line-height: 1.4;
}

/* HERO CTA BUTTON */
.hero-cta {
  display: inline-block;
  align-self: center;
  background: #FFD700;
  color: #0b0b45;
  font-weight: 600;
  padding: 14px 34px;
  border-radius: 30px;
  font-size: 1rem;
  transition: all 0.25s ease;
}

.hero-cta:hover {
  background: #e6c200;
  transform: translateY(-2px);
}

html {
  scroll-behavior: smooth;
}

/* SECTION HEADINGS */
h2 {
  margin-top: 50px;
  color: #000080;
  font-size: 2.25rem;
  font-weight: 600;
}

/* PARAGRAPHS */
p {
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.7;
  font-weight: 400;
}

/* GENERAL LISTS */
ul {
  padding-left: 20px;
}

ul li {
  margin-bottom: 10px;
  line-height: 1.6em;
}

/* ABOUT, DELIVER, SERVE, FORMATS, WHY */
.about, .deliver, .serve, .formats, .why {
  padding: 80px 0;
  width: 100%;
}

/* ABOUT SECTION */
.about {
  background: #f9fafc;
}

.section-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #000080;
  position: relative;
  margin-bottom: 40px;
  text-align: center;
}

.section-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: #FFD700;
  margin: 12px auto 0;
  border-radius: 2px;
}

/* About cards */
.about-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.about-cards .card {
  background: #ffffff;
  padding: 25px 20px;
  border-radius: 12px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  line-height: 1.7;
  color: #0b0b45;
  font-size: 1.05rem;
  font-weight: 400;
  text-align: justify;
}

/* WHAT WE DELIVER SECTION */
.deliver {
  background: #0b0b45;
}

.deliver .section-title {
  color: #ffffff;
}

.deliver-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 40px;
}

.deliver-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #ffffff;
  background: transparent;
  padding: 8px 0;
  border-radius: 0;
  box-shadow: none;
}

.deliver-item .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #FFD700;
  color: #0b0b45;
  font-weight: 600;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
}

/* DELIVERY FORMATS SECTION */
.formats {
  background: #ffffff;
  padding: 80px 0;
}

.formats .section-title {
  color: #000080;
}

.formats-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 15px;
  margin-top: 40px;
}

/* Stack Delivery Formats items vertically next to image */
.formats-content .formats-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* DELIVERY FORMATS SECTION - SIDE BY SIDE IMAGE AND TEXT */
.formats-content {
  display: flex;
  gap: 30px;                 /* smaller gap between image and text */
  align-items: flex-start;    /* top-align for icon alignment */
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
}

/* EQUAL-WIDTH COLUMNS */
.formats-image,
.formats-list-wrapper {
  flex: 1 1 0;
  max-width: 50%; /* true 50/50 split */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.formats-image img {
  width: 60%;       /* smaller image */
  max-width: 300px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
  margin: 0 auto;   /* center the image */
}

.format-item {
  display: flex;
  align-items: center; /* align icon vertically with text */
  gap: 12px;
  font-size: 1.05rem;
  line-height: 1.8;   /* slightly larger for readability */
  color: #000000;
  background: transparent;
  padding: 8px 0;
  border-radius: 0;
  box-shadow: none;
  font-weight: 700;
}

.format-item .icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #FFD700;
  color: #0b0b45;
  font-weight: 600;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0; /* remove previous offset */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .formats-content {
    flex-direction: column;
  }

  .formats-image,
  .formats-list-wrapper {
    max-width: 100%;
  }

  .formats-image img {
    width: 80%;
    margin: 0 auto;
  }
}

/* WHO WE SERVE */
.serve {
  background: #f9fafc;
  color: #0b0b45;
}

.serve .section-title {
  color: #000080;
}

.serve .section-title::after {
  background: #FFD700;
}

.serve-intro {
  text-align: center;
  max-width: 750px;
  margin: 0 auto 50px;
  font-size: 1.1rem;
  color: #0b0b45;
}

.serve-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
}

.serve-item {
  background: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  padding: 25px 20px;
  text-align: center;
  color: #0b0b45;
  font-size: 1.02rem;
  line-height: 1.6;
  box-shadow: 0 6px 15px rgba(0,0,0,0.08);
  font-weight: 900; /* Bold text within the boxes */
}

/* WHY SECTION */
.why {
  background: #0b0b45;
}

.why .section-title {
  color: #ffffff;
  text-align: center;
  margin-bottom: 50px;
}

/* Side-by-side layout: text on left, images on right */
.why-content {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
  align-items: flex-start;
}

/* Text column */
.why-list {
  flex: 1 1 500px; /* make text slightly wider than images */
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Each item in the list */
.why-item {
  background: #0d0d76;
  padding: 18px 20px 18px 14px;
  border-left: 6px solid #FFD700;
  border-radius: 8px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.why-item h3 {
  margin: 0;
  font-size: 1.2rem;
  font-weight: 600;
  color: #FFD700;
}

.why-item p {
  margin: 0;
  color: #ffffff;
  font-size: 1rem;
  line-height: 1.5;
}

/* Images column */
.why-images {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.why-images img {
  width: 100%;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .why-content {
    flex-direction: column;
  }

  .why-images {
    flex: 1 1 100%;
    max-width: 100%;
  }

  .why-images img {
    width: 100%;
  }
}

/* CONTACT SECTION */
.contact {
  padding: 60px 0;
  text-align: center;
  background: #0b0b45; /* dark blue background */
  color: #ffffff;       /* default text white */
}

.contact h2 {
  color: #ffffff;       /* title white */
}

.contact p {
  margin-bottom: 20px;
  font-size: 1.05rem;
  line-height: 1.7;
}

.contact p.highlight {
  color: #FFD700;       /* gold text for specific line */
  font-size: 1.30rem;   /* increase font size */
  font-weight: 600;     /* optional: make it a bit bolder */
}

/* HERO SECTION - SIDE BY SIDE IMAGE AND TEXT */
.hero-content {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 40px;
  text-align: left;
}

.hero-image,
.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.hero-image img {
  width: auto;
  max-height: 325px;
  border-radius: 12px;
  object-fit: cover;
}

.hero-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1000px;
  color: #ffffff;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 768px) {
  .hero-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .deliver-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .why-content {
    flex-direction: column;
  }

  .why-images img {
    width: 100%;
  }
}