/* Start custom CSS for html, class: .elementor-element-db853ec *//* =========================================================
COOLTEXTFONTS — PROFESSIONAL HEADER
FULL CSS
Poppins + 3 Color Branding
Desktop Navigation + Mobile Left Flyout
========================================================= */
/* =========================================================
POPPINS
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');
/* =========================================================
ROOT COLORS
========================================================= */
:root {
--ctf-purple: #6C3DF4;
--ctf-purple-dark: #5630D5;
--ctf-purple-light: #F5F1FF;
--ctf-orange: #F59E0B;
--ctf-dark: #171321;
--ctf-white: #FFFFFF;
--ctf-border: #E7E2F0;
--ctf-border-light: #F0EDF5;
--ctf-gray: #716C7D;
}
/* =========================================================
GLOBAL HEADER RESET
========================================================= */
.ctf-header,
.ctf-header *,
.ctf-header *::before,
.ctf-header *::after {
box-sizing: border-box;
}
.ctf-header {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
position: relative;
top: 0 !important;
left: 0 !important;
z-index: 99999;
background: var(--ctf-white) !important;
border: 0 !important;
border-bottom: 1px solid var(--ctf-border) !important;
font-family: 'Poppins', sans-serif !important;
}
/* =========================================================
REMOVE DEFAULT WORDPRESS / ELEMENTOR SPACING
========================================================= */
.ctf-header,
.ctf-header > div,
.ctf-header-inner,
.ctf-header nav,
.ctf-header ul,
.ctf-header li,
.ctf-header a,
.ctf-header button {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* =========================================================
POPPINS EVERYWHERE
========================================================= */
.ctf-header,
.ctf-header a,
.ctf-header button,
.ctf-header input,
.ctf-header span,
.ctf-header nav,
.ctf-header div {
font-family: 'Poppins', sans-serif !important;
}
/* =========================================================
HEADER INNER
========================================================= */
.ctf-header-inner {
width: 100% !important;
max-width: 1320px;
height: 82px;
min-height: 82px;
margin: 0 auto !important;
padding: 0 24px !important;
display: flex;
align-items: center;
gap: 34px;
}
/* =========================================================
LOGO
========================================================= */
.ctf-logo {
flex-shrink: 0;
display: inline-flex !important;
align-items: baseline;
margin: 0 !important;
padding: 0 !important;
font-family: 'Poppins', sans-serif !important;
font-size: 28px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -1.1px;
white-space: nowrap;
text-decoration: none !important;
}
/* =========================================================
LOGO COLORS
========================================================= */
.ctf-logo-cool {
color: #6C3DF4 !important;
font-weight: 800 !important;
}
.ctf-logo-text {
color: #171321 !important;
font-weight: 800 !important;
}
.ctf-logo-fonts {
color: #F59E0B !important;
font-weight: 800 !important;
margin-left: 5px !important;
}
/* =========================================================
LOGO HOVER
========================================================= */
.ctf-logo:hover,
.ctf-logo:focus,
.ctf-logo:active,
.ctf-logo:visited {
text-decoration: none !important;
}
/* =========================================================
DESKTOP NAV
========================================================= */
.ctf-nav {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
NAV LINKS
========================================================= */
.ctf-nav-link,
.ctf-dropdown-toggle {
position: relative;
height: 82px;
margin: 0 !important;
padding: 0 18px !important;
display: inline-flex;
align-items: center;
justify-content: center;
border: 0 !important;
outline: none !important;
background: transparent !important;
color: var(--ctf-dark) !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1 !important;
letter-spacing: -0.1px;
white-space: nowrap;
text-decoration: none !important;
cursor: pointer;
transition:
color 0.2s ease,
background 0.2s ease;
}
/* =========================================================
NAV HOVER
========================================================= */
.ctf-nav-link:hover,
.ctf-nav-link:focus,
.ctf-nav-link:active,
.ctf-dropdown-toggle:hover,
.ctf-dropdown-toggle:focus,
.ctf-dropdown-toggle:active {
color: var(--ctf-purple) !important;
background: transparent !important;
text-decoration: none !important;
}
/* =========================================================
NAV ACTIVE / HOVER LINE
========================================================= */
.ctf-nav-link::after,
.ctf-dropdown-toggle::after {
content: "";
position: absolute;
left: 18px;
right: 18px;
bottom: 0;
height: 3px;
background: var(--ctf-orange);
border-radius: 4px 4px 0 0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.22s ease;
}
.ctf-nav-link:hover::after,
.ctf-dropdown:hover .ctf-dropdown-toggle::after {
transform: scaleX(1);
}
/* =========================================================
DROPDOWN WRAPPER
========================================================= */
.ctf-dropdown {
position: relative;
height: 82px;
display: flex;
align-items: center;
margin: 0 !important;
padding: 0 !important;
}
/* =========================================================
DROPDOWN ARROW
========================================================= */
.ctf-chevron {
margin-left: 8px !important;
color: var(--ctf-purple) !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
font-weight: 800 !important;
line-height: 1;
transition:
transform 0.2s ease,
color 0.2s ease;
}
.ctf-dropdown:hover .ctf-chevron {
transform: rotate(180deg);
color: var(--ctf-orange) !important;
}
/* =========================================================
DESKTOP DROPDOWN
========================================================= */
.ctf-dropdown-menu {
position: absolute;
top: 82px;
left: 50%;
width: 270px;
margin: 0 !important;
padding: 10px !important;
background: var(--ctf-white) !important;
border: 1px solid var(--ctf-border) !important;
border-top: 3px solid var(--ctf-purple) !important;
border-radius: 0 0 12px 12px;
box-shadow:
0 20px 45px rgba(23, 19, 33, 0.13);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, 12px);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
/* =========================================================
DROPDOWN SHOW
========================================================= */
.ctf-dropdown:hover .ctf-dropdown-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
/* =========================================================
DROPDOWN LINKS
========================================================= */
.ctf-dropdown-menu a {
width: 100%;
min-height: 45px;
margin: 0 !important;
padding: 9px 13px !important;
display: flex;
align-items: center;
border-radius: 7px;
color: var(--ctf-dark) !important;
background: transparent !important;
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition:
color 0.2s ease,
background 0.2s ease,
padding-left 0.2s ease;
}
/* =========================================================
DROPDOWN HOVER
========================================================= */
.ctf-dropdown-menu a:hover,
.ctf-dropdown-menu a:focus,
.ctf-dropdown-menu a:active {
color: var(--ctf-purple) !important;
background: var(--ctf-purple-light) !important;
padding-left: 18px !important;
text-decoration: none !important;
}
/* =========================================================
SEARCH BUTTON
========================================================= */
.ctf-search-button {
width: 47px;
height: 47px;
flex-shrink: 0;
margin: 0 !important;
padding: 0 !important;
display: flex;
align-items: center;
justify-content: center;
background: var(--ctf-purple-light) !important;
border: 1px solid #DCD4F0 !important;
border-radius: 10px;
outline: none !important;
cursor: pointer;
transition:
background 0.2s ease,
border-color 0.2s ease,
transform 0.2s ease;
}
.ctf-search-button:hover,
.ctf-search-button:focus {
background: var(--ctf-purple) !important;
border-color: var(--ctf-purple) !important;
transform: translateY(-1px);
}
/* =========================================================
SEARCH ICON
========================================================= */
.ctf-search-icon {
width: 21px;
height: 21px;
display: block;
fill: none !important;
stroke: var(--ctf-purple) !important;
stroke-width: 2.3;
stroke-linecap: round;
stroke-linejoin: round;
}
.ctf-search-button:hover .ctf-search-icon {
stroke: #FFFFFF !important;
}
/* =========================================================
DESKTOP SEARCH PANEL
========================================================= */
.ctf-search-panel {
position: absolute;
top: 82px;
left: 50%;
width: min(640px, calc(100% - 30px));
margin: 0 !important;
padding: 16px !important;
background: var(--ctf-white) !important;
border: 1px solid var(--ctf-border) !important;
border-top: 3px solid var(--ctf-orange) !important;
border-radius: 0 0 12px 12px;
box-shadow:
0 20px 45px rgba(23, 19, 33, 0.14);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-50%, -10px);
transition:
opacity 0.2s ease,
visibility 0.2s ease,
transform 0.2s ease;
}
.ctf-search-panel.ctf-search-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(-50%, 0);
}
/* =========================================================
SEARCH FORM
========================================================= */
.ctf-search-form {
width: 100%;
margin: 0 !important;
padding: 0 !important;
display: flex;
gap: 10px;
}
/* =========================================================
SEARCH INPUT
========================================================= */
.ctf-search-input {
flex: 1;
min-width: 0;
height: 47px;
margin: 0 !important;
padding: 0 15px !important;
background: #FAF9FF !important;
border: 1px solid var(--ctf-border) !important;
border-radius: 8px;
outline: none !important;
color: var(--ctf-dark) !important;
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 500 !important;
}
.ctf-search-input::placeholder {
color: #9993A8 !important;
}
.ctf-search-input:focus {
background: #FFFFFF !important;
border-color: var(--ctf-purple) !important;
box-shadow:
0 0 0 3px rgba(108, 61, 244, 0.10) !important;
}
/* =========================================================
SEARCH SUBMIT
========================================================= */
.ctf-search-submit {
height: 47px;
margin: 0 !important;
padding: 0 22px !important;
border: 0 !important;
border-radius: 8px;
background: var(--ctf-purple) !important;
color: #FFFFFF !important;
font-family: 'Poppins', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
cursor: pointer;
transition:
background 0.2s ease,
transform 0.2s ease;
}
.ctf-search-submit:hover {
background: var(--ctf-dark) !important;
color: #FFFFFF !important;
transform: translateY(-1px);
}
/* =========================================================
MOBILE HAMBURGER
========================================================= */
.ctf-mobile-toggle {
display: none;
width: 46px;
height: 46px;
flex-shrink: 0;
margin: 0 !important;
padding: 8px !important;
align-items: center;
justify-content: center;
flex-direction: column;
gap: 4px;
background: var(--ctf-purple-light) !important;
border: 1px solid #DCD4F0 !important;
border-radius: 10px;
cursor: pointer;
}
.ctf-mobile-toggle span {
display: block;
width: 21px;
height: 2px;
margin: 0 !important;
background: var(--ctf-dark);
border-radius: 3px;
transition:
transform 0.2s ease,
opacity 0.2s ease;
}
/* =========================================================
MOBILE OVERLAY
========================================================= */
.ctf-mobile-overlay {
display: none;
}
/* =========================================================
MOBILE FLYOUT
========================================================= */
.ctf-mobile-flyout {
display: none;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 1180px) {
.ctf-header-inner {
gap: 18px;
padding-left: 18px !important;
padding-right: 18px !important;
}
.ctf-logo {
font-size: 25px !important;
}
.ctf-nav {
gap: 2px;
}
.ctf-nav-link,
.ctf-dropdown-toggle {
padding-left: 10px !important;
padding-right: 10px !important;
font-size: 13px !important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 850px) {
/* -----------------------------------------
HEADER
----------------------------------------- */
.ctf-header-inner {
height: 76px !important;
min-height: 76px !important;
padding: 0 14px !important;
gap: 10px;
}
/* -----------------------------------------
BIGGER MOBILE BRAND
----------------------------------------- */
.ctf-logo {
font-size: 27px !important;
letter-spacing: -1px !important;
}
/* -----------------------------------------
HIDE DESKTOP NAV
----------------------------------------- */
.ctf-nav {
display: none !important;
}
/* -----------------------------------------
HIDE DESKTOP SEARCH
----------------------------------------- */
.ctf-desktop-search {
display: none !important;
}
/* -----------------------------------------
HAMBURGER
----------------------------------------- */
.ctf-mobile-toggle {
display: flex !important;
margin-left: auto !important;
}
/* -----------------------------------------
OVERLAY
----------------------------------------- */
.ctf-mobile-overlay {
position: fixed;
inset: 0;
display: block;
z-index: 999998;
background: rgba(23, 19, 33, 0.48);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition:
opacity 0.3s ease,
visibility 0.3s ease;
}
.ctf-mobile-overlay.ctf-overlay-active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* -----------------------------------------
LEFT FLYOUT
----------------------------------------- */
.ctf-mobile-flyout {
position: fixed;
top: 0;
left: 0;
width: min(370px, 88vw);
height: 100vh;
height: 100dvh;
display: flex;
flex-direction: column;
z-index: 999999;
background: #FFFFFF;
box-shadow:
12px 0 45px rgba(23, 19, 33, 0.18);
transform: translateX(-105%);
transition:
transform 0.32s cubic-bezier(.4,0,.2,1);
overflow-x: hidden;
overflow-y: auto;
}
.ctf-mobile-flyout.ctf-flyout-open {
transform: translateX(0);
}
/* -----------------------------------------
MOBILE BRAND
----------------------------------------- */
.ctf-mobile-brand {
width: 100%;
min-height: 88px;
flex-shrink: 0;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
background: #FFFFFF;
border-bottom: 1px solid var(--ctf-border);
}
/* -----------------------------------------
MOBILE LOGO BIG
----------------------------------------- */
.ctf-mobile-logo {
display: inline-flex;
align-items: baseline;
margin: 0 !important;
padding: 0 !important;
font-family: 'Poppins', sans-serif !important;
font-size: 29px !important;
line-height: 1 !important;
font-weight: 800 !important;
letter-spacing: -1.1px;
white-space: nowrap;
text-decoration: none !important;
}
.ctf-mobile-logo .ctf-logo-cool {
color: var(--ctf-purple) !important;
}
.ctf-mobile-logo .ctf-logo-text {
color: var(--ctf-dark) !important;
}
.ctf-mobile-logo .ctf-logo-fonts {
color: var(--ctf-orange) !important;
margin-left: 5px !important;
}
/* -----------------------------------------
CLOSE BUTTON
----------------------------------------- */
.ctf-mobile-close {
width: 40px;
height: 40px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin: 0 !important;
padding: 0 !important;
border: 1px solid #DCD4F0 !important;
border-radius: 9px;
background: var(--ctf-purple-light) !important;
color: var(--ctf-dark) !important;
font-family: Arial, sans-serif !important;
font-size: 27px !important;
font-weight: 400 !important;
line-height: 1 !important;
cursor: pointer;
}
.ctf-mobile-close:hover {
background: var(--ctf-purple) !important;
border-color: var(--ctf-purple) !important;
color: #FFFFFF !important;
}
/* -----------------------------------------
MOBILE NAV
----------------------------------------- */
.ctf-mobile-nav {
width: 100%;
flex: 0 0 auto;
margin: 0 !important;
padding: 8px 15px 5px !important;
}
/* -----------------------------------------
MOBILE MAIN LINKS
----------------------------------------- */
.ctf-mobile-link,
.ctf-mobile-dropdown-toggle {
width: 100%;
min-height: 53px;
margin: 0 !important;
padding: 0 8px !important;
display: flex;
align-items: center;
justify-content: space-between;
border: 0 !important;
border-bottom: 1px solid var(--ctf-border-light) !important;
outline: none !important;
background: transparent !important;
color: var(--ctf-dark) !important;
font-family: 'Poppins', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-decoration: none !important;
cursor: pointer;
}
.ctf-mobile-link:hover,
.ctf-mobile-link:focus,
.ctf-mobile-dropdown-toggle:hover,
.ctf-mobile-dropdown-toggle:focus {
color: var(--ctf-purple) !important;
background: transparent !important;
}
/* -----------------------------------------
MOBILE DROPDOWN
----------------------------------------- */
.ctf-mobile-dropdown {
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
.ctf-mobile-arrow {
color: var(--ctf-purple) !important;
font-size: 14px !important;
font-weight: 800 !important;
transition:
transform 0.2s ease,
color 0.2s ease;
}
.ctf-mobile-dropdown.ctf-submenu-open
.ctf-mobile-arrow {
transform: rotate(180deg);
color: var(--ctf-orange) !important;
}
/* -----------------------------------------
MOBILE SUBMENU
----------------------------------------- */
.ctf-mobile-submenu {
display: none;
width: 100%;
margin: 0 !important;
padding: 5px 0 8px 10px !important;
background: #F8F6FF !important;
border-radius: 7px;
}
.ctf-mobile-dropdown.ctf-submenu-open
.ctf-mobile-submenu {
display: block;
}
.ctf-mobile-submenu a {
width: 100%;
min-height: 42px;
margin: 0 !important;
padding: 7px 10px !important;
display: flex;
align-items: center;
border-bottom: 1px solid #EAE6F2;
color: var(--ctf-dark) !important;
background: transparent !important;
font-family: 'Poppins', sans-serif !important;
font-size: 12.5px !important;
font-weight: 600 !important;
line-height: 1.35 !important;
text-decoration: none !important;
}
.ctf-mobile-submenu a:hover {
color: var(--ctf-purple) !important;
background: transparent !important;
}
/* -----------------------------------------
MOBILE SEARCH
BELOW NAV
----------------------------------------- */
.ctf-mobile-search {
width: 100%;
flex: 0 0 auto;
margin-top: auto !important;
padding: 18px 18px 24px !important;
border-top: 1px solid var(--ctf-border);
background: #FAF9FF !important;
}
.ctf-mobile-search .ctf-search-form {
width: 100%;
display: flex;
flex-direction: column;
gap: 9px;
}
.ctf-mobile-search .ctf-search-input {
width: 100%;
height: 46px;
margin: 0 !important;
}
.ctf-mobile-search .ctf-search-submit {
width: 100%;
height: 46px;
margin: 0 !important;
}
/* -----------------------------------------
HIDE DESKTOP SEARCH PANEL
----------------------------------------- */
.ctf-search-panel {
display: none !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.ctf-header-inner {
height: 74px !important;
min-height: 74px !important;
padding: 0 11px !important;
}
/* Brand bigger */
.ctf-logo {
font-size: 24px !important;
letter-spacing: -0.9px !important;
}
/* Flyout */
.ctf-mobile-flyout {
width: 90vw;
max-width: 345px;
}
/* Flyout brand */
.ctf-mobile-brand {
min-height: 84px;
padding: 0 17px;
}
.ctf-mobile-logo {
font-size: 26px !important;
letter-spacing: -1px !important;
}
/* Mobile navigation */
.ctf-mobile-nav {
padding-left: 13px !important;
padding-right: 13px !important;
}
.ctf-mobile-link,
.ctf-mobile-dropdown-toggle {
min-height: 51px;
font-size: 13.5px !important;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.ctf-logo {
font-size: 22px !important;
}
.ctf-mobile-logo {
font-size: 24px !important;
}
.ctf-mobile-brand {
padding-left: 14px;
padding-right: 14px;
}
.ctf-mobile-close {
width: 38px;
height: 38px;
}
}
/* =========================================================
REMOVE THEME BLUE LINKS
========================================================= */
.ctf-header a:visited {
color: inherit;
}
.ctf-header a:hover {
text-decoration: none !important;
}
.ctf-header .ctf-nav-link:hover {
color: var(--ctf-purple) !important;
}
.ctf-header .ctf-dropdown-menu a:hover {
color: var(--ctf-purple) !important;
}
.ctf-header .ctf-mobile-link:hover {
color: var(--ctf-purple) !important;
}
.ctf-header .ctf-mobile-submenu a:hover {
color: var(--ctf-purple) !important;
}
/* =========================================================
FOCUS ACCESSIBILITY
========================================================= */
.ctf-header a:focus-visible,
.ctf-header button:focus-visible,
.ctf-header input:focus-visible {
outline: 2px solid var(--ctf-orange) !important;
outline-offset: 2px;
}
/* =========================================================
PREVENT HORIZONTAL OVERFLOW
========================================================= */
html,
body {
overflow-x: hidden;
}
/* =========================================================
MOBILE HEADER — BRAND + SEARCH + HAMBURGER
========================================================= */
@media (max-width: 850px) {
.ctf-header-inner {
height: 82px !important;
min-height: 82px !important;
padding: 0 14px !important;
gap: 9px !important;
}
/* Bigger Brand */
.ctf-logo {
font-size: 30px !important;
letter-spacing: -1.2px !important;
}
/* Search beside hamburger */
.ctf-desktop-search {
display: flex !important;
width: 44px !important;
height: 44px !important;
margin-left: auto !important;
}
/* Hamburger */
.ctf-mobile-toggle {
display: flex !important;
width: 44px !important;
height: 44px !important;
margin-left: 0 !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.ctf-header-inner {
height: 78px !important;
min-height: 78px !important;
padding: 0 11px !important;
gap: 7px !important;
}
.ctf-logo {
font-size: 27px !important;
letter-spacing: -1px !important;
}
.ctf-desktop-search,
.ctf-mobile-toggle {
width: 42px !important;
height: 42px !important;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media (max-width: 360px) {
.ctf-logo {
font-size: 24px !important;
}
.ctf-desktop-search,
.ctf-mobile-toggle {
width: 40px !important;
height: 40px !important;
}
.ctf-search-icon {
width: 19px !important;
height: 19px !important;
}
}
/* =========================================================
COMPACT MOBILE HEADER
========================================================= */
@media (max-width: 850px) {
.ctf-header-inner {
height: 64px !important;
min-height: 64px !important;
padding: 0 12px !important;
gap: 7px !important;
}
.ctf-logo {
font-size: 27px !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
.ctf-desktop-search,
.ctf-mobile-toggle {
width: 40px !important;
height: 40px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* =========================================================
SMALL MOBILE
========================================================= */
@media (max-width: 480px) {
.ctf-header-inner {
height: 60px !important;
min-height: 60px !important;
padding: 0 10px !important;
gap: 6px !important;
}
.ctf-logo {
font-size: 25px !important;
}
.ctf-desktop-search,
.ctf-mobile-toggle {
width: 38px !important;
height: 38px !important;
}
}
/* =========================================================
REMOVE ANY EXTRA HEADER SPACING
========================================================= */
.ctf-header {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.ctf-header-inner {
margin-top: 0 !important;
margin-bottom: 0 !important;
}/* End custom CSS */