html {
    font-family: google sans; arial;
    margin-left: 5px;
    margin-right: 5px;
    padding-bottom: 300px;
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}

/*Fonts*/
        p {
            font-size: 1rem;
        }

/*dots*/
        .dot1 {
            font-size: 1rem;
            color: greenyellow;
        }

        .dot2 {
            font-size: 1.5rem;
            color: yellowgreen;
        }

        .dot3 {
            font-size: 1.5rem;
            color: aqua;
        }

        .dot4 {
            font-size: 1.5rem;
            color: orange;
        }

/*tagline*/
        .tagline {
            display: inline-block;
            background-color: lightsalmon;
            border: 1px solid orange;
            padding: 5px 15px 5px;
            border-radius: 20px;
            font-size: 12px;
            color: black;
            transition: box-shadow 0.3s ease-in-out;
        }
            
            .tagline2 {
            margin: 5px auto 15px;
            width: fit-content;
            background-color: lightsalmon;
            padding: 5px 15px 5px;
            border-radius: 20px;
            border: 1px solid orange;
            font-size: 12px;
            color: black;
            transition: box-shadow 0.3s ease-in-out;
        }

            .tagline:hover {
                box-shadow: 0 0 15px 1px rgba(255, 187, 0, 0.75);
            }
            .tagline2:hover {
                box-shadow: 0 0 15px 1px rgba(255, 187, 0, 0.75);
            }

            .div-tagline3 {
                display: flex;
                justify-content: space-evenly;
            }

            .tagline3 {
            display: flex;
            align-items: center;
            padding: 0px 10px 0px;
            border-radius: 20px;
            border: 1px solid gray;
            background-color: rgba(255, 255, 255, 0.5);
            font-size: 0.6rem;
            color: black;
            }
           

/*buttons*/
        button {
            cursor: pointer;
        }
            

        p {
            margin-bottom: 20px;
        }

/* hero section */
        .hero-section {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }


            @media (max-width: 480px) {
            .hero-section {
                grid-template-columns: 1fr;
            }}


            .div-left-side {
                    background-color: lightblue;
                }
                    .h1-buttons {
                        margin: 5px 10px 5px;
                        
                    }
                    .div-stats-container {
                        display: flex;
                        text-align: center;
                        justify-content: space-evenly;
                    }

                .div-right-side {
                    background-color: lightpink;
                }

.services {
    margin-top: 50px;
    text-align: center;
}

/*about lylmedia*/
            .div-about-us {
                padding-top: 20px;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: 15px;
            }


                @media (max-width: 480px) {
                .div-about-us {
                    grid-template-columns: 1fr;
                }}