@font-face {
  font-family: "Neuropol X";
  src: local("Neuropol X"), local("Neuropol X Regular"), url("/oapp-res/neuropol.woff") format("woff"), url("/oapp-res/neuropol.otf") format("otf");
  font-weight: normal;
  font-display: swap;
}
@font-face {
  font-family: "Ubuntu";
  src: local("Ubuntu"), local("Ubuntu"), url("/oapp-res/ubuntu.woff") format("woff");
  font-weight: 600;
  font-display: swap;
}

* {
  box-sizing: border-box;
  border: none;
  margin: 0px;
  padding: 0px;
}

.oapp-forms-secure { display: none; }

body {
  font-size: 16px;
  font-family: "Ubuntu";
  overflow-x: hidden;
}

.hBox {
  height: 100%;
  width: clamp(340px, 98%, 1200px);
  margin: 0 auto;
}

header { height: 9rem; }

header img {
  width: auto;
  float: left;
  height: 9rem;
}

header span {
  float: right;
  display: block;
  padding: 1rem 2rem;
  padding-top: .5rem;
  background: #037dba;
  color: #fff;
  line-height: 1.5rem;
  text-align: center;
  clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
}

@media all and (max-width: 710px) {
  header .hBox {
    margin: 0;
    width: 100%;
  }
  header span {
    position: relative;
    top: -2px;
    float: none;
    width: 100%;
    padding: .5rem 1rem;
    clip-path: none;
    -webkit-clip-path: none;
    font-size: .9rem;
  }
  header span br { display: none; }
  header img {
    width: auto;
    height: 7rem;
    float: none;
    margin: 10px auto;
  }
  header {
    text-align: center;
  }
}

section { margin: 2rem 0; padding: 1rem 0; }

.sect1 {
  background: #037dba;
  color: #fff;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: 0;
  max-height: 601px;
  font-size: clamp(.8rem, .5vw + 1rem, 2rem);
  margin-top: 2rem;
}

.sect1 div:first-of-type {
  aspect-ratio: 1;
  background-image: url('/oapp-res/tbg.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  max-height: 600px;
  -webkit-clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
  clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);
}

