/* ---------- Global ---------- */
*{box-sizing:border-box;margin:0;padding:0;font-family:'Poppins',sans-serif}
body,html{height:100%;display:flex;flex-direction:column;}
.page-wrapper{flex:1;display:flex;flex-direction:column;transition:0.3s}

/* Header */
header{background:linear-gradient(90deg,#3b82f6,#ff9800);color:#fff;padding:15px 25px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:1000}
header h1{font-size:1.35rem}
nav ul{display:flex;list-style:none}
nav li{margin-left:20px}
nav a{color:#fff;text-decoration:none;font-weight:500;transition:.2s}
nav a:hover{opacity:.85}
nav a.active{border-bottom:2px solid #ffeb3b;color:#ffeb3b;font-weight:600}
.menu-toggle{display:none;flex-direction:column;justify-content:space-between;width:26px;height:20px;cursor:pointer}
.menu-toggle span{height:3px;background:#fff;border-radius:3px;display:block}
.close-btn{position:absolute;top:18px;right:18px;font-size:26px;color:#fff;cursor:pointer;display:none}
@media(max-width:768px){
        .menu-toggle{display:flex;order:2}
        .close-btn{display:block}
        header h1{order:1}
        nav ul{position:fixed;top:0;right:-280px;height:100%;width:280px;flex-direction:column;background:linear-gradient(90deg,#4C2C96,#4634A7);padding-top:80px;list-style:none;transition:right .25s;z-index:1200}
        nav ul.active{right:0}
        nav ul li{margin:20px 0;text-align:center}
        nav li{margin-left:0}
}
.logo-img {max-height:80px;max-width:200px;width:auto;height:auto;display:block}

/* Hero */
.hero{padding:100px 18px;text-align:center;color:#fff;background:linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0.4)),url('../images/bj-contact-img.jpg') no-repeat center center;background-size:cover;min-height:50vh;display:flex;flex-direction:column;justify-content:center;transition:0.3s}
.hero h2{font-size:1.9rem;margin-bottom:18px;animation:fadeInDown 1s ease forwards}
.hero p{max-width:700px;margin:0 auto;font-size:1rem;color:#f0f0f0;animation:fadeInUp 1s ease forwards}
@media(max-width:768px){.hero{padding:70px 18px} .hero h2{font-size:1.5rem}}
@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}

/* Contact Section */
.contact-section{padding:80px 20px;display:flex;justify-content:center;background:#f5f5f5}
.contact-wrapper{display:flex;gap:40px;width:100%;max-width:1200px;flex-wrap:wrap;transition:0.3s}
.contact-form{flex:1 1 400px;background:#fff;padding:30px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:0.3s}
.contact-form h2{margin-bottom:20px;font-size:1.8rem}
.contact-form label{display:block;margin-top:10px;font-weight:500}
.contact-form input, .contact-form textarea{width:100%;padding:10px;margin-top:5px;border-radius:6px;border:1px solid #ccc;transition:0.3s}
.contact-form input:focus, .contact-form textarea:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 5px rgba(59,130,246,0.5)}
.contact-form button{margin-top:15px;padding:12px 20px;background:#3b82f6;color:#fff;border:none;border-radius:6px;font-weight:600;cursor:pointer;transition:0.3s}
.contact-form button:hover{background:#2563eb;transform:scale(1.02)}

/* Info + Map */
.info-map-wrapper{flex:1 1 500px;display:flex;flex-direction:column;gap:25px;transition:0.3s}
.contact-info{display:flex;flex-wrap:wrap;gap:20px;justify-content:center}
.contact-info div{flex:1 1 150px;text-align:center;background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:0.3s}
.contact-info div:hover{transform:translateY(-5px);box-shadow:0 6px 20px rgba(0,0,0,0.2)}
.contact-info i{font-size:1.5rem;color:#3b82f6;margin-bottom:8px}
.map-container{min-height:300px;border-radius:10px;overflow:hidden;box-shadow:0 4px 15px rgba(0,0,0,0.1);transition:0.3s}

/* Footer */
footer{text-align:center;background:#0f1724;color:#9ca3af;padding:20px 10px;display:flex;justify-content:center;align-items:center;gap:12px}
.fb-link{color:#3b82f6;font-weight:600;text-decoration:none}
.fb-link:hover{color:#60a5fa}

/* Scroll Up Button */
#scrollUp{display:none;position:fixed;bottom:40px;right:20px;z-index:1000;background:#3b82f6;color:#fff;border:none;border-radius:50%;width:45px;height:45px;font-size:22px;cursor:pointer;box-shadow:0 3px 6px rgba(0,0,0,0.2);transition:0.3s}
#scrollUp:hover{background:#2563eb}

@media(max-width:992px){.contact-wrapper{flex-direction:column;gap:30px} .info-map-wrapper{flex-direction:column}}

/* Modal Styles */
.modal{display:none;position:fixed;z-index:1;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,0.4);padding-top:60px}
.modal-content{background-color:#fefefe;margin:5% auto;padding:25px;border:1px solid #ddd;width:80%;max-width:500px;text-align:center;overflow:hidden;white-space:pre-wrap;border-radius:12px;box-shadow:0 10px 20px rgba(0,0,0,0.15);transition:all 0.3s ease}
.close{color:#aaa;font-size:28px;font-weight:bold;position:absolute;top:0;right:10px}
.close:hover,.close:focus{color:black;text-decoration:none;cursor:pointer}

/* Make Cloudflare Turnstile captcha responsive on mobile */
@media (max-width: 768px) {
    .contact-form .cf-turnstile {
        transform: scale(0.85); /* scale down for mobile */
        transform-origin: top left;
        width: 100%;
        height: auto;
    }
}

.success-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 30px; /* increase spacing below the tick */
}

.success-icon svg {
    width: 100%;
    height: 100%;
}

.success-icon .circle {
    stroke: #28a745; /* green */
    stroke-width: 4;
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: drawCircle 0.6s ease-out forwards;
}

.success-icon .check {
    stroke: #000; /* black tick */
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: drawCheck 0.35s ease-out forwards;
    animation-delay: 0.6s;
}

@keyframes drawCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes drawCheck {
    to { stroke-dashoffset: 0; }
}