/**
 ** page.css
 **
 ** Definition for all page.
 **
 ** Revision: 1.0
 ** Date: 2023-05-30
 ** Author: Charles Sun
 ** Copyright: Montage Technology Co., Ltd.
 **/

@import "../variables.css";

#page {
  /* background: var(--primary) url("bg.jpg") no-repeat center top; */
  background-color: white;
}

/* Page */
#main {
  margin-top: 1rem;
  padding-top: 1rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  background-color: white;
}
/* Override bootstrap setting */
@media (max-width:767px) {
  .container {
    max-width: 100%;
  }
}
/* Header Region */

/* create a fixed-top header */
.header {
  background-color: white; 
  position:fixed;
  top:0;
  right: 0;
  left:0;
  z-index: 450;
}
html {
  scroll-padding-top: 75px;
}
@media (min-width:992px) {
  html {
    scroll-padding-top: 120px;
  }
}
/* responsive @lg */
#page-wrapper {
  padding-top: 42px;
}
@media (min-width:992px) {
  #page-wrapper {
      padding-top: 73px;
  }
}


/* Fix paragraph image width cannot scale up problem */
.paragraph .field--type-image {
  width: 100%;
}
.paragraph .field--type-image img {
  width: 100%;
  height: auto;
  max-width: unset;
}

/* breadcrumb */
.breadcrumb {
  background-color: unset;
}


/* Banner block (carousel) in Featured Top region shall be centered */
.featured-top .block {
  margin-left: auto;
  margin-right: auto;
}

/* paragraph block shall fullfill screen width in feature-top   */
/* remove container-fluid class and paddings in .paragraph__column */
.featured-top .paragraph__column {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0;
}



/* breadcrumb */
.breadcrumb {
  background-color: unset;
}

.caption > figcaption {
  text-align: center;
  font-size: 13px;
  margin-top: 9px;
  color: #6d7277;
}

/* button styles */
.btn-primary {
  color: white;
  background-color: #003D79; /* var(--primary) */;
  border-color: #003D79; /* var(--primary) */;
}
.btn-primary:hover {
  background-color: #003D79; /* var(--primary) */;
  border-color: #003D79; /* var(--primary) */;
  box-shadow: 0 0 0 0.2rem rgba(0,61,121,.5);
}
.btn-outline-primary {
  color: #003D79; /* var(--primary) */;
  border-color: #003D79; /* var(--primary) */;
}
.btn-outline-primary:hover {
  color: white;
  background-color: #003D79; /* var(--primary) */;
}
.btn-accent {
  color: white;
  background-color: #C23A1E; /* var(--accent) */;
  border-color: var(--accent);
}
.btn-accent:hover {
  color: white;
  background-color: #C23A1E; /* var(--accent) */;
  border-color: #C23A1E; /* var(--accent) */;
  box-shadow: 0 0 0 0.2rem rgba(225,83,97,.5);
}
.btn-outline-accent {
  color: #C23A1E; /* var(--accent) */;
  border-color: #C23A1E; /* var(--accent) */;
}
.btn-outline-accent:hover {
  color: white;
  background-color: #C23A1E; /* var(--accent) */;
}

/**
 * Footer 
 */

@media all {
  .site-footer__top .region {
      width: 50%;
      float: left;
      clear: none;
  }

  .site-footer__top  .region-footer-first {
      width: 100%;
  }
}

@media all and (min-width:851px) {
  .site-footer__top .region {
      width: 20%;
      min-width: 200px;
  }
}

.site-footer__top h2 {
  font-size: 1.2em;
  padding-bottom: 12px;