@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

#container { display: flex; width: 100%; transition: all 0.5s ease; position: relative; overflow: hidden; }
#map { height: 562px; width: 100%; transition: all 0.5s ease; }
#map.showinfo { width:calc(100% - 430px); }
#office-details { right: 0; top: 0; width: 430px; height: 100%; background: #132437; padding: 45px; overflow-y: auto; transition: all 0.5s ease;
    z-index: 1111; position: absolute; transform: translateX(100%); color: #fff; font-family: "Poppins", serif;
}
#office-details.visible { transform: translateX(0); }
.close-btn { position: absolute; top: 10px; right: 15px; cursor: pointer; font-size: 18px; color: white; background-color: transparent; border: none; padding: 5px; }
.close-btn:hover { background-color:transparent; }
#office-content h3 { color:#fff; text-transform:uppercase; font-weight: 700; margin-top: 0; margin-bottom: 15px; font-size: 24px; line-height: 36px;}
#office-content h3 .last-word {font-weight: 400; color:#fff; text-transform:uppercase; margin-top: 0; margin-bottom: 15px; font-size: 24px; line-height: 36px;}
#office-content p { font-size:15px; line-height:22px; margin-bottom: 22px; margin-top: 0; font-weight: 400;}
#office-content p strong {color: #fff; font-weight: 700;}
#office-content p a { color:#fff; text-decoration:none; }
#office-content p .address-force-break{ white-space: pre-line; }
#office-content img { margin-top: 0; margin-bottom: 20px; width: 334px; height: 139px;}
#office-content .btn-group { display:flex; flex-direction:column; align-items: flex-start; gap:10px 0; }
#office-content .google-map-btn { position: relative; font-size:15px; line-height:22px; font-weight:400; color:#374151; background-color:#C89F9C; padding:8px 40px 8px 12px; text-transform:uppercase; text-decoration:none; }
#office-content .google-map-btn:after { position:absolute; right:12px; top:12px; content:''; width:16px; height:12px; transition: all 0.3s ease;
    background-image: url(../images/arrow_right_alt.svg); background-position: center center; background-repeat: no-repeat;
}
#office-content .btn-primary { position: relative; font-size:15px; line-height:22px; font-weight:400; color:#374151; background-color:#B0DDD4; padding:8px 40px 8px 12px; text-transform:uppercase; text-decoration:none; }
#office-content .btn-primary:after { position:absolute; right:12px; top:12px; content:''; width:16px; height:12px; transition: all 0.3s ease;
    background-image: url(../images/arrow_right_alt.svg); background-position: center center; background-repeat: no-repeat;
}
#office-content .google-map-btn:hover:after,
#office-content .btn-primary:hover:after { right:15px; }

@media (max-width:480px) {
    #office-details { width:100%; padding:35px 20px; }
}