/* Serden palette. Page stylesheets map their own tokens onto these names. */
:root {
    --serden-evergreen: #153A2B;
    --serden-evergreen-hover: #102E22;
    --serden-ivory: #F7F4ED;
    --serden-white: #FFFFFF;
    --serden-sage: #E8EEE8;
    --serden-stone: #DDDCD3;
    --serden-text-secondary: #526159;
    /* Error text on evergreen surfaces, where the usual reds are too dark to read. */
    --serden-error-on-dark: #FFD0C2;
}

body {
    color: #153A2B;
    background-color: #fff;
    font-family: "Poppins", sans-serif;
}

a {
    color: #153A2B;
    text-decoration: none;
    transition: 0.3s;
}
p{
    /*font-size: 25px;*/
    color: #153A2B}
a:hover {
    text-decoration: none;
}
.text-underline{
    text-decoration: underline;
}
img{
    max-width: 100%;
}
ol,ul {
    list-style-image: none;
    list-style-position: outside;
    list-style: none;
    margin: 0;
    padding: 0;
}
.container{
    max-width: 1480px;
}
h1{
    font-size: 60px;
}

h2{
    font-size: 70px;
    font-weight: 700;
}
h3{
    font-size: 28px;
}
.bg-enchaning{
    background-color: #153A2B;
}
.bg-twilight{
    background-color: #2d4e41;
}
.bg-sealion{
    background-color: #2d4e41;
}

.text-enchaning{
    color: #153A2B;
}
.text-twilight{
    color: #2d4e41;
}
.text-sealion{
    color: #2d4e41;
}

.btn{
    font-size: 16px;
    font-family: "Poppins", sans-serif;
    color: #fff;
    font-weight: 600;
    border-radius: 50px;
    padding: 10px 30px;
}
.btn.btn-sm{
    padding: 5px 15px;
    font-size: 14px;
    font-weight: 500;
}
.btn-primary{
    background-color: #153A2B;
    border-color: #153A2B;
}
.btn-primary:hover, :not(.btn-check)+.btn:active{
    background-color: #2d4e41;
    border-color: #2d4e41;
}

.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active, :not(.btn-check) + .btn:active, .btn.disabled, .btn:disabled, fieldset:disabled .btn {
    background-color: #153A2B;
    border-color: #153A2B;
}

.btn-secondary{
    background-color: #2d4e41;
    border-color: #2d4e41;
}
.btn-secondary:hover, :not(.btn-check)+.btn:active{
    background-color: #153A2B;
    border-color: #153A2B;
}
.btn.btn-outline-primary{
    padding: 10px 20px;
    border: solid 1px #153A2B;
}

.btn-outline-primary:hover, .btn.show.btn-outline-primary{
    background-color: #153A2B;
    border-color: #153A2B;
    color: #fff;
}
.btn.btn-outline-primary:hover img, .btn-outline-primary:active img, .btn.show.btn-outline-primary img{
    filter: brightness(0) saturate(100%) invert(99%) sepia(67%) saturate(0%) hue-rotate(189deg) brightness(107%) contrast(101%);
}
.form-control{
    border-radius: 20px;
    padding: 8px 25px;
    border: solid 1px #2d4e41;
}
.form-control:focus{
    border: solid 1px #2d4e41;
    box-shadow: none;
}
.form-select {
    border: solid 1px #2d4e41;
    padding: 10px 50px 10px 20px;
    border-radius: 120px;
    background-image: url(../images/dropdown-arrow.svg);
    background-size: 35px;
    margin-right: 20px;
}
.form-check{
    display: inline-block;
}
.form-check-input:checked{
    background-color: #153A2B;
    border-color: #153A2B;
}
.form-check-input:focus{
    box-shadow: none;
    border-color: #153A2B;
}
label{
    font-size: 15px;
    padding-left: 5px;
}

.section-space{
    padding: 70px 0;
}
.section-space-top{
    padding-top: 70px;
}
.section-space-bottom{
    padding-bottom: 70px;
}
.top-section-space{
    padding-top: 170px;
}

.header{
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1030;
    /* The bar is full-width and transparent around the pill. Clicks in those
       empty regions must reach the page underneath (search modes, estimate
       actions, etc.). */
    pointer-events: none;
}
.header-container {
    background-color: #153A2B;
    border-radius: 100px;
    padding: 0 40px;
    min-height: 60px;
    margin-top: 35px;
    max-width: 96%;
    pointer-events: auto;
}
.navbar .nav-link, .navbar-nav .nav-link.active, .navbar-nav .nav-link.show{
    color: #fff;
}
.navbar-expand-lg .navbar-nav .nav-link{
    padding: 8px 20px;
}
.main-container{

}
.dropdown-item.active, .dropdown-item:active{
    background-color: #153A2B; 
}
.user-dropdown .dropdown-menu{
    right: 0;
    left: auto;
}
.home-video {
    position: relative;
    height: 100vh;
    overflow: hidden;
    color: #fff;
    text-align: center;
}
.home-video video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    transform: translate(-50%, -50%);
    background-size: cover;
}
.home-video .banner-content {
    position: relative;
    z-index: 2;
    top: 50%;
    transform: translateY(-50%);
}
.home-video::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.2); /* overlay */
    z-index: 1;
    display: none;
}

