section#atoz {
    display: flex;
    flex-wrap:wrap;
    gap: 15px;
    border-top: 1px solid var(--darkgrey);
    border-bottom: 1px solid var(--darkgrey);
    padding: 10px var(--layoutpadding);
}

    section#atoz div {
        margin: 0 10px;
        padding:5px 0;
    }

    section#atoz a {
        text-decoration: none;
        color: var(--blue);
        font-weight: bold;
        padding:5px;
    }
        section#atoz a:hover{
            text-decoration:underline;
        }

        section#popularServices {
            padding: 0 var(--layoutpadding);
        }

    section#popularServices h2{
        padding:40px 0 20px 0;
    }

    section#popularServices > div {
        display: flex;
        gap: 20px;
        width: 100%;
        align-items: stretch;
        flex-wrap:wrap;
    }

        section#popularServices > div a {
            flex-grow: 1;
            border: 1px solid var(--darkgrey);
            padding: 31px;
            border-radius: var(--radius);
            text-decoration: none;
            color: var(--blue);
            font-weight: bold;
            background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%231f1f1f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>');
            background-repeat: no-repeat;
            background-position: 94% 50%;
        }

            section#popularServices > div a:hover {
                background-color: var(--midgrey);
                text-decoration: underline;
            }
section#atozLinks{
    padding: 0 var(--layoutpadding) var(--layoutpadding) var(--layoutpadding);
}



section#atozLinks h2{padding: 40px 0 20px 0;}

section#atozLinks ul li{
    padding:5px;
    margin:5px;
}

section#atozLinks a{text-decoration:none;}

section#atozLinks a svg{ 
    position:relative; 
    top:3px; 
    left:5px;
    margin-top:-6px;
    height:20px;
}

section#atozLinks a:hover{text-decoration:underline;}

section#atozLinks a:hover svg{fill:var(--cyan);}

