* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  color: #243d1d;
  background: #fff;
}

.container {
  max-width: 1180px;
  margin: auto;
  padding: 0 20px;
}

.hero {
  height: 760px;
  background: url("../img/hero.jpg") center/cover;
  position: relative;
  color: #fff;
}

.overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.hero-grid {
  position: relative;
  z-index: 2;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 373px;
  gap: 40px;
  align-items: center;
}

.hero h1 {
  font-size: 36px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 40px;
  margin: 0;
}

.hero-subtitle {
  margin-top: 20px;
  font-size: 20px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  line-height: 24px;
  max-width: 600px;
}

.features {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(2, 290px);
  gap: 25px 40px;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 14px;
}

.feature-item .icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.feature-item img {
  width: 40px;
  height: 40px;
}

.feature-item span {
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  line-height: 19px;
}

.hero-form {
  margin-top: 40px;
}

.form-row {
  display: flex;
  gap: 10px;
}

.hero-form input {
  width: 100%;
  height: auto;
  padding: 16px 20px;
  max-width: 320px;
  border-radius: 10px;
  border: 0;
  font-size: 16px;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  line-height: 19px;
  color: #303030;
}

.hero-form button {
  margin-top: 10px;
  width: 100%;
  max-width: 650px;
  padding: 18px 20px;
  border-radius: 10px;
  background: #28431b;
  color: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  font-size: 16px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 19px;
}

.hero-form button img {
  width: 20px;
  height: 20px;
}

.hero-note {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  line-height: 17px;
}

.hero-note img {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.project-card {
  width: 373px;
  padding: 20px;
  border-radius: 16px;
  background: #fbf9f7;
  display: flex;
  flex-direction: column;
}

.project-img {
  width: 333px;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
}

.project-card h3 {
  margin: 18px 0 12px;
  color: #28431b;
  font-size: 24px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 26px;
}

.project-meta {
  display: flex;
  gap: 20px;
}

.project-meta div {
  display: flex;
  align-items: center;
  gap: 6px;
}

.project-meta img {
  width: 20px;
  height: 20px;
}

.project-meta span {
  color: #303030;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  line-height: 19px;
}

.gallery {
  padding: 70px 20px;
  max-width: 1220px;
}

.gallery-title {
  color: #28431b;
  font-size: 36px;
  text-align: center;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 43px;
  margin: 0;
}

.gallery-bullets {
  margin-top: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: nowrap;
}

.gallery-bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
  color: #2c2c2c;
  font-size: 18px;
  font-family: "Manrope", sans-serif;
  font-weight: 500;
  line-height: 22px;
}

.gallery-bullet img {
  width: 40px;
  height: 40px;
}

.photos {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 380px);
  gap: 10px;
  justify-content: center;
}

.gallery-card {
  position: relative;
  margin: 0;
  width: 380px;
  padding: 10px 20px 20px;
  max-width: 380px;
  min-height: 260px;
  border-radius: 20px;
  overflow: hidden;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

.gallery-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s;
}

.gallery-card:hover img {
  transform: scale(1.05);
}

.gallery-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
}

.gallery-card figcaption {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  color: #fbf9f7;
  font-size: 18px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  line-height: 22px;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.lightbox.active {
  display: flex;
}

.lightbox img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 20px;
}

.catalog {
  margin-top: 60px;
  margin-bottom: 70px;
  padding: 50px 60px;
  border-radius: 20px;
  background: #244b1c;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.catalog-content {
  max-width: 520px;
}

.catalog-content h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  text-align: left;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 40px;
}

.catalog-content p {
  margin-top: 30px;
  color: #fbf9f7;
  font-size: 18px;
  font-style: normal;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  line-height: 22px;
}

.catalog-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 510px;
}

.catalog-form input {
  width: 100%;
  height: auto;
  padding: 16px 20px;
  max-width: 510px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: #244b1c;
  color: #fff;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  line-height: 19px;
}

.catalog-form input::placeholder {
  color: #fff;
}

.catalog-form button {
  width: 100%;
  border: none;
  cursor: pointer;
  height: auto;
  padding: 18px 20px;
  max-width: 510px;
  border-radius: 10px;
  background: #c68a2e;
  color: #fbf9f7;
  font-size: 16px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 19px;
}

.check {
  padding: 70px 20px;
  text-align: center;
}

.check-label {
  color: #303030;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  line-height: 19px;
}

.check h2 {
  margin: 20px auto 0;
  max-width: 850px;
  color: #303030;
  font-size: 30px;
  text-align: center;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 33px;
}

.check-btn {
  margin: 40px auto 0;
  width: 350px;
  height: auto;
  padding: 18px 20px;
  max-width: 350px;
  border-radius: 10px;
  background: #28431b;
  color: #fbf9f7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 16px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 19px;
  border: none;
  cursor: pointer;
}

.check-btn img {
  width: 19px;
  height: 19px;
}

.check-btn span {
  display: flex;
  align-items: center;
}

.price {
  background: url("../img/bg_footer.jpg") center/cover;
  position: relative;
  padding-top: 120px;
  padding-bottom: 40px;
  color: white;
}

.price-container {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 50px;
}

.price-content {
  max-width: 520px;
}

.price h2 {
  margin: 0;
  color: #fff;
  font-size: 36px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 43px;
}