.discussion-search-section {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    justify-content: center;
}
.discussion-search-select{
    display: flex;
    
}
.discussion-search-select .form-select{
    border: solid 1px #153A2B;
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
    min-width: 350px;
    background-image: none;
    background-size: 35px;
    margin-right: 20px;
}
.discussion-search-select input.form-control{
    border: solid 1px #153A2B;
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
    min-width: 350px;
    margin-right: 20px;
}
.discussion-search-section .main-search{
    width: auto;
    margin: 0;
    border: none;
    padding: 0;
    background-color: transparent;
}
.main-search{
    position: relative;
    border: solid 1px #2d4e41;
    padding: 10px 30px 10px 30px;
    border-radius: 120px;
    display: flex;
    align-items: center;
    width: 85%;
    margin: 0 auto;
    background-color: #fff;
}
.main-search .form-control {
    border: none;
    padding: 10px;
    border-radius: 0px;
    flex: 1 1 auto;
    width: auto;
}
.discussion-search-section .form-control {
    border: solid 1px #153A2B;
    padding: 20px 50px 20px 30px;
    border-radius: 120px;
}

.main-search .form-control:focus {
    outline: none;
    box-shadow: none;
}

.main-search .main-search-icon {
    z-index: 2;
    display: inline-block;
   width: 40px;
    min-width: 55px;
    height: 55px;
    line-height: 52px;
    text-align: center;
    color: #fff;
    background: #153A2B;
    border-radius: 100%;
    border: none;
}
.banner-content h1{
    font-size: 96px;
    position: relative;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 80px;
}
/*.banner-content h1::before{
    content: '';
    position: absolute;
    width: 170px;
    height: 170px;
    background-color: #253B3D;
    border-radius: 100px;
    top: -28px;
    z-index: -1;
    left: 30px;
}*/
.banner-content h1 strong{
    font-weight: 700;
    color: var(--serden-ivory);
}

.top-categories{
    border-top: solid 1px #2d4e41;
}
.top-categories-list{
    display: flex;
    flex-wrap: wrap;
}
.top-categories-box{
    padding: 20px 12px;
    text-align: center;
    flex: 1 1 15%;
    margin: 10px 6px;
}
.top-categories-box p{
    font-size: 16px;
}

.top-categories-icon{
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    margin: 0 auto;
    justify-content: center;
    background-color: var(--serden-evergreen);
    border-radius: 100%;
    margin-bottom: 20px;
    transition: all 150ms ease-in-out;
}
.top-categories-icon img{
    /* Some icons carry accent-colored strokes; flatten them to white on the evergreen disc. */
    filter: brightness(0) invert(1);
}
.top-categories-box:hover .top-categories-icon{
    top: -5px;
    position: relative;
}

