/* ---- Main nav bar ---- */
.custom-nav {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;
}

.custom-nav__left-side-container {
    display: flex;
    align-items: center;
}

.custom-nav__resources-desktop {
    display: flex;
    align-items: center;
    height: 100%;
    margin-left: 35px;
}

.custom-nav__logo {
    margin-left: 30px;
}

.custom-nav__logo-svg {
    width: 170px;
    height: auto;
}

.custom-nav__resource {
    display: flex;
    align-items: center;
    cursor: pointer;
    font-family: Roboto, sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    font-style: normal;
    color: #000;
    white-space: nowrap;
    height: 100%; 
    margin: 0;
}

.custom-nav__resource--why-ontraport {
    width: 108px;
}

.custom-nav__resource--resources {
    width: 115px;
}

.custom-nav__resource--pricing {
    width: 70px;
}

.custom-nav__resource--chat {
    width: 85px;
}

.custom-nav__resource:hover {
    font-weight: 500;
}

.custom-nav__resource .custom-nav__arrow-up-icon {
    display: none;
}

.custom-nav__resource:hover .custom-nav__chat-icon {
    color: #1285ff;
}

.custom-nav__arrow-down-icon,
.custom-nav__arrow-up-icon {
    font-size: 18px;
    margin-left: 5px;
    color: #1285ff;
}

.custom-nav__chat-icon {
    font-size: 20px;
    margin-left: 8px;
    color: #9e9e9e;
}

.custom-nav__right-side-container {
    display: flex;
    align-items: center;
}
.custom-nav__support-desktop {
    display: flex;
    align-items: center;
}

.custom-nav__support-link {
    font-family: Roboto, sans-serif;
    font-size: 14px;
    line-height: 17px;
    font-weight: 400;
    font-style: normal;
    margin-right: 25px;
    color: #000;
    cursor: pointer;
    width: 56px;
}

.custom-nav__support-link:hover {
    font-weight: 500;
}

.custom-nav__cta-button {
    margin-right: 30px;
    padding: 18px 34px;
    background: #1285ff;
    color: #fff;
    font-family: Roboto, sans-serif;
    font-size: 18px;
    line-height: 20px;
    font-weight: 400;
    font-style: normal;
    user-select: none;
    cursor: pointer;
}

.custom-nav__cta-button:hover {
    color: #000;
}

.custom-nav__menu-icon {
    color: #000;
    font-size: 26px;
}

.custom-nav__mobile-menu {
    display: none;
    margin-right: 30px;
}

@media( max-width: 1740px ){
    .custom-nav-resources__block-container.custom-nav-resources__block-container {
        max-width: 400px;
    }
}

@media( max-width: 1670px ){
    .custom-nav-resources__card-container.custom-nav-resources__card-container {
        width: 140px
    }
}

@media( max-width: 1610px ){
    .custom-nav-resources__card-header-link {
        height: 50px;
        align-items: flex-start;
    }
}

@media( max-width: 1460px ){
    .custom-nav-resources__right-container.custom-nav-resources__right-container {    
        width: 260px;
    }

    .custom-nav-resources__block-container.custom-nav-resources__block-container {
        max-width: 350px;
    }

    .custom-nav-resources--resources .custom-nav-resources__center-container {
        justify-content: flex-start;
    }
}

@media( max-width: 1360px ){
    .custom-nav-resources__right-container.custom-nav-resources__right-container,
    .custom-nav-resources__card-image {    
        display: none;
    }

    .custom-nav-resources__block-container.custom-nav-resources__block-container {
        max-width: 400px;
    }
}

@media( max-width: 1160px ) {

    .custom-nav__resources-desktop,
    .custom-nav__support-desktop {
        display: none;
    }

    .custom-nav__mobile-menu {
        display: block;
    }
}

.custom-nav--dark-mode {
    background-color: #000;
}

.custom-nav--dark-mode .custom-nav__resource,
.custom-nav--dark-mode .custom-nav__support-link {
    color: #fff;
}

.custom-nav__resource:hover .custom-nav__arrow-down-icon {
    display: none;
}

.custom-nav__resource:hover .custom-nav__arrow-up-icon {
    display: block;
}

.custom-nav__get-a-demo-link {
    display: flex;
    font-size: 18px;
    align-items: center;
    color: #1285ff;
    text-decoration: none;
    font-family: Roboto, sans-serif;
    line-height: 17px;
    font-weight: 400;
    margin-right: 30px;
}

.custom-nav__get-a-demo-link .custom-nav__right-arrow-icon {
    font-size: 20px;
    margin-left: 8px;
}

