/* ==================================================
   TITLI ENGINEERING - LUXURY FOREST CONTACT
================================================== */

.te-luxury-contact,
.te-luxury-contact * {
    box-sizing: border-box;
}

.te-luxury-contact {
    --forest: #073b2e;
    --forest-dark: #042b22;
    --forest-light: #0b6046;
    --emerald: #15966b;
    --mint: #dff2e8;
    --gold: #b7a16a;

    position: relative;
    isolation: isolate;

    width: calc(100% - 36px);
    max-width: 1450px;

    min-height: 0;
    height: auto;

    margin: 35px auto !important;

    padding: 55px 48px 125px !important;

    overflow: hidden;

    border: 1px solid rgba(183, 161, 106, .65);

    border-radius: 24px;

    outline: 1px solid rgba(7, 59, 46, .12);
    outline-offset: 5px;

    background:
        radial-gradient(
            ellipse at 5% 5%,
            rgba(24, 153, 104, .12),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #f4faf6,
            #ffffff 50%,
            #eaf5ee
        );

    box-shadow:
        0 20px 55px rgba(4, 43, 34, .10),
        0 4px 15px rgba(4, 43, 34, .04);

    font-family: 'DM Sans', sans-serif;

    transition: box-shadow .4s ease;
}

.te-luxury-contact:hover {
    box-shadow:
        0 25px 70px rgba(4, 43, 34, .14),
        0 5px 18px rgba(4, 43, 34, .05);
}


/* INNER DECORATIVE BORDER */

.te-luxury-contact::before {
    content: "";

    position: absolute;

    inset: 9px;

    border: 1px solid rgba(7, 59, 46, .09);

    border-radius: 17px;

    pointer-events: none;

    z-index: 1;
}


/* BACKGROUND PATTERN */

.te-luxury-contact::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 360px;
    height: 360px;

    border-radius: 50%;

    border: 1px solid rgba(21, 150, 107, .09);

    box-shadow:
        0 0 0 35px rgba(21, 150, 107, .025),
        0 0 0 75px rgba(21, 150, 107, .018);

    transform: translate(40%, -40%);

    pointer-events: none;

    z-index: -1;
}


/* ==============================================
   MAIN LAYOUT
============================================== */

.te-luxury-container {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 1160px;

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, .88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: 48px;
}


/* ==============================================
   LEFT SIDE
============================================== */

.te-luxury-left {
    width: 100%;
    min-width: 0;
}

.te-luxury-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 11px;

    padding: 9px 15px;

    margin-bottom: 23px;

    border: 1px solid rgba(7, 59, 46, .17);

    border-radius: 50px;

    background: rgba(255, 255, 255, .85);

    color: var(--forest-light);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.7px;

    box-shadow: 0 4px 12px rgba(7, 59, 46, .035);
}

.te-live-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: #16976a;

    box-shadow: 0 0 0 4px rgba(22, 151, 106, .12);
}

.te-luxury-left h1 {
    font-family: 'Playfair Display', serif;

    font-size: clamp(39px, 4vw, 57px);

    line-height: 1.12;

    letter-spacing: -1.8px;

    font-weight: 800;

    color: var(--forest);

    margin: 0 0 19px;
}

.te-luxury-left h1 span {
    color: var(--emerald);
}

.te-luxury-description {
    max-width: 430px;

    font-size: 14px;

    line-height: 1.9;

    color: #63776c;

    margin: 0;
}


/* DECORATIVE DIVIDER */

.te-luxury-line {
    width: 75px;
    height: 3px;

    margin: 26px 0;

    border-radius: 20px;

    background: linear-gradient(
        90deg,
        var(--forest),
        #34b985
    );
}


/* ==============================================
   CONTACT DETAILS
============================================== */

.te-luxury-detail {
    display: flex;

    align-items: center;

    gap: 14px;

    width: 100%;

    padding: 12px 13px;

    margin-bottom: 9px;

    border: 1px solid transparent;

    border-radius: 13px;

    transition: all .3s ease;
}

.te-luxury-detail:hover {
    background: rgba(255, 255, 255, .94);

    border-color: rgba(7, 100, 70, .17);

    box-shadow:
        0 8px 22px rgba(7, 59, 46, .075);

    transform: translateX(5px);
}