.business-home{
    padding-top: 80px;
    display: flex;
    align-items: center;
}
.business-home h2{
    font-size: 60px;
    color: #fff;
    font-weight: 400;
}
.business-home h2 strong{
    color: var(--serden-ivory);
}
.business-hero{
    text-align: right;
    margin-right: -20px;
    margin-bottom: -30px;
    min-width: 700px;
}
.business-content{
    margin-left: 5%;
}
.business-content .star{
    max-width: 105px;
}

.help-section {
    background-color: var(--serden-sage);
    position: relative;
    overflow: hidden;
    padding: 60px 20px 0;
  }

  .phone-img {
    max-width: 300px;
    width: 100%;
    height: auto;
    z-index: 2;
    position: relative;
  }

  .help-text h2 {
    color: #2f4d49;
    font-weight: 700;
    font-size: 70px;
  }

  .help-text p {
    color: #2f4d49;
    font-size: 25px;
    margin-top: 10px;
    margin-bottom: 20px;
    max-width: 100%;
  }
  .help-image{
    order: 0;
    text-align: right;
  }
  .help-text{
    order: 1;
  }


  .half-circle-wrapper {
    position: absolute;
    top: 55%;
    background-image: url(../images/white-circle.svg);
    min-width: 990px;
    height: 900px;
    z-index: -1;
    background-size: cover;
    left: 70px;
    background-repeat: no-repeat;
  }

  footer{
    background-color: #153A2B;
  }
  footer .text-warning{
    color: var(--serden-ivory) !important;
  }
  /* Sign-up validation messages are warnings, not decoration, so they keep an error tone. */
  footer .text-warning.footer-form-error{
    color: var(--serden-error-on-dark) !important;
  }
  .footer-link {
    color: #ccc;
    text-decoration: none;
    
    display: inline-block;
  }
  li .footer-link{
    padding-bottom: 15px;
  }
/* The email sign-up at the top of the footer (EmailSignup.razor). A compact band in the style of the site's other
   evergreen bands (.fpc-band): a small heading and one line of text on the left, the email field on the right, and
   everything stacked and centred on tablets and phones, like the rest of the footer on phones. */
.footer-signup {
    display: flex;
    gap: 20px 48px;
    align-items: flex-start;
    justify-content: space-between;
    padding: 0 0 32px;
    border-bottom: 1px solid rgba(247, 244, 237, .25);
    font-family: "Poppins", sans-serif;
}

.footer-signup__text {
    flex: 1 1 auto;
    max-width: 620px;
}

.footer-signup .footer-signup__kicker {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 0 0 8px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #CFE3D8;
}

.footer-signup .footer-signup__title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}

.footer-signup .footer-signup__lead {
    margin: 8px 0 0;
    font-size: 15px;
    line-height: 1.55;
    color: rgba(255, 255, 255, .85);
}

.footer-signup__form {
    flex: 0 1 460px;
    min-width: 0;
    padding-top: 6px;
}

.footer-signup__field {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 5px 5px 5px 20px;
    border: 1px solid rgba(255, 255, 255, .6);
    border-radius: 999px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* The field's ring shows keyboard focus, so the input itself needs no outline. */
.footer-signup__field:focus-within {
    border-color: #fff;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .18);
}

.footer-signup__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 8px 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    color: #fff;
    text-overflow: ellipsis;
}

.footer-signup__input::placeholder {
    color: rgba(255, 255, 255, .75);
    opacity: 1;
}

.footer-signup__input:focus {
    outline: none;
}

.footer-signup__button {
    display: inline-flex;
    flex: none;
    gap: 8px;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--serden-evergreen);
    transition: background-color .15s ease, opacity .15s ease;
}

.footer-signup__button:hover:not(:disabled) {
    background: var(--serden-ivory);
}

.footer-signup__button:focus-visible {
    outline: 3px solid #E2793A;
    outline-offset: 2px;
}

/* Stays off until the security check below the field has passed. */
.footer-signup__button:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.footer-signup .footer-signup__error {
    margin: 8px 0 0 20px;
    font-size: 13.5px;
}

.footer-signup__check {
    display: flex;
    margin-top: 12px;
}

.footer-signup .footer-signup__done {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 0;
    padding: 14px 20px;
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}

