/* 1. Use a more-intuitive box-sizing model */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Remove default margin */
*:not(dialog) {
  margin: 0;
}

/* 3. Enable keyword animations */
@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  /* 4. Add accessible line-height */
  line-height: 1.5;
  /* 5. Improve text rendering */
  -webkit-font-smoothing: antialiased;
}

/* 6. Improve media defaults */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 7. Inherit fonts for form controls */
input,
button,
textarea,
select {
  font: inherit;
}

/* 8. Avoid text overflows */
p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
  font-family: "Manrope", sans-serif;
}

/* 9. Improve line wrapping */
p {
  text-wrap: pretty;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

/*
  10. Create a root stacking context
*/
#root,
#__next {
  isolation: isolate;
}

html {
  font-family: "Inter", sans-serif;
}

.header {
  width: 100%;
}

.navbar {
  width: 100%;
  height: 100px;
  padding-block: 20px;
  background: #99cdee;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
}

.header-content,
.nav-list-items,
.container,
.header-text-content,
.main-nav,
.service-cards,
.expertize-service,
.vision-content,
.about-text-content {
  display: flex;
}

.nav-list-items {
  flex-direction: row;
}

.nav-list-items .list-item a:hover {
  border-bottom: 4px solid #c17c18;
}

.main-nav {
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
.container {
  max-width: 1200px;
  width: 90%;
  margin: 0 auto;
}

.nav-list-items {
  list-style: none;
  gap: 20px;
}

.nav-list-items .list-item a.active {
  border-bottom: 4px solid #c17c18; 
  padding-bottom: 5px; 
  font-weight: 600;
}

.nav-list-items .list-item a.active:hover {
  border-bottom: 4px solid #c17c18;
}

.logo {
  width: 180px;
}

.list-item {
  text-transform: uppercase;
  font-size: 1.125rem;
}

a {
  text-decoration: none;
  color: #0a4d77;
}

.navbar {
  height: 100px;
}

.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 30px;
  height: 24px;
  background: transparent;
  border: none;
  padding: 0;
  /* margin-right: 20px; */
  z-index: 100;
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: #0a4d77;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.hamburger-line:nth-child(2) {
  margin: 5px 0;
}

#menu-toggle {
    display: none;
  }

.header-content,
.header-text-content {
  flex-direction: column;
}

.header-content {
  gap: 100px;
}

.main-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
  padding-block: 8rem;
  height: 768px;
  width: 100%;
  background: linear-gradient(rgba(10, 77, 119, 1), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/port-containers.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.header-text-content {
  color: white;
  gap: 20px;
  text-align: center;
  justify-content: center;
  max-width: 850px;
  margin: 0 auto;
}

.main-header-heading {
  font-size: 4.5rem;
}

.main-header-para {
  font-size: 1.2rem;
}

button {
  font-size: 1.125rem;
  border: none;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 8px;
}

.services-btn .services-link {
  color: white;
}

.buttons {
  margin-top: 20px;
}

.services-btn {
  background: #c17c18;
  color: white;
  margin-right: 15px;
  /* transition: background-color 1s ease-out, transform 1s ease-out; */
}

button {
  transition: background-color 1s ease-out, transform 1s ease-out;
}

.heading-color {
  color: #c17c18;
}

.services-section {
  flex-direction: column;
  align-items: center;
  margin-top: 100px;
  width: 100%;
}

.services-text-content {
  text-align: center;
  margin-bottom: 50px;
}

.services-text-content h2 {
  margin-block: 5px;
  font-size: 2.6rem;
  font-weight: 500;
  color: #0a4d77;
}

.services-text-content p:first-of-type {
  font-weight: 900;
}

.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 310px);
  gap: 20px;
}

.service-card {
  height: 460px;
  border-radius: 5px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  position: relative;
  color: white;
}

.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;
}

.service-card-content {
  padding: 25px;
  position: relative;
  z-index: 1;
}

.service-card-content p {
  font-size: 0.8rem;
}

.service-card-content p:first-of-type {
  font-weight: 700;
}

.service-card-content p:last-of-type {
  margin-block: 20px;
}

.service-card-content h3 {
  font-size: 1.8rem;
  font-weight: 500;
}

.service-card-content a {
  color: white;
  font-size: 0.8rem;
}

.service-card-1::before {
  background-image: linear-gradient(
      rgba(10, 77, 119, 0.5),
      rgba(10, 77, 119, 0.5)
    ),
    url("../images/web-imgs/jabari-clearing-suv.jfif");
}