.custom-nav__get-a-demo-link:hover,
.custom-nav__get-a-demo-link:hover .custom-nav__right-arrow-icon{
    color: #000;
}

.custom-nav--dark-mode .custom-nav__get-a-demo-link {
    color: #1285ff;
}

.custom-nav--dark-mode .custom-nav__get-a-demo-link:hover,
.custom-nav--dark-mode .custom-nav__get-a-demo-link:hover .custom-nav__right-arrow-icon {
    color: #fff;
}

/* Nav resource dropdowns */

.custom-nav-resources {
    width: 100%;
    min-height: 400px;
    top: 80px;
    background-color: #fff;
    display: none;
    position: absolute;
    left: 0;
    white-space: normal;
    cursor: default;
    color: #000;
}
.custom-nav-resources__left-container {
    max-width: 320px;
    min-width: 260px;
    padding: 30px;
    background-color: #000;
}
.custom-nav-resources__center-container {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-wrap: wrap;
}
.custom-nav-resources__right-container {
    width: 340px;
    min-width: 220px;
    padding: 30px;
    background-color: #f2f2f2;
}

.custom-nav-resources__header {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    line-height: 52px;
    font-weight: 400;
    margin-bottom: 15px;
    color: #fff;
}

.custom-nav-resources__body {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
    margin-bottom: 30px;
    color: #fff;
}

