/* Everest Caravans — Contact page section (light theme)
   Every rule is prefixed with .ev-contact so theme styles can't leak in.
   The form block below restyles whatever forms.contactus_form outputs.
   Corner radius for everything lives in --ct-radius. */

.ev-contact {
    --ct-ink: #0E1330;
    --ct-brand: #283895;
    --ct-brand-dark: #1D2A72;
    --ct-gold: #D9AE55;
    --ct-text: #555A6E;
    --ct-line: #E3E5EE;
    --ct-field: #F3F4FA;
    --ct-bg: #F5F6FA;
    --ct-radius: 4px;
    /* Site typography: Space Grotesk for headings, Poppins for body.
       Space Grotesk loads in the layout head; Poppins comes from the page
       hero partial at the top of this page. */
    --ct-display: var(--ev-display);
    --ct-font: "Poppins", "Segoe UI", Roboto, Arial, sans-serif;

    display: block;
    margin: 0;
    padding: 110px 0;
    background: var(--ct-bg);
    font-family: var(--ct-font);
    color: var(--ct-text);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
.ev-contact *, .ev-contact *::before, .ev-contact *::after { box-sizing: border-box; }
.ev-contact h2, .ev-contact h3, .ev-contact p, .ev-contact ul, .ev-contact li {
    margin: 0; padding: 0;
    font-family: var(--ct-font);
    letter-spacing: normal;
    text-transform: none;
}
.ev-contact ul { list-style: none; }
.ev-contact a { text-decoration: none; }
.ev-contact img { max-width: none; border: 0; }
.ev-contact svg { display: block; flex: none; }

/* Same width and gutter as .ev-contact-forms__inner above, so the two
   sections share one left and right edge instead of being 10px apart. */
.ev-contact .ev-contact__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: start;
    gap: 48px;
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ---------- Left ---------- */
.ev-contact .ev-contact__media {
    position: relative;
    aspect-ratio: 12 / 10;
    overflow: hidden;
    border-radius: var(--ct-radius);
    background: #E6E8F2;
}
.ev-contact .ev-contact__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.ev-contact .ev-contact__subhead {
    margin: 40px 0 0;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--ct-line);
    font-family: var(--ct-display);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ct-ink);
}

/* Phone | Email — side by side with a hairline divider */
.ev-contact .ev-contact__details {
    display: flex;
    flex-direction: column;
    padding-top: 26px;
}
.ev-contact .ev-contact__details li { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    min-width: 0; 
    margin-left: 0;
    padding-left: 0;
    border-left: 1px solid var(--ct-line);
    margin-bottom: 30px;
}
.ev-contact .ev-contact__icon {
    display: grid;
    place-items: center;
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: var(--ct-radius);
    background: var(--ct-ink);
    color: var(--ct-gold);
}
.ev-contact .ev-contact__icon svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ev-contact .ev-contact__detail { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ev-contact .ev-contact__detail small { margin-bottom: 4px; font-size: 13.5px; color: var(--ct-text); }
.ev-contact .ev-contact__detail a {
    font-size: 20px;
    font-weight: 600;
    color: var(--ct-ink);
    overflow-wrap: anywhere;
    transition: color .2s ease;
}
.ev-contact .ev-contact__detail a:hover { color: var(--ct-brand); }

/* ---------- Right: card ---------- */
.ev-contact .ev-contact__card {
    padding: 20px;
    border: 1px solid var(--ct-line);
    border-radius: var(--ct-radius);
    background: #fff;
}
/* The embed ships width="600" height="450" as attributes, which do not
   shrink — below about 1100px that pushed the whole page sideways. */
.ev-contact .ev-contact__card iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    border: 0;
}
.ev-contact .ev-contact__eyebrow {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    font-family: var(--ct-display);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    color: var(--ct-brand);
}
.ev-contact .ev-contact__eyebrow::after { content: ""; width: 40px; height: 1px; background: var(--ct-line); }
.ev-contact .ev-contact__title {
    margin-bottom: 16px;
    font-family: var(--ct-display);
    font-size: clamp(32px, 3.2vw, 48px);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -.035em;
    color: var(--ct-ink);
}
.ev-contact .ev-contact__text {
    max-width: 52ch;
    margin-bottom: 34px;
    font-size: 16px;
    line-height: 1.7;
}

/* ---------- Form styling (applies to your included form) ---------- */
.ev-contact .ev-contact__form form { margin: 0; }

