/* ===================================
   CONTACT PAGE - contact.css
   (loaded after style.css and scroll-hero.css)
   =================================== */
body.ct-body { background: #051c2c; color: #fff; overflow-x: hidden; }

.ct { padding: 130px 0 90px; position: relative; }

/* ----- big heading over the picture ----- */
.ct-hero { position: relative; max-width: 1100px; margin: 0 auto 0; padding: 0 20px; min-height: 560px; }
.ct-art {
    position: absolute;
    left: 50%; top: 0;
    width: min(640px, 80vw);
    aspect-ratio: 1;
    transform: translateX(-50%);
    background:
        radial-gradient(circle at 50% 55%, rgba(0, 169, 244, .55) 0%, rgba(34, 81, 255, .9) 55%, #2251ff 100%);
    overflow: hidden;
}
.ct-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-art::after {                                   /* glowing frame, like a neon square */
    content: ""; position: absolute; left: 28%; top: 30%; width: 44%; height: 40%;
    border: 3px solid #fff; box-shadow: 0 0 25px #00a9f4, inset 0 0 25px #00a9f4;
}
.ct-ball {
    position: absolute; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7cc8ff 0%, #00a9f4 35%, #2251ff 100%);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.ct-ball.b1 { width: 135px; height: 135px; left: calc(50% - 400px); top: 150px; }
.ct-ball.b2 { width: 100px; height: 100px; left: calc(50% + 190px); top: 200px; }

.ct-title {
    position: relative; z-index: 2;
    text-align: right;
    text-transform: uppercase;
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -1px;
    font-size: clamp(2.2rem, 6vw, 5rem);
    margin: 0;
    padding-top: 400px;
    color: #fff;
}
.ct-title .out { color: transparent; -webkit-text-stroke: 2px #fff; }   /* outlined words over the picture */

/* ----- blue card: details + form ----- */
.ct-card {
    position: relative; z-index: 3;
    max-width: 1000px;
    margin: -10px auto 0;
    background: #00a9f4;
    padding: 70px 56px;
}
.ct-card h2 { font-weight: 300; font-size: 1.9rem; margin-bottom: 18px; color: #fff; }
.ct-info p { margin: 0 0 6px; line-height: 1.5; }
.ct-info .lbl { display: block; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; margin: 34px 0 6px; color: #051c2c; }
.ct-info a { color: #fff; font-weight: 600; font-size: 1.1rem; text-decoration: none; }
.ct-info a:hover { color: #2251ff; }
.ct-info strong { color: #fff; }

@media (max-width: 991px) {
    .ct { padding-top: 110px; }
    .ct-hero { min-height: 480px; }
    .ct-title { padding-top: 300px; }
    .ct-ball { display: none; }
    .ct-card { padding: 40px 24px; margin-top: 20px; }
}