@import "./utility.css";
@import "./layout.css";
@import "./type.css";
@import "./color.css";
@import "./tables.css";

#header span {
  cursor: pointer;
}

/* responsiveness */
/* 1340 */
@media only screen and (max-width: 1340px) {
  .body-container {
    width: 94%;
  }
  #header-banner .logo {
    /* display: none; */
  }
  #header a {
    padding-right: 10px !important;
  }
  #header a:first-child {
    display: none;
  }
  #header a#last {
    padding: 0 !important;
  }
  #header .logo {
    /* position: relative !important; */
    /* top: 0 !important; */
    /* left: -10px !important; */
    /* margin-right: 20px !important; */
    /* opacity: 1 !important; */
    display: none !important;
  }
}

/* 1260 */
@media only screen and (max-width: 1260px) {
  /* #header-banner,
  #header a {
    display: none !important;
  }
  #header a#logo-link {
    display: block !important;
  }
  #header #hamburger {
    display: block !important;
  }
  #header-banner .logo {
    width: 150px !important;
  } */
  .bg-image {
    height: 90vh;
  }
}

@media only screen and (max-width: 1170px) {
  #header a {
    font-size: 12px !important;
  }
}

/* 1180 */
@media only screen and (max-width: 1180px) {
  #business-overview .grid-2.margin-y-30.border-med.border-left.border-top {
    grid-gap: 50px !important;
  }

  #value-by-group .ribbon {
    display: none !important;
  }
  #value-by-group .ribbon-mobile {
    display: block !important;
  }

  .display-text {
    font-size: 50px !important;
  }
  .grid-2-overlay .grid-3 {
    grid-gap: 10px !important;
  }
  .quote {
    font-size: 20px !important;
  }
  .blue-tint-bg .grid-3 {
    grid-gap: 10px !important;
  }
}

/* 1100 */
@media only screen and (max-width: 1100px) {
  #board-of-directors .grid-4 {
    grid-gap: 20px !important;
  }
}

/* 1000 */
@media only screen and (max-width: 1000px) {
  .modal-content {
    width: 80% !important;
  }

  #header a {
    /* padding: 0 5px 0 0 !important; */
    text-transform: capitalize !important;
  }

  #header .body-container {
    width: 96% !important;
  }
  #header-banner .logo {
    width: 100px;
  }

  .tabs .tab-button {
    font-size: 15px;
  }

  /* reduce heading font sizes */
  h1 {
    font-size: 40px;
    margin-top: 35px;
    margin-bottom: 35px;
  }
  h2 {
    font-size: 32px;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }
  h4 {
    font-size: 22px;
  }
  h5 {
    font-size: 18px;
  }
  p,
  span,
  h6 {
    font-size: 16px;
  }

  #home {
    /* background-image: url("../../images/banner-home-mobile.jpg"); */
  }

  #home {
    background-image: url("../../images/2025/home-banner.jpg");
  }
  #multichoice-at-a-glance {
    background-image: url("../../images/2025/multichoice-at-a-glance.png");
  }
  #creating-value {
    background-image: url("../../images/2025/creating_value.png");
  }
  #sustaining-value {
    background-image: url("../../images/2025/sustaining_value.png");
  }
  #performance {
    background-image: url("../../images/2025/performance.png");
  }
  #corporate-governance {
    background-image: url("../../images/2025/corporate_governance.png");
  }
  #shareholder-information {
    background-image: url("../../images/2025/shareholder_information.png");
  }

  .bg-image .inner-container {
    width: 80% !important;
  }

  .downloads .round-corners-med.round-corners-left {
    padding: 20px !important;
  }

  #business-overview .border-med.border-left.border-top.padding-40 {
    padding: 20px !important;
  }
  #business-overview .graphic img.circle {
    width: 70% !important;
  }
  #business-overview .border-med.border-left.border-top {
    border-radius: 20px !important;
    border: 2px solid var(--teal);
  }
  #business-overview .grid-2.margin-y-30.border-med.border-left.border-top {
    grid-gap: 50px !important;
  }
}

/* 900 */
@media only screen and (max-width: 900px) {
  #business-overview .grid-2.grid-gap-med {
    display: block !important;
  }
}

