:root{
  --green: #19432e;
  --blue: #274A6F;
  --offwhite: #F8F7F3;
  --text: #111111;
}

body{
  font-family: 'Inter', sans-serif;
  background: var(--offwhite);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Header */
.site-header{
  background: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.navbar-nav{
	gap:20px;
}
.navbar-nav li a{
	font-size:18px;
	color:#111;
}
.navbar-nav li a:hover{
	color: var(--green);
}
/* Hero */
.hero {
  padding: 5.5rem 0;
}
.hero h1{
  font-family: 'Playfair Display', serif;
  font-size: 50px;
  margin-bottom: 20px;
}
.hero .lead {
  font-size: 1.05rem;
  color:#333;
  margin-bottom: 1.1rem;
}
.cta-btn{
  background: var(--green);
  border: none;
  padding: .75rem 1.6rem;
  color:#fff;
  border-radius: .5rem;
  font-weight:600;
  text-decoration:none;
}
.cta-btn:hover{ 
	background: var(--blue);
	color:#fff; 
}

.hero-image{
  border-radius: .8rem;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(20,20,20,0.08);
}
.hero-image img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Feature ticks */
.ticks p{ margin: .35rem 0; font-weight:500; }

/* What I do - cards */
.services .card{
  border: none;
  border-radius: .8rem;
  box-shadow: 0 8px 30px rgba(12,12,12,0.05);
  transition: transform .28s ease, box-shadow .28s ease;
}
.services .card:hover{
  transform: translateY(-8px);
  box-shadow: 0 16px 44px rgba(12,12,12,0.08);
}
.sec-title{
	font-family: 'Playfair Display', serif;
}
.card-img img{
	border-top-left-radius:.8rem;
	border-top-right-radius:.8rem;
}
.card-body{
	padding:25px;
}
.services h3{
  font-family: 'Playfair Display', serif;
  color: var(--green);
  margin-bottom:12px;
  font-size: 24px;
}

/* Timeline / How I Work */
.timeline{
  display:flex;
  gap:1.25rem;
  align-items:stretch;
  flex-wrap:wrap;
}
.timeline .step{
  background:#fff;
  border-left: 4px solid var(--green);
  padding: 1.1rem;
  border-radius:.6rem;
  box-shadow: 0 8px 30px rgba(12,12,12,0.04);
  flex:1 1 250px;
  min-width:220px;
}
.timeline h3{ 
	font-family: 'Playfair Display', serif;
	color:var(--blue);
	margin-bottom:.5rem;
	font-size: 20px;
}

.quote {
  margin-top:1.25rem;
  font-style: italic;
  color:#444;
  padding-left:1rem;
  padding-top:.8rem;
}

/* Contact split */

form.contact-form{
  background:#fff; 
  padding:40px;
  border-radius:.8rem;
  box-shadow: 0 10px 30px rgba(12,12,12,0.05);
}
.contact-form .form-control{
	padding:12px 15px;
}
.form-control:focus{ 
	box-shadow: none; 
	border-color: var(--green); 
}
.responce{
	margin: 0;
    padding: 15px;
    margin-top: 20px;
    background: #e2ffe2;
    border-radius: .5rem;
	display: none;
}
/* Footer */
footer{ 
	padding:2.25rem 0;
	color:#555; 
	background:#fff;
}
.footer p a{
	color:#333;
	text-decoration:none;
}
@media (prefers-color-scheme: dark) {
  body {
    background: var(--offwhite) !important;
	color: var(--text) !important;
  }
}
/* Responsive tweaks */
@media (min-width: 1400px) {
	.hero h1{
		font-size: 58px;
	}
}
@media (max-width: 991px){
  .hero h1{ font-size: 2rem; }
  .brand{ font-size:1.4rem; }
  .navbar-toggler{
		border-radius: 0;
		padding: 6px;
	}
	.navbar-toggler:focus{
		box-shadow:none;
	}
	.navbar-nav{
		padding:20px 0;
	}
	.navbar-nav li a{
		padding:0;
	}
}
@media (max-width: 767px){
  form.contact-form{
	  padding: 30px 20px;
  }
}