/* Banner One - updated for no overlap + laptop height fix */
.banner-one {
    position: relative;
    display: block;
    overflow: hidden;
    background-color: rgba(var(--gorent-extra-rgb), .30);
    clip-path: polygon(50% 0%, 100% 0, 100% 81%, 81% 94%, 16% 94%, 0 100%, 0 0);
    padding: 50px 0 110px;
    z-index: 1;
}

/* shape background stays behind everything */
.banner-one__shape-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: .10;
    mix-blend-mode: difference;
    z-index: 0; /* behind content */
}

/* decorative shapes */
.banner-one__shape-1 {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 360px;
    background-color: var(--gorent-base);
    z-index: 1;
}
.banner-one__shape-1-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: .10;
    z-index: -1;
}
.banner-one__shape-2 {
    position: absolute;
    top: -400px;
    bottom: -535px;
    left: -290px;
    width: 808px;
    background-color: var(--gorent-base);
    z-index: 0;
    transform: rotate(-45deg);
    opacity: .05;
}

/* NEW: flex row so text and image do not overlap */
.banner-one__inner {
    position: relative;
    display: flex;
    align-items: center;
    gap: 32px;
    z-index: 2; /* above shapes */
    justify-content: space-between;
    flex-wrap: wrap; /* allow stacking on small screens */
}

/* content column */
.banner-one__content {
    position: relative;
    display: block;
    flex: 1 1 520px; /* grows, but has minimum space */
    z-index: 3; /* ensure text is above image if close */
    min-width: 320px;
}

/* image column */
.banner-one__img-one {
    position: relative; /* changed from absolute to normal flow */
    flex: 0 0 420px; /* fixed-ish width for image column */
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    z-index: 1; /* behind text if overlap attempts happen */
    pointer-events: none; /* prevents accidental hover overlap issues */
}

/* Ensure the image scales down to fit area */
.banner-one__img-one img,
.banner-one__img-one .next-image {
    width: 100%;
    height: auto;
    max-width: 480px;
    display: block;
    pointer-events: none;
}

/* typography unchanged but keep sizes responsive */
.banner-one__sub-title {
    font-size: 20px;
    color: var(--gorent-black);
    font-weight: 500;
}
.banner-one__title {
    font-size: 40px; /* slightly reduced baseline for better fit */
    line-height: 1.1;
    font-weight: 900;
    text-transform: uppercase;
    margin-top: 12px;
    margin-bottom: 16px;
}
.banner-one__title span {
    color: var(--gorent-base);
}
.banner-one__text {
    color: rgba(var(--gorent-black-rgb), .70);
}

/* Buttons */
.banner-one__btn-box {
    position: relative;
    display: flex;
    gap: 15px;
    margin-top: 28px;
    flex-wrap: wrap;
    align-items: center;
}

.thm-btn--secondary {
    background: var(--gorent-white);
    color: var(--gorent-base);
    border: 2px solid var(--gorent-white);
}

.thm-btn--secondary:hover {
    background: transparent;
    color: var(--gorent-white);
}

/* Responsive for mobile */
@media (max-width: 576px) {
    .banner-one__btn-box {
        flex-direction: column;
        gap: 10px;
    }

    .thm-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

/* SMALL SCREENS: stack content + image, smaller text */
@media (max-width: 767px) {
    .banner-one {
        padding: 60px 0 60px;
    }
    .banner-one__inner {
        flex-direction: column-reverse; /* image below text on phones */
        align-items: flex-start;
    }
    .banner-one__img-one {
        width: 100%;
        flex: 0 0 auto;
    }
    .banner-one__title {
        font-size: 28px;
        line-height: 1.15;
    }
}

/* LAPTOP / DESKTOP HEIGHT ADJUSTMENT
   Limit banner height for laptop screens so it fits in viewport
   without vertical scroll. Tune max-height as needed. */
@media (min-width: 992px) and (max-width: 1400px), (min-width: 1024px) and (max-height: 900px) {
    .banner-one {
        padding: 60px 0 80px; /* reduce vertical whitespace on laptops */
        max-height: calc(100vh - 80px); /* leaves some room for nav/header */
    }
    .banner-one__title {
        font-size: 40px;
    }
    .banner-one__img-one {
        flex: 0 0 360px;
    }
    .banner-one__img-one img {
        max-width: 360px;
    }
}

/* Avoid text wrapping under absolutely positioned elements — keep z-index ordering consistent */
.banner-one__inner * {
    position: relative;
    z-index: 2;
}