/** * title: Chartwell International * created: 15/04/2024 * author: Development Team * copyright: Optiva Ltd * ========================================================================== */ /** Fonts */ body { font-family: 'Poppins', sans-serif; font-weight: 300; overflow-x: hidden; scroll-behavior: smooth; } h1 { color: #003333; font-size: 56px; line-height: 62px; font-weight: 400; } h2 { color: #003333; font-size: 40px; line-height: 46px; font-weight: 400; } h3 { color: #003333; font-size: 30px; line-height: 36px; font-weight: 400; } h4 { color: #003333; font-size: 25px; line-height: 31px; font-weight: 400; } h5 { color: #003333; font-size: 20px; line-height: 26px; font-weight: 400; } h6 { color: #003333; font-size: 16px; line-height: 22px; } p { color: #666666; font-size: 20px; line-height: 26px; } li { color: #666666; font-size: 20px; line-height: 26px; } label.title { font-size: 18px; line-height: 24px; margin-bottom: 15px; } .h1 { color: #003333; font-size: 56px; line-height: 62px; font-weight: 400; } .h2 { color: #003333; font-size: 40px; line-height: 46px; font-weight: 400; } .h3 { color: #003333; font-size: 30px; line-height: 36px; font-weight: 400; } .h4 { color: #003333; font-size: 25px; line-height: 31px; font-weight: 400; } .h5 { color: #003333; font-size: 20px; line-height: 26px; font-weight: 400; } .h6 { color: #003333; font-size: 16px; line-height: 22px; } .container { max-width: 1580px; } .container.contained { max-width: 1300px; } a { color: #b8894c; text-decoration: none; } a:link { text-decoration: none; } a:hover { color: #b8894c; text-decoration: none; } a:active { text-decoration: none; } a:visited { text-decoration: none; } .btn { font-size: 20px; line-height: 22px; font-weight: 400; padding: 10px 30px; color: #b8894c; border: 2px #b8894c solid; border-radius: 30px; filter: drop-shadow(0px); box-shadow: none; transition: 0.2s; transition-timing-function: ease-in; } .btn:hover { transition: 0.2s; transition-timing-function: ease-in; } .btn:focus { transition: 0.2s; transition-timing-function: ease-in; } .btn-gold { background: #b8894c; border-color: #b8894c; color: #ffffff; } .btn-gold:hover { background: #d8a35d!important; border-color: #d8a35d!important; color: #ffffff!important; } .btn-gold:focus { background: #b8894c; border-color: #b8894c; color: #ffffff; } .btn-gold:active { background: #b8894c!important; border-color: #b8894c!important; color: #ffffff!important; } .btn-gold-keyline { background: none; border-color: #b8894c; color: #ffffff; } .btn-gold-keyline:hover { background: #b8894c!important; border-color: #b8894c!important; color: #ffffff!important; } .btn-gold-keyline:focus { background: none; border-color: #b8894c; color: #ffffff; } .btn-gold-keyline:active { background: none!important; border-color: #b8894c!important; color: #ffffff!important; } .arrow-button { font-size: 20px; line-height: 26px; font-weight: 500; text-transform: uppercase; } .arrow-button:after { content:""; display: inline-block; width: 48px; height: 16px; background: #b8894c; mask: url("../assets/arrow-right-button.svg") 50% center no-repeat; -webkit-mask: url("../assets/arrow-right-button.svg") 50% center no-repeat; margin-left: 12px; transition: 0.2s; transition-timing-function: ease-in; } .arrow-button:hover:after { margin-left: 20px; transition: 0.2s; transition-timing-function: ease-in; } .checkbox { position: relative; margin-bottom: 20px; } .checkbox label { color: #003333; font-size: 18px; font-weight: 300; padding-left: 25px; } .checkbox label.big span { font-size: 18px; line-height: 26px; margin-top: 2px; } .checkbox label span { display: block; margin-top: 2px; } .checkbox label::before { background: #eeeeee; border: none; width: 34px; height: 34px; } .checkbox label::after { color: #b8894c; border: none; width: 34px; height: 34px; left: 7px; top: 7px; padding: 0px; text-align: center; } .checkbox input[type="checkbox"]:checked + label::after { content: ""; background: #b8894c; mask: url('../assets/tick-icon.svg') center 50% no-repeat; -webkit-mask: url('../assets/tick-icon.svg') center 50% no-repeat; width: 22px; height: 22px; } .checkbox input { top: 0px; left: 0px; margin: 0px; height: 100%; width: 100%; position: absolute; } .form-control { border: 1px solid #b8894c; } .alert.danger { background: #fbe8e8; } .alert.success { background: #e8fbe9; } /* === Menu Modal =============================== */ .menu-modal { background: #0d3638; opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; min-height: 100vh; padding: 0px 20px 50px 20px; overflow: auto; top: 0px; transition: 0.4s; transition-timing-function: ease-in; z-index: 0; } .menu-modal.active { z-index: 100; opacity: 1; visibility: visible; top: 0px; transition: 0.4s; transition-timing-function: ease-in; } .menu-modal .header-content { min-height: 128px; padding-top: 26px; padding-bottom: 65px; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .header-content .close-icon { border: 2px #b8894c solid; color: #b8894c; font-size: 24px; width: 45px; height: 45px; border-radius: 50%; margin-left: 10px; text-align: center; float: right; overflow: hidden; position: relative; } .menu-modal .header-content .close-icon i { position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); margin: auto; } .menu-modal .header-content .close-icon:hover { background: #b8894c; color: #ffffff; cursor: pointer; } .menu-modal .header-content img { width: 280px; margin-top: 0px; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal.scrolled .header-content { padding-top: 26px; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal.scrolled .header-content img { width: 280px; margin-top: 0px; transition: 0.2s; transition-timing-function: ease-in; } .menu-modal .link-content { text-align: center; } .menu-modal .link-content .links { list-style: none; padding: 0px; margin: 0px; } .menu-modal .link-content .links li { font-size: 28px; line-height: 34px; font-weight: 500; margin-bottom: 15px; } .menu-modal .link-content .links li a { color: #ccd1d1; } .menu-modal .link-content .links li a:hover { color: #ffffff; } .menu-modal .link-content .info-content { padding-top: 45px; } .menu-modal .link-content .info-content h5 { color: #b8894c; font-size: 20px; line-height: 26px; } .menu-modal .link-content .info-content h4 { color: #ffffff; font-size: 28px; line-height: 34px; margin-bottom: 3px; } .menu-modal .link-content .info-content h4 a { color: #ffffff; } .menu-modal .link-content .info-content h4 a:hover { color: #b8894c; } .menu-modal .link-content .info-content p { color: #ffffff; font-size: 22px; line-height: 34px; margin-bottom: 0px; } .menu-modal .link-content .info-content p a { color: #ffffff; } .menu-modal .link-content .info-content p a:hover { color: #b8894c; } /* === Header =============================== */ .header { width: 100%; padding: 40px 40px; top: 0px; position: fixed; z-index: 50; transition: 0.2s; transition-timing-function: ease-in; } .header .logo { float: left; } .header .logo img { width: 340px; margin-top: 6px; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav { margin-top: 13px; float: right; position: relative; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav ul { padding: 0px; margin: 12px 0px 0px 0px; list-style: none; float: right; } .header .right-nav ul li { font-size: 20px; line-height: 24px; font-weight: 500; margin-right: 60px; display: inline-block; } .header .right-nav ul li::after { background: none; height: 3px; width: 0%; margin: 12px auto auto auto; display: block; content: ""; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav ul li:hover::after { background: #b8894c; width: 70%; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav ul li a { color: #ccd1d1; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav ul li a:hover { color: #b8894c; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav ul li.active a { color: #b8894c; } .header .right-nav ul li.active::after { background: #b8894c; width: 70%; transition: 0.2s; transition-timing-function: ease-in; } .header .right-nav .btn { float: right; } .header .right-nav .navigation-icon { display: none; border: 2px #b8894c solid; color: #b8894c; font-size: 24px; width: 45px; height: 45px; border-radius: 50%; margin-left: 10px; text-align: center; float: right; overflow: hidden; position: relative; } .header .right-nav .navigation-icon i { position: absolute; left: 0px; right: 0px; top: 50%; transform: translateY(-50%); margin: auto; } .header .right-nav .navigation-icon:hover { background: #b8894c; color: #ffffff; cursor: pointer; } .header .right-nav .user-icon { display: none; border: 2px #b8894c solid; color: #b8894c; font-size: 36px; width: 45px; height: 45px; border-radius: 50%; text-align: center; float: right; overflow: hidden; position: relative; } .header .right-nav .user-icon i { position: absolute; left: 0px; right: 0px; bottom: -3px; margin: auto; } .header .right-nav .user-icon:hover { background: #b8894c; color: #ffffff; cursor: pointer; } .header.scrolled { background: #0d3638; padding: 18px 40px; transition: 0.2s; transition-timing-function: ease-in; } .header.scrolled .logo img { width: 270px; margin-top: 0px; transition: 0.2s; transition-timing-function: ease-in; } .header.scrolled .right-nav { margin-top: 3px; transition: 0.2s; transition-timing-function: ease-in; } /* === Hero Slider Panel =============================== */ .hero-slider-panel { background: #0d3638; padding: 0px 40px; min-height: 620px; background-position: top center; background-repeat: no-repeat; overflow: hidden; position: relative; z-index: 3; } .hero-slider-panel .col { min-height: 620px; position: relative; } .hero-slider-panel .slider { width: 100%; top: 50%; transform: translateY(-50%); left: calc(var(--bs-gutter-x) * .5); right: auto; margin: auto; position: absolute; } .hero-slider-panel .center-content { width: 90%; } .hero-slider-panel .center-content h1 { margin-bottom: 20px; } .hero-slider-panel .center-content h3:first-child { margin-bottom: 20px; } .hero-slider-panel .center-content h3 { margin-bottom: 40px; } .hero-slider-panel .side-mask { width: 88%; height: 88%; bottom: -60px; left: 0px; right: 0px; margin: auto; mask: url('../assets/hero-panel-mask.svg') 50% center no-repeat; -webkit-mask: url('../assets/hero-panel-mask.svg') 50% center no-repeat; position: absolute; } .hero-slider-panel .side-mask .background { background-position: 50% center; background-repeat: no-repeat; width: 100%; height: 100%; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } .hero-slider-panel .slick-dots { bottom: -160px; } .hero-slider-panel .center-content h1 { opacity: 0; visibility: hidden; position: relative; } .hero-slider-panel .center-content h1 { animation-name: hero-panel-content-h1; animation-duration: 1s; animation-delay: 0.6s; animation-fill-mode: forwards; animation-iteration-count: 1; } @keyframes hero-panel-content-h1 { 0% { visibility: hidden; opacity: 0; top: 50px; } 100% { visibility: visible; opacity: 1; top: 0px; } } .hero-slider-panel .center-content h3 { opacity: 0; visibility: hidden; position: relative; } .hero-slider-panel .center-content h3 { animation-name: hero-panel-content-h5; animation-duration: 1s; animation-delay: 0.9s; animation-fill-mode: forwards; animation-iteration-count: 1; } @keyframes hero-panel-content-h5 { 0% { visibility: hidden; opacity: 0; top: 50px; } 100% { visibility: visible; opacity: 1; top: 0px; } } .hero-slider-panel .center-content .arrow-button { opacity: 0; visibility: hidden; position: relative; } .hero-slider-panel .center-content .arrow-button { animation-name: hero-panel-content-arrow-button; animation-duration: 1s; animation-delay: 1.2s; animation-fill-mode: forwards; animation-iteration-count: 1; } @keyframes hero-panel-content-arrow-button { 0% { visibility: hidden; opacity: 0; top: 50px; } 100% { visibility: visible; opacity: 1; top: 0px; } } /* === Solutions Slider Panel =============================== */ .solutions-slider-panel { background: #ffffff; padding: 90px 40px; overflow: hidden; position: relative; } .solutions-slider-panel .text-content { width: 100%; max-width: 460px; } .solutions-slider-panel .text-content h2 { margin-bottom: 30px; } .solutions-slider-panel .slick-slider { position: unset; } .solutions-slider-panel .slick-slider .gallery-arrow { background: #b8894c; width: 54px; height: 18px; bottom: 90px; right: auto; text-align: center; cursor: pointer; margin: auto; position: absolute; z-index: 5; } .solutions-slider-panel .slick-slider .gallery-arrow.prev { background: #1d1d1b; left: 180px; mask: url('../assets/arrow-left-button.svg') 50% center no-repeat; -webkit-mask: url('../assets/arrow-left-button.svg') 50% center no-repeat; } .solutions-slider-panel .slick-slider .gallery-arrow.next { background: #1d1d1b; left: 260px; mask: url('../assets/arrow-right-button.svg') 50% center no-repeat; -webkit-mask: url('../assets/arrow-right-button.svg') 50% center no-repeat; } .solutions-slider-panel .slick-slider .gallery-arrow:hover { background: #b8894c; } #home-panel-2 + div .solutions-slider-panel { background: #fbfcff; padding-top: 40px; } .solutions-slider-cutoff-panel { background: #ffffff; padding: 110px 0px; overflow: hidden; position: relative; } .solutions-slider-cutoff-panel .slide-spacer { background: #ffffff; width: 100%; height: 100%; max-width: 670px; position: absolute; z-index: 1; } .solutions-slider-cutoff-panel .text-content { width: 100%; left: 130px; max-width: 500px; position: absolute; } .solutions-slider-cutoff-panel .text-content h2 { margin-bottom: 30px; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow { background: #b8894c; width: 54px; height: 18px; bottom: 0px; right: auto; text-align: center; cursor: pointer; margin: auto; position: absolute; z-index: 10; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.prev { background: #1d1d1b; left: 180px; mask: url('../assets/arrow-left-button.svg') 50% center no-repeat; -webkit-mask: url('../assets/arrow-left-button.svg') 50% center no-repeat; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.next { background: #1d1d1b; left: 260px; mask: url('../assets/arrow-right-button.svg') 50% center no-repeat; -webkit-mask: url('../assets/arrow-right-button.svg') 50% center no-repeat; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow:hover { background: #b8894c; } .solution-feature { background: #ffffff; border: 2px #adadad solid; border-radius: 10px; width: 90%; max-width: 500px; height: 100%; padding: 28px 50px 35px 50px; margin: 0px; text-align: left; position: relative; transition: 0.2s; transition-timing-function: ease-in; } .solution-feature img { height: 60px; margin-bottom: 18px; } .solution-feature h4 { color: #003333!important; margin-bottom: 15px; transition: 0.2s; transition-timing-function: ease-in; } .solution-feature p { color: #666666!important; font-size: 18px; line-height: 24px; min-height: 120px; margin-bottom: 40px; } .solution-feature .arrow-button { font-size: 18px; line-height: 24px; bottom: 35px; position: absolute; } .slick-current .solution-feature { background: #f8f8f8; transition: 0.2s; transition-timing-function: ease-in; } .solution-feature:hover { border-color: #b8894c; transition: 0.2s; transition-timing-function: ease-in; } .solution-feature.center { margin-left: auto; margin-right: auto; } .solution-feature:hover h4 { color: #b8894c!important; transition: 0.2s; transition-timing-function: ease-in; } .solution-feature.big { padding: 28px 35px 35px 35px; } .solution-feature.big h4 { font-size: 30px; line-height: 36px; margin-bottom: 15px; } .solution-feature.big p { font-size: 20px; line-height: 26px; } /* === Content Panel =============================== */ .content-panel { padding: 105px 40px 105px 40px; background-position: top center; background-repeat: no-repeat; overflow: hidden; position: relative; width: 100%; } .content-panel .container.contained { max-width: 1620px; } .content-panel ul { list-style: none; padding: 0px; margin: 0px 0px 30px 0px; width: 100%; } .content-panel ul.no-border li { border: 0px; } .content-panel li { padding: 12px 0px; border-bottom: 1px #b8894c solid; } .content-panel li:first-child { padding-top: 0px; } .content-panel li:last-child { border: none; } .content-panel h6 { color: #333333; margin-bottom: 15px; } .content-panel h5 { color: #333333; margin-bottom: 25px; } .content-panel h2 { margin-bottom: 25px; } .content-panel h3 { margin-bottom: 25px; } .content-panel h4 { color: #00a8b7; margin-bottom: 25px; } .content-panel p { color: #666666; margin-bottom: 30px; } .content-panel .center-content *:last-child { margin-bottom: 0px; } .content-panel li { color: #666666; } .content-panel strong { font-weight: 600; } .content-panel h2 + p + p { margin-bottom: 0px; } .content-panel .center-content { width: 100%; margin-left: 0; margin-right: 0; } /* Vertical Center */ .content-panel.vertical-center { min-height: 950px; padding: 0px 40px 0px 40px; } .content-panel.vertical-center .col { min-height: 950px; position: relative; } .content-panel.vertical-center .center-content { position: absolute; left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); top: 50%; transform: translateY(-50%); width: 87%; margin: auto; } .left.content-panel.vertical-center .center-content { margin-left: 0px; } .right.content-panel.vertical-center .center-content { margin-left: 0px; } .content-panel.vertical-center.height-1100 { min-height: 1100px; } .content-panel.vertical-center.height-1100 .col { min-height: 1100px; } .content-panel.vertical-center.height-1000 { min-height: 1000px; } .content-panel.vertical-center.height-1000 .col { min-height: 1000px; } .content-panel.vertical-center.height-900 { min-height: 900px; } .content-panel.vertical-center.height-900 .col { min-height: 900px; } .content-panel.vertical-center.height-800 { min-height: 800px; } .content-panel.vertical-center.height-800 .col { min-height: 800px; } .content-panel.vertical-center.height-700 { min-height: 700px; } .content-panel.vertical-center.height-700 .col { min-height: 700px; } .content-panel.vertical-center.height-600 { min-height: 600px; } .content-panel.vertical-center.height-600 .col { min-height: 600px; } .content-panel.inside-bg .background { width: 100%; height: 72%; left: 0px; top: 0px; position: absolute; } .content-panel.inside-bg .container { z-index: 1; position: relative; } .content-panel .container.features { max-width: 1500px; } .content-panel .container.features .col { margin-bottom: 30px; } /* === Internal Header Panel =============================== */ .internal-header-panel { background: #0d3638; padding: 0px 40px; min-height: 520px; overflow: hidden; background-position: top center; background-repeat: no-repeat; position: relative; z-index: 3; } .internal-header-panel .col { min-height: 520px; position: relative; } .internal-header-panel .center-content { width: auto; top: 50%; transform: translateY(-50%); left: calc(var(--bs-gutter-x) * .5); right: calc(var(--bs-gutter-x) * .5); margin: 50px auto auto auto; position: absolute; } .internal-header-panel .center-content h1 { margin-bottom: 20px; } .internal-header-panel .center-content h3 { margin-bottom: 45px; } .internal-header-panel.small { min-height: 0px; padding: 210px 40px 80px 40px; } .internal-header-panel.small .col { min-height: 0px; } .internal-header-panel.small .center-content { margin: 0px auto auto auto; top: auto; transform: none; position: relative; } /* === Overview Accordion Panel =============================== */ .steps-accordion-panel { background: #ffffff url('../assets/steps-accordion-panel-bg.jpg') bottom center no-repeat; min-height: 850px; padding: 60px 40px 110px 40px; overflow: hidden; position: relative; } .steps-accordion-panel .col { position: relative; } .steps-accordion-panel .accordion { border: 0px; border-radius: 0px; overflow: hidden; } .steps-accordion-panel .accordion-item { background: #f8f8f8; border: 2px #adadad solid; border-radius: 15px; margin-bottom: 30px; overflow: hidden; } .steps-accordion-panel .accordion-button { background: none!important; position: relative; display: block; padding: 45px; border: 0px; border-radius: 0px; box-shadow: none; } .steps-accordion-panel .accordion-button .circle-number { width: 98px; height: 98px; border: 2px #ff7200 solid; border-radius: 50%; color: #1b1631; font-size: 32px; font-weight: 600; text-align: center; position: relative; } .steps-accordion-panel .accordion-button .circle-number span { top: 50%; transform: translateY(-50%); left: 0px; right: 0px; margin: auto; position: absolute; } .steps-accordion-panel .accordion-button h4 { font-size: 30px; line-height: 34px; width: 78%; top: 50%; transform: translateY(-50%); margin: auto; position: absolute; } .steps-accordion-panel .accordion-collapse { top: -10px; position: relative; } .steps-accordion-panel .accordion-body { border: 0px; padding: 0px 45px 15px 45px; } .steps-accordion-panel .accordion-body p { font-size: 20px; line-height: 26px; } .steps-accordion-panel .accordion-body *:last-child { margin-bottom: 0px; } .steps-accordion-panel .accordion-body .arrow-button { font-size: 20px; line-height: 26px; } .steps-accordion-panel .text-content { width: 100%; max-width: 450px; } /* === Contact Panel =============================== */ .contact-panel { padding: 70px 40px 70px 40px; overflow: hidden; position: relative; } .contact-panel .form-group { margin-bottom: 25px; } .contact-panel .formeo-column label { color: #003333; font-size: 18px; line-height: 24px; margin-bottom: 10px; } .contact-panel .formeo-column label br { display: none; } .contact-panel .formeo-column p { color: #003333; font-size: 18px; line-height: 24px; margin-bottom: 0px; } .contact-panel .form-control { border: 1px solid #b8894c; height: 39px; } .contact-panel .formeo.formeo-render .formeo-column:first-of-type { padding-left: 0; } .contact-panel .formeo.formeo-render .formeo-column:last-of-type { padding-right: 0; } .contact-panel .formeo.formeo-render .formeo-column { padding: 0 8px; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group { position: relative; padding-left: 20px; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group label { line-height: 34px; display: inline-block; vertical-align: middle; position: relative; padding-left: 25px; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group label::before { content: ""; display: inline-block; position: absolute; background: #eeeeee; border: none; width: 34px; height: 34px; left: 0; margin-left: -20px; border-radius: 3px; -webkit-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; -o-transition: border 0.15s ease-in-out, color 0.15s ease-in-out; transition: border 0.15s ease-in-out, color 0.15s ease-in-out; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group label::after { content: ""; background: #eeeeee; mask: url('../assets/tick-icon.svg') center 50% no-repeat; -webkit-mask: url('../assets/tick-icon.svg') center 50% no-repeat; width: 22px; height: 22px; display: inline-block; position: absolute; left: 0; top: 0; margin-left: -20px; left: 7px; top: 7px; font-size: 11px; color: #666; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="checkbox"], .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="radio"] { opacity: 0; z-index: 1;cursor: pointer; position: absolute; left: 0px; height: 100%; width: 100%; margin: 0px; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="checkbox"]:focus + label::before, .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="radio"]:focus + label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="checkbox"]:checked + label::after, .contact-panel .formeo-row-wrap:nth-child(5) .f-field-group input[type="radio"]:checked + label::after { background: #b8894c; } .contact-panel .contact-details { text-align: right; } .contact-panel .contact-details h4 { font-weight: 500; } .contact-panel .contact-details h5 { font-size: 20px; line-height: 26px; font-weight: 500; } .contact-panel .contact-details p { margin-top: 40px; } /* === Features White Box =============================== */ .features-white-box { background: #ffffff; border-radius: 25px; padding: 50px; position: relative; } .features-white-box.margin-top { margin-top: 80px; } .features-white-box .container { max-width: 1380px; } .features-white-box .titles h3 { margin-bottom: 15px; } .features-white-box .titles p { color: #999999; margin-bottom: 40px; } .features-white-box .keyline-box-feature { width: 90%; margin: auto; } .keyline-box-feature { background: #ffffff; border: 1px #b8894c solid; border-radius: 10px; height: 100%; padding: 25px 50px 25px 25px; text-align: left; font-size: 0px; outline: 1px #ffffff solid; position: relative; transition: 0.2s; transition-timing-function: ease-in; } .keyline-box-feature .icon { width: 22%; padding-left: 10px; display: inline-block; vertical-align: top; } .keyline-box-feature .icon img { max-width: 70%; margin-bottom: 15px; } .keyline-box-feature .inside-text { width: 78%; display: inline-block; vertical-align: top; } .keyline-box-feature .inside-text h4 { color: #003333; font-weight: 600; margin-bottom: 12px; transition: 0.2s; transition-timing-function: ease-in; } .keyline-box-feature .inside-text p { color: #666666; font-size: 18px; line-height: 24px; margin-bottom: 45px; } .keyline-box-feature .inside-text .arrow-button { font-size: 18px; line-height: 24px; bottom: 25px; position: absolute; } .keyline-box-feature:hover { outline: 1px #b8894c solid; transition: 0.2s; transition-timing-function: ease-in; } .keyline-box-feature:hover .inside-text h4 { color: #b8894c; transition: 0.2s; transition-timing-function: ease-in; } /* === Footer CTA Links =============================== */ .footer-cta-links { background: #003333; padding: 10px 40px 0px 40px; margin-bottom: -50px; text-align: right; position: relative; z-index: 1; } .footer-cta-links h3 { font-size: 23px; line-height: 33px; margin-top: 8px; margin-bottom: 0px; } .footer-cta-links h3 a { color: #ffffff; } .footer-cta-links h3 a:hover { color: #b8894c; } /* === ID Panels =============================== */ #home-panel-2 { background-color: #fafbff; background-size: 1600px; background-position: bottom left; padding-top: 120px; padding-bottom: 160px; } /* === Dark Theme =============================== */ .dark-theme h1 { color: #ffffff; } .dark-theme h2 { color: #ffffff; } .dark-theme h3 { color: #ffffff; } .dark-theme h4 { color: #ffffff; } .dark-theme h5 { color: #cccccc; } .dark-theme h6 { color: #ffffff; } .dark-theme p { color: #cccccc; } .dark-theme li { color: #cccccc; } /* === Footer =============================== */ footer { background: #003333; position: relative; } footer .footer-top { padding: 50px 40px 60px 40px; } footer .footer-top .col { position: relative; } footer .footer-top .details img { max-width: 265px; margin-bottom: 50px; } footer .footer-top .details h4 { margin-bottom: 70px; } footer .footer-top .details h5 { font-weight: 400; margin: 0px; } footer .footer-top .links { padding-top: 40px; text-align: right; } footer .footer-top .links ul { list-style: none; padding: 0px; margin: 0px 0px 70px 0px; } footer .footer-top .links ul li { font-size: 23px; line-height: 33px; font-weight: 400; margin-bottom: 8px; } footer .footer-top .links ul li a { color: #ffffff; } footer .footer-top .links ul li a:hover { color: #b8894c; } footer .footer-top .links h4 { color: #b8894c; } footer .footer-top .links h4 a { color: #ffffff; } footer .footer-top .links h4 a:hover { color: #b8894c; } footer .footer-top .links h5 { color: #b8894c; font-size: 22px; line-height: 28px; font-weight: 400; margin: 0px; } footer .footer-top .links h5 a { color: #ffffff; } footer .footer-top .links h5 a:hover { color: #b8894c; } footer .footer-top .links .contact-details { bottom: 0px; right: calc(var(--bs-gutter-x) * .5); position: absolute; } footer .footer-bottom { padding: 40px 40px 60px 40px; border-top: 1px #b8894c solid; } footer .footer-bottom p { font-size: 15px; line-height: 21px; font-weight: 400; } footer .footer-bottom h6 { color: #cccccc; margin-top: 40px; } /* === Media Queries =============================== */ @media screen and (max-width: 1800px) { .solutions-slider-cutoff-panel .slide-spacer { max-width: 630px; } .solutions-slider-cutoff-panel .text-content { left: 50px; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.prev { left: 50px; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.next { left: 140px; } } @media screen and (max-width: 1750px) { .solutions-slider-panel .slick-slider .gallery-arrow.prev { left: 50px; } .solutions-slider-panel .slick-slider .gallery-arrow.next { left: 140px; } } @media screen and (max-width: 1700px) { h1 { font-size: 45px; line-height: 51px; } h2 { font-size: 36px; line-height: 42px; } h3 { font-size: 28px; line-height: 34px; } h4 { font-size: 26px; line-height: 32px; } h5 { font-size: 20px; line-height: 26px; } h6 { font-size: 14px; line-height: 20px; } .h1 { font-size: 45px; line-height: 51px; } .h2 { font-size: 36px; line-height: 42px; } .h3 { font-size: 28px; line-height: 34px; } .h4 { font-size: 26px; line-height: 32px; } .h5 { font-size: 20px; line-height: 26px; } .h6 { font-size: 16px; line-height: 22px; } .btn { font-size: 20px; line-height: 22px; } .header .logo img { width: 335px; } .header .right-nav { margin-top: 8px; } .header .right-nav ul li { font-size: 18px; line-height: 22px; margin-right: 55px; } .header.scrolled .logo img { width: 280px; } .header.scrolled .right-nav { margin-top: 3px; } .hero-slider-panel { min-height: 600px; } .hero-slider-panel .col { min-height: 600px; } .internal-header-panel { min-height: 480px; } .internal-header-panel .col { min-height: 480px; } .internal-header-panel .center-content { margin-top: 50px; } .content-panel { padding: 100px 40px 100px 40px; } .content-panel .center-content { width: 85%; } .content-panel.vertical-center.height-900 { min-height: 700px; } .content-panel.vertical-center.height-900 .col { min-height: 700px; } .content-panel.vertical-center.height-800 { min-height: 700px; } .content-panel.vertical-center.height-800 .col { min-height: 700px; } .content-panel.vertical-center.height-700 { min-height: 600px; } .content-panel.vertical-center.height-700 .col { min-height: 600px; } #home-panel-2 { background-size: 1350px; padding-top: 100px; padding-bottom: 140px; } .solution-feature p { font-size: 16px; line-height: 22px; min-height: 150px; margin-bottom: 30px; } .solution-feature.big h4 { font-size: 26px; line-height: 32px; } .solution-feature.big p { font-size: 18px; line-height: 24px; } .solution-feature .arrow-button { font-size: 17px; line-height: 23px; } .solutions-slider-cutoff-panel .slide-spacer { max-width: 610px; } .solutions-slider-cutoff-panel .text-content { max-width: 460px; } .steps-accordion-panel { min-height: 700px; } .steps-accordion-panel .accordion-button h4 { font-size: 26px; line-height: 32px; } .steps-accordion-panel .accordion-body p { font-size: 18px; line-height: 24px; } .footer-cta-links h3 { font-size: 20px; line-height: 28px; } footer .footer-bottom p { font-size: 13px; line-height: 20px; font-weight: 400; } footer .footer-top .details img { max-width: 240px; margin-bottom: 70px; } footer .footer-top .details h5 { font-size: 18px; line-height: 24px; } footer .footer-top .links ul li { font-size: 20px; line-height: 28px; } footer .footer-top .links h5 { font-size: 17px; line-height: 24px; } } @media screen and (max-width: 1620px) { .solutions-slider-cutoff-panel .slide-spacer { max-width: 580px; } .solutions-slider-cutoff-panel .text-content { max-width: 430px; } } @media screen and (max-width: 1600px) { h1 { font-size: 42px; line-height: 48px; } h2 { font-size: 35px; line-height: 42px; } p { font-size: 19px; line-height: 25px; } li { font-size: 19px; line-height: 25px; } .h1 { font-size: 42px; line-height: 48px; } .h2 { font-size: 35px; line-height: 42px; } .btn { font-size: 18px; line-height: 20px; } .header .right-nav ul li { font-size: 17px; } .solution-feature { padding: 20px 30px 30px 30px; } #home-panel-2 { background-size: 1250px; padding-top: 80px; padding-bottom: 120px; } } @media screen and (max-width: 1540px) { .solutions-slider-cutoff-panel .slide-spacer { max-width: 555px; } } @media screen and (max-width: 1500px) { .solutions-slider-cutoff-panel .text-content { max-width: 400px; } .solutions-slider-cutoff-panel .slide-spacer { max-width: 485px; } } @media screen and (max-width: 1400px) { h3 { font-size: 28px; line-height: 36px; } .h3 { font-size: 28px; line-height: 36px; } .header .logo img { width: 280px; } .header .right-nav { margin-top: 2px; } .header .right-nav ul li { font-size: 16px; margin-right: 35px; } .header.scrolled .logo img { width: 250px; } .header.scrolled .right-nav { margin-top: 1px; } .solutions-slider-panel .text-content { max-width: 380px; } .solutions-slider-cutoff-panel .slide-spacer { max-width: 465px; } .solutions-slider-cutoff-panel .text-content { max-width: 330px; } .solution-feature { width: 94%; } #home-panel-2 { background-size: 1150px; background-position: top left; padding-top: 100px; padding-bottom: 70px; } } @media screen and (max-width: 1350px) { .header .right-nav ul li { margin-right: 30px; } .solutions-slider-cutoff-panel { padding-bottom: 160px; } .solutions-slider-cutoff-panel .text-content { max-width: 600px; margin: auto auto 50px auto; left: 0px; right: 0px; text-align: center; position: relative; } .solutions-slider-cutoff-panel .slide-spacer { max-width: 90%; margin: auto; position: relative; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow { bottom: -60px; } } @media screen and (max-width: 1200px) { h1 { font-size: 41px; line-height: 47px; } h2 { font-size: 32px; line-height: 38px; } h3 { font-size: 26px; line-height: 32px; } h4 { font-size: 24px; line-height: 30px; } p { font-size: 18px; line-height: 24px; } li { font-size: 18px; line-height: 24px; } .h1 { font-size: 41px; line-height: 47px; } .h2 { font-size: 32px; line-height: 38px; } .h3 { font-size: 26px; line-height: 32px; } .h4 { font-size: 25px; line-height: 31px; } .arrow-button { font-size: 20px; line-height: 26px; } .header { padding: 26px 20px; } .header.scrolled { padding: 18px 20px; } .header .logo img { margin-top: 0px; } .header .right-nav .navigation-icon { display: block; } .header .right-nav .user-icon { display: block; } .header .right-nav ul { display: none; } .header .right-nav .btn { display: none; } .hero-slider-panel { padding: 0px 20px; } .hero-slider-panel .center-content { width: 90%; } .hero-slider-panel .side-mask { width: 82%; height: 82%; bottom: 0px; right: 40px; } .internal-header-panel { padding: 0px 20px; } .content-panel { padding: 90px 20px 90px 20px; } .content-panel.vertical-center { padding: 0px 20px 0px 20px; } .solutions-slider-panel { padding: 90px 20px 160px 20px; } .solutions-slider-panel .text-content { max-width: 100%; text-align: center; margin-bottom: 40px; } .solutions-slider-panel .text-content h2 { margin-bottom: 15px; } .solutions-slider-panel .slick-slider .gallery-arrow.prev { left: -120px; right: 0px; } .solutions-slider-panel .slick-slider .gallery-arrow.next { left: 0px; right: -120px; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.prev { left: -120px; right: 0px; } .solutions-slider-cutoff-panel .slick-slider .gallery-arrow.next { left: 0px; right: -120px; } .solution-feature { margin: auto; } .steps-accordion-panel .text-content { max-width: 100%; margin-bottom: 40px; text-align: center; } .features-white-box .col.col-xl-6 { margin-bottom: 30px; } .footer-cta-links { padding-left: 20px; padding-right: 20px; } footer .footer-top { padding: 50px 20px 60px 20px; } footer .footer-top .links h4 { font-size: 28px; line-height: 34px; } footer .footer-top .links h5 { font-size: 18px; line-height: 24px; } footer .footer-bottom { padding: 40px 20px 60px 20px; } } @media screen and (max-width: 991px) { h1 { font-size: 39px; line-height: 45px; } h2 { font-size: 30px; line-height: 36px; } h3 { font-size: 26px; line-height: 32px; } h4 { font-size: 23px; line-height: 29px; } .h1 { font-size: 39px; line-height: 45px; } .h2 { font-size: 30px; line-height: 36px; } .h3 { font-size: 26px; line-height: 32px; } .h4 { font-size: 23px; line-height: 29px; } .arrow-button { font-size: 19px; line-height: 25px; } .hero-slider-panel { padding: 120px 20px 280px 20px; min-height: 0px; text-align: center; } .hero-slider-panel .col { min-height: 0px; } .hero-slider-panel .center-content { width: 92%; margin: auto; } .hero-slider-panel .center-content h1 { margin-bottom: 15px; } .hero-slider-panel .center-content h3 { margin-bottom: 35px; } .hero-slider-panel .side-mask { width: 82%; height: 82%; left: 0px; right: 0px; bottom: -150px; min-height: 350px; position: relative; margin: auto auto -280px auto; } .hero-slider-panel .slider { width: auto; top: auto; transform: none; left: auto; right: auto; margin: auto; position: relative; z-index: 1; } .hero-slider-panel .slick-dots { text-align: center; left: 0px; right: 0px; bottom: -100px; } .internal-header-panel { padding: 120px 20px 70px 20px; min-height: 0px; text-align: center; } .internal-header-panel .col { min-height: 0px; } .internal-header-panel .center-content { width: 100%; top: auto; left: auto; right: auto; transform: none; margin-top: 0px; position: relative; } .internal-header-panel .center-content h1 { margin-bottom: 15px; } .internal-header-panel .center-content h3 { margin-bottom: 35px; } .internal-header-panel.small { padding: 140px 20px 50px 20px; } .content-panel { min-height: 0px; } .content-panel .center-content { width: 100%; left: auto; right: auto; } .content-panel.vertical-center { min-height: 0px!important; padding-top: 80px; padding-bottom: 80px; } .content-panel.vertical-center .col { min-height: 0px!important; } .content-panel.vertical-center .center-content { width: 100%; top: auto; left: auto; right: auto; transform: none; position: relative; } #home-panel-2 { background-image: none!important; text-align: center; padding-top: 70px; } .steps-accordion-panel { padding: 80px 20px 80px 20px; } .keyline-box-feature .inside-text p { font-size: 18px; line-height: 24px; } .keyline-box-feature .inside-text p.big { font-size: 18px; line-height: 24px; } .features-white-box { padding: 40px; } .contact-panel { padding: 60px 20px 60px 20px; } .contact-panel .contact-details { text-align: center; padding-top: 60px; } .footer-cta-links { text-align: center; margin-bottom: 0px; } .footer-cta-links h3 { font-size: 24px; line-height: 30px; } footer .footer-top { text-align: center; } footer .footer-top .details img { max-width: 240px; margin-bottom: 40px; } footer .footer-top .details h5 { font-size: 16px; line-height: 22px; } footer .footer-top .links { text-align: center; } footer .footer-top .links .contact-details { bottom: auto; right: auto; position: relative; } } @media screen and (max-width: 767px) { h1 { font-size: 37px; line-height: 42px; } h2 { font-size: 24px; line-height: 30px; } h3 { font-size: 21px; line-height: 26px; } h4 { font-size: 21px; line-height: 26px; } p { font-size: 16px; line-height: 22px; } li { font-size: 16px; line-height: 22px; } .h1 { font-size: 37px; line-height: 42px; } .h2 { font-size: 24px; line-height: 30px; } .h3 { font-size: 20px; line-height: 26px; } .h4 { font-size: 20px; line-height: 26px; } .arrow-button { font-size: 18px; line-height: 24px; } .menu-modal .header-content img { width: 235px; } .menu-modal.scrolled .header-content img { width: 235px; } .menu-modal .link-content .links li { font-size: 22px; line-height: 28px; margin-bottom: 10px; } .menu-modal .link-content .info-content h4 { margin-bottom: 5px; } .menu-modal .link-content .info-content p { font-size: 16px; line-height: 24px; } .header .logo img { width: 200px; } .header .right-nav { margin-top: 0px; } .header .right-nav .navigation-icon { font-size: 22px; width: 40px; height: 40px; } .header .right-nav .user-icon { font-size: 31px; width: 40px; height: 40px; } .header.scrolled .logo img { width: 200px; } .header.scrolled .right-nav { margin-top: 0px; } .hero-slider-panel .side-mask { bottom: -80px; margin: auto auto -320px auto; } .hero-slider-panel .center-content { width: 98%; } .content-panel { padding: 50px 20px 50px 20px; text-align: center; } .content-panel.mobile-white-bg { background: #ffffff!important; } .content-panel h2 { margin-bottom: 18px; } .content-panel h2 br { display: none; } .solutions-slider-cutoff-panel { padding-top: 80px; } .solution-feature.big { width: 100%; } .solution-feature.big h4 { font-size: 24px; line-height: 30px; } .solution-feature.big p { font-size: 16px; line-height: 22px; } .features-white-box { padding: 40px 10px; } .features-white-box .keyline-box-feature { width: 96%; } .keyline-box-feature { padding: 20px 30px 20px 20px; } .keyline-box-feature .icon { width: 100%; display: block; } .keyline-box-feature .icon img { max-width: 65px; } .keyline-box-feature .inside-text { width: 100%; display: block; } .keyline-box-feature .inside-text p { font-size: 16px; line-height: 22px; } .keyline-box-feature .inside-text .arrow-button { font-size: 16px; line-height: 22px; } .steps-accordion-panel { padding: 60px 20px 60px 20px; } .steps-accordion-panel .accordion-button { padding: 35px 20px; } .steps-accordion-panel .accordion-button h4 { font-size: 22px; line-height: 28px; } .steps-accordion-panel .accordion-body { padding: 0px 20px 15px 20px; } .steps-accordion-panel .accordion-body p { font-size: 16px; line-height: 22px; } footer .footer-top .details img { max-width: 220px; margin-bottom: 30px; } footer .footer-top .links h4 { font-size: 24px; line-height: 30px; } } @media screen and (max-width: 500px) { .arrow-button { font-size: 16px; line-height: 22px; } } /** * Slick Slider * ========================================================================== */ .slick-slider { position: relative; display: block; } .slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; } .slick-list:focus { outline: none; } .slick-list.dragging { cursor: pointer; } .slick-track { position: relative; top: 0; left: 0; display: block; } .slick-track:before, .slick-track:after { display: table; content: ''; } .slick-track:after { clear: both; } .slick-loading .slick-track { visibility: hidden; } .slick-slide { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: none; float: left; height: 100%; min-height: 1px; } .slick-slide img { display: block; } .slick-slide.slick-loading img { display: none; } .slick-initialized .slick-slide { display: block; } .slick-loading .slick-slide { visibility: hidden; } .slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; } .slick-arrow.slick-hidden { display: none; } .slick-dots { position: absolute; top: auto; bottom: -80px; left: 0px; display: block; width: 100%; list-style: none; text-align: left; padding-right: 0px; padding-left: 0px; } .slick-dots li { position: relative; display: inline-block; width: 26px; height: 38px; margin: 0px 3px 0px 3px; padding: 0; cursor: pointer; border: 0px; } .slick-dots li button { background: none; border: 2px #ccc solid; font-size: 0; line-height: 0; display: block; height: 18px; width: 18px; padding: 0px; margin: auto; top: 50%; transform: translateY(-50%); left: 0px; right: 0px; position: absolute; cursor: pointer; color: #cc0000; outline: none; } .slick-dots li button:hover,.slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before,.slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { font-size: 10px; line-height: 20px; position: absolute; top: 0; left: 0; right: 0; width: 18px; height: 18px; content: ''; text-align: center; opacity: .25; color: #051D49; } .slick-dots li.slick-active button:before { opacity: 1; color: #ccc !important; height: 30px; width: 30px; } .slick-dots li.slick-active { background: none; height: 38px; width: 38px; } .slick-dots li.slick-active button { background: none; border: 2px #b8894c solid; height: 30px; width: 30px; }