@charset "UTF-8";
@font-face {
  font-family: "Roobert";
  src: url("./font/Raleway-4.101/variable/TTF/Raleway-VF.ttf")
      format("truetype"),
    url("./font/Raleway-4.101/static/WOFF/Raleway-Regular.woff") format("woff");
}

/* Example: Adjust styles for devices smaller than 768px */




@media (min-width: 769px) {
   .AboutUsArea{
    display: flex;
    width: 100%;
    height: 1300px;
    justify-content: center;
    align-items: flex-start;
    background-color: black;
    padding-top: 50px;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsArea{
    display: flex;
    width: 100%;
    height: 1500px;
    justify-content: center;
    align-items: top;
     background-color: black;
    padding-top: 50px;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsArea{
    display: flex;
    width: 100%;
    height: auto;
    justify-content: center;
    align-items: top;
    background-color: black;
    padding-top: 50px;
     box-sizing: border-box;
}
}

@media (min-width: 769px) {
   .AboutUsAreaContent{
     display: flex;
     width: 90%;
     height: auto;
     flex-direction: column; 
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContent{
    display: flex;
    width: 90%;
    height: auto;
    flex-direction: column; 
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContent{
     display: flex;
     width: 100%;
     height: auto;
     flex-direction: column; 
      box-sizing: border-box;
}
}


@media (min-width: 769px) {
   .AboutUsAreaContentBox{
     display: flex;
     width: 100%;
     height: auto;
     margin-top: 30px;
     flex-direction: column;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContentBox{
     display: flex;
     width: 100%;
     height: auto;
     margin-top: 30px;
     flex-direction: column;
      box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContentBox{
     display: flex;
     width: 100%;
     height: auto;
     margin-top: 30px;
    flex-direction: column;
      box-sizing: border-box;
}
}


/* @media (min-width: 769px) {
   .AboutUsAreaContentBox-img{
     display: flex;
     width: 50%;
     height: auto;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContentBox-img{
    display: flex;
     width: 50%;
     height: auto;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContentBox-img{
     display: flex;
     width: 50%;
     height: auto;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
} */
@media (min-width: 769px) {
   .AboutUsAreaContentBox-TxBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContentBox-TxBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    margin: 0;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContentBox-TxBox{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
     box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .AboutUsTopContent{
    position:relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-left: 30px;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsTopContent{
    position:relative;
    display: flex;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding-left: 30px;
}
}

@media (max-width: 375px) {
    .AboutUsTopContent{
   position:relative;
    display: flex;
    width: 100%;
    height: auto;
     box-sizing: border-box;
     padding-left: 30px;
}
}
@media (min-width: 769px) {
.AboutUsTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 30px;
  left: 0;
  box-sizing: border-box;
}
}
@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 36px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 30px;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
}
}

@media (max-width: 375px) {
   .AboutUsTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 36px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 30px;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .AboutUsTopContentTX{
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    color:white;
    font-size: 60px;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsTopContentTX{
    display: flex;
     width: 100%;
    height: auto;
    margin: 0;
    color:white;
    font-size: 60px;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsTopContentTX{
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    color:white;
    font-size: 60px;
     box-sizing: border-box;
}
}


@media (min-width: 769px) {
   .AboutUsAreaContentBox-title{
    display: flex;
    width: 100%;
    height: auto;
    font-size: 50px;
    color:white;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContentBox-title{
    display: flex;
     width: 100%;
    height: auto;
    font-size: 50px;
    color:white;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContentBox-title{
    display: flex;
    width: 100%;
    height: auto;
    font-size: 50px;
    color:white;
     box-sizing: border-box;
}
}




@media (min-width: 769px) {
   .AboutUsAreaContentBox-Tx{
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 20px;
    color:white;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .AboutUsAreaContentBox-Tx{
    display: flex;
     width: 100%;
    height: auto;
    margin: 0;
    font-size: 20px;
    color:white;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .AboutUsAreaContentBox-Tx{
    display: flex;
    width: 100%;
    height: auto;
    margin: 0;
    font-size: 20px;
    color:white;
     box-sizing: border-box;
}
}



@media (min-width: 769px) {
   .ServiceTopContent{
     width: 100%;
     height: 150px;
     color: white;
     box-sizing: border-box;
     
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceTopContent{
     width: 100%;
     height: auto;
     color: white;
     box-sizing: border-box;
     
}
}

@media (max-width: 375px) {
    .ServiceTopContent{
     width: 100%;
     height: auto;
     color: white;
     box-sizing: border-box;


}
}

@media (min-width: 769px) {
   .ServiceTopContentTX{
    position: relative;
    padding-left: 30px;
    font-size: 50px;
    color: white;
    box-sizing: border-box;

}
}

@media (min-width: 376px) and (max-width: 768px) {
    .ServiceTopContentTX{
      position: relative;
      padding-left: 30px;
    font-size: 50px;
    color: white;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
   .ServiceTopContentTX{
    position: relative;
     padding-left: 30px;
    font-size: 50px;
    color: white;
     box-sizing: border-box;
}
}
@media (min-width: 769px) {
.ServiceTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 18px 0 18px 28px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 20px;
  left: 0;
  box-sizing: border-box;
}
}
@media (min-width: 376px) and (max-width: 768px) {
.ServiceTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 36px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 20px;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
}
}

@media (max-width: 375px) {
.ServiceTopContentTX:before {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 36px;
  border-color: transparent transparent transparent #fff;
  position: absolute;
  top: 20px;
  left: 0;
  pointer-events: none;
  box-sizing: border-box;
}
}

@media (min-width: 769px) {
.CoreValueContent{
  display:flex;
  width: 100%;
  height: 1000px;
  flex-direction: column;
   background-color: black;
    justify-content: center;
  align-items: center;
}
}
@media (min-width: 376px) and (max-width: 768px) {
.CoreValueContent{
  display:flex;
  width: 100%;
  height: 800px;
  flex-direction: column;
  background-color: black;
  justify-content: center;
  align-items: space-between;
}
}

@media (max-width: 375px) {
.CoreValueContent{
  display:flex;
  width: 100%;
  height: 800px;
   flex-direction: column;
  background-color: black;
   justify-content: top;
  align-items: space-between;
}
}


@media (min-width: 769px) {
.CoreValueContentBox1{
  display:flex;
  width: 100%;
  height: auto;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
}
@media (min-width: 376px) and (max-width: 768px) {
.CoreValueContentBox1{
  display:flex;
  width: 100%;
  height: auto;
  margin-top: 50px;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
}

@media (max-width: 375px) {
.CoreValueContentBox1{
  display:flex;
  width: 100%;
  height: auto;
  margin-top: 50px;
   justify-content: center;
  align-items: center;
  margin-bottom: 50px;
}
}

@media (min-width: 769px) {
.CoreValueContentBox2{
  display:flex;
  width: 70%;
  height: auto;
  justify-content: center;
  align-items: space-between;
}
}
@media (min-width: 376px) and (max-width: 768px) {
.CoreValueContentBox2{
  display:flex;
    width: 100%;
  height: 300px;
   justify-content: center;
   flex-direction: column;
  align-items: space-between;
}
}

@media (max-width: 375px) {
.CoreValueContentBox2{
  display:flex;
    width: 100%;
  height: 300px;
   justify-content: center;
   flex-direction: column;
  align-items: space-between;
}
}
@media (min-width: 769px) {
.CoreVlaueTopTX{
  display:flex;
  width: 70%;
  height: 50px;
  margin: 0%;
  justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #fff;
}
}
@media (min-width: 376px) and (max-width: 768px) {
.CoreVlaueTopTX{
  display:flex;
    width: 70%;
   height: 50px;
  margin: 0;
   justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #fff;
}
}

@media (max-width: 375px) {
.CoreVlaueTopTX{
  display:flex;
    width: 70%;
   height: 50px;
  margin: 0;
   justify-content: center;
  align-items: center;
  font-size: 50px;
  color: #fff;
}
}


@media (min-width: 769px) {
.CoreValueContentBox-Tx{
  display:flex;
  width: 300px;
  justify-content: center;
   align-items: center;
  color: #fff;
   font-size: 26px;
  margin: 0;

}
}
@media (min-width: 376px) and (max-width: 768px) {
.CoreValueContentBox-Tx{
  display:flex;
  width: 100%;
  justify-content: center;
   align-items: center;
   color: #fff;
    font-size: 26px;
   margin: 0;

}
}

@media (max-width: 375px) {
.CoreValueContentBox-Tx{
  display:flex;
  width: 100%;
  justify-content: center;
   align-items: top;
   color: #fff;
    font-size: 26px;
   margin: 0;

}
}
@media (min-width: 769px) {
   .ServiceArea{
    display: flex;
    width: 100%;
    height: 1800px;
    justify-content: center;
    align-items: top;
    background-color: black;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceArea{
    display: flex;
    width: 100%;
    height: 1500px;
    justify-content: center;
    align-items: top;
    box-sizing: border-box;
    background-color: black;
}
}

@media (max-width: 375px) {
    .ServiceArea{
    display: flex;
    width: 100%;
    height: 800px;
    justify-content: center;
    align-items: top;
    box-sizing: border-box;
    background-color: black;
}
}
@media (min-width: 769px) {
   .ServiceAreaContent{
     display: flex;
     width: 90%;
     height: auto;
     flex-direction: column; 
     justify-content: top;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContent{
    display: flex;
    width: 70%;
    height: auto;
    flex-direction: column; 
    justify-content: top;
    box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContent{
     display: flex;
     width: 100%;
     height: auto;
     flex-direction: column; 
     justify-content: top;
     box-sizing: border-box;
    }
}
@media (min-width: 769px) {
   .ServiceAreaContent-fromBox{
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
     align-items: top;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContent-fromBox{
    display: flex;
    width: 70%;
    height: auto;
    justify-content: center;
    flex-direction: column; 
    align-items: top;
    box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContent-fromBox{
     display: flex;
     width: 100%;
     height: auto;
     justify-content: center;
     flex-direction: column; 
     align-items: top;
     box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .ServiceAreaContentBox{
     display: flex;
     width: 100%;
     height: 300px;
     font-size: 20px;
     background-color: black;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContentBox{
     display: flex;
     width: 100%;
     height: auto;
     font-size: 20px;
       background-color: black;
        box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContentBox{
     display: flex;
     width: 100%;
     height: auto;
     font-size: 20px;
     background-color: black;
      box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .ServiceAreaContentBox-img{
     display: flex;
     width: 50%;
     height: 300px;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContentBox-img{
    display: flex;
     width: 50%;
     height: 300px;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContentBox-img{
     display: flex;
     width: 50%;
     height: 300px;
     justify-content: center;
     align-items: center;
     object-fit: cover; 
     border-radius: 20px;
      box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .ServiceAreaContentBox-TxBox{
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: 200px;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContentBox-TxBox{
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: 200px;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContentBox-TxBox{
    display: flex;
    flex-direction: column; 
    width: 100%;
    height: 200px;
     box-sizing: border-box;
}
}
@media (min-width: 769px) {
   .ServiceAreaContentBox-title{
     display: flex;
    font-size: 50px;
    width: 100%;
      height: auto;
    color: white;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContentBox-title{
     display: flex;
     font-size: 20px;
     width: 100%;
      height: auto;
     align-items: top;
     color: white;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContentBox-title{
     display: flex;
     font-size: 20px;
     width: 100%;
      height: auto;
     align-items: top;
     color: white;
      box-sizing: border-box;
}
}

@media (min-width: 769px) {
   .ServiceAreaContentBox-Tx{
     display: flex;
     width: 100%;
     height: auto;
     align-items: top;
     color: rgb(167, 167, 167);
     font-size: 18px;
     margin: 0;
     box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContentBox-Tx{
     display: flex;
     width: 100%;
     height: auto;
     align-items: center;
     color: rgb(167, 167, 167);
     margin: 0;
     font-size: 18px;
      box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContentBox-Tx{
     display: flex;
     width: 100%;
     height: auto;
     align-items: center;
     color: rgb(167, 167, 167);
     margin: 0;
     font-size: 18px;
      box-sizing: border-box;
}
}


@media (min-width: 769px) {
   .ServiceAreaContent{
     display: flex;
     width: 70%;
     height: auto;
     flex-direction: column; 
     justify-content: center;
     align-items: center;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .ServiceAreaContent{
    display: flex;
    width: 70%;
    height: auto;
    flex-direction: column; 
    justify-content: center;
    align-items: center;
     box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .ServiceAreaContent{
     display: flex;
     width: 100%;
     height: auto;
     flex-direction: column; 
     justify-content: center;
     align-items: center;
      box-sizing: border-box;
}
}

@media (min-width: 769px) {
   .apace-white{
     display: flex;
     width: 100%;
     height: 50px;
      box-sizing: border-box;
}
}

@media (min-width: 376px) and (max-width: 768px) {
   .apace-white{
     display: flex;
     width: 100%;
     height: 50px;
      box-sizing: border-box;
}
}

@media (max-width: 375px) {
    .apace-white{
     display: flex;
     width: 100%;
     height: 50px;
      box-sizing: border-box;
}
}