/* =========================
GLOBAL
========================= */

body{
font-family:'Open Sans',sans-serif;
margin:0;
background:#f5f7fa;
color:#1f2933;
}

h1,h2,h3{
font-family:'Montserrat',sans-serif;
margin-top:0;
}

section{
padding:80px 0;
}

.container{
width:1100px;
margin:auto;
}

a{
transition:all .2s ease;
}

.team-premium {
  padding: 80px 0;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 50px;
  margin-top: 40px;
}

.team-card.premium {
  display: flex;
  gap: 30px;
  align-items: center;
  background: #ffffff;
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.04);
  transition: all 0.35s ease;
  border: 1px solid rgba(0,0,0,0.04);
}

.team-card.premium:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 60px rgba(0,0,0,0.08);
}

/* Subtle gradient border glow on hover */
.team-card.premium:hover {
  border: 1px solid rgba(59,130,246,0.2);

}
.why-us {
  padding: 80px 0;
  background: #ffffff;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 40px;
}

.why-card {
  text-align: center;
  padding: 30px;
  border-radius: 16px;
  background: #f9fafb;
  transition: all 0.3s ease;
}

.why-card:hover {
  transform: translateY(-5px);
  background: #ffffff;
  box-shadow: 0 15px 40px rgba(0,0,0,0.06);
}

.why-card i {
  font-size: 28px;
  margin-bottom: 15px;
  color: #3b82f6;
}

.why-card h3 {
  margin-bottom: 10px;
}
.team-image img {
  width: 160px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.team-content h3 {
  margin-bottom: 5px;
}

.team-content .role {
  font-weight: 600;
  color: #666;
  margin-bottom: 10px;
}

.linkedin {
  display: inline-block;
  margin-top: 15px;
  color: #0077b5;
  font-weight: 600;
  text-decoration: none;
}

.linkedin i {
  margin-right: 6px;
}

.linkedin:hover {
  opacity: 0.8;
}


/* =========================
HEADER
========================= */

/* =========================
SCROLL HEADER EFFECT
========================= */

.logo img{
height:40px;
transition:all .3s ease;
}

.header{
background:#0B2A4A;
padding:20px 0;
position:sticky;
top:0;
z-index:1000;
transition:all .3s ease;
}

.header.scrolled{
padding:10px 0;
box-shadow:0 6px 20px rgba(0,0,0,0.15);
}

.header.scrolled .logo img{
height:32px;
}

.header{
background:#0B2A4A;
padding:20px 0;
position:sticky;
top:0;
z-index:1000;
}

.logo{
display:flex;
align-items:center;
gap:10px;
color:white;
font-weight:bold;
}

.nav{
display:flex;
justify-content:space-between;
align-items:center;
}

nav{
display:flex;
align-items:center;
}

nav a{
color:white;
margin-left:20px;
text-decoration:none;
}

nav a:hover{
opacity:.7;
}

.nav-cta{
background:#1FB6A6;
padding:8px 14px;
border-radius:6px;
}

/* mobile hamburger */

.menu-toggle{
display:none;
font-size:28px;
color:white;
cursor:pointer;
}


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

.hero{
background:linear-gradient(135deg,#0B2A4A 0%,#1E73BE 60%,#1FB6A6 100%);
color:white;
padding:120px 0;
}

.hero-grid{
display:grid;
grid-template-columns:1fr 1fr;
align-items:center;
gap:40px;
}

.hero-image img{
width:100%;
animation:float 6s ease-in-out infinite;
}

@keyframes float{
0%{transform:translateY(0)}
50%{transform:translateY(-10px)}
100%{transform:translateY(0)}
}

.pain {
  background: #fff;
  text-align: center;
}

.pain-card {
  background: #fff5f5;
  border-left: 4px solid #ff4d4d;
  padding: 25px;
  border-radius: 8px;
}

.testimonials {
  background: #f5f7fa;
  text-align: center;
}

.testimonial-card {
  background: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  font-style: italic;
}

.testimonial-card h4 {
  margin-top: 15px;
  font-style: normal;
  color: #1FB6A6;
}
/* =========================
PAGE HERO
========================= */

.page-hero{
background:linear-gradient(135deg,#0B2A4A 0%,#1E73BE 60%,#1FB6A6 100%);
color:white;
padding:100px 0;
text-align:center;
}

.page-hero h1{
font-size:42px;
margin-bottom:10px;
}

.page-hero p{
font-size:18px;
max-width:600px;
margin:auto;
}


/* =========================
GRID SYSTEM
========================= */

.path-section {
  background: white;
  text-align: center;
}

.path-card {
  background: #f5f7fa;
  padding: 40px;
  border-radius: 12px;
  transition: 0.3s ease;
}

.path-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.1);
}

.path-card.highlight {
  border: 2px solid #1FB6A6;
  background: #e9f7f4;
}

.grid-3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.grid-2{
display:grid;
grid-template-columns:1fr 1fr;
gap:40px;
}


/* =========================
CARDS
========================= */

.card{
background:white;
padding:30px;
border-radius:10px;
box-shadow:0 4px 12px rgba(0,0,0,.1);
}

.problem-card,
.support-card,
.step-card{
background:#f5f7fa;
padding:35px;
border-radius:10px;
transition:.25s ease;
}

.problem-card:hover,
.support-card:hover,
.step-card:hover{
transform:translateY(-6px);
box-shadow:0 10px 25px rgba(0,0,0,.08);
}


/* =========================
BUTTONS
========================= */

.btn,
.btn-primary{
display:inline-block;
background:#1FB6A6;
color:white;
padding:12px 25px;
border-radius:6px;
text-decoration:none;
}

.btn:hover,
.btn-primary:hover{
background:#17a394;
transform:translateY(-2px);
box-shadow:0 8px 16px rgba(0,0,0,.15);
}


/* =========================
ICONS
========================= */

.icon-circle{
width:60px;
height:60px;
border-radius:50%;
background:#e9f7f4;
display:flex;
align-items:center;
justify-content:center;
margin:0 auto 20px auto;
}

.icon-circle i{
width:28px;
height:28px;
color:#1FB6A6;
}


/* =========================
CHECKLIST
========================= */

.checklist li{
margin-bottom:10px;
}


/* =========================
TRUSTED LOGOS
========================= */

.trusted{
background:white;
padding:40px 0;
border-bottom:1px solid #eee;
}

.trusted-title{
text-align:center;
font-size:16px;
color:#666;
margin-bottom:30px;
letter-spacing:1px;
}

.trusted-logos{
display:flex;
justify-content:center;
align-items:center;
gap:60px;
flex-wrap:wrap;
}

.trusted-logos img{
height:40px;
opacity:.7;
transition:.2s ease;
animation:fadeIn 1s forwards;
}

.trusted-logos img:hover{
opacity:1;
}

@keyframes fadeIn{
to{opacity:.7;}
}


/* =========================
PRICING
========================= */

.pricing-section{
padding:100px 0;
}

.pricing-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
margin-top:40px;
}

