html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

#bootstrap-overrides-primary-button {
  --bs-btn-color: #fff;
  --bs-btn-bg: #003478;
  --bs-btn-border-color: #003478;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #003478;
  --bs-btn-hover-border-color: #003478;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #003478;
  --bs-btn-active-border-color: #003478;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #00345F;
  --bs-btn-disabled-border-color: #003478;
}

#bootstrap-overrides-primary-button-light {
  --bs-btn-color: #003478;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #003478;
  --bs-btn-hover-color:#003478;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #003478;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #003478;
  --bs-btn-active-border-color: #003478;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #003478;
  --bs-btn-disabled-border-color: #003478;
}

#bootstrap-overrides-primary-button-a {
  color: #fff;
  background-color: #003478;
}

#bootstrap-overrides-primary-button-a:hover {
  color: #fff;
  background-color: #003478;
}

 .hero {
   background-image: url("../images/metOcean-vs1-scenario-with-logos.png");
   background-color: #cccccc;
   height: 50%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   margin-top: -20px;
 }

 .hero-text {
  margin-top: 13%;
  margin-bottom: 13%;
 }

.hero h1{
  color: #fff;
}

.hero p{
  color: #fff;
}

.sector-cards-h2 {
  text-align: center;
  font-size: 2.7rem;
  padding: 45px;
}

.sector-cards-p {
  text-align: center;
  color: #fff;
}

#sector-card {
  background-color: #a4a4a4;
}

.flip-box {
  background-color: transparent;
  width: 300px;
  height: 400px;
  perspective: 1000px;
}

.flip-box-text {
  text-align: left;
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box-front, .flip-box-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box1 {
  background-color: transparent;
  width: 300px;
  height: 400px;
  perspective: 1000px;
}

.flip-box1:hover .flip-box-inner1 {
  transform: rotateX(180deg);
}

.flip-box-inner1 {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}

.flip-box-back-energy {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-front {
  background-color: #bbb;
}

.flip-box-front-government {
  background-color: #bbb;
  background-image: url("/images/government.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}
.flip-box-front-energy {
  background-color: #bbb;
  background-image: url("/images/energy.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}
.flip-box-front-rec-tour {
  background-color: #bbb;
  background-image: url("/images/beach.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}
.flip-box-front-response {
  background-color: #bbb;
  background-image: url("/images/response.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}
.flip-box-front-env-serv {
  background-color: #bbb;
  background-image: url("/images/flooding.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}

.flip-box-back-energy {
  background-color: #003478;
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108%;
}

.flip-box-back-energy {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back-government {
  background-color: #003478;
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108%;
}

.flip-box-back-government {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back-response {
  background-color: #003478;
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108%;
}

.flip-box-back-response {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back-env-services {
  background-color: #003478;
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108%;
}

.flip-box-back-env-services {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back-rec-tourism {
  background-color: #003478;
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 108%;
}

.flip-box-back-rec-tourism
 {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-box-back {
  background-image: url("/images/energy-box-back.png");
  transform: rotateX(180deg);
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

#flip-header {
  margin-top: 135px !important;
}

#technologies {
  background-color: #003478;
}

.gray-well {
  background-color: #e5e5e5;
}

.dark-well {
  background-color: #282828;
  color: #ffffff;
}

.dark-blue-well {
  background-color:#537aae;
}

.tt-blue-well {
  background-color: #003478;
  color: #ffffff;
}

@media (max-width: 768px) { 
  .om-logo {
    width: 200px;
  }

  .hero-text {
    margin-top: 50%;
    margin-bottom: 0%;
  }
  .hero {
    background-image: url(../images/metOcean-vs1-scenario-with-logos-mobile.png);
    background-color: #003478;
    height: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: -20px;
    background-position: top;
  }
  #bootstrap-overrides-primary-button {
    --bs-btn-color: #fff;
    --bs-btn-bg: #537aae;
    --bs-btn-border-color: #537aae;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #537aae;
    --bs-btn-hover-border-color: #537aae;
    --bs-btn-focus-shadow-rgb: 49,132,253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #537aae;
    --bs-btn-active-border-color: #537aae;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #537aae;
    --bs-btn-disabled-border-color: #537aae;
}
 }