/* styles.css */

/* 區塊背景與內邊距 */
.locations {
    /* padding: 60px 20px; */
    background: #fdf8e6;
}

/* 標題：左對齊、品牌金色 */
/* .locations h2 {
    color: #F2A700;
    font-size: 40px;
    font-weight: 700;
    text-align: left;
    margin-bottom: 60px;
} */
/* .locations h5 {
    font-size: 24px;
    font-weight: 500;
} */

/* .locations p {
    font-size: 18px;
} */

/* 每個據點獨立一行 */
.locations .row {
    margin-bottom: 6px;  /* 每列之間距 */
}

/* 最後一行不要底部間距 */
.locations .row:last-child {
    margin-bottom: 0;
}

/* 淡入動畫 */
.locations .row > .col-md-3 {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

/* 動畫延遲 */
.locations .row:nth-of-type(1) > .col-md-3 { animation-delay: 0.2s; }
.locations .row:nth-of-type(2) > .col-md-3 { animation-delay: 0.4s; }
.locations .row:nth-of-type(3) > .col-md-3 { animation-delay: 0.6s; }

/* 動畫關鍵影格 */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* 手機響應式 */
@media (max-width: 768px) {
    .locations h2 {
        margin-bottom: 40px;
    }
    .locations .row {
        margin-bottom: 40px;
    }
}

/* 說明文字 */
.contact-us .h2 {
    color: #F2A700;
    margin-bottom: 30px;
}
.contact-us .lead {
    line-height: 1.6;
}

/* Captcha 輸入群組 */
.captcha-group {
    display: flex;
}
.captcha-group .form-control {
    flex: 1;
}
.captcha-img {
    width: 100px;
    height: 38px;
    object-fit: cover;
    margin-left: 0.5rem;
}
.refresh-btn {
    margin-left: 0.5rem;
    padding: 0 0.5rem;
    border-color: rgba(242,167,0,0.2);
}

/* 送出按鈕：移到上方陰影凸起效果 */
.send-btn {
    background-color: #F2A700;
    border: none;
    color: #fff;
    transition: box-shadow 0.3s, transform 0.2s;
}
.send-btn:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transform: translateY(-2px);
}

/* ===== 整體區塊 ===== */
.contact-us {
    /* padding: 60px 20px; */
    background: #fdf8e6;
}

/* 標題 & 說明文字 */
.contact-us h2 {
    color: #ffffff;
    font-size: 40px;
}
/* .contact-us p {
    color: #5C6E91;
    line-height: 1.6;
} */

/* 表單欄位 */
.contact-us .form-control {
    border: #fdf8e6;
    background-color: #ffffff;
}

.contact-us .form-label {
    margin-bottom: 8px;
}
/* 訊息框：載入淡入 */
.message-box {
    opacity: 0;
    animation: fadeIn 0.6s ease forwards;
    animation-delay: 0.4s;
}

/* 淡入動畫 */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ===== 企業營運總部區塊 ===== */
/* ===== 企業營運總部區塊（等比例縮放） ===== */
.headquarters-section {
    background: linear-gradient(180deg, #015875 0%, #026a8d 50%, #004056 100%);
    padding: 3.13vw 1.04vw; /* 60px 20px / 1920px * 100 */
    margin: 0;
}

.headquarters-title {
    color: #ffffff;
    font-size: 3vw; /* 36px / 1920px * 100 = 1.88vw */
    font-weight: 600;
    /* text-align: center; */
    margin-bottom: 2.08vw; /* 40px / 1920px * 100 = 2.08vw */
    letter-spacing: 0.1vw; /* 2px / 1920px * 100 = 0.1vw */
}

.headquarters-card {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 1.04vw; /* 20px / 1920px * 100 = 1.04vw */
    padding: 0;
    margin: 0 auto;
    backdrop-filter: blur(0.52vw); /* 10px / 1920px * 100 = 0.52vw */
    box-shadow: -1.3vw 0 0 0 rgba(9, 129, 169, 0.6), 1.3vw 0 0 0 rgba(9, 129, 169, 0.6); /* -25px, 25px / 1920px * 100 = 1.3vw */
    margin-bottom: 2.6vw; /* 50px / 1920px * 100 = 2.6vw */
}

.headquarters-header {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.765) 30%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0.765) 70%, rgba(255, 255, 255, 0) 100%);
    padding: 0.52vw; /* 10px / 1920px * 100 = 0.52vw */
    text-align: center;
    font-size: 2.08vw; /* 40px / 1920px * 100 = 2.08vw */
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.08;
    letter-spacing: 0.05vw; /* 1px / 1920px * 100 = 0.05vw */
    color: #014f69;
    max-width: 41.67vw; /* 800px / 1920px * 100 = 41.67vw */
    margin: 0 auto;
    margin-bottom: 2.6vw; /* 50px / 1920px * 100 = 2.6vw */
}

.headquarters-content {
    padding: 0.78vw 1.56vw 1.82vw 1.56vw; /* 15px 30px 35px 30px / 1920px * 100 */
    background: linear-gradient(90deg, #003c50 0%, #015b79 100%);
}

.headquarters-row {
    display: flex;
    gap: 0.52vw; /* 10px / 1920px * 100 = 0.52vw */
    margin-bottom: 1.3vw; /* 25px / 1920px * 100 = 1.3vw */
    flex-wrap: wrap;
}

.headquarters-row:last-child {
    margin-bottom: 0;
}

.headquarters-item {
    flex: 1;
    min-width: 13.02vw; /* 250px / 1920px * 100 = 13.02vw */
}

.item-label {
    margin-bottom: 0.42vw; /* 8px / 1920px * 100 = 0.42vw */
    text-align: center;
    font-size: 1.82vw; /* 35px / 1920px * 100 = 1.82vw */
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: 0.05vw; /* 0.88px / 1920px * 100 = 0.05vw */
    color: #fff;
}

.item-value {
    color: #ffffff;
    background-color: #0981a9;
    padding: 0.42vw 0.63vw; /* 8px 12px / 1920px * 100 */
    border-radius: 0.21vw; /* 4px / 1920px * 100 = 0.21vw */
    height: 5.21vw; /* 100px / 1920px * 100 = 5.21vw */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.3vw; /* 25px / 1920px * 100 = 1.3vw */
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.23;
    letter-spacing: 0.05vw; /* 0.88px / 1920px * 100 = 0.05vw */
    text-align: center;
}

/* 英文版字體調整 */
html[lang="en"] .item-value {
    font-size: 1.2vw;
}

.item-eng {
    font-size: 0.68vw; /* 13px / 1920px * 100 = 0.68vw */
    color: rgba(255, 255, 255, 0.85);
    font-weight: 400;
}

/* 表單左右對齊 */
.contact-form-grid {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2vw;
}

html[lang="en"] .contact-form-grid > div {
    flex: 1;
}