/*-------------------------------------------------------------- # CSS Variables (Global) --------------------------------------------------------------*/ :root { /* Font Variables */ --body-font: "Red Hat Text", sans-serif; --heading-font: "Hahmlet", serif; --button-font: var(--body-font); --base-font-size: 16px; --scale-factor: 1; /* Colors */ --light-text-color: #F7F7F7; --black: #000; --white: #fff; --primary-color: #B2A58F; --secondary-color: #151722; --button-hover: #768771; --background-muted: #F0F0F1; --background-primary: #B2A58F; --background-secondary: #151722; --text-primary: rgba(226, 31, 38, 1); --link-color: #000; --link-hover: var(--primary-color); --border-color: #B2A58F; /* Buttons */ --btn-border: #B2A58F; --btn-padding-x: 24px; --btn-padding-x-lg: 24px; --btn-padding-y: 10px; --btn-height: calc(45px * var(--scale-factor)); --btn-font-size: 1rem; --btn-letter-spacing: 0; /* Shadows */ --box-shadow-xl: 0 28px 50px rgba(0, 0, 0, 0.3); /* Spacing */ --section-padding: 72px; --section-padding-lg: 140px; --container-width: 1234px; --container-padding: 15px; --min-padding: 102px; --vh: 1vh; /* Fallback value to reduce content shift */ --letter-spacing: 1.44px; /* Navbar */ --navbar-min-height: calc(45px * var(--scale-factor)); --navbar-background: rgba(255, 255, 255, 0.85); --navbar-background-transparent: rgba(255, 255, 255, 0.70); --navbar-backdrop-filter: 25px; /* Intl-tel-input */ --iti-hover-color: rgba(0, 0, 0, 0.05); --iti-border-color: #ccc; --iti-dialcode-color: #999; --iti-dropdown-bg: #F5F5F5; --iti-border-width: 1px; --iti-arrow-height: 6px; --iti-arrow-width: 12px; --iti-triangle-border: calc(var(--iti-arrow-width) / 2); --iti-arrow-padding: 6px; --iti-arrow-color: rgba(217, 217, 217, 0.80); } /*-------------------------------------------------------------- # UIkit Overrides --------------------------------------------------------------*/ .uk-card-primary.uk-card-body .uk-h1, .uk-card-primary.uk-card-body .uk-h2, .uk-card-primary.uk-card-body .uk-h3, .uk-card-primary.uk-card-body .uk-h4, .uk-card-primary.uk-card-body .uk-h5, .uk-card-primary.uk-card-body .uk-h6, .uk-card-primary.uk-card-body .uk-heading-2xlarge, .uk-card-primary.uk-card-body .uk-heading-3xlarge, .uk-card-primary.uk-card-body .uk-heading-large, .uk-card-primary.uk-card-body .uk-heading-medium, .uk-card-primary.uk-card-body .uk-heading-small, .uk-card-primary.uk-card-body .uk-heading-xlarge, .uk-card-primary.uk-card-body h1, .uk-card-primary.uk-card-body h2, .uk-card-primary.uk-card-body h3, .uk-card-primary.uk-card-body h4, .uk-card-primary.uk-card-body h5, .uk-card-primary.uk-card-body h6, .uk-card-primary>:not([class*=uk-card-media]) .uk-h1, .uk-card-primary>:not([class*=uk-card-media]) .uk-h2, .uk-card-primary>:not([class*=uk-card-media]) .uk-h3, .uk-card-primary>:not([class*=uk-card-media]) .uk-h4, .uk-card-primary>:not([class*=uk-card-media]) .uk-h5, .uk-card-primary>:not([class*=uk-card-media]) .uk-h6, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-2xlarge, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-3xlarge, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-large, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-medium, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-small, .uk-card-primary>:not([class*=uk-card-media]) .uk-heading-xlarge, .uk-card-primary>:not([class*=uk-card-media]) h1, .uk-card-primary>:not([class*=uk-card-media]) h2, .uk-card-primary>:not([class*=uk-card-media]) h3, .uk-card-primary>:not([class*=uk-card-media]) h4, .uk-card-primary>:not([class*=uk-card-media]) h5, .uk-card-primary>:not([class*=uk-card-media]) h6, .uk-card-secondary.uk-card-body .uk-h1, .uk-card-secondary.uk-card-body .uk-h2, .uk-card-secondary.uk-card-body .uk-h3, .uk-card-secondary.uk-card-body .uk-h4, .uk-card-secondary.uk-card-body .uk-h5, .uk-card-secondary.uk-card-body .uk-h6, .uk-card-secondary.uk-card-body .uk-heading-2xlarge, .uk-card-secondary.uk-card-body .uk-heading-3xlarge, .uk-card-secondary.uk-card-body .uk-heading-large, .uk-card-secondary.uk-card-body .uk-heading-medium, .uk-card-secondary.uk-card-body .uk-heading-small, .uk-card-secondary.uk-card-body .uk-heading-xlarge, .uk-card-secondary.uk-card-body h1, .uk-card-secondary.uk-card-body h2, .uk-card-secondary.uk-card-body h3, .uk-card-secondary.uk-card-body h4, .uk-card-secondary.uk-card-body h5, .uk-card-secondary.uk-card-body h6, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h1, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h2, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h3, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h4, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h5, .uk-card-secondary>:not([class*=uk-card-media]) .uk-h6, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-2xlarge, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-3xlarge, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-large, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-medium, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-small, .uk-card-secondary>:not([class*=uk-card-media]) .uk-heading-xlarge, .uk-card-secondary>:not([class*=uk-card-media]) h1, .uk-card-secondary>:not([class*=uk-card-media]) h2, .uk-card-secondary>:not([class*=uk-card-media]) h3, .uk-card-secondary>:not([class*=uk-card-media]) h4, .uk-card-secondary>:not([class*=uk-card-media]) h5, .uk-card-secondary>:not([class*=uk-card-media]) h6, .uk-light .uk-h1, .uk-light .uk-h2, .uk-light .uk-h3, .uk-light .uk-h4, .uk-light .uk-h5, .uk-light .uk-h6, .uk-light .uk-heading-2xlarge, .uk-light .uk-heading-3xlarge, .uk-light .uk-heading-large, .uk-light .uk-heading-medium, .uk-light .uk-heading-small, .uk-light .uk-heading-xlarge, .uk-light h1, .uk-light h2, .uk-light h3, .uk-light h4, .uk-light h5, .uk-light h6, .uk-offcanvas-bar .uk-h1, .uk-offcanvas-bar .uk-h2, .uk-offcanvas-bar .uk-h3, .uk-offcanvas-bar .uk-h4, .uk-offcanvas-bar .uk-h5, .uk-offcanvas-bar .uk-h6, .uk-offcanvas-bar .uk-heading-2xlarge, .uk-offcanvas-bar .uk-heading-3xlarge, .uk-offcanvas-bar .uk-heading-large, .uk-offcanvas-bar .uk-heading-medium, .uk-offcanvas-bar .uk-heading-small, .uk-offcanvas-bar .uk-heading-xlarge, .uk-offcanvas-bar h1, .uk-offcanvas-bar h2, .uk-offcanvas-bar h3, .uk-offcanvas-bar h4, .uk-offcanvas-bar h5, .uk-offcanvas-bar h6, .uk-overlay-primary .uk-h1, .uk-overlay-primary .uk-h2, .uk-overlay-primary .uk-h3, .uk-overlay-primary .uk-h4, .uk-overlay-primary .uk-h5, .uk-overlay-primary .uk-h6, .uk-overlay-primary .uk-heading-2xlarge, .uk-overlay-primary .uk-heading-3xlarge, .uk-overlay-primary .uk-heading-large, .uk-overlay-primary .uk-heading-medium, .uk-overlay-primary .uk-heading-small, .uk-overlay-primary .uk-heading-xlarge, .uk-overlay-primary h1, .uk-overlay-primary h2, .uk-overlay-primary h3, .uk-overlay-primary h4, .uk-overlay-primary h5, .uk-overlay-primary h6, .uk-section-primary:not(.uk-preserve-color) .uk-h1, .uk-section-primary:not(.uk-preserve-color) .uk-h2, .uk-section-primary:not(.uk-preserve-color) .uk-h3, .uk-section-primary:not(.uk-preserve-color) .uk-h4, .uk-section-primary:not(.uk-preserve-color) .uk-h5, .uk-section-primary:not(.uk-preserve-color) .uk-h6, .uk-section-primary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-primary:not(.uk-preserve-color) .uk-heading-3xlarge, .uk-section-primary:not(.uk-preserve-color) .uk-heading-large, .uk-section-primary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-primary:not(.uk-preserve-color) .uk-heading-small, .uk-section-primary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-primary:not(.uk-preserve-color) h1, .uk-section-primary:not(.uk-preserve-color) h2, .uk-section-primary:not(.uk-preserve-color) h3, .uk-section-primary:not(.uk-preserve-color) h4, .uk-section-primary:not(.uk-preserve-color) h5, .uk-section-primary:not(.uk-preserve-color) h6, .uk-section-secondary:not(.uk-preserve-color) .uk-h1, .uk-section-secondary:not(.uk-preserve-color) .uk-h2, .uk-section-secondary:not(.uk-preserve-color) .uk-h3, .uk-section-secondary:not(.uk-preserve-color) .uk-h4, .uk-section-secondary:not(.uk-preserve-color) .uk-h5, .uk-section-secondary:not(.uk-preserve-color) .uk-h6, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-3xlarge, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-large, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-medium, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-small, .uk-section-secondary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-section-secondary:not(.uk-preserve-color) h1, .uk-section-secondary:not(.uk-preserve-color) h2, .uk-section-secondary:not(.uk-preserve-color) h3, .uk-section-secondary:not(.uk-preserve-color) h4, .uk-section-secondary:not(.uk-preserve-color) h5, .uk-section-secondary:not(.uk-preserve-color) h6, .uk-tile-primary:not(.uk-preserve-color) .uk-h1, .uk-tile-primary:not(.uk-preserve-color) .uk-h2, .uk-tile-primary:not(.uk-preserve-color) .uk-h3, .uk-tile-primary:not(.uk-preserve-color) .uk-h4, .uk-tile-primary:not(.uk-preserve-color) .uk-h5, .uk-tile-primary:not(.uk-preserve-color) .uk-h6, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-3xlarge, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-large, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-medium, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-small, .uk-tile-primary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-tile-primary:not(.uk-preserve-color) h1, .uk-tile-primary:not(.uk-preserve-color) h2, .uk-tile-primary:not(.uk-preserve-color) h3, .uk-tile-primary:not(.uk-preserve-color) h4, .uk-tile-primary:not(.uk-preserve-color) h5, .uk-tile-primary:not(.uk-preserve-color) h6, .uk-tile-secondary:not(.uk-preserve-color) .uk-h1, .uk-tile-secondary:not(.uk-preserve-color) .uk-h2, .uk-tile-secondary:not(.uk-preserve-color) .uk-h3, .uk-tile-secondary:not(.uk-preserve-color) .uk-h4, .uk-tile-secondary:not(.uk-preserve-color) .uk-h5, .uk-tile-secondary:not(.uk-preserve-color) .uk-h6, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-2xlarge, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-3xlarge, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-large, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-medium, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-small, .uk-tile-secondary:not(.uk-preserve-color) .uk-heading-xlarge, .uk-tile-secondary:not(.uk-preserve-color) h1, .uk-tile-secondary:not(.uk-preserve-color) h2, .uk-tile-secondary:not(.uk-preserve-color) h3, .uk-tile-secondary:not(.uk-preserve-color) h4, .uk-tile-secondary:not(.uk-preserve-color) h5, .uk-tile-secondary:not(.uk-preserve-color) h6 { color: var(--light-text-color); } .uk-container { max-width: var(--container-width); } .uk-container-xlarge { max-width: 1600px; } .uk-navbar-container .uk-logo-sticky { visibility: hidden; opacity: 0; transition: all .2s ease-out; } .uk-sticky-fixed .uk-navbar-container .uk-logo-sticky { visibility: visible; opacity: 1; } .uk-light { color: var(--light-text-color); } a, .uk-link { color: var(--link-color); transition: all .2s ease-out; } a:hover, .uk-link:hover { color: var(--link-hover); } .uk-dotnav { margin-left: -9px; } .uk-dotnav>* { padding-left: 9px; } .uk-dotnav { margin-top: 30px!important; } .uk-dotnav>*>* { width: 9px; height: 9px; background-color: transparent; border-color: var(--primary-color); } .uk-dotnav>.uk-active>* { border-color: transparent; background-color: var(--primary-color); } .uk-light .uk-dotnav>.uk-active>* { background-color: var(--primary-color); border-color: transparent; } /*-------------------------------------------------------------- # Typography --------------------------------------------------------------*/ html { font-weight: 400; color: var(--black); line-height: 1.5; font-size: var(--base-font-size); font-family: var(--body-font); } h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-heading-small, .uk-heading-medium, .uk-heading-large, .uk-heading-xlarge, .uk-heading-2xlarge { font-family: var(--heading-font); font-weight: 400; color: var(--black); line-height: 1.2; letter-spacing: -0.38px; } .uk-h1, h1 { font-size: 2.375rem; } .uk-h2, h2 { font-size:2rem; } .uk-text-bold { font-weight: 600; } .uk-text-primary, .uk-light .uk-text-primary { color: var(--primary-color) !important; } .page { overflow: hidden; } @media (min-width: 640px) { .uk-h1, h1 { font-size: 3rem; letter-spacing: -0.48px; } .uk-h2, h2 { font-size: 2.5rem; } } @media (min-width: 960px) { .hr02-section { padding-top: 86px; } } /*-------------------------------------------------------------- # Buttons --------------------------------------------------------------*/ .uk-button { font-family: var(--button-font); font-weight: 400; transition: all .3s ease-out; letter-spacing: var(--btn-letter-spacing); font-size: var(--btn-font-size); padding: var(--btn-padding-y) var(--btn-padding-x); height: var(--btn-height); color: var(--white); display: inline-flex; justify-content: center; align-items: center; line-height: 1; min-height: var(--btn-height); height: 45px; border-radius: 3px; text-transform: capitalize; } .uk-light .uk-button-primary, .uk-button-primary { background-color: var(--background-primary); border-color: var(--background-primary); color: var(--white); } .uk-light .uk-button-primary:hover, .uk-button-primary:hover { background-color: var(--background-secondary); border-color: var(--background-primary); color: var(--background-primary); } .uk-light .uk-button-secondary { background-color: var(--background-secondary); color: #FFF; } .uk-button-secondary:hover, .uk-light .uk-button-secondary:hover { background-color: var(--background-primary); border-color: var(--background-secondary); color: #000; } .uk-button-default { color: var(--black); border-color: var(--border-color); } .uk-button-default:hover { color: var(--white); border-color: var(--secondary-color); } .uk-light .uk-button-default { border-color: var(--border-color); } .uk-light .uk-button-default:hover { color: var(--black); border-color: var(--white); } .uk-button-default.uk-active, .uk-button-default:active, .uk-button-default:focus { color: #fff; border-color: transparent; } @media (max-width: 960px) { .btn { margin: 0 auto; display: inline-flex; } } @media (max-width: 640px) { .uk-button { width: 100%; } .uk-button-text.uk-button { width: auto; } .two-btns.uk-grid-medium>.uk-grid-margin { margin-top: 10px; } } /*-------------------------------------------------------------- # Forms & Inputs --------------------------------------------------------------*/ .uk-select:not([multiple]):not([size]) { background-image: url(../img/select-arrow.svg) !important; background-repeat: no-repeat; background-position: calc(100% - 20px) center !important; background-size: 12px !important; } .uk-input, .uk-select:not([multiple]):not([size]) { height: calc(45px * var(--scale-factor)); padding-left: 12px; padding-right: 12px; } .uk-form-icon { width: 20px; } .uk-form-icon:not(.uk-form-icon-flip) ~ .uk-input { padding-left: 32px !important; } .uk-input, .uk-select, .uk-textarea { font-size: 1rem; } .uk-input, .uk-select, .uk-textarea { background: #fff; color: var(--background-secondary); border: 1px solid var(--border-color); border-radius: 8px; } .uk-input:focus, .uk-select:focus, .uk-textarea:focus { border: 2px solid #A5A5A5; } .uk-light .uk-input, .uk-light .uk-select, .uk-light .uk-textarea, .uk-light .uk-checkbox { background-color: rgb(255,255,255); color: #000; border-color: rgba(0, 0, 0, 0.30); } .uk-light .uk-input:focus, .uk-light .uk-select:focus, .uk-light .uk-textarea:focus { background-color: rgb(255,255,255); color: #000; border-color: var(--primary-color); } label, .uk-form-label { font-size: 1rem; margin-bottom: 6px; display: block; } /*-------------------------------------------------------------- # Layout Adjustments --------------------------------------------------------------*/ .uk-background-primary { background-color: var(--background-primary); } .uk-background-muted { background-color: var(--background-muted); } .uk-background-secondary { background-color: var(--background-secondary); } @media (min-width: 960px) { .inner-left { padding-left: 40px; } .inner-right { padding-right: 40px; } } @media (min-width: 1200px) { .inner-left { padding-left: max(var(--min-padding), calc((100vw - (var(--container-width) + (var(--container-padding) * 2))) / 2)); } .inner-right { padding-right: max(var(--min-padding), calc((100vw - (var(--container-width) + (var(--container-padding) * 2))) / 2)); } } /* @media (max-width: 960px) { .inner-left, .inner-right { padding: 50px 40px; } } @media (max-width: 640px) { .inner-left, .inner-right { padding: 40px 30px; } } */ /* ========================== Nav Styles ========================== */ /* .tm-header { position: absolute; z-index: 900; left: 0; right: 0; width: 100%; } */ .tm-header .uk-navbar-transparent .s9d-nav-container { margin-top: 30px; } .tm-header .s9d-nav-container { margin: 15px 0 ; } /* ========================== Navbar ========================== */ .uk-navbar-nav > li > a { color: var(--color-dark); } .uk-navbar-item, .uk-navbar-nav>li>a, .uk-navbar-toggle { min-height: var(--navbar-min-height); color: var(--color-dark); } .uk-navbar-container:not(.uk-navbar-transparent) { background: var(--background-secondary); } .uk-navbar .uk-button-default { min-width: calc(160px * var(--scale-factor)); } /*-------------------------------------------------------------- # Hero Section --------------------------------------------------------------*/ .hero-section .uk-margin-top { margin-top: 20px !important; } .hero-section *+p { margin-top: 20px; } .hero-cta { padding-top: 12px; } .hero-section .uk-button-primary:hover { background-color: var(--white); color: var(--black); } .hero-section .main-title { font-size: 2.375rem; margin-bottom: 32px; } @media (min-width: 960px) { .hero-section { padding-bottom: 84px; padding-top: 87px; } .hero-section .main-title { font-size: 3rem; } } @media (min-width: 1200px) { } @media (max-width: 640px) { .hero-cta .uk-button { min-width: 260px; } .hero-section { height: auto; min-height: calc(var(--vh) * 100) !important; } } /*-------------------------------------------------------------- # General Styles --------------------------------------------------------------*/ .uk-hr, hr { border-top-color: var(--border-color); } .uk-list-bullet>::before { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%226%22%20height%3D%226%22%20viewBox%3D%220%200%206%206%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%20%20%20%20%3Ccircle%20fill%3D%22%23DBC29B%22%20cx%3D%223%22%20cy%3D%223%22%20r%3D%223%22%20%2F%3E%0A%3C%2Fsvg%3E"); background-size: 5.4px; } .animateInitState { visibility: hidden !important; opacity: 0; } .animateInitState.uk-scrollspy-inview { visibility: visible !important; opacity: 1; } .section-title { letter-spacing: -0.32px; } .subtitle { font-family: var(--heading-font); font-size: 1.5rem; font-weight: 500; letter-spacing: -0.24px; } .uk-light .subtitle, .uk-light.subtitle { color: #FFF; } .vdivider { display: flex; justify-content: center; } .vdivider span { width: 1px; height: 101px; background: var(--primary-color); display: inline-block; } .title-sm { font-family: var(--body-font); font-size: 1.125rem; font-weight: 600; line-height: 1.3; letter-spacing: 0; } .uk-card-default { box-shadow: none; } .uk-card-body { line-height: 1.3; padding: 30px 24px; } .uk-card-body .title { font-family: var(--body-font); color: #151722; font-size:1.375rem; font-weight: 600; line-height: 1.3; } @media (min-width: 960px) { .section-title { letter-spacing: -0.4px; } } @media (min-width: 1200px) { .uk-card-body { padding: 40px 26px; } } /*-------------------------------------------------------------- # Sections --------------------------------------------------------------*/ .info-cards .section-title { margin-bottom: 40px; } .info-cards .subtitle { margin-bottom: 20px; } .info-cards .uk-slider-items { margin-left: -11px; } .info-cards .uk-slider-items>* { padding-left: 11px; } .info-cards .uk-card-default { background: #E8E3D9; color: #151722; } .carousel .uk-dotnav>*>* { width: 11px; height: 11px; } .icon-wrapper { width: 99px; height: 101px; background: #B2A58F; display: flex; align-items: center; justify-content: center; } .press-section .uk-slider-container { padding-top: 15px; padding-bottom: 46px; } .performance-section .uk-h1 { margin-bottom: 13px !important; } .performance-section p { line-height: 1.3; } @media (min-width: 640px) { } @media (min-width: 960px) { .info-cards { padding-top: 102px; padding-bottom: 115px; } .info-cards .section-title { margin-bottom: 86px; } .info-cards .subtitle { margin-bottom: 42px; } .performance-section { padding-top: 86px; padding-bottom: 105px; } } @media (min-width: 1200px) { .performance-section p { padding-right: 40px; } } @media (max-width: 1200px) { } @media (max-width: 640px) { } @media (max-width: 480px) { } /* -------------------------------------------------------------- # Forms --------------------------------------------------------------*/ .uk-light .cform { color: #000; margin-top: 50px; } .cform { max-width: 608px; color: #000; margin: 0 auto; padding-top: 32px; } .cform .inner-wrapper { border-radius: 17px; } .cform .uk-grid-small { margin-left: -18px; } .cform .uk-grid-small>* { padding-left: 18px; } .cform textarea { max-height: 180px; padding: 10px 12px; } .cform .uk-grid-small>.uk-grid-margin { margin-top: 23px; } .cform .form-title { margin-bottom: 30px; } .cform a { color: rgba(217, 217, 217, 0.80) !important; text-decoration: underline; } .cform .uk-form-controls { position: relative; } .cform .uk-checkbox:focus, .uk-radio:focus { border-color: var(--primary-color); } .cform .uk-checkbox { margin: 0; border-color: #5C5F5F; width: 22px; height: 22px; position: relative; margin-top: 0; flex-shrink: 0; border-radius: 3px; background-color: var(--light-text-color); } .cform .uk-checkbox:checked, .cform .uk-checkbox:indeterminate, .cform .uk-radio:checked { background-color: transparent; border-color: var(--light-text-color); } .cform .uk-button { margin-top: 20px; } .cform .section-title { margin-top: 24px; } .cform .gray { font-size: 0.875rem; line-height: 1.3; } .cform .uk-h4 { margin-bottom: 5px; margin-top: 14px; } @media (min-width: 960px) { .form-section { padding-top: 116px; padding-bottom: 145px; } } /*-------------------------------------------------------------- # Telephone International Code --------------------------------------------------------------*/ .form .iti--allow-dropdown input, .form .iti--allow-dropdown input[type=text], .form .iti--allow-dropdown input[type=tel], .form .iti--separate-dial-code input, .form .iti--separate-dial-code input[type=text], .form .iti--separate-dial-code input[type=tel] { padding-right: 6px; padding-left: 52px; margin-left: 0; } .iti { width: 100%; } .hide { display: none; } #valid-msg { color: #FFFFFF; background: #00C900; } #error-msg { color: red; } input.error { border: 1px solid #FF7C7C; } .form-dark .iti__country-list { background-color: #151f28; } .iti--separate-dial-code .iti__selected-flag, .iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag { background-color: rgba(0, 0, 0, 0); font-size: 0.99609375rem; } .iti-msg { position: absolute; left: 0; bottom: -19px; background: red; color: #fff !important; padding: 1px 10px; font-size: 12px; right: 0; border-radius: 4px; } .iti__selected-flag { padding-left: 10px; } .iti__search-input { height: 34px; padding: 0 10px; outline: 0; } /*-------------------------------------------------------------- # Custom Form --------------------------------------------------------------*/ .dark-form .uk-input::placeholder, .dark-form .uk-select::placeholder, .dark-form .uk-textarea::placeholder { color: rgba(217, 217, 217, 0.80) !important; } .dark-form .uk-input, .dark-form .uk-select, .dark-form .uk-textarea { background-color: transparent; color: #fff; border-bottom-color: #74747A; border-width: 0 0 1px 0px; border-style: solid; border-radius: 0; padding-left: 0; padding-right: 0; } .dark-form .uk-input:focus, .dark-form .uk-select:focus, .dark-form .uk-textarea:focus { background-color: transparent; color: #fff; border-bottom-color: var(--primary-color); } .dark-form .iti__selected-country-primary { padding-left: 0; } .dark-form .iti .iti__selected-dial-code { color: rgba(217, 217, 217, 0.80) !important; } .dark-form .iti--inline-dropdown .iti__dropdown-content { margin-top: 0px; } .dark-form .iti__search-input { font-family: var(--body-font); } .dark-form .select2-container--default .select2-selection--single { background-color: transparent; border-bottom-color: rgba(255, 255, 255, 0.50); border-radius: 0; border-width: 0 0 1px 0; } .dark-form .cform .gray { color: var(--light-text-color); } .dark-form .select2-container--default .select2-selection--single .select2-selection__rendered { color: rgba(217, 217, 217, 0.80); padding-left: 0; } .dark-form .select2-container .select2-selection--single { height: calc(45px * var(--scale-factor)); } .select2-container--default .select2-search--dropdown .select2-search__field { outline: 0; } .dark-form .select2-dropdown { background-color: #F5F5F5; } .select2-container { max-width: 485px; } .select2-container--default .select2-selection--single .select2-selection__arrow b { border: none; background: url('../img/select-arrow.svg') no-repeat center center; background-size: contain; width: 7px; height: 4px; left: 50%; top: 50%; transform: translate(100%, -50%); transition: transform 0.3s ease-in-out; } .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { transform: translate(100%, -50%) rotate(180deg); } .iti__arrow { width: 7px; height: 4px; background: url('../img/select-arrow.svg') no-repeat center center; background-size: contain; border: none; transition: transform 0.3s ease-in-out; } .iti__arrow--up { transform: rotate(180deg); } @media (max-width:640px) { .dark-form .content-wrapper { padding-left: 0; padding-right: 0; } } /*-------------------------------------------------------------- # Loading - Sweetalert --------------------------------------------------------------*/ .main-loading { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); background-color: #fff; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; background-image: url('../img/spinner.svg'); background-size: 100%; width: 80px; height: 80px; box-shadow: 0 0 40px rgba(0,0,0,0.05); -webkit-box-shadow: 0 0 40px rgba(0,0,0,0.05); -moz-box-shadow: 0 0 40px rgba(0,0,0,0.05); -ms-box-shadow: 0 0 40px rgba(0,0,0,0.05); -o-box-shadow: 0 0 40px rgba(0,0,0,0.05); z-index: 999999; } .swal2-modal { font-family: var(--body-font); font-style: normal; } .swal2-styled.swal2-confirm { background-color: var(--primary-color) !important; font-size: 14px; font-weight: 400; -webkit-border-radius: 0; border-radius: 0; font-family: var(--body-font); font-style: normal; font-weight: 400; margin-bottom: 20px; } .swal2-styled.swal2-confirm:hover, .swal2-styled.swal2-confirm:focus, .swal2-actions:not(.swal2-loading) .swal2-styled:hover { background-color: var(--secondary-color) !important; box-shadow: none; } .swal2-html-container { display: block; line-height: 1.6; font-family: var(--body-font) !important; } .swal2-html-container a { color: #9e7f4a; text-decoration: underline; } /*-------------------------------------------------------------- # blockquote --------------------------------------------------------------*/ .testimonial-section .vdivider span { height: 121px; } .blockquote { padding-top: 76px; padding-bottom: 0; } blockquote { font-style: normal; margin: 0; } blockquote .uk-h3 { font-size: 1.875rem; } blockquote footer { font-style: normal; margin-top: 54px; font-size: 0.875rem; } blockquote footer::before { display: none; } @media (min-width: 960px) { .testimonial-section { padding-bottom: 176px; } .testimonial-section .vdivider span { height: 140px; } } /* ========================== Footer ========================== */ .footer-section { font-size: 0.75rem; } .footer-section a { text-decoration: none; } .footer-section .uk-button-text:hover { color: var(--primary-color); } .footer-section hr { border-color: var(--primary-color); margin-bottom: 50px; } .footer-section .uk-button-text::before { bottom: 0; left: 0; right: 0; transition: border-color .3s ease-out; } .footer-section .uk-button-text:hover::before { border-color: var(--primary-color); } .footer-section .copyright { padding-top: 20px; } @media (max-width: 640px) { .footer-section hr { margin-bottom: 60px; } } /* --------------------------------- process-section -------------------------------- */ .processDesktop>.uk-grid-margin { margin-top: 22px; } .process-section h3 { font-family: var(--body-font); color: #151722; font-size: 1.125rem; font-weight: 600; line-height: 1.3; } .process-section .uk-text-meta { color: #151722; font-size: 0.875rem; line-height: 1.3; } #processMobile .uk-accordion-title { background: #fff; margin-bottom: -1px; } #processMobile .uk-padding { padding: 20px 24px; } #processMobile .uk-accordion-title .uk-padding { padding-top: 0; padding-bottom: 0; } .process-section #processMobile .uk-text-meta { padding-right: 0; } #processMobile .uk-accordion-title::before { background-image: url(../img/chevron-right.svg); background-repeat: no-repeat; background-size: 12px; margin-top: 26px; margin-right: 20px; transform: rotate(0deg); transition: transform 0.3s ease; /* smooth animation */ } #processMobile .uk-open > .uk-accordion-title::before { transform: rotate(-90deg); } #processMobile.uk-accordion>:nth-child(n+2) { margin-top: 18px; } .process-section .uk-heading-divider { display: inline-block; margin-bottom: 0; } .process-section .uk-h1 { margin-top: 24px; } @media (min-width:960px) { .process-section { padding-top: 112px; padding-bottom: 132px; } .process-section .desc { padding-right: 60px; } .process-section .desc p { line-height: 1.5; font-size: 1.125rem; } .process-section .uk-heading-divider { display: block; } } @media (min-width:1200px) { .process-section .desc { padding-right: 90px; } .process-section .uk-text-meta { padding-right: 60px; } } .uk-heading-divider { padding-bottom: calc(26px + .1em); border-bottom-color: #000; } /* --------------------------------- info01-section -------------------------------- */ .info01-section .section-title { font-weight: 300; } @media (min-width:640px) { .info01-section .section-title { font-size: 2.9rem; } } @media (min-width:1200px) { .info01-section .content-wrapper { padding-left: 72px; padding-right: 0; } .info01-section .content-wrapper p { max-width: 500px; margin-bottom: 30px; } .info01-section .maxheight { max-height: 697px; } } @media (max-width:1200px) { .info01-section .content-wrapper { padding-top: 60px; padding-bottom: 60px; } } @media (max-width:640px) { .info01-section .content-wrapper { padding: 76px 30px 40px; } } /* --------------------------------- casestudies-section -------------------------------- */ .casestudies-section .uk-slider { padding-top: 56px; } .casestudies-section .uk-h1 { margin-top: 24px; } .casestudies-section .subtitle { display: inline-block; } .casestudies-section .uk-overlay-primary { background: linear-gradient(180deg, rgba(21, 23, 34, 0.00) 0%, rgba(21, 23, 34, 0.89) 67.94%, var(--Black, rgba(21, 23, 34, 0.91)) 100%); height: 38.19%; transition: height 0.3s ease-in-out; } .casestudies-section .uk-overlay-secondary { background: rgba(21, 23, 34, 0.20); } .casestudies-section .title { font-family: var(--body-font); font-size: 1.125rem; color: #F7F7F7; font-weight: 500; line-height: 1.3; margin-bottom: 15px; } .casestudies-section .case .desc { margin: 32px 28px; } .casestudies-section .plus { margin-top: 32px; margin-right: 24px; } @media (min-width:960px) { .casestudies-section .case:hover .uk-overlay-primary { height: 70.72%; } .casestudies-section .case .fade-hide { visibility: hidden; opacity: 0; } .casestudies-section .case .fade-hide { transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; transform: translateZ(0); } .casestudies-section .case:hover .fade-hide { opacity: 1; visibility: visible; transform: translateZ(0); } .casestudies-section .case .fade-appear { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 0.6s ease-in-out, opacity 0.6s ease-in-out, margin 0.6s ease-in-out; display: block; } .casestudies-section .case:hover .fade-appear { max-height: 500px; opacity: 1; } .casestudies-section { padding-top: 134px; padding-bottom: 114px; } } @media (min-width:1200px) { .cases .uk-grid>* { padding-left: 32px; } .cases .uk-grid { margin-left: -32px; } } /* --------------------------------- app-section -------------------------------- */ .title02 { font-family: var(--body-font); font-size: 1.125rem; font-weight: 500; line-height: 1.3; margin-bottom: 15px; } .app-section .icon { padding-left: 10px; padding-right: 30px; } .app-section .subheader { font-size: 0.875rem; } .app-section .uk-text-meta { line-height: 1.3; color: #F7F7F7; padding-right: 24px; margin-top: 15px; } .app-section .uk-accordion-title::before { background-image: url(../img/chevron-right-white.svg); background-repeat: no-repeat; background-size: 10px 12px; margin-top: 19px; margin-right: 0; transform: rotate(0deg); transition: transform 0.3s ease; } .app-section .uk-open > .uk-accordion-title::before { background-image: url(../img/chevron-right-white.svg); transform: rotate(-90deg); } .app-section .uk-accordion-title { border-bottom: 1px solid #74747A; } .app-section .header-block { padding-bottom: 64px } @media (min-width:640px) { .app-section #features { padding-top: 14px; } } @media (min-width:960px) { .app-section { padding-top: 104px; padding-bottom: 86px; } .app-section .icon { padding-right: 44px; } .app-section .uk-accordion>:nth-child(n+2) { margin-top: 34px; } } /* --------------------------------- testimonial-section 02 -------------------------------- */ #testimonial02.testimonial-section .vdivider span { height: 74px; } #testimonial02 blockquote { max-width: 1004px; } #testimonial02 blockquote p { margin-bottom: 35px; } #testimonial02 blockquote footer { color: #151722; margin-top: 40px; } @media (min-width:960px) { #testimonial02 { padding-bottom: 140px; } } /* --------------------------------- fullbanner-section -------------------------------- */ @media (min-width:1200px) { .fullbanner-section .uk-cover-container { max-height: 633px; } } /* --------------------------------- FAQs-section -------------------------------- */ .faqs-section .uk-container { max-width: 848px; } .faqs-section .uk-accordion { margin-top: 42px; } .faqs-section .uk-accordion-title { font-weight: 600; font-size: 1.125rem; line-height: 1.4; color: #000; } .faqs-section .uk-accordion-content { padding-right: 15px; } .faqs-section .uk-accordion-content p { font-size: 1rem; line-height: 1.43; } .faqs-section .uk-accordion li { padding: 23px 10px 16px 25px; background: #F7F7F7; } .faqs-section .uk-accordion>:nth-child(n+2) { margin-top: 6px; } .faqs-section .uk-accordion-title::before { width: 1.4em; height: 1.4em; background-image: url(../img/collapse.svg); } .faqs-section .uk-open>.uk-accordion-title::before { background-image: url(../img/expand.svg); } @media (min-width:960px) { .faqs-section { padding-top: 108px; padding-bottom: 100px; } .faqs-section .uk-accordion { margin-top: 84px; } .faqs-section .uk-accordion li { padding: 23px 22px 25px 25px; } .faqs-section .uk-accordion-content { padding-right: 27px; } } /* --------------------------------- Bottom Sticky CTA -------------------------------- */ .stickybottomcta { position: fixed; left: 0; right: 0; bottom: -1px; z-index: 999; /* or higher if you want */ transform: translateY(100%); transition: transform 0.3s; } .stickybottomcta.visible { transform: translateY(0); } .stickybottomcta .uk-button { min-height: 55px; } .stickybottomcta .uk-button:hover { background: #FFFFFF; border-color: transparent; color: var(--background-secondary); } /* ===== BlackCloak Marketo form skin (scoped to #contact) ===== */ #contact #mktoForm_1145.mktoForm { font-family: var(--body-font) !important; font-size: 1rem !important; color: #F7F7F7 !important; width: 100% !important; display: grid; grid-template-columns: 1fr; row-gap: 28px; column-gap: 28px; } /* Labels */ #contact #mktoForm_1145 label.mktoLabel { display: block; margin: 0 0 6px; font-size: 15px; color: #9ca3af; } #contact #mktoForm_1145 #LblCompany.mktoLabel { display: none; } /* Underline-only fields */ #contact #mktoForm_1145 input[type="text"], #contact #mktoForm_1145 input[type="email"], #contact #mktoForm_1145 input[type="tel"], #contact #mktoForm_1145 input[type="url"], #contact #mktoForm_1145 input[type="number"], #contact #mktoForm_1145 input[type="password"], #contact #mktoForm_1145 select, #contact #mktoForm_1145 textarea { background: transparent; border: none; border-radius: 0; color: #b6b6b6; width: 100% !important; min-height: 48px; padding-left: 0; padding-right: 0; box-shadow: none; border-bottom: 1px solid #74747A; } #contact #mktoForm_1145 input:focus, #contact #mktoForm_1145 select:focus, #contact #mktoForm_1145 textarea:focus { border-bottom-color: #dbc29b; outline: none; } #contact #mktoForm_1145 select option { background-color: var(--background-secondary); } /* Placeholder colour */ #contact #mktoForm_1145 ::placeholder { color: #F7F7F7; color: rgba(217, 217, 217, 0.80) !important; } .dark-form input::placeholder, .dark-form select::placeholder, .dark-form textarea::placeholder { color: rgba(217, 217, 217, 0.80) !important; } /* Error styling */ #contact #mktoForm_1145 .mktoInvalid input, #contact #mktoForm_1145 .mktoInvalid select, #contact #mktoForm_1145 .mktoInvalid textarea { border-bottom-color: #e53935; } #contact #mktoForm_1145 .mktoErrorMsg { margin-top: 6px; color: #ffffff; font-size: 13px; } /* Checkbox/consent row */ #contact #mktoForm_1145 .mktoCheckboxList { display: flex; gap: 12px; align-items: flex-start; } /* Two-column layout for desktop/tablet */ @media (min-width: 768px) { #contact #mktoForm_1145.mktoForm { grid-template-columns: 1fr 1fr; } #contact #mktoForm_1145 .mktoFormRow { grid-column: 1 / -1; /* default full width */ } /* First + Last Name, Email + Phone each split 2-col */ #contact #mktoForm_1145 .mktoFormRow:has(input[name="FirstName"]), #contact #mktoForm_1145 .mktoFormRow:has(input[name="firstName"]), #contact #mktoForm_1145 .mktoFormRow:has(input[name="LastName"]), #contact #mktoForm_1145 .mktoFormRow:has(input[name="lastName"]), #contact #mktoForm_1145 .mktoFormRow:has(input[type="email"]), #contact #mktoForm_1145 .mktoFormRow:has(input[name="Email"]), #contact #mktoForm_1145 .mktoFormRow:has(input[type="tel"]), #contact #mktoForm_1145 .mktoFormRow:has(input[name*="Phone"]) { grid-column: auto; } } /* Submit button area */ #contact #mktoForm_1145 .mktoButtonRow { grid-column: 1 / -1; margin-top: 12px; text-align: center; } #contact #mktoForm_1145 .mktoButtonRow .mktoButtonWrap { margin: 0 !important; } #contact #mktoForm_1145 button[type="submit"], #contact #mktoForm_1145 input[type="submit"] { font-family: var(--button-font); font-weight: 400; transition: all .3s ease-out; letter-spacing: var(--btn-letter-spacing); font-size: var(--btn-font-size); padding: var(--btn-padding-y) var(--btn-padding-x); height: var(--btn-height); color: var(--white); display: inline-flex; justify-content: center; align-items: center; line-height: 1; min-height: var(--btn-height); min-width: 150px; height: 45px; border-radius: 3px; text-transform: capitalize; background: var(--background-primary); border-color: var(--background-primary); } #contact #mktoForm_1145 button[type="submit"]:hover, #contact #mktoForm_1145 input[type="submit"]:hover { background: var(--background-secondary); border-color: var(--background-primary); color: var(--background-primary); } #contact .mktoForm .mktoFormCol { float: none; position: relative; min-height: 2em; } #contact .mktoForm .mktoFieldWrap { float: none; } /* If a row only contains hidden inputs, remove it from layout */ #contact #mktoForm_1145 .mktoFormRow:has(input[type="hidden"]) { display: none; } /* Some templates render an extra empty row—collapse it too */ #contact #mktoForm_1145 .mktoFormRow:empty { display: none; } /* Marketo sometimes wraps hidden fields in .mktoFieldWrap/.mktoLogicalField */ #contact #mktoForm_1145 .mktoFormRow:has(.mktoFieldWrap input[type="hidden"]), #contact #mktoForm_1145 .mktoFormRow:has(.mktoLogicalField input[type="hidden"]) { display: none; }