@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;500;600;700;800&display=swap');

/* =========================
   GLOBAL FONT
========================= */

* {
    font-family: 'Fira Sans', sans-serif !important;
}
a,
button,
.quickCard,
.footerButton {

    transition: all 0.25s ease;
}
/* FORCE WHITE NAVBAR */

.Header__navbar,
#navBar {

    background: #ffffff !important;
}
.Header__menu,
.Header__menu::before,
.Header__menu::after {

    background: #111827 !important;
}

/* MOBILE DROPDOWN MENU */

.Header__menuList {

    background: #ffffff !important;
}
/* MOBILE MENU LINKS */

.Header__menuList .Header__tabsTab,
.Header__menuList .globalSignin,
.Header__menuList .globalSignup {

    color: #111827 !important;
}
/* MOBILE MENU DROPDOWN BACKGROUND */

.Header__menuTab {

    background: #ffffff !important;
}
/* REMOVE BLACK STRIPS */

.Header__menuTab,
.Header__menuList {

    border-top: none !important;

    box-shadow: none !important;
}
/* =========================
   REMOVE SEARCH BAR
========================= */

.searchResults .SearchContainer__searchBox,
.userProfile .SearchContainer__searchBox,
.signin .SearchContainer__searchBox,
.signup .SearchContainer__searchBox {
    display: none;
}

/* =========================
   BOLD NAVIGATION TEXT
========================= */

.Header__tabsTab,
.globalSignin,
.globalSignup,
.LoginDetail__signin,
.LoginDetail__signup {
    font-weight: 700 !important;
}

/* =========================
   BRAND COLORS
========================= */

.SearchContainer__searchIcon,
.AppContainer__backToTop,
.Button__footerBtn:hover,
.LoginDetail__profileBtn {
    background: #104fb5;
}

.SearchContainer__downArrow {
    border-top-color: #104fb5;
}

.commonStyle__zt3BrandFill {
    fill: #104fb5;
    color: #104fb5;
}

.Header__homeNavbarFixed .Header__navbar .Header__tabsTab.Header__active,
.Header__homeNavbarFixed .Header__navbar .Header__tabsTab:hover,
.globalfixednav .globalSignin:hover,
.globalfixednav .globalSignup:hover,
.globalfixednav .LoginDetail__signin:hover,
.globalfixednav .LoginDetail__signup:hover {
    border-bottom: .1875rem solid #c70000;
    color: #104fb5;
}

.globalfixednav .aPlusIcon:hover,
.Signin__userLink,
.Link__link2,
.Icon__hoverbrand:hover,
.Icon__brand,
.Comment__cmtUsrNme,
.TabFilter__tab:hover,
.ThreadedComment__commentContent a,
.FileUpload__userLink,
.AvatarText__avatarText,
.TopicDetailRightContainer__commentCount>span,
.TopicDetailRightContainer__followerCount>span,
.TopicDetailRightContainer__viewCount>span,
.Button__primaryBorder,
.Button__warningBorder,
.TopicPreview__txtPrimary,
.Pill__pillText,
.NoContent__contentDescription a,
.NoContent__title,
.TopicDetailLeftContainer__creatorName,
.ThreadedComment__userNameType2,
.TopicPreview__creatorName,
.globalfixednav .CustomizeContainer__aPlus:hover,
.ForgetPasswordContainer__userLink,
.Captcha__captchaText,
.communityDetail .description a,
.articleDetail .description a,
.FilterTabs__activeFilter,
.ForumTabs__activeFilter,
.LoginDetail__userMail .commonStyle__zt3Brand,
.TopicListRightContainer__countValue,
.commonStyle__zt3Brand,
.TicketFilterPopup__active,
.TicketFilterPopup__filterValue:hover {
    color: #104fb5 !important;
}

.AvatarText__avatarText {
    background: #fff;
}

.FileUpload__attachPin,
.AvatarText__avatarText,
.Button__primaryBorder,
.Button__warningBorder,
.Pill__pill {
    border-color: #104fb5;
}

/* =========================
   HERO SECTION
========================= */

.customHero {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 80px;

    max-width: 1400px;
    margin: 0 auto;

   padding: 20px 50px 0px;
    box-sizing: border-box;
}

/* LEFT SIDE */

.heroContent {
    flex: 1;
    max-width: 600px;
}

/* SUBTITLE */

.customSubtitle {
    font-size: 15px;
    font-weight: 700;

    color: #104fb5;

    text-transform: uppercase;
    letter-spacing: 1px;

    margin-bottom: 18px;
}