.te-detail-icon {
    width: 46px;
    height: 46px;

    min-width: 46px;

    display: flex;

    align-items: center;
    justify-content: center;

    border-radius: 13px;

    border: 1px solid rgba(7, 100, 70, .12);

    background: linear-gradient(
        145deg,
        #e6f5ec,
        #d4ebdd
    );

    color: var(--forest-light);

    font-size: 17px;

    transition: all .35s ease;
}

.te-luxury-detail:hover .te-detail-icon {
    background: var(--forest);

    color: #ffffff;

    transform: rotate(-5deg) scale(1.07);

    box-shadow: 0 5px 13px rgba(7, 59, 46, .2);
}

.te-detail-content {
    flex: 1;
    min-width: 0;
}

.te-detail-content span {
    display: block;

    color: #82968a;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;

    margin-bottom: 5px;
}

.te-detail-content h3 {
    font-size: 13px;

    font-weight: 700;

    line-height: 1.5;

    color: var(--forest);

    margin: 0;

    overflow-wrap: anywhere;
}

.te-detail-arrow {
    font-size: 11px;

    color: #9aafa2;

    transition: .3s ease;
}

.te-luxury-detail:hover .te-detail-arrow {
    color: var(--emerald);

    transform: translate(3px, -3px);
}


/* SIGNATURE */

.te-luxury-signature {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 24px;

    color: var(--forest-light);

    font-family: 'Playfair Display', serif;

    font-size: 14px;

    font-style: italic;

    font-weight: 700;
}

.te-luxury-signature span {
    width: 27px;
    height: 2px;

    background: var(--gold);
}


/* ==============================================
   FORM CARD
============================================== */

.te-luxury-right {
    width: 100%;
    min-width: 0;
}

.te-luxury-card {
    position: relative;

    width: 100%;

    padding: 31px 29px 23px;

    background: #ffffff;

    border: 1px solid #d8e8dd;

    border-top: 3px solid var(--forest);

    border-radius: 18px;

    box-shadow:
        0 16px 40px rgba(4, 43, 34, .09),
        0 3px 9px rgba(4, 43, 34, .035);

    transition: all .35s ease;
}

.te-luxury-card:hover {
    transform: translateY(-5px);

    border-color: rgba(21, 150, 107, .35);

    box-shadow:
        0 25px 50px rgba(4, 43, 34, .13),
        0 5px 15px rgba(4, 43, 34, .05);
}


/* CARD TOP */

.te-card-top {
    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 14px;

    margin-bottom: 20px;
}

.te-card-eyebrow {
    color: var(--emerald);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;
}

.te-card-top h2 {
    font-family: 'Playfair Display', serif;

    font-size: clamp(27px, 2.5vw, 34px);

    line-height: 1.2;

    font-weight: 800;

    color: var(--forest);

    margin: 9px 0;
}

.te-card-top h2 span {
    color: var(--emerald);
}

.te-card-top p {
    font-size: 12px;

    line-height: 1.7;

    color: #829187;

    margin: 0;
}

.te-card-number {
    width: 44px;
    height: 44px;

    min-width: 44px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    background: #edf6ef;

    border: 1px solid #d9eade;

    border-radius: 12px;
}

.te-card-number span {
    font-size: 15px;

    font-weight: 800;

    color: var(--forest);
}

.te-card-number small {
    font-size: 8px;

    color: #8aa095;
}


/* DIVIDER */

.te-card-divider {
    width: 100%;
    height: 1px;

    margin-bottom: 21px;

    background: linear-gradient(
        90deg,
        #b8d9c4,
        #e9f1eb,
        transparent
    );
}


/* ==============================================
   FORM GRID
============================================== */

.te-luxury-form {
    width: 100%;
    margin: 0;
}

.te-luxury-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px 14px;

    margin-bottom: 17px;
}

.te-luxury-field {
    width: 100%;
    min-width: 0;

    margin: 0;
}

.te-luxury-field label {
    display: block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.1px;

    color: #50675b;

    margin-bottom: 8px;
}

.te-luxury-field label span {
    color: var(--emerald);
}


/* INPUT BOX */

.te-luxury-input {
    position: relative;

    display: flex;

    align-items: center;

    gap: 11px;

    width: 100%;
    height: 49px;

    padding: 0 13px;

    background: #f8fbf9;

    border: 1px solid #e0ebe3;

    border-radius: 10px;

    transition: all .3s ease;
}

.te-luxury-input:hover {
    border-color: #a7cfb6;

    background: #ffffff;
}

