
/* ==========================================================
   KENANTA PREMIUM BOTTOM CONNECTION SECTION
   Buyer / Supplier / Contact
   ========================================================== */

.kenanta-bottom-connect{
    width:100%;
    padding:0;
    margin:70px 0 0;

    background:#031d35;
}

.kbc-inner{
    display:grid;
    grid-template-columns:48% 52%;

    min-height:470px;

    max-width:100%;
    margin:0 auto;
}


/* ==========================================================
   LEFT IMAGE
   ========================================================== */

.kbc-image{
    position:relative;

    min-height:470px;

    overflow:hidden;
}

.kbc-image img{
    position:absolute;
    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    filter:
        brightness(.68)
        saturate(.78)
        contrast(1.05);

    transition:
        transform .7s ease,
        filter .7s ease;
}

.kbc-image:hover img{
    transform:scale(1.035);

    filter:
        brightness(.73)
        saturate(.84)
        contrast(1.05);
}

.kbc-image-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(3,27,49,.18) 0%,
            rgba(3,27,49,.20) 55%,
            rgba(3,27,49,.88) 100%
        );
}

.kbc-image-caption{
    position:absolute;

    left:55px;
    right:45px;
    bottom:48px;

    z-index:2;
}

.kbc-image-caption span{
    display:block;

    margin-bottom:10px;

    color:#5fc2ff;

    font-size:11px;
    font-weight:800;

    letter-spacing:2.5px;
}

.kbc-image-caption strong{
    display:block;

    max-width:540px;

    color:#fff;

    font-size:28px;
    line-height:1.2;

    letter-spacing:-.025em;
}


/* ==========================================================
   RIGHT CONTENT
   ========================================================== */

.kbc-content{
    display:flex;
    flex-direction:column;
    justify-content:center;

    padding:62px 8vw 62px 70px;

    background:
        linear-gradient(
            135deg,
            #062844 0%,
            #031b31 100%
        );
}

.kbc-label{
    display:block;

    margin-bottom:13px;

    color:#35adf7;

    font-size:11px;
    font-weight:800;

    letter-spacing:2.5px;
}

.kbc-content h2{
    max-width:650px;

    margin:0 0 20px;

    color:#fff !important;

    font-size:46px;
    line-height:1.08 !important;

    letter-spacing:-.04em !important;
}

.kbc-content h2 span{
    color:#2da9fa;
}

.kbc-content > p{
    max-width:650px;

    margin:0 0 28px;

    color:rgba(255,255,255,.80) !important;

    font-size:15px;

    line-height:1.75 !important;
}


/* ==========================================================
   BUYER / SUPPLIER POINTS
   ========================================================== */

.kbc-points{
    display:grid;

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

    gap:14px 24px;

    max-width:690px;
}

.kbc-points > div{
    display:flex;

    align-items:center;

    gap:11px;

    color:#fff;

    font-size:13px;

    font-weight:600;
}

.kbc-points b{
    width:30px;
    height:30px;

    flex:0 0 30px;

    display:flex;

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

    border-radius:50%;

    background:
        linear-gradient(
            135deg,
            #148cd9,
            #31b2ff
        );

    color:#fff;

    font-size:14px;
}

.kbc-contact-row{
    display:flex;

    align-items:center;

    gap:18px;

    margin-top:34px;
    padding-top:24px;

    border-top:
        1px solid rgba(255,255,255,.12);
}

.kbc-contact-row small{
    color:
        rgba(255,255,255,.55);

    font-size:12px;
}

.kbc-contact-row a{
    color:#48b9ff !important;

    font-size:13px;
    font-weight:700;

    text-decoration:none;
}


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

.kbc-contact-details{
    display:grid;

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

    gap:14px;

    max-width:700px;
}

.kbc-contact-details > div{
    padding:18px 20px;

    border:
        1px solid rgba(255,255,255,.12);

    border-radius:12px;

    background:
        rgba(255,255,255,.045);
}

.kbc-contact-details span{
    display:block;

    margin-bottom:7px;

    color:#49baff;

    font-size:9px;
    font-weight:800;

    letter-spacing:1.7px;
}