/* forms.contactus_form was written for the old two-column row, so it opens
   with <div class="col-lg-8">. Bootstrap makes that 66.666667% wide, which
   is why the form sits two-thirds across inside this card. Reset the outer
   wrapper only. */
.ev-contact .ev-contact__form > [class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    padding: 0;
}
/* Bootstrap 4 rows carry margin: 0 -15px, which would now hang the fields
   15px outside the card. Retuned to +/-9px so the pairs keep an 18px gutter
   between them while the outer edges sit flush with the card padding. */
.ev-contact .ev-contact__form .row {
    margin-left: -9px;
    margin-right: -9px;
}
.ev-contact .ev-contact__form .row > [class*="col-"] {
    padding-left: 9px;
    padding-right: 9px;
}
.ev-contact .ev-contact__form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ct-ink);
}
.ev-contact .ev-contact__form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
.ev-contact .ev-contact__form select,
.ev-contact .ev-contact__form textarea {
    width: 100%;
    min-height: 56px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ct-radius);
    background: var(--ct-field);
    font-family: var(--ct-font);
    font-size: 15.5px;
    color: var(--ct-ink);
    box-shadow: none;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease;
}
.ev-contact .ev-contact__form textarea { min-height: 150px; padding: 16px 18px; resize: vertical; }
.ev-contact .ev-contact__form ::placeholder { color: #7D8196; opacity: 1; }
.ev-contact .ev-contact__form input:focus,
.ev-contact .ev-contact__form select:focus,
.ev-contact .ev-contact__form textarea:focus {
    border-color: var(--ct-brand);
    background: #fff;
}
.ev-contact .ev-contact__form button[type="submit"],
.ev-contact .ev-contact__form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--ct-radius);
    background: var(--ct-brand);
    font-family: var(--ct-font);
    font-size: 15.5px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color .2s ease;
}
.ev-contact .ev-contact__form button[type="submit"]:hover,
.ev-contact .ev-contact__form input[type="submit"]:hover { background: var(--ct-ink); }
.ev-contact .ev-contact__form button[type="submit"]:focus-visible,
.ev-contact .ev-contact__form input[type="submit"]:focus-visible { outline: 2px solid var(--ct-brand); outline-offset: 3px; }
/* Laravel validation messages */
.ev-contact .ev-contact__form .invalid-feedback,
.ev-contact .ev-contact__form .text-danger,
.ev-contact .ev-contact__form .error { font-size: 13px; color: #C0392B; }
.ev-contact .ev-contact__form .is-invalid { border-color: #C0392B !important; }

/* ---------- Responsive ---------- */
/* Small laptops: left column is narrow, so stack phone + email instead of breaking the email */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .ev-contact .ev-contact__details { grid-template-columns: 1fr; }
    .ev-contact .ev-contact__details li + li { margin: 18px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--ct-line); }
}
@media (max-width: 991.98px) {
    .ev-contact { padding: 90px 0; }
    .ev-contact .ev-contact__inner { grid-template-columns: 1fr; padding: 0 30px; }
    .ev-contact .ev-contact__card { order: -1; }     /* form first on smaller screens */
}
@media (max-width: 575.98px) {
    .ev-contact { padding: 72px 0; }
    .ev-contact .ev-contact__inner { padding: 0 20px; gap: 40px; }
    .ev-contact .ev-contact__card { padding: 30px 22px; }
    .ev-contact .ev-contact__details { grid-template-columns: 1fr; }
    .ev-contact .ev-contact__details li + li { margin: 18px 0 0; padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--ct-line); }
}
@media (prefers-reduced-motion: reduce) {
    .ev-contact * { transition: none !important; }
}


















.ev-contact-form {
    background: #fff;
    padding: 0;
    border-radius: 10px;
}
.ev-contact-form form {
    background: #efeff2;
    padding: 40px;
    border-radius: 10px;
}

.ev-contact-form h3 {
    color: #082b58;
    font-size: 24px;
    margin-bottom: 24px;
}

.ev-contact-form .form-group {
    margin-bottom: 22px;
}

.ev-contact-form label {
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #092b57;
    margin-bottom: 10px;
}

.ev-contact-form .form-control {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cbd5e1;
    border-radius: var(--ct-radius, 4px);
    padding: 10px 12px;
    background: #fff;
    color: #183b66;
    box-sizing: border-box;
    font-size: 15px;
}

.ev-contact-form textarea.form-control {
    min-height: 108px;
    resize: vertical;
}

.ev-contact-form .form-control:focus {
    border-color: #283895;
    outline: none;
    box-shadow: 0 0 0 3px rgba(23, 93, 245, .1);
}

