body {
             
            background-color: #f8f9fa;
            margin: 0;
            padding: 0;
        }

        header {
            background-color: #343a40;
            padding: 20px 0;
        }

        header h1 {
            color: white;
            text-align: center;
        }

        nav {
            background-color: #33669900;
            border-bottom: 1px solid lightgray;
        }

        nav .nav-link {
             color: #336699 !important;
        }

        .container {
            margin-top: 30px;
        }

        footer {
            background-color: #343a40;
            color: white;
            padding: 10px;
            text-align: center;
            position: fixed;
            width: 100%;
            bottom: 0;
            margin-top: 20px;
        }

        .navbar-nav {
            height: 100%;
            padding-right: 0;;
        }
         
        .navbar-nav .nav-link {
            height: 100%;
            display: flex;
            align-items: center; /* vertically center links */
        }
       nav .nav-link {
            color: #336699 !important;
            padding: 5px 10px;
            border-radius: 2px;
            transition: background-color 0.3s, color 0.3s;
        }

        nav .nav-link:hover {
            background-color: #224466; /* darker background */
            color: white !important;    /* text turns white */
        }

        .navbar-dark .navbar-toggler-icon {
            background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23336699' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
        }
        

        #navbarNav{
                margin-top: 10px;
                direction: rtl;
                background-color: #f4831d12;
                padding-top: 7px;
                padding-bottom: 10px;
        }
        .nav-item{
                font-size: 22px !important;
        }

        footer p {
            margin-bottom: 0;
        }

        .custom-toggler:focus,
        .custom-toggler:active,
        .custom-toggler:focus-visible {
           box-shadow: 0 0 0 0.25rem rgb(247 210 163);
        }
        /* Custom Hamburger Button */
        .custom-toggler .navbar-toggler-icon {
            display: none; /* Hide default hamburger */
        }
        .toggler-text {
            color: #224466;
            font-weight: bold;
            font-size: 18px;
        }

         
        .logo {
        max-width: 50%;
        margin: 0 auto 20px;
        display: block;
        }
        .contact-card {
        display: flex;
        align-items: center;
        gap: 15px;
        text-decoration: none;
        color: inherit;
        height: 100%;
        }
        .icon {
        font-size: 2.5rem;
        color: #0d6efd;
        min-width: 50px;
        }
        .contact-card:hover {
        background-color: #f8f9fa;
        border-radius: 10px;
        transition: 0.3s;
        }


        

        /* Customizations for mobile view */
        @media (max-width: 768px) {
            header h1 {
                font-size: 24px;
            }
        }
        @media (min-width: 992px) {
                .navbar-expand-lg .navbar-collapse {
                    background-color: unset !important;
                }
            }