.kbc-contact-details a,
.kbc-contact-details strong{
    display:block;

    color:#fff !important;

    font-size:13px;
    font-weight:600;

    text-decoration:none;
}

.kbc-contact-details a:hover{
    color:#57c2ff !important;
}


/* ==========================================================
   MAKE FORM AREA CLEANER
   ========================================================== */

.form-layout{
    margin-bottom:0 !important;
}


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

@media(max-width:900px){

    .kbc-inner{
        grid-template-columns:1fr;

        min-height:0;
    }

    .kbc-image{
        min-height:340px;
    }

    .kbc-image-overlay{
        background:
            linear-gradient(
                to bottom,
                rgba(3,27,49,.08),
                rgba(3,27,49,.72)
            );
    }

    .kbc-image-caption{
        left:24px;
        right:24px;
        bottom:28px;
    }

    .kbc-image-caption strong{
        font-size:24px;
    }

    .kbc-content{
        padding:
            45px 25px 50px;
    }

    .kbc-content h2{
        font-size:36px;
    }

}


@media(max-width:600px){

    .kenanta-bottom-connect{
        margin-top:50px;
    }

    .kbc-image{
        min-height:300px;
    }

    .kbc-content h2{
        font-size:32px;
    }

    .kbc-points{
        grid-template-columns:1fr;
    }

    .kbc-contact-details{
        grid-template-columns:1fr;
    }

    .kbc-contact-row{
        align-items:flex-start;

        flex-direction:column;

        gap:8px;
    }

}


/* ==========================================================
   KENANTA PREMIUM WHITE BOTTOM SECTION
   Buyer / Supplier / Contact
   ========================================================== */

.kenanta-bottom-connect{
    background:#ffffff !important;
    padding:70px 0 !important;
    margin-top:70px !important;
    border-top:1px solid #e6edf3 !important;
}

.kbc-inner{
    width:min(1180px,calc(100% - 48px)) !important;
    margin:0 auto !important;

    display:grid !important;
    grid-template-columns:47% 53% !important;

    min-height:520px !important;

    border:1px solid #dce7ef !important;
    border-radius:24px !important;

    overflow:hidden !important;

    background:#ffffff !important;

    box-shadow:
        0 25px 70px rgba(6,44,77,.10) !important;
}


/* ==========================================================
   LEFT IMAGE
   ========================================================== */

.kbc-image{
    position:relative !important;
    min-height:520px !important;
    background:#eaf3f9 !important;
}

.kbc-image img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    filter:
        brightness(.82)
        saturate(.82)
        contrast(1.03) !important;

    transition:
        transform .55s ease,
        filter .55s ease !important;
}

.kbc-image:hover img{
    transform:scale(1.035) !important;

    filter:
        brightness(.88)
        saturate(.87)
        contrast(1.03) !important;
}


/* subtle readable image overlay */

.kbc-image-overlay{
    position:absolute !important;
    inset:0 !important;

    background:
        linear-gradient(
            to top,
            rgba(4,35,61,.76) 0%,
            rgba(4,35,61,.24) 42%,
            rgba(4,35,61,.04) 72%
        ) !important;
}


/* image caption */

.kbc-image-caption{
    left:42px !important;
    right:42px !important;
    bottom:40px !important;
}

.kbc-image-caption span{
    color:#58c2ff !important;

    font-size:10px !important;
    font-weight:800 !important;

    letter-spacing:2.5px !important;
}

.kbc-image-caption strong{
    max-width:500px !important;

    color:#ffffff !important;

    font-size:30px !important;
    line-height:1.18 !important;

    letter-spacing:-.03em !important;

    text-shadow:
        0 3px 18px rgba(0,0,0,.26) !important;
}


/* ==========================================================
   RIGHT SIDE - WHITE
   ========================================================== */

.kbc-content{
    background:#ffffff !important;

    padding:
        64px 62px !important;

    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;

    position:relative !important;
}


/* tiny decorative blue line */

.kbc-content::before{
    content:"" !important;

    position:absolute !important;

    top:0 !important;
    left:62px !important;

    width:82px !important;
    height:4px !important;

    border-radius:0 0 8px 8px !important;

    background:
        linear-gradient(
            90deg,
            #0f78c7,
            #2fb1ff
        ) !important;
}


