/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #FAFAFA;
}

body,
button {
  font-family: "IBM Plex Sans Thai", sans-serif;
  color: #0C0E11;

  letter-spacing: 0px;
}

/* -------- / Common Component Style / --------  */
/* -- / Button / -- */
button {
  cursor: pointer;
}

/* Button Style */
.button-primary-style {
  background: #006D2E;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
}

.button-outline-style {
  background: transparent;
  color: #006D2E;
  border: 1px solid #006D2E;
  border-radius: 8px;
}

/* Button Style - Hover State */
.button-primary-style:hover {
  background: #409261;
  color: #FFFFFF;
}

.button-outline-style:hover {
  background: transparent;
  color: #5FA77D;
  border: 1px solid #409261;
}

/* Button Style - Selected State */
.button-primary-style:active {
  background: #004A1F;
  color: #FFFFFF;
}

.button-outline-style:active {
  background: transparent;
  color: #006D2E;
  border: 1px solid #004A1F;
}

/* Button Style - Disabled State */
.button-primary-style:disabled {
  background: #F6F7FB;
  color: #BEC4D1;
  border: 1px solid #BEC4D1;
  cursor: auto;
}

.button-outline-style:disabled {
  background: transparent;
  color: #BEC4D1;
  border: 1px solid #BEC4D1;
  cursor: auto;
}

/* Button Size */
.button-medium-size {
  padding: 7px 16px;

  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
}

.button-large-size {
  padding: 9px 16px;

  font-weight: 500;
  font-size: 20px;
  line-height: 30px;
}

/* -- \ Button \ -- */

/* -- / Typography / -- */
.heading-large-bold {
  font-size: 64px;
  font-weight: 700;
}

.heading-medium-bold {
  font-size: 40px;
  font-weight: 700;
}

.body-large-bold {
  font-size: 32px;
  font-weight: 700;
}

.body-large-semibold {
  font-size: 32px;
  font-weight: 600;
}

.body-large-regular {
  font-size: 32px;
  font-weight: 450;
}

.body-medium-extra-bold {
  font-size: 24px;
  font-weight: 700;
}

.body-medium-bold {
  font-size: 24px;
  font-weight: 600;
}

.body-medium-regular {
  font-size: 24px;
  font-weight: 450;
}

.body-medium-thin {
  font-size: 24px;
  font-weight: 400;
}

/* -- \ Typography \ -- */

/* -- / Text Color / -- */
.text-color-black {
  color: #0C0E11;
}

.text-color-green {
  color: #006D2E;
}

.text-color-white {
  color: #FFFFFF;
}

.text-color-grey {
  color: #5C6372;
}

/* -- \ Text Color \ -- */

/* --------\ Common Component Style \--------  */

/* Header */
.header {
  position: relative;
  top: 0;
  left: 0;
  background: #FFFFFF;
  box-shadow: 1px 2px 10px 0px rgba(154, 154, 154, 0.2);
  z-index: 1000;
  height: 75.67px;
  width: 100%;

  display: flex;
  justify-content: center;
}

.navbar-container {
  position: absolute;
  height: 100%;
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    max-width: 1000px;
  }

  @media only screen and (min-width: 1025px) and (max-width: 1440px) {
    max-width: 1440px;
    padding-left: 64px;
    padding-right: 64px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding-left: 154px;
    padding-right: 154px;
  }
}

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  width: 100%;
}

.navbar img {
  width: 100px;
  height: 48px;
  object-fit: cover;
  object-position: center;
}

/* Hero Section */
.hero-section {
  position: relative;
  height: 635px;
  min-width: 100%;
  width: 100%;
}

.hero-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;

  background-size: cover;
  background-position: 100% 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    background-image: url("assets/images/truck-with-two-men-banner-1440px-screen.webp");
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    background-image: url("assets/images/truck-with-two-men-banner-1440px-screen.webp");
  }

  /*
    add this breakpoint because if use image for 1728px screen for screen 1441px,
    the title text will not as nice as using image for 1440px
   */
  @media only screen and (min-width: 1441px) and (max-width: 1700px) {
    /* background-image: url("assets/images/truck-with-two-men-banner-1440px-screen.png"); */
    background-image: url("assets/images/truck-with-two-men-banner-1440px-screen.webp");
  }

  @media only screen and (min-width: 1701px) {
    background-image: url("assets/images/truck-with-two-men-banner-1728px-screen.webp");
  }
}

.hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%;
}

