/* input(2898,10): run-time error CSS1036: Expected expression, found '$'
input(2905,10): run-time error CSS1036: Expected expression, found '$' */
.sustainability-hub {
  position: relative;
  top: 5px;
}

html {
  scroll-behavior: smooth;
}

.button.btn-styled {
  text-align: center;
  padding-right: 20px;
  background: #23415a;
  color: #fff;
  font-weight: 600;
  border-color: #23415a;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  text-transform: initial;
}

.button.btn-styled.btn-white {
  background: #fff;
  color: #23415a;
  border-color: #fff;
}

.button.btn-styled.btn-white:hover {
  border-color: #23415a;
}

.aspect-ratio__inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rounded--corner {
  border-radius: 15px;
  overflow: hidden;
}

.button.btn-styled:hover {
  border-color: #fff;
}

.sustainability-hub h1,
.sustainability-hub h2,
.sustainability-hub h3,
.sustainability-hub h4,
.sustainability-hub h5,
.sustainability-hub h6 {
  color: #23415a;
}

.sustainability-hub p,
.sustainability-hub a,
.sustainability-hub span {
  color: #23415a;
}

.sustainability-hub ul > li{
  font-size: 20px;
  font-weight: 300;
  line-height: 26px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  color: #23415a;
}
.gray-bg  .blockbox--content h2.title,
.white-bg .blockbox--content h2.title{
  color: #23415a;
}
.green-bg .blockbox--content h2.title{
  color: #FFFFFF;
}
.white-bg ul li,
.gray-bg ul li{
  color: #23415a;
}
.green-bg ul li{
  color: #FFFFFF;
}
.sustainability-hub ul > li:not(:last-child){
  margin-bottom: 7px;
}
.gray-bg {
  background: #a5b1bb;
}

/* need to add this class for take a body white background */
.white-bg {
  background: #ffffff;
}

.row.align-middle {
  align-items: center;
  display: flex;
}

@media (max-width: 767px) {
  .row.align-middle {
    display: block;
  }
}

#maincontent {
  position: relative;
  z-index: 3;
}

.sustainability-hub>section:first-child {
  margin-top: 140px;
}

/* alignment wrapper*/
.mainvisual-wrapper>.row {
  padding-left: 18px;
}

.text-and-img--blockbox>.row {
  padding-left: 18px;
}

.product-category--section>.row {
  padding-left: 18px;
}

.product-category--wrapper>.row {
  padding-left: 27px;
}

.product-category--section .section--top-styledbox > .row {
	padding-left: 8px;
	display: flex;
	align-items: flex-start;
}

.explore-stories--wrapperbox>.row {
  padding-left: 18px;
}

.sub-navigation--pillbox>.row {
  padding-left: 9px;
}

.about--design-dev--wrapper>.row {
  padding-left: 18px;
}

.statements--card-section>.row {
  padding-left: 27px;
}

.text-and-img--wrapper>.row {
  padding-left: 18px;
}

@media (max-width:767px) {

  .mainvisual-wrapper>.row,
  .text-and-img--blockbox>.row,
  .product-category--section>.row,
  .product-category--wrapper>.row,
  .section--top-styledbox>.row,
  .explore-stories--wrapperbox>.row,
  .sub-navigation--pillbox>.row,
  .about--design-dev--wrapper>.row,
  .statements--card-section>.row,
  .text-and-img--wrapper>.row {
    padding-left: 0px;
  }
}

.image-siniped-shapebox #image-siniped-shape {
  width: 588px;
  height: calc(100% - 20%);
  transform: translateX(50%) translateY(85px);
}

.image-siniped-shapebox.left-siniped #image-siniped-shape {
  height: calc(100% - 20%);
}

.image-siniped-shapebox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.image-siniped-shapebox.left-siniped #image-siniped-shape {
  transform: translateX(20%) translateY(85px);
}

.image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
  width: 445px;
  height: 305px;
  transform: translateX(20%) translateY(32%);
}

.image-siniped-shape-main.left-siniped.blue-svg-mask {
  fill: rgba(153, 162, 171, 0.9);
}

#mask-small-full #image-siniped-shape {
  width: 445px;
  height: 305px;
  transform: translateX(53%) translateY(32%);
}
.flex-center-modal{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
@media (max-width: 1880px) {
  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(17%) translateY(85px);
  }

  .image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
    transform: translateX(17%) translateY(32%);
  }
}

@media (max-width: 1680px) {
  .image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
    transform: translateX(13%) translateY(32%);
  }

  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(13%) translateY(85px);
  }
}

@media (max-width: 1440px) {
  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(8%) translateY(85px);
  }
}

@media (max-width: 1280px) {
  .image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
    transform: translateX(4%) translateY(32%);
  }

  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(4%) translateY(85px);
    width: 550px;
  }
}

@media (max-width: 1199px) {
  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(4%) translateY(85px);
    width: 462px;
  }
}

@media (max-width: 991px) {
  #mask-small-full #image-siniped-shape {
    width: 345px;
    height: 305px;
    transform: translateX(50%) translateY(28%);
  }

  #image-siniped-shape {
    width: 345px;
    height: 585px;
    transform: translateX(50%) translateY(55px);
  }

  .image-siniped-shapebox #image-siniped-shape {
    width: 351px;
    transform: translateX(50%) translateY(55px);
  }

  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(4%) translateY(55px);
    width: 351px;
  }

  .image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
    width: 350px;
    transform: translateX(4%) translateY(29%);
  }
}

@media (max-width: 767px) {
  #mask-small-full #image-siniped-shape {
    width: 345px;
    height: 385px;
    transform: translateX(4%) translateY(5%);
  }

  .image-siniped-shapebox.left-siniped.small-left-siniped #image-siniped-shape {
    transform: translateX(3%) translateY(5%);
    width: 345px;
    height: 385px;
  }

  #image-siniped-shape {
    height: 390px;
    transform: translateX(5%) translateY(5%);
  }

  .image-siniped-shapebox #image-siniped-shape {
    height: 345px;
    transform: translateX(4%) translateY(5%);
  }

  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(4%) translateY(5%);
    width: 345px;
    height: 390px;
  }
}

@media (max-width: 767px) and (min-width: 600px) {

  .image-siniped-shapebox #image-siniped-shape,
  .image-siniped-shapebox.left-siniped #image-siniped-shape {
    transform: translateX(25%) translateY(5%);
    width: 345px;
    height: 390px;
  }
}

.image-siniped-shape-main {
  width: 100%;
  height: 100%;
  fill: rgba(102, 128, 105, 0.8);
}

.blue-bg .blockbox--content .title {
  color: rgb(35, 65, 90);
}

.siteborder--shape-bottom {
  position: absolute;
  height: 217px;
  width: 100%;
  top: 0;
  left: 0;
  border: 38px solid rgba(165, 177, 187, 0.8);
  top: auto;
  bottom: 0;
  border-top: 0;
}

.green-bg {
  background: #668069 !important;
}

.row.justify-middle {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}

@media (max-width: 767px) {
  .row.justify-middle {
    display: block;
  }

}

.section--top-styledbox {
  text-align: center;
}

.section--top-styledbox .section-title {
  margin-bottom: 60px;
}

.section-title:empty,
.section--top-styledbox .section-title:empty {
  display: none;
}

.section-title,
.center-block--steps-wrapper > h2.section-title {
  text-transform: uppercase;
  font-size: 69px;
  font-weight: 300;
  line-height: 1;
}

.section-styled-box .title {
  color: #fff;
  text-transform: uppercase;
  font-size: 70px;
  line-height: 1;
  word-wrap: break-word;
}

.themes-and-stories-section .section-styled-box .title {
  max-width: 550px;
}

.about-helping-area .listof--helping-area .title .counter {
  color: #fff;
}

.about-helping-area .listof--helping-area .title .counter {
  text-transform: lowercase;
  font-size: 55px;
  line-height: 1;
  font-weight: 300;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
}

.blockbox--content.section-styled-box .block--box h3 .number.counter {
  color: #fff;
}

.blockbox--content.section-styled-box .block--box h3 {
  color: #fff !important;
}

.blockbox--content.section-styled-box .block--box h3>span {
  color: #fff;
  font-weight: 700;
}

.section-styled-box .desc {
  color: #fff;
}

.desc-bold {
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
}

.text-and-img--section.gray-bg .blockbox--content .medium.title {
  color: #23415a;
}

.text-and-img--section.blue-bg .blockbox--content .subtitle,
.text-and-img--section.gray-bg .blockbox--content .desc {
  color: #23415a;
}

.section-styled-box .desc.subtitle {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  word-wrap: break-word;
}

