/* styles.css */
@import url('https://fonts.googleapis.com/css2?family=Unna:ital,wght@0,400;0,700;1,400;1,700&display=swap');

html {
  scroll-behavior: smooth;
  transition-behavior: smooth;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Unna', serif;
}

:root {
    /* Colours */
    --Navbar-and-section-colour: #F8F2DE;
    --Footer-color: #EADBBF;
    --Light-section-color: #FFFCF2;
    --Yellow-colour: #FFEEB9;
    --Tree-deco-colour: #859774;
    --Green-section-colour: #ABBD99;
    --facebook-green: #1F4529;
    --logo-tree-green: #085123;
    --hyperlink-green: #47663B;
    --insta-red: #A31D1D;
    --ball-red: #E1B4AE;
    --star-yellow:#FFEEB6;
    --News-frame-brown: #A79F87;
    --Box-green-hover: #A3B995;
    --Box-red-hover: #DF9A9A;
    --Tree-section-green-box: #ABBD99;
    --Line-color: #C3AC81;
    --Black: #000000;

    /* Font sizes */
    --font-size-s: 0.9rem;
    --font-size-n: 1rem;
    --font-size-m: 1.12rem;
    --font-size-ml: 1.25rem;
    --font-size-l: 1.5rem;
    --font-size-xl: 2rem;
    --font-size-xxl: 3rem;

    /* Font weights */
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-extra-bold: 900;

    /* Border radius */
    --border-radius-s: 8px;
    --border-radius-m: 30px;
    --border-radius-rectangle: 50%;

    /* Site max width */
    --site-max-width: 81.25rem; /* 1300px */
}



/* whole site styling */
ul {
    list-style: none;
}

a {
    text-decoration: none;
}

button {
    cursor: pointer;
    border: none;
    background: none;
}

h2{
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-xxl);
}



/* Nav bar logo */
.logo-image {
    height: 100%;
    display: block;
}

img {
    width: 80%;
    max-width: 100;
}

.section-content {
    max-width: var(--site-max-width);
    margin: 0 auto;
}

/* Logo image for the About Us page */
.logo-image .long {
    height: 100%;
    display: block;
}

/* Navbar styling */
header {
    position: fixed;
    width: 100%;
    z-index: 5;
    background-color: #F8F2DE;
    border-bottom: #47663B 5px solid;
}

header .navbar {
    display: flex;
    padding: 20px;
    align-items: center;
    justify-content: space-between;
    align-items: center;
}

.navbar .nav-menu {
    display: flex;
    gap: 10px;
    margin: 0 auto;
}

.navbar .nav-menu .nav-link {
    display: flex;             /* make it a flex container */
    align-items: center;       /* vertically center content */
    justify-content: center;   /* (optional) horizontally center content */
    padding: 10px 18px;
    color: var(--Black);
    font-size: var(--font-size-ml);
    text-decoration: none;
}

.navbar .nav-menu .nav-link:hover {
    color: var(--hyperlink-green);
    text-decoration: underline;
}

.navbar :where(#menu-toggle-button){
    display: none;
    font-size: var(--font-size-ml);
}

.navbar .nav-link.active {
  color: var(--hyperlink-green) !important; /* Example color */
  text-decoration: underline;
}

