/* ------ large and medium devices (dekstops and laptops, 991px and up) -----*/
@media (min-width: 991px) {
  html {
    font-size: 0.694vw;
  }

  .container {
    max-width: 100%;
    padding: 0 2rem;
  }

  .power_thinker_content > img {
    padding-left: 4rem;
  }

  .bureau_left p {
    font-weight: 300;
    letter-spacing: -0.04em;
    font-size: 2.8rem;
  }
}

/* ------ Medium devices (tablets, 991px and down) -----*/
@media (max-width: 991px) {
  html {
    font-size: 58%;
  }

  body {
    font-size: 2.5rem;
    line-height: 1.25;
  }

  .container {
    padding: 0 3rem;
    width: 100%;
    max-width: 100%;
  }

  .hero_man {
    max-width: 22rem;
    right: 1rem;
    bottom: 10rem;
    width: 26vh;
  }

  /* =============== power_thinker ================== */
  .power_thinker_content {
    flex-direction: column;
  }

  .power_thinker_content > img {
    max-width: 45rem;
    margin-top: 5rem;
    margin-left: auto;
    margin-right: auto;
  }

  .title_130 {
    font-size: 9rem;
    line-height: 100%;
  }

  .title_140 {
    font-size: 10rem;
  }

  .power_thinker_content {
    text-align: center;
  }

  .power_thinker_content h2 {
    margin: 0 auto;
  }

  /* ================= formulation_area ================== */
  .ft_images {
    width: 40rem;
    position: absolute;
    top: 13.4rem;
  }

  .ft_left {
    left: -28rem;
  }

  .ft_right {
    right: -30rem;
  }

  .pt_70 {
    padding-top: 5rem;
  }

  .pb_70 {
    padding-bottom: 5rem;
  }

  .jambes_img {
    width: 22rem;
  }

  /* ================= Bureau_area ================== */
  .Bureau_area {
    padding: 3rem 3rem 6rem 3rem;
  }

  .Bureau_content {
    flex-direction: column;
    gap: 3rem;
  }

  .bureau_left {
    text-align: center;
    margin: 0 auto;
  }

  .products_area {
    padding-top: 3rem;
  }
}

/*----- sm devices (tablets, 767px and down) -----*/
@media (max-width: 767px) {
  /* ============ default styles ============ */
  html {
    font-size: 55%;
  }

  body {
    font-size: 1.8rem;
  }

  :root {
    --menuHeight: 7rem;
  }

  p br {
    display: none;
  }

  .site_header.menu_up {
    top: -7rem;
  }

  /* ============== hero_area ================ */
  .hero_area {
    display: flex;
    align-items: center;
    padding-top: 0;
  }

  .hero_txt {
    max-width: 35rem;
    margin: 0 auto;
    display: block;
    width: 65vh;
    margin-top: -5rem;
  }

  .hero_man {
    max-width: 12rem;
    right: 1rem;
    bottom: 4rem;
    width: 25vh;
  }

  .ct_btn {
    width: 3.6rem;
    height: 3.6rem;
    font-size: 1.8rem;
    margin-right: 1rem;
  }

  .header_right {
    padding: 0.3rem;
    padding-right: 1rem;
  }

  /* ================ power_thinker ================ */
  .power_thinker {
    padding: 6rem 2rem;
  }

  .title_130 {
    font-size: 5rem;
  }

  .title_140 {
    font-size: 5.5rem;
  }

  .text_bg {
    top: calc(50% + 0.2rem);
    width: calc(100% + 1rem);
    height: calc(100% - 0.5rem);
  }

  .power_thinker_content > img {
    max-width: 28rem;
    margin-top: 2rem;
  }

  /* ================ formulation_area ================ */
  .jambes_img {
    width: 12rem;
    margin-bottom: -7rem;
  }

  .ft_images {
    width: 15rem;
    top: 10.5rem;
  }

  .ft_left {
    left: -12rem;
  }

  .ft_right {
    right: -12rem;
  }

  .formulation_content .title_130 {
    line-height: 1.05;
  }

  .pb_70 {
    padding-bottom: 3.5rem;
  }

  .pt_70 {
    padding-top: 2.5rem;
  }

  .formulation_content .text_bg {
    top: calc(50% + 0.6rem);
    width: calc(100% + 1rem);
    height: calc(100% - 1rem);
  }

  /* ================ marquee_slides ================== */
  .product_img {
    width: 8.5rem;
  }

  .js-marquee {
    gap: 1.5rem;
  }

  .marquee > div {
    gap: 1.5rem;
  }

  .marquee {
    gap: 1.5rem;
  }

  .marquee_slides {
    gap: 1.5rem;
  }

  /* ================== Bureau_area ================== */
  .Bureau_area {
    padding: 3rem 0 2rem 0;
  }

  .title_80 {
    font-size: 3.8rem;
    line-height: 100%;
  }

  .title_90 {
    font-size: 4rem;
    line-height: 100%;
  }

  .bureau_img {
    width: 90%;
    margin-right: -3rem;
  }

  .Bureau_content {
    gap: 1.5rem;
  }

  .bureau_left .text_bg {
    top: calc(50% + 0.35rem);
  }

  .bureau_left p {
    font-weight: 300;
    letter-spacing: -0.04em;
  }

  .formulation_area {
    padding: 7rem 0 12rem;
  }

  /* =============== footer =============== */
  .footer {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 140%;
    padding: 2rem 0;
  }
}

/*----- xs devices (landscape phones, 575px and down) -----*/
@media (max-width: 575px) {
  html {
    font-size: 2.32vw;
  }

  /* menu */
  .container-fluid,
  .primary_menu {
    width: calc(100%);
  }

  .container {
    padding: 0 2rem;
  }
}