@media (max-width: 1199px) {
  .section-title,
  .center-block--steps-wrapper > h2.section-title {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .section--top-styledbox {
    margin-bottom: 30px;
  }

  .card-item {
    margin-bottom: 30px;
  }

  .section-title,
  .center-block--steps-wrapper > h2.section-title {
    font-size: 50px;
    line-height: 54px;
  }

  .section-styled-box .title {
    font-size: 50px;
    line-height: 54px;
  }
}

@media (max-width: 767px) {
  .card-item {
    margin-bottom: 20px;
  }

  .section-title,
  .center-block--steps-wrapper > h2.section-title {
    font-size: 46px;
    line-height: 54px;
  }

  .section-styled-box .title {
    font-size: 50px;
    line-height: 54px;
  }
}

/*--------------------------------------------
 card components
-------------------------------------------*/
.card-body .card--sub-title {
  text-transform: uppercase;
  font-size: 20px;
  font-weight: 300;
  line-height: 18px;
  font-family: 'Myriad W08 Regular', Arial, sans-serif;
  word-wrap: break-word;
}

.explore-stories--card-items.card-item {
  height: 100%;
}

.card-body.explore-stories--card-body {
  height: calc(100% - 370px);
}

.card-body .card-title {
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
  font-family: 'Myriad W08 Regular', Arial, sans-serif;
  height: 100%;
  word-wrap: break-word;
}

.card-img {
  height: 270px;
  background: #a5b1bb;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  display: block;
}

.card-img>img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 1199px) {
  .card-body .card-title {
    font-size: 30px;
  }
}

@media (max-width: 767px) {
  .card-body .card-title {
    font-size: 34px;
  }
}

/*---------------------------------------------------------
              flying header component
  -------------------------------------------------*/
  /* .site-scroll--active.site-scroll--inactive .site-header , */
  .site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust .site-header,
.site-header {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 800;
  background: #fff;
}
.site-scroll--active.site-scroll--inactive.site-scroll--inactive-sust   .site-header,
.site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust  .site-header,
.site-scroll--active.site-scroll--visible.site-scroll--down .site-header,
.site-header {
  position: absolute !important;
}

body.site-scroll--active.site-scroll--down #maincontent>.white-bg{
  -webkit-transform: translateY(-640px);
  transform: translateY(-640px);
}

.site-scroll--active.site-scroll--visible.site-scroll--up  #maincontent>.white-bg,
.site-scroll--active.site-scroll--visible.site-scroll--up .sub-navigation--pillbox,
.site-scroll--active.site-scroll--visible.site-scroll--up .site-header {
  position: fixed !important;
  background: #fff;
}
.site-scroll--active.site-scroll--visible.site-scroll--up  .site-header,
.site-scroll--active.site-scroll--visible.site-scroll--down .site-header {
  top: -283px;
}

.site-scroll--active.site-scroll--visible.site-scroll--down .sub-navigation--pillbox {
  -webkit-transform: translateY(-680px);
  transform: translateY(-680px);
}

.site-scroll--active.site-scroll--visible.site-scroll--down .site-header {
  -webkit-transform: translateY(-283px);
  transform: translateY(-283px);
}

body.site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
  transition: all 250ms ease 0ms;
  -webkit-transform: translateY(97px);
  transform: translateY(97px);
  z-index: 9999;
}

body.site-scroll--active.site-scroll--up.site-scroll--visible #maincontent>.white-bg {
  transition: all 250ms ease 0ms;
  -webkit-transform: translateY(140px);
  transform: translateY(140px);
}

body.site-scroll--active.site-scroll--up.site-scroll--visible .site-header {
  -webkit-transform: translateY(283px);
  transform: translateY(283px);
}

.site-header {
  position: fixed;
  background: #fff;
}

.site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust .sub-navigation--pillbox,
.site-scroll--active.site-scroll--inactive-sust.site-scroll--inactive .sub-navigation--pillbox,
.site-scroll--active.site-scroll--visible.site-scroll--inactive-sust .sub-navigation--pillbox {
  position: absolute !important;
  -webkit-transform: translateY(0px);
  transform: translateY(0px);
  z-index: 9999;
}
.site-scroll--active.site-scroll--visible.site-scroll--up #header{
  -webkit-transform: translateY(283px);
  transform: translateY(283px);
  transition: all 250ms ease 0ms;
}


/*-------------------------------------------
    header sub navigation pill components styled
  ------------------------------------------------*/
  .site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust .sub-navigation--pillbox,
.sub-navigation--pillbox {
  width: 100%;
  left: 0;
  z-index: 9999;
  top: 72px;
  padding-top: 14px;
}
.site-scroll--active.site-scroll--inactive.site-scroll--inactive-sust  .sub-navigation--pillbox,
.site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust .sub-navigation--pillbox,
.site-scroll--active.site-scroll--visible.site-scroll--down .sub-navigation--pillbox,
.sub-navigation--pillbox {
  position: absolute;
}

.header-bracket,
.site-scroll--inactive .header-bracket {
  position: relative;
  z-index: 999;
  width: 100%;
}
.header-bracket::before ,
.site-scroll--inactive .header-bracket::before {
  content: "";
  height: 190px;
  width: 100%;
  left: 0;
  top: 39px;
  display: block;
  border: 38px solid #668069;
  border-bottom: 0;
  position: absolute;
  z-index: 9999;
}


.site-scroll--active.site-scroll--up.site-scroll--inactive-sust .header-bracket::before,
.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive-sust .header-bracket::before {
  border-color: #668069;
}
.site-scroll--active.site-scroll--up.site-scroll--inactive-sust .site-header,
.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive-sust .site-header {
  position: absolute !important;
}

.header-sub-navigation--pill {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 0;
  margin-top: 15px;
  margin-left: 1.111em;
}

.site-scroll--active.site-scroll--up .sub-navigation--pillbox,
 .site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
	background-color: #eff2f3; /* $blue-dark7 - this isn't processed here though */
	padding: 10px;
	min-height: 75px;
	left: 0;
	margin: 0;
	border-top-width: 0;
	top: 87px;
}

.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
 .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
	padding: 0;
	background-color: transparent;
	transition: background-color 350ms ease 100ms;
	padding-top: 10px;
}

.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .header-sub-navigation--pill .header-subnav--pill-links:not(:last-child) {
  margin-right: 30px;
}

.header-sub-navigation--pill .header-subnav--pill-links:not(:last-child) {
  margin-right: 30px;
  text-transform: uppercase;
}

.header-sub-navigation--pill .header-subnav--pill-links {
  margin-bottom: 15px;
  list-style: none ;
}

.header-sub-navigation--pill .header-subnav--pill-links a {
  text-transform: uppercase;
  margin-bottom: 0;
  font-weight: 400;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
}
.site-scroll--active.site-scroll--inactive-sust #maincontent>.white-bg,
.site-scroll--active.site-scroll--visible.site-scroll--inactive-sust #maincontent>.white-bg {
  position: absolute !important;
  transform: translateY(0px);
  animation: time-top 10ms ease 0ms;
  transition: all 10ms ease 0ms;
}

@keyframes time-top {

  0% {
    opacity: 0;
  }

  50% {
    opacity: 0;
    transform: translateY(-90px);
  }

  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}


@media (max-width: 1250px) {
  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive-sust .sub-navigation--pillbox {
    padding-left: 30px;
  }

  .sub-navigation--pillbox {
    padding-left: 30px;
  }
}

@media (max-width: 1250px) and (min-width:992px) {

  body.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  body.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    padding-left: 30px;
  }

  .site-scroll--active.site-scroll--up .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .header-sub-navigation--pill .header-subnav--pill-links {
    margin-right: 13px;
  }

  .sub-navigation--pillbox {
    border-width: 22px;
  }

  .header-sub-navigation--pill .header-subnav--pill-links a {
    text-transform: uppercase;
    font-size: 15px;
    line-height: 13px;
    padding: 13.5px;
    padding-right: 10px !important;
    min-height: 25px;
    font-weight: 400;
    font-family: inherit;
  }

  .header-sub-navigation--pill {
    margin-top: 18px;
    margin-left: 0;
  }
}

@media (max-width: 350px) {
  .header-sub-navigation--pill .header-subnav--pill-links a {
    font-size: 15px;
  }
}

.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
.site-scroll--active.site-scroll--up.site-scroll--visible.site-scroll--inactive .sub-navigation--pillbox {
  border-top-width: 38px;
}


@media (max-width:767px) {

  .site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--up.site-scroll--visible.site-scroll--inactive .sub-navigation--pillbox {
    border-top-width: 19px;
  }

  .site-scroll--inactive .header-bracket::before {
    border-width: 19px;
    top: 45px;
  }

  .header-bracket::before {
    border-width: 19px;
  }
}