.hero-content-container {
  position: absolute;
  z-index: 2;
  width: 100%;

  display: flex;
  justify-content: center;
}

.hero-content {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding-top: 49px;
  }

  @media only screen and (min-width: 1025px) and (max-width: 1440px) {
    max-width: 1440px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 81px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding-left: 154px;
    padding-right: 154px;
    padding-top: 92px;
  }
}

.hero-text h1 {
  margin-bottom: 16px;
}

.hero-text p {
  margin-bottom: 16px;
}

.hero-button-row {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* Platform Description */
.platform-description-section {
  width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

.platform-description-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding-top: 40px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    max-width: 1440px;
    padding: 40px 80px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding: 40px 154px;
  }
}

.platform-description-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.baomove-logo svg {
  margin-bottom: 14px;
}

.platform-description-content p {
  text-align: center;
}

/* Feature Section */
.feature-section {
  width: 100%;

  display: flex;
  justify-content: center;
}

.feature-content-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding-top: 16px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    max-width: 1440px;
    padding-left: 80px;
    padding-right: 80px;
    padding-top: 0px;
    padding-bottom: 80px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding-left: 154px;
    padding-right: 154px;
    padding-top: 0px;
    padding-bottom: 80px;
  }
}

.feature-row {
  display: flex;
  align-items: center;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    gap: 0px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    gap: 80px;
  }

  @media only screen and (min-width: 1441px) {
    gap: 179px;
  }
}

.feature-row.reverse {
  flex-direction: row-reverse;
}

/* Ensure proper ordering for reverse layout */
.feature-row.reverse .feature-text {
  order: 2;
}

.feature-row.reverse .feature-image {
  order: 1;
}

.feature-image {
  flex-grow: 1;
  max-width: 620px;
}

.feature-image img {
  object-fit: contain;
  width: 100%;
  height: 100%;
}

.feature-text {
  flex-grow: 1;
}

.feature-text h3 {
  margin-bottom: 0;
}

.feature-row.reverse .feature-text h3 {
  text-align: right;
}

.feature-row.reverse .feature-text p {
  text-align: right;
}

/* Benefit Section */
.benefit-section {
  background: #FFFFFF;
  width: 100%;
  padding: 40px 0;

  display: flex;
  justify-content: center;
}

.benefit-content-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    max-width: 1024px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    max-width: 1440px;
    padding: 0px 80px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding: 0px 178px;
  }
}

.benefit-content-container h2 {
  text-align: center;
  margin-bottom: 40px;
  min-height: 99px;

  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit-item-row {
  display: flex;
  justify-content: space-between;
}

.benefit-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 300px;
}

.benefit-icon {
  width: 100px;
  height: 100px;
}

.benefit-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

.benefit-item p {
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Step Section */
.step-section {
  width: 100%;
  background: #F5FFF7;

  display: flex;
  justify-content: center;
}

.step-section-content-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    max-width: 1024px;
    padding: 16px 16px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    max-width: 1440px;
    padding: 80px 80px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding: 80px 154px;
  }
}

.step-section-content-container h2 {
  text-align: center;
  min-height: 66px;
  margin-bottom: 40px;
}

.step-item-row {
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: 414px;
}

.step-number-container {
  display: flex;
  justify-content: start;
}

.step-number {
  width: 104px;
  height: 104px;
  position: relative;
  margin: 0 auto;
}

.step-number::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 104px;
  height: 104px;
  border: 1px dashed #409261;
  border-radius: 50%;
}

.step-number span {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 80px;
  height: 80px;
  background: #d5f0e0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 48px;
  line-height: 1.375em;
  color: #409261;
}

/* Stat Section */
.stat-section {
  width: 100%;

  display: flex;
  justify-content: center;
}

.stat-content-container {
  display: flex;
  align-items: center;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    max-width: 1024px;
    padding: 16px 16px;
    gap: 16px;

    flex-direction: column-reverse;
  }

  /* Add this break point because if not adding, the left section will overflow */
  @media only screen and (min-width: 1025px) and (max-width: 1350px) {
    max-width: 1350px;
    padding: 16px 16px;
    gap: 16px;

    flex-direction: column-reverse;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    max-width: 1440px;
    padding: 80px 80px;
    gap: 95px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding: 80px 154px;
    gap: 95px;
  }
}

.stat-card-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.stat-card-long {
  width: 300px;
  height: 465px;
  background: #e9ebf0;
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px;
}

.stat-card-long-content-container {
  text-align: center;
}

