/* =========================================================
   IPS CONTACT PAGE
========================================================= */

:root{
    --contact-cyan:#08aede;
    --contact-blue:#075b83;
    --contact-navy:#071e33;
    --contact-red:#ed2939;
    --contact-text:#263b49;
    --contact-muted:#71808b;
    --contact-border:#dce8ed;
    --contact-light:#f4fafc;
}


/* =========================================================
   HERO
========================================================= */

.ips-contact-hero{
    position:relative;
    min-height:430px;
    display:flex;
    align-items:center;
    overflow:hidden;

    background:
        radial-gradient(
            circle at 12% 50%,
            rgba(8,174,222,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 20%,
            rgba(237,41,57,.08),
            transparent 28%
        ),
        linear-gradient(
            120deg,
            #f2fbfe 0%,
            #ffffff 55%,
            #fff7f7 100%
        );

    border-bottom:1px solid #e3edf2;
}


.ips-contact-hero::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
        linear-gradient(
            rgba(8,174,224,.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(8,174,224,.035) 1px,
            transparent 1px
        );

    background-size:45px 45px;
    pointer-events:none;
}


.ips-contact-hero::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:3px;

    background:
        linear-gradient(
            90deg,
            var(--contact-cyan) 0 68%,
            var(--contact-red) 68%
        );
}


.ips-contact-grid{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            transparent 49.8%,
            rgba(8,174,222,.06) 50%,
            transparent 50.2%
        );

    pointer-events:none;
}


.ips-contact-orb{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}


.ips-contact-orb-one{
    width:420px;
    height:420px;

    right:-180px;
    top:-210px;

    border:1px solid rgba(8,174,222,.12);
}


.ips-contact-orb-two{
    width:260px;
    height:260px;

    right:-80px;
    bottom:-160px;

    border:1px dashed rgba(237,41,57,.14);
}


.ips-contact-hero-inner{
    position:relative;
    z-index:2;

    min-height:430px;

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

    gap:50px;
    padding:55px 0;
}


.ips-contact-hero-content{
    max-width:700px;
}


.ips-contact-hero-content h1{
    margin:18px 0 20px;

    font-family:"Manrope",sans-serif;

    font-size:clamp(48px,6vw,82px);
    line-height:.96;

    letter-spacing:-4px;
    font-weight:800;

    color:var(--contact-navy);
}


.ips-contact-hero-content h1 span{
    display:block;
    color:var(--contact-cyan);
}


.ips-contact-hero-content p{
    max-width:590px;

    margin:0;

    font-size:16px;
    line-height:1.8;

    color:var(--contact-muted);
}


.ips-contact-hero-side{
    min-width:180px;

    display:flex;
    flex-direction:column;
    align-items:flex-end;
}


.ips-contact-hero-number{
    text-align:right;
}


.ips-contact-hero-number span{
    display:block;

    margin-bottom:5px;

    font-size:10px;
    font-weight:800;
    letter-spacing:3px;

    color:var(--contact-red);
}


.ips-contact-hero-number strong{
    display:block;

    font-family:"Manrope",sans-serif;

    font-size:58px;
    line-height:1;

    letter-spacing:-3px;

    color:var(--contact-navy);
}


.ips-contact-hero-number small{
    display:block;

    margin-top:9px;

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;

    color:var(--contact-muted);
}


.ips-contact-hero-line{
    width:100px;
    height:2px;

    margin-top:25px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--contact-red)
        );
}


/* =========================================================
   CONTACT SECTION
========================================================= */

.ips-contact-section{
    padding:100px 0 90px;

    background:#fff;
}


.ips-contact-heading{
    display:flex;
    align-items:flex-start;
    gap:22px;

    margin-bottom:50px;
}


.ips-contact-section-number{
    font-family:"Manrope",sans-serif;

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

    color:var(--contact-red);

    padding-top:7px;
}


.ips-contact-heading > div:last-child > span{
    display:block;

    margin-bottom:10px;

    font-size:9px;
    font-weight:800;
    letter-spacing:2px;

    color:var(--contact-cyan);
}


.ips-contact-heading h2{
    margin:0;

    font-family:"Manrope",sans-serif;

    font-size:42px;
    line-height:1.05;
    letter-spacing:-2px;

    color:var(--contact-navy);
}


/* =========================================================
   CONTACT LAYOUT
========================================================= */

.ips-contact-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 340px;
    gap:28px;
    align-items:stretch;
}


/* =========================================================
   MAIN CONTACT CARD
========================================================= */

.ips-contact-main{
    border:1px solid var(--contact-border);

    background:#fff;

    box-shadow:
        0 20px 60px rgba(7,30,51,.07);

    overflow:hidden;
}


.ips-contact-card-top{
    display:flex;
    align-items:center;

    gap:20px;

    padding:32px 35px;

    background:
        linear-gradient(
            120deg,
            #f4fbfd,
            #ffffff
        );

    border-bottom:1px solid var(--contact-border);
}