/* eyebrow */

.kbc-label{
    color:#1598ee !important;

    font-size:11px !important;
    font-weight:800 !important;

    letter-spacing:2.4px !important;

    margin-bottom:14px !important;
}


/* heading */

.kbc-content h2{
    max-width:650px !important;

    margin:0 0 20px !important;

    color:#082d4e !important;

    font-size:46px !important;
    line-height:1.06 !important;

    letter-spacing:-.04em !important;
}

.kbc-content h2 span{
    color:#209be9 !important;
}


/* paragraph */

.kbc-content > p{
    max-width:650px !important;

    margin:0 0 30px !important;

    color:#607386 !important;

    font-size:15px !important;
    line-height:1.8 !important;
}


/* ==========================================================
   BUYER / SUPPLIER FEATURE CARDS
   ========================================================== */

.kbc-points{
    display:grid !important;

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

    gap:14px !important;

    max-width:700px !important;
}

.kbc-points > div{
    min-height:74px !important;

    padding:15px 16px !important;

    display:flex !important;
    align-items:center !important;

    gap:12px !important;

    border:
        1px solid #dce7ef !important;

    border-radius:14px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fbfe 100%
        ) !important;

    color:#163a58 !important;

    font-size:13px !important;
    font-weight:700 !important;

    box-shadow:
        0 8px 22px rgba(5,46,80,.045) !important;

    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease !important;
}

.kbc-points > div:hover{
    transform:translateY(-3px) !important;

    border-color:#a9d6f2 !important;

    box-shadow:
        0 14px 30px rgba(5,46,80,.09) !important;
}

.kbc-points b{
    width:36px !important;
    height:36px !important;

    flex:0 0 36px !important;

    border-radius:12px !important;

    background:
        linear-gradient(
            135deg,
            #0877c4,
            #2cadff
        ) !important;

    color:#fff !important;

    font-size:14px !important;

    box-shadow:
        0 7px 15px rgba(25,145,220,.20) !important;
}


/* buyer/supplier contact row */

.kbc-contact-row{
    margin-top:30px !important;
    padding-top:24px !important;

    border-top:
        1px solid #e1eaf1 !important;
}

.kbc-contact-row small{
    color:#7a8d9d !important;
}

.kbc-contact-row a{
    color:#148fdc !important;

    font-weight:800 !important;
}


/* ==========================================================
   CONTACT PAGE DETAIL CARDS
   ========================================================== */

.kbc-contact-details{
    display:grid !important;

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

    gap:14px !important;

    max-width:720px !important;
}

.kbc-contact-details > div{
    min-height:105px !important;

    padding:20px !important;

    border:
        1px solid #dae6ee !important;

    border-radius:15px !important;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f6fafe 100%
        ) !important;

    box-shadow:
        0 9px 24px rgba(4,43,75,.05) !important;

    transition:
        transform .24s ease,
        box-shadow .24s ease !important;
}

.kbc-contact-details > div:hover{
    transform:translateY(-3px) !important;

    box-shadow:
        0 15px 30px rgba(4,43,75,.09) !important;
}

.kbc-contact-details span{
    color:#1999e9 !important;

    font-size:9px !important;
    font-weight:800 !important;

    letter-spacing:1.8px !important;
}

.kbc-contact-details a,
.kbc-contact-details strong{
    color:#123653 !important;

    font-size:14px !important;
    font-weight:700 !important;
}

.kbc-contact-details a:hover{
    color:#128bd8 !important;
}


/* ==========================================================
   FOOTER SEPARATION
   ========================================================== */

.kenanta-bottom-connect + .site-footer,
.kenanta-bottom-connect ~ .site-footer{
    margin-top:0 !important;
}


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

@media(max-width:950px){

    .kbc-inner{
        grid-template-columns:1fr !important;

        width:min(760px,calc(100% - 34px)) !important;
    }

    .kbc-image{
        min-height:420px !important;
    }

    .kbc-content{
        padding:52px 42px !important;
    }

    .kbc-content::before{
        left:42px !important;
    }

}


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