.ev-contact-submit {
    width: 75%;
    padding: 13px 20px;
    background: #283895;
    color: #fff;
    border: 0;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
}

.ev-contact-submit:hover {
    background: #0b1937;
}

/* ==========================================================
   Contact page — enquiry section.

   Row 1 is the heading; row 2 is the form beside a photo. The form's
   own styling lives under .ev-contact-form further up this file and is
   untouched here — this block only places it and builds the column
   next to it, so the two can change independently.
   ========================================================== */
.ev-contact-forms {
    --cf-ink: #0E1330;
    --cf-brand: #283895;
    --cf-gold: #D9AE55;
    --cf-text: #555A6E;
    --cf-line: #E3E5EE;
    --cf-radius: 4px;
    --cf-gap: 28px;
    --cf-display: var(--ev-display);

    position: relative;
    padding: 100px 0;
    /* The soft brand wash the Blog and Factory Visit sections open with */
    background:
        radial-gradient(ellipse 55% 45% at 50% 0%, rgba(40, 56, 149, .07), rgba(40, 56, 149, 0) 70%),
        #fff;
}
.ev-contact-forms *, .ev-contact-forms *::before, .ev-contact-forms *::after { box-sizing: border-box; }

.ev-contact-forms .ev-contact-forms__inner {
    width: 100%;
    max-width: 1290px;
    margin: 0 auto;
    padding: 0 30px;
}

/* ---------- Row 1: heading ---------- */
.ev-contact-forms .ev-contact-forms__head {
    max-width: 560px;
    margin-bottom: 48px;
}
.ev-contact-forms .ev-contact__eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--cf-brand);
}
.ev-contact-forms .ev-contact__eyebrow::before {
    content: "";
    width: 34px;
    height: 2px;
    background: var(--cf-gold);
}
.ev-contact-forms .ev-contact__title {
    margin: 0;
    font-family: var(--cf-display);
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--cf-ink);
}
.ev-contact-forms .ev-contact__text {
    margin: 16px 0 0;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    color: #000000;
}

/* ---------- Row 2: form | photo ----------
   align-items: stretch (the grid default) makes the photo column take
   the row height, which the form sets. */
.ev-contact-forms .ev-contact-forms__body {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);   /* even halves */
    gap: var(--cf-gap);
    align-items: stretch;
}
.ev-contact-forms .ev-contact-forms__media {
    position: relative;
    overflow: hidden;
    border-radius: var(--cf-radius);
    background: #F0F1F5;
}
/* Absolute so the picture fills the column without driving its height —
   the form stays the thing that decides how tall the row is. */
.ev-contact-forms .ev-contact-forms__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199.98px) {
    .ev-contact-forms { --cf-gap: 36px; }
}
@media (max-width: 991.98px) {
    /* Stacked, so there is no form height to match — the photo keeps a
       fixed ratio instead of stretching to nothing. */
    .ev-contact-forms { padding: 80px 0; }
    .ev-contact-forms .ev-contact-forms__body { grid-template-columns: minmax(0, 1fr); gap: 36px; }
    .ev-contact-forms .ev-contact-forms__media { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
    .ev-contact-forms { padding: 64px 0; }
    .ev-contact-forms .ev-contact-forms__inner { padding: 0 20px; }
    .ev-contact-forms .ev-contact-forms__head { margin-bottom: 36px; }
    .ev-contact-forms .ev-contact-forms__media { aspect-ratio: 4 / 3; }
}

/* ==========================================================
   Contact page — card treatment.

   The form sat directly on the page background while the map beside
   the details below had a bordered card, so the two halves of the page
   read as different designs. Both are cards now, on one radius and one
   border colour, with the photo matching.
   ========================================================== */
/* .ev-contact-forms .ev-contact-form {
    padding: 18px;
} */
.ev-contact-forms .ev-contact-forms__media {
    box-shadow: 0 18px 44px rgba(14, 19, 48, .07);
}

/* The details column becomes a card too, so it sits level with the map
   instead of floating as loose text beside it. */
.ev-contact .ev-contact__info {
    padding: 38px;
    
}
.ev-contact .ev-contact__card {
    padding: 0;               /* the map fills its card edge to edge */
    overflow: hidden;
}


@media (max-width: 600px) {
    .ev-contact-form form {
        padding: 20px;
    }
    .ev-contact-forms .ev-contact-form { padding: 20px 20px; }
    .ev-contact .ev-contact__info { padding: 20px 0px; }
    .ev-contact .ev-contact__detail a {
        font-size: 16px;
    }
}