:root{
        --base: 16px;
        --h1Height:clamp(2rem, 2.9vw + 1rem, 3.4rem);
        --headerHeight: 70px;
        --brandGreen: #548357;
        overflow-x: hidden;
        --buttonColour:  linear-gradient(135deg, #d4a25a, #8b5e1a);   
        --textColour: #2d2406;
        --pFontSize:  clamp(1rem, 1.1vw + 0.8rem, 1.2rem);
        --background-color: transparent;
        --strongColour: var(--brandGreen);
        --accent-colour: #877B66;
        --secondary: linear-gradient(to bottom, #6A994E 0%, #A7C957 100%);





   }

   *{
        font-family: 'Inter' , sans-serif;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
        max-width: 100vw;
        scroll-behavior: smooth;
   }

   @media all { /* General settings */
   
   body{
        display: grid;
        width: 100vw;
        justify-content: center;
        margin: 0%;
        font-size: 1rem;      /*  currently 18px*/
        overflow-x: hidden; 
        justify-self: center;
        height: max-content;
        color: var(--textColour);
        /* overflow: hidden; */
        
    }

    h1, h2, h3{
        justify-self: center;
        /* border: 2px solid green; */
        /* font-weight: 700; */
        font-weight: bold;
        /* font-family: 'Playfair Display' , serif; */
        font-family: 'Fredoka', serif;
        color: var(--brandGreen);
        text-align: center;
    }

    h1{
        font-size: 4.1rem;
        font-family: 'Inter, sans-serif';
        font-weight: 400;
    }

    h2{
        font-size: 2.56rem;
        position: relative;
    }

    h3 {
        font-size: 1.6rem;
    }

    .h3p {
        max-width: 80vw;
            font-weight: 400;

    }

    h4{
        font-size: 1rem ;
        justify-self: center;
        height: max-content;
    }

   }


    .email  {
        padding-left: 30px;
    }

    h1 >  strong {
        font-weight: 600;
    }


    p {
        font-size: var(--pFontSize);
        color: var(--textColour);
        text-align: left;
        z-index: 5;
        padding-top: 30px;
        justify-self: center;
    }

        section.container{
        justify-self: center;
        display: grid;
        width: 100dvw;
        padding: 30px 10dvw;
    }




   @media all { /* Header and footer*/
    
    header {
        display: grid;
        grid-template-rows: 1fr;
        grid-template-columns: max-content 1fr max-content;
        margin: 0;
        height: var(--headerHeight);
        width:95vw;
        background-color: #fff;
        top: 0;
        position: sticky;
        z-index: 10000;
        overflow: hidden;
        width: 100vw;
        background-color: transparent;
        position: absolute;
        border-bottom: solid silver 1px ;
    }

    #menu {

        display: block;
        grid-template-rows: max-content max-content max-content max-content;
        align-items: center;
        align-self: center;
        padding: 10px 0px;
        position: sticky;
        z-index: 1000000;
        box-shadow: none;
        padding-left: 40px;

    }

    #logo {
        grid-column: 1;
        grid-row: 1;
        width: max-content;
        padding: 0px;
        padding-left: 40px;
        justify-self: center;
        align-self: center;
        margin: 0;
    }

    #logo > img {
        height: 49px;
    }

    #Hlinks > div > ul {

        gap: 30px;
    }
    
    #Hlinks > div > li > a {

    padding:  0px ;
    height: inherit;
    text-align: center;
    flex-wrap: wrap;
    text-decoration: none;
    align-content: center;
    justify-content: center;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr max-content;
}

    li > a.active{

        font-weight: bold;
        color: var(--brandGreen);
        /* border-bottom: 2px solid #FFD700; */

    }

    #Hlinks > div, .more {
        align-content: center;
        height: inherit;
    }

    #Hlinks > div > li, .more {

        height: inherit;
        align-content: center;
        padding: 0px 15px ;
        width: max-content;
    }

    

    li:hover {         
        transform: scale(1.1);
        transition: all 0.1s ease-in-out;

    }

    li > a > h4:hover {
        border-bottom: 3px solid var(--brandGreen);
        transition: all 0.1s ease-in-out;


    }


    li > a > h4 {

        margin: 0;
        color: var(--brandGreen);
        align-self: center;
        font-weight: 700    ;

    }

    a > i {
        color: var(--brandGreen);
    }

    #signup{
        display: none;
    }

    .more {
        display: none;
    }


    div > li > a > h4 {
        width: 100%;
        color: var(--brandGreen);
        text-decoration: none;
    }

}

    /* Footer */


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





/* Footer */
footer {
    background-color: var(--brandGreen);
    color: #fff;
    padding: 60px 20PX;
    width: 100vw;
    bottom: 0px;
    height: max-content;
    margin: 0px;
/*  */
}

#footer-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.footer-column {
    flex: 1;
    min-width: 180px;
    /* border: black 2px solid; */
}

.footer-column h3 {
    font-size: 1.2rem;
    padding-left: 25px;
    margin-bottom: 15px;
    color: var(--white);
    text-align: left;
    justify-self: left;

}

.footer-column > h3:nth-of-type(4) {
    margin: auto
};

.footer-column ul {
    list-style: none;
}