.pricing-card{
background:white;
padding:40px;
border-radius:10px;
text-align:center;
box-shadow:0 6px 18px rgba(0,0,0,.08);
position:relative;
transition:.25s ease;
}

.pricing-card:hover{
transform:translateY(-8px);
box-shadow:0 16px 30px rgba(0,0,0,.15);
}

.pricing-card ul{
text-align:left;
margin:20px 0;
}

.price{
font-size:40px;
font-weight:bold;
margin:10px 0;
}

.per-user{
color:#666;
margin-bottom:20px;
}

.featured{
border:3px solid #1FB6A6;
transform:scale(1.05);
}

.badge{
position:absolute;
top:-12px;
left:50%;
transform:translateX(-50%);
background:#1FB6A6;
color:white;
padding:6px 12px;
border-radius:20px;
font-size:12px;
}


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

.cta{
background:#0B2A4A;
color:white;
text-align:center;
padding:100px 0;
}


/* =========================
SECURITY STATS
========================= */

.security-stat{
background:#0B2A4A;
color:white;
padding:100px 0;
}

.stat-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}

.stat-highlight{
font-size:22px;
font-weight:bold;
margin:20px 0;
color:#1FB6A6;
}

.stat-features{
display:grid;
grid-template-columns:1fr 1fr;
gap:25px;
}

.stat-item{
display:flex;
align-items:center;
gap:15px;
}


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

.contact-section{
padding:100px 0;
background:white;
}

.contact-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:start;
}

.contact-item{
display:flex;
align-items:center;
gap:15px;
margin-top:20px;
}

.contact-form form{
display:flex;
flex-direction:column;
gap:15px;
}

.contact-form input,
.contact-form textarea{
padding:12px;
border-radius:6px;
border:1px solid #ddd;
font-family:'Open Sans',sans-serif;
}

.contact-form textarea{
height:120px;
resize:none;
}


/* =========================
SUPPORT PAGE
========================= */

.support-section{
padding:100px 0;
background:white;
text-align:center;
}


/* =========================
FOOTER
========================= */
.legal {
  max-width: 800px;
  margin: 60px auto;
  line-height: 1.7;
}

.legal h2 {
  margin-top: 30px;
}

.footer{
background:#0B2A4A;
color:white;
padding:60px 0;
}

.footer-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:40px;
}

/* keep links white even after click */

.footer a,
.footer a:visited,
.footer a:active{
color:white;
text-decoration:none;
}

.footer a:hover{
opacity:.8;
}

.footer-bottom{
text-align:center;
margin-top:40px;
}
.nav-icons a i {
  font-size: 16px;
}

.team-image {
  flex-shrink: 0;
}