/* 860 */
@media only screen and (max-width: 860px) {
  #board-of-directors .grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 800 */
@media only screen and (max-width: 800px) {
  .modal-content {
    width: 90% !important;
  }

  .grid-6,
  .grid-5 .grid-4,
  .grid-3 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #scrollBtn {
    right: 20px !important;
  }

  #header {
    padding: 10px 0 !important;
  }
  #header .logo {
    top: 4px !important;
  }

  #footer .flex-row {
    display: block;
  }
  #footer p {
    margin: 10px 0;
    padding-bottom: 5px;
    border-bottom: 1px solid var(--white);
  }
  #footer span {
    margin-bottom: 20px;
  }
  #footer .social-links a {
    font-size: 20px !important;
  }

  /* bg images */
  .bg-image {
    background-position: center;
  }
  .bg-image .inner-container {
    width: 100% !important;
  }

  /* business overview */
  #business-overview .grid-2.margin-y-30.border-med.border-left.border-top {
    display: block !important;
  }
  #business-overview .grid-2 .col.color-blue.self-center {
    margin-top: 20px;
    text-align: center;
  }
  #business-overview .graphic img.circle {
    width: 80% !important;
  }
}

/* 750 */
@media only screen and (max-width: 750px) {
  #header a {
    width: 80px;
    line-height: 1.3;
    padding: 0 5px 0 0 !important;
  }
  #header a#last {
    padding: 0 !important;
  }
}

/* 700 */
@media only screen and (max-width: 700px) {
  .downloads .round-corners-med.round-corners-left {
    padding: 0 !important;
    border: 0 !important;
  }

  .related-pages a.width-40,
  .related-pages a.width-50,
  .related-pages a.width-60,
  .related-pages a.width-70 .related-pages a.width-80 {
    width: 100% !important;
  }

  .blue-tint-bg .grid-5 {
    grid-template-columns: repeat(3, 1fr) !important;
    grid-row-gap: 30px !important;
  }
}

@media only screen and (max-width: 650px) {
  #header-banner .logo {
    display: none !important;
  }
  #header a:first-child {
    display: block !important;
  }
  #header .logo {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    margin-right: 20px !important;
    opacity: 1 !important;
    display: block !important;
  }

  #header-banner,
  #header a {
    display: none !important;
  }
  #header a#logo-link {
    display: block !important;
  }
  #header #hamburger {
    display: block !important;
  }
  #header-banner .logo {
    width: 150px !important;
  }
}

/* 600 */
@media only screen and (max-width: 600px) {
  .container .grid-2-overlay img.overlap-image {
    position: relative !important;
    width: 80% !important;
    transform: translateX(0) !important;
    display: block !important;
    margin: 0 auto !important;
  }
  .container .grid-2-overlay {
    display: block !important;
  }

  .grid-3
    .padding-right-40.padding-left-20.border-right.border-med.border-color-orange {
    margin-bottom: 50px !important;
    border: 0 !important;
  }

  .grid-3
    .padding-right-40.padding-left-20.border-right.border-med.border-color-orange
    h1 {
    margin: 20px 0 !important;
  }

  .grid-3
    .padding-right-40.padding-left-20.border-right.border-med.border-color-orange
    img {
    width: 60px !important;
  }

  .tab-content .margin-right-30.margin-top-20.text-right {
    text-align: left !important;
    padding: 0 10px 20px 20px !important;
  }

  .tabs .custom-button {
    margin: 0 !important;
  }

  .section-downloads {
    padding: 40px 0 !important;
  }

  .pagination a {
    font-size: 14px !important;
    padding: 10px 15px !important;
  }
  .pagination a i {
    display: none !important;
  }

  .blue-tint-bg .grid-5 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  #footer a.report {
    padding: 10px 15px !important;
  }

  .grid-6,
  .grid-5 .grid-4,
  .grid-3,
  .grid-2 {
    grid-template-columns: 1fr !important;
  }
  .bg-image .inner-container {
    padding: 0 !important;
  }

  #value-by-group .ribbon-mobile {
    padding: 40px !important;
  }

  #business-overview .graphic img.circle {
    width: 100% !important;
  }
  #business-overview
    .grid-2.fill-color-gradient-teal-right.round-corners-med.round-corners-left.padding-30 {
    display: block !important;
    background: linear-gradient(
      to bottom,
      #4bc7fc44,
      #9bddf919,
      #86dbff08
    ) !important;
    border-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 20px !important;
  }
  #business-overview
    .grid-2.fill-color-gradient-teal-left.round-corners-med.round-corners-right.padding-30.margin-y-30 {
    display: flex !important;
    flex-direction: column-reverse !important;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      to bottom,
      #4bc7fc44,
      #9bddf919,
      #86dbff08
    ) !important;
    border-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 20px !important;
  }
  #business-overview img#champions {
    transform: scale(1) translateX(-50px) !important;
    display: block !important;
    align-self: center !important;
  }
  #business-overview img.width-70 {
    width: 100% !important;
  }
}

/* 500 */
@media only screen and (max-width: 500px) {
  .blue-tint-bg .grid-5 {
    grid-template-columns: 1fr !important;
  }

  #board-of-directors .grid-4 {
    grid-template-columns: 1fr !important;
  }

  .pagination a {
    font-size: 12px !important;
    padding: 10px !important;
  }
}

@media only screen and (max-width: ) {
}