body  {

  font-family: 'DM Sans', sans-serif;
  font-size: 19px;
  background:  #faf7f1;
  color: #23362f;
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  }

 main { flex: 1; }

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
  backdrop-filter: blur(10px);
padding:10px 40px;
background: linear-gradient(to right,  #3c3f3a, #7a8077ce);
color:white;
position:fixed;
top:0;
width:100%;
z-index:1000;
border-radius: 5px;

 }

.logo{
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'DM Sans', sans-serif;
    font-weight: 500;
}

.logo i.fa-city{
    color: #b6a863; /* architecture = strong */
}

.nav-links{
list-style:none;
display:flex;
gap:30px;
}

.nav-links a{
  text-decoration: none;
  color:white;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  opacity: 0.78;
  transition: opacity 0.2s, color 0.2s;
}

.nav-links a:hover{
color:#00ff9d;
}

.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
}
@media(max-width:768px){
.nav-links{
display:none;
flex-direction:column;
background: linear-gradient(to right,  #2f332c, #737a6eb2);
position:absolute;
top:70px;
right:0;
width:200px;
padding:20px;

border-radius: 8px;
}
.nav-links.show{
display:flex;
}
.menu-toggle{
display:block;
}
}


.hero{
    position: relative;
    width: 100%;
    min-height: 100vh;

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

    text-align: center;
    overflow: hidden;
background-color: #00ff9d;
    color: white;
}


.hero-image{
    position: absolute;
    width: 100%;
    height: 100%;

    object-fit: cover;

    top: 0;
    left: 0;
}

.hero-content{
    max-width: 850px;
    animation: fadeUp 1s ease forwards;
}


.hero-content h1{
    font-size: 5rem;
    line-height: 1.1;
    margin-bottom: 25px;
    font-weight: 700;
}


.hero-content h1 em{
    color: #00d084;
    font-style: normal;
}


.hero-sub{
    font-size: 1.2rem;
    line-height: 1.8;
    color: #f1f1f1;

    margin-bottom: 35px;

    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.hero-btn{
    display: inline-block;

    padding: 15px 38px;

    background: #00d084;
    color: white;

    text-decoration: none;
    font-weight: bold;

    border-radius: 50px;

    transition: 0.4s ease;
}


.hero-btn:hover{
    background: #00b36b;

    transform: translateY(-5px);

    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}

@keyframes fadeUp{

    from{
        opacity: 0;
        transform: translateY(40px);
    }

    to{
        opacity: 1;
        transform: translateY(0);
    }
}

    .hero-content h1{
        font-size: 3rem;
    }

    .hero-sub{
        font-size: 1rem;
    }
.intro{
padding:60px 40px;
text-align:center;
}
   .intro h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 350;
       line-height: 1.2;
    }
   .intro p {
       margin-top: 1rem;
      color:  #7a7a6e; 
       font-size: 0.9rem; 
      line-height: 1.8;
   }

.features-section {
    background: #f2ebe0; 
      padding: 112px 48px;
    }
.features-header {
      max-width: 1200px; 
      margin: 0 auto 64px;
      display: flex; justify-content: space-between;  
      align-items: flex-end;
    }

    .features-header h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(2rem, 3.5vw, 3rem);
      font-weight: 300;
      max-width: 420px;
    }

.features-header p {
      color: #7a7a6e; 
       font-size: 14.4px;
      line-height: 1.7;
       max-width: 300px; 
       text-align: flex-end;
    }

     .features-grid {
      max-width: 1200px; 
      margin: 0 auto;
      display: grid;
      grid-template-columns: 
      repeat(3, 1fr);
      gap: 24px ;
    }

.card {
      background: #f5f3ef;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s;
    }