.team-image img {
  width: 200px;
  height: 240px;
  object-fit: cover;
  object-position: top; /* keeps face centered nicely */
  border-radius: 16px;
  
  /* Premium touch */
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

.team-card.premium:hover .team-image img {
  transform: scale(1.03);
}

.team-image {
  position: relative;
}

.team-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 16px;
  background: linear-gradient(
    to top,
    rgba(15,23,42,0.15),
    transparent 40%
  );
}
.team-image {
  position: relative;
}

.linkedin-badge {
  position: absolute;
  bottom: 12px;
  right: 12px;

  width: 36px;
  height: 36px;
  background: #0077b5;
  color: #fff;

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

  border-radius: 50%;
  font-size: 16px;

  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
}

.linkedin-badge:hover {
  transform: scale(1.1);
  background: #005f8d;
}

.team-card.premium:hover .linkedin-badge {
  transform: scale(1.15);
}

.team-image img {
  width: 200px;
  height: 240px;
  object-fit: cover;

  /* 👇 THIS FIXES STEPH */
  object-position: center 20%;

  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

/* =========================
RESPONSIVE
========================= */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
    .why-grid {
    grid-template-columns: 1fr;
  }
  .team-image img {
    width: 100%;
    height: auto;
  } 

  .team-card.premium {
    flex-direction: column;
    text-align: center;
  }

  .team-image img {
    width: 140px;
    height: 140px;
  }
}
@media (max-width:900px){

.container{
width:90%;
}

/* grids collapse */

.hero-grid,
.grid-2,
.grid-3,
.footer-grid,
.pricing-grid,
.stat-grid,
.contact-grid{
grid-template-columns:1fr;
}

/* navigation */

.menu-toggle{
display:block;
}

nav{
display:none;
flex-direction:column;
width:100%;
margin-top:15px;
}

nav a{
margin:10px 0;
}

nav.active{
display:flex;
}

/* header stack */

.nav{
flex-wrap:wrap;
}

/* hero spacing */

.hero{
padding:80px 0;
}

/* remove scaling on pricing */

.featured{
transform:none;
}

}
/* HEADER ICONS FIX */
.nav-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 20px;
}

/* ICON CONTAINER */
.nav-icons a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: white;
  transition: all 0.25s ease;

  /* THIS FIXES ALIGNMENT */
  line-height: 0;
  padding: 0;
}
.booking-wrapper {
  margin-top: 30px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0,0,0,0.15);
  background: white;
}

/* ICON ITSELF */
.nav-icons a i,
.nav-icons a svg {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;
  font-size: 16px;

  margin: 0; /* important */
}
.nav-icons a i {
  width: 18px;
  height: 18px;
}

/* Hover colours */
.nav-icons a:hover {
  transform: translateY(-2px);
}

.nav-icons a:nth-child(1):hover {
  background: #25D366; /* phone */
}

.nav-icons a:nth-child(2):hover {
  background: #0077b5; /* linkedin */
}

.nav-icons a:nth-child(3):hover {
  background: #1877f2; /* facebook */
}

.nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
}

.nav-icons a:hover {
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

.footer-icons {
  display: flex;
  gap: 10px;
  margin-top: 10px;
}

.footer-icons a {
  width: 36px;
  height: 36px;
  background: #2a2a2a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.footer-icons a:hover {
  background: #0077b5;
}

.nav-icons a:nth-child(1):hover,
.footer-icons a:nth-child(1):hover { background: #25D366; }

.nav-icons a:nth-child(2):hover,
.footer-icons a:nth-child(2):hover { background: #0077b5; }

.nav-icons a:nth-child(3):hover,
.footer-icons a:nth-child(3):hover { background: #1877f2; }

.top-bar {
  background: #0a2540;
  color: white;
  font-size: 14px;
  padding: 8px 0;
  position: sticky;
  top: 0;
  z-index: 999;
}

.top-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.top-call {
  color: #00ffcc;
  font-weight: bold;
  text-decoration: none;
  margin-left: 10px;
}

.top-call:hover {
  text-decoration: underline;
}

.top-icons {
  display: flex;
  gap: 10px;
}

.top-icons a {
  color: white;
  transition: 0.3s;
}

.top-icons a:hover {
  color: #00ffcc;
}


.top-call {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}


/* Gradient accents */
:root {
  --primary: #0f172a;
  --accent: #3b82f6;
  --accent-light: #60a5fa;
}

/* Subtle gradient background */
.team-premium {
  position: relative;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
  overflow: hidden;
}

/* Background shapes */
.team-premium::before {
  content: "";
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(59,130,246,0.08) 0%, transparent 70%);
  top: -150px;
  left: -150px;
  z-index: 0;
}

.team-premium::after {
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(96,165,250,0.08) 0%, transparent 70%);
  bottom: -150px;
  right: -150px;
  z-index: 0;
}

/* Ensure content sits above shapes */
.team-premium .container {
  position: relative;
  z-index: 1;
}

/* Accent line under headings */
.team-premium h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  margin-top: 10px;
  background: linear-gradient(90deg, var(--accent), var(--accent-light));
  border-radius: 2px;
}