@media (min-width:300px) and (max-width:500px) {
        .navbar-brand img {
            height: 60px !important;
        }
    }
    
    @media (max-width: 1200px) and (min-width: 993px) {

        /* top bar + navbar */
        .custom-navbar {
            padding: 0.75rem 10px;
            height: auto;
        }

        .navbar-brand img {
            height: 80px !important;
        }

        .navbar-nav {
            gap: 6px !important;
        }

        .nav-link {
            font-size: 12px !important;
            padding: 0.5rem 0.25rem;
        }

        .navbar-btn {
            font-size: 0.9rem;
            padding: 0.45rem 1.25rem;
        }

        .navbar-toggler {
            padding: 0.25rem 0.5rem;
        }
    }

    @media screen and (max-width:1200px) {
        .container {
            width: 100% !important;
        }
    }


    @media screen and (max-width:992px) {

        /* top bar + navbar */
        .top-bar {
            display: block !important;
            position: relative;
            z-index: 1030;
            padding-left: 0 !important;
            padding-right: 0 !important;

        }


        .custom-navbar {
            position: fixed !important;
            top: 0;
            z-index: 1040;
            padding: 0.75rem 0;
        }

        body {
            padding-top: 100px;
        }

        .offcanvas-style {
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100vh;
            background-color: var(--secondary-color);
            padding-top: 5rem;
            transition: all 0.4s ease;
            z-index: 1040;
        }

        .offcanvas-style.show {
            left: 0;
        }

        .navbar-nav {
            flex-direction: column;
            align-items: flex-start !important;
        }

        .nav-link {
            padding: 0.75rem 1rem;
            font-size: 1.1rem;
        }

        .toggle-icon.bi-x {
            color: var(--white);
        }

        

            .footer-social {
                margin: 0 auto;
            }
    }

    @media screen and (max-width:435px) {

         .site-footer {
                text-align: center;
            }
    }