.Paragraph p {
  font-size: 25px !important;
  color: #4e6a63 !important;
}

.flour-products img {
  object-fit: contain;
  height: auto;
  display: block;
  margin-bottom: 20px;
}

.image-grid .row1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  text-align: center;
  margin-top: 20px;
}
.image-grid .row2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  text-align: center;
}

.grid-box,
.first-grid {
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grid-box {
  padding: 15px;
}
.first-grid {
  padding: 70px 40px 15px 40px;
}
.box-title {
  background-color: #4e6a63;
  padding: 15px;
  color: white;
  font-size: 18px;
  font-weight: bold;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box-title h1 {
  font-size: 25px;
  font-weight: bold;
  text-align: center;
  align-items: center;
}

.grid-box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
/*.grid-box:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.5);
}*/
.grid-box .card-number {
  color: #fcb44a;
  font-size: 50px;
  font-weight: bold;
  text-align: start;
  margin: 10% 5%;
}

.grid-box .text-block {
  font-size: 20px;
  color: #21333b;
  line-height: 1.5;
  margin: 20px auto;
  text-align: justify;
  margin: 0% 5%;
}

.table-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.table-caption h3 {
  color: #31544b;
  font-size: 24px;
  text-align: center;
  margin: 2px;
}
.line-caption {
  height: 4px;
  display: flex;
  align-items: center;
  flex-grow: 1;
  background-color: rgba(252, 180, 74, 0.4);
}

.card-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 20px auto;
}
.activities_card {
  width: calc(33.333% - 1px);
  box-sizing: border-box;
  text-align: center;
}
.activities_card h3 {
  font-size: 20px;
  font-weight: lighter;
}
.activities_card img {
  max-width: 95%;
}

.cards-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.main-card {
  background-color: #4e6a63;
  color: white;
  width: 250px;
  height: 250px;
  border-radius: 12px;
  text-align: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 35px;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px 15px;
  max-width: 1000px;
}

.card {
  width: 180px;
  height: 180px;
  background: white;
  border-radius: 12px;
  padding: 10px 15px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  transition: transform 0.3s;
}

.card.up {
  transform: translateY(-100px);
}

.card.full {
  margin: 10px 216% auto 216%;
  text-align: center;
}

.card .title {
  color: #4e6a63;
  font-weight: bold;
  margin: 10px 0px 0px 0px;
}

.card .subtitle {
  color: #777777;
  font-size: 14px;
  margin-top: 10px;
}

.table-container {
  overflow-x: auto;
  margin: 30px auto;
}

table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 20px;
  overflow-x: auto;
}
thead {
  text-align: center;
}
th,
td {
  padding: 20px 30px;
  font-size: 18px;
  background-color: #ffffff;
  text-align: center;
}

th {
  background-color: #73837f;
  color: white;
  padding: 30px;
  text-align: center;
  font-size: 20px;
  font-weight: lighter;
}

tr:nth-child(even) td {
  background-color: rgba(255, 255, 255, 0.5);
}

tr:last-child td {
  background-color: #fcb44a;
}

.last-row2 td {
  background-color: #fdd292;
}

td:first-child {
  text-align: start;
  margin-right: 20px;
}

.stock-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 18px;
  justify-items: center;
}

.stock-card {
  background-color: #31544b;
  color: white;
  width: 100%;
  height: 230px;
  padding: 20px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  margin: 0px auto;
}

.label {
  color: #ffb548;
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 12px;
}

.center {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.value {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-size: 48px;
  font-weight: bold;
  margin: 0;
}

.value.change {
  color: #22c55e;
}

.currency {
  font-size: 23px;
  font-weight: normal;
  margin-right: 5px;
}

.percent {
  font-size: 20px;
  margin-right: 3px;
}

.date {
  color: #dadada;
  font-size: 16px;
  margin-top: 15px;
  font-weight: 500;
}

.arrow-img {
  width: 40px;
  height: 40px;
  margin-top: 2px;
}

.table-container3 td:first-child {
  color: #4e6a63;
  width: 10%;
}
.table-container3 td:nth-child(2) {
  color: #21333b;
  font-size: 20px;
  font-weight: 400;
  text-align: start;
}

/*chart 1*/
.chart-container {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 50px;
  padding: 40px;
  margin-bottom: 40px;
  background-color: white;
}

#donutChart {
  width: 300px !important;
  height: 300px !important;
  transform: rotate(30deg);
  max-width: 300px;
}

.legend {
  display: flex;
  flex-direction: column;
  gap: 0px;
}

.legend-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 18px;
  color: #333;
}

.legend-item p:first-child {
  font-size: 16px;
  font-weight: bold;
  width: 40px;
  text-align: left;
  flex-shrink: 0;
}

.legend-color {
  width: 20px;
  height: 20px;
  border-radius: 3px;
  margin-left: 10px;
  flex-shrink: 0;
}

.legend-item p:last-child {
  flex: 1;
  font-weight: 400;
}

#chart-container {
  width: 100%;
  background-color: #fff;
  padding: 10px;
  box-sizing: border-box;
  margin: 20px auto;
  overflow-x: auto;
}

#chart-container h3 {
  font-size: 20px;
  text-align: start;
  color: #4e6a63;
  margin: 20px;
}
#chart-container p {
  font-size: 14px;
  margin: -15px 100px 0px 100px;
  color: #5e6863;
}
#stockChart {
  width: 1000px !important;
  height: 350px !important;
  margin: 10px auto;
}

.ctx2,
.ctx3,
.ctx4,
.ctx5 {
  width: 1000px !important;
  height: 350px !important;
  display: block;
  margin: 10px auto;
  background-color: white;
}

@media (max-width: 1200px) {
  .cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .cards-grid .card:first-child {
    grid-column: 1 / -1;
    justify-self: center;
  }
  .main-card {
    margin-bottom: 20px;
  }

  .card.up {
    transform: none;
  }

  .activities_card {
    width: calc(48% - 1px);
  }
  .activities_card:last-child {
    margin: auto;
  }

  .stock-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .card.full {
    margin: auto 54%;
  }
}

@media (max-width: 992px) {
  .image-grid .row2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .box-title {
    grid-column: span 2;
  }

  .activities_card {
    width: 100%;
    margin-bottom: 20px;
  }
  .activities_card img {
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  .box-title {
    grid-column: span 1;
  }

  .cards-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .card {
    width: 250px;
    height: 250px;
  }

  .card.up {
    transform: none;
  }

  .text-desc {
    font-size: 20px;
  }

  .stock-card {
    width: 90%;
    height: auto;
  }

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

  .grid-box .card-number {
    font-size: 30px;
  }

  .box-title h1 {
    font-size: 20px;
  }

  .grid-box .text-block {
    font-size: 16px;
  }

  .image-grid .row2 {
    grid-template-columns: 1fr;
  }

  .chart-container {
    flex-direction: column-reverse;
    align-items: stretch;
    align-items: center;
    padding: 20px;
  }

  .legend {
    align-items: flex-start;
  }

  .legend-item {
    justify-content: space-between;
    font-size: 16px;
  }
  #donutChart {
    width: 100% !important;
    height: 300px !important;
    transform: rotate(0deg);
  }
}

@media (max-width: 480px) {
  .table-container,
  .table-container3 {
    overflow-x: auto;
  }

  table {
    font-size: 14px;
  }

  th,
  td {
    padding: 10px;
  }
}
.percent-none {
  display: none;
}
body[lang="en"] {
  .percent-none {
    display: inline;
  }
  @media (max-width: 480px) {
    .small-english {
      font-size: 18px;
    }
  }
}