/*  ----------  Navbar  ----------  */

 .navbar {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
     z-index: 10;
     width: 100%;
     height: 75px;
     transition: top 0.5s;
     box-shadow: 2px 2px 4px 0 rgba(0, 0, 0, .1);

     .phone-link {
        color: #f1b91b;
     }

     &.sticky {
        position: fixed;
        top: 0;
        background-color: #ffffff;
        height: auto;

        .logo_container img {
            display: block;
        }

        .phone-link {
            color: black;
        }

        .menu-icon .navicon:before,
        .menu-icon .navicon:after,
        .menu-icon .navicon {
            background: black;
        }
     }
 }

 .content_overlay {
    display: none;
     position: absolute;
     z-index: 9;
     top: 0;
     left: 0;
     width: 100vw;
     height: 110vh;
     transition: opacity .5s ease-in-out;
     background: #ffffff8f;
     pointer-events: none;
 }

 .logo_container {
     margin: 10px;
 }

 .logo_container img {
    display: none;
     height: 60px;
 }

 .nav_content_right {
     display: flex;
     flex-direction: row;
     justify-self: right;
     justify-items: center;
 }

 .navmenu {
     z-index: 10;
     display: flex;
     flex-direction: column;
     position: fixed;
     right: -310px;
     top: 0;
     min-width: 300px;
     text-align: center;
     height: 100vh;
     background-color: #ffffff;
     transition: right .4s ease-out;
     box-shadow: -4px -4px 8px 2px rgba(0, 0, 0, .1);
 }

 .navmenu ul {
     display: flex;
     flex-direction: column;
     height: auto;
     margin-top: 60px;
     padding: 0px 100px;
     list-style: none;
     overflow: hidden;
 }

 .navmenu li {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     height: auto;
     padding: 15px 0px;
 }

 .navmenu li:hover>.border {
     width: 100%;
 }

 .navmenu li a {
     display: inline-block;
     color: black;
     text-align: center;
     font-size: 20px;
     padding: 5px 0px;
     text-decoration: none;
 }

 .navmenu .border {
     border-bottom: 2px solid #f1b91b;
     width: 0%;
     transition: all 0.3s ease-in-out;
 }

 .nav_content_right .menu-icon {
     z-index: 15;
     justify-self: right;
     cursor: pointer;
     display: inline-block;
     padding: 28px 20px;
     position: relative;
     user-select: none;
 }

 .nav_content_right .menu-icon .navicon {
     background: #f1b91b;
     display: block;
     height: 2px;
     position: relative;
     transition: background .2s ease-out;
     width: 26px;
 }

 .nav_content_right .menu-icon .navicon:before,
 .nav_content_right .menu-icon .navicon:after {
     background: #f1b91b;
     content: '';
     display: block;
     height: 100%;
     position: absolute;
     transition: all .2s ease-out;
     width: 100%;
 }

 .nav_content_right .menu-icon .navicon:before {
     top: 7px;
 }

 .nav_content_right .menu-icon .navicon:after {
     top: -7px;
 }

 /* menu btn */

 .nav_content_right .menu-btn {
     display: none;
 }

.menu-btn:checked ~.content_overlay {
    display: block;
 }

 .nav_content_right:has(.menu-btn:checked)>.navmenu {
     right: 0;
 }

 .nav_content_right .menu-btn:checked~.menu-icon .navicon {
     background: transparent;
 }

 .nav_content_right .menu-btn:checked~.menu-icon .navicon:before {
     transform: rotate(-45deg);
 }

 .nav_content_right .menu-btn:checked~.menu-icon .navicon:after {
     transform: rotate(45deg);
 }

 .nav_content_right .menu-btn:checked~.menu-icon:not(.steps) .navicon:before,
 .nav_content_right .menu-btn:checked~.menu-icon:not(.steps) .navicon:after {
     top: 0;
 }

 @media (min-width: 800px) {

    .navbar.sticky {
        .navmenu {
            background-color: #ffffff;

            li a {
                color: black;
            }
        }
    }

     .navmenu {
         flex-direction: row;
         position: relative;
         height: auto;
         top: 0;
         right: 0;
         box-shadow: 0 0 0 0;
         background-color: transparent;

         li a {
            color: #f1b91b;
         }
     }

     .navmenu ul {
         margin-top: auto;
         flex-direction: row;
         height: 100%;
     }

     .navmenu li {
         height: 100%;
         padding: 0px 20px;
     }

     .navmenu li a {
         padding: 5px 0px;
     }

     .nav_content_right .menu-icon {
         display: none;
     }
 }

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

     .logo_container img {
         height: 50px;
     }

 }

 /*  ----------  Global  ----------  */

 @font-face {
     font-family: 'Acumin Pro';
     font-style: normal;
     font-weight: normal;
     src: local('Acumin Pro'), url('fonts/Acumin-RPro.woff') format('woff');
 }

 @font-face {
     font-family: 'Acumin Pro Bold';
     font-style: normal;
     font-weight: normal;
     src: local('Acumin Pro Bold'), url('fonts/Acumin-BdPro.woff') format('woff');
 }

 @font-face {
     font-family: 'Acumin Pro Bold Italics';
     font-style: normal;
     font-weight: normal;
     src: local('Acumin Pro Bold Italics'), url('fonts/Acumin-BdItPro.woff') format('woff');
 }

 * {
     box-sizing: border-box;
     margin: 0px;
     padding: 0px;
     font-family: Arial, sans-serif;
     font-size: 18px;
 }

 body {
     background-color: #F6F4F3;
 }

.main_content {
    padding: 10px;
    background-color: #F6F4F3;
    overflow: hidden;
}

section {
    margin-top: 50px;
}

 h1 {
     font-size: 28px;
     text-align: center;
     font-weight: 500;
     padding: 25px;
     font-family: 'Acumin Pro Bold Italics';
 }

 h2 {
     padding: 25px;
     text-align: center;
     font-size: 28px;
     font-family: 'Acumin Pro Bold Italics';
 }

 h3 {
    font-size: 24px;
     text-align: center;
     font-family: 'Acumin Pro Bold Italics';
 }

 p {
     font-family: 'Acumin Pro';
 }

 .container {
     z-index: 1;
 }

 .separator {
     max-width: 500px;
     margin: auto;
     margin-bottom: 50px;
     border-top: 3px solid #f1b91b;
 }

 .link {
    color: black;
 }

 /*  ----------  Footer  ----------  */

 .footer {
     width: 100%;
     margin: 0px;
     padding: 25px 15px 0px;
     background-color: white;
     box-shadow: 1px 1px 4px 0 rgba(0, 0, 0, .1);
 }

 .main {
     width: 100%;
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
     justify-content: space-around;
     align-items: center;
     gap: 25px;
     text-align: center;
 }

 .footer .button {
     display: block;
     margin: auto;
     margin-top: 35px;
     width: 165px;
     background-color: whitesmoke;
     border-radius: 5px;
     padding: 15px 7px;
     color: black;
     text-decoration: none;
     text-align: center;
 }

 .footer .contact-info {
     width: 100%;
     max-width: 250px;

     a {
        display: block;
        margin: 10px;
     }
 }

 .footer .serviceLoc {
     width: 100%;
     max-width: 250px;
 }

 .logo img {
     height: 100px;
 }

 .legal {
     display: block;
     width: 100%;
     text-align: center;
     margin-top: 20px;
 }

 .legal p {
     padding: 10px;
     font-size: 14px;
 }

 @media only screen and (max-width: 680px) {
     .legal {
         margin-top: 20px;
     }
 }