html {
  overflow-x: hidden;
}

body {
  overflow-x: hidden;
}

.service-header {
  color: #ffffff;
 }

 .service-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: -20px;
  padding-top: 6rem;
  padding-bottom: 6rem;
 }

 .news-hero {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin-top: -20px;
  padding-top: 6rem;
  padding-bottom: 6rem;
 }

#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-dec2025.jpg");
   background-color: #cccccc;
   height: 50%;
   background-position: center;
   background-repeat: no-repeat;
   background-size: cover;
   position: relative;
   margin-top: -20px;
 }

  .hero-response {
   background-image: url("../images/AdobeStock_518290425.jpeg");
   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;
}

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

.hero-response h1{
  color: #fff;
}

.hero-response p{
  color: #fff;
}

.os-text {
  text-align: center;
  font-size: 1.7rem;
  padding: 45px;
}

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

.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-front-expertise {
  background-color: #bbb;
  background-image: url("/images/GettyImages-146923985.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}

.flip-box-front-24-7 {
  background-color: #bbb;
  background-image: url("/images/GettyImages-167630972-incident.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: 180%;
}

.flip-box-front-major {
  background-color: #bbb;
  background-image: url("/images/GettyImages-544673180.jpg");
  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;
}

#tools {
  background-color: #003478;
}

#solutions {
  background-color: #003478;
}

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

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

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

.dark-blue-well-service {
  background-color:#003478ca;
  text-align: center;
}

.dark-blue-well-news {
  background-color:#003478ca;
  text-align: center;
}

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

.object-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

.subpage-description {
  font-weight: 700;
}

.news-article {
  background-color: #f4f2f2;
}

.news-date {
  font-weight: 700;
  color: #19467c;
  padding: 0px 20px 10px 20px;
}

.news-title {
  font-weight: 500;
  color: #000000; 
  padding: 20px 20px 10px 20px;
  text-decoration: none;
}

.news-title a {
  font-weight: 500;
  color: #000000; 
  text-decoration: none;
}

.news-button {
  margin: 0px 20px 20px 20px;
}

.news-description {
  color: #000000;
  padding: 0px 20px 20px 20px;
  width: 100%;
  height: 200px;
  object-fit: contain;
}

.product-square {
  padding: 10px;
  margin: auto;
  display: block;
} 

.product-square button {
  width: 100%;
  border-radius: 0%;
  border-color: #ffffff;
  margin: auto;
  display: block;
} 

.SAIL-title {
  color: #19467c;
  text-align: left;
  font-size: 2.3rem;
}

.SAIL-subtitle {
  color: #000000;
  text-align: left;
  font-size: 1.6rem;
}

.story-link {
  color: #000000;
  text-decoration: none;
}

.v--bold {
  font-weight: bold;
}

.quick-links {
  color: #ffffff;
}

.quick-links li a{
  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-MOBILEdec2025.jpg);
    background-color: #003478;
    height: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: -20px;
    background-position: top;
  }

.hero-response {
    background-image: url("../images/AdobeStock_518290425.jpeg");
    background-color: #003478;
    height: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    margin-top: -20px;
    background-position: top;
  }

  .hero-text-response {
    margin-top: 50%;
    margin-bottom: 0%;
  }

  #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;
}
 }