.custom-nav-resources__demo-link {
    font-family: Roboto, sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
    color: #1285ff;
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.custom-nav__right-arrow-icon {
    font-size: 16px;
    color: #1285ff;
    margin-left: 5px;
}

.custom-nav-resources__demo-link .custom-nav__right-arrow-icon {
    font-size: 22px;
}

.custom-nav-resources__demo-link:hover .custom-nav__right-arrow-icon {
    color: #fff;
}

.custom-nav-resources__guide-image {
    width: 160px;
    height: auto;
    margin-bottom: 15px;
    box-shadow: 0px 1px 10px 5px rgba(0,0,0,0.2);
}

.custom-nav-resources__guide-copy {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
    margin-bottom: 15px;
    width: 200px;
}
.custom-nav-resources__guide-link {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 23px;
    font-weight: 400;
    color: #1285ff;
    cursor: pointer;
    text-decoration: underline;
}

.custom-nav-resources__card-container {
    display: flex;
    flex-direction: column;
}

.custom-nav-resources__card-container--sales-crm {
    width: 22%;
}

.custom-nav-resources__card-container--marketing-automation {
    width: 22%;
}

.custom-nav-resources__card-container--pages-forms {
    width: 19%;
}

.custom-nav-resources__card-container--payments {
    width: 17%;
}

.custom-nav-resources__card-container--support {
    width: 20%;
}

.custom-nav-resources__card-image {
    max-width: 100px;
    height: auto;
    margin-bottom: 10px;
}

.custom-nav-resources__card-header-link {
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    line-height: 24px;
    font-weight: 400;
    color: #000;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
}

.custom-nav-resources__card-link {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
    color: #545454;
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
}

.custom-nav-resources__arrow-container {
    white-space: nowrap;
    display: flex;
    align-items: center;
}

.custom-nav-resources__card-header-link:hover,
.custom-nav-resources__card-link:hover {
    color: #1285ff;
}

.custom-nav-resources__card-header-link .custom-nav__right-arrow-icon,
.custom-nav-resources__card-link .custom-nav__right-arrow-icon,
.custom-nav-resources__block-link .custom-nav__right-arrow-icon{
    color: transparent;
}

.custom-nav-resources__card-header-link:hover .custom-nav__right-arrow-icon,
.custom-nav-resources__card-link:hover .custom-nav__right-arrow-icon,
.custom-nav-resources__block-link:hover .custom-nav__right-arrow-icon,
.custom-nav-resources__block-link:hover .custom-nav-resources__block-link-header {
    color: #1285ff;
}

.custom-nav-resources__block-container {
    width: 48%;
    max-width: 500px;
}

.custom-nav-resources__block-container:first-child {
    margin-right: 4%;
}

.custom-nav-resources__block-header {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #000;
    margin-bottom: 20px;
    display: flex;
    flex-wrap: wrap;
}

.custom-nav-resources__block-body-container {
    display: flex;
    flex-wrap: wrap;
}

.custom-nav-resources__block-link {
    width: 50%;
    min-width: 160px;
    margin-bottom: 20px;
    padding-right: 20px;
    max-width: 250px;
}

.custom-nav-resources__block-link-header {
    font-family: 'Roboto', sans-serif;
    font-size: 14px;
    line-height: 16px;
    font-weight: 400;
    color: #5c5c5c;
    margin-bottom: 8px;
    display: flex;
    flex-wrap: wrap;
}

.custom-nav-resources__block-link-copy {
    font-family: 'Roboto', sans-serif;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
    text-decoration: inherit;
    color: #5c5c5c;
}

.custom-nav-resources.custom-nav__active {
    display: flex;
}

.op-nav__get-a-demo:hover {
    color: #000;
}
.op-nav__get-a-demo:hover .platform-tour__icon {
    color: #000;
}

/* Nav mobile menu */
.custom-nav-mobile-menu {
    background: #fff;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    width: 100%;
    overflow-y: scroll;
    padding-bottom: 100px;
    overflow: -moz-scrollbars-none;
    -ms-overflow-style: none;
    display: none;
}

.custom-nav-mobile-menu.custom-nav__active {
    display: block;
}

.custom-nav-mobile-menu__container {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    flex-direction: column;
}

.custom-nav-mobile-menu__close {
    margin-top: 25px;
    margin-right: 10px;
    display: flex;
    justify-content: flex-end;
    cursor: pointer;
}

.custom-nav-mobile-menu__close-icon {
    font-size: 26px;
    color: #1285ff;
}	

.custom-nav-mobile-menu__header {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    line-height: 44px;
    font-weight: 400;
    color: #000;
    margin-bottom: 20px;
    user-select: none;
}

.custom-nav-mobile-menu__solution-container {
    display: flex;
    flex-direction: column;
}

.custom-nav-mobile-menu__solution-header {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    font-style: normal;
    color: #000;
    user-select: none;
    display: flex;
    cursor: pointer;
}

.custom-nav-mobile-menu__solution-header .custom-nav__arrow-up-icon {
    display: none;
}

.custom-nav-mobile-menu__solution-header.custom-nav__active .custom-nav__arrow-up-icon {
    display: block;
}

.custom-nav-mobile-menu__solution-header.custom-nav__active .custom-nav__arrow-down-icon {
    display: none;
}

.custom-nav-mobile-menu__solution-container {
    margin-top: 10px;
    margin-bottom:20px;
}

.custom-nav-mobile-menu__link {
    font-family: Roboto, sans-serif;
    font-size: 15px;
    line-height: 18px;
    font-weight: 400;
    font-style: normal;
    color: #000000;
    user-select: none;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.custom-nav-mobile-menu__divider {
    width: 100%;
    border: 0.5px solid #dedede;
    margin-bottom: 40px;
    margin-top: 10px;
}
  
.custom-nav-mobile-menu__pricing {
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 20px;
    font-weight: 500;
    text-decoration: inherit;
    background-color: #1285ff;
    width: 100%;
    padding: 18px 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}

.custom-nav-mobile-menu__social-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
}

.custom-nav-mobile-menu__solution-link {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 25px;
    font-weight: 400;
    color: #1285ff;
    margin: 5px 0;
}

.custom-nav-mobile-menu__solution-link-header {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #1285ff;
    margin: 5px 0;
    margin-top: 25px;
}

.custom-nav-mobile-menu__solution-no-link-header {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    line-height: 26px;
    font-weight: 400;
    color: #000;
    margin: 5px 0;
    margin-top: 25px;
}

.custom-nav-mobile-menu__solution-container .custom-nav-mobile-menu__solution-link-header:first-child,
.custom-nav-mobile-menu__solution-container .custom-nav-mobile-menu__solution-no-link-header:first-child {
      margin-top: 10px;
}
    
.custom-nav-mobile-menu__social-icon {
    font-size: 26px;
    color: #000;
    margin: 0 20px;
}

.custom-nav-mobile-menu__link .custom-nav__chat-icon {
    color: #1285ff;
}

.custom__expand {
    max-height: 0px;
    overflow: hidden;
    transition: max-height 0.6s ease-out;
}

.custom__noscroll {
    overflow: hidden;
}

.custom-nav-mobile-menu::-webkit-scrollbar,
.custom-nav-mobile-menu__container::-webkit-scrollbar,
.custom__noscroll::-webkit-scrollbar {
    display: none;
}

.custom-nav--dark-mode .custom-nav__menu-icon {
    color: #fff;
}

.custom-nav--dark-mode .custom-nav__resource:hover .custom-nav__arrow-down-icon,
.custom-nav--dark-mode .custom-nav__resource .custom-nav__arrow-down-icon:hover,
.custom-nav--dark-mode .custom-nav__resource:hover .custom-nav__arrow-up-icon,
.custom-nav--dark-mode .custom-nav__resource .custom-nav__arrow-up-icon:hover{
    color: #fff
}

.custom-nav__resource:hover .custom-nav-resources {
    display: flex;
}