html {
            scroll-padding-top: 80px;
            /* adjust this value to match your navbar height */
        }

        body {
            font-family: "Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
            ;
        }

        .transition {
            transition: opacity 0.3s ease;
        }

        .hover-opacity-100:hover {
            opacity: 1 !important;
        }


        :root {
            --nav-bg: rgba(250, 253, 255, 0.95);
            --nav-link-color: #444;
            --underline-height: 3px;
            border-radius: 30px;
            --bs-primary: #4779c4;
        }

        .card-img-top {
            height: 250px;
            /* or whatever height fits your design */
            object-fit: cover;
        }

        .carousel-item img {
            object-fit: cover;
            height: 100vh !important;
            filter: brightness(50%);
        }

        .carousel-caption {
            top: 0;
            bottom: 0;
        }


        h1 {
            font-weight: 600;
            color: #4779c4;
            font-size: 700;
        }

        .btn {
            /* background-color: #f5b041; */
            color: #4779c4;
            border: 2px solid #4779c4;
            padding: 0.4rem 1rem;
            border-radius: 0.5rem;
            font-weight: 600;
        }

        .btn:hover {
            background-color: #4779c4;
            color: #fff;
        }

        .navbar {
            transition: background-color 0.3s ease, box-shadow 0.3s ease;
            background-color: var(--nav-bg);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .nav-logo {
            font-size: 1.5rem;
            font-weight: 700;
            color: #24559e;

        }

        .navbar.scrolled {
            background-color: var(--nav-bg);
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
        }

        .nav-link {
            position: relative;
            color: var(--nav-link-color) !important;
            padding: 0.4rem 1rem;
            font-weight: 600;
            font-size: larger;
            margin-left: 20px;
        }

        .nav-link::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: 0;
            width: 0;
            height: var(--underline-height);
            background-color: #4779c4;
            ;
            transition: width 0.3s ease;
        }

        .nav-link:hover::after,
        .nav-link:focus::after,
        .nav-link.active::after {
            width: 100%;
        }

        @media (min-width: 992px) {
            .navbar-center {
                position: absolute;
                left: 50%;
                transform: translateX(-50%);
            }
        }

        /* Mobile menu background */
        @media (max-width: 991.98px) {
            .navbar-collapse {
                background-color: var(--nav-bg);
                padding: 1rem;
                border-radius: 0 0 0.5rem 0.5rem;
            }

            .navbar-nav .nav-link::after {
                display: none;
            }

            .navbar-nav .nav-link:hover {
                background-color: rgba(0, 0, 0, 0.05);
                border-radius: 0.375rem;
            }

            .navbar-toggler {
                border: none;
                box-shadow: none !important;
            }
        }

        .btn-custom {
            background-color: #4779c4;
            color: #fff;
            border: none;
        }

        .btn-custom:hover {
            background-color: #3665a8;
        }


        .gallery-img-wrapper {
            position: relative;
            overflow: hidden;
            border-radius: 12px;
        }

        .gallery-img-wrapper img {
            transition: transform 0.4s ease;
            /* height: 100%; */
            object-fit: cover;
            width: 100%;
            height: 250px;
        }

        .gallery-img-wrapper:hover img {
            transform: scale(1.08);
        }

        .gallery-img-wrapper .overlay {
            position: absolute;
            bottom: 0;
            background: linear-gradient(to top, rgba(36, 85, 158, 0.9), rgba(71, 121, 196, 0));
            color: white;
            width: 100%;
            padding: 0.75rem 1rem;
            transition: background 0.3s ease;
            font-weight: 500;

        }



        .service-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        .service-card-link:hover .card-body h5,
        .service-card-link:hover .card-body p {
            color: #4779c4 !important;
        }

        footer a:hover {
            text-decoration: underline !important;
            color: #f8f9fa !important;
        }