/* =============================================
STORACAGE Contact Us Page CSS
============================================= */
.section-padding {
    padding:70px 0;
}

/* Page Hero 复用基础样式，扩展特色模块 */
.storacage-page-hero {
    position:relative;
    height:420px;
    display:flex;
    align-items:center;
    color:#fff;
}
.storacage-page-hero-bg {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}
.storacage-page-hero-bg img {
    width:100%;
    height:100%;
    object-fit:cover;
}
.storacage-page-hero-bg::after {
    content:"";
    width:100%;
    height:100%;
    background:rgba(0,30,75,0.48);
    position:absolute;
    top:0;
    left:0;
}
.storacage-page-hero-content h1 {
    font-size:38px;
    text-transform:uppercase;
    margin:0 0 4px;
}
.storacage-page-hero-content h2 {
    font-size:28px;
    text-transform:uppercase;
    font-weight:600;
    margin:0 0 16px;
}
.storacage-page-hero-content > p {
    max-width:420px;
    font-size:16px;
    line-height:1.7;
    margin-bottom:36px;
}

/* Hero 三大特性 */
.storacage-contact-hero-features {
    display:flex;
    gap:40px;
}
.storacage-feature-item {
    display:flex;
    align-items:center;
    gap:12px;
}
.storacage-feature-item i {
    font-size:26px;
}
.storacage-feature-item span {
    font-size:14px;
    line-height:1.5;
}

/* 表单+信息主体区域 */
.storacage-contact-grid {
    display:grid;
    grid-template-columns: 1fr 0.42fr;
    gap:45px;
}
.storacage-contact-form-block h3,
.storacage-contact-info-block h3 {
    font-size:20px;
    text-transform:uppercase;
    color:#002040;
    padding-bottom:10px;
    border-bottom:2px solid #0057CC;
    margin-bottom:16px;
    display:inline-block;
}
.form-desc {
    font-size:14px;
    color:#444;
    margin-bottom:24px;
}

/* 表单样式 */
.storacage-contact-form .form-row.two-col {
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:16px;
}
.storacage-contact-form .form-group {
    margin-bottom:16px;
}
.storacage-contact-form input,
.storacage-contact-form textarea {
    width:100%;
    padding:12px 14px;
    border:1px solid #d8dde6;
    font-size:14px;
    border-radius:2px;
    outline:none;
    transition: border-color 0.24s ease;
}
.storacage-contact-form input:focus,
.storacage-contact-form textarea:focus {
    border-color:#0057CC;
}
.storacage-contact-form textarea {
    resize:none;
}
.btn.btn-primary {
    background:#0057CC;
    color:#fff;
    border:none;
    padding:13px 26px;
    font-weight:500;
    cursor:pointer;
    transition:background 0.25s ease;
}
.btn.btn-primary:hover {
    background:#0046a6;
}

/* 右侧联系信息 */
.contact-info-list {
    margin:0 0 36px;
    padding:0;
    list-style:none;
}
.contact-info-list li {
    display:flex;
    gap:14px;
    margin-bottom:22px;
}
.contact-info-list li i {
    color:#0057CC;
    font-size:18px;
    margin-top:4px;
}
.contact-info-list strong {
    display:block;
    font-size:13px;
    text-transform:uppercase;
    color:#555;
    margin-bottom:4px;
}
.contact-info-list span {
    font-size:14px;
    line-height:1.6;
}

/* Follow us 社交图标 */
.storacage-follow-us h4 {
    font-size:16px;
    margin-bottom:12px;
}
.social-icons {
    display:flex;
    gap:12px;
}
.social-icons a {
    width:38px;
    height:38px;
    border:1px solid #d8dde6;
    display:grid;
    place-items:center;
    color:#222;
    transition:all 0.24s ease;
}
.social-icons a:hover {
    background:#0057CC;
    border-color:#0057CC;
    color:#fff;
}

/* 地图模块 */
.storacage-contact-map {
    width:100%;
    height:450px;
    overflow:hidden;
}
.map-container {
    position:relative;
    width:100%;
    height:100%;
}
.map-bg {
    width:100%;
    height:100%;
    object-fit:cover;
}
.map-marker {
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%, -50%);
    font-size:36px;
    color:#0057CC;
}

/* ===================== RESPONSIVE 自适应 ===================== */
@media(max-width:1024px) {
    .storacage-contact-grid {
        grid-template-columns:1fr;
    }
    .storacage-contact-hero-features {
        flex-wrap:wrap;
        gap:24px;
    }
}
@media(max-width:768px) {
    .storacage-page-hero {
        height:340px;
    }
    .storacage-page-hero-content h1 {
        font-size:30px;
    }
    .storacage-page-hero-content h2 {
        font-size:22px;
    }
    .storacage-contact-form .form-row.two-col {
        grid-template-columns:1fr;
    }
    .storacage-contact-hero-features {
        flex-direction:column;
        gap:16px;
    }
    .storacage-contact-map {
        height:260px;
    }
}