/* breadcrumb menu*/
#maincontent>.white-bg .breadcrumb .breacrumb__list {
  text-align: left;
}
.site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust #maincontent>.white-bg,
#maincontent>.white-bg {
  top: 5px;
  z-index: 99999;
  width: 100%;
}
.site-scroll--active.site-scroll--inactive.site-scroll--inactive-sust  #maincontent>.white-bg,
.site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust #maincontent>.white-bg,
.site-scroll--active.site-scroll--visible.site-scroll--down #maincontent>.white-bg,
#maincontent>.white-bg {
  position: absolute;
}

@media (min-width:820px) and (max-width:991px) {
.site-scroll--active.site-scroll--up .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    padding-left: 30px;
  }

  .site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    padding-left: 30px;
  }

}

@media (max-width:819px) {
  body.site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }

  .site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    left: 0;
    padding: 0 25px;
  }

  .site-scroll--active.site-scroll--up .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    padding: 10px 25px;
  }

  body.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  body.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    transform: translateY(39px);
    -webkit-transform: translateY(39px);
    padding-top: 10px;
  }

  .site-scroll--active.site-scroll--visible.site-scroll--inactive-sust #maincontent>.white-bg {
    position: absolute !important;
    -webkit-transform: translateY(0px);
    transform: translateY(0px);
  }
  .site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust #maincontent > .white-bg,
  #maincontent>.white-bg {
    top: 7px;
  }

  /* body.site-scroll--active.site-scroll--up #maincontent>.white-bg {
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
  } */

  body.site-scroll--active.site-scroll--up.site-scroll--visible #maincontent>.white-bg {
    position: fixed !important;
    -webkit-transform: translateY(80px);
    transform: translateY(80px);
  }

  body.site-scroll--active.site-scroll--up .sub-navigation--pillbox {
    -webkit-transform: translateY(39px);
    transform: translateY(39px);
  }

}

@media (max-width:767px) {

  .sub-navigation--pillbox {
    top: 66px;
  }

  .header-bracket {
    border-width: 19px;
  }

  body.site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    -webkit-transform: translateY(38px);
    transform: translateY(38px);
  }
}

@media (max-width:599px) {
  .sub-navigation--pillbox {
    top: 51px;
  }

  body.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  body.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    transform: translateY(63px);
    -webkit-transform: translateY(63px);
  }

  .site-scroll--inactive .header-bracket::before {
    top: 41px;
  }

  .site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    left: 0px;
    padding: 0 20px;
  }

  .site-scroll--active.site-scroll--up .sub-navigation--pillbox,
  .site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    padding: 10px 20px;
  }

  .sub-navigation--pillbox {
    top: 60px;
  }

  .sub-navigation--pillbox {
    left: 0;
    padding: 0 20px;
  }

  body.site-scroll--active.site-scroll--up.site-scroll--visible .sub-navigation--pillbox {
    -webkit-transform: translateY(43px);
    transform: translateY(43px);
  }
  body.site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox,
  body.site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox {
    transform: translateY(43px);
    -webkit-transform: translateY(43px);
    padding-top: 10px;
  }
 .site-scroll--active.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox{
    top: 17px;
  }
  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .sub-navigation--pillbox{
    top: 87px;
  }
  .site-scroll--active.site-scroll--visible.site-scroll--inactive.site-scroll--inactive-sust .sub-navigation--pillbox, .sub-navigation--pillbox {
    top: 59px;
    padding-top: 10px;
  }

  .site-scroll--active.site-scroll--up .sub-navigation--pillbox {
    -webkit-transform: translateY(70px);
    transform: translateY(70px);
  }

  body.site-scroll--active.site-scroll--up.site-scroll--visible #maincontent>.white-bg {
    position: fixed !important;
    -webkit-transform: translateY(87px);
    transform: translateY(87px);
  }

  .site-scroll--active.site-scroll--up .sub-navigation--pillbox {
    left: 0px;
  }
}

@media (max-width:325px) {

  .share-bar .share-title {
    font-size: 0.76667rem;
  }
}

/*-----------------------------------------------
         mainvisual section start
  ----------------------------------------------*/
.main-visual--section {
  position: relative;
  height: 790px;
  overflow: hidden;
  padding: 0 35px;
}

/* Note: [background image and section ::after image] should be same because those are rendering same styling */

.overlay-fallback-img {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  clip-path: inset(0% 19% 14% 50% round 0 0 10px 10px);
  z-index: 91;
}

.overlay-img>img,
.overlay-fallback-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-videos {
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  z-index: 90;
  opacity: 1;
}

.overlay-videos {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(0% 19% 14% 50% round 0 0 10px 10px);
  z-index: 92;
  opacity: 1;
}

.overlay-videos::before {
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99;
  position: absolute;
  background: transparent;
}

@media (min-aspect-ratio: 16/9) {
  .back-video {
    width: 100%;
    height: auto;
  }
}

.banner-shapebox {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 91;
}

#banner-shape {
  width: 580px;
  height: 670px;
  transform: translateX(51%) translateY(-30px);
}

.banner-shape-main {
  fill: rgba(102, 128, 105, 0.8);
}

.video-background {
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  -webkit-box-flex:0;
  -ms-flex:0 0 100%;
  flex:0 0 100%;
  z-index:1;
  overflow:hidden;
  -webkit-transform:scale(1.4);
  transform:scale(1.4);
  height:auto
 }


 .video-background iframe,
.video-background .foreground--vimeo
 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 5;
	-webkit-box-flex: 0;
	-ms-flex: 0 0 100%;
	flex: 0 0 100%;
}
 @media (min-aspect-ratio:16/9) {
  .video-background iframe,
  .video-background .foreground--vimeo
  {
   height:300%;
   top:-100%
  }
 }
 @media (max-aspect-ratio:16/9) {
  .video-background iframe,
  .video-background .foreground--vimeo
  {
   width:300%;
   left:-100%;
  }
 }

 @media (orientation: landscape) and (min-aspect-ratio:16/9) and (min-width:584px) and (max-width:1332px){
    .video-background iframe,
    .video-background .foreground--vimeo
    {
     width: 300%;
     left:-100%;
    }
}
@media (orientation: landscape){
  .video-background {
    -webkit-transform:scale(1.4);
    transform:scale(1.4);
   }
}
@media (min-width:1921px) {
  .video-background {
    -webkit-transform:scale(2);
    transform:scale(2);
   }
 }

@media (max-width: 1880px) {
  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 17% 14% 50% round 0 0 10px 10px);
  }
}

@media (max-width: 1680px) {

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 13% 14% 50% round 0 0 10px 10px);
  }
}
@media (max-width: 1567px) {
  .video-background {
    -webkit-transform:scale(1.4);
    transform:scale(1.4);
   }
  }
  @media (max-aspect-ratio: 16 / 9) and (max-width: 425px) {
.video-background .foreground--vimeo {
    width: 374%;
    left: -100%;
}
.video-background iframe{
  width: 485%;
  left: -194%;
}
}
@media (max-aspect-ratio: 16 / 9) and (max-width: 503px) {
  .video-background iframe{
    width: 525%;
    left: -210%;
  }
  }
@media (max-aspect-ratio: 16 / 9) and (max-width: 299px) {
  .video-background iframe,
  .video-background .foreground--vimeo
   {
      width: 600%;
      left: -100%;
  }
  }
@media (max-width: 1440px) {

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 8% 14% 50% round 0 0 10px 10px);
  }

  #banner-shape {
    height: 600px;
  }
}

@media (max-width: 1367px) {

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 5% 14% 50% round 0 0 10px 10px);
  }
}

@media (max-width: 1280px) {

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 3% 14% 50% round 0 0 10px 10px);
  }

  #banner-shape {
    width: 500px;
    height: 541px;
  }

  .main-visual--content-box .title {
    font-size: 62px;
  }
}

@media (max-width: 1199px) {
  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 2% 15% 49% round 0 0 10px 10px);
  }

  #banner-shape {
    width: 473px;
    height: 508px;
  }
}

@media (max-width: 991px) {

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 3% 50% 4% round 0 0 10px 10px);
  }

  #banner-shape {
    width: calc(100% - 76px);
    transform: translateX(38px) translateY(-30px);
    margin: 0 auto;
    height: 360px;
  }

  .main-visual--content-box {
    padding-top: 326px;
  }
}