@media(max-width:600px){

    .kenanta-bottom-connect{
        padding:45px 0 !important;
        margin-top:50px !important;
    }

    .kbc-inner{
        width:calc(100% - 24px) !important;

        border-radius:18px !important;
    }

    .kbc-image{
        min-height:330px !important;
    }

    .kbc-image-caption{
        left:22px !important;
        right:22px !important;
        bottom:24px !important;
    }

    .kbc-image-caption strong{
        font-size:25px !important;
    }

    .kbc-content{
        padding:
            42px 22px 36px !important;
    }

    .kbc-content::before{
        left:22px !important;
        width:65px !important;
    }

    .kbc-content h2{
        font-size:33px !important;
    }

    .kbc-content > p{
        font-size:14px !important;
    }

    .kbc-points{
        grid-template-columns:1fr !important;
    }

    .kbc-contact-details{
        grid-template-columns:1fr !important;
    }

}


/* ==========================================================
   20% SMALLER PREMIUM BOTTOM SECTION
   Buyer / Supplier / Contact
   ========================================================== */

.kenanta-bottom-connect{
    padding:56px 0 !important;
    margin-top:56px !important;
}

.kbc-inner{
    width:min(1040px,calc(100% - 48px)) !important;
    min-height:420px !important;
    border-radius:20px !important;
}

.kbc-image{
    min-height:420px !important;
}

.kbc-image-caption{
    left:34px !important;
    right:34px !important;
    bottom:32px !important;
}

.kbc-image-caption span{
    font-size:9px !important;
    letter-spacing:2px !important;
}

.kbc-image-caption strong{
    font-size:24px !important;
    line-height:1.18 !important;
}

.kbc-content{
    padding:50px 48px !important;
}

.kbc-content::before{
    left:48px !important;
    width:66px !important;
}

.kbc-label{
    font-size:9px !important;
    letter-spacing:2px !important;
    margin-bottom:11px !important;
}

.kbc-content h2{
    font-size:37px !important;
    margin-bottom:16px !important;
}

.kbc-content > p{
    font-size:13px !important;
    line-height:1.7 !important;
    margin-bottom:24px !important;
}

.kbc-points{
    gap:11px !important;
}

.kbc-points > div{
    min-height:58px !important;
    padding:12px 13px !important;
    border-radius:12px !important;
    font-size:11px !important;
}

.kbc-points b{
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
    border-radius:10px !important;
    font-size:12px !important;
}

.kbc-contact-row{
    margin-top:24px !important;
    padding-top:19px !important;
}

.kbc-contact-row small,
.kbc-contact-row a{
    font-size:11px !important;
}

.kbc-contact-details{
    gap:11px !important;
}

.kbc-contact-details > div{
    min-height:84px !important;
    padding:16px !important;
    border-radius:12px !important;
}

.kbc-contact-details span{
    font-size:8px !important;
}

.kbc-contact-details a,
.kbc-contact-details strong{
    font-size:12px !important;
}


/* TABLET */

@media(max-width:950px){

    .kbc-inner{
        width:min(680px,calc(100% - 32px)) !important;
    }

    .kbc-image{
        min-height:340px !important;
    }

    .kbc-content{
        padding:42px 34px !important;
    }

    .kbc-content::before{
        left:34px !important;
    }
}


/* MOBILE */

@media(max-width:600px){

    .kenanta-bottom-connect{
        padding:36px 0 !important;
        margin-top:40px !important;
    }

    .kbc-inner{
        width:calc(100% - 20px) !important;
        border-radius:16px !important;
    }

    .kbc-image{
        min-height:265px !important;
    }

    .kbc-image-caption{
        left:18px !important;
        right:18px !important;
        bottom:20px !important;
    }

    .kbc-image-caption strong{
        font-size:21px !important;
    }

    .kbc-content{
        padding:34px 18px 30px !important;
    }

    .kbc-content::before{
        left:18px !important;
        width:52px !important;
    }

    .kbc-content h2{
        font-size:28px !important;
    }

    .kbc-content > p{
        font-size:12px !important;
    }

}