.te-luxury-input:focus-within {
    background: #ffffff;

    border-color: var(--emerald);

    box-shadow:
        0 0 0 3px rgba(21, 150, 107, .09),
        0 4px 12px rgba(7, 59, 46, .035);

    transform: translateY(-1px);
}

.te-luxury-input > i:first-child {
    width: 18px;
    min-width: 18px;

    text-align: center;

    font-size: 14px;

    color: var(--forest-light);

    transition: .3s ease;
}

.te-luxury-input:focus-within > i:first-child {
    color: var(--emerald);
}


/* INPUT RESET */

.te-luxury-input input,
.te-luxury-input select,
.te-luxury-input textarea {
    display: block;

    width: 100%;
    max-width: 100%;
    min-width: 0;

    height: 100%;

    margin: 0;
    padding: 0;

    outline: none;
    border: none;

    background: transparent;

    box-shadow: none;

    color: #243c31;

    font-family: 'DM Sans', sans-serif;

    font-size: 12px;

    font-weight: 500;
}

.te-luxury-input input::placeholder,
.te-luxury-input textarea::placeholder {
    color: #a2b0a7;
    opacity: 1;
}


/* SELECT */

.te-luxury-input select {
    appearance: none;
    -webkit-appearance: none;

    cursor: pointer;

    padding-right: 22px;
}

.te-lux-select-arrow {
    position: absolute;

    right: 13px;

    color: #82968a !important;

    font-size: 10px !important;

    pointer-events: none;
}


/* FULL WIDTH */

.te-luxury-full {
    margin-bottom: 16px;
}


/* MESSAGE */

.te-luxury-textarea {
    height: 95px;

    align-items: flex-start;

    padding-top: 13px;
}

.te-luxury-textarea textarea {
    min-height: 70px;

    line-height: 1.65;

    resize: vertical;
}


/* ==============================================
   PREMIUM BUTTON
============================================== */

.te-luxury-submit {
    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    width: 100%;
    height: 53px;

    padding: 0 18px;

    margin: 5px 0 0;

    border: 1px solid #0a6248;

    border-radius: 10px;

    background: linear-gradient(
        110deg,
        #0b684a,
        #073c2e
    );

    color: #ffffff;

    font-family: 'DM Sans', sans-serif;

    font-size: 14px;

    font-weight: 800;

    letter-spacing: .3px;

    cursor: pointer;

    box-shadow:
        0 7px 18px rgba(7, 59, 46, .18);

    transition: all .35s ease;
}

.te-luxury-submit::before {
    content: "";

    position: absolute;

    top: 0;
    left: -110%;

    width: 65%;
    height: 100%;

    background: linear-gradient(
        100deg,
        transparent,
        rgba(255, 255, 255, .24),
        transparent
    );

    transform: skewX(-22deg);

    transition: .65s ease;
}

.te-luxury-submit:hover::before {
    left: 130%;
}

.te-luxury-submit:hover {
    background: linear-gradient(
        110deg,
        #15966b,
        #064b36
    );

    border-color: #15966b;

    transform: translateY(-3px);

    box-shadow:
        0 12px 25px rgba(7, 59, 46, .25);
}

.te-luxury-submit:active {
    transform: translateY(0);
}

.te-luxury-submit i {
    transition: .3s ease;
}

.te-luxury-submit:hover i {
    transform: translateX(5px);
}


/* PRIVACY */

.te-luxury-privacy {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    width: 100%;

    min-height: 39px;

    padding: 9px 8px;

    margin-top: 12px;

    border: 1px solid #dfebe2;

    border-radius: 8px;

    background: #f1f7f2;

    color: #71877a;

    font-size: 10px;

    font-weight: 600;

    line-height: 1.5;

    text-align: center;

    transition: .3s ease;
}

.te-luxury-privacy:hover {
    background: #e8f4eb;

    border-color: #c6e2d0;
}

.te-luxury-privacy i {
    color: var(--emerald);

    font-size: 14px;

    flex-shrink: 0;
}


/* FORM FOOTER */

.te-luxury-bottom-text {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding: 16px 4px 0;
}

.te-luxury-bottom-text span {
    color: #84968b;

    font-size: 8px;

    font-weight: 800;

    letter-spacing: .9px;
}


/* ==============================================
   PREMIUM CSS WATER WAVES
============================================== */

.te-water-design {
    position: absolute;

    left: 0;
    bottom: 0;

    z-index: 2;

    width: 100%;
    height: 125px;

    overflow: hidden;

    pointer-events: none;

    background: linear-gradient(
        180deg,
        transparent,
        rgba(171, 220, 195, .24)
    );
}