@media (max-width: 767px) {
  .back-videos {
    display: none;
  }

  .overlay-videos,
  .overlay-fallback-img::after {
    clip-path: inset(0% 9% 45% 9% round 0 0 10px 10px);
  }

  #banner-shape {
    transform: translateX(19px) translateY(-30px);
    margin: 0 auto;
    height: 450px;
    width: calc(100% - 38px);
  }

  .header-sub-navigation--pill .header-subnav--pill-links:not(:last-child) {
    margin-right: 15px;
  }

  .site-scroll--active.site-scroll--visible.site-scroll--up.site-scroll--inactive .header-sub-navigation--pill .header-subnav--pill-links:not(:last-child) {
    margin-right: 15px;
  }

  .header-sub-navigation--pill {
    padding: 0 10px;
  }
}

.main-visual--content-box {
  padding-top: 235px;
  position: relative;
  z-index: 95;
  padding-right: 20px;
}

.main-visual--content-box .title {
  color: #fff;
  font-size: 70px;
  font-weight: 300;
  line-height: 1;
  word-break: break-word;
  max-width: 500px;
}

.main-visual--content-box .desc {
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  line-height: 30px;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  word-wrap: break-word;
}

.banner-image {
  height: 640px;
  background: transparent;
  border-radius: 0 0 13px 13px;
}

.scroll-to-bottom {
  text-align: center;
  color: #fff;
  font-size: 15px;
  position: absolute;
  bottom: 56px;
  left: 0;
  font-weight: 500;
  right: 0;
  z-index: 96;
  line-height: 1;
}

.scroll-to-bottom:before {
  content: '';
  position: absolute;
  height: 80px;
  width: 5px;
  background: #eff2f3; /* $blue-dark7 but it isn't processed here */
  top: 23px;
  left: 0;
  right: 0;
  margin: auto;
}

@media (max-width: 1199px) {
  .main-visual--content-box .title {
    font-size: 68px;
  }
}

@media (max-width: 991px) {

  .main-visual--content-box .title {
    font-size: 47px;
  }

  .main-visual--content-box {
    padding-top: 340px;
  }

}
@media (max-width: 819px) {
  .sustainability-hub>section:first-child {
    margin-top: 90px;
  }
}
@media (max-width: 767px) {
  .main-visual--section {
    height: initial;
    padding: 0 15px;
  }

  .scroll-to-bottom {
    position: relative;
    bottom: 0;
    height: 78px;
    overflow: hidden;
  }

  .sustainability-hub>section:first-child {
    margin-top: 90px;
  }

  .main-visual--content-box .title {
    font-size: 50px;
    line-height: 54px;
  }

  .main-visual--content-box {
    padding-top: 450px;
  }
}

@media (max-width: 599px) {
  .sustainability-hub>section:first-child {
    margin-top: 95px;
  }
}

@media (max-width: 350px) {
  .main-visual--content-box .title {
    font-size: 40px;
    line-height: 1;
  }
  .main-visual--content-box .desc {
    font-size: 16px;
    line-height: 22px;
}
.main-visual--content-box {
  padding-top: 365px;
}
#banner-shape {
  transform: translateX(19px) translateY(-105px);
}
}

/*--------------------------------------------------------------------
                    about development and design section start
  -------------------------------------------------------------------------*/
.about--design-dev--section {
  position: relative;
  padding: 0px 30px;
}

.about--design-dev--titlebox .title {
  text-transform: uppercase;
  font-size: 70px;
  line-height: 1;
  word-wrap: break-word;
}

.about--design-dev--descbox .desc {
  font-size: 20px;
  line-height: 30px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  font-weight: 300;
}

.about--design-dev--section.center-block--section .about--design-dev--titlebox {
  text-align: center;
}

@media (max-width: 991px) {
  .about--design-dev--section {
    position: relative;
    padding: 75px 15px;
  }

  .about--design-dev--titlebox .title {
    font-size: 50px;
    line-height: 1;
  }
}

@media (max-width: 767px) {
  .sustainability-hub {
    top: 2px
  }
  .about--design-dev--titlebox .title {
    font-size: 50px;
    line-height: 54px;
  }
}

/*------------------------------------------------------------
                   TextAndImage block box component
-----------------------------------------------------------------*/
.text-and-img--blockbox .blockbox--content {
  padding-right: 100px;
}
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text,
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text,
section.text-and-img--section.Bullet-Points .blockbox--content ul.list-items-textbox li.list-items-text {
    list-style: disc;
}
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text:not(:last-child),
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text:not(:last-child),
section.text-and-img--section.Bullet-Points .blockbox--content ul.list-items-textbox li.list-items-text:not(:last-child) {
    margin-bottom: 20px;
}
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text,
.text-and-img--blockbox.Bullet-Points.left--block-img .blockbox--content ul.list-items-textbox li.list-items-text,
section.text-and-img--section.Bullet-Points.green-bg .blockbox--content ul.list-items-textbox li.list-items-text{
  color: #ffffff;
}
.blockbox--content .desc {
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
}

.blockbox--content .title {
  text-transform: uppercase;
  font-size: 70px;
  font-weight: 300;
  line-height: 1;
  word-wrap: break-word;
}

.text-and-img--blockbox.left--block-img>.row {
  flex-direction: row-reverse;
}

.text-and-img--blockbox:nth-child(even) .blockbox--content,
.text-and-img--blockbox.left--block-img .blockbox--content {
  padding-left: 64px;
  padding-right: 0px;
}

.text-and-img--blockbox .blockbox--content p.subtitle {
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	font-family: 'Myriad W08 Bold', Arial, sans-serif;
  word-wrap: break-word;
}

.text-and-img--section.siniped--overlay {
  position: relative;
  z-index: 3;
}

.text-and-img--section.climate-counting--section {
  padding: 75px 30px;
  z-index: 1;
  position: relative;
}

.text-and-img--blockbox .blockbox--modal-img {
  height: auto;
  border-radius: 13px;
  background: #a5b1bb;
  overflow: hidden;
}
.text-and-img--blockbox .blockbox--modal-img.transparent-bg {
  min-height: 580px;
}
.text-and-img--blockbox .blockbox--modal-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.text-and-img--blockbox .blockbox--modal-img.transparent-bg {
  background: transparent;
}

@media (max-width: 1280px) {
  .text-and-img--blockbox .blockbox--content {
    padding-right: 60px;
  }

  .text-and-img--blockbox:nth-child(even) .blockbox--content,
  .text-and-img--blockbox.left--block-img .blockbox--content {
    padding-left: 60px;
    padding-right: 0;
  }
}

