#get-in {
   position: relative;

    width: 100%;
    min-height: 0;

    padding-top: 55px;
    padding-bottom: 30px !important;

    overflow: hidden;
    background-color: #f7faf4;
}


/* ============================================================
   BACKGROUND BOTANICAL ART
   ============================================================ */

#get-in::before {
    content: "";

    position: relative;

    left: -80px;
    top: -10px;

    width: 500px;
    height: 400px;
      background-image: url("https://plantparadise.lemontechnepal.com/wp-content/uploads/2026/09/contact-back.png");


    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.075;

    pointer-events: none;
}


/* ============================================================
   MAIN CARD
   ============================================================ */
.get-in-body {
    position: relative;
    z-index: 5;

    width: 1120px;
    height: 516px;

    margin: 0 auto;
    padding: 0;

    /* WHITE BASE */
    background-color: #fff;

    /* DECORATIVE IMAGE */
    background-image: url("https://plantparadise.lemontechnepal.com/wp-content/uploads/2026/09/get-in-back.png");
    background-repeat: no-repeat;

    /* LEFT SIDE */
    background-position: center center;

    /* IMAGE SIZE */
    background-size: 520px auto;

    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.045);
}


.get-in-layout {

    display: grid;

    grid-template-columns: 666px 354px;

    width: 1020px;

    height: 516px;

    margin: 0;

    padding: 0;
}


/* ============================================================
   FORM SIDE
   ============================================================ */

.get-in-form-body {

    width: 666px;

    height: 516px;

    box-sizing: border-box;

    padding:

        95px   /* top */
        0
        0
        80px;  /* left */
}


/* ============================================================
   CONTACT SIDE
   ============================================================ */

.get-in-contact-body {

    width: 354px;

    height: 516px;

    box-sizing: border-box;

    padding:

        95px   /* top */
        0
        0
        80px;
}


/* ============================================================
   HEADINGS
   ============================================================ */

.get-in-title {

    margin: 0;

    padding: 0;

    color: #111;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 35px;

    font-weight: 700;

    line-height: 36px;

    letter-spacing: -0.6px;
}


/* ============================================================
   FORM WIDTH
   ============================================================ */

.get-in-form-wrapper {

    width: 376px;

    margin-top: 31px;
}


/* ============================================================
   CF7
   ============================================================ */

.get-in-form-wrapper .wpcf7 {

    width: 376px;

    margin: 0;
}


.get-in-form-wrapper form {

    width: 376px;

    margin: 0;

    padding: 0;
}


/* Remove CF7 default spacing */

.get-in-form-wrapper form p {

    margin: 0;

    padding: 0;
}


.get-in-form-wrapper br {

    display: none;
}


/* ============================================================
   FORM
   ============================================================ */

.get-in-form {

    width: 396px;

    margin: 0;

    padding: 0;
}


/* ============================================================
   NAME + PHONE
   ============================================================ */

.get-in-input-row {

    display: flex;

    width: 396px;

    height: 36px;

    gap: 20px;

    margin: 0 0 15px;
}


.get-in-input.get-in-name,
.get-in-input.get-in-phone {

    width: 178px;

    height: 36px;

    flex: 0 0 178px;
}


/* ============================================================
   ALL INPUTS
   ============================================================ */

.get-in-form input[type="text"],
.get-in-form input[type="tel"],
.get-in-form input[type="email"] {

    display: block;

    width: 100%;

    height: 36px;

    margin: 0;

    padding: 0 18px;

    box-sizing: border-box;

    border: 0;

    border-radius: 0;

    outline: none;

    background: #eff3eb;

    color: #555;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 36px;

    box-shadow: none;
}


/* ============================================================
   EMAIL
   ============================================================ */

.get-in-email {

    width: 376px;

    height: 36px;

    margin: 0 0 15px;
}


/* ============================================================
   MESSAGE
   ============================================================ */

.get-in-message {

    width: 376px;

    height: 78px;

    margin: 0;
}


.get-in-form textarea {

    display: block;

    width: 376px;

    height: 78px;

    min-height: 78px;

    margin: 0;

    padding: 11px 18px;

    box-sizing: border-box;

    border: 0;

    border-radius: 0;

    outline: none;

    resize: none;

    background: #eff3eb;

    color: #555;

    font-family: inherit;

    font-size: 16px;

    font-weight: 400;

    line-height: 20px;
}


/* ============================================================
   PLACEHOLDER
   ============================================================ */

.get-in-form input::placeholder,
.get-in-form textarea::placeholder {

    color: #858585;

    opacity: 1;

    font-size: 16px;

    font-weight: 400;
}


/* ============================================================
   FOCUS
   ============================================================ */

.get-in-form input:focus,
.get-in-form textarea:focus {

    border: 0;

    outline: none;

    background: #edf3e9;

    box-shadow: none;
}