/* TITLE */

.customTitle {
    font-size: clamp(42px, 5vw, 72px);
    line-height: 0.95;
    font-weight: 800;

    color: #141B4D;

    margin: 0;
}

/* BLUE TEXT */

.customTitle span {
    color: #104fb5;
}

/* DESCRIPTION */

.customDescription {
    margin-top: 28px;

    font-size: 18px;
    line-height: 1.6;

    color: #111111;

    max-width: 400px;
}

/* RIGHT SIDE */

.heroIllustration {
    flex: 1;

    display: flex;
    justify-content: center;
    align-items: center;
}

.heroIllustration img {
    width: 100%;
    max-width: 620px;

    height: auto;
    display: block;

    object-fit: contain;
}

/* =========================
   NAVBAR RESPONSIVE
========================= */

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

    .Header__menuTab {
        display: none;
    }

    .Header__menuicon {
        display: block !important;
    }
}

/* =========================
   TABLET
========================= */

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

    .customHero {
        gap: 40px;
        padding: 50px 40px;
    }

    .customDescription {
        font-size: 18px;
    }
}

/* =========================
   MOBILE
========================= */
@media screen and (max-width: 768px) {

    .customHero {

        flex-direction: column;

        align-items: flex-start;

        padding: 28px 20px 10px;

        gap: 10px;
    }

    .heroContent {

        max-width: 100%;
    }

    .customSubtitle {

        font-size: 13px;

        margin-bottom: 12px;
    }

    .customTitle {

        font-size: 54px;

        line-height: 0.95;
    }

    .customDescription {

        font-size: 18px;

        line-height: 1.5;

        margin-top: 20px;

        max-width: 95%;
    }

    .heroIllustration {

        width: 100%;

        justify-content: center;

        margin-top: -10px;
    }

    .heroIllustration img {

        width: 100%;

        max-width: 400px;

        height: auto;
    }
}
/* =========================
   SMALL PHONES
========================= */

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

    .customTitle {
        font-size: 36px;
    }

    .customSubtitle {
        font-size: 13px;
    }

    .customDescription {
        font-size: 16px;
    }

    .customHero {
        padding: 30px 16px;
    }
}

/* =========================
   DWORKIN FOOTER
========================= */

.dworkinFooter {

    background:#131525;

    color: #ffffff;

    margin-top: 60px;
}

/* =========================
   MAIN CONTAINER
========================= */

.footerInner {

    max-width: 1600px;

    margin: 0 auto;

    padding: 45px 70px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: 50px;

    box-sizing: border-box;
}

/* =========================
   BRAND
========================= */

.footerBrand {

    width: 260px;

    flex-shrink: 0;
}

/* LOGO */

.footerLogo {

    width: 170px;

    margin-bottom: 10px;
}


/* =========================
   BUTTONS
========================= */

.footerButton {

    display: block;

    background: #104fb5;

    color: #ffffff;
    text-decoration: none;

    padding: 10px 16px;

    border-radius: 3px;

    font-size: 14px;
    font-weight: 600;

    margin-bottom: 10px;

    transition: 0.3s ease;
}

.footerButton:hover {

    background: #1A5DDF;
}

/* =========================
   COLUMNS
========================= */

.footerColumn {

    min-width: 220px;
}


/* HEADINGS */

.footerColumn h3 {

    font-size: 14px;
    font-weight: 700;

    margin-bottom: 18px;

    color: #ffffff;
}

/* LINKS */

.footerColumn a {

    display: block;

    color: #AEAEAE;
    text-decoration: none;

    font-size: 14px;

    margin-bottom: 16px;
}

/* TEXT */

.footerColumn p {

    font-size: 14px;

    color: #AEAEAE;

    line-height: 1.7;

    margin-bottom: 10px;
}

/* CONTACT LINK */

.footerArrowLink {

    color: #AEAEAE !important;

    margin-top: 16px;

    font-weight: 600;
}

/* =========================
   SUPPORT TEXT
========================= */

.footerSupport {

    width: 230px;

    display: flex;

    justify-content: center;

    padding-top: 12px;
}
/* SUPPORT ICON */

.footerSupportIcon {

    width: 62px;

    height: auto;

    display: block;

    margin: 0 auto 18px;

    opacity: 0.95;
}

.footerSupport p {

    font-size: 14px;
 text-align: center;

    line-height: 1.8;

    color: #AEAEAE;

    margin: 0;
}

