body {
  padding: 0;
  margin: 0;
  /* font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; */
  font-family: 'Segoe UI', sans-serif;
  width: 100%;
  height: 100%;
  position: relative;
}

a {
  color: inherit;
  text-decoration: none;
}

.container > .mainBackground {
  background-size: cover;
  width: 100%;
  height: 110vh;
}

.mobileBg {
  display: none;
  /* position: absolute; */
  inset: 0;
  background: url('/images/background/main_back2.jpg') center center / cover no-repeat;
  z-index: 0;
}

.mainVideo {
  display: block;
  /* position: absolute; */
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.text_area {
  height: 100%;
  background-color: rgba(0,0,0,0.3);
  color: white;
}

.text_container {
  display: grid;
  max-width: 1280px;
  margin: 0 auto;
  padding-top: 10rem;
  justify-content: right;
}

.top_text {
  font-size: 3rem;
  justify-self: right;
  text-shadow: 0 0 10px rgba(255, 188, 2, 0.486);
  margin-bottom: 2rem;
}

.sub_text {
  font-size: 3rem;
  justify-self: right;
  text-shadow: 0 0 10px rgba(255, 188, 2, 0.486);
}

.main_text {
  font-size: 10rem;
  justify-self: right;
  font-weight: 600;
  text-shadow: 0 0 20px rgba(255, 188, 2, 0.486);
}

.mainContents {
  width: 100%;
}

.center {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.center > h1{
  grid-column: 1/9;
  justify-self: center;
}

.center > h3{
  grid-column: 1/9;
  justify-self: center;
}

.center > .item{
  grid-column: span 2;
  margin: 1rem;
  border: 2px solid #ebebeb;
  border-radius: 1rem;
  justify-items: center;
  display: grid;
  grid-template-rows: 1fr 3rem;
  align-items: center;
  transition: background-color 1s;
}

.center > .item:hover {
  background-color: #FFF;
}

.center > .item > img{
  width: 100%;
  max-height: 12rem;
  border-bottom: 1px solid #ebebeb;
}

.center > .item > p{
  justify-self: center;
}

.card{
  grid-column: span 2;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  background: linear-gradient(145deg, #f5f5f5, #ebebeb);
  border: 1px solid #e0e0e0;
  color: #333;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
  justify-content: center;
  align-items: center;
}

.card:hover {
  background: linear-gradient(145deg, #e0f7ff, #d0f0ff);
}

.card > .cardName{
  grid-column: 2/4;
  padding-left: 1rem;
  text-align: center;
}

.cardName h1 {
  margin-top: 0;
}

.cardName p {
  margin: 0;
  overflow: hidden;
}

.card > i{
  font-size: 4rem;
  justify-self: center;
  align-self: center;
}

.card > .description{
  grid-column: 1/4;
  justify-self: center;
  align-self: center;
}

.productsBoard {
  background-color: #f0f0f0;
}

.center2 {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.center2 > h1 {
  grid-column: 1/7;
  justify-self: center;
}

.center2 > .item {
  grid-column: span 2;
  display: grid;
  grid-template-rows: 60% auto;
  margin: 1rem;
  border: 1px solid #bbbbbb;
}

.center2 > .item > img{
  width: 100%;
  max-height: 12rem;
}

.center2 > a > div{
  align-self: center;
}

.center2 > a > div > h2, p{
  margin-left: 1rem;
}

.center2 > a{
  background-color: #FFF;
  transition: background-color 1s;
}

.center2 > a:hover{
  background-color: #e0e0e0;
}

.partnersBoard {
  background-color: #f0f0f0;
}

.centerScrol{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 0 1rem 0;
}

.centerScrol > h1{
  justify-self: center;
  margin-bottom: 1rem;
}

.centerScrol > .slide_box {
  width: 100%;
  overflow: hidden;
  margin-top: 1rem;
}

.centerScrol > .slide_box > .slide_item{
  display: flex;
  transition: transform 0.5s ease;
}

.centerScrol > .slide_box > .slide_item > .slide{
  flex: 0 0 auto;
  width: 25%;
}

.slide img{
  width: 100%;
}

.noteBoard {
  padding-bottom: 1rem;
}

.centerNote {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  height: 100%;
}

.noteHeader{
  display: flex;
  justify-content: space-between;
}

.noteHeader > a{
  align-self: center;
}

.noteBody > .note{
  display: grid;
  grid-template-columns: 10% 60% 30%;
  border-bottom: 1px solid #bbbbbb;
}

.noteBody > .note > .noteNum{
  justify-self: center;
}

.noteBody > .note > .noteTitle{
  justify-self: left;
}

.noteBody > .note > .noteDate {
  justify-self: right;
}
.serviceForm{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}
.service_low{
  display: grid;
  grid-template-columns: 25% auto;
  /* border-radius: 1rem; */
  background-color: #F0F0F0;
  /* padding: 0.5rem; */
  align-items: center;
  height: 3rem;
  padding: 0 1rem;
}

.service_low input, .service_low select, .service_low textarea{
  border: none;
  background-color: transparent;
}

.notes{
  height: 100%;
}

.serv{
  height: 100%;
}

.tocol{
  grid-column: 1/3;
}

.submit_btn{
  height: 3.5rem;
  grid-column: 1/3;
  border: none;
}

.submit_btn:hover{
  cursor: pointer;
  background-color: #666;
  color: white;
}

@media(max-width: 768px){
  .center{grid-template-columns:1fr; max-width: 100%; width: 100%; margin: 0; display: grid;}
  .container > .mainBackground {
    /*background-image: url('/images/background/main_back2.jpg');*/
    background-image: url('/images/background/main_back2.jpg');
    background-size: 150vw;
    overflow: hidden;
    width: 100%;
    height: 40vh;
  }

  .mainVideo {
    display: none;
  }

  .mobileBg {
    display: block;
  }

  .text_area {
    background-color: rgba(0,0,0,0.3);
    color: white;
  }
  .text_container{
    padding-top: 12vh;
    justify-content: center;
  }
  .top_text {
    font-size: 2rem;
    justify-self: center;
    text-shadow: 0 0 10px rgba(255, 188, 2, 0.486);
    margin-bottom: 1rem;
  }
  .sub_text {
    font-size: 2rem;
    justify-self: center;
    text-shadow: 0 0 10px rgba(255, 188, 2, 0.486);
  }
  .main_text {
    font-size: 5rem;
    justify-self: center;
    font-weight: 600;
    text-shadow: 0 0 20px rgba(255, 188, 2, 0.486);
  }
  .card{
    grid-template-columns: 20% auto;
    grid-template-rows: auto;
    padding: 0.4rem;
    margin: 0.4rem;
    justify-content:unset;
    align-items: unset;
  }
  .card > i {
    grid-row: 1/3;
    justify-self: center;
  }
  .card > .cardName{
    padding-left: 0;
    display: grid;
    align-items: center;
  }
  .cardName h1{
    font-size: 1.5rem;
    margin: 0;
  }
  .cardName p{
    display: none;
  }
  .card > .description{
    margin: 0;
    grid-column: 2/3;
    justify-self: center;
  }
  .center > h1 {
    grid-column: 1/3;
  }
  .center > h3 {
    grid-column: 1/3;
  }
  .center > .item {
    grid-column: unset;
  }
  .productsBoard > .center{
    grid-template-columns: repeat(2, 1fr);
  }
  .center > .item > img{
    aspect-ratio: 1 / 1;
  }
  .center > .item > p {
    margin: 0;
  }
  .center2{
    grid-template-columns: 1fr;
  }
  .center2 > h1 {
    grid-column: unset;
  }
  .center2 > .item{
    grid-column: unset;
    grid-template-rows: unset;
    grid-template-columns: 40% auto;
  }
  .center2 > .item > img {
    max-height: none;
  }
  .center2 > a > div{
    align-self: unset;
  }
  .center2 > a > div > h2,p {
    margin: 1rem 0 0 1rem;
  }
  .centerScrol {
    display: grid;
  }
  .noteBody{
    padding: 0 1rem;
  }
  .noteHeader {
    padding: 0 1rem;
  }
  .centerNote {
    width: 90vw;
    grid-template-columns: 1fr;
  }
  .centerNote > :first-child{
    grid-row: 2/3;
  }
  .notes{
    width: 90vw;
    height: 100%;
  }
  .serviceForm{
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .tocol{
    grid-column: unset;
  }

  .submit_btn{
    height: 3.5rem;
    grid-column: unset;
    border: none;
  }
  .productsBoard{
    display: none;
  }
  .businessBoard{
    display: none;
  }
}