/* Hero Section */
.hero-section {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.hero-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero-overlay {
    position: absolute;
    top: 50%;
    left: 37%; /* Previously 50% */
    transform: translate(-50%, -50%);
    text-align: left;
    color: #184c27;
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    max-width: 90%;
}

.hero-logo-image {
    width: 43.75rem; /* 700px */
    height: auto;
    margin-bottom: 16px;
}

.hero-text {
    font-size: var(--font-size-l);
    color: #000000;
    margin-left: 40px;
}

.hero-buttons {
    display: flex;
    gap: 30px;
    justify-content: flex-start;
    padding: 0;
    margin-left: 3%;
    margin-top: 5%;
}

.Button-See-More, .Button-Contact-Us {
    display: inline-block;
    padding: 20px 35px;
    border-radius: 50px;
    font-size: var(--font-size-ml);
    font-weight: var(--font-weight-bold);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.Button-See-More {
    background: #2d4424;
    color: #fff;
    border: 4px solid #2d4424;
}

.Button-Contact-Us {
    background: #fff;
    color: #2d4424;
    border: 4px solid #2d4424;
}

.Button-See-More:hover {
    background: #fff;
    color: #2d4424;
}

.Button-Contact-Us:hover {
    background: var(--Footer-color);
    color: #2d4424;
    border-color: var(--Footer-color);
}



/* News styling */
.section-title {
    text-align: center;
    color: var(--Black);
    margin-bottom: 0.3rem;
    margin-top: 1.5rem;
}

.news-section {
    background-color: var(--Light-section-color);
    padding: 3vw 0 2vw;
}

.news-section .slider-wrapper {
    overflow: hidden;
    padding: 0 1rem 3rem;
}

.news-section .news {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding:2.5rem;
    text-align: center;
}

.news-section .news .news-image{
    width: 70vw;
    height: auto;
    border: var(--News-frame-brown) 1rem solid;
    margin-bottom: 0.1rem;
}

.news-section .swiper-pagination-bullet {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--News-frame-brown);
}

.news-section .swiper-slide-button {
    margin-top: -50px;
    margin-left: 6rem;
    margin-right: 6rem;
    color: var(--News-frame-brown);
    transition: 0.3s ease;
    font-weight: var(--font-weight-extra-bold);
}

.news-section .swiper-slide-button:hover {
    color: var(--Footer-color);
}

/* quote styling */
.quote-section {
    background-color: var(--Navbar-and-section-colour);
    padding: 7vw 0 8vw;
    flex-direction: column;
}

.quote-section .quote-text {
    font-size: var(--font-size-xxl);
    color: var(--Black);
    text-align: center;
    margin-bottom: 1rem;
    margin-left: 10%;
    margin-right: 10%;
}

.quote-author {
    font-size: var(--font-size-l);
    color: var(--Black);
    text-align: center;
    margin-bottom: 5rem;
    margin-top: 0.9rem;;
}

.quote-description {
    font-size: var(--font-size-l);
    color: var(--Black);
    text-align: center;
    margin-bottom: 5rem;
    margin-left: 15%;
    margin-right: 15%;
}

.quote-image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90%;
    margin-left: 10%;
    margin-right: 10%;
}


/* Website sections styling*/
.webpage-select-section .section-title {
    text-align: center;
    color: var(--Black);
    margin-bottom: 8rem;
    margin-top: 7rem;
}

.webpage-select-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column; /* Ensure stacking works */
    background-image: url('Pictures/Selection bg.svg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    width: 100%;
    padding-top: 7rem;
    box-sizing: border-box;
}

.Tree-Image {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden;
    padding-top: 70px;
    margin: 0;
}

.Tree-Image img {
    width: 100%;
    height: auto;         /* preserves aspect ratio */
    max-height: 40vh;     /* image won't grow too tall */
    object-fit: contain;  /* scales the image within the container */
}

.section-buttons {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
    align-items: center;
}