.card ul{ list-style-position: inside;}


    .card-img { overflow: hidden;
       aspect-ratio: 4/3; }
    .card-img img {
      width: 100%;
       height: 100%;
       object-fit: cover; 
      display: block;
      transition: transform 0.6s ease;
    }
    .card:hover .card-img img { transform: scale(1.06); }

    .card-body { padding: 1.6rem; }

    .card-num {
      font-family: 'Cormorant Garamond', serif;
      font-size: 2.4rem; 
      font-weight: 300;
      color: rgb(157, 193, 209);
       line-height: 1;
      margin-bottom: 0.4rem;
    }

    .card-body h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.4rem; 
      font-weight: 400; 
      margin-bottom: 0.6rem;
    }

    .card-body p 
    { color:  #7a7a6e;
       font-size: 0.85rem; 
       line-height: 1.7; }


.page-hero {
    position: relative;
    height: 45vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white;
    border-radius: 5px;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    object-fit: cover;

    z-index: 1;
}

.page-hero::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
}

.hero-content {
    position: relative;
    z-index: 3;
    padding: 20px;
}

 .what-is {
      max-width: 1100px;
       margin: 6rem auto 0;
      padding: 0 3rem;
      display: grid;
       grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .what-is .section-tag {
      font-size: 0.7rem; 
      letter-spacing: 0.15em; 
      text-transform: uppercase;
      color:   #2e6642;
      font-weight: 500; 
      margin-bottom: 1rem;
    }

    .what-is h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 300; 
      line-height: 1.2;
    }
    .what-is h2 em
     { font-style: italic; 
      color:   #2e6642; }

    .what-is p {
      margin-top: 1rem;
      color:#7a7a6e; 
      font-size: 0.9rem;
      line-height: 1.8;
    }

 .principles-section {
      background:  #f2ebe0;
      margin-top: 6rem;
      padding: 5rem 3rem;
    }
 
    .principles-section .section-header {
      max-width: 1100px;
       margin: 0 auto 3rem;
    }

    .principles-section .section-tag {
      font-size: 0.7rem;
       letter-spacing: 0.15em;
        text-transform: uppercase;
      color:  #2e6642; 
      font-weight: 300;
       margin-bottom: 0.8rem;
    }

    .principles-section h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 300;
    }
    .principles-grid {
      max-width: 1100px;
       margin: 0 auto;
      display: grid;
      grid-template-columns: repeat(auto-fit, 
      minmax(180px, 1fr));
      gap: 1rem;
    }
    .p-card {
      background: #ffffff;
      padding: 1.6rem 1.4rem;
      border: 1px solid rgba(0,0,0,0.06);
      transition: border-color 0.2s, transform 0.25s;
    }
    .p-card:hover 
    { border-color: #7aac82; 
      transform: translateY(-3px);
     }
   
    .p-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.15rem; 
      font-weight: 400;
       margin-bottom: 0.4rem;
    }
    .p-card p 
    { color:  #7a7a6e; 
      font-size: 0.8rem;
       line-height: 1.6;
       }
 
    .benefits {
      max-width: 1100px; 
      margin: 6rem auto 7rem;
      padding: 0 3rem;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
    }

    .benefits-img { overflow: hidden; }

    .benefits-img img {
       width: 100%;
       display: block; 
       transition: transform 0.6s ease; }

    .benefits-img:hover img { transform: scale(1.03); }

    .benefits-text .section-tag {
      font-size: 0.7rem;
       letter-spacing: 0.15em;
       text-transform: uppercase;
      color:  #2e6642;
       font-weight: 500;
        margin-bottom: 1rem;
    }

    .benefits-text h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 300; 
      line-height: 1.2;
    }
    .benefits-text h2 em { 
      font-style:
       italic; color:  #2e6642; }

    .benefit-list { margin-top: 1.6rem;
       display: flex;
        flex-direction: column;
         gap: 0.9rem; }

    .benefit-item {
      display: flex; align-items: 
      flex-start;
       gap: 0.9rem;
      padding-bottom: 0.9rem;
      border-bottom: 1px solid rgba(0,0,0,0.07);
    }
    .benefit-item:last-child { border-bottom: none; }

    .benefit-dot {
      width: 6px; height:
       6px; 
       border-radius: 50%;
      background:  #c8a96e; 
      flex-shrink: 0;
       margin-top: 0.45rem;
    }

    .benefit-item strong { 
      display: block;
       font-size: 0.88rem; 
       font-weight: 500;
        margin-bottom: 0.15rem; }
    
    .benefit-item p { 
      color:  #7a7a6e; 
      font-size: 0.82rem; 
      line-height: 1.6; }
    
    .what-is, .benefits
     { grid-template-columns: 
      1fr; padding: 0 1.5rem;
       gap: 2.5rem;
        margin-top: 4rem; }

   .materials-intro {
      max-width: 680px;
      margin: 5rem auto 0;
      padding: 0 3rem;
      text-align: center;
    }

      .materials-intro h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.9rem, 3vw, 2.8rem);
      font-weight: 300;
       line-height: 1.2;
    }

    .materials-intro h2 em {
       font-style: italic;
       color:  #2e6642;
       }

    .materials-intro p {
      margin-top: 1rem;
      color:  #7a7a6e; 
       font-size: 0.9rem; 
      line-height: 1.8;
    }

    .materials-grid {
      max-width: 1100px;
      margin: 4rem auto 7rem;
      padding: 0 3rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
 .mat-card {
      background: #f5f3ef;
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s;
    }

 .mat-img { 
  overflow: hidden; 
  aspect-ratio: 4/3; }

.mat-img img {
      transition: transform 0.6s ease;
    }

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

 .mat-body { padding: 1.4rem; }

  .mat-body h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size:
       1.4rem; 
       font-weight: 400;
      margin-bottom: 0.5rem;
    }