.te-wave {
    position: absolute;

    left: -15%;

    width: 130%;

    height: 140px;

    will-change: transform;

    border-radius: 45% 55% 0 0 / 35% 40% 0 0;
}

.te-wave-one {
    bottom: -100px;

    background: linear-gradient(
        180deg,
        rgba(58, 173, 129, .37),
        rgba(14, 112, 82, .60)
    );

    animation: te-wave-motion-one 9s ease-in-out infinite alternate;
}

.te-wave-two {
    left: -20%;

    bottom: -111px;

    width: 140%;
    height: 150px;

    background: linear-gradient(
        180deg,
        rgba(47, 166, 152, .38),
        rgba(6, 103, 94, .68)
    );

    animation: te-wave-motion-two 11s ease-in-out infinite alternate;
}

.te-wave-three {
    bottom: -124px;

    left: -10%;

    width: 120%;
    height: 165px;

    background: linear-gradient(
        180deg,
        rgba(29, 139, 133, .37),
        rgba(4, 69, 64, .75)
    );

    animation: te-wave-motion-three 13s ease-in-out infinite alternate;
}

.te-water-glow {
    position: absolute;

    top: 8px;
    left: -10%;

    width: 120%;
    height: 45px;

    background: rgba(255, 255, 255, .48);

    filter: blur(22px);

    animation: te-water-light 7s ease-in-out infinite alternate;
}


@keyframes te-wave-motion-one {
    from { transform: translateX(-2%) rotate(-3deg); }
    to { transform: translateX(3%) rotate(3deg); }
}

@keyframes te-wave-motion-two {
    from { transform: translateX(3%) rotate(3deg); }
    to { transform: translateX(-3%) rotate(-3deg); }
}

@keyframes te-wave-motion-three {
    from { transform: translateX(-2%) rotate(-2deg); }
    to { transform: translateX(2%) rotate(3deg); }
}

@keyframes te-water-light {
    from { opacity: .35; }
    to { opacity: .8; }
}


/* ==============================================
   TABLET
============================================== */

@media (max-width: 1000px) {

    .te-luxury-contact {
        padding: 45px 30px 115px !important;
    }

    .te-luxury-container {
        gap: 28px;
    }

    .te-luxury-left h1 {
        font-size: 43px;
    }

    .te-luxury-card {
        padding: 25px 20px 20px;
    }

}


/* ==============================================
   MOBILE
============================================== */

@media (max-width: 800px) {

    .te-luxury-contact {
        width: calc(100% - 24px);

        margin: 22px auto !important;

        padding: 38px 23px 110px !important;
    }

    .te-luxury-container {
        grid-template-columns: minmax(0, 1fr);

        max-width: 620px;

        gap: 32px;
    }

    .te-luxury-left h1 {
        font-size: clamp(40px, 8vw, 54px);
    }

}


/* SMALL MOBILE */

@media (max-width: 550px) {

    .te-luxury-contact {
        width: calc(100% - 20px);

        margin: 16px auto !important;

        padding: 30px 15px 100px !important;

        border-radius: 17px;
    }

    .te-luxury-contact::before {
        inset: 6px;

        border-radius: 12px;
    }

    .te-luxury-left h1 {
        font-size: 37px;

        letter-spacing: -1.2px;
    }

    .te-luxury-description {
        font-size: 13px;
    }

    .te-luxury-detail {
        padding: 10px 7px;

        gap: 11px;
    }

    .te-detail-icon {
        width: 42px;
        height: 42px;

        min-width: 42px;
    }

    .te-detail-content h3 {
        font-size: 12px;
    }

    .te-luxury-card {
        padding: 22px 14px 17px;

        border-radius: 14px;
    }

    .te-card-top h2 {
        font-size: 25px;
    }

    .te-luxury-grid {
        grid-template-columns: minmax(0, 1fr);

        gap: 14px;
    }

    .te-luxury-input {
        height: 48px;
    }

    .te-luxury-textarea {
        height: 95px;
    }

    .te-luxury-bottom-text span {
        font-size: 7px;
    }

}


/* ACCESSIBILITY */

@media (prefers-reduced-motion: reduce) {

    .te-wave,
    .te-water-glow {
        animation: none !important;
    }

    .te-luxury-contact *,
    .te-luxury-contact *::before {
        transition: none !important;
    }

}