/* =========================================================
   PRK BUSINESS SOLUTIONS — style.css (static/css/style.css)
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

/* ---------- Variables (colours yahan se badlo) ---------- */
:root {
    --red:        #e11d2e;
    --red-dark:   #c2121f;
    --pink:       #ff4d6d;
    --blue:       #1f7ed6;
    --blue-light: #5b9dff;
    --navy:       #14163a;
    --text:       #1f2433;
    --muted:      #5f6678;
    --white:      #ffffff;
    --lavender:   #efeaf7;
    --radius:     14px;
    --shadow:     0 10px 30px rgba(20, 22, 58, .10);
    --shadow-lg:  0 18px 45px rgba(20, 22, 58, .20);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: var(--text);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5 { font-family: 'Outfit', sans-serif; }
img { max-width: 100%; }
a { text-decoration: none; }

/* ---------- Buttons ---------- */
.btn-primary-custom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    border: 2px solid var(--red);
    border-radius: 50px;
    background: var(--red);
    color: #fff;
    font-weight: 600;
    box-shadow: 0 8px 20px rgba(225, 29, 46, .30);
    transition: all .25s ease;
}
.btn-primary-custom:hover {
    background: var(--red-dark);
    border-color: var(--red-dark);
    color: #fff;
    transform: translateY(-2px);
}
.btn-primary-custom.btn-lg { padding: 13px 32px; font-size: 16px; }

/* =========================================================
   NAVBAR
========================================================= */
.home-navbar {
    padding: 14px 0;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 2px 18px rgba(20, 22, 58, .08);
    backdrop-filter: blur(8px);
}
.home-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: .5px;
}

.logo-prk  { font-size: 26px; color: var(--sky); }
.logo-text { font-size: 22px; color: var(--red); }

.home-navbar .nav-link {
    position: relative;
    padding: 8px 14px !important;
    font-size: 15px;
    font-weight: 500;
    color: var(--text);
    transition: color .2s;
}
.home-navbar .nav-link:hover,
.home-navbar .nav-link.active { color: var(--red); }
.home-navbar .nav-link.active::after {
    content: "";
    position: absolute;
    left: 14px; right: 14px; bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--red);
}

/* =========================================================
   HERO
========================================================= */
/* ===== HERO SECTION ===== */
.hero-section {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 680px;
    padding: 100px 24px 65px;
    overflow: hidden;
    background: var(--navy);
    color: #fff;
    text-align: center;
    clip-path: none;
    border-radius: 0;
}

/* ===== SINGLE BACKGROUND IMAGE ===== */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg span {
    position: absolute;
    inset: 0;
    background-image: url('../images/home.jpeg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Blue dark overlay for clear text */
.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        rgba(5, 20, 65, 0.20),
        rgba(5, 30, 80, 0.30),
        rgba(5, 20, 65, 0.15)
    );
}

/* ===== CONTENT CONTAINER ===== */
.hero-section .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.hero-content {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

/* ===== WELCOME BADGE ===== */
.hero-badge {
    display: inline-block;
    margin-bottom: 28px;
    padding: 9px 18px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.10);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* ===== MAIN HEADING ===== */
.hero-content h1 {
    width: 100%;
    margin: 0 auto 22px;
    font-size: clamp(36px, 5.5vw, 68px);
    line-height: 1.08;
    font-weight: 800;
    text-align: center;
}

.hero-content h1 span {
    display: block;
    width: 100%;
    text-align: center;
}

.line-black {
    color: #fff;
}

.line-blue {
    color: #1685ff;
}

.line-red {
    background: linear-gradient(90deg, #ff263f, #e91439);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ===== DESCRIPTION ===== */
.hero-text {
    width: 100%;
    max-width: 760px;
    margin: 0 auto 30px;
    font-size: 17px;
    line-height: 1.75;
    text-align: center;
    color: rgba(255, 255, 255, 0.92);
}

/* ===== BUTTON ===== */
.hero-buttons {
    display: flex;
    justify-content: center;
    margin-bottom: 42px;
}

.hero-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 17px 42px;
    border: none;
    border-radius: 50px;
    background: #ed1535;
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s ease;
}

.hero-buttons .btn:hover {
    background: #c90c2a;
    transform: translateY(-3px);
}

/* ===== BOTTOM STATISTICS ===== */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    text-align: center;
}

.trust-item {
    flex: 1 1 180px;
    padding: 0 18px;
}

.trust-item strong {
    display: block;
    margin-bottom: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

.trust-item small {
    color: #c6d7ff;
    font-size: 12px;
}

/* ===== SLIDER DOTS HIDE ===== */
.hero-dots {
    display: none;
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-section {
        min-height: 620px;
        padding: 90px 18px 50px;
    }

    .hero-content h1 {
        font-size: clamp(32px, 8vw, 48px);
        line-height: 1.12;
    }

    .hero-badge {
        font-size: 10px;
        letter-spacing: 1px;
        margin-bottom: 22px;
    }

    .hero-text {
        font-size: 14px;
        line-height: 1.7;
    }

    .hero-buttons .btn {
        padding: 15px 28px;
    }

    .hero-trust {
        gap: 20px 0;
    }

    .trust-item {
        flex: 1 1 130px;
        padding: 0 8px;
    }

    .trust-item strong {
        font-size: 14px;
    }
}
/* =========================================================
   SECTION HEADINGS (red + underline)
========================================================= */
.section-heading h2 {
    margin: 0 0 18px;
    font-size: clamp(26px, 3.4vw, 38px);
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--blue);
}
.section-heading h2::after {
    content: "";
    display: block;
    width: 70px; height: 4px;
    margin-top: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--red), var(--pink));
}
.section-heading.text-center h2::after { margin-left: auto; margin-right: auto; }
.section-heading p { margin: 0; font-size: 17px; line-height: 1.8; color: var(--text); }

