:root { --default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --heading-font: "Raleway", sans-serif; --nav-font: "Poppins", sans-serif; } :root { --background-color: #ffffff; --footer-color: #1C1C1B; --default-color: #444444; --heading-color: #111111; --accent-color: #F65203; --surface-color: #ffffff; --contrast-color: #ffffff; --dark-background-color: #1B3738; --featured-menu-color: #626C97; } :root { --nav-color: #212529; --nav-hover-color: #F65203; --nav-mobile-background-color: #ffffff; --nav-dropdown-background-color: #ffffff; --nav-dropdown-color: #212529; --nav-dropdown-hover-color: #F65203; --callout-bg: #ffffff; --callout-border: rgba(0, 0, 0, 0.06); --callout-shadow: 0 16px 40px rgba(0, 0, 0, 0.08); --callout-shadow-hover: 0 24px 55px rgba(0, 0, 0, 0.13); --callout-accent: var(--nav-hover-color); --callout-info-bg: #F2F4F8; --callout-info-text: #4A5268; --callout-success-bg: #EEF7F6; --callout-success-text: #12413D; --callout-warning-bg: #FFF4EE; --callout-warning-text: #6B2401; --callout-danger-bg: #FFF2EB; --callout-danger-text: #F65203; --callout-neutral-bg: transparent; --callout-neutral-text: inherit; } .light-background { --background-color: #f9f9f9; --surface-color: #ffffff; } .dark-background { --background-color: #1B3738; --default-color: #ffffff; --heading-color: #ffffff; --surface-color: #353535; --contrast-color: #ffffff; } :root { scroll-behavior: smooth; } body { color: var(--default-color); background-color: var(--background-color); font-family: var(--default-font); } a { color: var(--accent-color); text-decoration: none; transition: 0.3s; } a:hover { color: color-mix(in srgb, var(--accent-color), transparent 25%); text-decoration: none; } h1, h2, h3, h4, h5, h6 { color: var(--heading-color); font-family: var(--heading-font); } .graph-email-form .error-message { display: none; background: #df1529; color: #ffffff; text-align: left; padding: 15px; margin-bottom: 24px; font-weight: 600; } .graph-email-form .sent-message { display: none; color: #ffffff; background: #059652; text-align: center; padding: 15px; margin-bottom: 24px; font-weight: 600; } .graph-email-form .loading { display: none; background: var(--surface-color); text-align: center; padding: 15px; margin-bottom: 24px; } .graph-email-form .loading:before { content: ""; display: inline-block; border-radius: 50%; width: 24px; height: 24px; margin: 0 10px -6px 0; border: 3px solid var(--accent-color); border-top-color: var(--surface-color); animation: graph-email-form-loading 1s linear infinite; } @keyframes graph-email-form-loading { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .pulsating-play-btn { width: 94px; height: 94px; background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%); border-radius: 50%; display: block; position: relative; overflow: hidden; } .pulsating-play-btn:before { content: ""; position: absolute; width: 120px; height: 120px; animation-delay: 0s; animation: pulsate-play-btn 2s; animation-direction: forwards; animation-iteration-count: infinite; animation-timing-function: steps; opacity: 1; border-radius: 50%; border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%); top: -15%; left: -15%; background: rgba(198, 16, 0, 0); } .pulsating-play-btn:after { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 100; transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } .pulsating-play-btn:hover:before { content: ""; position: absolute; left: 50%; top: 50%; transform: translateX(-40%) translateY(-50%); width: 0; height: 0; border: none; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 15px solid #fff; z-index: 200; animation: none; border-radius: 0; } .pulsating-play-btn:hover:after { border-left: 15px solid var(--accent-color); transform: scale(20); } @keyframes pulsate-play-btn { 0% { transform: scale(0.6, 0.6); opacity: 1; } 100% { transform: scale(1, 1); opacity: 0; } } .header { color: var(--default-color); background-color: transparent; padding: 10px 0; z-index: 997; border-bottom: 1px solid rgba(0,0,0,0.05); } .header .logo { line-height: 1; } .header .logo img { max-height: 55px; margin-right: 8px; } .header .logo h1 { font-size: 32px; margin: 0; font-weight: 700; color: var(--heading-color); } .header .logo span { font-size: 32px; font-weight: 700; color: var(--accent-color); } .header .btn-getstarted, .header .btn-getstarted:focus { color: var(--contrast-color); background: var(--accent-color); font-size: 13px; padding: 6px 12px; margin: 0 0 0 30px; border-radius: 4px; transition: 0.3s; } .header .btn-getstarted:hover, .header .btn-getstarted:focus:hover { color: var(--contrast-color); background: color-mix(in srgb, var(--accent-color), transparent 15%); } .btn-primary { --bs-btn-color: var(--contrast-color); --bs-btn-bg: var(--accent-color); --bs-btn-border-color: var(--accent-color); --bs-btn-hover-color: var(--contrast-color); --bs-btn-hover-bg: color-mix(in srgb, var(--accent-color), #000 12%); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent-color), #000 12%); --bs-btn-focus-shadow-rgb: 246, 82, 3; --bs-btn-active-color: var(--contrast-color); --bs-btn-active-bg: color-mix(in srgb, var(--accent-color), #000 18%); --bs-btn-active-border-color: color-mix(in srgb, var(--accent-color), #000 18%); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); --bs-btn-disabled-color: var(--contrast-color); --bs-btn-disabled-bg: color-mix(in srgb, var(--accent-color), transparent 45%); --bs-btn-disabled-border-color: color-mix(in srgb, var(--accent-color), transparent 45%); } @media (max-width: 1200px) { .header .logo { order: 1; } .header .btn-getstarted, .header .btn-getstarted:focus { order: 2; margin: 0 15px 0 0; padding: 6px 15px; } .header .navmenu { order: 3; } } .scrolled .header { box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1); } @media (max-width: 1199px) { .mobile-nav-toggle { color: var(--nav-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; } .navmenu { padding: 0; z-index: 9997; } .navmenu ul { display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 6px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1); } .navmenu > ul > li > a, .navmenu ul > li > a:focus { color: var(--nav-dropdown-color); padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } .navmenu > ul > li > a > i, .navmenu > ul > li > a:focus > i { font-size: 12px; line-height: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); transition: 0.3s; margin-left: 10px; flex: 0 0 auto; } .navmenu > ul > li > a > .badge, .navmenu > ul > li > a > .dot, .navmenu > ul > li > a > .count { margin-left: auto; } .navmenu a i:hover, .navmenu a:focus i:hover { background-color: var(--accent-color); color: var(--contrast-color); } .navmenu a:hover, .navmenu .active, .navmenu .active:focus { color: var(--nav-dropdown-hover-color); } .navmenu .active i, .navmenu .active:focus i { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } .navmenu .dropdown ul { position: static; display: none; z-index: 99; padding: 10px 10px; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } .navmenu .dropdown > .dropdown-active { display: block; background-color: rgba(33, 37, 41, 0.03); } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav-toggle { color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999; } .mobile-nav-active .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; } .mobile-nav-active .navmenu > ul { display: block; } .mobile-nav-active .navmenu > ul { left: 80px !important; right: 20px !important; top: 60px !important; bottom: 20px !important; } .mobile-nav-active .navmenu > ul::before { content: "MENU"; display: block; padding: 16px 20px 12px; margin-bottom: 8px; font-family: var(--nav-font); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-bottom: 1px solid rgba(0,0,0,.08); } .mobile-nav-active header #navmenu.navmenu > ul > li > a { justify-content: space-between !important; } .mobile-nav-active #navmenu a > i { margin-left: auto !important; flex: 0 0 auto; } .mobile-nav-active #navmenu .badge, .mobile-nav-active #navmenu .nav-badge, .mobile-nav-active #navmenu .count, .mobile-nav-active #navmenu .dot { margin-left: auto !important; } } .footer { color: var(--default-color); background-color: var(--background-color); font-size: 14px; padding-bottom: 50px; position: relative; } .footer .footer-top { padding-top: 50px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .footer .footer-about .logo { line-height: 1; margin-bottom: 25px; } .footer .footer-about .logo img { max-height: 40px; margin-right: 6px; } .footer .footer-about .logo span { font-size: 26px; font-weight: 700; letter-spacing: 1px; font-family: var(--heading-font); color: var(--heading-color); } .footer .footer-about p { font-size: 14px; font-family: var(--heading-font); } .footer .social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%); font-size: 16px; color: color-mix(in srgb, var(--default-color), transparent 30%); margin-right: 10px; transition: 0.3s; } .footer .social-links a:hover { color: var(--accent-color); border-color: var(--accent-color); } .footer h4 { font-size: 16px; font-weight: bold; position: relative; padding-bottom: 12px; } .footer .footer-links { margin-bottom: 30px; } .footer .footer-links ul { list-style: none; padding: 0; margin: 0; } .footer .footer-links ul i { padding-right: 2px; font-size: 12px; line-height: 0; } .footer .footer-links ul li { padding: 10px 0; display: flex; align-items: center; } .footer .footer-links ul li:first-child { padding-top: 0; } .footer .footer-links ul a { color: color-mix(in srgb, var(--default-color), transparent 30%); display: inline-block; line-height: 1; } .footer .footer-links ul a:hover { color: var(--accent-color); } .footer .footer-contact p { margin-bottom: 5px; } .footer .footer-newsletter .newsletter-form { margin-top: 30px; margin-bottom: 30px; padding: 6px 8px; position: relative; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%); display: flex; background-color: var(--background-color); transition: 0.3s; } .footer .footer-newsletter .newsletter-form:focus-within { border-color: var(--accent-color); } .footer .footer-newsletter .newsletter-form input[type=email] { border: 0; padding: 4px; width: 100%; background-color: var(--background-color); color: var(--default-color); } .footer .footer-newsletter .newsletter-form input[type=email]:focus-visible { outline: none; } .footer .footer-newsletter .newsletter-form input[type=submit] { border: 0; font-size: 16px; padding: 0 20px; margin: -7px -8px -7px 0; background: var(--accent-color); color: var(--contrast-color); transition: 0.3s; border-radius: 0 4px 4px 0; } .footer .footer-newsletter .newsletter-form input[type=submit]:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .footer .copyright { padding-top: 25px; padding-bottom: 25px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .footer .copyright p { margin-bottom: 0; } .footer .credits { margin-top: 6px; font-size: 13px; } .scroll-top { position: fixed; visibility: hidden; opacity: 0; right: 15px; bottom: 15px; z-index: 99999; background-color: var(--accent-color); width: 40px; height: 40px; border-radius: 4px; transition: all 0.4s; } .scroll-top i { font-size: 24px; color: var(--contrast-color); line-height: 0; } .scroll-top:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); } .scroll-top.active { visibility: visible; opacity: 1; } @media screen and (max-width: 768px) { [data-aos-delay] { transition-delay: 0 !important; } } .page-title { color: var(--default-color); background-color: var(--background-color); padding: 20px 0; position: relative; } .page-title h1 { font-size: 28px; font-weight: 700; margin: 0; } .page-title .breadcrumbs ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0 0 10px 0; margin: 0; font-size: 14px; font-weight: 400; } .page-title .breadcrumbs ol li + li { padding-left: 10px; } .page-title .breadcrumbs ol li + li::before { content: "/"; display: inline-block; padding-right: 10px; color: color-mix(in srgb, var(--default-color), transparent 50%); } section, .section { color: var(--default-color); background-color: var(--background-color); padding: 60px 0; scroll-margin-top: 100px; overflow: clip; } .section-bg { background-color: transparent; padding: 160px 0; position: relative; } .section-bg:before { content: ""; background-color: var(--background-color); position: absolute; bottom: 60px; top: 60px; left: 0; right: 0; transform: skewY(-2deg); } .section-bg .container { position: relative; } @media (max-width: 1199px) { section, .section { scroll-margin-top: 66px; } } .section-title { text-align: center; padding-bottom: 60px; position: relative; } .section-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; position: relative; text-transform: uppercase; } .section-title h2:after { content: ""; position: absolute; display: block; width: 50px; height: 3px; background: var(--accent-color); left: 0; right: 0; bottom: 0; margin: auto; } .section-title p { margin-bottom: 0; } .hero { --default-color: #ffffff; --background-color: #000000; --heading-color: #ffffff; width: 100%; min-height: calc(100vh - 100px); position: relative; padding: 80px 0; display: flex; align-items: center; justify-content: center; color: var(--default-color); } .hero img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; z-index: 1; } .hero:before { content: ""; background: color-mix(in srgb, var(--background-color), transparent 30%); position: absolute; inset: 0; z-index: 2; } .hero .container { position: relative; z-index: 3; } .hero h1, .hero h2 { margin: 0; font-size: 48px; font-weight: 700; } .hero p { color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 10px 0 0 0; font-size: 24px; } .hero .btn-get-started { font-weight: 400; font-size: 15px; letter-spacing: 1px; display: inline-block; padding: 10px 30px; border-radius: 4px; transition: 0.3s; background: var(--accent-color); color: var(--contrast-color); } .hero .btn-get-started:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .hero .btn-watch-video { font-size: 16px; transition: 0.5s; margin-left: 25px; font-weight: 600; color: var(--default-color); } .hero .btn-watch-video i { color: var(--accent-color); font-size: 32px; transition: 0.3s; line-height: 0; margin-right: 8px; } .hero .btn-watch-video:hover { color: var(--accent-color); } .hero .btn-watch-video:hover i { color: color-mix(in srgb, var(--accent-color), transparent 20%); } @media (max-width: 768px) { .hero h1, .hero h2 { font-size: 32px; } .hero p { font-size: 18px; } } .clients .swiper-slide img { opacity: 0.5; transition: 0.3s; filter: grayscale(100); } .clients .swiper-slide img:hover { filter: none; opacity: 1; } .clients .swiper-wrapper { height: auto; } .clients .swiper-pagination { margin-top: 20px; position: relative; } .clients .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; opacity: 1; background-color: color-mix(in srgb, var(--default-color), transparent 80%); } .clients .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } .about .content h3 { font-weight: 700; font-size: 34px; margin-bottom: 30px; } .about .content p { margin-bottom: 30px; } .about .content .about-btn { padding: 8px 30px 9px 30px; color: var(--default-color); border-radius: 50px; transition: 0.3s; text-transform: uppercase; font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; border: 2px solid var(--accent-color); } .about .content .about-btn i { font-size: 16px; padding-left: 5px; } .about .content .about-btn:hover { background: var(--accent-color); color: var(--contrast-color); } .about .icon-box i { font-size: 40px; color: var(--accent-color); margin-bottom: 10px; } .about .icon-box h4 { font-size: 20px; font-weight: 700; margin: 0 0 10px 0; } .about .icon-box h4 a { color: var(--heading-color); transition: 0.3s; } .about .icon-box p { font-size: 15px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 0; } .about .icon-box:hover h4 a { color: var(--accent-color); } .stats i { background-color: var(--surface-color); color: var(--accent-color); box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1); width: 54px; height: 54px; font-size: 24px; border-radius: 50px; border: 2px solid var(--background-color); display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .stats .stats-item { background-color: var(--surface-color); margin-top: -27px; padding: 30px 30px 25px 30px; width: 100%; position: relative; text-align: center; box-shadow: 0px 2px 35px rgba(0, 0, 0, 0.1); border-radius: 4px; z-index: 0; } .stats .stats-item span { font-size: 36px; display: block; font-weight: 700; color: color-mix(in srgb, var(--default-color), transparent 20%); } .stats .stats-item p { padding: 0; margin: 0; font-family: var(--heading-font); font-size: 16px; } .tabs .nav-tabs { border: 0; } .tabs .nav-link { color: var(--heading-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); padding: 15px 20px; transition: 0.3s; border-radius: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; height: 100%; } .tabs .nav-link i { padding-right: 15px; font-size: 48px; } .tabs .nav-link h4 { font-size: 18px; font-weight: 600; margin: 0; } .tabs .nav-link:hover { color: var(--accent-color); border-color: var(--accent-color); } .tabs .nav-link.active { background: var(--accent-color); color: var(--contrast-color); border-color: var(--accent-color); } .tabs .nav-link.active h4 { color: var(--contrast-color); } @media (max-width: 768px) { .tabs .nav-link i { padding: 0; line-height: 1; font-size: 36px; } } @media (max-width: 575px) { .tabs .nav-link { padding: 15px; } .tabs .nav-link i { font-size: 24px; } } .tabs .tab-content { margin-top: 30px; } .tabs .tab-pane h3 { color: var(--heading-color); font-weight: 700; font-size: 26px; } .tabs .tab-pane ul { list-style: none; padding: 0; } .tabs .tab-pane ul li { padding-bottom: 10px; } .tabs .tab-pane ul i { font-size: 20px; padding-right: 4px; color: var(--accent-color); } .tabs .tab-pane p:last-child { margin-bottom: 0; } .services .service-item { background-color: var(--surface-color); padding: 30px; transition: 0.3s; } .services .service-item .icon { font-size: 36px; line-height: 0; margin-right: 30px; color: var(--accent-color); } .services .service-item .title { font-weight: 700; margin-bottom: 15px; font-size: 20px; } .services .service-item .title a { color: var(--heading-color); } .services .service-item .description { line-height: 24px; font-size: 14px; margin: 0; } .services .service-item:hover { background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%); } .portfolio .portfolio-filters { padding: 0; margin: 0 auto 20px auto; list-style: none; text-align: center; } .portfolio .portfolio-filters li { cursor: pointer; display: inline-block; padding: 0; font-size: 18px; font-weight: 500; margin: 0 10px; line-height: 1; margin-bottom: 5px; transition: all 0.3s ease-in-out; } .portfolio .portfolio-filters li:hover, .portfolio .portfolio-filters li.filter-active { color: var(--accent-color); } .portfolio .portfolio-filters li:first-child { margin-left: 0; } .portfolio .portfolio-filters li:last-child { margin-right: 0; } @media (max-width: 575px) { .portfolio .portfolio-filters li { font-size: 14px; margin: 0 5px; } } .portfolio .portfolio-content { position: relative; overflow: hidden; } .portfolio .portfolio-content img { transition: 0.3s; } .portfolio .portfolio-content .portfolio-info { opacity: 0; position: absolute; inset: 0; z-index: 3; transition: all ease-in-out 0.3s; background: rgba(0, 0, 0, 0.6); padding: 15px; } .portfolio .portfolio-content .portfolio-info h4 { font-size: 14px; padding: 5px 10px; font-weight: 400; color: #ffffff; display: inline-block; background-color: var(--accent-color); } .portfolio .portfolio-content .portfolio-info p { position: absolute; bottom: 10px; text-align: center; display: inline-block; left: 0; right: 0; font-size: 16px; font-weight: 600; color: rgba(255, 255, 255, 0.8); } .portfolio .portfolio-content .portfolio-info .preview-link, .portfolio .portfolio-content .portfolio-info .details-link { position: absolute; left: calc(50% - 40px); font-size: 26px; top: calc(50% - 14px); color: #fff; transition: 0.3s; line-height: 1.2; } .portfolio .portfolio-content .portfolio-info .preview-link:hover, .portfolio .portfolio-content .portfolio-info .details-link:hover { color: var(--accent-color); } .portfolio .portfolio-content .portfolio-info .details-link { left: 50%; font-size: 34px; line-height: 0; } .portfolio .portfolio-content:hover .portfolio-info { opacity: 1; } .portfolio .portfolio-content:hover img { transform: scale(1.1); } .testimonials .testimonial-item { background-color: var(--surface-color); box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); box-sizing: content-box; padding: 30px; margin: 30px 15px; position: relative; height: 100%; } .testimonials .testimonial-item .testimonial-img { width: 90px; border-radius: 50px; margin-right: 15px; } .testimonials .testimonial-item h3 { font-size: 18px; font-weight: bold; margin: 10px 0 5px 0; } .testimonials .testimonial-item h4 { font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin: 0; } .testimonials .testimonial-item .stars { margin: 10px 0; } .testimonials .testimonial-item .stars i { color: #ffc107; margin: 0 1px; } .testimonials .testimonial-item .quote-icon-left, .testimonials .testimonial-item .quote-icon-right { color: color-mix(in srgb, var(--accent-color), transparent 50%); font-size: 26px; line-height: 0; } .testimonials .testimonial-item .quote-icon-left { display: inline-block; left: -5px; position: relative; } .testimonials .testimonial-item .quote-icon-right { display: inline-block; right: -5px; position: relative; top: 10px; transform: scale(-1, -1); } .testimonials .testimonial-item p { font-style: italic; margin: 15px auto 15px auto; } .testimonials .swiper-wrapper { height: auto; } .testimonials .swiper-pagination { margin-top: 20px; position: relative; } .testimonials .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .testimonials .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } @media (max-width: 767px) { .testimonials .testimonial-wrap { padding-left: 0; } .testimonials .testimonial-item { padding: 30px; margin: 15px; } .testimonials .testimonial-item .testimonial-img { position: static; left: auto; } } .pricing .pricing-item { background-color: var(--surface-color); padding: 60px 40px; box-shadow: 0 3px 20px -2px rgba(0, 0, 0, 0.1); height: 100%; position: relative; } .pricing h3 { font-weight: 600; margin-bottom: 15px; font-size: 20px; } .pricing h4 { font-size: 48px; color: var(--accent-color); font-family: var(--heading-font); font-weight: 400; } .pricing h4 sup { font-size: 28px; } .pricing h4 span { color: color-mix(in srgb, var(--default-color), transparent 60%); font-size: 18px; } .pricing ul { padding: 20px 0; list-style: none; color: color-mix(in srgb, var(--default-color), transparent 30%); text-align: left; line-height: 20px; } .pricing ul li { padding: 10px 0; display: flex; align-items: center; } .pricing ul i { color: #059652; font-size: 24px; padding-right: 3px; } .pricing ul .na { color: color-mix(in srgb, var(--default-color), transparent 60%); } .pricing ul .na i { color: color-mix(in srgb, var(--default-color), transparent 60%); } .pricing ul .na span { text-decoration: line-through; } .pricing .buy-btn { color: color-mix(in srgb, var(--default-color), transparent 40%); background-color: var(--background-color); display: inline-block; padding: 8px 35px 10px 35px; border-radius: 4px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%); transition: none; font-size: 16px; font-weight: 500; font-family: var(--heading-font); transition: 0.3s; } .pricing .buy-btn:hover { background: var(--accent-color); border-color: var(--accent-color); color: var(--contrast-color); } .pricing .featured { z-index: 10; } .pricing .featured .pricing-item { background: var(--accent-color); } @media (min-width: 992px) { .pricing .featured .pricing-item { transform: scale(1.02, 1.1); } } .pricing .featured h3, .pricing .featured h4, .pricing .featured h4 span, .pricing .featured ul, .pricing .featured ul .na, .pricing .featured ul i, .pricing .featured ul .na i { color: var(--contrast-color); } .pricing .featured .buy-btn { background: var(--accent-color); color: var(--contrast-color); border-color: var(--contrast-color); } .pricing .featured .buy-btn:hover { background: color-mix(in srgb, var(--background-color), transparent 92%); } .faq .faq-container .faq-item { position: relative; padding: 20px; margin-bottom: 15px; border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); border-radius: 5px; overflow: hidden; } .faq .faq-container .faq-item:last-child { margin-bottom: 0; } .faq .faq-container .faq-item h3 { font-weight: 600; font-size: 16px; line-height: 24px; margin: 0 30px 0 0; transition: 0.3s; cursor: pointer; display: flex; align-items: center; } .faq .faq-container .faq-item h3 .num { color: var(--accent-color); padding-right: 5px; } .faq .faq-container .faq-item h3:hover { color: var(--accent-color); } .faq .faq-container .faq-item .faq-content { display: grid; grid-template-rows: 0fr; transition: 0.3s ease-in-out; visibility: hidden; opacity: 0; } .faq .faq-container .faq-item .faq-content p { margin-bottom: 0; overflow: hidden; } .faq .faq-container .faq-item .faq-toggle { position: absolute; top: 20px; right: 20px; font-size: 16px; line-height: 0; transition: 0.3s; cursor: pointer; } .faq .faq-container .faq-item .faq-toggle:hover { color: var(--accent-color); } .faq .faq-container .faq-active { background-color: color-mix(in srgb, var(--accent-color), transparent 97%); border-color: color-mix(in srgb, var(--accent-color), transparent 80%); } .faq .faq-container .faq-active h3 { color: var(--accent-color); } .faq .faq-container .faq-active .faq-content { grid-template-rows: 1fr; visibility: visible; opacity: 1; padding-top: 10px; } .faq .faq-container .faq-active .faq-toggle { transform: rotate(90deg); color: var(--accent-color); } .card-hover-soft { background: var(--bs-body-bg); border: 1px solid rgba(0,0,0,.12); border-radius: 8px; transition: background-color .15s, box-shadow .15s, transform .15s, border-color .15s; } .card-hover-soft:hover, .card-hover-soft:focus-within { background: var(--bs-tertiary-bg); box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); transform: translateY(-1px); border-color: transparent; } .team .team-member { background-color: var(--surface-color); overflow: hidden; border-radius: 5px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); height: 100%; } .team .team-member .member-img { position: relative; overflow: hidden; } .team .team-member .social { position: absolute; left: 0; bottom: 30px; right: 0; opacity: 0; transition: ease-in-out 0.3s; text-align: center; } .team .team-member .social a { background: color-mix(in srgb, var(--contrast-color), transparent 25%); color: color-mix(in srgb, var(--default-color), transparent 20%); margin: 0 3px; border-radius: 4px; width: 36px; height: 36px; transition: ease-in-out 0.3s; display: inline-flex; justify-content: center; align-items: center; } .team .team-member .social a:hover { color: var(--contrast-color); background: var(--accent-color); } .team .team-member .social i { font-size: 18px; line-height: 0; } .team .team-member .member-info { padding: 25px 15px; } .team .team-member .member-info h3 { font-weight: 700; margin-bottom: 5px; font-size: 18px; } .team .team-member .member-info span { display: block; font-size: 13px; font-weight: 400; color: color-mix(in srgb, var(--default-color), transparent 40%); } .team .team-member:hover .social { opacity: 1; bottom: 15px; } .contact .info-item { background-color: var(--surface-color); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); padding: 24px 0 30px 0; } .contact .info-item i { font-size: 20px; color: var(--accent-color); width: 56px; height: 56px; font-size: 24px; display: flex; justify-content: center; align-items: center; border-radius: 4px; transition: all 0.3s ease-in-out; border-radius: 50%; border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%); } .contact .info-item h3 { font-size: 20px; color: color-mix(in srgb, var(--default-color), transparent 20%); font-size: 18px; font-weight: 700; margin: 10px 0; } .contact .info-item p { padding: 0; margin-bottom: 0; font-size: 14px; } .contact .graph-email-form { background-color: var(--surface-color); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); height: 100%; padding: 30px; } @media (max-width: 575px) { .contact .graph-email-form { padding: 20px; } } .contact .graph-email-form input[type=text], .contact .graph-email-form input[type=email], .contact .graph-email-form textarea { font-size: 14px; padding: 10px 15px; box-shadow: none; border-radius: 0; color: var(--default-color); background-color: var(--surface-color); border-color: color-mix(in srgb, var(--default-color), transparent 80%); } .contact .graph-email-form input[type=text]:focus, .contact .graph-email-form input[type=email]:focus, .contact .graph-email-form textarea:focus { border-color: var(--accent-color); } .contact .graph-email-form input[type=text]::placeholder, .contact .graph-email-form input[type=email]::placeholder, .contact .graph-email-form textarea::placeholder { color: color-mix(in srgb, var(--default-color), transparent 70%); } .contact .graph-email-form button[type=submit] { color: var(--contrast-color); background: var(--accent-color); border: 0; padding: 10px 30px; transition: 0.4s; border-radius: 50px; } .contact .graph-email-form button[type=submit]:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .portfolio-details .portfolio-details-slider img { width: 100%; } .portfolio-details .portfolio-details-slider .swiper-pagination { margin-top: 20px; position: relative; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: color-mix(in srgb, var(--default-color), transparent 85%); opacity: 1; } .portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--accent-color); } .portfolio-details .portfolio-info { background-color: var(--surface-color); padding: 30px; box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1); } .portfolio-details .portfolio-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%); } .portfolio-details .portfolio-info ul { list-style: none; padding: 0; font-size: 15px; } .portfolio-details .portfolio-info ul li + li { margin-top: 10px; } .portfolio-details .portfolio-description { padding-top: 30px; } .portfolio-details .portfolio-description h2 { font-size: 26px; font-weight: 700; margin-bottom: 20px; } .portfolio-details .portfolio-description p { padding: 0; color: color-mix(in srgb, var(--default-color), transparent 30%); } .service-details .service-box { background-color: var(--surface-color); padding: 20px; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.1); border-radius: var(--bs-border-radius-sm); } .service-details .service-box + .service-box { margin-top: 30px; } .service-details .service-box h4 { font-size: 20px; font-weight: 700; border-bottom: 2px solid color-mix(in srgb, var(--default-color), transparent 92%); padding-bottom: 15px; margin-bottom: 15px; } .service-details .services-list { background-color: var(--surface-color); } .service-details .services-list a { color: color-mix(in srgb, var(--default-color), transparent 20%); background-color: color-mix(in srgb, var(--default-color), transparent 96%); display: flex; align-items: center; padding: 12px 15px; margin-top: 15px; transition: 0.3s; border-radius: var(--bs-border-radius-sm); } .service-details .services-list a:first-child { margin-top: 0; } .service-details .services-list a i { font-size: 16px; margin-right: 8px; color: var(--accent-color); } .service-details .services-list a.active { color: var(--contrast-color); background-color: var(--accent-color); } .service-details .services-list a.active i { color: var(--contrast-color); } .service-details .services-list a:hover { background-color: color-mix(in srgb, var(--accent-color), transparent 95%); color: var(--accent-color); } .service-details .download-catalog a { color: var(--default-color); display: flex; align-items: center; padding: 10px 0; transition: 0.3s; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .service-details .download-catalog a:first-child { border-top: 0; padding-top: 0; } .service-details .download-catalog a:last-child { padding-bottom: 0; } .service-details .download-catalog a i { font-size: 24px; margin-right: 8px; color: var(--accent-color); } .service-details .download-catalog a:hover { color: var(--accent-color); } .service-details .help-box { background-color: var(--accent-color); color: var(--contrast-color); margin-top: 30px !important; box-shadow: 0px 2px 20px rgba(0, 0, 0, 0.2); padding: 30px 15px; border-radius: var(--bs-border-radius-sm); } .service-details .help-box .help-icon { font-size: 48px; } .service-details .help-box h4, .service-details .help-box a { color: var(--contrast-color); } .service-details .services-img { margin-bottom: 20px; } .service-details h3 { font-size: 26px; font-weight: 700; } .service-details p { font-size: 15px; } .service-details ul { list-style: none; padding: 0; font-size: 15px; } .service-details ul li { padding: 5px 0; display: flex; align-items: center; } .service-details ul i { font-size: 20px; margin-right: 8px; color: var(--accent-color); } .starter-section { } .blog-posts article { background-color: var(--surface-color); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); padding: 30px; height: 100%; } .blog-posts .post-img { max-height: 440px; margin: -30px -30px 0 -30px; overflow: hidden; } .blog-posts .title { font-size: 24px; font-weight: 700; padding: 0; margin: 30px 0; } .blog-posts .title a { color: var(--heading-color); transition: 0.3s; } .blog-posts .title a:hover { color: var(--accent-color); } .blog-posts .meta-top { margin-top: 20px; color: color-mix(in srgb, var(--default-color), transparent 40%); } .blog-posts .meta-top ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; padding: 0; margin: 0; } .blog-posts .meta-top ul li + li { padding-left: 20px; } .blog-posts .meta-top i { font-size: 16px; margin-right: 8px; line-height: 0; color: color-mix(in srgb, var(--default-color), transparent 20%); } .blog-posts .meta-top a { color: color-mix(in srgb, var(--default-color), transparent 40%); font-size: 14px; display: inline-block; line-height: 1; } .blog-posts .content { margin-top: 20px; } .blog-posts .content .read-more { text-align: left; } .blog-posts .content .read-more a { background: var(--accent-color); color: var(--contrast-color); display: inline-block; padding: 8px 30px; transition: 0.3s; font-size: 14px; border-radius: 4px; } .blog-posts .content .read-more a:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .blog-pagination { padding-top: 0; color: color-mix(in srgb, var(--default-color), transparent 40%); } .blog-pagination ul { display: flex; padding: 0; margin: 0; list-style: none; } .blog-pagination li { margin: 0 5px; transition: 0.3s; } .blog-pagination li a { color: color-mix(in srgb, var(--default-color), transparent 40%); padding: 7px 16px; display: flex; align-items: center; justify-content: center; } .blog-pagination li a.active, .blog-pagination li a:hover { background: var(--accent-color); color: var(--contrast-color); } .blog-pagination li a.active a, .blog-pagination li a:hover a { color: var(--contrast-color); } .blog-details { padding-bottom: 30px; } .blog-details .article { background-color: var(--surface-color); padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .blog-details .post-img { margin: -30px -30px 20px -30px; overflow: hidden; } .blog-details .title { color: var(--heading-color); font-size: 28px; font-weight: 700; padding: 0; margin: 30px 0; } .blog-details .content { margin-top: 20px; } .blog-details .content h1 { font-size: 32px; line-height: 1.25; margin: 0 0 0.75em; font-weight: 700; } .blog-details .content h2 { font-size: 24px; line-height: 1.30; margin: 1.6em 0 0.6em; font-weight: 700; } .blog-details .content h3 { font-size: 20px; line-height: 1.35; margin: 1.4em 0 0.5em; font-weight: 700; } .blog-details .content h4 { font-size: 18px; line-height: 1.40; margin: 1.2em 0 0.45em; font-weight: 600; } .blog-details .content h5 { font-size: 16px; line-height: 1.45; margin: 1.0em 0 0.4em; font-weight: 600; } .blog-details .content h6 { font-size: 14px; line-height: 1.45; margin: 0.9em 0 0.35em; font-weight: 600; } .blog-details .content blockquote { overflow: hidden; background-color: color-mix(in srgb, var(--default-color), transparent 95%); padding: 60px; position: relative; text-align: center; margin: 20px 0; } .blog-details .content blockquote p { color: var(--default-color); line-height: 1.6; margin-bottom: 0; font-style: italic; font-weight: 500; font-size: 22px; } .blog-details .content blockquote:after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background-color: var(--accent-color); margin-top: 20px; margin-bottom: 20px; } .blog-details .content blockquote.pull-quote__quote { overflow: visible; background-color: transparent; padding: 0; text-align: left; } .blog-details .content blockquote.pull-quote__quote:after { display: none; } .blog-details .content blockquote.pull-quote__quote p { font-size: 18.7px; font-style: normal; } .blog-details .meta-top { margin-top: 20px; color: color-mix(in srgb, var(--default-color), transparent 40%); } .blog-details .meta-top ul { display: flex; flex-wrap: wrap; list-style: none; align-items: center; padding: 0; margin: 0; } .blog-details .meta-top ul li + li { padding-left: 20px; } .blog-details .meta-top i { font-size: 16px; margin-right: 8px; line-height: 0; color: color-mix(in srgb, var(--default-color), transparent 40%); } .blog-details .meta-top a { color: color-mix(in srgb, var(--default-color), transparent 40%); font-size: 14px; display: inline-block; line-height: 1; } .blog-details .meta-bottom { padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); } .blog-details .meta-bottom i { color: color-mix(in srgb, var(--default-color), transparent 40%); display: inline; } .blog-details .meta-bottom a { color: color-mix(in srgb, var(--default-color), transparent 40%); transition: 0.3s; } .blog-details .meta-bottom a:hover { color: var(--accent-color); } .blog-details .meta-bottom .cats { list-style: none; display: inline; padding: 0 20px 0 0; font-size: 14px; } .blog-details .meta-bottom .cats li { display: inline-block; } .blog-details .meta-bottom .tags { list-style: none; display: inline; padding: 0; font-size: 14px; } .blog-details .meta-bottom .tags li { display: inline-block; } .blog-details .meta-bottom .tags li + li::before { padding-right: 6px; color: var(--default-color); content: ","; } .blog-details .meta-bottom .share { font-size: 16px; } .blog-details .meta-bottom .share i { padding-left: 5px; } .blog-author { padding: 10px 0 40px 0; } .blog-author .author-container { background-color: var(--surface-color); padding: 20px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .blog-author img { max-width: 120px; margin-right: 20px; } .blog-author h4 { font-weight: 600; font-size: 20px; margin-bottom: 0px; padding: 0; color: color-mix(in srgb, var(--default-color), transparent 20%); } .blog-author .social-links { margin: 0 10px 10px 0; } .blog-author .social-links a { color: color-mix(in srgb, var(--default-color), transparent 60%); margin-right: 5px; } .blog-author p { font-style: italic; color: color-mix(in srgb, var(--default-color), transparent 30%); margin-bottom: 0; } .blog-comments { padding: 10px 0; } .blog-comments .comments-count { font-weight: bold; } .blog-comments .comment { margin-top: 30px; position: relative; } .blog-comments .comment .comment-img { margin-right: 14px; } .blog-comments .comment .comment-img img { width: 60px; } .blog-comments .comment h5 { font-size: 16px; margin-bottom: 2px; } .blog-comments .comment h5 a { font-weight: bold; color: var(--default-color); transition: 0.3s; } .blog-comments .comment h5 a:hover { color: var(--accent-color); } .blog-comments .comment h5 .reply { padding-left: 10px; color: color-mix(in srgb, var(--default-color), transparent 20%); } .blog-comments .comment h5 .reply i { font-size: 20px; } .blog-comments .comment time { display: block; font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 40%); margin-bottom: 5px; } .blog-comments .comment.comment-reply { padding-left: 40px; } .comment-form { padding-top: 10px; } .comment-form form { background-color: var(--surface-color); margin-top: 30px; padding: 30px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .comment-form form h4 { font-weight: bold; font-size: 22px; } .comment-form form p { font-size: 14px; } .comment-form form input { background-color: var(--surface-color); color: var(--default-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%); font-size: 14px; border-radius: 4px; padding: 10px 10px; } .comment-form form input:focus { color: var(--default-color); background-color: var(--surface-color); box-shadow: none; border-color: var(--accent-color); } .comment-form form input::placeholder { color: color-mix(in srgb, var(--default-color), transparent 50%); } .comment-form form textarea { background-color: var(--surface-color); color: var(--default-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%); border-radius: 4px; padding: 10px 10px; font-size: 14px; height: 120px; } .comment-form form textarea:focus { color: var(--default-color); box-shadow: none; border-color: var(--accent-color); background-color: var(--surface-color); } .comment-form form textarea::placeholder { color: color-mix(in srgb, var(--default-color), transparent 50%); } .comment-form form .form-group { margin-bottom: 25px; } .comment-form form .btn-primary { border-radius: 4px; padding: 10px 20px; border: 0; background-color: var(--accent-color); color: var(--contrast-color); } .comment-form form .btn-primary:hover { color: var(--contrast-color); background-color: color-mix(in srgb, var(--accent-color), transparent 20%); } .widgets-container { background-color: var(--surface-color); padding: 30px; margin: 60px 0 30px 0; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); } .widget-title { color: var(--heading-color); font-size: 20px; font-weight: 700; padding: 0; margin: 0 0 20px 0; } .widget-item { margin-bottom: 40px; } .widget-item:last-child { margin-bottom: 0; } .search-widget form { background: var(--background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%); padding: 3px 10px; position: relative; transition: 0.3s; } .search-widget form input[type=text] { border: 0; padding: 4px; border-radius: 4px; width: calc(100% - 40px); background-color: var(--background-color); color: var(--default-color); } .search-widget form input[type=text]:focus { outline: none; } .search-widget form button { background: var(--accent-color); color: var(--contrast-color); position: absolute; top: 0; right: 0; bottom: 0; border: 0; font-size: 16px; padding: 0 15px; margin: -1px; transition: 0.3s; border-radius: 0 4px 4px 0; line-height: 0; } .search-widget form button i { line-height: 0; } .search-widget form button:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); } .search-widget form:is(:focus-within) { border-color: var(--accent-color); } .categories-widget ul { list-style: none; padding: 0; margin: 0; } .categories-widget ul li { padding-bottom: 10px; } .categories-widget ul li:last-child { padding-bottom: 0; } .categories-widget ul a { color: color-mix(in srgb, var(--default-color), transparent 20%); transition: 0.3s; } .categories-widget ul a:hover { color: var(--accent-color); } .categories-widget ul a span { padding-left: 5px; color: color-mix(in srgb, var(--default-color), transparent 50%); font-size: 14px; } .recent-posts-widget .post-item { display: flex; margin-bottom: 15px; } .recent-posts-widget .post-item:last-child { margin-bottom: 0; } .recent-posts-widget .post-item img { width: 80px; margin-right: 15px; } .recent-posts-widget .post-item h4 { font-size: 15px; font-weight: bold; margin-bottom: 5px; } .recent-posts-widget .post-item h4 a { color: var(--default-color); transition: 0.3s; } .recent-posts-widget .post-item h4 a:hover { color: var(--accent-color); } .recent-posts-widget .post-item time { display: block; font-style: italic; font-size: 14px; color: color-mix(in srgb, var(--default-color), transparent 50%); } .tags-widget { margin-bottom: -10px; } .tags-widget ul { list-style: none; padding: 0; margin: 0; } .tags-widget ul li { display: inline-block; } .tags-widget ul a { color: color-mix(in srgb, var(--default-color), transparent 30%); font-size: 14px; padding: 6px 14px; margin: 0 6px 8px 0; border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%); display: inline-block; transition: 0.3s; } .tags-widget ul a:hover { background: var(--accent-color); color: var(--contrast-color); border: 1px solid var(--accent-color); } .tags-widget ul a span { padding-left: 5px; color: color-mix(in srgb, var(--default-color), transparent 60%); font-size: 14px; } .presento-hero { min-height: var(--hero-h, clamp(280px, 35vw, 560px)); display: flex; align-items: center; } .presento-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .presento-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,.35)); } .presento-hero .container { position: relative; z-index: 2; color: #fff; padding-block: clamp(40px, 10vw, 120px); } .presento-hero h1 { color: #fff; margin-bottom: .3rem; } .presento-hero p { color: #f2f2f2; max-width: 65ch; margin: 0 auto 1rem; } #team .swiper { padding-bottom: 36px; } #team .swiper .swiper-pagination { bottom: 0; } #clients .swiper { padding-bottom: 28px; } #clients .swiper .swiper-pagination { bottom: 0; } #team .swiper .swiper-pagination-bullet, #clients .swiper .swiper-pagination-bullet { opacity: .4; } #team .swiper .swiper-pagination-bullet-active, #clients .swiper .swiper-pagination-bullet-active { opacity: 1; } .navmenu .dropdown.megamenu > ul { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: 8px 24px; width: min(880px, 90vw); padding: 16px 20px; } .navmenu .dropdown.megamenu > ul > li > a { white-space: normal; line-height: 1.25; padding: 8px 0; display: block; } @media (min-width:1200px) { .navmenu .dropdown.megamenu > ul { grid-template-columns: repeat(4, minmax(0, 220px)); width: min(1040px, 85vw); } } .navmenu .dropdown-menu { left: 50% !important; transform: translateX(-50%); right: auto !important; min-width: 1100px; max-width: min(1100px, calc(100vw - 48px)); } .dropdown .dm-title { font-family: var(--nav-font); font-weight: 400; } .header .navmenu .dropdown-menu .sm-list a { display: flex !important; white-space: normal !important; padding: .5rem .75rem !important; } .sm-title { letter-spacing: .04em; } .sm-cta { white-space: nowrap; } .sm-item { border-radius: 6px; } .sm-item:hover, .sm-item:focus-visible { background: var(--bs-tertiary-bg); } .sm-text { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .header .navmenu .dropdown-menu .am-item { display: flex !important; white-space: normal !important; } .am-title { letter-spacing: .04em; } .am-cta { white-space: nowrap; } .am-item { border-radius: 6px; } .am-item:hover, .am-item:focus-visible { background: var(--bs-tertiary-bg); } .am-text { min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .feature-item .feature-title { display: flex; align-items: center; gap: .6rem; background: var(--accent-color, #cf5143); color: #fff; padding: .65rem .9rem; border-radius: 4px; font-weight: 500; } .feature-item .feature-title i { font-size: 1.35em; line-height: 0; } .feature-item .feature-title span { white-space: normal; } .feature-item .feature-image { border-radius: .5rem; overflow: hidden; } .feature-item .feature-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .accordion-header { font-weight: bold; } .feature-badge { display: flex; align-items: center; gap: .6rem; background: var(--accent-color); color: #fff; font-weight: 700; height: 60px; padding: .75rem 1rem; border-radius: 4px; margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 1rem; box-shadow: 0 6px 18px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.06); } .feature-badge .bi { font-size: 1.6rem; line-height: 1; } .feature-badge span { flex: 1; } .feature-img { width: 100%; aspect-ratio: 3/2; object-fit: contain; display: block; margin-bottom: 1rem; } .navbar .dropdown-menu { --mm-radius: 1rem; --mm-gap: 1rem; } .mm-rich .dropdown-menu { border-radius: var(--mm-radius); padding: 1rem 0; } .mm-card { color: inherit; } .mm-card:hover { text-decoration: none; } .mm-card-media img { width: 100%; height: 100%; } .mm-card:hover .mm-card-media img { transform: scale(1.03); transition: transform .25s ease; } .mm-card-body { padding-inline: .25rem; } .mm-teaser { color: var(--bs-secondary-color, #6c757d); } .mm-list .dropdown-menu { border-radius: var(--mm-radius); overflow: hidden; } .mm-ul { min-width: 16rem; } .mm-ul .list-group-item { padding: .75rem 1rem; } .mm-link { text-decoration: none; color: inherit; } .mm-sub { margin: .25rem 0 0 .5rem; padding-left: 1rem; list-style: none; border-left: 1px solid rgba(0,0,0,.075); } .mm-sub li { margin: .25rem 0; } .mm-sub a { font-size: .95rem; color: var(--bs-secondary-color, #6c757d); text-decoration: none; } .mm-sub a:hover { text-decoration: underline; } .-split::after { margin-left: .25rem; } .mm-simple .dropdown-menu { border-radius: .75rem; } @media (min-width: 1200px) { .position-static .dropdown-menu { left: 0; right: 0; } } #header .dropdown-menu { box-shadow: 0 1rem 2rem rgba(0,0,0,.08); } .dropdown-menu [role="menuitem"]:focus { outline: 2px solid var(--bs-primary); outline-offset: 2px; } :root { --alt-background-color: var(--background-color); } :root { --sash-h: 62px; } .page-title.brand-sash { position: relative; overflow: hidden; } .page-title.brand-sash::before, .page-title.brand-sash::after { content: ""; position: absolute; left: 0; right: 0; width: 100%; height: var(--sash-h); background: #fff; } .page-title.brand-sash::before { top: 0; -webkit-clip-path: polygon(0 0, 100% 0, 100% 10%, 0 100%); clip-path: polygon(0 0, 100% 0, 100% 10%, 0 100%); } .page-title.brand-sash::after { bottom: -1px; -webkit-clip-path: polygon(0 90%, 100% 0, 100% 100%, 0 100%); clip-path: polygon(0 90%, 100% 0, 100% 100%, 0 100%); } @media (max-width: 991.98px) { :root { --sash-h: 36px; } } .umb-block-grid { display: grid; gap: 1.5rem; } .umb-block-grid img { max-width: 100%; height: auto; display: block; } .umb-block-grid figure { margin: 1rem 0; } .umb-block-grid h2, .umb-block-grid h3 { margin-top: 1.25rem; } .dropdown-menu [role="menuitem"]:focus { outline: 2px solid var(--accent-color); outline-offset: 2px; } .page-title { color: var(--default-color); background-color: var(--background-color); } .dropdown-menu .teaser-item { display: grid; grid-template-rows: auto auto; gap: 12px; padding: 16px; border: 1px solid rgba(0,0,0,.08); border-radius: 14px; background: var(--bs-body-bg); transition: background-color .15s, box-shadow .15s, transform .15s; margin-bottom: 10px; } .dropdown-menu .teaser-title { font-weight: 700; font-size: clamp(1.05rem, .25vw + 1rem, 1.35rem); line-height: 1.25; letter-spacing: .1px; } .dropdown-menu .teaser-content { display: grid; grid-template-columns: 96px 1fr; align-items: start; gap: 16px; min-width: 0; } .dropdown-menu .teaser-content img { width: 96px; height: 72px; border-radius: 10px; object-fit: cover; display: block; flex-shrink: 0; } .dropdown-menu .teaser-desc { color: var(--bs-secondary-color); line-height: 1.45; min-width: 0; overflow: hidden; word-break: break-word; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .dropdown-menu .teaser-item:hover, .dropdown-menu .teaser-item:focus-within { background: var(--bs-tertiary-bg); box-shadow: 0 .25rem .75rem rgba(0,0,0,.06); transform: translateY(-1px); border-color: transparent; } @media (max-width:420px) { .dropdown-menu .teaser-content { grid-template-columns: 1fr; } .dropdown-menu .teaser-content img { width: 100%; height: auto; aspect-ratio: 4/3; } } .site-footer { --footer-bg: #1C1C1B; --footer-color: #F2F2F2; --footer-muted: #BDBDBA; --footer-border: rgba(255,255,255,.10); --footer-link: #BDBDBA; --footer-link-hover: #FFFFFF; --footer-pill-bg: rgba(255,255,255,.10); } .site-footer { background: var(--footer-bg); color: var(--footer-color); } .site-footer small, .site-footer h5, .site-footer h6, .site-footer p { color: var(--footer-muted); } .site-footer a { color: var(--footer-link); } .site-footer a:hover { color: var(--footer-link-hover); } .site-footer .link-secondary { color: var(--footer-link) !important; } .footer-newsletter-btn { color: #1C1C1B; } .site-footer .list-inline { border-top: 1px solid var(--footer-border); } .site-footer .btn.btn-outline-secondary { --bs-btn-color: var(--footer-color); --bs-btn-border-color: var(--footer-border); --bs-btn-hover-bg: var(--footer-pill-bg); --bs-btn-hover-border-color: var(--footer-link); --bs-btn-hover-color: var(--footer-link); } .site-footer .form-control { background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: var(--footer-color); } .site-footer .form-control::placeholder { color: var(--footer-muted); } .hero-slide { position: relative; display: flex; align-items: center; } .hero-slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-slide::after { content: ""; position: absolute; inset: 0; } .hero-slide .container { position: relative; z-index: 2; } .hero-swiper .swiper-button-prev, .hero-swiper .swiper-button-next { color: #ccc; } .hero-swiper .swiper-pagination-bullet { background: #ccc; opacity: .6; } .hero-swiper .swiper-pagination-bullet-active { background: var(--accent-color); opacity: 1; } :root { --swiper-theme-color: var(--accent-color); --swiper-navigation-color: var(--accent-color); --swiper-pagination-color: var(--accent-color); } .hero .swiper-button-prev, .hero .swiper-button-next, .hero .swiper-pagination { z-index: 3; } .hero .swiper-button-prev, .hero .swiper-button-next { color: var(--accent-color); width: 44px; height: 44px; border-radius: 999px; background: rgba(0,0,0,.15); backdrop-filter: blur(2px); transition: background .2s, transform .2s; } .hero .swiper-button-prev:hover, .hero .swiper-button-next:hover { background: rgba(0,0,0,.25); transform: translateY(-1px); } .hero .swiper-button-prev:focus-visible, .hero .swiper-button-next:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 2px; } .hero .swiper-button-prev::after, .hero .swiper-button-next::after { font-size: 18px; } .hero .swiper-pagination-bullets .swiper-pagination-bullet { width: 8px; height: 8px; margin: 0 6px !important; opacity: 1; background: color-mix(in srgb, var(--accent-color) 35%, transparent); transition: transform .15s, background-color .15s; } .hero .swiper-pagination-bullet:hover { transform: scale(1.15); } .hero .swiper-pagination-bullet-active { background: var(--accent-color); } .hero .swiper-pagination-progressbar .swiper-pagination-progressbar-fill { background: var(--accent-color); } .hero { position: relative; overflow: hidden; } .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 1; } .hero .container { position: relative; z-index: 2; margin-top: 8rem; } .breadcrumbs { background: var(--bs-tertiary-bg); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: .5rem 1rem; } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: var(--accent-color); } .breadcrumb .breadcrumb-item a:hover { color: var(--accent-color); text-decoration: none; } .breadcrumb .breadcrumb-item.active { color: var(--bs-body-color); font-weight: 600; } :root { --cookie-bg: rgba(18,18,18,.92); --cookie-fg: #fff; --cookie-link: #9ee7ff; --cookie-shadow: 0 -10px 30px rgba(0,0,0,.25); --cookie-radius: 16px; } .cookiebar { position: fixed; inset: auto 0 0 0; z-index: 9999; display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: center; padding: 14px 16px; background: var(--cookie-bg); color: var(--cookie-fg); box-shadow: var(--cookie-shadow); backdrop-filter: blur(8px); border-top-left-radius: var(--cookie-radius); border-top-right-radius: var(--cookie-radius); transform: translateY(100%); opacity: 0; transition: transform .35s ease, opacity .35s ease; } .cookiebar.show { transform: translateY(0); opacity: 1; } .cookiebar p { margin: 0; font-size: .95rem; line-height: 1.4; } .cookiebar a { color: var(--cookie-link); text-decoration: underline; } .cookiebar .btn { border: 0; padding: 10px 16px; border-radius: 9999px; cursor: pointer; font-weight: 600; } .cookiebar .btn-decline { background: #2a2a2a; color: #fff; } .cookiebar .btn-accept { background: var(--accent-color, #ff6a00); color: #1C1C1B; } .cookiebar .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } @media (max-width: 720px) { .cookiebar { grid-template-columns: 1fr; gap: 8px; } .cookiebar .btn-row { display: flex; gap: 10px; justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .cookiebar { transition: none; } } .header { background: #fff; } .header .navmenu .nav-link { font-family: "Poppins", system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-weight: 400; font-size: 16px; color: #212529; padding: 18px 8px; line-height: 1; display: inline-flex; align-items: center; gap: .35rem; } .header .navmenu .nav-link:hover, .header .navmenu .nav-item.show > .nav-link { color: #e03a3c; } .header .navmenu .nav-link > .bi { font-size: .9rem; vertical-align: -0.05em; } a[id^="flexmenu_"].dropdown-toggle::after, a[id^="flexmenu_"]::after { content: none !important; display: none !important; } @media (hover: hover) { #navmenu, #navmenu button { outline: 0; box-shadow: none; } } .header .navmenu .dropdown-menu { --menu-radius: .25rem; --menu-shadow: 0 1rem 2rem rgba(0,0,0,.08); border: 0; border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); padding: .75rem 0; } .header .navmenu .dropdown-menu.mega, .header .navmenu .dropdown-menu.start-0.end-0.w-100 { padding: 1rem 0; border-radius: .25rem; } .header .navmenu .dropdown-item { display: flex; align-items: center; gap: .4rem; } .header .navmenu .dropdown-item .bi { font-size: .95rem; opacity: .9; } .header .navmenu .dropdown-menu.simple { padding: .5rem 0; } .header .navmenu .dropdown-menu.simple .dropdown-item { padding: .35rem 1rem; } .header .navmenu .dropdown-menu.mega .container { } .header .navmenu .dropdown-menu.mega .card { border: 0; background: transparent; } .header .navmenu .dropdown-menu.mega .card .ratio > img, .header .navmenu .dropdown-menu.mega .ratio > img { width: 100%; height: 100%; object-fit: cover; } @media (hover: hover) { .header .navmenu .dropdown-menu.mega .ratio { overflow: hidden; border-radius: .5rem; } .header .navmenu .dropdown-menu.mega .ratio > img { transform: scale(1); transition: transform .25s ease; } .header .navmenu .dropdown-menu.mega a:hover .ratio > img { transform: scale(1.03); } } .header .navmenu .dropdown-menu.mega .list-group-item { padding: .5rem 1rem; border-left: 0; border-right: 0; } .header .navmenu .dropdown-menu.mega .thumb-link { display: flex; align-items: center; text-decoration: none; color: inherit; border-bottom: 1px solid rgba(0,0,0,.08); padding-bottom: .5rem; margin-bottom: .75rem; } .header .navmenu .dropdown-menu.mega .thumb-link img { width: 64px; height: 48px; object-fit: cover; border-radius: .25rem; margin-right: .75rem; } .dropdown-menu.half { width: 50vw; } @media (max-width: 991.98px) { .dropdown-menu.half { width: 50vw; left: 50px !important; transform: none !important; } .service-details.is-sticky { position: static; top: auto; } } @media (min-width: 992px) { .header .navbar-nav .nav-item { flex: 0 0 auto; } .header .navmenu .nav-item.position-static > .dropdown-menu { margin-top: 0; } .service-details.is-sticky { position: sticky; top: 110px; align-self: flex-start; } } .header .navmenu .dropdown-item.justify-content-between .bi { margin-left: .5rem; } .btn-getstarted { margin-left: 1rem; padding: .5rem 1rem; border-radius: .5rem; } @media (min-width: 992px) { .header .navmenu .nav-item.dropdown > .dropdown-menu { margin-top: .6rem !important; --bs-dropdown-min-width: 20rem; } section:has(.service-details.is-sticky), .section:has(.service-details.is-sticky) { overflow: visible; } } @media (hover:hover) and (pointer:fine) { .header .navmenu .nav-link, .header .navmenu .dropdown-toggle, .header .navmenu .dropdown-item, .header .navmenu .nav-item.show > .nav-link { outline: none !important; box-shadow: none !important; } } .header .navmenu .nav-link:focus-visible, .header .navmenu .dropdown-item:focus-visible { outline: 0px solid var(--bs-primary); outline-offset: 0px; box-shadow: none; } .navmenu .dropdown.megamenu > ul > li { min-width: 0; } .navmenu .dropdown.megamenu > ul > li > a { display: block; width: 100%; } .navmenu .dropdown.megamenu p { margin-bottom: 0; white-space: normal; overflow-wrap: anywhere; } .mm-teaser { max-width: 52ch; } .teaser-item img { object-fit: cover; } .mm-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; padding-left: 1px; -webkit-box-orient: vertical; overflow: hidden; } .header .navmenu .dropdown-menu.mega a, .header .navmenu .dropdown-menu.mega p, .header .navmenu .dropdown-menu.mega .mm-teaser { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .header .navmenu .dropdown-menu.mega [class^="col-"], .header .navmenu .dropdown-menu.mega [class*=" col-"] { min-width: 0; } .header__languages { position: relative; display: inline-block; margin-left: 10px; } .header__languages .language-btn { cursor: pointer; padding: 6px 8px; border-radius: 4px; font-size: 13px; border: 0; -webkit-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; color: #F65203 !important; } .header__languages .language-btn:hover { color: #F65203; } .header__languages .language-dropdown { display: none; position: absolute; background-color: #bcc0cd; border-radius: 4px; border: 0; width: 46px; -webkit-box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; } .header__languages .language-dropdown a { color: black; padding: 8px 8px; text-decoration: none; display: block; } .header__languages .language-dropdown a:hover { color: #F65203; } .header__languages .show { display: block; } @media (max-width: 1199px) { header #navmenu.navmenu > ul { gap: 10px; } #navmenu ul, #navmenu li { list-style: none !important; margin-left: 10px; } #navmenu li::before, #navmenu li::marker, #navmenu a::before, #navmenu a::marker { content: none !important; } .dm-media { display: none; } .dm-desc { display: none; } .mm-teaser-media picture { display: none; } .dropdown .dm-title h3 { margin-bottom: 0; color: black; } .dropdown-menu .container .text-uppercase { display: none; } .mm-teaser-desc { display: none; } } @media (min-width: 1200px) { .d-xl-none .dropdown-active { padding: 10px !important; } header #navmenu.navmenu { position: absolute; left: 50%; transform: translateX(-46.5%); } header #navmenu.navmenu > ul { display: flex; align-items: center; gap: 30px; white-space: nowrap; } header #navmenu.navmenu > ul > li > a { white-space: nowrap; } #navmenu .dropdown > ul.d-xl-none { display: none !important; visibility: hidden !important; opacity: 0 !important; } #navmenu .dropdown:hover > ul.d-xl-none { display: none !important; } .header .navmenu .dropdown-menu.mega { left: 0; right: 0; } } @media (max-width: 1199px) { @media (max-width: 1199px) { #navmenu .nav-lang { margin-top: 10px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0,0,0,.08); } #navmenu .nav-lang__label { font-family: var(--nav-font); font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; opacity: .7; } #navmenu .nav-lang__links { display: flex; gap: 10px; justify-content: flex-end; } #navmenu .nav-lang__link { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-width: 44px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(0,0,0,.12); color: var(--nav-dropdown-color); font-weight: 600; text-decoration: none; } #navmenu .nav-lang__link.is-active { background: var(--accent-color); color: var(--contrast-color); border-color: transparent; } } .header__languages .language-btn { display: none; } .navmenu .dropdown-menu.desktop-dropdown { display: none !important; } .mobile-nav-active header #navmenu.navmenu > ul > li > a { display: flex; align-items: center; justify-content: flex-end; column-gap: 10px; } .mobile-nav-active header #navmenu.navmenu > ul > li > a > i { margin-left: 8px; flex: 0 0 auto; } #navmenu .dropdown-menu.desktop-dropdown { display: none !important; } } .code-snippet { border: 1px solid rgba(0,0,0,.08); border-radius: 10px; overflow: hidden; margin: 1.25rem 0; } .code-snippet__header { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 10px 12px; background: rgba(0,0,0,.03); } .code-snippet__title { font-weight: 600; font-size: .95rem; opacity: .9; } .code-snippet__copy { border: 1px solid rgba(0,0,0,.18); background: white; border-radius: 8px; padding: 6px 10px; font-size: .9rem; cursor: pointer; } .code-snippet__pre { margin: 0; padding: 14px 14px; overflow: auto; } .code-snippet pre, .code-snippet code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: .92rem; line-height: 1.45; } .margin-block { display: block; width: 100%; flex: 0 0 auto; } .margin-block--sm { height: 1.5rem; } .margin-block--md { height: 3rem; } .margin-block--xl { height: clamp(4rem, 6vw, 6rem); } .pull-quote { position: relative; margin: 2rem 0; padding: 1.75rem 2rem 1.75rem 2rem; background: var(--callout-info-bg); color: var(--callout-info-text); border-left: 6px solid var(--callout-accent); border-radius: 1.25rem; box-shadow: var(--callout-shadow); } .pull-quote__heading { color: var(--accent-color); font-weight: 600; margin: 0 0 0.75rem 0; letter-spacing: 0.02em; } .pull-quote__heading:is(h1) { font-size: 1.15rem; text-transform: uppercase; } .pull-quote__heading:is(h2) { font-size: 1.05rem; text-transform: uppercase; } .pull-quote__heading:is(h3) { font-size: 1rem; text-transform: none; font-weight: 500; } .pull-quote__quote { margin: 0; padding: 0; } .pull-quote__text { position: relative; margin: 0; font-size: 1.25rem; line-height: 1.6; font-weight: 500; color: var(--callout-info-text); } .pull-quote__text::before { content: "“"; position: absolute; left: -1.2rem; top: 0.2rem; color: var(--callout-accent); font-size: 2.8rem; line-height: 1; font-weight: 700; } .pull-quote-detailed { margin: clamp(2rem, 4vw, 4rem) 0; } .pull-quote-detailed__heading { margin: 0; line-height: 1.1; } .pull-quote-detailed__heading::after { content: ""; display: block; width: 120px; height: 4px; margin-top: 0.75rem; margin-bottom: 1.25rem; background-color: var(--accent-color); } blockquote.pull-quote-detailed__quote { margin: 0; padding: 0; border-left: none; } p.pull-quote-detailed__text { margin: 0; font-size: 1.1rem; line-height: 1.4; color: var(--heading-color); white-space: pre-line; letter-spacing: -0.02em; } .pull-quote-detailed__body { margin-top: 1rem; color: var(--default-color); line-height: 1.7; } @media (max-width: 767.98px) { .pull-quote { padding: 1.25rem; border-left-width: 4px; border-radius: 0.75rem; } .pull-quote__heading { margin-bottom: 1rem; } .pull-quote__text { font-size: 0.95rem; line-height: 1.4; } .pull-quote__text::before { left: -0.9rem; top: 0; font-size: 2rem; } .pull-quote-detailed__heading::after { width: 100px; margin-top: 0.625rem; margin-bottom: 1rem; } .pull-quote-detailed__text { font-size: 1rem; line-height: 1.4; } .pull-quote-detailed__body { margin-top: 0.875rem; line-height: 1.65; } } .callout { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 2rem; margin-bottom: 1.5rem; background: var(--callout-bg); border: 1px solid color-mix(in srgb, currentColor 8%, transparent); backdrop-filter: blur(2px); box-shadow: var(--callout-shadow); transition: transform 180ms ease, box-shadow 180ms ease; } .callout__title { color: var(--accent-color); text-transform: uppercase; font-size: .95rem; font-weight: 600; padding-bottom: 0.75rem; margin-bottom: 0.75rem; } .callout--hover:hover { transform: translateY(-6px); box-shadow: var(--callout-shadow-hover); } .callout--no-hover:hover { transform: none; box-shadow: var(--callout-shadow); } .callout--bar-top { border-top: 6px solid var(--callout-accent); } .callout--bar-left { border-left: 6px solid var(--callout-accent); } .callout--bar-hide { border-top: 1px solid var(--callout-border); } .callout--neutral { background: var(--callout-neutral-bg); color: var(--callout-neutral-text); } .callout--info { background: var(--callout-info-bg); color: var(--callout-info-text); } .callout--success { background: var(--callout-success-bg); color: var(--callout-success-text); } .callout--warning { background: var(--callout-warning-bg); color: var(--callout-warning-text); } .callout--danger { background: var(--callout-danger-bg); color: var(--callout-danger-text); } :root { --callout-link-bg: #f1f3fb; --callout-link-title-bg: #e8ecfa; --callout-link-color: #142157; --callout-link-icon-bg: #f3f5fb; --callout-link-radius: 1.25rem; } .callout-reference { margin: clamp(2rem, 4vw, 4rem) 0; } .callout-reference__pullquote { margin: 0 0 clamp(2rem, 3vw, 3rem) 0; padding: 1.75rem 2rem; background: var(--callout-info-bg); color: var(--callout-info-text); border-left: 6px solid var(--callout-accent); border-radius: 1.25rem; box-shadow: var(--callout-shadow); } .callout-reference__pullquote-text { margin: 0; font-weight: 600; line-height: 1.55; color: var(--callout-info-text); white-space: pre-line; } .callout-reference__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 38%); gap: clamp(2rem, 4vw, 4rem); align-items: start; } .callout-reference--image-left .callout-reference__content { order: 2; } .callout-reference--image-left .callout-reference__media--side { order: 1; } .callout-reference__heading { margin: 0; line-height: 1.1; } .callout-reference__heading::after { content: ""; display: block; width: 120px; height: 4px; margin-top: 0.75rem; margin-bottom: 1.5rem; background-color: var(--accent-color); } .callout-reference__description { margin-top: 0; color: var(--default-color); line-height: 1.7; } .callout-reference__description > :last-child { margin-bottom: 0; } .callout-reference__actions { margin-top: 2rem; } .callout-reference__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.85rem 1.75rem; border-radius: 0.45rem; background: var(--accent-color); color: var(--contrast-color); font-weight: 700; line-height: 1; text-decoration: none; box-shadow: none; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .callout-reference__button:hover, .callout-reference__button:focus { background: color-mix(in srgb, var(--accent-color), transparent 15%); color: var(--contrast-color); transform: translateY(-1px); text-decoration: none; } .callout-reference__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color), #000 12%); outline-offset: 3px; } .callout-reference__media { margin: 0; } .callout-reference__media img { display: block; width: 100%; height: auto; border-radius: 1.25rem; box-shadow: var(--callout-shadow); } .callout-reference__media--inline { display: none; margin: 0 0 1.5rem 0; } .callout-reference--compact .callout-reference__layout { display: block; } .callout-reference--compact .callout-reference__media--side { display: none; } .callout-reference--compact .callout-reference__media--inline { display: block; } @media (max-width: 991.98px) { .callout-reference__layout { display: block; } .callout-reference__media--side { display: none; } .callout-reference__media--inline { display: block; } } @media (max-width: 767.98px) { .callout-reference__pullquote { margin-bottom: 1.75rem; padding: 1.35rem; border-left-width: 5px; border-radius: 1rem; } .callout-reference__pullquote-text { font-size: 1rem; line-height: 1.45; } .callout-reference__heading::after { width: 100px; margin-top: 0.625rem; margin-bottom: 1.125rem; } .callout-reference__description { line-height: 1.65; } .callout-reference__actions { margin-top: 1.5rem; } .callout-reference__media img { border-radius: 1rem; } } .callout-link { display: flex; flex-direction: column; height: 100%; padding: 2rem; border-radius: var(--callout-link-radius); background: var(--callout-bg); border: 1px solid color-mix(in srgb, var(--callout-link-color) 10%, transparent); box-shadow: var(--callout-shadow); transition: transform 180ms ease, box-shadow 180ms ease; } .callout-link:hover { transform: translateY(-6px); box-shadow: var(--callout-shadow-hover); } .row.gy-4:has(.callout-link) { margin-bottom: clamp(3rem, 1vw, 5rem); margin-top: clamp(1rem, 1vw, 2rem) !important; } .callout-link__icon { width: 4.75rem; height: 4.75rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 1rem; background: var(--callout-link-icon-bg); color: var(--callout-link-color); font-size: 2.1rem; line-height: 1; } .callout-link__title { display: inline-block; margin: 0 0 1.5rem 0; padding: 0.45rem 0.75rem; border-radius: 0.35rem; background: var(--callout-link-title-bg); color: var(--callout-link-color); font-size: 1rem; font-weight: 700; } .callout-link__text { color: var(--default-color); font-size: 1.05rem; line-height: 1.65; } .callout-link__text > :last-child { margin-bottom: 0; } .callout-link__action { margin-top: auto; padding-top: 2rem; color: var(--callout-link-color); font-weight: 700; text-decoration: none; } .callout-link__action:hover { color: var(--accent-color); } .callout-link__action i { margin-left: 0.35rem; } .callout-cta { margin: clamp(2rem, 4vw, 4rem) 0; } .callout-cta__pullquote { margin: 0 0 clamp(2rem, 3vw, 3rem) 0; padding: 1.75rem 2rem; background: var(--callout-danger-bg); color: var(--callout-info-text); border-left: 6px solid var(--callout-accent); border-radius: 1.25rem; box-shadow: var(--callout-shadow); } .callout-cta__pullquote-text { margin: 0; font-weight: 600; line-height: 1.55; color: var(--callout-info-text); white-space: pre-line; } .callout-cta__heading { margin: 0; line-height: 1.1; } .callout-cta__heading::after { content: ""; display: block; width: 120px; height: 4px; margin-top: 0.75rem; margin-bottom: 1.5rem; background-color: var(--accent-color); } .callout-cta__description { margin-top: 0; color: var(--default-color); line-height: 1.7; } .callout-cta__description > :last-child { margin-bottom: 0; } .callout-cta__actions { margin-top: 2rem; } .callout-cta__button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.85rem 1.75rem; border-radius: 0.45rem; background: var(--accent-color); color: var(--contrast-color); font-weight: 700; line-height: 1; text-decoration: none; transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; } .callout-cta__button:hover, .callout-cta__button:focus { background: color-mix(in srgb, var(--accent-color), transparent 15%); color: var(--contrast-color); transform: translateY(-1px); text-decoration: none; } .callout-cta__button:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color), #000 12%); outline-offset: 3px; } @media (max-width: 767.98px) { .callout-cta__pullquote { margin-bottom: 1.75rem; padding: 1.35rem 1.35rem 1.35rem 1.6rem; border-radius: 1rem; } .callout-cta__pullquote::before { width: 5px; border-radius: 1rem 0 0 1rem; } .callout-cta__pullquote-text { font-size: 1rem; line-height: 1.45; } .callout-cta__heading::after { width: 100px; margin-top: 0.625rem; margin-bottom: 1.125rem; } .callout-cta__description { line-height: 1.65; } .callout-cta__actions { margin-top: 1.5rem; } } .assessment-cta { padding: 64px 0; } .assessment-cta__inner { max-width: 1140px; margin: 0 auto; padding: 0 24px; } .assessment-cta__box { padding: 48px; border-radius: var(--bs-border-radius-lg); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10); transition: transform 0.2s ease, box-shadow 0.2s ease; } .assessment-cta__box:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(0, 0, 0, 0.14); } .assessment-cta__title { margin: 0 0 16px; font-size: clamp(23px, 4vw, 40px) !important; line-height: 1.08; font-weight: 700; } .assessment-cta__intro { margin: 0 0 32px; font-size: 16px; line-height: 1.55; max-width: 60ch; } .assessment-cta__actions { margin-top: 24px; } .assessment-cta__button, .assessment-cta__actions .btn, .assessment-cta__actions .btn-primary { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 28px; border: 0; border-radius: var(--bs-border-radius-lg); background: var(--accent-color); color: var(--contrast-color); font-size: 16px; font-weight: 500; text-decoration: none; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease; box-shadow: none; } .assessment-cta__button:hover, .assessment-cta__actions .btn:hover, .assessment-cta__actions .btn-primary:hover { background: color-mix(in srgb, var(--accent-color), transparent 20%); color: var(--contrast-color); transform: translateY(-1px); } .assessment-cta__button:focus-visible, .assessment-cta__actions .btn:focus-visible, .assessment-cta__actions .btn-primary:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent-color), #000 12%); outline-offset: 3px; } .assessment-cta--white .assessment-cta__box { background: var(--contrast-color); color: var(--default-color); } .assessment-cta--white .assessment-cta__title, .assessment-cta--white .assessment-cta__intro { color: var(--default-color); } .assessment-cta--master .assessment-cta__box { background: var(--dark-background-color); color: var(--contrast-color); } .assessment-cta--master .assessment-cta__title, .assessment-cta--master .assessment-cta__intro { color: var(--contrast-color); } .assessment-cta--dark .assessment-cta__box { background: var(--footer-color); color: var(--contrast-color); } .assessment-cta--dark .assessment-cta__title, .assessment-cta--dark .assessment-cta__intro { color: var(--contrast-color); } .assessment-cta--dark .assessment-cta__intro { opacity: 0.95; } @media (max-width: 767.98px) { .assessment-cta { padding: 40px 0; } .assessment-cta__inner { padding: 0 20px; } .assessment-cta__box { padding: 32px 24px; border-radius: 12px; } .assessment-cta__title { font-size: 32px; } .assessment-cta__intro { font-size: 18px; margin-bottom: 24px; max-width: none; } .assessment-cta__button, .assessment-cta__actions .btn, .assessment-cta__actions .btn-primary { width: 100%; } } .content-link-card { display: block; height: 100%; padding: 1.5rem 1rem; margin-bottom: 1.5rem; text-decoration: none; border-radius: var(--bs-border-radius-lg); background: var(--surface-color); color: var(--default-color); transition: 0.2s ease; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1); } .content-link-card:hover { transform: translateY(-2px); text-decoration: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12); } .content-link-card__inner { display: flex; flex-direction: column; gap: 0.85rem; height: 100%; } .content-link-card__title { margin: 0; color: var(--heading-color); font-size: 0.85rem; font-weight: 500; line-height: 1.2; } .content-link-card__title::after { content: ""; display: block; width: 1.5cm; height: 3px; margin-top: 0.5rem; background-color: var(--accent-color); border-radius: 2px; } .content-link-card__description { color: var(--default-color); font-size: 0.8rem; line-height: 1.45; } .content-link-card__cta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; font-weight: 400; font-size: 0.7rem; color: inherit; } .content-link-card__cta-text { color: inherit; } .content-link-card__icon { color: var(--accent-color); flex-shrink: 0; transition: transform 0.2s ease; } .content-link-card:hover .content-link-card__icon { transform: translateX(3px); } .content-link-card--white { background: var(--surface-color); color: var(--default-color); } .content-link-card--white .content-link-card__title { color: var(--heading-color); } .content-link-card--white .content-link-card__title::after { background-color: var(--accent-color); } .content-link-card--white .content-link-card__description { color: var(--default-color); } .content-link-card--white .content-link-card__cta { color: var(--heading-color); } .content-link-card--white .content-link-card__icon { color: var(--accent-color); } .content-link-card--master { background: var(--accent-color); color: var(--contrast-color); } .content-link-card--master .content-link-card__title, .content-link-card--master .content-link-card__description, .content-link-card--master .content-link-card__cta, .content-link-card--master .content-link-card__cta-text, .content-link-card--master .content-link-card__icon { color: var(--contrast-color); } .content-link-card--master .content-link-card__title::after { background-color: var(--contrast-color); } .content-link-card--dark { background: var(--dark-background-color); color: var(--contrast-color); } .content-link-card--dark .content-link-card__title, .content-link-card--dark .content-link-card__description, .content-link-card--dark .content-link-card__cta, .content-link-card--dark .content-link-card__cta-text { color: var(--contrast-color); } .content-link-card--dark .content-link-card__icon { color: var(--accent-color); } .content-link-card--dark .content-link-card__title::after { background-color: var(--accent-color); } } .customer-table .text-start { text-align: left; } .customer-table .text-end { text-align: right; } .dashboard-tile { transition: all 0.2s ease; color: inherit; } .dashboard-tile:hover { border-color: #ff6a00; box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.15); } .dashboard-tile-active { border: 2px solid #ff6a00; box-shadow: 0 0 0 1px rgba(255, 106, 0, 0.15); } .dashboard-tile-active h5, .dashboard-tile-active h2 { color: #ff6a00; } .clickable-row { cursor: pointer; } .clickable-row:hover { background-color: rgba(255, 106, 0, 0.06); } .dashboard-tile-disabled { opacity: 0.65; cursor: default; } .dashboard-tile-disabled h5, .dashboard-tile-disabled h2 { color: #666; } .portal-nav__placeholder { font-size: 0.85rem; color: #999; padding: 0.5rem 0.75rem; } .portal-layout { display: grid; grid-template-columns: 220px 1fr; gap: 2rem; align-items: start; } .portal-side-nav { position: relative; } .portal-side-nav__card { background: #fff; border: 1px solid #e9e9e9; border-radius: 12px; padding: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .portal-side-nav__title { font-size: 1.35rem; font-weight: 700; margin-bottom: 1rem; color: #222; } .portal-side-nav__item { width: 100%; display: block; text-align: left; text-decoration: none; border: none; background: #f5f5f5; color: #444; border-radius: 8px; padding: 0.95rem 1rem; margin-bottom: 0.75rem; font-size: 1rem; line-height: 1.2; transition: all 0.2s ease; } .portal-side-nav__item:hover { background: #ececec; color: #e65f10; text-decoration: none; } .portal-side-nav__item.is-active { background: #e65f10; color: #fff; font-weight: 600; } .portal-side-nav__item--back { background: #f0f0f0; color: #333; font-weight: 600; } .portal-side-nav__item--button { cursor: pointer; } .portal-side-nav__item--disabled { cursor: not-allowed; opacity: 0.75; } .portal-side-nav__meta { display: block; font-size: 0.82rem; color: #888; margin-top: 0.25rem; } .portal-side-nav__item.is-active .portal-side-nav__meta { color: rgba(255, 255, 255, 0.8); } .portal-side-nav__form { margin: 0; } .task-group-even { background-color: #f3f3f3 !important; } .task-group-odd { background-color: #ffffff !important; } .customer-task-table .task-comment-row > td { border-top: none; padding-top: 0; } .customer-task-table .task-comment-cell { padding-top: 0.15rem; padding-bottom: 0.75rem; } .customer-task-table .task-comment { margin: 0 0 0.1rem 0.5rem; font-size: 0.9rem; line-height: 0.9rem; color: #666; white-space: pre-wrap; } .customer-task-table .task-comment--headline { font-weight: 700; color: #4a4a4a; margin-top: 0.5rem; } .portal-content h1, .portal-content h2, .portal-content h3 { margin-top: 0; } .task-comment-row td { border-top: none; padding-top: 0; } .task-comment-cell { padding-left: 0 !important; padding-top: 0.15rem; padding-bottom: 0.75rem; } .task-comment { margin: 0 0 0.1rem 0; padding: 0 1.5rem; font-size: 0.92rem; line-height: 0.95rem; color: #666; } .task-comment--headline { font-weight: 700; color: #4a4a4a; } @media (max-width: 991.98px) { .portal-layout { grid-template-columns: 1fr; gap: 1.5rem; } .portal-side-nav__card { padding: 0.85rem; } .portal-side-nav__title { font-size: 1.15rem; margin-bottom: 0.75rem; } .portal-side-nav__item { padding: 0.8rem 0.9rem; margin-bottom: 0.6rem; font-size: 0.96rem; } } .portal-image { border-radius: 20px; margin-top: 20px; margin-bottom: 20px; max-height: 500px; object-fit: cover; } .login-box { padding: 40px; } @media (max-width: 768px) { .customer-table .col-projectno, .customer-table .col-manager, .customer-table .col-hourbank { display: none; } .customer-table .col-description { font-weight: 600; } } .customer-task-table { width: 100%; table-layout: fixed; } .customer-task-table th, .customer-task-table td { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .customer-task-table .task-comment-cell, .customer-task-table .task-comment { white-space: normal; overflow-wrap: anywhere; word-break: break-word; } .header { color: var(--default-color); background: #fff; padding: 6px 0px; z-index: 997; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } .scrolled .header { box-shadow: 0 0 18px rgba(0, 0, 0, 0.08); } .header .logo { line-height: 1; text-decoration: none; } .logo-img { height: 44px; width: auto; display: block; } .header-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .header .btn-getstarted, .header .btn-getstarted:focus { color: var(--contrast-color); background: var(--accent-color); font-size: 14px; padding: 6px 12px; border-radius: 4px; transition: 0.3s; margin: 0; } .header .btn-getstarted:hover, .header .btn-getstarted:focus:hover { color: var(--contrast-color); background: color-mix(in srgb, var(--accent-color), transparent 15%); } .header__languages { position: relative; display: inline-flex; align-items: center; } .header__languages .language-btn { cursor: pointer; padding: 6px 8px; border-radius: 4px; font-size: 12px; line-height: 1; border: 0; background: #f5f5f5; color: var(--accent-color); transition: 0.3s; } .header__languages .language-btn:hover { color: var(--accent-color); background: #efefef; } .header__languages .language-dropdown { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 52px; background-color: #fff; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12); z-index: 1000; overflow: hidden; } .header__languages .language-dropdown a { color: #212529; padding: 8px 10px; text-decoration: none; display: block; font-size: 12px; line-height: 1; } .header__languages .language-dropdown a:hover { color: var(--accent-color); background: #f7f7f7; } .header__languages .show { display: block; } @media (min-width: 1200px) { .header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 72px; } .logo { position: relative; z-index: 3; flex: 0 0 auto; } .header-right { position: relative; z-index: 3; flex: 0 0 auto; display: flex; align-items: center; justify-content: flex-end; } .header-nav { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; pointer-events: none; } header #navmenu.navmenu { position: static !important; transform: none !important; width: max-content !important; pointer-events: auto; } header #navmenu.navmenu > ul { display: flex; align-items: center; justify-content: center; gap: 34px; margin: 0; padding: 0; white-space: nowrap; } } @media (min-width: 1200px) { .navmenu { padding: 0; } .navmenu ul { margin: 0; padding: 0; list-style: none; } .navmenu li { position: relative; } header #navmenu.navmenu { position: static !important; left: auto !important; right: auto !important; transform: none !important; width: auto !important; } header #navmenu.navmenu > ul { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 24px; white-space: nowrap; margin: 0; padding: 0; } header #navmenu.navmenu > ul > li { flex: 0 0 auto; } .navmenu > ul > li > a, .navmenu > ul > li > a:focus, .header .navmenu .nav-link { font-family: var(--nav-font); font-size: 14px; font-weight: 400; letter-spacing: 0.25px; color: rgba(0, 0, 0, 0.85); line-height: 1; color: var(--nav-color); padding: 8px 0; display: inline-flex; align-items: center; justify-content: flex-start; gap: 10px; white-space: nowrap; text-decoration: none; background: transparent; box-shadow: none; outline: none; } .navmenu > ul > li > a i, .navmenu > ul > li > a:focus i, .header .navmenu .nav-link > .bi { font-size: 14px; line-height: 0; margin-left: 4px; transform: translateY(1px); transition: 0.3s; } .navmenu li:hover > a, .navmenu .active, .navmenu .active:focus, .header .navmenu .nav-item.show > .nav-link, .header .navmenu .nav-link:hover { color: var(--nav-hover-color); } a[id^="flexmenu_"].dropdown-toggle::after, a[id^="flexmenu_"]::after { content: none !important; display: none !important; } } @media (min-width: 1200px) { .mm-dropdown { margin-top: 0px; } .header .navmenu .dropdown-menu, .navmenu .dropdown ul { --menu-radius: 8px; --menu-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.08); border: 0; border-radius: var(--menu-radius); box-shadow: var(--menu-shadow); background: var(--nav-dropdown-background-color); } .navmenu .dropdown ul { margin: 0; padding: 10px 0; display: block; position: absolute; visibility: hidden; left: 0; top: 130%; opacity: 0; transition: 0.25s; z-index: 99; min-width: 220px; } .navmenu .dropdown:hover > ul { opacity: 1; top: 100%; visibility: visible; } .navmenu .dropdown ul li { min-width: 220px; } .navmenu .dropdown ul a { padding: 10px 18px; font-size: 15px; text-transform: none; color: var(--nav-dropdown-color); display: block; white-space: normal; } .navmenu .dropdown ul a:hover, .navmenu .dropdown ul .active:hover, .navmenu .dropdown ul li:hover > a { color: var(--nav-dropdown-hover-color); } .navmenu .dropdown .dropdown ul { top: 0; left: calc(100% - 8px); visibility: hidden; } .navmenu .dropdown .dropdown:hover > ul { opacity: 1; top: 0; left: 100%; visibility: visible; } .header .navmenu .dropdown-item { display: flex; align-items: center; gap: 0.4rem; } .header .navmenu .dropdown-item .bi { font-size: 0.95rem; opacity: 0.9; } .header .navmenu .dropdown-menu a { white-space: normal; } } @media (min-width: 1200px) { .mm-heading, .mm-intro, .mm-tile-title, .mm-tile-desc, .mm-feature-title, .mm-feature-desc { white-space: normal; } .mm-tile { position: relative; } .mm-tile-arrow { position: absolute; top: 22px; right: 22px; font-size: 18px; line-height: 1; color: #1c1c1b; opacity: 0; transform: translateY(6px); transition: opacity 0.2s ease, transform 0.2s ease; pointer-events: none; } .mm-tile:hover .mm-tile-arrow, .mm-tile:focus-within .mm-tile-arrow { opacity: 1; transform: translateY(0); } .header .navmenu .dropdown-menu.desktop-dropdown { left: 50% !important; right: auto !important; transform: translateX(-50%) !important; width: min(1380px, calc(100vw - 80px)) !important; min-width: 0 !important; max-width: none !important; margin-top: 32px !important; padding: 10px !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } .mm-dropdown { padding: 0 !important; background: transparent !important; box-shadow: none !important; } .mm-panel { width: 100%; margin: 0; padding: 0; background: transparent; } .mm-surface { background: #f3f3f3; border-radius: 28px; padding: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); width: 100%; } .mm-main { min-width: 0; background: #fbfbfb; border-radius: 22px; padding: 20px 20px 24px; } .mm-layout { display: grid; align-items: start; gap: 34px; } .mm-layout.has-featured { grid-template-columns: minmax(0, 1fr) 280px; } .mm-layout.no-featured { grid-template-columns: minmax(0, 1fr); } .mm-main, .mm-side { min-width: 0; } .mm-head { margin-bottom: 28px; } .mm-heading { font-family: var(--nav-font); font-size: 24px; line-height: 1.1; font-weight: 600; margin: 0 0 18px; color: #1c1c1b; } .mm-heading-link { color: #1c1c1b; text-decoration: none; } .mm-heading-link:hover { color: var(--accent-color); } .mm-intro { max-width: none; color: #1c1c1b; font-size: 12px; line-height: 1.55; } .mm-intro p:last-child { margin-bottom: 0; } .mm-teasers { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; align-items: stretch; } .mm-tile { position: relative; min-width: 0; border-radius: 22px; padding: 28px 20px 20px; background: transparent; transition: background-color 0.18s ease, transform 0.18s ease; } .mm-tile:hover, .mm-tile:focus-within { background: #f1d4c8; transform: translateY(-1px); } .mm-tile-link { text-decoration: none; } .mm-tile-icon-wrap { margin-bottom: 22px; } .mm-tile-icon { width: 54px; height: 54px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: #f4e5de; color: #1c1c1b; font-size: 28px; line-height: 1; font-weight: 300; } .mm-tile:hover .mm-tile-icon, .mm-tile:focus-within .mm-tile-icon { background: var(--accent-color); color: #fff; } .mm-tile-title { font-family: var(--nav-font); font-size: 20px; line-height: 1.2; font-weight: 500; color: #1c1c1b; margin: 0 0 12px; overflow-wrap: anywhere; word-break: break-word !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(2 * 1.2em); } .mm-tile-desc { color: #9aa0af; font-size: 12px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word !important; white-space: normal; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; min-height: calc(3 * 1.45em); } .mm-feature-card { position: relative; min-height: 100%; background-color: transparent; border: 0; padding: 0; border-radius: 22px; overflow: hidden; } .mm-feature-media { border-radius: 22px; overflow: hidden; margin-bottom: 14px; aspect-ratio: 4 / 3; background: #ececec; } .mm-feature-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .mm-feature-title { font-family: var(--nav-font); font-size: 20px; line-height: 1.2; font-weight: 500; color: #1c1c1b; margin: 0 0 10px; overflow-wrap: anywhere; word-break: break-word; } .mm-feature-desc { color: #9aa0af; font-size: 12px; line-height: 1.45; overflow: hidden; overflow-wrap: anywhere; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .mm-feature-desc p:last-child { margin-bottom: 0; } } @media (min-width: 1200px) and (max-width: 1399px) { .header .navmenu .dropdown-menu.desktop-dropdown { width: min(1320px, calc(100vw - 64px)) !important; } .mm-surface { padding: 26px 24px 22px; } .mm-layout { grid-template-columns: minmax(0, 1fr) 260px; gap: 28px; } .mm-teasers { gap: 16px; } .mm-tile { padding: 24px 16px 16px; } .mm-tile-desc, .mm-feature-desc, .mm-intro { font-size: 12px; } } @media (max-width: 1199px) { .mm-dropdown { display: none !important; } } @media (max-width: 1199px) { .header .logo { order: 1; } .header-right { order: 2; gap: 8px; } .header-nav { order: 3; } .header .btn-getstarted, .header .btn-getstarted:focus { padding: 6px 12px; } .mobile-nav-toggle { color: var(--nav-color); font-size: 28px; line-height: 0; margin-right: 10px; cursor: pointer; transition: color 0.3s; } .navmenu { padding: 0; z-index: 9997; } .navmenu ul { display: none; list-style: none; position: absolute; inset: 60px 20px 20px 20px; padding: 10px 0; margin: 0; border-radius: 8px; background-color: var(--nav-mobile-background-color); overflow-y: auto; transition: 0.3s; z-index: 9998; box-shadow: 0 0 30px rgba(0, 0, 0, 0.1); } .navmenu > ul > li > a, .navmenu ul > li > a:focus { color: var(--nav-dropdown-color); padding: 10px 20px; font-family: var(--nav-font); font-size: 17px; font-weight: 500; display: flex; align-items: center; justify-content: space-between; white-space: nowrap; transition: 0.3s; } .navmenu > ul > li > a > i, .navmenu > ul > li > a:focus > i { font-size: 12px; line-height: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background-color: color-mix(in srgb, var(--accent-color), transparent 90%); transition: 0.3s; margin-left: 10px; flex: 0 0 auto; } .navmenu a i:hover, .navmenu a:focus i:hover { background-color: var(--accent-color); color: var(--contrast-color); } .navmenu a:hover, .navmenu .active, .navmenu .active:focus { color: var(--nav-dropdown-hover-color); } .navmenu .active i, .navmenu .active:focus i { background-color: var(--accent-color); color: var(--contrast-color); transform: rotate(180deg); } .navmenu .dropdown ul { position: static; display: none; z-index: 99; padding: 10px 10px; margin: 10px 20px; background-color: var(--nav-dropdown-background-color); border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%); box-shadow: none; transition: all 0.5s ease-in-out; } .navmenu .dropdown ul ul { background-color: rgba(33, 37, 41, 0.1); } .navmenu .dropdown > .dropdown-active { display: block; background-color: rgba(33, 37, 41, 0.03); } .mobile-nav-active { overflow: hidden; } .mobile-nav-active .mobile-nav-toggle { color: #fff; position: absolute; font-size: 32px; top: 15px; right: 15px; margin-right: 0; z-index: 9999; } .mobile-nav-active .navmenu { position: fixed; overflow: hidden; inset: 0; background: rgba(33, 37, 41, 0.8); transition: 0.3s; } .mobile-nav-active .navmenu > ul { display: block; } .header__languages .language-btn { display: none; } .navmenu .dropdown-menu.desktop-dropdown { display: none !important; } #navmenu ul, #navmenu li { list-style: none !important; } #navmenu li::before, #navmenu li::marker, #navmenu a::before, #navmenu a::marker { content: none !important; } } @media (max-width: 1199px) { .dm-media, .dm-desc, .mm-teaser-media picture, .mm-teaser-desc, .dropdown-menu .container .text-uppercase { display: none; } .dropdown .dm-title h3 { margin-bottom: 0; color: #000; } } @media (max-width: 420px) { .dropdown-menu .mm-teaser-media { grid-template-columns: 1fr; } .dropdown-menu .mm-teaser-media img { width: 100%; height: auto; aspect-ratio: 4 / 3; } } .header__portal { display: inline-flex; align-items: center; margin-right: 10px; } .portal-link { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--nav-color); font-size: 10px; font-weight: 500; line-height: 1; padding: 6px 10px; border-radius: 8px; background: transparent; transition: color 0.2s ease, background-color 0.2s ease; } .portal-link:hover { color: var(--accent-color); background: rgba(0, 0, 0, 0.04); } .portal-link i { font-size: 14px; line-height: 1; } @media (max-width: 1199px) { .header__portal { display: none; } } @media (min-width: 1200px) { .mm-layout.has-featured { grid-template-columns: minmax(0, 1fr) 280px; } .mm-layout.has-featured .mm-main { grid-column: 1; grid-row: 1; } .mm-layout.has-featured .mm-side { grid-column: 2; grid-row: 1; } } .newsletter-modal .modal-dialog { max-width: 560px; } .newsletter-modal .modal-content { border: 0; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.25); overflow: hidden; } .newsletter-modal .modal-header { border-bottom: 1px solid rgba(0,0,0,.06); padding: 18px 22px; } .newsletter-modal .modal-title { font-size: 22px; line-height: 1.2; font-weight: 600; margin: 0; } .newsletter-modal .btn-close { opacity: .6; } .newsletter-modal .btn-close:hover { opacity: 1; } .newsletter-modal .modal-body { padding: 18px 22px 10px; } .newsletter-modal label.form-label { font-weight: 500; margin-bottom: 6px; } .newsletter-modal .form-control { border-radius: 10px; padding: 12px 12px; border-color: rgba(0,0,0,.12); } .newsletter-modal .form-control:focus { border-color: var(--accent-color); box-shadow: 0 0 0 3px rgba(0,0,0,.05); } .newsletter-modal .form-check { margin-top: 10px; padding-left: 1.6em; } .newsletter-modal .form-check-input { width: 1.05em; height: 1.05em; margin-top: .25em; border-color: rgba(0,0,0,.25); } .newsletter-modal .form-check-input:checked { background-color: var(--accent-color); border-color: var(--accent-color); } .newsletter-modal .form-check-label { font-size: 14px; line-height: 1.35; color: rgba(0,0,0,.75); } .newsletter-modal .form-check-label p { margin: 0; } .newsletter-modal .modal-footer { border-top: 0; padding: 12px 22px 22px; justify-content: flex-start; } .newsletter-modal .btn-primary { background: var(--accent-color); border-color: var(--accent-color); border-radius: 10px; padding: 10px 16px; font-weight: 600; } .newsletter-modal .btn-primary:hover { filter: brightness(.95); } .newsletter-modal .btn-primary:disabled { opacity: .6; } .newsletter-modal.modal.show .modal-dialog { transform: none; } .newsletter-modal .modal-backdrop.show { opacity: .55; }