.dark-mode {
            background-color: #121212;
            color: #ffffff;
        }
        .title {

            text-align: left;
        }
        .grid-text {
            max-width: 50ch;
        }
        .split {
            display: flex;
            justify-content: space-between;
        }
        .split p span {
            text-align: left;
            display: block;
        }
        .section {
            background-color: #ffffff;
        }
        .service-offers {
            list-style: none;
            padding: 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
        }
        .service-offers li {
            flex: 1 1 calc(33.333% - 20px);
            margin: 10px;
            background-color: #f8f9fa;
            border-radius: 64px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            text-transform: capitalize;
            font-weight: 700;
        }

        .spec {
            list-style: none;
            padding: 0;
        }
        .spec li {
            border-bottom: 1px solid #afafaf;

        }
        .spec li span{
            font-weight: 700;
        }
        .image-container {
            align-items: center;
            padding-inline: 3rem 0;
        }

        @media screen and (min-width: 300px) {
            .title {
                font-size: 32px;
                line-height: 112%;
            }
            .grid-text {
                max-width: 30ch;
            }
            .service-offers li {
                flex: 1 1 calc(100% - 20px);
            }
            .split {
                flex-direction: column; 
            }
   
        } 
            
        
        @media screen and (min-width: 768px) {
            .title {
                font-size: 64px;
                line-height: 112%;
            }
            .grid-text {
                max-width: 40ch;
            }
            .service-offers li {
                flex: 1 1 calc(33.333% - 20px);
            }
            .split {
                flex-direction: column; 
            }
        } 

        @media screen and (min-width: 1024px) {
            .title {
                font-size: 128px;
                line-height: 112%;
            }
            .grid-text {
                max-width: 60ch;
            }
            .split {
                flex-direction: row; 
            }
            .service-offers li {
                flex: 1 1 calc(50% - 20px);
            }
        } 

        @media screen and (min-width: 1200px) {
            .title{
                font-size: 172px;
                line-height: 112%;
            }
            .split {
                flex-direction: row; 
            }
            .grid-text {
                max-width: 80ch;
            }
        }