.hero {
            background-image: url('iTi Bootstrap5 Task/Assets/hero-bg.jpg');
            background-size: cover;
            background-position: center;
            height: 60vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .card {
            background-color: rgb(239, 239, 239);
        }

        .card:hover {
            transition: all 0.3s ease-in-out;
            cursor: pointer;
            background-color: rgb(61, 139, 235);
            color: white;
        }

        .autoplay img {
            width: 80%;
        }

        .services-card {
            transition: all 0.3s ease-in-out;
        }

        .services-card:hover {
            border-color: #106eea !important;
        }

        section {
            scroll-margin-top: 100px;
        }

        .img-fluids {
            height: 40px;
            object-fit: contain;
        }

        .badge {
            cursor: pointer;
        }

        .badge:hover {
            /* transform: scale(1.1); */
            transition: all 0.3s ease-in-out;
        }

        .border {
            cursor: pointer;
        }

        .border:hover {
            transform: scale(1.05);
            transition: all 0.5s ease-in-out;
        }

        ul li {
            list-style: none;
        }

        ul li a {
            text-decoration: none;
            color: black;
        }

        ul li a:hover {
            color: #106eea;
        }