.Button-G {
    display: block;
    padding: 40px 0;
    margin: 0 auto;
    width: 800px;
    color: var(--Black);
    font-size: 2.8rem;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.Button-R {
    display: block;
    padding: 40px 0;
    margin: 0 auto;
    width: 800px;
    color: var(--Black);
    font-size: 2.8rem;
    text-align: center;
    transition: background 0.2s, color 0.2s;
    cursor: pointer;
}

.Button-G:hover {
    background:var(--Box-green-hover);
    color: var(--Black);
}

.Button-R:hover {
    background:var(--Box-red-hover);
    color: var(--Black);
}

.section-buttons .line {
  background-color: var(--Line-color);
  height: 0.2rem;
  width: 100%;
  max-width: 800px;
  margin: 0 auto; 
}



/* Pop-up styling */
.Pop-up-section {
    background-color: var(--Yellow-colour);
    padding-top: 2rem;
}

.Pop-up-section .Pop-up-content .section-title {
    padding-top: 0rem;
    padding-bottom: 3rem;
    text-align: left;
    padding-left: 5rem;
}
 
.Pop-up-section .Pop-up-content .text {
    color: var(--Black);
    font-size: var(--font-size-ml);
    display: flex;
    flex-direction: column;
    gap: 40px;
    width: 100%;
    align-items: left;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
}

/* Pop-up-news styling */
.Pop-up-news-section {
    background-color: var(--Yellow-colour);
    padding-top: 12rem;
    padding-bottom: 2rem;
}

 
.Pop-up-news-section .Pop-up-news-content .text {
    color: var(--Black);
    font-size: var(--font-size-xxl);
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
    align-items: center;
    padding-left: 5rem;
    padding-right: 5rem;
    padding-bottom: 5rem;
}

/* Beginning styling */
.beginning-section {
    background-color: var(--Light-section-color);
    padding-top: 15rem;
    padding-bottom: 8rem;
    font-size: var(--font-size-ml);
}

.beginning-section .beginning-content {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 9rem;
    padding: 0 8rem;
    text-align: left;
    flex-wrap: wrap; 
}

.beginning-section .title {
    flex: 1;
    margin: 0;
    white-space: nowrap; 
}

.beginning-section p {
    flex: 3;
    margin: 0;
    text-align: justify;
}



/* Family styling */
.Family-section {
  background-color: var(--Navbar-and-section-colour);
  padding-top: 10rem;
  font-size: var(--font-size-ml);
}

/* Content Container */
.Family-section .Family-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Heading aligned left */
  gap: 5rem;
  padding: 0 8rem;
}

/* Section Heading */
.Family-section > .title {
  font-size: 2.5rem;
  text-align: left;
  margin-bottom: 3rem;
  width: 100%;
}

table {
    table-layout: fixed;
        width: 100%; /* Optional: set a width for the entire table */
}


td img {
    width: 100%;
  max-width: 100%; /* Ensures the image never exceeds the width of its parent <td> */
  height: auto;    /* Maintains the aspect ratio */
  padding-right: 30px;
  padding-left: 30px;
}

.image-column {
  width: 30%;
}

.sub-title {
  font-size: var(--font-size-xl); /* Adjust as needed (e.g. 1.2rem, 20px, etc.) */
  margin-bottom: 2rem; /* Optional: add spacing below subtitle */
}



/* Visiting Section Styling */
.Visiting-section {
    background-color: var(--Light-section-color);
    padding-top: 8rem;
    padding-bottom: 8rem;
    font-size: var(--font-size-ml);
}

/* Flex container */
.Visiting-section .Visiting.content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 8rem;
    flex-wrap: wrap;
}

/* Text block on the left */
.Visiting-section .Visiting.text {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.Visiting-section .title {
    font-size: 2.5rem;
    margin-bottom: 2rem;
}

.Visiting-section .Visiting.text p {
    margin-bottom: 1.5rem;
    text-align: justify;
}

.quote-image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Fixed image width, height auto-adjusts to match text */
.image-container {
    width: 100%;          /* 🔧 You can adjust this value */
    height: 100%;
    display: flex;
    align-items: stretch;
}

.visiting-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Caption below the image */
.quote-image-wrapper p {
    font-style: italic;
    font-size: 1rem;
    margin-top: 1rem;
    text-align: center;
    color: #555;
    max-width: 400px;  /* Optional: match image width */
}

/* Picking tree */
.pick-tree-section {

  background-color: var(--Navbar-and-section-colour);
  padding-top: 10rem;
  font-size: var(--font-size-ml);

}

.pick-tree-section .pick-tree-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Heading aligned left */
  gap: 5rem;
  padding: 0 8rem;
}

/* Section title styling */
.pick-tree-section .title {
    text-align: left;
    margin-left: 8rem;
    margin-bottom: 4rem;
}

/* Layout for each pick-tree item */
.pick-tree-section .Pick-tree-1,
.pick-tree-section .Pick-tree-2,
.pick-tree-section .Pick-tree-3,
.pick-tree-section .Pick-tree-4,
.pick-tree-section .Pick-tree-5 {
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 0 8rem;
    margin-bottom: 4rem;
    flex-wrap: nowrap;
}