.mat-body p {
      color: #7a7a6e;
       font-size: 0.85rem;
        line-height: 1.7;
    }

.examples-intro {
      max-width: 660px; 
       margin: 5rem auto 0;
      padding: 0 3rem; 
      text-align: center;
    }

    .examples-intro h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 
      clamp(1.9rem, 3vw, 2.6rem);
      font-weight: 300;
       line-height: 1.2;
    }
.examples-intro h2 em { 
  font-style: italic;  
  color: #2e6642;  }

  .examples-intro p {
      margin-top: 1rem;
      color: #7a7a6e;
      font-size: 0.9rem; 
      line-height: 1.8;
      
    }
  .featured {
      max-width: 1100px;  
      margin: 5rem auto 0;
      padding: 0 3rem;
      display: grid; 
      grid-template-columns: 1.2fr 1fr;
      gap: 5rem;
       align-items: center;
    }
 .featured-img { overflow: hidden; }

.featured-img img {
      width: 100%;
       height: 100%;
        object-fit: cover; 
        display: block;
      transition: transform 0.6s ease;}

 .featured-img:hover img { transform: scale(1.03); }
 .featured-label {
      display: inline-flex;
       align-items: center;
        gap: 0.5rem;
      font-size: 0.68rem; 
      letter-spacing: 0.12em;
       text-transform: uppercase;
      color: #c8a96e;
      margin-bottom: 1rem;}

  .featured-label::before {
      content: '';
       display: block; 
      width: 20px;
       height: 1px; 
      background: #c8a96e;
    }
 .featured-label::after{
       content: '';
       display: block; 
      width: 20px;
       height: 1px; 
      background: #c8a96e; 
    }

     .featured-text h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.6rem);
      font-weight: 300
      ; line-height: 1.2;
    }
.featured-text h2 em { font-style: italic; 
  color:  #2e6642;
}

    .featured-text p {
      margin-top: 1rem;
      color: #7a7a6e;
       font-size: 0.9rem;
        line-height: 1.8;
    }

    .examples-grid {
      max-width: 1100px;  
      margin: 5rem auto 7rem;
      padding: 0 3rem;
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }
  .ex-card {
      background: #faf7f1; 
      overflow: hidden;
      transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s;
    }
  
    .ex-img {
       aspect-ratio: 4/3; }
        .ex-img img {
      width: 100%; 
      height: 100%; 
    
       display: block;
      transition: transform 0.6s ease;}
      
