/* ==========================================================
   PROP-KEYS — LET'S CONNECT / CONTACT HERO
   Bootstrap 5 + Custom CSS
   Desktop reference: 1897 x 461
   Mobile reference: 1125 x 1398
   ========================================================== */

:root{
    --pk-blue:#08a9f4;
    --pk-blue-2:#0798ed;
    --pk-white:#ffffff;
    --pk-navy:#052e5b;
}

*{box-sizing:border-box;}

html,body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100%;
}

body{
    font-family:Arial, Helvetica, sans-serif;
    background:#062f5e;
    color:#fff;
}

/* Main hero */
.vh-contactsendusstyle{
    position:relative;
    width:100%;
    min-height:461px;
    overflow:hidden;
    background-image:url("../images/popular-cities-desktop.png");
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
}

.contact-inner{
    position:relative;
    width:100%;
    max-width:1897px;
    min-height:461px;
    margin:0 auto;
}

/* -----------------------------
   Heading / copy
   ----------------------------- */

.contact-copy{
    position:absolute;
    left:5.9%;
    top:46px;
    z-index:2;
}

.connect-label{
    display:flex;
    align-items:center;
    gap:12px;
    color:#fff;
    font-size:17px;
    line-height:1;
    font-weight:800;
    letter-spacing:3px;
    margin-bottom:17px;
}

.connect-line{
    display:none;
    width:72px;
    height:4px;
    background:var(--pk-blue);
}

.contact-copy h1{
    margin:0;
    color:#fff;
    font-size:clamp(40px,4.15vw,68px);
    line-height:1.02;
    letter-spacing:-1.7px;
    font-weight:900;
    white-space:nowrap;
}

.contact-copy h1 span{
    color:var(--pk-white);
}

.contact-description{
    margin:13px 0 0;
    color:#fff;
    font-size:22px;
    line-height:1.42;
    font-weight:400;
}

/* -----------------------------
   Benefits
   ----------------------------- */

.contact-benefits{
    position:absolute;
    left:5.5%;
    top:251px;
    width:49%;
    min-width:690px;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;
    align-items:start;
    z-index:2;
}

.benefit-item{
    text-align:center;
    min-width:0;
}

.benefit-icon{
    width:78px;
    height:78px;
    margin:0 auto 8px;
    border:3px solid #fff;
    outline:3px solid rgba(8,169,244,.42);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(0,106,194,.75);
    color:#fff;
    font-size:39px;
    line-height:1;
}

.benefit-item h2{
    color:#fff;
    font-size:16px;
    line-height:1.02;
    font-weight:900;
    margin:0;
    text-shadow:0 1px 2px rgba(0,0,0,.3);
}

.benefit-item p{
    color:#fff;
    font-size:14px;
    line-height:1.15;
    margin:5px 0 0;
    white-space:nowrap;
    overflow-wrap: break-word;
}

.benefit-divider{
    width:1px;
    height:95px;
    background:rgba(11,171,245,.78);
    margin:13px 11px 0;
}

/* -----------------------------
   Decorative bottom phrase
   ----------------------------- */

.journey-message{
    position:absolute;
    display:none;
    color:#fff;
    font-family:"Brush Script MT","Segoe Script",cursive;
    font-weight:700;
    line-height:.88;
    text-shadow:2px 3px 4px rgba(0,0,0,.38);
}

.journey-message div{
    white-space:nowrap;
}

.journey-underline{
    display:block;
    width:210px;
    height:8px;
    margin:11px 0 0 80px;
    border-radius:100%;
    background:var(--pk-blue);
    transform:rotate(-8deg);
}

/* Tablet */
@media (max-width:1199.98px){
    .vh-contactsendusstyle{
        min-height:500px;
    }

    .contact-inner{
        min-height:500px;
    }

    .contact-copy{
        left:4%;
        top:40px;
    }

    .contact-copy h1{
        font-size:48px;
    }

    .contact-description{
        font-size:18px;
    }

    .contact-benefits{
        left:3%;
        top:265px;
        width:58%;
        min-width:0;
    }

    .benefit-icon{
        width:68px;
        height:68px;
        font-size:33px;
    }

    .benefit-item h2{font-size:16px;}
    .benefit-item p{font-size:12px;}
}

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