/* =========================================================
   RECRUITMENT SOLUTIONS FOR  (white bg)
========================================================= */
.solutions-section { padding: 70px 24px; background: #ffffff; }


.section-heading h2 span {
  position: relative;
  padding-bottom: 12px;
}

.service-card {
  position: relative;
  height: 100%;
  background: var(--white);
  border-radius: 20px;
  padding: 36px 26px 30px;
  text-align: center;
  border-top: 4px solid var(--red);
  box-shadow: 0 10px 30px rgba(27, 31, 75, 0.07);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 40px rgba(27, 31, 75, 0.14);
}

.card-no {
  position: absolute;
  top: 10px;
  right: 18px;
  font-family: "Outfit", sans-serif;
  font-size: 54px;
  font-weight: 800;
  color: rgba(27, 31, 75, 0.06);
  line-height: 1;
}

/* Icon: red gradient circle */
.service-icon {
  width: 78px;
  height: 78px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: linear-gradient(135deg, #f0334b, var(--red-dark));
  color: var(--white);
  font-size: 32px;
  box-shadow: 0 10px 22px rgba(224, 33, 58, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover .service-icon {
  transform: rotate(-8deg) scale(1.08);
  box-shadow: 0 14px 28px rgba(224, 33, 58, 0.45);
}

.service-card h3 {
  font-family: "Outfit", sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 10px;
}

.service-card p {
  font-size: 14px;
  line-height: 1.8;
  color: var(--text);
  margin: 0;
}

/* Bold tagline: red (Banking on the Best, Recruiting for Financial Success, etc.) */
.service-card p strong {
  color: var(--red);
  font-weight: 700;
}

@media (max-width: 600px) {
  .solutions-section { padding: 44px 18px; }
}
/* =========================================================
   OUR PURPOSE  (white bg)
========================================================= */
.purpose-section {
    padding: 60px 0 90px;
    background: #fff;
}
.purpose-image img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
}

/* =====================================================
   11. FOOTER
===================================================== */
.site-footer {
    padding: 70px 0 0;
    background:#000080;
    color: #e0e7ff;
}

.footer-heading h2 {
    text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 40px;
}
.footer-heading h2::after {
    content: "";
    display: block;
    width: 70px; height: 4px;
    margin: 16px auto 0;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--red), var(--pink));
}

.footer-contact-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px 56px;
}
.footer-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    max-width: 330px;
}
.footer-contact-item > i {
    flex-shrink: 0;
    font-size: 24px;
    color: #fca5a5;
    margin-top: 2px;
}
.footer-contact-item h5 {
    font-size: 1.30rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: 7px;
}
.footer-contact-item p {
    font-size: 1.rem;
    line-height: 1.8;
    color: #e0e7ff;
}
.footer-contact-item a {
    font-size: 1.0rem;
    color: #e0e7ff;
    transition: color .25s;
}
.footer-contact-item a:hover { color: #fca5a5; }

.footer-bottom {
    margin-top: 48px;
    padding: 20px 0;
    text-align: center;
    font-size: .9rem;
    color: #c7d2fe;
    border-top: 1px solid rgba(255, 255, 255, .15);
}

/* text links */
.text-link {
    color: var(--red-dark);
    font-weight: 600;
    transition: color .25s;
}
.text-link:hover { color: var(--navy); }



/* =========================================================
   RESPONSIVE
========================================================= */
@media (max-width: 991px) {
    .home-navbar .navbar-collapse {
        margin-top: 12px;
        padding: 12px 0;
        border-top: 1px solid rgba(0, 0, 0, .08);
    }
    .home-navbar .nav-link.active::after { display: none; }
    .hero-section { padding: 120px 0 70px; min-height: auto; }
    .solutions-section { padding: 70px 0 40px; }
    .purpose-section   { padding: 40px 0 70px; }
    .footer-image img {
        -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
                mask-image: linear-gradient(180deg, transparent 0%, #000 25%);
    }
}
@media (max-width: 575px) {
    .logo-prk  { font-size: 22px; }
    .logo-text { font-size: 15px; }
    .hero-trust { gap: 22px; }
    .hero-buttons .btn { width: 100%; justify-content: center; }
}

.service-body h3 {
    font-size: 26px;
}
.service-body p {
    font-size: 16px;
    line-height: 1.6;
}