/* Reverse layout for even-numbered items */
.pick-tree-section .Pick-tree-2,
.pick-tree-section .Pick-tree-4 {
    flex-direction: row-reverse;
}

/* Consistent image styling */
.tree-image {
        width: 100%;                    
    max-width: 400px;               
    
 
    object-fit: cover;   
    flex-shrink: 0;      

}

/* Text box styling */
.tree-text {
  flex: 1;
  background-color: #ABBD99;  
  padding: 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: justify;
  gap: 1rem;
}

/* Paragraphs inside the box */
.text-box p {
    margin-bottom: 1.5rem;
    text-align: justify;
    color: #333;
}

/* Remove bottom margin from last paragraph */
.text-box p:last-child {
    margin-bottom: 0;
    padding-bottom: 0%;
}




/* Products Section */
.Products-section {
  background-color: var(--Navbar-and-section-colour);
  font-size: var(--font-size-ml);
}

/* Content wrapper */
.Products-content {
  display: flex;
  flex-direction: column;
  gap: 0rem;
  padding: 0 8rem;
}

/* Section Titles */
.Products-section .title {
  text-align: left;
  margin-bottom: 1rem;
  margin-top: 6rem;
}

/* Layout for each product item */
.Products-1,
.Products-2,
.Products-3 {
  display: flex;
  align-items: stretch;
  gap: 3rem;
  flex-wrap: nowrap;
}


.Products-1, .Products-2,  .Products-3{
  flex-direction: row-reverse;
}


/* Image styling */
.Products-image {
  width: 400px;
  height: auto;
  object-fit: cover;
  flex-shrink: 0;
}

/* Text box styling */
.Products-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem;
  text-align: justify;
}

/* Paragraphs inside */
.Products-text p {
  margin: 0;
  line-height: 1.6;
}


/* Contact Section */
.Contact-section {
  background-color: var(--Light-section-color);
  padding: 12rem 10rem 10rem 10rem; /* Increased top padding */
  font-size: var(--font-size-ml);
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

/* Section Title */
.Contact-section .title {
  margin-bottom: 2rem;
  text-align: left;
}

.Contact-section .small-title {
    color: #878787;
    font-size: var(--font-size-n);
}

/* Top content: contacts + map side by side */
.Contact-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10rem;
}

/* Contact info block (left side) */
.Contacts {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: var(--font-size-sm);
  flex: 1 1 300px;
}

/* Map container (right side) */
.Map-container {
  flex: 1 1 500px;
  max-width: 600px;
}

.Map-container iframe {
  width: 100%;
  height: 100%;
  min-height: 320px;
  border: none;
}

.Contact-section .email a{
    color: var(--hyperlink-green);
    font-size: var(--font-size-ml);
}

.Contact-section .email:hover a{
    text-decoration: underline;
}

.Contact-section .phone a{
    color: var(--Black);
}

.Contact-section .phone:hover {
    text-decoration: underline;
}

/* Bottom additional info */
.more-info {
  font-size: var(--font-size-sm);
  line-height: 1.6;
  text-align: justify;
  max-width: 100%;
}

.more-info p {
  margin-bottom: 1.5rem; /* Adds space between each paragraph */
}


.Under-construction {
    padding: 20rem;
    font-size: var(--font-size-xxl);
}




/* Footer styling */
.footer-section-content {
    background-color: var(--Footer-color);
    padding: 5rem 0;
}

.footer-section-content .footer-logo {
    max-width: 35rem;
    width: 100%;
    height: auto;
    margin-bottom: 3rem;
    padding-left: 3rem;
}

.footer-section-content .Info {
    flex: 1 1 300px;
    gap: 30px;
    width: 100%;
    align-items: left;
    padding-left: 7rem;
    display: flex;
    flex-direction: column;
    font-size: var(--font-size-ml);
}

.footer-section-content .email {
    color: var(--hyperlink-green);
    font-size: var(--font-size-ml);
}