.service-card-2::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/jabari-pipe.jpg");
}

.service-card-3::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/jabari-containers-water.jfif");
}

.service-card-4::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/jabari-ship-containers.jfif");
}

.service-card-5::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/jabari-container-open.jpg");
}

.service-card-6::before {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("../images/web-imgs/jabari-cargo-truck.jpg");
}

/* .service-card-content  span{
  background: #C17C18;
  color: white;
  border-radius: 100%;
  padding: 4px 8px;
} */

.services-section-two {
  margin-bottom: 100px;
}

.service-section-3 .container {
  gap: 50px;
}

.service-section-3 {
  width: 100%;
  background: #0a4d77;
  color: white;
  padding-block: 100px;
}

.expertize-title-section p {
  font-weight: 900;
}

.expertize-title-section h2,
.vision-text-content h2,
.about-title,
.testimonial-heading h2,
.contact-title,
.faq-header h2 {
  font-size: 2.6rem;
  font-weight: 500;
}

.expertize-text-content p {
  font-size: 1.125rem;
  margin-bottom: 20px;
}

.expertize-service-icon img {
  width: 60px;
  padding-top: 4px;
}

.expertize-service {
  gap: 10px;
}

.expertize-service-product h3 {
  /* color: #C17C18; */
  font-size: 1.35rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.vision-section {
  width: 100%;
  margin-block: 100px;
}

.vision-content {
  align-items: center;
  gap: 20px;
}

.vision-category {
  font-weight: bold;
  font-size: 0.8rem;
}

.vision-image img {
  max-width: 550px;
  border-radius: 5px;
}

.vision-text-content p:last-of-type {
  font-size: 1.125rem;
}

.vision-text-content h3,
.faq-footer h3 {
  font-size: 1.325rem;
}

.vision-best-practice {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 15px;
}

.services-btn a {
  color: black;
}

.vision-section-2 .vision-content {
  flex-direction: row-reverse;
}

.vision-section-2 {
  background: #0a4d77;
  padding-block: 100px;
  color: white;
}

.vision-section-2 .learn-btn {
  background: #0a4d77;
  color: white;
}

.vision .learn-btn {
  background: none;
}

.vision .services-btn {
  border: 1px solid rgb(233, 233, 233);
  background: none;
  color: black;
}

.vision-section-2 a,
.expertize-text-content a {
  color: white;
}

.about-section {
  width: 100%;
}

.buttons {
  text-align: center;
}

.about-text-content {
  flex-direction: column;
  text-align: center;
  align-items: center;
}

.about-icon img {
  width: 60px;
}

.about-category {
  font-size: 0.9rem;
  font-weight: 900;
  margin-block: 10px;
}

.about-btn a {
  color: black;
}

.about-description,
.testimonial-heading p,
.faq-header p {
  font-size: 1.325rem;
  margin-block: 10px;
}

.about-section .about-btn {
  /* margin-right: 10px; */
  /* background: #0A4D77;
  color: white; */
  border: 1px solid rgb(233, 233, 233);
  background: none;
}

.about-section .explore-btn {
  background: none;
  color: black;
}

.about-image {
  height: 750px;
  width: 100%;
  margin-block: 50px 100px;
}

.about-image img {
  border-radius: 10px;
  height: 100%;
  width: 100%;
  object-fit: fill;
}

.testimonial-heading {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.client-image {
  width: 50px;
  height: 50px;
}

.client-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.testimonials {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-block: 30px 100px;
}

.testimonial-rating {
  background: url("../images/icons/star.svg");
  height: 25px;
  width: 120px;
}

.testimonial-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgb(233, 233, 233);
  border-radius: 10px;
  padding: 20px;
}

.testimonial-quote {
  margin-block: 15px;
}

.client-details {
  display: flex;
  gap: 10px;
}

.client-name {
  font-weight: 700;
}

.client-position {
  font-size: 0.8rem;
}

.contact-section .container {
  display: flex;
  flex-direction: column;
  justify-items: center;
}

.contact-section {
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(10, 77, 119, 1)),
    url("../images/web-imgs/jabari-customer-support.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: white;
  padding-block: 100px;
}

.contact-content {
  display: grid;
  place-items: center;
}

.contact-section .contact-btn {
  margin-right: 20px;
}

.faq-section .container,
.faq-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.faq-section {
  width: 100%;
  margin-block: 100px;
}

.faq-header {
  text-align: center;
}

.faq-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.faqs {
  max-width: 613px;
}

.faq-footer p {
  margin-block: 20px;
}

details[name="group-details"] {
  border: 1px solid rgb(233, 233, 233);
  border-radius: 8px;
  padding: 15px;
  margin: 10px 0;
  position: relative;
}

details[name="group-details"] summary {
  list-style: none;
  cursor: pointer;
  font-weight: bold;
  padding-right: 30px;
}

details[name="group-details"] summary::-webkit-details-marker {
  display: none;
}

details[name="group-details"] summary::after {
  content: "+";
  position: absolute;
  right: 15px;
  font-size: 20px;
  font-weight: normal;
  transition: transform 0.3s ease;
  color: #333;
}

details[name="group-details"][open] summary::after {
  content: "−";
  transform: rotate(0deg);
}

details[name="group-details"] p {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgb(233, 233, 233);
  color: #555;
  line-height: 1.6;
}

.faq-footer .contact-btn {
  border: 1px solid rgb(233, 233, 233);
  margin-block: 20px;
  background: none;
}

.footer {
  width: 100%;
  background: #0a4d77;
  color: white;
  padding-top: 20px;
}

.footer h3 {
  font-size: 1.325rem;
  margin-bottom: 10px;
}

.footer p {
  font-size: 0.875rem;
}

.footer-content {
  border-bottom: 2px solid white;
  padding-bottom: 20px;
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 100px;
}

.addresses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 100px;
}