/* =========================
   SOCIAL
========================= */

.footerSocial {

    flex-shrink: 0;
}

.footerSocial a {

    color: #d7d7d7;

    text-decoration: none;

    font-size: 30px;
    font-weight: 700;
}
/* FOOTER LINKS HOVER */
.footerColumn a:hover,
.footerSocial a:hover {

    color: #ffffff !important;
}
/* =========================
   TABLET
========================= */

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

    .footerInner {

        flex-wrap: wrap;

        gap: 40px;
    }
}

/* =========================
   MOBILE
========================= */

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

    .footerInner {

        flex-direction: column;

        padding: 40px 20px;

        gap: 26px;
    }

    .footerBrand,
    .footerColumn,
    .footerSupport {

        width: 100%;
    }

    .footerSupport {

        min-height: auto;
    }

    .footerLogo {

        width: 150px;
    }

    .footerTagline {

        font-size: 15px;
    }

   .footerButton {

    width: 260px;

    max-width: 100%;

    padding: 12px 18px;

    font-size: 14px;
}

    .footerColumn h3 {

        font-size: 13px;
    }

    .footerColumn p,
    .footerColumn a,
    .footerSupport p {

        font-size: 13px;
    }
}

/* DESKTOP ONLY */
@media screen and (min-width: 1101px) {

    .footerColumn:nth-child(3) {

        transform: translateX(-25px);
    }
}
/* =========================
   CUSTOM QUICK ACCESS
========================= */

.customQuickAccess {

    max-width: 1180px;

    margin: 10px auto 180px;

    padding: 0 30px;

    display: flex;

    gap: 24px;

    box-sizing: border-box;
}

/* =========================
   CARD
========================= */

.quickCard {

    flex: 1;

    background: #ffffff;

    border: 1px solid #E7EAF0;

    border-radius: 10px;

    padding: 26px 30px;

    display: flex;
    align-items: center;

    gap: 24px;

    text-decoration: none;

    transition: 0.3s ease;
}

.quickCard:hover {

    transform: translateY(-3px);

    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* =========================
   ICON
========================= */

.quickIcon {

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;
}

.quickIcon img {

    width: 96px;

    height: auto;

    display: block;
}

/* =========================
   CONTENT
========================= */

.quickContent {

    flex: 1;
}

/* HEADING */

.quickContent h3 {

    font-size: 22px;

    font-weight: 700;

    line-height: 1.2;

    color: #141B4D;

    margin: 0 0 10px;
}

/* DESCRIPTION */

.quickContent p {

    font-size: 15px;

    line-height: 1.7;

    color: #4B4F63;

    margin: 0 0 14px;
}

/* RED TEXT */

.quickContent span {

    color: #FF3B30;

    font-size: 16px;

    font-weight: 500;

    font-style: italic;

    letter-spacing: 0.2px;
}

/* =========================
   TABLET
========================= */

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

    .customQuickAccess {

        flex-direction: column;

        gap: 20px;

        padding: 0 40px 60px;
    }

    .quickCard {

        padding: 24px;
    }

    .quickIcon img {

        width: 72px;
    }

    .quickContent h3 {

        font-size: 20px;
    }

    .quickContent p {

        font-size: 15px;
    }

    .quickContent span {

        font-size: 15px;
    }
}

/* =========================
   MOBILE
========================= */

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

    .customQuickAccess {

        padding: 0 18px 0px;

        gap: 18px;
    }

    .quickCard {

        flex-direction: row;

        align-items: center;

        gap: 22px;

        padding: 26px 22px;

        border-radius: 12px;
    }

    .quickIcon {

        flex-shrink: 0;
    }

    .quickIcon img {

        width: 82px;

        height: auto;
    }

    .quickContent {

        flex: 1;
    }

    .quickContent h3 {

        font-size: 18px;

        margin-bottom: 8px;
    }

    .quickContent p {

        font-size: 15px;

        line-height: 1.6;

        margin-bottom: 10px;
    }

    .quickContent span {

        font-size: 15px;
    }
}

/* =========================
   SMALL PHONES
========================= */

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

    .customQuickAccess {

        padding: 0 16px 40px;
    }

    .quickCard {

        padding: 18px;
    }

    .quickIcon img {

        width: 56px;
    }

    .quickContent h3 {

        font-size: 18px;
    }

    .quickContent p {

        font-size: 13px;
    }

    .quickContent span {

        font-size: 13px;
    }
}

