/* ===================================
OFFICE SECTION
=================================== */
.office-section{
padding:var(--space-11) 0;
background:#F9FAFB;
overflow:hidden;
}
/* ===================================
GRID
=================================== */
.office-grid{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-8);
margin-top:var(--space-4);
}
/* ===================================
CARD
=================================== */
.office-card{
background:#fff;
border:1px solid #E7EAF0;
border-radius:22px;
overflow:hidden;
transition:.35s ease;
box-shadow:0 10px 30px rgba(16,24,40,.06);
}
.office-card:hover{
transform:translateY(-6px);
box-shadow:0 20px 45px rgba(16,24,40,.10);
}
/* ===================================
MAP
=================================== */
.office-map{
overflow:hidden;
line-height:0;
}
.office-map iframe{
width:100%;
height:385px;
border:0;
display:block;
transition:.35s ease;
}
.office-card:hover .office-map iframe{
transform:scale(1.02);
}
/* ===================================
CONTENT
=================================== */
.office-content{
padding:var(--space-6);
}
/* ===================================
COUNTRY
=================================== */
.office-country{
display:flex;
align-items:center;
gap:16px;
margin-bottom:var(--space-5);
}
.office-country img{
height:35px;
object-fit:cover;
flex-shrink:0;
}
.office-country h4{
font-size:var(--fs-h5);
margin:0;
color:var(--color-primary);
font-weight:700;
}
/* ===================================
INFO
=================================== */
.office-info{
display:flex;
align-items:flex-start;
gap:16px;
margin-bottom:var(--space-5);
}
.office-icon{
width:18px;
height:18px;
flex-shrink:0;
background:none;
display:flex;
align-items:flex-start;
justify-content:center;
margin-top:3px;
}
.office-icon img{
width:18px;
height:18px;
opacity:.8;
}
.office-info p,
.office-info a{
margin:0;
font-size:var(--fs-body);
line-height:1.7;
color:var(--color-text);
text-decoration:none;
}
.office-info a:hover{
color:var(--color-highlight);
}
/* ===================================
BUTTON
=================================== */
.office-btn{
width:100%;
height:52px;
margin-top:var(--space-6);
display:flex;
align-items:center;
justify-content:center;
gap:12px;
background:var(--color-primary);
color:#fff;
border-radius:10px;
text-decoration:none;
font-size:15px;
font-weight:600;
transition:.35s;
}
.office-btn:hover{
background:var(--color-highlight);
}
.office-btn span{
width:auto;
height:auto;
background:none;
}
.office-btn span img{
width:18px;
filter:brightness(0) invert(1);
}
/* ===================================
LAPTOP
=================================== */
@media(max-width:1200px){
.office-grid{
gap:var(--space-6);
}
.office-map iframe{
height:240px;
}
}
/* ===================================
TABLET
=================================== */
@media(max-width:991px){
.office-section{
padding:var(--space-10) 0;
}
.office-grid{
grid-template-columns:1fr;
gap:var(--space-7);
}
.office-content{
padding:var(--space-6);
}
.office-map iframe{
height:260px;
}
}
/* ===================================
MOBILE
=================================== */
@media(max-width:767px){
.office-section{
padding:var(--space-9) 0;
}
.office-grid{
margin-top:var(--space-7);
gap:var(--space-6);
}
.office-map iframe{
height:220px;
}
.office-content{
padding:var(--space-5);
}
.office-country{
gap:12px;
margin-bottom:var(--space-5);
}
.office-country img{
width:38px;
height:38px;
}
.office-country h4{
font-size:var(--fs-h6);
}
.office-info{
gap:12px;
margin-bottom:var(--space-4);
}
.office-icon{
width:38px;
height:38px;
}
.office-icon img{
width:15px;
}
.office-btn{
width:100%;
justify-content:center;
margin-top:var(--space-5);
}
}