.ex-card:hover .ex-img img { transform: scale(1.05); }

    .ex-body { padding: 1.4rem; }

 .ex-body h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.35rem;
       font-weight: 400;
        margin-bottom: 0.4rem;
    }
 .ex-body p { 
  color: #7a7a6e;
   font-size: 0.82rem; 
   line-height: 1.7;
   } 
    .contact-info .section-tag {
      font-size: 0.7rem; 
      letter-spacing: 0.15em; 
      text-transform: uppercase;
      color:  #2e6642;
      font-weight: 500; 
      margin-bottom: 1rem;
    }

.contact-info h2 {
      font-family: 'Cormorant Garamond', serif;
      font-size: clamp(1.8rem, 3vw, 2.4rem);
      font-weight: 300;
       line-height: 1.25;
    }
    .contact-info h2 em { 
      font-style: italic; 
      color:#2e6642;
    }
 .contact-info > p {
      margin-top: 1rem;
      color:  #7a7a6e;
       font-size: 0.9rem; 
       line-height: 1.8;
    }
  .contact-section {
      max-width: 1100px;
       margin: 0 auto;
      padding: 6rem 3rem;
      display: grid; 
      grid-template-columns: 1fr ;
      gap: 5rem; 
      align-items: start;
    }
    

    .contact-form-card {
      background:#ffffff;
      padding: 2.5rem;
      box-shadow: 0 8px 40px rgba(158, 110, 110, 0.685);
    }
 .contact-form-card h3 {
      font-family: 'Cormorant Garamond', serif;
      font-size: 1.5rem;
       font-weight: 400;
      margin-bottom: 1.6rem;
    }
  textarea { min-height: 130px;
     resize: vertical; }

form{
    max-width:700px;
    margin:70px auto;
    padding:100px;
    background:hsla(160, 73%, 32%, 0);
    border-radius:12px;
    box-shadow:0 10px 30px rgba(0, 0, 0, 0.973);
}

.form-row{
  height: 40%;
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.field{
    flex:1;
    display:flex;
    flex-direction:column;
}

.field label{
    margin-bottom:6px;
    font-weight:600;
    color:#003366;
}

.field input,
.field textarea{
    padding:12px;
    border:1px solid #060468;
    border-radius:8px;
    font-size:15px;
    transition:all 0.3s ease;
}

.field textarea{
    min-height:13px;
    resize:vertical;
}
.submit-btn{
    margin-top:45px ;
    margin: 20px auto;
    display: block;
    width:50%;
    padding:14px;
    background:#00A651;
    color:#fff;
    border:none;
    border-radius:16px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
    transition:all 0.3s ease
}
.submit-btn:hover{
    background:#024d70;
    transform:translateY(-2px);
    box-shadow:0 8px 20px rgba(0,166,81,0.3);
}
.footer { 
margin-top: 150px;
width: 100%;
padding: 3.2rem 4rem;
background: #0a3d2c;
color: #ccc;
display: flex;
justify-content: space-between;
 border-radius: 25px;
  margin-top: auto;
    flex-wrap: wrap;
}

.footer div{
text-align: center;
}
.col-2{
  flex-grow: 2;
}
.footer div h4{
font-weight: 300;
margin-bottom: 30px;
letter-spacing: 1px;
}
.col-1 a{
  display: block;
  text-decoration: none;
  color: #f5f3ef;
  margin-bottom: 10px;
   font-size: 14px;
    transition: 0.3s;
}

.footer a:hover {
    color: #00A651;
    transform: translateX(3px); 
}

.footer p {
    font-size: 14px; 
}

.footer ul {
    list-style: none;
    padding: 0;
}
.fb{ 
  display: inline-block;
  background: #1877f2;
  color: white;
  padding: 12px;
  border-radius: 50%;
  font-size: 18px;
  text-align: center;
  transition: 0.3s;
}
.fb:hover{  
  background: #145dbf ;
  transform:scale(1.1);
}
.whatsapp {
  font-size: 24px;
  margin: 10px;
  color: #25D366;
  transition: 0.3s;
}
.whatsapp:hover {
  transform: scale(1.2);
  color: #1ebe5d;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}