@media (max-width: 1199px) {
  .text-and-img--blockbox .blockbox--modal-img.transparent-bg {
    height: 580px;
  }

  .blockbox--content .title {
    font-size: 50px;
  }

  .blockbox--content .title {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .text-and-img--blockbox .blockbox--modal-img.transparent-bg {
    height: 550px;
  }

  .blockbox--modal-img>img {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }

  .text-and-img--blockbox .blockbox--content {
    padding-right: 40px;
  }

  .text-and-img--blockbox:nth-child(even) .blockbox--content,
  .text-and-img--blockbox.left--block-img .blockbox--content {
    padding-right: 0px;
    padding-left: 40px;
  }

  .text-and-img--section.blue-bg .blockbox--content .title {
    font-size: 38px;
    line-height: 40px;
  }
  .text-and-img--section .section-title{word-break: break-word;}
  .blockbox--content .title {
    font-size: 50px;
  }
}

@media (max-width: 767px) {
  .text-and-img--blockbox .row.align-middle {
    flex-direction: column-reverse;
    display: flex;
  }

  .blockbox--content .title {
    font-size: 46px;
    line-height: 54px;
  }
  .text-and-img--blockbox .blockbox--modal-img.transparent-bg {
        height: 385px;
        max-width: 350px;
        min-height: auto;
  }
  .text-and-img--blockbox .blockbox--modal-img {
    max-width: 350px;
  }

  .text-and-img--blockbox .blockbox--content {
    padding-right: 0px;
  }

  .text-and-img--blockbox:nth-child(even) .blockbox--content,
  .text-and-img--blockbox.left--block-img .blockbox--content {
    padding-right: 0px;
    padding-left: 0px;
  }

  .text-and-img--blockbox .blockbox--content {
    padding-right: 0px;
    padding-top: 30px;
  }

  .text-and-img--blockbox.left--block-img .blockbox--content {
    padding-left: 0px;
    padding-top: 30px;
  }

}

/*-------------------------------------------------------------
          center block text and image components
  ----------------------------------------------------------------*/
.center-block-wrapper {
  text-align: center;
  position: relative;
}

.transparency-section .center-block-wrapper {
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 0;
  padding-bottom: 0;
}

.center-block-wrapper>ul {
  margin-bottom: 35px;
}

.center-block-wrapper>ul>li {
  list-style: none;
  position: relative;
}

.center-block-wrapper .grid-card-box.one-columns .title {
	font-size: 70px;
}
.center-block-wrapper .grid-card-box.two-columns .title{
	font-size: 40px;
}

.center-block-wrapper .grid-card-box.three-columns .title {
	font-size: 25px;
}

.center-block-wrapper .grid-card-box.four-columns .title {
	font-size: 22px;
}
.center-block-wrapper .grid-card-box.four-columns .desc{
	font-size: 18px;
}

.grid-card-box.with-button {
  display: grid;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  text-align: center;
}
.grid-card-box{
  display: grid;
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  text-align: center;
}
.grid-card-box.three-columns{
    grid-template-columns: 1fr 1fr 1fr;
}
.grid-card-box.one-columns{
  grid-template-columns: 1fr;
}
.grid-card-box.two-columns{
  grid-template-columns: 1fr 1fr;
}
.grid-card-box.four-columns{
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

@media (max-width:991px) {
  .grid-card-box h3.title:not(:first-child){margin-top: 35px;}
.grid-card-box.with-button,
.grid-card-box{
  display: block;
}
}

.center-block-wrapper>.section-title {
  margin-bottom: 35px;
}

.center-block-wrapper .grid-card-box  .title {
	text-transform: uppercase;
	font-size: 70px;
	line-height: 1;
	font-weight: 300;
	font-family: 'Myriad W08 Light', Arial, sans-serif;
	margin-bottom: 0;
	word-break: break-word;
	margin-top: 0;
	margin-bottom: 10px;
  flex: 0 0 1;
  width: calc(100% - 10px);
}
.center-block-wrapper .grid-card-box   .desc {
    max-width: 375px;
    margin-left: auto;
    margin-right: auto;
    width: calc(100% - 20px);
    margin-bottom: 0px;
}
@media (max-width:767px) {
  .center-block-wrapper .grid-card-box   .desc {margin-bottom: 30px;}
}
.center-block-wrapper .center-block--btn:empty,
.center-block-wrapper .grid-card-box .button.btn-styled.center-block--btn:empty{
  display: none;
}

.center-block-wrapper .grid-card-box .center-block--btn {
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	display: inline-block;
	margin-top: 17px;
	position: relative;
	max-width: 400px;
	width: calc(100% - 10px);
}
@media (max-width:1280px) and (min-width:992px) {
  .center-block-wrapper ul > li > .center-block--btn {
  font-size: 13px;
  }
}

@media (max-width:1170px) and (min-width:992px) {
  .center-block-wrapper ul > li {
    padding-bottom: 57px;
  }
  .center-block-wrapper ul > li > .desc {
    bottom: 75px;
  }
}
.center-block--btn {
  margin-top: 30px;
}

.center-block--steps-wrapper .title {
  text-transform: uppercase;
  font-size: 70px;
  line-height: 1;
  font-weight: 300;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  margin-bottom: 0;
  word-break: break-word;
}

.center-block--steps-wrapper .title:empty {
  display: none;
}

.center-block--steps-wrapper {
  text-align: center;
}

.center-block--steps-wrapper .subtitle {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  font-family: "Myriad W08 Bold", Arial, sans-serif;
   text-transform: uppercase;
   word-break: break-word;
}
.center-block--steps-wrapper .section-title{
  word-break: break-word;
}
.center-block--steps-wrapper .subtitle:empty,
.center-block--steps-wrapper .section-title:empty {
  display: none;
}

.center-block--steps-wrapper .desc {
  font-size: 20px;
  font-weight: 300;
  line-height: 30px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  margin-bottom: 0px;
}
.center-block--steps-wrapper > .product-category--btn{
  margin-top: 20px;
}
@media (max-width: 1280px) {
  .center-block--steps-wrapper .title {
    font-size: 64px;
  }
}

@media (max-width: 1199px) {
  .center-block--steps-wrapper .title {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .center-block--steps-wrapper .title {
    font-size: 50px;
    line-height: 54px;
  }



}

@media (max-width: 767px) {
  .center-block-wrapper ul>li>.desc {
    max-width: 425px;
  }

  .center-block--steps-wrapper .title {
    font-size: 50px;
    line-height: 54px;
  }

  .product-category-footermain--cont-box.center-block--section .title {
    font-size: 42px;
  }

  .center-block-wrapper {
    padding: 65px 10px;
  }

  .about--design-dev--section .center-block-wrapper {
    padding-top: 0;
    padding-bottom: 0;
  }
}
/*------------------------------------------------
                   campaign-quote-section start
  -----------------------------------------------------*/

  .center-block--section .center-block--steps-wrapper .title{margin-bottom: 25px;}
  .center-block--section .center-block--steps-wrapper .title:empty{display: none;}
  .center-block--section .center-block--steps-wrapper .desc:not(:last-child){margin-bottom: 20px;}
  .center-block--section .center-block--steps-wrapper .desc:empty{display: none;}
  .center-block--section .center-block--steps-wrapper .campaign-quote--btn:empty{display: none;}
  .center-block--section.green-bg .center-block--steps-wrapper .title,
  .center-block--section.green-bg .center-block--steps-wrapper .desc{color: #FFFFFF;}
  .center-block--section.green-bg .center-block--steps-wrapper .desc>a:empty{display: none;}
  @media (max-width:767px) {
   .center-block--section .center-block-wrapper {
	padding: 0 10px;
}
  }
/*------------------------------------------------
                   our features section start
  -----------------------------------------------------*/
.our-feature--section {
  padding: 75px 30px;
}

.our-feature--section.feature-one {
  padding-top: 150px;
  padding-bottom: 75px;
}

.feature-contentBox .Linktitle {
  margin-bottom: 20px;
  display: block;
}

@media (max-width: 1199px) {
  .our-feature--section.feature-one {
    padding-top: 95px;
    padding-bottom: 75px;
  }

  .our-feature--section {
    padding: 75px 30px 20px;
  }
}

@media (max-width: 767px) {
  .our-feature--section {
    padding: 75px 30px 30px;
  }

  .our-feature--section.feature-one {
    padding-top: 65px;
    padding-bottom: 65px;
  }
}

/*---------------------------------------------------
                          our journey section start
  -------------------------------------------------------*/
.our-journey--section {
  position: relative;
  /* background: url("../content/images/warm_oak.jpg"); */
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 1;
}

/* this is background green overlay */
.siniped--overlay::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(102, 128, 105, 0.9);
}

.themes-and-stories-section {
  padding: 75px 30px;
}

.our-journey--section {
  padding: 75px 30px;
}

@media (max-width: 767px) {
  .themes-and-stories-section {
    padding-left: 0;
    padding-right: 0;
  }

  .text-and-img--section.themes-and-stories-section>.text-and-img--wrapper>.row {
    padding-left: 0;
  }
}

/* design and development journey */
.themes-and-stories-section .section-styled-box .subtitle {
  color: #fff;
  font-weight: 600;
  margin-bottom: 30px;
}

.themes-and-stories-section .section-styled-box>h3.subtitle {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
}

/* slider indicator */

.indicator-slides {
  padding-top: 0;
  position: absolute;
  z-index: 9;
  bottom: 0px;
  width: 100%;
}

.indicator-slides .indicator-product--detail-box {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-gap: 15px;
  width: 100%;
  flex-wrap: wrap;
}

@media (max-width: 991px) {
  .indicator-slides .indicator-product--detail-box {
    grid-template-columns: repeat(3, 1fr);
  }
}


.indicator-product--detail-box .indicator--title {
  font-weight: 600;
  color: #fff;
  line-height: 20px;
  font-size: 15px;
  font-family: 'Myriad W08 Regular', Arial, sans-serif;
  transition: all 650ms ease 0s;
}

.indicator-product--details-items:hover .indicator--title,
.indicator-product--details-items.active .indicator--title {
  font-weight: 700;
  font-size: 16px;
}

.indicator-product--details-items {
  position: relative;
  opacity: 0.2;
  transition: all 650ms ease 0s;
}

.indicator-product--details-items:hover,
.indicator-product--details-items.active {
  opacity: 1;
  cursor: pointer;
  width: 100%;
}

@media (max-width: 767px) {
  .our-journey--section {
    padding: 75px 15px 30px;
  }

  .indicator-product--details-items:hover,
  .indicator-product--details-items.active {
    width: 100px;
  }
}

/* //================ slides items */

.slide-items .item .content .items-title {
  font-size: 20px;
  color: #fff;
  line-height: 30px;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  font-weight: 700;
  word-wrap: break-word;
}
.slide-items .item .content .item-desc > a:not(.button){
  font-size: 40px;
  font-weight: 400;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  margin-bottom: 0.5em;
}
.slide-items .item .content .item-desc {
  font-size: 40px;
  font-weight: 400;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  margin-bottom: 0.5em;
  color: #fff;
  line-height: 1;
  max-width: 50%;
  height: 207px;
  overflow: hidden;
  word-wrap: break-word;
}

.slide-items .item.active .content,
.item-slide.active-view {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.indicator-slides {
  padding-top: 0;
  position: relative;
  z-index: 9;
  bottom: 0;
  width: 100%;
}

.slide-items {
  min-height: 325px;
  margin: 0;
  margin-bottom: 0px;
  position: relative;
  margin-bottom: 35px;
}

.slide-items .item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}

.slide-items .item .photo {
  height: 350px;
  border-radius: 13px;
  overflow: hidden;
  object-fit: cover;
  width: 550px;
  position: absolute;
  left: auto;
  right: 0;
  top: -100px;
}

.slide-items .item .photo img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.slide-items .item {
  opacity: 0;
  justify-content: space-around;
}

.slide-items .item .content {
  position: relative;
  z-index: 99;
}

.indicator span {
  display: block;
  height: 5px;
  background: #a5b1bb;
  margin: 5px;
  overflow: hidden;
}
.slide-items .item.active .photo{opacity: 1;}
.slide-items .item .photo{opacity: 0;}
.slide-items .item .photo img,
.slide-items .item.active .photo img{
  opacity: 0;
  animation: fade-out 550ms ease-in-out 0s;
}
.slide-items .item.active .photo img.active {
  opacity: 1;
  animation: fade-in 650ms ease-in-out 0s;
}
@keyframes fade-in {
  0%{opacity: 0;}
  100%{opacity: 1;}
}
@keyframes fade-out {
  0%{opacity: 1;}
  100%{opacity: 0;}
}
.active span::after {
  content: '';
  display: block;
  height: inherit;
  background: #fff;
  transform: translateX(-100%);
  animation: thumb 12s forwards linear;
}

.slide-items .active {
  opacity: 1;
}

.slide-items .active .photo .active {
  display: block;
}

.slide-items .active .content {
  opacity: 1;
}

@keyframes thumb {
  to {
    transform: initial;
  }
}

/* orbit slider styled design */

.slide-items .item .photo>img,
.project-tab-link .swiper-slide>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 99;
  position: absolute;
}

@media (max-width: 1280px) {
  .slide-items .item .photo {
    width: 450px;
  }
}

@media (max-width: 991px) {
  .slide-items .item .photo {
    width: 300px;
  }

  .item-desc br {
    display: none;
  }
}

@media (max-width: 767px) {

  .slide-items {
    min-height: 685px;
    height: 100%;
  }

  .slide-items .item .content .item-desc {
    max-width: 100%;
  }

  .item-desc {
    font-size: 35px;
  }

  .themes-stories-cont-block {
    padding: 0 25px;
  }

  .themes-and-stories-section .section-styled-box .title>br {
    display: none;
  }

  .slide-items .item .photo {
    width: 100%;
    border-radius: 0;
    position: relative;
    top: 0;
  }

  .text-and-img--section.green-bg.themes-and-stories-section .text-and-img--wrapper>.row>.columns {
    padding: 0;
  }

}

@media (max-width: 767px) {
  .indicator-slides {
    position: absolute;
    top: 375px;
    z-index: 999;
  }

  .slide-items .item .content {
    position: relative;
    top: 70px;
    padding-top: 70px;
    padding: 70px 24px 0;
  }

  .slide {
    position: relative;
  }
  #replay {
    position: absolute;
    top: 12px;
    z-index: 9999;
    left: 12px;
  }
  .indicator-slides .indicator-product--detail-box {
    grid-template-columns: repeat(5, 1fr);
  }

  .indicator-product--detail-box .indicator--title {
    display: none;
  }

  .indicator-product--details-items {
    width: 30px;
  }
}

@media (max-width: 767px) and (min-width: 600px) {
  .indicator-product--details-items {
    width: 100%;
  }

  .indicator-product--details-items.active {
    width: 100%;
  }
}

/*-----------------------------------------------------------
                    transparency step section start
  -------------------------------------------------------*/
.transparency-section {
  padding: 0px 30px;
  position: relative;
}

@media (max-width: 767px) {
  .transparency-section {
    padding: 0px 10px;
  }
}

/*------------------------------------------------
             productCategory component section start
  -------------------------------------------------*/
.product-category--section {
  position: relative;
  padding: 0px 30px 0;
}

.product-category--section .section--top-styledbox {
  margin-bottom: 0;
  border-bottom: 0.15em solid #8a99a6;
}

.product-category--section .section--top-styledbox .desc {
  text-align: left;
  margin-bottom: 0;
  word-wrap: break-word;
  line-height: 2.2;
}

.product-category--section .section-title {
  text-align: left;
  margin-bottom: 0;
  font-size: 69px;
  line-height: 1;
  word-wrap: break-word;
}

.category--box {
  padding-top: 0px;
  padding-bottom: 30px;
  border-bottom: 0.15em solid #8a99a6;
}

.product-category--title {
  font-size: 40px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 25px;
  position: relative;
  top: 5px;
  word-wrap: break-word;
}

.product-category--desc {
  font-size: 20px;
  font-weight: 300;
  line-height: 28px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
  margin-bottom: 0;
}

.button.btn-styled.product-cat--btn {
  margin-bottom: 0;
}

.product-category-items--text-box {
  padding-bottom: 30px;
  padding-top: 69px;
}

.product-category-footermain--cont-box {
  margin-top: 0px;
  text-align: center;
  display: block;
}

.image-cont-box .product-category--modal-img {
  width: 100%;
  height: 250px;
  background: #fff;
  border-radius: 13px;
  overflow: hidden;
}

.image-cont-box .product-category--modal-img>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-category-footermain--cont-box.center-block--section .center-block-wrapper {
  padding-top: 0px;
}

.button.btn-styled.product-cat--btn-sc {
  display: none;
}

@media (max-width: 1280px) {
  .product-category--section .section-title {
    font-size: 62px;
  }
}

@media (max-width: 1199px) {
  .product-category--section .section-title {
    font-size: 50px;
  }
}

@media (max-width: 991px) {
  .product-category--section .section--top-styledbox {
    padding-bottom: 30px;
  }

  .product-category--section .section-title {
    max-width: 420px;
  }

  .product-category--title {
    font-size: 30px;
    font-weight: 700;
    line-height: 30px;
  }

  .product-category--section .section--top-styledbox .desc {
    font-size: 20px;
    font-weight: 700;
    line-height: 30px;
    max-width: 445px;
    text-transform: uppercase;
  }

  .image-cont-box .product-category--modal-img {
    height: 210px;
  }

  .product-category-footermain--cont-box {
    padding-bottom: 0px;
  }
  .product-category--section .section--top-styledbox > .row {
    display: block;
  }
}

@media (max-width: 767px) {
  .button.btn-styled.product-cat--btn {
    position: absolute;
    bottom: -416px;
  }

  .category--box .button.btn-styled.product-cat--btn {
    display: none;
  }

  .button.btn-styled.product-cat--btn-sc {
    display: inline-block;
  }

  .category--box .product-category--modal-img {
    margin-bottom: 20px;
  }

  .product-category--section {
    position: relative;
    padding: 0px 25px;
  }

  .product-category-footermain--cont-box.center-block--section .center-block-wrapper {
    padding-top: 0px;
    padding-bottom: 0;
  }

  .category--box {
    padding-bottom: 80px;
  }
}

@media (max-width: 599px) {
  .category-img-two {
    display: none;
  }
}

@media (max-width: 450px) {
  .product-category--section .section--top-styledbox .desc {
    font-size: 16px;
  }
}

/*-----------------------------------------
             our ability section start
  ------------------------------------------ */
.our-ability--section {
  position: relative;
  padding: 75px 30px;
}

@media (max-width: 991px) {
  .our-ability--section {
    padding: 65px 15px;
  }
}

/*--------------------------------------------------------
                 climate goal section start
  -------------------------------------------------------*/
.climate-count-num--section,
.climate-goal--section {
  padding: 75px 30px;
  position: relative;
  z-index: 3;
}

/* Note: [section background and shudo ::after/::before class background] should be same because those are rendering the same style */

.siniped--overlay::before {
  position: absolute;
  content: '';
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: -1;
  background: rgba(102, 128, 105, 0.9);
}

@media (max-width: 991px) {

  .climate-count-num--section,
  .climate-goal--section {
    padding: 55px 15px 65px;
  }
}
@media (max-width:819px) and (min-width:768px) {
  .explore-stories--wrapperbox > div > div:nth-child(3) {
    margin-top: 30px;
}
}
/*----------------------------------------------------
                report and content section start
  --------------------------------------------------------*/
.report-and-content-section {
  padding: 75px 23px;
  position: relative;
}

.listof--helping-area .title {
  text-transform: lowercase;
  font-size: 55px;
  line-height: 1;
  font-weight: 300;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
}

.about-helping-area {
  margin-top: 35px;
  margin-left: 0;
}

.about-helping-area .listof--helping-area {
  margin-bottom: 35px;
  list-style: none;
}

@media (max-width: 1199px) {
  .listof--helping-area .title {
    font-size: 45px;
  }
}

@media (max-width: 991px) {
  li.listof--helping-area .row.align-middle {
    display: block;
  }

  .our-feature--section {
    padding: 75px 30px 30px;
  }
}

@media (max-width: 767px) {
  .about-helping-area .listof--helping-area {
    margin-bottom: 0;
  }

  .listof--helping-area .title {
    font-size: 50px;
    line-height: 54px;
  }
}

/*-----------------------------------------------------
                      exploreStories section start
    ------------------------------------------------------*/
.explore-stories--section {
  padding: 120px 30px 75px;
}

@media (max-width: 991px) {
  .explore-stories--section {
    padding: 80px 15px 55px;
  }
}

@media (max-width: 767px) {
  .explore-stories--section {
    padding: 80px 30px 55px;
  }

  .explore-stories--section .row.justify-middle {
    display: flex;
  }
}

@media (max-width: 559px) {
  .explore-stories--section {
    padding: 80px 25px 55px;
  }

  .explore-stories--section .row.justify-middle {
    display: block;
  }

  .explore-stories--card-img.card-img {
    max-width: 370px;
  }
}

@media (max-width: 350px) {
  .explore-stories--section {
    padding: 80px 20px 55px;
  }
}

/*-------------------------------------------------------
                         contact us section
  ----------------------------------------------------------*/
.contact-us-wrapper {
  position: relative;
  padding: 75px 30px 30px;
}

@media (max-width: 991px) {
  .contact-us-wrapper {
    padding: 35px 0px 30px;
  }
}

@media (max-width: 767px) {
  .contact-us-section {
    padding-bottom: 160px;
    padding-left: 23px;
    padding-right: 23px;
  }
}

/*-----------------------------------------------
      statementHovering card box  start
------------------------------------------------------ */
.statements--card-section {
  padding: 0px 30px 0px;
}

.statements-card-wrapper .section--subtitle-box .sub-heading {
  text-transform: uppercase;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  margin-bottom: 35px;
  word-break: break-word;
}

.statements-card-wrapper .section--subtitle-box .sub-heading:empty {
  display: none;
}

.statements-card-wrapper .section--subtitle-box {
  text-align: center;
  margin-bottom: 0px;
}

.statements-card-wrapper .grid--card-box .grid--item-box {
  margin-bottom: 30px;
}

.grid--item-box>.title {
  height: 133px;
  font-size: 40px;
  line-height: 43px;
  font-family: 'Myriad W08 Regular', Arial, sans-serif;
  overflow: hidden;
  word-wrap: break-word;
}

.grid--item-box:last-child .title,
.grid--item-box:first-child .title {
  line-height: 43px;
}
.is-borderless{
  transition: color 300ms ease-out 0s;
}
.grid--item-box>.modal--img-box>.modal--img {
  height: 281px;
  width: 100%;
  object-fit: cover;
  overflow: hidden;
  border-radius: 13px;
  background: #a5b1bb;
  border: 0;
  outline: 0;
  transition: all 650ms ease-in-out 0s;
}

.grid--item-box>.modal--img-box {
  position: relative;
  overflow: hidden;
}

.grid--item-box.active>.modal--img-box>.modal--img,
.grid--item-box:hover>.modal--img-box>.modal--img {
  height: 587px;
}

.modalimg--overlay-text {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  top: auto;
  background: linear-gradient(140deg,
      rgba(102, 128, 105, 0.8) 0%,
      rgba(35, 65, 90, 1) 100%);
  border-radius: 12px;
  padding: 10px 15px;
  opacity: 0;
  visibility: hidden;
  transition: all 650ms ease-in-out 0s;
}

.grid--item-box.active>.modal--img-box>.modalimg--overlay-text,
.grid--item-box:hover>.modal--img-box>.modalimg--overlay-text {
  opacity: 1;
  visibility: visible;
}
.green-bg :not(li[property="itemListElement"], h3.card-title) > a:not(.button),
.gray-bg :not(li[property="itemListElement"], h3.card-title) > a:not(.button),
.white-bg :not(li[property="itemListElement"], h3.card-title) > a:not(.button),
.hyperlink__box{
  font-size: 20px;
  font-weight: 300;
  line-height: 25px;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
    opacity: 1;
}
a > .icon-forboicon-readmore,
.hyperlink__box .icon-forboicon-readmore {
  color: #fff;
}
.green-bg .hyperlink__box > .icon-forboicon-readmore,
.green-bg a > .icon-forboicon-readmore,
.green-bg a:not(.button),
.green-bg .hyperlink__box
{
  color: #fff;
}
.gray-bg .hyperlink__box > .icon-forboicon-readmore,
.gray-bg a > .icon-forboicon-readmore,
.gray-bg .hyperlink__box ,
.gray-bg a:not(.button),
.product-category--section a > .icon-forboicon-readmore,
.product-category--section .hyperlink__box > .icon-forboicon-readmore,
.product-category--section .hyperlink__box{
  color: #fff;
}
.text-and-img--section.img-siniped--left  .hyperlink__box > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--left  a > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--right .hyperlink__box > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--right a > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--right  .hyperlink__box,
.text-and-img--section.img-siniped--right  a:not(.button),
.text-and-img--section.img-siniped--left  a:not(.button),
.text-and-img--section.img-siniped--left  .hyperlink__box
{
  color: #fff;
}
.text-and-img--section.white-bg a > .icon-forboicon-readmore,
.text-and-img--section.white-bg .hyperlink__box > .icon-forboicon-readmore,
.text-and-img--section.white-bg a:not(.button),
.text-and-img--section.white-bg .hyperlink__box ,
.about--design-dev--section.white-bg a > .icon-forboicon-readmore,
.about--design-dev--section.white-bg .hyperlink__box > .icon-forboicon-readmore,
.about--design-dev--section.white-bg a:not(.button),
.about--design-dev--section.white-bg .hyperlink__box > .icon-forboicon-readmore,
.about--design-dev--section.white-bg .hyperlink__box
.center-block--section.white-bg a > .icon-forboicon-readmore,
.center-block--section.white-bg .hyperlink__box > .icon-forboicon-readmore,
.center-block--section.white-bg a:not(.button),
.center-block--section.white-bg .hyperlink__box > .icon-forboicon-readmore,
.center-block--section.white-bg .hyperlink__box
{
  color: #A5B1BB;
}
.text-and-img--section.green-bg a > .icon-forboicon-readmore,
.text-and-img--section.green-bg .hyperlink__box > .icon-forboicon-readmore,
.text-and-img--section.green-bg a:not(.button),
.text-and-img--section.green-bg .hyperlink__box ,
.center-block--section.green-bg a > .icon-forboicon-readmore,
.center-block--section.green-bg .hyperlink__box > .icon-forboicon-readmore,
.center-block--section.green-bg a:not(.button),
.center-block--section.green-bg .hyperlink__box
{
  color: #A5B1BB;
}
.text-and-img--section.gray-bg a > .icon-forboicon-readmore,
.text-and-img--section.gray-bg .hyperlink__box > .icon-forboicon-readmore,
.text-and-img--section.gray-bg a:not(.button),
.text-and-img--section.gray-bg .hyperlink__box ,
.center-block--section.gray-bg a > .icon-forboicon-readmore,
.center-block--section.gray-bg .hyperlink__box > .icon-forboicon-readmore,
.center-block--section.gray-bg a:not(.button),
.center-block--section.gray-bg .hyperlink__box
{
  color: #FFFFFF;
}
.text-and-img--section.img-siniped--left .hyperlink__box:hover > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--left a:hover > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--right .hyperlink__box:hover > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--right a:hover > .icon-forboicon-readmore,
.text-and-img--section.img-siniped--left .hyperlink__box:hover,
.text-and-img--section.img-siniped--left a:not(.button):hover,
.text-and-img--section.img-siniped--right .hyperlink__box:hover,
.text-and-img--section.img-siniped--right a:not(.button):hover,
.text-and-img--section.green-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.text-and-img--section.green-bg a:hover > .icon-forboicon-readmore,
.text-and-img--section.green-bg a:not(.button):hover,
.text-and-img--section.green-bg .hyperlink__box:hover,
.center-block--section.green-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.center-block--section.green-bg a:hover > .icon-forboicon-readmore,
.center-block--section.green-bg a:not(.button):hover,
.center-block--section.green-bg .hyperlink__box:hover
{
  color: #23415A;
}
.text-and-img--section.white-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.text-and-img--section.white-bg a:hover > .icon-forboicon-readmore,
.text-and-img--section.white-bg .hyperlink__box:hover,
.text-and-img--section.white-bg a:not(.button):hover,
.text-and-img--section.gray-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.text-and-img--section.gray-bg a:hover > .icon-forboicon-readmore,
.text-and-img--section.gray-bg a:not(.button):hover,
.text-and-img--section.gray-bg .hyperlink__box:hover,
.about--design-dev--section.white-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.about--design-dev--section.white-bg a:hover > .icon-forboicon-readmore,
.about--design-dev--section.white-bg .hyperlink__box:hover,
.about--design-dev--section.white-bg a:not(.button):hover,
.center-block--section.white-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.center-block--section.white-bg a:hover > .icon-forboicon-readmore,
.center-block--section.white-bg .hyperlink__box:hover,
.center-block--section.white-bg a:not(.button):hover,
.center-block--section.gray-bg .hyperlink__box:hover > .icon-forboicon-readmore,
.center-block--section.gray-bg a:hover > .icon-forboicon-readmore,
.center-block--section.gray-bg .hyperlink__box:hover,
.center-block--section.gray-bg a:not(.button):hover
 {
  color: $blue;
}
.product-category--section .hyperlink__box:hover > .icon-forboicon-readmore,
.product-category--section a:hover > .icon-forboicon-readmore,
.product-category--section a:not(.button):hover,
.product-category--section .hyperlink__box:hover
{
  color: $blue;
}
.modalimg--overlay-text>.desc {
  position: absolute;
  top: auto;
  bottom: -35px;
  opacity: 0;
  visibility: hidden;
  z-index: 9;
  padding-right: 12px;
  color: #fff;
  transition: all 650ms ease-in-out 0s;
  font-size: 20px;
  line-height: 30px;
  font-weight: 300;
  font-family: 'Myriad W08 Light', Arial, sans-serif;
}

.grid--item-box.active>.modal--img-box>.modalimg--overlay-text>.desc,
.grid--item-box:hover>.modal--img-box>.modalimg--overlay-text>.desc {
  opacity: 1;
  visibility: visible;
  bottom: 0;
  word-break: break-word;
}

@media (max-width: 1280px) {
  .grid--item-box>.title {
    font-size: 35px;
  }

  .grid--item-box>.modal--img-box>.modal--img {
    height: 270px;
  }

  .grid--item-box.active>.modal--img-box>.modal--img,
  .grid--item-box:hover>.modal--img-box>.modal--img {
    height: 455px;
  }
}

@media (max-width: 1199px) {
  .grid--item-box>.title {
    font-size: 31px;
    overflow: hidden;
    line-height: 43px;
  }

  .grid--item-box.active>.modal--img-box>.modal--img,
  .grid--item-box:hover>.modal--img-box>.modal--img {
    height: 471px;
  }

  .grid--item-box>.modal--img-box>.modal--img {
    height: 232px;
  }
}

@media (max-width: 991px) {

  .grid--item-box.active>.modal--img-box>.modal--img,
  .grid--item-box:hover>.modal--img-box>.modal--img {
    height:490px;
  }

  .statements--card-section {
    padding: 25px 30px 75px;
  }
}

@media (min-width: 768px) and (max-width: 819px) {
  .grid--item-box>.modal--img-box>.modal--img {
    height: 310px;
  }
}

@media (max-width: 767px) {
  .grid--item-box>.title {
    height: auto;
  }

  .grid--item-box>.modal--img-box>.modal--img {
    height: 281px;
  }
}

@media (max-width: 767px) {
  .grid--item-box>.title {
    height: 130px;
    font-size: 35px;
  }

  .row.justify-middle.grid--card-box {
    display: flex;
  }
}

@media (max-width: 599px) {
  .grid--item-box>.title {
    overflow: visible;
  }

  .row.justify-middle.grid--card-box {
    display: block;
  }

  .grid--item-box>.modal--img-box {
    max-width: 285px;
  }

  .grid--item-box>.title {
    height: auto;
  }
}

@media (max-width: 350px) {
  .statements--card-section {
    padding: 25px 25px 75px;
  }
}

.mb-0 {
  margin-bottom: 0px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mt-0 {
  margin-bottom: 0px;
}

.mt-5 {
  margin-bottom: 5px;
}

.mt-10 {
  margin-bottom: 10px;
}

.mt-15 {
  margin-bottom: 15px;
}

.mt-20 {
  margin-bottom: 20px;
}

.mt-25 {
  margin-bottom: 25px;
}

.pt-0 {
  padding-top: 0px;
}

.pt-5 {
  padding-top: 5px;
}

.pt-10 {
  padding-top: 10px;
}

.pt-15 {
  padding-top: 15px;
}

.pt-20 {
  padding-top: 20px;
}

.pt-25 {
  padding-top: 25px;
}

.pt-30 {
  padding-top: 30px;
}

.pt-35 {
  padding-top: 35px;
}

.pt-40 {
  padding-top: 40px;
}

.pt-45 {
  padding-top: 45px;
}

.pt-50 {
  padding-top: 50px;
}

.pt-55 {
  padding-top: 55px;
}

.pt-60 {
  padding-top: 60px;
}

.pt-65 {
  padding-top: 65px;
}

.pt-70 {
  padding-top: 70px;
}

.pt-75 {
  padding-top: 75px;
}

.pt-80 {
  padding-top: 80px;
}

.pt-85 {
  padding-top: 85px;
}

.pt-90 {
  padding-top: 90px;
}

.pt-95 {
  padding-top: 95px;
}

.pt-100 {
  padding-top: 100px;
}

.pt-105 {
  padding-top: 105px;
}

.pt-110 {
  padding-top: 110px;
}

.pt-115 {
  padding-top: 115px;
}

.pt-120 {
  padding-top: 120px;
}

.pb-0 {
  padding-bottom: 0px;
}

.pb-5 {
  padding-bottom: 5px;
}

.pb-10 {
  padding-bottom: 10px;
}

.pb-15 {
  padding-bottom: 15px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pb-25 {
  padding-bottom: 25px;
}

.pb-30 {
  padding-bottom: 30px;
}

.pb-35 {
  padding-bottom: 35px;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-45 {
  padding-bottom: 45px;
}

.pb-50 {
  padding-bottom: 50px;
}

.pb-55 {
  padding-bottom: 55px;
}

.pb-60 {
  padding-bottom: 60px;
}

.pb-65 {
  padding-bottom: 65px;
}

.pb-70 {
  padding-bottom: 70px;
}

.pb-75 {
  padding-bottom: 75px;
}

.pb-80 {
  padding-bottom: 80px;
}

.pb-85 {
  padding-bottom: 85px;
}

.pb-90 {
  padding-bottom: 90px;
}

.pb-95 {
  padding-bottom: 95px;
}

.pb-100 {
  padding-bottom: 100px;
}

.pb-105 {
  padding-bottom: 105px;
}

.pb-110 {
  padding-bottom: 110px;
}

.pb-115 {
  padding-bottom: 115px;
}

.pb-120 {
  padding-bottom: 120px;
}

.pl-0 {
  padding-left: 0px;
}

.pl-10 {
  padding-left: 10px;
}

.pl-15 {
  padding-left: 15px;
}

.pl-20 {
  padding-left: 20px;
}

.pl-25 {
  padding-left: 25px;
}

.pl-30 {
  padding-left: 30px;
}

.pr-0 {
  padding-right: 0px;
}

.pr-10 {
  padding-right: 10px;
}

.pr-15 {
  padding-right: 15px;
}

.pr-20 {
  padding-right: 20px;
}

.pr-25 {
  padding-right: 25px;
}

.pr-30 {
  padding-right: 30px;
}

@media (max-width:767px) {

  .pl-10,
  .pl-15,
  .pl-20,
  .pl-25,
  .pl-30,
  .pr-10,
  .pr-15,
  .pr-20,
  .pr-25,
  .pr-30 {
    padding: 0 15px;
  }

  .s-pb-30 {
    margin-bottom: 30px;
  }

  .s-pb-0 {
    margin-bottom: 0px;
  }

  .pb-120,
  .pb-120 {
    padding-bottom: 80px;
  }
}

.row.title-and-text-two-column .section--top-styledbox .section-title {
  margin-bottom: 0;
}

.desc.desc-bold {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  font-family: 'Myriad W08 Bold', Arial, sans-serif;
  word-wrap: break-word;
}
.intro-title{text-transform: uppercase;}
.card-body .card-title a{
color:  #23415a;
font-weight: 400;
font-size: 40px;
line-height: 1;
font-family: 'Myriad W08 Regular', Arial, sans-serif;
height: 100%;
word-wrap: break-word;
}