.sect1 div:last-of-type {
  text-align: center;
  padding: 2rem;
  line-height: 2rem;
}
.sect1 h1 { font-size: 1.2em; }
.sect1 h2 { font-size: 1em; margin-top: -.2rem; margin-bottom: .5rem; }
.sect1 div p span { display: inline-block; }
.sect1 div p strong { font-weight: normal; color: #ffa86e; }

@media all and (max-width: 840px) {
  .sect1 { grid-template-columns: 1fr; border: none; max-height: 1000px; }
  .sect1 div:first-of-type {
    aspect-ratio: 2.5;
    -webkit-clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
    clip-path: polygon(100% 0, 100% 85%, 50% 100%, 0 85%, 0 0);
  }
}

.p1, .p2, .p3, .p4 {
  display: inline-block;
  background: #333;
  width: 4rem;
  height: 4rem;
  padding: 1rem;
  margin: 3px;
  margin-right: 0;
  box-shadow: 0;
  transition: box-shadow .3s;
}

.p1 img, .p2 img, .p3 img, .p4 img {
  width: 2rem;
  height: 2rem;
}

.contactOpts a:first-child {border-top-left-radius: 1rem; border-bottom-left-radius: 1rem;}
.contactOpts a:last-child {border-top-right-radius: 1rem; border-bottom-right-radius: 1rem;}

.p1 { background: #e1ad01; }
.p2 { background: #25d366; }
.p3 { background: #ff7518; }
.p4 { background: #7600bc; }

.p1:hover { box-shadow: 0 0 4px 2px #e1ad0199, 0 0 6px 6px #e1ad0166, 0 0 10px 12px #e1ad0111; }
.p2:hover { box-shadow: 0 0 4px 2px #25d36699, 0 0 6px 6px #25d36666, 0 0 10px 12px #25d36611; }
.p3:hover { box-shadow: 0 0 4px 2px #ff751899, 0 0 6px 6px #ff751866, 0 0 10px 12px #ff751811; }
.p4:hover { box-shadow: 0 0 4px 2px #7600bc99, 0 0 6px 6px #7600bc66, 0 0 10px 12px #7600bc11; }


p { text-align: justify; padding: 1rem .5rem; }
h1, h2, h3 { font-family: "Neuropol X"; font-weight: normal; text-align: center; }
h2, h3 { margin: 1rem auto; }
.tCenter { text-align: center; }
.tBig { font-size: 1.25rem; line-height: 2rem; }


.sect2 h2 { margin: 0 2rem; }
@media all and (max-width: 470px) { .sect2 h2 { font-size: 1.25rem; } }
.sect2 .desc {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: stretch;
  gap: 2rem;
  margin: 3rem auto;
}

.sect2 .desc span h3 { margin-top: 0; }

.sect2 .desc div {
  width: clamp(350px, 40%, 500px);
  display: inline-block;
  padding: 2rem;
  padding-bottom: 300px;
  text-align: center;
  border-radius: 1rem;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.sect2 .desc div:nth-child(1) {
  margin-bottom: 2rem;
  background-color: #ededef;
  background-image: url('/oapp-res/desc1.webp');
}
.sect2 .desc div:nth-child(2) {
  margin-top: 2rem;
  background-color: #eaeaea;
  background-image: url('/oapp-res/desc2.webp');
}

.sect2 p strong { font-weight: normal; color: #037dba; }





@media all and (max-width: 870px) {
  .sect2 .desc { flex-direction: column; align-items: center;; justify-content: center;}
  .sect2 .desc div { width: clamp(350px, 90%, 500px); padding-bottom: 200px; }
  .sect2 .desc div:nth-child(2) { padding-bottom: 320px; }
}

.sect2 .contact, .tech {
  text-align: center;
  background: #ff751811;
  background-image: linear-gradient(78deg, #fff 0%, #eaeaea 50%, #f1f1f1 50%, #fff 100%);
  margin-top: 0;
  padding: 1rem;
  padding-top: .5rem;
}
.sect2 .contact a {
  display: block;
  width: 300px;
  height: 4rem;
  padding: 1rem;
  color: #000;
  font-size: 1rem;
  margin: .5rem auto;
  text-decoration: none;
  text-align: left;
  border-radius: .5rem;
}

.sect2 .contact a:hover { color: #fff; }

.sect2 .contact a img {
  width: 2rem;
  height: 2rem;
  margin: 0;
  margin-right: 2rem;
 }

 .sect2 .contact a span {
   position: relative;
   top: -.5rem;
 }

 .contactWrapper {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: center;
   gap: 2rem;
 }

 @media all and (max-width: 800px) {
   .sect2 .contact {
     background-image: linear-gradient(168deg, #fff 0%, #eaeaea 48%, #f1f1f1 48%, #fff 100%);
   }
   .contactWrapper { flex-direction: column; }
 }

 .contactWrapper div { width: 340px; }
 .contactWrapper div.contactMiddle { width: 40px; color: #666; }

 input, textarea {
   width: 300px;
   padding: .5rem;
   font-size: 1rem;
   margin: .5rem auto;
   border: none;
   outline: none;
   font-family: "Ubuntu";
   background-color: #fff0;
   color: #000;
   border-bottom: 2px solid #0388ca;
 }

 input { height: 2rem; }
 textarea {
   border-top: 1px solid #0388ca;
   border-bottom: 2px solid #0388ca;
   height: 6.5rem;
   resize: none;
   background-image: url('/oapp-res/p_mail.png');
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 40px 40px;
 }

 input:focus, textarea:focus { border-color: #ff7518; }

 input[type="submit"] { border: none; background: #9ad1fe; cursor: pointer; border-radius: .3rem;}
 input[type="submit"]:hover { background: #222; color: #fff; }

 .notification { display: none; padding: .5rem; font-size: 1.2rem; background: #ff7518; border-radius: .3rem; }
 .notification.success { display: inline-block; background: #25d366; }
 .notification.fail { display: inline-block; }

 a.p1long { background: linear-gradient(to right, #e1ad01 0, #e1ad01 4rem, #e1ad01cc 4rem, #e1ad01cc); }
 a.p2long { background: linear-gradient(to right, #25d366 0, #25d366 4rem, #25d366cc 4rem, #25d366cc); }
 a.p3long { background: linear-gradient(to right, #ff7518 0, #ff7518 4rem, #ff7518cc 4rem, #ff7518cc); }

 a.p1long:hover { box-shadow: 0 0 4px 2px #e1ad0199, 0 0 6px 6px #e1ad0166, 0 0 10px 12px #e1ad0111; }
 a.p2long:hover { box-shadow: 0 0 4px 2px #25d36699, 0 0 6px 6px #25d36666, 0 0 10px 12px #25d36611; }
 a.p3long:hover { box-shadow: 0 0 4px 2px #ff751899, 0 0 6px 6px #ff751866, 0 0 10px 12px #ff751811; }

.sect3 {
  background-image: url('/oapp-res/bg.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 200px 200px;
  background-attachment: fixed;
}

.service {
  margin: 0;
  padding: 1rem;
  border-bottom: 1px solid #ccc;
}

.service:last-of-type { border: none; }

.service h3 { text-align: left; margin: 0; margin-bottom: .5rem; }
.service p { padding: 0; }

.techWrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  gap: 2rem;
}

.techWrapper div {
  width: clamp(350px, 40%, 500px);
}
.techWrapper div img { width: 350px; height: 265px; }

@media all and (max-width: 900px) {
  .tech { background-image: linear-gradient(168deg, #fff 0%, #eaeaea 55%, #f1f1f1 55%, #fff 100%); }
  .techWrapper { flex-direction: column; }
}

.photos {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  flex-wrap: wrap;
}

.photo {
  position: relative;
  padding: 1rem;
  margin: 2rem;
  border: 1px solid #999;
  max-width: 350px;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  text-align: center;
  background: #fffc;
}

.photo::before {
  content: '';
  position: absolute;
  top: .3rem;
  width: 2rem;
  height: 3rem;
  background-image: url('/oapp-res/pin.webp');
  background-repeat: no-repeat;
  background-size: contain;
}

.photo img {
  width: 100%;
  height: auto;
  margin-bottom: .5rem;
  border: 1px solid #999;
}


.photo:nth-of-type(3n) { transform: rotate(4deg); }
.photo:nth-of-type(3n+1) { transform: rotate(-3deg); }
.photo:nth-of-type(3n+2) { transform: rotate(2deg); }

.photo:nth-of-type(3n)::before { transform: rotate(-4deg); left: .3rem; }
.photo:nth-of-type(3n+1)::before { transform: rotate(3deg); right: 1.3rem; }
.photo:nth-of-type(3n+2)::before { transform: rotate(-2deg); left: .3rem; }





.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 7px;
}

.galleryColumn img {
  margin-top: 14px;
  vertical-align: middle;
  width: 100%;
  height: auto;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
}

.galleryColumn {
  flex: 25%;
  max-width: 25%;
  padding: 0 7px;
}
@media all and (max-width: 800px) { .galleryColumn { flex: 50%;   max-width: 50%; }}
@media all and (max-width: 600px) { .galleryColumn { flex: 100%;   max-width: 100%; }}


.sect5 {
   background: #0388ca;
   color: #fff;
   margin-bottom: 0;
   text-align: center;
   padding-bottom: 100px;
   background-image: url('/oapp-res/gas_safe.webp');
   background-position: bottom 10px right 10px;
   background-repeat: no-repeat;
 }

.group {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-family: "Neuropol X";
  margin: 1rem;
  background: #fff1;
  padding: 1rem;
  width: 300px;
  border-radius: 1rem;
}

span.group { background: #0001; }

a.group span { color: #9acfea; }
span.group span { color: #e1ad01; }
a.group:hover { color: #000; background: #fff2; }
a.group:hover span { color: #333; }

.group img {
  height: 144px;
  margin: .5rem;
  border-radius: 1rem;
}

span.group img { border-radius: 0; }

footer {
  background: #035781;
  color: #fff;
  padding: 1rem;
  margin-top: 0;
}

footer .hBox {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
}

@media all and (max-width: 550px) { footer .hBox {
  flex-direction: column-reverse;
} }

 footer a {
   text-decoration: none;
   color: #9ad1fe;
   line-height: 2rem;
 }

 footer a:hover {
   color: #e1ad01;
 }