ul {
    list-style: none;
}

.footer-column ul li {
    margin-bottom: 10px;
    text-align: center;
    color: #fff;
    height: max-content;
}

li::marker {
    display: none;
    height: 0px;
    width: 0px;
    visibility: hidden;
}

.footer-column a {
    color: var(--secondary-color);
    text-decoration: none;
    transition: opacity 0.3s ease;
    width: max-content;
}

.footer-column a:hover {
    opacity: 0.8;
    text-decoration: underline;
}

#images-column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.social-media-icons {
    display: flex;
    gap: 15px;
    /* margin: auto; */
}

.social-media-icons img {
    width: 24px;
    height: 24px;
    transition: opacity 0.3s ease;
}

.social-media-icons a:hover img {
    opacity: 0.8;
}

.copyright {
    font-size: 0.9rem;
    opacity: 0.8;
    padding: 10px 0px;
}


/* Responsive Media Queries */


@media (max-width: 768px) {
.footer-column >  h3 {
    text-align: center;
    justify-self: center;
    padding: 0px;;
}


    #footer-links {
        gap: 40px;
    }
}

@media (max-width: 480px) {
    
    #footer-links {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .footer-column {
        align-items: center;
    }
    #images-column {
        align-items: center;
    }
}











a > .icons, i {
    height: 30px;
    font-size: 26px;
    justify-self: center;
    padding: 2px 2px 0px 15px;
}



    section.hero {
        /* height: calc(100dvh - var(--headerHeight)); */
        padding-top: calc(30px + var(--headerHeight));

    }

    .hero {
        /* height: calc(100dvh - var(--headerHeight)); */
        height: 100dvh;
        padding-top: calc(30px + var(--headerHeight));

    }

    .hero::after {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        /* max-width: 100vh; */
        z-index: -5;
        background: url(/img/bg.png);
        /* animation: hero-bg 10s ease-in-out infinite; */
    }

    
    @media (max-width:1024px) {  /* Phones and tablets */
        
        body > section#slogan {
            height: max-content;
        }
        
        
        h1 {
            font-size: 2.55rem;
            max-width: 90vw;

        }
        
        h2 {
            font-size: 2rem;
        }

        h3{
            font-size: 1.6rem;
            
        }

        .h3p {

        }

        p {
            /* max-width: ; */
        max-width: 75%;
        justify-self: center;

        }

        p.thin {
            width: auto;
        }





        #Hlinks > div > li > a {
            grid-template-columns: 65px 1fr;
        }

        li > a > .icons, i {
            padding-right: 0px ;
        }


        .advantages > div:nth-of-type(odd), .advantages > div:nth-of-type(even)  {
            padding: 0px;
    }

    .advantages {
            padding-inline: 4vw;
    }

    .pack > h2 {
        width: max-content;
    }

    .slider-container {
        align-self: normal;
    }
    }


    @media (min-width:1024px) {

    .openbtn {
        display: none
    }


    #Hlinks {

    height: inherit;
        list-style-type: none;
        /* width: ; */
        justify-self: center;
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        padding: 0;
        margin: 0px;
        font-size: 100%;
        overflow: hidden;
        align-self: center;
}

        li {
        align-self: center;
        padding-left: 2vw;
    }

    li>a {
        text-align: center;
        height: 100%;
        width: 100%;
        text-decoration: none;
        overflow: hidden;
        margin: 0px;
        display: flex;
    }

        .icons {
        height: 25px;
        padding-right: 5%;
    }
    }
    

    @media (max-width:1024px) {

        
    #menu {
        position: fixed;
        height: 100vh;    
        width: 0px;
        right: 0;
        display: none;
        transform: translateX(0);
        top: 0vh;
        z-index: 1;
        box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
        transition: 0.7s;
        opacity:100%;
        z-index: 100;
        overflow-y: hidden;
        transition: all 0.3s ease-in-out;

    }

    #menu.open {
        width: 280px;
        background-color: #F1F8F1;
        height: 100vh;
        visibility: visible;
        transition: all 30s ease-in-out;
        display: grid;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        position: fixed;
        color: white;
        right: 0;
        transition: all 0.3s ease-in-out;
        
        top: 0;

    }


.openbtn.open{
    color: white;
}

#Hlinks {
    visibility: hidden;
}

#Hlinks.open {
    display: grid;
    padding-top: 100px;
    grid-template-rows: repeat(7,max-content);
    grid-template-columns: 1fr;
    gap: 30px;
    visibility: visible;
}

    #logo{
    margin: 0px;
    grid-column:2 ;
    grid-row: 1 / span 2;

    }

        .openbtn {
        transform: translateY(7px);
        position: absolute;
        top: 0;
        right: 10px;
        background-color: transparent;
        align-self: center;
        border: none;
        cursor: pointer;
        font-size: 2em;
        color: var(--brandGreen); 
        height: max-content;
        padding: 0;
        margin: 0px;
        grid-column: 3;
        grid-row: 1/ span 2;
        z-index: 1000000000000000000000000000;
        /* padding-right: 30px; */

   

    }

    .openbtn:hover {
        color: #c97ad8;
        transition: all 0.3s ease-in-out;
    }
    }

    @media (max-width:468px) {



    }