/* ============================================================
   SUBMIT
   ============================================================ */

.get-in-submit {

    margin-top: 34px;

    width: 132px;

    height: 49px;
}


/* CF7 button */

.get-in-submit input[type="submit"] {

    display: block;

    width: 132px;

    height: 49px;

    margin: 0;

    padding: 0;

    border: 0;

    border-radius: 0;

    background: #5b8e32;

    color: #fff;

    font-family: inherit;

    font-size: 16px;

    font-weight: 600;

    line-height: 49px;

    text-align: center;

    cursor: pointer;

    box-shadow: none;

    transition:
        background 0.2s ease;
}


.get-in-submit input[type="submit"]:hover {

    background: #507e2c;
}


/* ============================================================
   CONTACT COLUMN
   ============================================================ */

.get-in-contact-body > .get-in-title {

    margin-bottom: 34px;
}


/* ============================================================
   CONTACT ITEM
   ============================================================ */

.get-in-contact-item {

    display: flex;

    align-items: flex-start;

    width: 306px;

    min-height: 48px;

    margin: 0;
}


.get-in-contact-item + .get-in-contact-item {

    margin-top: 25px;
}


/* ============================================================
   ICON
   ============================================================ */

.get-in-contact-item > img {

    display: block;

    width: 48px;

    height: 48px;

    flex: 0 0 48px;

    margin: 0 18px 0 0;

    padding: 0;

    object-fit: contain;

    border: 0;

    border-radius: 50%;
}


/* ============================================================
   CONTACT TEXT
   ============================================================ */

.get-in-contact-content {

    width: 240px;

    padding: 0;

    margin: 0;
}


/* ============================================================
   CONTACT HEADING
   ============================================================ */

.get-in-contact-heading {

    margin: -1px 0 8px;

    padding: 0;

    color: #171717;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 18px;

    font-weight: 700;

    line-height: 20px;
}


/* ============================================================
   CONTACT VALUE
   ============================================================ */

.get-in-contact-value {

    margin: 0 0 1px;

    padding: 0;

    color: #202020;

    font-size: 16px;

    font-weight: 400;

    line-height: 19px;
}


/* ============================================================
   LOCATION
   ============================================================ */

.get-in-contact-value.location {

    max-width: 225px;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1100px) {

    .get-in-body {

        width: calc(100% - 40px);

        max-width: 1020px;
    }

    .get-in-layout {

        width: 100%;

        grid-template-columns:
            minmax(0, 2fr)
            minmax(300px, 1fr);
    }

    .get-in-form-body {

        width: 100%;
    }

    .get-in-contact-body {

        width: 100%;
    }
}


/* ============================================================
   TABLET
   ============================================================ */

@media (max-width: 850px) {

    #get-in {

        padding: 60px 20px;
    }

    .get-in-body {

        width: 100%;

        height: auto;
    }

    .get-in-layout {

        display: block;

        width: 100%;

        height: auto;
    }

    .get-in-form-body,
    .get-in-contact-body {

        width: 100%;

        height: auto;

        padding: 55px;
    }

    .get-in-contact-body {

        padding-top: 0;
    }
}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 576px) {

    #get-in {

        padding: 35px 15px;
    }

    .get-in-body {

        width: 100%;

        max-width: 100%;
    }

    .get-in-form-body,
    .get-in-contact-body {

        padding: 35px 25px;
    }

    .get-in-form-wrapper,
    .get-in-form,
    .get-in-form-wrapper .wpcf7,
    .get-in-form-wrapper form {

        width: 100%;
    }

    .get-in-input-row {

        display: block;

        width: 100%;

        height: auto;
    }

    .get-in-input.get-in-name,
    .get-in-input.get-in-phone {

        width: 100%;

        height: 36px;

        margin-bottom: 15px;
    }

    .get-in-email,
    .get-in-message {

        width: 100%;
    }

    .get-in-form input[type="text"],
    .get-in-form input[type="tel"],
    .get-in-form input[type="email"],
    .get-in-form textarea {

        width: 100%;
    }

    .get-in-title {

        font-size: 28px;
    }

    .get-in-contact-item {

        width: 100%;
    }
}


/* ============================================================
   MAP SECTION
   ============================================================ */

#map {
    position: relative;

    width: 100%;

    margin: 0 !important;
    padding-top: 70px !important;

    background: #f7faf4;

    line-height: 0;
}


/* Map wrapper */

#map .map-wrapper {
    position: relative;

    width: 100%;

    height: 490px;

    margin: 0 !important;
    padding: 0 !important;

    line-height: 0;
}


/* Google Map */

#map iframe {
    display: block;

    width: 100% !important;
    height: 490px !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    outline: none;

    vertical-align: top;
}
