/* background color and paddings */
.section6 {
  background-color: #00396c;
  padding-bottom: 5%;
}
/* header of the section */
.section6 .section6-header .section6-topic {
  text-align: center;
  color: white;
  font-family: "Agrandir", sans-serif;
  font-size: 24pt;
  font-weight: normal;
  padding-top: 5%;
}

/* styling components after the header and sub header */
.section6-content {
  display: flex;
  justify-content: center;
}
.yellow-line-section6 {
  position: relative;
  width: 40%;
  height: 2px;
  background-color: #ffc73c;
  margin: 0 auto;
  padding-bottom: -100px;
}
.section6-dot {
  width: 15px;
  height: 15px;
  background-color: #ffc73c;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* width is set to 90% for better responisiveness */
.section6 .row {
  width: 90%;
}
.section6-sub-header {
  font-family: "Poppins", sans-serif;
  font-size: 11pt;
  color: white;
  display: flex;
  justify-content: center;
  margin-top: 1%;
  text-align: center;
}
.section6-content .col-sm {
  width: 100%;
  padding-top: 5%;
}
.brands-leftside {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffff;
}
.brands-para-wrapper {
  width: 61%;
  text-align: center;
  font-family: "Poppins", sans-serif;
  font-size: 11pt;
}
/* components of the right side of the page */
.brands-rightside {
  display: flex;
  justify-content: center;
}
/* styling the square figure of the square */
.brands-rightside .brandbox-main {
  width: 80%;
  aspect-ratio: 16 / 16.5;
  display: grid;
  grid-template-columns: repeat(3, 4fr);
  background-color: #f8f6f1;
  border-radius: 15px;
  border: 15px solid #f8f6f1;
}
/* styling of the grid items in brand box  */
.grid-item {
  display: flex;
  justify-content: center;
  align-items: center;
}
.grid-item img {
  width: 90%;
}

/* styling the outlines of brand logos */
.grid1,
.grid2,
.grid3,
.grid4,
.grid5,
.grid6,
.grid7,
.grid8,
.grid9 {
  border-bottom: 1px solid #000000;
}

.grid1,
.grid2,
.grid4,
.grid5,
.grid7,
.grid8,
.grid10,
.grid11 {
  border-right: 1px solid #000000;
}

/* mobile responsiveness */
@media (max-width: 760px) {
  .section6-content .row {
    display: block;
  }
  .brands-para-wrapper {
    font-size: 12pt;
    width: 85%;
  }
  .brands-para-wrapper p {
    width: 100%;
  }
  .section6-sub-header {
    font-size: 12pt;
  }
  .section6-sub-header p {
    width: 85%;
  }
}