.social-links img {
  width: 25px;
}

.social-links {
  display: flex;
  gap: 20px;
}

.digital-addresses p {
  margin-bottom: 10px;
}

.footer .container {
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.copyright {
  font-size: 0.5rem;
  padding-block: 20px;
}

.services-btn:hover {
  opacity: 0.9;
}

.contact-btn:hover,
.about-btn:hover {
  background: #0a4d77;
  border: 1px solid #0a4d77;
}

.header-text-content a:hover,
.contact-content a:hover,
.faq-footer a:hover,
.about-btn a:hover {
  color: white;
}

.faq-footer a {
  color: black;
}

.contact-section .contact-btn-link {
  color: white;
}

@media (max-width: 800px) {
  .nav-list-items {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: #99cdee;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-top: 100px;
    padding-left: 30px;
    transition: right 0.3s ease;
    z-index: 99;
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.3);
  }

  .nav-list-items .list-item {
    width: 100%;
    margin: 10px 0;
  }

  .logo {
    width: 150px;
    /* margin-left: 20px; */
  }

  .nav-list-items .list-item a {
    display: block;
    padding: 15px;
    font-size: 18px;
    border-bottom: 1px solid #444;
  }

  .hamburger {
    display: flex;
  }

  .navbar::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 98;
  }

  #menu-toggle {
    display: none;
  }

  #menu-toggle:checked ~ .container .main-nav .nav-list-items {
    right: 0;
  }

  #menu-toggle:checked
    ~ .container
    .main-nav
    .hamburger
    .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(6px, 6px);
  }

  #menu-toggle:checked
    ~ .container
    .main-nav
    .hamburger
    .hamburger-line:nth-child(2) {
    opacity: 0;
  }

  #menu-toggle:checked
    ~ .container
    .main-nav
    .hamburger
    .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }

  #menu-toggle:checked ~ .container .main-nav::before {
    opacity: 1;
    visibility: visible;
  }

  html:has(#menu-toggle:checked),
  body:has(#menu-toggle:checked) {
    overflow: hidden;
    height: 100vh;
  }

  .logo {
    width: 160px;
    /* margin-left: 20px; */
  }

  .nav-list-items {
    gap: 20px;
  }

  .nav-list-items .list-item a {
    font-size: 15px;
    padding: 6px 10px;
  }

  .services-section {
    margin-top: 50px;
  }

  .services-text-content {
    margin-bottom: 30px;
  }

  .service-cards {
    display: flex;
    flex-direction: column;
  }

  .service-card {
    width: 505.05px;
  }

  .services-section-two {
    margin-bottom: 50px;
  }

  .service-section-3 .container {
    flex-direction: column;
    gap: 20px;
  }

  .service-section-3 {
    padding-block: 60px;
  }

  .expertize-text-content .buttons {
    text-align: center;
  }

  .expertize-text-content {
    margin-top: 10px;
  }

  .vision-section {
    margin-block: 60px;
  }

  .vision-text-content h2 {
    margin-bottom: 20px;
  }

  .vision-section .buttons {
    text-align: center;
    margin-top: 20px;
  }

  .vision-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .vision-image img {
    max-width: 100%;
    border-radius: 5px;
  }

  .vision-section-2 .vision-content {
    flex-direction: column;
  }

  .vision-section-2 {
    padding-block: 60px;
  }

  .about-image {
    height: 525px;
    margin-block: 50px;
  }

  .faq-section {
    margin-block: 60px;
  }

  .faq-footer .contact-btn {
    margin-block: 0px;
  }

  .faq-footer {
    text-align: center;
  }

  .footer-content {
    border-bottom: 2px solid white;
    padding-bottom: 20px;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
  }

  .addresses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }
}