.stat-card-long-content-container h3 {
  min-height: 105px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-number-text-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stat-card-short-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  width: 225px;
}

.stat-card-short {
  width: 100%;
  height: 225px;
  background: #e9ebf0;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-small-card .stat-number-text-style {
  margin-bottom: 10px;
}

.stat-number-text-style {
  font-size: 80px;
  font-weight: 600;
}

.stat-number {
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.stat-section-text-container {
  flex: 1;
}

.stat-section-text-container h2 {
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    margin-bottom: 0px;
    text-align: center;
  }

  /* Add this break point because 20px bottom margin at 1350px screen looks weird */
  @media only screen and (min-width: 1025px) and (max-width: 1350px) {
    margin-bottom: 0px;
    text-align: center;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    margin-bottom: 20px;
  }

  @media only screen and (min-width: 1441px) {
    margin-bottom: 20px;
  }
}

.stat-section-text-container p {
  display: flex;
  align-items: center;

  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    text-align: center;
    justify-content: center;
  }

  @media only screen and (min-width: 1025px) and (max-width: 1350px) {
    text-align: center;
    justify-content: center;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    text-align: left;
  }

  @media only screen and (min-width: 1441px) {
    text-align: left;
  }
}

.stat-section-title-text-style {

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    font-size: 20px;
    font-weight: 500;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1700px) {
    font-size: 40px;
    font-weight: 700;
  }

  @media only screen and (min-width: 1701px) {
    font-size: 64px;
    font-weight: 700;
  }
}

/* App Preview Section */
/* NOTE: Break point for 'App Preview Section' will be different from other sections
Because the height of the section is fixed and texts are long,
So need to handle not to display text being overflow */
.app-preview-section {
  width: 100%;

  display: flex;
  justify-content: center;

  background: linear-gradient(180deg, #DB3833 -4.73%, #FFFFFF 134.93%);

  @media only screen and (min-width: 0px) and (max-width: 1350px) {
    /* height of the section is not fixed */
  }

  @media only screen and (min-width: 1351px) and (max-width: 1700px) {
    height: 572px;
  }

  @media only screen and (min-width: 1701px) {
    height: 687px;
  }
}

.app-preview-section-container {
  display: flex;
  justify-content: center;
  width: 100%;

  @media only screen and (min-width: 0px) and (max-width: 1350px) {
    max-width: 1350px;
    flex-direction: column;
    padding-left: 16px;
    padding-right: 16px;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    max-width: 1440px;
    padding-left: 80px;
    padding-right: 38px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding-left: 101px;
    padding-right: 38px;
  }
}

.app-preview-content-text-container {
  @media only screen and (min-width: 0px) and (max-width: 1350px) {
    width: 100%;
    margin-top: 16px;
    margin-right: 0px;
    margin-bottom: 17px;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    width: 30%;
    margin-top: 66px;
    margin-right: 24px;
  }

  @media only screen and (min-width: 1441px) {
    width: 30%;
    margin-top: 50px;
    margin-right: 32px;
  }
}

.app-preview-title-text-style {
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    font-size: 20px;
    font-weight: 500;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    font-size: 40px;
    font-weight: 700;
  }

  /*
    add this breakpoint because if use font size '64px' for screen 1441px,
    the result will look weird
   */
  @media only screen and (min-width: 1441px) and (max-width: 1700px) {
    font-size: 40px;
    font-weight: 700;
  }

  @media only screen and (min-width: 1701px) {
    font-size: 64px;
    font-weight: 700;
  }
}

.app-preview-title-text-style .newline-at-extra-large-screen {
  display: none;

  @media only screen and (min-width: 1701px) {
    display: block;
  }
}

.app-preview-subtitle {
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    margin-bottom: 0px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    margin-bottom: 0px;
  }

  @media only screen and (min-width: 1441px) {
    margin-bottom: 40px;
    font-weight: 700;
  }
}

.app-preview-subtitle-text-style {
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    font-size: 20px;
    font-weight: 500;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    font-size: 32px;
    font-weight: 600;
  }

  @media only screen and (min-width: 1441px) {
    font-size: 32px;
    font-weight: 600;
  }
}

.app-preview-description-text-style {
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    font-size: 14px;
    font-weight: 400;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    font-size: 24px;
    font-weight: 500;
  }

  @media only screen and (min-width: 1441px) {
    font-size: 24px;
    font-weight: 500;
  }
}

