.contact-btn:hover {
    background-color: #0475a9;
    opacity: .9
}

.contact-btn,
.mobile-menu .contact-btn {
    color: #fff;
    text-decoration: none;
    font-weight: 700
}

.mobile-menu,
.sticky,
.sticky #main-nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100
}

.nav-inner,
.top-bar-inner {
    display: flex;
    justify-content: space-between
}

body {
    font-family: 'Work Sans', sans-serif;
    margin: 0
}

#top-bar {
    color: #fff;
    padding: 10px 0;
    display: none
}

@media (min-width:1024px) {
    #top-bar {
        display: block
    }
}

.top-bar-inner {
    margin: 0 auto;
    align-items: center;
    font-size: 1rem
}

.contact-info-topbar,
.phon {
    display: flex;
    align-items: center
}

.phon {
    gap: 1px
}

.contact-info-topbar {
    gap: 15px
}

.contact-info-topbar a,
.phone-number a {
    color: #fff;
    text-decoration: none
}

.desktop-menu a,
.menu-links a {
    text-decoration: none;
    color: rgb(26 25 21 / 77%);
    font-weight: 600
}

.icon {
    margin-right: 10px;
    width: 20px;
    height: 20px;
    vertical-align: middle
}

.mobile-menu .contact-btn {
    display: block;
    text-align: center;
    margin-top: 20px;
    width: 100%;
    padding: 12px 16px;
    background-color: #0475a9;
    border-radius: 4px
}

.menu-header button,
.mobile-menu-toggle {
    background: 0 0;
    border: none;
    cursor: pointer;
    color: #0475a9;
    font-weight: 700
}

#main-nav {
    background-color: #f2f8fa;
    padding: 10px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    z-index: 50;
    position: relative;
    transition: .3s ease-out
}

.nav-inner {
    margin: 0 auto;
    align-items: center
}

.desktop-menu {
    display: none
}

.desktop-menu a {
    transition: color .3s
}

.desktop-menu a:hover {
    color: #0475a9
}

.mobile-menu-toggle {
    font-size: 1.9rem;
    display: block
}

.menu-header,
.menu-links a:not(:last-child) {
    border-bottom: 1px solid #eee
}

img.logo {
    max-width: 100%;
    height: auto
}

@media (min-width:768px) {
    .desktop-menu {
        display: flex;
        gap: 40px;
        font-size: 18px;
        font-weight: 700
    }

    .mobile-menu-toggle {
        display: none
    }
}

.contact-btn {
    background-color: #0475a9;
    border-radius: 3px;
    padding: 15px 40px;
    display: none
}

.sticky,
.sticky #main-nav {
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1)
}

@media (min-width:992px) {
    .contact-btn {
        display: inline-block
    }
}

.mobile-menu {
    width: 100%;
    height: 100%;
    background: #fff;
    transform: translateX(-100%);
    transition: transform .3s ease-in-out
}

.mobile-menu.show {
    transform: translateX(0)
}

.mobile-menu-content {
    padding: 20px
}

.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px
}

.menu-header button {
    font-size: 1.5rem
}

.menu-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 20px
}

.phone-and-social,
.social-icons {
    align-items: center;
    display: flex
}

.menu-links a {
    text-align: center;
    width: 100%;
    padding: 10px 0
}

.hidden-top-bar {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform .3s ease-out, opacity .3s ease-out
}

.sticky+#main-content {
    padding-top: 80px
}

@media (max-width:991px) {
    .desktop-menu {
        display: none
    }

    .mobile-menu-toggle {
        display: block
    }
}

.phone-and-social {
    gap: 20px
}

.social-icons {
    gap: 12px
}

.social-icon {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s, color .2s
}

.social-icon:hover {
    transform: translateY(-2px);
    color: #fff
}

@media (max-width:1200px) {
    .social-icons {
        gap: 8px
    }
}

@media (max-width:1100px) {
    .phone-and-social {
        flex-direction: column;
        align-items: flex-end;
        gap: 10px
    }
}