@media (max-width:767.98px){

    .vh-contactsendusstyle{
        min-height:100svh;
        height:auto;
        aspect-ratio:1125 / 1398;
        background-image:url("../images/mobile-desk.png");
        background-position:center top;
        background-size:100% 100%;
    }

    .contact-inner{
        min-height:0;
        height:100%;
        aspect-ratio:1125 / 1398;
    }

    .contact-copy{
        position:absolute;
        top:3.1%;
        left:4%;
        right:4%;
        text-align:center;
    }

    .connect-label{
        justify-content:center;
        gap:14px;
        font-size:23px;
        letter-spacing:5px;
        margin-bottom:27px;
    }

    .connect-line{
        display:block;
        width:105px;
        height:4px;
    }

    .contact-copy h1{
        font-size:clamp(42px,10.8vw,88px);
        line-height:.98;
        letter-spacing:-1.5px;
        white-space:normal;
    }

    .contact-copy h1 span{
        display:block;
    }

    .contact-description{
        margin:25px auto 0;
        max-width:900px;
        font-size:clamp(17px,4.1vw,36px);
        line-height:1.36;
        font-weight:400;
    }

    .desktop-only{
        display:none;
    }

    .contact-benefits{
        position:absolute;
        left:4%;
        right:4%;
        top:39%;
        width:auto;
        min-width:0;
        grid-template-columns:1fr 1px 1fr 1px 1fr 1px 1fr;
        align-items:start;
    }

    .benefit-divider{
        height:155px;
        margin:16px 0 0;
        background:rgba(13,178,247,.9);
    }

    .benefit-icon{
        width:112px;
        height:112px;
        border-width:4px;
        outline-width:3px;
        font-size:54px;
        margin:0 auto 15px;
        background:rgba(0,103,195,.72);
    }

    .benefit-item h2{
        font-size:clamp(16px,3.25vw,31px);
        line-height:1.03;
        margin:0;
    }

    .benefit-item p{
        font-size:clamp(12px,2.55vw,24px);
        line-height:1.15;
        margin-top:8px;
        white-space:normal;
    }

    .journey-message{
        display:block;
        left:3.5%;
        bottom:9.8%;
        font-size:clamp(38px,8.9vw,92px);
    }

    .journey-underline{
        width:260px;
        max-width:45vw;
        height:9px;
        margin-left:110px;
    }
}

/* Smaller phones */
@media (max-width:480px){

    .vh-contactsendusstyle{
        aspect-ratio:1125 / 1398;
    }

    .connect-label{
        font-size:16px;
        letter-spacing:3.5px;
        margin-bottom:18px;
        gap:8px;
    }

    .connect-line{
        width:52px;
        height:3px;
    }

    .contact-copy{
        top:3.4%;
    }

    .contact-copy h1{
        font-size:11.2vw;
    }

    .contact-description{
        margin-top:16px;
        font-size:4vw;
    }

    .contact-benefits{
        top:39.2%;
    }

    .benefit-icon{
        width:68px;
        height:68px;
        font-size:32px;
        border-width:3px;
        margin-bottom:9px;
    }

    .benefit-divider{
        height:94px;
        margin-top:8px;
    }

    .benefit-item h2{
        font-size:2.8vw;
    }

    .benefit-item p{
        font-size:2.45vw;
        margin-top:4px;
    }

    .journey-message{
        bottom:9.2%;
        font-size:8.3vw;
    }

    .journey-underline{
        width:160px;
        height:6px;
        margin-left:60px;
    }
}

/* Very small phones */
@media (max-width:360px){
    .connect-label{
        font-size:14px;
    }

    .benefit-icon{
        width:58px;
        height:58px;
        font-size:27px;
    }

    .benefit-divider{
        height:80px;
    }
}