/* Reset & Body */
* { margin:0; padding:0; box-sizing:border-box; font-family:'Poppins',sans-serif; }
body { line-height:1.6; color:#333; scroll-behavior:smooth; background:#fdfdfd; }
a { text-decoration:none; color:inherit; }
img { display:block; max-width:100%; height:auto; }

/* Header */
header { background:#0d47a1; color:#fff; padding:15px 0; position:fixed; width:100%; top:0; z-index:1000; transition:0.3s; }
header.scrolled { background:#0b3a8b; }
header .container { display:flex; justify-content:space-between; align-items:center; max-width:1200px; margin:auto; padding:0 20px; }
header nav a { margin-left:20px; font-weight:600; transition:0.3s; }
header nav a:hover { text-decoration:underline; color:#ff9800; }

/* Hero Section */
/* .hero { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; height:100vh; background:url('ontario-mortgage-broker-hero.webp') no-repeat center center/cover; color:#fff; position:relative; width:100vw; } */
.hero{position:relative;height:100vh;width:100vw;display:flex;justify-content:center;align-items:center;text-align:center;overflow:hidden;color:#fff}.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:-1}.hero-content{position:relative;z-index:1;max-width:700px;animation:fadeIn 1s ease forwards;opacity:0}.hero h1{font-size:3rem;margin-bottom:20px}.hero p{font-size:1.2rem;margin-bottom:20px}.hero .cta{padding:12px 25px;background:#ff9800;color:#fff;font-weight:600;border-radius:5px;transition:.3s}.hero .cta:hover{transform:scale(1.05)}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}100%{opacity:1;transform:translateY(0)}}
.hero::after { content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); }
.hero-content { position:relative; z-index:1; max-width:700px; animation:fadeIn 1s ease forwards; opacity:0; }
.hero h1 { font-size:3rem; margin-bottom:20px; }
.hero p { font-size:1.2rem; margin-bottom:20px; }
.hero .cta { padding:12px 25px; background:#ff9800; color:#fff; font-weight:600; border-radius:5px; transition:0.3s; }
.hero .cta:hover { transform:scale(1.05); }

/* Keyframes */
@keyframes fadeIn {0%{opacity:0;transform:translateY(20px);}100%{opacity:1;transform:translateY(0);}}

/* Sections */
section { padding:80px 20px; max-width:1200px; margin:auto; }
h2 { text-align:center; margin-bottom:40px; font-size:2rem; color:#0d47a1; }

/* About Section */
.about { 
  display:flex; 
  flex-wrap:wrap; 
  align-items:center; 
  gap:20px; 
  justify-content:space-between; 
}
.about .text { 
  flex:1; 
  font-size:1rem; 
  line-height:1.8; 
  order:1; 
  padding-right:20px; 
}
.about img { 
  flex:1; 
  border-radius:12px; 
  transition:transform 0.5s; 
  order:2; 
  max-width:100%; 
  max-height:400px; 
  object-fit:cover; 
}
.about img:hover { transform:scale(1.05) rotate(1deg); }

/* Services */
.services { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:20px; }
.service-card { background:#f1f1f1; padding:25px; border-radius:12px; text-align:center; transition: transform 0.3s, box-shadow 0.3s; }
.service-card:hover { transform:translateY(-10px); box-shadow:0 10px 25px rgba(0,0,0,0.2); }
.service-card h3 { margin-bottom:10px; color:#1976d2; }

/* Calculator */
.calculator { max-width:600px; margin:auto; background:#e3f2fd; padding:30px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.15); transition:transform 0.3s; }
.calculator:hover { transform:translateY(-5px); }
.calculator input { width:100%; padding:15px; margin:10px 0; border-radius:8px; border:1px solid #ccc; transition:0.3s; }
.calculator input:focus { border-color:#1976d2; box-shadow:0 0 10px rgba(25,118,210,0.3); }
.calculator button { padding:15px 25px; background:#1976d2; color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:0.3s; }
.calculator button:hover { background:#0d47a1; transform:scale(1.05); }
.calculator .result { margin-top:15px; font-weight:600; font-size:1.1rem; }

/* Reviews */
.reviews { text-align:center; }
.review-placeholder { background:#f1f1f1; padding:20px; border-radius:12px; margin:10px auto; max-width:600px; transition:transform 0.3s; }
.review-placeholder:hover { transform:scale(1.03); }

/* Contact Form */
 .contact form { max-width:600px; margin:auto; display:flex; flex-direction:column; background:#e3f2fd; padding:30px; border-radius:12px; box-shadow:0 10px 25px rgba(0,0,0,0.15); transition:transform 0.3s; }
.contact form:hover { transform:translateY(-5px); }
.contact input, .contact textarea { padding:15px; margin-bottom:20px; border-radius:8px; border:1px solid #ccc; transition:0.3s; }
.contact input:focus, .contact textarea:focus { border-color:#1976d2; box-shadow:0 0 12px rgba(25,118,210,0.3); }
.contact button { padding:15px 25px; background:#1976d2; color:#fff; border:none; border-radius:8px; cursor:pointer; font-weight:600; transition:0.3s; }
.contact button:hover { background:#0d47a1; transform:scale(1.05); } 



/* Footer */
footer { background:#000; color:#fff; padding:60px 20px 20px; font-size:0.9rem; }
.footer-container { display:flex; flex-wrap:wrap; gap:30px; max-width:1200px; margin:auto; justify-content:space-between; }
.footer-col { flex:1 1 200px; }
.footer-col h3 { margin-bottom:15px; color:#ff9800; }
.footer-col p, .footer-col ul, .footer-col a { margin-bottom:10px; color:#fff; }
.footer-col a { display:inline-block; transition:0.3s; }
.footer-col a:hover { color:#ff9800; text-decoration:underline; }
.footer-bottom { text-align:center; margin-top:40px; border-top:1px solid #333; padding-top:20px; color:#ccc; }



.footer-legal {
  text-align: center;
  margin-top: 20px;
}

.footer-legal a {
  color: #ccc;
  font-size: 0.9rem;
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: #ff9800;
  text-decoration: underline;
}

/* Responsive */
@media(max-width:768px){
.hero h1{font-size:2rem;}
.hero p{font-size:1rem;}
.about { flex-direction:column; }
.about .text, .about img { order:initial; padding:0; max-height:none; }
header .container { flex-direction:column; gap:10px; }
}
/* Responsive tweaks for Services section */
@media(max-width:768px){
  .services {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  .service-card {
    padding: 20px;
  }
}