@media (max-width: 991.98px) {
    .footer-signup {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .footer-signup__text {
        max-width: none;
    }

    .footer-signup .footer-signup__kicker,
    .footer-signup__check,
    .footer-signup .footer-signup__done {
        justify-content: center;
    }

    .footer-signup__form {
        flex: none;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
        padding-top: 0;
    }

    .footer-signup .footer-signup__error {
        margin-left: 0;
    }
}

/* On the narrowest phones the button keeps only its arrow, as it had before, so the placeholder fits. Screen readers
   still hear "Subscribe". */
@media (max-width: 479.98px) {
    .footer-signup__button {
        padding: 0 16px;
    }

    .footer-signup__button-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

  .footer-link:hover {
    color: #fff;
    text-decoration: underline;
  }
  
  .footer-socials a:hover {
    color: var(--serden-ivory);
  }
  .footer-bottom{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .footer-socialmedia{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.footer-socialmedia a{
    background-color: rgba(255,255,255,0.1);
    width: 35px;
    height: 35px;
    border-radius: 100%;
    text-align: center;
    margin-left: 10px;
    line-height: 32px;
}
.footer-socialmedia a:hover{
    background-color: #1c2324;
}
.footer-logo{
    display: none !important;
}

.page-with-sidebar .sidebar-main-content {
    padding-top: var(--dash-content-top);
}

.rz-notification-success .rz-notification-item {
    color: var(--rz-notification-success-color);
    background-color: #2d4e41!important;
    
}
.rz-notification-item-wrapper {
    width:270px !important;
    min-width:25rem !important;
}
.navbar-expand-lg .navbar-nav .nav-link.dropdown-toggle::after {
    display: none;
}

/* Tools: show Estimates / Invoices on hover (desktop); clicking "Tools" goes to /membership */
@media (min-width: 992px) {
    .navbar-nav .nav-tools-dropdown {
        position: relative;
    }

    .navbar-nav .nav-tools-dropdown .dropdown-menu {
        margin-top: 0;
    }

    .navbar-nav .nav-tools-dropdown:hover .dropdown-menu,
    .navbar-nav .nav-tools-dropdown:focus-within .dropdown-menu {
        display: block;
    }
}

/* Mobile: show Tools sub-links when the nav drawer is open */
@media (max-width: 991.98px) {
    .navbar-collapse.show .nav-tools-dropdown .dropdown-menu {
        display: block;
        position: static;
        transform: none !important;
        float: none;
        margin-top: 0;
        border: 0;
        padding-left: 1rem;
    }
}

.navbar-collapse .dropdown-menu {
    background-color: #2d4e41;
    padding: 5px 5px;
    min-width: 215px;
}

    .navbar-collapse .dropdown-menu li {
        border-bottom: solid 1px #D9D9D9;
        padding: 10px 5px;
        color:#fff;
    }

        .navbar-collapse .dropdown-menu li:last-child {
            border-bottom: none;
        }

.navbar-collapse .dropdown-item {
    color: #fff;
}

    .navbar-collapse .dropdown-item:focus, .navbar-collapse .dropdown-item:hover {
        background-color: var(--serden-sage);
        border-radius: 20px;
        color: var(--serden-evergreen);
    }

.navbar-nav .nav-serden-plus .nav-link {
    white-space: nowrap;
}

.nav-serden-plus .nav-plus {
    color: #9fd3b4;
    font-weight: 700;
}

/* Features menu: each entry says what it is, so visitors know where a link goes
   before they click it. */
.navbar-collapse .dropdown-menu.nav-feature-menu {
    min-width: 320px;
    padding: 8px;
}

.nav-feature-menu li {
    padding: 0;
}

.nav-feature-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 14px;
    white-space: normal;
}

.nav-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, .12);
    color: var(--serden-ivory);
    font-size: 14px;
}

.nav-feature-menu .dropdown-item:hover .nav-feature-icon,
.nav-feature-menu .dropdown-item:focus .nav-feature-icon {
    background-color: var(--serden-evergreen);
    color: var(--serden-ivory);
}

.nav-feature-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

    .nav-feature-text strong {
        font-size: 15px;
        font-weight: 600;
    }

    .nav-feature-text small {
        font-size: 12.5px;
        opacity: .75;
    }