body, html {
            margin: 0;
            padding: 0;
            overflow-x: hidden;
            scroll-behavior: smooth;
        }

        .navbar {
            background-color:rgb(213, 86, 40);;
        }

        .navbar-nav .nav-link {
            color: white;
            font-weight: bold;
            margin-left: 15px;
        }

        .navbar-nav .nav-link:hover {
            color: black;
        }

        .navbar-brand img {
            height: 50px;
        }

        section {
            padding: 100px 0;
            min-height: 100vh;
        }

        #home {
            background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('your-banner-image.jpg') no-repeat center center/cover;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            text-align: center;
            animation: fadeIn 2s ease-in-out;
        }

        #about,
        #courses,
        #contact {
            animation: slideUp 2s ease-in-out;
        }

        @keyframes fadeIn {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 1;
            }
        }

        @keyframes slideUp {
            0% {
                transform: translateY(100px);
                opacity: 0;
            }

            100% {
                transform: translateY(0);
                opacity: 1;
            }
        }

        .image-container {
            overflow: hidden;
            display: inline-block;
            border-radius: 10px;
        }

        .image-container img {
            transition: transform 0.5s ease;
            width: 100%;
        }

        .image-container:hover img {
            transform: scale(1.1);
        }

        .course-card {
            transition: transform 0.4s ease, box-shadow 0.4s ease;
        }

        .course-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
        }

        .btn:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
        }

        /* Navbar brand text adjustments for smaller screens */
        @media (max-width: 767px) {
            .navbar-brand .company-name {
                white-space: normal;
                word-wrap: break-word;
                font-size: 16px;
                /* Optional: reduce font size for better readability */
                text-align: center;
            }
        }


        @media (max-width: 767px) {
            section {
                padding: 50px 15px;
            }

            .navbar-nav .nav-link {
                font-size: 14px;
                margin-left: 10px;
            }

            .image-container img {
                max-height: 300px;
            }

            .card-body {
                padding: 1.25rem;
            }

            #home {
                padding: 50px 15px;
            }

            #courses {
                padding: 60px 20px;
            }

            .course-card {
                margin-bottom: 20px;
            }
        }
        
        .footer-icon:hover {
            color: aqua;
            transition: 0.3s;
        }