/* DESIGN GUILDLINES USED ON THE PAGE */
/* ##DESIGNS TO BE USED ON THE PAGE
--- 01 TYPOGRAPHY SYSTEM
    FONT SIZE SYSTEM (px)
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
    SPACING SYSTEM (px)
        2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

/* ************************************ */
/* HEADER */
/* ************************************ */

*:focus,
*:active {
  outline: none;
}

*:link,
*:visited {
  color: var(--slb-blue);
}

/* main {
  background-color: var(--slb-grey-3);
} */

.main {
  display: flex;
  flex-direction: column;
  background-position: center;
  background-size: cover;
  box-sizing: content-box;
  /*for positioning the image info */
  position: relative;
}

/*     FONT SIZE SYSTEM (px)
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 
       SPACING SYSTEM (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */

/* ////////////////////////////////////////////// */
/*HERO SECTION OF PAGE */
.hero--section {
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  box-sizing: content-box;
}

/* OPERATIONS */
.operations {
  background-color: #fff;
}

.operations__tab-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.operations__tab {
  font-size: 1.5rem;
  padding: 2rem;
  color: #868e96;
}

.btn--tabs {
  background-color: white;
  border: none;
}

.btn--tabs:hover,
.btn--tabs:focus,
.btn--tabs:active {
  outline: none;
}

.operations__tab--active {
  border-bottom: 3px solid #0014dc;
  background-color: #ffffff;
  color: #0014dc;
  border: none;
}

.operations__header {
  font-size: 2rem;
  font-weight: 500;
  align-self: center;
  padding-top: 2rem;
}

.about-section {
  padding: 1rem;
  /* padding: clamp(10px, 10vw + 1rem, 100px) clamp(0, 8vw, 9.6rem)
    clamp(0, 8vw, 6.4rem) clamp(0, 8vw, 6.4rem); */
}

.about {
  padding: 2rem 8rem;
  text-align: start;
  font-size: 3rem;
  background-color: var(--slb-grey-4);
  color: var(--slb-white);
  margin-bottom: 9.6rem;
  font-weight: 400;
}

.about--underline {
  display: inline-block;
  border-bottom: solid #0014dc 0.5rem;
}

.operations--img--1 {
  background-image: url("../img/designs/wireline.jpg");
  background-position: bottom;
  background-size: cover;
  box-sizing: border-box;
  /* width: 250px; */
  height: 85vh;
  overflow: hidden;
  object-fit: cover;
}

.operations--img--2 {
  background-image: url("../img/designs/oracle.jpg");
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  /* width: 250px; */
  height: 85vh;
  overflow: hidden;
  object-fit: cover;
}

.operations--img--3 {
  background-image: url("../img/designs/openhole.jpg");
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  /* width: 250px; */
  height: 85vh;
  overflow: hidden;
  object-fit: cover;
}

.operations--img--4 {
  background-image: url("../img/designs/casedhole.jpg");
  background-position: bottom;
  background-size: cover;
  box-sizing: border-box;
  /* width: 250px; */
  height: 85vh;
  overflow: hidden;
  object-fit: cover;
}

.operations__tab--3 {
  margin: 0;
}

.operations__content {
  display: none;
  font-size: 1.7rem;
  background-color: var(--slb-grey-1);
  flex-grow: 1;
}

.operations__content--active {
  display: grid;
  gap: 2rem;
}

.operation--info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.operation--info h6 {
  font-size: 5rem;
  font-weight: 400;
  color: #0014dc;
  margin-bottom: 2.4rem;
}

.operation--info p {
  font-size: 1.8rem;
  color: var(--slb-grey-5);
  margin-bottom: 4.8rem;
}

.operations__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 7rem;
  width: 7rem;
  border-radius: 50%;
}

.operations__icon svg {
  height: 2.75rem;
  width: 2.75rem;
}

.operations__content p {
  grid-column: 2;
}

/* ************************************ */
/* REFERENCE SECTION */
/* ************************************ */
/*     FONT SIZE SYSTEM (px)
        10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98 
       SPACING SYSTEM (px)
    2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128 */

.reference--section {
  padding-bottom: 12.8rem;
}

.main--title {
  margin-top: 12.8rem;
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 4.8rem;
  color: var(--slb-blue);
}

.welcome--user {
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 4.8rem;
  color: var(--slb-blue);
  padding: 4.8rem 9.9rem 0;
}

.reference-grid {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.reference--grid--col {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.reference {
  /* box-shadow: 9.8rem 2.4rem 4.8rem rgba(0, 0, 0, 0.1); */
  border-radius: 11px;
  overflow: hidden;
  transition: all 0.4s;
  color: #333;
}

.reference-content {
  border-top: #555;
  padding: 3.2rem 4.8rem 4.8rem 4.8rem;
}

.reference-tags {
  margin-bottom: 1.2rem;
  display: flex;
  gap: 0.5rem;
}

.reference-title {
  font-size: 2rem;
  /* color: #333; */
  font-weight: 400;
  margin-bottom: 1.2rem;
  letter-spacing: 0.2em;
}

.reference-link:link,
.reference-link:visited {
  text-decoration: none;
  font-weight: 600;
  font-size: 1.8rem;
  color: #333;
  transition: all 0.3s;
}

.reference-link:hover,
.reference-link:active {
  display: inline-block;
  justify-self: end;
  text-decoration: underline;
  font-weight: 600;
  font-size: 1.8rem;
  color: var(--slb-blue);
  transition: all 0.3s;
}

.reference:hover p,
.reference:focus p {
  color: var(--slb-blue);
}

.reference-img {
  width: 100%;
  grid-column: 1 / -1;
  fill: var(--slb-blue);
  z-index: -99999;
}

.reference-icon {
  display: block;
  width: 100%;
  height: 30%;
}

.reference--book-1 {
  background-image: linear-gradient(
    rgba(51, 51, 51, 0.4),
    rgba(51, 51, 51, 0.4)
  );
}

.reference--book-2,
.reference--book-3,
.reference--book-4 {
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.1),
    rgba(51, 51, 51, 0.2)
  );
}

