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


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {
    scroll-behavior: smooth;
}


body {

    font-family: Arial, Helvetica, sans-serif;
    color: #1f2937;
    background: #ffffff;
    line-height: 1.6;

}


img {

    max-width: 100%;
    display: block;

}


a {

    text-decoration: none;
    color: inherit;

}



.container {

    width: 90%;
    max-width: 1200px;
    margin: auto;

}



/* =====================================================
   COLOURS
===================================================== */


:root {

    --green: #2e7d32;
    --light-green: #e8f5e9;
    --dark: #1f2937;
    --grey: #f5f7f6;
    --white: #ffffff;

}





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


.header {

    background: white;
    position: sticky;
    top:0;
    z-index:1000;
    box-shadow:0 2px 10px rgba(0,0,0,0.08);

}



.nav-container {

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:20px 0;

}



/* .logo {

    font-size:26px;
    font-weight:bold;

} */
.logo {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 26px;
    font-weight:bold;
  }
  
  .logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    display: block;
    margin-right: -10px;
  }


.logo span {

    color:var(--green);

}



.navbar {

    display:flex;
    gap:25px;
    align-items:center;

}



.navbar a {

    font-weight:600;

}



.navbar a:hover {

    color:var(--green);

}



.mobile-menu {

    display:none;
    font-size:30px;

}





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


.btn-primary {


    background:var(--green);
    color:white;
    padding:14px 28px;
    border-radius:30px;
    font-weight:bold;
    display:inline-block;
    transition:0.3s;


}



.btn-primary:hover {


    background:#1b5e20;
    transform:translateY(-3px);


}




.btn-secondary {


    border:2px solid var(--green);
    color:var(--green);
    padding:12px 25px;
    border-radius:30px;
    font-weight:bold;


}



.btn-secondary:hover {


    background:var(--green);
    color:white;


}





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


.hero {


    background:
    linear-gradient(
    rgba(255,255,255,.9),
    rgba(255,255,255,.9)
    ),
    url("../images/hero-house.jpg");


    background-size:cover;
    background-position:center;

    padding:100px 0;


}



.hero-content {


    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;


}



.hero h1 {


    font-size:52px;
    line-height:1.2;
    margin-bottom:25px;


}



.hero p {


    font-size:20px;
    margin-bottom:30px;


}



.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
    align-items: center;
  }
  
  /* .hero-buttons a {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
  } */



.trust-badges {


    display:flex;
    gap:15px;
    flex-wrap:wrap;


}



.trust-badges div {


    background:white;
    padding:10px 15px;
    border-radius:20px;
    box-shadow:0 5px 15px rgba(0,0,0,.1);


}



.hero-image {


    position:relative;


}



.certificate-card {


    position:absolute;
    bottom:-30px;
    right:-20px;

    background:white;
    padding:20px;
    border-radius:15px;
    box-shadow:0 10px 30px rgba(0,0,0,.15);


}


.certificate-card strong {


    display:block;
    font-size:40px;
    color:var(--green);


}





/* =====================================================
   BENEFITS
===================================================== */


.benefits {

    padding:70px 0;
    background:var(--grey);

}



.benefit-grid {


    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;


}



.benefit-card {


    background:white;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 20px rgba(0,0,0,.08);


}





/* =====================================================
   GENERAL SECTIONS
===================================================== */


section {

    padding:80px 0;

}



.section-title {


    text-align:center;
    margin-bottom:50px;


}



.section-title h2,
section h2 {


    font-size:36px;
    margin-bottom:20px;


}





/* =====================================================
   ABOUT
===================================================== */


.about-content {


    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;
    align-items:center;


}



.about-content img {


    border-radius:20px;


}





/* =====================================================
   SERVICES
===================================================== */


.services {


    background:var(--grey);


}



.service-grid {


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


}



.service-card {


    background:white;
    padding:35px;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    transition:.3s;


}



.service-card:hover {


    transform:translateY(-8px);


}







/* =====================================================
   WHY SECTION
===================================================== */


.why {


    background:var(--light-green);


}