section#allServices {
    padding: 0 var(--layoutpadding);
}

    section#allServices h2 {
        padding: 40px 0 20px 0;
    }

    section#allServices div#quicklinks {
        display: grid; 
         grid-template-rows: 340px; 
         grid-auto-rows: 340px; 
         grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
         gap: 20px; 
         margin: 20px 0;
    }

        section#allServices div#quicklinks > div {
            flex: 1;
            display: flex;
            flex-direction: column;
            background-color: var(--paleblue);
            justify-content: space-between;
            border-bottom-left-radius: var(--radius);
            border-bottom-right-radius: var(--radius);
        }

            section#allServices div#quicklinks > div h3 {
                background-color: var(--blue);
                color: var(--white);
                margin: 0 0 20px 0;
                padding: 25px 10px 25px 20px;
                border-top-left-radius: var(--radius);
                border-top-right-radius: var(--radius);
            }

            

            section#allServices div#quicklinks > div a:not(.more) {
                text-decoration: none;
                margin: 8px 20px;
                font-weight: bold;               
            }

                section#allServices div#quicklinks > div a:not(.more):hover {
                    text-decoration: underline;
                }

            section#allServices div#quicklinks > div a.more {
                text-align: center;
                padding-top: 10px;
                padding-bottom: 10px;
                text-decoration: none;
                background-color: var(--white);
                margin: 19px 18px;
                border: 1px solid var(--midgrey);
                font-weight: bold;
                border-radius: var(--smallRadius);
            }

                section#allServices div#quicklinks > div a.more:hover {
                    background-color: var(--lightgrey);
                }

           
     section#allServices div.mainLinks { 
         display: grid; 
         grid-template-rows: 240px; 
         grid-auto-rows: 240px; 
         grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); 
         gap: 20px; 
         margin: 20px 0;
     }

    /*section#allServices div.mainLinks {
        display: flex;
        justify-content: space-evenly;
        gap: 20px;
        margin: 20px 0;
    }*/
        
        section#allServices div.mainLinks > div {
            border: 1px solid var(--midgrey);
            flex: 1;
            display: flex;
            flex-direction: column;
            border-radius: var(--radius);
            background-color: var(--white);
        }

            section#allServices div.mainLinks > div a.serviceLink{
                margin:0 !important;
            }

            section#allServices div.mainLinks > div h3 {
                color: var(--blue);
                margin: 0;
                padding: 20px 10px 20px 10px;
                border-bottom: 1px solid var(--midgrey);
            }

                section#allServices div.mainLinks > div h3 img{
                    height:24px;
                    margin: 0 10px -2px 0;
                }

                section#allServices div.mainLinks > div h3:hover{
                    text-decoration:underline;
                }

                    section#allServices div.mainLinks > div h3:hover img.tabIcon{
                        display:none;
                    }

                    section#allServices div.mainLinks > div h3:hover img.rolloverIcon {
                        display:inline !important;
                    }


                    section#allServices div.mainLinks > div h3:after {
                        content: '';
                        background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%231f1f1f"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z"/></svg>');
                        background-repeat: no-repeat;
                        display: inline-block;
                        height: 24px;
                        width: 24px;
                        position: relative;
                        top: 5px;
                        left: 10px;
                    }

            section#allServices div.mainLinks > div a {
                text-decoration: none;
                margin: 10px;
                font-weight: bold;
            }

                section#allServices div.mainLinks > div a:hover{
                    text-decoration:underline;
                }

                section#atozfooter {
                    display: flex;
                }

    section#atozfooter > div {
        flex-grow: 1;
        padding: var(--layoutpadding);
    }

        section#atozfooter > div:nth-child(1) {
            background-color: var(--paleblue);
        }

        section#atozfooter > div:nth-child(2) {
            background-color: var(--lightcyan);
            text-align: center;
        }

        section#atozfooter > div h2 {
            color: var(--blue);
            margin: 20px 0;
            font-size:175%;
        }

        section#atozfooter > div h3 {
            color: var(--blue);
            margin: 35px 0 15px 0;
        }

        section#atozfooter > div p {
            margin: 15px 0;
            line-height:1.5em;
            color: var(--darkgrey);
        }

        section#atozfooter > div ul {
            list-style:none;
            margin:0;
            padding:0;
        }

            section#atozfooter > div ul li {
                margin: 10px 0;
            }

                section#atozfooter > div ul li span {
                    display:inline-block;
                    width:90px;
                }

                section#atozfooter > div ul li a {
                    color: var(--blue);
                    font-weight:bold;
                }

                section#atozfooter > div ul li a:hover {
                    text-decoration:none;
                }

        section#atozfooter > div#letsTalk a{
            display:inline-block;
            background-color:var(--blue);
            color:var(--white);
            padding:15px 30px;
            margin:20px 0 0 0;
            text-decoration:none;
            border-radius:var(--radius);
        }

            section#atozfooter > div#letsTalk a:hover {
                background-color: var(--black);
            }



@media only screen and (max-width: 999px){
    main section#pageHeading{
        height:210px;
    }

            main section#pageHeading h1{
                padding:20px var(--layoutpaddingMobile);
            }

            main section#pageHeading span{
                padding:0 var(--layoutpaddingMobile);
                display:block;
            }

            section#atoz{
                 padding:10px var(--layoutpaddingMobile);
            }

            section#atoz div{
                width: 100%;
                margin:0;
            }

            section#popularServices{
                padding:0 var(--layoutpaddingMobile);
            }

            section#popularServices > div{
                flex-direction:column;
            }

            section#allServices{
                padding:0 var(--layoutpaddingMobile);

            }

            section#allServices div#quicklinks{
                grid-template-columns: 1fr;
                display:flex;
                flex-direction:column;
            }

            section#allServices div.mainLinks{
                grid-template-columns: 1fr;
                display:flex;
                flex-direction:column;
            }

            section#atozfooter{
                flex-direction:column;
            }

            section#atozfooter > div{
                 padding:var(--layoutpaddingMobile);
            }
}