:root {
--header-offset: 90px;
} @media (min-width: 1024px) {
html {
scroll-padding-top: var(--header-offset);
}
body {
padding-top: var(--header-offset);
}
} .l-canvas {
width: 100%;
}
.l-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: #f1f6fb;
transition: transform 0.3s ease, box-shadow 0.3s ease;
padding: 10px 0;
} @media (min-width: 1024px) {
.l-header {
background: transparent;
padding: 10px 0;
}
.header-main {
background: #ffffff;
border-radius: 9999px;
margin: 0 auto;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(41, 52, 196, 0.06);
padding: 12px 15px !important;
border: none;
max-width: min(1400px, calc(100% - 80px));
}
}
.l-header.has-shadow {
box-shadow: none;
} .l-header.header-hidden {
transform: translateY(-100%);
} @media (max-width: 1023px) {
.l-header {
display: none !important;
}
body {
padding-top: 0 !important;
padding-bottom: 62px !important;
}
} .header-subbar {
background: #2934c4;
padding: 8px 0;
font-size: 0.6875rem;
line-height: 1.2;
} body.no-subbar .header-subbar {
display: none;
}
body.no-subbar .header-topbar {
position: relative;
}
body.no-subbar .header-topbar::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
background: #f1f6fb;
} .header-topbar {
background: #f1f6fb;
padding: 6px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
font-size: 0.75rem;
} .header-main {
padding: 0;
} .header-logo-wordmark {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
}
.header-cta,
.header-cta:visited,
.header-cta:focus,
.header-cta:active {
font-weight: 700;
} .ripple-container {
position: absolute;
inset: 0;
pointer-events: none;
} .w-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 8px;
font-weight: 600;
font-size: 0.875rem;
text-decoration: none;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
border: none;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
line-height: 1;
}
.w-btn.us-btn-style_1 {
background: #2934c4;
color: #ffffff;
box-shadow: 0 4px 12px rgba(41, 52, 196, 0.25);
}
.w-btn.us-btn-style_1:hover {
background: #4bb3ff;
}
.w-btn.us-btn-style_12 {
background: transparent;
color: #1a1a1a;
padding: 6px 10px;
box-shadow: none;
}
.w-btn.icon_atleft { flex-direction: row; } .desktop-nav {
display: flex;
align-items: center;
gap: 32px;
}
.desktop-nav > a,
.desktop-nav .nav-dropdown {
position: relative;
}
.desktop-nav > a {
color: #1a1a1a;
font-weight: 600;
font-size: 0.9375rem;
text-decoration: none;
transition: color 0.2s ease;
position: relative;
padding: 8px 0;
}
.desktop-nav > a:visited,
.desktop-nav > a:focus,
.desktop-nav > a:active {
font-weight: 600;
}
.desktop-nav > a:hover,
.desktop-nav > a.active {
color: #2934c4;
}
.desktop-nav > a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #4bb3ff;
transition: width 0.3s ease;
}
.desktop-nav > a:hover::after,
.desktop-nav > a.active::after {
width: 100%;
} @media (max-width: 1023px) {
.desktop-nav {
display: none;
}
} @media (min-width: 1024px) and (max-width: 1279px) {
.desktop-nav {
gap: 20px;
}
.desktop-nav > a,
.nav-dropdown-trigger {
font-size: 0.875rem;
padding: 6px 0;
}
.header-main {
padding: 16px 24px !important;
margin: 0 16px;
}
.header-cta {
padding: 8px 16px !important;
font-size: 0.8125rem !important;
}
} .nav-dropdown {
position: relative;
display: flex;
align-items: center;
}
.nav-dropdown-trigger {
background: none;
border: none;
font-family: inherit;
font-weight: 600;
font-size: 0.9375rem;
color: #1a1a1a;
cursor: pointer;
display: flex;
align-items: center;
gap: 5px;
padding: 8px 0;
transition: color 0.2s ease;
position: relative;
}
.nav-dropdown-trigger:focus,
.nav-dropdown-trigger:active {
font-weight: 600;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger.active {
color: #2934c4;
}
.nav-dropdown-trigger::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: #4bb3ff;
transition: width 0.3s ease;
}
.nav-dropdown-trigger:hover::after,
.nav-dropdown-trigger.active::after {
width: 100%;
}
.nav-dropdown-trigger i {
font-size: 0.625rem;
transition: transform 0.3s ease;
}
.nav-dropdown:hover .nav-dropdown-trigger i {
transform: rotate(180deg);
}
.nav-dropdown-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 240px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
padding: 8px;
opacity: 0;
visibility: hidden;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
color: #374151;
text-decoration: none;
font-family: inherit;
font-size: 0.875rem;
font-weight: 600;
transition: all 0.15s ease;
}
.nav-dropdown-item:visited,
.nav-dropdown-item:focus,
.nav-dropdown-item:active {
font-weight: 600;
}
.nav-dropdown-item:hover {
background: #f1f6fb;
color: #2934c4;
}
.nav-dropdown-item i {
font-size: 1.125rem;
width: 24px;
text-align: center;
color: #9ca3af;
transition: color 0.15s ease;
}
.nav-dropdown-item:hover i {
color: #2934c4;
} .nav-dropdown-item:hover .fa-wordpress { color: #21759b; }
.nav-dropdown-item:hover .fa-wix { color: #faad4d; }
.nav-dropdown-item:hover .fa-shield-halved { color: #10B981; }
.nav-dropdown-item:hover .fa-screwdriver-wrench { color: #8b5cf6; }
.nav-dropdown-divider {
height: 1px;
background: #f3f4f6;
margin: 4px 8px;
} .hidden_for_desktop {
display: none !important;
}
.hidden_for_mobile {
display: block;
} @media (max-width: 1023px) {
.hidden_for_desktop {
display: flex !important;
}
.hidden_for_mobile {
display: none !important;
}
}  .mobile-brand-section .header-logo-wordmark {
font-family: 'Montserrat', sans-serif;
font-weight: 800;
} .mobile-bottom-bar {
display: none;
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
} @media (max-width: 1023px) {
.mobile-bottom-bar {
display: flex;
align-items: center;
justify-content: space-around;
padding: 10px 16px 12px;
background: #ffffff;
border-radius: 9999px;
margin: 0 12px 10px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(41, 52, 196, 0.06);
}
.mobile-bottom-bar .mobile-bar-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
text-decoration: none;
color: #2934c4;
font-size: 0.6875rem;
font-weight: 600;
transition: all 0.2s ease;
padding: 8px 20px;
border-radius: 12px;
background: rgba(41, 52, 196, 0.08);
border: none;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
.mobile-bottom-bar .mobile-bar-item i {
font-size: 1.375rem;
color: #2934c4;
}
.mobile-bottom-bar .mobile-bar-item:hover {
background: rgba(41, 52, 196, 0.12);
}
} .hamburger-btn {
width: 32px;
height: 24px;
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
gap: 6px;
background: none;
border: none;
padding: 0;
}
.hamburger-btn span {
display: block;
height: 2.5px;
width: 100%;
background: #1a1a1a;
border-radius: 2px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
transform-origin: center;
}
.hamburger-btn.is-active span:nth-child(1) {
transform: translateY(4.25px) rotate(45deg);
}
.hamburger-btn.is-active span:nth-child(2) {
transform: translateY(-4.25px) rotate(-45deg);
} .zeynep {
position: fixed;
bottom: 62px;
right: -100%;
width: 100%;
height: calc(100vh - 62px);
top: 0;
background: #ffffff;
transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 9999;
display: flex;
flex-direction: column;
overflow: hidden;
}
.zeynep.opened {
right: 0;
} .zeynep-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 9998;
}
.zeynep-overlay.active {
opacity: 1;
visibility: visible;
} .header_zeynep {
padding: 18px 24px;
border-bottom: 2px solid #f1f6fb;
background: linear-gradient(135deg, #f8fafc 0%, #f1f6fb 100%);
}
.header_zeynep .w-image-h {
display: block;
text-decoration: none;
} .mnav_content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mnav_content > ul {
list-style: none;
margin: 0;
padding: 0;
}
.mnav_content li {
list-style: none;
}
.mnav_content .link_default {
display: block;
padding: 16px 24px;
color: #1a1a1a;
text-decoration: none;
font-weight: 500;
font-size: 1rem;
transition: all 0.2s ease;
border-bottom: 1px solid #f3f4f6;
position: relative;
}
.mnav_content .link_default:visited,
.mnav_content .link_default:focus {
font-weight: 500;
}
.mnav_content .link_default::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 3px;
height: 0;
background: linear-gradient(135deg, #4bb3ff, #2934c4);
border-radius: 0 4px 4px 0;
transition: height 0.2s ease;
}
.mnav_content .link_default:hover::before,
.mnav_content .link_default:active::before {
height: 60%;
}
.mnav_content .link_default.level1 {
font-size: 1.0625rem;
font-weight: 600;
letter-spacing: -0.01em;
}
.mnav_content .link_default.level1:visited,
.mnav_content .link_default.level1:focus {
font-weight: 600;
}
.mnav_content .link_default.level2 {
font-size: 0.9375rem;
padding-left: 24px;
} .mnav_content .link_default.link_with_icon {
display: flex;
align-items: center;
gap: 12px;
}
.mnav_content .link_default.link_with_icon i {
font-size: 1.125rem;
width: 24px;
text-align: center;
color: #9ca3af;
flex-shrink: 0;
}
.mnav_content .link_default.link_with_icon:hover i {
color: #2934c4;
} .mnav_content .link_default.link_with_icon:hover .fa-wordpress { color: #21759b; }
.mnav_content .link_default.link_with_icon:hover .fa-wix { color: #faad4d; }
.mnav_content .link_default.link_with_icon:hover .fa-shield-halved { color: #10B981; }
.mnav_content .link_default.link_with_icon:hover .fa-screwdriver-wrench { color: #8b5cf6; }
.mnav_content .link_default:hover,
.mnav_content .link_default:active {
background: linear-gradient(90deg, #f1f6fb 0%, #ffffff 100%);
color: #2934c4;
}
.mnav_content .small_mnav_link {
font-size: 0.875rem;
font-weight: 500;
color: #6B7280;
}
.mnav_content .small_mnav_link:visited,
.mnav_content .small_mnav_link:focus {
font-weight: 500;
} .mnav_content .has-submenu > a {
display: flex;
justify-content: space-between;
align-items: center;
}
.mnav_content .has-submenu > a i.fa-chevron-right {
font-size: 0.75rem;
color: #9ca3af;
} .submenu {
position: absolute;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: #ffffff;
transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
display: flex;
flex-direction: column;
}
.submenu.opened {
right: 0;
}
.submenu_content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
} .submenu__header {
padding: 14px 20px;
border-bottom: 1px solid #e5e7eb;
background: #f8fafc;
display: flex;
justify-content: space-between;
align-items: center;
}
.submenu__header > a:first-child {
font-weight: 700;
font-size: 1.0625rem;
color: #2934c4;
text-decoration: none;
}
.submenu__header > a:first-child:visited,
.submenu__header > a:first-child:focus {
font-weight: 700;
}
.submenu__header .close_sub {
display: flex;
align-items: center;
gap: 6px;
color: #4bb3ff;
font-weight: 600;
font-size: 0.8125rem;
text-decoration: none;
cursor: pointer;
}
.submenu__header .close_sub:visited,
.submenu__header .close_sub:focus {
font-weight: 600;
}
.submenu__header .close_sub i.fa-arrow-left {
font-size: 0.75rem;
} .submenu_links_box {
padding: 16px 20px;
}
.submenu_links_box .label {
display: block;
font-weight: 700;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #9ca3af;
margin-bottom: 10px;
}
.submenu_links_box ul {
list-style: none;
margin: 0;
padding: 0;
}
.submenu_links_box a {
display: block;
padding: 10px 0;
color: #1a1a1a;
text-decoration: none;
font-weight: 500;
font-size: 0.9375rem;
border-bottom: 1px solid #f3f4f6;
transition: color 0.15s ease;
}
.submenu_links_box a:visited,
.submenu_links_box a:focus {
font-weight: 500;
}
.submenu_links_box a:hover {
color: #2934c4;
} .seprator_border {
height: 1px;
background: #f3f4f6;
margin: 4px 20px;
} .fw_mnav_btn {
padding: 0 24px;
margin-top: 16px;
}
.fw_mnav_btn .w-btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
border-radius: 12px;
font-size: 0.9375rem;
background: linear-gradient(135deg, #2934c4 0%, #4bb3ff 100%);
box-shadow: 0 4px 16px rgba(41, 52, 196, 0.3);
}
.fw_mnav_btn .w-btn:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(41, 52, 196, 0.4);
} .mnav_footer {
padding: 16px 24px;
border-top: 2px solid #f1f6fb;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(135deg, #f8fafc 0%, #f1f6fb 100%);
} .w-image {
display: inline-block;
}
.w-image-h {
display: block;
position: relative;
} .btn-pulse-green,
.btn-pulse-blue {
position: relative;
isolation: isolate; }
.btn-pulse-green::after,
.btn-pulse-blue::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
will-change: transform, opacity;
} .btn-pulse-green::after {
background: rgba(37, 211, 102, 0.55);
animation: pulse-green-composited 2s infinite;
}
@keyframes pulse-green-composited {
0%   { transform: scale(1);    opacity: 0.7; }
70%  { transform: scale(1.55); opacity: 0;   }
100% { transform: scale(1);    opacity: 0;   }
} .btn-pulse-blue::after {
background: rgba(41, 52, 196, 0.45);
animation: pulse-blue-composited 2s infinite;
animation-delay: 0.5s;
}
@keyframes pulse-blue-composited {
0%   { transform: scale(1);    opacity: 0.6; }
70%  { transform: scale(1.55); opacity: 0;   }
100% { transform: scale(1);    opacity: 0;   }
} .btn-pulse-green:hover {
transform: scale(1.1);
background-color: #128C7E;
transition: all 0.3s ease;
}
.btn-pulse-green:hover::after,
.btn-pulse-blue:hover::after {
animation-play-state: paused;
}
.btn-pulse-blue:hover {
transform: scale(1.1);
background-color: #1e3ba8;
transition: all 0.3s ease;
} #page-header .header-main .desktop-nav > a,
#page-header .header-main .desktop-nav > a:visited,
#page-header .header-main .desktop-nav > a:focus,
#page-header .header-main .desktop-nav > a:active {
color: #1a1a1a !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
text-decoration: none !important;
transition: color 0.2s ease !important;
position: relative !important;
padding: 8px 0 !important;
}
#page-header .header-main .desktop-nav > a:hover,
#page-header .header-main .desktop-nav > a.active {
color: #2934c4 !important;
}
#page-header .header-main .nav-dropdown-trigger,
#page-header .header-main .nav-dropdown-trigger:visited,
#page-header .header-main .nav-dropdown-trigger:focus,
#page-header .header-main .nav-dropdown-trigger:active {
color: #1a1a1a !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 0.9375rem !important;
transition: color 0.2s ease !important;
padding: 8px 0 !important;
}
#page-header .header-main .nav-dropdown-trigger:hover,
#page-header .header-main .nav-dropdown-trigger.active {
color: #2934c4 !important;
}
#page-header .header-main .nav-dropdown-item,
#page-header .header-main .nav-dropdown-item:visited,
#page-header .header-main .nav-dropdown-item:focus,
#page-header .header-main .nav-dropdown-item:active {
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
}
#page-header .header-main .nav-dropdown-item span {
font-family: inherit !important;
font-weight: inherit !important;
}
#page-header .header-main .header-logo-wordmark {
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
}