/* === LAYOUT_SERVICES.CSS === */

    /* DESCRIPTION section */
    /* ============================================== */ 
    
        /* The first part of the 'Description'. This is the only part shown on the Homepage */
        .text{
            margin-bottom: var(--space-4);
            min-height: 140px;
        }

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

                @media (min-width: 639px){
                    
                    /* set the height of the first .text section to be as tall as the image */
                    .text:first-of-type{
                        min-height: 200px;
                    }
                    
                    /* remove height from all subsquent .text sections  */
                    .text{
                        min-height: 0;
                    }
                    
                    /* set .summaryOfService class to the same minimum as .text */
                    .summaryOfService{
                        min-height: 190px;
                    }

                }

                @media (min-width: 959px){
                        
                    .text:first-of-type{
                         min-height: 300px;
                    }

                    .text{
                        min-height: 0;
                    }

                    .summaryOfService{
                        min-height: 220px;
                    }

                }
            
        /* Each service has an image associated with it. */
        .img--FloatLeft{
            object-fit:contain;
            float: left;
            padding: 0;
            margin: var(--space-1) var(--space-4) var(--space-2) 0 ;
        }

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

                    @media (min-width: 399px){

                        /* make image bigger */
                        .img--FloatLeft{
                            height: auto;
                            width: 200px;
                        }

                    }

                    @media (min-width: 639px){

                        /* make image bigger */
                        .img--FloatLeft{
                            height: auto;
                            width: 300px;
                        }

                    }

                    @media (min-width: 959px){

                        /* make image bigger */
                        .img--FloatLeft{
                            height: auto;
                            width: 450px;
                        }

                    }

        /* about image does not act the same as service images */
        .text--AboutImage{
            object-fit:contain;
            width: 300px;
            margin: 0 auto var(--space-4) auto;
        }

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

                    @media (min-width: 1279px){

                        /* make image bigger */
                        .text--AboutImage{
                            float: right;
                            height: auto;
                            width: 250px;
                            margin: 0 0 var(--space-2) var(--space-4);
                        }

                    }
        
        /* when .summaryOfService comes immediately after .detailsOfService (e.g. 'Software Development') */
        .detailsOfService + .summaryOfService{
            margin-top: var(--space-fixed-2);
        }
                            
        /* button parent tag */
        .clickForDetails{        
            width: 100%;
        }

        /* The button is nested inside an A tag */
        .clickForDetails a{
            width: 100%;
            display: flex;
            flex-direction: row;
            padding: 0;
            justify-content: center;
        }

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

                    @media (min-width: 639px){

                        /* move the position of the button */
                        .clickForDetails a{
                            justify-content: start;
                        }     
                        
                    }
        
        /* The button itself */
        .button--ClickForDetails {
            display: block;
            background: rgb(50, 140, 130);
            padding: 0.5rem 1rem;
            border: 1px solid black;
            color: white;
            width: fit-content;
        }

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

        .benefits{
            background: var(--colour-1);
            border-radius: 10px;
            display: block; /* for when used with span elements */
            margin-bottom: 2rem;
        }

        .benefits:last-child{
            margin-bottom: 0;
        }

        .benefits--Heading{
            margin-bottom: var(--space-2);
            text-decoration: underline;
            text-underline-offset: 4px;
            text-decoration-thickness: 2px;
        }

        .benefits--Text{
            color: #ddd;
        }

        .benefits--Example{
            margin-bottom: var(--space-2);
            /* margin-left: var(--space-2); */
        }

        .benefits--ExampleSituation{
            margin-left: var(--space-4);
            margin-bottom: var(--space-1);
            color: var(--colour-text-2);
            font-weight: bold;
        }

        .benefits--ExampleResolution{
            color: var(--colour-text-3);
            margin-left: var(--space-4);
            padding-bottom: var(--space-5);
        }

    /* PRICES section */
    /* ============================================== */

        .prices{
            display: flex;
            flex-direction: column;
            justify-content:start;
            align-items: center;
        }
    
        .pricesTable{
            width: 70%;
            min-width: 300px;
            max-width: 800px;
            margin-bottom: var(--space-fixed-2);
            text-align: center;
        }

        .pricesTable .tableLeftAlign{
            text-align: left;
            padding-left: var(--space-2);
        }

        .pricesTable thead{
            background: #666;
            color: #ccc;
        }

        .pricesTable td:nth-child(1){
            background: #aaa;
        }

        .pricesTable td:nth-child(2){
            background: #888;
            color: #fff;
        }

        .pricesTable td:nth-child(3){
            background: #777;
            color: #fff;
        }

    /* PORTFOLIO section */
    /* ============================================== */

        /* see portfolio CSS file */

    /* CASE STUDIES section */
    /* ============================================== */
  

    /* NEXT STEPS section */
    /* ============================================== */

        .nextSteps{
            display: flex;
            flex-direction: row;
            justify-content: center;         
        }

        .nextSteps--Image{
            width: 100px;
            height: 100%;
        }

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

            @media (min-width: 639px){
                .nextSteps img{
                    width: 150px;
                }
            }

            @media (min-width: 959px){
                .nextSteps img{
                    width: 200px;
                }
            }