:root {
   --dark: #0c4039;
}

/* ========== ========== ========== ========== ========== */
/* MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN MAIN */
/* ========== ========== ========== ========== ========== */

.services__container {
   display: flex;
   flex-direction: column;
   padding-top: 80px;
}

.services__section {
   display: grid;
   grid-template-columns: 1fr minmax(400px, 600px) 15vw minmax(400px, 600px) 1fr;
   grid-template-rows: 100px auto;
   margin-bottom: 50px;
   width: 100%;
}

@media only screen and (max-width: 935px) {
   .services__section {
      display: flex;
      flex-direction: column;
      grid-template-columns: none;
      grid-template-rows: none;
      justify-content: center;
      justify-self: center;
      width: 100%;
   }
}

.service__heading {
   align-self: end;
   border-bottom: 3px solid black;
   font-size: calc(15px + 3vw);
   grid-row: 1 / 2;
   margin-bottom: calc(10px + 0.5vw);
   padding-left: 30px;
   text-transform: uppercase;
}

@media only screen and (max-width: 935px) {
   .service__heading {
      margin-right: 7px;
   }
}

.service__heading--left {
   grid-column: 2 / -1;
}

.service__heading--right {
   grid-column: 3 / -1;
}

.service__text-container {
   font-size: calc(7px + 1vw);
   grid-row: 2 / -1;
   line-height: 130%;
   padding: 15px 30px;
   position: relative;
}

.service__text-container--left {
   grid-column: 2 / 4;
}

.service__text-container--right {
   grid-column: 3 / 5;
}

.service__image {
   background-position: center;
   background-size: cover;
   grid-row: 2 / -1;
}

.service__image--right {
   grid-column: 4 / -1;
}

.service__image--left {
   grid-column: 1 / 3;
}

.services__service-list > li {
   list-style: disc;
   list-style-position: inside;
   margin-left: 25px;
}

.service__color-div {
   grid-row: 2 / -1;
}

.service__color-div--left {
   grid-column: 0 / 1;
}

.service__color-div--dark {
   background-color: var(--dark);
}

@media only screen and (max-width: 935px) {
   .service__heading,
   .service__heading--left,
   .service__heading--right,
   .service__text-container,
   .service__text-container--left,
   .service__text-container--right,
   .service__color-div,
   .service__color-div--left,
   .service__color-div--dark {
      grid-column: none;
      grid-row: none;
   }
}

@media only screen and (max-width: 935px) {
   .service__color-div,
   .service__color-div--left,
   .service__color-div--dark {
      display: none;
   }
}

/* ========== ========== ========== ========== ========== */
/* HEADING HEADING HEADING HEADING HEADING HEADING HEADING */
/* ========== ========== ========== ========== ========== */

.services__heading--wrapper {
   align-self: center;
   border-bottom: 3px solid black;
   margin-bottom: 100px;
   padding-bottom: 18px;
   width: 80%;
}

@media only screen and (max-width: 935px) {
   .services__heading--wrapper {
      margin-bottom: 40px;
      width: 90%;
   }
}

.services__heading {
   font-size: calc(15px + 3vw);
   margin-bottom: 15px;
   text-transform: uppercase;
}

.services__paragraph {
   font-size: calc(7px + 1vw);
}

/* ========== ========== ========== ========== ========== */
/* DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN DESIGN */
/* ========== ========== ========== ========== ========== */

.service__text-container--design {
   background-color: var(--dark);
   color: #ffffff;
}

.service__image--design {
   background-image: url('/pages/services/assets/design.png');
}

/* ========== ========== ========== ========== ========== */
/* DEVELOPMENT DEVELOPMENT DEVELOPMENT DEVELOPMENT DEVELOPMENT*/
/* ========== ========== ========== ========== ========== */

.service__image--development {
   background-image: url('/pages/services/assets/developemnt.png');
}

/* ========== ========== ========== ========== ========== */
/* ENGINEERING ENGINEERING ENGINEERING ENGINEERING ENGINEERING */
/* ========== ========== ========== ========== ========== */

.service__text-container--engineering {
   background-color: var(--dark);
   color: #ffffff;
}

.service__image--engineering {
   background-image: url('/pages/services/assets/engineering.png');
}

/* ========== ========== ========== ========== ========== */
/* MANUFACTURING MANUFACTURING MANUFACTURING MANUFACTURING */
/* ========== ========== ========== ========== ========== */

.service__image--manufacturing {
   background-image: url('/pages/services/assets/manufacturing.png');
}

/* ========== ========== ========== ========== ========== */
/* QUALITY MANAGEMENT QUALITY MANAGEMENT QUALITY MANAGEMENT */
/* ========== ========== ========== ========== ========== */

.service__text-container--quality_management {
   background-color: var(--dark);
   color: #ffffff;
}

.service__image--quality_management {
   background-image: url('/pages/services/assets/quality_management.webp');
}

/* ========== ========== ========== ========== ========== */
/* SUPPLY CHAIN SUPPLY CHAIN SUPPLY CHAIN SUPPLY CHAIN SUPPLY CHAIN*/
/* ========== ========== ========== ========== ========== */

.service__image--supply-chain {
   background-image: url('/pages/services/assets/supply_chain.png');
}