.footer-section-content .email:hover {
    text-decoration: underline;
}

.footer-section-content .phone {
    color: var(--Black);
}

.footer-section-content .phone:hover {
    text-decoration: underline;
}


/* Right column: socials */
.footer-socials {
    flex: 1 1 200px;
    display: flex;
    justify-content: flex-end;
    gap: 20px;
    align-items: center;
    padding-right: 7rem;
}

.footer-socials .Facebook,
.footer-socials .Instagram {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: var(--facebook-green); /* or --insta-red */
    color: var(--Footer-color);
    font-size: 2.5rem;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease, transform 0.2s ease;
    margin-left: 10px; /* spacing between buttons */
}

.footer-socials .Instagram {
    background-color: var(--insta-red);
}

.footer-socials .Instagram:hover {
  border: 3px solid var(--insta-red);
  background-color: var(--Button-hover, --Footer-color); 
}

.footer-socials .Instagram:hover i {
  background: linear-gradient(225deg, #4F5CD5, #BD2BA5, #FCBF68);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.footer-socials .Facebook:hover {
    background-color: var(--Button-hover, --Footer-color);
    border: 3px solid var(--facebook-green);
    color: #1877F2;
}


/* Responsive media query code for max width 1000px*/
@media screen and (max-width: 1000px) {
    :root {
            --font-size-m: 1rem;
            --font-size-ml: 1.1rem;
            --font-size-l: 1.3rem;
            --font-size-xl: 1.5rem;
            --font-size-xxl: 2.5rem;
    }

    .navbar :where(#menu-toggle-button) {
        font-size: var(--font-size-l);
        position:fixed;
        right: 30px;
        top: 30px;
        display: block;
    }

    .navbar .nav-menu {
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        background-color: var(--Navbar-and-section-colour);
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-top: 0;
        padding-bottom: 40px;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-in-out;
        z-index: 2000;
        border-bottom: #47663B 5px solid;
    }

    .logo-image{
        width: 80%;
        height: auto;
    }

body.show-mobile-menu .navbar .nav-menu {
        max-height: 600px;
    }

    .navbar .nav-menu .nav-link {
        color: var(--Black);
        display: block;
        font-size: var(--font-size-xl);
    }


    .section-buttons .line, .Button-G, .Button-R {
    max-width: 600px;
  }
    
   .Button-G, .Button-R {
        font-size: 2.2rem;
    }

    .section-buttons .Button-R:last-of-type {
    margin-bottom: 7rem;
}

.hero-logo-image {
    width: 34rem; /* Shrink logo slightly */
  }

  .hero-overlay {
    left: 42%; /* Shift slightly more center */
    padding: 1.25rem 1.75rem;
  }

  .hero-text {
    font-size: 1.1rem;
    margin-left: 20px;
  }

  .hero-buttons {
    flex-wrap: wrap; /* Allow wrap on smaller widths */
    gap: 20px;
    margin-left: 2%;
    margin-top: 4%;
  }

  .Button-See-More,
  .Button-Contact-Us {
    padding: 18px 30px;
    font-size: 1rem;
  }

  .footer-section-content {
    padding: 4rem 2rem;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-section-content .footer-logo {
    align-self: center;
    margin-bottom: 2.5rem;
    padding-left: 0;
    max-width: 28rem;
  }

  .footer-section-content .Info {
    padding-left: 0;
    align-items: center;
    font-size: var(--font-size-ml);
    text-align: center;
    gap: 20px;
  }

  .footer-socials {
    justify-content: center;
    padding-right: 0;
    margin-top: 2rem;
  }

  .footer-socials .Facebook,
  .footer-socials .Instagram {
    width: 60px;
    height: 60px;
    font-size: 2.2rem;
  }

  .beginning-section .beginning-content {
        flex-direction: column;
        padding: 0 4rem;
        gap: 2rem;
        text-align: left;
    }

    .beginning-section .title {
        white-space: normal;
        text-align: left;
    }

    .beginning-section p {
        font-size: 1.1rem;
        text-align: justify;
    }

    .Family-section .Family-content {
    padding: 0 4rem;
    gap: 3rem;
  }

  .sub-title {
    font-size: 1.5rem;
  }


  .image-column {
    width: 35%;
  }
  
  .pick-tree-section .Pick-tree-1,
  .pick-tree-section .Pick-tree-2,
  .pick-tree-section .Pick-tree-3,
  .pick-tree-section .Pick-tree-4,
  .pick-tree-section .Pick-tree-5 {
    flex-direction: column;         /* ⬇️ Stack vertically */
    align-items: center;            /* Center align on smaller screens */
    padding: 0 2rem;
  }

  .tree-image {
    width: 100%;                    /* Full width on smaller screens */
    max-width: 600px;               /* Optional: limit image max width */
    margin-bottom: 1.5rem;
  }

  .tree-text {
    width: 100%;
    padding: 1.5rem;
  }

  .pick-tree-section .title {
    margin-left: 0;
    text-align: center;
    width: 100%;
  }
  

   /* Reduce side padding */
  .Products-content {
    padding: 0 2rem;
    gap: 5rem; /* Add gap between product sections */
  }

  /* Stack image and text vertically */
  .Products-1,
  .Products-2,
  .Products-3 {
    flex-direction: column; /* Stack text and image */
    align-items: center;
    text-align: center;
  }

  /* Center title for better appearance */
  .Products-section .title {
    text-align: center;
    margin-top: 4rem;
  }

  /* Adjust image size for smaller screen */
  .Products-image {
    width: 100%;
    max-width: 350px;
    height: auto;
  }

  /* Adjust text padding and alignment */
  .Products-text {
    padding: 3rem;
    text-align: justify;
    align-items: center;
  }

  .Contact-content {
    flex-direction: column;
  }

  .Map-container iframe {
    min-height: 300px;
    display: flex;
  justify-content: center; 
  align-items: center;     
  }

  .Contact-section .title {
    text-align: center;
  }
}




/* Responsive media query code for max width 640px*/
@media screen and (max-width: 640px) {
    .news-section .swiper-slide-button {
        display: none;
    }

    .news-section .slider-wrapper {
        margin: 0 0 30px;
    }

    .section-buttons .line, .Button-G, .Button-R {
    max-width: 350px;
  }

    .Button-G, .Button-R {
        font-size: 1.8rem;
    }

    .section-buttons .Button-R:last-of-type {
    margin-bottom: 3rem;
}

   .hero-logo-image {
    width: 95%;               
    max-width: 480px;         
    height: auto;
    margin-bottom: 16px;
  }

  .hero-overlay {
    top: 52%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 1.25rem 1.5rem;
    text-align: left;
  }

  .hero-text {
    font-size: var(--font-size-m); 
    margin-left: 20px;
  }

  .hero-buttons {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    margin-left: 20px;
    margin-top: 30px;
  }

  .Button-See-More,
  .Button-Contact-Us {
    padding: 16px 28px;
    font-size: var(--font-size-m); 
  }

  .footer-section-content {
    padding: 3rem 1.5rem;
  }

  .footer-section-content .footer-logo {
    max-width: 24rem;
    margin-bottom: 2rem;
  }

  .footer-section-content .Info {
    font-size: var(--font-size-s);
    gap: 15px;
  }

  .footer-socials .Facebook,
  .footer-socials .Instagram {
    width: 50px;
    height: 50px;
    font-size: 1.8rem;
    margin-left: 6px;
  }


/* Family section*/
    table {
    display: block;
    width: 100%;
  }

  tr {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  td {
    width: 100%;
    display: block;
    text-align: center;
    padding: 0;
  }

  .Family-section .Family-content {
    padding: 0 2rem;
    gap: 6rem;
  }

  .sub-title {
    font-size: 1.3rem;
  }

  .description {
    font-size: 1rem;
    line-height: 1.5;
  }

  td img {
    padding-right: 0;
    margin-bottom: 2rem;
    max-width: 60%;
  }

  .image-column {
    width: 100%;
  }
}