.ips-contact-icon{
    width:58px;
    height:58px;

    flex:0 0 58px;

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

    border-radius:50%;

    background:var(--contact-navy);

    color:var(--contact-cyan);

    font-size:20px;
}


.ips-contact-card-top span{
    display:block;

    margin-bottom:6px;

    font-size:14px;
    font-weight:400;

    color:var(--contact-red);
}


.ips-contact-card-top h3{
    margin:0;

    font-family:"Manrope",sans-serif;

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

    color:var(--contact-navy);
}


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

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


.ips-contact-detail{
    display:flex;

    gap:17px;

    padding:30px 32px;

    border-bottom:1px solid var(--contact-border);
}


.ips-contact-detail:nth-child(odd){
    border-right:1px solid var(--contact-border);
}


.ips-contact-detail:nth-child(3),
.ips-contact-detail:nth-child(4){
    border-bottom:0;
}


.ips-detail-icon{
    width:38px;
    height:38px;

    flex:0 0 38px;

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

    border:1px solid rgba(8,174,222,.22);

    border-radius:50%;

    color:var(--contact-cyan);

    background:#f4fbfd;

    font-size:13px;
}


.ips-contact-detail small{
    display:block;

    margin-bottom:8px;

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

    color:var(--contact-muted);
}


.ips-contact-detail p{
    margin:0;

    font-size:15px;
    line-height:1.7;

    color:var(--contact-text);
}


.ips-email-links{
    display:flex;
    flex-direction:column;
    gap:6px;
}


.ips-email-links a{
    font-size:15px;
    font-weight:600;

    color:var(--contact-blue);

    text-decoration:none;

    transition:color .25s ease;
}


.ips-email-links a:hover{
    color:var(--contact-red);
}


/* =========================================================
   CONTACT PEOPLE
========================================================= */

.ips-contact-people{
    position:relative;

    padding:35px;

    overflow:hidden;

    background:
        linear-gradient(
            145deg,
            #071e33 0%,
            #0a3851 65%,
            #075b83 100%
        );

    box-shadow:
        0 20px 60px rgba(7,30,51,.14);
}


.ips-contact-people::before{
    content:"";

    position:absolute;

    width:260px;
    height:260px;

    right:-130px;
    top:-130px;

    border:1px solid rgba(8,174,222,.22);

    border-radius:50%;
}


.ips-contact-people::after{
    content:"";

    position:absolute;

    width:160px;
    height:160px;

    left:-80px;
    bottom:-90px;

    border:1px dashed rgba(237,41,57,.25);

    border-radius:50%;
}


.ips-people-label{
    position:relative;
    z-index:2;

    margin-bottom:30px;

    font-size:16px;
    font-weight:400;
    letter-spacing:2px;

    color:#8fd7e7;
}


.ips-person{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;

    gap:15px;

    padding:18px 0;

    border-bottom:1px solid rgba(255,255,255,.10);
}