/* HIDE DEFAULT ZOHO MODULES */

#kb_module,
#ticket_module {

    display: none !important;
}
/* HIDE HOMEPAGE SECTIONS ON NON-HOME PAGES */

portal:not(.home) .customQuickAccess,
portal:not(.home) .peopleBanner {

    display: none !important;
}
/* =========================
   PEOPLE BANNER
========================= */

.peopleBanner {

    max-width: 1180px;

    margin: 70px auto 70px;
    padding: 28px 40px;

    background: #F7F8FC;

    border-radius: 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 40px;

    box-sizing: border-box;
}

/* =========================
   IMAGE
========================= */

.peopleBannerImage {

    flex: 1;

    display: flex;
    justify-content: center;
}

.peopleBannerImage img {

    width: 100%;
    max-width: 380px;

    height: auto;

    display: block;
}

/* =========================
   CONTENT
========================= */

.peopleBannerContent {

    flex: 1;

    padding-left: 40px;

    border-left: 1px solid #D9DDE7;
}

/* TITLE */

.peopleBannerContent h2 {

    font-size: clamp(28px, 3.5vw, 46px);

    line-height: 1.1;

    font-weight: 800;

    color: #141B4D;

    margin: 0 0 16px;
}

/* RED WORD */

.peopleBannerContent h2 span {

    color: #FF3131;
}

/* TEXT */

.peopleBannerContent p {

    font-size: 16px;

    line-height: 1.7;

    color: #4B4F63;

    margin: 0;

    max-width: 500px;
}

/* =========================
   TABLET
========================= */

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

    .peopleBanner {

        flex-direction: row;

        align-items: center;

        gap: 24px;

        padding: 24px 22px;

        margin: 20px 18px 20px;
    }

    .peopleBannerImage {

        flex: 0 0 42%;
    }

    .peopleBannerImage img {

        width: 100%;

        max-width: 260px;

        height: auto;
    }

    .peopleBannerContent {

        flex: 1;

        padding-left: 24px;

        border-left: 1px solid #D9DDE7;

        border-top: none;

        padding-top: 0;
    }

    .peopleBannerContent h2 {

        font-size: 34px;

        line-height: 1.05;

        margin-bottom: 12px;
    }

    .peopleBannerContent p {

        font-size: 14px;

        line-height: 1.7;
    }
}

/* =========================
   MOBILE
========================= */
/* EQUAL SPACE BELOW PEOPLE BANNER */

.NoContent__wrap {

    padding-top: 50px !important;
}
@media screen and (max-width: 768px) {

    .peopleBanner {

        flex-direction: row;

        align-items: center;

        gap: 18px;

        padding: 18px 16px;

        margin: 50px 14px 50px;

        border-radius: 14px;
    }

    .peopleBannerImage {

        flex: 0 0 42%;
    }

    .peopleBannerImage img {

        width: 100%;

        max-width: 200px;
    }

    .peopleBannerContent {

        padding-left: 18px;

        border-left: 1px solid #D9DDE7;

        border-top: none;

        padding-top: 0;
    }

    .peopleBannerContent h2 {

        font-size: 22px;

        line-height: 1.05;

        margin-bottom: 10px;
    }

    .peopleBannerContent p {

        font-size: 12px;

        line-height: 1.6;
    }
}
/* =========================
   SMALL PHONES
========================= */

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

    .peopleBanner {

        padding: 22px 18px;
    }

    .peopleBannerContent h2 {

        font-size: 26px;
    }

    .peopleBannerContent p {

        font-size: 12px;
    }
}

/* REMOVE MASSIVE EMPTY PAGE SPACE */

.home .Layout__oneColumn {

    min-height: auto !important;
}

img {

    max-width: 100%;

    height: auto;
}
/* HIDE KB TOP SEARCH/BREADCRUMB BAR */

.AppContainer__breadCrumbs {

    display: none !important;
}

/* NAVIGATION HOVER */

.Header__tabsTab:hover,
.Header__tabsTab a:hover,
.globalSignin:hover,
.globalSignup:hover {

    color: #104fb5 !important;
}
.Header__tabsTab,
.globalSignin,
.globalSignup {

    transition: color 0.25s ease;
}


/* HIDE THEME OPTIONS */

.container-themesDefault,
.container-nightMode,
.container-themeAuto {

    display: none !important;
}/* HIDE THEMES CARD ONLY */

.TabContent__tabContent:has(.container-themesDefault) {

    display: none !important;
}