.reference--book-1::after {
  content: "UNDER CONSTRUCTION";
  position: relative;
  top: -75%;
  right: -19%;

  text-transform: uppercase;
  font-size: 1.4rem;
  font-weight: 700;
  color: #333;
  background-color: #ffd43b;
  padding: 0.8rem 2rem;
  text-align: center;
  transform: rotate(45deg);
  z-index: 99999;
}

.reference:hover {
  transform: translateY(0);
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.08);
  background-color: var(--slb-white);
  border: none;
}

.reference--book-1:hover {
  transform: translateY(0);
  box-shadow: none;
  background-color: var(--slb-white);
  border: none;
}

/* MEASUREMENT */

.measurement--section {
  background-color: var(--slb-blue);
  padding: 4.8rem 9.9rem;
}

.idw--img {
  background-image: url("../img/measurement/idw_img.png");
  background-position: bottom;
  background-size: cover;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.cmtd--img {
  background-image: url("../img/measurement/cmtd_img.png");
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
  object-fit: cover;
}

.measurement--container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  color: var(--slb-white);
  padding: 9.6rem 9.9rem;
}

.measurement--container p {
  font-size: 1.5rem;
}

.measurement--container h2 {
  font-size: 3rem;
  letter-spacing: 0.3rem;
  font-weight: 400;
}

/* /////////////////////////////////////////////////////////// */
/* LOGGING EQUIPMENT HEAD */
.leh--section {
  background-color: var(--slb-grey-1);
  display: grid;
  padding: 12.6rem 9.9rem;
  grid-template-columns: repeat(2, 1fr);
}

.leh--img {
  justify-self: center;
  height: 250px;
  background-color: var(--slb-blue);
  grid-column: 1/-1;

  background-image: url("../img/leh_qt/leh_qt.png");
  background-position: center;
  background-size: cover;
  width: 100%;
}

.leh--heading {
  margin-bottom: 1.6rem;
  grid-column: 1/-1;
}
.leh--title {
  font-size: 1rem;
  margin-bottom: 1.6rem;
  color: var(--slb-blue);
}

.leh--heading h1 {
  font-size: 3.5rem;
  font-weight: 400;
}

.leh--info {
  display: flex;
  flex-direction: column;
  background-color: var(--slb-blue);
  height: 250px;
  grid-column: 1/-1;
  padding: 2rem 2rem;
  gap: 6.4rem;
}

.leh--info p {
  color: var(--slb-white);
}

.leh--description {
  font-size: 3rem;
  color: var(--slb-white);
}

.leh--info span a {
  color: var(--slb-white);
}

/*
.leh--img {
  background-image: url(../img/designs/oracle.jpg);
  background-position: center;
  background-size: cover;
  box-sizing: border-box;
  height: 100%;
  column-span: 1/-1;
}

.img--container {
  padding: 0;
}

.img--container {
}

.leh--info {
  padding-bottom: 4rem;
} */

/* ///////////////////////////////////////////////////////////// */
/* LEARN SECTION */
.gallery--section {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  box-sizing: content-box;
  margin-top: 9.6rem;
  padding: 1rem 9rem;
  background-color: var(--slb-white);
}

.gallery--title {
  font-size: 4rem;
  font-weight: 400;
  margin-bottom: 4.8rem;
  color: var(--slb-blue);
}

.bd-example {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

.photos--container {
  display: grid;
  gap: 1.6rem;
  /* padding: 1.6rem; */
}

.carousel-item {
  height: 500px;
}

.carousel-item img {
  filter: brightness(0.7); /* Darken the image on hover */
}

.view--all {
  margin-top: 1.2rem;
  display: flex;
  justify-self: center;
  align-self: center;
  padding-bottom: 9.6rem;
}

/* .view--all--text:link,
.view--all--text:visited {
  font-size: 1.5rem;
} */

/* RESOURCE SECTION */
.resources--section {
  /* background-image: linear-gradient(
      rgba(255, 255, 255, 0.5),
      rgba(255, 255, 255, 0.5)
    ),
    url(../img/designs/slb--abstract.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat; */
  /* background-color: var(--slb-grey-2); */
  /* padding-bottom: 18rem;
  padding-top: 12.6rem; */
  background-color: var(--slb-grey-1);
  padding: 12.6rem 9.9rem 18rem;
}

.resource--container {
  gap: 1.2rem;
}

.resource {
  display: flex;
  flex-direction: column;
  gap: 6.4rem;
  background-color: var(--slb-white);
  padding: 2rem 2rem;
  transition: all 0.4s;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Add box shadow */
}

.resrc--img {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  /* background-color: var(--slb-grey-2); */
}

.resource--heading {
  margin-top: 2rem;
}

.resource h4 {
  font-size: 2rem;
  font-weight: 400;
}

.resource:hover,
.resource:focus {
  background-color: var(--slb-blue);
  color: var(--slb-white);
}

.resource a {
  color: var(--slb-blue);
}

.resource:hover a,
.resource:focus a {
  color: var(--slb-white);
}

.resource--title {
  font-size: 1rem;
  color: var(--slb-grey-5);
}

/* FOOTER */
.footer {
  margin-top: 0;
}