.ips-person-icon{
    width:42px;
    height:42px;

    flex:0 0 42px;

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

    border:1px solid rgba(8,174,222,.35);

    border-radius:50%;

    color:var(--contact-cyan);

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


.ips-person strong{
    display:block;

    margin-bottom:5px;

    font-size:16px;
    font-weight:400;

    color:#fff;
}


.ips-person a{
    font-size:16px;

    color:#9fc3d0;

    text-decoration:none;
}


.ips-person a:hover{
    color:#fff;
}


.ips-people-decoration{
    position:absolute;

    right:30px;
    bottom:20px;

    opacity:.08;
}


.ips-people-decoration span{
    font-family:"Manrope",sans-serif;

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

    color:#fff;
}


/* =========================================================
   REGISTERED OFFICE
========================================================= */

.ips-reg-office{
    padding:0 0 100px;

    background:#fff;
}


.ips-reg-office-inner{
    position:relative;

    display:flex;
    align-items:center;

    gap:25px;

    padding:32px 38px;

    border-left:4px solid var(--contact-red);

    background:
        linear-gradient(
            100deg,
            #f3fafc,
            #fff
        );

    border-top:1px solid var(--contact-border);
    border-right:1px solid var(--contact-border);
    border-bottom:1px solid var(--contact-border);

    overflow:hidden;
}


.ips-reg-office-icon{
    width:55px;
    height:55px;

    flex:0 0 55px;

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

    border-radius:50%;

    background:var(--contact-navy);

    color:var(--contact-cyan);

    font-size:18px;
}


.ips-reg-office-content{
    position:relative;
    z-index:2;
}


.ips-reg-office-content > span{
    display:block;

    margin-bottom:5px;

    font-size:16px;
    font-weight:400;
   

    color:var(--contact-red);
}


.ips-reg-office-content h2{
    margin:0 0 7px;

    font-family:"Manrope",sans-serif;

    font-size:22px;

    color:var(--contact-navy);
}


.ips-reg-office-content p{
    margin:0;

    font-size:16px;
    line-height:1.7;

    color:var(--contact-muted);
}


.ips-reg-office-mark{
    position:absolute;

    right:35px;
    top:50%;

    transform:translateY(-50%);

    font-family:"Manrope",sans-serif;

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

    color:rgba(8,174,222,.045);
}


/* =========================================================
   CTA
========================================================= */

.ips-contact-cta{
    padding:0 0 100px;

    background:#fff;
}


.ips-contact-cta-inner{
    position:relative;

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

    gap:30px;

    padding:45px 50px;

    background:
        linear-gradient(
            110deg,
            #071e33,
            #0a3851 70%,
            #075b83
        );

    overflow:hidden;
}


.ips-contact-cta-inner::before{
    content:"";

    position:absolute;

    width:350px;
    height:350px;

    right:-170px;
    top:-220px;

    border:1px solid rgba(8,174,222,.22);

    border-radius:50%;
}


.ips-contact-cta-inner > div{
    position:relative;
    z-index:2;
}


.ips-contact-cta-inner > div > span{
    display:block;

    margin-bottom:10px;

    font-size:8px;
    font-weight:800;
    letter-spacing:2px;

    color:#8fd7e7;
}


.ips-contact-cta-inner h2{
    margin:0;

    font-family:"Manrope",sans-serif;

    font-size:32px;
    line-height:1.15;

    color:#fff;
}


.ips-contact-cta-inner h2 em{
    font-style:normal;
    color:var(--contact-cyan);
}


.ips-contact-cta-button{
    position:relative;
    z-index:2;

    display:flex;
    align-items:center;
    gap:15px;

    padding:15px 22px;

    background:#fff;

    color:var(--contact-navy);

    text-decoration:none;

    font-size:11px;
    font-weight:800;
    letter-spacing:.5px;

    transition:all .3s ease;
}


.ips-contact-cta-button i{
    color:var(--contact-red);

    transition:transform .3s ease;
}


.ips-contact-cta-button:hover{
    transform:translateY(-3px);

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


.ips-contact-cta-button:hover i{
    transform:translateX(4px);
}


/* =========================================================
   BACK TO TOP
========================================================= */

.ips-top{
    display:flex;
    align-items:center;
    justify-content:center;
}


.ips-top i{
    font-size:15px;

    transition:
        transform .3s ease;
}


.ips-top:hover i{
    transform:translateY(-3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:900px){

    .ips-contact-hero-content h1{
        font-size:58px;
    }

    .ips-contact-layout{
        grid-template-columns:1fr;
    }

    .ips-contact-people{
        min-height:260px;
    }

}


@media(max-width:700px){

    .ips-contact-hero{
        min-height:360px;
    }

    .ips-contact-hero-inner{
        min-height:360px;

        padding:45px 0;
    }

    .ips-contact-hero-content h1{
        font-size:46px;
        letter-spacing:-2.5px;
    }

    .ips-contact-hero-content p{
        font-size:14px;
    }

    .ips-contact-hero-side{
        display:none;
    }


    .ips-contact-section{
        padding:70px 0;
    }

    .ips-contact-heading{
        margin-bottom:35px;
    }

    .ips-contact-heading h2{
        font-size:34px;
    }


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

    .ips-contact-detail{
        border-right:0 !important;
        border-bottom:1px solid var(--contact-border) !important;
    }

    .ips-contact-detail:last-child{
        border-bottom:0 !important;
    }


    .ips-contact-card-top{
        padding:25px;
    }

    .ips-contact-detail{
        padding:24px;
    }


    .ips-reg-office-inner{
        align-items:flex-start;

        padding:28px;
    }

    .ips-reg-office-mark{
        display:none;
    }


    .ips-contact-cta-inner{
        flex-direction:column;
        align-items:flex-start;

        padding:35px 28px;
    }

    .ips-contact-cta-inner h2{
        font-size:28px;
    }

}


@media(max-width:480px){

    .ips-contact-hero-content h1{
        font-size:40px;
    }

    .ips-contact-heading{
        gap:14px;
    }

    .ips-contact-section-number{
        font-size:10px;
    }

    .ips-contact-heading h2{
        font-size:30px;
    }

    .ips-contact-card-top{
        align-items:flex-start;
    }

    .ips-contact-icon{
        width:48px;
        height:48px;
        flex-basis:48px;
    }

    .ips-contact-card-top h3{
        font-size:20px;
    }

    .ips-contact-people{
        padding:28px 24px;
    }

    .ips-reg-office-inner{
        flex-direction:column;
    }

    .ips-contact-cta{
        padding-bottom:70px;
    }

}