.elementor-254 .elementor-element.elementor-element-e842577{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}/* Start custom CSS for html, class: .elementor-element-e25c242 *//* ====================================================== */
/* COLOUR PALETTE                                          */
/* ====================================================== */

:root {
    --obsidian: #031A39;
    --twilight: #0A2647;
    --sapphire: #133B7A;
    --charcoal: #0D1B2A;

    /* MATCHING ABOUT PAGE */
    --heading-blue: #77B8FF;
    --subheading-blue: #1F7CFF;

    --light-blue: #E8F1FF;
    --text-soft: #9EB5D4;
    --panel-bg: rgba(10,38,71,0.65);
    --field-bg: rgba(3,26,57,0.35);
    --accent-glow: rgba(19,59,122,0.55);

    --header-green: #00FFAA;
}

/* ====================================================== */
/* GLOBAL + LAYOUT                                         */
/* ====================================================== */

html, body {
    margin: 0;
    padding: 0;
    background: var(--obsidian);
    font-family: system-ui, sans-serif;
    color: var(--light-blue);
    overflow-x: hidden;
}

section.full-bg {
    padding: 90px 25px;
}

.contact-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 60px;
}

.contact-left { flex: 1; }
.contact-right { flex: 1; display: flex; justify-content: center; align-items: center; }

/* ====================================================== */
/* TITLES — MATCHING ABOUT PAGE                           */
/* ====================================================== */

.contact-title {
    font-size: clamp(32px,4vw,48px);
    font-weight: 800;
    color: var(--heading-blue);
    text-shadow: 0 0 25px rgba(119,184,255,0.5);
}

.contact-intro {
    font-size: 20px;
    margin-bottom: 25px;
    color: var(--subheading-blue);
}

/* modal titles */
.modal-title,
.success-title {
    color: var(--heading-blue);
    font-weight: 800;
}

/* ====================================================== */
/* FORM + FIELDS                                           */
/* ====================================================== */

.contact-form {
    background: var(--panel-bg);
    padding: 32px;
    border-radius: 18px;
    border: 2px solid var(--sapphire);
    box-shadow: 0 0 40px var(--accent-glow);
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contact-form input,
.contact-form textarea,
.contact-form select {
    padding: 14px;
    background: var(--field-bg);
    border-radius: 10px;
    border: 2px solid var(--sapphire);
    color: var(--light-blue);
}

.contact-form textarea {
    height: 150px;
    resize: none;
}

/* ====================================================== */
/* SEND MESSAGE BUTTON                                     */
/* ====================================================== */

.contact-btn {
    padding: 14px;
    background: var(--sapphire);
    color: white;
    font-weight: 700;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    transition: 0.25s ease;
}

.contact-btn:hover {
    background: var(--header-green);
    color: black;
    box-shadow: 0 0 20px var(--header-green);
}

/* ====================================================== */
/* PHOTO + FRAME                                           */
/* ====================================================== */

.photo-glow {
    padding: 12px;
    border-radius: 18px;
    background: var(--accent-glow);
}

.contact-photo {
    width: 100%;
    max-width: 480px;
    border-radius: 16px;
}

/* ====================================================== */
/* SUCCESS MODAL ONLY (BOOKING MODAL REMOVED)              */
/* ====================================================== */

.success-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.success-box {
    background: var(--twilight);
    border: 2px solid var(--sapphire);
    padding: 30px 40px;
    border-radius: 15px;
    max-width: 400px;
    width: 100%;
}

/* ====================================================== */
/* SCROLL ANIMATION                                        */
/* ====================================================== */

.scroll-fade,
.scroll-slide,
.scroll-rise {
    opacity: 0;
    transform: translateY(25px);
    transition: all 0.9s ease;
}

.visible {
    opacity: 1;
    transform: none;
}

/* ====================================================== */
/* RESPONSIVE                                              */
/* ====================================================== */

@media (max-width:1024px){
    .contact-container { flex-direction:column; text-align:center; }
    .contact-right { order:-1; margin-bottom:25px; }
}/* End custom CSS */