/* ===========================
   DEFAULT (DESKTOP)
=============================*/

body {
    background: #fff8e5;
    font-family: "Alata", sans-serif;
}

/* --- Sweet Experience Section --- */

.sweet-wrapper {
    max-width: 1300px;
    margin: auto;
    padding: 75px 40px 0;
}

.sweet-inner {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    transform: scale(0.92);
    transform-origin: top;
}

.jar-wrap {
    width: 45%;
}

.jar-img {
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.text-wrap {
    width: 100%;
    text-align: center;
}

.text-wrap h1 {
    font-size: 70px;
    line-height: 1.1;
}

/* EXACT COLORS — no change */
.orange {
    color: #e76f23;
}

.black {
    color: #000;
}




@media (max-width: 766px) {

    .text-wrap h1 {
        font-size: 32px;
        line-height: 1.2;
        text-align: center;
    }

    /* FORCE LINE 1: Your Sweet */
    .line1 {
        display: inline-block;
        white-space: nowrap;
    }

    /* FORCE LINE 2: Experience Start Here */
    .line2 {
        display: inline-block;
        white-space: nowrap;
    }
}

.bee-img {
    position: absolute;
    top: -50px;
    right: 300px;
    width: 300px;
    transform: rotate(10deg);
}



/* --- CONNECT BOX --- */

.connect-wrapper {
    position: relative;
    background: white;
    width: 450px;
    margin-left: 300px;
    margin-top: -120px;
    padding: 25px 30px;
    /* border-radius: 14px; */
    box-shadow: 0 2px 20px #00000022;
    transform: scale(0.92);
    transform-origin: top;
}

.flower-img {
    position: absolute;
    top: -40px;
    left: -70px;
    width: 150px;
}

.connect-list * {
    font-family: 'Poppins', sans-serif;
}

.connect-wrapper h2 {
    font-size: 40px;
    text-align: center;
}

.connect-wrapper hr {
    width: 80%;
    margin: 10px auto 20px;
}

.connect-list {
    list-style: none;
    padding: 0;
}

.connect-list li {
    display: flex;
    align-items: center;
    /* Align icon and text vertically center */
    gap: 15px;
    margin-bottom: 20px;
}

.icon-circle {
    width: 48px;
    height: 48px;
    background: #9c4b11;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    /* Prevent icon from shrinking */
}

/* Support for both FA icons and Images */
.icon-circle i {
    color: white;
    font-size: 18px;
}

.icon-circle img {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.title {
    font-size: 17px;
    font-weight: 600;
}

.sub {
    font-size: 15px;
    word-break: break-word;
    /* Ensure long emails wrap */
}


/* --- CONTACT FORM --- */

.form-wrapper {
    max-width: 700px;
    background-image: url("../contact/figma_contact/pic1.png");
    background-size: cover;
    background-position: center;
    margin-left: auto;
    margin-right: 220px;
    margin-top: -360px;
    border-radius: 20px;
    position: relative;
    padding: 60px 0;
    transform: scale(0.92);
    transform-origin: top;
    box-shadow: 0 2px 25px #00000040;
}

.form-overlay {
    background: rgba(0, 0, 0, 0.6);
    position: absolute;
    inset: 0;
    border-radius: 20px;
}

.form-box {
    position: relative;
    z-index: 2;
    width: 85%;
    max-width: 360px;
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.form-box input,
.form-box textarea {
    width: 100%;
    padding: 12px 16px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
}

.form-box button {
    width: 60%;
    margin: auto;
    padding: 12px;
    background: #9c4b11;
    color: white;
    border: none;
    border-radius: 30px;
    font-size: 16px;
    cursor: pointer;
}

/* ==========================================
   FIX OVERLAP: CONNECT SHOULD BE IN FRONT
========================================== */

.connect-wrapper {
    position: relative;
    z-index: 5 !important;
    /* Always on top */
}

/* Form wrapper should go BEHIND connect */
.form-wrapper {
    position: relative;
    z-index: 1 !important;
}

/* Pull form slightly DOWN so it does not touch/connect overlap */
.form-wrapper {
    margin-top: -390px;
    /* Adjust from -360px to reduce overlap */
}

/* Image section stays behind everything */
.sweet-wrapper {
    position: relative;
    z-index: 0;
}

/* Make sure form background image never overlaps incorrectly */
.form-wrapper .form-overlay {
    z-index: 0;
}

/* Form content stays above overlay */
.form-box {
    z-index: 2 !important;
    position: relative;
}

/* 🔥 Mobile Responsive for Transparent Quote Box (300px – 766px) */
@media (max-width: 766px) {

    .quote-box {
        width: 88% !important;
        padding: 18px 20px !important;
        margin: 0 auto !important;
    }

    .quote-text {
        font-size: 15px !important;
        line-height: 120% !important;
        margin-bottom: 10px !important;
    }

    .quote-text span {
        margin-top: 5px !important;
        /* small gap between lines */
        display: inline-block;
    }

    .quote-btn {
        font-size: 14px !important;
        padding: 10px 22px !important;
        border-radius: 16px 26px 26px 16px !important;
    }
}



/* === EXACT 4-LINE LAYOUT FOR SCREENS ABOVE 1000px === */
@media (min-width: 1000px) {

    .text-wrap {
        margin-left: -0px !important;
        /* 🔥 Move left */
        margin-top: -0px !important;
        /* 🔥 Move slightly up */
    }

    .text-wrap h1 {
        font-size: 60px !important;
        line-height: 1.1 !important;
        text-align: left !important;
        display: block !important;
    }

    .line1,
    .line2 {
        display: block !important;
        white-space: normal !important;
    }

    .line1 span {
        display: block;
        /* Your */
    }

    .line1 span.orange {
        display: block;
        /* Sweet */
    }

    .line2 span.orange {
        display: block;
        /* Experience */
    }

    .line2 span.black {
        display: block;
        /* Start Here */
    }
}


/* ==============================================
   RESPONSIVE: SMALL DESKTOP (1440px → 1025px)
==============================================*/
@media (max-width: 1440px) and (min-width: 1025px) {
    .sweet-wrapper {
        max-width: 1140px;
        padding: 55px 30px 0;
    }

    .sweet-inner {
        gap: 32px;
        transform: scale(1);
    }

    .jar-wrap {
        width: 41%;
    }

    .jar-img {
        height: 440px;
    }

    .text-wrap {
        width: 59%;
        margin-left: 14px;
    }

    .text-wrap h1 {
        font-size: 54px;
    }

    .bee-img {
        top: 58px;
        right: 105px;
        width: 110px;
    }

    /* --- Connect popup: Stretches and wraps if it hits the form --- */
    .connect-wrapper {
        position: relative !important;
        display: flex;
        flex-direction: column;
        width: 400px;
        max-width: 100%;
        min-width: 270px;
        margin-left: 300px;
        margin-top: -130px;
        padding: 18px 20px;
        border-radius: 12px;
        background: #fff;
        z-index: 5 !important;
        box-sizing: border-box;
        transition: width 0.22s cubic-bezier(.6, 1.6, .4, 1),
            box-shadow 0.2s;
        box-shadow: 0 6px 24px rgba(40, 28, 3, 0.13);
        overflow-wrap: break-word;
        word-break: break-word;
    }

    /* Responsive wrap/expand effect for overlap scenario */
    .connect-wrapper:has(+ .form-wrapper),
    .form-wrapper:has(~ .connect-wrapper) {
        /* This selector attempts to simulate JS/interactivity 
            Fallback for overlap: Make connect-wrapper take full width 
            if it would visually "touch" or overlap the form
            Tune this for your real layout as needed!
        */
        /* width: 50%; */
        width: 400px;
        max-width: 100%;
        min-width: 270px;
        margin-left: 300px;
        left: 0;
        right: 0;
        top: unset;
        margin-top: -60px;
        border-radius: 16px;
        z-index: 10 !important;
        /* Optional: visually indicate connection */
        box-shadow: 0 8px 38px rgba(40, 28, 3, 0.18);
    }

    .flower-img {
        width: 95px;
        top: -35px;
        left: -42px;
    }

    .connect-wrapper h2 {
        font-size: 30px;
        word-break: break-word;
    }

    .form-wrapper {
        max-width: 620px;
        margin-right: 210px;
        margin-top: -335px;
        padding: 38px 0;
        border-radius: 15px;
        box-sizing: border-box;
    }

    .form-box {
        max-width: 300px;
    }

    .form-box input,
    .form-box textarea {
        font-size: 14px;
        border-radius: 7px;
        padding: 10px 13px;
    }

    .form-box button {
        font-size: 14px;
        border-radius: 24px;
        width: 65%;
        padding: 10px;
    }
}

/* ==============================================
   TABLET RESPONSIVE (1024px → 768px)
==============================================*/

@media (max-width: 1024px) and (min-width: 768px) {
    .sweet-inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 36px;
        transform: scale(1);
        justify-content: flex-start;
    }

    .jar-wrap {
        width: 70%;
        min-width: 260px;
        margin: 0;
        padding-right: 16px;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .jar-img {
        width: 100%;
        height: 375px;
        object-fit: cover;
        border-radius: 0 0 14px 0;
    }

    .text-wrap {
        width: 60%;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        position: relative;
        padding-top: 10px;
        padding-left: 0;
    }

    .text-wrap h1 {
        font-size: 55px;
        line-height: 1;
        text-align: left;
        padding: 0;
        margin-bottom: 12px;
    }

    .bee-img {
        position: absolute;
        right: 150px;
        top: -30px;
        width: 90px;
        min-width: 80px;
        max-width: 110px;
        display: block;
        z-index: 2;
        transform: rotate(10deg);
    }

    /* CONNECT + FORM */
    .connect-wrapper,
    .form-wrapper {
        position: relative !important;
        display: block;
        margin: 0;
        width: 45%;
        min-width: 280px;
        max-width: 420px;
        transform: scale(1);
        z-index: auto;
    }

    .connect-wrapper {
        margin-left: 4vw;
        margin-top: -50px;
        z-index: 10 !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        padding: 22px 26px;
    }

    /* Icon Circle - Ensure full visibility */
    .icon-circle {
        width: 50px;
        height: 50px;
        flex-shrink: 0;
    }

    .icon-circle i {
        font-size: 20px;
    }

    .form-wrapper {
        margin-left: auto;
        margin-right: 2vw;
        margin-top: -355px;
        z-index: 5 !important;
        box-shadow: 0 2px 20px #0003;
        width: 53%;
        max-width: 500px;
        min-width: 320px;
        padding: 40px 0;
    }

    .form-box {
        width: 100%;
        max-width: 380px;
        min-width: 220px;
        margin: auto;
    }

    .form-box input,
    .form-box textarea {
        font-size: 15px;
        padding: 12px 14px;
        border-radius: 7px;
    }

    .form-box button {
        width: 70%;
        margin: 20px auto 0;
        font-size: 15.5px;
        padding: 11px;
    }

    .flower-img {
        position: absolute;
        top: -35px;
        left: -48px;
        width: 90px;
    }

    .connect-wrapper h2 {
        font-size: 32px;
        /* Adjusted for tablet */
    }
}


/* ==============================================
   MOBILE BELOW 768px
==============================================*/

@media (max-width: 767px) {

    .sweet-wrapper {
        padding: 30px 20px 0;
    }

    .sweet-inner {
        flex-direction: column;
        align-items: center;
        transform: scale(1);
    }

    .jar-wrap,
    .text-wrap {
        width: 100%;
        margin: 0;
        text-align: center;
    }

    .jar-img {
        width: 70%;
        height: 400px;
        object-fit: cover;
        margin: 0 auto;
    }

    .text-wrap h1 {
        font-size: 40px;
    }

    .bee-img {
        display: none;
    }

    .connect-wrapper,
    .form-wrapper {
        width: 92%;
        margin: 20px auto 0;
        transform: scale(1);
    }

    .connect-wrapper h2 {
        font-size: 28px;
        /* Smaller font for mobile */
    }

    .title {
        font-size: 16px;
    }

    .sub {
        font-size: 14px;
    }

    .form-wrapper {
        margin-bottom: 40px;
    }
}

/* User requested fix for < 500px device alignment */
@media (max-width: 500px) {
    .quote-btn {
        position: relative;
        text-decoration: none;
        top: -19px;
    }
}