.app-preview-image-container {
  @media only screen and (min-width: 0px) and (max-width: 1350px) {
    width: 100%;
    height: 582px;
  }

  @media only screen and (min-width: 1351px) and (max-width: 1440px) {
    width: 70%;
    height: 100%;
  }

  @media only screen and (min-width: 1441px) {
    width: 70%;
    height: 100%;
  }
}

.app-preview-image-inner-container {
  position: relative;
  height: 100%;
  width: 100%;
  z-index: 1;
  display: flex;
}

.app-preview-image-container img {
  height: 100%;
}

.arrow-background {
  position: absolute;
  object-fit: cover;
  object-position: right;
  position: absolute;

  width: 100%;
  height: 100%;
  z-index: 1;
}

.arrow-background img {
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.mobile-with-features {
  position: absolute;

  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;

  padding-right: 84px;
}

.mobile-with-features img {
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom;
}

/* Vehicle Type Section */
.vehicle-type-section {
  background: linear-gradient(180deg, #FFFFFF 36.85%, #1C863B 94.39%);

  display: flex;
  justify-content: center;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding: 16px 0;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    padding: 48px 0;
  }


  @media only screen and (min-width: 1441px) {
    padding: 48px 0;
  }
}

.vehicle-type-content-container h2 {
  margin-bottom: 40px;
  text-align: center;
}

.vehicle-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px;
  max-width: 1132px;
}

.vehicle-card {
  width: 340px;
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 1px 2px 10px 0px rgba(154, 154, 154, 0.2);
}

.vehicle-image {
  width: 100%;
  height: 340px;
}

.vehicle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.vehicle-info {
  padding: 24px;
}

.vehicle-info h3 {
  margin-bottom: 12px;
}

.vehicle-detail-container {
  display: flex;
  flex-direction: column;
}

.dimension {
  display: flex;
  gap: 12px;
}

/* FAQ Section */
.faq-section {
  width: 100%;

  display: flex;
  justify-content: center;
}

.faq-content-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding: 16px 16px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    padding: 80px 154px;
    max-width: 1440px;
  }


  @media only screen and (min-width: 1441px) {
    padding: 80px 154px;
    max-width: 1728px;
  }
}

.faq-content-container h2 {
  text-align: center;
  height: 90px;
}

.faq-item-column {
  max-width: 1372px;
  display: flex;
  flex-direction: column;
  gap: 38px;
}

.faq-item {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.faq-item p {
  height: 40px;
  display: flex;
  align-items: center;
}

.faq-divider {
  width: 100%;
  border: 1px solid transparent;
  border-image: repeating-linear-gradient(to right, #006D2E 0 6px, transparent 6px 12px) 1;
}

/* Client Section */
.client-section {
  display: flex;
  justify-content: center;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {
    padding: 16px 24px;
  }

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    padding: 40px 0 80px 0;
  }


  @media only screen and (min-width: 1441px) {
    padding: 40px 0 80px 0;
  }
}

.client-content-container {
  max-width: 1100px;
}

.client-content-container h2 {
  text-align: center;
  margin-bottom: 40px;
}

.client-logo-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
}

.client-logo {
  width: 180px;
  height: 180px;
  border-radius: 24px;
  box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05),
    0px 3px 6px -4px rgba(0, 0, 0, 0.12);
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

.client-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

/* Footer */
.footer-section {
  background: #006d2e;

  display: flex;
  justify-content: center;
}

.footer-content-container {
  width: 100%;

  /* TODO: adjust this breakpoint after implement mobile size */
  @media only screen and (min-width: 0px) and (max-width: 1024px) {}

  @media only screen and (min-width: 1024px) and (max-width: 1440px) {
    max-width: 1440px;
    padding: 24px 154px;
  }

  @media only screen and (min-width: 1441px) {
    max-width: 1728px;
    padding: 24px 154px;
  }
}

.footer-content-logo-and-contact {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 129px;
}

.footer-logo {
  width: 164px;
  height: 63px;

  margin-top: 16px;
}

.footer-logo img {
  width: 100%;
  height: 100%;
  border-radius: 6px;

  object-fit: cover;
  object-position: center;
}

.footer-contact h3 {
  margin-bottom: 11px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 11px;
}

.contact-item span {
  color: white;
}

.contact-item-phone {
  margin-bottom: 11px;
}

.contact-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-icon img {
  width: 100%;
  height: 100%;
}

.footer-content-copyright p {
  text-align: center;
}

.copyright-text-style {
  font-size: 12px;
  font-weight: 400;
}