.why-grid {


    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;


}



.why-grid div {


    background:white;
    padding:25px;
    border-radius:15px;


}





/* =====================================================
   PROCESS
===================================================== */


.process-grid {


    display:grid;
    grid-template-columns:repeat(3,1fr);
    text-align:center;
    gap:30px;


}



.process-grid span {


    display:inline-flex;
    width:60px;
    height:60px;
    justify-content:center;
    align-items:center;
    background:var(--green);
    color:white;
    border-radius:50%;
    font-size:25px;


}





/* =====================================================
   AREAS
===================================================== */


.areas {


    background:var(--grey);


}





/* =====================================================
   FAQ
===================================================== */


.faq-item {


    background:white;
    padding:25px;
    margin:15px 0;
    border-radius:15px;
    box-shadow:0 5px 15px rgba(0,0,0,.08);


}






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


.cta {


    background:var(--green);
    color:white;
    text-align:center;


}





/* =====================================================
   FOOTER
===================================================== */


.footer {


    background:#111827;
    color:white;
    text-align:center;
    padding:40px 0;


}







/* =====================================================
   BOOKING PAGE
===================================================== */


.booking-hero {


    background:var(--light-green);
    text-align:center;


}



.booking-wrapper {


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


}



.booking-form {


    background:white;
    padding:40px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
    border-radius:20px;


}



.form-group {


    margin-bottom:20px;


}



.form-group label {


    display:block;
    margin-bottom:8px;
    font-weight:bold;


}



input,
select,
textarea {


    width:100%;
    padding:15px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;


}



.form-row {


    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;


}



.booking-info {


    background:var(--light-green);
    padding:30px;
    border-radius:20px;


}



.submit-btn {


    border:none;
    cursor:pointer;


}


.hero-image {
    position: relative;
  }
  
  .hero-image > img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .certificate-card {
    position: absolute;
    bottom: 5px;
    right: 5px;
    z-index: 2;
  
    background: #ffffff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  
    width: 220px;
  }
  
  .certificate-card img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
  }
  






/* =====================================================
   MOBILE RESPONSIVE
===================================================== */



/* Tablets and mobile devices */
@media (max-width: 900px) {

    /* Logo */
    .logo {
      font-size: 20px;
      gap: 3px;
    }
  
    .logo img {
      width: 65px;
      height: 65px;
      margin-right: -12px;
    }
  
    /* Navigation */
    .navbar {
      display: none;
    }
  
    .mobile-menu {
      display: block;
    }
  
    /* Main layouts */
    .hero-content,
    .about-content,
    .booking-wrapper {
      grid-template-columns: 1fr;
    }
  
    .hero h1 {
      font-size: 38px;
    }
  
    /* Grids */
    .benefit-grid,
    .service-grid,
    .why-grid,
    .process-grid {
      grid-template-columns: 1fr;
    }
  
    /* Forms */
    .form-row {
      grid-template-columns: 1fr;
    }
  
    /* Hero buttons */
    .hero-buttons {
      flex-direction: column;
    }
  }
  
  /* Small mobile devices */
  @media (max-width: 600px) {
  
    .logo {
      font-size: 17px;
      gap: 2px;
    }
  
    .logo img {
      width: 45px;
      height: 45px;
      margin-right: -8px;
    }
  
    /* Certificate card */
    .certificate-card {
      width: 150px;
      padding: 12px;
      bottom: 5px;
      right: 5px;
    }
  
    .hero h1 {
      font-size: 30px;
    }
  }
  
/* ===============================
   JAVASCRIPT ANIMATIONS
================================ */


section {

    opacity:0;
    transform:translateY(30px);
    transition:0.7s ease;

}


section.show {

    opacity:1;
    transform:translateY(0);

}



/* MOBILE MENU */


@media(max-width:900px){


.navbar.active {


    display:flex;
    flex-direction:column;
    position:absolute;
    top:80px;
    left:0;
    width:100%;
    background:white;
    padding:30px;
    box-shadow:0 10px 20px rgba(0,0,0,.1);


}


}