@media (max-width: 500px) {
  

  .main-header-heading {
    font-size: 3.5rem;
  }

  .main-header-para {
    font-size: 1rem;
  }

  .service-card {
    width: 100%;
  }

  .vision-best-practice {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 15px;
  }

  .vision-image img {
    border-radius: 0px;
  }

  .about-image {
    height: 270px;
  }

  .about-image img {
    border-radius: 0px;
  }

  .client-image {
    width: 50px;
    height: 50px;
  }

  .client-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  .testimonials {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .contact-section {
    text-align: center;
    padding-block: 40px;
  }

  .footer-content,
  .addresses {
    display: flex;
    flex-direction: column;

    gap: 20px;
  }
}

/* About Us */
.about-us-header {
  background: linear-gradient(rgba(10, 77, 119, 1), rgba(0, 0, 0, 0.5)),
  url("../images/web-imgs/cargo-ship-main.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 320px;
  color: white;
}

.about-us-header-text-content {
  display: flex;
  flex-direction: column;
}

.about-us-header-text-content h2 {
  font-size: 2.5rem;
}

.about-us-header-text-content h3 {
  font-size: 1.75rem;
}

.about-us-header-text-content p {
  font-size: 1rem;
}

.our-story-section {
  padding-block: 100px;
}

.our-story-section img {
  width: 550px;
  border-radius: 5px;
}

.our-story-section .container {
  align-items: center;
  gap: 20px;
}

.our-story-title-section p {
  font-weight: 700;
}

.our-story-title-section h2,
.vision-mission-title-section h2,
.values-text-content h2,
.location-header h2,
.our-services-text-content h2 {
  font-size: 2.6rem;
  font-weight: 500;
}

.story-description {
  font-size: 1.125rem;
  margin-top: 10px;
}

.vision-mission-section {
  background: #0a4d77;
  color: white;
  padding-block: 100px;
}

.vision-mission-section .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.vision-and-mission {
  display: grid;
  grid-template-columns: 1fr;
  /* gap: 100px; */
}

.vision-mission-text-content p {
  max-width: 800px;
  font-size: 1.125rem;
}

.vision-about h3,
.mission h3 {
  font-size: 1.325rem;
  margin-bottom: 10px;
}

.vision-section-about,
.mission-section {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.vision-icon,
.mission-icon {
  width: 50px;
}

.values-section {
  padding-block: 100px;
  text-align: center;
}

.values-intro {
  font-size: 1.125rem;
}

.value-card {
  border: 1px solid rgb(233, 233, 233);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}

.values-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.value-title {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
}

.value-title img {
  width: 40px;
  height: 40px;
}

.about-contact-section {
  background: #0a4d77;
}

.contact-content .about-services-link {
  color: white;
}

.location-section { 
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(10, 77, 119, 1)),
    url("../images/web-imgs/port-containers.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 700px;
  padding-block: 100px;
  text-align: center;
  color: white;
}

.location-header {
  max-width: 600px;
  text-align: center;
  margin-bottom: 40px;
}

.location-section .container {
  justify-content: center;
}

table {
  width: 100%;
}

tr {
  background: #94c3e1;
  width: 100%;
  padding-block: 100px;
}

td {
  padding-block: 20px;
  font-size: 1.5rem;
}

.location span {
  font-weight: 700;
}

@media (max-width: 800px) {
  .about-us-header-text-content h2 {
    font-size: 2.313;
  }

  .our-story-section {
    padding-block: 60px;
  }

  .about-us-header-text-content h3 {
    font-size: 1.75rem;
  }

  .our-story-section .container {
    flex-direction: column;
  }

  .our-story-section img {
    width: 100%;
    border-radius: 5px;
  }

  .vision-mission-section {
    padding-block: 60px;
  }

  .vision-mission-section .container {
    grid-template-columns: 1fr;
  }

  .vision-icon,
  .mission-icon {
    width: 40px;
  }

  .values-section {
    padding-block: 60px;
  }

  .values-cards {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .location-section {
    padding-block: 60px;
  }
  
}

@media (max-width: 500px) {
  .vision-section-about,
  .mission-section {
    flex-direction: column;
    gap: 10px;
  }
  .about-us-header-text-content h3 {
    font-size: 1.438rem;
  }

  .values-cards {
    grid-template-columns: 1fr;
  }

  .location-section {
    padding-block-end: 100px;
  }

  .location-header {
    max-width: 600px;
    text-align: center;
    margin-bottom: 40px;
  }

  .location-section .container {
    justify-content: center;
  }

  tr {
    padding-block: 60px;
  }

  td {
    padding-block: 20px;
    font-size: 1.3rem;
  }
}

/* Our Services page */
.services-header {
  background: linear-gradient(rgba(10, 77, 119, 1), rgba(0, 0, 0, 0.5)),
  url("../images/web-imgs/cargo-ship-main.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 340px;
}

.our-services-section {
  padding-block: 100px;
}

.our-service-card {
  
  /* border: 2px solid red; */
}

.our-services-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 30px;
}

.our-service-image {
  height: 350px;
  width: 100%;
}

.our-service-image img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 10px 10px 0 0;
}

.our-service-text-content h2{
  /* height: 300px; */
}

.our-services-text-content p{
  font-size: 1.125rem;
}

.our-services-heading,
.our-services-intro {
  text-align: center;
}

.our-service-text-content p {
  font-size: 1rem;
  margin-block: 10px;
}

.our-service-text-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #0a4d77;
  color: white;
  padding: 20px;
  border-radius: 0 0 10px 10px;
  height: 248px;
}


.our-service-text-content {
  background: #0a4d77;
  color: white;
  padding: 20px;
}

.our-service-text-content button {
  background: #c17c18;
  color: white;
  font-size: 1rem;
  width: 100%;
} 

.our-service-text-content a {
  color: white;
}

.our-service-text-content button:hover {
  opacity: 0.9;
}

@media (max-width: 1278px) {

  .our-service-text-content {
    height: 280px;
  }
  
}

@media (max-width: 995px) {
  .our-service-text-content {
    height: 345px;
  } 
}

@media (max-width: 800px) {
  .our-services-section {
    padding-block: 60px;
  }

  .our-services-cards {
    grid-template-columns: repeat(2, minmax(250px, 1fr));
  }

  .our-service-text-content {
    height: 300px;
  }
  
}

@media (max-width: 605px) {
  .our-service-text-content {
    height: 250px;
  } 

  .our-services-cards {
    grid-template-columns: minmax(250px, 1fr);
  }
}


@media (max-width: 500px) {
  .our-services-section {
    padding-block: 40px;
  }

  .our-services-cards {
    grid-template-columns: minmax(250px, 1fr);
  }

  .our-service-text-content {
  
    height: 288px;
  }
}


/* Contact Us Page */
.contact-us-section {
  padding-block: 100px;
}
.contact-us-header {
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(10, 77, 119, 1)),
  url("../images/web-imgs/jabari-customer-support.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 340px;
  color: white;
}

.contact-us-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-us-heading {
  font-size: 2.6rem;
  font-weight: 500;
}

.contact-us-intro,
form {
  font-size: 1.2rem;
}

.contact-us-title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

form {
  margin-top: 40px;
  max-width: 700px;
}

label, 
input {
  display: block;
  width: 100%;
  margin-bottom: 10px;
}

input {
  font-size: 1.2rem;
  padding: 8px 16px;
  border: none;
  border-bottom: 1px solid rgb(147, 146, 146);
}

.form-label-group  {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}

textarea {
  width: 100%;
  font-size: 1.2rem;
  padding: 8px 16px;
  border: 1px solid rgb(147, 146, 146);
}

input:focus,
textarea:focus {
  outline: none;
}

button[type=submit] {
  display: block;
  background: #0a4d77;
  color: white;
  width: 200px;
  margin: 0 auto;
}

button[type=submit]:hover {
  opacity: 0.9;
}

.notification-msg {
  font-size: 0.875rem; 
  line-height: 20px;
  margin-top: 14px
}

@media (max-width: 800px) {
  .contact-us-section {
    padding-block: 60px;
  }

  
  
}

@media (max-width: 500px) {
  .contact-us-section {
    padding-block: 40px;
  }

  .form-label-group  {
    grid-template-columns:  1fr;
  }

}