.elementor-28246 .elementor-element.elementor-element-a7de86d{--display:flex;--background-transition:0.3s;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-28246 .elementor-element.elementor-element-08ffe18{width:100%;max-width:100%;}body.elementor-page-28246:not(.elementor-motion-effects-element-type-background), body.elementor-page-28246 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F9FAFB;}/* Start custom CSS for html, class: .elementor-element-08ffe18 */*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Inter,sans-serif;
}

body{
background:#f5f7fb;
}

.contact-section{

padding:90px 7%;
position:relative;

}

@media (max-width: 767px) {
  /* Mengubah padding section khusus di mobile */
  .contact-section {
    padding: 30px 5% !important; /* 30px atas-bawah, 5% kiri-kanan agar teks tidak terlalu mepet ke pinggir layar */
  }
}

.contact-section::before{

content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:360px;

background:#8C5A3C;

border-radius:0 0 120px 120px;

z-index:-1;

}

.contact-header{

display:flex;
justify-content:space-between;
align-items:flex-start;
margin-bottom:45px;
gap:60px;

}

.contact-header .left{

width:60%;

}

.contact-header .right{

width:35%;

}

.contact-header h1{

color:#fff;

font-size:52px;

line-height:1.1;

font-weight:700;

}

.contact-header p{

color:rgba(255,255,255,.75);

font-size:16px;

line-height:30px;

margin-top:18px;

}

.contact-card{

display:flex;

background:#fff;

border-radius:18px;

overflow:hidden;
padding: 0px;

box-shadow:0 15px 45px rgba(0,0,0,.08);

}

.contact-info{

width:33%;

padding:40px;

background:#fbfbfd;

border-right:1px solid #ececec;

}

@media (max-width: 767px) {
  /* Mengubah padding contact-info khusus mobile */
  .contact-info {
    padding: 28px !important;
  }
}

.contact-info h3{

font-size:24px;

margin-bottom:15px;

}

.contact-info p{

color:#777;

line-height:28px;

margin-bottom:35px;

}

.info-item{

display:flex;

align-items:center;

gap:18px;

margin-bottom:25px;

}

.icon{

width:30px;

height:30px;

border-radius:8px;

background:#8C5A3C;

display:flex;

align-items:center;

justify-content:center;

color:#fff;

font-size:20px;

}

.info-item span{

display:block;

font-size:13px;

color:#888;

margin-bottom:4px;

}

.info-item strong{

font-size:15px;

font-weight:600;

}

.social{

margin-top:40px;

display:flex;

align-items:center;

gap:12px;

}

.social span{

font-size:14px;

color:#666;

}

.social a{

text-decoration:none;

color:#5d5df6;

font-size:20px;

}

.contact-form{

width:67%;

padding:40px;

}

.grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:25px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group label{

font-size:14px;

margin-bottom:10px;

font-weight:600;

}

.form-group input,

.form-group textarea{

border:none;

border-bottom:1px solid #ddd;

padding:10px 0;

font-size:15px;

outline:none;

background:none;

transition:.3s;

}

.form-group input:focus,

.form-group textarea:focus{

border-color:#8C5A3C;

}

.full{

margin-top:25px;

}

button{

margin-top:35px;

width:100%;

height:55px;

border:none;

background:linear-gradient(90deg,#8C5A3C,#4B2E2B);

color:#fff;

font-size:16px;

border-radius:35px;

cursor:pointer;

transition:.35s;

}

button:hover{

transform:translateY(-3px);

box-shadow:0 15px 35px rgba(93,93,246,.3);

}

.map{

margin-top:50px;

border-radius:22px;

overflow:hidden;

box-shadow:0 15px 35px rgba(0,0,0,.08);

}

.map iframe{

width:100%;

height:420px;

border:none;

display:block;

}

@media(max-width:991px){

.contact-header{

flex-direction:column;

}

.contact-header .left,
.contact-header .right{

width:100%;

}

.contact-card{

flex-direction:column;

}

.contact-info,
.contact-form{

width:100%;

}

.grid{

grid-template-columns:1fr;

}

.contact-header h1{

font-size:38px;

}

@media (max-width: 767px) {
  .elementor-28246 .elementor-element.elementor-element-08ffe18 .contact-header .left h1 {
    font-size: 24px;
    line-height: 1.3;
  }
}

@media (max-width: 767px) {
  /* Mengecilkan subheadline (teks Hubungi kami hari ini...) */
  .contact-header .right p {
    font-size: 14px !important;  /* Ubah 14px sesuai ukuran yang Anda inginkan */
    line-height: 1.4 !important; /* Mengatur jarak antar baris */
  }
}

@media (max-width: 767px) {
  /* Merapatkan kontainer header di mobile */
  .contact-header {
    gap: 15px !important; /* Mengurangi jarak antara wadah headline & subheadline */
    margin-bottom: 25px !important; /* Jarak ke kartu di bawahnya */
  }

  /* Merapatkan jarak margin teks subheadline */
  .contact-header p {
    margin-top: 0 !important;
  }
}

@media (max-width: 767px) {
  /* Mengecilkan ukuran teks email khusus mobile */
  .contact-card a, 
  .contact-card strong {
    font-size: 12px !important; /* Ubah ke 12px/13px/14px sesuai keinginan */
    word-break: break-word;     /* Mencegah teks email terpotong/keluar dari kartu */
  }
}

}/* End custom CSS */