/* === LAYOUT_HOMEPAGE.CSS === */
    
    /* contains the 'elevator pitch', the 'description' text, and shortcuts to the differing services available */
    #IntroductionToBusiness{
        position: static;
        padding: var(--space-fixed-1) 5%;
        min-height: calc(100vh - var(--height-header));
        background-image: url('/assets/images/homepage/homepage_background.webp');
        background-size: cover;
        background-repeat: no-repeat;
        border: none;
    }

            /* LARGER DEVICES */
            /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

            @media (min-width: 639px){
                #IntroductionToBusiness{
                    padding: var(--space-fixed-1) 7.5%;
                }
            }

            @media (min-width: 959px){
                #IntroductionToBusiness{
                    padding: var(--space-fixed-1) 10%;
                }
            }

    /* states the primary purpose of the business */     
    .elevatorPitch {
        background: rgba(var(--colour-background-2-transparent), 0.8);
        height: auto;
        width: 100%;
        margin-bottom: var(--space-2);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 1rem;
        border: none;
    }

    /* split into two divs; a description, and the services offered */
    #OverviewOfBusiness{
        background: rgba(var(--colour-background-3-transparent), 0.85);    
        display: flex;
        flex-direction: column;
    }

    /* the first section within the parent Overview, gives a basic description of the business */
    #DescriptionOfBusiness{
        background: rgba(var(--colour-background-3-transparent), 0.35);
        padding: var(--space-4);

    }

    /* Links section (parent)*/
    #ServicesSmallerDevices{
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        padding: var(--space-4) 0;
        background: gba(var(--colour-background-3-transparent), 0.85);  
        border: none;                                
    }

    /* Links section (child) */
    #ServicesSmallerDevices a{
        border: solid 1px white;
        min-width: 33%;
        max-width: 50%;
        color: var(--colour-2);
        display: flex;
        flex-direction: column;
        flex-grow: 1; /* allows items within the parent to grow horizontally */
    }

    /* Links section (grandchild) */
    .button--MenuForSmallerDevices{
        padding: var(--space-2);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        flex-grow: 1; /* allows items within the parent to grow vertically */
        text-align: center; /* allows text that breaks to align in the middle */
        background: var(--colour-1);
    }

    
    /* MOBILE & SMALLER DEVICES */
    /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

        @media (max-width: 959px){
            
            /* do not show Services Tiles */
            #ServicesLargerDevices{
                display: none;
            }

        }   

    /* LARGER DEVICES */
    /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

        @media (min-width: 959px){
            
            /* do not show Links section */
            #ServicesSmallerDevices{
                display: none;
            }

            /* add right margin to the Description section */
            /* the first div within the 'Overview' section takes up 35% of the available width */
            #DescriptionOfBusiness{
                margin-right: var(--space-4);
                background: rgba(var(--colour-background-3-transparent), .6);
                width: 40%;
            }

            /* change the Overview section to horizontal rather than vertical */
            #OverviewOfBusiness{
                flex-direction: row;
            }

            /* the second div within the 'Overview' section takes up 65% of the available width */
            #ServicesLargerDevices{
                width: 60%;
                padding: 0;
                background: transparent;
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: space-between;
                border: none;
            }
            
                    /* controls how he 'Services Tiles' appear */
                    .servicesTile{
                        padding: 0;
                        width: fit-content;
                        min-width: 30%;
                        max-width: 49%;
                        min-height: calc(var(--services-tiles-img-height) + var(--services-tiles-h3-height));
                        background: transparent;
                        display: flex;
                        flex-grow: 1; /* allows the tiles to take up the horizontal space of parent */
                        flex-direction: column;
                        margin-left: var(--space-1);
                        margin-bottom: var(--space-1);
                    }

                            /* control the format of the image within the 'Services Tiles' */
                            .servicesTile img{
                                width: 100%;
                                height: var(--services-tiles-img-height);
                                object-fit: cover;
                            }

                            /* control the format of the h3 tag within the 'Services Tiles' appear */
                            .servicesTile h3{
                                width: 100%;
                                padding-left: var(--space-1);
                                font-family: var(--services-tiles-h3-font-family);
                                font-weight: var(--services-tiles-h3-font-weight);
                                font-size: var(--services-tiles-h3-font-size);
                                letter-spacing: var(--services-tiles-h3-letter-spacing);
                                background: linear-gradient(to right, rgba(75, 75, 75, 1), rgba(75, 75, 75, 0.7) 50%, rgba(75, 75, 75, 1));                                                          
                                display: flex;
                                align-items: center;
                                padding-left: var(--space-2);
                            }
        }

    /* VERY LARGE DEVICES */
    /* /////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

        @media (min-width: 1279px){
            
            /* increase the padding of the Introduction section */
            #IntroductionToBusiness{
                padding-left: var(--space-fixed-4);
                padding-right: var(--space-fixed-4);
            }
            
            /* increase the padding of the sub container */
            #HomepageSubContainer{
                padding: 0 var(--space-fixed-4);
            }

        }