@import url("https://fonts.googleapis.com/css?family=Noto+Serif+TC:700|Roboto:500&display=swap");
@font-face {
    font-family: Mbkaos;
    src: url(../FONT/Mbkaos.ttf);
}

.contactmain{
    background-color: #fff;
    
}

.contactmainhead{
    color: #000;
font-family: Mbkaos;
font-size: 64px;
font-style: normal;
font-weight: 300;
line-height: normal;
text-align: center;
}
.contactbox {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    gap: 10vw; 
    width: 80%;
    margin: auto;
    padding-bottom: 20px;
}
.reachtext{
color: #000 !important;
margin:0;
font-family: "Mbkaos";
font-size:1.90vw;
text-align:center;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.reachtext a{
    color :#000 !important;
}
.addresspara{
   color: #000;
margin:0;
font-family: "Mbkaos";
font-size:1.90vw;
text-align:center;
font-style: normal;
font-weight: 300;
line-height: normal;
} 


.reachheding{
color: #000;
margin:0;
font-family: "Mbkaos";
font-size: 1.25vw;
font-style: normal;
font-weight: 300;
line-height: normal;
}


.rec{
    width: 100%;
    background-color: #fff;
    height: 150px;
    margin: 10px;
    overflow: hidden;
border:1px solid;
   
}
.rechead{
    color: #000;
font-family: "Mbkaos";
font-size: 24px;
font-style: normal;
font-weight: 300;
line-height: normal;
}

.recico{
display:flex;
justify-content:center;
margin:2% 0;
}
    
.recico2{
transform: translate(-6%, -50%);
}


/* form  */

.contactform{
    border: 1px solid #000;
    margin: 10px ;
background-color:#0B74BC;
}
.contactfields {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
  }
  .textarea-container textarea {
    width: 100%;
    height: 100px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.contactfields, 
.textarea-container textarea {
    font-size: 16px;
    width: 100%;
    box-sizing: border-box; 
}

/* Placeholder styling */
.contactfields::placeholder,
.textarea-container textarea::placeholder {
    font-size: 18px; /* Increase the font size of the placeholder text */
    color: #888; /* Optional: Change placeholder color */
}


.contactbanner{
    background-image: url(..//images/Frame\ 35.png);
        width: 100%;
        padding: 25%;
        background-size: cover;
    }
    
    @media only screen and (max-width: 575px) {
    .contactbox {
    grid-template-columns: 1fr ; 
}
.contactbanner{
    background-image: url(..//images/contactmob.jpg) !important;

background-size:cover;

        width: 100%;
        padding: 66% 0;
}
.reachtext{
	font-size: 5.083vw;

margin:0;
}
.reachheding {
	    font-size: 4.25vw
}
.recico1 {
    transform: translate(-1%, 25%) !important;
}
.recico2{
     transform: translate(-6%, -20%);
}

.addresspara{
    font-size:5.00vw;
}
}