/* ==========================================
   PROFESSIONAL FLOW SOLUTIONS HERO
   Version 2.0
========================================== */

/* ---------- COLOURS ---------- */

:root{

--navy:#0B2E59;
--blue:#009FE3;
--orange:#F47A20;
--orange-hover:#E36815;

--white:#ffffff;
--light:#F5F7FA;
--text:#2B2B2B;

}


/* ---------- GLOBAL ---------- */

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    font-family:'Poppins',sans-serif;
}


/* ---------- HERO ---------- */

.pfs-hero{

    position:relative;

    display:flex;
    align-items:center;

    min-height:92vh;

    padding:120px 8%;

    background:
    linear-gradient(
    90deg,
    rgba(11,46,89,.92) 0%,
    rgba(11,46,89,.75) 45%,
    rgba(11,46,89,.30) 100%
    ),

    url("YOUR-HERO-IMAGE.jpg");

    background-size:cover;
    background-position:center;
}


.pfs-content{

    position:relative;

    z-index:2;

    max-width:760px;

}


/* ---------- SUBTITLE ---------- */

.pfs-subtitle{

    color:var(--blue);

    text-transform:uppercase;

    font-size:16px;

    letter-spacing:2px;

    font-weight:700;

    margin-bottom:18px;

}


/* ---------- MAIN TITLE ---------- */

.pfs-hero h1{

    color:white;

    font-size:72px;

    line-height:1.05;

    font-weight:800;

    margin-bottom:25px;

    text-shadow:0 5px 25px rgba(0,0,0,.35);

}


.pfs-hero h1 span{

    color:var(--blue);

}


/* ---------- PARAGRAPH ---------- */

.pfs-text{

    color:#E7EAF0;

    font-size:21px;

    line-height:1.8;

    max-width:620px;

    margin-bottom:45px;

}


/* ---------- BUTTONS ---------- */

.pfs-buttons{

    display:flex;

    flex-wrap:wrap;

    gap:18px;

}


/* ---------- PRIMARY BUTTON ---------- */

.pfs-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    background:var(--orange);

    color:white;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    transition:.3s ease;

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

}


.pfs-btn-primary:hover{

    background:var(--orange-hover);

    transform:translateY(-3px);

}


/* ---------- SECONDARY BUTTON ---------- */

.pfs-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 36px;

    border:2px solid rgba(255,255,255,.85);

    color:white;

    text-decoration:none;

    border-radius:14px;

    font-weight:700;

    transition:.3s ease;

}


.pfs-btn-secondary:hover{

    background:white;

    color:var(--navy);

}


/* ---------- MOBILE ---------- */

@media(max-width:991px){

.pfs-hero{

    min-height:100vh;

    padding:90px 35px;

    text-align:center;

}

.pfs-content{

    max-width:100%;

}

.pfs-hero h1{

    font-size:52px;

}

.pfs-text{

    font-size:18px;

}

.pfs-buttons{

    justify-content:center;

}

}


@media(max-width:576px){

.pfs-hero h1{

    font-size:40px;

}

.pfs-text{

    font-size:17px;

}

.pfs-btn-primary,
.pfs-btn-secondary{

    width:100%;

}

}