.price-list {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.price-list div {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fbf9f7;
  font-size: 18px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  line-height: 22px;
}

.price-list img {
  width: 25px;
  height: 19px;
  object-fit: contain;
}

.price-form {
  width: 580px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-form input {
  width: 100%;
  padding: 16px 20px;
  max-width: 580px;
  border: 1px solid #fff;
  border-radius: 10px;
  background: transparent;
  color: #fff;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  font-weight: 400;
  line-height: 19px;
}

.price-form input::placeholder {
  color: #fff;
}

.price-form button {
  width: 100%;
  padding: 18px;
  max-width: 580px;
  border-radius: 10px;
  background: #c68a2e;
  color: #fbf9f7;
  font-size: 16px;
  font-family: "Onest", sans-serif;
  font-weight: 700;
  line-height: 19px;
  border: none;
  cursor: pointer;
}

/* FOOTER */
.footer {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer-logo img {
  width: 140px;
  height: 62px;
  object-fit: contain;
}

.footer-cols {
  display: flex;
  gap: 100px;
}

.footer-contact,
.footer-links {
  color: #fff;
  font-size: 16px;
  font-family: "Manrope", sans-serif;
  line-height: 19px;
}

.footer-contact a,
.footer-links a {
  color: #fff;
  text-decoration: none;
}

.footer-contact {
  font-weight: 600;
}

.footer-links {
  font-weight: 400;
}

.footer-contact div,
.footer-links div {
  margin-bottom: 8px;
}

/* ===============================
   ADAPTIVE FINAL
================================ */


@media(min-width:1400px){

.container{
    max-width:1280px;
}

.hero-grid{
    gap:70px;
}

}


@media(max-width:1200px){
.container{
    padding-left:30px;
    padding-right:30px;
}
.hero-grid{
    grid-template-columns:1fr 360px;
    gap:30px;
}

.project-card{
    width:360px;
}

.project-img{
    width:320px;
}

.gallery-bullets{
gap:20px;
}

.gallery-bullet{
font-size:16px;
}

.photos{
grid-template-columns:repeat(2,380px);
}
.catalog{
padding:40px;
}

.price-container{
gap:30px;
}
}


@media(max-width:1024px){
.hero{
height:auto;
padding:80px 0;
}
.hero-grid{
grid-template-columns:1fr;
}
.hero-text{
max-width:700px;
}

.project-card{
width:373px;
margin-top:30px;
}

.features{
grid-template-columns:repeat(2,1fr);
}

.gallery-bullets{
flex-wrap:wrap;
justify-content:center;
}

.photos{
grid-template-columns:repeat(2,1fr);
}
.gallery-card{
width:100%;
}

.catalog{
flex-direction:column;
align-items:flex-start;
}

.catalog-form{
width:100%;
max-width:510px;
}

.price-container{
flex-direction:column;
}

.price-form{
width:100%;
max-width:580px;
}
.footer-cols{
gap:40px;
}
}


@media(max-width:768px){

*{
    max-width:100%;
}

body{
    overflow-x:hidden;
}

.container{
padding-left:20px;
padding-right:20px;
}

.hero{
padding:50px 0 40px;
}

.hero-grid{
display:flex;
flex-direction:column;
align-items:stretch;
gap:25px;
}

.hero h1{
font-size:28px;
line-height:32px;
}

.hero-subtitle{
font-size:17px;
line-height:22px;
}

.features{
grid-template-columns:1fr;
gap:18px;
margin-top:30px;
}

.feature-item{
align-items:center;
}

.form-row{
flex-direction:column;
}

.hero-form{
margin-top:30px;
}

.hero-form input,
.hero-form button{
max-width:none;
width:100%;
}


.hero-note{
font-size:13px;
line-height:16px;
}

.project-card{
width:100%;
margin-top:10px;
}

.project-img{
width:100%;
height:220px;
}

.gallery{
padding-top:50px;
}

.gallery-title{
font-size:26px;
line-height:32px;
}

.gallery-bullets{
margin-top:30px;
flex-direction:column;
align-items:flex-start;
gap:20px;
}



.gallery-bullet{
font-size:16px;
white-space:normal;
}

.photos{
grid-template-columns:1fr;
margin-top:20px;
}

.gallery-card{
width:100%;
min-height:240px;
}


.catalog{
margin:40px 20px;
padding:30px 20px;
}

.catalog-content h2{
font-size:26px;
line-height:32px;
}

.catalog-content p{
font-size:16px;
line-height:20px;
}

.catalog-form{
width:100%;
}

.catalog-form input,
.catalog-form button{
max-width:none;
}


.check{
padding:50px 20px;
}

.check h2{
font-size:24px;
line-height:29px;
}

.check-btn{
width:100%;
max-width:350px;
}



.price{
padding-top:60px;
}

.price h2{
font-size:28px;
line-height:34px;
}

.price-list div{
font-size:16px;
}

.price-form{
width:100%;
}

.price-form input,
.price-form button{
max-width:none;
}

.footer{
flex-direction:column;
align-items:flex-start;
gap:30px;
}


.footer-cols{
flex-direction:column;
gap:20px;

}

.footer-logo img{
width:120px;
height:auto;
}

}



@media(max-width:420px){
.hero h1{
font-size:24px;
line-height:29px;

}

.hero-subtitle{
font-size:15px;
}

.feature-item span{
font-size:14px;
}

.project-card h3{
font-size:22px;
}

.gallery-title{
font-size:22px;
}

.gallery-card{
min-height:210px;
}

.catalog{
margin-left:10px;
margin-right:10px;
}

.price h2{
font-size:24px;
}

.footer-contact,
.footer-links{
font-size:14px;
}

}